【Figma学习】之Auto Layout自动布局

咸鱼鱼干

已于 2025-02-24 13:51:05 修改

阅读量1.5k

点赞数 11

分类专栏：产品经理文章标签： figma 学习

于 2025-02-20 13:42:02 首次发布

本文链接：https://blog.csdn.net/weixin_44849501/article/details/145707763

版权

产品经理专栏收录该内容

2 篇文章

订阅专栏

Figma学习之自动布局

Auto Layout自动布局

学习资源：B站博主"设计师凯文CreativeKev"，下面每一节均放置学习视频链接

学习链接：点击进入

Auto Layout自动布局

自动布局用来指定元素之间的间距和排列方式，可以帮助实现组件、页面的响应式涉及，可以用到自动布局的地方有很多。比如，实现按钮长度随按钮文字变化而变化、控制页面上组件、模块之间的间距

制作基本的按钮

使用自动布局，在制作按钮时，无需文字+背景长方形的形式来组成一个按钮，只需要选择文字，然后快捷键Shift + A便可添加自动布局，因为自动布局的本质是一个画框，下面时详细的步骤：

边框+颜色填充 ，"T"输入文本后，快捷键Shift + A实现自动布局，即给文本加边框，然后即可对其进行颜色填充；
间距调整，Auto Layout中调整高度和宽度，如左右间距24，上下间距8
外观调整 Appearance（外观）下调整边框圆角

效果图如下

注：1.长度随效果字长自动扩展的原因是在“Auto layout”下的宽度设置中，默认设定为"Hug content”意思是内容决定宽度，如果我们想要固定宽度的按钮，需选择“Fixed width（固定宽度）”即可。
2.取消自动布局，快捷键Option + Shift+A（Mac系统），Alt + Shift+A（Windows系统）；或右键选择“Remove auto layout” 或者点击Auto layout图标即可取消自动布局

卡片轮番

自动布局还可以帮助我们把多个元素按照规定的间距、布局组合起来，下面以卡片轮番为例：
1.素材导入：选择一整图片并插入文本介绍!如下图
在这里插入图片描述
2.添加自动布局：同时选中图片加文本，快捷键Shift + A添加自动布局
3.间距调整：在"Auto layout"下调整自动布局画框中的元素的间距（可以直接写数值），也可以进行拖拽调整大小
在遍这里插入图片描述
4.嵌套的自动布局：如果元素之间的间距不相等，即可添加嵌套的自动布局，比如选择产品名称和价格，使用快捷键Shift + A给两者单独添加自动布局，然后再来调整他们之间的间距（如下图所示，左边的图层显示Frame1和Frame2 两个自动布局，想要对哪个图层进行操作，点击后在进行操作即可）
在这里插入图片描述
【补充布局操作介绍】1.W表示宽度H表示高度，均可选择“ Fixed width（固定）”以及“Hug contents（随内容进行变化）”，这里卡片选择固定宽度；2.3个箭头用来设置自动布局中元素的排列方向（纵向排列、横向排列、自动换行）；3.对其方式；4.边距；5.定义4个不同的边距（或者在画板上把鼠标放置卡片，当出现阴影所示即可继续宁拖拽调整）在这里插入图片描述
5.添加背景颜色：“Fill”中进行背景的填充

在这里插入图片描述

6.添加收藏图标：在卡片的右上角放置收藏图标，将其直接拖拽到卡片中，此时位置居中（前面设置过），如果想要自由调整自动布局中某一元素的位置，直接选中该元素，点击右侧菜单栏中的“Position”旁的图标“lynore auto layout”即对该元素忽略自动布局，之后即可拖拽调整相应的位置在这里插入图片描述

7.卡片横向排列：全选卡片，添加自动布局Shift + A->Auto layout下“->”图标->间距数值调整，如果希望在交互原型中实现横向滑动的效果，需要将自动布局的画框进行拉回，如下，因为只有内容超过画框范围，才能实现横向滑动；如果希望在轮番中在添加一个卡片，只要点击其中一个元素，Command + D（MAC）/Ctrl + D（Windows）即可复制选中的卡片
在这里插入图片描述
【插入图片操作介绍】Fill下的图标->Custom下的图片选择Upload from computer进行插入图片的选择。

8.卡片表头：两个元素-文字和箭头按钮，选中两个元素Shift + A添加自动布局，随后进行边距的设置，为了凸显背景图片，间距设置如下，图片插入如上面所述，实际的手机页面宽度可能会变化，这个卡片的宽度也会随之变化，如果希望文字和按钮两个元素始终各自靠两边对齐，而不是固定宽度，需将数值改为Auto，这样的结果就是无论宽度怎么更改，两个元素均在两侧，整体效果如下图
在这里插入图片描述

9.将页面的其他部分均放到屏幕内

Shift + A添加自动布局，然后调整他们的间距

页面添加自动布局的好处就是当需要一个新的模块时，可以直接添加进来，页面各间距保持原有的且不用手动调整如下图所示
在这里插入图片描述
如果想要页面实现响应，可删除最外侧的手机屏幕画框，直接以自动布局作为页面（屏幕），填充白色，调整边距，勾选Clip content（裁剪内容）隐藏超出屏幕之外的内容，然后依次选中每一部分，右侧进行宽度（Fill container填充容器）即可实现响应，然后继续宽度（Add min width），设置最小尺寸320，再次点击Add max width设置最大尺寸480，这样屏幕尺寸即可限定在固定范围内
在这里插入图片描述

功能快捷键

操作	Mac	Wondows
添加自动布局	`Shift` + `A`	`Shift` + `A`
AI自动布局	`Ctrl` +`Shift` + `A`	`Ctrl` +`Alt` +`Shift` + `A`
取消自动布局	`Option` +`Shift` + `A`	`Alt` +`Shift` + `A`
(在画板上)调整所有边距	`Option` +`Shift`鼠标点击拖拽边距	`Option` +`Shift`鼠标点击拖拽边距

持续记录中~~~~~~~~~~~~