Repolode
Submit
GLips

GLips/Figma-Context-MCP

MCP server that gives AI coding agents like Cursor access to Figma file layout and styling data so they can implement designs.

View on GitHubWebsite
Stars
16,040
Forks
1,266
Open issues
28
Last commit
6 days ago

What is it?

Framelink MCP for Figma is a Model Context Protocol server that connects AI coding tools such as Cursor to the Figma API. A user pastes a link to a Figma file, frame, or group into the chat, and the agent fetches the relevant layout and styling metadata to write the corresponding code.

Before returning Figma API responses to the model, the server simplifies and translates them so only the most relevant layout and styling information is passed along. The project's stated goal is to reduce the context given to the model, which makes generated code more accurate than approaches that rely on pasted screenshots.

Setup requires a Figma personal access token and an MCP client configuration entry that runs the figma-developer-mcp package via npx, with a stdio or port-based transport.

Key features

  • 01Fetches layout and styling metadata for a Figma file, frame, or group from a pasted link.
  • 02Simplifies Figma API responses so the model receives only the most relevant design information.
  • 03Runs as an MCP server launched with npx, configured through a JSON file.
  • 04Accepts the Figma access token via a command-line flag or the FIGMA_API_KEY environment variable.

Use cases

  • Implementing a Figma design as frontend code in Cursor with layout context instead of screenshots.
  • Letting an AI agent read component structure and spacing while building UI in any framework.
  • Prototyping screens quickly by feeding existing Figma frames into an agent workflow.

Quick start

  1. 1

    Create a Figma access token using the instructions linked in the README

  2. 2

    Add the MCP server configuration to your editor's MCP config file (macOS/Linux) with your API key

    npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
  3. 3

    Restart your AI client and paste a Figma file, frame, or group link into the chat

Things to know

  • Requires a Figma access token before the server can fetch any design data.
  • Designed specifically for Cursor, so other AI clients may need extra configuration.

Topics

#figma#mcp#ai-agent#cursor#frontend#design-to-code#typescript#ai

FAQ

What is Figma-Context-MCP?
MCP server that gives AI coding agents like Cursor access to Figma file layout and styling data so they can implement designs. Framelink MCP for Figma is a Model Context Protocol server that connects AI coding tools such as Cursor to the Figma API. A user pastes a link to a Figma file, frame, or group into the chat, and the agent fetches the relevant layout and styling metadata to write the corresponding code.
Is Figma-Context-MCP free to use? What license does it have?
Figma-Context-MCP is open source under the MIT license. Check the license terms before using it in commercial products.
Is Figma-Context-MCP still maintained?
Actively maintained. The last commit to Figma-Context-MCP was on Oct 16, 2026.
What can I use Figma-Context-MCP for?
Implementing a Figma design as frontend code in Cursor with layout context instead of screenshots. Letting an AI agent read component structure and spacing while building UI in any framework. Prototyping screens quickly by feeding existing Figma frames into an agent workflow.
How do I install Figma-Context-MCP?
Create a Figma access token using the instructions linked in the README Add the MCP server configuration to your editor's MCP config file (macOS/Linux) with your API key: npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio Restart your AI client and paste a Figma file, frame, or group link into the chat
Where can I get Figma-Context-MCP?
The source code and installation instructions are on GitHub: https://github.com/GLips/Figma-Context-MCP

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects