Allows AI agents to create and edit Figma Slides presentations, including adding text, shapes, images, and rendering D3 charts, Rough.js sketches, and Satori layouts directly into the Figma canvas.
Click on "Deploy 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., "@figma-slides-mcp Create a slide with a D3 bar chart of monthly revenue"
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.
MCP server that lets AI create and edit Figma Slides — with built-in D3, Rough.js, and Satori renderers for charts, diagrams, and custom graphics.
An MCP server that gives AI agents (Claude, Cursor, etc.) direct control over Figma Slides. The AI can create slides, add text, draw shapes, render D3 charts, place images, and screenshot its work — all in real-time, in your actual Figma file.
This is not a design-to-code tool. It goes the other direction: AI → Figma. Your agent designs slides for you.
Related MCP server: figmad-mcp
Your AI Agent ←—stdio—→ MCP Server ←—WebSocket—→ Figma Plugin ←—API—→ Slides CanvasThree pieces:
MCP Server — Node.js process that exposes tools over stdio. Your AI client spawns it.
Figma Plugin — Runs inside Figma, executes commands on the canvas. Connects via WebSocket.
Design Skill (optional) — Teaches the AI how to design well: layout, typography, color, D3 patterns.
Step 1 — Add the marketplace and install:
/plugin marketplace add luan007/figma-slides-mcp
/plugin install figma-slides-mcp@figma-slides-mcpThis clones the repo, loads the MCP server and design skill automatically.
Step 2 — Load the Figma plugin:
Open a Figma Slides file
Plugins → Development → Import plugin from manifest...
Navigate to the cloned plugin directory — check the plugin cache:
~/.claude/plugins/cache/figma-slides-mcp/Find plugin/manifest.json inside and select it.
Run the plugin — green dot = connected
You only import the manifest once. After that it's in your recent plugins.
Step 3 — Go:
Tell Claude: "Start a Figma Slides session"
git clone https://github.com/luan007/figma-slides-mcp.git
cd figma-slides-mcp && npm installAdd to your MCP config:
{
"mcpServers": {
"figma-slides": {
"command": "npx",
"args": ["-y", "figma-slides-mcp"]
}
}
}Then import plugin/manifest.json into Figma (same as Step 2 above, but from your clone directory).
The Figma plugin bundles full graphics libraries. Your AI can use them to render complex visuals directly onto slides.
Renderer | What it does | Text stays editable? |
D3 v7 | Charts, data viz, diagrams, tables | Yes |
Rough.js | Hand-drawn / sketchy style graphics | Yes |
Satori | HTML/CSS → SVG (flexbox layouts) | No (becomes paths) |
SVG import | Icons, logos, custom vectors | Depends |
The AI writes a D3 script, the plugin runs it in a sandboxed iframe, extracts the SVG, and converts it to editable Figma nodes. Text elements become real Figma text — you can edit them after.
Create, duplicate, delete, reorder slides
Add any shape: rectangles, ellipses, lines, frames, text
Style anything: fills, strokes, effects, opacity, corner radius
Set text with per-character styling (font, size, color, spacing)
Render D3 charts, Rough.js sketches, Satori layouts
Place images from URL
Screenshot slides to verify its own work
Batch multiple operations in one call
Search nodes, export to PNG/SVG/PDF
The bundled skill at skills/figma-slides-mcp/SKILL.md teaches the AI:
Layout planning (coordinate grids, column systems)
Typography hierarchy (font sizes, spacing, weight)
Visual design theory (when to use charts vs text, color systems)
D3 patterns (tables, flows, comparisons, Gantt charts, donuts)
The screenshot-verify-fix loop
API gotchas (gradient transforms, fill opacity, batch limits)
It's optional but makes a big difference. Without it, the AI tends to dump text on slides. With it, the AI thinks in layers and designs visually.
Claude Code plugin install includes the skill automatically. For manual setup, copy it to ~/.claude/skills/figma-slides-mcp/.
This is an early-stage project. It works, but has edges.
Single session only. One MCP server → one Figma file at a time. No multi-document support yet.
Port conflict. If another instance is running on port 3055, it fails. Set FIGMA_WS_PORT to use a different port.
Plugin must be running. The Figma plugin needs to be open and connected. If you close it, the MCP server can't reach Figma.
Figma Slides only. Doesn't work with regular Figma Design files. Must be a Slides file.
Tables are limited. createTable works but is Slides-only and can be finicky.
Video is broken. createVideoAsync returns empty. Figma's API limitation.
Satori text is paths. Text rendered through Satori becomes vector paths — not editable as text in Figma. Use D3 instead when text editability matters.
No undo across sessions. The AI's changes are real Figma operations. You can Cmd+Z in Figma, but only within the current session.
Dev plugin, not published. The Figma plugin is loaded from local manifest, not the Figma Community. You need to import it manually once.
Multi-session support (multiple Figma files)
Published Figma Community plugin (no manual manifest import)
Slide templates / presets
Better image search integration
Animation / transition authoring
Variable | Default | Description |
|
| WebSocket port for plugin connection |
figma-slides-mcp/
├── server/ # MCP server (Node.js, no build)
│ ├── index.js # Entry point (stdio transport)
│ ├── bridge.js # WebSocket bridge to plugin
│ ├── tools.js # All MCP tool definitions
│ └── utils.js # Helpers
├── plugin/ # Figma plugin (no build)
│ ├── manifest.json # Import this in Figma
│ ├── code.js # Plugin logic
│ └── ui.html # UI panel + D3/Rough.js/Satori loaders
├── skills/ # AI design skill
│ └── figma-slides-mcp/
│ └── SKILL.md
├── .claude-plugin/ # Claude Code plugin manifest
│ └── plugin.json
├── .mcp.json # MCP server config (auto-loaded by plugin system)
└── test/Zero TypeScript, zero bundlers, zero build steps. Plain JS all the way down.
See AGENT-INSTALL.md for detailed setup instructions, troubleshooting, and the full tool reference.
MIT
Execute multiple commands in one round-trip. Use "$N.field" to reference results from earlier commands (e.g. "$0.nodeId"). All execute as single undo step.
Inputs: commands (required).
Remove all content from a slide, keeping the slide itself.
Inputs: slideId (required).
Duplicate a node, optionally reparenting the clone.
Inputs: nodeId (required), parentId.
Check if the Figma plugin is connected. Does NOT start the server — use start_session first.
Inputs: no named parameters.
Create a GIF node (Slides only, may have limited support)
Inputs: parentId (required), data.
Create a node (FRAME, RECTANGLE, ELLIPSE, POLYGON, STAR, LINE, VECTOR, TEXT) with optional properties. For tables, shapes-with-text, etc., use dedicated tools.
Inputs: type (required), parentId (required), props.
Create a shape with built-in text label (Slides/FigJam). shapeType: SQUARE, ELLIPSE, ROUNDED_RECTANGLE, DIAMOND, TRIANGLE_UP, etc.
Inputs: text (required), parentId (required), props, shapeType.
Create a new empty slide (fixed 1920x1080).
Inputs: fills, themeId, rowIndex.
Create a new slide row in the deck grid
Inputs: index.
Import an SVG string as editable Figma vector nodes. Use for icons, logos, simple graphics. The agent generates the SVG string directly.
Inputs: svg (required), parentId (required), x, y, +2 more.
Create a table (Slides/FigJam only)
Inputs: cols (required), rows (required), parentId (required), cellWidth, +1 more.
Create a video node from URL or bytes (Slides only, MP4/MOV/WebM)
Inputs: parentId (required), x, y, url, +3 more.
Remove a node from the canvas
Inputs: nodeId (required).
Remove a slide from the deck
Inputs: slideId (required).
Remove a slide row and all slides in it
Inputs: rowId (required).
Remove a column from a table
Inputs: index (required), tableId (required).
Remove a row from a table
Inputs: index (required), tableId (required).
Clone a slide with all content
Inputs: slideId (required).
Export any node to PNG, JPG, SVG, or PDF
Inputs: nodeId (required), scale, format.
Search for nodes by name (substring), type, visible, locked. All criteria AND-combined.
Inputs: criteria (required), parentId.
Navigate to a specific slide in the editor
Inputs: slideId (required).
Read text of a table cell
Inputs: col (required), row (required), tableId (required).
Get editor type, document name, and page count from the connected Figma file
Inputs: no named parameters.
List interactive elements on a slide (polls, embeds). Read-only.
Inputs: slideId (required).
Read all or specific properties of a node
Inputs: nodeId (required), properties.
Get structural tree: IDs, types, names, bounds. Use depth to limit recursion.
Inputs: depth, nodeId.
Get currently selected node IDs
Inputs: no named parameters.
Get a rich semantic dump of everything on a slide: text content, shapes, images, positions, styles. Best for understanding what is on a slide before editing.
Inputs: slideId (required).
Get the full slide deck structure: rows and slides with their IDs and names
Inputs: no named parameters.
Read text content and style segments from a text node
Inputs: nodeId (required).
Group multiple nodes together
Inputs: nodeIds (required), parentId.
Insert a column into a table
Inputs: tableId (required), index.
Insert a row into a table
Inputs: tableId (required), index.
Search available fonts. Use query to filter by family name. Without query, returns first 50 families.
Inputs: limit, query.
List available slide themes
Inputs: no named parameters.
Move a slide to a different row
Inputs: rowId (required), slideId (required), index.
Place an image from URL or bytes. Creates a rectangle with IMAGE fill.
Inputs: parentId (required), x, y, url, +4 more.
Render a D3.js visualization as editable Figma vector nodes. PREFERRED for data visualizations, charts, graphs, diagrams.
The script runs in the plugin iframe with full D3 v7 available. Write JS that uses d3 to build SVG in the scratch div. The SVG is auto-extracted and converted to editable Figma nodes.
Available globals: d3, scratch (offscreen div to render into). The script should either return an SVG string or render into scratch (auto-extracted).
IMPORTANT: All text becomes editable Figma text nodes. This is the best renderer for data-driven graphics.
Inputs: script (required), parentId (required), x, y, +2 more.
Render hand-drawn / sketchy style graphics using Rough.js as editable Figma nodes.
Use for: informal diagrams, whiteboard-style visuals, creative/playful graphics. Available: rough (Rough.js), scratch div, plus a pre-created SVG element.
Write JS that uses rough.svg(svg) to draw shapes. They render with a hand-drawn aesthetic (hachure, cross-hatch, zigzag, dots fills).
IMPORTANT: All output is editable vector nodes in Figma.
Inputs: script (required), parentId (required), x, y, +2 more.
Render HTML/CSS layout as editable Figma vector nodes using Satori (Vercel's HTML-to-SVG engine).
Use ONLY when you need complex CSS layouts that are hard to express as SVG — flexbox cards, multi-column layouts, UI components. For data viz, prefer render_d3 instead.
LIMITATIONS:
Text is rendered as vector PATHS, not editable text nodes. Users cannot edit text in Figma.
No CSS gradients (use solid colors instead)
No rgba() (use hex colors)
Requires fetching a font file (adds latency)
Uses JSX-object syntax, not HTML strings
The script runs in the iframe. Use the satori() function with JSX-like objects. Must fetch a font first: fetch Inter WOFF, pass as fonts array.
Available: satori (the render function), scratch div.
Inputs: script (required), parentId (required), x, y, +2 more.
Set the order of slide rows in the deck
Inputs: rowIds (required).
Move a node to a different parent container
Inputs: nodeId (required), parentId (required), index.
Replace media content of a video/image node
Inputs: data (required), nodeId (required).
Capture thumbnails of all slides. Returns array of base64 PNG images.
Inputs: scale, maxSlides.
Capture a visual screenshot of a slide as PNG. Returns base64-encoded image.
Inputs: slideId (required), scale.
Set text of a table cell
Inputs: col (required), row (required), text (required), tableId (required), +1 more.
Modify properties of any node. Supports x, y, width, height, rotation, fills, strokes, strokeWeight, effects, opacity, blendMode, cornerRadius, visible, locked, layoutMode, itemSpacing, padding.
Inputs: props (required), nodeId (required).
Select specific nodes
Inputs: nodeIds (required).
Mark slide as skipped in presentation
Inputs: slideId (required), isSkipped (required).
Switch between grid and single-slide view
Inputs: mode (required).
Apply a theme to a slide
Inputs: slideId (required), themeId (required).
Set transition: DISSOLVE, SLIDE_FROM_LEFT/RIGHT/TOP/BOTTOM, PUSH_FROM_*, SMART_ANIMATE, NONE
Inputs: style (required), slideId (required), curve, timing, +1 more.
Set text content of a text node. Font loading is automatic.
Inputs: text (required), nodeId (required), fontName.
Apply styles to a character range: fontSize, fontName, fills, letterSpacing, lineHeight, textDecoration, textCase
Inputs: end (required), props (required), start (required), nodeId (required).
Set editor viewport center and zoom
Inputs: zoom, center.
Start the WebSocket server and wait for the Figma plugin to connect. Call this when the user says "start figma session", "connect to figma", or "open slides". Returns connection status and instructions if not yet connected.
Inputs: no named parameters.
Ungroup a group node, returning children to parent
Inputs: nodeId (required).
Zoom to fit specific nodes or all content
Inputs: nodeIds.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 58 tools
Most tools have clearly distinct purposes, with each targeting a specific resource or action. Some overlap exists between creation tools (create_node, create_table, render_svg, render_d3, etc.), but descriptions clarify intended use cases.
The vast majority follow a verb_noun pattern (e.g., create_slide, delete_node, set_text). A few outliers like batch_operations, connection_status, and render_d3 use nouns or library names, causing minor inconsistency.
58 tools is an extreme number for an MCP server, far beyond the typical well-scoped range. While the domain is complex, this many tools creates a heavy surface area that is difficult for agents to navigate efficiently.
The toolset provides comprehensive coverage of slide lifecycle, node manipulation, text, tables, media, rendering, viewport, selection, and export. No significant gaps are apparent, and the inclusion of batch operations and session management rounds out the surface.
Agent-Native Google Slides - generate and edit React presentations
Give your AI agents a design superpower. Generate, edit, and publish publication-grade decks, reports, landing pages, resumes, and marketing visuals directly within your agent workflow. Delivering frontier-level design quality at 3× the speed and 53× lower cost -from conversational prompt to live link or vector PDF in minutes.
Build decks in your own brand, from the AI agent you already use. Then edit them yourself.
Write, compile and share Typst documents (papers, slides, drawings) from any AI agent.
