UI设计师必须收藏的20款超好用Figma插件

听说点击蓝色字体关注同窗都升职加薪了
web

不少UI设计师小伙伴都从Sketch转到Figma了，本文为你们介绍21款好用的Figma插件，记得收藏！但愿这些插件能助你一臂之力。快收藏~

如何在Figma中添加插件？

安装plugin的方式很是简单，从 figma community 点击想加入的plugin，进入产品页后点击右上方[Install]，安装后按钮会呈现黑底[Installed]。

找到Plugin的方式有两种: 回到Figma介面中，点选左上汉堡菜单，就可找到刚才安装的Plugin；或是点选元件，按右键也可找到Plugin菜单。

实用Figma plugins推荐

接下来我将介绍这些日子实际接触过的插件，共分为三大类。大部分我都试用过并附上截图与使用心得。少数须要付费，或须要设定API or JSONbin 的我没法再深刻研究，可是会附上Youtube说明影片。

1.界面美学类*11款 (Visual Design, Animation)

2.设计系统类*4款 (Design system, UI/Icon Kit)

3.提前下班类*5款(Design management…)

1.界面美学类

(1) Image Palette (图像配色提取)

对新手来讲，配色确定是面临的难题之一。Image Palette 帮你从所选图片中提取5种颜色，很适合用来定义产品与品牌形象类型的介面色彩，是开启优雅配色的起手式。

(2)Webgradients (色彩渐变)

Webgradients 能够协助设计师快速制做渐变，无须本身吸色选取。内建多种漂亮的渐变配色，操做直觉很是容易理解，用过就知道

(3) Unsplash (高画质图片素材)

还忙着在搜索引擎中切换找图吗? 借助Unsplash就能够直接插入随机图像，或搜索特定图像。除了画质精美外，Unsplash 还容许将图像免费用于商业和我的专案。

(4) Wire Box (将高保真图转为线框图)

彷佛比较少需求是把高保真原型反向转成线框图? 但试用Wire Box后我发现，去除多余杂色与色彩的减法设计也别有一番简约风味，若不想思考用色时能够玩玩Wire Box 创造不一样的感受。

须要注意：

1. 选取Frame后，才能使用Wire Box转成线框图

2. 有些元素会被漏掉，没法100%还原；例如「线段 Line」没法被显现

3. 有作遮罩效果的元件，只会显示底层元素

4. 能够依喜爱改色

(5) Blobs (建立不规则矢量色块)

还记得那怎样都拉很差的贝塞尔曲线吗? Blobs 让你轻松建立斑点形状。生成的每一个形状都是惟一的，很适合用来作Landing page的背景。透过设定能够控制形状的节点数，形状是使用SVG建立的，能获得不失真且线条优雅的曲线。

(6)Pattern Hero (制做重复背景与元件)

Pattern Hero的功能与Adobe XD-Repeat Grid相似，虽然使用上须要较多的步骤，但的确能解决我当初想作重複背景的需求。

须要注意：

1. 几栏、几列与Padding距离都需要先设定好，而生成后这些设定都没法再被新增或删减(Adobe-Repeat Grid比较直观，数量以拖曳范围来决定)

2. Padding距离能够直接拖曳调整(右图桃红色色块)，但原控制面板上的设定数值不会跟着动

3. 点击个别元素能够修改色彩或文字

4. 除了让色块重复成为Pattern外，也能够做用于群组化的元件

(7)BeatFlyer Lite (静态图片转动态图)

BeatFlyer Lite本来个第三方的动态制做工具，不过如今它也做为插件直接内嵌到Figma当中！界面操做简单易懂，提供好几种动态设定，只须要快速点击几下，就可以生成动态效果

须要注意：

1. 可说是轻量化的静态影像动态编辑软体。虽然不是作UI界面必须的，但适合搭配电音类型的应用app。

2. 不太像通常对插件的定义。虽然能够从Figma中开启，但制做完成后档案是下载到本机端资料夹中，因此仍是得将动态档拖曳到Figma(操做流程被打断)，不像其余插件一直都在figma中使用。

(8) GiffyCanvas(制做gif逐格动画)

无需离开Figma，你只需利用GiffyCanvas就能够建立gif图像。设计并选择要制做的Frame文档后，设定动画参数（时间，宽度，高度）而后预览，看了没问题以后就能够下载了。

(9) LottieFiles(置入Lottie动画)

Lottie 最初是由Airbnb 开发的开源JSON文件动画工具，今年2月14情人节才加入Figma插件平台，很快就上了排行榜。经过它，你能够将成千上万的免费Lottie动画做为gif或SVG插入你的设计中。

(10)Humaaans for Figma(轻松制做人物矢量)

Humaaans 让你快速建构出人物插画，除了default设计好的图样，也将头、身体、配件等拆开供设计师自行组合，你也能够改变颜色与大小，概念很像之前小时候玩的纸娃娃。目前只提供少许人物动做造型还有部分居家配件，期待以后有更多的物件可使用!

(11)Isometric(快速制做斜放产品图)

Isometric帮助你快速制做斜放的UI产品图。操做很简单，选择要旋转的物件，调整角度以后就能够了。

须要注意：

1. 斜放角度为2D+3D角度合成。用户可自行输入想要的2D旋转角度，但3D角度空间角度Isometric仅预设左斜或右斜两种。由于3D角度没法被调整，老是作不出我想要的角度，因此我的以为不是很好用。

2. 若要放进做品集，最好仍是选择产品正面较佳(能看清楚细节)，不建议斜放产品图。

2.设计系统类

(1) Figma Dashboard UI Kit (付费)

内含多种Design System UI Kit，最被普遍使用的iOS、Material Design等都在其中，但此网站须要付费，可视需求使用。

(2) FigmaCrush (Icon+UI Kit, 部分付费)

这个网站能够理解为各类Figma资源的集合平台，上面收集许多免费或付费的Icon与界面设计。

(3)Design System Organizer(图层命名与组织整理, Beta版)

当你在使用设计系统来进行设计的时候，你可能须要针对特定组件的不一样状态，样式进行管理。Design System Organizer能帮助你整理元素和控件样式，也能够针对这些组件进行分组，移动，重命名（批次）等等。

(4)Able (色彩对比度插件)

打开Able，能够自动比较你选择的两个图层之间的色彩对比度。此外也会同步显示不一样状态的样式(如字体大小、粗细)，供用户参考比较。

3.提前下班类

(1)Product Planner (产品规划模版, Beta版)

Product Planner 提供各类产品规划过程会用到的模版，如 product planning, product insights, identifying risks, Persona, Lean Canvas等等。它于2019.10月开始发布，目前已有27种模版释出往后还会再增长，不知道会有多少产品经理或产品设计师使用此模版? 好用吗? 很好奇。

(2)Content Reel (自动填充内容)

透过Content Reel，设计师能够轻松地将文本、头像和图标拉入设计。不用一个一个填充。

使用图标前，得先下载Content Reel中使用的字体。

(3) Design Lint (设计除错)

在将设计稿提交给开发前，须要确保整个设计细节是一致的，而这个超赞的免费插件，可以检查你的原型或者视觉稿件如颜色，字体，效果，填充样式，笔触，边框区域是否存在不一致，简直是一个自动纠错工具，更重要的是它是动态实时的，所以你能够边工做边用它纠错。

须要注意的是：

此插件好很差用得看设计的复杂度。试用后发现Design Lint作得很仔细，可是会细到连矢量插画不同的颜色都帮你挑出来。😅

(4) TinyImage Compressor(图片压缩打包, 付费)

这也是一个实用性极强的Figma插件，TinyImage 可以帮你压缩图片-可以比Figma自己生成的图片要小90％。此外，它也支持透明PNG和渐进式的 JPEG格式优化，可以在使用过程当中记住你的设置，并在生成多个图像时自动帮你打包成为ZIP格式压缩包。

(5) Remove BG(去背景插件，需使用remove.bg API)

若没有Photoshop或懒得抠图，Remove BG应该是个梦幻插件。只需单击一下，便可自动删除图像背景，需使用remove.bg API，可是我没成功。

这么多插件，记得先收藏转发本文，而后再给个赞哦。