Figma 怎样让卡片内容变化时自动伸缩

Figma 官方地址：https://www.figma.com/。进入 Figma Design，并在自己可编辑的练习文件中操作。

Figma 卡片要随文案增减自动变高，不能只把外框拉大。最小设置是：外层采用纵向 Auto layout，宽度先固定，高度设为 Hug contents；内部文本宽度设为 Fill container，高度随文字伸缩。这样宽度决定换行，文字决定高度，卡片再包住文字。

下面用“标题＋说明”两层文字做一张练习卡。预期结果是：说明变长时卡片向下生长，删短后收回；宽度从 320 改成 260 时，字体不缩小、段落重新换行、内边距不变。这是供读者复现的验收目标，配图均为 ImageGen 原创界面说明图，不是真实截图或已经执行的测试记录。

1. 把标题和说明放进同一个自动布局框

在可编辑的 Figma Design 练习文件中，用文本工具分别创建标题“交付提醒”和说明“请在提交前检查附件。”。先不加独立背景矩形；稍后直接给外框添加填色，避免把背景也排进内容队列。

在左侧图层列表同时选中这两个文本层，按 Shift+A，也可以右键选 Add auto layout。Figma 会创建包住所选图层的自动布局 Frame。将它命名为 Card，在右侧布局区域将排列方向选为 Vertical，确保标题在上、说明在下。

继续前应看到：左侧 Card 展开后包含两个文本子层，右侧出现自动布局控制。若只是选中了两个互不相关的层，或仍是普通 Group，就还没有建立内容驱动尺寸的外框。功能入口名称和位置可能随界面语言调整，以当前所选对象的布局区域为准。

2. 卡片宽度固定，高度交给内容

选中外层 Card，在右侧宽度字段设置 320，保持 Fixed width；高度的尺寸模式选择 Hug contents。把四边 Padding 统一设为 16，项目间 Gap 设为 12，使用数值间距，不选自动分布。再添加白色 Fill 和浅灰 Stroke，让卡片边界容易辨认。

此处不要给高度输入一个“看着合适”的数字：手动输入尺寸或拖动某一方向的边框，可能让该轴变为 Fixed。Hug 的目标不是维持旧高度，而是按当前内容和间距重新计算外框。

此时的中间状态是宽度受控、上下留白清楚；文字尚未设置完成，暂时不要因它超出外框而继续拉宽 Card。顶层画布上的卡片没有自动布局父容器时，宽度没有 Fill container 选项是正常的，不需要为了出现该选项再套无意义的框。

3. 让文本按卡片内宽换行

在图层列表展开 Card，分别选中标题和说明文本，设置宽度为 Fill container，高度为 Hug contents。有些界面以文本的自动高度设置呈现相同目标：宽度受到约束，高度根据内容增长。不要保留两轴固定的文本框，也不要用只向右增长的 Auto width 来承载长段落。

把说明替换为“提交前请检查附件名称、版本和接收人。若附件需要补充说明，请在同一张卡片里写明处理方式。”。这段文字只是练习输入，不是系统提示。应当看到说明在左右内边距之间换行，文本框和 Card 一起变高，标题与说明仍保持 12 的间距。

如果 Card 的高度 Hug 自动变成 Fixed，先检查子层有没有把高度也设为 Fill container。同一轴不能既要求父框跟随子层，又要求子层填满父框。本例只让文本在水平方向 Fill，在竖直方向随内容伸缩。这个横竖分工比同时把所有下拉框设成 Hug 更重要。

4. 用三个变化确认伸缩规则

先复制练习卡，保留一张短文卡作参照。然后在另一张卡里逐项改变内容；每次只改一个条件，观察 Card 而不是只看文本光标的位置。

最后把副本宽度恢复为 320。不要用 Scale 工具来做这个测试，缩放整个对象会连字体一起变，不能说明换行规则是否正确。不同字体、字号和行高会得到不同高度，所以不把某个高度数字当成通过标准；看边界、换行和间距是否保持即可。

5. 伸缩失效时沿图层逐层修正

卡片不长高，先选 Card 看高度是否仍为 Hug；文字有更多行但文本框没变高，再选说明检查是否固定高度或设置了截断。仅取消 Clip content 可能让溢出内容露出来，并不等于尺寸已经正确，应该修正实际承担高度的那一层。

如果标题和说明之间又包了一个 Content 框，就检查这层：它也需要参与自动布局并让高度随内容伸缩，宽度按父框可用空间设置。不要只改最外层而忽略中间固定高的容器。若某层使用 Ignore auto layout、脱离正常布局，它不会像普通子层那样参与排列，应先在练习副本中恢复正常布局再看结果。

需要把 Card 放进更大的列表时，外部父框也要有自动布局，Card 的宽度才可以改为 Fill container；高度仍由卡片自身内容决定。本篇的 320 固定宽度只是便于独立练习，不是要求所有卡片永远固定宽。

收尾时保留一组短文与长文样本，在文件备注记录：纵向排列、四边 16、间距 12、外框宽 320 高 Hug、文本宽 Fill 高随内容伸缩。再做一次删短文案的反向检查。对于这张基础卡片，不需要插件，也不需要把设计稿导出为代码；以后增加图片、按钮或最大高度限制时，应重新检查新子层的尺寸约定。

相关官方帮助

自动布局入口：https://help.figma.com/hc/en-us/articles/5731482952599-Toggle-on-auto-layout-in-designs

父子尺寸规则：https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout-in-Figma

文本尺寸与缩放：https://help.figma.com/hc/en-us/articles/27378154668951-Adjust-text-dimensions-and-resizing

嵌套布局示例：https://help.figma.com/hc/en-us/articles/31441443713047-Combine-vertical-horizontal-and-grid-auto-layout-flows