MCPgee
MCPgee
MCPgeeMCPgee

f2c

v1.0.0•Developer Tools•stable

f2c-mcp-server

f2cmcpai-integration
Share:
394
Stars
0
Downloads
0
Weekly
0/5
View on GitHub

What is f2c?

f2c is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to f2c-mcp-server

f2c-mcp-server

This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.

Features

  • f2c-mcp-server

Use Cases

Integrate f2c capabilities into AI workflows.
f2c-ai

Maintainer

LicenseMIT License
Languagetypescript
Versionv1.0.0
UpdatedMay 18, 2026
Statushealthy
Maintenanceactive

Works with

ClaudeOpenAIwindowsmacoslinux
View SourceBrowse All Servers

Installation

Manual Installation

npx f2c

Configuration

Configuration Details

Config File

claude_desktop_config.json

Performance

Response Metrics

Response Time< 200ms
ThroughputMedium

Resource Usage

Memory UsageLow
CPU UsageLow

How to Set Up and Use f2c

F2C MCP server bridges Figma design files and AI-powered coding tools by converting Figma design nodes into pixel-perfect HTML, CSS, React, CSS Modules, and Tailwind CSS code through the Model Context Protocol. It parses Figma file URLs and node references, downloads remote image assets to local paths, and integrates design context directly into AI IDEs like Cursor and Trae so the AI has accurate visual specifications alongside the code. Designers and frontend developers use it to eliminate the manual translation step between design handoff and code generation.

Prerequisites

  • Node.js 18+ with npx available
  • A Figma account with access to the design files you want to convert
  • A Figma personal access token (created at figma.com → Settings → Personal access tokens)
  • An MCP-compatible IDE such as Cursor, Trae, Comate AI IDE, or Claude Desktop
1

Generate a Figma personal access token

In Figma, go to your account settings and create a personal access token. This token (used as personalToken) is required to authenticate API requests to Figma.

2

Install the MCP server via Smithery (recommended for Claude)

Use the Smithery CLI to install and configure @f2c/mcp automatically for your MCP client.

npx -y @smithery/cli install @f2c-ai/f2c-mcp --client claude
3

Or run directly with npx

Run the server without a global install using npx. Set your Figma token as the personalToken environment variable.

npx -y @f2c/mcp
4

Add to your MCP client config

Add the f2c-mcp server block to your claude_desktop_config.json or IDE MCP settings, supplying your Figma personal access token.

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

Copy a Figma node link

In Figma, right-click any layer in the Layers panel and select 'Copy link to selection'. This gives you a URL like https://www.figma.com/design/FILE_ID/Name?node-id=X%3AY.

6

Paste the link into your AI IDE chat

In Cursor's agent mode or your connected MCP client chat, paste the Figma node link and describe what you want: fetch design data, download images, or convert to code in your preferred framework.

f2c Examples

Client configuration

Add f2c-mcp to claude_desktop_config.json using your Figma personal access token as the personalToken environment variable.

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

Prompts to try

Paste a Figma node link and use these prompts in your AI IDE after connecting the MCP server.

- "Convert this Figma node to a React component with Tailwind CSS: https://www.figma.com/design/ABC123/Design?node-id=1%3A2"
- "Fetch the design data for this Figma frame and generate pixel-perfect HTML/CSS"
- "Download all remote image assets from this Figma node to my local assets folder"
- "Convert this Figma button component to a CSS Modules + React implementation"
- "Get the design context for node 5:10 in Figma file XYZ and implement it exactly"

Troubleshooting f2c

API returns 403 or 'Invalid token' when fetching Figma nodes

Verify that personalToken in your MCP config matches a valid Figma personal access token. Tokens expire if you regenerate them in Figma settings — update the config with the new token.

Figma REST API rate limit errors during conversion

The free Figma API has rate limits. Switch to @f2c/mcp-plugin (npm install -g @f2c/mcp-plugin) which is designed to work around Figma REST API rate limits for high-volume usage.

Generated code does not match the Figma design visually

Ensure you are copying the link to the specific node (right-click a layer in the Layers panel, not the canvas) rather than the file URL. Frame-level links produce more accurate output than page-level links.

Frequently Asked Questions about f2c

What is f2c?

f2c is a Model Context Protocol (MCP) server that f2c-mcp-server It connects AI assistants to external tools and data sources through a standardized interface.

How do I install f2c?

Follow the installation instructions on the f2c GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.

Which AI clients work with f2c?

f2c works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.

Is f2c free to use?

Yes, f2c is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.

Learn More About MCP Servers

Getting Started with MCP

Set up your first MCP server in minutes

MCP Setup Guide

Configure MCP in Claude, Cursor & VS Code

All MCP Tutorials

18+ hands-on guides for developers

MCP FAQ

40+ answers about Model Context Protocol

f2c Alternatives — Similar Developer Tools Servers

Looking for alternatives to f2c? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.

Ecc

★ 188.2k

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

Javaguide

★ 155.8k

Java 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发

Gemini CLI

★ 104.5k

A secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in

Awesome MCP Servers

★ 87.3k

⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.

MCP Servers

★ 86.0k

Model Context Protocol Servers

CC Switch

★ 77.5k

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io

Browse More Developer Tools MCP Servers

Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.

Developer ToolsBrowse All Servers

Quick Config Preview

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

Add this to your claude_desktop_config.json or .cursor/mcp.json

Read the full setup guide →

Ready to use f2c?

Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.

33,000+ ServersFree & Open SourceStep-by-Step Guides
Explore All ServersRead Our Guides