Uma dúvida de muitas pessoas quando começam a trabalhar com o Figma é: como fazer protótipo no Figma? É possível? Vamos ver nesse tutorial em português como funciona as funcionalidades mais básicas de prototipagem da ferramenta.
Antes de tudo, você precisa ter uma conta no Figma. Se ainda não tem, veja o post de como criar uma conta no Figma.
Vamos começar?
Protótipo rápido no Figma
Considere que temos duas telas de wireframe de um aplicativo de aulas. Nosso objetivo é prototipar o fluxo de telas para que alguém assine o serviço.
Você pode pegar o exemplo de protótipo no Figma aqui ou usar um criado por você mesmo.
No Figma, clique no botão “Me mostre”, ele ficará com uma borda roxa (indicando que se trata de um componente/symbol) e na lateral esquerda, nas camadas, a camada “btn” ficará selecionada.
Depois disso no canto superior direito clique em “Prototype”, que fica entre a aba “Design” e “Code”.
Repare que o botão agora possui uma bolinha, indicada na imagem acima com uma seta amarela. Clique nessa bolinha, segue o clique e arraste para a tela ao lado chamada “Curso”.
Feito isso uma linha azul com uma seta na ponta indicará que o link entre essas duas telas foi feita com sucesso! Agora lá em cima no Figma clique em “Play” para ver o resultado:
Opa mas como o usuário vai voltar? Na tela de “Curso” vamos criar um link em baixo do botão para que isso seja possível:
Agora voltando na parte de prototip, clique no link que criamos agora e arraste a linha para tela anterior ou arraste para o atalho de “Back” como mostrado na imagem abaixo:
Protótipo pronto! Basicamente então para fazer os links entre as telas você só precisa entrar no modo “Prototype” da ferramenta e ir arrastando para onde faz sentido.
Em futuros posts vamos aprender um pouco mais sobre as features em torno da parte de protótipo no Figma como as animações, interações, etc. E até mesmo o smart animate. Lembrando que você pode sempre nos seguir no YouTube para vídeos tutoriais.
Gostou do tutorial? Nos marque nas redes sociais (LinkedIn, Twitter, Instagram) contando para gente se deu certo e se você já conhecia o Figma.