¿Qué es Figma Make?
Figma Make es la herramienta de prompt-to-app impulsada por IA de Figma[1]. Describes una idea en texto y/o adjuntas un frame o imagen de Figma, y te genera un prototipo funcional e interactivo en minutos. Sin necesidad de saber diseñar ni programar.
Figma Make vive dentro del ecosistema de Figma y genera código de app real que puedes publicar o entregar a desarrollo.
Prueba Prompt-to-Prototype Gratis >
Pasos para crear una app con Figma Make
Para mostrarte cómo usar Figma Make, voy a crear una app de tutoría de código para niños desde cero, inspirada en la interfaz de Duolingo; y usaré otras funciones de Figma AI como Figma Agent para acelerar el proceso como un Pro.
Nota: Mi tutorial de Figma Make AI está hecho con Figma Pro[2]. Pero incluso si usas la versión limitada del plan Freemium de Figma AI, los pasos serán los mismos.
Abre y configura Figma Make
Al abrir el dashboard de Figma, verás el banner de Figma Make arriba del todo como una barra interactiva de prompts. Empieza desde ahí o desde ‘www.figma.com/make’; yo prefiero lo segundo.
Aquí describes tu idea de app en lenguaje natural. Puedes añadir referencias de interfaz como una imagen, un archivo Design MD, un PRD, o incluso un enlace a un frame de diseño de Figma. Lo mejor es que puedes elegir qué modelo de IA potenciará tu app de Figma Make: Gemini, GPT, o Claude. Yo elegiré un modelo enfocado en diseño, Gemini 3.1 PRO.
Cómo hacer Diseño Web con Gemini 3.1 PRO >
Introduce el prompt de texto y/o sube referencias
En el prompt puedes detallar una sola pantalla o un flujo completo. Deja que la IA decida el estilo o dale referencias de texto o visuales. Mi consejo para un "vibe coding" en serio es ser lo más detallista posible.
Voy a empezar con el prompt para el nivel de preguntas de mi app (la llamaré Coddly) y subiré algunas capturas de pantalla de Duolingo como referencia:
"Crea una app de tutoría de código para niños llamada Coddly. Empieza con una pantalla de inicio/mapa de unidades que muestre una ruta de aprendizaje con niveles bloqueados y desbloqueados. Luego, una pantalla de lección con 2 tipos de preguntas: (1) seleccionar la imagen correcta (de entre 4) para una descripción de lenguaje de programación, (2) escribir una línea de código corta tocando bloques de palabras. Termina con una pantalla de celebración de nivel completado que muestre la XP ganada.
Usa una interfaz lúdica y gamificada inspirada en la UI de Duolingo adjunta. Pero con una paleta de colores morados y amarillos, tarjetas redondeadas, una mascota, barra de progreso arriba y navegación por pestañas abajo."
Mientras procesa tu solicitud, puedes ver su razonamiento en directo. Trabaja en segundo plano mientras la pestaña esté abierta y te avisa cuando termina. Ni siquiera tuve que dar muchos detalles para rellenar la pantalla de preguntas; lo resolvió muy bien según el contexto.
Procesar mi prompt tardó ~4 minutos y costó 54 créditos de IA. El resultado es una app interactiva de 4 pantallas con el flujo y el estilo casi idénticos a lo que imaginaba.
Edición manual y con IA de una pantalla
Ahora quiero diseñar una mascota bien hecha, que la 'Unidad 1' se llame 'Coddly' y que ambas aparezcan en la cabecera de todas las pantallas. Aquí es donde la edición bidireccional de Figma Make resulta clave:
i) Selección y edición manual
Elijo la opción de Edición Manual bajo la barra de chat. Simplemente hago clic en el elemento (de texto) que quiero editar y escribo los cambios.
Las ediciones manuales en Figma Make no consumen créditos. Son ideales para cambios puntuales en una pantalla.
ii) Editar pidiéndoselo a la IA
Para cambios más complejos o que afecten a varias pantallas, lo más rápido es pedírselo directamente al chatbot:
“Reemplaza el logo actual en la pantalla de inicio y en la final por la imagen de la mascota adjunta en el prompt. Además, haz que las cabeceras de todas las pantallas sean iguales a las de la pantalla de inicio.”
*Nota: Diseñé la mascota con la herramienta text-to-vector de Figma Weave.
Y en 4 minutos y 90 créditos, mi mascota ya estaba colocada en las 4 pantallas tal como lo pedí.
Cómo generar interfaces únicas con Lovable >
Añade una nueva pantalla con un prompt
Ahora que estamos contentos con las pantallas actuales, agreguemos una nueva, por ejemplo, para el 'Registro de rachas'. Solo se lo pedimos al Figma App Maker en lenguaje sencillo y este seguirá la misma lógica y estilo de las anteriores; esta vez sin darle la referencia de Duolingo.
“Añade una pantalla de 'Registro de rachas y desafíos' en línea con la app existente. Debe ser accesible a través del icono de objetivo en la barra de navegación.”
Se hizo en 2 minutos, consumió 56 créditos y quedó perfecto.
Ya te puedes imaginar cuánto tiempo de "vibe coding" te ahorra Figma Make al generar el andamiaje, las pantallas y sus conexiones en comparación con crearlas a mano.
Probé las mejores herramientas de Vibe Coding de 2026 >
Prueba las interacciones en el modo preview
Por último, antes de meter backend, APIs y desplegar todo para terminar la app, deberías comprobar la interactividad en la preview de Figma Make. Para ello, haz clic en el icono de reproducir arriba a la derecha y se abrirá una ventana con la previsualización.
En mi preview, estoy encantado con las interacciones: capturó bien el flujo, los botones responden, los estados correcto/incorrecto de las preguntas funcionan y las microanimaciones son divertidas. La preview, por supuesto, no consume créditos.
Además, puedes compartir el enlace de visualización con cualquiera, o hacer que esté disponible como app alojada en vivo desde la opción 'Publish' en la cabecera de Figma Make.
Previsualiza mi app Coddly de Figma Make >
Exportar la app de Figma Make a código
Con la app de 5 pantallas de Coddly lista e interactiva, el siguiente paso natural es el handoff para producción. Figma Make te ofrece dos opciones para esto.
La primera: pasa a la vista de código y haz clic en el icono de descarga; obtendrás al instante un zip con todo el código. Incluye un proyecto real en React + TypeScript con Tailwind CSS, config de Vite y cada pantalla como un componente independiente (Home.tsx, Lesson.tsx, Celebration.tsx, StreakAndChallenges.tsx). Además, extrae automáticamente elementos compartidos como BottomNav y Header. Las imágenes vienen vinculadas y las rutas listas para usar. Ábrelo en VS Code y listo.
La segunda opción es la integración IDE de Figma Make con GitHub y Supabase, permitiéndote subir los cambios a un repositorio y linkear un backend real sin salir del navegador.
También hay un servidor MCP de Figma para que agentes de codificación por IA como Claude Code o Cursor lean el contexto de tu archivo Figma directamente, logrando que el paso de diseño a código en Figma sea súper preciso.
Y si necesitas traer contexto del producto mientras lo construyes, los Conectores de Figma Make soportan Notion, Slack, Monday.com, Marvin y Sprig.
Comparativa de herramientas gratuitas de Figma a Código con IA >
Mis consejos para usar Figma Make
El creador de apps Figma Make es rapidísimo e increíblemente potente, como todo el kit de Figma AI. Sin embargo, los créditos vuelan, a veces malinterpreta prompts y los diseños iniciales pueden ser genéricos. Como esto pasa con cualquier creador de apps con IA de hoy, aquí tienes algunos trucos que he aprendido para exprimir Figma Make al máximo:
Sé muy específico en tu primer prompt: Make rinde mejor al principio. Describe el número de pantallas, flujo, estilo de UI, paleta de colores e interacciones de entrada. Cuanto más contexto des en el prompt 1, menos pagarás para corregirlo luego.
Y si no estás muy seguro y prefieres hacer brainstorming, usa el modo 'Plan' en lugar del modo 'Build' durante la configuración inicial.
Usa ediciones manuales para retoques pequeños: Editar haciendo clic no cuesta créditos. Reserva la IA para cambios estructurales de pantallas, layouts o lógica de rutas. No quemes créditos solo por cambiar una etiqueta de texto.
Pídele a la IA una sola cosa por vez: Acumular cambios en un solo prompt suele terminar en tareas a medias o malentendidos. Una instrucción clara por iteración mantiene a Make enfocado y permite revertir cambios si es necesario.
Entra a la pestaña de código para arreglos rápidos: Detalles pequeños como un color equivocado o un mal espaciado se corrigen más rápido tocando el código que volviéndoselo a pedir a la IA.
Diseña conceptualmente antes de programar: El diseño que saca Figma Make de primeras suele ser algo plano. Para solucionarlo de forma elegante, rápida y económica, te recomiendo que antes de programar, pulas el diseño con Banani AI.
Así es como Banani diseñaría las pantallas de la misma app con los mismos prompts.
Ver y editar la idea de Banani para la UI de Coddy App >
Combinando Figma Make con las IAs de Figma
Figma Make es una de las tantas herramientas del ecosistema Figma AI en 2026. Se puede combinar con otras IAs para flujos de producto completos. Para crear una app, puedes empezar en Figma Weave para generar assets visuales, organizarlos usando Figma Agent en el lienzo, e importar los frames terminados a Figma Make para la codificación y conexión de backend. Para cerrar el círculo, Figma Sites te deja publicar tu app como sitio en vivo con un clic.
Dicho esto, este ecosistema de Figma AI sigue en beta y consume créditos muy rápido. Si buscas una IA especializada de diseño a código con integración total con Figma, prueba Banani AI.
Preguntas frecuentes sobre Figma Make AI
¿Qué modelo de IA utiliza Figma Make?
Figma Make soporta múltiples modelos: Claude Sonnet 4.6 y Opus, Gemini 3 Flash y 3.1 Pro, y GPT-5.5. Puedes elegir tu modelo preferido antes de generar.
¿Qué lenguaje de programación genera Figma Make?
Figma Make genera React y TypeScript estilizado con Tailwind CSS. Te entrega un proyecto estándar basado en Vite con componentes, rutas y estilos listos.
¿Cómo genera Figma AI el código de los componentes visuales?
Figma Make lee tu prompt de texto junto con cualquier referencia visual y usa el modelo de IA seleccionado para construir el código que replique exactamente ese layout, interacción y estilo.
¿Cuál es la diferencia entre Figma Make y Figma Sites?
Figma Make genera web apps interactivas y funcionales con código real a partir de prompts; ideal para prototipos de alta fidelidad. Figma Sites, en cambio, publica los diseños estáticos de tus lienzos de Figma como sitios web responsivos y en vivo.
¿Cuál es la mejor alternativa a Figma Make para el diseño de apps?
Para programar proyectos completos en modo "vibe coding", opciones como Lovable y Bolt.new son muy potentes. Sin embargo, para prototipos ágiles centrados en la interfaz de usuario, Banani AI es la mejor alternativa a Figma Make.
Referencias
[1] https://www.figma.com/make
[2] https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make
