單元 0-0：學習平台與作業繳交說明書

單元 0-1：Discord 課後交流說明書

單元 0-2：課外學習資源

單元 1-0：章節介紹

02:17

單元 1-1：什麼是 Design System ?

08:01

單元 1-2：設計系統實務設計

06:50

單元 1-3：分享經驗

07:17

單元 2-0：章節介紹

01:43

單元 2-1：什麼是 Design Token？

06:16

單元 2-2：如何規範 Design Token 的命名

13:34

單元 2-3：開始設計你的 Design Token

05:30

作業 1 說明：Design Token 繼承、規劃與命名

01:00

單元 2-4：使用 Figma Variables 來實行 Design Token 的規劃

11:11

單元 2-5：Variable Modes 在界面設計中的應用

17:01

作業 2 說明：Figma Variable 實作練習

00:48

單元 3-0：章節介紹

01:08

單元 3-1：設計原則與設計元素

02:48

單元 3-2：如何做色彩規劃？

07:27

單元 3-3：色彩階層與 Token 規劃

12:48

作業 3 說明：規劃一組基本的色彩系統， 並說明系統中的顏色功能

01:05

單元 3-4：從數字的收斂來做文字, 間距, 陰影等規劃

16:12

作業 4 說明：從設計元素中整理並規劃數字，寫下數字所對應到的 Token

01:04

單元 4-0：章節介紹

01:07

單元 4-1：前端程式的基本概念

12:38

單元 4-2：設計到開發的轉換過程

14:03

單元 4-3：整合 HTML + CSS 建立簡單的 WEB 按鈕元件

16:17

作業 5 說明：透過 CSS Variables 實作一個按鈕元件

00:55

單元 5-0：章節介紹

01:08

單元 5-1：設計系統中的網格系統

10:37

單元 5-2：從小型元件組成中型組件與界面

09:49

單元 5-3：建立自己的 Design System 元件庫

09:02

作業 6 說明：規劃並設計一套基礎的設計系統

01:45

單元 6-0：章節介紹

01:12

單元 6-1：什麼是 Storybook?

06:32

單元 6-2：開始使用 Storybook

12:33

單元 6-3：活用 Storybook 設計元件庫

10:28

單元 7-0：章節介紹

01:04

單元 7-1：AI 時代的產品設計與開發工具

04:38

單元 7-2：透過 AI 加速設計系統的規劃

10:59

2026 更新：使用 ai 建立設計系統的文件和規範

13:20

2026 更新：Design Token 基礎介紹

12:01

單元 8-0：章節介紹

00:57

單元 8-1：設計系統與元件庫在產品團隊中的協作

10:41

單元 8-2：如何推動設計系統到公司內部?

08:54

單元 9-0：課程總結與補充說明

00:56

單元 9-1：課程結語與結論

05:51

單元 9-2：留下課程心得與評價

單元 9-3：作業補繳區