Protótipos e animação da Figma: protótipos interativos

1. Introdução: Olá amigos. Meu nome é Tatiana e hoje estou animado para compartilhar com vocês meu conhecimento sobre como criar protótipos e figma. A prototipagem tornou-se uma habilidade essencial para designers de UX e UI. Assim como acontece com os protótipos, você pode mostrar como suas ideias devem funcionar em um aplicativo real ou aplicativo móvel. Também com a prototipagem, você pode se comunicar melhor com seus clientes ou, por exemplo, desenvolvedores que devem implementar ou projetar na vida real. Basicamente, este curso foi criado para todos os níveis. Não importa se você está apenas começando com Figma ou já trabalhou com o enxofre por um tempo. Começaremos com os conceitos básicos de prototipagem sobre como criar interações básicas entre telas. E, em seguida, passaremos para tópicos mais complicados, como criar interações para clicar e arrastar o efeito de mouse. Também falaremos sobre diferentes tipos de animações, incluindo animate inteligente. O fim. Falaremos sobre como trabalhar com componentes interativos que são muito essenciais para acelerar seu processo de prototipagem. Espero vê-lo dentro da minha aula e aproveitar meu primeiro tutorial. 2. Noções básicas de protótipos em Figma: Neste vídeo, falaremos sobre como criar uma interação simples entre dois quadros. Já preparei dois projetos diferentes para uma seção de heróis e também para nossos produtos. Esta é apenas uma simples loja fictícia que vamos trabalhar livros hoje. Sigma, como você já sabe, na guia dinheiro certo, você verá a guia Design. É basicamente onde você faz tudo relacionado ao seu design, alinhamento, cores, tipografia e assim por diante. Então você tem a guia Protótipo. E isso é realmente o que vamos falar. Eles, e também nos próximos vídeos, inspecionam que está apenas envolvido se você quiser saber, por exemplo, configurações CSS de outros elementos. Então, quando você está na seção de protótipo e seleciona seu quadro, você pode ver imediatamente um ponto final ou o ícone de mais. Isso é muito fácil porque quando você pressiona nele, você vê imediatamente um erro que pode apontar para outro quadro como esse. Quando você solta sua seta, você obtém imediatamente os detalhes da interação que são bastante ajustáveis. Então, neste caso, você pode selecionar enclave na pista e assim por diante. Mas neste vídeo só nos concentraremos na interação básica de cliques e falaremos sobre mais detalhes sobre animação e outros tipos de interação nos próximos vídeos. Para excluir, por exemplo, interação selecione um erro e pressione o teclado Excluir. No meu caso, fará mais sentido conectar o botão Comprar agora ao próximo quadro. Então, vamos fazê-lo rapidamente. Selecione o botão Comprar agora e conecte esse botão até o próximo quadro, assim. O zoológico pode ver aqui, posso navegar imediatamente para o nosso quadro de produtos. E se você tiver quadros diferentes, então você pode selecionar facilmente na lista aqui também. Tudo bem, vamos também conectar o menu superior na seção do meu herói, bem como ao próximo quadro assim. E, claro, se o usuário estiver em nossos produtos, talvez ele ou ela queira voltar. Vamos apenas conectar esse botão. Volte para o quadro inicial, a seção de heróis e o mesmo. Normalmente, quando o usuário pressiona o logotipo, você verá essa indireta que você pode voltar para casa para a página principal, importante mencionar, se você realmente clicar em uma área de fundo cinza, você pode ver imediatamente todas as interações que acontecem entre os dois quadros. Digamos que você tenha decidido mudar alguma interação ou talvez tenha cometido um erro. Você pode facilmente fazer essas modificações selecionando uma seta e na verdade, alterando as configurações nos detalhes da interação ou em uma subseção de animação. Se tiver isso, vamos visualizar nosso protótipo e a interação. Para fazer isso, deixe-me chegar à barra de menu superior e pressione o ícone atual. Tudo bem, então estamos em um modo de apresentação e vamos testar rapidamente se realmente nossa interação funciona. Quando eu passar o mouse sobre minha parte inferior aqui, você verá que a seta do mouse muda e que, na verdade, indica que posso clicar nela. Simples assim. Também estou navegado para o próximo quadro para nossos produtos. Vejo que meu próximo botão voltar realmente funciona também, e é assim que eu volto para trás. Vamos também testar rapidamente se esse manual funciona, nossos produtos. Sim, perfeito, funciona. E a interação final estará no nosso logotipo. E sim, também somos redirecionados para nossa página inicial. No próximo vídeo, falaremos mais sobre as configurações do modo de apresentação e também dispositivos que você pode usar para visualizar seus protótipos. 3. Modo de apresentação e dispositivos: Aqui eu gostaria de compartilhar com vocês alguns truques no modo de apresentação que você pode usar para obter a melhor experiência de visualização de seus protótipos. Quando você abre seu quadro, você pode basicamente interagir com ele. Mas, por exemplo, se você não tiver certeza ou se seu usuário não é verdadeiro clique com o botão direito do mouse, você pode simplesmente clicar em qualquer lugar do quadro e você receberá as dicas sobre onde você realmente clica. Portanto, essas são apenas as áreas clicáveis que você pode usar. Claro, quando você passa o mouse sobre esses elementos, você pode ver que eles também podem ser clicados. Vamos falar sobre diferentes opções aqui. Você pode ajustar seu quadro na largura diferente da tela. Portanto, o tamanho real significa que seu quadro será 100% de como deveria ser. Portanto, se seu quadro tiver muito mais pixels do que a tela real , você não o verá completamente. O melhor que eu gostaria de fazer é ajustar a largura ou, por exemplo, tela cheia. Em seguida, você verá uma visão geral. Não a área do seu quadro está marcada e você pode navegar e testá-la facilmente , bem como nas opções que, por exemplo, pode desativar os pontos de acesso no onClick. Então, quando você pressiona seu quadro, as dicas nulas estão sendo mostradas mais. Quando você o ativa. Agora você vê as dicas novamente também. Você pode ocultar a barra lateral para ter uma visão melhor. Você tem mais área para ver seu protótipo, o que também é bastante útil. Claro, o último é mostrar Figma UI. Se você estiver desabilitado, não verá mais muitas configurações. Para reativá-lo de volta, você pode ver a dica da Figma pressione Control slash bar para mostrar a coisa que minha UI novamente, vamos fazer isso. Aqui vemos novamente nosso menu. O que eu também gosto no modo de apresentação é que você pode colaborar com os membros da sua equipe ou com seus clientes. Por exemplo, a principal característica é compartilhar o protótipo. Quando você pressiona um protótipo nítido, você pode realmente adicionar os e-mails de pessoas que você deseja visualizar seu protótipo ou realmente editá-lo. Isso é bastante útil se você quiser colaborar juntos. Ainda mais fácil, você pode realmente ter qualquer pessoa com o link pode ver ou, por exemplo, pode editar na Figma como se houvesse planos gratuitos e também pagos. E nas plantas gratuitas você tem uma limitação de quantas pessoas podem editar e colaborar. Mas não abordaremos esse tópico aqui. Você pode lê-lo facilmente em um centro de saúde de Figma e também, o último ponto que eu queria mostrar aqui é que você pode colocar comentários em seu protótipo em um modo de apresentação. Por exemplo, vamos adicionar algo. Por exemplo, quando o membro da sua equipe o abre, ele pode ver imediatamente que você deixou um comentário como, Ei, eu quero que a cor desse botão seja alterada facilmente. Outra pessoa pode responder ao seu comentário ou, por exemplo, mercado conforme resolvido também quando sair do modo de apresentação, você tem uma frase diferente no protótipo DEP. Essas configurações só estarão visíveis se você desmarcar os quadros. Se você selecionar o quadro, terá configurações totalmente diferentes aqui. Então, vamos desmarcá-lo rapidamente. E uma das configurações mais importantes que vou mostrar a você é realmente dispositivo. É muito útil porque você pode visualizar seu protótipo no dispositivo real. E neste caso, gostaria de visualizar minha versão móvel da tela de nossos produtos. O quadro que criei é o iPhone 11 Pro. Vamos verificar isso. Você pode ver imediatamente a pré-visualização como ela ficará. Você vai, por exemplo, modificar o modelo. Você pode escolher um espaço prateado, cinza, verde da meia-noite, mas vamos mantê-lo dourado, por exemplo. Você também pode modificar o posicionamento para que seja vertical ou horizontal. E, claro, você pode ver os fluxos. E aqui podemos copiar um link para o seu fluxo, selecionar especificamente o quadro do fluxo. Como você pode ver, o primeiro fluxo redirecionado imediatamente para o quadro de seção do meu herói. E é claro que você pode jogá-lo imediatamente. Sim, vamos ver como nosso segundo fluxo está sendo mostrado em um dispositivo real. Então, aqui, vemos como nossa versão móvel da tela será exibida em um celular. E é realmente muito bom ver, especialmente para as margens nas margens laterais e nas margens superiores para garantir que nada seja cortado e que seu usuário terá a melhor experiência do seu protótipo. 4. Tipos de animação.: Lembre-se de nossa simples interação entre dois quadros que criamos há algum tempo? Bem, se você se lembrar corretamente, não brincamos especificamente, teríamos configurações dos detalhes e animações da interação. E hoje vou explicar a vocês oito tipos diferentes de animações que você pode realmente usar em seus protótipos. Portanto, por padrão, na Figma, sua animação é definida instantaneamente e em um instante. Na verdade, sua transição de protótipo é bastante ampla. Ele não tem essa transição suave que você costuma ver em aplicativos e sites legais. Para criar uma transição mais suave, eu sempre recomendo começar com o básico. Por exemplo, escolhendo animação dissolver, ela dissolverá a animação. Você pode ter essas curvas diferentes que você pode selecionar com diferentes tipos de transmissão. Então, por padrão, ele está configurado para facilitar. E aqui você pode definir diferentes tipos de atraso. Por exemplo, se for apenas 300 milissegundos, a transição será bastante rápida. O que eu gosto no sigma é que aqui nesta caixa preta, você pode ver imediatamente a interação, como será. Então, vamos testá-lo rapidamente em nossos protótipos. Então eu compro agora e vejo essa transição suave, mas foi bem rápida aqui. Vamos aumentá-lo para 1 segundo. Aqui estão a transição é menor e muito mais lenta. Nesse caso, ele realmente não se aplica porque parece um pouco estranho em um site ter uma transição como essa. Mas ele será útil, por exemplo, para slides. Se você tiver alguma apresentação a fazer , ela ficará muito, muito melhor do que apenas uma animação instantânea. O próximo tipo de animação que eu gostaria de falar é inteligente animate. O Smart Animate procura camadas correspondentes entre dois quadros. Ele reconhece a diferença e realmente anima essas camadas entre os quadros. Vou mostrar rapidamente como funciona, mas teremos outro vídeo especificamente dedicado ao animate inteligente porque é um pouco complexo e requer mais tempo para explicar. Então também, vamos apenas selecionar a facilidade com, por exemplo, 800 milissegundos e você verá o que vai acontecer. Vamos pressionar nosso fundo. Você vê que a animação foi bastante complicada. Então Figma encontrou essas combinações entre camadas de textos. E você pode ver que tivemos essa interação complicada de que, onde os textos primários estavam indo para o próximo quadro, a próxima animação está se movendo. E você pode ver que, na verdade nosso amigo está sendo movido de diferentes direções. E o que eu gosto nesse tipo de animação é que você pode selecionar a direção, seja ela de cima, de baixo ou de lado. Aqui você vê que nosso segundo quadro está sendo movido do lado esquerdo do nosso primeiro quadro. Mover para fora tem uma indireta muito semelhante, mas funciona de outra forma. Vamos verificar rapidamente como isso se parece. Bush tem uma animação e interação bastante semelhantes. Você também pode selecionar diferentes direções a partir das quais o segundo quadro é empurrado para o próximo. Mas também gosto muito porque pode ser uma interação muito boa, especialmente quando você tem um site rolável. É incrível, mas talvez para melhorar, podemos aumentar o atraso. Vamos aumentá-lo para 1600 milissegundos. Aqui está incrível muitos sites e hoje em dia use esse truque quando eles querem que o usuário desperdice pode rolar para baixo e obter suas interações legais quando pressionar o botão. Eu realmente gosto disso. Então eu não funcionei exatamente como empurrar. Ele tem esse sentimento como um slide e está vindo do topo para o nosso quadro e basicamente o move para fora aqui. Você também pode selecionar direções diferentes, mas deixe-me mostrar rapidamente como exatamente isso se parece. Então, basicamente, nosso quadro ainda está vindo do topo, mas não empurra o primeiro quadro, mas ele meio que vem em cima dele como um slide. Finalmente, o último é deslizar para fora é quando o primeiro quadro está sendo deslizado para fora e o segundo quadro aparece exatamente assim. Então essa foi uma interação bem simples aqui. Na animação, você terá diferentes tipos de interação. E, por padrão, é fácil, mas você pode brincar e selecionar configurações diferentes. Mas, por exemplo, se você também quiser uma animação realmente avançada, recomendo usar o costume. Falaremos sobre isso mais tarde em mais detalhes. Mas que costume você pode ter uma interação mais avançada. Então aqui você pode ver essa curva de força, que você pode mudar, por exemplo, assim. E você verá uma animação totalmente diferente em comparação com o padrão predefinido. Exatamente assim. Você pode ver que primeiro foi bastante rápido e depois recebe o atraso. 5. Efeito hover: Hoje vamos falar sobre como criar uma animação hover. Esta animação é extremamente fácil de fazer e para ser honesto, é meu tipo favorito de animação que você pode fazer em sigma. Aqui, já criei um quadro com um tamanho de desktop, e já encontrei também uma imagem com alguns móveis. Então, vamos imaginar que criamos uma animação de pairar para uma loja online onde você vende móveis e você quer exibir uma animação muito legal era alguém basicamente paira com a boca. Então, para começar, vamos copiar rapidamente essa imagem fora do nosso quadro. Aqui, vamos fazer algumas modificações para exibir nosso estado de focalização. Então, no meu caso, gostaria de adicionar preenchimento extra de uma cor preta com a porcentagem de opacidade de 30%. Também adicionarei um título. Tudo bem, então eu basicamente mudei a fonte e o tamanho dela. Vamos também selecionar ambas as camadas e colocar os enxofres minimalistas no meio da arquitetura. E também se você criar uma loja online é muito importante colocar call to action. No meu caso, criarei um botão que diz Comprar Agora para que os usuários possam abrir imediatamente a seleção de enxofre, digamos, e comprar aqueles que eles gostam. Vamos mover nossa camada de texto acima nossa camada retangular para que ela seja exibida. Claro, vamos selecionar essas duas camadas e criar um alinhamento no centro. Agruparei essas duas camadas também, e também diminuirei o tamanho desse botão. Selecionarei minha imagem e também um botão para aliá-los em um centro. Tudo bem, então, quando terminar criar seu estado de focalização, selecione todas essas camadas e, basicamente, clique com selecione todas essas camadas e, basicamente, o botão direito do mouse e selecione Seleção de quadros. É muito importante que você não apenas agrupe esses elementos, mas os selecione como um quadro. Quando ambos os estados estiverem prontos, vamos navegar até a guia Protótipo e criar nossa interação. Claro, vou conectar a primeira imagem, o estado ocioso, ao nosso estado de paira. Nos detalhes da interação, selecionarei enquanto pairar, o que é bastante lógico. Parte importante aqui é que não selecionaremos navegar até a briga, mas teremos que selecionar Abrir sobreposição. Com sobreposição aberta, isso significa que a camada que você está sendo apontada ferramenta realmente substituirá as primeiras camadas. Então, neste caso, obteremos o efeito de focalização perfeito. E, claro, em uma seção de sobreposição, você tem várias funções. Mas o que é importante escolher aqui é manual porque queremos ter certeza de que nossa imagem está sendo um executivo, a mesma posição que nossa guarda no quadro. Então, como você pode ver, posso mover a posição da minha camada de focalização no tamanho diferente, que significa que ela não estará exatamente no meio da primeira imagem para o nosso experimento, para nosso teste. Vamos fazer isso exatamente no meio. Vamos ver imediatamente como ele funciona. Então aqui vou pairar com o mouse e olhar e ver um estado de focalização diferente , o que é perfeito. Mas, como você pode ver também, que a animação não é bem suave. A razão para isso é, na verdade, nossa configuração de animação porque, por padrão, como você se lembra dos vídeos anteriores, é definida instantaneamente. Mas neste caso, vamos escolher dissolver e vamos mantê-lo como está com um padrão 30 milissegundos de atraso e facilitar animação e vamos verificar rapidamente como ela funciona. Sim, como você pode ver, é muito mais suave. Você vê que a transmissão é muito melhor e parece mais natural. Então esse foi o boreal sobre animação de pairar. Vejo você no próximo vídeo. 6. Animação inteligente - parte 1 (conceitos básicos): Hoje vamos aprender sobre animar inteligente na Figma. Com o Smart Animate, você pode se conectar a quadros semelhantes e obter a animação fluida entre eles. Mas, para ilustrar mais precisamente como funciona, deixe-me mostrar rapidamente um exemplo simples. Em sigma. Vamos criar dois quadros. Selecionarei como sempre, quadro móvel do iPhone 11 Pro Max. Vou duplicar imediatamente este quadro para a conveniência. Vamos apenas criar uma forma simples, por exemplo, uma retangular. Vou colocar meu retangular no primeiro quadro na parte inferior. E selecionarei rapidamente uma cor aleatória para preencher. E vou copiar colar este retangular para o segundo quadro, mas também vou movê-lo para o topo do quadro. E também para ilustrar para você o inteligente animar a animação. Vou girar essa forma em 180 graus. Agora você não viu nenhuma diferença visual, mas confie em mim, em nossa apresentação, você definitivamente verá isso. Vamos navegar rapidamente até a guia Protótipo e conectar os dois quadros. Então, vou apenas selecionar no toque, criarei uma animação com smart animate e quais as configurações padrão de facilidade com um atraso de 300 milissegundos. E vamos fazer o mesmo. Quando você toca de volta na mesma forma, você retorna ao primeiro quadro. Tudo bem, vamos validar rapidamente nosso protótipo. Então, vou clicar rapidamente na minha forma. Como você pode ver, é girado principalmente, mas acho que o atraso foi muito rápido. Vamos voltar rapidamente ao nosso arquivo e alterar o atraso para um número maior. Vamos testá-lo novamente. Você pode ver que nossa forma está sendo girada de forma menor. E eu realmente gosto porque você pode criar tantas animações complexas com animate inteligente, mas apenas para lhe dar outro exemplo para comparar. Então, o que acontecerá se simplesmente dissolvermos nossa animação? Haverá uma diferença? Você pode pensar que sim, será exatamente o mesmo, mas na verdade será bem diferente. Então eu escrevo aqui, vamos clicar em nossa forma novamente. E você vê que a rotação não acontece. E, claro, se não girar sua forma, isso realmente não importa. Você só vê a transição suave, mas não viu esse incrível efeito de animação como fizemos antes. Deixe-me também mostrar como o animate inteligente funciona em um exemplo da vida real. 7. Animação inteligente - parte 2 (barra de menu): Imagine que você já tem uma seção de heróis para o seu site. No meu caso, já preparei um layout básico e vocês são bem-vindos apenas para copiá-lo ou criar sua própria seção de heróis. Mas o que vou ilustrar aqui é como o menu de hambúrguer se comportará com o smart animate quando o usuário clicar nele. Vamos selecionar rapidamente nosso quadro e duplicar. E no segundo quadro, vamos criar nossa interação sobre como o manual desliza para fora do lado direito. Então, antes de tudo, vou pegar este menu de hambúrguer e vou girá-lo em 90 graus. E então, claro, criarei uma caixa de menu. Vamos rapidamente também colorir em um tom mais escuro de amarelo e eles esquecerão movê-lo para baixo do menu de hambúrguer porque você quer vê-lo com um traço. Também modificarei as cores para que possamos ver nosso menu de hambúrguer com bastante precisão. O último passo seria apenas escrever alguns itens de menu. Selecionarei todas as minhas camadas de texto junto com uma caixa retangular e também as alinharei ao centro. Neste momento, se conectarmos nosso menu de hambúrguer no protótipo, não veremos nenhuma animação específica, mas veremos apenas um fluxo muito bom onde o dinheiro aparecerá. Deixe-me ilustrá-lo rapidamente para você em uma etapa de protótipo, vamos novamente conectar nosso menu de hambúrguer onclick com smart animate com um atraso de 800 milissegundos e o mesmo aqui. Quando eu clico de volta, meu menu desaparecerá. Vamos rápido com esse espeto. Sim. Então você vê que basicamente o gerente apareceu lentamente com uma transição suave. Mas o que eu quero alcançar é que meu manual deslize do lado direito. Então, para conseguir isso, vou pegar meu menu e vou copiar colá-lo no primeiro quadro. E vamos selecionar este menu está em ambos os quadros e movê-los para fora do nosso quadro é muito importante porque bicicleta Figma rastreia toda a interação que acontece. Então, se nosso dinheiro vai deslizar para fora do lado direito, temos que movê-lo em nosso primeiro, em ambos os quadros. E especificamente no segundo quadro, vamos movê-lo de volta como era inicialmente. Vamos ver rapidamente se conseguimos uma transição melhor. Sim, então isso é o que eu queria alcançar é muito bom. E, claro, com o Smart Animate, você pode criar animações muito mais difíceis e complicadas. Mas como uma lição básica é um bom começo para você começar a explorar. Me avise, pessoal, se você conseguiu fazer isso e eu estou curioso para ver seus trabalhos também. 8. Rolagem horizontal e vertical - aplicativo de galeria de fotos: Olá amigos. Hoje vamos falar sobre como criar uma animação horizontal e vertical. E especificamente para esta lição, criaremos uma tela simples para o aplicativo de viagens. Então, vamos abrir rapidamente o Sigma, selecionar nossa ferramenta de quadro e selecionar a moldura do telefone predefinida. No meu caso, selecionarei o iPhone Pro Max. Vou adicionar rapidamente algum título. Vamos também definir o tamanho para 26 e também a espessura de semi negrito. Também criarei um sub-título e diminuirei seu tamanho, é claro, e também a espessura para média. O próximo passo seria criar cartões de viagem que eu gostaria de animar e disponibilizá-los na direção horizontal. Vamos também arredondar os cantos. Bem aqui. Também vou escrever algum texto. Por exemplo, Nova York. Também vou agrupar esses dois elementos e copiá-los. Tudo bem, apenas para a conveniência, vou mover esses elementos para fora do quadro, a menos que realmente renomeie descartes primeiro. Também selecionarei cada retângulo e adicionarei a imagem para ele. Basicamente, eu uso o plugin Unsplash onde você pode procurar várias imagens diferentes para qualquer tipo de tópico que você tenha para seus protótipos. Então, vamos começar com Nova York. Linda. Gostei muito dessas imagens. Vamos selecionar todos esses cartões e, com o botão direito do mouse, vamos selecionar Seleção de quadros. Portanto, é muito importante que nossos elementos estejam dentro de um quadro e não apenas dentro de um grupo. Selecionarei o quadro e moverei esses elementos dentro do nosso aplicativo rapidamente para criar os elementos para rolagem vertical, vou apenas copiar o sub-título e criar os carros para nossa rolagem vertical. Logo depois que eu consegui, todos esses elementos, é claro, vou colocá-los fora do nosso quadro para que eu possa facilitar as modificações. Então, vamos também alterar os títulos e as imagens de cada um dos nossos elementos de profundidade. Perfeito. Vamos selecionar novamente todos os nossos elementos também, convertê-lo para o quadro. E, claro, esse quadro, voltarei para dentro da tela do meu aplicativo. Perfeito, então nossa tela do aplicativo está pronta. Mas antes de prosseguirmos, a prototipagem, deixe-me dizer-lhe algum truque. Você considera que o quadro está fora do quadro do nosso aplicativo. E para fazer nossa rolagem horizontal e vertical, precisamos modificar as bordas desses quadros justas para a mesma largura e altura do nosso aplicativo de viagem. Isso é muito importante porque se você deixar os quadros fora do quadro do aplicativo, a animação funcionará. Também vou modificá-lo assim. Quando você vai para a guia Protótipo e seleciona seu quadro, você pode ver aqui imediatamente a guia de rolagem de transbordamento que o baú apareceu. E, por padrão, você não verá rolagem. Isso significa que nenhuma animação de rolagem será implementada. Quando abro o menu suspenso. Para este caso, escolherei a rolagem horizontal. O mesmo para o próximo quadro. Também escolherá a rolagem de estouro para a rolagem vertical. Incrível. Vamos ver como ele funciona em ação. Perfeito. Este é o nosso aplicativo. Vou rolar esses carros e ele funciona sobre a rolagem horizontal é bastante perfeito. E a nossa rolagem vertical? Ele também rola, mas vejo algum estouro aqui. Basicamente, esse quadro vai acima do nosso subtítulo e de outros guardas de viagem, o que não é como ele deve funcionar. Para corrigir esse problema, volte para o protótipo, selecione o quadro vertical. E, na verdade, na seção de design, é muito importante que você use a função de conteúdo do clipe. E quando você corta conteúdo, isso significa que basicamente a rolagem não vai para fora das bordas do quadro, que são exatamente definidas aqui. Vamos ver em nosso modo de apresentação as alterações que acabamos de fazer. Como você pode ver agora, eu rolo e basicamente meus elementos e não transbordo, eles não substituem meus elementos de ópera, o que é incrível. Então esse foi o tutorial sobre animação vertical e horizontal no sigma. 9. Sobreposição aberta - aplicativo bancário: Hoje vamos aprender como criar animações de sobreposição no sigma. As animações de sobreposição são especialmente úteis para aplicativos móveis ou para qualquer tipo de protótipo em que você gostaria de mostrar uma mensagem pop-up. Por exemplo, para notificar o usuário de que a ação acontece ou avisar sobre o erro que ele cometeu e assim por diante. Eles trabalharão especificamente com o aplicativo financeiro que eu já preparei, mas esse é apenas um exemplo para mostrar como a animação funcionará. Vamos criar juntos uma notificação quando o usuário pressionar o botão de segurança, criarei especificamente um novo quadro com um tamanho aleatório fora do quadro do meu aplicativo móvel. Portanto, este será nomeado como uma notificação. Vamos criar um título aqui, tão bem feito. Tudo bem, e o último passo será realmente criar um botão call to action, que será muito menor do que este. E vamos apenas dizer esse grupo juntos todos esses três elementos e alinhá-los exatamente no centro. Então, especificamente para esta notificação, também vou arredondar os cantos aqui até o valor de dez. E também adicionarei uma sombra a este quadro nos efeitos, vamos criar uma sombra. A menos que apenas quisesse encontrar algumas configurações aqui, vou desfocar um pouco mais e talvez diminuir a opacidade da cor preta para que ela ofereça uma aparência mais natural. Tudo bem, então quando você terminar sua notificação, vamos entrar na seção de prototipagem para o tipo aqui. E vamos remover o dispositivo porque não quero ver nenhum dispositivo por enquanto. Vamos conectar nosso botão Salvar com nossas notificações. Então, quando eu clicar neste botão, gostaria de ver meu pop-up. Mas neste caso, como você pode ver na interação, a configuração predefinida é a ferramenta de navegação, mas gostaríamos de alterá-la para sobreposição aberta e uma sobreposição aberta. É aí que a diversão começa. Você pode alinhá-lo em um centro ou, por exemplo, canto superior esquerdo, no canto inferior esquerdo e assim por diante. Vamos ver o que acontece quando basicamente selecionamos essa sobreposição central. Pressionarei meu botão Salvar e vejo minha notificação exatamente no meio porque nossa sobreposição aberta foi definida para a posição central. Mas se eu quiser mais uma posição personalizada, modificarei minha sobreposição para a posição manual. No manual, você pode ver aqui minha notificação com essas linhas cruzadas, que significa que esta é a posição que vou configurá-la para estar na minha tela. Eu gostaria basicamente de movê-lo aqui. Então, quanto mais parte superior do meu protótipo, vamos verificar como ele funciona. Deixe-me pressionar rapidamente em Salvar e você pode ver que minha notificação pop-up está exatamente na posição exata onde eu a configurei. Então, espero que você tenha gostado deste tutorial e o veja na próxima aula. 10. Em animação de arrasto - aplicativo de transferência: Anteriormente, eram trabalhados principalmente com gatilhos de protótipos, como onclick e também passar o mouse. Mas hoje vamos falar sobre como criar uma animação será acionada ao arrastar. Esse tipo de acionador permite que ele execute uma ação quando você arrasta um elemento na tela, criarei rapidamente um título. Vamos mudar também a cor do azul. Vamos também criar rapidamente um botão de call to action. Vamos arredondar também os cantos para 20, e também vamos chamar ou para a cor azul. Perfeito. Agora vamos entrar na parte mais interessante. Vamos criar um controle deslizante que vamos animar com a animação Andrex. Selecionarei a ferramenta retangular e desenharei um retangular muito fino que apresentaremos a linha do nosso controle deslizante. Vamos também arredondar os cantos dele. Vou mudar o preenchimento para a cor cinza mais clara. Também vou copiar o mesmo retangular e alterá-lo em sua largura. E é muito importante para nós criar uma animação que um controle deslizante também mudará de cor quando a parte inferior vai se mover para o outro lado. Vamos preenchê-lo rapidamente também na cor azul claro. Vou torná-lo ainda menor. E o último passo será criar uma elipse. Esta elipse interagiremos para nossa animação na pista. Claro que não esquecer, também temos que criar um número, basicamente, o número que queremos transferi-lo para alguém. Vamos revisar rapidamente alguma ficção ou números. Por exemplo, vinte e cinco dólares. Vou alinhá-lo no centro e também copiarei esse número para criar esse efeito rastreável dos números mudando enquanto arrasto meu controle deslizante. Não importa essa posição no momento, porque vamos agrupá-la no quadro e mudá-la. Então, basicamente, as restrições serão diferentes e não se sobrepõem a outras camadas que temos nesta tela. Selecionei todas as minhas camadas de texto e pressionarei o botão direito do mouse da minha boca e pressionarei na seleção de quadros. E isso é basicamente posicioná-lo um pouco mais alto. Então, o que vamos fazer é que temos as margens do nosso quadro, a caixa azul em torno de todos os nossos elementos. E vou arrastar essas margens de volta para o meu número inicial assim. Mas, neste caso, derramamos, vemos outros números e eles se sobrepõem a outras camadas. Para resolver esse problema, vou cortar o conteúdo. Como você pode ver, outros números simplesmente desapareceram. Agrupei todos esses elementos e os alinharei exatamente no centro, talvez um pouco mais alto apenas para torná-lo visualmente agradável. A menos que copie rapidamente esse quadro e crie o próximo estado do nosso controle deslizante. Então, neste caso, vou apenas mover a elipse para a direita, aqui até a borda. E diga o que vai acontecer com o nosso segundo retangular do slide. Vou arrastá-lo com o Ocidente para estar alinhado com a elipse. E este nos permitirá criar uma boa animação que a cor está mudando quando a elipse está sendo arrastada. E também, vamos olhar, esquecer nosso número. Então aqui é claro que foi deslizar para a direita e misturá-lo, nosso número também aumentará. O que vou fazer dentro do quadro, acabei de selecionar todas as camadas de texto e vou movê-las para cima com as teclas de seta. Exatamente assim. Então, neste momento, temos dois de nossos quadros. Vamos passar para a guia Protótipo e realmente criar nossa interação. Vamos trabalhar com nossa elipse. Vamos conectar nosso segundo quadro nos detalhes da interação que vou selecionar em Arrastar. Isso é o que vai acontecer quando arrastarmos nossa elipse. E, claro, para a animação para o melhor efeito visual e também para a transição suave, vamos trabalhar com animate inteligente, o mesmo. Claro, quando arrasto minha elipse de volta, vou para o estado inicial no meu primeiro quadro, o mesmo na pista, navegar para o controle deslizante é 0 quadro com uma animação animate inteligente com um atraso de 300 milissegundos. Então, vamos validar rapidamente nosso protótipo no modo de apresentação. Bem aqui, onde está no modo de apresentação, e é bastante emocionante. Então, vamos tentar arrastar nosso controle deslizante. E como você pode ver, os números estão mudando e também o controle deslizante está sendo preenchido com uma cor azul claro. Esta é a vitrine perfeita da interação medicamentosa. E parece muito bom porque você pode ter uma simulação tão real da interação, por exemplo, para este aplicativo bancário imaginário, Vejo você no próximo tutorial. 11. Componentes interativos - aplicativo de redes sociais: Neste vídeo, criaremos animações com a ajuda de componentes indiretos. Componentes interativos permitem definir interações e animações entre a variância no conjunto de componentes, o que significa que as instâncias ficam imediatamente ativas no modo de prototipagem. Dessa forma, você pode criar elementos indiretivos reutilizáveis mais rapidamente e também reduzir a complexidade de sua prototipagem, o que, em geral, acelera seu fluxo de trabalho de prototipagem. Então, vamos criar rapidamente nosso conjunto de componentes interativos. Então abra seu arquivo Figma e vamos imediatamente para Plugins e selecione o ícone. Se eu plug-in, nesse caso, gostaria de adicionar um difícil possível porque gostaria de criar uma espécie de aplicativo de mídia social onde o usuário possa gostar de imagens. Vamos importá-lo rapidamente e posso vê-lo aqui. Apenas para os propósitos deste tutorial, desagruparei esse quadro e, na verdade, desagruparei o próprio grupo. Então, no final, só tenho uma camada vetorial. Este será um estado ocioso, mas precisamos criar mais dois estados, que significa o que acontecerá quando o usuário, passaremos o mouse sobre o ícone e também o que acontecerá quando o usuário clicar no ícone. Vamos duplicar esse ícone duas vezes. Primeiro, vou trabalhar com um estado de paira. Então, para este caso, vou criar, preencher e selecionar apenas a cor que faz sentido ser o tipo mais difícil de rosado. Mas deixe-me copiar rapidamente esse código de cores para mim. E isso reduzirá a opacidade para 30%. O mesmo para o estado onclick. Vou criar, preencher e depois copiar colar exatamente da mesma cor. Mas, neste caso, a opacidade será alimentada com 100%. Quando terminar de criar seu estado, selecione todas essas camadas e navegue até a barra de menu superior, onde você vê os componentes. Posso abri-lo e selecionar Criar conjunto de componentes. Portanto, é importante que você não crie um componente a partir dos três elementos, mas a Ucrânia, um conjunto de componentes. Aqui, você vê imediatamente as bordas com as linhas tracejadas. E isso significa que esse é o conjunto de componentes criado. Antes de começarmos a prototipagem, será inteligente renomear nossa variância dentro do estágio de componentes. Então, o primeiro será padrão, é claro, mas o segundo, eu vou definir a propriedade para passar o mouse. E o terceiro terá a propriedade. Clique em. Quando você terminar de renomear sua variação. Vá para a guia Protótipo e vamos criar nossa interação. É claro que, do estado ocioso, eu também sou o estado de paira, o que significa que, enquanto paira, minha variante mudará a propriedade para passar o mouse. Você pode vê-lo aqui com um menu suspenso, você pode mudar para diferentes apostas, mas neste caso, o mouse faz mais sentido. A animação vou selecionar e animar inteligente com as configurações padrão de facilidade e um atraso de 300 milissegundos. Então, claro, vamos passar para o próximo estado. Então, quando clico nele, mudei para o clique também. Aqui está o smart animate, como no exemplo anterior. E, claro, se o usuário desmarcar nosso ícone, voltamos para o nosso estado ocioso, que significa que o mesmo clicaria nos estados de clique em que voltamos ao padrão. Este ECS que nossos componentes diretivos são criados aqui. E vamos criar rapidamente uma tela de celular simples com nosso aplicativo básico de mídia social. Selecionarei imediatamente nossa variante padrão e copiarei para fora do quadro do conjunto de componentes. Vou pressionar o Alt e arrastá-lo para o meu quadro de mídia social. E, claro, vou selecionar esses dois elementos e copiá-los para criar mais da mesma variação para simular um feed de mídia social, parece bom. E o último passo será, claro, pagar algumas imagens com meu plugin favorito chamado Unsplash. Vamos colocar aleatoriamente algumas imagens aqui. Perfeito, e se fizermos tudo corretamente, isso significa que não teríamos que conectar nenhum fio fora do nosso quadro. Podemos ir imediatamente para o modo de apresentação e ver como nosso ícone muda seus estados. Incrível. Você pode ver que eu passar o mouse sobre, posso clicar, eu posso gostar da imagem. Eu posso gostar de outro. Posso gostar de outro novamente. E é claro que posso diferente disso, se eu quiser. Isso é realmente incrível porque meu fluxo de trabalho é muito mais fácil do que se eu simplesmente criasse outro quadro e eu conectasse todos os ícones a esse quadro e assim por diante. O que também é útil sobre componentes interativos é que você pode compartilhá-los com sua equipe. E, por exemplo, se você tiver várias páginas no arquivo do projeto, ainda poderá encontrar o mesmo ícone em seus ativos. Em seus ensaios, você pode ver os componentes locais e simplesmente arrastá-lo e tê-lo em outra página. Isso realmente simplifica o fluxo de trabalho. E, por exemplo, se você colaborar com pessoas diferentes, elas também podem usar o mesmo ícone, o mesmo componente interativo por meio do arquivo em que você trabalha em conjunto.