設計系統實作指南 | Design System Handbook

Build design system, today. 從零開始建立設計系統 (Design system)! 透過實作一步步學習 Figma 的功能與技巧，將成果實際導入產品開發流程，成功提升團隊開發效率與品質。

📍 What's inside?

課程由 5 章節組成，每個章節內都有 Figma 課程單元講義、練習、搭配部分影片操作、與更多閱讀資源，總計約需要 6 - 8 小時的閱讀時間。我們會在 Figma 裡面學習如何一步步建立、深入 Design system 的各個面向:

章節一: Style System 樣式系統

• 🌈 Color system: 學習顏色設定和不同的色彩表示方式，並用有效率的技巧加速建立色階

• 🔡 Font system: 學習基本的字級系統，以及不同縮放大小可以運用的公式
  

章節二: Layout 排版與佈局

• 📐 Auto layout and Grid system: 導入格線系統與物件排版方式，建立規格嚴謹的元件

• 📱 Responsive and Breakpoint: 學習不同使用者螢幕尺寸下的介面與元件響應式變化
  

章節三: Components 實作元件庫

• ⚛️ Atomic design: 認識原子設計的觀念，任何元件與介面的建立都源自於這個核心思維

• 🧱 Components and variants: 活用 Figma Variants ，靈活管理負責風格的元件庫
  

章節四: Handoff 工程交付

• 📍 Annotation done right: 運用不同的 Figma 標註技巧，讓設計交付內容清楚、有效

• 📝 Documentation: 根據需求導入生產力工具，從不同面向進行設計系統的文件化

章節五: Workflow 工作流程

• 🔍 系統診斷 Design Audit: 梳理設計系統的架構與健康度，清楚系統迭代的先後順序

• 🏎️ 迭代 Iteration: 掌握實作技巧加速設計系統迭代過程，安心更新系統沒煩惱
  

📍 購買後我會獲得?

1. Figma 學習講義 (90% 的內容皆為文字與圖片)

2. 影片操作 (每部觀念或操作影片長度 1~3 分鐘，總量佔全部指南約 10% 的內容)

3. 認識來自世界各地的設計師，與他們在指南內交流、討論議題

持續更新課程內容

📍 誰適合上這門課程?

這本指南適合已經接觸 Figma 超過半年時間、有基礎概念的人，或是對於 Design system 實作與知識有興趣的同學。若產品團隊正在建構一套系統系統，那相信這本指南中的知識再適合你不過了!

📍 購買流程:

1. 購買指南課程，並在你的信箱中找到購買記錄信件

2. 打開信件中的課程申請表單

3. 填入課程認證碼 (License Key) 與 Figma 帳號 (信箱) 申請加入指南。(注意: 購買指南時填寫的信箱 與 要加入指南的 Figma 信箱 可以不同)

4. 送出表單後約需要等待 6-12 小時的作業時間

5. 確認你的信箱 (Figma 帳號信箱) 收到加入 Figma team 的邀請確認信

6. 加入課程，開始在 Figma 上查看指南全部的內容

🪴 等待的同時，請觀看指南導覽學習怎麼操作這份指南資源:

(https://www.loom.com/share/debce467502d49c29600a2fdd4600512)

📍 這門課程有試看版本嗎?

有的，目前在 Youtube 上面有大約 9 小時的公開分享版本， 這些大約涵蓋 40% 的付費內容，你可以在看完這些教材後再決定需不需要購買。

📍 請問提供發票明細收據、統編嗎?

目前購買指南尚無法提供收據以及統編，但在購買信件中可以申請 Invoice (付款通知)

📍 Any questions?

歡迎來信至 [email protected]