Figma MCP Server

Design Integration Code Generation

The Figma MCP server enables direct integration between Figma design files and your development workflow through Claude Code. It provides automated code generation, design token extraction, and seamless design-to-development handoffs.

Overview

This MCP server allows Claude to interact directly with Figma designs, extracting components, design tokens, and assets to generate production-ready code that matches your project’s architecture and conventions.

Core Capabilities

🎨 Code Generation

Generate production-ready UI code from Figma components for React, Astro, and other frameworks.

🎯 Design Tokens

Extract design variables (colors, typography, spacing) and convert to CSS custom properties.

🔗 Code Connect

Link Figma components to existing codebase components for bidirectional synchronization.

📸 Asset Export

Export high-quality images from Figma nodes in multiple formats optimized for web.

📋 Design System

Generate design system rules and comprehensive documentation automatically.

Available Functions

mcp__figma-dev-mode-mcp-server__get_code

Generate UI code for a given Figma node or the currently selected node.

Parameters:

• nodeId (optional): The ID of the node (e.g., “123:456”). If not provided, uses currently selected node.
• clientFrameworks: Comma-separated list of frameworks (e.g., “react,astro,typescript”)
• clientLanguages: Programming languages used (e.g., “javascript,typescript,scss”)

mcp__figma-dev-mode-mcp-server__get_variable_defs

Get variable definitions for design tokens from Figma components.

Returns: Object with variable mappings like {'icon/default/secondary': '#949494'}

mcp__figma-dev-mode-mcp-server__get_code_connect_map

Get mapping between Figma components and codebase components.

Returns: Object mapping node IDs to code locations and component names.

mcp__figma-dev-mode-mcp-server__get_image

Generate high-quality images from Figma nodes.

Features:

• Multiple format support (PNG, JPG, SVG)
• High-resolution exports
• Web-optimized output

mcp__figma-dev-mode-mcp-server__create_design_system_rules

Generate comprehensive design system documentation and rules.

Output:

• Design token documentation
• Component usage guidelines
• Framework-specific implementations

Quick Start

Prerequisites

1. Figma Desktop Application installed and running
2. Active Figma Project with design components
3. Proper File Permissions (owner or editor access)

Install the MCP Server and Connect to Figma Desktop

Install the Figma MCP server and connect it to your local Figma Desktop instance:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

For more Figma installation options and configuration details, see the

• Local Figma Local MCP Setup Guide.
• Remote Figma Remote MCP Setup Guide.

Basic Usage

Component Code Generation

Generate React code for the button component with node ID 123:456

Claude will:

• Extract the Figma component structure
• Generate appropriate React/Astro code
• Include proper styling and TypeScript types
• Follow your project’s conventions

Design Token Extraction

Extract design variables from the design system component

Returns variables like:

{
  'color/primary': '#007AFF',
  'spacing/base': '16px',
  'typography/heading/size': '24px'
}

Asset Export

Export the hero section as a PNG image

Generates optimized images for:

• Web use cases
• Multiple resolutions
• Various formats

Working with Node IDs

Most Figma MCP operations require a nodeId parameter:

From Figma URLs

https://figma.com/design/fileKey/fileName?node-id=1-2

The nodeId would be 1:2 (replace hyphens with colons)

From Selected Components

If you don’t provide a nodeId, the server uses the currently selected node in Figma Desktop.

Integration with Astro-Basics

Project-Specific Workflows

Astro Components

Generate an Astro component for this design, using our existing SCSS architecture

Output Location: src/components/astro/ Styling: Integrates with src/styles/ architecture

React Components

Create a React component for client-side interactivity, following our src/components/react/ patterns

Output Location: src/components/react/ Features: Interactive elements with proper TypeScript

SCSS Variables

Extract design tokens and create SCSS variables that integrate with our src/styles/index.scss

Integration: Maps to existing variable system Output: Compatible with current SCSS architecture

Common Workflows

Design-to-Code Pipeline

1. Select Component in Figma

   • Open design file in Figma Desktop
   • Select the component to implement

2. Generate Code

   I need to implement the pricing card component from our design system

3. Extract Variables

   Also extract the design variables used in this component

4. Test Integration

   npm run build          # Test build process
   npm test               # Run unit tests
   npm run lint:all       # Code quality checks

Design System Maintenance

1. Audit Tokens

   Extract all design variables from our main design system file

2. Update Code Variables

   • Compare with existing CSS/SCSS variables
   • Update inconsistencies
   • Add new tokens as needed

3. Generate Documentation

   Create design system rules for the updated tokens

Best Practices

Figma Organization

• Use consistent, descriptive component names
• Leverage Auto Layout for responsive behavior
• Set up proper design variables
• Maintain clean component hierarchy

Code Generation

• Specify framework context explicitly
• Mention existing styling systems (SCSS, Tailwind, etc.)
• Reference component patterns in your codebase
• Always review and adapt generated code

Design Token Management

• Establish semantic token naming
• Create consistent scales
• Sync regularly when designs change
• Version control design tokens

Troubleshooting

Common Issues

Node ID Not Found

• Verify the node exists and you have access permissions
• Ensure Figma file is open in desktop app

No Component Selected

• Select a component in Figma Desktop before running commands
• Alternatively, provide explicit node ID

Permission Errors

• Ensure proper Figma file permissions
• Verify you can edit or view the file in Figma

Code Generation Issues

• Provide specific framework and context information
• Mention existing patterns in your codebase

Example Usage

Multi-Component Generation

Generate React components for all button variants in our design system.
Include TypeScript interfaces and integrate with our existing SCSS architecture.
Use the component patterns from src/components/react/ and create corresponding
SCSS files in src/styles/components/.

Design Token Sync

Extract design tokens from our main design system file and update our
SCSS variables in src/styles/index.scss. Show me what tokens are new,
changed, or removed compared to the current implementation.

Asset Pipeline

Export all icon components as SVG assets and create an icon library
component that follows our existing component patterns. Include proper
TypeScript types and documentation.

Resources

• Figma API Documentation - Official API reference
• Design Tokens Community - Token standards and best practices
• MCP Protocol Specification - MCP technical documentation

Next Steps

1. MCP Setup Guide - Install and configure MCP servers
2. MCP Overview - Explore all available MCP servers
3. Usage Examples - Real-world scenarios and code samples
4. Troubleshooting - Common issues and solutions