Figma 和 FigJam 是絕配的 UX/UI 設計工作流程組合。簡單來說：
- Figma 是做介面設計（UI/UX Design）
- FigJam 是做腦力激盪、流程圖、用戶旅程、團隊協作等（白板工具）
Figma 與 FigJam 都在同一個平台上運作，可以互相整合、協作無縫切換，是目前最強的產品設計組合之一 💡
🎯 為什麼要整合 FigJam？
使用 FigJam 可以讓你：
- 在設計前 快速規劃流程與資訊架構（IA）
- 與 PM/工程師 共同腦力激盪（brainstorm）
- 建立 用戶旅程地圖 / persona / wireframe 草圖
- 拖曳 Figma 畫面，做設計決策與註解
🛠️ FigJam 與 Figma 整合應用實例
✅ 1. 建立 UX 流程草圖（Flowchart）
操作步驟：
- 在 FigJam 建立新文件（可選範本）
- 使用基本工具：Sticky notes、箭頭、框框快速畫出流程
- 使用
Connector工具連結各流程節點 - 用圖示與 emoji 增加辨識度與易讀性
👉 適用：用戶登入流程、App 主頁結構規劃
✅ 2. 討論 & 腦力激盪
FigJam 支援：
- 無限畫布、多人即時編輯
- 表情符號回饋（👍、💡、🔥）
- 定時器與投票功能
- 插件與小工具（如：投票板、Decision Tree）
👉 用在：Sprint 計劃、設計評審、功能優先級討論
✅ 3. 匯入 Figma 設計畫面到 FigJam
這是整合的關鍵功能！
操作方式：
- 開啟 FigJam → 點選左側工具列的「Figma」
- 可以直接嵌入 Figma 畫面 Frame 或 Prototype
- 嵌入方式：
- 從 Figma 複製 Frame（Cmd/Ctrl + C）
- 到 FigJam 貼上（Cmd/Ctrl + V）
- 或使用右鍵選單：「Copy as Link」→ FigJam 中貼上
- 嵌入方式：
👉 使用場景：
- 在流程圖中插入設計畫面討論
- 邀請非設計角色（如 PM、客戶）參與決策
- 記錄反饋（直接加 sticky note）
✅ 4. 將 FigJam 元件帶回 Figma（反向整合）
例如：你在 FigJam 畫的流程框架、元件草圖也能作為設計參考匯入 Figma。
方法：
- 在 FigJam 選取元件 → 右鍵
Copy as PNG - 到 Figma 畫面貼上作為設計草圖參考
- 或下載為 SVG 作為向量圖再編輯
✨ 整合小技巧與建議
| 功能 | 建議用法 |
|---|---|
| FigJam comment | 標註設計問題，讓 PM/工程師回應 |
| Section 標籤 | 用來劃分功能區塊，讓腦力激盪不混亂 |
| Templates | 使用 FigJam 的官方模板（例如：User Journey、Empathy Map）快速啟動討論 |
| @mention | 在 FigJam 留言中標記團隊成員快速同步 |
| Prototyping Link | 將 Figma Prototype 拖入 FigJam，做互動簡報 |
🚀 工作流程範例（完整整合）
- 在 FigJam 腦力激盪
- 做用戶旅程圖、流程規劃
- 討論畫面流程與元件需求
- 切換到 Figma 設計畫面
- 開始製作 UI 畫面 + 建立組件
- 回到 FigJam 簡報討論
- 匯入設計 → 客戶或 PM 加入意見
- 用投票工具決定設計方向
- 反覆迭代，持續優化
- 所有討論紀錄與流程都保留在同一專案內
🎁 FigJam 範本推薦（開啟時搜尋關鍵字）
| 名稱 | 用途 |
|---|---|
| ✨ “App Flow Diagram” | 建立 App 畫面流程圖 |
| 💡 “Brainstorming” | 腦力激盪與想法蒐集 |
| 👤 “User Persona” | 使用者角色建立 |
| 🎯 “Feature Prioritization Matrix” | 功能優先順序決策 |
| 🗺️ “User Journey Map” | 規劃用戶旅程 |
📚 推薦資源
- Figma 官方教學：FigJam 入門
- FigJam 教學影片（中文）
- 插件推薦：
- FigJam AI（自動生成流程建議）
- Diagramming Kit（加強圖示、流程圖工具）
- Simple Wireframe Kit（快速畫框架圖）