Usa vídeos en prototipos

Antes de empezar

Quién puede utilizar esta función

Compatible con archivos de los equipos de Educación, Profesional, Organización y Empresarial.

Cualquier persona que forme parte de un equipo de pago puede añadir vídeo a los archivos.

Cualquier persona con acceso Puede editar puede editar vídeos en archivos.

¿Acabas de empezar en la creación de prototipos? Consulta nuestra guía de creación de prototipos →

Añade vídeo a tus prototipos para reproducir la experiencia que tendrían tus usuarios en un sitio o una aplicación con reproducción de vídeo o vistas previas.

Vídeo en prototipos:

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

Una vez que añadas vídeos a tu archivo de diseño, puedes editar o ajustar las calidades básicas del vídeo. A continuación, puedes añadir interacciones a tus vídeos para empezar a crear tus prototipos.

Añadir vídeo a los archivos

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

Hay varias formas de añadir vídeo a los archivos de diseño:

• A Arrastra y suelta un vídeo desde tu ordenador al lienzo. 

• B Utiliza el importador de vídeo del selector de colores de relleno. Obtén más información sobre cómo cargar rellenos →

• C Utiliza la herramienta Place image/video (Colocar imagen/vídeo) para agregar vídeos en bloque. Obtén más información sobre la herramienta Place image/video (Colocar imagen/vídeo) →

• C Copia un vídeo de otra capa del archivo actual o de otro archivo.

• D Pega cualquier vídeo de tu portapapeles en el lienzo.

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

Ve y actualiza los rellenos de vídeo en la sección Relleno de la barra lateral derecha. En la sección Relleno, puedes reproducir y previsualizar el relleno del vídeo, ir a una marca de tiempo específica o navegar por el vídeo.

También puedes identificar las capas con rellenos de vídeo en el panel de Capas de la barra lateral izquierda. Los objetos con rellenos de vídeo se representan en el panel de capas con el icono .

Editar vídeo

Una vez que hayas añadido un vídeo al archivo, puedes editarlo de las siguientes maneras:

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

Prototipo con vídeo

Una vez que agregues vídeo a un marco, cambia al Prototipo de la barra lateral derecha. Desde aquí, puedes crear interacciones entre marcos con vídeo.

Más información sobre la creación de prototipos →

Propiedades del vídeo

Cuando seleccionas un vídeo, hay una sección de vídeos disponible en la pestaña Creación de prototipos . Esta sección te permite establecer el comportamiento de un vídeo al navegar hasta su marco en un prototipo.

• Marca la casilla para reproducir automáticamente el vídeo
• Haz clic en el icono Bucle para reproducir el vídeo en bucle
• Haz clic en el icono Sonido para activar o desactivar el sonido predeterminado del vídeo.

Interacciones de vídeo

Al crear cualquier conexión de creación de prototipos, hay un desencadenante que determina qué hace que comience la interacción y una acción que define la respuesta del evento desencadenado.

Los siguientes desencadenantes de interacción están disponibles para los vídeos:

• Cuando el vídeo alcanza una marca de tiempo: activa la acción establecida cuando el vídeo llega a una marca de tiempo específica.
• Cuando finaliza el vídeo: activa la acción de configuración cuando el vídeo termine de reproducirse.

Las siguientes acciones de interacción están disponibles para los vídeos:

• Reproducir/pausar vídeo: selecciona Reproducir vídeo, Pausar vídeo o Alternar reproducción/pausa.
• Silenciar/activar sonido de vídeo : selecciona Silenciar vídeo, Activar sonido del vídeo o Alternar silenciar/activar sonido.
• Establecer a una hora específica: establece una marca de tiempo a la que saltar en el vídeo.
• Avanzar o retroceder en el tiempo: selecciona Saltar hacia adelante o hacia atrás y, a continuación, establece el número de segundos que avanzar o retroceder en el vídeo.

Al crear una interacción entre dos marcos que tienen el mismo vídeo, aparece la opción Restablecer el estado del vídeo en el panel de detalles de la interacción. Cuando se activa, el vídeo se reiniciará desde su principio entre marcos. Más información sobre la gestión de estados de vídeo → 

Interacciones de vídeo dentro del mismo marco

Puedes interactuar y crear prototipos con vídeos basados en desencadenantes hechos dentro del mismo marco. Te puede resultar útil cuando se intenta crear una experiencia de reproducción de vídeo interactiva.

1. Crea una conexión desde tu objeto de inicio al archivo de vídeo.
2. Define la acción inicial que desees (por ejemplo, Al hacer clic). 
3. Define la acción deseada para el vídeo (por ejemplo, Silenciar/activar vídeo). 

Vídeo y animación inteligente

Puedes usar Animación inteligente para conservar el progreso de un vídeo al navegar entre marcos. Supongamos que quieres crear un prototipo en el que se inicia la reproducción al introducir un marco y, a continuación, al hacer clic en el vídeo, se navega a un nuevo marco con una vista más grande.

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

Componentes interactivos y de vídeo

Utiliza componentes interactivos para la creación de prototipos de interacciones de vídeo en un único marco, como previsualizar la reproducción al pasar el ratón sobre él.

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 activada.
3. Crea una conexión desde la variante predeterminada para cambiar a la variante de desplazamiento y desmarca Restablecer estados de vídeo.
4. Crea un marco con un par de instancias del componente y reemplaza el vídeo para reutilizar el componente.

Prueba más formas de crear prototipos con vídeo usando el archivo de área de pruebas →