DOCSEARCHbyAlgolia
Submit Docs

Figma Console MCP

repository·main·Indexed 24 days ago

https://github.com/southleft/figma-console-mcp

A Model Context Protocol (MCP) server that provides AI assistants with programmatic access to Figma for design system extraction, bidirectional token synchronization, and automated accessibility audits. It supports Local mode via a WebSocket Desktop Bridge plugin for clients like Claude Desktop and Cursor, and Cloud mode via Cloudflare Workers for web-based clients like Claude.ai and v0. Key features include access to design tokens, variables, components, version history diffs, and FigJam/Slides support.

Tokens
69.6K
Snippets
135
Records
322
Agent score
83%

What's inside figma-console-mcp

  1. What is Figma Console MCP?

    main
    Figma Console MCP is a Model Context Protocol (MCP) server that connects AI assistants (like Claude, Cursor, or GitHub Copilot) to Figma. It transforms static design files into a queryable API, allowing AI to extract design tokens, sync variables with code, create UI components directly in Figma, and perform accessibility audits.

  2. What is Figma Console MCP Server?

    main

    Figma Console MCP is a Model Context Protocol (MCP) server that acts as a bridge between AI assistants (such as Claude) and Figma. It transforms your design system into an API, allowing AI agents to perform design extraction, creation, debugging, and bidirectional token synchronization.

    Key capabilities include:

    • Design System Extraction: Pull variables, components, and styles.
    • Bidirectional Token Sync: Export Figma variables to various formats (DTCG JSON, etc.) and push code-side edits back to Figma (creating, renaming, aliasing, and gated deletes).
    • Design Creation: Programmatically create UI components, frames, layouts, and component sets.
    • Variable & Token Management: Create, update, rename, and delete design tokens.
    • Visual Debugging & Monitoring: Take screenshots and watch real-time console logs from the Desktop Bridge plugin.
    • Version History: List versions, generate changelogs, and trace property changes.
    • FigJam & Slides: Create stickies, flowcharts, and manage Figma Slides decks.
    • Accessibility & Audits: Perform WCAG design checks and design-system health audits (naming, tokens, consistency, etc.).
    • Cloud Write Relay: Enables web-based AI clients (Claude.ai, v0, Replit) to design in Figma via cloud pairing.

  3. Overview of Figma Console MCP Capabilities

    main

    Figma Console MCP is a Model Context Protocol (MCP) server that turns your Figma design system into a queryable and programmable API. It allows AI assistants to interact with Figma files for several core workflows:

    • Design System Extraction: Export variables, styles, and components as structured data (CSS, Tailwind, JSON, etc.).
    • Token Sync: Bidirectional synchronization between Figma and your codebase.
    • Design Creation: Programmatically build components, variant sets, and FigJam boards.
    • Audit & Health: Run accessibility scans (WCAG) and design system health audits.
    • Plugin Debugging: Capture real-time console logs and screenshots from Figma plugins.
    • Visual Context: Provide AI with visual references and component specs for better implementation guidance.

  4. Overview of FigJam Support

    main
    Figma Console MCP extends AI capabilities to FigJam, Figma's collaborative whiteboarding tool. Unlike read-only integrations, this allows AI agents to programmatically create and read content on FigJam boards. This includes creating sticky notes, building flowcharts, generating tables, sharing code snippets, and organizing layouts. The integration is context-aware: the FigJam tools automatically become available when the Desktop Bridge plugin is running inside a FigJam board.

  5. Overview of Figma Slides support

    main

    Figma Console MCP extends support to Figma Slides, allowing AI agents to programmatically manage entire presentations. This is a full-write integration, meaning AI assistants can create slides, set transitions, reorder decks, add content (text and shapes), and control presentation flow.

    Key Capabilities:

    • Slide Management: Create, duplicate, delete, and reorder slides.
    • Content Creation: Place text and shapes directly onto slides.
    • Transitions: Apply 22 transition styles with configurable easing and duration.
    • Navigation: Switch between grid and single-slide views, and navigate to specific slides.
    • Analysis: Read slide content (text, shapes, frames) and the 2D grid layout for auditing or summarizing.

  6. Overview of Figma MCP Tools and Modes

    main

    The Figma MCP server provides a wide array of tools categorized by functionality. The available tools and their capabilities depend on the connection mode:

    • Local Mode (NPX/Git): Provides 113 tools with full read/write capabilities and real-time monitoring. This mode requires the Figma Desktop Bridge plugin to be running in your Figma file.
    • Remote Mode: Provides 9 read-only tools by default.
    • Cloud Mode (Web AI Clients): Provides 101 tools (including full write access) when paired with the Desktop Bridge plugin via Cloud Relay.

    Tools are categorized into functional groups such as Navigation, Console, Debugging, Design System, Token Sync, Design Creation, Slots, Components, Variables, and more.

  7. Understand the security model for Local and Cloud modes

    main

    The Desktop Bridge operates in two distinct security modes:

    Local Mode

    • Scope: Network access is limited to localhost only.
    • Data Privacy: Design data never leaves your local machine.
    • Authentication: The WebSocket bridge is unauthenticated but relies on localhost binding for security. Warning: Do not expose the WebSocket port outside localhost (e.g., via port forwarding) on untrusted machines.

    Cloud Mode

    • Transport: Uses TLS (wss://) for all traffic.
    • Authentication: Uses single-use pairing codes that expire after 5 minutes.
    • Data Handling: Each relay Durable Object is scoped per session. The relay passes commands through without storing design data persistently.

    General Security

    • Uses standard Figma Plugin API (no unofficial APIs).
    • Component requests are strictly scoped to the current file.

  8. Security of the `figma_execute` tool

    main

    The figma_execute tool runs JavaScript within Figma's plugin sandbox. It is isolated from your system and has the following limitations:

    Sandbox Restrictions:

    • No filesystem access.
    • No network access outside of Figma's plugin APIs.
    • Cannot access other browser tabs or system resources.
    • Can only modify the currently open Figma file.

    Mitigations:

    • Execution is user-initiated.
    • All changes are covered by Figma's version history.

  9. Configure Figma Slides transitions

    main

    The transition system allows full control over how slides enter during a presentation. You can configure the Style, Easing, and Duration.

    22 Transition Styles:

    • Basic: NONE, DISSOLVE, SMART_ANIMATE (best for shared elements)
    • Slide In: SLIDE_FROM_LEFT, SLIDE_FROM_RIGHT, SLIDE_FROM_TOP, SLIDE_FROM_BOTTOM
    • Push: PUSH_FROM_LEFT, PUSH_FROM_RIGHT, PUSH_FROM_TOP, PUSH_FROM_BOTTOM
    • Move In: MOVE_FROM_LEFT, MOVE_FROM_RIGHT, MOVE_FROM_TOP, MOVE_FROM_BOTTOM
    • Slide Out: SLIDE_OUT_TO_LEFT, SLIDE_OUT_TO_RIGHT, SLIDE_OUT_TO_TOP, SLIDE_OUT_TO_BOTTOM
    • Move Out: MOVE_OUT_TO_LEFT, MOVE_OUT_TO_RIGHT, MOVE_OUT_TO_TOP, MOVE_OUT_TO_BOTTOM

    8 Easing Curves: LINEAR, EASE_IN, EASE_OUT, EASE_IN_AND_OUT, GENTLE, QUICK, BOUNCY, SLOW

    Duration: Configurable from 0.01 to 10 seconds.

    Tip: DISSOLVE with EASE_IN_AND_OUT at 0.5s is a recommended clean default.

  10. How Local and Cloud MCP modes work

    main

    The Figma Desktop Bridge supports two distinct connection modes to enable AI assistants to interact with your Figma files.

    Local MCP Bridge

    Used by local AI clients like Claude Code, Claude Desktop, or Cursor.

    • Connection: The plugin connects to a local MCP server via WebSockets on localhost.
    • Ports: The server uses ports 9223–9232. If 9223 is occupied, it automatically falls back to the next available port in the range. The plugin scans all these ports and connects to every active server it finds.
    • Path: MCP Server ←WebSocket (ports 9223–9232)→ Plugin UI ←postMessage→ Plugin Worker → Figma API

    Cloud Relay Bridge (Cloud Mode)

    Used by web-based AI clients like Claude.ai, v0, Replit, or Lovable.

    • Connection: The plugin connects to a Cloudflare Durable Object relay via WebSockets (wss://).
    • Pairing: Connection is established using a one-time 6-character pairing code generated by the AI client.
    • Path: Cloud MCP Server → Relay DO ←WebSocket (wss://)← Plugin UI ←postMessage→ Plugin Worker → Figma API

    Note: You can run both Local and Cloud modes simultaneously.

  11. How MCP Apps work

    main

    MCP Apps are interactive UI panels that render directly inside an AI assistant using the ext-apps protocol extension. They allow users to interact with data (search, filter, click-to-copy) rather than just reading plain text.

    Key Components:

    • Server-side tools: Registered with the MCP server to handle data fetching.
    • App-only tools: Hidden from the AI model; they are only callable directly from the UI.
    • Resource URIs: Point the host (AI assistant) to the specific HTML application to render.
    • App SDK (@modelcontextprotocol/ext-apps): Manages the application lifecycle, theming, and communication between the UI and the server.

  12. Understand the Console Log Buffer and Screenshot formats

    main

    The Figma Console MCP server captures data from the Desktop Bridge plugin's QuickJS sandbox using the following technical specifications:

    Console Log Buffer

    • Size: 1000 logs (managed as a circular buffer).
    • Capture Method: Real-time via WebSocket.
    • Source Identification: Logs originating from the plugin's console.log, console.warn, console.error, console.info, or console.debug calls are tagged with source: figma.

    Screenshot Format

    • File Formats: Supports PNG (lossless) and JPEG (with quality control).
    • Transmission: Encoded as Base64 for easy transport.
    • Targeting: Screenshots are captured for specific node IDs using the Figma Plugin API method figma.getNodeByIdAsync.