首页 > 文章 > 软件教程

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

来源：17golang原创

时间：2026-10-18 11:25:18 495浏览收藏

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，就还没有建立内容驱动尺寸的外框。功能入口名称和位置可能随界面语言调整，以当前所选对象的布局区域为准。

设计编辑器中 Card 图层包含标题和说明，右侧选中纵向自动布局 — 图1：自动布局入口操作示意图；确认两个文本属于同一个 Card。

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

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

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

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

Card 选中状态显示宽度 320 Fixed、高度 Hug、内边距 16 和间距 12 — 图2：卡片尺寸操作示意图；固定宽度与内容驱动高度分别设置。

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

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

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

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

说明文本选中并在右侧显示宽度 Fill container、高度 Hug，画布中文段落换行 — 图3：文本尺寸操作示意图；文字占满可用内宽，但不固定段落高度。

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

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

读者操作	应看到的变化	不应出现的变化
说明由一句改为上面的长段落	说明换行，外框变高	文字伸出右边或压到边框外
将长说明改回短句	卡片自动变矮，上下边距保留	留下旧固定高度造成的大片空白
选中副本外框，只把宽度改成 260	行数随可用宽度变化，高度重新计算	字号跟随缩小或需要手动补高度

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

同一编辑器画布中展示短文卡、长文卡和窄宽长文卡，卡片高度不同而内边距一致 — 图4：结果验收示意图；比较内容长度和宽度变化后的预期排版，不代表实测记录。

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

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

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

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

选中 Card 外框的右侧高度菜单显示 Hug contents，左侧树明确标出两层文本 — 图5：异常修正操作示意图；先找出固定高度所在层，不以放开裁切代替修复。

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