MCP-Server-Using-Cursor-and-Figma

Gauravmane16/MCP-Server-Using-Cursor-and-Figma

3.2

If you are the rightful owner of MCP-Server-Using-Cursor-and-Figma and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

A server that integrates Cursor IDE and Figma via the MCP protocol to automate workflows between code projects and Figma design files.

MCP-Server-Using-Cursor-and-Figma

A server that integrates Cursor IDE and Figma via the MCP protocol. This allows you to automate workflows between your code projects and Figma design files.

Features

  • List, open, and create files in Cursor IDE projects.
  • List and fetch details of your Figma files.
  • Export images from Figma.
  • Sync Figma design specs into your code projects.
  • Easily extendable with new tools.

Demo & More Information

Requirements

  • Python 3.8+
  • Cursor IDE (optional, for Cursor integration)
  • Figma account and a Figma Personal Access Token
  • MCP Python package: pip install mcp or pip install mcp-server
  • (Optional) python-dotenv for loading environment variables: pip install python-dotenv
  • Claude Desktop App (for Claude integration)

Installation

  1. Clone this repository:

    git clone <your-repo-url>
cd MCP-Server-Using-Cursor-and-Figma

  2. Install dependencies:

    pip install mcp python-dotenv requests

Getting Your Figma Access Token

  1. Go to your Figma account settings.
  2. Click "Create a new personal access token".
  3. Copy the token.

Configuration

Create a .env file in the project root:

FIGMA_ACCESS_TOKEN=your-figma-token-here

Or set the environment variable in your shell:

export FIGMA_ACCESS_TOKEN=your-figma-token-here

Running the MCP Server

Start the server with:

python mcp_server.py

The server will start on localhost:8080 by default and print available tools.

Listing Your Figma Projects

You can list your Figma projects/files using:

python list_figma_projects.py

This will print your Figma files and save them to figma_projects.json.

Using with Claude Desktop App

  1. Start the MCP server as above.
  2. Open Claude Desktop App.
  3. Go to the "Plugins" or "MCP" section.
  4. Add a new MCP server:
    • Enter the server address: http://localhost:8080
    • The tools from this project will be available in Claude's tool list.
  5. Use the tools by invoking them in Claude's chat, e.g., "List my Figma files" or "Open a project in Cursor".

Adding More Tools

You can add more tools by editing the _register_tools method in .

Troubleshooting

  • Figma errors: Make sure your access token is valid and has the right permissions.
  • Cursor IDE not found: Ensure Cursor is installed and available in your system PATH.
  • MCP errors: Ensure the mcp Python package is installed.

License

MIT License

Credits