Figma to Code

Organization

f2c-ai

F2C MCP Server

Publisher	f2c-ai
Repository	`f2c-mcp`
Language	TypeScript
Forks	43
Stars	393
Available tools	2
Transport type	stdio
Categories	Developer Tools Design
License	MIT
Links	GitHub Homepage

Connect tools to AI workflows
Figma to Code exposes MCP capabilities that can be used by compatible AI clients and agents.
2 available tools
Browse the callable actions below, including names and descriptions when provided by the server.
Ready-to-copy setup
Use the installation snippets to configure this server in your preferred MCP client.
Open source signals
393 stars and 43 forks from the linked repository.

F2C MCP Server

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.

Features

🎨 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

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

recommended to use Comate AI IDE

Open your chat in IDE (e.g. agent mode in Cursor).
Paste a link to a Figma Node (Right-click any node in the Figma Layer panel to copy it).
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.

Installation

TypingMind

Prerequisites:

Node.js 18+

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

Available Tools

get_code
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.
get_image
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.

Use Figma to Code MCP with multiple AI models

TypingMind connects MCP tools at the workspace level, so once Figma to Code is connected, you can use it with different AI models in TypingMind instead of setting it up separately for each model. This MCP runs locally through the TypingMind MCP connector on your device.

Setup guide to use the local connector

Use this when the MCP server needs access to local files, apps, or private resources on your computer.

Open the MCP settings

In TypingMind, go to Settings, Advanced Settings, then Model Context Protocol and choose Setup Connector.

Open TypingMind in your browser.
Click the Settings icon.
Go to Advanced Settings.
Open the Model Context Protocol section.
Click Setup Connector and choose This Device.

TypingMind MCP connector setup screen with This Device selected

Run the connector command

Choose This Device, copy the command from TypingMind, and run it in Terminal. Keep the process running while you use MCP.

Copy the setup command shown by TypingMind.
Open Terminal on macOS or Windows Terminal on Windows.
Paste and run the command.
Approve the package install if Terminal asks you to proceed.
Keep the Terminal window running while using MCP tools.

Add Figma to Code as a server

When the connector status is Ready, click Edit Servers and paste the MCP server configuration.

Wait until the connector status shows Ready.
Click Edit Servers.
Paste the Figma to Code MCP server configuration.
Save the server list.
Refresh if you want to confirm the connector is still ready.

TypingMind MCP settings showing active server and Edit Servers button

Use it across models

Save the server list, open Plugins, enable the Figma to Code MCP tools, then select any supported AI model in TypingMind and use the tools in chat or assign them to an AI agent.

Open the Plugins page in TypingMind.
Enable the Figma to Code MCP tools.
Start a chat and choose the AI model you want to use.
Use the MCP tools in chat or assign them to an AI agent.
Switch to another AI model whenever needed without reconnecting MCP.

TypingMind chat using enabled MCP tools with a selected AI model

Frequently asked questions

What is the Figma to Code MCP server used for?

Figma to Code is an MCP server that lets compatible AI clients connect to external tools and context. In TypingMind, you can add this MCP server once and make its tools available in your AI workspace.

Can I use Figma to Code MCP with multiple AI models in TypingMind?

Yes. TypingMind connects MCP tools at the workspace level, so you can use Figma to Code with different AI models such as Claude, ChatGPT, Gemini, or other models you have configured in TypingMind without setting up the MCP server separately for each model.

Why use Figma to Code MCP with TypingMind?

TypingMind is one of the best frontends for LLM chat because it brings multiple AI models, prompts, plugins, AI agents, API keys, and MCP tools into one workspace. With Figma to Code connected, you can use its MCP tools across your preferred models while keeping your chat workflow organized in TypingMind.

How do I connect Figma to Code MCP to TypingMind?

Figma to Code runs through the TypingMind local MCP connector. This is best when the MCP server needs access to local files, desktop apps, command-line tools, or private resources on your computer.

What tools does Figma to Code MCP provide in TypingMind?

Figma to Code exposes 2 MCP tools that can be enabled from the TypingMind Plugins page and used in chat or assigned to AI agents.

Do I need to share my API keys with TypingMind to use Figma to Code MCP?

No. TypingMind is local-first and lets you keep your model providers, API keys, prompts, and MCP configuration under your control. If Figma to Code requires authentication, add the required headers, OAuth settings, or local configuration for that MCP server when you create the connection.

Related MCP Servers

View all

Chrome DevTools

chromedevtools

OrganizationPopular

Chrome DevTools for coding agents

Chrome DevTools MCP

Chrome DevTools for coding agents

GitHub

GitHub's official MCP Server

FastMCP

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

25.3K

0 tools

View details

F2C MCP Server

Features

How it works

Configuration and Development

Data Privacy Notice

FAQ

Credits

Installation

Available Tools

Use Figma to Code MCP with multiple AI models

Setup guide to use the local connector

Open the MCP settings

Run the connector command

Add Figma to Code as a server

Use it across models

Frequently asked questions

Related MCP Servers

Set up your own AI workspace now