Transkrip
Pada materi sebelumnya, Anda telah berlatih untuk membuat sebuah mockup desain. Selain itu, Anda juga telah mencoba menggunakan Components, yakni elemen yang menjadi dasar dan bisa digunakan kembali di banyak tempat sekaligus. Sehingga ketika ada perubahan, Anda cukup menggantinya di satu tempat saja. Nah, kali ini kita akan mengumpulkan semua Components tersebut dalam satu tempat untuk membuat sebuah Design System.
Design System adalah kumpulan dari berbagai elemen yang bisa digunakan kembali sebagai panduan tim untuk membuat desain sesuai dengan standar yang ditentukan. Design System ini bisa berupa palet warna, ikon, tipografi dan juga Components. Bahkan, ia juga bisa berupa besar radius yang digunakan pada sudut suatu elemen ataupun seberapa dalam bayangan (shadow) yang digunakan.
Jika Anda penasaran bagaimana contoh dari Design System, salah satunya adalah Google Material Design.
Dalam Google Material Design, disediakan berbagai macam komponen dasar yang bisa Anda gunakan, seperti App Bar, Bottom Navigation, Card, Chips, Dialog, dan lain sebagainya. Anda bahkan dapat menggunakan template pada Figma dengan nama Material Baseline Design Kit seperti berikut:
Untuk menggunakannya, Klik Duplicate dan terbukalah project Figma yang berisi semua komponen Material Design.
Untuk menggunakan komponen tersebut, Anda cukup copy paste dari halaman Sticker Sheet pada project tersebut. Cukup mudah, bukan?
Bukan hanya Google saja, ada juga Design System lainnya dari beberapa perusahaan terkenal, seperti:
- Shopify Design System : Polaris
- Apple Human Interface Guideline
- Microsoft Fluent Design System
- AirBnb’s Design System
- Gojek’s Design System
- Pertama yaitu Membuat tampilan yang konsisten di setiap halaman.
- Kemudian ia juga dapat digunakan untuk memperkuat brand identity dari perusahaan.
- Selain itu, desain menjadi lebih mudah diubah karena cukup mengganti di satu tempat.
- Manfaat lainnya yaitu menghemat waktu dan komunikasi, serta
- Membantu desainer yang baru masuk di tengah proses desain.