第3章 Figma设计规范：设计稿结构、页面命名、图层命名、组件规范

产品经理与设计师在Figma协同中经常遇到这样的场景：打开设计稿，面对数十个页面和数百个图层，无法快速定位某个功能模块；需求变更时，要逐一确认哪些元素受影响；开发实现后，发现与PRD预期存在偏差。这些问题的根源往往是设计规范缺失——页面无序、命名随意、图层深埋、组件不统一。规范不是束缚，而是效率杠杆，它让PRD与Figma的联调从"人肉对接"升级为"体系化对齐"。

3.1 规范的价值与用户场景

用户场景：产品经理在Figma中查找"订单列表空态"设计，面对混乱的页面结构和默认图层名"矩形1""组2"，耗费15分钟仍未定位到目标元素。设计师返工、开发等待、需求失真，形成连锁低效。

业务问题：设计稿无序导致需求传递失真，开发实现与PRD偏离，版本管理混乱，验收返工频繁。数据显示，因设计规范缺失造成的联调返工占总返工量的30%-40%。

需求拆解：建立分层级、可追溯、与PRD联调的设计规范体系，使产品经理能够5分钟内定位任意功能模块的设计元素，设计师与开发对设计稿的理解误差降至10%以下。

方案表达：通过"结构—命名—图层—组件"四层规范体系，实现设计稿与PRD的结构化对齐。

3.2 设计规范四层架构

从宏观到微观，规范分为四个层次，每一层都承担着与PRD联调的关键使命：

四层架构层层递进，从宏观框架到微观元素形成一个完整的规范闭环。下图展示了各层级之间的递进关系以及它们如何共同驱动PRD联调：

3.3 设计稿结构规范

设计稿结构是规范体系的顶层，定义页面的骨架与信息层级。产品经理应从PRD页面清单出发，与设计师共同确定设计稿的页面结构。

核心原则：

• 页面框架与PRD章节一一对应，每个PRD功能模块在设计稿中有独立页面
• 信息层级不超过3级（页面组 → 页面 → 画板），避免过深埋藏
• 关键状态独立页面：空态、加载态、错误态、边界条件各占一页
• 使用Figma的"页面分组"功能，按PRD模块组织页面列表

验收标准：产品经理对照PRD目录逐项核对，所有功能模块均能在设计稿中找到对应页面，覆盖率达到100%。

3.4 页面命名规范

页面命名是规范体系的关键枢纽，连接PRD需求与设计稿。命名混乱时，产品经理只能靠"肉眼扫描"找页面，效率极低。

命名规则：

• 标准格式：[模块]_[功能]_[状态]，例如 order_list_empty、user_detail_loading
• 使用英文或拼音，统一小写，单词以下划线分隔，禁止中文与特殊字符
• 状态标记统一：空态 empty、加载 loading、错误 error、成功 success
• 页面组命名：[模块名称]，如 订单管理、用户中心

产品经理职责：在PRD中定义每个功能模块的命名前缀，并与设计师在需求评审阶段对齐。命名不一致是联调阶段最常见的问题之一。

3.5 图层命名规范

图层命名是规范体系的细颗粒度管理，直接影响开发对设计元素的识别与引用。一个典型问题：开发在Figma中看到"矩形1""组3"时，无法判断该元素对应PRD中的哪个字段。

命名规则：

• 标准格式：[组件]_[类型]_[序号]，例如 button_primary_01、input_field_02
• 复用组件使用组件库中的命名，不额外起名
• 所有图层必须有意义命名，禁止保留"矩形""椭圆""组"等默认名称
• 使用Figma的"自动布局"功能，减少冗余嵌套图层

检查方法：产品经理在验收设计稿时，随机抽查5个关键页面，检查图层命名中是否出现默认名。出现1个以上默认名即判定为"图层命名不合格"。

指标验证：图层命名合规率 = (有命名图层数 / 总图层数) × 100%，目标值 ≥ 98%。

3.6 组件规范

组件规范是规范体系的基石，通过原子化设计实现复用与版本同步。组件化程度越高，PRD需求变更时的设计响应速度就越快。

核心要素：

• 原子组件：按钮、输入框、图标、标签等基础元素，对应PRD中的最小交互单元
• 分子组件：搜索栏、表单组、卡片、列表项等组合元素，对应PRD中的功能区块
• 组织组件：页面头部、侧边栏、弹窗、步骤条等布局元素，对应PRD中的页面框架

联调对齐方法：PRD中的"组件清单"附录应与Figma组件库的命名和分类保持一致。产品经理维护一份"PRD-组件映射表"，记录每个PRD功能组件对应的Figma组件名称。

3.7 规范执行检查表

产品经理在设计稿验收阶段，可使用以下检查表逐项确认规范执行情况：

验收流程：产品经理在每个迭代周期的"设计评审"环节执行检查表，将发现的问题记录在"规范偏差清单"中，与设计师约定修改完成时间（通常为1-2个工作日）。连续两个迭代检查通过率 ≥ 90% 后，可进入规范固化阶段。