MarkupGen 与 Figma Dev Mode 有什么区别？
如果你曾经把 Figma 设计稿变成真正的代码，大概率听说过这两个名字。Figma Dev Mode 和 MarkupGen 都是为了让设计到代码的交接不那么痛苦而存在的——但它们解决的是流程中不同的环节，值得把各自真正擅长的地方说清楚。
Figma Dev Mode 擅长做什么
Figma Dev Mode 是内置在 Figma 里的一种模式，专门面向需要实现设计稿的开发者。从整体上看，它是一款检查工具：选中某个图层或组件，它会显示背后的具体数值——间距、颜色、字体排版等——并为该图层自动生成代码片段（常见的比如 CSS，或是 iOS、Android 对应的代码）。
这确实很实用，而且有一个优势是本文提到的其他工具都不具备的：它就在 Figma 内部运行，正是设计师和开发者已经在协作的地方。开发者打开 Dev Mode，点选设计稿中的各个部分，不用问任何人就能准确了解某个组件是怎么搭建的。
不过整体而言，Dev Mode 的定位是检查和逐图层的代码片段，而不是产出一个完整、可以直接上线的页面或组件文件。要把它展示的内容变成真正的文件——包括布局结构、响应式表现，把所有东西组装起来——仍然需要开发者一层一层手动完成。
MarkupGen 的不同之处
MarkupGen 的出发点不一样：它不是逐图层检查数值，而是拿整个画框（frame），输出一个结构完整的文件。它是一个 SaaS 平台，配有配套的 Figma 插件，工作流程分四步：
- 导出画框：通过 MarkupGen 插件从 Figma 导出——结构、样式和图片一次性进入你的工作区。
- AI 构建 HTML/CSS：基于设计稿真实的结构和样式生成，而不是粗略近似。
- 可视化微调内容、字体和布局：在应用内的编辑器中完成，导出前随时调整。
- 导出最终代码包：可选纯 HTML/CSS、Tailwind CSS，或 React 组件——按项目需要挑选格式。
因为是在整个画框层面而非单个图层层面工作，会带来几个特点：
- Auto Layout 会作为整体映射为 Flexbox。 整个画框的方向、间距（gap）、内边距和对齐方式会被转换成一套统一连贯的 Flexbox 结构，而不是需要你自己拼接的零散片段。
- 响应式表现自动生成，依据的是设计稿本身在 Figma 中设置的缩放约束——不用自己去猜断点该放在哪里。
- 输出默认具备语义化标签，对 SEO 友好：没有多余嵌套的
<div>，标题层级正确，而不是所有元素都只是样式上看起来像标题。 - 每次导出都会获得自动生成的质量评分，方便你在决定使用之前判断产出离可上线还有多远。
那你该用哪一个？
| Figma Dev Mode | MarkupGen | |
|---|---|---|
| 作用范围 | 单个图层/组件 | 整个画框 |
| 输出内容 | 交接用的数值和代码片段 | 完整的 HTML/CSS 或 React 文件 |
| 运行位置 | Figma 内部 | 独立工作区 + Figma 插件 |
| 最适合 | 检查已有设计 | 直接拿到可用的文件或组件 |
实际上，这两者并不互斥。如果你还在 Figma 里，Dev Mode 是检查、理解设计稿的好方式，这样用完全没问题。而 MarkupGen 则是为那些希望直接拿到一个结构完整的文件、而不是自己动手从检查到的数值拼装出来的团队准备的下一步——它是一个互补的环节，而不是在宣称检查类工具已经过时。
项目内容始终只在你的工作区内保持私密，MarkupGen 不会使用你的私有设计稿为其他客户训练模型。有免费方案可以直接开始使用，如果需要更多功能也有付费方案。
如果想了解一个完整画框是如何变成可运行代码的，可以阅读将 Figma 设计转换为 HTML 的分步指南，或者直接免费试用 MarkupGen，在自己的画框上试一试。有问题可以联系 support@markupgen.com，也可以从首页开始了解。