Fetches design context for a Figma node, returning reference code, assets, screenshot, and variables for Flutter, HTML, or React design-to-code workflows.
MIT
743,385 tools. Updated 2026-11-04 19:54
"A design and prototyping tool - 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
- FlicenseAqualityDmaintenanceCompares Figma frames to live pages, checking colors, fonts, and border radii, and generates a shareable HTML report.46-
- AlicenseBqualityDmaintenanceEnables interaction with Figma designs through the Figma API, allowing users to export images in multiple formats, extract style data and CSS, analyze design elements, and retrieve SVG code from Figma files. Supports batch operations and comprehensive design element analysis including images, vectors, and components.723 npm11MIT
Matching MCP Connectors
Figma MCP Pack
Parse a Figma file URL. Path discarded.
- 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
- Bridge and plugin connection status: whether this process holds the Figma connection or shares it, every connected Figma file (session id, file, page, user, plugin version), each file's editor (Figma Design, FigJam or Figma Slides) with…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
- 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
- Run arbitrary Python scripts with full access to the unreal module for prototyping or tasks lacking dedicated tool support.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
- 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
- Reconstruct captured webpages in Figma by converting DOM structures into design elements like frames, shapes, and text for design analysis or prototyping.MIT
- Read a Figma design from a URL or file key through the Figma REST API, returning a code-oriented spec for a selected node or a file outline to choose frames.MIT