Design
System
UI/UX Design for Beginner
Outline materi
1 Apa itu Design System
2 Struktur Design System
3 Praktik Membuat UI Kit
Credit to Pablo Stanley
Apa itu Design System
Apa itu Design System?
Sebuah komponen yang dapat digunakan
kembali untuk keperluan perancangan &
pengembangan produk baik dari sisi desain
maupun code programming.
💡
Kata system mempunyai maksud bahwa
setiap desain memiliki aturan ketika
komponen tersebut digunakan
Design System itu ibarat permainan Lego
👩🎨 🤜🤛 👩💻
Designer Developer
(DesignOps) (Front-End Dev)
Design System ≠ UI Kit
Design System terdapat aturan code untuk
component library yang digunakan developer.
Sedangkan UI Kit hanya berupa aturan design
Perusahaan yang menggunakan Design System
Keuntungan dari Design System
1 Konsistensi hasil desain UI & code
Front-end
2 Mempercepat proses kerja UI
Design & Developer
3 Dapat mengakomodir kebutuhan
product design di masa depan
Struktur Design System
Susunan komponen Design
System itu seperti unsur Kimia
3 Susunan Komponen
Atomic Design System
Atom Molecule Organism
1-Komponen Atom
Palet Warna
Typography Icon Style
Input Field
Button Styleguide
2-Komponen Molecule
! ! !
Tab 1 Tab 2 Tab 3
Title
"
Subtitle
Tabbing Title
Subtitle
! Parent Title %
Title
Large Title Subtitle
# Search $ Title
Subtitle
Title
"
Header Bar Title 2:10 PM "
Speaking of which, Peter really wants
Subtitle
you to come in on Friday to chat about…
Action List
Notification Bar
3-Komponen Organism
Title A Short Title Is Best Title
A short, complete sentence that takes A message should be a short, A short, complete sentence that takes
up the first and the second line. complete sentence. up the first and the second line.
Placeholder
Action sheet description Label Label
Label Label Label Label
Label
Label
Label
Label Pop-Up
Button
Action Sheet Title
One answer is that Truth
Notification Stacked
Praktik Membuat UI Kit