一、 样式（Style）的定义与作用 #
- 定义： 样式是对 Figma 属性面板中不同功能模块的参数进行的一种定义。
- 核心作用：
- 实现样式的复用。
- 实现批量修改的目的和作用。
- 通过定义样式，给颜色赋予一个身份（例如“主色”），后续可以一次性修改所有引用该样式的元素的颜色。这有助于节省大量时间。
二、 哪些属性可以定义样式 #
并非 Figma 属性面板中的所有功能模块都可以定义样式。可以进行样式定义的属性有以下五种：
- 填充（Fill）。
- 描边（Stroke）。
- 效果（Effect）。
- 字体（Text/Typography）。
- 格线（Grid）。
注意： 像圆角（Corner Radius）这类属性，在视频录制时，它没有加入样式定义的功能，这让设计师感到不便，因为圆角也经常需要复用。
三、 样式的创建和应用流程 #
1. 样式创建入口 #
- 在填充、描边和效果等属性栏旁边，会有一个**“添加样式”的图标**（一个四个点组成的小方块）。
- 只有当看到这个图标时，才能添加样式。
- 点击图标后，选择
Style选项（而非Variable），进入创建面板。
2. 创建步骤 #
- 在创建面板中，可以设置 Name（名称），例如“主色”。
- 可以设置 Description（描述），用于描述颜色的作用或使用上的备注。
- 点击
Create Style完成创建。 - 一旦创建，该元素就会与样式关联。此时，如果点击填充区域，它会显示为定义的名称（如“主色”），而非默认的
Custom状态。
3. 样式的复用与批量修改 #
- 创建样式后，它会出现在 Library（库）中。
- 用户可以随意绘制其他元素（如矩形、圆形、文本内容），然后点击填充（Fill）区域，从 Library 中选择并应用已定义的主色样式。
- 如果后续需要修改主色，只需进入该样式的编辑界面进行修改，所有引用该样式的元素（无论是填充还是描边颜色）都会一次性统一改变。
四、 不同类型样式的独立性与特征 #
1. 颜色（Color Style） #
- 应用范围广： 定义的颜色样式不仅可以用于元素的填充（Fill），也可以用于元素的描边（Stroke），甚至可以用于**效果（Effect）**中的颜色设置。
2. 效果（Effect Style） #
- 独立性： 效果（Effect）部分创建的样式是独立于颜色样式的。
- 混合效果： 一个效果样式可以混合多个效果，例如同时包含
Drop Shadow（投影）和Inner Shadow（内阴影/高光）。创建样式后，它会将这些效果的所有属性都记录下来并置入。
3. 字体（Text Style） #
- 功能分离： Figma 字体样式与早期 UI 软件（如 Sketch）不同，它将字体样式（字号、行高等）与颜色填充（色号）做了割裂（分离）。
- 编辑灵活： 定义字体样式后，用户仍可以对使用该样式的文本进行后续修改，例如修改对齐方式（左对齐、居中等），而不需要为每种对齐方式都创建一个新的字体样式。
- 颜色应用： 字体颜色是通过填充（Fill）面板来设置和定义样式的，而不是在字体样式面板内部设置。
4. 格线（Grid Style） #
- 栅格系统也可以创建样式，例如网页中常用的12 列三格参数，可以继承并复用于后续页面。
- 使用频率低： 视频中建议前期可以不用管，因为在 UI 设计中，格线样式的使用频率不高。
五、 样式管理与分类（Local Style） #
1. 本地样式（Local Style）的显示 #
- 当用户点击画板的空白区域时，右侧属性面板会显示在这个页面（Page）中定义过的所有样式，这被称为 Local Style（本地样式）。
- 本地样式会根据类型（字体、颜色、效果、格线）进行子分类显示。
2. 样式的分类与文件夹管理 #
- 为了避免样式数量过多导致选择困难，需要对样式进行分类。
- 命名法： 最简单有效的方法是在样式名称中使用**斜杠（
/）**进行分隔，例如“主色/主色名”。 - 结果： 使用斜杠命名后，Figma 会自动生成一个**文件夹（Folder）**来组织这些样式，使选择和切换变得直观和方便。
- 建议： 建议不要创建太多层级（套娃）的文件夹。
3. 样式的关联与断开 #
- 关联： 创建或应用样式是元素去连接一个样式点。
- 断开连接： 如果不想使用某个样式，可以在属性面板中点击**“断开连接”（Detach）**图标（通常是一个打叉的小圆圈），元素将恢复为自定义状态。
- 删除样式： 即使断开了所有元素的连接，样式本身仍然存在于 Local Style 中。必须在右侧 Local Style 面板中，右键点击样式，选择 Delete，才能真正将其删除。
最后一次修改于 2025-11-21