Masterclass avançado do Figma: sistemas de design, prototipagem e UI responsiva

1. Sejam bem-vindos à masterclass avançada de Figma!: Bem-vindo à master class avançada da Figma. Se você já conhece o Figma e quer levar suas habilidades a um nível verdadeiramente profissional, então este é o curso certo para você Oi. Meu nome é Ahmed e eu serei seu instrutor neste curso Sou designer de UIUX com mais de quatro anos de experiência trabalhando em experiências e produtos digitais do mundo real , como sites e aplicativos em diferentes setores, como o setor de tecnologia, o setor turístico Trabalhou em vários projetos que não exigiam apenas um bom olhar para o design, mas também fluxos de trabalho eficientes, colaboração e sistemas que podem crescer com o tempo E é exatamente isso que vou te ensinar neste curso. Neste curso, vamos além do design básico e nos concentraremos em como designers avançados trabalham em projetos do mundo real. Você aprenderá a criar sistemas de design escaláveis, trabalhar com variáveis e bibliotecas de equipe, bem como criar layouts responsivos que funcionam em diferentes Também aprenda técnicas avançadas de prototipagem, como criar microinterações, animações e gestos suaves Todas essas coisas que darão vida ao seu design. Além disso, exploraremos as ferramentas modernas de design do Figma, como FIG Jam, Figma buzz, Figma slides e muito mais, ajudando você a entender quando usá-las e como usá-las para ajustá-las a um fluxo de trabalho mais profissional Ao final desta aula, você não apenas aprimorará suas habilidades técnicas, mas também aprimorará seu pensamento como designer. Você poderá trabalhar com mais rapidez, eficiência e estrutura. Então, vamos começar. 2. O que torna um designer “avançado” no Figma + Roteiro do curso.: Olá e bem-vindo ao curso avançado Figma. Aqui você aprenderá tudo o que precisa saber para poder criar wireframe e prototipar de forma rápida e profissional, como Agora, é claro, para a antiguidade, você precisa de alguns anos de experiência no trabalho real Mas, por meio deste curso, você poderá aprender e compreender os conceitos mais complexos com os quais lidamos quando estamos projetando no Você aprenderá algumas dicas e truques que somente pessoas alto nível de experiência e conhecimento sobre o Figma conhecem e, em geral, compreenderá as ferramentas difíceis, os mecanismos complexos com os quais o Sem mais delongas, vamos dar uma olhada no que você aprenderá neste curso. Eu reuni todas as informações sobre este curso, uma visão geral, apenas para que você possa entender no que está se metendo. Eu aconselho você a seguir em frente e fazer nosso curso FIGMA, o curso básico do Figma, não o avançado, caso ainda não o tenha Mas se você acha que tem uma boa experiência , já trabalhou com a Figma antes, então este é o curso para você Caso contrário, vá em frente e tente entender os elementos mais básicos primeiro no primeiro curso, onde abordaremos um pouco esses recursos avançados, mas não completamente Mas neste curso, assumirei que você já conhece as habilidades básicas, sabe como criar quadros, como criar tipos de fluxos de usuário e assim por diante. É por isso que, caso você ainda não esteja totalmente pronto, você não se sente totalmente apto como designer, então talvez dê um passo atrás e tente aprender o básico e depois volte aqui Mas se você está dizendo, Ei, você sabe o que? Eu sei disso e acho que posso fazer isso. Eu sei algumas coisas sobre Figma. Eu já usei isso antes. Já desenhei nele antes. Eu estou, você sabe, em um bom nível, quero melhorar, então este é o curso para você. Então, o primeiro capítulo que teremos é sobre sistemas e variáveis de design escaláveis Agora, neste capítulo, falaremos sobre três coisas ou recursos principais do Figma que são muito importantes e alguns desses recursos foram lançados mais recentemente Quando digo recentemente, quero dizer nos últimos quatro anos ou mais. Isso é para muitos designers, muito recente. A primeira coisa sobre a qual falaremos é a arquitetura de componentes, arquitetura de componentes, relacionada à criação de elementos reutilizáveis, que chamamos de componentes que também têm instâncias e variantes diferentes Em seguida, falaremos sobre variáveis e modos, que é um desses recursos mais recentes, eu diria, com os quais você pode criar variáveis, cores, textos e assim por diante que mudam ou podem ser alterados em algum momento. E falaremos sobre bibliotecas de equipe e organização de arquivos, que é uma parte muito importante do trabalho em equipe no Figma Portanto, tem muitas vantagens, e vamos falar sobre elas. Agora, no segundo capítulo, vamos nos concentrar mais no layout avançado e na capacidade de resposta. Agora, caso você não saiba o que é responsividade, é basicamente projetar seus aplicativos ou produtos ou o que quer que sejam para caber em telas diferentes, incluindo telas de PC, telas de tablets e telas de telefones Então, na primeira lição, falaremos sobre um mergulho profundo no layout automático. layouts automáticos são esse recurso incrível que na maioria das vezes, apenas o Figma tem, que permite organizar elementos Falaremos sobre isso mais tarde, mas você provavelmente já tem uma introdução a isso. Em seguida, falaremos sobre restrições e pontos de interrupção e como você pode usá-los para criar um No final, teremos uma construção de seção responsiva do mundo real , que é basicamente um exemplo, um passeio onde mostrarei como você pode transformar um design em um design muito responsivo Agora, no terceiro capítulo, falaremos sobre prototipagem avançada e microinterações Agora, como alguém que não é um novato completo, você provavelmente já teve alguns encontros Você sabe como existem elementos diferentes e como você pode prototipá-los. E o que isso basicamente significa é que você pode ter uma animação ou fazer com que um botão faça alguma coisa. Talvez ele o leve para outra página ou talvez tenha o efeito de passar o mouse As microinterações são exatamente isso, mas em um nível micro, só que menores. Essa será a primeira lição sobre a qual falaremos. Microinterações, vamos começar com o nível básico. Em seguida, falaremos sobre interações de rolagem e gestos Basicamente, como você rola horizontalmente, verticalmente e assim por diante, porque isso também precisa ser configurado No final, falaremos sobre o domínio da animação inteligente animação inteligente é um ótimo recurso que permite criar animações suaves e fáceis sem precisar fazer muito. Para ser honesto, é muito fácil Então, a partir daí, passaremos para o último capítulo. Quais são as ferramentas Figma modernas para designers avançados. Caso você não tenha ouvido falar sobre isso, Figma tem sua parte principal, que é a parte normal do design sobre a qual geralmente falamos e que a maioria dos designers usa, mas eles já introduziram um conjunto de ferramentas disponíveis que você pode usar para outros fins Agora, essas ferramentas não são completamente diferentes da ferramenta de design, mas são um pouco mais focadas. Entre essas ferramentas, falaremos sobre o Figma Jam. O que ajuda você a trabalhar em equipe e debater ideias com sua equipe. Em seguida, Figma buzz para mídias sociais, criando postagens e imagens para suas mídias sociais em qualquer lugar, sem ter que se esforçar muito ou ficar preso a muitas configurações de design Em seguida, os sites Figma, que permitem criar e publicar sites diretamente do Figma, os slides do Figma, o que é bastante Basicamente, permite criar apresentações de slides como o PowerPoint Em seguida, Figma M, que é o AI BiFigma especial que permite criar diferentes soluções, protótipos e telas e até mesmo Por fim, depois de discutir cada uma dessas ferramentas separadamente e fornecer uma visão geral e uma introdução a elas, falaremos sobre quando essas ferramentas nos ajudam de fato e quando elas nos distraem Porque você precisa ter em mente que essas ferramentas são ótimas, mas também são focadas. A ideia geral é ter os mesmos recursos ou as mesmas ferramentas que você normalmente tem quando se trata de design, mas agora eles estão focados em propósitos especiais, como criar slides , o que virá com suas limitações e com sua distração Vamos discutir as melhores práticas minhas recomendações pessoais e minha experiência com essas ferramentas. Não quero demorar muito porque tenho certeza de que você está ansioso para aprender e ávido por conhecimento, então vamos começar Vamos começar a aprender, e vamos começar devagar e depois vamos ganhar um pouco de velocidade, então prepare-se, sente-se e vamos embora Nos vemos no próximo slide. 3. Teoria de UX: Olá e bem-vindo a mais uma aula do curso Figma. E esta lição de hoje é sobre apresentar a você o que é design de experiência do usuário ou, para ser mais específico, o que é UIUX Mas vamos nos concentrar um pouco mais na parte de UX. Então, vamos em frente. Então, primeiro de tudo, vamos ter uma definição rápida do que a experiência do usuário deve se referir. experiência do usuário em geral pode ser definida como a forma como um usuário interage e experimenta um produto, sistema ou serviço, ok? Pode ser qualquer uma dessas coisas. E isso inclui as percepções de utilidade de uma pessoa. Facilidade de uso e eficiência. Agora, se quisermos detalhar isso rapidamente, é basicamente uma questão de interação. Essa é uma grande palavra destacada. É sobre a interação e experiência de um produto, sistema, serviço. E é por isso que eu sempre digo uma espécie de experiência digital. Eu sempre defino essas coisas. Pode ser um site, pode ser um aplicativo, pode ser qualquer coisa, certo? Porque quando você diz físico , pode até ser digital. Quando você diz que um produto que poderia ser qualquer coisa é um produto, certo? Pode ser qualquer tipo de coisa. Pode ser uma caneca, pode ser um site Pode ser, você sabe, um número para o qual você liga e eles te dão algum tipo de serviço, certo? E é por isso que o tipo de encapsulamento de todas essas coisas Pode ser um produto , um sistema ou um serviço, porque existem diferentes categorizações e se trata de entender como os usuários interagem com eles. E diz que também inclui suas percepções de utilidade, facilidade de fusão e eficiência E esses também são temas muito grandes. Eles acham isso útil? Este aplicativo, site ou serviço? É fácil de usar e eficiente? Por exemplo, ele faz o que deveria fazer? Todas essas são questões muito importantes. E agora eu vou dizer, espere um minuto. Qual é a diferença entre a experiência do usuário e a interface do usuário? E eu tenho exatamente essa pergunta, pois também estava aprendendo e entrando no campo. Eu estava me perguntando, continuamos usando essas duas palavras, e elas sempre se juntam? Eles são a mesma coisa? Estamos apenas dizendo lápis ou caneta? Você sabe, eles estão tão próximos que estamos apenas dizendo que eles são equivalentes. Não, não exatamente. Está bem? Então, vamos destacar as diferenças. Portanto, a experiência do usuário tem mais a ver com a sensação. É sobre a sensação de um produto ou uma experiência, como alguém o vivencia. Por outro lado, a interface do usuário tem mais a ver com a aparência. É sobre a aparência das cores, da tipografia, do texto, você sabe, das imagens, certo Embora a experiência do usuário tenha mais a ver com como as imagens fazem você se sentir? Como o texto faz você se sentir? O texto te convence? Isso te tranquiliza ou te deixa louco? Você sabe, então é sobre a experiência, a sensação é que a experiência do usuário também lida com muitas pesquisas de usuários. Trata-se de sentar, conversar com os usuários, ver o que eles pensam e tentar entender seus comportamentos, deixando que isso guie o design subsequente, a interface do usuário. Trata-se de orientar nosso entendimento. Trata-se de obter resultados reais de nossos usuários. Embora a interface do usuário tenha mais a ver com tendências de design. Então, as tendências de design têm a ver com o que está lá fora? O que as pessoas estão fazendo? Quais são os desenhos, formas e cores mais amados? Você sabe, todo ano, uma coisa nova e diferente está surgindo. Às vezes, adoramos gradientes e, em outro ano, gradientes não são legais Você sabe, uma vez, os ícones são incríveis. Outro dia, você sabe, os ícones talvez não sejam tão legais. E é sempre sobre essas coisas mudando, e não precisa mudar drasticamente de chatas para frias ou vice-versa, mas pode ser que as formas tenham cantos arredondados e, às vezes, tenham cantos afiados Há todas essas tendências e se trata de segui-las. experiência do usuário também tem mais a ver com princípios psicológicos. Então, é sobre como os usuários percebem as formas? Você sabe, como eles os entendem? Deve haver alguma explicação psicológica do que está acontecendo em seu cérebro quando eles veem algo e como isso os faz sentir. Por outro lado, a interface do usuário trata de princípios de design. interface do usuário depende de regras que estabelecemos para determinar se o design é bom Mas a experiência do usuário quer entender que, mesmo que esse design seja bom ou ruim, ele funciona? Isso evoca as emoções que queremos evocar? Isso leva à compreensão ou às pessoas a entenderem como usá-lo? É fácil? É agradável e assim por diante A experiência do usuário também está um pouco mais teórica. Isso não significa que não esteja envolvido com prática e com dados reais, com a implementação real. Definitivamente é. Mas, em geral, é mais sobre sentar, fazer algumas pesquisas, conversar com as pessoas , fazer muita papelada, basicamente E não é uma papelada real, mas é mais sobre obter os fatos, certo, e então decidir o que fazer com a interface do usuário é começar, você sabe, escolher as cores, escolher o texto, seguir em frente, fazer um protótipo, fazer um esboço A experiência do usuário envolve muitos testes e iterações. Trata-se de testar, perceber que você está errado ou que há alguns aspectos que você pode melhorar as coisas e depois voltar e alterá-las com base nos resultados interface do usuário envolve muita interatividade e animação Então, destaca isso como o objetivo. Também tem mais a ver com a aparência, como dissemos. Então, trata-se de coisas parecerem vivas, bonitas, envolventes, impressionantes. E esse é um dos focos principais. Essa é uma ótima imagem para resumir a diferença entre a interface do usuário e a experiência do usuário Então, o design é basicamente como esta imagem. Você tem uma rua bonita ou, você sabe, uma estrada, uma passarela, uma trilha de caminhada neste jardim, neste parque, e é planejada muito bem E então, a experiência do usuário é o que as pessoas realmente fazem. Os usuários, as pessoas que caminham até lá, que usam o parque, acham que essa estrada é a mais eficiente. Isso é evidente pelo fato de que a grama não está mais lá porque muitas pessoas passaram por cima dela. E isso mostra que há uma tendência no comportamento do usuário. Eles estão exagerando, e design significa ter uma aparência bonita e ótima e planejá-la de uma maneira bonita, mas não necessariamente de uma forma eficiente ou funcional. E a razão é porque se você quisesse seguir isso, você teria que caminhar até lá, e então você pode ir para a direita. Mas, enquanto isso, isso está usando um atalho. Então, a experiência do usuário consiste entender o que as pessoas realmente fazem? Não se trata apenas de Hey, nós projetamos isso para eles. Não, é sobre se eles realmente o usam? É realmente útil e assim por diante. A experiência do usuário tem a ver com interações. Pense nisso, você sabe, em termos desses airpods ou fones de ouvido inteligentes, faça a si mesmo a pergunta Como pular a música? Como faço para pular uma música? Bem, se você está familiarizado com esses tipos de fones de ouvido, geralmente há um botão ou você precisa tocar neles uma ou duas vezes ou talvez tocar e segurar para pular uma duas vezes ou talvez tocar e segurar para pular Portanto, a experiência do usuário essas pequenas interações que você faz com sua tecnologia para conseguir coisas, porque os fones de ouvido por si só são invenções incríveis, e há muito trabalho sendo dedicado à aparência deles Mas, você sabe, depois de criá-los, uma das coisas que vem à mente primeiro é: como eu pulo uma música Quer dizer, estou com meus fones de ouvido. Meu telefone está na minha calça. Quero pular uma música sem tirar minha opinião, então a experiência do usuário consiste em pensar em todos os tipos de interações que você tem com sua tecnologia, com sua experiência digital, com seu serviço, com seu produto, você quiser chamá-lo, e pensar em como você pode torná-la mais suave, melhor E a segunda coisa, também se trata de expectativas. Então, a experiência do usuário é sobre o que você espera quando vê um produto como esse? E aqui, por exemplo, o que acontece se você tirar um? E, novamente, se você já teve um, sabe que, se tirar um dos fones de ouvido, a música pararia Isso foi muito inteligente porque entendeu que essa é uma necessidade que muitas pessoas têm. Eles tiram uma orelha, alguém fala com eles. Eles querem respondê-las e continuar uma conversa ou algo parecido. Eles querem ouvir o que as outras pessoas estão dizendo ou qualquer coisa do tipo. Então, entender que isso vem de uma necessidade e essa necessidade talvez seja parar com a música. Então, lidando com as expectativas. Então, o usuário, talvez não saiba disso, talvez não esteja entendendo, mas isso é basicamente atender às suas necessidades, mesmo sem saber experiência do usuário tem a ver com as interações que os usuários têm com o produto e tratamento de suas expectativas, garantindo que a tecnologia faça o que deveria fazer E outra coisa são as emoções. Então, como isso faz você se sentir? Meus primeiros fones de ouvido que experimentei eram incrivelmente, você sabe, confortáveis Eu me senti como um rei. Eu senti que finalmente consegui algo que me entendia e eu entendi. E estava de acordo com todas as minhas expectativas. Foi intuitivo de usar. Estava fazendo tudo perfeitamente. E foi simplesmente muito melhor do que qualquer coisa que eu já tive. E isso não é um anúncio, aliás, de nenhum tipo de tecnologia, mas estou apenas dizendo que é sobre emoções E muitas vezes você descobre que , ao criar um produto ou serviço, as pessoas podem ficar frustradas Eles podem ficar bravos. Eles podem ficar tristes. Eles têm uma variedade de emoções porque são humanos. Portanto, a experiência do usuário consiste gerenciar essas emoções e garantir que você tenha o máximo possível tantas emoções positivas e poucas negativas. Então esse é o trabalho de um produto. Trata-se de fazer você sentir que suas necessidades estão sendo atendidas e que o produto é incrível, ótimo e incrível. Portanto, esse é um bom resumo do que é a experiência do usuário. E agora, continuando, vamos falar sobre por que você projeta. Portanto, há duas partes principais. Há um problema e há uma solução, certo? No mundo, no mundo inteiro, em qualquer negócio que você queira fazer, geralmente há um problema e uma solução. O problema, aqui está como eu poderia descrevê-lo. Um produto existe porque há uma necessidade ou um problema no mundo. Pense em qualquer produto que você tenha. Há um problema ou uma necessidade. Você precisa realizar algo e precisa de algo para isso. Você sabe, você tem um carro porque quer atravessar distâncias muito longas com ele, porque talvez você tivesse um cavalo antes, mas um carro é mais rápido. Você tinha uma bicicleta antes, sabe, mais barata, mas um carro é mais rápido. Portanto, está resolvendo um problema e a necessidade de chegar a lugares em horários muito convenientes sempre que quiser, sem precisar esperar por um trem ou ônibus. Você pode ir quando quiser, quiser, na hora que quiser. E então estava resolvendo uma necessidade ou um problema. E, como você pode ver, a segunda parte, produto de solução, resolve problemas. É aí que estão seus verdadeiros valores. Então, entender isso permite que você entenda seu papel como designer. Você está resolvendo os problemas das pessoas. Você não está apenas, você sabe, dando algo de bom para ter. Você não está dizendo: Ei, veja este aplicativo legal. Muitas pessoas baixam aplicativos porque são legais e porque acrescentam algo às suas vidas. Mas muitas vezes, você sabe, os aplicativos de maior sucesso são aqueles que você precisa, aplicativos que resolvem um problema que você tem, certo? Pense sobre isso. Você pode dizer: Ei, mídia social, você sabe, eu estou nas mídias sociais. Estou no Instagram. Estou no Facebook. Não está resolvendo um problema. Eu não tenho nenhum problema. Bem, sim. Quero dizer, há um problema. Existe uma necessidade. A necessidade é se conectar com as pessoas, conversar com elas, sentir-se conectado a elas, vê-las. E como todo mundo já usa esses aplicativos, você sentiria que está perdendo se não estiver usando eles. Então, de certa forma, está resolvendo um problema. E como você pode ver à direita, esta é a capa de um livro chamado The Design of Everyday Things. E foi escrito por Don Norman, pessoa que era vista em geral como, você sabe, uma espécie de antepassado do design de UX em todo o campo E é porque ele escreveu este livro que detalhou de várias maneiras os princípios e diretrizes do design de UX. E esse foi um livro muito esclarecedor. Eu recomendaria que você o lesse se quiser saber mais sobre ele. É um clássico. Não vai te dar dicas sobre Figma nem nada porque é muito antigo, mas vai fazer você entender o que é design de UX, do que se trata e, você sabe, como você pode usar os princípios básicos E você notará que, embora o livro seja muito antigo , ele lida com as mesmas necessidades e problemas que temos hoje. Neste livro, ele discutiu um conceito muito interessante , chamado portas normandas E nesse conceito, que é muito esclarecedor, ele falou sobre quantas portas no mundo, você provavelmente percebe o você provavelmente percebe o São bastante confusos. E isso é o que ele chama de porta ruim. Se você olhar essa foto aqui, verá duas portas diferentes. E a questão é: qual porta eu empurro? E qual porta eu puxo, ok? E eu vou te dar alguns segundos para pensar sobre isso. Feito. É tempo suficiente para você. Basicamente, a esquerda é que você puxa, e a direita é a porta que você empurra. E você pode me perguntar, como você sabia? E a resposta é muito simples porque ela é mostrada pelas alças, certo? É aí que está a chave. À esquerda, você tem uma alça que facilita segurá-la, colocá-la em volta dela e puxá-la em sua direção, o que é bastante fácil para puxar Enquanto estiver à direita, você meio que não tem uma alça e não consegue segurá-la dessa forma. Não é fácil de puxar, mas é muito fácil de empurrar, certo? Portanto, trata-se de design intuitivo. E isso é o que Don Norman notou: no mundo, ele e muitas outras pessoas tendem a confundir portas Eles vão até uma porta que deveria ser empurrada e a puxam ou vice-versa, ela deveria ser puxada e eles a empurram. E eles acham que são idiotas. Eles acham que estão fazendo algo errado ou que estão sempre confundindo essas portas, e a culpa é deles E ele observou que, não, não é sua culpa. A culpa é do designer. Quem quer que tenha desenvolvido, construído e planejado essa porta do jeito que está, é a pessoa que errou por causa de todas as coisas, uma porta deveria ser a Você sabe, nós descobrimos isso há muito, muito tempo atrás. Já devíamos ter descoberto isso. Não deveria ser tão difícil. Mas você percebe que não, ainda é difícil. Você não sabe quando chega a uma porta, não sabe se a empurra, puxa ou se ela se abre sozinha. Às vezes há indícios, mas muitas vezes você não tem certeza e precisa ir em frente, puxar, empurrar, tentar ver. E às vezes você não sabe, isso precisa de força, menos força? Está trancado? Não está trancado? Então ele discutiu isso e, por meio dessa história, por meio desse exemplo, ele falou sobre como o bom design se mostra. Um bom design é fácil de entender, é fácil de explicar. Não precisa de uma explicação, na verdade. É autoexplicativo. Assim como essas portas, quando projetamos boas portas, somos capazes de deixar a maçaneta tão clara que as pessoas entendam quando ela é empurrada e quando é puxada. E isso é exatamente a mesma coisa que temos quando se trata de design. Isso nos leva a um segundo ponto que é o design centrado no ser humano E é uma abordagem para resolução de problemas comumente usada em estruturas de engenharia e gerenciamento de design de produtos, serviços e sistemas de processo e gerenciamento de design de produtos, serviços e sistemas que desenvolvem soluções para problemas envolvendo a perspectiva humana em todas as etapas do processo de solução de problemas São muitas palavras, eu sei, eu sei. Vamos detalhar isso. O que é design centrado no ser humano? É centrado nas pessoas. Ele foi projetado para pessoas, para humanos. E, você sabe, aqui está fabricando produtos para robôs. Não estamos fazendo isso para robôs estranhos que entendem código. Estamos fazendo isso para humanos. Portanto, facilite o entendimento para os humanos que são seus usuários. Então, tenha empatia O segundo ponto é resolver o problema certo. Muitas pessoas tendem a pensar nas coisas erradas quando estão construindo . Não, torne as coisas mais fáceis para seus usuários. Concentre-se no que eles estão tentando resolver em seus problemas e necessidades. E aí vai o ditado: Se não está quebrado, não conserte, certo? Não conserte algo que não precise ser consertado. Concentre-se nos problemas reais e resolva-os. Então, no final, temos que iterar. Human Center Design afirma que o processo de design é iterativo, o que significa que é um ciclo contínuo de projetar e redesenhar, pensar e repensar, construir e reconstruir O Human Center Design afirma que o processo de design é iterativo, o que significa que é um ciclo contínuo de projetar e redesenhar, pensar e repensar, construir e reconstruir. Isso nunca está acabando. Nunca existe um produto perfeito, e são sempre produtos ou serviços que eles sempre precisam ser reformulados, aprimorados e assim por diante Esse é um dos pilares. Então, deixe-me dar alguns exemplos do que torna um bom design de UX e o que torna um design de UX ruim. Por isso, vamos ignorar a parte da interface do usuário por enquanto. Vamos ignorar a aparência, mesmo que ambas pareçam muito parecidas. Agora, qual deles você prefere? Frasco de ketchup à esquerda ou à direita. Espero que a maioria das pessoas tenha dito da maneira certa, porque essa é a resposta certa. E a razão é porque, se você não sabe, a esquerda é bem difícil de manusear, pelo formato da garrafa e não só isso, mas pelo material da garrafa, pelo fato de ser vidro, que não pode ser espremido que não pode ser espremido E o fato de a tampa da garrafa estar de cima torna muito difícil colocar o ketchup porque você tem que abrir a garrafa, virá-la e começar agressivamente, você sabe, sacudi-la para que tenha um pouco de ketchup e, na maioria das vezes, isso leva ao caos Isso é muito confuso. Mas o da direita, autoexplicativo. É feito de plástico, para que você possa apertá-lo, e está sempre inclinado Portanto, sempre deve ser inclinado para baixo na tampa. E dessa forma, a gravidade puxa o ketchup sempre para baixo. E então temos esses painéis de carros. Novamente, qual deles você prefere ou qual você acha que tem melhor design de UX, o da esquerda ou o da direita, e por quê? Ok, deixe-me te responder. É o da esquerda. Deixe-me dizer o porquê. Não estou dizendo isso só porque é meu favorito ou algo parecido. Mas se você pensar bem, os painéis que costumávamos ter ou que ainda temos, mas com carros mais antigos, são bastante simplistas Quero dizer, não muito. Eles podem parecer opressores. Por exemplo, há muitos botões e muitas formas e ícones. Mas, como você pode ver, em primeiro lugar, eles são mostrados com números ou ícones simples que são supostamente fáceis de entender Talvez você precise de um dia para tentar entender todas elas. Você os testará, pressionará e entenderá o que eles fazem. Mas existem botões que estão lá. Eles têm uma função específica. Algumas coisas você vira para a direita, algumas coisas você vira para a esquerda, algumas coisas que você empurra, algumas coisas você puxa. Há todas essas interações diferentes, certo? Quando você está dirigindo e quer trocar alguma coisa, você quer pressionar alguma coisa. Você sabe que quando se trata de ar condicionado, preciso alterar a temperatura girando a balança girando balança girando o botão para a direita ou para a esquerda, certo? Então você saberia que esse não é para temperatura. Você não o misturaria com botão de reprodução de rádio porque é um botão que você pressiona. Portanto, a forma como o painel foi feito foi ideal para pessoas que estão dirigindo, que estão focadas na missão, na atividade de dirigir e não têm tempo para olhar para o painel. Enquanto isso, carros mais novos, como o da direita, têm um tamanho incrível É legal. É bom. Mas é muito perturbador. Isso te distrai da estrada. E o que é mais irritante é que ele tem tantos aplicativos, tantos recursos, o que faz com que você, você sabe, tenha que analisar todas as opções Não há botões que sejam familiares. Você não sabe onde estão os botões. Você não sabe como eles se sentem. Você sabe, você não pode simplesmente colocar sua mão lá sem procurar saber exatamente o que está pressionando. Você tem que olhar para a tela e sair do aplicativo, ir para outro aplicativo, você sabe, conectá-lo ao Bluetooth, para conectá-lo ao seu telefone. E todas essas coisas levam tempo, chamam atenção e colocam você em perigo. É por isso que é um design de UX ruim. Agora, muito rapidamente, vamos comparar os da direita e da esquerda. Quais desses são dois blogs ou revistas diferentes ou artigos de notícias, sistemas de notícias O da esquerda é mais velho, obviamente. Mas o que você pode ver é que o da esquerda é muito mais difícil de ler e há muitos motivos para isso. Mas ele contém um layout que tem muitas fotos, tamanhos e imagens diferentes, e elas são muito difíceis de diferenciar. Você não sabe o que é um anúncio, o que é um artigo de notícias, o que é título, o que é você não sabe nada porque eles têm, você sabe, todos eles têm o mesmo tipo de títulos, as mesmas cores , e é bastante confuso e está cheio de muitas informações Quero dizer, quantos artigos você vê lá? 14, pelo menos, 15, 16, algo assim. Mas olhando para a direita, você vê algo muito mais organizado. Em primeiro lugar, você tem todas as suas diferentes categorias, EUA, mundo, negócios, arte, estilo de vida. Então você pode escolher entre eles. Este é o seu cardápio, eu acho. E então você tem um grande artigo destacado no meio, um pouco à esquerda. E então você tem 28 receitas de Ação de Graças à direita. Você tem outro artigo escrito. Mas você pode dizer pelas cores, pelas formas, pelo texto em negrito o que é um título? O que não é um título? E você pode ver, por exemplo, que dizem viver em vermelho, e diz 32 minutos atrás. Então, é muito autoexplicativo. Você entende, ok, isso é ao vivo. Isso foi há 32 minutos. Não é muito caótico. Há algum espaço em branco vazio. Então, claramente, a opção certa é vencedora por vários motivos, mas basicamente é capaz de fornecer uma experiência de usuário muito mais confortável para os olhos entendam onde clicar, no que clicar. Você sabe, e o da esquerda, parece que tudo são anúncios, para ser honesto Parece que não são links reais. Parece que eles querem que eu clique em algo. Até mesmo o fato de serem fotos de banco de imagens, metade delas. Isso é um anúncio. Isso é falso. Isso não é realmente selvagem. O da direita é capaz de, de alguma forma, com todos os diferentes elementos de design dar a você uma sensação melhor, não a melhor, mas um pouco melhor. Agora, chegando ao design UIUX, deixe-me apresentar um pouco pensamento de design de processo, que é o processo de criação de produtos digitais por meio do design UIUX Envolve cinco etapas principais. Algumas pessoas o definem com outras etapas ou nomes diferentes. Existem diferentes tipos de escolas de pensamento. Mas vamos usar essas etapas. O primeiro passo é ter empatia. primeiro passo é entender quem são seus usuários, ter empatia por eles e seguir em frente e, você sabe, tentar entender de onde eles vêm, quais são seus problemas, quais são suas necessidades e assim por diante A segunda etapa é definir. Então, trata-se de definir o problema que você está tentando resolver, definir as soluções, definir as suposições que você tem Você sabe, o que pode ajudá-los? Do que eles precisam? Por que eles têm um problema? Qual é a fonte disso, qual é a solução e assim por diante? E se trata de definir a direção em que você seguirá como empresa ou designer. Que tipo de solução você está fornecendo para eles? Certo? Qual é o seu modelo de negócios? Na maioria das vezes, isso não depende só de você. Você sabe, você está em uma empresa. Eles já têm um modelo de negócios. Eles já têm uma estratégia. Sua parte é entender a melhor forma de resolver os problemas do usuário. Depois de definirmos melhor a direção, prosseguimos com a idealização. É quando trocamos ideias, fazemos um brainstorming, tentamos entender quais são nossas opções Quero dizer, o que podemos fazer? E você vai em frente e apresenta algumas ideias. Então, na parte anterior, quando eu disse, forneça uma solução, você não está dizendo que vamos fazer um, dois, três, quatro. Você está apenas dando uma orientação geral. Talvez devêssemos criar um aplicativo para, você sabe, ajudar as pessoas a pagar impostos. Mas você não sabe como. Você não sabe como o aplicativo funcionaria. Você não sabe qual é o escopo disso. Você não sabe, será um aplicativo, um dispositivo ou um serviço? Talvez seja um serviço. Você liga para alguém e entra em contato com essa pessoa. Então é sobre isso, e então você morre. É quando você realmente coloca algumas ideias sólidas sobre o que deseja fazer. E então você segue em frente e passa para o estágio de wireframing e prototipagem E é aí que seus pensamentos são colocados no papel ou na tela, e você desenha como deveria ser quando você realmente desenha. Como deve ser a experiência do aplicativo ou, se for um serviço, como o serviço deve funcionar? Como devemos nos posicionar em termos de marketing, em termos de qualquer coisa. Mas, novamente, todas essas ideias, nada está finalizado. Nada está sendo feito para sempre. É por meio desse processo que você obtém uma visão mais final, você sabe, conversando com seus colegas, colaborando com eles, mostrando isso às partes interessadas, às pessoas que investem Podem ser seus chefes, podem ser seus investidores, seus clientes, quem quer que seja, há pessoas que têm interesse nisso Então, você tem que, por meio deles , por meio de seus colegas e de seu trabalho, chegar a uma versão mais final. No começo, é só um esboço. E então, quando você recebe mais confirmações, você começa a finalizar um pouco mais Torna-se um design de site adequado, e é mais ou menos disso que trata este curso. É mais sobre essa parte, a prototipagem. Agora, é claro, vamos falar sobre todas as outras partes. Prototipagem e enquadramento de fios, esses são nossos E você está estudando um curso Figma, não um curso de design UIUX E então aqui, temos os testes. Agora, testando. Para ser sincero, nem todo mundo faz isso, mas testar é seguir em frente, mostrar seus aplicativos para usuários reais e ver o que eles pensam, recebendo feedback. E quando você terminar a etapa, é aí que você pode iterar, ok? É aí que você pode iterar, reiterar e assim por diante, voltando a ter empatia Encontre seus objetivos, redefina-os, crie ideias, crie mais ideias, mais recursos, mais histórias, mais seções, seja o que for E depois prototipando repetidamente, corrigindo problemas, corrigindo bugs Sabe, você não vai fazer um trabalho perfeito. Sempre haverá coisas para contornar. Portanto, sempre tenha isso em mente. Em geral, esse é o processo de criar com design thinking. É assim que, como designer de UIOX, você pode ir do zero, da empatia ao ponto de testar, criar protótipos Isso pode parecer muito diferente dependendo da equipe em que você está, mas é mais ou menos assim que deveria ser. Espero que você tenha aprendido uma coisa ou duas sobre o que é o design de UI UX. Agora, nas próximas aulas, falaremos um pouco mais sobre interface do usuário e, mais importante, falaremos muito mais sobre aulas práticas, aulas práticas, projetos da vida real sobre o que é Figma e como usá-lo Quais são as ferramentas, quais são os sistemas, os recursos e assim por diante. Então, muito obrigado por ouvir, e nos vemos nas próximas aulas. 4. Arquitetura de componentes: Olá, bem-vindo a outra aula do curso avançado Figma Agora, nesta lição, discutiremos tudo sobre componentes. Agora, se você ainda não aprendeu sobre isso, vou explicar de forma muito fácil e simples: os componentes são elementos de design que criamos no Figma e que podemos usar repetidamente E basicamente temos uma relação entre um componente pai e um componente filho. É basicamente um elemento que podemos copiar e colocar em várias instâncias. Mas sempre há a versão original. E uma vez que você altera a versão original, ela pode mudar todas as outras instâncias. Isso significa que se você tiver um botão e decidir mais tarde torná-lo amarelo em vez de verde, basta fazer isso uma vez. Você não precisa alterar o botão em todas as páginas. Isso é apenas um exemplo e você entenderá isso melhor à medida que prosseguirmos. Por falar em botões, vamos usar isso como exemplo por enquanto. Vamos criar um botão muito rapidamente. Vou pegar a ferramenta de texto clicar uma vez e escrever no botão. Agora temos um elemento de texto. Vou transformá-lo em um quadro, então vou segurar Shift e A. Isso basicamente o torna um quadro com um layout automático. Portanto, ele já tem alguns valores inseridos. Podemos alterar esses valores acordo com nossas próprias preferências. Vamos dar uma olhada. Eu vou enchê-lo. Vou fazer com que seja um pouco azul. Também pode ser roxo? Não há problema com isso. Só precisa ter certeza de que o texto está legível, que você pode ler o texto se for branco ou preto, você decide Agora podemos mexer com alguns dos valores no começo Podemos aumentar um pouco o acolchoamento à direita e à esquerda e depois torná-lo de cima para baixo um pouco mais apertado, Então, também podemos torná-lo um pouco mais redondo. Dez ou oito. Depende realmente de nós. Isso agora é um botão. Mas geralmente, quando se trata de design, gostaríamos de ter, como eu disse, um componente. Então, uma versão original que podemos controlar ou por meio de todas as outras versões. Aqui temos o chamado quadro um. Você vai até aqui e clica em Criar componente. Agora, isso é supostamente um componente e é chamado de quadro Vamos chamá-lo apenas de botão. E agora que temos esse botão, é ótimo. É legal, mas como fica esse botão com efeito Haver ou como fica com uma flecha, com um emoji com muitas coisas Precisamos de diferentes variações desse botão. A maneira de fazer isso é criar uma variante. Clicamos aqui e chegamos a esse botão aqui. Diz adicionar variante. Ao clicar nela, você adiciona outra variante, basicamente outra versão ou uma variação dela. Isso está no roteiro original. Esses são os originais, uma vez que você pega esse botão, quero dizer, essa versão dele, copie, controle C, e então você cola Agora, esse é um componente secundário. Você provavelmente já sabe disso se estiver familiarizado com o Figma Você pode ver que este é um quadrado vazio aqui. Isso significa que esse é basicamente o componente filho. Então aqui temos o componente principal. Como você pode ver aqui, quando mudamos a cor, a cor também vai mudar aqui. Mas essa é uma segunda variância, então isso não está conectado a ela Isso é diferente. Então, é basicamente assim que funciona. Assim, você pode ter o botão original e isso afeta todas as outras variações. Você pode ter várias cópias e todas elas serão alteradas. Está bem? Então, agora que escrevemos isso, entendemos isso. Vamos continuar fazendo nosso trabalho. Então, gostaríamos de criar aqui uma variante diferente. Não vou entrar em detalhes sobre a prototipagem, então vou deixar isso de lado por enquanto Mas geralmente quando temos um efeito de foco, geralmente é um pouco mais escuro facilitar, você pode adicionar uma cor preta de 20% ou 30% ou torná-la mais clara. Isso também é uma possibilidade. Como alternativa, você também pode simplesmente alterar a cor a partir daqui. Às vezes, você pode mais de acordo com sua preferência esses botões , porque é mais fácil escolher a tonalidade exata que você deseja Talvez eu pudesse fazer isso, talvez eu pudesse até mesmo torná-lo mais azul. Pode ficar um pouco mais azul. Isso depende totalmente de mim. Agora que fiz essa variação ao passar o mouse, também posso criar uma variante de variação onde a pressionamos Nós não apenas passamos o mouse, mas clicamos nele. Você pode criar outra variante ou simplesmente clicar no sinal de mais aqui, e então poderíamos torná-la ainda mais escura Como você pode ver, essa é uma versão muito simplista. Poderíamos adicionar sombras, poderíamos adicionar bordas. Depende totalmente de você como você deseja estilizar isso. Mas estou apenas criando variantes diferentes , mas mantendo-as simples para sua compreensão. Outra variante que poderíamos criar é o botão ativo. Então, isso é bastante comum. Então, basicamente, isso quer dizer que esse botão não está funcionando. Portanto, se você estiver lidando com o modo claro, basicamente manteria esse cinza, apenas para mostrar que não está funcionando. Então, só para mostrar como seria. Vou copiar tudo isso, copiá-los e colá-los aqui. Então é basicamente assim que ficaria, e você pode ver que o cinza parece cinza que parece inativo enquanto este está cheio cores e, em seguida, este é sobre o mouse e este é pressionado Assim, você pode ver os significados por meio das cores. E aqui, a legibilidade talvez não seja tão importante, porque você não pode escolher esse botão de qualquer maneira Mas podemos seguir em frente e fazer disso, por exemplo, você sabe, um cinza mais escuro Portanto, ele tem uma legibilidade um pouco melhor e também podemos deixar o fundo um pouco mais claro. Sim, isso parece mais inativo. Agora, apenas como uma nota, você pode alterar o componente filho, para poder dizer: Sabe de uma coisa? Vou fazer disso um amarelo, ok? E o que acontece quando você faz isso, quando você altera o componente pai, isso não vai mudar nada. Então, basicamente, você sobrescreveu essa propriedade. Você decidiu que essa propriedade, a cor, agora será desconectada do componente principal E agora é como um filho legítimo. Não vai seguir nem continuar seguindo os pais, vai seguir seu próprio caminho. Então, quando se trata do texto, ele ainda vai segui-lo. Quando se trata do preenchimento, podemos alterar o preenchimento, ele ainda o segue É apenas a qualidade que você muda. Portanto, tenha cuidado. Certifique-se de que você não está mudando as qualidades sem saber. Tente alterá-los aqui porque, como eu disse, esse deve ser o texto original, o trabalho original, e então isso deve seguir. Caso contrário, você terá várias variações com cores diferentes e isso vai bagunçar as coisas Os componentes geralmente são usados para manter a ordem. Eles são usados para que você possa acompanhar o que está fazendo. Você não quer ter 1 milhão de cores do botão. Não, você quer ter os originais e seguida, eles são usados em todo o seu design de maneiras diferentes Acho que até agora está claro, mas temos que entender, ok, temos todas essas versões. Agora precisamos entender o que fazer se quisermos expandi-las. Normalmente, você tem um botão principal e, a partir do botão principal, talvez tenha uma cor diferente. Vamos seguir em frente e fazer isso. Vou copiar tudo isso, copiar e colar. Estou colando-os nesta área. Isso significa que eles também são variantes. Você pode ver a variante cinco, seis, sete, oito. Agora vou mudar a cor. Eu vou dizer, Você sabe o que? Um pouco de amarelo é legal. Mas se usarmos amarelo , teremos que usar preto para o botão. Bom. Vamos ver como fica aqui e não parece muito ruim. Agora, isso deve seguir o exemplo. Eu vou escolher esse amarelo. Eu vou fazer isso e talvez levar um pouco para o laranja. Esse é o sombreamento. Como eu disse, depende de você. Você pode torná-lo mais leve, você pode fazê-lo. Você pode fazer o que quiser , depende de você e eu vou fazer isso preto. Talvez você possa mudar, tornar isso muito mais claro e depois tornar isso também mais claro Então, aqui, vou escolher a mesma cor para torná-la ainda mais escura, mais laranja Como eu disse, nosso trabalho aqui nesta lição de hoje não é ver a interação, estamos apenas descobrindo o componente Então aqui, talvez também possa ser classificado da mesma forma. Não precisa ser tão especial. Não precisamos diferenciar entre esses dois. Depende de nós. Mas agora temos um problema porque isso é chamado de variante oito, isso é chamado de variante sete, seis, eu não sei, eles estão em todo lugar. Precisamos encontrar um sistema para basicamente nomeá-los. Entenda-os. Então, é quando se trata de organizar seu componente, porque à medida que você continua expandindo, você tem diferentes variantes e outros enfeites e precisa acompanhá-las. Aqui está o que eu vou fazer. Eu vou dizer que esses são os botões primários e esses são os secundários. O que você vai fazer é escolher tudo isso, escrever para a propriedade um, secundária. E então a propriedade, você vai dizer tipo. Esse é o tipo de botão. Esses são secundários. Isso mostrará que as propriedades e os valores dessas variantes são conflitantes. Altere os valores aplicados nessa variante para resolver isso. O problema é que tudo isso secundário, secundário, secundário. Figma não entende isso dizendo: Ei, você não pode deixar que todos sejam secundários, mas vamos resolver isso em um segundo Agora vamos chamar tudo isso de primário. Primária. Você vê que esse tipo de variável é primária e todas elas são secundárias. Mas também há uma diferença. Quero dizer, esses são os estados Hover, e esses são os estados pressionados, e esses são os estados inativos, e esses são os estados ativos Então, como podemos diferenciá-los? Bem, podemos fazer isso da seguinte maneira. Então, o que podemos fazer é vir aqui. Quero dizer, é assim que eu faço. Provavelmente existem maneiras diferentes de fazer isso. Eu posso ir até o nome. Vou adicionar uma vírgula e escreverei o status Ativo. E então isso vai ficar ativo. Então eu vou escolher os dois e escrever, novamente, ativo. Vou escolher esses e vou escrever para Hubbard, estes e escrever para imprensa, e esses, vou chamá-los de inativos. OK. Então, agora essa notificação desaparece porque a FIMA descobriu, temos isso sob controle, entendemos a diferenciação e você pode ver que os nomes estão todos Nenhum dos nomes está sendo repetido, certo? E o legal é que quando você vem aqui para o componente infantil, você pode ir em frente e alterá-lo. Você pode alterar o que quiser, seja ativo, passar o mouse, pressionado ou inativo Você tem acesso a todas essas variações e pode escolhê-las no menu suspenso. Certo? Então, é assim que você pode organizar basicamente seus componentes dentro de uma variante. Então, é basicamente assim que você pode organizar sua variância dentro de um componente Agora, há mais do que isso. Como mencionei, talvez alguém venha e diga: Ei, eu quero adicionar, você sabe, uma flecha. Isso seria muito bom, mas não o tempo todo. Às vezes eu quero ter uma flecha. Às vezes eu não quero ter uma flecha, certo? Às vezes, você sabe, as setas à direita, às vezes à esquerda. Vamos ver. Está bem? Então, primeiro de tudo, vamos criar uma seta muito simplista Então, acabei de escolher a ferramenta de linha aqui, vou estender a linha e posso vir aqui e dizer seta de linha e, do outro lado, vou contornar. Portanto, é muito simplista e se encaixa perfeitamente. Vou cortar esse Controle X e vou adicionar isso aqui. Muito bom, certo? Bem, vamos desfazer isso Eu quero fazer isso com todos esses. O que vou fazer é escolher todos eles e controlar a pasta. Agora está colado por toda parte. Mas está um pouco bagunçado. Precisamos descobrir isso. Precisamos organizá-lo. Vou apenas afastá-las e escolher essa flecha e essa e essa e essa. Eu vou fazê-los, na verdade, não esse. Vou escolher esse, esse, esse, vou deixá-los brancos só para combinar. Agora, esses, eu vou dar a eles a cor desse cinza escuro. Lá vamos nós. Tudo bem. Agora também podemos ajustar outras coisas. Quero dizer, a distância entre eles poderia ser um pouco menor, talvez quatro, e acho que isso é bom o suficiente. Mas, como mencionamos, não queremos que isso aconteça o tempo todo. Não queremos que sempre tenha aquela coisinha. O que podemos fazer sobre isso? Não queremos que sempre tenha uma flecha. Aqui está um pequeno truque bacana. Escolha a seta. Clicamos na seta agora E então o que podemos fazer sobre isso é clicar nesse pequeno botão, que diz, aplicar a propriedade da variável e, em seguida, clicar no sinal de adição e adicionar uma propriedade chamada Mostrar linha dois. Eu só vou fazer com que mostre um erro. No momento, está definido como verdadeiro, mas vou continuar e torná-lo falso. Eu vou criar a propriedade. Como você pode ver, agora o que aconteceu é que não há flecha. Não há nenhuma seta disponível aqui, mas ela ainda está dentro do elemento. É só que você precisa alternar se deseja que ele seja exibido ou Eu vou te mostrar onde está. Está aqui mesmo. Agora temos um botão chamado mostrar seta. Quando clicamos nele, ele está lá. Quando o removemos, ele não está lá. Mas temos um problema porque ele está disponível apenas nessa variante, não nas outras. Então, o que podemos fazer sobre isso é vir aqui, escolher isso e depois adicionar a variável aqui e você pode ver se ela já está nas propriedades. Você pode simplesmente clicar nele aqui. Vou enxaguar e repetir. Vou escolher todas as flechas aqui. E eu vou dar a eles a mesma propriedade. Clique aqui, mostre a seta, falsa. Agora, todos eles têm esse botão. Você pode adicionar uma seta a eles, se quiser, ou removê-la. Agora estamos realmente personalizando nossos botões em uma direção que eu realmente gosto Podemos dar um passo adiante. O que podemos fazer? Bem, podemos copiá-los, colá-los todos, colocá-los aqui. Mas o que vamos fazer é criar botões fantasmas. Os botões fantasmas são basicamente botões que têm apenas bordas. Vamos copiar esse código hexadecimal dessa cor, removê-lo, e aqui, um traço, enxágue e repita basta fazer a mesma coisa as outras variações ou você decide Você pode ajustá-lo como quiser. Como esse é o mouse, pode ser que seja um botão fantasma e, quando você passa o mouse sobre ele, ele fica cheio e , quando você pressiona, fica assim, depende totalmente de você, mas podemos mudar a versão inativa Então, assim mesmo. Vamos fazer a mesma coisa aqui, vou copiar isso. Coloque o traço aqui e a mesma coisa aqui. Copie o código hexadecimal e coloque-o no traçado. Agora temos o que chamamos de botões fantasmas e eles têm seu próprio mouse pressionado e uma variante ativa O que vamos fazer é fazer algo semelhante. Então, vamos até o nome e clicamos vírgula e depois diremos que Ghost é igual a Vamos escolher tudo isso aqui e tudo isso aqui. Enquanto segura a tecla Shift, você pode escolher muitos, quero dizer , muitos elementos ao mesmo tempo , e vamos dizer sim fantasma, e vamos escolher esses e esses e escrever não. Agora, preste atenção. Quando você escreve não com um N ou um O ou algo assim, ele vai aparecer como um valor diferente, certifique-se de escrevê-lo da mesma maneira. Agora, quando chegarmos aqui, você verá que o fantasma também se tornou um botão de alternância Você pode ativá-lo, ativá-lo ou desativá-lo. Em cada pequena variante aqui, você pode transformá-los em botões fantasmas ou não. Mas você pode ver nosso erro aqui. Fizemos disso um botão fantasma, mas o texto é branco. Temos que consertar isso. A maneira de fazer isso é vir aqui, podemos fazer isso preto. Podemos tornar o texto preto ou roxo. Vamos ver agora. Lá vamos nós. Assim mesmo. Agora, aprendemos como criar não apenas um componente, mas muitas variantes do mesmo componente. Aprendemos como criar versões flutuantes. Quero dizer, com as variantes flutuantes, aprendemos como tornar a variância pressionada uma variância inativa. Aprendemos como criar variantes fantasmas. Se você prestar atenção, isso é um pouco como uma mesa, e eu posso provar isso para você. Basicamente, essas são as versões ativas. Isso pode facilitar as coisas para você. As variantes ativas aqui temos o foco, a variância, e aqui temos a variância pressionada e aqui a ativa. Basicamente, é uma tabela com colunas e linhas e podemos fazer a mesma coisa aqui. Aqui temos o primário, e o próximo é o fantasma primário. Vou escrever P ghost, depois secundário e depois S ghost. E assim por diante e assim por diante. Você pode continuar criando muitas variáveis diferentes aqui para garantir que seus botões tenham aparências e aspectos diferentes. Isso permite que você, ao projetar, não economize tempo em vez de pensar que cor deveria ser essa? Que tipo de interação de protótipo devo ter? Deveria ser fantasma ou não? Não, você não precisa fazer isso. Você já tem todas as variantes possíveis em seu design. Eu sei que isso pode parecer muito, mas na verdade não é porque esses são estados de foco, estados pressão, estados ativos e assim por diante Então, parece que é muito, mas na verdade não é. Portanto, tenha isso em mente. Agora temos mais uma coisa para discutir. Essa coisa é bem interessante. É chamado de componentes aninhados. Agora, componentes aninhados são basicamente componentes dentro de componentes. Como isso funciona? Bem, deixe-me esclarecer um pouco. O que podemos fazer é dizer, você sabe, bem, às vezes eu gostaria de ter uma flecha, certo? Mas outras vezes eu gostaria de ter outro elemento. Talvez pudesse ser uma coisa diferente em vez de uma flecha ou poderia ser uma flecha para a direita para cima, para baixo. Depende de mim. Pode ser um ícone. Podem ser muitas coisas diferentes. Então, gostaríamos de adicionar alguns ícones aqui. Como vamos fazer isso? Bem, podemos prosseguir e pesquisar alguns plug-ins. Portanto, já existe um plugin chamado símbolos de materiais fornecido pelo Google. Então, isso nos ajuda a obter seus ícones básicos e, sim, coisas muito simples. Então, o que podemos fazer é pegar alguns deles aqui. Eu só vou escolher alguns deles. Talvez pudéssemos ter um ícone positivo. Hum, poderíamos ter um ícone de câmera e vamos ter um ícone de conta. Eu sei que você não pode vê-los porque eles têm cores diferentes. Então, vou seguir em frente e torná-los um pouco menores. Vamos ver como eles se parecem aqui. Sim, acho que isso é bom o suficiente. Vou seguir em frente e criar uma moldura dentro do tamanho deles. Vou dar uma cor, talvez vermelha por enquanto. Vou fazer disso um componente e adicioná-lo a ele, certificando-me de que esteja centralizado vertical e Não é muito centrado, mas tudo bem. Quando você está lidando com elementos muito pequenos, é difícil centralizá-los, não se preocupe com isso. Agora podemos criar outra variante dela. Em vez dessa vantagem, vou excluí-la. Em vez dessa vantagem, vou ter essa foto, essa câmera e vamos adicionar outra e fazer a mesma coisa. Em vez do sinal positivo, vou excluí-lo completamente e, em seguida, adicionar este ícone de conta e seguida, adicionar este aqui, colar em Bb. Agora, eu só precisava do vermelho para poder ver a cor corretamente e ver a moldura, mas não preciso mais dele, então vou remover a cor vermelha. Agora podemos chamar esse ícone ou glifo ou o que você quiser chamá-lo Então podemos trazer isso aqui. E adicione-o ao botão. Assim, temos um ícone dentro do botão. Agora, eu gostaria de adicioná-lo a todos eles de uma vez. Vou apenas copiá-lo , escolher todos eles e colar. Assim como eu faço isso, imediatamente antes de fazer qualquer coisa, vou escolher entre aqui. Aplique a propriedade, não mostre a seta, será o ícone de exibição. Mostrar ícone. Por enquanto, vou deixar que seja verdade por enquanto. Então eu posso ir em frente e ajustá-lo. Aqui, o botão é preto, então deve ser preto e a mesma coisa aqui. Todos os botões aqui são pretos, os ícones devem seguir os botões. Não é uma regra, mas acho que é uma boa coisa a seguir. Mantendo o turno e escolhendo todos eles. Aqui eu vou copiar o código. Agora que as cores estão todas organizadas, mesmo que os botões estejam fora do lugar, vou escolher essa adição e clicar aqui, selecionar as camadas correspondentes e selecionar todas as vantagens, todos os ícones de todas essas variantes adição e clicar aqui, selecionar as camadas correspondentes e selecionar todas as vantagens, todos os ícones de todas essas Então temos esse ícone de show, podemos ver que ele está mostrando o ícone. Agora que escolhi todos eles, vou clicar aqui, ir para a propriedade e vou torná-la falsa, ela não mostrará o ícone automaticamente. Isso significa que, se eu quiser, posso mostrar uma seta ou um ícone. O que é ainda mais legal sobre o que fizemos com esse elemento aninhado colocamos um elemento, um componente de ícone dentro dos componentes do botão. Agora eu posso escolher isso. Eu posso escolher isso aqui e posso ir aqui e alterar a variante. Eu posso transformá-lo em um ícone diferente. Aqui pode ser fazer upload de imagem, aqui pode ser fazer login ou criar uma conta. Aqui pode ser um marcador. Agora temos muitos ícones que podemos usar ou podemos simplesmente excluí-los ou ocultá-los. Agora, uma coisa a saber é que uma coisa importante é que precisamos rotulá-los. Quando chegamos aqui, podemos dizer tipo e podemos dizer, isso é anúncio ou mais. Aqui você pode dizer câmera, mais membro ou usuário. E marcador. Portanto, agora é muito mais fácil saber qual ícone exato você está usando ao consultar esta lista. Especialmente se você tem uma grande biblioteca e muitos ícones, isso é muito útil porque você pode entender: Ok, isso é marcador, isso é usuário, em vez de ter que clicar nele e ver qual é a variante número 27 Está bem? Então, é basicamente assim que funciona com esses elementos aninhados Então, só para recapitular, começamos com um botão, apenas um componente, e depois criamos diferentes variantes dele, então variante flutuante, variante pressionada e variante inativa A partir daí, criamos uma variante secundária e, em seguida, começamos a aprender as convenções de nomenclatura , sobre como criar propriedades diferentes Então, começamos com o tipo, então primário e secundário. E então nomeamos todos os tipos de status, então ativo, passe o mouse pressionado e ativo E então também configuramos a propriedade de seta. Então, agora pudemos configurar uma propriedade e fazer que ela a ocultasse no início ou talvez a exibisse Depende totalmente de você e você sempre terá a opção de ativá-lo ou desativá-lo Mas eu gosto de fazer com que, no começo, você tenha apenas um botão, nada, sem ícones, sem erros, sem nada. Você pode adicionar isso mais tarde, se quiser, mas depende de você. Depois, aprendemos a criar componentes aninhados. Então, basicamente, crie emojis como exemplo, emojis, ícones, glifos, o que quiser, e você pode adicioná-los ao botão, ou desativá-los e alterar o tipo de ícone que você tem É simples assim. O bom é que, se você tiver interações entre esses botões, se esse botão realmente tiver um efeito de passar o mouse, um efeito de pressionamento , e você puder configurá-lo, e isso é algo que veremos nas próximas lições, ele manterá as mesmas propriedades Ele terá o mesmo emoji, o mesmo ícone porque o configuramos aqui para que tenha um ícone Então, na variação do mouse, ela também terá o mesmo ícone Na variação pressionada, ele terá o mesmo ícone. E assim por diante e assim por diante. Essa é a maneira mais simples de explicar como os componentes funcionam. Mas se você entender isso, então você será um mestre. Você poderá criar componentes sem problemas, sem atrito e sem Mas o mais importante é que você preste atenção em trabalhar forma limpa, pois criar um sistema de design, criar um arquivo de design no figma, maior ou menor que seja, pode ficar caótico É por isso que é sempre importante definir de forma limpa e clara suas propriedades, seus botões, porque isso não só ajudará você a projetar, mas também ajudará os desenvolvedores que vão pegar seu design e transformá-lo em realidade. Então, falaremos um pouco mais sobre os componentes nas próximas lições, mas falaremos mais em segundo plano. Até agora, você deve ter todo o conhecimento necessário para criar componentes. Agora, há muito mais possibilidades com elas. Você pode criar efeitos ou seja criar muitas variantes diferentes com variáveis diferentes e assim por diante. Então vá em frente e experimente. Espero que você aprenda alguma coisa e vemos nas próximas aulas. 5. Variáveis e modos: Olá e bem-vindo a outra aula do curso avançado Figma Nesta lição, falaremos sobre variáveis, modos e estilos. Agora, esses são todos conceitos diferentes os quais falaremos sobre os quais falaremos e dos quais você já deve ter ouvido falar. Eles também existem no mundo do desenvolvimento. Então, se você tem formação em engenharia ou sabe um pouco sobre codificação, provavelmente já ouviu falar componentes, tokens e variáveis e entende como eles interagem entre si Isso é basicamente o que estamos fazendo aqui hoje. Para explicar isso, variáveis muito simples são coisas que não são constantes. Eles estão mudando. Então pode ser um número, pode ser um número. Uma vez esse número é dez, uma vez 20, uma vez 30. Então, só para dar um exemplo, sua idade é uma variável que muda a cada ano, certo? Portanto, pode mudar a cada ano que, no início, sua idade é de um e depois dois e depois três até você ter 20, 30 anos, isso continua mudando com você e depende outras circunstâncias, como o passar do tempo A mesma coisa aqui se aplica à figma, é um pouco diferente Portanto, temos vários tipos diferentes de variáveis. A forma de acessá-los é desmarcar tudo e ir até as variáveis Clique aqui e você descobrirá que não há variáveis em sua coleção. Vá em frente e clique em Criar. Então você verá que existem esses quatro tipos diferentes, variáveis de cor. Assim, você pode ter uma variável que seja uma cor específica. Então você tem roxo aqui, você tem amarelo, você tem outra cor, seja um número que muda, como falamos sobre idade, por exemplo, ou pode ser uma corda. As strings podem ser um texto, por exemplo, e booleano é algo um pouco mais avançado, então vamos deixar isso para Vamos começar com a cor, pois acho que essa é a variável mais prática que você pode usar no Figma e também a mais fácil de explicar Em primeiro lugar, esse é um design que eu fiz antes e é apenas um exemplo. Não é um design real para um aplicativo real, mas podemos usá-lo para nossos propósitos. A primeira coisa que você vê aqui é que há um esquema de cores específico. Você tem a cor roxa aqui. Há uma versão mais clara, uma versão mais escura, há alguns gradientes Também há amarelo, e há essas cores aqui. A cor mais importante que temos aqui é a cor primária, que é roxa. Você poderia chamá-lo de primário, você poderia chamá-lo de roxo. Depende realmente de você, mas eu gosto de manter as coisas como primárias e secundárias, gostaria de chamá-las assim só para que fique mais claro. Podemos prosseguir e selecioná-lo aqui e escolher esse primário. No momento, temos isso como uma variável. Podemos ir em frente e criar outra, você poderia chamá-la de luz primária. Portanto, esta é a versão mais leve desta primária, e então podemos escolhê-la aqui. Nós podemos escolher esse. Então agora esta é a versão mais leve primária, ok? Podemos criar um secundário. Portanto, a variável secundária é o amarelo. Agora, aqui, você sabe, estamos apenas escolhendo mais ou menos aleatoriamente, mas podemos escolher este, por exemplo, que seria mais preciso mas podemos escolher este, por exemplo, que seria mais E também podemos ter uma versão mais escura, secundária, você sabe , basicamente depende do que você está vendo aqui Aqui vejo que há uma versão mais escura aqui, então vou clicar em I e usar a ferramenta de fechar os olhos para selecioná-la Também podemos fazer isso assim ou podemos fazer com que você veja a luz primária, a escuridão secundária. Podemos alterá-lo, torná-lo primário , escuro e secundário. Depende de você como você quer fazer isso. Nós podemos fazer isso agora. Isso pode ser nosso principal e esta é a versão sombria disso. Agora temos isso resolvido. Nós podemos fazer muito mais. Podemos fazer um plano de fundo, por exemplo. Essa é boa. Plano de fundo onde você pode simplesmente escrever BG e selecionar o plano de fundo aqui. É branco, simples o suficiente, certo? Então, agora temos essas variáveis. Agora, como os usamos? Bem, você tem que conectar as cores aqui a essas variáveis. A maneira de fazer isso é selecionar o elemento. Venha aqui e, em vez de escolher um preenchimento normal, você clicará nesses quatro pequenos círculos, depois escolherá a variável, que aqui é escura primária, basta clicar nela. Agora, uma maneira mais fácil de fazer isso é selecionar o quadro inteiro e entrar nas cores de seleção e, em seguida, você pode escolhê-las aqui. Você pode ver a luz roxa aqui, é a luz primária. Você pode ver esse fundo branco. Vou apenas clicar aqui no PG. Também tem outro aqui, mas isso é 50%, preste atenção nisso. Você não pode realmente adicionar 50% às suas variáveis, então você tem que deixar as coisas como estão. Nós temos muito mais. Agora, gradientes, você não pode tê-los como variáveis É muito triste porque mexe com nosso sistema. O que vou fazer agora é, além dessas, mudar todos os gradientes ou a maioria deles, e vou torná-los com cores normais só para tornar isso um pouco mais fácil Vou fazer disso nosso secundário e vou fazer disso nosso principal, escolhendo coisas Você pode ver que há preto e esse cinza, então vou escrever. Cinza, preto. Isso é preto absoluto. E vou selecionar a moldura novamente. Eu vou escolher preto para este. Eu vou deixar isso também preto. Quero dizer, é cinza escuro, mas vou torná-lo preto. Você pode se perguntar onde está localizado e pressionar aqui e ver que são dessa cor, por exemplo. Eu não vejo bem, essas são as linhas. Acredito que podemos torná-los cinza, mas são muito cinza, então vou criar cinza claro. Então, como você pode ver, é um processo. É uma questão de entender, quais cores temos? De que cor precisamos? E então, aqui, há um entendimento. Então, esses são tons diferentes de cinza, e agora podemos torná-los cinza claro. Agora, selecionaremos novamente, iremos para as cores de seleção e você pode ver que ainda faltam algumas. Quero dizer, podemos fazer isso apenas cinza. Isso também é apenas cinza. E esses outros, vamos ver o que podemos fazer com eles. Acho que alguns deles podemos simplesmente manter como estão. Sim, não precisamos mudar tudo. Agora temos todas essas configurações. O que é realmente interessante sobre variáveis é que, assim como falamos sobre componentes, ter um componente pai que controla todos os outros componentes secundários. Temos o mesmo conceito aqui. Então, o que você pode fazer aqui é dizer: Sabe o que? Decidi mudar todo o esquema. Em vez de roxo, quero torná-lo azul. Você pode ir em frente e fazer esse azul, você tem que fazer isso também um azul mais escuro, e então você pode fazer esse laranja se quiser Faça isso também laranja. assim, mudamos muitas cores aqui, ok? Então, as cartas, nós as deixamos como estão porque são cartas e têm gradientes, o que é difícil de mudar Mas todo o resto, as cores principais que temos aqui, as principais aqui, foram praticamente alteradas. Além desta , porque também é um gradiente, mas quero dizer, também podemos fazer essa alteração ou não precisamos Então, vou seguir em frente e pressionar Control Z e colocar tudo de volta onde estava. Mas esse é apenas um exemplo para mostrar o que você pode fazer com essas variáveis. Então, isso é muito legal. Então, isso é uma coisa que você pode fazer. Agora, vou mostrar o que podemos fazer com outros tipos de variáveis. Vou criar uma variável numérica. Vou largá-lo apenas para criar uma boa separação entre eles. Eu não quero que eles sejam misturados. Quando se trata do número, isso é um pouco mais interessante. Com números, trata-se de valores e você pode perguntar: para que eu preciso disso? Bem, uma coisa que você pode usar é usá-lo para espaçamento, por exemplo Se você notar que a maioria deles está dentro automáticos, e os layouts automáticos geralmente têm espaçamento Você pode ver aqui que há 16. Você pode ver aqui que é 24, aqui é Auto. Aqui você tem zero, mas entre eles, é automático. Aqui é sete, por exemplo, então a questão é, quero dizer, aqui está sete, aqui, é 12. Portanto, temos muita inconsistência aqui. Isso é zero, isso é sete, isso é 12. Então isso é algo que podemos tentar eliminar. Então, podemos dizer: Ok, vamos fazer com que o espaçamento entre o texto e os elementos seja oito, certo? Então, eu não sei, podemos chamá-lo exatamente desse elemento de texto ou algo parecido, e podemos chamá-lo de oito, certo? E então o que vamos fazer é vir aqui e vamos chegar ao espaçamento aqui Desculpe, isso não é zero, é cinco. Então, em vez de ter cinco, vamos clicar nessa seta aqui e clicar em Aplicar variável para escolher texto mais elemento. Agora está configurado como oito, mas não apenas como oito. Isso é um elemento, então está conectado aqui. Vou aplicar exatamente a mesma coisa aqui, aplicar a variável e depois escolher a variável que acabamos de criar. Aplique a variável. Ooh. Agora nós o configuramos. É bom que, se decidirmos, espere um minuto. Isso é especialmente importante porque quando você tem clientes, os clientes sempre reclamam, fazem seus próprios comentários e dizem: Ei, e dizem: Ei, o espaçamento aqui não parece muito bom ou talvez seus colegas de design ou chefe ou quem quer que seja, eles podem dizer o dobro disso, faça com que dobre faça Tudo o que você precisa fazer é acessar sua janela de variáveis aqui e só precisa alterá-la a partir daqui. Basta clicar em 16 e banir, mudou em todo lugar. Mas então notaremos, oh, não, agora, você não pode dizer se suas cartas estão relacionadas ao elemento acima ou ao elemento abaixo porque estão bem no meio. Vamos colocá-lo de volta, Control Z. Bam, é colocado de volta desse jeito Podemos fazer isso e repetir muito isso para muitas coisas diferentes, ok? Mas você pode dizer que, para o espaçamento, podemos usá-lo para muitas coisas Mas o que é ainda mais legal é que você pode vir aqui. E você pode escolher esse ícone de ajuste ou edição e pode vir aqui para o escopo. Agora, nesse escopo, você pode escolher onde essa variável será mostrada. Agora, queríamos que isso fosse usado principalmente para lacunas, layouts automáticos Não é um conteúdo de texto, não é um raio de canto, não é largura e altura, não é nada disso Então, basicamente, podemos simplesmente retirar isso e, em seguida, vai removê-lo em todas as propriedades e vamos simplesmente inseri-lo Então, quando chegamos aqui a outro elemento, por exemplo, vamos ver. Quero dizer, derrame. Então, se adicionarmos um traçado aqui e pudermos dizer, vamos ver que tipo de variáveis temos? Não temos nenhuma variável criada nesse arquivo, e é exatamente isso que queríamos. Podemos adicioná-la aqui, e agora a temos aqui. Mas não precisamos. Está bem? Portanto, é só entender que esse texto mais o elemento serve apenas para lacunas. Podemos prosseguir e remover o traço aqui. Podemos criar outro e podemos dizer raio. Raio do canto, desculpe, acabei de criar uma variável de cor Eu só vou deletá-lo. Então, vamos criar um número um e vamos chamá-lo de raio de canto ou apenas raio Vou ver que tipo de raio temos aqui? É 16, aqui, é 16. Eu só vou escrever 16. E eu vou escolher todos esses. Quero dizer, idealmente, quando você trabalha de forma limpa, você já deveria ter feito isso como o primeiro passo, ok? Agora chegamos aqui, clicamos nele e escolhemos o raio, bam, está configurado Se optarmos por fazer com que tenha apenas cantos afiados, podemos simplesmente fazer esse zero e estourar, agora está configurado como zero, como você pode ver. Exatamente desse jeito. Quero dizer, nem todos os elementos, mas você entendeu. Como dissemos antes, podemos verificar o escopo e podemos desmarcar tudo e dizer que isso é apenas para o raio do canto Esse é um recurso muito interessante que você pode usar para todas essas coisas. Você pode usá-lo para traçado, texto, efeito, altura da linha, para muitas coisas. Você não precisa restringi-lo. Você pode mantê-lo em todas as propriedades suportadas, mas vai ficar bem confuso. Ok, então é isso que você pode fazer com essas variáveis numéricas. E então temos variáveis de string. Agora, variáveis de string são um pouco menos úteis, na minha opinião, mas talvez eu não as esteja usando ao máximo. Portanto, as variáveis de string são basicamente variáveis que decidem qual texto você tem. Então, quando você tem um texto aqui, por exemplo, você tem um número, certo? Você pode clicar aqui. E você pode optar por tê-lo como um valor de string. O valor da string agora é o valor da string, mas você pode dizer que isso é $100 e isso vai mudar isso Agora, isso é bom para propósitos diferentes, mas é basicamente bom se você quiser ter o mesmo número ou o mesmo texto em vários lugares diferentes. Então, em vez de ter que trocá-los repetidamente, você pode simplesmente deixá-los em um lugar como esse. É isso quando se trata de variáveis de string. Agora eu gostaria de prosseguir e explorar o que chamamos de modos. Os modos são outro lado desse recurso, uma adição, uma extensão desse recurso, o que é muito legal. E, basicamente, você vê todas essas variáveis que criamos. Há uma mesa aqui. Na verdade, é uma tabela que podemos estender, e temos essa coluna, mas podemos adicionar outra, e isso é chamado de modo. Então, agora temos dois modos, modo um e modo dois. Agora, há muitos usos diferentes para isso, certo? Mas o uso principal ou um dos melhores usos que eu encontro é criar modos diferentes ou esquemas de cores diferentes ou modo diurno e modo diurno ou modo noturno, certo? Então, podemos dizer que é a luz do dia. E isso é noite. Agora temos esses dois modos. O legal é que podemos ver bem à nossa frente como podemos escolher esses modos diferentes e mostrá-los de forma diferente. Vou copiar esse painel. Vou copiar e colar. Vou copiar e colar aqui mesmo. Eu vou vir aqui, você vê essa aparência. Você clicará em Aplicar modo variável, Coleção 1, e eu clicarei em Noite. Agora vamos voltar à nossa janela de variáveis. O que vamos fazer é mudar o esquema de cores. Vamos reverter algumas dessas cores, especialmente os brancos, os pretos e os cinzas. Nós vamos revertê-los. Todo o preto agora deve ser branco e todo o branco deve ser preto. Não precisa ser totalmente preto. Pode ser um pouco cinza escuro. A razão é porque temos sombras que gostaríamos de continuar mostrando aqui Então podemos vir aqui e dizer que, para o cinza claro, ele tem que ser cinza escuro. Ok. Vamos ver. Você vê isso aqui. Enquanto estiver visível, cumpriu seu propósito e, em seguida, esse cinza deve ser mais claro. Você pode ver que este é o texto. Esse texto deve ser legível. Agora vamos reverter isso. Você já pode ver que isso parece muito legal. Está funcionando, mas em alguns lugares não está aqui, por exemplo, aqui, não está funcionando porque o preto não funciona. Podemos ter várias soluções. Uma maneira de resolver isso é garantir que esse texto em branco permaneça branco. Em vez disso, você pode escolher aqueles em vez de conectá-los a este BG, podemos torná-los simplesmente sempre brancos. Essa é uma maneira de resolver isso. Outra maneira de resolver isso é basicamente ir em frente até essa escuridão e, basicamente, vamos revertê-la. Vamos fazer essa luz e talvez até mais leve do que isso. Então vamos deixar isso bem escuro, mas não muito escuro. Agora você pode ver que também invertemos essas tonalidades. Mas nem sempre funciona dessa forma. Não há um método único, porque agora você pode dizer, bem, esse é um roxo completamente diferente desse. Não tem a mesma identidade. Você pode estar certo, então podemos prosseguir com nossa outra solução de tornar isso branco manualmente. Portanto, esse não muda com os modos. Eu só fico branco. Como regra geral, quando você altera a luz do dia para o modo escuro para o modo noturno ou o modo escuro, você deve tornar algumas das cores um pouco mais brilhantes Esse roxo não parece muito bom quando ainda está escuro aqui. É bom deixá-lo um pouco mais brilhante e a mesma coisa com este Você vê? Agora parece consistente. Não parece tão estranho, mas na verdade tornamos esses roxos muito mais claros, há um propósito Existe um propósito de visibilidade. Agora, uma coisa que poderíamos fazer mais é tornar essas sombras um pouco mais intensas porque, no momento, elas são quase invisíveis Não vemos a diferenciação. Uma maneira de fazer isso é basicamente escolhê-los para que você possa ver que há uma sombra projetada aqui. Então, o que vamos fazer é criar uma variável e criar uma variável numérica e chamá-la de sombra. Pode ser que descubramos qual deve ser essa variável. Então, quando abrimos o efeito das sombras aqui, temos várias coisas Temos desfoque, posição e dispersão Agora, vamos ver quais efeitos eles têm. Podemos fazer com que se espalhe mais. Podemos desfocá-lo mais, podemos fazer com que fique mais distante, mas não podemos realmente mudar a opacidade Isso é algo que podemos mudar com esses modos. Então, teríamos que escolher um desses elementos para conectá-lo à variável ou teríamos que mudar isso manualmente. Depende mais ou menos de você. O que posso fazer é, como solução alternativa, também atribuir a eles um traçado e uma variável, para que você possa dizer: Traçado E aqui, o traço no modo normal, quero dizer, vamos conectá-lo. Vamos dar um golpe. Está bem? Pode ser cinza muito claro. E então, quando chega aqui , pode ser cinza escuro. Agora, essa geralmente é uma boa solução porque garante que a sombra não seja tão invisível. Isso torna muito visível que esses são elementos específicos, que são cartões ou caixas. Então, quando você o transforma no modo escuro, ele também fica visível. É muito visível. Mas em vez de confiar apenas nas sombras, que são mais difíceis de ver no modo escuro, eles confiam mais nessas bordas, e podemos fazer a mesma coisa aqui Podemos adicionar um traçado e, assim mesmo, agora temos um traçado aqui e ali e também para esses botões. Então, vou adicioná-lo aqui. E eu vou tê-los lá também. Tudo bem, agora temos dois modos diferentes, modo diurno e modo noturno ou modo escuro. Como você pode ver, é assim que você pode usar os modos a seu favor, transformando um design simples em transformando dois tipos diferentes, dois esquemas de cores diferentes. É um recurso muito legal. Use-o. Quero dizer, se você precisar, use-o. Se você não precisa. Mas o legal é que você sempre pode mexer com isso. Você sempre pode mudar a aparência a partir daqui. Você pode mudar disso para aquilo ou pode voltar atrás. Depende totalmente de você. E deixe-me te mostrar mais um truque. Então você vai seguir em frente, fechar essa janela e criar uma seção, criar uma seção grande. E então o que vamos fazer é trazer esse painel para dentro dele, e então vamos escolher a seção, vir aqui para ver a aparência e torná-la noturna. E olha o que vai acontecer quando eu tirar isso daqui. Torna-se modo diurno ou modo claro, e aqui está o modo escuro. Esse é um truque muito legal, e é muito bom porque, depois terminar todas as telas, todos os seus designs, tudo o que você precisa fazer é duplicá-los e colocá-los em uma seção como essa, e então você pode ver exatamente como ficaria no modo escuro Então é assim que você pode usar variáveis a seu favor, como um mestre, como um profissional. Você pode usar variáveis de cor. Você pode usar variáveis de string. Você também pode usar várias variáveis e usá-las para espaçamento. Você pode usá-los para cores, cordas, qualquer coisa que você realmente precise Eles funcionam como um encanto. Mas sempre há essa pergunta. Por que eu preciso de variáveis? Bem, eu expliquei um lado, por que você precisa disso, porque antes de tudo, ei, você pode mudar muitas coisas em um único lugar, uma única janela que decide tudo, certo? A segunda razão é que isso obviamente torna seu fluxo de trabalho mais fácil e rápido e torna mais fácil para você e para o limpador saber o que você fez e quais cores escolheu, em vez de ter suas cores em todo lugar Dessa forma, fica um pouco melhor definido. Mas também há a questão: por que eu não deveria simplesmente usar estilos, certo? Se você não está familiarizado com estilos, nós os temos aqui. Os estilos são um conceito semelhante. Isso permite que você crie estilos de texto, estilos de cores. Além disso, você também pode ter estilos de efeitos e guias de layout. Agora, deixe-me dizer isso. Quero dizer, as variáveis não substituem os estilos. Apenas tente deixar isso penetrar, tente entender isso. Não é um substituto. Eu acho que em muitos lugares, as variáveis são a coisa certa a se usar, enquanto em outros, é melhor usar estilos. Ok, então deixe-me explicar para você, em primeiro lugar, se você não sabe o que são variáveis e quais são os estilos, nós já explicamos as variáveis, mas vamos aprender o que são estilos. Agora, os estilos são formas mais simples de usá-los para usar variáveis. Você pode escolher uma cor e apenas dar uma cor e dizer, isso é roxo, eu vou escolher isso como estilo. Você pode dar um nome a ele. Você pode adicionar uma descrição se quiser. Mas o que é bom nisso é que você pode adicionar várias cores diferentes em um estilo. Isso é algo que as variáveis não podem fazer e, além disso, você pode criar um estilo que também seja um gradiente. Isso é algo que as variáveis ainda não podem fazer. Então, quando criamos um estilo de forma muito semelhante, basta clicar nessas quatro caixas, quatro círculos, e podemos ver que todas essas são nossas variáveis, e também temos estilos aqui. Então, isso é algo que está disponível para uso e é usado de uma forma muito semelhante às variáveis. Portanto, estilos e variáveis são muito semelhantes. Mas a diferença está no fato de que, quando se trata de estilos, você não pode ter modos diferentes. Então, assim como você tem variáveis aqui, você tem todos os seus estilos aqui. Assim, você pode alterá-los em um só lugar. Se você mudar de ideia e disser: Ei, eu quero mudar o esquema de cores, eu quero torná-lo azul. Você pode fazer isso. Você pode fazer isso. E se tivéssemos o estilo configurado aqui, ele se refletiria aqui. Mas a ideia é que você não pode ter modos. Você não pode ter demde, modo escuro e assim por diante. Isso é uma coisa, mas se destaca em outras coisas. Então, quando se trata de efeitos, você pode adicionar efeitos totalmente criados. Você pode ter uma sombra projetada, pode ter um número específico, uma opacidade ou até mesmo uma cor específica Todas essas coisas são coisas que você pode configurar. Você pode alterá-lo para ruído ou desfoque de camada. Depois de configurá-lo, não o configuramos, mas vamos adicionar um efeito agora e vamos criá-lo como um estilo Agora podemos prosseguir e escolhê-lo aqui. Efeitos. Agora temos sombra projetada. Podemos garantir que todas as nossas sombras, por exemplo, sejam mais ou menos consistentes no design Variáveis não podem fazer isso. Tenha isso em mente. Também temos todos os nossos estilos aqui. Você pode ver os estilos de cores, os estilos de efeitos e o que é ainda mais legal são os tecidos Agora você deve se lembrar que eu disse, você sabe, as variáveis de string são mais ou menos inúteis Pelo menos eu não tenho um caso de uso sólido para eles, e acho que a maioria dos designers não tem, porque muitas vezes, você sabe, não estamos lidando muito com variáveis numéricas. Não estamos lidando com variáveis de texto. Estamos lidando com cores, formas e outras coisas, e as variáveis de string nem sempre são úteis quando se trata disso. Mas aqui, o que você pode fazer é configurar esses estilos relacionados à tipografia Então, digamos que queremos manter uma tipografia consistente dentro do design Como você pode ver aqui, ser bem-vindo de volta é normal. Você sabe, é uma fonte que é normal, e então essa está em negrito e maior, e então isso é menor, isso é negrito, isso é muito maior, e assim por diante. Portanto, temos estilos diferentes. Talvez até tenhamos fontes diferentes. Então, a maneira de fazer isso é criar um tecido e dizer, você sabe, quero dizer, vamos ver o que é esse tecido Isso é inter um, 16, e isso é Inter bold 24 Então, o que fazemos é seguir em frente criar um estilo e dizer. Criamos um estilo e dizemos que esse é o Inter, deveria ser 16, e é normal, ok? Podemos escolher até mesmo, você sabe, a altura da linha e assim por diante. E podemos dar um nome a isso. Podemos dizer que isso é normal ou podemos dizer que é texto. E isso é muito importante quando você quer escrever títulos, certo? Então você vai ter o título um, dois, três, quatro, e aqui está. Então, temos 24, então podemos seguir em frente e criar um estilo aqui. O que é bom? Quero dizer, você não precisa fazer isso. Você pode simplesmente vir aqui, clicar nos quatro círculos e clicar em mais. Você pode simplesmente dizer, salve todas essas configurações que eu tenho aqui e crie um estilo a partir delas. Podemos dizer H um. Este é o nosso H um, e então podemos vir aqui e dizer que este é o H dois. Novamente, clique nos quatro círculos no mais H dois, e este é o nosso H três. Tudo bem, crie o estilo. Então, podemos ver todos os nossos tecidos aqui. Temos que conectá-los aqui. Aqui, isso está conectado. Isso não está conectado, vamos apenas conectá-lo aqui ao texto. Então o que podemos fazer é vir aqui e dizer, sabe o que? Decidi tornar H one header one muito maior. Eu posso escrever 36. Bam , fica maior aqui. Eu poderia dizer, H dois ou H três, isso é muito pequeno. São 12. Vamos fazer 16, você pode ver que este mudou. Quero dizer, idealmente, também devemos configurar isso para ser H três e todos os outros também. Você entendeu a ideia. Os estilos são muito semelhantes às variáveis quando se trata mudar coisas de um local central, mas os estilos têm muito mais controle sobre muitas coisas diferentes, estilos de texto, estilos de cores e estilos de efeitos. Embora as variáveis ainda sejam um pouco limitadas. Quer dizer, lembro que quando esse recurso foi lançado pela primeira vez, acho que estava mais ou menos no modo Beta. Portanto, não era muito confiável ou estável. Agora é, mas como eu disse, ainda é um pouco limitado, então você precisa prestar atenção nisso e ver o que pode trabalhar com isso, porque acho que as variáveis são mais legais quando se trata de cores quando se trata de talvez cordas, mas os estilos são muito mais superiores quando se trata de têxteis, quando se trata de estilos de efeitos, porque isso economiza muito tempo. e você sempre pode voltar e dizer, sabe o que? Essa sombra não parece boa. Não preciso ir em frente e alterá-lo a partir de cada elemento. Eu posso fazer isso com o apertar de um botão. Eu posso mudar tudo isso. E sim, idealmente, você não deveria ter uma sombra chamada sombra de tambor. Você deve dizer sombras de botão, e então você pode dizer sombras grandes, sombras de cartas Não sei, apenas sombras diferentes para diferentes elementos ou efeitos que você deseja mostrar E sim, essas são as principais diferenças entre estilos e variáveis. Espero ter tornado isso compreensível. Então vá em frente e tente trabalhar com esses efeitos, tente trabalhar com esses elementos, características, variáveis e estilos, quero dizer. Mas, para ser honesto, se você acha que seu projeto não tem um escopo tão grande e não precisa ter variáveis ou estilos, não precisa usá-los. Quer dizer, eu sempre sugeriria trabalhar de forma limpa. Portanto, use estilos se puder, se tiver tempo, especialmente se sua empresa tiver orçamento para isso. Mas se você acha que não está criando designs muito rápidos que não precisam ser super consistentes , com certeza, você não precisa deles. Tente medir suas prioridades, entendê-las. Precisamos nos concentrar em dedicar muito tempo para descobrir os estilos de efeito e criar um estilo consistente que se repita e que seja realmente consistente, ou estamos apenas tentando fazer algo rápido e sujo e simplesmente não prestar atenção à Depende de você. Espero que isso faça sentido para você e nos vemos na próxima lição. 6. Bibliotecas de equipe e organização de arquivos: Bem-vindo a outra aula do curso avançado Figma. Nesta lição, falaremos sobre arquivos de equipe e como publicar arquivos de equipe para ter componentes em arquivos diferentes e compartilhá-los com sua equipe. Deixe-me explicar o que quero dizer. O que fizemos nas aulas anteriores, se você ainda não as examinou, pode conferi-las agora. Basicamente, criamos variáveis, criamos componentes com variantes diferentes e também criamos estilos, e todos esses são conceitos diferentes. Mas todos eles se relacionam de uma maneira muito boa porque uma parte essencial de usá-los é a consistência. Então, quando você está trabalhando em um projeto específico, digamos que, agora, estamos criando aplicativo financeiro exatamente como você vê aqui, então provavelmente queremos criar vários arquivos, ou talvez dentro do mesmo arquivo, gostaríamos de ter os mesmos componentes, os mesmos estilos e assim por diante. Basicamente, para recriar e manter essa consistência nos arquivos Figma, gostaríamos de poder trazê-los Agora, a maneira mais fácil de fazer isso ou a maneira direta mais direta seria copiar algo e colá-lo Então, quando você tem seus botões aqui, você pode copiá-los e simplesmente colá-los nos outros documentos. Mas isso pode ser cansativo. Quero dizer, no começo, parece ser o mais fácil, mas não é. O que realmente faz mais sentido é compartilhá-los, basicamente publicá-los por meio da biblioteca da sua equipe. A maneira de fazer isso é ir aqui, então você tem duas guias aqui. Você tem seu arquivo e seus ativos. Agora, o arquivo mostra as páginas que você tem, bem como as camadas. Agora você também pode recolhê-los, para poder ocultá-los, se quiser. Vamos analisar os ativos. O Assets Sab mostra todos os diferentes componentes, estilos variáveis que você tem ou, mais facilmente, mostra todas as bibliotecas que você salvou Agora, você pode ver algumas bibliotecas que eu tenho aqui e é porque as vimos na página da comunidade. Eu os vi. Eles estão disponíveis publicamente e eu os adicionei. Eu posso ir em frente e entrar no iPadOS 26, por exemplo, há um kit de interface de usuário, e isso me permitiu ver todos os componentes que eles têm dentro desse kit Posso trazer qualquer coisa daqui para o meu arquivo de design atual. Posso dizer Face ID, deixe-me pegar o Face ID, para que eu possa inserir e, assim, tenho uma instância do Face ID, que tem variantes diferentes, por exemplo, o sucesso da autenticação e outros enfeites Podemos fazer a mesma coisa que Apple faz com seus UIKits A maneira de fazer isso é seguir em frente e clicar nesse botão. Portanto, escolha suas bibliotecas e o que você verá aqui são ativos criados nesse arquivo. Portanto, haverá ativos limitados a esse arquivo. Esses, novamente, são os estilos, variáveis e componentes e, em seguida, você tem bibliotecas adicionadas a esse arquivo. Posso removê-los se estiverem sendo muito incômodos e não quiser usá-los, por exemplo, acho que não vou usar o WatrOS 26 ou o Vision OS, então posso simplesmente removê-los daqui ou adicioná-los novamente Mas então, o que você vai querer fazer caso já tenha um conjunto de componentes que você criou neste arquivo e gostaria de publicar, você vai clicar em Publicar. Então, vai te dizer aqui, quero dizer, agora, já está publicado, mas normalmente aqui ele mostra as mudanças, certo? Então, mostra o que você adicionou. Então, o que adicionamos, quero dizer, antes, não foi realmente publicado. Adicionamos nossa coleção de variáveis e ela mostra aqui que temos 12 variáveis alteradas. Depois, temos os estilos. Então, mostra que eu adicionei têxtil H um, têxtil, H dois estilos, H três Tínhamos um estilo em termos de estilos, adicionamos um gradiente, adicionamos uma sombra projetada Fizemos a maioria delas na última lição. Enquanto conversávamos sobre estilos e variáveis. Como você pode ver, existem as variáveis, os estilos e os componentes. Agora, criamos apenas dois componentes até agora, que são o botão e o ícone. Isso lhe dá a oportunidade de remover qualquer um desses e dizer: Você sabe o que? Não quero compartilhar os componentes porque esses componentes são específicos desse arquivo. Mas eu gostaria de compartilhar, por exemplo, a coleção. Eu gostaria de compartilhar as variáveis nele, e você pode ver quais variáveis você tem, quais são adicionadas e quais não são. Acho que todos eles foram adicionados. Você pode ver todos eles aqui. Novamente, você pode optar por desmarcar tudo e, em seguida não está realmente publicando nada, ou pode adicionar tudo isso Vamos prosseguir e publicá-los. Diz que é uma biblioteca de publicações. Vai demorar um pouco. Perfeito. Agora está publicado. Aqui abrimos um novo arquivo de design e, quando vamos às bibliotecas, não encontramos nossa própria biblioteca. Então, vamos adicionar mais bibliotecas e vamos até as equipes e você encontrará dentro das equipes, você encontrará a freelance Você pode adicioná-lo a esse arquivo se ele ainda não tiver sido adicionado. Assim, clicando nele, você acessará todos os componentes que estão disponíveis. Além disso, você também pode usar o estilo. Se criarmos qualquer tipo de objeto aqui, posso prosseguir aqui e ver aqui todas as diferentes bibliotecas. Agora, não demos um nome à nossa biblioteca, então talvez devêssemos fazer isso, para ser honesto. Se chegarmos aqui, vamos à biblioteca e podemos simplesmente mudar o nome aqui para que possamos dizer aplicativo financeiro. E aqui está escrito Aplicativo financeiro. Então, quando adicionamos um estilo aqui, queremos adicionar um estilo. Então, ele vai dizer que é um aplicativo financeiro. Assim, você pode ver todas as nossas variáveis aqui, ou variáveis de cor, bem como nosso estilo aqui, que era apenas um gradiente. Então, quando adicionamos texto, estamos apenas testando isso. Então, olá, olá mundo. Posso verificar a tipografia e verei meu aplicativo de finanças, estilos de tipografia Agora, é claro, posso ver todos os outros sistemas aos quais adicionei : as interfaces de usuário, as bibliotecas. Mas agora só precisamos desse, aquele que nós mesmos criamos. E assim, criamos a biblioteca da equipe e a publicamos, e agora pudemos usá-la em outro arquivo. É tão fácil quanto isso. Mas o mais legal é quando começamos a trabalhar aqui e decidimos, sabe o que? Deixe-me criar outro componente. Quero dizer, deixe-me fazer essa coisa ou talvez uma dessas, vou transformá-la em um componente, basta clicar aqui e dizer, estatísticas, certo? Então eu posso ir aqui para minhas bibliotecas. E aqui está escrito uma mudança. Ele acompanha as mudanças que você faz. Uma mudança porque criamos um componente. Vamos criar um novo estilo, que seja uma cor. Vamos fazer isso em cinza e vamos criá-lo sem um nome, então basta colocar o código hexadecimal Então, agora verificamos e , em seguida, ele diz duas alterações. Você vê que isso acompanha quando chegamos às variáveis . No último exemplo, adicionaremos uma variável de string. Não vamos colocá-lo, vamos apenas escrevê-lo lá. E agora vamos verificar. Novamente, há três mudanças. Agora, você precisa aceitar ou publicar manualmente essas alterações para que elas sejam aprovadas. Então, vou publicar e vou escolher todas elas. Eu posso escolher e dizer: Ei, você sabe o que? Não, eu não quero que as estatísticas sejam feitas. Eu não quero que essa cor seja tirada. Não sei por que ou em que caso, alguém decidiria por isso. Na verdade, depende de você decidir seus próprios casos de uso. Talvez você decida que isso não deveria fazer parte do sistema. Isso era algo fora de todo esse sistema de design. Talvez tenha sido por engano. Então você quer saber, exclua, isso depende de você. Você pode ver aqui que todos os estilos e variáveis inalterados também estão listados aqui apenas para sua informação Então, podemos prosseguir e publicá-lo. Agora temos um novo componente, um novo estilo e uma nova variável. Agora vamos verificar o quão rápido isso é. Enquanto estamos verificando. Em 3 segundos, ele foi atualizado. 3 segundos de minha espera aqui, ele foi atualizado e eu posso trazê-lo aqui, assim como aquele dragão, onde eu posso clicar nele e ver a coleção. Eu posso ver como parece o modo escuro de demonstração, e a mesma coisa aqui, eu posso verificar todas as instâncias. Isso é mais como um recurso de pré-visualização, se você quiser ver, bem, deixe-me dar uma olhada. O que eu posso fazer aqui? Depois, você pode conferir a aparência e inserir a instância. Mas, para ser sincero, acho que esse é um caminho mais longo e demorado. Eu prefiro simplesmente arrastar, soltar e depois ajustá-lo como eu quiser. Torne-o secundário, ativo, no entanto, o que eu quiser. Basicamente, é assim que você pode usar as bibliotecas da equipe a seu favor, para publicar suas alterações quando você tiver feito alterações para publicar no início. Então, ao fazer alterações, você pode publicá-las novamente ou publicar essas alterações especificamente. Você pode usar e reutilizar a biblioteca Steam em seus arquivos Agora, isso provavelmente é muito reconfortante para muitas pessoas, muitos designers que gostam de trabalhar em projetos diferentes e gostariam de ter os mesmos elementos, sejam eles pertencentes à mesma identidade de marca ou talvez elementos específicos que você criou que poderiam funcionar em projetos diferentes Você não precisa, um botão nem sempre deve ter um design exclusivo e incrível Você pode usá-lo e reutilizá-lo. Depende de você saber, depende do seu fluxo de trabalho, depende de como você gosta de trabalhar. Mas esse recurso foi mais ou menos pensado em termos de um projeto. Você tem um projeto em que tem, digamos, algo muito parecido com kits de interface do usuário. Então, tem que ser um kit de interface de usuário consistente, como o IOS 26, e então você tem um botão ou, em termos de botões , você tem esses vários botões, então há vidro líquido, há botões normais. E ao clicar nele, você verá muitas opções. Quero dizer, está colorido ou não? É o modo claro, o modo escuro? Mostra que está ativado ou desativado? Sim, e você pode escolher as cores. É muito interessante ver e olhar. Quero dizer, obviamente, não parece muito bom aqui, mas acho que uma vez que o coloquemos, faria muito mais sentido o que essas configurações estão realmente mudando. Acho que esse recurso de vê-lo, visualizar seu botão ou elemento nem sempre está funcionando perfeitamente Então, você deve arrastar e soltar e ver como fica, especialmente se tiver um desfoque de fundo como esse, é bom ver como ficaria Quero dizer, isso é um efeito de vidro. Você pode conferir como fica com algo em segundo plano, e podemos conferir aqui as diferentes possibilidades. Sim, muito bom. Então, só para finalizar, nesta lição, aprendemos como publicar nossa biblioteca, nossa biblioteca de equipe. Isso significa publicar nossas variáveis, estilos e componentes. Isso nos permite publicá-los em um arquivo que pode ser acessado em diferentes arquivos, e aprendemos como atualizar essa biblioteca atualizando os componentes. Então, à medida que trabalhamos e alteramos esses componentes, estilos variáveis podemos seguir em frente e simplesmente atualizá-los e republicá-los, e aprendemos como colocar esses componentes em qualquer outro projeto de design Claro, isso tem suas limitações. Quero dizer, você não pode fazer isso em outra conta ou em uma equipe completamente diferente a menos que seja publicado e adicionado. Então, por exemplo, podemos adicionar as coisas do IOS porque elas estão disponíveis publicamente. Mas se você estivesse em uma conta completamente diferente, teria que acessar essa biblioteca de alguma forma, então ela deveria ser compartilhada de alguma forma. Mas se você estiver na mesma conta, basta adicioná-la aqui, adicionar mais bibliotecas e encontrá-la bibliotecas da sua equipe aqui. Então, espero que você tenha aprendido algo útil e que continue usando esse recurso como quiser, desde que ele o ajude a atingir suas metas equipe e a melhorar seu fluxo de trabalho. Muito obrigado e nos vemos na próxima lição. 7. Autodesk de layout: Olá e bem-vindo a outra aula. Nesta lição, falaremos sobre design responsivo Mais especificamente, falaremos sobre certos comportamentos. Essas são as configurações ou estados fixos de abraço e preenchimento. Não tenho certeza de como alguém os chamaria. Eles são um pouco difíceis de definir e também difíceis de entender. Acho que muitos designers , infelizmente, não conhecem esse recurso. Eles não o usam muito, mas esse é o primeiro e mais importante passo quando se trata de design responsivo Tente ouvir o que estou dizendo, tente absorver, entender, se você não tentar ouvir novamente. Vou tentar explicar esta lição da forma mais simples possível, mas fique à vontade para fazer qualquer pergunta se você não entender mais tarde. Isso é algo que leva muito tempo para ser entendido e só vem com a prática. Então, primeiro de tudo, vamos discutir o que significa design responsivo Design responsivo é o que chamamos, você sabe, de aplicativo ou site ou o que quer que seja, quando você pode esticá-lo para direita e para a esquerda e, você sabe, ele se modifica de acordo Então, para entender isso, quero dizer, podemos ver isso na Figma Então, temos o menu lateral. Você sabe, podemos esticá-lo para a direita e para a esquerda, e ele mantém os mesmos elementos. Nenhum elemento está sendo perdido ou excluído. Mas às vezes, você sabe, se há um texto longo aqui, talvez seja abreviado. Isso não é um problema. Da mesma forma, temos a mesma coisa aqui. Alguns elementos ficam mais longos, enquanto outros mantêm o mesmo tamanho, mas alguns estão alinhados à direita, à esquerda e assim por diante Podemos até mesmo alterar todo o tamanho dessa janela. Se abrirmos o Figma, podemos alterar todo o tamanho do Pigma, e isso ainda fará sentido Ele ainda mostrará todas as informações relevantes de que precisamos. É exatamente disso que estamos falando. Design responsivo é a capacidade de um design se adaptar a diferentes tamanhos de tela, a diferentes condições que tornam menor, maior e mais largo Skinnier, como você quiser chamá-lo. Para entender isso, primeiro, precisamos entender esse conceito aqui, que está relacionado aos layouts automáticos Temos aqui um abraço fixo. Estou me referindo mais especificamente a esse botão. Temos botões aqui. Eles são o mesmo componente que criamos anteriormente no curso. Agora, isso é basicamente um quadro que tem um layout automático, e esse quadro que tem um layout automático tem um elemento de texto dentro dele. Ignore a linha, ignore o ícone, eles estão ocultos. Nós apenas temos uma moldura que tem um layout automático. Ele tem um elemento de texto dentro dele. O que vamos fazer ou o que eu já fiz é definir o elemento de texto aqui para ser corrigido. Tem largura fixa e também podemos fornecer altura fixa. Então aqui temos um abraço. Aqui tem abraço para a largura e abraço para a altura. Agora, apenas como uma nota, você só pode fazer essas configurações quando tiver um elemento. Não importa se é um elemento de texto, pode ser um objeto, pode ser uma linha de forma ou o que quer que seja, tem que estar dentro de uma moldura com layout automático. Então, se criarmos um texto aqui e adicionarmos algum texto, você não poderá fazê-lo abraçar ou preencher. Isso não está disponível. Mas quando chegamos a esse texto, podemos escolher largura fixa, abraçar ou preencher Essas são as coisas às quais estou me referindo. Então aqui, estamos cheios e, pela altura, temos um abraço, o que não importa por enquanto Quero dizer, estamos nos concentrando mais na largura, ok. Então, o que isso significa exatamente? Bem, corrigido é perfeitamente compreensível. Basicamente, significa que tem uma largura e uma altura fixas. Portanto, não importa qual seja o texto dentro dele, ele não mudará suas dimensões. Então, vamos testar isso. Então, eu vou dizer aqui, assine agora. Então, como você pode ver, a caixa em si, a caixa de texto não mudou suas dimensões. O que acontece é que o texto não vai direto, vai para baixo, está bem? E sai da caixa por causa dessa limitação, certo? Portanto, este é um caso claro de combinação errada ou errada ou incompatibilidade Você basicamente configura as configurações, as dimensões desse botão de forma errada. Portanto, não está se comportando de uma forma responsiva ou, você sabe, talvez não responsiva, mas de uma forma correta Agora, chegando aqui, temos o suficiente. Então, temos esse botão com preenchimento e vamos escrever a mesma frase aqui. Vamos escrever, assine agora. Agora, o que você nota aqui é que temos um comportamento diferente, resultado diferente do corrigido. Agora, aqui nós dissemos que ele deveria ser preenchido. O que isso significa basicamente, diz, preencha o espaço o máximo que puder. Estenda-se o máximo que a moldura permitir. Agora, a moldura não permite muita coisa. É basicamente limitado. Está consertado. Mas, enquanto isso, a altura é enorme. Está configurado como um abraço. Isso significa que abraçar significa que você pode estender o quanto precisar Então, como escrevemos subscrever vez em quando, o quadro é limitado , então o texto caiu, mas a caixa caiu com ele. A moldura foi e ainda a embrulhou. Como você pode ver, essas são as diferenças, algumas das diferenças. A forma como a caixa aqui está se comportando é dizer que esta é a caixa de texto, não está mudando O texto sairá da caixa de texto porque não há lugar para estar, mas não vamos mudar nada Os tamanhos serão todos iguais. Essa é uma forma muito estática. Está morto. Não reage de forma alguma. Isso aqui é um pouco melhor porque embora não exibisse o texto como gostaríamos que fosse exibido, ele ainda desapareceu e a caixa desceu com ele. O tamanho do botão ajustado com o texto. Isso é um pouco melhor. Mas eu gostaria que você notasse o que acontece quando eu estendo a caixa. Como você pode ver, agora, a caixa tomou forma, a forma avançou e ficou normal. A caixa de texto voltou ao tamanho normal. Enquanto isso, quando estendemos este, nada acontece. Por quê? Porque tem um tamanho fixo. Não vai mudar, não importa o que aconteça. Mas aqui está configurado como preenchido. Diz basicamente que, se houver espaço, vou estender minhas pernas. Se não houver espaço, eu vou ficar apertado neste lugar. Isso é exatamente o que acontece. É apertado, mas aqui tem espaço, então está se Isso é o que está acontecendo. Agora, vamos dar olhada nesse botão aqui. Vamos ver o que isso faz. Temos o botão aqui configurado como abraço. O que acontece aqui seria se inscrever agora. Tem o comportamento perfeito porque o texto não cai porque os botões, via de regra, botões não deveriam ter várias linhas. Idealmente, eu não deveria estar inscrito e , na próxima linha, não deveria haver várias linhas ou Você pode ver que esse botão vai junto com ele. A moldura do botão se estende com ele. Essa é uma das diferenças que você tem e está relacionada não apenas a objetos de texto ou elementos de texto, mas também a todos os tipos de elementos que têm o mesmo comportamento Recapitular. Nós fixamos o abraço e o preenchimento correção faz com que o tamanho do texto permaneça exatamente o mesmo enquanto o Hug se estende com o texto Mas há um problema com o Hug é que você pode escrever para o infinito Nunca vai cair. Isso pode ser um problema mais tarde , porque e se você tiver um elemento muito, muito longo? Deve cair em algum momento. Mas para esse caso de uso específico, temos aqui um botão. Você sabe, como regra geral, seu botão não deve ser muito longo. Está bem? Então, isso não é um problema para isso. Enquanto Phil, você sabe, Phil é inteligente porque reconhece o limite do quadro Não vai além do limite. Portanto, é ideal, mas não com quatro botões. Então, isso é apenas uma recapitulação. E o legal é que, com o abraço, você não precisa ajustar a moldura, certo? A moldura já está sendo ajustada sozinha. Então, se você excluir algo, ele será ajustado. Enquanto isso, com o preenchimento, se você excluir algo, o quadro não segue, então você precisa ir em frente e fazer isso sozinho, o que pode não ser muito preciso e não é ótimo. Você está fazendo tudo em duas etapas. Essa é uma das principais diferenças. Você pode praticar isso e ver onde a caixa de texto limita, não apenas a aparência geral, mas veja a caixa de texto aqui, corrigida aqui Continuou. Eu continuei puxando os elementos Se tivesse mais texto, ele o abraçava, o continha Enquanto isso, aqui está preenchendo, mas desde que a moldura tenha espaço. Olha, mesmo que o texto esteja até aqui, o elemento de texto está indo além, vai até o final do quadro, e é isso que significa preenchimento. Preencha todo o espaço. Se houver água, encha toda a área com água com o que quiser. Isso é o que está acontecendo aqui. Considere isso, pense nisso nesse termo. Se houver algum espaço, se houver uma garrafa, ela será preenchida. Agora, vamos seguir em frente e tentar criar nossos próprios elementos. Gostaria apenas de lembrar que isso não é tão fácil porque você a moldura que também tem conteúdo fixo ou de abraço, e também tem os elementos dentro dela, que também têm opções fixas de abraço ou preenchimento Isso não é tão fácil. Mas vamos tentar explicar isso um pouco mais. Então, aqui eu tenho um cartão. Portanto, este cartão mostra uma avaliação, nome, sobrenome e conteúdo da avaliação, a avaliação real. Esse é apenas um exemplo da aparência de uma avaliação. Agora, vamos copiar isso e dar um nome a ele. É chamado de revisão, e vamos colocá-lo nesta pequena moldura aqui, ok? Vamos torná-lo maior. E o que vamos fazer agora é testar isso um pouco, certo? Então, vou escrever um nome aqui e esse nome deve ser Jonathan Simpson, Élder Não sei, só estou escrevendo coisas. Então você vai notar, espere um minuto, isso não é adequado. Quero dizer, está saindo da moldura. Isso é um problema porque temos aqui várias coisas para examinar a anatomia, há uma moldura aqui Você pode ver isso. Esse é o quadro principal. Depois, há um elemento de texto e, em seguida, outro quadro com um layout automático. Esse quadro tem um círculo, uma elipse e um elemento de texto e, em seguida, você tem o conteúdo da revisão, o quadro principal tem um layout automático com três elementos, texto, quadro um e conteúdo da revisão Vamos dar uma olhada e tentar entender onde está o problema. Portanto, o principal problema que está acontecendo aqui é que isso está se estendendo demais. Então, para corrigir isso, precisamos clicar nesse elemento e ver o que ele tem? Bem, tem um abraço. conteúdo do abraço está fazendo com que ele se estenda, continue e continue Tudo bem? Agora, vamos ver o que acontece quando o consertamos. Agora, o que aconteceu com fixo é que de alguma forma ele tem o número 162, e isso é porque esse é o número original, ok? Porque quero dizer, no quadro aqui, era 162. Então, basicamente, ele vai se alternar ao tamanho original. Ou aqui, você pode ver 162. O que acontece quando colocamos o recipiente de enchimento? Como você pode ver, ele se adaptou à moldura em que está e dizia: vou encher o recipiente, mas não vou ir além dele. Em vez disso, vou para uma segunda linha. Agora passou para uma segunda linha. Agora, vamos voltar e manter isso em um abraço. Agora, há outra maneira de resolvermos isso. Quero dizer, se você pensar bem, o problema é que o quadro não contém essas coisas. Talvez a moldura, em vez desse texto, seja menor. Quero dizer, não podemos torná-lo menor. Talvez queiramos fazer a moldura um pouco mais longa. Isso também pode funcionar. Mas não devemos fazer isso manualmente movendo-o. Eu vou voltar. O que devemos fazer é talvez, quero dizer, vamos ver, consertado, já está corrigido. Queremos que seja um pouco mais interativo. Ou ele deve abraçar o conteúdo ou encher o recipiente. Bem, vamos fazer com que ele encha o recipiente. OK. Agora você vê que o que aconteceu foi que todo esse quadro é um contêiner. É uma moldura com layout automático, que avançou e se estendeu por toda a moldura. Ocupou todo o espaço. Mas o resultado aqui é que agora temos muito espaço em branco vazio que talvez não seja necessário. Então, como você conserta isso? Bem, vamos colocar conteúdo de abraço. Bem, o conteúdo do abraço não fez nada, certo? Bem, está abraçando o conteúdo? Vamos verificar. A avaliação está disponível até aqui. Está bem? E há acolchoamento nas laterais, só para que você saiba, há 24, 24 de cima para baixo, 24 da direita e da esquerda Ok, então a revisão está sendo contida. E então esse texto também está sendo contido, bom, e olhamos aqui, há um problema aqui. Bem, esse texto não contém os elementos dentro dele, os elementos estão saindo. Talvez também devêssemos fazer com que isso tenha um conteúdo incrível. Simples assim, nós consertamos isso. Portanto, abraçar o conteúdo significa se estender tanto quanto os elementos dentro de você Então, só para recapitular, se houver um nome longo , você deve se adaptar a esse nome longo e se tornar mais Você deve saber que, como uma moldura, você deve contê-la. Então, quando abraçamos o conteúdo, ele o contém e, em seguida, a moldura externa também deve abraçá-lo Então, quando você tem vários elementos um no outro, vários layouts aninhados um no outro, você precisa dizer que eles se contêm, como se abraçasse o conteúdo dentro você precisa dizer que eles se contêm como se abraçasse o conteúdo Então aqui temos um abraço e aqui temos um abraço. Vocês estão se abraçando, ok? Então, vamos verificar esses elementos. Bem, talvez vamos escrever uma resenha aqui, eu vou escrever. Gostei muito do filme. Foi absolutamente incrível e agradável, blá, blá, blá Então agora você começa a se deparar com alguns problemas. Você provavelmente já percebeu. Estou apenas orientando você no processo de criação de um elemento e entendendo como essas coisas se relacionam com o elemento. Bem, temos vários problemas. Um problema é que, se você observar o elemento, ele não está ocupando toda a área. O segundo problema é que ele está se estendendo além da linha, além da moldura Agora, se você se lembra disso além do problema da moldura, já resolvemos com o nome, a solução foi usar o abraço A opção de conteúdo do abraço. Então, agora já temos grandes conteúdos, mas isso é para a largura Agora temos que usar a mesma coisa para a altura. Assim como quando fazemos isso, problema é resolvido imediatamente Isso cai. Se encurtarmos esse texto, ele vai subir. Isso torna o elemento um pouco responsivo com você. Agora, a moldura geral ou a mais alta abraçada nos dois lados em termos de largura e altura Mas ainda temos outro problema, como dissemos, isso não está ocupando todo o quadro. Como fazemos isso? Muito fácil. Bem, isso não é resolvido pela opção de abraço, porque Hug vai mantê-la na mesma linha Com texto, quando se trata de texto, ele simplesmente permanecerá na mesma linha. Mas esse cartão não parece muito bonito, sendo muito longo, especialmente se dobrarmos o texto aqui, ele se estenderá até o infinito. Eu só vou voltar, vou desfazer. A solução, em vez de usar conteúdo fixo de W ou abraço, é usar um recipiente de enchimento Então, quando você enche o recipiente, ele diz, preencha a área que está aqui, que está vazia, certo? Então, se consertarmos, o fixo permanecerá exatamente o mesmo, não reagirá. Mas quando preenchermos, ele dirá não, preencha apenas a área disponível. E, no momento, essa é a única área disponível. Então, se adicionarmos mais texto, ele se estenderá e ocupará a área disponível. Você vê do que eu estou falando? Então, trata-se de projetar esses elementos de forma que atendam às suas necessidades, entendendo que, ei, talvez o nome não deva ser colocado em duas linhas. Quero dizer, não importa o tamanho do seu nome, ele ainda deve se estender. Mas entendendo isso, ei, sua avaliação não deve ser longa, muito ampla, mas talvez devesse cair em vez de ir para a direita, ela deveria cair. E isso é basicamente todo o uso desses elementos. Portanto, fixo é ótimo, largura ou altura fixas, mas é muito rígido. É estático. Não muda por si só. É por isso que usamos elementos de abraço e recipiente de preenchimento para nos permitir dizer a esses elementos como eles devem se comportar em relação uns aos outros E só para que você saiba, também há a oportunidade encher o recipiente até a altura. Isso também é uma possibilidade. Então, quando você diz encher o recipiente pela altura, o que ele faz é, agora , não fazer nada, mas vai enchê-lo se houver espaço para ele. Então, se estendermos isso aqui, por algum motivo, nós o estendemos. Verificamos o elemento e você vê que a caixa de texto já preencheu a Então pegou e disse: Ei, isso é meu. Você sabe, eu não vou dar isso a ninguém, ok? Agora, vamos voltar. Vamos desfazer isso. Então, neste momento, o cartão não está ruim. Quero dizer, não é perfeito. Vamos configurar isso como preenchimento. Mas não é ruim. Está funcionando para nossos propósitos. Se reduzirmos o nome, quero dizer, Élder John, eu não sei o que é isso, ainda parece muito bom, certo? Então, reduzimos o nome para que possamos ler a resenha e tudo ficar perfeito. Bem, agora vamos jogar, vamos dar um passo adiante e jogar com mais alguns elementos. Então, o que podemos fazer é copiar isso e colar, então estou copiando esse elemento. E só para avisar, como mencionei, fiz de todo esse quadro um layout automático, mas tem largura fixa, então não vai reagir a eles, ok? E agora temos esses dois objetos. Então, agora podemos fazer uma coisa interessante, ok. Então, o que é essa coisa, talvez você esteja olhando para esse design e dizendo, bem, você sabe, há algum espaço em branco aqui. Está simplesmente vazio. Está apenas sentado lá. Por que não o preenchemos? Mas se eu adicionar outra avaliação, ela será cortada. Eu não quero isso. Quero duas resenhas e quero que ocupem o espaço. Bem, há uma maneira de fazer isso. Então escolha esses dois elementos e vá em frente Em vez de abraçá-los, eles basicamente estão apenas abraçando seu conteúdo, eles são tão largos quanto o conteúdo precisa que sejam Vamos dizer encher o recipiente. O que vai acontecer aqui é que os dois tentarão preencher o espaço o máximo que puderem. O resultado que temos é que os dois estão lutando pelo espaço. A regra geral quando se trata do Figma é que, quando você tem dois elementos em um layout automático configurados para preencher o espaço, o que acontecerá é que eles ocuparão 50% e 50% Essa é a ideia geral. Se continuarmos copiando e colando isso e depois tivermos três elementos, agora eles ocuparão 30%, 30%, 30%. Obviamente, excluindo o espaçamento porque há espaçamento entre eles, são dez pixels Mas agora parece um pouco estranho se você notou, porque agora o nome é muito longo e porque o configuramos para encher o recipiente, mas não para realmente abraçar o conteúdo. Ele não se importa com o conteúdo dentro dele, só se preocupa em encher o recipiente. Isso é um problema porque, ei, acabamos de aprender como tornar as coisas responsivas e agora estamos quebrando. Bem, isso é uma parte natural do uso dessas tecnologias. Existe uma solução para isso. Uma solução é escolher todos esses elementos. Em vez de ter isso como um abraço, podemos transformar isso em preenchimento Em seguida, vamos escolher o texto e também transformá-lo em preenchimento, então isso fará com que o texto aqui tenha duas linhas. Então, vamos dizer a altura também para abraçar, porque você vê que ela está se estendendo além da Vamos dizer à moldura, não abrace tudo em termos de altura, e então ela vai ocupar a altura e, desse jeito, temos elas ocupando o espaço adequado Quero dizer, agora eles não estão parecendo malucos, não estão saindo da moldura e estão bem dentro de sua Você pode simplesmente mantê-lo como está agora. Agora, a outra solução basicamente é escolhê-los e ir até aqui. Agora vou te ensinar uma coisa completamente nova, que é o mínimo e o máximo. Ok, então para largura e altura, você sempre tem a opção de adicionar uma largura mínima ou uma largura máxima. Agora, neste caso, temos três elementos que estão lutando pelo espaço, e isso está fazendo com que sejam menores do que o pretendido, talvez não devessem ser pequenos. Esse tipo. Então, o que podemos fazer é adicionar uma largura mínima. No momento, estamos em 220 por volta de. Está bem? Então, podemos dizer: Você sabe o que? Você não tem permissão para ter menos de 300. Então, agora estamos definindo a largura mínima de todos eles como 300. Como você pode ver agora, ele fica menor até 300 e depois para. Mas o resultado é que um deles está escondido. Agora, isso tem uma solução fácil. Escolheremos a moldura que contém todas essas cartas e viremos aqui e escolheremos essa opção chamada monótona O que isso faz é pegar todos os elementos que não são adequados e colocá-los no chão. Agora você tem os elementos que parecem muito responsivos, preenchendo o quadro bem o suficiente, mas sem se distorcerem Veja o que acontece quando copiamos e colamos isso, ele se organiza exatamente como os acima, perfeitamente E quando copiamos e colamos novamente? Ele coloca um no chão, e eu vou te mostrar como é, e assim por diante. É o mesmo princípio. Basicamente, é assim que você pode usar esse design responsivo e usar mais especificamente a opção de conteúdo do abraço, a opção de preenchimento do contêiner e as opções mínima e máxima para garantir que esses elementos interajam adequadamente entre si e não fiquem distorcidos Agora, da mesma forma, vamos voltar um pouco. Vamos deletar isso aqui. Há algo que podemos fazer. Eu vou escolher todos eles. Basicamente, quando você pensa sobre isso, pode-se dizer que uma avaliação nunca deve ser tão longa. Quer dizer, pode ser longo , não precisa ser 300, mas nunca deveria ser tão longo. A solução é basicamente ir aqui e adicionar uma largura máxima e dizer: Você sabe o que? Deve estar entre 300 no mínimo e entre e 400 no máximo. O que acontece aqui é que você vê que esta avaliação não tem mais de 400 e, quando a copiamos e colamos, ela não fica menor que 300. Veja o que acontece quando eu prossigo e estendo todo esse quadro. As cartas ficam um pouco mais longas para 400 e depois param. Então, quando eu tenho um pouco mais de espaço, eles agora têm três colunas diferentes. Eu faço mais, e então temos quatro colunas diferentes. E quando isso o torna menor? Você vê isso? É exatamente disso que estou falando. É toda a ideia de capacidade de resposta, o fato de que toda a moldura, assim como os elementos dentro dela, estão reagindo às mudanças de tamanho e parecem muito suaves Obviamente, não é perfeito, mas você pode ver que está se organizando de forma responsiva É como um ser vivo. E não é, você sabe, o que normalmente as pessoas fazem, o que muitos designers fazem. Infelizmente, eles criam isso e recebem a avaliação, colocam aqui, copiam e colam e colocam aqui. E então eles dizem, opa, você sabe , não está no meio, então eu vou movê-lo para o meio Vou colocá-lo aqui, e depois vou copiá-los, colá-los e trazê-los para baixo. E então eu vou copiar todos eles, colá-los, trazê-los para baixo. Opa, estou apenas me certificando de que todos os espaços estejam perfeitamente alinhados E o que acaba acontecendo é assim que você prolonga isso , você tem que pensar: o que eu faço agora? Bem, eu trago esses aqui? Bem, eles meio que se encaixam. Mas então o que eu faço com eles? Quanto tempo eles deveriam demorar? Agora, eu tenho que descobrir esse longo, aquele longo, completamente mais longo. E então, quando eles dizem: Oh, vamos torná-la uma versão móvel, e então eles precisam repensar tudo desde o início Este é um exemplo de design ruim que não é responsivo, design ruim que não responde Vamos torná-lo um pouco maior. Aqui está um exemplo de bom design responsivo. Você sabe. E só para, você sabe, esse quadro não é uma tela, não é uma página. Provavelmente é apenas um elemento dentro de uma página, ok? Então, eu não acho que esse seja o design completo. Isso não parece um design completo, mas, você sabe, é basicamente assim que você faz. Quando se trata de design responsivo, é garantir que as coisas sejam elásticas e flexíveis e que reajam ao toque Esses são os princípios básicos do design responsivo usando layouts automáticos Agora, há muito mais do que isso. Pegamos o exemplo de um cartão de avaliação e pegamos o exemplo de um botão. Mas é muito mais profundo do que isso, ok? Você precisa apenas entender os três modos principais diferentes. Você pode ter um tamanho fixo que nunca muda, ou você pode ter um abraço, que só muda de acordo com o que está dentro dele Se houver texto, ele abraça o texto dentro dele. Se há elementos, elementos de design, objetos, então ele os abraça Mas geralmente, quando se trata de texto, ele não vai para uma segunda linha. Simplesmente continua indo e vindo. Quando se trata de encher, diz apenas: vou encher o recipiente o quanto estiver disponível. Eu não vou além disso, e se não houver espaço suficiente, vou para uma segunda linha, uma terceira linha, quarta linha. Essa é basicamente a ideia geral. Depois de entender isso, depois de internalizá-lo e compreender do que se trata, você pode começar a criar seu próprio design responsivo. Agora, na próxima lição, falaremos um pouco mais sobre restrições e pontos de interrupção, que também estão relacionados ao design responsivo. Então vá em frente e tente praticar isso, tente entender isso um pouco melhor. Então, na próxima lição, discutiremos toda essa outra parte do design responsivo, que ainda está muito relacionada ao que falamos, mas está um pouco mais longe dos layouts automáticos Não depende totalmente deles. Eu também adoro layouts automáticos, e acho que você também deveria, porque eles são seus amigos Eles ajudam você e fazem milagres. Há algo que torna a Figma especial que destaca entre a concorrência É por isso que é uma ótima ferramenta para usar. Mas, como eu disse, na próxima lição, falaremos um pouco sobre restrições e pontos de interrupção, se você não souber o que são, e vamos ver na próxima Também teremos um exemplo mostrando em tempo real como podemos criar uma página da web ou uma resposta de aplicativo. Então, aqui, criamos uma pequena seção com esses seus cartões de visualização. Mas nas próximas aulas, vamos fazer isso com um projeto de design real, e é só para praticar. Sabe, quando digo real, estou dizendo realista. Não quero dizer que seja um projeto real que será construído, mas apenas algo para darmos uma olhada. 8. Restrições e pontos de interrupção: Olá, bem-vindo a outra aula do curso avançado Figma Nesta lição, falaremos sobre pontos de interrupção e restrições Agora, na última lição, falamos sobre design responsivo e como podemos conseguir isso por meio de layouts automáticos, meio de conteúdos de abraços e configurações do tipo de contêiner de preenchimento Você ainda não viu isso, vá em frente e veja, mas isso é uma continuação, embora não seja exatamente a mesma coisa Ainda estamos falando sobre design responsivo. Aqui estamos nos livrando dos layouts automáticos. Quero dizer, podemos usar layouts automáticos, mas isso não precisa depender totalmente Estamos usando principalmente, por enquanto, o que chamamos de restrições As restrições são basicamente maneiras pelas quais podemos nos comunicar com o Figma e configurar as coisas de forma que, sem layouts, possamos garantir que os designs sejam responsivos e que estejam reagindo Às mudanças em seu ambiente, especificamente às mudanças na moldura ou no tamanho da tela. Como você pode ver agora, eu construí um elemento aqui que mostra um produto, um matcha, uma mistura maravilhosa de sabores, e você pode encomendá-lo agora, e há um preço Reserve um minuto para analisar e entender esse elemento. É apenas um elemento completamente isolado que eu criei muito rapidamente e não tem dimensões perfeitas, mas você entendeu criei muito rapidamente e não tem dimensões perfeitas, mas você entendeu Você entende para onde isso está indo. Agora, o que vamos tentar fazer é tentar entender quais são as restrições, primeiro de tudo, e depois, entendendo as restrições, vamos tentar entender como podemos tornar isso um pouco mais responsivo, só para podemos tornar isso um pouco mais responsivo, que você saiba que a capacidade de resposta nunca é um atributo nunca Não se trata de ser responsivo ou não responsivo, mas há níveis É como um espectro. Há uma capacidade de resposta muito, muito boa ou uma alta resposta, e depois há uma baixa capacidade de resposta Você não pode ser totalmente perfeito, mas tentamos ser quando se trata de realmente fabricar produtos. Tentamos ser, mas às vezes somos muito limitados em termos de FiGMA e só precisamos garantir que os desenvolvedores façam seu trabalho corretamente O Gmas é muito limitado, mas com a codificação, com a programação, podemos obter uma capacidade de resposta muito maior O que são restrições? Ao clicar em qualquer tipo de elemento em um quadro que não tenha um layout automático, você notará essas linhas pontilhadas Basicamente, são cordas que penduram seu elemento. Você pode ver uma corda de cima e da esquerda. Essas são suas restrições. Eles estão basicamente aqui, você pode escondê-los daqui. Ou você pode abri-los e isso mostra que lado desse quadro esse elemento está amarrado. O que isso significa? Bem, quando mudamos o tamanho, nada acontece. Mas eu gostaria que você notasse o que acontece quando eu altero o tamanho de cima para cima. Você vê isso? O elemento está subindo com a parte superior. Mas quando eu mudo de baixo para baixo, nada acontece. É estático. Da mesma forma, direita e esquerda da direita, nada acontece da esquerda, o elemento vai com ela. Isso é o que está basicamente acontecendo: está amarrado e esquerdo e você pode mudar isso amarrando-o. Agora está amarrado para baixo e para a esquerda. Agora, quando eu o movo para baixo, movo o lado inferior, ele se moverá ao longo do lado. Ele vai se mover com ele, da mesma forma aqui. Agora ele vai se mover com o lado direito. Essa é uma coisa principal que podemos fazer. Então, só para dar uma ideia, eu posso copiar isso e colocar aqui, e então eu posso dizer, isso deve ser amarrado na parte superior e à esquerda. Isso deve ser amarrado na parte superior e à direita. Então o que acontece é que eles estão separados. Ok, agora está se estendendo o quanto quisermos, e isso está ficando para a direita, essa coisa para a esquerda Mas, para ser sincero, o que acontece na maioria das vezes é quando você torna essa forma muito pequena, ela se sobrepõe, certo? Então é disso que estou falando, isso não é perfeito porque sem layouts automáticos, você não pode obter capacidade de resposta total Então isso é meio que a metade da solução, ok? E se você realmente quer fazer um bom design responsivo, você deve usar restrições e layouts automáticos a seu Então, como mencionei, o que acontece aqui é que você está apenas brincando com ele e ele vai para o lado, que é ótimo, mas não é totalmente responsivo. Nós podemos fazer a mesma coisa aqui. Podemos copiar isso colado aqui e amarrá-los na parte inferior. Deixe-me, quando você clica em Controle, isso desativa as restrições Você pode dimensioná-lo sem restrições. Sem controle , tudo acontece. Você vê do que estou falando. Agora temos, em cada lado , um elemento e ele vai com eles. Mas essa não é uma solução perfeita. Uma solução melhor seria colocar tudo isso, colocá-los em um layout automático. Então, como você pode ver agora, há uma embalagem que diz que, se não há espaço suficiente, coloque-a no chão e, em seguida, temos que configurá-la de forma responsiva Mas vamos dar um passo atrás e remover tudo isso. Vamos simplesmente excluí-los e trabalhar com um. Agora, existem diferentes configurações de restrição. Falamos sobre esquerda para cima para baixo, mas também há meio. Você pode escolhê-lo aqui ou aqui. Agora, há a opção de fazer para a esquerda e para a direita. Então, o que acontece aqui é que está empatado dos dois lados. OK. O que você vê agora é que ela se separa ou estende o elemento dentro dela. Mas essa é uma das opções. Nós podemos fazer o centro. Agora, no centro, ele não estende o elemento em si, não o estica, mas apenas tenta mantê-lo no centro. Obviamente, não está no centro. Está aqui, mais no primeiro terço e tenta garantir que esteja sempre no primeiro ou entre o primeiro e o segundo terço Essa é outra opção e, em seguida, temos escala. A escala tem mais a ver com ampliá-la. É muito semelhante à esquerda e à direita, e basicamente diz que, mais que você pegue, vai se esticar. Se você torná-lo menor, ele também ficará menor Temos as mesmas configurações para cima e para baixo. Deixe-me configurar isso como à esquerda. Então, também podemos fazer escala. Você pode ver que está aumentando. Nós podemos fazer por cima e por baixo. Também está se alongando e podemos centralizar. Centros tentando mantê-lo na mesma posição mais ou menos no centro. OK. Então, essas são apenas algumas opções. Mas, como você percebe, quando o estamos esticando, ele não está realmente se alongando adequadamente. Está ficando distorcido. Então, podemos tentar resolver esse problema. A maneira de fazer isso é entrar nesse elemento dentro desse quadro e clicar nos objetos dentro dele. Agora, isso não é um layout automático. O que fizemos aqui foram todos layouts automáticos. Aqui, eu queria te ensinar mais sobre restrições. Mesmo esse quadro não tem um layout automático. Está vendo esse botão? Não está alternado O que vamos fazer é escolher essa imagem e tentar configurar as restrições para ela porque ela tem uma restrição, mas os elementos dentro dela também têm restrições mas os elementos dentro dela também têm Pergunte a si mesmo : o que você quer que aconteça quando ampliarmos todo esse quadro? A imagem deve ficar no meio ou deve se estender? Bem, acho que deveria se estender. Eu diria escala. Agora, vamos ver. Como você pode ver, a imagem está aumentando. Agora, não podemos controlar o foco da imagem, como você pode ver, ela está centralizada Obviamente, quando o ampliarmos , não será mais visível que tipo de produto é esse. Mas vamos ignorar isso por enquanto. Podemos ter fotos melhores mais tarde. Mas, por enquanto, isso é bom o suficiente, fizemos essa escala. E quanto à parte superior e inferior? Quando a movemos, a imagem também deve se mover conosco ou deve permanecer a mesma? Bem, acho que se o tornarmos menor, ele deve ficar menor. Como poderíamos fazer isso? Bem, vamos testar a escala e ver como ela funciona. Ok, isso não é tão ruim. Vamos experimentar outra coisa. E quanto ao centro? Bem, o centro faz com que ele saia da moldura, que não é bom, estamos ignorando esses outros elementos Agora, vamos chegar até eles. E quanto à parte superior e inferior? É tudo uma questão de tentar. Agora, eu realmente gosto de cima e de baixo aqui. Aqui você pode ver a diferença. A razão é que, em primeiro lugar, deixa aqui um espaço igual. Isso não o torna menor e também não torna as margens aqui menores Então, quando comparamos agora com a escala, é assim que ficaria. Como você pode ver, parece muito semelhante, mas antes de tudo, essa área agora era completamente menor, então não há mais espaço para o texto, e você pode ver que as margens aqui também ficaram menores, as dimensões aqui estão confusas Mas vamos voltar para cima e para baixo. Vamos escolher a parte superior e inferior aqui. E você pode ver que as margens da parte superior, esquerda e direita ainda são as mesmas e essa área do texto está intacta Isso é perfeito. O que escolhemos aqui por enquanto? Escolhemos a escala para a direita e para a esquerda e para a parte superior e inferior, escolhemos a parte superior e inferior. Perfeito. Agora vamos ao que interessa. Agora, uma coisa que eu sei é isso deve ser amarrado na parte inferior. Isso sempre deve ficar na parte inferior e não deve ser esticado, não vamos fazer escala e não vamos fazer parte superior e inferior O que vamos fazer é apenas o fundo. Agora vamos testá-lo. Agora, não importa o quanto mexamos com isso, vai ficar no fundo E quando a esticamos para a direita e para a esquerda? Não está se alongando? Bem, queremos que se estique. Isso significa que podemos fazer escala ou podemos fazer para a direita e para a esquerda. Vamos testá-lo. Mas um problema com a escala é que, à medida que a escalamos, você pode ver o espaçamento, as margens aqui também estão ficando maiores, a mesma coisa com a imagem Então, vamos escolher os dois e vamos dar a eles a esquerda e a direita. Agora, quando as escalamos, as margens ficam intactas. Isso é perfeito. Agora, vamos descobrir o que podemos fazer com eles também. Uma coisa que eu sei é que eles devem estar amarrados à esquerda. Eles não deveriam estar exatamente esticados ou talvez devessem. Vamos ver. Vamos amarrá-los na parte inferior por enquanto. Podemos ver que eles estão amarrados na parte inferior, o que é perfeito, e vou fazer com também estejam amarrados na parte inferior. Essas são as restrições e funcionam perfeitamente quando redimensionamos as coisas nessa direção Até aqui, então você não pode mais ver a foto. Mas até aqui, acho que é muito bom. Mais do que isso, então a coisa toda está confusa. Isso é o mínimo, podemos definir isso como um tamanho mínimo, mas como você pode ver, você pode estendê-lo, torná-lo muito maior, sem problemas. E quanto à direita e à esquerda? Bem, não há problema com eles, mas talvez os cinco devam estar ligados à direita. Nós podemos fazer isso. Basta clicar com o botão direito. Agora, o preço sempre vai para a direita, para a mais direita, e esses ficam à esquerda, o que faz sentido. Bem, até aqui. Isso é um problema. Infelizmente, não resolvemos isso sem um layout automático, precisamos de um layout automático para isso. Se voltarmos, o que podemos fazer aqui é colocá-los em um layout automático, e podemos dizer esquerda e direita. Agora eles vão se estender e você pode ver que isso para aqui e então podemos dizer que Ap. Rap significa que, assim que estiver muito apertado, o preço deve cair. Como você pode ver agora, o preço caiu, mas está um pouco confuso porque as configurações aqui estão confusas Aqui, diz automático, mas para o espaçamento vertical, é 58, o que não faz sentido Então, vamos fazer 16 ou oito. Mas então o número será obscurecido pelo botão Então, de preferência, devemos também colocar o botão, você sabe, eu só vou controlar Z, só vou voltar um pouco. Então, só para recapitular, vamos fazer esse espaçamento oito, e vamos fazer disso um layout automático com dois, e vamos dizer esquerda e direita e amarrá-lo na parte inferior Agora, vamos ver o que acontece. Vamos torná-lo muito mais amplo, ainda funciona. Quase pequeno demais. Agora funciona, mas agora a macha tem um problema. Esfix, pegaremos a macha, vamos cortá-la, adicioná-la aqui e colocá-la acima Com os botões de seta, você pode simplesmente baixá-lo ou levantá-lo ou apenas com o mouse. Vou apenas diminuir o espaçamento entre eles, talvez quatro Agora vamos ver a parte inferior esquerda e direita. Teste novamente, trabalhos mais amplos. Que tal pequeno. Como você pode ver, funciona, mas ainda atinge a imagem, o que é um problema. What About funciona perfeitamente. Tudo bem. Então, a última etapa a fazer é também pegar tudo isso, cortá-lo e adicioná-lo a tudo isso nesse layout automático. E então o que faríamos é, você sabe, testá-lo. Vamos apenas testá-lo. Agora não está se estendendo conosco para a esquerda e para a direita. Que tal para baixo? Também não está se estendendo. O que faremos aqui é clicar nele e dizer, encher o recipiente para a direita e para a esquerda, vamos trazer isso até aqui. OK. Então, agora vamos ampliá-lo. Funciona. Perfeito. Que tal derrubá-lo? Não funciona. Aqui, o que faremos é também pedir que ele encha o recipiente em termos de altura. Agora, a direita e a esquerda funcionam para cima e para baixo não funcionam. O motivo é que precisamos mudar as restrições e aqui vamos dizer superior e inferior Vamos ver agora. Perfeito. Eles não são afetados. Todos esses elementos não são afetados, mas a imagem fica maior e reajusta o tamanho de acordo com a Eu acho que essa é uma solução muito boa. Ainda é limitado quando você chega aqui, mas acho que você deve sempre ter um limite para suas cartas. Quero dizer, eles não devem ser menores do que um certo número. Ao criar seu cartão, você deve entender isso. Mas podemos otimizar ainda mais isso fazendo esse preenchimento. Está bem? Então, estamos meio que recapitulando algumas lições, você sabe, da última aula que tivemos E sim, basta usar essas duas coisas, restrições e usar layouts automáticos para descobrir Está bem? Talvez seja trapaça, talvez não Mas acho que essa é a solução ideal. Tudo bem. Então, essa é uma maneira de fazer isso. E é aqui que as restrições podem ser muito úteis. É o fato de que você pode dizer exatamente como se comportar. E agora, o que podemos fazer é também fazer restrições para todo o quadro Então, se fizermos a moldura aqui, você sabe, por exemplo, uma moldura de telefone, e uma moldura de telefone geralmente tem cerca de 300, digamos, cerca de 390 93, 393 Nós podemos fazer isso. O que podemos fazer é ajustá-lo para ser esquerdo e direito. Então, isso é para a esquerda e para a direita, essas são as restrições, e para cima e para baixo, será apenas o Agora, quando passarmos do telefone para o tablet, é isso que vai acontecer. Basicamente, estenderá o cartão. Essa é uma maneira de fazer isso. Outra maneira de fazer isso, como fizemos antes, é copiar e colar isso e montá-lo como um layout automático. Podemos até mesmo copiá-lo e colá-lo ainda mais. É assim que ficaria em um telefone. Então, o que vamos fazer é dizer que isso deve ser horizontal. Como você pode ver agora, é horizontal, mas está bagunçado, mas vamos dizer embrulhar Não está embrulhando, não está caindo. O motivo é porque eles estão configurados para serem preenchidos sem o mínimo. Vamos dizer que não, você sabe, deveria haver um limite. Como eu disse, deveria haver um limite. Nunca deve ser aberto. Oh, pode ser tão pequeno quanto possível. Não. Tem que ter, por exemplo, 200 como o menor limite. Veja o que acontece agora quando chamamos isso aqui de celular e depois vou copiar e colar. Então, isso é o que são os pontos de interrupção. Vamos dizer: Ok, é assim que ficaria no celular. Mas então, quando entrarmos no tablet, vamos estender a tela. OK. Desculpe, nós só vamos consertar isso, estragou tudo. Vamos corrigir as restrições. Vamos dizer esquerda e direita. Agora, quando estendermos isso, isso se estenderá conosco, como você pode ver. Isso é ser responsivo. Se você tiver um telefone pequeno, ele ficará assim. Isso é o menor que pode. Eu não posso ser menor do que isso. Se você tiver um telefone maior, ele ficará assim. Se você tiver um tablet, ele ficará assim, como você pode ver. Agora você pode ver que este é o iPad M e, em seguida, este é o modo paisagem adequado do iPad, seja ele qual for. Agora, obtivemos um efeito muito semelhante ao que tivemos em termos desses layouts automáticos Conseguimos isso aqui e esse é, por exemplo, o modo tablet. Esses são pontos de interrupção. Isso é o que chamamos de pontos de interrupção. Agora, falamos sobre restrições Os pontos de interrupção definem certos números que seu design se separa ou não, mas se separa da visualização móvel e se transforma ou se transforma em uma visualização de tablet Então, o que fizemos agora foi um bom design responsivo ou bom design responsivo de ponta, porque o configuramos de forma que esses elementos se encaixassem Se adicionarmos mais elementos, se adicionarmos mais elementos a esse quadro, eles também devem se encaixar Não importa como redimensionemos isso. Mas, alternativamente, poderíamos dizer que no tablet deveria ser isso, no PC, deveria ser assim. Só para dar um exemplo, vamos criar uma versão muito mais ampla. Agora vou estendê-lo e mostrar como ele deve ser para o PC. Isso é mais parecido com o tamanho do PC, tamanho do laptop. Mas o que você nota aqui é que este é muito grande. Esse é um erro que tivemos. Em primeiro lugar, não definimos um máximo para o tamanho. Então, podemos resolver isso indo em frente e configurando largura máxima para todos esses cartões, ou podemos simplesmente alterá-la manualmente. Podemos dizer que para esses designs, apenas para o PC, vou escrever aqui PC, somente para a tela do PC, eles devem ter um mínimo, não de 200, mas de 300. E então eles devem ter no máximo 500. Quando eu adicionar outro, vou mostrar como parece que só deveria ter 500. Como você pode ver agora, os elementos aqui são diferentes daqui. Eles têm mínimos e máximos diferentes É disso que tratam os pontos de interrupção. Trata-se de ajustar a aparência das coisas. Com base no tamanho da tela, certo? Como eu disse antes, é possível fazer um design totalmente não é possível fazer um design totalmente 100% responsivo Sempre haverá problemas. Haverá uma tela muito pequena ou muito grande. Eu mesmo trabalho. Eu tenho uma tela ultra larga, que é muito larga. Portanto, para a maioria dos sites, eles não parecem exatamente corretos, e isso é completamente normal. Isso acontece. Na maioria das vezes, quando você abre um site, ele é reduzido. Você tem uma tela tão grande e, em seguida, todo o site está apenas ocupando a parte central ou talvez a parte esquerda. Então, isso é comum porque não podemos garantir que você saiba nosso design fica bem em 100%, em todos os dispositivos, em todos os tamanhos de tela. E é por isso que temos que chegar a um acordo. Esse compromisso é chamado de pontos de interrupção. E nesses pontos de interrupção, temos a liberdade de ajustar as coisas. Podemos dizer, você sabe o que? Em vez disso, no telefone, por exemplo. Bem, você pode ver no PC, eu posso ver até sete bebidas, certo? No tablet, eu posso ver, quatro bebidas e duas metades No celular, só consigo ver três. Então podemos dizer, espere um minuto, espere um minuto. Talvez no celular, isso não deva ser um movimento de rolagem para baixo para ver, talvez devesse ser um controle deslizante Então, o que eu faço é desativar o envoltório e mantê-lo assim como um controle deslizante para que você possa deslizar os elementos da direita para a esquerda Muitos aplicativos fazem isso e vamos ver exemplos disso. Então, o que podemos fazer é ver todas as bebidas aqui e depois copiar isso, colar e, em seguida, aqui você toma outras bebidas, talvez tipos diferentes de bebidas ou cores diferentes. Aqui você tem sua primeira opção, você pode percorrê-las e eu posso mostrar como seria. Vou apenas configurá-lo e vou dizer rolagem horizontal E é assim que ficaria no telefone. Isso faz muito sentido. Talvez o telefone devesse ser um pouco mais longo. Isso faz muito sentido porque você gostaria de ver categorias diferentes e, às vezes, rolar horizontalmente mostra muito mais simplesmente Em vez de ver três cartas grandes, talvez as cartas devessem ser pequenas. Novamente, os pontos de interrupção oferecem a liberdade de ajustar e personalizar seu conteúdo pendente ou com base no tamanho da tela que você tem Então, aqui, você não precisa usar controles deslizantes horizontais. Você já vê uma boa quantidade na tela, então não precisa disso. Então, isso é algo em que pensar. Então, para recapitular o que aprendemos hoje, aprendemos sobre dois conceitos principais que são restrições As restrições são basicamente nossa maneira de amarrar o conteúdo em um quadro para dizer à Figma em qual lado desse quadro esse conteúdo deve ser vinculado, na parte superior ou inferior ou em ambos Quando estendemos essa tela, o elemento deve se expandir ou deve ficar preso à E da mesma forma, direita ou esquerda, e esse é basicamente todo o conceito. Isso nos permite nos comunicar com a Figma, configurar as coisas para que os elementos possam ser estendidos, esticados ou movidos da maneira correta Também aprendemos sobre pontos de interrupção, que nos permitem criar tamanhos de tela diferentes e configurar aparências diferentes para cada tamanho de tela Para o celular, ele tem uma aparência diferente para tablet, aparência diferente e PC, uma aparência diferente. Agora, geralmente são só esses três. Você não precisa ir mais longe e dizer Big PC Ultra Wind Monitor. Não, você não precisa disso. E na maioria das vezes, você também pode configurá-lo para dizer tudo menor que esse tamanho, até 393 ou algo assim, 393-530, que tudo será móvel Só para esclarecer isso um pouco melhor. Isso quer dizer que qualquer coisa acima de 393 e menor que 530 em termos de largura deve estar de acordo com esse design Então, qualquer coisa entre 530, começando com 530 ou qualquer número que configuramos, esses números são simplesmente Eu apenas os escolho aleatoriamente. 530-1200, a tela será considerada uma tela de tablet e seguirá exatamente essa aparência de design Por outro lado, uma vez que saia de qualquer tela 1274 ou superior, siga estas regras Então, basicamente, isso tem suas limitações, mas quando trabalhamos com layouts automáticos, evitamos muitas dessas limitações Meu conselho para você é usar as duas Best Words, usar layouts automáticos, usar restrições e pontos de interrupção para criar o melhor design absoluto e não comprometer Porque devemos tentar alcançar o máximo e a melhor capacidade de resposta possível, e então podemos encerrar o dia Mas trabalhar apenas com restrições é muito limitante e trabalhar apenas com layouts automáticos também é Portanto, tente usar essas duas coisas. Agora, para dar um exemplo, um último exemplo do que você poderia fazer com restrições, é um caso muito especial daquilo com o qual geralmente trabalhamos Não precisa ser feito dessa maneira, mas essa é uma maneira de fazer isso. Agora, vamos adicionar uma tela McPro de 16" aqui. Digamos que estamos criando um site, esse site geralmente terá uma barra de navegação Estou criando uma moldura aqui e vou dar uma cor a ela, então talvez devesse ser verde. Normalmente teríamos um logotipo. Mas em vez de um logotipo, vou apenas adicionar esse círculo, essa elipse Este é agora o nosso logotipo. Vamos transformar isso em um layout automático. Esse layout automático tem uma moldura dentro dele, e essa moldura é nossa barra de navegação Vamos chamá-lo de Navbar. Tem nosso logotipo aqui. Vou chamá-lo de logotipo. E depois tem alguns itens de menu. Eu poderia dizer, poderia dizer trabalho ou obras de arte ou algo assim. Você pode fazer isso 24. Isso está criando uma barra de navegação muito grande. Então aqui diz Team Au us. E então temos contato. Então talvez tenhamos um botão. Vou copiar e colar isso, fazer esse layout automático com shift e A e depois dar uma cor e, em seguida, vou escolher isso, clicar em I para usar a ferramenta conta-gotas, escolher a cor aqui e, em seguida, fazer essa rodada com um raio de canto de oito ou talvez 24 e, em seguida, vou fazer 16 e depois vou fazer de cima para baixo O botão deve dizer marcar uma consulta. Vou trazê-los aqui para a direita. Vamos começar pela esquerda. Agora temos esse menu aqui e vamos verificar se a largura dele é 1728 Mas o que vou fazer é escolher todas elas e emoldurá-las. Vou enquadrá-los, não layouts automáticos. No momento, estamos tentando não trabalhar com layouts automáticos o máximo possível Em primeiro lugar, agora temos uma moldura. Isso é chamado de barra NAB dentro dela, vamos chamar isso de itens essenciais da Navbar de Navbar Então, temos esses pontos e temos esse quadro , que é nosso CTA de apelo à ação , vamos fazer para configurar isso Vamos escolhê-los e vamos clicar nesse botão. Depois de escolher muitos itens e clicar nesse botão, isso igualará os espaços entre eles. Vou escolher todos eles e alinhá-los à direita Em vez de se alinharem ao topo, eles serão alinhados ao centro E então eu vou colocá-los na extremidade direita da moldura para que você possa ver que a moldura está aqui, e eu também vou centralizá-los , colocá-los no centro Agora eles estão centralizados na moldura. Da mesma forma, aqui, vou alinhá-lo à esquerda. Já está alinhado e eu vou colocá-lo no centro Então, vamos testá-lo. Agora, quando alteramos o tamanho aqui, nada está acontecendo, mas precisamos alterar o tamanho da moldura interna dos itens da Barra de Navegação Você pode ver que está funcionando e, quando o levamos para a direita , está funcionando. Tudo bem. Então, agora o que vamos fazer é escolher esses itens essenciais da Navbar e configurar suas restrições. Vamos dizer esquerda e direita, indo para a esquerda e para a direita, e vamos dizer que também terá parte superior e inferior. Agora, o que acontece é que, quando estendemos isso, ele virá com eles, será centralizado E quando a estendermos para a direita, ela vai continuar. Mas o que vamos fazer agora é configurá-lo como preenchimento. A barra de navegação geral está configurada como preenchida. Agora, considere que temos essa tela do MacBook Pro de 16 polegadas Mas e se fosse menor? Você vê isso? Agora, configuramos a Navbar para que esses itens permaneçam à direita e o logotipo permaneça à esquerda E se for maior? Bem, ainda vai ficar bem. Quero dizer, vai parecer um pouco vazio a partir daqui, mas está tudo bem. Mas há um problema porque, antes de tudo, quando chegamos ao tamanho, é aí que você deve ter um ponto de interrupção É aí que você deve dizer que quando chega aqui, é quando se torna o modo tablet ou até mesmo o modo telefone. É aí que começamos a considerar a tela como um tablet em vez de um PC. Então, podemos usar um menu de hambúrguer em vez dessa barra de navegação horizontal Mas isso é uma lição para outra hora. Mas temos outro problema é que, quando a ampliamos demais, digamos que você tenha uma tela branca como a minha, depois tenha todas essas opções de um lado e o logotipo do outro lado, parece um pouco confuso Como podemos resolver isso? Bem, há uma maneira de corrigir isso. A maneira de fazer isso é basicamente configurar a barra de soneca interna, os itens essenciais da barra de pressão e dizer que ela deve ter uma largura máxima Mas a única maneira de fazer isso é tornando a própria Navbar um layout automático Temos que usar layouts automáticos. Quando fizermos isso, você verá aqui algumas restrições, podemos ajustá-las, podemos fazer 16, 24, depende de Em seguida, vamos escolher isso aqui, a barra de navegação interna, os itens essenciais da barra de navegação, e vamos dizer que adicionaremos a largura máxima de OK. Em seguida, vamos configurá-lo para encher o recipiente e garantir que a barra NAP, a estrutura completa, esteja centralizada no meio Estava indo para a esquerda, nós apenas o centralizamos. Agora, observe o que acontece quando o estendemos ou o que acontece quando o tornamos menor. Bem, ele ainda se ajusta adequadamente até certo ponto, que é o que tínhamos Bem, o que nos beneficiamos com isso? Por que tivemos que usar o layout automático? Bem, agora, quando o tornamos muito mais amplo, ele para. Como você pode ver, em um determinado ponto, ele parou de crescer e esse certo ponto é exatamente 1.400 porque esse é o máximo que configuramos Bem, por que todo esse alarido? Por que fizemos isso? Bem, o principal motivo pelo qual você pode fazer isso é garantir que, se alguém tivesse uma tela maior, sua experiência não seria estendida para a esquerda pois esses extremos impedirão que a pessoa veja a navegação corretamente Normalmente, como regra geral, o que você pode fazer é definir um máximo para que tudo, maior parte do conteúdo da página, permaneça no meio Eu até recomendaria isso para a maior parte do conteúdo. Se você tem um site um aplicativo ou programa ou o que quer que seja, ele não deve se estender ao máximo, a menos que o caso de uso seja algo mais profissional Por exemplo, no próprio Figma, quando você tem uma tela ampla, você está usando a tela widescreen para ter um espaço maior para trabalhar E então você pode ter essas janelas à esquerda. Está tudo bem. Eles não precisam estar centralizados. O que precisa ser centralizado é o seu trabalho. Mas, nesse caso, você precisa pensar sobre isso do ponto de vista da experiência do usuário. Você precisa pensar nisso da perspectiva dos próprios usuários. Quando se trata de um site, a navegação é uma das partes essenciais. Conteúdo do seu site. Se houver uma imagem, se houver um texto, você quer que esse texto seja visível e legível. Eles devem ser capazes de lê-lo e experimentar o site. A melhor maneira de fazer isso é mantê-lo mais ou menos no meio, não completamente esticado. Deixe-me explicar o que quero dizer. Quando chegamos aqui, fazemos isso pequeno para um tablet, depois adicionamos um texto aqui e dizemos, não sei, vou usar a IA. Escreva 600 palavras sobre golfinhos. Agora estou pedindo que você escreva algo e está escrevendo algo muito longo. Então, vou limitá-lo a 300. OK. Agora acabou de escrever. No momento, está dentro desse layout automático. Vou fazer disso um layout automático clicando em Shift e A apenas para dar um pouco de preenchimento Agora, digamos que seja um texto no seu site. Agora, o que você pode fazer é escolher esse quadro e ele já está configurado para ser preenchido. Agora, quando você estende isso, o texto se estende com ele, o que é muito legal, porque agora você tem muito mais espaço para ler. Bem, e se sua tela fosse muito larga? Isso é extremamente difícil de ler porque, neste momento, agora você tem que ler da esquerda até lá e depois voltar novamente, e isso é muito cansativo Na maioria dos sites, eles se ajustam para telas mais amplas definindo um limite. Não estou falando de telas muito, muito largas. Quero dizer, aqui, temos 2.600. Mas mesmo 1.600, 1.800, 900, existem muitas telas como essa, e isso ainda é demais. A solução é escolher esse layout automático e dar a ele um máximo de 1.400 ou 1.200 ou o que você quiser, e você pode mantê-lo alinhado à esquerda ou, de preferência, do meio para cima, no meio, e então veja o que acontece agora Não importa o tamanho da tela, você ainda encontrará o texto no meio, o que é um pouco mais fácil de ler. Se você torná-lo menor, então não haverá esse espaço em branco, esse espaço em branco à direita e à esquerda. Vai se ajustar. É assim que ficaria em um tablet, ainda legível e sem desperdício de espaço à direita ou à esquerda, e assim por diante É basicamente assim que funciona. Usando restrições, usando dois layouts para tornar seu texto legível e ajustá-lo para todos os Mas, como mencionamos, enquanto conversamos, usar pontos de interrupção é ótimo porque ajuda a evitar essas situações Você não pode mostrar como ficaria no telefone porque o menu está todo bagunçado, então você precisa de um menu móvel Isso é algo que você deve ter em mente. Ter um menu móvel permite que você tenha um ponto de interrupção de uma versão móvel Uma visualização móvel pode ajudá-lo a substituir essa barra de navegação em vez de ter essa bagunça sobreposta Mas eu só queria mostrar a vocês como criar uma barra de navegação com layouts automáticos e restrições É basicamente assim que funciona, e certifique-se de entender os máximos e mínimos, bem como as restrições e os pontos de interrupção, pois eles pontos de interrupção, pois Agora, é claro, criar um design em um nível básico não exige isso. Mas quando você está criando, como eu disse, design responsivo, é quando você está trabalhando uma capacidade maior em um nível mais alto E sim, vá em frente, pratique sozinho e domine. Muito obrigado por ouvir. Espero não ter tornado isso muito complicado para vocês. Na próxima lição, trabalharei um pouco mais rápido, supondo que vocês já estejam um pouco mais familiarizados com os conceitos Será uma boa prática para você entender como deveria trabalhar. Muito obrigado por ouvir, e nos vemos na próxima lição. 9. Crie uma seção responsiva no mundo real: Olá. Nesta lição, vamos usar esse design, que encontrei nos formulários da comunidade e está disponível publicamente. Alguém fez isso. Obrigado, estranho. Vou tentar transformar isso em um design mais ou menos responsivo usando aprendemos sobre as técnicas e conceitos que aprendemos , incluindo layouts automáticos, restrições Não temos muito tempo. tentar fazer isso muito rapidamente. Como você já pode ver, esse design está muito ausente. Ele está funcionando apenas com grupos e sem layouts automáticos ou coisas tipo. Você pode ver isso aqui. Quero dizer, há um layout automático aqui, eu acredito, mas, você sabe, é só um botão ou algo assim. Então, agora, naturalmente, começaríamos do começo. Você sabe, começaríamos criando botões consistentes e tudo . Mas eu não vou fazer isso. Vou trabalhar com o que tenho para mostrar a vocês um pequeno vislumbre de como poderia ser a aparência Vou copiar e colar isso só para que possamos ter uma versão original e, em seguida, tipo uma versão editada, ok? Então, primeiro de tudo, vamos transformar isso no ponto de partida do fluxo, e eu quero ver como fica. Então, eu gostaria de pré-visualizá-lo e ver como ele fica na minha tela. Tudo bem. Então, em primeiro lugar, vamos tentar entender o que está acontecendo aqui com esta seção. Eu posso ver que há uma imagem aqui com algum texto com essa imagem em cima dela. Agora, é perfeitamente normal usar esse tipo de grupo, mas não deve ser um grupo de forma alguma Então, vamos dar uma olhada. Agora, primeiro vemos que esta é uma imagem em segundo plano e depois há uma sobreposição em cima dela, e depois há esse texto Então, em primeiro lugar, vou começar recriando isso de forma aproximada e vou tentar ver o quão perto consigo chegar Então, temos a largura certa, e isso está quase certo. Então, o que vou fazer é tentar ver o raio. Então aqui estão seis. Então, eu vou pegar a imagem. Segurando o controle, escolho o preenchimento, adiciono aqui e, em seguida, temos esse preenchimento linear. Vou adicioná-lo por cima, mas vou me certificar de que seja mais ou menos parecido, algo assim. Então eu vou pegar o texto aqui. Isso parece ser, isso é um grupo? Este é um grupo, então eu vou trazê-lo aqui. E vou criar um layout automático segurando Shift e A. Agora, em vez de ser um grupo, é um layout automático com quatro espaçamentos Enquanto isso, esse não é um layout automático, então vou transformá-lo em um layout automático e , em seguida, ficará assim. Vou pegar as dimensões novamente aqui e vou fazer as corretas e também a largura é 270. Em primeiro lugar, vou me certificar de que a imagem não seja cortada, ela deve ser preenchida Mesmo que não pareça um a um, preenchimento garante que a imagem não seja problemática ao ser redimensionada Você vê como isso está. Isso é problemático. É por isso que temos que usar a opção preenchida. Quando usamos isso, não deve ter problemas. Em seguida, vamos garantir que o texto esteja no lugar certo, então vamos colocá-lo no chão e garantir que também o espaçamento e o preenchimento estejam Aqui, vamos fazer 16 por 16 e encerrar o dia. Agora temos as mesmas dimensões. Vou transformar isso em um componente e vou dizer cartão de artigo. Vou substituí-lo aqui e vou apenas colá-lo aqui. Em seguida, vou criar outra versão logo abaixo dela usando essa imagem. Vou pegar o preenchimento, colar aqui, remover o preenchimento antigo, colocar a foto aqui e fazer esse preenchimento novamente, não adereço. Então veremos, copiaremos esse texto. A fonte aqui é diferente, então vou substituí-la por monster rot on hole page. OK. Desculpe por isso, Montserrat, substitua na página inicial, selecione o estilo Deve ser um substituto médio. Não parece muito parecido, mas está tudo bem. Sem problemas. Então aqui diz hoje. Vou simplesmente excluí-las e vou trazê-las e colocá-las em um autolayou segurando a tecla Shift em A. Então você vê isso hoje Então você vê isso Está dentro de um grupo. removê-lo do grupo e adicioná-lo aqui. O espaçamento aqui é 23. Vamos fazer com que seja 24 apenas para que possamos ter um número adequado. Então temos isso aqui. Agora, podemos escolher manter isso mais ou menos como uma imagem que depende de nós, porque é um pouco e está se estendendo para a esquerda, o que é um pouco problemático para mim Uma coisa que podemos fazer é ter isso agora como um layout automático. Então, eu vou clicar em Shift e A. Em vez de ser um grupo, agora é um layout automático, e então temos esse cara, e que, todas essas coisas, vou transformá-las em um quadro, clicar com o botão direito do mouse e então vamos dizer seleção de quadros. O que eu vou fazer é fazê-los. Vou bloquear a proporção aqui clicando aqui para que, quando as redimensionarmos, quero dizer, se o fizermos, vamos transformá-las de uma moldura, eu a removerei mantendo o controle backspace e farei deles um grupo com gene de controle Vou bloquear a proporção para que, quando as redimensionarmos, elas basicamente não fiquem distorcidas Então, o que podemos fazer é criar as restrições à direita, essa à esquerda e essa à esquerda, e então vamos ver como fica quando a traseira é dimensionada Não é tão ruim, eu acho, certo? Tudo bem. No momento, não é tão ruim. Agora, o que podemos fazer é juntá-los em um layout automático, segurar Shift e A. Agora, é claro, ele vai reorganizá-los de forma um pouco diferente, mas agora eles são um layout automático Agora, vamos descobrir o que está acontecendo com o menu. Aqui, isso é um retângulo. A primeira coisa que vamos fazer é excluir isso. Não temos um retângulo no fundo. Nós só temos uma moldura. Segure F, crie um quadro e, em seguida, esse quadro contém todos esses três elementos dentro dele. Vamos transformar isso em layout automático. Assim, garantiu que o espaçamento e tudo estivessem corretos e adequados Em seguida, vou segurá-los e criá-los em um layout automático interno, se você se lembrar do que fiz da última vez. Eu vou dizer que a largura máxima deve ser 1.400. Podemos torná-lo ainda menor, mil 200, e vamos configurá-lo para encher o recipiente. Vamos definir isso também, quero dizer, agora, ainda não, mas vamos fazer com que encha o recipiente mais tarde. Vamos preenchê-lo, vamos torná-lo branco. Se você notar que o fundo está um pouco esbranquiçado. Vamos verificar como está agora. OK. Bom. Não parece muito diferente. Vou passar isso para um menu fixo. Porque eu gosto disso. Você pode ver agora que está caindo conosco e está acontecendo. Uma coisa que eu não gosto nisso é que parece um botão, mas geralmente deveria ser um campo. Vou apenas estendê-lo e torná-lo centralizado à esquerda, e vou torná-lo um pouco mais legível Vou fazer o texto aqui, dar a mesma cor, mas deixá-lo um pouco mais escuro E talvez eu possa deixar o fundo um pouco mais claro. Parece mais com isso. Agora, não parece mais um botão, parece um campo. OK. Também posso simplesmente encher o recipiente. Agora podemos ver aqui que há 101. Em vez de 101, vou torná-lo automático. O que o Auto faz é apenas criar espaçamento automático. Você vê que as notícias esportivas estão se espalhando demais. Vou fazer com que seja um grande conteúdo. Deixe-me substituir a fonte aqui. Vou apenas dar uma fonte diferente. Tudo bem. O problema é que tudo está próximo, o que está criando um problema para mim. Então, vamos tentar descobrir isso. Em vez de Auto, podemos dar 24. Agora vamos ver como fica. Parece um pouco melhor. Podemos até fazer com que seja 36. Isso parece um pouco mais natural. Um pouco mais espaçoso. Agora temos essa seção resolvida. Aqui, o que podemos fazer? Vamos tentar entender. Aqui, você tem um retângulo com uma bola de futebol, que já é uma catástrofe O que vou fazer é criar uma moldura em vez disso. A mesma cor, e eu vou dar um raio e vou adicionar essa bola de futebol a ela Agora acabamos de substituir esse elemento aqui. Vamos fazer a mesma coisa com os outros. Copie isso, cole, e eu vou jogar basquete em vez disso. Também podemos fazer disso um ajuste automático, e terei o mesmo tamanho aqui e excluirei isso e isso Lá vamos nós. Coloque-o aqui, enxágue e repita. Não precisa ser perfeito. Não, são apenas imagens, então podemos mantê-las apenas como imagens. Isso está completamente bem. Está bem? Então, o que vou fazer é, em vez de colocá-los um ao lado do outro, vou colocar “ deixe-me” em primeiro lugar, escolher todo esse grupo e eu vou destruí-lo. Vou remover o grupo, desagrupá-los segurando o controle e retrocedendo Em seguida, vou escolhê-los e torná-los um layout automático, esses, mas, como um layout automático, corrija o erro de digitação aqui. Isso não importa. Aqui, layout automático aqui. Aqui você vê que também há o mesmo problema de haver uma imagem dentro disso. Vamos apenas estender a imagem, estendê-la e eu vou deixá-la preta lá embaixo, ou vou deixar cair a cor aqui e dar seis. Agora, essa imagem não precisa desse plano de fundo. Então eu vou juntá-los. Agora, idealmente, o espaçamento deve ser semelhante. Aqui é 31, 30, 31. Vamos fazer com que todos esses 36. Que tal isso? Vamos juntá-los e fazer de tudo isso um layout automático, só vou garantir que todos cheguem ao limite. Quase. Vejo aqui que há alguns elementos desnecessários aqui. Vou escolher tudo e depois vou desmarcar esse layout automático Eu apaguei tudo que estava por trás deles. Bom. Aqui está escrito categoria e, em seguida, vou fazer disso um layout automático e o espaçamento aqui é 16 Bom. Vamos lembrar disso. Agora, vou fazê-los embrulhar para que, se eu os fizer menores, eles se embrulhem desse jeito. Também podemos configurá-los para serem preenchidos. Isso também é algo que podemos fazer. Isso depende de nós. Você pode ver que está cheio. Mas então, se fizermos isso, temos que garantir que eles não sejam cortados, mas sim preenchidos Agora, obviamente, isso vai tirar um pouco do enquadramento que quem fez isso fez com ele Mas agora, vamos ter que correr esse risco, sem problemas. Eu também preciso fazer isso aqui. Tudo bem. Não parece muito ruim. Mas vamos garantir que haja um mínimo. Dizemos que o mínimo é 200. Assim que os tornarmos pequenos demais, eles simplesmente entrarão em colapso e ficarão embaixo um do outro. Eu acho que isso parece muito bom. Muito legal. Essa é uma capacidade de resposta muito boa. Aqui estamos chegando a outra parte difícil. Vamos escolhê-los juntos e criaremos um layout automático, com espaçamento uniforme Quero dizer, não precisamos fazer isso. fazer deles um layout automático por conta própria. Então, isso é quatro e, com isso, o espaçamento é 12. E então faremos um layout automático com isso. O espaçamento é automático, de preferência não deveria ser. Quero dizer, vamos fazer com que seja 16. Então eu vou pegar isso, café, colar, fazer um componente e dizer vertical ou horizontal, não é um cartão. Temos cartão de artigo, artigo horizontal, e então vou deletar isso aqui, basear isso. Perfeito. Então eu vou copiá-lo e vou pegar o texto aqui. Há muitas fontes diferentes aqui que eles estão usando e eu não gosto porque demorando muito para descobrir. Vou apenas refazer essa podridão monstruosa, meio ousada. OK. OK. Tudo bem. Então nós copiamos isso, certo? Não, desculpe, não copiamos isso. Copie isso, cole. Estrondo. Pegaremos a imagem segurando o controle, colaremos , removeremos, copiaremos o texto novamente, colocaremos aqui , colaremos aqui, pegaremos esse texto, basearemos aqui, e então teremos a imagem também, pegá-la, colá-la, bum. Agora, excluiremos essas duas versões e as colocaremos aqui. OK. E agora, o que vamos fazer é escolhê-los com as divisórias e eu vou transformá-los em um layout automático, e vou colocá-los à direita Eles serão alinhados à direita. Assim, você pode ver o mesmo espaçamento que eles tinham. Embora possamos fazer o espaçamento, por exemplo, tecnicamente podemos fazer com que ele preencha a peça inteira dessa ou daquela Quer dizer, eu gostei de como foi. Não tem problema. E então temos essa imagem aqui. Você precisa pensar em tudo em termos de layouts automáticos. Está alinhado horizontal ou verticalmente ? Eles estão alinhados verticalmente. Isso está alinhado verticalmente com eles. Você vê que isso é oito, mas aqui era 16, talvez você devesse fazer com que fosse 16, certo? Então você os tem alinhados horizontalmente. Mas primeiro, precisamos transformar isso em um layout automático. Faremos isso criando esse visual. Vamos pegar o texto. Quero dizer, vamos ver o que é isso, deixar isso de lado. Pegue a imagem, faça seis raios arredondados, pegue esse preenchimento. Está em 60%. Faça 60%, remova o preenchimento branco e, em seguida, vamos pegar esse texto e colocá-lo em cima desse layout. Vamos fazer um layout automático com shift e A. Vamos fazer com que seja 12 em vez de 14. Você pode ver que esse texto é muito grande, então vou fazer com que seja um abraço Parece que vamos mudar o texto. Montserrat, ousada, torne-a ainda mais ousada ou algo assim. OK. Sem problemas. Agora vamos pegar essa categoria, vamos colocá-la. Agora vamos pegar isso e fazer de tudo isso um layout automático. Agora, o Figma é inteligente, o espaçamento, tenta torná-lo semelhante para que fique cima e isso para baixo, mas faz 358 Em vez disso, vamos dizer apenas automático. Automático significa que não importa quão grande seja, o ciclismo vai subir e isso vai diminuir. Acabei de notar que a imagem está se alongando, então vamos fazer com que ela seja preenchida novamente e veremos o que mais podemos fazer Vamos tornar esses valores adequados 16 16 ou 24, 24, e vamos deletar toda essa bagunça aqui Agora, vamos trazer isso para os holofotes. Vamos esticá-la e excluir essa caixa e criar uma moldura em vez dela. Esse quadro incluirá todos esses elementos, como você pode ver, e vamos torná-lo um layout automático. Teremos que incluir isso nele. Vamos colocar isso na moldura. Lá vamos nós. transformar tudo isso em uma camada automática e, em seguida, vamos estendê-la aqui. O que vamos fazer é fazer com que ambos tenham um recipiente de enchimento. Eles vão compartilhar 50 50. Isso é o que vai acontecer. Mas vamos garantir que haja preenchimento à direita e à esquerda Na verdade, não vamos fazer preenchimento porque a imagem não precisa de preenchimento, mas nós a transformamos em uma camada automática sozinha, então vamos dar a ela seu próprio preenchimento cima e para baixo para a esquerda e para a direita, e então tornaremos a distância entre elas 24 OK. E vamos dar essa cor, que é essa cor, eu acredito, e tem que ter um raio de canto de seis Mas você pode ver que há um pouco de espaçamento aqui. Então, podemos fazer com que essa imagem também preencha a altura. Agora está preenchendo a altura para que não haja espaçamento para cima e para baixo. Você pode ver que isso parece bem legal, muito parecido. Quero dizer, aqui há um pouco mais de espaçamento aqui. Nós podemos fazer isso 36, 36. Agora, acho que é mais parecido e há menos espaçamento entre a imagem e o outro texto Podemos fazer isso com oito. Ou algo parecido. Está bem? Bom. Tudo bem. Ótimo. Agora, o que vamos fazer é garantir que isso também seja responsivo O que acontece quando o tornamos muito pequeno, isso acontece. Isso não é o ideal. Então, o que vamos fazer é criar valores mínimos para eles e dizer que, quando atingirem 400, eles precisam entrar em colapso ou passar um por baixo do outro, é o que quero dizer, clicamos no lixo para garantir que isso aconteça Então, agora vamos verificar. OK. Bom. Mas essa parte não responde de forma alguma, então vamos trabalhar nisso Então, vamos clicar neles e fazer com que sejam preenchidos, o que eles já estão configurados para fazer. Mas o que notamos é que algumas coisas não funcionam. Portanto, pode estar aqui no nível do componente, e isso é verdade. Então, aqui, não há nada configurado. Então, vamos fazer com que a imagem e esse texto, esse quadro, sejam preenchidos, então eles compartilharão 50 50, e então chegaremos ao texto, e ele já está preenchido aqui, já está preenchido aqui. Perfeito. Acho que isso é bom o suficiente. Vamos ver como ele vai reagir agora. Então, como você pode ver, ele está reagindo um pouco. Temos o problema da distorção da imagem, podemos resolver isso E temos outro problema que é o fato de que o texto aqui está se sobrepondo O problema é um grande problema de conteúdo aqui. Isso é conteúdo de abraço, mas há algo aqui que não é conteúdo de abraço O que é isso? São esses. Eles devem ser preenchidos em termos de largura, devem encher o recipiente, mas devem ter um conteúdo amplo quando se trata do conteúdo que ele tem Essa opção não está disponível por algum motivo. Então, agora temos que solucionar o problema Então, vamos tentar entender isso ou por que está tendo um problema Então, vamos configurar esse abraço aqui. Vamos ver como funciona agora. Ainda está tendo um problema. Ok, então acho que cometemos um erro aqui porque era um quadro dentro de um quadro. Eu removi a moldura inferior, então agora é só essa moldura e depois os que estão dentro dela. Agora vamos verificar. De alguma forma, ainda não está disponível. Às vezes, isso acontece porque você está um pouco concentrado demais e precisa tentar entender qual é o problema ou onde você errou, o que pode ficar um pouco complicado No momento, não está funcionando, então devemos ter errado em algum nível Isso tem um preenchimento. Isso tem um preenchimento. Estes têm um preenchimento. Tem alguma coisa acontecendo. Tudo bem, então, só para recapitular, aqui está um preenchimento. Aqui você tem um preenchimento e aqui você tem um recipiente de enchimento. Quando você entra neles, eles não têm mais preenchimento. É aí que estamos. Vamos escolher, isso não é um layout automático. É aí que está o problema. Então, eles deveriam ter um recipiente cheio, e essa coisa toda deveria ter um abraço Vamos verificar isso agora. Perfeito. Esse era o problema. Em algum nível, não tínhamos um layout automático, mas tudo deveria ser regulado com layouts automáticos Agora resolvemos o problema. Ok, ainda estamos tendo o problema de sobreposição de texto Vamos resolver isso criando esse conteúdo do hub Ha. Agora vamos ver, perfeito, funciona perfeitamente. Só precisamos garantir que essa imagem não seja cortada da mesma forma aqui. Agora, vamos verificar isso. Perfeito. Agora, vou verificar as outras partes e ver o que temos. Temos assinatura de boletim informativo. Nós temos as coisas, legal, legal. Então, agora vamos tentar algo com restrições. Vou adicionar isso à esquerda. Desculpe, isso à direita, esses à esquerda, cima, em baixo ou acho que aqui está, acho que em baixo. Esse cara vai colocá-lo no fundo. Vamos colocar isso à direita, esses à esquerda. Vamos ver como fica. Sim, não é ótimo. E vamos fazer isso à direita e à esquerda. Então, isso não é tão ruim, como você pode ver. Tudo bem. Mas essas partes são um pouco, quero dizer, não temos tempo para fazer tudo isso, então vamos fazer tudo até aqui. Agora, a próxima etapa que vamos fazer é garantir que tudo isso esteja incluído no mesmo quadro. Eu transformo tudo isso em um layout automático e o coloco diretamente nessas linhas de grade, que são 1170 Não sei por que essas linhas de grade estavam aqui, vou me certificar de que estejam um pouco centralizadas Vou me certificar de que isso também esteja centralizado. Vou fazer com que escreva uma linha para que fiquem à direita e, em seguida, essa imagem possa ir um pouco para a esquerda sem problemas, porque não é a imagem mais importante aqui. Quero dizer, é só uma imagem, e esse é o texto que precisa ser lido. Então, agora que descobrimos isso, precisamos ter certeza de que ele é realmente responsivo Então, agora temos esse layout automático e isso como um layout automático, e vamos transformar a página inteira em um layout automático, o quadro inteiro Então, agora essa coisa toda é um autoayou. Vamos ver como fica quando o estendemos, nada acontece porque precisamos fazer esse recipiente de enchimento, mas temos que limitá-lo. Encha o recipiente com no máximo 1.200. Agora vamos ver como fica, nada acontece, mas quando o tornamos menor, ele deve se reajustar Ok, isso não está acontecendo. Por quê? Precisamos transformar tudo em um recipiente de enchimento. Precisamos ajustá-lo para garantir que todas as seções internas estejam enchendo totalmente o recipiente. Tudo bem. Então, agora vamos verificar. OK. Você pode ver que as coisas estão se adaptando aqui. Mas essa área não é ótima. Por quê? Essa área, quero dizer, tem molduras, alguns layouts automáticos, mas nem tudo é totalmente automático Este não é um layout automático e não está enchendo o contêiner. O que vamos fazer aqui é fazer isso aqui. Esta é uma seção de heróis, e vamos fazer com que ela encha o recipiente. Então, agora nós o encaixamos aqui e vamos fazer com que ele também encha o recipiente. Mas, como você pode ver, ele ocupará muito espaço, então daremos no máximo 300. Ainda menos 250, não é? Eu não sei. Agora vamos verificar novamente. OK. Então, as coisas estão ótimas, outras coisas como essa área não estão muito boas. O que eu sugeriria pessoalmente é transformar isso de alguma forma em uma moldura. Então, vamos transformá-lo em uma seleção de quadros. Quero dizer, seria melhor considerar tudo isso como uma imagem, para ser honesto. É muito importante considerar isso como uma imagem, porque isso ajudaria muito. Isso é algo que podemos tentar fazer. Como fazemos isso? Podemos copiar isso, colar aqui e fazer uma captura de tela, sem mais nem menos Vamos colar a captura de tela. Em seguida, excluiremos toda a imagem e a adicionaremos como plano de fundo a essa seção de heróis. Vamos transformar essa seção de heróis em um layout automático, adicionar o preenchimento e torná-la muito maior. Esta seção está cheia, mas vamos dar a ela um máximo de 400 e vamos estendê-la um pouco assim. Assim mesmo, nós o temos como uma imagem. Vamos ver como fica quando o tornamos menor. Então, as coisas melhoram. Vamos fazer com que ele encha o recipiente. Tudo bem. Agora, como você pode ver, a imagem não está mais legível Você não pode mais lê-lo, mas isso é algo com o qual você tem que conviver ou pode seguir em frente e talvez bloquear a proporção para que, ao diminuí-la, a imagem também fique menor. Isso é algo que você pode fazer. Uma coisa que percebi é que o fundo não é totalmente branco. Mas aqui, acho que o deixamos bem branco, então podemos desfazer isso, vamos pegar essa cor Tudo bem, podemos pedir Figma que remova o fundo Vamos deixá-lo fazer o que quiser? OK. Agora vamos verificar. OK. Agora, uma coisa para garantir que você também tenha todo esse layout automático é pegar todo o corpo da página Você deve preenchê-lo para a direita e para a esquerda E quando se trata disso, você também deve colocar um pouco de preenchimento para a direita e para a esquerda 24 ou algo assim E então vamos estendê-lo um pouco. Desculpe. Vou fazer com que esse abraço contenha conteúdo do alto. Agora você pode ver como fica quando estou redimensionando. Então, você pode ver que muitos desses elementos estão muito bem arrumados É assim que ficaria em um telefone, um telefone muito branco ou um tablet. Mas aqui ainda temos alguns problemas, que são a embalagem Também podemos fazer esse layout, encher o recipiente e fornecer um mínimo de 400. Vamos ver como fica agora. Mas precisamos fazê-los embrulhar. Eles já estão embrulhando. Então, isso é 250. Vamos fazer isso, sim, 500 ou algo assim. Então, como você pode ver, quando chegar lá, daremos um mínimo de 200. Então, quando chegamos a esse ponto, simplesmente desce. O problema é que demos um máximo, então agora não pode se estender a toda a área. Então isso é um problema, e é aí que os break points entram em jogo. O que podemos fazer aqui é que eu possa removê-los. Eu posso copiar isso, colar e dizer, copiar e colar novamente, ou vamos fazer uma versão móvel. Eu vou fazer isso. Então eu vou dizer 393, é assim que um iPhone deve ser Em primeiro lugar, vou ajustar, fazer 16 ou não tenho certeza do que fazer. Vou apenas ajustar as coisas para que fiquem bem. Vamos remover isso do caminho. Ótimo, ótimo. Tudo isso é bom. Mas aqui, está tendo um problema porque esse texto, eu acredito, tem um mínimo ou algo assim. Isso tem um mínimo. Vamos seguir em frente e fazer o mínimo de 300. Você vai ver o que acontece aqui. Mas vamos vir aqui e dizer que isso deve acabar em algum momento e que o mínimo deve ser, vamos definir um mínimo, que talvez seja 200 Então você pode ver que agora está muito melhor. Tudo bem. Agora vamos subir, esse lugar é uma bagunça. Então, vamos dizer que para dispositivos móveis, apenas para dispositivos móveis como ponto de ruptura, vamos remover o máximo aqui. Vamos clicar aqui e vamos ver o máximo mínimo. Vamos remover o máximo para que ele possa se estender até o máximo. E vamos fazer o preenchimento de toda essa área 16 em vez de 24 apenas para que possamos ter mais espaço na tela E você pode ver que isso aqui é um pouco confuso porque tem um mínimo, eu acredito, eu acredito, Então, vamos tentar descobrir isso. Então, qual é o problema aqui? Isso tem um mínimo, remova o mínimo e depois vai ficar confuso Eu vou dizer que vou tentar consertá-lo. OK. Volte para um território um pouco desconhecido. Então, vamos dizer que vamos tentar redimensioná-lo sozinhos para remover o mínimo E vamos dizer, ok, vamos dizer que são verticais, não horizontais. E então vamos remover a proporção aqui. Nós vamos mudar isso. E talvez possamos seguir em frente e cortar a imagem somente neste caso. Vamos torná-lo menor. Vamos trazê-lo assim. É assim que vamos trazê-lo. É basicamente isso. Em seguida, vamos bloquear a proporção em relação a ela apenas para que esse cara não fique distorcido Agora, o que estamos basicamente fazendo e podemos mudar as fontes, a propósito, acho que podemos mudá-las, podemos torná-las menores ou maiores. Como quisermos. Você pode ver que esta seção parece muito horrível em comparação com o que tínhamos aqui Quero dizer, parecia muito melhor aqui. Aqui, parece um pouco horrível. Então, podemos mexer com eles para que seja texto, imagem, texto, imagem, texto , texto, imagem, ou o que poderíamos fazer, mesmo que pudéssemos transformar tudo isso em Não tenho certeza, tipo que podemos transformá-lo em um controle deslizante Mesmo que eu não tenha certeza de quão bom isso seria. Mas, você deve se perguntar: qual é o propósito desses botões? Eles são clicáveis? Você pode fazer algo com eles ou não? Mas sim, eu acho que você poderia transformá-los em algo que você pode deslizar através de um controle deslizante horizontal ou algo parecido, se for realmente necessário Sim, então essa é a ideia de tornar a página do land dink em formato móvel otimizada para telas móveis É disso que se tratam os pontos de interrupção porque, como você viu, não conseguimos fazer isso perfeitamente Mesmo agora, ainda não é perfeito. Como o menu aqui, acabei de perceber que precisamos centralizá-lo. Eu não estava centrado Às vezes, você percebe essas coisas muito mais tarde, aqui você tem que ter, em vez desse tipo de menu, eu vou deletar isso. Eu vou deletar. Vou deletar isso. Você só precisa ter três linhas para o menu de hambúrguer. Não precisa ser perfeito. Vou cortar isso, colar aqui, e vou torná-los automáticos. Agora temos um menu de hambúrguer lá. Aqui, só precisamos testar essa coisa. Como você pode ver aqui, há um problema com a pesquisa. Quero dizer, está ficando completamente destruído aqui. Talvez possamos ter um mínimo para isso. Podemos dizer, Ei, 100 no mínimo. Quando tornarmos isso menor, ele alcançará isso e depois desaparecerá. Esse é um bom compromisso, eu diria. Em vez de ser cortado, ele simplesmente desaparecerá e assim por diante, porque não podemos fazer eles se sobreponham ou algo parecido. Isso não é realmente possível. Mas essa é uma demonstração muito rápida e suja de como você pode transformar uma página em algo um pouco mais responsivo Não é fácil, mas também não é a coisa mais difícil do mundo Não é ciência de foguetes. Então vá em frente e tente isso sozinho. Esta página foi um desafio, para ser sincero, porque tinha muitos elementos à direita e à esquerda, para cima e para baixo, e isso pode causar problemas. Como você pode ver, temos que fazer tudo com layouts automáticos E acho que trabalhar com layouts automáticos é o mais limpo. As restrições são boas, mas são muito limitadas. Eles colocaram você em uma situação muito difícil. É por isso que tentei evitar usá-los dessa vez. Eu mostrei como você pode usá-los para alguns elementos como esses aqui, mas é muito instável, então eu realmente não o recomendaria E é assim que é feito. Muito obrigado por ouvir, e nos vemos na próxima lição. 10. Microinterações: Então, nesta lição, eu gostaria de falar sobre microinterações. Agora, o que chamamos de microinterações são basicamente as pequenas interações que você tem ao usar ou navegar por um site, aplicativo ou qualquer tipo de experiência digital, e você tem coisas muito pequenas que mudam. Talvez eles mudem de cor, forma e tamanho. Algo acontece e essas microinterações dizem algo, comunicam certos tipos de informações. Agora, uma dessas microinterações que usamos quase hoje em dia em tudo, para ser honesto, são os efeitos de foco. Isso é algo que geralmente usamos com botões. Nós os usamos com muitos elementos, mas o mais importante é com botões. Hoje vamos praticar isso e tentar entender como as microinterações afetam a as microinterações afetam experiência do usuário e tentar ver como podemos aplicar isso com o Figma da maneira mais fácil Acredite, isso é bem fácil. Então, se você não fez nenhuma prototipagem até agora, isso será algo novo para você Então, se você não sabe o que quero dizer, você tem sua página de design aqui, sua guia de design. Então, quando você clica em qualquer elemento, você pode configurá-lo em termos de design, e então você tem sua guia de protótipo aqui onde você pode configurar as interações, ok? Então, como você pode ver, quando eu passo o mouse sobre as interações, ela fica branca Quero dizer, é um pouco acinzentado. E quando você passa o mouse sobre ele, ele fica branco. E é exatamente isso que quero dizer quando falo sobre microinterações, porque isso me diz que a Figma entende o que estou procurando. Então, quando eu clico aqui, algo vai acontecer, como você pode ver, algo já aconteceu. Vamos tentar criar algumas microinterações usando esses botões, essas instâncias de um componente que já havíamos criado antes em uma lição anterior. Agora, primeiro, como eu disse, primeiro, vá para a guia de prototipagem Agora, como você vai perceber, as coisas parecem um pouco diferentes do normal. Então, ao escolher qualquer item, você verá esses pequenos círculos em cada lado. E quando você se aproximar deles, eles serão sinais positivos. Essa também é uma microinteração. Quando você chega até eles, essas são opções para você clicar e segurar, e então você pode colocar uma seta em qualquer outra instância aqui. Você também pode colocá-lo em outras molduras. Mas agora, para os propósitos desta lição, que são efeitos de foco, vamos colocá-los no estado de foco. Certo? Então, depois de fazer isso, você cria imediatamente uma interação que pode ser vista aqui. A interação já tem alguns campos já configurados. Agora, sempre que você criar uma interação, ela será clicada no botão padrão. Então, aqui, Figma entende que a ação que queremos fazer é mudar dois, então mudamos o botão deste para este, e então ele mostra que você muda para O tipo é primário, então mude de primário. Dois primários. Ambos são primários, mas esse é o status? Este é o hover. Então, estamos mudando disso para o foco primário, não para o fantasma. Então aqui, você tem que entender isso nesses termos, você tem seu gatilho aqui. A que horas essa animação ou interação aparece? Como isso é acionado? Aqui, você pode escolher onclick. Você poderia dizer arrastar ao arrastar e, você sabe, segurar, quando segura algo e arrasta, e aqui está enquanto passa o mouse enquanto pressiona uma tecla ou gamepad, então você pode colocar alguns botões aqui no teclado para configurá-los como Entrar com o mouse, sair do mouse, mouse para baixo, mouse para cima ou simplesmente após um certo atraso após 10 segundos. Ou dez milissegundos. Então, o que vamos fazer para nossos propósitos é pairar o mouse Queremos configurá-lo para que, quando você passar o mouse sobre ele, ele mude para Novamente, as ações têm muitas outras opções. Você pode fazer com que ele navegue até. Então, se você quiser que, ao pressionar esse botão, vá para outra página para a qual você navegue. Você pode voltar, ir para a página anterior, rolar até um determinado elemento, abrir um determinado link, definir uma variável, definir um modo variável, condicional Abra a sobreposição, troque a sobreposição, feche a sobreposição. Essas são coisas sobre as quais falaremos um pouco mais tarde. Mas, por enquanto, estamos começando de forma pequena e fácil. Agora configuramos a ação e agora temos que configurar a animação. Agora, às vezes, a animação é configurada como padrão em tudo o que você tinha antes. Então, se você o usou instantaneamente , será instantâneo. No começo, é sempre configurado como instantâneo. Mas você também tem outras animações principais como dissolver e animar de forma inteligente Aqui, temos algumas opções que são classificadas porque você não tem permissão para fazer isso com a mudança para a ação. Mas se você escolher algo como navegar até, terá mais algumas animações. Se você sabe, algo aqui, você pode ver o movimento, então isso é um movimento na animação. Você pode pensar nisso se já trabalhou com o PowerPoint antes Essas são suas transições, certo? Então, como seria a transição e como seria a aparência da animação Mas vamos voltar atrás para mudar também, e primário e o status devem ser pairar Portanto, temos apenas essas opções no momento. Instantâneo, vamos experimentar. Tão instantâneo Basicamente significa que foi apenas um bug, não se preocupe com isso. Isso significa que, uma vez que entramos nele, ele muda imediatamente para essa cor. Agora, isso é muito bom porque é muito rápido. Ele reage muito rapidamente e diz que este é um botão com o qual você pode interagir Embora esse botão seja estático, ele não mostra vida, não mostra interações, nem animações. Instantâneo é bom. O que podemos fazer também é nos dissolver. Depois de escolher dissolver, você pode escolher certas curvas. Então, se você está um pouco familiarizado com animação, as curvas são como a animação começa. Isso começa? Isso facilita a entrada? Está começando muito devagar e depois aumentando a velocidade, ou está começando normalmente e depois diminuindo, pois diminui a velocidade no final Você pode entrar e sair com facilidade, então ela desacelera no início e depois aumenta a velocidade e depois desacelera no final, ou você pode se recuperar, você sabe, ou pode ser suave Há muitas opções diferentes aqui que você pode explorar e depois configurar a duração. Agora, como padrão, a configuração é de 300 milissegundos. Então, vamos ver como isso se parece. Então, se você notar que isso é muito mais suave, você sabe, leva tempo, que significa que se você passar o mouse muito rapidamente, talvez ele não apareça ou não termine a animação Mas é muito mais suave e elegante, para ser sincero, porque leva seu próprio tempo, o que é muito bom Então, essa é uma que eu recomendaria, e então temos a última opção é o Smart Animate, que também tem uma curva e duração Mas o Smart Animate, o que ele faz é basicamente permitir que você anime coisas diferentes, certo Então, para lhe dar uma ideia melhor, digamos que vamos fazer, não tenho certeza. Vamos adicionar, vamos adicionar um ícone a ele. Vai ser um botão e depois vai ter um ícone. É assim que vamos mudar isso para ocultar o ícone. E agora, quando passamos o mouse sobre ele, você ajusta o tamanho e, em seguida, adiciona um ícone a Como você pode ver, isso mostra flexibilidade. Mostra uma animação interessante. Agora, é claro, não acho que isso seria muito produtivo para um botão real. Você não deve mostrar uma animação aleatoriamente, mas é uma coisa interessante de se fazer porque é uma boa maneira de ver a opção de animação inteligente Bem, deixe-me mostrar a diferença com dissolver. Então, se você se dissolver, o que ele faz é simplesmente não mostrar a você, não se estender lenta e suavemente O que ele faz é simplesmente desbotar isso e fazer o outro botão entrar É muito feio e muito irritante. Mas quando você faz a opção de animação inteligente, desculpe, tudo bem. De qualquer forma, não acho que isso seja algo que você deva fazer, mas existem alguns efeitos de foco interessantes com os quais você pode usar uma animação animada inteligente, para Mas, por enquanto, não precisamos disso. Podemos ficar com o Smart animate. Ou podemos fazer isso dissolvido. Eles praticamente fazem a mesma coisa nesse caso. Agora que temos isso, podemos fazer a mesma coisa com eles. E só para mostrar que essa é outra maneira de fazer isso em vez de segurá-las, que eu acho que é a melhor maneira porque é muito mais visual. Em vez disso, o que você pode fazer é clicar em mais e criar uma interação, dizer gatilho ao clicar e alterar para. Fantasma ativo primário. Isso é primário porque é roxo, mas é fantasma e então queremos que isso vá daqui até aqui, que é fantasma flutuante P fantasma como em fantasma primário. Pairador principal, fantasma. Agora você pode ver uma seta que acabou de se criar, e então você pode configurá-la como dissolver e então podemos copiá-la e colá-la e transformá-la em um fantasma e depois ver como fica. Nós cometemos um erro. Nós não passamos o mouse. Dissemos clique. Vamos ver como isso parece agora. Você clica nele uma vez e depois fica colorido. Mas isso não faz sentido. Então, vamos removê-lo. Vou reiniciá-lo. OK. Parece que há algo errado aqui, então vou recarregar a guia inteira Isso acontece às vezes. Você só vai se certificar de que, se não estiver exatamente igual ao que você tem aqui, basta recarregá-lo e ele se consertará sozinho Você pode ver o efeito de foco aqui e aqui também. É praticamente a mesma coisa, então isso significa que está funcionando. Agora podemos fazer a animação inteligente para ver se há alguma diferença, não muito, mas boa Bom. Agora vamos passar para o próximo nível. Vou voltar e segurar a flecha novamente porque acho que isso faz mais sentido. Eu vou fazer a animação prensada. Agora está escrito “ao clicar”, mas não queremos “onclick” porque “ onclick” significa que quando você clica nele, ele muda aqui e depois nunca mais volta Em vez disso, o que você vai fazer é dizer enquanto pressiona. Quando você pressiona, fica mais escuro. E então será prensado primariamente , sem fantasma. Bom. Vai fazer um sorriso animar bem. Mas eu gostaria de tornar isso um pouco mais sombrio apenas para provar ou mostrar a diferença de uma forma mais pronunciada Vamos ver como está agora. Eu só vou clicar. Eu só vou me refrescar. Reiniciar. OK. Agora, há um erro porque não está funcionando e eu vou te dizer qual é o erro. Eu fiz a animação ou a interação aqui. Mas se você pensar bem, quando você passar o mouse sobre isso, ele mudará imediatamente para esse estado e esse estado não terá nenhuma interação Então, o que você vai fazer é manter essa interação de pressão, segurar o Controle C, copiá-la e colá-la aqui. Agora você tem exatamente a mesma interação. Agora, nosso cursor mostra essa mão com o dedo indicador aparecendo com o dedo indicador subindo Isso significa que é clicável. Enquanto estiver aqui, não é clicável. Aqui, há um efeito de foco, mas não é clicável. Aqui, há um efeito de foco e é clicável. Você vê que estou pressionando e quando estou pressionando, está ficando muito escuro, quero dizer, quase preto, e isso é para mostrar que estou clicando nele Certo? É basicamente assim que você pode fazer isso. Você pode fazer a mesma coisa aqui. Então, eu também posso fazer isso para vários, posso fazer uma interação para vários botões. Eu posso me deslocar, segurar os dois. E agora, como você pode ver, eu estou estendendo duas setas, e então eu posso dizer, enquanto pressiono, Vamos ver agora. Agora, vamos tentar isso com esse outro botão. Então, só para recapitular, vou segurá-lo aqui e dizer enquanto mouse e, em seguida, vou escolher os dois apontá-los para a versão pressionada e dizer enquanto pressiono Agora, vamos ver. Há um efeito de foco. Ótimo. Quando eu pressiono , fica muito escuro. Agora, o que você pode fazer se quiser é escolher essas interações e, escolher essas interações apenas por diversão, torná-las 100 milissegundos em vez disso, três vezes mais rápido Quando você clica, ele reage muito mais rápido. Acho que isso faz sentido porque um clique não é algo que leva muito tempo. Isso acontece instantaneamente. Bam, bam, bam. Eu não deveria levar muito tempo. Você pode até mesmo torná-lo instantâneo, se quiser. Você vê que está apenas piscando. Mas acho que é sempre bom ter uma duração muito pequena. Isso o torna um pouco mais suave. Então, sim, é basicamente assim que você pode usar as interações para criar essas microinterações , como efeitos de foco Agora, uma coisa que podemos fazer que conta como uma microinteração, mas isso não é exatamente apenas botões e efeitos de foco, é uma animação de carregamento Então, como mencionei, podemos fazer muitos efeitos de foco, mas você já viu como isso funciona e pode entender como funcionará em outros casos Mas uma coisa que podemos fazer é, como eu disse, carregar animações. Há muitas animações de carregamento diferentes que você pode fazer, mas algo que eu gostaria de mostrar a você Quer dizer, um método que eu acho muito regular, muito padrão, que sempre funciona, é fazê-lo da seguinte maneira. Em primeiro lugar, vamos criar um círculo. Mantenha pressionada a tecla Shift ao criá-la, para que, ao criá-la, ela mantenha uma proporção bloqueada. Então não é mais longo ou mais largo do que é, você sabe, as dimensões não estão confusas Agora, o que vamos fazer é clicar em Traçado e dar a ele um traço branco. Vamos torná-lo um pouco menor, apenas pelo tamanho, então talvez algo parecido. E podemos torná-lo cinza, para ser honesto, um pouco acinzentado Agora você vai copiar e colar isso. Agora temos uma segunda versão e depois copiamos e colamos novamente, mas removemos o traço e damos uma cor roxa. Agora que temos essa cor roxa, temos três círculos diferentes. Eles são os mesmos, e então temos o círculo com uma cor roxa. Agora, aponte quando chegar ao círculo, você encontrará esse pequeno círculo aqui, que permite cortar o círculo. Você vai seguir em frente e fazer isso e criar talvez um quarto. Agora temos 25% de um círculo. E quando giramos isso, ele gira dentro do círculo, o que é um bom efeito e, na verdade, é o efeito que queremos fazer Em seguida, vamos clicar nele e clicar no círculo com o traço abaixo dele. E vamos seguir em frente e usar a máscara. Depois de fazer isso, o traçado mascarará esse quarto de círculo e, em seguida, dará a aparência de uma barra de carregamento. Tudo o que precisamos fazer é basicamente girar isso para dar a impressão de que há algo carregando Agora, é claro, também podemos entrar aqui e tornar o traço um pouco mais grosso. Vamos dar quatro e vamos aqui e vamos dar quatro, ok? Então, agora esse é um círculo de carregamento espesso. Mas agora a questão é: como animamos isso? Então, coloque-os em um grupo, agrupe-os com o botão direito do mouse e selecione grupo ou apenas agrupe G, desculpe, basta Controlar G e, seguida, transforme-os em um componente. Então, vamos escrever uma animação de carregamento. Você vai criar outra variante. Nessa variante, você vai segurar esse grupo de máscaras e depois girá-lo em 25% Então você vai criar outro, e você vai girá-lo para o outro, quero dizer, um pouco mais Como você pode ver, estamos girando aqui 90 graus e depois outros 90 graus e, no final, vamos fazer um último 90 graus Então, vai pousar praticamente aqui. Então, isso significa que esses são basicamente seus quadros-chave. Então esse é o primeiro quadro e, em seguida, ele vai subir até aqui e depois virá aqui e girará até aqui, e depois voltará Então, esses são os quatro quadros principais que temos, ok? Então você vai seguir em frente, segurar essa vantagem, trazê-la aqui. Em vez de clicar, será após o atraso e fará com que o atraso seja zero milissegundos e o padrão será um, o que não é problema Então não edite nada aqui, apenas torne-o inteligente, animado e linear Agora ele deve estar se movendo linearmente, vai levar 100 milissegundos, que é um décimo de segundo para ir daqui até aqui Agora podemos estender isso e fazer exatamente a mesma coisa. Depois do atraso, zero, é isso. Enxágue e repita após o atraso zero e, em seguida, fecharemos esse ciclo. Vamos trazê-lo de volta para o primeiro após o atraso, zero. Então vamos testá-lo. Vamos colocá-lo aqui no meio e ver como fica. Reiniciar. Agora, como você pode ver , está indo muito bem. Agora, se quiser, o que você pode fazer é configurar a primeira animação para facilitar a entrada e a última para facilitar a saída. Vamos ver que tipo de efeito isso vai dar. Como você pode ver, há um bom efeito em que está diminuindo a velocidade aqui Mas eu recomendaria que, para todos eles, você viesse aqui, escolhesse todas elas e acessasse as interações e fizesse talvez 300 milissegundos, porque isso é muito rápido Voltando, vou torná-las 200 ou 300 Isso parece muito bom ou você pode simplesmente torná-lo linear onde não pare de jeito nenhum. Mas eu acho que isso é muito bom. Agora, a questão é: como fazemos isso para que, quando pressionamos um botão, isso apareça. É uma pergunta muito boa. Vamos continuar e excluir esses botões. Vamos excluir esses botões e criar um botão aqui e dizer processar ou enviar fatura. Em seguida, vamos centralizá-lo. Vamos centralizar isso também. Mas em vez de isso estar aqui, vamos retirá-lo e começar a trabalhar com sobreposições, algo sobre o qual falarei um pouco mais Mas o que faremos aqui é segurar isso e trazê-lo aqui e dizer que quando você clicar, você abrirá a sobreposição e ela ficará centralizada, então você pode escolher fechar a asa clicando do então você pode escolher fechar a asa clicando fora e deixar o fundo colorido de preto, a animação é dissolvida, a animação é dissolvida Agora vamos ver como fica. Eu pressiono enviar fatura e, em seguida, temos essa animação de carregamento Mas vamos remover essa coisa de fundo. Vou reiniciar, clicar aqui, e então você pode ver essa animação em andamento. Agora está sendo processado. Você poderia dar um passo adiante. Você pode ir em frente e dar um passo adiante e basicamente fazer isso forma que essa animação pare depois de um tempo. A maneira de fazer isso é ir em frente e criar um quadro. Remova o preenchimento, adicione esse círculo a ele, centralize-o e conecte-o ao quadro externo, vá até o quadro e adicione uma interação e digamos que, após 4.000 milissegundos, como em 4 segundos, você precisa fechar a sobreposição Agora veja o que acontece. Vamos apenas abrir esse quadro Assim que eu pressionar sind invoice, obterei a animação por 4 segundos e depois ela desaparecerá. Assim mesmo. Então, isso é muito legal porque imita o processo de você realmente enviar uma fatura ou ter uma animação, e essas são as pequenas interações que dizem ao usuário o que está acontecendo, o que aconteceu , o Então, uma vez que você faz isso, você diz enviar fatura, e então você obtém esse pequeno círculo Está funcionando, está carregando. E então, idealmente, você deveria aqui, fatura foi enviada com sucesso, seja o que for Você sabe, então essa é toda a ideia. É assim que se cria um ótimo conjunto de microinterações que se comunicam forma eficaz com o usuário para dar feedback, para que ele saiba que você está passando o mouse sobre um botão agora Você clica em que está pressionando um botão agora. Você está carregando a animação agora, o que significa que algo está sendo processado. Basicamente, é assim que você pode criar uma animação de carregamento de uma forma muito simples. Claro, como eu disse, você pode fazer isso maneiras muito mais complexas ou legais, mas isso é algo para você ir em frente e experimentar por si mesmo. Muito obrigado por ouvir, e nos vemos na próxima lição. 11. Interações de rolagem e gestos + Domínio do Smart Animate: Olá para outra aula do curso avançado Figma. Nesta lição, falaremos sobre vários conceitos, incluindo estouro, rolagem e gestos, animações Todos esses são conceitos muito diferentes, eu diria, mas estão muito conectados entre si de alguma forma. Eles estão todos interconectados. Pode parecer que isso tem a ver com isso? O que o estouro tem a ver com rolagem? Mas se você tem um pouco de experiência em programação, provavelmente sabe que esses dois termos estão um pouco relacionados. Quero esclarecer as diferenças entre essas ações e, ao mesmo tempo mostrar como você pode seguir em frente e configurar suas próprias interações exclusivas. Agora, falamos em outras aulas sobre microinterações, que é a ideia de ter um efeito muito pequeno que aprimore sua experiência de qualquer forma E o exemplo que pegamos foi um botão. Então, só para nos conectar a essa lição, quando você tem um botão e ele tem um efeito Her, é uma coisa muito simples e você não precisa absolutamente dele. Você pode simplesmente removê-lo. Você não precisa ter um efeito Her. É mais ou menos uma coisa estética que também tem uma funcionalidade que mostra ao usuário que isso é clicável Isso é algo em que você pode clicar ou com o qual pode interagir de uma forma ou de outra. Mas isso é mais em escala microscópica. O que vamos falar hoje é um pouco mais sobre é um pouco mais sobre macro, porque não se trata apenas de estética, mas de como você pode interagir com as coisas para obter mais informações ou chegar a algum lugar. Vamos falar menos e mais trabalhar e experimentar. Deixe-me mostrar do que estou falando. Então, vou abrir isso apenas para que possamos testá-lo. Aqui, temos várias maneiras diferentes de transbordar. Eu sei que agora você não tem certeza do que é um estouro. Vou explicar isso para você com bastante facilidade. Overflow é, na verdade, muito semelhante à ideia de rolagem Estouro é a ideia de que, quando você tem uma moldura, como esta, há itens que estão fluindo. Como você pode ver agora, quando eu examino as camadas aqui, você pode ver que essas cartas se estendem para fora da moldura. Aqui começamos a ter um problema. Que é o fato de que há informações fora do quadro. A questão é: como chegamos a isso? A resposta é por meio da rolagem. Na verdade, trata-se de rolagem, o fato de você poder rolar na vertical, na horizontal ou Mas o termo oficial que a Figma usa para isso é estouro Vou seguir em frente e configurá-los como pontos de fluxo. Teremos a vertical e, em seguida, teremos a horizontal. E os dois. Vamos experimentá-lo. No momento, já está funcionando. Está rolando para cima e para baixo. Quando chegamos à horizontal, como você pode ver, é disso que estou falando. É o fato de que algo pode rolar horizontalmente da direita para a esquerda E você pode ver, isso não está relacionado a subir e descer. É só para a direita e para a esquerda. Não é para cima e para baixo. Então, aqui temos um exemplo de um mapa que rola nas duas direções Você provavelmente já viu algum tipo de aplicativo de mapa que usa pessoalmente e pode ver que ele funciona exatamente da mesma maneira. Você está apenas rolando nas duas direções. Eles são muito, muito fáceis de configurar. A maneira de fazer isso é, antes de tudo, criar um quadro. Agora, esse quadro deve preferencialmente ser um layout automático, mas não precisa ser. Quando você cria um quadro, você segue em frente e aqui temos um quadro. Temos vários itens nele. Portanto, verifique se você tem itens que saem da moldura. Se eles não os deixarem , não funcionará. Se você tem essa moldura, eu a transformei em um layout automático, como você pode ver, adicionei esses itens e copiei, colei, colei, Pode ser qualquer tipo de aplicativo que tenha listas, e eu me certifiquei de que estivesse lotado. Depois de fazer isso, você vai para a moldura que contém esses elementos transbordantes. Você vai fazer um protótipo. Ok. Em seguida, você verá aqui o comportamento de rolagem e, em comportamento de rolagem, verá um estouro, e é aí que você clicará em Vertical Agora, normalmente, é configurado como sem rolagem. Vamos ver como isso se parece. Você realmente não pode rolar. Estou tentando rolar, não está funcionando, e depois voltaremos para a vertical, e é aí que funciona. Ok. É basicamente assim que você pode fazer isso. E a mesma coisa que você poderia fazer aqui. Mas o que fizemos aqui é um pouco mais diferente. Não transformamos o quadro inteiro em um layout automático, mas criamos um layout automático apenas para a parte que precisa ser rolada e que precisa ser deslizada Essa parte é a que eu quero dizer, e eu a transformei em uma moldura. Agora, esse quadro aqui é um layout automático com vários itens. Mas, novamente, o que você precisa garantir é que o quadro não contenha todos eles. Eu poderia ter feito com que abrisse o conteúdo. Mas quando você faz isso, fica um pouco difícil. Não funciona ou pode funcionar um pouco, mas não exatamente como você deseja. O que você faz é torná-lo menor e, de preferência, deve torná-lo tão grande quanto a área em que deve ser visto. Normalmente, essa é a área que deve ser vista. Agora, é claro, você ainda vê essa parte, mas a ideia é que isso não conta porque há preenchimento da direita e da esquerda Você pode ver aqui que existem essas margens. E da direita também. Isso não conta. Tudo o que conta está aqui, é basicamente assim que você pode fazer isso. Então, se eu quiser desmontá-lo, vou montá-lo novamente. Vou copiar esse item. Deixe-me remover isso, por exemplo, do caminho. Vou copiar isso e vou remover a moldura inteira. Agora não é uma moldura. Eu escolho todos esses elementos e, em seguida, mantenho as teclas Shift e A. Eu os transformo em uma moldura com um layout automático, diretamente. E então há 15 basicamente, é o espaçamento entre eles. Em vez de fazer qualquer coisa, vou para o prototype e vou para o scroll behavior overflow, e é aí que vou para a horizontal Ok. Mas ainda não chegamos lá. Ainda não chegamos lá. Não está funcionando. Você precisa diminuí-lo. Novamente, como eu disse, faça com que apareça apenas, mostre a área que normalmente pode ser vista. E quando você faz isso, funciona exatamente assim. Super fácil. É basicamente assim que você pode fazer isso. Não é grande coisa. Vamos voltar para voltar a ser como era, e pronto. Agora, chegando à última opção, aqui temos uma moldura. Eu não transformei isso em um autoau de propósito. Então, dentro desse quadro, você pode ver que eu adicionei uma imagem. Isso é só uma imagem. Mas você pode criar seu próprio mapa com muitos detalhes. Vai levar muito tempo, mas certifique-se de que esse mapa seja colocado em um grupo ou moldura para que você possa manter tudo junto, assim como esta imagem. E então o que você vai fazer é colocar essa imagem onde quiser. Eu apenas o mantive no centro e depois fui até a moldura e depois clico nas duas direções. E é isso. É assim que você pode seguir em frente e criar um mapa que rola nas duas direções Agora, vamos passar para outra coisa relacionada à rolagem, mas não exatamente Isso tem mais ou menos a ver com posicionamento. Vamos chamar isso de posicionamento. Eu trouxe aqui exatamente a mesma situação de rolagem vertical que tivemos Mas o que eu fiz aqui, coloquei isso em uma moldura, tudo isso em uma moldura, e fiz essa moldura. Eu o mantive como um layout automático, mas os tranquei aqui. Agora temos algo chamado posicionamento. Há várias coisas as quais eu gostaria de falar. Um deles, e isso é muito importante. É o que você chama de Navbar. Agora, esses itens, aliás, apenas esses elementos, eu os obtive dos ativos do material. Este é o kit de design de materiais para Android. Acabei de comprá-lo de lá. Você pode obtê-lo e é bastante responsivo, funciona muito bem, só para você experimentar. Vou segurar isso e trazê-lo para o layout automático. Mas vou clicar aqui, que basicamente ignora o layout automático e congela esse item do layout automático Eu o abro e coloco aqui Agora que eu coloquei aqui, isso é basicamente o que podemos chamar de barra de navegação Quero dizer, abreviação de barra de navegação. Essa é a barra que permite alternar entre guias diferentes Agora, normalmente, esse bar deveria ficar lá. Vamos transformar isso em um fluxo e chamá-lo de barra NAP. Agora, o que você vê, porém, é que ele não fica lá. Por quê? Porque esse é um quadro rolável que construímos aqui. Você pode percorrer todo esse quadro. Há uma solução para isso e isso está relacionado ao posicionamento. Tudo o que você precisa fazer é ir para o protótipo, ir do design ao protótipo e ir para a posição Em vez de dizer rolar com o pai, que é o padrão, vá em frente e escolha fixo ou fixo, ok? Então é isso que você precisa fazer. No momento, não podemos escolher fixo, e o motivo é porque colocamos isso dentro de um quadro. Portanto, há uma moldura dentro de toda a moldura. O que você precisa fazer é colocar uma moldura dentro de uma moldura para que fiquem duas aninhadas Vamos cortar isso com o Control X e colá-lo aqui. Portanto, certifique-se de não colocá-lo em outra moldura e , em seguida, viremos aqui e poderemos escolher o conserto. Isso significa permanecer no lugar. Agora vamos testá-lo. Como você pode ver, ele permanece em seu lugar e agora você pode alternar entre diferentes partes. Esse é um recurso muito legal que você pode usar. Muitos sites os usam na parte superior. Você tem seu próprio menu, muitos aplicativos os usam na parte inferior. Existem diferentes padrões comuns. Mas tudo o que você precisa saber é que você pode corrigir isso em seu lugar usando esse recurso de posicionamento, mas temos outro recurso. Então, eu vou fazer uso desse rótulo. Essas são categorias, basicamente. Vou inseri-los aqui e vou retirá-los. Quero inseri-los entre esses itens, o que é difícil de fazer. Vou cortar isso com Control X e colar aqui, vou mantê-lo do lado de fora. Agora, neste quadro, temos isso, esses rótulos, e depois temos esses, ok? A razão pela qual eu o mantive do lado de fora é porque eu quero que fique pegajoso. O que significa sticky ? Vamos ver. Basicamente, é quando você escolhe o posicionamento aqui pegajoso, o que significa parar na borda superior Então isso significa que esse item não está fixo, mas quando você chega até ele, ele fica com você, ok? Então, conforme você percebe, esse movimento permanece com você. Muitos aplicativos usam isso, especialmente se você estiver percorrendo uma lista de coisas e tiver seus filtros aqui Por exemplo, digamos que este seja um aplicativo de música, isso seria, eu não sei, como música pop ou eu não sei, isso seria rock e isso seria metal e isso seria country. E seja o que for, você tem esses rótulos e está caindo, e então você pode simplesmente escolher entre eles. Então, eles ficam no topo para que, quando você desça, você sempre possa escolher entre eles. No entanto, temos um problema aqui, e esse é um problema que você pode encontrar. Quando rolamos até aqui, percebemos que todos os outros itens estão no topo de nossas etiquetas, certo? Isso é confuso. Por quê? Quero dizer, o rótulo deveria estar no topo, certo? É assim que deveria ser . É assim que eu sei. Bem, isso é verdade, mas podemos corrigir isso de maneiras diferentes. Antes de tudo, acesse o layout automático e certifique-se de que seus chips não sejam transparentes. Se eles não tiverem um preenchimento, é claro que serão transparentes e você verá através deles. A primeira coisa que percebemos é que eles são transparentes. Então vá em frente e dê uma cor a eles ou apenas certifique-se de que todo o quadro aqui tenha uma cor. Eu posso ver que todo o quadro tem um preenchimento, então não precisamos preencher cada um deles. Toda essa moldura está cheia de, no entanto, ainda está sendo transparente. A razão é porque está aparecendo por trás desses elementos por trás deles. Mas, ao mesmo tempo, quero dizer, esse é um layout automático. Então, se eu mover isso para baixo, então não vai aparecer. Quero que apareça, mas, ao mesmo tempo, quero que apareça na frente do texto. Bem, há uma solução rápida para isso. Basta acessar todo o quadro que contém esses elementos. E então você vem aqui. Portanto, no Autoayout, você tem essa opção de ajuste ou configurações E aqui você verá o empilhamento do Canvas e ele diz o último no topo Isso significa que os últimos itens são considerados acima dos itens acima deles. Então, isso está acima disso, e esse é exatamente o problema que estamos tendo. Então, vamos inverter isso e colocá-lo em primeiro lugar no topo. E assim, agora os rótulos estão em cima desses elementos, quero dizer, de todos eles. Então, agora temos esse menu fixo, e temos esse menu adesivo ou não exatamente um menu, mas esses banners adesivos ou etiquetas adesivas que temos Basicamente, é assim que você pode usar diferentes comportamentos de posicionamento a seu favor. Dessa forma, você pode configurar seu aplicativo móvel ou seu site para ser um pouco interativo. Então, nesse sentido, não será chato, basta você percorrer as coisas, mas também será capaz de mostrar elementos às pessoas e mantê-los fixos ou fixos se elas precisarem, então lembre-se apenas como uma nota, às vezes, ao fazer isso, você tem alguns problemas como, por exemplo, aqui, temos a barra NAP aparecendo como se estivesse atrás do texto Mas quando realmente analisamos o design, ele se mostra bastante normal. Então, às vezes, com esse comportamento de rolagem com esses posicionamentos, você pode ver alguma diferença entre seu design, o que você está fazendo aqui e a exibição real Então, tenha isso em mente. É um pouco difícil editar as coisas porque parece que algo está errado aqui, mas não há. Então, tenha isso em mente. Ok. Agora, há mais uma coisa que eu gostaria de explicar , que é, na verdade, a ideia de gestos Você provavelmente já usou um aplicativo em que ele tinha gestos. Acho que a maioria dos telefones celulares hoje em dia tem gestos, e estou falando do fato que quando você rola ou dedo da o dedo da parte inferior da tela para cima, algo acontece e isso é na verdade, o fato de você fechar o E quando você rola e mantém o dedo acima, você rola como se deslizasse de baixo para baixo e segure assim, rola de baixo para cima O que acontece é que você geralmente vê todos os aplicativos abertos e assim por diante. E quando você desliza de cima para baixo, você também vê seu centro de controle ou vê suas configurações de WiFi ou o que quer que seja Então, isso é algo que você também pode aplicar aqui. Vou te dar um exemplo. Muitos aplicativos têm esses botões nos quais você pode alternar entre diferentes guias do Nabbar Mas alguns deles também têm o movimento de deslizar, e isso é algo que podemos implementar Veja como você pode fazer isso. O que eu vou fazer agora é escolher esta página horizontal, e eu vou trazer esta e esta, e eu vou trazê-las aqui. Vamos derrubá-los e colocá-los como nossa segunda aba. Então, agora que queremos escolher essa barra de navegação, subimos, vamos até o quadro e abrimos as camadas, e veremos na parte fixa que diz barra de navegação fixa e rolos Essas são as coisas que realmente rolam com você e você verá todas as outras. Mas agora, vamos começar com a correção, ok? Então esse é o que queremos. E o que podemos fazer é copiar isso e colar aqui na horizontal. Nós o colamos aqui, o que vamos fazer é escolher esse rótulo do meio, e vamos dizer selecionado, e vamos remover o selecionado daqui Esta é a nossa aba no meio. E então vamos repetir isso. Copie isso, cole, verifique se está corrigido e, em seguida, vamos escolher o da direita selecioná-lo. Ok. Agora, normalmente, de preferência, o que você faria seria basicamente trocá-los. Então, se eu vier aqui e escolher esses, posso trocá-los. Eu posso dar a ele um ícone diferente. Quero dizer, aqui está a estrela. Há muitos ícones diferentes aqui. Este, digamos, é um mapa. Vamos ver se eles têm algo sobre o mapa ou digamos que seja apenas uma pesquisa. Então eu virei aqui e também escolherei pesquisar. E depois aqui também. Para o segundo, não sei, vou ficar com a estrela e, para o primeiro, deixe-me escolher alguma coisa. Só quero a flecha de jogo. Então eu vou fazer a mesma coisa aqui. Vou apenas jogar. Agora, normalmente faria sentido se você tivesse isso como um componente, para não precisar alterá-lo a cada vez. Mas de qualquer forma, agora que fizemos isso, o que vamos fazer é configurá-lo para que, com apenas um clique, você possa percorrê-los. E é assim que um botão normal seria. É assim que sempre fizemos. Então, a maneira de fazer isso é escolhê-los, por exemplo, trazê-los aqui e dizer, ao clicar, navegue até aqui. Quero dizer, pode ser instantâneo ou inteligente. Então essa é uma boa maneira de fazer isso. E podemos escolher o do meio, este e esse, e então podemos simplesmente trazê-lo para o quadro do meio. Então, por fim, poderíamos escolhê-los e liderá-los. Opa, escolha o errado. Vou escolher esse elemento, rótulo e rótulo, e vou fazer com que eles levem até aqui. Apenas segure o sinal positivo e traga-os aqui. Agora eles vão navegar até ele, você não precisa configurá-lo. Tudo está bem. Agora vamos testá-lo. Eu clico aqui, ele vai lá. Perfeito. É muito legal porque está apenas fazendo você acessar a guia de que precisa Ok, então como podemos resolver isso? Bem, há uma solução limpa. Veja, nós o conectamos muito aqui. Tivemos interações por toda parte. Então, o que você vai fazer é escolher as opções de arrastar que você precisa. Então esse é um deles. Esse é um deles. E essas são as opções de arrastar. Isso não foi um. Esse é um deles. Agora acho que temos todos eles. O que você vai fazer é seguir em frente e acessar sua animação de arrasto. Em vez do Smart Animate, você escolherá entrar ou pressionar. Push está muito bonito Vejo que agora não escolhemos todos os travestis. Vamos fazer isso um por um. Você vai querer arrastar daqui para lá. Isso significa que deve vir da direita para a esquerda. Assim. E, ao mesmo tempo, há o tipo oposto de animação, da direita para a esquerda, que deveria ser assim. Agora vamos testar isso por conta própria. Bam. Assim, podemos mudar da direita para a esquerda. Esse é exatamente o tipo de animação que gostaríamos de ter. Mas há um problema. Eu olho para o Navbar. Também está mudando de uma forma estranha. Bem, a solução para isso é clicar em animar camadas correspondentes Eu vou escolher o outro também. Isso garante que, se houver uma camada correspondente como essa Navbar, ela não seja afetada Mas, em vez disso, seria animado de uma certa maneira. Como você pode ver, é exatamente assim que funciona. É muito bom. Vá em frente e experimente. Eu também o conectei ao Navbar, mas você realmente não precisa disso Eu só vou deletar isso. Você não precisa disso. Agora vamos ver o que podemos fazer. Nós vamos escolher esses também. Então, esse da direita para a esquerda. Isso significa que a animação deve ser assim, e agora vamos escolher o oposto. Deveria ser assim. O que mais temos? Algo mais? Vamos dar uma olhada. Nós esquecemos Temos que garantir que haja camadas animadas correspondentes Essa é a configuração que queremos e agora vamos testá-la. É difícil com este porque você tem um mapa, você não pode realmente rolar ou fazer o gesto, então você tem que ter cuidado quando se trata disso Mas vamos ver, eu fui daqui para aqui, e eu também fui para lá. Mas, como você pode ver, às vezes surgem alguns problemas porque não há antecedentes aqui. Por isso, às vezes está tendo algumas dificuldades. E normalmente não teria um problema, mas como isso está indo para a esquerda, tem um problema. Agora, a maneira de corrigir isso é garantir que itens como, por exemplo, esse quadro tenham um preenchimento branco. Quando você rola, não é transparente, não há nada por trás disso. Isso garante que não haja nenhum problema e a mesma coisa aqui, podemos garantir que tudo isso, possamos colocar todos eles. Podemos colocá-los em uma moldura, dar a eles um pouco de preenchimento e outros enfeites, e podemos apenas garantir que tenham um fundo branco Agora, quando testamos, sim, quero dizer, ainda é problemático, certo? Então, sim, você tem que tomar cuidado. Quero dizer, porque aqui algo mais está acontecendo. Você sabe, isso é algo a ser observado. Você precisa ter certeza de que está pronto para esse tipo de problema. Certifique-se de tentar resolvê-los à sua maneira. Mas, como eu disse, esse é um processo um pouco complicado. Nem sempre funciona perfeitamente, e você precisa se certificar de que precisa trabalhar nisso. Como você pode ver aqui com a Navbar, há alguns problemas acontecendo, e isso acontece, mas você não deve aceitar que prosseguir e tentar corrigi-los de uma forma ou de outra Talvez uma solução para isso seja fazer o arrasto também funcione com a própria Navbar. Segurando toda a barra de navegação, eu poderia arrastá-la e fazê-la ir para a esquerda desse jeito Vamos ver como isso funciona. Então você vê, com a própria Navbar, eu posso fazer isso Seja como for, faz sentido. Quer dizer, estou rolando aqui. Estou examinando meu mapa. Eu não quero ir para outro lugar. Mas se eu for longe o suficiente, ele rolará. Se eu for para a esquerda, funcionará. Aparentemente, nem sempre. Mas sim, sim, verifique se funciona com o menu com a barra de navegação e pronto Sim. Mas, além desses bugs, é basicamente assim que você pode usar gestos e não apenas com isso, não apenas com não apenas com Há muitas animações diferentes que você pode fazer. Então vá em frente, experimente-os, veja como eles funcionam para você. E é disso que se trata trabalhar no Figma. Trata-se de experimentar e ver o que funciona e o que não funciona Nesta lição, aprendemos sobre posicionamento. Aprendemos sobre estouro e rolagem e, agora, no final, aprendemos sobre animações com gestos Espero que você tenha entendido isso e que possa seguir em frente e praticar sozinho agora. Muito obrigado por ouvir, e nos vemos na próxima lição. 12. FigJam: Olá e bem-vindo a outro capítulo do curso Advanced Figma Neste capítulo, exploraremos diferentes tipos de serviços ou ferramentas fornecidos pela própria Figma Muitas vezes, dependendo da sua assinatura, essas são ferramentas que você recebe junto com o pacote. Mas, novamente, isso realmente varia com sua assinatura do FIGMA e alguns deles também podem estar acessíveis no nível gratuito se você for estudante ou se alguma forma, conseguir obter a assinatura gratuita Nesta lição, falaremos sobre o Fig Jam aqui. Agora, você vê que há design. Este é o principal produto que eles fornecem ou a principal ferramenta. Depois temos Fig Jam, slides, buzz, side e M. Então, hoje vamos começar com Fig Jam, e tudo que você precisa fazer é ir até esse ícone aqui e clicar nele E assim, abrirá uma janela do FikJam. Agora, isso pode ser um pouco chocante para você. Tem sido para mim, o porque você provavelmente está acostumado com a tela no modo escuro se não a configurou e, de repente, ela fica imediatamente branca. Mas essa é basicamente a interface que você obtém no Fike Jam Vamos começar dizendo o que é o Fike Jam. Fig Jam é uma ferramenta para tocar com seus amigos, assim como alguém toca música em uma banda ou com músicos, assim como alguém toca música em uma banda ou com músicos, eles simplesmente tocam música de uma forma aleatória, que pode ser caótica, que não é que pode ser caótica, estruturada ou praticada especificamente, mas de uma forma de criar música juntos para criar algo com a comunidade, com as pessoas com quem você está e conseguir algo e conseguir Isso é exatamente o que você deveria fazer. Como designers. Agora, é claro, você também pode trabalhar nisso com outros designers, com gerentes de projeto e até mesmo com engenheiros. Isso é praticamente autoexplicativo. É muito simples em comparação com a outra parte do FiGMA Primeiro, temos um marcador aqui. É aqui que você pode simplesmente desenhar coisas, desenhar suas ideias aqui e configurá-las. Você pode escolher um marcador, escolher uma fita washi e uma borracha e apagar o que você fez Ao mesmo tempo, quero dizer que esse é um novo recurso, mas aqui está dizendo que você sabe, você pode usar a IA para usar esse recurso, vá em frente e crie determinados gráficos ou qualquer outra coisa. Mas vamos deixar isso de lado por enquanto. Além disso, quero dizer, temos várias coisas. Temos notas adesivas. Isso é muito legal. Quando você está com a equipe, você pode colocar uma ideia e dizer, como ou simplesmente dizer, este é um aplicativo para idosos que desejam se conectar on-line. Você pode simplesmente colocá-lo lá e movê-lo, movê-lo para mais tarde ou adicionar outras notas adesivas ao lado Você tem formas, mas muitas coisas são muito rudimentares É muito simples. Você não está criando coisas que parecem loucas. Agora, obviamente, você pode configurar as coisas, alterar cores específicas, mas não deveria pensar nisso tão profundamente. Isso deveria ser algo muito simples, apenas para ter ideias e debater com a equipe Você também pode criar esse tipo de gráfico, o que é muito bom porque você pode expandir coisas e outros enfeites, criar outras ramificações, o que é muito bom Você pode adicionar apenas texto, ideias ou ideias normais para o site ou qualquer outra coisa, e eu posso simplesmente colocá-los aqui. Também temos seções. Isso também é muito semelhante ao que temos no design do Figma Temos mesas, o que é bem arrumado. Você pode criar uma tabela e escolher em quantas colunas você tem, em quantas linhas e simplesmente escrever nela. É muito autoexplicativo, muito fácil. Vá em frente, experimente e mergulhe nele. Mas todo o propósito disso é basicamente trabalhar com pessoas e debater ideias com elas de forma eficaz. Você também pode ter um selo com sua própria foto, o que é bom porque você pode dizer: Esta é minha ideia ou eu aprovo Ou melhor ainda, você pode simplesmente colocar um like. Então, quando alguém vem, eles podem ver quem colocou isso como, Oh, a pessoa que aprovou é Ahmed, ótimo Você também pode usar o recurso normal de comentários, e você também tem alguns dos recursos de IA aqui, e então você também pode ter seus widgets e outras coisas, como adesivos e outros É muito semelhante à seção de design normal, mas tem apenas mais algumas adições que tornam sua vida um pouco mais fácil Você também tem alguns modelos aqui, o que é bem legal. Hum, podemos adicionar um, por exemplo. Você pode ver que esses modelos mostram exatamente, quero dizer, o que você precisa. Mostrar ontem, hoje bloqueia itens de ação e é a mesma coisa Para diferentes membros da equipe, você pode fazer isso todos os dias para organizar ou não todos os dias, mas a cada dois dias ou algo assim para organizar o que você deve fazer, o que você quer fazer ou seus bloqueadores e E aqui você tem sincronização diária, boa para receber relatórios de tarefas, atualizações, blá, blá, blá Tudo isso é muito bom. Então vá em frente e experimente. É uma boa maneira de não levar tudo tão a sério , está no figma, e nem tudo é apenas design, wireframing e prototipagem, mas às vezes você está apenas tendo Você só quer colocar algumas notas adesivas aqui e ali. Você pode dizer: Ah, vou usar a cor vermelha da nota adesiva para que você possa diferenciar, mas quero dizer, ela tem seu nome Sim, é basicamente disso que trata o Fake Jam. Há mais algumas coisas que você pode explorar aqui, como cronômetros, música, que são recursos muito bons que você pode adicionar à sua sessão E como vocês estão trabalhando juntos, se vocês também estiverem participando da conversa, vocês podem conversar um com o outro, tocar música ou ter um cronômetro Então, sim, é um recurso muito interessante. Obrigado por ouvir, e nos vemos na próxima lição. 13. Buzz do Figma (Equipes de marketing): Portanto, outra ferramenta que a Figma agora tem e que é mais ou menos recente é chamada Figma Vá em frente e vá até aqui e clique nele, e então você abrirá o arquivo Figma buzz E a primeira coisa, ele vai pedir que você escolha um modelo. Agora, você pode escolher, vá em frente e comece seu próprio design do zero. Realmente depende totalmente de você. Mas vamos dar uma olhada. O bom é que ele diz que você pode iniciar um ativo em branco e fornece algumas sugestões. Instagram, Facebook, X e assim por diante. Antes de prosseguirmos, deixe-me dar um passo atrás e dizer do que realmente se trata o Figma Buzz Figma Buzz é uma ferramenta que mais se pensa. A ideia geral é facilitar o gerenciamento e design de mídias sociais. Porque Figma percebeu que muitas pessoas precisam criar para mídias sociais Quer dizer, está se tornando cada vez mais popular, especialmente com ferramentas como o Canva Muitas pessoas estavam usando o FIGMA como uma ferramenta de design para muitas coisas, incluindo mídias sociais Eles pensaram: por que não tornar isso oficial. Mas, em vez de apenas torná-la a mesma ferramenta complexa, assim como usar o Photoshop, Photoshop é bem complicado se você estiver apenas fazendo gerenciamento de mídias sociais Então, eles tornaram muito mais fácil para designers e gerentes de mídia social criar e interagir. Então, vou explicar isso para você daqui a pouco. Então, o que você pode fazer é, antes de tudo, avisar que você pode copiar seu trabalho do Figma design para o Figma Buzz e publicar modelos guiados ou simplesmente copiar e colar seu trabalho porque às vezes é mais confortável trabalhar no Tem muito mais ferramentas. Mas, como eu disse, você pode começar com um conjunto em branco e eles já fornecem alguns modelos. Quero dizer, não modelos, mas formatos. E então você tem alguns modelos da própria Figma. E você também classificou por categoria. Anúncios, impressos. Você pode até mesmo ter um negócio de material impresso. Eu os acho muito legais, mas, para ser sincero, estou um pouco decepcionado com a quantidade ou a variedade Não tenho certeza do quanto eles o expandiram agora, mas por um longo tempo faltou muito, especialmente porque até agora você pode ver que isso não é muito O fato é que acho que eles estão confiando principalmente em seu próprio trabalho Não tenho certeza se está aberto às pessoas no momento, é só da Figma É muito limitante. Mas se quiser, você pode escolher um modelo e simplesmente adicioná-lo aqui. Você tem aqui texto, imagem, texto. Agora, só para apresentar isso a você, existem dois modos. Existe o modo de design, que é muito próximo ao modo Figma normal Quero dizer, ele tem a maioria das ferramentas aqui. Existem algumas diferenças, mas é muito parecido e então você tem o modo buzz Portanto, o Buzz Mode é principalmente para gerentes de mídia social, gerentes de projetos, pessoas que talvez não tenham muito a ver com o design em si, mas na verdade estão editando o conteúdo Então, alguém que não tem muito a dizer sobre o layout ou talvez não se importe muito com o layout, mas se preocupa com o que está escrito aqui, qual imagem vem aqui, ou talvez como ela é classificada , como está organizada Então, como eu mencionei, aqui você pode fazer muitas coisas, mas você pode ver que as camadas são colocadas aqui, e aqui você tem suas diferentes molduras. Além disso, você tem quase os mesmos controles aqui, você tem quase os mesmos controles exceto que não tem a guia de prototipagem Você também pode ver a visualização de ativos, portanto, apenas um ativo ou você pode ver a visualização em grade. Isso permite que você crie, quero dizer, várias versões, linhas e colunas. E então o que você pode ver é que você pode ver, por exemplo, aqui, você tem esse e aquele design diferente, ou você pode ver um deles de cada vez, como slides ou algo parecido. Então, vamos fechar por enquanto os modelos e devolver a este. Agora, a maioria das coisas de design sobre as quais já falamos, vamos falar sobre o Figma Buzz O que é realmente interessante aqui é que é muito limitado. Ele oferece apenas algumas coisas, como cores. Você pode escolher a cor que quiser, mas, como você pode ver, não é a primeira opção que você tem. Você pode escolher as bordas e outras coisas, mas é muito, muito simplificado, como se fosse para bebês. E isso não quer dizer que gerentes de projeto ou gerentes de mídia social não sejam tudo isso ou não entendam, mas é apenas o fato de estarem em movimento e às vezes não se importarem muito com o design. Então, para eles, é muito mais importante ver como as coisas funcionam juntas e o conteúdo delas. Portanto, se eles já tiverem um modelo, poderão trabalhar com ele. Não precisa ser perfeito. Portanto, o melhor fluxo de trabalho aqui que eu sugeriria é que alguém crie os modelos aqui e, em seguida, haja um gerente de mídia social que vá em frente e use os modelos em seu design. Como você pode ver, é muito simples. E há ferramentas aqui que eles podem usar à sua disposição. Assim, eles podem adicionar determinadas mídias que também são fornecidas pela FiGMA Eles podem adicionar texto. Agora, esse texto, como você pode ver, tem muito texto básico. Eles estão tentando copiar mais ou menos FiGMA com essa ideia. Eles podem inserir certas coisas como ícones ou adesivos e outros enfeites, e, claro, existem plug-ins porque sempre existem Você pode ir em frente e explorá-los sozinho. Mas o que é realmente interessante que você pode ver que tudo isso é bastante normal. O que é realmente interessante é a opção de criação em massa. O interessante disso é o fato de você poder fazer upload de uma planilha com muitas É uma planilha que diz que o título deve ser esse e, em seguida, a descrição deve ser essa e esse deve ser o texto pequeno Depois, você pode configurar isso para quantas postagens quiser e criar todas de forma simples, fácil e imediata, apenas com a Figma acima Você não precisa inserir todas as informações manualmente apenas fazendo o upload do documento Isso é incrível porque muitas pessoas planejaram seu conteúdo com antecedência e , em vez de colocar cada texto, copiar, colar, copiar e colar, elas podem simplesmente fazer o upload de toda a planilha do Excel que possuem, o que é muito legal. E aqui você pode ver que essa também é uma versão muito mais simplificada do que você vê aqui. Isso é muito visual e é muito baseado em texto. Então, isso é para pessoas que dizem: não quero mexer nisso, não quero quebrar o layout, não quero quebrar o modelo. Então você pode simplesmente ir em frente e dizer a eles: Ok, você não precisa quebrá-lo, mudar as coisas da parte do texto. E também é mais rápido fazer isso. Então você pode dizer: Olá, Los Angeles, agora vamos fazer isso. Olá em Nova York. E então estamos procurando uma Brista, é você? Claro que isso pode ficar. E depois nova localização. Eu não sei o que. E então você também pode editar a mídia e procurar uma imagem, escolher esta ou esta e encerrar o dia. Assim, você simplesmente muda as coisas. É basicamente assim que essa ferramenta funciona. Eles não têm muita coisa acontecendo com essa ferramenta, mas é exatamente isso que torna perfeita, pois cria um ótimo fluxo de trabalho entre designers e gerentes de mídia social. 14. Slides do Figma: Então, hoje, vamos falar sobre mais uma ótima ferramenta fornecida pela Figma Na verdade, parece que é apenas um pacote completo que vem com a assinatura e continua sendo oferecido Hoje vamos falar sobre os slides do Figma, e a história da origem é muito boa porque muitas pessoas estavam usando Figma basicamente como um substituto ou alternativa ao PowerPoint por algum motivo porque era muito mais fácil criar lá E a FiGMA percebeu isso e aproveitou a oportunidade e criou sua própria seção para criar slides, o que é muito inteligente Ao acessar os slides do Figma, você verá novamente a mesma ideia, assim como tivemos com outros serviços ou outras ferramentas Você pode começar do zero. Você pode começar com um esboço que você fez na sua geleia FIG, o que é super legal Quero dizer, isso é bom porque é baseado em seu outro trabalho, o que é bom. Novamente, porque você não precisa fazer tudo manualmente. Ou você pode criar um modelo e fazer com que ele seja reutilizável. Você também pode escolher qualquer um desses modelos que você tem aqui, alguns deles bons. Você pode seguir em frente e escolher um. Esse é muito bom. Tema de grade de pixels, e você pode escolher quais deseja adicionar. Você pode adicionar novos slides um por um, ou você pode adicionar todos eles e ver quais você quer manter e quais você quer se livrar. Estou apenas adicionando um por um. Novamente, eles realmente acertaram em cheio em termos de simplicidade e também criaram um layout muito semelhante ao PowerPoint Você pode ver que geralmente estão suas anotações, suas anotações do apresentador, então você pode fechá-las ou abri-las quando quiser Então você tem seus slides aqui. Você também pode vê-los como se fossem molduras, que é como muitas pessoas costumavam criar seus slides antes do lançamento desse recurso. Então você tem um estilo de modelo, então você pode continuar aqui, você pode embaralhar as cores ou alterá-las Como você pode ver, remixe-os, que é muito legal, porque muitas vezes você quer experimentar algo diferente, mas não sabe exatamente como fazer isso Sim, vamos ver se podemos voltar à nossa cor original. Não é realmente original, mas funciona e você também pode ajustar mais as coisas de uma forma mais próxima. Assim, você pode ir diretamente para as cores e alterá-las da maneira que quiser. Por exemplo, eu não gosto desse azul. Pode transformá-lo em um azul diferente. Depende totalmente de mim. O que é bom. Ter essa opção é muito bom. Mas você pode ver que tudo está simplificado. Seu plano de fundo é de uma única cor. Você pode dizer, não, eu não gosto disso. Vamos fazer disso um gradiente. Que tipo de gradiente? Deixe-me te mostrar. Eu vou fazer um gradiente sozinho. Sim, você pode ir em frente e fazer isso e, é claro, alterar as cores de sua seleção assim como faria com o Figma Então você tem algumas das ferramentas aqui, algumas delas já conhecemos texto, imagem, isso é outra coisa, mas é apenas uma função de importação. Basta clicar nele e escolher a imagem que deseja adicionar. Adicione uma foto bem rápido. Então, eu posso simplesmente colocá-lo aqui. Agora é colocado no texto, o que é muito bom, ou posso trazê-lo de volta. E então eu posso arrastá-lo e colocá-lo aqui. Simplesmente muito simples e intuitivo. Também podemos criar qualquer tipo de forma que quisermos. Podemos usar esse recurso aqui, que é a interação ao vivo. Esse recurso permite adicionar puxões, carimbos, alinhamentos, coisas que tornam sua apresentação interativa. Só para mostrar, por exemplo, como seria a aparência de um furo Você pode adicionar uma opção aqui e dizer: Não sei Você pode dizer vermelho ou azul. Não é azul claro. Depois, você pode mostrar isso ao seu público e fazer com que eles votem e interajam com ele. Deixe-me mostrar como seria. Aqui ainda não temos votos e então as pessoas podem escolher vermelho ou azul e depois votar nele. O que é interessante sobre esse recurso é que ele é pensado dessa forma para que as pessoas participem de seus slides. Você não está apenas compartilhando sua tela com o público, mas pode estar convidando pessoas para participarem da sua apresentação Você simplesmente copia isso aqui e depois entrega a alguém e essa pessoa vem assistir sua apresentação ao vivo enquanto você a apresenta ou você pode compartilhá-la aqui. Mas não precisa ser assim. Só é assim quando você tem elementos interativos como este em que as pessoas podem votar. Mas sim, você pode ver outros tipos de interações, para que as pessoas possam colocar seus selos As pessoas podem se alinhar, se posicionar , eu concordo, eu discordo Deixe-me mostrar como é. Concordo ou discordo totalmente para que possa votar. Mas parece que não está aparecendo corretamente. Resultados ocultos. Então eu posso dizer, você sabe o que? Eu concordo ou discordo totalmente. É um recurso muito simples, para ser honesto. É só colocar uma foto onde quer que eu clique. Mas isso pode adicionar alguma interatividade ou você pode adicionar um protótipo Então você tem a seção de comentários. Você tem sua IA e plug-ins. E aqui você também pode adicionar tabelas, blocos de código, ícones e muitas coisas diferentes. Novamente, assim como sempre nos acostumamos, você sempre pode voltar ao seu modo de design, o que lhe dá muito mais controle. Quero dizer, esse painel de design, esse menu lateral é muito familiar para mim. É confortável e eu sei exatamente no que estou clicando e o que está acontecendo. Eu posso criar coisas complexas em vez de apenas escolher cores simples. Eu posso criar efeitos complexos e simplesmente brincar com as coisas. Por que não? Essa é toda a ideia, eu acredito. Que, se você precisar , sempre terá esse modo para poder sempre voltar ao modo de design e criar o design da maneira que desejar. Então, é mais ou menos assim que a ferramenta se parece. Vá em frente e experimente sua próxima apresentação e me diga como funciona. Não é exatamente para todos, mas se você acha que isso é algo que você gostaria, vá em frente. Obrigado por ouvir e nos vemos na próxima lição. 15. Sites do Figma (Visão geral): Sites Figma, você já deve ter ouvido falar disso. Se você não tiver, então você precisa. Embora eu acredite que ainda esteja na versão beta , ainda não está 100% desenvolvido adequadamente. Não está lá fora. Mas o Figma sites é uma ferramenta que permite criar um design a partir do Figma de um site e publicar tudo a partir do Como você pode ver aqui, diz Beta, então crie e publique seu site inteiro figma Beta Isso permite que você crie um site responsivo, interativo e totalmente pronto É praticamente incrível. Vamos testar isso. Agora, é claro, você tem que saber que isso é muito limitado. Podemos começar com um modelo apenas para mostrar o que outras pessoas fizeram. Novamente, há muitas limitações. Mas vamos escolher algo que pareça difícil de fazer. Você sabe, não apenas uma página normal. Eu acho que esse é um layout interessante, quero dizer, esse é um layout muito interessante. Eu posso clicar e ver como eles fizeram isso. Não é tão complexo, mas podemos seguir em frente e visualizar este site no navegador. Aqui está o site e você pode ver que funciona. Quero dizer, para ser honesto, acho que este é o melhor, não exatamente o melhor site ou exemplo que podemos ver , não é tão ruim. Quero dizer, a imagem não é de alta qualidade, mas talvez porque é um site FiGMA ou porque é apenas um site de teste, parece que Mas é incrível e revolucionário que você possa criar sites a partir do Figma e publicá-los e publicá-los com pouca ou nenhuma habilidade de programação Assim, podemos escolher outro modelo agora e dar uma olhada nele, algo, novamente, que não é tão típico. Mas eu não sei, isso parece muito bom, muito legal. Talvez você possa continuar. Sim, vamos ver o que eles têm aqui. Vamos usar esse modelo. Vamos usar o modelo e ver como ele se parece e ver se podemos publicá-lo apenas para testá-lo. Você pode ver aqui os ingredientes de hoje, acelga suíça, morda-me, dose diária de vegano, então você tem alguns produtos Hum, ou itens no menu, eles ainda estão carregando as fotos. E você pode ver aqui, esses são os pontos de ruptura. Já falamos sobre eles, e é basicamente assim que você cria um design adequado, e você pode ver os diferentes pontos de ruptura aqui e eles estão anotando entre os valores que essa tela mostraria. Então, isso é 1280 pixels a mais. Isso é 800-1279 e esse é 1-799, o que é 1-799 Vamos ver como seria a aparência desse site. Assim como abrir a versão prévia, isso basicamente nos permite ver como ela se parece, e eu posso vê-la no tablet, posso vê-la em um telefone e posso tentar interagir com os elementos. Quero dizer, isso deve ser mais avançado do que o Figma porque isso não é simplesmente, você sabe, FiGMA, este é um site interativo que deve interagir com os usuários Vamos ver. Vamos para a página Sobre mim, estamos encontrando esse cara. Vamos para o TikTok e na verdade , está nos levando ao Tik Portanto, os links estão funcionando corretamente. Agradável. Mas o que me deixa confuso é que, quando você vai para casa, eles parecem clicáveis. OK. Eu o abri. É clicável Achei que eles também eram clicáveis, mas na verdade não são. Eu só vou voltar. OK. Então, vamos ver a salada cítrica de maçã. Acho que eles só paginam ou conferem minhas receitas veganas diárias Sim, diz sopa de tomate e depois é sempre manjericão Kali, a melhor Mas acho que isso é apenas um exemplo , porque é apenas um modelo. Mas isso deveria ser algo publicável. Vamos ver o que acontece quando compartilhamos esse link ou quando o publicamos. Você pode clicar em Publicar e dar um título ao site, ver também os problemas que você tem aqui. Em termos de layout automático, em termos de transbordamento e em termos de acessibilidade Isso realmente é real. Eles ainda não estão lá, mas é muito legal o que estão fazendo Sim, você pode ver como é. Temos muito mais opções diferentes aqui. Você está adicionando uma página da web, é apenas uma página e, em seguida, pode adicionar a ela um ponto de interrupção para tablet, um ponto interrupção para celular ou um personalizado Desde o início, isso é muito diferente, em vez de apenas quadros. Então você tem o Sigma make, sobre o qual falaremos mais tarde, e você incorpora, tem formas e, em seguida, tem as ferramentas normais de caneta e lápis, importação, importação de imagens, texto, comentário e assim por diante Muitas coisas são semelhantes Você pode encontrar suas camadas aqui, assim como está acostumado, então suas páginas da web, mas você pode encontrar aqui. Você pode ver que temos uma casa para entrar. Essas são as três páginas principais que temos por enquanto, mas você pode ver as interações ou a prototipagem e ver como elas estão conectadas umas às outras Agora, todos os botões aqui se conectam a esta página, mas normalmente cada um deve ter seu próprio destino de link. Cada um deve ter sua própria página. Mas, por enquanto, isso é praticamente o suficiente para um modelo. É basicamente assim que essa ferramenta funciona. Para ser honesto, é um pouco mais complexo do que a versão normal de design. Você encontrará algumas limitações e outros enfeites ao compará-la com a versão normal, mas precisa entender que isso está criando para você ou publicando para você um site inteiro sozinho Se formos publicados, podemos realmente publicá-lo. Isso é uma coisa que você pode ter em mente. Você só precisa inserir um título e, por enquanto, ele usará apenas esse URL, mas tenho certeza de que você pode, em algum outro momento, inserir seu próprio URL. Mas sim, muito legal. Vá em frente, experimente, e acho que esse é o futuro. Acho que essa será a solução padrão em alguns anos e todos criarão sites diretamente usando essas ferramentas que não têm código. Muito obrigado por ouvir, e nos vemos na próxima lição. 16. Figma Make (Caso de Uso de Ideação): E agora chegamos ao Figma make. Figma make é uma espécie de IA própria da Figma. Então, não é exatamente isso, e pode ser um pouco confuso, mas vai orientar você a conectar suas ferramentas e adicionar conectores para criar com o contexto de seus aplicativos favoritos Apenas clicando aqui, você pode prosseguir e anexar um design. Então cole em uma moldura Figma ou em uma imagem para anexar a ela. Você pode acessar qualquer uma das molduras que projetamos antes. Então, como este, eu posso copiá-lo e colá-lo aqui, desse jeito, ele é adicionado e colado. Você tem modos diferentes aqui porque ele é baseado em Gêmeos e na nuvem e em versões ou modelos diferentes deles. Você também pode vir aqui e selecionar uma biblioteca quando se trata de design, componentes e outros enfeites Ou você pode começar com um exemplo que já foi feito. Mas tudo o que você precisa fazer na realidade, assim como qualquer outra IA, é descrever sua ideia, falar sobre ela, falar sobre o que você quer fazer, e ela pode fazer o que você quiser. Eu sei que você ainda não está entendendo. Essa ferramenta está gerando uma imagem? Está gerando texto gratuitamente? O que está acontecendo aqui? Quer dizer, temos o Chat GIT, temos o Gemini, temos muitas outras ferramentas O que isso está fazendo por mim, na verdade? Eu vou te dizer o que é. Está criando algo um pouco mais interativo do que tudo com o qual você já teve experiência. Eu coloquei isso e vou dizer, crie para mim um painel de controle de aplicativos para um banco criptográfico com cartões de crédito e análise de gastos, valor, investimentos, etc E resumo das despesas. E sim, eu só estou dizendo isso. Então eu poderia dizer alguma coisa. Não tenho certeza do que isso vai acontecer, porque às vezes é difícil esperar seus comportamentos ou resultados saibam o que eles vão inventar. Então, vou apenas dizer que deve haver uma opção interativa para alternar entre cartões diferentes. Então, vamos abordar isso e, em seguida, teremos nosso bate-papo aqui à esquerda, e então começaremos a pensar e construir nossa ideia com código usando, acredito, JavaScript e outros scripts e outros enfeites, e tentaremos construir um protótipo Esse protótipo é algo que podemos importar de volta para o Figma to Figma design, ou acho que podemos até mesmo usá-lo de alguma forma, caso você queira adicioná-lo ao design do site real que você tem ou Mas não tenho certeza de como isso acontece, para ser honesto, essa não é minha área. Tudo bem, então aqui já temos um resultado. O que é incrível nisso, quero dizer, já o alimentamos com o design real que temos. Mas continuou e tornou muitas coisas interativas. Eu fiz suas próprias escolhas. Ele mudou os pictogramas de acordo com o que achou melhor Mudou os tamanhos e outros enfeites aqui dos elementos aqui Você pode vê-lo brincando com algumas coisas e acredito que quando você reinicia isso, ele até adicionou uma animação, o que é incrível. Então você pode ver a animação de como as coisas estão aparecendo e depois desce e vê se compararmos isso lado a lado, minha parece brincadeira de criança. Parece que alguém estava sendo aleatório e este parece um aplicativo real, Bitcoin eerium ou qualquer pronúncia, e está colocando os números que eu não sei quanto você investiu, sua carteira de investimentos, resumo de despesas, e você pode ver que ele adicionou uma barra para mostrar quanto de uma porcentagem gastou com isso ou aquilo resumo de despesas, e você pode ver que ele adicionou uma barra para mostrar quanto de uma porcentagem gastou com isso ou Mas quero dizer, ele apenas mostrou as categorias e depois mostrou as transações individuais. Acho que permaneceu fiel ao meu design aqui. Mas você pode ver aqui, olha, ele fez exatamente o que eu mandei fazer. Eu deveria ser capaz de alternar entre cartas diferentes. Quer dizer, ele removeu nossa configuração aqui, qual eu gostei um pouco mais, onde você podia ver o cartão empilhado O que ele fez aqui foi torná-lo um pouco mais funcional quando você alterna entre eles, o que é muito legal. Vamos ver o que acontece. Posso clicar nele? Posso interagir com ele? Na verdade não, mas você pode ver que descobriu o nome Newman nesta página e manteve John Acabei de mudar as datas. Mas, curiosamente, esse cartão está vencido. Ele expira em 2024. Este ainda não expirou. Este já está vencido. Então você pode ver, quero dizer, algumas coisas talvez não tenham sido bem pensadas ou talvez estivesse apenas fazendo um exemplo do passado. E, ao mesmo tempo, há coisas em que eu poderia me perguntar: Ok, por que você mudou isso? Por que você mudou esse tamanho aqui ou algo parecido? Mesmo assim, é muito legal porque você tem uma ferramenta que simplesmente entendeu o que eu queria e mudou isso da maneira que eu queria. Então eu posso pedir coisas diferentes. Ou você pode ver aqui que diz três avisos. Você pode ver quais são os avisos. largura zero e a altura zero da carga devem ser graduadas em zero E isso é conectar, conectar. Não tenho certeza. Acho que isso é algo que um programador seria muito mais capaz de estimar ou entender e podemos pedir que ele corrija para mim Por enquanto, vou apenas fechá-lo. Podemos copiar esse design e simplesmente colá-lo aqui. Uma coisa que eu vejo imediatamente é que deixou ser um design móvel por algum motivo. Não sei por que eles fizeram isso, mas essa é uma escolha interessante e, obviamente, podemos tentar mudá-la. Como você pode ver, quero dizer, de várias maneiras, não tenho certeza. Este é um produto muito confuso, o que eles produziram para nós aqui Quero dizer, não é como o trabalho de um artista. Muitas coisas estão confusas e não funcionam, e eu não tenho certeza Mas é algo com o qual você pode trabalhar. Eu acho que essa é uma base muito boa. Quero dizer, como você pode ver, estou tendo muitas coisas para que funcione corretamente. Mas acho que, como eu disse, funciona como uma ótima base para fazer um design real. Este é um bom lugar para começar a ver, o que posso ajustar? O que eu posso mudar? Posso dizer que já errei algumas coisas, que não é problema Mas eu estou olhando para isso lado a lado e fico tipo, você sabe o que? Isso não é nada ruim. Foi em frente, pegou meu design. Algumas coisas não são perfeitas aqui, não sei por que o espaçamento é assim ou por que estragamos tudo Parece que nós estragamos tudo de alguma forma. Sim. Não sei como estragamos tudo, ou talvez, copiando, tenhamos estragado tudo Mas algumas coisas eu tenho que me perguntar: por que isso aconteceu assim? Isso faz sentido? O que é tudo isso? Mas sim, muitas outras coisas funcionam muito bem. Como eu disse, tome isso como inspiração como base e vá trabalhar a partir daí. Talvez seja até melhor não fazer isso, adicionar uma base a partir de seu próprio design e depois pedir que ele a ajuste. Talvez devesse ser o contrário. Agora vou dizer: faça com que, ao clicar em um cartão de crédito, veja os extratos, os valores totais, as estatísticas e eu possa tomar decisões como excluir o cartão ou denunciar roubo e coisas típicas com aplicativos bancários. OK. Então, agora, parece que ele adicionou uma segunda versão. Vamos ver o que acontece agora. Já posso ver que é clicável. Agora, quando eu clico nele, B, eu imediatamente recebo isso. Acabei de perceber que posso mudar isso. É totalmente responsivo, o que está me surpreendendo agora Hum, você sabe, porque é muito legal que essa ferramenta já seja responsiva Não se trata apenas de criar todo o seu aplicativo, mas também de torná-lo responsivo, criando uma animação adicionando coisas que você nem pediu Está lhe dizendo neste mês quanto você gastou, acrescentando, quero dizer, pedi estatísticas, mas não definiu de que tipo, está dizendo que seu saldo atual é esse valor e o crédito disponível é muito. E você pode congelar ou fazer o download. Não tenho certeza do que você está baixando aqui e do que quero dizer, ok, acho que você pode congelar. Declaração baixada. Quer dizer, está dando uma notificação de que algo foi baixado. Então aqui diz que também está pendente. Você pode denunciar o roubo do cartão. Olha, até criou um pop-up para isso. E veja, isso é uma coisa bem legal. Você pode excluir o cartão. Oh, meu Deus, e até o deletou. Tipo, pensei em ir em frente e excluí-lo. Quero dizer, o que aconteceria se excluíssemos todos os cartões? Agora estou curioso. Vai ter um estado vazio? Olha, e agora diz que não há cartões disponíveis. Também pensei nesse caso. Isso é o que é completamente impressionante sobre esse recurso, e você pode ver muitas coisas ou a maioria das coisas que ele realmente não criou, e você pode ver aqui que isso está saindo do quadro, o que indica que essa ferramenta não é perfeita Mas muitas coisas que ele já é capaz de fazer já não precisam ser perfeitas. Eles já são super impressionantes. Mas você deve ter em mente, só para ser honesto, isso se baseia mais ou menos nos designs de outras pessoas. Acredito que ele se alimenta dos dados das pessoas desde o momento em que elas estão projetando Então, quando você e eu vamos criar nossos próprios arquivos, Figma vai usar isso de alguma forma, ou talvez esteja usando produtos em público ou o que quer que seja Mas essa IA precisa se alimentar dos dados de algumas pessoas como conjuntos de dados de treinamento, então, na de algumas pessoas como conjuntos de dados de treinamento, então, verdade, você está alimentando esses dados e ela os devolvendo para O fato de que, se recarregarmos isso, o fato de ele entender como você pode gerenciar um cartão, acabei de dizer, descubra como torná-lo interativo e descobrirá todas as coisas que você pode aprender Você pode ver que existem alguns bugs aqui. São cantos arredondados e então você rola e não é mais redondo. Então, é estranho. Mas descobriu muitas coisas, mas, ao mesmo tempo, sabe disso porque já viu outros aplicativos bancários Ele sabe como elas funcionam e, portanto, está mais ou menos roubando essas ideias e remixando-as para E sim, você pode ver que ele configurou essas cores para se adequarem às cores que já temos. Novamente, é ótimo, mas você só precisa ter cuidado ao confiar nisso, porque o que quer que esteja confiar nisso, porque o que quer que lhe dando será algo que já foi feito em algum lugar por alguém Portanto, tenha isso em mente. Mas, novamente, essa ferramenta é ótima. Vá em frente, experimente muitas coisas diferentes. Essa é só a ponta do iceberg. Há muito mais coisas que você pode fazer com isso, vá em frente e experimente sozinho. Obrigado por ouvir, e nos vemos na próxima lição. 17. Quando essas ferramentas ajudam vs distraem: Então, agora que analisamos muitas ou todas as ferramentas atualmente disponíveis no Figma, é hora de você tomar a decisão, julgar e entender se essas ferramentas estão a seu favor, se elas o beneficiam e ajudam a alcançar seus objetivos e realizar seu trabalho ou se, em vez disso, elas o atrapalham vez disso, elas o atrapalham e o distraem Isso é algo que eu não posso decidir por você. Mas talvez eu possa lhe dar uma ideia contando minha própria experiência. Agora, eu absolutamente amo e aprecio o modo de design, e acho que é totalmente brilhante e está no centro do Figma Quero dizer, é o produto principal. A partir disso ou antes disso, obtivemos o Fig Jam Fi Jam também é ótimo para trabalhar em equipe É ótimo para o brainstorming e para muitos desses processos Mas, ao mesmo tempo, se você não tem uma grande equipe ou não trabalha tão de perto, não está trabalhando junto dessa forma , o FikJam pode atrapalhar Talvez, em vez de fazer o trabalho real, você fique preso à paralisia da análise Você estará apenas anotando ideias, colocando-as, categorizando-as, escrevendo comentários e outros enfeites, sem nunca fazer nada Portanto, é uma ótima ferramenta. Experimente, mas tudo depende do seu caso de uso. Pessoalmente, só o uso em alguns projetos em que sinto que o trabalho em equipe é muito essencial, e há pessoas entusiasmadas e dispostas a participar e divulgar suas ideias sem gastar muito tempo Depois, temos o Figma slide, que é sem dúvida uma ótima ferramenta Mas eu pessoalmente prefiro usar algo como o PowerPoint. Sei que isso pode parecer conservador ou tradicional, mas eu realmente sinto que o PowerPoint provou ser líder no setor, um produto confiável e confiável Então, aconteça o que acontecer, eu sei que o PowerPoint está me protegendo e se meu computador pegar fogo, e eu sei que se eu for para outro lugar até o computador de outra pessoa, provavelmente tem Não sei se eles têm Figma. Quer dizer, claro que posso acessar o Figma online, mas não sei se o computador deles conseguirá executá-lo corretamente Muitas dessas perguntas vêm à mente e é por isso que acho que o PowerPoint é apenas acho que o PowerPoint é a opção mais fácil, a opção óbvia Mas se você está procurando algo diferente e que permita um pouco mais de flexibilidade e mudança , o FiGMA slides é gratuito Depois, temos o Figma Buzz, que eu acho que é definitivamente um dos principais produtos da Depois do design, talvez seja o segundo ou terceiro depois do FIG Jam. É simplesmente ótimo. É absolutamente incrível para pessoas que gerenciam mídias sociais e precisam de uma visão geral muito clara do que estão fazendo sem todas essas ferramentas complexas. Então temos o site Figma, que é, novamente, eu disse isso antes e vou dizer que agora é revolucionário e simplesmente ótimo Mas, para ser sincero, o fato de ainda estar na versão beta me dá muitas dúvidas. Acho que antes de você criar um portfólio, um site ou um conjunto de sites, espere um pouco, porque não sabemos para onde isso está indo e não sabemos como está indo e não sabemos como isso vai funcionar no futuro. Mas não posso negar que é um recurso incrível. Então, no final, o M. Figma make é uma ótima ferramenta de IA, e eu ousaria dizer que é até mesmo alucinante e se diferencia de muitas outras ferramentas, de muitas outras IAs, de ser específico e focado no design fato de ser específico e focado no design e prototipagem focado no Não está apenas criando texto ou imagens, mas está fazendo as duas coisas e criando molduras, criando interações e fluxos de usuário e tudo Mas eu o alertaria contra isso e diria: tenha cuidado. Não seja substituído por ele. Não se torne substituível quando você o usa em excesso. E lembre-se de que tenho certeza de que as fontes que eles estão usando são designs de outras pessoas. Quando você abre um design no Figma ou talvez publica um design no mundo real, o Figma AI pode ter chegado a isso e pode ter usado isso e se alimentado dele como dados de treinamento, que é um pouco confuso porque esse é o seu sustento porque esse é Este é o seu trabalho e ninguém pede sua permissão e eles vão em frente e simplesmente pegam seu trabalho e criam aplicativos a partir dele. Em termos de ética, um pouco suspeita, mas fora isso, a capacidade que ela tem é absolutamente insana Acho que em algum momento é necessário que todo designer de UIUX aprenda e use Pigma de forma regular e eficaz Sim, esta é minha opinião pessoal, minha análise pessoal de todas essas ferramentas. Se dependesse de mim, eu diria, vá em frente e use todos eles. Use-os e veja o que funciona e o que não funciona, apenas para garantir que eles não o distraiam de fazer o trabalho real Se eles ajudam você a debater ideias, ajudam você a apresentar, ajudam você a organizar suas ideias ou publicar seu site sem código, então é absolutamente incrível Estou feliz por você. Mas se você acha que isso está saindo da estrada e está se esforçando para fazer alguma coisa, então não faça isso. Concentre-se no design real. Então, muito obrigado por ouvir, e nos vemos na próxima lição. 18. Projeto final: SaaS responsivo + microinterações: Olá e bem-vindo a outra aula do curso avançado Figma Nesta lição, vamos trabalhar em um projeto fictício nosso, uma espécie de prática, se você quiser Então, aqui, temos um prompt muito simplista com um sistema de design muito simplista, não é realmente um sistema de design, mas apenas alguns elementos para nos guiar no processo de criação, coisas que eu fiz e fiz pouco antes desta aula Então, aqui temos um logotipo ou um ícone. Novamente, muito simplista, e isso é para um aplicativo chamado Istify e aqui estão as cores Agora, não se deixe enganar, isso não é Spotify, não está exatamente relacionado a ele, exatamente relacionado a ele, mas tem um nome muito parecido com Spotify A ideia geral desse aplicativo ou desse produto de software como serviço é basicamente ajudar as pessoas a obter insights e analisar dados, um monte de dados. Todo o caso de uso desse projeto é que muitas vezes encontramos alguns dados. Coletamos muitas fotos, coletamos muitos números e informações sobre pessoas , seja para pesquisa ou estudo, ou então não sabemos o que fazer com elas. Eu não tenho absolutamente nenhuma ideia. Agora, geralmente você pode acessar determinados produtos no telefone para fazer certas coisas. Você pode digitalizar um documento com seu telefone. Você pode fazer o upload de um documento para a nuvem ou algo parecido. Mas o que acontece quando você não sabe o que fazer com isso? Hoje em dia, você simplesmente vai diretamente para a IA, inteligência artificial. Diga-me o que posso fazer com isso? É como um aplicativo com inteligência artificial que ajuda você a entender quais são seus dados e a visualizá-los É como um prompt de IA que já foi inserido e já tem opções específicas. Vamos começar a projetá-lo. Então, vou projetar a interface do telefone, que será como um aplicativo. E isso é um produto de software como serviço. Então pense no Zoom, pense no Slack, pense no Dropbox ou no Google Essas são coisas que estão vendendo esse software como um serviço. Então, esse é um serviço que estamos oferecendo às pessoas. Então, é como um modelo de negócios. Então, vamos adicionar uma moldura do iPhone 17. Vou tentar manter o simplismo apenas para não fazer essa aula de cinco horas porque você não pode criar uma aula de uma hora, mas vamos tentar fazer isso na página principal, pelo menos Então, em primeiro lugar, quero dizer, você deve ter alguns wireframes, rascunhos e esboços anteriores para entender o que você quer fazer e qual a melhor forma de fazê-lo Mas, por enquanto, estamos entrando no processo. Já temos o logotipo aqui. Então, podemos nomear esse logotipo, e eu vou copiá-lo e colá-lo aqui por enquanto, e vou tratá-lo com K, posso redimensioná-lo e colocá-lo aqui por enquanto, também posso remover o fundo Então, é só o logotipo aqui. OK. Então, esse é o nosso aplicativo. Agora, vou tentar entender a navegação ou a primeira página, e vamos continuar com a navegação e tentar entender como isso vai ser. Vou seguir em frente e tentar criar uma navegação muito simples. Então, vou dar 50 cantos arredondados e vou fazer isso de uma forma em que haja uma barra inteira aqui, caso você não esteja familiarizado com a nova linguagem de design da Apple, e haja um botão aqui. Ok, mas vamos tentar mantê-los tão pequenos quanto possível, não muito grandes. Eu acho que isso é bom o suficiente. Então eu vou seguir em frente e satisfazê-los. O preenchimento pode ficar um pouco acinzentado. Podemos usar essa cor especificamente e dar um traço a ela. Agora, eu quero fazer isso na Glassy, dar uma aparência vidrada Veja o que vou tentar fazer. Não é tão fácil, mas você pode tentar dizer para onde estou indo. Então, quando se trata do derrame, eu quero que seja mais ou menos assim. E então eu vou dar 50%. E eu vou copiar aqui. Lá vamos nós. Esses são nossos botões e na verdade, não preciso criar duas versões. Eu posso simplesmente criar um deles e partir daí. Mas vamos ver o que podemos fazer com eles. Em primeiro lugar, vamos adicionar um pouco de transparência e dar a ela um efeito de desfoque de fundo de dez, talvez Em seguida, vou criar um quadrado abaixo deles aqui e vou redimensioná-lo e dar a cor azul, clicar em I, colocá-lo em segundo e agora podemos examinar esse efeito de desfoque de fundo Só para ter certeza de que realmente estamos do jeito que queremos que seja. Agora eu posso dizer: Ok, isso é um pouco melhor. Quero dizer, porque, caso contrário, não é muito legível, então temos que encontrar uma maneira de contornar isso, encontrar um bom valor Você pode aumentar o desfoque ou podemos torná-lo menos transparente. Depende realmente de nós. Como alternativa , você também pode usar o efeito de vidro. Então, ele faz praticamente o que você quer que ele faça aqui neste caso, e é muito legal Então, vamos usar isso por enquanto , já que é um novo recurso e eu quero experimentá-lo. E o importante é que você possa vê-los mesmo quando não estão, quero dizer, há nada por trás deles, então você pode vê-los e dizer que estão separados e isso é algo que podemos alcançar atualmente com isso, o que dá uma dica do que está acontecendo aqui Agora vamos continuar com os botões. Agora, podemos trabalhar com ícones e estou apenas tentando entender o que quero adicionar aqui para essa navegação. Nada que eu queira ter absolutamente, primeiro, vamos redimensioná-los e garantir que a fonte aqui seja Rubik seja a que eu escolhi, para que possamos usar Rubik aqui, para que possamos usar Rubik aqui Então, vamos pensar no que queremos adicionar aqui. Pessoalmente, acho que deveria haver uma guia de relatórios, relatórios ou análises, e então deveria haver uma guia de perfil ou configurações e, em seguida, deveria haver uma guia de anúncios aqui. Ou crie ou analise. Vou fazer com que seja como um botão de adição aqui, e depois vou trazê-los aqui para o meio. E então podemos ter um terceiro botão, e esse terceiro botão pode ser algo sobre a comunidade ou algo parecido, para ver o que a comunidade está fazendo, certo? Então, vamos ver como podemos descobrir isso. Agora você pode trazer isso aqui só para ver como ficaria. Vamos ver como fica. Ok, talvez precisemos diminuí-lo um pouco e ver no que acontece. OK. Então, agora, idealmente, teremos um ícone aqui. Vou usar ícones gratuitos incríveis. E o que é bom com eles é que, você sabe, às vezes você pode escrever o nome do ícone que deseja usar, mas você só precisa ter certeza de que é sólido e não regular. Então, por exemplo, relatórios, eu poderia escrever documentos ou algo parecido ou papel ou, você sabe, eu posso escrever, podemos verificar o que eles têm. Você tem que se certificar de que qualquer coisa que você queira obter seja realmente chamada assim. Por exemplo, aqui você vê que não há nada chamado documentos, mas você precisa ter certeza de que é gratuito. Você pode filtrá-lo daqui para gratuitamente e depois ver o que você pode criar. prancheta é muito boa para relatórios, eu acho, então você pode simplesmente usá-la Você pode usar isso de forma regular e sólida. Depende da disponibilidade. Vamos tornar isso maior. E então vamos criar um layout automático entre eles segurando Shift e A. Agora temos um botão aqui Vamos seguir em frente e transformar isso em um componente, então vamos dizer botão de navegação É assim que vamos chamá-lo. Idealmente, o que devemos fazer sobre isso, porém, é dar um pouco de preenchimento para cima e para baixo, certo? E então, clicar duas vezes fará com que a largura seja maior. Quero dizer, sim, então agora é um abraço. E o que vamos fazer é fundo, criar um preenchimento e dar a ele um canto arredondado. Porque esse vai ser o botão que temos, certo? Portanto, esse é o tipo de área que queremos delinear E o que podemos fazer é copiar isso e colar aqui e ver como fica. Podemos mudar a cor aqui e você pode ver como fica. Quero dizer, talvez você precise de um pouco mais de acolchoamento nos dois lados. E então você vê, esta é a área escolhida. Não precisamos usá-lo dessa forma, mas é bom saber isso. Sim, agora nós os temos e podemos basicamente copiar e colar, copiar e colar. Agora vamos transformar tudo isso em um layout automático a partir daqui. Agora é um layout automático com quatro pixels como espaçamento. Então, podemos alterá-los aqui. Dissemos configurações e aqui podemos escrever engrenagens. Vamos ver se as engrenagens funcionam. Isso não funcionou. Engrenagem ou engrenagens. Mas isso só está disponível quando é sólido. Talvez tenhamos que tornar tudo sólido. Isso é o que acontece quando você está com um orçamento limitado. Mas se você usar a versão profissional, poderá usar a sólida e a profissional. Então temos a comunidade. Vamos apenas escrever uma comunidade aqui e, em seguida, teremos usuários que talvez funcionem perfeitamente. Usuários. Agora temos esses três botões. Agora, idealmente, você não deveria ter botões com formatos tão diferentes, eu acho, não deveria ser que um seja muito maior do que o outro e outros enfeites Quero dizer, isso acontece. Você pode viver com isso, ou o ideal é fazer com que todos tenham o mesmo tamanho. Vamos fazer esses 12 e torná-los um pouco menores e depois os veremos e os tornaremos também um pouco menores. Vamos fazer esse botão inteiro um pouco. Vamos mudar as coisas. OK. Então, o que podemos fazer em vez de abraçá-lo, podemos torná-lo com uma largura fixa Portanto, essa largura fixa pode ser, não tenho certeza, 70 ou algo parecido. Mas o problema é que, quero dizer, eles já têm seus próprios valores agora. Então, basta voltar. Então, vá do abraço e depois escreva um número e você só precisa editá-los porque todos eles têm seus próprios tamanhos Então, eles não estão apenas se abraçando, você só precisa chegar aos 60, 70 Mas, como você percebe, o problema aqui é que, quero dizer, eles ficam muito mal formados quando você usa esse método Então você tem que ter certeza de que eles são tão grandes quanto o maior, que é esse. Vamos ver o quão largo é esse. Então 89, podemos fazer 90 para todos eles. Então parece um pouco melhor. Certifique-se de que tudo esteja correto para que até mesmo este texto esteja centralizado e, em seguida, fique um pouco melhor Vamos deletar isso e vamos testar sua aparência. Vou apenas remover isso ou posso fazer com que fique bem cinza e depois ver como fica. OK. Parece que está bem. Parece melhor. Vamos conferir com a estrutura real do dispositivo. Não é tão ruim. Podemos levá-lo um pouco para o lado. Sim, isso não é tão ruim. Transforme isso em um componente. Vamos tentar fazer isso. Podemos ter duas versões disso, ou podemos simplesmente esconder isso e criar algo como um círculo do mesmo tamanho. Dissemos que isso é 90 e 54, 90. E então você pode dar 50 cantos arredondados, e então podemos torná-lo preto com 10%, então podemos pegá-lo e adicioná-lo aqui e vamos ignorar o layout automático, então ele ficará apenas em segundo plano aqui. O que vamos fazer é criar duas versões diferentes do botão Nav Um deles vai ficar cinza e o outro vai ficar totalmente colorido. Vamos ver como isso pode parecer. Vamos colocar isso em segundo plano e, em seguida, vou escolher isso e ver como fica com a variante dois. Bem, não parece muito bom. Vamos adicioná-lo aqui e ver como fica na versão real. Parece um pouco melhor aqui, para ser honesto, não é tão ruim. OK. Agora podemos começar a trabalhar. Isso é chamado de RNVbr e podemos adicionar várias versões dele Vou continuar adicionando. E então o que eu vou fazer é pegar isso aqui e dar essa, torná-la a variante dois. Essa, faça dela a variante um e a mesma coisa aqui, variante dois, variante um, e então eu vou pegar o plano de fundo e trazê-lo aqui. OK. Agora temos essas versões diferentes, e vou chamar essa de relatórios, essa de configurações e de comunidade. Você pode ligar para toda a página da propriedade. E agora temos essa configuração do Nabbar, e ela se parece muito com uma maçã Então, isso é muito legal. E sim, agora temos isso. Vamos fazer isso funcionar daqui a pouco, mas estou pensando em criar a outra versão, que é o botão de adição. Vou copiar isso e colar aqui e depois deletar dois deles. Vou deletar o círculo dois, primeira coisa que vou fazer é clicar com o botão direito do mouse e desanexar essa instância, depois vou escrever mais, para que possamos fazer um botão de adição ou criar nosso próprio botão de adição Mas o mais importante é que isso tenha uma altura de 54, assim como a altura deste , deve ter a mesma altura. Na verdade, não era 64, certifique-se de que seja 64. Agora isso está centralizado Podemos torná-lo um pouco maior e podemos dar a mesma cor. Agora, novamente, não há razão para que isso ocupe toda essa área, então agora nós apenas o abraçamos e depois chamamos esse botão de anúncio, copiamos, colamos, trazemos aqui e vamos transformá-lo em um layout automático, colocando-os no centro do meio, e aí Agora temos esses dois botões. Eles não parecem perfeitos, mas parecem muito bons, eu diria. Agora vamos adicionar isso ao plano de fundo para ver como ficaria. É assim que os botões se parecem. Eles são pequenos, mas interagem com o plano de fundo. Agora, eu sinto que isso poderia ser um pouco menor. Mas vamos editá-lo a partir do componente real. Então, vou fazer 64 por 64 e fazer o layout automático no meio e vou fazer esse 24 apenas para que os ícones pareçam tão diferentes uns dos outros. Isso parece um pouco melhor, e então o que vamos fazer é começar a trabalhar no layout real aqui. Quando você entra em relatórios, agora normalmente você deve ter alguns botões que dizem relatórios atuais, esses relatórios, aqueles relatórios, qualquer coisa. Então, ao mesmo tempo, devemos ter uma ideia do que temos na página principal. Quero dizer, o que temos? Você tem um relatório real ou não? O que podemos fazer é criar um estado vazio. Agora, este é um estado vazio Basicamente, quando não há nada, você mostra isso. O que podemos fazer é você não fazer isso, vamos transformá-lo em Rubik Você ainda não tem nenhum relatório. Podemos colocar isso no meio, 16, e então podemos fazer uma ilustração ou adicionar algo aqui. Quero dizer, podemos fazer algo sozinhos , com uma cara triste ou algo parecido. Agora, isso deveria fazer com que os usuários usassem seu produto Eu posso simplesmente copiar o código hexadecimal aqui, fora daqui. Copiar e colar. Vou copiar e colar isso. Vou fazer com que seja assim. Então, é preferível que você alguma forma mantenha uma identidade em tudo isso. Vou agrupá-los e depois centralizá-los. Vou remover o agrupamento. E o que eu posso fazer, por exemplo, é adicionar óculos porque esse é um aplicativo para insights e outros enfeites Isso pode estar mostrando que, ei, você sabe, somos todos um casal de nerds. Essa é uma boa dica porque cria algumas identidades Não é apenas um estado vazio genérico, mas mostra o que está acontecendo. Eu vou escolher esses e vou fazer deles os óculos. E eu também poderia torná-los um pouco mais finos, se quisermos. Então você ainda não tem relatórios. Esta é a nossa página principal. Só estou dizendo que ainda não há relatórios, mas, ao mesmo tempo, poderíamos criar um layout automático aqui e dar um pouco de cor. Podemos escolher isso novamente e fazer isso 36 e, em seguida, adicionar algum texto a ele, criar um layout automático. Agora, o texto, poderíamos dar a mesma cor por enquanto. E nos dê um pouco de acolchoamento. Então, oito por oito, ou pode ser 12 ou o que quisermos. Então, poderíamos basicamente dizer relatórios recentes ou podemos ter apenas algumas categorias. Crie algum espaçamento entre eles e poderíamos ter tudo recente, seja o que for Vou adicionar um pouco mais de preenchimento à direita e à esquerda 16 seria, na verdade, muito melhor. Então, isso é para você filtrar tudo, apenas para filtrar todos os relatórios que você tem, caso tenha algum, mas no momento não temos nenhum. Então, como eu disse, recentemente, tudo o que poderíamos dizer é visual texto ou algo parecido, só para filtrar os relatórios. E sim, também podemos dar a ele uma identidade semelhante, dar o mesmo traço ou algo assim. Mas, em algum momento, você também precisa entender. Quero dizer, qual é o Navbar. No momento, estamos mantendo isso assim apenas para mostrar que esse é um elemento que não é muito importante. Isso deveria estar destacado, mas este não deveria ser, então vou mantê-lo assim. Esta é nossa primeira página. Temos nosso logotipo aqui. Também poderíamos colocá-lo no meio. Ou, alternativamente, o que muitos aplicativos fazem hoje em dia é não ter o logotipo em nenhum lugar apenas para economizar espaço. Isso é algo que você poderia fazer, e eu o aconselho a fazer. Mas sim, isso é algo que você tem que decidir sozinho. Ou você pode, alternativamente , torná-lo um pouco menor. Então, vamos criar três versões diferentes e garantir que as páginas estejam alinhadas corretamente Vamos prototipá-los para que, ao clicar em um item, como, por exemplo, acessar o componente agora, o original, ao clicar nas configurações, ele vá para as configurações Quando você clica em Comunidade, ele deve ir para a página Comunidade, e quando você clica em Relatórios, ele deve ir para a página de portas. Então, eu estou meio que vinculando-os agora. E depois disso, eu também vou configurá-lo para que haja um movimento de arrasto. Fizemos isso em uma lição anterior para que, ao arrastar ou deslizar o dedo na página, ela possa passar da primeira para a segunda e para a terceira, apenas com um gesto de deslizar Você pode fazer isso criando um protótipo ou criando uma interação, e essa interação deve ser arrastar, não tocar, arrastar e, em seguida, não deve ser uma animação inteligente, deve ser empurrar Então, pode ser empurrado, pode ser movido, pode ser empurrado, mas empurrar é o mais suave e fica bem Quer dizer, é o mais usado, então você tem que fazer isso da direita para a esquerda. Então você vê a tela vir da direita para a esquerda, e então você também pode revertê-la quando estiver indo da direita para a esquerda, você pode fazer a tela vir da esquerda para a direita. Você entendeu a ideia. Agora eu gostaria de criar um pequeno menu pop-up. Este é um menu que, quando você clica no sinal de mais, mostra algumas ações. Aqui estou me inspirando um pouco no Google Drive porque o Google Drive tem algumas opções. Diz digitalizar documento, fazer upload de arquivo, criar documentos, criar planilhas e assim por diante Essas são as opções que estamos procurando aqui. Apenas como exemplo, o que poderíamos fazer é analisar um arquivo, digitalizar um documento ou criar um gráfico ou algo parecido. Deixe-me pegar os ícones para eles, configurá-los corretamente, criar um pouco de preenchimento e pronto Agora vou prototipar isso para que, quando alguém clicar no botão de adição, ele toque, abra sobreposição e essa sobreposição seja manual, então eu vou escolhê-la e ela estará logo acima dela, E fechará ao clicar do lado de fora. Terá um fundo preto de 25% e se dissolverá, mas será muito rápido. Serão 100 milissegundos ou algo parecido. Então, agora temos isso. Agora vamos ver como fica. Estamos voltando com um clique, e é assim que parece. Agora, é claro, podemos criar uma animação disso. Seria muito mais fácil fazer isso. Mas deixe-me mostrar como podemos fazer isso muito rapidamente. Então adicione o botão, e eu vou chamar esse pop-up um e pop-up dois. Cole dois. O que eu vou fazer aqui é diminuir isso e vou fazer isso de cima ou de baixo, ok? Então, ele vai se abrir assim ou talvez até mesmo assim, e então continuará em tamanho real. E como você faz isso é adicionar o sinal de mais e dizer, após o atraso, e você tornará o atraso zero, que será de um milissegundo, e você dirá animação inteligente e sobreposição de troca Isso mudará dessa sobreposição para esta usando o smart animate, e isso acontecerá em 300 ou, digamos, 100 milissegundos e os componentes de reinicialização permanecerão na posição de rolagem redefinida e vamos 100 milissegundos e os componentes de reinicialização permanecerão na posição de rolagem redefinida e Agora vou testá-lo. Deixe-me transformar isso em um ponto de partida de fluxo. Então, vou excluir que isso não deve ser um ponto de partida de fluxo. E então você clica aqui, supostamente, e é assim que acontece Mas quero dizer, deveria ir de baixo para cima. Essa é toda a ideia. Você está criando uma pequena animação que oferece algumas opções. Agora, é claro, podemos adicionar um pouco mais de espaçamento entre as opções apenas para garantir que as pessoas possam clicar nelas se quiserem Portanto, certifique-se de que esteja disponível e, em seguida, vou configurá-lo para que tenha uma posição diferente agora. Vamos ver. Ok, então você pode analisar o arquivo digitalizado do documento. Eu posso baixá-lo um pouco mais baixo. E lá vamos nós. Você pode fazer essas ações. Você pode mudar essas páginas, assim mesmo, temos um produto que está tomando forma. Agora só temos que fazer algumas configurações rápidas, opções rápidas aqui, vou copiar esse elemento aqui, colar aqui. E eu vou mudar isso um pouco. Eu vou fazer com que isso seja 20, e isso também seja 20. Agora os tamanhos são diferentes e vou copiar e colar isso. Vou adicionar um pouco mais de espaçamento entre eles, talvez 16, e vou transformá-los em um layout automático Vou fazer com que o espaçamento entre eles seja 24 e até adicionarei uma linha Então clique em L, segure Shift e, em seguida, você pode fazer uma linha reta, colá-la aqui e verificar se ela está enchendo o recipiente. Você também pode torná-lo cinza claro, e então você pode estender o recipiente, e você pode ver que eles também estão enchendo o recipiente, e então quero dizer, eu prefiro transformar isso em um componente, então vou chamar esse item. Vamos ser um pouco mais sofisticados com este. Vou dar um pouco de acolchoamento. E clique duas vezes para fazê-lo atingir a altura. Então vamos ver como fica com, com um preenchimento. É assim que ficaria. Nós podemos manter isso assim. Quero dizer, isso é praticamente quadrado, ou podemos seguir nossos cantos arredondados e torná-los um pouco arredondados. Então, podemos adicionar um estado e criar o estado de foco. Desculpe por isso. Caps lock ativado. Então, com o estado de Huber, adicionaríamos um preenchimento preto e 10% É quando você clica nele. Novamente, podemos prototipar isso e fazer com que, ao tocar ou ao pressionar, fique assim Copie isso, cole aqui, exclua-os e, em seguida, coloque a linha entre eles, veja quanto é o espaçamento Parece que é demais. Vou fazer 16 e depois copiar e colar, copiar colar, copiar colar, copiar e colar. Essas são suas configurações. Vou colocá-los no meio, garantir que haja algum acolchoamento à direita e à esquerda Quero dizer, podemos estendê-lo e dar um pouco de preenchimento, apenas 16 ou algo parecido Essas são nossas configurações, e podemos simplesmente escrever um texto grande dizendo configurações. Isso é algo que podemos fazer. Então, como você pode ver, o espaço aqui não é o mesmo que o espaço acima. Então, podemos adicionar e fazer 16 preenchimentos de cima para baixo apenas para garantir que tudo seja igual Também podemos criar uma linha aqui apenas para mostrar que esse é o título e, em seguida, todo o resto aqui é meio que você sabe, parte em que você pode copiar a cor aqui, nela aqui e ver se está claro o suficiente. Eu diria que é. Mas agora vamos ter certeza de que é compreensível o tipo de configuração, para que possamos dizer as preferências do usuário e depois escrever o usuário aqui Então, podemos dizer privacidade, termos e condições. Podemos dizer perfil, e eu escrevo handshake e depois aqui rede, talvez ou não tenha certeza OK. Assinatura. Então, digamos apenas moedas. Ou apenas assinatura. Como seria a assinatura ? Não, isso não ajuda. Assim, podemos criar um olho e isso é como privacidade. Então, copie essa fase aqui, e podemos simplesmente jogar os termos e condições até o fim e seguir a linha com eles E para as outras coisas, podemos simplesmente descobrir algo. Então, preferências do usuário, privacidade, assinatura, perfil do usuário. Perfil público ou perfil social. Vamos trazer isso até aqui. Eu escrevo perfil. É um usuário circular. Usuário do Circle. Então, podemos transformar essa em duas engrenagens. Podemos aumentar isso apenas para deixar mais claro que essas são as configurações e podemos dar a mesma cor. Quero dizer, no momento, preto escuro é um pouco duro, então você pode dizer isso e aqui também podemos adicionar o mesmo texto aqui e dizer relatórios. Como aqui está mais inclinado para a esquerda ou alinhado para a esquerda, você também pode fazer isso aqui ou podemos mantê-lo no meio, pois isso é apenas um filtro, depende totalmente de Tudo bem fazer isso assim, e então podemos colá-lo aqui e dizer comunidade. H Agora, como você pode ver, não estou alinhando isso perfeitamente agora, estamos apenas trabalhando de forma muito Agora, o que podemos fazer aqui? Quero dizer, deixe-me colocar isso de volta aqui. Em vez de fazer isso, podemos fazer. Normalmente, nas mídias sociais, há uma página para você e, em seguida, há uma página ou página da comunidade em que, na verdade, é apenas a página seguinte, mostrando o que você está seguindo em vez de apenas mostrar toda a comunidade. Isso é algo que também podemos usar totalmente. Então, podemos manter isso assim. Então, para você e para os seguidores uma coisa que não temos certeza é que podemos copiar isso aqui e trazê-lo para esse quadro e depois redimensioná-lo apenas para garantir que fique claro qual opção está escolhida no momento, certo? Então, basta centralizar isso. Então, basicamente, mais ou menos assim. E a mesma coisa aqui. Nós podemos fazer isso. Quero dizer, podemos fazer com que seja 5% aqui para que não seja muito forte e a mesma coisa aqui, aí está. Agora é um pouco mais compreensível onde você está e o que está fazendo Vou colocar isso um pouco mais acima, e então teremos nossa página da comunidade, onde deveríamos ter postagens e informações das pessoas sobre o que elas estão falando e assim por diante. Essa é uma interface de usuário muito rudimentar só para que você saiba que esse projeto é bastante simplista Estou tentando aqui mostrar como você pode usar essas habilidades avançadas usando o FiGMA criar uma boa experiência em um aplicativo ou site ou o que quer que seja Acabei de perceber que todas essas interações que fizemos com esses botões não deveriam ter sido animadas de forma inteligente, mas sim apertadas Então, certifique-se de anotar isso. Mas você precisa ter certeza de que, daqui até aqui, será um impulso específico. Então, vai ser assim. Sim. Então, para a comunidade, também será da mesma forma. E assim por diante e assim por diante. Mas aqui isso vai ser revertido. Assim, você vê e garante que todos eles tenham camadas animadas correspondentes selecionadas. Escolha-os, segure Control Alt A, ou você pode simplesmente clicar aqui ou aqui, e então você pode clicar em todas as camadas correspondentes e, em seguida, ir aqui e verificar se você tem camadas correspondentes animadas A mesma coisa aqui. E aqui. Isso é trabalho manual. Agora, quando clicamos neles, sempre haverá o efeito de rolagem Você pode ver que é muito bom, muito bom e temos esse botão novamente aqui que nos diz o que podemos fazer, analisar arquivos, digitalizar, documentar, criar gráfico ou o que quer que seja. Não vou trabalhar muito no lado da comunidade porque isso nos colocará em uma posição diferente. Mas eu gostaria de trabalhar mais no recurso principal, o MVP, que consiste basicamente em analisar arquivos, digitalizar documentos, criar gráficos Uma coisa que podemos fazer. Eu posso copiar e colar esse quadro inteiro, copiá-lo, colá-lo, posso trazê-lo aqui, deletar tudo dele. E então eu vou torná-lo um pouco mais curto. O que vou fazer é colocar um pouco de cantos arredondados desse jeito, mas logo acima, não de baixo, e vou adicionar uma pequena barra aqui. Isso é basicamente um pop-up que vai aparecer de baixo. Basta fazer três ou algo assim, deixá-lo um pouco cinza e depois nos dar algumas pontas arredondadas. Eu adiciono aqui. Ok, perfeito. Isso se parece muito com um iPhone, e vou chamá-lo de arquivo Analyze. Então, quando você clica em Analisar arquivo, ele solicitará que você compartilhe seu arquivo. Agora, para isso, precisamos entender como funciona quando você deseja compartilhar um arquivo desse tipo e como ele funciona? Você clica em Carregar arquivo. E quando se trata de iPhones, ele abre uma janela mostrando seus arquivos Vai dizer algo como no meu telefone ou no meu iPhone. Ele o colocará aqui e, em seguida, colocará alguns botões para você aqui ou talvez até mesmo mostre alguns arquivos. Então, vamos continuar e escrever o ícone do arquivo IOS. Não compras, mas imagens. Depois de encontrar uma com a qual esteja satisfeito, você pode copiar essa imagem e trazê-la até a Figma Então, o que vou fazer é circundar a área e pedir que ela a isole Agora temos esse ícone que queríamos usar isolado. Agora podemos trazê-lo aqui e mostrar como ele pode ficar em um iPhone. Eu só vou escrever aqui downloads ou algo assim ou o que quer que seja. Copie e acrescente outra coisa. Talvez não seja o iCloud, mas talvez haja um X aqui ou algo parecido Você tem a ideia e , em seguida, vamos até Analisar arquivo, segurá-la e trazê-la até Analisar arquivo. Vamos dizer basicamente sobreposição aberta, vamos dizer centro inferior Ele vai colocá-lo aqui na parte inferior central. E quero dizer, vamos ver se funciona. E vamos dizer que o fundo fechado ao clicar do lado de fora, e ele se moverá de baixo para cima e estará dentro de 300 milissegundos. Então, vamos ver se isso funciona. Clicamos aqui e clicamos em Analisar arquivo. E, sem mais nem menos, ela se abriu. Mas na verdade não podemos, quero dizer, você pode ver que podemos fechá-la , mas e se quisermos basicamente retirá-la, não podemos ir para a outra página, mas não podemos retirá-la. Agora, a maneira de fazer isso é basicamente segurar isso, dar uma interação, e essa interação deve ser arrastada. Agora, você pode ver se colocarmos o arrasto aqui, temos um problema porque temos duas opções de arrastar. Quer dizer, funciona, mas na verdade precisamos trocar um deles. Isso não deve ir para as configurações, como você pode ver, não devemos poder clicar nisso e depois ir para as configurações. Em vez disso, o que queremos que aconteça é que, em vez de navegar, queremos fechar a sobreposição Quando você o arrasta para baixo, ele deve fechá-lo. Vamos ver se isso funciona assim. Foi muito fácil desse jeito. Você puxa para baixo e fica tipo, não, não, não, eu não queria analisar um arquivo. Em vez disso, eu queria digitalizar um documento. Agora, um documento também pode ser a mesma coisa, ou o que podemos fazer é criar uma moldura do iPhone 17 e criar uma situação de câmera. A forma como isso funcionaria é mostrar duas barras pretas. E depois um círculo branco. Podemos fazer essa barra um pouco menor. E então também podemos trazer esse X de volta aqui. Então, vamos ver. Quero dizer, essa poderia ser a opção de documento digitalizado, e então podemos ir aqui E podemos mostrar, tipo, a aparência de um documento. Imagem de um formulário em uma mesa. De um documento. Ok, então agora eu encontrei uma foto, que é bem engraçada. Quero dizer, alguém está pedindo falência, o que nem sempre é engraçado, mas apenas uma imagem engraçada para Alguém está tentando digitalizar um documento e ele abre a câmera do telefone e essa é a primeira tela. Vou apenas manter as sobreposições aqui ou as ações específicas aqui embaixo apenas para organizá-las um pouco Vou deletar isso aqui. Nós não precisamos disso. Então precisaremos digitalizar o documento e este basicamente abriria isso como uma sobreposição, eu suponho E seria centralizado ou você também pode dizer centro inferior, podemos dar as mesmas coisas e também podemos torná-lo um pouco mais curto Na verdade, vamos ver como está agora. Quando você clica nele, ele simplesmente abre a câmera ou você pode fechá-la aqui. Na verdade, não criamos um protótipo dessas interações, sobreposições aproximadas, a mesma coisa aqui, mas não deveria estar tão alto Ou também podemos ter essa pequena barra aqui para mostrar que você pode puxá-la para baixo. Então, podemos dar a mesma ação aqui. Podemos simplesmente copiar a interação, colá-la aqui e, como você pode ver, podemos baixá-la. Mas isso significa que também precisamos dar 36 cantos arredondados de cima para baixo, para que pareça suave. Você também pode tornar a moldura inteira um pouco menor assim. Dessa forma, ele não ocupa a tela inteira, mas você pode digitalizá-lo desse jeito e depois puxá-lo para baixo. Mas depois mostra essa parte da qual eu não gosto muito. Eu só vou mantê-lo como estava antes. Eu acho que isso parece muito bom. Estava focado. Você pode dar uma olhada em seus documentos e digitalizá-los corretamente. O que seria ainda melhor é se você aparecesse primeiro pop-up e basicamente dissesse : é assim que você pode digitalizar seus documentos R Tudo bem, então eu rapidamente prototipo isso e, em seguida, o que vou fazer é colocar isso do lado de fora e chamar essa instrução ou tutorial de pop-up e, em seguida, segurar essa moldura e criar uma interação. Tudo bem, então eu rapidamente prototipo isso e, em seguida, o que vou fazer é colocar isso do lado de fora e chamar essa instrução ou tutorial de pop-up e seguida, segurar essa moldura e criar uma interação Isso ocorrerá após um atraso e um atraso de 100 segundos, abrirá uma sobreposição, será centralizado e terá a mesma coisa que o plano de fundo fechado ao clicar Em vez de entrar, ele se dissolverá em 100 milissegundos. Nós vamos dizer quando você clica em clicar. Vamos começar, basicamente fechará a sobreposição. Então, vamos testá-lo agora. Você vai em Digitalizar documento, ele abre isso. Eu deveria ter um pouco mais de atraso. E digamos que esse atraso seja 500 milissegundos. Agora vamos repetir. Clique em Digitalizar documento, abre e diz: Tire uma foto para digitalizar o documento, verifique se os documentos estão emoldurados e se a câmera está focada. Vamos começar, e então você pode ir em frente e tirar uma foto ou abaixá-la e dizer: Sabe de uma coisa? Quero criar um gráfico. Então, o que fizemos até agora neste aplicativo, basicamente criamos guias diferentes Criamos esse SAAS, 19. Projeto de curso: design de uma interface SaaS responsiva: Agora é hora de colocar em prática tudo o que você aprendeu. Para este projeto de classe, você projetará uma interface de software como serviço usando recursos e técnicas avançadas do Figma , como componentes, layouts automáticos, variáveis e microinterações Comece criando um sistema de design limpo e escalável que você possa usar em seu design Isso significa escolher as cores que você vai usar, configurar suas variáveis e estilos, escolher fontes e todos os pequenos detalhes que você deseja obter da maneira certa. Depois de terminar, vá em frente e comece criando seu design. Crie uma tela. Você pode começar com uma tela de desktop ou com uma tela de celular. Depois de criar e projetar a aparência, certifique-se de que ele também seja responsivo usando o layout automático, usando restrições, certifique-se de que você possa esticá-lo e mostrá-lo em tamanhos de tela diferentes, e ainda assim ficará bom Como uma pequena dica, você também pode usar pontos de interrupção para criar uma versão diferente, uma para um desktop, outra para um tablet e outra para um telefone Agora, dê vida ao seu design usando microinterações e animações usando a animação inteligente e os recursos avançados de prototipagem Depois de terminar, exporte seu projeto e faça o upload para a galeria do projeto. Sinta-se à vontade para adicionar uma pequena descrição sobre suas decisões de design, falar sobre seu sistema de design e outros enfeites, apenas para esclarecer o que você fez e por que o fez Agora, lembre-se de que o objetivo aqui não é apenas projetar algo que pareça bom e bonito, mas também projetar algo que pareça real e funcional, assim como uma interface pronta para produção. Esta é sua chance de mostrar suas habilidades avançadas de figma, então não se apresse e divirta-se com 20. Parabéns! E depois?: Parabéns por terminar a aula. Até agora, você aprendeu como abordar e usar o Figma como um designer avançado, desde criação de sistemas de design escaláveis e layouts responsivos até a criação belos protótipos interativos e a criação de sistemas de design escaláveis e layouts responsivos até a criação de belos protótipos interativos e o uso eficaz de ferramentas modernas. Esses são os tipos exatos de habilidades que realmente fazem a diferença quando você está trabalhando em projetos profissionais. E a chave para dominar tudo isso é praticar, muita e muita prática Portanto, continue experimentando, experimentando coisas diferentes refinando seus fluxos de trabalho e aplicando essas técnicas em seus próprios projetos Se ainda não o fez, vá em frente e envie seus arquivos de design para a galeria do projeto. Eu realmente adoraria ver o que vocês inventaram. E se você gostou dessa aula, fique à vontade para nos deixar um comentário. Isso realmente nos ajuda receber um pouco de feedback para criar um conteúdo ainda melhor para você. Muito obrigado por participar e nos vemos no próximo curso.