GLips

Figma-Context-MCP: Give Coding Agents Access to Figma Designs

Figma-Context-MCP is an MCP server that turns Figma file data into concise layout and styling context for AI coding agents. It is intended for developers who want agents such as Cursor to implement designs using design metadata rather than screenshots alone.

TypeScriptMITAIMCPMCP Server
View on GitHub Compare
Stars
15.9k
Forks
1.3k
Stars, last 8 days
+27

Our take

Health score

34/100

How it is scored
Activity
45
Community
50
Issues
21
Pull requests
21

+27 stars in the last 8 days

Overview

Figma-Context-MCP connects AI coding tools to Figma through the Model Context Protocol. Given a Figma file, frame, or group link, it retrieves design information and condenses the Figma API response into layout and styling context for an agent.

It is useful when an agent needs more than a visual reference to implement a design. The project is designed with Cursor in mind, while its README describes use with other AI-powered coding tools that support MCP.

Key Features

  • Fetches Figma data from links to files, frames, or groups.
  • Translates Figma API responses into a more focused representation for coding agents.
  • Provides layout and styling information to guide implementation.
  • Uses MCP to connect Figma data to compatible AI coding tools.
  • Can be launched through npx with a Figma access token.
  • Supports stdio configuration and documents environment variables for the API key and port.

Use Cases

  • A frontend developer asks Cursor to implement a page or component from a Figma frame and wants the agent to use design metadata.
  • A team prototyping a UI uses an MCP-compatible coding assistant to turn selected Figma layouts into code.
  • A developer refining an existing interface provides a Figma group or frame so an agent can reference its layout and styling.

Getting Started

Create a Figma personal access token, then configure an MCP client to run:

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

See the repository README and Framelink quickstart for client configuration details.

Considerations

  • A Figma personal access token is required to retrieve design data.
  • You need an AI client that supports MCP and can connect to this server.
  • The project focuses on extracting and simplifying Figma data for coding agents; it is not described as a general-purpose design editor or a replacement for Figma.

Found this useful?

Share it with someone who would like Figma-Context-MCP.