Cómo crear una app en Figma Make

En el último directo en YouTube estuvimos experimentando con una nueva forma de hacer vibe coding y de crear una app en Figma Make, dejando atrás los prompts largos y empezando a construir usando prompts por fases.

La idea surgió después de ver que la técnica de usar un único prompt largo apoyado en un wireframe base no daba los resultados esperados.

Así que probamos algo diferente: utilizar las mismas guidelines del MVP del generador de Portfolio UX, con un par de ajustes, e ir avanzando paso a paso.

El resultado fue mucho más claro, controlado y predecible, ideal para quienes quieren entender cómo construir proyectos reales dentro de Figma Make sin perder consistencia.

Aquí arriba te dejo el vídeo con el tutorial y debajo los 10 prompts en español (porque en Figma Make los ejecutamos en inglés) por si quieres probarlos o adaptarlos a tus propios proyectos.

Prompts para crear la app

App Shell & Navigation

• Crea la estructura base de la aplicación siguiendo las guidelines ya activas.
• Debe construir el esqueleto visual y funcional principal:
• Layout responsive con dos apartados: “Páginas” y “Medios”.
• Header con el nombre o logo.
• Navegación clara (sidebar o topbar) para cambiar entre secciones.
• Contenedor principal para los módulos.
• Sin lógica aún, solo estructura, navegación y coherencia visual con Tailwind.

Data Models

• Define los modelos de datos principales:
• Page: título, tipo, estado, categoría, contenido Markdown, HTML generado, etc.
• Media: nombre, URL, alt, dimensiones, uso en páginas, etc.
• Pueden ser interfaces o estructuras JSON, sin base de datos aún.

Módulo “Páginas” (MVP)

• Construye el apartado donde se gestionan las páginas del sitio:
• Lista o tabla de páginas.
• Botón “Crear nueva página”.
• Pregunta tipo de página (Project VX o Genérica).
• Si es genérica: pregunta si se vincula al Botón primario, Secundario o Footer.
• Si un slot ya está ocupado: aviso y bloqueo.
• Al desvincular, pasa a draft.
• Usa tu wireframe como referencia antes de ejecutar el prompt.

Módulo “Medios” (MVP)

• Crea el apartado de gestión de imágenes:
• Grid responsive de miniaturas.
• Botón “Añadir imagen” con opciones:
• URL externa.
• Subida desde el dispositivo.
• Selección desde el sistema.
• Mostrar solo nombre de archivo (sin base64).
• Al hacer clic: modal con vista ampliada, alt editable, datos técnicos, lista de uso y opción eliminar.

Editor Markdown

• Crea el editor dentro de Páginas:
• Área de edición para Markdown.
• Toolbar con negrita, cursiva, headings, listas, enlaces, tablas, citas, código.
• Botón “Insertar imagen” con la modal de Medios.
• Botón “Vista previa” para renderizar HTML con Tailwind y volver al modo edición.
• Sin mostrar base64; solo nombres o vistas previas.

Conversión Markdown a HTML + Árbol de archivos

• Convierte automáticamente Markdown en HTML con Tailwind:
• Genera una vista de árbol de archivos.
• Agrupa páginas por tipo: Project VX o Genéricas (Primario, Secundario, Footer).
• Cada nodo muestra nombre, tipo y estado (Publicado/Draft).

Reglas de vinculación

• Aplica las reglas de conexión entre páginas y botones:
• Solo una página por Botón primario y Secundario.
• Aviso si se intenta duplicar.
• Desvincular = pasa a draft.
• Las de Footer pueden ser draft o publicadas.
• Mostrar visualmente el estado y la ubicación de cada página.

Descarga / Exportación ZIP

• Crea la opción para descargar todo el sitio:
• Botón “Descargar todo”.
• Genera un ZIP con HTML, CSS (Tailwind) e imágenes.
• Mantiene estructura /pages/, /media/, /styles/.
• Mensaje de confirmación al finalizar.

Accesibilidad & Responsive Review

• Revisa accesibilidad y adaptabilidad:
• Imágenes con atributo alt.
• Foco visible y navegación por teclado.
• Contraste WCAG AA.
• Layouts responsive (xs a 2xl).
• Corrige inconsistencias visuales o de comportamiento.

Prompt 10, QA / Pruebas finales

• Ejecuta las pruebas de usuario:
• Crear y vincular página genérica al botón primario.
• Intentar duplicar (debe avisar).
• Desvincular y verificar draft.
• Insertar imágenes por URL, carga y selección desde Medios.
• Verificar grid y uso de imágenes.
• Crear página Project VX y ver categoría.
• Probar vista previa Markdown.
• Descargar ZIP y comprobar estructura.

Si quieres ver los demás tutoriales dedicados a este proyecto los tienes en YouTube.