Conectar seu protótipo

Antes de começar

Quem pode usar esse recurso

Disponível em todos os planos.

Qualquer pessoa com permissão para editar um arquivo pode criar protótipos.

Protótipos são designs com os quais você pode interagir.

No Figma, todos os protótipos começam com uma única interação. Cada interação consiste em duas partes: um gatilho (o que faz a interação começar) e uma ação (o resultado do gatilho).

Algumas interações ocorrem em um único objeto, como clicar em um objeto para abrir uma URL externa ou clicar em um vídeo para reproduzi-lo e pausá-lo.

Outras interações ocorrem entre dois objetos ou quadros, como clicar em um botão para navegar para o próximo quadro ou clicar em um ícone para abrir uma sobreposição. Essas interações são consideradas conexões, que consistem em três partes:

1. Área interativa: Uma área interativa é o lugar onde a interação ocorre. Uma área interativa pode ser o próprio quadro, ou um objeto dentro do quadro. Você pode criar uma área interativa em qualquer coisa, como um botão, ícone ou título.
2. Conexão: uma conexão é a seta ou a "linha" que conecta a área interativa ao destino. Defina o gatilho da interação, as ações e ajuste as configurações de animação a partir da conexão.
3. Destino: o destino é onde uma conexão termina. Na maioria dos casos, o destino deve ser um quadro de nível superior. Apenas conexões que usam a ação Rolar para podem ter como destino algo dentro do mesmo quadro de nível superior.

Adicione uma interação

Uma interação é criada ao selecionar uma área interativa ou ponto de partida.

1. Navegue até a aba Protótipo da barra lateral direita.
2. Selecione uma camada ou objeto para a área interativa associada à interação.
3. Crie a interação seguindo um destes procedimentos:
   • Passe o mouse sobre o objeto e arraste o ícone de mais para o quadro de destino
   • Clique em Adicionar na seção de Interações do painel de Protótipo.
4. Depois que a interação foi feita, use o painel Detalhes da interação para definir o gatilho, a ação e o destino da interação.

Criar interações em massa

Você pode criar interações a partir de vários objetos de uma só vez. Isso pode ajudá-lo a economizar tempo ao criar várias conexões para o mesmo destino.

1. Selecione seus objetos iniciais, ou áreas interativas, onde as interações começam. Você pode selecionar vários objetos através de um dos seguintes métodos:
   • Selecione um objeto inicial e, em seguida, mantenha pressionada a tecla Shift enquanto clica em objetos adicionais
   • Arraste o cursor sobre os objetos que você quer selecionar
2. Crie as interações seguindo um destes procedimentos:
   • Passe o mouse sobre um dos objetos selecionados, depois clique e arraste o ícone de mais para o quadro de destino
   • Clique no ícone de mais  na  seção de Interações do painel de Protótipo e use o painel de Detalhes da Interação para definir o gatilho, a ação e os detalhes da animação

Detalhes da interação

Depois de criar uma interação, use o modal Detalhes da interação para configurar o seguinte:

1. Gatilho: define qual tipo de interação fará com que o protótipo avance, como um clique do mouse ou gesto de toque.
2. Ação: define que tipo de evento ocorre quando um usuário interage com a área interativa, como mover-se para outro quadro ou acionar uma sobreposição.
3. Destino: define onde a interação termina. Isso pode ser outra tela do protótipo ou uma sobreposição que aparece acima da tela atual. Nem todas as interações têm destinos — por exemplo, o gatilho Voltar retorna automaticamente ao quadro anterior.
4. Configurações de animação: determinam como o protótipo se move de um quadro para o outro.
5. Gerenciamento de estado: clique para redefinir propriedades e estados de objetos ao navegar dentro e entre quadros.
6. Adicionar ação: adicione outra ação ao mesmo gatilho.
7. Fechar o modal de Detalhes da interação.

Um único objeto pode ter múltiplas interações, cada uma com seu próprio gatilho. Por exemplo, você pode ter um objeto com preenchimento de vídeo que possui duas interações: uma que reproduz o vídeo Ao clicar e uma que abre uma sobreposição Quando o vídeo termina. 

Um único objeto pode ter:

• Qualquer número dos seguintes gatilhos:
  • Chave/Gamepad
  • Ao arrastar 
  • Quando o vídeo atinge
• Um de cada um dos seguintes gatilhos:
  • Ao clicar / Ao toque
  • Enquanto passar o mouse
  • Enquanto pressionar
  • Mouse enter
  • Mouse leave
  • Mouse down / Toque pressionado
  • Mouse up / Toque para liberar
  • Após o atraso
  • Quando o vídeo termina

Ajustar a animação

As configurações de animação determinam como o protótipo se move de um quadro para o outro.

1. Animação: a animação define como o protótipo faz a transição de um quadro para outro, como deslocamento, slide ou dissolver.
2. Direção: para certos tipos de animação (como avançar ou deslocamento), você pode definir a direção na qual deseja que a transição se mova. Escolha entre esquerda, direita, inferior ou superior.
3. Animar camadas correspondentes: marque esta caixa para aplicar a transição Animação inteligente a qualquer camada correspondente.
4. Animação de easing e spring: o easing determina a aceleração da transição entre o quadro inicial e seu destino.
5. Duração: a duração controla quanto tempo leva, em milissegundos (ms), para concluir a transição. Escolha uma duração entre 1ms e 10000ms (10 segundos).
6. Visualizar a animação.

Selecionar e editar interações

Use as ferramentas abaixo para melhorar e acelerar a edição de protótipos.

Selecionar interações correspondentes

Interações correspondentes são interações idênticas que começam de objetos correspondentes em outros quadros.

• Interações idênticas são interações com a mesma ação e destino
• Objetos correspondentes são objetos em quadros diferentes que têm nomes idênticos e níveis de hierarquia correspondentes

Para selecionar interações correspondentes:

1. Selecione uma interação.
2. No modal Detalhes de interação, clique em Selecionar interações correspondentes.

Edite os detalhes da interação para atualizar todas as interações selecionadas de uma só vez.

Atualizar destinos de conexão em massa

Se você tiver várias conexões, poderá alterar o destino dessas conexões ao mesmo tempo.

1. Selecione as conexões que deseja editar. Você pode selecionar várias conexões por um dos seguintes métodos:
   • Selecione uma conexão inicial, depois mantenha pressionada a tecla Shift enquanto clica em conexões adicionais.
   • Arraste o cursor sobre as conexões que você deseja selecionar. Isso criará uma caixa azul em torno das conexões selecionadas.
2. Segure e arraste as conexões para um novo quadro de destino. Você também pode selecionar a interação na barra lateral direita e alterar o quadro de destino no painel Detalhes da interação.

Copiar e colar detalhes da interação

Crie protótipos mais rapidamente copiando detalhes da interação e colando-os em outros objetos.

1. Selecione uma interação de protótipo na tela de trabalho.
2. Pressione ⌘ Command / Control + C para copiar ou ⌘ Command / Control + X para cortar os detalhes da interação.
3. Selecione outro objeto na tela de trabalho.
4. Pressione ⌘ Command / Control + V para colar os detalhes da interação no novo objeto.