ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

行业指南

18

阅读时间

设计师必备的 20 款最佳 Figma 插件

探索最佳的 Figma 插件,提升你的设计工作流程。

丹妮丝·威尔豪斯, 增长营销经理

Figma 是一款被各个技能水平设计师使用的强大工具。虽然它本身已经内置了许多实用功能来创建精美且可交互的设计,但设计师还可以借助插件将工作流程提升到更高层次。

在这篇文章中,我们将探索顶级的 Figma 插件,帮助像你这样的设计师在设计流程的每个阶段节省时间和精力。内容将包括它们的功能与优势总结、使用说明,以及我们关于在设计工作流哪个阶段最适合使用它的建议。

时间紧张?请查看下面的插件列表。

TL;DR

  1. **WireFrame ** - 最适合快速创建线框图

  2. Illustrations - 最适合免费插画

  3. ProtoPie - 最适合将你的 Figma 设计转换为高保真原型

  4. PitchDeck Presentation Studio - 最适合创建路演演示文稿

  5. Autoflow - 最适合建立简单用户流程

  6. ProtoPie Genie - 最适合直接在 Figma 中添加逼真交互

  7. UIHUT - 最适合查找设计资源

  8. Draw Connector - 最适合连接图层

  9. TinyImage Compressor - 最适合导出压缩图片文件

  10. Blush - 最适合创建和自定义插画

  11. TokensStudio - 最适合处理复杂设计系统

  12. ColorWell - 最适合在设计中混合颜色

  13. Mockuuups Studio - 最适合在设备样机中查看设计

  14. LottieFiles - 最适合为你的 Figma 设计添加动画

  15. LoremIpsum - 最适合为你的 Figma 设计添加示例文本

  16. Unsplash - 最适合为你的 Figma 设计添加图片

  17. Icons8 - 最适合为你的 Figma 设计添加图形

  18. Image Tracer - 最适合将图像转换为矢量图层

  19. Iconscout - 最适合为你的 Figma 设计添加丰富的设计资产

  20. Flaticon - 最适合为你的 Figma 设计添加图标

  21. RemoveBG - 最适合在 Figma 中移除照片背景


什么是 Figma 插件?

Figma 插件是扩展 Figma 和 FigJam 功能的应用程序。它们使用户能够执行超出 Figma 核心功能的各种操作。

基本上,这些插件提供了额外工具、自动化和自定义选项,从而增强设计流程并提升生产力。

设计师必备的 20 款 Figma 插件

Figma 的插件库为不同使用场景提供了丰富插件,包括设计系统、设计令牌、线框图、资源集合等。以下是其中一些最受欢迎且功能强大的插件。

请注意,以下推荐插件不分先后顺序。

1. Wireframe - 最适合快速创建线框图


wireframe plugin


Wireframe

Figma 的 Wireframe 插件可让你创建线框图、用户流程、原型以及其他设计基础结构,而无需从零开始。它附带一个免费资源库,包含 350+ 个为 Web 和移动端定制的图形,对于时间紧张的设计师来说非常实用。额外优势是,你还可以在与同事实时协作时使用该插件。

工作方式:

  • 从 Figma Community 在这里安装插件,并在你的 Figma 设计项目中运行。

  • 开始在 Figma 中拖放线框图——就这么简单。

价格:

免费。

2. Illustrations - 最适合免费插画


illustrations figma plugin


Illustrations

Illustration Libraries for Figma 是一款免费插件,可用于将高质量插画插入你的设计中,且这些插画都可在 Creative Commons 许可下自由使用。无需从零开始绘制插画来美化设计,只需从资源库中挑选即可。

工作方式:

  • 从 Figma Community 在这里安装插件,并在你的 Figma 项目中运行。

  • 浏览资源库或搜索插画,找到喜欢的后将其拖放到你的项目中。

价格:

免费。

3. ProtoPie - 最适合将你的 Figma 设计转换为高保真原型


protopie figma plugin


ProtoPie Figma 插件

借助 Figma 的ProtoPie 插件,你可以轻松导出设计,制作可交互的高保真原型,其效果和外观几乎与真实产品一致——这在仅使用 Figma 时较难实现。

如果 Figma 是你常用的 UI 设计工具,ProtoPie 可以通过条件、公式和变量等动态交互,帮助你将原型提升到新水平。你可以添加文本输入、摄像头、语音和媒体播放,甚至创建彼此通信的原型——一切皆有可能。

工作方式:

  • 首先,确保你已安装 ProtoPie。

  • 同时打开 ProtoPie 和 Figma 的 ProtoPie 插件(在这里安装插件)。

  • 选择任意画框或对象,然后点击 Export。

  • 在 ProtoPie 中添加强大的交互。

了解如何同时使用 Figma 和 ProtoPie!

价格:

免费(提供付费专业版企业版方案)。

4. Pitchdeck Presentation Studio - 最适合创建路演演示文稿


pitchdeck figma plugin


Pitchdeck Presentation Studio

Figma 的 Pitchdeck Presentation Studio 插件可让你轻松在 Figma 中创建演示文稿,并支持动画和 Figma 内实时预览。你可以将演示导出为多种文件格式,包括 PowerPoint、Keynote、Google Slides 和 PDF,还可嵌入来自 Loom、Canva、Lottie、Spotify 等资源。

工作方式:

  • 从 Figma Community 在这里安装插件,并在你的 Figma 项目中运行。

  • 如需更多使用细节,请查看这里的用户指南。

价格:

免费(提供付费专业版)。

5. Autoflow - 最适合建立简单用户流程


autoflow figma plugin


Autoflow figma 插件

Autoflow 是一款 Figma 插件,可帮助你快速轻松地创建手绘或极简风格的用户流程、图表和图形。通过智能障碍检测、文本注释和自定义路径路由等功能,Autoflow 让你更快、更轻松地创建精致流程图。

工作方式:

  • 从 Figma Community 在这里安装插件,并在你的 Figma 项目中运行。

  • 按住 Shift 选择两个对象,Autoflow 会自动绘制箭头将其连接。

价格:

免费(最多 50 条流程),个人终身访问一次性支付 29 美元。

6. ProtoPie Genie - 最适合直接在 Figma 中添加逼真交互


ProtoPie Genie plugin


ProtoPie Genie 插件(适用于 Figma)

通过 ProtoPie Genie 插件,你可以在几秒内直接为 Figma 原型添加逼真交互。
该插件的交互将把你的 Figma 原型提升到新高度,以卓越质量增强沟通并提升用户测试效果。

在当前测试版中,该插件可让你为原型添加可交互输入框。敬请期待即将推出的更多功能!

工作方式:

  • 在你的 Figma 项目中打开 ProtoPie Genie 插件。

  • 选择要添加交互的 Figma 对象,并添加交互。

  • 选择包含该交互的 Figma flow,并点击预览/发布按钮。

  • 体验添加交互后的 Figma 原型!

价格:

免费

7. UIHUT - 最适合查找设计资源


UIHUT figma plugin


UIHUT

UIHUT 是一款 Figma 插件,为个人设计师和设计团队提供海量资源库,包括数千个 UI 套件、网页模板、插画、3D 资产和图标。通过该插件,你可以提升工作流程效率,并为各种设计需求找到组件。

工作方式:

  • 从 Figma Community 在这里安装插件,并在你的 Figma 项目中运行。

  • 创建 UIHUT 账户并登录。

  • 通过分类或搜索功能找到你喜欢的设计,然后复制并粘贴文件到你的 Figma 设计画板。

价格:

免费(提供专业版和团队版)。

8. Draw Connector - 最适合连接图层


draw connector figma plugin for designers


Draw Connector

Draw Connector 是一款高级 Figma 插件,允许用户在图层之间绘制完美的正交连接线,并可自定义边缘、连接端点、描边颜色、宽度、样式等。借助智能寻路,当已连接图层发生变化时该插件会自动更新,便于创建和维护准确图表。

工作方式:

  • 从 Figma Community 在这里安装插件,并在你的 Figma 设计项目中运行。

  • 选择两个图层即可将其连接。

价格:

每个 Figma 设计文件可免费使用 5 次,用户也可一次性支付 39 美元永久解锁 Draw Connector。

9. TinyImage Compressor - 最适合导出压缩图片文件


tinyimage compressor plugin


TinyImage Compressor

TinyImage Compressor 是一款强大的 Figma 插件,可让设计师导出比 Figma 默认导出小至 95% 的图片,同时保障数据隐私。凭借可自定义压缩级别、导出格式和文件大小等功能,TinyImage Compressor 可轻松优化网页和移动端设计中的图片。

工作方式:

  • 这里安装插件,并在你的 Figma 设计项目中运行。

  • 查看这里的用户指南,了解更多插件使用信息。

价格:

免费(提供专业版)。免费版包含 15 次 TinyImage Pro 试用。

10. Blush - 最适合创建和自定义插画


Blush figma plugin


Blush Figma 插件

Blush 是一款可用于自定义插画的 Figma 插件。它提供可混搭的设计元素、艺术家作品集和随机构图生成功能,让你轻松创建符合品牌审美的独特插画,无需四处寻找现成插画或从零设计。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 选择一个合集,挑选构图,放到画布上,然后持续调整直到满意为止。

价格:

免费(专业版 20 美元/月)。

11. Tokens Studio - 最适合处理复杂设计系统


Tokens Studio figma plugin


Tokens Studio

Tokens Studio 是一款实用插件,可让你在 Figma 中使用设计令牌实现多种设计选项,从圆角半径或间距单位到语义色和彩版样式,并可将所选样式变更应用到整个文档。该插件还提供高级功能,例如将令牌连接到 Figma Styles、多文件同步,以及 Pro 方案中的高级主题管理。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 查看这里的用户指南,获取深入信息。

价格:

免费(提供专业版)。

12. ColorWell - 最适合在设计中混合颜色


Colorwell plugin


Colorwell 插件

ColorWell 是一款 Figma 插件,可让你像调色一样轻松混合并保存颜色、创建新配色,并将颜色作为填充或描边应用到 Figma 设计中。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 选择颜色并旋转调色器进行混合。然后你可以将混合色用于或保存到你的调色板或 Figma 设计中。

价格:

免费(一次性支付 5 美元)。

13. Mockuuups Studio - 最适合在原生设备样机中查看设计


Mockuuups Studio


Mockuuups Studio

Mockuuups Studio 是一款全面的 Figma 样机插件,提供超过 2400 个高质量场景、各种设备类型和不同背景,且均可在单一插件中访问。你只需选择一个画框即可创建惊艳的网站和应用产品设计样机——插件会自动将其放入数百种预览中。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 查看这里的用户指南了解更多信息。

价格:

免费版(提供专业版和团队版方案)。

14. LottieFiles - 最适合为你的 Figma 设计添加动画


Lottie Files Figma plugin


LottieFiles 插件

LottieFiles 是一款 Figma 插件,允许你通过拖放自己的 Lottie JSON(.json)或 dotLottie(.lottie)文件,将 Lottie 动画插入设计中。你还可以访问数千个免费 Lottie 动画组成的资源库。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 搜索你的动画,并将其插入到设计画板中。

价格:

免费(提供专业版和团队版方案)。

了解如何在高保真原型中使用Lottie 动画

15. Lorem Ipsum - 最适合添加示例文本


Lorem Ipsum Figma plugin


Lorem Ipsum Figma 插件

正在做网站或应用,但文案还没定稿?Lorem Ipsum 是一款 Figma 插件,可生成——你猜对了——Lorem Ipsum 占位文本,用于填充设计中的多个文本图层。该插件还支持 Figma 的快速操作,让你无需打开插件窗口也能快速生成文本,并可在包括 Pirate Ipsum 和 Pizza Ipsum 在内的八种生成库中选择。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 选择一个文本图层,然后点击 Generate。就这样!

价格:

免费。

16. Unsplash - 最适合添加图片


Unsplash Figma plugin


Unsplash Figma 插件

Unsplash 是一款 Figma 插件,提供超过 300 万张免费高分辨率图片,可直接插入你的设计中。Unsplash 许可允许图片在商业和个人项目中自由使用。与其添加随意图片,不如挑选最适合你设计项目的那一张。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 找到你喜欢的图片,点击即可插入文件。

价格:

免费。

17. Icons8 - 最适合添加图形


Icons 8 plugin


Icons8

Icons8 是一款 Figma 插件,提供由顶级设计师和艺术家打造的统一风格资源库,包含超过 300 万个图标、插画和照片。该插件允许你按关键词搜索、按风格和类别排序,并在不离开 Figma 的情况下轻松获取图形资源。免费层提供数千种图形,专业版则提供可编辑或高分辨率图形且无需回链。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 找到所需图标或照片,点击即可插入文件。

价格:

免费(提供专业版方案)。

18. Image Tracer - 最适合将图像转换为矢量图层


Image Tracer plugin


Image Tracer

Image Tracer 是一款 Figma 插件,可让你在 Figma 中直接轻松将图像转换为矢量图层。插件功能包括无限缩放图像、转换为彩色矢量图层、快速描摹为遮罩,以及重新设定图像样式。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 点击文件中的照片,并按说明几步生成你的矢量文件。

价格:

免费。

19. Iconscout - 最适合添加各类设计资产


Icon scout figma plugin


Icon Scout 插件

IconScout 是一款 Figma 插件,提供超过 560 万个设计资产,包括高度可自定义的 SVG、矢量图标、插画、3D 图形和 Lottie 动画。该插件还提供通过 Color Editor 一键将调色板应用到全部资产、简化授权,以及每周新增超过 41,000 项资源。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 通过搜索或分类功能查找资源(如果你没有专业版,请记得筛选免费资源)。

价格:

免费(提供专业版)

20. Flaticon - 最适合添加简洁图标


Flaticon figma plugin


Flaticon

Flaticon 是一款 Figma 插件,提供最庞大的图标库,可搜索和筛选数百万图标,添加为组件,并在整个设计系统中应用变更。插件支持 SVG,你可以将图标作为组件导入,并在组件中替换图标。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 找到图标并点击将其添加到你的文件。

价格:

免费(提供专业版)。

21. RemoveBG - 最适合移除照片背景


RemoveBG Figma plugin


RemoveBG Figma 插件

Remove BG 是一款 Figma 插件,只需单击即可自动移除图像背景。你可以轻松将背景变为透明(PNG),或为照片添加白色背景。该插件非常适合希望无需手动和重复操作就能移除图片背景的设计师。

工作方式:

  • 这里安装插件,并在你的 Figma 项目中运行。

  • 这里了解更多插件使用方法。

价格:

付费(每张图片 1 个积分)。

立即免费试用 ProtoPie

ProtoPie 是一款易于使用的高保真原型工具,可与 Figma 集成,将你出色的设计转化为可交互且逼真的原型。现在就用 ProtoPie 免费开始