¿CON QUÉ IA?
Lo contó A quién le sirve. Diseñadores y equipos de marketing con un sistema de diseño en Figma que quieren que un agente monte pantallas, tarjetas o piezas siguiendo su estilo; hoy pide cierta soltura técnica.
Qué hicieron
La herramienta figma-use se conecta a la aplicación de escritorio de Figma mediante el protocolo de depuración de Chrome y ejecuta órdenes a través de la API de plugins de Figma. Los agentes pueden dar las órdenes una a una o enviar código JSX a una orden de dibujo. Pueden crear marcos, textos, iconos, cuadrículas, componentes y variantes. Incluye un archivo SKILL.md y un servidor MCP con más de 90 herramientas pensado para agentes.
Cómo salió
Las demos muestran componentes de botón y un calendario de Tailwind UI. El README no da mediciones. El JSX por entrada estándar no admite lógica, así que los componentes y variantes necesitan archivos .figma.tsx.
Conviene saber
Figma 126 y posteriores bloquean la depuración remota, así que hay que usar el modo de canalización del daemon (figma-use daemon start --pipe) o la alternativa OpenPencil que sugiere el README.
Qué necesitas
- La aplicación de escritorio de Figma y un archivo de pruebas
- La herramienta figma-use, publicada en el enlace de la ficha, con sus instrucciones de instalación
- Un agente de programación, como Claude Code, que use la herramienta
- Tu guía de estilo: colores, tipografías y espaciado
Cómo hacerlo tú, paso a paso
- Haz una copia de tu archivo de Figma y crea una página nueva para las pruebas. Trabajarás solo en ella.
- Instala figma-use siguiendo las instrucciones de su página. Si tu Figma es la versión 126 o posterior, arranca su daemon en modo de canalización con figma-use daemon start --pipe.
- Dale a tu agente el archivo SKILL.md de la herramienta o conéctalo a su servidor MCP (un estándar para conectar herramientas a agentes), que trae más de 90 herramientas.
- Pega el prompt de la ficha con el tipo de diseño, el enlace del archivo y tu guía de estilo.
- Deja que cree marcos, textos y componentes en la página nueva y que te describa lo que hizo.
- Para componentes con variantes, pide que use archivos .figma.tsx, porque el código JSX (el formato con el que se describe el diseño) enviado por entrada estándar no admite lógica.
- Revisa el resultado en Figma y ajusta lo que no cuadre con tu estilo.
Con una herramienta de línea de comandos para Figma como figma-use, crea un [tipo de diseño, por ejemplo una página de precios] en mi archivo de Figma [enlace del archivo], con marcos, textos y componentes reutilizables para [botón, tarjeta, etc.]. Sigue este estilo: [colores, tipografías y espaciado]. Habrás terminado cuando el diseño y los componentes existan en una página nueva y hayas descrito lo que hiciste. No modifiques ni borres mis páginas existentes.
Consejos
- Trabaja en una página nueva o en una copia. El prompt prohíbe tocar o borrar lo que ya existe.
- La documentación solo muestra demos, como botones y un calendario. Empieza con piezas sencillas.
- Si la conexión directa falla con tu versión de Figma, mira la alternativa OpenPencil que sugiere su documentación.
Preguntas frecuentes
¿Necesito saber programar?
Sí, o ayuda de alguien que sepa: se instala desde la terminal y se conecta a un agente de programación. Una vez montado, el diseño se pide en lenguaje normal.
¿Sustituye a un diseñador?
No: monta estructuras y componentes a partir de un estilo que defines tú. La dirección, el criterio y la revisión siguen siendo de una persona.
Fuentes
La conversación en Hacker News, 18 de enero de 2026 ↗En el directorio desde el 3 de octubre de 2026.
@chesny en X