# MC Figma Bridge

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

## Arsitektur

```text
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:

```bash
pnpm install
```

Build:

```bash
pnpm build
```

Jalankan manual untuk development:

```bash
pnpm dev
```

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

```bash
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:

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

Untuk development, bisa pakai:

```json
{
  "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.