Figma for UI/UX Design Series from UI-UX Research and Design Path MySkill.id
Figma adalah salah satu tools desain UI/UX yang populer di kalangan desainer, dan salah satu fitur yang sangat berguna dalam platform ini adalah Variants dan Auto Layout. Pada topik kali ini, kita akan membahas tentang apa itu Variants dan Auto Layout dalam Figma, serta cara membuat Variants dan Auto Layout pada Figma.
Apa itu Variants dalam Figma?
Variants adalah fitur dalam Figma yang memungkinkan desainer untuk membuat dan mengelola variasi dari elemen desain, seperti tombol, ikon, atau elemen UI lainnya dalam satu komponen. Dengan Variants, UI/UX desainer dapat membuat variasi dari komponen yang sama tanpa perlu membuat komponen baru setiap kali ada perubahan.
Contoh sederhana penggunaan Variants adalah pada tombol. Kita dapat membuat satu komponen tombol dan kemudian membuat variasi dari tombol tersebut dengan berbagai tampilan, seperti tombol primer, tombol sekunder, tombol berukuran besar, dan lain sebagainya. Semua variasi ini dapat diatur dan dimodifikasi dengan mudah melalui Variants.
Keuntungan Penggunaan Variants
- Efisiensi Desain. Dengan Variants, UI/UX desainer dapat menghemat waktu dan upaya dalam membuat variasi elemen desain. Ini sangat bermanfaat ketika ada banyak elemen yang perlu diterapkan secara konsisten dalam proyek desain.
- Kemudahan Pengeditan. Ketika ada perubahan dalam desain, seperti perubahan warna tema atau gaya desain, Kita hanya perlu mengubah Variants induk, dan perubahan tersebut akan secara otomatis diterapkan pada semua variasi komponen yang terkait.
- Konsistensi Desain. Variants membantu memastikan konsistensi desain di seluruh proyek. Semua variasi komponen akan selalu sinkron dengan komponen induk, sehingga mengurangi risiko adanya ketidaksesuaian dalam desain.
- Navigasi yang Lebih Mudah. Dalam tampilan desain Figma, kita dapat dengan mudah beralih antara variasi Variants untuk melihat perbedaan dan kesamaan di antara mereka, sehingga memudahkan pengujian dan pengembangan desain.
Apa itu Auto Layout dalam Figma?
Auto Layout adalah fitur dalam Figma yang dirancang untuk membantu UI/UX desainer dalam mengatur dan mengelola elemen-elemen UI dengan lebih efisien. Fitur ini memungkinkan elemen-elemen seperti teks, gambar, tombol, dan kotak untuk disusun secara otomatis berdasarkan aturan yang ditentukan, sehingga memungkinkan perubahan konten dan ukuran dengan mudah tanpa mengganggu tata letak (layout) keseluruhan.
Keuntungan Penggunaan Auto Layout
- Fleksibilitas Desain. Auto Layout memungkinkan elemen-elemen desain untuk beradaptasi dengan konten. Jika teksnya lebih panjang atau lebih pendek, elemen akan tetap teratur tanpa perlu penyesuaian manual.
- Mempercepat Proses. Fitur ini menghemat waktu karena kita tidak perlu melakukan perubahan manual pada layout setiap kali ada perubahan konten.
- Mengurangi Kesalahan. Dengan Auto Layout, risiko kesalahan manusia dalam layout desain berkurang karena layout secara otomatis disesuaikan.
- Konsistensi Desain. Kita dapat dengan mudah membuat komponen yang seragam dan konsisten dalam desain, seperti daftar item dengan ukuran yang sama atau tombol dengan margin yang serupa.
- Optimasi Responsif. Auto Layout sangat berguna dalam desain responsif, di mana elemen-elemen harus berubah sesuai dengan ukuran layar yang berbeda.
Cara Membuat Variants dalam Figma
Langkah 1: Buka Figma dan Buka Proyek Desain
Pastikan kita sudah masuk ke akun Figma dan membuka proyek desain yang ingin kita tambahkan Variants-nya.
Langkah 2: Buat atau Pilih Komponen Dasar
Kita dapat memulai dengan membuat komponen dasar yang nantinya akan diubah menjadi Variants atau memilih komponen yang sudah ada dalam proyek. Untuk membuat komponen baru, lakukan langkah berikut:
- Klik tools “Frame” atau “Rectangle” di toolbar Figma untuk membuat wadah untuk komponen, seperti tombol atau ikon.
- Tambahkan elemen-elemen seperti teks, gambar, atau bentuk ke dalam wadah tersebut. Pastikan ini akan menjadi komponen dasar yang akan kita variasikan.
Langkah 3: Aktifkan Variants
Setelah kita memiliki komponen dasar, selanjutnya adalah mengaktifkan Variants untuk komponen tersebut:
- Pilih komponen yang ingin kita ubah menjadi Variants.
- Di panel “Properties” di sebelah kanan layar, cari ikon “Variants” yang terlihat seperti kotak dengan panah di atasnya. Klik ikon ini.
- Kita akan melihat panel Variants muncul di sebelah kanan layar.
Langkah 4: Buat Variants
Sekarang, kita siap untuk membuat variasi dari komponen tersebut:
- Klik tombol “Create Variant” di dalam panel Variants. Ini akan membuat variasi pertama.
- Beri nama variasi tersebut. Misalnya, jika kita membuat Variants untuk tombol, kita dapat memberinya nama seperti “Tombol Primer” atau “Tombol Sekunder.”
- Sesuaikan variasi tersebut sesuai kebutuhan. Kita dapat mengubah atribut seperti warna, ukuran, teks, dan lain-lain.
- Klik “Create” untuk menyimpan variasi tersebut.
Langkah 5: Tambahkan Variasi Lain (Opsional)
Jika kita ingin membuat variasi tambahan, kita dapat mengulangi langkah-langkah di atas dengan mengklik “Create Variant” lagi dan memberi nama serta mengubah atribut sesuai dengan variasi yang diinginkan.
Langkah 6: Gunakan Variants dalam Desain
Setelah membuat Variants, kita dapat dengan mudah menggunakannya dalam desain:
- Tarik dan letakkan variasi yang diinginkan ke dalam frame atau canvas.
- Variants akan tampil sebagai komponen independen di dalam desain, dan kita dapat mengedit atau menggantinya sesuai kebutuhan.
- Ketika ada perubahan yang perlu dilakukan pada semua variasi, kita dapat mengedit Variants induk, dan perubahan tersebut akan secara otomatis diterapkan pada semua variasi yang terkait.
Cara Membuat Auto Layout dalam Figma
Langkah 1: Buka Proyek Figma
Pastikan kira sudah masuk ke akun Figma dan membuka proyek desain yang ingin ditambahkan Auto Layout-nya.
Langkah 2: Pilih Elemen yang Akan Ditempatkan dalam Auto Layout
Pilih elemen-elemen yang ingin kita susun dalam Auto Layout. Ini bisa berupa teks, gambar, tombol, atau elemen lainnya yang ingin kita tata dengan lebih baik.
Langkah 3: Aktifkan Auto Layout
Setelah elemen-elemen yang ingin kita susun dipilih, aktifkan Auto Layout dengan mengikuti langkah-langkah ini:
- Pilih elemen-elemen tersebut.
- Di panel “Properties” di sebelah kanan layar, cari opsi “Auto Layout.” Kita akan melihat ikon Auto Layout yang terlihat seperti ikon kotak dengan panah.
- Klik ikon Auto Layout untuk mengaktifkannya.
Langkah 4: Sesuaikan Aturan Auto Layout
Setelah Auto Layout diaktifkan, kita perlu mengatur aturan tata letak sesuai kebutuhan:
- Kita dapat memilih apakah elemen-elemen akan tersusun secara horizontal atau vertikal. Kita dapat mengubahnya dengan mengklik ikon panah di atas panel Auto Layout.
- Kita dapat menentukan jarak antara elemen-elemen dengan mengatur “Spacing” di dalam panel Auto Layout.
- Kita juga dapat mengatur distribusi elemen-elemen, seperti rata tengah (centered) atau meratakan (spread) elemen-elemen di dalam Auto Layout.
Langkah 5: Edit Konten Elemen
Sekarang, kita dapat mengedit konten elemen-elemen dalam Auto Layout dengan bebas. Ketika kita menambahkan atau menghapus konten atau mengubah ukuran elemen, Auto Layout akan secara otomatis menyesuaikan tata letaknya sesuai dengan aturan yang telah kita tentukan.
Langkah 6: Responsif dan Konstrain (Opsional)
Jika kita ingin elemen-elemen dalam Auto Layout meresponsif terhadap ukuran layar yang berbeda, kita dapat menambahkan konstrain atau mengatur cara elemen-elemen tersebut berubah saat layar berukuran berbeda.
- Kita dapat mengaktifkan “Constraints” di panel Auto Layout untuk mengatur bagaimana elemen-elemen tersebut merespons saat layar berubah.
- Kita dapat menambahkan “Breakpoints” untuk mengendalikan tata letak elemen-elemen di berbagai ukuran layar.
Langkah 7: Simpan dan Gunakan Auto Layout
Setelah berhasil membuat Auto Layout, pastikan untuk menyimpan perubahan tersebut. Kita dapat menarik dan meletakkan elemen-elemen dalam Auto Layout ke dalam frame atau canvas sesuai kebutuhan.
Learn more via: https://myskill.id/course/variants-autolayout.
