服務與工具詞條 7-33

Figma 與設計稿Figma & Design Handoff

也常叫做：Figma（設計圈必備）、設計稿、mockup

你可能會這樣說

花了錢請設計師，他傳來一個 Figma 連結說「設計稿在這裡」。我點開看得到畫面，然後呢？我要怎麼把這些漂亮的畫面變成真的網站？

Figma 是一款在瀏覽器裡畫介面設計的工具，設計師用它畫網站的長相，交給你的那份檔案就叫設計稿。它像一張精確的裝潢圖：顏色、字級、間距、每個畫面在手機和電腦上的樣子都在裡面。

拿到設計稿，你的工作是照著蓋：把它變成真的網頁。跟 AI 協作時，可以畫面截圖給 AI，請它照著做出相同版面，並標註哪裡可以點、點了去哪。

過程中要尊重設計稿的細節：間距和字級差一點點，整體感覺就會掉一階。做得不像的地方，回頭對照設計稿修，不要憑感覺改。

設計稿 · 長相定案

版面、顏色、字級、間距都標好
手機版和電腦版各一份
像一張精確的裝潢圖

成品 · 照著蓋

每個區塊照稿子做出來
間距、字級盡量對齊原稿
差一點點，感覺就掉一階

圖 7-33　切換設計稿和成品，看兩者差在哪。

中文就可以

設計師給我一份 Figma 設計稿，我要用它做出網站，請帶我走完流程：
1. 先教我看懂設計稿：怎麼確認顏色、字級和間距的數值。
2. 我會截圖每一頁給你，請依截圖實作網頁，盡量貼近原稿。
3. 每完成一頁，請自己對照截圖列出差異清單，我們一起修。
4. 手機版的畫面設計稿也有，記得兩版都要做。