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 討論問題
建立課程學生聯繫、認識彼此
$3600
購買課程常見問題 Q&A
看完介紹可能會有以下問題,瀏覽過這些問題後若有需要,歡迎透過信箱聯繫,讓我們提供你更加了解這門課程的資訊:
