Como criar um aplicativo com Animações de design fluído usando Figma - Curso para iniciantes

1. Boas-vindas ao meu curso de Design de UX para iniciantes: Olá, bem-vindo à minha aula Figma no Skillshare, onde vamos olhar para o maravilhoso mundo do design UX. Agora, muitas vezes, quando as pessoas entram no espaço de design UX, elas realmente queriam começar a criar aplicativos e absolucionar seus telefones e ficar realmente criativos com seus conceitos de design. E muitas vezes uma das coisas mais negligenciadas quando se trata de design UX ou micro animações ou as menores mudanças estéticas que os designers de UX adicionam em seus aplicativos para realmente adicionar algum talento. E uma das coisas que podemos fazer nesta classe em geral é passar por diferentes técnicas que os usuários podem implementar para realmente melhorar a experiência de design de UX. Esta é uma aula aberta, o que significa que vou adicionar constantemente novos vídeos todas as semanas com base no feedback e nas perguntas que surgirem. E até agora eu juntei três aulas nesta lição de figma. E eles vão olhar para três componentes principais. Então, no momento em que está, temos como criar botões de hambúrguer, que são essencialmente opções de menu que se transformam em botões de fechamento circular. Então, clicar nisso o mudará para esse ícone. Estamos olhando para controles deslizantes. Então, quando você clica em um interruptor desligado, é slides para o ligado e etc. Então, por último, temos essa interface móvel agradável que criei chamada pictórica para os propósitos desta classe. E como fazer laços de redes sociais de estilo mensageiro horizontal . Então, um exemplo como esse seria aqui onde você pode rolar e ver quais amigos talvez online. Então isso é o que temos na estrela. E durante esta aula, depois, pretendo que você seja capaz de recriar o que você vê aqui é uma visão amigável. E, obviamente, à medida que eu faço mais aulas, mais coisas serão adicionadas. Portanto, certifique-se de se você optar por se inscrever nesta aula que você fica e esteja atento a quaisquer e-mails. Eu posto isso nas discussões. Novamente, se você gosta do que vê e está interessado em se juntar a mim neste curso. Definitivamente inscreva-se agora e te vejo do outro lado. 2. Como criar o botão Hambúrguer de menu: Olá. Nesta classe curta, vamos usar o software de design UX conhecido como Figma. Esta é uma ferramenta muito versátil e completa para permitir que você crie protótipos, wireframing e diferentes interfaces de design de usuário para seus aplicativos, desktop, dispositivos móveis, etc. para permitir que você crie protótipos, wireframing e diferentes interfaces de design de usuário para seus aplicativos, desktop, dispositivos móveis, etc. vai ser curto. E vamos direcionar especificamente micro animações. Agora, as quatro imagens que você vê na sua frente são essencialmente dois fluxos como o código e Figma. E eles são tipos de botões. Então, o primeiro é o que todos vocês estarão familiarizados, que é um estilo típico de menu de hambúrguer. E, em seguida, o hábito se abre quando você clica nisso, queremos que ele seja alterado e movido para o botão de fechamento circular. E o mesmo acontece aqui na parte inferior, onde temos um daqueles botões clássicos do controle deslizante onde você clica no botão desligar ao ligar , clicar no botão e desliga. Então esses controles deslizantes revertem a telha. Eles geralmente podem ser usados em diferentes aplicativos móveis ou interfaces de painel para os softwares e serviços modernos. Só para começar, vamos começar com uma demonstração para mostrar como eles se parecem. Vá para a página um, que está basicamente clicando no botão de adição no canto superior direito. Você verá os dois fluxos aqui. Então, se eu clicar nisso, você verá como ele anima ida e volta de um off para um on. E o mesmo vale para este também, desligado e ligado. Agora, uma vez que você os crie, você poderá colocá-los em suas próprias interfaces de painel ou aplicativos móveis dentro da Figma. Ou se você estiver usando qualquer outro software como o Adobe XD ou o Sketch, eles também serão processos semelhantes. Mas um vídeo depois disso. Vamos quebrar o que temos aqui. Então o que vamos fazer é começar com os sistemas de menu de hambúrgueres. Então, vamos nos livrar desses dois botões e focar apenas nesses dois aqui. No canto superior esquerdo, você verá ícones diferentes. Se você tiver o enquadramento Mover Tool, você tem o painel de ativos onde obviamente pode escolher os diferentes tipos de formas. Texto caneta, movimento manual para que você possa mover a tela e adicionar comentários. Neste particular, vamos começar recriando esses botões e os fluxos de animação. Então, vamos começar fazendo isso. Vamos? Primeiro, vamos começar com um belo retângulo e queremos um belo quadrado. Ao segurar o turno, você pode obter um bom cubo. E vamos fazer isso aqui automaticamente. Você verá, mas o Tango três pop-up aqui no canto superior esquerdo. E esse será essencialmente nosso novo botão. Então agora vamos trabalhar no CSS ou na estética da praça. Do lado direito aqui, o que queremos fazer é tentar mantê-los como números inteiros. Então vou colocar isso em 130. E isso vai automaticamente para 130 porque mudamos de link nisso. Vamos dar uma fronteira. Sobre este em particular. Temos um quadro um valor de 27. Vamos fazer o mesmo neste aqui. Então, vamos clicar neste quadrado, neste retângulo, clicar aqui e colocá-lo como 2772, desculpe, 27. Agora temos uma curva agradável, uma borda quadrada e arredondada, uma espécie de cubo. Agora vamos mudar a cor, então queremos torná-la agradável e branca. E para dar esse efeito padrão, vamos dar-lhe uma sombra. Então, se eu for para Efeitos, clique nisso e, por padrão , ele sempre lhe dará uma sombra, que você pode editar clicando neste ícone sunburst que tem as configurações de efeito. Eu clico nisso. Queremos ter certeza de que este botão tem sombras quedas iguais em todos os lados. Então, vamos fazer esse eixo y 0, que você pode ver aqui, lucro. Agora, o que vamos fazer é converter esse botão em seu próprio quadro. Agora, um quadro permite que você faça animações de fluxo de protótipo em outro quadro, seja clicando, arrastando , passando o mouse, movendo o mouse ao redor da porta. Isso essencialmente permite que você crie a animação em que você clica nisso e ela vai para esse quadro aqui. Então você pode clicar aqui, clique com o botão direito em seleção de quadros. Vamos chamar isso de hambúrguer. Em seguida, vamos adicionar algumas linhas. Então, vamos aqui para a ferramenta de formas escolher linha. Então vamos arrastar isso aqui. Nós podemos essencialmente fazer é garantir que eles surgiram no centro. Em seguida, copie cole três vezes. E vamos trazer isso aqui assim. Agora temos três linhas e apenas para torná-las um pouco mais ousadas, vamos aumentar o nível de peso para cerca cinco e depois deixá-las para o centro. Perfeito. Agora, para combinar com isso, vamos tornar isso um pouco menor. Segure Shift para mantê-lo na linha. E vamos colocá-lo na metade do caminho. Agora, o que temos é um ícone de hambúrguer de menu. Agora, o que vamos fazer agora é fazer, para garantir que quando você fizer na animação, na configuração do protótipo, ele faz esse efeito de transformação é que vamos copiar e colar todo esse quadro de hambúrguer. Então, copie a pasta e arraste-a para o lado que tenhamos alguma área clara entre eles. Agora vamos editar este para que ele, Figma reconhece automaticamente que você está usando as mesmas formas e linhas e você vai querer animar e movê-las para baixo. Se eu for aqui e renomear este ícone para fechar, agora tenho esse quadro chamado ícone de fechamento. Agora, a parte divertida. Agora vamos mexer com esse quadro e mudá-lo. Então, se eu bloquear o hambúrguer, dessa forma, não vamos tocar acidentalmente neste botão e começaremos a trabalhar aqui. Então, vamos fazer isso em um círculo. Podemos fazer isso simplesmente arrastando esse raio de canto todo o caminho até o infinito raramente, porque sempre será um belo círculo. Agora vamos trabalhar para garantir que estes se transformem em cruzes. Uma das maneiras mais fáceis de fazer isso é selecionar todos os três e clicar no centro centralizado e online. Mas, obviamente, sabemos que este estava do lado esquerdo. Então, se adicionarmos ângulos, essas linhas, elas não se alinharão corretamente. Temos que ter certeza de que os enviamos também. Agora, o que fazemos é adicionar ângulos um a um. Então, vamos fazer isso 45 graus, fazer outros 145 graus. E então faça isso menos 45 que temos. Na verdade, podemos dar alguma cor a esses ícones. Então, se formos à ferramenta de hambúrguer, segurar , mudar e clicar, podemos fazer deles uma bela cor verde. E podemos fazer isso cruzar uma cor vermelha. Então agora temos verde e vermelho, e não podemos chegar ao processo de animação. Vamos clicar neste quadro de hambúrguer. Vá para Protótipo, clique em emclique. Queremos navegar para fechar o ícone. Clique no Smart Animate porque ele dará automaticamente um efeito de morphing muito bom e, em seguida, escolha facilidade de entrada e saída. Isso permitirá que o ícone tenha essa animação elástica antes de se transformar no círculo que você verá em um momento. Vamos fazer isso 650 milissegundos. Dessa forma, estamos dando tempo suficiente para ter uma boa animação fluida e você não a perde quando clica nela. E podemos repetir o mesmo processo para o ícone. Agora você tem a opção de ir a um protótipo e clicar aqui em Adicionar mais. Mas outra maneira de fazer isso é arrastar a seta para o quadro anterior e clicar automaticamente no hambúrguer. Escolha meu animado. Está em um aplicativo de volta 650 MS. Então lá você o tem. Então, se você for verificar isso, bom fluido, ele se transforma, parece bom e parece moderno e dorme para seus aplicativos e interfaces de painel. Esse foi o primeiro. Vamos fazer é focar no segundo que tem um botão deslizante. 3. Como fazer o botão de controle deslizante e observações de fechamento: Agora, se eu colocar tudo isso escondido e olharmos para eles aqui, estes são essencialmente uma série de retângulos com bordas curvas e círculos e pequenas animações. Agora, obviamente, olhando para o primeiro, você pode ver como esse também será fácil. Você pode obter micro animações mais complexas, o que faremos em uma aula posterior. Mas para este, vamos manter animações básicas de sorriso apenas para você começar e ter uma boa sensação. Agora, vamos replicar o bloqueio dessa forma para não tocarmos neles e, essencialmente, recriamos isso. A primeira coisa que vamos fazer é colocar em uma nova praça. Vou tentar fazer isso o mesmo In lens, mas tudo bem se não. E vamos para Design e, semelhante ao botão anterior, vamos dar um raio. E neste caso vamos fazer isso 100% porque queremos um bom cilindro. Então olhe. Vamos mudar a cor. Vamos torná-lo branco e um menu suspenso. Agora, para este, vou manter o menu suspenso abaixo porque normalmente botões e controles deslizantes, botões, eles têm um efeito de sombra suspensa na metade inferior. Para realmente elevá-lo da interface do painel em que eles estão. Agora vamos adicionar um círculo, que será o botão ou o interruptor. Se você segurar Shift, exceto que você pode ver aqui que ele faz, ele faz um bom círculo inteiro. E vamos colocar isso aqui. Controle de zoom. Perfeito. O que vamos fazer é deixar isso vermelho porque esse é o interruptor desligado. Isso é realmente muito, muito brilhante. Vamos fazer isso um pouco menos. Lá vamos nós. Se você quiser, você pode usar a ferramenta conta-gotas, mas vamos supor que você não fez um desses antes. Também vamos colocar em uma caixa de texto. Então, vamos cancelar isso e nos colocar no centro aqui. Este é o nosso interruptor desligado. Para facilitar rapidamente esse processo. Isso é copiar e colar, arrastar para fora. Temos o círculo mudando para uma boa cor verde. Então, isso obviamente representará o interruptor ligado. E se eu fechar esses dois, então podemos trabalhar com essas duas opções aqui. Vamos animá-los agora de acordo. Então, primeiro as coisas, temos que transformá-los em quadros para que possamos animá-los bem. Então, vou selecionar todos esses quadros com o botão direito do mouse. Isso está fora do controle deslizante. O mesmo vale para esta seleção de quadros com o botão direito do mouse. Vou chamar isso no controle deslizante. Como fizemos antes. Eles vão clicar aqui, tem um protótipo. Arraste esta seta para este quadro. E você verá, porque estamos trabalhando dentro da mesma tela, ela salvará a animação anterior. E vamos fazer o mesmo aqui, pegar essa flecha e colocá-la de volta. Agora, obviamente, podemos não querer ter pequenas animações. Podemos querer ter animação linear é animações muito simples. Talvez não queiramos ter a facilidade de entrar e facilitar. Portanto, para um botão, não faz muito sentido ter um botão elástico antes de deslizar para a esquerda ou deslizar para a direita. Então, vamos facilitar e fazer com que este também tenha o mesmo efeito. Agora, se você fizer uma corrida prática, isso é fluxo para fluxo para. Clique nele. Você verá como funcionou. Mas o botão não se moveu. Então, tudo o que temos que fazer é voltar para a mudança da área de design e mover este texto para o turno esquerdo e movê-lo para a direita. Dessa forma, o botão agora terá um efeito de morphing. Esta é uma facilidade funciona muito bem quando você obviamente procura uma troca de alguns tipos e ícones. Mas você provavelmente notará porque ele tem apenas uma facilidade, não tem esse efeito de deslizamento da mesma forma que este. Então, se eu apenas bloquear isso, número dois, você verá como isso se move. Isso só porque escolhemos um tipo diferente de animação. Neste, você verá aqui como escolhemos que pequenas animações estão entrando e recuando. É por isso que temos esse efeito de botão. Enquanto a entrada para isso era simplesmente um slide. Foi, eu não tive esse efeito, então podemos acrescentar isso. Então, se viermos aqui para fluir quatro, venha aqui, escolhe-os, alivie. E então dizendo para este, vá aqui, o fluxo, flua quatro. Você verá como funciona muito bem. Então. Novamente, essas são apenas duas opções que você precisa fazer isso para fazer botões e os diferentes estilos de animação também. Sim, espero, espero que tenha achado esta lição interessante. Em lições futuras, vamos trabalhar na criação de uma interface de usuário real que realmente empolgante. E espero vê-lo lá. E se você tiver alguma dúvida, definitivamente deixe-as na seção de feedback desta classe. E estou ansioso para ver seus projetos como uma das entregas que eu gostaria de ver nesta classe é que você tem sua própria interface, ou pelo menos em um nível básico, apenas tendo um tela com todos esses botões e me dando o arquivo Figma e eu posso abri-los ou você pode postar um vídeo e podemos passar por ele e eu fornecerei alguns comentários. Se você tiver alguma dúvida, sinta-se à vontade para deixá-las na seção de comentários abaixo. Muito obrigado e tome cuidado. 4. Criando uma barra de retrato social horizontal com estilo: Oi. Nesta classe, vamos analisar a criação uma barra de rolagem horizontal interativa em um aplicativo ou serviço ou painel. E isso vai ter ícones dos eleitores de retratos das pessoas lá dentro. E como você pode ver aqui na animação fluida, você pode ver o quão bem percorre pessoas diferentes naquela parte do topo. Uma das coisas realmente úteis sobre isso é que permite que você realmente gerencie seus imóveis do seu aplicativo de forma suficiente. Para começar, vamos criar um quadro e vamos escolher um quadro e vamos escolher o iPhone 13 Pro Max pois este é um telefone bastante comum nos dias de hoje. E vamos adicionar algumas bordas arredondadas ao redor disso. Agora, a próxima coisa que vamos fazer é colocar algum tipo de linhas no topo. Então, isso vai replicar o botão do menu de hambúrguer que fizemos nos vídeos anteriores. Então, você pode importar isso e se quiser. Mas, para o propósito deste exercício, vamos apenas fazer uma opção de menu de duplicatas estáticas, que obviamente não tem animações de fluxo com elas. Digamos que vamos aumentar o volume do traçado um pouco lá para que ele pareça bonito e visível de mais longe. A próxima coisa que vamos fazer é criar uma barra de pesquisa. Então, as barras de pesquisa, obviamente muito comuns em aplicativos móveis, adicionarão alguns cantos arredondados lá. Então, faz como uma forma de salsicha de cilindro longo. Vamos mudar as cores para torná-la mais parecida com uma barra de pesquisa. Então, neste caso, ter algumas sombras agradáveis, que são muito comuns, por isso se destaca acima da página. Em seguida, vamos adicionar algumas linhas divisórias. Portanto, eles são obviamente muito bons para ajudar a separar diferentes paletas de um painel. E a razão pela qual estamos fazendo todas essas coisas é porque, para tornar essa experiência de rolagem horizontal agradável, queremos dar a ela pelo menos algum contexto lá. Então, agora vamos começar a fazer a rolagem horizontal real. Então, vamos fazer uma série de círculos todos rendas e distâncias iguais uns dos outros. E vamos criar alguns desses que saem da página que podemos realmente ter esse efeito de rolagem. Agora, uma das coisas que eu gosto de fazer é agrupá-los completamente só para sabermos onde eles estão e onde eles vão ficar fora da página. Mas, o mais importante, vamos colocá-los em quadros que podemos adicionar uma animação de rolagem de protótipo apenas a esse quadro específico. No momento você pode ver que recortamos e entramos para pegar o quadro. Estou arrastando-o para a área do telefone para que quaisquer outros círculos que estejam naquele quadro além dele sejam cortados. E à medida que nos movemos horizontalmente, eles aparecerão. A primeira coisa é que vamos fazer, vamos para a área de plugins. Se você não tem isso, em plugins gerenciados pelo mercado e encontre quaisquer plugins que estou usando o Unsplash, pois é um lugar muito bom para obter fotos gratuitas, o que já é gratuito. Podemos escolher duas imagens aqui. Vou escolher algumas imagens de retrato aleatórias que serão úteis e agradáveis para essa rolagem horizontal em particular no status ou na interface de perfil on-line que estamos fazendo. Uma das coisas para perceber isso é que estamos fazendo uma versão horizontal aqui. Mas se você fizer uma opção de rolagem vertical, o processo é muito o mesmo em que você tem um quadro. Dentro de um quadro, você pode informar todos os ativos, as formas, as imagens, as linhas, o texto, onde quer que você queira incluir nesse quadro. E então você pode optar por fazer rolagem horizontal ou você pode optar por fazê-la rolagem vertical. que obviamente é qual é o principal objetivo da aula de hoje. Se você não criou as ferramentas de hambúrguer ou ainda não fez os botões antes. Assista aos outros dois vídeos desta aula para saber mais sobre isso como realmente útil. Então, agora o que vamos fazer é tornar as imagens menores que podemos realmente trabalhar com elas e mascarar as imagens. Então você coloca uma imagem em cima da forma, selecione-as juntas e usa como máscara. Em seguida, você pode arrastar a imagem e colocá-la no centro. E então o que vamos fazer é repetir esse processo para as imagens restantes. Como obviamente, dá uma vibe de facebook muito agradável, quase como o Messenger. Histórias do Instagram, onde quer que você esteja fazendo este outono. Trata-se de garantir que as imagens se encaixem perfeitamente no círculo, nas formas. Então, à medida que passamos por isso, você verá como ele lentamente começa a se assemelhar a um desses aplicativos mais sociais, que sejamos honestos, é muito comum hoje em dia ter esse tipo de rolagem barras horizontais circulares , que representam histórias, feeds, online, usuários e coisas assim. Você verá no lado esquerdo aqui como temos diferentes grupos de máscaras. Agora, grupos de máscaras são obviamente que você pode fazer esses em qualquer tipo de forma. Escolhemos uma forma circular aqui. Mas você verá como as máscaras atualmente estão escondidas atrás desse quadro. Vamos tirá-los do quadro. E. Massa um sem moldura. Desculpe, o que você acabou de achatar? Se você desagrupar todos eles, eles vão aparecer. E o que vamos fazer é pegar uma máscara, esses dois círculos que fora da tela, depois colocá-los de volta no quadro original. Então usa máscara, arraste isso por cima. Vamos fazer com que ele se encaixe bem. E agora vamos arrastar esses dois círculos, essas duas máscaras e colocá-los de volta no iPhone 13. E apenas para garantir que todos esses objetos em massa estejam emoldurados , clique com o botão direito do mouse na seleção de quadros e, em seguida, certifique-se de que eu recortei para dar um bom nome de fundo ao seu conteúdo. Encurte o quadro até a extensão da janela visível e, em seguida, alinhe-se na parte inferior para mostrar isso como um divisor. E então wallah, você tem uma região na tela que representa uma divisão horizontal da barra. Agora, obviamente, no momento, não há animação e depois flui nisso. Então, apenas para obviamente fazer com que todo o resto pareça legítimo, adicione rapidamente uma caixa abaixo. Então imagine que isso seja como um post no Instagram ou algo em que só queremos ter uma imagem lá. Agora vamos voltar para esse quadro. Vamos para o protótipo. E podemos escolher um método de rolagem, e vamos escolher a rolagem horizontal. Isso permitirá que esse quadro se mova para esquerda e para a direita da tela, desde que seja cortado e o quadro esteja dentro da janela, isso funcionará perfeitamente. Então, mostraremos isso em um segundo quando clicarmos no botão Reproduzir e deixar-me vir aqui e você verá como dar um momento. Lá vamos nós. Temos um bar que tem uma boa animação de rolagem. Agora, obviamente, esta é a mais básica das barras de rolagem. Você pode ter diferentes efeitos de animação que você pode criar. Você pode adicionar quantos fluxos quiser a isso. Mas em poucas palavras, é realmente assim que fazer uma barra de rolagem vertical ou horizontal, neste caso. Estes são obviamente muito úteis em todos os tipos de peças. Agora, se estivéssemos tentando fazer disso uma função de bate-papo ou função de status, você poderia ir e fazer pequenos círculos e colocá-los no topo. Então isso é algo parecido com o que o messenger faz. Use. Verde obviamente significa que eles estão ativos. E o laranja ou um vermelho significa que ocupado ou de outra forma ou cinza normalmente significa se eles estão offline. Você pode ver aqui agrupando-os com os círculos, você pode criar um pequeno ícone colorido de grade para refletir o fato de que esses usam isso on-line ou neste caso agora. Vai ser uma maneira apenas mudando a cor para algo um pouco mais parecido com o sistema de semáforo. Você pode ver aqui como eles funcionam. Agora, outro objeto que você pode fazer é adicionar algumas funções de dica de ferramenta. Portanto, as dicas de ferramentas são basicamente efeitos de passar o mouse em que, se você passar o mouse sobre algo , quando você clicar em algo, ele criará uma dica de ferramenta pop-up. Então, neste caso específico, podemos colocar algo como online. Então, se alguém passar o mouse sobre ou clicar no usuário, ele basicamente será escravo. Basicamente, dirá se eles estão online ou não. que, novamente, é realmente útil se você estiver tentando criar um aplicativo social que tenha interatividade e bate-papo social e mensagens. Você pode não ter isso. Portanto, essa parte da classe talvez seja completamente relevante, mas é sempre bom saber como fazer essas coisas e como incorporar animações de protótipos e conectá-las a animações em movimento são mover barras de rolagem, como você pode ver no aplicativo na tela. Aqui, basta fazer o texto e a forma à esquerda, o tamanho certo, dando-lhe uma bela sombra e centro e alinhando tudo. E isso pode ser um pouco pequeno. Potencialmente. Talvez tenhamos tornado maior, mas podemos, podemos verificar e ver como parece. Na área de visualização do protótipo. Vamos enquadrar isso para que possamos realmente fazer isso. Nesse caso específico, vamos torná-los componentes porque podemos querer duplicar esse componente para todas as outras imagens mais tarde na linha. E o que vamos fazer é fazer uma introdução na barra verde, onde o círculo verde enquanto, enquanto estamos pairando ou enquanto estamos tocando neste caso específico, abra a sobreposição e vamos escolher essa dica de ferramenta online. E então vamos torná-lo manual para que possamos escolher onde essa dica de ferramenta vem quando você passar o mouse sobre ela ou clicar nela e dissolver, o que faz um bom desvanecimento lento na animação de fade out. Você pode clicar nisso e você verá como ele abre agora, como dissemos, muito pequeno. Então, vamos fazer isso um pouco maior para o usuário possa realmente ver o que está acontecendo. Isso é bom, grande lá. E então vamos para a guia de design e altere isso para, digamos 11 porque esse trabalho, Sim, parece que parece muito bom. Você pode ter que alinhar isso no centro. Porque o online parece um pouco alto demais no topo. Para o fundo. Novamente, às vezes pode ser um pouco complicado, mas isso agora será muito maior. Então você pode ver aqui. Mas atualmente temos um sempre sobre o que precisamos fazer é habilitar o usuário quando ele clicar fora desse botão verde. perto quando clicado do lado de fora. Isso significa que quando alguém clica do lado de fora, ele desaparecerá. Aí você tem isso. Você tem uma boa barra de rolagem que tem animações offline online. Você não pode atrasar efeitos e coisas assim para isso. Mas neste caso particular, só queríamos fazer uma barra de rolagem. E adicionamos alguns pequenos pedaços extras lá para fazer com que pareça mais um aplicativo de experiência social. Obviamente para baixo depois, o que vamos fazer é passar para o morfismo do vidro é o termo. Então, basicamente, você provavelmente percebe à esquerda como um aplicativo com todas essas imagens que agora removi. Mas, em segundo plano, você pode ver aquele efeito azul borrado onde todos os ativos e camadas estão acima dele. E parece muito legal. Então, definitivamente, cuidado com o próximo vídeo desta aula, onde vamos falar sobre morfismo de vidro e como facilitar isso. E apenas tome cuidado. 5. Fazer fundos de vidro em aplicações: Olá, bem-vindo à próxima aula nesta classe figma Skillshare. Agora, anteriormente, analisamos a criação de barras de rolagem horizontais, e hoje vamos analisar o morfismo do vidro. Por último, o morfismo é esse efeito que muitos aplicativos e softwares são usados nos dias de hoje para ajudar a adicionar uma camada de profundidade a um software ou aplicativo. Neste caso específico, podemos ver aqui que temos nosso aplicativo tipo instagram chamado pictórico. E temos esse belo fundo azul e roxo, que tem um bom borrão ou efeito mórfico de vidro. E isso realmente ajuda a destacar as imagens e o perfil neste aplicativo. O que vamos fazer é nos concentrar em criar isso hoje. E é uma técnica muito fácil e realmente ajuda a trazer à tona e tornar seu aplicativo mais criativo. Então, se eu desligar isso aqui, você verá que temos esse quadro deste iPhone 13 Max Pro. E você pode ver como adicionar esse efeito mórfico de vidro pode realmente adicionar essa profundidade adicional à imagem. O que vamos fazer é abrir que o nosso telefone anterior que fizemos, que tinha todos os botões de hambúrguer e os botões da barra de rolagem lá. E vamos aplicar um efeito mórfico de vidro a este telefone. Vamos mergulhar bem e mostrarei que este não é um tutorial muito complexo. Na verdade, é muito fácil de fazer. E vou mostrar exatamente como fazer isso agora. Uma das primeiras coisas que queremos fazer é trazer uma imagem que achamos que vai parecer muito legal para o fundo deste telefone. Então, se formos aqui e vamos para plug-ins, estou usando o Unsplash. Existem muitos outros plugins que você pode usar, então eu sempre posso fazer um vídeo mais tarde sobre como fazer isso e como adicionar plugins a lá. Mas vamos usar o Unsplash, que tem imagens gratuitas que você pode usar e você pode realmente reutilizá-las comercialmente também. Considerando que estamos fazendo um aplicativo que é focado em torno do usuário e é uma experiência social. Queremos garantir que a imagem não seja muito distrativa na parte de trás. Normalmente coisas como arquitetura abstrata, espaço, papéis de parede, nossas texturas são muito boas. Então, vamos dar uma olhada e ver quais papéis de parede temos. Então, esses são ótimos. Mas você pode ver como a maioria deles está localizada mais em direção a uma experiência de desktop. Então, não estou muito certo pessoalmente sobre isso. Então, vamos às texturas. Aqui vamos nós, Estes parecem um pouco melhores, mas queremos encontrar algo que tenha muita vibração lá. Se continuarmos rolando para baixo, poderemos achar algo realmente útil. Vou colocar essa imagem na pasta do projeto da classe também caso você queira reutilizá-las. Mas se não for bem-vindo para usar qualquer imagem de sua escolha. E, obviamente, isso ajuda você a tornar as coisas um pouco mais personalizadas. Por que tentamos este? Este, obviamente, há muita coisa acontecendo. Então, vamos clicar nisso e trazê-lo. Uma das primeiras coisas que vamos fazer é reduzi-lo. Portanto, segure o shift e escale-o para baixo de acordo para que ele se encaixe no diâmetro e nas dimensões da tela móvel. A próxima coisa que vamos fazer é criar um triângulo. Triângulo, desculpe meu mal, um retângulo. Vamos mascarar isso na área imobiliária do iPhone 13 Pro Max. Então, vamos fazer um retângulo e apenas fazê-lo cair em linha com isso e esticá-lo. Então, se voltarmos ao protótipo, veremos que temos um raio de borda 34. Então, se eu clicar neste retângulo e fazer este 34, você verá como agora ele se encaixa perfeitamente dentro dessa área pivô. Então, agora o que podemos fazer é arrastá-lo fora do quadro e vamos mascará-lo. Vamos mascará-lo com isso. Mas, mas antes de fazermos isso, vamos querer copiá-lo e duplicá-lo. Vou colocar isso do outro lado e vou deixar este branco. Como isso vai ser uma sobreposição sobre a imagem mascarada. Vamos voltar aqui e selecionar esta imagem abstrata e a imagem por trás dela com Shift e segure o botão direito do mouse, use como máscara. Se você clicar novamente, ele permitirá que você mova a imagem para qualquer lugar dessa imagem mascarada. Isso parece muito legal. Agora, o que vamos fazer é pegar essa imagem e arrastá-la para cima desta imagem mascarada. Então, temos o retângulo 18 aqui. Vamos chamar esse painel mórfico de vidro. E vamos arrastar isso sobre essa imagem mascarada e puxá-la. Agora, o que vamos fazer é ir em frente para efeitos e mudar a sombra para desfocar o fundo. Agora fizemos isso, mas não há nada acontecendo aqui ainda. É aqui que vamos para esta imagem aqui. E mudamos o preenchimento para cerca de 25%. Agora você pode ver aqui que temos uma sobreposição. O que é tão bom e translúcido, mas cabe bem sobre a imagem. Mas você provavelmente está se perguntando, isso é meio borrado, mas não borrado o suficiente. Se clicarmos no painel mórfico de vidro, vá para este ícone aqui e altere isso e aumente o desfoque. Digamos que chamemos de 50. Agora você pode ver como ele está borrado, basicamente a imagem por trás dela. E dá um efeito de vidro opaco ou translúcido muito bom , é por isso que chamamos de morfismo de vidro. Agora, isso parece legal, ótimo, incrível. Mas e se quiséssemos adicionar uma complexidade? E se quiséssemos adicionar mais imagens sobre isso? Então, a primeira coisa que vamos fazer é agrupar isso ou enquadrá-lo. Podemos fazer isso juntos. E vamos chamar isso de dor mórfica de vidro. Um. Vamos arrastar isso dentro do iPhone para trás e arrastar e depois colocá-lo bem na parte de trás. Dessa forma, temos um bom efeito de fundo. Termos básicos. É isso, Este é o vidro, o efeito mórfico do vidro. Se eu ir para o iPhone anterior, você verá como ele tem o mesmo, mesmo tipo de aparência. Naturalmente, esta imagem aqui tem um painel branco branco na parte superior, o que, obviamente, dá boa pausa distinta entre a área do menu na parte superior. Mas, na realidade, isso é essencialmente a mesma coisa. E depois de aprender a fazer esse efeito mórfico de vidro, você pode realmente adicionar mais e mais camadas a isso. Obviamente, se você quisesse ter uma camada que separa essa camada na parte superior. Como exemplo, podemos ir aqui e ir ao Unsplash e encontrar outro. Vamos encontrar outra imagem rápida. O que pode dar certo com isso. Então, vamos trazer essa imagem. Uma das coisas legais que você pode fazer é realmente editar a imagem com a qual isso se mistura. Se formos aqui e fizermos um quadrado da mesma forma que antes. Na verdade, editamos o painel aqui. Então, vamos colocar isso aqui e colocar isso aqui em cima e fazê-lo dobrar. Então, o que podemos fazer é mascarar isso dessa maneira errada, arredondá-lo, trazendo isso para a frente. Então clique com o botão direito, estou com o botão direito do mouse e na frente central e no mascote O mesmo que, mesmo processo de antes. E agora você pode ver aqui o que fizemos foi que adicionamos, dado isso uma dimensão extra, uma camada extra. E o que vamos fazer é obter outro retângulo quadrado, o mesmo de antes. Desenhe sobre este iPhone. Certifique-se de que seja a largura certa, a escala certa. Isso é 34. Certifique-se de que este retângulo também seja 34. Então vamos colocar isso em cima desta imagem aqui. Incrível. E vamos adicionar um desfoque de fundo, torná-lo 50 e depois fazer este 25, e depois torná-lo branco. Agora, obviamente, você pode ver aqui como ele não passa exatamente pelas bordas porque, naturalmente, não temos. Eu posso fazer isso 34 também. Isso basicamente faz com que o retângulo da máscara tenha uma borda também. E eu passo sobre isso assim. Agora, o que podemos fazer é agrupar isso. Sei que passei por isso rapidamente, mas é apenas recapitular o que eu já fiz. E vamos adicionar isso à forma. Podemos querer arrastar isso um pouco mais para baixo. Desculpas. Porque sempre podemos arrastar isso para baixo, mas para o propósito disso, podemos arrastar essa forma para aqui e depois arrastá-la para baixo. Então agora temos dois efeitos mórficos de vidro. O que podemos fazer então é trabalho e classe mórficos dois. E agora temos essas duas tintas. Podemos realmente trabalhar neles de forma diferente. Então, temos este painel aqui, que podemos mudar para que possamos tornar este mais translúcido ou menos translúcido. Portanto, pode ser 15% e depois fazer esse borrão. Vinte e cinco dessa forma, tendo mais ênfase na primeira página em comparação com a anterior. Mas, novamente, necessariamente, não parece o melhor. Mas o objetivo desta aula é apenas mostrar o que você pode ou não fazer e você pode ser realmente criativo com o morfismo de vidro. Então, o que eu gostaria que você fizesse é colocar essas duas imagens na área do arquivo do projeto. E eu peço que você realmente encontre suas próprias imagens, mas definitivamente experimente esse efeito e veja como ele se parece em seus aplicativos e seus painéis e você faz na Figma. Espero que você tenha gostado desta aula. Muito fácil, muito simples. Apenas dez minutos de duração, mas espero que você tenha encontrado algumas técnicas úteis. E estou ansioso para vê-lo para a próxima aula, que será lançada na próxima semana. Apenas obrigado.