figma-mcp

Exposes Figma's REST API document hierarchy through MCP tools, enabling programmatic access to file structure, layers, components, and design tokens. Works by wrapping Figma's GET /v1/files/{file_id} endpoint and parsing the hierarchical JSON response into queryable node structures with metadata about frame bounds, fill colors, typography, and component references.

Resolves component instances to their main component definitions and tracks applied overrides (property changes, nested swaps). Implemented by following Figma's componentId references through the document tree and comparing instance properties against the main component's defaults to identify which properties have been overridden.

Extracts constraint rules (fixed/flexible width/height, left/right/center alignment) and responsive behavior metadata from Figma elements. Parses constraint properties to understand how elements resize relative to their parent, enabling responsive layout code generation.

Extracts shadow, blur, and other visual effects from Figma elements, normalizing them to CSS or design token format. Works by parsing Figma's effects array (shadows, blurs, background blurs) and converting to standard CSS syntax or design token representations.

Extracts design tokens (colors, typography, spacing, shadows) from Figma styles and component properties, normalizing them into structured JSON or CSS variable format. Works by parsing Figma's style definitions (fill colors, text styles, effects) and mapping them to token categories, then generating standardized output formats compatible with design token standards (Design Tokens Community Group format).

Registers Figma API operations as MCP tools with auto-generated JSON schemas, enabling LLM agents to discover and call Figma capabilities through a standardized interface. Implemented by wrapping Figma REST endpoints with MCP's tool schema format, generating input/output schemas from Figma API specifications, and handling authentication transparently through MCP's credential management.

Lists accessible Figma files and pages with metadata (name, last modified, owner, thumbnail URL) by calling Figma's REST endpoints for team/project resources. Returns structured data about available design files, enabling agents or applications to discover and select files without hardcoding file IDs.

Extracts bounding box coordinates, dimensions, and layout properties (auto-layout, constraints) for frames and artboards in a Figma file. Implemented by parsing the node tree and extracting x, y, width, height properties along with layout metadata, enabling spatial analysis and layout-aware code generation.

Resolves image nodes and assets in Figma to their download URLs, enabling external tools to fetch design assets. Works by extracting image node IDs and calling Figma's image export endpoint to generate temporary signed URLs for asset retrieval.

Extracts text content, font families, sizes, weights, and line heights from text nodes in Figma designs. Implemented by traversing text nodes and parsing their style properties (fontSize, fontFamily, fontWeight, lineHeight, letterSpacing) into structured format, enabling typography-aware code generation and content extraction.

Extracts fill colors, gradients, and opacity values from design elements, normalizing them to standard color formats (hex, RGB, HSL). Works by parsing Figma's fill array and converting color values to multiple formats for compatibility with different code targets (CSS, Tailwind, design tokens).

Identifies component variants and their property combinations, mapping variant properties to their values. Implemented by parsing Figma's variant metadata (variant properties like 'size', 'state', 'color') and resolving variant instances to their property combinations, enabling variant-aware code generation.