这篇教程目标很明确：把“常见页面模块”做成一套可复用的 Figma 组件，并且通过 Auto Layout + 变体/变量，让它在不同内容长度、不同设备宽度下都不崩。
适合：UI/产品设计、运营设计、独立开发者；不需要写代码。
建议在同一个 Figma 文件里按以下页面（Pages）组织，后期协作和交接会省很多时间：
1）00-基础：颜色/文字样式/栅格
2）01-组件：按钮、输入框、卡片、导航等
3）02-模板：登录页、列表页、详情页
4）99-归档：不用的草稿与旧版本
同时统一命名：组件用 PascalCase（如 Button/Field），图层用 小写+短横线（如 icon-left）。
1）画一个按钮底（矩形）+ 文本（Text），选中两者，按 Shift + A 创建 Auto Layout。
2）在右侧面板设置：
- Padding（内边距）：左右 16 / 上下 10（可按你的设计系统调整）
- Spacing between items：8（用于以后加图标）
- Alignment：居中
3）把按钮容器的宽度设为 Hug contents（拥抱内容），高度也用 Hug；这样文案变长时按钮会自动变宽。
4）把文本层改名为 label，以后做变量/批量替换更方便。
5）选中整个按钮，创建组件：Ctrl/Cmd + Alt + K。
1）在组件面板里选中 Button 组件，点击 Combine as variants（合并为变体）。
2）建议的变体属性（Properties）：
- size：sm / md / lg（对应不同 padding 和字号）
- type：primary / secondary / ghost
- state：default / hover / disabled / loading
3）禁用态（disabled）不要只降低透明度：同时降低对比度，并把点击热区保留（方便开发实现一致）。
4）Loading 态建议在 Auto Layout 里加一个左侧 icon 位（或旋转指示），并把 icon 设置为 Fixed size，避免挤压文案。
把常用的可切换内容暴露成属性：
- icon-left：Boolean（有/无）
- icon-right：Boolean（有/无）
- label：Text（按钮文案）
这样在页面里拖一个 Button 实例，就可以直接在右侧改文案/开关图标，不用进组件里改。
卡片常见结构：标题（ ）+ 描述（desc）+ 按钮（actions）。
1）三块内容都放进一个 Auto Layout 容器，方向设为 Vertical（竖向）。
2）关键点：中间的文本区域宽度设为 Fill container（填充容器），这样卡片拉宽时文案会自动换行/扩展。
3）actions 区域如果有左右布局（如左侧标签，右侧按钮），用一个横向 Auto Layout，设置 Space between。
问题 1：文案变长把图标挤没了
- 解决：图标层设为 Fixed width/height；文本设为 Fill container 或 Hug（取决于布局）；必要时给文本设置最大宽度。
问题 2：间距怎么调都不对，拖动还会跳
- 解决：检查是不是在嵌套 Auto Layout 里同时改了外层与内层的 padding/spacing；建议从外到内逐层确认。
问题 3：同一个组件实例改了样式，别的地方也跟着变
- 解决：你可能在编辑“主组件”（Main component）而不是实例；回到页面里选中实例再做覆盖。
问题 4：导出给开发后还原困难
- 解决：命名规范一定要稳定；组件属性尽量少而清晰；在模板页放 1-2 个完整页面示例，作为实现参考。
第 1 天：按钮/输入框/标签（最常用）
第 2 天：卡片/列表项/导航（页面骨架）
第 3 天：模板页 + 复盘命名/属性，删掉冗余变体
Auto Layout 负责“结构稳定”，变体/属性负责“快速切换”。把最常用的 10 个模块做扎实，你的页面搭建速度会明显提升，交付也更稳定。
