Setelah berhasil membuat proyek pertamamu, saatnya kita menyelam lebih dalam ke dalam Figma Design File. Memahami elemen-elemen dasarnya adalah kunci untuk membangun desain yang terstruktur dan efisien.

Memahami Frame

Dalam Figma, Frame adalah fondasi utama dari setiap desain. Kamu bisa menganggapnya sebagai artboard atau kanvas yang menampung semua elemen desainmu. Setiap halaman, layar, atau component harus berada di dalam sebuah Frame.

Cara Membuat Frame

1. Pilih Frame Tool (F) dari toolbar.
2. Klik dan seret di kanvas, atau pilih ukuran preset di panel kanan, seperti “Desktop” atau “Phone”.

Kamu bisa menamai Frame dengan mengeklik namanya di Layers panel (sisi kiri) atau langsung di atas Frame itu sendiri. Penamaan yang jelas, seperti “Homepage Desktop” atau “Mobile Login Page”, akan sangat membantu dalam mengelola proyek yang besar.

Mengenal Shapes dan Text

Shapes dan Text adalah elemen dasar yang membentuk desainmu.

• Shapes: Untuk membuat bentuk dasar seperti persegi (R), lingkaran (O), atau panah. Kamu bisa mengubah ukurannya dengan menyeret sudut, dan propertinya di panel kanan.
• Text: Untuk menambahkan tulisan. Gunakan Text Tool (T) dan klik di mana saja di dalam Frame.

Properti Dasar

Saat kamu memilih sebuah Shape atau Text, panel kanan (Properties panel) akan menampilkan banyak opsi untuk kustomisasi:

• Fill: Mengatur warna latar belakang. Kamu bisa menggunakan warna solid, gradien, atau bahkan gambar.
• Stroke: Menambahkan garis tepi pada objek. Kamu bisa menyesuaikan warna, ketebalan, dan posisinya.
• Effect: Menambahkan efek visual seperti drop shadow (bayangan), inner shadow, atau layer blur.
• Export: Menyiapkan aset untuk diekspor ke format seperti PNG, JPEG, atau SVG.

Mengelola dengan Layers dan Groups

Saat desainmu mulai kompleks, mengelola Layers dan Groups menjadi sangat penting.

• Layers: Setiap objek yang kamu tambahkan (Frame, Shape, atau Text) akan muncul sebagai layer baru di panel kiri. Urutan layer menentukan urutan tampilan objek di kanvas (yang di atas akan terlihat di depan). Kamu bisa mengubah urutan dengan menyeret layer atau menggunakan shortcut: [Ctrl/Cmd + [ ] dan [Ctrl/Cmd + ]].
• Groups: Untuk mengorganisir objek-objek yang berkaitan. Pilih beberapa objek, lalu klik kanan dan pilih Group Selection (Ctrl/Cmd + G). Ini akan menyatukan mereka menjadi satu entitas. Group sangat berguna untuk memindahkan atau mengubah ukuran beberapa objek sekaligus tanpa mengubah posisinya relatif satu sama lain.

Mempercepat Alur Kerja: Shortcut dan Plugin

• Shortcut: Menguasai shortcut keyboard adalah cara tercepat untuk meningkatkan produktivitas. Beberapa yang paling sering digunakan adalah:
  • V: Move Tool
  • F: Frame Tool
  • T: Text Tool
  • R: Rectangle Tool
  • Shift + V: Flip Horizontal
• Plugin: Figma memiliki ekosistem plugin yang luas. Plugin adalah alat tambahan yang dibuat oleh komunitas untuk memperluas fungsionalitas Figma. Kamu bisa mencari dan menginstal plugin untuk berbagai kebutuhan, seperti Unsplash untuk gambar gratis, Iconify untuk ikon, atau Remove BG untuk menghapus latar belakang.

Cara Menginstal Plugin

1. Klik logo Figma di pojok kiri atas, lalu pilih Plugins > Find more plugins.
2. Cari plugin yang kamu butuhkan dan klik Install.

Kesimpulan

Selamat, kamu sudah menguasai dasar-dasar Figma Design File! Dengan memahami Frame, mengelola Layers, dan memanfaatkan Shortcut, kamu sudah berada di jalur yang benar untuk membuat desain yang terorganisir dan efisien.