4 Prinsip Desain Responsif di Figma untuk Layar HP Lipat (Foldable)

Kenapa Desain untuk Layar Lipat Butuh Pendekatan Berbeda

Ponsel layar lipat atau foldable bukan lagi barang eksklusif. Makin banyak pengguna beralih ke perangkat ini karena satu layar bisa berubah bentuk dari ukuran ponsel biasa menjadi hampir seukuran tablet mini. Bagi tim desain UI/UX, ini artinya satu desain harus tetap enak dilihat di banyak rasio layar sekaligus, bukan cuma di dua ukuran seperti dulu (mobile dan desktop).

Kabar baiknya, sebagian besar prinsip yang sudah dipakai untuk desain responsif di web ternyata bisa langsung diterapkan untuk kebutuhan ini, termasuk lewat fitur Auto Layout di Figma. Berikut empat prinsip yang bisa langsung dicoba.

1. Susun Auto Layout Secara Bertingkat (Nested), Bukan Satu Lapis

Kesalahan yang paling sering terjadi adalah membuat satu Auto Layout besar untuk seluruh frame, lalu berharap semua elemen di dalamnya menyesuaikan diri sendiri. Padahal, fleksibilitas sesungguhnya baru muncul ketika beberapa Auto Layout disusun di dalam Auto Layout lain (nested).

Dengan struktur bertingkat, setiap bagian, misalnya header, kartu konten, dan tombol aksi, punya aturan penyesuaian ukurannya masing-masing. Saat frame induk melebar karena layar dibentangkan, tiap bagian anak ikut menyesuaikan tanpa perlu diatur ulang secara manual. Ini sama persis dengan cara kerja layar lipat yang berubah dari sempit ke lebar dalam sekali gerakan.

Panduan resmi tentang cara kerja fitur ini bisa dilihat di dokumentasi Auto Layout dari Figma, termasuk cara menambahkannya ke frame yang sudah berisi konten.

2. Gunakan "Fill" daripada "Fixed", Lengkapi dengan Min & Max Width

Elemen yang diset ke ukuran "Fixed" akan mempertahankan lebar aslinya apa pun ukuran layar, sehingga gampang terpotong di layar sempit atau menyisakan ruang kosong yang janggal di layar lebar. Mengubahnya ke "Fill" membuat elemen otomatis mengikuti ruang yang tersedia di dalam frame induknya.

Namun "Fill" saja belum cukup. Tanpa batas atas dan bawah, elemen bisa jadi terlalu gepeng di layar kecil atau melebar berlebihan di layar besar seperti tablet lipat terbuka penuh. Menambahkan Min Width dan Max Width menjaga proporsi tetap enak dilihat di kedua ujung spektrum ukuran layar.

3. Manfaatkan Wrap agar Elemen Otomatis Pindah Baris

Fitur Wrap pada Auto Layout membuat elemen yang tadinya tersusun sejajar secara horizontal bisa otomatis pindah ke baris berikutnya saat ruang menyempit, tanpa perlu diatur ulang satu per satu. Ini krusial untuk transisi dari mode terlipat ke terbuka pada ponsel foldable, di mana lebar layar bisa berubah drastis hanya dalam sepersekian detik.

Tanpa Wrap, tim desain harus membuat variasi layout manual untuk tiap kemungkinan lebar layar. Dengan Wrap, satu struktur desain bisa menangani banyak skenario sekaligus, sehingga proses handoff ke developer juga jadi lebih sederhana karena logikanya konsisten.

4. Rancang Minimal Empat Breakpoint, Jangan Asal Scale

Satu set breakpoint yang umum dipakai untuk mengakomodasi variasi layar saat ini:

• Extra small, untuk ponsel dalam kondisi terlipat
• Small, untuk tablet atau ponsel lipat dalam posisi terbuka
• Medium, untuk laptop
• Large, untuk monitor besar

Tiap breakpoint idealnya didesain ulang, bukan sekadar di-scale dari versi sebelumnya. Jumlah kolom grid, ukuran font, dan jarak antar elemen sebaiknya disesuaikan khusus untuk tiap rentang ukuran, karena kebutuhan tampilan di ponsel terlipat jelas berbeda dengan kebutuhan di monitor besar. Prinsip menentukan breakpoint berdasarkan titik di mana layout mulai "pecah", bukan berdasarkan ukuran perangkat tertentu, juga dijelaskan dalam dokumentasi media query dari MDN Web Docs yang relevan diadaptasi ke konteks desain di Figma.

Menerapkan Keempat Prinsip Ini secara Konsisten

Keempat prinsip di atas saling melengkapi. Auto Layout bertingkat memberi struktur, Fill dengan Min/Max Width menjaga proporsi, Wrap menangani perubahan susunan elemen, dan breakpoint memastikan tiap ukuran layar mendapat perlakuan yang sesuai. Kombinasi ini membuat desain tidak hanya "muat" di layar lipat, tapi benar-benar nyaman digunakan, baik saat terlipat maupun terbentang penuh.

Digitelnusa adalah perusahaan pengembang IT yang fokus pada Software Development untuk Web, App, dan Mobile, System Integrator, Software as a Service, hingga Academy, dan telah membantu berbagai perusahaan merancang serta membangun produk digital yang adaptif di berbagai perangkat, termasuk tren layar lipat yang makin berkembang. Portofolio kerja sama dengan berbagai perusahaan bisa dilihat di digitelnusa.id.

Kalau tim Anda sedang menyiapkan redesign produk atau butuh partner development yang paham detail teknis seperti ini dari tahap desain sampai deployment, yuk diskusikan kebutuhannya bersama Digitelnusa.