Reviewed overview
MCP 服务器概览
F2C MCP Server
English | 简体中文
A Model Context Protocol server for Figma Design to Code using F2C.
<a href=“https://glama.ai/mcp/servers/@f2c-ai/f2c-mcp”> <img width=“380” height=“200” src=“https://glama.ai/mcp/servers/@f2c-ai/f2c-mcp/badge” alt=“f2c-mcp-server MCP server” /> </a>
Features
<img alt=“f2c” src=“https://raw.githubusercontent.com/f2c-ai/f2c-mcp/main/docs/bannerv3.png” />
- 🎨 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).
- 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
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.