MODUL 6

UI/UX Design

Mastering Figma Tools

Tim Kelas Desain

Seluruh konsep dari Modul 1 hingga 5 kini siap dipraktikkan langsung di software. Bab ini membahas penguasaan Figma secara menyeluruh — dari antarmuka dasar, Auto Layout, Component & Variants, hingga fitur Prototype dan kolaborasi real-time — sebagai bekal teknis wajib sebelum menguji hasil karya ke pengguna pada bab berikutnya.

Mengenal Antarmuka Figma

Definisi

Figma adalah software desain berbasis cloud yang menjadi standar industri untuk merancang UI/UX secara kolaboratif. Sebelum berkarya, penting memahami empat area utama antarmukanya.

Empat Area Utama

•Toolbar — kumpulan alat: shape, pen, teks, frame.

•Layers Panel — daftar seluruh elemen & urutan tumpukannya.

•Canvas — area kerja utama tempat mendesain.

•Properties Panel — pengaturan detail elemen yang dipilih.

Pengaplikasian

Sesuai elemen CP Perangkat Lunak Desain, penguasaan antarmuka software sesuai Prosedur Operasional Standar (POS) adalah kompetensi wajib sebelum mempraktikkan seluruh materi bab sebelumnya secara langsung di Figma.

Toolbar

Layers

Canvas

Properties

Frame & Auto Layout

Definisi

Frame adalah wadah berukuran tetap (misal ukuran layar HP) tempat elemen desain diletakkan. Auto Layout membuat elemen di dalam frame menyesuaikan ukuran & posisi secara otomatis saat kontennya berubah.

Manfaat Auto Layout

•Elemen tersusun rapi tanpa mengatur jarak manual.

•Desain tetap konsisten meski konten bertambah/berkurang.

•Mempercepat proses membuat variasi komponen.

Pengaplikasian

Auto Layout adalah "mesin otomatis" dari sistem grid & spacing yang telah dipelajari pada Modul 4: Visual Design & Style Guide.

Shape, Pen Tool & Boolean Operation

Definisi

Shape tool membuat bentuk dasar (persegi, lingkaran, garis); Pen Tool menggambar bentuk custom secara presisi; Boolean Operation menggabungkan/memotong beberapa bentuk menjadi bentuk baru.

Empat Jenis Boolean

•Union — menggabungkan seluruh bentuk.

•Subtract — memotong bentuk satu dengan lainnya.

•Intersect — mengambil bagian irisan saja.

•Exclude — kebalikan dari irisan.

Pengaplikasian

Kombinasi ketiga alat ini digunakan untuk membuat ikon atau ilustrasi custom yang tidak tersedia di library bawaan.

Component & Variants

Definisi

Component adalah elemen master yang bisa digandakan menjadi instance di banyak tempat. Variants memungkinkan satu component memiliki beberapa versi (default, hover, disabled) dalam satu set.

Manfaat Utama

•Perubahan pada master otomatis diterapkan ke seluruh instance.

•Mempercepat proses desain yang berulang.

•Menjaga konsistensi sesuai Style Guide pada Modul 4.

Pengaplikasian

Fitur ini adalah implementasi langsung dari konsep "Komponen UI & Consistency" yang telah dipelajari sebelumnya.

Styles & Assets

Definisi

Styles adalah cara menyimpan aturan warna & tipografi (Color Styles, Text Styles) agar dapat dipakai ulang. Assets adalah panel tempat menyimpan komponen & style yang telah dibuat.

Langkah Praktis

1.Buat style warna & teks sesuai palet pada Modul 4.

2.Simpan sebagai Style agar bisa dipanggil ulang kapan saja.

3.Kelola melalui Assets panel agar mudah ditemukan tim.

Pengaplikasian

Styles & Assets adalah "mesin" di balik Style Guide, memastikan seluruh anggota tim memakai warna & font yang sama persis.

Primary Blue

Heading Style

Button Component

Prototype Panel di Figma

Definisi

Panel Prototype di Figma digunakan untuk menautkan antar-frame, menentukan trigger, action, dan animasi transisi — mempraktikkan langsung konsep interaktivitas dari Modul 5.

Langkah Praktis

1.Pilih elemen, lalu tarik garis panah ke frame tujuan di mode Prototype.

2.Pilih trigger yang sesuai (On Click, On Drag, dan sebagainya).

3.Atur jenis transisi (Instant, Smart Animate, dan sebagainya).

Pengaplikasian

Fitur Smart Animate secara khusus berguna membuat transisi yang halus antar frame tanpa perlu menulis kode.

Kolaborasi & Plugin

Definisi

Figma memungkinkan banyak orang mengedit file yang sama secara real-time, lengkap dengan fitur komentar. Plugin adalah alat tambahan pihak ketiga untuk memperluas fungsi Figma.

Fitur Kolaborasi

•Kursor tiap anggota tim terlihat langsung berwarna berbeda.

•Fitur komentar untuk diskusi pada elemen tertentu.

•Version History untuk melihat & mengembalikan versi sebelumnya.

Pengaplikasian

Kemampuan kolaborasi real-time inilah yang menjadi alasan utama Figma dipilih sebagai tools utama industri, sebagaimana dibahas pada Modul 1.

Kesimpulan

Mastering Figma Tools adalah jembatan antara teori UI/UX yang telah dipelajari dengan praktik nyata di software industri. Dengan menguasai antarmuka, Auto Layout, Component, Styles, Prototype, hingga fitur kolaborasi, peserta didik siap menghasilkan karya desain yang siap diuji langsung ke pengguna pada Modul 7: Usability Testing.

E-Book Modul Ini

Baca ringkasan lengkap materi Mastering Figma Tools dalam format e-book yang bisa dibuka langsung tanpa perlu mengunduh.