Package Exports

@tothienbao6a0/figma-mcp-server
@tothienbao6a0/figma-mcp-server/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tothienbao6a0/figma-mcp-server) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Figma MCP Server by Bao To

🌐 Available in: 한국어 (Korean) | 日本語 (Japanese) | 中文 (Chinese)

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, Figma MCP Server by Bao To.

When Cursor has access to Figma design data, it can be significantly better at implementing designs accurately compared to alternative approaches like pasting screenshots.

Demo

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

How it works

Open your IDE's chat (e.g. agent mode in Cursor).
Paste a link to a Figma file, frame, or group.
Ask your AI agent to do something with the Figma file—e.g. implement the design.
The AI agent, configured to use Figma MCP Server by Bao To, will fetch the relevant metadata from Figma via this server and use it to write your code.

This MCP server is designed to simplify and translate responses from the Figma API so that only the most relevant layout and styling information is provided to the AI model.

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

Getting Started

Your AI coding client (like Cursor) can be configured to use this MCP server. Add the following to your client's MCP server configuration file, replacing YOUR-KEY with your Figma API key.

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": {
    "Figma MCP Server by Bao To": {
      "command": "npx",
      "args": ["-y", "@tothienbao6a0/figma-mcp-server", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma MCP Server by Bao To": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@tothienbao6a0/figma-mcp-server", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

This will use npx to download and run the @tothienbao6a0/figma-mcp-server package from npm. The -y flag automatically agrees to any prompts from npx.

Alternatively, you can install the package globally first (though npx is often preferred for CLI tools to ensure you're using the latest version without global installs):

npm install -g @tothienbao6a0/figma-mcp-server

And then configure your client to use @tothienbao6a0/figma-mcp-server directly as the command.

@tothienbao6a0/figma-mcp-server