Panduan Dasar Figma untuk Frontend Developer (Dev Mode)

Figma Adalah Bahasa Komunikasi UI/UX

Di dunia kerja profesional, kamu tidak akan membuat desain website langsung dari kepala lalu menerjemahkannya ke CSS. Kamu akan menerima sebuah link dari tim UI/UX Designer yang berisi file desain Figma. Tugasmu (sebagai Frontend) adalah men-slicing (memotong dan menerjemahkan) gambar statis tersebut menjadi kode HTML/CSS yang Pixel-Perfect (mirip 100%).

Berikut adalah 3 skill wajib di Figma yang harus dikuasai Programmer.

1. Aktifkan Dev Mode (Mode Pengembang)

Di pojok kanan atas layar Figma (di sebelah tombol Share), terdapat tombol saklar (toggle) berbentuk ikon kode . Ini adalah Dev Mode. Saat kamu menyalakannya, tampilan panel sebelah kanan akan berubah total menjadi sangat teknis.

Ketika kamu mengklik sebuah tombol di desain, panel Dev Mode akan langsung menyuguhkan kode CSS instan untuk ukuran Width, Height, Background Color (dalam kode Hex #FF0000), Border Radius, hingga Box Shadow-nya. (Catatan: Kode posisi/layout dari Figma biasanya jelek, jadi tiru saja nilai warna dan ukurannya, jangan copy-paste mentah-mentah aturan posisinya!).

2. Mengukur Margin dan Jarak (Pixel-Perfect)

Ini adalah rahasia membuat desainmu rapi.

1. Klik (pilih) sebuah elemen, misalnya teks "Judul Artikel".
2. Tahan tombol ALT (di Windows) atau OPTION (di Mac) di keyboardmu.
3. Geser *kursor mouse*-mu ke arah elemen lain di sekitarnya (Misalnya geser ke arah tombol di bawahnya).
4. Figma akan memunculkan garis merah beserta angka ukurannya dalam pixel (Misal: 24). Angka itulah yang harus kamu tulis sebagai margin-bottom: 24px; di file CSS-mu!

3. Cara Meng-Export Aset (Gambar dan Ikon)

Kamu butuh gambar latar belakang atau ikon dari desain tersebut untuk ditaruh ke dalam HTML-mu? Jangan gunakan aplikasi *Snipping Tool/Screenshot* layar! Itu akan merusak resolusinya.

• Klik elemen gambar atau ikon yang kamu inginkan.
• Lihat panel paling kanan bawah, cari menu Export (tanda plus +).
• Pilih formatnya. Aturan Emas: Pilih format SVG untuk ikon-ikon vektor yang tipis atau logo perusahaan. Pilih format JPG/WebP jika itu adalah gambar foto orang/pemandangan.
• Klik tombol Export, dan aset yang tajam siap dimasukkan ke folder /public kodemu.