Log inSubmit server

Hidden while we check this listing

Our automated checks found a problem, so this listing is out of search, browse and the API until it clears. It comes back on its own once the problem is fixed.

  • Fork with no traction of its own
Own this project? Claim it
Figma Context MCP AIR logo

Figma Context MCP AIR

Connects AI coding tools to structured Figma and FigJam data for design-to-code work.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Figma Context MCP AIR

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "figma-context-mcp-air": {
      "command": "npx",
      "args": [
        "-y",
        "figma-context-mcp-air"
      ],
      "env": {
        "FIGMA_API_KEY": "YOUR_VALUE_HERE",
        "FIGMA_OAUTH_TOKEN": "YOUR_VALUE_HERE",
        "PORT": "YOUR_VALUE_HERE",
        "OUTPUT_FORMAT": "YOUR_VALUE_HERE",
        "SKIP_IMAGE_DOWNLOADS": "YOUR_VALUE_HERE",
        "NODE_ENV": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y figma-context-mcp-air

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 10d ago.

Overview

Figma-Context-MCP-AIR MCP server connects AI coding clients to Figma files, nodes, variables, images, screenshots, and FigJam boards through MCP tools. It accepts a Figma Personal Access Token or OAuth token, then simplifies design API responses into YAML, JSON, or XML for agent use. Use it when an agent needs to inspect a design, extract tokens, download assets, or validate an implementation visually. Its stdio mode is configured through MCP client settings such as Cursor, Claude Desktop, and Windsurf.

Use cases

  • Inspect a Figma frame before implementing it in code
  • Extract design tokens and map them to CSS variables
  • Download Figma assets for a local project
  • Compare an implementation with a 2x node screenshot
  • Read FigJam boards during product or design work

Key features

  • Structured Figma design context in YAML or JSON
  • Figma variable and published-style extraction
  • PNG and SVG asset downloads
  • 2x node screenshots for visual validation
  • FigJam content extraction as XML
  • Framework-specific design-system rule generation

Tools7

What Figma Context MCP AIR lets your agent do. Expand a tool for its parameters.

Self-reported~263 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

4/4 checks healthy over the last 30d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2h ago via OSV.dev · figma-context-mcp-air (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars1Stargazers on the source repository.
npm downloads135Package downloads in the last 30 days.
Last commit6mo agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Tools exposed7Callable tools this server registers over MCP.
Directory activity7 viewsConfig copies, upvotes, and views on AllMCPs.

How Figma Context MCP AIR works

What Figma-Context-MCP-AIR MCP server does

Figma-Context-MCP-AIR MCP server exposes Figma design information to AI coding tools through the Model Context Protocol. It supports a design-to-code workflow by returning structured information about layouts, typography, colors, borders, effects, components, and other styling details. Responses are filtered and simplified from the Figma API rather than returning the complete raw response.

The package includes nine tools. get_figma_data and its get_design_context alias retrieve full design information for a file or node. Other tools export images, capture screenshots, inspect a shallow layer tree, retrieve design tokens, verify authentication, generate project rules, and read FigJam content.

How it works

Configure the package as an MCP server in an AI coding client, then provide a link or identifiers from a Figma file, frame, component, or FigJam board. The agent can use the file key and, where applicable, a node ID to request the relevant content. get_metadata can provide a depth-two XML hierarchy for locating layers before a larger extraction with get_design_context or get_figma_data.

Design tokens come from both variable collections and published styles. get_variable_defs returns colors, spacing, typography, effects, text styles, and fill styles using CSS custom-property syntax. For visual checks, get_screenshot captures a node as a 2x PNG, while download_figma_images exports selected nodes as PNG or SVG files.

Setup and configuration

Figma-Context-MCP-AIR MCP server requires a Figma Personal Access Token unless an OAuth bearer token is supplied instead. The package can be launched with npx and the --stdio option, which is the mode required for MCP clients. The token can be passed with --figma-api-key or set as FIGMA_API_KEY in the client environment.

The server also supports FIGMA_OAUTH_TOKEN as an alternative authentication value, PORT for HTTP mode, OUTPUT_FORMAT to select JSON instead of the default YAML, and SKIP_IMAGE_DOWNLOADS to disable image downloads. NODE_ENV=cli corresponds to CLI or stdio operation. Downloaded images can be directed to a custom location with the --image-dir command-line option.

A typical stdio configuration runs npx -y figma-context-mcp-air --stdio and provides the API key in the client’s env block. Windows configurations use cmd /c before the npx command.

Tools and capabilities

  • Retrieve complete Figma design context or use the compatible get_design_context name.
  • Discover a node’s shallow hierarchy with sparse XML metadata.
  • Export selected nodes as PNG or SVG files and capture 2x PNG screenshots.
  • Extract Figma variables and published styles as CSS-oriented design tokens.
  • Check the authenticated Figma user, email, and plan tier with whoami.
  • Generate a Markdown design-system rules template for TypeScript, JavaScript, React, Vue, Svelte, Angular, or an unknown framework choice.
  • Extract FigJam sticky notes, connectors, shapes, sections, and screenshot URLs as XML.

The design-system rules output can be saved to CLAUDE.md or another project-specific AI instruction file. Image and screenshot tools accept local output paths, while design context can be returned as YAML or JSON.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Figma Context MCP AIR

Figma-Context-MCP-AIR is an MCP server that connects AI coding tools to Figma files and FigJam boards. Its main tools retrieve design context, metadata, variables, screenshots, images, and FigJam content, while also checking authentication and generating project-specific design-system rules.

Install it through an MCP client configuration using `npx -y figma-context-mcp-air --stdio`. Supply a Figma Personal Access Token with `--figma-api-key` or set `FIGMA_API_KEY` in the configuration environment.

Yes, Figma-Context-MCP-AIR works with Cursor through its stdio MCP configuration. Add the package command to a Cursor MCP configuration file, such as `~/.cursor/mcp.json`, and provide the Figma token.

Call `get_variable_defs` with the Figma file key. The tool returns variable collections and published styles, including colors, spacing, typography, effects, text styles, and fill styles in CSS custom-property syntax.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFigma Context MCP AIR AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/figma-context-mcp-air?style=directory)](https://allmcps.com/mcp/figma-context-mcp-air)
HTML Embed
<a href="https://allmcps.com/mcp/figma-context-mcp-air"><img src="https://allmcps.com/api/badge/figma-context-mcp-air?style=directory" alt="Figma Context MCP AIR on AllMCPs" /></a>