品牌型号：联想GeekPro 2020

系统：Windows 10 64位专业版

软件版本：Figma入门版

交互动效是UI界面设计中必不可少的部分，通过设置点击、悬停、延迟等触发行为，可以让UI界面显示不同的内容或跳转到不同的页面。作为一款优秀的UI界面设计软件，Figma提供了简单而实用的交互设计功能，可帮助我们快速创建交互动效。接下来，一起来学习下Figma怎么做虚线框，以及Figma怎么做交互动效的相关内容。

一、Figma怎么做虚线框

在Figma绘制图形时，很多都是默认使用实线线条，如果要做虚线框的话，怎么才能将实线转变成虚线？其实Figma做虚线框的操作很简单，只需要进行简单的描边属性设置，就能轻松绘制。接下来，一起来学习Figma怎么做虚线框吧。

1、先使用Figma底部的插入图形功能，在画板上绘制一个矩形，此时矩形的四条边默认使用实线样式。

2、选中矩形，如图2所示，在Figma右侧的设计面板中添加描边预设。先保持默认的描边预设不变，待后续将矩形的实现调整为虚线后再设置预设效果。

3、展开如图3所示的Figma线设置功能。线设置面板提供了描边样式、连接、斜度的属性设置选项。

4、如图4所示，展开描边样式选项，并将选项切换至虚线（Dash）。

将描边样式切换为虚线后，如图5所示，画板中矩形的四条边都会转换为虚线，此时，我们就完成了虚线框的制作。

5、如果想让虚线框的效果更明显，如图6所示，可以将虚线选项的数值设置得更高，比如本例设置为6，虚线框的效果就会变得很明显。

二、Figma怎么做交互动效

交互动效在UI界面设计中至关重要，好的交互动效能提升用户的操作友好度，让界面的使用体验更好。接下来，一起来看看Figma怎么做交互动效。

1.交互动效会涉及到两个页面之间的跳转，因此在设计交互动效前，需要先进行页面的绘制。本例会简单制作一个“提交”按钮的交互动效。如图1所示，先绘制一个小矩形，并将其圆角半径设置为6，让其外观更符合现在流行的圆角图标设计。

‌2、选中矩形，并使用Figma设计面板中的填充功能，为矩形填充绿色。

3、完成颜色的填充后，如图9所示，在矩形内部插入文本框，并输入“提交”字样。然后，调整文字的位置，使其位于矩形的中间位置。

4、由于Figma的交互动效需要在画框之间设置，因此我们需要先为制作的图形添加画框。如图10所示，使用Figma底部的画框工具，将矩形与文本同时框选在一个画框中。

5、重复以上操作，如图11所示，绘制第二个画框的内容，即点击“提交”后跳转的页面内容。两个页面的内容需要分别放置在不同的画框中，后续才能添加交互动效。

6、如图12所示，在Figma左侧图层面板选择画框1图层，同时在Figma右侧切换“原型”选项卡功能。此时，“原型”选项卡并未出现交互设置功能，需要按照面板下方的提示，为两个画框创建新的连接后方可进行交互的设置。

7、点击选中画框1后，如动图13所示，画框中会出现一个带“+”的圆圈，点击圆圈，并将其连接到画框2上，即可完成连接的创建。

8、创建连接后，如图14所示，在弹出的交互设置面板中，进行触发、动作、目标页面等内容的设置。比如本例中，将触发设置为“单击”，动作设置为“导航到”，目标页面设置为“画框2”，可制作单击“提交”跳转到页面2的交互动效。

最终制作的交互动效如图15所示，单击“提交”后，页面会自动跳转到画框2的内容。

三、小结

以上就是关于Figma怎么做虚线框，Figma怎么做交互动效的相关内容。Figma可通过设置描边样式的方法，将图形的实线线条设置为虚线，来制作虚线图形。Figma的交互动效是通过画框连接的方式添加的，我们只需为图形添加画框，就能自由地设置各种交互动效。

作者：泽洋