👋 Halo! sobat scodeid
Kalau kamu lagi mulai ngerjain desain produk atau aplikasi, ada satu hal penting yang wajib dipikirin dari awal: sistem desain. Kadang kita terlalu fokus bikin tampilan yang keren, tapi lupa bikin fondasi yang rapi dan konsisten — padahal ini yang bikin desain kita scalable dan gampang dikembangkan bareng tim.
Nah, biar kamu nggak bingung mulai dari mana, aku udah rangkum elemen-elemen penting yang biasanya ada dalam sistem desain di Figma. Mulai dari grid, tipografi, warna, sampai komponen-komponen reusable. Yuk simak rangkumannya di bawah ini! 👇
🎨 1. Warna (Color Styles)
Struktur Warna:
-
Primary / Secondary / Accent: Digunakan untuk elemen utama dan penekanan.
-
Neutral: Abu-abu untuk teks dan latar belakang.
-
Semantic: Success, Warning, Error untuk status atau notifikasi.
Contoh Penamaan:
-
Primary/500– Warna utama standar. -
Neutral/700– Teks utama. -
Error/500– Indikasi kesalahan.UPDIVISIONVogue+3Vogue+3Vogue+3
🔤 2. Tipografi (Text Styles)
Skala Tipografi:
-
Heading: H1 (48px), H2 (36px), H3 (24px)
-
Body: Body Large (18px), Body (16px), Body Small (14px)
-
Caption: 12px
Contoh Penamaan:
-
Heading/H1/Bold -
Body/Regular -
Caption/Italic
📐 3. Grid & Layout
Sistem Grid:
-
Desktop: 12 kolom, gutter 24px, margin 120px.
-
Tablet: 8 kolom, gutter 16px, margin 64px.
-
Mobile: 4 kolom, gutter 16px, margin 24px.
8pt Spacing System:
-
Gunakan kelipatan 8 (8, 16, 24, 32, dst.) untuk padding dan margin.
🧩 4. Komponen (Components)
Komponen Dasar:
-
Buttons: Primary, Secondary, Tertiary dengan state Default, Hover, Pressed, Disabled.
-
Form Elements: Input Field, Checkbox, Radio Button, Dropdown.
-
Navigation: Navbar, Sidebar, Breadcrumbs.
-
Cards: Untuk menampilkan konten seperti produk atau artikel.meetmydesign.com
Variants:
-
Gunakan fitur Variants di Figma untuk mengelola berbagai state dan ukuran komponen.
📁 5. Struktur File & Penamaan
Struktur Folder:
-
Styles/Colors -
Styles/Typography -
Components/Buttons -
Components/Forms -
Layouts/Grid
Penamaan Konsisten:
-
Button/Primary/Default -
Input/Text/Focused -
Card/Product/Featured
📄 6. Dokumentasi & Panduan Penggunaan
Style Guide:
-
Deskripsikan penggunaan warna, tipografi, dan komponen.
-
Berikan contoh penggunaan yang benar dan salah.
Component Documentation:
-
Jelaskan setiap komponen, variannya, dan kapan digunakan.
🔗 7. Publikasi & Kolaborasi
-
Publish to Team Library: Agar tim dapat mengakses dan menggunakan komponen secara konsisten.
-
Real-time Collaboration: Manfaatkan fitur kolaborasi Figma untuk bekerja bersama tim.
✅ Penutup
Dengan menerapkan sistem desain yang rapi dan konsisten di Figma, kamu tidak hanya mempercepat proses desain, tetapi juga memudahkan kolaborasi antar desainer dan developer. Sistem desain adalah fondasi visual produkmu — kuatkan dari awal, maka hasilnya akan lebih efisien dan profesional.
re-write by yogi arif widodo