figma-mcp

Exposes Figma's document hierarchy (pages, frames, components, layers) as MCP resources that LLM agents can query and navigate. Implements a resource-based protocol where each Figma node becomes an addressable entity with metadata (type, name, bounds, properties), enabling agents to understand design structure without direct API calls. Uses MCP's resource subscription pattern to maintain live references to Figma objects.

Enables LLM agents to analyze Figma design elements (frames, components, text, shapes) and generate corresponding code (HTML/CSS, React, Vue, or other frameworks). The MCP server provides design metadata to the LLM, which uses chain-of-thought reasoning to map visual properties (layout, colors, typography, spacing) to code constructs. Supports component-aware generation where Figma components map to reusable code components.

Exposes Figma API operations (create/update/delete nodes, modify properties, manage components) as MCP tools that LLM agents can invoke with structured arguments. Implements schema-based tool definitions where each Figma operation (e.g., 'update node fill color', 'create frame') is a callable tool with input validation, error handling, and response normalization. Handles authentication and API rate limiting transparently.

Automatically extracts design tokens (colors, typography, spacing, shadows) from Figma styles and variables, normalizing them into structured formats (JSON, CSS variables, Tailwind config). Implements a mapping layer that translates Figma's style hierarchy into token definitions, with support for semantic naming (e.g., 'primary-button-color' instead of 'color-blue-500'). Enables bidirectional sync where token changes in Figma propagate to code.

Analyzes Figma component hierarchies to identify component instances, overrides, and dependencies. Builds a dependency graph showing which components use which other components, enabling impact analysis for changes. Detects orphaned components, unused variants, and inconsistent overrides. Provides LLM agents with structured component metadata to reason about design system health.

Enables LLM agents to add comments, annotations, and feedback to Figma designs through MCP tool calls. Implements structured comment creation with context (node ID, position, content) and supports threaded discussions. Allows agents to flag design issues, suggest improvements, or request clarifications without requiring manual Figma UI interaction.

Tracks changes to Figma files over time by querying file version history and computing diffs between versions. Identifies what changed (nodes added/removed/modified), who made changes, and when. Enables LLM agents to understand design evolution and reason about change impact. Implements a change log that can be queried for specific time ranges or node types.

Analyzes Figma designs for responsive design patterns and validates layouts against specified breakpoints. Checks for proper use of constraints, auto-layout, and responsive sizing. Identifies potential responsive design issues (text overflow, layout collapse, unintended scaling). Provides LLM agents with structured feedback on design responsiveness and suggests improvements.

Analyzes Figma designs for accessibility issues including color contrast, text size, touch target size, and semantic structure. Implements WCAG compliance checks that flag designs violating accessibility standards. Generates accessibility reports with severity levels and remediation suggestions. Enables LLM agents to audit designs and suggest accessible alternatives.