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.

print mostrando o figma com uma camada chamada btn selecionada. ao lado a artboard com a tela em destaque um botao com o texto me mostre

Depois disso no canto superior direito clique em “Prototype”, que fica entre a aba “Design” e “Code”.

print com uma seta apontando para o modo prototipo do figma

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:

gif mostrando o prototipo funcionando ao clicar no botao me mostre, tudo preto e branco

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:

em destaque botao preto com bordas arredondadas com ot exto começar curso agora. Em baixo um link tambem preto com o texto talvez depois

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:

print mostrando o link do link indo para o atalho para voltar a tela anterior do prototipo

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 recém-lançado recurso chamado smart animate.

Gostou do tutorial? Conta para mim nos comentários o que mais você gostaria de ler sobre o tema aqui no blog.