Masterclass do Figma para iniciantes: desenhe seu primeiro aplicativo e a interface do usuário de sites

1. Sejam bem-vindos ao masterclass de Figma para iniciantes!: Bem-vindo à master class para iniciantes da Figma. Se você sempre quis criar um site ou um aplicativo móvel, mas não sabia exatamente por onde começar, então este é o curso para você. Olá, meu nome é Ahmed l Hassan e sou designer de UIUX com mais de cinco anos de experiência no design de produtos, interfaces e experiências digitais interfaces Ao longo dos anos, desenvolvi tudo, desde os conceitos mais simples de aplicativos até sistemas completos de design. E vou guiá-lo exatamente pelo mesmo fluxo de trabalho amigável para iniciantes que eu gostaria de ter quando comecei Neste curso, criaremos um design de interface de usuário completo do zero. Ao fazer isso, aprenderemos os fundamentos do Figma passo a passo juntos Começaremos primeiro nos familiarizando com a interface básica do Figma e depois criando nossa primeira tela Em seguida, aprenderemos como usar os elementos mais básicos, como texto, formas, aprenderemos sobre cores, tipografia, espaçamento e muitas noções básicas do Figma À medida que progredimos, aprenderemos mais sobre ferramentas mais complexas, como layouts automáticos e componentes, que realmente nos ajudam a manter nosso design escalável e organizado ao mesmo tempo Você também aprenderá muito mais sobre prototipagem conexão de telas diferentes e criação de animações simples, coisas que realmente tornam seu design funcional e interativo No final desta aula, você terá criado sua própria interface de design de interface de usuário e, ao mesmo tempo, entenderá o fluxo de trabalho fundamental usado pelos designers se você quer se tornar um designer ou apenas quer melhorar suas habilidades criativas, ou talvez simplesmente queira aprender uma ferramenta de design moderna e poderosa. Este curso é o lugar perfeito para começar. Então, vamos começar. 2. Introdução: o que você vai aprender e desenvolver neste curso: Olá e bem-vindo à master class para iniciantes da Figma. Um curso no qual você aprenderá os fundamentos e os blocos de construção necessários para entrar no mundo do design usando o Figma Figma é um programa de design maravilhoso, promissor e muito fundamental na área hoje em dia, digo que está surgindo como se fosse novo, mas já existe há algum tempo e conquistou seu lugar no mundo do design, e é uma das empresas líderes e programas de design atuais que muitos designers usam, especialmente quando se trata da área. de design de produto ou design UIUX. Hum, mas também está se expandindo, certo? Então, você sabe, bem-vindo ao curso. Então, se você é um iniciante, um iniciante absoluto ou se você já tem algum conhecimento do Figma ou não necessariamente do figma, mas talvez de outros programas de design, como os programas Adobe, este é o Vou orientá-lo neste curso da maneira mais simples possível, mas também fornecerei dicas e truques para progredir, não apenas aprender o básico, mas progredir um pouco e se tornar mais um designer profissional e ter uma excelente base Então, o que você aprenderá neste curso Há algumas coisas que você vai aprender. A primeira coisa é o básico do design. Então, vamos aprender sobre noções básicas de design, como criar os elementos de design mais básicos, molduras, objetos, formas, bem como usar a ferramenta de caneta e outros enfeites e entender como você pode usá-los para criar componentes diferentes e assim por diante Além de entender as cores, a tipografia, esses fundamentos básicos do design esses fundamentos básicos do design. Nós vamos examiná-los. Se você já tem alguma experiência, isso será apenas uma pequena revisão. Vamos usar tudo isso, desenvolver a partir dele e começar a criar telas de interface do usuário. Então, essas são interfaces de usuário que vamos criar para usar esses elementos, o que aprendemos até agora, o que construímos até agora, para criar algo maior. Isso vai das células aos organismos e aos corpos completos. Esse é um dos primeiros passos. A partir daí, vamos explorar a prototipagem. Agora, a maneira de pensar em prototipagem, caso você não esteja familiarizado com ela, é basicamente o que você poderia chamar de animações Então, projetar um botão, isso é design. Mas o fato de o botão ser clicável, utilizável, ter uma pequena animação quando você passa o mouse sobre ele ou clica nele, isso é prototipagem, e vamos aprender Então, uma das últimas coisas que você aprenderá é compartilhar seu trabalho porque, afinal de contas, essa é uma das etapas mais importantes e uma das últimas etapas do processo. Depois de fazer tudo isso, querer compartilhar seu trabalho, seja com clientes, seja com usuários ou com seus colegas, isso faz parte disso. Compartilhar seu trabalho e entender como você pode usá-lo para colaborar com colegas é algo muito essencial, e também aprenderemos isso Agora, uma segunda pergunta é: o que você vai construir com isso? Essa é uma pergunta que você deveria ter esclarecido até agora. Quero dizer, fazendo esse curso. Por que você veio aqui? O que você está tentando alcançar? Ou o que você quer aprender a construir e talvez construir aqui, você pode inventar alguns mal-entendidos Quando dizemos construir aqui, queremos dizer o processo de design. Não queremos dizer criar um produto real. Não queremos dizer realmente criar um site, programá-lo, mas sim projetar como ele seria e como funcionaria. Então, o que você vai construir ou ser capaz de construir com este curso? Sites, isso é uma coisa. Ser capaz de criar sites, algo que você poderá pensar em qualquer site, é algo que você será capaz de fazer. Você quer criar o novo Facebook, o novo Instagram, você quer criar o novo Google. Isso é algo que você pode fazer wireframe e prototipar neste curso ou depois de aprender com este curso ou depois de aprender Outra coisa são os aplicativos móveis que podem ser para telefones, tablets, qualquer produto que você esteja pensando. Você pode criar aplicativos ou projetá-los por meio do Figma. Outra coisa é o design gráfico. Isso é algo como um caso de uso que é visto com cada vez mais frequência no FiGMA. Muitas pessoas estão usando o Figma para design gráfico, seja para fazer pôsteres ou criar imagens, identidades de marca ou talvez conteúdo de mídia social Isso é algo que agora você pode fazer com o Figma. O incrível do Figma é que ele está se expandindo continuamente Está crescendo com os designers. Isso é algo que talvez, pessoalmente, eu ache que outros programas de design não funcionaram muito bem. Muitas vezes era como se, todo ano, houvesse uma nova versão de qualquer programa de design da XYZ, e era quase a mesma coisa Eles acabaram de adicionar alguns recursos para usuários altamente avançados, mas o programa realmente não mudou muito. Não ofereceu algo novo, não revolucionou Mas a Figma continua crescendo e mudando. E você vê algumas coisas que eu destaquei, quero dizer, que escrevi aqui, mas desfocadas porque só para dar a sensação de que há muito mais casos de uso que você aprenderá e que poderá criar usando Não vamos discutir todos eles dentro do escopo deste curso, pois é um curso para iniciantes. Mas só para dar uma olhada, quero dizer, você pode ver que meio desfocado Você pode criar apresentações com o Figma. Pode realmente criar sites. Sem programação, você pode publicar um site com o FIGMA Mas essas são outras ferramentas do Figma sobre as quais não falaremos no escopo Lembre-se de que Figma é um universo inteiro em si. Eles continuam se expandindo, adicionando recursos de IA, plug-ins e outros enfeites É por isso que é ótimo que você comece agora. É disso que trata este curso. É aqui que você aprenderá e vamos começar. 3. Introdução ao Figma: Olá. Portanto, esta é a primeira lição sobre Figma explorando e entendendo como você pode configurar seu espaço de trabalho Portanto, presumo que você tenha baixado o aplicativo ou, pelo menos, aberto a versão web apenas para sua informação Você não precisa baixar o aplicativo. Você pode simplesmente abrir o site e usá-lo a partir do seu navegador. Estou assumindo que você também se conectou. Eu não acho que eu deveria guiá-lo nesse processo, mas deve ser bem fácil. Então, agora que você já tem o Figma instalado e está nele agora, é assim que ele deve ficar Talvez você tenha uma versão light. Talvez seja o modo escuro, mas é basicamente a mesma coisa. Você tem muitas coisas acontecendo. Ele quer que você saiba que há motivos, comunidade. Portanto, não se distraia com todos esses elementos , clique em Criar e continue com o design Agora, você pode ver isso de forma diferente, você pode vê-los como serviços diferentes. Então, vá em frente e clique em design, e isso abrirá uma nova guia para você. Essa nova guia é basicamente um novo arquivo de projeto um arquivo de projeto pode conter várias páginas dentro dele. Neste momento, estamos neste arquivo. Não tem título no momento e vou examinar os diferentes elementos aqui na tela com você, um por um A primeira coisa que vamos ver é a panorâmica da mão esquerda. Agora temos, em primeiro lugar, aqui o logotipo Figma Ao clicar nela, você tem essas guias regulares, as guias padrão de arquivo, visualização de edição Eles podem oferecer muito mais opções para editar coisas, além de configurar o arquivo, configurar algumas coisas, exportar e assim por diante, alterar suas preferências. Mas eles estão praticamente escondidos, porque você não precisa usá-los muito, então eles estão escondidos aqui sob o logotipo da Figma. Então você tem o título. Você pode dar ao seu projeto um nome de Projeto X, por exemplo, ele diz que é um projeto de equipe, então você também pode alterar o nome do projeto de equipe, e diz que é por isso que temos essas opções aqui e, abaixo disso, temos duas guias diferentes Temos arquivos e ativos. Agora, os ativos estão relacionados aos ativos de design que você pode emprestar. Mas isso é um pouco mais avançado. Mas digamos que você tenha aqui essas bibliotecas. Portanto, você tem, por exemplo, elementos de design do IOS que podem ser emprestados aqui e adicionados à página Mas agora, vamos ficar com o arquivo. Agora, em Arquivo, você tem páginas. Então aqui você vê a página número um, e diz que ainda faltam duas páginas livres. Isso se você tiver a versão gratuita como eu tenho para esta conta. E você pode adicionar outra página. Agora você pode dizer: qual é o objetivo das páginas? Quero dizer, é isso que você sabe, estamos escrevendo um livro aqui? Não, não se trata nada disso. Aqui são documentos completamente diferentes. Então, quando vamos para a página um e criamos um retângulo, e você vai para a página dois, esse retângulo não está em lugar nenhum Está bem? Então, tenha isso em mente. As páginas são tipos de documentos diferentes dentro do mesmo projeto. Isso é como um arquivo ou, você pode dizer, uma pasta, certo, e tem várias páginas dentro dela. Então, vamos em frente, clique com o botão direito do mouse e exclua esta página. E então temos camadas. Agora, com camadas, você pode ver apenas as camadas, os objetos, os grupos, as molduras, todos os tipos de elementos que você tem na tela. Se criarmos outro retângulo aqui, podemos ver o retângulo um e dois Se fizermos um retângulo com uma forma diferente, você pode ver um pouco a forma mostrada aqui Não mostra a cor, mas mostra a forma geral só para se ter uma ideia. Então, isso serve basicamente para lhe dar uma visão geral do que está acontecendo no seu arquivo. Você também pode pesquisar coisas dentro dele. Assim, você pode pesquisar textos diferentes ou pesquisar nomes de arquivos e assim por diante. Você também pode substituir, você pode escolher exatamente o que você está procurando é uma imagem, uma forma e assim por diante. Há muitas opções e você também pode fechar esse menu ou esse painel aqui apenas para ter mais espaço para ver um projeto. Mas eu recomendaria que você o mantivesse aqui. Você pode minimizá-lo ou expandi-lo se tiver uma tela maior, por exemplo, e puder pagar por isso. Basta ter uma ideia geral do que está acontecendo. Em seu arquivo de design. Você pode ver todas as camadas aqui. Isso é muito útil. Então, aqui na parte inferior, temos uma barra de ferramentas Muitas vezes, talvez você presuma ou espere que a barra de ferramentas esteja lá em cima ou talvez à esquerda ou algo parecido Mas não, no Figma, está aqui abaixo, e você não pode fazer muito com isso, para ser honesto Você não pode movê-lo, você não pode fazer muita coisa com ele. Muitas pessoas veem isso como limitante, mas, para ser sincero, acho que quanto mais simples Não quero poder jogar minhas ferramentas por toda parte, mas sim tê-las em um só lugar e sei que elas sempre estarão lá. Falaremos sobre as ferramentas separadamente mais tarde. Mas, por enquanto, vamos dar uma olhada no painel direito. E aqui temos o design. Então, em design, você tem design e protótipo. Essas são duas visões diferentes. Como eu disse antes, protótipo está mais relacionado às animações e à forma como você mostra Então, quando você quiser mostrá-lo a um cliente, como seria, e então você tem o design. O design está relacionado, quero dizer, quando você não seleciona nada, você pode alterar a página Então, a cor do fundo, você pode torná-lo branco ou escuro. Depende de você. Você também pode alterar os estilos das variáveis, mas essas são coisas sobre as quais ainda não falamos e são um pouco mais avançadas, certo? Portanto, não vá até lá. Mas quando você clica em qualquer objeto, esse retângulo começa a mostrar as propriedades Então, da posição, você vê os Xs e Ys, você tem a rotação, bem como alguns botões de alinhamento rápido e outras coisas Você pode espelhar o objeto, invertê-lo e assim por diante. Você também tem layout, então isso está relacionado ao tamanho, à altura, você pode alterá-lo, à largura, à aparência, à opacidade, aos cantos arredondados, ao preenchimento, ao traçado, aos efeitos e Caso queira exportar isso como uma imagem em PDF, você também pode fazer isso. Muitas opções aqui. E você pode me perguntar, o que é esse pequeno botão aqui ou ali ou qualquer outra coisa? Nós vamos falar sobre eles em tempo hábil. Mas sim, você deve ter uma compreensão geral do seu arquivo. Onde está o quê e como faço para usá-los? Isso é o que estou tentando te dar agora. Como mencionamos, o painel esquerdo é seu arquivo e suas camadas. Aqui você tem sua barra de ferramentas. Onde você pode escolher ferramentas diferentes. Você também pode usar o atalho. Então aqui, diz retângulo R. Por exemplo, você pode simplesmente pressionar R para obtê-lo Você pode pressionar V para obter a ferramenta de movimentação normal e assim por diante. No lado direito, você tem as especificações de design ou as propriedades de qualquer objeto que esteja selecionando. Há um botão muito, muito importante que está aqui, esse é o botão play. Quando você clica nesse botão, ele permite que você veja no que está trabalhando da perspectiva do usuário. Mas para fazer isso, você precisa ter uma moldura. Vamos falar sobre quais são os quadros na próxima lição. 4. Configurando sua primeira tela: Molduras, molduras e molduras. O que são, na verdade, molduras? Então, as molduras são sua tela. Eles são a ferramenta ou o material, digamos, em que você está pintando. Não é o pincel, não é a paleta de cores, mas é a sua janela para o usuário, certo? Isso é o que é o produto final e o que os usuários vão entregar no final. Isso é o que é uma moldura. Você não pode desenhar no ar, mas pode desenhar na parede. Mas, nesse sentido, a parede é sua tela e é exatamente isso que as molduras são para figma Aqui, você seleciona a ferramenta de moldura, e o que você pode fazer é simplesmente criar qualquer moldura de qualquer tamanho e, assim, você tem uma moldura. Essa é a tela. Essa é a tela. Pode ser uma tela de computador, uma tela de telefone, seja o que for. Ao segurá-lo, ao clicar nele e jogar, você abre uma nova guia no Figma que permite ver a aparência dessa moldura As molduras são únicas porque você pode colocar coisas dentro das molduras. Você pode colocar retângulos, colorí-los ou copiá-los, colá-los, colocá-los em outro lugar e ver como fica Essa é a tela que você está criando e que você pode ver. Agora, há algumas coisas que você deve ter em mente. Você pode ter quadros dentro de quadros. Crie uma moldura aqui, dê uma cor, faça. Então, isso é um quadro dentro de um quadro. Parece um retângulo normal, mas na verdade é uma moldura Mas a moldura externa é a tela, e isso está se tornando como um recipiente dentro de uma tela dentro de uma tela. Vamos discutir por que você pode querer fazer isso e qual é a diferença entre um retângulo e uma moldura Mas, por enquanto, vamos entender o que são quadros e como usá-los para criar telas. OK. Agora, uma coisa a entender é que você pode criar molduras em tamanhos diferentes, e o FiGMA já ajuda você nisso Então, quando você clica na ferramenta de moldura e vai para o painel direito, você verá molduras diferentes. Então, há uma moldura de um iPhone, certo? iPhone 17, 15, P max, o que você quiser, tamanhos diferentes, além do Android. Você tem tablets, desktops, MacBooks, TVs. Então, o que você quiser criar, você pode criar uma moldura. Então, basta clicar em um MacBook Air, podemos criá-lo e ele mostra o tamanho real Essa é a dimensão de um MacBook air. Quando clicarmos nele e clicarmos em Play, veremos o que há naquele MacBook, como ele se parece É basicamente assim que você cria uma tela. Você pode criar uma moldura de um iPhone ou criar uma moldura de uma TV ou até mesmo de um Apple Watch. Tudo isso é possível. Uma coisa que você pode fazer como extra. Ao criar esse quadro, desmarque tudo. Não escolha nada, clique na selva, só aqui, e depois vá para o protótipo O Figma nos permite mostrar a moldura de um dispositivo. Como escolhemos o MacBook Air, você pode escolher o MacBook air aqui mesmo como um dispositivo Às vezes, ele faz isso automaticamente para você. O que vai fazer é adicionar uma imagem do MacBook para mostrar seu design como se estivesse em um Mac real, o que é muito interessante porque é muito envolvente e dá ao usuário a experiência ou a sensação de que ele está realmente usando um dá ao usuário a experiência ou a sensação de que ele está realmente usando Este é um site real exibido em um laptop. Agora, compare isso com ser mostrado em nada, nenhum dispositivo. Parece muito seco. Isso é uma coisa que você pode fazer que eu pessoalmente recomendo. Mas a ideia geral desta lição é que as molduras são sua tela. Você não pode simplesmente desenhar na selva. Você tem que ter uma moldura, uma tela e colocar sua tinta nela. Tudo o que está fora desse quadro, se eu criar aqui um retângulo, e o colocarmos aqui, não será mostrado porque está em cima dele, mas não está dentro dele, se eu colocar aqui, também não é visível É só que não há nada. Mas quando eu arrasto isso e coloco aqui, agora está dentro da moldura. É visível e você pode ver isso aqui. Você pode ver que a moldura pode conter coisas dentro dela Depois de removê-la, agora o retângulo está do lado de fora Mesmo estando no topo, você pode vê-lo aqui, mas não está visível. É assim que você pode usar molduras como tela. 5. Adicionando texto e elementos básicos: Oi. Nesta lição, vamos criar ou aprender como criar formas, caixas de texto, vetores e muito mais Em primeiro lugar, vamos começar conhecendo um pouco essa barra de ferramentas. Agora, já exploramos a ferramenta de movimentação, e essa é a ferramenta padrão que você usa e que deve ser ao selecionar coisas e outros enfeites Portanto, mantenha-o sempre à mão e você terá a ferramenta de moldura Essa é uma ferramenta com a qual também estamos familiarizados e que aprendemos a usar, basicamente criando molduras, e então temos essa ferramenta retangular E cada um deles tem seu atalho. Então você pode clicar em R para escolher isso. Você pode clicar em V para escolher a opção de movimento, então você pode simplesmente alternar entre elas com essas letras. Está bem? Você só precisa memorizá-lo. Então você tem essa ferramenta quadrada ou retangular Você pode criá-lo exatamente assim e criar um retângulo. É tão simples quanto isso. Você pode fazer a mesma coisa com a ferramenta de linha. Certo? E você tem ferramenta de elipse, ferramenta seta, muitas coisas diferentes Agora, uma coisa que você deve saber que é muito importante é manter a tecla Shift enquanto cria uma forma basicamente permite que você a torne reta. Isso torna as dimensões iguais. Então, 154 por 154 são as dimensões. Dessa forma, ele permanece exatamente do mesmo tamanho. A mesma coisa quando você quer criar um retângulo. Dessa forma, ele se torna um quadrado em vez de um retângulo. Então, isso é muito útil. Outra coisa é que, ao criar algo como uma linha, segurar a tecla shift permite que ela fique reta. Se eu remover a mudança, veja o que acontece, posso criá-la em muitos graus diferentes em todos os tipos de graus. Mas se eu segurar a tecla shift, ela fica reta para a direita e para a esquerda, ou pode subir e descer, ou pode ser diagonal. Então, nós e descemos, ok? Então, isso é uma coisa a ter em mente, é muito útil porque, na maioria das vezes, você deseja manter as coisas em ordem e limpas Mas se não, depende totalmente de você. Então você também pode experimentar as outras ferramentas e criar coisas com elas, mas elas geralmente funcionam com princípios semelhantes, ok? E então temos a ferramenta de caneta. Agora, a forma como a ferramenta caneta também é bem simples. Então você clica uma vez e cria um ponto, ok? Então clique, você tem um ponto e, em seguida, cria outro ponto. E você segura, se você pressionar e segurar, você pode basicamente criar uma curva. Você pode torná-lo curvo. Você vê? Assim, eu criei essa curva. Agora, posso criar uma forma muito bonita ou qualquer outra coisa com ela brincando Então, só para mostrar o que quero dizer, estou apenas tentando criar essa forma de três D. Não tenho certeza de que tipo de formato é, mas parece uma banheira Sim. Assim, você pode criar formas diferentes, com linhas diferentes e assim por diante. Agora, você pode editá-los, alterá-los , trocá-los. Obviamente, se você for desenhar, também poderá alterar o traçado para aumentar as linhas, e isso é algo que você pode fazer com todas elas. Então, depois de escolher uma linha ou um vetor como este, você pode vir aqui e ver o traçado. Agora está à uma, você pode ganhar peso. Você pode fazer com que tenha mais peso, para que fique mais grosso. Existem outras configurações nas quais você pode alterar a cor e a mesma coisa com essas formas, você também pode alterar o preenchimento, escolher uma cor diferente, dar uma opacidade diferente e assim por diante Porque, como falamos sobre isso, esse painel direito ajuda você a escolher e alterar as propriedades de suas formas ou de seus outros elementos, como molduras. Você pode adicionar um traçado a ele, torná-lo preto, vermelho e também adicionar efeitos, mas isso é um pouco mais avançado. Mas é basicamente assim que você pode criar formas diferentes. Com essas formas, você está tentando criar sua interface de usuário. O que também temos é uma ferramenta de texto. Com a ferramenta de texto, há duas maneiras principais de criar texto, então você pode simplesmente clicar em qualquer lugar e começar a digitar. Você pode dizer olá. Mundo e, em seguida, basta digitar o quanto quiser. O que vai acontecer é que vai continuar durando o tempo que você quiser. Não vai para uma segunda linha, porque não tem uma forma definida. Quero dizer, você pode ver esse esboço, mas ele continua se expandindo Ele se expande e se contrai com base no tamanho com base na quantidade de texto que você tem Existe outra maneira de criar uma forma, segurar, clicar em segurar e depois deixá-la, então você pode dizer olá mundo. E então, quando você digita muitos A's, você verá que ele desce para a outra linha. Então, há uma pausa, e essa é basicamente uma diferença entre essas duas maneiras diferentes de fazer isso. Se você conhece a forma que deseja criar, então se você disser: Ei, eu quero uma caixa de texto por aqui, você pode criá-la dessa forma, é claro, podemos alterar as configurações posteriormente, mas o mais importante é que você a configure no início da maneira que quiser e depois poderá ajustá-la Mas vamos escrever aqui, quero dizer, Olá, mundo. Podemos destacar isso e , nesta pequena seção aqui, podemos mudar a tipografia Podemos mudar a fonte, escolher algo engraçado, alterar o tamanho da fonte. É normal ou se houver uma versão em negrito, também podemos escolher essa. Deixe-me mostrar que existem essas versões que podemos escolher. Podemos alterar o espaçamento entre letras, por exemplo, podemos torná-las mais próximas ou mais afastadas Se houver várias linhas, vamos fazer outra linha. Também podemos mudar o espaçamento entre eles para o espaçamento entre linhas, ou podemos escrever Auto e então ele se torna Então, podemos colocar isso de volta em zero para tornar normal. Também podemos alterar o alinhamento do parágrafo de alinhado para o meio ou da direita para a esquerda Também podemos escolher em termos da caixa de texto, se ela está mais para baixo ou está no centro ou algo assim na horizontal e na vertical. Você pode configurar e alterar essas duas coisas. Definitivamente, eu recomendaria que você explorasse essas opções e tentasse descobrir por si mesmo para entender como você pode manipular objetos, formas e caixas de texto para criar algo que você deseja Está bem? Dedique alguns minutos para tentar entender e entender, ok Então, como mencionei, o bom é que a maioria dos elementos tem as mesmas configurações. Então, seja um elemento de texto, um retângulo ou um quadrado, eles são basicamente os mesmos Somente objetos de texto, eles têm a seção chamada tipografia Mas todo o resto é o mesmo. Você tem preenchimento , traçado, efeito, layout. Você pode aumentar ou alterar o tamanho. Você também pode alterar o posicionamento e assim por diante. Agora que temos isso, entendemos como podemos criar formas diferentes. Nós podemos criar linhas. Podemos criar caixas de texto. Mas há algumas coisas que você sabe, mais. Uma coisa muito rápida, Lines. As linhas são ótimas. As linhas são boas. Mas uma coisa que você deve saber é que, ao aumentar a largura, você pode ver que essa linha é muito quadrada ou retangular Também tem bordas afiadas. Podemos mudar isso fazendo com que as bordas sejam arredondadas. Isso é uma coisa que você pode fazer. Outra coisa é que você pode transformar uma extremidade em uma flecha ou uma seta triangular ou um triângulo reverso ou em uma seta circular e assim por diante. Uma coisa legal a se ter em mente é que você também pode brincar com essas configurações, especialmente quando se trata de linhas. Eles são muito versáteis e assim por diante. Agora, aprendemos como criar objetos e como alterar as propriedades. Na próxima lição, falaremos um pouco mais sobre como podemos ter relações diferentes com esses objetos e como podemos trabalhar com grupos e quadros. Te vejo na próxima aula. 6. Quadros vs. grupos vs. formas: Então, grupos e quadros, o que são e como podemos usá-los? Então, muitas vezes, como designer, você vai se deparar com uma situação em que vai querer juntar alguns elementos Você quer que eles sejam mantidos juntos, juntos. Você sabe, você não quer que eles sejam separados, mas sim que formem uma única forma. E só para dar um exemplo disso, temos essa banheira aqui. Podemos voltar ao normal, e temos essas linhas. Mas o problema é que essas linhas são todas separadas. Então, o que normalmente fazemos no mundo do design é agrupá-los para colocá-los na mesma forma, no mesmo grupo. Dessa forma, sabemos como juntá-los e movê-los juntos e assim por diante. Agora, a maneira de fazer isso é segurar, arrastar e selecionar tudo isso. Agora você está arrastando sua seleção e pode ver essas seleções Você também pode fazer isso aqui, segure e, em seguida, mantenha pressionada a tecla Shift e clique. Ele vai selecionar tudo entre isso e aquilo. Em seguida, você pode clicar em Control G ou clicar com o botão direito do mouse, clicar com o botão direito e, em seguida, selecionar o grupo. E assim, agora você tem o grupo número um. Agora, é claro, você pode criar outro grupo em cima disso ou em cima disso. Mas quero dizer, não vai fazer muita coisa, não vai te ajudar muito. Agora, essa é uma maneira de fazer isso. Isso é um grupo. Agora, o bom de um grupo é que ele se move junto. Então, se as dimensões, todas as linhas, elas se juntam, elas se movem juntas. Mas às vezes isso não é ótimo porque pode dar uma aparência muito distorcida Talvez não seja isso que você quer. Uma alternativa para isso, eu simplesmente voltei, eu a desfiz Agora eles são apenas vetores separados, basta clicar com o botão direito do mouse e escolher a seleção de quadros Agora, o interessante sobre uma moldura é que ela não estica as coisas. Quando você o move, ele simplesmente abre e pode se mover com ele, mas não vai se esticar. Como você pode ver, não é exagero, a menos que você entre em configurações mais profundas, mas não é isso que estamos fazendo agora Essa é uma diferença entre quadros e grupos: eles funcionam de forma diferente. Os objetos dentro deles se movem de uma maneira diferente. Uma coisa com as molduras é que você pode ter muito espaço sem ser ocupado. Mas com grupos, ele contém apenas o item real. Se agruparmos isso agora, vou agrupá-lo em vez de emoldurá-lo. Você pode ver que não há espaço vazio. Isso está vindo direto para a fronteira. Então, se eu esticar, vai esticar tudo. Mas às vezes você quer deixar um pouco de espaço vazio e outros enfeites Então essa é uma diferença. Agora, chegando a outra pergunta, qual é a diferença entre uma moldura e um retângulo Então, deixe-me criar uma moldura aqui, ok? Eu posso colocá-lo aqui também. Deixe-me colocar aqui e dar outra cor, vermelho, traçar. Como você pode ver, eles não são muito diferentes. Eles não parecem nem um pouco diferentes. Eles parecem quase idênticos. É por isso que temos que nos perguntar: qual é a diferença? A diferença é que as molduras podem conter coisas dentro delas. Para dar um exemplo, posso trazer esse círculo e colocá-lo dentro dessa moldura arrastando-o para dentro Agora, quando olhamos para as camadas, a elipse, o círculo está dentro da moldura e você pode ver que ele é cortado quando sai da Se segurarmos, arrastarmos e soltarmos para fora, ele sairá da moldura. Isso é uma coisa que as molduras podem fazer. Tente colocá-lo em um quadrado em um retângulo, não funciona Não funciona da mesma maneira, e essa é uma diferença principal. Sempre que criar qualquer forma, você deve se perguntar: se estou criando um retângulo, quero que seja apenas um retângulo ou quero colocar algo nele Eu quero que ele contenha outras formas caixas de texto e outros enfeites Nesse caso, talvez você deva criar um quadro. Eu entendo que isso é um pouco difícil de entender, mas acho que com a prática, vai ficar um pouco mais fácil de entender Resumindo, os grupos são ótimos quando você deseja agrupar vários elementos em uma única forma, especialmente se você quiser que ela se torne uma forma própria, que seja elástica, que seja redimensionável, e as molduras sejam boas para conter coisas dentro delas em oposição ou em contraste com retângulos ou outras formas que não podem conter coisas dentro delas ou ter não podem conter coisas especialmente se você quiser que ela se torne uma forma própria, que seja elástica, que seja redimensionável, e as molduras sejam boas para conter coisas dentro delas em oposição ou em contraste com retângulos ou outras formas que não podem conter coisas dentro delas ou ter elementos embaixo deles. Essa é uma diferença principal. Te vejo na próxima aula. 7. Criação de quadros criar quadros: Então, falamos sobre formas. Falamos sobre quadros e grupos e as diferenças entre eles. Mas agora vamos ao que interessa. Vamos tentar criar uma pequena interface de usuário usando esses elementos sobre os quais aprendemos. Então, o que vou fazer é me perguntar: quero criar algo agora, mas isso vai conter outras coisas? O que eu vou criar? Bem, eu quero criar um cartão e quero que esse cartão contenha outras coisas dentro dele. Vou usar uma moldura. Estou pensando em criar um aplicativo de fitness que mostre um painel também outras informações. Pense nisso como o Apple Fitness, com um aplicativo que informa quantos passos você deu, quantas calorias você queimou e assim por diante. E vamos tentar projetá-lo de uma maneira diferente, mas terá mais ou menos os mesmos princípios e tudo bem, porque o foco aqui é aprender e podemos aprender copiando tentando imitar e obter inspiração de outros bons produtos Agora eu tenho a ferramenta de moldura. Vou criar uma moldura aqui e vou torná-la retangular assim, e vou dar a ela um pouco de cor, uma cor muito leve, ok, ótimo E então eu vou dar 16. Esse é o raio, o raio da esquina, ok Então agora eu dou 16, então ele tem esses belos cantos arredondados. Em seguida, adicionarei texto aqui e escreverei as etapas. Está bem? Mantenha as coisas simples. Nada muito sofisticado Você pode escolher uma fonte diferente. Normalmente, gosto de usar um meio em vez do normal quando se trata de peso , porque é um pouco mais legível. Está bem? Agora, vamos garantir que o texto seja legível. 12 é bom, 14 é melhor. Então, sim, isso é uma coisa a ter em mente. E então vamos seguir em frente e criar algo para nos mostrar quais são essas etapas. Vou usar retângulos porque, como eu disse, quando me pergunto, quero que isso contenha outras coisas dentro dele? Não. Vou criar esse retângulo e dar a ele também 16 raios, que o tornará totalmente redondo, e então eu o tornarei azul ou azulado Agora é azul, e então eu posso copiar e colar usando o Controle C, Controle V, e trazê-lo aqui, alterar a altura. Também posso simplesmente segurar e depois arrastar e depois arrastar. Ele vai copiá-lo. Vai fazer uma duplicata. Agora, eu quero mostrar a semana inteira. Temos um, dois, três, quatro, cinco, seis, sete. Está bem? Agora você pode ver que o espaçamento entre eles é seis, diz Agora, o que podemos fazer é segurá-los. Escolhendo eu estou segurando todos eles clicando em Shift, ok? Então clique em Shift, segure Shift e, em seguida, clique em cada um deles. Então, se eu fizer isso, todos eles terão basicamente mais largura, que não tenho certeza se é o que eu quero, porque agora está muito grosso Mas o que posso fazer é manter esse espaço e adicionar um pouco mais de espaçamento entre eles. Agora, isso parece certo, eu diria, e depois vou tentar fazê-los variar um pouco. Então eu poderia fazer o atual, não tenho uma cor diferente ou algo parecido. Para mostrar que isso está sendo calculado agora ou é atual, ou algo parecido. Não tenho certeza. Essa é uma interface de usuário muito, muito simplista que mostra as etapas, certo? Mas falta alguma coisa. Quero dizer, quantos passos eu dei durante o dia? Nós podemos fazer isso. Talvez possamos mostrá-lo aqui à direita para que possamos dizer, não sei, 8.600 E também podemos mudar as cores. Quer dizer, posso deixar isso um pouco mais cinza escuro e dar a esse número um pouco mais de importância. Eu também posso fazer isso tornando-o ousado. Talvez eu pudesse fazer azul ou talvez não. Mas essa é uma pequena interface de usuário e, desse jeito, fizemos um cartão e, como você pode ver, é uma moldura, a moldura tem uma cor e contém esses outros elementos. Você pode ver isso aqui. A moldura número dois, tem todas essas formas juntas. Tem as caixas de texto e assim por diante. Assim, você pode criar uma moldura muito simples e, com essa moldura, adicionar elementos a ela. Espero que tenha feito sentido para você, mas vá em frente e experimente mesmo e veja o que você pode fazer. 8. Efeitos: Então, eu brinquei um pouco com esse elemento que temos aqui, mas falta algo e eu realmente não consigo identificar, mas talvez possamos ver o que podemos fazer quando se trata de efeitos. Então, hoje, vou mostrar um pouco como você pode brincar com alguns efeitos quando se trata de figma O que você vai fazer é clicar na moldura ou no objeto ao qual deseja adicionar o efeito. Então, aqui temos muitos objetos, mas queremos aplicá-los a um quadro geral. Então, o que eu vou fazer é abordar os efeitos aqui. Eu clico em Mais. O que isso vai fazer é adicionar uma sombra projetada imediatamente. Agora, a sombra projetada é interessante porque já tem alguns valores. Mas ao clicar aqui, você pode alterar esses valores. Você pode alterar o quanto a sombra está indo em termos de X e Y. Vertical e horizontalmente, ela está sendo deslocada ou um pouco removida ou mais abaixo na direita, em qualquer direção que você queira que ela desça, dependendo da fonte de luz? dependendo da E então você também pode adicionar o desfoque. Agora, eu realmente gosto de usar muito desfoque, talvez 24, talvez 16, talvez até mais Então você também se espalhou. Espalhar apenas espalha toda a sombra. Eu não recomendaria usar isso para ser honesto. Vamos fazer assim. Vou adicionar 16 e vou deixar a cor um pouco mais fraca, então talvez 15% Em seguida, vou deixar o fundo totalmente branco. E então aqui está como está agora. Parece muito mais limpo, muito mais moderno. E a sombra é muito discreta, muito sutil. Não é muito visível e é exatamente isso . Não queremos fazer. Eles se concentram demais na cor do cartão, mas sim no conteúdo. Está bem? Então, esse é um efeito que você pode aplicar e brincar com ele até encontrar o valor certo. Quero dizer, você pode fazer o Y, você pode fazer 16 também. Você pode fazer com que caia tanto ou pode fazer com que caia oito. Você pode fazer o desfoque 36 e então você tem muita sombra aqui, e parece que o fundo é cinza, mas na verdade não é Há muita sombra aqui. Mas isso é uma coisa que você pode fazer. Também há outros efeitos. Quando eu adiciono um efeito, ele é automaticamente sombreado, mas também há sombra interna e tem as mesmas coisas, as mesmas especificações que você pode alterar Agora, este faz parecer que este cartão está embutido na tela, dentro da parede. Parece que sim. Isso é uma coisa que você pode experimentar. Há desfoque de camada. Isso desfoca toda a camada Há desfoque de fundo, isso desfoca o fundo se houver alguma coisa, mas você precisa de algo para o fundo para Há ruído, textura de vidro e assim por diante. Vá em frente, experimente e veja o que funciona. Mas, para ser sincero, eu diria que, quando se trata do Figma, o efeito mais usado é sombra projetada porque, quando se trata da web, sombras são muito importantes para as camadas estilizadas e também são muito Basicamente, é assim que você pode fazer com que seus elementos pareçam um pouco mais bonitos. 9. Layout, alinhamento e espaçamento: Então, agora que criamos nossos elementos de design e começamos a projetar essa pequena tela elegante, é hora de ser um pouco mais exato Como designers, você sabe, somos artistas. É nosso trabalho criar algo bonito, e estamos no meio disso. Estamos tentando fazer isso. Mas também é nosso dever ser exatos quando se trata de fazer medições. Não devemos criar coisas à toa. Não devemos simplesmente criar coisas e apenas estimar as distâncias no espaçamento É muito importante que sejamos realmente exatos quando se trata de espaçamento, quando se trata de alinhar as Não podemos deixar que as coisas fiquem um pouco erradas, nem mesmo um pequeno pixel , porque isso pode parecer muito ruim para nós como designers. Isso pode ser muito perturbador para os usuários que estão vendo nosso design É por isso que precisamos tomar medidas para garantir que nossos designs estejam alinhados corretamente e que não estejam errados nem mesmo por pixel Agora, há várias maneiras de fazer isso. Uma maneira de fazer isso é por meio do que chamamos de grades. Então, quando você clica no quadro que você tem, o quadro inteiro, você pode vir aqui, navegar e navegar até o guia de layout. E quando você clica no sinal de mais, ele cria uma grade. É como aquele caderno do ensino médio que você tinha basicamente transforma tudo em pequenos quadrados Agora, há coisas diferentes que você pode criar. Você também pode criar colunas ou linhas. Realmente depende do que você está tentando fazer. Pessoalmente, eu recomendaria que você trabalhasse com colunas porque elas geralmente são mais padronizadas e fáceis de trabalhar. Ele dividirá sua tela em colunas, mas você pode definir as configurações para isso. Assim, você pode configurar uma margem e dizer: não quero que a tela fique na borda aqui. Quero que o conteúdo fique um pouco no meio, no centro. Eu vou dar 24 ou você pode dizer 16 margens. Digamos que 16. Depois, você pode decidir quantas colunas deseja ter. Vamos com quatro. Acho que quatro é um bom número e depois há também a sarjeta A calha é a quantidade de espaço entre elas entre essas colunas Você pode torná-lo muito pequeno ou muito grande, dependendo do espaçamento que você deseja ter entre eles. Vamos fazer a sarjeta agora, apenas dez. E então também podemos mudar a cor, a propósito, se você quiser. Costumo achar mais bonito do que vermelho porque o vermelho é muito alarmante Eu o faço preto e faço 10% ou 5%, só para que eu possa ver, mas não é chato Então, podemos seguir em frente e começar a alinhar nossos elementos. O bom é que você sabe que isso não deve mais ir para a esquerda. Isso é perfeito a partir daqui. À direita, precisa de um pouco de trabalho. Podemos tentar redimensioná-lo assim manualmente, vou mover esses elementos um pouco à mão E então eu vou escolher tudo isso e diminuir o espaçamento. Agora parece muito mais limpo. Quando chegamos ao segundo, agora ele também está desligado. Vou copiar isso segurando Alt e Shift e vou alinhá-lo aqui Vou apenas copiar os valores daqui e as cores também. Que eu vou deletá-lo aqui. Essa é uma maneira de fazer isso. Como você pode ver agora, quando desligamos essa grade, isso pode ser um pouco perturbador para os olhos Você pode ver que agora eles estão alinhados de forma mais adequada. Essa é uma maneira de fazer isso, e acho que isso faz muito sentido. Envolve muito olhar com olhos e adivinhar ou não realmente adivinhar, mas apenas julgar Mas isso é algo que você vai fazer muito como designer. Outra forma de fazer isso é com uma régua. Agora, você provavelmente já percebeu aqui no topo que temos esses números e tudo que você precisa fazer é segurar e arrastar. Você simplesmente vai arrastar exatamente como aquele puxão, e então você pega essa régua. Então, ao colocá-lo aqui, você pode tentar configurá-lo, alinhá-lo às bordas e garantir que as coisas estejam alinhadas Agora vou fazer isso desse lado, horizontalmente, porque faz mais sentido Dessa forma, podemos garantir que esses dois elementos estejam no mesmo nível. Você pode fazer a mesma coisa com o texto caso algo dê errado, e você pode ter certeza de que, de todos os lados, está tudo bem. E sim, então essa é uma maneira de fazer isso. Você também pode fazer isso verticalmente Portanto, ao criar outros elementos agora, você só precisa se certificar de que eles estejam dentro desses limites Essa é outra maneira de fazer isso, mas essa é melhor porque você tem um pouco mais de controle Você pode controlar a coisinha, você pode dizer, e essas colunas, as que estão dentro? E essa? Está alinhado corretamente ou não Essa é outra maneira de fazer isso, e há uma terceira. Uma terceira via. OK. Portanto, a terceira maneira é verificar as formas. Então, quando eu escolho essas, por exemplo, essas duas formas, quando as seguro, quando as seleciono pressionando a tecla Shift clicando em ambas. Você pode ver que eu vejo instantaneamente aqui um espaçamento, eu posso mudar o espaçamento Isso é uma coisa que você pode fazer para garantir que tudo esteja correto Já fizemos a mesma coisa com essas colunas. Você também pode fazer isso desse jeito. Você pode escolhê-los e garantir que o espaçamento seja adequado ou não Isso é algo que você pode fazer para alinhar melhor as coisas e oferecer outra forma , outro recurso Digamos que copiemos isso , colamos aqui e colocamos lá. Mas agora você pode ver que o espaçamento está um pouco errado. Em vez de criar colunas, linhas e réguas, o que podemos fazer é escolher todas elas. Estou escolhendo esses três e então temos esse botão aqui. Você vê isso? Aqui. Normalmente, está no canto inferior direito. Ao clicar nele, o Figma igualará o espaçamento e, a partir daí, você poderá alterar o espaçamento para o quanto precisar Tivemos dez lá, você também pode fazer dez aqui, se quiser. Depende totalmente de você. Mas sim, isso é uma coisa que você pode fazer. Outra forma de alinhar as coisas também diretamente dos próprios objetos. Você clica no objeto que deseja alinhar e, em seguida, pode escolher essas posições Você pode dizer que eu quero isso centrado. Quero que ele seja alinhado à esquerda da moldura, à direita, à parte superior, ao centro, à parte inferior e assim por diante O legal é que você também pode, quero dizer, digamos que isso esteja um pouco errado Você também pode escolher vários elementos e alinhá-los para serem centralizados Horizontalmente, eles estão centralizados agora ou você pode dizer, eu quero que eles sejam Agora eles estão um em cima do outro e assim por diante. Essas são coisas realmente legais que são úteis para que você possa alinhar seus objetos Porque, como mencionei, essa é uma parte essencial do design. Estamos no meio entre artistas e arquitetos, certo? Não estamos criando esses edifícios que são super exatos em termos de números, técnicos e assim por diante. Estamos criando algo que deve ter números exatos. Não é demais. Não é tão sério. Não estamos construindo um arranha-céu, mas estamos criando um site e ele deve ter alguma precisão Mas, ao mesmo tempo, temos uma parte artística. Devemos ser artísticos, devemos ser criativos. Temos um pouco mais de liberdade do que arquitetos. Não estamos vinculados à física, estamos vinculados a outras diretrizes de design. Mas, novamente, devemos estar no meio, não muito artísticos, nem muito exatos, mas ter um bom equilíbrio entre os dois. Então, essas são apenas algumas maneiras pelas quais você pode manipular seus objetos para alinhá-los. Então, exploramos fazer isso com guias. Nós organizamos guias em colunas com grades e assim por diante. Exploramos como fazer isso com réguas e, sim, o que você poderia dizer, essas são linhas de régua E você também pode fazer isso por meio desses botões de ajuda aqui. Eles ajudam você a alinhar as coisas. Você só precisa descobrir como você quer fazer isso. Ou, como mencionamos, quando você escolhe várias coisas que não estão alinhadas, você também recebe um aqui Se quiser alinhar vários objetos, basta escolhê-los para gostar deles e, em seguida um pequeno botão clicar em um pequeno botão e, desse jeito, está Vá em frente e teste isso e veja o quão preciso você pode ser. Te vejo na próxima aula. 10. Cores: Oi. Nesta lição, falaremos sobre cores. Agora, quando se trata de cores, fica um pouco difícil. Não é um tema ou tarefa muito fácil para maioria dos designers, porque todos nós temos nossas próprias abordagens quando se trata de cores, sobre como escolhemos as cores, como garantimos que elas se harmonizem e como realmente as usamos no design, como elas ocorrem, digamos Porque muitas vezes temos um plano e, quando realmente implementamos o plano e usamos as cores, não é exatamente como planejado. Deixe-me explicar o que quero dizer com simplesmente mergulhar nisso. Agora, quando se trata de cores em um design em um aplicativo ou site ou o que quer que seja, você geralmente tem várias cores que permanecem consistentes em todo o design. Agora, eu fiz esses quadrados aqui só para mostrar o que quero dizer Podemos escolher, por exemplo, seis cores que são as cores principais que vamos usar. Então, vamos preencher as cores que queremos. Agora, em primeiro lugar, eu gosto de começar com preto e branco porque a maioria dos designs, pelo menos os modernos, eles geralmente têm um fundo branco a menos que você esteja usando um tema escuro, mas sim, geralmente um fundo branco e você tem algum uso de preto. O que podemos fazer é escolher branco ou você pode ter esbranquiçado , dependendo do que você está fazendo. Mas vou escolher o branco diretamente para cima e vou dar uma borda para que fique visível. Está bem? Então, esse é o nosso branco que vamos usar, e então também podemos ter preto. Agora, podemos ter preto puro ou, às vezes, você pode usar um tipo de cinza escuro muito preto. Você sabe, não é visível ou não se distingue que não seja totalmente preto Mas às vezes é bom fazer isso para suavizar o contraste porque entre branco e preto, há uma grande distância Portanto, escolher cores brancas ou pretas ajuda a reduzir esse forte contraste Isso é o que eu vou fazer com esse 252525 por aqui. Então, o que eu gosto de ter também é um pouco de cinza. Há diferentes tons de cinza que eu uso. Geralmente, há um cinza escuro que é escuro o suficiente para que seja legível E então, por exemplo, esse cinza. Vou pegar isso aqui, copiar o código hexadecimal e colar Está escuro o suficiente para que seja legível. Mas também podemos usar um cinza aqui, como essas linhas. Não precisa estar visível. É esse. Portanto, não precisa estar visível. Não é tão visível, mas não é um elemento essencial para que tenha que ser visível. Isso faz sentido? De certa forma, é ótimo ter isso. Se você pode ver, você pode ver. Se você não vê, não está perdendo nenhuma informação real. Agora, podemos reordená-los, para ser honesto. Vou apenas reordená-los para que faça mais sentido Deixe-me ver. Vou colocar isso aqui e pegar esses. Lá vamos nós. Eu acho que isso é bom o suficiente. Você vê do branco e depois do cinza claro, cinza escuro e depois do preto. Então, podemos adicionar mais uma cor para ser honesto. Então temos essas cores. Agora, geralmente são primários, secundários e terciários. Normalmente, as pessoas começam com elas, para ser honesto. Mas, basicamente, a ideia é que sempre que você tem um aplicativo ou uma identidade de marca, você tem cores que se repetem, e essas cores, algumas delas se repetem mais do que outras. Por exemplo, eu posso usar vermelho aqui para ter um ponto de exclamação, e é como vermelho para mostrar que há um risco, há um problema Mas isso não significa que vou usar vermelho em toda a tela. A mesma coisa aqui, eu tenho azul, eu tenho laranja. Isso não significa que vou reutilizá-los o tempo todo Mas, para ser sincero, é bom garantir que essas cores que você está usando estejam sendo repetidas. Digamos que azul e laranja, talvez sejam cores essenciais que usamos em nosso design. Normalmente, quando se trata de aplicativos de fitness, você não tem apenas uma cor que se repete, mas geralmente tem. Isso faz sentido Por exemplo, podemos pegar o azul aqui. Vou clicar em I, abro a ferramenta conta-gotas e depois podemos pegar essa laranja Agora eu tenho esse azul e laranja. O que poderíamos fazer é usar o azul para os botões também e o laranja também para os botões. Isso também funciona, e podemos escolher outra cor. Uma das primeiras cores. Então, pode ser uma espécie de vermelho ou podemos tentar suavizá-lo assim Poderíamos escolher algo diferente. Agora, geralmente o amarelo é um pouco mais difícil de ler ou mais difícil de ver em geral. Eu costumava evitá-lo ou escurecê-lo, mas quando você o escurece, ele fica com essa cor suja. É essa cor cáqui ou algo parecido. Mas não é muito usado, pelo menos não em designs modernos. Podemos ter verde, mas ele não combina exatamente com essas cores. Este é um lugar onde você deve julgar por si mesmo como designer. Existem teorias sobre como fazer isso, mas você também pode fazer isso sozinho. Podemos escolher um azul escuro para ajustar esses exercícios. Poderíamos obter uma cor roxa ou rosada. Sim. Essas são nossas opções às quais estamos presos. Sinto que estou me inclinando para o vermelho, porque então temos a seleção de cores muito básicas que ainda funcionam juntas Quer dizer, é um aplicativo de fitness, então não precisa ser algo louco. Agora, uma cor que é frequentemente usada esse verde neon, costuma ser usada, na verdade, para aplicativos de fitness Isso é algo que também podemos buscar. Mas eu não escolheria isso como minha cor primária e tentaria ajustá-la um pouco. Nós gostamos disso. Não tenho certeza. Você também precisa ter certeza de que fica bem em um fundo branco. Isso é muito essencial. Então eu subia o azul aqui e faria desta nossa primária, esta nossa secundária, e esta seria nossa terciária Mas eu ainda não estou totalmente convencido disso, para ser honesto. Sinto que quero dar uma olhada no tom. Agora está mais próximo do amarelo. OK. Acho que isso é bom o suficiente, ok? Então, agora temos essa paleta. Não precisa ser a melhor paleta de todas, mas é uma paleta que podemos tentar manter Agora temos uma paleta de cores geral e vamos tentar integrá-la ao nosso design Então, nas próximas aulas, medida que criarmos componentes e elementos diferentes, tentarei incluí-los mais e você verá como parece que podemos voltar e revisá-los e reordenar ou alterar as cores que temos apenas para garantir que tudo esteja bem Uma coisa que você também pode fazer, e isso é opcional , é escolher um tom para cada cor. Então, por exemplo, aqui você tem o azul. Podemos escolher um azul mais escuro apenas para ter certeza de que podemos usá-lo como um efeito, como um efeito de foco ou algo parecido Quer dizer, já temos o azul claro, certo? Portanto, também podemos ter o azul claro como tons diferentes do que temos. Quando você faz algo assim, você meio que se torna mais profissional. Você tem um sistema melhor porque então você tem um backup para tudo. Portanto, caso você precise de uma versão mais escura, você já tem essa configuração E a mesma coisa para laranja, tenha uma versão mais escura. Você pode até deixá-lo um pouco mais vermelho. Acho sempre melhor mudar um pouco a tonalidade também Podemos fazer com que pareça sujo, mas quando você muda mais para laranja, amarelo, talvez seja melhor ficar mais verde. Você vê? Agora temos versões mais claras das cores, bem como versões mais escuras, caso seja necessário Certo? Mas essas são as cores principais e essas são as subcores, basta fazer backup caso precisemos delas para determinados efeitos Está bem? Então é assim que você pode escolher sua paleta de cores Como mencionei, existem diferentes maneiras de fazer isso, para garantir que suas cores funcionem juntas, mas isso é mais teórico. E, para ser sincero , como designer, com tempo e experiência, você deve ser capaz de observar essas cores, entender quando elas funcionam juntas e quando não funcionam. Como nota, só porque escolhemos essas cores, não significa que temos que colocá-las uma em cima da outra ou ao lado outra. Não precisa ser assim. Podem ser elementos diferentes e pontos diferentes e assim por diante. Apenas tenha isso em mente. Agora temos as cores prontas e temos que escolher a tipografia como na fonte, o que faremos na próxima lição 11. Tipografia: Então, agora é hora de escolher a tipografia para escolher as fontes adequadas para o nosso design Agora, como sempre, vou fazer algo mais simplista Esse pode ser um problema muito mais complexo, mas vamos tentar relaxar agora. Então, primeiro de tudo, vamos digitar algo aqui e escrever um título ou algo parecido E então vamos copiar isso e escrever uma legenda. Você pode ter uma fonte para todo o seu aplicativo ou duas fontes diferentes, uma para os títulos e outra para as legendas Então, para as manchetes, geralmente elas são maiores, então pode ser 24, pode ser em negrito, e então você pode ter isso como algo menor, talvez 16, mas não em negrito, médio ou normal, ok? Então, agora, estamos usando Enter, e é muito legal usar o Inter como tipografia Mas talvez você queira explorar opções diferentes. Agora, é claro, existem algumas opções básicas, como Montserrat Esta é a minha escolha, para ser honesto. Eu realmente gosto disso. Também há uma ferrovia. Agora, você pode ver que cada um tem uma vibração ou atmosfera diferente Vou voltar um pouco para que você possa notar alguns deles, este tem uma inclinação diferente O E, você pode descobrir o D tem um pequeno reflexo com a ferrovia Uma letra, na verdade, um pequeno toque à direita. Alguns deles parecem menores, outros são mais grossos. Você pode ver aqui, a espessura aqui muda. Isso varia. Daqui até aqui é diferente. Aqui fica mais grosso. A linha fica mais grossa, enquanto Montserrat mantém uma largura quase desigual em toda Pequenas diferenças podem afetá-lo, podem afetá-lo. Você pode ter várias fontes diferentes. Se houver impacto. Você pode ter impacto como fonte. Você pode simplesmente conferir fontes diferentes. Algumas delas são mais difíceis, maiores e cada fonte tem uma conotação, digamos, Então, essa fonte é algo que você provavelmente não esperaria ver em um aplicativo, certo? A mesma coisa com este. Quero dizer, talvez, na verdade, dependa do tipo de aplicativo, talvez um aplicativo de anotações, talvez um pequeno aplicativo, mas não um aplicativo de esportes. Então, aqui, você está fazendo exercícios, você não vai ver essa fonte. Quero dizer, por uma razão, essa é uma fonte para outra coisa, talvez para ditado, para escrever livros, para algo assim, mas não exatamente para fitness Além disso, é um pouco mais difícil de ler. Então, essas são duas coisas às quais você deve prestar atenção. Isso se encaixa no tema, certo? O estilo está se harmonizando adequadamente com a ideia do aplicativo A segunda coisa, é legível? É algo que você pode ler e entender adequadamente? Esse é legal, mas, por exemplo, não é muito prático. Se eu for escrever essa palavra de oito letras, ela ocupará todo o espaço? Isso não faz sentido. Então, tente encontrar algo que esteja no meio. Não é muito divertido, mas também não é muito sofisticado. Nem muito cursivo, nem muito escrito à mão, algo no meio Como eu disse, agora, estamos examinando as fontes uma por uma. Mas geralmente cada designer testou e experimentou fontes, experimentou e testou fontes com as quais experimentou e teve sucesso, e elas se encaixam muito bem na maioria dos temas Está bem? Assim, podemos, por exemplo, tentar causar impacto e talvez pudéssemos escrever tudo em letras maiúsculas. Talvez vamos ver como isso se parece. Assim, podemos experimentar e escrever aqui, por exemplo, estatísticas. Vamos ver como isso se parece só para ter uma ideia. No momento, está às 24 e parece um pouco grande demais. E se mudarmos a cor? Ainda parece muito grande. Não se encaixa no tema que temos aqui. Eu pessoalmente não aceitaria. Agora vamos ver como seria algo parecido com uma ferrovia. Vamos ver. Estou aqui. OK. Não é exatamente meu estilo. Quero dizer, porque é uma letra maiúscula. E se escrevermos suas estatísticas? Parece mais isso, para ser honesto. Isso parece um pouco melhor. Vamos compará-lo com Montserrat. Eu sinto que aqui, a ferrovia tem muito mais personalidade. Que tal, vamos pegar o Geist, por exemplo. Nesse caso, acho que Geist é um pouco mais padronizado, é muito sofisticado, nem muito sofisticado Então se encaixa, mas vamos ver, é tão diferente do Inter Sim, quero dizer, para ser honesto, não é tão diferente. Podemos continuar procurando. Podemos escolher algo um pouco melhor. Ok, então essa fonte é muito interessante porque acho que esses tipos de fontes serifadas estão ficando mais populares e não se encaixam exatamente na atmosfera, mas introduzem uma ruptura no estilo, mas é interessante que eu acho que funciona, eu simplesmente funciona muito bem Então, eu gostaria de continuar com isso, embora ache que, quero dizer, não é 100% adequado, mas vamos experimentar Por que não? Podemos mudar isso, trocá-lo mais tarde? Não tem problema. Vamos pegar e escrever aqui. DM serif, display DM, e vamos escrevê-lo com Então, na outra fonte, poderíamos usar a ferrovia, talvez, para ser honesto, testá-la, ou poderíamos simplesmente usar Geist ou Inter, para ser honesto, Inter é Portanto, podemos aceitar isso por enquanto e não pensar demais. Então, esses são todos Inter, e então temos DM Serif. E assim, temos suas estatísticas e você pode ver, quero dizer, é muito interessante. Podemos tentar fazer com que também sejam exibidos como servos, e tenham uma aparência bonita, mas não tão bonita, para ser honesto, para que possamos reverter isso. Então, apenas para os títulos grandes, para os cabeçalhos como este, podemos usar isso, mas para o texto menor , podemos deixar com o Inter Assim, escolhemos uma fonte. Como você pode ver, não é tão complexo. Você não precisa decidir 1 milhão de casos diferentes. No entanto, há mais uma etapa para isso, que é definir os diferentes níveis ou hierarquia de fontes Você não precisa complicar muito isso para si mesmo, mas se trata apenas de permanecer consistente Por exemplo, aqui temos suas estatísticas. Quando você quiser adicionar outra seção aqui e quiser dizer suas atividades, suas atividades, ou você pode simplesmente chamá-la de atividades. Apenas mantenha as coisas simples. Então não faça isso 36, porque então como isso faz sentido? Por que esse tamanho é diferente? Porque o tamanho significa que isso tem um nível de importância diferente, certo? Então, sim, quando você faz isso e quando tem uma fonte antes disso, dizendo, por exemplo, não tenho certeza. Você pode dizer suas estatísticas ou sua saúde hoje, e então você pode chamar isso. Então, este está incluindo tudo. Ele contém todas essas seções diferentes. Então, sim, este, você pode fazer 32 ou 36. Isso faz mais sentido. É sobre ter uma hierarquia. Eu não quero exagerar porque este é um curso para iniciantes Mas a ideia é que sejam níveis diferentes. Então, quando esse é um título grande, ele contém todo o resto, você pode fazer 32 e então essa é uma área menor apenas estatísticas, então você pode fazer isso 24 e depois outra área de igual importância, então isso também seria 24 e assim por diante e assim por diante Não complique para si mesmo, mas geralmente é assim que você deve trabalhar com tipografia Obrigado por ouvir, e nos vemos na próxima lição. 12. Introdução ao layout automático: Então, desde a última aula, fiz alguns ajustes aqui e ali Eu adicionei este cartão para mostrar um resumo. Isso é algo bastante comum que a maioria dos aplicativos de fitness faz. E sim, eu só mexi um pouco, fiz a hierarquia da tipografia Mas nesta lição, eu gostaria de falar sobre um recurso muito importante do Figma, um recurso que eu adoro muito, chamado de layouts automáticos Agora, é um pouco difícil entender como funciona e se acostumar com isso, mas é muito útil. Agora, o layout automático é um recurso da Figma que facilita a organização das coisas horizontalmente e verticalmente dentro verticalmente Em vez de ter que descobrir como alinhar tudo sozinho em termos de textos como esses e outras coisas, layout automático facilita e ajuda você a fazer isso de uma maneira diferente Deixe-me explicar. Então, basicamente, um layout automático é algo que você pode aplicar a um quadro e somente a um quadro. Então, a maneira de fazer isso é selecionar várias coisas. Então, o que vou fazer é aplicar um layout automático a, por exemplo, aqui, eu tenho esses cartões e quero mostrar que eles estão na mesma seção. Então, primeiro, vou adicioná-los em um layout automático. Agora, para fazer isso, posso segurar a tecla Shift A, que faz isso automaticamente, ou vou desfazer isso O que você vai querer fazer é clicar com o botão direito do mouse e clicar na seleção de quadros. Agora, isso é uma moldura. E então você virá e clicará neste botão, que diz alternar Layout automático E quando você fizer isso, ele detectará automaticamente que tipo de layout é. Já está entendido que é horizontal. Então você tem esses dois juntos e tem aqui um automóvel. Então, isso é espaçamento automático. Isso significa que quando eu estico a moldura, ela vai espaçá-la automaticamente até alcançá-la. Está bem? Esse é um pequeno recurso interessante. Se você quiser, pode dar um número aqui, que eu acredito que seja dez, por exemplo. Agora isso não é Auto, então isso é apenas dez, certo? Então, isso é algo que você pode fazer você e com base no seu design. Mas agora temos isso em um layout ou layout automático para ser mais específico. Não é tão fácil de entender. Agora, aqui você tem o espaçamento, a lacuna horizontal entre os objetos, então você pode configurá-lo e aqui você tem o alinhamento Você quer que ele seja alinhado à esquerda, ao centro, em qualquer lugar Digamos que o alinhamos à direita. Isso significa que, se o layout automático for expandido, ele permanecerá à direita ou, digamos, à esquerda. Ok, então você entende. Agora, a mesma coisa quando fazemos isso para cima e para baixo, sabe? Então, você está basicamente dizendo que, uma vez esticado, onde os itens basicamente devem ir Está bem? E vou explicar mais tarde por que isso é útil. Quero dizer, neste caso, talvez não esteja claro por que isso é útil, porque já está, quero dizer, já temos tudo muito bem alinhado Então, vamos fazer o espaçamento dez, e agora vou escolher isso e torná-lo um layout automático com isso Mas isso vai ser vertical porque está para cima e para baixo. Então, como dissemos, clique com R, selecione quadro e, em seguida, adicione um layout automático. Aqui, veja que o espaçamento é 15. Já podemos dizer: Ei, por que é 15? Vamos fazer dez para igualar todo o espaçamento. Isso já está facilitando nossas vidas. Quer dizer, não prestamos atenção a esse espaçamento de antemão Agora prestamos atenção a isso. Em seguida, podemos adicionar isso também ao Layout automático. A maneira de fazer isso é simplesmente arrastá-lo aqui e você pode ver aqui um ponto. E assim mesmo se tornou parte disso. Agora temos todo esse layout automático. Podemos mexer com o espaçamento mais tarde. Isso torna muito mais fácil fazer isso, se quisermos. Mas outra coisa que podemos fazer com isso é mexer também com os alinhamentos Por exemplo, eu o coloquei no centro. Agora podemos ver como é. Quero dizer, quando o alinhamos ao centro e podemos ver suas estatísticas hoje, fica muito bom no centro, mas vamos voltar atrás Portanto, o Auto Layout permite que você faça coisas assim para fazer isso uma forma que você não possa perder algo por engano Veja, está ligado ao mesmo lugar. Você pode mudar a ordem das coisas, você pode movê-las. Mas o bom é que não há pequenos problemas de alinhamento, porque muitas vezes o que eu notei, especialmente trabalhando com colegas de equipe, é que, às vezes, por acidente, você movia o texto um pouco Mais tarde, quando você chegasse, veria que talvez seu colega tenha feito isso por engano, e então você tinha que alinhá-lo e dizer: Ei, onde estava isso na verdade? Isso é uma dor. É por isso que o Auto Layout facilita isso, pois determina tudo com números exatos. Então, o próximo passo aqui seria transformar tudo em um layout automático. Isso é o que eu adoro fazer. Agora vamos até aqui e vamos ativar o Layout automático O que isso vai fazer é transformar tudo em um layout automático. Todos os itens neste quadro têm um layout automático. E isso é o início certa forma, porque você pode ver tudo isso é um layout automático Ele tem um layout automático dentro dele. Esse layout automático também tem um layout automático dentro dele. Esse é o maior e depois esse e depois esse. É assim que o FINMA funciona. E quando você está trabalhando de forma realmente eficiente, você está trabalhando com muitos layouts automáticos um no outro. Mas espere um minuto, há algo interessante que eu quero te mostrar. Agora transformamos todo esse quadro em um layout automático, certo? Existem algumas configurações mais interessantes aqui, que são basicamente o preenchimento. É assim que a chamamos, certo? Aqui você pode ver o preenchimento da esquerda, de cima para cima, o preenchimento superior, o acolchoamento direito e o preenchimento inferior Está te dizendo basicamente que essa distância aqui, esse é o preenchimento. O que é legal é que mantém tudo afastado dos lados por 24 ou 16 aqui. Sempre podemos mudar isso. Podemos dizer 24. Vamos fazer algo apertado, com margem ou qualquer outra coisa. Isso é algo que você sempre pode mudar. Você tem preenchimento aqui 60, poderíamos chegar a 100. Faça com que seja 60. Agora, esse preenchimento na parte inferior, na verdade não precisamos dele porque já o temos alinhado na parte superior, Então, tudo isso está sendo alinhado ao topo. Podemos alinhá-lo na parte inferior dessa forma ou no meio até o centro ou, como tínhamos antes, alinhar no canto superior esquerdo Essa é a melhor maneira de fazer isso. Quero dizer, quando você está fazendo um aplicativo como esse, ou depende de você. Depende totalmente de você, mas para nossos propósitos, esse é o caminho a seguir, e você vê que esse preenchimento funciona bem, 16 da direita, 16 da esquerda e 60 de cima Vamos ver como isso se parece. Perfeito. Portanto, certifique-se de que nada se sobreponha atrás da câmera porque normalmente os aplicativos não fazem isso Mas há um problema que é o espaçamento. Então eu acho que o Figma foi em frente e fez 21 sozinho, pensando, você sabe, porque ele tenta estimar o espaço antes de você torná-lo um layout automático Mas vamos seguir em frente e fazer isso, por exemplo, eu não sei. 16. Agora, uma coisa importante é garantir que o espaçamento dentro de uma área como essa seja dez Isso significa que o espaçamento entre outros elementos entre outras áreas deve ser maior que dez A razão para isso é entender que esta é uma área completamente diferente desta, que é uma área completamente diferente desta. Mesmo que seja uma pequena diferença, para os olhos, isso explica toda a ideia. Agora temos o Auto Layout dentro dos layouts automáticos. Agora, vimos como layouts automáticos funcionam em termos de toda a tela Que tal criar um elemento como layout automático? Vamos experimentá-lo. Eu quero fazer um cartão, não para atividades, mas depois disso, digamos, vamos fazer outro título aqui e digamos que leia mais. Ou pode ser interessante para você ou algo parecido. Agora eu clico em F e , em seguida, vou criar algo diretamente aqui neste local. Vou dar a ele 16 raios carnoadius e depois vou colorir com essa cor aqui, basicamente deveria ser um elemento que diz às basicamente deveria ser pessoas que leiam mais, aqui está um artigo, qualquer Vou escrever um artigo. Vou copiar esse texto e essa caixa de texto e colar aqui dentro, e vou escrever melhores dicas de corrida para 2026 ou algo parecido E então eu vou segurar a tecla Alt e arrastá-la para baixo. Eu basicamente o dupliquei e vou fazer isso entre e 16, e então vou escrever Read Ok. Você pode fazer até 14 ou algo parecido. Temos esse tipo de cartão, e o que eu quero fazer também é escolher uma imagem isenta de direitos autorais Então, estou apenas procurando por algo aqui, talvez algo com um humano que possa ser bom. Vamos escolher uma bela foto de alguém. Quero dizer, talvez essa foto ou essa. Por que não? Você pode baixar isso ou, às vezes, o que eu gosto de fazer é clicar e copiar a imagem. É assim que às vezes você pode trazer imagens para o Figma, mas o problema é que às vezes elas são de péssima qualidade Vou deletar isso e vou fazer um download gratuito da imagem. Agora que fiz o download, vou arrastá-lo e soltá-lo no Figma É basicamente assim que eu sempre faço. Então agora temos uma imagem enorme aqui com boa qualidade. Então, o que você vai querer fazer é trazer essa imagem aqui para dentro dela. Mas antes de fazermos isso, antes de entrarmos nisso, vamos fazer disso um layout automático. No momento, é um quadro e vamos clicar em Layout automático. E o FIMA é inteligente porque vai em frente e organiza as coisas, mas também elimina o espaço que não é Então descobriu que esses são os objetos que queremos e não adicionou nenhum espaçamento entre eles, mas podemos colocar oito talvez ou, na verdade, não precisamos de muito espaçamento Então, vamos seguir em frente e expandi-lo como quisermos. Esse é o tamanho que eu quero e vou alinhá-lo no canto inferior esquerdo Então eu quero colocar essa imagem aqui. Agora, uma maneira de fazer isso é simplesmente arrastá-lo e soltá-lo aqui, e o que vai acontecer é fará parte do layout automático. Mas uma coisa legal do Figma quando se trata de importar imagens e vídeos é que as imagens são, na verdade, preenchidas, assim como uma Então você pode copiar esse preenchimento e simplesmente colá-lo aqui, certo? Então, o que acontece é que você tem a imagem como um preenchimento em cima disso. Mas quando você clica nela, você também pode clicar aqui e cortar, ela está preenchendo a imagem agora, mas a imagem não está aparecendo bem. Eu não consigo ver isso. Vou recortá-la e depois mover a imagem desse jeito, e vou redimensioná-la ou deixá-la assim Ok. Agora temos a imagem em segundo plano, não está perfeitamente posicionada, mas está boa. Mas queremos que seja legível. Quero dizer, no momento, não podemos ler nada, não podemos ler muito. Uma coisa a fazer sobre isso trazer essa cor aqui e clicar nessa pequena gota, e clicar nessa pequena gota que é chamada de modo de mesclagem neste ícone, e então você pode escolher esses modos que permitem alterar a forma como as cores se misturam Vou tentar escolher algo meio elegante e artístico ao mesmo tempo Mas isso não estraga o rosto dele. Acho que multiplicar é muito bom, mas ainda está causando problemas de legibilidade O que eu vou fazer é pegar esse cara, redimensioná-lo, colocá-lo aqui à direita Simples assim, ele está fora do caminho. Parece um pequeno guarda artístico, mas eu quero dar um passo adiante. Eu não gosto de como isso aqui está aqui. Vou adicionar outro e vou torná-lo um gradiente. Isso é preenchimento normal e isso é preenchimento com gradiente. Vou girar o gradiente aqui, trazer esses pontos Então o que eu vou fazer é colorir estes com a mesma cor aqui. Acredito que seja esse , copiado e colado. Vamos tornar esse ponto transparente aqui e depois esse ponto em 100% ou, na verdade, o oposto. Eu só vou reverter isso aqui. Então eu vou dar 100% de opacidade. E assim, agora temos um efeito de destino, que é muito legal, para ser honesto Parece que está tudo bem. Parece bom. Dessa forma, temos nosso pequeno cartão e ele diz às pessoas quais melhores dicas de corrida, leia mais. Se algum dia decidirmos colocar o leia mais no topo, podemos fazer isso. É um layout automático. Apenas certifique-se de que os valores que você tem em termos de preenchimento não sejam aleatórios No momento, eles são um pouco aleatórios. Você sabe, da direita e da esquerda, são 14, de cima para baixo, são 20 anos? Não tenho certeza. Podemos fazer isso de 16 e 16 ou algo parecido ou 24, 24. Depende totalmente de você, mas vou fazer com que sejam 16, 16, e pronto. É assim que parece. Muito simplista Eu diria, porém, que esta área está um pouco vazia aqui. Então, talvez pudéssemos adicionar algo a isso, e eu não tenho certeza do que seria, mas vou copiar isso aqui, pode ser, não sei o número um, então vou redimensioná-lo Então é só contagem regressiva de artigos ou algo parecido. Só por exemplo, não estou totalmente apaixonado por essa ideia, mas podemos experimentá-la, não. Talvez seja muito grande. Sim, é como a Netflix, que escolheu o número um, filme número um, o filme número dois. Não tenho certeza se a hashtag está fazendo justiça. Talvez pudesse ser assim. Muito do design consiste em experimentar coisas e ver o que funciona e o que não funciona. Então, sim, acredite em mim. E sim, vou ligar que isso pode ser interessante para você ou algo parecido. Por enquanto, talvez eu mude isso mais tarde. Outra coisa, apenas certifique-se de que a hierarquia aqui esteja fazendo sentido se as atividades puderem ser interessantes É do mesmo tamanho , o que não faz sentido. Então, talvez você possa torná-lo um pouco menor. E assim, parece um pouco melhor. Basicamente, é assim que você pode usar layouts automáticos para organizar e alinhar melhor organizar e alinhar seus elementos de design dentro do Obrigado por ouvir, e nos vemos na próxima lição. 13. Criando componentes simples: Olá, para mais uma aula do curso para iniciantes da Figma. Nesta lição, falaremos sobre o que são componentes como podemos usá-los de uma forma muito simples para apoiar nossos projetos. Vamos primeiro definir ou tentar entender o que é um componente. Um componente é basicamente um elemento recorrente reutilizável em E eu sei que talvez tenha dito isso antes descrevi as coisas dessa forma antes. Mas um componente é basicamente um elemento, um elemento de design. Pode ser um botão, pode ser um cartão como os cartões que fizemos aqui, e é algo que será usado e reutilizado Então, não é uma coisa única. E essa coisa que está sendo usada e reutilizada tem uma estrutura específica Por exemplo, se tomarmos este cartão como exemplo, você tem um número, depois tem um título, depois tem um em ação, lê mais e depois tem uma foto. Quando temos essa estrutura e a temos recorrente da mesma forma, mas apenas com uma imagem diferente, título diferente, texto diferente, isso se torna algo que podemos usar como um componente O que é realmente bom sobre os componentes quando se trata do Figma é que todos eles voltam ao original Eles ainda estão de alguma forma conectados. Deixe-me explicar isso fazendo. Vamos em frente e, primeiro de tudo, criar um componente ou criar um botão, algo que podemos usar como componente, como exemplo de um componente e depois ver como fazemos uso dele. Eu vou fazer isso fazendo um layout automático. Então, caso você não tenha feito essa lição, volte verifique se você entendeu como isso funciona, porque isso será cada vez mais essencial ao longo das aulas. Está bem? O que estou pensando em adicionar aqui é algo em atividades, porque quero fazer com que tudo isso se torne completo em toda a tela. Temos nossas estatísticas, temos um resumo, seus passos e, em seguida, você tem sua distância, e acho que precisamos dizer aos usuários que eles possam controlar seus horários ou exercícios com muita facilidade. Isso é algo que eu pessoalmente tenho dificuldades com alguns aplicativos, porque alguns aplicativos querem que você realmente clique Vou correr agora, clique em Iniciar. Se eles querem que eu faça isso, eles devem deixar isso bem claro na primeira tela. Que, você sabe, tem um botão que me diz : Ei, você quer correr ? Clique aqui Ei, você quer dar uma volta? Também não quero filtrar todos os pequenos exercícios diferentes, se isso faz sentido. Portanto, é muito importante mostrarmos aos usuários a opção de fazer isso na primeira tela. Então, o que eu estou pensando é talvez em mantê-lo minimalista Talvez possamos usar um pictograma ou o que podemos chamar de ícone Você sabe, mais comumente conhecido como um ícone. E é basicamente como um desenho ou algo assim, como esses que usei aqui que mostram o que está sendo feito. Então, se alguém está correndo, então, você sabe, você mostra esse ícone de corrida. E se alguém estiver, sei lá, usando um cronômetro, você usaria isso, certo? Mas vamos nos concentrar em diferentes tipos de exercícios, ok? Então, vamos começar a fazer isso. Então, vou adicionar um elemento de texto, para que você possa clicar aqui ou clicar em T e depois escrever Executar, certo? Então, vou copiar isso segurando Alt. Eu já tenho uma fonte aqui chamada Font Awesome. Então, caso você não saiba, quero dizer, não é muito conhecido. É uma fonte que basicamente mostra ícones diferentes. É um conceito muito legal. Então você baixa como uma fonte e eu estou na versão gratuita agora, e então você vai para um site onde eles têm todas as fontes, e você só precisa copiar e colar as fontes ou anotá-las. Às vezes, você pode simplesmente escrever algo como Não sei , cronometrar e depois aparecer. Você poderia escrever uma bicicleta e ela apareceria. Isso é algo que podemos fazer. Quero dizer, aqui, pode estar funcionando. Por exemplo, veio como um pictograma, ou você pode simplesmente acessar o site, usar uma fonte incrível e encontrar todos os ícones que eles têm Mas, estando familiarizado com essa fonte, eu apenas digito qualquer palavra que venha à mente e geralmente tenho alguns ícones memorizados De qualquer forma, chega de se exibir. Então, temos aqui inter, então eu vou apenas configurar essa fonte Vou fazer com que seja médio, e isso deve ser, digamos, 14. Agora temos isso e aquilo e vamos escolher os dois e, em seguida, basta clicar em Shift e A, ou isso, ou você pode ir mais longe e clicar em Adicionar layout automático. Escolha os dois, clique com o botão direito do mouse e clique em Adicionar layout automático e, assim, ele cria um quadro e o torna um layout automático. Eu posso ver que o espaçamento é oito, vou fazer com que seja quatro, aproximá-los E agora vamos passar pelo processo de criação de um botão. Portanto, provavelmente é um botão. A maneira de fazer isso é que precisamos ter um histórico. Quero dizer, os botões geralmente têm uma aparência específica, certo? Parecem cartas, mas são muito menores. Então, como fazemos isso exatamente? Bem, a maneira de fazer isso, pelo menos neste caso, é adicionar um preenchimento. Mas temos um problema porque agora o preenchimento é branco, o texto é branco. Vou escolher o texto e o ícone e vou deixá-los pretos por enquanto. Mas agora está muito perto das bordas. Você vê o texto aqui, não há muito espaçamento, e é por isso que precisamos de preenchimento Então, vou experimentar com o preenchimento e adicionar quatro. Agora parece muito bom, mas deixe-me adicionar alguns cantos arredondados. Eu vou à aparição e escrevo 16 aqui. Deixe-me ver quanto era o raio aqui, 16. Sim, está quase certo. Agora temos 16, e parece um bom botão, mas eu gostaria de um pouco mais de preenchimento Normalmente, à direita e à esquerda, temos mais preenchimento com botões Quero dizer, é uma decisão de design de estilo de design, mas você poderia fazer isso apenas para fazê-lo respirar um pouco, especialmente com texto, certo? E o que também poderíamos fazer, poderíamos até mesmo dar mais espaço a partir de cima. Depende totalmente de nós. Nós podemos experimentar com isso. Vamos seguir em frente e decidir sobre uma visão geral. Eu só vou dar um pouco de cor a isso. Então, eu vou torná-lo azul, por exemplo. Agora vamos chamá-lo de botão Exercício. Isso é especificamente para exercícios, não para qualquer outra coisa. Agora vou transformar isso em um componente. Agora, a maneira de fazer isso é clicar com o botão direito do mouse e clicar em Criar componentes, ou você pode vir aqui e ter esse botão aqui, criar componentes. Você clica nele e ele fica roxo. O roxo destaca coisas que são componentes. Mas há uma coisa muito importante a saber. Há um componente pai e um componente filho. Se você está familiarizado com a codificação, provavelmente esse é um conceito familiar para você Basicamente, esse é um componente principal porque é o original. É a peça original que acabamos de criar. Nós criamos, quando você copia isso e vai para outro lugar, e cola, Control V. Esta é uma versão idêntica. Mas se você notou que isso tem o título por cima, isso não tem, mas essa não é a única diferença. Quero dizer, eles parecem completamente idênticos de outra forma. Mas o problema é que aqui, como você pode ver, há quatro pequenos quadrados aqui Esse é o original, o componente principal. Embora isso seja um exemplo. Acho que esse é o termo real. É uma instância ou você pode chamá-la de componente filho. E há uma relação interessante aqui porque, assim como ter pais, os filhos assumem as qualidades dos pais. Se um pai tem olhos azuis, a criança vai ter olhos azuis. Se o pai tiver olhos verdes neon , a criança também terá olhos verdes neon, vamos desfazer Se mudarmos as coisas , os dois mudarão . Quando vamos até a criança e digamos que ela vá e use lentes ou eu não sei, vá e faça alguma coisa, vá e faça alguma coisa, tenha alguma coisa alterada em sua aparência, ou digamos que algo hereditário, e digamos que ela mude a cor dos olhos, como dissemos, ela coloca algumas Bem, quando isso acontece, nada, pais. É exatamente a mesma lógica. É por isso que adoro esse rótulo ou esse nome, que é o componente pai e componente filho, porque retrata perfeitamente a relação entre esses elementos Portanto, é permitido que crianças ou instâncias se , até certo ponto distanciem, até certo ponto, das qualidades de seus pais. Você pode chegar a esta instância e mudar a palavra aqui e dizer diversão em vez de correr, você pode mudar a cor. Você também pode alterar o ícone. Você poderia escrever bicicleta. É por isso que fanta incrível é muito legal porque você pode simplesmente digitar coisas, mudar toda a cor dessa coisa Você pode alterar o preenchimento. Há muitas coisas que você pode mudar, a ponto de parecer que isso nem está relacionado. Você pode até mesmo excluir o ícone , o texto ou qualquer coisa. Vamos desfazer tudo isso. Mas uma vez que você fizer algo assim, vamos refazer. Então você vem e diz: Ei, eu quero que o ícone seja laranja. Então, isso não vai se traduzir em seu design. O motivo é porque, quero dizer, você excluiu o ícone. Não está mais lá. uma regra para isso. Existem algumas regras. As qualidades que você muda nos casos não são mais desconectadas dos pais Agora que mudamos o preenchimento, por exemplo, e dizemos: Ei, vamos mudar o preenchimento Você sabe, isso não vai mudar, certo? Isso não vai mudar. Mas algumas coisas, por exemplo, o raio, o raio do canto , acabei de mudar Ainda está conectado. E, infelizmente, não há uma maneira de saber isso. Figma não diz o que ainda está conectado aos pais e o que não está, que pode ser confuso na maioria das vezes Mas você tem que pensar nisso ou pensar logicamente sobre isso Por exemplo, aqui, a palavra foi alterada, a cor foi alterada, o preenchimento foi alterado Então, obviamente, eles não estão mais conectados. Está bem? Portanto, tenha isso em mente, mas essa é apenas uma visão geral de como essas coisas funcionam. Posso excluir isso sem problemas, mas depois de excluir o componente pai, isso é um problema. Então tente não fazer isso, ok? Quero dizer, não seria um grande problema, mas está certo. Copie isso, cole em qualquer lugar que você quiser e, em seguida, você pode copiar e colar isso. Você pode copiá-lo e colá-lo. E é isso que vamos fazer. Vamos criar versões diferentes disso, ou seja, correr e andar de bicicleta ou, digamos, andar de bicicleta, um termo mais oficial, e então podemos escrever ciclismo ou talvez ciclismo, homem, ciclista, pessoa pedalando. Andar de bicicleta Não tenho certeza. É por isso que fica difícil. Oh, veja, aí está. Pessoa andando de bicicleta. Por isso, às vezes fica um pouco difícil obtê-los. E vamos fazer outro. Quero dizer, nadar, certo? Pessoa nadadora nadando. Natação. Sim, lá vamos nós. E nós vamos nadar. Então, estamos tentando manter isso o mais curto possível. Não queremos fazê-lo nadar. Andar de bicicleta, fazer uma maratona. Isso seria um pouco demais para as telas pequenas dos telefones. Então, o que podemos fazer? Quero dizer, para que você possa correr, você também pode andar, eu acho, fazer uma caminhada. Então, caminhando. Então, nenhuma pessoa desta vez, andando. E então poderíamos colocar outro, tudo bem, poderíamos colocar mais um só para que possamos preenchê-lo. Copiando isso e, digamos, futebol, talvez, espero. OK. Futebol Bola de futebol. Sim. Tudo bem. Vou chamar isso de futebol. Desculpe, se há algum americano assistindo, é futebol. De qualquer forma. Agora, o que podemos fazer é adicionar todos eles em um layout automático, ok? Basta mudar A e então eu vou para aqui e vou colocá-lo em atividades. Agora eu tenho isso e estou percebendo que o fundo já é branco, embora pareça cinza, mas na verdade é branco Temos que lembrar de adicionar a sombra. Podemos simplesmente retirá-lo dos efeitos aqui, vamos colá-lo aqui. Agora temos um pouco de sombra, mas ela é muito forte, então vou recuá-la um pouco, apenas puxando os valores um pouco para trás. Ou, alternativamente, o que poderíamos fazer é simplesmente adicionar um traço. Como você pode ver, o que é muito legal é que eu estou apenas editando essa instância e ela está mudando todas essas coisas juntas. Isso é super incrível. É isso que eu adoro nesses componentes. Agora vamos ver como é. Sim, não parece muito ruim. Eu pessoalmente adicionaria um pouco mais, digamos, de preenchimento. E o motivo é que eu gostaria de permitir que as pessoas clicassem neles, porque temos que levar em conta o fato de que as pessoas têm dedos grandes. Quero dizer, todos nós fazemos isso, na tela do telefone. Mas também há pessoas entre nós que também têm dedos gordos, e isso é, na verdade, algo que devemos considerar como designers. Acho que havia algo chamado regra do dedo gordo ou algo parecido, que é o fato de que você precisa criar coisas, objetos grandes o suficiente para que , quando as pessoas clicarem neles, percam o clique e cliquem em outro lugar. Podemos fazer a mesma coisa aqui adicionando um pouco mais espaçamento apenas para garantir que as pessoas possam se diferenciar Assim, temos diferentes tipos de atividades. Eu iria em frente e talvez até mudasse as cores, para ser honesto, mas não de uma forma muito intencional, mas um pouco aleatoriamente, apenas para fazê-las parecer De certa forma. Ou podemos simplesmente mantê-los da mesma cor. Quero dizer, é mais fácil fazer isso, especialmente porque escolhemos essa cor como nossa principal. Mas sim, essa é uma versão de como poderíamos fazer os botões. Também poderíamos fazê-las, como mencionamos apenas com sombra. Mas eu diria que, se você quiser fazer algo assim, certifique-se de que a sombra não seja toda louca desse jeito. Quero dizer, é um pouco louco por essas cartas. Mas aqui, com os cartões, eles não são exatamente clicáveis, ou você pode clicar neles, mas é uma história diferente Mas aqui, toda a função deles é que eles devem ser clicáveis Então, queremos torná-los o mais visíveis possível, ok? Então, tenha isso em mente. Então, sim, é basicamente assim que você pode usar componentes, criar diferentes tipos de elementos de design em todo o design e garantir que eles permaneçam consistentes. E esse é, na verdade, todo o propósito caso eu não tenha falado sobre isso diretamente. A ideia geral dos componentes é que não queremos, você sabe, ter designs diferentes por toda parte. Não queremos ter dez tipos diferentes de botões. Em vez disso, queremos ter um sistema de design consistente. Um sistema de design é, como você sabe, uma coleção de elementos ou componentes de design que serão usados e reutilizados, e eles devem levar em conta tudo Se você disser que haverá um ícone, vamos colocar a opção de ter um ícone. Se haverá sombra, se haverá contorno, você sabe, traçado, qualquer coisa, então devemos considerar isso. Então vá em frente. Teste, experimente, tente criar seus próprios componentes e veja o que você pode fazer com eles. É muito divertido e facilita muito as coisas. E nunca é tarde demais se você pensar: Ok, ei, esse é um objeto legal que eu tenho, você pode transformá-lo em um componente com bastante facilidade, e então você pode usá-lo, reutilizá-lo e criar uma versão diferente E o que é ainda mais legal é que, mais tarde, quando você diz: Ei, eu não gosto da aparência desse design, você pode trocá-lo uma vez Você não precisa alterá-lo em todas as telas porque, para ser honesto, uma coisa que posso dizer como designer, designer experiente que trabalha na área há bom tempo, é que muitas vezes você chega a um ponto em que tem tantos elementos diferentes e, às vezes, os mesmos elementos em todas as Então, a ideia de ir até cada um deles e mudá-los é um completo pesadelo É impossível, vezes, acabarmos com tantas mudanças, tantos elementos diferentes que são um pouco diferentes uns dos outros e a consequência de não começarmos do É por isso que eu aconselho que você vá em frente, comece do zero, aprenda a usar os componentes e usá-los para não se arrepender mais tarde e ter que fazer muito trabalho manual. Muito obrigado por ouvir, e hoje acabamos de aprender os componentes. Te vejo na próxima aula. 14. Refinando o design de UI: Bem-vindo de volta a outra aula. Nesta lição, vamos refletir um pouco. Vamos dar uma olhada em todo o trabalho que fizemos até agora e vamos criticá-lo um pouco e ver o que está faltando Você sabe, toda a ideia, e este é um bom exercício para você como designer, você deve aprender a olhar para trás em seu trabalho, você sabe, de uma forma mais objetiva. É impossível ser completamente objetivo, mas tente ver isso de outra perspectiva, especialmente a perspectiva de um usuário em potencial, ok? E critique e tente criar um feedback próprio, algo que você possa usar para melhorar seu produto ou design É isso que vamos exercitar hoje e depois vamos melhorá-lo. Tudo bem. Então, agora, não se preocupe se achar que as ideias não estão vindo à mente. Não se preocupe se achar que isso não faz sentido. Meu professor é meu instrutor, é absolutamente incrível. Ele está percebendo tudo o que está faltando. Como eu vou ser como ele? Não se preocupe com isso. Obviamente, tenho alguns anos na área, então isso me parece um pouco mais natural, mas isso é algo que você pode simplesmente praticar. Com o tempo criticando cada vez mais, você pode chegar a um ponto em que poderá identificar essas coisas imediatamente Há outras coisas em que você não pode dizer que há certo e errado. É simplesmente uma questão de opinião, opinião subjetiva. Ou talvez precisemos testá-lo. Precisamos fazer muitos testes até descobrirmos qual é o caminho certo e não temos tempo nem dinheiro para isso. No momento, estou vendo isso como usuário e estou verificando esse painel e talvez não goste. Parece muito bom. Há algumas coisas em que você diz: Em vez de azul, eu gostaria de roxo. Em vez de laranja, eu gostaria de azul. Mas não tínhamos muito o que fazer. É por isso que criamos essas cores. Sim, no momento, estamos pensando mais do ponto de vista da usabilidade Então, como o usuário está vendo isso? O que falta para o usuário? O que poderia ser potencialmente irritante, perturbador para o usuário, como o que parece bom, não tão bom para os olhos, e assim por Então, a primeira coisa que eu diria pessoalmente é sou um grande fã desse tipo de falar com o usuário e dizer: Ei, Ahmed, e apenas falar com ele diretamente chamando-o pelo nome Isso difere de aplicativo para aplicativo. Muitas pessoas não o usam. Não é muito comum. Mas quando alguém faz isso, espero ter uma área onde eu possa acessar meus próprios dados pessoais e ver oi Ahmed, quem é Ahmed Onde posso mudar meu nome? E se for o nome errado? Ou eu quero ver minhas configurações de perfil e assim por diante. Muitas vezes, geralmente é um círculo aqui ou aqui à esquerda ou à direita, onde você pode simplesmente acessar seus próprios dados, abrir seu perfil e assim por diante Isso é uma coisa que eu acrescentaria que já está sentindo minha falta. Uma segunda coisa e, a propósito, fique à vontade para parar e pensar por si mesmo. Eu queria te dar tempo para isso, mas você pode simplesmente fazer uma pausa e fazer isso sozinho A segunda coisa é que o espaçamento está um pouco errado, eu acho O espaçamento entre suas estatísticas atuais e as cartas abaixo delas é um espaçamento específico Então, quando você olha entre as atividades, a palavra atividades, o título e as atividades reais, o espaçamento ainda não existe Quero dizer, o que pode ser potencialmente confuso aqui é o fato de você observar as atividades e não saber se elas pertenciam à área anterior. Ou depois disso. Porque tem espaçamento igual, e é aí que você pensa, por isso que o espaçamento é importante porque nos dá subconscientemente, nos diz a relação entre diferentes elementos, e é exatamente isso que não está sendo dito para É por isso que eu pessoalmente estou percebendo isso mais. É por isso que é bom relembrar seus designs. Você pode ter perdido alguma coisa. Então, o que eu faria é diminuir o espaçamento aqui e, basicamente, adicionar esses dois elementos, o texto e todos esses botões Eu os adicionaria em um layout automático e diminuiria o espaçamento. A mesma coisa pode ser interessante para você e este cartão, ou eu faria um layout automático. Eu os juntaria, mas aumentaria o espaçamento entre todo o resto. Estou fazendo um layout automático de qualquer maneira. Estou agrupando esses ou não, digamos, porque os grupos são diferentes Estou colocando-os em um layout automático e estou aumentando o espaçamento entre ou diminuindo o espaço entre esses dois Isso vai fazer mais sentido mais tarde. Tudo bem. Isso parece muito legal. Agora temos essa informação. Agora, é claro, podemos preencher a primeira tela com muito mais informações, mas quero simplificar para você. Isso se baseia no fato de ter uma foto de perfil aqui para clicar. Isso serve para navegação e precisamos disso. O que é essa página em que estou? Está em casa? É painel? É um resumo? O que é? Há outras telas que eu possa ver? Na verdade, o tópico da próxima lição é adicionar uma segunda tela, e é exatamente isso que vamos fazer. A questão aqui é: como posso ver meu perfil? Existe uma parte social neste aplicativo? Existe uma parte de dicas, uma parte educacional deste aplicativo ou talvez haja uma parte de amigos na qual você possa competir com seus amigos. Todas essas são ideias que outros aplicativos têm. Quando você não está fazendo isso e nem está contabilizando isso, você já está perdendo. Está bem? Então, continue e tenha isso em mente. Uma coisa que vamos fazer também é adicionar uma barra de navegação Isso é o que chamamos de barra de navegação onde temos vários botões, talvez três, quatro, cinco, até você e você diz, aqui, esta é a casa, isso é o resumo, isso é amigos, você quiser chamá-lo, isso algo que vamos fazer. Fora isso, acho que estou bem. Eu acho que o espaçamento aqui entre High Ahmed e suas estatísticas de hoje pode ser um pouco demais. Eu não sei. Estou com vontade, mas vamos ver como podemos descobrir isso. Vamos ao que interessa. Agora , primeiro de tudo, quero já terminar com o espaçamento Eu já estou colocando-os em um layout automático e colocando-os em um layout automático. Vejo que o espaçamento aqui é 16, e esse é o espaçamento de todo o quadro Vou ver quanto espaço temos aqui. Isso é dez. Eu vou fazer oito, e eu vou fazer isso também oito e isso também oito. Vamos ver como está agora. Agora você pode ver aqui que o espaçamento agora é duplo. Não é tão perceptível. Isso é o que importa. Seu cérebro já descobriu isso. Seu cérebro disse: Ok, atividades que estão conectadas a essas atividades e nada mais pode ser interessante para você estão conectadas a este cartão, nada mais. Seu cérebro descobriu isso, então você não precisa fazer nada para isso, ok? Então, agora terminamos com isso e agora vamos continuar e cuidar da questão do perfil. Acho que o problema que tenho com isso é que talvez esse texto seja um pouco alto demais. Tem muita altura. Agora estou baixando para ver se vai chegar, você sabe, mais perto, nem tanto Tudo bem. Quero dizer, às vezes com espaçamento, uma coisa que você tem que ter em mente é que você tem que ser mais metódico sobre Então, como você pode ver, colocamos números específicos aqui e outros enfeites números específicos aqui e outros enfeites Então aqui parece estranho, e talvez um designer gráfico tivesse dito, sim, basta colocar isso mais perto dele. Como design de tela, você não pode fazer isso. Está bem? Você não pode simplesmente ir em frente e dizer, você sabe, só para que pareça mais bonito. Não, você tem que manter, você sabe, ser consistente. Se você disse 16, 16, isso também deveria ser 16, ok? Então você sabe, tire suas mãos disso. Está bem? Agora, vamos criar nosso botão de perfil. Agora, vou criá-lo apenas clicando em O, o que dá a forma oval, eu acho Em seguida, segurando a tecla Shift, você apenas a torna maior, e então eu estou comparando agora que parece um bom tamanho. E então o que vamos fazer é obter uma imagem de alguém. Tudo bem. Então, acabei de receber uma imagem. Não tenho certeza se isso é IA, na verdade, mas acabei de receber a imagem de uma pessoa. Então eu vou copiar o preenchimento, colar aqui, e essa é a nossa foto do perfil, ok? Então, vou adicioná-lo ao layout, e vou escolher esses dois elementos, a imagem e o texto, segurar Shift e A , transformá-los em um layout automático, basicamente, e depois vou torná-los horizontais e centralizá-los ou, na verdade, talvez mais baixos E eu vou alinhá-los à esquerda. Vamos ver como fica quando a foto está à esquerda, parece estranha, então vou colocá-la à direita. Mas vou tornar o espaçamento automático. Como expliquei antes, isso empurra os dois elementos para o outro lado Basicamente, torna o espaçamento o máximo possível. É isso que ele faz. Agora temos essa foto de perfil aqui e tenho a sensação de que não é suficiente. Vou dar uma sombra, só vou copiar a sombra daqui e colar aqui. Deixe-o um pouco menos embaçado. E aproxime-o. Não é tão visível, para ser honesto. Só vou deixá-lo mais embaçado. Isso parece quase certo. Ou o que você poderia fazer é torná-lo muito menor. Você também pode simplesmente remover completamente o desfoque. Depende totalmente de você e também podemos torná-lo muito maior. Isso também é uma opção, algo que podemos fazer. Mas eu só vou me certificar de que eles estão centrados juntos Tudo bem. Então, agora temos isso. Ainda não estou muito feliz com a sombra, mas está tudo bem. Então, o que poderíamos fazer é tentar adicionar um traçado para torná-lo melhor, diferenciado do plano de fundo Acho que isso resolve um pouco nosso problema. Agora, vamos seguir em frente e vamos criar nosso elemento de navegação. Agora, estou pensando em fazer algo um pouco parecido com o que estamos fazendo aqui com esses botões, nada muito diferente, adicionar um ícone, adicionar algum texto e manter as coisas nada muito diferente, adicionar um ícone, simples. E a maioria das barras de navegação é exatamente assim. Está bem? Então, o que eu vou fazer é criar uma moldura, então aperte F e traga essa moldura e eu vou tentar fazê-la caber aqui, ok? Sim, algo em torno disso. Então eu vou fazer com que seja redondo. E eu quero adicionar botões diferentes, mas criar botões pode ser um pouco difícil. Então, deixe-me copiar isso. Acabei de copiá-lo e vou criar um botão. Agora, deixe-me emprestar esses elementos aqui. Estou copiando e colando aqui e deixe-me ver qual é a minha visão Vou colocá-los assim. E então eu vou dizer que esta é casa e esta é a sua casa, e eu vou fazer isso um pouco maior. Então, vou fazer disso um layout automático agora para reunir tudo. E isso não parece muito ruim, para ser honesto. Não tenho certeza se é muito grande, mas vamos testá-lo. Vou adicioná-lo aqui e vou fazer disso um layout automático. Vou dar uma cor diferente só para ver. OK. Redimensionar isso Vou redimensioná-lo e dar-lhe um preenchimento adequado. Aqui é apenas aleatório, então vou fazer com que seja oito por 12 ou algo parecido. Agora vou tirá-lo. Vou fazer disso um componente e vou dizer botão Navbar. Vou copiar isso agora, colar aqui, copiar e colar novamente em uma xícara e colar novamente. Vou torná-lo horizontal e fazer com que tenham espaçamento de oito Com o preenchimento, vou fazer com que também seja oito. E eu vou fazer oito de cima de dois ou talvez vamos ver, talvez façamos quatro, quatro. Vou remover a cor daqui por enquanto. Você vê agora que eles estão muito bem espaçados porque trabalhamos com espaçamento consistente Trabalhamos com um preenchimento consistente em todos os lugares e agora ele parece muito bem equilibrado Vou transformar isso em componentes. Eu vou fazer dele um bar nob. Vou pegar este nab bar e vou adicioná-lo aqui. E vou tentar centralizá-lo. Agora, a maneira de fazer isso, há uma maneira que eu ainda não te ensinei, mas agora estou ensinando para você. Quando você tem um layout automático, tudo é organizado de uma forma específica, aqui temos um layout automático. Tudo está alinhado no canto superior esquerdo. As coisas têm 16 espaçamentos e assim por diante. Mas existe uma maneira de você dizer ao Figma que ignore o layout automático E para fazer o que você quiser. Dessa forma, é escolher o elemento que você deseja retirar de tudo isso e, em seguida, você vai até esse botão aqui e diz: ignore o layout automático. Então, isso permitirá que você o mova como quiser, em qualquer direção e em qualquer lugar, qualquer espaçamento, não importa Então é isso que estamos fazendo. Agora temos esses elementos e, para ser honesto, não cabem na tela inteira Se algo estiver acontecendo, talvez pudéssemos adicionar outro. Talvez isso resolva nosso problema ou possamos adicionar muito mais espaçamento entre eles. Mas isso cria um pequeno problema com o espaçamento, como você pode ver O preenchimento aqui é quatro e , em seguida, o espaçamento é 16. Sim. Talvez possamos simplesmente trabalhar com esse tipo de barra de navegação pequena. Está bem? Por enquanto, podemos trabalhar com isso e alterá-lo mais tarde. Vou copiar e colar isso para fazer parecer que há mais conteúdo. Vou apenas adicionar cores diferentes. Faça parecer que temos mais conteúdo em segundo plano. Agora, aqui está uma coisa que eu quero fazer, que é bastante comum, só para mostrar como exemplo, é tornar isso mais no estilo da Apple. Não estamos nos limitando exatamente ao estilo de design deles e outros enfeites, mas estamos tentando imitar um pouco o estilo, é isso que muitos aplicativos fazem Quando eles estão rodando no IOS no sistema Apple, eles o imitam E o que eu quero imitar é o efeito de vidro porque temos essa Figma Não é exatamente o mesmo, mas é muito legal. A maneira de fazer isso é dar ao seu objeto, sua barra de navegação, a cor branca E então você vai seguir em frente e ir para os efeitos. E em vez de sombra projetada, também podemos fazer sombra projetada, para ser honesto. Vamos fazer isso. Por que não? Em vez disso, também vamos fazer vidro e, fazendo isso sozinho, ele vai dar a você efeito vítreo muito bom, que parece muito legal Há mais configurações que são muito complexas, mas é muito bom experimentá-las de qualquer maneira. Mas, para fazer isso, vamos também tornar as cores mais apropriadas. Vamos deixá-los brancos por enquanto e ver como ficam. E, claro, eu sempre recomendaria que, ao fazer isso , você a comparasse com a coisa real que está tentando copiar. Nesse caso, estamos tentando copiar a maçã, então vamos ver como eles fazem isso, e agora, eles não usam branco. Quero dizer, eles usam preto. A cor preta. Então, para botões como esses, eles seriam pretos ou talvez não exatamente pretos, mas podemos tirar o preto aqui e usá-lo. É adaptável. Se o fundo for colorido, eles o tornam branco; se não for, eles o tornam preto. Nesse caso, temos um fundo muito escuro, então vamos deixá-lo branco. Viu o que eu fiz lá? Fui em frente , verifiquei, vi o que eles estavam fazendo e disse: Ok, deixe-me um OK, então agora vamos criar as diferentes seções. Então, digamos que temos uma casa, o que não é tão descritivo hoje em dia, para ser honesto Tipo, você tem que especificar, esse é o seu feed? Esse é o seu resumo? O que é isso exatamente? Então, talvez vamos escrever aqui um resumo. Mas se escrevermos isso, precisaremos ter um pequeno ícone bonito. E acabei de escrever um gráfico circular, que funcionou muito bem. Por enquanto. Vou apenas chamar isso de resumo. Tudo bem. E então eu vou vir aqui. Então, em vez de em casa, talvez tenhamos amigos ou algo parecido ou social. Vou escrever para usuários e vou escrever aqui. Amigos. Perfil, nós temos o perfil aberto. Poderíamos fazer uma parte educacional. Então, talvez um haltere. Sim. E poderíamos escrever aqui treinando. Agora erramos um pouco porque agora os nomes ou os botões têm tamanhos diferentes dos que normalmente temos Para ser sincero, também estou percebendo que o texto é um pouco grande demais para ser honesto Podemos mudar isso e torná-lo 12, talvez, o que vamos querer fazer é também dar a todos um tamanho único. Vou escolher o tamanho do maior, que é 79, então vou dar a todos 80, uma largura de 80. assim, eles estão um pouco mais iguais agora. Eles parecem mais bonitos. Mas esse efeito de desfoque é um pouco forte demais, então podemos tentar ajustá-lo Podemos fazer mais geada, o que estraga todo esse efeito, para ser honesto Mas, como você pode ver, sem glacê, é muito transparente Fazemos um pouco mais de glacê. Eu só vou deixar isso. glacê permite que ele não tenha um efeito tão transparente, e então você pode ver as cores um pouco melhor Sim, isso é muito bom. Se quisermos imitar a maçã Oops por completo , temos que fazer isso realmente redondo e tornar a coisa toda um Talvez devesse tornar os ícones um pouco menores. E aqui temos um preenchimento de oito, então podemos fazer com que seja quatro, talvez. Veja como isso parece. Eu diria que é um pouco mais parecido. É um pouco mais difícil de ver com todo o efeito de vidro. Quero dizer, quando fazemos isso, é muito melhor. Mas sim, quero dizer, agora, parece um pouco mais legível ou muito melhor, mas talvez eu torne o ícone um pouco maior novamente, e então ele fique muito melhor Então, o que poderíamos fazer é adicionar também um pequeno botão de pesquisa. Então, o que vou fazer é pegar uma instância, uma filha desse componente, e excluí-la. Agora, há apenas um em vez de ser múltiplo, então não precisamos escrever a palavra. Teremos apenas o ícone. E então eu vou fazer isso 60 por 60, eu acho, ou 54 por 54. Vou pegar isso aqui e também vou fazer com que ele ignore o layout automático e o alinhe aqui Vamos ver se a altura aqui é 54, também deve ser 54 aqui. Vamos verificar novamente. Há um pequeno problema aqui com a renderização, eu acredito Tudo bem, então aqui está como está agora. Então, temos esses ícones. Também temos um ícone para pesquisa. Portanto, temos nossa Navbar com uma aparência muito boa Para ser honesto, devo dizer que não é exatamente perfeita para a Apple, mas está nos servindo bem para o design que temos aqui Está bem? A próxima etapa será projetar uma segunda tela, o que será uma tarefa desafiadora. Não seja muito arrogante, mas vamos passar por isso juntos Portanto, também não tenha medo. Vamos tentar criar outra tela. Usando os mesmos princípios, usando as mesmas ideias que aprendemos, vamos criar uma segunda tela. Muito obrigado por ouvir e nos vemos na próxima aula. 15. Adicionando uma segunda tela: Olá. Hoje, vamos criar uma segunda tela para nosso design. Então, nesta lição, vamos tentar entender como podemos expandir a partir de designs que já começamos e que já criamos de uma forma que os expanda, que se baseie neles e talvez insira novos elementos e assim por diante Mas, ao mesmo tempo, além de introduzir essas coisas novas, queremos manter a consistência. E é por isso que esta lição é algo a considerar. É por isso que fizemos questão de incluir esta lição. Porque ler uma tela é uma coisa e é uma ótima habilidade, mas seguir em frente e continuar essa tela em outra, garantir que elas tenham a mesma aparência de se estivessem no mesmo aplicativo, isso é um desafio. Então, hoje, vamos enfrentar esse desafio. Para o propósito desta lição, eu escolhi criar a página de treinamento. Então, vamos fazer uma segunda tela, que será a tela de treinamento. E nessa tela, vamos criar uma página ou uma seção do aplicativo especializada em ajudar as pessoas a treinar. Isso inclui fornecer vídeos tutoriais, talvez artigos, possivelmente, mas mantê-los bem leves, talvez algumas ferramentas úteis para treinamento. Eu não tenho muita certeza. Mas vamos simplificar porque, novamente, parte de realmente pensar no que o aplicativo deveria ter, nos recursos e funções, é outra coisa. Isso é algo em que você definitivamente deveria investir tempo. Mas, para os propósitos atuais, o que estamos fazendo é praticar como dar vida a essas ideias Então, não como criar as ideias, mas como implementá-las em um design real. Então, vamos começar. Agora, normalmente, você pode escolher a ferramenta de moldura e obter uma moldura totalmente nova. Mas eu gosto de trabalhar no que já tivemos. Então, vou nomear isso aqui como se eu não tivesse certeza do aplicativo de fitness, e ainda não tivéssemos decidido um nome marca ou qualquer coisa, e tudo bem por enquanto Vou apenas copiar e colar. A FINMA vai fazer uma segunda tela aqui para mim e eu posso chamá-la, quero dizer, em vez de apenas um aplicativo de fitness, eu poderia chamá-la de página de resumo Tudo isso é um aplicativo de fitness, mas isso e esta é uma página de treinamento. Ok, ou você pode chamá-lo de tela, você pode chamá-lo do que quiser. Em seguida, vou remover as seções que, para mim, interessantes ou não são realmente utilizáveis ou reutilizáveis Então, vamos ver. Eu, eu quero manter esse tipo de, vou colocá-lo aqui. Manteremos essa primeira linha ou talvez possamos excluí-la. Então, isso é focado no condicionamento físico ou vamos trazê-lo de volta e vamos chamar isso de condicionamento físico ou algo parecido. E então vamos remover isso. Vamos alinhá-lo à esquerda. Aqui temos atividades, suas estatísticas, vamos retirá-las. Talvez queiramos que alguns dos artigos tomem esse formato ou eu não tenha certeza, mas vamos ter isso em mente. Agora, temos um problema: o fato que esses botões não estão se adaptando, eles não se adaptam às cores Precisamos descobrir uma maneira de não parecer muito mal quando isso acontece. Talvez você devesse torná-lo acinzentado. Eu acho que isso é muito melhor. O preenchimento aqui é branco, mas aqui é preto, curiosamente Quero dizer, acabamos de mudar isso. Nós podemos fazer isso também preto. Sim, acho que isso é bom o suficiente apenas para garantir que seja até certo ponto legível Uma coisa que queremos garantir é que também fique claro, antes de começarmos, qual delas estamos escolhendo qual página está sendo escolhida no momento. Para fazer isso, o que podemos fazer é vir aqui. Temos esse elemento que já criamos, certo? Então, agora, esse é um recurso extra ou algo extra que você precisa aprender. Então, quando você cria um componente, um componente pode ter várias variações dele ou o que chamamos de variância. Então você diz, este é o botão Navbar, é assim que parece Mas também precisamos garantir que haja uma versão que esteja um pouco destacada Quando você está na página de resumo, ela deve indicar que você está na página de resumo. No momento, isso não nos diz. Então, vamos clicar nesse botão aqui, que tem uma variante adicional, e isso vai adicionar outra variante aqui. Então, o que vamos fazer é adicionar um preenchimento. Vamos fazer esse preenchimento talvez 5%, talvez 10%. Isso é o que vamos fazer. E então, quando chegarmos aqui, escolheremos esse resumo. E vamos escolher a variante dois. Também podemos dar um nome a ele. Agora vamos ver como isso parece. Parece um pouco estranho em termos de preenchimento, e talvez devêssemos ajustar nosso preenchimento para garantir que funcione Então, o que poderíamos fazer aqui é que, em vez de ter o preenchimento B oito, podemos ter B quatro, e então seria consistente E sim, agora descobrimos isso. Agora só precisamos ter certeza que esse botão também está redimensionado, torná-lo 55 por 55 e nós o traremos aqui Agora vou excluí-los e adicioná-los novamente. Vamos ver como eles se parecem. Lá vamos nós. Agora isso está destacado e podemos mexer com o destaque Quero dizer, deveria ser mais claro ou mais escuro? Novamente, só para dar uma ideia, como eu disse, não estamos levando em consideração as cores reais do design e outros enfeites da Apple Estamos copiando com o efeito de vidro, mas todo o resto, estamos fazendo isso muito rapidamente. Sim, não precisa se concentrar muito nisso. Então, o que podemos fazer é também fazê-lo de uma forma que, quando destacado, também tenha uma determinada cor. Então, aqui, por exemplo , pode ser dessa cor. Ou essa cor que tínhamos, mas isso é como você pode ver, não está se misturando muito bem. Eu escolheria essa cor porque é muito brilhante. Então, o que vamos fazer é vir aqui e tornar isso padrão e esta página é treinamento. Então, vamos escolher a segunda variante para treinamento. Está bem? E parece que sim. Agora, como mencionei, não temos elementos adaptativos Quando você está codificando, você poderia dizer que, quando o fundo é claro , isso deve ter muito mais opacidade, 50% ou algo parecido Isso garantiria essencialmente que não haveria problemas em termos de visibilidade. Mas agora, como não podemos realmente codificar isso, não podemos realmente fazer essa lógica, às vezes você acaba com elementos que não são muito legíveis. Está bem? Então, você pode fazer isso manualmente e dizer, bem, neste caso, o fundo não está muito claro, seja o que for, ou você pode deixar isso para o desenvolvedor e ele decidir isso. Está bem? Mas isso é uma história para outro dia. Vamos agora voltar ao design. Agora, temos muito mais claro que esse é o resumo e a página de treinamento Perfeito. Então, agora temos que nos perguntar: o que se espera normalmente em uma página de treinamento? Então, eu, pessoalmente, esperaria que houvesse botões que me ajudassem a escolher algo muito rapidamente, certo? Adoro esses pequenos botões ou chips ou o que quer que você os chame porque eles são muito fáceis de acessar e ajudam você a acessar o conteúdo de que você precisa. Está bem? Mas talvez tenhamos um problema aqui porque, nesta seção, ficou claro que você estava iniciando uma atividade e talvez pudéssemos até mesmo deixar isso claro com o título, iniciar a atividade ou algo parecido. Mas aqui, está soando mais como um filtro. Então, talvez devêssemos ter um pouco cuidado com a forma como expressamos essas coisas. Quero dizer, você está começando uma atividade? Ou você está filtrando, sabe, as aulas ou os vídeos que deseja ver Talvez pudéssemos fazer isso de uma maneira diferente. Então, vamos criar uma variante diferente aqui. E então temos esse componente. Acabamos de fazer outra variante disso. Mas em vez de ter sombras e outros enfeites, vamos remover a sombra e remover o preenchimento, e vamos manter o traçado, ok Nós tínhamos um design de traçado, então vamos mantê-lo. E vamos ver como fica. E para fazer isso, basta selecionar cada chip que temos e depois ir para a variante dois. Agora você pode ver a diferença, a principal diferença entre eles é que eles estavam cheios de sombras Agora eles são mais parecidos com chips de filtro. Eles são usados principalmente para filtragem. E podemos tentar fazer outras coisas para garantir que seja, não tenho certeza. É compreensível que sejam apenas para filtragem. Talvez pudéssemos mudar as cores do ícone também. Para não fazer com que pareça tão interativo. Mas isso é só uma ideia. Está bem? Na minha opinião, isso é algo que podemos fazer para tentar alcançar esse efeito. Agora que fizemos isso para termos atividades, poderíamos simplesmente remover isso e é autoexplicativo que você possa filtrar de acordo com elas Talvez aqui possamos deixar mais claro o início da atividade. OK. Então comece a atividade. Você pode correr, andar de bicicleta, nadar, qualquer coisa. E aqui você tem as mesmas atividades, mas elas estão apenas separadas. Mas eu diria que não faz sentido que você esteja tentando assistir a um vídeo sobre corrida. Eu não acho que isso seja uma coisa. Então, o que deixaria isso mais claro é realmente encontrar as categorias adequadas. Então, eu diria que as categorias adequadas seriam treinamento com pesos, certo? Como pesos. E então aqui poderíamos escrever halteres Poderíamos escrever ioga como um só. Então, vamos ver se eles têm ioga. Estamos apenas procurando meditar. Certifique-se de filtrar gratuitamente. Então você pode ter uma pessoa orando, mas realmente não cabe mãos orando, algo assim Talvez, hum, relaxe ou relaxe, spa. Não tenho certeza se isso realmente simboliza isso, mas digamos que mãos orando Mas, como eu disse, essa é a versão gratuita. Então, no momento, não temos os melhores ícones, mas se você quiser realmente desenvolver um aplicativo ou projetá-lo ou se trabalhar em uma empresa, eu recomendaria que você adquira o pacote completo, a assinatura, para que você possa obter todos os ícones e eles tenham muitos ícones excelentes. Está bem? Então, o que mais você pode fazer? Você tem peso? Tem ioga? Vamos ver. Quer dizer, estou procurando no meu telefone. Deixe-me verificar meu aplicativo de fitness e ver o que eles têm lá. Ou talvez chamemos isso de meditação em vez de ioga. E eu não tenho certeza do que está lá. Digamos que faça exercícios aeróbicos e, em seguida, deixe alguém correr. E vamos descobrir mais uma coisa. Sim, digamos que ioga, mas depois temos que encontrar algo para isso. Ioga, tapete, colchão, travesseiro, alongamento. Quero dizer, não há realmente nada que simbolize ioga? Quero dizer, eles têm uma pessoa meditando, por exemplo. Isso pode ser bom. Então, esses são todos os tipos de exercícios que eles têm. Vamos escolher algo diferente. Digamos que, digamos, correndo. Ok, então aqui está. Não mudamos muito, mas temos pesos e meditação no começo Então, vamos colocar o que pode ser interessante ainda mais, você sabe, no final do design. Gosto de ter esses elementos porque são ótimos destaques, mas também são recursos extras ou conteúdo extra, digamos. Quando o usuário não encontra o que deseja, sempre há, você sabe, que pode ser interessante para você, pode interessar a você ou pode ser só para você, para ser honesto. Tipo, essa também é uma boa maneira de dizer isso, é dar a alguém um tópico interessante e dizer: Ei, isso pode ser uma coisa para você, algo que você pode fazer. Então, sim, vamos manter isso. Mas, como eu disse, é conteúdo extra. Quer dizer, idealmente, ele deve ser filtrado de acordo com a pessoa, acordo com seus interesses e de acordo com a página Aqui está uma página de fitness. Quero dizer, todo o aplicativo é um aplicativo de fitness. Acabei de perceber que não é uma página de fitness. É uma página de treinamento. Aqui poderíamos dizer treinamento. Agora temos esses tipos de treinamentos para você. Agora vamos criar um elemento ou componente que tenha vídeo. Clicando em F e fazendo uma bela caixinha. Vamos criar algo para assistir. Mas o fato é que esse formato que você vê aqui é um formato muito comum para computadores. Esse é o formato para computadores. É paisagem. Mas hoje em dia, muitos aplicativos, muitas coisas, estão se tornando verticais. Eles estão se tornando um retrato, e isso é por causa do telefone. Uma coisa que você pode fazer com seus designs é garantir que eles sejam verticais em vez de horizontais, porque isso realmente é mais otimizado para telefones. Então, o que poderíamos fazer é dar isso, quero dizer, quanto raio de canto temos? 16? Então, poderíamos dar a isso 16. E vou tirar essa imagem por enquanto, a mesma imagem que tivemos apenas como exemplo. Vou clicar nele e escolher em vez de cortar, vou dizer preencher. Vai descobrir as dimensões para mim e tudo mais. Ok, então agora temos isso aqui, certo? Agora, o desafio será torná-lo um pouco maior. O desafio será escrever texto, certo? Então, quando você tem algo horizontal, escrever texto nele vai ser difícil. Vamos ver que isso é Inter Inter e vamos fazer com que seja 16 Qualquer coisa abaixo de 16 geralmente é mais difícil de ler, ok? Portanto, esses títulos devem ser muito curtos. Então, vou fazer isso de preto, mesmo que não possamos realmente ver muito disso agora. Portanto, temos duas opções, então podemos escrever na imagem real ou escrever abaixo dela. Para facilitar a leitura, é sempre melhor escrever abaixo ou além porque você não sabe que tipo de imagem virá Portanto, certifique-se de que seja feito corretamente para que você considere todas as possibilidades. Sabe, dessa forma, eu sei que haverá texto em preto e abaixo dele, haverá branco, então funciona. Então eu vou fazer disso um componente, e eu vou dizer vídeo, ok? Agora vou copiar isso, e é isso que eu gosto de fazer. Eu gosto de colar já e colar novamente. Em seguida, escolha-os e torne-os Auto Layout pressionando a tecla Shift em A e, em seguida, eu os tornarei horizontais, e então copiarei, colarei e copiarei. Ou não precisamos, quero dizer, isso é o suficiente. Agora podemos ver como é e podemos julgar por nós mesmos. Ei, talvez isso esteja ocupando muito da tela, vamos mudar isso. Vamos mudar isso um pouco e ver o que podemos fazer. Talvez possamos diminuir o espaçamento entre eles, ou talvez seja uma má ideia Só o tempo dirá. Então, agora vamos tentar descobrir um pequeno título agradável, algo que seja mínimo. Novamente, estou procurando um aplicativo apenas para ver como a Apple fez isso, por exemplo, e não estou fazendo isso por nenhum motivo específico só porque meu telefone é um telefone amplo, então é mais fácil acessá-lo a partir daí. Eu vejo que eles têm força com Kim, força com Jen Tipo, esses são os exercícios que eles têm, certo? Tipo, eles dizem HIIT com Jamie Ray com Brian. Então, é muito legal porque, quando você pensa nisso da perspectiva da experiência do usuário, acho que eles estão tentando conectar você com a pessoa. Portanto, é uma conexão humana. A única diferença entre essa ou aquela lição é que essa é com Brian e aquela com Bakari, por exemplo Então, isso é algo muito legal, mas também torna as coisas mais fáceis para eles, porque você sabe, eles vão escrever HII T um, dois e três Isso também não faz sentido. Mas vamos tentar testar isso e ver como ficaria em nossa página. Então, se eu disser HIIT com Brian, certo? Muito tempo. O texto é muito grande para ser honesto. Então, vamos fazer com que seja 12. E vamos verificar como é. Então eu vou escolher , aperte play. Ok, vamos lá. Para ser sincero, o texto não é muito pequeno e é muito bom. É muito legal. E sim, como você pode ver, estamos usando muito bem esse espaço e podemos até adicionar outro. Dessa forma, você pode adicionar um pequeno teaser. Você pode ver, ei, há algo mais para você lá. Eu só vou derrubar esse elemento. Isso aqui mesmo. Então eu gostaria de pegar esse texto, copiá-lo e colá-lo. Estou me movendo com o touchpad para cima e para baixo. Para fazer com que passe por coisas diferentes. Então, agora estamos fazendo isso aqui, estamos colocando isso aqui, e temos que chamar isso de treino. E vou adicionar os dois em um layout automático. Então a distância aqui é oito, então eu vou fazer com que seja oito aqui também. Então, novamente, o mesmo princípio, certo? E é aqui que a consistência é muito importante é entender, ei, o espaçamento entre isso e aquilo e o que quer que seja igual em certa medida, não completamente igual, mas deve ser consistente Então, aqui oito, oito , oito, mas entre todas essas seções diferentes em 16. Portanto, verifique se você ainda está seguindo essas diretrizes que você configurou anteriormente. Está bem? Então, vamos continuar. Agora temos essa configuração. Vamos manter o título agora vazio ou padrão, então vamos escrever o nome do vídeo. Então, podemos preencher essas informações. Então, podemos chamar isso de Yoga com Matt. Engraçado porque você tem tapete de ioga, e então podemos dizer HIT com Brian. Então, poderíamos seguir esse caminho ou seguir um caminho diferente, para ser honesto, porque agora acho que o jeito que a Apple fez é legal, mas, ei, podemos fazer algo mais legal Agora, deixe-me pensar no que fazer. Uma coisa que podemos fazer. Vou copiar isso e colar. Então, agora temos uma linha extra. Então, estamos editando diretamente em tudo em todos esses elementos. Agora vou segurar Shift e A apenas escolhendo isso. Eu transformei isso em um layout automático, incluindo apenas o texto. Agora vou adicionar quatro e quatro preenchimentos. Vou adicionar um preenchimento. Vou deixar o preenchimento um pouco cinza, ou talvez você possa dar uma cor um pouco azul. Então eu vou dar 24 cantos arredondados. Então eu vou escrever aqui para escrever uma tag. Esta é uma etiqueta do que vamos querer dizer. Deixe-me adicionar um pouco mais de preenchimento da esquerda e da direita Quero ter certeza de que também se encaixa no próprio texto. Eu não quero que ele ocupe todo o espaço. Vamos ver aqui que era médio, isso deveria ser médio. OK. E isso deve ser meio ousado, eu acho. Ou podemos, eu não sei. Quero dizer, isso é ousado, então podemos nos ater a isso. Podemos manter as coisas em negrito, mas também ter muito texto em negrito é um pouco ousado. Vamos manter tudo médio, ok? E então vamos dar um exemplo. Aqui, em vez de dizer ioga com MP, poderíamos dizer iniciante, certo? Então, níveis, talvez adicionar níveis ou adicionar metas, qual é o objetivo disso? E poderíamos dizer aqui profissional. Digamos que aqui no meio eu não , como no meio ou no meio ou algo parecido, ou não tenho certeza. Quero dizer, meio também pode ter um significado ruim hoje em dia, assim como ruim. Mas digamos médio. Dificuldade média, dificuldade para iniciantes, dificuldade profissional ou máxima ou como você quiser chamá-la, na verdade não é muito importante Então, o que podemos fazer é pegar essa tag e transformá-la em seu próprio componente. É algo que já podemos fazer. Vou tirar isso, transformá-lo em um componente, chamá-lo de tag, e vou criar três variantes dele. Um vai começar. Um vai ser mega, outro vai ser difícil ou profissional. Quero dizer, em vez de dizer “difícil”, vamos dizer que você é profissional, esse é o nível profissional. Então, podemos mexer com os profissionais: vermelho médio é amarelo, iniciante é verde, talvez Depende realmente de nós. Vou apenas adicionar isso como padrão para iniciantes e, sempre que quiser trocá-lo, você pode escolher médio, profissional e assim por diante Novamente, você pode voltar às cores e dizer: Ei, eu realmente não gostei disso. Vamos mantê-lo azulado ou talvez o vermelho às vezes possa ser visto como uma conotação negativa Então, quando você o torna azul, ele se torna mais positivo. Mas também talvez possamos tornar todas essas cores um pouco mais, com um pouco mais de saturação apenas para que pareçam claras Então, agora vamos verificar. Ok, parece muito melhor, mas agora acho que poderíamos torná-lo regular apenas para que não se destaque muito. E em termos de espaçamento, talvez você possa criar um layout automático com a tag, como o título na tag, e fazer com que as quatro, eu sinta que elas poderiam estar mais próximas Agora temos ioga com Matt para iniciantes. Como alternativa, o que poderíamos fazer é transformar cada sessão de ioga em algo diferente. Então, por exemplo, ioga pacífica, certo? E então você pode dizer HIIT, você pode dizer, hum, HIIT rápido Você está meio que dando um pouco de marca, isso é ioga, mas o objetivo dessa sessão de ioga é ser super pacífica ou relaxante Quero dizer, ioga deveria ser isso de qualquer maneira, mas você poderia dizer ioga intensiva para profissionais, certo? Então, aqui temos P. Que tipo de exercício poderia ser uma corrida pesada Hum, ok, ou maratona, maratona, maratona, certo? E então você está adicionando um pouco mais, adicionando um pouco de marca e deixando as pessoas mais interessadas porque eu acho que o que a Apple fez é muito amigável, mas não louco, interessante Tipo, aqui eu estaria como correr uma maratona. Uau. Sim, eu assisti ao vídeo da Marathon Run Eu vi o desafio que eles enfrentaram e continuei. Talvez seja como um vídeo que você coloca no telefone e depois corre e os escuta. É como ter alguém como um amigo correndo com você ou algo parecido. Eu não sei, espalhando ideias diferentes. Mas lembre-se de que, ao criar algo assim, criando tags, por exemplo, você está criando diretrizes para quem vai adicionar o conteúdo Você provavelmente não adicionará o conteúdo sozinho, certo? Então você tem que ter isso em mente. Ao criar esse design, você está estabelecendo a base para que outra pessoa entre e preencha o conteúdo. Se você não tivesse a tag de iniciante ou a etiqueta de dificuldade incluídas, provavelmente isso não teria sido feito Quem o preencheu teria dito que isso não é algo necessário e eles não teriam feito isso Mas isso teria sido negativo para o usuário. OK. Então, outra coisa que acabou de passar pela minha cabeça é o tempo. Você sabe, quanto tempo eu tenho? Se eu quiser fazer uma maratona, não sou nenhum? São 2 horas? 5 horas, 1 hora? Eu não sei Tipo, que tipo de vídeo eu vou assistir agora? É muito importante acrescentar isso. Então eu diria, tipo, copiar e colar aqui e adicionar duração. Então você poderia dizer que poderia dizer, tipo, 20 minutos ou algo parecido, ou você poderia, você sabe, dar a duração mais exatamente e dizer, você sabe, isso é 1020, certo? Algo parecido. Coisa desse jeito. Mas vamos tentar ver como podemos formatar isso da melhor maneira. Vamos escolher uma cor aqui. Talvez esse. Não quero editar nada aqui, então não mexo com os componentes, então vou editar tudo diretamente aqui OK. Agora temos tempo, mas acho que talvez seja mais fácil escrevermos 10 minutos ou algo parecido. Porque é mais difícil para as pessoas dizerem 1057. Oh, tecnicamente é 11. Não 10 minutos, 11. Então você está fazendo com que eles calculem as coisas. Não, diga apenas 10 minutos, sabe? E ainda melhor se forem 11 minutos, não diga 11 minutos, diga 10 minutos. Basta arredondá-lo para que pareça um pequeno número. Está bem? Novamente, como eu disse, aqui, você está agregando mais valor. Há muito valor aqui. Para quem vai preenchê-lo, agora eles encontram um lugar para adicionar o título Eles têm um lugar para adicionar o tempo e a dificuldade. O que mais alguém poderia precisar? Quer dizer, eu não tenho certeza. Agora vamos em frente e vamos adicionar um para essa última coisa aqui. Poderíamos dizer HIIT intensivo. CLIQUE e transforme-o em um distintivo profissional. Quero dizer, é chamado de crachá ou chip ou o que você quiser chamar Então, vamos tentar encontrar algumas fotos. Eu costumo ir ao Pexels ou há outro site chamado Free Poderíamos simplesmente digitar Yoga, por exemplo. Vou tirar as fotos mais fáceis que puder encontrar. Quero dizer, isso não parece muito com a lição. Agora, como você pode ver, você pode adicionar isso diretamente à instância. Eu já mostrei isso antes, mas você apenas copia como um preenchimento. Em vez de copiá-lo aqui, não cometa esse erro. Se você copiar isso aqui, nem sempre funcionará, copie o preenchimento e cole aqui. Em seguida, você pode excluir os outros preenchimentos anteriores. Agora, a mesma coisa com o HIIT, não tenho certeza do que é, para ser honesto Acho que é um treino intensivo de alta intensidade ou algo parecido. Mas vamos pegar esse cara aqui. Outra coisa importante quando você está fazendo isso, como você pode ver, estamos fazendo as coisas muito rapidamente, mas também seria ótimo se você pudesse configurar um estilo específico para quem vai preencher o conteúdo Você sabe, escolher imagens brilhantes, por exemplo, escolher imagens que sejam, não tenho certeza se imagens com boa iluminação, boa qualidade, e isso pode realmente ajudar muito. Então, vou substituir essa imagem aqui e vou colocar a intensiva aqui porque o treino dela parece um pouco mais fácil, mesmo que eles estejam fazendo a mesma coisa. Mas ele está sem camisa e está suando. Eu sinto que ele está realmente passando por isso e também está escuro, então eu quero manter isso fora da interface do usuário aqui. A corrida de maratona realmente se encaixa, mas deixe-me fazer uma melhor Então, clique com o botão direito em Copiar imagem. , a imagem não vem com a mais alta qualidade, mas para mim, tudo bem. Lá vamos nós. Agora temos essas imagens. Está preenchido, não é ótimo. Como eu disse, você deve tentar dar o exemplo. Mas aqui estamos tentando fazer isso muito rapidamente, mas o ideal é que você dê um exemplo de quais tipos de imagens devem ser adicionadas aqui e quais não devem ser. A última coisa sobre a qual quero falar é talvez adicionar um botão play. Eu geralmente gosto de fazer isso sozinho. Eu apenas pressiono a tecla Shift e me certifico de que eles tenham o mesmo ângulo. E então eu mexo um pouco com ele, estico-o e dou um preenchimento Agora podemos copiar isso e vir aqui. Essa é a vantagem de adicionar essa imagem não como uma imagem, mas como uma moldura, porque então eu posso adicionar coisas a ela como um botão de reprodução. Agora, adicionar um enorme botão play ocupa muito espaço. Eu recomendaria redimensionar talvez tornando-o um pouco arredondado. Hoje em dia, esse é mais o estilo. Talvez você possa adicioná-lo em um canto, dar um pouco de sombra, só para que fique visível. Você também pode torná-lo transparente, um pouco menos. Você poderia colocá-lo no meio. Depende realmente de você, mas você deve ver o que funciona melhor porque plataformas diferentes fazem isso de forma diferente. E isso realmente mostra às pessoas que isso não é uma imagem, mas sim um vídeo. Então, poderíamos colocá-lo no meio, para ser honesto, mas tentar não ocupar muito desse espaço. Ok, então o que também poderíamos fazer aqui nesta seção? Uma coisa que estou pensando em fazer é que talvez pudéssemos adicionar artigos ou algo parecido, dicas, não tenho certeza. Talvez possa ser sobre nutrição. Quero dizer, aqui está o treinamento, mas vamos falar sobre nutrição. Este é um aplicativo nutricional? Eu não sei Mas vamos adicionar o título. Conhecimento para você ou artigos para você, ou poderíamos apenas dizer para sua informação. O importante é manter o tom interessante. Quero dizer, às vezes, você sabe, aqui é conversacional. Suas estatísticas de hoje iniciam atividades para você. Aqui estão os treinos, é um pouco mais formal e depois aqui para sua informação Não é tão formal, mas também é um pouco coloquial Mas está tudo bem. Apenas certifique-se de que o tom não esteja em todo lugar. Então, agora vamos criar um elemento diferente porque queremos ter certeza de que se trata de um artigo e não apenas de um vídeo. Vou apenas criá-lo e não torná-lo horizontal, desculpe, não vertical, mas sim horizontal, porque isso é mais entendido como não vídeo. Isso é real, esse é um formato Tik Tok, e isso não é. Agora estou tentando trazê-lo aqui para ver o tamanho, só para ter certeza de que o tamanho é bom. Então, o que eu poderia fazer é copiar esses elementos aqui. E eu vou apenas trazê-los aqui. Coloque-os em um layout automático e em seguida, coloque isso em um layout automático, e então poderíamos fazer isso dessa maneira e eu vou criar esse componente e chamá-lo de artigo. A mesma coisa, copie. Traga-o aqui, cole, cole novamente, faça deles um layout automático, torne-o horizontal e vamos adicioná-lo. Agora, deixe-me colocar esses menus e outras coisas, colocá-los no topo para que não nos incomodem. Vamos dar uma cor diferente para que fique claro e eu vou colocar isso de lado. Agora podemos trabalhar nisso, fazer disso um layout automático, dar a ele um espaçamento de oito Agora diz o nome do vídeo, mas deveria dizer o nome do artigo. Vamos mudar o nome do artigo, a duração. Percebi aqui que as durações não as variavam, então faça assim e depois para sua informação Aqui temos vários artigos. Como você pode ver, estamos simplificando as coisas com os elementos. Você não precisa fazer de tudo, mas isso realmente depende do design e do estilo. Usamos muitas sombras aqui. Poderíamos tentar integrá-los. Poderíamos tentar integrá-los ao nosso design. Então, deixe-me adicioná-los aqui, isso adiciona um pouco de profundidade, adiciona uma aparência bonita , para ser honesto. Mas não estou totalmente convencido, mas acho que está tudo bem, pois dessa forma podemos adicionar alguns dos elementos que já tínhamos, então por que não? Aqui temos vários artigos, então podemos escrever apenas alguns exemplos. Mas antes de fazer isso, certifique-se de que o espaçamento seja semelhante Aqui são oito. Também podemos fazer oito aqui, e então podemos simplesmente anotar dietas proteicas. Eu não gosto de preparar refeições um a um. Verifique se o texto já está esticado. Então, preparar a refeição individualmente, e poderíamos dizer 5 minutos de leitura. Eu comi essa informação que muitas pessoas dão 5 minutos para ler. Não vai tomar muito do seu tempo, então não se preocupe com isso, ok? Então, isso é muito legal. Aqui temos a preparação da refeição. Ok, então talvez possamos dizer apenas aplicativos ou exercícios. OK. Exercícios para abdominais Cinco exercícios ou abdominais, e então podemos dizer que é uma leitura de 10 minutos ou 3 minutos. Eu não sei Então, aqui no final, podemos dizer exercícios aeróbicos ou dicas de cardio de profissionais. Eu não sei Quero dizer, as pessoas não podem lê-lo de qualquer maneira, e então diremos que é uma leitura de 10 minutos, e então vamos escolher as fotos. Então, podemos escolher uma foto de alguém correndo para que eu possa tirar essa foto. Agora, como isso é vertical, você precisa ter certeza de que será cortado um pouco. Você precisa ter certeza de que o foco está no meio para que, quando for cortado ou redimensionado , fique bem Aqui temos dicas de exercícios aeróbicos. Quero dizer, não é visível de qualquer maneira, então não importa muito. Treino para abdominais, digamos abdominais. Treino abdominal ou vamos ver alguém treinando seu abdômen. OK. Lá vamos nós. E depois preparamos a refeição. Sem preparação. Isso parece muito bom. Também parece delicioso. OK. Então você vai pegar isso, colocar aqui e pronto Isso parece muito bom. Então, agora temos uma página preenchida. A última coisa que poderíamos fazer é talvez substituir, tipo, a imagem aqui porque já a usamos muitas vezes. Então, vamos adicionar um artigo diferente. Vamos escrever um trabalho , então copie isso, cole e você pode colocá-lo aqui. Podemos cortá-lo como fizemos antes, e eu vou redimensioná-lo enquanto pressiono a tecla Shift, colocar esse cara aqui só para que ele fique visível. Exclua a imagem. E agora vou me certificar de que ele está aqui embaixo. Como eu disse, há preenchimentos. Você pode ter vários preenchimentos, então você vai se certificar de que eles estão ordenados da maneira correta para que você possa obter esse gradiente linear da maneira certa que você deseja E o que podemos fazer aqui é mudar toda essa cor de qualquer maneira. Azul e cole o código hexadecimal aqui. Mas eu não gosto disso. gosto de como está agora. Podemos fazer com que seja muito leve, mas talvez 50%. Então, podemos tornar todo esse texto branco. Veja como ficou bom agora, trocamos algumas coisas e agora parece muito melhor Então, em vez de, eu não sei, talvez pudéssemos colocar números. Mas vamos colocar o número aqui também. Eu vou dizer a melhor maneira de perder peso levantando pesos Isso soa bem. Então vamos colocá-lo assim, agora temos uma segunda tela cheia de informações, cheia de conteúdo com todos os tipos de possibilidades. É uma coisa completamente diferente. Aqui, o que temos é um painel. Isso lhe dá algumas informações. Ele sugere algum conteúdo para você. É ótimo. Mas aqui temos muito mais inclusos. Nós, você sabe, tags onde você pode filtrar. Você pode escolher certos exercícios. Você pode ter para sua informação. Você também tem conteúdo para você. Sabe, há muitas coisas que podemos melhorar só de informar você. Como, por exemplo, em todos os treinos, podemos ter um botão que diz todos os treinos ou mais treinos A mesma coisa com para obter informações. Nós poderíamos ter isso. Também poderíamos ter uma função de pesquisa na parte superior, na verdade, podemos adicionar uma função de pesquisa. Vamos fazer isso. Por que não? Quero dizer, é muito fácil. Vamos apenas adicionar uma moldura como essa. Vamos dar uma cor, atribuir um raio de 16 cantos e adicioná-la aqui Podemos fazer mais de 16, podemos fazer 36, e então é totalmente redondo. Então, podemos adicionar algum texto aqui e dizer pesquisar exercícios, artigos, vídeos, não sei Faça essa entrada e torne-a um pouco mais leve. E assim, temos uma função de busca aqui. E sim, é tão fácil quanto isso. Não precisa ser muito complicado. Mas aqui temos uma interface de usuário muito boa, desse jeito, temos uma segunda tela. Muito obrigado por ouvir, e nos vemos na próxima lição. Na próxima lição, falaremos sobre prototipagem. Isso significa conectar a primeira tela à segunda, além de fazer algumas interações aqui e ali para que pareça um aplicativo real. Quero dizer, no momento, você não pode em nada, não pode ver nada, nem consegue rolar. Então, teremos que descobrir isso na próxima lição. OK. 16. Noções básicas de prototipagem: Oi. Nesta lição, falaremos sobre a parte de prototipagem do Agora, falamos muito sobre o lado do design porque, na verdade, ele está muito cheio de recursos, fluxos e outros enfeites A parte de prototipagem pode ser um pouco mais complicada, mas não é tão extensa quanto a parte de design Portanto, deve ser mais fácil ou rápido explicar, mas você precisa praticar um pouco mais para pegar o jeito. Então, quando falamos sobre prototipagem, queremos dizer coisas diferentes Agora, esse design que temos aqui é tecnicamente chamado de protótipo Você poderia chamá-lo de wireframe ou protótipo. Mas quando falamos sobre prototipagem, falamos sobre brincar com interações e microinterações Então, quando você clica em um botão ou quando passa o mouse sobre um botão, e ele tem uma forma diferente ou uma cor diferente ou qualquer outra coisa diferente, quando você clica em um botão e ele leva você para outra página, todas essas são interações e microinterações, ok? Quando você rola ou coisas assim, quando você rola para baixo e rola para a direita, esquerda, qualquer coisa, você abre um vídeo. Tudo isso são interações. Isso significa que o protótipo ou o design deixam de ser uma imagem estática No momento, é só uma imagem. Você vê, parece bom. Você poderia ter projetado isso em outro programa. Você pode imprimir isso e pronto. Mas o que nos diferencia é que talvez você possa clicar e clicar em algo e obter um menu. Você pode clicar em treinamento e acessar a página de treinamento. É exatamente sobre isso que vamos falar hoje. Então, a primeira coisa sobre a qual queremos falar saber que no painel direito é onde você encontra as configurações de prototipagem, ok Então, quando você clica em qualquer item, é quando você tem algumas opções de prototipagem E vamos falar sobre três coisas principais: interações aqui , posição e transbordamento Então, vamos começar com as interações porque esse é o recurso mais usado. Então, vamos falar sobre isso. Então, como dissemos, interação é quando você clica em um botão e ele faz alguma coisa ou você passa o mouse sobre ele ou interage com ele em qualquer capacidade, e ele faz alguma coisa OK. Então, podemos fazer isso apenas com o menu. Está bem? Vamos começar com o menu. Temos resumo, amigos e treinamento, e a coisa mais simples que você deve fazer é clicar em treinamento e acessar a página de treinamento. Portanto, podemos fazer isso diretamente aqui, mas eu preferiria que você fizesse isso no lado do componente. Então, ele se conecta a cada página, a cada instância. Então, o que você vai fazer é chegar ao componente ou à parte que deseja que seja interativa. Então, neste caso, é esse botão Napbar. Então, você pode clicar aqui em Interações para adicionar uma. Ou o que você pode fazer é simplesmente mouse sobre ele e encontrar esses botões Eu sugiro que você faça isso e depois segure isso e então ela sairá com uma flecha. Para treinar, você vai trazê-lo para esse quadro e vai deixá-lo pra lá. Assim que você fizer isso, ele configurará algumas configurações para você. A primeira coisa é o gatilho. Isso significa que quando você clica no toque, ao tocar nele, haverá uma ação. Essa ação é navegar até um destino, que é a página de treinamento Como puxamos essa seta aqui, ela já inseriu todas essas informações e está apenas perguntando que tipo de animação você quer que seja? Nesse caso, é instantâneo e podemos conviver com isso. Vamos experimentar. Vamos ver se realmente funcionou. Agora, vamos abrir esta página. Então, vamos clicar em treinamento. E como você pode ver, o que aconteceu, eles imediatamente nos levaram para a página de treinamento, vamos repetir. Treinar BAM, fácil. É isso mesmo. Se você clicar em qualquer outro lugar, ele não fará nada. Se você clicar em Lugar Nenhum, ele mostrará quais itens são interativos e, nesse caso, está aqui Você clica aqui, você está lá B. Agora existem outras opções, vamos vir aqui. Você pode configurar para que o gatilho possa ser arrastado ao arrastar esse botão, ao passar o mouse sobre ele ou enquanto pressiona somente enquanto pressiona, se você pressiona uma tecla ou gamepad, como se pressionasse um botão, se pressionasse a letra S ou R ou algo parecido Há mais opções aqui, mas eu sugiro que você fique com essas primeiras porque elas são as mais comuns. Solte o toque e arraste enquanto passa o mouse, e principalmente os três primeiros são muito relevantes e muito usados Quando se trata de animações, existem animações diferentes Um deles é dissolver e o Figma oferece uma prévia de sua aparência Quando você clica nele, ele faz isso. Eles adicionam mais algumas configurações quando você coloca a animação, o que é facilitador. Isso significa o fluxo da animação, mas isso é um pouco mais avançado e a duração. Agora são 300 milissegundos. Também vamos ver como é a dissolução. Então, quando vamos aqui, clicamos nele. Como você pode ver, é como um fade out fade na animação Ele simplesmente se dissolve nele. E depois há o Smart Animate, que é muito legal porque cuida de muitas coisas Se houver um texto ou um objeto que foi de cima para baixo, ele o levará com você. Vamos ver como isso acontece. Como você pode ver, esta carta caiu porque reconheceu que estamos usando o mesmo elemento e essas fichas subiram. Veja. Mas essa é uma animação muito difícil realmente desenvolver em um aplicativo. Então, eu aconselho você a não abusar disso. Quero dizer, nesse caso, quando você está navegando, é muito difícil e também não faz sentido Quero dizer, por que você quer que as pessoas vejam que esse elemento caiu e esses chips subiram? Porque agora eles são tecnicamente diferentes elementos de design Eles não deveriam, eles não têm nenhuma relação com isso, ok? Portanto, eu não sugiro que você faça isso quando estiver fazendo isso entre ir de um quadro para outro. Existe outra opção, que é que existem outras animações, entrar, então ele entra desse jeito, sai, empurra Agora, nesse caso, eu realmente recomendaria a animação push porque você está indo do lado esquerdo para o lado direito. Então, ele está sendo empurrado, mas você deve configurá-lo para que esteja na direção certa. Nesse caso, é à esquerda, então está assim. Vamos listá-lo agora. Você clica nele e fica assim. OK. Então, é muito legal. Funciona muito bem e, logicamente, faz sentido. Isso faz as pessoas entenderem que oh, isso está à esquerda, isso está à direita. Mas, como você pode ver, até o cardápio também está sendo retirado, o que não é o ideal. Mas é por isso que há esse pequeno botão aqui, essa caixa de seleção Clique nele e ele animará as camadas correspondentes. Isso significa que se houver uma camada correspondente como essa, ela será animada Ele vai fazer uma animação inteligente para ele. Vamos ver o que isso significa aqui. Nesse caso, você clica em treinamento, como pode ver, tudo se moveu, exceto as camadas correspondentes. Nesse caso, a camada correspondente está aqui. Eu não mudei. Mas também, novamente, esse cartão e esses chips, o que é lamentável, mas há uma solução para isso As correções são: você vai até os quadros e muda o nome deles porque aqui esse quadro é chamado de quadro 24 e aqui esse quadro também é chamado de 24. O que você vai fazer é dizer 24 X e a mesma coisa aqui para você, 25 X, ou você pode dar um número diferente. Agora vamos ver. Perfeito. Absolutamente perfeito. Como você pode ver, tudo pressionou, como enviar animação, além do menu. É exatamente isso que queremos que aconteça. E sim, sem mais nem menos, temos uma interação muito boa acontecendo conosco. Agora, podemos aplicar a animação oposta e, se quiser, você mesmo pode configurá-la ou simplesmente copiá-la daqui, clicar nesse elemento e colá-lo. Mas em vez da flecha vir aqui, você pode fazê-la vir aqui. Então, agora vamos testá-lo. Ok, há um problema. Espero que você tenha notado e que seja a direção. Vamos apenas inverter a direção e agora vamos ver. Perfeito. O que é legal é que agora há um fluxo lógico. Quero dizer, de preferência, devemos ter um painel de amigos no meio. Mas, no momento, ainda não criamos um protótipo disso . Nós não o projetamos. Você simplesmente vai do resumo ao treinamento desse jeito. E muitas coisas fazem sentido. É um fluxo lógico da esquerda para a direita, da direita para a esquerda. E, ao mesmo tempo, o menu permanece fixo e isso é absolutamente perfeito. Está bem? Então essa é uma forma de animar as coisas Há outras coisas a fazer, outras coisas que você pode fazer para animar ou criar protótipos, como dizemos Então, uma dessas coisas é a rolagem. Está bem? Então, quando chegamos a essas páginas, o que podemos fazer para habilitar a rolagem é simplesmente reduzir isso. E então, quando você acessa esta página, você pode simplesmente rolar para baixo. Está bem? Portanto, há outra maneira de fazer isso. Quando você traz isso de volta e diz, esse é o tamanho do iPhone, então eu quero mantê-lo exatamente do mesmo tamanho, você vai para o painel de prototipagem Você escolherá a página. Como todo o quadro, vá até o painel de prototipagem e , ao redor do comportamento de rolagem, você verá Estouro significa que o conteúdo que está fluindo sobre o quadro como este, por exemplo, você decidirá que agora é configurado como padrão sem rolagem, mas pode decidir se deseja rolagem horizontal, vertical ou em ambas as direções Pense consigo mesmo: a pessoa deveria seguir em qual direção ela deveria se deslocar? Bem, verticalmente. Então, ao fazer isso, você desce e agora ativa a rolagem Você pode rolar para baixo. Na verdade, não está pronto. Você pode esticá-la, mas ela não rola. Mas o legal disso é que você pode ter muitas coisas diferentes, mas elas estão escondidas e você pode rolar para baixo até elas. Mas essa é uma maneira e, como eu disse, se redefinirmos isso, uma maneira simples é estendê-la tamanho do quadro e, em seguida, você pode rolar para baixo. Vamos praticar a mesma coisa aqui. Nós meio que gostamos de um controle deslizante ou um carrossel aqui, onde você deveria ir para a direita Podemos fazer a mesma coisa com a rolagem. Então, basta escolher a moldura que contém os itens e você tem a mesma coisa aqui, transbordar, basta colocá-la na horizontal Agora vamos ver se funciona. Agora estamos tentando rolar, mas não está funcionando, e há um motivo porque essa configuração de estouro só funciona se o conteúdo estiver fluindo sobre o quadro Está se tornando demais, está ultrapassando os limites Como você pode ver aqui, os limites, todo o conteúdo está dentro dos limites. Quero dizer, você não pode ver o resto disso, mas está dentro da caixa. A solução fácil é minimizar essa caixa, torná-la menor para que caiba na moldura visível. Agora, isso é considerado estouro. Está fluindo sobre ela. Agora você pode rolar para esquerda na direção que quiser. Você pode praticar isso para outros. Eu posso fazer isso aqui também, horizontalmente e depois torná-lo menor e então podemos rolar. A mesma coisa aqui. A mesma coisa aqui, horizontal e faça com que caiba. Agora tudo é rolável. Então, como mencionei, podemos tornar tudo isso também maior e depois rolar para baixo. Tudo o que podemos percorrer perfeitamente. Mas há um problema. Um pequeno problema. Bem, isso é um pouco mais avançado. Mas se você notar que o menu está sendo percorrido, certo? E você provavelmente tem uma ideia de que quando você está no telefone e há um menu, algumas coisas não rolam para baixo, algumas coisas permanecem fixas, e isso é o que você normalmente espera, não que elas subam assim. Eles deveriam ficar no mesmo lugar. Existe uma maneira fácil de fazer isso, a maneira mais fácil é chegar a esses elementos aqui e depois colocá-los em uma moldura. Vou juntá-los e colocá-los em um layout automático segurando Shift e A. Vou fazer com que ignorem o layout novamente. Porque eles foram colocados em seu lugar, mas não queremos trazê-los de volta para sua casa. Você simplesmente vai até o protótipo para posicionar e clicar em corrigir. Agora vamos testá-lo. Agora o temos aqui e, como você pode ver , agora está fixo. Quando você sobe e desce, ele permanece no lugar e tem um efeito de vidro muito legal em todo o lugar, desse jeito, você decide onde vai ficar e o conserta. Você diz que a posição está fixa. Agora podemos fazer a mesma coisa aqui. Vamos torná-lo um layout automático. E então vamos pedir que ele ignore o layout automático e, em seguida, vamos colocá-lo na mesma posição. Podemos copiar a posição Y aqui e simplesmente passá-la aqui para ser exato e, em seguida, ir para o protótipo e corrigi-lo Agora está confuso. O motivo é que agora funciona como um vamos ver. Funciona quando você vai lá, mas estragamos a animação, e eu vou te dizer por que e como podemos corrigir isso OK. Mas agora os dois estão consertados, o que é perfeito. Mas o que ficou confuso é que agora essas não são consideradas as mesmas camadas Eles não são considerados compatíveis. E a razão é porque agora eles têm nomes diferentes, então você tem que realmente prestar atenção a isso. Aqui diz 38 e aqui está 37. Então, uma solução rápida é dar a eles o mesmo nome, que é quadro 37, ou você pode chamá-los de Navbar ou o que quiser E agora que elas são identificadas como camadas correspondentes pela Figma, elas funcionam perfeitamente E, como mencionei, você pode percorrer tudo, tudo é rolável Essas são as microinterações, as animações que realmente tornam um aplicativo super imersivo Portanto, certifique-se de tentar praticar isso sozinho, tente entendê-lo. Não queríamos complicar demais as coisas para você porque a prototipagem não é a coisa mais fácil de aprender É por isso que tornei isso o mais simples possível, mas há muito mais configurações, muito mais possibilidades que você pode aprender sozinho. E eles poderiam realmente levar seu jogo para o próximo nível. Vá em frente, experimente, experimente diferentes prototipagens, animações, interações, o que quer que você tenha Obrigado por ouvir, e nos vemos na próxima lição. 17. Pré-visualização do seu protótipo: Então, agora aprendemos muito sobre os fundamentos do design de prototipagem, cores e tipografia e Mas, no final das contas, o que realmente queremos fazer ou precisamos fazer é visualizar adequadamente nossos designs, vê-los por nós mesmos e mostrá-los a outras pessoas. Há muitas maneiras diferentes de fazer isso, mas todas são simples, então não se preocupe, e eu vou mostrá-las para você Agora, ao longo do curso, já vimos algumas dessas formas, mas eu só quero fazer uma pequena revisão. Portanto, a maneira mais fácil e rápida de ver e visualizar seu protótipo é clicar na moldura que você deseja ver e, é clicar na moldura que você deseja em seguida, pressionar o botão de exibição Isso permite que você apresente o design que você tem aqui. Não importa que tipo de protótipo, que tipo de moldura você está escolhendo, ele vai mostrar isso Essa é a principal maneira de fazer isso. Mas existem maneiras diferentes de fazer isso. Agora, uma coisa que você pode fazer, especialmente se tiver uma tela maior, é escolher a opção de visualização. O que isso faz é abrir a tela do telefone ao seu lado para que você possa ver o design enquanto o faz. propósito, estou projetando aqui e você pode redimensionar isso, e você pode até tentar ter certeza de que estou colocando meu telefone na vida real Estou colocando-o ao lado da tela para garantir que o design se encaixe. Agora posso imaginar como se este fosse meu telefone e posso experimentá-lo e dizer: posso ler o texto? É legível, as coisas estão corretas, boas, seja o que for. E, ao mesmo tempo, posso mudar as coisas diretamente no arquivo de design, o que é muito legal. Essa é outra maneira de fazer isso. Mas também existe algo chamado fluxos. Quando você clica em uma moldura e acessa a guia do protótipo, tenha algo chamado ponto de partida do fluxo No momento, isso é considerado pela Figma um fluxo e é chamado de fluxo um É um ponto de partida. Quando vamos pré-visualizar, temos um pequeno painel aqui que você pode retirar e diz: Aqui estão seus fluxos. Esse é o primeiro ponto de partida que escolhemos. Há outro aqui, mas acho que foi cometido por engano ou talvez a Figma o tenha identificado erroneamente Provavelmente está aqui. A barra de navegação, podemos excluí-la daqui. Mas, para criar um fluxo, você acessa a página que deseja mostrar e pode clicar aqui. Você pode ter um ponto de partida de fluxo e chamá-lo de página de treinamento, por exemplo. Ele te diz que quadro é esse. Você pode trocá-lo apenas escolhendo aqui e também pode fornecer uma pequena descrição. Então, você pode dizer aqui que os usuários podem se informar e assistir a vídeos ou artigos relacionados ao treinamento. OK. Então, quando você vai aqui, você pode clicar nele e, em seguida, ele lhe dirá exatamente uma descrição para explicar a você. Obviamente, isso não é para você, mas talvez para colegas de equipe ou usuários que estão testando, pessoas que estão testando esse design para que eles possam entender Mas acho que o melhor teste é feito sem dar descrição, sem fornecer informações. Quero dizer, você quer que as pessoas entrem e experimentem isso em primeira mão sem instruções extras nem nada. Está bem? Mas é assim que você pode criar esses pontos de partida de fluxo e editá-los. E ao desmarcar tudo, você encontrará seus fluxos aqui Você também pode alterar os nomes e dizer, bem, isso é painel ou página de resumo. Você pode alternar as posições e também pode visualizá-las diretamente, copiar o link do fluxo, o quadro. Você pode ver qual moldura é essa? Oh, ok, esse. Isso. Tudo bem. Há muitas configurações e opções úteis aqui que ajudam você a descobrir como contornar seu design. Mas essas são as principais formas de visualizar o protótipo traseiro Não se esqueça, é claro, que falamos sobre isso, as configurações de prototipagem Nós o temos aqui configurado como iPhone 17, mas você pode trocar a moldura ou simplesmente não ter nenhum dispositivo. Só há um problema quando você não tem um dispositivo: o comprimento total será mostrado de uma forma muito simples, desse jeito Isso pode ser um pouco desagradável. Portanto, certifique-se de que, se você estiver mostrando isso para telefones celulares, tenha uma moldura e, de qualquer forma, seja envolvente mostrá-la dessa forma Mas caso você precise ou queira mostrar dessa forma, existem algumas configurações adicionais de prototipagem quando você está aqui nesta visualização Então, basta clicar nesse botão e ele fornecerá algumas configurações diferentes. Portanto, há o tamanho real. Então isso mostra, você sabe, com o tamanho ou o suposto tamanho da moldura, ok? Há largura e altura adequadas. Então, isso faz com que você possa ver todo o quadro do início ao fim. Eu realmente não recomendaria isso. O que eu recomendaria é a largura do ajuste. Então, isso é muito semelhante agora, neste caso, ao tamanho real, mas caberia na largura de uma forma que não fosse, você sabe, exagerado Também é responsivo, mas se você não projetou seu protótipo para ser responsivo , ele ficará muito distorcido Eu também não recomendaria isso. Somente se você tiver feito seu design de forma responsiva. Também há tela cheia e, novamente, isso não parece ótimo, mas tudo depende de seus propósitos, que você está tentando fazer, da aparência do design, do tamanho e assim por diante. Eu recomendaria apenas brincar com eles e ver o que funciona melhor para você. Para mim, no momento, isso funciona muito bem porque você pode ver a navegação. Você pode ver um pouco abaixo, mas não muito. Mas eu não recomendaria a largura do ajuste durante a noite. Isso não é ótimo. Portanto, essas são apenas algumas configurações de prototipagem diferentes que podem ajudá-lo a visualizar adequadamente seus designs pois essa é uma das etapas mais importantes Eu diria que pré-visualize seu design e o compartilhe. Essas são etapas importantes porque se você tem um design incrível e impressionante e não o mostra corretamente e as pessoas o veem de uma forma distorcida, e as pessoas o veem de uma forma distorcida como essa visão que acabamos de ver , ele não vai ser muito bem visto. Então, eu diria que, ao mostrá-la, certifique-se de que você esteja bem preparado e que tudo pareça estar no tamanho adequado e não esticado como esta imagem Então, isso é basicamente como pré-visualizar seu protótipo. Obrigado por ouvir, e nos vemos na próxima lição. 18. Como compartilhar e exportar: Portanto, além de visualizar seus protótipos, outra etapa importante é compartilhar e exportar Como mencionamos, essa é uma etapa importante porque é quando você mostra seu trabalho e o compartilha com pessoas, clientes e colegas. Portanto, é importante que você faça isso da maneira certa, faça a exportação certa, você sabe, forneça a eles um link de compartilhamento que eles possam ver corretamente e que não pareça ruim ou não intencional de forma É assim que você pode simplesmente fazer isso. Agora, vamos começar com o compartilhamento, porque é um pouco mais fácil, pois você tem um botão de compartilhamento muito grande, certo. Portanto, há dois tipos diferentes de compartilhamento. Você pode compartilhar um projeto para ser editado, e é por isso que geralmente o Figma tem um arquivo de edição, e há uma guia de edição, como você pode ver esse ícone aqui, e então você tem uma guia de visualização ou visualização Então, ao clicar em Compartilhar aqui, você está compartilhando o arquivo como um arquivo de design. Portanto, tenha cuidado, pois você pode compartilhá-la pensando que está dando para o cliente ver, mas ele verá toda essa visão complicada. Eles ficarão sobrecarregados e verão coisas que talvez não devessem ver OK. Então, esse link aqui é para compartilhá-lo com as pessoas para ver o arquivo ou talvez até se tornem colaboradores ou comentem Você pode ver as configurações aqui, então quem tem acesso. Então, só os convidados. Ou qualquer pessoa, tenha cuidado ao alterar essas configurações. Você pode configurá-lo para que qualquer pessoa no projeto de equipe e você possa ver as pessoas que têm acesso, por exemplo, aqui, eu tenho acesso. Em seguida, eles também mostram algumas outras opções úteis como copiar Dvmodlink. Você pode enviar a alguém apenas Isso significa que, se alguém for desenvolvedor, verá apenas o que é relevante para ele. Eles não veem todas essas opções de design. Você também pode copiar o link de prototipagem ou o link de protótipo Isso é para que eles possam visualizá-lo e você pode publicá-lo na comunidade, obter o código incorporado, mas esses são um pouco mais avançados Mas aqui está tudo o que você precisa. Você pode copiar o link daqui, alterar o acesso ou copiar o Dvmodlink ou a tinta do protótipo Outra coisa a fazer é acessar a guia de visualização, e é isso que eu adoro fazer porque aqui não posso cometer erros. Basta clicar em Compartilhar protótipo. Não é compartilhar como aqui. É especificamente o protótipo do Share. Aqui é onde você pode decidir, ok, copiar o link e são só os convidados ou é qualquer pessoa com um link? E aqui você realmente não pode cometer nenhum erro. Coloque como você pode compartilhar um projeto, mas lembre-se de que você não está compartilhando um arquivo aqui, não o está compartilhando na forma de um arquivo, mas sim como um link da web. É um link baseado na web, então eles precisam ter Internet. Eles precisam ter um navegador pelo qual possam navegar na Internet. Quero dizer, vamos ver como fica, vou compartilhar o protótipo e vou fazer com que seja qualquer um Você também pode ter uma senha, configurar uma senha para ela, copiar o link, colá-lo e ter acesso. Acho que vai funcionar porque eu já estou logado como eu mesmo, então eu tenho acesso e o visualizo com as configurações que foram salvas Verifique se as configurações que você tinha estavam corretas e se você está no fluxo certo. Agora terminamos de compartilhar ou, mais especificamente, compartilhar um link. Agora vamos falar sobre exportação. Agora, existem diferentes maneiras de exportar. Agora, você pode exportar um elemento ou um quadro inteiro. Agora, existem diferentes maneiras de exportar seu trabalho. Agora, você pode exportar um elemento sozinho, exportar um quadro inteiro ou exportar o projeto inteiro, todas as telas. Deixe-me contar como isso funciona. É super simples. Você vai até a guia de design e depois clica em uma moldura ao descer No final, você verá a exportação. Ao clicar nele, você terá algumas opções. Você pode alternar de PNG para JPEG, SVG ou PDF. Você pode escolher qualquer um deles, o legal é que quando você clica nele, você escolhe PNG, você também pode escolher a escala. Você quer que tenha exatamente o mesmo tamanho ou o dobro do tamanho? Você pode ver que o tamanho aqui é 402 por 963. Você pode fazer um ponto X, dois X, quatro X e todas essas opções diferentes, elas basicamente permitem que você o torne muito maior, porque às vezes, quando você exporta algo como imagem, a qualidade não está exatamente lá, não é muito boa. Só por segurança, exporte 1,5, dois X, três X, só para ter certeza de que a qualidade é ótima. E se você tem algo como um design, um logotipo ou algo assim, talvez queira exportá-lo, você pode torná-lo maior. Você pode trazer o design e torná-lo muito maior, ou pode simplesmente exportá-lo daqui como se fosse um design muito maior. Está bem? Como eu disse, esses são os tipos de arquivo com os quais você pode exportá-lo. E com o PDF, você não tem nada. Portanto, com o PDF, você não tem nenhuma opção de dimensionamento. Você também pode ter mais opções aqui se estiver bem versado nessas configurações, mas eu diria que isso é um pouco complexo para você agora, basta acessar a página Resumo da Exportação e colar assim E então você pode simplesmente clicar em OK e, seguida, ele é exportado Você também pode fazer várias configurações de exportação. Você pode dizer: eu quero isso como PNG, mas também como JPEG, um X, quero isso também como PDF E o que é ainda mais legal nisso é que você pode escolher vários quadros Você pode até escolher elementos diferentes. Você pode escolher qualquer coisa, qualquer camada, e exportá-la. E você pode dizer, eu quero exportar tudo isso como JPEx. Então, quando você clica aqui, diz Exportar cinco camadas. Então, ele vai fazer isso por você. Você pode exportar qualquer tipo de arquivo, qualquer tipo de quadro, qualquer tipo de grupo, quadro, seja o que for, é possível e você pode fazê-los juntos. Gosto muito desse recurso porque facilita as coisas. Você não precisa fazer as coisas manualmente todas as vezes. É simplesmente simplificado para você. É assim que você pode saber, especificamente por meio das camadas, que você pode exportar camadas separadamente ou moldar separadamente. Mas também há uma função de exportação aqui. Então, quando você vier aqui, poderá exportar todo o projeto. Então, vamos tentar fazer isso com o Export Project. Assim, podemos mudar as configurações, como eu disse, e isso dá uma pequena prévia aqui. Agora, o lado negativo disso é que vai exportar tudo, incluindo esses pequenos detalhes que talvez não sejam tão importantes. Então você vê aqui quando você clica em Exportar, vai dizer um dos selecionados. Então, você tem certeza de que deseja exportar isso e, eu quero exportá-lo. Vai demorar um pouco, mas eventualmente vai funcionar. É assim que ficaria. Ele exporta tudo como uma tela em uma página, o que obviamente não é o ideal. Não tenho certeza de qual é o caso de uso disso, por que você gostaria de fazer isso, mas não é o ideal. Ninguém pode olhar para isso e dizer: Ah, sim, esse é um aplicativo legal porque não parece um aplicativo. Eu não recomendaria que você fizesse isso. Eu removeria isso daqui. Há outra maneira de fazer isso é passar por aqui e ir para o arquivo. E exporte molduras para PDF. Agora, essa é uma opção muito melhor , porque só vai usar as molduras. Agora é assim que parece. Ele apenas exportou os quadros, mas os exportou separadamente em vez de uma tela inteira, mas eles ainda exportaram os componentes e tudo Portanto, essas foram as principais formas pelas quais você pode exportar seus quadros. Agora, é claro, existem outras formas mais avançadas de fazer isso. Simples é sempre melhor. Portanto, tente não complicar demais esse processo para você e para Apenas certifique-se de exportar seus designs de uma forma que faça com que tenham uma boa aparência e sejam fáceis de visualizar, e isso é tudo que importa. Muito obrigado por ouvir, e nos vemos na próxima vez. 19. Projeto do curso: crie seu próprio design de UI no Figma: E agora é hora de você criar seu próprio design de interface de usuário. Para este projeto de aula, você deverá criar uma interface de usuário Figma muito simples usando as técnicas que você aprendeu ao longo deste curso Você pode criar um aplicativo móvel uma página de destino ou qualquer interface simples que desejar. Vamos começar criando primeiro um quadro e uma estrutura e, em seguida, começar a adicionar texto, algumas cores e, em seguida, criar alguns botões. Certifique-se de prestar atenção ao espaçamento e ao layout geral para garantir que o design pareça moderno e limpo Em seguida, use o Auto Layout e os componentes para organizar seu arquivo de design de forma um pouco melhor e mais eficiente e certifique-se de criar pelo menos duas telas conectadas para poder criar um protótipo com algumas funcionalidades básicas Depois que seu projeto estiver concluído, exporte suas telas como PDFs, ou você pode simplesmente compartilhar os links de exportação, apenas certifique-se de que eles estejam visíveis publicamente nas configurações e prossiga e compartilhe-os na galeria do projeto Você também pode adicionar uma breve explicação para falar sobre seu design, explicar o que você fez e talvez defender algumas de suas opções de design. Este projeto trata praticar o fluxo de trabalho para iniciantes Figma, desde a ideia até a criação de um protótipo interativo Então vá em frente, experimente coisas, experimente. Não tenha medo de errar e se divertir com isso. 20. Parabéns! E depois?: Parabéns por terminar a aula. Agora você aprendeu os fundamentos do Figma, desde a navegação na interface e a criação de layouts básicos até a criação de componentes e layouts básicos até a criação componentes Isso já é um grande passo no mundo do design de UI e UX. A coisa mais importante a fazer agora é continuar praticando. Tente recriar interfaces que você goste, experimentar diferentes layouts e estilos e simplesmente criar designs para continuar trabalhando em suas habilidades Você ainda não o fez, por favor, envie seus próprios projetos para a Galeria de Projetos para que eu possa ver o que você está fazendo. Eu realmente adoraria ver o que vocês inventaram. Como sempre, se você gostou desta aula, sinta-se à vontade para nos deixar um comentário. Isso realmente nos ajuda a melhorar e criar cursos ainda melhores para você. Obrigado novamente por participar e nos vemos no próximo curso.