Desain jarang dikerjakan sendirian. Designer menerima masukan dari product manager, berdiskusi dengan sesama designer, lalu menyerahkan hasilnya ke developer. Di alur kerja lama, setiap langkah ini berarti mengirim file, menunggu balasan, lalu menggabungkan masukan secara manual. Figma memindahkan semua langkah itu ke dalam satu file.

Komentar yang efektif

Komentar di Figma menempel pada objek, bukan pada file secara umum. Itu sebabnya komentar jauh lebih jelas daripada pesan chat seperti "tombol di layar kedua kurang besar". Cara memakainya: tekan C, klik objek yang dimaksud, tulis masukan, lalu @mention orang yang perlu menindaklanjutinya.

Contoh komentar yang baik: "@Dimas, tombol Bayar ini area sentuhnya masih 36 px. Bisa dinaikkan ke 44 × 44 supaya mudah diketuk?" Komentar ini menunjuk objek yang jelas, menyebut masalahnya, dan menyarankan solusi.

Berbagi dengan izin yang tepat

Saat membagikan tautan, pilih izin dengan sengaja. Klien atau calon pengguna cukup diberi can view. Rekan designer yang ikut mengerjakan diberi can edit. Memberi akses edit kepada semua orang memperbesar risiko perubahan yang tidak disengaja.

Riwayat versi dan branching

Riwayat versi tersimpan otomatis, tetapi kamu juga bisa menyimpan titik versi dengan nama, misalnya "Sebelum revisi klien". Kalau revisi ternyata tidak disukai, kamu bisa kembali ke titik itu.

Branching bekerja mirip branch di Git. Kamu membuat cabang untuk bereksperimen, misalnya mencoba navigasi baru, tanpa mengganggu file utama. Kalau eksperimennya berhasil, cabang di-merge. Fitur ini tersedia di paket Organization ke atas.

Dev Mode adalah tampilan khusus untuk developer, diaktifkan dengan Shift + D. Di sini developer tidak mengedit desain, melainkan membaca spesifikasinya.

Untuk mengukur jarak antara dua layer, pilih satu layer lalu hover ke layer lain sambil menahan Alt. Figma menampilkan jaraknya dalam piksel. Ini jauh lebih akurat daripada menebak dengan penggaris di layar.

Contoh: membaca code snippet

Deck menampilkan tombol "Bayar" yang di-inspect. Dev Mode menghasilkan snippet CSS berikut.

.button {
  display: flex;
  padding: 12px 24px;
  gap: 8px;
  border-radius: 12px;
  background: #7C5CFF;
}

Coba hubungkan dengan bab sebelumnya. display: flex dan gap: 8px berasal dari Auto Layout dengan gap 8. padding: 12px 24px berarti padding atas dan bawah 12, kiri dan kanan 24. background adalah fill tombol. Kalau designer memakai Auto Layout dengan rapi, snippet seperti ini hampir bisa langsung dipakai.

Satu catatan penting: snippet adalah titik awal, bukan kode akhir. Developer tetap perlu menyesuaikannya dengan konvensi proyek, misalnya mengganti #7C5CFF dengan custom property var(--warna-primer) yang sudah ada di codebase. Di sinilah Code Connect membantu, karena Dev Mode bisa menampilkan kode komponen asli dari codebase, bukan sekadar CSS hasil terjemahan.

Status Ready for dev

Tandai frame atau Section dengan status Ready for dev saat desain siap dikerjakan. Developer tidak perlu menebak layar mana yang masih berubah. Kalau desain berubah setelah ditandai, Dev Mode bisa membandingkan perubahannya.

Figma Community adalah gudang file, template, UI kit, plugin, dan widget buatan pengguna dari seluruh dunia. Banyak yang gratis untuk diduplikasi.

Cara menjalankan plugin: tekan Ctrl + K, ketik nama plugin, lalu pilih Run.

Hal baru di 2026 adalah generative plugins: kamu bisa membuat plugin sendiri cukup dengan menulis prompt.

Plugin adalah kode buatan pihak lain yang berjalan di filemu. Sebelum memasang plugin, periksa izin data yang dimintanya, terutama untuk file kantor atau klien.

1. Designer menyelesaikan layar Checkout dan menandai Section-nya Ready for dev.
2. Developer membuka file dengan Dev Mode, mengukur jarak dengan Alt, dan menyalin snippet tombol Bayar.
3. Developer menemukan teks abu-abu yang kontrasnya rendah, lalu menulis komentar dengan @mention ke designer.
4. Designer memperbaiki warnanya, dan Dev Mode menunjukkan perubahan itu kepada developer.

Tidak ada file yang dikirim bolak-balik, dan semua diskusi tersimpan di objek yang dibicarakan.

• Memberi masukan lewat chat, bukan komentar yang menempel pada objek.
• Membagikan tautan dengan akses can edit ke semua orang.
• Menyalin snippet Dev Mode mentah-mentah tanpa menyesuaikan dengan codebase.
• Memasang plugin tanpa memeriksa izin datanya.