# GLips/Figma-Context-MCP [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/GLips/Figma-Context-MCP  
**GitHub Stars:** 15813  
**npm Downloads (last month):** 310084  
**Views:** 3  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/glips-figma-context-mcp

## Description
Provide coding agents direct access to Figma data to help them one-shot design implementation.

## Tools
Capabilities this server exposes over MCP:

- **get_figma_data** — Get comprehensive Figma file data including layout, content, visuals, and component information
- **download_figma_images** — Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes. Images will be saved relative to the server's image directory: /home/user

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

```json
"mcpServers": {
  "figma-context-mcp": {
    "command": "npx",
    "args": ["-y","figma-developer-mcp","--figma-api-key=YOUR-KEY","--stdio"],
    "env": {
      "FIGMA_API_KEY": "",
      "PORT": ""
    }
  }
}
```

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

## Documentation

## What GLips/Figma-Context-MCP MCP server does

GLips/Figma-Context-MCP MCP server connects an MCP-compatible coding client to Figma. It is intended for workflows where an agent needs to turn an existing Figma file, frame, or group into application code. The server supplies design information that can be used to implement interfaces in any framework supported by the coding project.

The server exposes two tools. `get_figma_data` returns comprehensive information from a Figma file, including layout, content, visual details, and component information. `download_figma_images` retrieves SVG and PNG images used in the file when given the IDs of image or icon nodes. Downloaded assets are saved relative to the server's image directory, shown in the provided configuration as `/home/user`.

## How it works

The normal workflow starts in an IDE chat, such as Cursor's agent mode. The developer pastes a link to a Figma file, frame, or group, then asks the agent to implement or otherwise work with the design. The MCP server uses the link to request relevant metadata from the Figma API and returns a reduced, translated representation to the client.

Rather than passing the complete API response to the model, GLips/Figma-Context-MCP MCP server focuses the returned context on information relevant to layout and styling. This reduces the amount of design data the model must process. For assets, the agent can provide image or icon node IDs to the image download tool and use the resulting SVG or PNG files in the implementation.

The README describes the project as specifically designed for Cursor, while also referring to other AI-powered coding tools that support MCP. The repository does not document a hosted endpoint; the example runs the server locally over standard input and output.

## Setup and configuration

Using the documented local setup requires Node.js tooling capable of running `npx` and a Figma access token. Add the server to the MCP configuration used by the coding client with the `figma-developer-mcp` package and the `--stdio` option. The token can be supplied with the `--figma-api-key` argument, or through the `FIGMA_API_KEY` environment variable. The README also identifies `PORT` as an environment setting that can be configured.

A local configuration can run the package with `npx -y figma-developer-mcp --stdio`. On Windows, the documented configuration wraps the same command with `cmd /c`. A Figma access token must be created before using the server; the README links to Figma's instructions for managing personal access tokens.

## Tools and capabilities

- Retrieve Figma file data covering layout, content, visuals, and components.
- Download SVG and PNG assets associated with image or icon node IDs.
- Use Figma links to files, frames, or groups as the starting point for agent requests.
- Provide design context to Cursor and other MCP-capable AI coding tools.
- Supply focused layout and styling context instead of the full Figma API response.

GLips/Figma-Context-MCP MCP server is a fit for design-to-code tasks that need more than a screenshot, especially when the agent must inspect component structure, measurements, styling information, and referenced assets. It does not replace the Figma editor or document a tool for modifying Figma files; the supplied material describes reading data and downloading images.

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