迷你教程–在整个设计过程中充分利用Figma的功能 _原型设计

本文概述

什么是顺利进行产品设计过程的基础？
1.可访问性与协作
2.迭代和生产可交付成果的灵活性
3.建立原型和测试的能力
4.建立单一的真理来源
5.平滑切换
6.可以定制和改进的多功能性
Figma的功能非常适合整个设计过程

【迷你教程–在整个设计过程中充分利用Figma的功能】新兴设计工具的世界令人兴奋。很有希望的新程序正在迅速陆续推出, 但是特别是有一个程序逐渐成为规模更大且大多是分布式设计团队的最佳选择。
Figma有潜力支持整个设计过程的端到端。最初的草图, 反馈收集, 协作, 易于测试的原型以及开发人员交接均在其功能范围内。 Figma还简化了产品经理和设计负责人以及所有其他利益相关者的工作。
那么, 是什么让Figma与众不同？有几个关键方面, 但是所有这些方面都可以追溯到Figma基于Web的事实。首次发布该工具时, 这引起了很大的关注, 但最终, 它为Figma的灵活性和独特功能铺平了道路。

文章图片
什么是顺利进行产品设计过程的基础？虽然每个团队和项目都有不同的工作流程, 但确实有一些功能和阶段是产品设计和管理的重要组成部分。 Figma涵盖了每个。

辅助功能和协作。无论团队使用什么工具, 都需要一种方法来协同工作, 展示项目, 收集反馈并保持利益相关者参与其中。所有这些功能均可在Figma中使用。
灵活地迭代和生成可交付成果。 Figma非常灵活, 可以用作协作白板, 以草绘最初的想法并迭代从线框到高保真模型的所有内容。
能够构建原型和测试。设计一个移动应用程序？构建和发布交互式原型, 并直接在智能手机上测试它们-全部来自Figma。
建立单一的真理来源。 Figma是定义完全在线的产品设计系统的绝佳方法。默认情况下, 这是单一事实来源。毫不奇怪, “ 这是最新版本吗？”
平滑的切换。只需与开发人员共享链接, 他们就可以访问实现设计所需的所有信息, 包括可导出的红线, 尺寸和图形资产。
多功能性可以定制和改进。 Figma的插件API允许团队编写自己的插件或进入更广泛的用户社区, 并使用新功能扩展该工具。

1.可访问性与协作加入团队
让我们仔细研究一下Figma如何为上述六个关键领域做出贡献。新用户可能想创建一个免费的Figma帐户, 建立一个团队, 并观看Figma的使用入门。创建团队后, 邀请团队成员和相关利益相关者加入。

文章图片
共有三个访问级别。这是不言自明的, 但是通常, 设计团队拥有编辑权, 其他人则拥有查看权。这包括需要能够遵循设计过程并提供反馈的开发人员和其他利益相关者。

文章图片
在团队级别(如上所示), 项目级别和文件级别, 可以使用类似的共享选项。如果未指定访问级别, 则它们将从团队传播到项目, 再从项目传播到文件。
由于Figma在浏览器中可用, 因此如何邀请某人或他们在什么系统上都无关紧要。只要使用的设备和浏览器满足最低要求, 它们就可以直接通过链接跳入, 并且界面将根据其是否具有编辑或查看权限而更改。
嵌入项目文件
Figma项目文件可以嵌入第三方软件中。例如, 共享的Dropbox Paper文档可用于呈现项目的当前状态。
要嵌入项目文件, 请通过链接将文件可见性设置为” 任何人” -可以查看, 复制嵌入代码, 并将项目文件嵌入任何支持embed.ly的第三方软件中。

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

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

文章图片
为了使团队保持一致, 有一个很好的集成, 可以在指定的Slack频道中发布来自Figma文件的讨论。
实时实时协作
Figma更具吸引力的功能之一就是所谓的多人游戏。它允许多个团队成员同时打开并处理设计文件。该页面上的所有人都可以在该页面的右上角看到, 并且他们的化身已命名并且可以单击。
可能需要一些时间来了解这实际上意味着什么。尽管设计人员不太可能使用多人游戏来同时处理文件的同一部分, 但不必担心文件版本冲突, 这令人难以置信, 这对于较大的分布式团队而言尤其如此。
远程演示时, 多人游戏非常方便, 因为它使连接到文件的每个人都可以跟随演示者的视口。它还允许团队绕过其他程序, 并将Figma用作在线白板(尽管像Miro这样的特定解决方案最终可能会更适合此工作)。
为此, 建议创建自定义组件以将特定资产复制为虚拟便利贴或图表元素。
2.迭代和生产可交付成果的灵活性一旦邀请了团队成员并且正在进行初步草图, 就可以使用Figma进行迭代。创建Figma的主要原因是界面设计-完成白板后, 团队可能会转向流程图和线框。同样, 构建可重复用于这些任务的组件库很聪明。官方模板集合提供了灵感和设计安排。
3.建立原型和测试的能力使用Figma创建交互式原型非常容易。打开具有编辑权限的Figma文件时, 可以在设计模式和原型模式之间切换。进入原型模式后, 无论是从舞台还是在侧边栏中, 都可以单击元素以使其具有交互性。

文章图片
在” 原型” 模式下选择元素后, 侧面会出现一个小圆圈。拖动时会出现蓝线, 可以将其放在屏幕或状态上以显示交互结果。

文章图片
Figma提供了常见的过渡功能, 使创建高保真原型更加容易。实际上, Figma团队最近发布了智能动画和拖动触发功能。智能动画方面会内插相似元素的运动, 而拖动触发器是一种新型的交互方式。两者都极大地提高了交互原型的质量。
用户测试
同样, 即使是在进行用户测试时, 分发Figma原型所需的全部链接。单击右上角的小图标, 将启动原型, 并生成一个新的URL。你可以复制网址或使用蓝色的共享原型按钮。用户打开链接后, 将为他们提供一个交互式原型, 并在需要时可以留下评论。
在手机上测试
展示了针对移动设备的设计, 其中包含围绕原型的实际设备的模型。如果需要更多的真实性来测试交互, 最好下载Figma Mirror应用以进行特定于设备的测试。
4.建立单一的真理来源版本记录
如果项目文件始终是最新的并且不断备份, 那不是很好吗？默认情况下, 此功能包含在Figma中。每个文件在处理时都会自动保存, 并且在闲置30分钟后, Figma在版本历史记录中创建一个新条目。创建了所有自动保存版本的日志, 并且可以根据需要还原每个版本。

文章图片
当然, 自动版本控制不是保存工作的唯一选择。可以手动保存版本或在版本历史记录中编辑特定版本。

文章图片
设计系统和组件库
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 to React Converter更新可排序列表上的样式。
Figma的功能非常适合整个设计过程没有一个单一的设计程序可以满足每个设计师或设计问题的需求, 这是一件好事。设计工具之间的竞争对设计师有利。它确保了制造我们工具的公司能够听取我们的需求, 并为我们提供适合我们工作的最新功能。
就是说, Figma是一种先进而直观的工具, 它已证明自己不仅仅能够解决整个数字设计过程。各个设计人员和团队都可以从其独特的协作和迭代功能中受益, 并且在程序不足的地方, 大量的插件可以填补空白。
? ? ?
在srcmini设计博客上进一步阅读：