Figma 作为设计工具的力量

已发表: 2022-03-11

Figma 是一个基于云的设计工具,在功能和特性上与 Sketch 相似,但有很大的不同使得 Figma 更适合团队协作。 对于那些对此类说法持怀疑态度的人,我们将解释 Figma 如何简化设计过程,并且在帮助设计师和团队高效协作方面比其他程序更有效。

让我们仔细看看。

Figma 中的界面设计
Figma 具有熟悉的界面,易于采用。

Figma 适用于任何平台

Figma 适用于任何运行网络浏览器的操作系统。 Mac、Windows PC、Linux 机器,甚至 Chromebook 都可以与 Figma 一起使用。 它是同类中唯一能做到这一点的设计工具,而且在使用运行不同操作系统的硬件的商店中,每个人仍然可以共享、打开和编辑 Figma 文件。

在许多组织中,设计人员使用 Mac,开发人员使用 Windows PC。 Figma 有助于将这些群体聚集在一起。 Figma 的通用性也防止了 PNG-pong 的烦恼(更新的图像在设计团队学科之间来回反弹)。 在 Figma 中,不需要一个中介机制来让每个人都可以使用设计工作。

Figma 中的协作简单而熟悉

由于 Figma 是基于浏览器的,因此团队可以像在 Google Docs 中一样进行协作。 查看和编辑文件的人在应用程序顶部显示为圆形头像。 每个人还有一个命名光标,因此跟踪谁在做什么很容易。 单击其他人的头像会放大他们当时正在查看的内容。

Figma 设计协作工具
在 Figma 中协作时,您可以单击任何人的头像来查看他们的视图。

实时文件协作有助于减轻“设计偏差”——定义为误解或偏离商定的设计。 设计漂移通常发生在在项目进行中构思并快速实施的想法。 不幸的是,这通常会导致偏离既定设计,造成摩擦和返工。

使用 Figma,设计负责人只需打开共享文件即可实时查看团队正在设计的内容。 如果设计师以某种方式误解了概要或用户故事,此功能允许设计领导进行干预、纠正路线,并节省无数原本会被浪费的时间。 (相比之下,使用 Sketch 的团队无法立即判断设计师是否误入歧途。)

旁注:一些设计师不喜欢在工作时被“窥探”,因此由设计负责人来解释其中的好处。 一般来说,大多数设计师很快就会看到这种功能的价值,并很容易适应在共享环境中工作。

Figma 使用 Slack 进行团队沟通

Figma 使用 Slack 作为其沟通渠道。 当在 Slack 中创建 Figma 频道时,在 Figma 中所做的任何评论或设计编辑都会“松弛”给团队。 此功能在实时设计时至关重要,因为对 Figma 文件的更改将更新嵌入文件的所有其他实例(开发人员可能会感到头疼)。 对模型的更改,无论是否得到保证,都会立即得到审查,并且反馈渠道是实时的。

Figma 设计团队在 Slack 中的沟通
Figma 项目可以使用 Slack 通道在文件中进行线程评论。

Figma 共享简单灵活

Figma 还允许基于权限共享任何文件、页面或框架(在其他设计工具中称为画板)。 当为页面上的框架创建共享链接时,单击该链接的人将打开 Figma 的浏览器版本,并加载框架的放大视图。

应用设计工具文件共享
Figma 与任何有权限的人共享项目、文件、页面和框架。

这种从文件到框架的选择性共享形式让设计人员、产品所有者和开发人员能够准确地共享错误跟踪工具和社区软件(如 Confluence 或 SharePoint)所需的内容。

嵌入式 Figma 文件提供实时更新

Figma 还共享实时嵌入代码片段,以将 iFrame 粘贴到第三方工具中。 例如,如果 Confluence 用于显示嵌入的模型文件,则这些文件不会通过保存 Figma 文件来“更新”——那些嵌入的文件就是 Figma 文件。

如果 Figma 中的任何人对模型进行了更改,则可以在嵌入式 Confluence 模型中实时看到该更改。 (您可以在此处阅读有关 Figma 和 Confluence 集成的更多信息。)

此功能对 UX 流程的影响如下图所示:

Figma 改进 UX 设计工具
Figma 消除了对用于原型设计和评论的专用应用程序的需求。

在 Figma 之前,使用了其他几个工具来促进设计模型和更新的交换。 迭代周期是一系列来回文件更新,因此团队可以审查和实施当前设计。

在 Figma 之后,不再需要第三方工具(但可以根据需要使用)。 由于 Figma 处理了前面描述的第三方工具的功能,所以在这个过程中只有一个步骤——从草图转移到 Figma,并且所有组都有最新的模型。 没有严格意义上的“交接”。

Figma 非常适合设计审查反馈

Figma 支持设计和原型模式下的应用内评论,并且评论线程在 Slack 和/或电子邮件中进行跟踪。 无需发布 PNG 文件或执行持续更新即可使用 InVision 或 Marvel 等第三方工具从团队获得反馈。

Web UI 设计工具和审查反馈
设计师可以通过打开同一个 Figma 文件在评论期间发表评论。

在设计审查期间,团队设计师可以在大屏幕上讨论他们的工作、记录评论和解决问题——所有这些都在 Figma 中。 Sketch 无法提供这种形式的实时反馈,这需要上传到云服务以获得团队的意见。

诚聘美国全职自由 UI 设计师

使用 Figma 促进开发人员移交

Figma 在任何选定的框架或对象上以 CSS、iOS 或 Android 格式显示代码片段,供开发人员在查看设计文件时使用。 任何开发人员都可以在他们可以查看的任何文件中检查设计组件。 无需使用第三方工具来获取信息。 即便如此,如果团队想要做的不仅仅是简单的测量和 CSS 显示,Figma 已经与 Zeplin 完全集成。

Figma 原型审查和开发人员交接
开发人员可以从设计文件或运行 Figma 原型访问代码。

Figma 项目文件存放在一个地方——在线

由于 Figma 是一个在线应用程序,它通过在专用视图中显示项目及其文件来处理文件组织。 Figma 还支持每个文件多个页面,例如 Sketch,因此敏捷团队可以有逻辑地组织他们的项目:

  • 为功能主题创建一个项目。
  • 史诗或大型功能创建文件。
  • 在该文件中为每个用户故事创建页面。

这只是组织文件的一种方法,可以根据流程的要求进行或多或少的细化。

Windows 的在线素描替代品
可以在专用视图中轻松组织项目文件。

Figma API 提供第三方工具集成

Figma 现在拥有开发人员 API,允许与任何基于浏览器的应用程序真正集成。 公司正在使用它在他们的应用程序中集成设计文件的实时显示。 例如,优步有大屏幕显示他们公司周围“直播”的设计文件。 设计是共享的,欢迎公司中的任何人提供反馈。

Atlassian 的 JIRA 软件实施了 Figma 插件,因此产品所有者、开发人员和质量工程师始终可以查看设计师提供的任何模型的最新版本。

此外,Figma 的 API 承诺满足客户对 Sketch 已经提供的第三方插件和功能增强的请求。

文件版本控制是自动的还是按需的

Figma 的内置版本控制系统进一步缓解了围绕实时文件更新的任何不确定性。 任何时候,设计师都可以创建一个 Figma 文件的命名版本和描述; 这可以在对设计进行商定的更改后立即完成。

网页界面设计自动文件版本控制
手动保存文件版本以创建设计分支。

在有意将更改提交到原始版本之前,共享环境中的实时文件不会受到影响。 还可以恢复任何自动保存的版本以创建副本或覆盖原始版本。

Figma 中的原型设计简单直观

虽然 Sketch 最近在画板原型中添加了画板,但 Figma 通过提供帧之间的过渡更进一步。 Figma 的简单原型制作功能消除了对其他进行幻灯片样式原型制作的工具的需求,例如 InVision 或 Marvel。 如果只需要带有过渡的简单演示文稿,则无需导出到审阅工具。

直观的网页设计原型
Figma 原型设计与使用框架之间连接箭头的其他工具一样工作。

Figma 原型可以像 Figma 设计文件一样分发; 任何拥有链接权限的人都可以查看和评论原型,同样,该反馈会在工具的评论面板中捕获并记录在 Slack 中。 开发人员可以查看设计工作流程,直接为设计人员留下@messages,并从原型内部获取测量值和 CSS 属性。

Figma 的团队库是设计系统的理想选择

设计系统已成为许多公司的必需品,并且需要可重用、可扩展和“标记化”的组件(Sketch 和 Illustrator 中的符号),以便在 UX 设计人员和前端开发人员可用的模式库中使用。

Figma 设计系统库
Figma 的团队库无模式对话框让您可以不受限制地访问组件和样式。

经常使用的短语“单一事实来源”确实适合这里——一旦创建了 Figma 团队库,任何有权访问项目的人都可以在他们的设计中使用组件的实例,并确保他们使用的是最新版本。

设计系统组件库
使用文件和框架组织组件既简单又灵活。

Figma 的组件库方法简单且易于管理。 设计人员可以创建充满组件的文件或使用页面组件来组织模式库。 Figma 页面中的每一帧都成为团队库中的组织部分(无需创建层次结构\like\this)。

组织库的一种方法是创建一个专门用于组件的项目。 可以根据需要组织该项目中的文件,并且可以相应地排列这些文件中的页面。

Figma 旨在增强设计团队合作

长时间使用 Figma 将展示这种实时协作工具的优势。 它使团队保持任务并鼓励充分披露,这在为各种学科构建设计系统时至关重要。 任何人都可以在任何平台上轻松使用 Figma,并让团队快速共享他们的工作和库。

从 Sketch 切换后使用 Figma 的设计专家(Sketch 文件可以以奇偶校验方式导入 Figma)并没有失望:

…它彻底改变了您与同事和客户合作的方式——使用 Figma 简化协作设计

Figma 在过去几年中结合了 UI 设计工具世界中最好的一切——为什么你的设计团队应该考虑切换到 Figma

去年,我一直在使用 Figma 进行 UI/UX 设计过程,它节省了我的工作时间。 它真正改变了我的设计工作流程——如何使用 Figma 简化你的 UI/UX 工作流程

我在 Figma 上度过的时间通常是我一天中最愉快和最有成效的部分 - Figma 正在改变我的整个工作流程,这太棒了!

• • •

进一步阅读:

  • 使用这些顶级 UX 工具掌握您的工艺
  • 使用 Figma 简化协作设计
  • 使用 InVision 的 Craft 简化团队协作
  • 线框之死。 直接到高保真!
  • 让地球成为您的办公室,成为世界级设计师