我的设计工作流：从 Figma 到代码

作为一名同时做设计和开发的独立创作者，我摸索出了一套减少反复的工作流，本文完整记录下来供参考。

阶段一：设计系统先行

在开始任何页面设计之前，先建立 Design Token：颜色、字体、间距、圆角、阴影。这些 Token 后续会直接映射到 CSS 变量，保证设计与实现的一致性。

阶段二：组件化思维

在 Figma 中使用 Component 和 Variant 系统，与代码中的 React/Vue 组件一一对应。命名规范直接影响后续开发效率，建议采用 Component/Variant/State 的层级。

阶段三：Dev Mode 交接

Figma Dev Mode 可以直接查看 CSS 属性值，搭配 Variables 面板，开发者基本不需要反复询问设计稿细节。

阶段四：边开发边同步

我习惯使用 Storybook 作为开发态的组件展示，方便随时与 Figma 设计稿对比。任何 UI 细节的差异都在这个阶段修正，避免上线前的大面积返工。