Figma MCP Server

The Figma MCP server bridges the gap between design and code. It allows your AI to read Figma files, inspect node properties, and generate React Native components that match your design specs pixel-for-pixel.

Features

• Design Inspection: The AI can read specific values for colors, typography, spacing, and layout.
• Component Generation: Point the AI to a specific Figma Node ID and ask it to "Write the React Native code for this component."
• Asset Extraction: Identify and retrieve URLs for images and icons used in the design.

Installation & Configuration

Prerequisites

• Figma Account.
• Personal Access Token (Settings > Account > Personal Access Tokens).
• File Key (The string inside the Figma URL: figma.com/file/FILE_KEY/...).

Setup for Cursor

1. Open Cursor Settings > Features > MCP.
2. Click + Add New MCP Server.
3. Fill in the details:

4. Add Environment Variables:

Setup for Claude Code

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-personal-access-token",
        "FIGMA_FILE_KEY": "your-file-key"
      }
    }
  }
}

Usage Examples

1. Inspect Design:

"Inspect the node with ID 123:456. What is the primary color and font family used?"

2. Generate Code:

"Look at the 'Login Screen' frame (ID 10:11). Generate a React Native screen component that matches this layout using my project's UI library."

3. Extract Assets:

"List all the icon assets used in the 'Settings' frame."