MC Figma Bridge

MCP server lokal untuk menghubungkan Cursor dengan file Figma yang sedang dibuka melalui Figma Plugin + WebSocket.

Arsitektur

Cursor / MCP Client
  -> MCP stdio server
  -> local WebSocket ws://localhost:3055
  -> Figma Plugin UI
  -> Figma Plugin main thread
  -> Active Figma document

Approach ini berbeda dari MCP database. Database bisa dikoneksi langsung lewat driver, sementara kontrol canvas Figma membutuhkan plugin yang aktif di editor.

Tools

• figma_connection_status: cek status bridge dan plugin aktif.

• figma_get_document_info: baca metadata file/page aktif.

• figma_get_selection: baca node yang sedang dipilih.

• figma_read_node: baca node by nodeId, atau selection pertama jika kosong.

• figma_set_text: ganti isi text node.

• figma_create_frame: buat frame baru di page aktif.

Setup

Install dependency:

pnpm install

Build:

pnpm build

Jalankan manual untuk development:

pnpm dev

Default WebSocket port adalah 3055. Bisa diganti dengan environment variable:

FIGMA_MCP_WS_PORT=3056 pnpm dev

Catatan: plugin Figma saat ini memakai port 3055 secara statis di figma-plugin/ui.html. Jika port server diganti, ubah port plugin juga.

Cursor MCP Config

Tambahkan server ini ke konfigurasi MCP Cursor:

{
  "mcpServers": {
    "mc-figma": {
      "command": "node",
      "args": [
        "C:\\Users\\IT 13\\Documents\\FAISAL\\RND\\MCP\\mc-figma\\dist\\index.js"
      ]
    }
  }
}

Untuk development, bisa pakai:

{
  "mcpServers": {
    "mc-figma": {
      "command": "pnpm",
      "args": [
        "--dir",
        "C:\\Users\\IT 13\\Documents\\FAISAL\\RND\\MCP\\mc-figma",
        "tsx",
        "src\\index.ts"
      ]
    }
  }
}

Load Plugin di Figma

1. Buka Figma Desktop.

2. Masuk ke Plugins -> Development -> Import plugin from manifest....

3. Pilih figma-plugin/manifest.json.

4. Jalankan plugin MC Figma Bridge.

5. Pastikan status plugin menampilkan connected.

Batasan MVP

• Figma harus terbuka dan plugin harus aktif.

• Hanya satu plugin connection yang dilayani oleh bridge.

• figma_set_text belum mendukung text node dengan mixed font.

• Tool read memakai depth limit untuk mencegah response terlalu besar.

• Ini cocok untuk workflow interaktif, bukan batch job backend headless.