Home / MCP / Figma MCP Server

Figma MCP Server

Provides read-only access to Figma files and projects via MCP with caching, monitoring, and transport for stdio and SSE.

typescript
Installation
Add the following to your MCP client configuration file.

Configuration

View docs
{
    "mcpServers": {
        "figma_mcp": {
            "command": "node",
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            }
        }
    }
}

You deploy and run a Model Context Protocol (MCP) server that integrates Figma’s API to offer read-only access to Figma files and projects, plus a solid foundation for future design token and theme management. This server lets Claude and other MCP-compatible clients query Figma data efficiently while benefiting from caching, error handling, and monitoring.

How to use

You use this MCP server with an MCP client to access Figma data and manage design system elements. Start the server with your Figma access token, then connect your MCP client to the local server. Use the available tools to fetch files and projects, inspect file details, and manage design system variables and themes within read-only limits.

How to install

Prerequisites you need before installing: Node.js 18.x or higher, and a Figma access token with appropriate permissions.

Install the MCP server package from npm.

npm install figma-mcp-server

Configuration and running

Create a configuration file to run the server with your Figma access token. You will typically export the token as an environment variable or include it in a startup configuration for your MCP runner.

# Example environment setup (adjust to your environment)
FIGMA_ACCESS_TOKEN=your_figma_token
MCP_SERVER_PORT=3000
DEBUG=figma-mcp:*

Claude Desktop integration configuration

If you use Claude Desktop to load the MCP server, configure it with an absolute path to the server entry file. The example below shows how to reference the built server from a Claude Desktop configuration filename.

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

Start command (typical runtime scenario)

In practice you start the MCP server via your chosen runtime method (for Claude Desktop, the config above). If you run it directly, you would execute the node entry pointed to by dist/index.js with your token set in the environment.

Notes on environment and runtime

Always use absolute paths for server entry points. Restart your MCP client (e.g., Claude Desktop) after updating the server configuration. Ensure your token is kept secure and never committed to source control.

Security considerations

Only personal access tokens are described as supported in this setup. Do not expose tokens in client-side code or logs. Use environment variables to pass sensitive values and apply least-privilege permissions on the token.

Troubleshooting

If the server does not start, verify you are using Node.js 18.x or higher and that the server entry file exists at the specified path. Check your Claude Desktop or MCP runner logs for startup errors and ensure environment variables are properly set.

Notes on capabilities and limitations

The server supports read-only access to Figma files and projects. Future enhancements may enable design token and theme management, variable creation, and dependency analysis depending on API access and plugin development.

Available tools

startServer

Initialize and start the MCP server using your Figma token and optional debug/port settings.

get-file

Retrieve details for a specific Figma file using its fileKey.

list-files

List files within a Figma project.

create-variables

Create design system variables (future capability, read/write depending on API access).

create-theme

Create and configure design themes with multiple modes (future capability).