FIGMA

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.

Transisi yang dapat digunakan pada bagian animation terdiri dari:

 Instant
 Dissolve
 Smart Animate
 Move in/move out
 Push
 Slide in/slide out

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.