Figma: Design-to-Code with MCP Integration

The Figma skill from OpenAI enables AI assistants to fetch design context, screenshots, variables, and assets from Figma files and translate them into production code. Through Figma MCP server integration, this skill provides structured workflows for implementing designs with 1:1 visual fidelity while maintaining project conventions and design system consistency.

What This Skill Does

This skill provides comprehensive Figma integration through Model Context Protocol (MCP) server connectivity. It fetches structured design representations with layout properties, typography specifications, color values, component structures, and spacing details. It captures visual references via screenshots for validation. It downloads assets (images, icons, SVGs) served through the MCP endpoint. And it translates all of this into production code respecting project frameworks, component libraries, and styling approaches.

The workflow enforces discipline preventing common pitfalls. Rather than implementing based on assumptions or partial understanding, the skill mandates: fetch design context first to get structured data, capture screenshots for visual ground truth, download required assets from MCP endpoints, only then implement using project conventions, and finally validate against Figma for 1:1 fidelity. Each step builds on previous outputs, ensuring implementations match designs accurately.

Translation to production code respects project specifics. The Figma MCP typically outputs React with Tailwind utilities, but this serves as a design representation, not final code. The skill replaces Tailwind classes with project design system tokens, reuses existing components instead of duplicating functionality, applies project color systems and typography scales, and respects established routing and state management patterns.

Getting Started

The skill requires Figma MCP server connection. Setup involves adding the Figma MCP (codex mcp add figma --url https://mcp.figma.com/mcp), enabling remote MCP client in configuration, and logging in via OAuth (codex mcp login figma). After successful login, restart is required to activate the connection.

Two MCP server options exist: the remote server at mcp.figma.com requires Figma URLs with file keys and node IDs, while the local figma-desktop server works with currently selected nodes in the Figma desktop app without requiring URLs. The local option enables selection-based prompting where users select nodes in Figma and reference them without copying links.

Figma URLs follow a specific format: https://figma.com/design/:fileKey/:fileName?node-id=1-2. The file key is the segment after /design/, and the node ID comes from the node-id query parameter. Extracting these components enables passing them as arguments to MCP tools.

Key Features

Structured Design Context: The get_design_context tool fetches comprehensive design data including Auto Layout properties, constraints and sizing, typography specifications with exact font/size/weight values, color values and design tokens, component structure and variants, and precise spacing and padding values. This structured data enables accurate implementation without guessing.

Visual Validation: The get_screenshot tool captures exact visual appearance of nodes, serving as ground truth for validation. Implementations are compared against these screenshots to ensure pixel-perfect fidelity before completion.

Metadata Navigation: For complex designs, get_metadata provides high-level node maps. When design context responses are too large or truncated, metadata reveals child node structures enabling targeted fetching of specific components.

Asset Management: The Figma MCP server's assets endpoint serves images and SVGs directly via localhost URLs. When the server returns localhost sources, the skill uses them directly without importing icon packages or creating placeholders.

Project Convention Translation: Rather than blindly using MCP output code, the skill translates to project specifics—replacing utility classes with design tokens, reusing existing components, applying project typography and color systems, and respecting established patterns. This maintains codebase consistency while achieving design fidelity.

Usage Examples

When implementing a button component from Figma, the skill parses the URL to extract file key and node ID, fetches design context revealing padding, border radius, typography, color values, captures a screenshot for visual reference, checks whether the project has existing button components, extends the existing component with a new variant if available or creates a new component following project conventions, maps Figma colors to project design tokens, then validates against the screenshot ensuring exact padding, sizing, and typography match.

For building complex dashboard layouts, the skill fetches metadata first to understand overall structure (header, sidebar, content area, card components), identifies child node IDs for each major section, fetches design context for sections individually, captures a full-page screenshot, downloads all required assets (logos, icons, chart images), implements layout using project layout primitives, reuses existing card and list components, then validates responsive behavior against Figma constraints.

When handling large component libraries, the skill avoids truncated responses by fetching metadata for the library root, identifying specific components from the metadata tree, fetching individual component contexts one by one, capturing component variant screenshots for each state (default, hover, active, disabled), implementing variants extending the project component library, and batch-validating all variants against their respective screenshots.

Best Practices

Always fetch design context and screenshots before implementing. Never work from assumptions or partial information. The structured data and visual references are essential for accurate implementation.

Use metadata when responses are large or complex. Don't try to fetch entire design systems in one call—get the metadata tree first, identify what you need, then fetch specific nodes.

Respect project conventions over literal Figma translation. The Figma MCP output (typically React + Tailwind) represents design intent, not final code style. Translate to match your project's patterns, component library, and design tokens.

Validate implementations against screenshots, not just your interpretation of design data. Visual comparison catches subtle spacing, alignment, or color issues that structured data alone might miss.

Use localhost asset URLs directly when the Figma MCP provides them. Don't import new icon packages or create placeholders—assets are served through the MCP endpoint for a reason.

When to Use This Skill

Use this skill when implementing designs from Figma files where visual fidelity matters. UI component creation, page layouts, design system implementations, and mockup-to-code translation all benefit from the structured workflow and MCP integration.

The skill is particularly valuable when working with design systems or component libraries. The ability to fetch component metadata, variants, and design tokens enables systematic implementation maintaining consistency across large codebases.

It's ideal for teams using Figma as the design source of truth. The direct MCP integration eliminates manual translation steps and reduces errors from miscommunication between designers and developers.

When NOT to Use This Skill

Don't use this skill when designs aren't in Figma. It's specifically for Figma-to-code workflows via MCP integration. For designs in other tools, use appropriate integration methods.

Avoid using it when Figma files are inaccessible or MCP connection isn't established. Without server connectivity, the skill can't fetch design data or assets.

It's not appropriate for purely visual design work without implementation. The skill translates designs to code—if you're working on the design itself in Figma, this skill isn't relevant.

Don't expect it to make design decisions. The skill implements what Figma specifies but doesn't determine whether designs are good, user-friendly, or meet requirements.

Related Skills

This skill complements figma-implement-design for structured implementation workflows, frontend-design for web interface development, and web-artifacts-builder for creating web components.

Source

This skill is maintained by OpenAI. View on GitHub