Figma MCP (Model Context Protocol)
A complete solution for creating and modifying Figma designs through Cursor Agent using the Model Context Protocol.
Blog: https://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/
Overview
This project enables AI-powered design creation in Figma using natural language prompts through Cursor Agent. It consists of two main components:
- MCP Server: A Bun + TypeScript server that implements the Model Context Protocol and communicates with the Figma plugin via WebSockets.
- Figma Plugin: A plugin that runs in Figma and executes design operations based on instructions from the MCP server.
With this integration, you can use natural language to:
- Create basic design elements (shapes, text, etc.)
- Design complete page layouts with multiple sections
- Modify existing designs
Repository Structure
- figma-mcp-server/: The MCP server implementation
- figma-plugin/: The Figma plugin for executing design operations
Quick Start
1. Set up the MCP Server
cd figma-mcp-server
cp .env.example .env # Edit this file to add your Figma token
bun install
bun run index.ts
2. Set up the Figma Plugin
cd figma-plugin
npm install
npm run build
Then import the plugin into Figma:
- Open Figma
- Go to Plugins > Development > Import plugin from manifest
- Select the
figma-plugin/manifest.json
file
3. Connect to Cursor Agent
In Cursor:
- Go to Settings > Agent > MCP Servers
- Add a new server with URL:
http://localhost:3000/api/mcp/schema
Detailed Documentation
For more detailed instructions, see:
- MCP Server README
- Figma Plugin Setup Guide
Example Usage
Once everything is set up, you can use Cursor Agent to create designs with prompts like:
Create a landing page with a header, hero section with heading "Our Product" and subheading "The best solution for your needs", 3 features in the features section, and a footer with contact information.
How It Works
- Cursor Agent receives a natural language prompt
- It sends a structured MCP request to the MCP server
- The MCP server processes the request and sends instructions to the Figma plugin via WebSocket
- The Figma plugin executes the design operations in Figma
License
MIT
Figma Design Automation
Project Details
- xxflux/figma_MCP
- figma-mcp
- Last Updated: 4/17/2025
Recomended MCP Servers

MCP server providing token-efficient access to OpenAPI/Swagger specs via MCP Resources for client-side exploration.
A MCP server that provides audio transcription capabilities using OpenAI's Whisper API
Essential MCP to ATC (Awesome Tool Collection) Python Bridge
An adaptation of the MCP Sequential Thinking Server to guide tool usage. This server provides recommendations for...
GitHub's official MCP Server
Tiny TODO MCP is a specialized server that implements the Model Context Protocol (MCP), allowing AI assistants to...
paser source map
This is open base storage and it is mainly used for a lots of proxy tools like Clash,...
MCP server for enriching banking data using the Ntropy API
A open-source library enabling AI models to control hardware devices via serial communication using the MCP protocol. Initial...