Get the FREE Ultimate OpenClaw Setup Guide →

figma

A comprehensive local MCP server for Figma

Installation
Run this command in your terminal to add the MCP server to Claude Code.
Run in terminal:
Command
claude mcp add --transport stdio planetabhi-figma-mcp-server <absolute_path_to_bun> <absolute_path_to_mcpServer.ts> \
  --env FIGMA_API_KEY="your_figma_api_key_here"

How to use

This MCP server exposes a Figma integration that connects Figma with Gemini CLI, Claude Desktop, and Cursor. It leverages your Figma API key to fetch and process design data, enabling tools that query design nodes, assets, and metadata from Figma. You can access the server's capabilities through Claude Desktop or Gemini CLI, using the built-in /mcp commands and tool descriptions to discover what’s available and how to format requests. To get started, configure your environment with your Figma API key and run the server via Bun, then register it in your clients' settings so you can query design data and node information from Figma files.

Available access points include: listing all tools and their parameters, retrieving tool schemas, and viewing server/tool descriptions. In Claude Desktop, you add the server under Settings > Developers > Edit Config and reference the Bun binary path and the MCP server file. In Gemini CLI, you create a ~/.gemini/settings.json entry that points to the server, set the working directory and environment (including FIGMA_API_KEY), and start Gemini. Once registered, you can use commands like /mcp to list tools, /mcp desc to see descriptions, /mcp schema to view parameter schemas, and /mcp nodesc to hide descriptions. The server also supports starting via SSE or a local web endpoint if needed, and you can adjust the port with PORT if you run into port conflicts.

How to install

Prerequisites:

  • Bun installed (version 1.1.0 or newer)
  • Git
  • A Figma Personal Access Token (PAT) for FIGMA_API_KEY

Installation steps:

  1. Clone the repository: git clone https://github.com/planetabhi/figma-mcp-server.git
  2. Change into the project directory: cd figma-mcp-server
  3. Install dependencies with Bun: bun i
  4. Create a .env file in the project root and set your Figma API key: FIGMA_API_KEY=your_figma_api_key_here
  5. List available tools to verify the setup: bun list-tools

    or

    bun index.ts tools
  6. Run the MCP server (example using Bun to execute the TypeScript entry): bun mcpServer.ts --sse

Notes:

  • If you prefer npm, you can adapt commands (install: npm i; list-tools: npx tsx index.ts tools).
  • For Gemini CLI integration, you’ll configure the server in Gemini’s settings with the absolute Bun path and mcpServer.ts path as the arguments.

Additional notes

Tips and common issues:

  • Ensure FIGMA_API_KEY is available and the .env file sits alongside mcpServer.ts as expected by the server startup script.
  • If Bun is not detected, verify that which bun returns a valid path and restart your shell after installation.
  • Default MCP server port is 3001; override with PORT when starting SSE or local endpoints.
  • If you encounter port conflicts in SSE mode, launch on a custom port (e.g., PORT=3005 bun mcpServer.ts --sse).
  • When using Claude Desktop or Gemini CLI, ensure you register the server with the correct absolute paths for the Bun binary and mcpServer.ts, and provide the necessary environment variables (e.g., FIGMA_API_KEY).
  • The server exposes a list of tools and their parameter schemas; use /mcp, /mcp schema, and /mcp desc commands to explore capabilities.

Related MCP Servers

Sponsor this space

Reach thousands of developers