How do I install Figma Context MCP AIR?

Copy the stdio config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.

Does Figma Context MCP AIR need an API key?

The publisher lists these environment variables: FIGMA_API_KEY.

What transport does Figma Context MCP AIR use?

Figma Context MCP AIR runs locally over stdio.

When was Figma Context MCP AIR last checked?

Last checked 2026-11-09. Figma MCP server for AI agents. 9 tools: design context, variables, screenshots, and FigJam.

Figma Context MCP AIR MCP server

Power your agent

Add this server

The publisher's own command. Not a PlugMCP endpoint.

Add to Cursor Add to VS Code Run on PlugMCP

Host a copy with our keys and logs.

Local command

npx -y [email protected]

Credentials from the publisher

FIGMA_API_KEY — Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

Claude Code has no install link for a local command. Copy the command below and run it in a terminal.

shClaude Code

1FIGMA_API_KEY=<secret> claude mcp add io.github.compassalessandrolorenz-figma-context-mcp-air -- npx -y figma-context-mcp-air@2.0.2

Run in a terminal.

jsonClaude Desktop

1{2  "mcpServers": {3    "io.github.compassalessandrolorenz-figma-context-mcp-air": {4      "command": "npx",5      "args": [6        "-y",7        "[email protected]"8      ],9      "env": {10        "FIGMA_API_KEY": "<secret>"11      }12    }13  }14}

claude_desktop_config.json

Local · npmPublisher installStep-by-step: add this in Claude

Remote URL or a command on your machine? How the two installs differ

Run on PlugMCP

Host a copy with our keys and logs.

A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.

Launch

Server facts

Local

Transport: stdio
Version: 2.0.2
API key

Tools

No tool list yet. Remote servers get one after the first health check.

FAQ

Questions

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:

Tool	Description
`get_figma_data`	Full design data — layout, text, visuals, components (YAML/JSON)
`get_design_context`	Alias for `get_figma_data` matching the official Figma MCP tool naming
`download_figma_images`	Download PNG/SVG assets from Figma nodes to your local filesystem
`get_screenshot`	Capture a Figma node as a base64 PNG for visual inspection by the AI
`get_metadata`	Sparse XML layer hierarchy for quick node discovery before full extraction
`get_variable_defs`	All design tokens — colors, typography, spacing, effects, and styles
`whoami`	Verify your Figma authentication and check your plan tier
`create_design_system_rules`	Generate framework-specific design system documentation for your project
`get_figjam`	Extract FigJam board content (sticky notes, connectors, shapes) as XML

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

Open your AI coding tool's chat (e.g. agent mode in Cursor).
Paste a link to a Figma file, frame, or component.
Ask the AI to implement the design.
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

CLI Flag	Environment Variable	Default	Description
`--figma-api-key`	`FIGMA_API_KEY`	(required)	Your Figma Personal Access Token
`--figma-oauth-token`	`FIGMA_OAUTH_TOKEN`	—	OAuth Bearer token (alternative to PAT)
`--port`	`PORT`	`3333`	HTTP server port (HTTP mode only)
`--json`	`OUTPUT_FORMAT=json`	YAML	Return JSON instead of YAML
`--skip-image-downloads`	`SKIP_IMAGE_DOWNLOADS`	false	Disable the `download_figma_images` tool
`--image-dir`	—	—	Custom directory for downloaded images
`--stdio`	`NODE_ENV=cli`	—	Run in stdio mode (required for MCP clients)

Tool Reference

`get_figma_data` / `get_design_context`

Fetches and simplifies Figma design data for a file or specific node. Returns layout (flexbox/grid), typography, colors, borders, effects, and component metadata in YAML or JSON.

Parameters:

fileKey (required) — The key from your Figma URL: figma.com/design/<fileKey>/...
nodeId (optional) — The node ID from the URL: ?node-id=<nodeId>. Use format 1234:5678.
depth (optional) — How many levels deep to traverse. Only use if explicitly needed.

`download_figma_images`

Downloads PNG or SVG renders of Figma nodes to your local filesystem.

Parameters:

fileKey (required)
nodes (required) — Array of { nodeId, fileName } objects
localPath (required) — Directory to save images
pngScale (optional) — Scale factor for PNG exports (default: 1)
svgOptions (optional) — SVG export options (outline text, include IDs, simplify strokes)

`get_screenshot`

Captures a Figma node as a 2x PNG and saves it to disk. Useful for visual validation.

Parameters:

fileKey (required)
nodeId (required)
localPath (optional) — Save directory (default: ./screenshots)
fileName (optional) — Output filename without extension

`get_metadata`

Returns a sparse XML representation of the node hierarchy (depth=2). Use this for quick layer discovery before fetching full design context.

Parameters:

fileKey (required)
nodeId (required)

`get_variable_defs`

Fetches all design tokens from a Figma file — variable collections (colors, spacing, typography) and published styles (effects, text styles, fill styles). Returns data with CSS custom property syntax.

Parameters:

fileKey (required)

`whoami`

Returns the authenticated user's Figma account information (name, email, plan tier). Useful for verifying your API key is working.

Parameters: None

`create_design_system_rules`

Generates a comprehensive markdown template for project-specific design system rules. Tailored to your language and framework combination. Save the output to CLAUDE.md or your project's AI instructions file.

Parameters:

clientLanguages (required) — e.g. "typescript,javascript"
clientFrameworks (required) — "react", "vue", "svelte", "angular", or "unknown"

`get_figjam`

Extracts content from a FigJam board — sticky notes, connectors, shapes, sections — as XML with screenshot URLs.

Parameters:

fileKey (required)
nodeId (optional) — Specific section or frame within the FigJam board

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Development mode (HTTP, with watch)
pnpm dev

# Development mode (stdio)
pnpm dev:cli

# Run tests
pnpm test

# Type check
pnpm type-check

# Lint
pnpm lint

Contributing

Contributions are welcome! Please read CONTRIBUTING.md before submitting a pull request.

For major features, open an issue first to discuss the approach.

License

MIT — see LICENSE

Acknowledgements

This project is a fork of GLips/Figma-Context-MCP (the Framelink MCP server), extended with additional tools to match the full official Figma MCP tool surface.

Add this server

Host a copy with our keys and logs.

Server facts

Tools

Questions

How do I install Figma Context MCP AIR?

Does Figma Context MCP AIR need an API key?

What transport does Figma Context MCP AIR use?

When was Figma Context MCP AIR last checked?

Documentation

Figma Context MCP AIR

What is this?

Getting Started

MacOS / Linux

Windows

Using Environment Variables

How it works

Configuration Options

Tool Reference

get_figma_data / get_design_context

download_figma_images

get_screenshot

get_metadata

get_variable_defs

whoami

create_design_system_rules

get_figjam

Development

Contributing

License

Acknowledgements

`get_figma_data` / `get_design_context`

`download_figma_images`

`get_screenshot`

`get_metadata`

`get_variable_defs`

`whoami`

`create_design_system_rules`

`get_figjam`