Cara Mudah dan Cepat Membuat Responsive Design di Figma
Tutorial mengenai pembuatan responsive design yang mudah dan cepat menggunakan variable di Figma
Hallo semuanya, kali ini Aku bakal membagi tips dan trik untuk mendesain responsive design lebih cepat di figma, menggunakan konsep seperti CSS menggunakan variable.
Pembuatan responsive design sangatlah memakan waktu yang lumayan saat mengubah design menjadi lebih responsive. Sebenarnya pada figma terdapat plugin yang memudahkan kita membuat responsive design yaitu breakpoints, namun plugin tersebut berbayar dan tidak free.
Sekarang untuk membuat responsive design dengan mudah di figma bisa tanpa menggunakan plugin tersebut, yaitu dengan menggunakan Variable Figma. Dengan menggunakan variable kamu dapat menentukan jumlah padding, gap, width, boolean, dan color untuk tiap ukuran device yang akan kalian tentukan.
Yap pada tutorial kali ini Aku akan membahas Cara Mudah dan Cepat Membuat Responsive Design di Figma Menggunakan Variable. Pada totorial ini akan terbagi menjadi beberapa bagian yaitu:
- Mengenal min dan max width height
- Mengenal auto layout wrap
- Mengenal Variable
- Membuat desain responsive menggunakan variable dan min width
1. Mengenal min dan max
Pengenalan Min Width dan Height
Minimum width adalah lebar minimum dari suatu frame maupun content. Sedangkan minimum height adalah tinggi minimum dari suatu frame maupun content. Pada update terbaru figma.com, min width sudah dapat kita gunakan dalam mengatur lebar dan tinggi frame yang akan kalian gunakan. Cara untuk menambahkan min width pada frame yang akan kita buat yaitu dengan mengklik arrow bottom dan klik add min width seperti gambar dibawah ini
Contoh penggunaan jika kamu mengatur min-width: bernilai 416px lebar terkecil akan bernilai 416px dan maximal lebarnya tidak terhingga. Contoh penggunaan jika kamu mengatur min-height: bernilai 416px lebar terkecil akan bernilai 416px dan maximal tingginya tidak terhingga
Pengenalan Max Width dan Height
Maximum width adalah lebar maximum dari suatu frame maupun content. Sedangkan maximum height adalah tinggi maximum dari suatu frame maupun content. Pada update terbaru figma.com, max width sudah dapat kita gunakan dalam mengatur lebar dan tinggi frame yang akan kalian gunakan. Cara untuk menambahkan max width pada frame yang akan kita buat yaitu dengan mengklik arrow bottom dan klik add max width seperti gambar dibawah ini
Contoh penggunaan jika kamu mengatur max-width: bernilai 416px lebarnya tidak bisa lebih dari 416px. Contoh penggunaan jika kamu mengatur max-height: bernilai 416px tingginyanya tidak bisa lebih dari 416px.
2. Mengenal auto layout wrap
Pengenalan Auto Layout
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.
jika Kalian belum pernah menggunakan fitur Auto Layout alangkah lebih baiknya mempelajari mengenai fitur-fitur yang ada pada Auto Layout atau Kamu dapat membaca pada Artikel Saya sebelumnya di Cara Membuat Desain di Figma Menggunakan Auto Layout.
Pengenalan Wrap pada auto layout
Wrap pada auto layout ini sebenernya sama halnya dengan flex-wrap pada flexbox, bagi temen-temen yang sudah belajar css dan flexbox pasti tidak asing dengan istilah tersebut.
Wrap pada auto layout digunakan untuk mendefinisikan bahwa elemen item di dalam container tidak harus disejajarkan dalam satu baris. Artinya, elemen item tersebut digulung (dipindahkan) ke baris baru bila sudah memenuhi lebar container-nya.
Cara untuk menggunakan wrap pada auto layout sangatlah mudah yaitu dengan membuat sebuah frame menjadi auto layout terlebih dahulu, lalu kita atur directionnya ke wrap, seperti video dibawah ini
3. Mengenal Variable
Variabel dalam Figma berfungsi untuk menyimpan nilai yang dapat digunakan ulang dan diterapkan pada berbagai jenis properti desain dan tindakan prototyping. Variable akan membantu menghemat waktu dan usaha saat membangun desain, mengelola sistem desain, dan membuat alur prototyping yang kompleks.
jika Kalian belum pernah menggunakan fitur variable alangkah lebih baiknya mempelajari mengenai fitur-fitur yang ada pada variable atau Kamu dapat membaca pada Artikel Saya sebelumnya di Membuat UI Design Menjadi Lebih Mudah dengan Variable di Figma.
4. Membuat desain responsive menggunakan auto layout, wrap, variable dan min width
Hal pertama yang harus kita lakukan yaitu membuat sebuah variable untuk tokens/atoms ukuran padding/spacing, ukuran resolusi yang akan digunakan, minimum lebar dan tinggi untuk tiap kontennya.
Variable tokens/atoms spacing digunakan untuk mendefinisikan padding dan gap yang akan kita gunakan dalam membuat desain nantinya, kenapa harus mendefinisikan dalam bentuk tokens/atoms, alasannya dikarenakan agar mudah melakukan pengeditan dan modifikasi nantinya.
Langkah-langkah membuat variable tokens/atoms spacing yaitu:
- Klik local variable pada file figma Kamu
2. Maka akan muncul panel untuk membuat local variable, lalu kamu dapat mengklik create variable untuk number.
3. Setelah itu, kamu dapat mendefinisikan name dan value untuk padding dan gap sesuai kebutuhan kamu
4. Jika sudah mendefinisikan hasilnya seperti contoh gambar dibawah ini
5. Lakukan semua langkah diatas untuk tokens/atoms ukuran resolusi (breakpoints) dan tokens/atoms minimum lebar dan tinggi, seperti gambar dibawah ini
Setelah membuat variable tokens/atoms, selanjutnya kita akan membuat variable themes untuk mengatur responsive designya. Langkah-langkah pembuatanya yaitu
- Klik arrow down yang ada di atas pojok kanan, maka akan terbuka dropdown list seperti gambar dibawah
setelah sudah terlihat,klik create collection dan beri nama [Themes] — Breakpoints untuk penamaan ini kalian bisa sesuaikan dengan kebutuhan.
2. Create variable untuk number kembali, setelah sudah muncul satu list variable, maka kalian dapat menambahkan 3 node kolom yaitu Dekstop, Tablet, dan Mobile.
3. Pertama kita akan mendefinisikan width base untuk ukuran dekstop, tablet dan juga android. Dengan cara memanggil tokens variable breakpoints yang sudah kita definisikan sebelumnya, dengan cara mengklik icon variable pada value dekstop, tablet, dan android, dan pilih tokens untuk width base ukuran dekstop. seperti video dibawah ini
4. Tahap kedua mendefinisikan padding base yang akan digunakan pada ukuran dekstop, tablet, dan mobile. Dengan cara memanggil tokens variable breakpoints yang sudah kita definisikan sebelumnya, dengan cara mengklik icon variable pada value dekstop, tablet, dan android, dan pilih tokens untuk padding base ukuran dekstop. hasilnya akan seperti gambar dibawah ini
5. Tahap ketiga mendefinisikan width card base yang akan digunakan pada ukuran dekstop, tablet, dan mobile. Dengan cara memanggil tokens variable breakpoints yang sudah kita definisikan sebelumnya, dengan cara mengklik icon variable pada value dekstop, tablet, dan android, dan pilih tokens untuk width card base ukuran dekstop. hasilnya akan seperti gambar dibawah ini
6. Tahap terakhir dalam pembuatan variable yaitu mendefinisikan padding base untuk card yang akan digunakan pada ukuran dekstop, tablet, dan mobile. Dengan cara memanggil tokens variable breakpoints yang sudah kita definisikan sebelumnya, dengan cara mengklik icon variable pada value dekstop, tablet, dan android, dan pilih tokens untuk padding base card ukuran dekstop. hasilnya akan seperti gambar dibawah ini
Setelah membuat themes variable, selanjutnya temen-temen bisa menggunakannya dalam pembuatan ui design maupun wireframe, dengan cara menggunakan ukuran padding, min-width, dan gap yang sudah didefinisikan sebelumnya. Disini saya contohkan untuk membuat section list card portfolio, hasilnya dapat kalian lihat pada gambar dibawah ini
Kesimpulan
Dengan menggunakan variable kita bisa lebih menghemat dalam melakukan pembuatan design kita, dengan mengurangi pembuatan design kita dapat mengalokasikan waktu untuk mengejakar ux design untuk kemudahan user dan juga bisnis agar saling bersinergi satu sama lain.
Itu saja tutorial pada kali ini, pada pembahasan selanjutnya Aku sedang menulis mengenai belajar memahami flexbox dengan mudah melalui figma.
Link Website: My Personal Website
Beli Source Code: Karyakarsa
Download Assets: Download Assets
Download Template CV Figma: CV ATS Versi Lama
