Tips Figma Frame | Envato Tuts+

Indonesian (Bahasa Indonesia) translation by Riska Aprianti (you can also view the original English article)

Frame memungkinkan Anda menggabungkan lapisan bersama di bawah induk tunggal. Tidak seperti grup, frame dalam Figma telah secara eksplisit mengatur dimensi (mirip dengan iframe HTML). Berikut ini beberapa tips dan trik hebat untuk saat Anda bekerja dengan frame.

Tips Tontonan

1. Sarang Benda dengan Menggambar Bingkai di Sekitar Mereka

Gunakan Frame tool (F) untuk menggambar bingkai di sekitar sejumlah besar objek pada kanvas Anda; mereka akan langsung menjadi objek anak bingkai, tanpa Anda perlu menyeret dan menjatuhkannya secara manual ke bingkai baru.

2. “Resize to Fit” Bingkai Secara Instan

Setelah Anda memiliki bingkai di sekitar sekelompok objek, Anda dapat menekan tombol Resize to Fit untuk membuat bingkai membungkus dengan rapat di seluruh grup.

3. Cara Mengukur Bingkai dan Kandungannya

Secara default, jika Anda mengubah ukuran bingkai, isinya tidak akan terpengaruh (tetapi dipotong). Namun jika Anda ingin menskalakan isinya juga, ambil Scale Tool (K) dan ubah ukuran frame; semua isi akan diubah ukurannya bersamaan dengan itu.

scaling Figma frame contents with the scale tool

4. Gunakan Batasan pada Isi Bingkai

Anda dapat menggunakan batasan untuk mengontrol bagaimana perilaku objek anak ketika bingkai induknya diubah ukurannya. Secara default, jika Anda mengubah ukuran bingkai dengan menyeret pegangan sudut kiri bawah, semua konten akan tetap diposisikan di tempat yang sama, relatif ke sudut kanan atas. Namun, dengan memilih objek anak dan mengubah nilainya di panel Constraints. Anda dapat membuatnya melekat ke tepi atau sudut mana pun yang Anda inginkan.

Resultant behavior from the Figma constraints panel

5. Memilih beberapa Constraints

Anda dapat memilih constraints di semua sisi objek jika Anda menginginkannya; jadi alih-alih objek anak yang menempel di pojok, atau satu sisi, ia dapat menempel ke keempat sisi bingkai induk, secara efektif merentangkannya ke segala arah.

Multiple constraints selected in a Figma document

Sumber Belajar Figma

Itu adalah beberapa tips cepat untuk bekerja dengan bingkai di Figma. Untuk lebih banyak lagi lihat rangkaian program kita:

Kiat topi ke Carmel DeAmicis dan Valerie Veteto untuk ringkasan kiat komunitas biasa mereka — pergi dan lihat mereka!
blog.figma.com
www.figma.com
Grup & bingkai: Figma Dokumen

Kit UI yang digunakan dalam tutorial ini sepenuhnya kompatibel dengan Figma dan tersedia dari Envato Elements:

First Order UIUX Tool — UI Pesanan Pertama/UX Tool