Design System 101
設計系統實作課
從零開始認識與建立設計系統 (Design system) 需具備的觀念與技能，透過 Figma、Notion、ZeroHeight 一步步實作與迭代，將成果導入產品開發流程，成功提升團隊開發效率與品質。
What's inside
課程由以下 4 章節組成，每個章節內都有 Figma 課程單元講義、練習、與獨家套件資源。我們會在 Figma 裡面學習如何一步步建立、深入 Design system 的各個面向。
1. 設計系統核心
在第一章，我們會先認識什麼是 Design system，以及設計系統帶給公司的價值與成果。在了解一個設計系統需要涵蓋的內容與實際工作後，會幫助你更清楚如何開始踏出第一步。
💡
Introduction to Design system
了解設計系所要解決的問題，與介紹建立後的成果與價值。
🌈
Color, Text, and effects
從最小的系統基礎出發，建立顏色、字級與其他 Design token 設定。
2. 實作元件庫
在第二章，我們會大量練習實作可重複使用、具有彈性的元件庫，在這段練習中，我們會提及事半功倍實作技巧、迭代與更新時要注意的細節。
📐
Auto layout and Grid system
導入格線系統與物件佈局方式，建立規格嚴謹的元件。
💅
Components and variants
活用 Figma Variants ，靈活管理負責風格的元件庫。
3. 工程交付
在第三章，我們要學習如何標註、交付設計稿，並有效傳達規格與注意事項給工程師。同時建立起工程思維，幫助你進一步提升溝通能力，成為工程團隊最愛的設計師。
⚛️
Annotation done right
運用不同的標註技巧，讓設計交付內容能清楚、有效。
🤝
Handoff to Handshake
導入工程思維、與工程師成功建立雙向的溝通管道。
4. 工作流程
在第四章，我們要使用 Notion 與 ZeroHeight 兩個文件化工具，從不同面向持續建構設計系統的工作流程。另外，我們也會學習如何將設計系統中的 Design token 匯出，幫助未來在其他專案、工具中使用！
🔍
Audit the system
快速診斷既有的設計系統，運用工具自動抓出錯誤加以修正。
🪄
Export and Iteration
匯出迭代的設計系統成果，持續優化未來製作系統的流程。
認識講師
你好我是 Lichin 👋 從 2016 年開始使用 Figma 至今 5 年，一直熱衷於研究提升設計師與工程師之間的溝通與合作。希望這門課程，能幫助一樣在設計系統旅途上的你走得更遠、看得更多。
Lichin Lin - Design Engineer@PicCollage
最實惠的價格，是對早期支持者的重視 ✨
在未來，每次課程更新都會伴隨價格調整。希望早期支持課程的你，能用最實惠的價格參與這門 Design system 實作課！
課程內含
Figma 教材與範例練習檔案
獨家自動化套件與說明
與 Lichin 1 on 1 討論問題
建立課程學生聯繫、認識彼此
常見問題 Q&A
看完介紹可能會有以下問題，瀏覽過這些問題後若有需要，歡迎透過信箱聯繫，讓我們提供你更加了解這門課程的資訊:
