你将做出什么
本教程带你在 Figma 里做一套「玻璃拟态（Glassmorphism）」按钮组件：包含默认/悬停/按下/禁用 4 种状态，可一键切换 Variants，并且用 Auto Layout 自动适配文案长度。整套参数给到明确数值，照着做就能落地到真实项目。
准备工作（3 分钟）
- 新建一个 Frame（例如 1440×900），填充一个深色渐变背景：#0B1220 → #111827（从左上到右下）。玻璃拟态需要对比度，深色底更容易出效果。
- 开启像素预览可选：View → Pixel Preview（非必须）。
- 命名规范建议：组件命名用 Button，状态用 state=default/hover/pressed/disabled。
第 1 步：做按钮基础结构
- 画一个圆角矩形：宽 240、高 56，圆角 16。
- 在按钮内部放一行文字（例如：立即下载），字号 16，字重 600，行高 24，颜色 #FFFFFF（不透明度 90%）。
- 把矩形和文字选中，按 Shift + A 加 Auto Layout：左右内边距 20，上下 14，Gap=8，对齐方式居中。
- 把这个 Auto Layout Frame 命名为 Button / state=default。
第 2 步：玻璃拟态材质（核心参数）
玻璃拟态=半透明填充 + 背景模糊 + 细微高光边 + 柔和投影。下面给一套通用参数：
- 填充（Fill）：白色 #FFFFFF，透明度 12%（0.12）。
- 描边（Stroke）：线性渐变描边（从左上到右下）：
- 起点：#FFFFFF 35%
- 终点：#FFFFFF 8%
- 描边宽度：1
- 背景模糊（Background Blur）：Blur=18（如果底图更复杂可调到 24）。
- 投影（Drop shadow）：
- X=0, Y=12, Blur=28, Spread=0
- 颜色：#000000，透明度 25%
- 高光（可选但推荐）：在按钮顶部叠一个 1px 高光线：
- 复制按钮矩形一份放到最上层
- 只保留 Stroke，颜色 #FFFFFF 20%，然后把这个高光层的高度压到 1～2px，贴在按钮顶部内侧
第 3 步：做 4 个状态（Default / Hover / Pressed / Disabled）
思路：结构不变，只调整透明度、阴影和描边强度。
- Hover：
- Fill 透明度：12% → 16%
- Stroke 透明度整体 +5%
- 投影 Y=14，Blur=30（略更“浮”）
- Pressed：
- Fill 透明度：12% → 10%
- 投影 Y=6，Blur=18（更“贴”）
- 可加内阴影（Inner shadow）：X=0, Y=2, Blur=8，#000 20%
- Disabled：
- 整体透明度：70%
- 文字颜色：#FFFFFF 55%
- 背景模糊保持不变，但投影透明度降低到 15%
第 4 步：合并为 Variants（关键：可复用）
- 把 4 个状态的按钮 Frame 都准备好（命名分别为 state=default/hover/pressed/disabled）。
- 选中这 4 个 Frame → 右键 → Combine as variants。
- 在右侧属性里确认属性名为 state，并确保每个 Variant 值正确。
- 把组件命名为 Button，以后在页面里直接拖实例即可。
第 5 步：把参数做成可控变量（进阶但很实用）
如果团队常做玻璃拟态风格，建议把关键参数做成 Styles/Variables：
- 文字色做成 Text Style：Button/Primary
- 投影做成 Effect Style：Glass/Shadow
- 填充和描边做成 Color Style：Glass/Fill、Glass/Stroke
这样换主题时只改 Style，不用逐个组件调整。
常见问题排查
- 看不出玻璃感：底图对比不够；把背景做成更丰富的渐变/噪点，或提高 Background Blur 到 24。
- 边缘发灰/脏：Stroke 太厚或透明度太高；保持 1px 且用渐变描边。
- 按钮在深色背景太“飘”：减小投影 Y 和 Blur；Pressed 状态用更贴近的阴影参数。
- 文案变长后撑破：确认按钮是 Auto Layout，并且文字是 Hug contents；左右内边距固定。
交付建议（给开发/前端）
- 把 4 个状态导出为同尺寸 PNG 用于标注对比（可选）。
- 更推荐交付参数：Fill alpha、Blur 值、Shadow 值、Stroke 渐变，这些更接近真实 CSS/原生实现。
- 如果是 Web：玻璃效果常用 backdrop-filter: blur(18px) + 半透明背景色 + 细描边。
你可以直接套用的按钮文案（附赠）
