Skip to main content
Glama

Figma MCP Server

by sichang824
npmGitHub
TypeScript
81
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
F
license - not found
-
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

            • 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
              78
              2

            • 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 -
              966
              JavaScript

            • Claude Figma MCP

              tonycueva
              -
              security
              F
              license
              -
              quality
              A Model Context Protocol (MCP) server that enables Claude to create and manipulate designs in Figma through either a Figma plugin or directly via the Figma API.
              Last updated -
              TypeScript

            • Figma MCP Server with Chunking

              ArchimedesCrypto
              A
              security
              A
              license
              A
              quality
              A Model Context Protocol server for interacting with the Figma API that handles large Figma files efficiently through memory-aware chunking and pagination capabilities.
              Last updated -
              7
              2
              TypeScript
              MIT License

            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