Design Context Bridge

When you hand a developer a Figma and say "build this", they don't just copy the visible pixels. They open the file, identify the components, read the exact colors and type scale, infer the routes the app will need, figure out the hover and disabled states, and export the icons.This server gives the AI that same access, so it can do that work for you — faithfully, not approximately.

- Frontend developerswho get a Figma and need to build it pixel-faithful, fast.
- Designers and PMswho want an AI to reason about a design — routes, components, tokens — without writing code.
- Anyone building AI toolingthat needs structured, reliable design data instead of vision-model guesswork.

A screenshot is a guess. This is the real data.

Everything works inbothmodes — choose by workflow, or use both at once.

A Figma plugin ("Frontend Handoff Snapshot") runs inside Figma desktop. Select any layer and instantly see itscolors, typography, and spacingin the plugin panel — no token or server needed for inspection. When you're ready, pressExportto send the full selection context to the local bridge for your AI coding tool.

The plugin only talks tolocalhostand never modifies your file. It is not Figma's official MCP integration (use_figma) and isn't a replacement for it — pairing it with the MCP server below is optional, for developers who want their AI coding tool to read that same exported context.

The plugin isn't on the Figma Community yet, so you install it manually from the manifest — it takes about a minute and works exactly the same.

Pass anyfigma.comURL and the server reads it through the Figma REST API with a personal access token. No plugin, no Figma desktop, no selection. Best for reviewing files you don't have open, CI, or headless use.

The design-system, structure, variant and asset-export tools run in REST mode — pass a URL and they read the whole file.

"Extract the design system from this Figma: <url>" "What routes would this app have?" "What variants does this Button component have?" "Export every icon in this file as SVG into ./assets" "Build this landing page faithfully — components, tokens, hover states and all."

The AI calls the right tools, gets real data, and builds from it.

Figma desktop design-context-bridge AI agent ────────────── HTTP ───────────────── stdio ────────── Plugin ────────► :3055 bridge ◄──────── Claude Code (push/poll) + MCP server Cursor OpenCode figma.com ───────────────── Windsurf Any file URL ────────► REST API client VS Code…

- Thepluginpushes selection context and answers on-demand node requests in real time.
- TheMCP serverexposes 20 tools over stdio.
- TheREST clientreads any file fromapi.figma.comwhenFIGMA_ACCESS_TOKENis set — and powers the analysis and asset tools.

YourFIGMA_ACCESS_TOKENis read only from the environment and sent only toapi.figma.comin theX-Figma-Tokenheader. It isnever logged, cached, or written to diskby this server, and never included in tool responses. Treat it like a password: use a scoped Personal Access Token, never commit it, and revoke it if exposed. PATs are intended for local/single-user use — for a public, multi-user product, use Figma OAuth instead.

- The local bridge listens on127.0.0.1:3055only— never expose it to untrusted networks.
- This tool runs entirely on your machine; its maintainers receive no data.
- Design data is relayed to the AI client you connect, which may forward it to its model provider.
- Only use it with Figma files you have permission to access.

Create, edit, and export SVGator animations (SVG, Lottie, GIF, video) from your AI assistant, and keep an editable project you can open in the editor anytime.

Remote MCP image conversion tool for PNG, JPEG, WebP, AVIF, GIF, SVG, and HEIC workflows.

Hosted MCP server for generating SVG illustrations, icons, and brand mascots with svgapp.ai from MCP-compatible AI clients.

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

Get access to MCP server SVG and MCP server PNG icons in your vibe-coding projects

745+ CSS3 animations and 9,000+ real SVG icons for AI coding agents. 10 MCP tools. Zero-clone setup via npx.

Create, validate, and render diagrams from D2 (Declarative Diagramming) code into SVG and PNG formats.

Extract and download usable website favicons and return direct icon URLs and metadata through an MCP server.

MCP server for AI-powered SVG icon generation. Generate production-ready icons from text descriptions. Supports single icons, bundles, style customization, and regeneration.