画布

画布是你探索创意的地方。直接在画布中绘制图形,或者导入一个设备 Frame。通过本篇文档来学习如何绘制界面。

Framer X 和其它很多设计工具类似,都有一块很大的画布,设备预览面板,和一些列工具按钮。你可以使用这些小工具快速创建形状、文字,并使用右侧的属性面板来调节它们的样式。你可以直接在画布中绘制,也可以导入一些矢量图形,或者是画几个 Frame 来创建一个多界面的 app 流程。虽然直接在画布中绘制形状也可以给它们添加一些小动效,但如果你要设计复杂的响应式的 app 原型我们还是推荐使用 Frame。

视图导览

抓取拖动

当你需要在视图中快速拖动画布时,可以选择拖动工具(Pan)或者按下 Space 键,再使用鼠标拖动画布来查看不同区域。

缩放视图

你可以使用缩放工具(或者按住 Z),来快速缩放视图。最小可以缩小至 10% 来概览整个工作区,最大可以放大至 3200% 来查看设计细节。

直接选中元素

通常来说,你可以在画布中点击元素来选取它们。但是如果你想直接选中最深层级的元素,可以以在点击元素时按住 CMD 键,这样就会直接选中最深层元素,而不是一个 Group 或者 Frame。

尺寸缩放

拖动图层的四个角可以进行缩放。缩放时按住 Shift 键可以保持图层的宽高比,按住 Option 键可以同时对称变换。

旋转

当你把鼠标移到 Frame 或 Shape 四个角的外边时,可以看到光标变成了旋转曲线形状,此时可以旋转元素。或者,你也可以在右侧的属性面板中来设置旋转角度。

圆角

点击元素左上角的那个小圆点,可以对元素的圆角进行快速调节。你只需要朝元素中心或外侧拖拽它,就可以了。当然,你也可以在右侧的属性面板中去调节它。

导入

Framer X 内置一个 Sketch 插件,因此你可以直接将 Sketch 中的画板或元素复制粘贴到 Framer X 中。

下面是 Framer X 对 Sketch 元素类型兼容的清单:

支持 不支持
画板 嵌套 Symbol
描边设定
形状 蒙版图层
文本 图像填充
路径 经向渐变
布尔操作 角度渐变
Symbols

导出

在 Framer X 中你可以直接导出你的作品。你可以在右下角的导出设置中同时导出多个尺寸的图片去适配不同分辨率的设备。默认情况点击加号会给你生成默认得导出设置,你也可以自己选择修改。中间的选项如果选择了后缀(suffix)模式,它会自动添加后缀到你的文件末尾,当然你也可以选择文件夹(folder)模式,以文件夹来组织不同尺寸的图片。

格式 尺寸
PNG .5x
JPG 1x
PDF 1.5x
WEBP 2x
SVG 3x
4x

CSS & SVG

右击一个图层,选择「Copy CSS」来复制 CSS 代码,或者选择「Copy SVG」来复制 SVG 代码。然后就可以直接将这些代码粘贴到代码编辑器中使用。

复制图片

Framer X 还支持快速导出图片,你只需要右击一个图层,选择「Copy Image」或者按 CMD + C 就可以将图层复制为图像。然后,你就可以在任何地方粘贴图像了,比如说把它贴在文档中,或者发给同事获取反馈。

导出预置

Framer X 有一系列导出预置。iOS 和 Android 的导出预置包含很多平台开发所需的尺寸,如果你想自定义,直接点击到处面板右侧的加号就好了。

iOS Android
1x 1x
2x 1.5x
3x 2x
3x
4x