- 軟體名稱：Figma
- 授權類型：免費軟體
- 支援系統：Windows,Mac,iOS,Android
- 官方網站：Figma
Figma 是一款基於雲端的 UI/UX 設計與原型製作工具，非常適合多人協作。以下是由淺入深的 Figma 教學整理，無論你是初學者還是設計師，這份指南都能幫助你快速上手並發揮創作力。
🧭 Figma 基礎入門
1. ✅ Figma 是什麼？
Figma 是一款在瀏覽器上運行的設計工具，可用於：
- UI/UX 設計
- Wireframe（線框圖）
- 原型互動設計
- 多人實時協作
👉 不需要安裝，可直接用 Google 帳號註冊登入使用
👉 也提供桌面版（Windows / Mac）
2. 🖥️ 介面介紹
| 區域 | 功能 |
|---|---|
| 左側面板 | Layers 圖層與 Assets 資產管理 |
| 中央畫布 | 編輯與設計區域 |
| 上方工具列 | 框選、文字、形狀、插入圖片、Prototype 等工具 |
| 右側屬性欄 | 選取物件後可設定位置、大小、色彩、效果等 |
✏️ 常見操作與技巧
1. 🔳 建立框架（Frame）
- 快捷鍵：
F - 用來建立手機、網頁等版面（Frame 就像「畫板」）
你可以從右側選單快速選擇常見的裝置尺寸（如 iPhone 14、MacBook Pro 等）
2. 🧱 加入元件
- 形狀工具：矩形 (
R)、線條 (L)、圓形 (O) - 文字工具：
T可插入標題或段落 - 圖片：
⇧+Ctrl/Cmd+K插入圖像
3. 🪄 對齊與間距
- 拖曳時會出現 對齊輔助線
- 使用
Shift可以精準調整尺寸 - 選取多個元素後右鍵 → Distribute 讓間距均勻
🧩 元件（Component）與樣式
1. 🧱 元件（Components）
- 可重複使用的設計區塊（如按鈕、導覽列）
- 建立方式：選取物件 → 右鍵 → Create Component (
Ctrl/Cmd + Alt + K) - 修改主元件，所有實例同步更新
2. 🎨 樣式（Styles）
- 包含文字、色彩、陰影、網格等設定
- 可統一管理整個專案的視覺風格
🔄 原型（Prototype）製作
1. 建立互動連結
- 切換到 Prototype 模式（右上角）
- 拖曳藍色節點 → 指定互動目標（如跳轉頁面）
- 可設定動畫（如 Slide in、Fade、Instant）
2. 預覽原型
- 點選右上角 ▶ 按鈕進行預覽
- 可以分享 URL 給他人互動測試（不需註冊帳號）
📁 匯出資產
- 選取元素 → 右側設為「Export」
- 支援格式：PNG、JPG、SVG、PDF
- 可選擇 @1x, @2x, @3x（用於不同解析度設備）
👥 多人協作功能
- 多人可同時編輯、留言、標記位置
- 可設定權限（可編輯 / 僅檢視）
- 留言功能適合團隊溝通與審核設計
🎯 進階技能推薦（若你已熟悉基礎）
- 使用 Auto Layout 排版自動化
- 製作 Design System（設計系統）
- 整合 FigJam（腦力激盪工具）
- 插件（Plugins）如：Iconify、Unsplash、Content Reel 等
廣告