[TUTORIAL] Cara Desain Tampilan UI/UX dengan menggunakan Platform Web Figma

Assalammu‘alaikum Wr. Wb.

Hello guys, Kembali lagi bersama Inzaghi's Blog! Jika kita ingin membuat sebuah Aplikasi Ponsel, pasti membutuhkan yang namanya Desain Antarmuka yaitu User Interface (UI) atau User Experience (UX). Salah satu Platform yang menyediakan Desain UI/UX adalah Figma. Untuk lebih lengkapnya, simak baik-baik pada Postingan ini.

Sumber Artikel : Medium.com (@dwinawan) dan Dicoding.com

Apa itu Figma?

Figma adalah salah satu Desain Tool dan keunggulan dari Figma adalah Web-Based. Sehingga jika Anda pengguna Windows, Linux, ataupun macOS, kalian bisa menggunakan Design Tool ini. 

LANGKAH AWAL

Untuk menggunakan Tool tersebut, Anda cukup membuka di Situs Figma.com.

Jika sudah masuk lewat Login atau Sign up, lalu Anda pilih "Other" dan "For personal use" bagi pengguna umum atau Pelajar/Mahasiswa. Lalu klik Centang di bagian "I agree to join Figma's mailing list".

Lalu akan muncul pada Gambar di bawah ini. Jika kalian punya Tim, namailah Tim Anda di Kolom "Team name". Tapi jika sudah, tekan di Tombol "Name my Team".

Lalu jika tidak ingin membuat Team, lewati saja dengan klik di Tombol "Skip this step". Kemudian, pilih Starter di Tombol "Start for Free" untuk Versi Gratis. Kalau saya sendiri lebih memilih Versi Gratis. Dan kalau yang Professional harus berbayar. Kemudian ikutilah Langkah-langkah selanjutnya sesuai dengan Instruksi.

MEMBUAT DESAIN

1. Mencari Ikon/Template

Untuk mencari Template Icon, silahkan cari di bagian Figma Community, lalu cari dengan Kata Kunci "icons" atau "Icons". Maka munculkah Ikon-ikon yang telah tersedia di dalam Template Figma tersebut. Lalu pilihkah Ikon yang menurutmu bagus.

Jika sudah memilih Template, lalu klik di Tombol "Duplicate".

2. Membuat Desain

Pertama-tama, marilah kita membuat Desain dengan melakukan Klik di bagian New Design File.

Jika sudah, maka akan seperti inilah tampilannya :

Selanjutnya, kita menentukan terlebih dahulu Bingkai (Frame) untuk membuat Desain UI/UX dengan cara klik di bagian Frame di sebelah Kanan lalu Pilih Model Tampilan Antarmuka (Interface). Misalnya jika kita pilih Phone (Ponsel) maka ada banyak sekali Model-model Tampilan iPhone (Tapi Android dan Google Pixel juga ada lho). Jika kita pilih Desktop ada MacBook dan iMac, juga ada Surface Book (Jika mau Tampilan Windows, pilihlah Desktop). Jika pilih Tablet, maka ada Tampilan iPad dan Surface Pro (Mungkin jika ingin Tablet Android, pilihlah Surface Pro saja). Dan ada juga Tampilan lainnya seperti Jam Tangan / Watch (Apple Watch), Kertas/Paper, Social Media, dan Presentasi.

Tapi kita pilih saja Tampilan Ponsel/Phone. Dan saya sendiri maunya pilih Android.

Jika kita ingin membuat Bentuk, silahkan klik di bagian Kotak di sebelah Kiri lalu pilih Rectangle untuk memilih Persegi. Lalu buatlah Desain sesuai dengan Imajinasi Anda.

Kemudian, jika kita ingin mengubahnya menjadi ada Lengkungan di Sudut Samping, silahkan lihat di bagian "Corner Radius" di samping Kanan lalu geser sampai menjadi lengkung (Misalnya dari 0 sampai 40).

Dan untuk memasukkan Teks, silahkan klik di bagian Text di sebelah Kiri lalu ketiklah tulisan yang Anda mau.

3. Menambahkan Halaman

Jika ingin menambahkan Halaman, silahkan klik Tombol Plus (Add new Page) di sebelah Kiri.

Dan jika ingin menyalin (Copy) Halaman, silahkan klik kanan lalu klik "Copy", kemudian klik kanan lagi kemudian klik "Paste here" lalu geser halamannya ke samping.

Dan jika ingin menghapus Halaman, silahkan klik kanan di bagian "Page ...." lalu klik "Delete page". Atau jika ingin menamai Halaman, silahkan klik kanan di bagian "Page ...." lalu klik "Rename page", dan juga jika ingin menduplikasi Halaman, silahkan klik kanan di bagian "Page ...." lalu klik "Duplicate page". Kali ini kita akan menghapus Halaman saja.

4. Menampilkan Tampilan UI

Jika ingin menampilkan Prototipe/Prototype dari Desain UI yang telah kita buat, silahkan Klik di bagian "Present" (Tombol Panah Play).

Dan seperti inilah Tampilan Prototype Desain UI Aplikasi Ponsel :

5. Menyimpan File

Jika ingin menyimpan File di Figma, janganlah pergi ke "Figma Button --> File --> Save local copy" maka Anda akan mengunduh (Download) File dalam bentuk Format .fig dan pada umumnya File tersebut tidak bisa dibuka.

Caranya adalah, cari di bagian "Export" di sebelah Kanan lalu pilihlah Format yang Anda mau pilih, misalnya Format PNG, JPG/JPEG, SVG, dan PDF. Saran saya pilih saja PNG atau SVG sebagai Format File yang akan di-Download.

Jika sudah, maka kita klik di Tombol "Export ...." kemudian klik lagi di Tombol Export. Jika sudah maka akan melakukan Download secara otomatis.

Dan inilah Hasil Akhir-nya :

VIDEO TUTORIAL

Untuk melihat Contoh Desain lainnya dengan Platform Figma, silahkan lihat pada Video YouTube berikut ini :

Sebenarnya, kalau kita ingin membuat Tampilan Desain UI/UX selain Figma juga bisa pakai Canva lho! Tapi saya sarankan memakai Figma saja untuk membuat Desain Antarmuka. Dan juga Anda juga bisa menggunakan Aplikasi Figma di Play Store (untuk pengguna Android) dan di App Store (untuk pengguna iOS).

Terima Kasih, dan Semoga Bermanfaat 😄😊👌👍 :)

Wassalammu‘alaikum Wr. Wb.