Developer Tools · Image & Video

MCP Figma to React logo

MCP Figma to React

StudentOfJS/mcp-figma-to-react

This is a Model Context Protocol (MCP) server that converts Figma designs to React components. It provides tools for fetching Figma designs and generating React components with TypeScript and Tailwind CSS.

Install

Environment variables

FIGMA_API_TOKEN
GitHub stars
14
Category
Developer Tools, Image & Video
License
ISC
Updated
Oct 6, 2026

Features

  • Fetch Figma designs using the Figma API

  • Extract components from Figma designs

  • Generate React components with TypeScript

  • Apply Tailwind CSS classes based on Figma styles

  • Enhance components with accessibility features

  • Support for both stdio and SSE transports

Tools (8)

  • getFigmaProject

    Get a Figma project structure

  • getFigmaComponentNodes

    Get component nodes from a Figma file

  • extractFigmaComponents

    Extract components from a Figma file

  • getFigmaComponentSets

    Get component sets from a Figma file

  • generateReactComponent

    Generate a React component from a Figma node

  • generateComponentLibrary

    Generate multiple React components from Figma components

  • writeComponentsToFiles

    Write generated components to files

  • figmaToReactWorkflow

    Complete workflow to convert Figma designs to React components

Details on this page are taken from the project's README. Open README

Related MCP servers

More servers
Playwright logo

Playwright

microsoft/playwright

72.2k

Playwright is a framework for web automation and testing. It drives Chromium, Firefox, and WebKit with a single API — in your tests, in your scripts, and as a tool for AI agents.

Developer Tools
repomix logo

repomix

yamadashy/repomix

15.2k

Repomix is a tool that packs a codebase into an AI-friendly format, supporting local and remote repository processing and providing code compression, security checks and multiple output formats.

Developer Tools
UI-TARS-desktop logo

UI-TARS-desktop

bytedance/UI-TARS-desktop

12.9k

TARS is ByteDance's multimodal AI agent stack, shipping two projects: Agent TARS (a CLI and Web UI agent built on MCP) and UI-TARS-desktop (a desktop GUI agent).

Developer Tools
blender logo

blender

ahujasid/blender-mcp

10.6k

formerly blender-mcp — the PyPI package is now mcp-for-blender. Existing setups keep working; no config change is required. Read more.

Developer Tools
Playwright Browser Automation logo

Playwright Browser Automation

microsoft/playwright-mcp

9.2k

A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.

Developer Tools
2344 logo

2344

comet-ml/opik

7k

Opik is the open-source LLM observability and evaluation platform for AI agent tracing, LLM evaluation, prompt management, and production monitoring. Built by Comet. Apache-2.0 licensed, free to self-host the full platform, with 20,000+ GitHub stars.

Developer Tools