Januari 16, 2020

Tutorial Figma Desain Aplikasi


Aplikasi Figma adalah salah satu design tool yang biasanya digunakan untuk membuat tampilan aplikasi mobile, desktop, website dan lain-lain. Figma bisa digunakan di sistem operasi windows, linux ataupun mac dengan terhubung ke internet. Umumnya Figma banyak digunakan oleh seseorang yang bekerja dibidang UI/UX, web design dan bidang lainnya yang sejenis. Aplikasi ini memiliki keunggulan yaitu untuk pekerjaan yang sama dapat dikerjakan oleh lebih dari satu orang secara bersama-sama walaupun ditempat yang berbeda. Hal tersebut bisa dikatakan kerja kelompok dan karena kemampuan aplikasi figma tersebut lah yang membuat aplikasi ini menjadi pilihan banyak UI/UX designer untuk membuat prototype website atau aplikasi dengan waktu yang cepat dan efektif.


Untuk menggunakan aplikasi figma ada 2 cara yaitu :
Cara 1: Kalian bisa masuk ke figma.com klik sign up dan daftar menggunakan email kalian


Cara ke-2: kalian masuk ke figma.com/downloads, kalian download sesuai sistem operasi kalian. Setelah itu install dan daftar

Perbedaan cara pertama dan kedua yaitu jika kalian memilih cara pertama maka kalian akan menggunakan tool tersebut melalui web browser sedangkan cara kedua kalian akan menggunakan tool tersebut berbasis desktop application, langkahnya sebagai berikut:

1. Setelah kalian registrasi maka tampilan awal akan seperti ini:
2. Kemudian muncul

3. Kita dapat membuat Halaman Tampilan Awal dengan memilih frame yang disediakan

4. Dan pilih ukurannya sesuai dengan jenis aplikasi yang akan dibuat. Di pembahasan kali ini Saya akan memilih Phone – Android

5. Setelah kalian memilih ukurannya maka tampilannya akan seperti ini

6. Sekarang saatnya kita mulai mendesain aplikasi kita. Pertama – tama kita akan membuat tampilan awal aplikasi kesehatan, caranya pilih rectangle dan tarik dari atas ke bawah di frame warna putih tersebut

7. Setelah itu klik kotak tersebut Dan kalian bisa ganti warnanya disebelah kanan di bagian fill sesuai keinginan kalian. Agar lebih menarik kalian bisa ganti warnanya dengan linier dan kalian pilih 2 warna yang pas. Contohnya bisa seperti ini :


8. Untuk lanjutannya, teman-teman bisa langsung eksekusi di websitenya ya atau lihat di tutorial https://blogs.masterweb.com/tutorial-figma/

Tidak ada komentar: