Figma to Code

by f2c-ai · File Systems · mcp-server, ai, npm

Bridges Figma design files to code generation, enabling direct conversion of designs into HTML, CSS, and other assets with customizable output paths and file organization.

F2C-MCP is a server implementation that bridges Figma design files to code generation through the Model Context Protocol. Built with TypeScript, it provides tools for parsing Figma URLs, handling authentication via API tokens, and managing output rules for generated code. The server implements JSON-RPC communication for error handling and notifications, making it valuable for designers and developers who need to convert Figma designs directly into HTML, CSS, and other assets with customizable output paths, naming conventions, and file organization.

Source: https://github.com/f2c-ai/f2c-mcp

Install

npx -y @f2c/mcp

Tags: mcp-server, ai, npm

⭐ 372 GitHub stars · Source: pulsemcp

About File Systems MCP servers and Claude skills

File Systems MCP servers extend what AI agents can do inside Claude Code, Cursor, Copilot, Codex, and Windsurf. The Skiln directory indexes 16,000+ such integrations across 22 categories.

Figma to Code is one of hundreds of File Systems entries indexed on Skiln. Browse the full File Systems category or the complete directory of Claude skills, MCP servers, agents, commands, and hooks.

Related File Systems MCPs and skills

  • Rust Docs by govcraft

    Efficiently loads and processes Rust crate documentation using LlamaIndex's HTML reader, with intelligent file selection logic to handle duplicate files and optional comprehensive parsing modes.

  • Windows CLI by simon-ami

    Control Windows command-line interfaces securely.

  • MATLAB by matlab

    Run MATLAB using AI applications with the official MCP server from MathWorks, enabling code execution, evaluation, and static analysis

  • Google Drive & Sheets by isaacphi

    Integrates Google Drive and Sheets functionality for file operations and spreadsheet data manipulation.

  • DeepContext (Semantic Code Search) by wildcard-official

    Symbol-aware semantic search for large codebases

  • Dify by yanxingliu

    Integrates with the Dify API to enable workflow execution and management for automated task processing and decision making across domains.

  • Apollo GraphQL by apollographql

    Enables AI agents to interact with GraphQL APIs by exposing operations as tools, supporting both local schema files and Apollo GraphOS integration with features for introspection and custom scalar mapping.

  • LLMBasedOS by iluxu

    Secure Arch Linux gateway that bridges LLMs with local system capabilities through specialized servers for file system, email, sync, and agent operations without exposing sensitive information

Frequently asked questions

How do I install Figma to Code?

Add the install command above to your Claude Code, Cursor, or Windsurf MCP configuration. Most servers register via npx, a local command, or a Docker image. Refer to the source repository for environment variables and credential requirements.

Which clients support Figma to Code?

Any MCP-compatible client works: Claude Desktop, Claude Code CLI, Cursor, Windsurf, Zed, and VS Code with the official MCP extension. OpenAI Codex and GitHub Copilot increasingly support MCP via adapter bridges.

Is Figma to Code free?

The server itself is typically open source. Any upstream service (API keys, paid tiers, hosted infrastructure) may have its own pricing. Check the source repository for details.