團隊在重新設計網站時，常會遇到原始設計檔已經遺失、過時，或從一開始就不存在的情況。實際上，線上成品頁面往往是唯一準確的 UI 版本，而如果要手工把它描進 Figma，單一畫面就可能花上好幾天。
網站轉 Figma 的流程就是為了解決這件事。你把 Codia AI 指向一個即時網址，或貼上 HTML/CSS，就能得到可編輯的 Figma 檔案 - 包含 frame、文字圖層、元件、設計 tokens。設計師可以直接在成品頁面上做檢視、重設計、文件整理，或抽出設計系統，而不需要從零重建。
相關 Codia 產品：Codia HTML to Figma。
這份指南會完整說明：什麼時候該用網站轉 Figma、什麼時候該用截圖轉 Figma、什麼時候該用 HTML 轉 Figma，並針對登陸頁、SaaS 應用、電商、行銷網站提供情境建議，以及轉換前準備和轉換後整理的重點。
什麼時候該用網站轉 Figma
以下情況很適合用這個流程：
- 原始 Figma 檔找不到了或已經過時，而正式上線頁面才是事實來源。
- 你準備做重新設計，需要先把目前頁面變成可編輯的基礎。
- 你在檢查 Figma 原稿和正式上線內容之間的落差。
- 你在做競品研究，需要的是可編輯的參考，而不是截圖。
- 你要把即時產品 UI 文件化回 Figma，供設計系統工作使用。
- 你想從既有頁面抽出設計系統。
- 你接手了一個行銷網站，希望把它納入設計營運流程。
網站轉 Figma、截圖轉 Figma、HTML 轉 Figma 的差異
這三種流程目的相近，但輸入與取捨不同：
| 流程 | 輸入 | 最適合 |
|---|---|---|
| 網站轉 Figma | 即時網址 | 頁面可在瀏覽器中開啟。你想要取得來源層級的版面提示（計算後的 CSS、真實字型名稱）。 |
| 截圖轉 Figma | PNG/JPG | 你無法存取即時頁面（付費牆、內部頁、已刪除，或手上只有圖片）。 |
| HTML 轉 Figma | 原始 HTML/CSS | 你有原始程式碼，並且想要最高還原度。這在開發主導的流程中很常見。 |
實務上，多數團隊會混合使用：即時網址用於目前或競品網站，截圖用於靈感板與無法存取的參考，原始 HTML 則用於工程主導的轉換。
工作流程
- 選定網址與視窗尺寸。 先決定要擷取桌機、平板還是手機，若需要響應式覆蓋，請針對每個斷點各自擷取。
- 先整理頁面。 關閉 cookie 橫幅、關掉彈窗和聊天元件、視需要登入或登出，並等待字型與延遲載入圖片完全出現。
- 分別擷取各種狀態。 轉換只會包含你當下看到的內容。選單展開、模態視窗開啟、空狀態、價格切換、滑入卡片、手機選單、登入狀態，都應該各自建立獨立任務。
- 執行轉換。 Codia AI 會分析版面、排版、色彩、圖示、圖片與元件結構。
- 在 Figma 中開啟結果。 每個擷取的視窗尺寸都會變成自己的 frame。
- 檢查（下方有檢查清單）。
- 元件化 重複區塊 - 導覽列、Hero 區、功能卡、頁尾、CTA 區塊。
各情境的建議
行銷登陸頁
- 長頁面建議分段轉換（Hero、功能、社會證明、價格、FAQ、頁尾）。這樣每段的 Auto Layout 結構會比整頁一次擷取更乾淨。
- Hero 插圖和裝飾性漸層通常會變成 raster，若團隊需要可調整性，建議改成設計系統中的向量資產。
- 價格表最好單獨擷取：直接捲到表格區只轉那一段。
- 若要比較 A/B 測試版本，請把每個版本分開轉換，再並排放在 Figma 裡檢視。
SaaS 應用畫面
- 真實產品畫面常包含個人化資料或敏感資訊，建議改用 demo 帳號或空狀態進行擷取。
- 側邊欄、頂部導覽列和模態視窗在多個畫面中都會重複。先轉一個畫面，再把外殼元件化，接著再轉其他共用同一組元件的畫面。
- 空狀態、錯誤狀態、載入狀態通常不會出現在 Figma 原稿中，但很值得特別擷取。
- 若是密集資料表和列表，請參考 Screenshot to Figma 裡的 dashboard 建議。
電商網站
- 商品圖庫常會先顯示成圖片佔位，之後再換成實際商品照。
- 變體選擇器、尺寸選擇器、數量步進器都很適合元件化。
- 建議把 PDP、購物車與結帳流程一起轉，讓設計系統反映完整購買路徑。
競品研究
- 把競品登陸頁轉成可編輯的 Figma 參考，方便團隊分析結構、文案、版面與視覺層級，而不只是看平面截圖。
- 將多個競品擷取整理在同一個 Figma 檔中，方便並排比較。
- 這些擷取結果應該拿來做 靈感與分析，不要 1:1 照抄。上線前一定要改成自己的品牌語言。
將正式上線 UI 回寫到 Figma
- 逐頁轉換正式產品中流量最高的頁面。
- 匯入時，把還原出的色彩與字體樣式對映到你的 Figma library；報告會標出和系統不一致的顏色或樣式。
- 這是縮小「Figma 原稿 vs 正式上線」落差的基礎。
轉換後要整理什麼
把匯入結果當成一份很強的可編輯草稿。請逐項檢查：
- 字型。 Web 字型在 Figma 初次開啟時可能會被替代，請對映到設計系統字型。
- 文字樣式。 把臨時排版換成設計系統 tokens。
- 圖示。 用 library 裡正確的 SVG 資產取代 raster 圖示。
- 背景圖片。 正確裁切；若需要，將裝飾性背景換成設計系統資產。
- 重複區塊。 把卡片、導覽項目、按鈕、頁尾整理成 Figma 元件。
- 響應式限制。 任何需要跨斷點縮放的 frame，都要重建 Auto Layout。
- 第三方小工具。 聊天泡泡、cookie 橫幅、分析覆蓋層都不屬於你的設計系統，請移除。
- 色彩 tokens。 把還原出的顏色對映到設計系統的色彩 tokens。
常見問題
抓錯視窗尺寸。 1440px 的擷取無法告訴你 375px 時長什麼樣子。請把你真的在意的每個斷點都擷取一次。
忘了關閉覆蓋層。 Cookie 橫幅、聊天小工具、Hotjar 問卷都會被一起擷取，增加後續整理成本。先把它們關掉。
擷取個人化狀態。 真實使用者資料、姓名、內部工具內容都不應該進入擷取輸入，先登出或用 demo 帳號。
一次做整頁長捲動擷取。 長頁面通常分段擷取會更好。
跳過互動狀態。 選單、模態視窗、滑入卡片、空狀態都不會出現在預設擷取中，請分別建立任務。
把轉換當成設計。 轉換結果只是基底；真正的設計工作是在後續的整理、元件化與重新設計決策。
API 與批次轉換
如果只是一次性的設計工作，外掛和 Web App 的流程就夠了。若是要轉換大量頁面 - 例如設計公司重建 200 個客戶網站、內部團隊整理整個產品介面、設計營運跨市場做品牌稽核 - Visual Struct API 可以接受網址、擷取頁面，並回傳結構化 JSON，供你的工具轉成 Figma 或串接到下游設計流程。
批次端點可處理大量 URL 匯入，處理完成後會透過 webhook 回傳通知。
FAQ
任何網站都能轉成 Figma 嗎？
多數看得見的網頁都可以變成有用的可編輯草稿。高度動態的應用程式、以 canvas 為主的頁面（3D、WebGL），以及個人化畫面，可能需要更多後續整理。會阻擋自動化擷取的網站，就要改用截圖流程。
會把響應式版面也一起轉出來嗎？
會，但只會轉出你指定的視窗尺寸。若需要響應式覆蓋，請分別擷取桌機、平板和手機。
互動狀態也會被擷取嗎？
只會擷取目前可見的狀態。選單、模態視窗、滑入卡片與空狀態應該分別建立任務。
轉換結果會包含真實程式碼嗎？
不會 - Figma 是設計工具，不是程式碼來源。如果你想從網站走到程式碼，可以先走 website → Figma → Figma to Code，或直接擷取截圖並使用 Screenshot to Code。
這對競品研究有幫助嗎？
有。可編輯的 Figma 參考對分析與重設計規劃遠比平面截圖有用，但仍然應該把它們視為靈感，而不是 1:1 複製。
需要登入驗證的頁面怎麼辦？
請使用已登入的瀏覽器工作階段或暫時的 demo 帳號。敏感客戶資料絕對不該出現在擷取輸入中。
可以一次轉整個網站嗎？
如果是單人設計工作，建議逐頁擷取。若是全站轉換（數十或數百頁），請使用 Visual Struct API 的批次端點。