Guia de prototipagem no Figma
Antes de você começar
Quem pode usar este recurso
Compatível com qualquer equipe ou plano.
Qualquer pessoa com acesso de editor pode criar protótipos.
Qualquer pessoa com acesso de visualizador pode reproduzir protótipos na visualização de apresentação.
Com os recursos de prototipagem do Figma, você pode criar fluxos interativos para explorar como um usuário pode interagir com os seus designs.
Os protótipos são uma maneira fantástica de:
- Ver uma prévia de interações e fluxos de usuários
- Compartilhar ideias e criar novas versões
- Pedir feedback de colaboradores
- Testar as interações com usuários
- Apresentar seus designs aos stakeholders
Assista ao nosso vídeo sobre prototipagem abaixo. Ou confira nossa playlist sobre prototipagem e colaboração no Youtube.
Dica! Para ter um fluxo de trabalho ainda mais eficiente, você pode alternar rapidamente entre as abas Design e Protótipo usando o atalho de teclado Shift E.
Fluxos e pontos de partida
Com a prototipagem no Figma, você pode criar vários fluxos para o seu protótipo em uma página para ver uma prévia da jornada e da experiência completas do usuário em seus designs.
Um fluxo é uma rede de estruturas e conexões em uma única página. Um protótipo pode mapear toda a jornada de um usuário pelo seu aplicativo ou site, ou pode se concentrar em um segmento específico por meio do próprio fluxo. Por exemplo: seu protótipo abrange todas as interações possíveis em um site de e-commerce. Dentro do protótipo, existem fluxos para criar uma conta, adicionar itens a um carrinho e finalizar a compra.
O Figma cria um ponto de partida do fluxo quando você adiciona sua primeira conexão entre duas estruturas. Existem algumas outras maneiras de adicionar um ponto de partida de fluxo ao seu protótipo:
- Com a estrutura inicial selecionada, clique em na seção Ponto inicial do fluxo da barra lateral direita.
- Clique com o botão direito do mouse na estrutura e clique em Adicionar ponto de partida.
- Duplique uma estrutura com um ponto de partida existente.
Quando chegar a hora de testar seus designs, você pode compartilhar o protótipo inteiro ou copiar o link para um ponto de partida do fluxo.
Saiba mais sobre pontos de partida e fluxos →
Observação: um quadro de nível superior pode fazer parte de vários fluxos, mas só pode ter um ponto de partida. Os quadros aninhados em um quadro inicial de nível superior podem ter conexões que conduzem o usuário por vários fluxos. Por exemplo, os botões Login e Crie sua conta podem ser aninhados no mesmo quadro de ponto de partida e, em seguida, conectados a quadros em fluxos separados para cada experiência.
Criar conexões
- Selecione o hotspot para a conexão.
- Clique em para criar a conexão.
- Arraste-a até o destino.
- Se não houver conexões existentes, o Figma transformará o primeiro quadro em um ponto de partida.
Dica! Você pode criar conexões de vários objetos para a mesma estrutura de destino simultaneamente, economizando tempo e esforço ao criar seus fluxos de protótipos. Para fazer isso, selecione vários hotspots iniciais no canvas e clique e arraste o ícone até o destino.
Criar interações e animações
- Abra a aba Protótipo na barra lateral direita.
- Adicione interações
- Defina detalhes da interação
- Aplique uma animação
- Veja uma prévia da sua animação
Ajustar as configurações do protótipo
- Selecione um dispositivo e modelo
- Veja uma prévia do seu protótipo
- Selecione a cor de fundo
- Defina a estrutura inicial do protótipo
Saiba mais sobre prototipagem
Comece agora
- Criar interações de protótipos e animações.
- Selecionar um ponto de partida para o seu protótipo
- Personalizar seu protótipo de dispositivo
- Criar protótipos de ações, gatilhos e animações
Interações avançadas
- Criar sobreposições nos protótipos
- Criar animações avançadas com a animação inteligente
- Criar protótipos de interações de rolagem com comportamento de transbordo
- Adicionar vídeo aos protótipos
- Adicionar GIFs animados aos protótipos
- Usar variáveis em protótipos
- Usar expressões em protótipos
- Várias ações e condicionais
- Modos variáveis em protótipos
Compartilhar e colaborar
- Exibir conexões do protótipo
- Definir opções da visualização da apresentação do protótipo
- Compartilhar seu protótipo
- Visualizar protótipos em um dispositivo móvel
- Dar feedback sobre os protótipos com comentários
Glossário
- Um hotspot é o lugar onde a interação ocorre. Um hotspot pode ser qualquer objeto dentro da estrutura original, como um link, botão, imagem ou ícone, etc.
- As conexões são as setas azuis ou linhas que conectam o hotspot ao destino. Aplicamos as configurações de interação e animação por meio da conexão.
- Um fluxo é a rede de estruturas conectadas que formam um caminho ao longo de um protótipo. Cada fluxo tem seu próprio ponto de partida. É possível ter vários fluxos em um protótipo.
- O ponto de partida é o primeiro quadro de um fluxo. Defina vários pontos de partida para mostrar diferentes fluxos do protótipo na visualização da apresentação.
- O gatilho determina que tipo de interação com o hotspot fará com que o protótipo avance. Pode ser uma interação de mouse ou toque, como tocar, arrastar, clicar, passar o mouse, etc.
- O destino é onde a transição termina. Deve ser uma estrutura de nível superior, ou seja, uma estrutura adicionada diretamente ao canvas, e não um objeto dentro de uma estrutura. Se pensarmos em um caminho de A a B, A seria o hotspot e B é o destino.
- A ação define o tipo de progressão que está ocorrendo no protótipo. Por exemplo, a ação poderia ser navegar para outra estrutura ou abrir uma URL externa.
- As configurações de animação determinam como o protótipo se move de uma estrutura para a outra. Você pode controlar o tipo de animação, bem como a velocidade e a direção.
- A transição é o tipo de animação. Ela define como a ação se move para o destino.
- A direção controla a direção de onde vem a transição. Escolha entre esquerda, direita, superior ou inferior.
- A duração controla o tempo necessário para a animação terminar. Quanto menor for a duração, mais rápida será a transição. Selecione uma duração entre 1ms e 10000ms (10 segundos).
- A atenuação afeta a aceleração da animação—independentemente de começar de forma lenta ou rápida. Isso permite criar animações que pareçam mais naturais.
- As sobreposições são estruturas que aparecem acima da tela ou da estrutura atual. Você pode usar sobreposições para criar dicas de ferramentas, menus interativos, alertas ou confirmações.
- O comportamento de transbordo permite definir como o protótipo responde à rolagem. Isso permite criar interações mais avançadas com o usuário, como carrosséis, galerias ou mapas interativos.
- Escolha qual dispositivo será mostrado ao apresentar seu protótipo. Defina o dispositivo e o modelo.
- A cor de fundo permite definir a cor do plano de fundo do seu protótipo.
- Se tiver um protótipo com estruturas de retrato e paisagem, você poderá selecionar uma orientação. A orientação é definida para o protótipo todo. Não é possível alternar entre as visualizações retrato e paisagem em um protótipo.
- A prévia mostra como vai ficar o visual ou o funcionamento de um item no protótipo. Mostramos prévias das animações e das configurações do dispositivo do protótipo.