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

---

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

Tool	What it does
ping_figma	Check connection status
list_frames	List all frames on the page
create_slide	Create a pitchbook slide frame
add_stat_cards	Add KPI stat cards to a slide
add_chart	Add a chart as editable SVG vectors
add_legend	Add a color legend row
add_text	Add a text node
update_text	Edit existing text by name
delete_node	Remove a node
focus_frame	Zoom viewport to a frame
set_fill_color	Change background color
duplicate_frame	Clone a frame as a template

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)

Variable	Default	Description
PORT	3000	HTTP health check (set automatically by Railway)
WS_PORT	9001	WebSocket port the Figma plugin connects to

---

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.