Figma: criando protótipos interativos

Planejamentos - Apresentação

Boas-vindas ao terceiro curso da formação de Figma da Alura. Meu nome é Mateus Vilain, sou Product Designer e professor na escola de UX & Design. Serei o instrutor nesta trajetória.

Audiodescrição: Mateus é uma pessoa de pele clara, com cabelo, sobrancelhas, olhos e barba castanho-escuros. O cabelo está bem curto, enquanto a barba está longa, cobrindo metade do pescoço. Ele usa óculos redondos e uma camisa preta. À sua frente, há um microfone sustentado por um braço articulado. Atrás, há uma estante com alguns livros, uma máquina de escrever e uma grade com crachás pendurados. O ambiente tem iluminação arroxeada.

O que vamos aprender?

Como mencionado no início, estamos no terceiro curso da formação de Figma. Já evoluímos nesta trajetória construindo um projeto chamado Fastask, uma plataforma de checklists de tarefas. Agora, vamos nos aprofundar no assunto de prototipagem interativa.

Considerando que já construímos nosso protótipo e o aprimoramos, vamos aprender a criar um modelo de interação com animações, navegações e até mesmo conceitos de condicionais, utilizando todos os recursos que o Figma oferece para criar um protótipo totalmente animado.

Para quem é este curso?

Apesar de ser bastante voltado para designers de interface, este curso não exclui a possibilidade de que pessoas de outras áreas e com diferentes conhecimentos participem.

Se você é uma pessoa programadora, Product Manager, ou até mesmo trabalha em outra área, mas está interessada em aprender mais sobre o mundo digital, Figma e construção de produtos digitais, você é mais do que bem-vinda para estudar conosco.

Pré-requisitos

Caso esteja começando agora, recomendamos que você confira os dois cursos anteriores da formação antes de iniciar.

Se precisar de ajuda, estamos aqui para auxiliar. Esperamos encontrar você no próximo vídeo, onde começaremos a estudar sobre prototipagem interativa no Figma.

Até lá!

Planejamentos - Funções de prototipagem

Nosso curso será inteiramente prático. No entanto, nosso projeto já evoluiu bastante desde o primeiro curso até agora, e a parte de prototipagem interativa dentro do Figma exige muita atenção. Por isso, vamos primeiro conhecer o recurso de Prototype do Figma.

Criaremos uma nova página no Figma para explorar esse recurso, separada do nosso projeto. Assim, poderemos conhecer esse recurso de forma prática e, posteriormente, aplicá-lo ao nosso projeto nas próximas aulas.

Navegação entre páginas

Vamos começar criando dois frames nessa página. Para isso, pressionamos a tecla "F" no teclado e arrastamos o mouse, depois duplicamos o frame.

Para iniciar a prototipagem, utilizamos a aba Prototype, localizado no painel direito superior do Figma. Ao clicar em Prototype, a visualização muda para as configurações de prototipagem.

Não vamos nos aprofundar nessas configurações agora, mas para começar a prototipar, basta clicar em qualquer lugar da tela. Não teremos mais as opções de design e estilo para editar ao selecionar a apa de prototipagem. Sendo assim, ao passar o cursor sobre um elemento, aparecem seletores de redimensionamento em suas laterais, com um símbolo de "+" (mais). Ao clicar neles e arrastar, aparece uma pequena flecha que indica a navegação entre páginas.

O recurso de prototipagem sempre irá de um ponto A para um ponto B.

Por exemplo, ao arrastar a flecha do fram 1 para o frame 2, criamos uma ligação entre os dois frames. Isso significa que, ao sair do frame 1, navegaremos para o frame 2.

Selecionando a aba de Design, vamos criar um retângulo em ambos os frames, posicionando-o na parte superior do frame 1 e na parte inferior do frame 2 para diferenciá-los.

Ao clicar novamente em Prototype e depois na seta que criamos entre os frames, uma janela de interação é aberta. Nela, podemos definir o trigger (gatilho) para a navegação.

Por padrão, o Figma utiliza o On click (ao clicar) como gatilho. Podemos escolher dentre várias ações o resultado desse gatilho, mas a mais comum é Navigate to (navegar para). Assim, ao clicar, navegaremos para o frame 2 - conforme definido no campo de Destino (Destination).

Animações de transição

Podemos também definir animações para a transição, como Instant, Dissolve ou Smart animate. Se escolhermos Dissolve, o Figma mostra um exemplo de como a animação ocorrerá. Podemos ajustar propriedades como o tipo de curva de animação e a duração dela, cuja medida é em milissegundos. Por exemplo, 1 segundo é igual a 1000 milissegundos.

Vamos testar a animação Move in, que simula um slide (para a esquerda como padrão). Selecionamos o frame 1 e clicamos no botão de play no canto superior direito da tela. O protótipo é carregado em uma nova aba, e ao clicar em qualquer parte do frame 1, navegamos para o frame 2. A página é trocada num movimento de deslize para a esquerda.

Se quisermos que o gatilho de clique funcione no retângulo específico que adicionamos no frame 1, podemos arrastar a flecha para fora para deletá-la e puxar uma flecha do retângulo do frame 1, conectando-a ao frame 2.

O Figma mantém as propriedades de navegação definidas anteriormente, facilitando o uso repetido de configurações de protótipo dinâmico, assim como as de design.

Navegação de retorno

Se quiséssemos retornar do frame 2 ao frame 1, podemos criar uma navegação do retângulo do frame 2 ao frame 1 com uma nova seta ligando-os.

Alternativamente, podemos ligar essa seta do retângulo do frame 2 ao ícone de retorno ("back") que surge no canto superior direito do frame, criando uma navegação de volta para a página anterior.

A mavegação de retorno não significa necessariamente voltar ao frame 1, mas sim ao último frame visualizado.

Essa é a estrutura básica da prototipagem: definimos um gatilho, a ação que ocorrerá, o destino e o tipo de animação.

No próximo vídeo, exploraremos a função do Smart Animate, um dos recursos mais utilizados na prototipagem do Figma.

Até lá!

Planejamentos - Smart animate

O Figma é uma ferramenta excelente para trabalhar com prototipagem, UI e produtos digitais. No entanto, não é uma ferramenta de animação. Se quisermos algo mais avançado, como movimentações e motions bem elaborados, recorreríamos a outra ferramenta, como o Adobe After Effects. Contudo, isso não significa que o Figma não possa oferecer um retorno interessante em animação e interação: o recurso Smart Animate (ou Animação Inteligente).

O que é o Smart Animate?

Esse recurso é a forma com que o Figma entende a movimentação de um elemento do ponto A ao ponto B, em posições diferentes.

Por exemplo, poodemos criar um frame 1 com um retângulo cinza posicionado a 57 pixels do topo e 134 pixels da esquerda. Ao duplicar esse frame e mover o retângulo para baixo na cópia, o Smart Animate pode conectar esses dois retângulos e criar uma animação de transição da posição desses retângulos na página. É possível visualizar a movimentação como se houvesse vários pequenos frames, cada um em um ponto diferente, deslizando para criar o movimento.

Para testar, no modo Prototype, selecionamos o retângulo 1 e conectamos ao próximo frame. Por padrão, a animação ocorre em 300 milissegundos. Deixamos o Smart Animate selecionado no campo de animação, e também podemos deixar a interação no modo on click (ao clicar), facilitando a interação. Mais adiante no curso, exploraremos outras formas de ação e interação.

Ao ativar o Smart Animate, o Figma analisa a posição do retângulo nos dois frames. Quando clicamos, ele sai do frame 1 para o frame 2, realizando a movimentação do retângulo ao invés de deslizar entre os dois frames.

Durante a animação, o Smart Animate não apenas muda a posição do elemento, mas também ajusta outras diferenças entre os elementos, como largura, altura e cor.

Por exemplo, ao estreitar, aumentar a altura e alterar a cor do segundo retângulo, o Smart Animate faz a transição completa, ajustando gradualmente até chegar ao estilo do retângulo do frame 2 ao longo do tempo de transição configurado. Podemos criar uma interação de retorno, refazendo todo o processo.

Como o Smart Animate funciona?

O Figma identifica os elementos pelas camadas dos frames. Se o retângulo for chamado de Rectangle 1 em ambos os frames, por exemplo, o Figma os reconhece como elementos análogos.

Se o nome for alterado, a identidade não será mais reconhecida, e a animação não funcionará corretamente, apenas dissolvendo o frame 1 para transicionar para o frame 2. Portanto, é importante manter o mesmo nome nas camadas conectadas para evitar problemas no projeto.

Este vídeo rápido sobre Smart Animate será importante para o futuro do projeto, e a dica dos nomes será crucial para evitar bugs.

Na próxima aula, começaremos a interagir com o projeto, colocando-o em movimento. Até lá!

Sobre o curso Figma: criando protótipos interativos

O curso Figma: criando protótipos interativos possui 109 minutos de vídeos, em um total de 36 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:

• Planejamentos
• Prototipagem intermediária
• Prototipagem avançada
• Interações e responsividade
• Apresentação do projeto