Bab 2: Memulai Desain UI/UX dengan Figma

Apa itu Figma?

Figma adalah alat desain UI/UX yang populer dan dapat digunakan secara online.
Figma memungkinkan para desainer untuk membuat, membagikan, dan bekerja
sama pada desain, serta membuat prototipe dan animasi. Figma juga menyediakan
banyak fitur dan alat yang dapat membantu dalam proses desain.

Membuat Dokumen Baru

Setelah masuk ke akun Figma, langkah pertama untuk memulai desain adalah
membuat dokumen baru. Setelah memilih opsi "Create New", pengguna dapat
memilih ukuran dokumen yang ingin digunakan atau membuat ukuran dokumen
khusus. Ukuran dokumen yang umum digunakan untuk desain antarmuka pengguna
adalah 360 x 640 piksel.

Menggunakan Tools dan Fitur Dasar di Figma

Figma memiliki banyak alat dan fitur dasar yang dapat digunakan dalam proses
desain. Beberapa alat dan fitur dasar yang perlu diketahui termasuk:
● Select Tool: alat yang digunakan untuk memilih elemen di dokumen.
● Frame Tool: alat yang digunakan untuk membuat frame di dokumen.
● Vector Tool: alat yang digunakan untuk membuat bentuk vektor.
● Text Tool: alat yang digunakan untuk menambahkan teks ke dokumen.
● Layers Panel: panel yang menampilkan semua elemen di dokumen.
● Properties Panel: panel yang menampilkan semua properti dan atribut untuk
elemen yang dipilih.

Membuat dan Mengelola Artboard

Artboard adalah area kerja dalam dokumen Figma yang digunakan untuk membuat
dan menampilkan desain. Setelah membuat dokumen baru, pengguna dapat

9
membuat artboard dengan menggunakan Frame Tool. Artboard dapat disesuaikan
dengan menambahkan elemen desain atau mengatur tata letaknya.

Membuat Shapes dan Vector Tools

Figma memiliki banyak alat dan fitur untuk membuat shapes dan vektor. Beberapa
alat yang perlu diketahui termasuk:
● Rectangle Tool: alat yang digunakan untuk membuat persegi panjang.
● Circle Tool: alat yang digunakan untuk membuat lingkaran.
● Line Tool: alat yang digunakan untuk membuat garis.
● Pen Tool: alat yang digunakan untuk membuat bentuk vektor kustom.
● Boolean Operations: fitur yang digunakan untuk menggabungkan dan
memotong bentuk.

Kesimpulan
Memulai desain UI/UX dengan Figma membutuhkan pemahaman dasar tentang alat
dan fitur dasar Figma. Dalam bab ini, penulis buku telah membahas cara membuat
dokumen baru, menggunakan alat dan fitur dasar, membuat dan mengelola
artboard, serta membuat shapes dan vektor. Setelah memahami dasar-dasar Figma,
penulis buku dan pembaca dapat melanjutkan ke bab-bab selanjutnya untuk
mengeksplorasi topik-topik desain UI/UX yang lebih luas.

10
Bab 3: Tools dan Fitur Dasar di Figma
Figma memiliki banyak alat dan fitur yang dapat membantu para desainer dalam
proses desain UI/UX. Dalam bab ini, penulis buku akan membahas beberapa alat
dan fitur dasar yang perlu diketahui dalam menggunakan Figma.

Select Tool

Select Tool adalah alat yang paling sering digunakan dalam proses desain di Figma.
Alat ini digunakan untuk memilih elemen di dokumen, mengubah ukuran elemen,
memindahkan elemen, dan mengubah properti elemen. Para desainer dapat memilih
elemen dengan mengklik elemen tersebut atau dengan menarik kotak di sekitar
elemen menggunakan Select Tool.

11
Frame Tool

Frame Tool digunakan untuk membuat frame di dokumen. Frame adalah area kerja
dalam dokumen yang dapat diisi dengan elemen desain. Para desainer dapat
menambahkan elemen ke dalam frame dan mengatur tata letak elemen dalam
frame. Frame juga dapat digunakan untuk membuat prototipe.

Vector Tool

Vector Tool digunakan untuk membuat bentuk vektor di Figma. Bentuk vektor adalah
bentuk yang dapat diperbesar atau diperkecil tanpa kehilangan kualitas. Beberapa
bentuk vektor yang dapat dibuat dengan Vector Tool termasuk garis, kurva, dan
bentuk yang lebih kompleks.

Text Tool

Text Tool digunakan untuk menambahkan teks ke dokumen. Para desainer dapat
memilih font, ukuran, warna, dan gaya teks menggunakan Text Tool. Para desainer
juga dapat mengubah properti teks setelah teks ditambahkan ke dokumen.

12
Layers Panel
Layers Panel menampilkan semua elemen di dokumen Figma. Para desainer dapat
menambahkan atau menghapus elemen di Layers Panel. Layers Panel juga dapat
digunakan untuk mengatur tata letak elemen dan mengubah properti elemen.

Properties Panel
Properties Panel menampilkan semua properti dan atribut untuk elemen yang dipilih.
Para desainer dapat mengubah properti dan atribut elemen menggunakan
Properties Panel. Properties Panel juga dapat digunakan untuk menambahkan efek,
bayangan, dan perpindahan ke elemen.

Kesimpulan
Figma memiliki banyak alat dan fitur yang dapat membantu para desainer dalam
proses desain UI/UX. Dalam bab ini, penulis buku telah membahas beberapa alat
dan fitur dasar yang perlu diketahui dalam menggunakan Figma, seperti Select Tool,
Frame Tool, Vector Tool, Text Tool, Layers Panel, dan Properties Panel. Setelah
memahami dasar-dasar Figma, penulis buku dan pembaca dapat melanjutkan ke
bab-bab selanjutnya untuk mengeksplorasi topik-topik desain UI/UX yang lebih
lanjut.

13
Bab 4: Membuat dan Mengelola Artboard di
Figma
Artboard adalah area kerja di Figma yang digunakan untuk menempatkan elemen
desain. Artboard juga digunakan untuk membuat mockup dan prototype. Dalam bab
ini, penulis buku akan membahas cara membuat dan mengelola artboard di Figma.

Membuat Artboard
Ada beberapa cara untuk membuat artboard di Figma:
1. Pilih Frame Tool dan buat frame dengan mengklik icon frame pada Figma.

14
2. Gunakan keyboard shortcut "A" untuk mengaktifkan Rectangle Tool dan buat
rectangle dengan mengklik dan menarik di dokumen.

15
 3. Pilih menu "Insert" dan pilih "Frame" atau "Rectangle" untuk membuat
artboard.

Setelah artboard dibuat, para desainer dapat menambahkan elemen ke dalam

artboard, mengatur tata letak elemen, dan mengubah properti elemen.

Mengelola Artboard
Para desainer dapat mengelola artboard di Figma menggunakan Layers Panel.
Layers Panel menampilkan semua elemen di dokumen Figma, termasuk artboard.
Para desainer dapat menambahkan atau menghapus artboard di Layers Panel. Para
desainer juga dapat mengubah ukuran artboard, mengatur tata letak artboard, dan
mengubah properti artboard menggunakan Properties Panel.

Para desainer dapat mengelompokkan artboard dalam Pages Panel. Pages Panel
menampilkan semua halaman dalam dokumen Figma. Para desainer dapat
menambahkan atau menghapus halaman di Pages Panel. Para desainer juga dapat
mengubah nama halaman dan mengatur tata letak halaman.

Kesimpulan
Artboard adalah area kerja di Figma yang digunakan untuk menempatkan elemen
desain. Dalam bab ini, penulis buku telah membahas cara membuat dan mengelola
artboard di Figma. Para desainer dapat membuat artboard dengan menggunakan
Frame Tool, Rectangle Tool, atau menu Insert. Para desainer juga dapat mengelola
artboard di Layers Panel dan Pages Panel. Setelah memahami cara membuat dan
mengelola artboard di Figma, penulis buku dan pembaca dapat melanjutkan ke
bab-bab selanjutnya untuk mengeksplorasi topik-topik desain UI/UX yang lebih
lanjut.

16
Bab 5: Shapes dan Vector Tools di Figma
Shapes dan vector tools adalah alat penting dalam desain UI/UX. Dalam Figma,
para desainer dapat menggunakan shapes dan vector tools untuk membuat dan
memodifikasi elemen desain. Dalam bab ini, penulis buku akan membahas tentang
shapes dan vector tools di Figma.

Shapes
Figma menyediakan berbagai macam shapes yang dapat digunakan untuk membuat
elemen desain. Beberapa shapes yang umum digunakan antara lain rectangle,
ellipse, dan polygon. Para desainer dapat membuat shapes dengan menggunakan
Rectangle Tool, Ellipse Tool, atau Polygon Tool. Para desainer juga dapat mengubah
bentuk, ukuran, dan properti shapes menggunakan Properties Panel.

Vector Tools
Vector tools digunakan untuk membuat elemen desain yang berbentuk vektor.
Beberapa vector tools yang umum digunakan antara lain Pen Tool, Line Tool, dan
Arrow Tool. Para desainer dapat membuat bentuk vektor dengan menggunakan
vector tools, mengubah bentuk, ukuran, dan properti bentuk menggunakan
Properties Panel.

Path Operations
Path Operations adalah fitur di Figma yang digunakan untuk memodifikasi bentuk
vektor. Beberapa path operations yang umum digunakan antara lain Union, Subtract,
Intersect, dan Exclude. Path Operations digunakan untuk memotong,
menggabungkan, dan memodifikasi bentuk vektor. Para desainer dapat mengakses
Path Operations dengan memilih beberapa bentuk vektor dan memilih opsi Path
Operations di toolbar.

Kesimpulan
Shapes dan vector tools adalah alat penting dalam desain UI/UX. Para desainer
dapat menggunakan shapes dan vector tools di Figma untuk membuat dan
memodifikasi elemen desain. Path Operations juga merupakan fitur penting yang
digunakan untuk memodifikasi bentuk vektor. Dalam bab ini, penulis buku telah
membahas tentang shapes dan vector tools di Figma. Setelah memahami cara
menggunakan shapes dan vector tools di Figma, penulis buku dan pembaca dapat
melanjutkan ke bab-bab selanjutnya untuk mengeksplorasi topik-topik desain UI/UX
yang lebih lanjut.

17
Bab 6: Mengelola Layer dan Grouping di Figma
Mengelola layer dan grouping adalah aspek penting dari desain UI/UX. Dalam
Figma, para desainer dapat mengatur elemen desain dengan menggunakan layer
dan grouping. Dalam bab ini, penulis buku akan membahas tentang cara mengelola
layer dan grouping di Figma.

Mengelola Layer

Layer adalah elemen dasar dari sebuah desain di Figma. Setiap elemen desain,
seperti shapes dan vector tools, memiliki layer yang terkait. Para desainer dapat
mengubah urutan layer dengan mengklik dan menarik layer ke posisi yang
diinginkan di Layers Panel. Para desainer juga dapat mengubah nama layer dan
lock atau unlock layer dengan mengklik ikon di sebelah nama layer.

18
Grouping

Grouping digunakan untuk mengelompokkan beberapa layer menjadi satu

kelompok. Para desainer dapat mengelompokkan beberapa layer dengan
menyeleksi layer yang diinginkan dan menekan tombol Command/Control + G atau
memilih opsi Group di toolbar. Setelah dikelompokkan, para desainer dapat
mengatur posisi, ukuran, dan properti kelompok dengan menggunakan Properties
Panel.

19
Ungrouping

Ungrouping digunakan untuk membuka kelompok yang sudah dibuat sebelumnya.

Para desainer dapat membuka kelompok dengan menyeleksi kelompok dan
menekan tombol Shift + Command/Control + G atau memilih opsi Ungroup di
toolbar.

Kesimpulan
Mengelola layer dan grouping adalah aspek penting dari desain UI/UX di Figma.
Para desainer dapat mengatur elemen desain dengan menggunakan layer dan
grouping. Dalam bab ini, penulis buku telah membahas tentang cara mengelola layer
dan grouping di Figma. Setelah memahami cara mengelola layer dan grouping di
Figma, penulis buku dan pembaca dapat melanjutkan ke bab-bab selanjutnya untuk
mengeksplorasi topik-topik desain UI/UX yang lebih lanjut.

20
Bab 7: Grids, Layout, dan Frame di Figma
Grids, layout, dan frame sangat penting dalam desain UI/UX. Mereka membantu
para desainer untuk mempercepat proses desain dan menghasilkan desain yang
konsisten. Dalam bab ini, penulis buku akan membahas tentang cara menggunakan
grids, layout, dan frame di Figma.

Grids

Grids digunakan untuk membantu para desainer untuk membuat tata letak yang
konsisten dalam desain mereka. Figma memiliki fitur grid yang dapat diatur dengan
ukuran grid, jumlah kolom, jarak antar kolom, dan jarak antar baris. Para desainer
dapat mengaktifkan grid dengan memilih View > Grids.

Layout

Layout adalah cara para desainer mengatur elemen desain dalam sebuah desain.
Figma memiliki fitur Layout Grids yang memungkinkan para desainer untuk
membuat layout dengan mengatur jarak antar kolom, jarak antar baris, dan lebar
kolom. Para desainer dapat mengaktifkan Layout Grids dengan memilih Layout Grid
di toolbar.

Frame
Frame adalah wadah yang digunakan untuk mengatur elemen desain dan
membangun tata letak. Para desainer dapat membuat frame dengan memilih Frame
Tool di toolbar. Setelah frame dibuat, para desainer dapat menambahkan elemen
desain ke dalam frame tersebut. Frame juga memungkinkan para desainer untuk
menambahkan efek dan interaksi ke dalam desain.

21
Kesimpulan
Grids, layout, dan frame adalah alat penting dalam desain UI/UX di Figma. Mereka
membantu para desainer untuk mempercepat proses desain dan menghasilkan
desain yang konsisten. Dalam bab ini, penulis buku telah membahas tentang cara
menggunakan grids, layout, dan frame di Figma. Setelah memahami cara
menggunakan grids, layout, dan frame di Figma, penulis buku dan pembaca dapat
melanjutkan ke bab-bab selanjutnya untuk mengeksplorasi topik-topik desain UI/UX
yang lebih lanjut.

22
Bab 8: Library dan Component di Figma
Library dan component sangat penting dalam desain UI/UX. Mereka membantu para
desainer untuk membuat desain yang konsisten dan mudah dikelola. Dalam bab ini,
penulis buku akan membahas tentang cara menggunakan library dan component di
Figma.

Library
Library adalah kumpulan asset desain yang dapat digunakan kembali dalam desain
lainnya. Library memungkinkan para desainer untuk membuat dan menyimpan asset
desain, seperti icon, warna, dan font, untuk digunakan kembali di berbagai proyek
desain. Figma memiliki fitur Library yang memungkinkan para desainer untuk
membuat dan mengelola library mereka. Para desainer dapat membuat library baru
dengan memilih Library di toolbar.

Component
Component adalah bagian dari desain yang dapat digunakan kembali dalam desain
lainnya. Dalam Figma, para desainer dapat membuat component dengan memilih
elemen desain, kemudian memilih Create Component di toolbar. Setelah component
dibuat, para desainer dapat mengedit komponen tersebut secara terpisah, dan
setiap perubahan yang dilakukan pada komponen tersebut akan diterapkan pada
semua instance komponen yang digunakan dalam desain lainnya.

Kesimpulan
Library dan component adalah alat penting dalam desain UI/UX di Figma. Mereka
membantu para desainer untuk membuat desain yang konsisten dan mudah
dikelola. Dalam bab ini, penulis buku telah membahas tentang cara menggunakan
library dan component di Figma. Setelah memahami cara menggunakan library dan
component di Figma, penulis buku dan pembaca dapat melanjutkan ke bab-bab
selanjutnya untuk mengeksplorasi topik-topik desain UI/UX yang lebih lanjut.

23
Bab 9: Menggunakan Plugin di Figma
Plugin adalah alat tambahan yang dapat digunakan untuk meningkatkan
fungsionalitas Figma. Figma memiliki banyak plugin yang dapat membantu para
desainer dalam mempercepat dan menyempurnakan proses desain. Dalam bab ini,
penulis buku akan membahas tentang cara menggunakan plugin di Figma.

Menambahkan Plugin di Figma

Untuk menggunakan plugin di Figma, para desainer harus terlebih dahulu
menambahkan plugin ke Figma mereka. Caranya adalah dengan membuka Plugin
Panel di toolbar, lalu memilih "Browse All Plugins". Setelah itu, para desainer dapat
memilih plugin yang ingin digunakan dan menambahkannya ke Figma.

Menggunakan Plugin di Figma

Setelah plugin berhasil ditambahkan ke Figma, para desainer dapat
menggunakannya dengan membuka Plugin Panel dan memilih plugin yang ingin
digunakan. Beberapa plugin populer di Figma meliputi:
● Content Reel: untuk menghasilkan konten placeholder di desain
● Stark: untuk memeriksa aksesibilitas warna pada desain
● Unsplash: untuk menambahkan gambar ke desain dari layanan Unsplash
● Map Maker: untuk menambahkan peta ke desain
Para desainer juga dapat mencari dan menambahkan plugin lainnya dari komunitas
plugin Figma.

Membuat Plugin di Figma

Selain menggunakan plugin yang telah tersedia, para desainer juga dapat membuat
plugin mereka sendiri di Figma. Figma memiliki dokumentasi yang lengkap tentang
cara membuat plugin di Figma.

Kesimpulan
Plugin adalah alat tambahan yang sangat berguna dalam desain UI/UX di Figma.
Mereka membantu para desainer dalam meningkatkan fungsionalitas Figma dan
mempercepat proses desain. Dalam bab ini, penulis buku telah membahas tentang
cara menggunakan plugin di Figma. Setelah memahami cara menggunakan plugin
di Figma, para desainer dapat mengeksplorasi plugin-plugin Figma yang lain dan
bahkan mencoba membuat plugin mereka sendiri untuk memperkaya pengalaman
desain mereka di Figma.

24
Bab 10: Desain Sistem dan Gaya Desain
Desain sistem dan gaya desain adalah hal penting dalam desain UI/UX yang dapat
membantu para desainer menciptakan tampilan desain yang konsisten dan mudah
dikenali. Dalam bab ini, penulis buku akan membahas tentang cara menggunakan
desain sistem dan gaya desain di Figma.

Desain Sistem
Desain sistem adalah serangkaian aturan dan panduan desain yang digunakan
untuk membangun tampilan desain yang konsisten. Desain sistem membantu para
desainer menciptakan pengalaman pengguna yang seragam dan mudah dikenali
pada setiap elemen desain. Beberapa contoh desain sistem yang populer antara
lain:
● Material Design dari Google
● Human Interface Guidelines dari Apple
● Fluent Design dari Microsoft
Para desainer juga dapat membuat desain sistem mereka sendiri dengan membuat
panduan desain yang konsisten dan mudah diikuti.

Gaya Desain
Gaya desain adalah konsep desain yang digunakan untuk menciptakan tampilan
desain yang unik dan mudah dikenali. Beberapa contoh gaya desain yang populer
antara lain:
● Flat design: menggunakan warna solid, tipografi sederhana, dan tidak ada
efek bayangan atau gradient
● Material design: menggunakan elemen tiga dimensi, bayangan, dan animasi
untuk menciptakan tampilan yang realistis
● Neomorphism: menggabungkan elemen flat design dengan bayangan dan
gradient untuk menciptakan tampilan yang menyerupai objek fisik
Para desainer dapat menggunakan gaya desain yang sudah ada atau menciptakan
gaya desain mereka sendiri untuk menciptakan tampilan desain yang unik dan
mudah dikenali.

Menerapkan Desain Sistem dan Gaya Desain di Figma

Figma menyediakan fitur-fitur yang memungkinkan para desainer untuk menerapkan
desain sistem dan gaya desain di Figma. Beberapa fitur tersebut antara lain:

● Komponen: komponen memungkinkan para desainer untuk membuat elemen

desain yang konsisten dan dapat digunakan kembali di seluruh desain.
Dengan menggunakan komponen, para desainer dapat memastikan bahwa
setiap elemen desain sesuai dengan panduan desain yang telah dibuat.

25
 ● Styles: styles memungkinkan para desainer untuk membuat gaya desain yang
konsisten untuk warna, tipografi, dan efek bayangan. Dengan menggunakan
styles, para desainer dapat memastikan bahwa setiap elemen desain memiliki
tampilan yang konsisten dengan gaya desain yang telah ditentukan.
● Grids: grids memungkinkan para desainer untuk membuat tata letak desain
yang konsisten. Dengan menggunakan grids, para desainer dapat
memastikan bahwa setiap elemen desain memiliki jarak dan proporsi yang
konsisten dengan desain sistem yang telah dibuat.

Kesimpulan
Desain sistem dan gaya desain adalah hal penting dalam desain UI/UX yang dapat
membantu para desainer menciptakan tampilan desain yang konsisten dan mudah
dikenali.

26
Bab 11: Tipografi dan Pemilihan Font
Tipografi dan pemilihan font memegang peranan penting dalam desain UI/UX. Font
yang dipilih dapat memengaruhi tampilan desain secara keseluruhan dan dapat
memperkuat pesan yang ingin disampaikan melalui desain tersebut. Oleh karena itu,
pemilihan font yang tepat adalah kunci untuk menciptakan desain yang efektif dan
profesional.

Pengertian Tipografi
Tipografi adalah seni dan teknik untuk menata tulisan dengan cara yang menarik
dan mudah dibaca. Tipografi mencakup pemilihan font, ukuran font, kerning, leading,
tracking, dan spasi antar huruf dan baris. Tipografi yang baik dapat membantu
meningkatkan kejelasan dan keterbacaan pesan yang ingin disampaikan.

Memilih Font yang Tepat

Memilih font yang tepat adalah langkah penting dalam proses desain. Ketika memilih
font, ada beberapa faktor yang harus dipertimbangkan, termasuk jenis font, ukuran
font, kejelasan, dan kemudahan pembacaan. Berikut adalah beberapa hal yang
perlu dipertimbangkan saat memilih font:
● Jenis Font: Ada banyak jenis font yang tersedia, termasuk serif, sans-serif,
script, dan display. Serif dan script sering digunakan untuk desain yang
formal, sedangkan sans-serif dan display biasanya digunakan untuk desain
yang lebih modern dan informal.
● Ukuran Font: Ukuran font yang dipilih harus disesuaikan dengan ukuran layar
atau media yang digunakan. Jika ukuran font terlalu kecil, maka pesan yang
ingin disampaikan dapat sulit dibaca. Sebaliknya, jika ukuran font terlalu
besar, maka tampilan desain dapat menjadi kacau dan tidak estetik.
● Kejelasan dan Kemudahan Pembacaan: Font yang dipilih harus mudah
dibaca dan jelas. Beberapa font mungkin tampak indah tetapi sulit dibaca
pada layar. Pastikan untuk memilih font yang mudah dibaca dan memastikan
pesan yang ingin disampaikan tersampaikan dengan jelas.

Kombinasi Font
Kombinasi font yang tepat dapat meningkatkan tampilan desain dan memberikan
pesan yang lebih jelas dan kuat. Saat memilih kombinasi font, pastikan untuk
memilih font yang berbeda jenis dan ukurannya, tetapi juga mengkomunikasikan
pesan yang sama. Beberapa contoh kombinasi font yang umum digunakan adalah
serif dan sans-serif, sans-serif dan script, atau sans-serif dan display.

27
Penggunaan Warna pada Font
Penggunaan warna pada font juga merupakan faktor penting dalam desain UI/UX.
Warna yang dipilih harus mudah dibaca pada latar belakang yang digunakan. Warna
font juga harus sesuai dengan warna keseluruhan dari desain.

Tipografi Responsif
Tipografi responsif adalah konsep yang memastikan tampilan font yang konsisten
pada berbagai ukuran layar atau media yang digunakan. Hal ini sangat penting
dalam desain responsif, yang memungkinkan desain untuk menyesuaikan tampilan
pada berbagai ukuran layar.

28
Bab 12: Warna dan Pemilihan Warna yang
Tepat
Warna adalah salah satu elemen penting dalam desain UI/UX. Penggunaan warna
yang tepat dapat membuat antarmuka pengguna terlihat menarik, mudah dipahami,
dan menyampaikan pesan dengan jelas. Namun, jika warna digunakan secara tidak
tepat, maka antarmuka pengguna dapat terlihat membingungkan dan tidak efektif
dalam menyampaikan pesan.

Dalam bab ini, kita akan membahas tentang pemilihan warna yang tepat dan
bagaimana cara menggunakan warna dalam desain UI/UX. Kami juga akan
membahas tentang psikologi warna dan bagaimana warna dapat mempengaruhi
emosi dan persepsi pengguna.

Teori Warna
Sebelum memilih warna, penting untuk memahami teori warna. Teori warna terdiri
dari tiga elemen yaitu warna primer, warna sekunder, dan warna tersier. Warna
primer adalah warna dasar yang tidak dapat dihasilkan dari warna lain. Warna primer
adalah merah, biru, dan kuning. Warna sekunder adalah warna yang dihasilkan dari
mencampurkan dua warna primer. Warna sekunder adalah ungu, hijau, dan oranye.
Warna tersier adalah warna yang dihasilkan dari mencampurkan warna primer
dengan warna sekunder.

Pemilihan Warna
Pemilihan warna yang tepat sangat penting untuk menciptakan desain yang menarik
dan mudah dipahami. Warna dapat digunakan untuk membedakan elemen,
menyoroti informasi penting, dan membuat tampilan antarmuka pengguna lebih
menarik. Ada beberapa hal yang harus dipertimbangkan saat memilih warna:
● Perhatikan tujuan desain Kamu dan pesan yang ingin disampaikan. Warna
harus mendukung tujuan desain dan menyampaikan pesan dengan jelas.
● Perhatikan audiens Kamu dan perasaan yang ingin Kamu bangkitkan dalam
mereka. Psikologi warna dapat mempengaruhi emosi dan persepsi pengguna.
● Hindari menggunakan terlalu banyak warna. Terlalu banyak warna dapat
membuat antarmuka pengguna terlihat membingungkan.
● Pastikan kontras yang cukup antara latar belakang dan teks. Ini akan
membuat teks lebih mudah dibaca.

29
Psikologi Warna
Psikologi warna adalah studi tentang bagaimana warna dapat mempengaruhi emosi
dan persepsi pengguna. Warna dapat membangkitkan emosi tertentu dan
memengaruhi cara pengguna merespons antarmuka pengguna. Berikut adalah
beberapa contoh bagaimana warna dapat mempengaruhi emosi dan persepsi
pengguna:
● Merah: Merah sering dikaitkan dengan energi, kekuatan, dan gairah. Warna
ini juga dapat membangkitkan perasaan cemas atau agresif.
● Biru: Biru sering dikaitkan dengan ketenangan, kepercayaan, dan keamanan.
Warna ini juga dapat membangkitkan perasaan dingin atau jauh.
● Hijau: Hijau sering dikaitkan dengan keseimbangan, keharmonisan, dan
kesehatan. Warna ini juga dapat membangkitkan perasaan bosan atau pasif

30
Bab 13: Desain Responsif dan Adaptif
Dalam era digital saat ini, desain responsif dan adaptif sangat penting untuk
memastikan pengalaman pengguna yang optimal di berbagai perangkat dan layar.
Dalam bab ini, Kamu akan belajar tentang desain responsif dan adaptif, serta
bagaimana menerapkannya dalam desain UI/UX menggunakan Figma.

Pengenalan Desain Responsif dan Adaptif

Desain responsif adalah pendekatan desain web di mana halaman web dirancang
untuk menyesuaikan ukuran layar dan resolusi layar pengguna. Hal ini memastikan
bahwa halaman web tetap terlihat bagus dan mudah digunakan di semua perangkat,
termasuk desktop, laptop, tablet, dan ponsel.

Desain adaptif adalah pendekatan desain web di mana situs web memiliki beberapa
tata letak yang berbeda, tergantung pada ukuran layar dan resolusi layar pengguna.
Dalam desain adaptif, tata letak situs web akan berubah secara otomatis untuk
menyesuaikan ukuran layar dan resolusi layar, sehingga pengguna akan melihat
tampilan yang optimal sesuai dengan perangkat yang digunakan.

Memulai Desain Responsif dan Adaptif di Figma

Figma memiliki beberapa fitur dan alat yang memudahkan Kamu untuk merancang
desain responsif dan adaptif. Salah satu fitur ini adalah fitur layout grid, yang
memungkinkan Kamu membuat grid yang dapat diatur dengan mudah dan
menyesuaikan elemen desain dengan ukuran layar yang berbeda.

Langkah-langkah untuk memulai desain responsif dan adaptif di Figma adalah

sebagai berikut:

● Pertama, tentukan ukuran layar yang akan digunakan dalam desain responsif
dan adaptif. Misalnya, Kamu dapat menggunakan ukuran layar desktop,
laptop, tablet, dan ponsel.
● Selanjutnya, buat layout grid yang sesuai dengan ukuran layar yang akan
digunakan. Kamu dapat menyesuaikan grid sesuai dengan ukuran layar
dengan menggunakan fitur layout grid di Figma.
● Setelah itu, buat tata letak untuk setiap ukuran layar yang akan digunakan.
Kamu dapat membuat tata letak dengan menggabungkan elemen desain
seperti teks, gambar, dan ikon menggunakan frame dan group di Figma.
● Terakhir, pastikan bahwa tata letak yang Kamu buat dapat menyesuaikan
ukuran layar yang berbeda dengan benar. Kamu dapat menggunakan fitur
preview di Figma untuk memeriksa tampilan tata letak di berbagai ukuran
layar.

31
Tips untuk Desain Responsif dan Adaptif yang Baik
Berikut adalah beberapa tips untuk membuat desain responsif dan adaptif yang baik:
● Pertama, pastikan bahwa desain Kamu tetap konsisten di semua ukuran
layar. Hal ini dapat dilakukan dengan memastikan bahwa elemen desain
memiliki proporsi yang sama di semua ukuran layar.
● Selanjutnya, gunakan font yang mudah dibaca di semua ukuran layar.
Beberapa font mungkin sulit dibaca pada layar yang lebih kecil, sehingga
pastikan untuk memilih font yang mudah dibaca pada semua ukuran layar.
● Terakhir, pastikan bahwa navigasi situs web Kamu tetap mudah digunakan di
semua ukuran layar.

32
Bab 14: Interaksi dan Animasi di Figma
Interaksi dan animasi adalah elemen penting dalam desain UI/UX modern. Mereka
membantu memperbaiki pengalaman pengguna dengan memberikan feedback yang
tepat dan menarik serta membuat tampilan menjadi lebih hidup dan menarik. Dalam
bab ini, kita akan membahas cara membuat interaksi dan animasi di Figma.

Menggunakan Fitur Prototyping

Figma memiliki fitur prototyping yang memungkinkan kita membuat interaksi antara
elemen desain. Dalam mode prototyping, kita dapat menambahkan hotspot pada
elemen desain dan menghubungkannya dengan halaman atau frame lain. Kita juga
dapat menentukan jenis transisi atau animasi yang akan digunakan.

Menambahkan Animasi
Untuk menambahkan animasi pada elemen desain, kita dapat menggunakan fitur
animasi di Figma. Dalam fitur ini, kita dapat menentukan jenis animasi yang akan
digunakan dan bagaimana animasi tersebut akan diterapkan pada elemen desain.
Ada beberapa jenis animasi yang dapat digunakan, seperti animasi fade, slide,
scale, dan rotate.

Menerapkan Prinsip Animasi

Untuk membuat animasi yang efektif dan menarik, kita perlu menerapkan prinsip
animasi yang tepat. Beberapa prinsip animasi yang penting untuk dipahami antara
lain:
● Timing: Menentukan waktu yang tepat untuk menerapkan animasi.
● Ease in dan ease out: Memberikan efek perlahan pada awal dan akhir
animasi untuk membuatnya terlihat lebih alami.
● Anticipation: Membuat objek mengantisipasi gerakan sebelum melakukan
animasi untuk memberikan efek yang lebih hidup.
● Follow through dan overlapping action: Membuat elemen desain tetap
bergerak setelah animasi selesai untuk memberikan efek yang lebih alami.

Memperhatikan Konsistensi
Konsistensi adalah kunci dalam membuat animasi yang efektif dan menarik. Kita
perlu memastikan bahwa animasi yang digunakan konsisten dengan tema dan gaya
desain yang digunakan. Selain itu, kita juga perlu mempertimbangkan konsistensi
dalam hal waktu, kecepatan, dan jenis animasi yang digunakan.

33
Menguji dan mengulang
Setelah membuat animasi, kita perlu mengujinya untuk memastikan bahwa animasi
tersebut efektif dan memberikan pengalaman pengguna yang baik. Kita dapat
menguji animasi dengan melakukan prototyping dan melihat bagaimana pengguna
meresponsnya. Jika diperlukan, kita dapat melakukan pengulangan dan perbaikan
untuk meningkatkan efektivitas animasi.

Kesimpulan
Interaksi dan animasi adalah elemen penting dalam desain UI/UX modern. Dalam
bab ini, kita telah membahas cara membuat interaksi dan animasi di Figma dengan
menggunakan fitur prototyping dan animasi. Kita juga telah membahas prinsip
animasi yang perlu diperhatikan dan pentingnya konsistensi dalam membuat
animasi. Selain itu, kita juga telah membahas pentingnya menguji dan mengulang
untuk memastikan animasi yang dibuat efektif dan memberikan pengalaman
pengguna yang baik.

34
Bab 15: Kolaborasi dan Sharing di Figma
Figma tidak hanya menyediakan fitur desain yang powerful, tetapi juga menyediakan
kemampuan kolaborasi yang memungkinkan tim desain bekerja bersama secara
online. Dalam bab ini, Kamu akan mempelajari tentang bagaimana bekerja secara
bersamaan dengan orang lain di Figma, serta bagaimana berbagi hasil desain Kamu
dengan klien atau pihak lain yang membutuhkan.

Mengundang Kolaborator
Kamu dapat mengundang anggota tim lain ke dalam file Figma Kamu dengan
mudah. Caranya adalah dengan klik pada nama file di panel sebelah kiri kemudian
pada panel yang muncul di sebelah kanan, klik tombol "Invite" dan masukkan alamat
email orang yang ingin Kamu ajak bekerja sama. Setelah itu, mereka akan
menerima email undangan yang berisi tautan untuk bergabung ke dalam tim Anda.

Membagikan Prototipe
Salah satu fitur paling berguna di Figma adalah kemampuan untuk membuat
prototipe interaktif dari desain Anda. Kamu dapat membagikan prototipe ini dengan
anggota tim lain atau klien Kamu dengan mudah. Caranya adalah dengan mengklik
tombol "Share" yang terletak di sudut kanan atas jendela editor desain Anda,
kemudian pilih "Prototype" dan pilih siapa saja yang dapat mengaksesnya. Kamu
juga dapat menentukan tautan prototipe tersebut agar hanya dapat diakses dengan
password, atau hanya dapat diakses oleh orang yang ditentukan.

Mengontrol Hak Akses

Figma juga memberikan kontrol penuh terhadap hak akses Kamu dan anggota tim
Kamu pada file desain. Kamu dapat mengatur siapa saja yang dapat mengedit file
desain, siapa saja yang dapat melihatnya, dan siapa saja yang dapat memberikan
komentar. Caranya adalah dengan mengklik tombol "Share" dan kemudian mengatur
izin akses pada panel yang muncul.

Menggunakan Fitur Komentar

Dalam tim desain, seringkali terjadi diskusi atau perdebatan mengenai desain. Untuk
mempermudah komunikasi, Figma menyediakan fitur komentar di setiap elemen
desain. Caranya adalah dengan mengklik pada elemen desain yang ingin Kamu
komentari, kemudian klik tombol "Add Comment" yang terletak di panel kanan
jendela desain. Kamu juga dapat menandai anggota tim lain untuk meminta
pendapat atau saran mereka.

35
Menggunakan Versi Kontrol
Terakhir, Figma juga menyediakan fitur versi kontrol yang memungkinkan Kamu
untuk melihat revisi terbaru dari desain Anda. Kamu dapat mengakses fitur ini
dengan mengklik tombol "Version History" yang terletak di sudut kanan bawah
jendela desain. Dari sana, Kamu dapat melihat setiap revisi yang telah dibuat,
membandingkan revisi yang berbeda, serta mengembalikan revisi terdahulu jika
perlu.

Kesimpulan
Dalam bab ini, Kamu telah mempelajari bagaimana bekerja secara bersamaan
dengan orang lain di Figma dan berbagi hasil desain Kamu dengan klien atau pihak
lain yang membutuhkan.

36
Bab 16: Membuat Prototipe Interaktif
Membuat prototipe interaktif adalah bagian penting dari proses desain UI/UX karena
memungkinkan untuk menguji dan mengevaluasi pengalaman pengguna yang
dihasilkan. Dalam Figma, kita dapat membuat prototipe interaktif dengan mudah
menggunakan fitur prototyping yang disediakan. Pada bab ini, kita akan membahas
cara membuat prototipe interaktif dengan Figma.

Menambahkan Tautan dan Transisi

Pertama-tama, buka desain yang ingin dijadikan prototipe dan pilih frame yang ingin
dihubungkan dengan frame lain. Kemudian, klik tombol "Prototype" di panel atas dan
tambahkan tautan ke frame lain dengan mengklik area yang diinginkan dan memilih
frame yang akan dihubungkan. Setelah itu, atur transisi antara frame dengan
memilih salah satu jenis transisi yang tersedia seperti push, dissolve, atau slide.

Mengatur Interaksi
Setelah menambahkan tautan dan transisi, kita dapat mengatur interaksi pada frame
target. Kita dapat menambahkan interaksi seperti klik, swipe, dan hover, serta
menambahkan aksi seperti membuka overlay atau menampilkan elemen yang
tersembunyi.

Membuat Animasi
Selain menambahkan tautan dan transisi, kita juga dapat membuat animasi pada
prototipe interaktif kita. Figma menyediakan berbagai macam jenis animasi seperti
fade, slide, dan scale. Untuk menambahkan animasi, pilih elemen yang ingin
dianimasikan dan atur tipe animasi, durasi, dan penundaan sesuai keinginan.

Menguji dan Berbagi Prototipe

Setelah selesai membuat prototipe interaktif, kita dapat mengujinya untuk
memastikan pengalaman pengguna yang dihasilkan sesuai dengan yang
diharapkan. Kita dapat mengujinya secara langsung di Figma atau membagikannya
dengan orang lain untuk mendapatkan umpan balik.

Menggunakan Figma Mirror

Figma Mirror adalah aplikasi mobile yang dapat digunakan untuk menguji prototipe
interaktif secara langsung pada perangkat mobile. Untuk menggunakan Figma
Mirror, pertama-tama unduh aplikasinya dari App Store atau Google Play Store, lalu
buka prototipe yang ingin diuji di Figma dan buka Figma Mirror di perangkat mobile.

37
Kita dapat menavigasi prototipe dan menguji interaksi langsung pada perangkat
mobile.

Kesimpulan
Dengan membuat prototipe interaktif di Figma, kita dapat menguji dan mengevaluasi
pengalaman pengguna yang dihasilkan dengan mudah. Selain itu, kita juga dapat
berbagi prototipe dengan orang lain untuk mendapatkan umpan balik dan
mengembangkan desain yang lebih baik.

38