HTML to Figma: React & Next.js — Source → Design

HTML to Figma: React & Next.js — Source → Design 是一款 Figma Community 插件，可将 HTML、React、Next.js 等前端项目 ZIP 转为可编辑 Figma 图层，便于设计、评审与交接。

AI网站设计

AI设计助手

AI开发者工具

访问网站

概述

HTML to Figma: React & Next.js — Source → Design 是一款 Figma Community 插件，用于将前端源文件转换为可编辑的 Figma 图层。它适用于 HTML 文件和项目 ZIP，包括 React、Next.js、Vue 和 Svelte 项目。

插件不会截取屏幕截图，而是在 Chromium 中渲染源内容，并将结果重建为结构化设计。这使输出更适合编辑和设计迭代，因为当源内容受支持时，文本、矢量、布局以及部分样式细节会保留为独立的 Figma 元素。

主要功能

基于 Chromium 的源文件渲染

先在 Chromium 中渲染上传的源文件，然后将其重建为结构化的 Figma 设计，而不是平面截图。

可编辑文本重建

保留可编辑文本，并检测字体族、字重、样式、字号、行高、字距、对齐方式和测量后的换行。

矢量资源处理

导入 SVG 矢量资源和受支持的图标，让图形元素在 Figma 中保持可用。

布局与视觉属性保留

将框架、填充、边框、圆角、阴影、渐变、不透明度、裁剪和变换重建为可编辑设计图层。

颜色与变量提取

从渲染后的界面中提取颜色和可复用变量，在可能的情况下保留设计令牌。

基于视口的导入尺寸

支持使用原生源文件尺寸，或选择移动端、平板或桌面视口来决定输出大小。

常见使用场景

将网页导入 Figma
将静态 HTML 页面或前端项目 ZIP 导入 Figma，以便在不从头重建设计的情况下调整布局。
基于前端项目导出进行工作
把 React、Next.js、Vue 或 Svelte 项目 ZIP 转换为分层的 Figma 内容，用于设计评审和迭代。
在评审中保留可编辑的源细节
当团队需要将渲染后的 UI 与设计文件进行对比时，保留可编辑的排版、矢量和布局。
使输出匹配目标视口
当同一源内容需要以特定画板尺寸导入，用于展示或交接时，选择移动端、平板或桌面视口。

Pros and Cons

Pros

将源内容转换为可编辑的 Figma 图层，而不是静态图片。
保留文本、SVG、布局结构、颜色以及若干常见视觉属性。
同时接受独立的 HTML 文件以及多种常见前端框架的项目 ZIP。
提供基于视口的输出尺寸，可选择移动端、平板、桌面或原生源尺寸。
在付费 Pro 方案开始前，包含少量免费额度。

Cons

仅浏览器端输出，例如 canvas、WebGL、活动视频以及某些复杂滤镜，可能会回退为栅格输出，而不是完全可编辑的图层。
源文本说明上传会发送到 Chromium worker 和外部服务，因此处理机密或第三方代码的团队需要先查看隐私和条款。
该插件仅限于受支持的源类型和基于视口的导入尺寸；它并未被描述为适用于所有 Web 技术的通用导入工具。

FAQ

如何使用 Source → Design？

它在 Figma Design 文件中运行。先启动插件，拖入一个自包含的 HTML 文件或受支持的项目 ZIP，确认检测到的项目和输出尺寸，然后在插件保持打开的状态下开始导入。

它支持哪些源格式？

源文本列出了自包含的 .html 文件、静态项目 ZIP，以及 React、Next.js、Vue 和 Svelte 的项目 ZIP。

哪些内容会被转换为可编辑的 Figma 内容？

插件会将渲染后的结果重建为可编辑的 Figma 图层，包括文本、SVG 资源、布局、颜色、变量、排版，以及诸如填充、边框、阴影和渐变等常见视觉属性。

主要限制是什么？

仅浏览器端输出，例如 canvas、WebGL、活动视频以及某些复杂滤镜，没有直接对应的可编辑 Figma 等价物。这些区域可能会回退为本地栅格输出。

是否有免费套餐或付费方案？

页面说明有三次成功导入可免费使用。之后，Source → Design Pro 标价为每月 9 美元，可无限次进行代码转设计导入。

Quick Facts

类别: 设计工具
平台: Figma Community 插件
源格式: HTML、ZIP、React、Next.js、Vue、Svelte
输出: 可编辑的 Figma 图层
网站: sourcetodesign.com
定价: 三次免费导入；Pro 版每月 9 美元