Design System 101
設計系統實作課

從零開始認識與建立設計系統 (Design system) 需具備的觀念與技能,透過 Figma、Notion、ZeroHeight 一步步實作與迭代,將成果導入產品開發流程,成功提升團隊開發效率與品質。

課程上線時通知我試看內容 (6小時)

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

看完介紹可能會有以下問題,瀏覽過這些問題後若有需要,歡迎透過信箱聯繫,讓我們提供你更加了解這門課程的資訊:

Build design system, today.

這門設計系統概論幫助你將設計系統做得更好、更完整、更好維護與迭代,並提升產品開發的效率與品質。

課程上線時通知我