Skip to main content
Glama
Sign In
enesjakozh

Figma MCP Server

by xxflux
npmGitHub
JavaScript
647
2
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Integrations

  • The MCP server is built with Bun, providing the runtime environment for the server implementation.

  • Provides tools for creating and modifying Figma designs through natural language prompts, including capabilities to create basic design elements, design complete page layouts, and modify existing designs.

  • The server is implemented in TypeScript, providing type safety and modern language features for the implementation.

Figma MCP (Model Context Protocol)

A complete solution for creating and modifying Figma designs through Cursor Agent using the Model Context Protocol.

Blog: https://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/

Overview

This project enables AI-powered design creation in Figma using natural language prompts through Cursor Agent. It consists of two main components:

  1. MCP Server: A Bun + TypeScript server that implements the Model Context Protocol and communicates with the Figma plugin via WebSockets.
  2. Figma Plugin: A plugin that runs in Figma and executes design operations based on instructions from the MCP server.

With this integration, you can use natural language to:

  • Create basic design elements (shapes, text, etc.)
  • Design complete page layouts with multiple sections
  • Modify existing designs

Repository Structure

  • figma-mcp-server/: The MCP server implementation
  • figma-plugin/: The Figma plugin for executing design operations

Quick Start

1. Set up the MCP Server

cd figma-mcp-server cp .env.example .env # Edit this file to add your Figma token bun install bun run index.ts

2. Set up the Figma Plugin

cd figma-plugin npm install npm run build

Then import the plugin into Figma:

  1. Open Figma
  2. Go to Plugins > Development > Import plugin from manifest
  3. Select the figma-plugin/manifest.json file

3. Connect to Cursor Agent

In Cursor:

  1. Go to Settings > Agent > MCP Servers
  2. Add a new server with URL: http://localhost:3000/api/mcp/schema

Detailed Documentation

For more detailed instructions, see:

Example Usage

Once everything is set up, you can use Cursor Agent to create designs with prompts like:

Create a landing page with a header, hero section with heading "Our Product" and subheading "The best solution for your needs", 3 features in the features section, and a footer with contact information.

How It Works

  1. Cursor Agent receives a natural language prompt
  2. It sends a structured MCP request to the MCP server
  3. The MCP server processes the request and sends instructions to the Figma plugin via WebSocket
  4. The Figma plugin executes the design operations in Figma

License

MIT

You must be authenticated.

A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

A TypeScript server that implements the Model Context Protocol, enabling AI-powered design creation in Figma using natural language prompts through Cursor Agent.

  1. Overview
    1. Repository Structure
      1. Quick Start
        1. 1. Set up the MCP Server
        2. 2. Set up the Figma Plugin
        3. 3. Connect to Cursor Agent
      2. Detailed Documentation
        1. Example Usage
          1. How It Works
            1. License

              Related MCP Servers

              • Talk to Figma MCP

                sonnylazuardi
                A
                security
                A
                license
                A
                quality
                An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
                Last updated -
                19
                5,185
                3,528
                JavaScript
                MIT License
                • Apple
                • Linux

              • Cursor Talk To Figma MCP

                toiletmadarchut
                A
                security
                F
                license
                A
                quality
                Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
                Last updated -
                19
                5,185
                1
                JavaScript

              • Talk to Figma MCP

                yhc984
                -
                security
                F
                license
                -
                quality
                Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
                Last updated -
                TypeScript

              • Figma MCP Server

                1yhy
                -
                security
                A
                license
                -
                quality
                A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
                Last updated -
                124
                6
                TypeScript
                MIT License
                • Linux
                • Apple

              View all related MCP servers

              Appeared in Searches

              New MCP Servers

              ID: u62chj6z0c