Pull design tokens, components, and styles from Figma into local registry for code integration. Use when starting design-related sessions or after Figma updates.
MIT
132,451 tools. Last updated 2026-05-08 22:44
"Figma design tool and resources" matching MCP tools:
- Prepares a structured payload to extract design context from a Figma file, enabling AI clients to generate specifications using Figma MCP calls.MIT
- Extract Figma node IDs and convert designs into HTML, React with CSS Modules, or React with Tailwind CSS using MCP server f2c-mcp-server to automate design-to-code workflows.MIT
- Generate a brand theme that outputs CSS variables and Figma Variables JSON from design tokens; requires brand name and primary color, optional neutral.MIT
- Extract design tokens from Figma variables JSON export to translate design systems across platforms like Material 3, SwiftUI, and CSS.MIT
- Extract design tokens, components, and structure from a Figma design by providing a URL or file ID.MIT
Matching MCP Servers
- FlicenseBqualityCmaintenanceEnables extraction of design context from Figma files as CSS-like properties and provides tools to render Figma nodes as images. It integrates with AI agents via the Model Context Protocol to facilitate design-to-code workflows by providing layout, style, and typography information.Last updated2
- AlicenseBqualityCmaintenanceEnables 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.Last updated75810MIT
Matching MCP Connectors
- Figma MCP ServerOAuth
The Figma MCP server brings Figma design context directly into your AI workflow.
Provides UX capabilities to enhance the design output and understanding of AI systems.
- Extract all image resources from a specified Figma file using your personal access token to streamline asset management and integration workflows.MIT
- Run visual regression tests comparing a React component against its Figma design to verify implementation accuracy.MIT
- Convert Figma design files into agile user stories with acceptance criteria and epics. Creates structured markdown documentation from design specifications.MIT
- Extract Figma design data including structure and images for integration into development workflows. Provide the full Figma URL to retrieve organized design information.MIT
- Retrieve all published design system tokens from a Figma file, including colors, text styles, and effects for consistent design implementation.
- Extract design context from Figma files as CSS-like properties for layout, styles, text, and dimensions to facilitate design-to-code workflows.
- Compare and synchronize design tokens between Figma variables/styles and codebases to maintain consistent design systems.
- Extract design tokens like colors and spacing from Figma files to synchronize with codebases and maintain design consistency.
- Modify design token values in the local registry and optionally sync changes to Figma files to maintain design system consistency across platforms.MIT
- Diagnose Figma WebSocket bridge connectivity by checking server status, client connections, and latency to ensure reliable design system operations.MIT
- Capture screenshots of Figma design elements as image data for visual analysis, component inspection, or design system workflows.MIT
- Extract brand identity from a Figma design file by providing variable maps, styles, or logo SVG. Plan mode suggests tools to call; ingest mode processes all collected data.MIT
- Analyzes Figma designs using AI vision to identify visual quality issues, check accessibility compliance, or verify spec adherence for design system validation.MIT
- Retrieve currently selected nodes in Figma, including their IDs, names, and dimensions, to support design system mapping.MIT