Figma 转 HTML：几种方案，以及如何跳过转换

为什么 Figma 转 HTML 从来不是一键完成

Figma 画框是一张矢量图。文字、间距和布局由 Figma 计算，而不是由浏览器计算。要得到网页，就必须有某个环节把这张图翻译成 HTML 元素和 CSS 规则，而每一次翻译，都会替你做出你没做过的决定。

自动布局和 flexbox 很接近，但并非一一对应。约束会变成定位规则。字体的渲染效果也不一样。所以转换结果在上线前，通常还得再修一遍。

方案一：Figma 插件

Figma 社区里有好几款 Figma 转 HTML 插件，Anima 等工具还能把画框转成 HTML、React 或 Tailwind。Framer 也提供插件，可以把 Figma 画框粘贴到 Framer 里并直接发布。

• 适合：快速做出静态页面的初稿。
• 注意：自动生成的类名、绝对定位，以及为了适配代码库而不得不重写的标记。

方案二：AI 设计转代码工具

Figma Make 能根据画框生成 HTML、CSS 和 JavaScript，越来越多的 AI 工具也能读取设计稿，为你的技术栈写出组件。

• 适合：快速得到你所用框架的组件。
• 注意：只要设计或代码其中一方改动，两者就会逐渐脱节。

方案三：手动重做

这依然是最常见的做法。开发者看着设计稿，逐一测量，再写出 HTML 和 CSS。结果很干净，但这等于第二个项目，而且设计每改一次，就得再重做一部分。

方案四：从一开始就用 HTML 设计

当画布本身就是网页时，转换问题就不存在了。在 Kalka 中，每个画框都是一个 HTML 元素，你在设计面板里设置的每个属性都是一条 CSS 声明。没有需要翻译的东西，自然也就无需导出。

你得到的是一个文件夹：pages/home.html、styles.css，以及存放在 design-system/tokens.json 中的设计令牌。开发者可以用任意编辑器打开，在 Git 里审查，再接入真正的网站。

哪种方案适合你

• 只做一个落地页，做一次：插件就够了。
• 用 React 或 Vue 组件构建的产品：AI 设计转代码工具，再加上人工审查。
• 反复设计、反复上线的网站：直接用 HTML 设计，彻底跳过转换这一步。

Kalka 正在开发中，并且是开源的。如果第四种方案正是你的工作方式，加入候补名单就能抢先拿到首批版本。