MCP.so
Sign In
F

Figma

@ihiteshsharma

Repository

About Figma

No overview available yet

#figma#design-tool#ai-assistant

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "figma": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "-p",
        "9000:9000",
        "--rm",
        "mcp/hs-figma"
      ],
      "env": {
        "NODE_ENV": "production",
        "WEBSOCKET_MODE": "true",
        "WS_PORT": "9000"
      }
    }
  }
}

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

What is Figma?

The Figma MCP server connects Claude with Figma, enabling Claude to create and edit designs directly in the Figma desktop app. It is for designers and developers who want to generate or modify Figma designs using natural language prompts.

How to use Figma?

Install the Figma plugin (Plugins > Development > Import plugin from manifest, selecting figma-plugin/manifest.json). Then edit the Claude desktop configuration file (claude_desktop_config.json) to add the Docker-based server command. Finally, open Claude and ask it to create or edit designs in Figma—for example, “Create a login screen in Figma.”

Key features of Figma

  • Creates rectangles, circles, text, and frames
  • Designs buttons, cards, and UI components
  • Arranges layouts for web pages and apps
  • Styles elements with colors, shadows, and effects
  • Exports designs as images

Use cases of Figma

  • Generate a login screen or sign‑up form in Figma
  • Build a landing page layout with header, hero, and footer
  • Design individual UI components like profile cards and navigation buttons
  • Edit existing Figma designs by giving descriptive instructions

FAQ from Figma

What are the prerequisites for running the Figma server?

Node.js (>=16), npm, Docker, and the Figma Desktop app are required for the technical setup.

How do I connect Claude to Figma?

Install the Figma plugin from the repository, then add the Docker container configuration to your Claude desktop config file. The server runs automatically when Claude starts.

What can I create with this tool?

You can create rectangles, circles, text, frames, buttons, cards, complete wireframes, and page layouts, and apply styling like colors, shadows, and effects.

What should I do if Claude cannot connect to Figma?

Ensure the Figma plugin is running, the Claude configuration file is correctly set up, and restart both Claude and Figma if needed.

Is Docker required to use the Figma server?

Yes. The server is distributed as a Docker image, and the recommended setup runs it with the command docker run -i -p 9000:9000 --rm mcp/hs-figma.

Frequently asked questions

What are the prerequisites for running the Figma server?

Node.js (>=16), npm, Docker, and the Figma Desktop app are required for the technical setup.

How do I connect Claude to Figma?

Install the Figma plugin from the repository, then add the Docker container configuration to your Claude desktop config file. The server runs automatically when Claude starts.

What can I create with this tool?

You can create rectangles, circles, text, frames, buttons, cards, complete wireframes, and page layouts, and apply styling like colors, shadows, and effects.

What should I do if Claude cannot connect to Figma?

Ensure the Figma plugin is running, the Claude configuration file is correctly set up, and restart both Claude and Figma if needed.

Is Docker required to use the Figma server?

Yes. The server is distributed as a Docker image, and the recommended setup runs it with the command `docker run -i -p 9000:9000 --rm mcp/hs-figma`.

Comments

Basic information

Category

Media & Design

Transports

stdio

Author

ihiteshsharma

Submitted by

Hitesh Sharma

More Media & Design MCP servers

Vibe Design System

mondaycom

🎨 Vibe Design System - Official monday.com UI resources for application development in React.js

657

YouTube Transcript MCP Server

jkawamoto

MCP server retrieving transcripts of YouTube videos

418

Weather API MCP Server

TuanKiri

A lightweight Model Context Protocol (MCP) server that enables AI assistants like Claude to retrieve and interpret real-time weather data. Discuss on Hacker News:

247

Photoshop MCP Server

loonghao

A Model Context Protocol (MCP) server that interfaces with Adobe Photoshop's Python API. Enables LLMs to execute image editing operations, automate workflows, and manage Photoshop tasks through structured commands and context-aware interactions.

275

RustChain MCP

Scottcjn

MCP server for RustChain blockchain and BoTTube video platform — AI agent tools for earning RTC tokens. Built on createkr's RustChain SDK.

99