Figma一站式设计交付(三)—— 营地使用&技巧、Figma社区、设计师玩转Figma
共 3947字,需浏览 8分钟
· 2021-11-24
导语:
本期是《Figma一站式设计交付》系列的最后一辑,作者以和平营地项目为例,为大家介绍了一系列 Figma 实用技巧,如何在强大的Figma社区中挖掘资源、和分享 Figma 的另类生产力。
![](https://filescdn.proginn.com/976ade3cd2a1c87629ef074a8a39edcf/7775c144b742feefbe25c3299ca71f05.webp)
![](https://filescdn.proginn.com/aee15d7617a84ed5c76ff6d428b1d837/c899a5936dde96d6103c477da7046562.webp)
1. 营地设计的问题和流程优化
在第一篇的第一部分,有讲述设计团队会遇到使用设计工具时的合作疑难:
设计工具|Figma一站式设计交付(一)—— 什么是Figma
和平营地在使用Figma前的问题:
规范不统一,效率低 → 建立视觉、开发组件库:
视觉字号颜色规范、切图不统一、开发无组件化意识,协同设计效率偏低。
设计资源缺乏管理 → 推动开发优化资源冗余:
多个设计开发团队经手,历史遗留问题滚雪球,平台业务资源移植冗余。
在使用 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。我在特别喜爱的插件旁标了个❤️,另外也推荐一些插件网站:
![](https://filescdn.proginn.com/8ca2340a4edf9757579c703324c2ade9/52817ae69bb4a2ea6fdd27d81ba217b1.webp)
FEATURED FIGMA PLUGINS
https://figma.tovi.fun/
每月一期,给你推荐当月更新的、值得尝试的 Figma 插件。
Figma 中文社区
https://www.figma.cool/
致力于在国内推广 Figma,这里有开发的 Figma 工具箱、设计资源精选、插件合集和 Figma 的官方文档。
Awesome Figma Tips
https://awesomefigmatips.com/tips
除了推荐插件以外,还用动图形式展示了各种 Figma 的技巧。
![](https://filescdn.proginn.com/0762cb4f89a726b20df9c4764e5204be/97cdd1f42977e87250e962e934875191.webp)
![](https://filescdn.proginn.com/fde696f2a3a5683f5da947a8b589e207/5b311acad01f13d7e0fdb40649e74a8e.webp)
![](https://filescdn.proginn.com/4dc10b0b90f9d924283907152edefd3c/36cbff89e94eb9b77b0ab450592dcd63.webp)
![](https://filescdn.proginn.com/fe92e10c95f7debc7332ee889cf3e0e9/fda55ae9aea96672d757da9c98dbfce9.webp)
![](https://filescdn.proginn.com/4a9588aa4b7f2d5700ad57f27eb10788/7e21f1e074ac9f1bd4533950be0d31bb.webp)
![](https://filescdn.proginn.com/96c5638bba8f2a2792996a7332117ae5/886c71875a2894f5cb3d2f3e5b8f612e.webp)
![](https://filescdn.proginn.com/24ea2e2b5b55099cfc2205837e988fc0/a1b1c3c424cee3f1551dbd1aef08ab7f.webp)
![](https://filescdn.proginn.com/a85455c7e58f176e49529da908eec91c/e96a7fc6bc9940a730531d701cb3c3cb.webp)
![](https://filescdn.proginn.com/a3254602f47298971bbffc3fbd1e3d94/83f941824fab977453ad82cd512a5524.webp)