Usar videos en prototipos

Antes de empezar

Quién puede utilizar esta función

Compatible con archivos de los equipos de Instituciones educativas, Profesional, Organización y Empresa.

Cualquiera que sea parte de un equipo pagado puede agregar video a los archivos.

Cualquiera con acceso de puede editar puede editar videos en archivos.

¿Eres nuevo en la creación de prototipos? Consulta nuestra Guía de prototipado →

Agrega video a tus prototipos para replicar la experiencia que tendrían los usuarios en un sitio o aplicación con reproducción de video o previsualizaciones.

Video en prototipos:

• Puede estar en formato .mp4, .mov o .webm
• Puede tener un tamaño de hasta 100 MB
• Son rellenos de formas y se comportan como tales
• Actualmente no son compatibles con la aplicación móvil de Figma

Una vez que agregues videos a tu archivo de diseño, puedes editar o ajustar las calidades básicas de video. Luego, puedes agregar interacciones a tus videos para comenzar a construir tus prototipos.

Agregar video a archivos

Figma no tiene un tipo de capa específico para video, sino que los videos son un tipo de relleno. Dado que los videos son rellenos, puedes agregarlos a cualquier vector o forma.

Hay varias formas de agregar video a los archivos de diseño:

• A Arrastra y suelta el archivo de video de tu computadora al lienzo. 

• B Usa el importador de video del selector de color de relleno. Obtén más información sobre cómo cargar rellenos →

• C Emplea la herramienta Colocar imagen/video para agregar videos de forma masiva. Obtén más información sobre la herramienta Colocar imágenes y videos →

• C Copia un video de otra capa del archivo actual o de otro archivo.

• D Pega un video de tu portapapeles en el lienzo.

Si agregas un video directamente al lienzo, Figma crea un objeto en el lienzo con las dimensiones del archivo original. Si añades un video como relleno a un objeto existente, Figma usa el nombre y las dimensiones del objeto original.

Ve y actualiza los rellenos de video en la sección Relleno de la barra lateral derecha. Desde la sección Relleno, puedes reproducir y previsualizar el relleno del video, saltar a una marca de tiempo específica o desplazarte por el video.

También puedes identificar capas con rellenos de video en el panel de capas de la barra lateral izquierda. Los objetos con rellenos de video se representan en el panel de capas con el ícono .

Editar video

Una vez que agregaste un video a tu archivo, puedes editarlo de las siguientes maneras:

• Escala, rota y ajusta las dimensiones de cualquier capa con video
• Recorta y reposiciona el video aplicado a las capas
• Ajusta las opciones de video, incluidos el modo de relleno, la rotación y los modos de fusión
• Usa máscaras para mostrar solo una parte del video

Prototipo con video

Una vez que agregues video a un marco, cambia a Prototype (Prototipo) de la barra lateral derecha. Desde aquí, puedes crear interacciones entre marcos con video.

Más información sobre prototipado →

Propiedades del video

Cuando seleccionas un video, hay una sección Video disponible en la pestaña Prototipo. Esta sección te permite establecer el comportamiento de un video cuando se navega a tu marco en un prototipo.

• Marca la casilla para reproducir automáticamente el video
• Haz clic en el ícono de Bucle para reproducir el video en bucle
• Haz clic en el ícono de Sonido para activar o desactivar la configuración de sonido predeterminada del video

Interacciones de video

Cuando creas cualquier conexión de prototipado, hay un disparador que determina qué hace que comience la interacción y una acción que define la respuesta del evento desencadenado.

Los siguientes disparadores de interacción están disponibles para los videos:

• Cuando el video alcanza una marca de tiempo específica: Activa la acción establecida cuando el video llega a una marca de tiempo específica.
• Cuando termina el video: Activa la acción establecida cuando el video termina de reproducirse.

Las siguientes acciones de interacción están disponibles para los videos:

• Reproducir/pausar video: Selecciona Reproducir video, Pausar video o Alternar reproducción/pausa.
• Silenciar/activar sonido del video: selecciona Mute video (Silenciar video), Unmute video (Activar sonido de video), Toggle mute/unmute (Alternar silenciar/activar sonido).
• Establece una hora específica: Define una marca de tiempo a la que saltar en el video.
• Ir hacia adelante/atrás en el tiempo: selecciona Jump forward (Ir hacia adelante) o Jump backward (Ir hacia atrás) y luego establece la cantidad de segundos para ir hacia adelante/atrás en el video.

Cuando creas una interacción entre dos marcos que tienen el mismo video, hay un botón de alternancia Restablecer estado de video en el panel Detalles de interacción. Cuando se activa, el video se reiniciará desde el principio entre marcos. Obtén más detalles sobre la administración de estados de video → 

Interacciones de video dentro del mismo marco

Puedes interactuar y crear prototipos con videos basándote en disparadores realizados dentro del mismo marco. Esto puede ser útil cuando se intenta crear una experiencia interactiva de reproductor de video.

1. Cree una conexión desde el objeto de inicio al archivo de video.
2. Establece la acción inicial deseada (por ejemplo, Al hacer clic). 
3. Establece la acción deseada para el video (por ejemplo, Silenciar video/activar sonido del video). 

Video y animación inteligente

Puedes emplear la animación inteligente para conservar el progreso de un video al navegar entre marcos. Digamos que quieres crear un prototipo en que al entrar en un marco se inicie la reproducción y, al hacer clic en el video, se navegue a un nuevo marco con una vista más amplia.

1. Crea una conexión entre los dos marcos con el mismo nombre de video. Asegúrate de que los nombres de las capas de vídeo coincidan también.
2. Establece la configuración de animación en Animación inteligente.
3. En el panel de detalles de la interacción, desmarca Restablecer estados de video.

Componentes interactivos y de video

Usa componentes interactivos para prototipar interacciones de video en un solo marco, como previsualizar la reproducción al pasar el mouse.

1. Crea un componente con variantes para un estado predeterminado y de desplazamiento.
2. El estado predeterminado debería tener la reproducción automática desactivada, y el estado de desplazamiento debería tener la reproducción automática.
3. Crea una conexión desde la variante predeterminada para cambiar a la variante de desplazamiento y desmarca Restablecer estados de video.
4. Crea un marco con un par de instancias del componente y reemplaza el video para volver a utilizar el componente.

Prueba más formas de prototipo con video usando el archivo de área de pruebas →