首页
学习
活动
专区
工具
TVP
发布

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、代码:路径方向反转

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

小广告:

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180124G1046600?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券