Prototipagem avançada e design de interação no Figma para designers de UI/UX

1. Apresentação: Se você é designer de UX e deseja levar suas habilidades de design de interface de usuário para o próximo nível, dominando prototipagem e o design de interação , este curso é para você. Olá, meu nome é Arash e sou designer de UI UX. Também ensino UI UX Design na Universidade de Economia e Ciências Humanas em Varsóvia. Nos últimos anos, ajudei mais de 40.000 estudantes em todo o mundo a se tornarem designers e iniciarem suas carreiras de design. Percebi que muitos designers juniores gostam de habilidades de prototipagem e design de interação. Que são essenciais para qualquer projeto hoje em dia. É por isso que criei este curso prático de design a especificamente para ajudá-lo a aprender como criar protótipos e criar elementos interativos no Figma como um profissional. Começaremos com os conceitos básicos de prototipagem e animação, como o que é e por que é importante, como as animações são criadas no Figma e os diferentes tipos de animação de interface de usuário. Em seguida, passaremos para tópicos mais avançados e você aprenderá sobre as melhores práticas de prototipagem no Figma, como criar microinterações complexas e como tornar seus elementos de interface interativos. Além disso, criaremos animações e interações avançadas populares inspiradas nos produtos da Apple. Ao final deste curso, você poderá criar mais de 20 tipos diferentes de microinterações e animações para diferentes casos de uso. Se você estiver pronto para dominar a prototipagem e o design de interação, nos vemos na aula. 2. Estrutura do curso: [MÚSICA] Olá, bem-vindo à primeira aula deste curso. Neste vídeo, mostrarei a estrutura do curso você saiba o que esperar e como tirar o máximo proveito dele. O curso é dividido em três seções práticas, básicas, intermediárias e avançadas. Começaremos com o básico da prototipagem, como o que é e por que é importante, como as animações são criadas, etc. Você aprenderá sobre os diferentes tipos de prototipagem e começaremos a criar protótipos básicos no Figma. Em seguida, passaremos para o nível intermediário, onde você aprenderá sobre as melhores práticas de prototipagem no design de UI/UX. Ao final desta seção, você poderá criar diferentes tipos de protótipos , incluindo microinterações. Depois de aprender os fundamentos da prototipagem, será hora de passar para a seção avançada. Nesta parte do curso, você aprenderá como criar protótipos e microinterações complexos que levarão seus projetos de design de bons a incríveis. Se você estiver familiarizado com o Figma e suas ferramentas de prototipagem, pode pular a seção básica e pular para as seções intermediária e avançada. Para tirar o máximo proveito deste curso, certifique-se de praticar o que você aprendeu nos vídeos caso contrário, você não conseguirá dominar suas habilidades de prototipagem. Eu sei que para algumas pessoas, prototipagem pode ser um pouco complicada, mas não há nada com que se preocupar, porque você sempre pode entrar em contato comigo e eu ajudarei você a descobrir. Se você estiver pronto, vamos começar. 3. O que é prototipagem: [MÚSICA] Antes de mergulharmos na criação de protótipos, é crucial saber o que realmente significa prototipagem. A prototipagem é um processo que os designers de UI UX usam para testar rapidamente ideias para interfaces e experiências de usuário. Isso permite que eles criem wireframes ou modelos interativos para obter feedback dos usuários antes de mergulharem em um caro trabalho de desenvolvimento, mas por que se preocupar com a prototipagem? teste de protótipo pode economizar tempo e dinheiro, eliminando a necessidade tempo de codificação dispendioso e o risco de lançar um produto ou recurso que ninguém deseja. Também ajuda a mostrar suas ideias de forma interativa para que você possa obter feedback valioso das partes interessadas, clientes em forma interativa para que você possa obter feedback valioso das partes interessadas, potencial e outros tomadores de decisão importantes antes de investir muito tempo e dinheiro no desenvolvimento. Qual é a melhor maneira de fazer a prototipagem? Geralmente, temos dois tipos de prototipagem. Número 1, prototipagem em papel. Essa é uma maneira rápida e barata testar ideias rapidamente, desenhar cada tela de sua interface no papel e usá-la como base para testes com usuários. É ótimo para gerar feedback no início do processo de design, mas nem sempre é realista o suficiente quando se trata simular cenários de uso no mundo real. Número 2, prototipagem digital. Esse tipo de prototipagem usa ferramentas como Figma ou ProtoPie para criar modelos digitais que parecem interfaces de usuário reais. Eles são muito mais realistas do que os protótipos em papel. Eles facilitam o teste de usabilidade e a obtenção de insights dos usuários. Neste curso, vamos nos concentrar na prototipagem digital, pois é essencial para qualquer projeto de design de UI UX. No próximo vídeo, falaremos sobre os diferentes tipos de animação de interface de usuário. Te vejo lá. 4. Tipos de animação de IU: [MÚSICA] Neste vídeo, vamos falar sobre diferentes tipos de animação de interface de usuário. Da animação sulista que você vê no Instagram até a animação de rolagem avançada você vê no site da Apple, animação desempenha um papel importante no design da interface, porque não só ajuda a chamar atenção e orientar os usuários pela interface, mas também ajuda a criar uma experiência de usuário mais memorável e agradável. Geralmente, temos quatro tipos de animação de interface de usuário, carregamento e progresso, mudanças de estado, navegação e microinterações. Vamos começar com o carregamento e o progresso. Esse tipo de animação indica que um processo está acontecendo em segundo plano e pode ser uma boa maneira de manter o usuário engajado e ciente do que está acontecendo. Ele pode ser usado enquanto o usuário aguarda uma resposta do servidor ou durante a execução de uma tarefa longa. Agora vamos passar para a animação de mudança de estado. Os elementos da interface do usuário podem ter vários estados, como passar o mouse, pressionar, desabilitar etc. animação de estado indica quando um usuário executa uma ação, como passar o mouse sobre um botão ou clicar em um botão. Considere esse botão. O que você está vendo é o estado padrão. Mas veja o que acontece quando eu passo o mouse sobre ele. Veja, ficou mais claro. Então, aqui tivemos uma transição do estado padrão para o estado de flutuação. Em seguida, temos o tipo de navegação. animação de navegação é usada para ajudar os usuários a navegar pela interface. Ele serve como uma dica visual e ajuda a criar uma experiência mais suave ao navegar pelas diferentes seções de um aplicativo ou site. Vamos dar uma olhada em um exemplo. Aqui temos a App Store e alguns cartões aqui. Veja o que acontece quando eu toco em um cartão. Veja, fui levado para a página de detalhes, mas a transição foi muito tranquila. Imagine que não tivemos essa transição suave. Ainda conseguimos encontrar o que estamos procurando, mas a experiência não seria tão agradável. Finalmente, temos microinterações. A animação de microinterações é usada para indicar feedback ao usuário sobre determinadas ações. Pode ser como uma animação de pulso quando você clica em um botão ou uma animação de arrastar ao tentar remover um item de uma lista. Para dar um exemplo, vamos dar uma olhada nesse botão. Quando eu clico nele, sua forma muda e vemos esse botão giratório de carregamento e, finalmente, esse ícone aparece. Essa sequência de animações é uma animação de microinteração. Agora que você tem uma melhor compreensão dos diferentes tipos de animação de interface do usuário, podemos começar a falar sobre o processo de prototipagem. Nos vemos no vídeo a seguir. 5. Noções básicas de prototipagem na Figma: Neste vídeo, vamos começar a falar sobre o processo de prototipagem no Figma. Mas antes de criarmos nosso primeiro protótipo no Figma, vamos ver como as animações são criadas em computadores. O que é animação basicamente? Bem, é uma série de imagens estáticas exibidas uma após a outra em rápida sucessão que nos leva de um ponto a outro e nos dá a ilusão de movimento. Para obter esse efeito de animação, os computadores usam algo chamado quadros-chave, que são basicamente instantâneos de diferentes momentos ou estados no processo de animação. No passado, os animadores precisavam desenhar manualmente cada um desses quadros, o que consumia bastante tempo. Mas agora os quadros-chave podem ser criados forma rápida e fácil no software de design. Muitos animadores ainda desenham cada quadro de animação, e isso é chamado de técnica stop-motion. Deixe-me dar um exemplo. Suponhamos que queiramos mover esse carro do ponto A para o ponto B em dois segundos. A única coisa que precisamos fazer é criar dois quadros-chave para indicar o ponto inicial e o ponto final. Todos os quadros-chave intermediários serão gerados automaticamente. É simples assim. Gosto de chamar isso de conceito de viagem. Mas por que estamos falando sobre tudo isso? Porque o mesmo conceito pode ser aplicado ao criar protótipos no Figma. Vamos dar uma olhada nessas duas telas. O que queremos alcançar é tornar esse botão interativo para que, ao clicar nele, eu seja levado para a próxima página. Vamos usar o conceito de viagem aqui. O que precisamos? Precisamos do ponto de partida, que por acaso é a tela esquerda. Também precisamos do ponto final ou do destino, que é a tela certa. Finalmente, precisamos especificar a duração dessa transição e pronto. Agora, quando eu clicar nesse botão, serei levado ao ponto final imediatamente. Essa é a forma mais simples de animação. Se você realmente compreende esse conceito de jornada, garanto que você pode criar protótipos complexos com facilidade. Agora vamos criar um novo arquivo de design no Figma e ver como você pode criar um protótipo simples. Como o objetivo principal deste curso não é ensinar design de interface de usuário, eu já preparei os arquivos de design, para que pudéssemos nos concentrar apenas no processo de prototipagem. Para prosseguir com o curso, você precisa baixar o projeto que preparei para você e importá-lo para o Figma. Para fazer isso, basta arrastar esse arquivo e soltá-lo no painel do Figma. Agora vamos abri-lo e ver o que temos aqui. Para cada lição, há uma página aqui e, dentro de cada página, você pode encontrar os recursos necessários para essa lição. Dentro deste arquivo de projeto, se você for até a seção Páginas e abrir esta página, noções básicas de prototipagem no Figma, poderá encontrar esses quadros dentro desta página que eu já preparei para você. Aqui na parte inferior temos mais uma moldura. Mas, basicamente, vamos usar esses quadros para criar um protótipo simples. Uma coisa que você precisa ter em mente quando se trata de criar protótipos no Figma é que a maneira de criar protótipos é usando molduras. Você não pode simplesmente conectar uma forma simples a outra forma no Figma. Não vai funcionar porque é assim que a Figma cria protótipos. Sempre que quiser criar um protótipo, você precisa ter certeza de ter uma moldura. Aqui, como você pode ver, eu tenho um quadro de página inicial e esse ícone na lista da camada indica que isso é um quadro, não um retângulo. Vamos começar criando um protótipo muito simples, um protótipo de navegação. É bastante popular. Imagine que você criou este site e aqui você tem alguns cartões, aqui você tem essa barra de navegação, e você tem esses links, e você quer conectar essas páginas. Nesse caso, você pode criar um protótipo de navegação, e é bem simples. A única coisa que você precisa fazer é usar o conceito de viagem. Você precisa conhecer seu ponto de partida e o destino e criar uma conexão entre esses dois pontos. Aqui temos o botão Fale conosco, diretamente na barra de navegação. A maneira como ele deve se comportar é assim. Quando eu clico nele, eu deveria ser direcionado para esta página de contato. Vamos criar essa interação simples. Primeiro, precisamos selecionar esse botão como nosso gatilho, porque a maioria das interações precisa de um gatilho. Falaremos sobre algumas exceções nos próximos vídeos, mas na maioria das vezes precisamos ter um gatilho. Nesse caso, esse botão Fale conosco será acionável. Esse vai ser nosso gatilho. Vou selecioná-lo aqui. Em seguida, vou até a guia Protótipo aqui. Assim que você acessar a guia Protótipo, se você passar o mouse sobre o limite desse elemento, verá esse ícone de adição aparecer. Esse ícone de adição permite criar uma conexão entre o ponto de partida e o destino. Agora vou diminuir o zoom. Nosso ponto de partida aqui é esse quadro de página inicial. Não precisamos mudar nada e nosso destino será esta página de contato. Enquanto esse botão estiver selecionado, passarei o mouse sobre esse botão. Vou clicar nesse ícone de adição e arrastar desse jeito. Assim que você fizer isso, essa seta aparece e permite que você conecte esses dois quadros juntos. Agora, se eu passar o mouse sobre esse quadro, como você pode ver, eles estão conectados assim. Assim que eu o coloco lá, janela de detalhes da interação é exibida. Vou fechá-lo por enquanto. Vamos voltar ao assunto em alguns minutos. Acabamos de criar uma interação muito simples. Como você pode ver agora aqui , ao lado do nome desse quadro, temos essa caixa e dentro temos o fluxo uma. Criamos um fluxo, mas o que é um fluxo? Imagine que você tem um design completo , pode ser um site ou um aplicativo, e deseja conectar todas as páginas. Normalmente, o que fazemos é criar fluxos diferentes em nosso protótipo para que possamos reproduzir um fluxo específico sempre que precisarmos. Um fluxo é basicamente uma rede de quadros conectados entre si. Imagine que você criou um aplicativo e deseja criar um protótipo do processo de login e registro. Você quer criar um protótipo de toda a jornada do usuário para esse fluxo específico. Nesse caso, você cria um fluxo para criar uma conta para fazer login e sair. Para outra parte desse aplicativo, você pode criar outro fluxo, por exemplo, quando o usuário clica em um produto e ele deve ser levado para a página de detalhes desse produto. Pode ser um fluxo totalmente diferente. Está dentro desse protótipo, mas você tem fluxos diferentes. Se você precisar apenas visualizar um fluxo específico, não precisa simplesmente começar do ponto de partida do seu protótipo e percorrer todas as páginas. É por isso que temos esses fluxos. Agora, vou apertar o botão Play ali mesmo e seremos direcionados para a página de pré-visualização. Agora, se eu passar o mouse sobre esse botão, como você pode ver, meu cursor muda para esse ícone de ponteiro, o que significa que agora esse elemento pode ser acionado. É interativo. Aqui, eu vou clicar nele. Lá vamos nós. Fui direcionado para a página Fale conosco. Essa é a forma mais simples de protótipo na Figma. Acabamos de criar essa conexão entre essas duas páginas. Mas e se quisermos levar isso para o próximo nível? E se quisermos animá-lo? Porque, no momento, não há animação aqui. Olha, como você pode ver, assim que eu clicar nela, eu serei direcionado para esta página de contato instantaneamente. Para fazer isso, precisamos ajustar as preferências de nossa interação. Aqui criamos essa interação e agora é hora de ajustar as preferências. Para fazer isso, você só precisa selecionar este botão, este botão Fale conosco. Tudo bem, certifique-se de que esteja selecionado na lista de camadas. Aqui no lado direito, como você pode ver, temos essa seção de interação. Logo abaixo, temos essa interação de clique que acabamos de criar. Se eu apenas clicar nela, janela de detalhes da interação será exibida. Como alternativa, você pode simplesmente clicar nessa seta e essa janela será exibida. Isso depende totalmente de você. Vamos ver o que temos aqui. Logo na parte superior, temos esse menu suspenso que nos permite especificar o tipo de gatilho que estamos procurando. Temos diferentes tipos de gatilhos. Temos Ao clicar, Ao arrastar, Ao passar o mouse, Ao pressionar a tecla, Gamepad, mouse, Enter, sair do mouse, etc. Aqui temos esse gatilho após o atraso que não está ativado por padrão. Falaremos sobre isso nos próximos vídeos. Não se preocupe. Para essa interação, precisamos desse gatilho de clique, porque queremos ter certeza de que esse botão seja clicável. Não queremos definir o gatilho Enquanto estiver passando o mouse, porque se eu o definir como Enquanto estiver passando o mouse sobre esse botão, serei direcionado para a página Fale conosco, e não é isso que eu quero. O gatilho é Ao clicar. Aqui temos o tipo de transição. Como você pode ver, diz Navegue até, novamente, diferentes tipos de transições. Na maioria das vezes, precisamos configurá-lo como Navegar até, porque queremos ser levados ao destino a partir do ponto de partida e, aqui, como você pode ver, o destino é especificado na página Fale Conosco. Você pode ajustá-lo se quiser, mas como conectamos esse botão a esta página Fale conosco, aqui temos Fale conosco. Até agora, tudo bem. Aqui na parte inferior temos essa seção de animação, que é muito importante. Esta seção permite ajustar o tipo de animação que você está procurando. Aqui, por padrão, está definido como instantâneo. É por isso que, quando cliquei no botão Fale conosco aqui, fui direcionado para esta página instantaneamente, porque o tipo de animação aqui está definido como instantâneo. Se eu abrir, você pode ver que temos diferentes tipos de animação. Temos dissolver, animar de forma inteligente, entrar, sair, empurrar, deslizar para dentro e para fora. Bem, vamos mudá-lo para dissolver por um segundo. Assim que eu faço isso, essas duas opções aparecem. Aqui temos o método de atenuação ou a velocidade da nossa animação. Vamos falar sobre isso em alguns minutos. Por enquanto, não vou mudar isso, e aqui temos a duração. Quando se trata de criar microinterações, a unidade geralmente é de milissegundos, então aqui temos 300 milissegundos. Se quiser, você pode aumentá-lo ou diminuí-lo. Se eu quiser que essa transição aconteça em exatamente um segundo, preciso aumentar esse valor para 1.000 milissegundos, sem mais nem menos. Agora, se eu tocar esse fluxo mais uma vez, veja o que acontece. Vou clicar no botão Fale conosco e pronto. Agora vemos essa animação de dissolução, que aconteceu em exatamente um segundo. A duração dessa transição foi de um segundo. Dependendo de quão rápida ou lenta você deseja que sua animação seja, você pode ajustar esse valor aqui. Agora vamos mudar o tipo de animação aqui para prosseguir. Assim que eu fizer isso, como você pode ver, temos essas flechas. Ele permite que você especifique a direção dessa animação. Aqui nesta janela, você pode visualizar sua animação. Como você pode ver, isso mostra que B se move para a tela A da direita para a esquerda. Você pode configurá-lo da esquerda para a direita, de cima para baixo e de baixo para cima. Vou deixar como está, e agora, se eu clicar no botão Fale conosco, veja o que acontece. Lá vamos nós. Essa segunda página passa para nossa primeira página. podemos configurá-lo para se mover para fora, empurrar, deslizar e deslizar para fora, mas isso não é tão importante. Você pode ir em frente e experimentá-los. Agora, vamos criar outra interação simples. Aqui, como você pode ver, temos esta página do projeto, e aqui na página inicial temos esses projetos recentes. Imagine que você queira transformar esse cartão, esse projeto em um cartão interativo. Para fazer isso, como você sabe, basta selecionar esse grupo, Projeto 1, e enquanto estiver na guia Protótipo, basta criar uma interação simples e conectá-la à página do seu projeto, assim mesmo. Aqui, novamente, você precisa especificar o gatilho. Vou configurá-lo para desclicar. Isso é bom. O tipo será instância. Não vou animá-lo agora. Aqui, se eu clicar neste cartão agora, como você pode ver, é interativo. Até agora, você aprendeu a criar uma conexão simples entre dois quadros diferentes. Agora vamos falar sobre outro recurso do Figma, que é essa opção de animação inteligente. É muito poderoso. Ele permite que você crie microinterações complexas em segundos. Vamos ver como isso funciona. Bem, vou rolar até aqui e, como você pode ver, eu já preparei essa moldura. Dentro, temos esse círculo, e também temos duas camadas de texto, A e B. Nada extravagante aqui. Bem, vamos ver o que precisamos alcançar. Imagine que você queira mover esse círculo do ponto a para o ponto B. Como devemos fazer isso? Bem, pense no conceito de viagem sobre o qual falamos antes. Para qualquer animação, você precisa ter o ponto de partida e o ponto final e, finalmente, conectá-los e especificar a duração, ou, digamos, a velocidade da sua animação. Bem, aqui temos nosso ponto de partida. Este círculo é colocado aqui no ponto A. Agora precisamos do destino. Para isso, vou selecionar esse quadro, esse quadro animado inteligente e vou duplicá-lo. Clique em Control D ou Command D. Aqui, temos dois quadros idênticos, agora. Agora, neste segundo quadro neste quadro duplicado, vou selecionar esse círculo e movê-lo para o ponto B. Mantenha pressionada a tecla Shift e mova-a para o lado direito, assim. Agora temos nosso ponto de partida e nosso destino, nosso ponto final, e a próxima coisa que precisamos fazer é conectar esses dois quadros. Mas qual deve ser o gatilho dessa animação? Por enquanto, vou selecionar esse círculo como nosso gatilho. Depois de clicar nele, ele deve ser movido para o ponto B. Agora vou selecioná-lo e vou até a guia Protótipo e vamos conectar esses dois quadros juntos. Para entender isso facilmente, vou selecionar esse quadro aqui e, apenas na lista da camada, vou renomeá-lo para A como nosso ponto de partida e este vai se chamar B. Criamos essa interação. O gatilho é desclicar, tudo bem, mas o tipo de animação está definido como instantâneo. Vou mudá-lo para animação inteligente. A forma como essa animação inteligente funciona é como se pegasse seu ponto de partida e seu destino e criasse automaticamente os quadros-chave intermediários. Você não precisa se preocupar com o que está acontecendo no meio. Você só precisa dizer à Figma que este será nosso ponto de partida e esse será meu destino. Basta levar esse círculo até esse ponto em um segundo, por exemplo, ou menos. Aqui eu não vou mudar a duração, tudo bem. Agora temos o segundo fluxo. Vou clicar em Play e vamos ver como funciona. Como você pode ver aqui, você tem uma lista de fluxos, então você pode se mover facilmente entre esses fluxos, se quiser. Aqui, se eu clicar nesse círculo, olha o que acontece? Pronto, ele se moveu do ponto A para o ponto B. Funciona perfeitamente. Agora imagine que você queira tornar essa animação mais rápida. Para fazer isso, basta selecionar sua interação e ajustar essa duração aqui. Vou diminuir esse valor para 500 milissegundos. Vamos tentar. Lá vamos nós. É muito mais rápido agora. Há um ponto importante que você deve ter em mente sobre esse recurso de animação inteligente. Bem, quando você usa animação inteligente, o nome das suas camadas é importante. Aqui está o porquê, aqui neste quadro A, como você pode ver, temos o círculo, temos essas duas camadas de texto. Nesta segunda página, também temos os círculos A e B. É por isso que a animação funciona corretamente. Se eu mudar o nome desse círculo nessa segunda tela, nesse quadro B para outra coisa, vamos mudá-lo para, digamos, Círculo 2. Agora acabamos de romper a conexão entre esses dois elementos. Figma agora acha que esses dois círculos são dois círculos separados, e não é isso que queremos. Olha o que acontece se eu jogar essa animação agora. Vou clicar nele. Veja, não temos mais essa animação porque acabamos de romper a conexão entre essas duas telas. Você precisa manter esse ponto em mente. Muitas pessoas cometem esse erro. Eles criam seu ponto de partida, criam seu ponto final e conectam tudo corretamente, mas a animação não funciona. Isso porque eles não têm os mesmos nomes de camadas nas duas telas. Por favor, tenha esse ponto em mente, é muito importante. Agora que você aprendeu como a animação inteligente funciona. Vamos falar sobre o método de flexibilização, aqui, essa opção que pulamos. Se eu abrir esse menu suspenso, como você pode ver, temos muitas opções diferentes e elas são muito importantes, especialmente quando você deseja criar uma microinteração realista. Mas por que eles são tão importantes? Bem, por padrão, é provável que essa opção linear esteja selecionada para você. Bem, esses métodos de flexibilização definem a aceleração da sua animação, mas o que isso significa? É tão confuso. Deixe-me explicar. Aqui, se eu definir como linear e jogar agora, agora vou clicar nesse círculo. Esquecemos de mudar o nome aqui, então deixe-me remover esses dois aqui, , e vou clicar neles novamente. Lá vamos nós. Não tenho certeza se você notou ou não, mas agora tivemos um movimento linear. O que isso significa? Isso significa que a velocidade dessa animação é constante e não é realista porque os objetos não se movem com uma velocidade constante. É por isso que temos todas essas outras opções. Se eu apenas selecionar essa interação, aqui temos facilidade de entrada, facilidade de saída, facilidade de entrada e saída, etc. Aqui temos uma mola suave, rápida, saltitante, lenta e personalizada. Esses diferentes métodos de atenuação nos permitem fazer com nossa animação pareça muito mais realista. Se eu mudar esse método de atenuação para fácil agora, a forma como essa animação é reproduzida é assim ela começa com uma velocidade menor e, quando se aproxima do destino, ela acelera. Assim, você vê, é muito mais realista, não é? Se você alterar o método de atenuação de facilidade de entrada para saída, obterá o oposto. Começa rápido e depois desacelera. Vamos tentar. Lá vamos nós. Obviamente, você pode verificar cada um deles, dependendo do caso de uso Você pode alterar esse método de flexibilização para qualquer método de flexibilização que desejar. Nos próximos vídeos, vou usar alguns deles para mostrar como você pode utilizá-los mostrar como você pode utilizá-los adequadamente e fazer suas microinterações pareçam mais realistas. Mas se você quiser obter a definição de cada um desses métodos de flexibilização, acesse o site da Figma. Aqui eles têm uma postagem no blog e explicaram cada um desses métodos de flexibilização. Como você pode ver, temos esse movimento linear. Temos facilidade em entrar, assim. Então, temos a facilidade de sair e assim por diante. Você pode dar uma olhada nesta página, se quiser. Vou colocar o link na seção de recursos para sua referência, e isso é basicamente sobre animações inteligentes. Nos próximos vídeos, você aprenderá a utilizar essa animação inteligente adequadamente para criar animações complexas. vejo no próximo vídeo. 6. Botão de animação como: [MÚSICA] Bem-vindo de volta. Neste vídeo, vamos criar esse botão de curtir animado no Figma. É isso que vamos conseguir. Eu quero fazer esse ícone animado. Quando eu clico nela, essa animação é reproduzida exatamente assim. Vamos entrar nisso. Dentro do arquivo do projeto que você já importou para o Figma, gostaria que você encontrasse esta página Animated Like Button. Dentro, você pode encontrar dois ícones diferentes. Aqui temos dois tipos de ícones: temos um ícone de contorno e um ícone sólido. Precisamos desses dois ícones para essa animação. Por quê? Porque precisamos ter dois estados diferentes. Vamos seguir em frente e criar uma moldura. Vou apertar A no meu teclado para selecionar a ferramenta de moldura. Aqui vou criar uma moldura de tamanho personalizado, algo assim deve funcionar. Deixe-me renomear esse quadro para A, como nosso ponto de partida. Vou duplicar esse ícone e trazê-lo para dentro desta moldura. Certifique-se de que ele seja colocado dentro moldura ao conferir sua lista de camadas. Vou alinhá-lo ao centro da seção de alinhamento, desse jeito. Esse será nosso ponto de partida. Agora, se você pensar no conceito de viagem sobre o qual falamos antes, você sabe que também precisamos de um destino. Para o destino, vou selecionar essa moldura. Vou clicar em Control D ou Command D para duplicá-lo. Aqui no destino, precisamos ter esse ícone sólido. Vou duplicá-lo e trazê-lo aqui. Vou me certificar de que ele seja colocado logo acima desse ícone de contorno na lista da camada. Na lista da sua camada, você precisa ter algo assim. Coração sólido, que é colocado acima do contorno do coração. Vou chamar esse quadro de B. Temos nosso ponto de partida, também temos nosso destino. O problema é o seguinte. Se eu selecionar esse ícone e torná-lo interativo, não obteremos essa animação assim. Por quê? Porque aqui em nosso ponto de partida, não temos esse ícone sólido. Só temos esse ícone de esboço. Deixe-me mostrar como isso funciona. Se eu apenas tornar esse ícone de contorno interativo, vou selecioná-lo, vá até a guia Protótipo aqui. Vou passar o mouse sobre esse limite aqui e tentar conectar esses dois quadros assim. Quando essa janela de detalhes da interação for exibida, vou me certificar de que o gatilho esteja definido como Ao clicar. Porque eu quero que esse ícone seja clicável. Aqui está escrito navegue até. Aqui temos nosso quadro de destino B. Tudo bem. O tipo de animação deve ser Smart animate. Mas o problema é que, se eu seguir em frente e tocar esse fluxo, veja o que acontece. Deixe-me torná-lo um pouco maior. Vou me certificar de que ele preencha a tela desse jeito. Eu vou clicar nele. Você vê que simplesmente desaparece. Porque não temos essa camada sólida em nosso ponto de partida. Como podemos resolver isso? Para corrigir isso primeiro, precisamos pegar o ícone sólido, copiá-lo, clicar em Controle C. Vou selecionar esse quadro e colá-lo aqui, pressionar Controle V ou Comando V. Mas não queremos que ele fique visível nesta página. O que podemos fazer? Precisamos, de alguma forma, fazer com que ela desapareça. Se você der uma olhada nesta animação aqui, verá que nosso ícone sólido aumenta rapidamente e então veremos esse estado. Vou selecionar esse ícone sólido aqui. Vou pressionar K no meu teclado para selecionar a ferramenta de escala. Se eu voltar ao inspetor de design, você verá que esta seção de escala aparece aqui. Vou definir a escala aqui 0,01 para garantir que esse ícone sólido não esteja visível. Você precisa garantir que os nomes das camadas sejam os mesmos nas duas páginas. Veja, aqui eu tenho um coração sólido, aqui eu também tenho um coração sólido. Coração delineado e coração delineado. Isso é muito importante. Caso contrário, Figma não conseguirá descobrir isso. Agora vamos dar uma olhada e ver como funciona. Vou clicar nele, até agora tudo bem. Temos nosso ícone sólido aumentando assim. Mas aqui temos alguns problemas. Primeiro, é muito lento. Quando se trata de microinterações, a velocidade é importante. Caso contrário, em vez de criar um bom elemento interativo, você terá uma experiência ruim para o usuário porque ninguém quer esperar que esse ícone seja animado lentamente. Deve ser rápido. Vamos fixar a velocidade primeiro. Vou selecionar isso, ir para o protótipo. Vou clicar na minha interação aqui e deixar eu modificar a velocidade aqui para 100 milissegundos em vez de 300 milissegundos. Vamos tentar mais uma vez. Muito, muito melhor. Mas se você der uma olhada nesse ícone que eu já mostrei, há uma diferença entre esse ícone e esse que acabamos de criar. Se você prestar atenção suficiente, verá que esse ícone aumenta e depois diminui um pouco para ter esse efeito de salto. Como podemos criar isso? Bem, para criar isso, você pode dizer que podemos ir em frente e mudar a velocidade aqui. Em vez de relaxar. Você pode dizer que podemos configurá-lo como saltitante. Vamos ver se funciona. Você vê o problema. Nós obtemos nosso efeito de salto. No entanto, como você pode ver, esse efeito de salto se repete algumas vezes rapidamente. Não é isso que queremos. Não quero que isso se repita várias vezes. É isso que eu quero alcançar. Se eu clicar nele, ele apenas aumenta e diminui. Não podemos realmente usar esses efeitos de equilíbrio aqui. Vou colocá-lo de volta para relaxar. O que podemos fazer é isso. Poderíamos ter uma terceira página aqui, um terceiro estado. Vou selecionar esse quadro B, duplicá-lo, pressionar Controle D ou Comando D e vou chamá-lo de C. Você precisa ter certeza de que não há conexão entre esta página e essa página C. Queremos ir de A para B. Então, aqui no quadro B, vou aumentar a escala desse ícone sólido. Vou selecionar esse ícone sólido, pressionar K e aumentá-lo aqui, talvez para 54, algo assim. Então vamos passar de B para C rapidamente. Clicamos nele, nosso ícone sólido aumenta e a dimensão será alterada para 54 por 54. Então vamos daqui até aqui, e ele diminui para 44 por 44 pixels, nossa dimensão inicial. Para que isso aconteça corretamente, precisamos ter um gatilho pós-atraso. Para fazer isso, vou selecionar todo esse quadro dentro desse ícone. Vou até o protótipo e, em seguida, conectar esses dois quadros assim. Aqui, por padrão, o gatilho é definido como Ao clicar. Vou alterá-lo para após um atraso. Deve ser uma animação inteligente e a duração será de 100 milissegundos. Agora ele deve funcionar corretamente. Vamos tentar. Eu vou clicar nele. Aqui temos um problema. O problema é isso depois de um atraso. Precisamos configurá-lo para um milissegundo porque queremos passar desse estado para esse estado instantaneamente. Não precisamos ter nenhum atraso no meio. Vamos tentar mais uma vez. Pronto, mas ainda é muito lento, não acha? Vamos consertar isso. Vou selecionar esse elemento de esboço aqui, ir até as interações e clicar nele. Aqui temos 300 milissegundos. Vou diminuí-lo para 100 milissegundos. Vamos ver se funciona bem. Agora funciona muito bem. Mas eu quero que funcione nos dois sentidos. Quando clico nesse ícone sólido, quero poder voltar ao meu ponto de partida. Vou selecionar esse sólido e só precisamos criar uma conexão de C a A. Será On click, Smart animate e 100 milissegundos. Acho que terminamos agora. Eu vou clicar nele. Lá vamos nós. Funciona muito bem. É basicamente assim que você pode criar um botão de curtir animado. Mas o problema é o seguinte. Fizemos esse ícone interativo. Mas como podemos reutilizar esse elemento interativo? Porque se você quiser usar essa abordagem, toda vez que quisermos usar esse ícone, precisamos animá-lo repetidamente toda vez que quisermos usá-lo em nosso projeto, que é muito tedioso e demorado e não faz nenhum sentido. Em vez disso, precisamos encontrar uma maneira de torná-lo interativo uma vez e poder reutilizar esse elemento interativo várias vezes. Para fazer isso, precisamos usar algo chamado componentes interativos. Se você não sabe nada sobre componentes, variância e componentes interativos, não se preocupe. No próximo vídeo, mostrarei quais são as variantes e como você pode tornar seus componentes interativos. vejo na próxima. 7. Variantes e componentes interativos: [MÚSICA] Aqui estamos. Eu criei um novo arquivo de design e vou continuar criando um botão. Mas antes de criarmos nosso botão, vou mencionar que, na verdade, temos dois tipos diferentes de variação. Temos variância unidimensional e variantes bidimensionais. Vamos começar com exemplos de variantes unidimensionais. Então, à medida que você se acostumar com as variantes, também falaremos sobre as variantes mais avançadas e bidimensionais. Para criar um botão, você tende a criar um retângulo, depois adicionar um rótulo a ele e estilizá-lo. Isso é bom. No entanto, existe uma maneira melhor de fazer isso, criando uma moldura. Primeiro, vou pressionar T no meu teclado para selecionar a ferramenta Texto. Vou criar uma camada de texto aqui. Deixe-me ampliar e eu vou escrever o botão. Deixe-me ir para a seção de texto no lado direito. Aqui, vou ajustar o peso para provavelmente médio e o tamanho para 17 pontos e aqui posso definir a altura para 100 por cento por enquanto. Vou mudar o alinhamento para alinhar o meio. Agora que nossa etiqueta está pronta, vou adicionar um layout automático para torná-la responsiva. Para fazer isso, vou pressionar Shift e A no meu teclado. Assim que eu fizer isso, ele colocará essa etiqueta em uma moldura. Como você pode ver aqui, diz Quadro 1 e aqui também temos esse Quadro 1 na lista da camada. Bem, na seção de layout automático no lado direito, vou mudar o alinhamento para o meio esquerdo. Também aqui podemos ajustar o preenchimento horizontal, o preenchimento vertical e também o espaçamento entre os itens. Bem, primeiro, deixe-me ir em frente e adicionar um campo a esse quadro. Vou adicionar um campo aqui e deixar eu ajustar a cor para algo como roxo. Talvez algo assim deva funcionar, ótimo. Então eu vou mudar a cor das camadas de texto aqui. Vou configurá-lo para branco para ter um contraste melhor. Finalmente, vou selecionar minha moldura e aumentar a quantidade do raio do canto aqui para torná-la um pouco arredondada, provavelmente algo como quatro pixels. Deixe-me renomear esse quadro para botão. Perfeito. Agora vamos ajustar o preenchimento aqui. Vou definir o preenchimento vertical para 16 pixels e o preenchimento horizontal para 32 pixels. Nosso botão está pronto e é totalmente responsivo. Eu posso ir em frente e ajustar a etiqueta. No entanto, vou mantê-lo como está por enquanto. Agora imagine que você queira criar diferentes estados desse botão e manter tudo organizado. Para fazer isso para poder reutilizar esse botão, primeiro precisamos convertê-lo em um componente. Para fazer isso, precisamos selecioná-lo e podemos clicar neste ícone do componente aqui, sem mais nem menos. Agora, como você pode ver, a moldura, esse limite ficou roxo. Aqui você pode ver na lista de camadas também temos esse ícone de quatro diamantes, indicando que agora se trata de um componente e que você pode facilmente acessar Ativos e encontrar seus componentes locais. Podemos reutilizar instâncias desse componente. Mas como podemos criar variantes? Bem, há muitas maneiras de criar variantes. Primeiro, você pode criar componentes diferentes, nomeá-los e transformá-los todos em um conjunto de componentes. Ou você pode simplesmente selecionar seu primeiro componente aqui e clicar neste botão, Adicionar variante diretamente na barra de ferramentas. Deixe-me ir em frente e fazer isso. Assim que eu cliquei nesse botão, você pode ver que esse conjunto de componentes foi criado. Aqui temos esse limite tracejado indicando que este é um conjunto de componentes. Aqui na lista de camadas, você pode ver que o nome do nosso conjunto de componentes é botão. No interior, temos duas variantes. Temos um padrão. Essa é nossa variante básica. Além disso, temos a Variante 2. Foi duplicado para nós porque clicamos nesse botão aqui, Variant. Agora podemos ajustar o estilo dessa segunda variante. Mas antes de fazermos isso, vou explicar como as variantes funcionam. Bem, um conjunto de componentes, se você apenas selecioná-lo, tem propriedades diferentes. Se você apenas der uma olhada no inspetor certo, aqui, você pode ver esta seção Propriedades, e aqui temos a Propriedade 1. Se você quiser, você pode renomeá-lo, e faremos isso para manter tudo organizado. Mas a forma como a variação funciona é criar propriedades diferentes e, em seguida, definir valores diferentes para essas propriedades. Suponhamos que você queira criar estados diferentes desse botão. Padrão, passe o mouse, pressione, desabilite, etc. O nome da nossa propriedade será State. Agora que meu conjunto de componentes está selecionado, vou acessar essas propriedades aqui. Já temos essa propriedade 1. Figma já o criou para nós. Vou clicar duas vezes nele e renomeá-lo para Estado. O nome da propriedade é estado. Se eu clicar neste ícone aqui, Editar propriedade, você pode ver que o nome dessa propriedade é state e temos dois valores internos, padrão aqui, o primeiro e a Variante 2. Uma propriedade pode ter vários valores, por exemplo, default, hover, pressionada, desativada etc. Agora, como você pode imaginar, precisamos seguir em frente e selecionar nossa segunda variante. Aqui, em vez da Variante 2, vou renomeá-la para Pressed, assim mesmo. Eu vou ajustar sua cor. Vou adicionar uma camada de sobreposição a ela. A opacidade está definida para 20%. Isso é bom. Agora temos duas variantes diferentes. Mas e se você quiser adicionar mais? Bem, você pode simplesmente selecionar esses conjuntos de componentes e clicar neste botão de adição aqui. Ou você pode selecionar uma dessas variantes e pressionar Command D ou Control D no teclado para duplicá-la. Isso depende de você. Agora temos o Estado 3. Veja, vou selecioná-lo e ajustar seu valor para Hover. Então deixe-me ir em frente e mudar o campo aqui. Vou mudar a cor dessa camada de sobreposição para branco. Este será nosso estado de flutuação. Eu vou criar mais um. Vou apertar o Controle D para duplicar. Aqui, desta vez, vou criar uma variação desativada. Eu vou selecioná-lo. Deixe-me ir em frente e alterar seu valor para desativado. Então eu vou mudar sua cor para provavelmente cinza claro, algo assim deve funcionar. Agora, se eu selecionar esse conjunto de componentes e clicar nesse ícone, você poderá ver que esse estado de propriedade tem quatro valores diferentes: padrão, pressionado, passar o mouse e desativado. Mas como você pode utilizar essas variantes? Isso é tão simples. Assim como usar um componente, você pode simplesmente acessar Ativos. A partir daqui, você criará uma instância do seu componente desse jeito. Aqui temos nosso botão e, no lado direito, você pode ver que temos essa propriedade do estado e aqui temos esse menu suspenso. Podemos alterá-lo para pressionado, podemos alterá-lo para passar o mouse ou desativado. Você pode ver como é fácil criar variantes no Figma? Isso é incrível. Esse foi um exemplo de variantes unidimensionais. Mas como você pode criar variantes multidimensionais ou bidimensionais? Vou mover esse conjunto de componentes para o lado esquerdo e vou torná-lo um pouco maior. Agora vamos imaginar que você queira criar uma nova versão desses botões. No entanto, desta vez, talvez seja necessário adicionar um ícone a ele. O que eu vou fazer é isso. Vou selecionar todos eles. Claro, você pode fazer isso um por um, mas eu prefiro selecionar todos eles. Então eu vou duplicá-los, clicar em Control D ou Command D e movê-los para cá. Agora precisamos de um ícone. Você pode usar o ícone que quiser. Vou executar o plug-in real de conteúdo aqui. Deixe-me fazer isso rapidamente. Usando esse plug-in, vou adicionar alguns ícones aqui ao meu projeto. Deixe-me ir para Icon, campo. Acho que esse ícone parece bom. Vou arrastá-lo e soltá-lo aqui. Vou arrastar e soltar outro ícone para nosso próximo exemplo. Deixe-me procurar um bom ícone. Vamos procurar o ícone da página inicial, esse, parece muito bom. Ótimo. Agora vamos imaginar que você queira adicionar um ícone a esse botão. Como criamos esse botão usando o layout automático, podemos selecionar facilmente esse quadro e simplesmente arrastá-lo e soltá-lo em nosso botão. Mas vou duplicá-lo primeiro porque vou precisar desses ícones para nosso próximo exemplo, e depois vou arrastá-los e soltá-los aqui. Assim que eu fizer isso, você pode ver que a altura dos meus botões também foi ajustada. Não é isso que eu quero, só quero que esse botão cresça horizontalmente. Para corrigir esse problema, precisamos selecionar esse botão e, a partir daqui, mudarei a opção de redimensionamento vertical para altura fixa. Dessa forma, quando adiciono mais componentes ou mais elementos a esse botão, ele cresce apenas horizontalmente, não verticalmente, e é exatamente disso que eu preciso. Agora, se eu simplesmente arrastar e soltar nesse padrão, como você pode ver, a altura permanece a mesma, e vamos fazer a mesma coisa com esses botões. Vou selecionar todos eles, mudar essa opção para altura fixa. Agora vamos selecionar esse ícone, mudar sua cor para branco, e também vou selecionar esse botão e definir esse espaçamento entre os itens para oito pixels. Posso selecionar todos esses botões e definir esse valor como oito. Agora vou selecionar esse ícone, copiá-lo, pressionar “Ctrl” “C” ou “Command” “C”. Selecione esse botão, mantenha pressionada a tecla “Shift” e selecione esses dois. Em seguida, pressione “Ctrl” “V” ou “Command” “V”. No entanto, precisamos ajustar a posição deles. Enquanto estiverem selecionados, vou apertar a tecla de seta esquerda no meu teclado para colocá-los do outro lado da minha etiqueta e, como você pode ver, meus botões estão prontos. No entanto, ainda não terminamos. Precisamos criar outra propriedade para esses conjuntos de componentes porque criamos a propriedade state, agora precisamos criar outra propriedade para ícones. Como podemos fazer isso? Como mencionei antes, para criar uma propriedade, você precisa primeiro selecionar seu conjunto de componentes e, em seguida, aqui, vou clicar neste botão de adição, e aqui diz criar nova variante de propriedade. Vou clicar nessa opção “Variante” e essa janela será exibida. Vou nomeá-lo com ícone e depois com o valor, em vez de chamá-lo de padrão ou qualquer outra coisa, vou chamá-lo de verdadeiro e, em seguida, criar essa propriedade. Eu vou explicar para você em um segundo o que isso significa. Agora que criamos essa nova propriedade, precisamos selecionar nossa variância, esses botões, e definir o valor correto para essa nova propriedade. Esses quatro botões não têm nenhum ícone. Vou manter pressionada a tecla “Shift” , selecionar todas elas e definir isso com o valor do ícone como falso. Para esses botões, eles já estão definidos como verdadeiros, mas aqui temos outro problema. Como você pode ver, assim que eu seleciono esse botão para a propriedade do estado, o valor é definido como State8. Precisamos configurá-lo como padrão. Precisamos configurá-lo para prensado. Precisamos configurá-lo para passar o mouse e, finalmente, este para desativado. Agora, deixe-me mostrar como esses verdadeiros valores falsos funcionam. Esses são chamados de valores booleanos, e a forma como eles funcionam é assim. Se eu selecionar essa instância desse botão, agora você pode ver que eu tenho duas propriedades. Eu tenho o estado, posso configurá-lo como padrão. Agora eu tenho isso com a propriedade do ícone, e aqui, em vez de um menu suspenso , tenho esse botão de alternância. A razão pela qual eu tenho esse botão de alternância é porque nomeei o valor verdadeiro e falso. Figma entende automaticamente que você pode precisar de uma alternância para esses valores verdadeiros e falsos, esses valores booleanos, e isso é muito útil porque aqui eu posso simplesmente ativá-los e desativá-los desse jeito, e funciona para todos esses estados. Você vê? É assim que você pode criar uma variação multidimensional no Figma. Agora, deixe-me mostrar outro exemplo. Suponhamos que você queira criar um botão de rádio. Na verdade, vamos fazer isso juntos. Vou seguir em frente e criar uma moldura. Se eu pressionar “A” no meu teclado, posso selecionar a ferramenta de moldura e manter pressionada a tecla “Shift”, clicar com o botão esquerdo e arrastar para criar um quadro. Vou definir o tamanho do quadro para 16 por 16 pixels, assim, deixe-me ampliar e, em seguida, vou deixá-lo completamente arredondado. Vou aumentar o valor do raio do canto e deixe-me renomeá-lo para botão de rádio. Agora vou adicionar um traço e deixar eu mudar sua cor para o nosso roxo. Essa será a variante não verificada. Vou duplicá-lo, selecioná-lo, pressionar “Ctrl” “D” ou “Comando” “D” para duplicar. Agora preciso criar a versão verificada, então talvez eu precise de uma elipse. Vou segurar “Alt” e “Shift” para criar uma elipse proporcionalmente, e deixe-me alinhá-la bem no centro, desse jeito. Vou torná-lo um pouco maior e depois mudarei sua cor para o nosso roxo também. Eu vou te mostrar a outra maneira de criar um conjunto de componentes agora. Deixe-me selecionar esse botão de rádio e vou renomeá-lo aqui. Aqui temos o botão de rádio e a barra para frente desmarcada. Para o outro, vou escrever a barra do botão de rádio marcada. Usando essa convenção de nomenclatura, você pode criar facilmente diferentes componentes e depois transformá-los em um conjunto de componentes. O Figma criará propriedades automaticamente para você. Deixe-me mostrar como isso funciona. Vou selecionar esse, transformá-lo em um componente, esse também, transformá-lo em um componente, então agora temos dois componentes diferentes aqui. Agora, se eu selecionar os dois, aqui você verá essa opção. Diz combinar como variância. Se eu clicar nele, olha o que acontece, aí está. Agora temos um conjunto de componentes com duas variantes internas. O nome do nosso conjunto de componentes seria o que escrevemos antes da barra. Como você se lembra, escrevemos a barra para frente do botão de rádio marcada e, em seguida, a barra para frente do botão de rádio não marcada. O botão de rádio será o nome do nosso conjunto de componentes e tudo o que escrevemos após a barra será o valor de nossa propriedade. Não criamos nenhuma propriedade, mas Figma criou automaticamente. Se eu selecionar esses conjuntos de componentes, você poderá ver que temos Propriedade 1 e temos dois valores, marcados e desmarcados. Aqui, posso simplesmente renomeá-lo para state e agora posso simplesmente criar uma instância desse botão de rádio e aqui temos dois estados diferentes, marcados e desmarcados. Isso é incrível, não é? Mas você pode perguntar: podemos usar esse botão de alternância aqui também? Sim, se alterarmos os valores de nossa propriedade para verdadeiro e falso, você também poderá obter exatamente o mesmo botão de alternância aqui. Deixe-me provar isso para você. Se eu selecionar este e definir o valor do estado como falso, e depois selecionar este e definir o valor do estado como verdadeiro, agora posso selecionar essa instância, e aí está, obtemos esse botão de alternância. Agora que você entende como as variantes funcionam, vou falar sobre quando você não deve usar variantes. Bem, posso ver que muitos designers cometem o erro de criar centenas de variantes com ícones diferentes. Bem, vamos supor que você crie esse botão com esse ícone e decida ter diferentes variantes desse botão com 5, 10, 20 ícones diferentes. Nesse caso, não é uma boa ideia usar variantes, porque em vez de resolver um problema, você está criando um novo problema. Dessa forma, vai ser muito difícil organizar tudo. Em vez disso, o que você pode fazer é utilizar uma propriedade de componente porque temos propriedades variantes e também temos propriedades de componentes. Falamos sobre propriedades variantes, criamos algumas aqui, como você se lembra, agora vamos falar sobre propriedades de componentes. Bem, vamos supor que você queira usar esses dois ícones. Podem ser quantos ícones você quiser, mas neste exemplo, dois são suficientes. Eu vou selecionar este. Deixe-me prosseguir e renomeá-lo para ícone/marca de seleção. Este, vou renomeá-lo para icon forward slash home. Agora, vou selecionar os dois e também mudarei a cor deles para branco. Então eu vou transformá-los em um componente. Vou selecionar esse, transformá-lo em um componente, esse também. Se eu for para ativos, agora também tenho esse ícone, essa categoria de ícones. Agora vou usar esses componentes dentro do meu botão. Vou remover essas marcas de seleção aqui dos meus botões, desse jeito. Deixe-me selecionar um deles, provavelmente este, duplicá-lo para criar uma instância, arrastá-lo e soltá-lo dentro do nosso botão. Agora, vou clicar duas vezes nesse ícone e ir até esta seção. Se eu clicar nesse botão aqui, essa janela aparece e diz: “Criar propriedade do componente”. Vou chamá-lo de ícone. Aqui, para saber o valor, você pode ver que já temos esse menu suspenso. Tem marca de seleção e página inicial. Se eu clicar no botão “Criar propriedade” , aqui você verá essas tags roxas. Diz ícone. Agora, enquanto esse ícone estiver selecionado, vou clicar em “Control-C ou comando C”, depois vou selecionar todos esses botões, manter pressionada a tecla Shift para selecioná-los simultaneamente, pressionar “Controle V ou comando V” e, em seguida, pressionar a tecla de seta esquerda no teclado para alterar a posição dessas marcas de seleção. Deixe-me mostrar qual é a diferença agora. Se eu selecionar essa instância do nosso botão que já criamos, aqui no lado direito, temos outra propriedade. Esta é uma propriedade do componente. Se eu quiser mudar o ícone desse botão, posso simplesmente ajustá-lo aqui para a página inicial. Veja, eu não criei outras quatro variantes dentro do meu conjunto de componentes com esse novo ícone. Isso não faz nenhum sentido. Lembre-se desse exemplo sempre que quiser criar um grande sistema de design. Isso vai ser muito útil. Você criou esses diferentes conjuntos desse botão. Agora, você quer animá-los. A maneira como geralmente fazemos isso é duplicando nossa tela, ajustando nosso botão e conectando essas telas. Mas esse não é mais o caso, porque temos esse recurso incrível ou Figma chamado componentes interativos. Deixe-me mostrar como isso funciona. Aqui dentro do nosso conjunto de componentes, vou selecionar meu botão base, este. Em seguida, vou para a guia Protótipo. A partir daqui, vou criar uma conexão entre esses dois botões desse jeito. Aqui, dentro desta página de detalhes da interação, vou definir o gatilho como um clique porque essa é nossa variante pressionada. Como você pode ver, você também tem acesso às propriedades que acabou de criar aqui. Isso é incrível, não é? Então, vamos para a animação, e eu vou configurá-la para animação inteligente. Aqui, vou configurá-lo para facilitar a entrada e a saída, 300 milissegundos é bom. Agora, vou criar outra interação. Vou conectar esse botão base ao nosso botão de passar o mouse. Desta vez, vou acionar o gatilho enquanto paira o mouse, porque esse é o nosso estado de focagem , e a animação será animada de forma inteligente, e estamos prontos para continuar. Agora, deixe-me selecionar esse botão aqui. Vou mudar seu estado para padrão. O ícone será uma marca de seleção. Agora, vamos ver como isso funciona. Mas antes de fazer isso, para podermos visualizar esse componente, primeiro precisamos colocá-lo dentro de outro quadro. Vou apertar “A” no meu teclado, criar uma moldura e colocá-la dentro, assim. Agora, vou selecionar esse botão e remover seu ícone porque ainda não fizemos o protótipo dessas variantes. Vou testar esse botão. Vamos selecionar esse quadro agora e apertar o botão play aqui. Agora vamos ver o que acontece se eu passar o mouse sobre esse botão. Você vê que temos esse botão interativo agora. Agora que você aprendeu sobre componentes interativos e variância, deixe-me mostrar como você pode animar esse ícone usando componentes interativos em vez de usar essa abordagem, o que não é nada bom. Eu vou me livrar de todas essas molduras. Em vez disso, vamos usar esses dois ícones aqui. Aqui está o que vamos fazer. Vou selecionar esse ícone de esboço e ir até minha barra de ferramentas e clicar nesse pequeno ícone que diz “Criar componentes”. Agora, eu tenho um componente. Se você der uma olhada na lista de camadas, verá que seu ícone mudou. Também temos essa cor roxa, o que indica que agora temos um componente. Se eu selecionar esse componente e ir até a barra de ferramentas, você verá que temos esse novo ícone com esse ícone de adição no meio. Diz “Adicionar variante”. Agora, vamos adicionar uma variante a esse componente. Agora, temos esse conjunto de componentes. nome do nosso componente é coração, tudo bem. Temos uma propriedade aqui. Temos a propriedade 1, e o valor para isso está descrito. Então temos a propriedade 1 e o valor para isso é a variante 2. Vou renomear essas propriedades e seus valores. Vou começar com este. Se eu clicar duas vezes no nome dessa camada, vou alterá-la para o estado igual ao padrão. Para o próximo, vou digitar state igual a pressed. Precisamos de mais uma variante, assim como fizemos antes. Vou simplesmente selecionar este, por exemplo, e clicar nesse pequeno ícone. Como alternativa, você pode clicar em “Controle D” para duplicá-lo. Vou renomear esse estado aqui ou aqui. Não importa concluir. Esse será o nosso destino. O que precisamos fazer? Assim como fizemos antes de usar três molduras diferentes, vamos do nosso ponto de partida até o destino aqui. Vou precisar colocar esse ícone sólido dentro de todos eles. Deixe-me arrastá-lo e me certificar de colocá-lo dentro dessa variante aqui e alinhá-lo ao centro. Foi colocado aqui. Vou clicar em “Controle C” para copiá-lo, selecionar essa variante pressionada e clicar em “Controle V” aqui para colá-la dentro. Mas nesse estado, precisamos torná-lo um pouco maior. Vou pressionar “K” para selecionar a ferramenta de escala e torná-la muito maior, algo assim. Vamos colá-lo também dentro dessa variante padrão. Eu vou reduzi-lo. Enquanto estiver selecionado, basta digitar 0,01 aqui para fazê-lo desaparecer. Agora, se você acessar os ativos, poderá encontrar esse componente cardíaco sob este botão animado de curtir aqui. Você pode começar a usá-lo. Para fazer isso, você só precisa ter uma moldura. Basta clicar em “A” e criar uma moldura como esta. Arraste e solte dentro. Mas ainda não é interativo. Se eu selecionar esse quadro e clicar “Reproduzir”, você verá que ele não é interativo. Se eu clicar nele, nada acontece porque não fizemos nenhuma conexão entre esses estados. Vamos seguir em frente e fazer isso. Só precisamos selecionar esse padrão, ir até o protótipo e conectá-lo a essa segunda variante, esta pressionada. Certifique-se de ter o estado definido como pressionado. Não o conecte a esse coração sólido, caso contrário, ele não funcionará corretamente. Aqui, você precisa ter uma animação estável, prensada e inteligente, 100 milissegundos. Isso é bom. Agora, vou selecionar isso pressionado, criar uma conexão entre esses dois. Agora, aqui, temos o estado completo. Isso é bom. Animação inteligente, 100 milissegundos. Mas o gatilho deve ser alterado de um clique para após o atraso, e o atraso deve ser definido para um milissegundo. Finalmente, precisamos selecionar esse estado completo e apenas conectá-lo novamente ao nosso estado padrão. Deve ser clicado, por padrão, 100 milissegundos. Agora, se você tentar visualizá-lo, ele deve funcionar perfeitamente. Você vê isso? A partir de agora, sempre que você usar uma instância desse componente em qualquer lugar do seu projeto, ela será interativa por padrão. Isso é tudo para esta lição. vejo na próxima. 8. Botões animados: [MÚSICA] Neste vídeo, vamos criar um botão interativo juntos. Embora você já tenha aprendido como tornar seus botões interativos no vídeo sobre componentes interativos, nós realmente não nos aprofundamos na criação de um botão interativo avançado, como o que temos aqui. No vídeo sobre componentes interativos, você aprendeu como alterar o estado do botão de padrão para passar o mouse apenas alterando a cor do botão. Mas neste vídeo, vamos levar isso para o próximo nível. Aqui está o que vamos construir. Assim que eu passo o mouse sobre esse botão, um círculo aumenta para preencher o espaço disponível dentro desse botão, e a cor do texto também deve ser alterada. Se eu clicar nele, vejo o estado pressionado. É exatamente isso que vamos criar. Se você acessar a página Botões animados no arquivo do projeto, poderá encontrar esse botão. Eu não usei o layout automático porque primeiro vou mostrar a forma mais simples de criar um botão interativo. Em seguida, mostrarei como você também pode tornar um quadro de layout automático interativo. Primeiro, vamos ver o que precisamos. Se eu simplesmente passar o mouse sobre esse botão, você pode ver que um círculo aumenta rapidamente. Precisamos de um círculo no estado padrão, mas ele não deve estar visível. Então, no estado de foco, precisamos que esse círculo aumente precisamos que esse círculo aumente e preencha todo o espaço disponível dentro desse botão. Vamos ver como podemos fazer isso. Primeiro, vou transformar esse grupo em um componente. Se eu clicar no botão “Criar componente” na barra de ferramentas, clicar nesse botão de adição para adicionar uma variante a ele e basicamente criar um conjunto de componentes. Aqui temos uma propriedade com dois valores diferentes. Vou renomear essa propriedade 1. Vou apenas renomeá-la para State igual a Default. Então, para o segundo, vou ter Estado igual a Hover. Até agora, tudo bem. Precisamos de mais uma variação para nossos estados prensados, mas vamos criá-la em alguns segundos. Primeiro, vamos seguir em frente e criar esse círculo. Para fazer isso, vou criar um círculo perfeito fora desse conjunto de componentes. Mantenha pressionada a tecla Shift para criar um círculo perfeito. Exatamente assim. Então eu vou deixá-lo branco. Em seguida, na lista de camadas, vou arrastá-la e soltá-la dentro do meu estado padrão. Exatamente assim. Não podemos vê-lo porque precisamos movê-lo para cá. Como você pode ver, esse círculo está dentro dessa variância. No entanto, ele não está mascarado dentro desse botão. Não é isso que queremos. Queremos que seja mascarado dentro desse botão. Não precisamos ver essa área fora desse botão. Para corrigir esse problema, podemos simplesmente selecionar essa variante na lista da camada e ir até o inspetor de design. Como você pode ver aqui, temos uma caixa de seleção que diz Clip Content. Se eu apenas verificar, lá vamos nós. Agora temos esse círculo mascarado dentro desse botão. É exatamente disso que precisamos. A próxima coisa que precisamos fazer é reduzir drasticamente esse círculo para fazê-lo desaparecer Vou pressionar “K” no meu teclado para selecionar a ferramenta de escala. No lado direito aqui, vou começar a digitar 0,01. Clique em “Enter”. Como você pode ver, não está mais visível. Então eu vou selecionar essa camada Ellipse 1, clique em “Control C ou Command C”. Selecione esse estado de foco, essa variante de foco, e cole-a lá, pressione “Control V ou Command V”. Está ali, mas não podemos ver. Agora, nesse estado, vou pressionar “K” no meu teclado para selecionar a ferramenta de escala. Vou ampliá-lo assim, até que ocupe até que todo o espaço disponível em nosso botão. Mas não se esqueça de selecionar sua variação e marcar a caixa de seleção do conteúdo do clipe. Aqui temos um problema. Esse círculo é colocado acima da nossa camada de texto. Isso não é bom. Vou seguir em frente e aqui, vou selecionar esse círculo, derrubá-lo e colocá-lo abaixo nossa camada de textos na lista de camadas, a mesma coisa aqui também. Mas ainda assim não podemos ver nossos textos, porque nossos textos aqui também são brancos. Agora, no estado do mouse, como você pode ver, nosso texto deve ser cinza escuro. Vou até a seção de campo aqui e deixá-la cinza bem escura, desse jeito. Até agora tudo bem. Mas e o estado prensado? Para o estado pressionado, só precisamos ter uma versão mais escura do nosso estado de flutuação. Para fazer isso, vou selecionar esse estado de foco, clicar em “Controle D ou Comando D” para duplicá-lo. Então, aqui eu vou alterar o valor dessa propriedade de estado para pressionado. Em seguida, vou clicar duas vezes nele para selecionar nosso círculo, essa camada da Elipse 1, ir até a seção de campos, apertar o botão de adição para adicionar uma camada de sobreposição a essa variante específica. Aqui, certifique-se de que esse novo campo adicionado a essa variante específica seja preto e aumente a opacidade para 30%. Agora temos três estados diferentes. Temos o padrão, passe o mouse e pressionado. A única coisa que resta é conectar esses três estados diferentes. Vou começar com o padrão. Vou selecioná-lo, ir até a guia Protótipo e simplesmente conectar esses dois desse jeito. Aqui está escrito: mude para o estado, passe o mouse, animação inteligente. Se eu configurasse para 100 milissegundos, seria muito rápido. Seria muito difícil realmente ver a animação e ver o que está acontecendo. Acho que 200 milissegundos é um bom lugar para isso. Vou mantê-lo como está. Em seguida, vou selecionar a variante do mouse conectá-la à variante pressionada. Aqui, novamente, as mesmas preferências e clique em Alterar para animação inteligente pressionada. Agora, para ver se esse botão funciona conforme o esperado ou não, precisamos apenas criar um quadro aqui. Vou apertar “A” no meu teclado, criar uma moldura simples. Vá até a guia Ativos, basta arrastar e soltar esse componente nesse quadro. Vou alinhá-lo ao centro. Vou selecionar esse quadro, apertar o botão play para visualizar essa interação específica. Vou passar o mouse sobre ele. Como você pode ver, nada acontece. Acho que não mudamos o gatilho para passar o mouse aqui. Deixe-me selecionar isso. Sim, ele deve ser alterado para enquanto você o mouse e agora deve funcionar perfeitamente. Legal. Mas como a cor de fundo é branca, não podemos vê-la corretamente. Vou selecionar essa moldura e deixá-la preta. Agora deve ser muito mais fácil para você ver o que está acontecendo. Até agora, tudo bem. Temos nosso estado padrão, temos nosso estado de flutuação. Se eu clicar nele, lá vamos nós. Também temos nosso estado pressionado. Mas o problema é que, se eu deixar esse botão desse jeito, se meu cursor sair desse botão, nada acontece. Não é isso que eu quero. Quando meu cursor sai desse botão, quero que esse botão volte ao ponto inicial, que é esse estado padrão. Bem, infelizmente, o gatilho Ao clicar não funciona da mesma forma que ao passar o mouse. Porque aqui, como você pode ver, se eu voltar ao estado padrão por um segundo, você pode ver que funciona nos dois sentidos. Mas esse não é o caso com o gatilho On Click. Aqui está um truque que eu uso para meus projetos. Vou conectar esse estado pressionado de volta ao estado padrão. Vou mudar os três aqui de clique para sair do mouse. Agora Figma sabe que quando meu cursor sai desse elemento, ele deve ser alterado para o estado padrão. Vamos ver se funciona corretamente ou não. Vou passar o mouse sobre ele. Eu vou clicar nele. Bom. Agora vou mover meu mouse desse jeito. Lá vamos nós. Acabamos de voltar ao estado padrão. Até agora tudo bem. Você aprendeu como criar essa interação. Mas, geralmente, quando queremos criar um botão, usamos o layout automático para torná-lo responsivo. Normalmente não usamos um grupo e um retângulo interno. Pode ser um pouco desafiador criar essa interação quando você tem um layout automático. Vou mostrar como você pode criar essa interação quando você tem um quadro de layout automático. Vou criar esse botão usando o layout automático. Vou apenas criar uma camada de texto aqui e deixe-me digitar para começar. Para adicionar um layout automático a ele, vou clicar em “Shift and A”. Deixe-me definir o preenchimento para 16 como para o meu preenchimento vertical e 32 como para o preenchimento horizontal. Vou adicionar um preenchimento a ele. Deveria ser exatamente como esse azul. Aqui temos apenas uma camada de texto e este é apenas um botão responsivo. Agora, deixe-me renomeá-lo para botão e vou transformá-lo em um componente. Deixe-me adicionar uma variante. Até agora, tudo funcionou perfeitamente. Mas agora vamos adicionar esse círculo a ele. Vou apenas criar um círculo como esse e torná-lo branco. Veja o que acontece quando tento colocá-lo dentro de uma dessas variantes, talvez essa padrão. Olha o que acontece. Veja, isso destruiu nosso botão. Nós vamos consertar isso, não se preocupe. A razão pela qual ele se comporta dessa maneira é porque quando temos um layout automático ou digamos, um elemento responsivo, quando adicionamos outra coisa a ele, ele tenta ocupar algum espaço, e não é isso que queremos. Não queremos que esse círculo ocupe nenhum espaço aqui. Queremos que ele flutue. Para que isso aconteça, basta selecioná-lo aqui. Vá até o inspetor de design e você verá esse botão de adição aqui. Diz Posição Absoluta. Se eu clicar nele, veja o que acontece. Agora, esse círculo não está ocupando nenhum espaço aqui, e é exatamente disso que precisamos. Não se esqueça de selecionar sua variante e marcar as marcas de verificação do conteúdo do clipe. Todo o resto deve ser feito exatamente da mesma forma que acabamos de discutir. Não vou repetir todas as etapas. Isso é tudo neste vídeo, e nos vemos no próximo. 9. Interruptores animados: [MÚSICA] Bem-vindo de volta. Neste vídeo, vou mostrar como você pode fazer uma troca interativa como esta. Vamos entrar nisso. Acesse a página de interruptores animados no arquivo de design. Aqui, como você pode ver, eu já projetei dois switches, com dois estados diferentes. É tão simples. Eu apenas uso o retângulo como plano de fundo e um círculo aqui. Também o tornei responsivo usando o layout automático. Se eu selecionar essa chave fora do estado, você poderá ver que o alinhamento está definido para a esquerda. Se eu selecionar este, o alinhamento será definido para a direita. Mas o importante é que o nome desses elementos, desse círculo e desse círculo seja o mesmo para as duas camadas. Caso contrário, não funcionará. A outra diferença é que para esse círculo aqui, usei um traço e também mudei a cor do fundo. Aqui para torná-lo interativo, a única coisa que precisamos fazer é isso. Só precisamos selecionar essas duas opções e ir até a barra de ferramentas, clicar nessa pequena seta e criar um conjunto de componentes como esse. Dentro do nosso conjunto de componentes, agora temos duas variantes com uma propriedade. Temos a propriedade um ligado e desligado. Deixe-me prosseguir e renomeá-los. Vou renomeá-lo para estado. Aqui temos o estado desligado. A próxima coisa que precisamos fazer é conectá-los. Vou selecionar o primeiro e ir até o protótipo, conectá-lo ao segundo e apenas garantir que o gatilho esteja configurado para clicar. Como costumávamos ligar e desligar aqui, também temos esse interruptor aqui . Isso é incrível. Vai ser uma animação inteligente e vou deixar como 200 milissegundos. Vamos tentar e, se necessário, podemos fazer alguns ajustes posteriormente. Agora vou criar outra conexão volta ao estado desligado. Vou criar uma nova conexão. Vamos tentar. Vou criar uma moldura. Vou mudar a cor do fundo. Além disso, a partir dos ativos aqui, vou arrastar e soltar esse botão assim. Vamos selecionar esse quadro. Clique em play e deve funcionar muito bem. Vou clicar nele. Lá vamos nós. Agora você também sabe como criar um switch interativo. vejo na próxima. 10. Slider animado: Neste vídeo, criaremos juntos um controle deslizante interativo, exatamente como o que você vê aqui. Como você pode ver, podemos interagir facilmente com esse controle deslizante. No lado direito, você vê esse número que está conectado ao nosso controle deslizante, assim. Vamos começar e ver como você pode criar um. Vá em frente e procure esta página deslizante animada dentro do projeto Figma. Aqui, como você pode ver, criei dois controles deslizantes diferentes. Primeiro, deixe-me explicar para você. Eu não tenho um retângulo arredondado aqui. É completamente arredondado como plano de fundo, e também, se eu simplesmente mover essa elipse, você verá que tenho uma camada duplicada do meu plano de fundo aqui e acabei de diminuir sua largura para cinco. Essa camada é basicamente o que vamos animar para obter algo assim. Então, aqui temos dois retângulos um em cima do outro. Mas esse, chamado de controle deslizante, tem uma largura muito menor. É tão simples. Quando você quiser criar esse controle deslizante, você precisa garantir que esse círculo esteja perfeitamente alinhado com os outros elementos. Caso contrário, não funcionará. Para este segundo controle deslizante, as únicas coisas que foram alteradas são a posição desse círculo e também a largura dessa camada deslizante foi alterada para 237 para chegar ao ponto final aqui. Mas também precisamos ter um número aqui. Então, como podemos criar isso? Deixe-me mostrar como isso é feito. Primeiro, vou criar uma camada de texto, pressionar T e criar uma camada de texto. Aqui, vou ter valores diferentes. Vou de 0 a 10 a 20, até 100. Aqui está o que eu vou fazer. Vou digitar zero. Vou pressionar Enter para criar uma nova linha. Então eu vou digitar 10 e continuar fazendo isso. Vou acelerar esse processo. Lá vamos nós. Temos 0, 10, 20 até 100 e certifique-se de alinhar seu texto para escrever aqui. Assim como nosso controle deslizante, precisamos ter dois estados diferentes para esse número e para essa camada de texto. Aqui, em nosso primeiro controle deslizante, devemos ver zero. Aqui, devemos ver 100 e todo o resto será animado por Figma automaticamente. Então, para fazer isso, precisamos apenas transformar essa camada de texto em um quadro, para poder mascarar esses números. Vou clicar com o botão direito do mouse sobre ele e clicar na seleção de quadros. Agora, como você pode ver na lista de camadas, essa camada de texto está dentro desse Quadro 1, e eu vou renomear esse texto do Quadro 2. Em seguida, vou diminuir a altura dessa moldura assim e, para mascarar esse número, como você sabe, só precisamos marcar as marcas de seleção do conteúdo do clipe assim. Agora vou alinhar esse quadro com esse controle deslizante, e vou duplicá-lo, pressionar o controle D, trazê-lo até aqui e alinhá-lo com esse controle deslizante também. Verifique se você tem a mesma margem entre o controle deslizante neste texto. Aqui, se eu apenas segurar a tecla Alt no meu teclado ou a tecla Option, posso ver que a margem está definida como 12. Aqui eu preciso ter certeza de que também tenho 12. É oito, então eu preciso movê-lo para cima, e agora, posso selecionar esses dois, esse controle deslizante e essa camada de texto, e pressionar Control G para agrupá-los e selecionar esses dois também. Clique em Control G para agrupá-los. Agora, vou estender esses grupos e garantir que minhas camadas tenham o mesmo nome nos dois grupos. Aqui eu tenho Slider 100, Slider 0. Vou alterá-lo para controle deslizante para esses dois grupos. Não quero ter problemas ao criar conexões. Depois, temos texto e texto, e todo o resto parece ótimo. Antes de transformarmos esses dois grupos em um conjunto de componentes, selecionarei essa camada de texto dentro desse quadro específico aqui e a moverei para cima porque aqui precisamos ver 100, não zero. Assim, você pode manter pressionada a tecla Shift e usar as teclas de seta do teclado para movê-la para cima. Simples assim, algo assim deve funcionar e estamos prontos para prosseguir. Agora vou selecionar esses dois grupos e apenas criar um conjunto de componentes como este e agora podemos conectar esses dois. Aqui está o que você precisa ter em mente. Quando você quiser conectar esses dois, certifique-se de selecionar esse círculo aqui dentro desse controle deslizante. No meu caso, é o Ellipse 1, caso contrário não funcionará. Certifique-se de selecionar esse elemento aqui, depois vá até o protótipo, crie uma conexão e conecte-a a este Grupo 2. O gatilho deve ser alterado de e clique para arrastar porque devemos ser capazes de arrastar esse elemento, animar de forma inteligente e 300 milissegundos ficam bem. Vou fazer a mesma coisa esse elemento aqui, Ellipse One aqui, e apenas criar uma conexão com nosso primeiro grupo aqui, arrastar, e todo o resto deve estar intacto. Agora vamos tentar. Deve funcionar muito bem. Vou criar uma moldura aqui. Vamos deixar o fundo preto, assim mesmo. Vá para Ativos, arraste e solte esses componentes. Bom. Vou apenas selecionar o quadro e clicar em Reproduzir. Ok, vamos ver se funciona. Lá vamos nós. Você vê que tudo funciona conforme o esperado. Se você quiser parar em algum lugar por aqui, talvez até 20 e depois para 40 ou 60, etc., você precisa ter certeza de ter uma variação diferente. Então, em vez de zero e 100, você precisa ter algumas variantes entre esses dois valores. Talvez você possa adicionar mais duas variantes e ir 0 a 30 e depois de 30 a 70 e de 70 a 100, o que você precisar. Gente, isso é tudo neste vídeo, e nos vemos no próximo. 11. Cartão animado: [MÚSICA] Bem-vindo de volta. Se você acessa a App Store, geralmente vê alguns cartões relacionados a aplicativos diferentes. Se você tocar em qualquer um desses cartões, verá essa transição suave. limite desse cartão se expande para preencher toda a largura disponível da tela e, em seguida, todos os elementos, incluindo a imagem e as camadas de texto, se movem para cima e reorganizam todo o layout da tela. Quando quiser fechá-lo, basta arrastá-lo para baixo e ele será recolhido. Neste vídeo, vou mostrar como replicar exatamente a mesma interação no Figma. Vamos mergulhar. Aqui eu criei este aplicativo e aqui temos alguns cartões. Quando eu clico nele, veja o que acontece. Veja, teremos exatamente a mesma interação aqui. Quando eu clico nele, ele se expande. Em seguida, o texto e a imagem aqui se movem para cima. Se eu clicar nesse ícone de seta para a esquerda, ele será recolhido. Além disso, se eu simplesmente arrastá-lo até aqui, posso simplesmente colapsá-lo sozinho. É tão suave e fácil de criar. Vamos começar. Aqui, se você for até a página do cartão animado, verá que preparei essas duas telas para você. Aqui na página inicial, temos esse cartão e, dentro desse grupo de cartas, temos alguns elementos. Temos esse Grupo 2, que é esse grupo de texto. Também temos essa camada de texto e, em seguida, temos nossa forma, nossa imagem e a sombra por trás dessa imagem. A única coisa que você precisa fazer aqui é ter exatamente as mesmas camadas nessas duas páginas. Aqui na página de detalhes, eu também tenho o grupo de cartas, e dentro eu também tenho esse grupo. Mas eu removo esse texto de preço e todo o resto é exatamente o mesmo. Eu tenho Retângulo 4, Retângulo 3, Retângulo 5. É muito importante manter os nomes intactos, caso contrário não funcionará e o resto será tratado pela Figma. Agora só precisamos selecionar esta placa, ir até a guia Protótipo e conectar essas duas telas. O gatilho será ao clicar. Vai ser uma animação mais inteligente. Vou deixar a velocidade aqui para diminuir por enquanto; mais tarde, talvez precisemos ajustá-la. Em seguida, vou selecionar esse botão aqui e conectá-lo novamente à minha página inicial. Novamente, desmarque a animação inteligente. Se eu apertar o botão Play aqui para reproduzir meu fluxo, vamos visualizá-lo e ver como ele funciona. Vou clicar nesse cartão. Funciona muito bem. Mas, para passar para o próximo nível, quero adicionar esse efeito de salto, assim. É tão suave e tão satisfatório. Para fazer isso, basta selecionar este cartão aqui. Vou clicar nessa interação. Em vez de facilitar, vou mudar para rápido. Eu vou fazer a mesma coisa com essa interação. Vou selecionar esse botão e alterá-lo para rápido. Vamos tentar mais uma vez. Vou clicar nele. Lá vamos nós. Parece muito melhor. Mas e a interação de arrastar? No momento, isso não funciona. Vamos criá-lo. Só precisamos selecionar este cartão aqui na página de detalhes. Vou criar uma conexão com minha página inicial. Mas desta vez, o gatilho deve ser alterado para ao arrastar. Além disso, deve ser rápido para que não precisemos tocar em mais nada. Agora deve funcionar muito bem. Foi muito fácil, não foi? Tudo bem pessoal, vamos encerrar esse vídeo e nos vemos no próximo. 12. Texto animado: Você já quis criar uma animação de texto com aparência profissional no Figma? Se sim, você escolheu o vídeo certo, porque neste vídeo, vou mostrar como fazer essa animação de texto avançada no Figma em apenas cinco minutos. Vamos começar. Para criar esse efeito, precisamos de duas camadas de texto diferentes. Precisamos da camada de texto como nosso texto estático e precisamos de outra camada de texto como nosso texto em movimento. Vou criar uma camada de texto. Deixe-me escrever, gerencie seus projetos desse jeito. Vou deixá-lo em negrito, depois vou diminuir sua largura assim e aqui vamos colocar nossos textos em movimento. Agora vou duplicar esse texto, movê-lo para o lado direito e aqui vou escrever mais rápido desse jeito. Desta vez, podemos alterar o tipo desse texto para largura automática assim. Deixe-me reduzir esse texto, apenas alinhe-o com sua outra camada de texto. Em seguida, deixe-me ir em frente e mudar sua cor. Eu vou ter um gradiente para esse texto. Deixe-me criar rapidamente um gradiente. Vou usar roxo e esse roxo claro, assim mesmo. Não se preocupe com a cor. Você sempre pode ajustá-lo mais tarde. Algo assim deve funcionar muito bem. Agora vou clicar duas vezes nesse texto. Vou pressionar Enter para criar uma nova linha e vamos escrever nossa segunda palavra. Vamos escrever com facilidade. Pressione Enter e vamos escrever com eficiência. Agora precisamos criar de alguma forma uma máscara aqui. Podemos usar uma máscara, mas em vez disso, vou te mostrar um bom truque. Em vez de usar uma máscara, basta clicar com o botão direito do mouse nesse texto e clicar na seleção de molduras. Basicamente, vamos colocar esse texto dentro de um quadro. Veja, agora temos o quadro um aqui. Então, vou diminuir a altura dessa moldura assim e marcar esta caixa de seleção que diz Conteúdo do clipe aqui. Basicamente, mascaramos as outras duas palavras aqui, e é exatamente disso que precisamos. Agora, vou selecionar esses dois textos. Basicamente, temos um quadro e uma camada de texto. Clique com o botão direito aqui e novamente, clique nessa seleção de quadro para criar outro quadro. Vamos renomeá-lo para o quadro um. Agora podemos duplicá-lo. Pressione Control D ou Command D, mais uma vez duplique-o. Em seguida, o que precisamos fazer é isso. Precisamos clicar duas vezes em nossa camada de texto dentro desse quadro que criamos e simplesmente movê-lo para cima. Posso usar as teclas de seta do meu teclado para mover esse texto para cima, assim. Se você quiser alinhá-lo perfeitamente com essa camada de texto, basta colocá-lo fora desse quadro e alinhá-lo com a linha de base desse outro texto e colocá-lo dentro novamente, assim mesmo. Vamos fazer a mesma coisa com os outros textos. Vou selecioná-lo e movê-lo para cima desse jeito. Deixe-me alinhá-lo rapidamente. Está perfeitamente alinhado e vou colocá-lo dentro desta moldura. Tudo bem até agora, tudo bem. Agora precisamos selecionar esses três quadros. Precisamos ir até a barra de ferramentas e clicar nessa pequena seta. Esse menu suspenso é aberto e precisamos clicar em criar conjunto de componentes. Assim que eu fizer isso, esse conjunto de componentes será criado e, por dentro, teremos nossas variantes. Se você não sabe quais são as variantes, deixe de conferir meu vídeo sobre variantes. Você pode encontrar o link no canto superior direito. Mas, por enquanto, só precisamos acessar a guia Protótipo aqui e torná-los interativos. Precisamos criar uma interação aqui. Como podemos fazer isso? É muito simples. Vou selecionar o primeiro. Vou clicar com o botão esquerdo no botão de adição e tentar conectá-lo à próxima variante aqui. Esse menu de detalhes de interação é exibido. A partir daqui, vou mudar o gatilho para após o atraso. A duração é definida para 800 milissegundos. Está tudo bem. Vou mudar o tipo de animação de animação instantânea para animação inteligente. Aqui vou configurá-lo para facilitar a entrada e a saída. Você pode escolher a opção que quiser aqui. Você pode escolher, por exemplo, bouncy quick, depende totalmente de você, mas eu realmente prefiro este. Parece muito bom. Deixe-me ajustar a duração para talvez 600 milissegundos. Agora precisamos repetir esse processo para as outras variantes, vou selecionar esse quadro agora. Vou criar uma nova interação como essa. Aqui, altere o gatilho para após o atraso. Não altere essa duração aqui porque queremos que elas sejam iguais. Não precisamos mudar mais nada. Finalmente, vou selecionar este, o último, e conectá-lo ao nosso primeiro quadro. Assim, mude o gatilho para após atraso e o resto está bem, e basicamente terminamos. Agora deixe-me mostrar como você pode usá-lo. Eu vou para Assets. A partir daqui, vou arrastar e soltar meu componente diretamente no meu design. Caso queira modificar as cores aqui, você pode simplesmente acessar as cores de seleção aqui e ajustar a cor conforme desejar. Você também pode modificar o gradiente. Deixe-me ir em frente e mudar o gradiente rapidamente. Eu gosto muito desse. Agora vamos experimentar e ver como fica. Vou selecionar minha moldura e visualizá-la. Lá vamos nós. Aqui está nossa linda e suave animação. 13. Menu interativo para Dropdown: [MÚSICA] Bem-vindo de volta. Neste vídeo, vou mostrar como criar esse menu suspenso interativo. Aqui, assim que eu clico nesse menu suspenso, ele se abre e veremos essas opções, que nos permite selecionar entre esses idiomas. Precisamos ter uma bandeira e também uma camada de texto simples e, como você pode ver, temos diferentes estados dessas opções. Temos o estado do mouse e também podemos selecionar esses idiomas. Se eu clicar nesse inglês, aí está, nosso texto de espaço reservado foi alterado e obtemos essa bandeira aqui também. É totalmente interativo e é muito útil aprender como criar um componente interativo tão complexo dentro do Figma. Se você estiver pronto, vamos mergulhar. Para esse elemento, decidi mostrar como criá-lo do zero. Porque se você não entender como esse menu suspenso é criado, seria muito difícil para você entender como o tornamos interativo. Vamos criá-lo do zero. Mas se você simplesmente acessar a página do menu suspenso interativo no projeto Figma, verá que eu já preparei essas bandeiras para você. Temos quatro bandeiras diferentes com nomes diferentes. O primeiro passo é transformar essas bandeiras em componentes. Vou selecionar todos eles e ir até a barra de ferramentas aqui e clicar na seta para baixo para abrir esse menu suspenso. Aqui, vou clicar em Criar vários componentes, assim mesmo. Agora, cada uma dessas bandeiras é um componente. Isso é bom. A próxima etapa é criar o item. O que você vê aqui, cada uma dessas opções é chamada de item dentro do nosso menu suspenso. Para isso, basta ter uma camada de texto simples, uma bandeira ao lado dela, e ela deve ser retangular. Vou pressionar “T” no meu teclado e o tamanho da fonte pode ser de 18 pontos, e vou digitar inglês. Em seguida, vou adicionar outro layout para torná-lo responsivo. Pressione shift e A e, como você pode ver agora, ele foi alterado para o Quadro 1, então agora está responsivo. Precisamos de uma cor de fundo para isso, então vou adicionar um preenchimento a ela também. Pode ser branco ou pode ser um tom de azul muito claro ou qualquer outra coisa. Eu vou escolher o azul. Deixe-me mudar a cor aqui para um tom de azul bem claro, assim, e nossos textos devem ter um tom muito escuro desse azul. Vou escolher a mesma cor aqui e deixá-la bem escura, assim. Deixe-me selecionar esse quadro e vou chamá-lo de item. O que mais precisamos? Precisamos de uma bandeira aqui, então vamos usar componentes aninhados. Se eu acessar a guia Ativos aqui e o menu suspenso animado, vejo essa categoria de bandeira e veremos todos os componentes da bandeira. Vou simplesmente arrastar e soltar essa bandeira inglesa no meu item, assim. Como você pode ver, nosso item é responsivo porque adicionamos outro layout a ele. Agora só precisamos mudar o alinhamento. Vou selecionar essa moldura de item e alterarei o alinhamento aqui para a esquerda e para o centro, assim. A margem entre esses elementos pode ser diminuída. Vou diminuí-lo para quatro pixels, sem mais nem menos. Mas vou mudar o preenchimento horizontal e vertical aqui também. Vou definir o preenchimento horizontal para 16 e o preenchimento vertical para 16 também, assim. Mas o problema é o seguinte. Vou selecionar esse item e vou aumentar um pouco sua largura. Algo assim deveria funcionar, talvez 170. Não se preocupe com a dimensão porque vamos mudar isso mais tarde. Por enquanto, eu só quero ter um item de amostra aqui. Bom. Agora que nosso item está pronto, vou transformá-lo em um componente. Vou clicar nesse ícone aqui. Lá vamos nós. Agora é um componente de item e agora é hora de adicionar estados diferentes a esse componente. Para isso, precisamos de uma variante. Enquanto estiver selecionado, vou clicar neste pequeno ícone aqui para adicionar uma variante a ele. Precisamos ter uma propriedade em nosso conjunto de componentes e ela será chamada de estado. Se você quiser alterar o nome da propriedade, basta selecionar todo o conjunto de componentes, ir até a seção Propriedades e clicar duas vezes em seu nome. Aqui, o primeiro será o padrão. Não precisamos mudar isso. O segundo será passar o mouse, então vou digitar hover aqui e, para esse estado de pairar, vou modificar um pouco a cor. Vou adicionar outro campo a ele e vou mudar a cor para esse azul claro e deixá-lo um pouco mais saturado desse jeito. Até agora, tudo bem. Agora vou duplicá-lo, apertar Controle D ou Comando D e este será nosso estado selecionado. Porque aqui, quando abrimos esse menu suspenso, precisamos ter o estado padrão. Como você pode ver, o italiano agora é o estado padrão. Se eu passar o mouse sobre ele, veremos o estado do mouse e, se eu clicar nele aqui, agora temos o estado selecionado. Para isso, vou alterar seu valor aqui para selecioná-lo e vou alterar esse novo campo que acabamos de adicionar a esse estado de foco. Eu só vou deixá-lo um pouco mais saturado, assim. A outra coisa que podemos fazer é selecionar esse texto e apenas alterar seu peso de regular para médio para que possamos distinguir facilmente entre esses diferentes estados. Mas ainda não terminamos porque, uma vez que tenhamos esse estado selecionado, também precisamos ter um estado de foco para esse estado selecionado. Eu sei que parece complicado, mas é o seguinte. Temos um estado de foco para esses estados padrão. Mas também precisamos ter um estado de flutuação para esse estado selecionado. Você vê que quando eu passo o mouse sobre esse estado selecionado, ele fica um pouco mais escuro vou apenas selecionar este, duplicá-lo e mudar seu valor aqui para o mouse selecionado. A única coisa que precisamos fazer é mudar um pouco sua cor aqui. Algo assim deve funcionar. Até agora tudo bem. Temos nosso item com estados diferentes e agora podemos passar para a próxima etapa, que é criar uma lista. Precisamos criar essa lista aqui. Para isso, precisamos apenas usar esse componente do item. Se eu for para Ativos, aqui posso procurar o componente do item e arrastá-lo e soltá-lo aqui. Para a lista, vou duplicar esse item, movê-lo para baixo e garantir que não haja margem entre esses dois elementos. Vou duplicá-lo duas vezes, então, no total, precisamos obter quatro itens diferentes, assim como este. Agora vamos modificar o conteúdo de cada item, por exemplo, o segundo será italiano e, como transformamos as bandeiras em componentes, posso simplesmente selecionar essa instância, ir até o inspetor de design e, usando esse menu suspenso, posso alterá-la para italiano desse jeito. A próxima será polonesa e eu também vou mudar a bandeira para a Polônia desse jeito. Em seguida, precisamos ter espanhol, e eu vou mudar a bandeira para a Espanha também, assim. Agora temos quatro itens diferentes e também vou tornar essa lista responsiva. Vou selecionar todos eles e adicionar um layout automático a eles. Vou pressionar shift e A. Pronto , vamos renomear esse quadro para listar. Mas nossa lista não é responsiva. Veja aqui que temos esse problema se eu tentar modificar a largura aqui, nada acontece, e isso é um problema porque precisamos garantir que nossa lista seja responsiva. Para corrigir isso, basta selecionar os itens nossa lista e alterar a opção de redimensionamento aqui. Se eu for até o Inspetor de design e abrir esse menu suspenso por padrão, ele estará configurado para fixar a largura. Vou configurá-lo para encher o recipiente. Agora, se eu selecionar minha lista aqui, você verá que ela é totalmente responsiva. O próximo passo é transformar toda essa lista em um componente também. Vou clicar neste botão Criar componente aqui para transformá-lo em um componente e nossos elementos primários estão prontos. O que mais precisamos? Para esse menu suspenso, precisamos ter esse menu também com esse texto de espaço reservado, que diz selecionar idioma e, em seguida, precisamos ter esse ícone de seta para baixo. Vamos criar um. Vou apertar “T” no meu teclado e começar a digitar o idioma selecionado. Deixe-me mudar sua cor para outra coisa , talvez esse azul. Então, assim como esses itens, vou adicionar outro layout a eles. Clique em “Shift and A”. Aqui temos uma moldura. Vamos renomeá-lo para menu, e esse menu não precisa ter uma ideia. Em vez disso, vou adicionar um traço a ele. Basta adicionar um traço desse jeito, e eu também posso torná-lo um pouco arredondado. Talvez eu possa aumentar o raio do canto para algo como 16 pixels. Vou mudar a cor do traço para o mesmo azul. O que mais precisamos? Também precisamos dessa seta para baixo. Para isso, posso usar um plugin. Aqui temos Iconsax. Se eu apenas executá-lo e procurar a flecha. Aqui, vou arrastar e soltar esse ícone de seta no meu projeto. Pronto, agora vou arrastá-lo e soltá-lo dentro do meu menu, desse jeito. Mas é muito grande para esse menu. Vou torná-lo um pouco menor. Vou pressionar “K” no meu teclado para selecionar a ferramenta de escala e tentar diminuir sua largura e altura para provavelmente 18 pixels. Acho que 18 parece bom. Em seguida, vou mudar o alinhamento deles, então vou selecionar esse menu e mudar o alinhamento para o centro esquerdo e, quanto ao preenchimento, vou definir o preenchimento vertical como 16, porque aqui para esses itens usamos 16 também, e o preenchimento horizontal para 16 também. Deixe-me mudar a cor desse ícone para o mesmo azul. Lá vamos nós. Mas o problema é esse menu não é responsivo, então precisamos corrigir isso. Para corrigir esse problema, vou selecionar este menu e ir para a outra seção de layout. Clique neste pequeno ícone, configurações avançadas de layout, e aqui, como você pode ver, o modo de espaçamento está definido como Empacotado. Vou mudá-lo para um espaço intermediário, assim. Agora nosso menu é responsivo. Qual é o próximo passo? Bem, o próximo passo é adicionar uma bandeira a isso também. Mas por quê? Porque aqui não temos uma bandeira. Sim, não temos uma bandeira aqui para esse texto de espaço reservado. Mas assim que selecionamos uma dessas opções, como você pode ver, essa bandeira aparece. O que precisamos fazer é isso, vou apenas acessar os ativos e arrastar e soltar uma dessas bandeiras nesse menu. Então, como vou diminuir a margem entre esses dois itens, vou selecionar essa bandeira, manter pressionada a tecla Shift, selecionar esse texto e pressionar Shift e A. Agora, e pressionar Shift e A. podemos especificar essa margem aqui sem afetar a margem entre esses elementos. Vou configurá-lo para quatro, porque usamos quatro aqui também. Precisamos manter tudo consistente. Mas é o seguinte: para esse texto de espaço reservado, não precisamos dessa bandeira. Por enquanto, vou selecionar essa bandeira assim e ocultá-la. Está lá sempre que precisamos, mas, no momento, precisamos escondê-lo. O próximo passo é transformar esse menu em um componente. Vou renomear esse menu para menu suspenso, assim mesmo, e vou transformá-lo em um componente. Para isso, precisamos ter duas variantes diferentes. Duas variantes principais, fechadas e abertas. Vou adicionar outra variante, assim como esta. Para essas variantes, precisamos ter duas propriedades. Vou selecionar esse conjunto de componentes do menu suspenso, ir até a seção Propriedades e alterar a primeira propriedade para estado. Precisamos de mais uma propriedade aqui, então vou clicar no botão “Mais” e clicar em “Variante”. Vou chamá-lo de espaço reservado. Ele cria propriedades, então, no total, temos duas propriedades, estado e espaço reservado. Para o primeiro, vou definir o estado como fechado e o texto do espaço reservado deve ser definido como padrão. Para este, o estado deve ser aberto e o espaço reservado também deve ser padrão, porque precisamos alterá-lo posteriormente. O que mais precisamos para esse estado aberto? Precisamos girar esse ícone aqui em 180 graus, então vou selecioná-lo e aqui vou definir o valor de rotação para 180, assim. Também precisamos colocar essa lista dentro dessa variante aberta. Vou até os ativos e, a partir daqui, vou arrastar e soltar essa lista aqui. Dentro da nossa lista de camadas, vou me certificar de que eles coloquem essa instância da lista dentro da minha variante aberta, assim mesmo. Não parece certo. Isso porque está ocupando espaço aqui. Como você deve se lembrar, quando não quiser que um elemento ocupe espaço, basta selecioná-lo e clicar na posição absoluta do ícone de adição. Agora ele não está mais ocupando espaço e podemos especificar sua posição. Deixe-me ampliar esse conjunto de componentes. Vou selecionar essa lista usando as teclas de seta, vou mudar sua posição. Precisamos ter certeza de que está perfeitamente alinhado com esse menu suspenso. Posso selecionar esse item da lista, manter pressionada a tecla Alt no meu teclado e, como você pode ver, a margem esquerda está definida como 21. Vou movê-lo para a esquerda para obter uma margem esquerda de 20 pixels. Aqui também temos uma margem esquerda de 20 pixels. Em seguida, precisamos ajustar sua largura, então vou selecionar essa lista e alterar sua largura para 250 também. Exatamente assim. Agora, como temos cantos arredondados para esse menu, podemos modificar também podemos modificar o estilo da nossa lista. Para esses elementos, usei um valor de raio de canto de 16 pixels. Também precisamos usar o mesmo valor para essa lista. O que precisamos? Precisamos que esses cantos sejam arredondados. Vou selecionar esse item principal dentro desta lista. Precisamos ter acesso a cantos individuais, então vou clicar nesse pequeno ícone que diz cantos independentes. Aqui, precisamos modificar esses dois valores. Vou configurá-los para 16, este 16 também. Em seguida, precisamos selecionar esse item inferior e ir para os cantos independentes. Desta vez, precisamos modificar esses dois valores. Vamos ajustá-los para 16, e lá vamos nós. Agora temos um estilo consistente. Agora temos duas variantes, então podemos fechar e abrir esse menu suspenso. Mas e se eu clicar em uma dessas opções? Se eu selecionar uma dessas opções, esse texto de espaço reservado deverá ser alterado para qualquer opção que eu selecionei, e a bandeira também deverá aparecer. O que eu vou fazer é isso, vou selecionar essa opção fechada. Vou clicar em Control D ou Command D para duplicá-lo. Está colocado aqui, mas não se preocupe com isso. Vamos simplesmente movê-lo, então está aqui. Vou selecioná-lo e, usando as teclas de seta, vou movê-lo para o lado direito. Deixe-me ampliar esse conjunto de componentes dramaticamente, precisamos de mais espaço e vou colocá-lo aqui. No total, precisamos ter quatro opções. Precisamos ter um para inglês, um para italiano, um para polonês e outro para espanhol. Aqui, vou clicar duas vezes neste texto e alterá-lo para o inglês, e também preciso mostrar essa bandeira. Vou mudar esse valor de espaço reservado para inglês, assim mesmo. Em seguida, vou duplicar isso para obter quatro itens diferentes e vou modificar seus textos um por um. O segundo será italiano. Obviamente, a bandeira também deve ser trocada. O terceiro será polonês, deixe-me mudar a bandeira também. O último será espanhol, e eu vou mudar a bandeira aqui para a Espanha. O próximo passo é criar nossas interações. Vou selecionar esse menu suspenso fechado. Vou até o protótipo e vou conectá-lo a esse estado aberto. Deve ser Ao clicar, e a animação será Smart Animate. Em seguida, vou selecionar este e conectá-lo novamente ao nosso estado fechado. Não precisamos alterar nenhuma dessas opções. Mas e esses? Vou selecionar esse item em inglês e conectá-lo a essa variante em inglês. Vou fazer a mesma coisa com todas essas opções, uma por uma e mais uma. Estamos quase terminando, mas há mais uma coisa a fazer. Se eu simplesmente abrir esse menu suspenso, você verá quando uma opção é selecionada, quando eu a abro, ainda vejo essa opção selecionada. Isso é exatamente o que eu quero. Não quero que ele volte ao estado padrão. Sempre que eu seleciono inglês, por exemplo, e o abro, o inglês deve ser selecionado por padrão. Para isso, precisamos selecionar essas variantes, mantenha pressionada a tecla Shift para selecionar todas elas. Duplique-os, pressione Controle D ou Comando D, mova-os para baixo. Em seguida, precisamos selecionar essa lista, copiá-la, pressionar o controle C ou o Comando C e colá-la dentro dessas variantes. Vou selecionar inglês, pressionar Control V ou Command V, italiano também, polonês e espanhol. O que precisamos fazer é mudar o estado dessas opções. Por exemplo, para esse inglês, vou selecioná-lo, ir para design e aqui vou mudar o estado de padrão para selecionado. Vou fazer a mesma coisa com o italiano aqui, vou mudar para selecionado. Para polonês, vamos alterá-lo para selecionado. Finalmente, para o espanhol, vou alterá-lo para selecionado. A última etapa é conectar essas variantes também. Assim como fizemos com essas duas opções de menu suspenso, vou fazer a mesma coisa com isso. Vou selecionar este, ir até o protótipo, conectá-lo a essa variante aberta. Basta fazer a mesma coisa com este, conectá-lo novamente ao inglês. Eu vou fazer isso para todas essas opções, porque deve funcionar nos dois sentidos. Lá vamos nós. Agora que terminamos, nosso menu suspenso interativo deve funcionar perfeitamente. Vamos tentar e ver se funciona conforme o esperado. Vou criar uma moldura aqui, clicar em A e criar uma moldura de tamanho personalizado. Então eu vou para os ativos. A partir daqui, vou simplesmente arrastar e soltar esse menu suspenso. Vamos alinhá-lo ao centro, e eu vou selecionar esse quadro, aperte play. Agora vou clicar nele. Lá vamos nós. Nosso menu suspenso é aberto, mas aqui temos um problema. Como você pode ver, quando eu passo o mouse sobre essas opções, nada acontece. Isso porque não conectamos esses estados dentro desse conjunto de componentes do item. Vamos fazer isso rapidamente. Vou selecionar esse padrão, ir para protótipo, conectá-lo para passar o mouse. Deve ser While hovering e também Smart Animate. Bom. Para o próximo, vou selecioná-lo, conectá-lo ao selecionado. Deve ser On Click, Smart Animate. Então, para esta opção selecionada ao passar o mouse, vou selecionar esta, conectá-la assim, e ela deve ser Enquanto estiver passando o mouse. Agora deve funcionar. Vamos abrir esse menu suspenso. Vou passar o mouse sobre esses itens. Como você pode ver, funciona perfeitamente. Vou selecionar inglês agora. Lá vamos nós. Quando abro esse menu suspenso, esse inglês é selecionado por padrão. Mas aqui temos outro problema. Quando eu seleciono uma opção, esse ícone não está girando. Isso porque esquecemos de girar esses ícones aqui. Deixe-me selecionar todos eles, basta manter pressionada a tecla Shift e clicar duas vezes nesses ícones. Vá para Design, e aqui vou girá-los em 180 graus. Agora, tudo deve funcionar bem. Vamos atualizar a página. Eu vou abri-lo. Vou configurá-lo para italiano, e lá vamos nós. Tudo funciona conforme o esperado. Tudo bem pessoal, isso é tudo para este vídeo. Espero que tenham gostado e nos vemos na próxima. 14. Notificação para animação: Neste vídeo, vou mostrar como criar uma notificação animada no Figma. Eu poderei interagir com ele. Se eu simplesmente arrastá-lo para o lado esquerdo, como você pode ver, esse botão de limpar aparecerá e se eu clicar nesse botão de limpar, ele desaparecerá. Vamos ver como podemos criar um elemento tão interativo. No projeto Figma, procure a página de notificação animada. Aqui, como você pode ver, eu já preparei esta página de detalhes para você e este cartão de notificação, e este cartão de botão transparente. Veja como isso deve funcionar. Depois de visualizarmos esta página de detalhes após talvez três segundos, esse cartão de notificação deve deslizar para dentro e, quando eu o arrasto para o lado esquerdo, esse botão transparente deve aparecer e também deve ser interativo. O que precisamos fazer? Em primeiro lugar, vou selecionar esse cartão de notificação aqui. Como você pode ver, é um quadro responsivo, mas vou colocá-lo dentro de outro quadro. O motivo é que, como ponto de partida, precisamos fazer com que esse cartão de notificação desapareça. Precisamos mascará-lo de alguma forma e, para mascará-lo adequadamente, também precisamos ter uma moldura. Vou clicar com o botão direito do mouse sobre ele e clicar na seleção de quadros. Vamos renomeá-lo para notificação. Lá vamos nós. Em seguida, vou transformá-lo em um componente, como de costume, e também precisamos de algumas variantes. Mas antes de criar uma variação, vou modificar a altura desse quadro porque, como eu disse, em nosso ponto de partida, não deveríamos ser capazes de ver essa notificação de forma alguma. Antes de criar a variação, vou aumentar a altura dessa moldura, algo assim. Deve funcionar e , em seguida, vou adicionar uma variante como esta. Temos duas variantes aqui. Para esse componente, precisamos ter duas propriedades diferentes. Precisamos ter a propriedade visível e a propriedade clara. Por que precisamos dessas duas propriedades? Então, como eu disse antes, esse cartão de notificação não deve estar visível e deve ser inserido após alguns segundos. Como nosso ponto de partida, precisamos escondê-lo. É por isso que precisamos da propriedade visible e a propriedade clear é para quando precisamos fazer com esse botão apareça ou desapareça. Vamos seguir em frente e criar essas propriedades. Vou selecionar esse conjunto de componentes de notificação e vou até a seção de propriedades aqui no inspetor de design. Aqui vamos renomear essa propriedade 1 para visível, e então eu vou clicar no botão “Mais” para criar uma nova propriedade e vou chamá-la de clara, assim mesmo. No total, temos duas propriedades. Agora, quanto ao ponto de partida, que é essa variação, vou mudar o valor dessa propriedade visível para false porque ela não deveria ser visível. Para este, vou alterar a propriedade visível para verdadeira porque ela ficará visível e vou selecionar essas duas variantes agora e definir o valor claro como falso porque, nesse estágio , não deveríamos conseguir ver esse botão. Até agora, tudo bem. A próxima etapa é mascarar de alguma forma esse cartão de notificação. A maneira como fazemos isso é assim. Como colocamos esse cartão de férias em outro quadro, podemos simplesmente selecioná-lo aqui dentro de nossa variante e, usando as teclas de seta, posso movê-lo para cima desse jeito. No entanto, ainda está visível. Isso porque precisamos selecionar nossa variação aqui e marcar a caixa de seleção do conteúdo do clipe. Assim que eu faço isso, como você pode ver, ele desaparece, então de alguma forma nós o mascaramos. Vou até a guia do protótipo e vou conectar essa variante a essa variante. O gatilho deve ser configurado para após o atraso. Vou configurá-lo para 3.000 milissegundos ou três segundos e aqui precisamos ter uma animação inteligente. Vamos usar esse componente de notificação e ver como ele funciona. Vou arrastar e soltar uma instância disso aqui. Vamos alinhá-lo à borda superior da tela, assim. Vou selecionar esta página de detalhes e clicar em “Jogar”. Aqui temos um problema e acho que é porque também esquecemos de marcar essa caixa de seleção para essa variante. Vou recortar o conteúdo aqui e vamos atualizar a página. Lá vamos nós. Agora funciona corretamente. No entanto, precisamos ter alguma margem superior. Não temos nenhuma margem no momento. O que eu vou fazer é isso vou selecionar essa carta aqui na minha segunda variante e vou alinhá-la na parte inferior em vez de na parte superior. Se eu apenas atualizá-lo agora, ele funciona muito bem, mas aqui temos muita margem , então talvez eu possa alinhá-lo ao centro. Acho que agora temos margem superior suficiente. A primeira etapa está concluída, mas a interação de arrastar? Para isso, vou colocar esse botão transparente dentro dessa variante. Basta colocá-lo dentro e alinhá-lo ao centro e movê-lo para o lado direito. Em seguida, vou diminuir sua opacidade para zero por cento para torná-la invisível porque aqui, como você pode ver, a propriedade clear está definida como falsa então não devemos ser capazes de ver esse botão específico. Agora precisamos de mais uma variante aqui. Vou selecionar este, clique no ícone “Mais” aqui para adicionar mais uma variante. O que eu vou fazer agora é isso. Vou selecionar esses dois elementos, o cartão de notificação e esse botão de limpar, e usando as teclas de seta, vou mover tudo para o lado esquerdo, assim mesmo. Deixe-me selecionar esse botão transparente e aumentar a opacidade para 100 por cento para torná-lo visível novamente Precisamos movê-lo para o lado esquerdo. Parece bom. Agora, vamos criar uma interação entre essa variante e essa. Para fazer isso corretamente, é muito importante selecionar esse cartão de notificação, não essa variante. Por quê? Deixe-me te mostrar o porquê. Se eu selecionar essa variante aqui e tentar conectá-la a essa variante mudo o gatilho de desclicar para desarrastar, veja o que acontece. Você vê que assim que eu a arrastar um pouco, essa animação será reproduzida e pronta. Não é isso que queremos. Eu realmente quero ser capaz de controlar essa interação sozinho. É por isso que eu disse que precisamos adicionar essa interação ao cartão de notificação em si, não à variação. Esse é um ponto muito importante a ter em mente. Vou remover essa interação e, em vez disso, selecionarei esse cartão de notificação e o conectarei a essa variante. Agora, se eu configurá-lo para desarrastar, tudo deve funcionar corretamente. Eu posso fazer isso das duas maneiras. Também posso selecionar este e conectá-lo novamente a este e configurar o gatilho para desarrastar e animar de forma inteligente. Vamos ver se funciona corretamente agora. Agora eu posso arrastá-lo para a esquerda ou para a direita, assim. Funciona muito bem. No entanto, temos um problema aqui. Como você pode ver, está de alguma forma mascarado tanto no lado esquerdo quanto no direito. Precisamos consertar isso. Se eu apenas selecionar essa instância e tentar aumentar a largura dessa forma, vamos ver se isso resolve o problema. Funciona muito bem, mas agora temos esse problema. Como você pode ver, não há margem intermediária. Isso se deve às nossas restrições. Aqui, vou selecionar esse botão transparente e, como você pode ver, as restrições são definidas na parte superior e esquerda. Se eu colocá-lo para cima e para a direita em vez disso, para este também, vou configurá-lo para cima e para a direita. Vamos ver se funciona. Funciona, mas agora temos muita margem. Deixe-me movê-lo um pouco para o lado esquerdo. Agora parece muito melhor, mas há um último passo que precisamos dar. Também precisamos tornar esse botão claro interativo. Vamos fazer isso. A única coisa que precisamos fazer é selecionar essa variante, apertar esse botão de variantes de anúncio. Em seguida, vou selecionar os elementos dentro deles para pressionar “K” para selecionar a ferramenta de escala e vou reduzi-la assim. Vou definir o valor como 0,01. Além disso, vou diminuir sua opacidade para zero por cento para fazê-los desaparecer completamente. Agora, se eu selecionar esse botão transparente aqui, ir para o protótipo e conectá-lo a esta última variante aqui, o gatilho deve ser desclicar, animação inteligente. Agora deve funcionar. Vamos tentar. Lá vamos nós. Tudo funciona conforme o esperado. Vamos tentar mais uma vez. Nossa notificação interativa também está pronta. Vamos encerrar esse vídeo e nos vemos no próximo. 15. Ilha dinâmica do iPhone: Neste vídeo, vou mostrar como criar essa ilha dinâmica interativa para iPhones. Sem mais delongas, vamos começar. Procure a página da ilha dinâmica do iPhone no arquivo de design Figma. Aqui, como você pode ver, eu já preparei uma maquete para você aqui. Também temos duas variantes de nossa ilha dinâmica. Basicamente, temos uma ilha dinâmica próxima e uma ilha dinâmica aberta. O que precisamos alcançar aqui? Por padrão, devemos ser capazes de ver essa versão fechada. Quando eu clico nele, seu plano de fundo deve se expandir e também devemos ser capazes de ver todos esses elementos internos. Aqui, como você pode ver, temos uma moldura e no interior temos dois elementos principais. Temos essa câmera selfie. Não tenho certeza se você pode ver ou não, é tão pequeno. Também temos esse invólucro que reúne todos esses elementos, como essa imagem de perfil e todos esses elementos internos. Como sempre, precisamos transformar isso em um componente, mas antes de fazer isso, quero colocá-lo dentro de outro quadro. É muito importante. Se você não colocá-lo dentro de outro quadro, não conseguirá alinhar tudo perfeitamente. Esse é o ponto mais importante aqui. Vou clicar com o botão direito sobre ele e clicar em “ Seleção de molduras ” para colocá-lo dentro de outro quadro. Vamos chamá-la de ilha. Perfeito. Agora vou transformá-lo em um componente como esse e precisamos de mais uma variante. Precisamos abrir e fechar. Esse conjunto de componentes deve ter uma propriedade. Vou renomear essa propriedade para state, selecionar essas variantes e alterar esse valor de estado de padrão para aberto. Vou selecionar essa variante e alterar o valor do estado para fechado. Agora, a única coisa que vou fazer é selecionar essa moldura dinâmica de ilha dentro dessa variante fechada. Vou verificar as marcas de verificação do conteúdo do clipe. Agora, eu posso ir em frente e modificar sua dimensão. Como você pode ver, esse invólucro interno agora está mascarado. Por quê? Porque marcamos a caixa de seleção do conteúdo do clipe. Qual deve ser a dimensão? Deixe-me dar uma olhada aqui. A dimensão deve ser 125 por 37. Vou selecioná-lo mais uma vez e definir a largura para 125 e a altura para 37, assim, mas ainda não terminamos. Em primeiro lugar, enquanto esse quadro estiver selecionado, vou alinhá-lo ao centro. Ele deve ser colocado no meio de todo esse quadro. Você vê aquela moldura? Em seguida, precisamos modificar a câmera selfie porque acabamos de destruí-la. Aqui temos a câmera selfie. O tamanho disso deve ser 13 por 13. Vou mudar sua dimensão para 13 por 13. Lá vamos nós. Também precisamos mudar seu alinhamento. Aqui, se eu selecionar isso e mantiver pressionada a tecla Alt ou a tecla Option no meu teclado, você verá que o preenchimento superior está definido como 12 e o preenchimento direito está definido como 133. Aqui, vou selecionar isso e me certificar de obter exatamente o mesmo preenchimento. Deixe-me derrubar isso. Aqui, como você pode ver, temos um decimal, vou removê-lo para esse y também. Agora posso definir facilmente o preenchimento como 12 e o preenchimento correto deve ser medido relação a toda essa moldura, essa moldura externa, e deve ser definido como 133. Lá vamos nós. Agora, deixe-me selecionar essa ilha dinâmica aqui. Eu vou até o protótipo e simplesmente conectá-lo a este. O gatilho deve ser desclicado e a animação deve ser uma animação inteligente. Vou selecionar essa, essa variante e conectá-la novamente a essa versão fechada, assim como esta, e ao smart animate. Vamos experimentar e ver como fica. Eu vou para Assets. A partir daqui, vou para a ilha dinâmica do iPhone. Traga-o aqui. Deixe-me alinhá-lo ao centro e ele deve ser colocado aqui. Vou mudar seu estado padrão para fechado. Agora vou selecionar essa maquete e clicar em “Jogar”. Agora eu posso clicar nele. Olha o que acontece. O plano de fundo é uma propriedade animada. É isso que queremos. Queremos que ele se expanda e colapse, assim mesmo. No entanto, quero que os elementos desse invólucro diminuam e desapareçam quando tentarmos fechar essa ilha dinâmica. Eu não quero que ele se mova para o lado direito. Não é isso que eu quero. Vamos em frente e consertar isso. Aqui, dentro dessa variante fechada, vou procurar o invólucro e, como você pode ver, ele está colocado aqui. Eu vou reduzi-lo. Vamos pressionar K no meu teclado para selecionar a ferramenta de escala. Então, aqui eu vou definir o valor como 0,01. Também quero que ele se mova aqui no centro e depois desapareça. Vou movê-lo para lá. A última etapa é diminuir a opacidade da camada até zero. Vamos tentar mais uma vez e ver como funciona. Lá vamos nós. Você pode ver a diferença agora? Isso é o que eu queria. Estamos quase terminando. No entanto, não estou satisfeito com a animação. Não temos nenhum efeito de salto. Se você der uma olhada neste, verá que temos esse efeito de salto, que faz com que a animação pareça muito melhor. Vamos corrigir isso rapidamente também. Eu vou selecionar este. Vá até Prototype, clique nessa interação. Vou mudar a velocidade de Ease out para Quick e a mesma coisa para essa variação. Vou selecioná-lo e alterar a velocidade de Ease out para Quick. Agora, se dermos uma olhada, tudo deve funcionar. Lá vamos nós. Veja, agora temos esse efeito de salto. Isso é tudo para este vídeo. Espero que tenham gostado e nos vemos na próxima. 16. Animação 3D na Figma: Neste vídeo, vamos criar uma animação 3D juntos no Figma. Aqui, como você pode ver, temos um cartão de crédito e veja o que acontece quando eu passo mouse sobre esse cartão. Você vê isso? Assim que eu passo o mouse sobre esta carta sua perspectiva muda para essa perspectiva easométrica e, em seguida, duas outras cartas aparecem. Não se preocupe, vai ser muito mais fácil do que você pensa. Vamos analisá-lo mais uma vez. Primeiro, como nosso ponto de partida, precisamos ver apenas uma carta, essa carta azul, e quando eu passo o mouse sobre ela, sua perspectiva muda assim. Então veremos essas duas cartas aparecerem. Precisamos de três etapas diferentes. Precisamos do nosso ponto de partida ou ponto A, depois precisamos do ponto B, que está aqui e depois precisamos do ponto C, que é o destino final. Agora vamos começar a criá-lo. Se você procurar esta página de animação 3D dentro do arquivo de design do Figma, verá que já preparei este projeto para você. Aqui temos uma seção de heróis de um site, e aqui eu preparei três cartões de crédito diferentes. Obviamente, podemos seguir em frente e criar essa interação usando componentes e variância. No entanto, vou mostrar como isso é feito aqui usando molduras diferentes para realmente entender as etapas que precisamos seguir. Vou selecionar esses três cartões e movê-los para minha primeira página inicial para desktop. Até agora tudo bem. Agora, deixe-me alinhá-los horizontalmente desse jeito. E quanto à ordem dos nossos cartões? Primeiro, precisamos ver esse cartão azul e depois o roxo no meio e, finalmente, o cartão prateado na parte inferior. Vou ver a carta 3 aqui na parte superior e a carta 1, que era a prateada, estará na parte inferior. Agora vou selecionar esses três e depois alinhá-los. Esse será nosso ponto de partida. Agora, enquanto essas três cartas estão selecionadas, vou clicar em Control+C ou Command+C, selecionar esta segunda página inicial, pressionar Control+V ou Command+V para colá-las aqui e agora é hora de mudar a perspectiva dessas cartas para a perspectiva easométrica. Não tenho certeza se você está familiarizado com o termo easométrico ou não, mas deixe-me mostrar como você pode fazer isso. Para mudar a perspectiva dessas cartas, vamos usar um plugin chamado assimétrico. Aqui, se eu for para Recursos e se eu for para a guia Plugins, você encontrará muitos plug-ins aqui. Temos diferentes tipos de plug-ins. Temos o plugin easométrico ou easométrico. Se você não vê esses plug-ins, tudo bem, porque eu já procurei por esses plug-ins. Mas aqui você pode pesquisar por easometria. Lá vamos nós. Aqui está o plugin que vamos usar. Este plugin permite que você mude a perspectiva de seus elementos, seja ela qual for, para uma perspectiva easométrica. Você só precisa clicar em Executar aqui e clicar em Abrir Easometria. Mas para poder usar esse plugin, você precisa ter certeza de selecionar apenas um quadro por vez. Vou selecionar o cartão 1 aqui. Eu vou para um Easometric, aperte Run, abra o easometric aqui, e essa janela aparecerá. Aqui temos diferentes opções para escolher. Nós temos a esquerda, temos o canto superior esquerdo, temos o canto superior direito. Acho que vamos precisar do canto superior direito. Como você pode ver agora, temos essa perspectiva easométrica para este cartão 1. Isso é exatamente o que precisávamos. Em seguida, vou selecionar esta carta 2 e fazer a mesma coisa. Você pode simplesmente abri-lo aqui e selecionar o canto superior direito. Por último, mas não menos importante, vamos fazer isso com esta carta 3. Lá vamos nós. Agora temos três cartões easométricos e vou selecionar todos eles e apenas alterar seu alinhamento da maneira que eu quiser. Agora, como nosso último passo, vamos selecionar essas cartas aqui, copiá-las, pressionar Control+C e colá-las aqui, pressionar Control+V ou Command+V. Depois, basta selecionar esta carta 3, manter pressionada a tecla Shift e usar as teclas de seta para movê-la para cima ou para baixo. Basicamente, movi para cima de 80 pixels, agora vou selecionar esta placa e movê-la para baixo em pixels. Mantenha pressionada a tecla Shift e mova-a para baixo assim. Agora precisamos criar nossas interações. Sim. Primeiro, vou criar um atraso posterior por aqui e, em seguida, também criaremos esse gatilho de passar o mouse. Vou selecionar esta página inicial para desktop, ir até o protótipo e conectá-la à próxima página. O gatilho será após o atraso, animação inteligente, e deve ser Ease out. Vou aumentar a duração aqui, caso contrário, seria muito rápido. Deixe-me aumentá-lo para 1.000 milissegundos. Vou clicar em play aqui para visualizá-lo por um segundo. Lá vamos nós. Fomos do ponto de partida para o ponto B, e agora precisamos ir para o ponto C. Aqui, vou selecionar essa tela e criar uma interação como essa. Depois de um atraso, a animação inteligente será de 1.000 milissegundos. Nesta etapa, quando queremos ir desta página até o destino, não precisamos ter nenhum atraso. Vou definir esse valor de atraso para um milissegundo. Agora, deixe-me atualizar a página. Agora parece muito bom, mas podemos passar para o próximo nível adicionando pouco de sombra projetada a essas cartas para tentar torná-las mais realistas. Vou selecionar essas cartas, todas elas vão para o design e aqui vou adicionar efeitos a elas. Vou me certificar de que tenho o efeito de sombra projetada e me deixar modificar suas preferências. Aqui eu vou definir a quantidade de desfoque para 100 e aqui o Y vai ser 50, assim e a opacidade pode ser reduzida para 20 por cento, algo assim. Agora vamos ver como fica. Você vê que parece muito melhor. Você aprendeu a criar essa animação, mas não temos esse gatilho. Agora vamos mudar um pouco os gatilhos. Aqui. Vou selecionar esta página e remover essa interação aqui também. Agora, vou selecionar esta placa três e conectá-la à próxima página. Para o gatilho, vou selecionar enquanto passo o mouse e ele deve ser uma animação inteligente, mas daqui até aqui, precisamos ter o gatilho pós-atraso. Não precisávamos remover isso de jeito nenhum, mas deixe-me criá-lo novamente. Deve ser após um atraso e um milissegundo e, aqui, também precisamos ter um gatilho. Que tipo de gatilho? Para isso, poderíamos usar o gatilho de saída do mouse. Então, o que eu vou fazer é isso. Vou selecionar essas três cartas e adicionar um gatilho a todas elas. Vamos ver se funciona ou não. Enquanto estiverem selecionados, crie uma conexão de volta à primeira tela e um gatilho será sair do mouse. Vou tocar esse fluxo mais uma vez. Vou passar o mouse sobre ele. Lá vamos nós, e agora veja o que acontece. Você vê isso? Funciona muito bem. No entanto, é bem lento. Vou diminuir a duração aqui. Deixe-me selecionar este e alterar a duração de 1.000 milissegundos para talvez 500 milissegundos e, para esses gatilhos, vou configurá-lo para 500, este para 500 também e, finalmente , para este, vou configurá-lo para 500. Vamos tentar mais uma vez. Vou passar o mouse sobre ele, lá vamos nós. Eu vou embora. Parece lindo, não é? Agora, como desafio, quero que você vá em frente e recrie essa interação usando componentes interativos. vejo no próximo vídeo. 17. Carregando animação: [MÚSICA] Bem-vindo de volta. Neste vídeo, vou mostrar como criar um botão interativo com animação de carregamento. Veja o que acontece quando eu clico nesse botão Pagar. Você viu isso? Quando cliquei no botão Pagar, uma animação giratória apareceu mas quando o processamento foi concluído, esse ícone de ticker animado apareceu. Deixe-me jogar mais uma vez. Vou clicar nele. Vemos esse spinner e , finalmente, essa animação de carrapato. Vamos mergulhar e criar isso. No arquivo do projeto Figma, acesse a página de animação de carregamento e, como você pode ver, não há nada aqui porque quero mostrar como criar rapidamente o spinner do zero. Para fazer isso, a única coisa que precisamos é de uma elipse. Vou escolher a Ferramenta Ellipse, manter pressionada a tecla Shift, clicar com o botão esquerdo e arrastar para criar um círculo perfeito. O tamanho realmente não importa, mas vou mantê-lo em 24 por 24 pixels. Em seguida, vou ampliar desse jeito e quando você passar o mouse sobre ele, você vê esse pequeno círculo que diz Arco. Vou clicar nele. Agora, enquanto estiver selecionado, vou até o inspetor de design e, como você pode ver aqui, temos algumas propriedades para modificar. Você vê essa proporção de zero por cento, eu vou aumentá-la. Aqui, se eu aumentar para 20, veja o que acontece. Veja, agora temos um orifício no meio e podemos controlar facilmente essa proporção. Vou mudar a espessura para algo assim. Acho que 75 por cento parece bom e, em seguida, vou adicionar um gradiente a ele. Vou até o Feel e aqui vou mudar o tipo de Sólido para Angular. Não vou usar linear, vou usar Angular para obter esse gradiente. Isso é exatamente o que precisamos para um spinner. Agora vou mudar a direção desse gradiente assim porque o ponto de partida deveria estar aqui e basicamente terminamos. Este vai ser nosso spinner. Vou chamá-lo de spinner. Agora é hora de criar essa animação. Aquela animação giratória. Para fazer isso, como sempre, vamos usar um conjunto de componentes. Deixe-me transformá-lo em um componente como esse e, em seguida, precisamos ter algumas variantes. Vou clicar nesse botão de adição para adicionar uma variante. O que precisamos? Precisamos selecionar o botão giratório interno e girá-lo, mas não podemos girá-lo em 360 graus. Não é assim que funciona, porque dessa forma, Figma não pode criar aquela animação giratória, aquela animação em loop que estamos procurando. Então, o que precisamos fazer? Bem, precisamos girá-lo 90 graus no sentido horário. Vou manter pressionada a tecla Shift e garantir que você selecione essa camada giratória em sua variante. Não selecione sua variante em si. Vou selecionar esse girador e aqui vou alterar o valor da rotação para menos 90 para girá-lo no sentido horário. Em seguida, vou selecionar essa variante também e duplicá-la novamente. Aqui, vou clicar duas vezes para selecionar o botão giratório e girá-lo em 90 graus. Precisamos obter menos 180. Aqui você verá 180 porque quando você tem 180 sobre 360, não importa se você tem menos ou mais. É por isso que o Figma o altera automaticamente para 180. A única coisa importante é que você veja essa forma. Em seguida, vou selecionar essa variante, apertar mais, clicar duas vezes para selecionar o botão giratório e girá-lo em menos 90 graus. Aqui precisamos obter 90. Temos quatro variantes diferentes e agora podemos começar a conectá-las. Vou selecionar essa variante padrão, ir até a guia Protótipo e conectá-la a esta. Deve ser depois do atraso, e o atraso será de um milissegundo. Aqui, vou mudar a duração para 300, e vou repetir a mesma coisa novamente após um atraso, um milissegundo, e vou fazer isso com esta também, após um atraso, um milissegundo e, finalmente, vou conectar essa última variante volta à nossa primeira variante. Porque queremos repetir essa animação. Aqui, depois de um atraso, um milissegundo e pronto. Vamos testar essa animação rapidamente. Vou criar uma moldura como essa. Deixe-me mudar a cor do plano de fundo para preto, ir até os ativos e, a partir daqui, carregar a animação e arrastar e soltar uma instância desse componente aqui. Perfeito. Selecione esse quadro e reproduza-o. Está funcionando, mas não estou satisfeito com sua duração, sua velocidade. Eu vou fazer isso um pouco mais rápido. Vou selecionar todas essas variantes, passar para o protótipo e, em vez disso, alterarei esse valor de 300 milissegundos para 150. Vamos ver se funciona muito melhor. Parece muito melhor agora. Nosso girador de carregamento parece bom. Agora é hora de criar esse botão. Para isso, vou pressionar T no meu teclado, criar uma camada de texto e o tamanho da fonte será 17 pontos e vamos digitar Pay porque vamos criar um botão de pagamento, pressionar Shift e A para adicionar layout automático a ela e eu vou alinhá-lo ao centro. Esse botão deve ter uma cor de fundo preta. Assim, e também o preenchimento vertical será 16 e aqui vou aumentar o preenchimento horizontal para algo como 70 por enquanto. Parece ótimo. Posteriormente, podemos simplesmente modificar o tamanho ao criar uma instância desses componentes. Essa será nossa variante padrão. Vou renomeá-lo para o padrão e também posso torná-lo um pouco arredondado. Vou definir o valor do raio do canto para algo como 12 e vamos transformá-lo em um componente. Agora precisamos de algumas variantes. Vou adicionar uma variante a ela e essa segunda variante será chamada de carregamento. Perfeito, e aqui é onde precisamos adicionar esse botão giratório de carregamento. Vou para Ativos e, a partir daqui, vou simplesmente arrastar e soltar esse botão giratório de carregamento no meu botão aqui. Mas aqui temos um problema. Como você pode ver, a largura desse botão foi alterada. Isso porque a opção de redimensionamento desse botão está configurada para buzinar. Vou mudar para largura fixa e diminuir a largura para 170, assim, certifique-se de que você fixou aqui também e, quanto à margem entre esses dois elementos, vou configurá-la para talvez oito pixels. Temos nosso estado padrão, temos nosso estado de carregamento. Vamos conectá-los e ver como isso funciona. Vou fazer o protótipo, criar uma interação como essa e o gatilho deve estar no clique, animação inteligente e a duração pode ser 150, tudo bem. A única coisa que resta é criar uma moldura e experimentá-la. Aqui temos esse botão padrão. Vou selecionar esse quadro. Clique em Play. Deixe-me clicar nele. Lá vamos nós. Funciona, mas aqui temos outro problema. A altura do nosso botão também foi alterada. Também precisamos corrigir esse problema. Você sabe o que fazer aqui. Como você pode ver, a altura está definida para 53. Vou mudar sua opção de redimensionamento para altura fixa e aqui também vou alterá-la para altura fixa e a altura será 53. Deixe-me atualizar a página mais uma vez. Parece muito bom. Qual é o próximo passo? Quando clicamos no botão Pagar, quando vemos o botão giratório de carregamento, também precisamos ver essa animação do carrapato. Podemos criar essa animação de carrapatos no Figma, mas será muito demorada e não é a ideal. Em vez disso, vamos usar um plugin chamado animação Lottie. Lottie fornece elementos animados que você pode usar em seus projetos. Basicamente, o que ele permite que você faça é converter uma animação em um arquivo GIF e usá-la em seu projeto porque o Figma reproduz arquivos GIF. Aqui vou adicionar mais uma variante e depois vou até Recursos, Plugins e procurar por Lottie. Veja aqui que temos arquivos da Lottie. Eu vou executá-lo. Eu já estou logado. Certifique-se de criar uma conta e fazer login em sua conta e aqui na barra de pesquisa, vou procurar por tick. Aqui, como você pode ver, você tem várias opções. Você pode ir para a próxima página e explorar as diferentes opções aqui. Vou simplesmente ir para a página anterior e, para essa interação, vou usar esta. Acho que parece muito bom. Aqui podemos visualizar a animação e você também pode personalizá-la. Se quiser, você pode personalizar a cor, cor do plano de fundo, o que quiser. Aqui, como meu botão é preto, vou mudar a cor do fundo para preto também e depois vou inseri-lo como GIF, assim. Acho que seu tamanho pequeno funcionaria. Clique em Inserir e, como você pode ver, eu obtenho esse fundo preto. No seu caso, você pode ver esse ícone de carrapato, mas veja aqui como alterar a pré-visualização. Se você selecionar isso e ir para a seção de campo, basta clicar aqui e verá essa opção na parte inferior. Se você usar esse controle deslizante, basta selecionar a pré-visualização porque poderei visualizar o último quadro aqui e depois reduzi-lo. Aqui, a largura e a altura desse spinner são definidas como 24 por 24. Vou selecionar este e definir a largura e a altura para 24 também e depois substituí-lo por esse girador, assim. Aqui, deixe-me selecionar esse spinner e removê-lo. A única coisa que precisamos fazer agora é criar uma conexão entre esses dois. Vou selecionar essa variação. Vou pegar o protótipo e conectá-lo a este. Ele deve aparecer após o atraso. Aqui vou configurá-lo após um atraso. Oitocentos milissegundos parecem bons, e será uma animação inteligente. Eu também quero me livrar desse texto, vou remover esse texto também e agora vamos experimentá-lo e ver como funciona. Vou pagar. Lá vamos nós. Funciona muito bem. Mas aqui temos esse problema, como você pode ver, ele está se repetindo repetidamente. Esse é o problema com a animação Lottie. Infelizmente, não consegui encontrar uma opção para desativar esse comportamento de loop. No entanto, consegui resolver esse problema usando um truque. O que eu quero fazer é isso, vou selecionar esta e apenas adicionar mais uma variante e , em seguida, vou voltar aos arquivos da Lottie aqui e procurar por essa animação em particular. Vou procurar um carrapato. Pronto, abra, mude a cor do fundo. Mas desta vez eu não quero inseri-lo como GIF. Vou inseri-lo como SVG. Ao inseri-lo como SVG, basicamente você obterá um ícone estático e é exatamente disso que eu preciso agora, vou inseri-lo como SVG. Lá vamos nós. Vamos nos livrar desse e eu vou apenas selecioná-lo, reduzi-lo. Vou pressionar K no meu teclado para selecionar a ferramenta de escala e definir a largura e a altura como 24, assim e agora vou selecionar esta e conectá-la à última variante. Aqui precisamos ter depois atraso e não deve ser uma animação inteligente. Vou configurá-lo como instância porque, quando a animação estiver concluída, quero ver instantaneamente esse ícone estático. Agora eu acho que deve funcionar muito bem. Vou jogar mais uma vez. Clique em Pay. Lá vamos nós. Funcionou muito bem e, a propósito, esse botão é responsivo. Agora, se eu quiser modificar seu tamanho, posso simplesmente selecionar essa instância aqui e simplesmente ajustar sua largura para o que eu quiser. Também posso ajustar sua altura e funcionaria muito bem. Tudo bem pessoal, vamos encerrar esse vídeo. Espero que tenham gostado, e nos vemos na próxima. 18. Gradiente de malha animado: Neste vídeo, vamos criar um gradiente de malha animado dentro do Figma. Basicamente, um gradiente de malha é o que você vê aqui. Há alguns gradientes misturados. Como você pode ver, todas essas cores estão se movendo constantemente. Vamos ver como você pode recriar esse gradiente de malha animado no Figma. Se você acessar a página de gradiente de malha animado no arquivo do projeto Figma, verá que eu já preparei esta captura de tela deste site da Stripe como nossa referência. Para criar esse gradiente de malha animado, primeiro precisamos criar esse gradiente de malha. Para fazer isso, precisamos de uma moldura. Vou pressionar “A” no meu teclado e escolher essa moldura da área de trabalho aqui e criar esse gradiente. O que precisamos é de algumas formas aleatórias, algumas bolhas aleatórias para criar essas bolhas, vou usar um plugin chamado blob. Aqui vou para a guia de plugins e, a partir daqui, vou procurar por blob. Lá vamos nós. Esse é o plug-in que vou usar. Você pode usar qualquer outro plug-in que quiser ou até mesmo criar formas aleatórias usando a ferramenta de caneta que depende de você. Mas eu prefiro usar esse plug-in apenas para acelerar o processo. Eu vou executá-lo. Aqui, como você pode ver, isso nos permite controlar a complexidade e a singularidade dessa bolha. Vou clicar em “Inserir” para adicionar uma bolha. Lá vamos nós. Vou modificar a complexidade para torná-la um pouco mais exclusiva. Ele insere, e eu vou repetir esse processo várias vezes e apenas modificar essas duas variáveis para criar formas novas e exclusivas. Deixe-me fazer isso rapidamente. Acho que é o suficiente por enquanto. Temos muitas bolhas diferentes. Agora, o que vou fazer é sentir toda essa moldura da área de trabalho com essas bolhas. Vou colocar um aqui. Não está dentro da nossa moldura, não se preocupe, vamos movê-los para dentro mais tarde. Vou colocar um ali, talvez torná-lo um pouco menor. Coloque-o aqui e faça a mesma coisa para todo o quadro. Vou acelerar esse processo. Lá vamos nós. Nossa moldura está cheia dessas bolhas. Vou selecioná-los todos na minha lista de camadas. Vou me certificar de que eles estejam dentro da minha moldura. Assim mesmo. O próximo passo é mudar a cor desses blogs um por um. Vou selecionar essa, passar para sentir e, usando esse conta-gotas, vou escolher essa cor vermelha e vou fazer a mesma coisa com todas as outras bolhas. Talvez roxo para este, para este eu vou escolher amarelo. Vou acelerar esse processo. Lá vamos nós. Agora temos cores aleatórias para essas bolhas. Agora precisamos misturá-los. Vou selecionar todos eles, clicar em “Control G” ou “Command G” para agrupá-los. Em seguida, vá até a seção de efeitos aqui, aperte o botão de adição e eu vou adicionar o efeito de desfoque de camada a ela, assim. Agora, a partir das configurações avançadas, vou aumentar drasticamente a quantidade de desfoque e vou garantir que elas se misturem suavemente. Assim mesmo. Vou aumentá-lo ainda mais. Algo assim deve funcionar. Agora posso modificar o tamanho dessas bolhas e também alterar sua ordem aqui, dependendo das minhas necessidades. Algo assim deve funcionar. Estamos quase terminando. No entanto, esse gradiente parece bastante plano. Não tem nenhuma textura. Vou adicionar um pouco de ruído para fazer isso, vou usar outro plugin chamado noise. Deixe-me procurá-lo aqui. Lá vamos nós. Eu vou executá-lo. Aqui você pode ajustar esse ruído como quiser. Você pode modificar a densidade, você pode modificar o contraste, etc. Por enquanto, vou apenas modificar a densidade. Acho que algo assim deveria funcionar. Vou clicar nesse ícone de carrapato desse jeito. Como você pode ver agora, esse ruído foi adicionado à minha tela. Ainda não está dentro da moldura. Vou movê-lo para dentro desse jeito. Vou ampliá-lo desse jeito. Mas é preto. Não parece bom. O que eu vou fazer é isso, vou diminuir drasticamente a opacidade. Vou configurá-lo para talvez 10 por cento. Eu posso até diminuí-lo para talvez seis por cento, parece bom. Vou movê-lo para dentro desse grupo. Deixe-me chamar esse grupo de gradiente. que nosso gradiente de malha esteja pronto, é hora de animá-lo. A única coisa que precisamos fazer é isso. Precisamos apenas selecionar essa área de trabalho, duplicá-la e, na próxima tela aqui como nosso destino, precisamos mover essas bolhas. Vou selecionar este, por exemplo, esse vetor e movê-lo para baixo e mover esse roxo para cima e torná-lo maior. Assim mesmo. Eu também posso mover esse amarelo para cima. Eu posso mudar sua ordem e torná-la muito maior, assim. Então eu vou mover todo o resto um por um. Só queremos que Figma saiba que essas bolhas devem ser movidas e redimensionadas. Vou selecionar este desktop, ir até a guia do protótipo e criar uma conexão entre esses dois quadros. O gatilho será após o atraso. Obviamente, o atraso será de um milissegundo, e o tipo de animação deve ser uma animação inteligente. Aqui, a duração deve ser de 10.000 milissegundos porque queremos que essas bolhas se movam muito lentamente. Assim, e para repetir essa animação, vou selecionar esse segundo quadro e conectá-lo novamente a esse primeiro quadro. Todo o resto aqui deve estar intacto. Agora, deixe-me apertar o botão Play e vamos ver o resultado. Todas essas cores estão se movendo suavemente. Se quiser, você pode adicionar mais cores a esse gradiente e até mesmo ajustar a quantidade de desfoque. Agora vamos ver se podemos de alguma forma mascarar esse gradiente, como o que temos aqui neste site da Stripe. É tão simples. Vou criar um retângulo aqui, assim como este, e enquanto ele estiver selecionado, vou pressionar “Enter” para entrar no modo de edição, vou pegar esse nó inferior direito manter pressionada a tecla Shift e movê-la para cima desse jeito. Eu também posso pegar este e movê-lo para baixo. Clique em “Concluído” a seguir na lista da camada, vou mover esse retângulo um e colocá-lo abaixo do nosso grupo de gradientes. Não deveríamos ser capazes de ver isso. Antes de mascararmos esse gradiente, vou selecionar esse retângulo, clicar em “Controle C” e selecionar esse segundo quadro clicar em “Controle V” e baixá-lo também, porque precisamos ter essa camada nas duas telas. Em seguida, vou selecionar essas duas camadas, o grupo de gradientes e esse retângulo que acabamos de criar, ir até a barra de ferramentas e apertar esse botão desse jeito. Agora, como você pode ver, temos essa máscara. Vamos fazer a mesma coisa com essa tela, ótimo. Se eu simplesmente selecionar este para desktop e clicar em “Jogar”, como você pode ver, temos esse gradiente de malha animado mascarado dentro dessa forma. Gente, isso é tudo para esse vídeo. Espero que tenham gostado e nos vemos na próxima. 19. Animação de rolagem: [MÚSICA] O site da Apple tem sido uma ótima fonte de inspiração de design e interação para muitos designers de UI UX por causa de suas incríveis páginas de aprendizado com animações suaves. No episódio de hoje, vou mostrar como recriar a página de aprendizado do Apple Studio Display, incluindo essa animação suave no Figma. Vamos mergulhar. Se você acessar apple.com e abrir o menu do Mac aqui, poderá abrir o menu da tela. A partir daqui, se você selecionar Studio Display, essa página de aprendizado será carregada. Se eu rolar para baixo, você verá que essa animação é reproduzida. É muito suave. Finalmente, chegaremos a esse ponto. Se eu continuar rolando para baixo, veja o que acontece. O Studio Display aparece sem problemas e, finalmente, essas duas camadas de texto desaparecem. Vamos analisá-lo primeiro. Precisamos ter certeza de que temos essa imagem, então eu já baixei essa imagem. Além disso, essa imagem do Studio Display deve ocupar toda a largura e altura disponíveis de nossa tela, assim como vemos aqui. Bem no meio, precisamos ter essa camada de texto. Quando essa transição acontecer, essa camada de texto deve desaparecer e esse Studio Display deve ser reduzido e, finalmente, essas duas camadas de texto devem desaparecer. Deixe-me mostrar como você pode fazer isso rapidamente no Figma. Aqui eu já preparei essa imagem do Apple Studio Display e também preparei essas duas camadas de texto. Para esta animação, vou clicar em A e criar uma moldura de tamanho personalizado. Aqui, vou definir a largura e a altura para 1920 por 1080, respectivamente, assim mesmo. Então eu vou arrastar e soltar essa imagem dentro desse quadro, assim. Você precisa ter certeza de que está ampliado dessa forma , porque só queremos ver o papel de parede no momento. Então, precisamos trazer esse texto aqui. Deixe-me arrastar e soltar. Vou deixá-lo branco assim e alinhá-lo ao centro tanto horizontal quanto verticalmente. Esse é o primeiro passo. Em seguida, vou selecionar esse Quadro 1, vou duplicá-lo, pressionar Controle D ou Comando D, derrubá-lo assim. Nesta etapa, precisamos reduzir essas duas camadas. Vou manter pressionada a tecla Shift e selecionar as duas. Agora vou pressionar K para selecionar a ferramenta de escala, manter pressionada a tecla Shift e a tecla Alt para reduzi-las proporcionalmente, assim mesmo. Eu vou reduzi-lo e também vou movê-los para cima. Em seguida, vou selecionar essa camada de texto e definir sua opacidade para zero por cento porque ela precisa desaparecer. Em seguida, vou duplicar esse quadro mais uma vez, derrubá-lo. Desta vez, vou mover esse quadro para cima desse jeito. Aqui precisamos colocar essas duas camadas de texto. Então eu vou trazê-los aqui. Parece bom. Mas, para animar essas camadas de texto, assim como vemos aqui, precisamos garantir que essas duas camadas de texto também sejam colocadas no segundo quadro. Vou clicar em Controle C ou Comando C, selecionar Quadro 2, pressionar Controle V ou Comando V, mas essas duas camadas de texto devem ser mascaradas de alguma forma. Vou manter pressionada a tecla Shift e a barra de espaço no meu teclado e abaixá-las desse jeito. Agora, eles ainda estão dentro do Frame 2, mas não podemos vê-los. Estamos quase terminando. Só precisamos adicionar as interações. Vou selecionar esse Quadro 1, vou até a guia do protótipo aqui. Agora eu posso simplesmente conectar essas duas telas desse jeito. Vou colocar o gatilho na tecla. Aqui, vou apertar a tecla de seta para a direita no meu teclado e a animação será inteligente, animada, fácil. Vamos configurá-lo para 1000 milissegundos, acho que será suficiente. Vamos fazer a mesma coisa com essa tela. Eu vou conectá-los. Será uma animação fundamental, inteligente e 1000 milissegundos. Vamos experimentar e ver como fica. Bom. Vou apertar a tecla de seta para a direita no meu teclado. Bom. Como você pode ver, tivemos essa animação suave mais uma vez. Aqui temos um problema. Essas camadas de texto aparecem , mas precisam desaparecer. Precisamos fazer um ajuste aqui. Se você for até o Quadro 2 e selecionarmos essas duas camadas de texto aqui, poderemos diminuir a opacidade para zero por cento. Agora deve funcionar muito bem. Vamos tentar mais uma vez. Bom. Lá vamos nós. Agora temos essa linda transição suave. 20. Barra de guia animado: [MÚSICA]. Neste vídeo, criaremos juntos uma barra de abas animada, exatamente como a que você vê aqui. Vamos ser afirmados. Então, aqui no arquivo do projeto Figma, você precisa ir em frente e procurar a página animada da barra de guias. E lá dentro você pode ver que eu já preparei alguns ícones para você. Então, normalmente, para uma guia, ou precisamos ter dois estados diferentes para nossos ícones, precisamos ter o estado padrão e o estado selecionado. Então, por esse motivo, preparei aqui dois sinais diferentes desses ícones, o sinal de contorno e o estilo sólido. Como vamos transformá-los em componentes, é muito importante saber como nomeá-los corretamente, porque a Figma os categorizará com base em seus nomes. Então, aqui temos Home forward slash Solid. Para este, temos home Forward Slash Outline. A mesma coisa se aplica a todos esses outros ícones. Portanto, o primeiro passo é transformar nossos ícones em componentes. Então, vou selecionar todos eles, ir até a barra de ferramentas e, a partir daqui, selecionar Criar vários componentes. Em seguida, vou selecionar esses ícones de contorno, duplicá-los para criar apenas uma instância desses componentes. Vou manter pressionada a tecla Shift no meu teclado e, usando as teclas de seta, vou movê-las para baixo desse jeito. Como você pode ver, os ícones são diferentes aqui, indicando que essas são as instâncias desses componentes porque não queremos usar os componentes principais em nosso design. Enquanto estiverem selecionados, vou adicionar outro layout a eles. Então aperte Shift e A. Pronto. Vou chamá-la de barra de abas. Para essa barra de abas, vamos ter uma cor de fundo. Vou adicionar um preenchimento a ele. Vai ser branco. Vamos alinhar tudo ao centro. Também vamos mudar o preenchimento aqui. Vou definir o preenchimento vertical para 24. Quanto ao preenchimento horizontal, vamos configurá-lo para algo como 66. Isso é bom. Vou aumentar o espaçamento entre eles para algo como 54. Até agora, tudo bem. Agora vou fazer com que essa barra de abas seja completamente arredondada. Posteriormente, podemos mudar seu estilo, mas, por enquanto, prefiro ter uma barra de abas arredondada aqui. Vamos visualizar nossa barra de abas mais uma vez, vamos ver o que precisamos ter. Quando uma guia é selecionada, o ícone deve ser alterado para sólido. Além disso, precisamos ver esse círculo atrás dessa aba. Vou começar criando um círculo aqui. Deixe-me criar um círculo. Exatamente assim. Só não se preocupe com isso. Está ocupando espaço. Nós vamos consertar isso. Só precisamos mudar a cor também. Eu vou mudar para azul, algo assim. Enquanto estiver selecionado, vou apertar esse botão de adição aqui, que diz posição absoluta. Lá vamos nós. Não está mais ocupando espaço. Vou me certificar de que ele seja colocado acima de todas essas guias. Caso contrário, não poderemos ver nossas guias. Vamos mudar sua dimensão para 40 por 40. Vou me certificar de que está alinhado com minha guia aqui. Vou movê-lo para o lado esquerdo. Se eu mantiver pressionada a tecla Alt ou a tecla Option no meu teclado, você pode ver que temos um preenchimento de oito em todos os lados. Em seguida, precisamos mudar esse ícone de contorno para sólido. Vai ser tão simples, já que transformamos todos os nossos ícones em componentes, vou selecionar este, Home Outline, ir até o inspetor de design. Aqui, como você pode ver, temos esse menu suspenso e eu vou abri-lo. Vou mudá-lo para sólido. Lá vamos nós. Em seguida, precisamos mudar sua cor para branco e nossa barra de abas está pronta. Agora, precisamos transformar toda essa guia em um componente, porque vamos adicionar várias variantes a ela. Vou selecionar a barra de guias e clicar nesse botão para transformá-la em um componente e apertar esse botão para adicionar algumas variantes a ela. No total, precisamos ter quatro variantes porque temos quatro guias diferentes. Bom. Para o conjunto desses componentes, precisamos ter uma propriedade e vou chamá-la de tab. Em seguida, vamos selecionar essa primeira variante e alterar o valor para home, que significa que a guia inicial está selecionada. Vou selecionar este e alterá-lo para marcador. Bom. Vamos selecionar essa opção e alterar o valor dessa propriedade da guia para notificação. Finalmente, para este, vamos alterá-lo para mensagem. Agora precisamos modificar essas variantes uma a uma. Então, vou começar com o círculo. Vou selecioná-lo aqui. Mantenha pressionada a tecla Shift e mova-a para o lado direito. Exatamente assim. Alinhe-o com este ícone de marcador. Agora vou selecionar o ícone Minha casa aqui, mudar seu tipo de sólido para contorno. Aqui, para este marcador, vou selecioná-lo, mudar seu tipo para sólido e mudar sua cor para branco. Eu vou fazer a mesma coisa com todas essas guias. Para este, vou selecionar a elipse, manter pressionada a tecla Shift e movê-la para o lado direito e colocá-la atrás desse ícone de sino. Lá vamos nós. Selecione esse ícone de Início e altere seu tipo para contorno. Vou selecionar esse ícone de sino e alterá-lo para sólido e também torná-lo branco. Finalmente, para este, selecione-o, mantenha pressionada a tecla Shift e coloque-a atrás de um ícone de mensagem. Assim, certifique-se de que esteja perfeitamente alinhado com seu ícone. Altere o tipo desse ícone da Página Inicial para contorno. Vou selecionar esse ícone de mensagem, alterá-lo para sólido e deixá-lo branco. Então, temos nossas barras de abas. Agora é hora de criar conexões. Aqui está como eu vou fazer isso. Vou começar com esse ícone da página inicial. Precisamos selecionar esse ícone inicial e conectá-lo à primeira variante de todas essas três. Então, enquanto estiver selecionado, vá até a guia Protótipo e conecte-o a esta, a primeira. Aqui, o gatilho deve estar em click smart animate. Vou definir a duração para 300 milissegundos. Vamos fazer a mesma coisa com este. Não precisamos mudar mais nada e isso também. Em seguida, vou fazer isso para o marcador. Vou selecionar este, conectá-lo à segunda variante. Selecione este também, conecte-o à segunda variante finalmente, selecione este, conecte-o à segunda variante. Agora vamos fazer isso com o ícone do sino. Vou conectá-lo à terceira variante, esta também. Finalmente, este. Por último, mas não menos importante, vamos selecionar esse ícone conectado à última variante, essa também e essa, assim. Agora é hora de dar uma olhada. Vou criar uma moldura aqui. Você pode criar uma moldura de telefone. Vou criar uma moldura de tamanho personalizado por enquanto. Vamos torná-lo preto, assim. A partir dos ativos, vou para a barra de guias animada e simplesmente arrastar e soltar uma instância dessa barra de guias aqui, assim como esta, e alinhá-la ao centro. Vou selecionar esse quadro. Clique em Jogar e vamos ver se tudo funciona bem ou não. Aqui, temos nosso estado Home Selected. Vou clicar nesse. Lá vamos nós. É totalmente responsivo e interativo. Quão legal é isso? Isso é tudo para este vídeo. vejo na próxima. 21. Carrossel de imagem animado: [MÚSICA] Neste vídeo, vou mostrar como criar esse carrossel de imagens animadas no Figma, assim. Se você estiver pronto, vamos começar. Eu quero que você vá em frente e abra esta imagem animada, uma página de carrossel dentro do projeto Figma. Dentro você pode ver que eu já preparei essas imagens para você. Aqui temos alguns Apple Watches, e também aqui eu tenho esse grupo de texto. Como você pode ver, temos um título simples e um subtítulo aqui. A primeira coisa que precisamos fazer é criar uma moldura. Vou tocar em A no meu teclado e criar uma moldura de tamanho personalizado. Vamos definir a largura e a altura para 500 pixels, assim mesmo. Agora, vou selecionar todas essas imagens e colocá-las dentro desse quadro. Deixe-me movê-los para baixo desse jeito. Mas a questão é que devemos ver apenas um relógio por vez. Vou selecionar este quadro 1 aqui e me certificar de que a caixa de seleção do conteúdo do clipe esteja marcada. Caso contrário, poderemos ver esses relógios. Certifique-se de verificar essas marcas de seleção. Acho que podemos aumentar um pouco essa imagem. Onde quer que você queira mover essa imagem para cima, certifique-se de selecionar todas as outras imagens também. Vou selecionar todos eles e movê-los para cima. O que precisamos aqui? Logo abaixo dessa imagem, precisamos ter esse indicador. Você pode pensar que precisamos ter alguns círculos e um retângulo, mas isso está errado. Por quê? Porque olha o que acontece aqui. Quando eu arrasto essa imagem, você vê o que acontece. Esse primeiro indicador se torna um círculo e o segundo se torna um retângulo. Para criar esse indicador, precisamos usar um retângulo desde o início. Não precisamos de nenhum círculo. Deixe-me criar um retângulo aqui, assim como este. Faça com que seja muito pequeno, talvez 28 por oito, algo assim. Faça com que seja completamente arredondado. Mas eu vou colocá-lo aqui e depois vou duplicá-lo, apertar Controle D ou Comando D. Mova-o para o lado direito. Agora, este deve ser um círculo. Para fazer isso, basta garantir que a largura e a altura sejam iguais. Vou diminuir a largura para oito. Agora, vou duplicá-lo mais uma vez e colocá-lo ali mesmo. Agora, vou selecionar todos eles e adicionar um layout automático a eles, então pressione Shift e A. Pronto. Deixe-me renomeá-lo para indicador, assim. Esse primeiro, o selecionado, deve ser um pouco mais escuro. Eu também vou deixá-lo um pouco mais escuro , assim. Nosso indicador também está pronto. Deixe-me alinhá-lo ao centro. Eu posso aumentá-lo um pouco. A próxima coisa que precisamos são as camadas de texto. Eu vou trazê-los até aqui. Vamos alinhá-lo ao centro e eu vou movê-lo um pouco para cima. Criamos nosso quadro principal. Agora, é hora de animar esse quadro. Para fazer isso, usaremos componentes interativos e de variação, como de costume. Vou selecionar esse Quadro 1 e vou transformá-lo em um componente, e vou adicionar uma variante a ele, assim como esta. Deixe-me selecionar esse conjunto de componentes e alterar o nome da propriedade para slide. Essa primeira variante será uma. Esse segundo vai ser dois. Adicionaremos outro em alguns segundos. Mas primeiro, vamos ver o que precisamos fazer aqui. Se eu apenas visualizar esse carrossel, você pode ver que quando eu arrasto essa imagem para o lado esquerdo, ela começa a girar assim. Em seguida, o próximo relógio também entra na moldura girando, assim. Aqui está o que precisamos fazer. Temos nosso ponto de partida aqui e está tudo bem. Para essa segunda variante, vou selecionar todas essas imagens, mesmo aquelas que estão fora desse quadro. Vou manter pressionada a tecla Shift e, usando as teclas de seta, vou movê-las para o lado esquerdo, assim, até vermos nosso segundo relógio. Em seguida, vou selecionar este, alinhá-lo ao centro horizontalmente. Bom. Mas agora nós apenas os movemos sem qualquer rotação. Para que esse efeito de rotação aconteça, vou selecionar este primeiro. Vou girá-lo em 30 graus. Mantenha pressionada a tecla Shift e tente girá-la aqui em 30 graus. Como alternativa, você pode simplesmente especificar o valor aqui. Mas e esse? Aqui, como você pode ver, quando tentei arrastá-lo para o lado esquerdo, o relógio rosa também gira. Para que isso aconteça, preciso acessar minha primeira variante aqui. Vou selecionar esse segundo, que é nosso relógio rosa, e vou girá-lo para menos 30 graus, assim. Nossas primeira e segunda variantes estão prontas. Agora, precisamos de mais uma variante. Vou selecionar esse segundo e apertar botão Mais para adicionar mais uma variante. Este vai ser o número 3. Vou repetir a mesma coisa. Vou selecionar todas essas imagens desse jeito. Mantenha pressionada a tecla Shift e mova-a para o lado esquerdo. Lá vamos nós. Agora, vou selecionar este relógio amarelo e deixá-lo no centro. Selecione este relógio rosa aqui, número 2, e gire-o em 30 graus. Assim como você pode ver aqui, temos 30 e, na segunda variante, também devemos girar esse terceiro relógio. Precisamos girá-lo para menos 30 graus. Mas e o nosso indicador? O primeiro já está pronto. Vou ampliar aqui. Para o segundo, o que eu vou fazer é isso, não podemos simplesmente mover este para o lado direito. Por quê? Porque aqui, como você pode ver quando tento arrastar este relógio para o lado esquerdo, desse jeito, esse indicador, o primeiro se transforma em um círculo. Não estou mudando a posição deles aqui e é exatamente isso que precisamos fazer. Vou selecionar esse segundo. Vou para Design e vou definir sua largura para 28, assim como o que temos aqui. Vou mudar sua cor para esse cinza escuro. Em seguida, vou selecionar este, o primeiro, definir sua largura para oito e mudar sua cor para esse cinza claro. Precisamos fazer a mesma coisa aqui também. Vou selecionar esse indicador e vou selecionar esse terceiro, aumentar a largura para 28, assim mesmo. Mude sua cor para cinza escuro. Selecione este, defina sua largura para oito e mude sua cor de volta para cinza claro. Legal. Neste exemplo, não vou alterar essas camadas de texto, como a cor. Vai ser tão simples que você pode simplesmente configurá-lo para rosa, verde e amarelo. O ponto principal que você precisa aprender aqui é como animar este relógio e também esse indicador. Caso você tenha dificuldades em mover esses relógios, especialmente quando não consegue vê-los do lado de fora, o que você pode fazer é pressionar Shift e O para entrar na visualização do contorno. Agora, como você pode ver, até mesmo esses relógios fora dessa moldura são visíveis para você e serão muito úteis quando você quiser movê-los. Para voltar ao modo normal, você pode pressionar Shift O novamente. Mas e as conexões? Aqui está o que você precisa fazer. Muitas pessoas, quando querem criar essa animação de arrasto, cometem um erro muito comum. Eles selecionam sua variante aqui, por exemplo, esta, Variante 1. Em seguida, eles tentam conectá-lo ao próximo e simplesmente trocam o gatilho para arrastar. Isso não vai funcionar. Se você simplesmente conectar essas duas variantes dessa forma, a animação de arrastar não funcionará como você esperava. Em vez disso, você precisa selecionar essa imagem, essa e depois tentar criar uma conexão entre essas duas. Agora, vou colocar o gatilho na posição de arrastar. Vai ser uma animação inteligente 300 milissegundos, parece bom. Vamos fazer a mesma coisa aqui. Vou selecionar este, conectá-lo novamente à primeira variante. Vai ser arrastado novamente. Vamos conectar esse ao terceiro ao arrastar e o terceiro ao segundo, ele vai ser arrastado e basicamente terminamos. Vamos experimentar e ver como fica. Vou criar uma moldura de tamanho personalizado aqui, 500 por 500 pixels, assim. A partir dos ativos, vou procurar carrossel de imagens animadas e arrastá-lo e soltá-lo nesse quadro, alinhando-o horizontal e verticalmente. Você pode ir em frente e colocá-lo dentro de qualquer moldura que quiser. Mas neste exemplo, prefiro colocá-lo dentro desse quadro e apenas visualizá-lo. Vamos ver se funciona. Lá vamos nós. Funciona muito bem. Nosso indicador é animado e também temos esse efeito de rotação aqui para esses relógios. Caso você queira usar este carrossel de imagens em um telefone celular. O que você pode fazer é isso. Você pode criar uma moldura de celular aqui, por exemplo, iPhone 14, assim mesmo. Em seguida, basta arrastá-lo e soltá-lo dentro e simplesmente pressionar K e reduzi-lo assim. Funcionaria perfeitamente se eu simplesmente selecionasse essa moldura móvel e a visualizasse. Você pode ver que funciona muito bem. Essa é a beleza de usar componentes interativos. Pessoal, espero que tenham gostado dessa aula. vejo na próxima. 22. Botão de ação flutuante animado: Neste vídeo, vou mostrar como criar um botão de ação flutuante animado como este. Se você estiver pronto, vamos mergulhar. Aqui no arquivo do projeto Figma, eu já preparei esses botões para você. Para criar essa interação, precisamos de duas variantes diferentes, precisamos dessa variante fechada e também dessa variante aberta. Aqui está o que eu vou fazer, vou selecionar esse botão de adição e transformá-lo em um componente como esse e vou adicionar uma variante também para criar um conjunto de componentes. Esse conjunto de componentes será chamado de botão e, além disso, sua propriedade será denominada state. O valor dessa propriedade para a primeira variante será fechado e para esta será aberta. Então, o que precisamos? Dentro dessas duas variantes, também precisamos ter esses botões. Vou selecionar esse conjunto de componentes e ampliá-lo. Mas veja o que acontece, o problema aqui é que as restrições para esses dois botões não estão definidas corretamente. Vou selecionar este e mudar as restrições para a parte superior e esquerda e vou me certificar de que este também tenha as mesmas restrições. Agora podemos ampliar facilmente esse conjunto de componentes. Deixe-me mover essas variantes, em algum lugar por aqui e agora vou selecionar esses botões e colocá-los dentro dessa variante fechada. Certifique-se de colocá-los dentro dessa variante. Agora vou alinhar tudo verticalmente, assim e horizontalmente, e me certificar de colocá-los aqui. Você precisa alinhá-lo com o botão de adição. Em seguida, vou movê-los e colocá-los abaixo do nosso ícone de adição e botão de adição, para que possamos ocultá-los. Agora, enquanto você estiver selecionado, vou copiá-los, clicar em Control C ou Command C e também vou colá-los dentro dessa variante aberta. Vou selecionar essa variante aberta e clicar em Control V ou Command V e movê-los aqui. Vamos ver o que precisamos obter. Quando está fechado, precisamos ver esse ícone de adição, mas quando ele é aberto, precisamos ver esse ícone de ignorar e, em seguida, esses botões devem aparecer. Vou mover essa variante fechada um pouco para cima para ter mais espaço aqui e a primeira coisa que vou fazer é selecionar esse ícone e manter pressionada a tecla Shift e girá-la em menos 45 graus para obter esse ícone de descarte. Esse é o primeiro passo. A próxima etapa é mostrar esses botões, os botões de música e vídeo da pasta. Deixe-me ver a ordem aqui, precisamos ter a pasta aqui, a música e o vídeo ali mesmo. Vou começar com a pasta, deixe-me selecioná-la aqui, mantenha pressionada a tecla Shift e, usando as teclas de seta, vou movê-la para cima assim. Vou manter pressionada a tecla de opção no meu teclado ou a tecla alt para ver a margem aqui. Vou definir a margem para 16. Em seguida, vamos selecionar esse botão de música, manter pressionada a tecla Shift e movê-la para o lado esquerdo, desse jeito e a margem será 16. Finalmente, vou selecionar este botão de vídeo, manter pressionada a tecla Shift e movê-la para baixo assim. Até agora, tudo bem, mas não é exatamente o que precisamos. Como você pode ver aqui, temos um arco. Vou mover isso para cá e colocá-los assim. Temos nossa variante aberta, também temos nossa variante fechada, agora é hora de criar nossas conexões. Vou selecionar esse primeiro, ir até o protótipo e conectá-lo a essa segunda variante, que é essa variante aberta. A árvore aqui deve estar ativada com um clique em Smart Animate em 300 milissegundos. Vou criar uma conexão de volta para essa variante fechada agora. Vamos pré-visualizá-lo e ver se é o que queríamos ou não. Vou criar um quadro de tamanho personalizado aqui, assim como este e, a partir de ativos, vou arrastar e soltar uma instância desse botão ali mesmo. Deixe-me alinhá-lo ao centro, selecionar esse quadro e clicar em Reproduzir. Vou clicar nele e ver o que acontece. Algo está errado, temos nosso ícone animado aqui. Esse botão aparece, mas e os outros, vamos ver o que está errado aqui. Aqui está o problema quando eu movo esses botões, eu os coloquei acidentalmente fora dessa variante. Vou movê-los de volta para dentro, e agora deve funcionar. Eu vou clicar nele, lá vamos nós. Vemos que temos essa animação, mas há mais uma coisa que precisamos fazer. Como você pode ver aqui, temos esse efeito de salto. Acho que é uma boa ideia adicionar esse efeito de salto a esse botão também. Para fazer isso, basta selecionar este, ir até Prototype, clicar em sua interação e, a partir daqui, mudarei a velocidade de fácil para rápida. Eu só quero que essa interação tenha esse efeito de salto. Para essa variante próxima dessa interação, quero mantê-la como está fora. Vamos tentar. Lá vamos nós. Gente, isso é tudo nesse vídeo, nos vemos no próximo. 23. Efeito de acordeão: Neste vídeo, vou mostrar como criar um efeito de acordeão animado para esses cartões, exatamente como o que você vê aqui. Aqui dentro desta página de efeito acordeão, eu já preparei para você este cartão. É um cartão simples que eu criei usando outro layout. Vamos ver o que há dentro. Dentro, temos essa moldura. Como você pode ver, ele também é responsivo. Eu também adicionei outro layout a ele e aqui dentro temos esse ícone e essa camada de texto. O importante aqui é que a opção de redimensionamento dessa moldura esteja configurada sobrecarregada para tornar o cartão responsivo, exatamente como você vê aqui. Além disso, temos esse divisor. É uma linha simples e outra camada de texto. Para esse efeito acordeão, precisamos apenas ter dois estados diferentes : fechado e aberto. Vamos ver como podemos criar um. Nós temos esse estado aberto. Vou transformá-lo em um componente como esse e adicionar uma variante. Vou selecionar esse conjunto de componentes e alterar o nome da propriedade para state. Agora vou selecionar essa primeira variante. Deveria ser aberto. Isso é bom. Vou selecionar esse segundo e ele deve ser fechado. Para essa variante fechada, o que precisamos fazer é ocultar esse divisor e também esse texto. Finalmente, precisamos girar essa seta em 180 graus. Como usei outro layout para este cartão, é bem simples. Vou apenas selecioná-lo e apenas ocultá-lo na lista de camadas. Lá vamos nós. Vou selecionar esse também e ocultá-lo. Você vê que quando você usa outro layout, já que seu elemento é responsivo, é muito fácil criar componentes interativos. Em seguida, vou selecionar esse ícone, manter pressionada a tecla Shift e girá-la em 180 graus, e basicamente pronto. Só precisamos conectar essas duas variações agora. Vou selecionar este, ir até o protótipo, conectá-lo a este, e ele deve estar pronto e animado de forma inteligente. Vou configurá-lo como “Rápido” para obter esse efeito de salto , como você pode ver aqui. Agora vamos fazer a mesma coisa com essa variação. Acabei de nos conectar novamente à variação de roupas e não precisamos mudar nada aqui. Agora é hora de tentar. Vou criar uma moldura aqui. Deixe-me modificar a cor do plano de fundo. Deixe-me mudar para azul claro, algo assim. Vou até “Ativos” e, a partir daqui, vou procurar meu cartão. Vamos arrastá-lo e soltá-lo desse jeito e eu vou mudar seu estado para fechado. Agora vamos selecionar esse quadro, clique em “Jogar”. Eu vou clicar nele. Pronto, funciona conforme o esperado. Mas aqui está a vantagem de outro layout. Agora eu posso simplesmente duplicar esta carta, apertar Controle D ou Comando D, movê-la para baixo, duplicá-la algumas vezes assim. Talvez mais uma vez, mova-o para baixo. Agora vou selecionar todos eles assim e adicionar outro layout a todos eles. Pressione Shift e A. Se eu fizer essa moldura um pouco maior, assim, e tentar pré-visualizá-la, veja o que obtemos. Lá vamos nós. Temos uma lista responsiva de cartas com esse efeito acordeão. Que legal é isso. Tudo bem, pessoal. Isso é tudo para este vídeo. vejo na próxima. 24. O que vem a seguir?: Parabéns por concluir o curso com sucesso. Você percorreu um longo caminho e estou muito orgulhosa de você, mas você pode estar se perguntando qual é o próximo passo para você? Bem, primeiro, certifique-se de enviar os projetos que você fez no Skillshare porque eu adoraria ver o que você criou. Em seguida, agradeceria se você pudesse deixar uma avaliação honesta do curso para que eu pudesse torná-lo melhor para você. Se você quiser ser notificado sobre as últimas atualizações do curso, não deixe de me seguir no Skillshare. Se você quiser saber mais sobre design e prototipagem de UI/UX, você também pode conferir meu canal no YouTube, onde eu publico vídeos relacionados ao design semanalmente. Foi uma honra ser seu instrutor neste curso, e espero vê-lo em meus outros cursos. Tenha um lindo dia e adeus.