OpenViSTAI · Agents · Blockchain · Crypto
Submit a project
Menu
MCP & Tooling

Figma MCP Bridge

Figma MCP Bridge is an open-source TypeScript project that pairs a Figma desktop development plugin with an MCP server, allowing compatible AI tools to access live Figma document data and perform selected design edits.

Explore the practical guide ↓

Independent OpenViST project profile, based on linked sources.

Figma MCP Bridge — OpenViST project profile in MCP & Tooling.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use it when an MCP-compatible AI client needs direct access to one or more open Figma desktop files, especially for workflows intended to avoid relying solely on Figma API requests.

Who it is for

  • Designers and developers using MCP-compatible AI clients with Figma desktop.
  • Teams exploring AI-assisted design inspection, design-to-code workflows, or agent-driven changes to Figma files.

Documented uses

  • Read a Figma page tree, selection, node details, styles, variables and file metadata through an AI client.
  • Inspect prototype connections and trace navigation flows.
  • Export selected nodes as images or save screenshots locally.
  • Use opt-in write tools to update text and node properties, or apply supported fills and animation settings.
Before you choose

Requirements & limits

The project is public and MIT-licensed. Setup requires the Figma desktop app on macOS or Windows; browser Figma does not support importing the development plugin.

  • The workflow depends on a local Figma desktop plugin, not the browser version.
  • MCP server configuration and plugin import are both part of setup.
  • The tool list includes both read operations and opt-in write operations; animation tools are marked beta.
  • Dev Mode works read-only, while FigJam is also listed as a supported plugin context.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Set up the Figma MCP Bridge

Connect a Figma desktop file to an MCP-compatible AI client.

Before you start

  • Figma desktop app on macOS or Windows; browser Figma cannot import development plugins.
  • An MCP-compatible AI client, such as Cursor, Windsurf or Claude Desktop.
  • The bridge package and plugin release.

Steps

  1. Add the figma-bridge server configuration to the AI client's MCP configuration, using npx and @gethopp/figma-mcp-bridge.

  2. Download the plugin from the project's releases and import plugin/manifest.json through Figma's Plugins > Development > Import plugin from manifest menu.

  3. Open a Figma file, run the plugin, and prompt the AI client; the server connects to the plugin.

Expected outcome

The AI client can access the connected Figma file through the bridge's listed MCP tools.

Guide limitations

  • The browser version of Figma does not support importing development plugins.
  • Dev Mode is read-only.
  • To connect multiple files, open the plugin in each file.
Documentation 1 ↗
Evidence and transparency

Sources & review

Official repository ↗
Source record details
Source availability
Active
Sources checked
13 October 2026
Original website title
gethopp/figma-mcp-bridge · Official homepage title · retained in its source language
How we review sourcesSuggest a correction