目标是搭建一个“可交付”的按钮组件：有尺寸（S/M/L）、层级（Primary/Secondary/Ghost）、状态（Default/Hover/Pressed/Disabled），并且支持一键切换主题色与圆角等基础设计 token。你可以把它当成设计系统的最小闭环练习。
软件版本：Figma 桌面版或网页端均可（建议开启 Variables 功能）。
命名约定：组件命名遵循“Button / Type=Primary / Size=M / State=Default”的结构，后续开发对接会更顺畅。
样式与变量：先准备这些基础 token（没有也可以边做边补）：
1）颜色：Brand/Primary、Text/OnPrimary、Border/Default、Surface/Default
2）尺寸：Radius/8、Space/8、Space/12、Space/16
3）字体：Text/14、Text/16（或使用 Text Style）
1）新建一个 Frame，放入文字（例如“按钮”）。
2）选中 Frame，开启 Auto Layout：水平布局；左右 padding 16，上下 padding 10；间距 8。
3）对齐：垂直居中；文字设置为 Hug contents，Frame 也设为 Hug contents（宽高自适应）。
4）给 Frame 加背景色与圆角：背景先用 Brand/Primary，圆角用 Radius/8。
小提示：只要你把“间距”和“padding”固定下来，按钮在各种文案长度下都会自然扩展，减少手工改尺寸。
1）在文字左侧放一个 16x16 的占位图标（可以用一个简单的圆形或任意 SVG）。
2）将图标与文字放在同一 Auto Layout 中，让图标也为 Hug contents。
3）把图标做成可隐藏的层：后面通过 Variant 控制“有图标/无图标”。
注意：别用手动对齐去挪图标位置，Auto Layout 才是组件可复用的关键。
1）选中按钮 Frame，Create component（Ctrl/Cmd + Alt + K）。
2）把组件改名为 Button。
3）Create component set，建立这些属性（建议先从最小集合开始）：
- Type：Primary / Secondary / Ghost
- Size：S / M / L
- State：Default / Hover / Pressed / Disabled
- Icon：None / Leading（可扩展 Trailing）
4）先把 Primary / M / Default 做好，再复制变体逐个改属性，避免从零重复设置。
1）在 Variables 面板创建集合（例如：Tokens）。
2）创建颜色变量：
- color/brand/primary
- color/text/onPrimary
- color/surface/default
- color/border/default
3）创建数值变量：
- radius/button
- space/button-x
- space/button-y
4）把按钮的背景色、文字色、圆角、padding 绑定到变量。
为什么要绑变量：当你要做深色主题、品牌换色或 B 端/ToC 两套皮肤时，不需要逐个改组件，只要改变量或切换 mode。
Primary：背景 = color/brand/primary；文字 = color/text/onPrimary；边框 = 无或透明。
Secondary：背景 = color/surface/default；文字 = color/brand/primary；边框 = 1px color/border/default。
Ghost：背景 = 透明；文字 = color/brand/primary；边框 = 无（Hover 时可加浅底）。
一致性要点：三种 Type 的 padding、字号、圆角尽量一致；差异只放在“颜色/边框/背景”，复用性更高。
1）Default：常规样式。
2）Hover：背景加深一点（或 Secondary/Ghost 加一层 4%~8% 的浅底）。
3）Pressed：比 Hover 再深一点，并可加入轻微缩放（设计稿里用 98% 的视觉示意即可）。
4）Disabled：降低不透明度（例如 40%~60%），并确保文字对比仍可读。
建议：把 Hover/Pressed 的差异控制在“很明确但不夸张”，让产品看起来更克制、更像成熟系统。
建议尺寸（可根据你的字体体系微调）：
- S：字号 14；padding-x 12；padding-y 8；高度约 32
- M：字号 14/16；padding-x 16；padding-y 10；高度约 40
- L：字号 16；padding-x 20；padding-y 12；高度约 48
关键：不要用固定宽度；让按钮宽度随文案 Hug，避免“按钮看起来忽大忽小”。
在交付前，用下面清单快速自查：
1）命名是否统一（Type/Size/State/Icon）？
2）是否所有变体都绑定了变量（颜色/圆角/padding）？
3）是否所有文本使用同一套字体样式（避免某个变体字号不一致）？
4）是否有图标时仍能居中对齐、间距一致？
5）Disabled 是否仍可读且不产生“假可点击”的视觉误导？
Q1：为什么我的按钮文案变长后高度/对齐乱了？
A：检查文字是否为 Hug contents；Auto Layout 的对齐是否为垂直居中；Frame 是否也为 Hug。
Q2：Variants 复制后样式总有一个漏改？
A：先把 Default 做到“变量全绑定”，再复制变体；复制后只改差异项（颜色/边框/不透明度）。
Q3：我不想每次都手动做 Hover/Pressed 的颜色？
A：可以把 Hover/Pressed 也做成变量（例如 color/brand/primary-hover、primary-pressed），后期更容易统一迭代。
当你完成这一版后，可以继续加：
- Loading 状态（按钮中间加 spinner，文案透明但占位）
- Danger/Warning 等语义色
- Icon Trailing、Only Icon 按钮
- 更完整的主题 mode（Light/Dark/Brand A/Brand B）
扩展时保持“变量管理差异、组件管理结构”，你就会发现设计系统会越来越好维护。
