Figma Context
    Figma Context

    Figma Context

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

    4.3

    GitHub Stats

    Stars

    8902

    Forks

    711

    Release Date

    6/19/2025

    about two weeks ago

    Detailed Description

    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.

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

    Windows

    {
      "mcpServers": {
        "Framelink Figma MCP": {
          "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 Figma MCP server, see the Framelink docs.

    Star History

    Learn More

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

    Sponsors

    🥇 Gold Sponsors

    🥈 Silver Sponsors

    🥉 Bronze Sponsors

    😻 Smaller Backers

    Star History

    Star History

    Feb 13Feb 17Feb 21Feb 25Mar 1Mar 5Mar 9Mar 13Mar 17Mar 2307501,5002,2503,000
    Powered by MSeeP Analytics

    About the Project

    This app has not been claimed by its owner yet.

    Claim Ownership

    Receive Updates

    Security Updates

    Get notified about trust rating changes

    to receive email notifications.