在世界范围内,Figma 已经作为主流的原型和数字设计软件而存在,和 Adobe XD 和 Sketch 相比,Figma 作为在线工具,有着更强的实时协同功能。出色的用户界面和走心的交互设计让 Figma 逐渐成为主流,而超高的迭代速度让 Figma 开始俘获越来越多设计师的心。
不过 Figma 的缺陷也挺明显的,那就是缺少第三方插件。许多从其他平台迁移过来的设计师对于这一点有所诟病,而 Figma 本身也在试图解决这个问题,完善提升插件生态。
在 2019 年 8 月,经过数周的 Beta 测试之后, Figma 终于在系统中启用插件。根据 Figma 的开发者透露,早在2年前他们就已经开始了这一工作,不过为了确保插件的平稳使用,他们一直在修改功能,完善 API。
2019 年的精选 Figma 插件:
插件的优缺点
用插件来完善 Figma 的功能和体验,无疑是非常简单直观的逻辑,按需安装,对于优化 Figma 本身所缺乏的功能和服务,将会带来巨大的便捷,比如自动化运行重复性的批量操作,这些都是插件可以提供的。
截至目前,Figma 当中已经有超过 400 款插件,并且几乎每天都有心的插件加入进来。这些插件并非是 Figma 官方人员开发,而是像你我一样的普通用户或者开发者提供的,如果你想自己开发插件,整个 Figma 社区都会在后面支持你。
不过,目前来看,虽然 Figma 软件本身有很多特性已经超过了 Sketch ,但是在插件生态上,依然有太多东西要向 Sketch 来学习的。并且值得一提的是,Figma 插件不允许插件以实时模式更改数据并返还系统,这个限制极大的削弱了插件的功能和可能性。
如果你是 Sketch 用户,想迁移到 Figma ,不妨看看这篇指南:
尽管有缺陷,但是 Figma 插件依然能够极大的强化设计师的操作空间,下面,我们一起来看 Setproduct 团队优选的 17 个高素质插件吧。
Coda for Figma 是一款能够和 Coda 进行联动的插件,接触这个插件,你可以调用来自 Spotify、Wikipedia、Dropbox、Gmail、Google Calender、Jira、Shopify 还有 Github 的数据,用这些数据来填充布局。这个插件其实挺新的,而且社区内越来越多的人开始乐于使用它。值得尝试哦~
LilGid 实用性也极强,这是一款能够帮你整理界面的插件,并且你可以通过自定义组织样式。在需要整理大量的设计内容比如按钮和图标的时候,这款插件非常有用。
LilGrid 本身并不会修改设计元素,但是能帮你在画布上更整齐、富有条理逻辑地排列他们,绝对是强迫症的福音。
看名字就知道,这是一个处理表单的插件。对于需要将 Excel 表格中内容传输到 Figma 的设计师而言,表格的样式管理绝对是个难点,那么这个时候,你需要 Table Paste 。
你可以简单的先创建一行表格,然后添加文本字段,生成组件。在你设计好的表格组件当中,再粘贴来自 Excel 的表单内容,就行了。在这个过程中,表单的样式你可以事先定义好。
对于需要数据呈现的设计,这款插件可以说非常有用了。
当你在使用设计系统来进行设计的时候,你可能需要针对特定组件的不同状态、样式进行管理,它的命名方式甚至都有讲究,便于你后续的查找检索和修正,所以它的组织方式可能是这样的:「按钮/按钮大小/按钮状态/默认」
这款插件就非常有助于你来以这样的方式来整理元素和控件的样式,也可以针对这些组件进行分组、移动、重命名(批量)等等。
对于设计系统中的元素和空间的样式管理,这款插件能够对官方的功能进行补完,如果你要进行相对复杂多样的系统化的设计,那么最好试试这款插件。
你看的没错,这是一款付费的 Figma 插件,但是它付费也有付费的价值:这款名为 Figma 仪表盘UI Kit 的插件涵盖了精心挑选的最成功 UI 组件,包含一堆进行了响应式适配的组件,能够帮你加速应用程序的开发。
这套插件中包含 550 多个完整的设计项目,48 款系统化的模板,1000 多款素质极高的图标,每个组件都包含标准模式和深色模式,井井有条,物有所值!
这款插件来自于 Must App 的开发者,这对于想要创建影视相关的设计的同学而言,有着非凡的价值。
这款插件的主要功能是生成海报,它会随机地选取电影和电视节目中的图像或者海报甚至矢量元素,超快超省心。
如果你在设计的时候,喜欢用网格的话,那么这款能够帮你生成网格的插件就是你的菜了。
当然,如你所预料的,你可以非常轻松地定义网格的宽度、高度、大小、间距、颜色等属性,同时,它还能足够漂亮细致,满足你对于优质插件的期待。
这款插件非常简单,你无需离开 Figma 就可以创建 GIF 图像,宣召你要创建的 GIF 图像,设置文件参数(时间,宽度,高度)然后预览,看了没问题之后,就可以下载了。这款插件是对 Figma 本身功能的一个重要补完,省去你再去打开其他的应用去制作 Gif 图。
最开始 BeatFlyer Lite 是一款完全第三方的工具,不过现在它可以作为插件直接内嵌到 Figma 当中了!你只需要快速点击几下,就能够生成动画,输出令人印象印象深刻的动画效果!虽然 Figma 当中有类似的功能,但是并没有 BeatFlyer Lite 这么强大,所以一定要试试看。
也许你已经厌倦了那些动不动就生成整套配色方案,但是更深入的细节功能又没有的配色工具吧?这回来个细致的:Color Kit。这款工具是专门帮你制作所需颜色的深浅色阶的,当你需要制作色彩渐变,或者基于某个色调来制作富有层次的设计的时候,它就发挥作用了。
另外,如果你是第三方配色工具 Eva Design System 的用户的话,就更好了,因为它的功能和体验与之类似,你可以无需离开 Figma 就完成相关的操作,习惯和体验都无缝衔接过来。
如果你是 Material Design 的爱好者,那么这款 Material Design 配色方案生成工具,就是专门为你所准备的。这套工具是基于 Material Design 来制作的,你可以不用查询,直接通过这则个插件来查找合适的配色。
在使用过程中,它会同时生成三套配色方案,分别是 Material 配色,单色和纯单色三种,具体你可以尝试一下。在 Material Design 中,这种配色思路非常不错,但是不同颜色之间的搭配可能不够离线,不够连续,希望后续有所改进。
做设计有的时候,并不是一直沿着一个方向来做的。如果你有现成的高保真模型,那么借此来设计 UI 样机是非常方便的。可是如果你的设计还不够完善,还想继续调整用户体验,那么你可以借助 Wire Box 可以将高保真模型重新逆向转换为低保真的线框图,继续进行修整~
当然,帮你生成渐变的工具有很多种,而 Webgradients 这个插件就是其中最值得尝试的一个——它可以帮你制作出效果非常出众的渐变效果。在这款插件当中,它不仅能够生成渐变,而且能够收藏、管理不同的渐变效果,极大地节省你做设计的时间。
LottieFiles 是最新加入 Figma 平台的插件之一,仅仅上线 5 天就被超过 1000 名用户下载安装,并且很快跻身热评榜。正如同它名字所暗示的,这是一个关于著名动画工具 Lottie 的插件,借助它,你可以将成千上万的免费 Lottie 动画作为 GIF 或者 SVG 插入到你的设计当中,可以说非常非常给力了。
这也是一款实用性极强的 Figma 插件,TinyImage 能够帮你压缩图片——能够比 Figma 本身导出的图片要小 90%。这款插件还有很多有趣的功能,比如支持透明 PNG 和渐进式的 JPEG 格式优化,它能够在你使用过程中,记住你的设置,并且在导出多个图像的时候,自动帮你打包成为 ZIP 格式压缩包,非常良心。
在将你的设计提交给开发之前,你是一定要确保整个设计上是一致的,而这个超赞的免费插件,能够检查你的原型或者视觉稿当中,是否存在不一致的地方,比如颜色、字体、效果、填充样式、笔触、边框半径,简直是一个全自动找茬纠错工具,更重要的是——它是动态实时的,也就是说,你可以一边工作一边用它纠错,不错吧?
当然,如果你想要其他的神器和干货,不妨看看下面这些:
作者: Roman Kamushken