Cómo grabar un recorrido por un prototipo de Figma

Para grabar un prototipo de Figma, ábrelo en la vista de presentación, configura el dispositivo y los flujos en la pestaña Prototipo, oculta la interfaz de Figma y graba esa ventana con un grabador de pantalla mientras hablas. Figma no exporta vídeo, así que la calidad del recorrido depende de cómo prepares el prototipo y de lo despacio que hagas clic.

Esta guía es para el vídeo que envías a un cliente antes de una reunión de revisión, o en lugar de ella: «aquí tienes el nuevo flujo de checkout, y por qué funciona así». No un vídeo promocional pulido, sino una explicación clara.

Prepara el prototipo antes de grabar

La mayoría de los vídeos de prototipos confusos lo son por la configuración del prototipo, no por la grabación. Cinco minutos aquí te ahorran tres tomas.

Configura el dispositivo y el fondo

La configuración del prototipo está en la barra lateral derecha. Haz clic en una parte vacía del lienzo para no tener nada seleccionado y abre la pestaña Prototipo. Ahí encontrarás:

• Dispositivo: el tipo, la orientación y el modelo que se usan en la vista de presentación. Un modelo de teléfono envuelve los diseños móviles en un marco realista, que ayuda al cliente a imaginarse el resultado real.
• Fondo: el color que hay detrás del prototipo en la vista de presentación. Elige algo neutro que no compita con el diseño.
• Flujos: los puntos de inicio de los recorridos de la página actual.

En los diseños de escritorio, el marco de dispositivo suele estorbar. Elige mejor DispositivoTamaño personalizado (Ajuste) o DispositivoPresentación (Completa), para que el diseño llene la ventana.

Dale a cada recorrido su propio flujo

El punto de inicio de un flujo le dice a Figma dónde empieza un recorrido, y puedes tener varios. En la vista de presentación, los flujos aparecen en una barra lateral a la izquierda con sus descripciones.

Ponles nombre como lo haría el cliente: «Registro», «Checkout», «Cambiar una reserva». Así cada grabación empieza desde un punto limpio, y si tienes que volver a empezar, pulsar R te lleva al inicio del flujo actual.

Revisa las interacciones al pasar el ratón y con retardo

Las interacciones que dependen del tiempo son las que parecen rotas en vídeo. Reproduce cada flujo una vez antes de grabar y revisa estos tres desencadenantes:

Desencadenante	Qué hace en Figma	Qué hacer en el vídeo
Al pasar el ratón	Muestra un estado solo mientras el puntero sigue sobre la zona activa, y vuelve atrás cuando sale	Ponte sobre el elemento, quédate quieto y di qué ha cambiado
Entrar con el ratón	Se activa una vez, cuando el puntero entra por primera vez en la zona activa	Entra una vez, con intención, y no vuelvas a salir sin querer
Con retardo	Avanza solo tras un tiempo fijado en el marco, en milisegundos	Alarga el retardo para la grabación o cámbialo por un clic

Las pantallas Con retardo son la trampa habitual: avanzan mientras todavía las estás explicando.

Prepara la vista de presentación

Abre el prototipo con Presentar en la barra de herramientas, o pulsa ⌘⌥Return. Después, déjalo limpio:

Graba la ventana, no la pantalla

Graba solo la ventana del navegador o de Figma que muestra el prototipo. Las grabaciones de toda la pantalla recogen tu Dock, tus otras pestañas y la notificación que olvidaste silenciar.

En macOS puedes hacerlo con Captura de pantalla: pulsa ⌘⇧5, elige la herramienta Grabar una parte de la pantalla y dibuja el marco alrededor del prototipo. Nuestra guía para grabar una ventana o una parte de la pantalla repasa las opciones, incluido el uso con varios monitores. Si es la primera vez que grabas en un Mac, empieza por cómo grabar la pantalla en el Mac.

Antes de empezar, repasa el checklist de 60 segundos antes de grabar: notificaciones desactivadas, pestañas ajenas cerradas, contenido de prueba en el diseño en lugar de datos de un cliente real.

Haz clic más despacio de lo que te parece natural

Tú sabes dónde está cada zona activa. Tu cliente no. En vídeo, tu ritmo normal parece frenético.

• Detente en cada pantalla un segundo o dos antes de hacer clic. Di para qué sirve la pantalla.
• Lleva primero el puntero al objetivo y luego haz clic. Quien lo ve sabe adónde vas antes de que ocurra.
• Pasa el ratón con intención. En los estados al pasar el ratón, ponte sobre el elemento, quédate quieto y di qué cambia.
• Espera a las transiciones. Las transiciones animadas y las superposiciones necesitan un momento. Hacer clic durante una animación puede saltársela o caer en la zona activa equivocada.
• No te desplaces rápido. Si un marco tiene scroll, desplázate en pasos cortos y para donde quieres que mire el cliente.

Si el cliente puede verlo en el móvil, resaltar los clics y un poco de zoom en los controles pequeños ayudan. Contamos cuándo ayuda y cuándo marea en zoom automático al grabar la pantalla.

Narra las decisiones, no los clics

«Ahora hago clic en Continuar» no le dice al cliente nada que no esté viendo. El valor de un recorrido es el razonamiento que, si no, explicarías en una reunión.

Una estructura sencilla para cada flujo:

1. Para qué sirve este flujo: «Así cambia una reserva un cliente que ya ha comprado antes».
2. La decisión que hay detrás: «Hemos movido el selector de fecha al primer paso, porque el brief dice que la mayoría de los cambios son de fecha».
3. Lo que sigue abierto: «La pantalla de cancelación es provisional hasta que tengamos el texto de la política».
4. Lo que necesitas que te respondan: «¿Puedes revisar el texto del paso dos?».

Para saber más sobre cómo estructurar la presentación de un diseño, incluidas la segunda ronda y las comparaciones de antes y después, lee cómo presentar un diseño a un cliente sin reunión. Si el vídeo es de feedback y no una presentación, cómo dar feedback de diseño en vídeo sigue otra estructura.

Envíalo con el enlace del prototipo

Cuando termines, envía dos cosas en un mismo mensaje: el vídeo y el enlace del prototipo de Figma, para los clientes que quieran hacer clic por su cuenta. Pon también en el mensaje la pregunta que necesitas que te respondan, no solo al final del vídeo.

Hola, Javier, aquí tienes un recorrido corto por el flujo de reserva. Abajo está el enlace del prototipo por si quieres probarlo tú. Una pregunta: ¿te parece bien que la fecha vaya primero? Con un sí o un no antes del viernes cumplimos el calendario.

https://justrec.app/v/k3f9Qa

Flujo de reserva, primera versión navegableJustRec · 2:48

Si envías este tipo de vídeos a menudo, nuestra página sobre enviar vídeos a clientes explica cómo funcionan el enlace y la página del cliente, y la guía sobre el vídeo asíncrono con clientes explica cuándo un vídeo sustituye a una llamada.