Siapa sih yang tidak tau Figma? Figma adalah sebuah aplikasi berbasis web yang digunakan untuk desain antarmuka (UI/UX) dan kolaborasi desain secara real-time. Figma memungkinkan desainer untuk membuat prototipe, wireframe, dan desain antarmuka visual untuk aplikasi web dan mobile. Nah, untuk meningkatkan pengalaman menggunakan Figma, kalian dapat menggunakan beberapa tips berikut ini.
1. Auto Layout untuk Pengaturan Elemen yang Dinamis
Fungsi: Auto Layout memungkinkan kamu untuk mengatur elemen secara otomatis dan responsif, mirip seperti Flexbox dalam CSS.
Tips: Gunakan Auto Layout untuk tombol, kartu, atau elemen-elemen UI lainnya yang perlu menyesuaikan ukurannya secara dinamis berdasarkan konten. Kamu bisa mengatur padding, jarak antar elemen, dan responsivitas terhadap perubahan ukuran frame.
Shortcut: Pilih beberapa objek, lalu tekan Shift + A untuk membuat Auto Layout.
2. Smart Selection untuk Penataan Cepat
Fungsi: Saat kamu memilih beberapa objek, Figma memungkinkan untuk menyusun ulang mereka dengan "Smart Selection."
Tips: Kamu dapat menambahkan atau menghapus padding di antara elemen yang dipilih secara merata. Ini sangat membantu untuk menata komponen secara rapi.
Shortcut: Pilih beberapa elemen lalu gunakan Tidy Up (klik kanan → Tidy Up atau Shift + Option + T di macOS atau Shift + Alt + T di Windows).
3. Variants untuk Desain Sistem yang Konsisten
Fungsi: Variants memungkinkan kamu membuat komponen dengan beberapa variasi (misalnya, berbagai jenis tombol: aktif, nonaktif, hover).
Tips: Gunakan Variants untuk mengelola elemen UI yang memiliki beberapa keadaan berbeda. Ini akan menghemat banyak waktu karena kamu bisa mengganti antar varian dengan mudah tanpa membuat elemen baru dari awal.
Cara Penggunaan: Pilih sebuah komponen, lalu klik kanan dan pilih Combine as Variants.
4. Penggunaan Plugin untuk Menambah Fitur
5. Komponen yang Bisa Digunakan Kembali (Reusable Components)
Fungsi: Kamu bisa membuat komponen yang bisa digunakan ulang di seluruh proyekmu.
Tips: Gunakan fitur komponen untuk elemen UI yang sering dipakai seperti tombol, kartu, input form, dll. Jika komponen tersebut diubah, semua instance-nya di seluruh file juga akan otomatis diperbarui.
Shortcut: Pilih elemen dan tekan Ctrl + Alt + K (Windows) atau Cmd + Option + K (macOS) untuk membuat komponen.
6. Quick Actions untuk Akses Cepat ke Fitur
Fungsi: Quick Actions memungkinkan kamu melakukan perintah atau membuka fitur dengan cepat.
Tips: Alih-alih menavigasi menu, gunakan Quick Actions untuk mencari dan mengeksekusi fitur dengan cepat.
Shortcut: Tekan Ctrl + / (Windows) atau Cmd + / (macOS), kemudian ketik nama perintah yang ingin dijalankan.
7. Masking Sederhana dengan Drag-and-Drop
Fungsi: Masking dapat digunakan untuk menyembunyikan atau memperlihatkan bagian tertentu dari elemen.
Tips: Kamu dapat menggunakan frame atau bentuk apapun sebagai mask. Tarik gambar ke dalam shape yang diinginkan, dan otomatis Figma akan melakukan masking.
Cara Penggunaan: Pilih elemen yang ingin dimask dan objek penutupnya, lalu tekan Ctrl + Alt + M (Windows) atau Cmd + Option + M (macOS).
8. Mode Presentasi untuk Memeriksa Hasil Desain
Fungsi: Figma memungkinkan kamu untuk melihat hasil desain dalam mode presentasi langsung di browser.
Tips: Gunakan ini untuk memperlihatkan prototipe interaktif ke klien atau tim dengan lebih mudah tanpa harus mempersiapkan dokumen terpisah.
9. Grid dan Constraints untuk Layout yang Lebih Akurat
Fungsi: Grid dan constraints membantu menjaga keselarasan desain dan memastikan elemen-elemen tetap proporsional dalam berbagai ukuran layar.
Tips: Aktifkan grid (Ctrl + G / Cmd + G) untuk membantu pengaturan elemen lebih rapi. Gunakan constraints untuk mengatur apakah elemen harus tetap di posisi relatif saat ukuran frame berubah.
10. Menyembunyikan dan Menampilkan Semua Layer atau Elemen
Fungsi: Kamu bisa dengan cepat menyembunyikan semua layer selain yang sedang dipilih untuk fokus pada bagian tertentu.
Shortcut: Pilih layer yang ingin kamu pertahankan, lalu tekan Alt + L (Windows) atau Option + L (macOS) untuk menyembunyikan layer lainnya.
Tips-tips ini dapat membantu menghemat waktu, menjaga konsistensi, dan mengoptimalkan alur kerja desainmu di Figma. Sekian informasi kali ini, semoga bermanfaat
Thankyou and have a nice day.
Source:
