Sederhananya kamu memulai mendesain dari dalam ke luar, bukan luar ke dalam.
Misal mau buat modal, alih2 ngedesain wrapper nya dulu, kita mulai dari yg paling dalem yaitu Input Field, Dropdown, Checkbox, atau Button. Atau bisa lebih dalem lagi yaitu Text Label dan Input Border. Atau lebih dalem lagi yaitu Typography, Color, Border Radius dan Spacing.
Ini lah yang disebut Atom2 penyusun. Disebut Atom karena elemen nya udah mentok, ga bisa dibagi lagi.
Setelah mendesain dari elemen terkecil, kita bisa naik sedikit2 ke atas menggabungkan Atom dengan Atom lain menjadi Molekul. Menggabung Molekul dengan Molekul menjadi Cells. Begitu seterusnya hingga Species. Setiap pembentukan elemen baru, kita bisa jadikan master component di Figma.
Keuntungan nya apa pake pendekatan ini dalam mendesain?
Scalability & efficiency.
Scalibility tuh gimana? Maksudnya design proses yang kamu lakukan sudah mengakomodir untuk skala besar.
Bayangkan kalo Input Field yg kamu buat ini akan digunakan di 100+ design modal lainnya dengan berbagai macam Use Cases.
Ketika ada perubahan Font size pada Text Label di Input Fields, kamu tidak perlu merubah 100+ Label di berbagai tempat, namun kamu cukup mengubah master component nya saja.
Ini bisa terjadi kalo mengadopsi pendekatan Atomic Design Approach.
Pengen contoh lain lagi...?
Kita bahas mendalam Atomic Design Approach ini di Tutorial Dashboard UI. Kita praktek langsung di Figma biar pemahamanmu makin paripurna.
Kalo belum, download demo filenya. Gratis.
TutorialUIUX.com
