Imagina tomar un dashboard completo diseñado en Figma y, sin escribir una sola línea de código manualmente, obtener una aplicación funcional con React y Tailwind que puedes compartir con tu equipo mediante una URL. Eso es exactamente lo que permite Figma Make, la tercera capa de Figma que transforma tus diseños en código ejecutable real.
¿Qué diferencia a Figma Make de Design y Prototype?
Figma organiza su flujo de trabajo en tres capas bien diferenciadas. Design es la mesa de trabajo donde construyes todo visualmente: frames, componentes, variables y estilos [0:08]. Prototype es la simulación, donde conectas pantallas con flechas, smart animates y overlays para hacer clic entre vistas, pero sin código real detrás [0:14]. Figma Make va mucho más allá: produce código funcional con React y Tailwind, genera una URL compartible y permite recibir feedback directamente de tus stakeholders [0:24].
La analogía es clara: Design es el plano, Prototype es la maqueta y Make es la casa ya construida. La ventaja principal es que no necesitas empezar de cero, porque Make lee, analiza y reproduce tu diseño existente como código funcional [0:35].
¿Cómo se configura un proyecto en Figma Make desde cero?
El proceso comienza creando un nuevo archivo de Figma Make dentro de tu proyecto [0:46]. El entorno es simple: un campo de prompt y algunos ejemplos para explorar ideas.
¿Cómo vincular diseños existentes?
Para conectar tus diseños, seleccionas el frame que quieres convertir, haces clic derecho y copias el enlace a esa selección con copy link to selection [1:04]. De vuelta en Make, usas el botón de attach a design y pegas ese enlace. El sistema lo reconoce automáticamente como un frame de Figma Design [1:20].
¿Qué es un Make kit y cómo se crea?
Una funcionalidad clave es la posibilidad de crear un Make kit, que importa las variables, estilos de texto, efectos y componentes de tu librería de diseño [1:51]. Se crea seleccionando create kit, partiendo desde cero y añadiendo tu librería personalizada. Esto garantiza que Make respete la identidad visual de tu proyecto en cada iteración [2:05].
El prompt para la primera generación debe ser específico. Por ejemplo: "construye una app de finanzas personales con las transacciones en esta vista, respeta los espacios, los tamaños, y el tab bar se mantiene fijo en la zona inferior" [1:33].
¿Cómo se itera y se mejora la app generada?
Tras la primera generación, los resultados ya son funcionales: el listado de transacciones permite scroll, el tab bar y el FAB (floating action button) se mantienen fijos, e incluso aparecen interacciones de hover [3:08].
Para agregar funcionalidad, basta con copiar los frames del flujo deseado desde Figma Design y pegarlos directamente en Make. Luego escribes un nuevo prompt como "crea el flujo de añadir transacción" [3:42]. El resultado incluye:
- Bottom sheet animado con apertura y cierre.
- Toggle para alternar entre gastos e ingresos.
- Teclado numérico funcional.
- Opción de guardar la transacción directamente en la lista [4:07].
¿Puede Make interpretar pantallas sin instrucciones explícitas?
Sí. Make analiza los screens adjuntos y deduce flujos que no fueron solicitados explícitamente. En el ejemplo del curso, generó automáticamente la vista de detalle y la funcionalidad de eliminar transacción sin que se le indicara hacerlo [4:19].
Para agregar confirmaciones, basta con un prompt como: "cuando elimines transacción, lanza una alerta para confirmar la acción" [5:37]. Make genera el modal respetando las líneas de diseño del kit previamente creado.
¿Cómo se publica y reutiliza el kit?
Una vez satisfecho con los resultados, publicas el kit con un nombre e imagen de referencia [6:11]. Este kit queda disponible para nuevos archivos de Figma Make, lo que permite generar otras secciones como el dashboard o la vista de settings manteniendo consistencia visual [6:20].
El modelo de selección de IA también es configurable: puedes dejarlo en modo recomendado o elegir uno específico como Sonnet si ya tienes experiencia con resultados previos [2:30].
Dominar Figma Make significa cerrar el ciclo completo del diseño de producto: pensar en sistemas, construir con precisión y entregar con claridad. Tu siguiente paso es generar el dashboard y la sección de cuentas usando el kit que creaste, y compartir los resultados en los comentarios.
