Tutorial Figma dasar: Membuat frame dan shape

Anda baru saja membuka Figma, menatap kanvas kosong, dan bertanya-tanya, ‘Oke, sekarang bagaimana?’ Jangan khawatir! Hampir semua desainer pernah berada di posisi itu.

Memahami dasar-dasar seperti membuat frame dan shape adalah fondasi krusial yang akan membuka gerbang kreativitas Anda di Figma. Tanpa keduanya, desain apa pun tidak akan bisa dimulai.

Artikel ini akan menjadi panduan komprehensif Anda untuk menguasai “Tutorial Figma dasar: Membuat frame dan shape”, memastikan Anda memiliki landasan yang kokoh sebelum melangkah lebih jauh.

Dalam Figma, Frame adalah ibarat kanvas atau area kerja digital Anda. Ini adalah wadah tempat semua elemen desain Anda akan diletakkan dan diorganisir.

Sedangkan Shape adalah blok bangunan visual dasar: persegi, lingkaran, garis, dan bentuk geometris lainnya yang Anda gunakan untuk membentuk elemen desain.

Memahami Apa Itu Frame di Figma (Kanvas Fleksibel Anda)

Frame adalah fondasi dari setiap desain di Figma. Bayangkan Frame sebagai meja kerja khusus Anda, yang bisa Anda atur ukurannya, warnanya, dan bahkan cara kerja elemen di dalamnya.

Ini bukan sekadar grup biasa. Frame memiliki properti unik yang menjadikannya sangat powerful untuk workflow desain modern.

Mengapa Frame Begitu Penting?

Organisasi: Memungkinkan Anda mengelompokkan elemen desain secara logis. Misalnya, satu frame untuk satu layar aplikasi, satu lagi untuk komponen UI.
Prototyping: Frame adalah kunci untuk membuat interaksi dan alur pengguna. Anda bisa menghubungkan antar frame untuk simulasi navigasi atau animasi.
Responsivitas: Dengan Frame, Anda bisa mengatur “constraints” (batasan) pada elemen di dalamnya, membuatnya responsif terhadap perubahan ukuran frame. Ini penting untuk desain multi-platform.

Cara Membuat Frame Pertama Anda

Membuat Frame itu sangat mudah dan intuitif. Ikuti langkah-langkah berikut:

Klik ikon “Frame” di toolbar Figma, biasanya terlihat seperti simbol persegi (atau tekan tombol `F` pada keyboard Anda).
Setelah mengklik ikon, Anda akan melihat panel “Design” di sisi kanan menampilkan berbagai preset Frame. Anda bisa memilih ukuran standar untuk Desktop, Phone, Tablet, atau bahkan Wearables.
Atau, Anda bisa langsung mengklik dan menarik kursor di kanvas untuk menggambar Frame dengan ukuran manual sesuai keinginan Anda.

Contoh Praktis: Bayangkan Anda mendesain aplikasi mobile. Anda bisa membuat satu frame dengan preset “iPhone 13 Pro Max” untuk layar login, satu lagi untuk layar utama, dan seterusnya. Ini akan membuat alur kerja Anda sangat terstruktur dan mudah dikelola.

Menjelajahi Berbagai Bentuk Dasar (Shapes) di Figma

Shapes adalah blok bangunan visual fundamental dalam desain Anda. Dari ikon sederhana hingga ilustrasi yang rumit, hampir semuanya bermula dari bentuk-bentuk dasar ini.

Menguasai cara membuat dan memodifikasi Shapes adalah langkah pertama Anda untuk menghidupkan ide-ide visual.

Jenis-jenis Shape dan Cara Membuatnya

Figma menyediakan beberapa bentuk dasar yang sering digunakan:

Rectangle (Persegi/Persegi Panjang): Klik ikon persegi di toolbar (atau tekan `R`). Anda bisa menggambar bebas atau menentukan ukuran presisi.
Line (Garis): Tekan `L` pada keyboard atau pilih dari menu shape. Berguna untuk pemisah, penunjuk, atau elemen dekoratif.
Ellipse (Lingkaran/Oval): Tekan `O` atau pilih dari menu shape. Tahan tombol `Shift` saat menggambar untuk membuat lingkaran sempurna.
Polygon (Segi Banyak): Dari ikon menu shape, pilih “Polygon”. Anda bisa mengubah jumlah sisi (segitiga, segilima, dll.) di panel kanan.
Star (Bintang): Dari ikon menu shape, pilih “Star”. Anda bisa mengatur jumlah titik dan radius bintang di panel kanan.

Skenario Penggunaan: Anda ingin membuat tombol sederhana. Mulailah dengan Rectangle, lalu tambahkan teks di atasnya. Untuk ikon profil, Ellipse adalah permulaan yang bagus. Kemampuan dasar ini adalah kunci untuk merangkai elemen yang lebih kompleks.

Mengatur Properti Frame: Ukuran, Warna, dan Lebih Banyak Lagi

Setelah membuat frame, pekerjaan Anda belum selesai. Anda bisa menyesuaikan penampilannya dan perilakunya agar sesuai dengan kebutuhan desain spesifik Anda.

Semua properti ini dapat diakses dan dimodifikasi melalui panel “Design” di sisi kanan layar Figma.

Ukuran (Width & Height): Ubah nilai `W` (lebar) dan `H` (tinggi) untuk menyesuaikan dimensi frame Anda.
Posisi (X & Y): Angka ini menunjukkan letak frame di kanvas relatif terhadap sumbu X (horizontal) dan Y (vertikal).
Warna Latar Belakang (Fill): Klik kotak warna di bagian “Fill” untuk memilih warna solid, gradien, atau bahkan menggunakan gambar sebagai latar belakang frame.
Stroke (Garis Tepi): Tambahkan garis tepi di sekitar frame dengan mengklik `+` di bagian “Stroke”. Anda bisa mengatur ketebalan, warna, dan posisi garisnya.
Corner Radius (Radius Sudut): Memberikan nilai pada opsi ini akan membuat sudut frame Anda membulat, cocok untuk estetika desain modern.

Analogi: Bayangkan frame Anda adalah bingkai foto. Anda bisa mengubah ukuran bingkai, warnanya, bahkan ketebalan tepinya, semua di panel yang sama. Ini memberikan Anda kendali penuh atas “kanvas” Anda.

Memodifikasi Properti Shape: Warna, Border, Efek, dan Radius Sudut

Sama seperti frame, shapes juga sangat fleksibel untuk dikustomisasi. Inilah tempat Anda memberikan “kehidupan” pada bentuk dasar Anda, mengubahnya dari elemen generik menjadi bagian penting dari desain.

Setiap properti ini dapat ditemukan di panel “Design” saat shape terpilih.

Fill (Isian): Ubah warna yang mengisi bagian dalam shape. Anda bisa memilih warna solid, gradien (linear, radial, angular, diamond), bahkan mengisi dengan gambar atau video.
Stroke (Garis Tepi): Tambahkan garis di sekeliling shape. Anda bisa mengatur ketebalan, warna, dan tipe garis (solid, dashed), serta posisinya (inside, outside, center).
Corner Radius: Ubah sudut shape menjadi membulat. Ini adalah fitur kecil yang sangat penting untuk mencapai tampilan UI/UX yang lembut dan modern.
Effects (Efek): Tambahkan efek visual seperti Drop Shadow (bayangan jatuh), Inner Shadow (bayangan ke dalam), Layer Blur (blur pada objek), atau Background Blur (blur pada objek di belakangnya).
Opacity (Transparansi): Mengatur seberapa transparan shape Anda. Nilai 100% berarti solid, 0% berarti tidak terlihat.

Studi Kasus Singkat: Anda mendesain kartu produk untuk e-commerce. Sebuah Rectangle dengan `Corner Radius` 8px, `Fill` putih, dan `Drop Shadow` ringan akan langsung memberikan tampilan kartu yang elegan dan profesional. Detail kecil ini sangat membedakan hasil akhir.

Mengelola dan Mengatur Elemen dalam Frame (Constraint adalah Kunci!)

Salah satu fitur paling powerful dan sering diabaikan di Figma adalah “Constraints”. Fitur ini menentukan bagaimana elemen di dalam sebuah frame bereaksi saat frame tersebut diubah ukurannya.

Memahami Constraints akan menghemat waktu Anda secara signifikan dalam membuat desain yang responsif dan mudah diadaptasi.

Memahami Constraints

Ketika Anda memilih sebuah elemen di dalam frame, Anda akan melihat bagian “Constraints” di panel “Design” kanan. Ini adalah pengaturannya:

Left & Top (Default): Elemen akan tetap menempel ke sisi kiri dan atas frame, menjaga jarak yang sama dari kedua sisi tersebut.
Right & Bottom: Elemen akan menempel ke sisi kanan dan bawah frame.
Center: Elemen akan tetap berada di tengah secara horizontal atau vertikal relatif terhadap frame.
Scale: Elemen akan ikut menyesuaikan ukurannya (scaling) saat frame diubah ukurannya. Lebar dan tinggi elemen akan ikut membesar atau mengecil.
Left & Right / Top & Bottom: Elemen akan menjaga jarak yang sama dari kedua sisi tersebut, sehingga lebarnya (jika Left & Right) atau tingginya (jika Top & Bottom) akan menyesuaikan.

Pengalaman Nyata: Bayangkan Anda menempatkan tombol “Login” di bagian bawah frame aplikasi mobile. Jika Anda set “Constraints” ke “Left & Right” dan “Bottom”, tombol akan otomatis menyesuaikan lebarnya dan tetap menempel di bagian bawah, meskipun ukuran frame layarnya berubah (misal dari iPhone 13 ke iPhone SE). Ini adalah penyelamat waktu dalam prototyping!

Tips Praktis Menguasai Frame dan Shape di Figma

Memahami teori adalah satu hal, namun mempraktikkannya dengan efektif adalah kunci. Berikut adalah beberapa tips praktis dari kami untuk membantu Anda menguasai frame dan shape di Figma:

Gunakan Shortcut Keyboard: Hafalkan `F` untuk Frame, `R` untuk Rectangle, `O` untuk Ellipse, dan `L` untuk Line. Ini akan sangat meningkatkan kecepatan kerja Anda.
Eksplorasi Preset Frame: Jangan selalu menggambar manual. Preset Figma untuk berbagai perangkat (Desktop, Mobile) menghemat waktu dan memastikan ukuran standar yang akurat.
Manfaatkan Corner Radius: Jangan takut membulatkan sudut frame atau shape Anda. Ini adalah tren desain modern yang mudah diterapkan dan membuat desain terlihat lebih ramah.
Pahami Constraints Sejak Awal: Investasikan waktu untuk memahami bagaimana elemen berinteraksi dalam frame. Ini akan sangat membantu Anda dalam membuat desain responsif dan mengurangi revisi di kemudian hari.
Latih dengan Proyek Kecil: Coba buat kartu nama digital, icon sederhana, atau layout bagian dari landing page hanya dengan frame dan shape. Ini adalah cara terbaik untuk mengasah keterampilan dasar Anda.
Eksperimen dengan Properti: Jangan takut mencoba berbagai `Fill`, `Stroke`, dan `Effect`. Kreativitas sering kali bermula dari eksplorasi dan mencoba hal baru.

FAQ Seputar Tutorial Figma dasar: Membuat frame dan shape

Apa perbedaan antara Frame dan Group di Figma?

Frame adalah kanvas atau area kerja yang memiliki properti desain sendiri (ukuran, warna, constraints) dan sangat fungsional untuk prototyping. Sedangkan Group hanyalah pengelompokan objek tanpa properti independen yang kuat seperti frame. Frame lebih powerful untuk organisasi dan adaptasi desain.

Bisakah saya membuat bentuk kustom selain bentuk dasar yang ada?

Tentu! Anda bisa menggabungkan beberapa bentuk dasar menggunakan operasi Boolean (Union, Subtract, Intersect, Exclude) untuk membuat bentuk kompleks. Anda juga bisa menggunakan Pen Tool (`P`) untuk menggambar bentuk bebas atau mengedit vektor dari shape dasar untuk modifikasi lebih lanjut.

Bagaimana cara memastikan semua elemen di dalam frame saya tetap responsif?

Kuncinya ada pada fitur “Constraints”. Pilih setiap elemen di dalam frame dan atur “Constraints” yang sesuai di panel “Design” (misal: “Left & Right” untuk lebar elemen, “Top” atau “Bottom” untuk posisi vertikal). Latih diri Anda untuk memvisualisasikan bagaimana elemen akan bereaksi terhadap perubahan ukuran frame.

Saya tidak bisa melihat warna latar belakang frame saya, mengapa?

Pastikan Anda telah memilih frame yang benar (bukan kanvas kosong atau objek lain) dan periksa bagian “Fill” di panel “Design” kanan. Pastikan ada warna yang dipilih dan nilai opacity (persentase di samping kode warna) tidak diatur ke 0% (transparan penuh).

Apakah ada batasan jumlah frame yang bisa saya gunakan dalam satu halaman Figma?

Secara teknis tidak ada batasan jumlah frame yang ketat, tetapi disarankan untuk menjaga jumlah frame tetap terkelola dengan baik. Untuk proyek besar atau kompleks, Anda bisa memisahkan desain ke dalam beberapa halaman Figma yang berbeda agar lebih terorganisir dan menjaga performa file tetap optimal.

Selamat! Anda telah menelusuri dasar-dasar krusial di Figma: membuat dan mengelola frame serta shape. Ini adalah fondasi yang kokoh untuk petualangan desain Anda.

Dengan memahami bagaimana frame berfungsi sebagai kanvas yang terorganisir dan shape sebagai blok bangunan visual, Anda kini memiliki kontrol penuh atas struktur dan elemen dasar kreasi Anda.

Jangan hanya membaca, praktikkan setiap langkahnya. Buka Figma sekarang, dan mulailah bereksperimen. Buat frame pertama Anda, lalu isi dengan berbagai shape. Dari sana, dunia desain Anda di Figma akan terbuka lebar untuk dieksplorasi!