Usar vídeos em protótipos

Antes de você começar

Quem pode usar este recurso

Compatível com arquivos de equipes educacionais, profissionais, organizacionais e empresariais.

Qualquer pessoa que faça parte de uma equipe paga pode adicionar vídeo aos arquivos.

Qualquer pessoa com acesso de editor pode editar vídeos em arquivos.

Está começando na prototipagem? Confira nosso Guia de prototipagem →

Adicione vídeo aos seus protótipos para replicar a experiência que os usuários teriam em um site ou aplicativo com reprodução ou visualização de vídeo.

Vídeo em protótipos

• Podem ser em formato .mp4, .mov, ou .webm
• Podem ter até 100 MB
• São preenchedores de formas e se comportam como tal
• Atualmente não são compatíveis com o app Figma para dispositivos móveis

Depois de adicionar vídeos ao seu arquivo de design, você pode editar ou ajustar as qualidades básicas do vídeo. Em seguida, você pode adicionar interações aos vídeos para começar a criar seus protótipos.

Adicionar vídeo aos arquivos

O Figma não tem um tipo de camada específico para vídeo. Em vez disso, os vídeos são um tipo de preenchimento e, por isso, você pode adicioná-los a qualquer vetor ou forma.

Há várias maneiras de adicionar vídeos a arquivos de design:

• A Arraste e solte um arquivo de vídeo do seu computador no canvas. 

• B Use o importador de vídeo do seletor de cores de preenchimento. Saiba mais sobre como fazer upload de preenchimentos →

• C Use a ferramenta Inserir imagem/vídeo para adicionar vídeos em massa. ** Saiba mais sobre a ferramenta Inserir imagem/vídeo → **

• C Copie um vídeo de outra camada no arquivo atual ou de outro arquivo.

• D Cole qualquer vídeo da área de transferência no canvas.

Se você adicionar um vídeo diretamente ao canvas, o Figma criará um objeto no canvas com as dimensões do arquivo original. Se você adicionar um vídeo como preenchimento a um objeto existente, o Figma usará o nome e as dimensões do objeto original.

Visualize e atualize os preenchimentos de vídeo na seção Fill da barra lateral direita. Na seção Fill, é possível reproduzir e visualizar o preenchimento do vídeo, saltar para um carimbo de data/hora específico ou percorrer o vídeo.

Você também pode identificar camadas com preenchimentos de vídeo no painel de camadas na barra lateral esquerda. Objetos com preenchimentos de vídeo são representados no painel de camadas com o ícone .

Editar vídeo

Depois de adicionar um vídeo ao seu arquivo, você tem várias opções de edição:

• Escale, gire e ajuste as dimensões de quaisquer camadas com vídeo
• Recorte e reposicione o vídeo aplicado às camadas
• Ajuste as opções do vídeo, incluindo o modo de preenchimento, a rotação e os modos de composição
• Aplique máscaras para mostrar apenas uma parte do vídeo

Protótipo com vídeo

Depois de adicionar o vídeo a um quadro, passe para o Prototype na barra lateral direita. A partir daqui, você pode criar interações entre estruturas com vídeo.

Saiba mais sobre prototipagem →

Propriedades do vídeo

Quando você seleciona um vídeo, há uma seção Video disponível na aba Prototype. Essa seção permite definir o comportamento de um vídeo ao navegar para sua estrutura em um protótipo.

• Marque a caixa para reproduzir o vídeo automaticamente
• Clique no ícone de loop para repetir o vídeo
• Clique no ícone de som para ativar ou desativar a configuração de som padrão do vídeo

Interações de vídeo

Quando você cria qualquer conexão de prototipagem, há um gatilho que determina o que faz com que a interação comece e uma ação que define a resposta do evento acionado.

Os seguintes gatilhos de interação estão disponíveis para vídeos:

• Quando o vídeo atinge – Aciona a ação definida quando o vídeo chega a um carimbo de data/hora específico.
• Quando o vídeo termina – Aciona a ação definida quando a reprodução do vídeo é concluída.

As seguintes ações de interação estão disponíveis para vídeos:

• Reproduzir/pausar vídeo – Selecione Play video, Pause video ou Toggle play/pause.
• Silenciar/ativar som do vídeo – Selecione Mute video, Unmute video ou Toggle mute/unmute.
• Definir um horário específico – Defina um carimbo de data/hora para o qual avançar o vídeo.
• Avançar/retroceder no tempo – Selecione Jump forward ou Jump backward e defina o número de segundos para avançar ou retroceder no vídeo.

Quando você cria uma interação entre duas estruturas que têm o mesmo vídeo, aparece a opção Reset video state no painel de detalhes da interação. Quando ativado, o vídeo será reiniciado do início entre os quadros. Saiba mais sobre gerenciamento de estado do vídeo → 

Interações de vídeo dentro da mesma estrutura

Você pode interagir e criar protótipos com vídeos com base em gatilhos feitos na mesma estrutura. Isso pode ser útil ao tentar criar uma experiência de reprodução de vídeo interativa.

1. Crie uma conexão do seu objeto inicial com o arquivo de vídeo.
2. Defina a ação inicial desejada (por exemplo, On click). 
3. Defina a ação desejada para o vídeo (por exemplo, Mute/unmute video). 

Vídeo e animação inteligente

Você pode usar a animação inteligente para preservar o progresso de um vídeo ao navegar entre quadros. Digamos que você queira criar um protótipo em que a inserção de uma estrutura inicie a reprodução e, em seguida, ao clicar no vídeo, você navegue para uma nova estrutura com uma visualização maior.

1. Crie uma conexão entre as duas estruturas com o mesmo nome de vídeo. Os nomes das camadas de vídeo também devem corresponder.
2. Defina a configuração da animação como animação inteligente.
3. No painel de detalhes da interação, desmarque a opção Reset video states.

Vídeo e componentes interativos

Use componentes interativos para criar protótipos de interações de vídeo em uma única estrutura, como a visualização da reprodução ao passar o mouse.

1. Crie um componente com variantes para um estado padrão e ao passar o mouse.
2. O estado padrão deve ter a reprodução automática desativada, e o estado ao passar o mouse deve ser definido como reprodução automática.
3. Crie uma conexão da variante padrão para mudar para a variante ao passar o mouse e desmarque a opção Reset video states.
4. Crie uma estrutura com algumas instâncias do componente e substitua o vídeo para reutilizar o componente.

Experimente mais maneiras de criar protótipos com vídeo usando o arquivo do playground →