Your AI designs in Figma. You watch it happen.AI mendesain di Figma. Anda menontonnya.

Connect Claude, Cursor, Command Code or any MCP app to the Figma file you have open. It builds on your canvas layer by layer, runs on your own computer, and has no Figma API quota. Setup takes about ten minutes and no coding.

Hubungkan Claude, Cursor, Command Code, atau aplikasi MCP lain ke file Figma yang sedang Anda buka. AI membangun desain di canvas lapis demi lapis, berjalan di komputer Anda sendiri, dan tanpa kuota API Figma. Pemasangan sekitar sepuluh menit, tanpa coding.

curl -fsSL https://pradityaaldi.github.io/unofficial-figma-mcp/install.sh | bash
macOS & LinuxFigma Desktop Free & open sourceGratis & open source Not affiliated with Figma, Inc.Tidak berafiliasi dengan Figma, Inc.
New to Terminal? Follow the illustrated setupBelum pernah pakai Terminal? Ikuti panduan bergambarWhy not Figma's own MCP server?Kenapa tidak pakai MCP resmi Figma?
Which AI app do you use? The guide adapts to it.Aplikasi AI apa yang Anda pakai? Panduan menyesuaikan.

Set it up in six steps.Pasang dalam enam langkah.

You'll check for Figma Desktop, paste one line into Terminal, connect your AI app, and run one plugin in Figma. Every step shows what you should see, and what to do if you don't.

Anda hanya memastikan Figma Desktop ada, menempel satu baris ke Terminal, menghubungkan aplikasi AI, dan menjalankan satu plugin di Figma. Setiap langkah menunjukkan apa yang seharusnya muncul, dan apa yang dilakukan jika tidak.

  • Mac oratau Linux · Windows not yet· belum Windows
  • Figma Desktop · step 1 helps· dibantu di langkah 1
  • An AI app with MCPAplikasi AI dengan MCP
  • Node.js · installed for you if missing· dipasang otomatis bila belum ada

  1. Get Figma Desktop

    Siapkan Figma Desktop

    The plugin only runs in the Figma desktop app, not in a browser tab.

    Plugin hanya berjalan di aplikasi Figma Desktop, bukan di tab browser.

    1. Press ⌘ Space and type Figma. If Figma.app shows up, open it and sign in.
    2. No Figma app? Download it, open the downloaded file, drag Figma into Applications, then open it and sign in once.
    1. Tekan ⌘ Space lalu ketik Figma. Jika Figma.app muncul, buka dan login.
    2. Belum punya aplikasinya? Unduh, buka file unduhannya, seret Figma ke Applications, lalu buka dan login sekali.
    Download Figma DesktopUnduh Figma Desktop
    Figma opens as its own appFigma terbuka sebagai aplikasi sendiriYou'll see Figma, File, Edit… Plugins in the menu bar at the top of your screen. A figma.com tab in Chrome or Safari won't work.Di menu bar paling atas layar ada Figma, File, Edit… Plugins. Tab figma.com di Chrome atau Safari tidak akan bisa.
    Open Figma Desktop and sign in at least once before step 2. The installer registers the plugin in the desktop app's settings.Buka Figma Desktop dan login minimal sekali sebelum langkah 2. Installer mendaftarkan plugin di pengaturan aplikasi desktop.

  2. Open Terminal and install

    Buka Terminal dan pasang

    1. Save your Figma work: the installer may quit and reopen Figma once to register the plugin.
    2. Press ⌘ Space, type Terminal, press Enter.
    3. Copy the line below, paste it into Terminal with ⌘ V, press Enter. It takes one to three minutes.
    1. Simpan pekerjaan Figma: installer mungkin menutup lalu membuka ulang Figma sekali untuk mendaftarkan plugin.
    2. Tekan ⌘ Space, ketik Terminal, tekan Enter.
    3. Salin baris di bawah, tempel ke Terminal dengan ⌘ V, tekan Enter. Prosesnya satu sampai tiga menit.
    curl -fsSL https://pradityaaldi.github.io/unofficial-figma-mcp/install.sh | bash
    No Node.js? No problem.Belum punya Node.js? Tidak masalah.The installer looks for Node.js 20 or newer. If it's missing or too old, it downloads the official Node.js LTS from nodejs.org, checks its checksum, and keeps it inside the app's own folder. No admin password, and any Node.js you already have stays untouched.Installer mencari Node.js 20 atau lebih baru. Jika belum ada atau terlalu lama, installer mengunduh Node.js LTS resmi dari nodejs.org, memeriksa checksum-nya, dan menyimpannya di folder aplikasi sendiri. Tanpa password admin, dan Node.js yang sudah Anda punya tidak diubah.
    It ends with “Unofficial Figma MCP is installed.”Diakhiri “Unofficial Figma MCP is installed.”Below it you'll see your command path and an “MCP client configuration” block. Keep the window open for step 3.Di bawahnya ada path command Anda dan blok “MCP client configuration”. Biarkan jendela terbuka untuk langkah 3.
    Installs only for your user account, in ~/.local and ~/.unofficial-figma-mcp. No sudo, and no Figma API key or token (why not?). Run the same line again later to update.Hanya terpasang untuk akun Anda, di ~/.local dan ~/.unofficial-figma-mcp. Tanpa sudo, dan tanpa API key atau token Figma (kenapa?). Jalankan baris yang sama nanti untuk update.
    TerminalTerminal.app

    Shown on a Mac without Node.js. If you already have Node.js 20 or newer, you'll see “Using Node.js …” instead and nothing extra is downloaded.

    Contoh di Mac tanpa Node.js. Jika sudah punya Node.js 20 atau lebih baru, yang muncul “Using Node.js …” dan tidak ada unduhan tambahan.

  3. Connect it to Hubungkan ke Claude DesktopClaude CodeCommand CodeCursoryour AI appaplikasi AI Anda

    1. In Claude Desktop open Settings → Developer → Edit Config. This opens claude_desktop_config.json.
    2. Copy the MCP client configuration block from Terminal (it already contains your path) and paste it in. If the file already has "mcpServers", add only the "unofficial-figma-mcp" entry inside it.
    3. Save, then quit Claude Desktop completely and open it again.
    1. Di Claude Desktop buka Settings → Developer → Edit Config. File claude_desktop_config.json akan terbuka.
    2. Salin blok MCP client configuration dari Terminal (sudah berisi path Anda) lalu tempel. Jika file sudah punya "mcpServers", tambahkan entri "unofficial-figma-mcp" di dalamnya saja.
    3. Simpan, lalu tutup Claude Desktop sepenuhnya dan buka lagi.

    Paste this into Terminal. It registers the server for every project:

    Tempel ini ke Terminal. Server terdaftar untuk semua project:

    claude mcp add --scope user unofficial-figma-mcp -- ~/.local/bin/unofficial-figma-mcp

    Then check it:

    Lalu cek:

    claude mcp list

    Paste this into Terminal. It registers the server for every project:

    Tempel ini ke Terminal. Server terdaftar untuk semua project:

    cmd mcp add --scope user unofficial-figma-mcp -- ~/.local/bin/unofficial-figma-mcp

    Then check it:

    Lalu cek:

    cmd mcp list
    1. Open Cursor Settings → MCP (called Tools & Integrations in some versions) and choose to add a custom MCP server. This opens mcp.json.
    2. Paste the MCP client configuration block from Terminal. If "mcpServers" already exists, add only the "unofficial-figma-mcp" entry inside it.
    3. Save and check that the server shows as enabled.
    1. Buka Cursor Settings → MCP (di beberapa versi bernama Tools & Integrations) lalu pilih tambah server MCP custom. File mcp.json akan terbuka.
    2. Tempel blok MCP client configuration dari Terminal. Jika "mcpServers" sudah ada, tambahkan entri "unofficial-figma-mcp" di dalamnya saja.
    3. Simpan dan pastikan server tampil aktif.

    Find your app's MCP settings (often called MCP Servers, Tools or Integrations) and add a local (stdio) server. Paste the MCP client configuration block from Terminal, or enter the command path by hand; it ends in /.local/bin/unofficial-figma-mcp.

    Cari pengaturan MCP di aplikasi Anda (biasanya bernama MCP Servers, Tools, atau Integrations) lalu tambahkan server lokal (stdio). Tempel blok MCP client configuration dari Terminal, atau isi path command secara manual; path-nya berakhir dengan /.local/bin/unofficial-figma-mcp.

    Every computer has its own path (/Users/your-name/…). Use the one Terminal printed, not the example.Setiap komputer punya path sendiri (/Users/nama-anda/…). Pakai yang dicetak Terminal, bukan contoh.

  4. Run the plugin in Figma

    Jalankan plugin di Figma

    1. Open a design file in Figma Desktop. A copy of a real file is a good first playground.
    2. Press ⌘ / to search, type Unofficial, and choose Unofficial Figma MCP. Or use Plugins → Development → Unofficial Figma MCP.
    1. Buka file desain di Figma Desktop. Salinan file sungguhan cocok untuk percobaan pertama.
    2. Tekan ⌘ / untuk mencari, ketik Unofficial, lalu pilih Unofficial Figma MCP. Atau lewat Plugins → Development → Unofficial Figma MCP.
    Nothing pops up, and that's rightTidak ada jendela yang muncul, dan itu benarThe plugin runs quietly in the background. Keep it running while you work with the AI; it connects to the file where you started it.Plugin berjalan diam-diam di latar belakang. Biarkan tetap berjalan selama memakai AI; plugin terhubung ke file tempat Anda menjalankannya.
    The dashed icon and the Development label are normal. Figma shows them for every plugin installed from your own computer.Ikon garis putus-putus dan label Development itu normal. Figma menampilkannya untuk semua plugin yang dipasang dari komputer sendiri.

  5. Check the connection

    Cek koneksinya

    In Di Claude DesktopClaude Code (claude)Command Code (cmd)Cursoryour AI appaplikasi AI Anda, start a new chat and send:, mulai chat baru dan kirim:

    Is Figma connected? Which file and page am I on?Apakah Figma sudah terhubung? File dan halaman apa yang sedang saya buka?
    It names your file and pageAI menyebut nama file dan halaman AndaBehind the scenes it used the figma_status tool. You're connected.Di baliknya AI memakai tool figma_status. Anda sudah terhubung.
    “Plugin not connected”? Run the plugin again (step 4). If the AI has no Figma tools at all, restart the AI app and recheck step 3. More in Help.“Plugin not connected”? Jalankan lagi plugin (langkah 4). Jika AI tidak punya tool Figma sama sekali, restart aplikasi AI dan cek ulang langkah 3. Lebih lanjut di Bantuan.

  6. Ask for your first design

    Minta desain pertama Anda

    Describe a screen. Keep Figma visible: the layers arrive one by one.

    Jelaskan sebuah layar. Biarkan Figma terlihat: lapisannya muncul satu per satu.

    Build a mobile login screen in Figma with an email field, a password field and a Sign in button.Buat layar login mobile di Figma dengan field email, field password, dan tombol Sign in.
    The AI can change the open file. Try things in a duplicate first, and use Figma's version history to roll back big changes.AI bisa mengubah file yang terbuka. Coba dulu di file duplikat, dan pakai version history Figma untuk membatalkan perubahan besar.
    Terminal — claudeTerminal — cmd
    > Build a login screen, then a dashboard and its mobile version.Buat layar login, lalu dashboard dan versi mobile-nya.
    ⏺ unofficial-figma-mcp · figma_build 35 layerslapis
    ⏺ unofficial-figma-mcp · figma_build 151 layerslapis
    ⏺ unofficial-figma-mcp · figma_build 125 layerslapis
    ⏺ Done: three frames on Page 1, placed next to your existing work.⏺ Selesai: tiga frame di Page 1, diletakkan di samping desain yang sudah ada.

    Layer counts from real test builds of these three screens.

    Jumlah lapis dari build uji sungguhan untuk ketiga layar ini.

Things to ask once you're connected.Hal yang bisa diminta setelah terhubung.

Start by reading, then build. Copy any of these into your AI app.

Mulai dari membaca, lalu membangun. Salin salah satu ke aplikasi AI Anda.

Describe the layers I have selected in Figma.Jelaskan layer yang sedang saya pilih di Figma.
Take a screenshot of the selected frame and suggest three improvements.Ambil screenshot frame yang dipilih dan beri tiga saran perbaikan.
Make a mobile version of the selected frame next to it.Buat versi mobile dari frame yang dipilih di sebelahnya.
Rename every layer in the selected frame so the names describe what they are.Ganti nama semua layer di frame yang dipilih supaya sesuai isinya.
Build a pricing section with three plans using auto layout.Buat section pricing dengan tiga paket memakai auto layout.
List all pages in this file and switch to the one called “Components”.Tampilkan semua halaman di file ini lalu pindah ke halaman “Components”.
Put the photo ~/Desktop/hero.jpg into the selected frame as its cover image.Masukkan foto ~/Desktop/hero.jpg ke frame yang dipilih sebagai gambar cover.
Build a team section with three cards, using the photos in ~/Desktop/team.Buat section tim dengan tiga kartu, memakai foto-foto di ~/Desktop/team.

Built for designers who want the AI in the file, not beside it.Untuk desainer yang ingin AI bekerja langsung di file, bukan di sampingnya.

Watch it build
Lihat prosesnya
Layouts appear on your canvas one layer at a time, like the login card at the top of this page, so you can see what the AI is doing and stop it early.
Layout muncul di canvas satu lapis demi satu, seperti kartu login di atas halaman ini, jadi Anda bisa melihat apa yang dikerjakan AI dan menghentikannya lebih awal.
No quota, no API key
Tanpa kuota, tanpa API key
It works through a plugin in your own Figma app, not Figma's cloud API, so Figma's MCP rate limits don't apply and there's no access token to set up. See the comparison.
Bekerja lewat plugin di aplikasi Figma Anda sendiri, bukan API cloud Figma, jadi limit MCP Figma tidak berlaku dan tidak ada access token yang perlu disiapkan. Lihat perbandingan.
Your images, too
Gambar Anda juga
Point it at a photo or logo on your computer or a link, and it lands on the canvas as a normal image layer you can crop and resize. New in v0.3.0.
Tunjuk foto atau logo di komputer Anda atau sebuah link, dan gambar masuk ke canvas sebagai layer gambar biasa yang bisa di-crop dan diubah ukurannya. Baru di v0.3.0.
Stays on your computer
Tetap di komputer Anda
The server and plugin run locally. Your design data only goes to the AI app you already chose.
Server dan plugin berjalan lokal. Data desain hanya dikirim ke aplikasi AI yang memang Anda pilih.
Your favourite AI app
Aplikasi AI favorit Anda
Claude Desktop, Claude Code, Command Code, Cursor or any MCP app. Several can share one Figma connection.
Claude Desktop, Claude Code, Command Code, Cursor, atau aplikasi MCP lain. Beberapa bisa berbagi satu koneksi Figma.

Why not Figma's own MCP server?Kenapa tidak pakai MCP server resmi Figma?

Figma offers two official MCP servers. Both are great for turning designs into code. They differ from this project in where they run, what they can write, and how often you can call them. Every official fact below links to Figma's own documentation.

Figma punya dua MCP server resmi. Keduanya bagus untuk mengubah desain menjadi kode. Bedanya dengan project ini ada di tempat berjalan, apa yang bisa ditulis, dan seberapa sering bisa dipanggil. Setiap fakta resmi di bawah bertaut ke dokumentasi Figma.

FeatureFigma desktop MCP serverMCP server desktop FigmaFigma remote MCP serverMCP server remote FigmaUnofficial Figma MCP
Create and edit designs on the canvasMembuat dan mengedit desain di canvas NoTidak“Write to canvas” and “Code to canvas” are listed as not available on desktop.1“Write to canvas” dan “Code to canvas” tercantum tidak tersedia di desktop.1 YesYaThrough use_figma and generate_figma_design, remote only.2 Check Figma's docs for seat and pricing terms.Lewat use_figma dan generate_figma_design, hanya remote.2 Cek dokumentasi Figma untuk syarat seat dan harga. YesYafigma_build builds layouts layer by layer; figma_exec runs any Plugin API script.figma_build membangun layout lapis demi lapis; figma_exec menjalankan script Plugin API apa pun.
How often you can call itSeberapa sering bisa dipanggil Not stated on its setup page1Tidak disebut di halaman setup-nya1 Rate limitedAda limitRead tools: up to 20 calls a month for View/Collab seats on Starter, up to 6 a month on paid plans; Dev/Full seats get daily and per-minute caps.3Tool baca: hingga 20 panggilan/bulan untuk seat View/Collab di Starter, hingga 6/bulan di paket berbayar; seat Dev/Full dapat batas harian dan per menit.3 No quotaTanpa kuotaIt talks to your own Figma app through a plugin, not Figma's API.Berbicara ke aplikasi Figma Anda lewat plugin, bukan API Figma.
Where it runsTempat berjalan Inside Figma Desktop, turned on from Dev Mode.Di dalam Figma Desktop, diaktifkan dari Dev Mode.1 Figma's cloud.Cloud Figma.2 Your computer: a local server plus a development plugin in Figma Desktop.Komputer Anda: server lokal plus plugin development di Figma Desktop.
Code Connect, library search, FigJam diagramsCode Connect, pencarian library, diagram FigJam PartlySebagianCode Connect tools and FigJam reading.2Tool Code Connect dan membaca FigJam.2 YesYa2 NoTidakNot reimplemented here.Tidak dibuat ulang di sini.
CostBiaya Depends on your Figma plan and seat.Tergantung paket dan seat Figma Anda.3 Free and open source (MIT). You still need your own AI app.Gratis dan open source (MIT). Anda tetap butuh aplikasi AI sendiri.
  1. Figma Developer Docs — Local server installation
  2. Figma Developer Docs — Tools and prompts
  3. Figma Developer Docs — Rate limits & access

When Figma's server is the better pick: you need Code Connect, design-system search or FigJam diagrams, or your team already runs Figma's remote server. Official limits change often; these were checked on 28 September 2026, so follow the links for today's rules.

Kapan server Figma lebih cocok: Anda butuh Code Connect, pencarian design system, atau diagram FigJam, atau tim Anda sudah memakai server remote Figma. Limit resmi sering berubah; data ini dicek pada 28 September 2026, jadi ikuti link untuk aturan terbaru.

Good to know.Perlu diketahui.

  • Figma Desktop only. Local plugins can't run in the browser version.Hanya Figma Desktop. Plugin lokal tidak bisa berjalan di versi browser.
  • One file at a time: the file where you ran the plugin.Satu file sekaligus: file tempat plugin dijalankan.
  • Keep the plugin running. Closing the file or Figma disconnects it; run it again to reconnect.Biarkan plugin berjalan. Menutup file atau Figma memutus koneksi; jalankan lagi untuk menyambung.
  • It shows as “Development” in Figma, because it's installed from your computer rather than Figma Community.Tampil sebagai “Development” di Figma, karena dipasang dari komputer Anda, bukan Figma Community.
  • Images: PNG, JPEG, GIF and SVG. Figma can't import WebP, and photos can be at most 4096 px on each side.Gambar: PNG, JPEG, GIF, dan SVG. Figma tidak bisa mengimpor WebP, dan foto maksimal 4096 px di tiap sisi.
  • Unofficial. Not affiliated with, endorsed by or sponsored by Figma, Inc.Tidak resmi. Tidak berafiliasi, didukung, atau disponsori oleh Figma, Inc.

Build your own MCP.Buat MCP Anda sendiri.

This project is small: one MCP server and one Figma plugin. Read it, fork it, or start from the official guides.

Project ini kecil: satu MCP server dan satu plugin Figma. Baca, fork, atau mulai dari panduan resmi.

If something doesn't work.Jika ada yang tidak berjalan.

Do I need a Figma API key or access token?Apakah saya butuh API key atau access token Figma?

No. Many Figma MCP guides ask you to create a personal access token, because their servers call Figma's cloud API. This one doesn't. The plugin runs inside your own Figma Desktop and uses Figma's Plugin API, which every plugin gets without a key. So there's no token to create, paste or keep secret, and no API quota.

Tidak. Banyak panduan MCP Figma meminta Anda membuat personal access token, karena server mereka memanggil API cloud Figma. Yang ini tidak. Plugin berjalan di dalam Figma Desktop Anda sendiri dan memakai Plugin API Figma, yang otomatis tersedia untuk setiap plugin tanpa kunci. Jadi tidak ada token untuk dibuat, ditempel, atau dirahasiakan, dan tidak ada kuota API.

Need a token for a different tool? Figma explains where to create one in Manage personal access tokens. You don't need it here.

Butuh token untuk tool lain? Figma menjelaskan cara membuatnya di Manage personal access tokens. Untuk project ini tidak perlu.

Do I need to install Node.js myself?Apakah saya harus memasang Node.js sendiri?

No. If Node.js 20 or newer is already installed, the installer uses it. Otherwise it downloads the official LTS build from nodejs.org into ~/.local/share/unofficial-figma-mcp/node, just for this app; uninstalling removes it too. To always use that private copy, even when you have Node.js:

Tidak. Jika Node.js 20 atau lebih baru sudah terpasang, installer memakainya. Jika belum, installer mengunduh build LTS resmi dari nodejs.org ke ~/.local/share/unofficial-figma-mcp/node, khusus untuk aplikasi ini; uninstall ikut menghapusnya. Untuk selalu memakai salinan pribadi itu, meski Anda punya Node.js:

curl -fsSL https://pradityaaldi.github.io/unofficial-figma-mcp/install.sh | bash -s -- --use-bundled-node
The installer says “Figma settings not found”Installer menampilkan “Figma settings not found”

Open Figma Desktop at least once and sign in, then run the installer again. Or register the plugin by hand: in Figma choose Plugins → Development → Import plugin from manifest… and pick the manifest.json path the installer printed.

Buka Figma Desktop minimal sekali dan login, lalu jalankan installer lagi. Atau daftarkan plugin manual: di Figma pilih Plugins → Development → Import plugin from manifest… lalu pilih path manifest.json yang dicetak installer.

The AI says the plugin isn't connectedAI bilang plugin belum terhubung

Run the plugin again in the file you want to work on (step 4). It stops when you close that file or Figma. If it still fails, fully quit and reopen your AI app.

Jalankan lagi plugin di file yang ingin dikerjakan (langkah 4). Plugin berhenti saat file atau Figma ditutup. Jika masih gagal, tutup penuh lalu buka lagi aplikasi AI Anda.

My AI app doesn't show any Figma toolsAplikasi AI tidak menampilkan tool Figma

Check the path in your MCP settings. It must match the one the installer printed exactly and usually ends in /.local/bin/unofficial-figma-mcp. Save, then fully restart the AI app.

Periksa path di pengaturan MCP. Harus sama persis dengan yang dicetak installer dan biasanya berakhir dengan /.local/bin/unofficial-figma-mcp. Simpan, lalu restart penuh aplikasi AI.

Nothing appears when I run the pluginTidak ada yang muncul saat plugin dijalankan

That's expected. The plugin runs in the background without a window. Ask your AI “Is Figma connected?” to confirm.

Itu memang begitu. Plugin berjalan di latar belakang tanpa jendela. Tanyakan ke AI “Apakah Figma sudah terhubung?” untuk memastikan.

Can I use two AI apps at once?Bisa pakai dua aplikasi AI sekaligus?

Yes. The first app to start owns the connection on port 3055 and the others relay through it, so they all share the same Figma plugin.

Bisa. Aplikasi yang pertama jalan memegang koneksi di port 3055 dan yang lain menumpang lewatnya, jadi semuanya berbagi plugin Figma yang sama.

How do I update or uninstall?Bagaimana cara update atau uninstall?

To update, run the install line from step 2 again. To remove the command and the plugin:

Untuk update, jalankan lagi baris instalasi dari langkah 2. Untuk menghapus command dan plugin:

curl -fsSL https://pradityaaldi.github.io/unofficial-figma-mcp/install.sh | bash -s -- --uninstall
Is it safe for important files?Aman untuk file penting?

The server runs locally, but the AI can read and change the open file when you ask it to. Work in a duplicate at first, read what the AI says it will do, and use Figma's version history to roll back.

Server berjalan lokal, tetapi AI bisa membaca dan mengubah file yang terbuka sesuai permintaan Anda. Awali di file duplikat, baca apa yang akan dilakukan AI, dan pakai version history Figma untuk kembali.

Save your work, open Terminal, paste this.Simpan pekerjaan, buka Terminal, tempel ini.

The same line installs and later updates it. Then follow steps 3 to 6 above.

Baris yang sama untuk memasang dan nanti meng-update. Lalu ikuti langkah 3 sampai 6 di atas.

curl -fsSL https://pradityaaldi.github.io/unofficial-figma-mcp/install.sh | bash