AgentToolHub
MCP ServerClaude CodeCursorClineOpenClawWindsurfVS CodeChatGPT

Figma-Context-MCP

MCP server to provide Figma layout information to AI coding agents like Cursor

Features

  • ✓Integrate Figma data with AI coding agents
  • ✓Enhance design implementation accuracy
  • ✓Streamline design-to-code workflow
  • ✓Optimize context delivery for AI models
  • ✓Support for Cursor and other AI tools
  • ✓Visit GitHub for more tools and info

Installation Guide

Many code editors and other AI clients use a configuration file to manage MCP servers.

The figma-developer-mcp server can be configured by adding the following to your configuration file.

var(--color-accent)]/40 pl-3 my-2 text-[var(--text-tertiary)]">NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found [here.

MacOS / Linux

json
{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

json
{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Or you can set FIGMA_API_KEY and PORT in the env field.

If you need more information on how to configure the Framelink MCP for Figma, see the Framelink docs.

Reviews