Codia
Figma Community 330,000+ 位使用者 · 6,000+ 個讚

截圖轉 Figma:把任何圖片變成可編輯圖層

上傳螢幕截圖、PNG 或 JPG,就能得到真正可以編輯的 Figma 設計:文字、形狀、圖片和群組圖層各自獨立,而不是一整張扁平的圖片。可以使用免費的 Figma 外掛,也能直接在瀏覽器中轉換。

Figma 外掛需在電腦上執行。用手機瀏覽時,可以先試試瀏覽器版。

每月 5 個免費 AI 點數 · 無需信用卡 · Figma 免費方案也能用

沒有安裝外掛?直接在瀏覽器中轉換

為常見的創意工作流程打造

真實成果

常見截圖,轉換成可編輯圖層

網站、儀表板和手機 App 各一張,都用 Figma 外掛所使用的同一套截圖轉設計引擎轉換。標題、按鈕、卡片和照片都會各自成為獨立圖層。

原始截圖
網站: 原始截圖
轉換後:可編輯圖層
旅遊到達頁面。導覽連結、按鈕、照片和行程卡片都是獨立圖層,選取的標題是可編輯的文字。

旅遊到達頁面。導覽連結、按鈕、照片和行程卡片都是獨立圖層,選取的標題是可編輯的文字。

範例畫面是為這次示範產生的虛構產品,轉換結果則是真實的。畫面為 Codia Studio,並開啟圖層面板。Figma 外掛也是根據同一份轉換結果建立圖層,實際效果會因原始圖片而異。

可以轉換哪些內容

各種 UI 都能圖片轉 Figma

只要能截圖的畫面,就能轉換。Codia 可將真實產品與設計模型的 PNG、JPG、WebP 圖片轉換成 Figma 設計。

到達頁面的截圖被轉換成可編輯的 Figma 文字、圖片與版面圖層
  • iOS 與 Android App 畫面

    直接用手機截圖、TestFlight 版本或商店頁面重建 App 畫面,不必逐一重畫每個元件。

  • 網站與到達頁面

    把擷取下來的網頁變成可編輯的版面。若是線上網址,可以用 Web to Figma 直接匯入頁面。

  • SaaS 儀表板與管理後台

    表格、圖表、側邊欄和密集的表單都會還原成可編輯元素,隨時可以進行改版。

  • 設計參考與情緒板

    把靈感截圖或參考畫面變成圖層,方便拆解研究、調整風格並延伸運用。

  • 沒有原始檔的舊版 UI

    找不到原始設計檔?從已上線產品的截圖還原出可編輯的版本。

  • PNG、JPG 與 WebP 圖片

    任何 UI 圖片都適用,從隨手截圖到匯出的設計模型都可以。圖片越清晰、解析度越高,辨識出的文字越乾淨。

運作方式

如何將截圖轉成 Figma

在 Figma 外掛中三個步驟就完成,大多數畫面幾分鐘內就能開始編輯。

  1. 1

    安裝免費外掛

    從 Figma Community 開啟 Codia AI Design,在任何 Figma 檔案中執行。

  2. 2

    上傳截圖

    拖入 PNG、JPG 或 WebP:App 畫面、網頁、儀表板或設計參考圖都可以。

  3. 3

    編輯產生的圖層

    Codia 會在畫布上重建文字、形狀、圖片與圖層階層,像編輯一般 Figma 設計一樣修改即可。

外掛會讀取截圖、辨識文字和 UI 元素,再在 Figma 畫布上把它們重建成圖層。

比較想用瀏覽器?

在本頁上方上傳圖片,Codia Studio 會將它開啟為可編輯的畫布;點選「複製到 Figma」,再貼到你的檔案中。

上傳截圖

你會得到什麼

可編輯的 Figma 圖層,而不是扁平的圖片

直接貼進 Figma 的截圖只是一張圖片;轉換後的截圖則是一份設計,每個元素都是獨立的圖層。

真正的文字圖層

標題、標籤和段落都會還原成可編輯的文字,修改文案時不必把整個畫面重新打一次。

UI 階層,而非零散形狀

容器、清單、按鈕和卡片會整理成圖層樹,可以直接移動、調整大小和更換樣式。

圖片與圖示各自獨立成層

照片、插圖和圖示會與背景分離,而不是和背景合成在一起。

字型與多語言文字

字型偵測能保留原本的視覺風格,而且不只英文,多種語言的文字都能辨識。

需要向量時可輸出 SVG

同一張截圖也能轉成可縮放的 SVG,適合必須保持銳利的圖示、插圖與素材。

為設計轉程式碼做好準備

結構清楚的圖層樹,是使用 Codia Design to Code 及其他 Figma 轉程式碼工具的理想起點。

貼上、手動描繪或轉換:把截圖放進 Figma 的三種方式

直接貼上最快,但只會得到一張圖片;手動描繪可以編輯,但很耗時;轉換則能兩者兼得。

用 Codia 轉換直接貼上圖片手動描繪
可編輯文字可以,辨識為文字圖層不行,文字只是像素可以,但要手動重打
圖層結構群組化、巢狀的圖層一整張扁平圖片手動建立
字型與顏色從圖片中偵測只能看靠肉眼比對
每個畫面所需時間幾分鐘,再微調幾秒鐘常常要好幾個小時

設計師在 Figma Community 上的評價

摘自 Codia AI Design 外掛頁面上的公開留言,保留留言者原文。

Very impressed! I was skeptical, having tried other 'screenshot to figma' plugins with terrible results. This Codia plugin rapidly created an almost pixel-perfect replica of the screenshots, with all the correct vectors and layers. … The free 5 credits is more than enough to test the outputs before making a purchase decision. I'm subscribing now.
DDavid Champion@davidchampion ·
We tested it today. With various screen shots. Very cool. And very simple to use.
LLars@lars63 ·
It was super helpful! Codia allows you to use a free version with pre set image formats (size for example). I recommend it!
ddaniela zavala@danielazavala ·

截圖轉 Figma 價格方案

免費開始使用,每月提供 5 個 AI 點數。升級後可轉換更大的截圖、批次上傳,並取得更多點數。

截圖轉 Figma 常見問題

關於將截圖和圖片轉換成可編輯 Figma 設計的解答。

還有其他問題嗎?與我們聯繫,我們會協助你。

聯絡技術支援
下一張截圖,隨時可以轉換

免費把你的第一張截圖 轉成 Figma 設計

在 Figma 中安裝外掛,或直接在瀏覽器上傳圖片。每個帳號每月都有免費 AI 點數。

無需信用卡 · 檔案不會用於訓練 · 每月 5 個免費 AI 點數