設計系統實作指南 | Design System Handbook

NT$3,600
NT$3,600
Designtips.today
5 ratings

Build design system, today.

✨ 在 官網上查看 更完整的資訊
📍 先了解 6小時試看版本

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



What's inside?

課程由 4 章節組成,每個章節內都有 Figma 課程單元講義、練習、搭配部分影片操作、與更多閱讀資源,總計約需要 6 - 8 小時的閱讀時間。我們會在 Figma 裡面學習如何一步步建立、深入 Design system 的各個面向:

章節一: Style System 樣式系統

  • 🌈 Color system學習顏色設定和不同的色彩表示方式,並用有效率的技巧加速建立色階
  • 🔡 Font system學習基本的字級系統,以及不同縮放大小可以運用的公式

章節二: Layout 排版與佈局

  • 📐 Auto layout and Grid system導入格線系統與物件排版方式,建立規格嚴謹的元件
  • 📱 Responsive and Breakpoint學習不同使用者螢幕尺寸下的介面與元件響應式變化

章節三: Components 實作元件庫

  • ⚛️ Atomic design認識原子設計的觀念,任何元件與介面的建立都源自於這個核心思維
  • 🧱 Components and variants活用 Figma Variants ,靈活管理負責風格的元件庫

章節四: Handoff 工程交付

  • 📍 Annotation done right運用不同的 Figma 標註技巧,讓設計交付內容清楚、有效
  • 📝 Documentation根據需求導入生產力工具,從不同面向進行設計系統的文件化

誰適合上這門課程?

這本指南適合已經接觸 Figma 超過半年時間、有基礎概念的人,或是對於 Design system 實作與知識有興趣的同學。若產品團隊正在建構一套系統系統,那相信這本指南中的知識再適合你不過了!


購買流程

1. 將購買後獲得之認證碼填入表單,讓我能將您的 Figma 帳號加入指南中。

2. 送出表單後約需要等待 6-12 小時的作業時間

3. 收到邀請進入 Figma team 的確認信並按下確認,您在 Figma 上就能查看指南全部的內容了!

4. 等待的同時,請觀看指南導覽學習怎麼操作這份指南資源:
( https://www.loom.com/share/debce467502d49c29600a2fdd4600512 )


購買後我會獲得?

  1. Figma 學習講義 (90% 的內容皆為文字與圖片)
  2. 影片操作 (每部觀念或操作影片長度 1~3 分鐘,總量佔全部指南約 10% 的內容)
  3. 認識來自世界各地的設計師,與他們在指南內交流、討論議題
  4. 每個月指南的持續更新


這門課程有試看版本嗎?

有的,目前在 Youtube 上面有大約 6 小時的公開分享版本, 這些大約涵蓋 30% 的付費內容,你可以在看完這些教材後再決定需不需要購買。


請問提供發票明細收據、統編嗎?

目前購買指南尚無法提供收據以及統編,但在購買信件中可以申請 Invoice (付款通知)


Any questions?

歡迎來信至 designtipstoday@gmail.com

5 ratings
  • 📚 指南內包含:

  • 章節
    4
  • 影片教學
    4
  • Tips
    100+
  • 📚 指南內包含:
  • 章節4
  • 影片教學4
  • Tips100+

Ratings

5.0
(5 ratings)
5 stars
100%
4 stars
0%
3 stars
0%
2 stars
0%
1 star
0%
Powered by

Checkout

設計系統實作指南 | Design System Handbook

Enter your info to complete your purchase

Card

or pay with
You'll be charged US$3,600.