Belajar Frontend - Design Systems & Component Libraries

#Pendahuluan

Seiring aplikasi tumbuh, muncul masalah klasik: halaman punya 3 variasi tombol, warna "oranye" yang beda tipis di mana-mana, dan desainer serta developer "berbicara bahasa berbeda". Episode 25 menyelesaikannya dengan design system — sistem yang menyatukan keputusan desain, komponen, dan proses menjadi satu sumber kebenaran.

Episode ini merangkai banyak hal yang sudah kalian pelajari: custom properties & tokens (episode 4, 10), komponen (episode 8), konsistensi UX (episode 15), dan kolaborasi tim (episode 7). Design system adalah titik di mana semua itu menjadi produk yang terkelola.

#Apa Itu Design System

Design system punya tiga lapisan:

Perbedaan pentingnya:

• Design system = tokens + komponen + guidelines + proses (mencakup desain).
• Component library = bagian code dari design system (Button, Input, dst.).
• Style guide = dokumentasi visual (sering bagian dari keduanya).

#Design Tokens: Satu Sumber Kebenaran

Kita mulai dengan tokens di episode 4 dan 10. Di design system, mereka dinormalisasi dengan nama yang berbasis peran, bukan nilai mentah:

tokens.css

:root {
  /* Warna: semantik, bukan "oranye" */
  --color-primary: #b45309;
  --color-primary-contrast: #ffffff;
  --color-danger: #dc2626;
  --color-success: #16a34a;
 
  /* Skala: konsisten di seluruh UI */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
 
  /* Tipografi & radius */
  --font-family-ui: "Inter", system-ui, sans-serif;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.1);
}

Prinsipnya: produk memakai --color-primary, bukan #b45309. Saat rebrand, kalian cukup mengubah satu nilai — bukan mencari-cari di 200 file.

#Komponen dan Storybook

Storybook adalah workshop pengembangan komponen: setiap komponen didokumentasikan, bisa dilihat dalam semua state (default, hover, error, loading), diuji visual, dan di-test aksesibilitasnya.

bunx storybook@latest init

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";
 
const meta = {
  title: "UI/Button",
  component: Button,
  args: { children: "Tambah ke keranjang" },
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Primary: Story = {
  args: { variant: "primary" },
};
 
export const Disabled: Story = {
  args: { disabled: true },
};
 
export const Loading: Story = {
  args: { loading: true },
};

#Workflow Desainer-Developer

Kolaborasi desain-kode yang sehat punya pola jelas:

Praktik yang membuat alur ini berjalan:

1. Satu bahasa — desainer dan developer memakai nama yang sama (color/primary, space/4). Token Figma dan token CSS harus 1:1.
2. Komponen didesain dulu, lalu diimplementasi — kalau ada perubahan, kedua sisi berubah bersama.
3. Kontribusi dua arah — developer boleh mengusulkan komponen baru ke design system; jangan ada "kode yang tidak tercatat".
4. Dokumentasi berdekatan dengan kode — tulis story + dokumentasi tepat di file komponen.

#Praktik: Design System TokoKita

Langkah membangun dari nol (jangan langsung besar):

1. Inventaris — kumpulkan semua tombol/input/kartu yang sudah ada, temukan duplikasi.
2. Token — normalisasi warna & spacing ke peran semantik.
3. 3 komponen inti — Button, Input, Badge dengan story lengkap + variant.
4. Adopsi bertahap — ganti penggunaan lama satu halaman per satu.
5. Governance — siapa yang boleh menambah komponen? Review seperti PR (episode 7).

src/ui/
├── tokens.css          # sumber kebenaran nilai desain
├── Button.tsx
├── Button.stories.tsx
├── Button.test.tsx     # jest-axe + behavior (episode 13/15)
├── Input.tsx
├── Input.stories.tsx
└── Badge.tsx

#Common Pitfalls

#Penutup

Inti yang harus dibawa pulang:

• Design system = tokens + komponen + guidelines + proses; component library adalah bagian kodenya.
• Token berbasis peran (--color-primary) menjadi satu sumber kebenaran yang mudah diubah.
• Storybook mendokumentasikan semua state komponen dan menjadi jembatan desain-kode.
• Bangun bertahap dari kebutuhan nyata, dengan governance dan aksesibilitas sejak awal.

Di episode 26 selanjutnya kita melihat gambaran besar: ekosistem & tren modern 2026 — React Compiler, RSC, TypeScript wajib, AI-native workflows, edge & WASM, dan micro-frontends yang matang. Sampai jumpa di episode 26!