Figma一站式设计交付（三）—— 营地使用&技巧、Figma社区、设计师玩转Figma

本期设计师 | Jeason

编辑 | Hulk、Charlene

导语：

本期是《Figma一站式设计交付》系列的最后一辑，Jeason以和平营地项目为例，为大家介绍了一系列Figma实用技巧，如何在强大的Figma社区中挖掘资源、和分享Figma的另类生产力。

1. 营地设计的问题和流程优化

在第一篇的第一部分，有讲述设计团队会遇到使用设计工具时的合作疑难：

Figma一站式设计交付（一）—— 什么是Figma

2021-11-05

和平营地在使用Figma前的问题：

1. 规范不统一，效率低  →  建立视觉、开发组件库：
   视觉字号颜色规范、切图不统一、开发无组件化意识，协同设计效率偏低。
   
   
2. 设计资源缺乏管理  →  推动开发优化资源冗余：

多个设计开发团队经手，历史遗留问题滚雪球，平台业务资源移植冗余。

在使用 Figma 之后，情况就可以完全不同了：从交互设计到视觉设计，最后到策划审核和设计交付，都可以在 Figma 上一站式完成。多人实时协作发挥了巨大的作用，工作流程更加敏捷了。

2. 营地使用Figma构建字体样式

在营地中，字体样式主要有常规系统字体和品牌字体 Agency，因此分别使用了 T 和 A 作为代表，融入了 Regular、Medium、Bold 的三种字重，以R、M、B分别代表。

以 10 号作为最小基础字号，以2/4/8作为递增规律产生常用的 10、12、14、16、18、20、24 等字号。

统一以 150% 作为基础行高，个别以 175% 为宽行高。字体样式配以对应的中文注释，最终形成体系如T12R、T12M、T12B等见名知意的字体代号。在方便开发使用代号的同时，加快设计做统一判断的选择。

3. 营地使用Figma构建颜色样式

在营地中，颜色样式围绕品牌色，参考行业同行关于对比度可读性的研究，进行了一系列的色阶处理。

对常用的实色、渐变、半透明渐变（蒙版）以 8 位 ARGB 提供对应色值，形成一套深浅对应的中性色和彩色体系。

此外对常用的头像、素材、图案作为填充预设，方便组件变体调整切换，避免了使用插件时会产生随机的图像填充。

4. 营地使用Figma构建栅格样式

在营地中，定义以 4/8 作为基础网格标准建立常用的栅格间距、尺寸。

在图片比例上定义常用的  16:9  /   4:3  /  3:2  /  1:1  等，在适配时保持等比缩放，以 Center Crop 模式，避免适配时被拉伸压扁。

5. 营地使用Figma构建图标组件系统

在营地中，此次改版对名字和资源的管理都格外重视，想要轻松剔除冗余的资源，就要有一套合理可持续的规则管控切图资源，是通过：

【业务名_模块_类别_功能_状态_尺寸.格式】的命名规范来管理切图。

此外在 icon 组件的描述中加入适当的关键词，能够有效提高图标搜索的准确度。

6. 其他实用技巧

Selection Colors：

框选一个范围或者一个画板，会罗列检查出画板内所有颜色，对批量替换为规范色颇有帮助。

Cilp Content：

有时候想在一个画板内裁剪(隐藏)超出的部分（类似蒙版，但局限于圆角矩形），直接勾选 Clip Content 就可以了。

宽度或高度为 0：

设置宽度或者高度为 0.001，可以在自适应按钮 AL 内做出不占据宽高的、类似相对/绝对定位的效果。

7. 效率之王 —— 快捷键

Quick Action：

[MacOS]Command⌘ + / 或 +P

[Windows]Control + / 或 + P

直接输入就可以搜索调用菜单命令、插件等不同的快捷操作，十分方便高效。

Tide Up：

[MacOS]Control^ + option⌥+T

[Windows]Ctrl + Alt + T 

一键快速整理图层，另外还有各种对齐快捷键：

[MacOS] option⌥+ WASD 和 option⌥ + V/H

[Windows]Alt + WASD 和 Alt + V/H

Copy As Png：

Shift + Command⌘/Ctrl +C

一键快速导出某个画板图片到剪贴板，方便复制粘贴到聊天窗口。

8. 给需求加状态描述，分享链接快速定位

如果你使用 Figma 一站式设计交付，那么通过自主设计一个自定义的组件：在 Figma 中划分区域告知开发哪些是进行中的 ，哪些是可以进入开发的；并且直接罗列对应的组件，加强团队成员对组件的构建意识。

此外 Figma 对每个 Frame 都可以产生一个指向链接，只需右键这个框架，就可以直接拿到链接和分享给产品开发，十分方便。

Figma 的社区集合了用户、文件和插件等内容，在这里你可以找到很多优秀的设计范例，优秀的高玩用户，还有各种出其不意的设计思路。进了 Figma 社区，就如同站在了巨人的肩膀上。

设计师：

在社区里搜索的内容里，官方是必不可少的，除此以外你可以搜索各类大厂，关注他们的分享。

Joey Banks 大佬分享了很多 iOS 的组件，并且也会以最新的组件集方式重新整理一次。

Rogie 应该是 Figma 官方的成员，在 youtube 上也很活跃，分享很多不为人知的技巧。

在国内，主要关注了草帽SMao、Mr.Biscuit、RyanJyu；这些也是在Figma at Tencent 的一次交流会上了解了更多。

可以上 Bilibili 搜到 草帽SMao 的 Figma 教程，里面分享了很多工作中的实战经验技巧。我也是看他的视频入门，非常赞。

Mr.Biscuit，人称小老虎，致力于让 Figma 变得更好，开发了很多插件。例如 Instance Utils 能够在不分离组件的情况下，调整组件的内部结构。例如 Outline to Single Stroke，能将以填充形式的线型图标，转换为描边形式的线型图标。 

文件：

用户可以在社区里搜索开源共享的 Figma 设计源文件，从一些源文件中就能学习到别人使用 Figma 的一些技巧和规范，并且可以基于别人的文件做二次的设计迭代。

插件：

Figma 社区里少不了各种各样的插件分享，我们通过下载量和点赞量榜单，能够发现更多优秀的插件。

Figma 的插件生态也相当丰富，再推荐一些曾经用过的 Plugins。我在特别喜爱的插件旁标了个❤️，另外也推荐一些插件网站：

FEATURED FIGMA PLUGINS

https://figma.tovi.fun/

每月一期，给你推荐当月更新的、值得尝试的 Figma 插件。

Figma 中文社区

https://www.figma.cool/

致力于在国内推广 Figma，这里有开发的 Figma 工具箱、设计资源精选、插件合集和 Figma 的官方文档。

Awesome Figma Tips 

https://awesomefigmatips.com/tips

除了推荐插件以外，还用动图形式展示了各种 Figma 的技巧。

小游戏：

从来不敢想象在一个生产力工具上，能如此玩出花：在基于云协作的理念，可以在上面制作一些小游戏，从而进行多人互动。

名片：

也可以在上面发布名片交友信息。

Profile：

又或者是设计简历、个人网站和作品集。

Powerpoint：

又或者像我现在用 Figma 直接做的 ppt 演示文档，还能当会议投屏给大家演示，非常好用。

FigJam：

当然 Figma 也向前衍生出的 FigJam 工具，致力于前期的想法收集、会议、用研等等，像白板一样简单好用。

最后，附上整个 PPT-Figma 的分享链接（点击阅读原文也可跳转）。大家可以 duplicate 复制一份，点击右上角播放原型，并查看 ppt 里的动效制作。交互部分自制了循环动效（顶部、封面封底的彩虹循环）和 PPT 备注交互（按 P 可以显示当前页的备注）。

https://www.figma.com/community/file/993179495306722989

– End –

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

推荐阅读

Figma一站式设计交付（一）—— 什么是Figma

2021-11-05

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

2021-11-13

沉浸进行时 —— 由Diegetic UI引出的概念学习

2021-10-22

光子原创，欢迎分享

文章合作：mowgicdeng@tencent.com

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

本篇文章来源于微信公众号: 光子设计中心