品牌型号：联想GeekPro 2020

系统：Windows 10 64位专业版

软件版本：Figma入门版

Figma的自动布局是一项十分实用的功能，可帮助设计师快速完成页面的排版，从而提高工作的效率。除了快速排版外，如果画框内有新增的图层，自动布局功能还能自动调整排版，让版面重新变得整齐有序。接下来，一起来学习下Figma的自动布局怎么做，以及Figma怎么创建按钮的相关内容。

一、Figma的自动布局怎么做

自动布局功能是Figma根据所选画框内的元素排列特点，自动完成排版的功能。除了自动排版外，自动布局功能还提供了实用的布局工具，可进行垂直、水平布局等调整，让画框内的元素排版更符合需求。接下来，我们通过一个简单的例子教大家Figma的自动布局怎么做。

1、先使用Figma底部的插入图形工具绘制一个矩形，让矩形充当界面背景。

2、在矩形内部添加文本，为了展示自动布局的效果，我们会添加两个文本框并将文本框不规则地摆放到矩形内部。

3、由于自动布局功能需在画框内应用，因此我们需要先使用Figma底部的画框工具，框选矩形与文本并构建画框。

4、构建画框后，如图4所示，在Figma右侧的设计面板中会出现“布局”功能，点击布局功能右侧的“自动布局”图标，即可启用自动布局功能。

5、自动布局功能启用后，Figma会自动对画框内的元素进行自动排版。如图5所示，可以看到矩形内的文本已经自动完成水平对齐。

除了自动完成排版外，自动布局功能还提供位置、方向与间距、对齐、边距等布局功能，可供我们手动选择应用。

比如图6所示，我们可以使用“垂直布局”功能将原来水平对齐的文本调整为垂直对齐。

除了水平、垂直对齐外，如图7所示，我们也可以运用对齐功能进行居中、左对齐、右对齐等排版调整。相对于手动调整布局，自动布局功能提供的预设功能更好用，可以快速完成图形位置、间距等属性的调整。

‌二、Figma怎么创建按钮

按钮是UI界面中的常用元素之一，常用于页面之间的跳转。接下来，我们一起来学习下Figma怎么创建按钮。

1、Figma创建按钮最简单就是直接使用组件库资源。如图8所示，在Figma左侧的菜单功能中切换“资源”，并输入所需的组件名称。当然，我们也可以直接使用下方的组件库查找按钮资源。

2、找到按钮资源后，如图9所示，点击按钮组件，在打开的详情面板中查看并修改组件的属性。比如本例的按钮标签（Label）可修改为所需的文本内容，本例输入“确认”字样，用于制作确认按钮。

属性修改完毕后，点击插入组件（insert instance），即可在画板中插入确认按钮。

3、插入按钮后，继续制作点击按钮后跳转的页面。如图10所示，本文制作了个人信息填写页面作为例子。

4、完成页面的制作后，如图11所示，在按钮以及跳转页面上都添加画框，用于后续制作交互动效。

3、完成画框的绘制后，如图12所示，点击按钮画框，在其边框处会出现一个带“+”的圆圈，点击该圆圈，并将其连接到跳转页面的画框上，即创建了两个画框之间连接。

4、创建了连接后，如图13所示，在弹出的交互动作设置面板中，将触发设置为“单击”，动作设置为“导航到”、目标设置为“画框2”，即可制作点击“确认”按钮后跳转到个人信息填写页面的交互动效。

三、小结

以上就是关于Figma的自动布局怎么做，Figma怎么创建按钮的相关内容。Figma自动布局功能可快速、自动地将画框内的图形、文本排列得整齐有序，后续如果有新增的图形、文本等元素，自动布局功能也能根据现有以及新增的内容，将元素重新排列整齐，让设计师们的排版工作变得更简单、有效。

作者：泽洋