PAYATHON 2026

如何将 Next.js（TypeScript）UI 自动转换为 Figma 设计？

数据小许

可以半自动完成。先运行 Next.js 页面，捕获浏览器渲染结果，导入为 Figma 可编辑图层，再整理组件和设计规范。如果目前只有 React components 和 CSS/Tailwind，建议先用一个代表性页面验证这条路径。

需要分别评估页面外观的还原程度，以及导入后能否形成方便维护的 Figma 组件库。网页导入工具可以帮助还原一部分外观，组件库通常需要人工整理。

为什么应从运行中的页面转换

Next.js、TypeScript 和 React 描述页面如何生成。浏览器运行页面后，才能得到实际的 DOM、计算后的 CSS、字体、图片和元素尺寸。

基于浏览器渲染结果导入时，通常不需要直接解析 .tsx 或理解 React hooks。此时 Tailwind 样式已经应用到页面上，捕获工具可以根据最终显示结果重建图层。因此，即使工具对 React 源码的解析能力有限，也不一定妨碍它导入 React 渲染的页面。

不过，DOM 与 React 组件树并不一一对应。例如，一个 <Button /> 可能输出多层 DOM，也可能根据 props 显示不同内容。仅凭页面外观，无法可靠地推回它的全部 props、状态和复用关系。

可以先尝试什么工具

可以尝试 html.to.design。它提供 Figma 插件和浏览器扩展，可将网页转换为可编辑图层。根据官方文档，生成的图层包括 frames、文本、图片和矢量，工具还提供 Auto Layout 相关选项。具体页面的还原效果仍需实际验证。官方扩展说明

根据页面访问方式选择导入入口：

页面情况导入方式
可以公开访问的页面在 Figma 插件中通过 URL 导入
localhost、登录后页面或需要 VPN 的页面在能访问页面的浏览器中使用扩展捕获
需要打开菜单、弹窗后的特定界面先操作到目标状态，再使用扩展捕获

URL 导入由工具服务器访问页面，因此无法直接读取你电脑上的 localhost。官方文档建议这类页面使用浏览器扩展。URL 导入说明

具体怎么操作

1. 运行项目并准备目标页面

如果项目的 package.json 已配置 dev 脚本，可以使用对应包管理器启动，例如：

npm run dev

以终端显示的地址为准，在浏览器中打开目标路由。捕获前确认：

  • 字体、图片和异步数据已经加载完成。
  • 页面处于需要交付的状态，例如默认界面、菜单展开或弹窗打开。
  • 视口尺寸已经确定，桌面端和移动端分别捕获。
  • 长页面中的懒加载内容已经出现。

不要只保存服务端返回的 HTML 就开始转换。对于依赖客户端渲染、异步数据或运行时样式的页面，这样可能遗漏实际界面内容。

2. 捕获页面并导入 Figma

安装配套的浏览器扩展和 Figma 插件，在浏览器中捕获目标页面或局部区域，再通过工具支持的导入入口放入 Figma。html.to.design 的扩展文档介绍了整页和局部捕获流程。浏览器捕获步骤

第一次可以选择一个包含导航、文字、图片和重复组件的页面，检查导入效果后，再决定是否批量处理其他路由。

3. 对照浏览器检查结果

检查时保持浏览器与 Figma Frame 的宽度一致，优先查看：

  • 字体、字重、行高和文本换行是否一致。
  • 元素间距、容器尺寸、图片裁切是否正确。
  • 阴影、渐变、边框和圆角是否保留。
  • 固定定位、滚动区域和遮罩层是否出现偏差。
  • 图层是否便于编辑，调整文字长度后布局是否仍然合理。

页面看起来相近，不代表 Auto Layout 和响应式行为已经正确。即使工具生成了 Auto Layout，也应检查方向、间距、对齐和尺寸设置是否符合后续编辑需求。

布局、样式和组件分别能保留多少

目标应有的预期
当前视口的布局和视觉样式可以通过导入获得起点，复杂效果需要检查和修正
文本、图片等可编辑内容取决于工具输出，需确认是否生成独立图层
React 组件名称、props 和组件边界不能仅凭渲染结果可靠恢复
Figma Components、Variants 和实例关系需要核对工具能力，并按组件语义整理
Tailwind tokens 与 Figma Variables 的对应关系需要从项目定义中提取并建立映射
响应式规则和交互逻辑多个页面状态的捕获不能替代完整规则，通常需要补建

对于按钮、输入框、卡片等重复元素，可以先导入具有代表性的实例，整理为 Figma Components，再补充 Variants 和实例关系。组件较多时，可以在项目中准备一个临时展示页，集中呈现尺寸、状态和样式，减少逐页寻找实例的工作。

如果只能先导出样式

可以先整理项目已有的颜色、字号、间距、圆角和阴影定义。如果项目使用 CSS variables 或集中管理的设计 token，优先读取这些定义，再映射为 Figma Styles 或 Variables。

也可以在浏览器开发者工具中选中元素后，用下面的代码读取其计算样式：

// 在浏览器开发者工具 Console 中运行。
// $0 表示当前在 Elements 面板中选中的元素。
const element = $0;

if (element instanceof Element) {
  const style = getComputedStyle(element);
  const properties = [
    'color',
    'background-color',
    'font-family',
    'font-size',
    'font-weight',
    'line-height',
    'padding',
    'gap',
    'border-radius',
    'box-shadow'
  ];

  const result = Object.fromEntries(
    properties.map((name) => [name, style.getPropertyValue(name)])
  );

  console.log(JSON.stringify(result, null, 2));
}

这段代码只能帮助记录所选元素的样式，不会生成 Figma 文件，也不会自动识别设计 token。计算值反映的是当前元素在当前状态下的结果，不能据此还原全部 Tailwind 配置或断点规则。

对于这个项目，可以把首轮目标设为获得可编辑、视觉接近的页面稿，再根据 React 组件和样式定义补建 Figma 组件库。是否适合大规模使用，要看代表性页面的导入质量和后续整理成本，仅凭工具的功能列表无法判断。

备注：内容仅供参考。