# MCP Figma to Code

> Use this tool when you need to convert Figma designs into functional React components with Tailwind styling, solving the problem of manual coding and design inconsistencies. It takes Figma designs as input and outputs pixel-perfect React code, streamlining the design-to-development workflow. Ideal for developers and designers seeking to automate the frontend development process and ensure design fidelity.

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

## Description

Transform Figma designs into pixel-perfect React + Tailwind components using the Model Context Protocol.

## Trust

- **Trust score (0–1):** 0.60
- **Verification tier:** unverified

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** mcp-remote
- **Runtime environment:** api
- **Category:** other
- **Updated:** 2026-06-12

## Source

- **Source listing:** [Glama](https://glama.ai/mcp/servers/e8n302iri7)
- **Repository:** <https://github.com/vincegx/Figma-to-Code_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": "vincegx-figma-to-code-mcp"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/vincegx-figma-to-code-mcp` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/vincegx-figma-to-code-mcp/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