Advertisement
  1. Web Design
  2. Figma

Tips Layout Figma

by
Read Time:2 minsLanguages:
This post is part of a series called Figma Tips and Tricks.
Figma Component Tips
Figma Handoff and Testing Tips

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Ketika bekerja dengan layout di Figma (yang akan sering) Anda akan perlu untuk merasa nyaman dengan ukuran, pengukuran, spasi, keselarasan, dan masking. Berikut adalah lima tips untuk membantu Anda keluar!

Tonton Tips

1. Bentuk Miring Untuk Mengubah Ukuran Isometrik Mudah

Jika Anda bekerja dengan ilustrasi isometrik dalam Figma, ada cara yang bagus untuk mengubah bentuk dan membantu mengubah ukuran berbagai hal secara lebih intuitif. Untuk melakukannya, ambil objek (misalnya, persegi) dan putar 45 ° - tahan SHIFT dan seret sudut untuk secara bertahap memutarnya.

Untuk menekan persegi ini, Anda harus mengelompokkannya (dengan sendirinya), mengatur ulang kotak batas secara efektif dalam proses. Sekarang ketika Anda memilihnya, Anda akan bisa meratakannya pada sumbu X dan Y.

Untuk mengubah dimensi sementara tetap setia pada garis isometriknya, hapus grup itu, lalu ubah ukurannya dengan handles.

Skew Shapes For Easy Isometric ResizingSkew Shapes For Easy Isometric ResizingSkew Shapes For Easy Isometric Resizing

2. Tata Letak Kolom

Anda dapat dengan cepat menghasilkan tata letak kolom dengan menggunakan gertakan dan distribusi. Misalnya, pasang dua kotak ke sisi artboard, lalu dorong masing-masing sedikit ke dalam. Tambahkan beberapa bentuk lain di antara mereka, lalu pilih seluruh lot dan buka Menu Main menu > Arrange > Distribute Horizontal Spacing. Bingo! Layout kolom yang sempurna untuk bekerja.

Quick Column Layouts in FigmaQuick Column Layouts in FigmaQuick Column Layouts in Figma

3. Menghapus Spasi Antar Item

Dimungkinkan untuk dengan cepat menghapus semua ruang antara serangkaian objek. Pilih objek yang dimaksud, lalu buka Main menu > Arrange > Pack Horizontal untuk menyingkirkan semua ruang horizontal. Hal yang sama juga dimungkinkan secara vertikal, dengan masuk ke Main menu > Arrange > Pack Vertical.

Gabungkan opsi-opsi ini dengan alignment tool untuk membantu Anda membuat tata letak berbasis baris dan kolom.

Remove Space Between Items in FigmaRemove Space Between Items in FigmaRemove Space Between Items in Figma

4. Buat Alignment Ekstra Tepat

Anda bisa mendapatkan bantuan dengan menyelaraskan objek dengan tepat dengan memastikan rulers dihidupkan (SHIFT + R) dan kemudian ketika Anda memindahkan bentuk di sekitar Anda akan melihat lebar dan tingginya diwakili dalam rulers.

Make Alignment Extra Precise with rulers in FigmaMake Alignment Extra Precise with rulers in FigmaMake Alignment Extra Precise with rulers in Figma
Lihat pembuat biru itu di rulers?

5. Membuat Masks dengan Cepat

Untuk membuat mask dengan sangat cepat di Figma, klik kanan objek dan pilih Use Mask. Namun, perlu diketahui bahwa Anda memerlukan objek masking untuk dikelompokkan dengan objek yang ingin Anda maskingkan.

Create Masks Quickly in figmaCreate Masks Quickly in figmaCreate Masks Quickly in figma

Sumber Belajar Figma

Kiat-kiat itu seharusnya membantu Anda dalam tata letak di Figma, tetapi untuk membawa hal-hal ke tingkat berikutnya, kami memiliki serangkaian kursus mendalam tentang Tuts +:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.