Figma AI生成的卡片组件变形是因图片未正确设置填充与约束联动。需三步解决：一、启用Fill Container并勾选保持比例，设约束为水平居中、垂直顶部固定；二、用Auto Layout包裹图片，设主轴垂直、间距0，外层约束左右拉伸、顶部固定；三、替换为矢量占位符，配置相同约束后再置入真实图片。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您使用figma ai生成的卡片组件在调整frame尺寸或缩放时出现图片拉伸、文字错位、间距崩塌等变形现象，则很可能是由于子元素（尤其是图片）未正确设置容器填充行为与约束联动。以下是解决此问题的步骤：一、为图片启用Fill Container并勾选保持比例
Fill Container属性控制图片如何适配其父Frame的尺寸变化，但仅启用该选项而不锁定宽高比会导致图像严重畸变。必须同步开启“保持比例”才能实现弹性填充下的视觉一致性。
1、选中卡片内的图片图层。
2、在右侧属性面板中找到“填充容器（Fill Container）”开关并启用。
3、在下方约束设置区域，勾选“保持比例（Preserve Aspect Ratio）”复选框。
4、将水平约束设为“居中”，垂直约束设为“顶部固定”，确保图片在不同宽度下始终居中显示且不裁切关键内容。
二、解除图片的固定宽高并绑定Auto Layout容器
当图片被手动设为固定宽度/高度时，它会脱离父Frame的弹性响应逻辑，导致缩放时与其他元素脱节。将其嵌套进具备自动布局能力的Frame中，可强制其参与整体流式计算。
1、右键点击图片图层，选择“用自动布局包裹（Wrap in Auto Layout）”。
2、在新生成的Auto Layout Frame中，将主轴方向设为“垂直”，间距设为0。
3、在该Frame的约束设置中，将水平约束设为“左右拉伸”，垂直约束设为“顶部固定”。
4、确认图片自身的约束已重置为“左/顶”，避免与外层Auto Layout产生冲突。
三、替换原始图片为矢量占位符并重设约束组合
AI生成的图片常以栅格形式嵌入且携带不可控的原始尺寸元数据，易触发Figma的旧式缩放逻辑。改用纯色矩形或SVG占位符可彻底剥离像素依赖，使约束规则准确生效。
1、删除原图片图层，使用矩形工具绘制一个与原图尺寸相近的形状。
2、为该矩形设置填充色，并在约束面板中配置：水平：居中；垂直：顶部固定；缩放模式：填充容器 + 保持比例。
3、将该矩形图层重命名为“card-image-placeholder”，便于后续批量替换真实图片。
4、待整体布局稳定后，再将真实图片拖入该占位符位置，Figma会自动继承其约束与填充设置。
