7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Figma

Tips Figma Frame

Scroll to top
Read Time: 2 mins
This post is part of a series called Figma Tips and Tricks.
Figma On Canvas Tips
Figma Project, Page & Artboard Tips

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.

Drawing frames around objects in FigmaDrawing frames around objects in FigmaDrawing frames around objects in Figma

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 toolscaling Figma frame contents with the scale toolscaling 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 panelResultant behavior from the Figma constraints panelResultant 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 documentMultiple constraints selected in a Figma documentMultiple 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:

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

First Order UIUX ToolFirst Order UIUX ToolFirst Order UIUX Tool
UI Pesanan Pertama/UX Tool

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.