Feuse (Figma Design-to-Code) MCP server for AI agents

Frontend Useful MCP (Model Context Protocol) Tools provides essential utilities for web developers to automate API integration, convert Figma designs to code, and optimize development workflows. This server integrates with Figma and offers various automation tools to streamline frontend development tasks.

Features Overview

Figma integration for design-to-code conversion
API automation for TypeScript interfaces and request functions
Asset management for Figma images
Similarity comparison between generated code and designs
Project standards generation
Color variable extraction from Figma

Installation

Prerequisites

Node.js version 22.0.0 or higher
A Figma API key

Setting Up the Server

Add the feuse-mcp to your MCP client configuration:

{
  "feuse-mcp": {
    "command": "npx",
    "args": ["feuse-mcp@latest"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

You can obtain your Figma API key from the Figma Developer Settings.

Available Tools

Figma-To-Code

Generates frontend code based on Figma designs.

Parameters:

fileKey: Figma file identifier
nodeId (optional): Specific node to target

extract-svg-assets

Analyzes Figma design structure and automatically extracts SVG resources.

Parameters:

fileKey: Figma file identifier
nodeId (optional): Specific node to target

extract-color-vars

Extracts color variables from Figma and converts them to CSS framework configurations.

Parameters:

fileKey: Figma file identifier
nodeId (optional): Specific node to target

similarity-figma

Compares Figma prototypes with project page screenshots for accuracy validation.

Parameters:

url: URL of the page to compare
fileKey: Figma file identifier
nodeId (optional): Specific node to target

api-automation

Parses backend API documentation and generates TypeScript types, constants, and mock data.

Parameters:

apiDocs: API documentation input

initialize-project-standard

Analyzes project structure and generates rules for Copilot/Cursor.

Parameters: None required

Download-Figma-Images

Downloads SVG and PNG image resources from Figma.

Parameters:

fileKey: Figma file identifier
nodes[]: Array of node IDs
localPath: Local path for downloaded assets

download-svg-assets

Downloads SVG vector resources from Figma by image/icon node ID.

Parameters:

fileKey: Figma file identifier
nodes[]: Array of node IDs
localPath: Local path for downloaded assets

Usage Examples

Converting Figma Design to Code

To convert a Figma design to code, use the Figma-To-Code tool:

// Example MCP request
{
  "name": "Figma-To-Code",
  "parameters": {
    "fileKey": "your-figma-file-key",
    "nodeId": "optional-node-id"
  }
}

Extracting Color Variables from Figma

To extract color variables from your Figma design:

// Example MCP request
{
  "name": "extract-color-vars",
  "parameters": {
    "fileKey": "your-figma-file-key"
  }
}

Automating API Integration

To generate TypeScript interfaces and API functions from documentation:

// Example MCP request
{
  "name": "api-automation",
  "parameters": {
    "apiDocs": "your-api-documentation-content"
  }
}

Additional Resources

For more detailed information and examples, refer to the official documentation.

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "feuse-mcp" '{"command":"npx","args":["feuse-mcp@latest"],"env":{"FIGMA_API_KEY":"YOUR_FIGMA_API_KEY"}}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "feuse-mcp": {
            "command": "npx",
            "args": [
                "feuse-mcp@latest"
            ],
            "env": {
                "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
            }
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "feuse-mcp": {
            "command": "npx",
            "args": [
                "feuse-mcp@latest"
            ],
            "env": {
                "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
            }
        }
    }
}

3. Restart Claude Desktop for the changes to take effect