前情提要：你以為只是圖片，實際上是切版地獄的起點

我初學切版最常遇到的狀況是什麼？不是 figma，不是 xd，而是一張 JPG 或 PNG。

俗稱「截圖流」設計流程——
設計師懶得丟檔案，PM說設計還在改，你手上就只拿到一張圖片。

這比隕石流還要可怕，因為如果你是超人，你能夠接住隕石，但就算你是超人，
你也沒辦法透過醜醜糊糊的PNG截圖檔通靈。

這時候你該怎麼辦？

1. 接受吧！截圖設計稿是你職涯必經的垃圾場

有些人會問：「啊截圖根本不能量距離、沒有圖層、沒有字體資訊，怎麼切？」

對，這才是職人該練的功夫——沒有條件就自己創造條件！

因為截圖檔的本質只有一種：無能的溝通製造出來的產物。

你可以生氣，但更重要的是：

如何把「不能切」變成「照樣切」才是你的功夫。

下載截圖軟體自己手動量測、丟進小畫家裡面觀察座標跟距離，用抽色擴充軟體去找顏色，想辦法測試出字體的大小以及用試驗的猜字體。

這些東西都是基本功。

2. 切圖 SOP：從絕望中建立秩序

以下這套是「截圖切版求生術」，我自己在實戰中磨出來的流程：

（1）截圖 + 紅框劃區塊

打開小畫家或任何你喜歡的註記工具，開始劃出每一個視覺區塊。

這時候你不是在做「美術分析」，你是在建立 DOM 的地基。

例如：

• Logo 區
• Navbar
• Hero 圖
• 特色介紹區塊
• Footer

這個步驟是切版職人的「開光儀式」，沒有這步你根本不知道自己要蓋什麼房子。

（2）視覺比對距離

用瀏覽器的「擷取工具」（像 LINE、PicPick、或 SnipTool）去量距離、字體大小。

如果不怕死的話還可以拉近放大，直接數 pixel！

再進一步：對照 Bootstrap、Tailwind 的 spacing 系統去找對應級距
例如你量出來是 48px，那大概就是 py-12、mt-12 這種等級。

（3）字體分析與還原

圖片的字通常是無法抓的，但你可以做到幾件事：

• 打開 Chrome，對照某些知名網站字體風格猜一猜
• 用 WhatTheFont 嘗試分析字體
• 實在不行就用 Arial 或 Noto Sans 湊一下，專案完再改

找一下公司前面的專案有沒有類似的字體去try error。

（4）圖片切圖

你可能會問：「圖片怎麼切？」

簡單，打開 Figma、Photoshop、甚至手機也可以截圖+裁切，然後你要做的只有一件事：

逆向工程把這個圖片自己用figma弄成一個設計稿！

這是千真萬確的事情，絕對不要認為這不是你的工作浪費時間等等，

這反而是你加速彎道超車的絕對關鍵。

3. 心態建設：不要當抱怨仔，要當還原神

截圖切版的時候最容易崩潰，因為你做了很多事情，但成果看起來好像「沒差很多」。

但記住這句話：

差一點點，就是差很多。

Pixel Perfect，不是從 figma 開始，而是從垃圾圖裡還原出 pixel 完美開始。

這種訓練下來，你再回去切 Figma 的稿會像開無雙一樣。

4. 結語：只要有圖片，我就能切

不是每一張圖片都該被尊重，但每一張圖片都能被切出來。

你不能選擇設計稿是 JPG 還是 Figma，但你可以選擇要不要練到「連投影片我都能切」。

如果你想當個切版職人，請記住這句話：

不要羨慕那些有 figma 的人，要讓他們羨慕你沒有也能切的本事。

下次我們來談談：「切版該怎麼建立自己的參考規格書，做出不被打槍的排版」
也就是——如何通靈成仙，化混亂為秩序。