文件管理类插件
1. Time Machine
Time Machine 可以帮助设计师一键将设计稿自动复制一份，收纳到在一个 Page 里，并按日期与时间排列。这款插件已经是笔者目前最高频使用的插件，因为日常的工作流中设计方案的探索、推导、收敛到最后的落地，会产生数量很多的废稿。以往笔者都要手动创建一个名为「Archive」的 Page，然后将废稿手动丢进去。现在只需要 ⌘ + / 然后输入「tim」再一个回车一气呵成。
△ Time Machine
2. Clean document
Clean document 可以帮助设计师自动「打扫」选中的设计文件，清理隐藏的图层，解除只有单个图层的组，重命名图层，还可以根据元素的位置对图层重新排序。
△ Clean document
每次设计稿最终完成后，杂乱的图层和编组简直是一片狼藉。无论是对设计师本人，还是一起协作的设计师与开发都是一场噩梦。不过现在一键就能搞定，是设计师的必备神器。
△ 设计师头疼的 4 种原因
图形资源类插件
3. Autoflow
Autoflow 可以让设计师直接选中两个元素后自动画上流程线，省去了画流程图过程中标注箭头的繁琐工作。
△ Autoflow
4. Iconify
Iconify 内有 50 个图标库，包含超过 40,000 个图标。如果要找图标直接搜索，然后「add icon 」即可。用 iconify 来处理搭建原型阶段的图标需求再好不过，也省去了打开 iconfont 网页找图标的麻烦。
△ iconify
5. Gifs
Gifs 可以让设计师直接搜索并插入来自 GIPHY 的动图。不过这款插件在平时的工作中用的还是很少的，但是用 Figma 做 PPT 就非常适合配合这款插件食用。
△ Gifs
6. Vectary 3D
Vectary 3D 可以将 3D 元素插入 Figma 中，更有趣的在于你能将设计稿置入预设的可交互的 3D mockup 后，导出图片到 Figma 中。从此包装设计稿不用烦恼找不到适合的 mockup 了，自己动手丰衣足食。
△ Vectary 3D
另外值得一提的是 Vectary 3D 这款插件背后的产品，是一款与其同名的基于浏览器的在线 3D 设计工具。
△ Vectary 3D 界面
无障碍类插件
7. A11y系列
A11y 即 Accessibility，随着无障碍设计得到越来越多关注，这类插件也终于开始出现，让我们可以更有效的优化产品设计，让更多用户享受更友好的体验。
A11y 系列由 Microsoft 出品，包含两款插件：Color Contrast Checker、Focus Orderer。
7-1 Color Contrast Checker
用来检查设计稿内文本对比度是否遵守 WCAG（Web Content Accessibility Guidelines）标准，以保证用户可以无障碍阅读文本内容。Color Contrast Checker 的使用非常方便，唤起插件，选中需要检测的界面，点击 「Check」即可。
△ Color Contrast Checker
不过这款插件也存在偶尔失效的问题，笔者还没发现其规律和玄学。色彩对比度检测的插件除此之外还有三款，其中 Contrast 是笔者体验下来比较不错的一款，如果没有对整个页面内所有文本自动检测的需求，Contrast 会更适合使用。
△ Contrast
7-2 Focus Orderer
Focus Orderer 帮助设计师标记并测试焦点状态（Focused）的流程和体验是否合理，一般在网页设计中使用。
△ Focus Orderer
其实笔者之前还未见过类似 Focus Order 的插件或工具，希望未来能有更多解决或辅助无障碍设计的工具出现。一方面让我们的设计产出更容易向无障碍标准对齐，另一方面也会影响行业内的设计师更多的关注无障碍设计领域。
8. Color Blind
上面提到的 Color Contrast Checker 可以检测文本的对比度，而 Color Blind 则可以将设计稿自动转成 8 种不同类型的色盲效果，借此我们可以进入色盲用户的视角审视我们的设计是否合理。
△ Color Blind
设计系统类插件
9. Roller · Design Linter · Toybox
Roller 是一款样式自动检查工具，通过添加或导入 styles 后，可以以此为基准校验文件内使用的颜色、字体样式、阴影、圆角大小是否符合设计规范，以保证设计产出完全对齐规范。不过 Roller 有个很大的问题，其本身不支持 rgba，希望后续会有优化。
△ Roller
Roller 好像是目前市面上（不包括某些大厂的内部工具）出现的第二款设计校验工具（笔者已知的第一款是 sketch-lint），虽然类似概念的工具在开发那很早就存在，但我们还在用最原始的人肉方式处理样式不规范的问题，从 components 到 design lint ，设计的工程化还要走好长一段路。
10. Chroma colors
Chroma colors 可以通过选中多个对象快速创建 Color styles，省去了为每个颜色手动创建 style 的重复劳动，在搭建组件库初期帮助很大。
△ Chroma colors
以上推荐的插件均为笔者日常工作会用到的一些功能和体验不错的插件，其实还有很多优秀的插件可以推荐，比如官方人员出品的 Themer，可以一键切换主题；自动生成视觉焦点图的 VisualEyes；还有 Product plane、Wireframe、Graphviz 将图表、流程图全部搬运到 Figma 中，实现排期、文档、设计全在 Figma 实现。
好的软件也要有好的设计模板，最后推荐一系列figama格式的设计模板，请点击链接前往。
网友评论