应充分利用auto layout嵌套能力：一、建垂直外层容器设主轴垂直与项目间距；二、嵌套水平按钮组并设等距居中；三、标题用hug content、正文用fill container并设自动换行；四、图标文字标签微型嵌套；五、合理设置约束适配宽度变化。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您希望在Figma中构建结构清晰、内容自适应、易于复用的卡片组件，但手动调整间距、对齐与尺寸耗时易错，则很可能是未充分利用Auto Layout的嵌套能力。以下是实现高质量卡片布局的具体操作步骤：
一、创建外层垂直卡片容器
外层容器负责定义卡片整体结构方向与垂直节奏，确保标题、正文、操作区按逻辑顺序堆叠，并随内容增减自动伸缩高度。
1、使用矩形工具（R）绘制一个空白框架，或直接拖入一个占位图/文本作为卡片雏形。
2、选中该框架，按下 Shift + A 启用自动布局。
3、在右侧属性面板中，将主轴方向设为“垂直”，交叉轴对齐设为“左对齐”或“居中对齐”（依设计规范而定）。
4、设置上下左右“填充”值（如16），确保内边距一致；启用“项目间间距”并输入固定值（如12），形成视觉呼吸感。
二、嵌套内层水平按钮组
卡片底部的操作按钮需保持等距、居中且横向弹性排列，独立于卡片正文内容变化，因此必须通过嵌套自动布局隔离控制逻辑。
1、在卡片容器内插入两个文本图层（如“查看详情”“分享”）或图标+文字组合。
2、同时选中这两个图层，再次按下 Shift + A 创建内层自动布局。
3、将内层容器的主轴方向设为“水平”，交叉轴对齐设为“居中”，确保按钮垂直居中对齐。
4、点击两按钮之间出现的蓝色“+”号，输入间距值8；若需按钮等宽撑满，可对每个子图层启用“填充容器”并设最小宽度。
三、让标题与正文分别响应内容长度
标题通常短而关键，需紧贴内容宽度；正文可能长短不一，需支持换行与高度自适应，二者应采用不同尺寸模式以避免相互挤压。
1、选中标题文字图层，在宽度设置下拉菜单中选择Hug Content，使其宽度严格包裹文字。
2、选中正文文字图层，在宽度设置中选择Fill Container，使其水平延展至卡片内边距边界。
3、为正文图层设置最小高度32，并勾选“自动换行”，确保单行与多行状态均显示完整。
四、添加带图标的状态标签
标签常由小图标与文字组成，需紧凑排列、统一基线、整体可复用，适合用微型嵌套自动布局封装。
1、先放置一个图标（SVG或Lottie图标），再在其右侧添加文字（如“已发布”）。
2、同时选中图标与文字，按下 Shift + A 创建新自动布局容器。
3、设主轴为“水平”，交叉轴对齐为“中心”，图标宽度固定为16，文字设为“Hug Content”，整体容器设左/右填充各8。
4、将该标签容器拖入卡片顶部区域，置于标题上方，其尺寸与间距将完全脱离外部卡片容器的主轴约束。
五、应用约束以适配不同卡片宽度
当卡片被放入网格或响应式画板中时，宽度可能动态变化，需通过约束确保内部元素不溢出或塌陷。
1、选中外层卡片框架，在约束面板中将水平约束设为“左中右”，使其在父级中居中且随父级缩放。
2、对标题图层，将垂直约束设为“顶”，水平约束设为“左”，避免随卡片拉宽后错位。
3、对正文图层，将垂直约束设为“顶底”，水平约束设为“左中右”，使其在高度增长时仍保持填满可用宽度。
