MCP server Figma

"Figma MCP" dulu hanya berarti satu hal: server yang memungkinkan coding agent membaca sebuah desain dan mengubahnya menjadi kode. Di 2026 maknanya lebih dari itu. Server resmi Figma kini berjalan secara remote maupun di aplikasi desktop, bisa menulis ke canvas, dan batasan seberapa sering Anda dapat memanggilnya bergantung pada paket dan seat Anda dengan cara yang baru terasa setelah dua puluh panggilan.

Panduan ini disusun dari developer docs, Help Center, dan blog Figma, repository figma/mcp-server-guide, serta kode proyek komunitas, semuanya dibaca pada 14 November 2026. Kami juga melakukan probe ke endpoint remote dan menjalankan Framelink melalui MCP Inspector. Kami tidak menghubungkan akun Figma berbayar, jadi kami melaporkan batasan yang dinyatakan Figma, bukan yang kami alami sendiri.

Remote atau desktop

	Remote server	Desktop server
Alamat	https://mcp.figma.com/mcp	http://127.0.0.1:3845/mcp
Butuh aplikasi Figma	Tidak	Ya, dengan file Design yang terbuka
Sign-in	Akun Figma, OAuth di browser	Aplikasi yang sedang Anda gunakan untuk sign-in
Paket	Semua paket, dengan batas baca	Dev atau Full seat di Professional, Education, Organization, Government, atau Enterprise
Memilih apa yang dibaca	Tempel tautan ke layer	Pilih layer di aplikasi
Menulis ke canvas	Ya, beta	Tidak
Xcode	Didukung	Tidak didukung
Figma for Government	Tidak didukung	Satu-satunya opsi

Figma merekomendasikan remote server dan memberinya "rangkaian fitur paling luas". Desktop server ada untuk organisasi dengan kebutuhan khusus; Figma for Government, misalnya, hanya bisa memakainya. Kecuali Anda termasuk kelompok itu, mulailah dengan remote.

Kami memeriksa bagaimana remote server memperkenalkan dirinya. Permintaan tanpa autentikasi ditolak, dan metadata OAuth-nya menyebut api.figma.com sebagai authorization server dengan satu scope, mcp:connect. Itulah alur yang dijalankan client Anda saat membuka browser dan meminta Anda mengizinkan akses.

Paket dan batasan

Di sinilah sebagian besar laporan "tiba-tiba berhenti berfungsi" berasal. Figma membatasi tool yang membaca data, per seat dan per paket:

Seat	Starter	Professional	Organization	Enterprise
View atau Collab	20 per bulan	20 per bulan	20 per bulan	20 per bulan
Full atau Dev	tidak tersedia	200 per hari, 10 per menit	200 per hari, 15 per menit	600 per hari, 20 per menit

Paket Education mendapat angka Professional. Batas per menit berlaku di atas batas harian, dan Figma menyatakan dapat mengubah batasan tersebut kapan saja. Tool tulis tidak dihitung, begitu juga aksi yang memakai kredit Figma AI.

Dua puluh panggilan sebulan cepat habis. Agent yang mengimplementasikan satu layar sering memanggil design context, variables, screenshot, dan mungkin metadata, jadi akun gratis bisa kehabisan panggilan setelah beberapa layar saja. Jika Anda bekerja dengan Figma setiap hari, secara realistis server ini adalah fitur untuk seat Full atau Dev.

Satu angka usang yang perlu diabaikan: README di repositori mcp-server-guide milik Figma sendiri masih menyebut enam panggilan sebulan untuk seat Starter dan View. Dokumentasi developer dan Help Center sama-sama menyebut 20.

Cara install

Claude Code. Plugin Figma tersedia di marketplace resmi Anthropic dan sudah membawa server beserta skill dari Figma:

claude plugin install figma@claude-plugins-official

Kalau organisasi Anda memblokir plugin, tambahkan server-nya saja:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Setelah itu jalankan /mcp di Claude Code, pilih figma, pilih Authenticate, lalu klik Allow access di browser.

Cursor. Ketik /add-plugin figma di chat, atau tambahkan server lewat Settings, Tools & MCP:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Klik Connect, lalu izinkan akses. Kalau proses sign-in berputar terus, pakai "Clear All MCP Tokens", sign in lagi, dan restart Cursor.

VS Code dengan GitHub Copilot. Jalankan "MCP: Open User Configuration" lalu tambahkan:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Klik Start di atas entri tersebut, izinkan akses, ganti chat ke mode Agent, lalu ketik #get_design_context untuk memastikan tool-nya sudah termuat.

Codex:

codex mcp add figma --url https://mcp.figma.com/mcp

Gemini CLI menginstalnya sebagai extension dari https://github.com/figma/mcp-server-guide, lalu jalankan /mcp auth figma. Halaman Figma tidak menyediakan langkah untuk Claude Desktop. Hanya client yang tercantum di katalog MCP Figma yang bisa terhubung, jadi cek dulu sebelum mencoba client lain.

Alternatifnya, pakai desktop server: buka aplikasi Figma desktop, pindah ke Dev Mode dengan Shift+D, lalu di sidebar kanan pilih "Enable desktop MCP server". Setelah itu arahkan client Anda ke http://127.0.0.1:3845/mcp, misalnya claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp.

Fungsi tool-tool ini

Halaman tools Figma mencantumkan sekitar tiga puluh tool. Berikut yang akan Anda pakai:

Tool	Lokasi	Yang dikembalikan atau dilakukan
get_design_context	Keduanya	Kode dan struktur untuk sebuah layer, secara default React dengan Tailwind; minta stack lain lewat prompt
get_variable_defs	Keduanya	Variabel dan style yang dipakai sebuah seleksi: warna, spacing, tipografi
get_screenshot	Keduanya	Gambar dari seleksi
get_metadata	Keduanya	Outline XML ringan berisi ID, nama, dan ukuran; cocok untuk frame besar
get_code_connect_map	Keduanya	Komponen kode mana yang dipetakan ke tiap komponen Figma
get_figjam	Keduanya	Board FigJam sebagai XML beserta screenshot
search_design_system	Remote	Menemukan komponen, variabel, dan style di seluruh library Anda
download_assets	Remote	Mengekspor hingga 20 node atau gambar asli per panggilan
whoami	Remote	Akun, plan, dan tipe seat Anda
use_figma	Remote	Menjalankan kode Plugin API di dalam file untuk membuat, mengedit, atau menghapus layer
generate_figma_design	Remote	Mengubah halaman web live, termasuk localhost, menjadi layer Figma
create_new_file	Remote	File Design, FigJam, atau Slides yang kosong

create_design_system_rules bukan tool, melainkan sebuah prompt: ia menulis file rules untuk codebase Anda supaya agent memetakan token Figma ke komponen Anda dengan cara yang sama setiap kali.

Kalau Anda memakai Code Connect, komponen yang terhubung akan datang terbungkus marker <CodeConnectSnippet> yang menyebut nama komponen asli Anda, dan instruksi kustom yang Anda lampirkan ikut terbawa. Itulah bedanya antara agent yang menulis tombol baru dan agent yang memakai tombol Anda.

Frame besar

Saran Figma sendiri: pilih lebih sedikit. Seleksi yang besar "memperlambat tool, memicu error, atau menghasilkan output yang tidak lengkap". Pilih satu card, header, atau sidebar setiap kali. Untuk satu halaman penuh, panggil get_metadata dulu untuk mendapatkan outline dan node ID, lalu get_design_context pada bagian-bagiannya. Di Claude Code, kalau hasilnya terpotong, naikkan MAX_MCP_OUTPUT_TOKENS.

Menulis ke canvas

Pada 24 Maret 2026 Figma membuka canvas untuk agent. Tool use_figma di remote server menjalankan kode terhadap Figma Plugin API di dalam file Anda, jadi agent bisa membangun frame, menerapkan variables, menata letak komponen, dan mengedit apa yang sudah ada, di Design files, FigJam, Slides, dan Specs. Figma menyebut Claude Code, Codex, Cursor, Copilot di VS Code, dan Copilot CLI sebagai klien saat peluncuran.

Aturan di beta:

• Seat. Menulis di luar draft Anda sendiri butuh Full seat; Dev seat hanya bisa menulis di draft. Anda perlu akses edit ke file dan plan Professional, Education, Organization, atau Enterprise.
• Harga. Gratis selama beta. Figma bilang fitur ini "will eventually become a usage-based paid feature" dan belum memberi harga.
• Keterbatasan. Belum ada pembuatan gambar mandiri, belum ada komponen yang berisi gambar atau video, dan tidak ada GIF. Font harus sudah diunggah ke akun Figma Anda. Komponen perlu dipublikasikan secara manual sebelum Code Connect bisa memetakannya.
• Kualitas. Figma menyebut output-nya masih kualitas beta dan menyarankan Anda bekerja di duplikat atau draft serta menyimpan backup.

Tool tulis lainnya lebih terbatas cakupannya. generate_figma_design menangkap web UI yang sedang berjalan, production, staging, atau localhost, sebagai layer yang bisa diedit, berguna untuk membawa produk yang sudah ada ke Figma. generate_diagram menggambar diagram FigJam dari teks atau Mermaid. send_code_to_figma mengimpor proyek lokal sebagai file Figma Make.

Kalau use_figma tidak ada di daftar tool Anda, klien Anda hampir pasti memakai desktop server, yang tidak punya tool tulis.

Server komunitas

Sebelum Figma merilis server resminya, komunitas mengisi kekosongan itu, dan dua proyek masih banyak dipakai sampai sekarang.

Framelink (GLips/Figma-Context-MCP, MIT, 16.205 stars) membaca file lewat REST API Figma dengan personal access token dan menyederhanakan respons sebelum dilihat model. Kami menjalankan versi 0.13.2 lewat MCP Inspector: tool yang terdaftar ada dua, get_figma_data yang ditandai read-only, dan download_figma_images. Dengan key dummy, panggilan gagal dengan isError bernilai true dan tautan troubleshooting, yang memang perilaku yang tepat untuk skrip. Server ini tidak bisa menulis, dan terkena batasan REST API; ada issue terbuka yang melaporkan error 429. Config-nya:

{
  "mcpServers": {
    "framelink": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio"]
    }
  }
}

TalkToFigma (grab/cursor-talk-to-figma-mcp, MIT, 7.108 stars) menulis lewat plugin Figma yang terhubung ke server WebSocket lokal. Butuh Bun, plugin komunitas yang berjalan di file Anda, dan panggilan join_channel untuk memasangkannya. Tanpa token dan tanpa Dev seat, yang membuatnya jadi cara untuk mendapat akses tulis sebelum use_figma ada. Push terakhirnya Juli 2026.

Ada juga bridge yang lebih baru. southleft/figma-console-mcp (MIT, 3.306 stars, aktif dirawat) mengklaim 130 tool lewat plugin Desktop Bridge-nya. gethopp/figma-mcp-bridge (MIT, 919 stars) men-stream dokumen yang sedang terbuka lewat plugin untuk menghindari batasan REST. Kami belum mau bersandar pada figwright: 1.402 stars dalam waktu kurang dari lima bulan dengan tiga watcher adalah pola yang kami ingin lihat terkonfirmasi dulu sebelum merekomendasikannya.

Mana yang dipakai: server remote resmi kalau Anda punya Full atau Dev seat. Framelink kalau Anda ingin server lokal berbasis token yang hanya membaca; perlu dicatat server ini terikat batasan REST API itu sendiri, yang menurut proyek bridge gethopp cukup ketat di paket gratis. Bridge plugin hanya kalau Anda butuh akses tulis di paket yang tidak dicakup use_figma, dengan konsekuensi plugin-nya harus tetap terbuka.

Keamanan

MCP server Figma memegang kunci ke file desain Anda, dan dengan use_figma ia bisa mengubahnya.

• Menulis di salinan. Sampai Anda yakin dengan alurnya, arahkan agent ke draft atau file duplikat. Version history Figma bisa memulihkan file, tapi salinan bersih lebih sederhana.
• Pahami apa yang dibagikan. Design context, screenshot, dan variable ikut terkirim ke penyedia AI Anda di setiap panggilan. Pastikan organisasi Anda mengizinkannya untuk file yang bersangkutan.
• Perlakukan teks file sebagai data. Nama layer, komentar, dan teks di dalam file sampai ke model sebagai teks. File komunitas yang dibagikan bisa berisi instruksi yang ditujukan ke agent.
• Jauhkan token dari config. Untuk Framelink, utamakan environment variable FIGMA_API_KEY daripada key di args, dan beri token scope paling sempit yang diizinkan Figma.

Selengkapnya soal risiko ini di keamanan MCP.

Kalau tidak berjalan

Yang Anda lihat	Penyebab	Solusi
Berjalan sebentar, lalu muncul error rate-limit	Batas baca untuk seat dan plan Anda	Cek tabel di atas; seat Full atau Dev menaikkannya
Tidak ada tool dari desktop server	App tertutup, tidak ada file Design yang terbuka, atau desktop server dimatikan	Buka file Design, Dev Mode, "Enable desktop MCP server"
use_figma atau generate_figma_design tidak muncul	Client terhubung ke desktop server	Hubungkan ke https://mcp.figma.com/mcp
Error permission pada sebuah link	Bukan file Design, FigJam, atau Make, atau akun berbeda	Cek tipe link-nya; jalankan whoami
Hasil terpotong atau tidak lengkap	Seleksi terlalu besar	Pilih lebih sedikit; pakai get_metadata dulu; naikkan MAX_MCP_OUTPUT_TOKENS di Claude Code
Agent mengembalikan kode padahal Anda minta token	Tool yang dipilih salah	Sebutkan nama tool-nya, atau minta "variable names and values"
Kotak abu-abu alih-alih gambar	Link asset sudah kedaluwarsa	Ambil ulang gambarnya, misalnya dengan download_assets
Client sama sekali tidak bisa terhubung	Client tidak ada di katalog MCP Figma	Pakai client yang terdaftar

Server Figma di katalog kami, lengkap dengan skor checks dan perintah install, tercantum di bagian atas halaman ini.