有些设计稿在1440像素下非常完整，开发一做响应式就变形；有些前端为了复用组件改变了间距，设计师只在上线前才发现。
还原质量来自前期可实现设计、清楚交付和过程走查，不是最后拿截图找不同。
01 设计文件先具备工程结构
使用组件、变体、Auto Layout和样式/变量表达规则，减少大量脱离系统的局部图层。
页面命名、版本和已确认区域清楚，让开发知道哪些是探索、哪些是交付。
02 交付的是规则，不只是数值
说明容器最大宽度、栅格、换行、隐藏、固定、滚动和断点变化。
Dev Mode可以读取尺寸，却不能自动理解内容优先级和业务行为。
Figma到网站交付清单
| 内容 | 设计侧 | 开发侧 |
|---|---|---|
| 组件 | 属性、状态、使用规则 | 建立对应API和复用结构 |
| Token | 颜色、字体、间距、圆角语义 | 变量、主题与CSS实现 |
| 响应式 | 关键宽度和变化规则 | 流式布局和内容断点 |
| 资源 | 格式、尺寸、焦点、授权 | 优化、响应式加载与缓存 |
| 动效 | 触发、时长、缓动、降级 | 性能实现与减少动态支持 |
| 内容 | 真实文案、边界和空状态 | CMS字段、溢出与国际化 |
| 验收 | 优先级、设备和浏览器 | 分阶段部署与修复 |
03 开发前做可行性评审
复杂动画、3D、模糊、混合模式和特殊字体应提前验证性能与兼容。
若实现成本过高，设计和开发共同寻找等价体验，不要到最后偷偷删掉。
04 使用真实内容与CMS验证
设计占位文字通常长度理想，真实标题、多语言、图片缺失和内容数量会暴露布局问题。
在开发早期接入一组真实数据，而不是直到上线才录入。
05 分模块走查，不等全站完成
先验收导航、按钮、表单、卡片和关键模板，修正系统偏差后再扩展。
问题分为功能、可用性、系统一致性和轻微视觉差异，按业务影响处理。
06 建立最终验收和回归
覆盖主要浏览器、设备、键盘、触控、加载、错误和内容边界。
修复后检查其他页面是否受组件变化影响，必要时使用视觉回归工具。
常见问题
Figma可以直接一键生成可用网站吗？
工具能加速基础实现，但复杂业务、响应式、性能、可访问性和维护仍需工程判断。
设计稿必须按前端框架组件拆吗？
不必完全跟代码结构一致，但组件边界和属性应便于映射。
开发与设计像素差多少算合格？
不应只用单一像素阈值，应按品牌、层级、行为和关键组件验收。
什么时候开始设计走查？
关键组件和首个页面完成时就开始，越晚改动成本越高。
源图片由谁优化？
可由设计提供原始与裁切规则，开发负责格式、尺寸和加载实现，双方确认。
链接复制成功
