Antes de começar
Quem pode usar esse recurso
Usuários de qualquer equipe ou plano podem reproduzir protótipos
Qualquer pessoa com acesso de visualizador a um arquivo ou protótipo pode reproduzir protótipos. Qualquer pessoa pode ajustar as opções de visualização no modo de apresentação.
Protótipos replicam como os usuários podem interagir com seus designs, permitindo que você veja e teste como eles funcionam antes de passar para o desenvolvimento. No Figma, crie protótipos diretamente na tela de trabalho. Então, reproduza-os para ver as interações e animações do protótipo em ação.
Antes de reproduzir um protótipo, prepare o design para que o protótipo funcione como desejado.
Depois, escolha como você gostaria de reproduzir o protótipo:
- Visualizar: reproduzir o protótipo diretamente no editor, com uma visualização em linha. Veja como o protótipo funciona enquanto você o constrói — tudo na mesma aba.
- Apresentar: reproduzir o protótipo no modo de apresentação, em uma aba separada. Compartilhe o protótipo com outras pessoas ou veja como ele fica em um dispositivo específico.
Prepare protótipos para reprodução
A maneira como os quadros e conexões são organizados na tela de trabalho impacta como os protótipos são reproduzidos:
- O design deve estar dentro de um quadro para Visualizar ou Apresentar.
- Se houver conexões de prototipagem, o Figma exibirá apenas aqueles quadros com conexões enquanto o protótipo é reproduzido. Clique em cada tela ou interaja com qualquer área interativa.
- Se não houver conexões de prototipagem, você pode navegar através dos quadros da página atual.
- Configure um ponto de partida do fluxo para determinar onde a jornada do usuário deve começar. Você pode configurar múltiplos pontos de partida do fluxo.
- Para o modo de apresentação, configure o tipo de dispositivo, o ponto de partida e a cor do plano de fundo do protótipo nas configurações do protótipo.
Depois de preparar o protótipo para a reprodução, escolha Visualizar ou Apresentar seu protótipo.
Visualizar um protótipo
Use a função visualizar em linha para reproduzir seu protótipo diretamente na tela de trabalho juntamente com seu design. Com a função visualizar em linha, quaisquer alterações de design são refletidas imediatamente na função visualizar para que você possa ver as mudanças em tempo real. Quando você clica em outro quadro na tela de trabalho, a função visualizar pula para esse quadro.
Para abrir a visualização em linha, siga um destes passos:
- Clique em Visualizar na barra de ferramentas superior
- Clicar no ícone de visualização em qualquer ponto de partida do fluxo
- Use ⇧ Shift Space no seu teclado
Ao visualizar em linha, você pode:
- Use as setas esquerda e direita para navegar para trás ou para frente pelo protótipo.
- Reinicie o protótipo a partir do último quadro selecionado na tela de trabalho. Você também pode pressionar R para reiniciar.
- Abra o menu de overflow para escolher entre diferentes opções de escala para o seu protótipo.
- Abra o protótipo no modo de apresentação em uma nova aba.
- Clique no X para fechar a visualização em linha.
- Redimensione a visualização clicando e arrastando a borda da janela de visualizar. Mantenha pressionada a tecla ⇧ Shift para escalar proporcionalmente.
Opções do menu de overflow
O menu de overflow para o visualizador em linha contém diferentes opções de escalonamento e visualização para o seu protótipo. As opções disponíveis vão variar dependendo se você selecionou um dispositivo protótipo. Algumas dessas opções se sobrepõem.
Ajustar à largura
Escale o protótipo para que ele preencha a largura da tela. Disponível apenas se o dispositivo do protótipo estiver configurado como Nenhum dispositivo ou Apresentação na página.
Responsivo
O conteúdo do protótipo será redimensionado e reorganizado conforme o visualizador de protótipos é redimensionado de acordo com as restrições e propriedades de layout automático aplicadas ao design. Isso permite visualizar designs em diferentes tamanhos de janela e verificar seu comportamento responsivo. Para que o Responsivo funcione, deve haver restrições e configurações de layout automático aplicadas ao design.
Siga o protótipo
O quadro selecionado na tela de trabalho é atualizado para espelhar o quadro atual na visualização em linha. À medida que você navega pelo protótipo na visualização, sua seleção e posição na tela de trabalho o acompanharão.
Redimensionar janela/dispositivo para 100%
Redimensiona o visualizador ou dispositivo para 100% do tamanho do quadro.
Respeitar a proporção
A janela do visualizador em linha redimensiona-se para corresponder à proporção do quadro atual. Disponível apenas quando um dispositivo de protótipo está definido como Sem dispositivo.
Mostrar quadro do dispositivo
Mostrar ou ocultar o quadro físico do dispositivo. Disponível apenas quando um quadro de dispositivo do protótipo é selecionado.
Apresentar um protótipo
Use o modo de apresentação para executar seus protótipos em uma nova aba. você pode interagir com áreas interativas ou inserir atalhos de teclado dentro do seu protótipo.
Para abrir um protótipo no modo de apresentação na área de trabalho, clique em Apresentar na barra de ferramentas, ou use o atalho de teclado:
- Mac:⌘ Command⌥ Optionreturn
- Windows: ControlAltEnter
O Figma apresentará o dispositivo contra a Cor do plano de fundo que você selecionou.
Dica: Quer compartilhar seu protótipo com outras pessoas? Saiba mais sobre o compartilhamento de protótipos.
Quer reproduzir seu protótipo em um dispositivo móvel? Saiba mais sobre como visualizar protótipos em um dispositivo móvel.
Layout do modo de apresentação
O modo de apresentação contém várias opções que você pode escolher para interagir com um protótipo.
Do lado esquerdo da barra de ferramentas, você pode:
- Clicar no logo do Figma para ir ao navegador de arquivos
- Clique em para mostrar e ocultar a barra lateral esquerda, onde você pode selecionar fluxos e visualizar suas descrições.
- Clique em para entrar no modo de comentários e adicionar comentários ao protótipo.
Do lado direito da barra de ferramentas, você pode:
- Clicar na seta ao lado do seu avatar e escolher destacar-se ou seguir um apresentador
- Compartilhe o protótipo
- Abra o menu de opções para selecionar diferentes configurações para o protótipo.
- Clique em para entrar no modo de tela cheia.
Na parte inferior do modo de apresentação, você pode:
- Usar as setas para a esquerda e a direita para mover entre as telas.
- Use o alternador de dispositivos para trocar para um dispositivo similar e acessar outras opções de escala. Disponível se um quadro de dispositivo estiver selecionado para a página.
- Clique em Reiniciar ou pressione R para voltar ao ponto de partida do fluxo atual. Se não houver fluxos, ele retornará ao primeiro quadro na tela de trabalho.
Menu de opções
Clique em para abrir o menu de opções para configurações adicionais.
As seguintes opções estão sempre disponíveis:
Ativar atalhos do Figma
Ative atalhos do teclado do Figma, como:
- C para abrir comentários
- F para entrar em tela cheia
Quando ativado, os usuários podem navegar pelos protótipos com teclas, como as setas esquerda e direita no teclado.
Quando desativado, os usuários só podem navegar através de protótipos clicando nas áreas interativas ou clicando nos ícones de seta à esquerda e à direita na parte inferior da tela.
Exibir dicas ao clicar
Dicas de interação ajudam a guiar os usuários por um protótipo. Elas mostram onde estão as áreas interativas no protótipo. Quando um usuário clica fora de uma área interativa, o Figma destaca quaisquer áreas clicáveis com uma caixa de delimitação azul.
Disponibilizar para uso offline
Pré-carregue seus protótipos para poder apresentá-los offline.
Configurações de acessibilidade
As configurações de acessibilidade ajudam pessoas com deficiências a acessar e interagir com um protótipo. Por exemplo, pessoas com deficiência visual podem adaptar um protótipo para leitores de tela e outras tecnologias assistivas.
Ocultar UI
Você pode optar por mostrar ou ocultar a UI do protótipo do Figma no modo de apresentação. Isso é útil quando você está testando um protótipo e deseja evitar distrações.
Quando você oculta a UI do Figma no modo de apresentação, o Figma irá:
- Ocultar a barra de ferramentas e o rodapé na sua visualização atual.
- Oculte a barra lateral de fluxos se Mostrar barra lateral estiver marcado no menu Opções.
- Atualize o URL do protótipo com a variável
&hide-ui=1. - Lembre-se de como restaurar a barra de ferramentas e o rodapé.
- Permite que você copie o link de compartilhamento atualizado. Se você compartilhar este link, o Figma ocultará a barra de ferramentas, o rodapé e a barra lateral para qualquer outro visualizador.
Nota: Ajustar algumas configurações no menu Opções atualizará o URL para compartilhar o protótipo. Certifique-se de copiar o novo URL se você fizer quaisquer alterações.
O menu de opções também contém opções de escala de conteúdo e dispositivo para determinar como seu protótipo ou quadro do dispositivo é exibido e redimensionamento. Os tipos de opções de escala disponíveis dependem se você selecionou um dispositivo protótipo:
Opções de dimensionamento sem quadro de dispositivo
Se você não tiver um dispositivo de protótipo selecionado na página, o menu de opções oferece as seguintes opções de escalonamento de conteúdo:
Tamanho real (100%)
Exiba o protótipo com base no tamanho total do quadro do design. Dependendo do quadro e do tamanho da tela, isso pode resultar em um protótipo cortado.
Responsivo
O conteúdo do protótipo será redimensionado e reorganizado conforme o visualizador de protótipos é redimensionado de acordo com as restrições e propriedades de layout automático aplicadas ao design. Isso permite visualizar designs em diferentes tamanhos de janela e verificar seu comportamento responsivo. Para que o Responsivo funcione, é necessário que haja restrições e configurações de layout automático aplicadas ao design.
Ajustar à largura
Redimensiona o protótipo para que preencha a largura da tela.
Ajustar largura e altura
Reduz o protótipo para que tanto a largura quanto a altura se ajustem à janela do visualizador. Não aumentará o tamanho do protótipo.
Preencher a tela
Redimensiona o protótipo horizontal e verticalmente para que ele preencha toda a tela. Não transbordará qualquer conteúdo do design.
Dependendo do tamanho dos quadros, o protótipo terá como padrão certas configurações de escala e diferentes opções serão exibidas nas seções Recomendadas e Outras opções de escala do menu de opções:
|
Configuração padrão de escala |
Outras opções recomendadas e de escala |
|
|
O primeiro quadro é mais largo que 1024px |
Tamanho real (100%) |
Responsivo |
|
O primeiro quadro é mais estreito que 1024px |
Tamanho real (100%) |
Ajustar largura e altura |
|
Todos os quadros têm um formato 16:9, ou tipo de dispositivo definido para Apresentação |
Preencher a tela |
Tamanho real (100%) |
|
Se o tipo de dispositivo estiver definido como Personalizado |
Ajustar largura e altura |
Preencher a tela Tamanho real (100%) |
Opções de dimensionamento com quadro de dispositivo
Com quadro de dispositivo, o menu de opções fornece opções de escala Responsivas e Fixas.
Responsivo
O conteúdo do protótipo será redimensionado e reorganizado conforme o visualizador de protótipos é redimensionado de acordo com as restrições e propriedades de layout automático aplicadas ao design. Isso permite visualizar designs em diferentes tamanhos de janela e verificar seu comportamento responsivo. Para que o Responsivo funcione, deve haver restrições e configurações de layout automático aplicadas ao design.
Tamanho fixo
Mostra o design a 100% dentro do dispositivo. Dependendo do tamanho do quadro e do dispositivo, isso pode resultar em um protótipo cortado. Você pode controlar o tamanho do dispositivo com as opções de escalonamento de dispositivo.
Se você tiver um dispositivo protótipo selecionado, o alternador fica disponível na parte inferior do modo de apresentação, permitindo que você escolha dispositivos protótipos semelhantes ao atual. Também possui opções de escalonamento de dispositivo para você escolher:
Ajustar o dispositivo à tela
Reduza o quadro do dispositivo para que ele se ajuste à janela do visualizador.
Ajustar o zoom do dispositivo para preencher a tela
Redimensionar o dispositivo para que preencha toda a tela.
Exibir dispositivo em 100%
Exiba o protótipo em 100% do tamanho do quadro. Dependendo do quadro e do tamanho da tela, isso pode resultar em um protótipo cortado.
Mostrar quadro do dispositivo
Se um dispositivo de protótipo estiver selecionado, esta opção permite mostrar ou ocultar o quadro físico do dispositivo.
Dica: Pressione Z no seu teclado enquanto estiver no modo de apresentação para alternar entre as opções de escala.
Ordenação e navegação dos quadros
Ao executar seu protótipo, você pode pressionar →, Espaço ou N para navegar até o próximo quadro, e ← para navegar até o quadro anterior. Esta configuração está ativada por padrão.
Os quadros seguintes e anteriores são determinados pela posição dos quadros na tela de trabalho ou pelas conexões de prototipagem que você criou.
Protótipos com um ponto de partida do fluxo
Se o seu protótipo tiver um ponto de partida, o Figma criará um "histórico" dos quadros que você visitou ao visualizar o protótipo.
- ← irá para o quadro anterior, se houver um disponível.
- → navegará para o próximo quadro. Se não houver histórico—como após usar ←—então ele navegará para um quadro adjacente que você não tenha visitado.
Protótipos sem um ponto de partida do fluxo
Se um protótipo não tiver um ponto de início do fluxo, o Figma ordena os quadros com base em suas coordenadas na tela de trabalho. Primeiro, pela coordenada x da esquerda para a direita, depois pela coordenada y de cima para baixo.
Se a coordenada y for desviada de alguma forma, os quadros podem aparecer fora de ordem. Para corrigir, você pode definir alinhamento horizontal para cada linha de quadros para alinhar ao topo.
- ← irá para o quadro anterior se houver um disponível.
- → navegará para o próximo quadro. Primeiro pelo x-coordenado, depois pelo y-coordenado.