Figma to Code MCP server

The F2C MCP Server is a Model Context Protocol implementation that enables seamless conversion of Figma designs to code. It allows AI-powered IDEs to access Figma designs and convert them to HTML/CSS, React components, and other frameworks with pixel-perfect accuracy.

Installation

Prerequisites

• Node.js
• npm or yarn
• An MCP-supported IDE (like Cursor or Trae)

Installing via npm

npm install @f2c/mcp

Installing via yarn

yarn add @f2c/mcp

Usage

Basic Setup

To start using the F2C MCP Server, you need to configure it in your MCP-supported IDE.

Configuring in an MCP-supported IDE

1. Open your MCP-supported IDE (such as Cursor or Trae)
2. Add the F2C MCP Server to your IDE's MCP server configuration
3. Configure the server with your Figma access token

Working with Figma Designs

The typical workflow consists of:

1. Configure the server in your MCP-supported IDE
2. Open chat in your IDE (e.g., agent mode in Cursor)
3. Copy a Figma node link (right-click any node in Figma's Layer panel and copy)
4. Paste the link in your chat
5. Enter your requirements for the node (fetching data, downloading images, converting to code)

Example Commands

Here are some example commands you can use in your IDE chat:

Convert this Figma design to React with Tailwind CSS: [Figma URL]

Download all images from this Figma component and generate HTML/CSS: [Figma URL]

Parse this Figma component and show me the structure: [Figma URL]

Key Features

• Pixel-Perfect HTML/CSS Generation: Converts Figma designs to HTML/CSS with high precision
• Multi-Framework Support: Generates code for React, CSS Modules, and Tailwind CSS
• Figma Design Context Integration: Provides design context for AI tools
• Figma URL Parsing: Simplifies workflows by directly parsing Figma URLs
• Remote Image Localization: Automatically downloads Figma images to local assets

Troubleshooting

Common Issues

• Connection Problems: Ensure your IDE is properly configured to connect to the MCP server
• Authentication Errors: Verify your Figma access token is valid and has appropriate permissions
• Parsing Failures: Make sure you're using a valid Figma node URL

If you encounter persistent issues, try restarting your IDE or reinstalling the package.

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 "f2c-mcp" '{"command":"npx","args":["-y","@f2c/mcp"]}'

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": {
        "f2c-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@f2c/mcp"
            ]
        }
    }
}

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": {
        "f2c-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@f2c/mcp"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect