Design system merupakan sebuah kumpulan component-compenent yang akan sering digunakan oleh ui/ux designer dalam pembuatan wireframing mereka. Pada pembahasan pengenalan Design system kita sudah mengetahui apa saja yang di atur dalam designs system tersebut. Semua hal tersebut bisa kalian baca pada Belajar Design System untuk UI/UX Designer
Pada artikel ini kita akan lanjut mengenai elemen-elemen apa saja yang ada pada design system tersebut.
1. Atoms
Atoms pada design system merupakan bagian terkecil pada desain. Hal ini biasaya dapat dilihat bahwa elemen ini tidak bisa di pecah lebih kecil lagi. Atoms merupakan elemen yang bisa dipakai sendiri dan bisa di gabungkan dengan elemen-elemen lainnya.
Contoh dari elemen ini adalah:
- Text
- Button
- Color
- Icon
- Image
2. Molecule
Elemen kedua pada design system adalah molecule. Molecule merupakan gabungan dari berbagai atom yang dikelompokan untuk memiliki fungsi/action untuk peggunannya. Biasanya Molecule ini sudah memiliki CTA atau Click to Action.
Contoh dari Molecule adalah:
- Search Input
- Log in Button
- Checkbox
- Radio button
3. Organism
Organism adalah kumpulan dari atom dan molecule yang memiliki desain yang kompleks dan mengandung banyak fungsi dan komponen untuk digunakan. Contohnya saat kita sebagain UI/UX Designer pasti akan membuat beberapa segmen seperti header, body, ataupun footer. Hal tersebut yang akan membuat molecule atau atoms yang digunakan memiliki organism tersendiri.
Baca Juga: Ayo Memulai membuat design system
4. Template
Merupakan elemen pada design system yang telah memiliki pola yang berulang. Hal ini digunakan untuk mempermudah pembuatan sebuah page yang memiliki tata pola informasi yang sama.
Template biasanya menggunakan organism, molekul hingga atom, hanya saja telah disusun dalam sebuah template yang digunakan berulang kali. Biasanya di bedakan dalam penggunaan atom atau asset yang berbeda.
5. Pages
Gabungan dari semua elemen merupakan bagian dari elemen terakhir dari Design System. Sebuah page merupakan produk terakhir dalam pembuatan tampilan sebuah produk. Hal tersebut didesign oleh UI/UX dan dikerjakan oleh UI/UX Enginer.
Elemen-elemen design system merupakan elemen-elemen yang akan sering dijumpai saat berkerja pada departmen produk. Tentu saja kegunaan elemen yang berulang akan membantu semua tim yang ada pada departmen tersebut.
Jika anda ingin mencari tahu lebih jauh mengenai design sytem, berikut buku atau tutorial dalam pembuatan design system
