Figma 转 HTML：通过 PNG 导出

IMG2HTML 不连接你的 Figma 账号，也没有插件。它做的是转换图片，而 Figma 点几下就能把任意 Frame 导出为 PNG。导出 Frame、上传 PNG，你就能得到重建该设计的 HTML 和 Tailwind CSS。

第 1 步：从 Figma 把 Frame 导出为 PNG

在画布上选中 Frame。每个 Frame 导出一个界面或一个区块。
在右侧边栏找到 Export 区域（在 Design 面板底部；如果你只有查看权限，则在 Properties 标签页下），点击 + 图标。
把格式设为 PNG；如果设计里有小字，把缩放设为 2x。
点击 Export。选中多个 Frame 时，Mac 上按 Shift+Cmd+E、Windows 上按 Shift+Ctrl+E，可以为所有选中的 Frame 打开导出对话框。

这些步骤参照 Figma 官方指南 Export static designs from Figma（英文，核对于 2026年9月23日）。

第 2 步：把 PNG 转成 HTML

把 PNG 上传到 IMG2HTML。下面这个 Frame 是一个虚构发票应用的落地页首屏，尺寸 1536 x 864，用了 23 秒返回一个 320 行的 HTML 文件。它是为本页用图像模型生成的，并非从真实的 Figma 文件导出，但和 Figma 导出的 PNG 一样是扁平、像素精确的图片，输出也与 IMG2HTML 返回的完全一致。

一个导出为 PNG 的桌面端设计稿 Frame

输入： 落地页设计稿 Frame（PNG，1536 x 864）

输出： 生成的 HTML 在 Chrome 中以 1280px 宽度渲染，未做任何修改。共 320 行 HTML，使用 Tailwind CSS，23 秒返回。

做对了什么

整个首屏：胶囊标签、双色标题、段落，以及实心和描边两种按钮，用的都是设计稿里的紫色。
仪表盘卡片是真正的 HTML：带当前选中项的侧边菜单、待收金额、用 div 搭出来的柱状图，以及三行发票，Paid、Due、Overdue 徽标分别是绿色、橙色和红色。
一排客户 logo，每个名称都是文字。

需要手动修改的地方

logo 都是替代品：Ledgerly 的标志是一个通用的叠层 SVG，Globex 和 Northwind 用了 Font Awesome 图标，Stark Industries 那一块用了页面里从未定义的 bg-dark 类，所以看不见。换成你自己的 SVG。
胶囊标签里的闪光图标是 fa-sparkles，Font Awesome 5 免费版里没有这个图标，所以什么也不显示。
在 1280 像素宽度下发票行很挤，INV-0042 折成了两行。给右侧列多留些空间，或者缩短日期列。

ledgerly-frame.html（body 的开头几行）

 <body class="min-h-screen">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
   <div class="flex items-center space-x-12">
    <div class="flex items-center space-x-2">
     <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5" fill="white" viewbox="0 0 24 24">
       <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5">
       </path>
      </svg>
     </div>
     <span class="text-xl font-bold text-dark">
      Ledgerly
     </span>
    </div>
    <div class="hidden md:flex space-x-8 text-muted font-medium">
     <a class="hover:text-primary transition" href="#">
      Features
     </a>
     <a class="hover:text-primary transition" href="#">
      Pricing
     </a>
     <a class="hover:text-primary transition" href="#">
      Customers
     </a>
     <a class="hover:text-primary transition" href="#">

打开完整的生成页面（320 行）

第 3 步：让代码和设计稿重新对齐

模型读取的是 Frame 图片，而不是你的 Figma 文件，所以最后一步是补回只有 Figma 知道的信息：

精确颜色。 在这个示例中，它为紫色选了 #5a4cf5，为背景选了 #f8f7ff。和你的颜色样式对比一下，或用免费的图片取色器从导出图中取值，然后在一个地方统一替换。
素材。 从 Figma 把 logo 和图标导出为 SVG，替换掉代码里的替代品。
断点。 桌面端 Frame 生成的是桌面优先的页面。如果同一界面还有移动端 Frame，也转换一下再合并响应式类名，或在编辑器里调整。

什么时候比手写代码快，什么时候不是

文字多、重复元素多的界面最省时间：落地页、仪表盘、设置页、价格表。布局和每个文字标签都已经替你敲好了。以自定义插画为主的界面，或者团队有必须使用的组件库时，省的时间最少；这时输出更适合作为结构和文案的参考，而不是直接上线的代码。

不用 Figma？同样的流程也适用于线上页面的截图和App 设计稿。所有示例都汇总在图片转 HTML页面。

Figma 转 HTML 常见问题

有 Figma 插件或直接导入功能吗？

没有。IMG2HTML 基于图片工作，所以和 Figma 的连接方式就是导出 PNG。这也意味着 Sketch、Penpot、Adobe XD、Canva 的设计稿，或它们的任意截图，都能用同样的方式转换。

会用到我的 Figma 图层、自动布局或变量吗？

不会。它只看得到导出 Frame 的像素，所以图层名、组件、自动布局设置和设计令牌都不会带过来。间距和颜色是从图片中读取的，所以事后值得核对一下精确的品牌色值。

应该按 1x 还是 2x 导出？

2x 能让小字保持清晰，有助于文字被准确识别；大而简单的 Frame 用 1x 就够了。长页面的超大导出图最好拆成每个区块一个 Frame。

设计稿里的图片和图标会怎么处理？

照片和插画会变成 placehold.co 占位图，并附上原来内容的描述。界面图标在有相近图标时会映射到 Font Awesome；logo 和自定义图标需要换成你自己的 SVG，就像本页示例一样。