Figma Context MCP AIR

Give your AI coding agent access to Figma design data.
Implement designs in any framework with pixel-perfect accuracy — in one shot.

What is this?

figma-context-mcp-air is a Model Context Protocol (MCP) server that gives AI coding tools (Cursor, Claude, Windsurf, etc.) direct access to your Figma design data.

It exposes 9 tools covering the full design-to-code workflow:

Before returning data to the AI, the server simplifies and filters the raw Figma API response — keeping only the layout and styling information that matters for code generation. This reduces noise and dramatically improves AI accuracy.

Getting Started

You need a Figma Personal Access Token to use this server.
How to create a Figma API access token →

MacOS / Linux

Add this to your MCP client configuration file (e.g. ~/.cursor/mcp.json, claude_desktop_config.json):

{
  "mcpServers": {
    "Figma MCP AIR": {
      "command": "npx",
      "args": ["-y", "figma-context-mcp-air", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma MCP AIR": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-context-mcp-air", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Using Environment Variables

You can also set FIGMA_API_KEY in the env field instead of passing it as a flag:

{
  "mcpServers": {
    "Figma MCP AIR": {
      "command": "npx",
      "args": ["-y", "figma-context-mcp-air", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "YOUR-KEY"
      }
    }
  }
}

How it works

1. Open your AI coding tool's chat (e.g. agent mode in Cursor).
2. Paste a link to a Figma file, frame, or component.
3. Ask the AI to implement the design.
4. The AI calls get_design_context (or get_figma_data) to fetch structured design data, then writes your code.

For more advanced workflows, the AI can:

• Call get_screenshot to visually inspect a node before implementing it
• Call get_variable_defs to extract your design tokens and map them to CSS variables
• Call get_metadata for a quick layer overview before fetching full data
• Call create_design_system_rules to generate project-specific coding guidelines

Configuration Options

... View full README on GitHub