Figma
簡介
Figma 是協作式介面設計與原型工具；在本 vault 中先作為 使用者介面設計、設計系統、Prototype、微互動 與設計資源生態的工具錨點。相較 Adobe-Illustrator 偏向向量、視覺與平面 / 印刷設計脈絡，Figma 在 socialMORE UI/UX 教材裡被放在 UI 設計主流工具與 prototype / community / plugin 工作流中。
重要事實
- 工具位置：2026-05-07-SocialMORE-UIUX設計入門-Part01 依 2021 uxtools survey 說明，Figma 在 UI 設計工具使用上已追過 Sketch，並與 Sketch、Adobe XD 並列主流 UI 設計工具。
- 教學主題：2026-05-07-SocialMORE-UIUX設計入門-Part02 以 Figma 為主軸，包含 frosted glass effect、圖片 / 文字填充、Smart Animate 滑動效果、icon 質感製作與七個小技巧。
- Prototype 工具：Smart Animate 透過同名元素 / 群組連結兩個 frame，讓設計師展示拖動、滑動與轉場等 微互動。
- Community 生態：Figma Community 可分享設計檔、教學、模板、icon、gradient 與其他資源，形成設計師尋寶與複用素材的入口。
- Plugin 生態：Part 2 依功能列出 icon、content、table、backup、find/replace、waves、blobs、pattern、3D mockup、Unsplash、Blush、palette、Measure 等插件，顯示 Figma 不只是畫圖工具，也是可擴充工作台。
- Handoff 對位：Zeplin / Figma Measure 這類資源把尺寸、間距、元件與設計系統資訊轉給開發者，是設計到工程協作的一環。
- 圖示系統基礎設施：2026-08-17-Cursor圖示系統 補入 Figma 在 圖示系統 中的進階用法：Explorations 保存每個概念的多輪探索，Overviews 稽核 recurring elements / optical shapes / cuts / dots / filled styles 等一致性，Icons 則保存最終 component。Figma 在這裡不是單純繪圖工具，而是圖示設計、稽核、元件管理與團隊採納的工作台。
相關概念
- 使用者介面設計 — Figma 是 UI 設計工具鏈中的主力工具之一。
- 設計系統 — component、style guide、community 檔案、measure / handoff 工具都接到設計系統維護。
- 圖示系統 — Figma 可承接圖示探索、總覽稽核、元件化、實機檢查與交付管理。
- Prototype — Smart Animate 與 Prototype mode 讓設計稿變成可點擊、可分享的互動原型。
- 微互動 — Figma 可用來示範滑動、轉場與狀態回饋。
- 介面狀態設計 — Figma 設計稿應涵蓋 empty / loading / error / tooltip 等狀態，而不是只畫完成態。
- Adobe-Illustrator — 兩者同屬設計工具，但場景不同；Illustrator 偏向向量圖與平面設計，Figma 偏向 UI / 協作 / prototype。
- socialMORE — 目前 Figma 在 vault 的主來源是 socialMORE UI/UX 入門下冊。
相關來源
- 2026-08-17-Cursor圖示系統 — Cursor icon system 製作記；補入 Figma 三檔案工作流與實際尺寸稽核。
- 2026-05-07-SocialMORE-UIUX設計入門-Part02 — Figma 精選教學與資源分享；本頁主來源。
- 2026-05-07-SocialMORE-UIUX設計入門-Part01 — UI 工具脈絡中提及 Figma / Sketch / Adobe XD。
備註
- 本頁目前只記錄 vault 已 ingest 的 Figma 脈絡，不整理公司史、最新產品功能或市場狀態。Part 1 的工具排名是 2021 survey 的歷史素材。