Pendahuluan
Dalam desain UI/UX, Atomic Design System adalah pendekatan yang membantu desainer membangun antarmuka yang lebih terstruktur, konsisten, dan scalable. Dengan metode ini, komponen UI dikembangkan dari bagian terkecil (atoms) hingga menjadi halaman yang kompleks.
Salah satu tools terbaik untuk menerapkan sistem ini adalah Figma, karena mendukung pembuatan desain berbasis komponen reusable dan design system. Melalui pelatihan ini, peserta akan belajar cara menerapkan Atomic Design System di Figma untuk meningkatkan efisiensi dan kualitas desain UI.
💰 Harga hanya Rp1.250.000
📍 Pelaksanaan online, fleksibel, dan bisa diikuti dari mana saja!
📜 Sertifikasi resmi BNSP berlaku seumur hidup
Unit Kompetensi yang Dipelajari
1. Pengenalan Atomic Design System
✅ Konsep Atomic Design System
✅ Hierarki desain: Atoms, Molecules, Organisms, Templates, dan Pages
✅ Keuntungan menerapkan sistem ini dalam UI/UX
2. Membuat Atomic Design System di Figma
✅ Cara membuat Atoms: warna, ikon, tombol, input field
✅ Cara membuat Molecules: kombinasi beberapa atoms menjadi komponen reusable
✅ Cara membuat Organisms: menggabungkan molecules untuk membentuk UI yang lebih kompleks
3. Mengelola Design System di Figma
✅ Membuat style guide dan komponen reusable
✅ Menggunakan Variants dan Auto-Layout
✅ Sinkronisasi perubahan dalam Design System
4. Studi Kasus & Implementasi
✅ Membuat design system sederhana di Figma
✅ Mendesain dashboard aplikasi web menggunakan Atomic Design
✅ Menerapkan perubahan design system secara global
Studi Kasus dan Penyelesaian
Studi Kasus:
Sebuah startup e-commerce ingin membuat design system untuk menjaga konsistensi tampilan UI di berbagai platform. Mereka ingin menerapkan Atomic Design System di Figma untuk mempermudah pengembangan dan perbaikan desain.
Solusi:
-
Membuat Atoms
-
Warna, typography, ikon, tombol, dan input field dibuat sebagai komponen individual.
-
-
Membentuk Molecules
-
Kombinasi beberapa atoms, seperti tombol dengan ikon atau input field dengan label.
-
-
Menyusun Organisms
-
Contohnya: card produk yang berisi gambar, judul, harga, dan tombol beli.
-
-
Menerapkan Design System
-
Semua komponen dibuat reusable sehingga setiap perubahan dapat diterapkan secara global.
-
Hasil akhirnya adalah design system yang scalable dan lebih mudah digunakan dalam pengembangan UI/UX.
Silabus Pelatihan (2 Hari)
| Hari | Materi | Keterangan |
|---|---|---|
| 1 | Pengenalan Atomic Design | Konsep, hierarki, dan manfaatnya |
| 1 | Mendesain Atoms di Figma | Warna, ikon, tombol, input field |
| 1 | Mendesain Molecules & Organisms | Membentuk komponen reusable |
| 2 | Mengelola Design System | Style guide, Auto-Layout, Variants |
| 2 | Studi Kasus | Membuat design system untuk aplikasi web |
| 2 | Implementasi | Menerapkan Atomic Design dalam proyek nyata |
Kesimpulan
Pelatihan ini memberikan pemahaman mendalam tentang Atomic Design System di Figma, sehingga peserta dapat menciptakan desain UI yang konsisten, efisien, dan scalable.
✨ Pelaksanaan online, fleksibel, dan bisa diikuti dari mana saja!
✨ Harga terjangkau hanya Rp1.250.000
✨ Sertifikasi resmi BNSP yang berlaku seumur hidup
📌 Daftar sekarang dan lihat detailnya di:
🔗 https://mobilefaculty.com/skema-sertifikasi-bidang-komputer/