Figma MCP Server

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.

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.

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”)

Get variable definitions for design tokens from Figma components.

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

Get mapping between Figma components and codebase components.

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

Generate high-quality images from Figma nodes.

Features:

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

Generate comprehensive design system documentation and rules.

Output:

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

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

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

Extract design variables from the design system component

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

Export the hero section as a PNG image

Most Figma MCP operations require a nodeId parameter:

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

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

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

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

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

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

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

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

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

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

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

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

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/.

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.

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.

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

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