Figma作为一款向量图形编辑软件，保持多产时又能兼顾高效的设计，已成为UI/UX设计师最受欢迎的设计软件。
本期给大家带来10个好用的Figma插件，可以帮助我们提高工作效率，赶快来体验！
Figma
01
html.to.design
将任何网站转换为完全可编辑的 Figma 设计。利用现有网站并将其 html 导入 Figma，即可开始自己的设计，而无需从头开始构建每个元素。
网址➡
https://html.to.design/home
教程
1.安装此插件 html.to.design
2.在空白的 Figma 文件中，搜索插件下的 "html.to.design"，或使用 cmd+/
3.在浏览器中打开要转换的网站并复制 URL
4.将 URL 粘贴到插件中，选择设备和尺寸，然后点击 "导入 "将 html 转换为 Figma 设计
02
Fonet Replacer
字体转换器
只需点击几下，即可替换所有字体样式。
选择你的文本层并运行插件。
网址➡
https://www.figma.com/community/plugin/738840446766071906/Font-Replacer
教程
1.选择你的文字层。例如，选择页面中的所有内容(使用⌘+A或Ctrl+A ),或者选择包含要进行字体替换的文本层的特定框架。
2.启动字体替换插件。
3.选择要用新字体或本地文本样式替换的现有字体系列和字体样式。
特点
• 快速搜索
• 用文本样式替换
• 使用特定字体定位文本层
• 替换丢失的字体
• 边缘处理 (混合字体，字体和文本样式的混合，...)
03
Unsplash
当涉及到用相关的占位符内容填充模型时，Unsplash是一个无价的资产。该插件将Unsplash中的相关图像插入到我们的设计中，并且随时可以进行定制和尺寸调整。
网址➡
https://unsplash.com/about
04
Icons8
Icons8拥有最大和最一致的策划图形集合，在一个工具中包含超过300万个图标、照片和插图。这是一个为我们的高保真模型寻找相关视觉元素的好工具。
网址➡
https://www.figma.com/community/plugin/791103617505812222/Icons8-%E2%80%94-icons%2C-illustrations%2C-photos
教程
1.使用标签在图标、插图和照片之间切换
2.要将图像添加到项目中，只需点击图像或将图像拖放到画布上
3.使用下拉菜单选择各种图标样式、大小和格式
4.如果有Icons8帐户，请点击菜单(☰) →登录/注册
特点
• 核标准情报中心:一致、像素完美，40多种风格，由最好的图标设计师制作
• 插图:平面和3D、矢量和光栅，由顶级Dribbble艺术家创作
• 照片:由电影规模的摄制组拍摄的人、物体和动物，即用型镜头和无背景元素
你可以搜索按关键字和分类按样式和类别
05
Mapsicel
再也不用截图了！使用Mapsicle，可以快速无缝地将地图放置在模型中。交互式地图让我们可以平移到最佳位置，或者可以搜索世界上任何地方。在设计中放置了一张地图，回到Mapsicle来调整位置、样式、缩放级别等等。Mapsicle使用Mapbox地图为我们提供各种定制选项。
网址➡
https://www.figma.com/community/plugin/736458162635847353/Mapsicle
06
LORE
Lore是一个很棒的工具，它通过在Figma中添加lorem ipsum占位符文本块来节省时间。可以使用知识来添加单词、句子和段落，插件将第一个字母随机化。这个工具对于用内容快速填充空白块特别方便。
网址➡
https://www.figma.com/community/plugin/984557085378252054/LORE-(for-Lorem-Ipsum)
07
Better File Thumbnails
文件缩略图
打开Figma发现所有的文件看起来精心排列的感觉很好！这个工具对于重视一致性的设计师来说是一个福音，不仅仅是在他们的设计中，在他们的工作空间中也是如此。
网址➡
https://www.figma.com/community/plugin/743199058431264556/Better-File-Thumbnails
08
设计系统中保持风格的一致（4个插件）
01 Auto Documentation
只需点击一下，这个插件就会为你记录所有的颜色和字体样式。
网址➡
https://www.figma.com/community/plugin/1134018716847999330/Auto-Documentation
彩色文档
记录文件中定义的所有颜色样式，并将它们放入一个可调整的组件中。可以创建自己的模板或使用自动生成的模板。它输出以下字段:
• 颜色名称
• 颜色十六进制值
• 彩色RGB值
字体文档
记录文件中定义的所有字体样式，并将它们放入一个可调整的组件中。可以创建自己的模板或使用自动生成的模板。它输出以下字段:
• 预览文本(选项:文本、字体名称、字体名称+文本)
• 字体
• 字体系列
• 字体粗细
• 字体大小
• 字体线高度
• 字体字母间距
02 Automatic Style Guides
使用Figma API，只需点击一个按钮，就可以为客户和开发人员准备一份像样的风格指南。
网址➡
https://www.figma.com/community/plugin/838622388628773312/Automatic-Style-Guides
03 Color Styleguide
颜色样式指南
网址➡
https://www.figma.com/community/plugin/941680506965181089/Color-Style-Guide
教程
1.设置本地样式
2.运行这个插件
3.将创建一个新页面
04 Typography Style Guide
排版风格指南
网址➡
https://www.figma.com/community/plugin/965313760136371738/Typography-Style-Guide
教程
1.设置本地样式
2.运行这个插件
3.将创建一个新页面
09
Artboard Studio Mockups
通过访问Figma文件中数以千计的世界级质量的工作室实体模型，轻松创建Figma实体模型——只需点击一个按钮，即可轻松将Figma框架转化为现实生活中的产品模型。
网址➡
https://www.figma.com/community/plugin/750673765607708804/Artboard-Studio-Mockups
教程
1.按照屏幕上的指导，在Artboard Studio上创建一个秘密的API密钥。
2.将你的API密匙粘贴到插件窗口中，保存并开始将实体模型添加到你当前的Figma文件中。
3.所有导入的项目都是完全分层和可定制的。
4.具有可渲染标签的项目带有相关的框架。将您的设计复制并粘贴到这些框架中，确保框架被选中，然后单击渲染选定的框架。
5.你可以调整框架和实体模型项目的大小，只要你保持长宽比，它仍然会工作。
6.要解锁我们的高级项目，请订阅我们的高级计划之一。下次使用Figma中的Artboard Studio插件时，它会自动解锁所有项目。
7.使用项目顶部的菜单根据名称、视点和类别搜索和过滤项目。
10
A11y - Color Contrast Checker
作为设计师，我们的最终工作是创造所有用户都可以使用的设计。这个插件帮助你符合WCAG标准。它检查框架中所有可见文本的颜色对比度，并提供关于它是否符合WCAG AA和/或AAA级合规性的反馈。
网址➡
https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker
遵循WCAG(网页内容可访问性指南)标准，确保用户可以阅读您的文本。
这个插件检查一个框架中所有可见文本的颜色对比度，并提供关于它是否符合WCAG的AA和/或AAA级标准的反馈。它还提供了颜色滑块，允许用户调整颜色，并了解相应的对比度如何实时变化。
目前仅支持单一的100%实心填充。解决背景层检测的一些已知问题(这是由于目前只支持上述)。
Figma
文中信息来源：
https://medium.com/@EleneeChek/10-figma-plugins-i-use-every-day-as-a-ux-ui-designer-d19a71e197de
侵权告知即删