為什麼 Figma 是設計師必學的工具

在 Figma 出現之前，網頁設計的工作流程非常分散：在 Sketch 做設計、Zeplin 交付標注、InVision 做原型、Google Drive 管理版本——光是在工具之間切換就耗掉大量時間。

Figma 把這些全部整合到一個工具裡，加上基於瀏覽器的協作特性（不需要安裝、可以即時多人編輯），大幅降低了設計師和客戶、工程師之間的溝通摩擦。

如果你還在用其他工具，或已經在用 Figma 但只是把它當成「高級 PowerPoint」，這篇文章能幫你解鎖更多效率。

從頭開始：建立一個有組織的 Figma 檔案結構

凌亂的 Figma 檔案是效率殺手。在每個新案子開始前，花 10 分鐘建立清楚的結構。

一個典型的網頁設計 Figma 檔案結構：

使用 Figma 的 Pages（左側 Tab）來區分這些區域，而不是把所有東西堆在同一個畫布上。

Figma 的樣式（Styles）功能讓你把顏色、文字樣式、效果定義為可重複使用的系統，類似 CSS 的變數概念。

建立顏色樣式：

在選取面板選取一個顏色後，點擊「+」建立樣式，命名為 Primary/900, Primary/500, Neutral/100 等語意化名稱。之後任何使用這個顏色的元素，都連結到這個樣式——修改樣式，所有使用處同步更新。

建立文字樣式：

定義 H1, H2, H3, Body/Large, Body/Regular, Caption 等文字樣式，包含字型、大小、行高、字間距。設計稿中所有文字使用樣式，不要用「散的」文字設定。

這個小習慣讓你之後調整字型或色彩主題時，不需要一一手動修改，只要改樣式定義，全部自動更新。

Auto Layout 是 Figma 最重要的功能之一，也是很多設計師沒有充分利用的地方。

它讓你的 Frame 具有類似 Flexbox 的行為——子元素排列方式（水平/垂直）、間距、padding 都可以設定，並且會自動適應內容的高度或寬度變化。

為什麼它重要：

沒有 Auto Layout 的設計稿，按鈕的文字一改變，你就要手動調整按鈕的寬度；Nav 加了一個選項，你要手動移動其他選項的位置。有了 Auto Layout，這些都是自動計算的。

使用建議：

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 代碼。

交付前的準備清單：

Figma 現在支援「Share for review」連結，讓客戶不需要帳號就能在瀏覽器中查看設計稿、留下評論。比截圖傳 LINE 的方式清楚太多了。

設定好 Prototype，讓客戶可以點擊按鈕跳頁，模擬真實的使用體驗——很多客戶看了可點擊的 Prototype 才真正理解設計意圖，確認速度也快很多。

善用 Figma 的這些功能，不只是讓你工作更快，也讓你呈現給客戶的設計更專業、易懂，大幅減少「我不知道你說的是這個樣子」的修改來回。