給設計師的設計系統必修課：掌握模組化 UI 設計，工程開發協作不卡關！

0 seconds of 1 minute, 22 secondsVolume 0%

00:00

01:22

AAPD

給設計師的設計系統必修課：掌握模組化 UI 設計，工程開發協作不卡關！

建立設計系統思維，學會與工程高效協作，透過實作與業界案例，掌握設計系統從規劃、建置到落地的完整實戰流程。

Hahow AI 學習升級

2.3 k 的人也在觀看

關於課程

課程包含

包含 10 章 41 單元、6 項作業

課程時長

5 時 14 分鐘

課程總人數

17 位同學

觀看限制

不限觀看次數，還會附贈完課證書

學習升級

Hahow AI 學習助教

無需額外付費

即時問答、重點整理、測驗理解，讓知識派上用場

課程內容

當產品規模越來越大，身為設計師的你是否也開始遇到：

設計稿與開發不一致？
元件越做越多，卻越來越難管理？
設計與工程反覆來回確認，開發效率低落？
每次新功能上線，都得重新整理設計規範？

在這門約 5 小時的課程中，經驗豐富的 Harry 老師將帶領你循序漸進地掌握模組化 UI 設計，透過 5 個設計實作練習來即時應用所學，最終做出一套基礎的設計系統。

設計系統的核心在於一套定義好的元件和設計原則，這些元件和原則就像樂高積木一樣，設計師和開發人員可以使用這些「積木」來快速搭建和擴展產品功能，同時確保產品在視覺、功能和行為上的一致性。

而工程師也可以按照說明書（設計系統文件）來進行組裝，用各種元件來搭建成完整的產品。

「打造設計系統是『拆解產品結構』的過程」：以卡片元件為例，拆解容器、圖片、標籤、文字內容與 Icon 開關按鈕，並說明字型、顏色、陰影、圓角和間距等基礎樣式如何組成元件。

如果你在產品開發時想要達到……

✅ 保持產品設計的一致性，提高產品的品質和使用者體驗

✅ 加速開發團隊理解產品端與設計端的需求，降低溝通成本

✅ 有效掌握產品設計和開發的進度，更順利推進產品開發時程

「你需要的是『跨團隊的設計系統』」：設計師可閱讀設計文件與元件，工程師可查詢元件程式碼；以 Token Naming、Token Prefix、Type、Role、Component 建立一致的命名與協作規範。設計系統課程適合無設計背景的轉職者或新鮮人、產品設計師、UI／UX 設計師、產品經理、前端工程師，以及創業者或小型團隊，涵蓋系統化設計、團隊協作與產品一致性。

課程核心特色

課程學習安排包含 9 章節影音內容、5 次作業小試身手，以及 1 個小專案產出，結合影音學習、實作練習與專案成果。

🔸 每個單元的影音內容的時間約落在 5-15 分鐘左右 x 總共 40 單元以內

🔸 每個作業與專案的出題皆包含影片詳細說明以及相關範例引導

🔸 每個小作業都有真人助教批改和針對個人程度給予建議

🔸 建議學習頻率：1.5 - 2 個月內學習完畢，每週投入約 2-3 小時的時間 ( 包含額外筆記整理、重點回顧和實作練習的時間，確切所需的時數會因學習者的背景和內容熟悉度而異 )

課程以「3 大階段、9 個章節」循序掌握模組化 UI 設計，涵蓋設計系統與 Design Token、工程邏輯與元件庫整合、AI 技術輔助及團隊協作。最終實際產出一套基礎的設計系統，整合 Color、Typography、Card、圖示按鈕與多種元件變體，展示完整的介面規範與元件設計。

課程章節及單元規劃

🔹 帶你從設計系統的核心概念出發，建立完整的設計思維與設計原則，並學習如何以工程師熟悉的方式建立文件與溝通協作，降低設計與開發之間的落差。

🔹 透過設計系統的實作與開發練習，了解業界實際的建置流程與導入方法。

🔹 最後結合不同團隊的實務案例分析，掌握設計系統在不同產品與組織中的落地策略，提升跨團隊協作效率與產品開發品質。

Step 01「建立基礎知識」聚焦設計系統基礎理論與實務挑戰，以原子、分子、有機體、模版到頁面的五層架構，說明介面元件由小至大的組成關係。

Step 02「認識 Design Token」介紹其定義、設計與運用，說明從 Purple 50 到元件樣式的規劃思考，並示範以 Figma Variables 建立 abc、ref、color-primary-50 的 Token 命名層級。

設計原則與規範示範：整理介面中的 Spacing、Alpha、Font Size 與 Corner 數值，運用 Size Token 減少重複定義，並以 Figma Variables 套用文字、數字與顏色變數。

Step 04「理解工程邏輯」：透過 HTML 與 Figma、CSS 與 Figma、JavaScript 與 Figma 的對照，理解 Canvas、Style／Properties 與 Prototype／Interaction，提升交付溝通效率。

Step 05「案例分析與實作」：透過實際案例與動手操作，運用網格系統和組裝思維簡化與工程師的溝通，並解構產品介面的設計原則、設計元素、元件、模組與介面。

Step 06「元件庫整合實例」介紹 Storybook 與靜態設計文件的差異：調整設定即可即時產生程式碼，並展示從 Storybook 元件開發、測試與文件，到設計系統元件庫，再整合至產品專案的流程。

Step 07「AI 技術應用」聚焦 AI 技術在設計系統中的整合與應用，使用 Claude AI 實作色彩系統產生器，建立色彩系統、規劃頁面與規格、建立 Color Picker、說明使用功能，並進行內容修正。

Step 08「策略推動與協作」說明團隊協作與設計系統推動策略：設計系統與 UI 元件庫協作，支援產品開發流程，依序經過需求、審查、確認、開發、QA／測試、文件撰寫與發布。

Step 09「總結複習」回顧課程總結與補充說明，整理設計系統導入重點：保持彈性、簡單好理解、持續維護與成長，以及加速進入市場和試錯，並提供延伸資源。

關於講師經歷與作品

Harry Chunag 擁有超過 15 年 UI/UX 設計與前端程式開發經驗，曾於 TutorMing、Shopmatic 任職，並受委託擔任 KKDay 設計顧問，主導首款 App 設計。

Hahow 提問回覆與作業設計

在學習過程中，若遇到無法即時發問的課堂疑惑、實作時的突發問題、希望深入探討的主題或是想尋求更多學習資源時，不必擔心。AAPD 已為你準備好專業的回饋與交流服務，解決你線上課程中的學習困擾。

加入 AAPD 學院 Discord 學習社群：購買課程後，在單元 0-0 Discord 課後交流說明書將有完整加入 Discord 社群的說明。上課過程中，遇到任何「課程內容問題」、「作業問題」，可以及時在社群中向助教們同步詢問。
課程作業規劃：目前這門課程主要規劃 5 個作業，希望透過實際演練來加深課程內容印象，並且真正去思考與走過設計系統建立的流程。
回答問題的頻率：課前問答會盡量在 3-7 天內回覆，開課後則每週盡量回覆至少 5 個同學問題。但會鼓勵同學也可以在開設的 Discord 頻道詢問問題，也許會有其他同學有相關問題或答案。
批改作業的頻率：盡量每週批改 3-5 份作業，並按照作業繳交的順序進行批改。因為產品設計的範圍較廣，根據設計的產品不同可能需要多費點時間去思考跟理解才能提供相應的回覆，還請大家理解。

課前準備

只需要一台可以上網並且可以打開瀏覽器的電腦（如在意使用體驗，建議 下載 Figma 桌面版 App），且不限作業系統。課程中講師會使用 MacOS 作業系統教學，而使用 Windows 的學員也不用擔心，僅有些快捷鍵不一樣，但操作上都大同小異。基本上大部份的功能 Figma 免費版本都可以完成，只有一小小部份和 Figma Modes 設定相關的無法達成，但基本上無法達成的只占了 1%。同學也可以先觀看試看影片評估是否適合自己哦！

哪些人適合這堂課？

🔸 想建立設計系統能力的 UI／產品設計師：已經會使用 Figma，但希望建立更系統化的元件、Variable、Design Token 與設計規範。 🔸 常與工程師協作的設計師：希望理解工程端思維，降低設計交付與開發溝通成本，讓設計更容易落地。 🔸 正在建立或維護 Design System 的團隊：無論是從 0 到 1 建立，或是接手既有設計系統，都能學習完整的規劃方法與實務流程。 🔸 想提升產品一致性與設計效率的人：透過元件化、模組化與設計原則，建立可持續維護的產品設計流程。 🔸 希望了解業界實務做法的設計師：透過實際案例、Storybook、Design Token 與 AI 工作流程，了解設計系統如何真正落地。

你可以學到

1️⃣ 建立完整的 Design System 核心觀念與設計思維 2️⃣ 理解 Design Token、Variable 與設計元素規劃方式 3️⃣ 學會拆解產品元件並建立可重複使用的 Component 4️⃣ 建立色彩、字體、間距等設計規範 5️⃣ 理解 HTML、CSS 與前端開發邏輯，提升跨職能溝通效率 6️⃣ 了解 Storybook 與設計交付流程 7️⃣ 學習 AI 如何協助建立與維護設計系統 8️⃣ 透過 5 個實作練習完成一套基礎 Design System 9️⃣ 掌握企業推動 Design System 的導入策略與實務案例

上課前的準備

需要準備的工具 / 軟體（若購買課程前不清楚版本是否支援，請先留言與老師確認。）

課程不需要具備特定的 Design System 經驗，只要準備好學習即可。建議準備： - 已安裝並能操作 Figma - 可跟著課程同步練習實作 - 每週預留約 2–3 小時練習與複習時間 - 願意實際建立自己的設計系統，而非只觀看影片

需要具備的背景知識

本課程屬於入門至初階，不要求相關工作經驗，但若具備以下背景，學習會更加順利： ✅ 已初步了解 UI 設計工具 ✅ 熟悉 Figma 基本操作 ✅ 對 HTML／CSS 有基本概念 ✅ 曾與產品團隊合作 ✅ 曾遇過設計與工程協作的挑戰即使沒有 Design System 經驗，也能依照課程循序漸進建立完整觀念

單元一覽

10 章 41 單元｜總時長 314 分鐘

全部展開

學習平台與社群問答介紹

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