Overview
What is F2C MCP Server?
The F2C MCP Server is a Model Context Protocol server that enables AI coding assistants to access Figma design data and convert it to HTML/CSS code.
How to use F2C MCP Server?
To use the F2C MCP Server, you need to set up the server with your personal token and run the command: personalToken={personalToken} npx -y @f2c/mcp. You can also provide Figma file URLs with fileKey and nodeId parameters to access specific design nodes.
Key features of F2C MCP Server?
- 🎨 Convert Figma design nodes to high-fidelity HTML/CSS markup.
- 📚 Provides Figma design context to AI coding tools like Cursor.
- 🚀 Supports Figma file URLs with fileKey and nodeId parameters.
Use cases of F2C MCP Server?
- Enabling AI coding assistants to generate HTML/CSS from Figma designs.
- Streamlining the design-to-code workflow for developers.
- Enhancing collaboration between designers and developers by providing design context.
FAQ from F2C MCP Server?
- How do I get my personal token?
You can obtain your personal token from your Figma account settings.
- Is there any cost associated with using the F2C MCP Server?
The F2C MCP Server is free to use, but you may need a Figma account to access design files.
- Can I use this server with other AI coding tools?
Yes! The server is designed to work with various AI coding tools that support the Model Context Protocol.
Server Config
{
"mcpServers": {
"f2c-mcp": {
"command": "npx",
"args": [
"-y",
"@f2c/mcp"
],
"env": {
"personalToken": ""
}
}
}
}