Log inSubmit server
Figbridge logo

Figbridge

Connects Figma to local AI agents for design inspection, URL imports, audits, and source-repo patches.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Figbridge

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "figbridge": {
      "command": "npx",
      "args": [
        "-y",
        "figbridge-mcp"
      ],
      "env": {
        "FIGBRIDGE_PORT": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y figbridge-mcp

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 8d ago.

Overview

The figbridge MCP server connects a Figma plugin and local MCP bridge to AI clients over localhost. It exposes tools for reading selections, screens, components, tokens, and assets; importing web pages into Figma; auditing designs; and generating source patches from design changes. The bridge uses HTTP and SSE locally, while agents can connect through stdio, and the plugin must be running with Live bridge enabled. Reach for it when an agent needs deterministic access to Figma data, browser captures, design audits, or a structured handoff bundle without a cloud service.

Use cases

  • Inspect Figma screens and tokens from an AI coding agent
  • Import a live website into Figma for editable design review
  • Audit responsive, accessibility, and visual fidelity issues
  • Generate source-repository patches from Figma-to-code differences
  • Package design context for offline agent handoffs

Key features

  • Local Figma plugin and MCP bridge
  • Screen, component, token, and asset inspection
  • URL import and Chrome current-tab capture
  • Deterministic design and regression audits
  • Source diff and patch generation
  • Offline agent handoff bundles

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

5/5 checks healthy over the last 45d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 10d ago via OSV.dev · figbridge-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars13Stargazers on the source repository.
npm downloads247Package downloads in the last 30 days.
Last commit12d agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Directory activity2 viewsConfig copies, upvotes, and views on AllMCPs.

How Figbridge works

What figbridge MCP server does

The figbridge MCP server links a locally running Figma plugin with MCP-capable development agents. It can inspect the current selection, pages, frames, screens, components, tokens, and assets, then return structured design information for agent workflows. Cataloging tools can describe screens, export application specifications, export pages or nodes, and select nodes in the open Figma file.

The server also supports actions inside Figma. Agents can clone screens, recolor designs, apply tokens, and run design-system linting. The get_agent_bundle tool packages design guidance, hierarchy, components, tokens, responsive information, screenshots, issues, and change data into a downloadable archive for offline agent work.

Browser-oriented tools import live URLs into Figma, capture responsive variants, batch-import multiple URLs, and inspect or screenshot pages. Deterministic audits cover palette, typography, accessibility, whitespace, mobile behavior, interaction discovery, text fidelity, visual fidelity, and frontend regression. Round-trip tools compare imported Figma content with a live source directory and can produce a focused HTML, JSX, or related source patch.

How it works

The local architecture has three parts: Figma Desktop, the Figbridge plugin UI, and the MCP server. The plugin communicates with Figma through its plugin messaging system and posts data to a local HTTP endpoint. Agents call MCP tools through stdio, while the bridge uses HTTP and SSE on localhost. The default preferred port is 7331; the bridge can fall back through 7332 to 7340 when needed, and the plugin probes that range.

Enabling Live bridge in the plugin allows current selections to be pushed automatically. Browser capture can come from the supplied unpacked Chrome or Edge extension, which sends selected elements, visible viewports, full pages, authenticated tabs, localhost pages, and staging pages to the local bridge. The extension posts only to the local address range described by the project.

The audit and comparison features use deterministic measurements rather than model calls. Results include numeric scores, structured findings, viewport comparisons, and, where source mapping is available, files or tokens associated with changes.

Setup and configuration

Install the plugin by cloning the repository, then import plugin/manifest.json into Figma through the development plugin menu. Configure Claude Desktop with npx figbridge-mcp init, restart the client, and run the plugin on a Figma frame with Live bridge enabled. Other supported MCP clients can use the same npx figbridge-mcp executable. Clients that support the official MCP registry may discover the published io.github.rudraptpsingh/figbridge entry.

The figbridge MCP server accepts FIGBRIDGE_PORT to override its preferred starting port. Use npx figbridge-mcp doctor to find active ports and clean up orphaned processes. The bridge command starts a persistent local HTTP and SSE bridge for workflows where the calling process closes its standard input. Configuration can either follow the latest package through npx -y figbridge-mcp@latest or be pinned with the --pin option.

Tools and capabilities

The tool groups include:

  • Read and catalog operations for selections, history, tokens, pages, frames, screens, components, assets, nodes, and application specifications.
  • Figma actions for cloning screens, recoloring, applying tokens, linting, and creating agent bundles.
  • URL import and browser inspection, including preflight checks, responsive sets, batch imports, screenshots, URL probing, fingerprinting, and interaction audits.
  • Design audits for palette, typography, accessibility, whitespace, mobile layouts, text fidelity, visual fidelity, and regression changes.
  • Source round-tripping through text-node diffs, generated patches, rendered-URL specification diffs, component mapping, and mockup matching.

Limitations and notes

The Figma plugin is not installed from Figma Community; it must be imported from the cloned repository. A Figma Desktop session and an open plugin with Live bridge enabled are required for Figma-connected operations. The server is designed for local use over 127.0.0.1, and the browser extension does not provide a cloud relay.

Import quality depends on the page being captured. preflight_import can identify bot protection, deep DOM structures, low-resolution images, SVG-heavy content, and downloadable fonts before a full import. For difficult video-heavy or generated pages, hybridSnapshot can add a screenshot reference beneath editable layers, but this does not make every visual element editable. Source patch generation also requires a source directory when file-level edits are needed.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Figbridge

figbridge is an MCP server that connects a local Figma plugin to AI agents through a localhost bridge. Its main tools read screens, components, tokens, and assets; import URLs into Figma; run deterministic design audits; create agent handoff bundles; compare designs with source code; and generate source patches.

Install it with `npx figbridge-mcp init`, then import the cloned repository’s `plugin/manifest.json` into Figma. Restart Claude Desktop after configuration, open the plugin on a frame, and enable Live bridge. Other MCP clients can run the same `npx figbridge-mcp` executable.

Yes, figbridge works with Cursor through the same MCP executable. Configure Cursor to use `npx figbridge-mcp`, or use the official MCP registry if the client supports registry discovery. The Figma plugin must be running with Live bridge enabled for Figma-connected tools.

Run `npx figbridge-mcp doctor` to clean up orphan processes and inspect active ports. The bridge can move from port 7331 through 7340 automatically, while `FIGBRIDGE_PORT` sets the preferred starting port. Restart the MCP client after configuration changes.

Yes, figbridge can compare imported Figma content with a live source directory and generate a minimal source patch. The round-trip tools include per-text-node diffs and structured CSS hints, while source mapping can identify files and design tokens associated with visual differences.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFigbridge AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/figbridge?style=directory)](https://allmcps.com/mcp/figbridge)
HTML Embed
<a href="https://allmcps.com/mcp/figbridge"><img src="https://allmcps.com/api/badge/figbridge?style=directory" alt="Figbridge on AllMCPs" /></a>