Setiap aplikasi yang kamu pakai, dari aplikasi ojek online sampai dompet digital, dimulai dari gambar layar. Sebelum satu baris kode ditulis, tim perlu sepakat: tombol diletakkan di mana, warnanya apa, teksnya sebesar apa, dan apa yang terjadi saat tombol ditekan. Kesepakatan itu dibuat di alat desain antarmuka, dan saat ini alat yang paling banyak dipakai untuk pekerjaan itu adalah Figma.

Kelas ini membawamu dari mengenal alatnya, lalu dasar desain, fitur inti seperti Auto Layout dan komponen, kolaborasi dengan tim, sampai fitur AI terbaru. Di akhir kelas kamu diharapkan mampu menavigasi Figma, membuat layout responsif, membangun komponen, membuat prototipe, dan menyerahkan desain ke developer.

Karena Figma sendiri tidak bisa dijalankan di dalam latihan kode di sini, banyak latihan di kelas ini memakai HTML dan CSS. Itu bukan kebetulan: hampir setiap konsep di Figma punya padanan langsung di kode web. Auto Layout mirip flexbox, constraints mirip CSS responsif, variables mirip CSS custom properties. Memahami jembatan ini akan membuatmu jauh lebih mudah bekerja sama dengan developer, atau menjadi designer yang paham kode.

Figma adalah platform desain antarmuka berbasis cloud untuk merancang, membuat prototipe, dan menyerahkan desain ke developer. Semua itu terjadi dalam satu file yang bisa dibuka banyak orang sekaligus. Ada tiga pembeda yang perlu kamu ingat.

Bayangkan perbedaannya seperti mengetik tugas kelompok di dokumen yang dikirim lewat chat dibandingkan mengetik bersama di satu dokumen online. Pada cara pertama, setiap orang memegang salinan sendiri dan kamu harus menggabungkan perubahan secara manual. Pada cara kedua, semua orang melihat versi yang sama, saat itu juga. Figma membawa cara kedua ke dunia desain.

Siapa yang memakai Figma

Figma bukan hanya untuk designer. Penggunanya antara lain:

• UI/UX dan product designer yang merancang layar dan alur.
• Developer front-end dan mobile yang membaca ukuran, warna, dan jarak dari desain.
• Product manager yang meninjau alur dan memberi komentar.
• Tim marketing dan brand yang membuat aset visual.
• Pelajar dan pengajar yang belajar atau mengajar desain.

Artinya, walaupun kamu bercita-cita jadi developer, kemampuan membaca file Figma tetap berguna. Kamu akan sering menerima tautan Figma dari designer dan perlu tahu cara mengambil informasi dari sana.

Figma sekarang bukan hanya satu alat desain UI, melainkan keluarga produk. Kamu tidak perlu menguasai semuanya. Fokus kelas ini adalah Figma Design, Dev Mode, dan sedikit FigJam, tetapi kamu sebaiknya tahu peta lengkapnya.

Cara mudah mengingatnya: Design untuk merancang layar, Dev Mode untuk developer, FigJam untuk berpikir bersama sebelum mendesain. Produk lain melayani kebutuhan khusus seperti presentasi, ilustrasi, aset marketing, situs, dan prototipe dari prompt.

Sebelum alat berbasis cloud populer, alur kerja desain sering terlihat seperti ini: designer membuat file di komputernya, mengekspor gambar, lalu mengirimkannya lewat email atau chat. Masalahnya menumpuk dengan cepat.

Nama file seperti final_v3_revisi_FIX mungkin terdengar lucu, tapi di tim sungguhan ini menimbulkan kerugian nyata. Developer bisa saja membangun layar dari versi yang sudah usang, lalu harus mengulang pekerjaannya. Dengan satu tautan Figma, pertanyaan "ini versi yang mana" tidak muncul lagi.

Poin ketiga juga penting untuk developer. Tanpa spesifikasi, developer menebak: apakah jarak ini 15 atau 16 piksel, apakah warnanya ungu yang ini atau yang itu. Dev Mode menghilangkan tebakan itu karena ukuran, warna, dan potongan kode bisa dibaca langsung dari desain.

Menyiapkan Figma cukup cepat. Ikuti empat langkah berikut.

1. Buat akun. Daftar gratis di figma.com dengan email atau akun Google.
2. Pilih platform. Pakai browser, atau unduh aplikasi desktop untuk Windows atau macOS. Keduanya membuka file yang sama karena file tersimpan di cloud.
3. Buat Design file. Dari beranda, buat file Design baru dan beri nama yang jelas, misalnya "Latihan Login", bukan "Untitled".
4. Buka Community. Duplikasi template dan UI kit gratis untuk dipelajari.

Paket Starter yang gratis sudah cukup untuk belajar. Kalau kamu pelajar atau pengajar, kamu bisa mengajukan akses Figma for Education.

Contoh: membedah UI kit dari Community

Langkah keempat sering dilewatkan pemula, padahal sangat bermanfaat. Misalnya kamu menduplikasi sebuah UI kit aplikasi mobile. Coba lakukan ini:

1. Buka file hasil duplikasi, lalu klik salah satu layar.
2. Lihat panel Layers di kiri untuk mengetahui bagaimana layar itu disusun.
3. Klik sebuah tombol dan perhatikan panel kanan: ukuran, warna, dan jaraknya.
4. Bandingkan dua layar yang mirip dan cari elemen yang dipakai ulang.

Dengan membedah file buatan orang lain, kamu belajar kebiasaan profesional seperti penamaan layer dan pemakaian komponen, sebelum kamu sendiri mempelajarinya di bab-bab berikutnya.

• Menganggap Figma hanya untuk designer. Developer, product manager, dan tim marketing juga memakainya setiap hari.
• Menyimpan salinan file sendiri-sendiri. Kekuatan Figma ada pada satu file bersama. Membuat duplikat untuk setiap orang mengembalikanmu ke masalah versi yang membingungkan.
• Memberi nama file asal-asalan. File bernama "Untitled" menyulitkan tim mencari pekerjaanmu. Biasakan memberi nama yang jelas sejak langkah ketiga.
• Langsung mendesain dari nol tanpa referensi. Membedah UI kit dari Community memberimu contoh nyata cara file yang rapi disusun.