.png)
BELAJAR FIGMA
Apa Itu Figma?
Figma adalah aplikasi desain grafis berbasis web yang digunakan untuk membuat UI (User Interface) dan UX (User Experience). Keunggulan utamanya adalah kemudahan kolaborasi secara real-time tanpa perlu instalasi software—cukup lewat browser. Figma memungkinkan beberapa orang bekerja dalam satu file desain, mirip seperti Google Docs untuk desain.
Fitur-Fitur Utama Figma
1. Kolaborasi Real-Time
Semua perubahan yang dibuat oleh tim langsung terlihat tanpa harus mengirim ulang file.
2. Cloud-Based
Bekerja langsung melalui browser tanpa instalasi. File otomatis tersimpan di cloud.
3. Komponen & Variants
Komponen adalah elemen desain reusable. Variants memungkinkan berbagai versi dalam satu komponen (misal: tombol hover vs klik).
4. Auto Layout
Mempermudah penyusunan elemen agar responsif terhadap perubahan ukuran.
5. Prototyping
Tambahkan interaksi antar-artboard seperti klik, hover, animasi transisi.
6. Plugin
Figma mendukung berbagai plugin seperti Unsplash (gambar), Iconify (ikon), dan Content Reel (konten dummy).
7. Developer Handoff
Developer bisa melihat jarak, ukuran, dan kode CSS dari elemen desain.
Menu dan Interface Figma
Berikut elemen utama di interface Figma:
Menu/Panel | Fungsi
Toolbar | Alat desain seperti Select, Frame, Shape, Pen, Text, dan Hand tool.
Layers Panel | Menampilkan struktur elemen dan artboard dalam bentuk hierarki.
Assets Panel | Tempat komponen dan library disimpan untuk digunakan ulang.
Design Panel | Mengatur properti objek: ukuran, posisi, warna, typografi, efek, dsb.
Prototype Panel | Menghubungkan artboard untuk membuat alur interaktif.
Inspect Panel | Melihat spesifikasi desain untuk kebutuhan developer.
Menu File | Opsi menyimpan, mengekspor, berbagi file, serta pengaturan akun.
Langkah-Langkah Belajar Figma untuk Pemula
1. Membuat Akun
Kunjungi [figma.com](https://www.figma.com), klik "Sign Up", dan buat akun gratis.
2. Membuat File Desain Baru
Klik tombol "New Design File" dari dashboard untuk memulai proyek baru.
3. Memahami Workspace (Kanvas)
Gunakan Frame Tool (F) untuk membuat layout layar (misalnya ukuran mobile, desktop).
Tambahkan elemen seperti Rectangle (R), Circle (O), Text (T), dan Image.
4. Mengatur Layout & Auto Layout
Terapkan Grid dan Constraints agar desain responsif.
Gunakan Auto Layout untuk membuat komponen dinamis seperti daftar menu.
5. Membuat Komponen dan Variants
Seleksi elemen → klik kanan → pilih "Create Component".
Variants bisa ditambahkan untuk tombol dengan berbagai state (default, hover, disabled).
6. Menambahkan Interaksi & Prototipe
Buka tab Prototype, tarik garis antar frame untuk membuat flow.
Atur trigger (misalnya: "On Click") dan animation (misalnya: "Smart Animate").
7. Menggunakan Plugin
Klik kanan → pilih "Plugins" → cari plugin seperti Unsplash, Figmotion, Iconify.
8. Berbagi & Kolaborasi
Klik tombol "Share", atur izin (View/Edit), dan bagikan tautan ke tim.
9. Handoff ke Developer
Gunakan tab Inspect untuk menunjukkan nilai CSS, jarak, warna, dan font kepada developer.
Tips Belajar Figma Secara Efektif
Mulailah dari proyek sederhana seperti halaman login atau profil.
Gunakan Figma Community untuk mencari inspirasi desain atau download UI kit gratis.
Ikuti latihan membuat komponen, auto layout, dan interaksi dasar.
Pelajari shortcut keyboard agar lebih produktif.
1. [Masivotech: Panduan Awal Figma untuk Desain UI/UX](https://masivotech.com/panduan-awal-figma-untuk-desain-ui-ux-yang-efektif/)
2. [Creativestation: Eksplorasi Kreativitas di Platform Figma](https://creativestation.id/eksplorasi-kreativitas-di-platform-figma-untuk-pemula/)
3. [Blog Advan: Panduan Menggunakan Figma untuk Pemula](https://blog.advan.id/10404/panduan-menggunakan-aplikasi-desain-figma-untuk-pemula/)
0 komentar:
Posting Komentar