返回

零基础学Figma

#UI设计通识
59%
进度
0/4
知识点
0
笔记
概述
Figma的基础认识
Figma的初识和学习准备
Figma的注册和安装
Figma的会员说明和教育版使用
Figma的主要界面认识
Figma的基本操作
Figma的工具栏
Figma的属性设置
Figma的图层和编组类型
Figma的字体设置详解
Figma的图片设置介绍
Figma的蒙版设置
资源社区和组件库使用
开始使用Figma设计界面
Figma的矢量应用
关于矢量和位图认识
矢量中的钢笔工具
矢量中的布尔运算
使用Figma绘制图标
Figma的布局功能
约束响应式功能的使用
Figma自动布局基本认识
自动布局中的自适应逻辑
并列布局的自适应类型
自动布局的相互嵌套
Figma中的格线系统
Figma的样式与组件
Figma的图层样式管理
Figma的组件功能入门
Figma的组件变体入门
Figma的变体功能进阶
Figma组件的管理方式
Figma中的变量定义
Figma的交互功能
Figma的交互基础认识
Figma的页面滚动设置
Figma的页面基础跳转
Figma的智能动画应用
Figma的弹窗效果
Figma交互中的变量和条件
Figma 的插件部件
Figma的插件认识
Figma中的小部件

自动布局的相互嵌套

酸梅干超人 编辑于 2025-01-2231人正在学
00

自动布局处理的是编组层和下级元素的排版关系,下级元素可以是普通编组、矢量图层、图片、文本、组件,也可以是 —— 其它自动布局。

也就是自动布局是可以进行上下嵌套的,而它们也可以实现自适应的效果。

比如做一个横向标签列表,自动布局得宽度为自适应 hug,它下级的每个标签可以由自动布局实现,且每个标签作为自动布局编组的宽度设置也为 hug。

当修改标签内容时,标签本身的宽度会调整,然后就会影响上级编组的宽度。

以及在上一小节中演示的双列商品卡片,左右两个卡片自然也可以使用自动布局。而卡片内下级包含图片和信息两个模块,图片只有一个图层宽度使用Fill即可,而信息模块则包含多个图层,可以继续使用自动布局创建,并将编组的宽度设置为 Fill。

再比如一个完整的动态卡片,包含用户栏、内容栏、操作栏三个栏目,这个卡片的宽度会随场景调节,高度则根据内容适应,那么卡片的自适应编组宽度为 Fixed,高度为Hug。

下级内容中,用户栏宽度会变化,高度固定,所以创建自动布局时宽度基于父级组件为 Fill,高度则为 Fixed。下级的头像、用户名、关注不需要自适应,所以宽和高都为 Fixed。

内容栏中,包含的内容高度不固定,所以创建自动布局时宽度基于父级组件为 Fill,高度根据下级模块的高度自适应 Hug。下级内容的宽度都使用自适应Fill,文本框高度 Hug,图片高度 Fixed (如果有的话),就能得到如下的结果。

底部栏操作栏和用户栏逻辑一致,那么最终我们实现的动态卡片,就可以根据修改宽度的时候下级内容自动适应,修改动态内容和高度时,整个卡片的高度也会自动调节。

应用这种嵌套的逻辑,我们可以将绝大多数组件自动布局化(有必要的话),方便我们在设计过程中调用并修改尺寸、替换内容。

但因为自动布局嵌套的层级众多,刚上手时容易混乱,所以新手不要在创建第一个编组时就应用自动布局,而是应该先把组件的样式完全设计完成以后,再从下往上创建自动布局,并逐一完成相关设置和功能检查,确保实现预期的效果。

点赞
收藏
学会
19100031
下一篇: Figma中的格线系统
Figma中提供了格线系统的创建,即属性面板中 Layout Grid。但要注意的是,Layout Grid 只有在选中 Frame和 Autolayout 编组层时会出现,其它图层类型中没有。 Figma 提供了三种格线系统类型,分别是: Grid:一般网格 Columns:竖向栅格 Rows:横...
笔记 (0)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞