F2C MCP Server logo

F2C MCP Server — MCP Servers

A Model Context Protocol server that converts Figma designs into production-ready code.

281stars
Visit WebsiteView SourceUse Cases

Quick Info

Category
developer-tools

Tags

figma
mcp
design-to-code
react
tailwindcss
ai-coding

Overview

F2C MCP Server is an open-source implementation of the Model Context Protocol designed to integrate Figma design context into AI-assisted developer workflows. It enables developers to convert Figma designs into pixel-perfect, production-ready code with support for multiple frameworks, including React, Tailwind CSS, and CSS Modules. By parsing Figma file URLs, automating image localization, and providing structured design metadata, F2C MCP Server improves the efficiency of design-to-code workflows. The server works seamlessly with AI IDEs such as Cursor and Comate, enabling developers to fetch design nodes, transform them into code, and maintain fidelity to the original design. With its automation capabilities, it reduces repetitive tasks and bridges the gap between designers and engineers.

Key Features

Converts Figma designs into pixel-perfect HTML/CSS
Generates code for React, CSS Modules, and Tailwind CSS
Supports Figma file URL parsing for direct node conversion
Automates localization of remote images into local assets
Integrates seamlessly with IDEs like Cursor and Comate
Provides structured design context for AI coding assistants
Enhances workflow efficiency between design and development
Open-source under MIT license

Use Cases

Enhance development workflows and productivity
Integrate F2C MCP Server with Claude and other AI assistants
Streamline developer-tools processes using MCP protocol