Praticando Figma: prototipação

Prototipando no Figma - Apresentação e breve aula sobre prototipação

Olá! Meu nome é Maria Silveira, sou a instrutora aqui na Alura e irei acompanhar vocês neste curso de Praticando Prototipação no Figma.

Audiodescrição: Maria é uma mulher de pele parda e cabelos cacheados, presos em um rabo de cavalo. Usa uma camiseta regata na cor branca, fones de ouvido sem fio e brincos dourados. Na sua frente há um microfone e ao fundo, ao lado direio, uma prateleira com livros e itens de decoração. A iluminação do ambiente é roxa.

Revisando conceitos de prototipação

Neste vídeo, vamos revisar os principais conceitos e técnicas de prototipação no Figma, com foco na criação de interações entre telas, microinterações e animações básicas, que ajudam a transformar nossos designs e interfaces estáticas em experiências dinâmicas e mais realistas.

Agora, partindo para a revisão, vamos acessar o Figma, onde já deixamos algumas telas prontas. Repare que algumas telas, embora semelhantes, possuem informações diferentes. Na página 1 temos um mouse na cor branca e, na página 2, o mouse na cor preta.

Vamos conectar uma tela à outra, simulando a mudança de cor. Quando o usuário clicar para ver o mouse na cor preta, a tela mudará da que tem o mouse na cor branca para a cor preta e vice-versa.

Para isso, acessamos a parte de prototype (protótipo) no Figma, na barra lateral direita, e vamos conectar nossos elementos. Primeiramente, clicamos na bolinha preta que indica a cor do mouse. Queremos que quando a pessoa usuária clique nessa bolinha, abra a outra página, então, arrastamos até a página de baixo para fazermos a ligação.

Ao fazer essa ligação, aparecem opções de interação. Nesse caso, ao clicar na bolinha, navegamos da página 1 para a página 2. Queremos que isso ocorra de forma instantânea e não com uma animação, então no campo "Animation" mudamos de "Smart Animation" para "Instant".

Após, precisamos fazer o caminho de volta. Então, quando clicarmos na bolinha branca queremos ser direcionados para o mouse da cor branca, então clicamos na bolinha e fazemos a ligação com o mouse.

Para ver essa interação funcionando, adicionamos um flow (fluxo) na primeira página, um ponto de início. Então, clicamos na primeira página, depois, ao lado direito, no campo "Flow starting point" clicamos no ícone de "+" e escrevemos "Play". Após, ainda na lateral superior direita, clicamos no ícone identificado por um play.

Abre uma nova janela, onde podemos verificar se a interação está funcionando. No campo de cores do mouse, clicamos na bolinha preta. Feito isso, a tela muda para a imagem de um mouse na cor preta. Ao clicar na bolinha branca o mesmo acontece.

Agora que revisamos o principal conceito de prototipação no Figma, é hora de começar a praticar. Duplique o material de apoio no Figma e exercite a prototipação, animação e outras funcionalidades de interesse. Teste diferentes interações entre telas a partir das atividades a seguir.

Nos encontramos no próximo vídeo. Até mais!

Prototipando no Figma - Criação de micro interação entre componentes

Já recordamos o funcionamento do processo de interação entre telas e elementos, agora vamos partir para a criação de uma microinteração de componentes. Neste caso, temos o componente botão em diferentes hierarquias e em dois estados distintos: o estado default e o estado de hover. O estado de hover ocorre quando passamos o mouse sobre um botão ou outro elemento, provocando uma mudança, que neste caso será uma alteração de cor.

Configurando a interação no estado de hover

Para que essa mudança ocorra, na barra de ferramenta na lateral direita, clicamos em "Prototype", depois, clicamos no botão principal de no estado inicial (default), e fazemos uma interação ligando-o ao botão no estado de hover. Dessa vez, a interação não será por clique, mas sim ao passar o mouse sobre ele, então, no campo "Trigger", selecionamos "While hovering". Assim, o botão sairá do estado default para o estado de hover de forma instantânea.

Para simular a animação, criamos um frame na lateral direita. Depois, pressionando o "Alt", arrastamos o botão inicial. Para finalizar, na lateral superior direita, no campo Flow starting point, clicamos no ícone de "+" para adicionar o Play asFrame. Clicamos no ícone de "Play". Depois, na nova página, passamos o mouse em cima do botão e notamos que ele muda de cor. Ao tirar o mouse ele volta para o estado inicial.

Criando uma animação em estado de hover

Agora, vamos relembrar outro conceito interessante que podemos criar por meio da ferramenta de prototipação do Figma: a animação. Trouxemos outro componente, e desta vez faremos uma microinteração em estado de hover com animação. Temos um componente que é uma recomendação de outros produtos, já que estamos trabalhando com e-commerce. Temos o mouse e o headset. Na segunda variante, o mouse está maior, e na outra variante, o headset está um pouco maior.

O objetivo é que, ao passar o mouse sobre esses elementos, ocorra um zoom na imagem. Para isso, vamos em Prototype novamente e criamos uma animação. Ao passar o mouse sobre o card do mouse, ele mudará para a segunda variante de forma animada. Após fazer a conexão entre as imagens, na janela que abre, no campo "Trigger" selecionamos a opção "While hovering", em "Property 1" selecionamos a "Variant2" que é o segundo componenete. Por fim, em "Animation", selecionamos a opção "Amart animate" para adicionar a animação. Após, fazemos o mesmo com o headset.

Criamos um frame na lateral direita e com o "Alt" pressionado arrastamos o componente no estado default. Aumentamos um pouco mais o frame e centralizamos o elemento para facilitar a visualização. Adicionamos um play e aguardamos o carregamento. Vamos verificar se a animação funciona. Ao passar o mouse no card do mouse, a animação ocorre, e o mesmo acontece com o card do headset.

Após configurar as interações, visualizar e testar para garantir que a animação, a microinteração e a interação entre telas estão funcionando, podemos compartilhar o link da prototipação com outras pessoas, copiando o link ou adicionando-as ao nosso arquivo.

Agora que revisitamos esses conceitos principais, é hora de praticar. Duplique o material de apoio no Figma e experimente criar o que está sendo proposto em cada atividade, utilizando a funcionalidade de prototipação. Crie desde interações entre telas até microinterações e animações.

Teste, experimente, explore diferentes transições e refine suas interfaces usando a ferramenta de prototipação no Figma, para criar experiências mais fluidas e realistas nas interfaces que está desenvolvendo.

Nos encontramos em breve. Até mais!

Sobre o curso Praticando Figma: prototipação

O curso Praticando Figma: prototipação possui 12 minutos de vídeos, em um total de 14 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Prototipando no Figma