Design System Handbook
設計系統實作指南
從零開始認識與建立設計系統 (Design system) 需具備的觀念與技能，透過 Figma、Notion、ZeroHeight 一步步實作與迭代，將成果導入產品開發流程，成功提升團隊開發效率與品質。
What's inside
課程由以下 4 章節組成，每個章節內都有 Figma 課程單元講義、練習、與更多閱讀資源。我們會在 Figma 裡面學習如何一步步建立、深入 Design system 的各個面向。
1. Style System 樣式系統
在第一章，我們從最小的基礎出發，一步步有系統地建立顏色、字級系統，並透過快捷鍵、Figma plugin 加速這個建構流程，另外，我們也會介紹這當中需要考量到的條件、不同平台之間的限制。
🌈
Color system
學習顏色設定和不同的色彩表示方式，並用有效率的技巧加速建立色階
🔡
Font system
學習基本的字級系統，以及不同縮放大小可以運用的公式
2. Layout 排版與佈局
在第二章，我們要探討如何用 Figma 提供的 Auto layout 正確建立有邏輯的物件排版與佈局，幫助設計出來的介面更容易被工程團隊理解，在產品上能根據不同的裝置呈現最棒的樣貌!
📐
Auto layout and Grid system
導入格線系統與物件排版方式，建立規格嚴謹的元件
📱
Resposive and Breakpoint
學習不同使用者螢幕尺寸下的介面與元件響應式變化
3. Components 實作元件庫
在第三章，我們會深入 Figma component & variants 實作中常見的錯誤與細節，並分享我們如何正確設定它們，讓未來在迭代與更新可以事半功倍。
⚛️
Atomic design
認識原子設計的觀念，任何元件與介面的建立都源自於這個核心思維
🧱
Components and variants
活用 Figma Variants ，靈活管理負責風格的元件庫。
4. Handoff 工程交付
在第四章，我們要學習如何標註、交付設計稿，並有效傳達規格與注意事項給工程師。同時了解如何透過更多不同類型的生產力工具進行文件化，幫助你進一步提升溝通能力，成為工程團隊最愛的設計師。
📍
Annotation done right
運用不同的 Figma 標註技巧，讓設計交付內容清楚、有效
📝
Documentation
根據需求導入生產力工具，從不同面向進行設計系統的文件化
認識講師
你好我是 Lichin 👋 從 2016 年開始使用 Figma 至今 5 年，一直熱衷於研究提升設計師與工程師之間的溝通與合作。希望這門課程，能幫助一樣在設計系統旅途上的你走得更遠、看得更多。
Lichin Lin - Design Engineer@PicCollage
最實惠的價格，是對早期支持者的重視 ✨
在未來，每次課程更新都會伴隨價格調整。希望早期支持課程的你，能用最實惠的價格參與這門 Design system 實作課！
課程內含
Figma 教材與範例練習檔案
獨家自動化套件與說明
與 Lichin 1 on 1 討論問題
建立課程學生聯繫、認識彼此
常見問題 Q&A
看完介紹可能會有以下問題，瀏覽過這些問題後若有需要，歡迎透過信箱聯繫，讓我們提供你更加了解這門課程的資訊:
