使用者介面設計課程講義

Figma註冊與基本認識

Figma

Figma介紹

FIGMA官網

Skeuomorphic Design Example
Figma模組功能介面

Figma 是一款基於雲端的協作式 UI/UX 設計工具,廣泛用於網頁設計、App 介面設計、流程圖製作、元件系統規劃等。它支援多人即時編輯、版本控制與原型模擬,已成為設計教育與業界實務的重要平台之一。

只要有網路,可在任何電腦進入Figma官網,登入帳號或註冊帳號後,即可隨時隨地工作,繼續進度,毫無障礙。

Figma 於 2016 年正式推出,由 Dylan Field 與 Evan Wallace 創立。它的誕生背景是為了解決傳統設計工具的限制,特別是跨平台不便、檔案版本混亂、以及缺乏即時協作的問題。Figma 的最大特色在於「雲端化與協作」,讓設計師、工程師與產品經理能像 Google 文件一樣,即時共同編輯與評論設計稿,突破了 Sketch 與 Adobe XD 的使用模式。

在功能上,Figma 提供完整的 UI 設計、原型設計、設計系統管理 等能力。使用者能夠繪製介面、建立元件庫、設定樣式規範,並且直接進行互動原型連結。此外,Figma 還有廣大的 外掛生態系,例如 Iconify、Feather Icons、圖表生成器與協作工具,使設計過程更高效率。同時,它支援 跨平台使用(Windows、macOS、Web 版),還能透過手機 App 進行設計稿預覽。


Figma 的主要優點

  1. 即時協作
  2. 多位使用者可同時編輯文件,並即時看到對方操作。
  3. 跨平台支援
  4. 不受限於作業系統,僅需瀏覽器即可使用。
  5. 免費入門
  6. 免費版功能已相當完整,適合學生或小型團隊。
  7. 版本控制
  8. 雲端自動儲存設計歷史,方便追蹤修改紀錄。
  9. 設計系統整合
  10. 可建立共享元件、字體與顏色規範,提升設計一致性。

Figma 也有一些缺點需要考慮

  • 網路依賴性高
  • 使用 Figma 需要有穩定的網路連線,這對於工作環境沒有網路或是網路連線不穩定的使用者來說可能較為不便。
  • 大型檔案易延遲載入
  • 或操作包含大量圖層的大型文件時,Figma 的運作可能會出現延遲。
  • 雲端隱私和安全問題
  • 任何線上軟體都存在隱私和安全問題;因此在分享機密性較高的專案時,需要特別留意權限的設定,避免遭到惡意修改或是隱私外洩。

    雖然 Figma 免費版已相當強大,但若要進行更進階的團隊協作與資源管理,仍需訂閱付費方案。 總結來說,Figma 不僅是一款設計工具,更是整合了 設計、協作與版本管理 的平台。它的出現改變了 UI/UX 設計流程,讓團隊合作更高效,也逐漸成為現代設計師的主流選擇。

Figma 產品功能模組介紹

Figma 現在包含下列模組,提供設計、協作、簡報與開發整合的一站式工作平台:

核心介面設計工具

用於 UI/UX 設計、排版、圖形創作與原型連結。

白板與協作思考

協作式白板工具,適用於頭腦風暴、流程圖、設計思考工作坊。

簡報製作

互動簡報工具,可結合設計與元件直接製作提案簡報。

互動設計開發中平台

開發中功能,為無程式碼設計互動原型與工作流程設計平台。

網站展示

一鍵將設計轉換為公開網站頁面,適用於展示作品或設計規範。

輕鬆製作資產

發布品牌模板,讓您的團隊快速建立社群媒體資產、展示廣告、單頁宣傳資料等。

插圖工具

使用插圖工具、改進的向量編輯和更多效果創建更具表現力的設計。使用向量畫筆、進階描邊設定、填充等功能創作插畫。無需切換工具,一切盡在 Figma。

開發者模式

開發者模式專為開發者打造,讓您輕鬆檢查設計並將其轉換為程式碼,無需更改設計文件。所有付費方案的完整版和開發者版用戶均可使用開發者模式。

Figma 的核心特色
01

雲端協作

無需安裝軟體,透過瀏覽器即可進行多人即時編輯,並支援即時共編、權限管理與留言系統。設計過程中的每一次變更都會自動儲存並即時更新,方便團隊成員在不同地點、不同裝置上共同進行設計討論與修改。

02

向量繪圖工具

Figma 採用向量為基礎的設計模式,可精確建立 UI 元件、圖示、排版、網格與圖形。支援布林運算、圖層遮罩與組件複用等設計技巧,讓畫面清晰且易於調整,適合 UI/UX 設計與圖像元件系統建立。

03

原型設計

使用者可在 Figma 中直接將設計稿連結成互動流程,模擬使用者點擊行為與畫面轉場效果,並支援 Smart Animate、Hover、After Delay 等動畫設定。原型可即時預覽與分享,適合用於簡報、測試與迭代。

04

元件系統與設計規範

Figma 可建立可重用的元件(Component)、變數(Variable)、樣式(Style)與圖層命名規則,並整合成 Design System。設計師與工程師可共享相同資源,提升設計一致性與跨團隊溝通效率。

05

社群資源豐富

Figma 社群(Figma Community)提供數以千計的免費設計模板、圖示、元件庫與實用插件(Plugin),學生與設計師可直接套用與改編,也可發表自己的作品與團隊共用。


Figma 教育版註冊方式

首先進入 FIGMA官網 ,Figma Design首頁,選擇Get started for free 進行免費註冊。

FIGMA
Figma Design首頁,選擇Get Started for Free 進行註冊
FIGMA
輸入學校.edu的email帳號

Figma 提供 免費的 Education Plan 給學生與教育工作者。 功能相當於 Figma Professional 付費方案,包括:

  • 無限編輯者(Unlimited Editors)
  • 無限檔案與專案(Projects & Files)
  • 進階版權限管理
  • 無限版本歷史紀錄
適合用於課堂教學、小組設計專案、設計比賽或學術研究。

申請資格

  • 學生:需具備有效的 教育機構信箱(如 .edu、.ac.tw)或能提供學生證明文件。
  • 教師:需能證明所屬教育單位,例如教師證明文件或學校官網資訊。

申請流程

  • 步驟一:登入 Figma 帳號
    1. 前往 Figma Education Plan
    2. 使用 個人 Figma 帳號
  • 步驟二:填寫申請表單
    1. 選擇身分:Student 或 Educator。
    2. 填寫學校名稱、課程用途。
    3. 提供 教育信箱 或 證明文件(如學生證、在學證明 PDF)。
  • 步驟三:提交審核
    1. Figma 團隊會進行審核(通常 1–7 天內完成)。
    2. 審核通過後,帳號自動升級為 Figma Education Plan。

注意事項

  • 教育版資格有效期 1 年,到期需重新驗證。
  • 如果沒有教育信箱,可以上傳 學生證或入學通知書。
  • 教育版僅能用於教學與學術用途,不能用於商業專案。
  • 教育版支援 Figma 與 FigJam,非常適合小組腦力激盪與課程合作。

Figma介面與工具認識

    核心介面設計工具

    用於 UI/UX 設計、排版、圖形創作與原型連結。

Skeuomorphic Design Example
Figma Design畫面
Skeuomorphic Design Example
FigJam畫面

UI Mockup軟體

早年製作介面精稿(Mockup),多使用photoshop或Illustrator來製作,但這兩個軟體功能強大,但並不是為了介面設計而開發的軟體,因此在使用上較為複雜,開發方式及過程較不直覺,而近年來,UI設計師開始使用專為網頁(web)及行動應用程式(APP)開發的UI 設計工具來設計介面精稿。
以下介紹三個目前最夯的UI 設計工具:Sketch 是業界最愛用的介面設計軟體,但僅限於MAC OS系統使用。還有Adobe開發的介面設計軟體XD,以及異軍突起的新星Figma,無論PC MAC皆可使用,並且只要在瀏覽器上即可操作,使用非常便利。

FIGMA官網

FIGMA

是目前最多人使用的介面設計軟體。
  • 介面視覺設計:設計版面配置、按鈕、ICON、字體、顏色、插畫等。
  • 建立設計系統:制定顏色、字體、間距、按鈕等規範,確保設計一致性。
  • 元件與樣式製作:在 Figma、Sketch 等工具中建立可重用的 UI 元件。
  • 與 UX 配合:將 UX 線框圖與使用流程轉換為最終視覺成品。
  • 與前端協作:提供切圖、樣式規範,確保設計能精準落地。
Skeuomorphic Design Example
Figma Design畫面

Sketch

  • Sketch只支援 MAC OS,是業界最開始主要使用的介面設計軟體,直觀的介面,沒有任何軟體基礎的人都容易上手,門檻不會太高。有豐富強大套件資源,Toolbox 有豐富的套件、模板、外掛等資源,加速設計流程。
sketch
Sketch介面

  • Adobe XD是Adobe系列的UI設計工具,支援 MacOS、Windows,因為是Adobe開發的軟體,操作簡單,類似 Illustrator 介面。能整合 AI 與 PS,可以能整合 Illustrator 文件。能在Creative Cloud 做儲存與共用。
sketch
Adobe XD介面

HomeWork|課後作業

第二、三週作業:

01

註冊Figm

註冊 FIGMA 教育版本。

02

Figma基本功能練習

確實練習|『中文化|官方基本功能說明文件』中的基本八大功能:1.Frame|框架、2.Constraints|約束條件、3.Components|組件、4.Styles|樣式、5.Smart Selection|智能選擇、6.Exporting|輸出、7.Commenting|註解、評論、8.Sharing|共享

03

練習APP首頁畫面

依Figma基本功能練習單元,自訂主題,設計出一個APP登入頁面。回覆至Moodle。