Membuat Prototyping Input Keyboard Menggunakan String Variable Di Figma

Variable pada figma memiliki banyak fungsi dengan setiap tipe variable dapat digunakan sesuai kebutuhannya. Contoh colors variable dapat digunakan untuk mempermudah membuat mode warna seperti light mode dan dark mode. Lalu kali ini string variable yang bisa digunakan input keyboard pada saat prototyping sehingga dapat memberikan pengalaman lebih nyata pada saat prototyping. Gimana caranya? Simak langkah-langkahnya di bawah ini!

• Pertama buat design texi input seperti berikut ini

• Kedua buat variable string dengan name dan value seperti berikut ini

• Ketiga set text yang terdapat pada inputan menggunakan variable yang telah dibuat

text yang diset menggunakan variable

Cara set variable klik yang diberikan tanda kotak merah

Pilih varibale text-nya

Buat variant baru untuk state aktifnya

Buat prototyping input-an seperti gambar diatas

• Keempat membuat interaksi input keyboard dengaan menambahkannya pada field input yang telah dibuat

Selanjutnya terapkan pada semua huruf keyboard agar bisa menggunakan semua inputan keyboard

• Kelima buat UI seperti inputan form untuk membuat contoh inputan seperti berikut ini

• Keenam kalian bisa coba klik pada inputannya lalu ketik saja langsung karakter keyboard untuk mencoba hasilnya

Apabila langkah-langkah diatas sudah diterapkan maka kalian akan bisa membuat simulasi keyboard inputan pada figma. Dengan adanya pengalaman ini akan menambah nilai prototyping pada figma di project kalian.

Overview of variables, collections, and modes