Advertise
MCP.so
Sign In

F2C MCP Server

@f2c-ai

RepositoryHomepage

Basic information

Category

Other

License

MIT

Transports

stdio

Author

f2c-ai

About F2C MCP Server

F2C MCP Server

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

F2C MCP Server config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "f2c-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@f2c/mcp"
      ],
      "env": {
        "personalToken": ""
      }
    }
  }
}

F2C MCP Server tools

2

Generate UI code for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2.

Generate an image for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be 1:2. Also export Figma design images for visual verification and design fidelity validation. Essential for comparing generated code output against original designs, ensuring pixel-perfect implementation and catching visual discrepancies during the design-to-code process.

Overview

What is F2C MCP Server?

A Model Context Protocol server that converts Figma designs to code using the F2C engine. It enables AI-powered coding tools (like Cursor) to access Figma design context, fetch node data, download images, and generate pixel-perfect HTML/CSS, React, or Tailwind CSS code.

How to use F2C MCP Server?

Configure the server in an MCP-supported IDE (e.g., Cursor, Trae, or Comate AI IDE). In the IDE chat, paste a Figma node link (copied from Figma’s layer panel) and enter your requirements such as fetching node data, downloading images, or converting to code.

Key features of F2C MCP Server

  • Pixel-perfect HTML/CSS generation from Figma designs
  • Multi‑framework support (React, CSS Modules, Tailwind CSS)
  • Integrates Figma design context for AI tool compatibility
  • Converts design nodes via Figma file URLs
  • Automates downloading Figma images to local assets

Use cases of F2C MCP Server

  • Fetching Figma node data and metadata in an AI coding assistant
  • Converting Figma design layers into production‑ready code
  • Downloading and localizing remote images from Figma
  • Streamlining design‑to‑code workflows in IDEs like Cursor or Trae

Frequently asked questions

1

What does F2C MCP Server do?

It is a Model Context Protocol server that converts Figma designs into code (HTML/CSS, React, Tailwind CSS) and provides design context to AI coding tools.

2

Does this server have any rate limits?

Yes. Due to Figma REST API rate limits, users may be affected. If so, the README recommends switching to `@f2c/mcp-plugin` for normal operation.

3

Where does the data (downloaded images, etc.) live?

The server automates downloading Figma images to local assets, so data is stored locally on your machine.

4

What dependencies or runtime does it require?

The server is distributed as an npm package (`@f2c/mcp`) and runs on Node.js (version indicated by the badge).

5

How does authentication work for the Figma API?

The README does not detail authentication; it states the server uses Figma REST API and can be configured in an MCP-supported IDE, implying the Figma API key is handled via the IDE or environment configuration.

Comments

More Other MCP servers

FastMCP v2 🚀

jlowin

🚀 The fast, Pythonic way to build MCP servers and clients.

26.0K

Awesome Mlops

visenger

A curated list of references for MLOps

14.0K

Yuppsy

Yuppsy MCP: build and publish real estate websites from your AI assistant. Yuppsy lets your AI assistant create live websites for real estate agents and individual property listings. You don't need a designer or any code

Health by Dr Brad

Dr Brad Stanfield

Health by Dr Brad works out a health plan from your own results: which screening is due at your age, and evidence-based suggestions, each with the reason and the published guideline or study behind it. Your record is one

Lemon.io

lemon-io

Request dedicated senior developers to work on your project, write job descriptions, and prep technical interviews — all without leaving your Claude chat. Just describe what you need, and Lemon.io MCP does the rest. 1–3

Advertise