README.md
Chat in Cursor. Design in Figma.
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 Canvas
Setup
1. Install the Figma Plugin (Sideload)
Clone this repo and import the plugin into Figma:
https://github.com/AsifKabirAntu/figsor.git
In 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_frame |
Create frames (screens, sections, cards) |
create_text |
Add text with font, size, weight, color |
create_rectangle |
Create rectangles and shapes |
create_ellipse |
Create circles and ovals |
create_line |
Create lines and dividers |
create_svg_node |
Create icons and vector graphics from SVG |
set_auto_layout |
Configure flexbox-style auto-layout |
modify_node |
Edit any existing element |
set_stroke |
Add borders and strokes |
set_effects |
Add shadows and blur effects |
delete_node |
Remove elements |
move_to_parent |
Restructure the layer hierarchy |
Read & Inspect
| Tool | Description |
|---|---|
get_selection |
Read the current selection |
get_page_structure |
Get the full page tree |
read_node_properties |
Inspect any node's properties |
find_nodes |
Search for elements by name or type |
set_selection |
Select and zoom to elements |
get_local_styles |
Read the file's design tokens |
list_components |
Browse available components |
create_component_instance |
Use existing components |
detach_instance |
Convert instances to frames |
Vector Drawing & Advanced Fills
| Tool | Description |
|---|---|
create_vector |
Draw custom shapes with the pen tool |
boolean_operation |
Union, subtract, intersect, or exclude shapes |
flatten_nodes |
Flatten nodes into a single editable vector |
set_fill |
Apply solid colors, linear/radial/angular/diamond gradients, multiple fills |
Image, Typography & Constraints
| Tool | Description |
|---|---|
set_image_fill |
Place image fills on nodes |
style_text_range |
Apply mixed styling within text |
set_constraints |
Set responsive constraints |
list_available_fonts |
Discover available fonts |
Component & Variable Tools
| Tool | Description |
|---|---|
create_component |
Create a new main component |
create_component_set |
Combine components into a variant set |
create_variable_collection |
Create a design token collection with modes |
create_variable |
Create a COLOR, FLOAT, STRING, or BOOLEAN token |
bind_variable |
Bind a token to a node property |
get_variables |
List all variable collections and tokens |
SVG Export & Animation
| Tool | Description |
|---|---|
export_as_svg |
Export any node as SVG markup |
show_animation_preview |
Live animated SVG previews + ZIP download |
AI-Powered SVG (Quiver)
| Tool | Description |
|---|---|
quiver_generate_svg |
Generate SVG graphics from text prompts |
quiver_vectorize_svg |
Convert raster images to clean SVG |
Peer Design (Multi-Agent)
| Tool | Description |
|---|---|
spawn_design_agent |
Spawn AI designer agents with visible cursors |
dismiss_design_agent |
Remove an agent cursor |
dismiss_all_agents |
Remove all agent cursors |
Design Craft Guide
| Tool | Description |
|---|---|
get_design_craft_guide |
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](https://docs.anthropic.com/en/docs/
Tools (6)
create_frameCreate frames, screens, sections, or cards.create_textAdd text with font, size, weight, and color.create_rectangleCreate rectangles and shapes.modify_nodeEdit any existing element on the canvas.quiver_generate_svgGenerate SVG graphics from text prompts.spawn_design_agentSpawn AI designer agents with visible cursors.Configuration
claude_desktop_config.json
{"mcpServers": {"figsor": {"command": "npx", "args": ["-y", "figsor"]}}}Try it
→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
→Generate an SVG icon of a rocket ship for the header