Jaman sekarang siapa yang tidak kenal dengan Figma, sebuah editor berbasis web maupun desktop yang memiliki banyak fungsi, seperti editor grafis, membuat prototype, UI design dll.
Berikut ini kami rangkum 20 trik menggunakan figma untuk mempermudah bahkan mempercepat pekerjaan anda, semoga bermanfaat.
1. Cara termudah membuat Progress Ring
Anda dapat membuat progress ring dengan mudah menggunakan Arc Tool yang terdapat pada figma.
2.Menggunakan Scale Tool untuk mencegah distorsi
Jaga piksel desain Anda tetap sempurna dengan Scale Tool, cukup pilih yang ingin Anda skalakan, lalu tekan K pada keyboard, seret, dan selesai.
3.Drag objek keluar dari frame namum menjaganya tetap didalam
Tahan spacebar sambil menyeret objek ke luar bingkai agar objek tetap berada di dalam wadah. Anda juga dapat menonaktifkan “konten klip” untuk bingkai yang berisi objek sehingga Anda masih dapat melihatnya saat berada di luar container – Anda juga dapat menekan CMD (CTRL) + Y untuk menampilkan garis outline.
4.Merapihkan, tukar posisi dan mengatur Grid
Rapikan desain Anda dengan mengklik ikon grid di sudut setelah memilih beberapa objek dalam satu array. Ini membuat semua jarak antar objek sama, dan Anda kemudian dapat menyeret objek untuk mengatur ulang dan menyesuaikan jaraknya.
5.Menduplikasi aksi terakhir
CMD + D untuk menduplikasi aksi/tindakan sebelumnya. CMD + D juga akan menduplikasi objek, frame, dan lainnya.
6.Pratinjau warna dengan Eyedropper
Ketika menggunakan Eyedropper (i), untuk mempratinjau berbagai warna, cukup tahan/hold tombol, bukan men-tap nya.
7.CMD + / Unlock semua objek
CMD + / memiliki banyak tindakan cepat berguna yang akan menghemat banyak waktu dalam alur kerja Anda. Jika Anda tidak menggunakannya, saya sangat menyarankan untuk melihat apa yang tersedia di menu. Tindakan yang sering saya gunakan adalah dengan cepat membuka kunci semua objek dan mengubah font.
Lanjutkan membaca di halaman berikutnya
8.Menambahkan gambar ke placeholder dengan mudah
CMD + Shift + K untuk mengganti isi dari shapes atau frames dengan beberapa gambar sekaligus.
9.Trik lainnya menggunakan Spacebar
Seret area seleksi lalu tahan spacebar untuk menambah ukuran pointer seleksi.
Jika Anda menggambar bentuk, Anda juga dapat menahan spacebar untuk memindahkan objek saat menggambarnya.
Dan jika itu belum cukup, Anda juga dapat menahan spacebar untuk membatalkan Figma dari nested object secara otomatis di dalam frame atau auto layout.
10.Memperbaiki tinggi baris dengan cepat
Jika tinggi baris Anda terlihat miring dan tidak memiliki nilai tertentu, cukup ketik “auto” ke dalam bidang tinggi baris atau hapus angka berapa pun yang ada di sana dan tekan enter dan ini akan menyesuaikan secara otomatis!
11.Breakpoints
Plugin breakpoints membuat desain Anda hampir identik dengan CSS flexbox tepat di file desain Anda. Dengan terlebih dahulu mendesain breakpoint yang berbeda untuk desain Anda, Anda kemudian dapat dengan mudah menyambungkannya ke bingkai adaptif dan melihatnya menyesuaikan secara ajaib saat Anda menyeret tepinya.
12.Menambahkan Tag Status pada Frame
Saat berkolaborasi dengan klien, stackholders, atau desainer lain di Figma, mungkin membingungkan untuk mengkomunikasikan status desain.
Akhirnya, plugin Frame Tags memungkinkan Anda menambahkan pembaruan status cepat ke frame sehingga tidak perlu menjelaskan kepada kolaborator lain. Pilih dari daftar status yang telah ditentukan sebelumnya atau buat status Anda sendiri!
13.Incignito
Jika Anda tidak ingin orang lain di file Figma Anda melihat desain yang sedang dalam proses, cukup putuskan sambungan dari Wi-Fi.Saya tahu ini tampak aneh, tetapi offline adalah satu-satunya cara untuk bekerja dalam file desain tanpa ada kursor lain yang mengintip Anda – ini juga merupakan bonus tambahan bahwa Anda tidak akan terganggu oleh aplikasi Chat maupun Sosmed lainnya.Pastikan untuk tidak menutup file Anda sebelum Anda terhubung kembali ke WiFi untuk menghindari kehilangan progress Anda. Anda juga dapat menyimpan versi offline (.fig) jika diperlukan karena Figma saat ini tidak menyimpan salinan lokal.
14.Hapus background sekali klik
Saya biasa menggunakan Photoshop dan menghabiskan waktu dengan pentool atau magic wand untuk menghapus latar belakang agar transparan – lupakan itu! Plugin Remove BG memungkinkan Anda melakukannya hanya dengan satu klik.
Lanjutkan membaca di halaman berikutnya
15.Membuat style dan komponen pribadi
Untuk mencegah Figma mempublikasikan gaya dan komponen Anda, Anda dapat menambahkan awalan ke nama komponen di panel layer.Menambahkan “.” atau “_” (misal “_Nama Component”) sebelum nama komponen dan Figma akan melewati gaya dan komponen ini selama proses penerbitan dan mencantumkannya di bagian “Pribadi ke file ini” dari panel Aset dan modal pustaka.
16.Chat didalam Figma
Apakah Anda juga meninggalkan teks di dalam file Figma untuk dilihat oleh teman desainer Anda yang lain? Ya, Anda masih bisa melakukannya tetapi solusi yang lebih canggih adalah plugin Figma Chat yang membuat jendela obrolan untuk Anda mengirim pesan ke rekan kerja Anda.
17.Shade warna apapun sekali klik
Saya biasanya mengunakan Material color tool untuk mendapatkan akses color shades namun kini juga mengunakan Color Shades plugin yang dapat membuat shades warna apapun dengan sekali klik.
18.Menambahkan Stroke ke sisi tertentu
Ini membuat saya frustrasi karena saya tidak dapat menentukan stroke hanya untuk satu sisi objek. Solusi saya untuk ini adalah dengan mengatur drop shadow, matikan blur lalu atur ke salah satu dari berikut ini:y: 1 (bawah)y: -1 (atas)x: 1 (kanan)x: -1 (kiri)Anda juga dapat mencampur dan mencocokkan nilai, y: 1 dan x -1 misalnya akan menjadi stroke di bagian bawah dan kanan. Dan tentu saja, Anda dapat meningkatkan nilai tersebut melebihi 1 jika ingin stroke yang lebih tebal.
19.Membulatkan ke bilangan bulat terdekat
Round >> All adalah plugin yang sangat berguna karena ukuran dalam Figma bukanlah bilangan bulat. Terutama ketika Anda menskalakan dengan alat skala (tekan K) yang tidak pernah tepat di bilangan bulat.Untuk memperbaikinya, tekan CMD (CTRL) + A untuk memilih semua artboards di file Anda lalu jalankan plugin Round >> All untuk kesempurnaan piksel.
20.Mebuat desain isometric dengan sekali klik
Hari gini banyak desainer yang menggunakan isometric design dalam portfolio mereka — penasaran bagaimana cara membuatnya? Sangat mudah, cukup gunakan Isometric plugin.
Demikianlah 20 Trik Figma yang telah kami rangkum, semoga dapat bermanfaat bagi Anda, silahkan bagikan jika berkenan, Terima Kasih.