Figma 转 React：开发者的实用工作流

把一份完成的 Figma 设计稿手动重建成可用的 React 组件，是那种在设计文件里看起来很简单、一打开代码编辑器就变得繁琐的工作。你要做的不只是写组件——还要重新推导设计中已经存在的间距、对齐方式和响应式行为，然后祈祷经过十几个细小判断之后，结果依然和设计稿一致。下面是一条更实际的路径：从 Figma frame 直接到 React 代码。

为什么手动把 Figma 转成 React 组件很慢

开发者在这类交接工作上花的大部分时间，并不是用来解决难题，而是用来把已经做好的设计决策"翻译"成另一种格式：

• 逐层阅读 Auto Layout 设置，再手动把它们改写成 JSX 里的 Flexbox 规则。
• 重新测量 Figma 文件里本就已经精确定义好的 padding、gap 和字号。
• 猜测组件应该在什么时候变成响应式，因为一个 Figma frame 通常只有一个固定宽度。
• 从零搭建组件结构和 props，而不是从一个可用的起点开始。

这些工作都不需要设计能力，也谈不上多难的工程实现——它们只是重复且机械的劳动，而正是这种重复的手动工作，最容易让设计稿和最终上线的界面出现偏差。

MarkupGen 工作流，应用在 React 上

MarkupGen 是一个 SaaS 平台，配有一个 Figma 插件，可以把 Figma 设计转换成 HTML、CSS 或 React 组件，让你从已经生成好的代码开始，而不是从一个空的组件文件开始。整个工作流分四步：

1. 从 Figma 导出 frame。 选中你想转换的 frame，用 MarkupGen 的 Figma 插件把它发送到你的 workspace。插件会一次性抓取这个 frame 的结构、样式和图片，而不需要你一层一层地手动复制。

2. AI 根据真实设计构建代码。 接下来，AI 会基于这个 frame 真实的结构和样式来生成 HTML 和 CSS——而不是对设计"大概长什么样"做一个笼统的猜测。

3. 选择 React 作为输出格式。 输出格式是每次导出时可以选择的：纯 HTML/CSS、Tailwind CSS，或者 React 组件。选择 React，你得到的组件就是基于同一套结构构建出来的，可以直接放进已有的代码库，而不只是一个静态页面。（如果你需要的是纯 HTML/CSS，可以参考这篇 Figma 转 HTML 的通用指南。）

4. 微调后再导出最终代码包。 在生成最终代码之前，应用内的编辑器可以让你以可视化的方式调整内容、字体和布局。每次导出还会自动获得一个 AI 质量评分，让你一眼就能看出这份输出是不是已经接近生产可用，还是需要再打磨一轮。

Auto Layout 如何在组件内部变成 Flexbox

这套工作流最能省下手动工作量的地方在于布局。Figma 的 Auto Layout 属性——方向、gap、padding 和对齐方式——会自动映射成对应的 CSS Flexbox 结构，而且这种映射会直接体现在生成的 React 组件里，而不只是一个静态 HTML 页面。一排设置了 gap 的 Auto Layout 元素，会变成一个 flex 容器，gap、padding 和对齐方式已经写进了组件的样式里，而不是需要你自己凭肉眼去调。如果想更细致地了解这种映射是怎么实现的，可以看看Auto Layout 是如何映射成 Flexbox 的。

响应式行为遵循同样的逻辑：breakpoint 和流式尺寸，都是根据 Figma 里 frame 已经设置好的缩放约束自动生成的，所以一个组件不会被锁死在设计时的那一个宽度上。

把组件合并进应用之前先做一轮检查

生成的代码已经完成了大部分工作，但在合并到已有应用之前，做一轮检查仍然值得：

• 检查组件的拆分方式。 确认生成的组件拆分方式，和你在自己代码库里会自然采用的拆分方式一致——进入项目之后，你随时可以再进一步拆分。
• 看 markup，而不只是看视觉效果。 输出结果倾向于使用带有正确标题层级的语义化 HTML，而不是层层嵌套的 <div>，这一点值得快速扫一遍，因为搜索引擎和屏幕阅读器同样依赖这一点。
• 重新核对内容文案。 导出之后设计稿如果有改动，在应用内编辑器里修改最方便，不必等到把最终代码拉进项目之后再改。
• 接入你自己的数据和 state。 生成的组件负责结构和样式——把它们接入真实的 props、API 数据或应用的 state，仍然需要你自己来完成。

用你自己的设计稿试一试

这一切都不能替代开发者对组件行为的判断——它去掉的是把已经确定的布局决策翻译成 JSX 和 CSS 的那部分机械劳动，让你的判断力可以用在真正需要它的地方。MarkupGen 提供免费方案，你可以先免费开始使用，等真正需要更多功能时再升级——没有隐藏费用，随时可以取消。如果想在真实设计稿上看看完整的四步流程，欢迎用你自己的 Figma 文件试试。有任何问题，可以发邮件到 support@markupgen.com。