Figma React

Name: Figma React
Author: MananSingh2001

de MananSingh2001versión 1.0.3i★ 0iSe ejecuta en tu computadora

Nombre en el registroio.github.MananSingh2001/figma-react

Cómo instalar

What it does

An MCP server that converts Figma designs into React code.

Connects Se ejecuta en tu computadora
Account or key No key needed
Category Diseño, imágenes y audio

Instalación

Elige la app de IA que usas y copia la configuración.

Pasó 1/1 revisiones · Funciona en tu computadora · ✓ Comandos revisados el 13 nov 2026

Primero: ¿qué IA usas?

ClaudeWeb · app · móvilChatGPTWebClaude CodeTerminalCursorEditor de códigoVS CodeEditor de códigoOtrasOtras apps

Elige tu app y los pasos aparecen abajo.

Funciona con Claude, pero hay que preparar algo antes

Instala Node.js en tu computadora primero (una sola vez) · Solo en la app de Claude para computadora (Windows o Mac), no en la web ni en el móvil

Que la IA lo instale

Copia este mensaje en un chat de Claude. La IA revisa tu equipo, te dice qué archivo va a cambiar y espera tu visto bueno cada vez.

Instala el MCP server Figma React para Claude en este equipo, en este orden: 1) Comprueba Node.js con node -v. Si falta, dime que lo instale desde https://nodejs.org/en/download; no lo instales tú. 2) Usa solo esta configuración (ya revisada por PopNx MCP): { "mcpServers": { "figma-react": { "command": "npx", "args": [ "-y", "@manansiingh/figma-react-mcp-server" ] } } } 3) Dime la ruta completa del archivo que vas a cambiar o el comando que vas a ejecutar y espera mi visto bueno. 4) No hace falta clave. 5) Haz lo acordado y comprueba que las herramientas de Figma React aparecen de verdad.

Este mensaje no lleva tu clave. Si hace falta una, la IA te pedirá que la pegues tú en el archivo o en el campo de la app.

1
Instala Node.js (si no lo tienes)
¿Ya está instalado? Compruébalo primero · Abre la Terminal, escribe este comando y pulsa Enter
node -v
- Aparece un número de versión, p. ej. v26.13.1 = ya está instalado, sáltate este paso
- Aparece "command not found" (en Windows, "is not recognized") = aún no está instalado, o acabas de instalarlo y debes cerrar y volver a abrir la Terminal
Cómo abrir la Terminal
Mac: pulsa ⌘ + Espacio, escribe Terminal y pulsa Enter
Windows: abre Inicio, escribe Windows PowerShell y elige Abrir
Si no está instalado: Abre la página oficial de descargas, elige la versión LTS y el instalador de clics: .pkg en Mac · .msi en Windows. Haz doble clic y sigue hasta el final. No necesitas ningún comando curl
Abrir la página de descarga de Node.js ↗
Al terminar, cierra la Terminal, ábrela de nuevo y ejecuta el mismo comando. Debe aparecer un número de versión: node -v
Se instala una vez y sirve para todo lo que usa Node.js
Hecho
Abre el archivo de configuración de la app de Claude de escritorio
SettingsDeveloperEdit Config
Hecho

Pega esta configuración y guarda el archivo

{
  "mcpServers": {
    "figma-react": {
      "command": "npx",
      "args": [
        "-y",
        "@manansiingh/figma-react-mcp-server"
      ]
    }
  }
}

Hecho

Cierra Claude y vuelve a abrirlo
Hecho
Pruébalo
Usa Figma React y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Claude dice que está usando Figma React o muestra una herramienta de Figma React en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión

ChatGPT todavía no puede conectar Figma React

Figma React se instala en tu computadora, pero ChatGPT solo conecta servidores que funcionan en la web

Lo que puedes hacer en su lugar

A · Usa una app que pueda conectar Figma React

Pasos para Claude →Instala Node.js en tu computadora primero (una sola vez) · Solo en la app de Claude para computadora (Windows o Mac), no en la web ni en el móvil
Pasos para Claude Code →Instala Node.js en tu computadora primero (una sola vez)
Pasos para Cursor →Instala Node.js en tu computadora primero (una sola vez)
Pasos para VS Code →Instala Node.js en tu computadora primero (una sola vez)

B · Otros en Diseño, imágenes y audio que funcionan con ChatGPT

Elegidos entre los más usados de la misma categoría, solo los que se conectan con una dirección y sin clave

Pascal 3D Editor✓ ChatGPT
Semiotic✓ ChatGPT
TypeUI✓ ChatGPT

Funciona con Claude Code, pero hay que preparar algo antes

Instala Node.js en tu computadora primero (una sola vez)

Que la IA lo instale

Copia este mensaje en un chat de Claude Code. La IA revisa tu equipo, te dice qué archivo va a cambiar y espera tu visto bueno cada vez.

Instala el MCP server Figma React para Claude Code en este equipo, en este orden: 1) Comprueba Node.js con node -v. Si falta, dime que lo instale desde https://nodejs.org/en/download; no lo instales tú. 2) Usa solo esta configuración (ya revisada por PopNx MCP): claude mcp add --scope user figma-react -- npx -y @manansiingh/figma-react-mcp-server 3) Dime la ruta completa del archivo que vas a cambiar o el comando que vas a ejecutar y espera mi visto bueno. 4) No hace falta clave. 5) Haz lo acordado y comprueba que las herramientas de Figma React aparecen de verdad.

Este mensaje no lleva tu clave. Si hace falta una, la IA te pedirá que la pegues tú en el archivo o en el campo de la app.

1
Instala Node.js (si no lo tienes)
¿Ya está instalado? Compruébalo primero · Abre la Terminal, escribe este comando y pulsa Enter
node -v
- Aparece un número de versión, p. ej. v26.13.1 = ya está instalado, sáltate este paso
- Aparece "command not found" (en Windows, "is not recognized") = aún no está instalado, o acabas de instalarlo y debes cerrar y volver a abrir la Terminal
Cómo abrir la Terminal
Mac: pulsa ⌘ + Espacio, escribe Terminal y pulsa Enter
Windows: abre Inicio, escribe Windows PowerShell y elige Abrir
Si no está instalado: Abre la página oficial de descargas, elige la versión LTS y el instalador de clics: .pkg en Mac · .msi en Windows. Haz doble clic y sigue hasta el final. No necesitas ningún comando curl
Abrir la página de descarga de Node.js ↗
Al terminar, cierra la Terminal, ábrela de nuevo y ejecuta el mismo comando. Debe aparecer un número de versión: node -v
Se instala una vez y sirve para todo lo que usa Node.js
Hecho
Abre la Terminal
Mac: pulsa Command+Espacio y escribe Terminal · Windows: abre PowerShell
Hecho

Pega este comando y pulsa Enter

claude mcp add --scope user figma-react -- npx -y @manansiingh/figma-react-mcp-server

Hecho

Escribe /mcp en Claude Code
Deberías ver Figma React en la lista como conectado
Hecho
Pruébalo
Usa Figma React y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Claude Code dice que está usando Figma React o muestra una herramienta de Figma React en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con Cursor, pero hay que preparar algo antes

Instala Node.js en tu computadora primero (una sola vez)

Que la IA lo instale

Copia este mensaje en un chat de Cursor. La IA revisa tu equipo, te dice qué archivo va a cambiar y espera tu visto bueno cada vez.

Instala el MCP server Figma React para Cursor en este equipo, en este orden: 1) Comprueba Node.js con node -v. Si falta, dime que lo instale desde https://nodejs.org/en/download; no lo instales tú. 2) Usa solo esta configuración (ya revisada por PopNx MCP): { "mcpServers": { "figma-react": { "command": "npx", "args": [ "-y", "@manansiingh/figma-react-mcp-server" ] } } } 3) Dime la ruta completa del archivo que vas a cambiar o el comando que vas a ejecutar y espera mi visto bueno. 4) No hace falta clave. 5) Haz lo acordado y comprueba que las herramientas de Figma React aparecen de verdad.

Este mensaje no lleva tu clave. Si hace falta una, la IA te pedirá que la pegues tú en el archivo o en el campo de la app.

1
Instala Node.js (si no lo tienes)
¿Ya está instalado? Compruébalo primero · Abre la Terminal, escribe este comando y pulsa Enter
node -v
- Aparece un número de versión, p. ej. v26.13.1 = ya está instalado, sáltate este paso
- Aparece "command not found" (en Windows, "is not recognized") = aún no está instalado, o acabas de instalarlo y debes cerrar y volver a abrir la Terminal
Cómo abrir la Terminal
Mac: pulsa ⌘ + Espacio, escribe Terminal y pulsa Enter
Windows: abre Inicio, escribe Windows PowerShell y elige Abrir
Si no está instalado: Abre la página oficial de descargas, elige la versión LTS y el instalador de clics: .pkg en Mac · .msi en Windows. Haz doble clic y sigue hasta el final. No necesitas ningún comando curl
Abrir la página de descarga de Node.js ↗
Al terminar, cierra la Terminal, ábrela de nuevo y ejecuta el mismo comando. Debe aparecer un número de versión: node -v
Se instala una vez y sirve para todo lo que usa Node.js
Hecho
Pulsa este botón para abrir Cursor
Abrir en Cursor
Cursor te pedirá confirmar; pulsa Install
Hecho
Abre el chat de IA de Cursor en modo Agent
Hecho
Pruébalo
Usa Figma React y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Cursor dice que está usando Figma React o muestra una herramienta de Figma React en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de Cursor el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con VS Code, pero hay que preparar algo antes

Instala Node.js en tu computadora primero (una sola vez)

Que la IA lo instale

Copia este mensaje en un chat de VS Code. La IA revisa tu equipo, te dice qué archivo va a cambiar y espera tu visto bueno cada vez.

Instala el MCP server Figma React para VS Code en este equipo, en este orden: 1) Comprueba Node.js con node -v. Si falta, dime que lo instale desde https://nodejs.org/en/download; no lo instales tú. 2) Usa solo esta configuración (ya revisada por PopNx MCP): { "servers": { "figma-react": { "type": "stdio", "command": "npx", "args": [ "-y", "@manansiingh/figma-react-mcp-server" ] } } } 3) Dime la ruta completa del archivo que vas a cambiar o el comando que vas a ejecutar y espera mi visto bueno. 4) No hace falta clave. 5) Haz lo acordado y comprueba que las herramientas de Figma React aparecen de verdad.

Este mensaje no lleva tu clave. Si hace falta una, la IA te pedirá que la pegues tú en el archivo o en el campo de la app.

1
Instala Node.js (si no lo tienes)
¿Ya está instalado? Compruébalo primero · Abre la Terminal, escribe este comando y pulsa Enter
node -v
- Aparece un número de versión, p. ej. v26.13.1 = ya está instalado, sáltate este paso
- Aparece "command not found" (en Windows, "is not recognized") = aún no está instalado, o acabas de instalarlo y debes cerrar y volver a abrir la Terminal
Cómo abrir la Terminal
Mac: pulsa ⌘ + Espacio, escribe Terminal y pulsa Enter
Windows: abre Inicio, escribe Windows PowerShell y elige Abrir
Si no está instalado: Abre la página oficial de descargas, elige la versión LTS y el instalador de clics: .pkg en Mac · .msi en Windows. Haz doble clic y sigue hasta el final. No necesitas ningún comando curl
Abrir la página de descarga de Node.js ↗
Al terminar, cierra la Terminal, ábrela de nuevo y ejecuta el mismo comando. Debe aparecer un número de versión: node -v
Se instala una vez y sirve para todo lo que usa Node.js
Hecho
Pulsa este botón para abrir VS Code
Abrir en VS Code
VS Code te pedirá confirmar; pulsa Install
Hecho
Abre el chat de IA de VS Code en modo Agent
Hecho
Pruébalo
Usa Figma React y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si VS Code dice que está usando Figma React o muestra una herramienta de Figma React en la respuesta, ya está conectado

Nombres de menú comprobados con la ayuda de VS Code el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Otras apps que usan MCP, como Windsurf, Zed o Gemini CLI, añaden servidores de forma distinta. Míralo en la lista de apps

Ver todas las apps que usan MCP →

La configuración JSON está en “Para desarrolladores”, abajo

¿Te atascaste? Pregunta a quien usa Figma React💬 Conversación →

Para desarrolladores: comandos de Terminal y configuración JSON

Instalado en tu computadora

Claude Code

claude mcp add --scope user figma-react -- npx -y @manansiingh/figma-react-mcp-server

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "figma-react": {
      "command": "npx",
      "args": [
        "-y",
        "@manansiingh/figma-react-mcp-server"
      ]
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "figma-react": {
      "command": "npx",
      "args": [
        "-y",
        "@manansiingh/figma-react-mcp-server"
      ]
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "figma-react": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@manansiingh/figma-react-mcp-server"
      ]
    }
  }
}

Esta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.

De un vistazo

Estrellas de GitHub i: 0
Descargas por semanai: 62/sem
Licencia i: Sin licencia indicada
Conexión: Se ejecuta en tu computadora
Transporte: stdio
Última versióni: 1.0.3
Categoríai: Diseño, imágenes y audio
Publicado en el registroi: 18 mar 2026
Último cambio de códigoi: –
Creador: MananSingh2001
Paquetes: npm: @manansiingh/figma-react-mcp-server
Repo: –
Estado en el registro: Activo

Qué apps pueden usarlo

Según cómo se conecta este servidor y la documentación de cada app, comprobado el 10 nov 2026.

Se ejecutan en tu computadora en

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

Todas las apps, con ventajas y desventajas →

Qué puede hacer

Se ejecuta en tu computadora; la lista de herramientas aparece en tu app de IA después de instalarlo.

Revisiones básicasi

Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 15 nov 2026

✓ Superada
El creador coincide con el repo
El nombre en el registro se verificó con la cuenta de GitHub MananSingh2001, dueña del repo
… Aún sin revisar
Sigue en mantenimiento
Todavía no hemos leído este repo en GitHub
… Aún sin revisar
Tiene licencia
Todavía no hemos leído este repo en GitHub
– No aplica
El endpoint responde
Este se ejecuta en tu computadora; no hay endpoint en internet
– No aplica
Inicio de sesión con OAuth
Se ejecuta en tu computadora y usa ajustes locales en su lugar
… Aún sin revisar
Sin instrucciones ocultas en las descripciones de herramientas
Se ejecuta en tu computadora; solo podemos leer listas de herramientas de endpoints en internet

Vulnerabilidades publicadas (OSV.dev)

Aún no revisado

Qué revisamos → · JSON

Creadores: pedir otra revisión o avisar de un dato erróneo

Iniciar sesión

Conversación

Pregunta, comparte un consejo o avisa de que no funciona. Ordenado por lo que la gente marcó como útil.

Aún no hay publicaciones. Sé la primera persona en preguntar o compartir.

Lo publicado aquí lo escriben usuarios, no el equipo de PopNx.

Inicia sesión para publicar

Reseñas de usuarios

Aún no hay reseñas

Inicia sesión para escribir una reseña

Comparado con otros en Diseño, imágenes y audioi

Más estrellas que el 0% de los otros 3080 servidores de esta categoría
Publicado en el registro más recientemente que el 2% de los otros 3080 servidores de esta categoría
Revisiones básicas iguales o mejores que el 100% de los otros 3080 servidores de esta categoría

Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.

Preguntas frecuentes

¿Es seguro Figma React?

Superó 1 de 1 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.

¿Qué claves o códigos necesita?

El registro no indica ninguna clave obligatoria, aunque algunos servidores te piden iniciar sesión la primera vez que los usas.

¿Se ejecuta en mi computadora o en la nube?

Se ejecuta en tu computadora. Tu app de IA lo inicia cuando hace falta, y los datos no pasan por los servidores del creador (a menos que el propio servidor llame a un servicio en línea).

¿Sigue en mantenimiento?

El repo de GitHub cambió por última vez –, y la última versión (1.0.3) llegó al registro hace 8 meses.

¿Qué apps pueden usarlo?

Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. También necesitas Node.js en tu computadora.

¿Qué puedo usar en su lugar?

En la misma categoría: Pascal 3D Editor, Figma MCP Server, Remocn: Remotion MCP server, Harness, ChatCut

Alternativas parecidas

Misma categoría, otros creadores, comandos ya revisados. Primero los oficiales, luego por estrellas.

Cómo leer una tarjeta:↓ Descargas por semanai★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi

Pascal 3D Editor

Create, inspect, validate, and save editable 3D building scenes with Pascal's MCP server.

de pascalorgMuy usado↓ 1 mil/sem★ 25,5 mil Estrellas de todo el repositorioActualizado anteayer

Computadora o nube✓ del servicio · pascal.app

Instalar

Figma MCP Server

The Figma MCP server brings Figma design context directly into your AI workflow.

de figmaMuy usado★ 2,2 milActualizado hace 13 meses

Se ejecuta en la nube✓ del servicio · mcp.figma.com

Cómo conectar

Remocn: Remotion MCP server

Hosted MCP for Remotion videos: search Remocn components, read docs, plan a video, preview it.

de RemocnEn crecimiento★ 1,7 milActualizado hace 5 días

Se ejecuta en la nube✓ del servicio · remocn.dev

Cómo conectar

Harness

Start Claude Code and Codex agents the person can watch, wait for them and read their answers.

de autonomous-aiEn crecimiento↓ 109/sem★ 1,5 milActualizado hace 27 días

Se ejecuta en tu computadora✓ harness.autonomous.ai

Instalar

ChatCut

AI video editor for agents: cut footage, add captions and motion graphics, export editable edits.

de ChatCut-IncEn crecimiento★ 1 milActualizado hace 16 días

Se ejecuta en la nube✓ del servicio · chatcut.io

Cómo conectar

Pascal 3D Editor — En la nube o instalado en tu equipo · Sin clave
Figma MCP Server — Funciona en la nube, sin instalar nada · Sin clave · En el directorio de Claude
Remocn: Remotion MCP server — Funciona en la nube, sin instalar nada · Sin clave
Harness — Se instala en tu equipo · Sin clave
ChatCut — Funciona en la nube, sin instalar nada · Sin clave

README del creador

No se encontró un README en el repo

Figma React

What it does

Instalación

Instala Node.js (si no lo tienes)

Abre el archivo de configuración de la app de Claude de escritorio

Pega esta configuración y guarda el archivo

Cierra Claude y vuelve a abrirlo

Pruébalo

Lo que puedes hacer en su lugar

Instala Node.js (si no lo tienes)

Abre la Terminal

Pega este comando y pulsa Enter

Escribe /mcp en Claude Code

Pruébalo

Instala Node.js (si no lo tienes)

Pulsa este botón para abrir Cursor

Abre el chat de IA de Cursor en modo Agent

Pruébalo

Instala Node.js (si no lo tienes)

Pulsa este botón para abrir VS Code

Abre el chat de IA de VS Code en modo Agent

Pruébalo

Instalado en tu computadora

De un vistazo

Qué apps pueden usarlo

Qué puede hacer

Revisiones básicasi

El creador coincide con el repo

Sigue en mantenimiento

Tiene licencia

El endpoint responde

Inicio de sesión con OAuth

Sin instrucciones ocultas en las descripciones de herramientas

Vulnerabilidades publicadas (OSV.dev)

Conversación

Reseñas de usuarios

Comparado con otros en Diseño, imágenes y audioi

Preguntas frecuentes

Alternativas parecidas

Pascal 3D Editor

Figma MCP Server

Remocn: Remotion MCP server

Harness

ChatCut

README del creador