一、 项目规范的创建与管理原则 #
1. 规范的构成 #
项目设计规范主要包括两个核心部分：设计样式（Style）和组件（Component）。
2. 管理思路：独立 Page 管理 #
- 在 Figma 文件中，设计师不会将规范内容创建在实际的**页面（Page/配局）**中。
- 正确的做法是单独创建一个 Page，专门用于存放和统一管理所有与规范相关的内容。
- 统一整理的必要性： 在真实的项目页面中，内容通常分散在各个模块（如模块一、模块二），因此需要一个统一的 Page 来收纳这些规范要素。
3. 制作规范页面的流程（先做页面后定规范） #
- 正确的项目流程： 正式项目的早期阶段，设计师通常是先完成页面设计，再回过头来去整理和创建规范。
- 整理目标： 整理的目的是将页面中用到的字体、色彩等元素进行关联，并重新梳理一遍，然后删除多余的规范，确保所有样式都被应用。
二、 样式规范（Style）的创建与分类 #
样式规范涉及整理色彩、字体和效果等相对抽象的视觉细节。
1. 色彩规范 #
- 需要定义项目中的主色（Primary Color）、辅助色（Auxiliary Color）和中性色（Neutral Color）。
- 通过 Figma 的样式功能（Style）创建这些颜色，并赋予它们对应的名称和作用。
2. 字体规范 #
- 根据不同的角色（如大标题、中标题、小标题等）来创建字体样式。
- 创建字体样式后，同理在 Style 环境中对它们进行创建和命名。
3. 效果规范 #
- 可以创建**投影（Drop Shadow）**等效果的样式。
- 设计师应将设计页面中使用过的所有内容提前定义出来，以便在后期进行关联。
4. 样式页面的展示（建议） #
- 直观管理： 来源建议，在专门的规范 Page 中将这些用过的样式全部整理并具象化地展示（如色块、文本示例）。
- 优于右侧面板： 这种具象化的展示方式，比直接依赖右侧属性面板中的样式列表更直观、更舒服。
三、 组件库（Component Library）的创建与结构 #
组件库是项目规范中内容非常多且复杂的部分，需要清晰的分类和结构。
1. 组件的创建顺序：先控件后组件 #
- 优先级： 应该优先把**控件（Controls）**定义好。
- 进阶组件： 控件做完后，再开始制作和定义复杂组件（Component），因为进阶组件通常会包含或引用基础控件。
- 内容替换： 制作进阶组件时，应先在非组件状态下，将内部元素（如按钮、图标）替换成已经创建好的控件组件，然后再将整个父级元素创建为新的复杂组件。
2. 组件的分类结构 #
组件分类应基于业务形式和功能点进行裁分：
- 控件分类： 应包含最基础的交互元素，如按钮（Button）、输入框（Input）、选择器（Selector）。
- 复杂组件分类： 应根据业务内容进行分类，例如卡片类（Card）（如课程卡片、优惠卡片）和动态类等。
3. 组件状态的创建与变体（Variant） #
- 状态是必须的： 控件和组件通常具有多个状态（如默认、点击、悬浮等）。
- 创建流程： 正确的流程是：
- 先将组件的不同状态（样式）在外部独立设计并制作出来。
- 然后将所有状态的组件一起选中，使用 Combine as Variant 功能，将它们合并成一个变体组件。
4. 组件的命名与 Assets 归类（重点） #
- 斜杠命名法： 在创建组件（Component）时，应通过在名称中添加斜杠（
/）来创建层级结构。 - 自动归类： 使用斜杠命名后，Figma 会自动在 Assets（资源库）面板中帮助设计师进行文件夹式的归类。
- 命名建议： 命名应清晰且有目的性，例如使用前缀（如“控件/按钮/小”）来控制组件在 Assets 列表中的顺序和结构。
四、 规范创建的最终目标 #
- 目标： 统一性（一致性）和效率。
- 团队协作： 规范的创建能提升团队协作的速度。
- 警告： 设计师不应因为 Figma 的功能强大而强行使用所有功能，这可能会导致花费大量时间处理软件功能本身，最终反而使项目效率降低或组件库难以维护。
最后一次修改于 2025-11-21