把 Figma 图层当作玻璃叠层来思考

大多数人打开一个 Figma 文件，看到的是一个个矩形。而做过玻璃拟态之后，你会开始把它们看成一片片叠起来的玻璃——这个视角的切换，会直接改变你组织文件的方式。

从「背景 + 前景」到「层」

传统思路里，画布分两层：底下一层背景，上面一层内容。但当界面由多层半透明材质构成时，这个二分法就崩了。因为：

• 每一层都会影响它下面所有层的观感
• 半透明的层不能随便移动位置，挪动会改变它折射到的颜色
• 层的顺序本身就是一种设计决策

我们现在的做法是，在 Figma 里给每一层命名时带上它的「材质角色」：

05 · 浮层 / 玻璃 · 弹窗
04 · 浮层 / 玻璃 · 导航
03 · 内容 / 实体
02 · 光 / 光斑 · 装饰
01 · 底 / 渐变

数字是叠放顺序，中间是角色。这个名字约定本身不值钱，值钱的是它逼你在动手前想清楚「这一层凭什么浮在上面」。

用不透明度表达距离

如果所有层都是 100% 不透明，层级就只能靠阴影表达，而阴影在浅色背景上非常弱。

玻璃给了第二种语言：越靠近眼睛的层，透光越少、模糊越强。

层级	背景不透明度	模糊半径
导航条（常驻）	50%	30px
卡片	48%	28px
大面板	50%	32px
浮层 / 弹窗	62%	40px

这是个反直觉但很有效的规律：浮得越高，越不透明。因为高处的浮层需要保证内容可读性，而它的「浮」已经由投影和模糊表达了，不需要再用透明度去强调。

组件的坑：玻璃组件不能被实例覆盖

如果你把一块玻璃做成组件，然后在使用时改它的背景色，会发现——它和背后的光斑脱钩了。半透明的魅力在于它会跟环境互动，一旦你为了「统一」把它固化成实色，环境就消失了。

我们的处理办法是把「玻璃」和「内容」彻底分开：

• 玻璃组件只管容器：不透明度、模糊、描边、内阴影
• 内容组件（标题、标签、作者行）作为插槽放进去
• 配色通过 token 传给渐变封面，而不是覆盖玻璃本身

最后一点

这套方法最实际的好处，不是文件更整齐，而是改起来快。

当客户说「整体感觉太沉了」，你不需要一个个调卡片，只需要改 --glass-bg 和底层光斑的透明度，整页的呼吸感会一致地变化。这就是把材质抽象出来的回报。