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:
claude mcp add --transport stdio --scope project figsor -- npx -y figsor
Or 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 |
|---|---|---|
FIGSOR_PORT | 3055 | WebSocket server port |
License
MIT © Asif Kabir