Javan Cipta Solusi
Published in

Javan Cipta Solusi

Step by Step Membuat Prototyping di Figma

Dalam membuat desain aplikasi maupun desain website kita tidak lepas dari kata “prototype”. Prototype adalah tahapan yang ditujukan untuk mentransformasi sifat-sifat abstrak dari sebuah ide menjadi lebih berwujud. Prototype sangat penting dalam desain aplikasi atau desain website karena dengan prototype kita dapat menguji jalannya aplikasi sebelum aplikasi itu di-develop oleh programmer.

Pada kesempatan kali ini, kita akan belajar membuat prototype figma sebagai toolsnya. Mari kita praktekan satu per satu agar mudah dipahami.

Buka Project yang akan diaplikasikan ke Prototype

Hal yang utama sebelum membuat prototype di figma adalah setiap halaman harus berbentuk frame. Jika halaman belum berbentuk frame silakan diubah karena prototype tidak akan menjalankan halaman jika tidak berbentuk frame.

Buka Tab Prototype

Jika kalian mengalami kendala dalam mencari menunya, tab prototype terletak di sebelah kanan atas. Dalam tab ini kita dapat mengatur beberapa hal seperti: mengatur device yang ingin dipakai, mengatur warna background, dan mengatur halaman pertama yang dijalankan.

Pilih Konten dan Arahkan ke Halaman Tujuan

Gambar di atas adalah konten yang sudah diarahkan ke halaman tujuan. Untuk membuatnya, kita hanya perlu klik konten seperti: desain button, tulisan, gambar, dll. selanjutnya tarik ke halaman yang sudah kita buat untuk menjalankan aksinya.

Custom Animation

Untuk custom animation kita bisa klik salah satu garis prototype yang sudah kita buat sebelumnya dan halaman ini akan muncul. untuk animasi yang disediakan sudah cukup banyak dan bisa kita custom sesuai dengan kebutuhan masing-masing aplikasi atau web.

Selanjutnya, Play!!!

Kali ini kita sudah sampai pada tahap akhir yaitu siap untuk menjalankan prototype yang kita buat. Untuk menjalankan prototype-nya, kita bisa play dengan menekan tombol play di sebelah kanan atas yang berdampingan dengan profil.

Taraaaaa, Protoytpe Siap untuk Dicoba!!!

Hasil dari prototyping

Sekian tutorial yang bisa saya bagikan, jika ada kekurangan dan pengalaman yang mungkin berbeda dan lebih efektif dari yang saya berikan silakan komen dibawah yah…

--

--

Business Process Optimization Partner. Contact us to help you optimize your business using technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store