MCP Figma

🚀 Figma MCP Server

A Figma API server implementation based on the Model Context Protocol (MCP), supporting integration with Figma plugins and widgets.

🚀 Quick Start

The Figma MCP Server is a powerful tool that enables seamless interaction with the Figma API through the Model Context Protocol (MCP). It supports the development of Figma plugins and widgets, offering a rich set of Figma operation tools.

✨ Features

• Interact with the Figma API via MCP.
• Communicate with Figma plugins through a WebSocket server.
• Support the development of Figma widgets.
• Configure environment variables via command-line parameters.
• Provide a rich set of Figma operation tools.

📦 Installation

1. Clone the repository:

git clone <repository-url>
cd figma-mcp

2. Install dependencies:

bun install

📚 Documentation

Environment Variables

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

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

Obtain 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 the .env file or pass it via command-line parameters.

💻 Usage Examples

Build the Project

bun run build

Run the Development Server

bun run dev

Use Command-Line Parameters

Support 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 the dedicated token parameter:

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

Or its shorthand form:

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

Configure MCP in Cursor

Add the following content 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 function: Search for 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 custom tools used to extend the functionality of Figma, enabling workflow automation, adding new features, or integrating external services. Here's an example of how to use a Figma plugin:

1. Install the plugin: Download and install the required plugin in your Figma account.
2. Configure the plugin: Set the necessary parameters and permissions according to the plugin requirements.
3. Use the plugin: Invoke the plugin functions in your design project, such as automatic layout and data binding.

Plugin Development Steps

1. Create a new plugin:
   • Open your Figma account and go to the plugin marketplace.
   • Click the "Create Plugin" button to start building a new plugin project.
2. Write code:
   • Use JavaScript or TypeScript to write the plugin logic.
   • Define the plugin functions, such as event listening and data processing.
3. Test the plugin:
   • Open a test file in Figma and load the plugin under development.
   • Test all functions to ensure the plugin works as expected.
4. Publish the plugin:
   • After testing, fill in the plugin description and usage instructions.
   • Submit the plugin to the Figma marketplace for other users to download and use.

Load the Plugin in Figma

1. Open the Figma application and go to the project you want to use.
2. Click the "Plugins" icon in the top-right corner and select "Load from My Computer" or "Load from URL".
3. Select the downloaded plugin file or enter the plugin link and click "Open".

Development

Build Widgets and Plugins

# Build widget
bun run build-widget

# Build plugin
bun run build-plugin

Run Development Mode

# Start the widget development server
bun run dev-widget

# Start the plugin development server
bun run dev-plugin

📄 License

This project is licensed under the MIT License.