Pular para o conteúdo
charmotion
Comece agora

Animação de mascote em protótipos do Figma e handoff para desenvolvedores

Por equipe Charmotion · Atualizado em

Ilustração de capa do guia: Animação de mascote em protótipos do Figma e handoff para desenvolvedores, com personagens de demonstração do Charmotion

Protótipos do Figma não reproduzem arquivos Rive; uma resposta no fórum do Figma, repassando o fundador do Rive, diz que o código do Figma não dá o acesso necessário para incorporá-los. Em vez disso, mostre o mascote com GIFs animados ou preenchimentos de vídeo, um por estado, trocados com variantes de componentes interativos, e entregue aos desenvolvedores o .riv junto com um contrato de estados por escrito.

Principais pontos

  • Não existe uma forma oficial de reproduzir um .riv dentro de um protótipo do Figma; um plugin de terceiros anunciado em 2025 não muda isso.
  • GIFs só ficam animados no modo de apresentação; no editor, aparecem estáticos.
  • Preenchimentos de vídeo aceitam .mp4 ou .mov em H.264 e .webm em VP8 de até 300 MB, exigem um plano pago para serem adicionados e não são reproduzidos no app mobile do Figma.
  • Monte o mascote como um componente com uma variante por estado e alterne com Change to, After delay e When video ends.
  • Entregue o .riv com a state machine, o view model, os valores das propriedades, os triggers e os eventos de tela que os definem.

Protótipos do Figma reproduzem arquivos Rive?

Não. O fórum do Figma tem pedidos de embeds do Rive e de reprodução em protótipos desde março de 2024. Em fevereiro de 2025, um desenvolvedor da comunidade anunciou um plugin beta do Rive e, em maio de 2025, outra resposta explicou que ele não consegue reproduzir animações Rive em protótipos, repassando a visão do fundador do Rive de que "o código do Figma não permite acesso onde é necessário para incorporar arquivos Rive e reproduzi-los". Nenhuma resposta da equipe do Figma aparece no tópico.

Então planeje o protótipo com substitutos que o Figma consiga reproduzir e reserve o arquivo interativo real para o desenvolvimento. Essa divisão é saudável de qualquer forma: o protótipo testa fluxo e timing com os stakeholders, e o .riv leva a lógica real de estados aos desenvolvedores.

Devo usar GIF ou vídeo em um protótipo do Figma?

Os dois funcionam, mas se comportam de forma diferente.

GIF animadoPreenchimento de vídeo
FormatosGIF.mp4 ou .mov com H.264, .webm com VP8
Onde reproduzSó no modo de apresentação; estático no editorProtótipos, com opções de reprodução automática, loop e som na aba Prototype
LimitesLargura ou altura de até 4.096 pxAté 300 MB; sem suporte no app mobile do Figma
Planos (para adicionar)Professional, Education, Organization, Government, EnterpriseOs mesmos planos pagos; equipes Starter podem editar vídeos existentes
ExportaçãoO Figma exporta GIFs como imagens estáticasNão é exportado como vídeo

Duas consequências práticas. Primeiro, um WebM VP9 com fundo transparente, o formato web mais comum para um personagem com canal alfa, não está na lista do Figma, e o artigo do Figma sobre vídeo não menciona transparência, então conte com um fundo sólido e combine-o com o frame. Segundo, se os stakeholders revisam no celular pelo app mobile do Figma, use GIFs, porque o vídeo não é reproduzido lá.

Como prototipar um mascote que muda de estado?

Transforme o mascote em um componente com uma variante por estado (idle, loading, success, error), cada uma com o GIF ou vídeo daquele estado. Depois use componentes interativos, que adicionam a ação Change to para alternar entre variantes:

  • Loops (idle, loading, listening) ficam em loop infinito como GIFs, ou como vídeos com Loop ativado.
  • Reações únicas (success, error, yes) devem tocar uma vez e voltar. Com vídeo, desative o Loop e conecte When video ends a Change to idle. Com GIF, use After delay definido com a duração do clipe em milissegundos.
  • Eventos de tela acionam as trocas: um toque em um botão muda o mascote para loading, e um After delay no frame simula a resposta do servidor e o muda para success.

Mantenha as variantes do mesmo tamanho, com o personagem na mesma posição, senão ele vai pular entre os estados. Nomeie as variantes com os estados reais (mood=loading, trigger=success) para que o protótipo já fale a língua dos desenvolvedores.

Diagrama de uma state machine do Rive: um estado de entrada, dez estados de loop escolhidos por um número mood e estados de reação única por trigger que voltam ao loop atual
Como um .riv do Charmotion é conectado: o número mood escolhe um loop, e os triggers tocam reações únicas a partir de qualquer estado.

O que os designers devem entregar aos desenvolvedores no lugar do GIF?

O .riv e um contrato de estados. Os GIFs eram substitutos; o build usa o arquivo real, então os desenvolvedores precisam saber qual state machine executar, quais propriedades existem, o que cada valor significa e qual evento de tela o define. Coloque isso ao lado do frame como nota ou anotação:

File:           character.riv
Artboard:       default
State machine:  CharacterViewModelMachine   (autoBind: true)
View model:     Character
  mood (number) 0 idle, 1 happy, 2 wave, 3 thinking, 4 sad,
                5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention
  triggers      success, error, yes, no, enter, exit
Screen events:
  Upload starts        -> mood = 5
  Upload succeeds      -> trigger success, then mood = 0
  Upload fails         -> trigger error, then mood = 4
  Empty inbox          -> mood = 8
Size:           120 x 120 pt, fit Contain
Reduced motion: autoplay off, show poster.png
Fallbacks:      poster.png, idle.mp4

O que torna um contrato útil:

  • Nomes exatos. Nomes de state machine, view model e propriedades diferenciam maiúsculas de minúsculas no código.
  • Eventos, não animações. Os desenvolvedores conectam eventos do app aos inputs; o arquivo decide como as transições ficam.
  • Tamanho e ajuste. O tamanho em pontos no layout e como o artboard deve se ajustar a ele.
  • Movimento reduzido e fallbacks. O que mostrar quando o movimento está desativado ou o arquivo não carrega.

Os guias por plataforma mostram o outro lado do contrato: Data Binding no SwiftUI, React e Next.js e a visão geral da state machine.

Como levar a arte do mascote do Figma para o Rive?

Copie e cole. A documentação do Rive diz: "Você pode usar Copy as SVG e colar diretamente no editor do Rive", e o Rive anunciou esse fluxo de trabalho no blog em fevereiro de 2023. O conteúdo colado vira objetos vetoriais nativos do Rive, prontos para você fazer o rig e animar.

  • Achate ou converta em contorno os efeitos que o Rive talvez não interprete da mesma forma; a documentação do Rive sugere converter essas partes "em caminhos editáveis na sua ferramenta de design" antes.
  • Nomeie as camadas no Figma antes de copiar: os nomes vêm junto e facilitam o rigging.
  • Cole um personagem por vez, em vez de uma tela inteira.

O plugin "Rive for Figma" citado no tópico do fórum é um projeto da comunidade, não um lançamento oficial do Rive, e não adiciona reprodução no protótipo.

Quais exportações do Charmotion funcionam no Figma?

O Charmotion entrega cada uma das suas 17 animações em arquivos separados, o que corresponde diretamente a uma variante por estado. O GIF (480 px, fundo sólido) está em todo conjunto do Charmotion e toca no app móvel do Figma; combine a cor do frame com o fundo do GIF ou coloque-o sobre um bloco. O MP4 de 1080×1080 serve para preenchimentos de vídeo quando você quer um movimento mais suave, e o MP4 9:16 cabe em momentos de tela cheia, como uma abertura. O .riv com o view model Character (mood de 0 a 9 e os triggers success, error, yes, no, enter e exit), além de código para web, React e SwiftUI, é o arquivo de handoff, então o contrato acima já está quase todo preenchido. O .riv está em todos os planos pagos (a partir de US$ 20/mês), junto com o MP4, o GIF e o vídeo de abertura 9:16 com fundo sólido.

Como prototipar um mascote no Figma e fazer o handoff do arquivo Rive

  1. Exporte versões provisórias. Exporte um GIF ou MP4 H.264 por estado, todos do mesmo tamanho e com o personagem na mesma posição.
  2. Monte o componente. Crie um componente de mascote com uma variante por estado e coloque cada GIF ou vídeo na sua variante.
  3. Conecte os estados. Use Change to com toques, After delay e When video ends para alternar entre as variantes.
  4. Revise no modo de apresentação. Reproduza o protótipo no modo de apresentação, onde os GIFs ficam animados.
  5. Escreva o contrato. Liste, ao lado do frame, a state machine, o view model, as propriedades, os triggers e os eventos de tela que os definem.
  6. Faça a transição. Anexe o .riv e os arquivos de fallback, e indique aos desenvolvedores o guia da plataforma usada na stack deles.

Perguntas frequentes

Por que meu GIF não se mexe no Figma?

O Figma só reproduz GIFs animados no modo de apresentação. No editor, segundo a central de ajuda, eles aparecem como imagens estáticas. Abra o protótipo pelo botão de apresentar para ver a animação. Também não é possível exportar GIFs do Figma como animações: o Figma os exporta como imagens estáticas.

Posso usar um WebM com fundo transparente em um protótipo do Figma?

O Figma lista .webm com codificação VP8, enquanto vídeos de personagem com fundo transparente geralmente usam VP9, e o artigo sobre vídeo não menciona suporte a canal alfa. Use um MP4 H.264 ou um GIF com fundo igual ao do frame, e guarde os arquivos transparentes para a implementação real.

Os vídeos de protótipos do Figma tocam no app mobile do Figma?

Não. A central de ajuda do Figma diz que, no momento, vídeos não são compatíveis com o app mobile do Figma. Se os revisores forem abrir o protótipo no celular, use GIFs animados para os estados do mascote, que tocam no modo de apresentação, ou compartilhe um link para desktop para os vídeos.

Respostas rápidas deste guia

Fontes

Guias relacionados