設計系統
一句話定義
設計系統是把產品介面中的視覺規則、元件、狀態、模式與文件整理成可重用、可維護、可被團隊共同採納的系統；它讓介面看起來像同一個產品，也讓設計與開發能在同一套規格上協作。
核心要點
設計系統不是 UI kit，而是共同語言
UI kit 只是一組元件圖層；設計系統還需要回答：
- 元件什麼時候用、什麼時候不用？
- 狀態、錯誤、空白與載入如何處理？
- 字型、色彩、間距、icon、動效如何形成一致節奏？
- 設計稿如何轉成開發可理解的規格？
- 團隊如何讓規則被採納，而不是只被交付？
因此設計系統同時是視覺規格、介面模式、文件與協作機制。
Atomic Design：從最小元素往頁面建立
2026-05-07-SocialMORE-UIUX設計入門-Part01 以 Brad Frost 的 Atomic Design 作為設計系統基礎：
| 層級 | 說明 | UI 例子 |
|---|---|---|
| Atoms 原子 | 最小不可再拆的介面元素 | 標籤、輸入框、按鈕、顏色、字型、圖標 |
| Molecules 分子 | 由數個原子組成的簡單 UI 組件 | 搜尋框、表單欄位、下拉菜單 |
| Organisms 組織 | 較複雜的組合區塊 | 導航欄、產品資訊區、入口模組、瀑布流 |
| Templates 模板 | 以頁面結構為基礎的版型 | 原型圖、列表頁、詳情頁佈局 |
| Pages 頁面 | 模板填入真實內容後的結果 | 實際可測試的頁面 |
這套分層的重點是：設計從細小元素開始，逐步建立到實際頁面，讓產品一致、可擴充，也能在真實內容進入後驗證系統是否站得住。
真實內容會測試設計系統
模板看起來完整，不代表設計系統已經可用。當真實圖片、圖標、文字、長短不一的內容、錯誤狀態、空白狀態進入後，才會看見：
- 元件是否容納不同內容長度？
- 間距與層級是否仍清楚？
- 空白 / 無結果 / 載入是否有規則？
- 動效與回饋是否一致？
- 開發能否把設計轉成穩定元件？
因此 design system 不應只展示理想狀態，也應定義 edge cases。
圖示系統：最小元素也需要治理
2026-08-17-Cursor圖示系統 把 icon 從 Atomic Design 的「atom」推進到一個完整子系統：圖示不是 asset pack，而是產品語彙、視覺一致性、工程相容、文件與發布 pipeline 的組合。
Cursor 的案例顯示，當產品概念開始變得專屬，例如 AI agents、threads、thinking effort、compute、Bugbot 等，通用 icon library 會逐漸不夠用。此時 圖示系統 要同時治理：
- 語意層：哪些產品概念需要專屬圖示？同一概念是否永遠用同一圖示？
- 視覺層：尺寸、stroke、filled / outline、optical shapes、gap、notch、dot 等細節是否一致？
- 工程層：icon font / SVG / codepoint / component name 是否能安全遷移，不破壞既有 reference？
- 採納層：團隊是否有 companion site、search tags、concept-to-icon table、文件與發布流程可以持續新增？
這讓設計系統的邊界從「設計師整理元件」延伸到「團隊能長期穩定使用同一套視覺語彙」。
工具層：Figma 是設計系統的操作環境之一
2026-05-07-SocialMORE-UIUX設計入門-Part02 展示的 Figma 生態，提供了設計系統日常會用到的工具：
- Community 檔案：範例元件、教學、icon、gradient 與模板。
- 插件：Content Reel、Iconify、Material Design Icon、Color Palettes、Image Palette、Figma Measure 等。
- Prototype：Smart Animate 與互動設定可展示元件狀態變化。
- Handoff：Zeplin / Measure 類工具把尺寸、間距與元件資訊轉給開發者。
工具不等於系統，但工具會影響系統能不能被維護與採納。
採納比交付重要
設計系統若只是設計師整理好的檔案，沒有被產品、工程、QA、行銷或後續維護者理解，就會退化成靜態素材庫。與 建構為被採納 的原則相同，設計系統文件應該為未來讀者寫：
- 命名要可搜尋。
- 元件使用規則要比單一截圖更重要。
- 決策理由要被保存。
- 例外情境要有處理方式。
- 與程式碼元件或交付流程要能對應。
與其他概念的關係
- 使用者介面設計 — 設計系統是 UI 決策規模化的方式；把單一頁面的規則抽到跨頁、跨功能、跨團隊。
- 圖示系統 — 設計系統中的圖示語彙子系統；把 icon 的語意、視覺、工程映射、文件與發布流程一起治理。
- Figma — 常見的 UI 設計與協作工具；本 vault 目前以 socialMORE Figma 教學作為設計系統工具層入口。
- 介面狀態設計 — 設計系統應定義 empty / loading / error / tooltip 等狀態，不只定義理想完成態。
- 微互動 — 元件不只要有靜態樣式，也要有觸發、規則、回饋與循環模式。
- 排版 / 易讀性 — 字級階梯、行高、間距、層級與節奏應被系統化，而非每頁即興調整。
- 無障礙設計 — 對比度、觸控區、alt text、keyboard focus 與多通道提示應是設計系統底層規則。
- 設計專案文件 — 設計系統文件是設計專案文件的一種高規模形式；它保存「怎麼做」與「為什麼這樣做」。
- 程式碼風格指南 — 兩者共享「像同一個人做的」品質目標：一個治理介面，一個治理程式碼。
相關來源
- 2026-08-17-Cursor圖示系統 — 補入 Cursor icon system 作為設計系統子系統案例：產品語彙、兩尺寸兩樣式、Figma 稽核、codepoint migration、companion site 與發布 pipeline。
- 2026-05-07-SocialMORE-UIUX設計入門-Part01 — 以 Atomic Design 介紹設計系統分層。
- 2026-05-07-SocialMORE-UIUX設計入門-Part02 — 以 Figma Community、plugins、style guide、Zeplin / Measure 等資源展示工具層。
備註
- 本頁先以 socialMORE 入門來源建立骨架；未來可由 Apple HIG、Google Material Design、Design Tokens、Atomic Design 原文、Storybook 或大型產品 design system 文件補深。