Sistem desain adalah perpustakaan pedoman dan komponen yang dapat digunakan kembali yang harus menetapkan konsistensi pengalaman produk. Tujuan dari sistem desain adalah untuk menciptakan satu sumber kebenaran, yang terlihat dan dapat dipertahankan oleh tim.

Mungkin tidak semua tim membutuhkan sistem desain. Namun, dari pengalaman, desainer dan pengembang sering mengalami miskomunikasi tanpanya. Meskipun proses ini membutuhkan waktu dan usaha, akhirnya menjadi sangat efektif karena meletakkan seperangkat aturan dan prinsip yang membantu menyusun dan mempercepat proses pengembangan produk.

Adalah kumpulan aturan atau pedoman yang akan digunakan di semua komponen dan tata letak yang akan dirancang. Umumnya, daftar ini terdiri dari warna, tipografi, ikonografi, kisi, spasi, daftar periksa aksesibilitas, dan tema. 

Warna adalah dasar dari kepribadian produk dan salah satu bagian terpenting dari desain UI. Banyaknya ui yang perlu dibuat oleh desainer, mengharuskan kita untuk mendukung palet warna dengan berbagai warna, corak, dan warna. Langkah-langkah untuk membuat palet warna: Gunakan nama yang benar untuk warna. Gunakan campuran pendekatan, misalnya, untuk warna utama, gunakan nama fungsional seperti, untuk orang lain yang lebih kontekstual - nama definitif. Siapkan dokumentasi di mana dapat menyertakan berikut: nama dan nilai warna, warna latar depan, rasio kontras, tingkat aksesibilitas, dan warna/corak. 

Tipografi, gunakan nama standar berdasarkan elemen teks HTML. Jika mendesain untuk iOS, di sarankan menggunakan konvensi nama sistem. Buat ukuran dan bobot font yang berbeda untuk mencapai hierarki visual. Karena, ukuran font yang sama dapat digunakan dalam komponen terpisah dengan dua bobot yang berbeda, untuk setiap ukuran font tetapkan gaya bobotnya sendiri. Untuk menghasilkan satu set ukuran dan bobot font, dapat menggunakan plugin ini: Hasilkan gaya teks, Skala tipe, Alat web untuk menentukan skala tipe.

Ikonografi, harus mengkomunikasikan pesan yang diberikan oleh sistem dan memperhatikan informasi utama. Simpan setiap ikon sebagai komponen sehingga akan mudah untuk menukarnya di komponen.

Grid menyelaraskan elemen dan tipografi dalam komponen dan tata letak. Ini menyusun konten dan menetapkan konsistensi. Grid terdiri dari kolom (1), selokan (2), dan margin (3). Ada dua jenis grid: Tetap: kisi di mana kolom memiliki lebar tetap. Fluid: kisi di mana lebar kolom ditentukan oleh persentase dan akan mengubah ukuran berdasarkan viewport. Ketika datang untuk mendokumentasikan grid dalam sistem desain, sangat penting untuk memberikan panduan tentang bagaimana grid diterapkan. Gunakan grid responsif yang menentukan cara mengatur konten dan komponen berdasarkan ukuran layar. Di sini, kita harus menentukan jenis grid dan tata letak untuk desktop, seluler, tablet. Jika tidak yakin bagaimana memulainya, lihat artikel hebat ini.

Sistem Breakpoint, (ukuran layar) berdasarkan layar, perangkat, dan orientasi yang berbeda. Bergantung pada kontennya, kami menentukan titik henti sementara dan jumlah kolom untuk setiap lebar viewport.

Sistem jarak adalah seperangkat pedoman tentang cara mengatur komponen dan menempatkannya di dalam tata letak. Spasi menginformasikan hubungan elemen spesifik dalam komponen dan mengkomunikasikan hierarki. Umumnya dalam kode, spasi ditentukan oleh padding dan margin. Padding adalah ruang antara elemen UI. 

Pustaka Komponen adalah seperangkat komponen UI yang didasarkan pada fondasi, cara bagaimana menyusun elemen UI seperti tombol, dan bidang. Apa fungsinya bagi? Ketika perlu membuat berbagai keadaan, dan gaya dari komponen yang sama, konsep ini membantu mempercepat suatu proses. 

Konsisten adalah bagian yang paling rumit karena tergantung pada beberapa faktor seperti fungsionalitas produk, kerangka kerja yang digunakan tim, dan gaya kode. Penting untuk memastikan bahwa nama komponen memiliki nama yang sama seperti dalam kode karena akan lebih mudah bagi tim pengembang untuk memindai dan menavigasi. Tidak ada aturan ketat untuk konvensi nama, setiap tim memiliki kasus penggunaannya sendiri, namun, ada prinsip-prinsip utama yang dapat patuhi: Gunakan kata benda daripada kata kerja, tetap singkat dan sederhana, bermakna dan tidak terlalu abstrak.

Tentang Konvensi Penamaan Sistem Desain, pastikan bahwa struktur komponen konsisten, dan tidak ada lapisan yang berlebihan. Dapat menggunakan plugin yang bersih, memungkinkan untuk menghapus lapisan tersembunyi dan memisahkan grup lapisan tunggal. Pastikan bahwa, tim dapat dengan mudah menavigasi melalui variasi layar dan dengan cepat menemukan solusi akhir dan disetujui.

Jika ingin membuat pengembang dan pemangku kepentingan dengan bebas menavigasi dan memahami konteks desain, berikan mereka dokumentasi tambahan. Ini bisa berupa deskripsi singkat tentang aliran atau anotasi ke layar, daftar tiket terkait, atau tautan. Selain itu, tambahkan catatan rapat langsung, yang memberi referensi cepat ke ringkasan diskusi.

Saat perlu menjalankan handoff desain ke pengembang, penting untuk memastikan bahwa struktur komponen cocok dengan komponen yang dikodekan, memungkinkan untuk menghindari kesalahpahaman antara desainer dan pengembang. Umumnya, pengembang menggunakan kerangka kerja front-end seperti React, Vue, dan Angular untuk membangun komponen. Kemudian, untuk menerbitkan komponen berkode dan membuat perpustakaan, ada Buku Cerita yang melakukan pekerjaan ini.

Tujuan dari sistem desain adalah untuk menciptakan bahasa terpadu dan memberikan tim perasaan berada di halaman yang sama. Tingkatkan alur kerja dan bagaimana sistem desain dapat membantu mencapainya.