Figma MCP Bridge
Figma MCP Bridge is a combined Figma plugin and MCP server that bypasses Figma's free API rate limits by streaming live document data directly to AI tools via a local WebSocket connection instead of the standard cloud API.
What is Figma MCP Bridge?
Figma MCP Bridge is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to figma mcp bridge is a combined figma plugin and mcp server that bypasses figma's free api rate limits by streaming live document data directly to ai tools via a local websocket connection instead of t...
Figma MCP Bridge is a combined Figma plugin and MCP server that bypasses Figma's free API rate limits by streaming live document data directly to AI tools via a local WebSocket connection instead of the standard cloud API.
This server falls under the Browser Automation category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Figma MCP Bridge is a combined Figma plugin and MCP server t
Use Cases
Maintainer
Works with
Installation
NPM
npx -y @gethopp/figma-mcp-bridgeManual Installation
npx -y @gethopp/figma-mcp-bridgeConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Figma MCP Bridge
Figma MCP Bridge is a combined Figma plugin and MCP server that streams live Figma document data to AI tools via a local WebSocket connection, completely bypassing Figma's cloud API and its rate limits. Unlike the standard Figma REST API which limits free users to 5 requests per minute, this bridge establishes a direct WebSocket channel between the Figma desktop application and your local MCP server, delivering real-time document state with no latency or quota concerns. The bridge exposes 30 tools covering read operations (inspecting nodes, styles, variables, screenshots) and write operations (creating frames, text, shapes, modifying fills, layouts, and more), enabling AI assistants to actively participate in the design process.
Prerequisites
- Figma desktop application installed (not just the browser version)
- Node.js 18+ and npm or npx available
- An MCP-compatible client such as Claude Desktop, Cursor, or Windsurf
- The Figma MCP Bridge plugin installed in Figma (available from the Figma plugin marketplace)
Install the Figma plugin
Open Figma desktop, go to Plugins > Manage Plugins, search for 'Figma MCP Bridge', and install it. This plugin establishes the WebSocket server inside Figma at ws://localhost:1994/ws.
Activate the plugin in your Figma document
Open a Figma document, then run the Figma MCP Bridge plugin from the Plugins menu. The plugin must be actively running for the MCP server to receive document data.
Add the MCP server to your client configuration
Configure your MCP client (Claude Desktop, Cursor, Windsurf, etc.) to run the bridge server via npx. No separate installation is required.
{
"mcpServers": {
"figma-bridge": {
"command": "npx",
"args": ["-y", "@gethopp/figma-mcp-bridge"]
}
}
}Verify the WebSocket connection
After starting your MCP client, the bridge server connects to Figma via WebSocket on port 1994. Check the plugin panel in Figma to confirm it shows a connected status.
Start using Figma tools in your AI client
With the connection established, you can now use any of the 30 available tools. Start with read-only tools like get_document or get_selection to explore the current file before making changes.
Figma MCP Bridge Examples
Client configuration
Add this configuration to claude_desktop_config.json, cursor settings, or windsurf settings. The bridge auto-connects to the Figma plugin over the local WebSocket.
{
"mcpServers": {
"figma-bridge": {
"command": "npx",
"args": ["-y", "@gethopp/figma-mcp-bridge"]
}
}
}Prompts to try
These prompts use the read and write tools exposed by Figma MCP Bridge to inspect and modify live Figma documents.
- "Get the current Figma document structure and list all top-level frames"
- "Take a screenshot of the selected element in Figma"
- "Create a new frame named 'Hero Section' at position 0,0 with width 1440 and height 800"
- "Change the fill color of the selected node to #FF5733"
- "List all text styles defined in this Figma file"
- "Set the text content of the node named 'CTA Button' to 'Get Started Free'"Troubleshooting Figma MCP Bridge
MCP server cannot connect to Figma — WebSocket connection refused
Ensure the Figma MCP Bridge plugin is actively running inside the Figma desktop app. The plugin must be open in a document for the WebSocket server on port 1994 to be available. Browser-based Figma does not support this plugin.
Changes are not reflected in Figma after running write tools
Check that the plugin panel still shows as connected. If the Figma document was closed and reopened, you may need to restart the plugin. For multi-file operations, ensure you are passing the correct fileKey parameter to target the right document.
Multiple MCP server instances causing conflict
The bridge uses leader election to handle multiple server instances. If you have multiple AI clients running simultaneously, only one instance will be the active leader receiving Figma data. Close duplicate client sessions or restart the Figma plugin to reset the leader.
Frequently Asked Questions about Figma MCP Bridge
What is Figma MCP Bridge?
Figma MCP Bridge is a Model Context Protocol (MCP) server that figma mcp bridge is a combined figma plugin and mcp server that bypasses figma's free api rate limits by streaming live document data directly to ai tools via a local websocket connection instead of the standard cloud api. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Figma MCP Bridge?
Install via npm with the command: npx -y @gethopp/figma-mcp-bridge. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Figma MCP Bridge?
Figma MCP Bridge works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Figma MCP Bridge free to use?
Yes, Figma MCP Bridge is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Figma MCP Bridge Alternatives — Similar Browser Automation Servers
Looking for alternatives to Figma MCP Bridge? Here are other popular browser automation servers you can use with Claude, Cursor, and VS Code.
Chrome DevTools MCP
★ 40.6kAI-powered Chrome automation server with natural language element detection. Control Chrome browser through MCP protocol for testing, debugging, and performance analysis. Features 91% accuracy in element location, works with free AI models, and suppo
UI TARS Desktop
★ 34.9k📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
Playwright
★ 32.8kA production-ready browser automation server that enables AI assistants to interact with web pages using tools for navigation, element interaction, and data extraction. It features a built-in Inspector UI and robust crash recovery for reliable automa
Page Agent
★ 18.0kJavaScript in-page GUI agent. Control web interfaces with natural language.
Chrome
★ 11.7kAn extension-based MCP server that enables AI assistants to control your browser, leveraging existing sessions and login states for automation and content analysis. It provides over 20 tools for semantic tab search, interactive element manipulation,
LAMDA
★ 7.8kThe most powerful Android RPA agent framework, next generation mobile automation.
Browse More Browser Automation MCP Servers
Explore all browser automation servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Figma MCP Bridge in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Figma MCP Bridge?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.