2. Figma原型工具与组件库搭建：Figma环境、复用组件、按键样式库
硬件产品经理需要快速验证3×4键盘矩阵的按键手感区域。如果每次调整布局都要从零开始画矩形、调颜色，一周只能迭代3次；采用Figma组件库后，拖拽式布局让迭代速度提升到一天10次。本章将搭建这套基础设施，围绕真实用户场景从环境配置到组件交付完整落地。
2.1 用户访谈：原型设计中的“重复造轮子”之痛
通过访谈5位硬件产品经理和3位结构工程师，我们收集了3个关键痛点：
- 痛点1： 设计文件散落在各人电脑，无统一组件库，导致“这个按键半径我改过3版，你用的是哪版？”
- 痛点2： 交互逻辑用静态画板模拟，评审时无法直观感受按压反馈。
- 痛点3： 从Figma到结构件的尺寸标注靠手动测量，误差频发。
2.2 业务问题与需求拆解
从访谈中拆解出对Figma环境的4项核心需求：
| 需求ID | 需求类型 | 需求描述 | 优先级 |
|---|---|---|---|
| REQ-01 | 环境 | 支持团队协作与权限管理 | P0 |
| REQ-02 | 组件 | 建立可复用的按键组件库（Icon/State/Variant） | P0 |
| REQ-03 | 样式 | 定义颜色、文字、阴影样式Token | P1 |
| REQ-04 | 交付 | 支持导出设计Spec供结构工程师参考 | P1 |
2.3 方案表达：Figma团队与项目初始化
在Figma中创建团队空间，按产品线划分项目。以下是推荐的标准目录结构：
Figma团队: XX硬件产品设计中心
├── 01-按键组件库 (Library)
│ ├── 基础形状 (矩形/圆角/圆形)
│ ├── 交互状态 (Default/Hover/Pressed/Disabled)
│ └── 物理按键 (薄膜/机械/电容)
├── 02-产品原型 (Projects)
│ ├── 智能面板V1.0
│ └── 键盘矩阵V2.0
└── 03-设计系统 (Design System)
└── Token & Style Guide
最佳实践： 推荐启用Figma的“库”功能，将按键组件库发布为团队库，所有成员可通过Assets面板直接拖拽复用，无需重复下载源文件。
2.4 搭建复用组件与按键样式库
按键组件需要支持多种状态和尺寸。利用Figma的变体（Variants）和组件属性（Component Properties）实现。
- 基础按键： 创建一个圆角矩形，填充色绑定Token
--key-bg。 - 交互状态： 使用变体添加Pressed（深色）、Disabled（灰色）状态。
- 尺寸预设： 通过组件属性暴露宽/高，方便调整为12mm/15mm等规格。
- 物理特性： 添加“按键高度”（Key Height）和“段落感”（Tactile）等文本属性，供设计师标注。
注意： Figma变体中的状态名称必须使用英文或拼音，避免在开发侧解析时出现编码问题。建议使用
Default、Pressed、Disabled。
样式库Token定义表示例：
| Token名称 | Figma样式类型 | 值 | 用途 |
|---|---|---|---|
| --key-bg-default | Fill | #E0E0E0 | 按键默认背景 |
| --key-bg-pressed | Fill | #BDBDBD | 按键按下背景 |
| --key-shadow | Effect | 0px 2px 4px rgba(0,0,0,0.2) | 按键阴影 |
| --key-radius | Corner | 4px | 按键倒角 |
2.5 指标验证与验收标准
如何验证组件库搭建成功？以下是核心量化指标：
- 复用率： 新原型中组件实例使用率 > 80%。
- 一致性： 同一Token在全库中的颜色/尺寸偏差 < 1px。
- 易用性： 新成员从加入团队到完成第一个画板搭建，耗时 < 15分钟。
验收标准清单
| 检查项 | 验收标准 | 结果 |
|---|---|---|
| Figma团队空间 | 已创建，成员可正常访问 | ☐ 通过 / ☐ 未通过 |
| 按键组件库发布 | 已发布为团队库，支持拖拽使用 | ☐ 通过 / ☐ 未通过 |
| 样式Token落地 | 颜色、文字、阴影样式已定义 | ☐ 通过 / ☐ 未通过 |
| 模板原型测试 | 完成一个标准键盘矩阵的拖拽组装 | ☐ 通过 / ☐ 未通过 |
交付物核心： 一个可供PM、设计师、工程师共同查阅的“唯一真实来源（Single Source of Truth）”组件库。