Animações fáceis de Figma para se destacar nas redes sociais

1. Introdução aos cursos: Todos nós sabemos que o conteúdo é rei. No mundo de hoje, as pessoas são bombardeadas com toneladas de fotos, por exemplo, no Instagram Então, precisamos chamar a atenção deles. Precisamos de algo que interrompa o pergaminho e os mantenha engajados. É aqui que entram as animações e os vídeos. Como aprender isso? Bem, meu nome é Aga , sou designer e vou mostrar que não é tão difícil quanto você pensava. Nesta aula, vou guiá-lo por todo o processo passo a passo, para que você termine com pelo menos três animações prontas para uso que você pode postar na sua plataforma do Instagram como história do Instagram ou até mesmo uma postagem animada no Instagram E a boa notícia é que você não precisa se preocupar com efeitos posteriores ou outros, então isso requer um conhecimento de design. Com o Smart animate no Figma, podemos prototipar rapidamente ideias interessantes para nossas animações e, em seguida, podemos gravá-las e ter o arquivo pronto para publicar o que você quiser Então, você está pronto para começar sua jornada com animações? Vamos começar. 2. PROJETO DO CURSO : O que é o projeto da turma? Bem, você precisa enviar para o projeto da turma pelo menos uma das animações que faremos durante o curso Obviamente, se você quiser experimentar, se quiser fazer algo diferente, você é mais do que bem-vindo, lembre-se de enviar o projeto para esta seção. E o bom é que preparei um preço especial para as três primeiras pessoas Essas pessoas que apresentarem seu projeto primeiro receberão três consultas individuais comigo, que levarão meia hora Então, se você quiser discutir sobre sua carreira, sobre sua criatividade, sobre suas ideias, sobre minhas outras aulas sobre programação, sinta-se à vontade para ser rápido e enviar seu projeto o mais rápido possível na seção de projetos para aquelas pessoas que não conseguirão obter o preço Eu só queria dizer que é ótimo mostrar seu trabalho. É ótimo pedir feedback. Também os outros membros da comunidade. Então, eu o encorajo totalmente a fazer os exercícios e depois mostrar ao mundo o que você preparou. 3. Começando com o Figma: Tudo bem. Então, vamos entrar no Figma logo no primeiro exercício Mas antes disso, deixe-me falar rapidamente sobre os planos da Figma A boa notícia é que você não precisa fazer nenhum upgrade ou comprar uma assinatura. É totalmente normal usar o plano Figma gratuito, o starter, chamado starter, e será totalmente suficiente para nossos experimentos e também para nossos experimentos e também para exportar o Então, vamos agora mudar para o aplicativo Figma. Eu recomendo totalmente que você use o FGMA no aplicativo independente, não no navegador Porque pode haver alguns problemas com a instalação dos fundos externos. Acho que o aplicativo está mais otimizado, então definitivamente aproveite. Você pode baixar Figma Four Windows, você também pode baixar FMF MAC Você pode fazer isso no figma com. Então, estou mudando para o aplicativo que eu baixei atualmente. E o que você pode ver aqui é o estado em branco, digamos que eu tenha criado o projeto de equipe, mas isso não importa. O mais importante é criar o arquivo de design, não a placa Fike JM Mas é claro que você pode conferir o FikJM depois. É super legal. É o quadro branco Você pode usar para workshops, reuniões com outras pessoas on-line. É muito legal. Mas hoje, vamos nos concentrar em projetar no FIG Map, então precisamos clicar em Design. Arquivo. E o que podemos ver aqui é que podemos intitular nossos arquivos, por exemplo, para o exercício um. E vamos começar criando o primeiro quadro. Para meus propósitos, vou mudar para o arquivo que eu já criei e também peço que você o duplique Portanto, será mais fácil trabalharmos no arquivo que já tem alguns ativos, seria muito mais eficiente estar lá. Então, atualmente estou no meu arquivo Figma. E o que vou pedir que você faça é duplicar esse arquivo em seu espaço de trabalho Isso significa que você pode editar facilmente tudo o que quiser e que as alterações serão visíveis apenas para você. Então, somente para sua conta. Obviamente, se você quiser compartilhar esse arquivo com outras pessoas convide outros coautores ou colaboradores, eles também poderão editar Mas eu não quero tornar esse arquivo aberto para todos porque todos os projetos estarão aqui. Portanto, certifique-se de criar seu arquivo individual duplicando esse arquivo específico de mim. Então, depois de duplicar isso, estamos prontos para começar e criar nosso primeiro quadro Antes de entrarmos no primeiro exercício, na primeira etapa, vamos ver como serão as animações nas quais trabalharemos, tão básicas quanto para começar Então, estou clicando em play. Não se preocupe com, você sabe, nada do que estou fazendo aqui. Sim. Essa é a animação. Então você vê que algumas imagens estão girando. Eles também estão mudando suas posições. Então, vamos começar com isso. Preciso fechar o protótipo e estou no meu arquivo de design Você pode ver aqui que eu já criei todos os ativos para você. Você pode usá-lo facilmente para suas necessidades, e estamos prontos para criar nossa primeira moldura. Então, molduras como uma tela. É algo que você usa apenas como elemento principal para criar outros itens e depois exportar. Portanto, é algo como prancheta, se você estiver familiarizado com o Illustrator ou Então eu navego até o canto superior esquerdo da interface e vejo que há uma moldura. Então, quando eu clicar nele, verei que, à minha direita, tenho a lista de todos os formatos disponíveis que estão predefinidos para mim E o que me interessa particularmente são os formatos de mídia social, e estou procurando a história do Instagram porque vamos nos concentrar na história do Instagram. E quando clico nele, vejo que minha moldura foi criada. Eu posso mudar sua posição com muita facilidade. Então, uma vez dentro, posso começar a recriar o que já tenho aqui Então eu mudo a guia para design. E a primeira coisa que precisamos fazer é mudar a cor de fundo de amarelo, desculpe, de branco para amarelo. Então essa é a cor que eu já preparei para você. 4. Smart Animate: Vamos usar massivamente nas aulas o recurso de animação inteligente do Figma Isso significa que talvez eu use as definições que tirei do site, do site FIGMA, de que Smart animate procura camadas correspondentes, reconhece diferenças e anima camadas reconhece diferenças entre os quadros e o protótipo Pode parecer um pouco complicado para alguns de vocês que ainda não experimentaram , mas não se preocupem. Vou te mostrar tudo. Então, aproveitamos que a animação inteligente é inteligente e ela procura algumas diferenças Então, quando tivermos dois quadros e os conectarmos no modo protótipo, você verá o que acontecerá Então, vamos imaginar que temos um retângulo. Estou apenas desenhando um retângulo aqui. Pode ser vermelho assim como este. Obviamente, podemos centralizá-lo usando o recurso de alinhamento de itens OK. Está centralizado horizontalmente e está centralizado. Verticalmente. Tudo bem. Então, vamos copiar o mesmo elemento na minha moldura. Então, o que eu faço é clicar em Command C no Mac. Você pode clicar em Control C no PC. Esse é o retângulo Eu posso ver isso no painel esquerdo, que mostra todas as camadas que eu tenho. Então eu tenho meu retângulo copiado. Eu marco o quadro no qual quero colar esse retângulo e clico em Comando V ou Controle V para colar E você verá que ele terá a mesma posição. Então, vamos imaginar que eu gostaria de ter esse retângulo menor Então, estou mudando seu tamanho apenas arrastando sua altura. E eu quero animar esses dois quadros. Então, eu preciso clicar no primeiro. Mude a guia do design para o protótipo. Basta arrastar do ponto em que vejo o ícone de adição até o quadro que desejo combinar. E então a parte da interface responsável por definir a animação aparecerá. Então, o que eu posso ver aqui é que eu tenho a opção Animação inteligente do recurso de animação inteligente marcada Provavelmente, instantâneo seria o padrão, então você precisa clicar e mudar para animação inteligente. Você verá a demonstração dessa animação e cronometragem. Então, se tomarmos, por exemplo, 1 segundo, ou seja, 1.000 milissegundos, será um pouco mais longo Temos o Smart Animate. Então eu estou clicando aqui, vejo que o novo fluxo foi criado. Eu clico no ícone de reprodução e vejo minha animação. Bem, não está funcionando, não está se movendo porque precisamos clicar. Depois de clicar, vejo que a animação inteligente entra em ação. Então, o Smart Animate procura as diferenças, e a diferença entre esses dois quadros é a altura desse retângulo, certo Porque mudamos sua altura. Se tivermos um retângulo totalmente diferente e, por exemplo, gostaríamos de, você sabe, ter as animações desse retângulo para aquele, você verá que não funcionará assim porque esse retângulo cinza é um novo elemento que Então esse é o chamado retângulo dez, e ele não aparece no primeiro quadro Portanto, o Smart Animate procura apenas os mesmos objetos em dois quadros É por isso que procura camadas correspondentes, e o retângulo dez não é uma camada que corresponde ao primeiro quadro Se quisermos tê-lo também no primeiro quadro, basta copiá-lo e colá-lo no mesmo lugar, podemos, por exemplo, alterar sua altura e posição, e você verá o que acontecerá. Parece bom. Quero dizer, atraente, pelo menos para algo que podemos fazer em um minuto. E eu quero mostrar com este exercício que você pode experimentar muito com esse recurso porque é muito legal. Assim, você não precisa criar todos os estados da animação, apenas o de entrada e o final, e tudo, o que estiver entre os quadros, será feito automaticamente pela Figma Portanto, lembre-se de ter os objetos correspondentes. Isso é importante. E a outra coisa é que eu precisava clicar no quadro aqui, dois para começar a animação. E é assim que podemos mudar isso. Depois de clicar nele, nas configurações da animação, você verá que temos a opção de clique. Nós podemos mudar isso. E há várias opções. Eles são ótimos para simular os comportamentos de tocar ou alterar o curso no site, por exemplo, você tem o mouse enter, o mouse sai, mas também podemos fazer a transição automática de um quadro para outro escolhendo após Então, depois de algum tempo, o quadro será transferido para o próximo automaticamente claro que podemos mudar o curso para 0 segundos, então isso será feito instantaneamente. Temos a configuração inteligente da animação, o tempo e vamos ver o que acontecerá Depois que eu jogo, a animação começa. Então, é muito, muito bom, e podemos tirar proveito disso e configurar nosso vídeo, nossa animação de acordo. Tudo bem, então isso é algo muito, muito simples. Eu só queria explicar para você o que é o Smart Animate, como funciona Mas vamos voltar à animação que tenho aqui. Então, esse movimento das fotos, deixe-me remover os retângulos que eu tenho, e vamos começar 5. Primeiros passos com a animação no Figma: Então, vou pegar os itens, os elementos que eu tenho e os elementos que eu realmente criei para você. Preciso clicar no grupo e, em seguida, vejo que tenho molduras. Então você já reconheceu que a placa está emoldurada e temos fotos gratuitas. Eu posso marcá-los. Estou usando o shift. E com uma mudança, posso marcar uma lista mais longa de arquivos. Eu clico em Common C para copiá-los, depois colo na minha moldura e tenho fotos gratuitas. Eu acho que eles deveriam ser maiores. Então, deixe-me clicar em Shift. E com o shift, eu simplesmente não funciona assim. Oh, porque eles estão em molduras. Eles não são a imagem em si. Em cada quadro, temos uma foto. Tudo bem, então, para ampliar elementos que estão em molduras, precisamos usar a opção de link de escala Eu vou te mostrar como usá-lo. Portanto, você precisa clicar em K e pressionar a letra K no teclado. E você verá que as flechas mudaram. As flechas duplas. E quando eu clicar em Shift e começar a redimensionar o quadro, vou ver se ele mantém as proporções Também está marcado aqui. Se eu mudar para mover e começar , basta usar o botão de redimensionamento sem mudança Isso só me permitirá manipular a altura e a largura, mas elas não estarão conectadas, então elas não manterão as proporções que eu configurei Portanto, posso aumentá-lo com o k, um cíclico que muda aqui, à esquerda Então, deixe-me aumentá-lo um pouco e ver se está bem, talvez esse tamanho seja bom. E eu preciso mudar isso com a mesma coisa. Então, posso começar a redimensionar, mas queremos manter os mesmos tamanhos Então, talvez para tornar isso mais fácil de fazer, eu mude para cem 9.590, então eu posso simplesmente mudar esse tamanho e teremos os Ok, se eu clicar nela desta forma, você verá que a moldura está ampliada, mas a imagem que está dentro, não Então, provavelmente precisaremos alterá-lo também. E estamos quase prontos porque vejo que ele não preenche todo o quadro, então podemos clicar na imagem e ampliá-la um pouco Ah, sim, ótimo. Podemos navegar dentro do quadro e ver como ele está posicionado, mas estou satisfeito com este Ok, então vamos verificar se você tem tudo igual. Então, temos uma, duas e três fotos. Cada um está em uma moldura separada, e temos a história da moldura. Então, o que vamos fazer é empilhar tudo. Vou empilhar, por exemplo, essa imagem aqui. Vou verificar se está no centro. Vou empilhar essa imagem no mesmo lugar. Mas o que você precisa saber é que geralmente, se você colocar um elemento no outro elemento, que é uma moldura, a moldura pulará para dentro dela. E não queremos ter esse efeito. Então eu preciso pegá-lo e colocá-lo em outra camada. Portanto, ainda é um quadro separado. E eu tenho a foto, número um, e vai acontecer, a coisa que vai acontecer é na verdade a mesma. Mas eu não quero ter a primeira foto na frente. Então eu mudo isso. Este é meu ponto de entrada. Deixe-me remover essa moldura. O que é mais fácil de jogar com o Smart animate é criar o primeiro quadro finalizado e, em seguida, basta copiá-lo e colá-lo rapidamente Command C e Comm para Mac, e eu posso jogar com os dois quadros, na verdade são iguais Então, enquanto procuro esta folha de dicas, digamos, vejo que as imagens mudaram de posição Então, deixe-me tirar a foto três. E mude isso. Deixe-me clicar na primeira foto e alterá-la em algum lugar aqui, certo? Então, temos a posição desses elementos e vamos conectá-los na guia de protótipo Então, eu estou no protótipo. Eu apenas o arrasto. Clique em Navegar dois. Sim, isso é verdade, animação inteligente. Vamos ficar com isso por 1 segundo. Está tudo bem. Mas queremos ativá-lo depois de um atraso. Então, depois de 0 segundos, comece. Na verdade, temos que dar algo mais do que zero, mas um milissegundo, como nada Então, ainda está bom para nós. E vamos ver a animação. Agradável. Então, temos as imagens em movimento. Então, temos uma foto principal na frente e, em seguida, a outra aparecerá. Ok, então vamos fazer o outro passo, que é mudar a posição da imagem que está na parte superior e na parte inferior. Eu faço o mesmo, então eu apenas copio a moldura. E para manter a mesma posição, e eu vou, você sabe, mudá-la, você pode fazer assim. Você deve estar ciente de que, se arrastá-lo muito longe, ele sairá da moldura original. Então, se você quiser mantê-lo dentro de casa, basta colocá-lo aqui e ele será cortado Eu só vou te mostrar uma coisa. Se tivermos o conteúdo desse clipe ativado. Não mostrará tudo o que está fora da moldura. Mas uma vez que a desmarcarmos, ela será exibida assim Mas, para nossos propósitos, queremos que o conteúdo do clipe seja verificado. Tudo bem Então, também queremos girar essas imagens um pouco assim e, claro, mudar para o modo protótipo E sim, navegar é bom. Depois de um atraso, multa de um milissegundo. Animação inteligente. Ótimo. E vamos jogar Cool. O que também é interessante no painel de animação é que você pode alterar a dinâmica da animação, para que ela possa ser saltitante, por exemplo Vamos ver como isso afetará. Sim. Então você pode ver que essa imagem acabou de ser rebatida Oh, vamos guardá-lo apenas para adicionar algo novo. Talvez essa foto estivesse escondida assim. E o próximo movimento é tirar as fotos da parte superior e inferior para a posição central. Então, mais uma vez, eu copio e cola. E deixe-me trazer essa moldura para o topo. Oh, queríamos realmente manter o diferente. Então, se você quiser manter a diferente, basta mudar a posição da moldura, e ela fica na frente. Então, algo parecido. E, em seguida, precisamos criar um protótipo aqui. Se você não vê a opção, basta verificar se você mudou para o modo protótipo Tudo bem Então, eu estou arrastando, estou arrastando a seta, animação inteligente, talvez vamos mudar para Isso vai acontecer após um atraso, 1 segundo, um milissegundo, desculpe. Vamos ver. Atire. Sim, é assim. Muito bom. E queremos girá-lo. Então, a próxima coisa, copiar. Na verdade, fiz a cópia da barra de quadros anterior clicando nela e também clicando em Opção no Mac no Windows. Opção A. Arrastando, e eu estou copiando o terrível que eu sou que eu escolhi Portanto, temos a mesma moldura de antes. E agora estamos prontos para alterá-lo um pouco, então, por exemplo, podemos girá-lo E, claro, precisamos conectá-lo após um atraso de um milissegundo E vamos ver. Legal. Claro, você pode fazer mais com isso. Quero dizer, você pode, por exemplo, alterar seu tamanho, estamos no P três. Mas lembre-se de manter a escala se quiser alterar a moldura e as proporções da imagem que está dentro. Então, podemos fazer algo assim. E você pode adicionar texto. Por exemplo, Hello. Nada original aqui, mas sim, estou usando a fonte de teste de crescimento do Clash, e só me dê um segundo Eu vou entrar nisso. Você precisa baixá-lo e instalá-lo em seu sistema. Ok. Vamos tentar algo maior. Olá. Como você pode ver, o texto está dentro do quadro P três. Então é por isso que está mascarado. Mas quando o arrastarmos para fora daqui e o mantivermos no espaço geral do quadro sete, ele aparecerá assim. Então, temos olá. Podemos alterar seu preenchimento de cor usando o cursor de cor P. Estou clicando na cor que preparei para você, e temos um sinal de olá. Ok, vamos combinar o switch com o protótipo. Depois de um segundo de atraso, leite por segundo. O próximo. E vamos ver. Oh, eu precisava clicar nele. Sim, provavelmente, sim, deveria ser depois de um atraso. Sim. Então, é muito simples. Talvez você saiba, podemos fazer mais para torná-lo ainda melhor, mas eu queria te mostrar que, você sabe, em realmente , alguns minutos, podemos fazer algo que não requer habilidades de nós, habilidades avançadas. Seja no Figma, nas animações em geral. 6. Como criar a primeira animação: Tudo bem. Então, vamos verificar como é a animação que estamos buscando Estou clicando aqui na opção play, e é isso que você vê. Espero que você goste. Eu só queria mostrar que você também pode alterar o tamanho dessa janela porque eu não fiz isso antes. Então, mais uma vez, quando eu clicar em Reproduzir no fluxo, você verá a animação que vamos preparar. Espero que você também esteja animado. Tudo bem, então vamos recriar o efeito que temos. Primeiro de tudo, vamos pensar no que acabou de acontecer. Talvez possamos diminuir um pouco a animação, por exemplo, para 20 segundos, o que é um pouco longo, e ver o que está acontecendo. Portanto, a imagem está diminuindo e o texto, tanto na parte superior quanto na parte inferior, muda E podemos ver a quebra amarela ao redor. Então, o que precisamos fazer? Estou tirando uma nova moldura e uma história do Instagram. Temos a moldura pronta. Vamos fazer isso na parte inferior aqui e mudar o fundo para amarelo. Preencha, eu já tenho amarelo amarelo na cor do documento, então eu posso selecioná-lo. Minha moldura de história do Instagram está pronta. Obviamente, você pode mantê-lo , por exemplo, alterá-lo para guiar uma animação de milhões para torná-lo mais facilmente reconhecível para Obviamente, manter a ordem e os nomes próprios das camadas é muito importante. Não vou mostrar tudo aqui porque não é o assunto. Não é assunto de figma, mas acho que vale a pena manter as boas práticas, mesmo se você estiver experimentando Tudo bem, então temos a moldura e queremos usar a foto que temos. Então, vamos copiar o que está na moldura superior. Mas precisamos mudar isso um pouco. Então, estou clicando em K para dimensioná-lo um pouco e preenchê-lo até o quadro completo. Assim. E eu quero reduzi-lo para o próximo Então, com K, ainda assim, estou mudando o tamanho da imagem. Só estou analisando mais ou menos as proporções da animação. Sim, pode ser algo assim, e queremos centralizá-lo. Ótimo. Então, vamos conectar a comutação ao protótipo Escolhendo a animação inteligente. Talvez possamos mantê-lo em um clique. Temos 10 segundos. Tudo bem. Então, vamos clicar em Play e ver. Estou clicando e a imagem está diminuindo. Eu vejo algum espaço aqui. Vamos ver que tipo de animação é usada aqui gentilmente. Não me lembro qual usei aqui. Então, deixe-me verificar rapidamente. Você não terá as soluções aqui. Então, sim, gentil também. Então eu acho que precisávamos fazer isso porque há uma pequena mudança entre essas bordas. Então eu faço assim. Então, a moldura seria um pouco maior. Mas a foto seria assim. Tudo bem. Ótimo. E vamos mais uma vez. Eu clico e a imagem está diminuindo. Certo. É um pouco mais lento do que na versão original, mas não se preocupe, mudaremos o tempo depois Ok, então o próximo passo é o texto. E o que você precisa fazer é baixar o fundo clash grotesque É grátis. É de código aberto. Depois de navegar até o texto e clicar, o navegador deve estar aberto e você tem a opção de baixar clash grotesque Então, por exemplo, você pode testá-lo, mas não queremos fazer isso agora. Deixe-me dizer que sim, você precisa clicar nele e verificar se pode adicionar todos os ladrilhos de tudo porque eu acho que todo estilo é bom. E uma vez que marchamos com todos eles, você seleciona todos eles. Estou apenas verificando se você tem a opção de selecionar tudo de uma vez. Mas eu não vejo isso, infelizmente. Portanto, você precisa selecionar estilo por estilo e, em seguida, fazer o download da família. Depois de baixar a família, você precisa instalar os fundos. Se você já tem o aplicativo Figma, isso é ótimo. Mas se você não fizer isso, instale o aplicativo FDMA em vez de jogar com ele no navegador da web, caso contrário, pode haver alguns problemas com os fundos Além disso, o importante é verificar o agente Figma. Instalador. Portanto, este é o aplicativo que você também precisa baixar e instalar. Sim, você vê instaladores de fontes. Então, por favor, instale o instalador de fundos, graças a eles. Graças ao instalador, você poderá usar os fundos externos, não os fundos típicos do sistema, mas alguns fundos que você baixou dos fundos do Google ou de qualquer outra fonte. Portanto, vá para o Mac OS ou Windows, dependendo do seu sistema, e instale-o depois, na verdade, antes instalar nossos fundos, provavelmente seria melhor. Então, eu também estou pegando esse link e adicionarei esse link ao Figma Posso adicionar um link aqui. E, oh, por que isso não funciona. Por Sim, assim. Sim. E você também se diverte com o instalador. Ótimo. Então, por favor, faça isso. Instalação e instalador divertido da Figma. Tudo bem. Portanto, depois de instalar o fundo e verificar se ele é reconhecível pelo FGMA a partir do texto, você precisa E eu estou digitando um guia de talvez dois M, vamos nos ater ao texto que está em nosso exemplo Se você não tiver clash grotesque em sua lista, feche o aplicativo, feche o aplicativo Figma Instale o instalador de fontes da Figma. Verifique se a tarefa de clash grow está nos fundos do seu sistema e, em seguida, inicie o Figma novamente, e o fundo deve estar Normalmente, os problemas aparecem se você usa um navegador da Web ou talvez às vezes pense que a fonte já está instalada, mas não está, ou você não instalou esse instalador de fontes. Tudo bem, então eu tenho meu guia de texto para milhões. Quero aumentá-lo, então eu clico em K e apenas, você sabe, amplio Também quero mudar o preenchimento para vermelho e posso colocar o imposto em algum lugar. Vamos tentar com 160 talvez até 300. Sim, algo parecido. Então, o que está acontecendo aqui é que temos, por exemplo, texto em transição, desse jeito E o mesmo texto, eu o copiei com a opção com chave antiga E podemos ter um guia para curtir isso. Algo parecido. OK. Então, temos duas linhas de texto e vamos ver o que vai acontecer. Uma vez que eu mudo para o modo de protótipo e mudo a animação O texto simplesmente desaparece. É um pouco diferente do que eu te mostrei. Então, vamos voltar ao original. Então, o texto está aparecendo aqui. Como sabemos pela animação inteligente, precisamos ter os mesmos objetos Os objetos precisam combinar um com o outro, comparando os dois quadros. Então, como você pode ver, temos texto de ginástica, mas não o temos em nossos primeiros quadros. Então, vamos parar aqui por um tempo. Se quisermos que esse texto faça transições da esquerda para a direita e da direita para a esquerda, precisamos copiar exatamente os mesmos objetos e colocá-los no primeiro quadro Então, para facilitar a identificação desses objetos e molduras, vou renomeá-los Então, desculpe, esse é o segundo, certo? E esse deve ser o primeiro. Então, estou mudando os nomes das camadas e farei o mesmo com o texto. Então, este é o texto na parte superior, e isso está na parte inferior, e eu estou copiando dois dos objetos clicando no primeiro quadro. E eu estou apenas acompanhando. Então eu vejo o texto. E isso é ótimo. Então, vamos ver, por exemplo, com a tecla shift hold, eu mantenho pressionada a tecla shift para que o texto só possa ser transferido da esquerda para a direita e do eixo x. Portanto, se eu segurar a tecla shift, será mais fácil manter a mesma posição em termos da posição vertical e poderei rolá-la horizontalmente com Então, deixe-me fazer a transição. OK. E vejo que saiu do segundo quadro, certo? Esse é o segundo quadro e o texto que está fora dele. Então eu preciso corrigir isso. Ótimo. E, na verdade, não sei por que temos dois. Ah , desculpe, coloquei no quadro errado. Sim. Este é o primeiro, então preciso colocá-lo na guia superior do primeiro quadro. Espero que esteja claro para você. Então, temos o texto no primeiro quadro. Mudou de posição. Então, vamos ver como ficará. Desculpe, talvez eu o altere para Depois de um atraso, tenho 7.000 segundos. Podemos adicionar dois milissegundos e C. Sim. Parece o primeiro exercício o primeiro vídeo que mostrei , vamos voltar a ele Essas são as manifestações. Tudo bem. Bom. Então, podemos fazer o mesmo, mas precisamos mudar a posição. Deveria estar escondido. Sim. Então, precisamos levá-lo para a direita. Novamente, aconteceu que ele saiu do quadro, então precisamos colocá-lo no primeiro, e precisamos fazer com o texto inferior Então ele vai da direita para a esquerda, então eu preciso mudar sua posição. E, novamente, ele saiu, então eu preciso colocá-lo embaixo apenas para manter as mesmas ordens das camadas Vamos ver. Sim. Isso é exatamente o que eu queria alcançar. Então, estamos felizes que essa animação se pareça com a original que eu mostrei, e agora é hora de gravar essa animação para que depois possamos exportar esse vídeo e publicá-lo nas histórias do Instagram. Vamos ver como podemos fazer isso. 7. Usuários de Mac: como exportar animação como vídeo com o QuickTime: Ok, então como gravar a animação, como exportar o vídeo. Sou usuário de Mac, então isso simplifica um pouco as coisas porque não preciso instalar nenhum outro aplicativo externo. Então, se você usa Mac, vamos usar o Quick Tim. E para o usuário do Windows, eu recomendo fortemente usar a descrição do projeto da classe Lom Ida, você terá o link e também no Figma É muito bom porque o que eu gosto nessa ferramenta é que você pode gravar a parte da tela. Então, mais tarde, vou te mostrar como fazer isso. Mas agora vamos começar a gravar a tela para usuários de Mac. Então, gravação e Quicktime. Queremos registrar o tamanho específico das histórias do Instagram. Então, vamos ver como podemos fazer isso com o Quick Time. Então, estou descansando no QuickTime. E eu estou fazendo com a chave certa. Estou fazendo uma nova gravação de tela. E o que eu vejo é que eu já tenho um certo tamanho. Então eu posso clicar em gravar. Enquanto isso, também posso clicar na animação Bem, deixe-me parar de gravar. Porque vejo que eu tinha uma configuração diferente no meu protótipo Eu quero, quero dizer, a aba do protótipo. E o que eu gostaria de fazer é alterar as configurações. Então, eu não quero ter esse dispositivo, mas apenas o modo de apresentações, tudo bem Ótimo. Então, o que vou fazer é verificar se as proporções do quick time combinam com meus gráficos, se correspondem à minha animação. Vejo que deveria ser maior, estou tirando o tamanho real dos gráficos. OK. E eu posso gravá-lo. Mas, como você sabe, a animação já desapareceu porque foi reproduzida apenas uma vez. Então, o que podemos fazer é economizar o espaço fornecido, para que possamos clicar em gravar e parar e não nos preocupar com isso por enquanto. Mas precisamos definir algum tipo de atraso quando ativarmos o horário rápido. Precisamos ter algum tipo de atraso no início da animação. Então, deixe-me adicionar aqui um tempo maior, por exemplo, 4 segundos. OK. Então, fazendo uma nova gravação de tela , grave e eu estou reproduzindo a animação. Acho que deveria ser assim. E a animação é gravada. Vamos ver. Esse é o arquivo que foi gravado pelo Quicktime. Vamos jogar. Obviamente, essa é a parte da interface que também estávamos gravando. Eu estava mudando, mas a posição da janela está bem. Temos o vídeo pronto. Um bom recurso do QuickTime é que podemos cortar o vídeo para que possamos fazer a primeira parte Sim, acho que seria esse. E agora eu posso exportar o arquivo, então exportar o arquivo como 1.000 ADP está totalmente bem E podemos chamar esse guia de Milão, e eu o estou guardando. Esse arquivo, eu posso transferir para o meu celular e depois publicá-lo no Instagram. 8. Usuários do Windows: como exportar animação como Vdeo com o Loom: OK. Tudo bem, então eu tenho o Loom instalado como um aplicativo Eu recomendo fortemente que você faça isso porque é fácil. Acabei de abrir o loom e tenho a interface. O que posso fazer aqui é gravar para a tela ou para o tamanho personalizado, que é o mais importante para nós, pois precisamos ajustar o tamanho da gravação ao nosso protótipo Então, deixe-me primeiro o protótipo. E graças a isso, poderei personalizar o tamanho da área para a gravação. Sim, assim, e eu posso gravar essa parte da animação. Como você pode ver, faltam 3 segundos para que a tela seja gravada, e essa é a hora. Eu posso, é claro, parar com isso. E aqui meu tear será gerado. Eu posso baixar esse arquivo ou mantê-lo na nuvem. Mas vamos fazer isso mais uma vez. Talvez eu adicione um quadro adicional para facilitar o início da gravação, assim como um quadro inicial para que eu possa fornecê-lo com um clique, fluxo começará aqui e, após o atraso, poderá começar após 15 milissegundos Então, deixe-me o protótipo. Assim que eu clicar dentro, a animação começará. Então, novamente, estou procurando um tamanho personalizado de tear, comece a gravar OK. Estou desenhando o tamanho personalizado. Está tudo bem. Comece a gravar. Vou contar de três para um, e então eu posso clicar no protótipo e a animação está pronta Sim, eu mudo para essa conta para que você possa ver a opção de edição, aparar e costurar Isso é algo que você gostaria de usar e, em seguida, podemos cortar o vídeo Então, ele começará a partir da animação fornecida. E então você pode exportar o clipe, salvar o existente e depois exportá-lo, digamos que esteja concluído. E eu posso baixar o vídeo apenas clicando em mais ações e aqui baixar o vídeo. OK. 9. Como criar uma segunda animação – parte 2: Tudo bem. Então, vamos passar para o segundo exercício, que também será empolgante. Então, precisamos mudar para o Figma. Tudo bem, então estamos em Figma. E deixe-me apresentar a animação na qual vamos trabalhar agora. Como você pode ver, há muitas cores e muitas animações diferentes Estou muito feliz em te mostrar alguns truques. Então, como de costume, você tem todos os ativos criados e precisamos baixar e instalar um novo fundo. Este é o telefone que realmente pode ser baixado do G Road. Sim, da GM Road Desculpe, eu estava pensando se esse é o endereço certo, mas, sim. Então, Kina, e você precisa baixar esse fundo de telefone deste mercado Claro, você pode pagar por isso. Você também pode digitar zero. Se você quiser tê-lo gratuitamente, é gratuito para uso pessoal e comercial, o que é muito bom. Gosto muito desse tipo de fase, então fique à vontade para baixá-la. Em seguida, instale e verifique se funciona no Figma. Caso contrário, desligue o aplicativo Figma e inicie-o novamente. Às vezes eu tenho esses problemas, então eu estou apenas, você sabe, dando essa dica para você. Temos um conjunto de cores e também esse ícone, que vamos usar em algumas molduras. Tudo bem. Então, vamos começar. Você já sabe como começar. Precisamos usar o design de molduras e criar a história do Instagram. Modelo. Para seu preenchimento, usaremos o plano de fundo básico. E só para conferir, temos dicas para criativos. Então, eu estou fazendo esse texto com dicas Yakhina. Eu já o escolhi na minha lista da lista de fundos. Vamos torná-lo maior com K. Tips. Veremos se é criado. Não me lembro como dividi essa palavra. Vamos ver. Criativos. Sim. Acho que esse tamanho está bom, e queremos agrupá-los e ter os mesmos espaços entre todos eles, para que possamos usar o espaçamento vertical distribuído Oh, eu não sei. Não parece. É o mesmo. Então faça isso mais uma vez. Vou pegar essa moldura só para tê-la da mesma forma. Vejo que os fundos deveriam ser maiores, então eu os torno um pouco maiores para quatro criativos Deixe-me verificar qual fundo usei para fins de demonstração. É médio, está bem. Tudo bem. Seria algo assim. Criativos e vamos arrumar um pouco. Tudo bem. Acho que achamos que as quatro dicas são um pouco maiores aqui. Então, sim, vamos fazer algo assim. Então a composição está boa, mais ou menos. E o que podemos fazer aqui é criar um componente. Então, sempre que decidirmos que não sei, queremos aumentar essa diversão, ela mudará em todas as instâncias desse componente. Então, vamos criar o componente primeiro e você verá o que quero dizer. Eu seleciono todos os itens que precisam estar no componente e, em seguida, você pode fazer isso rapidamente com esse componente concreto. E podemos chamá-la de seção de dicas, por exemplo, e uma vez que eu copio, você sabe, o quadro para as próximas etapas da animação. Mas, enquanto isso, decidirei que, na verdade, esses fundos deveriam ser maiores Eu posso, você sabe, ter uma influência no meu componente, posso mudar alguma coisa no meu componente, e isso se refletirá em todas as instâncias desse componente. Então eu acho que isso é muito útil, especialmente se você está experimentando muito. E, em geral, manter itens repetitivos em componentes no Figma é Tudo bem, então eu tenho dicas para criativos. Eu posso remover essas molduras por enquanto. Quero copiar o ícone da seta e torná-lo um pouco maior. Tudo bem. Então, temos dicas para criativos. E, como você lembra da animação, temos várias faixas coloridas de combustível que aparecerão em vários sites Então, precisamos criar as listras, e eu faço isso com uma moldura, então clico na moldura e vou desenhá-la, mas cuidado Isso está acontecendo dentro do componente, então precisamos arrastá-lo e retirá-lo do componente. Vamos verificar a altura porque depois essas listras cobrirão o texto Então, vamos torná-lo um pouco maior, então eu vou dizer 180. E queremos preencher esse quadro com uma cor. A primeira cor será a amarela, essa. Você também pode conferir aqui. Você pode usar o seletor de cores e queremos torná-lo arredondado Então, aqui, podemos pegar 100, por exemplo, para ver se está bonito, é totalmente arredondado. Então, temos a primeira faixa. Mas temos que replicá-lo para obter mais itens. Então, temos outro, o azul. Deve estar dentro desse quadro. Vamos renomeá-lo para Dicas para criativos e mudar a cor para azul Estou clicando nela e com a tecla antiga ou de opção, e precisamos mudar a cor para rosa, certo. Novamente, alterando a adição ao quadro. Podemos chamá-lo de rosa. Este, podemos chamá-lo de azul e amarelo. Tudo bem. E acho que seria o último. O verde. Sim. OK. Ah, não. Na verdade, não é o último, desculpe. É laranja, certo. E o último estaria em algum lugar aqui. Será verde. Então esse é o estágio da animação, um estágio. Mas, na verdade, é o meio. Então, queremos ter o ponto de partida. Vai ficar assim. Eu vou copiá-lo. Então, todas essas molduras estariam escondidas. Certifique-se de que eles ainda permaneçam na moldura. A propósito, eu não o renomeei. Desculpe por isso. Tudo bem. Então, estamos fazendo um protótipo. Não, esse também. Desculpe. OK. Certo? E essa seria uma das etapas posteriores da animação. E vamos copiar. Vamos copiar. Tudo bem. Tão amarelo. Amarelo. Vou mudar para o design. amarelo aparecerá. A próxima etapa. Qual é o próximo. Deveria ser quatro, então o azul, certo? Certifique-se de que você está, você sabe, editando o quadro apropriado. OK. Então azul, depois rosa, eu acho, ou é rosa. Está aqui. E a próxima etapa é verde. Laranja. Desculpe. Desculpe. Sim. É laranja. Obviamente, para ter mais e melhor conteúdo organizado, recomendo fortemente que você renomeie os quadros 10. Como criar uma segunda animação – parte 1: Tudo bem. Então, acho que podemos tentar conectá-los no protótipo e ver como será a animação Tudo bem. Animação inteligente. Eu o manteria curto, então talvez 600 milissegundos. Após o atraso, vamos fazer isso muito rápido, 50 milissegundos, e vamos fazer o mesmo com o outro. Na verdade, podemos fazer isso em massa Então, estou apenas combinando e depois selecionarei. Mãe, hmm. Vou selecionar todas as setas com shift E então eu posso mudar, desculpe, não este, mas aqui, após um mas aqui, atraso, 50 milissegundos, certo? Está correto. E vamos ver. Legal. Vou usar este para recriar o último porque vi que havia algumas inconsistências, me dê Estamos pegando o verde do número sete. Mudando para o design para que eu possa alterar seu comprimento. E acho que seria melhor torná-lo mais dinâmico. Isso é o que eu vi. Mas vamos dizer isso mais uma vez. Sim. Precisamos esperar um pouco mais pelo rosa. Eu não sei por quê. Então, esse é um para o rosa. Oh, porque não mudou para 50 milissegundos e provavelmente o mesmo com este Às vezes, essa edição em massa não funciona muito bem. Tudo bem. E vamos ver. Bom. No geral, pode ser mais rápido. Então, talvez não 600, mas 400. Vamos fazer isso pelos diferentes. Sim. E vamos ver. Sim. É mais dinâmico. É. O quadro seguinte foi que a flecha girou. Também podemos virar o Ron, mas também havia algumas outras listras Então, eu recomendaria fazer algo assim, porque se mudarmos a preocupação, eu preciso ir para a zona. Na parte inferior completa, abordaremos o mundo das dicas. Então, eu colocaria o texto das dicas, colado da mesma forma Para fazer essa transição suave entre os quadros. Não podemos fazer animação inteligente desta vez, mas apenas conexão instantânea Portanto, não é uma animação inteligente, mas instantânea aqui, e pode ser bem rápida Então, não com um clique, mas depois de um milissegundo, e copiamos este porque queremos fazer um novo Então, gosto de dicas, certo? Só estou verificando se sim, dicas vão estar no Oh, como você pode ver, não consegui cobrir o texto aqui também. Então, espero que possamos adicionar o componente, o componente principal, para que essas letras possam ser um pouco menores, por exemplo, assim E isso mudou alguma coisa? E eu acho que nessa situação, eu diria um pouco, sim, porque esta é a segunda linha. Então eu coloquei um pouco por dois, três pixels. Quatro. Sim. E agora está escondido. Eu também preciso copiar este mais uma vez e colá-lo aqui para que suas posições sejam as mesmas, colando-o também e adicionando a conexão Então, conectando. E agora eu posso adicionar, desculpe, animação inteligente. Depois de um atraso de um milissegundo, veja. Sim. Bom. E depois disso eu quero que essa seta mostre dicas. Outro que eu preciso conectar ao smart animate após um atraso, um milissegundo Mas, na verdade, pode ser mais rápido. E isso também, porque era muito longo. OK. E o que está acontecendo é que algumas palavras estão aparecendo, vamos ver. Isso pode ser feito de forma que estejamos cobrindo uma palavra e, em seguida, alterando o tamanho do retângulo que está cobrindo a Agora vamos criar as outras palavras. Então veja isso. Nós temos essa moldura. Mas precisamos abordar essas palavras. Então eu copiei o dirtungle, mas preciso colocá-lo na frente. Também copie o rosa. Preciso copiar esse azul e colá-lo novamente. Se você quiser torná-la a primeira camada, basta selecionar a moldura e colá-la. O mesmo acontece com o rosa , selecione a moldura e o texto é. E laranja também. Ótimo. Nas próximas etapas, vamos alterar a altura desse retângulo Então, diminuirá para quase zero. O mesmo com o rosa, o mesmo com o laranja , e nós entendemos. Ótimo. Agora podemos conectá-lo ao modo de protótipo, verificação e animação inteligente Talvez seja um pouco mais rápido. Ah, eu esqueci de mudar isso também. Depois de um atraso, o mesmo acontece com este. Após um atraso de milissegundos. E com esse. Depois de um atraso, um milissegundo. OK. Estou muito curioso sobre essa animação. Então, vamos ver. Legal. Mas eu acho que é muito rápido, certo? Deve ser um pouco mais lento. Deixe-me verificar esse. Então, talvez mudemos para 600. E seremos melhores. Você sabe, o tempo e a animação são muito importantes porque tudo gira em torno da experiência. Não queremos machucar nossos chapéus. OK. Então, vejo que há um problema aqui. Acho que é uma questão de aqui, temos animações inteligentes E na minha opinião, vamos ver se é bom. Vou adicionar mais tempo. Se quiser verificar algo, você pode adicionar mais tempo. E esse é o Smart Mate. E este também deve ser inteligente, Mate. OK. Então, vou verificar o que está acontecendo aqui. Vamos jogar mais uma vez. Isso parece bom. Isso também parece bom. Ok, então tivemos um problema, eu acho que depois desse quadro. T ou este. Porque eu não tenho certeza se essa moldura Esta moldura combina. Temos dicas aqui na parte superior. Mas as dicas dos dez dez quadros em um local diferente. Você tem que ter muito cuidado com isso. Claro, você sabe, tudo se resume a procurar erros ou lugares para melhorar. Então, sim, acho que precisamos mudar isso para instantâneo. Além disso, esse ícone deve ser o mesmo. E vamos ver se funciona. OK. Sim, é melhor. É definitivamente melhor. Ótimo. Então, temos dicas. Confira isso. E a última etapa da animação, a última etapa que fizemos. Oh, na verdade, é dar uma olhada neles. OK. Eu vou corrigir isso. Temos várias origens, mas, como você pode ver, elas mudarão imediatamente e haverá uma transição Talvez eu te mostre em mais tempo 2 segundos, digamos. Aí está a faixa redonda que vai de cima para baixo. Vamos fazer isso. 11. Como criar uma segunda animação – parte 3: Precisamos copiar essa moldura e adicionar uma nova moldura, o que seria uma pena. Vamos fazer com que essa moldura externa seja a faixa bash que aparece no texto Também deve estar perto dela. Legal. Pode ser mais longa, e a colocamos na moldura 14, fica assim, eu chamaria faixa. Então, por enquanto, podemos escondê-la Mas no próximo quadro, a melhor faixa vai até o fim. OK. Conectar. Só para mostrar por que adicionei essa melhor faixa forma que ela fique escondida na parte superior, e depois aparece porque queremos usar a animação inteligente aqui mais uma vez E entre esses quadros, porque não queremos, você sabe, adicionar essa faixa bash a todos os quadros anteriores, porque queremos ter as camadas correspondentes para que as camadas correspondentes a animação inteligente funcione Eu só quero ter uma transição que seja instantânea e que não precise combinar as camadas entre dois quadros. Tudo bem. Após o atraso, pode ser um, certo, e depois o próximo, Smart Animate. Podemos fazer com que seja um pouco mais longo. Vamos ver. Ah. Sim. Desculpe. Sim, esqueci de colocar entre as molduras acrescentar: “É depois de um atraso, então está tudo bem” Depois do atraso, está tudo bem. Eu precisava clicar em uma camada, então estou me perguntando. Depois de um atraso. Não sei por que esse fluxo apareceu. Acabei de remover esse fluxo. E para mim, esse deve ser mais longo, então vamos adicionar 2 segundos. Entendo. OK. OK. Então eu acho que este é o lugar onde temos After delay. Tudo deve funcionar aqui. Não sei por que preciso clicar. Talvez seja Bog ou algo assim. Espero que não. Aqui temos um clique. Desculpe. Portanto, precisamos mudar após um atraso de um milissegundo E há mais uma coisa que eu queria verificar, mas deixe-me lançá-la mais uma vez. Ok, isso parece legal. Queríamos ter a palavra “eles”. Portanto, também é uma boa prática criar componentes dessa palavra para ter mais flexibilidade porque, como você pode ver, eu queria alterá-los e, você sabe, como não é um componente, tive que alterá-los em três lugares em três quadros. Tudo bem. Então, agora vamos copiar esta última moldura e mudar a cor, simplesmente mudar a cor da faixa Então seria amarelo. Sim, bash stripe, bash stripe, transforma em amarelo Opa. Desculpe. Preciso marcar a faixa de bash. Sim. Verifique se você selecionou a moldura adequada. E, a propósito, vejo que é por causa das rodadas precisamos esticar um pouco Então, eu vou esticá-lo também. A melhor faixa. Deveria cair e isso também, certo? Então rosa, eu acho. E laranja e verde. OK. OK. Então, a última coisa que precisamos fazer é conectar o resto dos quadros, animar de forma inteligente Na verdade, não importa se é uma animação inteligente. Ele pode ser dissolvido porque nós simplesmente, você sabe, qualquer objeto não se move, certo? Não se trata de mudar de lugar, é de posição. Trata-se apenas de mudar a cor, então ela estaria apenas, você sabe, desaparecendo e desaparecendo. Podemos deixar 600 após o atraso. Um milissegundo. Eu faria o mesmo por todos eles. Depois de atraso após atraso. E depois de um atraso. Mas deveria ser 600. Sim. OK. Vamos ver o que temos. Ok, então este deve ser definitivamente mais rápido porque demoramos algum tempo após o atraso, talvez 200. Ok, acho que há mais um lugar. Temos que mudar isso para eles porque se escondermos essa faixa rosa Temos isso e agora temos DM e deve ficar tudo bem. É por isso que é melhor ter componentes, pois em tais situações, todas as edições serão replicadas em todos os outros quadros Tudo bem. Então, vamos verificar a animação. OK. Acho que ainda há um lugar. Este é o último quadro que temos. Aqui nós os temos ou talvez aquele. Sim. Espere por um segundo. Neste quadro 15, vamos esconder Bart e temos isso Então, precisamos dar uma olhada neles , nos esconder e usar mais uma vez o protótipo OK. Isso parece bom. Sim. Isso é legal, mas acho que precisamos esperar um pouco. Temos 2 segundos aqui, então vamos mudar para 200 e agora vai ficar bom. Oh, não, eu acho que é muito rápido. Definitivamente muito rápido. Então, talvez 1 segundo. E para isso 600 600 instantâneos 600. OK. A final final. Sim, acho que deveria ser mais rápido, na verdade. Vamos mudar para 300 e seria perfeito. OK. E agora, mais uma vez, podemos criar a gravação. Então, o que é importante aqui é que a primeira animação comece depois, eu não sei. Digamos que 5 segundos ou sete segundos. OK. Portanto, temos 400, mas precisamos copiar e alterar a conexão. Pode levar segundos de dissolução instantânea e estou adicionando novo registro de gravação de tela do Quick Time Player, e eu, foi bem rápido, certo? Então, deixe-me parar e verificar. Oh, precisamos mudar a posição inicial do fluxo porque ele começou a partir desse quadro, não daquele. E vamos fazer isso mais uma vez. Grave Bem, espere um pouco e ele começará a ser animado. Ok . Agora podemos pará-lo, cortá-lo e cortá-lo rapidamente Espero que você também tenha, como uma maneira simples de cortar o vídeo no Windows. Tudo bem. Ok, vamos cortar e exportar o arquivo E podemos mostrar isso no nosso Instagram. Claro, você pode refazer esse exemplo, fazer algo diferente, mudar as cores, mudar o texto. Este é um dos seus projetos de classe, então ficarei feliz em ver sua arte. 12. Como criar uma terceira animação – parte 1: Ok. Tudo bem Então, vamos para o terceiro exercício. Vamos para Figma. Mas antes, peço que você baixe a fonte ZT Chins. Portanto, o link deve estar na Figma que preparei para você. E também há alguns vídeos para baixar que vamos usar no exercício. Você, é claro, tem espaço para usar nos experimentos. E é hora de mostrar a vocês que vamos trabalhar. Então, estou começando a animação. Vamos. Ok. Então, como você pode ver, trata-se de mascarar o vídeo, que está nos dando novas oportunidades e novas ideias para apresentar nosso trabalho ou apresentar o trabalho de nossos clientes, tudo o que queremos fazer nas histórias do Insygram Então, vamos nos aprofundar no que está acontecendo aqui. Então, precisamos, como sempre, criar uma nova moldura, clicar na moldura, pegar a história do Insygram e usar a cor azul azul bebê Também temos o título ABC of Ceramics usando a fonte Zenz. ABC of ceramics, vamos experimentar a fonte de latas. Eu quero que seja fino e um pouco maior. Então, vou usar K para escalar. E acho que precisamos mudar a altura da linha para talvez essa. E eu também usei no exemplo, usei algumas variantes da fonte para o itálico para O e E e I e, eu acho Então, vamos brincar um pouco com isso. Estou indo para o meu arquivo, então eu marco C e uso itálico bem fino Talvez F, vamos ver se parece bom. Você sabe, só para brincar um pouco com a tipografia também. Algo parecido. Podemos torná-lo um pouco maior. E acho que talvez não seja super legível, então vou acender a luz Talvez você fosse melhor. Talvez R, sim, pareça bom. Ok, então temos o título, e o que está acontecendo aqui é que estamos adicionando vídeos. Preciso adicionar o vídeo. Deixe-me ir para a pasta com os vídeos e vou adicionar o primeiro. A primeira introdução Tudo bem E, por exemplo, eu o estou adicionando aqui. Se clicarmos no protótipo, nada acontecerá porque não há outra tela Então, vamos fazer outro apenas para nos conectarmos às telas. E o que você verá é que estamos ouvindo o som do vídeo, certo? E é jogado no protótipo. Portanto, é uma boa prática. Obviamente, dependendo do que você deseja fazer para silenciar o vídeo, você pode fazer isso ativando esse ícone Tudo bem Então, o vídeo é silenciado e precisamos criar a máscara Então, nossa máscara é um retângulo. Com os cantos arredondados. Vamos imaginar que essa é a nossa máscara, queremos arredondar os cantos. Meus únicos arredondamentos na parte superior e inferior permanecerão amostras como esta. Essa será a nossa máscara. Como fazer isso, precisamos ter uma forma e depois clicar e depois clicar em usar como máscara. Atualmente, é uma máscara, mas o vídeo não está mascarado. Então, precisamos pegá-lo, arrastá-lo e colocá-lo após a máscara dentro de seu grupo. Agora parece bom. Deixe-me ver como ficou. Ok, então era mais grosso. A máscara era maior, então podemos esticá-la um pouco. Mas também precisamos esticar o vídeo clicando em Shift para que ele possa ser mascarado corretamente. Ok. Então, estamos criando outra moldura e estamos alterando o tamanho da máscara. Então, precisamos ir para o retângulo. Talvez seja melhor renomeá-lo para mascarar. Então, estamos tentando manter a ordem. A máscara mudará, será menor e ambas. Talvez vamos fazer isso e ver como é o modo protótipo Claro, animação inteligente. Vamos ver. Agradável. Podemos prolongar um pouco para que você veja a diferença. Eu clico. E o que eu realmente gostei nessa técnica é que o vídeo está sendo reproduzido e a máscara está animada, então ela dá um efeito muito interessante Ok. Então, agora vamos criar o terceiro quadro. E vamos trocar a máscara. Então, podemos torná-lo menor. Além disso, também podemos mudar a dinâmica, como a animação inteligente funcionará, qual será a dinâmica da animação E eu sugiro que mude para rápido. Então, vamos nos conectar com o próximo. Vai ser rápido, certo. E vamos verificar. Eu gosto desse efeito de que essa máscara está saltando um pouco. Assim, podemos alterá-lo para depois de um atraso. Depois de 100 Meliscond, vamos ver. Legal. O próximo estágio é mudá-lo de retângulo com cantos arredondados para, na verdade, um círculo Então, é muito legal que ter uma máscara não signifique ter o mesmo formato o tempo todo. Então, podemos adicionar 500 na parte superior e inferior. Então, ele se tornará um círculo. E então essa máscara também pode mudar de posição, para que ela possa ir até o topo e ficar um pouco menor. Oh, na verdade, ficou menor na parte inferior. Mas vamos continuar assim. Vamos ver o que é mais interessante. O que parece melhor. Então, protótipo Podemos viver com um clique por enquanto e alterá-lo depois. Então, vamos ver. Ok. Definitivamente aqui. É rápido. Mas talvez eu mudasse essa posição. Eu mudaria a posição dessa máscara, por exemplo, para o topo, desse jeito. E isso seria menor, assim. E então podemos jogar novamente com a forma dessa máscara. Podemos fazer algo assim e depois ampliar pelos dois lados Espero que esteja no centro. Sim. Ok, agora temos que conectá-lo e ver como fica. Legal. Gosto disso quando o vídeo aumenta o zoom e, ao mesmo tempo, a máscara muda Ok, então podemos mudar para depois de um atraso. Por exemplo, este pode ser após 300 milissegundos. Após o atraso 200. E a seguir, teremos alguns itens de texto que aparecem. Então, vamos criá-lo rapidamente. Eu sou a moldura e estou, por exemplo, participando das aulas. E vamos mudar o texto para a fonte para inserir, talvez 50 ou 50 seja bom, mas eu mudaria para letras minúsculas. E como você pode ver, parecia um pequeno botão, como um elemento arredondado redondo. Assim, podemos enquadrá-lo clicando com o botão direito do mouse. Seleção da seção do quadro. Ok. E podemos adicionar um layout. Portanto, ele definirá dinamicamente a largura e a altura desse botão Se adicionarmos preenchimento, você verá que, você sabe, a margem, o espaçamento realmente dentro desse quadro é de 100 pixels, mas queremos mantê-lo não tão grande, E aqui eu guardaria 15, digamos, também arredondadas para os cantos. E eu mudaria para 40. Participe das aulas. Não me lembro da cor. Desculpe. Esqueci de prepará-los aqui. Então, é cinza e gentil. Participe das aulas. Toda terça, agora, eu estou mudando o texto. Eu posso usar o que você quiser. E para este, mudaremos a cor para este. E isso pode ser cinza. Talvez eu arrume tudo. Ok. E vamos ver. Na verdade, vamos voltar ao original porque eu queria verificar qual era a ideia por trás do texto? Então, como isso vai aparecer. Ok, então não importa porque o texto estava apenas aparecendo. Animação inteligente. Vamos ver o que vai acontecer. Vamos verificar. Ah, hein. 13. Como criar uma terceira animação – parte 2: Se você gostaria de fazer algo mais sofisticado. Podemos copiar o texto. Já está dentro da máscara, então também podemos colar nessa máscara e mudar sua posição. Claro, precisamos nos arrastar novamente para a máscara, então ela está aqui, certo? Está nessa máscara. E também corresponde ao próximo quadro. Então, tem um fato interessante . Sim. Eu gosto disso. E também na versão anterior, a original, adicionei outro vídeo para mostrar que, você sabe, podemos mixar os vídeos. Nós podemos mudá-los. Então, estou adicionando outro. E, por exemplo, eu posso colocá-lo na máscara e veremos o que vai acontecer. OK. Eu posso ver esse vídeo. Provavelmente não está conectado. OK. Então, mais uma coisa, precisamos conectá-lo, certo? Animação inteligente. Vamos fazer isso com um clique ou talvez depois de um atraso. OK. Vamos ver. Vou trazê-lo aqui rapidamente só para ver a mudança desses dois quadros. OK. Não é nada espetacular, digamos. Se você quiser que seja mais interessante, eu colocaria o mesmo vídeo aqui, mudaria sua posição. Mas sim, é algo que podemos deixar ou, ou. Podemos copiar essa moldura. Adicionado aqui. Quero dizer, a máscara inteira. Não é ruim, então podemos jogar um pouco. Também podemos fazer essa máscara. Entrando em mais área , ficando maior. Mas preste atenção para que seu vídeo seja recortado aqui, ele precisa estar na posição em que precisa ser alterado. Vamos ver como fica no protótipo. Não está conectado. Esqueça isso. Espere um segundo. Agradável. Eu gosto disso. Então eu acho que podemos fazer máscara ainda maior possa crescer assim, daquele jeito. E o vídeo pode ser como aqui. Vamos ver. Legal. Assim. Então, no final, podemos sair como um pequeno imposto curto. Esperando por você, algo pequeno que também adicionará um toque agradável ao toque visual. Podemos fazer com que seja super rápido. E altere após o atraso, altere todas as seções anteriores para após o atraso. OK. Ah, temos muitas, muitas molduras, mas acho que o fato parece barulho. Depois de um atraso. OK. Este é após um atraso, por exemplo, vamos começar o fluxo. Estou substituindo-o no primeiro quadro. OK. Legal. Eu realmente gosto disso. Espero que você goste também. Então, é claro, você pode usar os vídeos frontais se quiser, mas todos os dois vídeos na verdade estão na pasta da caixa suspensa. Então, agora, gravando com rapidez, pelo menos para o meu caso. E para este, vamos começar depois de 6 segundos. OK. Então, sua tarefa agora é criar o vídeo. Eu posso te ajudar rapidamente com uma coisa. Por favor, copie o primeiro quadro. Portanto, temos uma margem de tempo quando começamos a gravar a tela. Eu diria metade do segundo e do protótipo. Eu gostaria, vou começar aqui. Pré-visualização. Não sei por que a prévia simplesmente escapou do meu protótipo Mas eu adicionei um novo ponto de partida de fluxo. Então, vamos tentar gravá-lo. Estou clicando em Quick Time, nova gravação de tela. O protótipo, e está sendo animado. Incrível. OK. Esqueci de desligar o som do vídeo no último vídeo Então, deixe-me corrigir isso. Talvez você possa ouvir porque eu mudo e diminuo o volume. Mas depois de inserir o protótipo e clicar no vídeo, você verá que o som está ligado E vamos verificar também os quadros anteriores anteriores. Sim. Espero que sejam apenas três quadros Não é muito trabalho. OK. E estamos prontos. A animação deve estar pronta. Espero que você tenha gostado de brincar com máscaras e vídeos. É uma arma muito poderosa. Espero que você faça alguns experimentos, especialmente com essa abordagem com as técnicas, e quero ver todos eles no projeto da classe. 14. Bônus – outro tipo de animação: Também preparei um vídeo bônus, um tipo de animação bônus. Então, vamos ver do que se trata. Deixe-me mudar para o protótipo e jogar. Eu posso realmente criar o ponto de partida. Então você pode ver isso, e às vezes é a carga. E como você vê, temos o vídeo que está mascarado e também outro vídeo, e esta é a gravação de tela apenas da nota no meu mac E eu estou escrevendo algo, digitando algo. E eu acho que parece muito legal. E eu vi algumas histórias do Instagram e esse tipo de animação. Então eu acho que isso chama a atenção das pessoas porque elas querem ver o que você vai transmitir Qual é a sua mensagem? Então, como fazer isso. Bem, não é tão difícil. Na verdade, podemos ver o que está acontecendo nesse quadro. Então, temos várias molduras, como adesivos, certo? Então, deseje os adesivos criados em outras molduras. Então eu apenas, você sabe, adicionei algumas cores a ele. Se entrarmos, você verá que temos o texto e cada quadro tem um preenchimento diferente, uma cor de fundo diferente e também é arredondado. Então, temos alguns adesivos. Também outro com um sorriso. Mas acho que o mais interessante seriam os dois elementos. Então, o grupo que está mascarado. Portanto, temos um retângulo com cantos arredondados e, no interior, temos alguns grupos Na verdade, não precisa ser um grupo, não importa. É só um vídeo puro. Então, talvez me desculpe. Vou tirar esse vídeo desse grupo, para que fique mais claro. E como você vê, eu posso manipular com este vídeo, posso torná-lo menor Eu posso mudar sua posição. Depois de alternar para o modo protótipo, depois de executar a animação, você verá que o vídeo está sendo reproduzido E o mesmo acontece com essa nota, essa animação de digitação Temos um retângulo arredondado, pois vou mostrar que, você sabe, podemos mudar a forma dele facilmente Então, é arredondado e temos o vídeo que gravei usando o QuickTime no meu Mac Se você quiser recriá-lo, você sabe, basta mudar para o seu aplicativo de notas favorito no Mac, estou usando o QuickTime E escolhendo a nova gravação de tela. Claro, podemos mudar o tamanho dele assim. Eu posso mudar a posição, clicar em gravar e ir para as notas, e posso começar a digitar Meu dia foi terrível. Deixe-me compartilhar minha história com você. Seja o que for. Em seguida, basta salvar este vídeo. Ok, estou pronto para salvar o vídeo e exportá-lo. Essa resolução deve ser boa. Vamos adicioná-lo ao bônus. Vou chamá-lo de digitação. Tudo bem. Então, está sendo salvo. E eu posso adicionar rapidamente a nova moldura. Então, na história, posso adicionar um plano de fundo, posso criar um retângulo Vamos tentar com cores diferentes para que seja mais reconhecível, talvez maior Ok, então estou pronto para adicionar meu vídeo. Também já está aparado. Então, eu gravei apenas esta peça de escrita e anotações. Então, estou apenas arrastando e soltando o vídeo, e queremos mantê-lo nessa máscara Então, estou usando esse recurso como máscara. Você também pode usar os atalhos e meu vídeo é uma máscara, o que é ótimo Eu posso mudar um pouco o tamanho. Para fazer com que seja ajustado ao tamanho da máscara. Ou eu também posso fazer uma operação diferente. Eu posso me livrar da máscara. Assim, posso simplesmente pegar o vídeo, remover a máscara e alterar o preenchimento da cor do fundo para combinar com o preenchimento do vídeo. Então, temos esse efeito de toda a janela visível. Mas há uma sombra de outro item, eu acho, e um localizador Ainda assim, acho que seria melhor adicionar algum tipo de máscara Graças a ela, vamos cortar um pouco a sombra. Então isso é uma máscara e um gato. Parece melhor. Então, esse é todo o nosso quadro. E você pode adicionar outra, por exemplo, uma máscara arredondada. Então, precisamos retirá-lo do grupo de mascaramento existente, e talvez eu o agrupe e o coloque sob essa elipse E a essa elipse, posso adicionar outro vídeo me apresentando, por exemplo Eu já gravei isso. Então, estou tratando essa elipse como uma máscara. Bem, isso parece estranho. Mas, talvez. Talvez talvez talvez. E eu posso, é claro, mudar o tamanho do vídeo e também posso mudar a posição da máscara. Posso marcar duas dessas camadas, agrupá-las e colocar algumas em algum lugar aqui, dependendo do que você deseja alcançar. E vamos ver o que temos. Eu vou até o protótipo. Sim, este é na verdade um pouco maior. Então, eu queria te mostrar como é. Sim, é algo interessante, certo? Porque você vê o rosto de uma pessoa e vê uma mensagem. Então, para mim, está atraindo a atenção do usuário. É algo que me atrai. E acho que nas histórias do Instagram, esse tipo de conteúdo, esse tipo de animação pode ser valioso. E, claro, você pode adicionar, por exemplo, eu uso os adesivos aqui Então, eu apenas os copiei e colei para adicioná-los como algo mais colorido Mas a única coisa que você precisa saber é que atualmente estamos dentro do grupo de mascaramento, então queremos assumir o controle, dar uma olhada em nossa hierarquia de camadas E, novamente, podemos ver talvez vamos criar o ponto de partida baixo. Não temos interações aqui. Mas o que eu queria mostrar como bônus é que você também pode usar o protótipo do dispositivo, a moldura do dispositivo, que parece muito boa Então, por exemplo, P , ok, e isso seria algo assim. E aqui, você pode imaginar como seriam suas histórias do Instagram. Além disso, recomendo fortemente que você verifique essas configurações de protótipo, pois você pode jogar facilmente com vários planos de fundo Quer dizer, as várias simulações do dispositivo, até mesmo a cor do iPhone, que é um detalhe super pequeno Se você quiser ter algo legal seu portfólio ou apresentar seu trabalho na difusão de dispositivos móveis Você também pode usar a opção de gravá-lo, para eu também possa dedicar um tempo rápido e ajustá-lo para que eu possa gravar todo esse quadro com um celular dessa forma, e eu possa começar a gravar e teremos animações como essa Espero que você goste dessas aulas. Espero que você aprenda algo novo e mal posso esperar para ver seu projeto de aula. 15. Recapitulação: Então, vamos recapitular rapidamente o que você aprendeu e o que fez durante as aulas Então, primeiro de tudo, você já tem o conhecimento básico da interface FINMA Talvez você não saiba a fundo como fazer e onde estão todos os recursos, mas mais ou menos com meu exercício, você poderá criar algumas histórias no Instagram A segunda coisa é que você sabe que o Smart animate é um recurso muito legal do Figma porque ajuda você a animar o que quer que aconteça Então, por exemplo, se tivermos o quadro A e o B livre, tudo o que estiver entre eles será feito automaticamente pela Figma com base na comparação desses dois quadros Então, todos nós sabemos que o Smart Animate procura as diferenças e semelhanças em termos de camadas É por isso que, ao longo do curso, eu estava mostrando que, você sabe, a ordem das camadas é importante e, você sabe, duplicando alguns elementos De um determinado quadro para outro é importante. E também sabemos como criar componentes, o que é muito importante, especialmente quando você tem animações mais complexas, então não tenha medo disso E, claro, eu convido você totalmente a conferir outras aulas da FINMA E se você tiver alguns pedidos especiais meus para as futuras aulas, deixe-me saber na seção de comentários, ficarei muito feliz em conferir todos eles. Você também pode entrar em contato comigo no Instagram em h5d awesome ou pode verificar minha conta do Twitter, que é Agana Ploha Este é E espero ver você lá. Obrigado por participar, e estou mantendo os dedos cruzados para o seu projeto de classe. Só para lembrar, seu projeto de aula é recriar uma das animações que eu estava apresentando para você ou criar algo totalmente novo, com base nas técnicas que você estava aprendendo comigo Por favor, aplauda o trabalho que você preparou na seção de projetos de classe Você pode colar o link para o vídeo ou incorporar o vídeo Se você tiver alguma dúvida, é só me avisar. Então, primeiro, três pessoas que enviarão seus trabalhos nas seções de projetos de classe terão uma sessão individual exclusiva comigo, que ajudará em meia hora. Então, se você quiser falar sobre sua carreira ou talvez técnicas na Figma ou talvez sobre outras coisas relacionadas à codificação ou design, ficarei feliz em responder suas perguntas Então lembre-se, primeiro, pessoas livres, estou esperando por vocês, e espero que vocês se divirtam aproveitando o processo de criação das animações