Figma作为全平台的UI设计工具,以其特殊的云特性和舒适的用户体验迅速揽获一大票设计师拥趸。对于PC用户而言,是一件好使称手的利器。然而再强大的工具也不可能满足所有用户的需求,而且全面意味着臃肿。因此,插件系统成为创意软件不可或缺的存在,Figma在引入插件之后,可以说是完全体的设计工具,拥有不亚于Sketch的竞争力。
前言:Figma的插件功能自6月初开始内测,到8月初正式上线以来,截止目前(2019.11.05)线上共有268款各种功能与特色的插件,可以帮助设计师快速完成填充数据、创建元素、整理图层、检查可用性等工作,进一步提升设计生产效率。补充上最后一块拼图——插件生态的Figma终于是拥有了完全形态的设计工具,面对竞争对手Sketch完全可以与之一战。
插件功能正式上线三个多月以来,Figma上目前发布的插件所覆盖的功能与类型,与Sketch已经别无二致,基于Sketch的日常工作流中需要用到的插件在Figma中基本都能找到替代品。
不仅如此,让人更兴奋的是Figma基于Web技术的天然优势和其更加强大的API,帮助Figma插件在一些方面更有想象力空间,比如你可以在Figma上利用插件直接听歌单(DeepFocus),也可以玩游戏(MultiplayerPong)(大雾)检查页面元素与样式是否符合设计规范、是否达到WCAG标准,也可以创建3D元素,甚至直接设计、演示动效也不在话下。
MultiplayerPong
使用Figma的插件的方法与Sketch类似,主要有三种:
从系统的顶部的菜单栏上的「Plugins」入口选择插件
在文件内右键呼出菜单,从「Plugins」入口选择插件
快捷键/呼出搜索,输入插件名(敲黑板划重点)
吃我插件安利
TimeMachine
Cleandocument
Cleandocument可以帮助设计师自动「打扫」选中的设计文件,清理隐藏的图层,解除只有单个图层的组,重命名图层,还可以根据元素的位置对图层重新排序。
每次设计稿最终完成后,杂乱的图层和编组简直是一片兵荒马乱,无论是对设计师本人还是一起协作的设计师与开发简直噩梦,不过现在一键就能搞定,居家旅行加班搬砖必备神器。
设计师头疼的4种原因
Autoflow
Autoflow可以让设计师直接选中两个元素后自动画上流程线,省去了画流程图过程中标注箭头的繁琐工作。
Iconify
Iconify内有50个图标库,包含超过40,000个图标。如果要找个图标直接搜索然后「addicon」即可,用iconify来处理搭原型阶段的图标需求再好不过,也省去了打开iconfont网页找图标的麻烦事。
iconify
Gifs
Gifs可以让设计师直接搜索并插入来自GIPHY的动图。不过这款插件在平时的工作中用的还是很少,但是用Figma做PPT就非常适合配合这款插件食用,美滋滋。
Vectary3D
Vectary3D可以将3D元素插入Figma中,更有趣的在于你能将的设计稿置入预设的可交互的3Dmockup后导出图片到Figma中,从此包装设计稿不用愁找不到适合的mockup了,自己动手丰衣足食。
另外值得一提的是Vectary3D这款插件背后的产品,是一款与其同名的基于浏览器的在线3D设计工具。
Vectary3D界面
A11y系列
A11y系列由Microsoft出品,包含两款插件:
ColorContrastChecker
用来检查设计稿内文本对比度是否遵守WCAG(WebContentAccessibilityGuidelines)标准,以保证用户的可以无障碍阅读文本内容。ColorContrastChecker的使用非常方便,唤起插件,选中需要检测的界面,点击「Check」即可。
不过这款插件也存在偶尔失效的问题,笔者还没发现其规律和玄学。色彩对比度检测的插件除此之外还有三款,其中Contrast是笔者体验下来是其中比较不错的一款,如果没有对整个页面内所有文本自动检测的需求,Contrast会更适合使用。
Contrast
FocusOrderer
FocusOrderer帮助设计师标记并测试焦点状态(Focused)的流程和体验是否合理,一般在网页设计中使用。
ColorBlind
上面提到的ColorContrastChecker可以检测文本的对比度,而ColorBlind则可以将设计稿自动转成8种不同类型的色盲效果,借此我们可以进入色盲用户的视角审视我们的设计是否合理。
Roller·DesignLinter·Toybox
Roller是一款样式自动检查工具,通过添加或导入styles后,可以以此为基准校验文件内使用的颜色、字体样式、阴影、圆角大小是否符合设计规范,以保证设计产出完全对齐规范。不过Roller有个很大的问题,其本身不支持rgba,希望后续会有优化。
Roller
Roller好像是目前市面上(不包括某些大厂的内部工具)出现的第二款设计校验工具(笔者已知的第一款是sketch-lint),虽然类似概念的工具在开发那很早就存在,但我们还在用最原始的人肉方式处理样式不规范的问题,从components到designlint,设计的工程化还要走好长一段路。
Chromacolors
Chromacolors可以通过选中多个对象快速创建Colorstyles,省去了为每个颜色手动创建style的重复劳动,在搭建组件库初期帮助很大。
以上推荐的插件均为笔者日常工作会用到的一些功能和体验不错的插件,其实还有很多优秀的插件可以推荐,比如官方人员出品的Themer,可以一键切换主题;自动生成视觉焦点图的VisualEyes;还有Productplane、Wireframe、Graphviz将图表、流程图全部搬运到Figma中,实现排期、文档、设计allinFigma。限于篇幅有限,而且新插件上线频繁,只能介绍这么多。
最后在复习下重点,快捷键/呼出搜索,输入插件名,开始愉快的使用插件吧。