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)

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.

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