Design System Handbook
設計系統實作指南

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

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

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

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

Build design system, today.

這門設計系統實作指南 - 幫助你將設計系統做得更好、更易於維護與迭代,並提升產品開發的效率與品質。

課程上線時通知我