Related MCP Server Resources

Explore more AI models, providers, and integration options:

  • Explore AI Models
  • Explore AI Providers
  • Explore MCP Servers
  • LangDB Pricing
  • Documentation
  • AI Industry Blog
  • Figma MCP Server
  • Xano MCP Server for Smithery
  • Chrome Debug MCP Server
  • TxtAi Memory Vector Server
  • ERPNext MCP Server
Back to MCP Servers
Figma MCP Server

Figma MCP Server

Public
sichang824/mcp-figma

Model Context Protocol (MCP) server enabling seamless Figma API interaction, plugin and widget development, WebSocket communication, and advanced Figma file, node, comment, image, and component management for enhanced design automation and integration.

typescript
0 tools
May 29, 2025
Updated Jun 4, 2025

Supercharge Your AI with Figma MCP Server

MCP Server

Unlock the full potential of Figma MCP Server through LangDB's AI Gateway. Get enterprise-grade security, analytics, and seamless integration with zero configuration.

Unified API Access
Complete Tracing
Instant Setup
Get Started Now

Free tier available • No credit card required

Instant Setup
99.9% Uptime
10,000+Monthly Requests

Figma MCP Server

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

Features

  • 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

Installation

  1. Clone the repository:
git clone cd figma-mcp
  1. Install dependencies:
bun install

Configuration

Environment Variables

Create a .env file and set the following environment variables:

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

Getting a Figma Access Token

  1. Log in to Figma
  2. Go to Account Settings > Personal Access Tokens
  3. Create a new access token
  4. Copy the token to your .env file or pass it via command line arguments

Usage

Build the Project

bun run build

Run the Development Server

bun run dev

Using Command Line Arguments

Support for setting environment variables via the -e parameter:

bun --watch src/index.ts -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token -e PORT=6000

You can also use a dedicated token parameter:

bun --watch src/index.ts --token your_token

Or its shorthand:

bun --watch src/index.ts -t your_token

Configuring MCP in Cursor

Add to the .cursor/mcp.json file:

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

Available Tools

The server provides the following Figma operation tools:

  • File operations: Get files, versions, etc.
  • Node operations: Get and manipulate Figma nodes
  • Comment operations: Manage comments in Figma files
  • Image operations: Export Figma elements as images
  • Search functionality: Search content in Figma files
  • Component operations: Manage Figma components
  • Canvas operations: Create rectangles, circles, text, etc.
  • Widget operations: Manage Figma widgets

Figma Plugin Development

Plugin Introduction

Figma plugins are customized tools that extend Figma's functionality, enabling workflow automation, adding new features, or integrating with external services. This MCP server provides a convenient way to develop, test, and deploy Figma plugins.

Building and Testing

Build the plugin:

bun run build:plugin

Run in development mode:

bun run dev:plugin

Loading the Plugin in Figma

!image

  1. Right-click in Figma to open the menu -> Plugins -> Development -> Import plugin from manifest...
  2. Select the plugin's manifest.json file
  3. Your plugin will now appear in Figma's plugin menu

Plugin Interaction with MCP Server

Plugins can communicate with the MCP server via WebSocket to achieve:

  • Complex data processing
  • External API integration
  • Cross-session data persistence
  • AI functionality integration

Development

Build Widget

bun run build:widget

Build Plugin

bun run build:plugin

Development Mode

bun run dev:widget # Widget development mode bun run dev:plugin # Plugin development mode

License

MIT

Publicly Shared Threads0

Discover shared experiences

Shared threads will appear here, showcasing real-world applications and insights from the community. Check back soon for updates!

Share your threads to help others
Related MCPs5
  • Figma MCP Server
    Figma MCP Server

    Model Context Protocol server bridging Figma designs and React by converting design files into React...

    Added May 30, 2025
  • Xano MCP Server for Smithery
    Xano MCP Server for Smithery

    Model Context Protocol server enabling seamless integration between Claude AI and Xano databases wit...

    Added May 30, 2025
  • Chrome Debug MCP Server
    Chrome Debug MCP Server

    Model Context Protocol server enabling advanced browser automation with Playwright, featuring multi-...

    13 tools
    Added May 30, 2025
  • TxtAi Memory Vector Server
    TxtAi Memory Vector Server

    Model Context Protocol server offering advanced semantic search, persistent memory management, tag-b...

    Added May 30, 2025
  • ERPNext MCP Server
    ERPNext MCP Server

    Model Context Protocol server enabling seamless integration with ERPNext via API, offering authentic...

    Added May 30, 2025