guang1/figma-mcp repository overview

⁠figma-mcp: Model Context Protocol Server Streamable HTTP/SSE for Figma

⁠What is figma-mcp

This Model Context Protocol (MCP) server enables Large Language Models (LLMs) to interact with Figma through a standardized API. It allows AI assistants to perform common Figma operations without requiring direct API integration, making it easier to build AI-powered tools that work with your Figma designs.

⁠Supported MCP tools

The MCP server supports the following Figma operations:

• get_file: Retrieve a specific Figma file
• get_file_nodes: Get specific nodes from a Figma file
• get_image_fills: Get images associated with image fills in a file
• get_file_nodes_images: Get URLs for exported file/nodes images

⁠How to use this image

⁠MCP Streamable HTTP/SSE

⁠Simple usage

docker run -d --name figma-mcp \
  -p 8080:8080 \
  -e figma.pat=your-figma-personal-access-token \
  guang1/figma-mcp:latest

⁠Using an Environment File

Create a configuration file (e.g., figma.config):

figma.pat=your-figma-personal-access-token

Then run:

docker run -d --name figma-mcp \
  -p 8080:8080 \
  --env-file figma.config \
  guang1/figma-mcp:latest

⁠Docker Compose for Streamable HTTP/SSE

⁠Basic Example

services:
  figma:
    container_name: figma-mcp
    image: guang1/figma-mcp
    environment:
      - figma.pat=your-figma-personal-access-token
    ports:
      - "8080:8080"
    restart: always

⁠With Environment File

services:
  figma:
    container_name: figma-mcp
    image: guang1/figma-mcp
    env_file:
      - figma.config
    ports:
      - "8080:8080"
    restart: always

⁠MCP SSE URL

http://localhost:8080/mcp/sse

⁠MCP Streamable HTTP URL

http://localhost:8080/mcp

⁠MCP STDIO

Must pass quarkus.mcp.server.stdio.enabled=true, quarkus.log.console.enable=false and quarkus.log.console.stderr=false environment variables with -i interactive option.

⁠Simple usage

docker run --rm \
  -e figma.pat=your-figma-personal-access-token \
  -e quarkus.mcp.server.stdio.enabled=true \
  -e quarkus.log.console.enable=false \
  -e quarkus.log.console.stderr=false \
  -i guang1/figma-mcp:latest

⁠Using an Environment File

docker run --rm --env-file=figma.config \
   -e quarkus.mcp.server.stdio.enabled=true \
   -e quarkus.log.console.enable=false \
   -e quarkus.log.console.stderr=false \
   -i guang1/figma-mcp:latest

⁠Claude Desktop Configuration (STDIO)

To use the Docker version with Claude Desktop, add this to your claude_desktop_config.json or server_config.json file:

⁠Simple usage

{
  "mcpServers": {
    "figma": {
      "command": "docker",
      "args": [
        "run",
        "--rm",
        "-e",
        "figma.pat=your-figma-personal-access-token",     
        "-e",
        "quarkus.mcp.server.stdio.enabled=true",
        "-e",
        "quarkus.log.console.enable=false",
        "-e",
        "quarkus.log.console.stderr=false",
        "-i",
        "guang1/figma-mcp:latest"
      ]
    }
  }
}

⁠Using an Environment File

{
  "mcpServers": {
    "figma": {
      "command": "docker",
      "args": [
        "run",
        "--rm",
        "--env-file=figma.conf",
        "-e",
        "quarkus.mcp.server.stdio.enabled=true",
        "-e",
        "quarkus.log.console.enable=false",
        "-e",
        "quarkus.log.console.stderr=false",
        "-i",
        "guang1/figma-mcp:latest"
      ]
    }
  }
}

⁠Configuration

⁠Environment Variables

⁠Creating a Figma API Token

To generate a Personal Access Token for Figma:

1. Log in to your Figma account
2. Go to Account Settings > Personal Access Tokens
3. Create a new token with a descriptive name
4. Copy the generated token for use with this MCP server

⁠Security Considerations

⚠️ Warning: This MCP server requires authentication credentials with access to your Figma account. Consider the following security practices:

• Create a dedicated Figma account with appropriate permissions
• Regularly rotate your API token
• Run the container in a secure, isolated environment
• Use network security rules to restrict access to the MCP server
• Be cautious about which operations you allow LLMs to perform

⁠Using with LLMs

This MCP server provides a standardized API that Large Language Models can use to interact with your Figma designs:

1. Configure the LLM to connect to the MCP server endpoint
2. Define the capabilities you want to allow the LLM to use
3. The LLM can now perform Figma operations through the MCP server

⁠Example Use Cases

• Generate code from Figma designs
• Extract design tokens and styling information
• Create documentation from Figma files
• Allow team members to query design information using natural language
• Automate design system operations

⁠Troubleshooting

If you encounter issues:

• Verify your API token has the required permissions
• Check that your Figma token is valid and not expired
• Ensure your environment variables are correctly set
• Check container logs for detailed error information