skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

figma-mcp-bridge

Streams live Figma document data to AI tools via an MCP server for design-to-code workflows.

7|2|Updated May 16, 2026
Search Tags:#MCP#figma#design tokens#plugin#WebSocket#design-to-code#screenshot export
One-click install
npx skills add https://github.com/reason-machines/mcp-skills --skill figma-mcp-bridge-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-mcp-bridge
Source: https://github.com/reason-machines/mcp-skills/tree/main/skills/figma-mcp-bridge
Command: npx skills add https://github.com/reason-machines/mcp-skills --skill figma-mcp-bridge-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @gethopp/figma-mcp-bridge.

What problem does it solve? Figma's official API imposes restrictive rate limits (as low as 6 requests per month for free users), making it impractical for AI agents to read or edit design files. This Skill bypasses those limits by streaming live document data directly from a Figma plugin to AI tools over a local MCP server connection. ## Core Features & Use Cases - Read Tools: Query document trees, current selection, nodes by ID, styles, variables, and design context with depth limits to control token usage. - Write Tools: Create and edit frames, text, shapes, and images; set fills, strokes, effects, and auto-layout; duplicate, reparent, group, and delete nodes (design editor only). - Screenshot Export: Export nodes as PNG, SVG, JPG, or PDF, either base64-encoded or saved to the local filesystem. - Multi-File Support: Connect to multiple Figma files simultaneously and address each by fileKey. - Use Case: Extract design tokens from a Figma design system file with get_styles and get_variable_defs, convert them to CSS custom properties, and generate React components from selected nodes. ## Quick Start Connect to my open Figma file and extract all design tokens and component structure so you can generate matching React components.

Frequently Asked Questions about figma-mcp-bridge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect Figma to an AI tool without API rate limits?▼

Use a Figma plugin paired with a local MCP server that streams document data over WebSocket instead of the REST API. Add the figma-bridge server to your MCP configuration, import the plugin into Figma, and run it inside your file to establish the connection.

How to extract design tokens from Figma for CSS?▼

Call get_variable_defs and get_styles through the MCP server to retrieve all variable collections, modes, and style definitions. Then map the returned values to CSS custom properties or your preferred token format.

Can AI agents edit Figma files in Dev Mode?▼

No, write tools only work when the plugin runs in Figma's design editor. Dev Mode is read-only and returns clear errors, so switch to the Design tab before using create or modify operations.

Does the Figma MCP bridge support multiple files at once?▼

Yes, it maintains simultaneous connections to multiple Figma files. Run the plugin in each file, then use list_files to get their fileKeys and pass the appropriate fileKey to any tool call.

Why does the Figma plugin show disconnected from the MCP server?▼

Disconnection usually means the MCP server is not running, WebSocket port 1994 is blocked by a firewall, or the local server build path is incorrect. Restart the plugin and check your AI tool's logs for leader election messages.

What node ID format does Figma MCP tooling require?▼

Node IDs must use the colon format such as 4029:12345, not hyphenated variants. Copy IDs directly from get_selection results, the get_document tree, or the Figma Dev Mode inspector.

Related Skills

Explore More Design & Creative Skills→
reason-machinesreason-machines
7

figma-mcp-bridge

Streams live Figma document data to AI tools via an MCP server for design-to-code workflows.

Official
Intermediate
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
BruceTyndallBruceTyndall

visual-regression-checker

Capture and compare web application screenshots against a baseline to detect visual drift.

Community
Intermediate
Sake-TeamSake-Team

fal-ai-media

Generate images, videos, and audio via fal.ai's MCP.

Official
Intermediate