你将做出什么
用一套“按钮组件（Button）”把 Figma 的自动布局（Auto Layout）、组件变体（Variants）和变量（Variables）串起来：做出可复用、可换主题、可快速改尺寸的按钮，并在一个真实页面里验证它能不能用。
准备：建立基础按钮组件
- 新建一个 Frame，放入一段文字（例如“按钮”）。
- 选中文字 + 外层 Frame，按 Shift + A 开启自动布局。
- 设置 Padding（上下 10、左右 16 作为起点），设置 Gap=8（以后放图标会用到）。
- 设置圆角（例如 10），并给按钮一个填充色与描边（先随便）。
- 把这一坨做成组件：右键 → Create component（或 Ctrl/⌘ + Alt + K）。命名：Button。
变体 1：做“尺寸”体系（S / M / L）
- 选中 Button 组件，点击右侧 + 添加变体，建立一个 Variant set。
- 建立属性：size，值先做 S/M/L 三个。
- 分别调整不同尺寸的 Padding 与字体大小：
- S：上下 8 左右 12；字号 12
- M：上下 10 左右 16；字号 14
- L：上下 12 左右 20；字号 16
- 关键点：文字层建议设为 Hug contents；外层按钮在自动布局里保持 Hug，这样按钮会跟随文字长度自适应。
变体 2：做“类型”体系（Primary / Secondary / Ghost）
- 在同一个 Variant set 里新增属性：type，值为 Primary / Secondary / Ghost。
- 为不同 type 配置样式：
- Primary：有填充色，文字白色（或深色对比）
- Secondary：浅填充或仅描边，文字使用主色
- Ghost：无填充，无描边（或 1px 透明），主要靠文字颜色
- 把描边、填充、文字颜色都做成“可被变量驱动”的结构（下一节会接上）。
变量：用一套 Token 解决主题与一致性
目标：以后换主题（浅色/深色）或改主色，你不想逐个按钮改。做法是建立一套颜色变量（Tokens），再把组件样式绑定到变量。
- 打开 Variables 面板，新建 Collection：Color。
- 在 Color 里建这些变量（示例命名）：
- color.primary
- color.onPrimary
- color.surface
- color.onSurface
- color.border
- 给 Collection 加 Modes：Light / Dark，分别填入颜色值。
- 回到 Button 组件，把 Primary 的填充绑定到 color.primary，文字绑定到 color.onPrimary；Secondary/Ghost 用 color.surface、color.border、color.onSurface 等。
交互状态：Hover / Pressed / Disabled 的简单做法
你可以用两种方式做状态：一是加一个属性 state（default/hover/pressed/disabled）；二是用 Prototype 交互在 Hover 时切换变体。新手更稳的是“state 属性法”。
- 新增属性：state，值 default / hover / pressed / disabled。
- 在 hover/pressed 变体里把填充做轻微加深（或透明度变化），并保持对比度。
- disabled：降低不透明度、禁用描边强调，文字变浅；同时把鼠标指针交互放在原型里（可选）。
落地验证：在真实界面里用一遍
- 做一个简单表单卡片：标题 + 两个输入框 + 底部按钮区。
- 底部按钮区放 2 个按钮：Primary（提交）+ Ghost（取消）。
- 把 size 切到 S/M/L 看整体密度是否合理；把 Mode 切到 Light/Dark 看对比是否可读。
- 如果发现按钮在长文案时变得太宽，给按钮外层设一个 Max width（或在使用处用 Auto Layout + Fill 控制）。
常见坑与修正
- 按钮不随文字变宽：检查文字和按钮外层是否都是 Hug；以及 Auto Layout 的宽度设置。
- 切换变体样式丢失：尽量让结构一致（同层级同命名），图标位留空也保持占位。
- 主题色换了要改一堆：把颜色都变量化，别直接用 Hard-coded 色值。
- 对比度不够：Primary 的文字色用 onPrimary，别用随手白色；Dark 模式尤其要检查。
你可以继续扩展
- 增加 icon 属性：none/left/right；用 Auto Layout 的 Gap 控制间距。
- 增加 width 属性：hug/fill；让按钮在表单里可一键铺满。
- 增加圆角变量、间距变量，做成完整的 spacing/shape token 体系。
