Figma一站式设计交付（二）—— 设计系统、交互和审查元素

本期设计师 | Jeason

编辑 | Hulk、Charlene

导语：

上一期光子设计师Jeason先带大家认识Figma，介绍了Figma的工具优势、功能特点、以及其极便利使用者的设计架构与理念：

本期将深入到Figma设计系统、交互和审查元素的内容讲解中。

由于大部分的设计工具都差不多，常用的文本、颜色、形状的各种操作在此就不在赘述了。Figma 中的设计主要讲其设计系统。

1. 用Figma构建设计系统

——栅格样式

Figma 支持建立栅格样式，现在你可以在 Figma 的每个界面、每个Frame 里，更愉快地自动使用栅格样式。

完整的设计系统应该包含栅格系统，可以自由组合的水平、垂直、网格 这 3 种基本网格。

例如用户可以根据两端的尺寸分别创建 Android 和 iOS 的栅格系统。在图标设计中可以建立 8x8，24x24，1024x1024的大小，这是都是 Sketch 所没有的。

2. 用Figma构建设计系统

——文本样式

Figma 的文本样式，无需考虑对齐和颜色，这也相对于在 Sketch 里是节省了很多不必要的样式，用户在选择上会变得更加简洁高效。

字距和行高可以支持百分比单位，设定更灵活。在组件的实例中，也能够自由地更换字体样式，配合 Auto Layout 能够做到组件的自适应。

在构建文本系统的时候，也可以借助如 Font Scale 插件按照 1.2、1.5、1.618 等规律生成和谐的字体规范；在 Batch Styler 里可以批量修改字体、颜色规范。

3. 用Figma构建设计系统

——颜色样式

Figma 的颜色样式，可以自由应用在颜色、描边和字色上，描边属性还可以在实例上自由地设定粗细、类型、线头线尾的样式等。

但是图层样式 Effect 中的颜色还没有纳入样式管理体系中，可能是因为单独有图层样式管理，所以就没有与颜色样式关联起来，但还是期待 Figma 能完善吧。

在构建色彩系统的时候，我们常常需要使用一些规则方法去生成颜色样式。在这里可以借助如 Color Kit 插件，能够生成一组自定义颜色的深浅色阶。

4. 用Figma构建设计系统

——图标系统

Figma 在图标绘制的功能上有借助独有的矢量网格技术：可以用一笔就画完整个路径图标，在不同的方向上分叉，也就不需要创建单独的路径对象。

此外还可以使用椭圆工具创建其他形状，如饼图、环状图等，极大地提高了图标绘制的效率。

在构建图标系统的时候，可以借助如 Iconify、Icon8 等插件。通过直接搜索关键词，将 SVG 格式直接导入到 Figma 中；当然也可以从 iconfinder、iconfont 等网站复制 SVG 代码，直接粘贴到 Figma 里。

5. 用Figma构建设计系统

——图层效果样式

Figma 可以创建内阴影、投影、图层模糊、背景模糊等效果样式，能够比 Sketch 更方便地统一管理图层效果样式。Figma 可以渲染每种阴影类型最多有 8 个，每个模糊类型有 1 个。

但请记住，这些效果所使用的模糊效果可能导致性能不佳；背景模糊通常是最耗性能的图层效果。

图层效果适用于图层和组，使用组模糊和阴影可以提高性能。

在构建图层效果样式的时候，可以借助 Neumorphism 创建漂亮的新拟态投影、Smooth Shadow 创建平滑的分层阴影、oblique 创建长投影等。

6. Figma中的几个概念

具体的介绍就不一一赘述了，和 Sketch 最大的区别主要是 Auto Layout。

可以说是 Smart Layout 的超级升级，无论文本、形状、画板等都可以添加 AL 达到堆叠的效果，自动堆叠、调整内边距和内间距，类似 Css FlexBox（目前 AL 没有 Margin，但可以通过嵌套 AL 达到 Margin 的效果）。

使用了 Auto Layout 后，内里的元素由 Constraints 变成 Resizing，再使用：Fixed （固定）、Hug Contents （适应内容）、Fill Container （填充容器）来自由控制约束布局，可以轻松创建响应式、等分效果。

其次是 Variants 变体可以把多个组件状态归集为一个组件，通过属性创建不同的选择开关，能让组件在不同状态间自由切换。

7. Figma中强大的Auto Layout

01

在创建进度条组件的时候，一般创建了后就不能控制进度的长度。其实可以通过 AL 一个 Frame 填充，在 Instance 实例中可以通过改变 AL 的内边距，从而实现填充的长度（当然也可以放一个透明的元素控制间距实现）。 如果是有拖拽点，还可以配合 Frame 宽度为 0 的 Hack 方式，保持不裁剪内容以显示拖拽点，实现相对定位的效果。

除了长条进度，常用的圆环进度，可以简单地通过鼠标，将椭圆直接变成的扇形工具（4.图标系统配图），即便是成组件后也能调节长度、粗细（真是强大）。

02

在创建列表的时候，可以通过调整 AL 中的内边距，轻松实现缩进效果。

03

在创建按钮结构时，可以通过 AL 轻松实现隐藏显示图标，自适应宽高达到自由组合的效果（希望下一代的 Auto Layout 即将支持相对、绝对定位）。

04

通过设定为 Spaces Between 可以实现 AL 内的元素均分排列，还可以通过减少父级 Frame 的 宽高 来实现重叠的效果（希望下一代的 Auto Layout 即将支持负间距）。

05

在表格制作中，通过建立行级、列级 AL，极大方便了调整不同单元格的位置、排序内容。

8. 强大的Component Variants

Component Variants 可以说是对不同的组件状态进行了一个很好的规整。组件设计中的 Property 和 Value 可以和 Web 前端组件的命名对应起来，这样在 Figma 的 Inspect 面板上就可以直接提供复制，更好地打通前端交付。

例如常用的开关，可以分成 iOS 和 Android 的两个样式，每个样式里面有开和关，又包含了：默认、按下、禁用三种状态，将这（2x2x3=）12 种的状态一一罗列，就形成了一个开关完整的 Component Variants。

9. AL + CV 的强强联合

在做 APPUI 的时候经常会遇到 Feeds 流设计。除了使用基础的 Auto Layout 布局，还可以对不同的内容区域如：横图、竖图、视频、1-9 图等进行 Component Variants 的组合；这样就可以既是一个自动布局，又能切换不同的内容状态，减少生成冗余的组件组合。

Figma 的交互原型除了最最最基础的水平和垂直滚动，还可以由触发器配合响应动作。动作可以调整使用不同的预设动画，动画可以具体设定缓动曲线。

组件集内部交互:

此外 Figma 加强了组件交互的功能，配合 Component Variant 可以设置组件集内的交互，可以实现例如按钮常态、按下、松开等不同的交互状态。

子组件继承交互:

对母组件 Component 添加了交互行为的，对 Instance 同样也会生效。比如对母组件的返回按钮，添加了已给的 OnClick = Back ，那只要是在界面中有引用到这个返回组件的界面，点击返回的时候 ，都会自动返回上一层界面。

多条交互流：

在此之前的一个页面只能有一条交互流作为展示，Figma 增强了后可以在原型中添加不同的交互流进行切换，比如信息流程和支付流程。

接下来用一些比较有意思的案例和教程讲述一下：

Smart Animate:

类似 Keynote 的神奇移动，两个 Frame 中，命名相同的图层会生效，命名不同的则通过淡入淡出过渡。通过 Smart Animate 可以实现两个关键帧之间的位移、旋转、不透明、形状变化、字号变化等的自动补间动画设置。

也类似简化版 MD 卡片的悬停涟漪效果：通过 Frame + Radius 设定好两个关键帧，把浅蓝色的 Frame 层放大填充至整个卡片（卡片打开 Clip Content 内容进行裁剪），在浅蓝色的同一层级复制一份作为白色圈圈，从小放大代替原来的浅蓝色圈圈。

（下图效果的操作）首先设定好 Frame 内元素的约束，把内容设为 Left Top，再把图标设定为 Bottom Right；缩减成按钮只需调整 Frame 的尺寸，将内容的透明度调整为 0。同理，也可以去实现类似于 iOS AppStore 卡片在点击后的转场。

Open Overlay:

可以很方便地添加弹窗动效，也提供不同位置和手动定位功能，是否启用蒙层外点击作为关闭的选项，以及自动产生的蒙层颜色效果等，还可以通过 Swap Overlay 切换不同的弹窗。

此外在真实的案例中，你可以给X母组件添加一个 Close Overlay 的交互；只要有弹窗层的地方，都可以用X自动关闭。这也是让子组件继承母组件交互的一种高效方式。

Scroll To：

可用于制作简单实用的滑动动画，如快速返回顶部、或滑动到指定区域的动态效果：

在指定内容区域 Frame 设置为 Horizontal / Vertical Scrolling （横向或者竖向）滑动后，给按钮新增一个 Scroll To 的动作，再直接拖拽到刚才的内容区域 Frame，保持X、Y的偏移量为 0 即可。如果你需要滑动到内容区的第二个区块也可以，在此之上还能设定偏移量，以避开如顶部导航条的遮挡。

在一些横滑的交互上，一般会对滑动卡片做一层 Auto Layout，左对齐并给一个Padding Left（下图右侧：绿色左边的间距），那么在 Scroll To 上需要设定偏移量以避免贴边显示（下图右侧：如淡红色块的间距）。

此外在滑动到最右时，即便 Auto Layout 设定了 Padding Right ，但 Scroll To 也不会生效，需要添加一个额外的色块，设置为0透明度代替右侧边距。

After Delay:

常用于做一些自动循环的动画效果，比如此次封面的彩虹条动画就是使用了 After Delay 来完成的。原理很简单想明白了就好，这个可以分两步实现：

1. 彩虹条的自循环动画：创建三个并列的彩虹条（将 Constraints 约束调整为 Scale 缩放，便于后续做拉伸变形）；设定组件 Frame 只显示一个的宽度，让这三个彩虹条不断的发生位移变化，并且让位置的变化为一个循环。

在这个过程中，通过After Delay (1ms，即1毫秒无延迟)，Change To (Frame) 组件集内的切换动画切换不同的关键帧，Smart Animate（Liner，2000ms）通过 智能动画 制作自动补间位移动画。

注意这里使用 Liner 匀速可以有无缝循环的感觉。如果使用其他缓动曲线也行，但会有一些顿挫感。2000ms 这个可以自行调试设定。

2. 变形拉伸或改变角度：得到自循环的动画后，其实已经能够随意拉伸了。此时可以创建一个新的组件 Frame，拉伸填满并调整填充，即可得到一个自适应带角度的彩虹条了。如果还需要添加圆角，直接在组件 Frame 层设置圆角并勾选 Clip Content 即可。

同样常用的loading，也可以简单地通过 旋转120度 来实现。

基本上基础的交互操作、动效转场在 Figma 里都能轻松制作，但还有一些进阶的变量如：逻辑判断、重力感应、时间轴动画等动效还是需要通过专业的工具去实现。

大家也尽可能预评估好动画的制作成本，也不是非得使用 Figma 去硬尬制作不擅长的动效。Figma 同样也可以用 AEUX 导入到 AE 里去制作。

以上都只是冰山一角，更多需要你真的是去操作和了解 Figma 的交互功能，才能更好地理解它们。

1. 分享链接和权限管理

当我们在 Figma 中设计完成后，可以把 Figma 链接分享给上下游的同事，这时候我们就首先需要 谨慎地 设置一下 Figma 文件的权限。Figma 从 Organization（公司组织）>Team（团队）>Project（项目）>File（文件）>Prototype(原型) 都可以独立设置权限邀请。

但是，任何一个编辑者都可以邀请另一个人一起编辑，或者调整另一个编辑者的权限，并且无需经过管理员的同意。相当于一个群聊管理员，能邀请另一个人作为管理员，而不需要经过群主一样。（也许是因为 Figma 多人编辑的理念造成的？）

权限的设置主要集中在团队，对于个人草稿 Drafts 和免费团队的设置则只有更少的选项（也就是付费才有更安全的权限设置）。

公司组织 Organization:

独享最全的管理安全权限，登录管理、插件管理、字体管理、组件管理等。

团队 Teams:

团队级别主要管理具体成员权限，如果处在公司级的团队，可以设置为需要邀请才可以加入团队，或者设为私密团队。

项目 Projects:

对项目层级，如果想有某个项目作为保密项目，可以设置 Remove team Access，这样团队成员就无法访问这个项目了，只有受邀请的人可以访问。

文件 Files:

在文件层面，有一个 Alllow Viewers to Copy、Share、and Export form this File，默认是勾选启用的。

关闭后可以避免设计文件被恶意复制、分享和导出，但是需要注意如果通过 Figma 交付给开发的话，开发一般都是 Viewer 权限，则不能导出切图了。

原型 Prototypes:

除了常规的 can view，还有一个更细致的 can view prototypes only。如果设置为 can view，是可以从交互原型直接 open in editor ，变相打开了对应的文件，也就是 can view 相当于是得到了文件的查看权，不仅仅是可访问原型权限。

一般来说，使用付费团队就已经够用了，但是由于付费团队的每个成员都是可以使用个人账号登录上项目，也会对管理带来一定的困难。

因此也建议同步统计好团队成员的账号，及时警惕移除有问题或临时协作的用户。

在设置编辑权限的时候，做到最小化权限分配；通过及时回收权限，避免产生权限问题，做好项目资源的风险管理。

2. 审查元素

作为云协作的 Figma自带的标注功能已经蛮完善的了。能够很直观地对尺寸、圆角、文字、填充、边框、效果、动效等进行标注和注释：

对组件的解析:

能够明确显示组件的名字，和上层组件的名字，并且提供定位源。同时显示组件的描述和文档连接（如有的话)，进一步对组件的宽高、定位、圆角、混合模式和约束参考进行解析。

对文本、颜色的解析:

提供文本的复制、字体规范代号、字体、字重、字号、行高的解析，对颜色提供色号、提供不同的色彩模式、线框等（对自定义虚线没有直接实现的值，但是也能以 SVG 形式解析对应的 Join、Cap、Dash pattern）。

对其他资源的解析:

在代码解析主要提供的 CSS 、iOS 、Android xml 等解析，与同类产品一样仅作参考。对动效的解析提供触发器、目的地、动画、缓动曲线、时长等描述。最后对切图资源可以进行倍率、格式的导出。

基于 Figma 原生支持的这么多解析，已经足够在开发阶段帮助开发查看设计稿中的具体标注，而更多的期待可能是对 DSL 的理解和解析。

如果能对字体预设和颜色预设等 DesignToken 提供一键导出到 plist/Xml 的形式（具体类似 Zeplin 的 DSL），那 Figma 要传达的整体的原子设计理念，就有更完善的执行落地了。

3. 编辑者和审查者的小差异

• 编辑者（你的视角）和查看者（开发视角）的 Inspect 模式有略微区别：如一个 icon 输出尺寸 192x192，内部路径可能是 120x120。

• 编辑者点击时是 192x192，查看者点击时会直接穿透，点到了 120x120 的路径，导致开发大小不一致。

解决方法：

1. 在图标组件上面设置：一层黑色0.001% - Screen混合模式

   （避免颜色显示和导出有影响）

2. 在图标组件上面设置：一层白色0.001% - Dark混合模式

   （避免颜色显示和导出有影响）

3. 和开发约定切图都是整数 ，如遇穿透问题，使用按 command+点击，捕捉显示 Frame 的大小。

总的来说，就是通过一层障眼法蒙在上面；也可以事先和开发做约定培训。

4. 切图输出交付

虽然市面上的很多交付插件都可以一键导出切图，但是往往实际开发的时候，不同的开发对同一个资源的命名方式不同，会导致项目重复引入不同名字，但缺失相同的资源而造成冗余。

因此这块建议自行通过 SVN、GIT 等进行版本管控资源和命名。比较高级的方法可以参照 ：

• 《高效协作 I 资源库的协作方式》

• 《使用 Figma + GitHub Actions 完成 SVG 图标的完全自动化交付》

下一期，我们进入到系列的第三辑。

- End -

光子原创, 欢迎分享 · 转载请留言公众号授权

推荐阅读

光子原创，欢迎分享

文章合作：[e-mail]

你点的每一个在看，我都认真当成了喜欢