Log inSubmit server
Figma Context MCP logo

Figma Context MCP

by GLips

Reads Figma layouts, styles, components, and images so coding agents can implement designs from Figma links.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Figma Context MCP

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": {
    "glips-figma-context-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ],
      "env": {
        "FIGMA_API_KEY": "YOUR_VALUE_HERE",
        "PORT": "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-developer-mcp

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 29d ago.

Overview

GLips/Figma-Context-MCP MCP server gives coding agents access to structured Figma file, frame, and group data. It retrieves relevant metadata through the Figma API, simplifies the response, and exposes layout, content, visual, and component information over MCP. Agents can also download SVG and PNG assets by node ID, with files saved relative to the server's image directory. Reach for it when implementing Figma designs in Cursor or another compatible AI coding client.

Use cases

  • Implement a Figma frame in an application
  • Inspect component and layout data from a Figma file
  • Download SVG or PNG assets by node ID
  • Give Cursor structured design context

Key features

  • Retrieve Figma layout and styling data
  • Read content, visuals, and component information
  • Download SVG and PNG image assets
  • Accept Figma file, frame, and group links
  • Run locally over MCP stdio

Tools2

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

Verified live~899 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 Today

Recent health check succeeded.

29/29 checks healthy over the last 77d

Supply-chain signal

1 high-severity advisory on record for this package. Most advisories affect transitive dependencies and may not be exploitable in this server's actual usage — this is a directional signal, not a security audit.

Critical 0High 1Medium 0Low 0

Scanned 11h ago via OSV.dev · figma-developer-mcp (npm)

Adoption & maintenance

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

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

How Figma Context MCP works

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

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

Add `npx -y figma-developer-mcp --stdio` to the MCP client configuration, then provide a Figma access token with `--figma-api-key` or the `FIGMA_API_KEY` environment variable.

Its `get_figma_data` tool retrieves layout, content, visual, and component information from a Figma file.

Use `download_figma_images` with the IDs of image or icon nodes. The tool downloads SVG and PNG files relative to the server's image directory.

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 AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/glips-figma-context-mcp?style=directory)](https://allmcps.com/mcp/glips-figma-context-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/glips-figma-context-mcp"><img src="https://allmcps.com/api/badge/glips-figma-context-mcp?style=directory" alt="Figma Context MCP on AllMCPs" /></a>