我每天使用的4个有用的Figma插件
2023 年 9 月 23 日

在我每天使用的4个有用的Figma插件 - Bootcamp中,Figma是一种专门用于设计界面和构建应用程序和网站原型的工具。Figma适用于Web和桌面平台,与所有操作系统兼容。Figma是UI/UX设计师工作的绝佳软件,并具有支持团队在整个设计过程中的功能。由于Figma易于使用和出色的用户体验,可以说Figma是当今市场上领先的界面设计工具。如果将Figma与Adobe XD或Sketch进行比较,Figma具有许多优势,特别是它只需在线工作。 Figma是一款强大的在线设计工具,它不仅可以帮助设计师进行设计工作,还可以实时协作。无法忽视的是,Figma的受欢迎程度对插件开发者来说至关重要。Figma拥有非常丰富的插件库,几乎每天都会有新的插件被创建出来。插件的诞生旨在使设计工作更加顺畅,提高生产力,节省大量的琐事,让你有更多时间专注于早晨的工作。

通过本文,我想向您介绍一些我在日常工作中经常使用的插件及其优秀的应用。

1. Iconify #

Iconify是一个综合常用图标集的库。您可以添加设计系统Material Design Icons、FontAwesome、Jam Icons、EmojiOne、Twitter Emoji等多个图标集(超过100个图标集和10万个图标)。最棒的是,您不需要去上述图标库的主页获取图标,Iconify已经为您整理好了,您只需打开插件并将图标拖放到您的设计中即可。太方便了! 使用Iconify,您可以完全免费使用,而不像其他提供图标但必须支付SVG格式的插件。Iconify还具有非常易于使用的界面。开发者也非常理解用户,插件会记住您访问的最后一个图标页面,方便您继续使用刚刚搜索到的图标。

您可以从Iconify插件页面 (opens new window)安装Iconify for Figma。

Iconify主界面

浏览或搜索图标,选择任何图标,点击“导入图标”按钮,或将图标拖到Figma文档中。搜索结果上方的按钮显示可用的图标集。通过点击任何图标集按钮,插件将仅显示该图标集的结果。

在Iconify中搜索图标

您可以直接从搜索结果中拖放图标

  • 设置图标颜色(对于硬编码调色板的图标不可用)。
  • 更改图标尺寸。
  • 转换或旋转图标。 * 将图标作为组件导入。
  • 为开发人员获取图标代码。
  • 替换之前导入的图标(仅当在Figma中选择了上一个图标的图层时可用)。

2. Unsplash #

在设计中使用图像的重要之处在于图像必须具有高质量,一方面可以增加设计的专业性,另一方面可以为观看者营造一种舒适感。Unsplash是完美的解决方案,因为它具有非常丰富的图像库,并且它完全受版权保护且免费,您可以将其用于个人和商业用途。Unsplash上的照片质量非常高。不仅在UI/UX设计中,还在平面设计或其他设计工作中,Unsplash也被广泛使用。

您可以从Unsplash (opens new window)为Figma安装Unsplash。

Unsplash的主要用户界面

由Unsplash自动生成

  • 在随机面板中,通过点击“插入随机”按钮插入完全随机的图像。
  • 插入一个随机图像。 ### 3. 样式列表

在每个项目中,您需要一组不同的颜色,并根据主要颜色来分配颜色的强度。当使用颜色时,在Figma中非常方便管理颜色。您应该将该颜色设置为“颜色样式”,这有助于确保您只使用最初定义的颜色,而不是使用吸管工具进行选择。 与颜色类似,字体也需要根据其用途创建字体样式,例如标题H1、H2等。

您可以从StyleList (opens new window)中安装Figma的样式列表插件。

在Figma中的样式指南

通常,您需要在设计中创建这些颜色和字体,然后对它们进行样式设置(包括命名),这通常需要很多时间。因此,如果项目不是非常钟爱样式设置,您可以在样式列表插件中选择预设来加快速度。 没有问题,你可以使用 StyleList 来帮助你一键完成上述任务。只需输入基准大小,并选择类型比例和字体设置。选择你想要的尺寸,然后点击“创建样式”按钮。

创建字体样式

创建颜色样式

4. 查找和替换 #

当你在所有屏幕上使用“提交”作为按钮的文本,但是你再次考虑后不想再使用“提交”而是使用“确认”,现在你绘制的屏幕数量已经达到100个,你不可能在每个屏幕上都更改文本。现在查找和替换将帮助你完成这个任务。

你可以从Figma 的查找和替换 (opens new window)中安装查找和替换插件。

像文本编辑器一样搜索页面上的文本并进行替换。你可以通过文本内容或图层名称来搜索页面上的对象。点击每个部分旁边的“…”按钮来显示更多设置。

键盘快捷键

当焦点在“查找”上时:

    • 输入: 前往下一个结果
  • ⇧ 输入: 前往上一个结果

当焦点在“替换为”时:

  • 输入: 替换然后前往下一个结果
  • ⌘ 输入: 替换全部

概要 #

对于你来说,处理上述问题的工作非常困难且耗时,因此开发人员创建了非常方便的插件来帮助我们快速准确地处理这些问题。然而,除此之外,在使用诸如查找和替换的插件时,我们需要小心,因为有时候如果我们不仔细检查,它会替换我们不想要的文本。因此,在选择时,我们还应考虑个人/团队的需求。

我每天使用的4个有用的Figma插件

  1. Iconify
  2. Unsplash
  3. StyleList
  4. 查找和替换

希望这对你有用。感谢阅读。