What is Figma Edit Mcp

figma-edit-mcp is a tool designed for editing Figma files through MCP. It allows users to add various elements such as text, shapes, and frames directly within Figma files.

Use cases

Use cases for figma-edit-mcp include collaborative design sessions, rapid prototyping, and making real-time edits to Figma files during team meetings or presentations.

How to use

To use figma-edit-mcp, clone the repository from GitHub, install the necessary dependencies, and set up the Figma plugin by importing the manifest file. Configure the MCP server with your Figma Personal Access Token to enable functionality.

Key features

Key features of figma-edit-mcp include the ability to edit Figma files directly, add text, shapes, and frames, and seamless integration with MCP for enhanced editing capabilities.

Where to use

figma-edit-mcp can be used in design and development environments where Figma is utilized, particularly in collaborative projects that require real-time editing and updates.

Figma Edit MCP

A tool for editing Figma files via MCP.
Add text, shapes, frames, and more through MCP.

Requirements

• Node.js v20.0.0 or higher

Installation

Setup Instructions

1. Clone the Repository

git clone https://github.com/asamuzak09/figma-edit-mcp.git
cd figma-edit-mcp

2. Install Dependencies

npm run install-all

This command installs dependencies and runs the build in both the figma-mcp-server and figma-plugin directories.

3. Install the Figma Plugin

To install the Figma plugin locally in development mode:

1. Open the Figma desktop app
2. From the menu in the top right, select “Plugins” → “Development” → “Import plugin from manifest…”
3. Select the figma-plugin/manifest.json file
4. The plugin will be installed in development mode

MCP Configuration

For Cline

To use this plugin with Cline, you need to add the MCP server configuration:

1. Add the following configuration to the mcpServers object:

For Cursor

To use this plugin with Cursor, you need to add the MCP server configuration:

1. Click “Add MCP Server”
2. Select “command” for “Type”
3. Enter the following for “Command”:

env FIGMA_ACCESS_TOKEN=your_figma_personal_access_token node /path/to/figma-edit-mcp/figma-mcp-server/build/index.js

Replace /path/to/figma-edit-mcp with the actual path to the repository.
Replace your_figma_personal_access_token with your Figma Personal Access Token.

How to Get a Figma Personal Access Token

1. Log in to Figma
2. Click on your profile icon in the top right
3. Select “Settings”
4. Go to the “Personal access tokens” section in the “Account” tab
5. Click “Create a new personal access token”
6. Enter a name for the token and click “Create token”
7. Copy the displayed token (note that this token will only be shown once)

Usage

Using the Figma Plugin

1. Open Figma
2. From the menu in the top right, select “Plugins” → “Development” → “Figma MCP Plugin”
3. The plugin will launch and connect to the MCP server

Main Features

Tools

• update_file: Tool to add and update elements in a Figma file
• get_file: Tool to retrieve the contents of a Figma file
• get_mcp_tool_usage: Tool to get usage information for MCP tools

Element Types That Can Be Added with update_file

• createFrame: Create frames used as backgrounds or containers
• createText: Create text elements (titles, descriptions, etc.)
• createRectangle: Create rectangles (buttons, cards, etc.)
• createEllipse: Create ellipses (icons, decorations, etc.)
• createLine: Create lines (dividers, arrows, etc.)
• createImage: Insert images (logos, characters, etc.)
• createComponent: Create reusable components