Konsistensi Adalah Kunci – Bagaimana Membangun Sistem Desain Figma

Sudah menjadi rahasia umum di antara para desainer bahwa sistem desain yang baik dapat berdampak besar pada kualitas produk yang kami kirimkan dan kecepatan pengembangannya. Karena kasus untuk membuat sistem desain yang komprehensif telah diperjelas berkali-kali, dengan perusahaan seperti Google, GitHub, IBM, dan lainnya menggunakannya untuk menciptakan produk yang lebih baik dengan kecepatan yang lebih tinggi, pertanyaannya telah bergeser dari “Mengapa kita harus memiliki desain? sistem?" menjadi “Bagaimana kita bisa membuat sistem desain yang hebat?”

Jadi apa sebenarnya sistem desain itu? Will Fanguy mendefinisikannya sebagai “kumpulan komponen yang dapat digunakan kembali, dipandu oleh standar yang jelas, yang dapat dirakit untuk membangun sejumlah aplikasi.” Sistem desain mungkin tidak hanya menyertakan pustaka komponen UI dan pustaka pola, tetapi juga panduan gaya, praktik terbaik, kode, dan lainnya. Sama seperti cetak biru seorang arsitek untuk sebuah bangunan, sistem desain juga berfungsi sebagai “satu-satunya sumber kebenaran” bagi tim produk saat membangun produk, serta membantu menjaga konsistensi.

GitHub bahkan telah melangkah lebih jauh dengan membagikan pustaka komponen Figma mereka—contoh yang bagus dari sistem desain berbasis Figma. Alat yang lebih luas seperti Buku Cerita dan Pengembangan Berbasis Komponen juga merupakan sumber yang sangat berguna untuk menerapkan dan mendokumentasikan sistem desain.

Sebuah sistem desain mempertahankan konsistensi desain dan harus berguna bagi semua orang yang terlibat dalam menciptakan suatu produk. Ini adalah toolkit yang membantu desainer membuat layar baru, alur, dan prototipe lebih cepat. Sistem desain yang baik membantu pengembang memahami logika di balik keputusan desain, dan membantu menciptakan produk yang lebih kohesif. Ini mempercepat proses desain dan memungkinkan desainer lebih banyak waktu untuk bereksperimen.

Bagi para desainer yang bekerja dengan Figma, mari kita lihat bagaimana membuat pustaka komponen di Figma dapat menjadi bagian penting dari sistem desain yang komprehensif.

Kekuatan Pustaka Komponen

Terkadang, investasi dalam menciptakan sistem desain terlalu cepat dapat menjadi kontraproduktif. Pada tahap awal merancang sebuah produk, prosesnya masih cair. Misalnya, jika dua bilah navigasi utama sedang bereksperimen, menambahkan keduanya ke pustaka komponen tidak akan masuk akal, karena akan membingungkan semua orang di tim. Lebih baik menunggu sampai desain produk selesai—sebaiknya diuji dan agak selesai.

Jika suatu produk sudah matang dan tidak memiliki pustaka komponen yang ada, sistem desain harus sudah ditentukan oleh implementasi saat ini. Tapi itu belum dikodifikasi. Pada titik ini, akan menguntungkan untuk menentukan pola UX umum dan menyaring produk menjadi satu set komponen yang digunakan secara teratur di seluruh produk. Selain itu, sangat ideal jika pustaka komponen disimpan di lokasi sentral yang mudah diakses oleh semua orang.

Sistem Desain Pada dasarnya adalah Toolkit

Mencoba menggunakan sistem desain seperti toolkit adalah tes lakmus yang bagus untuk efektivitasnya. Jika beberapa desainer menggunakannya secara teratur untuk mempercepat proses mereka, itu melakukan pekerjaan dengan baik. Jika pengembang dapat mereferensikannya untuk warna, gaya tipe, atau untuk melakukan pekerjaan dengan lebih sedikit masukan dari desainer, itu juga pertanda baik.

Biasanya tidak berguna untuk memasukkan komponen yang sangat kompleks atau yang hanya dapat digunakan sekali atau dua kali dalam produk. Semakin sesuatu yang dapat digunakan kembali, semakin termasuk dalam sistem desain.

Figma baru-baru ini merilis analisis sistem desain untuk organisasi, di mana tim dapat melihat seberapa efektif bagian yang berbeda dari sistem desain dan membantu mengoptimalkannya.

Mengapa Figma Sangat Bagus untuk Membuat Pustaka Komponen

Figma adalah alat desain yang hebat dengan banyak fitur hebat, tetapi ada subset elemen yang menjadi sangat berguna saat mendesain produk yang kompleks: Styles , Components , dan Library Files . Fitur-fitur ini membantu menjaga sistem desain tetap mutakhir, membantu menjaga konsistensi antar desain, dan menyediakan jalan pintas untuk memperbarui beberapa desain dari satu lokasi pusat.

• Gaya adalah warna dan gaya tipe (font, ukuran, berat, dll.) yang ditentukan di satu tempat dan dapat diterapkan ke banyak objek.
• Komponen adalah hal-hal seperti tombol atau gelembung obrolan dan dapat dibuat dari Gaya, objek seperti bentuk dan teks, dan Komponen lainnya.
• File Pustaka memungkinkan Gaya dan Komponen untuk dibagikan di antara beberapa file dan dengan tim atau organisasi.

Figma memiliki kolaborasi dan berbagi pada intinya. File desain dapat diedit oleh siapa saja di browser, dibagikan secara bebas, dan diperbarui secara real time karena beberapa pengguna dapat mengeditnya secara bersamaan. Ini membuka sistem desain untuk kolaborasi yang lebih efisien tidak hanya antara desainer tetapi juga dengan pengembang dan pemangku kepentingan lainnya.

Membuat File Perpustakaan

Di Figma, file perpustakaan yang kurang lebih akan berfungsi sebagai awal dari sistem desain dapat dibuat. Di sini, kita dapat menentukan Gaya dan Komponen yang kemudian dibagikan ke seluruh tim atau organisasi dan digunakan dalam beberapa desain. Gaya dan Komponen dapat diperbarui di satu tempat, dan perubahan ini kemudian dapat dibawa ke semua file desain individual secara otomatis.

Ini memiliki beberapa keuntungan utama:

1. Kecepatan . Ini menghemat waktu dengan menghilangkan kebutuhan desainer untuk memperbarui ratusan desain secara manual. Dengan memiliki komponen yang dikelola dalam satu file pustaka, memperbarui warna di satu tempat dapat menyebar ke seluruh desain yang dibuat menggunakan pustaka komponen hanya dengan beberapa klik.
2. Konsistensi . Ini mengurangi kemungkinan kesalahan dengan mengotomatisasi tugas.

Organisasi

Saat membangun sistem desain di Figma, akan berguna untuk menarik kesejajaran antara alat dan teori. Misalnya, Styles di Figma dapat dianggap sebagai level paling dasar, bahkan lebih mendasar daripada Atom dalam model Atomic Design Brad Frost. Ini adalah hal-hal seperti warna dan font yang membantu membuat estetika produk.

Komponen Figma sederhana akan dianggap sebagai atom dalam model Desain Atom, misalnya tombol. Komponen Figma yang lebih kompleks akan dianggap sebagai molekul atau organisme , yang kemudian digunakan untuk membuat template dan halaman .

Beberapa hal yang paling berguna untuk dimiliki dalam pustaka komponen adalah:

• warna
• font
• Aset merek, logo, dll.
• Navigasi
• tombol
• Notifikasi
• Modal
• Elemen formulir dan validasi

Membangun Sistem Desain di Figma – Memulai

Dalam contoh ini, kami akan membuat formulir masuk sederhana dan menjelaskan Komponen dan Gaya yang dapat disimpulkan dan digunakan.

Pertama, mari kita pikirkan tentang Komponen dan Gaya yang mungkin dapat digunakan kembali dari formulir ini. Ada kartu yang berisi logo, bidang formulir, dan tombol. Ada juga tiga gaya font dan beberapa warna dan efek berbeda yang mungkin berguna.

Setelah Gaya dan Komponen yang akan disertakan diidentifikasi dalam Pustaka seperti di atas, saatnya membuat file Pustaka dan mulai mengisinya.

Buat File Perpustakaan Figma

Buat file baru dan publikasikan sebagai Perpustakaan. Setelah file baru dibuat, klik pada tab Aset , klik ikon Pustaka , lalu klik Terbitkan . Ini memublikasikan Gaya dan Komponen dalam file pustaka sehingga dapat digunakan di file lain.

Gaya dan komponen sekarang dapat dibuat di file perpustakaan dan dapat digunakan di file lain dan diperbarui dari file perpustakaan pusat.

Cara Membuat Gaya Figma

Membuat Gaya sama dalam file Perpustakaan seperti halnya di file lain, yang diuraikan dalam langkah-langkah di bawah ini.

• Pilih objek yang ingin Anda buat Gayanya. Gaya dapat berupa warna, properti teks, efek, dan kisi tata letak.
• Klik tombol Styles (empat titik dalam bujur sangkar) di sebelah properti yang akan digunakan di Style baru, lalu klik tombol plus di popover untuk membuat Style baru.

• Ini akan menampilkan modal untuk memberi nama Style. Sering kali membantu menggunakan nama semantik daripada nama presentasional, misalnya, "Warna Utama" alih-alih "Hijau" sehingga lebih jelas untuk apa Gaya itu digunakan.
• Publikasikan Gaya ke Pustaka Tim Anda menggunakan pop-up yang muncul di kanan bawah layar, atau ulangi langkah-langkah yang diambil untuk menerbitkan Pustaka dalam contoh pertama.

Berikut tutorial Figma tentang cara membuat style .

Cara Membuat Komponen Figma

Membuat Komponen juga sangat mudah. Cukup pilih objek yang ingin Anda buat Komponennya, lalu klik kanan dan pilih "Buat Komponen."

Komponen diterbitkan ke Pustaka Tim dengan cara yang sama seperti Gaya.

Berikut tutorial Figma tentang cara membuat component .

Setelah beberapa Gaya dan Komponen telah dibuat, file Pustaka dapat dibagikan dengan tim, dan Gaya dan Komponen dapat digunakan di sejumlah file.

Menggunakan Perpustakaan Figma

Untuk menggunakan Styles dan Components ini di file lain, file Library perlu ditautkan ke file desain yang ada di mana kita ingin menggunakan Styles dan Components baru. Cukup buka modal Libraries lagi (Aset, ikon Library) dan nyalakan sakelar sakelar untuk file Library yang akan digunakan.

Pustaka Komponen sekarang siap digunakan. Komponen dapat ditempatkan dengan menyeretnya ke dalam file desain dari tab Aset di sebelah kiri layar. Gaya pustaka dapat digunakan dengan cara yang sama seperti gaya lokal saat mengubah gaya teks, mengisi warna, goresan, efek, dan kisi tata letak.

Saat Komponen dan Gaya diperbarui di Pustaka, file yang menggunakannya harus menerima perubahan. Figma akan menampilkan pemberitahuan ketika pembaruan dibuat di file Library, memberikan opsi untuk mempublikasikannya. Setelah dipublikasikan, file apa pun yang menggunakan Komponen dan Gaya harus menerima perubahan melalui pemberitahuan serupa atau tab aset untuk memperbarui komponen dan gayanya. Ini mencegah perubahan dipublikasikan dan diperbarui secara tidak terduga.

Selain Membangun Pustaka Komponen di Figma

Figma hanya mencakup bagian perpustakaan komponen dari sistem desain yang lengkap. Untuk sistem desain yang lengkap, ada baiknya mempertimbangkan bagian lain yang dapat digabungkan, seperti pedoman merek, panduan gaya konten, dan dokumentasi pengembang.

Panduan gaya konten Mailchimp adalah contoh yang sangat baik, merinci nada suara dan branding melalui konten. GitHub memiliki beberapa dokumentasi hebat tentang bagaimana pustaka komponen mereka bekerja dalam kode, dan Sistem Desain Material Google juga memiliki beberapa contoh bagus untuk mendokumentasikan logika di balik sistem desain.

Sebagai alat desain, Figma telah banyak berkembang, dan fitur-fitur baru terus ditambahkan. Penambahan sistem desain Figma dengan analitik bawaan yang dapat diakses oleh seluruh organisasi merupakan langkah maju yang besar. Penambahan fitur-fitur ini menunjukkan bahwa Figma bertujuan untuk menjadi alat desain yang lengkap dan komprehensif, dan sedang dalam perjalanan untuk mencapainya.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• Kekuatan Figma sebagai Alat Desain
• Merampingkan Desain Kolaboratif dengan Figma
• Tutorial Mini – Memanfaatkan Fitur Figma untuk Seluruh Proses Desain
• Tutorial Mini – Bekerja dengan Komponen Tombol Figma
• Kuasai Kerajinan Anda dengan Alat UX Teratas Ini