為什麼 Figma 是設計師必學的工具
在 Figma 出現之前，網頁設計的工作流程非常分散：在 Sketch 做設計、Zeplin 交付標注、InVision 做原型、Google Drive 管理版本——光是在工具之間切換就耗掉大量時間。
Figma 把這些全部整合到一個工具裡，加上基於瀏覽器的協作特性（不需要安裝、可以即時多人編輯），大幅降低了設計師和客戶、工程師之間的溝通摩擦。
如果你還在用其他工具，或已經在用 Figma 但只是把它當成「高級 PowerPoint」，這篇文章能幫你解鎖更多效率。
先看全貌：一個網站設計案的五個階段
在講功能之前，先確認 Figma 在整個專案裡的位置。以一個品牌官網為例，設計工作大致分成五個階段——如果你是業主，這段也能幫你知道什麼時候該準備什麼。
Phase 1：需求釐清（約 3–5 天）
整個專案最重要、也最容易被輕視的一步。這個階段要問清楚的問題包括：
- 目標受眾是誰？他們最大的顧慮是什麼？
- 為什麼客戶應該選你，而不是選別人？
- 有哪些喜歡的網站風格參考？（建議提供 2–3 個）
- 上線後哪些內容會由你們自己更新？
同時會研究主要競爭對手的官網，看他們的訊息傳遞方式與關鍵字策略。目的不是做得跟他們一樣，而是找到差異化的切入點。
最後整理成 Moodboard：顏色方向（冷調／暖調、深色／淺色）、字型風格（無襯線／有襯線）、圖片風格（攝影／插圖）、互動風格（動態／靜態）。Moodboard 需要先確認，方向一致再往下走。
業主在這個階段最重要的準備：把上面那幾個問題想清楚，越具體越好。
Phase 2：線框稿（約 2–3 天）
線框稿是以灰色方塊為主的版面草圖，不涉及顏色或精緻視覺，只確定結構：首頁 Hero 要放什麼、服務方案怎麼排、導覽列有哪些選項。
先確認資訊架構與版面方向，再進入視覺設計，可以避免做完精緻設計後才發現版面結構不對而整個推翻。線框稿的修改成本比 UI 稿低很多。
Phase 3：UI 設計稿（約 5–8 天）
把線框稿填入真實的品牌色彩、字型層次、圖片與元件細節。順序通常是：先做桌機版首頁 → 確認整體視覺方向 → 擴展到其他頁面 → 再做手機版。
同一時間建立設計系統（顏色與文字 Styles、可重複使用元件、8px 間距系統），前端開發時可以直接對照。
Phase 4：確認與修改
修改輪次通常寫在方案裡（例如兩輪版面修改），超出的部分另行說明。
有效的回饋長這樣：
- 「這個區域的文字顏色在手機上對比不夠，可以加深嗎？」（具體、可執行）
- 「按鈕圓角可以再大一點，感覺會更親切」（有方向）
容易造成無效來回的回饋：
- 「感覺不對，但我說不清楚哪裡」（方向不明）
- 「我不知道，你覺得呢？」（把判斷推回設計端）
Phase 5：交付
交付內容包含所有頁面的桌機版與手機版設計稿、設計系統元件、處理好尺寸與格式的圖片素材，以及間距與字型規格的標注。
接下來的內容，就是讓這五個階段跑得更順的 Figma 具體做法。
從頭開始：建立一個有組織的 Figma 檔案結構
凌亂的 Figma 檔案是效率殺手。在每個新案子開始前，花 10 分鐘建立清楚的結構。
一個典型的網頁設計 Figma 檔案結構：
- Cover（封面頁）：記錄專案名稱、客戶、版本、最後更新日期
- Design System（設計系統）：顏色樣式、文字樣式、Spacing tokens、圖示庫
- Components（元件庫）：Button, Input, Card, Navigation 等可重複使用元件
- Wireframes（線稿）：低保真的頁面結構規劃
- Designs（正式設計稿）：Desktop 和 Mobile 版本，按頁面分 Frame
- Prototype（原型連結）：可交互的 clickthrough prototype
- Dev Handoff（開發交付）：確認後的最終稿，帶有標注和資產
使用 Figma 的 Pages（左側 Tab）來區分這些區域，而不是把所有東西堆在同一個畫布上。
核心功能 1：樣式（Styles）系統
Figma 的樣式（Styles）功能讓你把顏色、文字樣式、效果定義為可重複使用的系統，類似 CSS 的變數概念。
建立顏色樣式：
在選取面板選取一個顏色後，點擊「+」建立樣式，命名為 Primary/900, Primary/500, Neutral/100 等語意化名稱。之後任何使用這個顏色的元素，都連結到這個樣式——修改樣式，所有使用處同步更新。
建立文字樣式：
定義 H1, H2, H3, Body/Large, Body/Regular, Caption 等文字樣式，包含字型、大小、行高、字間距。設計稿中所有文字使用樣式，不要用「散的」文字設定。
這個小習慣讓你之後調整字型或色彩主題時，不需要一一手動修改，只要改樣式定義，全部自動更新。
核心功能 2：Auto Layout
Auto Layout 是 Figma 最重要的功能之一，也是很多設計師沒有充分利用的地方。
它讓你的 Frame 具有類似 Flexbox 的行為——子元素排列方式（水平/垂直）、間距、padding 都可以設定，並且會自動適應內容的高度或寬度變化。
為什麼它重要：
沒有 Auto Layout 的設計稿，按鈕的文字一改變，你就要手動調整按鈕的寬度；Nav 加了一個選項，你要手動移動其他選項的位置。有了 Auto Layout，這些都是自動計算的。
使用建議：
- 幾乎所有的 Frame 都應該使用 Auto Layout
- 以「由內而外」的方式構建：先設計最小的元件（Button），用 Auto Layout 包起來；再組合成更大的結構（Navbar）；最後組成頁面。
核心功能 3：Components 和 Variants
Component（元件）：Figma 中可重複使用的設計單元。你設計一個 Button，把它轉換成 Component（右鍵 > Create component），然後在頁面上使用 Instance（元件的拷貝）。修改主要元件，所有 Instance 自動更新。
Variants（變體）：同一個元件的不同狀態或版本。例如 Button 元件的 Variants：Primary / Secondary / Ghost；未懸停 / 懸停（hover）/ 按下（pressed）/ 停用（disabled）。
使用 Variants，你可以在一個 Component 下管理所有狀態，讓設計稿更接近真實的開發實現。
實用的 Component 建議：
建立一個 Design System 的 Page，所有的 Component 都放在這裡。在實際設計時，使用 Component 的 Instance，絕對不要直接在頁面上修改主要 Component 的設計。
開發交付：讓工程師愛上你的設計稿
Figma 有內建的開發模式（Dev Mode），讓工程師可以直接查看設計稿的標注和樣式數值、下載 SVG 圖示或圖片資源，甚至生成基礎的 CSS 代碼。
交付前的準備清單：
- 確認所有文字都使用了命名的文字樣式，字型都有嵌入（不是系統字體的話要確認工程師端也有安裝）
- 確認所有顏色都使用了 Color Styles
- 圖示統一使用 SVG，必要的圖片資源 Export 好並命名清楚
- Frame 命名清楚（HomePage-Desktop, ContactSection-Mobile）
- 響應式設計：Desktop（1440px）和 Mobile（390px）版本都要有
- 寫一份簡單的交付說明（哪些動效需要特別注意、特殊互動的邏輯）
客戶審看流程
Figma 現在支援「Share for review」連結，讓客戶不需要帳號就能在瀏覽器中查看設計稿、留下評論。比截圖傳 LINE 的方式清楚太多了。
設定好 Prototype，讓客戶可以點擊按鈕跳頁，模擬真實的使用體驗——很多客戶看了可點擊的 Prototype 才真正理解設計意圖，確認速度也快很多。
善用 Figma 的這些功能，不只是讓你工作更快，也讓你呈現給客戶的設計更專業、易懂，大幅減少「我不知道你說的是這個樣子」的修改來回。