@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 Slides

The 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 Code

claude mcp add figma-slides -- npx @strand-ai/figma-slides-mcp

Or add to your project's .mcp.json:

{
  "mcpServers": {
    "figma-slides": {
      "command": "npx",
      "args": ["@strand-ai/figma-slides-mcp"]
    }
  }
}

VS Code

code --add-mcp '{"name":"figma-slides","command":"npx","args":["@strand-ai/figma-slides-mcp"]}'

Cursor

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "figma-slides": {
      "command": "npx",
      "args": ["@strand-ai/figma-slides-mcp"]
    }
  }
}

Claude Desktop / Other MCP Clients

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

Note: importing a local plugin requires the Figma desktop app — the browser Plugins menu only lists published plugins.

1. Get the plugin files. They ship inside the npm package, so either:
   • npm pack @strand-ai/figma-slides-mcp and unpack it — the plugin is at package/mcp/dist/figma-plugin/, or
   • clone this repo and run npm install && npm run build:mcp, which writes mcp/dist/figma-plugin/
2. In the Figma desktop app, open a Slides file
3. Go to Plugins > Development > Import plugin from manifest...
4. Select manifest.json from that figma-plugin folder
5. Run the plugin (Claude Code Slides) — 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/figma-slides-mcp.git
cd figma-slides-mcp
npm install
npm run build:mcp    # Build MCP server + Figma plugin
npm run dev:mcp      # Watch mode for MCP builds

License

MIT — see LICENSE.