Figma 是一个很好的 UX/UI 原型设计工具。它允许您直接在设计文件中创建具有高级但易于使用的功能的交互式流程。只需几分钟，您就可以将静态设计变成网站或产品的真实版本。
文章是转载的英文文章，机器翻译可能有问题，查看原文链接点击标题下文章来源
出于多种原因，创建原型很重要。您可以探索新用户流的工作方式。与您的团队交流互动。测试并从用户那里获得反馈。并向利益相关者推销设计以供购买。
在本指南中，您将学习
- 原型 101
- 如何添加原型流程
- 如何添加交互（即时、动画、智能动画）
- 如何创建固定位置
- 如何添加溢出滚动
- 如何创建交互式组件
- 如何展示和分享你的原型
专业提示：跟随我们（免费）的 Figma Prototype Playground。包括本文 (11) 中每个原型的示例。以及有关如何自己重新创建所有交互的分步说明。
原型 101
首先，让我们回顾一下原型设计的基础知识。组织您的设计并熟悉最重要的原型设计功能。这将保护您的设计并加快您的工作流程。
组织起来
当您准备好开始原型设计时，将所需的每个屏幕和组件的副本添加到新页面。用清晰、可识别的名称按逻辑顺序排列所有内容。使用副本将允许您在许多原型中使用相同的设计。同时还保持原件的安全和有条理。
专业提示：将常用屏幕变成主要组件以减少维护。
访问关键功能
在“原型”下的右侧面板中评估（几乎）所有原型功能。
A. 原型面板
B. 添加新的原型流程
C. 添加和配置交互
D. 添加和配置溢出滚动
E. 配置原型设置
F. 展示原型
添加原型流程
Figma 文件中的每个页面都可以有一个或多个原型流程。每个人都需要有自己的起点和唯一的名称。选择您希望出现在流程中的第一帧，然后单击“流程起点”旁边的“添加”图标。添加后，通过单击名称输入重命名流。通过单击流名称旁边的“编辑”图标添加描述。要删除起点，请单击“流程起点”旁边的“删除”图标
添加交互
交互是构建原型时使用的主要功能。使用它们来显示不同的行为、效果和导航模式。它们通过连接两个层来工作，然后通过添加触发器、动作和动画来确定这些层将如何相互交互。使用状态动画可以很简单地进行交互。或者，它们可以使用移动或更改属性的动画元素变得更复杂。
触发器：导致更改的事件（点击/单击、拖动、悬停、按下、键/游戏手柄、鼠标进入、鼠标离开、鼠标按下（单击）、鼠标向上（释放））。
操作：正在发生的更改（导航到、更改到、打开覆盖、交换覆盖、关闭覆盖、返回、滚动到、打开链接）。
动画：更改的行为（即时、溶解、智能动画、移入、移出、推动、滑入、滑出）。
连接层
在任意两层（例如框架、组、形状、文本层等）之间添加连接。要添加连接，请将鼠标悬停在或选择第一层，然后将出现的蓝色节点拖动到第二层。然后将出现“交互详细信息”菜单。如果没有其他连接，第一层将成为新的流起点。
专业提示：如果导航到较远的帧，请选择您的第一层并单击“交互”旁边的“添加”图标。添加后，从下拉菜单中选择要导航到的框架。
即时互动
使用“即时”动画让动作发生而没有移动或效果。这对于在页面之间导航或显示模式/工具提示等操作非常有用。
示例：在页面之间导航
点击一个按钮以导航到带有即时动画的新页面。
示例：显示工具提示
将鼠标悬停在图标上时，打开带有即时动画的叠加工具提示
动画交互
使用动画为您的交互添加动作（溶解、移入、移出、推动、滑入、滑出）。选择不同的缓动曲线并调整时间来自定义动画。
什么是缓动曲线？ 缓动曲线决定动画开始、中间和结束期间的速度。线性动画将始终以相同的速度移动。虽然设置为“缓入”的动画在开始时会较慢，然后会加快。添加缓动曲线使动画感觉更柔和、更逼真。
示例：页面自动滚动
单击按钮以滚动到带有动画的页面的不同部分。注意：将动画时间从 300 毫秒增加到 600 毫秒，以获得更柔和的感觉。
示例：打开和关闭菜单抽屉
点击图标以打开带有动画移动的叠加菜单。然后点击图标关闭覆盖菜单。注意：“关闭覆盖”动作将自动复制“打开覆盖”动画设置（例如移入→移出）。
智能动画交互
使用智能动画来识别不同帧上的匹配层，并对它们之间的差异进行动画处理。这些差异可能包括位置、大小、颜色等的变化。Figma 将根据其名称和层顺序（例如“Container 01”）知道哪些层匹配。
专业提示：在原型模式下通过将鼠标悬停在它们上来检查哪些图层匹配。
示例：拨动开关 ON/OFF
单击OFF 开关以导航到带有智能动画的 ON Switch 帧。然后单击ON 开关以导航到带有智能动画的 OFF 开关帧。注意：动画的不同是圆圈的位置（左→右）和蓝色背景的大小（小→大）。
示例：删除电子邮件
拖动电子邮件以导航到带有智能动画的新帧。然后延迟一段时间后， 导航到带有智能动画的新帧。注意：动画的区别是“电子邮件 02”的位置（视图中 → 视图外）和电子邮件 03-12 的位置（低 → 高）。
专业提示：智能动画层离开或进入一个帧，将其放置在一个帧的视图中，而在另一帧的视图之外。视野外层仍然嵌套在框架中，但由于“剪辑内容”处于打开状态而被隐藏。
固定位置
修复原型中元素的位置，使其在滚动时保持在同一位置。这对于您希望始终显示在视图中的元素（例如顶部/底部导航、FAB、CTA）很有帮助。在“约束”下的设计面板中配置此设置。
示例：固定顶部和底部导航
选择要修复的图层并选择“滚动时固定位置”
添加溢出滚动
溢出滚动允许您滚动浏览原型中的各个帧。这在对具有自己的滚动行为（例如列表、轮播、菜单、表格）的 UI 区域或组件进行原型设计时很有帮助。要使用溢出滚动，您必须有一个框架（不是组），其中嵌套内容“溢出”超出边界。然后，此内容将在打开“剪辑内容”的情况下显示为蒙版。
示例：轮播
选择内容溢出的框架并选择“水平滚动”
示例：菜单
选择内容溢出的框架并选择“垂直滚动”
使用交互式组件
在组件集中的变体之间添加交互。然后，这些变体的实例将遵循它们在任何原型中的预定交互。这对于通用的、有状态的组件（例如切换、按钮、输入）特别有用。提前定义交互可以加快原型制作并减少所需的屏幕数量。不熟悉变体？在Figma Variants 101中了解更多关于它们的信息
专业提示：交互式组件仍处于测试阶段。在此处注册以获取访问权限。
示例：交互式复选框
单击取消选择的图标可更改为带有即时动画的选定图标。然后单击所选图标以更改为带有即时动画的默认图标。注意：使用交互式组件允许用户以任何顺序选择项目的任何组合，而无需额外的原型设计。
示例：交互式按钮
将鼠标悬停在默认按钮上时，更改为具有即时过渡的悬停按钮。然后单击悬停按钮以更改为所选按钮。然后在所选按钮上延迟后，立即转换为默认按钮。
互动游戏
玩……我的意思是……通过使用这些交互式游戏来练习交互式组件。
查看原型
打开演示选项卡以查看原型并与之交互。为了获得更真实的感觉，请选择不同的设备模型。任何有权访问原型的人都可以与之交互并为团队留下评论。
调整原型设置
打开“原型设置”并选择您希望原型出现的设备（例如 Pixel 2、ipad pro 11、自定义尺寸）。此设置将应用于您页面上的每个原型流程。如果为多个设备设计，请在 Figma 文件中使用多个页面。
专业提示：在为手机或平板电脑设计时，确保设计的宽度与您的设备类型相匹配（例如 iPhone 11 = 375px 宽度）。
展示原型
选择流程起点旁边或顶部工具栏中的“演示”图标以演示原型。如果您在一页上有多个流程，请在侧边栏中切换它们。您还可以添加带有注释的评论，以便为团队成员做笔记、提问和留下反馈。在“选项”菜单中配置其他设置。
专业提示：使用键盘快捷键“Z”在“选项”菜单中的不同设置之间切换。
分享
通过在演示工具栏中选择“共享原型”来共享原型。要仅共享原型而不共享设计文件，请在第一个输入中选择“只能查看原型”。
动手学习
阅读原型很棒，但动手学习更好！使用我们的原型游乐场?，了解如何从本文中构建每个原型。包括每个原型的示例，以及有关如何自己重新创建所有交互的分步说明。
获取Figma的（免费）UI Prep Prototype Playground
