有用的Figma插件和工具介绍

1,406 阅读29分钟

外面有成千上万Figma插件。您使用哪些插件?您经常使用它们吗?我们寻找了一些有用的插件,希望下面列出的插件能帮助您改善工作流程。无论您是刚刚开始使用Figma,还是已经使用了很长时间,这篇文章都会给您足够的指导,使您的设计过程更快、更顺畅。

Vectary 3D元素使一切都更有空间感。它是为您的设计添加3D模型的最简单的方法之一,还可以添加图层、包裹和变换。您可以将您的Figma设计放入首选的3D模拟图中,或者创建您的自定义3D元素。您可以仔细看看关于该插件的详尽指南和视频,以便开始使用。

此外,FigmockupsClay Mockups 3D包括一个更大的3D模拟图库,Fig3D将物体转换为3D模型,你甚至可以将形状分组并一起移动到3D模型中。

Figma中的可访问性

我们都希望设计出更好的、具有包容性的体验,但有时我们可能会忘记恰到好处的色彩对比,或适当的标签顺序。幸运的是,有很多Figma插件可以实现无障碍性

斯塔克是一个关于一切无障碍性的完整动力源。它包括对比度检查和视力模拟器,而且它还允许你按焦点顺序重新排列你的序列。它还显示你选择的任何两个物体的对比度。另外,你也可以使用对比度

对于可访问的调色板,Geenes.app是一个可靠而复杂的工具,它允许你创建、维护、同步和测试调色板及其变化。真的很难想象任何Figma设置没有安装这个插件的情况

如果您需要测试不同的字体大小将如何影响您的布局,Text Resizer可以帮助您查看字体大小增加或减少后的确切情况。

Figma中的动画编辑器

在 Figma 中创建动画并不需要像 Adobe After Effects 这样复杂的外部工具,这应该不是什么大的启示。有了Figmotion,您就有了一个先进的动画工具,就在您的指尖上。您可以选择一个帧,添加一个动画,然后通过一个时间手柄浏览时间框架--可以选择更新缓和、关键帧和锚点。

如果您想更深入地了解 Figma 的动画,在 Figma 中为您的设计添加动画的指南将逐步展示整个工作室以及您拥有的各种选项。

在Figma中轻松实现注释

在使用 Figma 工作时,您通常如何处理注释?我们遇到了两个注释工具包,它们使设计上的交流更加顺畅,不容易产生误解。

其中一个是注释工具包2.0。各种各样的便条和测量线和工具,使你在工作中很容易为你的团队成员添加上下文和注解。

A11y Annotation Kit的重点是设计者在移交设计时可能希望与开发者分享的可及性考虑。无论是为元素添加呼号,指示焦点顺序,还是指定键盘交互,该工具包都将一些经常是神秘的WCAG措辞翻译成易于使用的贴纸,你可以用它来突出页面的关键部分。所有组件都预先填入了正确的CSS或HTML元素。

在Figma中使用红线进行注释

用详细的测量和规格来注释一个设计,以帮助负责的开发人员理解这一切,这可能是一个耗时的过程。Redlines就是为了改变这种状况。该插件帮助你快速测量和绘制任何选定对象的尺寸。你所需要做的就是选择一个或多个图层,自定义红线设置,并选择一个红线选项来绘制。

在Figma中自动重命名框架和图层

当涉及到组织你的设计文件时,Renamehas got your back。你可以批量重命名你的框架和图层。你也可以通过应用自定义过滤器一次重命名多个层。如果你想把图层名称的大小写从大写转换为小写,甚至是骆驼的大小写,你可以使用%* ,用字母组合来转换。

在 Figma 中为设计模型制作头像

有时我们需要插入更多的东西,而不仅仅是文本字符串,也许我们需要为我们的头像增加一些选项。这就是UI Faces可以帮助的地方。

所有的头像都是从不同的来源收集的(它们总是被提供的),它们可以通过年龄、性别和情感来过滤,当然,在实际使用之前你需要检查来源和许可证。此外,看一下用户档案

在 Figma 中嵌入品牌标识

也许你想在评论或推荐中显示一些品牌标志,那么你要如何去寻找所有合适的标志呢?BrandFetch可帮助您在设计中轻松插入品牌资产,而无需离开 Figma 窗口。该插件有一个大型的库,里面有(字面上的)数百万个商标,可供您指尖使用。还有一个可搜索的数据库,让您找到您要找的东西。

在Figma中嵌入图表

你的设计过程刚刚变得不那么紧张了。有了Chart,你可以使用真实或随机的数据轻松创建各种图表。该插件支持从Excel、Google sheet、Numbers中复制和粘贴,它还可以与Google Sheet和远程JSON同步。另外,你也可以导入CSV和JSON文件。

另一个标题类似但略有不同的插件是Charts Figma插件。有了它,你可以创建仪表盘和演示文稿或几乎任何其他类型的数据可视化。该插件可在您的Figma设计中生成可编辑的图表,从简单的柱状图到更复杂的热图。您还可以找到一份关于如何使用该插件的详细指南

在Figma中清理混乱的框架

也许您在一个框架中投放了几十个图标,那么您会如何将它们安排成合理的顺序呢?很显然,我们不会手动完成这样的任务。这就是LilGrid可以帮助的地方。

这个小帮手会自动获取元素并将它们排列成一个网格。你只需要选择你想组织的内容,点击 "组织到网格",这个工具就会处理剩下的事情,只重新安排你页面上的顶级元素。很明显,如果你需要恢复初始状态,有一个单步撤销功能。

移交前清理Figma项目

隐藏的图层,单层组,X和Y的位置不是很完美的像素--清洁文档插件可以处理这样的小缺陷,这样你就不必去处理了。这是一个很好的小帮手,可以在移交前对您的 Figma 项目进行润色。

Figma中的内容占位符

有了Content Reel插件,您可以通过使用同一工具中的文本字符串、图像、图标和头像,快速而轻松地设计布局。您可以搜索或浏览已经提供的数据集,然后将它们添加到您的设计中或从头开始创建。

该插件还可以让你创建自己的文本字符串,上传多达20张图片,并通过在主屏幕上钉住经常使用的内容,使你的工作流程更容易、更顺畅。

你还可以运行一个随机名称生成器,将随机名称填充到你的模拟图中。

Figma中的调色板

了解渐变、调色板、色彩理论和心理学对于创造令人愉快的视觉设计至关重要。Figma 有很多插件,可以为您分担大部分的工作。

调色板为您的项目提供了一个完美的调色板。您可以从庞大的调色板库中选择,或者搜索特定的颜色代码、名称或数字,以应用于您的设计。

当你想从图像中生成调色板时,Dustin Mierau的Palette很有用。这个插件使用机器学习来帮助你生成一个最适合你项目的调色板。你可以选择最多五个形状,该插件将帮助你用适合你的调色板的颜色填充这些形状。

当围绕图像进行设计时,使用图像调色板插件可以更容易做出正确的颜色选择。它使用你选择的任何图像,并通过使用中值切割算法从图像中选择最突出的五种颜色来生成一个调色板,具有高度的准确性。

有了UI GradientsWeb Gradients,你不必一次一次地创建或选择梯度,而是只需一次点击就可以为组、文本和框架添加多个梯度。

在Figma中为您的文本绘制曲线

有了Arc插件,你可以将你的文本向上、向下弯曲,甚至变成一个圆。该插件增加了一个额外的工具栏,用于控制弯曲--但开发者如何实现它是另一个问题。

在Figma中设计代币

另一个您可能想添加到您的工具包中的 Figma 插件来自 Lukas Oppermann。如果您厌倦了使用设计标记通常带来的麻烦,那么设计标记插件可以为您完成这项工作:样式和标记被导出并发送至 GitHub 仓库,标记会使用样式字典自动转换。你不需要离开 Figma。真正节省时间。

用Figma设计系统

想象一下,您在项目的设计系统中做了一个改变,而这个改变会立即连带到您的 Figma 项目中。Figma 的Design System Manager插件使之成为可能。

该插件可让您在一个单一的面板中定义或更新可主题的设计标记,管理按风格分组的选定图层,并在设计中填充真实的文本或图像内容。为了使你的项目成为现实,你可以从GraphQL API中以编程方式访问设计令牌,或者以你选择的格式导出它们(支持CSS、Less、Sass、JSON、YAML、Js、Swift和Android)。一个聪明的解决方案,使处理设计系统变得更加实用。

Figma中的设备模型

作为一个设计师,你的演示质量几乎和设计本身一样重要。Mockuuups Studio拥有700多个设备模拟场景,可以帮助您轻松高效地创建产品、视觉内容或营销材料的模拟图。你可以观看关于如何使用它的详尽演练视频

通常,只有当设备显示在人的手中时,模拟图才会更漂亮,而这正是All hands模拟图生成器可以帮助的地方。它包括一个庞大而多样的各种色调、形状和尺寸的手的集合。选择一个框架,选择一只手,您的设计将被导入到模拟模型中,所有这些都在Figma中。您也可以查看完整的手部集合

将Figma导出为HTML、CSS、React

HTML <> Figma允许您将 Figma 设计导出为 HTML 原型。您可以选择单个图层,或输入一个您想导入的 URL,该插件将立即导入实际样式。还有一个Chrome扩展程序,可以捕捉网页并将其导入为可编辑的Figma图层。在后台,它会生成一个page.builder.json 文件,其中有当前页面的所有 CSS 属性。

但也有一些限制,因为不是所有的元素类型和CSS属性都支持。此外,值得注意的是,所有字体都必须上传到Figma,否则将使用后备字体。不过,这个插件是开源的,周围有一个庞大的社区,而且创造者正在积极维护它。

另外,还有一个支持谷歌字体的HTML生成器,它有专门的导出选项,可以生成HTML、CSS、图像资产和SCSS代码以及Figma To HTML。如果你需要更复杂的东西,Anima可以创建原型并将其转换为HTML、CSS和React代码--没有任何依赖性。事实上,你可以创建交互式原型、响应式设计和可重复使用的React组件。(该插件有一个免费级别,但你需要注册31美元的级别来导出代码)。)

将 Figma 导出至 Vue.js

如果你想消除将Figma原型转化为工作应用所带来的一些摩擦,Klaus Schaefer的开源插件Figma-Low-Code就很适合你。它可以让您在Vue.js 应用程序中直接使用 Figma 设计。

这种低代码方法不仅减少了设计者和开发者之间的交接时间以及前端代码的数量,而且还确保了 Figma 设计始终是唯一的真理来源。其原理是,您在 Figma 中设计原型,然后使用插件来添加数据和方法绑定。一旦完成这些,您就可以使用您最喜欢的代码编辑器来实现业务逻辑,然后--嗒嗒!--您的应用程序就可以部署了。您对 Figma 文件所做的更改会自动传播到 Web 应用程序。

Figma中的电子邮件模板

没有多少人非常喜欢建立 HTML 电子邮件,但在设计时,我们最好使用一些方便的小插件,使开发人员的工作更容易一些。事实上,有一份关于在Figma中设计电子邮件的详细指南,涵盖了从头开始运送全新电子邮件设计的整个工作流程。

如果您正在为Figma寻找响应式的、可生产的HTML电子邮件Emailify将为您提供几十个可配置的内容模块,允许您自定义文本、图像、样式和自动布局设置等功能,而不需要其他API、应用程序或网站。

如果你对为你生成HTML电子邮件代码的想法不感到害怕,电子邮件模板和代码Marka插件一起工作实际产生HTML代码。你可以拥有可定制的电子邮件,包括通讯、营销电子邮件和博客式模板的设计。另外,那里也有很多可定制的设计。

Figma 中的完美文件结构

我们都知道,当您完全沉浸在让您目前正在进行的设计中的所有那些小的UI细节正确时,可能很难想到Figma文件结构。但是,如果您从一开始就牢记文件结构,您就可以确保交接工作顺利进行。而且,一旦最后期限临近,你会为自己省去很多清理工作。Luis Ouriach 发表了一份有用的最佳实践指南,用于在 Figma 中构建框架-- 具有一致的命名惯例、描述性组件和一致的间距。

Figma中的字体预览

手动切换字体可能有点累人,所以显然有Figma的帮助。更好的字体选择器字体预览帮助你选择带有预览的字体。

用于Figma的谷歌字体配对

如果您使用谷歌字体,谷歌字体配对也会派上用场。你可以在Figma的谷歌字体页面上开始使用。每种字体都有一个小小的字体标本,可以对所用字体的风格和感觉进行适当的预览。

Figma中的图标嵌入

在一个地方广泛收集各种可能的图标,可以说是有史以来最好的插件创意之一。Figma的插件包含有多种风格的图标集,适用于任何类型的设计项目。

Icons8为您提供了大量一致的图标集,而不必离开您的Figma板。它有一个拥有超过32种流行设计风格的120,000多个图标库,可搜索和分类的集合,所有图标都有PNG或SVG格式。

Iconscout允许您在 Figma 中插入数百万个高质量的图标、插图和 3D。在设计师模式下,您可以挑选您喜欢的设计师和摄影师,直接访问他们的资源,而无需在整个库中搜索。

在Figma中嵌入插图

用矢量软件绘制插图,然后将其导入你的设计中,对吗?您不必一直这样做,因为Figma配备了大量的插图插件。

有了Blush,您可以创建或混合搭配为您的项目定制的插图。您还可以生成随机组合;此外,每周都会有新的插图加入。SVG和高分辨率图像可在付费计划中使用。

对于可爱的图标和插图,请仔细看看免费流行插图库,其中包括在创作共用许可证下发布的高质量免费插图。

如果你想在你的网站上添加人体插图,Humaaans为你提供已经预先制作好的时髦人的插图。你可以从画廊中浏览,或搜索特定的利基或类别。

此外,你可以使用Storyset,其中有100多个插图概念可作为现成的插图。你还可以编辑风格、颜色和背景。此外,你还可以将插图制作成动画。

在Figma中复制-粘贴和同步谷歌表格

很多时候,将数据从 Google Docs 复制粘贴到 Figma 是相当耗时和令人沮丧的。Google Sheet是一个方便的插件,可以加快将您的 Google Sheet 导入到 Figma 的速度。一旦您安装了它,您就可以从您的 Google Sheet 中获取和同步数据。此外,还有一份文档,其中包含了所有关于如何设置适当的工作表结构以及Figma图层应如何命名以避免额外工作的细微细节--以及一些供您开始使用的例子。

Figma中的交互式组件和变体

几周前,Figma 推出了他们的互动组件功能的测试版,允许您创建可在不同变体之间自动切换的互动元素(例如,一个按钮从悬停状态变为按压状态)。这看起来是一个小细节,但事实证明,你通常需要的框架和连接的数量大大减少了,比如复选框或切换按钮的原型输入区域。

为了更深入地了解这项新功能,Steve Ruiz 总结了它的功能,以及如果您跳出框框,可以用它来实现什么(有人想在 Figma 中运行扫雷或战舰游戏吗?另一本好书。Rodrigo Osornio探讨了交互式组件为微观交互带来的优势和可能性,如输入字段、加载器、不同种类的按钮、下拉菜单和订阅组件。

说到组件。Luke Cardoni展示了他是如何创建一个单一的、内容适应性强的、完全可定制的、易于维护的、有3360个变体的组件,为文本输入的各种可能的设置组合提供服务。这是一个巨大的项目,说明了 Figma 的变体功能的好处。

Figma中的布局网格

我们经常依靠网格来创建设计系统,使每个界面组件都能正确对齐。因此,Figma 的布局网格插件并不缺乏,这并不令人惊讶。网格生成器允许您将一系列不同的网格风格配置应用到布局中。Guide Mate稍微灵活一些:它为常用的网格提供了快捷方式,并在您需要时提供了添加自定义网格的方法。

一旦你有了一个网格,你可能想把你的组件扣到它上面。Snap to Grid不仅可以创建一个自定义网格,还可以通过自动组织每个对象来安排网格上的元素。当该插件运行时,画布上的元素在移动和缩放时将会扣到网格上。Andreslav Koslov在一个3分钟的视频中展示了这个插件的工作原理。您还可以使用键盘快捷键 Alt + Cmd + P,在 Figma 在线时将所有对象扣到网格上。

Figma 中的地图嵌入

为您的项目下载地图不必是一个漫长的过程,因为 Chris Arvin 的Mapsicle可以帮助您在 Figma 设计中轻松插入地图。该插件允许您将地图设置为您的设计所需的特定位置、纬度和经度,然后就可以将正确的快照添加到您的设计中。

然而,如果你需要一个特定国家或地区的SVG地图用于你的设计,矢量地图插件可能会变得非常有用。您可以直接浏览国家或地区,并直接将其插入您的Figma设计中,只需点击一下。这些地图还可以通过vector.mapcraft.biz/constructor… 以 SVG 或 PDF 格式下载。

Figma中的名称约定

我们都经历过这种情况。当您匆忙时,命名规则是一个细节,往往没有得到应有的重视。在你注意到它之前,你的页面、框架、组件和图层名称就已经有了不同的格式风格。

命名空间插件结束了这种混乱,并按照一个合理的方案整齐地命名你的资产。当与其他人一起工作在一个共享文件上时,统一不同的命名惯例也很好。

当然,我们都希望有条不紊,但有时我们在为框架命名时可能会有一点分心的感觉。这时,Figma Exporter可以提供帮助。它可以让您为您导出的文件选择您想要的命名方式:Kebab-case、Snake_case 或 CamelCase。其余的事情都会自动完成!

Figma 中用于快速记录的记事本

如果您想在 Figma 中有一个专门的空间,以便在工作时记录笔记、想法和评论,那么 Dustin Mierau 的Notepad可能就是您要找的东西。笔记会自动与您的文档一起保存,并可供其他编辑使用。在某种程度上,你可以把记事本作为一个共享空间,与你的团队一起记录你的项目。顺便提一下,如果你是在协作工作,你需要重新打开Notes来查看其他编辑者的修改。

费格玛设计中的图案

有了模式,一切都会变得更好!虽然创建基本图案通常很简单,但创建自定义图案可能是一个棘手而紧张的过程,而这正是 Figma 的图案插件所拯救的。

Pattern Hero插件使将您的自定义元素插入一个网格中,并重复形成一个图案。您可以重复或洗刷图案,创建实例,还可以与几个模板一起工作。如果你需要制作一个图案,这是一个不错的选择。

另外,Hero Patterns是一个SVG背景图案的集合。为了给自己创造一套独特的图案,你可以混合和匹配不同的图案,得出一个理想的图案。

Figma中的图案插件更多,所以你可以得到任何东西,从纸屑图案Trippy生成的图形几何形状

如果您需要在您的模型中设置某种点阵图案,Dot Grid将为您自动完成这项任务。有了这个工具,您可以在Figma上轻松地生成漂亮的点状网格,作为整个设计过程的指南,并可自定义网格宽度、网格高度、点状大小、间隙和点状颜色。

在Figma中嵌入照片

您不必离开Figma就可以为您的项目获得定制的摄影资产。当然,Unsplash是每个人获取高清晰图片的首选网页,现在它是 Figma 的一个插件。

在Figma中删除背景

删除背景让您几乎可以做到这一点:轻松删除图片的背景。在将图片添加到你的设计中之前,不需要手动编辑图片的背景。需要注意的是:您需要一个remove.bg帐户来使用该插件。

Figma中的响应式设计和测试

没有多少人以调整盒子的大小为生,但作为设计师,这几乎是我们每时每刻都要做的事。在 Figma 中,Breakpoints是众多测试响应式设计的插件之一。它提供了一个可调整大小的框架实例,并在没有插件窗口的情况下工作--因此你团队中的每个人都可以在没有安装插件的情况下探索框架的响应行为。

另外,你也可以使用Responsify,它允许你选择任何框架并设置自定义设备尺寸,因此你可以预览网站或应用程序在该特定视图中的样子。 Responsive也是类似的,它允许你通过点击插件中的输入框来测试响应式布局的特定边缘情况。没有什么突破性的,但很方便!

反转图层的顺序

将小的、繁琐的动作自动化总是一件好事,可以节省你宝贵的时间,让你专注于真正重要的事情。当涉及到反转多个图层的顺序时,反转图层顺序插件可以成为你最好的新朋友。正如它的名字所暗示的那样,它将颠倒同一母体中两个或多个图层的顺序。你所需要做的就是选择它们并运行该插件。

Figma中的形状和SVG

创建基本形状很容易。但是,创建复杂的形状可能会花费宝贵的时间,而这是您在项目工作中无法承受的损失。Figma 围绕形状和 SVG 的插件可以使您的工作更轻松,有各种形状可供选择。

Blobs帮助您提高设计的美感。通过 blobs,您可以使用两个参数在 Figma 设计中创建和添加有机形状:复杂性和对比度。您还可以控制一个形状的独特程度以及它的点数。

需要波浪吗?Get Waves插件可以帮助您为您的设计生成 SVG 波浪图案。在处理图表、图形或有波峰和波谷的设计时,它可能相当有用。你只需要选择一条曲线,调整复杂度并随机化。

如果你想为你的设计创造一个波浪和曲线图案,Andreslav Kozlov的Wave & Curve插件可以帮助你产生各种图案的波浪。你还可以选择波浪的方向,可以是TopBottomTop ,或Bottom

最后,To Path可以帮助你把东西放在一个路径上,可以处理文本、形状、物体和组件。要想让文字绕着路径(例如一个圆)弯曲,你可以安装这个插件,然后去掉圆的不透明度,选择文字和圆,然后用这个插件把这两个对象连接起来,看着魔法发生。

该插件的其他一些功能包括沿任何路径重复形状,编辑原始形状或文本并实时反映变化(当插件打开时),以及事后编辑路径,并再次观察链接对象的变化。

将你的设计转化为幻灯片

那么你有一个Figma设计,你想向客户、你的老板或你的团队展示?Pitchdeck可以帮助您做到这一点。该插件可将您的设计变成动画幻灯片,或者,如果您愿意,可将其导出到 PowerPoint、Keynote 或 Google。还支持PDF导出,以及一些方便的功能,如网络摄像头覆盖、视频嵌入、演讲者注释等等。它甚至可以将你的演示文稿录制成带有麦克风音频的视频。

Figma中的表格生成器

尽管设计数据表格可能相当耗时,但表格生成器插件通过帮助你自动处理表格数据而使之更容易。你生成表格所需要的只是复制和粘贴数据(目前是CSV格式)。

另外,你也可以使用Table-Paste将数据从Excel电子表格粘贴到风格化的表格行中,或者使用Table-Creator创建可调整大小的自定义风格化的表格。一个小小的奖励:你也可以在你的设计发生变化时更新所有的表格。

Figma中的路标模板

首先,Figma 项目板上只有一个人,然后另一个人加入进来,很快你就会看到设计师、开发人员、项目经理、内容设计师、研究人员和其他许多人的光标在屏幕上展开。你可能以前也经历过这种情景。但是,所有这些人真的找到了他们需要的信息吗?他们不得不四处挖掘,还是很容易就能找到?

Shopify的团队以这些问题为契机,重新思考他们的Figma游乐场的结构,确保它能满足整个公司团队的不同需求。除了在文章中分享这一过程外,他们还将他们的发现提炼成一个项目索引模板,您可以下载并立即使用。一个方便的小帮手,让参与_你的_项目的每个人在他们需要的时候得到他们需要的背景。

Figma中的文本替换

有时您会遇到这样的情况:您需要替换Figma模型中的一段文字。这没什么大不了的,除非这段文字在整个设计中出现了多个实例。在这种情况下,Content Buddy 是一个非常好的省时工具。

您不必逐一查找所有实例、组件、框架和组,并手动更改文本,而是由 Content Buddy 为您完成繁重的工作。它为你提供设计中每一个独特的文本内容的列表,这样你只需要选择你想替换的项目并输入新的替换文本--一次。

在Figma中追踪图像

使用Image Tracer插件将任何白色和黑色的位图图像转换为矢量图像。这个插件节省了你用钢笔工具手动追踪或用Illustrator转换为矢量的时间。在运行该插件时,你会看到窗口上有一个控制台,有一些选项可以帮助你根据自己的喜好进行编辑。

Figma 中的排版比例

你以前也去过那里。你需要为你的设计的排版比例查询正确的数值,但你手头没有这些数值?Marvin Bruns 的TypescalesScaale可以让您根据您选择的比例生成和谐的、响应式的排版比例--无需离开 Figma。像往常一样,您可以从一个base-value ,字体大小的增量和减量,以及一个乘数开始。

啊,你也需要设置一个自定义比例?山姆-史密斯的Typescale可以为你做到这一点(是的,这是一个不同的插件,有一个类似的名字)。另外,Textyles生成带有字体预览的文本样式,如果你需要通过使用模块化的字体比例、网格和自动布局来生成垂直节奏,Heading-Helper也能帮你。

最后,当你想保持正文和标题之间的比例一致时,无论是在屏幕上还是在纸上,字体比例都会有帮助。Jeremy Church的Type-Scale是这个插件的灵感来源。

在Figma中从手机上传图片

我们都曾遇到过这样的情况:你需要在 Figma 上放置一些东西,也许只是作为草图或头脑风暴,所以你会拍一张照片,通过电子邮件发给自己,然后再粘贴进去。

有了Mobile upload,就不再需要这样了。有了这个插件,您可以用手机拍照,直接上传至 Figma。这对笔记本草图和头脑风暴会议相当有用。

Figma中的实用插件

您是否曾在将一张大图片带入 Figma 时失去分辨率?或者因为无法为图层输入间距值而感到沮丧?又或者您无法独立调整一个框架的大小,而不考虑其内容?Shopify 的产品设计师 Yuan Qing Lim 开发了九个有用的插件来解决类似的问题。

有了这些插件,你可以以像素的精度移动图层,重新调整框架而不同时调整其内容的大小,复制一个组件,插入不模糊的大图像(超过4096像素的限制),并进行快速和精确的选择。

如果你需要更多的指导或灵感,Louis Ouriach已经创建了一个最佳实践建议,说明如何在文件中构建框架,以确保交接像黄油一样顺畅。

Figma中的线框设计和原型设计

当你刚开始计划你的设计时,使用线框工具来了解你要设计的东西可能会很方便。

在Figma中进行线框设计时,任何谈话都不能不提到AutoFlow。该插件允许您选择对象,并自动绘制一个箭头来连接它们。这是一个展示和解释想法的绝佳小帮手

Wireframe提供了一大套线框,用于用户流、原型和基本结构。线框组件被划分为不同的类别。所有的文件都是SVG,所以你可以很容易地根据你的需要编辑它们。

然而,有时在创建了一个设计后,你可能想回到线框图中再迭代一下,或者也许为你的设计创建一个稍微不同的流程。线框在这些情况下很有用。它可以将你的设计从高保真模拟转换为低保真模拟,这样你就可以专注于整体架构,而不是UI的精细细节。

最后,你还可以使用oblique来创建快速阴影、3D深度和视觉透视,以及Wireframer Figma插件,只需一次点击就能为线框生成占位符文本。

结语

在这篇文章中,我们探讨了无数的Figma工具、插件和资源,你可以用它们来使你的设计过程更容易。还有很多东西我们没有涉及,但您可以在这里的 Figma 社区中探索它们,或者在下面的评论中分享您最喜欢的东西