工具

设计响应式的界面,绘制细节丰富的图标和插画,创建多界面可交互原型。

布局

Framer X 的元素布局设置是经过巧妙构思的。它可以智能猜测元素层级,自动设置响应式边界,让你在设计响应式界面时更加高效快捷。

Frame

使用我们的 Frame 来设置一个个响应式的界面,包括桌面尺寸、iOS 尺寸和 Android 尺寸。

点击左上角的 Frame 图标就可以创建一个 Frame,或者你也可以按 F 键来快速创建。此时在右侧的属性面板中你可以看到一系列预置的设备尺寸,选择一个可以帮助你快速创建某个设备尺寸的 Frame。如果你想自定义尺寸,则直接在画布上拖拽绘制。

Frame 没有固定宽高,它取决于你选择的设备。在一个 Frame 中再画一个 Frame,Framer X 会自动设置它们的层级。Frame 还会在你改变它的尺寸时保持其内部元素自动适应,比如按钮、卡片、选项卡这些会自己变换位置或尺寸。当你在画布中绘制了多个 Frame,再次添加 Frame 时 Framer X 会智能选取他的位置。

Frame 位置

当你在一个 Frame 中又画了一个 Frame 时,Framer X 会自动识别它的位置并自动给它设置响应式锚点位置(即外层尺寸改变时它该如何变化),这将会大大节省你的时间。当你想自己设置它的锚点位置时,只需要在右侧属性面板中最上面的位置工具中调整就可以了。

Stacks

为了让元素布局更加高效,我们推出了全新的 Stack 工具。Stack 可以帮助你设置流式布局,因为它最擅长自动处理元素分布和对齐。你可以按下 S 键,在需要处理的多个元素上拖拽出一个框,把它们框进去,松开鼠标,你会发现这些元素会被自动对齐排列。如果你想自己设置元素的对齐方式、间距,可以在右侧的 Stack 面板中去调节。

自动分布

Stack 工具有一个很棒的功能——自动分布。假如说你有一系列菜单,现在你想给其中两个菜单替换一下顺序。只要这些菜单在一个 Stack 里面,你就可以直接拖拽它来进行重新排序。

嵌套

Stack 是可以嵌套的。嵌套后,你可以随意设置每个单独的 Stack,它们互不影响。

交互

跳转链接

你可以使用跳转链接工具连接两个 Frame,实现跳转交互。首先,选中一个 Frame,然后按下 L 键,此时会出现一个箭头跟着你的光标。移动鼠标,将其连接在另一个 Frame 上,预览设计就可以看到效果了。

你还可以选择页面跳转的方式,在右侧跳转工具面板中有很多过渡效果可供选择。

支持的跳转过渡 -
Push Overlay
Modal Instant
Flip

滚动工具

你可以使用滚动工具来创建一个可滚动区域。使用滚动工具创建一个滚动区域之后,将其连接至另一个 Frame,则该 Frame 就会被作为它的内嵌可滚动内容。

选中可滚动区域,在右侧的面板中可以设置滚动的方向。如果你选择了垂直和水平都可以滚动,还可以选择是某一时刻必须沿着某一方向还是可以自由滚动。如果你想完全模拟移动端的操作,还可以关掉鼠标滚动。

翻页工具

翻页工具可以帮助你创建一个滑屏切换的区域。从左侧的交互工具中选取翻页工具,在画布中拖拽一块翻页区域,将它连接至多个 Frame,就实现了一个多屏翻页效果。

此时选中该翻页区域,在右侧面板中可以看到所有连接的 Frame,你可以在这里增删页面,或设置其它的一些属性。

宽 & 高

当你创建了一个翻页区域之后,它会自动设置内部内容的宽高自动跟着翻页容器拉伸。设置为自动则翻页容器尺寸会跟着内部 Frame 的宽高变化而变化。

间距

设置每页之间的间距,让它们之间保留空隙。

内边距

内边距是指整个翻页区域的内边距,就像边框和圆角属性一样,你可以给每边分别设置内边距。

当前页

你可以设置当前页是第几个,这样在预览时就会从该页开始。

动量模拟

默认情况下动量模拟是关闭的,这意味着当你在两页之间翻页时是平滑的,开启后则会有一个弹性模拟,用力滑可以跳过一两个页面,而轻柔地滑则可以更好地控制。

过渡效果

翻页有五种过渡效果可以选,这样你可以做出更加符合你期望的翻页。

效果 -
Default Cover Flow
Cube Wheel
Pile

绘图

在 Framer X 中,我们的矢量绘图有点特别。在使用路径或形状工具之前,你先要从左侧的工具面板中选取绘图(点击 Graphic,或者按下 G 键),创建一个绘图容器,你所有绘制的图形都会在这个容器之中。当你进入绘图模式时,你会看到画布的上方出现了一系列工具,比如矩形、圆形、路径等等。

路径工具

进入绘图模式,点击上方的路径工具,就可以绘制路径了。一般我们在绘制 icon 时,会依赖于一些基本的几何形状。我们的路径工具会在你绘制时智能计算出建议的中心或边缘位置,帮助你快速绘制出比较精准的路径。

路径工具还可以帮助你确定角度,因为依赖刚刚绘制的形状来确定角度比较复杂,而路径工具会帮你做好这一切,你只需要移动鼠标,当靠近时会在建议的角度那里锁定你的鼠标,帮助你去对齐。

曲线拟合

曲线拟合通过多锚点联动来帮助你绘制你想要的曲线,甚至更加复杂的形状。当你不需要画一个依赖于基本形状的图形时,比如自由绘制插画,就可以很方便地操纵这些点,以最大的自由度去绘制。

形状

同样地,绘制形状也要先创建一个绘图容器。此时,你可以从画布上方的工具中选取矩形、圆形、星形或多边形插入,然后在此基础上绘制。绘制形状有一些快捷方式:按下 R 键创建矩形,按下 O 创建圆形,按下 P 创建多边形,双击则可以改变其锚点,还可以使用画布右上方的布尔操作来进行形状组合。

如果你想要形状和其它图层一样可以拥有自适应的能力,可以选中它并按下 Enter 将其包裹在一个 Frame 中,此时这个 Frame 就会变为形状的智能容器。

布尔操作

布尔操作可以帮助你进行图层的添加、减去、相交、排除重叠和组合,以便设计出更加复杂的形状。你可以选中两个图层,此时再点击右侧属性面板顶部的某一个布尔选项,就可以对图层进行布尔操作了。