Design System
Style Guide pada Modul 4 dan Component pada Modul 6 kini disatukan menjadi sesuatu yang lebih besar dan hidup: Design System. Bab ini membahas bagaimana menyusun token, komponen, dokumentasi, hingga tata kelola perubahan, agar sebuah sistem desain dapat digunakan konsisten oleh banyak orang di berbagai produk sekaligus.
Apa itu Design System?
Design System adalah kumpulan aturan, komponen, dan dokumentasi yang terintegrasi menjadi satu sumber kebenaran (single source of truth) bagi seluruh tim dalam merancang & membangun produk digital secara konsisten dan efisien.
Design System adalah bentuk paling matang dari elemen CP Karya Desain, menyatukan seluruh hasil kerja dari Modul 1–7 menjadi satu sistem yang scalable.
Design Tokens
Design Tokens adalah nilai-nilai desain dasar (warna, ukuran, jarak, radius, font) yang disimpan sebagai variabel bernama, sehingga bisa digunakan berulang & diubah secara terpusat.
color-primary-500 — bukan sekadar kode warna #0070f3.spacing-md — jarak standar 16px.radius-sm — sudut membulat standar 8px.Mengubah satu token otomatis memperbarui seluruh tampilan yang menggunakannya — jauh lebih efisien dibanding mengubah satu per satu secara manual.
Component Library
Kumpulan komponen UI (tombol, form, kartu, dan lainnya) yang telah didokumentasikan lengkap dengan variant, status, dan aturan penggunaannya, siap dipakai berulang oleh seluruh tim.
Component library ini merupakan pengembangan langsung dari fitur Component & Variants yang dipelajari di Figma pada Modul 6.
Dokumentasi & Guidelines
Penjelasan tertulis yang menyertai setiap komponen & aturan desain, agar siapa pun (termasuk anggota tim baru) dapat memahami cara & alasan penggunaannya.
Dokumentasi yang jelas mengurangi kesalahpahaman antar anggota tim, terutama saat proyek melibatkan banyak desainer dan developer.
Versioning & Governance
Versioning adalah sistem penomoran perubahan pada Design System (mis. v1.0, v1.1, v2.0). Governance adalah aturan & struktur tanggung jawab siapa yang boleh mengubah komponen dalam sistem.
Tata kelola yang jelas mencegah Design System menjadi berantakan meski dikembangkan oleh banyak orang dalam waktu lama.
Skalabilitas Lintas Produk & Tim
Kemampuan Design System untuk tetap konsisten dan dapat digunakan di berbagai produk, platform, atau bahkan brand yang berbeda dalam satu perusahaan.
Inilah alasan banyak perusahaan teknologi besar mengembangkan Design System mereka sendiri agar konsisten di seluruh lini produknya.
Studi Kasus & Proyek Akhir
Penerapan seluruh konsep Design System dalam bentuk proyek nyata, dengan referensi dari Design System yang sudah teruji di industri.
Sebagai proyek akhir mata pelajaran, peserta didik menyusun Design System sederhana (5–10 komponen) di Figma lengkap dengan token warna, tipografi, dan dokumentasi dasar — merangkum seluruh pembelajaran dari Modul 1 hingga 8.
Design System adalah puncak dari seluruh pembelajaran UI/UX Design — menyatukan token, komponen, dokumentasi, dan tata kelola menjadi satu sistem yang hidup dan scalable. Dengan menguasai bab ini, peserta didik siap menyusun proyek akhir sebagai bukti kompetensi menyeluruh, sekaligus bekal menghadapi kebutuhan industri kreatif yang terus berkembang, termasuk peran AI pada bab berikutnya.
E-Book Modul Ini
Baca ringkasan lengkap materi Design System dalam format e-book yang bisa dibuka langsung tanpa perlu mengunduh.