§快速创建主题

快速品牌化功能可让您快速切换主题并立即看到结果，您可以直接使用或进一步优化。只需选择几种颜色，所有控件都会相应调整。为所有支持的主题重复此操作，即可完成设置。

§开始之前

1. 我们建议下载最新版本的 Figma 库

2. 值在变量管理界面中进行配置。打开“颜色样式”集合，然后选择“品牌”组

   

3. 可以在 Figma 的“品牌”页面上方便地查看结果。该页面包含使用品牌变量的组件，这将让您了解最终效果。

4. 请记住在组件中使用颜色样式。

5. 每个颜色样式的取值由相应的变量表示

§1. 基础品牌颜色

--g-color-base-background

页面背景色。浅色主题最常用的颜色是白色，但您也可以使用任何喜欢的颜色。深色主题有更多选择，从中性灰色调到暖色或冷色。

--g-color-base-brand

主要品牌颜色。主按钮、复选框、单选按钮、开关和特殊工具提示主题的背景色。

--g-color-base-brand-hover

主要品牌颜色的悬停颜色。我们使用的是较深的色调，但也可以使用较浅或完全不同的颜色。

--g-color-base-brand-selection

具有“选中”语义的元素的底纹。

--g-color-base-brand-selection-hover

选中元素的悬停颜色。在典型任务中较少使用，在准备新组件的所有状态或进行原型设计时更常用。

--g-color-line-brand

品牌色线条。卡片、选项卡中的选中状态；加载指示器的颜色。

--g-color-text-brand

不带底纹时使用的品牌色文本。

--g-color-text-brand-heavy

位于底纹上方的品牌色文本。用于补偿底纹使用导致的对比度损失。

--g-color-text-brand-contrast

确定了主要控件的品牌颜色后，为其选择一种对比色。对比度必须在所有主题中保持一致。

如果切换主题时品牌颜色的亮度变化不大，您可以尝试使用亮度恒定的颜色：--g-color-text-light-primary 和 --g-color-text-dark-primary。如果品牌颜色的亮度发生变化，请尝试使用 --g-color-text-primary 或 --g-color-text-inverted-primary。

--g-color-text-link

链接颜色。

--g-color-text-link-hover

悬停链接颜色。

--g-color-text-link-visited

已访问链接颜色。

--g-color-text-link-visited-hover

已访问链接的悬停颜色。

§2. 排版

所有文本样式都列在库的右侧列中，“本地样式”部分下。如果没有选中对象，则会显示此部分。在这种情况下，显示的是选中对象的属性，而不是库的属性。

要访问文本样式编辑界面，请点击样式名称右侧的设置图标。

样式分为三组。

1. 标题 (Header)。 包含标题、副标题和显示样式。
2. 文本 (Text)。 用于输入文本和说明的样式。
3. 杂项 (Misc)。 用于显示代码和常规输入文本中的代码（内联样式）的样式。

对于“标题”和“文本”组，您可以使用一种字体，但具有不同的字重。标题通常比排版字体具有更高的字重。

对于“杂项”组，您可以设置一种等宽字体。确保内联样式在嵌入到输入文本中时显示正确，并且排版的基线没有偏移。否则，建议为“行高”参数选择一个合适的值。

对于样式，允许对“字号”和“行高”参数进行微小更改。在不同的字体中，字符的高度和宽度可能差异很大，在某些情况下需要对此进行补偿。请记住，某些文本样式用于特定组件尺寸内，对样式参数的重大更改可能会导致组件显示不正确。因此，在对字号和行高进行任何更改时，检查组件在不同尺寸下的显示效果非常重要。

§3. 圆角

此参数可在变量管理界面中进行配置。值可在“边框半径”集合中找到。此属性由两组变量设置：主要变量和技术变量。

§主要集合

这组变量与代码变量匹配。这些值应用于相应尺寸的控件。

• --g-border-radius-s: 3px
• --g-border-radius-s: 5px
• --g-border-radius-l: 6px
• --g-border-radius-l: 8px
• --g-border-radius-xl: 10px
• --g-border-radius-2xl: 16px

§技术集合

仅在 Figma 中用于计算“复选按钮”组件内部元素的圆角。这些是标记为“Inner”的变量，其值应链接到主要变量的值。要计算“Inner”变量的值，请取相同尺寸的主变量值并减去 3。

例如，如果 --g-border-radius-m 设置为 6px，则“Inner M”半径计算为 6 - 3 = 3px。

§4. 技术颜色

此组包含设计系统支持的滚动条的颜色。为确保滚动条在深色主题中跨不同浏览器正确显示，建议进行相应配置。

此组中的变量：

• --g-color-scroll-track
• --g-color-scroll-handle
• --g-color-scroll-handle-hover
• --g-color-scroll-corner

§高级主题设置

§私有颜色调整

如果您想调整特定颜色色调以使其与品牌颜色保持一致，请使用私有调色板。私有颜色在变量管理界面的“私有颜色”集合下进行配置。

基本色：

• 蓝色
• 绿色
• 红色
• 黄色
• 橙色
• 冷灰色
• 紫色

其中任何一种（或所有）可能都需要调整以匹配品牌颜色。要准备好移交给开发人员的调色板，请使用 脚本。您需要将脚本的输出传输到 Figma。

如果页面背景（或对比主题中的背景）已修改，请生成新的纯黑色和白色色调。

对私有调色板进行更改后，语义颜色也会自动更新。

§语义颜色调整

如果私有变量的值与品牌的视觉语言不符，您可以调整语义化颜色的值。它们在 Color Styles 集合的 variables 界面中进行配置。

请注意以下几点：

1. 确保使用与相应主题匹配的私有颜色。
2. 用带 Alpha 通道的私有颜色替换为纯色（反之亦然）可能会导致问题。
3. 对语义化变量的更改将自动应用于使用它们的 color styles 和组件。

§与开发同步

目前，Figma 库和代码之间的主题同步是手动进行的。在开发移交之前，必须按照说明准备好 CSS 变量。