@strand-ai/figma-slides-mcp
v1.0.0
Published
MCP server that bridges Claude Code and Figma Slides via a Figma plugin
Maintainers
Readme
@strand-ai/figma-slides-mcp
MCP server for controlling Figma Slides — create, edit, and screenshot slides from any AI assistant that supports MCP.
How It Works
AI Assistant ←MCP→ MCP Server ←WebSocket :3055→ Figma Plugin ←Plugin API→ Figma SlidesThe MCP server communicates with a Figma plugin running inside your Figma Slides file. The plugin executes JavaScript in the Figma plugin sandbox and returns results.
Prerequisites
- Node.js 18+
- A Figma account with access to Figma Slides
Setup
1. Connect to your MCP client
claude mcp add figma-slides -- npx @strand-ai/figma-slides-mcpOr add to your project's .mcp.json:
{
"mcpServers": {
"figma-slides": {
"command": "npx",
"args": ["@strand-ai/figma-slides-mcp"]
}
}
}code --add-mcp '{"name":"figma-slides","command":"npx","args":["@strand-ai/figma-slides-mcp"]}'Add to ~/.cursor/mcp.json:
{
"mcpServers": {
"figma-slides": {
"command": "npx",
"args": ["@strand-ai/figma-slides-mcp"]
}
}
}Any MCP-compatible client can use @strand-ai/figma-slides-mcp:
{
"mcpServers": {
"figma-slides": {
"command": "npx",
"args": ["@strand-ai/figma-slides-mcp"]
}
}
}2. Load the Figma plugin
- Download the latest plugin release and unzip it
- In Figma, open a Slides file
- Go to Plugins > Development > Import plugin from manifest...
- Select the
manifest.jsonfrom the unzipped folder - Run the plugin — it connects to the MCP server via WebSocket on port 3055
MCP Tools
execute
Run JavaScript in the Figma plugin sandbox. Has access to the full figma Plugin API plus these helpers:
| Helper | Description |
|--------|-------------|
| getSlide(index?) | Get a slide by 0-based index (defaults to current slide) |
| findSlides() | Get all slides in the presentation |
| serialize(node?) | Serialize a node (or the whole page) to a JSON summary |
| loadFont(family, style?) | Load a font before setting text (style defaults to "Regular") |
screenshot_slide
Export a slide as PNG and return it as a base64 image.
Development
git clone https://github.com/Strand-AI/@strand-ai/figma-slides-mcp.git
cd @strand-ai/figma-slides-mcp
npm install
npm run build:mcp # Build MCP server + Figma plugin
npm run dev:mcp # Watch mode for MCP buildsLicense
MIT — see LICENSE.
