Cara Membuat Desain di Figma Menggunakan Auto Layout
Belajar dan bermain dengan software figma adobe untuk mengenal dan memudahkan untuk membuat ui/ux design menggunakan fitur Auto Layout.
Setelah kemarin kita sudah mengenal sedikit tentang figma Adobe dan cara membuat akun figma Adobe, sekarang kita akan mengenal lebih dekat bagaimana cara membuat desain di figma menggunakan Auto Layout.
Sebelum memulai melakukan pembuatan ui design, alangkah lebih baiknya kita mengenal beberapa fitur yang ada pada Figma seperti:
1. Design Features
Design Features Figma memberikan kemudahan dalam menggunakan plugin untuk membuat desain dan menggunakan plugin. Fitur yang tersedia ini sangat berguna dalam merancang antarmuka pengguna untuk aplikasi dan situs web. Atribut yang dapat digunakan dengan design features sebagai berikut:
- Open type — Open type merupakan fitur untuk mengkustomisasi font yang sangat bervariatif.
- Pen tool modern — Membantu desainer untuk menggambar berbagai arah dan bentuk menggunakan vector networks. Ini mendukung fleksibilitas dalam membuat desain.
- Stretch to fill — Fitur untuk mengatur tata letak otomatis dan responsive yang sangat berguna.
- Design speaks development — Digunakan untuk melakukan pengaturan padding, direction, dan spacing, yang dapat diterjemahkan dalam kode script.
- Less manual resizing — Fitur yang digunakan untuk memudahkan para desiner untuk melakukan resize text dengan sangat mudah.
- Auto Layout — Fitur yang memungkinkan kamu untuk menerapkan dynamic frames yang menyesuaikan dengan isinya.
- Plugin support — Figma dapat dikatakan super power, karena didukung oleh plugin-plugin yang disediakan, untuk memenuhi kebutuhan para desainer, seperti foto, warna, charts, diagram, icon, dan masih banyak lagi.
- Easy development — Hasil projek desain website yang dibuat melalui figma akan sangat mudah untuk di implementasikan dan dikembangkan kemudian hari.
2. Prototyping Features
Figma memiliki elemen berupa prototyping features yang merupakan Langkah lanjutan dan pengembangan dari desain yang sudah dibuat sebelumnya. Dalam Prototyping ini tersedia fitur-fitur unggulan, seperti animasi, beragam interaksi, GIF, dan transisi yang dapat diubah-ubah dengan mudah.
3. Collaboration Features
Fitur sangat dibutuhkan apabila desainer ingin mengerjakan suatu projek bersama desainer lain. Collaboration features ini akan sangat memudahkan tim desain untuk bekerja secara real-time.
4. Design Systems Features
Fitur dari design systems menunjukkan akses yang mudah dan elemen pendukung lainnya yang cukup lengkap. Fitur ini menyediakan perpustakaan dan aset lengkap untuk pencarian cepat. Selain itu, Anda juga dapat mengukur penggunaan dan perubahan yang dilakukan tim pada desain. Design System sangat berkaitan dengan fitur komponen dan variants yang ada pada figma;
- Component — adalah object yang dapat kamu gunakan kembali di seluruh desain kamu. Komponen akan membantu kamu membuat dan mengelola desain yang konsisten di seluruh project kamu.
- Variants — adalah kumpulan dari suatu Komponen. Jadi, kamu bisa mengumpulkan Komponen serupa dan dapat memberikan object tertentu dengan berbagai macam pilihan.
Kedua fitur tersebut akan Saya jelaskan pada Act selanjutnya.
Jika kita sudah mengetahui fitur-fitur yang terdapat di Figma, pada artikel ini Saya akan membahas apa yang dapat Kamu desain menggunakan Auto Layout. Kita akan melangkah selangkah demi selangkah mulai dengan karakteristiknya yang paling mendasar, hingga gagasan tentang potensi yang dimilikinya untuk mencapai tata letak desain yang lebih kompleks. Meskipun ini hanya pengenalan, saya harap panduan ini cukup lengkap bagi Anda untuk mulai menggunakan fitur ini dengan lebih percaya diri daripada sebelumnya.
Mari Kita PDKT Dahulu
Auto Layout merupakan salah satu fitur terpenting di Figma, dengan keserbagunaan yang membedakannya dari yang ada di alat desain lainnya. Singkatnya, ini memungkinkan Kamu untuk menyusun komponen dan bingkai dengan cara yang dapat tumbuh secara otomatis, membuat wadah beradaptasi dengan ukuran isinya, atau sebaliknya.
Auto Layout memiliki beberapa fitur yang dapat digunakan yaitu:
1. Direction
Untuk pemulaan, kita memiliki fitur untuk menebtukan Direction. Fitur Ini bisa membuat direction secara vertikal (panah menunjuk ke bawah) atau secara horizontal (panah menunjuk ke kanan). Dalam contoh pertama Saya, Saya telah mengatur direction auto layout menjadi horizontal. Artinya jika button yang dibuat memiliki icon maka icon dan text akan sejajar secara horizontal, dapat dilihat pada gambar dibawah ini.
Selain dapat sejajar secara horizontal auto layout pada figma dapat diatur untuk sejajar secara vertikal, dapat dilihat pada gambar dibawah ini.
Kamu hanya dapat mengatur satu direction pada auto layout. Untuk menggabungkan direction, Kamu perlu menggunakan tata letak bersarang, sesuatu yang akan Saya bahas nanti.
2. Padding
Jika Kamu pernah bekerja atau mengenal CSS sebelumnya, ini mungkin sangat familiar dengan Kamu. Dan jika belum, Kamu dapat memahami padding sebagai margin/jarak dalam/internal pada sebuah komponen.
Saat Kamu menerapkan Auto Layout, Figma akan secara otomatis menambahkan jarak ke masing-masing sisi. Kamu juga dapat mengubah jarak dalam (Padding) dengan cara mengklik opsi padding, seperti pada gambar dibawah ini.
Pada update figma terbaru, Kamu dapat mengubah jarak padding lebih leluasa, Kamu dapat menambahkan padding dengan jarak yang sama, atau padding dengan setiap sisi memiliki jarak yang berbeda.
3. Spacing Between Items (Gap)
Jarak antara item dapat kita atur dengan sangat mudah jika menggunakan Auto Layout. Jarak ini tidak ada hubungannya dengan padding yang kita atur sebelumnya, ini adalah nilai yang dikonfigurasi secara independen. Jarak ini akan sama antara semua elemen. Jika Kamu menambahkan elemen lain ke kanan, itu akan secara otomatis menjaga jarak yang sama. Semua lapisan di dalam komponen akan dipisahkan merata secara otomatis.
Sejauh ini kita hanya memiliki satu items di dalam frame yaitu text, tetapi apa yang akan terjadi jika kita memiliki items lain? Dengan menambahkan items tambahan, misalkan sebuah ikon, Kamu akan melihat ada pemisahan antara ikon dan teks.
Gap adalah sesuatu yang sangat berguna ketika kita memiliki komponen yang berisi beberapa lapisan yang harus menjaga jarak yang sama satu sama lain, sehingga tata letak tidak akan rusak jika Kami menambah atau menghapus elemen. Contoh yang jelas adalah item dalam daftar. Dengan pemisahan ini, tidak peduli berapa banyak elemen yang kita miliki, semuanya akan selalu berada pada jarak yang sama satu sama lain. Saat kita menambahkan (atau menghapus) sebuah layer, itu akan mempertahankan nilai-nilai ini.
Pada update terbaru Figma, fitur Gap sudah dapat menggunakan Negative Space seperti -1px, -2px, -3px, dan lain lainnya. Selain itu kita dapat mengatur canvas stacking, mulai dari First on Top atau Last on Top. Saat ini Figma secara default untuk urutan pengaturan auto layout sudah sesuai dengan urutan element yang kita desain.
Dengan menggunakan Auto Layout, Kamu juga dapat dengan mudah mengatur elemen dengan menyeret dan menjatuhkannya langsung di kanvas.
4. Distribution
Dalam Auto Layout Kamu dapat menentukan memilih dua opsi untuk distibution dalam mengatur jarak antar item, yaitu:
- Packed: Objek dalam frame akan dikelompokkan bersama. Opsi ini digunakan untuk menjaga objek dalam bingkai sedekat mungkin dan sejajar.
- Space Between: Objek dalam frame yang memiliki ruang di antara mereka yang terdistribusi secara merata di sepanjang arah dan penyelarasan yang ditetapkan untuk frame. Opsi ini digunakan untuk meregangkan objek melintasi frame.
5. Alignment
Saat menggunakan Auto Layout, untuk melakukan perataan antar element, kita dapat dengan mudah mengaturnya. Namun terdapat beberapa kekurangan yaitu Kamu tidak dapat mengubah perataan objek satu per satu. Untuk alasan itu, Anda harus mengatur perataan objek child pada frame auto layout induk.
Jika distribusi Anda diatur ke Packed, Anda memiliki sembilan opsi yang sama untuk setiap arah:
- Top left
- Top center
- Top right
- Left
- Center
- Right
- Bottom left
- Bottom center
- Bottom right
Jika distribusi Anda diatur ke Space Between, Anda memiliki tiga opsi untuk setiap arah:
- Vertical auto layout: Left, Center, Right
- Horizontal auto layout: Top, Center, Bottom
6. Resizing
Salah satu fungsi auto layout yang paling kuat adalah kemampuannya untuk mengontrol dimensi objek dalam frame auto layout.
Kamu dapat mengatur perilaku pengubahan ukuran untuk frame auto layout induk untuk beradaptasi dengan perubahan apa pun yang dibuat pada objek turunannya. Pengaturan pengubahan ukuran dapat diterapkan untuk objek pada sumbu X dan Y satu per satu menggunakan menu tarik-turun di bilah sisi kanan.
Pada auto layout terdapat 3 ukuran yang dapat diubah-ubah yaitu:
- Fixed width or height: Saat frame auto layout diatur dengan nilai Lebar atau tinggi tetap, nilai dimensi frame akan tetap sama terlepas dari konten di dalamnya. Ukuran frame tidak merespons perubahan objek di dalamnya, seperti string teks yang panjangnya berubah.
- Hug Content: Atur frame auto layout ke hug content untuk mengubah ukurannya sendiri sesuai dengan objek turunannya. frame akan menjaga dimensi sekecil mungkin untuk mengelilingi objek di dalamnya, dan nilai padding akan tetap terjaga.
- Fill Container: Objek dalam frame auto layout diatur ke fill container akan membentang dan mengikuti lebar dan/atau tinggi bingkai induknya.
7. Absolute position
Absolute position berfungsi untuk mengecualikan objek dari aliran auto layout sambil mempertahankannya dalam frame auto layout. Objek dan saudara di sekitarnya mengabaikan satu sama lain, bahkan saat mereka mengubah ukuran dan bergerak.
Sama seperti Absolute position di CSS, objek dengan Absolute position yang diaktifkan dapat ditempatkan tepat di tempat yang Anda inginkan relatif terhadap wadah induknya.
8. Text baseline alignment
Saat layers dengan ketinggian yang bervariasi dipusatkan secara vertikal dan ingin ditempatkan secara auto layout horizontal, dalam beberapa kasus layers dengan ketinggian yang bervariasi tidak akan selaras dapat dilihat pada gambar dibawah saat lapisan teks dan icon dengan ukuran berbeda jika tidak menggunakan text baseline alignment maka text dan icon tidak akan selaras. Namun dengan munggunakan fitur tersebut Kamu dapat menyelaraskan garis dasarnya.
9. Strokes in Layout
Secara default, strokes tidak diperhitungkan saat menghitung ukuran objek, dan karenanya tidak memengaruhi bingkai induk atau saudara di sekitarnya.
Ini mungkin tidak ideal selama handoff pengembang, karena tidak secara akurat mewakili bagaimana CSS merender batas.
Pilih apakah strokes akan mengambil ruang dalam frame auto layout dengan masuk ke pengaturan tata letak lanjutan, dan menggunakan tarik-turun di samping strokes untuk memilih disertakan dalam tata letak atau dikecualikan dari tata letak.
Kesimpulan & Penutup
Jadi, bisa disimpulkan bahwa terdapat beberapa fitur yang dapat digunakan jika kita menggunakan auto layout seperti: Mengatur Direction, Padding, Space Between Items, Distribution, Alignment, Mengatur Dimensi Frame (Resizing), Absolute position, Text baseline alignment, dan Strokes in Layout.
Sekian untuk penjelasan Membuat Desain di Figma Menggunakan Auto Layout Part 1 (Act 1) untuk playing with figma adobe, bagian selanjutnya kita akan bermain dan pdkt kembali ke dalam Act 1 untuk membuat desain di figma menggunakan Auto Layout. Stay tune untuk kelanjutan dari tutorial pengenalan figma.
Link Website: My Personal Website
Beli Source Code: Karyakarsa
Download Assets Button with Auto Layout: Download Assets
Beberapa Sumber Foto & Video: Figma
List Chapter Playing With Figma Adobe
Chapter 1— Playing With Figma Adobe
- Prologue — Playing With Figma Adobe — Pengenalan Figma
- Act 1 — Playing With Figma Adobe — Cara Membuat Desain di Figma Menggunakan Auto Layout
