✨ Features

🚀 Quick Start

1. Clone & Install

git clone https://github.com/plugin87/figma-remote-server.git
cd figma-remote-server
npm install
npm run build

2. Get a Figma Token

1. Go to Figma → Settings → Security
2. Click Personal Access Tokens → Generate new token
3. Name: design-lazyyy
4. Scopes — tick ทุกอัน (Read & Write)
5. Copy the token (starts with figd_...)

3. Configure

cp .env.example .env

Open .env and paste your token:

FIGMA_ACCESS_TOKEN=figd_your_token_here

4. Connect to Claude Desktop

Edit the config file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "design-lazyyy-figma": {
      "command": "node",
      "args": ["/full/path/to/figma-remote-server/dist/local.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_your_token_here"
      }
    }
  }
}

💡 Tip: Run pwd in the project folder to get the full path.

⚠️ Node version issue? Use the full path to Node 18+:

hljs language-json

Copy

"command": "/Users/yourname/.nvm/versions/node/v20.x.x/bin/node"

Find your node path with which node.

5. Restart Claude Desktop

Quit completely (Cmd+Q) → reopen.

6. Test

Type in Claude Desktop:

Check Figma status

You should see:

7. Enable Write Operations (Optional)

Write tools (create nodes, edit text, manage variables) need the Figma Desktop plugin:

1. Open the Figma Desktop App (not the browser)
2. Open any file
3. Menu (≡) → Plugins → Development → Import plugin from manifest…
4. Select figma-remote-server/design-lazyyy-remote-server/manifest.json
5. Run it: Plugins → Development → Design Lazyyy Remote Server
6. Wait until the plugin shows online (🟢 green)

Done! You can now create/edit nodes, variables, and more via Claude. 🎉

🧰 All 46 Tools

🩺 Troubleshooting

🏗️ Architecture

Claude Desktop / Cowork / Cursor / VS Code
        │
        │ MCP (stdio)
        ▼
  ┌─────────────────────────────┐
  │  Design Lazyyy MCP Server   │
  │  ┌───────────────────────┐  │
  │  │  46 Tools             │  │
  │  │  Figma REST API       │  │
  │  │  LRU Cache            │  │
  │  └───────────────────────┘  │
  │           │                 │
  │   HTTP Bridge :9223–9232    │
  └─────────────────────────────┘
              │
              │ HTTP Polling (multi-host)
              ▼
  ┌─────────────────────────────┐
  │  Figma Desktop Plugin       │
  │  ┌───────────────────────┐  │
  │  │  Plugin API Access    │  │
  │  │  Variable CRUD        │  │
  │  │  Node Manipulation    │  │
  │  └───────────────────────┘  │
  └─────────────────────────────┘

🛠️ Development

npm install       # Install dependencies
npm run build     # Build TypeScript
npm run dev       # Watch mode
npm run lint      # Lint with Biome
npm run format    # Format with Biome

📝 Changelog

1.0.1

• Multi-host bridge — the Figma plugin now connects to every running MCP server at once (ports 9223–9232) instead of only the first. You can drive the same Figma file from regular Claude Desktop and Claude Cowork at the same time; each command's response is routed back to the host that sent it. No port config or manual selection needed.
• Continuous connection — self-healing port scan, per-server poll loops with retry, response send retries (5×), global error handlers, and an automatic rescan on wake-from-sleep so the plugin keeps working without dropping.
• figma_execute ES5 guidance — the tool description now spells out that code is evaluated by an ES5-only parser, so the model emits ES5-compatible JavaScript (no arrow functions, template literals, const/let, or async/await) and avoids expecting ';' parse errors on complex commands.

1.0.0

• Initial release — 46 tools for Figma design system analysis, token extraction, accessibility auditing, and read/write operations via the Desktop Bridge plugin.

📄 License

MIT © Design Lazyyy