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

HTML to Figma: React & Next.js — Source → Design 是一款 Figma Community 外掛，可將 HTML 與前端專案 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 中仍可使用。

版面與視覺屬性保留

將框架、填色、邊框、圓角、陰影、漸層、不透明度、裁切與變形重建為可編輯的設計圖層。

色彩與變數擷取

從渲染後的介面中擷取色彩與可重用變數，盡可能保留設計 token。

依視窗尺寸調整匯入大小

支援原生來源尺寸，或選擇行動裝置、平板或桌機視窗尺寸作為輸出大小。

常見使用情境

將網頁匯入 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 與外部服務，因此處理機密或第三方程式碼的團隊需要先檢查隱私與條款。
此外掛僅限於支援的來源類型與依視窗尺寸匯入；它並未被描述為適用於所有網頁技術的通用匯入工具。

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