04 · 设计稿还原：从 Figma 到代码的工程化协作
"还原度 95%"和"还原度 99%"的差距，不在手速，在方法。 还原不是对着设计稿一行行抄像素，而是把设计稿翻译成"可维护的代码结构 + 设计 token + 验收基线"。本篇讲怎么读设计稿、怎么翻译、怎么验收。
速览卡
| 项 | 内容 |
|---|---|
| 一句话定位 | 把"看设计稿写代码"升级成"读意图 → 用 token → 建组件 → 定验收"的工程化协作流程 |
| 核心内容 | 怎么读设计稿（意图而非像素）、设计 token 的使用、组件化还原、响应式与多端、还原度验收、与设计师协作 |
| 读完能回答 | 拿到设计稿先看什么？间距/颜色该硬编码还是用 token？还原度怎么量化验收？ |
| 相关板块 | H03 · UI/UX 基础 ｜ B11 · 组件与主题 ｜ A14 · 组件 API 与设计系统 |
一、先读"设计意图"，再读"像素"
设计稿有两层信息：
| 层 | 内容 | 怎么读 |
|---|---|---|
| 意图 | 为什么这么排、重点是什么、层级关系 | 看结构和关系 |
| 像素 | 具体尺寸、颜色、间距 | 看数值，但别直接硬编码 |
直接照抄像素的后果：设计一改，你到处改。先问"这个间距是想表达什么关系"，再落成 token 或组件属性。
二、用 token，不用裸值
间距、颜色、字号、圆角都应该来自设计 token，而不是随手填的数值：
| 场景 | 裸值做法 | token 做法 |
|---|---|---|
| 间距 | 24 / 16 / 8 散落 | 用 spacingXl / spacingMd 等语义 token |
| 颜色 | #3B82F6 到处都是 | 用 color.primary，换主题只改一处 |
| 圆角 | 12 / 8 / 4 | 用 radius-lg / radius-md |
判断标准：同一个值出现多次时，就该是 token。token 让"设计改版"从"全局搜索替换"变成"改一处配置"。
三、组件化还原：先抽组件，再拼页面
还原页面的正确顺序：
text
① 拆出设计稿里的重复块（卡片、按钮、列表项）
② 先实现这些基础组件
③ 用组件拼页面
④ 把可变部分参数化（状态、尺寸、文案）一个信号：如果两个页面有长得一样的块，但你在两份代码里各写一遍，说明没做组件化。组件化是还原的长期投资。
四、响应式与多端
设计稿通常只有一两个断点，但真实设备千差万别：
| 问题 | 处理 |
|---|---|
| 小屏文字溢出 | 自适应布局 + 动态字号，文本不硬性截断 |
| 横竖屏 | 图表横屏、键盘弹起等边界提前确认 |
| 不同密度 | 用设计系统换算，不手写 750 基准裸值 |
| 无网络/弱网 | 加载态、空态要提前和设计对齐 |
移动端 750 宽度基线等项目的换算坑，见 B02 Flutter 核心基础。
五、还原度验收：量化，不靠感觉
验收还原度要有可操作标准：
| 维度 | 验收方法 |
|---|---|
| 布局 | 关键容器尺寸/间距对照 token |
| 颜色/字号 | 用 token 比对，确认无硬编码裸值 |
| 状态 | 加载/空/错误/权限四态齐全 |
| 交互 | 点击反馈、动效参数一致 |
| 多端 | 至少测小屏 + 标准屏 + 横屏 |
建议截图对比：实现页与设计稿并列，逐区域核对。Flutter 项目的 golden test 就是把这个流程自动化（见 B19 测试实战）。
六、和设计师的高效协作
| 做法 | 好处 |
|---|---|
| 还原前先确认 token 与组件 | 避免返工 |
| 模糊处直接问意图 | 比猜了再改快 |
| 把"做不到/代价高"的早点说 | 让设计提前调整 |
| 用截图 + 事实验收 | 减少"感觉不对"的来回 |
自检清单
- [ ] 拿到设计稿先读意图，再读像素
- [ ] 间距/颜色/字号用 token，无散落裸值
- [ ] 重复块已抽成组件，可变部分已参数化
- [ ] 覆盖小屏、多端、状态四态
- [ ] 用 token + 截图做量化验收
- [ ] 还原前与设计对齐 token 与组件
常见误区
| 误区 | 事实 |
|---|---|
| "照着像素抄就对" | 意图 + token 才可维护，裸值抄完就散 |
| "还原 = 静态一致" | 状态、交互、多端都要还原 |
| "还原度是设计定的" | 开发者要能自查自验，不是等反馈 |
| "组件化拖慢交付" | 首次稍慢，后续页面复用收益大 |
动手练习
练习 A：把设计稿拆组件
拿一个页面设计稿，画出组件拆分图：哪些是基础组件、哪些是组合组件、哪些可变。
练习 B：token 审计
扫描一个已实现的页面，找出散落的裸值（颜色/间距/圆角），列成清单并替换为 token。
练习 C：截图验收
实现一个页面后，与设计稿并列截图，逐区域核对并列出差异清单，按差异大小排序修复。
相关文档
本区
- 03 · UI/UX 基础 —— 还原背后的判断框架
- 05 · 可访问性 —— 还原时不牺牲可用性
其他域
- B11 · 组件与主题 —— Flutter 组件与 token
- B19 · 测试实战 —— golden test 自动化验收
- A14 · 组件 API 设计与设计系统 —— 前端设计系统