Animação de um toggle de dia e noite de UI no Figma — UI interativa no Figma

1. Curso 5 aula 1 introdução Made with Clipchamp: Bem-vindo à aula do Figma Mini onde juntos praticaremos, entenderemos como criar elementos vetoriais usando formas no Figma e, em seguida, criaremos um interruptor de toalha muito legal com botões diurnos e noturnos Este layos é perfeito para você aprender Figma com processos fáceis e simples e projetos criativos para criar enquanto isso. Então, vamos começar. 2. Curso 5 aula 2 prática básica Made with Clipchamp: Então, agora estou na tela do Figma com um novo documento aberto Você pode renomeá-la para seu projeto e usar a ferramenta de moldura ou a mesa de atalho para criar uma Eu gostaria de ter o tamanho da área de trabalho, a moldura. Então, escolhendo o mesmo, você pode escolher de acordo com seu dispositivo ou sua finalidade. Agora vamos começar a criar elementos diferentes. Usando a ferramenta de modelagem. Começando com um retângulo, atalho R cria um retângulo de qualquer tamanho e, em seguida, talvez esteja pronto. A partir do painel de design aqui, altere o arredondamento do canto para Talvez 100 cliqus sejam bons o suficiente. Agora, selecione sua forma, segure tudo e arraste-o para que ele se Em seguida, chegue a um tamanho com este L k, esse cursor, segure e arraste-o para redimensioná-lo dos dois lados Agora, selecione as duas formas juntas. E aqui de cima, escolha unir a seleção Isso une as duas formas trabalhando como uma única forma. Então, agora é assim que você pode criar qualquer nova forma mesclando diferentes formas básicas Agora vamos criar outro elemento que poderia funcionar para, digamos, palhaços Então, desta vez, vou usar uma elipse para duplicar e criar vários círculos, talvez de tamanho aleatório ou da forma que você preferir, e colocá-los perto o suficiente para que preferir, e colocá-los perto pareçam com a forma de uma E que tal fazer sol? Você pode usar uma ferramenta simples de elipse, segurar a tecla Shift e arrastá-la para fazer um círculo completo com todas as áreas iguais Então, agora é hora de criar uma ferida. Como você pode fazer isso? Sim Novamente, o mesmo círculo para representar uma ferida Mas como diferenciar entre um sol e um movimento? Eu sugeriria duplicar mais círculos, reduzi-los e colocá-los no topo da lua para que pareçam pequenas crateras em Você pode recolorir ou fazer com que ele simplesmente os remova de uma forma básica para realçar seu amor Então, agora vamos adicionar uma forma de estrela à nossa lista. Basta selecionar uma ferramenta e criar uma pequena estrela aqui. Agora, a partir do canto, faça com que ele arredonde para dez pixels. Veja como ficou pequeno. E você pode continuar com a forma, se quiser. Mas quando o reduzimos, ele se torna muito pequeno. Você vê isso como uma estrela. Agora, altere o tamanho do canto desse arredondamento de acordo com sua preferência Espero que você entenda como criar criativamente qualquer ícone vetorial usando formas, como fizemos aqui 3. Aula 3 da aula 5 desenhando o botão do dia feito com Clipchamp: Agora vamos dar um passo à frente e começar a criar todo o nosso botão que queremos animar no final desta aula Então, para isso, vamos começar fazendo um grande retângulo, cobrindo toda a moldura Você pode recolorir para algo certo para mostrar durante o dia. Agora vamos criar outro retângulo usado como botão E no painel de design, ajuste o arredondamento do canto, 200 pixels Então aqui está. E para esse botão, eu apenas sugiro que você possa colorir para algo em um tema semelhante, mas altere seu brilho para algo muito escuro e focado. Agora, coloque aqui a célula que já criamos na última sessão, e você pode simplesmente ajustá-la ou redimensioná-la de acordo com o tamanho do botão Cor ou piso de sua escolha. Então, apenas adicionando cor, gostaria de adicionar um pequeno efeito de sombra do painel de design aqui na guia Efeitos, clicar no ícone de adição e usar esse ícone em miniatura, clicar nele, na miniatura e ajustar a Eu preferiria algo com pouca opacidade e muito mais em termos de Você pode reservar um tempo e ver quais resultados diferentes você obtém com diferentes configurações, deitar e tentar obter algo natural e coeso Agora vamos colocar nossas nuvens no lugar e ajustar os efeitos de sombra da mesma forma que fizemos anteriormente. E próxima coisa, que é muito, muito particular de se ter em mente, ao projetar o botão, que precisamos fazer com que todo esse conjunto de gráficos seja recortado na forma de botão Mas como? Selecione todas as formas todos os gráficos e a forma do botão juntos enquanto mantém pressionada a tecla Shift, clique com o botão direito do mouse e escolha Criar componente. O que isso faz? Isso apenas torna nossa camada inteira como um grupo de componentes do painel de design Clique em Verificação de conteúdo. Aqui, isso deve ser verificado. Isso torna todo o nosso gráfico visível somente nessa área específica. E quando a arrastamos para baixo ou para cima, ela simplesmente desaparece. Certifique-se de que, ao arrastá-lo, você pressionou a barra de espaço para aquecer as coisas no lugar Além disso, gostaria de estilizar meu botão um pouco mais usando forma de elipse e ajustando-a atrás de todos os demais E agora, vamos criar uma aparência de gradação de cores recolorindo cada uma delas da mesma forma Espero que você tenha esclarecido como criar um botão de troca e aprimorá-lo ou personalizá-lo à sua maneira. 4. Projete o botão de noite: Vamos começar a trabalhar aprimorando e aprimorando nosso componente de switch Vamos arrastá-lo e colocá-lo fora da moldura. E enquanto estiver selecionado no topo aqui, clique neste ícone Robs, neste ícone de adição Então, isso cria uma variante do componente, e podemos ajustar facilmente os elementos para criar nosso botão de cena com faca. A primeira coisa que eu quero fazer é dar um efeito descendente às nuvens. Certifique-se de que, ao pressioná-lo para baixo, segure a barra de espaço do teclado e arraste o botão do sol para o outro lado para refletir a piscina E arraste e ajuste o posicionamento do círculo de gradação no lado oposto Aqui, assim. Espero que você esteja claro até agora. Então, agora vamos recolorir cada um dos componentes e projetá-los para criar o botão noturno Além disso, adicionando um elemento estrela ao bumbum. Espero que você também tenha criado seus interruptores diurnos e noturnos, seus botões diurnos e noturnos em seu arquivo, para animá-los na próxima lista 5. Anime a mudança: Agora, com todo o design de nossos componentes, duplicado, arrastado e posicionado, eles ativam o quadro um e, segurando pelo nome do quadro, segure Alt e arraste para duplicar Em seguida, basta excluir esse botão daqui e segurar Alt e arrastar o botão noturno e colocá-lo no mesmo lugar no próximo quadro E basta alterar a cor de fundo da moldura para a mesma. Agora, vamos adicionar animação. Vá para o painel de protótipos e selecione o botão D aqui e arraste-o do ícone do anúncio. Aqui , arraste, segure e arraste e certifique-se de alterná-lo também para o quadro Ajuste a configuração do protótipo ao clicar, navegar e usar a animação inteligente com suaves ou apenas as mesmas Depende de você. Você pode experimentar os dois. Da mesma forma, selecione o botão noturno e mude-o para o período diurno e use as mesmas configurações que você usou para o primeiro. Então, agora vamos pré-visualizá-lo. Parabéns. Você acabou de praticar e criar uma peça de animação muito fofa de alternância diurno e noturno Então, espero que você tenha gostado muito dessa aula de minifigma comigo e criado esse divertido botão de alternância para Você pode compartilhar a captura de tela do botão ou moldura, ou pode simplesmente compartilhar a gravação de tela dela Além disso, eu adoraria ouvir sua experiência de classe na seção de revisão. E se você ainda estiver trabalhando e descobrindo algo no processo, pode simplesmente entrar em contato comigo na guia de discussão Eu adoraria te ajudar. Se você gostou desta aula, sinta-se à vontade para compartilhá-la com seus amigos, que também podem achá-la útil. E para mais atualizações e aulas, siga-me aqui. Nos encontraremos na próxima aula.