#204 Figma Make: creando un producto sin programar

Si llevas un tiempo en diseño digital, ya sabes que la IA está revolucionando el mundo digital. Por eso, el diseñador Christian Albelo viene a contarnos cómo crear productos digitales funcionales con Figma Make.

Escucha este episodio si te interesa aprender Vibe Design con Figma Make.

>> Descargar transcripción

Christian tiene ese don de explicar lo complicado sin que lo parezca, por eso te recomiendo que escuches este episodio y que entres al curso online para que aprendas a manejar Figma Make, ¡En tan sólo 2 horas! y por 49€.

En este episodio aprenderás:

• Entender qué es realmente Figma Make y por qué ya no estamos hablando solo de prototipos, sino de crear apps funcionales hasta conectarlas con bases de datos y APIs reales.
• Descubrir qué es el Vibe Coding y cómo puedes “programar” con Figma Make sin saber programar
• Tener claro qué está cambiando en UX (y qué no): la IA acelera el trabajo, pero el criterio sigue siendo lo que marca la diferencia.

---

Cuando un prototipo empieza a comportarse como un producto digital real

Lo primero que le pregunté a Christian fue lo básico: qué es Figma Make para alguien que todavía no lo ha tocado.

Su respuesta fue que Figma Make es ya parte del ecosistema de Figma que usa inteligencia artificial para crear interfaces funcionales a través de prompts creando interfaces que funcionan.

Esto significa que si quieres prototipar un carrito de compra que sume productos, que actualice el total, que responda al clic del usuario, ya no tienes que construirlo animación a animación ni pedirle a un desarrollador que lo monte para poder enseñárselo a alguien. Le describes lo que quieres a la IA y ella genera la lógica.

Pero lo que me parece más interesante de todo esto no es la velocidad, que también. Es que el tipo de trabajo que hacemos como diseñadores está cambiando de forma. Estamos empezando a entregar código, no pantallas.

---

Vibe coding: programar sin saber programar

En el episodio hablamos bastante del concepto de vibe coding, que es básicamente esto: darle instrucciones a una IA para que programe por ti. Sin tocar el código. Sin entender la estructura de archivos. Sin saber qué framework está usando por debajo.

Y Christian es el ejemplo perfecto de que esto funciona, porque él no es programador. Tiene años de experiencia en diseño web, ha pasado por Dreamweaver, por Joomla, por WordPress, conoce algo de HTML y CSS. Pero backend, lógica de programación, estructuración de bases de datos… nada de eso es su campo.

Y aun así, en el reto de febrero de la membresía Tribux, presentó dos aplicaciones que dejaron a todo el mundo con la boca abierta.

La primera era una app para aprender phrasal verbs en inglés. Con tarjetas de aprendizeo, cuestionario de repaso, panel de administración para editar el contenido y base de datos conectada para guardar el progreso del usuario. La segunda era un simulador de bolsa: login, compra y venta de acciones ficticias, conversión de divisas, y precios actualizados en tiempo casi real gracias a una API gratuita conectada desde Figma Make.

Las dos construidas sin escribir una sola línea de código a mano.

Cuando le pregunté si cualquiera podía hacer lo mismo, fue muy claro: «Yo estoy maravillado con todo lo que he podido hacer, que a lo mejor había querido hacer antes pero no había podido por falta de conocimientos de programación. Y además, estoy aprendiendo un montón en el proceso.»

---

El debate que divide a la comunidad de diseño

Claro que hay tensión alrededor de todo esto. La hay en Twitter, en LinkedIn, en los comentarios de YouTube. Hay quien dice que Figma está muerto porque el vibe coding ha llegado antes a otras herramientas. Hay quien dice que los perfiles de diseño van a desaparecer. Y hay quien directamente entra en pánico cada vez que sale una noticia nueva sobre IA.

Christian tiene una postura que me parece muy sensata: el cambio está aquí, pero los que van a destacar son los que tengan criterio profesional. La IA puede generar interfaces, sí. Pero si el prompt es genérico, el resultado también lo es. Lo estamos viendo ya: hay webs que en cuanto las ves sabes que están hechas con vibe coding porque todas se parecen, todas usan los mismos componentes de Tailwind, todas tienen el mismo aspecto de «hecho por la IA».

El propio CEO de Figma, Dylan Field, lo dijo:

Van a destacar las aplicaciones que tengan una intención detrás, que parezcan hechas con criterio. La IA acelera, pero no reemplaza el juicio. – Dylan Field

Y sobre si Figma está muerto… los números no engañan. En el cuarto trimestre de 2024, Figma tuvo su mejor año económico hasta la fecha. Además, cambiar el ecosistema completo de diseño de una empresa grande no es algo que se haga de un día para otro. Figma lleva años muy arraigado en los flujos de trabajo de equipos de producto, y eso no desaparece porque aparezca una herramienta nueva.

---

Lo que viene: Figma, Claude Code y el protocolo MCP

Una de las partes de la conversación que más me gustó fue cuando hablamos de la integración de Figma con Claude Code a través del protocolo MCP, que son las siglas de Model Context Protocol.

La idea es simple pero poderosa: en lugar de darle a la IA un prompt genérico para que genere código, puedes darle el contexto completo de tu archivo de Figma. Los componentes de tu design system, las variables, los tokens, los layouts. La IA no tiene que inventarse nada porque ya tiene toda la información.

El resultado es código que respeta tu sistema de diseño, que usa tus propios estilos, que no se parece a los mil proyectos genéricos que genera alguien que le pide a la IA «hazme una app de tal cosa». Es la diferencia entre una herramienta que trabaja a ciegas y una que trabaja con contexto.

---

¿Hasta dónde llega esto?

Le pregunté a Christian algo que creo que se pregunta mucha gente: ¿esto es un prototipo avanzado o ya estamos hablando de algo que puede ir a producción?

Su respuesta fue honesta. A día de hoy, lo máximo que recomendaría es un MVP. No porque la tecnología no sea impresionante, sino porque hay variables que todavía no están resueltas del todo: la seguridad, la estructura del código, la escalabilidad. Para un proyecto real con datos sensibles de clientes, hace falta que un desarrollador revise y refactorice lo que genera la IA.

Pero para validar una idea, para enseñársela a stakeholders, para hacer un test de usuario con datos reales, para publicar algo funcional de forma provisional… Figma Make ya está ahí. Y eso es un cambio enorme respecto a lo que podíamos hacer hace dos años.

---

Por qué este momento importa

Lo que más me quedó de la conversación con Christian es esto: llevamos años hablando de que el diseño y el desarrollo se iban a fusionar. De que los diseñadores íbamos a trabajar cada vez más cerca del código. De que el handoff era un cuello de botella que había que eliminar.

Con Figma Make, eso está pasando de verdad. No de forma teórica. No como tendencia que «viene». Está pasando ahora, en los equipos que ya están usando estas herramientas, en los retos de la membresía, en los proyectos freelance de gente como Christian.

El diseñador que aprenda a entregar prototipos funcionales, conectados a datos reales, testeables por usuarios reales, va a aportar un valor que antes era exclusivo del perfil de desarrollo. Y eso cambia la conversación dentro de cualquier equipo de producto.

Si todavía no has probado Figma Make, este es el momento.

Aprende Figma Make

Aprende desde cómo escribir los prompts hasta la conexión con bases de datos y APIs con figma Make con Christian. Conoce este curso de 2 horas por 49€.

Si hay términos que todavía te suenan raros, te dejo también el enlace al glosario de Figma Make que diseñó María Morente, una de las diseñadoras de tribUX. Está hecho, cómo no, con Figma Make.