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

把一份完成的 Figma 设计稿手动重建成可用的 React 组件，是那种在设计文件里看起来很简单、一打开代码编辑器就变得繁琐的工作。你要做的不只是写组件——还要重新推导设计中已经存在的间距、对齐方式和响应式行为，然后祈祷经过十几个细小判断之后，结果依然和设计稿一致。下面是一套实用的 Figma to React 工作流，它让你的判断力集中在真正需要的地方：组件边界、布局行为，以及最终结果在不同屏幕尺寸下是否依然站得住。

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

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

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

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

从 Figma 组件到 React 组件

把一个 Figma layer 变成 React 组件，并没有一条放之四海而皆准的规则——这取决于它重复出现的程度、它的变体（variants）代表着什么，以及应用其余部分的组织方式。作为一个起点：一个带有变体的 Figma 组件（比如一个有 primary/secondary 两种状态的 Button），通常应该对应成一个 React 组件，把这些变体作为 props 来处理，而不是每种状态都单独建一个组件：

<Button variant="primary" size="md">
  Get started
</Button>

同样的逻辑也适用于设计中任何重复出现的内容——如果 Figma 文件里有三张相似的卡片，这就是一个信号，说明应该用一个 Card 组件从数组数据渲染出来，而不是复制三份几乎相同的 JSX。最常见的翻车方式是"过度组件化"：把每一个 Auto Layout frame 都拆成单独的文件，只会增加一层间接性，却并不会带来真正的复用。想更完整地了解 Figma 转 React 的概念映射——包括组件边界和变体 props 通常在哪里容易出错——可以看看Figma Auto Layout 转 React：从 Frame 到组件。

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 frame 也会以同样的方式映射成嵌套的 flex 容器，这足以覆盖大多数卡片、列表和导航栏布局——只有少数真正呈网格状的设计，用 CSS Grid 会更合适。如果想更细致地了解这种映射是怎么实现的，可以看看Auto Layout 是如何映射成 Flexbox 的。

让响应式表现真正站得住

响应式行为恰恰是 Figma 转 React 的输出最值得仔细检查的地方，而不是最不需要留意的地方。Auto Layout 的尺寸模式——Hug、Fill、Fixed——以及 frame 的缩放约束，都是关于组件在不同宽度下应该如何表现的真实信号：一个设置为 Fill 的容器，意味着它在 CSS 里应该是一个可伸缩的宽度，或者 flex: 1，而不是一个固定的像素值。但无论是 Figma 还是转换工具，都无法单靠自己生成一份完整、可用的响应式 React 代码——具体的 breakpoint 该设在哪里、布局在移动端应该如何重新排列、组件在某个宽度以下是否需要换一种排布方式，这些判断仍然需要由人来做出，是参考这些信号做出的判断，而不是被信号取代。实践中，这意味着要在几个真实的 breakpoint 上检查生成（或手写）出来的组件，而不是想当然地相信 max-width 或媒体查询已经正确地延续了下来，也意味着把一个只针对桌面端的 Figma frame 当作移动端行为的起点，而不是最终定论。

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

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

• 检查组件的拆分方式。 确认生成的组件拆分方式，和你在自己代码库里会自然采用的拆分方式一致——进入项目之后，你随时可以再进一步拆分。按钮、卡片、导航栏这类会重复出现的 UI，通常正好是适合做成一个组件的粒度；一路拆到每一个 layer，只会增加不必要的间接层级。
• 看 markup，而不只是看视觉效果。 输出结果倾向于使用带有正确标题层级的语义化 HTML、交互部分使用真正的 <button> 和 <a> 元素、图片带有 alt 文本，而不是层层嵌套的 <div>——这才是搜索引擎、屏幕阅读器和键盘导航真正依赖的东西，视觉上和 Figma frame 相似，并不能保证这些细节都已经到位。完整的检查清单可以参考Figma 转无障碍 HTML：实用指南。
• 重新核对内容文案。 导出之后设计稿如果有改动，在应用内编辑器里修改最方便，不必等到把最终代码拉进项目之后再改。
• 接入你自己的数据和 state。 生成的组件负责结构和样式——把它们接入真实的 props、API 数据或应用的 state，仍然需要你自己来完成。

用你自己的设计稿试一试

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

FAQ

如何把 Figma 设计稿转换成 React？ 先检查 frame 的结构和 Auto Layout 设置，判断哪些重复出现的部分应该变成可复用的组件，并用 props 来处理它们的变体，然后基于这个结构搭建（或生成）React 组件和 CSS——Auto Layout 会映射成 Flexbox，缩放约束则决定了响应式行为该怎么做。像 MarkupGen 这样的工具可以自动生成这第一版；不管是哪种方式，在上线之前，针对组件边界、无障碍访问和真实数据做一轮检查都是值得的。

Figma 设计稿能转换成可复用的 React 组件吗？ 可以，但不是每一个 layer 都应该变成一个组件。重复出现的 UI——按钮、卡片、导航项、表单字段——是比较合适的候选；而在设计中只出现过一次的 layer，通常不需要专门为它建一个组件。

Figma 的 Auto Layout 是如何映射到 React 和 CSS 的？ 主要映射成 CSS Flexbox：方向对应 flex-direction，gap 对应 gap，padding 对应 padding，对齐方式对应 justify-content/align-items，并沿用到 React 组件所使用的任意一种 CSS 方案里。

如何让 Figma 转 React 的输出具备响应式？ 先从 frame 的 Auto Layout 尺寸模式和约束入手——它们能反映出设计意图中的缩放行为——但仍然要预留时间自己添加或调整 breakpoint，以及针对移动端单独处理布局。无论是 Figma 还是转换工具，都无法推断出设计中原本并不存在的响应式行为。

是不是每一个 Figma 组件都应该变成一个 React 组件？ 不是。把设计文件里恰好被标记为"组件"的东西全部组件化，往往只会增加间接层级，却不会让代码更容易维护——真正可复用、会重复出现的模式才值得做成组件；只出现一次的 layer 通常不值得。

想直接开始转换你自己的设计稿？用 MarkupGen 把你的 Figma 设计转换成 React →