Existem milhões de maneiras de fazer uma apresentação, mas o Figma é uma ferramenta subestimada para isso. O recurso de protótipo no Figma permite uma infinidade de opções de transição personalizáveis. Suas transições não apenas impressionarão seu público, mas você pode incorporar plugins para um entusiasmo extra e manter seu público envolvido, fazendo com que você se sinta confiante em suas habilidades.
Vamos mostrar como fazer uma apresentação matadora usando o Figma; basta seguir este guia.
1. Configure seu primeiro quadro de apresentação
Abrir Figma e clique Novo arquivo de projeto. Clique no Ferramenta Quadro (F) para desenhar seu quadro ou escolher um quadro predefinido à direita usando Apresentação > Diapositivo 16:9. Você pode criar um modelo mestre para economizar tempo.
Renomeie seu quadro clicando duas vezes no título azul no canto superior esquerdo. Defina uma cor de fundo; embora, você sempre pode alterá-lo mais tarde, destacando todos os quadros e alterando a cor de preenchimento.
2. Adicione o texto do título
Use o Ferramenta de texto (T) e escreva seu título. Use caixas de texto separadas para linhas separadas, com apenas uma ou duas palavras por linha. Defina suas preferências de texto no Texto cardápio à direita. Figma usa fontes do Google, então você pode querer saber os melhores pares de fontes do Google.
3. Adicionar uma imagem
Você pode use uma foto de banco de imagens ou tire sua própria foto relevante. Para adicionar uma imagem, desenhe um retângulo usando o Ferramenta retângulo (R). Sua imagem ficará nesta forma.
Clique no retângulo e vá para Encher e clique no quadrado colorido. Então clique Sólido > Imagem > Escolher imagem. Encontre sua imagem e clique Abrir. Passe o mouse sobre a imagem para revelar 4 círculos brancos. Clique e arraste um círculo para dentro para arredondar os cantos da imagem.
Organize suas camadas para que a imagem fique na parte de trás e o texto na camada superior. Você pode arrastar as camadas no painel de camadas ou usando Cmd/Ctr + [ para enviar uma camada de volta ou Cmd/Ctr + ] para trazer uma camada para a frente.
4. Crie a primeira transição
A primeira transição abrirá a imagem e permitirá que o texto do título deslize para dentro do quadro. Primeiro, duplique o primeiro quadro selecionando-o e pressionando Cmd/Ctr + D para duplicá-lo.
No quadro à esquerda, reduza a escala da imagem reduzindo os atributos de altura no H caixa para cerca de 150, deixando uma fenda horizontal da imagem. Centralize-o selecionando ambas as imagens nos quadros e clicando Oopção + V (Mac) ou Alt + V (Janelas).
Para concluir a transição da imagem, selecione a imagem à esquerda. Em seguida, altere o opacidade para 0% no menu à direita na caixa ao lado de Passar em Camada. Isso tornará a imagem invisível antes de fazer a transição e abrir.
Clique na primeira caixa de texto e mantenha pressionado Mudança. Comece a arrastar e, em seguida, mantenha pressionado Barra de espaço e continue arrastando o texto para fora do quadro. Parece que desaparece uma vez fora do quadro. Sem a adição da barra de espaço, essa transição não funcionará, mas se você segurar a barra de espaço antes de arrastar, ela apenas moverá seu quadro.
Faça isso novamente para sua segunda caixa de texto ou subsequentes, mas arraste-as um pouco mais para a esquerda para adicionar alguma variedade na transição. Com o texto ainda selecionado, reduza a opacidade da camada para 0% da mesma forma que você fez anteriormente para a imagem.
Para definir a transição, vá para Protótipo. Selecione o quadro à esquerda e clique no botão círculo azul que aparece no centro do lado direito do quadro. Arraste-o para que a linha vá para o segundo quadro.
Na lista suspensa que diz Instante, selecione Animação inteligente. Em seguida, troque a caixa com o cronômetro a 1000ms. Isso definirá sua transição para levar um segundo a partir do clique do mouse. As outras configurações devem ser definidas por padrão. Certifique-se de não renomear os títulos dos quadros após definir uma transição, caso contrário, os arquivos não serão conectados.
Clique no Toque botão para testar sua transição. Volte para Projeto para continuar seu design de apresentação.
5. Adicionar mais slides
Para fazer a transição do slide 1 para o slide 2, duplique o slide mais à direita (Cmd/Ctr + D). No novo quadro—slide 2—mova as caixas de texto para fora do quadro usando a técnica anterior (Mudança + Arrastar então Barra de espaço depois de começar a arrastar). Mova uma caixa de texto para a esquerda e outra para a direita do quadro. Defina a opacidade para 0% para ambos.
Para a imagem, reduza-a e mova-a ligeiramente para fora do centro e, em seguida, defina a opacidade para 0%. Isso, efetivamente, oferece uma tela em branco para o segundo slide. Você pode adicionar o conteúdo sobre os ativos invisíveis do slide anterior.
Adicione uma imagem grande ao centro do quadro. Para adicionar algumas decorações em cima de sua imagem, use um Plug-in Figma para GIFs ou baixe um GIF de adesivo do Giphy e arraste-o para cima da imagem. Selecione sua imagem principal e quaisquer GIFs e agrupe-os (Cmd/Ctr + G), isso garante que o Smart Animate funcione corretamente.
Selecione o grupo e copie-o (Cmd/Ctr + C). Em seguida, cole-o no quadro do slide 1 (Cmd/Ctr + V). Reduza-o e defina a opacidade para 0%. Em seguida, mova esta camada para trás (Cmd/Ctr + [). Isso garante uma transição suave para o próximo slide.
Vamos para Protótipo. Selecione o slide 2 e clique no círculo azul para arrastá-lo para o slide 3. O padrão do Figma no menu do protótipo é usar as configurações anteriores, portanto, todas devem ser definidas de acordo com a transição anterior. Volte para Projeto.
Duplique o último slide (Cmd/Ctr + D). Este slide usará a mesma imagem que o anterior, mas vamos dimensioná-lo para um lado do quadro. Mova a imagem para a esquerda do quadro arrastando-a enquanto segura Mudança. Passe o mouse sobre a borda direita da imagem até que as setas opostas apareçam, clique e arraste a borda direita da imagem para a esquerda até ficar satisfeito.
Vamos para Protótipo e vincule os dois quadros. Então volte para Projeto.
Adicione um título e um corpo de texto à direita da imagem dimensionada e agrupe-os. Copie o grupo de texto e cole-o no slide anterior. Clique e arraste o grupo de texto à direita do quadro como antes.
6. Adicionar uma maquete
Crie uma maquete; confira nosso guia sobre como criar maquetes usando plugins no Figma. Adicione um novo quadro e cole sua maquete nele. Redimensione a maquete para caber no quadro.
Copie a maquete e cole-a no quadro anterior. Redimensione-o para caber na parte da imagem, mova-o para a parte de trás das camadas e defina a opacidade para 0%. Vincule os quadros em Protótipo.
7. Adicionar rótulos
Duplique o quadro de maquete. Adicione um título e uma descrição para explicar partes do seu modelo. Agrupe o texto e nomeie-o. Então você pode criar um indicador de vidro fosco para seus marcadores e linhas. Agrupe uma linha com um círculo. Alinhe seu indicador com o que está descrevendo e adicione sua descrição ao lado dele. Vincule os quadros em Protótipo.
Duplique o quadro e adicione outro indicador de marcador com o que ele está descrevendo. Prototipe isso novamente. Duplique cada quadro por ponto de marcador, para que cada ponto de marcador faça a transição sozinho.
8. Finalize sua apresentação
Duplique o último slide. Escreva uma palavra final ou duas e centralize-a. Copie o texto e cole-o no slide anterior.
Reduza o texto segurando K enquanto o dimensiona—isso mantém seu texto formatado enquanto o reduz. Coloque seu texto em algum lugar próximo ao topo da maquete e envie a camada para trás, sob a imagem. Defina a opacidade para 0%. Volte para o slide final.
Mova todos os outros objetos para fora do quadro usando o método de arrastar. A transição deslizará tudo para os lados e para cima à medida que o texto se move para baixo e se expande. Vincular slides em Protótipo.
9. Compartilhe sua apresentação Figma
Você pode acessar sua apresentação em qualquer lugar em que possa fazer login na sua conta Figma ou compartilhar a URL com outras pessoas, para que possam assistir de qualquer lugar. Para apresentar sua apresentação final com suas transições, clique no Toque botão e apresentar no modo de tela cheia.
Você também pode salvar os quadros como PDFs, embora perca as transições animadas ao fazer isso.
Aumente o nível de suas apresentações com o Figma
Essa apresentação não é apenas minimalista, o que não sobrecarregará seu público, mas as transições são profissionais e limpas. Não é preciso ser um especialista em UI/UX para usar o Figma de uma maneira que beneficie suas apresentações, independentemente da sua função. Apresente com confiança e você será inundado com perguntas sobre como sua apresentação foi feita.