What is Figma Make

figma-make is a tool that connects Figma with MCP-compatible applications, facilitating the integration of design workflows with various tools.

Use cases

Use cases include automating design handoffs, integrating design assets into development workflows, and testing Figma plugins in various environments.

How to use

To use figma-make, install it globally using npm with the command ‘npm install figma-make -g’. Start the server with your Figma API token and desired options, such as port and mode.

Key features

Key features include initializing new Figma plugins, managing Figma API tokens, testing connections to tools, and configuring local settings through a JSON file.

Where to use

figma-make can be used in design and development environments where Figma is integrated with other applications, such as project management tools, collaboration platforms, and design systems.

Figma Make

• Connect Figma to external clients using the MCP
• Connect with Cursor, VS Code, JetBrains, and WindSurf
• Read and interact with Figma files
• Scaffold new Figma plugins with MCP support
• Claude integration for design-to-code

Quick Start

1. Install

   npm install -g figma-make
   

2. Run

   figma-make --token YOUR_FIGMA_API_KEY
   

Authentication

Provide your Figma API token using:

• --token flag
• FIGMA_API_KEY environment variable
• ~/.figma-make/figma-token.json config file

Options

# Basic usage
figma-make --token YOUR_TOKEN

# Custom host/port
figma-make --token YOUR_TOKEN --port 8080 --host 0.0.0.0

# Debug mode
figma-make --token YOUR_TOKEN --debug

# Stdio mode
figma-make --token YOUR_TOKEN --stdio

MCP Server

Start the Server

# Start with default settings (port 8765, localhost)
figma-make

# With custom port/host
figma-make --port 8080 --host 0.0.0.0

# With Figma API token
figma-make --token YOUR_FIGMA_TOKEN

# Enable debug logging
figma-make --debug

# Use stdio mode (for IDE integrations)
figma-make --stdio

IDE Configs

Cursor

{
  "mcpServers": {
    "figma": {
      "command": "figma-make",
      "env": {
        "FIGMA_API_KEY": "your-figma-token"
      }
    }
  }
}

VS Code

{
  "mcp.servers": {
    "figma": {
      "command": "figma-make",
      "env": {
        "FIGMA_API_KEY": "your-figma-token"
      }
    }
  }
}

JetBrains

<application>
  <component name="MCP">
    <servers>
      <server name="figma" command="figma-make">
        <env name="FIGMA_API_KEY" value="your-figma-token" />
      </server>
    </servers>
  </component>
</application>

Token Management

# Set, view, or remove your Figma API token
figma-make token

# Set token non-interactively
figma-make token set YOUR_TOKEN

# View current token
figma-make token view

# Remove saved token
figma-make token remove

Configuration

# List all configuration values
figma-make config --list

# Set a configuration value
figma-make config --set key=value

# Delete a configuration value
figma-make config --delete key

Plugins

Initialize a New Plugin with MCP support

figma-make plugins init