Figma to Code MCP server

The F2C MCP Server is a powerful tool that connects Figma designs with code generation, enabling pixel-perfect HTML/CSS conversion from your Figma files. It supports multiple frameworks and integrates design context for compatibility with AI tools like Cursor.

Installation

Prerequisites

• Node.js (check compatibility on Node.js releases)
• npm or yarn package manager

Installing from npm

Install the F2C MCP Server globally using npm:

npm install -g @f2c/mcp

Or using yarn:

yarn global add @f2c/mcp

Usage

Starting the Server

To start the F2C MCP Server, run:

f2c-mcp

By default, the server runs on port 3003. You can specify a different port using the --port option:

f2c-mcp --port 3004

Configuring Figma Access

Before using the server, you need to configure your Figma access token:

1. Get a Figma Personal Access Token from your Figma account settings
2. Set it as an environment variable or provide it when starting the server:

export FIGMA_TOKEN=your_figma_token
f2c-mcp

Or pass it directly:

f2c-mcp --figma-token=your_figma_token

Converting Figma Designs to Code

The server supports multiple ways to convert Figma designs to code:

Using Figma URLs

You can convert design nodes directly via Figma URLs:

curl -X POST http://localhost:3003/api/convert -d '{"figmaUrl": "https://www.figma.com/file/YOUR_FILE_ID/Design?node-id=123:456"}'

Using Framework-Specific Options

Generate code for specific frameworks:

curl -X POST http://localhost:3003/api/convert -d '{
  "figmaUrl": "https://www.figma.com/file/YOUR_FILE_ID/Design?node-id=123:456",
  "framework": "react",
  "styling": "tailwind"
}'

Supported options:

• Framework: "react" (default), "vue", "html"
• Styling: "css-modules", "tailwind" (default), "styled-components"

Image Handling

The server automatically downloads and localizes Figma images as assets. You can configure the image storage path:

f2c-mcp --assets-path=./my-assets

Integrating with AI Tools

Connecting with Cursor

F2C MCP Server seamlessly integrates with Cursor and other AI-powered coding tools:

1. Start the F2C MCP Server
2. In Cursor, configure the MCP connection to point to your server (typically http://localhost:3003)
3. Use the Figma file URL in your prompts to Cursor

Example prompt to Cursor: "Generate a React component based on this Figma design: https://www.figma.com/file/YOUR_FILE_ID/Design?node-id=123:456"

Advanced Configuration

Environment Variables

The server supports the following environment variables:

• FIGMA_TOKEN: Your Figma Personal Access Token
• PORT: The port to run the server on (default: 3003)
• ASSETS_PATH: Path to store downloaded Figma images

Command Line Options

All configuration can also be set via command line options:

f2c-mcp --port=3004 --figma-token=your_token --assets-path=./assets

How to add this MCP server to 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 > MCP and click "Add new global MCP server".

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

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-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 explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.