Figma Tech

2020年最好的Figma插件

2020年 03月 16日 · 10 min read

我们为 Figma 筛选了一些当前最新的容易也是被人们忽视的高效插件,以促进设计系统的开发。

毫无疑问,现在的 Figma 是创建设计和原型的工具中的旗舰产品之一。与 Adobe XD 或 Sketch 相比,优势在于 Figma 是一种在线设计工具,可为用户提供与其他人实时设计和协作的机会。因此,由于其出色的功能和界面,许多 Adobe XD、Sketch 和 InVision 的用户开始使用 Figma。

但是,Figma 有一个很大的缺点,那就是从其他平台“迁移”的用户会无法使用以前工具中的插件。许多Figma 用户要希望可以继续使用之前软件的插件,这显然不是很方便。而且,我们作为设计师目的就是“努力使我们的生活和他人的生活更轻松”,并且我们正在寻找各种方法和工具来帮助我们变得更有效率,改善和加速我们的工作流程。

在2019年8月,一切都发生了变化 - 经过数周的封闭 Beta 测试,Figma终于宣布在其系统中启动插件。 Figma 的员工说:他们两年前就拥有插件的想法,而这段时间他们一直在忙于完善API,以保证插件在Figma内的正常运行。

使用插件的优点

插件可以简单且直观地增强Figma的功能。它们可以帮助我们以自动化的方式去进行排列和处理重复性任务 - 使用图层名称、搜索、分组、添加特殊功能(例如向模型添加有用的内容)。插件就像蝙蝠侠的管家阿尔弗雷德。始终在正确的时间为我们带来便利。

目前,在 Figma 中有将近420个插件。是的,几乎每天都有人在添加。发布 Figma 插件的妙处在于,它们不是由公司员工开发的,而是由像你我这样的普通人开发的。如果您知道流行的编程语言并可以创建一个有趣的插件,那么公司和整个 Figma社区 都将很可高兴的使用你的产品!

也有一些缺点

尽管我们认为 Figma 在许多方面都超过了 Sketch,但是 Sketch 在插件方面目前仍然是赢家。主要原因是处于当前状态的 Figma 插件不允许以实时模式将更改后的数据发送给系统。

我们开始说 好用的插件吧!

Setproduct 团队收集的排名前 20 个 Figma 插件

我们已经将有助于改善工作流程、提高生产率并为设计过程增添乐趣的工具收集在这里了。本文将从最后一个开始介绍,希望您不会错过所有的乐趣☕

Coda for Figma


Coda for Figma 是与名为 Coda 的文档生成工具一起使用的插件。借助此插件,您可以使用来自Spotify,Wikipedia,Dropbox,Gmail,Google Calendar,Jira,Shopify,Github等服务的数据填充布局。
这个插件是近期新上的,但是在社区中越来越流行。

LilGrid


LilGrid 是一个可以整理界面的插件。它采用系统中所有无序的元素,并以您定义自己的网格形式组织它们。
在需要在设计系统中组织大量按钮或图标的情况下,才可特别有用,有点类似于机器学习。
LilGrid 不会更改设计的元素,而只会在画布上排列它们的位置。

Table Paste


Table Paste对于需要将数据从 Excel 电子表格传输到 Figma 中创建的样式表的人来说,该插件将非常有用。
您可以在Figma中创建一个表行,并为每个单元格添加一个文本字段,然后从中创建一个组件。接下来,从这些行创建一个表,然后选择要向其应用数据的表行。
最后,在 Excel 中,将选择的数据复制到 Figma 表中后,您的 Excel 数据将会在 Figma 中进行了样式化。

Design System Organizer


如果您在设计系统上工作,则可能有一些组件和样式,其名称的组织方式如下:“Buttons / Small / States / Default”。
该插件可以帮助你来对这些组建进行命名。它可以对您对组件进行分组、取消分组、移动、重命名。
重命名组后,该组中所有组件或样式的名称都会更改。而且,您不要再进行搜索和替换。

Figma Dashboard UI kit


Figma Dashboard UI kit基于可重用的仪表板模式,这些模式是从最成功的应用程序中精心挑选的。它包含自适应组件,可以加速应用程序的开发。包括550个设计项目,48个全幅模板,1000个材质图标。每个由组件组成的仪表板布局都有黑白两套布局,组建排列井井有条,并且受到适当的母模版约束。

Movie Posters


Movie Posters 出自 Must App 创作者。对于想要创建专用于电影和电视节目的应用程序或网站的人来说非常有用。
该插件的主要功能是,它会随机填充您用电影或电视节目中的图像或海报创建的任何矢量对象。

Dot Grid


该插件适用于那些喜欢使用网格的人。使用“点网格”在Figma的网格中添加一些吸引力。
它可以进行自定义 - 您可以使用如宽度、高度、大小、间距和颜色之类的参数。

GiffyCanvas


很简单 - 您无需离开 Figma 就可以创建GIF图像。安装插件,选择要用于创建GIF的图像,设置文件参数(间隔,宽度,高度),然后预览后即可下载文件。

BeatFlyer Lite


很棒的工具!它最初是作为第三方应用程序开发的,现在在 Figma 中拥有自己的插件。这个很酷的插件使您只需单击几下即可为设计添加动画效果并为设计添加令人印象深刻的效果。
十分感谢 BeatFlyer Lite!您的设计将始终在其他设计中脱颖而出。

Figma Material Design Kit


Figma Material Design Kit 基于100% material.io 准则而设计,并且包含大量可扩展且受限制的组件,以加快应用程序开发。包括 1000个明暗UI组件、120个模板、1000个材质图标。

Color Kit


该插件将帮助您生成所需颜色的浅色和深色。当您需要创建颜色渐变时,它可以帮助你。
而且,如果您熟悉 Eva Design System(生成颜色的第三方应用程序),您将容易 Figma 中使用Color Kit,因为它执行类似的操作,而且您不用离开Figma。

Material Palette


该插件是为喜欢制作“材质”调色板的“材质设计”爱好者创建的。现在节省了时间,您可以根据材料方法在用户界面中创建调色板。
有3种调色板供您使用:材质、单色、纯单色。我们希望Google在下一次更新中会刷新此调色板,因为某些颜色包含巨大的间隙并需要平衡。

Wire Box


Wire Box
是一个非常有趣的插件。如果您有现成的高保真解决方案,则可以快速创建UI模型。但是,如果您想专注于项目的UX部分,此插件有助于将高保真模型转换为低保真线框。

Vector Maps


Vector Maps可让您将国家,地区和城市的矢量地图下载到Figma模型中。
查找国家或地区非常简单 - 您可以按名称搜索它,也可以在地图上选择它。
矢量图将作为单独的帧导入到Figma中。

Webgradients

Webgradients会生成漂亮的渐变,可为你的设计增添创意。
借助Webgradients,您可以使用滤色器查找所需的变体(180种颜色)并将渐变添加到收藏夹中。一个非常方便的工具,通过为您提供适合您项目的正确配色方案,可以大大节省您的时间。

Figma iOS UI kit


Figma iOS 设计套件基于从著名且成功的应用程序中收集的经过验证且可重复使用的移动模式。它包含240个明暗响应模板,您可以根据自己的任务自定义,分离和重新配置它们。精细的布局集合,其中的所有内容均已预先覆盖。

LottieFiles


在撰写本文时,此插件仅在5天前被添加到 Figma 的系统中,但由于已经安装了1000多个用户,因此该插件立即跻身我们评级的前3名。如果这不是插件质量的指标,那该怎么办?
有了LottieFiles,您的设计将变得栩栩如生,并添加精美的动画,吸引用户的眼球。将成千上万的免费Lottie动画作为GIF文件插入动画,或将动画帧作为SVG文件插入。要查看动画效果,请点击“查看演示”。

TinyImage Compressor


导出图像时,您可以使用此插件压缩文件大小,最多比Figma的默认导出压缩90%。该插件具有许多有趣的功能:它不仅支持压缩和导出不同大小和格式的文件,而且还支持透明PNG和渐进JPEG的优化。 TinyImage Compressor会在导出过程中记住设置。导出多个图像时,插件会自动将它们导出为.zip文件夹。
它有许可证 - 通过 TinyImage 压缩15次文件后,将要求您购买许可证。

Design Lint


在将工作交给开发人员之前,请确保您的设计文件是一致的。这个非常棒的免费开放源代码插件,适用于Figma,可检查您的模型中的差异(即在所有图层中查找项目中缺失的样式-检查颜色、字体、效果、填充、笔触、边框半径)并纠正不一致之处。该插件的一个很酷的功能是它可以动态工作,这意味着当您在工作时进行更正时,Design Lint会根据您所做的更正自动更新。
一个很棒的工具,可以帮助您更加专注于设计过程,而不是解决错误。


因此,正如我们所看到的,Figma 变得越来越方便,用户越来越多,插件就是最好的明证。插件市场正在突飞猛进地发展,我们可以确定,在2020年,Figma的用户体验将继续改善。