Skip to main content
Glama

Figma MCP Server

by sichang824
GitHub
TypeScript
2
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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 <repository-url> 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

This server cannot be installed

-
security - not tested
-
license - not tested
-
quality - not tested

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

A server implementation that enables interaction with Figma API through Model Context Protocol (MCP), supporting plugin and widget development with WebSocket communication capabilities.

  1. Features
    1. Installation
      1. Configuration
        1. Environment Variables
        2. Getting a Figma Access Token
      2. Usage
        1. Build the Project
        2. Run the Development Server
        3. Using Command Line Arguments
      3. Configuring MCP in Cursor
        1. Available Tools
          1. Figma Plugin Development
            1. Plugin Introduction
            2. Building and Testing
            3. Loading the Plugin in Figma
            4. Plugin Interaction with MCP Server
          2. Development
            1. Build Widget
            2. Build Plugin
            3. Development Mode
          3. License

            Related MCP Servers

            • Figma MCP Server

              TimHolden
              A
              security
              F
              license
              A
              quality
              Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
              Last updated -
              2
              106
              TypeScript
              • Apple

            • mcp-figma

              smithery-ai
              A
              security
              F
              license
              A
              quality
              A Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
              Last updated -
              18
              34
              1

            • Figma MCP Server

              deepsuthar496
              -
              security
              F
              license
              -
              quality
              A Model Context Protocol server that integrates with Figma's API, allowing interaction with Figma files, comments, components, projects, and webhook management.
              Last updated -
              997
              JavaScript

            • Figma MCP Server

              1yhy
              -
              security
              A
              license
              -
              quality
              A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
              Last updated -
              124
              6
              TypeScript
              MIT License
              • Linux
              • Apple

            View all related MCP servers

            New MCP Servers

            MCP directory API

            We provide all the information about MCP servers via our MCP API.

            curl -X GET 'https://glama.ai/api/mcp/v1/servers/sichang824/mcp-figma'

            If you have feedback or need assistance with the MCP directory API, please join our Discord server