如果你可以存取 HTML 同 CSS 原始碼——例如自己嘅 production code、開源 UI library、frontend prototype，或者 static export——你可以直接將佢轉成可編輯嘅 Figma 檔。呢個係 Website-to-Figma 工作流程嘅開發者導向、source-first 版本。
點解要用原始碼，而唔係 live URL？有三個原因：最高保真度（computed styles 直接來自 CSS，而唔係由像素估算）、可以處理難以擷取嘅頁面（build-time generated、behind auth、開發中），同埋非常適合工程主導嘅 code-design round-tripping。
相關 Codia 產品：Codia HTML to Figma。
何時使用 HTML-to-Figma
以下情況最啱用呢個流程：
- 頁面喺開發環境入面，仲未部署。
- 你有 static HTML/CSS export，但冇 design source。
- 你正處理用 code 寫成嘅開源 design system 或 component library。
- 工程師負責頁面，而且需要由 production CSS 反向生成 Figma source。
- 你想將 component library 文件化返去 Figma，用嚟對齊設計。
- Design system 團隊想審視 production CSS 同 design tokens 嘅差距。
如果頁面可以用 URL 開到，通常 Website-to-Figma 會更簡單。HTML-to-Figma 係你手上有 原始碼 嗰種情況。
HTML to Figma vs Website to Figma vs Screenshot to Figma
| 輸入 | 工作流程 | 最適合 |
|---|---|---|
| 原始 HTML/CSS source | HTML to Figma | 開發者主導轉換、最高保真度、未發佈頁面。 |
| Live URL | Website to Figma | 可直接到達嘅頁面，包括競品同 production。 |
| PNG/JPG | Screenshot to Figma | 當你手上只係一張圖。 |
三種流程都會去同一個目的地：可編輯 Figma 檔。分別只係你輸入咩。
工作流程
- 準備原始碼。 確保 HTML 喺獨立情況下都可以正常 render——冇缺失 CSS、冇壞字體、亦唔依賴一個要持續運行嘅 build server。
- 開始轉換。 Codia AI 會解析 markup、套用 computed CSS styles、解析圖片同字體，再將視覺重建成 Figma layers。
- 喺 Figma 打開結果。 每個轉換 job 都會以 frame 形式出現，包含結構化 layers、text styles 同 image fills。
- 檢視——見下方清理部分。
- 元件化 重複元件，令 Figma 檔反映同 source code 一樣嘅結構。
轉換後會保留啲乜
通常好乾淨
- 語義化 HTML 結構 —
<section>、<article>、<header>、<footer>，同巢狀版面會轉成分組 Figma frames。 - 文字內容同排版 — 真實文字層，保留
font-family、font-size、font-weight、line-height。 - 顏色值 — 實色背景同文字顏色會直接轉成 Figma fills。
- Flexbox 同 Grid 版面 — 當對應關係清晰時，會轉成 Figma Auto Layout。
- 邊框、border-radius、陰影 — 以 Figma effects 套用。
- 圖片 — 以 image fills 形式放入，並引用原始 asset URL。
需要檢查
- 純 CSS 複雜效果 —
backdrop-filter、複雜mask-image、多段漸層混合。會近似成最接近嘅 Figma 效果。 - Pseudo-elements —
::before/::after內容會被當成獨立 frames；pseudo-class 狀態（:hover）要逐個 state 擷取。 - 自訂字體託管 — 透過自訂 CDN 載入嘅字體，可能需要手動對應到本地 Figma fonts。
- CSS variables 同 design tokens — 會以原始值保留；要映射返你嘅 Figma design system 係手動步驟。
- JS 驅動版面 — 任何由 JavaScript 尺寸或定位嘅元素，都要喺轉換前先跑到最終狀態。
- Web animations — Figma 唔支援原生 CSS keyframes 或 transitions。請轉換靜止狀態。
按角色嘅用法
接手 codebase 嘅設計師
你入到一間公司，已經有 production frontend，但冇 Figma。HTML-to-Figma 可以俾你一個設計起點，而唔使逐個畫面手工重砌。
Design system 團隊
比較 production CSS 入面真正存在嘅樣式，對照你 Figma library 嘅內容。轉換 codebase 入面嘅代表性元件，擺埋去對應 Figma 版本旁邊。差距會即刻顯現。
文件化元件嘅工程團隊
如果你嘅 component library 喺 code 入面，但設計團隊想要 Figma 文件，HTML-to-Figma 就係橋樑。將每個元件嘅 storybook 或 demo 轉成 Figma frame。
代理商同自由工作者
客戶交俾你 static HTML mockup（通常來自上一個供應商）。HTML-to-Figma 比手工重砌快好多，仲可以俾你一個可編輯嘅重設計基線。
要清理啲乜
轉換之後，重點整理：
- 文字樣式 — 用 Figma typography tokens 取代 inline styles。
- 顏色 tokens — 將還原出嚟嘅 hex 值映射到你嘅 design-system color styles。
- icon — 用你 library 入面嘅 SVG components 取代 raster icon。
- Auto Layout — 檢查 responsive 區塊有冇正確轉換；需要時重建。
- 元件結構 — 將重複模式（卡片、按鈕、列表項）變成 Figma components。
- 命名 — code class names 好少直接對應到 design names，記得改到易理解。
- 第三方 widget — 將 analytics、chat 同 consent overlay 由設計畫布移走。
常見陷阱
原始碼半壞。 如果 HTML 喺 browser 入面都 render 唔正確，轉換都冇辦法還原不存在嘅內容。先確認來源渲染正常。
缺少 CSS 或字體。 道理一樣——如果外部 CSS 或字體載入失敗，轉換只會攞到 fallback。記得將全部依賴打包好。
忘記 JS 驅動內容。 如果重要版面或內容係由 JavaScript 喺 page load 後先生成，記得喺擷取前先跑完 JS，等頁面完全 hydrated。
以為 CSS animations 會原樣轉移。 Figma 係靜態嘅。請先轉 at-rest 狀態，再需要時喺 Figma 入面設計互動 variant。
當成 code quality 檢查。 HTML-to-Figma 唔會幫你重構 code；佢只係轉換現有內容。code quality 應該喺 code review 解決，而唔係喺 Figma 入面。
配合 Figma-to-Code 一齊用
工程團隊有一個好用嘅 round-trip 模式：HTML → Figma（呢個流程）→ 喺 Figma 入面清理 → Figma to Code → 更整潔、經重構嘅 frontend。如果你想將 production CSS 入面唔一致嘅部分收斂返做一個乾淨、對齊 design system 嘅實作，呢個方法特別有用。
API 存取
如果要大批量轉換整個 component library 或 design system， Visual Struct API 可以接受 HTML 輸入，並回傳結構化 JSON，讓下游工具轉成 Figma，或者餵入 design-ops pipeline。
常見問題
我真係可以將原始 HTML/CSS 轉成可編輯 Figma 嗎？
可以。轉換會解析 HTML、套用 computed CSS，再將視覺重建成 Figma layers——文字會係真文字，顏色會係真 fills，版面會係真 Auto Layout，只要對應得上。
呢個同直接截圖頁面有咩唔同？
截圖會失去 computed CSS context——字體、精準顏色、版面推理都要由像素重新估算。HTML-to-Figma 係由 source values 開始，所以保真度更高，檢查負擔更低。
支援 React 或 Vue 呢類框架嗎？
轉換針對嘅係 rendered HTML，唔係 framework source。先將 component render 成 HTML/CSS（Storybook、static export、browser DevTools 嘅「Copy outerHTML」），再餵入去。
Tailwind CSS classes 呢？
Tailwind 喺 runtime 會編譯成標準 CSS，所以轉換見到嘅係正常 CSS rules。還原出嚟嘅 Figma styles 會對應視覺輸出，而唔係 class 名。
Design tokens 會保留嗎？
CSS custom properties（--brand-primary）會以原始值保留。要映射返到 Figma design-system tokens，仍然係手動清理步驟——不過報告會標記每一個不同 token value，方便你系統化對應。
一定要係完整網站，定係單一元件都得？
兩者都得。可以餵完整頁，或者只餵單一 component snippet。較細、較集中嘅輸入，通常會出到更乾淨結果。
API 可以處理成個 component library 嗎？
可以——批次 endpoint 請睇 Visual Struct API。