Halo semuanya! Pada postingan ini, saya ingin berbagi tutorial tentang bagaimana menggunakan Auto Layout di Figma untuk membuat desain UI/UX yang responsif dan mudah diubah.
Auto Layout di Figma adalah fitur yang sangat membantu untuk membuat desain UI/UX yang responsif dan mudah diubah. Fitur ini memungkinkan kita untuk mengatur tata letak elemen secara otomatis, sehingga desain yang kita buat dapat beradaptasi dengan berbagai ukuran layar.
Kelebihan menggunakan Auto Layout :
- Design lebih flexibel dan responsive
- Mempermudah dalam repetition
- Object lebih terorganisasi
- Scalable
- Design lebih cepat
Cara membuat auto layout :
Membuat Frame dan Elemen
Buat Frame: Buat frame baru di Figma dengan mengklik tombol "+" di bagian Drafts.
Tambahkan Teks: Klik pada frame dan masukkan teks apa pun yang Anda inginkan.
Tambahkan Gambar: Klik pada ikon "Import" di bagian atas Figma dan pilih gambar yang ingin Anda tambahkan.
Gambar ini menunjukkan cara membuat frame baru di Figma dan menambahkan teks dan gambar.
Mengaktifkan Auto Layout
Pilih Elemen: Pilih teks dan gambar yang Anda tambahkan pada langkah sebelumnya.
Aktifkan Auto Layout: Klik tombol "Auto Layout" di panel Properties di sebelah kanan.
Gambar ini menunjukkan cara mengaktifkan Auto Layout untuk elemen yang dipilih.
Menyesuaikan Tata Letak
Setelah mengaktifkan Auto Layout, kita dapat menyesuaikan tata letak elemen dengan menggunakan berbagai pengaturan:
Spacing:
Horizontal Padding: Atur jarak antara elemen dan tepi frame horizontal.
Vertical Padding: Atur jarak antara elemen dan tepi frame vertikal.
Alignment:
Horizontal Alignment: Pilih bagaimana elemen diposisikan secara horizontal: Left, Center, atau Right.
Vertical Alignment: Pilih bagaimana elemen diposisikan secara vertikal: Top, Center, atau Bottom.
Gambar ini menunjukkan cara mengatur posisi elemen secara horizontal dengan menggunakan Horizontal Alignment dan posisi elemen secara vertikal dengan menggunakan Vertical Alignment.
Distribution
Horizontal Gap Between Items: Atur jarak horizontal antara elemen.
Vertical Gap Between Items: Atur jarak vertikal antara elemen.
Gambar ini menunjukkan cara mengatur jarak antar elemen secara horizontal dengan menggunakan Horizontal Gap Between Items dan jarak antar elemen secara vertikal dengan menggunakan Vertical Gap Between Items.
Resizing
Resize: Pilih bagaimana elemen diresize saat ukuran frame diubah: Fit, Stretch, atau Constraint.
Gambar ini menunjukkan cara mengatur bagaimana elemen diresize saat ukuran frame diubah dengan menggunakan pengaturan Resize.
Saya harap tutorial ini bermanfaat!
