mcpField
F
Figma

Figma

Local
github.com/ihiteshsharmaMedia & Design4Updated 82w ago
Repository

About Figma

Figma MCP Server connects Claude to Figma through a Figma plugin, enabling design creation and editing from instructions. It supports wireframes, UI elements, layout styling, and image export.

Key features

  1. 01Create shapes, text, and frames
  2. 02Build UI components
  3. 03Arrange page and app layouts
  4. 04Apply colors, shadows, and effects
  5. 05Export designs as images

Use cases

  1. 01Generate a Figma app homepage from a description
  2. 02Edit UI components through instructions

MCP support

The MCP server connects Claude to Figma through a Figma plugin, allowing Claude to create and edit designs in Figma.

#figma#design-tool#ai-assistant

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "figma-mcp-server-ihiteshsharma": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e",
        "NODE_ENV",
        "-e",
        "WEBSOCKET_MODE",
        "-e",
        "WS_PORT",
        "mcp/hs-figma"
      ],
      "env": {
        "NODE_ENV": "<NODE_ENV>",
        "WEBSOCKET_MODE": "<WEBSOCKET_MODE>",
        "WS_PORT": "<WS_PORT>"
      }
    }
  }
}
Run commanddocker run -i --rm -e NODE_ENV -e WEBSOCKET_MODE -e WS_PORT mcp/hs-figma
Environment variables to set
NODE_ENV
WEBSOCKET_MODE
WS_PORT

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
ocimcp/hs-figma

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

Figma MCP Server

A tool that lets Claude create and edit designs directly in Figma.

What This Does

This tool connects Claude with Figma, allowing you to:

  • Create new Figma designs by describing them to Claude
  • Edit existing Figma designs with simple instructions
  • Generate complete wireframes and UI elements
  • Export your designs

How It Works

  1. Claude: Understands your design requests
  2. Figma Plugin: Creates the designs in Figma
  3. Server: Connects Claude to Figma (runs automatically)

Quick Start Guide

For Users

  1. Install the Figma Plugin:

    • Open Figma Desktop app
    • Go to Plugins > Development > Import plugin from manifest
    • Select the figma-plugin/manifest.json file from this project

  2. Configure Figma MCP Server in Claude config:

    • Check where MCP Config json is located on your system. This may depend on your operating system.
    • Edit ~/Library/Application Support/Claude/claude_desktop_config.json:
    {
  "mcpServers": {
      "figma": {
      "command": "docker",
         "args": [
            "run",
            "-i",
            "-p",
            "9000:9000",
            "--rm",
            "mcp/hs-figma"
         ],
         "env": {
            "NODE_ENV": "production",
            "WEBSOCKET_MODE": "true",
            "WS_PORT": "9000"
         }
      }
  }
}

  3. Use with Claude:

    • Open Claude
    • The Figma tool should appear in Claude's tools menu
    • Ask Claude to create designs in Figma, like:
      • "Create a login screen in Figma"
      • "Design a blue button with rounded corners in Figma"
      • "Make a simple landing page layout in Figma"
For Technical Setup (IT/Developers)
Click to expand technical setup instructions
Prerequisites
  • Node.js (>= 16)
  • npm
  • Docker (installed on the machine running Claude)
  • Figma Desktop app
Installation

  1. Clone and Install:

    git clone <repository-url>
cd figma-mcp-server
npm install

  2. Build:

    npm run build
npm run build:figma-plugin

  3. Build Docker Image & Figma Plugin:

    docker build -t mcp/hs-figma .

npm run build:figma-plugin

  4. Configure Claude: Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

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

    Once this configuration is added, Claude will automatically start the server when needed.

Design Capabilities

You can ask Claude to:

  • Create rectangles, circles, text, and frames
  • Design buttons, cards, and other UI components
  • Arrange layouts for web pages and apps
  • Style elements with colors, shadows, and effects
  • Export designs as images

Troubleshooting

Common Issues

  1. Claude can't connect to Figma

    • Make sure the Figma plugin is running
    • Make sure you've correctly set up the Claude configuration file
    • Restart Claude and try again

  2. Shapes don't appear as expected

    • Try being more specific in your instructions to Claude
    • For colors, use common names like "blue" or hex codes like "#0000FF"

  3. Plugin not working

    • Make sure you've opened a Figma file
    • Reinstall the plugin if needed

For technical troubleshooting, see the "Technical Issues" section below.

Technical Issues

  1. WebSocket Connection Failure

    • Check that port 9000 is not blocked by firewalls
    • Verify WS_PORT setting in both server and plugin configurations

  2. Plugin Loading Issues

    • Ensure TypeScript files are compiled correctly
    • Check console errors in Figma's developer tools

  3. Color Format Issues

    • Color objects should use opacity instead of alpha ('a') property

Examples

Try asking Claude:

  • "Create a simple app homepage in Figma with a header, hero section, and footer"
  • "Design a user profile card with an avatar, name, and bio in Figma"
  • "Make a set of navigation buttons in Figma"

License

MIT

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.