Figma MCP

Overview

Figma MCP provides access to Figma designs, enabling AI agents to read design files, extract component information, and analyze design systems. Perfect for design-to-code workflows, design audits, and maintaining design consistency.

Features

• File Access: Read Figma design files and frames
• Component Analysis: Extract component definitions and variants
• Style Extraction: Get colors, typography, and effects from design files
• Layer Inspection: Explore the layer hierarchy of designs
• Asset Export: Get exportable assets from designs
• Design Token Extraction: Convert Figma styles to code-ready tokens

Installation

npx -y @modelcontextprotocol/server-figma

Configuration

Add to your Claude Desktop config:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-access-token"
      }
    }
  }
}

Getting API Credentials

1. Go to Figma Settings > Personal Access Tokens
2. Generate a new token
3. Copy the token to your configuration

Available Tools

Tool	Description
get_file	Get a Figma file by file key
get_file_nodes	Get specific nodes from a file
get_components	Get all components from a file
get_team_libraries	Get design libraries for a team
get_image	Get an exportable image of a node

Usage Examples

Get a Design File

Get file with key "abc123" (from Figma URL)

Get specific frame "Header" from file

Extract Components

Get all components from file "Design System"

Get component "Button" with all variants

Extract Design Tokens

Extract all colors from "Design System" file

Extract typography styles from "Design System" file

Get Node Image

Get exportable image of frame "Landing Page Hero"

Claude Desktop Setup

1. Install the MCP server
2. Add configuration to claude_desktop_config.json
3. Restart Claude Desktop
4. The Figma tool will appear in your available tools

Use Cases

• Design-to-Code: Generate code from Figma designs
• Design Audits: Check designs for consistency and accessibility
• Token Sync: Extract design tokens for code implementation
• Component Documentation: Generate documentation from component libraries
• Accessibility Checks: Analyze color contrast and text sizes

Pros

• ✅ Direct access to Figma designs
• ✅ Component and variant extraction
• ✅ Design token extraction
• ✅ Great for design-to-code workflows
• ✅ No Figma paid plan required for API access

Cons

• ❌ Read-only access (cannot create or modify designs)
• ❌ Requires Figma access token
• ❌ Large files may have rate limits
• ❌ Some advanced features require Figma Organization plan

Resources

• Figma API Documentation
• Personal Access Tokens
• MCP Server Source