Mana yang Lebih Worth It Figma MCP vs Console MCP?

Dengan AI yang mulai merambah tidak hanya ke workflow developer tapi juga ke cara kerja desainer sehari-hari, ada satu pertanyaan yang sering muncul:

Bagaimana caranya supaya AI benar-benar "mengerti" design system kita, bukan sekadar menebak-nebak dari modal screenshot ?

Jawabannya ada di Model Context Protocol sebuah standar protokol yang memungkinkan AI terhubung langsung ke tools eksternal, termasuk Figma, secara terstruktur. Dengan MCP, AI tidak perlu lagi kamu suapi spesifikasi desain secara manual; ia bisa langsung query data desain kamu sendiri.

Figma sebenernya sudah punya jalur resmi bernama Code Connect, tapi fitur ini ada di balik plan Enterprise yang bukan untuk kaum mendang mending, dan setup awalnya juga cukup menyita waktu. Terlebih fungsinya bukan untuk konversi desain ke kode melainkankan menghubungkan komponen di codebase ke Figma, supaya Dev Mode menampilkan snippet kode production yang akurat, bukan kode auto-generated.

Kemudian ada Figma MCP yang resmi dan saat ini masih gratis, tapi toolsnya masih sangat terbatas. Di sinilah muncul alternatif dari komunitas yang memanfaatkan Figma API secara lebih dalam: Figma Console MCP buatan TJ Pitre, dari Southleft, sebuah konsultan design system.

Agar lebih jelas, kita bahas satu-satu.

Apa itu Model Context Protocol (MCP)?

Model Context Protocol (MCP) adalah standar terbuka yang pertama kali selain Skills diperkenalkan oleh Anthropic, yang memungkinkan AI assistant seperti Claude, Cursor, Gemini untuk terhubung dengan tools dan data eksternal secara konsisten. Contoh jika kita ingin menghubungkan Claude terhubung dengan Notion atau Jira kita perlu “protokol” yang memungkinkan untuk AI bisa tersambung.

Sebelum ada MCP, setiap integrasi AI dengan tools eksternal dibangun secara custom dan berbeda-beda. MCP menyeragamkan cara AI dan tools saling berkomunikasi, ini mirip seperti REST API yang menjadi standar untuk komunikasi antar sistem.

Dalam konteks Figma, MCP berarti AI bisa langsung membaca (dan menulis) data dari file Figma kamu secara programatik — dari token/variable, komponen, styles, hingga layout tanpa perlu copy paste satu per satu ke chat.

Figma MCP (Official)

Figma merilis MCP server resminya sebagai jembatan antara desain dan kode berbasis AI. Cara kerjanya: AI membaca file Figma lewat REST API, lalu menggunakannya untuk men-generate kode atau menjawab pertanyaan seputar desain yang kita pilih.

Yang perlu diketahui:

• Hanya punya 13 tools: get file, get component, get styles, dan sejenisnya
• Koneksi via Figma cloud REST API: read-only untuk data desain, tidak real-time
• Autentikasi menggunakan OAuth lewat browser popup
• Ada tool generate_figma_design, tapi cara kerjanya adalah menangkap halaman web yang dirender lalu mengimpornya sebagai flat design layers: bukan pembuatan elemen desain secara programatik
• Closed source, tidak ada opsi self-hosting
• Saat ini masih gratis, tapi tidak ada jaminan akan tetap begitu ke depannya

Soal design token: Figma MCP Official sebenarnya bisa menggunakan token yang sudah kamu definisikan di file Figma namun sifatnya tidak otomatis di waktu tulisan ini dibuat. Hasilnya bergantung pada seberapa rapi struktur file kamu dan seberapa eksplisit cara kamu prompt AI-nya. Kalau file-nya kurang terstruktur atau promptnya tidak spesifik, AI cenderung mengambil nilai raw misalnya #4375FF atau 16px daripada referensi token yang sebenarnya.

Figma Console MCP (Southleft)

Figma Console MCP adalah MCP server buatan komunitas dan open source, yang dibangun di atas Figma Plugin API via WebSocket Desktop Bridge. Perbedaan arsitektur ini yang jadi kunci segalanya: REST API hanya bisa read, sedangkan Plugin API bisa read, write, create, dan monitor secara real-time. Ini mirip seperti Cursor Talk to Figma buatan mas Sonny Lazuardi, tapi dengan tools yang lebih komplit.

Kemampuan utamanya:

• 94+ tools dari ekstraksi design token, create komponen, hingga debugging plugin secara real-time
• Two-way access AI bisa membaca sekaligus menulis ke Figma
• Real-time console logs dan error stack traces dari Figma plugin langsung via AI
• 11 dedicated tools untuk variable dan token management dengan batch operations hingga 100 variables per call, jauh lebih cepat dari operasi satu per satu
• Ekspor design variables ke CSS, Tailwind, Sass, atau JSON dengan nilai token yang sesungguhnya
• Hardcoded value detection bisa mendeteksi kalau ada kode yang tidak pakai design token seharusnya
• Parity analysis di 8 dimensi memastikan implementasi kode tidak menyimpang dari desain
• Accessibility scan dengan 14 pengecekan WCAG dan simulasi color blindness (protanopia, deuteranopia, tritanopia)
• Open source (MIT) dan bisa self-host

Cara Setup Figma Console MCP

Setup paling simpel adalah via NPX. Kita dapat menambahkan konfigurasi berikut ke MCP client pilihan kamu (Claude Desktop, Cursor, Gemini, dll.):

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE"
      }
    }
  }
}

Setelah itu, install Desktop Bridge Plugin di Figma Desktop sekali saja, lalu restart AI client kamu. Selesai.

Rekomendasi Pribadi

Jujur, saya memilih Figma Console MCP dan kemungkinan besar akan tetap di sana untuk waktu yang cukup lama.

Alasannya bukan karena Figma MCP Official jelek. Setupnya mudah, pun saat ini masih gratis, dan untuk use case sederhana seperti inspect komponen atau generate kode cepat, yang mencukupi. Tapi ada dua hal yang membuat saya merasa Figma MCP Official bukan pilihan jangka panjang yang solid:

• Pertama, 13 tools itu sangat terbatas. Untuk workflow yang benar-benar memanfaatkan AI dalam proses desain mulai dari design token management, debugging Figma plugin, sampai validasi parity antara desain dan kode dengan 13 tools itu tidak cukup. Kamu akan sering menemukan batas kemampuannya di tengah workflow.
• Kedua, statusnya saat ini "gratis" tidak menjamin ke depannya akan tetap begitu. Melihat bagaimana Figma mengelola fitur-fiturnya: Dev Mode, Code Connect yang di balik Enterprise paywall — tidak ada jaminan bahwa MCP resmi tidak akan dibatasi atau dijadikan fitur berbayar di masa depan. Dengan Figma Console MCP yang open source dan self-hostable, kamu tidak punya ketergantungan ke kebijakan pricing Figma.
• Setupnya memang sedikit lebih ribet, ada Desktop Bridge Plugin yang harus diinstall, ada token yang harus dikonfigurasi. Tapi itu one-time setup. Setelah jalan, toolsnya jauh lebih komplit, dan hasilnya jauh lebih deterministik terutama untuk design token.

Untuk workflow terbaik, saya tetap install keduanya sekaligus: Console MCP untuk kerja sehari-hari, Official MCP standby untuk kalau butuh Code Connect integration.

Satu tips terakhir yang sering diabaikan: jangan aktifkan semua MCP sekaligus secara permanen. Setiap sesi AI, semua MCP yang aktif akan dibaca dan dimasukkan ke dalam context window artinya token terpakai sebelum kamu bahkan mulai ngobrol. Aktifkan hanya MCP yang memang kamu butuhkan di sesi itu, dan nonaktifkan sisanya. Kebiasaan kecil ini cukup berpengaruh, terutama kalau kamu pakai banyak MCP bersamaan.