Figma Make: qué puede hacer y cuándo conviene usarlo

Figma Make ofrece más ventajas cuando tu idea de producto ya parte de un frame o un sistema de diseño de Figma. Permite crear aplicaciones web funcionales con dos opciones de backend documentadas, pero la que elijas condiciona la posibilidad de continuar el trabajo en GitHub. Es una buena opción para validar cómo funciona una experiencia ya diseñada; antes de incorporar datos de clientes, decide cómo seguirá el desarrollo técnico.

Funciones públicas y asignaciones de créditos de IA verificadas el 15 de octubre de 2026. Este análisis evalúa la documentación vigente del producto, las posibilidades de continuar el trabajo y las limitaciones al entregarlo a desarrollo. El recorrido propone un ejemplo que puedes seguir: no describe una prueba realizada dentro de una cuenta ni presenta mediciones de la calidad de los resultados.

¿Qué es Figma Make?

Figma Make convierte prompts y referencias de diseño en una interfaz con código editable. Así puedes probar una búsqueda, completar un formulario o recorrer un flujo del producto, en lugar de limitarte a observar una maqueta estática. También permite publicar aplicaciones web y conectarlas a datos almacenados. Figma Design sigue siendo el lienzo para diseñar interfaces; Figma Sites es una herramienta independiente para crear sitios web. Make sirve para definir cómo debe comportarse el diseño y generar ese comportamiento. Puedes empezar en Figma Make; su guía de creación explica el proceso que va del prompt a la vista previa.

¿Para quién es Figma Make y cuándo conviene una alternativa?

Figma Make resulta especialmente convincente para un diseñador o responsable de producto que ya dispone de una interfaz aprobada, componentes compartidos y un equipo acostumbrado a revisar el trabajo en Figma. Quien está fundando una empresa también puede usarlo a partir de una idea inicial, aunque empezar solo con un prompt desaprovecha buena parte de esa ventaja.

La comparación siguiente se centra en el material de partida, quién continuará el trabajo y cómo se desplegará la aplicación. Evalúa los flujos de trabajo; no clasifica las herramientas según lo atractiva que resulte su primera propuesta.

Las diferencias de backend y código están documentadas en la guía de backend de Figma, Lovable Cloud, la guía full-stack de v0 y Claude Design.

Lovable: cuando la aplicación viene antes que el archivo de diseño

Lovable permite crear aplicaciones con alojamiento administrado, base de datos, autenticación y almacenamiento. Tiene sentido incluirlo entre las opciones si partes de una necesidad como «los clientes deben enviar solicitudes y el personal debe gestionarlas». Su integración con GitHub permite que los cambios de la rama activa del repositorio vuelvan a Lovable, algo relevante cuando un desarrollador se incorpora al proyecto.

La contrapartida está en quién asume la operación. Según la documentación de Lovable Cloud, pasar a tu propio Supabase exige exportar los datos y reconstruir el esquema en un proyecto nuevo. Elígelo si ese entorno administrado encaja con tu lanzamiento y decide quién se haría cargo de una futura migración.

v0 by Vercel: cuando el trabajo continuará en el código

v0 by Vercel crea aplicaciones full-stack y utiliza Next.js de forma predeterminada. Este framework web combina el código de la interfaz con funciones que se ejecutan en el servidor. Su documentación cubre los endpoints de backend y las conexiones a bases de datos. También importa contexto de Figma, por lo que trabajar a partir de un diseño de Figma no es una ventaja exclusiva de Make.

v0 encaja mejor cuando un desarrollador se encargará de mantener la aplicación y quiere partir de ese framework. No lo elijas por defecto si la entrega inmediata es una revisión de diseño y todavía nadie asumirá el código de la aplicación. La diferencia decisiva está en lo que ocurrirá después de aprobar la vista previa.

Claude Design: cuando la exploración va más allá de la interfaz del producto

Claude Design crea maquetas y otras piezas visuales, puede incorporar el contexto de un sistema de diseño desde código y archivos de diseño, y se conecta con Claude Code. Su página de producto actual también documenta la exportación a PDF, PowerPoint y HTML. Esa variedad encaja con quien necesita tanto un prototipo como los materiales para presentarlo.

Elígelo cuando el brief creativo nace de una conversación y el trabajo posterior continuará en Claude o en un archivo exportado. Si las revisiones del equipo giran en torno a frames existentes de Figma, Make ofrece un punto de partida más directo. Exportar un HTML no resuelve por sí solo quién mantendrá las cuentas, los datos y el despliegue.

Para ampliar la selección, consulta nuestra lista de herramientas de diseño con IA.

Cómo usar Figma Make

Figma Make resulta más útil cuando el primer prompt describe una interacción bien delimitada. «Crea mi startup» obliga al modelo a inventar tanto el producto como su interfaz. Un flujo de reservas ya diseñado ofrece algo concreto que puedes aprobar o corregir.

Tutorial de Figma Make: de un frame de reservas a un prototipo

Trabaja con este ejemplo: una persona elige un servicio, selecciona una cita disponible y envía una solicitud. Empieza con contenido de muestra y sin cuentas de clientes. Antes de decidir cómo guardar las reservas, lo primero es comprobar si se entiende el recorrido.

1. 1

   Prepara el frame

   Selecciona el frame de Figma Design que contiene la interfaz de reservas. Incluye textos claros en los botones y los estados de selección, falta de disponibilidad y error que quieras mostrar en el prototipo. Copia el propio frame. Figma recomienda usar frames estructurados en lugar de capturas de pantalla cuando el modelo necesita un contexto de diseño preciso.

2. 2

   Crea el archivo de Make y adjunta la referencia

   En el explorador de archivos, abre Drafts y haz clic en Make. Pega el frame copiado en el prompt. También puedes usar Add context para adjuntar un enlace a un diseño o frame desde el cuadro de adjuntos. Aporta el frame como contexto en lugar de confiar en una URL suelta dentro de la conversación.

3. 3

   Define el comportamiento y los límites

   Pide a Make que conserve el diseño adjunto, permita elegir un servicio y una cita disponible, valide los campos obligatorios y muestre una confirmación. Solicita expresamente datos de muestra y ningún backend en esta primera versión. Haz clic en Send para generar la vista previa.

4. 4

   Recorre los casos de error

   Intenta enviar el formulario sin completar un campo obligatorio, seleccionar una cita no disponible, cambiar de servicio después de elegir una hora y volver desde la confirmación. Evalúa si la interfaz explica lo que ha ocurrido. Un botón que responde solo sirve si responde correctamente.

5. 5

   Corrige el problema más concreto

   En un archivo nuevo de Make, usa Edit para seleccionar un elemento, modificar sus propiedades y pulsar Apply, o añade una anotación sobre un defecto específico. Separa la corrección de un comportamiento de un rediseño visual amplio: así podrás comprobar si se resolvió el problema previsto.

Estos controles siguen las instrucciones de creación, la guía de adjuntos y la guía de edición de Figma. Los archivos antiguos de Make pueden conservar la interfaz de edición anterior.

Ejemplos de prompts de Figma Make para el mismo proyecto

Prompt inicial: «Usa el frame de reservas adjunto como referencia visual. Crea el flujo para que una persona elija un servicio y una cita disponible, introduzca los datos de contacto obligatorios y vea una confirmación. Usa contenido ficticio de muestra. Conserva la jerarquía del frame y el estilo de sus componentes. No conectes todavía un backend. Explica qué partes están simuladas».

Prompt de corrección: «Cuando cambie el servicio seleccionado, borra la cita elegida anteriormente y exige una nueva selección. Conserva la distribución y el estilo visual. Muestra una explicación junto al control de selección de citas».

Son especificaciones para una versión inicial y su corrección, no resultados obtenidos en una generación. Si la primera versión conserva una cita incompatible al cambiar de servicio, la corrección se dirige a un fallo en la gestión del estado: la aplicación debe actualizar lo que recuerda cuando cambia una elección anterior.

La calidad de ejecución también se comprueba con criterios concretos. Revisa los saltos de línea, el foco del teclado, los estados no disponibles, los nombres de servicios largos y la distribución en pantallas estrechas. Una captura atractiva no demuestra que nada de eso funcione. El prototipo aporta valor cuando quien lo revisa puede completar la tarea y entender por qué una acción está bloqueada.

Sistemas de diseño en Figma Make: conservar algo más que los colores

Figma Make gana utilidad cuando trabaja con los componentes y las reglas de tu sistema, en lugar de limitarse a imitar una pantalla terminada. Un token de diseño es un valor con nombre que define, por ejemplo, un color o un espaciado; un componente es un elemento reutilizable de la interfaz con un comportamiento definido. Reproducir un token no implica usar el componente correcto.

Kits de Figma Make

Los kits de Figma Make pueden combinar paquetes npm, estilos y variables de bibliotecas publicadas e instrucciones escritas. Un paquete npm distribuye código reutilizable, de modo que un kit puede aportar tanto contexto de implementación como referencias visuales. El recorrido documentado es Settings → Create a kit → Assemble your kit; después se añaden los recursos, se redactan las instrucciones, se prueba el kit y se publica para el equipo. Los kits requieren una licencia Full en un plan de pago. Guía de Make kits de Figma

En el área de prompts de la aplicación, haz clic en Select a Make kit y elige el kit publicado antes de generar el flujo. Para el ejemplo de reservas, incluye los componentes aprobados de botón, campo de entrada y selector de citas, si existen. Después explica cuándo se usan: el botón principal envía una solicitud válida; las citas no disponibles siguen siendo reconocibles, pero no se pueden seleccionar; la validación aparece junto al campo que necesita atención.

Estas reglas aportan más que pedir «que siga la identidad de marca». Un rectángulo morado generado puede parecerse al botón principal y, sin embargo, carecer de su estado deshabilitado, su indicador de foco o su etiqueta accesible. Revisa el uso de los componentes y el significado de las interacciones, además del parecido del color de acento.

También hay trabajo de preparación. Los requisitos de paquetes de Figma indican que el paquete debe funcionar con el entorno de compilación y no depender de que esté presente el resto del espacio de trabajo. Si tus componentes dependen de módulos privados repartidos por un repositorio mayor, pide a un desarrollador que prepare el paquete.

Extraer una biblioteca no conserva todos sus tokens. La guía de Make kits indica que extrae un subconjunto de variables a CSS simplificado con valores directos; no mantiene la sintaxis exacta de las variables. Documenta las reglas de los estados en las instrucciones e inspecciona los estilos generados antes de dar por hecho que el prototipo conserva intacto tu sistema.

Plantillas de Figma Make

Las plantillas de Figma Make sirven cuando varios proyectos parten de una experiencia similar; el kit, en cambio, aporta contexto reutilizable del sistema. Crea y revisa una base para reservas una vez y permite que el equipo la use para iniciar variantes. Figma documenta las plantillas junto con sus otras opciones para compartir y reutilizar.

Usa las instrucciones del proyecto para las reglas permanentes y las skills personalizadas para una revisión repetible que actives expresamente. Si tu equipo ya tiene un sistema establecido, nuestro paquete de skills personalizadas de Figma Make para sistemas de diseño ofrece una estructura de partida. Adapta las instrucciones a tus tokens y componentes; la decisión final de la revisión sigue correspondiendo a una persona.

Crea una aplicación web que recuerde lo ocurrido

Figma Make ya documenta dos opciones: Payload, un backend de aplicaciones y sistema de gestión de contenidos, y Supabase, un servicio de base de datos y backend. El backend guarda información y realiza tareas detrás de la interfaz visible. Es la diferencia entre mostrar una confirmación de reserva y disponer de una solicitud que el personal pueda consultar después de que el visitante cierre el navegador.

Con Payload, describes la aplicación, confirmas la creación del backend y gestionas los registros desde la pestaña CMS, su pantalla de gestión de contenidos. Figma aloja la aplicación y los datos. Supabase se conecta por separado desde Make settings → Integrations → Supabase; su configuración en Make utiliza almacenes de clave-valor, entradas guardadas simples, en lugar de crear un esquema completo de base de datos con tablas relacionadas. Documentación de backend de Figma

Continúa el mismo ejemplo con este prompt: «Añade un backend de Payload para los servicios y las solicitudes de cita. Los visitantes pueden enviar solicitudes; el personal puede gestionarlas. Separa la información pública de los servicios de los datos de contacto privados. Explica las reglas de acceso antes de implementarlas».

Después, inspecciona una solicitud guardada desde la vista de administración. Recarga la interfaz del visitante y confirma que lee la información almacenada prevista. Comprueba si un visitante sin autenticar puede acceder a registros exclusivos del personal. Son comprobaciones de aceptación para tu implementación, no garantías de que la generación ya las haya superado.

Solicitar una cita y garantizar una reserva son productos distintos. Una solicitud puede quedar pendiente de aprobación por parte del personal. Una reserva necesita reglas para los envíos que entran en conflicto, las cancelaciones y los cambios de disponibilidad. Si el negocio exige garantizar la cita, incorpora a un desarrollador antes de dar el flujo por terminado.

La ventaja práctica es poder validar a la vez la interfaz y la tarea de gestionar registros. El límite está en quién asume la responsabilidad: alguien debe decidir el modelo de datos, los permisos y el proceso de recuperación. Una pantalla de administración generada no toma esas decisiones de negocio por ti.

Publica la experiencia y decide quién se hará cargo

Figma Make permite publicar directamente; no es necesario pasar por Figma Sites. En Make, haz clic en Publish, define el título y publica la aplicación. Recibirás una URL específica y podrás configurar un dominio propio. Los cambios posteriores requieren actualizar la versión publicada. Guía de publicación de Make

En el prototipo de reservas, decide si el público serán personas que lo revisan o posibles clientes. Quienes revisan necesitan una explicación honesta de las partes simuladas. Los clientes necesitan un servicio completo: una confirmación clara, una forma de corregir errores y alguien que responda a las solicitudes enviadas. Haz la revisión final desde la URL publicada para comprobar lo que reciben los visitantes.

Cuándo conviene publicar con Figma Sites

Figma Sites encaja con un sitio de marketing que se mantiene mediante edición visual. Su recorrido documentado consiste en copiar un frame de Figma Design a un breakpoint de Sites, ajustar los diseños adaptables y publicar. Un breakpoint es una distribución preparada para un intervalo determinado de tamaños de pantalla. Esta vía resulta útil cuando el trabajo principal consiste en organizar y actualizar páginas. Trasladar diseños a Figma Sites

Usa Make para la interacción de reservas y considera Sites para el sitio de marketing que la acompaña, si ese modelo de edición encaja con la persona responsable. No des por hecho que ambos productos ofrecen las mismas opciones para continuar fuera de ellos: la documentación de publicación de Sites indica que actualmente no se puede exportar el código del sitio para publicarlo en otro servicio.

Qué debe incluir la entrega al equipo de desarrollo

El editor de código de Figma Make permite descargar un ZIP. Su documentación actual del flujo con Git también describe cómo clonar un repositorio autorizado de GitHub, trabajar con ramas y crear una pull request. Una pull request permite al equipo de desarrollo revisar los cambios antes de incorporarlos a la aplicación compartida. Son vías de partida distintas, con requisitos diferentes.

Junto con el código, entrega el comportamiento previsto, las funciones que sabes que están simuladas, quién se responsabiliza de los datos, las reglas de acceso y los defectos pendientes. En el flujo de reservas, aclara expresamente si una cita es una solicitud o una reserva confirmada. De lo contrario, el equipo de desarrollo puede recibir una implementación impecable de una regla de negocio equivocada.

Créditos de IA de Figma Make

Para trabajar en equipo con un sistema de diseño, elige una licencia Full del plan Professional: incluye 3,000 créditos de IA al mes, frente a los 500 al mes de Starter, con un límite de 150 al día. Make consume la asignación compartida de IA a un ritmo variable según el modelo, la tarea y el contexto; los créditos de la licencia se restablecen cada mes y no se acumulan. Consulta cómo funcionan los créditos de IA de Figma y los precios de Figma antes de decidir; una asignación de créditos no garantiza un número de prototipos terminados.

Limitaciones que pueden cambiar tu decisión

Los límites de Figma Make dependen del flujo de trabajo que elijas. Tanto «no puede crear un backend» como «se encarga de todo el producto» son premisas poco fiables para decidir.

Una aplicación alojada con Payload no permite continuar con Git por ahora

La documentación del backend de Payload en Figma Make indica que la integración con GitHub y los flujos con código local todavía no están disponibles para las aplicaciones que usan Payload. También sitúa su alojamiento actual en el este de Estados Unidos. Son condiciones que debes considerar al elegir, no detalles que convenga descubrir después de crear la aplicación. Limitaciones de Payload

Si el equipo de desarrollo necesita continuar de inmediato el mismo proyecto desde su repositorio, valida una vía compatible antes de elegir Payload. La promesa de una función futura no resuelve una entrega prevista para ahora.

De Figma Make a Figma Design no hay una sincronización automática de ida y vuelta

La acción estándar Copy design de Figma Make crea capas editables a partir de la vista previa actual. Esas capas son estáticas, quedan desconectadas del archivo de Make y no se vinculan automáticamente al sistema de diseño, aunque es posible asociar variables disponibles. Documentación de Copy design

Usa esa copia para revisar el diseño y explorar variantes visuales. Si modificas el selector de citas en el lienzo, decide expresamente cómo volverá ese cambio a la aplicación funcional. De lo contrario, el diseño revisado y el prototipo pueden acabar describiendo productos distintos sin que nadie lo advierta.

Las funciones de Git no son intercambiables

La función independiente Push to GitHub de Figma Make crea su propio repositorio y envía los cambios en una sola dirección; los envíos posteriores pueden sobrescribir modificaciones realizadas fuera de Make. Esa limitación no debe atribuirse al flujo más reciente de clonación de repositorios descrito anteriormente.

El flujo con una base de código local es otra opción distinta. Está documentado como una beta cerrada de acceso limitado que requiere la aplicación de escritorio Figma Beta para Mac y una cuenta admitida. También exige configurar el repositorio. Confirma qué vía puede usar tu equipo antes de prometer que los diseñadores podrán editar directamente la aplicación existente en producción.

La contraseña de la aplicación publicada no protege todos los enlaces compartidos

La protección con contraseña de Figma Make se aplica a la aplicación publicada; la vista previa se rige por los permisos para compartir el archivo. Revisa ambos antes de enviar un concepto confidencial fuera del equipo. Publicar y compartir son decisiones de acceso distintas. Ajustes de publicación y acceso

El comportamiento generado sigue necesitando criterios de aceptación

Figma Make puede hacer que un flujo parezca completo antes de resolver los casos de negocio difíciles. En el ejemplo de reservas, evalúa las solicitudes que compiten entre sí, las citas canceladas, los controles inaccesibles y las confirmaciones engañosas. Son requisitos de revisión, no defectos observados en una prueba de este análisis.

Una definición útil de «listo para publicar» es que «la persona a la que va dirigido pueda completar la tarea y que quien se responsabiliza del producto pueda atender el resultado». Una maqueta realista, por sí sola, no cumple ninguna de esas condiciones.

Veredicto: valida el diseño con Make y decide cómo continuará la aplicación

Figma Make es una opción sólida para fundadores, responsables de producto y diseñadores que ya cuentan con recursos en Figma y quieren evaluar una experiencia de producto funcional. Sus kits, la edición de elementos concretos y las opciones de backend permiten ir más allá de comentar el aspecto de una pantalla.

La elección cambia cuando la siguiente persona responsable no puede continuar con el flujo que seleccionaste. Una aplicación alojada con Payload puede encajar en un caso de gestión de contenidos o solicitudes, pero su limitación actual con Git pesa si debes entregarla de inmediato al equipo de desarrollo. Elige Lovable para empezar por una aplicación administrada con sincronización Git; v0 para trabajar con Next.js bajo la responsabilidad de un desarrollador; o Claude Design para una exploración visual más amplia que continúe en Claude.

La próxima semana, toma un frame representativo, crea la interacción completa más pequeña posible y pide a quien vaya a hacerse cargo que revise cómo continuará el trabajo. Aprueba a la vez el prototipo y su entrega. Ese avance resulta más útil que generar más pantallas.

Preguntas frecuentes

¿Qué se puede crear con Figma?

En este flujo de trabajo, usa Figma Design para dar forma a la interfaz, Make para generar interacciones y aplicaciones funcionales, y Sites si necesitas una herramienta visual para crear sitios web. Decide primero qué vas a entregar y después en qué herramienta hacerlo.

¿Cómo se crea un archivo nuevo en Figma?

Para crear un archivo de Make, abre Drafts en el explorador de archivos y haz clic en Make. Adjunta tu frame y describe el comportamiento que quieres. El tutorial anterior sigue el proceso de creación documentado por Figma.

¿Figma es una herramienta de UI o de UX?

Ambos conceptos forman parte del trabajo. UI se refiere a la interfaz que las personas ven y utilizan; UX, a la experiencia de completar una tarea. Make puede ayudarte a examinar un flujo funcional, pero la investigación y el criterio para decidir si resuelve el problema adecuado siguen siendo tuyos.

¿En qué se diferencian Figma Design y Figma Make?

Figma Design es el lienzo de diseño; Make genera una interfaz funcional respaldada por código. La acción estándar Copy design devuelve una vista estática como capas editables, sin sincronizar automáticamente los cambios posteriores.

¿Hay alguna herramienta mejor que Figma Make?

Para algunas tareas, sí. Lovable es una alternativa sólida para una aplicación y un backend administrados; v0, para un flujo de desarrollo orientado a Next.js; y Claude Design, para explorar distintos formatos visuales. Make destaca cuando partes de los diseños y el sistema que ya tienes en Figma.

¿La gente está dejando de usar Figma?

Este análisis no mide la migración de clientes. Las quejas individuales o los casos concretos de cambio de herramienta no permiten establecer una tendencia general. Para decidir, identifica qué tarea específica de diseño o de entrega a desarrollo no puedes completar con tu flujo actual.

¿Por qué está cayendo Figma?

La pregunta puede referirse a la cotización de sus acciones, a su adopción o a la opinión de alguien sobre el producto. Ninguna de esas interpretaciones determina si Make encaja en tu flujo de trabajo. Este análisis no hace afirmaciones sobre su rendimiento en el mercado; evalúa las vías documentadas de diseño, backend y entrega a desarrollo.

¿Cuál es el principal competidor de Figma?

No hay un único competidor que cubra todos los casos de uso de Make. Para esta decisión, considera Lovable si partes de la aplicación, v0 si continuarás en el código y Claude Design si buscas crear piezas visuales mediante conversación. Compara según la tarea que realmente necesitas terminar.

¿Qué es mejor, Canva o Figma?

Para el flujo de diseño de interfaces de producto tratado aquí, elige Figma. Si necesitas materiales de marketing, consulta la comparación más amplia de herramientas de diseño con IA enlazada antes y decide según lo que debas entregar. Este análisis no compara la calidad de los resultados de Canva con la de Figma.

¿Figma Make es gratis?

Puedes probar Make con Starter. Entre las restricciones documentadas están la ausencia de contexto de estilos de bibliotecas del equipo y la obligación de publicar en Figma Community para publicar en la web abierta. Para trabajar en equipo con productos confidenciales, evalúa la opción de pago con licencia Full. Consulta el acceso a Figma Make y la asignación de créditos indicada anteriormente.

Usa la lista para auditar flujos de trabajo empresariales con IA para definir quién se responsabilizará del prototipo, qué datos necesita y cómo se entregará antes de comprometerte con ese flujo de trabajo.