Membuat Desain Di Figma

 Assalamualaikum warahmatullahi wabarakatuh

Disini saya akan menjelaskan tutorial bagaimana cara membuat desain di figma. nah tanpa pikir panjang lagi kita langsung saja ke langkah-langkahnya.

× Pertama Kita Mendesain Halaman Login :

langkah-langkah nya yaitu :

 
1. Buka aplikasi figma di web lalu login terlebih dahulu di figma kemudian klik new design file.

2. Kemudian klik frame lalu pilih frame yang di inginkan.

3. Nah disini saya memilih frame iPhone 13 pro kemudian kita klik frame nya, lalu klik fill kita ganti sesuai warna yang kita inginkan.

4. Selanjutnya kita search flaticon untuk mencari gambar-gambar yang kita perlukan disini saya perlu gambar user, hidden, Facebook, dan juga google.

5. Setalah itu klik icon rectangle kemudian klik place image, lalu cari gambar yang sudah kita download tersebut.

6. Sesuaikan gambar tersebut sesuai keinginan kita.

7. Lalu kita tambahkan teks login dengan mengklik icon teks, dan kita sesuaikan letak teks yang kita inginkan.

8. Tambahkan teks lagi sesuai yang ada di gambar dan kita tambahkan rectangle, lalu kita sesuaikan.

9. Kita tambahkan rectangle dan teks password.

10. Kemudian kita tambahkan icon hidden dan teks seperti forget password, login, or login with, dan rectangle nya dengan cara yang tadi kita buat.

11. Kita tambahkan icon-icon facebook dan juga google seperti gambar dibawah ini dan tidak lupa dengan teks nya juga rectangle nya.

12. Nahh design login pertama kita selesai.

× kemudian kita akan mendesain frame kedua :

langkah-langkah nya yaitu :

1. Klik icon frame lagi kemudian kita pilih frame yang sama.

2. Tambahkan teks sesuai nama kalian, dan atur posisi nya.

3. Terlebih dahulu kita download icon-icon seperti : profil, search, setting, makanan, minuman, fastfood, home, explorer, cart, dan terkahir account.

4. Masukan icon profil dan sesuaikan dengan gambar dibawah ini.

5. Tambahkan teks seperti gambar dibawah ini.

6. Masukan rectangle, icon search, dan teks seperti gambar ini lalu disesuaikan di dalam rectangle.

7. Kita tambahkan rectangle kemudian kita pilih warna sesuai keinginan kita, lalu tambahkan icon setting dan sesuaikan pada rectangle nya.

8. Tambahkan rectangle kemudian pilih warna putih, atur effects sesuai pada gambar dibawah ini.

9. Tambahkan rectangle menjadi 3 kemudian atur sesuai keinginan, tambahkan icon makanan, minuman, fastfood, dan jangan lupa teks nya dibawah gambar icon.

10. Download foto makanan dan minuman sesuai keinginan kalian.

11. Tambahkan teks makanan dan atur posisinya.

12. Tambahkan rectangle yang sama kaya tadi dan sesuaikan ukurannya, kemudian tambahkan foto makanan yang sudah kita download tadi, lalu tambahkan teks makanan sesuai gambar dan untuk harganya ganti warna menjadi putih abu-abu.

13. Nah untuk minuman caranya sama perbedaan nya hanya di ukuran, gambar, dan juga teksnya saja.

14. Terakhir kita tambahkan icon-icon home, explorer, cart, dan account. Dan tambahkan teks nya dan sesuaikan dibawah icon-icon tersebut, nahh akhirnya design kedua selesai.

× Kemudian kita membuat interaksi nya :

Langkah-langkah nya yaitu :

1. Klik tombol prototype lalu arahkan kursor ke tombol login lalu tarik garis dari frame 1 ke frame 2, Kemudian klik tombol present untuk menyoba nya tombol present berada di sebelah share.

2. Setelah itu muncul gambar lalu kita klik login

3. Setelah kita klik login kita akan beralih ke frame 2 dan untuk kembali lagi ke frame 1 kita bisa klik tombol yang berada dibawah gambar hp.

× Penutup 

Nah setelah kita mencoba nya dan membuat desain figma ini hasil desain figma yang kita buat.

Sekian tutorial dari saya, membuat design di aplikasi figma kurang lebihnya mohon maaf wassalamualaikum Warahmatullahi Wabarakatuh.