设计软件Figma的10个超级好用插件推荐

Figma的插件功能自6月初开始内测，到8月初正式上线以来，截止目前线上共有268款众多功能与特色的插件，可以帮助设计师快速完成填充数据、创建元素、整理图层、检查可用性等工作，进一步提升设计生产效率。补充上最后一块拼图──插件生态的Figma终于是拥有了完整形态的设计工具，面对竞争对手Sketch完全可以与之一战。

插件功能正式上线三个多月以来，Figma上目前发布的插件所覆盖的功能与类型，与Sketch已经别无二致，基于Sketch的日常工作流中需要用到的插件在Figma中基本都能找到替代品。

不仅如此，让人更兴奋的是Figma基于Web技术的天然优势和其更加强大的API，帮助Figma插件在一些方面更有想象空间。比如你可以在Figma上利用插件直接听歌单（DeepFocus），也可以玩游戏（MultiplayerPong）检查页面元素与样式是否符合设计规范、是否达到WCAG标准，也可以创建3D元素，甚至直接设计、演示动效也不在话下。

△MultiplayerPong

使用Figma插件的方法与Sketch类似，主要有三种：

△TimeMachine

Cleandocument可以帮助设计师自动「打扫」选中的设计文件，清理隐藏的图层，解除只有单个图层的组，重命名图层，还可以根据元素的位置对图层重新排序。

△Cleandocument

每次设计稿最终完成后，杂乱的图层和编组简直是一片狼藉。无论是对设计师本人，还是一起协作的设计师与开发都是一场噩梦。不过现在一键就能搞定，是设计师的必备神器。

△设计师头疼的4种原因

Autoflow可以让设计师直接选中两个元素后自动画上流程线，省去了画流程图过程中标注箭头的繁琐工作。

△Autoflow

Iconify内有50个图标库，包含超过40,000个图标。如果要找图标直接搜索，然后「addicon」即可。用iconify来处理搭建原型阶段的图标需求再好不过，也省去了打开iconfont网页找图标的麻烦。

△iconify

Gifs可以让设计师直接搜索并插入来自GIPHY的动图。不过这款插件在平时的工作中用的还是很少的，但是用Figma做PPT就非常适合配合这款插件食用。

△Gifs

Vectary3D可以将3D元素插入Figma中，更有趣的在于你能将设计稿置入预设的可交互的3Dmockup后，导出图片到Figma中。从此包装设计稿不用烦恼找不到适合的mockup了，自己动手丰衣足食。

△Vectary3D

另外值得一提的是Vectary3D这款插件背后的产品，是一款与其同名的基于浏览器的在线3D设计工具。

△Vectary3D界面

A11y系列由Microsoft出品，包含两款插件：ColorContrastChecker、FocusOrderer。

用来检查设计稿内文本对比度是否遵守WCAG（WebContentAccessibilityGuidelines）标准，以保证用户可以无障碍阅读文本内容。ColorContrastChecker的使用非常方便，唤起插件，选中需要检测的界面，点击「Check」即可。

△ColorContrastChecker

不过这款插件也存在偶尔失效的问题，笔者还没发现其规律和玄学。色彩对比度检测的插件除此之外还有三款，其中Contrast是笔者体验下来比较不错的一款，如果没有对整个页面内所有文本自动检测的需求，Contrast会更适合使用。

△Contrast

FocusOrderer帮助设计师标记并测试焦点状态（Focused）的流程和体验是否合理，一般在网页设计中使用。

△FocusOrderer

上面提到的ColorContrastChecker可以检测文本的对比度，而ColorBlind则可以将设计稿自动转成8种不同类型的色盲效果，借此我们可以进入色盲用户的视角审视我们的设计是否合理。

△ColorBlind

Roller是一款样式自动检查工具，通过添加或导入styles后，可以以此为基准校验文件内使用的颜色、字体样式、阴影、圆角大小是否符合设计规范，以保证设计产出完全对齐规范。不过Roller有个很大的问题，其本身不支持rgba，希望后续会有优化。

△Roller

Roller好像是目前市面上（不包括某些大厂的内部工具）出现的第二款设计校验工具（笔者已知的第一款是sketch-lint），虽然类似概念的工具在开发那很早就存在，但我们还在用最原始的人肉方式处理样式不规范的问题，从components到designlint，设计的工程化还要走好长一段路。

Chromacolors可以通过选中多个对象快速创建Colorstyles，省去了为每个颜色手动创建style的重复劳动，在搭建组件库初期帮助很大。

△Chromacolors

以上推荐的插件均为笔者日常工作会用到的一些功能和体验不错的插件，其实还有很多优秀的插件可以推荐，比如官方人员出品的Themer，可以一键切换主题；自动生成视觉焦点图的VisualEyes；还有Productplane、Wireframe、Graphviz将图表、流程图全部搬运到Figma中，实现排期、文档、设计全在Figma实现。