Figma

Provides MCP-compliant access to Figma resources for LLMs, enabling read, list, and watch of files, components, and variables.

typescript

3

GitHub Stars

typescript

Language

4 months ago

First Indexed

3 weeks ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "mcp-mirror-timholden_figma-mcp-server": {
      "command": "figma-mcp-server",
      "args": [],
      "env": {
        "DEBUG": "figma-mcp:*",
        "MCP_SERVER_PORT": "YOUR_PORT",
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

You set up a TypeScript MCP server that exposes Figma data to large language models through the Model Context Protocol. It lets you access and watch Figma files, components, and variables in a standardized way, so your AI workflows can read and respond to Figma resources reliably.

How to use

You run the Figma MCP Server locally and connect your MCP client to it. The server supports both stdio and SSE transports, so you can integrate it into your existing toolchains or run it as a standalone service. Use stdio when you want to pipe requests and responses through your terminal or a local script. Use SSE when you prefer a network-based transport with server-sent events for real-time updates.

To interact with the server, start the server process and then drive your MCP client to connect using the appropriate transport. For stdio, you provide input via standard input and receive output on standard output. For SSE, you start the server with the proper transport flag to enable HTTP-based communication on a port you choose.

How to install

Prerequisites: ensure you have Node.js installed on your system. You will also use the npm package manager to install dependencies and run the server.

Install the MCP SDK and project dependencies, then build if required. Run these steps in your terminal.

npm install @modelcontextprotocol/sdk
npm install

# If a build step is required by the project, run it here as well
# e.g., npm run build

# Start the server (stdio transport example)
npm run start

# Or start in SSE mode on a specific port
# (ensure the port is available on your system)
figma-mcp-server --transport sse --port 3000

Configuration and usage notes

Configure your environment to provide the necessary credentials and optional server settings. The following environment variables are used by the server.

FIGMA_ACCESS_TOKEN=your_access_token
MCP_SERVER_PORT=3000
DEBUG=figma-mcp:* npm start

Resource access and operations

The server exposes a set of MCP operations to work with Figma resources. You can list resources, read specific resources, watch for changes, search across resources, and retrieve metadata. Resources are addressed using the figma:/// URI scheme, for example figma:///file/{file_key} or figma:///component/{file_key}/{component_id}.

Resource URIs (examples)

Use the figma:/// scheme to target Figma resources. Examples include files, components, variables, styles, teams, and projects.

Development and testing

If you are actively developing, you can run tests and build steps to validate changes.

npm install
npm run build
npm test

Security and debugging

Set up and manage access tokens securely. Enable verbose debugging when needed by setting the DEBUG environment variable to focus on figma-mcp related output.

DEBUG=figma-mcp:* npm start

Available tools

resources/list

List available Figma resources such as files, components, and variables.

resources/read

Read the content of a specified Figma resource identified by its URI.

resources/watch

Watch for changes to a Figma resource and receive notifications of updates.

resources/search

Search across Figma resources to find items matching criteria.

resources/metadata

Retrieve metadata about Figma resources and their properties.