Protótipo e animações no Figma | Amine Abdelkebir | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Protótipo e animações no Figma

teacher avatar Amine Abdelkebir, UI/UX Designer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Trailer do curso

      1:03

    • 2.

      Processo de design

      2:15

    • 3.

      Criação de protótipos

      1:58

    • 4.

      Demonstração de projetos

      1:28

    • 5.

      Adicione protótipo

      25:53

    • 6.

      Adicione animação inteligente

      19:31

    • 7.

      Crie um spinner

      9:17

    • 8.

      Visão geral final

      1:00

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

114

Estudantes

--

Sobre este curso

Neste curso, você aprenderá tudo sobre a prototipagem da figma, animações e como alavancá-las para criar um protótipo da vida real do zero.

Descrição do conteúdo:

  1. Processo de design: neste vídeo, vou compartilhar com você porque a prototipagem é importante no processo de experiência do usuário e como podemos escolher o método certo para nosso projeto de prototipaga.
  2. Prototipagem: neste vídeo, temos uma explicação rápida ou demonstração sobre prototipagem, e o que você precisa para prototipagem?
  3. Demonstração de projetos: neste vídeo, apresentaremos o resultado final do projeto.
  4. Adicione protótipos: neste vídeo, vamos começar a adicionar links entre as diferentes telas e a personalizar os detalhes de interação do aplicativo.
  5. Adicione animação inteligente: neste vídeo, vamos adicionar animações aos componentes de tela.
  6. Crie Spinner: neste vídeo, vamos aprender como podemos criar um indicador de carregamento como o spinner.
  7. Visão geral final: neste vídeo, apresentaremos o resultado final da nossa aplicação.

Nunca usou o Figma antes?

Se esta é sua primeira vez usando o Figma, é recomendável que você primeiro confira o curum de Introdução ao Figma antes de fazer este curum (passo opcional):

Clique neste link: como começar a usar o Figma

Conheça seu professor

Teacher Profile Image

Amine Abdelkebir

UI/UX Designer

Professor

Hello, I'm Amine!
UI/UX Designer with more than 3 years of experience designing, working on multiple projects at both mobile and web application. Figma, Adobe XD and Sketch are my favourite tools.

Visualizar o perfil completo

Habilidades relacionadas

Figma Design Design de UI/UX Prototipagem
Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Trailer do curso: Neste curso da figma, você aprenderá tudo sobre os recursos de prototipagem do figma e como aproveitá-los para criar um protótipo real do zero. Você também aprenderá fluxos de trabalho e dicas e recursos avançados de prototipagem no Figma. E eu mesmo sou designer de UI UX há mais de três anos e uso o Figma há muitos anos. E sou apaixonado por ensinar isso a outras pessoas que foram todas automotivadas. E queremos levar suas habilidades de prototipagem e Figma para o próximo nível. E então, na segunda parte, é claro, vamos criar um protótipo do zero, que eu escolhi como um aplicativo móvel da comunidade Figma. Agora vamos começar com uma visão geral básica do que é prototipagem no Figma e como ela funciona. Mas antes de começar a apresentar a prototipagem figma, veremos o processo de design para entender melhor. 2. PROCESSO DE DESIGN: Antes de começarmos com a prototipagem, quero compartilhar com vocês por que a prototipagem é tão importante no processo de experiência do usuário. Então, o que é a experiência do usuário e por que a prototipagem é tão importante? A experiência do usuário é a emoção e a atitude de uma pessoa relação ao uso de um determinado produto, sistema ou serviço. Quando estamos projetando produtos, é muito importante garantir que esses produtos estejam realmente resolvendo um problema para o usuário e sejam úteis para o usuário. Caso contrário, o usuário não o usará. Muito simples, um protótipo. Você pode verificar isso logo no início para ter certeza de que está seguindo o caminho certo. Se olharmos para trás, muitas equipes de design usam o método em cascata. Essa é uma via de mão única, sem muitos comentários e prototipagem incluídos. Então, as equipes de design perceberam, durante a última década, que precisavam ser outra maneira melhor testar as ideias primeiro e perceber logo no início do processo, se as coisas funcionarem no final. Porque com o método em cascata, uma vez que uma aplicação está em fase de teste, é muito difícil voltar atrás e mudar o que já estava na fase de concepção. Portanto, nenhum software funcional é produzido até o final do ciclo de vida. Sua quantidade de risco e incerteza. A abordagem de design centrada no ser humano é muito diferente porque o ser humano está no centro de todo o processo de todo o projeto. E ajuda lidar com o feedback o mais cedo possível pois o usuário está envolvido em cada etapa do processo. Então, o interessante aqui é que essa abordagem visa melhorar toda a experiência durante todo o processo, indo e voltando e voltando. Assim, você inclui a pesquisa do usuário em várias etapas ao longo do seu projeto. Então, é muito importante realmente ouvir o usuário e entender suas necessidades e desejos, e realmente entender o que o ajuda a processar uma tarefa específica ou geral, a entender sua vida diária. Isso ajuda você, no final das contas, a criar algo que o usuário realmente precisa. É um método não linear. Assim, você pode voltar à prototipagem repetidamente. Então, neste curso, vamos nos concentrar na prototipagem , se é o mesmo método para qualquer meio que você use. E nos vemos na próxima parte. 3. Criação de protótipos: Antes de começarmos a construir nosso protótipo com nossa ideia, temos em mente. Vamos falar brevemente sobre os fundamentos da prototipagem. Assim, os protótipos ajudarão você a demonstrar e comunicar suas ideias com outras pessoas. Podem ser seus colegas, partes interessadas ou usuários para testar com usuários e ajuda você a economizar tempo e dinheiro, pois você não precisa criar o produto completo. Mas comece com um protótipo simples e barato. Você pode testá-lo e aprender muito antes de realmente criar o produto. Não se preocupe, se você não for designer, qualquer pessoa pode construir um ótimo protótipo rápido. Portanto, você não precisa de nenhuma habilidade especial para isso. O que é prototipagem rápida? Portanto, a prototipagem rápida é um processo iterativo. Isso significa que é repetitivo. O processo é usado para visualizar a aparência de um site ou aplicativo para obter feedback e validação de usuários, partes interessadas, desenvolvedores e designers. Quando bem usada, prototipagem rápida melhorará a qualidade de seus projetos, aprimorando comunicação entre as várias partes, reduzindo o risco de construir algo que não alguém quer dizer isso assim de forma muito simples. O que você precisa para prototipagem? Um protótipo não foi projetado para ser uma versão totalmente funcional de um sistema, mas serve apenas para ajudar a visualizar a experiência do usuário com o produto final. Portanto, se a qualidade for muito baixa, as pessoas realmente não acreditarão que o protótipo é um produto real. E se a qualidade for muito alta, você trabalhará a noite toda e provavelmente nunca terminará. Portanto, a qualidade não deve ser muito alta, nem muito baixa, mas perfeita. Você pode criar protótipos não apenas de telas, aplicativos ou sites, mas de quase tudo. prototipagem é um excelente método para testar projetos. Seja qual for o design que você esteja projetando, você já pode começar a pensar em quais tipos de telas ou interfaces você precisa integrar ao seu protótipo e realmente testar sua ideia. 4. Demonstração de projeto: Nesta parte do curso, escolheremos um aplicativo móvel da comunidade Figma para aplicar diferentes tipos de prototipagem e animações no Figma. Como você vê agora, um exemplo de aplicativo móvel, Dr. app, que eu escolhi para dar nosso exemplo. Este exemplo inclui os diferentes tipos de protótipo, componentes interativos, exemplos e animação para preparar uma demonstração completa de um aplicativo e se tornar um aplicativo real instalado em um smartphone. Agora vamos começar a testar o protótipo do nosso aplicativo no qual eu já trabalhei ontem. Como primeira etapa, clique aqui para começar a abrir o aplicativo. Próximo. Nós primeiro escolhemos, sim. Você volta para a primeira tela a partir daqui, onde escolher o outro botão aqui para escrever e-mail e senha. Inscreva-se. Nesta etapa, podemos escolher o sexo, feminino ou masculino Próximo, e selecionar a idade. Próximo. Aqui o usuário pode adicionar a imagem de seu perfil, seja por câmera ou galeria. Clique aqui para concluir as etapas de inscrição. É bom. Agora, criamos uma nova conta. E é isso que vamos construí-lo do zero nas próximas partes, é claro, e nos vemos no próximo vídeo. 5. Acrescente um protótipo: Então, agora vamos escolher esse aplicativo da comunidade aqui, certo, aplicativo Dr.. E escolha com esta lista de opções Figma. E agora vamos pesquisar em nosso aplicativo. Sim, isso mesmo. Clique aqui. Obtenha uma cópia para colocar o aplicativo no espaço de trabalho da sua conta. Então é isso. Nosso aplicativo está pronto para adicionar um protótipo e animações a ele. Então, vamos agrupar essas duas telas para movê-las , porque não precisamos, em nosso exemplo, vamos escolher esse aplicativo porque vejo que ele contém diferentes tipos de telas das quais nós pode aplicar várias ferramentas Figma. E agora eu quero preparar o espaço de trabalho, a localização de algumas telas. Eu coloquei isso aqui e isso aqui. Em seguida, terminamos com o resto. E isso aqui, ampliamos aqui. Copie e cole para esta tela. Vamos renomeá-lo criando uma conta. E agora selecione os elementos e exclua-os. Usaremos essa tela para carregar quando o usuário estiver aguardando a criação de sua conta. Depois de mudar esse texto para criar uma conta e movê-lo para o centro da tela, vejo que esse lugar é o melhor para essa frase. Além disso, pela minha experiência , a localização dos indicadores de carregamento está sempre no centro da tela. Aqui mesmo. Reorganize este um pouco para a esquerda. Comece agora a fazer a prototipagem da primeira tela. Clique aqui no protótipo. Selecione a tela e vincule-a à segunda tela para criar essa conexão entre elas. Essa janela que apareceu contém todos os detalhes da interação. Aqui está a natureza da interação escolhida. E aqui está a ação feita pelo usuário que acionará a ação do aplicativo ao tocar, ao arrastar enquanto pressiona. E depois do atraso, quando o escolherá agora e alterará o atraso para 1.500 milissegundos. Então, aqui está o tipo de animação por enquanto, escolhemos o Smart Animate. Esse é o fim da animação. Escolhemos novamente essa animação linear e alteramos esse parâmetro de atraso de animação para 400 milissegundos. Mas você pode escolher a interação nos detalhes da animação que deseja para construir seu primeiro protótipo. Vamos tentar agora essa primeira interação. Como você pode ver, passamos da tela de um para o outro com a interação escolhida. Agora conclua a segunda interação com o mesmo método. Mas para essa interação, escolhemos a animação push e alteramos o atraso para 300 milissegundos. Entre essas duas telas, usamos o mesmo tipo de tradução e mantemos os mesmos parâmetros da tela anterior. Agora, sim, escolhemos a tela de login. Aqui, apenas verificando os detalhes da interação. E, como os outros, mantenha os mesmos parâmetros. N para n 0 inscreva-se. Aqui temos uma conexão da tela de login com este botão para a página inicial. Nesse nível, fazemos as interações entre as etapas de registro da mesma forma. E desse botão para a próxima tela. Em seguida, finalize para todas as telas com o mesmo método. Na minha opinião, que esses parâmetros têm links entre telas é especial para esse tipo de aplicativo. Podemos ver em outros setores de aplicativos que o tipo de animação pode ser alterado para proporcionar outra experiência para o usuário, por exemplo, em aplicativos de jogos, sempre as transições entre as telas são muito mais rápidas. Além disso, alteramos a duração para 3.000 milissegundos e escolhemos o tipo de animação. Animação inteligente. E para essa linear, também para a duração da animação, você deve aumentar o parâmetro para 500 milissegundos retornado. Agora no centro do espaço de trabalho. Vamos mudar para essa interação o tipo de animação para animação inteligente. Linear de 500 milissegundos. Vamos testar agora o resultado dessas interações. Clique aqui para testar. Próximo. Aqui, adicionaremos um botão Voltar. Continue agora com essa opção na tela de inscrição. Inscreva-se e encerre. Essa é a interação de atraso para abrir a tela inicial do aplicativo. Volte para o espaço de trabalho e amplie aqui. Em primeiro lugar, adicionaremos o ícone de retorno às telas. Aqui, a partir do ícone, se eu inserir diretamente neste campo, volte para pesquisar um ícone. Aqui está a lista de ícones que podemos escolher para usar no retorno entre as telas Escolhemos esse ícone, ícone de importação, Ótimo, o ícone foi adicionado com sucesso. Vamos apenas redimensioná-lo e movê-lo. Aqui à esquerda do cabeçalho. Você pode escolher outros tipos de ícone no ícone. Se eu fizer um plug-in, recomendo usar esse plug-in porque ele contém muitos tipos de ícones de acordo com os requisitos do seu aplicativo. Mude a partir daqui sua cor para branco. E com copiar e colar, adicionamos para os outros. Novamente, para isso, adicione o mesmo ícone e encerre as outras telas para que fique funcional e possamos adicionar uma interação. Você deve clicar no ícone e escolher a seleção do quadro. Agora vamos adicionar a interação de retorno para telas que contêm ícones, mantenha as mesmas configurações aqui. E para animação, escolhemos Aumentar a duração para 400 milissegundos e continuamos adicionando uma interação para essa tela. Mas não funcionou corretamente. Adicionaremos a seleção de quadros ao resto das telas. Sempre é necessário ativar essa opção para que os componentes possam ser usados nas interações entre as telas. Passamos agora à ação de tradução e tentamos adicioná-la novamente. Mantenha as mesmas opções e continue nas próximas telas. Não é necessário definir as configurações do link para o restante das interações. Figma mantém automaticamente as mesmas configurações de tela anteriores. Novamente, testaremos o progresso que fizemos . Muito bom Todos os ícones estão voltando ao modo de design e ampliando aqui nesta tela. Copie agora a tela do painel e renomeie o painel sublinhado como uma. E os dois segundos, o painel sublinha dois. Aqui, adicionaremos um pop-up quando clicado na imagem do perfil. Adicione um retângulo clicando na zona moldada. Para personalizar uma camada preta, usaremos uma maneira muito simples criar uma tonalidade preta na tela principal. Portanto, mudamos a cor do retângulo para preto e diminuímos a intensidade da cor dessa forma depois de ajustar o retângulo em toda a tela. Mas esse retângulo para o pop-up, vamos escolher neste lugar aqui à direita, na parte superior, logo acima da imagem do perfil. Aqui, mudamos o raio da forma. Escolheremos uma cor branca, é claro. Agora, adicionando os elementos do pop-up, começando com a foto do perfil. Este link para entrar na tela do perfil. Você também pode personalizar o tamanho da fonte para 25 para ser legível para o usuário. Adicionar o segundo link para entrar nas configurações do perfil. E, finalmente, o botão de sair. Aqui, para o link de desconexão, podemos escolher a cor vermelha para diferenciá-la dos outros botões. Você também pode adicionar um ícone de saída do plug-in. Escolheremos esse ícone para proporcionar uma boa experiência ao usuário. Personalizamos a altura e a largura do ícone para que fique mais legível no pop-up. Mudando novamente a cor para vermelho. Em suas escolhas, você deve sempre levar em consideração qualquer tipo de usuário que usará seu aplicativo e garantir a mesma experiência para todos. Adicionamos o protótipo necessário para esse pop-up. Escolheremos o estilo para mostrar e ocultar o pop-up. Ao clicar na imagem. Para o botão de saída, você deve ativar a seleção de quadros para usá-la na interação do protótipo. Agora, escolhemos os detalhes de interação que são compatíveis com nosso aplicativo. Ótimo, vamos tentar levar nosso protótipo a esse nível. Bom. O pop-up funciona bem. Agora, voltando ao nosso espaço de trabalho para concluir o resto do protótipo. Continue agora, adicione um pop-up para escolher a opção de quem pode alterar sua foto de perfil. Primeiramente, alterei o nome dessa tela para mudar o nome. E copie-a aqui, onde podemos criar nossa imagem de mudança pop-up como um nome para isso. Na tela inicial, adicionaremos um ícone aqui, o que significa que podemos alterar a foto do perfil. Clique com o botão direito aqui. Ícone de plugins do phi. Procure aqui por um ícone de câmera. Agora podemos usar esse ícone, mas todos podem escolher seu próprio ícone. Oh, isso é importante nesta parte. Então, podemos colocá-lo em uma elipse, escolhendo essa parte da elipse de formas. Agora, mova o ícone para o centro do círculo. O ícone ficou oculto. Está abaixo do círculo. Com essa opção, Bring to Front, ela pode se mover para cima. Explicamos exatamente o uso dessa opção no primeiro curso. Começando com o Figma, nós o redimensionamos e movemos assim. Agrupando os dois assim para juntá-los. Agora vamos movê-lo para dentro de uma foto de perfil. Agora, na segunda tela, adicionaremos um pop-up para que o usuário possa escolher a forma de alterar sua foto de perfil, qualquer que seja, escolher uma imagem da galeria ou tirar uma foto com seu smartphone. Primeiro, adicionaremos uma camada preta usando retângulo com baixa transparência da cor preta. Vamos configurar os parâmetros de aparência do retângulo como na tela anterior. E agora adicione um retângulo para o papai. Vamos mudar a cor do pop-up para branco e adicionar dois ícones, um para a galeria e outro para a opção de câmera. Vamos personalizar esses dois ícones aqui. No pop-up. Mudaremos a largura e altura do ícone da câmera para 30 e o mesmo para o outro ícone. Seguindo o feedback do meu projeto anterior, você deve sempre usar os ícones para facilitar que o usuário faça sua escolha rapidamente. Então, adicionaremos as palavras, câmera e a galeria com a mesma fonte para isso. Nós os reagrupamos assim para personalizá-los juntos. Não se esqueça de adicionar o botão Voltar à tela inicial. Vamos agora adicionar a interação entre esses quadros. Mude para o modo de protótipo. Escolha esse ícone e vincule-o à tela abaixo. Para animação, escolhemos instantâneo. E a interação traseira com a primeira tela. Aqui, mudamos um pouco os campos de entrada do campo refeição e senha. Mas primeiro, testaremos nossa última mudança de protótipo. Vamos começar. Livros. A palavra câmera não existe no modo de protótipo. Aqui à esquerda, verificaremos a localização dessa palavra e compararemos com as outras. Como você vê, ele deve ser movido para cá logo abaixo da galeria. Não sei por que ele é colocado aqui, mas sempre cada componente deve estar sob a tela correspondente. E vamos tentar novamente. Ótimo, o pop-up apareceu corretamente. Agora vamos voltar às mudanças neste campo. Primeiro, ajustaremos essa entrada de texto para a largura 300 e para a altura 40. E também alteramos o tamanho da fonte para 14. Com o mesmo método, alteramos o segundo campo de senha. Estamos fazendo essa alteração porque vejo que esses campos são difíceis de ler para o usuário. Depois, adicionaremos ícones para oferecer uma experiência melhor do que a versão inicial. Quero mover o e-mail e a senha para a esquerda para adicionar ícones aqui. Então, a partir do ícone, se eu plug-in, importamos dois ícones, um para a senha e outro para o e-mail. Quero escolher um ícone como pessoa para o campo masculino e uma chave para a senha. Depois de importar os ícones, passaremos para a esquerda do campo, mas devemos personalizá-lo acima de tudo. Agora eu quero mudar a cor para esperar. Ótimo. Agora, a tela ficou melhor. Mesmo assim, você deve ajustar essa senha esquecida. E o subtítulo da tela. Agora, selecionaremos todas as alterações que fizemos para copiar na tela abaixo. Antes de excluirmos isso, coloque os novos campos em seu lugar. Cole aqui e coloque no centro da tela. Ao contrário do outro, nós mudamos isso. Ótimo. Agora terminamos desta tela e nos vemos na próxima parte. 6. Como adicionar animação inteligente: Começamos agora com esta tela para adicionar alguma animação a essa imagem, alterada para o modo de design. Primeiro, fazemos uma cópia para a tela. Nós o copiamos logo abaixo do outro. Sempre que quiser adicionar uma animação em uma tela, você deve duplicar a tela inicial e fazer as alterações na segunda. E então escolhemos a melhor configuração e o tipo de transição entre elas. E mudamos o nome para on-boarding para apontar para. Agora, o que vamos fazer? Deslizamos a imagem levemente para cima, assim, para que a animação em movimento apareça para o usuário quando o mouse passa sobre a imagem. Vamos adicionar agora o link entre essas duas telas. Então, preto, apenas a imagem da primeira tela e vinculado à segunda tela, desta forma. Agora você deve alterar a opção enquanto passa o mouse e alterar o efeito de animação para smart animate. E também podemos alterar o atraso da animação para 500 milissegundos. Não se esqueça de excluir este link. Deixamos apenas os links antigos da tela inicial. Vamos experimentar as mudanças feitas. Como você vê agora, quando você passa o mouse sobre a imagem, a animação começa. Passamos para a outra animação neste botão, comece. Faremos o mesmo que a outra animação. Copie a tela inicial e cole aqui. Altere o nome para on-boarding 2.3. Só para diferenciar as telas. Mudaremos a cor ou aumentaremos a saturação do azul. Assim. Da mesma forma, excluir os links vem da tela inicial. Removemos os links entre as telas para fazer nossa escolha de animação. E adicione uma nova interação entre esse botão e a tela acima. Deixamos os parâmetros como a primeira animação. Mas você deve adicionar o link principal quando clicado, Começar, para passar para a próxima tela. Muito bom. Até mesmo os parâmetros estão configurados corretamente. Basta alterar o tipo de animação para push e reduzir o tempo de animação para 300 milissegundos. Aqui, cada um de vocês pode escolher sua própria configuração para fazer outro tipo de animação. Vamos experimentar agora as alterações feitas no botão. Ótimo. A animação está bem configurada. Quando você passa o mouse sobre o botão. E depois de alguns milissegundos, a cor muda com uma animação suave. Só que notei que é necessário diminuir um pouco o atraso dessa animação. Para esta animação até 300 milissegundos. Tentamos em outra hora. Bom, está melhor agora com as mudanças mais recentes. Então, agora fazemos tudo isso de novo com a segunda tela, a animação do botão e a imagem. Agora é bom que, depois de adicionar as animações necessárias para essa tela, elas são semelhantes às animações da primeira tela. Vamos tentar no modo de protótipo. Aqui, mudamos o tipo de animação em comparação com a outra tela. Opa, eu esqueci de adicionar o link. Quando eu clico no botão. Voltamos aqui no modo de protótipo. Simplesmente o adicionamos como nas outras interações. Deixamos que, por padrão, esteja bem configurado. Apenas uma observação aqui. Sempre as configurações das interações permanecem como a última configuração adicionada. Verificamos agora o resto dos links. E vamos tentar novamente. Bom, todas as interações são parametrizadas. Na próxima etapa, adicionaremos animações diferentes nesses botões. Copie, inscreva-se na tela e cole aqui logo abaixo da tela inicial. E mudou seu nome para se inscrever? Sim. Da mesma forma, passeie outra tela e a mova abaixo dela. Aqui, mudamos o nome para cadastrado. Não. Uma das telas para a animação quando o usuário quer escolher? Sim. E a outra tela para a animação de NO Choice. Como visto na demonstração do protótipo no início do curso, quando o usuário passa o mouse sobre um dos botões sim ou não, a cor muda de azul para branco. Então, para começar, você precisa mudar a cor dos dois botões para azul. Aqui escolhemos a mesma cor dos botões, sim, com esse seletor de cores. Mas a palavra NÃO desapareceu porque ela era da mesma cor, azul. Então você deve mudar a cor dele para branco e ativar este leilão. Traga para a frente. Agora terminamos essa tela. Vamos para o próximo. Para essa tela, adicionamos a animação do botão. Sim. Vou mudar a cor para branco para isso. E adicione esse traçado de opção para personalizar um contorno como o outro botão, muda de cor para azul com a cor do seletor. Novamente, no mesmo caso, você deve mudar a cor da palavra sim. Em segundo lugar, mudamos a cor dos botões NÃO, para azul. E mais uma vez, Bring to Front. Vamos continuar com a segunda tela, mudando a cor dos botões, diferentemente da tela anterior. Mas primeiro vou mudar o tamanho da borda para ficar mais claro. Por exemplo, eu consertei um gratuito. Essa tela está quase pronta, como outro botão, só vou fixar o tamanho da borda em três. Vamos mudar agora para o modo de protótipo para adicionar a animação entre as telas. Em primeiro lugar, removeremos todos os links dessas duas novas telas. E para a tela inicial, começamos com sim, removido daqui. E vincule a tela de login com a tela de inscrição Sim,. Escolhemos esse tipo de animação apenas para dominar as diferentes ferramentas do Figma e ver mais técnicas que podem ajudá-lo em seus próprios projetos. E agora adicionamos o link de animação de interação: sim, com a tela logo abaixo, eu escolho, ao passar o mouse sobre o leilão, acionar a animação e alterar a animação para dissolver. E o mesmo vale para o botão NÃO, desvincule-o da tela de inscrição. Desça até esta tela, onde adicionamos a interação do botão do painel. Permanecemos agora que a conexão entre a tela inicial e a tela abaixo se inscreveu. Não. Bem, terminamos essas duas animações. Vamos tentar agora. Misto. Como você observa aqui, quando você passa o mouse sobre um dos botões, a cor muda. Clique. Sim, direcionamos para a tela de login. E o mesmo para o botão NÃO. Opa, notamos aqui que os campos de e-mail e senha desapareceram assim na tela de login. Voltamos ao nosso espaço de trabalho para corrigir o problema. Altere o modo de design. Sempre escolhemos essa opção, seleção de grupos, para facilitar a movimentação dos componentes sem alterar as medidas entre eles. Primeiro, selecionamos todos os componentes e crescemos com essa opção. Em seguida, colocarei no centro da tela e clicarei em trazer para a frente. E tentamos novamente. É bom agora que os campos tenham aparecido nas duas telas. Então, continuamos adicionando outra animação sobre as opções masculinas e femininas nesta tela. Aqui, adicionamos uma animação simples quando o usuário quer escolher uma de suas opções, o círculo se expande um pouco, como visto na demonstração do protótipo. Como nos outros exemplos, fazemos duas cópias da tela inicial. Aqui, basta mudar o nome das telas para diferenciá-las. Começamos com a opção de correio. Selecione o botão e altere a largura e a altura para 105. Agora vamos adicionar outro tipo de animação que usei em meus projetos pessoais. E, como eu disse, todos podem inventar outros tipos de animações e fantasiá-las como quiserem. Além disso, posso alterar o tamanho da fonte deles e colocá-los no centro do círculo. Bom. Essa tela está pronta. Podemos passar para o próximo. Por isso, faremos o oposto. As mudanças estarão no botão feminino. Da mesma forma, você deve alterar o tamanho do botão e o tamanho da fonte de f. Agora que as telas estão prontas, passamos para o modo de protótipo. Então, na tela inicial, seleciono essa opção e a vinculo à tela abaixo, onde posso escolher enquanto passo o mouse para ver os parâmetros de interação e modo instantâneo da animação. Terminamos com o leilão feminino. Vou vincular da tela inicial à segunda tela, mantendo as mesmas configurações para os detalhes da interação. Vamos experimentar agora essas últimas mudanças. O botão feminino não está funcionando. Volte ao espaço de trabalho para verificar o problema. Eu seleciono o piscar feminino. Você deve mudar aqui enquanto estiver pairando. Opção. Ótimo, volte agora para conferir o protótipo. Agora, o aplicativo está funcionando bem. Aqui, apenas concluiremos as etapas até a tela inicial. Adicionaremos um spinner aqui nesta tela, logo acima da criação da conta. É necessário, na experiência do usuário, adicionar um indicador como o spinner para que o usuário saiba que há um processo em execução no aplicativo. E nos vemos na próxima parte. 7. Como criar um girador: Então, aqui vou adicionar nosso spinner. Vou criar um retângulo para ver nosso spinner também. Eu vou criar um círculo com você. E usaremos a maneira mais simples de preparar nosso spinner. Aqui, vou mudar a cor do retângulo para ler e personalizar o tamanho do círculo de 500 por 500. Então você pode ver aqui que temos esses arcos aqui. Então, podemos vir aqui. Aqui. Vamos fazer com que seja cerca de 65 por cento. E se você puder deixar assim, ou se quiser criar um raio de fronteira aqui, 43 é bom para mim. Então você pode ver que você pode movê-lo e, mais tarde, é o que vamos fazer. Então esse será nosso primeiro encontro com o spinner. Podemos renomeá-lo para a parte superior direita do spinner. Ok, esse será nosso primeiro estado. Agora vamos duplicar outro. Então, o que vamos fazer no próximo estado será girar para baixo. Para isso, queríamos cerca de 90 graus. Aqui vamos mudar o nome do segundo elemento para spinner. Parte inferior direita. Adicionamos os estados esquerdos do girador, apressado ou outro elemento e o separamos assim. Depois de girá-lo para 180 digiro e mudar o nome para girar para a esquerda. E terminamos agora com o último estado aqui e mudamos sua divagação assim. Além disso, mudamos o nome no canto superior esquerdo. Então, vamos criar um corpo com todos esses componentes. Vamos combiná-los como variantes. Essa será a posição. Portanto, é importante que, quando você vai animar algo de forma inteligente, precise dos mesmos nomes. Elipse 111. Vamos começar com este e mudar para o modo de protótipo. Agora, vinculamos isso ao elemento inferior direito aqui nos detalhes da interação, escolhemos a opção após atraso e alteramos a duração para um milissegundo. Deixe isso na parte inferior direita. Mas para o estilo de animação, podemos escolher a animação inteligente e, para isso, escolher a opção de entrada e saída fáceis. Também corrija isso para 200 milissegundos. Da mesma forma que você precisa completar o resto dos elementos. Mantenha as mesmas configurações aqui. Altere isso para após atraso. Mas estou voltando ao último estado porque esqueci alterar a duração para um milissegundo. Concluímos agora a interação do último elemento. Adicionamos esse tipo de animação para que, após cada arco, gire até o final de seu ciclo e, em seguida, a outra arte comece e o mesmo para as outras. Para ter um spinner completo. O girador está pronto, basta ir aqui no lado esquerdo e mudamos para a navegação de ativos. Mas, afinal, você deve mudar a cor dos elementos para preto. Altere o modo de design. Selecione os estados e escolha aqui a cor preta. Volte aos ativos agora e faça um zoom aqui para ver a tela de criação da conta. Arraste o componente desta forma. Mas há um pequeno problema aqui em que você deve diminuir o tamanho de cada componente. Agora terminamos de reduzir o tamanho de todos os componentes. Voltamos agora para a tela. Como você percebe, o tamanho é reduzido e mais consistente com o resto dos elementos da tela, e escolhemos a posição superior correta iniciar a animação. Movemos o componente no centro desta forma. Bom. Vamos experimentar este spinner. Basta escolher essa tela e clicar aqui para começar. Também notamos que o tamanho do spinner é ainda maior do que os elementos na tela. Então, voltamos ao espaço de trabalho e você deve diminuir o tamanho de todos os estados dessa forma. Bom, movemos um spinner para o centro assim. E tente novamente. Aqui, resta apenas alterar a velocidade de movimento de cada componente. Para ter uma animação suave, você deve ajustar o atraso de cada interação entre os arcos. Eu seleciono o primeiro link e altero a duração da animação para 100 milissegundos. E repita o mesmo para o resto dos estados. Acho que essa mudança nos dará um resultado melhor. Agora é bom continuar, mas você pode escolher outros tipos de animação e outros detalhes de interação. Todos à sua escolha podem adaptar o girador e há outro tipo de indicador de carregamento. Todos podem experimentar outro tipo com o mesmo princípio de animação inteligente do spinner, por exemplo, carregando indicadores de progresso linear do comprador. Terminamos o protótipo dessa parte de um aplicativo do Dr. e removemos essas duas telas agora. Agora terminamos nosso projeto a partir do qual usamos várias técnicas de prototipagem e diferentes tipos de animações que podem ajudá-lo em seus próximos projetos. E nos vemos na última parte do curso, onde veremos o resultado final. 8. Visão geral final: Finalmente, mude para o modo de protótipo. E vamos experimentar nosso aplicativo. Clique, comece e continue a abrir nosso aplicativo. Escolha essa opção para passar para a tela de inscrição. Aqui, testando esse ícone de câmera, no qual podemos adicionar as telas correspondentes para essas duas opções, câmera ou galeria. Para esta etapa, o painel é aberto, onde ele pode sair e voltar à tela de login. Agora terminamos e nos vemos no próximo curso.