Masterclass de movimento no Figma: crie animações profissionais de IU

1. Boas-vindas ao curso e ao que você vai construir.
: Olá e bem-vindo à Figma motion Master Class. Se você já projetou interfaces bonitas e gostaria de poder dar vida a elas com animações e interações suaves, então esta aula é para você poder dar vida a elas com animações e interações suaves, então esta aula é para Oi. Meu nome é Ahmed Al Hassan e sou designer de UIUX com mais de cinco anos de experiência no design de produtos digitais, interfaces interativas E ao longo da minha carreira, aprendi uma coisa muito importante interfaces excelentes não são apenas visualmente atraentes Eles parecem intuitivos e interativos por meio de um design de movimento cuidadoso E é exatamente isso que vou te mostrar neste curso. Primeiro, começaremos entendendo o que o Figma motion realmente é e como ele pode se encaixar em um processo de design ou fluxo de trabalho moderno, envolvendo a criação de arquivos, preparação de camadas , organização e configuração para que possamos criar nossas animações para eles que possamos criar nossas animações para A partir daí, começaremos criando nossas animações passo a passo, incluindo animações relacionadas ao tamanho, posição e ao tamanho, posição Vai se relacionar com o tempo, com a flexibilização. Também discutiremos os erros mais comuns quando se trata de design de movimento e como os menores ajustes podem desempenhar um papel na melhoria drástica dessas animações e em melhoria drástica dessas animações torná-las mais polidas Por fim, você aprenderá a exportar seus arquivos e vídeos em diferentes formatos, como presentes, MP fours, web e SVG mais importante é que você possa usá-los em seu portfólio para apresentações, desenvolvimento ou qualquer outra coisa para a qual você queira usá-los Ao final deste curso, você aprenderá a criar animações de interface de usuário com aparência profissional que tragam personalidade, clareza e aprimoramento aos seus designs. Vamos começar. 2. O que é o movimento do Figma?: Olá, bem-vindo à primeira aula de movimento Figma. Então, vou dar uma breve ideia do que é o movimento figma por meio desse movimento feito muito rapidamente, ok? Então, vamos ver como é esse design de movimento e pronto. Só vai girar um pouco, mas isso é Figma Motion E o que você acabou de ver, se é que está familiarizado com a própria Figma provavelmente é inovador Esse é um recurso extremamente novo se você estiver ouvindo isso por volta de 2026, e isso é basicamente um complemento Você provavelmente já sabe disso, mas caso não saiba, Figma é um programa de design para ser usado de forma muito geral, maioria das vezes é usado para fins de design de UIUX É usado para web design, design de aplicativos, criação de qualquer tipo de tela, qualquer tipo de protótipo criação de qualquer tipo de tela, qualquer tipo de de wireframe Mas nos últimos anos, ele foi expandido para incluir também muitas coisas diferentes. Criando gráficos, designs gráficos, pôsteres, bem como criando apresentações agora também são usados para mídias sociais e muito mais Agora, com essa nova atualização, você pode criar esses gráficos, e isso não é apenas um truque Está bem? Deixa eu te dizer isso. Figma motion é um recurso totalmente novo. Ele ainda está se recuperando, eu diria que ainda está em um estágio inicial, mas será expandido, será trabalhado e ampliado para se tornar um recurso mais abrangente. Então, vamos voltar um pouco e discutir o que ele faz. Portanto, caso você não esteja familiarizado com o que é design de movimento, o que acabamos de ver aqui é que ele basicamente fornece uma linha do tempo e permite criar animações diferentes Você não está trabalhando apenas com recursos visuais como esses elementos de texto, mas esses elementos de texto em si podem ser animados ao longo do tempo Isso não é algo completamente novo, devo dizer. Isso é algo que testemunhamos com outros programas como o Photoshop Também tem um cronograma. Não é exatamente um software de edição de vídeo. É mais um software de edição de fotos. É chamado de Photoshop, mas tem esse recurso incorporado Isso é algo que a Adobe faz muito. Ele incorpora muitos recursos em seus programas. Você pode fazer três D em quase todos os seus programas, você pode fazer cerca de três modelagens D. Você pode fazer algumas animações e outros enfeites, há muita profundidade Mas até agora, o FiGMA tem tentado mantê-lo mínimo, e agora a criação desse recurso realmente abriu muitas portas Então, neste curso, falaremos sobre como podemos aproveitar esse novo recurso para criar animações bonitas e suaves Essas animações são coisas que podemos exportar como vídeos. Podemos exportá-los como presentes. Há muitas coisas que discutiremos com o tempo, e vou te ensinar como você pode integrar isso ao seu só para que você saiba que isso é completamente novo. Então, as pessoas estão apenas começando a aprender sobre isso, e é por isso que você está absolutamente obtendo uma vantagem. Você está começando ao ouvir este curso, está aprendendo tudo e, com isso, terá a vantagem, como eu disse, de ser um designer que conhece os recursos mais recentes e também pode integrá-los ao design do UIO Hix Sem mais delongas, vamos começar. 3. Como o movimento se encaixa no fluxo de trabalho do design.: Agora, antes de começarmos e antes mostrar a interface desse novo recurso, Figma Motion, gostaria de discutir como você pode usar esse recurso e como integrá-lo ao seu fluxo de trabalho existente Então, vou seguir em frente e assumir que você já é um usuário ávido do Figma Se você o usa para seu design gráfico, se você o usa para web design, design de aplicativos, isso realmente não importa. Mas você está lá, sabe como funciona, sabe como funciona. Com essas informações, eu assumiria que você sabe que, quando está no Figma, é capaz de criar diferentes tipos de documentos Portanto, o Figma Motion não é um novo tipo de documento. Honestamente, foi o que pensei quando eles lançaram o recurso pela primeira vez , quando o anunciaram pela primeira vez Achei que teria uma interface completamente diferente e seria completamente separada das ferramentas de design que conhecemos. Caso você não os conheça, você tem o arquivo de design aqui, apenas um arquivo de design normal. Você tem um arquivo FIG Jam onde pode fazer o Jam com seus colegas, pode debater ideias diferentes, de forma livre, sem se estressar demais, e também pode criar slides, apresentações, basicamente a alternativa para o PowerPoint Você tem o Figma make, que é seu próprio tipo de IA, o que também é muito interessante Figma buzz, que é para mídias sociais, site Figma, eu não vou te entediar Basicamente, a maneira como você acessará isso, principalmente a partir de agora, será por meio do design. Quando você abre um documento de design, como eu já fiz aqui, você naturalmente estará no modo de design. Espero que você também esteja familiarizado com isso. Mas caso você não esteja tão cedo, deve ter sido há alguns anos eles basicamente introduziram esses novos modos. Então, em vez de ter apenas esse conjunto de ferramentas, modo completamente diferente com ferramentas diferentes. E você também tinha o modo Dev. Temos isso há muito tempo, para ser honesto. Você tem esses recursos, esses modos diferentes, e agora o Figma Motion é apenas mais um desses modos E tenha em mente que isso ainda está em sua forma beta. Então, vamos ver muitos bugs, estamos vendo muitos problemas. Mas agora vamos voltar ao assunto. É assim que você o acessa, mas como você o usa? Ou para que você o usaria? Agora, veremos, como eu disse, no curso, mostrarei diferentes exemplos ou criações diferentes do que poderíamos fazer com ele Mas, basicamente, o que costumávamos fazer antes com componentes e animações de componentes agora será muito mais simplificado com essa nova criação Então, em vez de ter que criar um componente e usar cada variante do componente como quadros-chave, poderemos mover as coisas mais flexibilidade e haverá diferentes usos para isso Por exemplo, se você quiser criar uma animação de notificação, você quer que ela apareça como se alguém estivesse em uma tela e repente, recebesse uma notificação. Você quer mostrar isso. Talvez você queira compartilhar seu protótipo, não da forma interativa normal através do Figma, mas como um vídeo Você quer mostrá-lo exatamente do jeito que você quer no fluxo que você quer seguir. Isso, algo que eu tive pessoalmente senti a necessidade de usar pessoalmente com meus próprios clientes é que às vezes eles não conseguem navegar nele. Clientes mais antigos, pessoas que não são tão técnicas, não conseguem realmente usar o Figma Eles não sabem como usá-lo. Eles ficam sobrecarregados Simplesmente orientá-los sobre o caso de uso ou o fluxo do usuário, transformando-o em um vídeo, é uma maneira de fazer isso. Mas, além disso, criar essas animações diferentes e únicas, não era impossível Costumávamos fazer isso, mas agora é muito mais fácil fazer isso. Essa é uma maneira de fazer isso. Você pode fazer notificações. Você pode fazer animações diferentes em segundo plano, assim como alguém está testando um protótipo Você poderia fazer muitas coisas diferentes. Você pode até fazer algo parecido um vídeo como se fosse um vídeo real, mas na verdade é apenas uma animação que você criou no Figma Há muitos exemplos diferentes, mas a boa notícia é que você não precisa ir muito longe, você precisa se esforçar para integrá-lo ao seu fluxo de trabalho porque ele já está aqui. Está disponível, está no seu computador, está no seu arquivo Figma Você não precisa criar outro arquivo para ele. Você só precisa ir para esse modo. Então, aqui está um exemplo que eu gostaria de mostrar a vocês de algo que fiz assim que vi o anúncio sobre esse recurso assim que ele foi lançado, e lamento que tenha sido repetido demais, mas é basicamente uma ideia muito simples Parece simples, limpo e macio, e isso é algo que teria sido muito difícil de fazer com o Figma normal No momento, com esse recurso mais avançado, podemos criar essas animações de aparência suave sem precisar bagunçar nossos documentos de design Tem muita coisa acontecendo aqui. Temos animação de posição, tamanho, escala, opacidade e outros E isso é o que é legal nisso. Você pode fazer muitas coisas complexas sem precisar se preocupar com a tecnicidade delas Você pode simplesmente tratá-lo como um programa normal de edição de vídeo. Como eu disse, para finalizar, você não precisa se esforçar para integrar esse recurso ao seu fluxo de trabalho. Já está lá. Está exatamente onde você quer que esteja, onde você sabe como encontrá-lo, e não é tão complicado. Mas você ainda precisa aprender, e é exatamente por isso que você está aqui assistindo a este curso. Vamos começar. 4. Como navegar pela interface e configurar o arquivo do projeto.
: Tudo bem Bem vindo de volta. Nesta lição, vamos nos familiarizar com a interface e configurar um arquivo de projeto Agora, como mencionei nas lições anteriores, isso não é algo pelo qual você vai se esforçar, mas sim algo que você já sabe onde encontrar. O que isso significa? Você vai seguir em frente, abrir o Figma e ir para Design Basta clicar em Design e você abrirá um arquivo de projeto de design clássico normal. Então, assim, temos um rascunho gratuito. Você não precisa de uma assinatura profissional ou algo parecido para acessar esse recurso, pelo menos por enquanto, ok? Então você já pode acessá-lo, mas tenho certeza de que eles adicionarão algumas coisas que serão bloqueadas para assinaturas profissionais, mas esse é outro tópico para outro dia Então, agora que você está aqui, agora você pode me dizer onde está Figma Motion Está aqui mesmo. Quando você vai até a barra de ferramentas lá embaixo, você vai navegar Você não vai desenhar, não vai para o modo Dev, você vai para o Figma Motion Como eu disse antes, ainda está na versão beta, então ainda está chegando lá. existem poucas maneiras Para ser honesto, existem poucas maneiras de se confundir sobre isso Antes de começarmos, você precisa saber que precisa de algo em que trabalhar. Você precisa de um arquivo, precisa de um item, precisa de uma camada para começar. Vou continuar e adicionar uma tela do iPhone 16, desse jeito, você vê que as coisas começaram a funcionar só para mostrar a diferença. Quando voltei e fui em frente, estava vazio aqui e agora ficou cheio, o que indica que, tudo bem, algo está acontecendo, algo está começando. Vamos continuar e criar um item. Pode ser um texto, pode ser um objeto. Vou criar um quadrado aqui e vou dar uma cor a ele. Vermelho. E então, obtendo a ferramenta de texto, vou escrever Hello world. Tudo bem Então, agora que temos isso, vamos centralizá-lo. Tudo bem Perfeito. Agora temos esses itens, mas eles não estão aparecendo aqui, certo? Isso é uma pena. Bem, o fato é que, para facilitar as coisas, eles não mostram tudo aqui. Isso é apenas para coisas que realmente têm movimento, têm animação. Essa área é reservada somente para camadas de objetos que já tenham animações dentro delas. Caso contrário, você verá as camadas aqui neste painel exatamente como você está usando. Então, para que qualquer coisa apareça aqui, temos que ir para a seção do painel da área de animações, você quiser chamá-la, que é nova, e você adicionará uma animação E, claro, você só consegue ver isso quando está no Figma Motion Portanto, verifique se você está no modo de movimento. Agora que adicionamos isso, não vou entrar na animação ainda, mas ela já nos deu uma animação de posição, ok? É como uma animação de slide. E agora, de repente, temos algum item. Vamos nos familiarizar com esse painel com essa interface, ok? Temos um item aqui que diz: T, é um ícone para texto, e temos Hello World. Assim, podemos remover essa animação ou remover o texto, tudo de uma vez, e você pode ver que diz posição Então, isso mostra as animações que esse texto está tendo Agora, e se decidirmos adicionar outro tipo de animação? Então, agora ele foi em frente e adicionou uma animação em escala. Então, isso fez com que ficasse menor. Agora você pode ver em Hello World, que temos duas animações diferentes inseridas lá Podemos fechá-los ou podemos abri-los e mostrá-los. Aqui você tem posição, escala e cada uma tem sua própria, não tenho certeza de como você chamaria isso exatamente, mas ela tem seu próprio bloco, digamos, com o qual você pode brincar. Aí está o bloqueio geral. Essa área, esse objeto, ele move tudo com ele. Se fizermos as animações muito curtas, tanto em posição quanto em escala , elas serão alteradas Mas se você mudar a posição de uma dessas, isso não mudará as outras. Dessa forma, a posição mudará e, em seguida, o tamanho ainda mudará. A animação em escala acontecerá ao mesmo tempo e vice-versa. Podemos diminuí-lo e continuar mudando de local. Isso é algo legal nisso. Você não tem uma interface muito complexa. É um pouco simplificado e , depois de terminar com todas essas animações, basta removê-la e ver esse único slot Aqui temos nossa linha do tempo, aqui mesmo, essa coisa toda com a qual estávamos brincando, e ela mostra a hora Aqui você tem, eu acredito, 200 milissegundos, 400 milissegundos, 600, 800 e 1.000 Basicamente, você também pode diminuir o zoom usando esse recurso aqui, zoom da linha do tempo, você pode simplesmente diminuí-lo e pronto Você pode torná-lo menor ou maior com esse recurso, ou você pode simplesmente segurar a tecla Control e rolar para cima ou para baixo, e então ele fará isso por você. Se você já é editor, provavelmente sabe como contornar isso, não é tão diferente. Também temos essa opção de fechar a linha do tempo, que removerá todas essas coisas logo abaixo da linha do tempo Então, se você quiser se concentrar apenas no quadro aqui e não tiver muito espaço, faça isso. Mas se você quiser entrar em detalhes, então você quer ver tudo ao redor. Então temos o botão play. Aqui mesmo. Em vez disso, você também pode simplesmente pressionar espaço. Isso é o que eu gosto de fazer. Aqui, temos algumas opções ativar quadros-chave automáticos Vamos falar sobre isso um pouco mais tarde. E aqui temos a hora atual. Explique de forma muito simples. É a hora em que você está, se estiver em um segundo ou 2 segundos. E aqui, é claro, você tem seu tempo máximo, a duração de toda a animação que você tem. No momento, está definido em 2000. Podemos fazer 3.000 e a unidade é milissegundos. Então você pode fazer isso ou expandi-lo a partir daqui. Está bem? Agora, isso vai fazer com que funcione. Mesmo que não haja animação, ela será executada até o final. Tudo bem Então, é claro, temos a opção de loop. Ele está ativado por padrão, mas você pode removê-lo e, depois de removê-lo, ele não se repetirá. Quando chegar ao fim , simplesmente vai parar. Mas, geralmente, quando você está trabalhando, você quer continuar vendo suas animações rodando repetidamente, ter certeza de que estão muito boas. Mas também temos uma terceira opção, chamada Ping Pong Essa é uma opção muito interessante, mas basicamente leva até o fim e volta atrás, e assim por diante. É como jogar pingue-pongue, o que é muito interessante Eu nunca vi isso em nenhum outro programa, para ser honesto. Não tenho certeza se é só para divertir ou se realmente serve a um propósito, mas imagino que possa ajudar de alguma forma. Você tem a opção de recolher camadas. Se você tiver várias camadas e todas elas se abrirem e todas tiverem várias animações, seria muito útil se você pudesse recolher todas as camadas Esse vai ser nosso amigo. Para o resto do curso, nosso cronograma. É assim que vamos chamar esse painel inteiro. Mas lembre-se de que essa nova seção de animação também é muito relevante porque é aí que vamos adicionar nossa animação. Só para ilustrar melhor isso, quando adicionarmos uma animação para esse retângulo, veremos aqui os dois objetos Como você pode ver, você pode recolhê-las, abri-las e mostrar cada animação abaixo delas, ou abrimos as duas, podemos recolher todas as camadas e podemos garantir que as alinhamos da maneira que quisermos e da maneira que acharmos adequada Agora, há muito o que aprender e explorar sobre essa ferramenta, mas, para ser sincero, em vez de contar tudo e sobrecarregar você, gostaria que você fizesse essa jornada comigo e aprendesse como nós, porque essa é a melhor maneira de aprender Nas próximas aulas, falaremos mais sobre detalhes e faremos muito mais e aprenderemos mais por meio deles. Muito obrigado por ouvir e nos vemos na próxima aula. 5. Como fazer o design dos componentes da interface.
: Bem vindo de volta. Nesta lição, começaremos e o primeiro passo na criação dessas animações. Mas antes de começarmos a criar animações, precisamos primeiro configurar nossas camadas, configurar nosso design e interface E, claro, temos que construir nossa de uma forma muito limpa e suave para que, quando quisermos criar uma animação, ela funcione sem problemas, sem complicações Então, hoje, vamos criar uma notificação de brinde. Pode ter outros nomes, mas é um banner e mostrará a notificação. Eu já mostrei um exemplo de como isso se parece, ok? Então, a informação que precisamos transmitir com isso é que haverá uma foto, nome e algumas informações, talvez uma mensagem, que tipo de notificação eu vou decidir ao longo do caminho Vamos começar a criá-lo. Vamos começar criando uma moldura que eu já criei aqui. Vamos preenchê-lo por enquanto e depois vamos dar alguns cantos arredondados. Agora, não estou me limitando a nenhum estilo específico ou a nenhum tipo específico de design como o design da Apple ou do Android ou algo parecido Eu vou criar algo nosso. Portanto, tenha isso em mente. Tudo bem Agora temos os cantos arredondados e, em seguida, o que vamos fazer é colocar uma imagem. Então, eu também vou fazer dela uma moldura e estou segurando a tecla Shift. Vou preenchê-lo, um avermelhado só por enquanto. Também vou dar cantos arredondados e vou tentar colocá-lo perfeitamente, certo? Aí está. E depois vou pegar um elemento de texto e depois escrever algum texto. Portanto, o texto deve ser um pouco menor. Então, vamos fazer 16 talvez. 14, e então vamos digitar algo aqui. Então, essa coisa pode ser, quero dizer, que tipo de notificação estamos realmente recebendo? Digamos que seja uma mensagem de alguém, então essa pessoa se chama JACOB e está nos enviando uma mensagem Está bem? Então, uma coisa a saber também é de que tipo de aplicativo isso está sendo enviado? Então, o que poderíamos fazer é anotar isso também. Assim, poderíamos escrever apenas o nome que é Wettap, por exemplo E então temos uma mensagem de Jacob. Vamos mudar a cor, torná-la acinzentada e, em seguida, vamos começar a digitar o conteúdo da mensagem Então, como não é lugar suficiente, vamos colocar alguns pontos. Aqui temos isso. Vamos tentar testá-lo e ver como fica em um telefone real. Vou colocar um dispositivo como 16, iPhone 16, aí está. Eu posso ver que também podemos estendê-lo para a direita e para a esquerda. Isso não seria um problema. Vamos continuar e estendê-lo. Assim, podemos escrever mais. Então temos alguma conclusão: eu sou ponto, ponto, ponto. Então, aqui temos uma pequena estrutura agradável. Poderíamos brincar com ele, alinhá-lo um pouco melhor e ver como ficaria Também poderíamos tornar outros elementos maiores como este. Mas, na verdade, estou totalmente bem com essa aparência. Tudo bem E então o que gostaríamos de fazer é talvez adicionar uma imagem de Jacob aqui Portanto, qualquer tipo de imagem serviria para qualquer tipo de pessoa. Então, aqui temos uma imagem, então eu vou tirá-la. Vou copiá-lo e colá-lo aqui. Aqui é Jacob, ele está enviando de seu telefone. Ele está nos mandando uma mensagem ou algo assim. Ele tem uma pequena foto muito artística aqui, pode parecer um pouco assustadora, mas isso Então, vamos dar um passo adiante e talvez até mostrar de quem essa mensagem ou de qual plataforma ela está sendo enviada. Já dissemos WhatsApp, mas talvez pudéssemos adicionar o ícone do WhatsApp. Também poderíamos ampliar um pouco essa foto. Depende totalmente de nós. Mas o que você gostaria de fazer é garantir que a distância de cima e de baixo seja a mesma, certo? Tudo bem? Então, aqui temos o logotipo como uma imagem como PNG. Então, eu vou aceitar. Estou cortando um pouco. Lá vamos nós. E eu vou trazê-lo aqui para a moldura. Para torná-lo menor. Vou colocá-lo neste quadro, mas vou remover o conteúdo do clipe. Seria um bom arranjo em que o colocaríamos aqui, e então você pode ver que diz WhatsApp ao lado. É bom. Ou isso ou podemos pegar tudo isso, colocar aqui e escrever o WhatsApp desse jeito Talvez torne o logotipo um pouco menor. Também poderíamos levar isso completamente nessa direção para a direita. Essa também é uma maneira de fazer isso. Acho que dessa forma nos economiza muito mais espaço, porque não precisamos empilhar as coisas de uma maneira e essa área ficaria completamente vazia No momento, estamos brincando com o layout, vendo o que funciona e o que não funciona, de qualquer forma, precisamos alinhar essas coisas Vou escolhê-los e colocá-los juntos em um layout automático, e depois vou colocá-los em um layout automático com este para que fiquem alinhados no mesmo nível Vou colocá-los então em um layout automático com esse elemento de texto, certificando-me de que não sejam valores aleatórios, mas que possam estar na escala de quatro, oito, 60 e assim por diante Aqui você os tem em um automóvel, então a distância aqui é automática entre eles, e esses têm dois ou podem ser quatro. Depende de nós. Mas eu vou fazer dois, dois está bem. Então, no final, temos todo esse layout. Temos todo esse quadro. Também podemos fazer um layout automático e , em seguida, temos a foto. Temos isso juntos e só precisamos alinhá-lo adequadamente Então, vou fazer com que se alinhe à esquerda e dê oito, talvez, e pronto E, sem mais nem menos, temos uma pequena notificação. Mas eu não estou muito feliz com tudo que está acontecendo aqui Deixe-me tornar o espaçamento um pouco diferente. E o que você pode fazer é, quero dizer, você pode tornar a coisa toda um pouco menor, e o que podemos fazer, vamos brincar com isso. Então, em termos de espaçamento para cima e para baixo, vou fazer com que seja quatro e quatro Não 44, quatro e quatro. Está bem? E então, para este, vou fazer com que bloqueie a proporção, faça com que encha o recipiente. E então podemos basicamente decidir o tamanho que queremos que essa coisa seja e a imagem será redimensionada com ela Então, agora eu gostaria de dar um passo adiante e me aprofundar no design. Então, eu gostaria de diminuir a opacidade aqui, obter um pequeno efeito transparente Então, isso é muito bom, e isso é algo que muitas vezes a Apple faz, e muitas interfaces de usuário hoje em dia, muitos softwares fazem para garantir que você possa ver parte do fundo, mas não podemos torná-lo totalmente transparente, desse jeito, sabe? E então o texto tem alguns problemas em termos de legibilidade Então, vamos construir e adicionar não um sombreador, mas sim um efeito de vidro ou efeito de desfoque de fundo Podemos experimentar um efeito de vidro aqui, mesmo que isso possa causar problemas para nós quando se trata fazer essa animação e outros enfeites No momento, isso parece um pouco vítreo. Vamos testá-lo. Então, como você pode ver, isso é bem vítreo O que é muito bom. E ainda é legível até certo ponto Eu diria que esse texto aqui precisa ser preto ou totalmente branco, mas torná-lo totalmente branco quando o outro texto é preto também não faz sentido. Então, vou torná-lo preto, mas vou dar 50 ou 75%, que é um pouco melhor do que o que tínhamos, não perfeito, mas melhor. Tudo bem, então agora temos. Você também pode brincar, adicionar algumas sombras, projetar sombras assim. Faça com que seja 15. Então, vamos fingir que isso é uma notificação que alguém recebeu E digamos que está aqui no meio e escrevemos o relógio. Então, isso é apenas uma coisa de fundo, e então temos nossa notificação aqui. Então, agora que construímos isso, agora podemos brincar com ele e ter certeza de que é adequado para começarmos a animá-lo Agora temos algo com que trabalhar, certo? 6. Organização de camadas para animação
: Tudo bem, bem-vindo de volta. Agora que temos essas camadas, criamos essas camadas, esses diferentes elementos de design, e temos uma pequena configuração de notificação de torrada de notificação em andamento Funciona. Parece bom. Mas tem uma coisa. Quando vamos animar isso, talvez tenhamos problemas com uma ou duas coisas E o problema está no layout e na organização dessas camadas, eu diria. Para ilustrar isso melhor, tenho duas versões aqui. Um deles tem layouts automáticos, enquanto o outro não tem layouts automáticos Basicamente, é deixado de fora , como um quadro normal, sem layout automático. Espero que você esteja familiarizado com isso. Se você não usa o Autolayouts, nos permite configurar certos espaçamentos, como margem, preenchimento, e configurar coisas e organizá-las uma certa maneira que as torne mais responsivas Então, para ilustrar o que quero dizer, se dermos uma olhada em ambos, eles parecem idênticos Eles são exatamente iguais, ou quase exatamente. Mas há uma diferença. Um deles tem layout automático e um deles tem layout automático. Então, podemos testar isso alterando o tamanho. E como você pode ver com este, quando você muda o tamanho, as coisas estão em todo lugar. Eles não estão configurados corretamente. Agora, é claro, podemos configurar isso de forma agradável e organizada, mas pode ser um pouco difícil de fazer Como você pode ver, o texto está empacotado de uma certa maneira e muita coisa pode dar errado Se você tentar isso sozinho, pode ser ainda pior. Enquanto fazemos isso com este, parece um pouco mais organizado, certo? Podemos até mesmo configurá-lo para ser um pouco diferente. Pode até ficar melhor se fizermos assim, por exemplo, parece muito suave e tem uma animação suave. Enquanto este, ele precisa de algum trabalho. Especialmente, estamos trabalhando aqui com molduras. Se você está trabalhando com grupos ou se você nem tinha nenhum tipo de grupo, você está trabalhando com objetos, camadas e outros enfeites, isso teria sido muito pior A chave aqui é criar e organizar suas camadas adequadamente antes de começar , para que você possa ter uma animação suave e agradável que não faça você andar e correr por toda parte só para ter certeza de que está perfeita. Está bem? Então, a maneira de fazer isso é, como eu disse, criar layouts automáticos Então, como você faz? Você vai colocar elementos que estão próximos, assim. Você pode segurar os objetos que deseja fazer, clique com o botão direito do mouse e , em seguida, vá para a seleção de quadros ou adicione o AutoLayout Você adicionará um layout automático diretamente e, em seguida, adicionará um layout automático aqui E então você vai fazer todo esse layout automático clicando aqui. E então vai parecer um pouco estranho. Então você vai ajustá-lo. Você escreverá oito, por exemplo, adicionará um pouco mais de espaçamento à direita e poderá fazer esse preenchimento se quiser Depende de você. Ainda parece um pouco problemático porque adicionamos o preenchimento aqui, podemos simplesmente fazê-lo abraçar E então, como você pode ver, parece que segurar a tecla shift e redimensioná-la parece muito melhor E isso basicamente torna todo o processo muito mais fácil de fazer quando se trata de animações. Você tem suas camadas inteiras organizadas. Você não precisa se preocupar com eles. E agora vamos começar com o animate. 7. Como criar sua primeira animação: Bem vindo de volta. Nesta lição, vamos criar nossa primeira animação, devo dizer que tenho estragá-la para você Não é tão empolgante. Não é a coisa mais difícil de fazer no mundo. E especialmente se você estiver familiarizado com programas de edição de vídeo, isso vai ser um passeio no parque. Vamos começar. Como fazemos isso? Agora, há muitas animações e fontes diferentes que vamos explorar Mas primeiro, vamos aprender como se locomover. Agora, já sabemos para começar a animar Se você estiver pesquisando aqui por alguma coisa sobre animações, você não vai encontrar O primeiro passo que você vai fazer é ir para o modo Movimento ou Movimento. Depois de entrar, agora você está no fluxo de trabalho ou no espaço de trabalho de animação Então você está aqui agora. Você tem as coisas planejadas. Você vai para o painel direito e vai para a área de animações aqui, a seção Então você tem duas opções. Você pode acessar as animações. Portanto, isso oferece um conjunto de animações com muitas opções diferentes Se você estiver familiarizado com o PowerPoint ou qualquer tipo de software de criação de apresentações, ele também tem uma guia semelhante aqui com animações Ou você pode seguir em frente e clicar no botão Mais. Agora, mais uma vez, vamos retroceder. Você clica no Plus. Isso lhe dará imediatamente uma animação. Provavelmente será uma animação de posição e é normal. Essa é a maneira mais simples de criar uma animação. Mas, como eu disse, como mencionei, você pode fazer isso alternativamente acessando aqui e escolhendo uma animação. Agora, você pode decidir entre os básicos. Você pode dizer: Ei, eu quero fazer um relacionado à posição, à escala, à rotação, ao tamanho, à opacidade Há burstgnit, essas são predefinições. É assim que os chamamos, e são basicamente animações que já estão configuradas para terem diferentes tipos de movimento, diferentes tipos de velocidades e outros enfeites Isso é uma coisa muito importante para você entender. Animação não é apenas dizer passar do ponto A para o ponto B. Poderíamos tratá-la dessa forma, mas, nesse ponto, não seríamos bons designers de movimento. Neste ponto, é isso que você deveria aspirar. Você deve tentar fazer um bom design de movimento. A maneira de fazer isso é entender que boas animações são pouco mais do que apenas movimentos, indo do ponto A ao ponto B. Mas é sobre como você vai do ponto A até se divertir no começo Você relaxa no final? Você diminui a velocidade no final? Ou talvez você faça tudo ao contrário. Você acelera muito rápido no começo e depois desacelera no meio, aproveita o momento e depois acelera no final. Você termina com um estrondo. Há muitas maneiras de fazer isso. Talvez você comece devagar e vá rápido e depois devagar e depois rápido e depois devagar. Há muitas maneiras diferentes de fazer isso, mas o mais importante é que deve haver uma ideia, às vezes há até mesmo um salto Isso é algo que você aprenderá quando se trata de animações, há um salto, certo É muito comum que, quando a animação termina, digamos, essa pequena notificação chegue e depois vá para a direita e depois volte, ela está quicando como uma bola Ele bate e volta um pouco. Todos esses fatores dão uma impressão. Se você está criando um aplicativo que tem pequenos personagens fofos e eles têm pequenos movimentos. Faz sentido torná-lo saltitante. Saltar é divertido Mas, por outro lado, criar uma animação que pareça premium e elegante deve ser mais lento. Isso é exatamente o que aprenderemos na próxima lição. No momento, criamos nossa primeira animação. Na próxima lição, vamos explorar os diferentes tipos de animações. 8. Posição, escala e opacidade como animar: O Bem-vindo de volta. Então, em primeiro lugar, aprendemos como criar uma animação na última lição, mas não pudemos testá-la, não é? Então, vamos tentar testá-lo. Eu só vou clicar em mais. Eu vou receber a primeira animação, e não vou mudar nada sobre ela, ok? Então, a maneira de testá-lo, como aprendemos antes, é seguir essa pequena questão de cronometragem , e você simplesmente clicará no espaço e, em seguida, visualizará sua aparência, e será em um loop. Então, como você pode ver, é movimento. Não é especial. Não é loucura. Mas, obviamente, não é bom. Só está saindo daqui. Então, esse é um tipo de movimento, e quando entramos em detalhes, quando você clica nele, você tem muitas opções aparecendo. Não fique sobrecarregado. Não é tão complicado. O tipo de movimento é escolhido para nós ao deslizar para dentro. Isso significa que é um tipo de animação de entrada. O objeto está entrando no campo de visão. Também pode ser deslizado para fora. Então, começaria onde está e depois sairia para a esquerda. Está bem? Então, isso é uma coisa que podemos configurar. Também pode ser personalizado. Isso pode estar subindo, para a direita, para a esquerda, o que quisermos. Mas vamos voltar ao slide porque é isso que estamos procurando. Você pode escolher de onde deseja que ele deslize. É da esquerda, da direita, do canto superior esquerdo? Mas vamos ficar com a esquerda. A notificação está vindo da esquerda para a direita. Aqui, onde fica interessante, também podemos decidir a distância. Se você passar o mouse aqui, você também pode simplesmente arrastá-lo e aumentar a distância Então, vamos fazer um pouco mais até que fique fora de visão. E, como você pode ver, agora funciona muito melhor. Então, está fora de visão e, em seguida, entra em cena. Tudo bem, então temos mais algumas opções que vamos explorar um pouco mais tarde. Por enquanto, isso é suficiente para nós. Esta é uma pequena animação de posição agradável. O que mais temos? Quando começamos a clicar no Plus, começamos a receber diferentes tipos de animações, como escala, certo? Então, a escala vai aumentar ou diminuir, vamos ver. Então, quando estamos pré-visualizando, parece que está ficando menor Então você pode clicar nele e ver o que diz aqui. Então, está dizendo que aumenta, certo? Então, ele entra em uma moldura e depois se expande. Mas parece estar ficando menor. Então, vamos testá-lo e fazer com que seja de 200%. Então, sim, isso significa que foi de 200%. Ele entra no quadro e depois se torna 100%. Também podemos alterá-lo e expandi-lo. Então, ele passa de 100% e aumenta para 200%. Portanto, temos praticamente a mesma lógica com o tipo e a quantidade. E isso é muito bom porque faz sentido. Você também pode simplesmente clicar nesses quatro círculos e escolher qual deles deseja. Você pode fazê-lo girar. Vamos ver como isso se parece. Deve ser divertido. Perfeito. Então, tudo isso pode parecer um pouco tolo agora, mas não deve ser usado assim Você deveria pensar neles com mais intenção. E para cada tipo diferente de animação ou para cada tipo de caso de uso de cena, você deve ter uma animação diferente. Portanto, você deve entender que, para esse caso de uso, rotação realmente não funciona, mas para outro, pode. Também temos lados. Então, de que tamanho ele muda as coisas. O tamanho funciona. Você pode dizer: Ei, escala e tamanho são a mesma coisa. Mas quando se trata de Figma, não é. O que ele faz aqui é esticar a própria moldura, certo? Então eu apenas o trago e o estico . É isso que ele faz. O que a balança faz é esticá-la de uma maneira diferente É como se você clicasse em K. Vamos voltar ao editor normal e clicar em K. O que K faz, permite que você Eu abro uma ferramenta que permite escalá-la enquanto mantém a escala de tudo. Tudo seria redimensionado exatamente da mesma maneira, mas muito maior Mas se fizermos isso com o normal, se você pressionar V, você pegará o mouse normal e, dessa forma, você pode escalá-lo. A imagem pode ficar maior, mas o texto não, e é colocado de forma estranha Essa é uma diferença. Agora, voltando às animações, há muito mais para explorar Há opacidade. E, como mencionei, há todas essas predefinições que temos aqui Vamos experimentar um deles. Vou esconder a posição onde por enquanto, e vamos explodir Como você pode ver, apenas adicionando burst, ele continuou e adicionou várias animações Ele adicionou quatro para ser exato, e todos eles estão predefinidos com diferentes tipos de velocidades, coisas e gráficos que podem ser um pouco Eu adicionei opacidade, rotação, escala e posição. Como você pode ver, eles também são sempre diferentes . E parece exatamente isso. O bom disso é você economiza muito tempo se você não tem tempo disponível e só quer algo rápido e já feito. Mas se você quiser fazer algo com suas próprias mãos , eu recomendaria aprender mais, e é exatamente isso que faremos nas próximas aulas. Obrigado por assistir e nos vemos na próxima lição. 9. tempo, duração e suavização: Tudo bem, então, bem-vindo de volta. Então, agora que definimos uma animação, certo? Aprendemos como criar uma animação. Aprendemos a usar uma das predefinições ou a brincar com diferentes tipos de animações e também a usar e navegar nessa linha do tempo e entender como ela funciona, certo Fizemos tudo isso, mas agora é hora de falar sobre os detalhes. Então, quando você se posiciona, certo, falamos sobre como existem vários fatores ou múltiplas variáveis com as quais podemos brincar, se você puder. Algumas dessas variáveis são o tipo, então o tipo de movimento, seja um slide para dentro ou um slide para fora ou personalizado, temos a direção. Conversamos sobre isso e também sobre a distância. O que não falamos é sobre o atraso, a duração e a flexibilização. Está bem? E não é tão fácil falar sobre isso. Agora, sim, claro, atrasar é simples. Significa apenas o quanto esse tipo de animação será adiado. Então, podemos mudar isso. Não é tão difícil. Como você pode ver, podemos, você sabe, deslizá-la para cima e você pode ver que a animação está atrasada, certo? simples quanto, você sabe, mais simples que pareça, só demora, certo? Não é nada mais, nada menos. Mas temos algo, você sabe, temos algo mais. Então, quando escolhemos esse elemento novamente e vamos para a animação, também há duração, o que também parece muito simples, certo? Então você tem 500 milissegundos aqui. Então podemos dobrar isso e dizer mil e então a animação simplesmente ficará mais lenta. Não é nenhuma surpresa. Isso também é muito simples. Onde pode ficar um pouco complicado ou desafiador é a flexibilização. Agora, felizmente, com outros programas, é mais difícil Com o Figma, ele foi criado ou simplificado para os usuários com essas predefinições Novamente, você tem essas predefinições diferentes. Agora, acho que, por padrão, é considerado fácil, mas há muitos tipos diferentes. Existe o tipo linear, que é o tipo normal de movimento. É um movimento linear. Não muda, não acelera, não desacelera É simplesmente constante, certo? Então, se há um carro que anda 10 milhas por hora, 10 quilômetros/hora, ele continua dirigindo exatamente na mesma velocidade a 10 milhas por hora, 10 quilômetros/hora, ele continua dirigindo exatamente na mesma velocidade, certo? Pense nisso como um carro. Quando você diz calma, o que acontece é que esse carro começa na mesma velocidade, fica a 10 quilômetros e, no final, começa a desacelerar, assim como um carro normal faria, certo? Você não pressiona os freios repentinamente, mas começa a desacelerar para desacelerar Então é exatamente isso que acontece. Vai e depois começa a diminuir. Desculpe, foi fácil. Temos facilidade para sair. Lá vamos nós. Então, como você pode ver, é como se ele entrasse e começasse a estacionar, diminuindo a velocidade desse jeito Está bem? Temos tipos diferentes. Há facilidade de entrada e saída. Portanto, a facilidade de entrada está no começo. Então, quando você está começando, o carro começa a parar Começa devagar e depois exala, fica mais rápido. E, nesse caso, não está diminuindo, mas podemos fazer as duas coisas Então, vamos ver como fica. Então isso parece um carro normal. Começa devagar e depois aumenta a velocidade, e depois termina lentamente É assim que normalmente funciona. Agora, temos muitas opções diferentes nas quais introduzimos algo chamado limites Então relaxe, por exemplo. Então aqui você tem um pouco de equilíbrio. Então ele entra e depois vai um pouco longe demais para a direita e depois volta. É uma espécie de equilíbrio, e é exatamente isso que deveria ser, você sabe, o que deveria estar acontecendo. Você também tem muitas predefinições diferentes. Então vá em frente, você sabe, tente explorá-los, tente entender o que é melhor. E o legal disso é que você tem essas opções personalizadas. Então você pode dizer, vamos personalizar, e então você pode personalizá-lo. Agora, eu não aconselharia você a começar a jogar com isso ainda se você não estiver familiarizado porque isso pode ser um pouco complicado. Mas se você quiser, se quiser realmente experimentá-lo, deixe-me explicar isso muito rapidamente. Ok, então você tem duas opções diferentes. Você tem uma curva e uma mola. A primavera está mais relacionada a saltos e outros enfeites. Está bem? Então, vamos testá-lo com a mola. Você tem esse salto muito rápido. Você pode fazer a velocidade, você pode fazer muitas coisas diferentes. Mas, basicamente, você configura a mesma animação de maneiras diferentes. Então, esse também está tendo um salto, mas é um tipo diferente de salto Vamos ver como fica com a primavera. Então, parece uma mola, como uma mola real voltando Então você tem diferentes tipos de movimento. Do jeito que você faz isso, você tem essa linha. Uma vez que cruza essa linha, torna-se um salto. Então, se o mantivermos abaixo dessa linha, há um salto muito, muito leve, como você pode ver, muito leve e é porque não podemos vê-lo Então, se tentarmos diminuí-lo, isso é o máximo que podemos diminuí-lo. Então, tem zero. Quase não tem limites, ok? Então, isso é como uma primavera. Como eu disse, você tem que pensar nisso com o salto. O salto está dentro dele, e você pode criar saltos infinitos como esse, por exemplo, o que é uma loucura, mas você pode ver Então é como uma primavera. Assim, você pode decidir quantos saltos ele terá para a direita e para a esquerda aumentando essa E uma vez que você tem um, isso é insano. Agora, vamos voltar um pouco à curva. Curva é quando fica mais sofisticada. Você ainda pode pular, mas fica um pouco mais sofisticado Então, agora, como você pode ver, temos um salto. Tudo gira em torno desses dois, como essa curva, certo? E você tem duas opções aqui, duas curvas. E eles decidem muitas coisas, como você pode ver. Como eu disse, a curva vai acima da linha, vai ser um salto Então, vamos tentar colocar isso de lado. Coloque isso assim, por exemplo, aí está. Então, agora não devemos ter limites, mas, como você pode ver, é mais linear, e é porque parece uma linha reta, certo? Então, que tal relaxarmos um pouco, ok? Então, flexibilizar significa que essa é a velocidade que ele vai aumentar. Assim, ele pode aumentar a velocidade lentamente. É assim que facilitamos a entrada, ok? Assim e depois ganha velocidade. Então, vamos ver. Lá vamos nós. E então ele ganhou velocidade muito rapidamente. Agora, podemos fazer o oposto. Podemos fazer com que ele se apresse fazendo o oposto. Está vendo isso? Então, a mesma coisa aqui, se quisermos que isso diminua, temos que colocar dessa forma. Então, se quisermos que isso diminua, vamos ver como fica. Então, como você pode ver, ele apareceu muito rapidamente. Não entrou, mas diminuiu muito. Agora vamos fazer o oposto. Agora, o que vai acontecer é que ele entrará muito rapidamente e depois diminuirá a velocidade no meio e depois ganhará velocidade até o fim. Então, como você pode ver, muito rápido e depois lento e depois rápido. E então terminou a animação muito rapidamente. Quero dizer, se configurarmos para que não faça loop, é assim que parece. Mas é um pouco rápido demais aqui. Tipo, vamos fazer isso assim. É isso mesmo. Então, podemos fazer o oposto. Podemos fazer isso se fizermos desse jeito e desse jeito. Então, temos algo mais parecido com uma facilidade de entrada. Então, como você pode ver, não é tão íngreme e, no meio, fica muito íngreme, muito rápido e depois desacelera OK. Então você vê. E, sem mais nem menos, foi em frente. Você sabe, eu entrei e tudo diminuiu. Coloque tudo isso de lado e pergunte a si mesmo: para que serve isso? Por que estou fazendo isso? Qual é o propósito disso? E deixe-me te dizer a resposta. A resposta está basicamente no efeito que você está tentando dar, na impressão. Você está tentando dar uma impressão elegante e gentil? Então, eu recomendaria que você usasse essas animações fáceis porque você quer mostrar que as coisas são elegantes, as coisas estão brilhando Há muita inovação, velocidade e ação, mas também há desaceleração. Você sabe, e isso traz um pouco de elegância a qualquer marca, qualquer movimento que você esteja tentando divulgar E então, quando você opta pela primavera, a primavera tem uma sensação mais divertida e caricatural Não é tão ruim, mas meio que diz: Ei, estamos todos nos divertindo aqui. Não precisa ser tão suave, agradável e gentil, mas pode ser saltitante. Pode ser divertido. Pense nisso como personagens de animação, desenhos animados, eles estão sempre pulando e pulando por toda parte, e é exatamente isso que você está Você tem animações saltitantes. Acho muito legal se for configurado da maneira certa para o cliente certo ou para a identidade certa, você sabe. Então você meio que teve que se perguntar: que tipo de marca ou que tipo de site ou aplicativo você está criando? As animações deveriam parecer engraçadas, caricaturais e amigáveis ou deveriam ser mais gentis, elegantes e, você sabe, você sabe, Então você tem que pensar sobre isso. E, claro, cada pessoa tem seu próprio estilo diferente. Algumas pessoas entram com facilidade, saem tranquilamente , outras simplesmente saem. Então, as pessoas fazem muitas coisas diferentes. Então, pense em criar seu próprio estilo ou criar um estilo específico para a marca em que você está trabalhando. E se já existem stop motions, vídeos e animações relacionados à marca, talvez você possa tentar encontrar o estilo a partir daí e continuar com o mesmo Então, explique de forma muito simples que é como você pode alterar o movimento na duração, na atenuação e no atraso de suas animações para dar uma certa impressão e efeito Muito obrigado por ouvir, e nos vemos na próxima lição. 10. Sequenciando vários elementos: Até agora, temos essa pequena animação que construímos aqui. E falamos anteriormente sobre como facilitar as configurações e outros enfeites Vamos tentar não fazer muita coisa sobre isso nesta lição. Nesta lição, falaremos mais sobre várias animações em uma cena, algo que você fará e deve querer fazer porque uma animação é ótima Duas animações, ainda melhores. Dez animações. Ou talvez demais. Se você fizer isso da maneira certa, poderá multiplicar essas animações Você pode colocá-los um sobre o outro e colocá-los em camadas uma forma que pareça suave, que funcione e pareça profissional. Então, isso é exatamente o que estamos fazendo. E se você pensar em qualquer tipo de sistema operacional, qualquer tipo de sistema operacional com o qual trabalhe, perceberá que eles geralmente têm essas animações em camadas Não é apenas uma notificação que chega e gosta de tocar, mas tem mais camadas Há várias coisas acontecendo em segundo plano. OK. Então, vou tentar demonstrar e fazer isso com vocês juntos, passo a passo. Então, agora temos essa animação de posição. Parece ótimo. Vamos adicionar outra animação. Então, vou clicar no botão Mais, e ele vai me dar uma animação em escala, o que na verdade não parece o que eu quero fazer. Então, aumente em 120%. Em vez de escala, vou seguir em frente e ver o que o tamanho pode fazer por mim. Está bem? Então, agora estamos trabalhando com o tamanho, e você pode ver que ele está sendo redimensionado Então, está tendo o tamanho normal e depois ficando maior. Queremos fazer o oposto. Então, vamos redimensionar. Então, vamos ter um tamanho diferente. Vai se ajustar ao que temos agora. Sei que é um pouco difícil de entender, e acho que talvez eles devessem reformular isso de alguma forma Não pense muito nisso agora. Agora que temos isso, em vez de redimensionar, vou personalizar Porque quando você personaliza, ele permite que você escolha se deseja fazer X e Y ou se deseja fazer largura e altura , oferece essas opções. Tudo bem, o que vamos fazer é escolher o acesso e ir para X. Isso só vai mudar a largura para nós, que é o que queremos Então vamos chegar aqui e vamos dizer que a largura anterior será dez, e o final será 100. Agora vamos ver como fica. Não é exatamente o que queremos. Então, vamos colocá-lo no início ou aqui no meio. E eu vou redimensionar a largura no começo para ser negativa, ok? E isso porque acho que zero talvez seja o tamanho pelo qual você começa. E então você precisa fazer com que seja muito menor que zero, ok? Então, agora chegamos aqui. Opa, aqui está a animação de dimensionamento. É por isso que não estava aparecendo muito. Então, vamos trazer o tamanho da animação. Nós vamos colocá-lo aqui. Vamos estendê-lo. Agora podemos dar uma olhada. Então, como você pode ver, está se abrindo. Está indo muito além do que queremos. Então, vamos fazer com que a largura seja zero. Então, como mencionei, zero está no ponto em que essa já é a largura. Então era lá que estava. Então, vai de menos 244 para zero. Está bem? Agora, vou mover um pouco a animação porque quero que ela comece um pouco tarde e vou estender aqui a duração total de toda essa animação. Então, eu quero ver como ele se estende a partir desse círculo. Então, eu vou trazê-lo aqui, talvez ou aqui. OK. E eu vou torná-lo ainda menor no começo. OK. Eu amplio um pouco. Então, vou fazer com que seja menos três, um, oito. Eu acho que isso é bom. Não é perfeito, mas é bom. Vai começar aqui e depois vai se abrir. Mas, como você pode ver, há um pouco de estranheza porque chegar aqui e parar aqui e depois está se abrindo O que preferimos que aconteça é que chegue ao meio, ok? E então ele se abre. Então, como podemos fazer isso acontecer? Essa é uma pergunta muito boa. Não é fácil de fazer, mas vamos tentar resolver isso. Então, imagino que isso seja feito é que, quando isso chegar aqui, deve estar chegando no meio. Então, vamos fazer exatamente isso, ok? Portanto, esse quadro deve estar no meio. Então, vou clicar na moldura. Eu vou até o editor. Nós vamos vir aqui. E vamos tentar centralizá-lo. Está bem? Vamos colocá-lo aqui no meio, mas não neste momento, e sim neste momento. Está bem? Vejo que algo está errado. Vá ajustar isso um pouco. Então eu vou trazer isso, vou escolher isso e trazer no meio, ok? Então, agora aqui está o que vai acontecer. Ele virá no meio e depois se abrirá. E agora, quando a animação aqui terminar e começar a se abrir, eu vou fazer isso. Quando termina, a animação de tamanho é iniciada. E quando começar a se abrir, será como se houvesse uma animação em que mudaria a posição. Então, como fazemos isso? Simples, vamos clicar e clicar na posição aqui. Então, vamos adicionar outra posição um. E vamos personalizá-la, porque só queremos fazer uma animação personalizada. Então, vai começar do zero e depois vai para a esquerda, então menos 92. Então, vamos ver se isso vai funcionar. Vamos colocar camadas aqui até aqui. Vamos ver agora. Como você pode ver, é exatamente isso que queremos, mas não o número certo. Então, vamos tentar fazer isso funcionar. E isso é apenas uma aproximação. Lá vamos nós. Então, vamos ver. Tudo bem Isso é uma coisa muito boa. Agora, ainda não está perfeito e ainda há algumas coisas a fazer. Mas acho que já estamos progredindo muito. Então, o que ainda podemos fazer é, você sabe, mudar as animações para que possamos relaxar Você pode fazer isso, você sabe, de forma mais personalizada e pode aumentar a flexibilização, se quiser E a mesma coisa com o tamanho, para que você possa personalizá-lo. E se você quiser, você também pode dar um pequeno salto. Vamos ver como fica. Não é a melhor montagem, para ser honesto. Então, vamos tornar isso normal. Eu diria que é um pouco lento demais, então vou torná-lo mais rápido. O que é ainda mais legal é, e se fizermos com que se sobreponha a este É exatamente aí que você pode começar a ganhar. Portanto, não é perfeito, mas fica mais complexo. Está acontecendo ao mesmo tempo. Não é um por um, mas tudo acontece ao mesmo tempo. Mas agora, quando fazemos algo assim, não está funcionando muito bem. Vamos devolvê-lo e ver o que podemos fazer com ele. Podemos começar a mudar o tamanho, podemos começar a mudar as coisas em momentos diferentes. Depende de você, mas deve parecer correto. Como você pode ver, isso parece estranho. Portanto, tente se certificar de que está indo bem. Então, sim, agora temos uma pequena animação em camadas. Tem vários fatores em jogo. Podemos dar um passo adiante e abordar os elementos individuais dentro dela, como esses textos, por exemplo. O que podemos fazer por eles é adicionar, por exemplo, um efeito de opacidade. Então, teríamos que alinhá-lo corretamente, e ele passaria de zero opacidade para um pouco mais, mas, como eu disse, você só precisa alinhá-lo Então, isso parece muito mais suave, como se o texto desaparecendo e fosse muito bom Você também pode, você sabe, mudar muitas coisas nessa animação apenas para torná-la mais natural, sobrepondo-a em camadas, como eu disse Quanto mais você investe nele, mais sofisticado ele parece. E, claro, no final das contas, tentando, buscamos a simplicidade Nosso objetivo é o minimalismo e muito design. Além disso, só podemos alcançar essa aparência simples e limpa fazendo muitas coisas complicadas em segundo plano. Então, vá em frente, experimente mesmo e veja o que você pode criar a partir do tipo de animação em camadas que você pode criar Tente fazer o máximo que puder. Mas o mais importante, certifique-se de que pareça normal. Parece harmonizado, como se essas animações estivessem funcionando juntas Muito obrigado por ouvir, e nos vemos na próxima lição. 11. Organização da linha do tempo: Olá e bem-vindo de volta. Nesta lição, falaremos sobre como organizar sua linha do tempo Então, o que quero dizer sobre isso não é apenas organizar sua linha do tempo, mas também garantir que as durações, as animações, sejam É disso que trata realmente a linha do tempo. Trata-se de cronometrar suas animações e garantir que elas estejam sincronizadas e harmonizadas de uma forma que pareça natural, harmonizadas de uma forma que suave e com todas as coisas boas Então, agora, nas últimas lições, criamos essa pequena animação. E como você pode ver, brincamos um pouco com as animações. Está bem? Brincamos com a duração das animações e o tipo E uma coisa a ter em mente é que, você sabe, as molduras são organizadas dessa maneira. É uma forma muito simples e intuitiva à esquerda. Então, basicamente, você tem o quadro em que está trabalhando. Então, enquadre um, por exemplo, e você terá todos os tipos de animações vinculados a ele E você pode ver a duração máxima. Então você pode ver por quanto tempo esse elemento, essa moldura está se movendo ou mudando para dentro. E então você pode ver que a animação da posição vai desse momento para aqui, e então você tem o tamanho da animação acontecendo ao mesmo tempo que outra animação de posição. A mesma coisa com o quadro cinco, mas o quadro cinco tem apenas uma animação de opacidade. Então, como você pode ver, quando mudamos a animação do quadro cinco, ele arrastará todos os outros com ela. E a mesma coisa aqui vai ampliar todas as outras animações com ela Até agora, isso está claro. Nós entendemos como eles funcionam. Vamos tentar mexer um pouco mais com isso. Vamos aprender como criar animações simultâneas, bem como animações que acontecem uma após a outra Basicamente, vamos mexer na linha do tempo. Agora, em termos de animações simultâneas, elas são meio que simultâneas Então, vamos falar sobre a criação uma animação que acontece depois disso, você sabe, estender a cena Então você vem aqui e recebe uma mensagem, certo? O que é muito bom. Parece ótimo. Agora, o que acontece depois que você recebe essa mensagem, certo? Então, acho que outra animação que poderia caber nela é talvez ela tenha saído do caminho. Talvez o usuário vá para a esquerda. Está bem? Então, em vez de deslizar para dentro, vou fazer com que ele deslize para fora e vou levá-lo até a esquerda. Então, no momento, ele não está fazendo nenhum movimento, e é porque acho que a animação está fora da linha do tempo Então, vou estender o cronograma aqui. Tudo bem Agora podemos ver a animação e eu posso brincar com ela. Então, a distância, vamos aumentar a distância para que ela desapareça, e aí vamos nós. Novamente, assim como aprendemos, vamos seguir em frente, ir para a posição e tentar torná-la mais interessante. Vamos ver o que podemos fazer com o Bouncy. Esse salto não é muito saltitante da maneira que queremos que seja Vou apenas relaxar e depois vou personalizar. Em seguida, vou personalizá-lo. Agora, o que é interessante, eu quero que salte no começo Eu quero que a pessoa leve para a direita e depois vá para a esquerda. Vamos ver como isso se parece. Você vê isso? Foi um pouco para a direita, saltei no começo e depois E isso meio que lhe dá um pouco de personalidade e identidade. Quero dizer, quando você toca na tela, talvez toque nessa notificação e, por acidente, a leve um pouco para a direita e depois a leve para onde quiser, que é à esquerda E assim, nós meio que adicionamos uma animação diferente na linha do tempo Podemos expandir a linha do tempo e fazer outra animação Então, podemos fazer isso, podemos ir para o modo de design. Eu vou levar isso. Eu vou trazê-lo aqui e vou, você sabe, vamos centralizá-lo. E eu vou escrever Ok. Agora temos isso e vamos mantê-lo centralizado. Em seguida, vou voltar para a animação para o modo de movimento e vou remover as outras animações que esta tem Como você pode ver, ele copiou todas as animações que Vou deletar todos eles e vou criar os meus próprios, e vou fazer com que seja um vamos ver o que temos aqui. Magnify parece interessante. Isso parece muito legal. Mas eu quero que seja um pouco mais curto. Vamos ver. Mas podemos continuar e, voltando aqui, vou colocá-los no mesmo nível. Então eu vou copiá-lo e colocá-lo aqui. Agora, isso também terá a mesma animação. Vou adicioná-lo aqui e vamos ver como fica. E o que seria mais legal, ainda, eu vou trazer isso aqui Eu vou vir aqui e dar outra animação a isso. Vou dar outra animação a esse quadro, e ela estará aqui. Vamos fazer uma animação de posição. Em vez de deslizar para dentro e para fora, eu só queria usar o Y, então ele começaria em zero e depois em 100 Então, não queremos descer, mas pelo contrário, queremos ir menos 100, digamos, isso é demais. Mas acho que você sabe aonde quero chegar com isso, vou clicar nele novamente. Vamos fazer 2030. Isso é muito bom, mas o momento não é perfeito. E acho que precisamos que isso fique na camada superior. Agora vou voltar a fingir minha moção. Às vezes, você não vê a linha do tempo e só precisa clicar em qualquer item Agora, isso parece muito melhor. Podemos torná-lo ainda mais perfeito chegando à posição e mexendo um pouco com ela Exemplo como esse. E você pode ver como essa animação é muito boa, os pequenos quadros, podemos examiná-los. Agora, é claro, eu só quero que você saiba que você pode ver a notificação chegando aqui. É uma animação diferente do que está acontecendo aqui. Mas isso é de propósito. Eu queria que parecesse diferente. Mas, obviamente, se você estiver criando algo assim, as notificações devem vir de uma maneira mais consistente. Mas vamos ver como está agora. OK. Parece muito bom. Mas deixe-me esperar um pouco. Acho que a mensagem que está aparecendo é um pouco rápida demais. Eu virei aqui e vou mover a posição para aqui e vou mover essas para cá. OK. Sim, isso parece muito bom. Aí está. Ei, cara, como você está? Então é excluído e então ele diz, você não se atreve a deletar minha mensagem? Eu vejo o que você está fazendo. Vamos ver isso de novo. Perfeito. E é basicamente assim que você deve trabalhar. Você deve ver sua linha do tempo como um playground. Vá em frente e crie animações diferentes em momentos diferentes. Não se preocupe em fazer bagunça. Apenas certifique-se de que você está se divertindo. E, você sabe, no final do dia, você pode fazer com que sua linha do tempo pareça mais organizada, sei lá Se você simplesmente desmoronar, em vez de fazer com que todos eles caiam , você pode colocá-los de volta e ver cada quadro. Então, agora estamos apenas vendo as molduras. Não estamos vendo todas as animações diferentes que esses quadros têm e, em seguida, podemos movê-los. Podemos jogar com eles de uma forma muito mais fácil. Obrigado por ouvir, e nos vemos na próxima lição. 12. Animações em loop: Bem-vindo, novamente, nesta aula, criaremos animações que se repetem. Criar animações em loop não é tão difícil, mas é uma arte sutil que nem todo mundo entende o significado por trás e que todos podem fazer sem problemas Nesta lição, explicarei como você pode alcançá-lo e qual é realmente o uso disso? E, claro, existem diferentes aplicativos e casos de uso para esse tipo de animação. Então, isso varia. Eu não posso te dar uma visão geral de tudo. Mas um exemplo claro que eu poderia dar são, você sabe, os reels ou o TikToks ou qualquer conteúdo curto que você assiste, no qual os vídeos se repetem Eles circulam. E, na realidade, todos os vídeos são reproduzidos nas redes sociais. Neste ponto, você sabe, além do YouTube, no Instagram, no Tik Tok outras plataformas de mídia social, quando um vídeo termina, ele volta e volta novamente Mas estamos falando de dar ao seu vídeo uma aparência perfeita, sem que pareça estar em loop Parece que continua acontecendo novo se você não está prestando atenção. Então, basicamente, faz com que o final pareça o começo. Então, deixe-me explicar o que eu significo para você. Então, agora, nesta animação que construímos até agora juntos, podemos ver um corte muito duro, certo? Então, vamos ativar o loop a partir daqui, e, você sabe, agora, está no modo loop Então, quando reproduzimos essa animação, você verá que as coisas estão acontecendo e, em seguida, há um corte rígido. O corte duro acontece por aqui, como você pode ver. Então, quando você chega aqui, as coisas desaparecem repentinamente, há uma maneira muito fácil de se livrar disso, de consertar isso A maneira de fazer isso é estender um pouco a linha do tempo, escolher esses dois elementos e dar a eles uma animação. Vamos voltar. Não queremos uma animação de rotação. Queremos uma animação de posição. Vamos fazer com que ele deslize para fora e vamos fazê-lo se distanciar para a esquerda. Vamos escolher os dois novamente. Vamos abri-las. Esse e aquele. Vou escolher essa animação e essa e/ou a distância para que elas fiquem fora do quadro. Você também pode personalizá-lo , se quiser, depende totalmente de você. Tudo bem Agora, o que temos é essa animação que, no final, essas duas que saem, podemos personalizá-la um pouco de forma a fazer, por exemplo, uma delas sair depois da outra assim. Podemos estendê-los um pouco porque podem ser um pouco curtos demais. Também podemos dar a eles um pouco também podemos facilitar a entrada. OK. Agora veja o que temos agora. Está bem? Então você tem essa animação, você recebe essa mensagem, você a exclui, você recebe essas mensagens, você as exclui, e então ela se repete, mas você não sente que ela Todo o segredo está no fato de que você está fazendo o último quadro aqui se pareça exatamente com o primeiro quadro. A maneira como fizemos isso é muito fácil. Simplesmente fizemos com que todas as molduras, todos os elementos, os elementos variáveis desaparecessem. Agora não há nada, e então voltamos à estaca zero, recebemos essa mensagem, a excluímos, recebemos essas mensagens, as excluímos e depois voltamos. Esse é realmente o segredo. Quero dizer, realmente não importa o que você faz aqui no meio. Tudo isso é irrelevante, desde que você, no final, tenha certeza de que os quadros finais sejam iguais aos quadros iniciais Agora, muitas vezes, se você tem um vídeo, se você está fazendo um vídeo real, não um gráfico em movimento, a maneira de fazer isso é pegar o vídeo, colocar o início do vídeo aqui e depois a continuação no início Dessa forma, o vídeo começa aqui e, quando você chegar ao final, ele será reproduzido sem problemas Está bem? Mas isso é falar como se você tivesse um vídeo. Mas neste caso, no Fegma, não estamos lidando com um vídeo, estamos lidando com um gráfico em movimento Está bem? Portanto, não importa quais cores você tenha, quais animações você tenha aqui, desde que no final aqui, você tenha o mesmo quadro Então, ilustre isso um pouco mais quando chegarmos aqui e obtivermos esse plano de fundo, eu estou escolhendo o plano de fundo Agora, podemos dar a isso uma animação da opacidade, certo? Assim, podemos fazer com que desapareça. Então, como isso acontece? Vamos fazer com que desapareça e vamos trazê-lo para cá E vamos deixar o fundo preto. E quando chegarmos a essa animação de desvanecimento, vamos torná-la 20%. Está bem? Então, veja o que vai acontecer agora e vamos fazer assim. Então, logo que você receber a mensagem, ela ficará escura, como se você estivesse se concentrando na mensagem. E podemos seguir em frente e, você sabe, personalizá-lo também. Assim. Mas o mais importante, quando você chegar ao final, você pode trazer essa animação , colá-la aqui, e então vamos fazê-la desaparecer e depois voltaremos a 100% E podemos colocar isso no final . Agora veja como está. Bem, isso não foi muito bom por algum motivo. Então, vamos voltar aqui e dizer: fade em quantidade 100% Quem parece estar tendo um problema. Então, vamos tentar personalizá-lo, e ele vai dizer começar em zero e depois terminar em 100, então agora está funcionando. Então, agora veja isso. Então, como você pode ver, não parece que haja um final e um começo e outros enfeites Mas, nesse caso, pode ficar claro porque colocamos a opacidade apenas aqui no começo, Então, o que poderíamos fazer sobre isso, também poderíamos copiar esse efeito, trazê-lo aqui. E quando deletamos essa mensagem por aqui, podemos fazer o oposto. Podemos fazer com que, você sabe, personalize de 0 a 100% e traga assim E então também poderíamos ter o fade out por aqui. Então, agora vamos ver. Mais cedo, e também podemos fazer isso um pouco mais cedo. Como você está excluindo as mensagens, tudo bem. Então, como você pode ver, fizemos isso de uma certa forma em que não parece que o vídeo está em loop, mas, na verdade, está em Isso é exatamente o que você quer fazer às vezes. Agora, vamos discutir os benefícios. Por que você faria isso? Uma coisa é suavizar, você quer ser suave e talvez seu objetivo seja repetir o vídeo Há diferentes motivos pelos quais você pode querer repetir um vídeo. Agora, quando você está no TikTok, você está no Instagram em qualquer uma dessas plataformas em que elas têm uma função de loop Um dos motivos é que você quer que as pessoas assistam ao vídeo repetidamente. Talvez sem perceber, talvez percebendo, mas conseguir mais visualizações, esse é um objetivo Outro objetivo é fazer um loop de um vídeo ou fazer com que o vídeo se repita várias vezes. Pode ser só um efeito. Você quer fazer com que pareça o dia da marmota, se você conhece o filme Você quer fazer parecer que esse dia nunca vai acabar. Ele continua se repetindo, repetindo e repetindo. Espero que tenha ajudado você alguma forma e que você tenha aprendido a criar vídeos em loop. Muito obrigado por ouvir, e nos vemos na próxima lição. 13. Usando quadros-chave: Então, nesta lição, vamos falar sobre quadros-chave. Um quadro-chave é essencialmente um ponto no tempo. Você pode pensar nisso como um ponto congelado no tempo em que seu quadro ou qualquer elemento selecionado está assumindo uma posição, opacidade, seja ela qual for Agora, quando se trata de quadros-chave, mais uma coisa à qual você precisa prestar atenção Se você não percebeu, ao alternar entre a guia de design ou o modo de design e o movimento, você obtém esses símbolos, esses pequenos quadrados que você obtém na maioria dos campos que possui E esses são o que chamamos de quadros-chave. Você já os viu aqui abaixo. E quando você clica em qualquer um deles em qualquer elemento, basicamente informa à Figma que gostaria de adicionar um quadro-chave dessa propriedade específica nesse específico Então, deixe-me mostrar o que isso significa. Agora, chegando a esse objeto, quando clico aqui, quando adiciono um quadro-chave, você pode ver o quadro-chave sendo E adiciona uma propriedade de animação, que é a escala. Então, não tínhamos isso antes. Tínhamos posição, tamanho, posição, posição e agora temos escala. Assim, podemos prosseguir e mudar diretamente a partir daqui, você pode ver um quadro-chave sendo criado Portanto, essa é outra maneira de usar quadros-chave diretamente desse painel que você já conhece, adora e usa todos os dias Portanto, lembre-se de que os quadros-chave não estão limitados a essa área Você não precisa apenas usar quadros-chave automáticos, mas também pode usar a função de quadros-chave aqui Então, vamos prosseguir e ativar quadros-chave automáticos a partir daqui Um clique vai ativá-lo. A maneira de fazer isso, vamos ao objeto aqui, deixe-me mostrar o que quero dizer sobre isso. No momento, já temos essa animação em andamento, esse é um conjunto de quadros-chave Normalmente, o quadro-chave está no início aqui e no final Então você pode ver aqui que a opacidade é algo aqui, e então a opacidade muda Mas não estamos falando sobre esse elemento. Estamos falando sobre o elemento aqui. Então, agora que o temos aqui, podemos seguir em frente e mudar alguma coisa, qualquer coisa sobre esse objeto. Então, podemos ir em frente e aumentá-lo. Quando fazemos isso, isso se torna um movimento registrado, um quadro-chave automático, se você quiser Você pode ver como está registrado e isso faz a diferença. Antes disso, não havia nenhum movimento. Então, o que podemos fazer neste caso, podemos vir aqui, pegar o objeto, podemos centralizá-lo, ou podemos simplesmente movê-lo um pouquinho e depois movê-lo para cima e depois mover a linha do tempo um pouco e depois movê-la de volta para baixo Então, agora vamos verificar como é. Então você viu isso. Eu subi e desci, e isso é basicamente o que fizemos. Agora, tudo o que vamos fazer, se vamos mudar o tamanho ou fazer alguma rotação, por exemplo, vamos ver se podemos fazer uma rotação como essa. Tudo será registrado como um quadro-chave e terá um efeito Agora, isso parece horrível. Isso não é algo que você queira fazer. Mas estou apenas mostrando as possibilidades do que você poderia estar fazendo. E se fôssemos copiar qualquer um desses elementos, vamos vir aqui e copiar um desses, eu vou copiar este, vou colocá-lo aqui, e vamos pegá-lo e remover todas as animações que ele tem E podemos tentar fazer com que seja puramente, você sabe, usar quadros-chave automáticos, ok Então, agora vamos iniciar o enquadramento automático das teclas. E vamos dizer, no início, isso vai estar aqui à esquerda. E depois de um tempo, ele virá aqui. E vamos ver com o que estamos trabalhando. Então está aqui. Você pode ver os quadros-chave aqui, certo? Então, digamos que eu queira largá-lo. Eu posso chegar ao primeiro quadro-chave e também colocá-lo na mesma direção ou no mesmo nível, quase Então você pode ver que estou recriando a animação semelhante que tínhamos, e então eu posso vir aqui Também posso adicionar o quadro-chave sozinho. Não preciso ter esse modo ativado. Eu posso escolher o quadro-chave aqui e posso dizer, e então ele sairá e irá para a esquerda Tudo bem? Então, vamos ver. Talvez devesse chegar um pouco mais cedo. Podemos mover os quadros-chave e trazê-los aqui. Então, quando tivermos isso, podemos clicar aqui e escolher o tipo de curva que gostaríamos de ter. Por exemplo, aqui tivemos um pequeno salto, se bem me lembro, então podemos fazer isso. Você vê isso? É muito parecido com a animação que tivemos aqui. Não é exatamente o mesmo. Esse não é o nosso objetivo. Mas eu só quero mostrar que você também pode fazer isso com esse tipo de quadros-chave, você sabe, porque é mais intuitivo É só mover a moldura, você sabe, colocar a moldura, mover a moldura para onde quiser levá-la. Como no começo, está aqui, depois você pega aqui e depois redimensiona, seja o que for E isso funciona. E vamos fazer a mesma coisa com o tamanho, certo? Eu vou torná-lo menor agora. Não sei se isso é bem pequeno. Tudo bem, podemos torná-lo um pouco menor. Então você pode ver que há uma pequena moldura aqui que se tornou largura. Eu vou trazê-lo aqui. Deixe-me te mostrar. Não queremos essa, vamos deletá-la e pegar essa aqui. Só vou torná-lo um pouquinho menor? Ok, agora, quando chegarmos aqui, começaremos a expandir. Você vai clicar aqui, você pode ver a animação de largura e então eu vou fazê-la expandir. Tudo bem Mas agora temos que mudar essa, a posição. Você pode navegar para a direita e para a esquerda para ir até o quadro mais próximo à direita ou à esquerda. Agora eu vim para o quadro-chave aqui, vou levá-lo para o meio Então eu vou chegar a esse quadro-chave aqui e também vou colocá-lo no meio Então, podemos escolher os dois e fazer com que entrem e saiam facilmente. Também podemos mudar isso. Vou facilitar um pouco mais essa facilidade. Relaxe um pouco mais, sim. E assim, recriamos essa primeira animação. Não é perfeito. Você pode ver isso no tamanho disso. Deixe-me torná-lo um pouco menor. Então você pode ver 72. Quando chegarmos aqui, eu também farei isso 72 ou 73. Ainda não está perfeito. Deixe-me ver. Vamos fazer com que seja 70 ou 69. Tudo bem E então eu venho aqui e faço isso também 69, e aí vamos nós. Então, desse jeito, você pode usar os quadros-chave automáticos ou simplesmente usar os quadros-chave sozinho para seguir em frente e fazer tudo um pouco mais manualmente Eu sei que parece que é trabalho manual, é trabalho manual, mas pode ficar muito mais fácil. E para pessoas que já têm alguma experiência em edição de vídeo, provavelmente é mais intuitivo e fácil de trabalhar com isso . Só para observar, você provavelmente não conseguirá ver esses quadros-chave, a menos que ative esse modo e já comece a mudar as coisas Caso contrário, quando você olha aqui para a opacidade, não consigo definir nenhum Mas aqui, eu já posso brincar com isso porque mudo a posição, mudo a largura e assim por diante. Apenas certifique-se de ter isso em mente ao tentar testar esse recurso. Muito obrigado por ouvir e nos vemos no próximo filho. 14. Erros comuns de design de movimento: Se você me perguntasse quais são os erros mais comuns de design de movimento que as pessoas cometem, especialmente os novatos, eu diria que há três erros principais aos quais você precisa prestar atenção Agora, é claro, há uma infinidade, um mar de erros diferentes que você pode cometer, mas eu só vou me concentrar neles agora, o primeiro erro e, para mim, é um pecado grave, porque acho que se você está no ramo de edição de vídeo, isso já deve ser básico Esses são os princípios básicos cruciais que eles já deveriam ter escrito: usar animações lineares Para mim, isso é pecado. Agora, deixe-me dizer o que quero dizer, mas já conversamos sobre isso. Ao fazer qualquer tipo de movimento como essa posição, movimento aqui, eu sempre recomendo que você use essas curvas e use a flexibilização, use molas e saltos e todas essas características diferentes, porque elas são feitas exatamente para esse propósito e são feitas para você seguir em frente e brincar E um dos maiores erros é seguir em frente e escolher o linear. São pouquíssimos casos em que linear faz muito sentido, mas muitas vezes não é a resposta. Agora, mudando isso para linear, você provavelmente pode ver o que quero dizer, comparando o primeiro, o de cima com o de baixo, você pode ver como o movimento é sem alma Parece robótico e, nesse caso, está parando e para, mas na verdade não para porque há outro movimento aqui Mas vamos remover esse por enquanto e você poderá ver como fica. Parece muito errado. Só para de repente. Não há mudança na velocidade, não há alegria. E com o outro, você tem um fluxo muito melhor de forma simples. Você vê como ela estimula, entra , relaxa e leva seu tempo e Vamos voltar. Eu não quero mais ver isso. Então esse é um dos maiores pecados que você pode cometer para mim é usar essas animações lineares Eles não têm caráter, não têm alma, não são divertidos e, na verdade, não transmitem Então, por favor, tente entender esses diferentes movimentos e movimentos, se você precisa fazer um salto ou se precisa entrar ou sair com facilidade , ou ambos Tente entender o que se adequa ao seu perfil de marca, o que se encaixa na funcionalidade ou no vídeo que você está fazendo melhor. Há um personagem diferente ou uma escolha estilística diferente para cada vídeo Então você só precisa entender isso e ter certeza de que está fazendo isso com intenção e não apenas aleatoriamente. Especialmente, mantenha-o consistente. Não continue mudando isso. Esse é um dos maiores erros. O segundo erro é não colocar camadas. Já falamos sobre camadas e como elas são cruciais na criação de design de movimento O que quero dizer com camadas é brincar com vários objetos diferentes, bem como inserir várias animações diferentes no Então, nós já vimos isso aqui no começo, e acho que demonstramos isso muito bem, mesmo que pudesse ser demonstrado ainda melhor, ok? E a maneira de mostrar isso para você é quando uma animação se abre assim, você pode ver que há várias coisas acontecendo. Então você pode ver que o tamanho já está mudando. Também há uma mudança de posição. Está se movendo para a esquerda, ou se movendo para a direita ou o que quer que seja. Mas há um movimento acontecendo ao mesmo tempo, o texto aqui está desaparecendo Não estava visível. Agora está visível. E sim, em geral, você tem várias coisas acontecendo ao mesmo tempo. Está bem? E vemos esse mesmo exemplo aqui novamente nesta parte. E a maneira como você vê isso é quando a primeira mensagem está subindo, a segunda mensagem está aparecendo, está chegando, então isso mostra que há algum tipo de interação É uma dança delicada de salsa ou tango ou qualquer outra dança que você queira fazer, mas é muito delicada, é muito boa, e as duas pessoas dançando precisam estar brincando juntas Isso é realmente o que faz um design de movimento ou gráfico em movimento. Isso faz com que ganhe vida porque parece que eles estão conversando um com o outro. Há na comunicação, uma bela linguagem que está acontecendo em que alguém canta: Ei, eu estou chegando, eu vou aparecer de vez em quando a mensagem acima sobe um pouco para que eles não se batam. É simplesmente perfeito. Simplesmente se harmoniza bem. O maior erro é não fazer isso. O maior erro é ter essas animações de aparência muito estática que não parecem harmonizadas Eles se sentem mais congelados, tímidos e animados Essa é a melhor maneira de descrevê-lo. Isso é o oposto de animação, outras palavras, você está tendo algo inanimado, não está se movendo Talvez nem esteja vivo, não esteja vivo. Está morto. Vá em frente e tente garantir que, ao criar o design de movimento, você preste atenção a todos os detalhes e coloque animações diferentes em cada objeto E dentro do mesmo cronograma. E agora, chegando ao último erro, último erro, na minha opinião, ao trabalhar com design de movimento, além de criar movimentos estranhos e outros enfeites, é não conseguir Você está assistindo seu design de movimento repetidamente e o revisando No final do dia, você pode estar inclinado a fazê-lo super rápido porque já viu tudo isso antes Você não lê mais as mensagens. Você tem algum texto. Você não lê mais porque pensa: Ei, eu já li isso, sei exatamente o que diz. E então você pode estar mais inclinado a fazer suas animações acontecerem muito rápido E isso é algo que talvez tenhamos feito nesta animação em particular, onde você pode ver que o texto está chegando super rápido e não temos tempo para lê-lo. Agora, muitas pessoas podem sentir a pressão de fazer isso especificamente para as mídias sociais porque entendem que, ok, as pessoas não têm períodos de atenção muito bons ou muito longos, mas essa não é a maneira certa de fazer isso, ok? Portanto, certifique-se de que, ao criar uma animação, você esteja dando ao espectador, ao leitor, tempo suficiente para ver as animações em toda a sua glória, toda a sua beleza, e poder ler textos e as pequenas notas e entender o que está acontecendo Caso contrário, você corre o risco de fazer demais. Você está movendo as coisas muito rápido. Há várias coisas acontecendo. A opacidade do plano de fundo está mudando e as mensagens estão entrando e saindo sendo excluídas e tudo Então, isso pode ser muito confuso. E pode levar seu espectador a um mundo onde ele não entende o que está acontecendo. Então, aprenda comigo, aprenda com nossos erros e tente garantir que seus espectadores tenham tempo suficiente para ver suas animações de forma pacífica, mas ao mesmo tempo, sem perder a atenção ou sem ficar perder a atenção ou Então você tem que ter um equilíbrio muito bom entre esses dois. Na minha opinião, você nunca conseguirá fazer todo mundo feliz. Mas certifique-se de que funcione para a maioria. Sim, essas são basicamente minha sugestão ou minha visão dos três maiores erros de design ou design de movimento que você poderia estar cometendo. Como eu disse, essa é minha opinião. Então pegue ou deixe. Você sabe, este é apenas um conselho para mim e tente mantê-lo em mente ao criar designs de movimento, para que você não pareça um novato, pareça um amador, ao mesmo tempo, para que você possa criar gráficos em movimento impactantes que as pessoas realmente gostem e que atraiam engajamento, visualizações e atenção das pessoas Muito obrigado por ouvir, e nos vemos na próxima vez. 15. Exportando como GIF, MP4, WebM e SVG: Tudo bem Então, agora que você terminou e terminou sua animação, você se sente muito orgulhoso dela. Mas agora você gostaria de dar um passo adiante e fazer a última etapa final, que é exportá-la para mostrá-la, porque, afinal de contas, se fizemos muitas dessas ótimas animações, queremos mostrá-las às pessoas Queremos fazer uso deles. Caso contrário, esse recurso do figma, todo esse modo de movimento, é completamente inútil. Então, boas notícias para você. Nós podemos exportá-lo, e é muito, muito fácil. Agora, pode não ser muito óbvio como você pode chegar lá, mas deixe-me explicar para você. E também explicarei as diferentes configurações de exportação necessárias para exportar a seu vídeo com a mais alta qualidade, mas também não com o maior tamanho de arquivo absoluto Então, vamos prosseguir e navegar até esse painel. A maneira de fazer isso é clicar no quadro que você deseja exportar. Então, você claramente não está exportando o arquivo inteiro. Você não está exportando vários quadros ao mesmo tempo. Você está exportando o quadro em que estava trabalhando, embora provavelmente possa exportá-lo de vários quadros, mas será apenas um vídeo separado Vamos ver o vídeo desse quadro. Você só vai escolhê-lo, você vai selecioná-lo. Então, enquanto você ainda estiver no modo figma motion, você vai rolar para baixo até Exportar e, em seguida, ele terá algumas opções para você Há animação e há estática. Pode parecer que a estática está vazia, mas não está. Você só precisa clicar no sinal de mais. Esse é o painel de exportação normal ou clássico qual você está acostumado. Você provavelmente sabe disso, pode exportá-lo como PNG, JPEG, SVG, PDF e assim por diante Mas estamos mais interessados na função de exportação animada. Aqui, é muito simplificado para a maioria das pessoas, o que eu realmente aprecio porque sempre me perco nesses detalhes das diferentes configurações de exportação e não sei como exportar meus vídeos da maneira mais otimizada. Portanto, o Figma torna isso muito fácil de entender e contornar Então, primeiro, ele perguntará: qual é o formato que você precisa? Existem formatos diferentes e, claro, isso depende do seu uso. Não sou especialista em vídeo, então não posso te dar todos os detalhes. Mas o formato mais usado é o MP4 Com esse formato, você não fará nada de errado Agora, o que posso dizer é que a web é mais adequada para a web. Mas é claro que acho que isso é mais adequado especificamente para um site, mas não tenho certeza disso. Isso pode ajudar você a ter tamanhos de arquivo menores, embora eu não tenha certeza. Agora, quando se trata de presentes, posso falar sobre isso. Você provavelmente conhece presentes. Você os usou e os usa nas redes sociais aqui e ali. E os presentes são de qualidade muito inferior. Normalmente, eles são compactados e deveriam estar sem áudio e, basicamente, não são as melhores experiências de visualização, digamos Não mostrará sua animação da melhor maneira, mas garantirá que o tamanho seja muito pequeno. E, como você pode ver, ele também tem taxas de quadros mais baixas. Obviamente, você pode explorá-lo com mais taxas de quadros, mas isso anula o propósito Então, o que eu recomendaria que você usasse, para simplificar, é o MP4 Se você tiver casos de uso específicos para os outros tipos de arquivo , experimente. A segunda coisa é o tamanho, você provavelmente sabe disso. Normalmente, você só faz um X, como em uma vez. Exporte-o exatamente no mesmo tamanho desse quadro. Mas se você disser que esse quadro é muito pequeno, eu quero que seja maior, então você faz dois X, ou você mesmo pode preenchê-lo, eu acredito. Parece que esse é um recurso profissional, mas lembre-se disso. Você também tem configurações de exportação diferentes. Então você tem 1080 14 42.160. Essas são configurações de exportação diferentes e estão relacionadas à qualidade. Então você tem HD, fol HD e assim por diante Agora, o que você poderia fazer é um X. Então, se você sabe que esse é o quadro que você deseja exportar, é basicamente uma tela de telefone, então deve ser mais do que suficiente Se você está preocupado com isso, você pode sair duas vezes ou escolher um tipo muito específico de qualidade. No momento, seguindo em frente, também temos qualidade. Agora, isso também foi feito para ser muito simples para você. Então, está definido como baixo, médio ou alto, e todo mundo vai dizer: Sim, eu quero a mais alta qualidade absoluta, mas você deve ter em mente que isso resultará em um tamanho de arquivo maior. Agora, para ser justo, dois MB não é muito grande. Acho que eles têm um método de compressão muito bom. Eles têm uma configuração muito boa. Isso é muito bom para alta qualidade, mas você deve ter em mente que este é um vídeo muito curto. Você também tem médio e, ao passar para médio, você pode ver que já economizamos 25% do tamanho. E se cairmos para baixo , economizamos mais da metade. Está bem? Então, de alto a baixo, economizamos mais da metade do tamanho do arquivo. Então você realmente precisa pensar sobre isso, embora eu não tenha certeza de qual é a diferença de qualidade. Claro, você tem taxa de quadros. Agora, a taxa de quadros está relacionada, se você não a conhece. É quantos quadros você tem por segundo. É isso que significa FPS. Normalmente, para mídias sociais, você tem 30 ou 25, 24, até onde eu sei. Se você estiver exportando algo para mídias sociais, não conseguirá obter seis TFPs não adianta fazer isso Mas se você quiser configurá-lo para pessoas em sites ou outros casos de uso, você pode realmente mostrá-lo como seis TFPs e depois ir em frente . Por que não? Lembre-se de que isso resultará em um tamanho de arquivo maior. Aumentamos 50% aqui, como você pode ver, você precisa ter uma conta profissional para isso. Se você fizer algo como 12 FPS, vai parecer um pouco instável ou, como você possa chamar, um pouco lento, mesmo que não esteja, então tenha isso em mente Agora, vamos tentar exportar isso. Eu gostaria de mostrar as diferenças entre a qualidade. Vamos seguir em frente e fazer isso. Então, um X e vamos fazer o alto. Eu também vou exportá-lo a preços baixos. E então eu gostaria de exportá-lo como presente. Agora vamos conferir o vídeo. Primeiro temos um X de altura. Isso deve parecer mais ou menos exatamente como nós o vimos. Como você pode ver, ele tem muitos quadros. É muito suave. Embora eu diria que a qualidade poderia ser melhor. Então, eu posso entender como exportá-lo como dois X. Agora vamos ver como parece baixo Já consigo ver que a qualidade da imagem é muito diferente. Quero dizer, se você olhar em segundo plano também, parece mais comprimido aqui Mas devo dizer que não é uma grande diferença entre alta e baixa. Agora, vamos conferir o presente. Então, como eu esperava, você sabe, o presente tem menos quadros por segundo, então você geralmente tem uma visão mais instável Mas, para ser justo, se você quiser mostrar isso para sua equipe, se você está mostrando um fluxo muito simples e não precisa ser tão complicado, eu não diria, você sabe, isso é muito ruim. É transmitir a ideia e, você sabe, eles podem ver o movimento geral. Não é uma qualidade muito incrível, mas, ei, está transmitindo a ideia. Agora, como última coisa, gostaria de testar a exportação dois X de altura e ver como fica Tudo bem, então vamos lá. Vamos ver os dois X de altura. Então eu posso ver que a imagem é um pouco mais nítida, definitivamente. Eu poderia dizer isso. Mas especialmente aqui nas partes escuras, sinto que ainda temos essa distorção aqui, qual eu realmente não gosto, mas também estou sendo muito, muito exigente com isso Mas eu digo, a qualidade que acabamos de obter parece muito melhor. Definitivamente, parece muito melhor com a versão two x, mas ela ainda está lá, não onde eu quero que esteja. E vamos ver o tamanho em termos de tamanho. São 3 megabytes que fazem sentido . É duplo. Mas é basicamente assim que você pode exportar seu trabalho para mostrá-lo, mostrá-lo a outras pessoas e compartilhá-lo com elas. Muito obrigado por ouvir, e nos vemos na próxima lição. 16. Animando um círculo de carregamento: Olá, bem-vindo a outra aula do curso Figma Motion Agora, nas lições anteriores, aprendemos muitas técnicas diferentes, muitas coisas diferentes ao usar painéis, ferramentas e recursos do Figma Motion E fizemos uma animação. Nós nos concentramos nisso, e era basicamente sobre receber mensagens. E nesta lição, falaremos sobre um tipo diferente de animação. Que é uma animação de carregamento. Agora, há muitas animações de carregamento, diferentes, mas vamos começar com uma muito simples que todos conhecemos , que é a animação giratória circular Agora, é claro, existem diferentes tipos para essa animação. Nem sempre é o mesmo. Posso ter estilos e cores diferentes, mas vamos tentar mantê-los mínimos e simples. A primeira coisa que vamos fazer é copiar e colar essa moldura, retirá-la e colocá-la de lado. Aqui mesmo. Agora, como você pode ver, quando abrimos esse quadro, já podemos ver que existem algumas animações configuradas para ele Então, para nos livrarmos deles, vamos até a camada. Vamos até o quadro e vamos verificar as diferentes camadas. Vamos manter a imagem. Vamos deletar tudo, tudo o que precisamos fazer é fazer uma animação de carregamento. Vou manter isso o mais simples possível. Agora, para criar uma animação circular giratória, vamos até o banco da elipse e seguramos a tecla Shift, vamos criar um círculo como esse e vamos colocá-lo Em vez de preenchê-lo, vamos dar em vez disso e você pode torná-lo um pouco mais grosso OK. Lá vamos nós. Agora temos uma linha do tempo vazia sem animações. Vamos clicar. Vamos recarregá-lo. Isso parece muito bom. Agora, vamos começar. Agora, para fazer isso funcionar, temos que dividi-lo. Não pode ser um círculo completo. O que vamos fazer é tocá-la, e vamos para o modo de design, e então vamos ver essa pequena peça aqui e vamos cortá-la. Você pode fazer qualquer peça. Se estiver cheio, pode ser metade de um. Podem ser três quartos. Depende realmente de você fazer algo assim. Eu vou fazer algo próximo a um quarto, 25%, e então o que vamos fazer é chegar ao derrame. Você pode ver que existem tipos diferentes, mas todos levam à mesma coisa. O que vou fazer de forma muito simples é clicar duas vezes nele e depois excluir esse ponto aqui. Tudo bem, agora temos essa peça aqui, e podemos começar a fazer nossa animação. Então, vamos chegar à nossa parte de movimento aqui e vamos fazer uma animação. Agora, isso pode ser uma animação giratória, mas há um problema Você provavelmente pode notar isso agora, que é que está girando de uma forma um tanto estranha, digamos, ok? Então está girando em torno de si mesmo. Mas, como você pode ver no centro, a âncora não está configurada corretamente Então, o que você quer fazer é ir frente e transformar isso em uma moldura. Queremos ampliar essa moldura e queremos ampliá-la como se fosse um círculo completo, não apenas uma parte O que vamos fazer é chegar a essa largura de peça, multiplicá-la por dois e fazer a mesma coisa aqui A maneira de fazer isso é colocar um asterisco e dois depois dele, Figma fará o cálculo para Então eu vou segurar isso e voltar para a seção de design, vou alinhá-lo na parte inferior. Certo, ok? Agora parece que há um círculo completo aqui. E agora, quando vamos ao painel de animação e adicionamos uma animação rotativa, veremos algo incrível ela girará como um círculo, ok Então, mesmo sem ter um círculo, nós o fizemos girar como se houvesse um círculo completo, mesmo que fosse apenas um quarto Portanto, é muito simples, muito fácil, mas aqui está o que você quer fazer. Talvez você queira estender um pouco a animação, e ela pode parecer muito lenta. Mas o que eu quero que você faça é ir até o painel de rotação. Você pode fazer isso no sentido horário e torná-lo 360. Então, aqui está o que vai acontecer. Só vai voltar para o mesmo lugar. Então venha aqui para facilitar o editor de curvas, e então eu quero que você o faça curvo, desse jeito Na verdade, eu pessoalmente até diminuiria isso um pouco e faria com que se curvasse de baixo para baixo. O que isso significa, se você ainda não descobriu, que é totalmente bom, não é fácil. Isso está facilitando a entrada O que acabei de fazer foi facilitar entrada e, em seguida, aqui vai ficar muito mais fácil. Vamos ver como fica. Muito bom, muito bom. Basicamente, é assim que muitos deles se parecem com essas coisas giratórias, círculos de carregamento Então, vamos ver como fica agora, acabei de encurtar. É muito mais rápido, o que eu gosto. Depois disso, agora que temos isso, podemos copiar e colar. Não o quadro inteiro, mas sim a animação rotativa. Vamos colocá-lo aqui, e então eu vou copiá-lo, colá-lo aqui e copiá-lo e colá-lo lá. Agora olhe. Ele simplesmente continua carregando. É muito simples, muito bom, muito arrumado. Se você quiser dar um passo adiante, o que talvez queira, o que você também pode fazer é adicionar um número. Por exemplo, vou adicionar 10%. Torne-o maior e eu vou colocá-lo bem no meio de toda a moldura. Voltando ao modo de design, bem no centro, agora também podemos dar um pouco de sombra. Temos 10% em andamento. Ok, legal. Como animamos isso Bem, não é a coisa mais fácil que devo dizer, mas há uma maneira de fazer isso. É um pouco complicado, então aperte o cinto. Mas, basicamente, o que você quer fazer é adicionar uma animação para isso, que é opacidade Então você quer que isso apareça, e então você quer que isso também desapareça. Então, vamos adicionar duas animações. Então, o primeiro é opacidade e, em vez de ser 500 milissegundos, podemos fazer E então vamos fazer outra animação de opacidade, mas essa vai ser um fade out, e também vai levar dez milissegundos. OK. Agora que temos isso, podemos ir em frente, copiar isso e colá-lo por aqui. Está bem? Então copie e cole, você pode vê-lo colado aqui, e então eu vou arrastá-lo aqui. OK. Agora que temos isso aqui, vou mudar para 23% E seria muito bom se também mantivéssemos todos eles centralizados Então, eu vou vir aqui e manter isso centrado também. Então, parece bom, mas vamos ter que centralizar os dois, então é perfeito. E agora veja como está. Está bem? Mas isso foi um pouco rápido demais, eu diria. Então, podemos estender isso ou podemos fazer outro. Vamos fazer outro. Então agora temos os 23% Estamos copiando, colando e vamos pegar isso aqui, e então vai se tornar 49% e depois vamos copiar Vai ser 83. Por fim, copie e cole. E vai precisar de 99. Tudo bem, então vamos ver como fica. Muito ruim. O motivo é que não sincronizamos as pontas com as partidas. Então, o que isso significa? Agora temos aqui um fim. Um deles desapareceu e depois o outro desapareceu. Agora temos que fazer exatamente a mesma coisa, mas pode ficar um pouco complicado Então, vamos vir aqui e adicionar o fade out aqui mesmo Então clique aqui e arraste-o até aqui. Então olhe. Há um desvanecimento aqui, uma seção muito pequena Obviamente, podemos tentar encurtá-lo ou removê-lo arrastando-o um pouco mais Você também pode fazer isso rolando para cima e depois ampliando. Você pode ver um pouco a lacuna. Agora vou preencher a lacuna. Como você pode ver, há um pequeno milissegundo lá. Tudo bem, agora que temos isso, só temos que sincronizar os outros, como eu disse. Agora vamos vir aqui, vamos trazer isso aqui. E vai afundá-lo. E o mesmo no final. Simplesmente se repete. Mas pode ser um pouco complicado porque eles são muito curtos. Você tem que tomar cuidado com isso, para ser honesto. Tudo bem. E, como sempre, amplie um pouco mais, aproxime isso um pouco mais. Lá vamos nós. Então, agora vamos testá-lo. Então, para este, ele não precisa desaparecer. Eu posso simplesmente ficar lá. Então, eu vou deletar isso. Para o último, pode ficar em 99%. Você pode dizer que ainda não está perfeito. Há alguns deles que ainda podemos melhorar. Por exemplo, o salto aqui, eu acredito, não foi tão ideal. E aí está. Não é perfeito, mas é uma boa animação de carregamento, e às vezes é tudo o que você precisa. E, claro, você pode estender o tempo aqui, para que ele permaneça em 99% e não se repita. E, claro, você pode continuar com eles. Então, como você pode ver, ele continua carregando com 99% e assim por diante. É basicamente assim que você pode fazer isso. É tão simples quanto isso, não muito complicado, e aí está. Na próxima lição, exploraremos um tipo diferente de animação, que é uma barra de carregamento. Também é semelhante, mas funciona de forma um pouco diferente, mas entendendo como isso funciona, não será tão difícil entender o outro. Então, nos vemos na próxima lição. 17. Avançado: animando uma janela de progresso: Na última lição, aprendemos como criar esses diferentes estados de carregamento, e um deles é esse círculo de carregamento. Nesta lição, aprenderemos um tipo diferente, que é uma barra de carregamento. Mas vamos projetar isso de forma diferente, não apenas pela aparência da animação, mas também tentando entender a experiência do usuário por trás dela e como ela pode ajudá-lo. Então, vou copiar e colar esse quadro exato mais uma vez e vou guardá-lo para não nos distrairmos E vamos começar. Então, vou transformar isso em um ponto de partida de fluxo. Vou configurá-lo aqui para que possamos vê-lo. Em seguida, vamos excluir esses elementos que criamos para que possamos começar do zero Tudo bem, agora que temos isso, vamos começar com nossa animação. O que eu gostaria de fazer, e vamos começar criando os recursos visuais para isso O que eu quero fazer é criar uma barra de progresso, uma barra de carregamento que vai da esquerda para a direita. Ao mesmo tempo, não quero que seja só isso. Em vez disso, quero que ele também forneça algumas informações e feedback extras ao usuário, informando em que estágio ele está e o que precisa ser feito ou o que está sendo feito atualmente nesse estágio e talvez fornecendo algumas informações ou instruções. Vamos mergulhar direto nisso, e então você entenderá o que quero dizer. Eu vou criar uma moldura, primeiro lugar, e vou colocá-la aqui. Vou torná-lo branco por enquanto, e depois vou torná-lo circular. Mas, na verdade, em vez de torná-lo completamente branco, que tal darmos um efeito de vidro, ok? Lá vamos nós. Esse é um efeito de vidro muito bom E o que eu adoro nisso é que você realmente não precisa trabalhar duro para isso. Eu já faço muitos efeitos diferentes para você, o que é muito bom. Então, agora e depois disso, queremos criar uma barra, ok? Existem diferentes maneiras de criar essas barras, mas vou criá-las com uma moldura mais uma vez. E eu vou dar para preencher. Também vou fazer com que tenha alguns cantos arredondados. Mas eu vou dar uma opacidade de 20%, ok? Então, vamos colocá-lo aqui. Ou vamos ver, talvez possamos torná-lo menor. Vou copiar, colar e colocar lá. Então, essa seria basicamente nossa barra de progresso, como você pode ver. E podemos nos perguntar se queremos colocá-lo no chão, se queremos colocá-lo no meio ou se queremos colocá-lo bem no meio, certo? Isso também pode ser um tipo diferente de carregamento. E também podemos pensar em como isso pode nos ajudar ou nos beneficiar de alguma forma. Também podemos estendê-lo até o fim. O que algumas pessoas fazem é torná-lo muito grosso ou grande ou qualquer outra coisa, assim. O que outras pessoas fazem é torná-lo muito, muito fino. Acho que a Apple faz isso, por exemplo, se voltarmos um pouco, também a deixamos bem fina assim. Eu gosto desse visual. Não é muito grosso Vamos tentar manter esse look aqui e eu vou colocá-los em uma moldura. Então, agora que temos isso, na verdade estamos ainda melhores, vou colar isso naquilo. Isso vai ser um quadro dentro desse quadro, e vamos dar 100% de opacidade, mas vamos fazer com que o preenchimento seja 10% e, dessa forma, podemos ver isso, ok E, claro, você não precisa torná-lo branco. Você também pode torná-lo azul ou qualquer outra cor que desejar, tudo bem. É só uma cor que eu escolhi por enquanto. Aí está. Azul é melhor. E vamos ver como ficaria se dermos a essa coisa toda um efeito de vidro. Pode ser um pouco exagerado para ser honesto com você, mas talvez possamos dar um golpe e torná-lo muito fino Faça o traço também 50%, 20%. Então, vou transformar isso em um layout automático, na verdade. Vou estendê-la e tornar a moldura dentro dela menor. Mas eu queria ter um recipiente de enchimento para a altura, queria encher apenas a altura. Então, neste caso, se eu decidir que é muito pequeno, posso torná-lo mais grosso sem problemas Agora, deixe-me dar uma olhada e ver como fica na tela do telefone. Isso parece muito melhor, um pouco mais grosso, para ser honesto, mas eu não estou muito feliz com esse azul Talvez o que pudéssemos fazer com ele seja dar um gradiente, talvez Isso também mostraria o progresso que está acontecendo. E vamos ver como fica. Parece muito melhor, mas ainda não está lá. Eu me pergunto se talvez pudéssemos dar um brilho. Mas, neste momento, estamos falando sobre detalhes e, para ser honesto, essa não é a coisa mais importante na qual você quer se concentrar, certo? Então, tenha isso em mente quando você estiver projetando algo assim, e eu vou criar esse conteúdo de clipe de noz, e então temos algum tipo de efeito de brilho acontecendo aqui Está bem? Isso é muito legal, muito bom. Vou até o copo aqui e vou pegar um pouco de gelo que nos ajudará a facilitar a leitura ou a clareza Eu só vou tentar configurar este globo para não exagerar OK. Isso parece muito bom. Isso parece muito bom. Vou adicionar um texto agora. Agora que temos um pouco de base, digamos agora podemos adicionar algum texto e falar sobre o que estamos fazendo aqui. Vou escrever um texto aqui e vou dizer transferindo dados. OK. Portanto, podemos centralizá-lo ou mantê-lo ao lado. Depende realmente de nós. Mas o que eu gostaria de fazer é copiar isso e colocá-lo um pouco de lado, torná-lo um pouco menor. Você sabe o que eu vou fazer de tudo isso um layout automático. OK. E vou tornar o espaçamento muito mais próximo e, especialmente, eles devem estar ainda mais próximos O que eu gostaria de acrescentar é adicionar um pouco de explicação. Mantenha o usuário informado. Eu quero que eles saibam o que está acontecendo? O que está acontecendo agora. Eu vou dizer que corrigir arquivos, 50%. OK. Portanto, isso serve para o usuário saiba o que está acontecendo nesse exato momento. Então, eu não estou falando sobre a coisa toda, sim, estamos transferindo dados sobre o que está acontecendo Estamos extraindo? Estamos colocando arquivos e arquivos zip? Estamos comprimindo-os? O que estamos fazendo exatamente? Isso é exatamente o que precisamos dizer ao usuário. Isso é uma coisa a ter em mente. Outra coisa a ter em mente é talvez adicionar um número. Podemos fazer isso copiando este texto, colando-o aqui e talvez adicionando-o no layout automático com este, colocando assim Mas em vez de ter um texto completo, você pode escrever apenas 10%. E então podemos centralizá-los assim. Mas, para ser sincero, não estou muito feliz com isso porque não é simétrico Um passo atrás. Você sabe o que? Vamos mantê-lo assim e eu vou colocá-lo de lado em vez disso. Vamos ver como está agora. Também ainda não estou muito feliz. Isso é um pouco melhor, mas ainda não está lá. Talvez tenha mais a ver com o espaçamento. Isso é um pouco melhor. Vamos ver se colocarmos para a esquerda ou para a direita? Sim, isso pode funcionar um pouco melhor para mim, para ser honesto. Tudo bem, agora isso parece bem legal. Vamos começar a animá-lo de verdade Então, vamos ao painel de animação ou ao painel de movimento, como você quiser chamá-lo. E nós vamos vir aqui e vamos fazer uma animação só para aparecer. Queremos que isso apareça ou que apareça na tela. Vou fazer uma pequena animação em escala e vou adicionar a essa animação de opacidade, e podemos dar a ela um pouco de animação de posição Então, vamos fazer a posição a partir da parte inferior. Vai ser muito pequeno, talvez 50. Vamos dar uma opacidade, diminuir, mas será muito breve e a escala ficará OK Isso parece muito bom, mas vamos fazer a escala 90%. E vamos escolher tudo isso e dar a eles esse tipo de flexibilização. Vamos fazer com que eles se acalmem muito. Isso parece muito bom. Isso parece muito legal, muito suave, ok? Podemos até mesmo seguir em frente, para ser honesto e dar um pouco de impulso, embora eu não esteja muito feliz com saltos e outros enfeites Vamos ver. Isso é bom. Eu gosto desse salto. E se fizermos isso com a posição também? Sim, isso também é bom. Agora, podemos reduzir a escala em posição para ser mais curta, para que seja uma animação mais rápida e, em seguida, você obtém a transferência de dados E em vez de começar aqui, vamos fazer com que comece com 5%. E em vez de corrigir arquivos, vou dizer preparar arquivos Tudo bem. Então, agora temos a transferência de dados, transferência de fotos e, em vez de os dados prepararem arquivos, vamos deixar isso claro E estamos apenas mantendo o mínimo no momento. E agora vamos começar a animar esses pequenos elementos Então, eu gostaria de começar com a própria barra de carregamento. Então, com a barra de carregamento, é bem simples. O que podemos fazer é dar a ele uma animação em tamanho ou escala. Se fizermos uma animação em escala, vamos ver como ficaria. É exatamente isso que queremos ser honestos. Isso vai ser redimensionado. Vamos torná-lo mais curto. Traga-o aqui. Recebemos esse pop-up e ele vai mais rápido, mas não tão rápido. Isso é muito bom. até facilitar um pouco mais, se quisermos, ou podemos facilitar a entrada. Não, mas eu gosto sem me distrair. Quando diminuir, haverá uma diferença com a porcentagem Está bem? Então, podemos tentar fazer isso de maneiras diferentes. Então, podemos fazer o mesmo truque que estávamos fazendo em termos de opacidade Então, assim como fizemos na última lição, vamos mudar a opacidade neste caso A maneira de fazer isso é basicamente descer aqui ou subir aqui e vamos fazer opacidade Está bem? Então, vamos fazer com que desapareça desse jeito OK. Mas em vez de demorar tanto, vamos fazer com que dure dez milissegundos. Vamos fazer com que seja um milissegundo. Mas, por algum motivo, isso não está acontecendo. Ok, isso é muito lento. Então, o que eu gostaria de fazer é diminuí-lo, então vou dar um milissegundo, que vai ser dez, e então você pode ver que vai desaparecer quase instantaneamente, e apenas como uma medida extra, apenas como uma medida extra, podemos ir em frente e fazer isso com o gráfico, e isso vai fazer com que ele desapareça ainda Está bem? Então, agora temos isso. E se copiarmos e colarmos esse elemento e o tornarmos 25%, ok? E então vamos seguir em frente e dar outra opacidade, mas ela vai desaparecer e também vai durar dez milissegundos e também vai Então, vamos ver como fica. Então, vamos mover esse fade para lá. Então, como você pode ver, não parece bom porque eles estão um embaixo do outro. Isso está criando mais ou menos um problema para nós, mas não é tão problemático, para ser honesto com você Vocês vão fazer isso juntos, e vão simplesmente colocá-los em uma moldura. Então, seleção de quadros, e então você vai colocá-los bem na frente um do outro, bem em cima um do outro e você vai colocar assim. Agora, chegaremos a esses números e garantiremos que estejam todos alinhados à direita E então vamos adicionar outro, e vamos chamá-lo de 64% E então vamos adicionar outro e chamá-lo de 80%, e então teremos 97% Eu não sei Estou apenas colocando alguns números aleatórios e depois vamos voltar aqui e vamos alinhá-los corretamente Veja como deve ser. Agora temos os primeiros alinhados aqui. Então vamos mudar isso, trazer isso para lá, isso para lá. Na verdade, isso também deveria estar aqui. Eles vão levar tudo um pouco mais longe. Tudo bem. Mudamos os títulos, mas na verdade não alteramos o conteúdo, então temos que cuidar disso. Estou apenas mudando o conteúdo agora. Então você não pode ver, mas muitas vezes você tem que fazer coisas às cegas. Basta clicar no que você deseja alterar. Você clica em Enter e, em seguida, pode alterar o texto. Agora vamos ver. É preciso. Vou apenas espaçar um pouco mais para que possamos nos divertir mais com eles. E então vamos tentar alinhá-los adequadamente, o que será um desafio O que podemos fazer é talvez eu possa cortá-la. Escolhendo isso, posso tentar cortá-lo, mas não corta. Você pode simplesmente arrastá-lo assim e alinhá-lo exatamente Isso só torna as coisas muito mais fáceis. Então, basta segurá-lo, trazê-lo e alinhá-lo exatamente abaixo dele, e pronto Agora, passando para a próxima vítima, segure-a e traga-a de volta. E então, para este, vamos fazer com que desapareça muito mais tarde ou nem desapareça. Tudo bem. Então, agora vamos ver. Ok, perfeito. Agora, parece funcionar. Só precisamos alterar o redimensionamento das animações para que elas também apareçam ao mesmo tempo Então, vamos ver. Então, este, por exemplo, temos esses 25%. Isso deve ser muito mais, então vamos dar uma quantidade ou até um pouco mais. Dê outra aqui. Parece bom. E o último aqui. Esse vai ser um pouco mais. Agora vamos dar uma olhada. Vamos ver como fica. O que eu talvez queira fazer é mover todos eles um pouco para trás, apenas para permitir que eles tenham sua animação antes que os números mudem. Agora, vamos ver como era antes. Acho que antes era melhor. Agora parece que está atrasado, mas dessa forma, é perfeito Ótimo. Agora que temos isso depois dessa animação, ela terminará. Agora, normalmente, eu recomendaria que você tivesse uma janela informando que todos os arquivos foram transferidos. Tudo está bem. Mas nem sempre é isso que as empresas fazem. Muitas vezes eles acabam dizendo qualquer coisa. O que vamos fazer é fazer isso. Vamos seguir os exemplos dessas empresas, mas apenas para manter esta lição curta. Agora vou escolher todo esse quadro e dar a ele as mesmas animações que tínhamos antes, mas todas elas serão invertidas de certa forma Então, vamos dar uma olhada. Em vez de aumentar a escala, ela se expandirá para fora. Em vez de desaparecer , vai desaparecer. E em vez de deslizar para dentro, vai deslizar para fora. E vamos trazer isso aqui. Vamos ver como fica. Ou nós o trazemos de volta. Lá vamos nós. Tudo bem. Agora, a única coisa que precisamos ajustar neste momento é a flexibilização, porque agora ela não está fazendo uma flexibilização muito eficiente de certa forma Então, vamos escolher todos eles e vamos dizer que é fácil. Em vez de relaxar, o que tivemos, talvez façamos o favor desta vez Vamos ver como fica, ou talvez possamos relaxar. Vamos ver como isso se parece. Parece um pouco melhor. Vou ver o que podemos fazer com a opacidade. Vamos tentar relaxar novamente. Eu acho que isso parece muito melhor. Tudo bem. Isso parece muito bom. Uma coisa que está faltando em nós, que é essa parte que nos diz o que está acontecendo neste momento. Eu gostaria de mudar isso um pouco, tornar isso um pouco melhor. A maneira que eu gostaria de fazer isso é vir aqui até esta caixa de texto e também emoldurá-la. Vou copiá-lo e colá-lo novamente, assim como fizemos antes, mas ainda não, vou fazer uma animação. Essa animação será basicamente opacidade. Então, vai desaparecer. Ele vai deslizar pela direita. Também vamos fazer com que seja mínimo. Vamos ver como está agora. Isso é muito bom. Vamos relaxar. A posição é um pouco demais. Eu vou fazer 20. Tudo bem. Isso parece muito bom. Então eu vou dizer o oposto. Exatamente o oposto. Copie, cole isso e eu vou fazer isso aqui quando ele se mover. Então, vamos colocar isso de volta aqui. Vamos colocar isso logo no começo. E então isso vai mudar aqui. Como eu disse, vai desaparecer e vai deslizar para fora e talvez esteja para a esquerda Vamos ver. Tudo bem. Então, acabamos de virar no canto superior esquerdo. Deve estar logo à esquerda. Tudo bem. E vamos ver como facilitar a entrada em vez de aliviar, se isso melhorar as coisas . Então, eu vou apenas torná-lo um forro. Sim, parece muito melhor, para ser honesto. Talvez esteja diminuindo demais, mas vamos ver. Talvez isso não estivesse bem. Talvez seja um pouco mais rápido. Ok, isso parece muito bom. Agora, o que vamos fazer é copiar esse arquivo e colá-lo e, em seguida, movê-lo para cá, colocá-lo um pouco antes. E vamos dar a ele um texto diferente. Então, primeiro estamos preparando arquivos e depois compactando arquivos e depois copiando e colando, mas não daqui, mas daqui. Então vamos movê-lo. Vamos colocá-lo aqui. Em seguida, vamos dizer transferência dados e, em seguida, aqui ele também fará alguma coisa Como eu disse, copie, cole e traga aqui, e então poderemos trazer esse fade um pouco para cá Na verdade, não queremos que eles se sobreponham, assim. Então, para a última animação, vamos trazê-la aqui. E vamos fazer com que desapareça aqui. Perfeito, sem mais nem menos. Em seguida, escreveremos finalizando. Agora, vamos ver como fica desde o início. Ok, realmente, muito, muito parecido com o que parece agora. Meu único problema com isso, para ser honesto, é que está indo um pouco rápido demais. Podemos tentar consertar isso, mas pode ser um pouco tarde demais para isso, mas vamos ver o que podemos fazer por enquanto. Tudo bem. Ok, então agora temos isso. Pode ser um pouco complicado navegar por tudo isso, mas tente não se preocupar muito com isso. Então, eu só vou trazê-los aqui. Então, vamos ver agora. Agradável. Ok, acho que isso pode ser suficiente. Vamos ver agora. Não é 100% consistente, e acho que temos um atraso no início, com certeza. Devemos começar a preparar os arquivos. Talvez queiramos corrigir isso um pouco. Isso não seria nada errado assim. Então esse é o resultado, e acho que fizemos um ótimo trabalho. A ideia é que estamos fazendo uma animação que não é apenas aleatória, não é apenas bonita, embora seja bonita, na minha opinião. Também é atencioso Ele também tem uma experiência de usuário adequada , um pensamento adequado. E isso é realmente o que torna algo tão rico em conteúdo, profundidade e inusabilidade E esse é o ponto principal. Então, espero que você tenha aprendido algo com isso, vá em frente e experimente mesmo, o que você pode inventar. Muito obrigado por ouvir, e nos vemos na próxima lição. 18. Projeto do curso: crie sua própria UI animada!: E agora é hora de você criar sua própria interface animada. Para este projeto de classe, você criará e animará uma pequena interface de usuário ou interação usando as técnicas que você aprendeu ao longo deste curso Você pode escolher qualquer tipo de interface ou animação para este projeto. Pode ser uma tela de aplicativo móvel, uma seção do site, um componente do painel ou uma simples animação da página de destino. A escolha é sua. Comece projetando sua interface de usuário e organizando suas camadas adequadamente. E então dê vida a ele usando animações relacionadas à posição, escala opacidade e certifique-se de usar o tempo e a flexibilização a seu favor para dar a ele uma aparência mais profissional e um pouco Agora, lembre-se, o objetivo aqui não é criar a animação mais complexa que já existiu. Em vez disso, tente criar uma animação limpa que melhore a experiência do usuário e, ao mesmo tempo permaneça intencional, suave e profissional Você terminou, exporte sua animação como presente ou vídeo e faça o upload para o projeto Guild. Junto com o vídeo, você pode incluir uma breve descrição sobre o que você fez, como você o criou, quais técnicas de movimento você usou para essa animação e como você acredita que essa experiência de usuário melhorou. 19. Parabéns! E depois?: Parabéns por concluir o curso. Agora você aprendeu como transformar o design estático da interface do usuário em algo mais interativo e intuitivo que melhora a experiência do usuário. Figma motion e o motion design em geral não têm como objetivo fazer as coisas se moverem e parecerem bonitas e brilhantes, embora isso seja uma grande vantagem, mas sim orientar o usuário, comunicar feedback e criar experiências que geralmente sejam agradáveis e experiências que geralmente sejam Ao continuar projetando e aprendendo, tente se concentrar nos aplicativos e sites que você usa diariamente e entender como eles usam e tiram proveito de animações que são atenciosas, intuitivas e intencionais de uma forma que oriente você como usuário e melhore E se você ainda não o fez, inscreva seus projetos na galeria de projetos Eu realmente adoraria ver que tipo de animações interativas criativas vocês criaram , como sempre. Se vocês gostaram desta aula, eu realmente agradeceria se deixassem um comentário Ter feedback de vocês sempre nos ajuda a melhorar e criar um conteúdo melhor para vocês no futuro, além de ajudar outros designers a descobrir nosso curso. Muito obrigado por se juntar a mim, e nos vemos na próxima aula.