English Français العربية

io.github.GLips/Figma-Context-MCP

Registre officiel Outils de développement

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Code source Documentation

Installation

Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).

NPM package figma-developer-mcp
Claude Code 
claude mcp add figma-context-mcp -e 'FIGMA_API_KEY=<your figma_api_key>' -- npx -y figma-developer-mcp@0.13.2 --stdio
Configuration JSON (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "figma-context-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "figma-developer-mcp@0.13.2",
                "--stdio"
            ],
            "env": {
                "FIGMA_API_KEY": "<your figma_api_key>"
            }
        }
    }
}

Variables d'environnement

  • FIGMA_API_KEY obligatoire secret Your Figma Personal Access Token, learn more here: https://www.figma.com/developers/api#access-tokens

Documentation

Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent GitHub.

Sommaire
  1. Framelink MCP for Figma
  2. Demo
  3. How it works
  4. Getting Started
  5. Star History
  6. Learn More
Give your coding agent access to your Figma data.Implement designs in any framework in one-shot.

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.

See quickstart instructions →

Demo

Watch a demo of building a UI in Cursor with Figma design data

How it works

  1. Open your IDE's chat (e.g. agent mode in Cursor).
  2. Paste a link to a Figma file, frame, or group.
  3. Ask Cursor to do something with the Figma file—e.g. implement the design.
  4. Cursor will fetch the relevant metadata from Figma and use it to write your code.

This MCP server is specifically designed for use with Cursor. Before responding with context from the Figma API, it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.

Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.

Getting Started

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.

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
{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}
Windows
{
  "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.

Star History

Learn More

The Framelink MCP for Figma is simple but powerful. Get the most out of it by learning more at the Framelink site.

Questions fréquentes

Qu'est-ce que io.github.GLips/Figma-Context-MCP ?

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Comment installer io.github.GLips/Figma-Context-MCP ?

Il s'exécute sur votre machine. Dans Claude Code : claude mcp add figma-context-mcp -e 'FIGMA_API_KEY=<your figma_api_key>' -- npx -y figma-developer-mcp@0.13.2 --stdio. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.

Faut-il une clé API pour io.github.GLips/Figma-Context-MCP ?

Oui. Il attend FIGMA_API_KEY, à renseigner dans sa configuration.

io.github.GLips/Figma-Context-MCP est-il open source ?

Oui. Son code est sur GitHub sous licence MIT.

Qui maintient io.github.GLips/Figma-Context-MCP ?

Il est publié par GLips. AI.tn le référence sans le maintenir ni le recommander.

Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.