The Figma MCP Server enables AI-powered design creation and modification in Figma through natural language prompts via a connected plugin. You can:
- Add Figma files to your context by providing the file URL
- View nodes by retrieving thumbnails for specific nodes using file key and node ID
- Read all comments on a Figma file
- Post comments on specific nodes or locations in a Figma file
- Reply to existing comments in a Figma file
The MCP server is built with Bun, providing the runtime environment for the server implementation.
Provides tools for creating and modifying Figma designs through natural language prompts, including capabilities to create basic design elements, design complete page layouts, and modify existing designs.
The server is implemented in TypeScript, providing type safety and modern language features for the implementation.
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
2. Set up the Figma Plugin
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:
Example Usage
Once everything is set up, you can use Cursor Agent to create designs with prompts like:
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
You must be authenticated.
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
A TypeScript server that implements the Model Context Protocol, enabling AI-powered design creation in Figma using natural language prompts through Cursor Agent.
Related MCP Servers
- AsecurityAlicenseAqualityAn MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.Last updated -195,1853,528JavaScriptMIT License
- AsecurityFlicenseAqualityEnables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.Last updated -195,1851JavaScript
- -securityFlicense-qualityEnables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.Last updated -TypeScript
- -securityAlicense-qualityA Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.Last updated -1246TypeScriptMIT License
Appeared in Searches
- A tool or method for visualizing a frontend interface or design
- A design and prototyping tool for user interfaces (Figma)
- A platform for designing and prototyping user interfaces and experiences
- A resource for finding UI designers or information about UI design
- How to create UI components with NativeWind for React Native