Figma MCP Server

Name: Figma MCP Server
Author: sichang824

@sichang824

Figma MCP Server について

A Figma API server implementation based on Model Context Protocol (MCP), supporting Figma plugin and widget integration.

基本情報

カテゴリ

メディアとデザイン

ランタイム

node

トランスポート

stdio

公開者

sichang824

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

{
  "mcpServers": {
    "mcp-figma-sichang824": {
      "command": "bun",
      "args": [
        "run",
        "build"
      ]
    }
  }
}

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

What is Figma MCP Server?

The Figma MCP Server is an implementation of the Model Context Protocol (MCP) that integrates with the Figma API. It provides a WebSocket server for Figma plugin and widget communication, enabling automation, data processing, and external service integration. This server is targeted at developers building or extending Figma plugins and widgets.

How to use Figma MCP Server?

Clone the repository, install dependencies with bun install, and set FIGMA_PERSONAL_ACCESS_TOKEN either in a .env file, via command-line arguments (-e or --token), or by configuring the token in an MCP client like Cursor. Run the development server with bun run dev and use its built‑in tools to perform Figma operations. For Cursor, add the server to .cursor/mcp.json with the appropriate command and arguments.

Key features of Figma MCP Server

Interact with Figma API through MCP
WebSocket server for Figma plugin communication
Support for Figma widget development
Environment variable configuration via command line arguments
Rich set of Figma operation tools
Plugin and widget building and development modes

Use cases of Figma MCP Server

Automate Figma workflow tasks (file, node, comment operations)
Export Figma elements as images programmatically
Integrate AI or external services with Figma plugins via WebSocket
Develop, test, and deploy custom Figma plugins and widgets
Search and manage Figma components and canvases

FAQ from Figma MCP Server

What does the Figma MCP Server do?

It acts as a bridge between Figma’s API and MCP clients, allowing you to perform Figma operations (file, node, comment, image, component, canvas, and widget actions) programmatically. It also supports real‑time communication with Figma plugins via WebSocket.

How do I get a Figma personal access token?

Log in to Figma, go to Account Settings > Personal Access Tokens, create a new token, and copy it to your .env file or pass it via command line arguments using -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token or --token your_token.

How do I configure the server in Cursor?

Add the following to .cursor/mcp.json:

{
  "Figma MCP": {
    "command": "bun",
    "args": [
      "--watch",
      "/path/to/figma-mcp/src/index.ts",
      "-e",
      "FIGMA_PERSONAL_ACCESS_TOKEN=your_token",
      "-e",
      "PORT=6000"
    ]
  }
}

What tools are available?

Tools include file operations, node manipulation, comment management, image export, search, component management, canvas object creation (rectangles, circles, text), and widget operations.

How do I load a plugin in Figma?

In Figma, right‑click to open the menu, go to Plugins > Development > Import plugin from manifest..., and select the plugin’s manifest.json file. The plugin will then appear in Figma’s plugin menu.