#設計#介面設計

所有知識內容>自學設計>介面設計

小蛙同學

2024/04/18

51,997

Figma 自學指南｜從零開始第一個設計稿！揭秘 UI/UX 愛用操作

為什麼愈來愈多設計師從 Sketch 轉換至 Figma？想學 UI/UX 卻還在煩惱選哪種軟體嗎？本文從設計師親口大讚的特色、不藏私模板與素材網到 Figma 教學步驟，幫你輕鬆踏出 Figma 自學第一步！

對文章有興趣來不及看？點選右上角「橘色小書籤」收藏文章，再也不怕錯過就是一輩子！

Figma 是什麼？設計師透露 3 大特色躍升業界紅榜

＃線上協作＃操作直覺＃豐富外掛

Figma 是一款近年來非常受業界歡迎的線上介面設計工具，2023 年 UX Tools 的統計報告顯示，世界各地超過 ⅔ 的工作者都將 Figma 作為首要工具。

2023 年最受歡迎的 UI 設計工具，Figma 位居第一且大幅超越其他工具。截圖自 UX Tools 網站

為什麼 Figma 炙手可熱？業界設計師透露以下 3 大特色，是 Figma 在短短幾年成為主流的秘密。

特色 1｜線上團隊協作超方便

團隊協作，絕對是設計業中不可缺少的工作環節。

不論是繪製網頁、應用程式與數位產品的使用者介面，或是 UI/UX 使用者體驗的設計，都需要開發工作者、設計師、工程師、產品經理與客戶無數次的商討與溝通。

Figma 基於雲端的即時協作功能，在此發揮 3 個重要影響。

同一份文件切換模式：不需要額外使用第二個軟體，只要切換成開發模式，設計師就能與工程師在同一份文件上合作。還可以自動生成 Html 與 CSS 方便工程師複製。
允許多帳號同步查看與標注：專案參與者可以同步於線上查看、編輯和討論設計，一個平台整合所有流程需求，大大提高團隊合作效率。
友善遠端工作與跨國協作：基於雲端，而且搭載裝置多元，實現各地與多設備的遠距離合作。

特色 2｜功能聰明，價錢友善

能成為最受使用者介面（UI）和使用者體驗（UX）設計師歡迎的工具，不只仰賴協作功能，也要歸功於 Figma 的設計工具與功能人性化！

Figma 不只能使設計師製作設計稿，也允許製作原型（prototype），方便開發討論，更有讓設計師讚不絕口的自動排版（Auto layout）功能，大幅減少排版修改的時間。（🔖基本功能介紹，請下滑後文）

除了滿足五花八門的設計需求，也內建豐富的設計元素和模板，讓設計工作的初期階段更容易上手。

重點是，費用方案佛心！Figma 推出 4 種方案，從免費、專業、組織到企業都有，依照功能與資源的齊全程度分類。就算是免費版，對於新手也夠用了，十分適合只是想練手的初學者，入場學習零成本。（🔖付費方案介紹，請下滑至最後）

最受使用者介面（UI）和使用者體驗（UX）設計師歡迎的工具
Photo by charlesdeluvio on Unsplash

特色 3｜Figma 社群豐富的設計資源

Figma 共享社群是設計師經常造訪的風水寶地。使用人口多，熱度又高，因此 Figma 社群非常活躍。

使用者共享手邊的文件與專案，讓設計團隊參與回饋。
愈來愈多免費的 Figma 資源，模板、套件或插圖。
網上一搜，Figma 教學課程和文件也能輕鬆找到。

這些優勢都讓初學者站在前輩設計師的肩膀上，大幅降低走冤忘路的時間。

除了豐富的模板，Figma 也支援安裝第三方外掛（Plugin）。可加入 AI 、地圖、自動箭頭指示、黃金比例尺等包羅萬象的功能，讓設計工作更加輕鬆，擴大 Figma 原有版圖。（🔖 模板與素材網站分享，請下滑後文）

UI/UX 軟體大亂鬥：Figma、Sketch、Adobe XD 比一比

看完 Figma 特色介紹，依然意猶未盡？這就為你整理市面上常見的 UI/UX 軟體，從優缺點、適用裝置、使用時機到付費方式，讓你依據自己的情境與預算選擇吧！

UI/UX 軟體大亂鬥：Figma、Sketch、Adobe XD 比一比
Photo by Alexander Shatov on Unsplash

Figma

Figma 是一款向量圖形編輯器和原型（prototype）設計工具，主要基於雲端網頁進行工作。介面操作直覺與人性化，不只專業的使用者介面設計師喜愛，也非常適合初學者。

Figma 優缺點比較表

適用裝置：Figma 可以在各種裝置上運行，包括電腦（Windows、macOS、Linux），搭配 Figma Mirror 後也可以在移動裝置（iOS 和 Android）隨時使用。
使用時機：雲端協作和討論功能是 Figma 最大特色之一，如果你的專案很需要多人協調，使用 Figma 可以達到更高效的溝通。
付費方式（有免費版）：免費、專業、組織到企業共 4 種方案，價錢範圍落在 12-75 美金（NTD 370-2,310），依照功能與資源齊全程度分類。

Sketch

Sketch 是專為開發 macOS 的向量圖形編輯器，曾在 2012 年獲得了蘋果設計大獎，主要用於網站和行動應用程式的 UI/UX 設計。

Sketch 優缺點比較表

適用裝置：Sketch 目前僅支援在 macOS 平台上運行，適用裝置主要是 MacBook 和 iMac。
使用時機：如果你可以獨立設計項目，無需與團隊合作，那 Sketch 依然不可否認是一個功能強大且操作簡潔的設計工具。
付費方式（訂閱／買斷）：Sketch 的付費方式為訂閱制與買斷制，訂閱方案分為兩種類型（標準與企業），價錢每個月10-20 美元（NTD 319-639）。買斷方案則為 120 美元（NTD 3,833），但僅提供一年的更新與支援，之後還需要購買新的授權。

💡 促使設計師從 Sketch 逐漸轉向 Figma 的 2 個原因

Sketch 只能在 Mac上使用，限制多。
Sketch 無法透過雲端共編協作：當設計師完成設計稿之後，還需要將設計稿全數上傳至 Zeplin 這個付費的套件軟體，才能切圖給工程師使用。

Adobe XD

Adobe XD 是一款 Adobe 系列的向量繪圖軟體，用來設計網頁及行動應用程式的 UI/UX。

Adobe XD 優缺點比較表

適用裝置：Adobe XD 可以在 macOS、Windows、iOS 與 Android 平台上運行，適用裝置為 Windows 電腦、MacBook Pro 和 iMac 與手機。
使用時機：如果你熟悉 Adobe 系列的軟體，那麼會對操作邏輯類似的 Adobe XD 較容易熟悉，更方便素材整合。
付費方式（訂閱）：Adobe XD 的付費方式為訂閱制，價錢為每個月 NTD 320。

Figma 基本操作介面，簡單直觀的 5 大區塊

趕緊來看看設計師大讚的 Figma，基本的操作介面長什麼樣子吧！

Figma 基本操作介面
截圖自 Figma 實際操作頁面

首次打開 Figma 時，會發現操作介面的邏輯十分直覺，不會過於複雜，大致分為 5 大區塊。分別是：

設計工具列（Design Toolbar｜左上角）：包含一系列的設計工具，如選擇、移動、矩形、圓形、筆劃、文本等，方便快速選擇和使用工具。
圖層面板（Layers Panel｜左側）：顯示畫布中所有元素的層級結構，分為頁面（page）和圖層（section），方便你管理畫布裡各種設計元素。
畫布（Canvas｜中央）：設計工作的主要區域，可以在畫布上放置設計元素並排版，如形狀、圖片和文本等。
原型製作工具欄（Prototype Toolbar｜右上角）：包含原型製作和交互設計的工具，如超連結、過渡效果、添加動畫和畫面百分比。
屬性面板（Properties Panel｜右側）：顯示所選取元素的屬性和設定選項，可以進入這裡調整顏色、大小、字型和對齊方式。

接下來，如何開始你的第一個設計稿呢？
請點選左上角「設計工具列」中的新檔案，得到一張乾淨的新畫布。現在，可以開始揮灑創意啦！

Figma 基本操作介面
截圖自 Figma 實際操作頁面

Figma 基礎步驟教學＋設計師愛用的 3 大功能

“ How you design, align, and build matters. Do it together with Figma! ”

第一次點進 Figma 網頁，印入眼簾的就是這句醒目的文案。這也是我們理解 Figma 基本功能的三把鑰匙——設計（Design）、對齊（Align）、建構（Build）。這裡用簡單的實際演練，來示範這三把鑰匙如何在 Figma 設計稿中發揮效果。

Step 1. 設計（Design）

準備好新畫布後，先從畫上形狀開始吧！

設計工具列（左上角）中請先建立框架（Frame），接著才點開形狀工具，在框架中畫出幾何圖形。
工具列中內建許多圖形可供選擇，如矩形、圓形、三角形或是線條，都可以用來建立基礎元素。

Figma-框架和形狀指示
截圖自 Figma 實際操作頁面

Step 2. 對齊（Align）

等等，畫布中的圓形似乎有點不整齊？

這時候，你可以選擇——

手動微調（畫面會出現紅色的輔助對齊線）
也可以將它們框選起來，至屬性面板（右側）選取不同的對齊模式，如水平對齊、垂直對齊和分佈對齊等。

完成對齊後，也順便調整圖形的外框和內部顏色，讓畫面看起來符合你的審美吧！

Figma-框架和對齊指示
截圖自 Figma 實際操作頁面

Step 3. 建構（Build）

重頭戲來了！點開原型製作工具欄（右上角），接著——

點選畫布中框架之內的圖形，會看見圖形邊緣出現「⊕」
點選「⊕」後會出現箭頭，請將箭頭連接到你下一步想呈現的物件，完成第一個「流程」（Flow）建立！
流程的建立，可以想像成在使用者介面「點一下」之後，畫面會前往的地方

F-原型操作
截圖自 Figma 實際操作頁面

最後，如果建立雙向的 Flow，就可以出現下方 GIF 中的效果囉！

建立雙向的 Flow
節錄自 Figma 實際操作頁面

恭喜！你已經認識 Figma 基本的三大功能了。

Figma 還有琳瑯滿目的細節，被設計師們津津樂道。下文整理 3 個初學者必知的基本功能，了解後就可以馬上玩玩看啦！

Frame｜位於「設計工具列」

Figma 教學中的第一堂課，勢必要提及群組（Group）和框架（Frame），都是 Figma 中將多個元素綁定的功能。然而，兩者不同的是，調整 Frame 的邊界尺寸，內部元素不會隨之改變尺寸，可運用約束（Constraint）規則來設定內部與邊界的關係。

這個功能非常實用，尤其是 APP 註冊時經常出現的「使用者服務條款」，長篇大論的文字，運用 Frame 可以輕鬆界定邊界，不會因為文字過多而跑版，還要花更多時間後續調整。

Auto layout｜位於「屬性面板」

被業界設計師大讚實用的功能，就是「自動排版」（Auto layout）。看起來舒服的使用者介面，經常倚賴視覺上整齊劃一的位置與尺寸，如果每一頁或每一項物件都要手動調整，不但浪費時間也容易有所疏漏。

所以，專業的設計師會將每一段需要控制的物件關係（如位置高度、框線寬度等等）都製作 Auto layout，能為畫面質感帶來大幅提升。另外，九宮格的對齊模板，也適用許多設計情境，方便設計師快速完成版面設計。

F-自動排版
截圖自 Figma 實際操作頁面

Plugins｜位於「設計工具列」

大受歡迎的 Figma 也得力於豐富的外掛插件，有協助開發工具、AI 生成圖、黃金比例尺等功能，讓設計師們事半功倍。

你可以在左上角的工具列中叫出插件欄，管理你下載至 Figma 的第三方外掛。也可以按下「收藏」，要用時就不怕找不到。以下列出 Figma 的 3 個熱門插件，讓你的設計工作變得更得心應手！

Calendar Generator（日曆生成器｜可建立 12-36 個月，含周編號的日曆網格）
Social Media Images Size（社群媒體圖像尺寸｜IG/LinkedIn/Twitch/YouTube 多達 16 種常見社群媒體圖像的尺寸，都被整理在這裡了）
Open Iconic Icon Set by Iconduck（內含多種流行又萬用的使用者介面圖示）

F-插件
截圖自 Figma 實際操作頁面