Selamat Datang di Dunia Mahir Antarmuka Figma!

Pengantar

Mari bersama-sama menjelajahi dunia menarik Figma! Dalam panduan ini, kita akan memahami dasar-dasar Figma untuk membantu Anda memulai membuat antarmuka yang memukau untuk berbagai platform.

1. Frames: Membentuk Kanvas Desain Anda 🖼️

• Custom Size: Kita mulai dengan Frame sebagai elemen dasar atau wadah untuk desain kita. Gunakan Custom Size untuk membuat frame dengan ukuran yang diinginkan.

Shortcut atau Icon Frame pada navbar

Frame Custom Size

• Preset Size: Pilih ukuran bingkai dari preset yang telah disediakan oleh Figma, seperti hp,desktop,tablet dll.

2. Constraints: Tarian Presisi 💃

Selanjutnya, mari memahami Constraints. Constraints memastikan elemen yang Anda buat tetap pada posisi yang ditetapkan, bahkan saat elemen tersebut diubah ukurannya.

• Left and Top: Mempertahankan posisi objek relatif terhadap sisi kiri dan atas frame.

• Right and Bottom: Mempertahankan posisi objek relatif terhadap sisi kanan dan bawah bingkai.

• Left & Right and Top & Bottom: Mempertahankan ukuran dan posisi objek relatif ke kiri, kanan, atas, dan bawah.

• Center: Mempertahankan posisi objek relatif terhadap pusat horizontal dan vertikal frame.

3. Components: Meningkatkan Konsistensi Desain 🔧

Components memungkinkan desain lebih konsisten dan memberikan fleksibilitas. Komponen yang sudah diduplikasi dapat dimodifikasi tanpa mengubah komponen utama.

• Membuat Komponen: Pilih layer yang ingin dijadikan Komponen Utama dan klik tombol create component atau klik kanan untuk membuat komponen baru.

• Panel Aset: Panel Aset akan menyimpan semua komponen yang telah dibuat. Cukup seret dan lepas aset untuk menggunakan komponen yang telah dibuat.

4. Styles: Menciptakan Keselarasan Desain 🎨

Styles memungkinkan Anda menentukan properti seperti warna dan font yang dapat digunakan kembali pada desain.

• Membuat Gaya Warna: Pilih objek, klik ikon Styles di panel Properties, dan tambahkan gaya warna.

• Membuat Gaya Teks: Pilih teks, klik ikon Styles, dan tambahkan gaya teks.

5. Exporting: Berbagi Desain Anda dengan Dunia 🌐

Figma mendukung ekspor dalam format PNG, JPG, SVG, dan PDF dan juga Saat menggunakan Figma di browser, ekspor akan secara otomatis disimpan ke folder unduhan default. jika ekspor menggunakan aplikasi desktop Figma untuk memilih tempat menyimpan. Berikut cara ekspor desain Anda:

• Pilih Elemen untuk Diekspor: Pilih elemen desain, mulai dari layer atau objek tunggal hingga seluruh frame.

• Terapkan Pengaturan Ekspor: Sesuaikan pengaturan ekspor sesuai kebutuhan Anda PNG, JPG, SVG, atau PDF.

• Ekspor: Setelah pengaturan ekspor diterapkan ke pilihan, pemilihan itu akan dicatat dalam daftar Ekspor. kemudian dapat mengekspor pilihan dengan Cari “ekspor” di menu.

Apa Selanjutnya?

Sekarang, setelah menguasai antarmuka Figma, petualangan berikutnya menanti! Bergabunglah dengan kami saat menjelajahi plugin-plugin penting yang akan meningkatkan pengalaman desain Figma Anda.

Selanjutnya: Mari Jelajahi Plugin Penting Figma! 🚀