很多新手以為 Figma 是設計師才需要學的工具，但其實不是。
只要你是前端工程師，你很快就會碰到這些情況：
- 設計師丟一個 Figma 連結給你
- 你要量按鈕尺寸、看字體大小、抓顏色碼
- 你要確認某個區塊在手機版怎麼排
- 你要看 hover 狀態、元件變體、間距規則
也就是說，你不一定要用 Figma 畫設計稿，但你幾乎一定要會看 Figma。
1. Figma 是什麼？
Figma 是一個雲端 UI / UX 設計工具。
設計師可以用它來做：
- 網站設計稿
- App 畫面
- 元件庫
- Prototype（互動原型）
- 團隊設計協作
而前端工程師最常用它來：
- 看設計稿
- 量尺寸
- 查顏色
- 看字體
- 確認元件狀態
你可以把 Figma 想成：
設計稿版的 Google Docs。
它強的地方不是只有畫圖，而是多人協作、雲端同步、分享方便。
2. 為什麼前端工程師要會 Figma？
因為現在大部分公司，設計交付幾乎都在 Figma 上完成。
以前可能是 PSD、Sketch、Zeplin，現在很多團隊直接用 Figma 一條龍處理。
如果你不會看 Figma，常常會出現這些問題：
- 切版尺寸抓錯
- 間距亂掉
- 字重看錯
- 顏色用錯
- 手機版和桌機版搞混
所以學 Figma 對前端來說，不是為了變設計師，而是為了：
把設計稿正確地做成畫面。
3. Figma 裡最常見的幾個概念
剛打開 Figma 時，新手很容易被一堆面板嚇到。其實你先懂下面幾個概念就夠了。
Frame
Frame 可以理解成一個畫板，通常代表：
- 一個頁面
- 一個區塊
- 一個手機畫面
- 一個桌機版面
你可以把它想成設計稿裡的主要容器。
Layer
每一個文字、按鈕、圖片、背景區塊，都是一個 layer。
這和你在前端裡看到的 DOM 結構有點像。
Component
設計師會把常用的按鈕、卡片、輸入框做成 Component。
這跟你在 React 或 Vue 裡寫元件的概念很像。
Auto Layout
這是 Figma 很重要的功能。
它讓元件在排列時會自動維持：
- 間距
- 對齊
- 內距
你可以把它想成設計稿版本的 flex。
4. 前端工程師最常怎麼用 Figma？
這一段最實際。
前端在 Figma 裡最常做的事通常不是「設計」，而是「讀設計稿」。
例如：
- 看容器寬度是
1200px還是1280px - 看按鈕高度是多少
- 看字體大小是
16px還是18px - 看顏色是
#2563EB還是#1D4ED8 - 看元素和元素之間的間距
- 看元件有沒有 hover / active / disabled 狀態
所以你不需要一開始就學會做很完整的 UI 設計，
但你一定要先學會怎麼「看懂」設計稿。
5. 用 Figma 看設計稿時，前端最該注意什麼？
很多新手只看畫面長相，卻沒注意真正會影響切版的細節。
你至少要看這幾個地方：
1. 字體
- 字型名稱
- 字體大小
- 字重
- 行高
2. 顏色
- 文字色
- 背景色
- 邊框色
- hover 狀態色
3. 間距
- padding
- margin
- 元素和元素之間的 gap
4. 響應式版本
- 桌機版
- 平板版
- 手機版
5. 元件狀態
- default
- hover
- active
- disabled
這些東西如果一開始沒看清楚，後面切版常常會一直返工。
6. Figma 和前端開發的關係
這裡有一個觀念很重要：
Figma 不是程式碼，但它會直接影響你的程式碼。
因為你最後寫的 HTML、CSS、React component，很多細節都來自設計稿。
例如設計師在 Figma 裡做一個按鈕元件，前端可能就會對應做出：
- Button component
- size variant
- color variant
- disabled state
所以當你越懂 Figma，你在實作 UI 時就越容易抓到真正的結構，而不是只照著畫面硬刻。
7. Figma 和 CodePen 有什麼不同？
這兩個工具常常一起出現，但它們做的事完全不同。
Figma
- 偏設計
- 用來畫介面、看設計稿、做 prototype
- 重點是視覺和版面規劃
CodePen
- 偏實作
- 用來寫 HTML / CSS / JavaScript
- 重點是把想法快速做成真的畫面
你可以這樣記：
- Figma 是先看設計
- CodePen 是再動手做
兩者不是競爭關係，而是前後流程。
8. 給新手的學習建議
如果你是前端新手，我建議你先學會這些基本操作：
- 開啟 Figma 檔案
- 找到頁面和 Frame
- 看文字大小、顏色、間距
- 知道怎麼看 component 和 variant
- 知道桌機版和手機版切換在哪裡
你不一定要一開始就去研究很深的設計系統，
但至少要先讓自己能夠順利地「從設計稿走到切版」。
結語：前端不只是在寫程式，也是在讀設計
很多人以為前端工程師的工作只是把功能做出來，但其實不是。
前端很大一部分工作，是把設計師的想法正確地轉成可以互動的介面。
而 Figma，就是現在這個流程裡非常核心的工具。
你不需要先成為設計師，才開始學 Figma。
你只需要先學會一件事：
怎麼用它看懂設計稿。
這件事一旦打通，你的切版效率會高很多，和設計師溝通也會順很多。
接下來你可以做什麼？
如果你願意，下一篇我們可以接著寫 前端工程師怎麼看設計稿切版，把 Figma 裡的尺寸、字體、顏色、間距，真正對應到 HTML 和 CSS 的實作思路。
準備好把設計稿變成真正的網頁了嗎？下一篇見！