En pocas palabras
Herramienta de Figma que genera experiencias interactivas mediante instrucciones y contexto de diseño.
Qué problema resuelve
Prototipos que tardan demasiado en reflejar flujos reales y componentes del producto.
Cuándo utilizarlo
Diseño y discovery. Ejemplo: probar una nueva pantalla a partir del sistema visual existente.
De la idea a la práctica
Funcionamiento, ejemplos y decisiones para pasar al siguiente nivel.
En el Radar compartido: Trial (valoración de la edición aportada).
Cómo funciona
Combina prompts con recursos de diseño para generar experiencias respaldadas por código. Permite iterar sobre apariencia e interacción usando contexto del producto.
Ejemplo de uso
Adjuntar pantallas y especificar un recorrido de recuperación de cuenta con estados de error. Compartir el prototipo para observar si los usuarios comprenden el siguiente paso.
Qué genera
Figma Make convierte una instrucción, y opcionalmente frames de un diseño existente, en una aplicación web interactiva respaldada por código (React). El resultado puede editarse con nuevas instrucciones, ajustando elementos concretos o modificando directamente el código, y publicarse como prototipo accesible por enlace.
Cuándo usarlo frente al prototipado clásico de Figma
| Necesidad | Mejor opción |
|---|---|
| Explorar layout y estilo visual | Diseño en Figma |
| Flujo con clics entre pantallas estáticas | Prototipo clásico de Figma |
| Interacción real: formularios, validación, filtros, estado | Figma Make |
| Probar con datos variables o lógica condicional | Figma Make |
Instrucciones eficaces
- Adjunta los frames del sistema de diseño para mantener componentes, colores y tipografía.
- Describe la tarea del usuario, no solo la pantalla: «el cliente sube su cédula, ve el progreso y puede reintentar si la foto es borrosa».
- Pide explícitamente los estados de carga, error y vacío.
- Itera en pasos pequeños; los cambios grandes tienden a romper partes que ya funcionaban.
Uso en investigación con usuarios
Un prototipo funcional permite pruebas de usabilidad más realistas: los participantes escriben, se equivocan y reciben mensajes de error. Prepara un guion con tareas, mide tasa de éxito y tiempo, y registra dónde dudan. Herramientas como Dovetail ayudan a sintetizar los hallazgos.
Del prototipo al producto
El código es un punto de partida para conversar, no una entrega: revisa estructura, accesibilidad y dependencias antes de reutilizarlo. Compara con v0 y UX Pilot, y con la técnica general de self-serve UI prototyping.
Criterios de implementación
Usar datos ficticios y contrastar accesibilidad, coherencia de componentes y casos límite. La fidelidad visual no demuestra integración correcta ni reduce automáticamente el esfuerzo productivo.
Continúa en las fuentes
Documentación oficial para verificar detalles y explorar más.