设计师请注意：这样画Figma，AI还原度才能高

Zeros
9 阅读6分钟

设计师请注意：这样画Figma，AI还原度才能高

2025.03

前两天跟一个前端朋友聊天，他说最近用 Figma MCP 还原设计稿，效果不错。

但有个前提——设计师得按规范来画。

他自己试了一下，发现同一个页面，有的设计稿还原度能到 90%，有的只有 50%。差别在哪？

差别在于设计稿本身的质量。

垃圾进，垃圾出。

AI 再聪明，也读不懂一团乱麻的图层结构。

D2C 还原度低，问题往往在设计稿

很多人以为 D2C 工具不行，其实很多时候是设计稿本身有问题。

我见过太多这样的设计稿：

  • 图层名字全是 "Group 45"、"Rectangle 23"
  • 元素用鼠标拖来拖去，完全没有 Auto Layout
  • 同样的颜色在十个地方重复出现，没有用 Variables
  • 一个按钮复制了二十次，而不是做成组件

这种设计稿，人看着都费劲，AI 怎么可能读懂？

D2C 的本质是把设计结构翻译成代码结构。如果设计本身就没有结构，翻译就无从谈起。

规范一：Auto Layout 是必须的，不是可选的

这是最重要的一条。

不用 Auto Layout 的设计稿，D2C 基本废了。

为什么？

因为 Auto Layout 是 Figma 的"弹性布局"——它定义了元素之间的对齐、间距、填充规则。这些规则可以直接映射到 CSS 的 Flexbox/Grid。

如果你用鼠标自由拖拽元素，AI 只能看到一堆绝对的坐标值。生成的代码全是 position: absolute 和 left: 237px，完全没有响应式能力。

怎么用 Auto Layout？

几个基本原则：

  • 方向：水平排列用 Horizontal，垂直排列用 Vertical
  • 间距：用 Gap 控制，不要手动一个个调
  • 内边距：用 Padding，不是往里面塞一个透明矩形
  • 响应式：设置 Min/Max Width，让容器能适应内容

Auto Layout 对 D2C 工具的代码生成质量至关重要。这是抖音前端团队在 Semi D2C 方案里明确强调的。

规范二：命名要有意义，别再 Group 45 了

看一眼你的图层面板。

如果满屏都是 "Frame 100"、"Group 45"、"Rectangle 23"，那就对了——这正是 D2C 还原度低的原因之一。

AI 读到这些名字，完全不知道这是什么元素。

应该怎么命名？

用语义化的命名，像写代码一样：

❌ 不好的命名✅ 好的命名
Group 45Header/Main
Rectangle 23Card/Container
Frame 100Button/Primary
text layerText/Title

可以用类似 BEM 的结构：组件/元素/状态。

命名规范的好处是：

  1. AI 能理解元素的作用
  2. 生成的代码变量名更清晰
  3. 后期维护更容易

规范三：用组件，不要复制粘贴

同一个按钮，你在设计稿里复制了二十次。

看起来省事了，但 D2C 工具会认为这是二十个不同的元素，生成二十份代码。

应该怎么做？

把按钮做成 Component，然后用 Instance 复用。

这样 AI 就知道：这是一个组件，代码里只需要写一次，其他地方引用就行。

组件化的好处：

  • 代码更简洁，不会重复
  • 修改一处，全局生效
  • 符合前端开发的最佳实践

规范四：用 Variables 管理设计令牌

颜色、间距、字号——这些东西不要直接填值。

问题场景：主色蓝 #3B82F6 在设计稿里出现了五十次。后来品牌升级，要改成 #2563EB。

如果没用 Variables，你得改五十次。

如果用了 Variables，改一次就行。

对 D2C 的意义更大。

用了 Variables，AI 生成的代码会使用 $primary-blue 这样的设计令牌，而不是硬编码 #3B82F6。

这意味着：

  • 代码更易维护
  • 符合 Design System 规范
  • 后面改主题色，改一个变量就完事

Variables 应该包括：

  • 颜色（primary, secondary, success, warning...）
  • 间距（spacing-xs, spacing-sm, spacing-md...）
  • 字号（font-size-sm, font-size-md...）
  • 圆角（radius-sm, radius-md...）
  • 阴影（shadow-sm, shadow-md...）

规范五：间距用 8 的倍数

这个是老生常谈了，但确实重要。

8px、16px、24px、32px、40px...

为什么是 8？

  • 主流屏幕分辨率是 8 的倍数
  • 前端 CSS 框架大多基于 8px 栅格
  • 视觉上更协调，不会出现奇怪的对齐问题

对 D2C 的影响：

间距规范，生成的代码也规范。间距乱七八糟，代码里就会出现 margin: 13px、padding: 7px 这种奇怪的值。

规范六：层级不要太深

图层结构要有逻辑，但不要嵌套太深。

问题场景：

Frame 1
  └── Frame 2
        └── Frame 3
              └── Frame 4
                    └── Group 5
                          └── Rectangle 6
                                └── 文字

这种深层嵌套，D2C 工具会生成一堆无意义的 <div> 套娃。

应该怎么做？

保持结构扁平，只在必要的地方分组：

Card
  ├── Image
  ├── Title
  └── Description

层级清晰，代码也清晰。

规范七：建立 Design System，别各自为战

最后一点，也是最重要的一点。

如果团队里每个人画图的风格都不一样，用 Token 的方式也不一样，D2C 就没法 scale。

需要统一的 Design System：

  • 统一的组件库（Button、Input、Card...）
  • 统一的 Variables（颜色、间距、字号...）
  • 统一的命名规范
  • 统一的 Auto Layout 用法

Figma 的 Design System 功能已经很强了——Components、Variants、Variables、Styles 都有。

用起来。

总结一下

规范原因
用 Auto Layout布局规则能映射到 CSS Flexbox/Grid
语义化命名AI 能理解元素作用，生成更好的变量名
用组件复用避免代码重复，符合前端最佳实践
用 Variables设计令牌统一管理，代码易维护
8px 倍数间距生成的 CSS 更规范
扁平层级避免无意义的 div 套娃
建立 Design System团队协作一致，D2C 可规模化

说白了

D2C 不是魔法。

它是一个翻译器——把设计的结构翻译成代码的结构。

如果你在设计的时候就没有结构，翻译就无从谈起。

AI 再聪明，也读不懂一团乱麻。

但如果你按规范来画——Auto Layout、语义命名、组件复用、Variables 管理——D2C 的还原度可以很高。

设计师多花一点心思在设计规范上，前端就能少花很多时间在"还原"上。

这才是真正的效率提升。

参考资料

写作日期：2026年3月30日
标签：#Figma #D2C #设计规范 #AutoLayout #DesignSystem #前端协作

avatar
文章
阅读
粉丝