10 个不容错过的 Framer 设计新特性

本文译自 Framer 官方博客

原文标题：The 10 Framer Design Features You May Have Missed

原文地址：https://blog.framer.com/the-10-framer-design-features-you-may-have-missed-b39314716954

翻译：Jun

2017 这一年 Framer 更新迭代很频繁。这一年我们的设计模式逐渐支持了渐变、特效和导出功能，在年尾时又添加了 frame 、形状和矢量绘图，到现在 Framer 已经成为一个特性丰富的界面设计工具。如果你已经是个原型达人，这意味着你不再需要额外的图形绘制工具作为辅助了；而如果你刚刚接触原型设计，你会发现 Framer 的全流程设计方式会让你的工作变得简单直观。

下面我将介绍 Framer 最新的 10 个设计特性（以及快捷方式），帮助你更加高效地进行设计。

1、新的画板 frame

frame 是一种更加聪明的布局容器，它可以作为一个屏幕画板，也可以作为一个界面元素。你可以在 frame 中放置按钮、图片甚至于另一个 frame ，而 Framer 会自动设置它们的分组、层级和布局。这是一种全新的智能画板，可以帮助你在元素嵌套和布局时节省时间。在切图导出时 frame 也可以作为切片使用。使用快捷键 CMD + Enter 可以快速创建 frame 。与之相反地，形状是 SVG 图形，它们可以被分组，但是却不能包含子元素。

（译者注：新增了 frame 之后，Framer 中的普通图形不能添加 target 了。如果你想要给普通图形添加 target ，可以在它外面包裹一层 frame 并给这个 frame 添加 target ，或者使用select方法在代码中选中某个图形。比如在设计模式下创建了一个图层命名为ratingStar，就可以使用ratingStar= Layer.select("ratingStar")在代码中获取它。）

Frame 快捷键

绘制 frame A 或 F

给元素添加 frame CMD + Enter

移除 frame CMD + Delete

2、SVG 图形

当准备构建矢量工具时，我们最先考虑的是导出。因为 Framer 中的设计是 SVG 驱动和基于浏览器的，所以我们可以 1:1 还原所有分辨率和尺寸的设计。而且你可以直接导出 SVG 代码，这都是无冗余很干净的代码，所以你可以直接用于开发。右击图形选择复制 SVG ，或者点击右下角的导出菜单导出 SVG 文件都可以将其代码导出。

3、路径工具：中点提示

当绘制图标时，你可能会依赖一些几何图形作为参考。但是在 Framer 中我们会在你的鼠标移动时提示你中点在哪，这样你就可以快速寻找或对齐元素了。

4、路径工具：锁定角度

当绘制斜线时，有时候需要沿着某些特定角度。在 Framer 中，路径编辑工具可以帮助你锁定一些特定角度。当你的鼠标比较靠近某个特定角度时，我们就会锁定这个角度，这样你就能画出完美对齐的图标或图形。

5、路径工具：区域编辑

按回车键或者双击一个图形，然后移动鼠标到某条线上就可以拖动这一部分进行编辑了，这对于绘制一些复杂的图形很有帮助。

6、路径工具：自由曲线

绘制曲线时会有同步的锚点来帮助你进行调节。通常，当你想要调节路径的曲率或弯曲方向时，只需要拖动路径就可以自由编辑了。

路径快捷键

路径工具 V

绘制曲线 点击并拖动

将锚点两侧转为曲线 双击锚点

切换两侧对称/非对称模式 Alt

在路径上添加一个锚点 CMD

控制曲率 Alt + 拖动路径.

锁定角度 Shift.

7、布尔操作：包含结合（ join ）操作

布尔操作通过不同方式组合图形来帮助你绘制各种图标。最常见的有合并、相减、相交和排除四种操作，但是 Framer 中新增了一个“结合”操作，尽管它并不常见。和“合并”操作相比，“结合”操作最主要的区别就是结合后的图形不必连接在一起，他们可以包含各自的描边。

8、描边：自定义斜接极限

关于斜接极限大部分设计工具都是自动设置的。在 Framer 中我们允许你自己设置，这样当图形的边缘有锋利的角时你就可以更好地去调控它。

9、代码：路径动画

通过方法，可以设置属性到引用的上，让元素执行沿着路径运动的动画。这有个例子：https://framer.cloud/SQndk。

10、代码：路径方向反转

你可以改变路径方向来控制路径动画的方向。你只需要右击路径，选择“反转路径方向”就可以了。

小广告：