Prototype 

mereplikasi bagaimana pengguna dapat berinteraksi dengan desain yang

dibuat. Saat ingin membuat prototype interactions di figma, pertama kita harus
membuat connection antar frames.
Connection terdiri dari 3 bagian:

1. Hotspot
bagian dimana interaksi akan dimulai, hotspot dapat berupa frame, objek di
dalam frame seperti button, icon, text dll. Jika suatu object berada di luar
frame dan bukan merupakan frame maka object tersebut tidak dapat dijadikan
sebagai hotspot
Hotspot
2. Destination
Bagian yang di tuju oleh hotspot untuk membuat suatu interaksi
3. Connection
Garis yang menghubungkan hotspot dan destination
Setelah membuat connection, kita dapat mengatur interaksi pada
bagian interaction details. Pada bagian interaction details  terdapat
terdapat trigger dan action.
Trigger digunakan untuk menentukan jenis interaksi yang akan digunakan,
sedangkan action merupakan aksi yang akan terjadi Ketika suatu interaksi
dijalankan.
Setelah mengatur interactions detail, selanjutnya kita akan mengatur animation.
Digunakan untuk membuat transisi antar halaman yang sudah diberikan interaksi.
Animasi : Animasi dapat digunakan untuk membuat transisi yang mulus antar halaman
dan menentukan perilaku untuk tindakan seperti memperluas menu, menggeser antar
halaman, atau membuka galeri.

Transisi yang dapat digunakan pada bagian animation terdiri dari:

 Instant
Transisi instan akan langsung menampilkan Destination Frame, saat hotspot
berinteraksi (diklik, di-hover, atau ditekan).

 Dissolve
Transisi Dissolve akan memudar (fade in ) dalam bingkai Tujuan, di atas
bingkai asli.
Mendukung:
Durasi (Duration)
Melonggarkan(Easing)

 Smart Animate
Fungsi dari fitur Smart Animate ini bisa kamu gunakan untuk menambahkan
animasi transisi dalam perpindahan tampilan layer. Dalam fitur ini, kamu akan
mendapatkan pengalaman menyunting desain aplikasi yang lebih halus.

Maksud dari transisi perpindahan tampilan adalah setiap layer dari desain yang
kamu buat dapat didemonstrasikan layaknya aplikasi yang sudah jadi.
Secara umum, terdapat beberapa animasi yang dapat kamu gunakan untuk
transisi perpindahan. Namun, Smart Animate ini fokus pada setiap komponen
yang berada di dalam sebuah tampilan.

 Move in/move out

Transisi Pindahkan akan menggeser bingkai Tujuan ke dalam atau keluar dari
tampilan, di atas bingkai asli.

Mendukung:

Melonggarkan (Easing)
Arah (Direction)
Durasi (Duration)

 Push
ransisi Push akan mendorong keluar bingkai asli, saat bingkai Tujuan
dipindahkan ke tampilan. Ini adalah transisi sempurna untuk mereplikasi
gerakan menggesek.
Mendukung:
Arah
Melonggarkan
 Durasi

 Slide in/slide out

Slide akan memindahkan bingkai Tujuan ke dalam atau keluar dari tampilan.
Geser perlahan akan mengimbangi bingkai saat larut, sementara transisi
Pindahkan membuat bingkai asli tetap diam.

Mendukung:

Arah
Melonggarkan
Durasi

Trigger terdiri dari:

1. On click/on tap
Interaksi terjadi ketika pengguna mengklik pada bagian hotspot. Interaksi ini
dapat digunakan untuk membuka tautan, mengklik menu, mengklik tombol, dll.
2. On drag
Interaksi ini memungkinkan untuk men-drag elemen yang ada di layer, bisa
digunakan di keseluruhan frame atau satu elemen tertentu di frame.
3. While hovering
Interaksi terjadi ketika pengguna mengarahkan kursor ke hotspot. Ketika
pengguna mengembalikan kursor ke luar area hotspot maka akan dikembalikan
ke tampilan awal.
4. While pressing
Interaksi terjadi ketika pengguna mengklik dan
menahan mouse atau trackpad di desktop atau jika pada smartphone Ketika
di tap dan di hold.
5. Keyboard and gamepad
Interaksi ini memungkinkan untuk membuat shortcut di keyboard.
6. Mouse enter
Interaksi akan ditampilkan ketika mouse memasuki area hotspot.
7. Mouse leave
Interaksi akan ditampilkan ketika mouse keluar area hotspot.
8. Mouse down (touch down)
Interaksi terjadi ketika mouse pertama kali di tekan atau pada smartphone ketika
pengguna menyentuh bagian hotspot
9. Mouse up (touch up)
Interaksi terjadi ketika mouse tidak di lepaskan.
10.After delay
Interaksi ini dapat terjadi setelah pengguna menyelesaikan aktivitas di bagian
tertentu dan interaksi akan otomatis dijalankan. After delay tidak dapat
digunakan pada spesifik layer atau objek tertentu
Action terdiri dari:
 1. Navigate to
Action ini akan memindahkan satu frame ke frame lainnya, aksi ini paling umum
digunakan
2. Open overlay
Action ini akan menampilkan frame lain diatas frame yang sedang ditampilkan
3. Scroll to
Action ini memungkinkan prototype melakukan scroll secara otomatis
ke object atau bagian tertentu, action ini hanya dapat digunakan
pada frame yang sama.
4. Swap with
Action ini memungkinkan untuk mengganti satu frame dengan yang lain.
5. Back
Action ini digunakan untuk menavigasikan desain kembali ke screen sebelumnya
6. Close overlay
Digunakan untuk menghilangkan overlay yang ditampilkan pada original frame
7. Open link
Digunakan untuk mengarahkan prototype ke eksternal URL.

Refrensi: https://help.figma.com/hc/en-us

https://help.figma.com/hc/en-us/articles/360040522373-Prototype-animations
https://myskill.id/blog/dunia-kerja/kenalan-lebih-dekat-dengan-tools-figma-yuk/
https://bingungonline.com/cara-membuat-efek-button-hover-di-figma/