好多團隊都要重設計啲網站，但原本嘅設計 source file 唔見咗、過時咗，或者一開始根本就冇存在過。production 頁面好多時係唯一準確嘅 UI 版本，而將佢人手描成 Figma 要用幾日時間，先至得一個畫面。
Website-to-Figma 轉換就係為咗解決呢個問題。你將一個 live URL 俾 Codia AI（或者直接貼 HTML/CSS），就可以拎到一個可編輯嘅 Figma 檔——frames、文字圖層、components、design tokens 都有。設計師可以用 production 頁面去做審查、重設計、文件化，或者提取 design system，而唔使由零開始重建。
相關 Codia 產品：Codia HTML to Figma。
呢篇指南會講晒：幾時用 website-to-Figma、screenshot-to-Figma 同 HTML-to-Figma 嘅分別，唔同場景（landing page / SaaS app / e-commerce / marketing site）嘅建議，擷取前準備，同埋轉換後點樣清理。
幾時應該用 Website-to-Figma
以下情況就適合用呢個流程：
- 原始 Figma 檔唔見咗或者過時咗，而 production 就係真相來源。
- 你要開始重設計，需要一個可編輯嘅現況基線。
- 你想檢查 Figma source 同 production 之間有幾大落差。
- 你做競爭研究，需要可編輯參考，而唔係淨係得截圖。
- 你想將 live product UI 重新整理返入 Figma，方便 design system 工作。
- 你想由現有頁面提取 design system。
- 你接手咗一個 marketing site，要將佢納入 design ops 管理。
Website-to-Figma、Screenshot-to-Figma 同 HTML-to-Figma 有咩分別
三個流程嘅目標有重疊，但輸入同取捨唔同：
| Workflow | Input | 最適合 |
|---|---|---|
| Website to Figma | Live URL | 頁面喺 browser 入面打得開，想要 source-level 版面提示（computed CSS、真實 font 名稱）。 |
| Screenshot to Figma | PNG/JPG | 你打唔到 live page（有付費牆、內部頁、已刪除，或者你手上只得一張圖）。 |
| HTML to Figma | Raw HTML/CSS | 你手上有 source code，想要最高 fidelity。常見於開發主導工作流程。 |
實際上，好多團隊會混合使用：live URL 用嚟做現有／競品網站，截圖用嚟做靈感板同無法存取嘅參考，raw HTML 就用喺工程主導嘅轉換。
工作流程
- 揀 URL 同 viewport。 決定你要擷取 desktop、tablet 定 mobile，responsive coverage 要分開擷取每個 breakpoint。
- 準備頁面。 關閉 cookie banner、彈窗同 chat widget，按需要登入或登出，等 fonts 同 lazy-loaded images 完成載入。
- 分開擷取關鍵狀態。 轉換只會保留當時見到嘅內容。navigation 展開、modal 開啟、empty state、pricing toggle、hover card、mobile menu 同 logged-in state，都要分開做 job。
- 執行轉換。 Codia AI 會分析版面、字體、顏色、icons、images 同 component 結構。
- 喺 Figma 開啟結果。 每個擷取嘅 viewport 會變成獨立 frame。
- 檢查（見下面 checklist）。
- 元件化 重複區塊——nav、hero、feature card、footer、CTA block。
場景建議
Marketing Landing Pages
- 長頁面最好逐個 section 轉換（hero、features、social proof、pricing、FAQ、footer）。咁 Auto Layout 會比一次過轉成一大段更乾淨。
- Hero illustration 同裝飾性漸變好多時會變成 raster；如果團隊需要可調整，最好換返做 design-system vector assets。
- Pricing table 最好集中擷取：直接 scroll 去表格位置，只轉嗰段。
- 做 A/B test variant 時，逐個 variant 分開轉，再喺 Figma 入面並排比較。
SaaS App 畫面
- 真實產品畫面好多時有個人資料或者敏感資料——最好用 demo account 或 empty state 去擷取。
- Sidebar、top nav 同 modal 會重複出現。可以先轉一個畫面，再將 chrome 元件化，之後再轉其他會共用同一批元件嘅畫面。
- Empty state、error state 同 loading state 通常都唔喺 Figma source 入面，值得特別擷取。
- 密集 data grid 同 table，可以參考 Screenshot to Figma 嘅 dashboard 建議。
E-commerce 網站
- Product gallery 好多時會以 image placeholder 形式出現——之後要換返真正產品相片。
- Variant picker、size selector 同 quantity stepper 都好適合做 componentization。
- 最好將 PDP、cart 同 checkout flow 一齊轉，咁 design system 先會反映完整購買旅程。
競爭研究
- 將競品 landing page 轉成可編輯 Figma 參考，等團隊可以分析結構、文案、版面同 visual hierarchy，而唔只係睇平面截圖。
- 將幾個 competitor capture 放喺同一個 Figma 檔，方便並排審視。
- 呢啲結果只應該用作 靈感同分析，唔係 1:1 仿製。發佈前一定要重新整理成你自己嘅品牌風格。
將 Production UI 重新整理返入 Figma
- 將 production product 入面流量最高嘅頁面逐個轉返入 Figma。
- 將回收返嚟嘅顏色同字體樣式對應返你 Figma library；報告會標示出任何同系統唔匹配嘅色彩／樣式。
- 呢個做法就係縮窄「Figma source 同 production」落差嘅基礎。
轉換後要清理乜嘢
將 import 當成一份強力可編輯草稿。逐樣檢查：
- Fonts。 Web font 喺 Figma 第一次打開時會用替代字體。要對應返你 design-system 嘅 fonts。
- Text styles。 將臨時 typography 換成 design-system tokens。
- Icons。 用 library 入面真正嘅 SVG assets 取代 raster icons。
- Background images。 要正確裁切；如有需要，將裝飾性背景換成 design-system assets。
- Repeated sections。 將 cards、nav item、buttons 同 footer 整成 Figma components。
- Responsive constraints。 需要跨 breakpoint 延展嘅 frame，要重建 Auto Layout。
- Third-party widgets。 Chat bubble、cookie banner 同 analytics overlay 唔屬於 design system，應該移除。
- Color tokens。 將回收返嚟嘅顏色對應返 design-system color tokens。
常見陷阱
擷取錯 viewport。 1440px capture 唔會話你知頁面喺 375px 會點樣。要擷取你真係關心嘅每個 breakpoint。
唔記得關 overlays。 Cookie banner、chat widget 同 Hotjar survey 都會一齊被擷取，之後要多好多清理工作。記得先關。
擷取個人化狀態。 真實用戶資料、名字、內部工具畫面——要先登出或者用 demo account。
一次過拉晒成頁。 長頁面最好分 section 轉換。
跳過互動狀態。 Menu、modal、hover card 同 empty state 唔會自動出現。要分開擷取。
將轉換當成設計。 輸出只係基線；真正嘅設計工作係之後嘅清理、元件化同重設計決策。
API 同批次轉換
如果係單次設計工作，plugin 同 web app workflow 已經夠用。對於要轉大量頁面嘅團隊——例如 agency 要重建 200 個客戶網站、內部團隊要記錄整個產品 surface、design ops 要做跨市場 brand audit——Visual Struct API 可以接受 URL、擷取頁面，然後回傳結構化 JSON，方便你嘅工具再轉成 Figma 或接去下游 design pipeline。
批次 endpoint 支援大量 URL ingestion，處理完成後會用 webhook callback 通知。
FAQ
任何網站都可以轉成 Figma 嗎？
大部分可見嘅 web page 都可以變成有用嘅可編輯草稿。高度動態 app、canvas-heavy 頁面（3D、WebGL）同個人化畫面可能要額外清理。封鎖自動擷取嘅網站，就要改用 screenshot-based workflow。
會唔會擷取到 responsive layout？
會擷取你指定嘅 viewport。需要 responsive coverage 時，請分開擷取 desktop、tablet 同 mobile。
互動狀態會唔會一齊被擷取？
只會擷取當時可見嘅狀態。Menu、modal、hover card 同 empty state 應該分開做 job。
轉換後會唔會包括真實 code？
唔會——Figma 係 design tool，唔係 code source。如果你想由 website 去 code，可以行 website → Figma → Figma to Code，或者直接擷取 screenshot 再用 Screenshot to Code。
呢樣嘢對競品研究有用嗎？
有用。Figma 入面嘅可編輯參考比平面截圖更適合做分析同重設計規劃，但記住一定要當佢做靈感，而唔係 1:1 複製。
需要登入先至轉到 authentication-gated page 嗎？
可以用已登入 browser session 或臨時 demo account。敏感客戶資料絕對唔應該出現喺擷取輸入入面。
可以一次過轉成個 site 嗎？
獨立設計工作最好逐頁擷取。如果係全站轉換（幾十或者幾百個頁面），就用 Visual Struct API 嘅批次 endpoint。