figma-console-mcp-with-slides

v1.0.2

Published

a month ago

MCP server for Figma — console logs, design tools, and Figma Slides support

0High
0Medium
0Low

tonihaidamous

mcp figma figma-slides slides presentations plugin console debugging ai anthropic claude cloudflare workers

Figma Console MCP — with Slides Support

Your design system as an API — now with Figma Slides. Model Context Protocol server that bridges design and development, giving AI assistants complete access to Figma for extraction, creation, debugging, and presentations.

This is a fork of southleft/figma-console-mcp that adds full support for Figma Slides — Figma's presentation product.

What's New: Figma Slides Support

This fork adds 15 new MCP tools for working with Figma Slides presentations:

| Tool | Description | |------|-------------| | figma_list_slides | List all slides with IDs, names, positions, skip status | | figma_get_slide_content | Get full node tree of a slide | | figma_create_slide | Create a new blank slide | | figma_delete_slide | Delete a slide | | figma_duplicate_slide | Clone a slide | | figma_get_slide_grid | Get 2D grid layout | | figma_reorder_slides | Reorder via new grid | | figma_set_slide_transition | Set transition effect (dissolve, push, slide, smart animate, etc.) | | figma_get_slide_transition | Read transition settings | | figma_set_slides_view_mode | Toggle grid/single-slide view | | figma_get_focused_slide | Get currently focused slide | | figma_focus_slide | Navigate to a specific slide | | figma_skip_slide | Toggle skip in presentation mode | | figma_add_text_to_slide | Add text element to a slide | | figma_add_shape_to_slide | Add rectangle/ellipse to a slide |

Plus all 56+ existing tools from the original project for design files — variables, components, styles, console debugging, screenshots, and more.

Quick Start

Prerequisites

Node.js 18+ — Check with node --version (Download)
Figma Desktop installed (not the web app)
An MCP client — Claude Code, Claude Desktop, Cursor, Windsurf, etc.

Step 1: Get Your Figma Token

Go to figma.com/developers/api#access-tokens
Click "Get personal access token"
Copy the token (starts with figd_)

Step 2: Configure Your MCP Client

Claude Code (CLI):

claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp-with-slides

Claude Desktop / Cursor / Windsurf:

Add to your MCP config file:

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp-with-slides"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Where to Find Your Config File

| App | macOS | Windows | |-----|-------|---------| | Claude Desktop | ~/Library/Application Support/Claude/claude_desktop_config.json | %APPDATA%\Claude\claude_desktop_config.json | | Claude Code | ~/.claude.json | %USERPROFILE%\.claude.json | | Cursor | ~/.cursor/mcp.json | %USERPROFILE%\.cursor\mcp.json | | Windsurf | ~/.codeium/windsurf/mcp_config.json | %USERPROFILE%\.codeium\windsurf\mcp_config.json |

Step 3: Connect the Desktop Bridge Plugin

Open Figma Desktop
Go to Plugins → Development → Import plugin from manifest...
Navigate to the figma-desktop-bridge/manifest.json inside the package directory
Run the plugin in your Figma file — it auto-connects via WebSocket

For Slides: Open a Figma Slides file and run the plugin there. The bridge now supports both Design and Slides editor types.

Finding the plugin manifest with npx:

# Find where npm installed the package
npm root -g
# Then look for: figma-console-mcp-with-slides/figma-desktop-bridge/manifest.json

Step 4: Restart Your MCP Client

Restart Claude Desktop (or your MCP client) to load the new configuration.

Step 5: Test It

Test connection:

Check Figma status

Test Slides (in a Slides file):

List all slides in my presentation

Test Design (in a Design file):

Create a simple frame with a blue background

Example Prompts for Slides

List all slides in my presentation

Create a new slide and add a title "Q3 Revenue" at the top center with font size 48

Set a dissolve transition on all slides with 0.5 second duration

Add a blue rectangle background to the first slide

Duplicate slide 3 and move it to the end

Skip slides 2 and 4 from the presentation

Show me the slide grid layout

All Available Tools

Slides (New)

figma_list_slides — List all slides
figma_get_slide_content — Get slide node tree
figma_create_slide — Create new slide
figma_delete_slide — Delete a slide
figma_duplicate_slide — Clone a slide
figma_get_slide_grid — Get grid layout
figma_reorder_slides — Reorder slides
figma_set_slide_transition — Set transition
figma_get_slide_transition — Get transition
figma_set_slides_view_mode — Toggle view mode
figma_get_focused_slide — Get focused slide
figma_focus_slide — Focus a slide
figma_skip_slide — Toggle skip
figma_add_text_to_slide — Add text
figma_add_shape_to_slide — Add shape

Navigation & Status

figma_navigate — Open Figma URLs
figma_get_status — Check connection status

Console Debugging

figma_get_console_logs — Retrieve console logs
figma_watch_console — Real-time log streaming
figma_clear_console — Clear log buffer
figma_reload_plugin — Reload current page

Visual Debugging

figma_take_screenshot — Capture screenshots

Design System Extraction

figma_get_variables — Extract design tokens/variables
figma_get_component — Get component data
figma_get_component_for_development — Component + image for code gen
figma_get_component_image — Render component as image
figma_get_styles — Color, text, effect styles
figma_get_file_data — Full file structure
figma_get_file_for_plugin — Optimized file data for plugins

Design Creation

figma_execute — Run any Figma Plugin API code
figma_arrange_component_set — Organize variants
figma_set_description — Document components

Design-Code Parity

figma_check_design_parity — Compare Figma vs code
figma_generate_component_doc — Generate component docs

Variable Management

figma_create_variable_collection — Create collections
figma_create_variable — Create variables
figma_update_variable — Update values
figma_rename_variable — Rename variables
figma_delete_variable — Delete variables
figma_delete_variable_collection — Delete collections
figma_add_mode — Add modes
figma_rename_mode — Rename modes
figma_batch_create_variables — Batch create (up to 100)
figma_batch_update_variables — Batch update (up to 100)
figma_setup_design_tokens — Create complete token system

Node Manipulation

figma_resize_node — Resize nodes
figma_move_node — Move nodes
figma_set_fills — Set fill colors
figma_set_strokes — Set strokes
figma_clone_node — Duplicate nodes
figma_delete_node — Delete nodes
figma_rename_node — Rename nodes
figma_set_text — Set text content
figma_create_child — Create child nodes

Comments

figma_get_comments — Get file comments
figma_post_comment — Post comments
figma_delete_comment — Delete comments

Desktop Bridge Plugin

The Desktop Bridge plugin connects Figma Desktop to the MCP server via WebSocket. It supports:

Figma Design files — full access to components, variables, styles
Figma Slides files — full access to slides, transitions, content
Figma Dev Mode — inspect mode support

The plugin auto-connects by scanning ports 9223–9232, supporting multiple simultaneous MCP server instances.

Differences from the Original

This package (figma-console-mcp-with-slides) is a fork of figma-console-mcp with the following additions:

15 Figma Slides tools — Full CRUD for slides, transitions, content, and navigation
Updated Desktop Bridge plugin — editorType includes "slides" so the plugin loads in Slides files
Editor-type guards — Plugin startup gracefully handles the absence of Variables and Components APIs in Slides context

All other features from the original package are preserved and work identically.

Development

git clone https://github.com/Tonihaydamous/figma-console-mcp-with-slides.git
cd figma-console-mcp-with-slides
npm install
npm run build:local

Configure your MCP client to point at the local build:

{
  "mcpServers": {
    "figma-console": {
      "command": "node",
      "args": ["/absolute/path/to/figma-console-mcp-with-slides/dist/local.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

License

MIT — See LICENSE file for details.