如何将 Figma 设计稿转换为整洁的 HTML 和 CSS（分步教程）

把 Figma 文件交给开发者，通常意味着有人要坐下来，把每一个 frame 都用 HTML 和 CSS 手动重建一遍：测量间距、猜测断点，然后祈祷经过一堆琐碎决定之后，最终页面依然还原设计稿。本文将介绍一条更快的路径——从一个完成的 Figma 设计直接生成整洁、语义化的标记代码。

为什么手动的 Figma 转 HTML 交付很慢

交付过程中花费的大部分时间并非创造性工作，而是"翻译"工作：

• 阅读 Auto Layout 设置，再手动将其重新实现为 Flexbox 规则。
• 重新测量 Figma 文件中其实已经定义好的内边距、间距和字号。
• 决定响应式断点该设在哪里，因为 Figma frame 通常只有一个固定宽度。
• 清理标记代码，避免出现十层嵌套、毫无语义的 <div> 标签。

这些事情本身都不难，但都是重复性劳动，而错误和不一致恰恰最容易在重复性的手动工作中悄悄出现。

第一步：从 Figma 导出 frame

与其导出静态图片或逐层复制样式，不如选中要转换的 frame，使用 MarkupGen 的 Figma 插件将其发送到你的工作区。插件会一并捕获该 frame 的结构、样式和图片，因此无需从零重新创建任何内容。

第二步：让结构自动映射为代码

这一步正是大部分手动工作消失的地方。以下是一些会被自动转换的示例：

• Auto Layout → Flexbox。 Figma 的 Auto Layout 属性（方向、间距、内边距、对齐方式）会直接映射为等效的 CSS Flexbox 结构，而不需要靠肉眼估算。
• 约束（Constraints）→ 响应式断点。 布局的缩放约束会转化为流式的响应式规则，而不是单一固定宽度的页面。
• 图层 → 语义化 HTML。 输出结果会优先使用有意义的元素，而不是一堆深层嵌套、没有标签的 <div>：页面区块会变成 <section>，导航栏会变成 <nav>，标题会按正确层级变成 <h1>–<h3>，段落会变成 <p>，按钮会根据其行为变成 <button> 或 <a>，图片会变成带 alt 属性的 <img>。一个本身没有特定含义的通用布局容器，仍然会保留为 <div>——并非每一个 Figma 图层都有现成的语义标签可用，选择哪个标签取决于内容实际代表的含义，而不是一张固定的对照表。

第三步：选择输出格式

并非每个项目都需要同一种代码。根据你要交付的技术栈，你可以导出为：

• 原生 HTML/CSS——适用于静态网站或无需构建步骤的项目。
• Tailwind CSS——根据设计稿实际的间距、颜色和排版 token 生成的工具类；更多细节参见Figma 转 Tailwind CSS：实用转换指南。
• React——可以直接放入现有应用中使用的组件；详见Figma 转 React：开发者的实用工作流。

第四步：导出前进行调整

自动化转换已经完成了大部分工作，但从设计到代码的过程很少能做到 100% 机械化——文案可能需要微调，某个区块也可能需要手动调整布局。编辑器允许你在生成最终导出包之前，以可视化方式调整内容、字体和布局，并且每次导出都会自动打分，让你一眼就能看出输出结果是否已经达到可上线的标准。

处理响应式：不只是照搬桌面端的像素值

一个 Figma frame 通常只代表一个特定宽度——比如一个 1440px 的桌面端 frame，旁边可能还有一个单独的移动端 frame。但这并不意味着把这个宽度写死在 CSS 里，再用 transform: scale() 整体缩放页面。Figma 本身并不会自动生成响应式 CSS——它只是提供了一些信号，把这些信号转化为真正的响应式行为，仍然是开发者或转换系统的工作：

• Auto Layout 的 hug / fill / fixed 尺寸设置告诉你一个元素应该随内容收缩还是撑满容器——这是选择 width: auto、width: 100% / flex: 1，还是固定 max-width 的依据。
• 约束（Constraints）（左右固定、随容器缩放……）为 Auto Layout 无法管理的元素补充了行为规则。
• 媒体查询仍然是必要的——在任何布局形态真正发生变化的宽度上（列堆叠为单列、导航收起等），因为 Figma frame 只捕捉了少数几个固定的视口尺寸，而不是它们之间的完整范围。

目标是在不同屏幕尺寸下还原设计意图中的响应式行为，而不是照搬手头这一个 frame 的精确像素值。

这里所说的"整洁"到底意味着什么

"整洁的代码"不只是一句营销口号——它是一组具体、可核查的特性：

1. 不会在单个元素外多套一层多余的 <div> 包裹。
2. 具有正确的标题层级（h1 → h2 → h3），而不是所有内容都被设置成看起来像标题的样式。
3. 在合适的地方使用语义化标签——这恰好也是搜索引擎和屏幕阅读器理解页面所需要的。

最后这一点比看起来更重要——对浏览器和爬虫来说容易解析的标记代码，对下一个接手的开发者来说同样也更容易阅读。这在结构上也正是无障碍访问所依赖的大部分基础；语义标签之外仍需人工检查的内容——ARIA、表单、对比度、键盘导航——请参见Figma 转无障碍 HTML：实用指南。

一个小例子：从 Auto Layout 到真实标记代码

以一张简单的卡片为例——一个图标、一个标题和一个"Learn more"链接，用 Auto Layout（垂直方向、16px 间距、24px 内边距）排布。如果手动重建，很容易随手堆出一叠没有语义标签的 <div>。而如果是从 frame 的真实结构转换而来，同一张卡片会变成这样：

<article class="feature-card">
  <img src="/icons/rocket.svg" alt="" class="feature-card__icon" />
  <h3 class="feature-card__title">Fast setup</h3>
  <a href="/docs/getting-started" class="feature-card__link">Learn more</a>
</article>

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

有几个细节值得注意：这张卡片用的是 <article>，而不是一个通用的容器元素，因为它是一段自成一体的内容。图标使用了 alt=""，因为它是装饰性的——标题文字已经足以传达这张卡片的主题。"Learn more" 是一个真正的 <a href>，而不是绑定了点击事件的 <div>，因为它要跳转到另一个页面。Auto Layout 的 vertical 方向和 16px 间距，会直接映射为 flex-direction: column 和 gap: 16px——完全不需要靠肉眼估算。这是最常见的映射方式，但还有更多细节需要处理（内边距、对齐方式、hug/fill 尺寸、嵌套的 Auto Layout）；更完整的映射关系请参见Figma Auto Layout 转 CSS：如何映射到 Flexbox（以及何时该用 Grid）。

将 Figma 转换为 HTML 时常见的错误

手动将 Figma 设计转换为代码时，有几个错误会反复出现：

• 把每一个图层都变成 <div>。 忽略内容本身实际是什么（导航、标题、按钮……），会让屏幕阅读器和搜索引擎都更难理解这段标记代码。
• 过度使用 position: absolute。 它能精确还原 Figma 画布上的像素位置，但只要内容或屏幕尺寸一变，布局就会崩坏。
• 忽略 Auto Layout，靠肉眼手动估算间距。 这比直接从设计文件中已定义好的属性转换而来，更容易出错，也更难维护。
• 把桌面端尺寸写死，把响应式当成事后补救，而不是从一开始就构建灵活的布局。
• 标题层级混乱——按字号看起来是否像标题来选择，而不是遵循正确的 h1 → h2 → h3 顺序。
• 多余的包裹 <div>——套在一个本身已经有意义的元素外面，或者把"视觉上看起来一样"和"语义上表示同一件事"混为一谈。

这套流程在真实工作流中的位置

这套流程并不是要取代开发者的判断力——它只是去掉了机械式的转换步骤，让开发者的判断力能够真正用在需要的地方：交互细节、边界情况，以及将页面整合进更大的代码库中。想知道这跟手写代码比起来有什么不同，可以看看这篇对比文章；如果你想了解代理公司是如何把它融入客户工作流程的，也可以参考这篇。如果你想在产品中亲自体验完整的四步流程——导出、构建、调整、导出，可以用你自己的 Figma 文件免费试用。

常见问题

如何将 Figma 转换为 HTML？ 选中要转换的 frame，读取它的图层结构和 Auto Layout 设置，再把这些信息翻译成语义化 HTML 和对应的 CSS——Auto Layout 变成 Flexbox，约束变成响应式行为。你可以手动完成这一过程，也可以使用 MarkupGen 这类自动化工具，省去重复性的翻译工作。

能否把 Figma 转换为响应式的 HTML 和 CSS？ 可以，但无法做到完全自动化。Auto Layout 和约束能提供关于缩放行为（收缩、撑满、固定）的信号，但具体断点的设定，以及在不同屏幕尺寸下检查布局，仍然需要人工或转换系统进行判断。

Figma 的 Auto Layout 在 CSS 中对应什么？ 主要对应 CSS Flexbox：方向对应 flex-direction，间距对应 gap，内边距对应 padding，对齐方式对应 justify-content/align-items。更详细的映射关系，包括什么时候该用 CSS Grid 而不是 Flexbox，请参见Figma Auto Layout 转 CSS。

将 Figma 转换为 HTML 时应该使用语义化 HTML 吗？ 应该。语义化 HTML（nav、article、button，以及正确的标题层级……）能帮助屏幕阅读器和搜索引擎正确理解页面结构——这不仅仅是代码美观与否的问题。

将 Figma 转换为 HTML 的过程能自动化吗？ 大部分可以——读取图层结构、把 Auto Layout 映射为 Flexbox、根据约束生成断点——但最终的审查（文案、边界情况、整合进代码库）仍然需要人工把关。

想直接开始转换你自己的设计吗？用 MarkupGen 将你的 Figma 设计转换为 HTML/CSS →