好的工具软件的出现是对使用者的解放！

 

|全文目录

• 01.设置
• 02.触发器
• 03.触发方式
• 04.过渡
• 溢出行为

 

你可以在 Figma 中设计并且制作原型，更快地将想法转化为产品。

Figma 的原型功能允许你创建交互式流程以模拟用户的交互方式。

Figma原型制作的效果相比其他专门制作原型的工具来说还是很优秀的，说到制作原型工具必须要先说说我们的AE来对比一下：

 

AE可以说是我们制作原型效果工具的最强大、最完全可控、电影级的工具，当然他的致命弱点也很突出就是交互性，这就限定了它只能用来制作观看型的原型，当然效果确实可以达到以假乱真的效果。其次我们可以对比下其他交互型的原型工具，比如principle、Framer X、origamr、flinto、kite、ProtoPie

这些交互式的原型工具各有秋千，制作使用方式上也各不相同：非时间性编辑的，也有时间线编辑的，混合的、甚至需要代码制作的，今天就不展开来讲（如有急需可以私信我），我们就说一点，这些工具都比不上，那就是连贯性，比如你在Sketch里面做好页面，需要另外打开这些原型工具去导入再去做动态效果，这无疑是给我们工作制造了非连续性的困难，这些也不是我们今天对比的主要竞品。

接下来我们要说的是Adobe XD（以下简称XD）就是Adobe公司新出的应用产品制作工具，这个软件和Figma相比确实有很多相似之处，其他人应该也做过分析，但是我们要说的是Figma软件这哪些方面做得比他好，

 

大家都知道这两款软件都是国外的，当然目前没有墙的问题，都是可以正常登录并使用的，不过XD需要你的账户为非大陆账号，就是如果你的Adobe当时注册的时候为大陆账号的你是用不了插件等功能的，这一点也比较重要，很多同学下载好后登录自己的Adobe账户发现没有插件功能，不要觉得是你下载的软件版本问题，你可能下载的就是非阉割正常的版本，只是你的账号问题。

 

其次，Figma和XD这两款软件目前也都是可以免费使用的，Figma是团队库方面需要收费，XD按照Adobe的对待这个软件感觉这个软件应该不会免费太久，后续应该会收费的（不能确定）。

 

接下来就是线上问题，这两款软件都是需要联网使用的，Figma甚至可以只用浏览器就可以了。这也势必会导致一些顾虑，比如断网情况，还有一些项目保密问题，XD这方面还好点，首次登陆后可以完全本地使用，Figma也有客户端，不过要使用Figma的灵魂难道不是它的在线协同的嘛，虽然这被一些人说这个是伪命题，设计师使用软件设计界面的时候都是单人完成固定页面的，你只需要可以在线评论等功能就可以了。但是我觉得这个还有有必要的，就是说你可以觉得他没有用，但是这个功能还是需要有，这个功能的使用场景还是有的。

 

好的工具软件的出现是对使用者的解放！

 

接下来我们讲讲重点原型制作

 

01

设置

首先进入原型模式Prototype

在不选中框架的情况下，原型模式下的一些设置可以看到

设备：可以选择你需要展示的设备有手机、pad等，默认None是没有模型机的

背景（预览原型的时候模型机后面的背景）：可以根据需要设定

开始的页面：一般设置为首页就可以

02

触发器

制作完页面后就可以根据页面跳转制作原型了，直接点击需要制作热点的位置：比如button会有一个白色蓝边的圆点在选中的对象右边居中的位置，直接拖动要需要跳转到的页面就完成了连线，原型跳转就制作好了。

 

当然了接下来你可以对这个跳转进行一些设定，比如是点击还是长按等

这个设定我们叫他触发器

每个触发器如何工作的请查看以下说明：

On Click

这是最常用的触发器，只有在明确单击（桌面端）或轻击（移动端）对象后才允许执行操作。打开菜单，导航到另一个页面，关闭警报或屏幕上的提示都是此交互的重要用例。

On Drag

这个触发器是新增的，通过长按触发动作，结合使用弹窗等可以模拟实现3D touch效果，

While Hovering

此触发器不需要主动触发对象/热点。相反，用户只需将光标悬停在热点上即可执行操作。当用户将光标移离热点时，它们将返回到原始框架。

这非常适合模拟工具提示，当光标位于图标、图像、链接或其他对象上时显示消息，或者你不需要将用户带离当前框架的其他交互。

提示

在为移动设备构建原型时，请使用 While Hovering Interaction。虽然这些在计算机上模拟移动设备时效果很好，但在使用实际移动设备时，这些设置将更改为 On Tap 操作。

While Pressing

只有在单击鼠标或触控板（在桌面上）或直接按下对象（在移动设备上）时才会显示目标框架。释放后，用户将再次显示原始框架。

这非常适合模仿临时互动或状态变化；比如通过长按查看预览，或导航下拉菜单。

Mouse Triggers

根据在查看原型时如何使用鼠标或任何触摸手势，还有许多可用的触发器。

Mouse Enter

这允许在鼠标移入热点区域时显示目标框架，这类似于 While Hovering Trigger 的工作方式; 但与 While Hovering Trigger 不同的是当用户将鼠标移动到热点之外时，用户不会自动返回到原始框架。这对关闭按钮很有用。

Mouse Leave

当用户的鼠标离开热点区域时，此触发器显示目标框架。这非常适合模拟屏幕上的提示，例如当字段尚未完成时发出警报或者检查信息。

Mouse Down (Touch Down)

这会在首次按下鼠标时触发目标框架 - 或者对于移动设备，当用户的手指首次触摸原型内的对象时触发。

Mouse Up (Touch Up)

当释放鼠标时触发目标框架 - 或者当用户的手指停止触摸原型内的对象时触发移动设备。

提示

你可能希望同时使用 Mouse Down 和 Mouse Up 触发器来模拟导航下拉菜单。你可以使用 Mouse Down Interaction 显示 Overlay，然后将 Mouse Up Interaction 应用于 Overlay 中的菜单项。释放鼠标后，用户将被带到相关的框架。

After Delay

延迟触发器基于用户在当前框架上的时间，这只能应用于顶级框架，而不是特定图层或对象。

这允许你在用户在给定框架上延迟一定时间演示原型或显示屏幕提示。这可用于模拟聊天消息、通知警报或自动指向其他页面。

03

触发方式

一旦定义了触发器，就可以确定原型的位置和方式。

触发方式有以下几种

None

当不需要动作时使用它。

导航 Navigate

这是两个框架之间的普通过渡，这是最常见的动作类型。

打开叠加Open Overlay

这将打开当前框架上方的目标框架，这可用于从设计中的弹窗显示、工具提示或警报

这个可以Close Overlay一块看，这两个是相对的，一个是打开一个是关闭。

替换 Swap

当从普通框架中的热点触发时，替换的行为与导航类似。如果将替换应用于叠加层中的热点，它将使用新的框架替换当前叠加层。新叠加层将保留与原始叠加设置相同的叠加设置。

提示

使用替换不会将该框架添加到原型的历史记录中。通过允许你返回上一个屏幕而不是之前的叠加层，使用 Back 操作时，这将为你提供更大的灵活性。如果你希望用户能够使用 Back to Previous Screen 操作在叠加层之间移动，则需要使用 Navigate 选项。

返回Back

这允许你回到进入当前页面之前所在的页面，这非常适合模拟原型中的 Back 按钮。（一般返回按钮必用）

关闭叠加Close Overlay

这允许你关闭或关闭原始框架上出现的任何叠加层，这非常适合模拟忽略屏幕提示或警报。

Open URL

这允许你将用户定向到原型之外的 URL，这非常适用于外部链接或主导航中不可用的其他资源。选择后，你可以在提供的字段中输入 URL：

提示

单击 Open URL 热点时，URL将在新选项卡中打开。如果这是指向外部网站的链接，将通知用户他们将离开Figma。

你可以使用提供的复选框使下次打开时跳过此跳转页面：

注意：此设置仅保存在当前设备上。

04

过渡

转换决定了原型如何从一个框架转换到另一个框架，这使你可以模拟设计在真实环境中的外观和响应方式。

转到原型选项卡中的 Animation部分，然后使用下拉列表设置过渡：

即时 Instant

当与热点交互（点击，悬停或按下）时，即时转换将立即显示目标框架。

淡入淡出 Dissolve

你可以确定转换的持续时间（完成所需的时间），以及应用缓动曲线。

提示

Easing 允许你减慢转换的速度。你可以选择缓慢开始（Ease In），缓慢结束（Ease Out）或应用到开始和结束（Ease In and Out）。

移动 Move

移动过渡将目标框架滑动到原始框架上方的视图中，你可以确定框架进入的方向，以及速度（持续时间）。

滑动 Slide

幻灯片将目标框架移动到视图中，类似于移动行为，但对原始框架在两种行为中的处理方式不同。区别在于滑动行为中的原始框架将慢慢偏移，而移动行为中的原始框架保持静止。

除了过渡，你还可以调整以下设置：

• 方向（Direction） 允许你选择目标框架进入的方向。你可以选择 Left、 Right、 Top 和 Bottom。
• 持续时间（Duration） 确定转换完成所需的时间。
• 缓动（Easing） 允许你在开始、结束或开始和结束时减慢转换速度。
• 保留滚动位置（Preserve scroll position） 允许你在两框架之间移动时保持相同的滚动位置。

 

---

溢出行为

 

如果你正在构建更复杂或更高保真度的原型，那么你可能需要使用 滚动溢出 Scrolling Overflow。

这允许你模拟更高级的用户交互；比如横滑导航、照片墙或互动地图，以及简单地允许用户向下滚动内容页面。

通过滚动溢出，你可以定义用户如何查看超出设备屏幕的内容。

滚动溢出仅适用于超出框架边界的内容。

以下是使用滚动溢出的几种方法：

• 向下滚动一个冗长的内容页面。
• 从左向右滚动以在横滑中的元素之间切换。
• 平移/滚动以查看交互式地图。

要构建更多功能性和逼真的原型，你可能希望将设计中的某些元素保留在固定位置。

例如：你可能希望将移动设备的状态栏和导航菜单固定到屏幕的顶部和底部。

通过将约束应用于对象、组或组件，你可以确保它保持不变，而原型的其他元素响应滚动溢出行为。

你需要处于设计模式才能更改对象的布局约束。

1. 在画布中选择对象、组或组件。
2. 在属性面板中找到 Constraints 设置。
3. 选择该元素的相关布局约束。

 

1. 对于状态栏，这将固定到顶部。而导航菜单可能被固定在底部。注意有一些布局约束不适用于固定对象，这些将在布局约束设置中显示为灰色。