Enables chat-driven design creation and editing on Figma canvases, allowing users to create frames, shapes, text, and components, manage design variables, and inspect page structures directly through an AI interface.
Provides capabilities for creating vector graphics from SVG markup, exporting design nodes as SVG files, and generating AI-powered SVG assets.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@FigsorCreate a mobile login screen with email and password fields"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Figsor
Chat in Cursor. Design in Figma.
Figsor is an MCP server that bridges Cursor AI to Figma, enabling chat-driven design creation and editing — directly on your Figma canvas.
Cursor → MCP (stdio) → Figsor Server → WebSocket → Figma Plugin → Design on CanvasSetup
1. Install the Figma Plugin (Sideload)
Clone this repo and import the plugin into Figma:
https://github.com/AsifKabirAntu/figsor.gitIn Figma: Plugins → Development → Import plugin from manifest → select figsor/figma-plugin/manifest.json
2. Add to Cursor
Open your Cursor MCP settings and add:
{
"mcpServers": {
"figsor": {
"command": "npx",
"args": ["-y", "figsor"]
}
}
}3. Start Designing
Open a Figma file
Run the Figsor plugin (Plugins → Development → Figsor)
Chat in Cursor:
"Create a mobile login screen with email and password fields"
"Design a dashboard with a sidebar, KPI cards, and charts"
"Edit the selected frame — make the button rounded and change the color to blue"
Available Tools (45+)
Create & Layout
Tool | Description |
| Create frames (screens, sections, cards) |
| Add text with font, size, weight, color |
| Create rectangles and shapes |
| Create circles and ovals |
| Create lines and dividers |
| Create icons and vector graphics from SVG |
| Configure flexbox-style auto-layout |
| Edit any existing element |
| Add borders and strokes |
| Add shadows and blur effects |
| Remove elements |
| Restructure the layer hierarchy |
Read & Inspect
Tool | Description |
| Read the current selection |
| Get the full page tree |
| Inspect any node's properties |
| Search for elements by name or type |
| Select and zoom to elements |
| Read the file's design tokens |
| Browse available components |
| Use existing components |
| Convert instances to frames |
Vector Drawing & Advanced Fills
Tool | Description |
| Draw custom shapes with the pen tool |
| Union, subtract, intersect, or exclude shapes |
| Flatten nodes into a single editable vector |
| Apply solid colors, linear/radial/angular/diamond gradients, multiple fills |
Image, Typography & Constraints
Tool | Description |
| Place image fills on nodes |
| Apply mixed styling within text |
| Set responsive constraints |
| Discover available fonts |
Component & Variable Tools
Tool | Description |
| Create a new main component |
| Combine components into a variant set |
| Create a design token collection with modes |
| Create a COLOR, FLOAT, STRING, or BOOLEAN token |
| Bind a token to a node property |
| List all variable collections and tokens |
SVG Export & Animation
Tool | Description |
| Export any node as SVG markup |
| Live animated SVG previews + ZIP download |
AI-Powered SVG (Quiver)
Tool | Description |
| Generate SVG graphics from text prompts |
| Convert raster images to clean SVG |
Peer Design (Multi-Agent)
Tool | Description |
| Spawn AI designer agents with visible cursors |
| Remove an agent cursor |
| Remove all agent cursors |
Design Craft Guide
Tool | Description |
| Professional design rules — typography, color, spacing, anti-AI-slop |
Pro: Design System Integration
Connect your Figma design system libraries so the AI uses YOUR components, not generic ones.
Scan & import library components
Search across your design system
Save & switch between libraries
Generate designs with your DS
Get Figsor Pro → — $9 one-time purchase
Requirements
Node.js 18 or later
Figma desktop or web app
Cursor IDE with MCP support (or any MCP-compatible client — see below)
Using with Claude Code
Figsor works with any MCP client, not just Cursor. To use it with Claude Code:
claude mcp add --transport stdio --scope project figsor -- npx -y figsorOr add to .mcp.json in your project root:
{
"mcpServers": {
"figsor": {
"type": "stdio",
"command": "npx",
"args": ["-y", "figsor"]
}
}
}Then follow the same steps — open Figma, run the Figsor plugin, and chat.
Configuration
Environment Variable | Default | Description |
|
| WebSocket server port |
License
MIT © Asif Kabir
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.