--- title: "給設計師的設計系統必修課" seo_title: "這是一門為 UI/UX 設計師、產品設計師打造的設計系統實戰課程，教你運用 Figma、Design Tokens、元件化設計與 Storybook，建立可維護的 Design System，提升產品設計一致性與設計開發協作效率。" seo_description: "Design System、設計系統、Design Tokens、Figma Variables、Storybook、UIUX 設計、產品設計、UI 設計、元件化設計、模組化 UI、設計系統課程、設計系統實戰、Figma 設計系統、設計開發協作、設計師工程師協作、AI 設計系統" slug: ds url: https://academy.aapd.com.tw/courses/ds type: paid tags: ["Variable", "元件解構", "產品設計", "Storybook", "Design Token", "Design System", "設計系統"] --- # 給設計師的設計系統必修課 > 掌握模組化 UI 設計，讓工程開發協作不卡關！ ## Description 在這門約 5 小時的課程中，經驗豐富的 Harry 老師將帶領你循序漸進地掌握模組化 UI 設計，透過 5 個設計實作練習來即時應用所學，最終做出一套基礎的設計系統。 設計系統的核心在於一套定義好的元件和設計原則，這些元件和原則就像樂高積木一樣，設計師和開發人員可以使用這些「積木」來快速搭建和擴展產品功能，同時確保產品在視覺、功能和行為上的一致性。而工程師也可以按照說明書（設計系統文件）來進行組裝，用各種元件來搭建成完整的產品。 🧙🏻 Harry 老師開發的 Design Token 小遊戲上線啦！🎮 歡迎大家來看看自己對 Design System 的了解有多少 🎮 🔗 點選前往闖關 https://noeinoi.com/game/ds/ 如果你在產品開發時想要達到……✅ 保持產品設計的一致性，提高產品的品質和使用者體驗✅ 加速開發團隊理解產品端與設計端的需求，降低溝通成本✅ 有效掌握產品設計和開發的進度，更順利推進產品開發時程 👉🏻 免費兌換直播分享會回放歡迎在購買課程前透過分享會了解設計系統課程的內容與價值，別錯過難得能與 Harry 老師交流的機會，體驗他在設計系統領域的專業與課程設計的巧思。點擊前往兌換！ 最新上架優惠合購 68 折只到 2025/9/14 (日) 23:30 Figma 入門到設計系統全攻略組合包：從零開始學會 Figma 與掌握設計系統方法，全面提升設計效率與一致性，讓你的設計與專案品質即刻升級。🔸 購買方式將 快速上手 Figma 核心功能與 UI 設計 加入購物車再將 給設計師的設計系統必修課 加入購物車結帳時系統自動享有 68 折合購優惠 🔸 每個單元的影音內容的時間約落在 5-15 分鐘左右 x 總共 40 單元以內🔸 每個作業與專案的出題皆包含影片詳細說明以及相關範例引導🔸 每個小作業都有真人助教批改和針對個人程度給予建議🔸 建議學習頻率：1.5 - 2 個月內學習完畢，每週投入約 2-3 小時的時間 ( 包含額外筆記整理、重點回顧和實作練習的時間，確切所需的時數會因學習者的背景和內容熟悉度而異 ) 本課程不需要特定的課前知識或經驗但若有以下相關學習或工作經驗將有助於你的學習效率✅ 已初步了解 UI 設計工具使用✅ 熟悉 Figma 基礎操作技能✅ 大致了解 HTML/CSS 等基礎前端概念✅ 曾有和產品團隊合作經驗✅ 曾經歷與工程師痛苦的開發合作過程 Discord 學習社群兩大課程專屬服務在學習過程中，若遇到無法即時發問的課堂疑惑、實作時的突發問題、希望深入探討的主題或是想尋求更多學習資源時，不必擔心。AAPD 已為你準備好專業的回饋與交流服務，解決你線上課程中的學習困擾。課程和作業問答頻道：上課過程中，遇到任何「課程內容問題」、「作業問題」，可以及時向助教非同步詢問Harry 老師補給區：非同步與 Harry 老師交流（提問方向從課程內容到實務應用都可以）和吸收最新資訊（ 老師將分享課堂延伸學習資源、業界最新趨勢或分享實用工具）👋🏻 期待能在課程中與你相見，一起踏上設計系統的學習之旅！ ## Learning Objectives - 設計系統核心概念：建立設計系統的核心概念，理解設計原則 - 工程溝通協作：使用工程師語言做文件，往事半功倍的協作出發 - 實作開發練習：實作設計系統開發設定，並實際了解業界實務流程 - 業界實務案例分析：看不同團隊類型，如何讓設計系統落地實施 ## Course Info - Lectures: 49 - Video: 5.2h - Students: 254 ## Rating 5.0 / 5 (4 ratings) ## Instructors ### Harry Chuang *資深產品設計師* 20+ 年 UIUX × 前端開發實戰經驗，曾於 TutorMing 學習平台、Shopmatic 電商平台任職。 2017 年開始前往新加坡海外工作，協助產品團隊研究以及開發設計系統及元件庫平台，為公司大幅減少產品團隊之間的溝通問題與開發人力成本。目前為台灣最大串流影音資訊評價平台 awwrated 的創辦人於 2019 年設計開發 awwrated 影劇避雷平台，幫助使用者更快找到好評影劇，目前是台灣最大的串流影音資訊平台。 開辦《設計師的設計系統必修課》、《新手也懂的設計系統 AI 工作流直播工作坊》，廣受學員好評！ ## Curriculum ### 章節 0：學習平台與社群問答介紹 (0m) - 單元 0-0：學習平台與作業繳交說明書 (0m) - 單元 0-1：Discord 課後交流說明書 (0m) - 單元 0-2：課外學習資源 (0m) ### 章節 1：設計系統基礎理論與實務挑戰 (24m) - 單元 1-0：章節介紹 (2m) - 單元 1-1：什麼是 Design System ? (8m) - 單元 1-2：設計系統實務設計 (6m) - 單元 1-3：分享經驗 (7m) [Preview] ### 章節 2：Design Token 的定義、設計與運用 (57m) - 單元 2-0：章節介紹 (1m) - 單元 2-1：什麼是 Design Token？ (6m) - 單元 2-2：如何規範 Design Token 的命名 (13m) - 單元 2-3：開始設計你的 Design Token (5m) - 作業 1 說明：Design Token 繼承、規劃與命名 (1m) - 單元 2-4：使用 Figma Variables 來實行 Design Token 的規劃 (11m) - 單元 2-5：Variable Modes 在界面設計中的應用 (17m) - 作業 2 說明：Figma Variable 實作練習 (0m) ### 章節 3：掌握設計系統中的設計元素 (42m) - 單元 3-0：章節介紹 (1m) - 單元 3-1：設計原則與設計元素 (2m) - 單元 3-2：如何做色彩規劃？ (7m) - 單元 3-3：色彩階層與 Token 規劃 (12m) - 作業 3 說明：規劃一組基本的色彩系統， 並說明系統中的顏色功能 (1m) - 單元 3-4：從數字的收斂來做文字, 間距, 陰影等規劃 (16m) - 作業 4 說明：從設計元素中整理並規劃數字，寫下數字所對應到的 Token (1m) ### 章節 4：理解工程邏輯提升協作溝通效率 (45m) - 單元 4-0：章節介紹 (1m) - 單元 4-1：前端程式的基本概念 (12m) - 單元 4-2：設計到開發的轉換過程 (14m) [Preview] - 單元 4-3：整合 HTML + CSS 建立簡單的 WEB 按鈕元件 (16m) - 作業 5 說明：透過 CSS Variables 實作一個按鈕元件 (0m) ### 章節 5：實務案例分析與動手實作 (32m) - 單元 5-0：章節介紹 (1m) - 單元 5-1：設計系統中的網格系統 (10m) - 單元 5-2：從小型元件組成中型組件與界面 (9m) - 單元 5-3：建立自己的 Design System 元件庫 (9m) - 作業 6 說明：規劃並設計一套基礎的設計系統 (1m) ### 章節 6：設計系統元件庫整合平台（Storybook）實例介紹與運用 (30m) - 單元 6-0：章節介紹 (1m) - 單元 6-1：什麼是 Storybook? (6m) - 單元 6-2：開始使用 Storybook (12m) [Preview] - 單元 6-3：活用 Storybook 設計元件庫 (10m) ### 章節 7：AI 技術在設計系統中的整合與應用 (55m) - 單元 7-0：章節介紹 (1m) - 單元 7-1：AI 時代的產品設計與開發工具 (4m) - 單元 7-2：透過 AI 加速設計系統的規劃 (10m) - 單元 7-3：整合 AI 來規劃與開發設計系統元件與功能 (13m) - 2026 更新：使用 ai 建立設計系統的文件和規範 (13m) - 2026 更新：Design Token 基礎介紹 (12m) ### 章節 8：團隊協作與設計系統推動策略 (20m) - 單元 8-0：章節介紹 (0m) - 單元 8-1：設計系統與元件庫在產品團隊中的協作 (10m) - 單元 8-2：如何推動設計系統到公司內部? (8m) ### 章節 9：課程總結與補充說明 (6m) - 單元 9-0：課程總結與補充說明 (0m) - 單元 9-1：課程結語與結論 (5m) - 單元 9-2：留下課程心得與評價 (0m) - 單元 9-3：作業補繳區 (0m) ## Pricing ### 原價方案 - NT$6,400 從 Design System 核心概念出發，帶你透過 Figma、Design Token、元件化設計與 Storybook，建立一套可維護的設計系統。 ✔ 掌握模組化 UI 設計方法 ✔ 學習 Design Token 與元件架構 ✔ 提升設計與工程團隊協作效率 ✔ 透過 5 個實作練習，實際建立基礎設計系統 🔸 備註：若將「快速上手 Figma 核心功能與 UI 設計」一同加入購物車合購二門課程，整筆訂單可享 8 折優惠 ## FAQ ### 🔸 報名與帳號相關問題 **為什麼在註冊完成後，沒有收到認證信件？** 建議可先至註冊的 Email 收件夾中查詢一封由系統自動發送的「驗證電子信箱通知信」，如果沒有看到信件的話，可以到「垃圾郵件」或「促銷類別」做進一步確認喔！ **忘記帳號密碼怎麼辦？** 請到 Teachify 學院，點擊右上方「登入」按鈕，到學院登入頁面，進入登入頁面之後，網頁拉至最下方，點擊「忘記密碼？」連結，輸入你原本註冊的 Email，完成後送出，系統將自動寄出「密碼重設驗證信」到你的 Email 帳戶，按信中提示操作即可。 ### 🔸 課程付款相關 **課程有提供哪些支付方式呢？** 目前支援的付款方式有信用卡（包括國外信用卡）、ATM 轉帳、超商付款，點擊購買後可在頁面中選擇付款方式。 **我想開立統編發票，該怎麼申請呢？** 目前僅支援電子發票，不支援手開發票喔！請在付款頁面下方選擇「統編發票」，並輸入公司抬頭與統一編號，購買成功後系統將自動寄出含有統編的電子發票至你填寫的信箱。 **發票開統編且有報帳的需求，在報名課程並付款之後，大約多久會收到發票或收據呢？又或是會以電子發票的形式寄送？** 發票的存取方式可以參考以下二個，更多解說內容： • 買受人（學員）學員購買課程後，會收到 ezPay 自動寄送的電子發票開立通知信件，點擊信件下方 【發票明細】 超連結，可看到發票詳細明細資料 • 買受人（學員）也可直接去 ezPay 電子發票官網 — 「幫助中心 → 查詢專區 → 電子發票查詢」，輸入電子發票通知信中的發票號碼、發票日期、隨機碼及圖型驗證碼，點選「開始查詢」。 **如何確定付款成功呢？** 付款成功後系統會寄出一封主旨是「AAPD 給設計師的設計系統必修課｜課程購買成功」的 Email，也可以到註冊會員或付款時填寫的信箱裡查找。 如果沒有收到 Email，可能是被歸類到促銷信匣或廣告信匣，用信件主旨搜尋看看應該就可以順利找到囉！ **如果付款失敗該怎麼辦呢？** 如果在填寫完信用卡資訊後顯示付款失敗或頁面跳轉失敗，請回到學院首頁並點擊頁面右上角「會員資料」中的「付款資料」頁面，這個頁面中會顯示已成功付款、等待付款、已失效的訂單。 如果訂單顯示「已成功付款」，表示購買成功；若顯示「已失效」，代表信用卡沒有成功刷過，直接重新購買即可。若訂單顯示「等待付款」，請寫信至客服信箱 aapdgo@gmail.com 並於主旨標明「 給設計師的設計系統必修課｜付款相關問題」將由夥伴協助你。 ### 🔸 退費相關問題 **繳費／報名成功後，可以退費嗎？** 可以的，但是請在申請退款前閱讀以下相關資訊：• 購買 7 日內，且未觀看正式付費單元內容（除試看單元）→ 可退還 100% 全額課程費用 • 購買 8-14 日內，且未觀看正式付費單元內容（除試看單元）→ 可退還 30% 課程費用 • 購買超過 15 日（含） → 恕不進行退費🚨 請留意觀看過正式付費單元（不含試看單元）：恕不退費 **繳費／報名成功後，如何申請退費？** 退費請附上訂單截圖、平台帳號 Email、簡述退款原由、退款帳號，並於主旨標明「 給設計師的設計系統必修課｜退費相關事宜」來信至 aapdgo@gmail.com 將由團隊夥伴審核後受理退費。 ### 🔸 上課相關問題 **報名上課前，需要準備什麼呢？上課前我需要安裝 Figma 軟體嗎？Mac 或 Windows 都可以上課嗎？** 你只需要一台可以上網並且可以打開瀏覽器的電腦（如在意使用體驗，建議 下載 Figma 桌面版 App），且不限作業系統。課程中講師會使用 MacOS 作業系統教學，而使用 Windows 的學員也不用擔心，僅有些快捷鍵不一樣，但操作上都大同小異。基本上大部份的功能 Figma 免費版本都可以完成，只有一小小部份和 Figma Modes 設定相關的無法達成，但基本上無法達成的只占了 1%。 **購買成功後，要如何觀看課程呢？** 購買課程、付款成功之後，你的上課權限就直接開通囉！ 在 AAPD 產品設計學院的官網右上角點選「我的購買」可以看到「我的課程」，進去後就可以看到你所購買的課程囉！ **這堂課購買後有觀看期限的限制嗎？** 課程中的所有學習資源都沒有觀看期限的限制，包含：課程影片、教材內容、提問權限、作業交付予批改等 ### 🔸 折扣碼使用方式 **如何使用折扣碼？** 點擊購買後即可進入付款頁面，在付款頁面中可找到「優惠代碼」欄位，將你收到的優惠代碼（折扣碼）填入欄位或直接貼上，點擊「套用」，折扣就會生效囉！ 在購買前請確認是否持有非公開的課前問卷折扣碼和校友折扣碼，建議以下述二個折扣碼的使用為優先。確認自己是否有以上折扣碼的方式： 1. 曾在給設計師的設計系統必修課開課前填寫問卷的學員，請在信箱中搜尋「課前問卷折扣碼」，該折扣碼相關訊息已於 2024/8/31 13:00 寄出（也請一併檢查「促銷信件」和「垃圾信件」中是否有收到） 2.若為 AAPD 校友身份的學員，請到 Discord 的ＯＯＯ公告中，查看折扣碼資訊 **我是 AAPD 校友，該如何領取折扣碼？** 前往 AAPD 產品設計學院 Discord 群組，至「📣｜學院廣播室」尋找公告消息 ### 🔸 課服相關資訊 **如果上述都沒有找到你想問的問題⋯⋯** 請於週一至週五 13:00-20:00 寫信至客服信箱 aapdgo@gmail.com ，並於主旨標明「 給設計師的設計系統必修課｜ＯＯ問題」將由夥伴協助你！ :: 客服上班時間 平日 13:00-20:00 假日和國定假日公休