![Foto de portada de Del diseño en Figma al código generado por IA con Claude Code [ONLINE]](https://images.lumacdn.com/cdn-cgi/image/format=auto,fit=cover,dpr=2,background=white,quality=75,width=400,height=400/event-covers/qp/7a537243-d8c7-47f3-a317-c0c645a9c635.png)
![Foto de portada de Del diseño en Figma al código generado por IA con Claude Code [ONLINE]](https://images.lumacdn.com/cdn-cgi/image/format=auto,fit=cover,dpr=2,background=white,quality=75,width=400,height=400/event-covers/qp/7a537243-d8c7-47f3-a317-c0c645a9c635.png)
Del diseño en Figma al código generado por IA con Claude Code [ONLINE]
Ven a descubrir todo lo que puedes construir con Claude Code a partir de tus diseños de Figma en apenas 3 horas —esta vez en edición online— sin prisas y con foco.
📌 ¿A quién está dirigido?
Este taller está pensado para diseñadores de Figma que quieren aprender a usar Claude Code para convertir sus diseños en código real, sin escribir ni una sola línea. Claude Code hará TODO por nosotros… ¡Suena bien, ¿verdad?!
📌 ¿Qué NO es este taller?
No es un curso de programación. No vas a salir sabiendo React. No necesitas saber HTML, CSS ni JavaScript. Tampoco estarás picando código.
📌 Lo que aprenderás
¿Qué es un terminal y por qué no hay que tenerle miedo? Te enseñamos, paso a paso, cómo instalar las herramientas que necesitas
¿Qué es Claude Code? Qué lo diferencia de otras herramientas de código y por qué es ideal para diseñadores
Setup inicial: cómo instalar y configurar el entorno para que Claude entienda tu proyecto (5-6 cosas, 10-15 minutos)
Figma MCP: cómo configurarlo y cuáles son los métodos más importantes al conectarnos con Figma
Vamos a repasar rápidamente algunos términos populares: prompt, modelos, rules, skills, spec-driven development
Generar código sin codear: con Claude Code vamos a generar código directamente desde los diseños en Figma
Buenas prácticas para que tus diseños en Figma sean fácilmente interpretados por Claude Code
Al terminar, subiremos una landing con hero, secciones de contenido y footer, construida por Claude Code a partir del diseño en Figma
📌 Cómo lo haremos
Primero lo haré yo de principio a fin, siempre abierto a preguntas o cambios a propuesta de los asistentes. Y sí, Claude a veces se equivoca — veremos cómo corregirlo y cómo eso también forma parte del proceso. Después, facilitaré a todos el vídeo completo del taller, todos los prompts utilizados y una copia del código generado, para que cada uno pueda, a su ritmo, repetir cada paso en casa y llevárselo a su portfolio o integrarlo en su flujo de trabajo. Además, tendremos un espacio en Slack donde todos los asistentes podrán seguir el tema y resolver dudas.
📌 Qué vas a necesitar
Vamos a conectarnos por Google Meet, puedes solo observar o puedes ir probando cosas en directo. Si quieres practicar, necesitarás una suscripción Pro o Max de Claude. Y ten a mano un bocadillo o algo para picar, que son 3 horas. 😉
📌 Agenda
17:45–18:00 · Conexión, comprobación técnica y calentando motores
18:00–21:00 · Sesión práctica con pausa intermedia incluida
21:00–21:15 · Un momento más para Q&A abierto y networking
🚀 Sobre el organizador
Carlos Alberto es Senior UX Designer en el Grupo Alpega. Años atrás organizaba los meetups de Sketch App en Barcelona y, como tantos, acabó migrando a Figma. Desde hace meses —y eso es mucho en el mundo de la IA— genera código a partir de sus diseños en Figma, especialmente para el Design System de su empresa, y dedica las noches a su side project open source. Después de probar Copilot, Cursor y Claude… ya tiene su favorito. 😄