Nama : Muhammad Majdi
NIM : 2010817210007
Tutorial desain antar muka (UI) menggunakan figma
Dalam belajar mendesain antar muka, pertama tama lebih baik untuk
memulainya dengan menyalin sebuah desain (template). Untuk mencari template
figma anda hanya perlu mencari di pencarian google dengan mengetikkan “figma
resources”. Buka salah salah satu website dan anda akan menemukan banyak
template desain gratis yang dapat digunakan untuk memulai mencoba figma. Pilih
salah satu lalu download/duplikat ke dalam projek anda. Setelah membuka
templatenya anda dapat mengedit atau menambahkan sesuatu. Tapi pertama-tama
anda perlu berkenalan dengan antarmuka figma, disebelah kiri terdapat bagian layer
dan di sebelah kanan terdapat setting untuk layer, dan dibagian atas terdapat pilihan
menu. Untuk membuat layer anda perlu menekan tombol layer yang ada di bagian
atas figma atau anda dapat melakukannya dengan shortcut “f”. anda dapat membuat
ukuran layer sesuka hati atau anda dapat melihat disebelah kiri bagian desain
terdapat template untuk ukuran beberapa jenis handphone. Setelah membuat layer
anda dapat mencoba untuk memberi warna, untuk memberi warna ada di sebelah
kanan bagian fill. Jika anda ingin membuat shape baik berupa kotak, garis, dll anda
dapat membuatnya dengan pilihan rectangle atau yang lain, selain itu seperti frame
anda juga dapat menggunakan shortcut seperti “r” untuk kotak, “l” untuk garis, dll.
Selain itu, anda juga dapat memberi warna pada shape yang anda buat. Saat
membuat shape anda dapat mengatur letak/ukuran secara spesifiknya di sebelah
kanan bagian desain. Pilihan yang tersedia yaitu mengatur letak menggunakan
align, mengatur secara horizontal dan vertical, menambah lebar dan tinggi,
mengatur kemiringan, dan mengatur ujung shape. Terdapat trik dalam membuat
shape yang simetris yaitu dengan menahan tombol shift saat membuatnya. Selain
membuat shape anda juga dapat menambahkan ikon, untuk mendapatkan ikon
Anda dapat mencari di pencarian google dengan mengetikkan “free figma icon”
maka Anda akan mendapatkan banyak jenis ikon gratis. Untuk menggunakannya
Anda hanya perlu mencopynya atau dengan shortcut “ctrl+c”. Setelah ikon d Anda
juga dapat menambahkan tesk. Untuk menambahan teks Anda perlu memilih ikon
teks yang ada di bagian atas. Untuk mengatur teks yang telah Anda buat, sama
seperti shape pilihan pengaturan ada disebelah kanan di bagian text. Sebagai
contoh :
jika Anda ingin membuat design seperti disamping
(Delivery App_UI Kit) pertama-tama Anda buat dulu
layernya. Tekan tombol “f” dan pilih ukuran yang ada di
sebelah kanan. (gambar 1). Lalu ganti warna
backgroundnya untuk mendapatkan warna yang sama
dapat menggunakan ikon pipet yang ada di pengaturan
warna (gambar 2). Lalu selanjutnya anda membuat kotak
putih untuk bagian bawahnya dengan menggunakan
pilihan rectangle lalu sesuaikan ukurannya (gambar 3).
Lalu atur ujungnya dengan pilihan independent corners lalu
masukkan 35 pada kotak 1 dan 2 agar ujungnya berubah
(gambar 4). Setelah itu membuat lingkaran, dipilihan shape
tool lalu pilih ellipse. Untuk membuat lingkaran sempurna
anda perlu menahan shift saat membuat lingkaran lalu
ganti warnanya (gambar 5). Langkah selanjutnya yaitu menambahkan ikon, untuk
mempermudah anda hanya perlu menyalin ikon yang sudah dicontohkan lalu
letakkan ditengah lingkarang yang telah dibuat sebelumnya (gambar 6). Lalu
selanjutnya menambahkan teks dengan cara memilih ikon “T” yang ada di bagian
atas. setelah menambahkan teks, selanjutnya ganti ukuran dan jenis fontnya agar
sesuai dibagian kanan dalam menu text (gambar 7). Selanjutnya menambahkan
tombol order now dan dismiss. Untuk bagian order now caranya sama seperti
membuat kotak sebelumnya tapi bedanya untuk bagian ujungnya hanya mengisi
corner radius (gambar 8). Untuk bagian dismiss hanya perlu menambahkan kata
saja (gambar 9). Langkah terakhir adlah menambahkan logo, untuk logo saat ini kita
salin saja (gambar 10).