Fetches design context for a Figma node, returning reference code, assets, screenshot, and variables for Flutter, HTML, or React design-to-code workflows.
MIT
741,919 tools. Updated 2026-11-04 11:07
"A platform for collaborative design and prototyping (Figma)" matching MCP tools:
- Audit a Figma or Penpot design export against your contract, recovering screen/state from frame names and reporting missing or unmapped screens and states.MIT
- List connected Figma files or trigger a sync to bring design tokens, components, and page structure into Contextium libraries.MIT
- Push design tokens to Figma as variables, creating or updating variable collections automatically.MIT
- Import or export Tokens Studio/Figma design token trees to keep design and code in sync.Apache 2.0
- Extract design tokens from Figma files and map to Tailwind CSS utilities, updating the shared design context.MIT
Matching MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to remotely operate visual design tools via MCP protocol, with composable architecture for image processing, file operations, and workflow automation.MIT
- AlicenseNot gradedqualityDmaintenanceEnables multi-AI collaborative analysis by proxying requests to existing login-based MCP servers (Gemini CLI and Codex CLI) from Claude Desktop or Claude Code.MIT
Matching MCP Connectors
Figma MCP Pack
Design Feeds MCP.
- Create a Figma design-token scaffold with token rows, component review, style preview metadata, adapter source, and access-token safety notes for TouchDesigner.MIT
- Compare a design against a rendered implementation and get structured discrepancies. Provide a Figma URL, design image, or component description to produce a report of visual differences.MIT
- Pull the full design system from Figma—tokens, components, styles—into the local registry for developer use.MIT
- Compare Figma design tokens with code-side tokens to identify matching, missing, and divergent values. Pinpoint design-code gaps for accurate parity analysis.MIT
- Fetch Figma design tokens, components, and styles via REST API without plugins. Ideal for CI/headless workflows using FIGMA_TOKEN and FIGMA_FILE_KEY.MIT
- Need the official rules for a platform design system? Fetch complete references for Material 3, Apple HIG, and more—including specs, do/don'ts, and examples—to ground your UI in the authoritative baseline.MIT
- Create or modify Figma designs programmatically with JavaScript code. Supports design operations, variables, styles, components, and prototyping transitions.MIT
- Retrieve all published design system tokens from a Figma file, including colors, text styles, and effects for consistent design implementation.MIT
- Fetch a Figma frame and extract design tokens. Provide a frame link or file key with node ID to generate a run ID for design QA comparison.-
- Generate a design system rule sheet from the current Figma file, aggregating color tokens, typography styles, variables, and components into a single markdown block for AI context.MIT
- Validate and compile a strict JSON design document into Figma, supporting overlapping absolute-positioned nodes and local image assets. Rejects unknown fields; use dryRun to test without altering Figma.MIT
- Retrieve an XML document outline for a Figma design file, listing node IDs, layer names, types, positions, and sizes. Use it to explore unfamiliar files before requesting design context.MIT
- Convert a Figma frame into the design spec designfit_validate expects. Provide a Figma link or fileKey plus nodeId, or paste raw node data; returns design, componentMap, and viewport.MIT
- Generates a design system rule sheet from the current Figma file, aggregating color tokens, typography styles, variables, and components into a single markdown block for AI context.MIT
- Analyze codebases and design user interfaces using Google Gemini's visual understanding and detective capabilities for rapid prototyping and comprehensive analysis.MIT