Figma: Interatividade e prototipação

Fundamentos da prototipação - Apresentação

Apresentando o curso e o instrutor

Boas-vindas ao terceiro curso da formação de Figma aqui da Alura. Caso ainda não nos conheça, é um prazer tê-lo aqui. Isso pode significar que não participou dos dois cursos anteriores da formação, mas em breve falaremos sobre eles.

Meu nome é Matheus Vilaen, sou Product Designer e especialista em Design System. Sou autor do livro Design System, além do layout, publicado pela Casa do Código.

Audiodescrição: Matheus é um homem de pele branca, com cabelo, sobrancelhas, olhos e barba castanho-escuros. Seu cabelo é bem curto, enquanto sua barba é longa, cobrindo praticamente todo o pescoço. Ele usa óculos de cor amadeirada e veste uma camisa bege. À sua frente, há um microfone sustentado por um braço articulado. Atrás dele, há uma estante com alguns livros e objetos antigos, como uma câmera. Atrás dessa estante, há uma grade com crachás de eventos pendurados, e ao seu lado está uma planta costela-de-adão.

Introduzindo o conteúdo do curso

Como mencionado, este é o terceiro curso da formação de Figma, o que significa que houve outros dois antes deste, e é importante conhecê-los. Caso ainda não tenha muita experiência com o Figma, esta formação é ideal, pois ensina desde o básico até o avançado sobre como trabalhar com essa ferramenta.

Neste terceiro curso, especificamente, vamos abordar uma parte mais avançada. Quando estamos finalizando nosso projeto, focaremos principalmente na área de prototipagem do Figma, explorando como realizar a navegação, interação e microinteração dos nossos elementos e componentes.

Explorando a prototipagem no Figma

O Figma, apesar de ser uma ferramenta excelente para criarmos nosso design estático e nossa interface estática, também é ideal para criarmos uma navegação que simula a utilização real em um celular ou computador, como se o site já estivesse desenvolvido. No entanto, isso ocorre dentro do Figma e ainda no modelo de design. É possível realizar essa simulação dentro da ferramenta, proporcionando uma fidelidade muito maior.

Vamos discutir os princípios de prototipagem dentro do Figma, quais são as ferramentas disponíveis e como fazer as conexões necessárias para criar um protótipo animado de fato. Avançaremos na criação de elementos dentro do nosso projeto, pois tudo isso envolve um projeto prático. Isso não apenas nos permite praticar, mas também adicionar ao nosso portfólio.

Criando animações e explorando funcionalidades avançadas

Vamos criar animações dentro do nosso projeto, que é o CodeConnect. E, claro, abordaremos a parte mais avançada da prototipagem, onde solicitaremos mais atenção, que é a prototipagem com variáveis e condicionais. No entanto, o foco do curso não é apenas prototipagem. Também discutiremos uma das funcionalidades mais interessantes do Figma, que é o Figma Make. Este é um tipo de arquivo do Figma para construir sites e produtos digitais com prompts simples. Assim como interagimos com o chat GPT, podemos interagir com a IA do Figma para criar um site completo. Com poucos ajustes no chat, é possível realizar todas essas edições, criando um site completo, responsivo e com todo o código disponível para download e publicação, se desejarmos.

Concluindo e oferecendo suporte

Esperamos que este curso seja de grande ajuda. Se precisar de algo, estamos à disposição. Nos vemos no próximo vídeo. Até lá!

Fundamentos da prototipação - Funções de prototipagem

Discutindo a função de prototipagem no Figma

Vamos começar discutindo a função de prototipagem no Figma. Inicialmente, criamos um novo arquivo, um rascunho, e dentro dele, criamos um frame de tamanho qualquer. Colocamos um retângulo no topo e outro, um pouco maior, na parte inferior.

Ao acessar a função de prototipagem, clicamos no menu "Prototype", localizado ao lado do menu de design. Quando não estamos focados em nenhum elemento, o Figma não exibe muitas configurações, apenas a parte do dispositivo, que será abordada mais adiante. No entanto, ao clicar dentro do frame, mais informações são exibidas, incluindo a seção "Interactions". Ao clicar no símbolo de mais, podemos começar a executar as funções de interação no Figma.

Criando navegação entre frames

Normalmente, não adicionamos interações clicando diretamente no frame. Em vez disso, utilizamos dois frames na página para criar uma navegação, que pode ser flutuante ou sobreposta a outra página. Selecionamos um frame e, ao usar o menu "Prototype", ao passar o cursor sobre o frame, aparece uma bolinha. Ao clicar no símbolo de mais e arrastar, uma seta é criada, indicando a transição do ponto A para o ponto B. É assim que o Figma realiza a prototipagem animada.

É importante ressaltar que o Figma não é uma ferramenta de animação. Embora possamos criar transições e animações interessantes, ele não possui as capacidades avançadas de um software como o After Effects da Adobe. No entanto, o Figma é eficaz para transições e animações em meios digitais, como sites, aplicativos e sistemas.

Explorando interações e triggers

Inicialmente, criamos uma seta que conecta o frame 1 ao frame 2. Ao mover o cursor para dentro do frame 2, ele é automaticamente selecionado, e um balão de interação é criado. Este balão contém informações importantes para a prototipagem animada no Figma.

O processo é quase como contar uma história: primeiro, selecionamos o trigger, que é o elemento acionável. Em seguida, indicamos a ação, o destino e, por fim, o tipo de animação desejada. No trigger, temos várias opções, desde nenhuma ação até cliques, arrastos e hover. O hover é a ação de passar o cursor sobre os elementos sem clicar, como quando passamos o cursor sobre itens do menu e eles ficam com fundo azul. O pressing ocorre ao pressionar o botão esquerdo do mouse, e o gamepad refere-se ao uso de atalhos no teclado ou controle de videogame.

Definindo ações e destinos

No nosso computador, podemos utilizar o controle e temos algumas ações de mouse, como quando o mouse entra, sai, faz uma ação de descer ou subir. É interessante que ele possui ícones que ajudam a ter uma boa referência.

Por último, mas não menos importante, temos o after delay (após o atraso), que ocorre depois de um determinado tempo, seja minuto, segundo ou milissegundo. Após selecionarmos o nosso trigger (gatilho), temos a ação, e o Figma também dispõe de uma série de ações para nós. Temos navegação, podemos voltar para a interface anterior, rolar para baixo ou para cima até uma seção específica, abrir um link, definir uma variável ou um modo de variável. Podemos criar uma condicional, que é uma das partes mais interessantes das interações do Figma, e falaremos disso neste curso.

Utilizando sobreposições e animações

Além disso, temos algumas ações de overlay (sobreposição), como open overlay (abrir sobreposição), swap (trocar sobreposição) e close (fechar sobreposição). Caso não esteja familiarizado com o termo overlay, ele se refere basicamente a um pop-up, modal ou drawer (gaveta). Quando clicamos em um elemento, a tela escurece e aparece uma janela sobreposta. Isso é o que chamamos de overlay no Figma. Não precisamos criar esse protótipo manualmente, podemos utilizar a interação, e falaremos disso também no curso.

Após definirmos o tipo de ação, podemos definir o destino. No entanto, raramente usamos esse campo, pois o destino é geralmente definido usando a seta. Se tivermos vários frames no projeto, podemos facilmente selecionar o frame 3, 4 ou 5, mas é mais prático apenas arrastar e soltar. Na prática, em um projeto real em uma empresa, haverá muitos frames, e procurar por eles manualmente seria ineficiente.

Explorando tipos de animação

Por último, temos o tipo de animação que ocorrerá. Temos a animação instantânea, que é basicamente um piscar de olhos, mas podemos fazer uma ação de dissolver, usar o smart animate (animação inteligente), que é muito interessante de trabalhar no Figma, e alguns tipos de animações mais de slide (deslizamento), como mover para dentro, para fora, puxar e fazer o efeito de slide in (deslizar para dentro) e slide out (deslizar para fora).

O interessante de cada uma dessas animações, exceto a instantânea, é que todas possuem uma ilustração de como o efeito ficará. Conforme clicamos, ele mostra algumas configurações adicionais, dependendo da animação escolhida, como a direção, o tipo de curva, e temos várias curvas de Bézier que podemos selecionar. Essas curvas definem a velocidade com que um bloco se move do ponto A para o ponto B e a duração da animação. Cada uma delas tem um tipo de interação, e podemos testar aqui embaixo.

Concluindo a introdução à prototipagem

Este é o recurso de prototipagem. Estamos apenas apresentando para que possamos nos familiarizar, pois há muitas funções e cada uma delas possui muitos recursos. Vamos passar por elas, e no próximo vídeo, entraremos em uma função bem interessante. Nos vemos lá! Valeu!

Fundamentos da prototipação - Smart animate

Introduzindo o conceito de animação no Figma

No vídeo anterior, discutimos que o Figma não é uma ferramenta de animação, ou seja, não é focada em produzir animações complexas. No entanto, ele pode nos auxiliar a criar efeitos semelhantes utilizando um recurso chamado Smart Animate (animação inteligente, em português).

Para ilustrar, temos um frame 1 com um retângulo rosa ou roxo, dependendo da perspectiva. Vamos duplicar esse frame para criar um frame 2 e posicioná-lo abaixo. Quando estabelecemos uma interação do frame 1 para o frame 2, configurando-a como navegação e animação instantânea, ao rodar o protótipo no Figma, ele abrirá uma nova aba. O tempo de carregamento dependerá da quantidade de informações no projeto.

Configurando interações e animações

Para configurar essa interação, utilizamos o seguinte código:

Trigger: On click
Action: Navigate to
Destination: Frame 2
Animation: Instant

Ao clicar, o elemento de clique abrange todo o frame, permitindo que, independentemente do local onde clicarmos, ocorra uma transição do ponto A para o ponto B, realizando uma navegação. Esse processo é simples de entender. O interessante é que, com o Smart Animate, podemos criar animações suaves que não seriam possíveis apenas com o design estático. Por exemplo, podemos fazer com que o retângulo se mova suavemente de sua posição inicial até a posição final no frame 2.

Explorando o Smart Animate

Para testar, alteramos a interação de animação instantânea para Smart Animate. Inicialmente, configuramos para dissolve e criamos uma animação de retorno. Nesse modo, a transição ocorre com uma transparência entre os frames. Ao aplicar o Smart Animate em ambas as interações, observamos que, ao clicar, a animação ocorre com um movimento de "bounce" para trás, devido à configuração de animação easy in back.

Animation: Smart animate
Curve: Ease in back
Duration: 300ms

Vamos ajustar ambas para easy out, que é o padrão do Figma, para observar melhor o efeito. Agora, a animação apresenta uma suavidade notável, criando uma transição mais fluida entre os frames.

Curve: Ease out

Compreendendo a inteligência do Smart Animate

Não temos protótipos intermediários, como, por exemplo, o retângulo aqui no meio, mais acima ou mais abaixo. Não precisamos construir isso. O Smart Animate possui uma inteligência própria, onde analisa a posição do elemento no frame inicial, a posição no frame final e os vê como um único elemento, conseguindo assim fazer o cálculo necessário.

Se temos um retângulo no X71 e Y49 no frame 1, mas no frame 2 ele está no X71, mantendo a posição X, mas o Y mudou para 388, o Smart Animate fará essa mudança de posição. Isso não funciona apenas para a posição; podemos diminuir a altura ou a largura do retângulo, e ele fará exatamente essa modificação, ajustando tudo conforme necessário.

Explorando mudanças de cor e duração

Se houver um elemento no projeto que não muda de posição, permanecendo estável, podemos até mesmo mudar a cor. Por exemplo, ao deixá-lo rosado, ele fará uma transição de cor suave. Podemos aumentar a duração para 1 segundo. É interessante que o Figma trabalha com milissegundos, mas se colocarmos 1s, ele automaticamente converte para 1000ms. Assim, em 1 segundo, vemos essa transição acontecendo.

Duration: 1000ms

Identificando elementos através do nome da camada

Mas como o Figma identifica que esses dois retângulos são o mesmo, considerando que agora estão em frames diferentes, com cores e tamanhos diferentes, além da posição? Tudo isso é feito pelo nome da camada. Note que nos dois frames, os retângulos têm o mesmo nome. Se, no segundo frame, renomearmos de Rectangle 1 para Rectangle Pink, ao fazer a transição, o Figma não os identifica mais como o mesmo elemento. Ele apenas faz um dissolve, saindo de um e indo para o outro, pois não está mais associando um retângulo ao outro. Essa identidade é vinculada pelo nome da camada. Podemos renomear de volta para Rectangle 1, e ele volta a fazer a associação.

Rectangle Pink
Rectangle 1

Concluindo a importância do Smart Animate

O Smart Animate é o recurso que mais utilizaremos ao longo das aulas, por isso é importante conhecer essa funcionalidade e como fazer a ligação de um elemento no frame 1 com um elemento no frame 2, para que o Figma entenda que são o mesmo e consiga fazer uma transição suave. Certo? Fácil de aprender. Nos vemos no próximo vídeo.

Sobre o curso Figma: Interatividade e prototipação

O curso Figma: Interatividade e prototipação possui 120 minutos de vídeos, em um total de 37 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:

• Fundamentos da prototipação
• Animando componentes
• Prototipagem com condicionais
• Figma Make
• Apresentação do projeto