先定位：问题发生在“框架缩放”还是“内容自适应”
组件变形一般有两类：第一类是你拖动父级Frame时，内部元素没按预期贴边或等比；第二类是内容变长（文案变化、数字位数变化）时，组件不自动扩展，导致挤压或溢出。两类解决点不同，先分清楚再改。
第1步：检查层级（最常见：选错了该设置约束的那一层）
Figma 的约束与Auto Layout都依赖层级。你以为在调按钮，其实调的是包裹它的Group；你以为在调文本，其实它被另一个Frame限制。先把层级理顺，后面才有意义。
- 尽量用Frame替代Group：Frame的布局能力更完整。
- 一个职责一层：容器负责间距，内容负责尺寸，别把所有规则堆在一层里。
- 命名清楚：比如 Container/Content/Icon/Text，减少误操作。
第2步：Constraints（约束）设置是否匹配你的缩放意图
当父级Frame尺寸变化时，子元素要“贴左/贴右/居中/拉伸”，这就是Constraints。若你想按钮永远贴右，但约束是居中，它就会漂。
- 固定位置：贴边元素用 Left/Right/Top/Bottom。
- 居中元素：Logo或标题用 Center。
- 需要拉伸：背景块、分割线等用 Stretch（但要注意内容不被拉坏）。
第3步：Auto Layout 的方向与间距（方向错了就会“挤成一团”）
Auto Layout必须先确定方向：水平还是垂直。方向错了，组件会把你期望的“左右”理解成“上下”，自然会乱。
- 确认方向：按钮组一般水平，信息卡片常见垂直。
- 间距统一：用统一的padding与gap建立节奏，别每个组件都不一样。
- 对齐方式：基线/居中/顶部对齐会影响文本与图标的观感。
第4步：Hug / Fill / Fixed（决定组件能不能“自适应”）
组件能不能跟着内容变大，关键在 Hug contents（包裹内容）与 Fill container（填充容器）。很多“文本溢出”就是把文本设成Fixed导致的。
- 文本通常用Hug：让文字长度变化时组件能跟着撑开。
- 需要占满的区域用Fill：比如输入框、列表项内容区。
- Fixed慎用：只在你明确需要固定尺寸时使用。
第5步：最容易忽略的“嵌套Auto Layout”规则
当你在Auto Layout里再套Auto Layout，规则会叠加。外层控制整体padding与排列，内层控制子模块。若两层都在控制同一个方向，就容易出现奇怪的拉伸与挤压。
- 外层管结构：模块之间的关系。
- 内层管内容：图标与文字、按钮与标签的细节。
- 遇到乱跑先拆开验证：逐层关掉Auto Layout，看是哪一层在“搞事”。
第6步：组件Variant 与属性（状态切换时不跳动）
同一组件的不同状态（默认/悬停/禁用/加载中）如果尺寸不一致，切换时就会跳。建议你让Variant保持一致的外框尺寸与对齐基准。
- 统一外框：所有Variant共享同一尺寸框架。
- 内部用Auto Layout撑内容：而不是改外框。
- 对齐基准一致：例如都以左边距作为基准。
第7步：一套可照抄的修复顺序
最快路径：先理顺层级→设对Constraints→确认Auto Layout方向与间距→把文本/容器改成Hug或Fill→检查嵌套Auto Layout→统一Variant外框→最后用“拖动父级+替换长文案”做压力测试。只要最后两种压力测试都通过，你的组件基本就稳了。
