gethopp/figma-mcp-bridge

Figma Plugin & MCP server to bypass API limits

What it solves

Figma MCP Bridge allows AI agents to interact with Figma documents without hitting the strict API rate limits associated with free Figma accounts. It enables AI tools to read design data and perform edits directly within Figma files by using a local plugin as a bridge, bypassing the standard cloud API.

How it works

The system consists of two parts: a Figma plugin and an MCP server. The plugin runs inside the Figma desktop app and streams live document data via WebSockets to a local MCP server. The server then routes tool calls from an AI client (like Cursor or Claude Desktop) to the correct Figma file using a fileKey. It supports a leader-follower architecture to allow multiple AI tools to connect to the same bridge simultaneously.

Who it’s for

Designers and developers using AI-powered IDEs or agents that need to read design specifications, export assets, or automate the creation of UI elements directly in Figma.

Highlights

  • Bypasses API Limits: Uses a local plugin to avoid the 6-request-per-month limit for free Figma accounts.
  • Multi-file Support: Connects to multiple open Figma files simultaneously, allowing agents to query any of them via fileKey.
  • Read and Write Capabilities: Includes tools to read document trees, styles, and prototypes, as well as tools to create frames, shapes, text, and apply auto-layout.
  • Broad Compatibility: Works across Figma design files, Dev Mode, and FigJam boards.
  • Asset Export: Can export nodes as PNG, SVG, JPG, or PDF and save them directly to the local filesystem.

Related

  • Project
    grab/cursor-talk-to-figma-mcp

    An MCP integration that allows AI agents like Cursor to read and programmatically modify Figma designs via a WebSocket server and plugin.

  • Project
    figma/mcp-server-guide

    Documentation for Figma’s MCP server – an HTTP service that lets AI coding assistants read design data (components, variables, layout) from Figma, generate placeholder images, and (in beta) write back to the canvas. Includes setup for VS Code, Cursor, Claude Code, Gemini CLI, rate‑limit info, and best‑practice tips for prompting agents to turn frames into code.

  • Project
    GLips/Figma-Context-MCP

    An MCP server that gives AI coding agents access to Figma design data, allowing them to implement designs more accurately than using screenshots.

  • Project
    southleft/figma-console-mcp

    A Model Context Protocol server that turns Figma design systems into an API, enabling AI assistants to create designs, sync tokens, and audit design-code parity.

  • Project
    ecomfe/tempad-dev

    TemPad Dev is a Chrome extension that connects Figma designs with AI coding agents. It provides instant CSS/JS inspection, AI‑driven canvas editing, and design‑to‑code generation via a local MCP server. Developers can customise output with simple JavaScript plugins and integrate a variety of LLM‑based agents.