Tentu, ini artikel yang Anda minta.

Pada artikel sebelumnya, kita telah membahas teori dan praktik terbaik dalam membuat UI Kit sebagai fondasi dari sebuah Design System. Sekarang, saatnya kita terjun langsung dan menerapkan pengetahuan tersebut menggunakan tool yang paling populer di kalangan desainer UI saat ini: Figma.

Figma menyediakan fitur-fitur canggih yang dirancang khusus untuk mempermudah proses pembuatan, pengelolaan, dan penggunaan UI Kit. Dengan menguasai fitur-fitur ini, Anda dapat membangun library komponen yang efisien, mudah diakses, dan siap untuk digunakan kembali oleh seluruh tim.

1. Komponen Dasar: Atoms

Langkah pertama adalah membuat “atoms,” yaitu elemen-elemen paling dasar. Dalam Figma, kita akan mengubahnya menjadi Component.

• Praktik:
  1. Mulai dengan elemen terkecil seperti tombol. Buatlah sebuah tombol (misalnya, dengan rectangle dan text).
  2. Pilih elemen tersebut, lalu klik ikon “Create component” di bagian atas (atau gunakan shortcut Ctrl + Alt + K).
  3. Ulangi proses ini untuk elemen-elemen dasar lainnya seperti input field, checkbox, atau ikon.
• Manfaat: Setiap kali Anda membutuhkan tombol di desain Anda, Anda hanya perlu menyeretnya dari panel Assets. Jika Anda mengubah master component (tombol awal yang Anda buat), semua instansinya di seluruh proyek akan ikut berubah secara otomatis.

2. Berbagai Varian: Variations

Bagaimana jika Anda membutuhkan tombol dengan berbagai state (misalnya, default, hover, disabled) atau berbagai ukuran (kecil, sedang, besar)? Fitur Variants di Figma adalah jawabannya.

• Praktik:
  1. Buatlah semua varian dari satu komponen (misalnya, tiga tombol: satu untuk default, satu untuk hover, dan satu untuk disabled).
  2. Pilih semua tombol tersebut, lalu klik opsi “Combine as variants” di panel sisi kanan.
  3. Figma akan secara otomatis mengelompokkan semuanya. Anda dapat memberikan properti pada setiap varian (misalnya, state: default, state: hover, state: disabled) untuk memudahkan identifikasi.
• Manfaat: Daripada memiliki tiga komponen terpisah, Anda kini hanya memiliki satu komponen “Tombol” dengan beberapa varian. Ini membuat panel Assets Anda lebih rapi dan mempermudah tim untuk memilih varian yang tepat.

3. Mengatur Gaya: Styles

Konsistensi adalah kunci. Figma memungkinkan Anda untuk menyimpan gaya-gaya visual dasar sehingga Anda dapat menggunakannya kembali di mana saja.

• Praktik:
  1. Warna: Buatlah sebuah kotak, berikan warna, lalu di panel sisi kanan, klik empat titik di samping “Fill”. Klik ikon + untuk membuat Color Style baru. Beri nama yang jelas (misalnya, brand/primary, neutral/gray-200).
  2. Tipografi: Lakukan hal yang sama untuk font. Atur font family, ukuran, line height, dan weight. Klik empat titik di samping “Text”, lalu buat Text Style baru. Beri nama yang terstruktur (misalnya, heading/h1, body/paragraph).
  3. Efek: Anda juga dapat menyimpan efek seperti drop shadow dan blur sebagai Effect Style.
• Manfaat: Dengan menggunakan Styles, jika Anda perlu mengubah warna primer di seluruh proyek, Anda hanya perlu mengubah satu Style saja. Perubahan akan diterapkan secara otomatis. Ini sangat menghemat waktu dan memastikan konsistensi.

4. Mengelompokkan dan Berbagi: Design Library

Setelah Anda membuat semua komponen dan Styles, saatnya mengelompokkannya menjadi Design Library yang dapat dibagikan kepada seluruh tim.

• Praktik:
  1. Pastikan semua komponen dan Styles Anda berada dalam satu file Figma.
  2. Di bagian atas kiri, klik ikon “Libraries” (seperti tiga titik).
  3. Nyalakan tombol “Publish” untuk file Anda. Beri nama yang jelas (misalnya, Our Company UI Kit).
• Manfaat: File UI Kit Anda kini tersedia untuk semua orang di tim Anda. Mereka dapat mengakses semua komponen dan Styles dari panel Assets di setiap proyek.

5. Praktik Terbaik Tambahan

• Penamaan yang Terstruktur: Gunakan konvensi penamaan yang logis dan konsisten untuk semua komponen, varian, dan Styles. Contoh: Button/Primary/State=Hover, Color/Brand/Primary. Ini membuat library Anda mudah dicari dan dipahami.
• Jelaskan di Komentar: Gunakan komentar di Figma untuk menjelaskan cara kerja sebuah komponen, kapan harus digunakan, dan pertimbangan desain di baliknya.
• Dokumentasi yang Terpisah: Meskipun Figma memiliki dokumentasi internal, banyak tim yang membuat situs web dokumentasi terpisah (misalnya, menggunakan Zeroheight atau Storybook) untuk penjelasan yang lebih rinci.

Kesimpulan

Membuat UI Kit dengan Figma adalah langkah awal yang sangat efektif dalam membangun sebuah Design System. Dengan memanfaatkan fitur-fitur seperti Components, Variants, Styles, dan Libraries, Anda dapat menciptakan sebuah aset yang kuat, mudah dikelola, dan dapat dibagikan kepada seluruh tim. Ini bukan hanya tentang membuat desain lebih cepat, tetapi juga tentang memastikan konsistensi, mengurangi kesalahan, dan memfasilitasi kolaborasi. Figma adalah tool yang sempurna untuk memulai perjalanan ini, dan dengan praktik yang tepat, Anda akan siap untuk membangun produk digital yang luar biasa.