Figma Context MCP AIR

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.

[npm version] [npm downloads] [MIT License]

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

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 dependenciespnpm install
# Buildpnpm build
# Development mode (HTTP, with watch)pnpm dev
# Development mode (stdio)pnpm dev:cli
# Run testspnpm test
# Type checkpnpm type-check
# Lintpnpm 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.