Desain mock up menggunakan Figma adalah proses pembuatan visualisasi dari sebuah produk digital, seperti website atau aplikasi mobile, sebelum diterapkan ke dalam coding. Tujuannya adalah untuk mempermudah komunikasi dan memastikan bahwa desain sesuai dengan kebutuhan dan harapan tim dan klien.

Agar lebih memahami bagaimana memanfaatkan Figma untuk membuat mock up desain, bukalah link video di bawah ini: https://www.youtube.com/watch?v=Cx2dkpBxst8

Berikut adalah langkah langkah yang akan kita jalankan untuk membuat desain aplikasi android dengan menggunakan Figma.

  1. Bukalah website Figma https://www.figma.com/ di browser anda. Kemudian klik create account apabila anda belum memiliki akun atau anda bisa juga melakukan sign in menggunakan account google masing-masing.
  2. Setelah berhasil masuk, klik new design file.
  3. Klik tanda frame di kanan atas layer kemudian klik frame. Kemudian di panel kanan layar pilih desain android large.
  4. Ganti nama layer android large-1 dengan layar 1 dengan cara mengklik tombol kanan mouse dan memilih rename.
  5. Ganti warna latar belakang layer dengan cara mengklik Fill.
  6. Buatlah kotak (rectangle) dengan cara mengklik icon segitiga di kiri atas layar.
  7. Buatlah tiga kotak (rectangle) pada layar seperti contoh dibawah ini.
  8. Buatlah sudut membulat sebagaimana pada gambar dengan cara mengklik ikon independent corner. Dan ketik angka 10 dimasing-masing sudut.
  9. Isilah dua persegi panjang dengan teks sebagaimana contoh di bawah ini. Klik icon T dikanan atas. Buat persegipanjang sebesar persegi panjang abu-abu. Saat kita mengklik layer Teks disebelah kiri layar. Akan muncul desain teks disebelah kanan. Jenis teks adalah inter dengan size 32. Letak teks ada di center.
  10. Isilah kotak paling atas dengan menggunakan gambar. Ada dua cara yang dapat dilakukan untuk mengisi kotak dengan gambar. Cara pertama dengan mengcopy gambar yang telah kalian miliki. Kemudian pilih kotak tempat gambar akan ditempatkan. Klik tombol kanan dari mouse di kotak yang akan kita tempatkan gambar kemudian pilih tempel atau paste.
  11. Cara kedua adalah dengan memilih icon segitiga di kanan atas panel. Pilih place image, lalu pilih file gambar yang telah anda simpan di komputer sebelumnya.
  12. Untuk menyimpan hasil kerja anda pilih menu export di sebelah kanan panel, pilih jenis file, kemudian klik export.

Kita bisa membuat lebih dari satu layer dalam satu frame file Figma. Kemudian, kita dapat menyambungkan satu layar dengan layar lainnya sehingga tercipta prototype produk aplikasi. Anda dapat mengklik tautan link ini https://www.youtube.com/watch?v=-d6zNGeF59M untuk melihat contoh pembuatan prototyping aplikasi dengan menggunakan Figma.

Latihan:
Buatlah mockup aplikasi dari ide bisnis anda menggunakan Figma!