Design System — Part 1 Kenalan dengan Design System
Design System membantu kita menghemat banyak waktu dan biaya dengan menyediakan produk yang berfokus pada user.
Perusahaan-perusahaan teknologi ternama dalam beberapa tahun terakhir telah membagikan aturan desain dan convention mereka kepada dunia, dan salah satu contoh yang paling kita kenal adalah Google Material Design. Sama halnya Material Design, ada juga Carbon Design System dari IBM, Polaris dari Shopify, Asphalt dari GO-JEK dan masih banyak lagi.
Mereka membuat design system seakan-akan hal tersebut sangat penting dalam proses pembuatan produk mereka. Jadi, apa sih design system?
👋 Hi Design System
Design system is a set of interconnected patterns and shared practices coherently organized to achieve the purpose of digital product.
— Design System Book, Alla Kholmatova.
🤔 Apa itu Design System?
Design System adalah suatu kumpulan komponen-komponen UI dan code yang saling terhubung kemudian dikategorikan oleh suatu standarisasi yang jelas dan terintegrasi dalam suatu sistem. Design system ini dapat digunakan berulang kali oleh desainer ataupun developer dalam pengembangan produk.
Design system juga disertai dengan dokumentasi yang meliputi code library, pattern library dan styleguide sehingga dapat digunakan oleh seluruh tim dalam mengembangkan suatu produk agar lebih cepat.
Selain itu, design system juga disertai dengan component library yang membuat designer cukup melakukan drag n drop ketika membuat UI, komponen UI tersebut saling terhubung sehingga ketika melakukan perubahan pada satu komponen, maka komponen yang sejenis akan berubah secara otomatis (seperti gambar diatas). Fitur ini terdapat pada tools Figma (components) dan Sketch (sysmbol). Contohnya kalian ingin mengubah satu komponen button yang asalnya berwarna biru menjadi warna merah, kemudian semua halaman yang memiliki komponen button biru akan berubah menjadi merah secara otomatis. Bayangkan jika kalian memiliki ratusan halaman dan masih menggunakan cara lama, berapa banyak button yang harus diubah 😫
Dari sisi desainer — ketika melakukan proses design tidak perlu lagi membuat komponen dari awal dan hanya tinggal menggunakan komponen yang sudah ada pada component library sehingga dapat menghemat waktu dan dengan adanya design system, desainer akan lebih fokus untuk menyelesaikan problem yang lebih kompleks dibandingkan mengurus hal-hal visual kecil.
Dari sisi developer — mempercepat pekerjaan dengan menggunakan code library yang sudah ada pada design system, kemudian digunakan untuk membuat komponen UI yang sudah dibuat oleh desainer. Selain itu membuat struktur kode lebih rapih sehingga mudah untuk di-maintain.
🤩 Apa sih manfaat dari membuat Design System?
Pada awalnya, banyak orang menganggap bahwa design system itu menghalangi kreatifitas desainer karena sudah ada patokan desainnya, saya sendiri beranggapan begitu awalnya. Padahal ternyata design system lebih fokus kepada user experience atau painful point-nya user daripada menghabiskan waktu untuk mengurusi hal-hal visual kecil atau menjelaskan desain kepada developer. Hadirnya design system dapat membantu kolaborasi antara desainer dengan developer dan mengurangi tektokan yang dapat menimbulkan kesalahpahaman/miss komunikasi. Berikut beberapa manfaat dari membuat design system:
- Concistency — Dalam sebuah design team yang sudah cukup besar, pastinya memiliki banyak desainer dan memiliki pandangan desain yang berbeda-beda. Bayangkan jika tidak adanya design system, desainer A membuat button radius 4px, sedangkan desainer B membuat button radius 10px, hasilnya produk terlihat ketidak konsistenan terhadap tampilan UI dan akan mempengaruhi experience user. Hadirnya design system dapat menjaga concistency tampilan UI yang dapat meningkatkan kualitas experience user terhadap produk menjadi lebih baik.
- Efficiency — Design system tentu saja akan lebih menghemat banyak waktu dan biaya ketika mengembangkan suatu produk, hal ini dapat menjadi benefit bagi bisnis.
- Easy to Scale — Selain itu, design system dapat mengakomodir suatu permasalahan yaitu design team yang mulai berkembang, tuntutan multi platform dan berkembangnya suatu produk seiring dengan perkembangan kebutuhan bisnis.
Manfaat yang paling penting dari design system, akan mengurangi pertumpahan darah antara desainer dan developer ketika memperdebatkan beda argumen 🤣
What’s next…
Pada artikel selanjutnya, akan membahas tentang Functional Pattern.
Stay tune terus ya!
Referensi
P.S: Artikel ini saya buat seiring berjalannya pembelajaran saya tentang design system, kekurangan dan kesalahan pada hasil belajar ini mohon dimaklumi, semata-mata hanya ingin berbagi. Masukan dan saran sungguh sangat dipersilahkan :)
