F2C MCP
The MCP server of the F2C service: from a Figma node link the agent gets HTML, React or Tailwind markup and local images
- 410 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- A Figma token opens your files for reading and has to be kept in the client settings
- The server downloads images to disk and sends basic usage statistics
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/f2c-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- A Figma token opens your files for reading and has to be kept in the client settings
- The server downloads images to disk and sends basic usage statistics
This is third-party code. Review the repository files before installing.
What it does
The F2C server turns a Figma design into code. You copy a node link in Figma's layers panel, paste it into the chat of an MCP-enabled IDE such as Cursor, and describe the task: fetch node data, download images, convert to code. The service produces HTML and CSS that keep the design's dimensions, as well as React, CSS Modules and Tailwind CSS. Design context is passed in a form that AI tools such as Cursor can use. The server downloads Figma images into the project's local assets, and the code refers to them by relative paths. The server starts through npx as a stdio process and can also run over streamable HTTP or SSE on a local port. Access to designs needs a personal Figma token.
Who it is for. For front-end developers and layout engineers who receive designs in Figma and want a UI draft inside an IDE with an agent.
Good fit when
- You need to move a Figma screen into a React component with Tailwind CSS, starting from a node link
- You want a design as HTML and CSS with exact dimensions so you can then edit the code by hand
- You need the design's images in the project folder, and Figma links will not do
- An agent needs design context to check the code against the design inside Cursor
- You want to connect the server to an IDE over HTTP or SSE on a local port, with no child process
Not a fit when
- You have no Figma token: without it the server cannot reach designs
- You hit the Figma REST API rate limits: the authors suggest the `@f2c/mcp-plugin` package for that case
- You need to draw or edit designs in Figma: the server reads a design and produces code
- Usage data must not leave your machine: the project sends basic usage statistics and error reports
Example request
Here is a Figma node link. Download the images and turn the design into a React component with Tailwind CSS, keeping the dimensions.MCP
- Transport
- stdio, http, sse
- Authentication
- API key
Environment variables
personalTokenrequired, secret- A Figma personal access token
Limitations
It needs Node.js and a personal Figma token. The token is passed through the personalToken environment variable or the `--figma-api-key` flag. The project gives the F2C service address as f2c.yy.com.
The project sends basic usage statistics and error reports. The authors state that no sensitive information or user data is collected this way.
The server works with nodes whose links are copied from Figma's layers panel. Whether Figma and F2C are reachable from Russia was not checked for this card. The repository's latest changes date from November 2025.
How to disable. Remove the f2c-mcp entry from your IDE's MCP settings file and restart it. If you installed the package globally, remove it with `npm uninstall -g @f2c/mcp`. You can revoke the Figma token in your Figma account settings.
FAQ
How do I connect F2C MCP to Cursor?
Add an f2c-mcp entry to the MCP settings with the command `npx -y @f2c/mcp` and a personalToken variable holding your Figma token. On Windows the command runs through `cmd /c`. The documentation has one-click install buttons for Cursor.
Where do I get a Figma token for F2C?
It is a personal access token created in Figma's help section on managing personal tokens. Put it into the personalToken variable or pass it with the `--figma-api-key=` flag.
What should I do about the spawn npx ENOENT error?
The client did not find npx in its environment. Add a PATH variable listing the Node.js directories to the server entry's env block, or install the package globally with `npm install -g @f2c/mcp` and run `f2c-mcp`.
Which frameworks does F2C support?
The service generates HTML and CSS with exact dimensions, React, CSS Modules and Tailwind CSS. For other frameworks the code has to be adapted by hand.
What if I run into Figma's rate limits?
Figma REST API limits can interfere with the server. The authors suggest switching to the `@f2c/mcp-plugin` package, which ships separately.
Discussion
No questions or reviews yet.
Related
MCP serversFigma To Code MCP: from Figma layout to code
Figma To Code MCP
Figma to code over MCP: the server gives the agent a layout as compact YAML with CSS property names, resolved variables and SVG exported to disk
Figma's official MCP server: code from a selected frame, design system variables and components, and writing designs to the canvas
An MCP server that gives the agent simplified Figma layout data from a link so it can build the screen more accurately than from a screenshot
A free, two-way Figma MCP server: turns designs into framework-aware code and pushes code back to the canvas
Figma Console MCP
figma-console-mcp
A two-way Figma MCP server for design systems: reads and writes variables, components and styles and syncs tokens with code
An MCP server that lets an agent read and edit Figma designs: colors, typography, components and export
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| F2C MCP (this entry) | yes | API key | 410 | |
| Framelink MCP for Figma | no | API key | 16,101 | gives the agent simplified layout data, while F2C itself produces HTML, React and Tailwind |
| Figma To Code MCP: from Figma layout to code | no | API key | 7 | passes layout as compact YAML with CSS properties, while F2C returns ready code and downloads images |
README in short
The page lists five capabilities of the service and four steps of working in an IDE. Installation and development are moved to a Getting Started page, and a typical launch error is covered in the FAQ. At the end the authors thank the Framelink, Cursor Talk to Figma and Figma MCP Server projects they built on.