Tujuan Tutorial Ini

Kamu akan belajar cara membuat prototype di Figma, yaitu versi simulasi dari aplikasi yang bisa diklik dan diuji. Kamu juga akan belajar berpindah antara mode desain dan mode prototyping, serta membuat menu geser (slide-out menu).

🕒 Waktu yang dibutuhkan: ±30 menit

1. Buka Tab Prototyping

Selama ini kamu bekerja di tab Design (di sisi kanan layar). Sekarang, pindah ke tab Prototype di sampingnya. Di sinilah kamu akan mengatur interaksi antar layar.

2. Ubah Nama Frame (Layar)

Supaya nggak bingung, kasih nama yang jelas untuk setiap layar. Misalnya:

• “Login Screen”

• “Photo Stream”

• “Photo Post”

Cara ganti nama:

• Klik dua kali nama frame di pojok kiri atas layar

• Ketik nama barunya

• Tekan Enter

Atau, bisa juga di panel Layers (di sisi kiri layar).

3. Tentukan Layar Awal

Kamu harus pilih layar mana yang jadi awal ketika prototype dijalankan.

Caranya:

• Klik layar “Login Screen”

• Di tab Prototype, klik ikon + di sebelah tulisan “Flow starting point”
  
  

4. Buat Koneksi Antar Layar

Kalau kamu buka tab Prototype dan klik elemen (seperti tombol), akan muncul titik kecil di sebelah kanan.

Contoh:

• Klik tombol “Sign In”

• Klik dan seret titik kecil itu ke layar “Photo Stream”
  
  

Sekarang, saat tombol diklik dalam prototype, akan pindah ke layar “Photo Stream”.

5. Buat Koneksi Lagi

Sama seperti tadi, sekarang:

• Pilih salah satu foto di “Photo Stream”

• Tarik koneksi ke layar “Photo Post”
  
  

6. Tambahkan Tombol Kembali (Back)

Tambahkan koneksi dari ikon “Home” di navigasi agar kembali ke “Photo Stream”.

7. Buat Layar Baru: “Profile”

Duplikat layar “Photo Post”:

• Klik layar tersebut

• Tekan Ctrl+D (Windows) / Cmd+D (Mac)

Saat diduplikasi, koneksi antar elemen juga ikut. Kamu bisa hapus koneksi yang nggak perlu.

8. Desain Layar “Profile”

Hapus semua isi layar duplikat tadi (kecuali logo dan nav bar), lalu buat tampilan seperti ini:

• Foto profil di atas (bisa ambil dari layar lain)

• Dua tombol (duplikat dari “Sign In”)

• Tiga gambar hewan (ambil dari “Photo Stream”)

• Tambahkan teks, garis, dan bentuk lainnya
  
  

9. Hubungkan ke Layar “Profile”

Buat koneksi dari:

• Ikon “Profile” di “Photo Stream” ke layar Profile
  
  

• Ikon “Profile” di “Photo Post” ke layar Profile
  
  

• Cek apakah tombol “Home” di layar Profile sudah terhubung kembali ke “Photo Stream”
  
  

10. Coba Jalankan Prototype

Klik tombol Present di kanan atas. Ini akan membuka prototype yang bisa diklik.

Bisa juga memilih “Device” (misalnya iPhone SE) untuk melihat tampilan di ukuran perangkat nyata.

11. Bagikan Prototype ke Orang Lain

Saat sedang di mode Present, salin link dari address bar di browser. Kirim ke teman atau keluarga, dan lihat apakah mereka bisa memahami cara menggunakannya.

Ini adalah bagian dari user testing – kamu melihat apakah desain kamu mudah dipahami orang lain.

Selesai!

Kamu baru saja menyelesaikan bagian penting dari belajar Figma dan prototyping.