OKEGUYS – Buat kamu yang sedang ingin membuat situs atau aplikasi, kamu harus tahu dulu nih Cara Buat Auto Layout di Figma dan Fungsinya.
Langkah-langkah berikut akan mengajarkan kamu bagaimana cara kerja auto layout di Figma, melihat lebih dekat fitur auto layout baru saat sedang mendesain UI Shopping Cart.
Cara Buat Auto Layout dan Fungsinya di Figma
Pengertian Auto Layout
Ini adalah fitur Figma yang memungkinkan kamu untuk menerapkan dynamic frames yang menyesuaikan dengan isinya.
Kamu bisa menggunakan fitur ini untuk membuat tombol yang mengubah ukuran sesuai dengan teksnya, membuat daftar atau kolom elemen yang dapat kamu atur ulang dengan mudah, atau kamu bisa menumpuk auto layout frames di dalam auto layout frames lainnya.
1. Cara Membuat Ikon Notifikasi Menggunakan Figma Auto Layout
- Pilih Type tool (T) dari toolbar kamu, dan ketik “5”.
photo: envatotuts Gunakan font Montserrat untuk bagian teks ini, atur gayanya ke Bold dan ukurannya menjadi 12, centang tombol Text Align Center (Control-Alt-T), dan ubah warna menjadi putih (#FFFFFF).
- Setelah kamu pilih teks, cukup tekan shortcut keyboard Shift-A untuk menambahkan auto layout.
Fokus pada bagian Tata Letak Otomatis dari sidebar kanan untuk menyesuaikan pengaturan, dan atur Padding Around Items ke 8. - Pastikan auto layout kamu tetap dipilih dan tetap fokus pada sidebar kanan.
photo: envatotuts Pertama, klik bagian isi untuk menambahkan warna isian dan atur ke # FF4200, lalu klik bagian Stroke untuk menambahkan coretan. Atur warnanya menjadi putih, tingkatkan bobot menjadi 2 dan atur perataan ke Luar.
Pindah ke atas sidebar kanan dan atur Corner Radius menjadi 10.
- Ini adalah auto layout dasar kamu dan setiap kali kamu akan mengubah teks, ukuran frame diubah secara dinamis untuk mengakomodasi konten baru.
Cukup mudah kan Guys cara buat Auto Layout di Figma dan fungsinya juga cukup membuat pekerjaan kamu efisien. Jadi setiap kali kamu mau mengubah teks, maka auto layout itu akan menyesuaikan dengan konten baru kamu itu Guys.
Discussion about this post