Figma Lanjutan: Menghidupkan Desain Menjadi Prototipe Interaktif

Halo Sobat Jurnal Coding! Pada artikel sebelumnya, kita sudah berkenalan dengan keajaiban Figma. Kita membahas bahwa seorang Web Developer yang profesional tidak akan langsung menulis kode secara membabi buta, melainkan akan menggambar denah visualnya terlebih dahulu menggunakan Figma.

Saya yakin sekarang kamu sudah bisa menggambar sebuah layar smartphone di kanvas Figma, memberinya warna latar belakang yang keren, menempatkan sebuah tombol, dan menambahkan teks yang cantik. Desainmu terlihat sangat estetik.

Namun, ada satu masalah: Gambar itu masih mati.

Bayangkan kamu sedang bekerja sebagai tenaga lepas (freelance), dan kamu sedang presentasi menawarkan jasa pembuatan aplikasi kepada seorang pengusaha restoran yang sama sekali tidak paham teknologi. Jika kamu hanya menunjukkan gambar mati di layar laptop, klien tersebut akan kesulitan membayangkan bagaimana aplikasinya bekerja. Mereka akan bertanya, "Lalu, kalau saya mengeklik tombol Beli Nasi Goreng ini, apa yang akan terjadi selanjutnya?"

Untuk mengatasi kebuntuan presentasi ini, Figma menyediakan sebuah fitur magis tingkat dewa yang bernama: Prototype (Prototipe).

### Analogi Membuat Film Animasi

Jika menggambar kotak dan warna di Figma (Mode Design) ibarat melukis sebuah karakter komik di atas kertas, maka Mode Prototype ibarat mengubah kumpulan kertas komik tersebut menjadi sebuah film animasi yang bergerak!

Dengan fitur Prototype, kamu bisa menghubungkan satu layar desain dengan layar desain lainnya menggunakan "Tali Gaib". Kamu bisa mengatur sebuah perintah logika yang sangat mirip dengan Event Listener di JavaScript, tetapi murni secara visual tanpa mengetik sebaris kode pun.

Kamu cukup memberikan instruksi visual: "JIKA tombol ini diklik oleh pengguna, MAKA geser layar ini ke halaman pendaftaran dengan animasi menggeser (slide) perlahan selama setengah detik."

Langkah Mudah Menghidupkan Desain di Figma:

Buat Dua Layar: Pastikan kamu sudah memiliki dua bingkai (Frame) gambar di kanvasmu. Misalnya Bingkai A (Halaman Login) dan Bingkai B (Halaman Beranda Utama).

Ubah Mode: Lihat ke panel menu sebelah kanan atas di layar Figma. Ubah dari mode "Design" menjadi mode "Prototype".

Tarik Tali Noodle: Klik pada tombol "Masuk" di Bingkai A. Kamu akan melihat sebuah titik bundar kecil bermunculan di pinggir tombol tersebut.

Klik dan seret titik tersebut menuju ke arah Bingkai B. Sebuah garis panah (seperti mi atau benang) akan menghubungkan keduanya.

Atur Animasi: Sebuah kotak pop-up akan muncul. Pilih aksi interaksinya, misalnya "On Click" > "Navigate to" > "Smart Animate".

### Merasakan Sensasi Aplikasi Sungguhan

Setelah kamu merangkai layar-layar tersebut, carilah ikon tombol "Play" (seperti tombol putar video) di pojok kanan atas aplikasi Figma.

Tiba-tiba, layar monitormu akan berubah menampilkan bingkai perangkat smartphone sungguhan. Kamu bisa mengarahkan kursor mouse-mu, mengeklik tombol "Masuk" yang tadi kamu buat, dan layar akan otomatis berganti ke halaman Beranda Utama dengan animasi transisi yang sangat mulus!

Bagi orang awam yang melihatnya, mereka akan mengira bahwa kamu sudah benar-benar selesai memprogram aplikasi tersebut secara utuh, padahal kamu belum menulis sebaris kode HTML pun!

### Kunci Sukses Menjadi Web Developer Mandiri

Kemampuan membuat prototipe interaktif ini adalah rahasia terbesar mengapa para pekerja lepas bisa meminta bayaran jutaan rupiah sebelum mereka mulai bekerja keras menulis kode.

Dengan menyodorkan prototipe ini kepada klien, klien bisa mencoba "memainkan" aplikasinya terlebih dahulu. Jika mereka kurang suka dengan posisi tombol atau warna halamannya, kamu bisa langsung mengubahnya dalam hitungan detik di Figma. Hal ini akan mencegah terjadinya bencana "Revisi Besar-Besaran" yang sering kali membuat programmer stres jika mereka harus mengubah desain dari dalam barisan kode CSS yang sudah terlanjur diketik panjang lebar.

Oleh karena itu, sebelum kamu menulis program aplikasi selanjutnya, jadikanlah pembuatan prototipe interaktif di Figma sebagai kewajiban dan Standar Operasional Prosedur (SOP) pribadimu!