GIVANTARO AGUSTA

FIGMA

MADE IN INDONESIA
 Halo, sama saya Givantaro.Saya adalah konten kreator di
Youtube, Instagram dan TikTok.

Saya telah belajar dan menggunakan Figma sejak Desember 2021.

Figma telah membantu saya dalam berbagai hal seperti halnya

membantu dalam pembuatan thumbnail, banner, dll.

Figma juga telah membantu saya merancang UI/UX sebuah design,

seperti design aplikasi smartphone, website, dan sebagainya.

Saya juga mempunyai beberapa video kursus gratis di Udemy

yang telah diikuti lebih dari 900 murid.

Saya harap dengan file ini, teman-teman dapat terbantu untuk

memulai perjalanan belajar teman-teman di dunia UI/UX menggunakan
Figma
PERKENALAN

UI
A B C D E F G H I

A. Main Menu
Di main menu, teman-teman akan menemukan beberapa menu
yang akan teman-teman sering gunakan. Contohnya, merubah
file design figma menjadi pdf, plugins, dll

B. Move/Scale Button

Pada menu Move/Scale button, teman-teman akan menemukan 2

menu yaitu Move dan Scale. Dan perbedaannya apa sih?
Untuk Move, teman-teman perlu menekat “Shift” + “Klik
kiri” pada mouse jika teman-teman tidak mau desain teman-
teman terpotong. Contohnya sebagai berikut :

Contoh gambar asli

Tanpa menekan “Shift”

 Tanpa menekan “Shift”

Sambil menekan “Shift”

Scale Button

Bedanya dengan Scale Button, pada Scale Button, teman-

teman bisa mengubah bentuk gambar tanpa menekan “Shift”
dan tanpa khawatir memotong gambar tersebut

Contoh gambar asli

Menggunakan tombol “Scale”
A B C D E F G H I

C. Frame
Pada menu Frame, teman-teman akan menemukan menu frame
desain yang akan pakai, seperti Phone, Presentation, Logo
dll.

D. Shape
Menu Shape adalah menu dimana teman-teman bisa membuat
bentuk seperti, kotak, segitiga, dll yang teman-teman
bisa gunakan untuk menunjang aktivitas desain teman-
teman. Di menu ini, teman-teman juga bisa meletakkan
gambar/teman-teman juga bisa langsung melakukkan dragging
ke Figma dari File lokal teman-teman

E. Pen tool
Pen tool adalah menu yang populer untuk membuat karya
vector dan melakukan layering. Pen tool juga bisa
digunakan untuk menentukan gambar mana yang akan dipilih
secara spesifik. Untuk menyelesaikan bentuk pen tool
teman-teman, teman-teman bisa menekan tombol “V” pada
keyboard, dan klik 2 kali pada daerah mana saja. Atau
teman-teman bisa langsung menekan tombol “Done”
A B C D E F G H I

F. Text
Menu Text biasa digunakan untuk melakukan pengetikkan
huruf dan kalimat pada Figma yang nantinya akan digunakan
pada desain teman-teman

G. Resources
Pada menu Resources, teman-teman bisa menemukan menu
components, plugins dan widgets

H. Hand tool
Hand tool digunakan untuk menelusuri desain desain yang
teman-teman telah kerjakan. Teman-teman juga bisa
menggunakan scroll wheel mouse, tekan scroll wheel pada
mouse dan mulai melakukan penelusuran pada desain teman-
teman

H. Add Comment
Sesuai namanya, Add Comment button merupakan menu dimana
teman-teman bisa menambahkan comment pada desain teman-
teman ketika teman-teman tidak ingat apa yang selanjutnya
dilakukan. Selain itu, menu ini juga berguna jika teman-
teman bekerja dalam kelompok atau grup, sehingga teman-
teman bisa mendapatkan feedback dari grup teman-teman
MULAI MENDESAIN

PADA FIGMA
Shortcut pada Figma
Berikut adalah shortcut populer

pada Figma

Tombol Fungsi
CTRL+D Menduplikasi

CTRL+E Mengubah tulisan

menjadi Vector (Bentuk)

CTRL+K Membuat link pada Text

CTRL+G Melakukan Groupping

C Menambahkan Komen
PROTOTYPE
 Prototyping
Kegiatan prototyping di Figma adalah sebuah kegiatan
dimana berfungsi untuk berpindahdari halaman satu ke
halaman lainnya dengan menekan suatu tombol/gambar,
dll pada Figma.

Contoh :

Pertama-tama, teman-teman perlu

membuat frame dan membuat shape dan

tulisan sesuka teman-teman, semisalnya

“Click me”

Setelah itu, pergi kebagian tab kanan

dan klik “Prototype” dan pilih shape
yang teman-teman akan gunakan sampai
muncul simbol “+”
Setelah itu, duplikasi frame dan jadikan 2 dengan

menekan pada nama frame, seperti yang pada gambar

“Iphone 13 mini - 1” dan tekan CTRL+D. Setelah itu
rubah nama pada shape kedua teman-teman
Sesudah melakukan duplikasi, pergi ke tab “Prototype”
dan hover (arahkan kursor) pada shape teman-teman pada
frame pertama sampai muncul tanda “+”.

Setelah itu, tarik sampai muncul garis dan letakkan

garis pada frame kedua
Pastikan, teman-teman pilih “On Click” dan pilih
tujuan frame teman-teman
Langkah selanjutnya, pergi ke tab kanan dan pilih
“Prototype” dan pilih frame 1 sebagai “Flow 1” atau
Frame yang harus dimulai duluan
Pilih tanda “Play” untuk memulai prototype teman-
teman. Dan arahkan kursor teman-teman kearah tombol
“Click Me” pada frame pertama dan klik tombolnya.
Selesai

Jika kursor teman-teman berubah

menjadi seperti ini, berarti

prototype teman-teman berhasil

Selamat! Teman-teman berhasil membuat protoype pertama

teman-teman! Sekarang kita lanjut bagaimana cara

membuat Hover pada Figma
HOVER
Langkah pertama, buatlah sebuah frame

Disini, saya menggunakan

Iphone SE sebagai contoh

Langkah kedua, buatlah 2 buah shape dan isi dengan
tulisan sesuka hati teman-teman di luar frame yang
teman teman telah buat. Usahakan teman-teman membuat
frame dengan warna berbeda
Langkah selanjutnya, teman-teman perlu menjadikan
shape dan tulisan teman-teman menjadi grooupping
dengan cara pilih blok shape dan tulisan dan tekan
CTRL+G untuk groupping

Setelah itu teman-teman perlu memilih semua shape

dengan cara mengarahkan mouse teman-teman kearah shape
tersebut sambil menekan klik kiri pada mouse
Setelah itu, teman-teman pilih menu dan pilih

“Component set”
Setelah teman-teman memilih “Create component set”,
shape teman-teman akah berubah menjadi seperti ini

Component yang teman-

teman buat, akan masuk
pada menu

Local components di
Assets
Setelah memastikan shape telah masuk ke

local components, teman-teman perlu pergi ke menu

yang berada di kanan, dan pilih Prototype

Setelah itu, pilih shape 1 dan hubungkan pada

shape yang kedua dan ganti ke “While hovering”
Setelah itu, teman-teman pergi ke menu Assets dan

pergi ke frame 1 dan tarik Component yang sudah
kita buat tadi ke Frame kita
Langka yang terakhir, klik play pada menu pojok
kanan atas, dan jika teman-teman mengarahkan
mouse teman-teman pada shape dan shape teman-
teman berubah warna seperti gambar dibawah,
teman-teman berhasil membuat hover. Selamat!
VERTICAL & HORIZONTAL

SCROLLING
Langkah pertama, teman-teman perlu membuat frame
Pilih frame teman-teman yang teman-teman akan
gunakan, dan pada menu di kanan, temukan “Clip
content” dan unchecklist clip content

Clip content berfungsi untuk menutup semua shape

yang kita kerjakan. Sebagai contoh berikut
Gambar kanan merupakan Tanpa clip content

sedangkan gambar kiri menggunakan clip content

 TUTORIAL INI BERLAKU

UNTUK KEDUA SCROLLING

(VERTIKAL DAN HORIZONTAL)

Langkah pertama, teman-teman perlu membuat frame
Langkah kedua, buat shape sebanyak teman-teman
inginkan, semisalnya saya membuat 4 shape secara
vertikal
Langkah selanjutnya, blok dan pilih semua shape
yang teman-teman telah buat. Setelah itu, klik
kanan dan pilih “frame selection” 2 kali untuk
menjadikan shape-shape tersebut sebuah frame

Setelah itu, masukkan

shape-shape tersebut ke

Frame pertama tema-

teman
Pindahkan shape-shape sampai
melebihi

frame pertama teman-teman

Pilih dan blok semua shape-

shape yang teman-teman telah
letakkan pada frame
Pergi ke menu bagian kanan dan pilih protoype.
Pada Scroll behavior, pilih vertical
Jika muncul tanda seru seperti gambar berikut,
teman teman perlu pergi ke frame dan shape-shape
teman-teman

Pilih shape-shape yang teman-teman

telah buat dan letakkan di frame
pertama
Tarik garis bawah sampai titik yang teman-teman
ingin tentukan. Garis tersebut berfungsi sebagai
batas sampai mana desain teman-teman akan berada

Garis yang harus ditarik

Langkah terakhir, klik clip content, dan klik
play prototype pada pojok kanan atas
Berikut adalah preview dari prototype dari design teman-teman.
Teman-teman bisa memakai roller pada mouse atau tahan pada
design dan naik turunkan. Selamat! Teman-teman sudah berhasil
membuat scrolling. Cara ini juga berlaku pada horizontal
scrolling
Iconify

Iconify membantu teman-teman menemukan

icon-icon yang dapat teman-teman gunakan
secara gratis

ARC - Bend your type!

ARC - Bend your type! membantu teman-

teman untuk membuat huruf teman-teman
melengkung. seperti :

Bend your t
- yp
R C e!
A
Clay Mockups 3D

Clay Mockups 3D membantu teman-teman

untuk membuat mockup 3D dalam perangkat
smartphone, laptop, browser, dll
Neumorphism

Neumorphism membantu teman-teman untuk

membuat tombol Neumorpishm secara instan
seperti berikut :

QR Code Generator

Plugin ini dapat

membantu teman-teman
membuat Kode QR
secara real-time
dengan mengetikkan
link URL yang akan
teman-teman gunakan
Terima kasih sudah mendownload PDF File
My Figma UI/UX KIT!. Semoga apa yang
teman-teman pelajari disini, dapat
membantu teman-teman memulai belajar
UI/UX dengan Figma. Untuk kursus
selebihnya, teman-teman bisa berkunjung
pada Udemy saya pada QR berikut:

(+900 Orang Bergabung)