{
  "markdown": "# Figma Context MCP AIR\n\n**Give your AI coding agent access to Figma design data.**  \nImplement designs in any framework with pixel-perfect accuracy — in one shot.\n\n[![npm version](https://img.shields.io/npm/v/figma-context-mcp-air.svg)](https://www.npmjs.com/package/figma-context-mcp-air)\n[![npm downloads](https://img.shields.io/npm/dm/figma-context-mcp-air.svg)](https://npmcharts.com/compare/figma-context-mcp-air?interval=30)\n[![MIT License](https://img.shields.io/github/license/compassalessandrolorenz/Figma-Context-MCP-AIR)](https://github.com/compassalessandrolorenz/Figma-Context-MCP-AIR/blob/main/LICENSE)\n\n---\n\n## What is this?\n\n`figma-context-mcp-air` is a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that gives AI coding tools (Cursor, Claude, Windsurf, etc.) direct access to your Figma design data.\n\nIt exposes **9 tools** covering the full design-to-code workflow:\n\n| Tool | Description |\n|---|---|\n| `get_figma_data` | Full design data — layout, text, visuals, components (YAML/JSON) |\n| `get_design_context` | Alias for `get_figma_data` matching the official Figma MCP tool naming |\n| `download_figma_images` | Download PNG/SVG assets from Figma nodes to your local filesystem |\n| `get_screenshot` | Capture a Figma node as a base64 PNG for visual inspection by the AI |\n| `get_metadata` | Sparse XML layer hierarchy for quick node discovery before full extraction |\n| `get_variable_defs` | All design tokens — colors, typography, spacing, effects, and styles |\n| `whoami` | Verify your Figma authentication and check your plan tier |\n| `create_design_system_rules` | Generate framework-specific design system documentation for your project |\n| `get_figjam` | Extract FigJam board content (sticky notes, connectors, shapes) as XML |\n\nBefore 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.\n\n---\n\n## Getting Started\n\nYou need a **Figma Personal Access Token** to use this server.  \n[How to create a Figma API access token →](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)\n\n### MacOS / Linux\n\nAdd this to your MCP client configuration file (e.g. `~/.cursor/mcp.json`, `claude_desktop_config.json`):\n\n```json\n{\n  \"mcpServers\": {\n    \"Figma MCP AIR\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"figma-context-mcp-air\", \"--figma-api-key=YOUR-KEY\", \"--stdio\"]\n    }\n  }\n}\n```\n\n### Windows\n\n```json\n{\n  \"mcpServers\": {\n    \"Figma MCP AIR\": {\n      \"command\": \"cmd\",\n      \"args\": [\"/c\", \"npx\", \"-y\", \"figma-context-mcp-air\", \"--figma-api-key=YOUR-KEY\", \"--stdio\"]\n    }\n  }\n}\n```\n\n### Using Environment Variables\n\nYou can also set `FIGMA_API_KEY` in the `env` field instead of passing it as a flag:\n\n```json\n{\n  \"mcpServers\": {\n    \"Figma MCP AIR\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"figma-context-mcp-air\", \"--stdio\"],\n      \"env\": {\n        \"FIGMA_API_KEY\": \"YOUR-KEY\"\n      }\n    }\n  }\n}\n```\n\n---\n\n## How it works\n\n1. Open your AI coding tool's chat (e.g. agent mode in Cursor).\n2. Paste a link to a Figma file, frame, or component.\n3. Ask the AI to implement the design.\n4. The AI calls `get_design_context` (or `get_figma_data`) to fetch structured design data, then writes your code.\n\nFor more advanced workflows, the AI can:\n- Call `get_screenshot` to visually inspect a node before implementing it\n- Call `get_variable_defs` to extract your design tokens and map them to CSS variables\n- Call `get_metadata` for a quick layer overview before fetching full data\n- Call `create_design_system_rules` to generate project-specific coding guidelines\n\n---\n\n## Configuration Options\n\n| CLI Flag | Environment Variable | Default | Description |\n|---|---|---|---|\n| `--figma-api-key` | `FIGMA_API_KEY` | _(required)_ | Your Figma Personal Access Token |\n| `--figma-oauth-token` | `FIGMA_OAUTH_TOKEN` | — | OAuth Bearer token (alternative to PAT) |\n| `--port` | `PORT` | `3333` | HTTP server port (HTTP mode only) |\n| `--json` | `OUTPUT_FORMAT=json` | YAML | Return JSON instead of YAML |\n| `--skip-image-downloads` | `SKIP_IMAGE_DOWNLOADS` | false | Disable the `download_figma_images` tool |\n| `--image-dir` | — | — | Custom directory for downloaded images |\n| `--stdio` | `NODE_ENV=cli` | — | Run in stdio mode (required for MCP clients) |\n\n---\n\n## Tool Reference\n\n### `get_figma_data` / `get_design_context`\n\nFetches 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.\n\n**Parameters:**\n- `fileKey` _(required)_ — The key from your Figma URL: `figma.com/design/<fileKey>/...`\n- `nodeId` _(optional)_ — The node ID from the URL: `?node-id=<nodeId>`. Use format `1234:5678`.\n- `depth` _(optional)_ — How many levels deep to traverse. Only use if explicitly needed.\n\n---\n\n### `download_figma_images`\n\nDownloads PNG or SVG renders of Figma nodes to your local filesystem.\n\n**Parameters:**\n- `fileKey` _(required)_\n- `nodes` _(required)_ — Array of `{ nodeId, fileName }` objects\n- `localPath` _(required)_ — Directory to save images\n- `pngScale` _(optional)_ — Scale factor for PNG exports (default: 1)\n- `svgOptions` _(optional)_ — SVG export options (outline text, include IDs, simplify strokes)\n\n---\n\n### `get_screenshot`\n\nCaptures a Figma node as a 2x PNG and saves it to disk. Useful for visual validation.\n\n**Parameters:**\n- `fileKey` _(required)_\n- `nodeId` _(required)_\n- `localPath` _(optional)_ — Save directory (default: `./screenshots`)\n- `fileName` _(optional)_ — Output filename without extension\n\n---\n\n### `get_metadata`\n\nReturns a sparse XML representation of the node hierarchy (depth=2). Use this for quick layer discovery before fetching full design context.\n\n**Parameters:**\n- `fileKey` _(required)_\n- `nodeId` _(required)_\n\n---\n\n### `get_variable_defs`\n\nFetches 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.\n\n**Parameters:**\n- `fileKey` _(required)_\n\n---\n\n### `whoami`\n\nReturns the authenticated user's Figma account information (name, email, plan tier). Useful for verifying your API key is working.\n\n**Parameters:** None\n\n---\n\n### `create_design_system_rules`\n\nGenerates 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.\n\n**Parameters:**\n- `clientLanguages` _(required)_ — e.g. `\"typescript,javascript\"`\n- `clientFrameworks` _(required)_ — `\"react\"`, `\"vue\"`, `\"svelte\"`, `\"angular\"`, or `\"unknown\"`\n\n---\n\n### `get_figjam`\n\nExtracts content from a FigJam board — sticky notes, connectors, shapes, sections — as XML with screenshot URLs.\n\n**Parameters:**\n- `fileKey` _(required)_\n- `nodeId` _(optional)_ — Specific section or frame within the FigJam board\n\n---\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Build\npnpm build\n\n# Development mode (HTTP, with watch)\npnpm dev\n\n# Development mode (stdio)\npnpm dev:cli\n\n# Run tests\npnpm test\n\n# Type check\npnpm type-check\n\n# Lint\npnpm lint\n```\n\n---\n\n## Contributing\n\nContributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) before submitting a pull request.\n\nFor major features, open an issue first to discuss the approach.\n\n---\n\n## License\n\nMIT — see [LICENSE](LICENSE)\n\n---\n\n## Acknowledgements\n\nThis project is a fork of [GLips/Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP) (the Framelink MCP server), extended with additional tools to match the full official Figma MCP tool surface.\n",
  "bytes": 7805,
  "sha": "43eff64d02671921befb029db4b987887349410125aa82d3d582247fde3b573e",
  "repo_slug": "compassalessandrolorenz/figma-context-mcp-air",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_compassalessandrolorenz_figma__aad0631f/readme"
}