CHAPTER 14 - PM HERO

Design System Basics

Design system bukan style guide. Single source of truth untuk komponen UI, pattern, dan principle. Skala produk dengan konsisten.

TIME: 26MLEVEL: intermediate30 CHAPTERS

1. Apa Itu Design System

Library komponen UI yang reusable plus dokumentasi pattern dan principle. Famous: Material Design Google, Human Interface Guidelines Apple, Carbon IBM, Polaris Shopify. Kunci untuk konsistensi dan velocity.

2. Komponen Design System

Tokens (warna, typography, spacing, shadows). Components (button, input, card, modal, dst). Patterns (form, navigation, search). Guidelines (writing tone, accessibility). Resources (icons, illustrations, templates).

3. Atomic Design

Brad Frost methodology. Atoms (button, label) → Molecules (search bar) → Organisms (header) → Templates → Pages. Cara berpikir bottom-up. Helps build system yang modular dan reusable.

4. Tools dan Implementation

Figma untuk design (component, variant, auto-layout). Storybook untuk dev (live component library). Token Studio atau Style Dictionary untuk design token. CSS-in-JS atau CSS variables untuk implementation. Modern stack 2026.

5. Governance Model

Design system tim dedicated atau distributed model. Contribution guidelines. Versioning. Communication rhythm dengan product team. Feedback loop dari designer dan developer. Long-term commitment.

YOUR MISSION

  1. Audit design system di produk yang dipakai
  2. Pelajari Material Design Google
  3. Eksplor Storybook component library
  4. Buat 1 komponen design token
  5. Pelajari Brad Frost Atomic Design

POWER-UP RECAP