Figma: prototipagem interativa e animações

Planejamentos - Apresentação

Quer aprender a prototipar qualquer coisa dentro do Figma, além de utilizar funções de interação, gestos e criar animações incríveis em produtos ainda não codificados? Este é o curso certo para você! Estamos no terceiro curso da excelente formação de Figma da Alura.

Caso ainda não me conheça, eu sou Mateus Villain, instrutor na Escola de UX & Design da Alura. Vamos juntos nessa trajetória espetacular, onde pretendemos ensinar tudo de ponta a ponta para torná-lo um especialista na utilização da ferramenta Figma.

Audiodescrição: Mateus se descreve como um homem de pele branca, com cabelo, sobrancelhas, olhos e barba castanho-escuro. O cabelo está bem curto e a barba cobre todo o seu pescoço. Ele usa óculos redondos dourados e um moletom roxo. À frente, há um microfone preso a um braço articulado. Atrás dele, há uma estante e uma grade com alguns quadros pendurados e objetos antigos como um Super Nintendo, uma máquina de escrever e jogos de videogame.

O que vamos aprender?

Ao longo da formação de Figma, nós estudamos sobre as ferramentas essenciais, como criar componentes, automatizar, criar layouts responsivos e utilizamos praticamente 90% dos recursos do Figma. No entanto, quando produzimos produtos digitais, precisamos prepará-los para a vida real, para apresentá-los às pessoas e deixá-los o mais próximo possível da realidade.

Neste curso, aprenderemos sobre as incríveis funções de prototipagem do Figma. Embora não seja uma ferramenta no estilo After Effects focada em animação, ele possui recursos nativos para a criação de interações impressionantes dentro do produto.

Ao longo das aulas deste curso, vamos trabalhar no projeto Fastask, que tem evoluído ao longo da formação. Dessa vez, daremos os toques finais para torná-lo interativo, totalmente prototipável e pronto para ser apresentado.

Além disso, vamos falar sobre os processos de handoff, usando recursos nativos do Figma para obter uma noção prática de como desenvolver o produto.

Para quem é o curso?

Mesmo que você não seja uma pessoa designer, este curso também é para você! Mesmo que trabalhe em outra área, como desenvolvimento, tecnologia, marketing, como Product Owner ou Product Manager, ou em qualquer outra área que não esteja diretamente relacionada a produtos, te damos as boas-vindas para estudar com a gente.

Este curso não é feito apenas para pessoas designers, mas para qualquer pessoa que queira aprender a utilizar a ferramenta Figma e ao menos conhecer os recursos.

Lembre-se que qualquer dúvida pode ser sanada entrando em contato conosco pelos canais do Discord ou do fórum.

Esperamos você no próximo vídeo, onde vamos introduzir melhor o que vamos estudar ao longo das aulas. Nos encontramos lá!

Planejamentos - Visão geral

Ficamos felizes em saber que você assistiu ao vídeo de introdução e se interessou em estudar este curso conosco! Antes de iniciarmos o conteúdo prático no próximo vídeo, reservamos um momento para explicar o que vamos estudar, para alinhar nossas expectativas.

Visão geral

Nesta formação, nosso objetivo principal é tornar você especialista em Figma. Desta maneira, vamos te fornecer todo o conhecimento, mostrar todos os recursos da ferramenta, inclusive aqueles que você usará esporadicamente. Ao longo dos cursos anteriores, mostramos e ensinamos a usar tudo. Neste curso não será diferente.

Na primeira aula, ainda não discutiremos a função de prototipação, mas falaremos sobre uma função que você já deve conhecer e pela qual passamos em cursos anteriores: o FigJam. Trata-se de um recurso nativo do Figma que funciona como uma área de planejamento.

Faremos apenas essa descrição sobre o FigJam e deixaremos para você conhecê-lo melhor no próximo vídeo, onde faremos uma introdução mais aprofundada, já com algumas práticas.

A partir da aula 2, estudaremos de fato prototipação e interação no Figma. Vamos entender todos os recursos para fazer animações, interações, como conectar páginas e fluxos para que se pareçam com um produto real, para podermos apresentá-los às pessoas.

Aprenderemos como clicar em um botão para mudar de página, ou clicar em alguma coisa para fazer uma interação acontecer, tudo isso dentro do Figma, usando os recursos de "On click", "On drag", "While hovering".

Caso você não tenha explorado esses recursos, recomendamos fazer isso. Como já foi dito em cursos anteriores, explore um pouco! Não tem problema se você ainda não sabe usar. Não há erros que você pode cometer agora; estamos sempre aprendendo.

Vamos estudar tudo isso, inclusive sobre funções condicionais, uma novidade mais recente no Figma. Se você é uma pessoa desenvolvedora, vai se familiarizar bastante, porque usaremos muita lógica de programação com IFs e ELSEs, comandos comuns nas linguagens de programação modernas.

Após prototipar várias coisas em nosso projeto, deixando bem animados nossos fluxos e componentes criados no curso anterior, vamos falar um pouco sobre processos de handoff.

O Figma tem uma maneira incrível de mostrar para outras pessoas como nosso projeto deve ser desenvolvido corretamente, utilizando o recurso de Dev Mode no Figma, que será estudado na aula 4, nossa última aula do curso.

Vamos mostrar como esse recurso funciona, como ele pode ser ativado e como pessoas programadoras podem se beneficiar desse recurso para olhar seu projeto, evitando que façam alterações indevidas. Elas terão uma permissão específica, que já abordamos um pouco no curso anterior, quando falamos sobre apresentações, compartilhamentos e colaborações no Figma.

Porém, esse recurso será muito específico para pessoas programadoras, pois permitirá que elas tenham uma especificação geral de tudo o que fizemos de design de interface ao longo da construção do nosso projeto. Tudo isso com base no projeto Fastask, que começamos a criar no primeiro curso da formação, composta por três cursos.

Vamos enfatizar isso para quem não sabia do esquema de formações na Alura. Temos uma trilha composta por três cursos. No primeiro, entramos no Figma pela primeira vez e começamos a aprender desde o zero, evoluindo ao longo do primeiro para o segundo curso.

Neste terceiro, nem vamos mencionar as ferramentas essenciais, como usar formas e textos, porque já estudamos isso e já sabemos como trabalhar. Se você ainda não sabe, recomendamos que faça uma pausa neste curso e estude o conteúdo anterior. Certamente você vai aprender e se divertir. Depois retorne aqui, pois o conteúdo é tão interessante quanto os outros!

O produto que trabalharemos ao longo da formação é a Fastask, uma plataforma de to-do's e checklists onde podemos colocar nossas tarefas domésticas, do trabalho, nossa lista de compras do mercado, tudo prototipado e preparado como se fôssemos realmente passar para uma pessoa programadora desenvolver no final de todo processo.

Conclusão

Esperamos que você aproveite muito o conteúdo. Vamos relembrar novamente o que já dissemos na introdução: se precisar de ajuda, pode contar conosco, seja no Discord ou no fórum.

Até o próximo vídeo, onde conheceremos o FigJam!

Planejamentos - Ferramentas essenciais do FigJam

Neste vídeo, vamos tratar de um aspecto do Figma que já mencionamos nos cursos anteriores, mas não chegamos a clicar e nem a mencionar especificamente: o FigJam.

Utilizando o FigJam

A ideia era abordá-lo em um momento próprio, porque o Figma possui vários arquivos para trabalhar com design. Até então, sempre que fomos construir um arquivo, clicamos no botão azul do canto superior direito, chamado "+ Design file" ("Arquivo de design"). No entanto, há também tem um botão roxo, chamado "+ FigJam board" ("Quadro do FigJam").

Se criarmos uma nova aba, também são exibidos dois cartões que dizem:

• "New design file" ("Novo arquivo de design"), com o qual trabalhamos até agora, que trabalha com design e prototipagem;
• E ao lado, em roxo, New FigJam file" ("Novo arquivo do FigJam"), que trabalha com whiteboard (quadro em branco) e diagrama.

Vamos clicar para criar um novo arquivo do FigJam. Mas o que é exatamente o FigJam? Para quem não conhece ou nunca ouviu falar, tentaremos fazer dois paralelos.

O primeiro é bem simples para você entender diretamente. O FigJam é muito semelhante ao Miro, mas faz parte do Figma. Se você não conhece o Miro e nunca usou, temos outra definição.

O FigJam é, basicamente, como um quadro branco onde você pode colocar notas adesivas, escrever textos, adicionar imagens e inserir informações.

Agora, imagine esse quadro branco digital, infinito, onde várias pessoas podem interagir ao mesmo tempo, independentemente de onde estejam. Isso é o FigJam, uma parte do Figma que permite trabalhar com planejamentos.

Se de um lado temos o arquivo de design, para construir a interface do nosso produto e seu protótipo de forma fiel, do outro lado, temos uma área para planejamento, definição, mapeamento de tudo que pesquisamos e tudo isso dentro de uma única conta, com acesso fácil. Basta mudar de aba e já estamos dentro do produto com o qual trabalhamos.

Com o FigJam, não há necessidade de usar recursos externos, como o Miro, por exemplo. Utilizar o arquivo de design do Figma e o arquivo FigJam também do Figma já unifica tudo.

Como usar o FigJam?

Usar o FigJam é extremamente simples. Neste vídeo, vamos falar sobre os recursos fundamentais do FigJam, semelhante ao que fizemos no primeiro curso, abordando os recursos fundamentais do Figma. Na parte inferior, estão todas as ferramentas com as quais ele permite trabalhar, e algumas delas são bastante simples.

Seta de seleção e mão

Por exemplo, duas ferramentas que você provavelmente já reconhece: a seta de seleção de elementos e a mão para se movimentar ao longo do projeto. Também podemos utilizar a tecla de atalho ou o botão de rolagem do mouse para se movimentar.

Lápis

Ao lado, temos um lápis que, ao ser clicado, exibe uma série de opções para trabalhar. Diferente do lápis do Figma, no FigJam, ele tem algumas características a mais.

Há uma pré-definição de cores padrão, o que é fundamental, e um seletor de cores para escolher uma cor específica. Conseguimos controlar também a intensidade do traço. Pessoas que têm mesa digitalizadora podem fazer desenhos, escrever, elaborar coisas com mais precisão.

Esse aplicativo possui também uma função de marca-texto, pois é possível colar documentos dentro do FigJam, inserir textos e se quisermos, fazer uma marcação.

Além disso, há a opção de um tipo de borracha que serve como corretivo para simplesmente ocultar algumas informações no projeto. Existe também uma borracha que serve para apagar os elementos do FigJam. É extremamente simples de ser utilizado.

Formas geométricas

Ao lado, temos formas geométricas; se clicarmos na seta, conseguimos visualizar todas as formas disponíveis. Há várias opções, incluindo mais formas do que no arquivo de design, e muitas delas não são formas geométricas; algumas são ícones ou coisas mais abstratas.

A vantagem deste modelo é que, no FigJam, se você é uma pessoa que trabalha com fluxogramas, pode usar muito bem esse recurso.

Uma vez selecionado um elemento, podemos clicar em qualquer canto dele que é automaticamente criada uma seta para inserir uma informação nova e estabelecer uma conexão entre um elemento e outro. Além disso, podemos arrastar e vincular a outra peça que já foi inserida.

Nesse caso, podemos personalizar a cor, a transparência, a opacidade, as bordas, e também inserir um texto dentro da forma.

Post-its

Ao lado das formas geométricas, extremamente simples de trabalhar, temos uma ferramenta ainda mais simples e talvez a mais útil, que as pessoas mais utilizam: o post-it, uma nota adesiva onde podemos simplesmente escrever alguma informação para o planejamento.

A nota adesiva se tornou convencional. Temos post-its em casa, onde colamos no monitor, em quadros, em cartolinas quando fazemos planejamentos em grupo presencialmente, e onde fazemos todos os tipos de anotações. Digitalmente, é a mesma coisa.

No post-it, além de todas as opções de texto, inclusive listagem e link, conseguimos controlar a cor, com uma lista pequena de cores que podemos colocar dentro das notas adesivas, e também inserir uma assinatura do autor, se desejado.

Textos

Após a ferramenta do meio, que deixaremos para falar no próximo vídeo, temos mais algumas ferramentas básicas. A primeira ferramenta é a de texto, cujo funcionamento é igual ao que acontece em todos os outros elementos, até mesmo no arquivo de design.

Podemos personalizar o tamanho de texto, a fonte, a cor, negrito, se queremos que esteja riscado. É extremamente simples de trabalhar!

Setas

Temos a seta que pode fazer ligações aleatoriamente no quadro ou também fazer ligações diretas nos elementos, como já foi mostrado anteriormente.

Carimbos

O FigJam tem um recurso de carimbos, onde podemos pegar, por exemplo, algum símbolo, ícone, grafismo e clicar sobre o quadro para definir como se fosse uma reação em algum elemento.

Por exemplo: temos um post-it em cor vermelha que contém alguma informação. Se gostamos do conteúdo, podemos usar o carimbo de like; se amamos a ideia, podemos colocar o carimbo de coração, e assim por diante.

Há ainda outra forma de reação, usando alguns emojis que são exibidos com o gesto do cursor. Podemos selecionar, por exemplo, o emoji de fogo; ele aparecerá ao lado do cursor. Ao clicar e manter o botão esquerdo do mouse pressionado, o efeito acompanha o movimento do cursor. É simplesmente uma interação para trabalharmos com as pessoas.

Falando em interações, temos uma funcionalidade interessante. Ao mover o cursor rapidamente de um lado para o outro, você verá que aparece uma mão. Quando outra pessoa também tem a mão aberta, e os dois cursores se encontram, há uma animação de "high-five". É apenas uma brincadeira para descontrair no FigJam!

Seções

À direita da ferramenta de carimbos, temos um recurso que já conhecemos bastante e usamos no arquivo de design: a seção. Essa seção, que foi inicialmente implementada no FigJam e depois incorporada ao Figma, serve para organizar e agrupar todas as nossas informações.

Podemos definir um título para cada seção.

Tabelas

Por último, temos um recurso fundamental e fácil de utilizar: a tabela. Podemos criar uma tabela totalmente personalizada, adicionar quantas linhas e colunas desejarmos, definir as informações dentro dela. Se quisermos adicionar mais colunas ou mais linhas, ou controlar o tamanho da nossa tabela de maneira completamente livre, isso é perfeitamente possível.

Com todas essas ferramentas, podemos fazer uma infinidade de coisas no FigJam!

Outras funcionalidades

Além disso, também temos algumas outras funcionalidades de compartilhamento, de zoom, de permitir o acesso de outras pessoas ao projeto. Também temos um sistema de comentários, além de uma funcionalidade bem interessante do FigJam: um cronômetro.

Suponha que estamos em equipe realizando uma dinâmica, como Crazy 8, por exemplo, que tem a duração de 8 minutos, onde todas as pessoas desenvolvedoras criam interfaces para o projeto. Podemos definir um cronômetro de 8 minutos e escolher uma música de fundo.

Quando o cronômetro começa a rodar, a música também começa a tocar, e todas as pessoas podem começar a trabalhar. O cronômetro fica ativo para todas as pessoas. Quando o tempo acaba, é emitido um alerta.

Conclusão

Ao lado do cronômetro, também temos o painel "Templates", com algumas outras informações que abordaremos no próximo vídeo. São recursos bem interessantes e mais avançados no FigJam.

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

Sobre o curso Figma: prototipagem interativa e animações

O curso Figma: prototipagem interativa e animações possui 135 minutos de vídeos, em um total de 41 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
• Fundamentos da prototipagem
• Prototipagem intermediária
• Prototipagem avançada
• Apresentação de projeto