# Figma-Context-MCP [Health: Active]

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

## Description
MCP server to extract Figma design information and convert it to mostly css for coding agents.

## Tools
Capabilities this server exposes over MCP:

- **get_figma_design** — Fetches CSS-aligned, LLM-optimized design data. Supports SVG export to custom dir.
- **get_image_fills** — Retrieves image fill URLs from a Figma file
- **render_node_images** — Renders Figma nodes as PNG images
- **read_vector_svg** — Reads vector node data as SVG

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

```json
"mcpServers": {
  "figma-context-mcp": {
    "command": "npx",
    "args": ["-y","@tmegit/figma-to-code-mcp"],
    "env": {
      "FIGMA_API_KEY": ""
    }
  }
}
```

**Requires environment variables:** `FIGMA_API_KEY` — 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 does

Figma-Context-MCP MCP server retrieves design information from Figma and reformats it for AI-assisted UI implementation. The main design fetch returns inline styles, layout properties, typography, colors, spacing, effects, text, and component information using names that correspond more closely to CSS. It removes Figma metadata that is not needed for code generation, such as bounding boxes, constraints, and prototype data.

The transformation also resolves Figma variables when enabled, represents layout with flexbox-oriented primitives, and collapses repeated patterns. The resulting payload is intended to preserve UI-building information while being substantially smaller than the source response. SVG assets can be written to a configured directory.

## How it works

An agent client starts the server through MCP, then sends a Figma file, frame, or group link as part of a design implementation request. The server calls the Figma API for the requested nodes and related styles. Depending on configuration, it also reads local variables and resolves components from library files. The processed result is returned in YAML by default, or JSON when that output mode is selected.

A single design fetch can make several Figma API requests. Library components and variables can therefore affect request volume and rate-limit usage. Library variable files may be prefetched and cached to reduce repeated work during later design fetches.

## Setup and configuration

Node.js 18 or newer is required. A typical stdio setup runs the published package with `npx` and supplies a Figma personal access token through `--figma-api-key` or `FIGMA_API_KEY`. CLI options take precedence over environment variables. The server listens on port `3333` and host `127.0.0.1` by default when using its HTTP-related settings.

Supported environment variables include `FIGMA_API_KEY`, `FIGMA_OAUTH_TOKEN`, `FIGMA_TO_CODE_MCP_PORT`, `PORT`, `FIGMA_TO_CODE_MCP_HOST`, `OUTPUT_FORMAT`, `SKIP_IMAGE_DOWNLOADS`, and `FIGMA_SVG_OUTPUT_DIR`. Library prefetch and caching can be configured with `FIGMA_LIBRARY_VARIABLE_PREFETCH_FILE_KEYS`, `FIGMA_MCP_CACHE_PATH`, `FIGMA_MCP_CACHE_TTL_MS`, and `FIGMA_MCP_REFRESH_CACHE`.

The token needs `file_content:read` and `library_content:read` for the corresponding data. `file_variables:read` is optional and applies to variable access on Enterprise plans.

## Tools and capabilities

- `get_figma_design` fetches CSS-aligned, LLM-oriented design data and can export SVGs to a selected directory.
- `get_image_fills` returns image-fill URLs from a Figma file.
- `render_node_images` renders selected Figma nodes as PNG images.
- `read_vector_svg` reads vector node data as SVG.

Use Figma-Context-MCP MCP server when an agent needs structured design properties together with image or vector assets. The tools cover both data extraction for code generation and visual references for the implementation process.

## Limitations and notes

Variable resolution requires a Figma Enterprise plan; set `resolveVariables` to `false` when that access is unavailable. The design-fetch operation can consume multiple API requests, especially when library files are involved.

The library cache is used only when library file keys are configured. Its path may identify a file or directory, and the refresh flag forces a startup refetch. SVG output defaults to a temporary directory unless another location is provided.

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