使用者介面設計課程講義
Figma 註冊與
基本認識
申請免費的 Figma 教育版、認識 Figma 的介面與工具，再跟著 16 個步驟親手做出第一個 APP 登入頁——這是你這學期所有作品的起點。
Figma 介紹
Figma 現在包含下列模組，提供設計、協作、簡報與開發整合的一站式工作平台。
Figma 產品功能模組：點一個看說明
Figma 的核心特色
雲端協作
無需安裝軟體，透過瀏覽器即可進行多人即時編輯，並支援即時共編、權限管理與留言系統。設計過程中的每一次變更都會自動儲存並即時更新，方便團隊成員在不同地點、不同裝置上共同進行設計討論與修改。
向量繪圖工具
Figma 採用向量為基礎的設計模式，可精確建立 UI 元件、圖示、排版、網格與圖形。支援布林運算、圖層遮罩與組件複用等設計技巧，讓畫面清晰且易於調整，適合 UI/UX 設計與圖像元件系統建立。
原型設計
使用者可在 Figma 中直接將設計稿連結成互動流程，模擬使用者點擊行為與畫面轉場效果，並支援 Smart Animate、Hover、After Delay 等動畫設定。原型可即時預覽與分享，適合用於簡報、測試與迭代。
元件系統與設計規範
Figma 可建立可重用的元件（Component）、變數（Variable）、樣式（Style）與圖層命名規則，並整合成 Design System。設計師與工程師可共享相同資源，提升設計一致性與跨團隊溝通效率。
社群資源豐富
Figma 社群（Figma Community）提供數以千計的免費設計模板、圖示、元件庫與實用插件（Plugin），學生與設計師可直接套用與改編，也可發表自己的作品與團隊共用。
延伸閱讀：Figma 操作手冊（Claude AI 解析）
先註冊帳號（2 步）
Get Started for Free
Figma Design 首頁，選擇 Get Started for Free 進行註冊。
輸入學校的 email
輸入學校 .edu 的 email 帳號，之後申請教育版審核會比較順利。
教育版有什麼？
Figma 提供免費的 Education Plan 給學生與教育工作者，功能相當於 Figma Professional 付費方案，適合用於課堂教學、小組設計專案、設計比賽或學術研究。
無限編輯者
Unlimited Editors，全組一起編輯。
無限檔案與專案
Projects ＆ Files 不限數量。
進階權限管理
控制誰能檢視、誰能編輯。
無限版本紀錄
隨時回到之前的版本。
互動檢查：我可以申請教育版嗎？
選出你的狀況，右邊會告訴你能不能申請、還缺什麼。
先在左邊選擇三個問題的答案
教育版只提供給學生與教育工作者；一般使用者可以先用免費的 Starter 方案。
教育版僅能用於教學與學術用途，不能用於商業專案。
需要教育信箱；如果沒有，可以上傳學生證或入學通知書等證明文件。
教師需能證明所屬教育單位，例如教師證明文件或學校官網資訊。前往 Figma Education Plan 申請，審核通常 1–7 天。
前往 Figma Education Plan，用個人 Figma 帳號登入後填表申請，審核通常 1–7 天，通過後帳號自動升級。
申請流程三步驟
登入 Figma 帳號
前往 Figma Education Plan，使用個人 Figma 帳號登入。
填寫申請表單
選擇身分：Student 或 Educator；填寫學校名稱、課程用途；提供教育信箱或證明文件（如學生證、在學證明 PDF）。
提交審核
Figma 團隊會進行審核（通常 1–7 天內完成），審核通過後，帳號自動升級為 Figma Education Plan。
注意事項
- 教育版資格有效期 1 年，到期需重新驗證。
- 如果沒有教育信箱，可以上傳學生證或入學通知書。
- 教育版僅能用於教學與學術用途，不能用於商業專案。
- 教育版支援 Figma 與 FigJam，非常適合小組腦力激盪與課程合作。
檔案名稱與位置
點檔名可以重新命名；下方顯示檔案存放的專案（Drafts 是個人草稿區）。
Pages 頁面
一個檔案可以有很多頁，例如把「Wireframe」「Mockup」「Prototype」分頁存放，按 ＋ 新增頁面。
Layers 圖層
目前頁面所有物件的清單。記得替圖層取有意義的名字，不要留下 Group 142、Frame 888。
畫布 Canvas
無限大的工作區，上方與左側是尺規。按住空白鍵拖曳可以移動畫面，Shift＋1 縮放到看見全部。
移動工具
選取、移動物件，是最常用的工具。快捷鍵 V。
Frame 框架
做 APP 的第一步：在右側面板選擇手機尺寸，建立一個畫面容器。快捷鍵 F。
形狀工具
矩形、橢圓、直線等基本形狀，按鈕底框就是用矩形畫的。快捷鍵 R（矩形）、O（橢圓）。
鋼筆工具
繪製自由的向量路徑與圖示。快捷鍵 P。
文字工具
點一下輸入標題或內文，記得選擇支援中文的字體。快捷鍵 T。
Figma AI
Actions 選單集合了 AI 功能，例如自動重新命名圖層、產生內容或修改設計。
模式切換
右下角切換 Draw（插畫）、Design（設計）與 Dev Mode（開發者模式）。
Design／Prototype 面板
Design 調整選取物件的尺寸、顏色、文字；Prototype 設定點擊後要跳到哪個畫面與轉場動畫。右邊的 100% 是縮放比例。
Variables 與 Styles
儲存顏色、文字、間距等可重複使用的設定，是之後建立 Design System 的基礎。
Export 輸出
選取 Frame 後按 ＋，可以把畫面匯出成 PNG、JPG、SVG 或 PDF，作業繳交就會用到。
Play 播放
以原型模式播放你的設計，像真的 APP 一樣點擊操作。
Share 分享
邀請組員共同編輯，或複製連結給老師檢視；繳交作業時分享「可檢視」的連結。
互動練習：Figma 快捷鍵
按「開始」後，直接在鍵盤上按出題目要的快捷鍵；Mac 用 ⌘，Windows 用 Ctrl。點右邊清單可以跳題。
- 移動 MoveV
- 框架 FrameF
- 矩形 RectangleR
- 橢圓 EllipseO
- 直線 LineL
- 文字 TextT
- 鋼筆 PenP
- 註解 CommentC
- 自動版面 Auto layoutShift A
- 複製 DuplicateMod D
- 群組 GroupMod G
- 縮放到全部Shift 1
介面一覽
Figma 基本功能練習：APP 登入頁面
使用 Figma 與 Figma Draw，製作一個 APP 登入頁面。先看示範影片，再跟著 16 個步驟做一次。
跟著做：16 個步驟
點數字跳到任一步，或用「下一步」依序完成；做過的步驟會變色。
互動練習：組裝一個登入頁
勾選登入頁需要的元件，右邊的手機會即時組裝出來——動手做之前，先想清楚畫面要放哪些東西。
回想 Unit 01：按鈕高度至少 44px，主要按鈕放在畫面中下方的拇指熱區。已組裝 0 / 7
開始組裝
每個人依上述步驟，可自行發揮、自訂主題，將練習檔分享 Figma 播放連結並上傳圖檔至 Moodle。
UI Mockup 軟體
早年製作介面精稿（Mockup）多使用 Photoshop 或 Illustrator，這兩個軟體功能強大，但並不是為了介面設計而開發，使用上較為複雜、不直覺。近年來，UI 設計師開始使用專為網頁（Web）及行動應用程式（APP）開發的 UI 設計工具來設計介面精稿。
異軍突起的新星，也是目前最多人使用的介面設計軟體。無論 PC、Mac 皆可使用，只要在瀏覽器上即可操作，使用非常便利。可以用 Figma 完成：
- 介面視覺設計：版面配置、按鈕、ICON、字體、顏色、插畫等。
- 建立設計系統：制定顏色、字體、間距、按鈕等規範，確保設計一致性。
- 元件與樣式製作：建立可重用的 UI 元件。
- 與 UX 配合：將 UX 線框圖與使用流程轉換為最終視覺成品。
- 與前端協作：提供切圖、樣式規範，確保設計能精準落地。
業界最開始主要使用的介面設計軟體，僅支援 macOS。直觀的介面，沒有任何軟體基礎的人都容易上手，門檻不會太高。有豐富強大的套件資源，Toolbox 有豐富的套件、模板、外掛等資源，加速設計流程。
Adobe XD 是 Adobe 系列的 UI 設計工具，支援 macOS、Windows。操作簡單、類似 Illustrator 介面，能整合 AI 與 PS 檔案，並在 Creative Cloud 儲存與共用。
Adobe 自 2023 年起已不再為 XD 開發新功能（僅維護），新專案建議使用 Figma。
三款工具快速比較
互動選擇：哪一套工具適合我？
先選左邊兩個問題
瀏覽器即可操作、多人即時共編，任何電腦都能開——這也是本課程使用 Figma 的原因。
Sketch 不支援 Windows，Figma 在任何電腦的瀏覽器都能使用。
Mac 可以使用 Sketch；但本課程的作業、範例與分組合作都使用 Figma，建議統一使用 Figma。
本週觀念自我檢核
6 題快問快答，確認你記住了教育版規定與 Figma 的基本操作。選錯會顯示正確答案與說明。
HomeWork｜課後作業
第二、三週作業。做完一項就勾一項，進度會記在你的瀏覽器。