Skip to main content

​
Requirements

Prerequisites

  • Node.js 18+ with npx available in your PATH
  • TemPad Dev extension installed and running in a Figma tab
  • An MCP-compatible client (Claude Desktop, VS Code with Cline, Cursor, Windsurf, etc.)
Node.js is required for both the MCP server runtime and the skills CLI. The server uses npx to run the latest version without manual installation.

​
Installation

1

Enable MCP in TemPad Dev

Open TemPad Dev in your Figma file:
  1. Click the TemPad Dev panel
  2. Go to Preferences → MCP server
  3. Toggle Enable MCP server to ON
2

Add the Server to Your MCP Client

Choose your installation method based on your MCP client:
Add this configuration to your MCP client’s settings file:
{
  "mcpServers": {
    "TemPad Dev": {
      "command": "npx",
      "args": ["-y", "@tempad-dev/mcp@latest"]
    }
  }
}
Configuration file locations:
  • Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)
  • VS Code/Cursor/TRAE: Use the deep link in TemPad Dev Preferences → MCP server
  • Windsurf: Copy the JSON snippet from the Preferences panel
3

Restart Your MCP Client

Restart your MCP client application to load the new server configuration.
4

Verify Connection

  1. Keep the TemPad Dev tab active and in the foreground
  2. In Figma, select a design element
  3. In your MCP client, try invoking the get_code tool
  4. Check the MCP status badge in the TemPad Dev panel title bar
The badge shows the current connection status:
  • Unavailable (gray): MCP server not configured or not running
  • Inactive (yellow): Server running but this tab is not active
  • Active (green): Connected and ready for tool calls

​
Multiple Figma Tabs

If you have multiple Figma files open with TemPad Dev running:
  1. Only one tab can be active at a time
  2. Click the MCP badge in the TemPad Dev panel to activate that tab
  3. Activating a tab automatically deactivates other tabs
  4. Tool calls are routed to whichever tab is currently active
Keep the Figma tab with your target design file active and in the foreground while using MCP tools to ensure stable communication.

​
Troubleshooting

​
Connection Issues

  • Verify Node.js 18+ is installed: node --version
  • Ensure npx is available: npx --version
  • Check your MCP client configuration file for syntax errors
  • Restart your MCP client after configuration changes
  • Click the MCP badge in the TemPad Dev panel to activate this tab
  • Only one Figma tab can be active at a time
  • Close other Figma tabs if you only need one design file
  • Keep the Figma tab active and in the foreground
  • Check that TemPad Dev panel is open and visible
  • Verify the MCP badge shows “Active” (green)
  • Try selecting a simpler node (smaller subtree) first
  • Check if another process is using ports 6220, 7431, or 8127
  • Ensure your firewall allows local WebSocket connections
  • Try restarting the MCP server (restart your MCP client)

​
Next Steps

Tools Reference

Learn about available tools and their parameters

Agent Skill

Install the skill for production-ready code generation