Portafolio · Laboratorio IA
Designer → Builder (Figma + AI)
La colaboración entre diseñadores, inteligencia artificial y desarrollo: un flujo donde el diseño se convierte en el contexto que la IA utiliza para generar componentes reales de código.
El Laboratorio
Del diseño como especificación al diseño como contexto
Este laboratorio explora uno de los cambios más importantes que está viviendo el diseño de producto: la colaboración entre diseñadores, inteligencia artificial y desarrollo.
A través de la serie Designer → Builder de Figma, he trabajado en un flujo donde el diseño deja de ser únicamente una especificación visual para convertirse en el contexto que la IA utiliza para generar componentes reales de código.
Durante el proceso aprendí a utilizar Figma Dev Mode y el servidor Figma MCP para inspeccionar componentes, interpretar su estructura, variantes, propiedades, variables y design tokens, y transformar esa información en implementaciones HTML y CSS mediante IA.
El Flujo de Trabajo
Un proceso profesional entre diseño y desarrollo
Más allá de generar código, el foco del ejercicio consistía en establecer un flujo de trabajo profesional basado en planificación, verificación e iteración continua entre diseño y desarrollo.
El diseño se mantiene como fuente de verdad, mientras la IA se integra dentro de un proceso sólido que respeta la intención original del producto.
Prompt Engineering
El prompt como herramienta de diseño
Uno de los aspectos más interesantes del laboratorio fue el uso de prompt engineering como herramienta de diseño. En lugar de solicitar directamente la generación del componente, el proceso se estructuraba en diferentes etapas:
- Análisis del contexto de Figma.
- Planificación de la implementación.
- Identificación de decisiones provenientes del diseño y del repositorio.
- Validación de inconsistencias.
- Revisión final antes de modificar cualquier archivo.
Este enfoque demuestra cómo la IA puede integrarse dentro de un proceso de desarrollo sólido sin perder la intención original del diseño.
Objetivos
Qué buscaba este laboratorio
- Comprender el nuevo flujo de trabajo entre Diseño + IA + Desarrollo.
- Aprender a utilizar Figma Dev Mode como fuente de verdad del diseño.
- Traducir componentes de Figma en código utilizando IA.
- Trabajar con Design Tokens compartidos entre diseño y desarrollo.
- Validar automáticamente que la implementación respeta el diseño original.
- Explorar el potencial del Prompt Engineering aplicado al desarrollo de interfaces.
Herramientas
Stack utilizado
- Figma
- Figma Dev Mode
- Figma MCP Server
- Claude
- Design Tokens
- HTML
- CSS
Aprendizaje
La IA amplía las capacidades del diseñador
Este laboratorio refuerza una idea que considero clave para el futuro del diseño de producto:
La IA no sustituye al diseñador, sino que amplía sus capacidades.
El diseñador deja de limitarse a entregar pantallas y pasa a orquestar un proceso donde el diseño, el código y la inteligencia artificial trabajan de forma integrada para acelerar el desarrollo sin comprometer la calidad ni la intención del producto.