迷你教程——在整个设计过程中利用 Figma 的功能

新兴设计工具的世界令人难以置信。 有前途的新程序正在迅速接连推出，但特别是有一个已慢慢成为更大且大多数分布式设计团队的最佳选择。

Figma 有可能支持端到端的整个设计过程。 第一个草图、反馈收集、协作、准备测试的原型和开发人员移交都在其能力范围内。 Figma 还简化了产品经理和设计主管以及所有其他利益相关者的工作。

那么，是什么让 Figma 在竞争中脱颖而出？ 有几个关键方面，但所有这些都可以追溯到 Figma 是基于 Web 的事实。 当该工具首次发布时，这引起了很多人的注意，但最终，它为 Figma 的灵活性和独特的功能铺平了道路。

流畅的产品设计过程的基础是什么？

虽然每个团队和项目确实可能有不同的工作流程，但有些功能和阶段是产品设计和管理的重要组成部分。 Figma 涵盖了每一个。

1. 可访问性和协作。 无论团队使用什么工具，都需要有一种方法可以一起工作、展示项目、收集反馈并让利益相关者参与其中。 所有这些功能都在 Figma 中可用。
2. 迭代和生产可交付成果的灵活性。 Figma 非常灵活，可以用作协作白板，用于勾画最初的想法并迭代从线框到高保真模型的所有内容。
3. 构建原型和测试的能力。 设计移动应用程序？ 构建和发布交互式原型并直接在智能手机上进行测试——所有这些都来自 Figma。
4. 建立单一的事实来源。 Figma 是定义完全在线的产品设计系统的绝佳方式。 默认情况下，它是单一的事实来源。 不再怀疑，“这是最新版本吗？”
5. 平滑切换。 只需与开发人员共享一个链接，他们就可以访问实施设计所需的所有信息——红线、测量和准备导出的图形资产。
6. 可定制和改进的多功能性。 Figma 的插件 API 允许团队编写自己的插件或利用更广泛的用户社区并使用新功能扩展该工具。

1. 可访问性和协作

让团队加入

让我们仔细看看 Figma 如何为上述六个关键领域做出贡献。 新用户可能想要创建一个免费的 Figma 帐户，建立一个团队，然后观看 Figma 入门。 创建团队后，邀请团队成员和相关利益相关者加入。

提供三种访问级别。 这是相当不言自明的，但通常，编辑权限授予设计团队，查看权限授予其他所有人。 这包括需要能够遵循设计过程并提供反馈的开发人员和其他利益相关者。

类似的共享选项可用于团队级别（如上所示）、项目级别和文件级别。 如果未指定访问级别，它们会从团队传播到项目，从项目传播到文件。

由于 Figma 在浏览器中可用，因此邀请某人的方式或他们使用的系统无关紧要。 只要他们使用的设备和浏览器满足最低要求，他们就可以通过链接直接跳转，界面会根据他们是否具有编辑或查看权限而变化。

嵌入项目文件

Figma 项目文件可以嵌入到第三方软件中。 例如，共享的 Dropbox Paper 文档可用于呈现项目的当前状态。

要嵌入项目文件，请将文件可见性设置为任何拥有链接的人 - 可以查看、复制嵌入代码，并将项目文件嵌入到任何支持 embed.ly 的第三方软件中。

反馈和修改

产品设计过程的另一个关键功能是分发设计、收集反馈和管理修订的能力。 任何拥有 Figma 链接的人都可以查看最新版本并直接评论他们想要提供反馈的观点。

要标记团队成员，请使用 @ 字符，系统将显示一个可供选择的名称列表。 这样做会通知团队成员，一旦处理了反馈，就可以通过单击Resolve来关闭讨论。

为了让团队保持一致，有一个很好的集成可以在指定的 Slack 频道中发布来自 Figma 文件的讨论。

实时协作

Figma 更有趣的功能之一是他们所说的多人游戏。 它允许多个团队成员同时打开和处理设计文件。 处理该文件的每个人都在页面的右上角可见，并且他们的头像被命名并可以点击。

可能需要一些时间来理解这在实际中意味着什么。 虽然设计师不太可能使用多人游戏同时处理文件的同一部分，但不必担心文件版本冲突是非常令人欣慰的，尤其是对于较大的分布式团队而言。

多人游戏在远程演示时派上用场，因为它使连接到文件的每个人都可以跟随演示者的视口。 它还允许团队绕过其他程序并将 Figma 用作在线白板（尽管特定的解决方案，如 Miro，最终可能更适合这项工作）。

为此，建议创建自定义组件以将特定资产复制为虚拟便利贴或图表元素。

2. 迭代和生产可交付成果的灵活性

一旦邀请了团队成员并开始绘制初始草图，就可以使用 Figma 进行迭代。 创建 Figma 的主要原因是界面设计——完成白板后，团队可能会转向流程图和线框图。 同样，构建可重复用于这些任务的组件库是明智之举。 官方模板集合提供了灵感和设计安排。

3. 构建原型和测试的能力

使用 Figma 创建交互式原型非常容易。 当 Figma 文件以编辑权限打开时，可以在设计和原型制作模式之间切换。 进入原型模式后，无论是从舞台还是图层侧边栏，都可以单击一个元素以使其具有交互性。

在原型模式中选择一个元素后，侧面会出现一个小圆圈。 拖动时会出现蓝线，可以将其拖放到屏幕或状态以显示交互结果。

Figma 中提供了常见的转换，这使得创建高保真原型变得更加容易。 事实上，Figma 团队最近发布了一个智能动画和拖动触发功能。 智能动画方面插入相似元素的运动，而拖动触发器是一种新型交互。 两者都极大地提高了交互式原型的质量。

用户测试

同样，分发 Figma 原型所需要的只是一个链接，即使是用于用户测试。 点击右上角的小播放图标启动原型，并生成一个新的 URL。 可以复制 URL 或使用蓝色的共享原型按钮。 一旦用户打开链接，他们就会看到一个交互式原型，并且可以在需要时发表评论。

在移动设备上测试

移动设备的设计以围绕原型的实际设备模型呈现。 如果需要更真实地测试交互，最好下载 Figma Mirror 应用程序进行特定设备测试。

4. 建立单一的真理来源

版本历史

如果项目文件始终是最新的并不断备份，那不是很好吗？ 默认情况下，此功能包含在 Figma 中。 每个文件在处理时都会自动保存，并且 Figma 在 30 分钟不活动后会在版本历史记录中创建一个新条目。 创建所有自动保存版本的日志，如果需要，可以恢复每个版本。

当然，自动版本控制并不是节省工作的唯一选择。 可以手动保存版本或在版本历史记录中编辑特定版本。

设计系统和组件库

Figma 的另一个亮点是它如何让设计师创建、组织和分发组件库。 任何文件都可以作为库发布，并且每种颜色、文本样式、效果、网格或组件都可以在其他 Figma 文件中使用。

当对库中的任何元素进行更改时，可以发布编辑并将其传播到使用这些元素的文件。 然后，处理这些文件的设计人员可以决定是否接受编辑。

决定如何分发库的能力，结合切换库元素可见性或不可见性的选项，使整个体验流畅而强大。

可以嵌套组件和库以创建复杂的设计系统，其中所有内容都是版本化的，并且对所有相关人员都是最新的。 并且所有组件都可以用注释进行注释。

5. 平滑切换

开发者交接

使用 Figma，设计人员和开发人员不需要像 Zeplin 这样的单独工具来管理切换。 他们可以简单地打开文件并在右侧边栏中切换到代码模式，即使只有查看访问权限。

当代码模式处于活动状态时，在舞台上选择一个元素将显示实现所需的所有相关信息，并且有关组件相对于其他元素的位置的所有其他信息都是可见的。 与类似的解决方案一样，生成的代码并不意味着完全复制粘贴，但如此容易访问会很有帮助。

6. 可定制和改进的通用性

Figma API 和自定义插件

Figma 的 API 和插件系统使广泛的设计团队和学科可以轻松地为他们的特定流程需求定制程序。 Figma 的灵活性使用户能够以编程方式与平台交互。 几个例子：

使用真实数据

能够在模型和原型中使用真实数据是非常有价值的，而 Figma 通过允许导入来自外部资源的内容使之成为可能。 通过利用真实内容，可以对设计组件进行压力测试，使模型保持最新，并让与设计无关的团队参与进来。

一个名为 Google Sheets Sync 的插件就是一个很好的例子。 该插件可以轻松地将 Google 表格集成为填充和同步 Figma 文件中组件内容的源。

高级工作流程

仅当系统始终在面向客户的屏幕中实施时，在 UI 设计程序中容纳设计系统的能力才有价值。 值得庆幸的是，有 Figma API、插件和集成可以提供帮助。

Storybook 插件同步 Figma 文件，并在面板中显示 Figma 设计组件以及已实现的组件。 另一个有趣的用例是 Figma to React Converter，这是一种将 Figma 组件转换为代码的工作流增强。

Figma 的功能非常适合整个设计过程

没有单一的设计程序可以处理每个设计师的需求或设计问题，这是一件好事。 设计工具之间的竞争有利于设计师。 它确保制造我们工具的公司倾听我们的需求，并为我们提供适合我们工作的最新功能。

也就是说，Figma 是一种先进而直观的工具，它已经证明自己不仅能够处理整个数字设计过程。 个人设计师和团队都可以从其独特的协作和迭代功能中受益，并且在程序不足的地方，大量的插件选择填补了空白。

• • •

进一步阅读 Toptal 设计博客：

• Figma 作为设计工具的力量
• Figma vs. Sketch vs. Axure——基于任务的回顾
• 迷你教程 - 使用 Figma 按钮组件
• 使用这些顶级 UX 工具掌握您的工艺
• 精准设计——Adobe XD 评论