2021/08/19
57,899
Figma 教學：UI／UX 設計熱門軟體 Figma 基本功能新手包
Figma 是現在最熱門的 UIUX 設計軟體之一！如果你也想快速上手 Figma，本篇 Figma 教學文章帶你用三個步驟輕鬆掌握 Figma 基本功能！
對文章有興趣來不及看？點選右上角「
橘色小書籤」收藏 文章，再也不怕錯過就是一輩子！
Figma 是現在最熱門的 UIUX 設計軟體之一。根據國外平台 2020 的 UI 設計工具調查報告，Figma 已經超越了 Sketch 成為業界使用工具第一名。它的即時同步與協作功能，讓設計師們能夠即時尋求團隊夥伴對於設計稿的反饋，減少大量溝通成本並能快速迭代設計。從設計到規格交付整個流程都直接整合在同一個工具裡，不需要像以往一樣切換不同工具，也大幅提升工作效率。加上對入門新手超級友善的免費方案以及使用瀏覽器就能隨開隨用，讓想學 UIUX 設計的新手們可以節省掉學設計初期的投入成本，也降低了學習門檻！
想要上手 Figma 操作，Figma 教學三步驟讓你輕鬆掌握基本功！
圖片來源：Hahow 圖庫
Figma 教學步驟 1：設定工作環境
1. 如何註冊 Fimga
一開始要先註冊 Figma，可以點選此連結（https://www.figma.com ）到 Figma 官網，右上角按下「sign up」按鈕就可以註冊帳號。
圖片來源：Figma
2. 如何創建一個設計檔案
圖片來源：Figma
進到檔案頁面，點選右方欄位「Design File」就可以創建一個新的檔案。
3. 熟悉編輯器介面
Fimga 編輯器有三大區塊，分別為最左邊的 Layers Panel 圖層面板、中間的 Canvas 畫布、最右邊的 Properties Panel 屬性面板。
圖片來源：Figma
-
Layers Panel 圖層面板：用階層列表的方式顯示畫面上所有的物件類型與名稱，方便我們瀏覽物件之間的關係以及進行物件管理。
-
Canvas 畫布：Figma 主要的設計工作區，是一個可以無限放大延伸的空間，基本上我們所有的設計內容都會在這裡顯現。
-
Properties Panel 屬性面板：可以針對不同物件設定專屬的屬性，例如調整顏色、調整文字大小、設定陰影效果、排版對齊方式等等，會根據選取物件的不同有不同調整選項。
Figma 教學步驟 2：上手左上角工具列
左上角工具列為 Figma 的基本功能列，總共有七個按鈕。以下為幾個基本一定會用到的按鈕。
-
箭頭按鈕（Move）：選取工具，可以透過它來移動不同的物體。按著它會出現下拉式選單 Scale 則可以用來縮放
-
長得像井字號的按鈕（Frame）：是 Frame 的工具，基本上就是畫板的功能。選取它你就可以在畫布上拉出 Frame。
-
T 的按鈕（Text）：文字工具，選取它就可以在畫布上任意打出文字。
-
手的按鈕（Hand tool）：移動畫板的工具，來看畫板上不同的設計
Figma 教學步驟 3：掌握 Frame 打好基本功
Frame 是在 Figma 中一個特別的功能，可以把他想像成一個外框、畫板，也就是可以承裝不同設計元件的容器。
在左上角工具列按下 Frame 工具，你就可以在畫布上拉出不同尺寸的 Frame。你也可以使用系統預設好的尺寸，這個會出現在右邊的面板，你可以看到有很多選項可以選。
圖片來源：Figma
Frame 的特色是可以一層包一層，也就是 Frame 裡面可以有子 Frame，你可以用圖層面板來看它們的層次關係。
圖片來源：Figma
同場加映：Figma 免費自學資源
以下我們整理了幾個想要上手 Figma 你可以參考的免費自學資源
▶︎ UX 設計師 Simon 的《產品設計實戰：用 Figma 打造絕佳 UI/UX》
推薦同學可以觀看課程中的兩個免費試看單元「掌握 Figma 神器：Auto Layout」以及「讓設計更一致與整潔：熟悉元件 Component」，了解 Figma 兩個重要功能的操作方式。
如果你不害怕英文，也可以參考 Figma 官方提供的免費資源：
▶︎ Figma for Beginners
▶︎ Figma Tips
以及下面這個 24 分鐘上手 Figma 的免費 Youtube 影片：
▶︎ Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2021)
以上就是我們整理的自學資源，希望能夠幫助你快速入門！
看完文章要用時卻忘光光？點選下方按鈕
收藏此文章，我隨時都在這等你回來！
想知道更多 UIUX 設計師該具備哪些能力與知識嗎？
Hahow 全新創作者專欄：UIUX 職場生存術：給 UIUX 設計師的知識補給 >> 馬上探索
現在透過小蛙同學專屬連結註冊，馬上領價值 300 元購課金！更可免費試看超過 800 堂課程 ✨
課程推薦：
▶ 產品設計實戰：用 Figma 打造絕佳 UI/UX
延伸閱讀：
AAPD 是一個設計教育品牌與人才孵化器，我們致力於培養優秀的產品設計人才，同時分享設計師在成長過程中所需要的知識與技能，以及創造社群共學的環境與交流互動。 我們長期關注產品設計 (UI/UX)、設計職涯、個人成長、設計趨勢與產業動態等議題，希望能夠降低設計師在職涯成長的過程中所遇到的阻礙。 我們也期待 AAPD 成為一個產品設計領域進步的推進器，除了知識的分享與傳遞外，我們也希望幫助設計師思考如何夠過設計的力量，為服務的組織與產品創造更多的價值與影響力。
9876