暗色模式
样式
样式是一组设计属性的打包集合,一键应用到图层上,修改样式后所有关联图层同步更新。
样式与变量配合使用:变量是单一值(如颜色色值、间距数值),负责底层参数;样式是属性组合(如"主标题" = 字号 24 + 字重 Bold + 行高 32),负责快捷应用。详见变量。
样式类型
| 样式类型 | 包含属性 | 适用场景 |
|---|---|---|
| 填充样式 | 颜色值(纯色/渐变/图片) | 统一品牌色、背景色 |
| 描边样式 | 描边颜色、粗细、类型 | 统一边框风格 |
| 文字样式 | 字体、字号、字重、行高、字间距等 | 标题、正文、标签等文字层级 |
| 特效样式 | 外阴影、内阴影、模糊参数等 | 统一卡片阴影、毛玻璃效果 |
| 网格样式 | 网格/栅格行列参数 | 统一布局网格设置 |
创建样式
- 选中一个图层 → 在右侧属性面板中设置好各项属性
- 点击属性旁边的样式图标(◆)→ 选择「新建样式」
- 为样式命名,建议使用斜线分层命名(如
Text/Heading/H1)
应用样式
点击属性旁边的样式图标 → 从列表中选择已创建的样式 → 图层立即应用该样式。
编辑与更新
在样式列表中右键样式 → 「编辑样式」→ 修改属性值 → 所有使用该样式的图层同步更新。
与变量协作
- 变量驱动样式:用颜色变量作为填充样式的基础,切换变量模式即可改变全局配色
- 样式引用变量:创建文字样式时,字号引用数值变量,方便整体调整字号层级
- 团队库发布:样式和变量都可以发布到团队库,供团队成员订阅使用
命名规范
- 使用斜线分层命名:
Primary/500、Text/Heading/H1 - 定期清理未使用的样式,保持库整洁