Frontend Academy · Pelajaran

Menggunakan Sistem Desain

Instal pustaka di aplikasi host, terapkan penyedia tema, hapus komponen yang tidak digunakan melalui tree-shaking, dan ikuti pembaruan versi.

Menggunakan Sistem Desain adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Pemasangan dan Penyiapan

Tambahkan sistem desain sebagai dependensi. Beberapa pustaka memerlukan penyiapan tambahan: penyedia, impor CSS, dan pemuatan font.

npm install @yourorg/design-system

// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';

<DesignSystemProvider theme="light">
  <App />
</DesignSystemProvider>

Penyedia Tema

Sebagian besar sistem desain menyediakan penyedia tingkat teratas untuk tema (terang/gelap), lokal, dan konteks bersama. Bungkus aplikasi Anda sekali.

<DesignSystemProvider
  theme={isDarkMode ? darkTheme : lightTheme}
  locale="en"
>
  <App />
</DesignSystemProvider>

Mengimpor Komponen

Impor hanya yang Anda perlukan — jika digabungkan dengan penghapusan kode tak terpakai, hanya komponen yang digunakan yang akan dikirimkan.

import { Button, Card, TextField } from '@yourorg/design-system';

function LoginForm() {
  return (
    <Card>
      <TextField label="Email" type="email" />
      <TextField label="Password" type="password" />
      <Button variant="primary">Sign In</Button>
    </Card>
  );
}

Impor Subjalur

Beberapa pustaka mendukung impor subjalur agar lebih jelas dan menghemat bundel.

// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card   from '@yourorg/design-system/Card';

// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';

Kiat Penghapusan Kode Tak Terpakai

Penghapusan kode tak terpakai menghapus ekspor yang tidak digunakan selama pembundelan. Syaratnya: build ESM, sideEffects: false dalam package.json pustaka, dan impor bernama dalam kode Anda. Verifikasi dengan penganalisis bundel.

Menyesuaikan dengan Tema

Timpa token tema agar sesuai dengan merek Anda—tanpa perlu menyalin dan memelihara cabang pustaka sendiri.

import { defaultTheme } from '@yourorg/design-system';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#ff5733'
  }
};

<DesignSystemProvider theme={customTheme}>
  <App />
</DesignSystemProvider>

Memperluas Komponen

Butuh tombol yang sedikit berbeda? Gunakan komposisi, jangan menyalin pustaka.

import { Button as DSButton } from '@yourorg/design-system';

function IconButton({ icon, ...props }) {
  return (
    <DSButton {...props}>
      <Icon name={icon} />
      {props.children}
    </DSButton>
  );
}

Membaca CHANGELOG Sebelum Meningkatkan Versi

Selalu baca CHANGELOG sebelum meningkatkan versi MAJOR. Cari perubahan yang dapat merusak kompatibilitas, skrip migrasi otomatis, dan API baru yang direkomendasikan.

Skrip Migrasi untuk Peningkatan Versi Besar

Pustaka yang baik menyediakan skrip transformasi kode yang mengotomatiskan migrasi akibat perubahan yang merusak kompatibilitas.

npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIs

Mengunci Versi atau Menggunakan Caret

"^1.4.2" mengizinkan peningkatan versi 1.x.y—berisiko jika pustaka tersebut tidak mematuhi SemVer. "1.4.2" mengunci versi secara tepat—paling aman, tetapi Anda harus memperbaruinya secara manual. Renovate/Dependabot membantu mengotomatiskan pembaruan mingguan.

Melaporkan Masalah ke Pengelola Pustaka

Menemukan bug? Laporkan masalah dengan reproduksi minimal. Membutuhkan fitur? Buka diskusi terlebih dahulu. Berkontribusi kembali membantu menyempurnakan sistem desain untuk semua orang.

Menghindari Penimpaan Gaya

Jangan mengakses bagian internal sistem desain dengan !important atau pemilih turunan. Gunakan API penataan tema publik. Penimpaan yang bersifat tambal sulam dapat rusak pada peningkatan versi berikutnya.

Pemeriksaan Singkat

Jika sistem desain menggunakan ESM dan ekspor bernama, apa cara paling bersih untuk hanya menggunakan komponen yang Anda perlukan?

Ringkasan: Menggunakan Sistem Desain

Pasang, lalu bungkus dengan DesignSystemProvider dan tema. Gunakan impor ESM bernama untuk penghapusan kode yang tidak terpakai saat build. Timpa token tema untuk merek Anda. Gunakan komposisi, jangan menyalin pustaka. Baca CHANGELOG sebelum peningkatan versi MAJOR; jalankan skrip migrasi otomatis jika tersedia. Pilih versi terkunci atau caret dengan cermat. Laporkan bug dan kirim permintaan perubahan kepada pengelola pustaka. Jangan mengandalkan !important untuk mengakali API publik.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggunakan Sistem Desain” gratis?

Ya — teks lengkap “Menggunakan Sistem Desain” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menggunakan Sistem Desain”?

Instal pustaka di aplikasi host, terapkan penyedia tema, hapus komponen yang tidak digunakan melalui tree-shaking, dan ikuti pembaruan versi. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Menggunakan Sistem Desain” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Storybook: Story, Kontrol, dan Dokumentasi
Token Desain dengan Style Dictionary
Pemberian Versi dan Publikasi ke npm
Menggunakan Sistem Desain

← Kembali ke Frontend Academy