# Figma to Code

> Use this tool when you need to convert Figma design files into functional code, such as HTML, CSS, and other assets, to streamline design-to-development workflows and reduce manual coding errors. It solves problems of manual design translation, providing a seamless bridge between designers and developers through automated code generation. The tool takes Figma URLs and API tokens as input and outputs customizable code files with flexible naming conventions and organization.

Canonical page: https://skillsregistry.net/skills/f2c-figma-to-code  
JSON: https://api.skillsregistry.net/v1/skills/f2c-figma-to-code

## Description

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.

## Trust

- **Trust score (0–1):** 0.68
- **Verification tier:** scanned
- **Last scanned:** 2026-09-19

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** mcp-remote
- **Runtime environment:** api
- **Category:** security
- **Updated:** 2026-09-19

## Source

- **Source listing:** [PulseMCP](https://www.pulsemcp.com/servers/f2c-figma-to-code)
- **Repository:** <https://github.com/f2c-ai/f2c-mcp>

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "f2c-figma-to-code"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/f2c-figma-to-code` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/f2c-figma-to-code/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt