MCPHub Lab
MCPHub LabRegistryGLips/Figma-Context-MCP
GLips

GLips/Figma Context MCP

Built by GLips • 14,008 stars

Visit Repository

What is GLips/Figma Context MCP?

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

How to use GLips/Figma Context MCP?

1. Install a compatible MCP client (like Claude Desktop). 2. Open your configuration settings. 3. Add GLips/Figma Context MCP using the following command: npx @modelcontextprotocol/glips-figma-context-mcp 4. Restart the client and verify the new tools are active.
🛡️ Scoped (Restricted)
npx @modelcontextprotocol/glips-figma-context-mcp --scope restricted
🔓 Unrestricted Access
npx @modelcontextprotocol/glips-figma-context-mcp

Key Features

Native MCP Protocol Support
Real-time Tool Activation & Execution
Verified High-performance Implementation
Secure Resource & Context Handling

Optimized Use Cases

Extending AI models with custom local capabilities
Automating system workflows via natural language
Connecting external data sources to LLM context windows

GLips/Figma Context MCP FAQ

Q

Is GLips/Figma Context MCP safe?

Yes, GLips/Figma Context MCP follows the standardized Model Context Protocol security patterns and only executes tools with explicit user-granted permissions.

Q

Is GLips/Figma Context MCP up to date?

GLips/Figma Context MCP is currently active in the registry with 14,008 stars on GitHub, indicating its reliability and community support.

Q

Are there any limits for GLips/Figma Context MCP?

Usage limits depend on the specific implementation of the MCP server and your system resources. Refer to the official documentation below for technical details.

Official Documentation

View on GitHub
<a href="https://www.framelink.ai/?utm_source=github&utm_medium=referral&utm_campaign=readme" target="_blank" rel="noopener"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://www.framelink.ai/github/HeaderDark.png" /> <img alt="Framelink" src="https://www.framelink.ai/github/HeaderLight.png" /> </picture> </a> <div align="center"> <h1>Framelink MCP for Figma</h1> <h3>Give your coding agent access to your Figma data.<br/>Implement designs in any framework in one-shot.</h3> <a href="https://npmcharts.com/compare/figma-developer-mcp?interval=30"> <img alt="weekly downloads" src="https://img.shields.io/npm/dm/figma-developer-mcp.svg"> </a> <a href="https://github.com/GLips/Figma-Context-MCP/blob/main/LICENSE"> <img alt="MIT License" src="https://img.shields.io/github/license/GLips/Figma-Context-MCP" /> </a> <a href="https://framelink.ai/discord"> <img alt="Discord" src="https://img.shields.io/discord/1352337336913887343?color=7389D8&label&logo=discord&logoColor=ffffff" /> </a> <br /> <a href="https://twitter.com/glipsman"> <img alt="Twitter" src="https://img.shields.io/twitter/url?url=https%3A%2F%2Fx.com%2Fglipsman&label=%40glipsman" /> </a> </div> <br/>

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.

<h3><a href="https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme">See quickstart instructions →</a></h3>

Demo

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

Watch the video

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

<a href="https://star-history.com/#GLips/Figma-Context-MCP"><img src="https://api.star-history.com/svg?repos=GLips/Figma-Context-MCP&type=Date" alt="Star History Chart" width="600" /></a>

Learn More

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

Global Ranking

8.5
Trust ScoreMCPHub Index

Based on codebase health & activity.

Manual Config

{ "mcpServers": { "glips-figma-context-mcp": { "command": "npx", "args": ["glips-figma-context-mcp"] } } }