Figma 入門：設計師必學的 7 個基礎技巧

Figma 已成為全球 UI/UX 設計師最主流的設計工具，但新手面對複雜介面往往無從下手。本文精選 7 個最重要的 Figma 基礎技巧，讓你在最短時間內從零開始，建立紮實的設計基本功。

為什麼選擇 Figma？ 在 2024-2025 年的設計工具市場，Figma 已成為壓倒性的主流選擇。根據多份設計師調查，超過 70% 的 UI/UX 設計師以 Figma 作為主要工具。它的三大優勢是： 雲端協作 ：多人即時同步編輯，取代傳統的檔案來回傳遞 免費方案 ：個人用戶免費版功能已足夠強大，無需付費也能開始學習 跨平台 ：Mac、Windows、Linux、ChromeOS 皆可用，也有網頁版 技巧一：理解框架（Frame）的概念 框架是 Figma 最核心的概念，相當於其他工具的「畫板」。按 F 啟動框架工具，右側預設尺寸中有 iPhone、iPad、Web Desktop 等常見規格。 為什麼要用框架而不是群組？框架支援 Constraints（約束）、Auto Layout（自動排版）、原型連結等進階功能，是建立響應式設計的基礎。 技巧二：掌握 Auto Layout Auto Layout 是讓 Figma 新手最驚艷的功能。選取幾個元素後按 Shift+A，它們會自動排成整齊的橫排或縱排，間距統一可調整。 最神奇的地方是：新增或刪除項目時，整個排版會自動重新計算。不再需要每次新增一個列表項目就手動調整所有間距，設計效率大幅提升。 技巧三：元件讓設計可以擴展 當你設計出一個按鈕、一個卡片或任何重複使用的元素，按 Ctrl+Alt+K 將它轉成元件。之後每次需要相同元素，直接拖出元件的副本（實例）使用。 最強大的地方：修改主元件後，所有副本自動同步更新。整個 App 的按鈕顏色只需修改一次，不需要找出所有頁面的每個按鈕逐一修改。 技巧四：樣式讓設計系統化 顏色樣式和文字樣式是設計一致性的保證。建立方法： 在右側面板的顏色旁點選「+」建立顏色樣式，命名如 Primary/Blue 在字體設定旁點選「+」建立文字樣式，命名如 Heading/H1 當設計師決定將品牌藍從 #0066CC 改為 #0052A3 時，只需修改顏色樣式，整個設計稿所有使用該顏色的元素瞬間更新。 技巧五：原型連結建立互動流程 切換至頂部的 Prototype Tab，拖拉元素的連接點到另一個框架，就建立了一個可點擊的互動連結。加上轉場動畫，你的靜態設計稿就變成了可互動的原型。 透過右上角「播放」按鈕進入預覽模式，或分享預覽連結讓客戶在瀏覽器中直接體驗原型，不需安裝任何軟體。 技巧六：利用社群資源加速學習 Figma 有非常活躍的社群生態。在「社群」頁面可以找到： 免費 UI Kit：Apple Design Resources、Material Design 3 等官方資源庫 設計靈感：瀏覽其他設計師的公開作品，直接複製到自己的檔案中研究 插件：Unsplash（免費圖片）、Stark（無障礙檢查）、Content Reel（假資料填充）等工具 技巧七：Dev Mode 與開發者溝通 設計完成後，點選頂部切換至 Dev Mode，開發者不需要設計師逐一標注，就能直接看到每個元素的 CSS 屬性、間距數值、顏色代碼，甚至可以複製 React/iOS/Android 的代碼片段。 這個功能讓設計師和開發者之間的溝通成本大幅降低，也是 Figma 在業界廣受歡迎的重要原因之一。 下一步怎麼走？ 掌握這 7 個基礎技巧後，你已經具備了開始接設計專案的基本能力。想要更系統性地提升 Figma 技能，我們的 Figma 50 個設計協作技巧工具書涵蓋了從基礎到進階的完整技巧，包括元件系統設計、動畫原型製作和設計系統建立，幫助你成為真正的 Figma 高手。