広告掲載
MCP.so
ログイン

F2C MCP Server

@f2c-ai

リポジトリホームページ

基本情報

カテゴリ

その他

ライセンス

MIT

トランスポート

stdio

作者

f2c-ai

F2C MCP Server について

F2C MCP Server

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

F2C MCP Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

F2C MCP Server のツール

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.

概要

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

よくある質問

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.

コメント

「その他」の他のコンテンツ

N

Next Generation Movers: free moving quotes (remote MCP)

Next Generation Movers

Free moving quotes for AI agents from Next Generation Movers, a licensed interstate mover (USDOT 3764697). US long-distance nationwide and local DC/MD/VA. Indicative ballpark price and booking options; optional $0.01 x40

Senso MCP for Joomla

sensomedia

Senso MCP turns a Joomla 5 or 6 site into a remote MCP server. It runs inside Joomla itself (no extra server, no Node.js bridge) and is secured with OAuth 2.1 and Joomla's own ACL. The free pack lets an AI assistant crea

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

ICSS

chokcoco

不止于 CSS

20.7K

DeepMark

DeepMark helps teachers deliver rapid, consistent marking with meaningful feedback for every student — in a fraction of the time. What once took a week, now takes one free period.

広告掲載