# Figma to React

> Use this tool when you need to convert Figma designs into production-ready React components with TypeScript and Tailwind CSS. It solves the problem of manually recreating designs in code, enhancing accessibility and consistency between design assets and frontend implementations. The tool takes Figma designs as input and outputs generated React code with applied Tailwind classes, making it ideal for workflows where designers and developers collaborate.

Canonical page: https://skillsregistry.net/skills/studentofjs-figma-to-react  
JSON: https://api.skillsregistry.net/v1/skills/studentofjs-figma-to-react

## Description

MCP Figma to React Converter is a server that transforms Figma designs into React components with TypeScript and Tailwind CSS. It provides tools for fetching Figma designs via the API, extracting components, generating React code with accessibility enhancements, and applying appropriate Tailwind classes based on Figma styles. The server supports both stdio and SSE transports, making it versatile for integration into various development workflows where designers and developers need to bridge the gap between design assets and production-ready React components.

## Trust

- **Trust score (0–1):** 0.95
- **Verification tier:** verified
- **Last scanned:** 2026-09-28

## Facts

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

## Source

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

## 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": "studentofjs-figma-to-react"
    }
  }
}
```

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