Desain statis hanya menjawab pertanyaan "seperti apa tampilannya". Pengguna aplikasi tidak melihat layar sebagai gambar terpisah, melainkan sebagai alur: mereka mengetuk tombol, layar berganti, sebuah jendela muncul, lalu mereka kembali. Banyak masalah desain baru terlihat saat alur itu dicoba. Misalnya, ternyata tidak ada cara kembali dari layar detail, atau tombol penting terlalu jauh dari jempol.

Prototipe interaktif memungkinkan kamu, tim, dan calon pengguna mencoba alur itu sebelum satu baris kode ditulis. Di Figma, prototipe dibuat di file yang sama dengan desain, lewat tab Prototype di panel kanan.

Setiap interaksi di prototipe Figma terdiri dari tiga bagian: trigger, action, dan animation. Cara membacanya: "saat trigger terjadi, lakukan action, dengan animation tertentu."

Trigger: kapan interaksi terjadi

• On tap: saat elemen diketuk atau diklik.
• While hovering: selama kursor berada di atas elemen.
• After delay: setelah jeda waktu tertentu, misalnya splash screen yang berpindah sendiri.
• Key/gamepad: saat tombol keyboard atau gamepad ditekan.

Action: apa yang terjadi

• Navigate: pindah ke layar lain.
• Open overlay: membuka lapisan di atas layar saat ini, misalnya pop-up atau bottom sheet.
• Scroll to: menggulir ke bagian tertentu.
• Back: kembali ke layar sebelumnya.
• Set variable: mengubah nilai variable, misalnya jumlah barang di keranjang.

Animation: bagaimana perpindahannya terlihat

• Instant: langsung berganti tanpa animasi.
• Dissolve: layar baru memudar masuk.
• Smart animate: Figma mencocokkan layer bernama sama di kedua layar dan menganimasikan perubahan posisi, ukuran, dan warnanya.
• Move in/out: layar masuk atau keluar dari salah satu sisi.

Deck memakai tiga layar: Login, Beranda, dan Detail. Kita sambungkan dengan dua interaksi.

Langkah di Figma:

1. Buka tab Prototype di panel kanan.
2. Pilih tombol Masuk, lalu tarik titik sambungan ke frame Beranda.
3. Atur trigger On tap, action Navigate to, animation Smart animate.
4. Pilih kartu di Beranda, tarik ke frame Detail, ubah action menjadi Open overlay dengan animation Move in.
5. Tekan Present untuk memutar prototipe.

Agar Smart animate bekerja dengan baik, layer yang ingin dianimasikan harus punya nama yang sama di kedua layar. Kalau logo di Login bernama "Logo" dan di Beranda bernama "Frame 12", Figma tidak tahu bahwa keduanya objek yang sama. Ini satu lagi alasan kenapa penamaan layer itu penting.

Ada tiga cara memutar prototipe:

• Present: memutar prototipe langsung dari file di komputer.
• Aplikasi mobile: membuka prototipe di aplikasi Figma di ponsel, sehingga kamu bisa merasakan ukuran dan jangkauan jempol yang sebenarnya.
• Tautan prototipe: membagikan tautan kepada tim atau calon pengguna untuk diuji.

Menguji di ponsel sangat dianjurkan untuk desain aplikasi mobile. Tombol yang terlihat cukup besar di layar laptop bisa terasa terlalu kecil saat diketuk dengan jempol.

Developer yang membangun alur ini di web akan menulis logika yang sama: mendengarkan klik (trigger), lalu menampilkan atau menyembunyikan layar (action). Berikut versi sederhananya dengan atribut hidden.

<section id="login">
  <button id="tombol-masuk">Masuk</button>
</section>
<section id="beranda" hidden>
  <article class="kartu">Produk</article>
</section>
<section id="detail" hidden>
  <button id="tutup">Tutup</button>
</section>

const tampil = (id) => (document.getElementById(id).hidden = false);
const sembunyi = (id) => (document.getElementById(id).hidden = true);

// On tap tombol Masuk -> Navigate to Beranda
document.getElementById("tombol-masuk").addEventListener("click", () => {
  sembunyi("login");
  tampil("beranda");
});

// On tap kartu -> Open overlay Detail
document.querySelector(".kartu").addEventListener("click", () => tampil("detail"));

Perhatikan perbedaan Navigate dan Open overlay di kode. Navigate menyembunyikan layar lama dan menampilkan layar baru. Open overlay tidak menyembunyikan Beranda, karena overlay muncul di atas layar yang sedang terbuka. Animasi seperti Smart animate di web biasanya dibuat dengan CSS transition, yang tidak kita bahas di sini.

Set variable untuk prototipe yang lebih hidup

Action Set variable membuat prototipe terasa seperti aplikasi sungguhan. Contohnya tombol "Tambah ke keranjang": setiap ketukan menambah nilai variable jumlah barang, dan badge di ikon keranjang menampilkan nilai itu. Tanpa variable, kamu harus membuat satu layar untuk setiap jumlah barang. Dengan variable, satu layar cukup, sama seperti developer menyimpan jumlah barang di sebuah variabel JavaScript lalu menampilkannya di halaman.

Mulailah dengan prototipe sederhana yang hanya memakai Navigate dan Open overlay. Setelah alurnya benar, baru tambahkan detail seperti Set variable dan animasi yang lebih halus.

• Lupa menyediakan jalan kembali. Setiap overlay dan layar detail sebaiknya punya interaksi Back atau tombol tutup.
• Memakai Navigate untuk pop-up. Pop-up seharusnya Open overlay, supaya layar di belakangnya tetap terlihat.
• Nama layer berbeda antarlayar. Smart animate tidak bisa mencocokkan layer yang namanya berbeda.
• Hanya menguji di laptop. Prototipe aplikasi mobile perlu dicoba di ponsel.