Figma: membuat prototipe yang lebih dinamis dan fleksibel

1. Masalah Umum

Desainer sering menghadapi situasi seperti ini:

• Membuat prototipe aplikasi cryptocurrency dengan beberapa layar: Market screen, Search screen, Coin page, Buy/Sell screen.

• Ingin dua cara masuk ke layar “Buy” untuk mendorong transaksi (via tombol Buy atau swipe pada row Ethereum).

• Masalah: Tombol back pada prototipe hanya bisa diarahkan ke satu layar tertentu, sehingga tidak fleksibel jika pengguna masuk dari jalur berbeda.

2. Solusi Tradisional

• Biasanya desainer membuat link manual dari setiap tombol ke layar tujuan.

• Masalah muncul saat pengguna ingin kembali: Figma hanya bisa mengembalikan ke satu layar, tidak “dinamis” sesuai jalur pengguna.

3. Fitur Sections di Figma

• Sections awalnya dianggap hanya untuk mengorganisir canvas, tetapi bisa dipakai untuk prototipe dinamis.

• Caranya:

  1. Pilih beberapa layar yang saling terkait → wrap dalam Section.

     • Contoh: Market flows → Section “Markets”

     • Buy/Sell flows → Section “Buy & Sell Flow”

  2. Figma mengenali semua layar dalam Section sebagai satu kelompok prototipe.

4. Menerapkan Prototyping Dinamis

• Buat prototipe seperti biasa: on-click atau on-drag → pindah ke layar target.

• Untuk tombol Back, hubungkan bukan ke layar spesifik, tapi ke Section.

  • Hasil: Tombol Back secara otomatis mengetahui layar asal pengguna, sehingga navigasi menjadi dinamis.

5. Demo Alur Dinamis

• Swipe di Ethereum row → masuk Buy screen.

• Klik Back → kembali ke Market screen (dinamis sesuai jalur asal).

• Bisa diaplikasikan untuk semua jalur: Search → Ethereum → Buy → Back → kembali ke Search.

6. Manfaat Fitur Sections

• Mengatur canvas agar lebih rapi.

• Membuat prototipe lebih canggih dan realistis.

• Memudahkan desainer mengelola navigasi kompleks tanpa membuat link manual ke banyak layar.

Kesimpulan

Fitur Sections di Figma tidak hanya untuk mengorganisir layar, tapi juga memungkinkan prototipe dinamis, mempermudah navigasi kembali yang fleksibel, dan menghemat waktu saat mengelola alur kompleks.


Source : Youtube Mizko