Figma入门级教程｜02

▲

欢迎回来，再次更新已经是2021年，距离上次更新整整过去了4个月，不过我答应爱学习的你们，我即将进行周更，如果我再次食言了，请你们一定要记得关注我们的公众号才能找到我吹牛的证据。好了，废话不多说让我们进入今天的正题。

Figma的基础交互手势

和所有的交互软件一样，Figma也具有基础的交互手势功能，比如轻触，拖动，悬停，按下，鼠标经过等，那么接下来我将依次介绍在Figma里如何使用这些交互手势进行页面之间的交互操作。

轻触

让我们从「轻触」说起，通常来说「轻触」就是单击屏幕的意思，现在让我们尝试在Figma中创建一个「轻触」交互操作。

首先让我们创建两个画板，暂且我们命名为「1」和「2」，在「1」画板中绘制一个按钮,我们把这个按钮定义为「轻触按钮」，点击右边箭头所指的原型选项，这时候回到左边的「轻触按钮」上，点击按钮上的＋号，别松手将这根线链接至页面「2」，此时我们就已经完成了一个最简单的交互效果「轻触跳转」。

让我们把项目运行起来，看看效果，是不是很简单呢？

拖动

说完「轻触跳转」，我们来看看下一个交互手势「拖动」，「拖动」的使用场景相对较少，实现的难度相对「轻触跳转」有所提升。

首先我们要为「拖动」交互创建一个有效的场景，我们依旧创建两个画板「1」和「2」，在「1」画板中创建4个列表，将其命名为「列表1」，「列表2」，「列表3」，「列表4」，在「2」画板中将「列表3」与「列表4」进行顺序的调换。

这时候我们需要注意的是，在对控件命名的时候，画板「1」和「2」的名称得相同，比如在画板「1」命名为「Group1」在画板「2」也要命名为「Group1」，这样再进行「拖动」交互时，才能使其发挥「拖动」的效果。

命名检查完毕之后，我们在右边的原型选项中，选择「拖动」即可。

同样让我们把项目运行起来，执行「拖动」的手势，将「列表3」和「列表4」调换位置，就是那么简单粗暴。

模态弹窗

接下来我们来实战一个小需求，制作一个模态化的弹窗。绘制两个画板，左边是一个正常的iphone画板，页面的元素由一个卡片与提交按钮组成，而右边则是一个弹窗的样式。

样式画好后，我们开始对两个页面进行交互的逻辑串联，我们选中提交按钮，选择「交互细节」下的「打开叠加」。并且我们要把背景的蒙层调至合适的参数即可。

如果我们要关闭此弹窗，只需要将「取消」链接到关闭的事件即可。

让我们运行一下项目，模态弹窗效果就是这么简单！

开始案例实战

让我们继续以第一期的AppStore的教程为例，上一次我们只制作了应用商店的列表页面，这一次让我们把应用详情页也相对应的完善一下。

设计的细节，我就不再这里过多的赘述了，我们本次的实战核心是，需要实现点击应用列表能够打开详情的交互，注意是带有智能动画的交互。

这个案例并不复杂，是一个非常入门的交互案例，只需两步即可完成，首先我们选中第一个列表的卡片，进行一个「轻触」操作，打开「智能动画」的选项，这时候我们的第一步操作就算完成了。

接下来是大功告成的最后一步，我们只需要将关闭按钮链接至列表页面即可。

这时候我们来预览康康，有木有很awesome？

欢迎加入Figma大家庭

以上就是本期关于Figma的交互教程，如果你也是一个Figma的资深用户，欢迎加入我们的么Figma大家庭，一起学习，一起进步，让我们下期见。