Skip to content

样式

样式是一组设计属性的打包集合,一键应用到图层上,修改样式后所有关联图层同步更新。

样式与变量配合使用:变量是单一值(如颜色色值、间距数值),负责底层参数;样式是属性组合(如"主标题" = 字号 24 + 字重 Bold + 行高 32),负责快捷应用。详见变量

样式类型

样式类型包含属性适用场景
填充样式颜色值(纯色/渐变/图片)统一品牌色、背景色
描边样式描边颜色、粗细、类型统一边框风格
文字样式字体、字号、字重、行高、字间距等标题、正文、标签等文字层级
特效样式外阴影、内阴影、模糊参数等统一卡片阴影、毛玻璃效果
网格样式网格/栅格行列参数统一布局网格设置

创建样式

  1. 选中一个图层 → 在右侧属性面板中设置好各项属性
  2. 点击属性旁边的样式图标(◆)→ 选择「新建样式」
  3. 为样式命名,建议使用斜线分层命名(如 Text/Heading/H1

应用样式

点击属性旁边的样式图标 → 从列表中选择已创建的样式 → 图层立即应用该样式。

编辑与更新

在样式列表中右键样式 → 「编辑样式」→ 修改属性值 → 所有使用该样式的图层同步更新。

与变量协作

  • 变量驱动样式:用颜色变量作为填充样式的基础,切换变量模式即可改变全局配色
  • 样式引用变量:创建文字样式时,字号引用数值变量,方便整体调整字号层级
  • 团队库发布:样式和变量都可以发布到团队库,供团队成员订阅使用

命名规范

  • 使用斜线分层命名:Primary/500Text/Heading/H1
  • 定期清理未使用的样式,保持库整洁