VizX — Claude ↔ Figma MCP Bridge

Chat with Claude and watch your Figma canvas update in real time.

How it works

You chat with Claude
  → Claude calls MCP tools
    → MCP server (hosted on Railway) sends commands via WebSocket
      → Figma plugin executes them on the canvas

Related MCP server: Claude Talk to Figma MCP

Setup (one time, ~10 minutes)

Step 1 — Deploy to Railway

1. Fork or upload this repo to your GitHub account

2. Go to railway.app → New Project → Deploy from GitHub

3. Select this repo — Railway auto-detects Node.js and deploys

4. Once deployed, go to Settings → Networking → Generate Domain

5. Copy your public domain — it looks like your-app.railway.app

Step 2 — Load the Figma plugin

1. Open Figma Desktop (must be the desktop app, not browser)

2. Go to Plugins → Development → Import plugin from manifest…

3. Select figma-plugin/manifest.json from this repo

4. VizX Claude Bridge will appear under Development plugins

Step 3 — Connect the plugin to Railway

1. Open any Figma file

2. Run: Plugins → Development → VizX Claude Bridge

3. Replace YOUR-APP.railway.app in the URL field with your actual Railway domain

4. Click Connect

5. You should see "Connected — ready for Claude commands"

Step 4 — Register with Claude Desktop

Open (or create):

~/Library/Application Support/Claude/claude_desktop_config.json

Add this block, updating the path to where you cloned this repo:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/FULL/PATH/TO/figma-mcp/server.js"]
    }
  }
}

Restart Claude Desktop.

Step 5 — Chat

Example prompts to try:

"Create a pitchbook slide called Revenue Growth with the headline '$281M revenue by 2030'"

"Add a stacked bar chart showing LiveWell vs acquired revenue 2026-2030"

"Add stat cards: $45M 2026 revenue, $281M 2030 revenue, 6.2× growth"

"Update the headline to 'Revenue scales 6× through roll-up strategy'"

Tools Claude can call

Chart types

• bar — grouped bar chart

• stacked_bar — stacked bar chart

• line — line chart with area fill

• horizontal_bar — horizontal bars (tornado, bridge)

• combo — bars + line on dual axis

All charts render as editable SVG vector paths — not images.

Environment variables (Railway)

Troubleshooting

"Figma plugin is not connected" — Make sure the plugin panel is open in Figma Desktop.

"Connection error" in plugin — Check your Railway domain is correct and the service is awake.

Charts look stretched — Resize the SVG node in Figma; it scales to frame width on import.

Claude doesn't see figma tools — Restart Claude Desktop after editing the config file.

Railway goes to sleep — Disable sleep under Railway → Settings, or upgrade to a paid plan.

Copyright © 2026 Vizx Global. All rights reserved.