Antes de começar
Quem pode usar esse recurso
Usuários de qualquer equipe ou plano.
Usuários com acesso de edição podem criar protótipos.
Está começando na prototipagem? Confira nosso guia Introdução à prototipagem.
Todos os protótipos começam com uma única interação. Cada interação tem um gatilho e uma ação.
O gatilho determina qual tipo de interação na área interativa fará o protótipo avançar. Isso pode ser uma interação de mouse ou toque, como tocar, arrastar, clicar e mais.
Este artigo cobre nossos gatilhos de prototipagem em mais detalhes.
Dica: aprenda a criar interações de protótipos, ou revise as ações disponíveis para protótipos →
Ao clicar/Ao toque
Gatilho da ação quando o usuário Clica (desktop) ou Toca (dispositivos móveis) em uma área interativa no protótipo. Você pode adicionar gatilhos de clique ou toque a vários elementos diferentes em uma tela.
Você pode usá-los para navegação, como abrir links, usar menus ou explorar sites. Também podem ser usados quando você precisa que um usuário clique em botões, preencha formulários, ou confirme e descarte alertas.
Ao arrastar
Permite que você execute uma ação quando arrasta um elemento na tela. Isso pode ser o quadro inteiro ou um único elemento, como um controle deslizante.
Você pode usar Ao Arrastar em qualquer direção: esquerda, direita, para cima ou para baixo. Isso é ótimo para gestos simples de deslizar ou para animações mais complexas, como arrastar para atualizar.
Arrastar permite avançar e retroceder ao longo da transição. Isso cria um continuum, ao invés de executar a ação após um gesto de deslizar.
Enquanto passar o mouse
Gatilho da ação quando você passa o mouse sobre a área interativa. Isso pode ser usado para replicar dicas de ferramentas, solicitações na tela ou alterações de estado.
O usuário retornará ao quadro original quando mover o cursor para fora da área interativa. Isso torna a interação excelente quando você não quer tirar os usuários da tela atual.
Enquanto pressionar
O gatilho da ação ocorre quando você clica e segura o mouse ou o trackpad em um desktop. Ou quando você toca e segura em um dispositivo móvel.
Você pode usar esse gatilho para navegar por menus suspensos ou para reproduzir interações de pressionar e segurar, como visualizar uma prévia usando o 3D Touch no iOS.
Ao soltar, o usuário retorna ao quadro original. Isso o torna ideal para sobreposições que capturam interações temporárias ou mudanças de estado.
Teclado/Gamepad
O gatilho Teclado / Gamepad permite reproduzir interações com um atalho de teclado. Isso se aplica a entradas de usuários feitas por teclados, controladores e gamepads.
Um gatilho pode ser uma única tecla ou botão, ou uma combinação de teclas.
Por exemplo: um gatilho pode ser acionado quando o usuário pressiona a tecla Enter ou o botão ✕ em um controle. Ou ao usar um atalho como Shift – K.
Observação: oferecemos suporte oficial aos controladores Xbox One, PS4 e Nintendo Switch Pro. Outros controladores podem funcionar, mas os botões exibidos no Figma podem não refletir precisamente o controlador.
Mouse enter
Exibe o quadro de Destino quando o mouse entra na área interativa. Pode ser uma pequena área, como um botão, ou uma seção inteira da tela.
Você pode usar isso para exibir as opções de um menu suspenso quando o mouse entra no campo. O menu permanecerá aberto até que o usuário execute outra interação, como selecionar um item ou clicar fora do campo.
Depois de configurar um evento de Mouse enter, talvez você queira configurar um gatilho Mouse leave para reverter a ação ao sair da área interativa.
Observação: em 16 de novembro de 2023, o Figma atualizou o comportamento do gatilho Mouse enter para refletir mais precisamente o nome e a descrição do gatilho.
- As interações de Mouse move inside são acionadas sempre que o mouse se move dentro da área interativa.
- Interações de mouse enter são acionadas apenas quando o mouse entra inicialmente na área interativa.
Para manter os protótipos existentes intactos, as interações criadas antes de 16 de novembro de 2023 agora são rotuladas como Mouse move inside.
As interações de Mouse move inside não podem mais ser criadas. Todas as novas interações usam o gatilho Mouse enter.
Mouse leave
Isso exibe o quadro Destino quando o cursor sai da área interativa.
Você pode usar isso para avisos na tela, como um alerta quando não preencheu um campo ou marcou uma caixa.
Observação: em 16 de novembro de 2023, o Figma atualizou o comportamento do gatilho Mouse leave para refletir mais precisamente o nome e a descrição do gatilho.
- As interações de Mouse move outside são acionadas sempre que o mouse se move fora da área interativa.
- As interações de Mouse leave são acionadas apenas quando o mouse sai inicialmente da área interativa.
Para manter os protótipos existentes intactos, interações criadas antes de 16 de novembro de 2023 agora são rotuladas como Mouse move outside.
As interações de Mouse move outside não podem mais ser criadas. Todas as novas interações usam o gatilho Mouse leave .
Mouse down (toque para baixo)
Isso aciona o quadro Destino quando você pressiona pela primeira vez o mouse ou o touch pad. Para dispositivos móveis, isso ocorre quando o dedo do usuário toca pela primeira vez a área interativa.
Mouse up (toque para cima)
Isso aciona o quadro Destino quando você solta o mouse ou o touch pad. Para dispositivos móveis, isso ocorre quando o dedo do usuário deixa de tocar a área interativa.
- Aplique o gatilho Mouse Down ao cabeçalho do menu para abrir uma sobreposição.
- Aplique a interação Mouse up ao item do menu na sobreposição.
- Quando soltam o mouse, levamos o usuário para o quadro relevante.
Dica: use os gatilhos Mouse Down e Mouse Up em conjunto para reproduzir a navegação de um usuário em um menu suspenso.
Após intervalo
O Gatilho após intervalo permite acionar uma ação após o usuário ter passado um determinado tempo em um determinado quadro. Você precisará definir a duração do intervalo em milissegundos (ms).
Quando o vídeo atinge
O gatilho Quando o vídeo atinge está disponível para qualquer conexão que comece em um arquivo de vídeo.
Ele permite que você defina uma ação quando o vídeo atinge um carimbo de data/hora específico. Isso pode ser útil ao criar protótipos para coisas como intervalos de anúncios em vídeo ou acionar uma mensagem sobreposta durante a reprodução do vídeo.
Se você selecionar o gatilho Quando o vídeo atinge, há um campo para inserir um carimbo de data/hora.
Nota: se você inserir um carimbo de data/hora além do comprimento total do vídeo, a ação será acionada quando o vídeo terminar.
Saiba mais sobre prototipagem com vídeo →
Quando o vídeo termina
O gatilho Quando o vídeo termina está disponível para qualquer conexão que comece em um arquivo de vídeo.
Permite que você defina uma ação quando o vídeo termina. Isso pode ser útil ao sequenciar vídeos ou criar uma experiência de reprodução de vídeo interativa.