AAPD - As A Product Designer
  • 職涯教練陪跑計畫
  • AAPD 官網
  • 2026 課程行事曆
  • 最新消息
  • 聯繫客服
登入
客服信箱:aapdgo@gmail.com

Made with 🧡 by AAPD賽門體驗設計有限公司.統一編號: 89767081
使用者條款.隱私權政策
Developer and agent API documentationSite content index for AI agents (llms.txt)API documentation (OpenAPI)API authentication guide

給設計師的設計系統必修課

掌握模組化 UI 設計,讓工程開發協作不卡關!

# Variable
# 元件解構
# 產品設計
# Storybook
# Design Token
# Design System
# 設計系統
Harry Chuang

Harry Chuang

5.0
4 則評論
課程介紹課程要點課程內容關於講師常見問題課前問答最新評價
5.0
4 則評論
共有 255 位學員參與此課程

本課程包含以下內容:

課程長度約 5.2 小時
49 個課程單元
原價方案
從 Design System 核心概念出發,帶你透過 Figma、Design Token、元件化設計與 Storybook,建立一套可維護的設計系統。 ✔ 掌握模組化 UI 設計方法 ✔ 學習 Design Token 與元件架構 ✔ 提升設計與工程團隊協作效率 ✔ 透過 5 個實作練習,實際建立基礎設計系統 🔸 備註:若將「快速上手 Figma 核心功能與 UI 設計」一同加入購物車合購二門課程,整筆訂單可享 8 折優惠

課程介紹

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

設計系統的核心在於一套定義好的元件和設計原則,這些元件和原則就像樂高積木一樣,設計師和開發人員可以使用這些「積木」來快速搭建和擴展產品功能,同時確保產品在視覺、功能和行為上的一致性。而工程師也可以按照說明書(設計系統文件)來進行組裝,用各種元件來搭建成完整的產品。

產品元件拆解

🧙🏻 Harry 老師開發的 Design Token 小遊戲上線啦!
🎮 歡迎大家來看看自己對 Design System 的了解有多少 🎮 
🔗 點選前往闖關 https://noeinoi.com/game/ds/

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

✅ 保持產品設計的一致性,提高產品的品質和使用者體驗
✅ 加速開發團隊理解產品端與設計端的需求,降低溝通成本
✅ 有效掌握產品設計和開發的進度,更順利推進產品開發時程

閱讀設計元件和查詢程式碼

設計系統適合的學習者

👉🏻 免費兌換直播分享會回放

歡迎在購買課程前透過分享會了解設計系統課程的內容與價值,別錯過難得能與 Harry 老師交流的機會,體驗他在設計系統領域的專業與課程設計的巧思。點擊前往兌換!

最新上架優惠合購 68 折只到 2025/9/14 (日) 23:30
Figma 入門到設計系統全攻略組合包:從零開始學會 Figma 與掌握設計系統方法,全面提升設計效率與一致性,讓你的設計與專案品質即刻升級。

🔸 購買方式

  1. 將 快速上手 Figma 核心功能與 UI 設計 加入購物車

  2. 再將 給設計師的設計系統必修課 加入購物車

  3. 結帳時系統自動享有 68 折合購優惠

設計系統講師 Harry Chuang

🔸 每個單元的影音內容的時間約落在 5-15 分鐘左右 x 總共 40 單元以內
🔸 每個作業與專案的出題皆包含影片詳細說明以及相關範例引導
🔸 每個小作業都有真人助教批改和針對個人程度給予建議
🔸 建議學習頻率:1.5 - 2 個月內學習完畢,每週投入約 2-3 小時的時間 ( 包含額外筆記整理、重點回顧和實作練習的時間,確切所需的時數會因學習者的背景和內容熟悉度而異 )

設計系統實作成果

本課程不需要特定的課前知識或經驗

但若有以下相關學習或工作經驗將有助於你的學習效率

✅ 已初步了解 UI 設計工具使用
✅ 熟悉 Figma 基礎操作技能
✅ 大致了解 HTML/CSS 等基礎前端概念
✅ 曾有和產品團隊合作經驗
✅ 曾經歷與工程師痛苦的開發合作過程

設計系統課程章節介紹

設計系統基礎概念

Design Token 設計與應用

產品設計原則

業界設計系統案例

Storybook 元件庫整合

AI 技術應用在設計系統中

設計系統的推動策略

課程總結與學習資源

Discord 學習社群兩大課程專屬服務

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

  • 課程和作業問答頻道:上課過程中,遇到任何「課程內容問題」、「作業問題」,可以及時向助教非同步詢問

  • Harry 老師補給區:非同步與 Harry 老師交流(提問方向從課程內容到實務應用都可以)和吸收最新資訊(老師將分享課堂延伸學習資源、業界最新趨勢或分享實用工具)

👋🏻 期待能在課程中與你相見,一起踏上設計系統的學習之旅!

課程要點

設計系統核心概念:建立設計系統的核心概念,理解設計原則

工程溝通協作:使用工程師語言做文件,往事半功倍的協作出發

實作開發練習:實作設計系統開發設定,並實際了解業界實務流程

業界實務案例分析:看不同團隊類型,如何讓設計系統落地實施

課程內容

共 49 個單元•總時數約 5.2 小時

  • 單元 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

關於講師

Harry Chuang

Harry Chuang

資深產品設計師

20+ 年 UIUX × 前端開發實戰經驗,曾於 TutorMing 學習平台、Shopmatic 電商平台任職。

2017 年開始前往新加坡海外工作,協助產品團隊研究以及開發設計系統及元件庫平台,為公司大幅減少產品團隊之間的溝通問題與開發人力成本。目前為台灣最大串流影音資訊評價平台 awwrated 的創辦人於 2019 年設計開發 awwrated 影劇避雷平台,幫助使用者更快找到好評影劇,目前是台灣最大的串流影音資訊平台。

開辦《設計師的設計系統必修課》、《新手也懂的設計系統 AI 工作流直播工作坊》,廣受學員好評!

瞭解更多

常見問題

🔸 報名與帳號相關問題

建議可先至註冊的 Email 收件夾中查詢一封由系統自動發送的「驗證電子信箱通知信」,如果沒有看到信件的話,可以到「垃圾郵件」或「促銷類別」做進一步確認喔!

請到 Teachify 學院,點擊右上方「登入」按鈕,到學院登入頁面,進入登入頁面之後,網頁拉至最下方,點擊「忘記密碼?」連結,輸入你原本註冊的 Email,完成後送出,系統將自動寄出「密碼重設驗證信」到你的 Email 帳戶,按信中提示操作即可。

🔸 課程付款相關

目前支援的付款方式有信用卡(包括國外信用卡)、ATM 轉帳、超商付款,點擊購買後可在頁面中選擇付款方式。

目前僅支援電子發票,不支援手開發票喔!請在付款頁面下方選擇「統編發票」,並輸入公司抬頭與統一編號,購買成功後系統將自動寄出含有統編的電子發票至你填寫的信箱。

發票的存取方式可以參考以下二個,更多解說內容:
• 買受人(學員)學員購買課程後,會收到 ezPay 自動寄送的電子發票開立通知信件,點擊信件下方 【發票明細】 超連結,可看到發票詳細明細資料 
• 買受人(學員)也可直接去 ezPay 電子發票官網 — 「幫助中心 → 查詢專區 → 電子發票查詢」,輸入電子發票通知信中的發票號碼、發票日期、隨機碼及圖型驗證碼,點選「開始查詢」。

付款成功後系統會寄出一封主旨是「AAPD 給設計師的設計系統必修課|課程購買成功」的 Email,也可以到註冊會員或付款時填寫的信箱裡查找。 如果沒有收到 Email,可能是被歸類到促銷信匣或廣告信匣,用信件主旨搜尋看看應該就可以順利找到囉!

如果在填寫完信用卡資訊後顯示付款失敗或頁面跳轉失敗,請回到學院首頁並點擊頁面右上角「會員資料」中的「付款資料」頁面,這個頁面中會顯示已成功付款、等待付款、已失效的訂單。 

如果訂單顯示「已成功付款」,表示購買成功;若顯示「已失效」,代表信用卡沒有成功刷過,直接重新購買即可。若訂單顯示「等待付款」,請寫信至客服信箱 aapdgo@gmail.com 並於主旨標明「給設計師的設計系統必修課|付款相關問題」將由夥伴協助你。

🔸 退費相關問題

可以的,但是請在申請退款前閱讀以下相關資訊:
• 購買 7 日內,且未觀看正式付費單元內容(除試看單元)→ 可退還 100% 全額課程費用 
• 購買 8-14 日內,且未觀看正式付費單元內容(除試看單元)→ 可退還 30% 課程費用 
• 購買超過 15 日(含) → 恕不進行退費

🚨 請留意觀看過正式付費單元(不含試看單元):恕不退費

退費請附上訂單截圖、平台帳號 Email、簡述退款原由、退款帳號,並於主旨標明「 給設計師的設計系統必修課|退費相關事宜」來信至 aapdgo@gmail.com 將由團隊夥伴審核後受理退費。

🔸 上課相關問題

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

購買課程、付款成功之後,你的上課權限就直接開通囉! 在 AAPD 產品設計學院的官網右上角點選「我的購買」可以看到「我的課程」,進去後就可以看到你所購買的課程囉!

課程中的所有學習資源都沒有觀看期限的限制,包含:課程影片、教材內容、提問權限、作業交付予批改等

🔸 折扣碼使用方式

  • 點擊購買後即可進入付款頁面,在付款頁面中可找到「優惠代碼」欄位,將你收到的優惠代碼(折扣碼)填入欄位或直接貼上,點擊「套用」,折扣就會生效囉!
  • 在購買前請確認是否持有非公開的課前問卷折扣碼和校友折扣碼,建議以下述二個折扣碼的使用為優先。確認自己是否有以上折扣碼的方式: 1. 曾在給設計師的設計系統必修課開課前填寫問卷的學員,請在信箱中搜尋「課前問卷折扣碼」,該折扣碼相關訊息已於 2024/8/31 13:00 寄出(也請一併檢查「促銷信件」和「垃圾信件」中是否有收到) 2.若為 AAPD 校友身份的學員,請到 Discord 的OOO公告中,查看折扣碼資訊

前往 AAPD 產品設計學院 Discord 群組,至「📣|學院廣播室」尋找公告消息

🔸 課服相關資訊

請於週一至週五 13:00-20:00 寫信至客服信箱 aapdgo@gmail.com ,並於主旨標明「 給設計師的設計系統必修課|OO問題」將由夥伴協助你! 
:: 客服上班時間 平日 13:00-20:00 假日和國定假日公休

最新評價

5.0

4 則評論

廖子

廖子翔

2025/11/04

林佩

林佩瑤

2025/09/30

老師教得很用心,可以了解到底如何從設計到開發的,token的部分也講解的很詳細。 後面對於如何運共ai或者如何推進公司有深度講解,獲益良多~~
黃志

黃志豪

2025/09/06

課程可以感受到 Harry 的用心,雖然設計系統沒有一定答案,但老師整理出很多規則與範例,能在練習作業時重複觀看並吸收;也能更貼近工程端在溝通上的距離! 作業要練習才能知道是否有融會貫通,Discord上也會詳細的回覆同學問題,很棒!!
小麥

小麥

2025/02/07

課程內容紮實,雖然對新手會有些難度,但在 Discord 發問老師會給予詳細答覆,回應時間通常在一天之內不會等太久,我覺得這是非常用心的地方!作業也會批改及提供指導,經過幾份作業的練習,有慢慢掌握到 Token 的實際用處,對統一設計和修改真的很方便。 課程後面有講到運用 Storyboard 和 AI 幫助設計,希望未來如果再有課程可以教得深入些~
共有 255 位學員參與此課程

本課程包含以下內容:

課程長度約 5.2 小時
49 個課程單元
原價方案
從 Design System 核心概念出發,帶你透過 Figma、Design Token、元件化設計與 Storybook,建立一套可維護的設計系統。 ✔ 掌握模組化 UI 設計方法 ✔ 學習 Design Token 與元件架構 ✔ 提升設計與工程團隊協作效率 ✔ 透過 5 個實作練習,實際建立基礎設計系統 🔸 備註:若將「快速上手 Figma 核心功能與 UI 設計」一同加入購物車合購二門課程,整筆訂單可享 8 折優惠