Figma 商品卡片增加促销角标后，为什么把图片和价格挤开了？

先确认角标的版式职责

在商品卡片的测试副本中，先记录卡片外框、图片区域、价格区域和角标所在的父容器。重点看角标是否与图片、标题、价格处于同一个 Auto layout 流中；如果它是普通流内子图层，它的宽度和高度会参与同级元素的布局计算。

如果角标需要占据自己的栏位，例如“限时优惠”必须推动内容下移，那么让它留在流中是合理的。若角标应贴在图片角落，同时图片和价格保持原有位置，它通常不应以普通流内子图层的方式占用空间。不要先改多个属性，否则难以判断是哪项改变了结果。

1. 复制一个商品卡片作为测试副本，保留原卡片不动。
2. 记录当前图片、价格和角标的父容器，以及该容器的方向、间距、内边距、对齐和尺寸模式。
3. 分别制作窄版与宽版卡片；具体宽度可使用你的实际版式，若需要固定演示值，可暂用 240 px 与 320 px，并标为测试值。

用最小夹具定位挤压点

最小夹具只保留一个卡片容器、一个图片框、一个价格文本层和一个角标。图片框可用明确的灰色矩形替代真实商品图，价格使用一行短文本，角标使用一行短文本；这样能排除图片内容和复杂文案带来的干扰。保存两份状态：状态一是角标隐藏，状态二是角标显示。

先比较两种状态下图片框和价格层的边界，而不是只看视觉间距。检查卡片外框是否变宽或变高、图片框是否缩小、价格文本是否换行，以及角标是否改变了同级子图层之间的间距。Auto layout 会依据流、间距、内边距和对齐放置子图层，内容变化也可能影响容器与子图层尺寸。

虚构练习：先定义两种资产

这是虚构练习，不代表已实际测试。资产 A 定义为“基础卡片”：图片框为 160 px × 120 px，价格为“¥39.90”，不显示角标；资产 B 定义为“促销卡片”：使用同一图片框和价格，新增“限时 8 折”角标，角标明确放在图片左上角。160 px、120 px 和文案均为示例值，实际项目应替换为你的设计值。

先比较资产 A 与资产 B，再在同一窄版和宽版容器中观察。通过条件是：显示角标后，图片框的尺寸、价格边界和卡片外框仍符合项目记录的目标，角标位于图片左上角且没有把图片或价格推开。失败表现是卡片变高或变宽、图片缩小、价格换行，或角标在窄版中遮住商品主体。

1. 先让资产 B 的角标保持当前结构，只记录窄版与宽版的边界变化。
2. 若角标不应占位，调整它与图片的层级或定位方式，使它不作为同一流中的空间成员，再重复两种宽度测试。
3. 若角标本来就应占位，保留流内结构，改为检查容器与子图层的尺寸模式，让图片和价格在目标边界内有明确空间。

按证据选择修复路径

若角标显示后外框改变，先处理容器尺寸与子图层尺寸的组合；不要直接把所有元素设为固定尺寸，因为这可能掩盖文字变长时的真实问题。比较窄版和宽版，确认变化来自卡片宽度还是角标内容。

若外框稳定但内容被挤开，优先处理角标是否错误地加入自动布局流。若角标必须覆盖图片，调整后要特别检查其锚点在两种卡片宽度下是否仍落在图片左上角；若角标必须占位，则应接受它会影响流，并重新定义图片、价格和角标的可用空间。

若只有价格变长时失败，保留角标修复方向，单独测试价格文本的子图层尺寸与换行行为。若只有窄版失败，下一步应查看窄版容器的边界、内边距和对齐，而不是继续改角标文案。

1. 显示角标并记录卡片、图片、价格三者的边界。
2. 分别改用窄版和宽版容器，重复记录。
3. 根据“外框改变”或“内容被挤开”选择尺寸路径或流内路径。
4. 验收前恢复真实商品图和最长价格文案，再做一次同样比较。

验收条件与交付记录

修复完成的验收条件应写成可观察结果：角标在预期位置；窄版和宽版切换时，图片与价格没有出现未设计的位移、缩小或换行；卡片外框只在设计允许的方向变化；角标的显示与隐藏不会改变不应变化的区域。

在交付记录中注明角标是“占位”还是“覆盖”，并保存窄版、宽版、角标隐藏、角标显示四种状态的截图或边界记录。若仍无法判断，记录具体发生变化的父容器和子图层，而不是只写“布局错乱”。

资料与建议的范围

下列官方资料支持工具行为和功能边界；本题的测试素材、分支判断和通过条件由 Itemlume 编辑设计，引用不代表对方背书。不要把练习中的尺寸、名称或时间直接当作你的生产规格。