# Figma-Context-MCP-AIR [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/compassalessandrolorenz/Figma-Context-MCP-AIR  
**GitHub Stars:** 1  
**npm Downloads (last month):** 135  
**Views:** 7  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/figma-context-mcp-air

## Description
Figma MCP server for AI agents. 9 tools: design context, variables, screenshots, and FigJam.

## Tools
Capabilities this server exposes over MCP:

- **download_figma_images** — Downloads PNG or SVG renders of Figma nodes to your local filesystem.
- **get_screenshot** — Captures a Figma node as a 2x PNG and saves it to disk. Useful for visual validation.
- **get_metadata** — Returns a sparse XML representation of the node hierarchy (depth=2). Use this for quick layer discovery before fetching full design context.
- **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.
- **whoami** — Returns the authenticated user's Figma account information (name, email, plan tier). Useful for verifying your API key is working.
- **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.
- **get_figjam** — Extracts content from a FigJam board — sticky notes, connectors, shapes, sections — as XML with screenshot URLs.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "figma-context-mcp-air": {
    "command": "npx",
    "args": ["-y","figma-context-mcp-air"],
    "env": {
      "FIGMA_API_KEY": "",
      "FIGMA_OAUTH_TOKEN": "",
      "PORT": "",
      "OUTPUT_FORMAT": "",
      "SKIP_IMAGE_DOWNLOADS": "",
      "NODE_ENV": ""
    }
  }
}
```

**Requires environment variables:** `FIGMA_API_KEY`, `FIGMA_OAUTH_TOKEN`, `PORT`, `OUTPUT_FORMAT`, `SKIP_IMAGE_DOWNLOADS`, `NODE_ENV` — the values above are empty placeholders; fill in real credentials before running (see the repository for what each one is for).

## Documentation

## 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.

_Full upstream README: https://allmcps.com/mcp/figma-context-mcp-air/readme_