-
Untuk mengatur urutan dan jarak komponen dengan mudah, kita akan menggunakan salah satu fitur unggulan dari Figma, yakni Auto Layout. Caranya, pilih elemen yang ingin diatur kemudian klik ikon tambah (+) pada properti Auto Layout atau bisa juga dengan klik kanan dan pilih Add auto layout (Shift+A).
Dengan menggunakan Auto Layout, Anda dapat mengatur beberapa hal berikut:- Mengatur orientasi komponen, apakah horizontal atau vertikal dengan mudah.
- Mengatur jarak margin antar elemen.
- Mengatur jarak padding yang ada di dalam Auto Layout.
- Mengatur alignment pada suatu konten.
- Mengubah urutan dan menambahkan elemen dengan cepat.
-
Di sini kami akan mencontohkan untuk menambahkan dua kategori baru pada list kategori tersebut. Namun sebelum itu, non-aktifkan dulu konfigurasi Clip Content pada Frame Home supaya dapat melihat setiap elemen seperti berikut:
Seperti yang dilihat, Anda dapat menambah dan mengubah urutan elemen dengan sangat mudah. Sangat membantu, bukan?
Jika di kemudian hari Anda ingin menghapus Auto Layout, lakukan langkah klik kanan dan pilih Remove auto layout (Alt+Shift+A) atau melalui ikon kurang (-) di sebelah kanan properti Auto layout.
-
Selanjutnya kita ingin mengubah gambar pada setiap ikon kategori. Tentu jika mengubah gambar satu per satu akan melelahkan, bukan? Nah, di sini ada sebuah tips untuk menambahkan banyak gambar sekaligus. Caranya, gunakan shortcut Ctrl+Shift+K dan pilih gambar-gambar yang ingin dimasukkan. Kemudian, pilih pada elemen mana gambar ingin dimasukkan.
High-Fidelity Prototype
Latihan Menerapkan Auto Layout dan Bulk Insert
Pada latihan ini, Anda akan mengetahui penerapan Auto Layout untuk mengatur orientasi, jarak, dan urutan beberapa komponen dengan cepat dan otomatis. Selain itu, Anda juga akan mengetahui cara untuk mengganti banyak gambar sekaligus dengan menggunakan bulk insert.