Advan – Apakah kamu sedang mencari cara untuk membuat style guide di Figma? Jika iya, artikel ini tepat untukmu! Figma merupakan alat desain populer yang banyak digunakan oleh desainer UI/UX untuk membuat prototipe dan desain antarmuka pengguna.
Salah satu fitur yang cukup penting yang dapat kamu gunakan di Figma yaitu, Style Guide. Dengan Style Guide kamu dapat memastikan konsistensi desain serta mempermudah kolaborasi dengan tim.
Langkah Awal Membuat Style Guide di Figma
Sebelum memulai membuat style guide, pastikan kamu sudah memiliki akun Figma dan memahami dasar-dasar penggunaannya. Jika kamu termasuk pemula ada baiknya kamu mengikuti tutorial dasar Figma yang telah kami siapkan berikut ini:
1. Buat Dokumen Baru
Langkah pertama adalah membuat dokumen baru di Figma. Kamu bisa melakukan ini dengan mengklik tombol “New File” pada dashboard Figma. Beri nama file tersebut sesuai dengan proyek yang sedang kamu kerjakan.
2. Tentukan Elemen Dasar
Elemen dasar yang harus ada dalam style guide meliputi warna, tipografi, dan grid. Kamu bisa memulai dengan menentukan palet warna yang akan digunakan. Berikut langkah-langkahnya:
- Warna: Buat beberapa frame kecil dan isi dengan warna-warna yang akan kamu gunakan. Beri label setiap warna dengan kode hex atau nama warna untuk memudahkan identifikasi.
- Tipografi: Tentukan jenis huruf, ukuran, dan gaya (bold, italic, underline) yang akan digunakan. Buat daftar huruf dengan berbagai ukuran dan gaya di dalam frame.
- Grid dan Spacing: Tentukan ukuran grid dan aturan spacing yang akan digunakan. Ini penting untuk memastikan setiap elemen dalam desain memiliki jarak yang konsisten.
3. Membuat Komponen
Figma memiliki fitur komponen yang sangat berguna untuk membuat elemen desain yang konsisten. Kamu bisa membuat tombol, ikon, dan elemen UI lainnya sebagai komponen. Berikut caranya:
- Buat elemen UI yang kamu butuhkan, misalnya tombol.
- Pilih elemen tersebut, lalu klik kanan dan pilih “Create Component”.
- Beri nama komponen tersebut sesuai dengan fungsinya, misalnya “Primary Button”.
4. Mengorganisir Style Guide
Untuk memudahkan penggunaan style guide, pastikan kamu mengorganisir elemen-elemen tersebut dengan rapi. Gunakan frame dan beri nama yang jelas pada setiap elemen. Kamu bisa membuat halaman terpisah untuk setiap kategori, seperti warna, tipografi, dan komponen.
5. Menambahkan Dokumentasi
Selain elemen visual, tambahkan juga dokumentasi singkat mengenai aturan penggunaan setiap elemen. Misalnya, kapan menggunakan warna tertentu atau jenis huruf tertentu. Dokumentasi ini akan sangat membantu tim lain yang mungkin menggunakan style guide tersebut.
Baca juga: Perbedaan Figma dan Adobe XD, Mana yang Lebih Bagus untuk Mendesain
6. Kolaborasi dan Revisi
Setelah style guide selesai, bagikan dengan tim kamu. Figma memungkinkan kolaborasi real-time, jadi tim kamu bisa memberikan masukan atau melakukan revisi langsung di dokumen tersebut. Pastikan kamu membuka akses edit untuk anggota tim yang membutuhkan.
7. Menyimpan dan Menggunakan Style Guide
Pastikan kamu menyimpan style guide tersebut di tempat yang mudah diakses oleh seluruh tim. Kamu juga bisa menggunakannya sebagai referensi dalam setiap proyek desain di Figma.
Dengan kemampuan menggunakan Figma secara langsung pada perangkat Advan Workplus, kamu dapat meningkatkan konsistensi desain mulai dari warna, tipografi, hingga element UI lainya. Hal ini akan membuat tim kamu untuk tetap fokus pada visi desain yang berkualitas. ***
Editor: Sabila J. Firda