Materi Pengenal Website

Apa itu Figma ?

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.

Selain mempunyai kelengkapan fitur layaknya Adobe XD, Figma 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.

Persiapan Menggunakan Figma

Untuk menggunakan aplikasi figma ada 2 cara yaitu :

1. Kalian bisa masuk ke figma.com klik sign up dan daftar menggunakan email kalian 
2. 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. 

Setelah kalian registrasi maka tampilan awal akan seperti ini

Buat File Baru Figma

Kalian klik new file di sebelah kanan atas

Dan setelah di klik akan muncul tampilan seperti ini.

Ganti nama Untitled dengan nama yang kalian inginkan. Namun untuk contoh, Saya akan membuat Aplikasi Kesehatan

Buat Halaman Tampilan Awal

Selanjutnya kalian pilih frame 

Baca juga: Kelebihan dan Kekurangan Adobe XD

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

Setelah kalian memilih ukurannya maka tampilannya akan seperti ini

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

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 :

Jika sudah pas warnanya kalian bisa tambahkan tulisan dengan klik tombol T diatas dan drag dari kiri ke kanan. tulis nama aplikasi kalian, misalnya ‘DOKTERKU’

Ubah jenis font dan warnanya di sebelah kanan. Sebelum merubah ukuran ataupun warnanya pastikan tulisannya di blok terlebih dahulu.

Agar tulisannya berada di tengah. Kalian klik tulisan tersebut dan klik align horizontal centers di paling atas kanan

Setelah itu kita bisa buat tulisan kecil dibawah seperti ini dan buat berada di tengah juga dengan align horizontal centers

Oh iyaa kalian bisa ubah nama framenya sesuai keinginan kalian caranya double klik di tulisan tersebut dan ubah namanya misal ‘Tampilan Awal’

Buat Halaman Intro

Selanjutnya kita akan membuat halaman lain untuk intro. Kalian pilih frame tampilan awal, klik kiri dan tekan tombol CTRL + C lalu CTRL + V. Hasilnya akan ada 2 tampilan yang sama

Ganti nama frame yang kedua menjadi intro dan hapus semua isinya agar menjadi kosong

Setelah itu kalian buat kotak di tengah seperti ini dan kotak memanjang dibawahnya, beri tulisan ‘skip’ di kanan atas, ‘live chat’ dan ‘konsultasi dengan dokter spesialis terbaik’ di bagian bawah

Lalu tambahkan juga button menggunakan rectangle. Agar ujung kotak tersebut melengkung kalian ubah angkanya di corner radius misal 30

Setelah selesai, kalian coba buat yang seperti itu lagi dengan nama frame intro 2. Rubah tulisannya menjadi ‘info kesehatan’ dan ‘artikel tentang kesehatan terpercaya langsung dari ahlinya’

Buat Halaman Login

Selanjutnya kita akan buat halaman login. Duplicate frame yang sudah ada dan kosongkan. Lalu buat seperti ini menggunakan pen tool. Caranya kalian klik di satu posisi lalu klik tahan di posisi lain dan geser kursornya agar membuat lengkungan

Setelah itu kalian buat rectangle berwarna putih dengan corner radius nya 8 dan menggunakan efek drop shadow lalu tambahkan tulisannya seperti ‘telepon atau email’, ‘password’. Buat juga rectangle dengan tulisan diatasnya ‘masuk’ dan dibawah nya tulisan ‘lupa password’

Lalu kalian buat juga button ‘masuk dengan google’

Untuk menambahkan gambar kalian bisa drag gambarnya atau pilih place image seperti ini. Kalian bisa download gambar google dengan format png di internet.

Buat Halaman Daftar

Jika sudah selesai kalian buat untuk halaman daftarnya seperti ini. Caranya sama seperti diatas

Lihat Tampilan Semua Halaman

Setelah selesai kalian bisa melihat tampilannya dengan menekan tombol play/present di kanan atas

Dan tampilannya akan seperti ini

Nah itu dia artikel tutorial desain aplikasi android dengan figma. Kalian juga bisa membuat desain website sendiri dengan figma ini loh. Setelah desain web sudah dibuat menggunakan Figma, Kalian bisa langsung belajar buat website nya dengan beli hosting di Masterweb gratis domain dan SSL.

 

Sumber :

https://blogs.masterweb.com/tutorial-figma/