mcpField
F
F2C MCP Server

F2C MCP Server

Local
f2c.yy.comMedia & Design410Updated 48w ago
RepositoryVisit website

About F2C MCP Server

F2C MCP Server is a Model Context Protocol server that converts Figma designs to code using F2C. It is aimed at developers who want AI coding tools to work directly with Figma design data and produce HTML/CSS output.

Key features

  1. 01Pixel-level HTML/CSS generation
  2. 02React, CSS Modules and Tailwind CSS output
  3. 03Design node conversion from Figma URLs
  4. 04Figma design context for AI tools
  5. 05Remote image download to local assets

Use cases

  1. 01Converting Figma nodes to front-end code in Cursor or Trae
  2. 02Downloading design images to local assets
  3. 03Providing Figma design context to AI coding tools

MCP support

This project is an MCP server that exposes Figma node data, image downloading and design-to-code conversion to MCP clients.

#f2c#mcp#figma#html#css#ai-coding-assistant#d2c

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "f2c": {
      "command": "npx",
      "args": [
        "-y",
        "@f2c/mcp"
      ],
      "env": {
        "personalToken": "<personalToken>"
      }
    }
  }
}
Run commandnpx -y @f2c/mcp
Environment variables to set
personalTokenSecret

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@f2c/mcp

Tools

2

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
fileKeystringYesThe Figma file identifier found in the file URL (e.g., https://www.figma.com/file/XXXXXXXXXXXX/). Extract the XXXXXXXXXXXX portion as the fileKey.
idsstringYesComma-separated list of Figma node IDs for conversion. To obtain node IDs, select elements in Figma, right-click and select "Copy/Paste as" → "Copy ID".
personalTokenstringNoFigma personal access token for API authentication.The parameters are not required when the tool is called.
localPathstringNoAbsolute path for asset(e.g., images) and code storage. Directory will be created if non-existent. Path must follow OS-specific format without special character escaping. When this path is set, all code-related static resources are stored in this directory, while other assets (e.g., images) will be saved into the subdirectory named assets under this path.
imgFormatenumNoExport format for image assets: "png" for lossless quality, "jpg" for compressed files, or "svg" for vector graphics.png | jpg | svg
scaleSizenumberNoImage export scale factor (1-4). Higher values yield better quality at the cost of larger file sizes.

Details

From the project README

F2C MCP Server

MCP Server smithery badge npm version npm downloads github node

Due to Figma REST API rate limits, if you are affected, please switch to @f2c/mcp-plugin for normal operation.

English | 简体中文

A Model Context Protocol server for Figma Design to Code using F2C.

f2c-mcp-server MCP server

Features

f2c
  • 🎨 Pixel-Perfect HTML/CSS：F2C converts Figma designs to pixel-perfect HTML/CSS with precision.
  • ⚛️ Multi-Framework Support：F2C generates React, CSS Modules, and Tailwind CSS code for fast development.
  • 🧠 Figma Design Context：F2C integrates design context, ensuring compatibility with AI tools like Cursor.
  • 🔗 Figma File URL Parsing：F2C converts design nodes via Figma URLs, streamlining workflows.
  • 🖼️ Remote Image Localization：F2C automates downloading Figma images to local assets for efficiency.

How it works

  1. Configure the Server in an MCP-supported IDE (e.g., Cursor, Trae).

recommended to use Comate AI IDE

  1. Open your chat in IDE (e.g. agent mode in Cursor).
  2. Paste a link to a Figma Node (Right-click any node in the Figma Layer panel to copy it).
  3. Enter your requirements in the chat, such as fetching node data, downloading images, converting to code, etc.

Configuration and Development

See Configuration and Development

Data Privacy Notice

The logging tools integrated in this project are used solely for basic usage statistics and error log reporting. No sensitive information or user data is collected. All reported data is used exclusively to improve product quality and user experience.

FAQ

See FAQ

Credits

Thanks to:

  • Framelink Figma MCP Server Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.
  • Cursor Talk to Figma MCP Allowing Cursor to communicate with Figma for reading designs and modifying them programmatically.
  • Figma MCP Server This server provides tools for viewing, commenting, and analyzing Figma designs directly through the ModelContextProtocol.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.