Figma Dev Mode MCP Server

What is this?

The Figma Dev Mode MCP Server connects Figma’s Dev Mode environment directly into AI agent and developer workflows using the Model Context Protocol. It gives agents and tools real-time access to design assets, component hierarchies, UX metadata, and code specifications from live Figma files. By offering resources, tools, and prompts over standard MCP endpoints, it makes design-to-code integration seamless and efficient.

Whether you need to generate CSS-in-JS code, extract layout constraints, audit accessibility, or subscribe to design changes, the server’s unified interface and role-based access controls have you covered. With built-in hooks, webhooks, and an extensible SDK, you can automate documentation, onboarding bots, and CI/CD pipelines with live design context at your fingertips.

Quick Start

Install the server using npm:

npm install @figma/mcp-server-devmode

Then add it to your MCP client configuration:

{
  "mcpServers": {
    "figma-mcp-server-devmode": {
      "command": "npx",
      "args": ["-y", "@figma/mcp-server-devmode"],
      "env": {
        "API_KEY": "your-api-key-here"
      }
    }
  }
}

Key Features

Real-time synchronization: Agents always have up-to-date design frames, components, styles, and metadata from Figma Dev Mode.

Unified MCP interface: Conformant endpoints for resources, tools, and prompts that streamline integration into developer and AI workflows.

Extensible workflows and access controls: Supports webhooks, change hooks, and role-based access (RBAC), enabling automated, secure design-driven pipelines.

Example Usage

Imagine you have an AI agent that needs to generate React components based on your design system. With the Figma Dev Mode MCP Server, you can call the extractCodeSpecs tool directly to retrieve a CSS-in-JS skeleton ready for production.

// Example code
import { MCPClient } from "mcp-client-sdk";

async function generateComponent(componentId) {
  const client = new MCPClient({
    baseUrl: "http://localhost:4000/mcp",
    apiKey: "your-api-key-here"
  });

  const spec = await client.callTool("extractCodeSpecs", {
    resourceId: componentId,
    framework: "react",
    options: { useStyledComponents: true }
  });

  console.log("Generated code:\n", spec.code);
}

This code connects to the local MCP server, invokes the extractCodeSpecs tool for a given component ID, and logs the generated React code using styled-components.

Configuration

The server accepts the following environment variables:

API_KEY – Your API key for authenticating requests to the MCP server.

FIGMA_TOKEN (optional) – Your Figma personal access token for Dev Mode API access.

Available Tools/Resources

Resources: Retrieve live Figma assets (frames, components, styles, tokens) and their metadata via the /mcp/resources endpoint.

extractCodeSpecs: Generate framework-specific component skeleton code (React, SwiftUI, CSS-in-JS) based on Figma layout and style information.

Who Should Use This?

This server is perfect for:

Front-end developers: Automate component code generation and ensure UI code stays in sync with live designs.

AI-driven workflows: Supply real-time design context to LLMs for advanced code synthesis, documentation, and analysis.

CI/CD teams: Integrate design validation and accessibility audits into build pipelines with live Figma data.

Conclusion

The Figma Dev Mode MCP Server brings live design context into your development and AI workflows, making design-to-code automation effortless. Get started today by installing the package, configuring your Figma credentials, and exploring the resources, tools, and prompts it offers. Happy building!

Check out the GitHub repository for more information and to contribute.