作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
本·科普夫的头像

本科夫

Ben在UX、交互、用户研究和UI设计方面有25年的经验. 本想的是未来,而不是现实.

专业知识

以前在

ADP
分享

是什么 Figma? Figma是一个基于云的设计工具,类似于 草图 在功能和特性上,但有很大的不同,使Figma更好 团队协作. 对这些说法持怀疑态度的人, 我们将解释Figma如何简化设计过程,并且比其他程序更有效地帮助设计师和团队高效地协同工作.

让我们仔细看看.

Figma界面设计

Figma适用于任何平台

Figma可以在任何运行web浏览器的操作系统上运行. mac, Windows pc, Linux机器,甚至chromebook都可以使用Figma. 它是该类型中唯一能做到这一点的设计工具, 在使用运行不同操作系统的硬件的商店中, 每一个人 还能共享、打开和编辑Figma文件吗.

在许多组织中, 设计师 使用mac电脑,开发人员使用Windows电脑. Figma做了什么来帮助这些团体团结在一起? Figma的普适性避免了乒乓游戏的烦恼(游戏邦注:更新后的图像会在设计团队之间来回切换)。. 在Figma中,不需要中介机制来让每个人都可以使用设计工作.

Figma的合作简单而熟悉

因为Figma是基于浏览器的,所以团队可以像在浏览器中一样进行协作 谷歌文档. 查看和编辑文件的人会在应用程序的顶部以圆形头像的形式显示. 每个人都有一个命名的光标,所以跟踪谁在做什么很容易. 点击别人的头像会放大到他们当时正在观看的内容.

Figma设计协作工具

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

Figma是用来做什么的? 使用Figma, 设计主管可以通过简单地打开共享文件来查看团队正在进行的实时设计. 如果设计师误解了概要或用户故事, 这个特性允许设计主管进行干预, 正确的课程, 这样就节省了本来会浪费的无数时间. (相比之下,使用草图的团队无法立即判断设计师是否误入歧途.)

旁注:有些设计师不喜欢在工作时被“监视”, 所以由设计负责人来解释这些好处. 在一般情况下, 大多数设计师很快就看到了这种功能的价值,并很容易适应在共享环境中工作.

Figma使用松弛进行团队沟通

Figma使用 松弛 作为它的沟通渠道. 当一个 Figma通道在松弛中创建,在Figma中所做的任何评论或设计编辑都是“怠慢”给团队的. 这个功能在实时设计时是至关重要的,因为对Figma文件的更改将更新嵌入该文件的所有其他实例(这对开发人员来说是一个潜在的头痛问题)。. 对模型的更改,无论是否有保证,都会立即进行审查,并且反馈渠道是实时的.

Figma设计团队在松弛中的沟通

Figma共享简单灵活

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

App设计工具文件共享

这种形式的选择性共享,从文件到框架,让 设计师, 产品负责人, 开发人员分享了bug跟踪工具和社区软件所需要的东西 融合 or 分享Point.

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

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

如果Figma中的任何人对模型进行了更改, 这种变化可以在嵌入的融合模型中实时看到. (你可以阅读更多关于Figma和融合集成的信息 在这里.)

这个特性对用户体验过程的影响如下图所示:

Figma改进UX设计工具

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

Figma之后, 不再需要第三方工具(但如果需要可以使用). 的功能 第三方工具 前面描述的, 在这个过程中只有一步——从草图到Figma,所有的小组都有最新的模型. 严格意义上的“交接”是不存在的.

Figma是设计评审反馈的好工具

Figma是如何支持团队的? 当有 in应用评论 对于设计和原型模式,评论线程在松弛和/或电子邮件中被跟踪. 不需要发布PNG文件或执行不断更新,以获得团队使用第三方工具的反馈 InVision or 奇迹.

网络 UI设计工具和审查反馈

在设计评审期间, 团队设计师可以在大屏幕上讨论他们的工作, 记录的评论, 并解决问题-所有在Figma. 这种形式的实时反馈在草图中是不可能的, 这需要上传到云服务来获得团队输入.

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

使用Figma可以方便地进行开发人员切换

Figma在CSS中任何选定的框架或对象上显示代码片段, iOS, 或Android格式供开发人员在审查设计文件时使用. 设计组件可以 由任何发展商检查 在他们可以查看的任何文件中. 不需要使用第三方工具获取信息. 尽管如此,Figma已经完全集成了 赞贝林 如果团队想要做的不仅仅是简单的测量和CSS显示.

Figma原型审查和开发人员交接

Figma项目文件驻留在一个地方-在线

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

  • 为该特性创建一个项目 主题.
  • 创建一个文件 史诗 或者是大特征.
  • 在该文件中为每个用户创建页面 故事.

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

Windows的在线素描替代方案

Figma api提供第三方工具集成

Figma现在 开发人员api 允许与任何基于浏览器的应用程序真正集成. 公司正利用这一技术将设计文件的实时显示整合到他们的应用程序中. 例如,优步在公司周围安装了大屏幕,“直播”显示设计文件. 设计是共享的,欢迎来自公司任何人的反馈.

Atlassian的JIRA软件已经实现了一个 Figma附加 所以产品所有者, 开发人员, 质量工程师总是在查看设计师提供的任何模型的最新版本.

另外, Figma的API承诺满足客户对第三方插件和草图已经提供的功能增强的要求.

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

围绕实时文件更新的任何不确定性都被Figma的内置功能进一步缓解 版本控制系统. 在任何时候,a 设计师 can create a named version and description of a Figma file; this can be done immediately after agreed changes are made to a design.

网络界面设计自动文件版本控制

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

在Figma的原型是直接和直观的

而素描最近添加画板画板 原型设计, Figma更进一步,提供 转换 帧之间. Figma的简单原型功能消除了对另一个工具进行幻灯片样式原型的需求, 比如InVision或奇迹. 当所需要的只是一个带有转换的简单表示时, 不需要导出到评审工具.

直观的网页设计原型

Figma原型 can be distributed just like Figma design files; anyone with link permission can view and 评论 on a prototype, 一次又一次, 这些反馈会被记录在该工具的评论面板中,并记录在松弛中. 开发人员可以看到设计工作流, 直接给设计师留言, 并从原型内部获取测量值和CSS属性.

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

设计系统 已经成为许多公司的必需品吗, 并且需要可重用的组件(草图和Illustrator中的符号), 可伸缩的, 和“标记化的的模式库中使用 用户体验设计师 前端开发人员.

Figma设计系统库

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

设计系统组件库

Figma的方法是 组件库 是否简单且易于管理. 设计人员可以创建充满组件的文件,或者使用页面上的组件来组织模式库. Figma页面中的每一帧都成为团队库中的组织部分(不需要像这样创建层次结构)。.

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

Figma旨在加强设计团队合作

使用Figma软件的任何时间长度将展示这个实时协作工具的好处. 它使团队专注于任务,并鼓励充分披露, 在为各种学科构建设计系统时至关重要. Figma设计工具易于任何人在任何平台上使用, 并允许团队快速共享他们的工作和库.

设计专家 使用Figma之后 从草图切换 (草图文件可以通过校验导入Figma)不会失望:

它完全改变了你与同事和客户合作的方式 使用Figma简化协同设计

Figma在过去的几年里集合了世界上最好的UI设计工具 为什么你的设计团队应该考虑改用Figma

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

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

了解基本知识

  • 协作工具的意义是什么?

    在设计, 协作工具帮助来自不同学科的设计师(以及开发人员)一起工作,创造数字产品.

  • 什么是在线协作工具?

    Figma, InVision, 和漫威都是设计师和开发者用来打造数字产品的在线协作工具. 在线协作工具允许设计人员和开发人员进行编辑, 评论, 一起审查设计和代码.

  • 设计过程中有哪些步骤?

    设计过程中的步骤可能会有所不同, 但一般来说,它们是:(1)定义问题, (2)进行研究, (3)分析研究成果,集思广益, (4)制定初始解决方案, (5)观察并记录反馈, (6)细化解决方案,重复必要步骤.

聘请Toptal这方面的专家.
现在雇佣
本·科普夫的头像
本科夫

位于 坎顿,GA,美国

成员自 2018年3月19日

作者简介

Ben在UX、交互、用户研究和UI设计方面有25年的经验. 本想的是未来,而不是现实.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前在

ADP

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.