Antes de começar
Quem pode usar esse recurso
Disponível em qualquer plano.
Qualquer pessoa com permissão para editar um arquivo pode criar protótipos.
Está começando na prototipagem? Confira nosso guia Introdução à prototipagem.
A ação define a próxima etapa ou evento no protótipo. Ela é a resposta ao evento de acionamento (gatilho) da interação. Por exemplo, a ação poderia ser Navegar para outro quadro ou abrir um URL externo.
Saiba mais sobre como construir protótipos com interações e animações →
Tipos de ação
Navegar para
Esta ação leva você de um quadro do protótipo para outro. Este é o tipo de ação mais comum de se usar ao navegar entre telas inteiras.
Voltar
Permite que você volte para a tela anterior. É ideal para simular o botão Voltar em seus protótipos.
Definir variável
A ação Definir variável permite que você defina ou modifique o valor de uma variável como resultado de um gatilho de protótipo.
Saiba mais sobre o uso de variáveis em protótipos →
Definir modo da variável
Use esta ação para alterar o modo da variável de uma página durante a prototipagem.
Saiba mais sobre a ação Definir modo da variável →
Condicional
Verifique se uma condição é atendida antes de executar uma ação usando uma declaração condicional if/else.
Saiba mais sobre o uso de condicionais →
Rolar para
Essa ação permite que o protótipo ou um contêiner rolável aninhado role até qualquer objeto dentro do quadro de nível superior. Isso é útil para replicar links âncora e interações com elementos roláveis, como carrosséis.
Se você adicionar Rolar para usando a seção de Interações do Painel de protótipo, só será possível selecionar filhos diretos de quadros roláveis. Para selecionar qualquer objeto dentro do quadro de nível superior, arraste uma linha (noodle) e conecte-a ao objeto que deseja definir como destino.
Com Rolar para, você pode definir a animação de rolagem como Instantânea ou definir uma suavização usando a opção Animar.
Observação: para arrastar uma conexão até um destino oculto por um frame com recorte, desmarque Recortar conteúdo na seção de quadro do painel de Design para expor primeiro a moldura de destino.
Abrir link
Permite direcionar o usuário para um URL fora do protótipo. É ótimo para links externos ou recursos adicionais que não estão disponíveis na navegação principal.
Insira seu URL no campo fornecido, depois de selecionar essa opção.
Dica! Quando você clica em uma área interativa de Abrir link , o link é aberto em uma nova aba. Se for um link para um site externo, o usuário será informado de que está saindo do Figma. Você pode usar a caixa de seleção disponível para pular essa página de aviso no futuro. Esta configuração só será salva no dispositivo atual.
Abrir sobreposição
Esta ação abre o quadro de Destino acima do quadro atual. Isso pode ser usado para exibir um modal, dica de ferramenta ou alerta a partir de um botão ou outro objeto no design.
Fechar sobreposição
Esta ação permite que você feche ou dispense qualquer sobreposição que tenha aparecido sobre o quadro original. Você pode usá-la para simular um prompt ou alerta na tela sendo aceito ou dispensado.
Trocar sobreposição
Essa ação permite substituir um quadro por outro. Ela se comporta de forma semelhante à opção Navegar para quando acionada a partir de uma área interativa em um quadro comum.
Se você aplicar Trocar sobreposição a uma área interativa em uma sobreposição, ele substituirá a sobreposição atual pelo novo quadro de Destino . A nova sobreposição manterá as mesmas configurações de sobreposição da original.
Observação: usar Trocar sobreposição não adiciona esse quadro ao histórico do protótipo. Se você quiser que o usuário possa usar a ação Voltar para alternar entre sobreposições, recomendamos usar a opção Navegar para.
Reproduzir/Pausar vídeo
A ação Reproduzir/pausar vídeo está disponível para qualquer interação que termine em um vídeo. Quando selecionada, as seguintes ações estão disponíveis:
- Reproduzir vídeo - Iniciar a reprodução do vídeo
- Pausar vídeo - Pausar reprodução de vídeo
- Alternar reproduzir/pausar - Alternar entre reproduzir e pausar a reprodução do vídeo
Saiba mais sobre prototipagem com vídeo →
Silenciar/ativar som do vídeo
A ação Silenciar/ativar som do vídeo está disponível para qualquer interação que termine em um vídeo. Quando selecionada, as seguintes ações estão disponíveis:
- Silenciar vídeo - Desativar o som do vídeo
- Ativar som do vídeo - Ativar o som do vídeo
- Alternar silenciar/ativar som - Alternar entre ativar e desativar o som do vídeo
Saiba mais sobre prototipagem com vídeo →
Definir um tempo específico
A ação Definir para tempo específico está disponível para qualquer interação que termina em um vídeo. Esta ação salta para uma marcação de tempo específica do vídeo. Você pode definir a marcação de tempo após selecionar a ação Definir um tempo específico.
Nota: Se você inserir um timestamp que esteja além da duração total do vídeo, a ação irá pular para o final do vídeo. Se a configuração de loop de vídeo estiver ativada, o vídeo começará a ser reproduzido novamente desde o início.
Saiba mais sobre prototipagem com vídeo →
Avançar/retroceder no tempo
A ação Avançar/retroceder no tempo está disponível para qualquer interação que termine em um vídeo. Quando selecionada, as seguintes ações estão disponíveis:
- Avançar - Defina um número de segundos para avançar rapidamente na reprodução do vídeo.
- Retroceder - Defina um número de segundos para retroceder na reprodução do vídeo.
Esta ação pode ser útil ao criar uma experiência de reprodução de vídeo interativa.
Observação: se você avançar além da duração total do vídeo, a ação saltará para o final do vídeo. Se a configuração de loop de vídeo estiver ativada, o vídeo começará a ser reproduzido novamente desde o início.
Saiba mais sobre prototipagem com vídeo →
Alterar para
A ação Alterar para está disponível ao realizar prototipagem com componentes interativos.
Use a ação Alterar para para alternar entre variantes em um conjunto de componentes. Por exemplo, você pode ter um conjunto de componentes para um ícone de caixa de seleção, com uma variante marcada e uma variante desmarcada. Com a ação Alterar para, é possível alternar entre as variantes marcada e desmarcada no protótipo.
Dica: você pode usar a ação Alterar para em uma instância aninhada para alterar a variante do componente pai.