Aprenda o Figma: fundamentos do design de interface - Design de UI/UX

1. Introdução ao curso: Se você quer se tornar um designer de UI/UX, você está no lugar perfeito. Este curso completo irá ensinar-lhe todos os itens essenciais com tutoriais bem organizados e fáceis de seguir. Oi, meu nome é Arash e sou designer de UI/UX. Juntos, você e eu vamos aprender como se tornar um designer de interface de usuário usando o software Figma. Este curso foi projetado para pessoas completamente novas design UI/UX ou digamos design em geral. Em primeiro lugar, vamos aprender sobre os conceitos básicos de design e elementos de interface e, em seguida, aprenderemos sobre Figma e todos os seus segredos escondidos juntos, então você aprenderá a criar um wireframe simples. A partir daí, você aprenderá como configurar seu guia de estilo e como aplicar suas cores apropriadamente ao seu design. Você também vai aprender sobre todos os princípios da aplicação móvel e web design e, em seguida, vamos projetar um aplicativo financeiro juntos e eu vou compartilhar com você todas as técnicas necessárias em segredos para projetar um aplicativo de classe mundial. Além disso, você aprenderá sobre ambas as micro interações simples e avançadas, além disso, há uma seção dedicada de web design onde projetamos uma página de aprendizagem moderna completa juntos. Aqui você aprenderá o essencial do web design, como grades de layout, interações e muito mais. Também falaremos sobre marcações e como você pode criar seu próprio portfólio on-line sem escrever uma única linha de código. Além disso, você aprenderá sobre modelagem 3D e criação de cenas de realidade aumentada. Por último, mas não menos importante, você aprenderá a iniciar seu próprio negócio e obter seu primeiro cliente como designer de UI/UX. Então, durante essas pontuações, vamos projetar wireframe e protótipo um aplicativo móvel de finanças para desenvolver suas habilidades de design e dominar todas as ferramentas necessárias. Além disso, você terá acesso a dois novos kits de interface valor de mais de US$3.000 e poderá usá-los em seus projetos comerciais. Espero que você esteja pronto para aprender novas habilidades e se tornar um designer de interface de usuário. Vejo-te na aula. 2. Introdução: Olá a todos. Bem-vindo ao primeiro capítulo deste curso. Nesta seção, vamos falar sobre as diferenças entre o design de UI e UX e a estrutura do curso que você pode entender como o curso é organizado para que você possa acompanhá-lo corretamente. Por último, mas não menos importante, vamos falar sobre as ferramentas e requisitos que você precisa saber para prosseguir o curso. Sem mais delongas, vamos começar. Primeiro de tudo, vou falar sobre as diferenças entre a interface do usuário e o design do UX. Embora ambos os elementos sejam cruciais para um produto e trabalhem em conjunto, suas funções são totalmente diferentes. O design de UX é um campo mais técnico e analítico. No entanto, o design da interface do usuário refere-se ao design gráfico com responsabilidades mais complexas. Deixe-me dar-lhe um exemplo. Se você considerar um produto como um carro, o chassi é o código que lhe dá uma estrutura clara. As outras partes, como portas, filtro de combustível, etc., representam o design UX que permite que o carro funcione corretamente. Por outro lado, o design da interface do usuário representa a aparência do carro, seus sensores, etc. Em outras palavras, UX, que significa experiência do usuário, é sobre como um produto deve funcionar, e UI, que significa interface do usuário, é sobre como um produto deve olhar. Você, como designer de produtos, deve saber como esses dois termos funcionam juntos e como distinguir entre eles. Por exemplo, você deve saber quais são as responsabilidades de um designer de UX e, por outro lado, quais são as responsabilidades de um designer de interface do usuário. Como você pode ver nas fotos, temos duas telas diferentes. A esquerda nos mostra como o produto deve funcionar. Por exemplo, suponha que você tenha uma tela com dois botões e dois campos de texto, a UX nos mostra como esses botões devem interagir com o usuário, e a imagem correta é tudo sobre interface do usuário e ele nos mostra como o produto deve Olhe. Por exemplo, aqui temos um botão e um quadrado. O designer da interface do usuário decide o tamanho desse padrão ou qual cor é adequada para esse quadrado. Estas são as responsabilidades do designer da interface do usuário. Muito obrigado por assistir este vídeo e eu vou vê-lo no próximo vídeo. 3. Estrutura do curso: Oi, todo mundo. Neste vídeo, vamos falar sobre a estrutura do curso. Na verdade, você pode dividir o curso em duas seções principais, a parte teórica e a parte prática. A parte teórica cria 10% de todo o curso, e a parte prática forma 90% do conteúdo do curso. Em vez de nos concentrarmos em teorias, vamos nos concentrar em praticar as habilidades que você aprende trabalhando em diferentes tipos de projetos. Na parte teórica, você aprenderá sobre conceitos básicos de design, elementos de interface do usuário, idéias de negócios, etc Na parte prática, vamos projetar um aplicativo móvel completo do zero. Você também aprenderá sobre os fundamentos do web design projetando uma página de aprendizado moderna, também falamos sobre enquadramento de fios, modelagem 3D, design de logotipo e muito mais. Se você é um iniciante completo, eu recomendo assistir a parte teórica primeiro e depois prosseguir com o curso. Por outro lado, você pode pular a parte teórica e pular para a criação de um projeto. Muito bem, pessoal, muito obrigado por assistirem este vídeo e eu verei vocês no próximo vídeo. 4. Ferramentas: Olá a todos. Neste vídeo, vamos falar sobre as ferramentas necessárias para concluir este curso. Neste curso, vamos usar diferentes ferramentas de design gráfico para projetar interfaces de usuário de classe mundial juntas. O software principal que vamos usar é chamado Figma, que está disponível para macOS e Windows. Você pode até usá-lo em seu navegador sem instalação. Além disso, você não precisa pagar por isso, é totalmente gratuito. As outras ferramentas que você aprenderá são Vectary e Adobe Photoshop. Nós também falaremos sobre sites úteis como Dribble, Behance, etc. Se você não tem nenhum dos softwares acima mencionados, certifique-se de instalá-los antes de iniciar o curso para vê-lo lá. 5. Introdução a básico do design: Olá a todos. Bem-vindos de volta a outra seção do placar. Neste capítulo, vamos estar falando sobre layouts, iconografia, tipografia, cores, composição, e muito mais. Se você quiser se tornar uma interface profissional e excelente, designer de UX, você precisa começar com os conceitos básicos de design. Agora que você sabe a importância de conhecer o básico do design, vamos começar este capítulo. 6. Layout: Olá a todos. Neste vídeo, vamos falar sobre layouts em design. Quando se trata de design UX da interface do usuário, a maneira como mostramos as informações em um aplicativo ou site é muito importante. Na verdade, não há uma maneira certa específica de criar sua própria composição. Assim, você pode facilmente criar um layout baseado em sua própria necessidade, desde que seja consistente e compreensível para os usuários. Como você pode ver nas fotos à direita, ambas as telas são bem projetadas. Embora o espaçamento seja diferente, a composição é absolutamente clara e consistente. Você precisa prestar muita atenção à consistência enquanto estiver projetando uma interface de usuário. Independentemente do tipo de plataformas para as quais você está projetando, as mesmas regras se aplicam a todas elas. Agora vamos verificar essas fotos. Como você pode ver na imagem à esquerda, as distâncias são bastante consistentes. Por exemplo, se você observar a distância entre a imagem do perfil e a parte superior da tela, poderá perceber que o valor é de 50 pixels e também a distância entre a mesma imagem do perfil e o campo de texto à direita sob que é novamente 50 pixels. Como você pode ver, o layout deste design é bastante claro, e a razão disso é devido à consistência do espaçamento. Nas próximas palestras, falaremos também sobre espaçamento e a importância disso no design. Agora, se você olhar para a imagem certa, você pode perceber que o design também é claro nesse layout. No entanto, a única diferença são as cores e o espaçamento. Mas como você deve ter notado, o espaçamento é novamente consistente. Muito obrigado por assistir este vídeo. Vejo-te no próximo vídeo. 7. Hierarquia visual: Olá a todos. Neste vídeo, vamos falar de hierarquia visual. Hierarquia visual é sobre como olhamos para os projetos. Isso soa estranho? Vamos colocar de outra maneira. Nós, como designers, devemos nos colocar no lugar dos usuários, a fim de perceber como eles vêem nossos projetos. O conteúdo em qualquer layout de página digital seguirá uma hierarquia específica. Por exemplo, os menus vão para a parte superior, inferior, esquerda ou direita da tela, ou uma combinação destes. Os cabeçalhos aparecem acima pelo texto. Em outras palavras, a hierarquia é uma maneira simples de manter organizada da maioria para o menos importante. Lembre-se de que os usuários definem a hierarquia de qualquer aplicativo ou site. O item que primeiro chama a atenção dos usuários está no topo da hierarquia. As especificações visuais que o designer pode utilizar para influenciar a compreensão dos usuários sobre as informações são tamanho, quanto maior o elemento, mais atenção ele atrairá. Se você está familiarizado com HTML e processo de desenvolvimento web, você pode saber que temos seis tipos de cabeçalhos de H1 para H6. H1 é o maior cabeçalho e H6 é o menor. Quando queremos ter tanta atenção, vamos usar H1. Por exemplo, suponha que queremos chamar a atenção dos usuários para uma seção específica ou um item específico. Nesse caso, usaremos o cabeçalho maior ou, por outro lado, às vezes não queremos ter tanta atenção a uma seção ou conteúdo específico. Nesse caso, podemos usar o cabeçalho menor, então o tamanho é tão importante. O próximo item é cor. As cores brilhantes são mais visíveis do que as silenciadas. Se você não tem informações suficientes sobre cores, você não precisa se preocupar com isso, porque nas próximas lições, cobriremos todas as informações necessárias sobre como escolher a cor certa em seu design. O próximo item é o alinhamento. Um elemento com um alinhamento diferente dos outros atrairá mais atenção. O que isso significa? Suponha que você tenha um layout de, digamos, quatro vídeos diferentes ou quatro fotos diferentes. Se você alinhar apenas um desses vídeos ou fotos de forma diferente, ele chamará mais atenção para ele. Na verdade, nesse caso, o usuário pode perceber que algo é diferente. O próximo item é o contraste. Cores fortemente contrastantes chamarão a atenção facilmente. O contraste é um tópico muito importante no design da interface do usuário. Falaremos profundamente sobre o contraste nas próximas lições. O próximo item é proximidade. Elementos que são colocados juntos parecem mais relacionados e isso é verdade. Se você olhar para as fotos do lado direito, você pode ver que temos duas telas diferentes. Vamos focar na tela esquerda. Como você pode ver, temos duas seções diferentes, novas promoções e novas histórias. Você pode perceber que os elementos em ambas as seções são colocados estreitamente juntos para que os usuários possam facilmente entender que eles estão relacionados juntos? O próximo item é a repetição. Estilos de repetição podem indicar que o conteúdo está relacionado. O que isso significa? Vamos ver as fotos à direita. Você pode ver que temos quatro quadrados, temos três círculos, para que o usuário possa facilmente reconhecer a relação entre esses elementos. O próximo item é espaço em branco, que é outro termo importante no design UI/UX. Mais espaço entre os elementos chamará mais atenção para eles. Vamos olhar para as imagens à direita, mas desta vez precisamos distinguir entre a tela esquerda e a tela direita. Como você pode ver na tela esquerda, temos espaço suficiente, ou digamos, espaço em branco suficiente entre nossos elementos e nossas seções para que os usuários possam facilmente percorrer a interface do usuário. No entanto, na tela direita, você pode ver que todos os elementos estão muito próximos e não há espaço em branco suficiente entre todos os elementos nesse tipo de layout. Muito obrigado por assistir este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 8. Noise visual: Olá a todos. Neste vídeo, vamos falar de ruído visual no design. ruído visual, como você pode adivinhar a partir de seu título, é tudo sobre uma tela ou parte de um produto digital que tem tanta informação e muitos elementos nele. Quando você está projetando um aplicativo ou um site, você precisa prestar muita atenção aos detalhes. Porque no final do dia, queremos projetar uma tela que seja fácil de usar e fácil de assistir. Certifique-se de eliminar todos os elementos desnecessários ou informações da tela. Se você não tiver certeza se seu design tem ruído visual ou não, é recomendável solicitar feedback dos usuários. Se você olhar para as fotos do lado direito, você pode ver que temos duas telas diferentes. Na tela esquerda, não há ruído visual, e é ótimo em termos de design da interface do usuário. Por outro lado, na tela direita, há muito ruído visual. Como você pode ver, há tantos carrapatos no topo e, em seguida, alguns itens, que poderiam ser vídeos ou fotos, então novamente, alguns vídeos, e depois disso algumas histórias, e você pode reconhecer que não há espaço em branco suficiente entre esses elementos. Muito obrigado por assistir este vídeo, eu vou vê-lo no próximo vídeo. 9. Iconografia: Oi. Neste vídeo, vamos falar sobre iconografia no design. Iconografia é uma linguagem visual usada para demonstrar aspectos, conteúdo ou funcionalidade. Os ícones são feitos para ser simples e claros, elementos visuais que são reconhecíveis imediatamente. Você não precisa redesenhar ícones bem conhecidos, como ícone Início, ícone Pesquisar, etc, ou digamos, não reinventar a roda. Você pode obter acesso a quase todos os tipos de ícones em sites gratuitamente ou a custos razoáveis. Mas e se você precisar dele para projetar alguns ícones especificamente para o seu projeto? Nesse caso, você deve projetar ícones que estão em harmonia com seu design e outros ícones. Tenha em mente que os ícones precisam ser entendidos facilmente pelos usuários, então certifique-se de mostrar consistência em seu design. 10. tipografia: Oi. Neste vídeo, vamos falar sobre tipografia. O que é tipografia? tipografia transforma a linguagem em um elemento visual decorado. tipografia é uma das partes mais importantes do design UI/UX, por isso vale a pena aprender mais sobre isso. Quando você está projetando um aplicativo ou um site, limite o número de fontes e tamanhos que você usa para manter seu design simples. Comece com duas fontes no máximo; uma para os cabeçalhos e outra para os corpos. Você pode usar fontes gratuitas ou pagas em seus projetos, mas eu recomendo o uso de fontes gratuitas. Se você quiser usar fontes pagas, verifique cuidadosamente a licença. Você deve informar seus clientes que eles precisam pagar mais pelo uso de fontes pagas. Agora, se você olhar para o lado direito da tela, você pode ver que eles classificaram a base de tipografia para você. Vamos verificar passo a passo. Bem no topo, temos propriedades. Cada linha de texto em qualquer programa tem uma linha base, como você pode ver, é indicado aqui com a linha azul e também tem o espaçamento entre letras que você pode modificá-lo em seu design. Claro, há mais propriedades relacionadas à tipografia, no entanto, para preceder esses escores, basta conhecer essas duas propriedades. Agora vamos nos concentrar na comparação de espaçamento de letras. À esquerda, você pode ver que temos o espaçamento padrão, mas à direita, modifico o espaçamento dessas letras dependendo do tipo de projeto em que você está trabalhando, você pode modificar o espaçamento entre letras como quiser. Agora vamos falar sobre o peso de cada fonte. A maioria das fontes tem pelo menos peso de impressão 3D, mas algumas delas têm mais. Por exemplo, uma fonte pode ter seis pesos diferentes, como você pode ver em sua tela, temos aqui da luz a negrito. Por último, mas não menos importante, a classificação das fontes. Como você pode ver, temos duas classificações diferentes para fontes: o serif, que é o esquerdo na imagem, e o sans serif, que é o direito na imagem. Qual é a diferença? Com certeza você pode distinguir entre eles, mas deixe-me explicar para você, a fim de memorizar a regra de serif e sans serif. Na verdade, fontes serif têm algum tipo de linha plana no topo deles e também a parte inferior deles ou você pode dizer que eles têm pés. Por outro lado, as fontes sans serif não têm esse tipo de linhas. Sans em inglês e francês significa sem, então sans serif significa sem serif. Você como designer é responsável por escolher o melhor peso de fontes e também a melhor classificação dependendo do tipo de projeto em que você está trabalhando. Muito obrigado por assistir este vídeo, eu vou vê-lo no próximo vídeo. 11. Contrates das cores: Olá a todos. Neste vídeo, vamos falar sobre contraste de cores, que é um tópico muito importante quando se trata de design de interface do usuário. Aplicar cores efetivamente é uma habilidade que todos os que trabalham com composições visuais devem ter. Você como um designer de interface do usuário, precisa saber como usar cores em seus projetos. Quando se trata de aplicar cores, legibilidade e legibilidade são os principais fatores. Pesquisadores mostraram que cores vibrantes permitem contraste suficiente, ajudando a aumentar a legibilidade e legibilidade. Por favor, leve em consideração que muito contraste de cor pode causar dificuldade na leitura. Eu recomendo que os designers criem um nível médio de contraste e, para destacar elementos, eles podem usar cores de alto contraste. Você também pode usar sites para fornecer uma proporção ao comparar duas cores para ver se há contraste suficiente ou não. Se você olhar para os exemplos à direita, temos seis cores diferentes. Como você pode ver, os quatro primeiros são aceitáveis e têm contraste suficiente, mas os outros não são legíveis. Quando estamos projetando uma interface de usuário, precisamos prestar muita atenção às cores porque às vezes, você como designer, quer ser o mais criativo possível. No entanto, a criatividade deve vir após legibilidade e legibilidade. 12. Paleta de cores: Olá a todos. Nesta lição, vamos falar sobre a Paleta de Cores. Criar um esquema de cores para o produto pode parecer uma tarefa difícil, especialmente se você é um iniciante. No entanto, na realidade, não é tão complicado quanto muitos designers pensam. Qual é o esquema de cores? Seu esquema de cores é uma mistura de cores usadas em sua interface de usuário. Quase todos os esquemas de cores contêm os seguintes grupos de cores. Cores primárias, cores secundárias, cores de acento, nêutrons, cores semânticas. Quais são as cores primárias e secundárias? As cores primárias e secundárias são as cores base de sua interface de usuário. As cores que são usadas com mais freqüência no design da interface do usuário são chamadas de cores primárias. A maioria dos designers geralmente escolhe cores da marca como cores primárias. Na verdade, recomenda-se não ter mais de três cores primárias. Opcionalmente, você pode usar cores secundárias para distinguir seus produtos e criar designs de interface do usuário mais interessantes. Mas como escolher as cores corretamente? Quando você está trabalhando com cores, você não deve criar uma combinação de cores aleatórias. Porque o resultado não seria o que você espera. Para entender como trabalhar com cores, primeiro, você precisa saber o que a cor irá facilitar e como ela funciona. Aqui estão combinações de cores importantes que você precisa saber. cortesia, que são duas cores que estão em lados opostos da roda de cores. O próximo é monocromático, que são três tons de tons e os adolescentes são uma cor de base. O último é análogo, que são três cores que estão lado a lado na roda de cores. Se você olhar para o lado direito da imagem, você pode ver que temos uma roda de cores aqui. Como pode ver, temos monocromático. Por exemplo, se você olhar para o vermelho, temos três tons diferentes ou digamos adolescentes de uma cor de base, e também temos cortesia. Por exemplo, aqui temos roxo e amarelo, que estão em lados opostos da roda de cores. Então a combinação dessas cores é ótima. 13. Espaçamento: Olá a todos. Bem-vindos de volta a outra lição deste curso. Neste vídeo, vamos falar sobre espaçamento no design. A consistência desempenha um papel fundamental no design da interface do usuário. Quando você está projetando, você precisa medir tudo e mantê-lo consistente. Como designer, o espaçamento depende de você, mas depois de configurá-lo, você precisa usar os mesmos padrões de espaçamento em seus designs. Por exemplo, se você definir o espaçamento entre o cabeçalho e o corpo leva para oito pixels, você deve sempre usar o mesmo espaçamento em todo o projeto. Como você pode ver na imagem, todo o espaçamento foi medido com precisão e torna o design mais claro. Por exemplo, se você olhar para a imagem, você pode ver que temos 50 pixels do topo para o novo título de imagens e, em seguida, oito pixels de novas imagens para o topo do subtítulo e continua. Para manter seu design claro, certifique-se de usar padrões de espaçamento consistentes em todo o projeto. 14. Composição: Olá a todos. Neste vídeo, vamos falar de composição em design. Qual é a proporção dourada? A proporção dourada é uma proporção matemática entre os elementos de diferentes tamanhos que se pensa ser a proporção mais esteticamente agradável para os olhos humanos. A proporção dourada é igual 1:1 .618 e geralmente é ilustrada com espirais em forma de concha. Este número foi usado na criação de proporções para arquitetura, pinturas, fotografia, design, etc Mas como usar a proporção dourada em seu design? Se você tiver uma tela com a largura de 1.200 pixels, você precisa dividi-la por 1.618 e o resultado será 741.6. Agora, podemos dizer 1.200 pixels menos 741 é igual a 459, então temos duas seções com a largura de 741 pixels e 459 pixels. Como você pode ver no lado direito da tela aqui, temos uma captura de tela do site médio. Você pode ver como ele foi projetado com base na proporção de ouro, que ele possa chamar a atenção do usuário para o lugar certo na hora certa? 15. Guia de design: Neste vídeo, vamos falar sobre o Guia de Design. O que é um guia de design? Um guia de design é um sistema que pode ajudá-lo a manter seu design consistente. Ele também pode acelerar seu processo de design. Os exemplos que você está observando são apenas alguns componentes que podem ser usados no guia de design. Há muitas coisas que podem ser incluídas em seu guia de design, como elementos de interface do usuário, tipografia, iconografia, dimensionamento e espaçamento, paletas de cores, etc Ter um guia de design torna sua vida muito, muito mais fácil. 16. Fontes consistentes: Olá a todos. Nesta lição, vamos falar sobre fontes em design. Como designer, você sempre trabalha com fontes diferentes, então você precisa saber como usá-las corretamente. Como foi mencionado na seção de tipografia, recomenda-se trabalhar com duas fontes diferentes no máximo para manter a interface do usuário simples. Quais são as melhores fontes para design de interface do usuário? Número 1, São Francisco, é melhor para sites modernos e aplicativos móveis. Número 2, Open Sans, é melhor para sites e aplicativos móveis. Número 3, Montserrat, é melhor para sites mínimos e aplicativos móveis. Número 4, Proxima Nova, é ótimo para sites modernos centrados em conteúdo e aplicativos móveis. Por último, mas não menos importante, Roboto, é melhor para sites modernos e aplicativos móveis também. 17. Cores consistentes: Ei, todo mundo. Neste vídeo, vamos falar de cores. Aplicar cores aos elementos da interface do usuário é uma das partes mais cruciais do processo de design da interface do usuário. Você se lembra do que estava desempenhando um papel fundamental no design da interface do usuário? Você está certo, consistência. Então você precisa manter suas cores consistentes também. Por exemplo, se você aplicar azul a títulos em uma página, será necessário aplicar a mesma cor a títulos em outras páginas. Ou se você aplicar um vermelho a um botão precioso, você deve usar a mesma cor para quaisquer outros botões preciosos em outras páginas. É por isso que precisamos de um guia de design e de um guia de estilo. Se você olhar para a imagem à sua direita, você pode ver que usamos uma cor preta específica para títulos, e usamos uma cor específica para nossos botões, etc. Portanto, é muito importante manter suas cores consistentes. 18. Ícones consistentes: Olá, todo mundo. Neste vídeo, vamos falar de ícones em design. Você pode pensar que trabalhar com ícones é uma parte fácil do design da interface do usuário. No entanto, se você não prestar atenção aos detalhes, você não obterá um resultado apropriado. Aqui estão alguns pontos importantes que você precisa cuidar. Número 1, teste de escalabilidade. verifique se seus ícones ainda podem ser reconhecidos em tamanhos pequenos, como 15 por 15 pixels. Número 2, devidamente dimensionado. O tamanho de destino recomendado para objetos de tela sensível ao toque é de 7 a 10 milímetros. Lembre-se também de adicionar preenchimento entre ícones para evitar toques incorretos. Número 3, consistência interna. Use o mesmo esquema de cores para todos os ícones e também os mesmos atributos de estilo, como o tamanho das bordas. Número 4, alinhamento perfeito. Sempre tente ter um alinhamento perfeito na iconografia, mas às vezes, porque você tem ícones com tamanhos diferentes, você precisa equilibrá-los sozinho. Se você olhar para a imagem à sua direita, você pode ver que temos dois grupos diferentes de ícones. No grupo esquerdo, você pode ver que temos iconografia consistente porque usamos apenas ícones de contorno. Mas, por outro lado, temos iconografia inconsistente porque usamos ícones de contorno e sólidos ao mesmo tempo, o que não é recomendado. 19. Elementos de interface de usuário consistentes: Oi, todo mundo. Neste vídeo, vamos falar sobre consistência de elementos de interface do usuário. Uma das coisas com as quais você sempre trabalha enquanto cria uma interface de usuário é um elemento de interface do usuário. Quais são os elementos da interface do usuário? Botões, cartões, campos de texto, controles deslizantes, diálogos, gráficos, passos, tabelas, controles de seleção, menus, lanchonetes, etc. Como você pode ver na foto, eu escolhi apenas alguns deles para você porque, certamente, eu não poderia colocar todos eles aqui. No entanto, você vai aprender sobre quase todos eles no capítulo elementos da interface do usuário. 20. Recursos de fonte: Ei, todo mundo. Neste vídeo, vamos falar sobre recursos de fonte. Às vezes, escolher as fontes certas para seus projetos, pode ser complicado e demorado, então, nesta parte, você vai saber sobre os melhores recursos on-line para obter suas fontes facilmente. O primeiro site é chamado Google Fonts, que é tão famoso e você pode encontrar fontes gratuitas lá. O segundo site é chamado myFonts, e você pode encontrar fontes gratuitas e pagas lá. Por último, mas não menos importante, você pode conferir o site do Adobe Fonts, que você pode encontrar fontes pagas lá. Se você estiver tendo problemas com o emparelhamento de fontes, você também pode usar Typewolf ou FontPair. 21. Recursos de cores: Olá a todos. Nesta lição, vamos falar sobre recursos de cores. Agora é hora de procurar nossas cores para usá-las em nossos projetos. Na maioria das vezes, encontrar boas cores é uma tarefa difícil para os designers de interface do usuário, especialmente se você é um iniciante. Aqui estão alguns recursos absolutamente úteis para encontrar cores. Número 1, Color Hunt, número 2, Adobe Color, que é tão útil a propósito, número 3, eu não sei como pronunciar, mas eu acho que é Coolers ou Coolers, número 4, WebGradients, que é outro bom site para encontrar gradientes se você estiver procurando por eles. Certifique-se de gastar tempo suficiente para encontrar a melhor paleta de cores possível para seus projetos. 22. Recursos de ícones: Ei, todo mundo. Neste vídeo, vamos falar sobre recursos de ícones para o seu projeto de design. Como mencionado anteriormente, iconografia é uma parte essencial do processo de design da interface do usuário, e é tão importante saber onde você pode encontrar envolvente, e um ícones padrão. Aqui estão alguns recursos úteis para encontrar ícones. Número 1, Ícone plano que você pode encontrar ícones pagos ou gratuitos lá. Número 2, IconFinder, que é outro bom site para encontrar ícones. Por último, mas não menos importante, Nucleo, que é um aplicativo, e reúne todos os ícones para você em um só lugar. Lembre-se que você deve usar os ícones que são fáceis de reconhecer pelos usuários, então tome seu tempo, e confira todos os ícones disponíveis que você pode querer usar em seu projeto. 23. Introdução à Figma: Oi, todo mundo. Bem-vindo de volta a outra seção deste curso. Nesta seção, vamos falar sobre Figma. O que é Figma? Figma é uma ferramenta de design de interface que é executada no navegador. Ele oferece todas as ferramentas necessárias para projetar uma interface de usuário de classe mundial. Mas na verdade é muito mais do que isso devido ao fato de que Figma, em sua natureza, é uma ferramenta sempre online, permite a colaboração ao vivo e em tempo real, que é uma característica fantástica. Embora o Figma seja baseado em navegador, existem versões de área de trabalho para Windows e Mac OS. Vou mostrar-lhe como você pode usar as versões de navegador e desktop no próximo vídeo. Ao contrário de outras ferramentas como Sketch, Figma é livre para usar, a menos que você precise criar mais de três projetos. Você pode criar páginas e arquivos ilimitados na versão gratuita. Muito bem, pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 24. Requisitos de figma: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vou mostrar como você pode criar uma conta no Figma, a fim de usá-la em nossos projetos. Como mencionei antes, Figma é livre para usar. No entanto, se você quiser criar mais de três projetos, você precisa obter a conta profissional que não é necessária para este curso. Mas a boa notícia é que se você é um estudante e você está matriculado em uma universidade ou uma escola você sempre pode criar uma conta Figma para um aluno e verificar seu status de estudante e usá-lo gratuitamente. Isso é fantástico. Mas se você não é um estudante, não há nenhum problema. Você ainda pode usar todos os recursos do Figma com a conta gratuita e você ainda pode criar páginas e arquivos ilimitados. Como você pode criar uma conta? É tão simples. Se você abrir o site Figma que é figma.com, você pode clicar em, “Cadastre-se”. Aqui você pode escolher se deseja se inscrever com a Conta do Google ou com seu endereço de e-mail e definir uma nova senha para sua conta. É totalmente com você. Você também pode fazer login em sua conta com sua conta do Google ou com seu e-mail e senha que você definiu. Deixe-me fazer login com minha conta do Google. Lá vamos nós. Como você pode ver, sempre que você criar uma conta você já tem alguns projetos aqui que é chamado Figma Basics, Prototipagem em Figma e Wireframing em Figma. Se eu abrir este, você pode ver alguns tutoriais simples e algumas noções básicas sobre Figma e como você poderia usar isso. Você não precisa se preocupar com isso porque vamos cobrir todos os aspectos da Figma na próxima série de vídeos. Como você pode ver à sua esquerda você tem alguns menus. A primeira é a sua conta ou o seu perfil. Se você clicar em que você pode ver que é o seu nome. Você pode alterar sua imagem de perfil. Aqui estão algumas opções, tokens de acesso pessoal e não precisamos usar isso por enquanto. Se você quiser excluir sua conta, você pode usar esta opção. A próxima opção é Pesquisar. Você pode pesquisar através de seus projetos e seus arquivos. Então você tem Recente que mostra os projetos e arquivos recentes que você abriu. Então temos Plugins que lhe dá a opção de instalar alguns plug-ins que é tão importante. Falamos sobre isso mais tarde. Então temos Rascunhos. Você pode criar alguns rascunhos e também você excluiu arquivos. Você também pode criar uma nova equipe lá se quiser trabalhar em uma equipe. Além disso, você pode importar seu arquivo de esboço. É incrível. Figma converte automaticamente seu arquivo de esboço para arquivo Figma e você pode usá-lo perfeitamente. Neste momento, estamos usando Figma em nosso navegador. No entanto, como eu mencionei antes, você sempre pode instalar o Figma em seu sistema. Como você pode fazer isso? É tão simples. Se você ir em frente para figma.com/downloads ou se eu ir em frente e sair aqui, é a página de aprendizagem e você pode ver os recursos e se você mouse sobre este link você pode ver o link de downloads ali. Vou clicar nisso. Aqui temos os downloads Figma que nos permite baixar alguns recursos. O primeiro é o aplicativo de desktop. Aqui pode encontrar aplicativo de desktop para macOS ou aplicativo de desktop para Windows. Dependendo do seu sistema operacional, você pode baixá-lo e instalá-lo. Então temos Live Device Preview. É uma ótima aplicação. Você pode baixá-lo da App Store ou Google Play e, em seguida, você pode visualizar seu design instantaneamente. Por último, mas não menos importante, temos instaladores de fontes. O que é isso? Quando você está usando o Figma em seu navegador, Figma não pode obter acesso às suas fontes locais, o que não é bom porque na maioria das vezes você precisa usar suas fontes locais. Para corrigir esse problema, você pode baixar o instalador de fontes para Windows ou macOS, então você pode instalá-lo. Depois disso, você pode obter acesso às suas fontes locais em seu navegador, o que é bastante incrível. Embora você possa obter acesso a suas fontes locais instalando este instalador de fontes, eu recomendo que você use a versão desktop do Figma porque ele realmente acelera seu processo de design. Pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado. No próximo vídeo, vou falar sobre o ambiente de Figma e como você poderia usá-lo simplesmente. Vejo você então. 25. Figma: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre o ambiente de Figma. Como você pode ver, agora, estou usando Figma no meu navegador. No entanto, vou em frente e abrir versão desktop, a fim de acelerar meu processo de design. Então deixe-me abrir o aplicativo Figma, lá vamos nós. Esta é a minha conta principal, como você pode ver, e esta é a versão desktop que podemos usar facilmente. Então, primeiro de tudo, vamos em frente e criar um novo arquivo. Aqui, como podem ver, podemos dividir o ambiente da Figma em quatro seções diferentes. A barra de ferramentas, que está bem no topo, e consiste em todas as ferramentas necessárias que você precisa para projetar uma interface de usuário de classe mundial. Como você pode ver aqui você tem um menu e aqui você tem algum sub-menu como arquivo, edição, visualização, objeto, vetor, texto, organizar, etc Nós vamos cobrir todas essas opções durante este curso. Aqui você tem algumas ferramentas, como mover ferramentas, escala, e também a ferramenta de moldura e fatia. Em seguida, você tem a ferramenta objetos ou formas e também a ferramenta caneta. Então temos o texto e os comentários. direita à sua esquerda, temos o painel de camadas que lista todas as suas camadas e também todos os seus ativos, respectivamente. Como você pode ver, não há nenhum componente aqui ainda porque nós não criamos nenhum componente até agora. No entanto, nas futuras lições, aprenderemos como usar essas seções também. Então, à sua direita, temos o inspetor, que consiste em três partes diferentes. Como podem ver, temos design, protótipo e código. Então, se eu clicar em um “A”, no meu teclado, posso criar uma prancheta para iniciar meu processo de design. Por exemplo, eu posso escolher o telefone e aqui eu vou escolher o iPhone 11 Pro ou X. Como você pode ver, você tem a dimensão bem ali, eu vou clicar sobre isso, e aqui, você tem sua prancheta e você pode ver o nome na camada da lista. Se você clicar duas vezes sobre isso, você pode alterá-lo para o que quiser. Por exemplo, digamos em casa, muito bom, e eu posso facilmente escolher a forma do retângulo, e lá vamos nós. Temos outra camada logo abaixo desta prancheta. Aqui no seu lado direito, na seção de inspetores, você tem opções diferentes. Por exemplo, na seção de design, você tem alinhamentos, você tem uma dimensão, e também a localização, o posicionamento da sua forma. Você também tem a seção de restrições, e vamos mergulhar em cada seção separadamente na próxima série de vídeos. Então não se preocupe se você não entender quais são as restrições ou basicamente o que elas fazem. Por exemplo, aqui temos camada e você pode ajustar a opacidade da sua camada e seu modo. Aqui você tem preenchimento para mudar a cor. Como você pode ver, temos traço, temos efeitos para adicionar algumas sombras, e então temos a exportação. Para prototipagem, você pode ir para a seção protótipo. Aqui temos diferentes opções, bem como que vamos abordar na seção de prototipagem deste curso. Você também tem a seção de código, e é tão útil se você é um desenvolvedor ou você quer entregar as propriedades do seu design para o seu desenvolvedor web ou até mesmo seu desenvolvedor de aplicativos porque você pode facilmente exportar suas propriedades no código, por exemplo, para iOS, temos propriedades variáveis e diferentes. Isso é muito legal. Por último, mas não menos importante, a quarta seção é a Canvas, que está no meio da Figma. Aqui você vai colocar todos os seus desenhos e todas as suas pranchetas. Você também tem a opção de compartilhamento logo ali, que você pode compartilhar seu arquivo ou componentes com seu membro da equipe, ou mesmo você pode enviá-lo para o seu cliente para revisar o projeto, etc Tudo bem caras. Muito obrigado por assistir este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 26. Formas: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Espero que esteja indo bem. Neste vídeo, vamos falar sobre as formas. A ferramenta de forma é uma das ferramentas mais importantes quando você está projetando uma interface de usuário porque não importa o tipo de interface que você está projetando, certeza você precisará usar uma dessas formas. Na parte superior da barra de ferramentas, você pode encontrar as formas. Se você clicar sobre isso, você pode ver que existem diferentes formas aqui. Por exemplo, temos o retângulo. Se eu selecionar isso, posso facilmente criar essa forma arrastando e soltando. Como você pode ver, criamos um retângulo e é chamado retângulo 1. Cada forma tem algumas propriedades, por exemplo, esta forma tem a propriedade de raio de canto, e como você pode ver, ela é indicada com esses pontos. Se eu clicar em um deles e arrastar o mouse um pouco assim, eu posso definir o raio do canto para 30. Alternativamente, você pode alterar a quantidade de raio de canto, escrevendo o inspetor ali, por exemplo, eu posso configurá-lo para 50 como este. Se você quiser alterar o raio do canto ou apenas um desses pontos ou arestas, você pode manter a tecla “Opção” pressionada e arrastar e soltar assim. Como você pode ver agora temos uma quantidade diferente de raio de canto para cada ponto como este. Na verdade, você pode personalizar seu raio de canto como este se você apenas clicar em “Cantos Independentes” neste ícone, você pode ver que há suavização de canto, e eu vou clicar sobre isso. Aqui temos um controle deslizante e eu vou configurá-lo para 60 por cento. Como você pode ver aqui, está escrito iOS, então o que isso significa? Na verdade, no iOS, a Apple usa cantos suaves. Se você estiver familiarizado com o Sketch, também usamos o mesmo termo. Como você pode ver, isso torna nossos cantos muito mais suaves. Claro que você pode aumentá-lo, no entanto, 60 por cento faz com que pareça ótimo, perfeito. Claro, você pode mudar a cor da sua forma, como discutimos no vídeo anterior. No entanto, vamos cobrir todos esses recursos na próxima série de vídeos, mas por enquanto, vamos manter as formas. A próxima forma é chamada de linha. É só um derrame. Se eu segurar “Shift” e “two”, você pode ver que Figma traz essas formas para mim automaticamente de uma forma que eu possa vê-lo claramente, então eu vou clicar sobre isso. Aqui no acidente vascular cerebral, você tem propriedades diferentes também. Por exemplo, você pode alterar a espessura da linha ou digamos que este traçado assim. Deixe-me definir para 10. Se você clicar nesses pontos, você pode ver que temos diferentes opções aqui. Chama-se AVC avançado e nós temos boné e juntamos. O que isso significa? Vamos dar uma olhada nisso. Deixe-me abrir este menu e aqui temos diferentes opções. Temos rodada que fará a nossa linha arredondada para ambos os lados. Temos quadrado, o que não faz sentido, porque é a mesma coisa. Temos uma seta de linha como esta, e temos uma seta de triângulo como esta. Se eu escolher, por exemplo, “Linha Seta” e decidir modificar esta forma clicando duas vezes sobre esta forma e, por exemplo, movendo este ponto, você pode ver que ele vai mudar automaticamente, muito bom. Vamos cobrir junções nas futuras lições. Agora vamos falar sobre a próxima forma, deixe-me clicar em “Desfazer” para terminar a edição. A próxima forma é uma flecha, como esta. É novamente uma linha ou digamos apenas um golpe que acabamos de criar. No entanto, você poderia criar uma seta como esta também. Como você pode ver, você tem diferentes tipos, redondo, quadrado, seta de linha e seta de triângulo. O primeiro, por padrão, foi misturado porque tínhamos uma linha personalizada. A próxima forma é o círculo. Vou segurar “Shift” para manter a proporção assim. Vou arrastar e soltar para criar este círculo muito bom. Este círculo tem uma nova propriedade que é chamado arco. Vamos clicar sobre isso e tentar mover um pouco para ver o que você pode conseguir modificando esta propriedade assim. Isso é muito incrível e especialmente é tão útil quando você está criando um gráfico, incrível. A próxima forma é chamada de Polígono, eu vou criar um. Vamos remover esta forma por enquanto. Vou torná-lo maior, muito bom. A forma do polígono tem duas propriedades diferentes. O primeiro é o raio do canto, e funciona como retângulos. O segundo é chamado de contagem, que significa o número de arestas que estamos usando que estamos criando. Deixe-me aumentá-lo pressionando “Shift” e clicando assim. Vou mover meu mouse para cima e para baixo. Você também pode modificá-lo no inspetor, vamos configurá-lo para oito, muito bom. Eu também posso modificar o raio obviamente aqui, fantástico. Deixe-me remover isso e eu vou criar a estrela mais uma vez aqui, muito bom. A forma da estrela tem três propriedades diferentes. O primeiro é um raio de canto, de novo, assim. A segunda é a razão, que é a relação entre estas duas arestas como esta. Você pode modificar isso, eu vou definir para 40 O último é contar. Que você pode aumentar e diminuir como quiser, muito impressionante. Por último, mas não menos importante, é a imagem local que você pode escolher uma imagem do seu sistema. Se você arrastar e soltar assim e certifique-se de manter a tecla Shift pressionada no teclado para manter a proporção, você pode colocar uma imagem. Você também pode mudar o raio, bem como, é tão simples. Agora vamos falar sobre a propriedade dimensão bem ali. Aqui, como você pode ver, você tem propriedades diferentes como X e Y, que se refere à posição desta forma. Se eu definir zero e zero para Y, como você pode ver, ele se move para o canto superior esquerdo porque os pontos zero e zero começam do canto superior e esquerdo. Agora você pode modificar a largura e a altura. Por exemplo, você pode configurá-lo como 300. No entanto, como você pode ver, a largura e a altura estão vinculadas. Se você quiser alterá-los separadamente, você pode facilmente desvinculá-los clicando neste ícone, que é chamado de proporções restritas, e então eu posso modificar a largura ou altura separadamente assim. Como no Sketch, você pode fazer operações matemáticas aqui. Por exemplo, eu posso dividir 300 por 2, assim e lá vamos nós, temos 150 ou eu posso multiplicar 180 por 2. É um recurso ótimo e útil quando você está projetando sua interface de usuário. Nós temos os alinhamentos onde eles estão bem no topo. Por exemplo, se eu escolher este objeto ou esta forma, eu posso alinhá-lo ao centro horizontalmente, eu posso alinhá-lo ao lado esquerdo, alinhar ao lado direito, alinhar ao topo, alinhar verticalmente, e alinhe-o à parte inferior. Mas e se você quiser alinhar um objeto que é colocado dentro de outro objeto? Suponha que vamos colocar este objeto aqui, eu vou mudar a cor para algo como cinza escuro, como este. Vou torná-lo mais pequeno um pouco. Suponha que vamos alinhar esta forma com o nosso retângulo, que parece um quadrado agora, mas como podemos fazer isso? Em primeiro lugar, você precisa ter certeza de que escolheu ambos os objetos ao mesmo tempo. Você pode manter a tecla Shift pressionada no teclado e selecioná-los, ou você pode selecioná-los assim, arrastando e soltando. Em seguida, você vai clicar em “Alinhar horizontal para o centro” e “Alinhar vertical para o centro” e é feito, muito impressionante. Agora neste vídeo, aprendemos como usar formas e você conhece as propriedades de cada forma específica. Espero que você tenha gostado deste vídeo e eu vou vê-lo no próximo vídeo. 27. Como editar formas: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre a edição de formas, que é um tópico muito importante porque acontece o tempo todo que você pode precisar para editar suas formas. Primeiro, vou pressionar “A” e como podem ver agora posso escolher o meu quadro de arte. Vamos abrir o menu da área de trabalho e aqui eu vou escolher, MacBook Pro, para este vídeo não importa, mas eu tenho espaço suficiente para mostrar como você pode editar suas formas. Então o que eu vou fazer é criar um novo retângulo aqui. Vou segurar, Shift, e arrastar e soltar assim. Então vamos aumentar o raio do canto. By the way, se você segurar a tecla Shift no teclado, você pode aumentar ou diminuir o raio do canto em 10 unidades, assim, muito bom. Então eu vou preenchê-lo com outra cor, então vamos procurar um azul muito bonito. Eu acho que é ótimo e então eu vou criar outro retângulo aqui, então vamos segurar, Shift, novamente, e eu vou mostrar a vocês uma ótima técnica para escolher suas cores corretamente. Se você não tem certeza de como você pode combinar uma boa cor com estes azuis que cria um grande contraste entre eles, você pode primeiro escolher a mesma cor como esta. Então, se você mover esse círculo para o lado mais escuro dessa paleta de cores assim, você pode facilmente escolher uma combinação perfeita com sua cor de fundo, o que é incrível, não é? Agora, como podemos editar nossa forma? Para editar qualquer forma, primeiro, precisamos entrar no modo de edição. Para fazer isso, você pode clicar duas vezes sobre essa forma e lá vamos nós. Agora estamos no modo de edição, e como você pode ver, temos quatro nós diferentes aqui, ou digamos pontos com os quais podemos começar a editar nossa forma. Se eu clicar no círculo, e tentar movê-lo um pouco. Você pode ver que eu posso facilmente editar esta forma como eu gostaria, assim. Posso até aumentar o raio desses cantos no inspetor, algo assim. Você também pode adicionar mais nós em seu caminho, como este. Por exemplo, aqui posso clicar uma vez e lá vamos nós, acabei de criar um novo nó, e posso editá-lo de outra forma como esta. Deixe-me voltar ao primeiro estado deste retângulo, ou digamos quadrado como este. Agora suponha que você queira criar algo como uma curva, nesse caso, você pode usar a ferramenta de dobra, que está aqui. Você pode clicar sobre isso e escolher um desses nós, em seguida, você pode ver que manipulado controlador aparece, e nós este controlador manipulado você pode facilmente ajustar sua curva assim. É incrível, não é? O atalho da ferramenta de dobra está segurando, Comando, no seu teclado, lá vamos nós. Você pode facilmente ajustar sua curva, a fim de atender às suas expectativas, muito impressionante. Depois de editar sua forma, você precisa se lembrar de fechar o modo de edição. Para fazer isso, você pode clicar, “Desfeito” como este, então Agora estamos fora do modo de edição. Mas não é melhor criar um ícone real para mostrar como você pode usar o poderoso modo de edição? Vamos fazer isso. Primeiro de tudo, eu vou ampliar um pouco como este, então eu vou entrar no modo de edição, vamos clicar duas vezes. Depois disso, vou criar um novo nó aqui. Eu vou clicar nisso, então eu vou arrastá-lo para baixo segurando, Shift, assim, muito bom. A próxima coisa que eu vou fazer é selecionar todos os nós segurando, Comando A ou Controle A, no Windows, então eu vou aumentar o raio do canto. Vamos aumentar para seis, talvez, isso é muito bom. Agora eu vou torná-lo um pouco mais alto, e a última coisa que eu vou fazer é girar este ícone. Para girar qualquer coisa no Figma, você pode passar o mouse fora de sua forma, e você pode ver que o indicador de rotação ou ícone aparece imediatamente. Então eu vou segurar, Shift, e eu vou girá-lo em 180 graus. Como você pode ver, você tem a quantidade aqui, e lá vamos nós. O que parece? Você está certo, é como um marcador. Você pode ver como essa ferramenta de edição é incrível e poderosa? Vou fazer algumas mudanças para torná-lo melhor. Deixe-me clicar duas vezes na forma, e eu vou selecionar esses dois nós superiores e, em seguida, aumentar o raio do canto para 26 talvez, muito impressionante. Deixe-me selecionar ambas as camadas e eu vou agrupá-las por, Comando G ou Controle G, no Windows, e eu vou nomeá-lo, marcador. Então, o que mais podemos fazer? Vamos em frente e criar um polígono aqui, eu vou definir a cor para o mesmo azul que o nosso ícone de marcador. Vamos copiar e colar esses fundos como nosso quadro. Eu vou segurar, tecla Command ou tecla Control, no Windows e clique sobre estes retângulo ou quadrado e copiá-lo por, Command C, e eu vou colá-lo. No entanto, lembre-se de mover essa camada para fora desse grupo de favoritos. Vou movê-lo um pouco assim, agora vamos clicar duas vezes neste triângulo. Aqui eu vou criar outro nó bem na parte inferior, assim e deixe-me arrastá-lo um pouco, lá vamos nós. Temos o nosso marcador GPS. Isso é muito legal, não é? Deixe-me torná-lo menor. Fantástico. Deixe-me agrupar e vou escrever. Deixe-me ampliar este quadro de arte um pouco, então eu vou mostrar como você pode usar a ferramenta de caneta. Suponha que você queira criar, por exemplo, uma seta curva, como você pode fazer isso? É tão simples. Vamos começar com a adição de um nó, então você precisa de outro nó como este e o último aqui, isso é tudo. Primeiro de tudo, eu vou aumentar a espessura do curso para quatro talvez, então eu vou girá-lo um pouco. Se eu clicar nesses pontos, eu posso mudar o modo cap para linha seta como este, é muito legal. Posso até editá-lo assim. Você pode ver como é fácil criar novas formas e editá-las? Bastante incrível. Muito bem pessoal, muito obrigado por assistirem estes vídeos, espero que tenham gostado. Na próxima série de vídeos, vamos praticar o uso dessas ferramentas criando projetos do mundo real. Então não se preocupe, se você não entender todos os detalhes, vou me certificar de explicar tudo em detalhes. Vejo-te no próximo vídeo. 28. Noções básicas de camadas: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre o painel de camadas. Saber que como você poderia usar o painel de camadas corretamente é tão importante. Pode parecer fácil de usar, no entanto, às vezes fica um pouco complicado em termos de reordenar suas camadas e seus objetos. Vamos mergulhar nessas partes e eu vou mostrar como você pode usá-lo eficientemente. Como você pode ver, você tem a lista de camadas à sua esquerda. Aqui você pode ver todas as suas camadas, todos os seus grupos, e também, todos os seus quadros. Sempre que você cria uma nova forma ou um novo objeto, ele vai para o topo dessa lista de camadas. Vamos experimentá-lo. Eu vou criar um retângulo aqui, e como você pode ver eu tenho retângulo 1. Para renomear esse retângulo, vou clicar duas vezes sobre isso e vamos chamá-lo de R1. Então eu vou criar outra forma. Vamos criar um círculo. Muito bom. Vou mudar a cor, a fim de torná-la mais visível. Bastante incrível. Vou chamar-lhe C1. Como você pode ver, C1 foi colocado no topo dessa lista de camadas. Ele aparece na parte frontal do seu Canvas. Esta é a razão pela qual este círculo é visível aqui. Se eu mover esta camada abaixo de R1, ela não estará mais visível. No entanto, você ainda pode alterar suas propriedades, como sua cor ou seu tamanho. Se eu movê-lo de volta para sua posição anterior, você pode ver que ele está visível novamente. Encomendar suas camadas é muito importante. Agora suponha que vamos agrupar nossas camadas. Vamos selecionar essas duas formas e manter o Comando G. Como você pode ver, acabamos de criar o grupo um. Sempre que você quiser ver as camadas incluídas neste grupo, você pode usar a pequena seta ao lado desse ícone, que indica que este é um grupo. Vou clicar nisso, e lá vamos nós. Para selecionar uma camada, você pode facilmente clicar sobre isso. Como você pode ver, uma bicicleta azul claro aparece a fim de mostrar que esta camada foi selecionada. Se você acessar Menu e acessar Preferências, você pode ver que você tem opções diferentes aqui. Uma delas é, Destaque camadas ao passar o mouse. O que isso significa? Isso significa que se você passar o mouse sobre cada camada, como por exemplo C1, você pode ver na Tela que a linha azul aparecerá para mostrar que esta é a camada desejada. Vou selecionar isso. Se você quiser desagrupar essas camadas, você pode facilmente clicar no nome do grupo e clicar com o botão direito do mouse aqui, e você pode clicar em “Desagrupar” assim. Vou usar o Command Z ou Control Z no Windows. Agora, e se você quiser esconder algumas camadas? É tão simples. Suponha que vamos esconder este círculo, que é chamado C1. Para fazer isso, em primeiro lugar, precisamos passar o mouse sobre essa camada específica como esta. Em seguida, um ícone de olho aparece imediatamente, ao lado deste cadeado. Eu vou clicar neste ícone de olho e você pode facilmente alternar esta camada fora e ligado, assim. Você também pode bloquear cada camada clicando neste cadeado para evitar que sua camada de edição acidental. Quando você bloqueia sua camada, você não pode mover a camada, você não pode interagir com a camada, no entanto, você ainda pode alterar suas propriedades. Vamos experimentá-lo. Vou tentar mover esta camada um pouco. Como você pode ver, porque ele foi bloqueado, eu não posso movê-lo. posição é fixa e você pode usar essa técnica para bloquear seus fundos. Às vezes pode ser útil. No entanto, agora vamos tentar alterar algumas de suas propriedades. Por exemplo, vou mudar sua cor. Como você pode ver, eu ainda posso ter acesso a suas propriedades, embora ele tenha sido bloqueado. Para desbloquear isso, você pode clicar novamente neste cadeado, e lá vamos nós, ele está desbloqueado. Você pode reconhecer o tipo de cada camada em sua lista de camadas com base no ícone ao lado de seu nome. Como você pode ver na imagem, temos moldura, temos grupos, temos componentes que falaremos nas futuras lições, temos instâncias, temos objeto de texto, temos forma, imagem, um GIF animado. Agora, vamos falar sobre o posicionamento de suas camadas. Mais uma vez, porque eu vou mostrar a vocês como você pode reordenar o posicionamento de suas camadas logo abaixo do Canvas. Suponha que você queira trazer o quadrado ou digamos retângulo para a frente. Para fazer isso, é claro que você pode ir para a lista de camadas e movê-lo assim, e está feito. No entanto, há uma alternativa para isso. Você pode facilmente clicar com o botão direito do mouse sobre isso no Canvas, e você pode escolher, Trazer para a frente. Lá vamos nós. Se você estiver familiarizado com o Adobe Illustrator, sabe que também pode usar a mesma funcionalidade nesse software. Agora vamos para a seção de ativos. Aqui, como você pode ver, porque ainda não criamos nenhum componente, não podemos ver nenhum componente aqui. Basicamente componentes, são partes do seu design que você pode reutilizar. Vamos falar sobre isso mais tarde, e vamos mergulhar em componentes nas futuras lições. Temos outra opção aqui que é chamada de páginas. Bem no topo, como você pode ver, aqui temos a Página 1, e se eu clicar nisso, você pode ver que eu tenho páginas. Chama-se Página 1. Você pode renomear isso. Vou mudar para o site. Você pode duplicar isso se você apenas clicar com o botão direito do mouse nessa camada, como você pode ver, você pode adicionar uma nova página a esta lista de páginas, como esta. Pode chamá-lo de Página 2. A boa notícia é que não há limite para a criação de páginas. Você é livre para criar quantas páginas quiser. Por exemplo, você pode separar algumas partes do seu design para deixar claro quando você está trabalhando em uma equipe, ou se você quiser criar protótipos diferentes, é uma boa idéia ter páginas diferentes também. Eu vou para o site, e isso é tudo para este vídeo. Muito obrigado por assistir este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 29. operações booleanas: Olá a todos. Bem-vindos de volta a outro vídeo das partituras. Neste vídeo, vamos falar sobre as operações booleanas. Na verdade, hoje em dia, usamos operações booleanas quase em todos os aspectos de nossa vida, como arte, programação, design, etc. mais difícil que pareça, na verdade, as operações booleanas são tão simples. Vamos mergulhar nele e eu vou te mostrar como você pode usá-los facilmente. Como você pode ver, eu criei um projeto simples aqui com quatro pranchetas diferentes, e eu os chamo de União, Subtrair, Intersect e Excluir. Estes são os nossos operadores booleanos. Como você pode ver aqui, temos este Menu e temos Seleção de União, temos Seleção de Subtrair, temos Seleção de Interseção, e temos Excluir Seleção. Primeiro de tudo, deixe-me escolher esta prancheta e eu vou segurar “Shift” e dois, assim, como você pode imaginar, união significa combinado. Se eu tentar sobrepor essas formas com este círculo, como você pode ver, eles foram sobrepostos. Se eu escolher as operações booleanas e eu escolher a operação da União, você pode ver que combinamos esses dois círculos em uma única forma. Aqui você pode, é claro, obter acesso a sub-camadas como esses círculos e você ainda pode editá-lo. No entanto, temos uma única forma e essas operações são tão úteis para criar ícones, e falaremos sobre isso mais tarde. Agora, vamos em frente e falar sobre a próxima operação que é Subtrair. Primeiro de tudo, deixe-me sobrepor estas formas assim. Vou escolher Subtrair. Como você pode ver, ele subtrai a seção sobreposta da forma base. A seção sobreposta é essa parte no meio. Quando eu escolho Subtrair, ele remove essas seções sobrepostas desta forma base, que é o círculo esquerdo como este. Como você pode ver, a operação Subtrair é o oposto de União. A próxima operação é Intersect. Deixe-me sobrepor essas duas camadas assim. Vou clicar em “Intersect Selection” e essa operação remove todas as áreas, exceto a seção sobreposta como esta. A próxima operação, que é a última, chama-se Excluir e é o oposto da operação Intersect. Se eu sobrepor essas duas formas como esta, e eu clicar em “Excluir seleção”, você pode ver que ele mantém todas as áreas, exceto a seção sobreposta. Então você viu como é simples usar operações booleanas? Eles são tão úteis. Agora, você não acha que é uma boa idéia criar alguns ícones com esse conhecimento? Isso é ótimo. Primeiro de tudo, vou criar outra prancheta e vou clicar em “A” no meu teclado. Vamos arrastar e soltar para criar um novo quadro como este. Suponha que queremos criar um ícone de pesquisa. Do que precisamos? Precisamos de um círculo. Vou criar um, e não vou preenchê-lo com cores. Vou remover o preenchimento e adicionar um pouco de traço, assim. Vou aumentar a espessura deste golpe. Deixe-me ver, eu acho que 15 é ótimo e eu vou criar um retângulo bem com a largura de 15 também. Vou mudar a cor para preto assim. Deixe-me ampliar um pouco. Vou movê-lo para cima. Em seguida, vamos selecionar ambos os objetos e alinhá-los ao centro. Vou escolher “Sindicato Seleção” assim. Muito bom. Agora posso girá-lo. Incrível. Você viu como é simples criar um ícone com essas operações booleanas? Muito bom. Espero que tenha gostado. Agora vamos criar outro ícone. Por exemplo, vamos criar um ícone de nuvem. Vou criar um retângulo aqui, assim. Vamos aumentar o raio. Bastante incrível. Preciso criar um círculo como este. Deixe-me sobrepor. Muito bom. Então vou selecionar os dois e selecionar “Seleção de União”. Lá vamos nós, temos a nossa nuvem. Se eu mudar a cor para preto, você pode ver como é incrível. Você também pode personalizá-lo mais tarde ou mesmo, por exemplo, eu posso remover o preenchimento e eu posso adicionar traçado como este se você preferir estes styling. Mas lembre-se quando você está projetando alguns ícones para um projeto específico, você precisa manter a espessura de suas linhas a mesma para cada ícone específico, a fim de ser consistente em seu design. Tudo bem, pessoal. Muito obrigado por assistir este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 30. Texto: Olá a todos e bem-vindos de volta a outro vídeo do curso. Neste vídeo, vamos falar de textos. Nós, como designers UX UX usamos textos o tempo todo e precisamos saber todos os segredos por trás da ferramenta de texto. Então, a fim de criar um texto no Figma, você pode facilmente ir para a barra de ferramentas e clicar neste ícone de texto. Ou você pode pressionar T no seu teclado assim. Incrível, e se você clicar uma vez, você vai criar uma área leva camada ou digamos uma camada de texto parágrafo. Ok, então eu vou escrever “Olá”. Somos designers de UI UX. Muito incrível, e como você pode ver, esse tipo de linha de texto cresce horizontalmente quando você está digitando, ok? Claro que você pode mudá-lo, no entanto. Primeiro de tudo, deixe-me mostrar-lhe como você pode alterar o tamanho da fonte. Se você passar para o Inspetor de texto no lado direito, você pode alterar a fonte, você pode alterar o tamanho da fonte, você pode alterar o peso. Vamos falar sobre todas essas propriedades mais tarde. Então, primeiro de tudo, vou mudá-lo para 36. Bastante incrível. Agora vou selecionar o quadro e vou pressionar Shift e à nossa direita. Então, como mencionei antes, esta é uma linha de texto de área. E daí se você quiser fazê-lo crescer verticalmente? Para fazer isso, você pode clicar nesses pontos e aqui você tem muitas opções para mudar. Mas o que precisamos é esse redimensionamento, como você pode ver, é definido como padrão para crescer horizontalmente. Se você quiser fazê-lo crescer verticalmente, você pode mudá-lo para crescer verticalmente aqui, e se eu continuar digitando a partir de agora, ele cresce verticalmente. Vou escrever: “Obrigado pelo seu apoio”, assim. Você também pode criar uma linha de texto de tamanho fixo. Ou você pode mudá-lo aqui assim. Mas e se você quiser criar uma linha de texto de tamanho fixo sozinho? É tão simples. Primeiro, você vai escolher a ferramenta de texto, então você vai clicar e arrastar assim, e desta forma você irá especificar a dimensão de sua caixa de texto assim, ok? Se eu escrever algo aqui, como “Estamos falando textos e comparando diferentes opções.” Assim, e se você quiser modificar a dimensão dessas marcas de texto, você pode facilmente passar o mouse sobre estas caixas delimitadoras azuis e seu cursor muda imediatamente para o ícone de escala, ok, e eu posso modificá-lo assim. Muito bom, não é? Deixe-me mudar o caminho para normal, certo? Às vezes, pode ser útil converter uma linha de texto em um vetor. Então, como você pode fazer isso? Se eu clicar com o botão direito aqui, eu posso ir em frente e clicar em achatar, e lá vamos nós. Agora nosso texto é um vetor, como você pode ver ali, e você pode modificar cada letra separadamente. Eu vou ampliar e vamos clicar duas vezes sobre esses H. Lá vamos nós. Suponha que eu vou mudar alguma coisa aqui. Por exemplo, vamos selecionar esses nós e eu vou aumentar o raio do canto assim, e também para este. Não é muito legal? Então converter sua linha de texto para um vetor tão útil, especialmente se você está projetando um logotipo ou uma marca de palavras, etc, tudo bem. Suponha que eu vou criar outra linha de texto como esta. Vamos escrever H, então eu vou duplicar isso mais uma vez e outra vez, e vamos escrever e e aqui eu e aqui eu, e nós vamos duplicar isso e o, ok. Deixe-me movê-los um pouco, então como eu mencionei antes, a fim de tornar sua linha takes um vetor, você precisa achatar seu texto sobre ele. Mas e se você quiser manter suas camadas como estão? Por exemplo, aqui eu tenho cinco camadas diferentes e eu vou torná-lo vetorial. Nesse caso, você pode clicar com o botão direito do mouse e, em vez de escolher achatar, você pode escolher Traçado de contorno. Agora você tem todas as letras como um vetor. Isso é incrível, não é? Tudo bem, pessoal, isso é tudo por este vídeo. Muito obrigado por assisti-lo, e eu vou vê-lo no próximo vídeo. 31. Inspector de texto: Oi, todo mundo. Espero que você esteja indo bem e bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre o inspetor de texto, como você pode personalizar seu texto. Sem mais delongas, vamos começar com a seleção desses textos. No Inspetor de texto, temos diferentes opções. Como eu mencionei antes, alguns deles, vou revisá-los. A primeira opção é a fonte que você pode facilmente obter acesso às fontes locais ou as fontes Figma. Você pode facilmente mudar suas fontes e agora eu vou configurá-lo de volta para Montserrat. A próxima opção é o peso da sua fonte. Você pode modificá-lo para fino, leve, regular, negrito e preto. No entanto, tenha em mente que essas opções podem ser diferentes para fontes diferentes. Vou ajustá-lo ao normal. A próxima propriedade é o tamanho da fonte. Como você pode ver, você pode alterar o tamanho da fonte facilmente. Vou mudá-lo para 68. Você também pode fazer operações matemáticas aqui. Vou dividi-lo por dois, muito incrível. Então temos a altura da linha, que é tão importante quando você está projetando uma interface de usuário em termos de visibilidade de suas linhas em tamanho de tela diferente. Como você pode ver, ele foi configurado para auto. Figma calcula a altura da linha por porcentagem. Baseia-se no tamanho da sua fonte. Se você quiser declarar sua própria altura de linha em pixel, você pode facilmente escrever, por exemplo, 80 pixels. Agora, esse valor é baseado em pixels não percentual mais. A próxima propriedade é o espaçamento entre letras, que determina o espaçamento entre as letras. Então temos espaçamento de parágrafos. Não podemos ver as mudanças aqui porque criamos apenas um parágrafo. Então eu vou fazer este tamanho de fonte um pouco menor. Vamos definir para 24. Vou mudar a altura da linha para auto. Vamos adicionar mais um parágrafo a ele. Vou escrever, estamos falando de propriedades. Agora, se você alterar o espaçamento de parágrafo, você pode ver que ele muda imediatamente. Então temos o recuo parágrafo. Se eu aumentar isso, você pode ver que você pode especificar esse valor e ele irá adicionar algum espaço amplo antes da primeira palavra de cada parágrafo. Vou desfazer isto. Bastante bom. Aqui temos os alinhamentos horizontais. Temos texto alinhar à esquerda, texto alinhar ao centro e texto alinhar para escrever. Depois disso, temos o alinhamento vertical. Como você pode ver, eu posso mudá-lo também. No entanto, lembre-se de que essa opção só é aplicável a uma camada de texto de tamanho fixo. Como você pode ver, podemos aplicar essas alterações porque estamos usando uma camada de texto de tamanho fixo. Mas se eu criar outro texto aqui, olá, eu estou testando. Agora, se eu mudar o alinhamento vertical, nada acontece. Você também tem algumas propriedades avançadas que você pode obter acesso clicando nesses três pontos. Aqui você tem a seção anterior que você pode visualizar cada operação sempre que você passar o mouse sobre estas opções. O primeiro é o redimensionamento, e eu expliquei no vídeo anterior, você tem três opções diferentes: crescer horizontalmente, crescer verticalmente, e camada de texto de tamanho fixo. Então você tem um alinhamento como este. Depois disso, você tem decoração. Como você pode ver, está definido como nenhum, então não temos nenhuma decoração. No entanto, você pode escolher sublinhado ou tachado como este. Depois disso, temos o caso da carta. Você pode especificar o tipo de letra maiúscula que você deseja usar. Por exemplo, este é maiúsculo, temos minúsculas. Se eu escolher maiúsculas, todas as minhas letras se tornam maiúsculas. Se eu escolher minúsculas, como você pode ver, as alterações se aplicam imediatamente. Então temos caso título, temos bonés pequenos e forçados pequenos bonés. Bastante incrível. Temos também formulários que diferenciam maiúsculas e minúsculas. No entanto, não se aplica a esses textos selecionados. Vamos deixá-la por enquanto. Então temos números. Não podemos ver as mudanças aqui porque não estamos usando nenhum número em nosso texto, mas você pode visualizá-las aqui. Você pode até escolher a fração. É totalmente sobre números. Eles são tão avançados, e na maioria das vezes, não os usamos em nosso processo de design. Tudo bem, pessoal. Isso é tudo por este vídeo. Muito obrigado por assisti-lo, e eu vou vê-lo no próximo vídeo. 32. Estilo de texto: Olá, todo mundo. Espero que esteja indo bem e bem-vindo de volta a outro vídeo das partituras. Neste vídeo, vamos falar sobre estilos de texto. Na verdade, os estilos permitem que você especifique um conjunto de propriedades para reutilizá-las em seus projetos e você também pode compartilhá-las com sua equipe. Neste vídeo, vamos mergulhar em estilos de texto e eu vou mostrar a vocês como é importante criar seu estilo de texto quando você está projetando uma interface de usuário. Suponha que você está projetando um projeto muito complicado que consiste em 50 ou mais telas. Neste caso, você está usando uma fonte específica e depois de um tempo, repente você decide mudar, por exemplo, a fonte do seu cabeçalho ou até mesmo o tamanho da fonte ou o peso, então não seria bom que você pudesse fazer essas alterações uma vez e as alterações se aplicariam a todas as suas tags ao mesmo tempo? Isso é fantástico. Isto é o que o estilo de texto faz. Agora, sem mais delongas, vamos começar com a inserção de um novo texto. Eu vou adicionar, por exemplo, Cabeçalho 1, e eu vou torná-lo ousado. Na verdade, quando você está projetando um site, temos seis tipos diferentes de cabeçalhos, de H1-H6, em HTML. Você não precisa saber todos os detalhes sobre isso, no entanto, é bom estar familiarizado com alguns termos e algumas regras de HTML ou CSS. Agora, é o nosso Cabeçalho 1 e eu vou definir o tamanho para 80 como este e então eu vou criar meu primeiro estilo de texto. Como posso fazer isso? É tão fácil. Vê estes quatro pontos? Eu vou clicar sobre isso e aqui há um ícone de mais que me permite criar um novo estilo de texto e eu vou escrever H1, então vamos duplicá-lo. Isso mesmo, H2 aqui e aqui como você pode ver, ele usa o estilo de texto anterior que acabamos de definir para Cabeçalho 1. Primeiro de tudo, precisamos desanexá-lo de seu estilo, e então eu vou configurá-lo para 60, muito bom e eu vou criar outro estilo de texto e vamos chamá-lo de H2, vamos duplicar isso, mais uma vez, separá-lo de seu estilo de texto, e vamos configurá-lo para 30. Eu vou escrever Header 3, vamos criar um novo estilo de texto, bem como, H3 e isso é tudo. Agora, como podemos aplicar nossos estilos de texto às nossas camadas de texto? Deixe-me criar um novo texto. Eu vou escrever promoções, e como você pode ver, ele usa automaticamente H3. Você pode facilmente mudar isso clicando neste menu, e eu vou configurá-lo para H2, lá vamos nós. Se eu for para o meu estilo de texto aqui, Cabeçalho 2, e eu fizer algumas alterações, essas alterações também serão aplicadas a essas tags de promoções. Vamos tentar, vamos para H2 e aqui você tem estilo Editar, eu vou clicar sobre isso e, por exemplo, eu vou fazer isso regular, lá vamos nós. Você viu como é incrível usar estilos de texto? Você também pode alterar o tamanho da fonte, por exemplo, eu vou configurá-lo para 40, e isso é feito. No entanto, tenha em mente que se você alterar a cor do texto, ela não se aplica à incidência desse estilo de texto, portanto, se eu, por exemplo, mudar a cor deste Cabeçalho 2, por exemplo, para esta cor, como você pode ver, nada acontece. Porque para isso, precisamos criar um estilo de cor que cobriremos nas lições do futuro. Agora deixe-me duplicar essas promoções e então podemos tentar H3 também. Tudo bem, pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 33. Restrições e layouts adaptativos: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre restrições e layouts responsivos. Quais são as restrições e por que precisamos tornar nosso design responsivo? Suponha que você esteja projetando uma página da Web ou uma tela de aplicativo e esteja usando, por exemplo, este quadro de arte, o MacBook Pro, então o que acontece quando seu usuário usa o modo retrato como este? Se você não tornasse seu design responsivo, tudo seria desorganizado. Neste vídeo, vamos falar sobre restrições e como você pode tornar suas páginas responsivas. Primeiro de tudo, eu vou projetar uma página de destino simples aqui. Vamos em frente e adicionar um retângulo aqui como este, e eu vou mudar a cor para azul escuro. Bastante incrível. Então eu vou adicionar um texto aqui. Vamos escrever as boas-vindas ao mundo do design UI/UX. Deixe-me mudar a cor para branco por enquanto e eu vou mudar a fonte para o texto SF Pro. Vou torná-lo maior um pouco. Vamos definir para 64. Eu acho que é melhor torná-lo uma camada de texto de tamanho fixo como esta. Então deixe-me alinhá-lo ao centro e também aqui, muito bom. Então, do que mais precisamos? Vou adicionar alguns links ou menus no topo. Vamos escrever para casa. Vou torná-lo branco também. Vamos torná-lo menor. Eu acho que 24 pontos é ótimo, duplicar isso, então vamos escrever preços. Mais uma vez, duplique isso e aqui, serviços. Mais uma vez, vou duplicar isso e agora contacte-nos, muito bem. Isso é tudo. Primeiro de tudo, vamos mudar o espaçamento entre eles. Eu vou escolher este menu no inspetor, e eu vou clicar em “Distribuir espaçamento horizontal” como este. Desta forma, o espaçamento entre meus links ou meus menus será igual. Se quiser verificar o espaçamento entre os objetos, você pode selecionar facilmente um texto ou objeto e, em seguida, manter pressionada a tecla Option ou Alt no teclado, e você pode passar o mouse sobre o texto ou a forma ao lado da forma anterior. Como você pode ver, ele foi definido para 25. Eu vou fazer 24, assim, bastante incrível. Agora vamos deixar este texto em negrito. Vou escolher ousado. Agora está melhor. Agora vou torná-lo um pouco maior. Bom. Vamos agrupar nossos menus no topo, Comando G ou Controle G. Eu vou escrever menus, incrível. Eu o alinhei verticalmente também, e isso é tudo por enquanto. Agora, como você pode ver, nós projetamos esta página para o MacBook Pro com esta dimensão, 1440 por 900, e foi projetada para o modo paisagem. Se eu mudar para retrato, você pode ver que tudo será desorganizado. Precisamos tornar nossa página responsiva. Para fazer isso, primeiro vamos selecionar esses textos. Como você pode ver no inspetor, você tem algo chamado Restrições. Vamos usar isso. Como você pode ver, as restrições são definidas para cima e esquerda. Mas vamos mudá-lo porque precisamos manter esses textos no centro da nossa tela. Vou mudá-lo para o centro. Vamos manter isso no topo, porque precisamos manter essa distância até o topo da mesma forma. Agora, se eu escolher meu quadro e mudá-lo para o modo retrato, podemos ver que ele muda automaticamente sua posição, e agora tudo está ótimo. A próxima coisa que precisamos fazer é definir restrições para nossos menus. Vamos voltar ao modo paisagem, e agora vou selecionar os menus. Como você pode ver, as restrições são definidas para esquerda e superior, no entanto, elas precisam definir para o centro e topo. Vou mudá-lo para o centro. Agora, se eu mudar meu quadro para o modo retrato, você pode ver que ele vai mudar de forma responsável assim. É muito legal, não é? No entanto, e se eu tornar a minha tela ainda maior assim? Você pode ver que meu passado não é responsivo. Agora, por favor, pause o vídeo e tente corrigir esse problema sozinho. Então eu vou te mostrar como você pode fazer isso. Pessoal, tenho certeza que vocês podem consertar isso sozinhos. No entanto, agora, vou mostrar-lhe também no caso de você ter dificuldades em fazer isso. Para tornar o seu plano de fundo responsivo também, primeiro, vamos escolher este retângulo, que é o nosso plano de fundo. Como você pode ver, as restrições são definidas para as bordas esquerda e superior. A única coisa que precisamos mudar é esta. Se pudermos mudar para esquerda e direita, tudo seria ótimo. Agora vamos tentar. Agora, eu vou fazer minha moldura ainda maior. Como podem ver, temos um fundo elástico como este. Isso foi fácil. Pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 34. Layout automático: Olá a todos. Espero que esteja indo bem. Neste vídeo, vamos falar sobre o mais novo recurso do Figma, que se chama Auto Layout. O recurso Auto Layout foi adicionado ao Figma recentemente, e é um recurso super poderoso e vou mostrar-lhe como você pode usar isso para acelerar seu processo de design e tornar sua vida muito mais fácil. Sem mais delongas, vamos começar. Primeiro de tudo, vou em frente e criar um botão. Para fazer isso, vou precisar de um retângulo. Vamos criar um. Lá vamos nós. Vou definir a largura para 300 e a altura para 70. Legal. Então vamos aumentar o raio do canto para 16. Como podem ver agora, esses pequenos círculos não aparecem aqui porque estou longe deste botão. No entanto, se eu zoom um pouco, esses círculos apareceriam. Agora vamos mudar a cor para roxo claro, assim. Legal. Então precisamos de um texto, obviamente. Eu vou escrever login e vamos mudar a cor para branco e eu vou aumentar o tamanho da fonte para 24. Vamos selecionar ambas as camadas e alinhá-las horizontalmente e verticalmente. Muito bom. Vou torná-lo um pouco menor. Agora está melhor. Vamos agrupá-los e chamá-lo de Login. Está tudo bem agora. Mas suponha que você crie este botão, você decide duplicar isso e alterar o texto para outra coisa. Por exemplo, você deseja alterá-lo para Introdução. Você pode ver qual é o problema aqui? Nossos botões não são responsivos e, anteriormente, precisávamos personalizar nossos botões separadamente assim. Precisávamos redimensioná-los manualmente, e novamente, tivemos que alinhá-los assim. No entanto, agora, com a ajuda do Auto Layout, tudo será feito em um segundo. Deixa-me mostrar-te como podes fazer isso. Primeiro de tudo, eu vou duplicar esses botão Login mais uma vez. Lá vamos nós. Como você pode ver no Inspetor, uma nova seção foi adicionada, chamada Auto Layout. Você pode clicar neste botão de adição para adicionar Layout Automático ao seu botão, ou você pode segurar Shift e A, e isso é tudo. Como alternativa, você pode clicar com o botão direito do mouse aqui e escolher Adicionar layout automático. Todos funcionarão da mesma forma. Como podem ver, nada foi mudado aqui. Mas se você tentar alterar esse texto para, por exemplo, Get Started, você pode ver que qual é a diferença aqui? Agora nosso botão está responsivo. Isso é super legal, e você também pode personalizar o preenchimento horizontal, o preenchimento vertical e um espaçamento entre os itens. No entanto, como temos apenas um item aqui, não podemos usar a seção. Você pode mudar o modo de horizontal para vertical, mas você não pode ver a diferença aqui. No entanto, se você estiver tentando criar uma lista, você pode usar vertical. Temos diferentes opções também para a altura. Como você pode ver aqui, temos altura automática. Se eu tentar adicionar algumas linhas como esta, o tamanho da altura aumentará automaticamente, mas se eu tentar alterá-lo para altura fixa e depois adicionar algumas linhas, você pode ver que não é mais responsivo. Você pode personalizar facilmente as opções que você tem. Aqui, este é o preenchimento horizontal. Você pode mudá-lo facilmente assim. Se você está familiarizado com CSS, ele funciona exatamente da mesma forma, e também o preenchimento vertical, que é muito incrível. Agora vamos tentar outra coisa. Vamos criar outro retângulo aqui e eu vou ajustá-lo para 450 por 80. Legal. Vamos aumentar o raio do canto para 24 e mudar a cor para este roxo claro. Vamos supor que esta é a nossa barra de abas, e vamos adicionar alguns ícones ou apenas formas simples. Vou criar um retângulo como este, e vai ser 45 por 45. Vamos mudar sua cor para branco. Eu vou ampliar um pouco e então eu vou criar outra forma, como um círculo e eu vou ajustá-lo para 45 por 45 também. Vamos mudar a cor para branco. Finalmente, eu vou duplicar o quadrado e aumentar o raio do canto assim, e eu vou girá-lo em 45 graus. Então vamos selecionar todas as nossas formas e clicar em distribuir espaçamento horizontal para obter o mesmo espaçamento entre nossas formas. Vou ajustá-lo para 91. Então vamos agrupá-los e selecionar nossa barra de abas e alinhá-la ao centro, tanto na horizontal quanto na vertical. No entanto, você precisa se lembrar, porque vamos fazer essas formas responsivas, precisamos desagrupá-las após o alinhamento. Vou clicar com o botão direito do mouse aqui, desagrupá-los, e selecionar a barra de abas, que é nosso plano de fundo aqui, assim, e mais uma vez, agrupá-los e eu vou chamá-lo de barra de abas. Então vamos pressionar Shift A para adicionar Auto Layout a este grupo, e tudo está feito. Como podemos verificar? A maneira mais fácil é tentar remover uma dessas formas. Eu vou remover o círculo, e lá vamos nós, nossa barra de guias está responsiva agora. Você pode até adicionar mais objetos e o tamanho mudaria automaticamente. Eu vou duplicá-lo, e como você pode ver, está funcionando perfeitamente. Isso é bastante incrível. Você também pode mudar seu lugar facilmente assim. Isso é fantástico. Agora vamos criar um grupo de layout de ordem mais complexo. O que acha que se pudéssemos criar um cartão responsivo, seria bom. Vamos em frente e criar um novo retângulo aqui e eu vou aumentar o raio para 40. Vamos mudar as dimensões para 300 por 400. Legal. Vou mudar a cor para branco e vamos adicionar um traço com o mesmo roxo claro que temos aqui. Então eu vou adicionar alguns detalhes a ele. Suponha que vamos ter uma imagem de perfil, precisamos de um círculo aqui. Vamos definir para 70 por 70 e eu vou mudar a cor para este roxo. Muito bom. Como você pode ver, o preenchimento superior está definido para 30. Vamos ajustar o preenchimento esquerdo para 30 também. Então eu vou adicionar algumas mensagens. Preciso de um nome. Vamos torná-lo menor. Acho que 18 pontos seria bom. Vou mudar a cor para este roxo também. Duplicar isso, e aqui eu vou escrever sobrenome, muito bom, e o preenchimento esquerdo vai ser 16 pixels como este. Então eu vou adicionar outro texto, que é a descrição, por exemplo, isso mesmo, Olá a todos. Neste vídeo, estamos falando de Auto Layout em Figma. Eu acho que é melhor torná-lo uma camada de texto de tamanho fixo como esta. Vou mudar a altura automática para 24. Bastante incrível. Vamos fazer este cartão um pouco menor por enquanto, o preenchimento superior vai ser 30, então precisamos ter 30 para o topo para este texto e 30 para o fundo. Como você pode ver, eu tenho 27 e eu preciso adicionar mais três para que eu possa ir para a altura, e aqui eu vou escrever mais três. Lá vamos nós. Vamos torná-lo maior um pouco. Fantástico. Agora, como podemos tornar este cartão responsivo? Precisamos usar outra técnica aqui, porque se nós apenas agrupá-los, deixe-me mostrar-lhe e pressione Shift e A, não vai funcionar e tudo vai ser desorganizado. Precisamos usar outra maneira. Neste caso, precisamos ter dois grupos diferentes com Auto Layout. Primeiro, precisamos criar um layout automático horizontal para este marcador de posição de imagem de perfil e essas duas tags. Vou selecioná-los e agrupá-los. Vamos chamá-lo de Usuário, e agora como você pode ver, temos dois objetos aqui que são colocados verticalmente. Se eu selecionar meu retângulo e também este usuário e este texto e agrupá-los e chamá-lo de cartão, agora eu posso adicionar Auto Layout perfeitamente, então eu vou pressionar Shift e A. Como você pode ver, eu acabei de criar um auto vertical auto layout. Mas precisamos criar um layout automático horizontal para o nosso usuário também. Agora precisamos agrupar este nome e sobrenome, bem como, a fim de usar um layout automático horizontal para esses dois objetos também. Agora, vou escolher o grupo de usuários e pressionar Shift e A, e como você pode ver, acabamos de criar um layout automático horizontal. Então eu vou selecionar meu cartão principal e pressionar Shift e A mais uma vez, e como você pode ver, eu acabei de criar um layout automático vertical. Eu vou abri-lo e eu vou definir o alinhamento do usuário para a esquerda e tudo está feito. Vamos tentar. Vou estender este texto um pouco para ver o que vai acontecer. Vamos ver se funciona ou não e sim, como você pode ver, funciona perfeitamente. Vamos escrever, sim, funciona perfeitamente. Isso é muito legal. Se você apenas tentar adicionar algumas linhas, você pode ver que ele aumenta o tamanho da altura automaticamente. Mas que tal para estes grupo de layout automático? Se eu tentar mudar o nome para outra coisa, como Mike e o sobrenome para White. Como você pode ver, nada acontece porque não é tão longo, então eu vou adicionar alguns caracteres aleatórios aqui. Como pode ver, funciona. No entanto, meu texto de descrição se move junto. Preciso corrigir esse problema. Para corrigir isso, eu vou selecioná-lo e como você pode ver, ele foi alinhado ao centro. Vou alinhá-lo à esquerda, e agora tudo está ótimo. Vamos tentar algo aqui. Vou copiar e colar. Lá vamos nós. Funciona perfeitamente. Tudo bem, pessoal. Muito obrigado por assistir este vídeo. Eu eu que você gostou e eu vou vê-lo no próximo vídeo. 35. Imagens: Olá a todos, e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos falar de imagens. Como designer de UX da interface do usuário, você trabalha com imagens o tempo todo. É tão importante saber como você pode usar recursos únicos, Figma, a fim de usar suas imagens corretamente. Sem mais delongas, vamos começar. Como você pode ver, eu criei um projeto simples aqui com apenas cinco círculos e três quadrados. Vamos adicionar imagens a estes círculos e também a estes cartões. Há muitas maneiras de você fazer isso. O primeiro é apenas arrastar e soltar suas imagens e, em seguida, você usará a opção Máscara, que abordaremos nas futuras lições. No entanto, há melhores maneiras de fazer isso. Primeiro, certifique-se de baixar o arquivo Assets que eu já preparei para você, e ele consiste em algumas imagens para esses cartões e algumas imagens para esses círculos. O primeiro caminho é ir para Shapes, e aqui temos Place Image. Se você baixou o arquivo Assets, poderá ver que tem duas pastas diferentes, Perfil e Cartões. Na pasta Perfil, você pode ver cinco imagens diferentes. Vou selecionar todos eles e clicar em “Abrir”, muito bem. Bem no topo, você tem duas opções: Colocar tudo, Descartar tudo. Se você clicar em “Colocar tudo”, todas as suas imagens serão colocadas de uma só vez, assim. Como você pode ver, você tem todas as suas imagens. Novamente, você precisa ir em frente e usar máscaras para colocá-lo nesses círculos. Mais uma vez, vou abrir essas imagens. Se você clicar em “Descartar tudo” aqui, nada acontece, você precisa selecionar mais uma vez. Como você pode ver, há um emblema vermelho no canto superior esquerdo de suas imagens, que indica o número de imagens que você deixou, por exemplo, aqui temos cinco. Se eu clicar aqui, você pode ver que minha primeira imagem será inserida na tela, e agora eu tenho quatro. Posso ir em frente e inserir todos eles. Deixe-me selecioná-los mais uma vez. Na maneira anterior, você poderia colocar suas imagens com suas próprias dimensões. No entanto, se você quiser alterar a dimensão, você pode facilmente arrastar e soltar assim, lá vamos nós. Você pode definir a dimensão como desejar. A última vez que colocaremos essas imagens em nossos círculos, e é tão fácil fazer isso. Se você passar o mouse sobre esses círculos e clicar, você pode ver que é tão fácil inserir sua imagem nesses círculos como este e isso é tudo. A próxima maneira que você pode inserir uma imagem no Figma é usar a seção de preenchimento. Eu vou segurar a tecla Command e eu vou selecionar estes cartões e aqui em preenchimento, se eu abrir este menu drop, você pode ver que você tem a opção Imagem e você pode escolher sua imagem assim. Você também pode alterar a exposição da sua imagem, o contraste, a saturação, a temperatura, os destaques temáticos e as sombras aqui. Você pode até girá-lo se quiser. Agora vamos adicionar imagens aos nossos cartões. Vamos em frente e escolha Colocar imagem. Aqui eu vou abrir cartas, e como você pode ver, há três imagens diferentes aqui, eu vou selecionar todas elas, clique em “Abrir”. Você precisa se lembrar de algo. Se sua imagem é tão grande, Figma irá redimensioná-la automaticamente antes que você possa inseri-la no Figma, então você precisa estar ciente desse problema também, assim e isso é feito. Você viu como é fácil usar imagens em Figma? Você também pode editar esses cartões facilmente assim, lá vamos nós. Tudo é responsivo, isso é muito legal, não é? A boa notícia é que, ao contrário de outros softwares e plataformas, em Figma, você pode inserir um arquivo GIF também. Vamos tentar. Agora, se eu visualizar esta prancheta clicando neste botão “Reproduzir”, você pode ver que essas imagens são estáticas. E se eu adicionar um arquivo GIF a um desses cartões? Por exemplo, este, eu vou para ir em frente e colocar uma imagem da pasta GIF, lá vamos nós. Agora, como você pode ver, é como outras imagens normais, no entanto, se eu tentar pré-visualizar isso, você pode ver que ele é realmente diferente de outras imagens, porque é um arquivo GIF e ele é reproduzido no Figma, O que é bastante incrível. Tudo bem, pessoal. Muito obrigado por assistir este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 36. Estilização: preenchimento: Olá a todos. Espero que esteja indo bem. Neste vídeo, vamos falar sobre a seção de campo. Sem mais delongas, vamos começar a inserir uma nova forma aqui. Vou criar um retângulo. Vamos aumentar o raio do canto assim, e à sua direita, na seção do inspetor, você pode ver a seção do campo. Aqui você pode escolher a cor desejada para o seu objeto ou até mesmo a sua camada de texto, como esta. Por exemplo, agora escolhemos vermelho. Esta cor vermelha tem um valor, o brilho de cada cor é chamado de seu valor. Como você pode ver, se adicionarmos branco a esta cor, ele fica mais claro e se adicionarmos preto a esta cor, ele fica mais escuro e mais escuro. Você também pode usar o conta-gotas para escolher sua cor assim, e você também pode escolher sua cor com o código Hex aqui. Você pode configurá-lo para RGB, CSS, HSL e HSB. Mas na maioria das vezes usamos código Hex. Às vezes precisamos mudar a opacidade de cada cor, nesse caso, você pode usar o controle deslizante assim, e como você pode ver agora ele fica transparente, ou você pode usar essa porcentagem aqui, como 20 por cento, muito bom. Na parte inferior, você pode ver as cores do documento. Como você pode ver, não temos nenhuma cor de documento porque ainda não criamos uma. No entanto, nas futuras lições, falaremos sobre isso. Bem no canto superior esquerdo, você pode ver um menu suspenso. Se eu abrir, você pode ver que você tem muitas opções. O primeiro é sólido, e como você pode ver, você só pode escolher uma cor única e base. Se você quiser usar um gradiente, você pode escolher linear como este. Por exemplo, eu posso escolher a segunda cor aqui. No entanto, ele é definido como transparente, eu posso aumentar a opacidade para 100 por cento, e com esses controladores, você pode mudar a direção do seu gradiente assim. Você pode até adicionar mais cores aos seus gradientes. Se você clicar aqui, assim, eu posso escolher esta cor bem, muito impressionante. A outra opção que você tem é gradiente radial. Você também tem angular como este. Então temos um diamante como este, e uma imagem que eu já falei. No entanto, as duas opções mais importantes são sólidas e lineares. Você também pode alterar a opacidade da sua cor ou gradiente aqui, assim. Você pode ocultá-lo se quiser ou removê-lo. Aqui, você pode alterar seu modo de cor de normal para saturação de cor, matiz, diferença. Falaremos sobre essas opções mais tarde. No entanto, se você quiser ver o que vai acontecer se nós mudá-lo, precisamos de outro objeto. Eu vou criar um novo retângulo como este, e vamos definir sua cor para algo como este azul, e eu vou mudar o modo de cor para cor, assim. Você pode ver a diferença aqui. Eu posso configurá-lo para sobrepor assim, tela, etc Tudo bem, pessoal, isso é tudo para este vídeo. Muito obrigado por assistir. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 37. Estilização: traçado: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre a seção de AVC. Primeiro de tudo, deixe-me criar uma nova forma. Desta vez, vou escolher um círculo como este, e logo abaixo da seção de preenchimento que falamos no vídeo anterior, temos a seção de traço. Vou clicar neste botão mais, a fim de adicionar o traçado à minha forma. Aqui temos propriedades diferentes, como cor. Novamente, você tem todas essas opções. Como no preenchimento, você tem a espessura do seu traço que você pode mudar aqui, e você tem a propriedade de posicionamento aqui, bem como você pode alterá-lo de dentro para centro e para fora. Basicamente, isso significa que esse traçado se aplica ao lado de fora da sua forma. Este aqui, significa que este golpe se aplica ao interior da sua forma. Aqui você tem a opção avançada, e já falamos sobre isso. Você tem Rodada, Quadrada, Flecha de Linha e Flecha de Triângulo. No entanto, ele não funciona aqui porque precisamos ter uma linha ou um caminho para usar essas opções. Você também pode fazê-lo correr. Por exemplo, eu posso escrever duas vírgulas cinco assim, ou digamos 10. Eu posso facilmente mudá-lo aqui, 40. Isso é muito legal. Claro, você pode escondê-lo ou removê-lo. Muito bem, pessoal, muito obrigado por assistirem este vídeo e eu verei vocês no próximo vídeo. 38. Estilização: efeitos: Olá a todos e bem-vindos de volta a outro vídeo das partituras. Neste vídeo, vamos falar sobre a seção de efeitos. Na verdade, usamos a seção de efeitos tantas vezes quando estamos projetando uma interface de usuário, por exemplo, há momentos em que você deseja adicionar algumas sombras ao seu objeto ou até mesmo ao seu texto, ou provavelmente você deseja adicionar um borrão para o seu objeto ou para o seu plano de fundo. Nesses casos, podemos usar a seção de efeitos. Sem mais delongas, vamos começar. Como você pode ver aqui, eu criei um quadrado simples e eu mudo sua cor para estes código de cor hexadecimal, 0038FF. Agora, eu vou adicionar um pouco de sombra a ele. Vamos para a seção Efeito, e eu vou clicar neste botão mais, e aqui você tem um menu suspenso. Você tem sombra interna, e como você pode ver esta opção irá adicionar algumas sombras dentro do seu objeto. Se você quiser modificar sua sombra, você pode clicar neste ícone de sol, e aqui você tem as opções avançadas. Você tem a quantidade de borrão. Agora está definido para quatro. Eu vou mudá-lo para 100, e como você pode ver, mudanças se aplicam imediatamente. Você também pode alterar o eixo x. Vamos definir para 20, e este para 10. Claro, você não pode ver as mudanças aqui porque na verdade está dentro do nosso objeto. No entanto, vamos tentar essas opções para sombras também. A próxima opção que você tem é a cor da sua sombra. Você pode facilmente alterá-lo para qualquer cor que desejar, e a opacidade é definida como 25% por padrão. Se você quiser mudá-lo, você pode, naturalmente, aumentá-lo ou diminuí-lo assim. Você também tem os menus de modo aqui. Bastante incrível. Vamos mudar o tipo de sombra para sombra. Na maioria das vezes usamos sombra quando estamos projetando uma interface de usuário. Agora, vamos mudar essa cor para preta, e eu vou defini-la para 25%. Bastante incrível. Então vamos mudar o borrão para 40 e o x para zero e o y para 20. Se você quiser obter uma boa sombra, você pode calcular seus números como eu. Por exemplo, se você definir o desfoque como 40, você poderia dividi-lo por dois e definir esse número como a quantidade y como aqui. Então eu vou mudar a opacidade para 20 por cento assim. Muito bom, não é? Como você pode ver, parece muito bom, no entanto, vou sugerir-lhe uma coisa. Para tornar a sua sombra mais realista, é uma boa ideia escolher a mesma cor para a sua sombra que a cor dos seus objetos assim e, em seguida, diminuir a opacidade para, por exemplo, 15% ou até 10%. É totalmente até você, no entanto, faz mais sentido porque realmente objetos coloridos não têm sombras pretas. Se eu duplicar esse quadrado, e eu mudar essa cor para, por exemplo, algo assim, eu posso mudar a sombra para a mesma cor e diminuí-la para 10 por cento ou 15 por cento assim. Você pode ver a ligeira diferença aqui? Torna-o mais realista. Agora vamos em frente e falar sobre outras opções também. Como você pode ver aqui, você tem desfoque de camada e desfoque de fundo. Se eu escolher o desfoque da camada, como você pode ver, ele desfoca minha camada selecionada, e eu posso alterar a quantidade aqui assim. Bastante incrível. Vou ajustá-lo para 10 e você tem o borrão de fundo também. Mas como você pode ver quando eu escolho isso, nada acontece porque eu não tenho nada por trás dessa forma. Se eu quiser ver o efeito da camada de fundo, eu preciso ter algo por trás dela. Vamos em frente e escolher este quadrado, e eu vou colocar uma imagem nele. Vamos escolher este. Bastante bom. Então eu vou colocar este quadrado em cima da minha imagem assim. Aqui, como você pode ver, o desfoque de fundo está selecionado, mas você não pode ver nada. Porque quando você estiver usando o desfoque de fundo, você precisa diminuir a opacidade do campo para ver as alterações, não a opacidade da camada. Se eu mudar para 50, podemos ver que nada acontece, mas se eu mudar a opacidade da minha cor para 50%, você pode ver o efeito. Agora vou mudar a cor também para algo assim, e vamos diminuí-la para 30 por cento. Vou mudar a quantidade de borrão para 20 por cento. Isso é fantástico. Deixe-me remover esta camada e, em seguida, adicionar um círculo aqui como este, torná-lo preto, e, em seguida, adicionar desfoque de fundo a ela, e vamos diminuir a opacidade para 30%. Eu vou definir a quantidade de borrão para 50, e agora você pode ver claramente o efeito. Você também pode adicionar efeitos às camadas de texto. Se eu criar uma camada de texto aqui, vamos escrever, olá, você pode ver que eu posso adicionar uma sombra, a sombra interna, o desfoque da camada, e também o desfoque de fundo tão bem como este. Tudo bem, pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 39. Estilo de cor: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre os estilos de cores. Assim como o têxtil, você pode criar seu próprio estilo de cor. Primeiro de tudo, vamos em frente e criar um retângulo aqui e eu vou aumentar o raio do canto para 40, assim. Então, vamos definir a cor sólida para algo como este azul, muito agradável, e eu vou duplicá-lo. Então, vamos mudar a opacidade para 75%. Mais uma vez, duplique-o. Desta vez, eu vou mudá-lo para 50% e novamente, eu vou duplicá-lo e agora vamos mudá-lo para 25%. Acabei de criar quatro cores diferentes com a mesma cor base, no entanto, com quatro valores diferentes. Como você pode ver, fica mais leve e mais leve. Vou selecioná-los, duplicá-los e aqui, vou escolher outra cor também, acho que esta é ótima. Vamos copiar e colar esses códigos de cores hexadecimais para os outros, assim. Mas, como você pode criar seu próprio estilo de cor? É tão fácil. Assim como os têxteis, primeiro você precisa selecionar seu objeto ou sua camada e, em seguida, aqui, você pode clicar sobre estes quatro pontos e aqui, você pode clicar neste ícone mais que cria seu estilo de cor. Vou escrever primário/roxo, porque parece uma cor roxa. Eu vou escrever primário/roxo, e vamos clicar em Criar estilo. Bastante bom. Então eu vou escolher este. Vamos fazer a mesma coisa para isso, e desta vez vamos escrever secundário/rosa. Para este, eu posso dizer roxo primário 75%, como este, e este, roxo primário 50% e assim por diante. Como você pode ver aqui, temos diferentes estilos de cores. Você tem roxo primário, você tem rosa secundário, roxo primário 75%, e assim por diante. Como você pode aplicar esses estilos de cores às suas formas ou objetos? É tão simples. Primeiro de tudo, vamos criar uma nova forma. Vamos criar um círculo aqui como este. Para aplicar seu estilo de cor, você pode clicar nesses quatro pontos, e aqui você pode obter acesso aos seus estilos de cores. Aqui temos primário, aqui temos secundário. Criamos quatro cores primárias diferentes, e apenas uma secundária. Vamos mergulhar na criação de seu próprio sistema de design em sua própria seção neste curso. Agora, eu posso escolher o púrpura primário e isso é tudo. Eu posso duplicar. Aqui, eu posso mudá-lo para rosa secundário, ou se você quiser alterar algumas propriedades desta forma, você pode separá-lo de seu estilo clicando neste ícone como este, e você pode mudar livremente a cor. Assim como estilos de cores, também podemos criar estilos para efeitos ou para um traçado. Se você clicar nesses quatro pontos, poderá criar um estilo de efeito ou um estilo de traçado. Quais são as vantagens de usar estilos de cores em seus projetos? Assim como os têxteis, criar seus estilos de cores vai economizar muito tempo. Porque, se você decidir mudar essas cores primárias mais tarde, você pode facilmente ir para este estilo de cor, e então você pode modificá-lo clicando neste ícone Editar Estilo aqui e as alterações serão aplicadas imediatamente. Pessoal, isso é tudo por este vídeo. Espero que tenha gostado, e te vejo no próximo vídeo. 40. Máscaras: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos falar de máscaras. Na verdade, as máscaras permitem que você mostre uma parte específica de uma imagem ou um objeto. Sempre que você quiser usar uma seção específica de uma imagem, você pode facilmente usar máscaras. Ou se você quiser apresentar apenas uma parte de um objeto, você ainda pode usar máscaras para isso. Como você pode usar máscaras? Como você pode ver aqui, eu criei um quadrado e coloquei uma imagem do nosso arquivo de ativos. Se eu quiser usar máscaras, primeiro, eu preciso escolher essas camadas e, em seguida, eu posso clicar no ícone Máscara direita na parte superior, assim. Depois de clicar neste ícone, suas camadas desaparecerão. Agora, eu posso selecionar minha imagem na lista da camada e então eu vou movê-la para o lado esquerdo. Como você pode ver agora ele foi cortado. Você precisa ter em mente que as máscaras se aplicarão a todas as camadas acima dela. Aqui se eu mover essas camadas de imagem para a parte inferior da minha máscara, você pode ver que nada acontece. A outra maneira de aplicar uma máscara à sua camada é escolher ambas as camadas. Primeiro, eu vou colocar esta imagem em cima do meu retângulo ou um quadrado. Então eu vou escolher os dois e, em seguida, clique na máscara como esta. A outra coisa importante que você precisa ter em mente é que se você estiver usando um gradiente ou um efeito para o seu retângulo e quiser usar máscaras, você precisa duplicar sua forma para manter esses efeitos. Se eu adicionar um pouco de sombra aqui como este, eu vou definir para 20 e o y para 10, e então eu vou criar minha máscara. No entanto, agora como você pode ver, minha cor de sombra foi alterada. A fim de corrigir esse problema. Antes de criar minha máscara, eu posso duplicar meu retângulo. Vou pô-lo aqui mesmo abaixo da minha camada de máscara. Então eu posso criar minha máscara facilmente. Agora, como podem ver, tenho um grupo de máscaras. Se eu quiser colocar esse retângulo, que é minha sombra, nesses grupos, eu preciso ter certeza de que eu coloco logo abaixo da minha camada de máscara aqui. Porque se eu colocá-lo acima disso, esta camada de máscara será aplicada a este retângulo também. Muito bem pessoal, muito obrigado por assistirem este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 41. Componentes: Olá a todos e bem-vindos de volta a outro vídeo do curso. Neste vídeo, vamos falar de componentes. Basicamente, os componentes são elementos reutilizáveis. Você pode criá-los uma vez e você pode usá-los várias vezes. É bastante incrível. Eles são como símbolos no Sketch. Sem mais delongas, vamos começar. Primeiro de tudo, vou em frente e criar um botão. Preciso de um retângulo. Vou arrastar e soltar. Vamos definir a largura para 270 e a altura para 70, assim. Então eu vou aumentar o raio do canto para 20. Bastante incrível. Acho que é uma boa ideia mudar a cor também. Vou ajustá-lo para esta cor. O código é 3562FF. Então preciso de uma mensagem. Vamos escrever primário. Vou escolher a fonte SF Pro Text e o peso do meio, e seu tamanho será de 20 pontos. Então vamos mudar a cor para branco para ter um bom contraste aqui, vou selecionar meus elementos, alinhá-lo ao centro, tanto vertical quanto horizontalmente. Agora vamos agrupá-los, e eu vou chamá-lo de botão barra primária. E eu acho que é uma boa idéia adicionar auto-layout a este botão. Vou pressionar Shift e um, e como você pode ver, o layout automático foi adicionado a este botão. A próxima coisa que precisamos fazer é clicar neste ícone para criar nosso componente. Se eu clicar nisso, está feito. Acabei de criar o meu primeiro componente. Nós também podemos adicionar uma descrição para o seu componente aqui para que eu possa escrever, é o botão principal como este. Agora, como você pode reutilizar este botão? É tão simples. Você se lembra que no painel de camadas tivemos a seção de ativos? Agora, se você abri-lo, você pode ver que em componentes locais nós temos nossos componentes criados aqui. Se eu quiser usar isso, posso facilmente arrastá-lo e soltá-lo. Se eu passar o mouse sobre isso, você pode ver a descrição que acabamos de escrever. Lá vamos nós. Como eu adicionei o layout automático a ele, eu posso facilmente mudar esses textos. Por exemplo, vamos escrever, começar. Seu tamanho mudará dinamicamente. Bastante incrível. Mas e se você quiser alterar algumas propriedades dessa instância. Na verdade, este botão é um incenso deste botão principal. Chamamos este botão de componente mestre, e este botão é uma instância deste componente mestre. Se você quiser alterar algumas propriedades disso, por exemplo, se você quiser mudar a cor, você pode facilmente ir para preencher a seção e você pode alterá-la. Como você pode ver, nada acontece com o componente de massa. No entanto, se você tentar alterar o componente de massa, ele afetará todas as suas instâncias. Na seção inspetor, você tem a seção de instância aqui, e aqui você tem um menu suspenso. Vou mostrar-te como podes usar isso. Mas se você quiser ir para o componente de massa, você pode usar este botão, assim. Agora estamos em componente de massa. Aqui, se eu tentar mudar a cor, você pode ver que sua instância mudará imediatamente. Ou se eu aumentar o raio do canto aqui, você pode ver que ele se aplica às suas instâncias imediatamente. Vou ajustá-lo de volta para 20. Agora vamos criar outro botão. Vou escolher este Primário 1. Vou duplicá-lo assim, e antes de fazer qualquer alteração aqui, precisamos separá-lo de sua instância. Primeiro, precisamos clicar e desanexar instância. Agora, se eu mudá-lo, nada acontece com o botão anterior. Vamos mudar a opacidade para 75%. Este vai ser o estado de pairar do nosso botão anterior. Eu vou para a lista de camadas e vamos mudar o nome para o botão pairar e clicar em “Criar componente”, e isso é feito. Agora, se eu selecionar estes botão Introdução e eu ir para este menu suspenso na seção de instância, eu posso ir para o botão. Claro, você tem componentes relacionados aqui. No entanto, porque eu usei barra quando eu nomeá-los, Eu poderia colocar todos esses botões nesses botão Grupo. Agora posso mudá-lo de primário para pairar. Lá vamos nós. Era tão simples. Agora vamos em frente e adicionar alguns efeitos a este botão. Eu vou escolher o componente mestre e , em seguida, clique neste botão mais na seção efeito, e aqui temos sombra. Eu vou para a seção avançada e vamos escolher a mesma cor aqui, e vamos mudar sua opacidade para 15%. Muito bem. Vou mudar a quantidade de borrão para 20 e a quantidade de y para 10. O x vai ser zero. É bastante incrível. Vamos criar outro botão aqui também. Vou duplicá-lo. Então eu vou separá-lo de seu componente mestre. Então isso mudou a opacidade para 25%. Vou remover esta sombra porque vai ser o nosso estado deficiente. Agora vou renomeá-lo para botão/desabilitar. Muito bom e clique em “Criar Componente”. Está feito. Se eu apenas selecionar este botão Introdução e eu ir para estes menu drop, eu posso facilmente escolher o mesmo. Foi tão fácil, não foi? Você pode fazer quase tudo um componente. Por exemplo, podemos ir em frente e criar um campo de texto. Vou selecionar a linha e vamos arrastar e soltar. Muito bom. Aqui criamos uma linha. Vamos escolher a mesma cor do nosso botão. Bastante agradável. Vou aumentar a espessura da nossa linha para dois. Fantástico. Vamos mudar a largura para 350 e precisamos de um texto aqui, então eu vou escrever campo de texto. Bastante agradável. Vamos mudar sua cor para este. Eu vou definir o preenchimento superior desta linha para oito pixels como este. Vamos mover este texto um pouco para a direita. Bastante incrível. Acho que é melhor diminuir a opacidade desses textos para 50%. Fantástico. Agora vamos agrupá-los. Vou chamá-lo de campo de texto/ativo, e vamos criar um componente a partir disso. Muito bom. No entanto, certifique-se de alinhar o texto à esquerda desta forma. Você também pode adicionar layout automático para isso, mas para o propósito deste vídeo, eu vou deixá-lo como está. Agora vamos duplicar. Vou separá-lo de seu mestre, e então vamos mudar a cor para algo assim. Este também e vai ser de 50 por cento. Este vai ser o estado de erro, então vamos mudar seu nome para erro e eu vou criar um componente. Agora, se eu ir para Ativos, em componentes locais, MacBook Pro-1, você pode ver que eu tenho campo de texto, e aqui eu posso usá-lo facilmente. Vamos mudar para mineração. Bastante incrível. Se eu quiser alterá-lo para o estado de erro, posso alterá-lo aqui facilmente. Lá vamos nós. Você poderia fazer seu cartão como um componente, seus botões, seus campos de texto, seus controles deslizantes, cada coisa, e ele é tão útil e poderoso e vai acelerar seu processo de design. Agora criamos nossos componentes e podemos usá-los localmente. No entanto, se você quiser compartilhar esses componentes com seus companheiros de equipe, você pode facilmente ir para a seção de ativos e você pode clicar neste ícone Biblioteca de equipe. Aqui você tem a capacidade de publicar seu arquivo atual para outros membros da equipe. Em seguida, eles podem usar todos esses componentes em outros projetos e outros arquivos, o que é muito legal. Tenha em mente que vamos praticar todo esse conhecimento nas lições futuras porque vamos criar nossos próprios projetos do mundo real com base nesse conhecimento. Não se preocupe se você não entender cada coisa aqui, é totalmente normal e você vai aprender isso pela prática. Espero que tenham gostado deste vídeo. Muito obrigado por assistir. Vejo você no próximo vídeo. 42. Variantes (NOVinho): Ei, bem-vindo de volta. Neste vídeo, vamos falar sobre um novo recurso legal que foi adicionado ao Figma recentemente, e é chamado de Variantes. O que esse recurso faz? Deixe-me mostrar-lhe um exemplo. Vamos supor que temos um botão, então eu vou ir em frente e criar um botão rapidamente. Deixe-me selecionar o retângulo e basta clicar e arrastar para criar este retângulo. Vou mudar a altura para 44 pixels e a largura para 100 assim. Deixe-me ampliar. Perfeito. Então eu vou fazer isso arredondado, então aumente o raio do canto para cinco. Fantástico. Finalmente, deixe-me mudar a cor para roxo assim. Bastante bom. Agora, para este botão, precisamos de uma camada de texto. Vou pressionar “T” no meu teclado e clicar para criar uma nova camada de texto. Vamos escrever o botão. Então eu vou mudar sua cor para branco assim. Seu tamanho divertido vai ser 14. Então eu vou selecionar ambas as camadas e alinhá-las horizontalmente e verticalmente. Isso é bom. Mais uma vez, selecione ambos e eu vou adicionar o layout automático para eles. Pressione “Shift e A” no teclado assim. Agora, nós acabamos de criar um botão simples que é dinâmico como este. Como eu mostrei antes, você pode criar um componente deste botão como este. Você poderia apenas criar um componente e está totalmente bem. Mas vamos supor que temos diferentes estados deste botão. Deixe-me duplicar. Comando D ou Controle D. Eu vou movê-lo para baixo. Para o primeiro, vou renomeá-lo para Button/Primário/Padrão assim. Este segundo é uma instância deste componente. Primeiro, vou separá-lo. Vou clicar neste ícone de três pontos e clicar em “Desanexar instância”. Agora, eu vou mudar seu nome para Button/Primário/Hover. Este é o estado de foco deste botão como este. Então eu vou adicionar outro campo para a seção de campo, que é uma camada de sobreposição e eu vou alterá-lo de Linear para Sólido. É branco. Isso é perfeito. Deixe-me diminuir a opacidade de 100 por cento para 10 por cento. Fantástico. Lembre-se de criar um componente. Lá vamos nós. Temos o segundo botão e se eu for para a guia Ativos, você pode ver que temos dois botões. Até agora, tudo bem. Deixe-me criar mais um botão e, em seguida, vamos saltar para usar Variantes. Eu vou duplicá-lo, movê-lo para baixo, desanexá-lo de seu componente mestre, e eu vou renomeá-lo para Button/Primário/Pressionado. Desta vez eu vou mudar a cor da nossa sensação de sobreposição e em vez de branco, eu vou usar preto. Deixe-me aumentar a opacidade para 20%. Agora deixe-me criar um componente e terminamos. Vamos supor que estamos trabalhando em um projeto e você deseja usar um desses botões. Você pode ir para a guia Ativos e você pode arrastar e soltar Button/Primário. Se você precisasse do estado de foco, você poderia trocar a instância aqui para Hover, Pressionado e qualquer outra coisa. Mas agora você pode usar Variantes, que é uma maneira muito legal de organizar seus componentes em um único componente. Deixa-me mostrar-te como funciona. Neste momento, temos três componentes diferentes. Mas e se pudéssemos combinar esses componentes em um único componente? É tão simples de fazer. Basta selecionar todos os seus componentes, todos estes três componentes. No Inspetor, você pode encontrar Variantes, clique em “Combinar como Variantes”. Lá vamos nós. Como você pode ver, um novo quadro foi criado aqui, e nós o chamamos de conjunto de componentes. É indicado com esta borda tracejada. O legal é que você pode personalizar a aparência deste conjunto de componentes. Você pode modificar a cor da borda como esta de acordo com suas marcas, cores, e você pode basicamente estilizá-la como quiser. Mas, por enquanto, vou deixar como está. Deixe-me selecionar meu conjunto de componentes e no lado direito, você pode ver sob a seção Variantes, temos duas propriedades diferentes. Propriedade 1, Propriedade 2. A Propriedade 1 é basicamente o tipo de nosso botão neste caso. Pode dar o nome que quiser. Mas por enquanto, vou escrever Type porque faz sentido. Mas e a segunda propriedade? A segunda propriedade é basicamente os estados. Vou escrever “State “assim. Agora, se eu for para a guia Ativos, você pode ver que temos apenas um componente, que é o botão. Posso arrastá-lo e soltá-lo na minha tela. No lado direito, você pode ver que temos Tipo e Estado. Para o Tipo, já que temos apenas um tipo de botão, que é Primário, não precisamos alterá-lo. Mas para o Estado, podemos mudá-lo para Hover. Podemos mudar para “Pressionado “assim. Isso é tão simples, não é? Isto é o que chamamos de Variantes unidimensionais porque temos componentes basicamente diferentes aqui com as mesmas propriedades, no entanto, com valores diferentes. Em geral, temos Variantes unidimensionais e Variantes multidimensionais. Vou mostrar a vocês como você pode criar Variantes multidimensionais também, então não se preocupe. Mas antes de saltar para Variantes multidimensionais, deixe-me dar-lhe mais dois exemplos aqui. Vamos supor que você deseja criar um switch que tenha realmente dois estados diferentes ligados e desligados. Vamos em frente e criar rapidamente um switch juntos. Para mudar, precisamos criar um retângulo como este. Vou definir a largura para 60 e a altura para 30 assim. Então eu vou fazer arredondado completamente, já que é um interruptor. Deixe-me mudar a cor para branco. Fantástico. Agora, eu vou duplicar. Pressione “Command D” ou “Control D” no teclado. Então eu vou diminuir a largura desta nova camada, esta camada duplicada para 30 para que eu obtenha 30 por 30 pixels círculo. Então eu vou movê-lo para o lado direito assim. Você poderia mudar sua cor para verde. Vou mudá-lo para este verde. Perfeito. Finalmente, vou reduzi-lo um pouco. Mantenha pressionadas as teclas “Shift e Option” juntas ou “Shift e Alt Key” e tente reduzi-las assim até obter um círculo de 24 por 24 pixels. Fantástico. Deixe-me ir ao Layers, e agora vou agrupá-los. Deixe-me renomeá-lo para Switch/On. Então eu vou duplicar. Comando D ou Controle D, mova-o para baixo. Vou clicar duas vezes neste círculo verde para selecioná-lo, movê-lo para o lado esquerdo. Certifique-se de manter o mesmo preenchimento aqui. Aqui temos um preenchimento de três pixels para cima, direita e inferior. Se você quiser ver o preenchimento, você pode manter pressionada a tecla “Option” ou “Alt” no teclado e passar o mouse sobre o elemento assim. Então aqui temos três, três e três. Isso é perfeito. Por último, mas não menos importante, precisamos mudar a cor de verde para cinza para indicar que esse interruptor está desligado. Finalmente, deixe-me renomeá-lo para Switch/Off. Então eu vou selecionar os dois. Na Barra de Ferramentas, em vez de clicar neste botão, vou clicar neste ícone de seta para abrir este menu e clicar em “Criar Vários Componentes”. Deixe-me mostrar-lhe o que acontece se você clicar neste botão. Se você clicar sobre isso, você criará um único componente, que não está correto. Vou apertar “Command Z” ou “Control Z” para desfazer o processo. Deixe-me criar vários componentes. Lá vamos nós. Agora temos dois interruptores diferentes, Switch/On, Switch/Off. Se eu passar para a guia Ativos, você pode ver que temos dois componentes diferentes. Isso é bom. Mas vamos levar isso a outro passo usando Variantes. O que precisamos fazer é selecionar os dois e combiná-los como Variantes. Lá vamos nós. Agora, eu vou mudar o nome da propriedade aqui para Switch. Como usamos desligado e ligado no nome desses switches se tentarmos adicionar uma instância aqui, você pode ver que não temos mais esse menu suspenso. Nós temos esse recurso legal Switch como este, e é muito bom. Deixe-me selecionar meu conjunto de componentes do switch e tentar renomear isso Desativado para, por exemplo, Desativar e isso Ativado para Ativar. Agora, não temos mais essa funcionalidade. Temos este menu. Funciona perfeitamente. No entanto, usando esse recurso legal, você poderia torná-lo ainda melhor. Vou escrever aqui e aqui. Você poderia usar verdadeiro e falso também. Além disso, você poderia modificar sua posição assim. Você pode clicar e arrastar para alterar sua posição. Eu vou colocar em primeiro lugar. Deixe-me mostrar-lhe como você pode usar verdadeiro e falso. Vou renomeá-lo para falso e você terá a mesma funcionalidade. Perfeito. Você pode ver como essas variantes são incríveis? Este foi outro exemplo unidimensional. Vou mostrar-vos mais um exemplo e então vamos saltar para a criação de variantes multidimensionais. O próximo exemplo será um botão de opção. O que precisamos para um botão de rádio? Obviamente, precisamos de um círculo. Você pode pressionar O no teclado também. Mantenha pressionada a tecla “Shift” e arraste para criar um círculo. Vou definir a largura e a altura para 30. Está tudo bem agora. Vamos mudar a cor para branco. Então eu vou duplicar. Pressione “Command D” ou “Control D” no teclado. Mantenha pressionadas as teclas “Shift” e “Alt”, ou “Shift” e “Option”, e tente reduzi-las assim. Para o círculo interno, vamos ter um círculo de 18 por 18 pixels como este. Agora, eu vou mudar a cor para este roxo assim. Deixe-me ir para a aba “Camadas”. Vou selecionar os dois, agrupá-los, apertar “Command G” ou “Control G” no seu teclado. Deixe-me renomeá-lo para Botão de Rádio/Ligado. Vou duplicá-lo, movê-lo para o lado direito, e clique duas vezes neste círculo interno, removê-lo, e vamos renomear o grupo para Botão de Rádio/Desligado. Selecione ambos, crie vários componentes como este e, enquanto esses dois componentes são selecionados, clique em Combinar como Variantes. Lá vamos nós. Agora deixe-me ir para a guia Ativos, arraste e solte o botão “Rádio”. Temos a Propriedade 1. Não mudamos o nome. Se você quiser renomeá-lo, certifique-se de selecionar o conjunto de componentes, não o componente em si. Seu conjunto de componentes, que é o botão de opção. Aqui, você pode clicar duas vezes nesta Propriedade 1, e vamos escrever Estado. Lá vamos nós. Agora, temos o Estado. É muito bom, não é? Agora, vamos falar sobre variantes multidimensionais. Primeiro de tudo, vou em frente e criar uma nova página aqui para organizar nossos componentes. Esta é a nossa página 1. Vou mudar o nome para Unidimensional assim. Vou criar uma nova página clicando neste ícone de adição, e deixe-me escrever Multidimensional. Perfeito. Deixe-me voltar para Unidimensional. Vou selecionar este conjunto de componentes de botão, copiá-lo, Comando C ou Controle C, ir para a página Multidimensional e colá-lo, pressione “Command V” ou “Control V.” O que vamos fazer aqui? Primeiro de tudo, vou em frente e ampliar este quadro. Vou ampliá-lo assim para que tenhamos mais espaço para trabalhar. Então eu vou organizar esses botões. Vou movê-lo para a primeira fila para este também. Temos um botão com três estados diferentes como este. Deixe-me fazer esta moldura menor. Primeiro de tudo, eu vou mover esses componentes para fora deste conjunto de componentes, para que não tenhamos mais variantes. Se formos para Ativos e se formos para Multidimensional, temos três componentes diferentes, o que significa que não estamos mais usando variantes. Agora, precisamos renomear esses botões. Como podemos fazer isso? Vou selecionar todos eles. Vou apertar “Command R” ou “Control R” no meu teclado. Aqui, usando esta janela, posso renomear todas as minhas camadas, todos os meus componentes ao mesmo tempo com funcionalidades legais. Eu vou para este campo Renomear Para e deixe-me clicar neste botão de nome atual. Desta forma, estamos recebendo o nome atual da nossa camada, e então podemos adicionar mais texto a ela. Eu vou escrever/e depois sem ícone, perfeito. Clique em “Renomear”. Lá vamos nós. Acabamos de mudar o nome de todos os nossos botões. Isso é incrível. Agora, eu vou duplicá-los, Comando D ou Controle D, movê-los para baixo. Estas são as instâncias de nossos componentes principais. Como você sabe, precisamos separá-los de seus componentes principais. Mais uma vez, vou mudar o nome deles. Pressione “Command R” ou “Control R.” Aqui no campo Correspondência, vou escrever o texto Sem Ícone. Certifique-se de escrever exatamente da mesma maneira que você escreveu antes, é tão importante. Sem Ícone. Em seguida, substitua-o por With Icon e pressione “Renomear”. Agora, nós acabamos de substituí-lo facilmente. Então aqui, vamos adicionar um ícone a esses botões. Como podemos fazer isso? É tão simples. Vou em frente e criar uma estrela apenas para este exemplo. Deixe-me definir a largura e a altura para 16 pixels. Vou mudar a cor para branco, fantástico. Então mova-o para cá. Arraste e solte. Como você pode ver, uma vez que estamos usando layout automático, a largura foi alterada automaticamente. Isso não é o que queremos porque queremos manter a largura do nosso botão primário. Para corrigir isso, vou para a seção Auto Layout no inspetor. Para o preenchimento horizontal, vou escrever 16 pixels como este. Isso é exatamente o que eu preciso. Vou repetir o mesmo processo para todos os meus botões. Vou selecionar minha estrela, apertar “Command C” ou “Control C”, selecionar este botão e pressionar “Command V” ou “Control V” para colá-lo. Agora, vou mudar a posição deste ícone do lado direito para o lado esquerdo. Eu posso usar a tecla de seta para a esquerda no meu teclado para fazê-lo de forma simples. Mais uma vez, selecione o botão, mude o preenchimento horizontal para 16. Por último, mas não menos importante, vou fazer a mesma coisa para o meu último botão. Tudo está feito. A última coisa que precisamos fazer é criar componentes. Vou selecionar esses três botões e criar vários componentes. Perfeito. Agora, temos seis componentes diferentes, e é hora de criar variantes. Vou selecionar todos eles e clicar em Combinar como Variantes. Lá vamos nós. Acabamos de criar variantes multidimensionais. No lado direito, se vamos para a seção Variantes, podemos ver Propriedade 1, Eu vou escrever Tipo. Propriedade 2, vou escrever “State”. Propriedade 3, vou escrever Icon. Aqui, temos Com Ícone, Sem Ícone. Como mencionei antes, você poderia simplesmente renomeá-lo para Ativado e Desativado para obter esse recurso de alternância. Agora, eu posso ir para o Assets, Multidimensional. Pode arrastar e largar. Lá vamos nós. Temos primário, temos estados como este, temos ícone ou sem ícone. Isso é incrível. É basicamente assim que funciona uma variante multidimensional. Mas e se pudéssemos dar outro passo adicionando um novo tipo de botão aqui? Agora, temos o botão primário, mas podemos adicionar um botão secundário também. Como posso fazer isso? É tão simples. Primeiro de tudo, vou selecionar meu conjunto de componentes. Então eu vou ampliar esta fronteira ou, digamos, moldura assim. Finalmente, vou selecionar todos os meus botões, apertar “Command D” ou “Control D” e movê-los para baixo. Primeiro de tudo, eu vou selecionar todos eles, esses três botões sem ícone, e deixe-me mudar sua cor. Vá para “Cores de seleção” e tente alterar o U assim. Eu acho que é bom. Certifique-se de pegar esses códigos de cores hexadecimais, copiá-lo e selecionar os outros três botões, e colar a cor aqui. Terminamos com a cor deles. A única coisa que resta é mudar seus nomes. O que devemos mudar aqui? Precisamos mudar a palavra-chave primária para secundária e estamos feitos, basicamente. Vou selecionar todos eles, apertar “Command R” ou “Control R” no seu teclado. Aqui no campo de texto Corresponder, vou escrever Primária. Significa “começar primário”. Então eu vou substituí-lo com o Secundário como este. Se eu apertar “Renomear”, eles são renomeados. Você não precisa fazer mais nada. Vamos dar uma chance. Eu vou para “Ativos” e eu vou arrastar e soltar este botão. Agora, em vez de primário, vou escolher o secundário e temos outros estados. Você pode ativar um ícone como este. É assim que você pode criar diferentes tipos de seu botão. Vamos recapitular. Primeiro, você precisa lembrar que temos dois tipos diferentes de variantes: variantes unidimensionais e variantes multidimensionais. A segunda coisa que você precisa lembrar é que você pode usar variantes ou componentes. Você deve ter em mente que você precisa ter componentes se você quiser usar variantes. A última coisa que você precisa lembrar é que você deve tentar organizar suas propriedades muito bem. Se eu selecionar este componente definido aqui, eu tenho Tipo, Estado, Ícone. Certifique-se de nomeá-los corretamente, porque mais tarde, à medida que seu projeto cresce, você vai achar fácil trabalhar com ele. A última coisa que vou mencionar aqui é que você poderia realmente modificar a ordem dessas propriedades. Se você fizer o pedido neste tipo ao lado dele, poderá ver que um ícone aparece. Se eu clicar e arrastar assim, posso alterar a ordem dessas propriedades, o que é tão legal. Baseado no nível de importância, você poderia modificá-los. Mas neste caso, acho que Type, State e Icon fazem sentido. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. Vejo você então. 43. Grades de layout: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre as grades de layout. Basicamente, as grades de layout nos ajudarão a projetar com precisão, que possamos entender onde exatamente nossos objetos devem ser colocados ou como você pode colocar seus objetos em diferentes tamanhos de tela. Para adicionar uma grade de layout, você pode ir para o painel de propriedades ou inspetor e, bem no meio, você pode ver a seção de grade de layout. Vou clicar neste “Botão” Plus como este e na configuração avançada, você pode definir o tamanho. Por exemplo, eu posso configurá-lo para oito se eu vou usá-lo para projetar aplicativos móveis e eu posso configurá-lo para 10 se eu estiver projetando uma página da Web. Você também pode modificar a cor assim e a opacidade, é claro. Se você quiser alterar o tipo de sua grade de layout, você pode facilmente ir para este menu suspenso. Como podem ver, temos três opções diferentes. O primeiro é grade, e isso é o que você pode ver aqui. O segundo é colunas. Neste caso, você tem mais opções para modificar, por exemplo, você tem contagem, então isso significa o número de suas colunas que você deseja usar. Se você estiver projetando uma página da web, você pode configurá-la como 12, é a grade de layout mais famosa para projetar uma página da web. Em seguida, você tem tipo, largura e margem. A largura é desativada porque estamos usando o tipo de estiramento, então basicamente significa que ele se estende todas as 12 colunas em toda a nossa placa de arte. Se eu mudá-lo para o centro, você pode ver que a largura será habilitada, então eu posso facilmente definir a largura para 30 ou até mesmo 60 como este, e ele está centralizado. A quantidade da calha é o espaço entre colunas e linhas e aqui você pode configurá-lo para a direita, você pode configurá-lo para a esquerda e esticar. Quando você deve usar o centro? Por exemplo, se você estiver projetando uma página da Web para uma tela ultra-ampla, você pode usar essa opção central. Você também pode alterá-lo para linhas, como você pode ver. O próximo ponto importante que vou mencionar é que as grades de layout não dependem da dimensão do seu quadro de arte. Significa que se eu tentar redimensionar este quadro de arte assim, você pode ver que sua grade de layout estará intacta. Tudo bem, pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 44. Plug-ins: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre plugins no Figma. Na verdade plugins são scripts de terceiros ou aplicativos que estendem a funcionalidade de outro aplicativo. A fim de fazer algo rapidamente ou mesmo magicamente você pode usar plugins em seu projeto. Agora vou mostrar a vocês como podemos encontrá-los, como você pode instalá-los, desinstalá-los e, finalmente, como você pode usá-los. Vamos para “Plugins” diretamente na seção “Recentes” no seu painel. Esta janela é dividida em três seções diferentes. Plugins em destaque, populares e instalados. Na seção de plugin em destaque, você pode encontrar todos os plugins em destaque por Figma, como você pode ver aqui, temos Sympli Handoff, temos Vectary 3D, que vamos aprender na seção de modelagem 3D deste curso, temos Master, Arrow Auto, Clean Document, etc Existem inúmeros plugins lá fora que você pode usar em seu projeto. No entanto, agora vou mostrar-lhe os plugins mais importantes e mais populares, e vamos aprender a usá-los. Como você pode ver na seção popular, temos esses plugins. O primeiro é chamado de “Unsplash”, que é tão útil. Se eu clicar nisso, você pode ver a descrição aqui. Você pode inserir belas imagens do Unsplash diretamente em seus projetos. É um grande plugin e também é um ótimo site. Você pode usar imagens isentas de royalties deste site. A fim de instalar o plugin, você pode clicar neste botão e isso é tudo ele está instalado e se você quiser desinstalar um plugin, você pode novamente, clicar sobre isso e está feito. Muito legal. Você pode obter todas as informações sobre estes plugin aqui, pode clicar em “Ver tudo” você pode aprender sobre cada versão diferente. Vamos voltar aos plugins e aqui, como você pode ver, você tem unsplash na seção instalada, então temos Conteúdo Reel. É outro bom plugin que lhe dá dados aleatórios , a fim de que você crie tudo com dados reais. Vou instalá-lo também. Então temos gráficos. Você pode criar gráficos diferentes. Não precisamos disso por enquanto. Você tem o Map Maker, o que é tão legal. Você pode facilmente escrever seu endereço neste campo de texto e ele cria uma tela do Google Maps ou até mesmo e uma tela Mapbox. Vamos instalá-lo também. Temos isométrico, é tão fixe. Vou instalá-lo. Temos Vectary 3D vamos instalá-lo também porque temos uma seção completa sobre modelagem 3D neste curso. Você poderia usar modelos 3D em seu design. Então você tem Renomear It e Themer, eu não vou instalá-los agora. Agora vamos clicar em “Procurar todos os plugins”. Aqui eu vou procurar um plugin chamado Brandfetch. Lá vamos nós. É o segundo. Vou instalá-lo também. Vamos procurar Palette. Aqui vamos nós, e isso é tudo por enquanto. Na verdade, você pode ir em frente e instalar todos eles. No entanto, na minha opinião, é melhor ir e verificar sua descrição, obter algumas informações de que como esses plugins funcionam, e então você pode decidir qual deles é adequado para o seu projeto. Agora vamos criar um novo arquivo. Vou pressionar “A” para adicionar um quadro de arte. Vou escolher o MacBook Pro. Então vamos criar um retângulo aqui. Vou aumentar o raio do canto para torná-lo agradável. Agora, uma vez que meu objeto é selecionado, eu posso ir para a seção do menu. Aqui eu posso abrir plugins. Tenho todos os meus plugins prontos aqui. Por enquanto, vou escolher Unsplash e ter em mente que você pode usar apenas um plugin de cada vez. Não é possível usar dois ou mais plugins ao mesmo tempo. Agora temos Unsplash plugin aberto e você pode facilmente clicar em “Inserir aleatório.” Lá vamos nós. Você pode obter uma imagem aleatória imediatamente. Você também pode escolher essas predefinições, por exemplo, mínimas ou natureza, coloridas. Claro que você também pode procurar. Por exemplo, vamos escrever retrato e lá vamos nós. É bastante incrível. Você pode facilmente escolher um. Fantástico. Você pode ver como esses plugins são incríveis e poderosos? Agora posso criar um texto. Vamos escrever o nome. Vou aumentar o tamanho para 40. Em seguida, vamos para a seção plugin e eu vou selecionar Conteúdo Reel. Agora, como você pode ver, você tem diferentes opções nestes plugin. Por exemplo, você tem texto, você tem avatares, você tem ícones. Primeiro de tudo, vamos experimentar esta opção de texto. Como você pode ver, eu selecionei minha camada de texto de nome, e eu vou clicar nele neste “Nomes”. Lá vamos nós, você tem um nome aleatório. Se eu clicar mais uma vez, podemos ver que posso obter nomes aleatórios aqui. Se eu clicar nesses pontos, você pode definir algumas configurações. Por exemplo, você pode definir se deseja um nome em inglês dos EUA, francês, espanhol. Se eu escolher francês, você pode clicar em “Aplicar” e lá vamos nós. Você pode até mudar o sexo. Por exemplo, aqui temos macho ou fêmea. Você pode especificar se deseja apenas o nome ou sobrenome como este. Você pode ver a visualização de suas configurações definidas aqui. Agora, se você quiser obter um número de telefone, você pode clicar em “Telefone”. Lá vamos nós. Se você quiser obter um endereço, você pode clicar em “Endereço” e aqui está o seu endereço. Você poderia obter números, você poderia obter data e hora, assim. Surpreendentemente, você também pode gerar algum conteúdo Lorem ipsum como este. Você pode obter endereços de e-mail e alguns URLs como este. Agora vamos tentar a seção de avatares e ícones. Primeiro precisamos criar um círculo. Então eu vou clicar em “Avatares”. Aqui posso usar macho, fêmea , macho e fêmea. Vou escolher uma mulher. Lá vamos nós. Se eu duplicar este círculo várias vezes e eu selecionar todos eles, e clicar em “Masculino e Feminino”, você pode ver que eu tenho imagens diferentes para cada círculo, que é bastante incrível. Se você quiser usar ícones, primeiro você precisa baixar alguns fundos porque estes não são ícones PNG, que você poderia usar facilmente. Primeiro você precisa baixar alguns fundos especiais, e então você pode usar esses ícones. Agora, vamos tentar o Map Maker. Primeiro preciso ter certeza se instalei ou não. Parece que esqueci de instalá-lo. Vamos clicar em “Gerenciar plugins” e vamos procurar todos os plugins. Agora vamos procurar o Map Maker. Vamos instalá-lo. Eu vou para plugins, e lá vamos nós. Aqui vamos inserir um endereço. Não sei, vamos escrever para Harrison. Lá vamos nós. Você poderia ser mais específico, você poderia adicionar alguns números. No entanto, para o propósito deste tutorial, eu acho que é o suficiente. Você também pode decidir se deseja obter uma tela do Google Maps ou um Mapbox, assim, também podemos modificar algumas propriedades aqui. Por exemplo, você pode alterar o tipo de mapa de Roteiro para Satellite para Híbrido. Você também pode alterar o nível de zoom. Por exemplo, vou modificá-lo para 16, assim. Você também pode adicionar um marcador. Por exemplo, este aqui, isso é muito incrível. O próximo plugin que vamos falar é Brandfetch. Há momentos em que você pode precisar obter um logotipo de um site e é demorado ir apenas procurar por esse logotipo, salvá-lo e, em seguida, inseri-lo em Figma. Em vez disso, você poderia usar esses plugins. Suponha que queremos obter o logotipo da Apple. Se eu escrever seu nome de domínio como seu site, apple.com e eu clicar em “Obter logotipo”. Você pode ver o logotipo da Apple imediatamente. Eu posso escalá-lo, posso reduzi-lo. Vamos tentar outro logotipo também, Brandfetch. Vamos escrever figma.com e lá vamos nós. É incrível, não é? O próximo plugin que vamos falar é a Paleta. Se você quiser criar uma grande paleta de cores, mas você não sabe como escolher suas cores. Estes plugin permite que você crie paletas de cores incríveis em um segundo, como você pode ver, você pode alterá-lo do padrão para interface de usuário como este. Você pode refrescá-lo. Você pode escolher uma foto para obter algumas cores a partir disso. Você pode salvá-lo. Lá vamos nós. Você tem suas Paletas de cores prontas para usar. Você pode obter o código de cor hexadecimal ali. É bastante fantástico. Neste vídeo você aprendeu como instalar plugins, como desinstalar isso, como você pode usá-lo em seus projetos. Espero que tenha gostado muito deste vídeo. Muito obrigado por assistir, e eu vou vê-lo no próximo vídeo. 45. Como exportar: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre exportar seus arquivos. Como designer de UI/UX, você precisa saber como exportar seus arquivos corretamente para entregá-los ao desenvolvedor ou ao cliente. Suponha que você deseja exportar essas imagens, a fim de fazer isso, antes de tudo, você pode selecionar um objeto e, em seguida, na seção Propriedade, você tem a seção Exportar. Se eu clicar neste ícone “Plus”, você pode ver que você pode modificar essas configurações. Como você pode ver, por padrão, ele está definido como 1x. O que isso significa? Isso significa que se você exportá-lo como ele é, você terá a mesma dimensão do seu arquivo. No entanto, se você estiver projetando isso para um aplicativo que requer que você tenha um tamanho de arquivo diferente, você pode abrir este menu suspenso, e você pode configurá-lo para 2x ou 3x. Você também pode escrever o sufixo aqui e, em seguida, você pode especificar o formato. Por exemplo, você pode configurá-lo para PNG, JPG, SVG e PDF, e então você pode visualizá-lo e, finalmente, você pode clicar em “Exportar” e lá vamos nós, você pode facilmente definir um nome e clicar em “Salvar”. No entanto, se você não quiser exportar seus arquivos e quiser apenas compartilhar este projeto com seus companheiros de equipe ou com seu cliente, você pode ir até a seção Barra de Ferramentas e clicar neste botão azul, que é chamado de Compartilhar, e aqui você pode convidar alguém para ver este projeto ou para editar este projeto, depende totalmente de você. Você também pode copiar o link e enviá-lo para outra pessoa. Se você quiser apresentar este projeto em seu site, você pode clicar em “Obter código de incorporação”, e você vai obter um código iframe que você pode pegar e copiar e colá-lo em seu arquivo HTML e você vai obter esses projetos ao vivo em seu site, por isso, se você fizer alguma alteração aqui, ela será aplicada ao seu site também. É bastante incrível. Muito bem pessoal, muito obrigado por assistirem este vídeo, espero que tenham gostado e vejo-vos no próximo vídeo. 46. Criação de protótipos: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre prototipagem em Figma. Como designer de UX da interface do usuário, é crucial saber sobre prototipagem e tão importante dominar este tópico porque não importa o quão bonito e incrível seus projetos são, no final do dia, se você não pode apresentá-lo em um maneira incrível, seu trabalho duro não compensa, então você precisa dominar este tópico. Por esta razão, temos uma seção completa sobre prototipagem neste curso. Neste vídeo, vou mostrar como funciona a prototipagem e quero familiarizá-los com o conceito. Sem mais delongas, vamos começar adicionando duas placas de arte. Eu vou pressionar “A” no meu teclado e vamos escolher o iPhone 11 Pro ou X. Então eu vou duplicar isso porque precisamos de duas placas de arte diferentes e vamos adicionar um retângulo a este primeiro quadro de arte como este. Vou aumentar o raio do canto para 40. Bastante bom. Deixe-me alinhá-lo ao centro. Então eu vou escolher uma foto do nosso arquivo de ativos. Por exemplo, vamos escolher este na pasta Cards, número 2. Vou abrir e colocar aqui. Bastante incrível. Então, no segundo quadro de arte, vamos criar outro retângulo. Bastante bom. Deve caber no seu quadro de arte. Então eu vou colocar a mesma imagem aqui. Fantástico. Agora é hora de adicionar interações ao nosso design. Deixe-me renomeá-lo para me referir a isso facilmente, então vou mudar o nome para Início e o segundo para Detalhe. Bastante bom. Na verdade, se o usuário clicar nessa imagem em nosso quadro de arte da Casa, nosso quadro de arte Detalhe deve ser apresentado em um segundo. Então precisamos animá-lo. Em primeiro lugar, na seção de propriedades, você pode selecionar Protótipo dessas três guias como esta. Então você precisa selecionar seu objeto. Como você pode ver, minha imagem já está selecionada. Como você pode ver, um círculo aparece aqui. Então, se eu clicar sobre isso e segurar meu mouse assim, eu posso facilmente conectá-lo ao próximo quadro de arte. Vamos deixar isso e lá vamos nós. Agora nossas placas de arte estão conectadas. Se eu quiser remover essa conexão, posso arrastá-la e soltá-la na tela assim. Depois de criar sua primeira conexão, um pequeno quadrado azul aparecerá no canto superior esquerdo do seu primeiro quadro de arte. Significa que o seu protótipo começa a partir deste quadro de arte. Se você quiser alterá-lo, você pode facilmente clicar sobre isso, arrastá-lo, e soltá-lo aqui assim. Agora que criamos nossa interação, vamos visualizá-la por um segundo. Se eu ir para a barra de ferramentas e clicar neste botão Pré-visualização, eu posso ver minhas placas de arte aqui. Se eu clicar em qualquer lugar do meu quadro de arte como este, podemos ver que ele me mostra que há uma interação para esta imagem. Então esta caixa azul é um ponto quente. Agora, se eu clicar nisso, você pode ver que meu segundo quadro de arte aparece imediatamente. No entanto, não temos nenhuma animação aqui. Vamos voltar ao nosso arquivo do projeto. Na seção Protótipo, você tem seção Interações, você tem Animação. Aqui podemos escolher o tipo de interação. Por exemplo, temos On Tap, On Drag, While Hovering, While Pressioning , Mouse Enter, etc. Nós não vamos mergulhar nesses detalhes agora porque vamos cobri-lo na seção de prototipagem deste curso. Você também tem o destino aqui. Navegue para, Abrir sobreposição, Trocar com, Voltar, Fechar sobreposição e Abrir URL, e aqui está o seu destino. Então temos a seção Animação também. Como você pode ver, ele é definido como instantâneo por padrão. Se eu abrir este menu, tenho muitas opções. Eu tenho o Smart Animate, que é um novo recurso. Temos Mover In, Mover Out, Empurrar, Slide In e Slide Out. Agora vou escolher o Smart Animate e aqui temos opções avançadas. Por exemplo, posso escolher Facilidade de entrada, Facilidade de saída, Facilidade de entrada e saída e Linear. Estes estão relacionados com coisas de Animação. Vamos cobri-lo na seção avançada. Aqui você tem tempo. Por exemplo, posso configurá-lo para 400 milissegundos assim. Você também pode abrir a configuração do protótipo aqui. Está relacionado a esta janela. Podemos modificar, por exemplo, o fundo muito branco como este como você deseja. Você pode alterar o modelo do seu iPhone, por exemplo. Aqui está definido para Ouro. Posso escolher o Verde da Meia-Noite assim. Fantástico. Agora vamos verificar mais uma vez. Eu vou para a primeira página e agora vamos clicar em nossa imagem. Lá vamos nós. É fantástico, não é? Se você quiser começar de novo, você pode clicar neste botão, reiniciar, e então você pode verificá-lo mais uma vez. Agora vamos voltar ao nosso arquivo do projeto. Aqui, como você pode ver, o nome de nossos retângulos nessas duas placas de arte é diferente, então vamos torná-los iguais. Vou mudá-lo para Imagem e esta imagem também. O que acha que vai acontecer? Vamos verificar isso. Eu vou para Prototipagem, vamos reiniciar isso, e mais uma vez, eu vou clicar nisso. Fantástico. Você viu a diferença aqui? Com a ajuda do Smart Animate, você pode criar esse tipo de animação e prototipagem facilmente no Figma, o que é bastante incrível. Se você estiver indo para mergulhar em animações mais complexas e prototipagem mais complexa na seção de prototipagem deste curso. Tudo bem, pessoal. Isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 47. Multiplayer e comentário: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre multiplayer e comentários. Na verdade, Figma tem recursos poderosos para facilitar a colaboração dos designers. Então, como já mencionei, você pode facilmente compartilhar seu projeto com este botão azul. Se eu clicar nisso, como você pode ver, eu já convidei uma pessoa e eu defino a configuração que ele pode editar este projeto. Então ele recebeu um e-mail da Figma, ele aceitou isso e a partir de agora ele pode colaborar comigo para editar este projeto. Como você pode ver na barra de ferramentas, há duas pessoas visualizando este projeto. O primeiro sou eu, o segundo é essa pessoa, que também sou eu neste tutorial. Agora vou te mostrar como você pode usar isso. Deixe-me mudar para essa conta de design de interface do usuário. Lá vamos nós. Suponha que eu escolha essa camada, se eu voltar para minha conta principal, você pode ver que ela já foi selecionada. Por quem? Este design de interface do usuário. Se eu mudar a posição do meu cursor aqui, você pode ver que ele irá mudar imediatamente neste projeto também, ou vamos selecionar outro objeto, por exemplo, este menu e lá vamos nós. O design da interface do usuário está fazendo algo com essa camada. Se eu selecionar o fundo aqui, esta é a minha conta e eu mudar para a outra conta, você pode ver este traçado roxo que indica que eles escolheram este plano de fundo. Você pode ver essas cores na barra de ferramentas para reconhecer qual pessoa está selecionando qual objeto. É muito legal, não é? Agora suponha que eu quero adicionar alguns comentários aqui. Na barra de ferramentas ao lado da nossa ferramenta de texto, há outro ícone para comentar. Se eu clicar nisso, posso colocar um marcador aqui, por exemplo, aqui e posso escrever um comentário, por exemplo, onde está o CTA? Que é “Chamada à Ação”. Posso postar. Eu posso até mencionar alguém aqui como adicionar design UI e esta pessoa vai receber um e-mail sobre este comentário e ele pode responder para mim. Feito. Nesta conta, podemos ver que há um comentário. Eu clico nisso, eu escrevo, onde está o CTA? Posso responder, vou desenhá-lo esta noite. Também podemos adicionar um emoji aqui. Muito legal. Responder, isso é incrível e aqui na minha conta, eu posso ver a resposta imediatamente, que é muito fantástico. Se este problema tiver sido resolvido, você pode clicar no botão Resolver e este comentário será removido. Como você pode ver, Figma oferece muitos recursos para colaborar com outros designers sem exportar seus arquivos e enviá-los e todas essas coisas. Assim, você pode cooperar instantaneamente com outras pessoas e compartilhar suas ideias sobre seu design. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 48. Atalhos de teclado: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre atalhos de teclado em Figma. Como designer, é muito importante conhecer os atalhos mais importantes da plataforma que você está usando para projetar. Devido ao fato de que o Figma é um software multiplataforma, é muito difícil cobrir todos esses atalhos em um vídeo. No entanto, em vez de mencionar e discutir todos esses atalhos, vou mostrar-lhe uma maneira muito boa e rápida de que você pode descobrir os atalhos que você precisa para o seu fluxo de trabalho. Quer esteja a utilizar o macOS ou o Windows, pode utilizar esta forma em ambos os sistemas operativos. Como você pode ver bem no canto inferior direito, há um ícone de ponto de interrogação, que é chamado de ajuda e recursos. Se eu clicar sobre isso, você pode ver que há muitas mais opções aqui. Um deles diz Atalhos de Teclado, e isso é exatamente o que precisamos. Vamos clicar nos atalhos de teclado. Lá vamos nós. Agora temos acesso a todos esses atalhos em um único lugar. Como você pode ver, ele é categorizado em diferentes seções, como Essential, Ferramentas, Vista, Zoom, Texto, Forma, etc. Porque eu estou usando o macOS, por exemplo, aqui ela me mostra a tecla Command, mas se você estiver usando o Windows, certeza, você verá Controle aqui. Ou, por exemplo, se eu for para View, aqui eu tenho Command; para você, se você estiver usando o Windows, é Controle com certeza. Desta forma, você pode facilmente encontrar os atalhos que você precisa. Mas agora, vou mencionar alguns dos atalhos mais importantes que você pode precisar para este curso. Vamos começar com copiar e colar. Como outros softwares para copiar e colar, você pode facilmente escolher seu elemento como este texto e você pode usar o Command C. Se você quiser colá-lo, você pode usar o Command V no macOS. No entanto, se você estiver usando o Windows, você pode pressionar Control C e Control V, e você obterá o mesmo resultado. Se eu quiser agrupar essas camadas, por exemplo, essas camadas Windows e macOS assim, posso pressionar Command G no meu teclado. No entanto, no Windows, você pode pressionar Control G. Se quiser duplicar algo, selecione a camada desejada e pressione Command D no macOS. Se estiver a utilizar o Windows, poderá premir Control D. Para dimensionar algo, você pode ir aqui e escolher a ferramenta de escala, ou você pode pressionar K no teclado. Não importa se você está usando o macOS ou o Windows, porque você não precisa usar as teclas Command ou Control. Você só precisa simplesmente pressionar K no teclado. Como você pode ver agora, a ferramenta de escala está selecionada. Por último, mas não menos importante, se quiser verificar os acolchoamentos e as margens, mantenha premida a tecla Option no teclado se estiver a utilizar o macOS desta e passe o rato sobre outros elementos perto dos elementos seleccionados. Como você pode ver, agora eu tenho este número que é indicado com um texto vermelho, e este é o preenchimento entre esses dois elementos. No Windows, você pode manter a tecla Alt pressionada no teclado e fazer a mesma coisa. Se você quiser diminuir o zoom, você pode manter pressionada a tecla Command e rolar assim, diminuir o zoom e ampliar. No Windows, você pode manter a tecla Control pressionada e fazer a mesma coisa. Isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 49. Introdução aos elementos de interface de interface: Olá a todos. Bem-vindo de volta a outra seção deste curso. Nesta seção, vamos falar sobre elementos de interface do usuário, que são tão importantes quando você está projetando uma interface de usuário. Na próxima série de vídeos, vamos falar sobre campos de texto, botões, controles deslizantes, cartões, diálogos ou até mesmo passos e gráficos. Se você está confuso sobre todos esses elementos, sugiro que você esteja assistindo esta seção. Vejo você na próxima série de vídeos. 50. Campos de texto: Ei, pessoal, bem-vindos de volta a outro vídeo desta seção. Neste vídeo, vamos falar sobre campos de texto. Como você deve saber, os campos de texto são elementos de interface do usuário, que permitem aos usuários inserir um texto em uma interface do usuário. Eles geralmente aparecem em diálogos e formulários. Quase todos os aplicativos móveis e também sites usam pelo menos um tipo de campos de texto. Por exemplo, você pode usá-los para inserir datas, nomes, hora, etc. Como um designer de interface do usuário, você precisa saber a anatomia de um campo de texto conforme descrito na imagem. Você pode encontrar diferentes tipos de campos de texto em diferentes plataformas. Portanto, recomenda-se saber sobre os elementos de interface do usuário padrão que um sistema operacional específico usa. Se você olhar para a imagem à direita, você pode ver que temos a anatomia de um campo de texto. Como você pode ver, nós temos o rótulo, nós temos o texto de entrada, nós temos o ícone de direita, que é opcional, como você pode ver, é o número três. Além disso, temos indicador de ativação. Às vezes, você pode usar o ícone de entrada de voz ou até mesmo um ícone suspenso. No final, você pode ver que nós projetamos diferentes estados de um campo de texto. Por exemplo, se o usuário inserir a senha incorretamente, a cor do campo de texto pode mudar para outra coisa, por exemplo, vermelho. 51. Botões: Ei, todo mundo. Neste vídeo, vamos falar de botões em design. Botões permitem que os usuários tomem ações, portanto, sempre que um usuário precisa fazer algo, os botões entram em jogo. Eu acho que agora você entende como é importante saber sobre design de botões. Ao projetar um botão, certifique-se de prestar atenção aos seguintes pontos. Número 1, estados. Projete todos os estados do botão, como ativo, inativo, tocado, pairar, etc. Número 2, hierarquia. Conheça a hierarquia de seus botões. Por exemplo, seja alta ênfase, média ênfase ou baixa ênfase. Número 3, colocação. Vários tipos de botões podem ser utilizados para representar vários níveis de ênfase. Número 4, botão de texto. Botões de texto são normalmente usados para ações menos pronunciadas, por exemplo, em caixas de diálogo e cartões, e por último, mas não menos importante, contraste. Os botões devem ter contraste suficiente para expressar a importância de sua funcionalidade. Se você olhar para a imagem à direita, você pode ver que temos diferentes estados de um botão. Por exemplo, temos ativo, como você pode ver, ele tem uma cor nítida e a opacidade é 100%. Por outro lado, temos inativos para mostrar que este botão está desativado por enquanto, que é cinza aqui. Também temos tocado assim, quando o usuário toca esse botão, ele muda para essa cor específica. Como você pode ver, temos que é azul claro e no final, como você pode ver, temos quatro botões diferentes. Temos botão de texto, também temos botão de contorno, e, em seguida, conter botão, e também botão de alternância. Você precisa usá-los cuidadosamente quando você está projetando uma interface de usuário, porque é tão importante saber a expectativa do usuário e também em termos de experiência do usuário, é melhor usar o tipo correto de botão em seu design. 52. Sliders: Ei, todo mundo. Neste vídeo, vamos falar sobre controles deslizantes em design. Os controles deslizantes permitem que os usuários façam seleções a partir de um intervalo de valores. Eles são ideais para ajustar configurações, como brilho, volume, etc. Os controles deslizantes podem ter ícones em ambos os lados da barra. Quando você estiver projetando um controle deslizante, certifique-se de prestar atenção às seguintes coisas. Número 1, estados. Projete todos os estados do controle deslizante, como habilitar, desabilitar , tocar, passar o mouse, etc., assim como botões. Número 2, ajustando. Os controles deslizantes só devem ser usados para escolher seleções de um intervalo de valores. Número 4, rapidez. Os controles deslizantes devem reagir imediatamente, portanto, as mudanças devem ser instantâneas e, por último, mas não menos importante, acessibilidade. Os controles deslizantes devem fornecer toda a gama de opções disponíveis para o usuário selecionar. Se você olhar para a imagem no lado direito, você pode ver que temos dois controles deslizantes diferentes. O primeiro é o controle deslizante contínuo. Como você pode ver neste tipo de controle deslizante, você pode modificá-lo continuamente e sem qualquer interrupção. Por outro lado, no segundo tipo de controles deslizantes, que é controle deslizante discreto, você não pode modificá-lo sem qualquer interrupção. Existem alguns pontos fixos que o usuário pode escolher. 53. Dicas de ferramentas: Ei, todo mundo. Neste vídeo, vamos falar sobre dicas de ferramentas em design. As dicas de ferramentas são para exibir textos informativos quando os usuários passam o mouse sobre, focam ou tocam em um elemento. Quando você estiver projetando uma dica de ferramenta, certifique-se de prestar atenção às seguintes coisas. Número 1, concisão. As dicas de ferramentas devem exibir apenas um breve texto. Não adicione uma imagem ou informações detalhadas. Número 2, emparelhamento. As dicas de ferramentas são sempre emparelhadas perto do elemento ao qual estão associadas. Por último, mas não menos importante, transitório. As dicas de ferramentas aparecem ao passar o mouse, focar ou tocar e desaparecem após uma curta duração. O tempo recomendado é de 1,5 segundos. Como você pode ver no lado direito, temos uma dica de ferramenta que mostra texto informativo. Temos um atalho para negrito, e também temos informações adicionais aqui, salve para Confirmar botão. Certifique-se de usá-los corretamente. 54. Controles de seleção: Olá a todos. Neste vídeo, vamos falar sobre controles de seleção. Os controles de seleção permitem que os usuários selecionem facilmente entre diferentes opções. É útil para declarar preferências como configurações. Quando você estiver projetando seu controle de seleção, certifique-se de prestar atenção aos seguintes pontos. Número 1, familiaridade. Controles de seleção têm sido usados no design de interface por um longo tempo e devem ser utilizados conforme esperado. Número 2, eficiência. Controles de seleção levam usuários facilmente comparar duas ou mais opções. Por último, mas não menos importante, digitalizável. Os controles de seleção devem ser exibidos de forma que os usuários possam reconhecê-los rapidamente. Os itens selecionados devem ser visualmente distinguíveis dos itens não selecionados. Como você pode ver no lado direito da tela, temos três controles de seleção diferentes. O primeiro é interruptores. É útil para direcionar uma única opção ativada ou desativada, e é tão popular. O próximo é botões de rádio. Eles são úteis para selecionar uma única opção de uma lista. A última é a caixa de seleção, e é útil para selecionar um ou vários itens de uma lista. Certifique-se de usá-los da maneira certa. 55. chips: Ei, todo mundo. Neste vídeo, vamos falar de fichas. chips permitem aos usuários fazer seleções, acionar ações, inserir informações, etc Ao contrário dos botões que devem ser uma chamada à ação consistente, chips devem aparecer dinamicamente como um grupo de vários elementos interativos. Quando você estiver projetando um chip, certifique-se de prestar atenção às seguintes coisas. Número 1, estados. Assim como botões e controles deslizantes, você precisa projetar todos os estados de seus chips, como habilitar, desabilitar, tocar, passar o mouse, etc Número 2, relevância. Os chips devem ter uma relação útil com o conteúdo ou tarefa que representam. O último, compacidade. Os chips são elementos compactos que representam informações distintas. Se você olhar para a imagem no lado direito, você pode ver que temos chips diferentes. Alguns deles têm ícones ou até mesmo uma imagem. Por outro lado, alguns deles só têm um texto. Certifique-se de usá-los no design da interface do usuário com cuidado. 56. Cartões: Ei, todo mundo. Neste vídeo, vamos estar falando sobre cartões no design da interface do usuário. Cartões são contêineres que exibem conteúdo e ações em um único assunto. Eles devem ser fáceis de digitalizar e elementos como imagens ou textos devem ser colocados sobre eles de uma forma que certamente indica a hierarquia. Quando você estiver projetando cartões, certifique-se de prestar atenção às seguintes coisas. Número 1, individual, um cartão não pode ser dividido em várias cartas. Você não deve mesclar um cartão com outro. Número 2, independência. Um cartão não precisa depender de seus elementos ao redor. Ele pode ficar sozinho. Por último, mas não menos importante, componentes. Opcionalmente, um cartão pode ter mídia avançada, como imagens ou vídeos, textos, botões, ícones e miniaturas. Atualmente, a maioria dos designers usa cartões em seu design de interface do usuário. Então, se você quiser usá-los também, certifique-se de usá-los com cuidado. 57. Diálogos: Olá a todos. Neste vídeo, vamos falar de diálogos. diálogos informam os usuários sobre informações críticas ou até mesmo tarefas. Eles também pedem aos usuários que tomem uma decisão ou escolham entre diferentes opções. Por exemplo, as caixas de diálogo podem ser usadas para pedir permissão ou até mesmo escolher entre uma variedade de variáveis diferentes em um controle deslizante e muito mais. Quando você estiver projetando diálogos, certifique-se de prestar atenção às seguintes coisas: número 1, hierarquia. Uma caixa de diálogo tem a hierarquia mais alta e bloqueia o uso do aplicativo até que o usuário execute uma ação de diálogo. Número 2, visibilidade. Uma caixa de diálogo deve ser facilmente reconhecível. Eu recomendo adicionar uma sobreposição escura à exibição e colocar a caixa de diálogo em cima disso. Número 3, direto. Uma caixa de diálogo deve transmitir a mensagem de uma forma compreensível e clara. Por último, botões. Eu recomendo usar botões lado a lado em uma caixa de diálogo, como você pode ver na imagem. 58. Listas: Ei, todo mundo. Neste vídeo, vamos falar de listas. Listas são um grupo contínuo de imagens ou textos. Eles são compostos de itens, incluindo ações primárias e secundárias, que são representados por ícones e texto. Quando você estiver projetando listas, certifique-se de prestar atenção aos seguintes pontos. Número 1, consistência. As listas devem apresentar ícones, tags e ações em um formato consistente. Número 2, ação. As listas mostram o conteúdo de uma forma que torna mais fácil reconhecer um item específico na coleção e agir sobre ele. Por último, mas não menos importante, digitalizável. As listas devem ser classificadas de forma lógica que facilitem a digitalização do conteúdo. Como você pode ver no lado direito da tela, temos diferentes tipos de listas. Por exemplo, aqui temos seus contatos. Como você pode ver, ele é composto de imagens e tags, e também tem um ícone. 59. Tabelas: Ei, todo mundo. Neste vídeo, vamos falar de mesas. Tabelas são contêineres que mostram os diferentes registros dos usuários, como produtos, preços, status, datas etc. Uma tabela de dados contém uma linha de cabeçalho na parte superior que lista os nomes das colunas seguidos por linhas para dados. Eles geralmente são roláveis e fáceis de digitalizar. Se você precisar preencher alguns dados, que são classificáveis e seguem o mesmo padrão, você pode usar tabelas. Quando você estiver projetando tabelas, certifique-se de prestar atenção às seguintes coisas. Número 1, expansível. As linhas em uma tabela podem ser expansíveis para permitir que o usuário avalie informações adicionais sem perder seu contexto. Número 2, paginação. paginação funciona apresentando o conjunto de números em uma exibição com a capacidade de navegar para outro conjunto. Por último, cabeçalhos fixos. Corrigir o cabeçalho da linha enquanto um usuário percorre uma tabela ajuda o usuário a saber sobre o nome da coluna. 60. Navegação: Ei, todo mundo. Neste vídeo, vamos falar de navegação. Navegação é o ato de se mover entre telas de um aplicativo para concluir tarefas. Por exemplo, você pode navegar da página Explorar de um aplicativo para a página Perfil. Existem diferentes tipos de navegação. Número 1, lateral , refere-se ao movimento entre telas no mesmo nível de hierarquia. O principal componente de navegação de aplicativos deve fornecer acesso a todos os destinos no nível superior de sua hierarquia. Número 2, para a frente , refere-se a mover-se entre telas em níveis consecutivos de hierarquia. Por último, mas não menos importante, inverter, refere-se a mover para trás através de telas hierarquicamente dentro de um aplicativo ou cronologicamente dentro de um aplicativo ou entre aplicativos diferentes. 61. Menus: Olá a todos. Neste vídeo, nós vamos estar falando sobre Menus em design de interface de usuário. Um menu exibe uma lista de opções em uma superfície provisória. Ele aparece quando os usuários interagem com um botão, ação ou outros tipos de controles. menus permitem que os usuários façam uma seleção a partir de várias opções. Ao contrário dos controles de seleção, os menus são menos pendentes e ocupam menos espaço. Quando você estiver projetando menus, certifique-se de prestar atenção aos seguintes pontos. Número 1, digitalizável; as opções de menu devem ser fáceis de digitalizar. Número 2, rápido; menu deve ser fácil de abrir, fechar e interagir. Por último, mas não menos importante, posicionamento; Menus aparecem na frente de todos os outros elementos da interface do usuário. 62. Gráficos: Olá a todos. Neste vídeo, vamos falar de gráficos. Gráficos ajudam os usuários a comparar valores de forma visualizada. Quando se trata de comparar muitos valores, é muito mais fácil olhar para gráficos em vez de números em uma grade. Ao projetar gráficos, certifique-se de prestar atenção às seguintes coisas. Número 1, visibilidade. visibilidade de um gráfico é tão importante porque às vezes você tem um gráfico com detalhes muito pequenos. Número 2, consistência. Coloque seus gráficos em um cartão para manter seu design limpo e consistente. Por último, margens. Certifique-se de que há espaço em branco suficiente entre seus gráficos e outros elementos. Mais tarde neste curso, você aprenderá como criar gráficos e como usá-los em seus projetos. 63. Steppers: Olá a todos. Neste vídeo, vamos falar de steppers. Steppers mostram o progresso através de uma sequência de etapas lógicas e numeradas. Às vezes você pode usá-los para navegação. Os Steppers podem exibir uma mensagem de feedback temporária, depois que uma etapa é salva. O uso de steppers pode ajudar os usuários a evitar perder seu foco, quando eles precisam preencher formulários ou tomar alguma ação. Quando você estiver projetando steppers, certifique-se de prestar atenção às seguintes coisas. Número 1, seções. Não incorpore steppers em outros steppers ou use vários steppers em uma página. Número 2, tipos. Geralmente, existem dois tipos de etapas, etapas editáveis e etapas não editáveis. Temos horizontais steppers e verticais steppers. Por último, feedback. Opcionalmente, você pode projetar feedback transitório para mostrar aos usuários a progressão. Você só deve usar feedback sempre que houver uma latência de linha entre as etapas. 64. Snackbar: Olá a todos. Neste vídeo, vamos falar de lanches. Snackbars fornecem feedback conciso sobre uma operação através de uma mensagem na parte inferior da tela. Eles devem conter uma única linha de texto diretamente relacionada à operação realizada. Eles também podem conter um botão. Quando você estiver projetando lanches, certifique-se de prestar atenção aos seguintes pontos. Número 1, deve ser breve. Snackbars só devem exibir informações breves sobre uma operação e não informações detalhadas. Número 2, transitório. Snackbars automaticamente tempo limite da tela para que eles devem desaparecer rapidamente. Por último, mas não menos importante, hierarquia. Se a ação for importante o suficiente para bloquear o uso do aplicativo, você pode usar caixas de diálogo em vez de lanches. As lanches só usam um botão se for necessário e não mais. Como você pode ver no lado direito da tela, temos dois exemplos diferentes. O primeiro grupo de lanches são projetados perfeitamente porque não tem mais de um botão e as cores que foram usadas são ótimas. No entanto, por outro lado, o segundo grupo de nossas lanches tem dois botões, o que não é ideal para lanches. Também usou um ícone, além do texto. 65. O que é Wireframing?: Oi, todo mundo. Neste vídeo, nós vamos estar falando sobre wireframing. Wireframing é uma maneira de projetar um aplicativo ou serviços de site a nível estrutural. Um wireframe é geralmente usado para colocar conteúdo e funcionalidades em uma página que leva em conta as necessidades e experiências do usuário. Podemos considerar a criação de um esqueleto gráfico. Semelhante ao modelo de um carro, o wireframe determina os detalhes de todo o projeto na fase inicial como a descrição do projeto. A maioria dos iniciantes pensa que wireframing e prototipagem são de alguma forma os mesmos, no entanto, eles não são. Um wireframe é um design de baixa fidelidade, portanto não ilustra a aparência final da interface do usuário. Por outro lado, um protótipo é um design de alta fidelidade e é dinâmico e interativo. prototipagem parece quase com o produto final. 66. Flow de usuário: Olá a todos. Neste vídeo, vamos falar sobre o fluxo de usuários. O fluxo de usuário é um caminho percorrido por um usuário protótipo em um aplicativo ou site para concluir uma tarefa. O fluxo do usuário os direciona do ponto de entrada por meio de um conjunto de fases para um resultado bem-sucedido e ação final, como enviar uma mensagem ou comprar um item. Deixe-me dar-lhe um exemplo de um fluxo de usuário muito simplificado para um aplicativo de comércio eletrônico. O usuário inicia a partir da página inicial. Na página inicial, o usuário clica em uma página “Categoria”. Em seguida, na página Categoria, o usuário clica em um “Produto”. Em seguida, na página Produto, o usuário adiciona um item ao carrinho e, em seguida, do carrinho de compras, o usuário faz o check-out. Depois disso, a partir da página Checkout, o usuário conclui o pagamento e, no final, o usuário pode obter seu recibo. É assim que um fluxo de usuário se parece e é muito importante cada projeto tenha pelo menos um fluxo de usuário simplificado. 67. Protótipos interativos: Oi, todo mundo. Neste vídeo, vamos falar sobre protótipo interativo. Atualmente, a prototipagem está desempenhando um papel cada vez mais vital no processo de design. Você, como designer UI/UX, precisa saber como fazer um protótipo de alta fidelidade do seu projeto de forma que ele possa transmitir claramente a mensagem do seu design e também a interação exata que você deseja alcançar. Não só a prototipagem pode ajudá-lo como designer a mostrar seu trabalho, mas também pode ajudar os desenvolvedores a saber como seu design deve ser convertido em código. Aqui estão algumas ferramentas úteis que você pode usar para prototipagem interativa. Sketch, ele pode ser usado para prototipagem interativa simples. InVision Studio, ele pode ser usado para prototipagem interativa moderna e complicada. Princípio, ele pode ser usado para prototipagem interativa moderna e detalhada, e muito mais. Por exemplo, você pode usar o ProtoPie também para prototipagem avançada. 68. Ferramentas de wireframe: Olá a todos. Neste vídeo, vou falar sobre ferramentas de wireframe. Agora que você sabe a importância do wireframe no design UX da interface do usuário, é hora de falar sobre as ferramentas que são absolutamente úteis para preparar seu wireframe. Embora alguns designers prefiram usar software autônomo para wireframing, há designers que preferem usar ferramentas baseadas na Web para wireframing. Não importa o jeito que você gosta de escolher, certifique-se de manter seu wireframe consistente. Aqui estão algumas ferramentas úteis que você pode usar para wireframing. Número 1, MockFlow, você pode usar mockflow.com, e oferece uma variedade de serviços gratuitos e pagos. Número 2, Figma, você pode usar figma.com, e também oferece serviços gratuitos e pagos. Número 3, esboço, é um aplicativo pago, e por último, mas não menos importante, Adobe XD, que é gratuito, e você pode instalá-lo no macOS e no Windows. 69. Wireframe no Figma: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre wireframing em Figma. Como mencionei anteriormente em vídeos anteriores, criar um wireframe de baixa fidelidade é uma tarefa importante para um designer de UX da interface do usuário. Neste vídeo, eu vou mostrar como você pode criar seu próprio wireframe usando um kit de interface de usuário wireframe pré-fabricado por Figma. Primeiro de tudo, vou pedir que você abra este URL, figma.com/templates/wireframe-kits. Nesta página, você pode encontrar esses kits wireframe que foi projetado por Figma e se você rolar um pouco para baixo você pode obter uma cópia gratuita disso. Clique nisso e então você verá algo assim. Este é um kit de interface de usuário wireframe pré-fabricado que foi projetado por Figma e eu vou mostrar-lhe como você pode usar isso. Primeiro de tudo, como você pode ver, você tem três páginas diferentes. começar, construir o seu próprio e exemplo. Na página inicial, se eu ampliar um pouco você pode ver que você tem algumas informações sobre todos esses componentes. Por exemplo, temos botões e cartões, temos navegação, temos aqui seções, temos prova social, temos recursos à esquerda, recursos à direita, etc Então temos construir o seu próprio e exemplos. Vamos abrir “Construa o Seu Próprio”. Aqui você tem uma moldura. Eu vou excluir esses componentes e supor que nós estamos indo para criar um wireframe para um site. Primeiro, precisamos de uma seção de heróis. Posso ir facilmente ao Assets. Aqui, eu tenho muitos componentes. Eu tenho herói, eu tenho rodapé, recursos à direita, recursos à esquerda, CTA, etc Vamos começar com herói e aqui eu tenho três opções diferentes. Vou começar com o primeiro. Vamos arrastar e soltar aqui. Vou colocá-lo aqui e alinhá-lo ao centro. Perfeito. Como você pode ver, é o centro de heróis. Eu posso facilmente ir para a seção Instância do inspetor. Posso abrir este menu e a partir daqui posso mudá-lo para o que eu quiser. Por exemplo, eu posso mudá-lo para imagem do lado herói como esta. Prefiro este porque também tenho uma imagem. Vamos ficar com este. Então, eu vou aumentar o tamanho da altura do meu quadro. Vamos aumentá-lo um pouco para ter mais espaço para trabalhar. Perfeito. Depois disso, vou adicionar alguns recursos. Vamos abrir Recursos. Muito bom. Vou usar este aqui. Fantástico. Porque é um wireframe de baixa fidelidade, você não precisa se preocupar com todas essas informações, todas essas cores. Mantenha-o o mais simples possível. Então eu vou adicionar algumas postagens. Vamos abrir a seção de postagens. Daqui, eu posso usar o rabo de poste assim. Claro, você pode editar essas tags e todos esses conteúdos, se quiser. Depois disso, vou adicionar alguma prova social, como depoimento. Vamos usar este, parece ótimo. Depois disso, preciso de um CTA. Vamos abrir o CTA e eu vou escolher o Centro CTA. Muito bom. Preciso aumentar a altura do meu quadro. Deixe-me selecioná-lo. Por último, mas não menos importante, vou adicionar um rodapé porque é necessário ter um. Vamos usar este rodapé completo. Fantástico. Isso é tudo. Como você pode ver, eu não adicionei nenhuma navegação. Mas é necessário ter um, então vamos adicionar uma navegação. Eu acho que essa navegação é uma ótima opção como esta. Fantástico. Agora, eu preciso diminuir meu tamanho de altura e isso é tudo. Agora, se eu visualizar você pode ver que eu tenho a navegação. Como você pode ver, eu tenho um logotipo, alguns menus no topo então eu tenho um botão de registro. Aqui eu tenho minha seção herói que consiste em algumas tags e um CTA e também uma imagem. Então eu tenho a minha característica chave como esta. Depois disso eu apresento alguma pose e então eu tenho a prova social. Podem ser críticas, depoimentos, qualquer coisa. Então eu tenho outro CTA aqui que é meu último CTA. Depois disso, adicionamos um rodapé. Aqui, eu tenho todos os links relacionados ao meu site. Gente, vocês viram como é fácil criar seu próprio wireframe em Figma? Isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. Vejo você então. 70. O que é um estilo de cores?: Oi. Bem-vindo de volta a outra seção deste curso. Neste vídeo, vamos falar sobre o estilo das cores. O que é um estilo de cor? Na verdade, cada marca tem um conjunto de cores que eles aderem. Por exemplo, quando você pensa no Twitter, eu tenho certeza que você pensa azul. Nesta seção, vamos criar nosso próprio estilo de cor, ou digamos que nosso próprio guia de estilo para nos ajudar durante nosso processo de design. Vejo-te no próximo vídeo. 71. Cores ascendo e semântico: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos começar a criar nosso guia de estilo ou nosso sistema de design, o que é muito importante quando você quer trabalhar em um projeto complexo. No início, pode parecer que há muito trabalho a fazer, no entanto, vale a pena. Primeiro de tudo, precisamos de uma prancheta. Como você pode ver, criei uma prancheta do MacBook Pro e vou mudar seu nome para cores. Legal. Então vamos em frente e inserir um retângulo como este. Vou aumentar o raio do canto para torná-lo mais redondo, ampliá-lo para torná-lo menor, a largura vai ser cinco e a altura vai ser 64 por enquanto. Vou mudar a cor para 41, 35 e F3. Bastante agradável. Então deixe-me movê-lo um pouco para o lado esquerdo. Aqui, vou inserir um texto, e vamos escrever cores. Vou usar o SF Pro Arredondado. Bastante agradável. Vamos aumentar seu tamanho para 24 pontos como este e vai ser regular. No entanto, vou mudar o código de cor para 4A, 4A e 4A. Deixe-me alinhá-lo verticalmente e eu vou torná-lo um pouco menor. Vou agrupar isso. Fantástico. Agora, precisamos criar nossas seções porque em cores temos seções diferentes. Por exemplo, temos cores primárias, temos cores de acento, e temos cores semânticas. Claro, você pode ter cores de fundo também. No entanto, neste tutorial, vamos criar cores primárias, acento e semânticas. Agora, eu preciso de uma frase como esta. Eu vou segurar Shift e eu vou mudar a cor para E4, E4 e E4, assim, então eu preciso adicionar um texto. Vamos escrever cores primárias. Vou escolher a mesma cor que usei para este texto. Vamos copiar e colar este código de cor de texto. Fantástico. Vou alinhá-los à esquerda e seu preenchimento inferior será oito pixels. Vamos agrupá-los, e vou chamá-lo de Cores Primárias. Fantástico. É muito agradável. Então eu preciso criar um quadrado aqui e vamos torná-lo arredondado. Fantástico. Então precisamos mudar a cor para 41, 35 e F3. Na verdade, esta é a cor que eu quero usar neste tutorial. Você pode usar cores diferentes para o seu sistema de design. Tenha em mente que você sempre pode alterá-los. Se você não tem certeza de por que e como eu escolho essa cor, isso depende apenas do seu projeto e leva algum tempo para entender como você pode criar sua paleta de cores corretamente. Mas agora só queremos nos concentrar na criação do nosso sistema de design. Vou te mostrar como você pode fazer isso corretamente. As cores não importam. Seu preenchimento superior será de 16 pixels. Vou duplicar isso com um preenchimento à esquerda de 16 pixels. Mais uma vez, duplique isso. Mais uma vez. Temos quatro quadrados diferentes. Vou selecionar o segundo, e vou diminuir sua opacidade para 75% assim. O terceiro, eu vou mudá-lo para 50%, e o último, vamos definir para 25%. A razão pela qual eu mudei a opacidade é porque às vezes precisamos ter estados diferentes de cada cor. Por exemplo, se você estiver criando um botão, ele pode ter estados diferentes, como ativo, [inaudível] pairar, etc. Por exemplo, se você estiver usando essa cor para o estado ativo, você pode usar outras cores, como este para o estado de foco. É bastante necessário ter diferentes versões da sua cor. Agora, vamos selecionar o primeiro quadrado. Eu vou ir em frente e clicar nesses quatro pontos, e então clique neste botão mais. Aqui eu vou escrever Cors/Primário/Roxo 100 por cento e criar estilo. Fantástico. Depois, o próximo, Colors Primary Purple 75%. Vou copiá-lo. Então o próximo , será de 50% e o último será de 25%. Fantástico. Agora, vamos selecionar todos eles. Agrupe-os, e serão cores primárias. Vamos segurar Shift e clicar neste título de Cores Primárias. Mais uma vez os agrupe e eu vou chamá-lo de Cores Primárias. Então preciso duplicar assim. Vamos mudar esse nome para Cores de acento. Acho que é uma boa ideia diminuir um pouco o tamanho da fonte. Por exemplo, vamos definir para 20. Este também. Agora, é melhor. Agora, vamos selecionar o primeiro. Primeiro, precisamos separá-lo de seu estilo, e a mesma coisa para os outros. Agora, vamos selecionar o primeiro e, em seguida, mudar o código de cor para BE52F e 2. Muito bom. Vamos copiar isto e eu vou colá-lo para os outros. Fantástico. Agora, precisamos criar o estilo de cor para esses cantos também. Vamos repetir o procedimento. Aqui precisamos escrever cores, acento barra, isso mesmo, roxo 1. Este também. Cores, Acento, Roxo 2. Vamos copiar isto. Aqui vai ser Purple 3. O último deve ser Purple 4. Você pode nomeá-los como quiser, no entanto, mantê-lo o mais organizado possível. Então eu vou renomear este grupo para Cores de acento. Fantástico, e também este. Mais uma vez duplique-os. Aqui vai ser Cores Semânticas. Primeiro, precisamos separá-lo de seu estilo. Nós não precisamos deste último porque nós vamos ter apenas três versões diferentes. Vamos selecionar o primeiro. Vou mudar o código de cor para FFCF e 5C. Vou copiar isto e vamos colá-lo para os outros. Tudo bem. Agora, vamos em frente e criar nossos sinais de cor. Vamos escrever Colors, Semantic, e vamos escrever Orange One. Vou copiar isto. O próximo será Orange 2, e o último, Orange 3. Ótimo. Precisamos de mais uma cor semântica, então vou duplicá-las assim. Mais uma vez, precisamos separá-los de seu estilo assim. Vamos selecionar o primeiro. Vou definir o código de cor para 00, 84 e F4. Vamos copiar isto e colá-lo para os outros. Fantástico. Agora, o último passo é criar nosso sinal de cores. Vamos escrever Colors, Semantic, Blue 1, e então Blue 2, e finalmente, azul 3. Estamos quase terminando. No entanto, vou mostrar-lhe uma coisa e precisamos personalizar nossos sinais de cor um pouco. Agora, que criamos esses estilos de cores com quantidade diferente de opacidade, teremos alguns problemas se decidirmos usar essas cores em cima de um fundo colorido. Agora, que estamos usando-os em um fundo branco, não podemos entender a diferença. No entanto, vou mostrar-lhe uma coisa. Vamos criar um retângulo aqui. Vou movê-lo para baixo bem abaixo do nosso último grupo. Se eu movê-lo, você pode ver que, na verdade, nossas cores estão mudando porque nós mudamos sua opacidade. Mas precisamos fazer mais um passo, é claro, para as primeiras cores, nada muda porque a opacidade desta primeira camada é 100%. Como podemos consertar isso? A melhor maneira é escolher cada um. Por exemplo, este, em seguida, vá para Estilo de Cor, depois Editar Estilo, e escolha o conta-gotas e clique nesta cor, e está feito. Vamos fazer a mesma coisa por todos eles. Lá vamos nós. É uma ótima técnica para criar seus estilos de cores porque às vezes você não tem todos os códigos de cores. Neste caso, podemos usar essa técnica e, em seguida, você pode alterar as cores. Vou fazer a mesma coisa por todos eles. Tudo bem. Está feito. Agora, se eu criar o mesmo retângulo mais uma vez, assim, e eu vou colocá-lo logo abaixo do nosso primeiro grupo, você pode ver que nossas cores não estão mudando. A partir de agora, mesmo que você use um fundo colorido em seu design, suas cores permanecem intactas. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. Vejo você então. 72. Cores e gradientes cinza: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos continuar criando nosso guia de estilo ou digamos que nosso sistema de design juntos. Neste vídeo, precisamos adicionar mais duas seções ao nosso sistema de design que são cores de fundo cinza e cores gradientes. Para fazer isso, primeiro precisamos aumentar o tamanho da altura da nossa prancheta assim. Vou copiar e colar uma dessas seções. Bastante agradável. Vamos chamá-lo de cores de fundo cinza. - Legal. Não preciso desta linha azul. Agora deixe-me separá-los de seu estilo assim. Bastante agradável. Vou duplicar o último porque preciso de mais uma cor. Fantástico. Agora vamos selecionar o primeiro e eu vou mudar o código de cor para 28 , 37 e 4B assim. Deixe-me criar o estilo de cor. Eu vou escrever cores cinza 1. Para o segundo, vou copiar este código de cor. Vamos colá-lo aqui. Vou diminuir a opacidade para 75%. Depois disso, vamos escolher o conta-gotas e clicar nesta cor. A fim de obter a mesma cor com 100 por cento de opacidade. Então vamos criar as cores de estilo de cor cinza 2. Vou copiar isso e precisamos copiar o código de cores mais uma vez. Vamos colá-lo aqui com 50% de opacidade. O último com 25% de opacidade como esta e deixe-me mudá-los. O último mais uma vez para o conta-gotas e selecione a mesma cor. Fantástico. Agora vamos criar as cores do terceiro estilo de cor cinza 3. Vamos copiar isto. O último, cores cinza e quatro fantásticas. Agora vou renomear o grupo para cores de fundo cinza. Deixe-me copiar isto e colá-lo para outros grupos também, como este. Bastante bom. Mais uma vez, duplique-o. Agora, vou renomeá-lo para cores de gradiente. Vamos remover as duas últimas cores porque eu só preciso de duas cores aqui. Vou selecionar o primeiro, separá-lo do estilo, o segundo também. Para o primeiro, vou mudar a cor de sólido para linear. Vamos selecionar a primeira cor. Vou mudar o código de cor para 41, 35 e F3. O segundo, vamos aumentar a opacidade para 100 por cento. Vou mudá-lo para 71, 68 e F6. Então eu vou mudar a direção para conseguir algo assim. Bastante bom. Então vamos criar nosso estilo de cor. Vou escrever cores, gradiente 1. Para o segundo, vamos mudá-lo para linear também. A primeira cor será BE52 e F2 e a segunda cor que precisamos para aumentar a opacidade para 100 por cento. Vou mudar o código de cor para DB85 e F5, assim. Deixe-me mudar a direção. Fantástico. Precisamos criar o nosso estilo de cores gradiente 2. Por último, mas não menos importante, vamos renomear nosso grupo para cores gradientes. Para outros grupos também. Fantástico. Pessoal, agora vamos testar nossos gradientes. Vou criar um retângulo aqui e vamos aplicar nossos gradientes. Por exemplo, este aqui. É bastante fantástico. Podemos mudá-lo facilmente. Além disso, podemos escolher a cor de fundo. Bastante incrível, não é? Rapazes, isso é tudo para este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 73. Borders e sombras: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos adicionar bordas e sombras ao nosso guia de estilo. Sem mais delongas, vamos começar. Primeiro de tudo, precisamos duplicar nosso quadro de arte assim, e eu vou renomeá-lo para bordas, e vamos mudar esse título para bordas também. Fantástico. Vou remover todos, exceto o primeiro como este, então deixe-me ampliar. Muito bom. Vou mudar estes títulos para fronteiras. Agora, vamos separar essas cores de seu estilo uma por uma como esta. Então, eu preciso adicionar um acidente vascular cerebral porque para as fronteiras precisamos ter um acidente vascular cerebral. Vamos clicar neste ícone mais como este. Então eu vou remover o preenchimento, muito bem. Deixe-me mudar o código de cor para BE52 e F2 assim e o segundo também, deixe-me remover o preenchimento, adicionar traçado, e eu vou mudar o código de cor para DBA5 e F5. No próximo, você vai fazer a mesma coisa. O código de cores vai ser EEDFF e dois. Não precisamos do último, vamos mantê-lo simples para que estes três sejam suficientes. Agora é hora de criar o estilo de borda. Vamos selecionar o primeiro, e eu vou clicar nesses quatro pontos. Assim como criar estilos de cores, aqui eu vou escrever Cors/Border/1. Vamos copiar isto. O próximo vai ser Cors/Border/2, e o último vai ser Cors/Border/3 como este. Vamos criar uma nova forma. Muito bom. Vou aplicar o estilo de fronteiras a isto. Posso adicionar traçado e de estilos de cor, posso escolher a cor da borda como esta. Vamos remover o preenchimento. Fantástico. Posso facilmente mudá-lo para o segundo, e para o terceiro. Precisamos adicionar sombras ao nosso guia de estilo. Acho que é uma boa ideia adicioná-los aqui neste quadro de arte. Vou mudar este título para fronteiras e sombras. Vamos mudar o nome do quadro de arte, bem como, bordas e sombras. Fantástico. Então, precisamos renomear esse grupo para fronteiras, esses grupos também. Deixe-me duplicar, e vamos escrever sombras. Você vai ter quatro tipos diferentes de sombras. Vou duplicar o último assim. Fantástico. Vamos selecionar o primeiro, precisamos separá-los de seu estilo. Muito bom. Vamos selecionar o primeiro e Aqui eu vou adicionar efeitos. Muito bom. Em vez de traçado, vamos adicionar uma cor sólida a ele. Vou remover o traço e usar o preenchimento. Vamos para a configuração avançada aqui, e eu vou mudar a quantidade de desfoque para 10 e a quantidade de X para um e Y para cinco. Vamos mudar a opacidade para 20% também. Depois disso, podemos criar um estilo de efeito. Assim como estilos de cores, você pode clicar neste ícone de adição aqui, e aqui vamos escrever Sombreas/1 e o segundo também. Vamos adicionar preenchimento a ele e também um efeito, e então eu vou modificar a configuração. Vamos definir a quantidade de desfoque para 20 e a quantidade de X para cinco e a quantidade de Y para 10 como este. Claro, vamos diminuir a opacidade para 20%. Mais uma vez, precisamos criar nosso estilo de efeitos. Vou escrever Shadows/2. O próximo, o mesmo processo. Vou adicionar efeitos a isto. A quantidade de desfoque vai ser 20, o X vai ser dois, e o Y vai ser 10. Vamos diminuir a opacidade para 10%, e eu vou criar um novo estilo de efeito. Vamos escrever Shadows/3. O último, mais uma vez adicionar preenchimento a estes e também um efeito. Vou definir a quantidade de borrão para 14, o X para 1, e o Y para 5. Vou definir a opacidade para 10 por cento. Fantástico. Vamos criar nosso estilo de efeitos Shadows/4. Bastante incrível. Então, vamos renomear os grupos para sombras para todos os grupos, lembre-se disso, para manter nossas camadas tão organizadas quanto possível. Vou mostrar-te como podes usar isto. Vamos em frente e criar uma forma, por exemplo, um quadrado, e então eu vou mudar a cor para algo assim. Se eu clicar nesses quatro pontos na seção de efeitos, você pode ver que eu tenho quatro sombras diferentes. Eu posso clicar em um, e lá vamos nós. Posso facilmente mudá-lo para o que eu quiser. É muito legal, não é? Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado, e te vejo no próximo vídeo. 74. Introdução ao estilo da tipografia: Oi. Neste vídeo vamos estar falando sobre o estilo do texto, assim como o que fizemos com nossas cores, vamos agora fazer com nossa tipografia, então nesta seção, vamos criar nosso próprio têxtil e precisamos definir diferentes tamanhos, pesos diferentes, e também cores diferentes para o nosso estilo de tipografia, a fim de usá-lo em nosso projeto. Vejo-te no próximo vídeo. 75. Guia de tipografia - Parte 1: Olá a todos, e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos adicionar o estilo de tipografia ao nosso guia de estilo. Sem mais delongas, vamos começar a duplicar esta prancheta, e eu vou chamá-la de Tipografia. Então deixe-me ampliar um pouco e vamos mudar este título para Tipografia também. Fantástico. Depois disso, vou remover essas sombras e essas fronteiras também. Vamos mudar o título para H1, então eu vou aumentar a largura desta linha para 1,120, assim. Depois disso, vou duplicar este texto assim. Bastante bom. Vamos mudar o tamanho da fonte para 34 pontos e eu vou torná-lo negrito. Fantástico. Certifique-se de que ele está alinhado ao lado esquerdo assim. Vou mudar o texto para Exemplo de Texto. Bastante incrível. Então precisamos duplicá-lo. Vou movê-lo para o centro desta prancheta. Vamos alinhá-lo ao centro. Mais uma vez, duplique-o. Fantástico. No entanto, agora vamos selecionar este do meio. Precisamos alinhá-lo ao centro. O último que precisamos para alinhá-lo ao lado direito, e agora é hora de criar nosso estilo de texto. Vamos selecionar o primeiro e clicar nesses quatro pontos. Vamos clicar neste ícone. Aqui eu vou escrever H1/Left. Fantástico. O segundo vai ser H2/Center, e o último vai ser H1/Right. Fantástico. Agora, vamos renomear este grupo para H1, e este também. Deixe-me renomear este grupo também para tipografia. Agora, vamos duplicar este grupo H1 assim, e eu vou renomear o título H1 para H2. Agora, vamos separar estes textos de seu estilo como este, este também, e este também. Agora, é hora de selecionar todos eles. Vou mudar o tamanho da fonte para 26 pontos. Fantástico. Então precisamos criar nosso estilo de texto. Como você pode ver, eu cometi um erro para este, eu escrevi H2. Vamos em frente e mudá-lo porque precisamos escrever H1 para isso. Agora, vamos selecionar este e eu vou criar um novo estilo de texto. Vamos escrever H2/Left. Vou copiar isso. Este vai ser H2/Center e o último vai ser H2/Right. Fantástico. Agora, vamos renomear nosso grupo para H2 também, então precisamos duplicar isso assim. Vamos mudar o título para H3. Vou separar estes textos do estilo deles, um por um. Agora, vamos selecionar todos eles e eu vou mudar o tamanho da fonte para 16 pontos. Fantástico. No entanto, agora eu não vou criar os estilos de texto porque eu vou economizar seu tempo. Vou fazê-lo sozinho e você pode baixar o guia de estilo final da palestra de recursos da seção. Vamos renomear este grupo H3, e mais uma vez duplicá-lo. Vai ser H4. Vamos selecionar todos esses textos e alterar o tamanho da fonte para 12 pontos. Fantástico, e isso é tudo para este vídeo. No próximo vídeo, vamos adicionar nosso corpo de texto aqui juntos. Vejo você então. 76. Guia de tipografia - Parte 2: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos adicionar nosso corpo de texto ao nosso estilo tipográfico. Sem mais delongas, vamos começar duplicando o último grupo, eu vou colocá-lo aqui, e vamos escrever o corpo 1, muito bom. Vou selecionar todos esses textos e vamos mudar o tamanho da fonte para 14 pontos, fantástico. Agora, vamos selecionar o primeiro, e eu vou criar um estilo de texto. Vamos escrever o corpo 1 à esquerda, e o próximo vai ser o corpo 1 centro, e o último vai ser o corpo 1 direito, muito bom. Agora vamos renomear nossos grupos. Vai ser o corpo 1, este também. Então vamos duplicar e mudar o título para o corpo 2. Precisamos separar essas camadas de texto de seu estilo. Agora vamos selecionar todos eles e eu vou mudar o tamanho da fonte para 13 pontos. No entanto, eu não vou criar os estilos de texto porque eu vou fazer isso para você e você pode baixar o guia de estilo final da palestra de recursos desta seção. Mais uma vez, vamos renomear esses grupos: corpo 2, corpo 2 também. Vou duplicá-lo pela última vez. Vamos renomeá-lo para o corpo 3 e eu vou selecionar todos esses textos. Vamos alterar o tamanho da fonte para 11 pontos. Muito bem pessoal, criamos com sucesso o nosso guia de estilo topográfico juntos, então agora vamos dar uma olhada. Vou criar um texto. Vamos escrever o título. A partir dos estilos de texto, eu posso escolher o que eu quiser. Por enquanto, temos apenas três opções porque não criamos os estilos de texto para todos esses textos. No entanto, se você baixar o guia de estilo final, você terá acesso a todos esses estilos de texto. Por enquanto, vamos escolher H1 à esquerda, e lá vamos nós. Se eu apenas tentar editar este H1 à esquerda, então vamos em frente e modificar isso, por exemplo, de negrito para regular, você pode ver que meu título mudou também. Tudo bem, pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 77. Como criar um aplicativo de finanças moderno: Olá a todos e bem-vindos de volta a outra seção deste curso. Nesta seção, vamos projetar um aplicativo móvel completo chamado Money. É um aplicativo de finanças e vamos projetar 24 telas diferentes juntos passo a passo. Vamos projetar todas as telas necessárias que este aplicativo precisa. Começamos com a concepção da tela de lançamento e, em seguida, projetaremos uma página de boas-vindas. Além disso, temos duas páginas de assinatura diferentes, então vamos projetar três páginas de inscrição diferentes. Como você pode ver, com estados diferentes. Depois disso, vamos projetar nossa página de verificação OTP e, como você pode ver, temos três telas diferentes para isso. A primeira tela é para obter o número do usuário, a segunda tela é para quando o usuário está inserindo o código, e a última tela é quando o botão está ativo. Depois disso, projetaremos o formulário de perfil. Como você pode ver aqui, temos duas telas diferentes: perfil e perfil concluído. Então vamos começar a projetar nossa página inicial junto com esses cartões e todos esses componentes. Então vamos projetar nosso menu de hambúrguer, e então vamos projetar nossa página de cartões. Teremos dois cartões diferentes: o cartão principal e o cartão secundário. Aqui temos as transações. Depois disso, temos a página de transações e também os detalhes das transações. Basicamente, quando o usuário clica neste cartão, ele vai deslizar para fora e vamos ver esta tela com todos esses detalhes. Depois disso, vamos projetar a tela de transferência com esses numpad e todos esses elementos. Então temos a página de confirmação aqui. Depois disso, vamos para projetar nossa página de notificação com dados reais. Em seguida, vamos projetar a página de perfil aqui. Por último, mas não menos importante, criaremos três páginas de integração diferentes juntas. Para começar a projetar este projeto, primeiro, você precisa baixar o arquivo de ativos que eu já preparei para você na seção de recursos da palestra de ativos. Tudo bem, pessoal. Isso é tudo por este vídeo. Vejo-te no próximo vídeo. 78. Tela de lançamento: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos começar a projetar nosso aplicativo financeiro, que é chamado de Money. É interessante, não é? Então, sem mais delongas, vamos começar inserindo um novo quadro de arte em nossa tela. Então eu vou pressionar A no meu teclado e na seção Telefone, eu vou escolher iPhone 11 Pro ou X. Então deixe-me renomeá-lo para Tela de inicialização porque esta é a nossa primeira página. Depois disso, vamos simplesmente colocar o logotipo desta aplicação que já preparei para você. Portanto, se você já baixou o arquivo de ativos da palestra de ativos, poderá ver que tem quatro pastas diferentes: logotipo, ilustrações, ícones e IU do Apple iOS. Se você está familiarizado com o Sketch, provavelmente você sabe que você tem acesso ao Apple iOS UI Kit para usar todos os elementos que a Apple usa no sistema operacional. No entanto, infelizmente, não há um Apple iOS UI Kit atualizado para Figma. Mas não há nada com que se preocupar, porque já preparei para vocês todas as coisas necessárias que podem precisar durante este curso. Então, como você pode ver, nós temos barras, indicador home, e a barra de status, e isso é tudo que precisamos. Mas para este vídeo, precisamos abrir a pasta do logotipo. Aqui você pode ver que temos três arquivos diferentes. Temos Logotipo Colorful-Logo, Logo-Branco e Logotipo Mastercard. Agora, eu vou escolher o logotipo colorido e vamos arrastar e soltar no meu quadro de arte assim. Muito bom, não é? Então a única coisa que precisamos fazer é alinhá-lo horizontal e verticalmente ao centro assim. Isso é tudo para a nossa tela de lançamento. Era tão simples, não era? Muito bem, pessoal, muito obrigado por assistirem este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 79. Página de login e boas-vindas: Olá a todos e bem-vindos de volta a outro vídeo desta seção. Neste vídeo, vamos projetar nossas páginas de login e também nossa página de boas-vindas juntos. Sem mais delongas, vamos começar duplicando esta prancheta, então eu vou pressionar “Command D” ou “Control D”. Então vamos remover esse logotipo, não precisamos mais disso. Depois disso, vou mudar o nome da prancheta. Vamos escrever o login. Fantástico. Na verdade, na página de login, vamos colocar o logotipo no topo e também precisamos ter um texto que diz “Bem-vindo de volta”. Em seguida, temos o título de login, alguns campos de texto, e depois disso, o botão de login bem na parte inferior. Primeiro de tudo, vamos começar com a inserção de um círculo, então eu vou segurar “Shift” e arrastar e soltar, e eu vou definir a largura e a altura para 352. Então eu vou adicionar um gradiente linear a ele assim. Vamos selecionar a primeira cor e eu vou definir o código de cor para 5264F9, assim. Vamos selecionar o segundo, e este vai ser 3AF9EF, assim. No entanto, lembre-se de aumentar a opacidade como esta, para 100 por cento. Depois disso, vou mudar a direção, então vou selecionar a primeira cor no topo. Vamos mudar a direção por estes controladores manipuladores como este. Fantástico. Agora, eu vou mover este círculo um pouco para encontrar um bom lugar para isso. No entanto, como eu já calculei o local, eu posso facilmente definir o X e Y aqui. Vamos definir o X para menos 74, assim, e o Y para menos 84. Muito bom. Tudo bem. Agora, precisamos duplicar este círculo assim. Vou movê-lo um pouco, e vamos colocar esta camada logo abaixo do nosso primeiro círculo. Então precisamos mudar o gradiente, então eu vou selecionar a primeira cor. Vamos definir o código de cor para 2F56F8, assim. Vamos selecionar a segunda cor. Este vai ser C630F8, assim. No entanto, desta vez vou diminuir a opacidade para zero, assim. Acho que é uma boa ideia mudar o lugar das nossas cores assim. Fantástico. Vamos mudar a direção um pouco. Muito bom. Então vamos duplicá-lo mais uma vez, e precisamos movê-lo para baixo bem abaixo do nosso segundo círculo. Vamos movê-lo para o lado direito. Mais uma vez, precisamos mudar nossas cores, então vamos selecionar a primeira cor, e eu vou mudar o código para C72FF8. Agora, eu vou mudar a direção. Mais uma vez, vamos mudar o lugar de nossas cores. Fantástico. Agora, vamos em frente e definir o X e Y para cada círculo. Vou selecionar o segundo, e vamos definir o X para menos 43 e o Y para menos 56. Ótimo. O terceiro círculo, vamos definir o X para menos 12 e o Y para menos 106, assim. Muito bom. Não é? No entanto, agora vou em frente e selecionar o primeiro círculo. Vamos mudar a direção um pouco para torná-la um pouco mais leve. Acho que agora é perfeito. Agora, é hora de adicionar nosso logotipo a este cabeçalho. Vamos em frente e abrir o arquivo de ativos que você baixou da palestra de ativos desta seção. Vou colocar uma imagem. Aqui temos quatro pastas. Da pasta Logotipo, eu vou ir em frente e importar logo-branco e basta clicar uma vez aqui. Como você pode ver, este é um logotipo SVG, então se você decidir ampliá-lo assim, você pode ver que ele vai mudar. Primeiro de tudo, você precisa selecionar a ferramenta Escala, assim. Você também pode pressionar “K” no teclado para selecionar isso. Depois disso, se eu segurar “Shift” no meu teclado e tentar dimensioná-lo, você pode ver que nada muda exceto a dimensão e o tamanho. O tamanho é perfeito, é 60 por 59. Vou mantê-lo assim. Deixe-me ampliar um pouco. O preenchimento superior será de 64 pixels. Se você quiser ver os preenchimentos, você pode facilmente segurar a tecla Option ou a tecla Alt no teclado. Lá vamos nós, você tem todos os estofos. Como você pode ver, o preenchimento superior deste logotipo é 80, então eu vou fazer 64, assim, e o preenchimento esquerdo vai ser 52. Muito bom. Depois disso, vou inserir um texto. Vamos pressionar “T” e clicar aqui, e eu vou mudar a fonte para Montserrat assim. Vamos escrever “Bem-vindo de volta” assim, e eu vou mudar o tamanho da fonte para 28 pontos. Muito bom. Vamos mudar a cor para branco também e certifique-se de que esta camada de texto está alinhada com seu logotipo. Obviamente, seu preenchimento esquerdo será 52 pixels, como nosso logotipo. O preenchimento superior será de 16 pixels. Muito bom. Tudo bem, terminamos com o cabeçalho. Agora vamos selecionar todas as nossas formas, esses três círculos. Vou agrupá-los e vamos chamá-lo de Formas, fantástico, para manter nossas camadas organizadas. Agora é hora de adicionar nosso título. Então vamos inserir um novo texto aqui. Vou escrever o login com a mesma fonte. No entanto, desta vez eu vou mudar o caminho para negrito e o tamanho da fonte vai ser 28 pontos e também precisamos mudar a cor. Como pode ver, é preto. Você pode, é claro, usá-lo. No entanto, recomenda-se usar algo mais leve quando quiser usar preto contra o fundo branco, é melhor não usar um preto puro. Vou mudar o código de cor para 3A3A3A. Como você pode ver, vamos ficar cinza escuro. Fantástico. Então eu vou verificar o preenchimento, o preenchimento esquerdo vai ser 30 pixels, então vamos dar uma olhada. Muito bom. O preenchimento superior para este grupo vai ser 39 pixels. Bastante incrível. Tudo bem. Agora é hora de criar nossos campos de texto. Então, a fim de criar um campo de texto, precisamos de uma linha, então eu vou selecionar uma linha desses objetos. Vamos segurar “Shift” e arrastar e soltar. Muito bom. Vamos mudar a largura para 315 assim. Então eu vou alinhá-lo ao centro. Como você pode ver, teremos um acolchoamento esquerdo e direito de 30 pixels, que é o que queríamos. Então eu vou mudar a cor para 2743FD, fantástico. Vou manter a espessura em um. Deixe-me descer um pouco. Então precisamos de duas camadas de texto. Então o primeiro vai ser o endereço de e-mail e vamos mudar a fonte para texto SF Pro como este e também o peso vai ser regular e o tamanho da fonte deve ser 14 pontos como este. Vou mudar o preenchimento para B9B9B9, fantástico, para ver este cinza claro. Deixe-me ampliar. Eu vou alinhá-lo com a minha linha e seu preenchimento esquerdo vai ser 30 pixels também. Então vamos duplicar. Vou movê-lo para baixo. Aqui vamos escrever nosso e-mail. Então eu vou escrever design@test.com. Vamos mudar a cor para 3A3A3A, que é a mesma cor que usamos para o título de login. Tudo bem, seu preenchimento inferior vai ser oito pixels, como você pode ver, e o cabeçalho superior vai ser 16 pixels como este. Então agora tudo está perfeito. Em seguida, a próxima coisa que precisamos adicionar é um ícone de tick. Então vamos em frente e inserir outra imagem do nosso arquivo de ativos e dos ícones. Aqui temos muitos ícones. Eu vou escolher tick, e vamos clicar aqui. Lá vamos nós. Agora vamos agrupar todos os nossos elementos. Depois disso, selecione este ícone de tick e vamos alinhá-lo. Deixe-me ampliar, seu preenchimento inferior vai ser 17 pixels. Como você pode ver, não podemos obter o preenchimento certo aqui porque estamos usando um grupo aqui. Então, se você estivesse usando um quadro em vez de um grupo, poderíamos facilmente obter o preenchimento certo. Neste momento, o único preenchimento certo que temos é até a borda desta tela. No entanto, precisamos obter o preenchimento certo até o final desta linha. Para que isso aconteça, vamos selecionar nosso grupo. Vou renomeá-lo para endereço de e-mail. Depois disso, vamos clicar com o botão direito do mouse sobre isso e você pode escolher Seleção de quadros. Então você terá um quadro. Eu vou ir em frente e copiar este nome, vamos colá-lo aqui para este quadro e se eu escolher estes ícone tick, agora, se eu segurar a tecla opção tecla meu teclado, eu posso ver o preenchimento direito porque eu estou avaliando os paddings contra estas molduras, que é o que queríamos. Vamos definir o preenchimento direito para 16 pixels como este, e tudo está feito. Criamos com sucesso nosso primeiro campo de texto. No entanto, precisamos de mais um, então vamos em frente e duplicá-lo e vamos colocá-lo para baixo e o preenchimento superior vai ser 24 pixels como este, então vamos mudar o título para Senha muito bom e vamos renomeie nosso grupo e nosso quadro também. Vamos mudá-lo para Senha e um nome de quadro também, fantástico. Então precisamos mudar esses textos porque para senha, precisamos ter dois estados diferentes, o oculto e senha e a senha visível. Para criar a senha oculta, você pode manter Option ou Alt no teclado e pressionar 8, assim. Como pode ver, está escondido para a segurança. Isto é o que chamamos de experiência do usuário porque você como um designer UIX, precisa prestar atenção a todos os detalhes. Em seguida, precisamos mudar este ícone para um ícone de olho, para permitir que o usuário para tornar esta senha visível ou oculta. Vou remover isso. Vamos colocar outra imagem do nosso arquivo de ativos e aqui temos eu gosto disso, vou inseri-la aqui e vamos movê-la diretamente dentro do nosso campo de texto de senha. Ele vai ter um preenchimento inferior de 16 pixels e um preenchimento direito de 16 pixels. O que mais precisamos para a página de login? Claro, precisamos do link esquecido da senha. Vamos criá-lo. Eu preciso de um texto e vamos escrever, esqueci a senha, um ponto de interrogação, e então eu vou mudar a cor para 2B47FC assim e vamos torná-lo maior, então eu vou definir o tamanho da fonte para 16 pontos. Vamos alinhá-lo, o preenchimento à esquerda vai ser 30 pixels e seu cabeçalho superior vai ser 24 pixels, como este. Por último, mas não menos importante, precisamos criar nosso botão de login. Vamos em frente e inserir um retângulo aqui. Vou arrastar e soltar, vou definir a largura para 315 e a altura para 72 assim, então vamos aumentar o raio do canto para 28. No entanto, eu preciso torná-los suaves. Eu vou clicar neste ícone, cantos independentes e estes ícone, bem como e como você pode ver aqui, Eu tenho um controle deslizante, Eu posso aumentá-lo para 60 por cento, a fim de obter um iOS como botão arredondado. Então vamos mudar a cor para um gradiente como este. Eu vou selecionar a primeira cor e vamos mudá-la para 49, 60, e F9 e vamos selecionar a segunda cor, aumentar a opacidade para 100 por cento e mudá-la para 1433 e duplo F. Então eu vou mudar a direção um pouco assim estão certos, então precisamos de um texto, então vamos escrever o login. Eu vou mudar a fonte para um conjunto e um tamanho de fonte para 20 pontos, o peso vai ser regular, no entanto, vamos mudar o campo para branco assim. Depois disso, precisamos selecionar tanto nosso retângulo quanto nossas tags de sinal para alinhá-las, então eu vou clicar em alinhar verticalmente. Então vamos verificar os estofos. Vou ampliar um pouco, os acolchoamentos superior, esquerdo e inferior serão 24 pixels como este. Então do que precisamos? Precisamos de uma seta para a direita para colocá-la aqui, a fim de indicar que, clicando neste ícone, você será redirecionado para outra página. Vamos em frente e colocar uma imagem e a partir dos ícones, você pode escolher seta branca e colocá-lo aqui. Lá vamos nós e eu vou selecionar o retângulo e este ícone juntos e clicar em alinhar verticalmente e seu preenchimento direito vai ser 24 pixels como este. Agora criamos nosso botão de login, no entanto, vou adicionar mais detalhes para torná-lo único. Vamos em frente e criar um círculo como este e então eu vou ir em frente e clicar neste terceiro círculo como este, em seguida, clique com o botão direito aqui. A partir destes menu, copiar colar, clique e copiar propriedades como este, e selecione estes pequeno círculo, Clique com o botão direito do mouse sobre isso e copiar-colar, clique e cole propriedades para que possamos obter o mesmo gradiente que usamos para o nosso cabeçalho, então eu vou movê-lo para baixo. Vamos colocá-lo sob nossa seta assim e depois disso precisamos criar uma máscara, no entanto, antes de fazer isso, precisamos duplicar nosso retângulo porque vamos adicionar uma sombra após mascaramento. Ao contrário do esboço, se você quiser ter uma sombra enquanto usa uma máscara, ele não vai funcionar facilmente, então a melhor maneira de obter esse resultado é duplicá-lo. Este é o retângulo 2, eu vou colocá-lo para baixo, escondê-lo por agora e, em seguida, selecione este círculo e este retângulo e clique e máscara como este e depois que você pode tornar sua camada duplicada visível assim e você pode facilmente mover o círculo ao redor. Eu vou girá-lo um pouco para obter algo assim, vamos colocá-lo aqui e eu acho que é uma boa idéia para torná-lo maior. Vou definir a largura e altura para 144 por 144 para conseguir algo assim. Vamos duplicá-lo, movê-lo para o lado esquerdo, e então eu vou copiar e colar a propriedade do círculo, este azul, como este, para este pequeno círculo. Vamos colocar esta camada abaixo do nosso primeiro círculo e então eu vou girá-la um pouco para obter o melhor resultado possível. Eu acho que agora é ótimo, é muito bom, não é? A última coisa que precisamos fazer é adicionar uma sombra ao nosso botão. Primeiro de tudo, lembre-se de escolher a camada duplicada, este retângulo 2 e clique em adicionar efeitos como este. Vou mudar as configurações. Primeiro de tudo, vou mudar a cor. Vamos configurá-lo para 1B39 e duplo F assim. Então mude a quantidade de borrão para 16 e Y para 8 assim, e diminua a opacidade para 20 por cento, é muito legal, não é? Agora eu vou selecionar todos os elementos aqui, agrupá-los e vamos renomeá-lo para o botão de assinatura. Agora, como nosso botão é selecionado, vamos alinhá-lo ao centro e como você pode ver, temos um preenchimento esquerdo e direito de 30 pixels e precisamos obter um preenchimento inferior de 64 pixels como este. A única coisa que resta para adicionar a esta tela é um indicador de casa. Se você abrir seu arquivo de ativos, como você pode ver, você tem uma pasta chamada Apple iOS UI, vamos abri-lo e aqui você tem diferentes pastas, barras, indicador de casa e teclados. Vamos abrir o indicador de casa e aqui você tem duas variantes, o retrato escuro e o retrato claro. Na verdade, a luz aqui não significa que é branca, significa que você pode usá-la em cima de um fundo claro, então é basicamente preto. Eu vou ir em frente e abri-lo e clique aqui, em seguida, vamos alinhá-lo para o centro assim e seu preenchimento inferior vai ser 0. Vamos verificar nossa página de entrada. Antes de colocar um fim a este vídeo, precisamos criar uma página de boas-vindas. Agora eu vou ir em frente e mover este quadro de arte para o lado direito e vamos duplicá-lo e trazer estes quadros de arte duplicados para o lado esquerdo assim. Vou renomeá-lo para ser bem-vindo e é claro que não precisamos desses elementos, então vamos removê-los. No entanto, mantenha o botão de entrada e, em seguida, vamos escolher esses grupos de formas, vamos alterar a largura e altura para 970, no entanto, tenha em mente para vinculá-los primeiro assim. Vamos definir o x para menos 424 e o y para menos 409 e depois disso eu vou girá-lo um pouco. Vamos definir a rotação para menos 28 graus para obter algo assim, é muito legal, não é? Então vamos movê-lo para o lado esquerdo um pouco. Certifique-se de fazer essas etapas em ordem, porque se você girá-lo primeiro, seu x e y serão alterados. Nesta página de boas-vindas, teremos mais um botão, o botão de inscrição. Eu vou em frente e mover estes botões para cima, duplicá-lo. Vamos movê-lo para baixo e seu cabeçalho superior vai ser 16 pixels como este, então vamos mudar esses textos para se inscrever. Claro, você pode torná-lo dinâmico adicionando layout automático para isso se você quiser, é claro e então eu vou ir em frente e selecionar este retângulo 2. Vamos remover o preenchimento e adicionar um traçado a ele e mudar a cor do traçado para 27, 43 e FD assim. Vamos copiar este código de cor porque eu vou precisar disso e remover a sombra, nós não precisamos mais disso e também precisamos remover esses círculos como este. Agora vamos selecionar nossa seta para a direita e alterar o código de cor para a cor que escolhemos para nosso traçado. Eu vou colá-lo aqui e também eu vou ir em frente e mudar o código de cor dos meus textos para a mesma cor como esta. Vamos verificar os preenchimentos, o preenchimento inferior vai ser 64, então eu vou selecionar ambos os botões e movê-los para baixo por um pixel como este e certifique-se de renomear seu grupo. Vou mudá-lo para me inscrever. Isso é tudo para este vídeo, espero que você realmente tenha gostado, foi tão interessante. No próximo vídeo, continuaremos projetando nossas páginas de login juntas. Vejo você então. 80. Página de inscrição: Olá a todos, e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos continuar projetando nossas páginas de login e também nossas páginas de inscrição juntas. Sem mais delongas, vamos continuar e duplicar essas páginas de login. Vou selecionar este quadro de arte e vamos duplicá-lo. Depois disso, vou mudar o nome deste quadro de arte para entrar na senha do traço, porque neste quadro de arte, vamos tornar essas senhas visíveis. Vamos ampliar um pouco. Fantástico. Eu vou selecionar esses textos camada e vamos escrever UI2020. Bastante bom. Obviamente precisamos mudar este ícone também. Vamos em frente e inserir um novo ícone do nosso arquivo de ativos. Eu vou para Icons, e aqui temos Eye-Hidden, então vamos selecionar isso e colocá-lo aqui, e eu vou substituí-lo com nosso ícone anterior como este. Vou remover isto e vamos colocar este ícone de Olho dentro do campo de texto da senha. Fantástico. Isso é tudo por este quadro de arte. Deixe-me diminuir um pouco, e depois disso, vamos criar nossa página de inscrição. Vai ser quase o mesmo. A única coisa que precisamos mudar é este título. Vou seguir em frente e selecionar a página de entrada , duplicá-la e vou renomeá-la para me inscrever. Bastante bom. Vamos mudar este título para se inscrever também. Lembre-se de mudar o botão também. Vou selecionar esta camada de textos e vai ser inscrito. Fantástico. Lá vamos nós. Acabamos de criar nossa página de inscrição. Agora vamos duplicar a página de inscrição mais uma vez, e desta vez vamos criar outro estado deste campo de texto. Por exemplo, vamos projetar um estado de erro. Deixe-me ampliar um pouco. Primeiro, vamos renomear este quadro de arte para se inscrever E-mail errado assim. Então vamos fazer este e-mail errado, por exemplo, eu vou remover this.com assim. Como você pode ver, não é um endereço de e-mail completo, e então precisamos remover este ícone de tick também. Quando está incorreto, não faz sentido ter este ícone de tick, então precisamos remover isso, e deixe-me mover todo o campo de texto um pouco cima, a fim de ter mais espaço para adicionar o erro na parte inferior. A primeira coisa que precisamos fazer é mudar a cor deste título para uma cor vermelha. Eu quero mudar o código de cor para FD2727, e deixe-me copiar este código de cor porque eu vou precisar disso. Em seguida, vamos selecionar esta linha horizontal e mudar a cor para o mesmo vermelho. Depois disso, eu vou continuar e duplicar essa camada de texto, movê-la para baixo, como aqui, e vamos escrever que o endereço de e-mail está incompleto. Como este. No entanto, vou mudar o tamanho da fonte para 13 pontos. Muito bem, e vamos mudar a cor para este vermelho também. Então eu vou mudar o peso de regular para a luz. Fantástico. Agora é hora de checar nossos estofos. Como você pode ver agora, nosso preenchimento superior está definido como nove pixels. Eu vou fazer oito como este. Então vamos mover este texto para o nosso grupo de endereços de e-mail aqui. Muito bom, e seu preenchimento inferior vai ser 24 pixels como este. Com certeza precisamos mover esses títulos de inscrição um pouco. Vou movê-lo para cima para obter um preenchimento inferior de 42 pixels como este. Bastante bom. Agora, tudo parece ótimo. Agora precisamos de mais uma página de inscrição. Vamos em frente e selecionar esta página de inscrição, esta, e eu vou duplicá-la. Vamos renomeá-lo para se inscrever digitando, porque vamos apresentar o teclado aqui, a fim de mostrar ao desenvolvedor como esse layout funciona quando apresentamos uma palavra-chave. Porque, obviamente, vamos mover alguns elementos aqui. Vou fazer zoom. A primeira coisa que precisamos fazer é selecionar esses elementos e movê-los para cima assim, e então vamos em frente e colocar uma imagem, e da pasta de ativos, Apple iOS UI, você tem palavras-chave, e vamos selecionar isso, Coloque-o aqui. Muito bom, fantástico. Então eu vou ir em frente e selecionar este campo de texto de endereço de e-mail e campo de texto de senha, agrupá-los e movê-los para cima até você obter um preenchimento superior de 24 pixels como este. Está tudo bem. No entanto, precisamos adicionar mais uma coisa, um marcador de entrada de texto. Como o usuário está digitando nesta página, precisamos adicionar um marcador de entrada de texto aqui. É tão fácil criar um. Vamos em frente e criar uma linha como esta. No entanto, desta vez uma linha vertical, e eu vou definir a largura para 19, assim, e eu vou mudar a cor para este roxo, como o nosso ícone de tick, fantástico. preenchimento inferior vai ser oito pixels. Bastante bom. Agora, vamos mover esta linha dentro deste grupo de senhas, que você pode medir todos os preenchimentos corretamente. Como você pode ver agora nosso preenchimento esquerdo está definido para quatro, vamos fazer dois, e eu vou movê-lo para baixo um pouco para obter um equilíbrio visual. Muito bom, e tudo está ótimo. Pessoal, criamos com sucesso todas as nossas páginas de login e também as nossas páginas de inscrição juntas. Isso é tudo por este vídeo. Espero que tenha gostado. No próximo vídeo, começaremos a projetar nossas páginas de verificação OTP. Vejo você então. 81. Telas de verificação OTP: Oi, todo mundo. Bem-vindo de volta a outro vídeo desta seção. Neste vídeo, vamos começar a projetar nossas páginas de verificação OTP juntas. Sem mais delongas, vamos começar. Primeiro, precisamos de um novo quadro de arte. Vou pressionar A e escolher o iPhone 11 Pro ou X, assim. Vou movê-lo para aqui, logo abaixo da minha tela grande, a fim de manter nossa tela organizada. Então vamos renomear este quadro de arte para OTP. Vai ser a nossa primeira tela porque no total, vamos ter três telas OTP diferentes, e vamos criá-las passo a passo. Agora, o que precisamos? Precisamos de um indicador doméstico para colocar direito na parte inferior, que possamos facilmente copiá-lo e colá-lo de nossos quadros de arte anteriores. Vou copiar isto e colá-lo aqui. Muito bom. Precisamos da barra de status também. Vou em frente e colocar uma imagem. Aqui, eu tenho barras, barra de status, Eu tenho versão escura e clara, ea luz significa que você pode usá-lo em um fundo claro. A barra de status está escura. Eu vou em frente e abri-lo, colocá-lo aqui. Agora, deixe-me alinhá-lo ao centro. Também precisa ficar na borda superior desta tela, assim. O que mais precisamos? Precisamos de uma ilustração que já preparei para você. Vamos em frente e colocar outra imagem aqui. Na pasta Ativos, você tem uma pasta de ilustração, vou abri-la. Aqui, você tem OTP. Vamos abrir isto. Eu gostaria de mencionar que eu baixei essas ilustrações do site undraw.co, que é um ótimo site que você pode obter acesso a ilustrações livres de royalties incríveis. Se você quiser usar outra ilustração, certifique-se de conferir este site. Primeiro, vamos alinhá-lo ao centro, depois vou verificar o preenchimento superior. Na verdade, vai ser 56 pixels, assim. Muito bom. Então eu preciso de uma camada de texto. Vamos escrever, Verificação OTP, e vamos mudar a fonte para Montserrat, assim. Vou usar a versão em negrito, e também precisamos mudar o tamanho da fonte para 24 pontos. Muito bom. O preenchimento superior será de 60 pixels, assim. Então vamos duplicar essa camada de texto, movê-la para baixo e mudar o caminho para regular, e eu também mudarei o tamanho da fonte para 16 pontos. Vou alinhá-lo ao centro. Aqui, vamos escrever : “Enviaremos uma senha única para esses números de celular.” Então eu vou redimensionar esta camada de texto para ter uma camada de texto de tamanho fixo, como esta. Vamos alinhá-lo ao centro. Também vou mudar a altura da linha. O que eu vou fazer é escrever 16 vezes 1,5, e depois PX, assim. É uma ótima fórmula. Se você não sabe como escolher a altura da sua linha, você pode usá-la. Você pode escrever seu tamanho de fonte e multiplicar isso por 1.5. No entanto, lembre-se em Figma, você precisa adicionar uma palavra-chave PX no final. Muito bom. Agora, vamos selecionar essas duas camadas de texto e vamos mudar a cor do texto. Vou colocá-los em 3A, 3A e 3A, assim. Muito bom. Agora, vamos selecionar esta camada de texto e duplicá-la, movê-la para baixo. Aqui, vamos escrever, “Digite o número do celular.” Vou mudar a fonte para SF Pro Text, assim, mudar o caminho para Regular, e também o tamanho da fonte para 14 pontos, como este. Vou alinhá-lo ao centro, e também quero mudar a cor para B9, B9 e B9. Muito bom. Agora, vamos selecionar esta camada de texto e verificar os preenchimentos. Como você pode ver, o preenchimento superior agora é 22 pixels. No entanto, é melhor configurá-lo para 24 pixels. Então vamos verificar o preenchimento desses textos. Agora, ele está definido para 33 pixels. No entanto, vamos configurá-lo para 34 pixels. Então aqui, precisamos de um campo de texto para inserir o número do celular. O que eu vou fazer é apenas selecionar esta linha de campo de texto. Vou copiar isto e colá-lo aqui, movê-lo para baixo, muito bem. Vamos diminuir a largura para 233, assim. Alinhe ao centro. Deixe-me movê-lo para baixo e, em seguida, duplicar esta camada de texto, movê-lo para baixo, mudar o caminho muito negrito. Certifique-se de que está alinhado ao centro. Vou mudar a cor para 3A, 3A e 3A, assim. Aqui, vamos escrever um número aleatório. Por exemplo, podemos escrever +49 111 222 333. Muito bom. O preenchimento inferior vai ser oito pixels, como este. Selecione ambas as camadas, mova-as para cima, e precisamos obter um preenchimento superior de 24 pixels, assim. Muito bom. Agora, você pode selecionar esses três elementos, agrupá-los, e vamos nomeá-lo Mobile Number, muito bom. A última coisa que precisamos é de um botão. Eu vou ir em frente e copiar e colar o botão de entrada. Vamos colá-lo aqui. Muito bom. Primeiro de tudo, eu vou renomeá-lo para, Get OTP Button. Então eu preciso remover essa seta para a direita porque nós não precisamos disso. Depois disso, vou alinhar essa camada de texto ao centro. Primeiro, selecione esta camada de texto e, em seguida, selecione o retângulo, alinhe-o ao centro. Vamos alinhá-lo ao centro na seção de texto também. Vou mudá-lo para “ Obter OTP”. Muito bom. Também acho que é uma boa idéia mudar o lugar desses círculos. Vamos escolher o azul, e eu vou movê-lo para o lado esquerdo, assim, e escolher este, o roxo, e movê-lo para o fundo. Vamos girar um pouco. Muito bom. Eu vou mover este azul um pouco para baixo, e agora eu acho que é ótimo. Deixe-me diminuir um pouco. Lá vamos nós. Você pode ver como é incrível e bonito? O preenchimento inferior deste botão vai ser 64 pixels, como este. Acho que é uma boa ideia aumentar o tamanho da fonte do nosso número de celular. Vou selecionar isso e vamos mudar para 18 pontos. Agora, é mais visível. Vou alinhá-lo ao centro, movê-lo para cima, e ele vai ter um preenchimento inferior de oito pixels. Agora, está muito melhor. Tudo bem, pessoal. Criamos com sucesso nossa primeira tela. Agora, vamos em frente e criar os outros dois. Vamos duplicar esta tela, muito bem. Vou mudar este texto para Enter the OTP, enviar para +49 111 222 333. Vou selecionar este número de telefone, e vou torná-lo ousado, assim. É muito bom. Então eu vou remover esta camada de texto e também este número de telefone. Muito bom. No entanto, vou manter esta linha. No entanto, vamos cortá-lo e colá-lo aqui porque não precisamos mais desse grupo. Então eu vou definir a largura para 48, assim. Muito bom. Agora, vamos adicionar uma camada de texto e vamos apenas escrever um número aleatório, por exemplo, sete. Vamos fazer isso normal, assim. Além disso, o tamanho da fonte será de 24 pontos, como este. Mova um pouco para cima para obter um preenchimento inferior de oito pixels, muito bom. Então vamos alinhá-lo com a nossa linha, assim. Agrupe-os, e vamos renomeá-lo para Campo de texto, depois duplicá-lo, movê-lo para o lado direito. Vai ter um preenchimento de 24 pixels à esquerda, como este. Em seguida, duplique-o mais uma vez, e mais uma vez, muito bom. Selecione todos eles, agrupe-os e alinhe-os ao centro. Então vamos selecionar o segundo número e mudá-lo para outra coisa, por exemplo, três. Vou remover os outros dois porque nesta tela, o usuário está inserindo a senha. Precisamos de alguma forma descrever este processo. Então eu vou selecionar essas duas linhas e mudar a cor para B9, B9, e B9, assim, muito bom. Agora, tudo está feito. Então vamos selecionar esse grupo, movê-lo para cima, e o preenchimento superior será 58 pixels, assim. Vou ter mais uma camada de texto. Vamos duplicar essa camada de texto e movê-la para baixo. Aqui, precisamos escrever, você não recebeu o OTP? Então vamos escrever, Reenviar OTP, assim. Vou mudar a fonte para SF Pro Text, assim. Vamos também alterar o tamanho da fonte para 14 pontos. Então vamos selecionar essa parte do texto e alterar o código de cor para B9, B9 e B9. Selecione também estes reenviar seção OTP e alterá-lo para 27, 43 e FD, assim. preenchimento superior vai ser 40 pixels. A última coisa que precisamos fazer é mudar nosso botão. Porque agora, precisamos ter um botão de verificação desativado. Primeiro de tudo, vamos mudar este texto para, Verify, ótimo. Então eu vou selecionar este retângulo duas camadas, duplicá-lo, remover a sombra e movê-lo para cima acima do texto verificado, assim. Vou mudar a cor para uma sólida. Vamos mudar para branco. Depois disso, vou diminuir a opacidade para 40%, assim. Também vou selecionar estes texto de verificação. Vamos diminuir a opacidade da camada para 50%. Bastante agradável. Por último, mas não menos importante, lembre-se de renomear seu grupo sempre, verificar, e isso é tudo. Como você pode ver, agora temos um botão desativado porque o usuário não inseriu o código OTP completamente. Agora, vamos duplicar esta tela para projetar nossa última tela. Vou movê-lo para o lado direito um pouco. Agora, o que precisamos? Primeiro de tudo, precisamos completar este código. O que eu vou fazer é selecionar este número, copiar este, colá-lo aqui, movê-lo para o lado direito, e eu vou movê-lo diretamente acima desta linha de texto em nosso painel de camadas. Então vamos escrever zero, muito bem. Certifique-se de alinhá-los ao centro, assim. Depois disso, vou mudar a cor para este. Muito bom. Mais uma vez, duplique-o, mova-o para o lado direito. No entanto, precisamos movê-lo em nosso painel Camadas também, assim. Vamos mudar para dois. Vamos mudar a cor da nossa linha de texto. Muito bom. Por último, mas não menos importante, agora precisamos ativar nosso botão. Vou abrir este grupo, e vamos remover o retângulo que acabamos de criar. Vou aumentar a opacidade do meu texto para 100%. Tudo bem, todo mundo. Isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. Vejo você então. 82. Telas de perfil: Olá a todos e bem-vindos de volta a outro vídeo da seção. Neste vídeo, vamos começar a desenhar nossas telas de perfil. Primeiro, precisamos ter uma nova prancheta, então o que eu vou fazer é apenas duplicar essa tela OTP. Depois disso, eu vou remover todos os objetos e deixe-me renomeá-lo para perfil. Basicamente, esta tela de perfil vai ter um plano de fundo e também um espaço reservado de imagem de perfil bem na parte superior e alguns campos de texto e um botão. Primeiro de tudo, vamos em frente e inserir um retângulo, a fim de criar nosso plano de fundo assim. Certifique-se de que ele se encaixa na sua tela e, em seguida, mude-o para gradiente linear e nós vamos fazer com que ele se ajuste assim. Vamos selecionar a primeira cor, e eu vou definir o código de cor para 4960 e F9, assim. A segunda cor será 1937 e FE. No entanto, certifique-se de aumentar a opacidade para 100 por cento como este, e também eu vou mudar a direção um pouco para obter um gradiente melhor, algo assim. É muito bom, não é? Depois disso, precisamos adicionar nossa barra de status e nosso indicador doméstico. No entanto, desta vez precisamos obter a barra de status branca e um indicador de casa branca. Vamos colocar uma imagem. Nas barras de pastas da IU do Apple iOS, digamos esta barra, vamos escolher o escuro e colocá-lo aqui assim. Muito bom. Então vamos colocar outra imagem. pasta do indicador inicial, vamos escolher o retrato escuro e colocá-lo na parte inferior. Alinhe-o ao centro e também alinhe-o ao fundo, assim. Muito bom. Até agora criamos a tela base. Agora é hora de adicionar alguns detalhes a ele. A primeira coisa que precisamos é de uma seta de backlink bem no canto superior esquerdo. Vamos colocar um ícone da nossa pasta ícones, e aqui eu vou escolher seta para a esquerda e colocá-lo aqui, assim. Às vezes, quando você adiciona esses ícones, eles podem ser invisíveis. Este é provavelmente um bug do Figma, no entanto, se você quiser corrigir isso, você pode fechar seu arquivo e abri-lo mais uma vez, e então você verá esses ícones. Agora vamos verificar os estofos. O preenchimento esquerdo será de 30 pixels como este, e o preenchimento superior será de 24 pixels como este. O preenchimento superior será contra esta barra de status, não a borda desta prancheta. Muito bom. Agora vamos criar nosso espaço reservado de imagem de perfil juntos. O que vou precisar é de um retângulo. Vou inserir isso. Vamos segurar Shift adicionar arrastar e soltar assim. Certifique-se de que a largura e a altura estão definidas para 100 pixels. Então eu vou definir o raio do canto para 36, e também vou torná-lo suave assim. Muito bom. Depois disso, vamos mudar a cor para branco. Agora vou adicionar alguns detalhes a ele. Vamos duplicá-lo primeiro, comando D ou controle D, então vamos torná-lo um pouco maior. Vamos definir a altura e a largura para 104 pixels como este. Vou definir a cor para um azul claro. Vamos tentar 40CE e F2. Fantástico. Agora vamos mover esta camada para baixo logo abaixo do nosso primeiro retângulo. Então eu vou alinhá-lo ao centro, este branco também, e agora vamos selecionar ambos e alinhá-los horizontalmente e verticalmente. Agora vamos renomeá-los. O azul vai ser azul e o branco vai ser branco, que podemos reconhecê-los facilmente. Agora vamos selecionar o azul, e eu vou girá-lo em menos 57 graus como este. Então, mais uma vez, vamos duplicar o branco, e agora vamos mudar a cor para B52FF e 8, assim. Desta vez, vamos torná-lo 106 por 106 pixels e certifique-se de que ele está alinhado ao centro horizontalmente. Vou movê-lo para cima assim. Vamos mudar o nome para roxo movê-lo para baixo logo abaixo do azul, e desta vez vamos girá-lo em menos 30 graus. Fantástico. É tão chique, não é? Então precisamos colocar nosso ícone de câmera bem no centro deste quadrado branco. Vamos colocar uma imagem. A partir de ícones, eu vou escolher a câmera e colocá-lo aqui, em seguida, certifique-se de alinhá-lo com o seu quadrado branco, tanto vertical como horizontalmente. Depois disso, vou selecionar todos esses elementos, agrupá-los, e vamos chamá-lo de imagem de perfil, assim. O preenchimento superior será de 40 pixels como este, e certifique-se de que ele está alinhado ao centro horizontalmente. Além disso, eu vou remover estes 0.6 do eixo y para obter um preenchimento superior de 40 pixels como este. Muito bom. Agora é hora de criar nossos campos de texto. A fim de economizar nosso tempo, eu vou escolher este campo de texto de endereço de e-mail, copiar isso, colá-lo aqui. Muito bom. Eu vou movê-lo para cima e vamos mudar o título para nome de usuário, e também a cor vai ser 80E0 e FF. Vamos copiar este código de cor porque vamos precisar disso. Essa camada de texto vai ser seu nome de usuário e o código de cor vai ser o mesmo. Muito bom. Vamos ocultar esses ícone de tick, no entanto, não remova isso porque na próxima tela você vai exibi-lo. Vamos apenas escondê-lo por enquanto, em seguida, selecionar estes campos de texto linha e torná-lo branco, muito bom. Vou renomear esses campos de texto para nome de usuário, este grupo também. Muito bom. Agora é hora de duplicar isso e colocá-lo com um preenchimento superior de 24 pixels como este. Mais uma vez, duplique isso, e mais uma vez. Muito bom. O segundo será o nosso primeiro nome. Vamos escrever o primeiro nome, e aqui vai ser alterado para o seu nome e um nome de grupo e quadro vai ser o primeiro nome aqui também. Muito bom. O terceiro vai ser o último nome. Fantástico. Aqui precisa ser seu sobrenome também. Muito bom. O último será a data de nascimento. Fantástico. Aqui vamos escrever seu aniversário, e eu vou escrever um formato para isso. Vamos escrever dd-mm-aaaa. Isso significa que o usuário deve inserir o dia e o mês e o ano. Lembre-se de renomear o nome do seu quadro e também o nome do seu grupo, então eu vou alterá-lo para sobrenome. Este também, e o último a fazer aniversário. Muito bom. Agora vamos selecionar todos eles mantendo pressionada a tecla Shift no teclado, e vamos agitar o preenchimento superior, é 71.2. Vamos fazer 40 assim. Você pode agrupá-los e chamá-lo de campos de texto, e como você pode ver, o preenchimento direito e esquerdo são 30 pixels. Então a última coisa que precisamos é de um botão. Vai ser o nosso botão completo. Vou escolher estes botões de verificação, copiar isto, colá-lo aqui. Vamos remover esses círculos, não precisamos deles. Além disso, vou mudar a cor para um branco sólido. Certifique-se de selecionar o retângulo 2 não retângulo 1 porque esta é a nossa máscara e eu vou mudar a cor para branco sólido. Muito bom. As cores do texto devem ser C8, C8 e C8 assim. Vamos mudar para completar. A última coisa que precisamos adicionar a este botão é um ícone de tick. Deixe-me copiar e colar estes ícone de tick da nossa página de login, e eu vou colá-lo aqui. Vamos escolher a mesma cor para estes ícone de tick também. Vou alinhá-lo com o meu texto verticalmente, muito bom, e certifique-se de mover esta camada dentro do seu grupo de botões. Vai ser aqui e o preenchimento esquerdo vai ser um pixels. A razão pela qual escolhemos uma cor cinza claro para esses elementos é que este botão está inativo nesta tela, porque o usuário ainda não preencheu este formulário. Agora vamos renomeá-lo para concluir. Fantástico. Agora tudo está feito. Agora vamos em frente e projetar nossa página de perfil concluída. Eu vou duplicar esta tela assim, e depois primeiro vamos preencher esses campos de texto juntos. O primeiro vai ser Emma sublinhar Ashley, você pode escolher o que quiser, não importa. Vou torná-lo branco. O primeiro nome será Emma, branca também, sobrenome deve ser Ashley. Vamos torná-lo branco, muito bom. A data de nascimento será 20 de Dezembro de 1990. Vamos torná-lo branco. Muito bom. Agora, como mencionei antes, vamos mostrar nosso ícone T. Vamos em frente e mostrá-los assim. Fantástico. A cor dos nossos textos completos deve ser alterada para 2B47 e FC. Vamos copiar isso porque eu vou mudar a cor deste ícone T também, colar aqui. Muito bom. Agora, este botão está ativo. Agora vamos em frente e mudar nosso espaço reservado de perfil. Vamos adicionar uma imagem a isto. Primeiro de tudo, precisamos remover este ícone da câmera assim, então vamos escolher esses quadrados brancos. Agora eu vou escolher um plugin. Vou usar o plug-in de conteúdo real que eu já mostrei como você pode usar. Eu vou clicar neste conteúdo aqui, e vamos para avatares, escolher feminino, e vamos atualizá-lo até que você tenha uma ótima foto. Acho que é muito bom, fantástico. Além disso, eu vou adicionar uma sombra para esses quadrados, então vamos adicionar efeitos a isso. Vou mudar a configuração, então vamos definir o borrão para 22 e o branco para 8 e diminuir a opacidade para 20 por cento. Fantástico. Depois disso, vou selecionar esses quadrados azuis e roxos, movê-los para fora do nosso grupo de imagens de perfil. Vamos escalá-los um pouco assim. Vou escolher o azul primeiro, clique duas vezes, para entrar no modo de edição. Depois disso, eu vou adicionar um nó bem no meio, assim, e então eu vou movê-lo para o lado direito até obter uma forma como esta. Muito bom. Vamos movê-lo para a direita, clique em “Concluído”, e vamos fazer a mesma coisa com este quadrado roxo também. Vou adicionar um nó aqui e movê-lo assim. Muito bom. Mova-o para o topo. Vamos girar um pouco assim. No entanto, vou escalá-lo para torná-lo maior, um pouco mais. Vamos escalar este azul também, vamos girá-lo um pouco. Muito bom. Vou movê-lo para a direita até ter a melhor localização possível. Agora vamos selecionar os dois. Vou movê-los para baixo logo abaixo da nossa imagem de perfil e também da nossa barra de status, que é esta linha. Muito bom. Mova-os para cima e isso é tudo. É muito bom, não é? A única coisa que eu notei é que nós não alinhamos essa camada de texto completa ao centro. Vamos em frente e selecionar estes texto completo e estes ícone de tick, agrupá-los e alinhá-lo ao centro. Eu vou fazer a mesma coisa com esses elementos também. Vou selecioná-los, agrupá-los, selecionar o retângulo e alinhá-los ao centro. Agora tudo está feito. Consegues ver como é bonito? É bem interessante, não é? Pessoal, isso é tudo por este vídeo. Espero que tenha gostado. No próximo vídeo, vamos projetar nossa página inicial juntos. Então, vejo você então. 83. Página inicial: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos projetar nossa página inicial juntos. Sem mais delongas, vamos começar duplicando este perfil concluído prancheta assim, então eu vou remover quase tudo, exceto o fundo. Vamos tentar remover todos esses elementos, esta seta para a esquerda também porque eu não preciso mais disso, e também este indicador doméstico. Então vamos usar esta camada Retângulo 4, que é o nosso plano de fundo, e eu vou mudar a altura para 278, assim. Depois disso, vou clicar duas vezes sobre isso. Agora estou no modo de edição. Em seguida, vamos selecionar esses dois nós inferiores. Eu vou escolher o primeiro e segurar Shift, e escolher o segundo, e deixar definir o raio do canto para 66 assim, feito. Certifique-se de usar suavização de canto para obter cantos suaves como este. Fantástico. A próxima coisa que precisamos é o ícone do menu de hambúrguer bem no topo. Vamos em frente e colocar uma imagem. A partir dos ícones, você escolhe Menu Hamburger, coloque-o aqui. Agora vamos verificar os estofos. Agora vamos definir o cabeçalho superior para 27, assim, e um acolchoamento esquerdo vai ser 30. Fantástico. Então eu preciso desta imagem de perfil para colocar direito no topo deste cabeçalho. Vamos copiar e colar aqui assim. Então eu vou reduzi-lo. Vamos usar a ferramenta Escala. Vamos descer para 50 por 50, assim. Vou ajustá-lo para 50 por 50 assim. Vamos colocar bem ali. Então eu preciso adicionar um indicador de status a esta imagem de perfil para indicar se este usuário está online ou não. Vamos adicionar um círculo como este. Eu vou definir para 10 por 10, e vamos mudar a cor para 20C968 assim, e eu preciso de um derrame. Vamos adicionar um traçado e mudar a cor para branco. Fantástico. Depois disso, vou alinhá-lo ao lado direito. Vamos subir um pouco assim. Como você pode ver, esse indicador está alinhado perfeitamente com as bordas desta imagem de perfil. Então vamos colocar este círculo dentro deste grupo de imagens de perfil, e isso é tudo. Depois disso, precisamos verificar os estofos. O preenchimento superior será de 24 pixels, assim, e a direita deve ser 30. Muito bom. A próxima coisa que precisamos é de um texto. Vamos adicionar uma camada de texto e escrever “Bom dia Emma”. Então, eu vou mudar a fonte para Montserrat assim, torná-lo regular e o tamanho da fonte deve ser de 24 pontos e a cor obviamente branca. Agora vamos verificar os estofos. O preenchimento esquerdo deve ter 60 pixels, assim, e um preenchimento superior deve ser 80. Fantástico. Agora o que precisamos? Aqui, eu vou colocar um cartão, que consiste em um gráfico de barras que mostra o saldo disponível deste usuário específico. Preciso adicionar um retângulo, assim. Por enquanto, vamos definir a largura e a altura para 315, assim, alinhá-la ao centro e aumentar o raio do canto para 40. Certifique-se também de que você tem cantos suaves como este. Então eu vou mudar a cor para branco. Fantástico. Agora vamos adicionar uma sombra a isso. Vou adicionar efeitos e vamos alterar as configurações. O borrão vai ser 50, o X vai ser zero, e o Y deve ser nove neste caso. Vamos diminuir a opacidade para 10%. Muito bom. Eu vou definir o preenchimento superior deste card para 16 pixels como este. Até agora, tudo bem. Então precisamos da camada de texto aqui, vou escrever o seu saldo total. Muito bom. Deixe-me diminuir o tamanho da fonte para 16 pontos como este. Seu cabeçalho superior será 32 pixels, o preenchimento esquerdo 32 pixels também, duplicá-lo. Agora vou mudar o caminho para negrito e um tamanho de fonte para 30 pontos. Aqui vamos escrever o valor. Por exemplo, vamos escrever $8.500 assim, e eu vou mudar a cor para 2D99FF, assim. O estofamento superior vai ser oito e oito como agora. A próxima coisa que precisamos é de um ícone Mais. Vamos em frente e colocar uma imagem. Aqui temos o ícone Mais, vou colocá-lo aqui. Como você pode ver, agora é invisível. Como eu mencionei antes, é um inseto. Para corrigir isso, você pode facilmente fechar seu arquivo e abri-lo mais uma vez assim, e agora ele está visível. Vamos usar este ícone. Vou movê-lo para o lado direito. Agora vamos alinhar com o nosso texto. Vamos escolher este ícone menor, e esta camada de texto e clicar em “Alinhar verticalmente”. Muito bom. O preenchimento direito será de 32 pixels também. No entanto, lembre-se de alterar a cor desta camada de texto. Vou configurá-lo para 3A3A3A. Muito bom. Agora é hora de criar nosso gráfico de barras juntos. Primeiro de tudo, precisamos de um retângulo para criar nossas barras. Vou arrastar e soltar assim. Vamos definir a largura para nove e a altura para 122, assim. Eu vou clicar duas vezes sobre isso e vamos selecionar esses dois nós superiores porque eu vou aumentar o raio de canto deles até eu obter uma barra completamente arredondada como esta. Então vamos escolher isto. Vou escolher o conta-gotas e escolher o mesmo azul do nosso texto, assim. Vou movê-lo um pouco para baixo, depois duplicá-lo, movê-lo para o lado direito. Vou diminuir sua altura assim. Vamos configurá-lo para 32 pixels. Muito bom. Então, vou clicar com o botão direito do mouse sobre isso, e vamos escolher Virar Vertical. Como você pode ver, está virado. Vou movê-lo para baixo e vamos verificar os estofos. O preenchimento esquerdo deve ter quatro pixels como este. A última coisa que precisamos fazer é mudar a cor. Vou configurá-lo para A5F3FF. Muito bom. Vamos agrupá-los. Vou chamá-lo de Coluna 1, duplicá-lo, e vamos definir o preenchimento esquerdo para 16 pixels como este. Agora vou mudar a altura destas barras. Vamos selecionar esta barra. Vou ajustá-lo para 100, assim. Agora é hora de diminuir a altura desta barra também. Vamos adicioná-lo ao 23. Muito bom. Então vamos duplicar mais uma vez. Coloque-o com um preenchimento esquerdo de 16 pixels. Eu vou diminuir a altura para 89, assim, e para este, vamos diminuir para 15, muito bom. Vamos duplicar mais uma vez. Vamos definir a altura para 61, e vamos diminuir o tamanho da altura deste menor também para sete. Então vamos duplicar mais uma vez. Desta vez, precisamos mudar o lugar desses dois bares. Primeiro de tudo, vamos clicar com o botão direito do mouse e escolher Virar Vertical. Vou movê-lo para baixo assim. Depois disso, vamos diminuir a altura para 44. Muito bom, e escolha este também. Clique em “Virar vertical” movê-lo para cima, e agora vamos aumentar sua altura para 27, assim. Vamos duplicar. Vou diminuir este para 15, assim. Vamos aumentar o segundo para 70. Finalmente, o último, eu vou duplicá-lo e diminuir esta barra um pouco. Vou ajustá-lo para 10 e aumentar o próximo para 108, assim. Agora, vamos selecionar todos eles, agrupá-los, e eu vou chamá-lo de colunas como esta. Vamos alinhar com o meu cartão. Vou selecionar este retângulo, vamos segurar Shift e clicar nele, alinha-o ao centro. Vamos definir o preenchimento superior para 26, assim e um preenchimento inferior vai ser 32 porque o preenchimento superior aqui é 32 pixels, então precisamos aumentar a altura deste quadrado. Como pode ver, são 26. Vou mudar a altura. Primeiro, vamos desvincular essa altura e largura, e depois, vamos escrever mais seis. Vamos verificar isso. Lá vamos nós. Agora temos um preenchimento de botão de 32 pixels também. Por último, mas não menos importante, temos de agrupar todos estes elementos. Vamos selecionar todos eles, agrupá-los, e eu vou chamá-lo Balance Card. Agora vamos em frente e criar nossa barra de guias. Precisamos colocar uma barra de abas bem na parte inferior desta tela. Em vez de usar uma barra de guias pré-fabricada, eu vou mostrar-lhe como você pode projetar sua guia de personalização que é bastante incrível. Vamos em frente e inserir um retângulo aqui. Vou arrastar e soltar e mudar a cor para branco. Muito bom. Vou adicionar um pouco de sombra e vamos mudar a quantidade de borrão para 20. O Y vai ser dois. Também precisamos diminuir a opacidade para 10 por cento. Muito bom. Então vamos diminuir a altura para 92 também. Vou alinhá-lo ao fundo. Também precisamos do indicador doméstico. Vamos em frente e copiá-lo e colá-lo de uma das nossas telas anteriores como esta. Muito bom. Agora é hora de criar nossas guias. Basicamente vamos ter três guias diferentes. A guia na, a guia de notificação e uma guia de perfil. Vamos em frente e colocar uma imagem. Na pasta Ícones, você tem um toque ou pasta, bem como três ícones diferentes. Vou colocar todos eles um por um. Então vamos mudar o lugar deles. Este ícone de notificação vai estar bem no meio e o perfil deve estar no lado direito. Agora vamos colocar o estofamento entre eles. Primeiro de tudo, eu vou selecionar todos eles assim e da seção de alinhamento, eu vou clicar em distribuir espaçamento horizontal como este. Depois disso, com esses indicadores, posso facilmente definir o preenchimento entre eles para 90. Muito bom. Então precisamos de um indicador circular para mostrar que essas guias estão ativas. Vou criar um círculo. Vamos fazer cinco por cinco. Vou escolher o conta-gotas para selecionar a mesma cor do nosso ícone. Vamos alinhá-lo ao centro. Muito bom. O estofamento superior vai ser um pico de células. Assim. Agora vamos agrupá-los, esta vai ser a nossa carteira. Muito bom. Temos notificação e perfil também. Selecione todos eles, agrupe-os. Mais uma vez, vou chamá-lo de Tabs, e vamos alinhá-lo ao centro assim. O preenchimento superior vai ser 24 pixels como este. Agora estamos quase terminando. No entanto, vou criar alguns componentes para tornar a sua vida muito, muito mais fácil. Vamos selecionar esta carteira de grupo e eu vou clicar em “Criar ícone Componente”. Lá vamos nós. Agora acabamos de criar um componente. Então vamos copiar isso e eu vou criar uma nova página. Vamos chamá-lo de símbolos, e eu vou colá-lo aqui. Lá vamos nós. Então eu preciso copiar e colar esses dois ícones, bem como então vamos selecioná-los, copiá-los, e colá-los na página de símbolos aqui mesmo. Fantástico. Basicamente, para cada ícone, precisamos de dois estados diferentes, o estado ativo e o estado de desativação. Estes azuis vão ser o nosso estado activo e estes cinzentos escuros vão ser o nosso estado de desactivação. O que vamos fazer é criar dois estados diferentes aqui. Agora vou duplicar. Vamos separá-lo de seu mestre assim. Remova o círculo e eu vou mudar a cor para este cinza escuro. Vamos escolher estes conta-gotas e selecionar este. O código de cor é 3A, 3A e 3A. Agora vou selecionar esses quadros da carteira e clicar em “Criar componente”, assim. Vamos mudar o nome para wallet/the active. Vamos renomeá-lo para wallet/active. Muito bom. Na verdade, como você pode ver, esta é uma instância dos componentes mestre. Nosso componente mestre está aqui. Vou cortar isto. Vamos colá-lo aqui para que possamos ter o componente mestre. Vou remover este, e lá vamos nós. Mais uma vez, vamos renomeá-lo para wallet/active. Nós vamos fazer a mesma coisa para esses dois ícones também. Para notificação, vou duplicar. Vamos movê-lo para o lado esquerdo. Vamos mudar a cor para este azul, assim. Eu preciso deste círculo também, então eu vou copiar e colá-lo aqui. Certifique-se de que está totalmente alinhado. Selecione essas duas camadas, agrupe-os, e vamos escrever notificação/ativo, e clique em “Criar componente” como este. O segundo será notificação/desativação. Para o perfil também, vou duplicá-lo. Vamos mudar sua cor para este azul. Eu vou copiar e colar este círculo também, agrupá-los e vamos chamá-lo de perfil, ativo. Clique em “Criar componente”. O último deve ser desativo do perfil e clicar em “Criar Componente”. Esquecemos de criar um componente disso, a notificação ativa. Vamos clicar em criar componentes para este também. Como você pode ver, temos outro quadro aqui, então vamos remover isso. Não precisamos dele. Muito bom. Temos seis componentes diferentes. Agora, como podemos usá-los? Vamos voltar para a nossa Página 1, e agora precisamos substituir nossos ícones por nossos componentes. Vamos para os ativos. Aqui temos três componentes diferentes. Vamos colocar a carteira ativa aqui, muito bem. Também vou remover os dois. Vamos colocar a notificação de desativação também. Muito bom. Também o perfil desativo, selecione todos eles, clique e distribua espaçamento horizontal, alinhe-os verticalmente também, e vamos definir o preenchimento como 90, assim. Mais uma vez, agrupe-os e vou chamar-lhe abas. Vamos alinhar este grupo ao centro. Muito bom. Agora precisamos alinhar esses dois ícones para o topo deste grupo. Vamos selecionar todos eles e clicar em alinhar para o topo. Muito bom. Agora vou te mostrar por que fizemos isso. Suponha que você está indo para fazer isso o ativo, em vez de mudar nossos ícones novamente e novamente, agora podemos facilmente ir para a seção de incenso e, a partir deste menu, podemos facilmente escolher desativo ou ativo. Muito bom. Agora vamos agrupar nossos elementos. Vou selecionar estas abas e também o nosso retângulo e estes indicador home. Agrupe-os e eu vou chamá-lo de barra de tabulação. A última coisa que precisamos criar é outro cartão aqui. Vamos selecionar estes cartões de saldo. Vou segurar a tecla Command e clicar nisso. Copie isto e cole aqui. Vamos mudar a altura para 146, assim. Eu vou movê-lo para baixo e vamos definir o preenchimento superior para 24 pixels. Muito bom. Então eu vou escolher este botão. Vou segurar a tecla Command e selecionar este Retângulo 2. Então vamos clicar com o botão direito sobre este retângulo 2 porque eu vou copiar e colar as propriedades desses botões, Eu preciso desse gradiente. Vamos clicar em “Copiar propriedades”, e eu vou selecionar esses cartões e vamos colá-lo aqui. Muito bom. No entanto, lembre-se de mudar o raio do canto também. Porque colamos que as propriedades destes botão, então precisamos alterá-lo para 40 mais uma vez. Muito bom. Depois disso, vou selecionar esses círculos, copiá-los, colá-los aqui assim. Muito bom. Vamos mover estes roxos um pouco para baixo e este azul um pouco para cima. Agora eu vou duplicar este retângulo como este movê-lo para baixo e agora eu posso facilmente mascarar esses círculos. Vamos usar retângulos 6, que é o retângulo mais alto, e esses círculos e clique na máscara. No entanto, lembre-se de remover essas sombras. Acho que é uma boa ideia mudar o lugar desses dois círculos. Vou mover estes azuis para baixo e este roxo para cima para obter algo como isto. Vamos escalá-los um pouco. Agora parece ótimo. Então precisamos de uma camada de texto, então vamos inserir uma. Vamos escrever cheque suas contas bancárias” assim, e vamos aumentar o tamanho da fonte para 20 pontos. Vou torná-lo branco. Também vamos mudar o quadro desses para obter algo assim. Então eu vou alinhá-lo com o meu cartão. Precisamos escolher ambos, alinhá-lo verticalmente e o preenchimento esquerdo deve ser 32 pixels. Estamos quase terminando. A única coisa que precisamos adicionar é uma seta para a direita menor. Vamos colocar uma imagem. Vamos usar uma flecha pequena e colocá-la aqui. Muito bom. Vamos alinhá-lo verticalmente. Fantástico. Acolchoamento direito vai ser 32 também. Agora é hora de selecionar todos os nossos elementos. Vamos selecionar estes grupos de massa, estes Retângulo 7 também. Estas camadas de texto e esta pequena seta, agrupá-los e vamos chamá-lo de cartão de contas bancárias. Isso é tudo. Certo, pessoal, foi um vídeo alinhado. No entanto, como você pode ver, você pode criar esses painéis incríveis e modernos para o nosso aplicativo de finanças. A última coisa que precisamos fazer é renomear nosso quadro de arte para página inicial. Muito bem pessoal, muito obrigado por assistirem este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 84. Cardápio: Olá a todos, e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos projetar nossa tela de menu juntos. Basicamente, quando o usuário clica neste ícone de menu de hambúrguer diretamente na parte superior desta tela inicial, nosso menu deve deslizar do lado esquerdo da tela. Primeiro de tudo, vou inserir um novo quadro de arte aqui. Então, vamos pressionar “A” e vamos escolher iPhone 11 Pro ou X. Muito bom. Então eu vou renomeá-lo para Menu assim. Depois disso, precisamos ir em frente e exportar a tela porque vamos precisar disso. No entanto, lembre-se de primeiro ocultar a barra de status e este indicador inicial. Eu digo-te porquê. Primeiro, vamos exportá-lo. Na seção Exportar você pode escolher 2x para obter uma resolução melhor e o formato deve ser PNG. Você pode escolher JPG também, mas PNG está bem. Vamos clicar neste botão “Exportar página inicial”. Na nossa pasta Ativos, vou criar uma nova pasta. Vamos escrever Exportações e guardá-lo aqui. Em seguida, lembre-se de exibir sua barra de status e também seu indicador de casa. Bastante bom. Agora é hora de colocar nossa imagem exportada aqui. Vamos em frente e escolher isso em nossa pasta Ativos. Lá vamos nós, Exportações, Homepage. Vou colocá-la aqui. Fantástico. A razão pela qual eu escondi a barra de status e também este indicador de casa foi porque agora precisamos mover a tela para o lado direito. Se não os escondêssemos, casa deles estaria confusa aqui. Portanto, não faz sentido mover a barra de status e o indicador inicial para o lado direito. Não é possível. Agora vamos movê-lo para o lado direito um pouco. Vou ajustar o X para 266 assim. Bastante bom. Depois disso, preciso colocar uma camada de sobreposição para torná-la mais escura. Vamos em frente e criar um retângulo. Vou arrastar e soltar assim. Vamos torná-lo maior um pouco, ajustá-lo para preto, e diminuir a opacidade para 30% assim. É muito bom. Então precisamos criar nosso menu. Vamos criar outro retângulo aqui. Arrastar e soltar. Às vezes, quando você cria uma nova camada, ela pode ser colocada fora de seu quadro de arte. Como você pode ver agora, está fora dos meus muitos quadros de arte, então vamos movê-lo para dentro. Lá vamos nós. Então vamos em frente e mudar a largura para 281 assim. A altura deve ser 812, e eu vou torná-la branca. Bastante bom. Então vamos clicar duas vezes sobre isso, a fim de entrar no modo de edição e eu vou selecionar esses dois nós, os nós superior direito e inferior direito como este. Vamos aumentar o raio do canto para 20. Bastante bom. No entanto, eu vou torná-lo suave, então vamos aumentar esse valor para 60 por cento. Bastante agradável. Agora podemos copiar e colar este indicador home assim. Vou colocá-la no centro e no fundo. Bastante bom. O que precisamos para este menu? Na verdade, precisamos desta imagem de perfil, então eu vou copiá-la e colá-la aqui, movê-la para o lado esquerdo, e seu preenchimento esquerdo deve ser 30 pixels como este. Bastante bom. Deixe-me ampliar. A outra coisa que precisamos adicionar é o nome do usuário e o nome de usuário. Vamos inserir um texto aqui. Vou escrever para Emma Ashley assim. Vou mudar a fonte para Montserrat. Bastante bom. Vamos configurá-lo para negrito e o tamanho da fonte deve ser 16 pontos e eu vou mudar a cor do texto para 3A3A e 3A. Bastante bom. Em seguida, duplique-o, mova-o para baixo, e aqui eu vou escrever o nome de usuário. Vamos escrever @emma_ashley e então eu posso mudar o caminho para regular e também o tamanho da fonte para 14 como este. O preenchimento superior deve ser zero e agora vamos selecionar ambos, agrupá-los e alinhá-lo com nossa imagem de perfil assim. O preenchimento esquerdo deve ter oito pixels. Bastante bom. Agora é hora de criar nossos submenus. Primeiro de tudo, vamos inserir um texto. O primeiro menu será Pagamentos como este e o tamanho da fonte deve ser 18 pontos, a fonte deve ser Montserrat, e o peso deve ser regular. No entanto, eu preciso mudar a cor para ser e FC como este. Vamos movê-lo um pouco para cima. Então precisamos colocar um ícone para isso. Vamos em frente e colocar uma imagem. Aqui na pasta Ícones você tem a pasta Menu e temos seis ícones. Por enquanto, vamos escolher Pagamentos, coloque-o aqui. Bastante bom. Vamos selecionar ambos e alinhá-los verticalmente assim e o preenchimento esquerdo deve ter oito pixels. Agrupe-os. Então eu vou criar um fundo para isso porque nós vamos ter estados diferentes, então quando o submenu é selecionado, seu fundo deve ser um pouco mais escuro. Vamos criar um retângulo aqui. Vou arrastar e soltar assim e vamos definir a altura para 60. Vou clicar duas vezes sobre isso e vamos usar esses dois nós, o canto superior direito e o canto inferior direito, e definir o raio do canto para 14 assim. Lembre-se de torná-los suaves. Bastante bom. Depois disso, vou mudar a cor para F2F4 e F8 para obter algo assim e vamos mover esta camada para baixo. Bastante bom. Vamos alinhar nosso texto com nosso plano de fundo verticalmente. Até agora, tudo bem. Então a próxima coisa que precisamos é de uma seta para a direita, então eu vou ir em frente e colocar uma seta, ícones, e aqui nós temos essa pequena seta. Vamos colocá-lo aqui. Então eu vou movê-lo para cima assim. Finalmente, vamos mudar sua cor. Vou selecioná-lo. Certifique-se de que você não selecione o quadro. Você precisa selecionar a forma, então pressione e mantenha pressionada a tecla “Command” ou a tecla “Control” no teclado e selecione-a. Agora estamos selecionando a forma. Então eu vou escolher o conta-gotas e vamos selecionar a mesma cor que o nosso ícone. Depois disso, temos que alinhar esta pequena seta com o nosso fundo e o nosso texto. Como podemos fazer isso? Primeiro, vamos alinhá-lo com o texto lido como este. Porque já alinhamos nosso texto ao centro, então temos certeza de que esse ícone também está alinhado com nosso plano de fundo. Seu preenchimento direito vai ser 32 pixels, assim. Como você pode ver, o preenchimento superior e inferior são 24 pixels e o preenchimento esquerdo do nosso ícone e grupo de texto deve ser 34 pixels como este e agora tudo está feito. A próxima coisa que vou fazer é selecionar este grupo e também a pequena seta. Mais uma vez, agrupe-os e eu vou renomeá-lo para Pagamentos. Bastante bom. Duplicá-lo, movê-lo para baixo, e a distância entre o submenu seguinte e o submenu anterior deve ser de 50 pixels como este. Agora vou mudá-lo para Transações. Fantástico. Vamos mudar o ícone também, então eu vou colocar um novo ícone. A partir da pasta Menu, temos Transações. Vamos colocá-lo aqui e eu vou remover este aqui e vamos movê-lo para baixo, alinhá-lo com o seu texto. Bastante bom. Além disso, precisamos alinhá-lo com o nosso ícone de pagamentos. Vamos selecionar os dois. Se você quiser selecionar este também, mantenha pressionado “Shift” e “Command” juntos ou “Shift” e “Control”. clique sobre isso e lá vamos nós. Eles são selecionados e eu vou alinhá-lo ao centro horizontalmente assim. Bastante bom. Vamos renomear este grupo para Transações e mais uma vez duplicá-lo. O preenchimento superior deve ser de 50 pixels e aqui eu vou mudá-lo para Meus Cartões e vamos colocar outro ícone. Lá vamos nós. Temos aqui o meu cartão. Vamos remover o ícone anterior. Vou movê-lo para baixo, alinhá-lo com o nosso texto verticalmente, depois vou renomeá-lo para Meus Cartões. Mais uma vez, duplique-o, e agora precisamos alterá-lo para Promoções e eu vou remover este ícone. Vamos colocar um novo. Temos aqui as Promoções. Fantástico. Vamos alinhá-lo com o nosso grupo e também alinhá-lo com o seu ícone anterior, então eu vou selecionar este, o quadro, e também este, alinhá-lo horizontalmente. Bastante bom. Como você pode ver, este ícone está fora desta pasta, então eu vou colocá-lo dentro e vamos renomear esta pasta para Promoções. Bastante bom. Duplicá-lo e este é o nosso último submenu. Vamos chamá-lo de Poupança, remover o ícone e colocar um novo ícone, economia. Alinhe-o ao centro e também vamos alinhá-lo com o seu ícone anterior como este. Lembre-se de colocá-lo dentro deste grupo e renomear o grupo para Poupança e isso é tudo. Você viu como é fácil criar seu menu? A última coisa que precisamos criar é um botão Sair. O que eu vou fazer é encontrar o botão Cadastre-se aqui em nossa página de boas-vindas. Copie isso, cole aqui. Vou aumentar o zoom e vamos primeiro mudar este texto para Sair. Bastante bom. Vou remover este ícone e vamos selecionar este Retângulo 2, não Retângulo 1. Lembre-se deste Retângulo 2 e torná-lo menor assim. Vou definir a largura para 221. Fantástico. Vamos colocar um ícone. Temos Log out, colocá-lo aqui, movê-lo para baixo assim. Não precisamos desse grupo de máscaras, então você pode removê-lo. Vamos verificar o preenchimento deste ícone também. Primeiro de tudo, preciso alinhá-lo com o meu texto. Vamos selecionar ambos, alinhá-los verticalmente assim, e o preenchimento direito deste ícone deve ter 24 pixels como este. Bastante bom. Por último, mas não menos importante, vamos renomeá-lo para o botão Sair. Bastante bom. O preenchimento inferior deve ter 56 pixels como este. Isso é tudo. Tudo bem, pessoal. Isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. Vejo você então. 85. Página de cartões de crédito: Olá a todos e bem-vindos de volta a outro vídeo das partituras. Neste vídeo, vamos projetar nossa tela de cartões juntos. Sem mais delongas, vamos começar. Primeiro de tudo, eu vou ir em frente e selecionar essas páginas iniciais tela, duplicá-lo, e eu vou movê-lo logo abaixo da nossa tela OTP, então nós precisamos remover alguns elementos. Primeiro de tudo, vamos remover estas barras de abas, em seguida, este cartão, estes cartões bem, estas imagens de perfil, e também estes ícones de menu de hambúrguer. No entanto, precisamos ter esses indicador preto home, então vamos copiá-lo e colá-lo aqui. Também precisamos ter essa seta para a esquerda, então eu vou copiar isso e colá-lo aqui com a mesma posição. Na verdade, Figma reconhece automaticamente a posição anterior destas seta para a esquerda. Então vamos ampliar um pouco. Nesta tela realmente precisamos ter tantos elementos. Primeiro, precisamos de um título. Vamos escrever, você pode verificar seus cartões aqui”, assim. Então eu vou redimensioná-lo muito bem, e depois disso, eu vou mudá-lo para negrito, e também vamos definir o preenchimento esquerdo para 30 pixels como este. O preenchimento superior será de 80 pixels, até agora, tão bom. Então precisamos ter dois cartões diferentes, o cartão principal e um cartão secundário. Depois disso, precisamos ter a seção de transações recentes. Primeiro de tudo, vamos criar nosso cartão principal. Vou criar um retângulo como este. Vamos definir a largura para 209, e a altura para 305 assim, e eu vou mudar o raio do canto para 40. Lembre-se também de fazer esses cantos suaves como este, e agora eu vou mostrar a vocês uma técnica muito boa. Vamos criar um ótimo plano de fundo para a nossa placa principal usando gradientes radiais. Vou configurá-lo para branco, é o nosso fundo branco, e depois disso, precisamos criar nossos gradientes radiais um por um. Vou mudar o gradiente para radial, e vamos definir a primeira cor para 40D3 e F2 assim. Vamos copiar e colar esses códigos de cores para a segunda cor também. No entanto, lembre-se de manter a opacidade da segunda cor para zero por cento assim, e agora eu vou mudar a direção dessas cores. Vamos movê-lo assim. Agora vamos adicionar outro gradiente, ele vai ser radial também, e vamos definir a cor para E100FF. Vamos copiar isso e colá-lo para a segunda cor. Vou mudar a direção assim. Vamos torná-lo maior, fantástico, e precisamos de mais um gradiente também. Vamos em frente e adicionar outro gradiente radial, e eu vou mudar a cor para 2B47 e FC assim. Eu vou copiar isso e colá-lo para a segunda cor, e eu vou mudar a direção para aqui. Vamos torná-lo maior. Agora vou modificar um pouco as direções para obter o melhor resultado possível. Vamos modificar estes azul claro também. Você pode ver como é simples criar esses antecedentes? Agora é hora de adicionar uma camada de texto a este cartão. Eu vou inserir uma camada de texto e vamos escrever por $4.500 como este. Vou torná-lo branco. O tamanho da fonte é bom, então eu vou movê-lo para o lado esquerdo. Deixe-me ampliar. preenchimento superior vai ser 38 pixels, e seu preenchimento esquerdo deve ser 24 pixels como este. Então vamos duplicá-lo, movê-lo para baixo, e aqui vou eu escrever o título deste cartão. Digamos que esse cartão é para uma contagem de empresa, então eu vou escrever empresa, e vamos diminuir o tamanho da fonte para 18 pontos. Muito bom, e o cabeçalho superior vai ser três pixels como este. Então vamos adicionar outra camada de texto para a data de validade deste cartão, e eu vou escrever 01/2020. Vamos torná-lo um regular, e também eu vou mudar o tamanho da fonte para 14 pontos, e vamos mudar a cor para branco também. Agora precisamos alinhá-lo. preenchimento esquerdo deve ter 24 pixels e seu preenchimento inferior deve ser 72 pixels, como este. Duplicá-lo, movê-lo para baixo, e aqui nós precisamos escrever o número do cartão. Eu vou usar estrelas para os primeiros 12 dígitos como este, e para os últimos quatro dígitos vamos escrever 2204, e seu preenchimento superior deve ser 14 pixels como este. A última coisa que precisamos adicionar a esses cartões é o logotipo do MasterCard. Eu vou em frente e colocar uma imagem, e da pasta de logotipo, eu vou escolher o logotipo MasterCard. Vamos colocá-lo aqui, fantástico. Eu vou movê-lo para baixo, e seu preenchimento inferior deve ser 32 pixels, e o preenchimento direito deve ser 22 pixels, como este. Agora tudo está ótimo. Vamos em frente e selecionar todos esses elementos porque precisamos agrupá-los e vamos chamá-lo de MasterCard. A última coisa que precisamos fazer é adicionar uma sombra a estas cartas. Eu vou abri-lo, e vamos escolher o retângulo que é a nossa placa base, e vamos adicionar efeitos a isso. Shadow, eu vou definir a quantidade para 49 e o branco para nove, e então vamos mudar a cor para 5988 e F8 assim, e vamos diminuir a opacidade para 20 por cento, fantástico. Como você pode ver, acabamos de criar nosso primeiro cartão, que é o principal. preenchimento superior vai ser 16 pixels, perfeito, agora é hora de criar nosso cartão secundário. Eu vou duplicar este, então eu vou escolher a ferramenta de escala e eu vou reduzi-lo assim. Eu acho que a largura 177 é uma dimensão perfeita para isso. Vou movê-lo para o lado direito, o preenchimento esquerdo deve ser de 24 pixels, e lembre-se de alinhá-los verticalmente assim. O que vamos mudar para este cartão? A primeira coisa que é a mais importante é o pano de fundo. Eu vou remover todos esses gradientes porque você vai ter uma cor branca sólida, então vamos selecionar todas as camadas de texto, e eu vou definir o código de cor para 3A3A e 3A. Então eu vou mudar esse valor para 4.000 como este, e também esta empresa leva para casa. A última coisa que precisamos mudar é a cor da nossa sombra. Vou selecionar este retângulo 14, e vamos modificar a cor para preto. No entanto, com 10 por cento de opacidade, agora parece ótimo. Agora é hora de criar nossa seção de transações recentes. Primeiro de tudo, vou ter um título. Isso é escrever, transações recentes. Vou aumentar o tamanho da fonte para 22, vai ser careca e a fonte deve ser Montserrat, então tudo é perfeito, exceto o código de cor. Vou mudá-lo para 3A3A e 3A, assim, então vamos alinhá-lo. O preenchimento esquerdo deve ser de 30 pixels, como este, e também esquecemos de verificar o preenchimento esquerdo deste cartão, então vamos selecionar ambos. Como você pode ver, o preenchimento esquerdo está definido para 32 pixels, eu vou torná-lo 30, agora é ótimo. O que precisamos aqui? Precisamos criar três transações diferentes com título, preço e um ícone. Primeiro de tudo, vamos criar outra camada de texto. Suponhamos que a primeira transação esteja relacionada às compras. Eu vou escrever compras, vamos selecioná-lo e eu vou torná-lo regular, e também, vamos diminuir o tamanho da fonte para 18 pontos. Vou mudar o código de cor para 3A3A e 3A assim. Duplicá-lo e movê-lo para baixo, e agora precisamos escrever a hora exata e a data para esta transação. Vamos escrever 15 March 2019, e vamos escrever 8:20pm, e então vamos diminuir o tamanho da fonte para 16 pontos, e também o código de cor para BFBF e BF assim. Acho que é melhor diminuir o tamanho da fonte para 12 pontos, talvez. Sim, é ótimo, e o cabeçalho superior deve ser de quatro pixels, então agora tudo está ótimo. Então o que mais precisamos? Precisamos de um ícone à direita à esquerda, então vou em frente e criar um círculo como este. Deve ser 48 por 48 pixels, e então vamos mudar o código de cor para FFCF e 87, fantástico. Depois disso, vou trazer o ícone específico que já preparei para você, ícones. Aqui transações, temos quatro ícones diferentes, mas para a tela precisamos apenas de três. Vamos escolher as compras e colocá-la aqui. Vou alinhá-los verticalmente e horizontalmente. No entanto, às vezes você precisa alinhar seus elementos manualmente para obter um ótimo equilíbrio visual. Eu vou movê-lo para cima por dois pixels, e agora eu acho que está ótimo. Então vamos agrupá-lo, e eu vou chamá-lo de ícone de compras. Então vamos agrupar essas duas camadas de texto e alinhá-lo com seu ícone verticalmente. O preenchimento esquerdo deste grupo de texto deve ter oito pixels como este. O que mais precisamos? Precisamos ter a quantidade aqui e também uma pequena flecha. Eu vou selecionar essas camadas de texto, copiá-lo e colá-lo, então eu vou movê-lo para fora deste grupo, talvez para o lado direito. Vamos mudar o tamanho da fonte para 16 pontos, e lembre-se de alinhá-lo ao lado direito, vou mostrar-lhe o porquê. Vamos escrever menos $120. Vamos alinhá-lo com o seu grupo de texto assim, e depois disso, vou precisar de uma pequena seta. Vamos colocá-lo. Temos uma pequena flecha aqui. No entanto, precisamos mudar sua cor para C7C7 e C7 assim. Lembre-se quando você quiser mudar a cor, você precisa selecionar a forma não isso não. A forma está aqui. Se você quiser acessar a forma facilmente, mantenha pressionada a tecla Command no teclado ou a tecla Control se estiver usando o Windows. Então vamos alinhar com este texto. preenchimento direito vai ser 30 pixels, e o preenchimento direito dessa quantidade deve ser 16 pixels como este. Tudo está ótimo. Vamos selecionar todos esses elementos, agrupá-los e chamá-lo de compras. O preenchimento superior desta transação deve ser 12 pixels como este, então vamos duplicá-lo, movê-lo para baixo, e a distância entre eles deve ser 16 pixels como este. Vamos renomeá-lo para Medicina, e este vai estar relacionado com os sons do medicamento. Vamos mudar este título para Medicina, e também precisamos mudar o tempo. Vou escrever 13 de março de 2019, e vamos mudar para 12:00 e 10:00am. O valor deve ser alterado para $89,50. A razão pela qual eu disse que você precisa alinhar esses textos camada para o lado direito é porque quando estamos mudando a quantidade, estes camada de texto deve crescer a partir do lado esquerdo não para o lado direito. Então, finalmente, vamos escolher o círculo e eu vou mudar a cor para E09, e FFF. Vamos remover este ícone, e eu vou colocar o ícone de medicina da pasta de transações, colocá-lo aqui, e eu vou alinhá-lo com o meu círculo, tanto horizontal como verticalmente. Lembre-se de colocar o ícone do medicamento dentro deste grupo de medicamentos. Agora vamos duplicar esta transação, e eu vou mudá-la para esporte, então vamos mudar o tempo para 10 de março de 2019, e o tempo deve ser 6:50pm. Então vamos mudar o valor para 99,90. Depois disso, vamos remover este ícone, escolher este círculo e mudar a cor de fundo para 87F0 e FF, e vamos colocar seu ícone específico, esporte, colocá-lo aqui e alinhá-lo com seu círculo horizontal e verticalmente. Então lembre-se de renomear seu grupo também para esportes. Muito bem pessoal, nós projetamos com sucesso nossa tela de cartões juntos. A última coisa que precisamos fazer é renomear este quadro de arte para cartas, e isso é tudo para este vídeo. Espero que tenha gostado, e te vejo no próximo vídeo. 86. Página de transações: Olá a todos, e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos projetar nossa tela de transação juntos. Sem mais eu, vamos começar. Primeiro de tudo, deixe-me ampliar um pouco e então eu vou inserir uma nova prancheta. Vamos pressionar A no meu teclado e vamos usar o iPhone 11 Pro ou X. Muito bom. Deixe-me movê-lo para o lado esquerdo. Fantástico. O que precisamos para esta página? Primeiro de tudo, precisamos de um cabeçalho, com uma barra de navegação na parte superior, e então precisamos de algumas camadas de texto. Depois disso, precisamos criar um cartão flutuante na parte inferior para nossas transações. Vamos em frente e criar um retângulo. Vou arrastar e soltar, ter certeza de que esse retângulo está dentro da prancheta. Agora vamos renomear nossa prancheta para transações. Muito bom. Então eu vou selecionar este retângulo e vamos definir a altura para 245 assim. Vou clicar duas vezes sobre isso, a fim de entrar no modo de edição. Vamos selecionar esses dois nós inferiores porque eu vou aumentar o raio do canto para 62. Vamos clicar em “Concluído”. Depois disso eu vou fazer esses cantos suaves. Fantástico. Agora vamos em frente e mudar o preenchimento. Na verdade eu vou usar o mesmo gradiente que este retângulo. Vamos em frente Copy, Properties, e eu vou clicar com o botão direito do mouse aqui e colá-lo. Muito bom. Agora vamos copiar e colar a barra de status. Vou copiar isto, colá-lo aqui, muito bem. Agora é hora de criar nossa barra de navegação. Para a navegação onde precisamos de um título, então vamos inserir uma camada de texto e vamos escrever transações. A fonte será SF Pro Text e o tamanho da fonte deve ser 17 pontos e negrito. Então vamos selecioná-lo e torná-lo branco assim. Alinhe ao centro. Também vamos alinhá-lo aqui. Agora, vamos verificar os estofos. Ele parou de preencher até que este quadro, que é nossa barra de status, deve ter cinco pixels como este. A única coisa que precisamos adicionar para terminar nossa barra de navegação é uma seta de backlink. Vamos colocar uma imagem. A partir de ícones você pode inserir este ícone de seta de navegação. Coloque-o aqui. Muito bom. Agora vamos alinhá-lo com o nosso texto verticalmente assim. Mais uma vez, precisamos definir o preenchimento superior para três desta vez não cinco, e o preenchimento esquerdo deve ser de 24 pixels, assim. Muito bom. Vou agrupá-los e vamos escrever barra de navegação. Você também pode criar um componente se quiser usá-lo novamente e novamente. Como você pode ver agora temos um componente barra de navegação. Muito bom. Deixe-me diminuir o zoom. Para estas transações cabeçalho, precisamos ter um título. Vamos escrever suas despesas totais, e eu vou mudar a fonte para Montserrat e também o tamanho da fonte para 22 pontos. Vamos fazer isso normal. Fantástico. Vou alinhá-lo ao centro. Vamos mudar a cor da fonte para 87F0FF assim, muito bom. Está alinhado ao centro. Vamos subir um pouco. É o preenchimento superior até que nossa barra de navegação tenha 70 pixels como esta, duplicá-lo, movê-lo para baixo. Aqui precisamos escrever o valor de nossas despesas. Primeiro de tudo, vamos torná-lo ousado. Também vou torná-lo branco e, em seguida, vamos aumentar o tamanho da fonte para 28 pontos. Certifique-se de que está alinhado ao centro. Aqui vamos escrever $1.063.30 assim. O preenchimento superior desta quantidade deve ser de 16 pixels, como este. Muito bom. O que mais precisamos? Vou continuar e duplicar este retângulo. Mova esta camada logo abaixo do nosso retângulo principal. Vou movê-lo para baixo por cinco pixels. Como você pode ver que Y está definido para cinco agora, e vamos mudar sua cor para uma sólida. Vou definir o mesmo azul que usamos para esta camada de texto. Vamos escrever 87F0FF, muito bom. Nosso cabeçalho é feito e tudo é perfeito. Agora é hora de projetar nosso cartão. Vou em frente e selecionar este retângulo, este azul, duplicá-lo, movê-lo para baixo. Então eu vou clicar com o botão direito aqui, e vamos virar verticalmente assim. Muito bom. Vamos definir a altura para 541 assim e alinhá-lo ao fundo. Muito bom. A única coisa que vou mudar é a direção desses gradientes. Vou mudar o lugar destas duas cores assim. Agora tudo está ótimo. Então precisamos ter um indicador doméstico, então vamos copiar e colar este branco. Muito bom. Depois disso, precisamos criar um indicador que mostre que este cartão é móvel. Vou em frente e criar um retângulo, arrastar e soltar assim. Vou definir a largura para 47 e a altura para 4, assim. Vou fazer arredondado completamente, torná-lo branco. Fantástico. Depois disso, vamos alinhá-lo ao centro. O preenchimento superior deve ter 16 pixels, exatamente como este. Então precisamos ter uma barra de pesquisa, então em vez de usar algumas barras de pesquisa pré-fabricadas, vou mostrar-lhe como você pode projetar sua própria barra de pesquisa personalizada. É tão simples. Para uma barra de pesquisa, precisamos de um retângulo. Vou arrastar e soltar assim. Vamos definir a largura para 315 e uma altura para 53. Então eu vou definir o raio do canto para 16 como este e ter certeza de que eles são suaves. Fantástico. Alinhe-o ao centro, e vamos mudar a cor de preenchimento para algo mais escuro do que esse plano de fundo para criar um contraste. Vamos escrever 05199E. Muito bom. Seu preenchimento superior deve ser de 24 pixels. Assim, e agora precisamos de um texto e um ícone. Vou em frente e colocar uma imagem. Vamos escolher “Pesquisar” colocá-lo aqui, e eu vou alinhá-lo com nossa barra de pesquisa verticalmente. Muito bom. Seu preenchimento esquerdo deve ser de 16 pixels, como os acolchoados superior e inferior. Depois disso, precisamos de uma mensagem. Eu vou escrever pesquisa e a fonte vai ser SF Pro arredondado. Vamos mudar a cor para a mesma cor nosso ícone de pesquisa com a ajuda de conta-gotas, muito bom. Alinhe-o verticalmente com nossa barra de pesquisa e o preenchimento esquerdo deve ser oito oito e oito como este. Em seguida, vamos selecionar todos eles, agrupá-los e chamá-lo de barra de pesquisa. Fantástico. Agora é hora de adicionar nossas transações. Para facilitar, vou em frente e selecionar essas transações recentes que criamos no vídeo anterior. Vamos selecionar todos eles, copiá-los, e vamos colá-lo na tela, movê-los para cima. Muito bom. O preenchimento superior deve ter 24 pixels, assim. No entanto, precisamos mudar as cores para torná-las visíveis. Vou selecionar todos esses títulos, compras, remédios e esportes, e vamos torná-los brancos assim. Agora vamos selecionar a data e a hora, e vamos definir a cor para 80E0FF assim. Vou copiar esta cor. Então vamos selecionar essas setas. No entanto, lembre-se de selecionar a forma, não esses quadros. A forma é esta. Você pode manter a tecla Command ou Control no teclado e clicar nela. Vamos selecionar todos eles. Vou colar o código de cor que acabamos de copiar assim. Por último, mas não menos importante, precisamos selecionar essa quantidade X e vamos torná-los brancos. Agora parece ótimo. Agora precisamos adicionar mais algumas transações a este cartão. Vamos em frente e selecionar esta transação de compras, duplicá-la, movê-la para baixo assim, e certificar-se de que o preenchimento superior está definido como 16 pixels. Mude o dia para 5 de março, assim, e o tempo para algo como 7:20 e o valor para US $255, muito bom. Mais uma vez, duplique-o , mova-o para baixo, e desta vez vou torná-lo diferente. Vamos mudar o nome para viajar. Também vamos mudar este título para viajar, e o valor deve ser $399. Vamos mudar a data para 3 de março e a hora para 5:50. Muito bom. A última coisa que precisamos mudar é este ícone. Vamos remover esses ícones de compras, selecionar este círculo e mudar o campo para FF8787, assim. Vou colocar uma imagem de transações. Aqui temos viagens, coloque-o aqui e vamos alinhá-los ao centro assim. Vamos renomear este ícone para viajar. Muito bom. A última transação deve ser esporte, então vou duplicá-la. Se quiser mudá-las, é com você. Você pode ir em frente e mudar os pedidos, os valores, as cores. Você pode brincar com esta tela, a fim de se acostumar este software e o processo de projetar uma tela. O montante deve ser o mesmo, no entanto, precisamos alterar a data. Eu vou fazer 10 de fevereiro, e o tempo para 5:20 assim. Muito bom. Então vamos em frente e selecionar todas as transações, agrupá-las, e vamos chamá-lo de transações como esta. Agora tudo está feito. Pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. Vejo você então. 87. Página de transações detalhadas: Olá a todos. Bem-vindo de volta a outro vídeo desta seção. Neste vídeo, vamos projetar nossa tela de detalhes de transações juntos. Primeiro de tudo, eu vou ir em frente e duplicar essas transações prancheta. Em seguida, vamos renomeá-lo para detalhes de traço transações. Bastante bom. Então o que vamos fazer é realmente deslizar esses cartões baixo e, em seguida, apresentar alguns detalhes sobre essas transações. O que eu vou fazer é, antes de tudo, agrupar esses elementos completamente. Vamos selecionar esses indicadores, o cartão em si, a barra de pesquisa e o grupo de transações. Agrupe-os. Vamos chamá-lo de cartão, movê-lo logo abaixo do nosso indicador de casa. Então vamos definir o y para 693, assim. Aqui vamos colocar nossos detalhes. Primeiramente, vamos em frente e selecionar essas transações recentes leva. Vou copiar isso, colá-lo aqui. Vamos movê-lo para cima e eu vou mudá-lo para rastrear suas despesas. preenchimento superior vai ser 32 pixels como este e seu preenchimento esquerdo deve ser 30 pixels. Deixe-me selecionar esta tela, pressione Shift e 2 como este. Agora, o que mais precisamos? Na verdade, temos quatro categorias diferentes. Viagens, compras, desporto e medicina. Precisamos de quatro cartões diferentes com quatro cores diferentes, a fim de alguns até esses valores. Vamos em frente e criar um retângulo. Vou arrastar e soltar assim. Vou definir a largura para 153 e a altura para 103. Então vamos aumentar o raio do canto para 25 e também torná-lo suave assim. Fantástico. Por último, precisamos mudar a cor. Vou usar um gradiente linear para estes. Vamos selecionar a primeira cor e alterar o código de cor para FF8787. Vamos selecionar o segundo. Aumente a opacidade para 100 por cento. Vou mudar o código de cor para C16A6A, assim. Depois disso, vamos mudar a direção um pouco assim. Agora eu acho que é muito bom. O que mais precisamos incluir neste cartão? Precisamos de duas camadas de texto. O nome destes cartões que vai ser viagem e o montante total relacionado com esta categoria. Primeiro de tudo, vamos inserir uma camada de texto e escrever viagem e eu vou torná-la regular. Vamos diminuir o tamanho da fonte para 18 pontos como este. Vou mudar a cor para A73131 assim. Bastante bom. preenchimento superior vai ser 24 pixels e preenchimento esquerdo deve ser 16 pixels como este. Duplicá-lo, movê-lo para baixo. Vamos fazer com que seja ousado. Além disso, vamos aumentar o tamanho da fonte para 24 pontos. Fantástico. Aqui precisamos escrever o valor total de todas as transações de viagens que é $399. Bastante bom. Agora vou adicionar mais detalhes a este cartão, a fim de torná-lo um pouco melhor. Primeiro de tudo, vamos em frente e criar um círculo como este. Vou definir a largura e a altura para 112. Então vamos escolher um gradiente linear para isso. Eu vou escolher a primeira cor e vamos mudá-la para F78C8C assim, copiar este colá-lo para o segundo. No entanto, desta vez manter a opacidade a zero. Então eu vou mudar o lugar dessas duas cores assim. Vamos mudar a direção dessa cor assim e agora precisamos usar uma máscara. No entanto, como eu mencionei antes quando você está usando uma máscara, é melhor duplicar este retângulo uma vez e eu vou mover este círculo logo abaixo da nossa viagem. Escolha a camada duplicada e clique em Desmascarar para obter algo assim. Então vamos em frente e selecionar o círculo e movê-lo um pouco para baixo como este.t' Isso é muito bom. Agora vamos agrupar nossos elementos. Eu vou escolher este grupo de massa, esta viagem e é quantidade, e também o nosso retângulo. Agrupá-los, chamá-lo de viagem, duplicá-lo, movê-lo para o lado direito e o preenchimento esquerdo deve ser nove pixels como este. Em seguida, vamos selecionar os dois, movê-los para o lado esquerdo até obter um preenchimento esquerdo de 30 pixels e preenchimento direito. Agora, vamos em frente e escolher este retângulo 20 e eu vou mudar sua cor para outra coisa. Vamos escolher a primeira cor. Vou configurá-lo para FFCF87 assim. O segundo vai ser CA9547. Muito bom Agora vamos escolher este círculo e mudar a cor do gradiente aqui também. Vou selecionar a primeira cor e vai ser F6C57A. Vamos copiar isto e colá-lo para a sua segunda cor também. Por último, mas não menos importante, precisamos selecionar essas duas tomadas e alterar seu código de cor para A27430. Deixe-me mudar o título para compras e o valor vai ser $375. Por último, lembre-se de mudar seu nome. Vou escrever às compras. Agora vou pedir-lhe para pausar o vídeo e ir em frente e duplicar um destes cartões, colocá-lo aqui, e vou pedir-lhe para modificá-lo para o nosso cartão desportivo. O montante vai ser 199,80. Vou te dar uma dica que é como você pode escolher essas cores. Ele precisa ser algo como azul como você pode ver para este ícone esporte. Então eu vou te mostrar como você pode fazer isso. Vamos pausar o vídeo agora mesmo e fazê-lo sozinho. Tenho certeza que você poderia fazer isso sozinho. No entanto, agora é hora de fazê-lo juntos. Agora, vamos em frente e duplicar estes primeiros cartões. Vou movê-lo para baixo. preenchimento superior vai ser nove pixels. Vamos selecionar estes Retângulo 20 que é a nossa camada base. Vou mudar o gradiente. Vamos escolher a primeira cor e defini-la para 87F0FF, assim. Escolha o segundo e escreva 3AA2B1. Vou escolher este círculo também. Vamos mudar a cor deles. Vou selecionar o primeiro e vamos configurá-lo para 73BCEB copiar isso e colá-lo para a segunda cor também. Agora vou escolher nossas camadas de texto e mudar o preenchimento para 298693. Vamos mudar o título para esporte. Você pode ver que temos um grande contraste aqui porque com este círculo, criamos um fundo brilhante e estamos usando uma cor mais escura contra este fundo. Que é uma boa maneira de criar uma boa taxa de contraste. Então vamos mudar o valor para 199,80. Vou mudar o nome deste grupo para desporto. Vamos duplicá-lo, movê-lo para o lado direito, e eu vou escolher estes Retângulo 20. Vamos mudar a cor. Eu vou escolher o primeiro e vamos escrever E09FFF e o segundo vai ser 8A46AB, assim. Vamos escolher o nosso círculo e mudá-lo também. Vou escolher a primeira cor e vamos escrever D88FFF. Vamos copiar isso e colá-lo para a segunda cor. Por fim, vamos usar nossas camadas de texto e definir o código de cor para 9137BC. Vou mudar o título para medicina. O valor vai ser de 89,50. Por fim, vamos renomeá-lo para medicina. Fantástico. Precisamos de mais um cartão aqui, que é o nosso cartão de crédito. Vamos em frente e escolher estes verificar o seu cartão de contas bancárias. Copie isso, cole aqui. Então eu vou selecionar este retângulo, Retângulo 7, lembre-se disso e também Retângulo 6 que é a nossa máscara. Vamos mudar a altura para 105 assim. Também precisamos mudar o raio do canto para 25 que é a mesma quantidade que usamos para esses cartões. Então deixe-me ampliar. Vou alinhar este texto com o meu retângulo assim. Também esta pequena flecha vai ser para o centro. Vamos usar esses dois círculos e movê-los para cima para obter algo assim. Vamos mudar esse texto para reembolso de cartão de crédito, assim. Renomeie para reembolso de cartão de crédito Rand vamos movê-lo para baixo. Vai ter um preenchimento superior de 16 pixels. Isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. Vejo você então. 88. Página de transferência: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos projetar nossa tela de transferência juntos. Sem mais delongas, vamos começar. Primeiro de tudo, eu vou ir em frente e duplicar esta tela de detalhes de transações como esta. Então vamos renomeá-lo para transferir. Perfeito. Depois disso, vou remover quase todos os elementos. Vamos em frente e selecionar esses cartões, removê-los, este também, essas duas camadas de texto também. No entanto, precisamos do indicador doméstico. Vamos copiar e colar estes pretos. Vamos copiá-lo e colá-lo aqui. Muito bom. Então também precisamos ter nossa barra de navegação. O que eu vou fazer é selecionar esses dois retângulos, retângulo 15 e 16, agrupá-los, e vamos definir o Y para menos 141. Fantástico. Vamos mudar este título para “Transferir”. Muito bom. O que mais precisamos para esta página? Na verdade, precisamos ter uma camada de texto, então vamos inserir uma camada de texto aqui. Vou escrever “Enter amount” assim. Então vamos definir a fonte para Montserrat. Fantástico. Vou fazer com que seja normal. Além disso, vamos alterar o tamanho da fonte para 18 pontos. Muito bom. Vamos alinhá-lo ao centro, e então vamos mudar a cor para 2743 e FD. Fantástico. Seu preenchimento superior vai ser 75 pixels como este. Então vamos duplicá-lo, movê-lo para baixo. Vou fazer zoom. Aqui, precisamos ter a quantia. Eu vou escrever $0 e vamos torná-lo ousado. Além disso, vou mudar o tamanho da fonte para 36 pontos. Muito bom. Então precisamos mudar a cor deste dígito, porque agora o usuário não inseriu nenhum valor ainda. Vamos mudar para B6BFFF, fantástico. Alinhe-o ao centro e seu preenchimento superior será 16 pixels, assim. Então precisamos de um separador. Vou em frente e criar uma linha como esta. Vamos definir a largura para 224, alinhe-a ao centro. Vamos mudar o traço para DE, E1 e EF, assim, muito bom. Seu preenchimento superior vai ser 16 pixels, fantástico. Mais uma vez, vamos duplicar essa camada de texto “Inserir quantidade”, movê-la para baixo. Eu vou escrever dois, e o preenchimento superior deve ser 16 pixels também. Então vamos duplicar mais uma vez. Aqui precisamos escrever o nome do receptor. Vamos escrever Grace Addison e um tamanho de fonte deve ser 16 pontos. No entanto, precisamos mudar a cor para 3A, 3A e 3A, muito bom. Precisamos ter uma imagem de perfil desse usuário também. Vamos em frente e selecionar esta imagem de perfil, copiá-la e colá-la aqui. Muito bom. Mova-o para baixo. Então eu vou escolher a escala também. Você pode pressionar K no teclado para selecioná-lo e reduzi-lo para obter uma imagem de perfil de 34 por 34 pixels. Vou fazer 34 por 34. Fantástico. Deixe-me movê-lo para cá. O preenchimento direito desta foto será de oito pixels. Então vamos escolher a camada de texto e eu vou alinhá-la verticalmente. Muito bom. No entanto, precisamos mudar esta foto. Vou clicar duas vezes sobre isso para escolher esta foto. Então vamos em frente e executar o nosso conteúdo Plugin real. Muito bom. Vamos para Avatares e aqui vou clicar em Feminino, fantástico. Agora, vamos agrupar nossa camada de texto e nossa imagem de perfil, alinhá-la ao centro e seu preenchimento superior será 16 pixels. Muito bom. A próxima coisa que precisamos criar é o nosso numpad. Eu vou criar um retângulo e vamos definir a largura para 89 e a alta para 70, assim, e eu vou mudar o raio do canto para 17. No entanto, certifique-se de tornar esses cantos suaves por este controle deslizante. Fantástico. Depois disso, precisamos mudar a cor de fundo. Vamos escrever F5, F6 e F8. Muito bom. Deixe-me ampliar. Aqui, precisamos inserir uma camada de texto, então eu vou escrever uma. No entanto, precisamos mudar a fonte para SF Pro Text, assim, torná-la média e um tamanho de fonte deve ser de 24 pontos. Por último, vamos mudar a cor para 27, 43, e FD, muito bom. Vou alinhá-lo ao centro, tanto vertical como horizontalmente, e certifique-se de que sua camada de texto está alinhada ao centro também aqui. Então vamos agrupá-los. Vou chamá-lo de um, duplicá-lo, movê-lo para o lado direito. A distância entre eles será de 10 pixels. Vamos duplicar mais uma vez, selecionar todos eles, duplicá-los, movê-los para baixo, muito bem, mais uma vez e mais uma vez. Fantástico. Então vamos em frente e mudar essas camadas de texto um por um. Vai ser dois, três, quatro, cinco, seis, sete, oito, nove. Este vai ser um ponto. Aqui vamos ter 0 e o último vai ser mudado. Vamos remover esta camada de texto. Vou selecionar todos eles, agrupá-los, e vamos chamá-lo numpad, fantástico. Alinhe-o ao centro e vamos movê-lo um pouco para cima. Para este primeiro, eu vou mudar sua cor porque este é o nosso botão Enviar. Vou usar o mesmo gradiente que usamos para o nosso cabeçalho. Vamos escolher este retângulo, retângulo 15, clique com o botão direito do mouse sobre isso e copie as propriedades, assim. Vou colá-lo aqui. Muito bom. Deixe-me ampliar. Então precisamos inserir um ícone de seta para a direita. Vamos colocar uma imagem. Na pasta Ícones, eu vou escolher a seta para a direita. Coloque-o aqui. Muito bom. Então vamos em frente e escalá-lo, assim. Acho que agora é ótimo. Vamos alinhá-lo ao centro. Fantástico. Então vamos renomear este grupo para Enviar, muito bom. O preenchimento inferior desses blocos numéricos será 74 pixels, assim, e o preenchimento esquerdo direito será 44 pixels. Agora, tudo está feito. É incrível, não é? Pessoal, isso é tudo por este vídeo. Criamos com sucesso nossa página de transferência juntos. Espero que tenha gostado e te vejo no próximo vídeo. 89. Página de confirmação: Olá a todos, e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos projetar nossa tela de confirmação juntos, então, sem mais delongas, vamos começar. Primeiro de tudo, eu vou continuar e duplicar esta prancheta de transferência, muito bom. Vamos renomeá-lo para Confirmação, fantástico. Aqui, eu vou mudá-lo para Transação, assim, e nós precisamos remover este numpad. No entanto, vamos manter esta foto porque nós precisamos disso, e também eu vou ir em frente e remover esta quantidade, este separador e esta camada de texto também. Então vamos mudar essa camada de texto para, “Você enviou com sucesso $99 para Grace Addison”, assim. Então eu vou redimensionar essa camada de texto um pouco, alinhá-la ao centro, vamos torná-la menor, muito boa, e então eu vou mudar o tamanho da altura para 27. Mais uma vez, alinhe-o ao centro. Eu vou ampliar, muito bem, e então vamos selecionar este nome e torná-lo negrito, assim. Depois disso, eu preciso de um ícone de carrapato verde, então vamos em frente e colocar uma imagem. Aqui temos feito, vamos colocá-lo. Eu vou mover esta camada de texto para baixo e o preenchimento superior deste ícone Concluído vai ser 108, assim, então vamos mover esses dois elementos para baixo. O preenchimento superior desta camada de texto será 16 pixels como este. Depois disso, eu vou escolher essa imagem de perfil e vamos usar a ferramenta Escala e escalá-la um pouco e eu vou definir a largura e altura para 78 por 78 pixels, fantástico. Aqui, eu vou ter o indicador circular sobre o status deste usuário, então vamos em frente e selecionar este indicador verde, copiar isso, e eu vou colá-lo aqui, movê-lo para baixo, em seguida, certifique-se de que você tem escolheu a Escala também, e eu vou dimensioná-la e vamos defini-la para 80 por 80 pixels como este. Vamos alinhá-lo com sua imagem de perfil, fantástico, agrupá-los, e vamos chamá-lo de imagem de perfil. Eu vou alinhá-lo ao centro e seu preenchimento superior vai ser 40 pixels, assim, muito bom. Então precisamos colocar dois botões diferentes aqui, o botão Executar Again e um botão Confirmação. Vamos em frente e copiar e colar este botão Verificar de nossa página de verificação OTP. Eu vou copiar isso, colá-lo aqui, movê-lo para cima, e vamos mudá-lo para Executar novamente, muito bom. Certifique-se de renomear este grupo também, Executar Novamente. Seu preenchimento superior vai ser de 100 pixels, assim e para o botão de confirmação, eu vou escolher o botão de inscrição na nossa tela de boas-vindas, copiar isso, colá-lo aqui. Eu vou movê-lo para baixo assim, então vamos remover esta seta para a direita. Depois disso, vou selecionar esta camada de texto e nosso grupo de massa, alinhá-lo ao centro assim e vamos mudar este texto para Confirmação, fantástico. Mais uma vez, alinhe-o ao centro e aqui também. Por fim, vamos renomear o grupo Confirmação e o preenchimento superior vai ser 16 pixels, muito bom. Tudo bem, pessoal, isso é tudo por este vídeo. Criamos com sucesso nossa página de confirmação juntos. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 90. Página de notificação: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos avançar e projetar nossa página de notificação. Vamos continuar e duplicar esta tela de confirmação, em seguida, remover todos os elementos. Vamos renomeá-lo para notificação. Bastante bom. O que precisamos para esta página? Primeiro de tudo, precisamos ter uma barra de status. Eu vou em frente e escolher este preto. Vamos copiar isto e colá-lo aqui. Bastante bom. Então precisamos desses tapper também. Vou copiar este, selecionar a tela, colá-lo aqui. Mas aqui precisamos mudá-lo desta carteira para este ícone de notificação. Vou selecionar este ícone da carteira. Vamos torná-lo ativo e escolher este ícone de notificação e torná-lo ativo assim. Bastante simples, não é? Bem no topo, precisamos de uma barra de pesquisa. No entanto, não vamos criar um novo porque já criamos nossa barra de pesquisa personalizada. Eu estou indo para ir em frente e escolhê-lo na página de transações. Copie isso, cole aqui, mova para cima. No entanto, precisamos alterar a cor de fundo da nossa barra de pesquisa. Vamos escolher este retângulo e eu vou definir o código de cor para F5, F6, e FA assim. Agora vamos verificar os estofos. O preenchimento superior vai ser 24 pixels como este e, em seguida, aqui precisamos de um título. Vamos em frente e selecione esta faixa suas despesas, Copie isso, cole-o aqui. Vou movê-lo para cima e vamos alterá-lo para você pode verificar suas notificações aqui. Então vamos redimensioná-lo para obter algo assim. O preenchimento esquerdo deve ser de 30 pixels. Seu cabeçalho superior vai ser 32 pixels como este. Então, do que mais precisamos? Tens razão, precisamos das nossas mensagens ou das nossas notificações. Para cada notificação, teremos uma imagem de perfil, um nome e uma mensagem curta. Vamos em frente e escolher esta imagem de perfil em nossa página de confirmação. Vou copiar isto e colá-lo aqui. Vai ser o nosso modelo. Então eu vou escolher a ferramenta de escala e vamos torná-la 40 por 40 assim. Bastante bom. Vamos movê-lo para cima. Eu vou ampliar e aqui vamos inserir uma camada de texto e vamos escrever o nome. Vou torná-lo regular e também vamos diminuir o tamanho da fonte para 14 pontos. Bastante bom. Então vamos alinhá-lo com a nossa imagem de perfil assim e o preenchimento esquerdo vai ser oito oito e oito como este. Em seguida, duplique-o, mova-o para baixo e aqui vamos escrever mensagem. Vamos mudá-lo mais tarde. Vou definir o tamanho da fonte para 16 pontos e vamos alinhá-lo com nossa imagem de perfil assim. Então precisamos mudar sua cor para 27, 43, e FD assim. Também precisamos de uma seta para a direita. Vou colocá-lo do nosso arquivo de ativos, vamos usar uma seta pequena, colocá-la aqui. Então eu vou mudar sua cor para B47 e FC assim. Eu vou escolher este quadro, que é a nossa pequena seta e vamos alinhá-lo com a nossa imagem de perfil assim. É o preenchimento direito vai ser 30 pixels como este. Bastante bom. Na verdade, precisamos de um separador aqui também. Vou criar uma linha como esta. Vamos definir a largura para 315, alinhá-lo ao centro, e mudar sua cor para DEE 1E e F. Seu preenchimento superior será 16 pixels. Bastante bom. Depois disso, vou selecionar todos esses elementos, agrupá-los, vamos chamá-lo de mensagem. Muito bom e então eu vou criar um componente. Vamos clicar neste ícone. Bastante bom. Em seguida, duplique-o, mova-o para baixo. Seu preenchimento superior será de 16 pixels. Então vou duplicar mais uma vez, até conseguir algo assim. Agora, em vez de escrever a informação um por um, vamos usar nosso conteúdo favorito de pragas livre. Vamos em frente e executá-lo e então eu vou te mostrar como você pode inserir real mais tarde em um segundo. Vamos selecionar essas imagens de perfil segurando a tecla Command e clicando na tecla Shift pressionada aqui e Command juntos e selecione todas essas imagens. Bastante bom. Vamos aos avatares e clicar em macho ou fêmea. Lá vamos nós. Você viu como é fácil adicionar conteúdo real à sua tela? Se você não está feliz com fotos, você pode facilmente clicar sobre isso e eles serão alterados. Agora precisamos adicionar nossos nomes. No entanto, como este primeiro é o nosso componente mestre, primeiro precisamos duplicá-lo, para criar uma instância dele, então vamos remover o componente mestre assim e então vamos usar a camada de nome de fêmeas. Vou selecionar este, segurar Shift, este também e este. Em seguida, vá em frente e execute o plugin de conteúdo real e na seção de nomes, clique nesses três pontos e eu vou mudar o tipo de nome para feminino. Você pode se inscrever e lá vamos nós. Você pode ver como é fácil aplicar essas mudanças? É bastante incrível. Agora é hora de selecionar um [inaudível]. Vamos selecioná-los e clicar nesses três pontos. Desta vez eu vou configurá-lo para principal e clicar em “Aplicar” e isso é tudo. A única coisa que não podemos adicionar aleatoriamente é esta mensagem. Precisamos mudá-los um por um. Vamos selecionar estas mensagens de texto e eu vou escrever para Arlene apenas enviar $20 como este e o próximo que Teresa te enviou $99. Fantástico. Para completar esta tela, precisamos fazer apenas mais uma coisa e que é mudar esses status. Como você pode ver agora nós temos apenas status ativo. O que eu vou fazer é, por exemplo, selecionar esse status e vamos alterá-lo para um status de negócios. Vou escrever F7, A700 assim. Vamos copiar estes códigos de cores e eu vou escolher este também e este. Vamos colá-lo aqui e precisamos de mais um estado. Vamos usar este e mudá-lo para CE, CE e CE. Copie isso e cole-o para o segundo. Bastante bom. Este vai ser o nosso estado offline. Pessoal, criamos com sucesso nossa página de notificação juntos. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. Vejo você então. 91. Perfil do usuário: Olá a todos e bem-vindos de volta a outro vídeo desta seção. Neste vídeo, vamos projetar nossa tela de perfil juntos. Sem mais delongas, vamos começar duplicando essa tela de notificação. Vou mudar o nome para o perfil. Então vamos remover esses elementos e essa barra de pesquisa também. No entanto, vamos manter nossa barra de abas porque precisamos desativar esses ícones de notificação. Vamos ativar esses ícones de perfil. O que precisamos para esta página? Primeiro, precisamos de um título, então vou inserir um texto. Vamos escrever, perfil. Então vamos mudar para Montserrat. Vou torná-lo negrito e vamos mudar o tamanho da fonte para 40 pontos. Vou mudar a cor para 3A, 3A e 3A. O preenchimento superior deve ter 46 pixels e o preenchimento esquerdo deve ser 30 pixels. Então o que mais precisamos? Na verdade, eu vou para a tela de perfil aqui, perfil concluído. Deixe-me ampliar. Aqui, vou copiar e colar estas duas formas. Copie isso e cole aqui. Vamos movê-los para baixo da barra de status. Vou movê-los para o lado direito. Agora está perfeito. Também precisamos de todos esses campos de texto, então vamos selecioná-los e copiá-los e colá-los aqui. Primeiro de tudo, vou em frente e remover esses ícones de ticks. Então vamos selecionar esses títulos. Fantástico. Vamos mudar a cor para 3A, 3A e 3A. Além disso, precisamos selecionar o nome de usuário, o primeiro nome, o sobrenome e a data de nascimento, e vamos mudar sua cor para 2743 e FD. Finalmente, precisamos mudar a cor das nossas linhas. Vamos selecionar todos eles aqui e eu vou mudar a cor do traçado para DEE1EF. Precisamos ter um botão de saída logo na parte inferior, então vou em frente, copiar e colar o botão de saída. Vamos colocá-lo aqui e eu vou ampliá-lo. Vamos selecionar este retângulo 2 e definir a largura para 315. Vamos selecionar este botão, alinhá-lo ao centro. Vou selecionar este ícone, e vamos movê-lo para o lado direito até você obter um preenchimento direito de 24 pixels. Fantástico. Seu preenchimento inferior, vai ser 30 pixels. Agora, vamos selecionar nossos campos de texto. O preenchimento inferior deles será de 42 pixels. Por último, mas não menos importante, precisamos ir em frente e selecionar esses nomes, e nome de usuário, e esta imagem de perfil, copiá-los e colá-los aqui, movê-lo para baixo. Vamos selecionar essas imagens de perfil. Vou escolher a ferramenta de escala. Vamos escalá-lo até obter uma imagem de 64 por 64 pixels. Seu preenchimento esquerdo será de 30 pixels e seu preenchimento superior será 32 pixels. Vou mover estas mensagens para o lado direito. Primeiro de tudo, eu vou mudar esses nomes de usuário para o status que está on-line. Vou selecionar os dois porque precisamos mudar a cor e a fonte. Primeiro, vamos definir a fonte para SF Pro Text. A fonte deste nome será de 20 pontos e deve ser média. Para o status, vamos configurá-lo para acender e deve ser 16 pontos. Vou descer. Seu preenchimento superior será de oito pixels. Selecione ambos, agrupe-os. Vamos alinhá-lo com sua imagem de perfil. Agora vamos selecionar os dois e eu vou mudar a cor deles. Isso mesmo, 2743 e FD. Tudo bem, pessoal, isso é tudo por este vídeo, espero que tenham gostado. Vejo você no próximo vídeo. Vejo você então. 92. Páginas de Onboarding: Olá a todos e bem-vindos ao último vídeo desta seção. Neste vídeo, vamos projetar nossas páginas de integração juntas. Na verdade, precisamos projetar três páginas diferentes que ilustrem as características mais importantes desta aplicação. Sem mais delongas, vamos começar inserindo uma nova prancheta. Vou pressionar “A” no meu teclado e vamos escolher um iPhone 11 Pro ou X. Vou colocá-lo aqui e vamos renomeá-lo para Onboarding 1. O que mais precisamos para essa integração? Na verdade, precisamos colocar o logotipo ou ícone deste aplicativo. Primeiro, vamos em frente e trazê-lo daqui. Vou copiar isto e colá-lo. Bastante bom. No entanto, vou remover este título. Eu não preciso disso. Então vamos desagrupá-lo para obter um ótimo quadro. Fantástico. Vou alinhá-lo ao centro. Seu estofamento superior vai ser 84, então vamos movê-lo para cima. No entanto, precisamos alterar o valor X para 167 e o valor Y para 80. Agora, como podem ver, temos um preenchimento superior de 80 pixels. Vamos fazer 84, assim. Agora tudo está ótimo. Então precisamos colocar uma ilustração aqui. Vamos em frente e colocar a nossa ilustração. O primeiro vai ser o Saving. Coloque-o aqui. Eu vou alinhá-lo ao centro e seu estofamento superior vai ser 45, assim. Então aqui vou colocar um círculo, então vamos criar um. Eu vou arrastar e soltar, e então vamos mudar o código de cor para F5F6 e FA, assim. No entanto, certifique-se de que este círculo está dentro da prancheta. Bastante bom. Eu quero mudar a largura e a altura para 470, e vamos definir o X para menos 125 e o Y para 423. Bastante bom. Então precisamos ter um título, uma descrição, um indicador de página e um botão Avançar. Vamos inserir o texto aqui e escrever : “Economize seu dinheiro convenientemente.” Então vou mudar a fonte para Montserrat. Vai ser negrito, e o tamanho da fonte deve ser de 24 pontos. Então eu vou mudar a cor para 2743 e FD, e então vamos redimensioná-lo para obter algo assim. No entanto, vou definir a linha de altura para 36 para torná-la mais visível. Deixe-me ampliar. Vou definir o X para o 30 para obter um acolchoamento esquerdo de 30 pixels e o Y para 488. Bastante bom. Em seguida, duplicá-lo, movê-lo para baixo, e desta vez eu vou mudar a fonte para SF Pro Text, torná-lo regular, eo tamanho da fonte deve ser 18 pontos. Então vamos mudar a cor para 7C2AFF, e então eu vou escrever, “Obter 5% de reembolso para cada transação e gastá-lo facilmente.” Bastante bom. Vamos mudar a altura da linha para 28. Vou movê-lo para baixo. Seu preenchimento superior deve ser 22 pixels como este. Agora é hora de criar nosso indicador de página. Deixe-me ampliar um pouco. Eu preciso ter um retângulo, então vamos arrastar e soltar para criar um retângulo. Sua largura vai ser 22 e sua altura deve ser cinco, assim. Vamos torná-lo completamente arredondado. Vou mudar a cor para 2A46 e FF. Bastante bom. Vamos duplicá-lo, movê-lo para o lado direito, e o preenchimento entre eles deve ter quatro pixels. Pegue um círculo, cinco por cinco, então vamos mudar a cor para B5BFF. Bastante bom. Mais uma vez, duplique-o, mova-o para o lado esquerdo até obter um preenchimento esquerdo de quatro pixels, agrupe-os e chame-o de Indicadores. Bastante bom. Vamos definir o X para 30 e o Y para 736. Fantástico. A última coisa que precisamos criar é o botão Próximo. Felizmente, podemos ir em frente e copiar o botão de login. Vou copiar isto e vamos colá-lo aqui. Eu vou movê-lo para baixo, então vamos mudar esses textos para Próximo. Depois disso, vou abrir o Grupo Máscara. Vamos selecionar este Retângulo 1 e Retângulo 2 pressionando Shift, e eu vou diminuir a largura para 153, assim, e movê-lo para o lado direito. Fantástico. Então vamos mover nosso texto também, e vamos obter um preenchimento de 24 pixels esquerdo, 24 pixels superior e inferior. Vamos mover esta seta para a direita para o lado esquerdo também até obter um preenchimento direito de 24 pixels. Bastante bom. Vou mudar o nome para Próximo. Então vamos definir seu X como 192 e o Y como 702, e isso é tudo. Como você pode ver, nós temos um acolchoamento direito de 30 pixels também. Vou duplicá-lo. Vamos remover esta ilustração. Vou colocar um novo. Desta vez deve ser a Caixa de Segurança, coloque-a. Vamos alinhá-lo ao centro, e agora vamos em frente e mudar este título para “Garanta seu dinheiro de graça e receba recompensas”. Então vamos redimensionar essa camada de texto. Bastante bom. Eu vou mudar essa descrição também, então vamos escrever, “Obtenha o aplicativo de pagamento mais seguro de todos os tempos e aproveite.” Bastante bom. Obviamente, temos de mudar os nossos indicadores. Vamos selecionar este azul, movê-lo para o lado direito, assim, e selecionar este do meio, movê-lo para o lado esquerdo com o mesmo preenchimento de quatro pixels. Bastante bom. Isso é tudo por esta página, e vamos duplicá-la. Mais uma vez, vou remover esta ilustração. Vamos colocar um novo, Trading. Fantástico. Eu vou alinhá-lo ao centro, e aqui vamos escrever, “Aproveite a negociação de ações sem comissão”, assim, e a descrição deve ser alterada para “O investimento on-line nunca foi tão fácil do que é agora.” Vamos mudar nossos indicadores. Eu vou movê-lo para o lado direito e vamos mover este último para o meio. Bastante bom. Depois disso, precisamos mudar nosso botão porque agora precisamos mudá-lo de Próximo para Começar. Primeiro de tudo, vamos remover essa seta para a direita. Então eu vou selecionar este Retângulo 1 e Retângulo 2, então vamos aumentar sua largura para 211. Bastante bom. Vou mover esses círculos um pouco para conseguir algo assim. Por último, vamos alinhar esse texto ao centro e escrever Get Started. Vou mover esses círculos um pouco, e vamos renomear esse botão para Introdução. Pessoal, isso é tudo para esta tela também. Criamos com sucesso 24 telas diferentes e você aprendeu a aplicar todas as técnicas necessárias para criar uma interface de usuário moderna e sofisticada. Espero que tenha gostado desta seção. Foi uma longa viagem. Muito obrigado por assisti-lo, e eu vou vê-lo no próximo vídeo. Vejo você lá. 93. Introdução ao projeto de Landing: Ei pessoal, bem-vindos de volta a outra seção do curso. Nesta seção, vamos começar a projetar uma página de aprendizagem moderna e bonita, ou um aplicativo móvel fictício chamado rascunho. Vamos primeiro começar com a criação do nosso sistema de design juntos. Vamos criar nossos estilos de texto, nossos estilos de cores, e então vamos passar para o processo de wireframing. Vamos criar um wireframe de baixa fidelidade com todas as seções necessárias, como seção de herói, seção de recursos, e, em seguida, teremos planos de associação como você pode ver, e seção de P & R, e, finalmente, o rodapé. Depois disso, começaremos a projetar nossa página de destino juntos, projetaremos a seção de heróis e, em seguida, projetaremos uma seção de cartão de crédito, a seção de estatísticas, seção de suporte, planos de associação e assim por diante. Por último, mas não menos importante, vamos tornar o nosso design interativo adicionando interações aos nossos elementos. Criaremos um protótipo de alta fidelidade para nossa página de destino. Como você pode ver, temos animações diferentes, por exemplo, aqui temos uma transição legal para este cartão de crédito , então teremos esse efeito acordeão como este. O cartão se expandirá e você aprenderá todas essas técnicas legais. Você está pronto para começar a projetar seu site? Vejo você no próximo vídeo. 94. O que é uma página de landing: Ei, bem-vindo de volta. Neste vídeo, vamos falar sobre páginas de destino. Vamos aprender o que é uma página de destino e como ela deve ser estruturada. Bem, o que é uma página de destino? Uma página de destino é uma página da Web projetada para fins de marketing. É a página em que os visitantes chegam depois de clicarem em um link em um anúncio do Google, YouTube, Facebook, etc. As páginas da Web são normalmente projetadas para uma variedade de objetivos. Uma página de destino foi projetada especificamente para campanhas de marketing, ou digamos, convertendo visitantes em clientes. Qual é a diferença entre uma página inicial e uma página de destino? Bem, em uma página inicial, você pode encontrar tantas distrações, como links, imagens, etc. Por outro lado, a página de destino é super focada porque menos distrações equivalem a uma taxa de conversão mais alta. Quais são os elementos essenciais de uma página de destino? A parte mais importante de uma página de destino é a seção de heróis. Uma seção de heróis inclui uma manchete, uma manchete de apoio, uma chamada à ação ou CTA para abreviar, etc Como esta é a parte mais importante da sua página de destino, você deve se certificar de projetá-la perfeitamente. Então podemos ter os recursos orientados para benefícios. Esta é a seção que apresentamos as características mais importantes do produto ou do serviço. Depois disso, podemos ter provas sociais ou testemunhos sociais. Finalmente, podemos ter um argumento final. Este é um bom lugar para outro CTA. Você pode ter seções diferentes com base no tipo de sua página de destino. Vamos dar uma olhada em uma página de destino bem projetada no Dribbble e analisá-la. Esta página de destino foi projetada por Martin Strba, espero pronunciar seu nome corretamente. Como você pode ver, começa com a seção de heróis. Aqui temos uma grande e clara manchete. By the way, você deve sempre usar o estilo de texto H1 para o nosso título principal. Falaremos sobre isso mais tarde. Então temos um apelo à ação ou CTA, comece com o seu conselheiro de risco. Também temos uma barra de navegação no topo e temos uma imagem aqui. Se você rolar um pouco para baixo, teremos os três benefícios mais importantes deste produto: analisar, prever, decidir. Então teremos algumas soluções, como funciona, alguns testemunhos, outro apelo à ação e, finalmente, um rodapé. É assim que uma página de destino típica é estruturada. Tudo bem, pessoal. Espero que você tenha uma melhor compreensão das páginas de destino agora. Espero que tenha gostado, e te vejo no próximo vídeo. 95. Configurando seu projeto: Oi lá. Neste vídeo, vamos configurar nosso projeto e então vamos começar a projetar nossa página de destino juntos. Primeiro de tudo, abra Figma e eu vou clicar neste ícone mais no canto superior direito para criar um novo arquivo. Se você não vir esses dois ícones, isso é porque você está em uma seção de rascunhos, e isso é totalmente bom. Não há diferença aqui porque agora eu estou em uma equipe de curso de Design, então é por isso que eu tenho esses dois ícones adicionais. Mas se você estiver na seção Rascunhos ou na seção Recente, você só precisa clicar neste ícone de adição para criar um novo arquivo. Vamos clicar nisso. Lá vamos nós. Vou nomeá-lo, página de destino. Bastante bom. O que precisamos para este projeto? Primeiro de tudo, você vai criar nosso guia de design. Ele vai incluir nossos estilos de tipografia e nossos estilos de cores. Vou pressionar “A” no meu teclado para criar uma prancheta. Quando eu pressionar “A” no meu teclado, esta ferramenta de moldura será selecionada e eu vou clicar e arrastar assim para criar um quadro. Vou torná-lo maior um pouco. Agora eu vou mudar o preenchimento para F2F6FF para obter este azul muito claro como o nosso fundo. Então eu vou nomeá-lo, guia de design. Bastante bom. Este guia de design vai ter duas seções diferentes, tipografia e cores. Vou selecionar a “ferramenta Retângulo” na parte superior e clicar e arrastar para criar um retângulo como este. Vou torná-lo branco assim e deixar-me arredondado. Vou aumentar o raio do canto para 30. Fantástico. Agora, vamos adicionar um pouco de sombra a ele. Vamos adicionar um efeito a ele. Lá vamos nós. Por padrão, ele está definido para soltar sombra. Vou mudar suas configurações um pouco. Primeiro de tudo, vou mudar a cor para 16194F. Fantástico. Então eu vou definir a quantidade de desfoque para 100 e Y para 50. Bastante bom. Finalmente, deixe-me diminuir a opacidade de 25 por cento para 10 por cento. Parece incrível, não é? Agora, deixa-me dizer-te porque escolhi estas quantias. Se você não tem certeza de como definir esses valores, por exemplo, o borrão, o Y, você sempre pode usar a fórmula que eu uso e ela funciona quase o tempo todo, e é tão simples. Você só precisa pegar a quantidade de borrão e dividi-la por 2. Por exemplo, aqui eu usei 100 e aqui eu posso até escrever 100/2 para dividi-lo por 2. Neste caso, você terá uma sombra de gota muito boa e suave. Isso é exatamente o que eu queria. Deixe-me torná-lo maior um pouco e então eu vou selecionar a “ferramenta Texto”. Vou pressionar “T” no meu teclado e clicar aqui. Permitam-me que diminua um pouco o tamanho, por exemplo, 36. Aqui, vou escrever topografia, muito bem. Para este projeto, eu vou usar um Google Font, que é chamado Roboto. Ele está disponível por padrão no Figma, então você não precisa instalá-lo. Deixe-me mudar o peso de negrito para médio e também vou diminuir o tamanho da fonte de 36-24 pontos como este. Agora, eu vou duplicar, “Comando D” ou “Controle D” no seu teclado. Vou movê-lo para baixo. Deixe-me ampliar. Se você quiser ampliar, mantenha pressionada a tecla “Command” ou “Control” e, ao mesmo tempo, você pode usar a roda do mouse. Aqui, vamos escrever o título H1 60 negrito. Vou selecionar isso e vamos torná-lo ousado. Para este título H1, vou escolher o tamanho da fonte de 60. Deixe-me escrever 60 aqui. Bastante bom. Vou diminuir um pouco e me certificar de mudar a altura da linha. A altura da linha aqui por padrão é definida como automática, mas certifique-se de escrever 150 por cento. Você pode não ver nenhuma mudança aqui agora, mas deixe-me mostrar-lhe um exemplo. Vou adicionar uma camada de texto e vamos escrever algo. Olá mundo. Estamos criando nosso guia de design. Vou torná-lo menor. Como podem ver aqui, temos três linhas. Estou correto? Se eu configurá-lo para auto. A altura da linha agora está definida como 70. Se você clicar sobre isso, você pode ver o número padrão, e agora parece bem, mas se eu mudá-lo para regular, e se eu diminuir esse tamanho de fonte para, por exemplo, 30 pontos. Agora você pode ver que esta linha de texto não é tão legível. Mas se eu mudar essa altura de linha de 35 que é automática para 150 por cento, você pode ver que ela é mais legível, especialmente para parágrafos de linha. É tão crucial ter espaço suficiente entre as linhas. Esta é a razão pela qual usamos 150 por cento. O que isso significa? Se eu remover isso, isso significa que eu multiplico o tamanho da fonte 30 por 1,5 e eu recebo 45. Quando eu defino para 150 por cento, isso significa que minha altura de linha agora é 45. Agora, precisamos criar nosso estilo de texto. Como posso fazer isso? É tão simples. Eu vou selecionar esta camada de texto e eu vou clicar sobre estes quatro pontos ícone. Lá vamos nós. Clique neste ícone de adição “Criar estilo”. Aqui deixe-me escrever cabeça/H1. Mas por que eu usei uma barra entre essas duas palavras? Quando eu quiser criar uma categoria para meus estilos de texto ou meus estilos de cor, posso usar barra entre eles. Vou colocar este H1 na categoria de título e vamos criar um estilo. Lá vamos nós. Aqui podemos ver que o nome desta categoria é cabeçalho, e sob este título eu tenho H1. Sempre que você quiser modificar este estilo de texto, você pode facilmente clicar neste ícone, “Editar Estilo”, e editar seu estilo de texto. Você pode até adicionar uma descrição aqui. Você pode modificar o nome, modificar as propriedades, etc Muito bom. Agora, eu vou ampliar este retângulo um pouco para obter mais espaço para trabalhar. Então eu vou duplicá-lo, movê-lo para baixo. Aqui vamos criar nosso segundo estilo de texto. Mas antes de fazer isso, precisamos ter certeza de que separamos essa camada de texto de seu estilo. Se eu passar para esta seção, você pode ver que temos um ícone chamado estilo de desanexar. Vou clicar nisso e agora essa camada de texto não está mais conectada ao estilo que acabamos de criar. Deixe-me mudar este H1 para H2 e vai ser 50. Vou diminuir o tamanho da fonte para 50 pontos e isso é tudo. Não se esqueça de criar seu estilo de texto. Vamos escrever a rubrica H2. Bastante bom. Mais uma vez, deixe-me duplicá-lo, movê-lo para baixo, separá-lo de seu estilo. Deixe-me mudá-lo para H3, e eu vou torná-lo 40 e também deixe-me mudá-lo aqui. Finalmente, vamos criar um cabeçalho de estilo/H3. Precisamos criar mais seis estilos de texto. Eu vou duplicá-lo, movê-lo para baixo, separá-lo de seu estilo. Aqui, vamos escrever as rubricas H4 e 24. Deixe-me diminuir o tamanho da fonte para 24 pontos e criar os estilos de texto cabeçalho H4. Agora, deixe-me duplicar mais uma vez. Eu sei que é um processo chato, mas acredite em mim, mais tarde este processo vai valer a pena. Deixe-me separá-lo de seu estilo e desta vez, vamos criar nossa introdução corporal. Vou escrever texto de introdução do corpo 24 regular. Para esta introdução de corpo, eu vou mudar um peso de negrito para regular, e um tamanho de fonte vai ser 24. Deixe-me criar o estilo. Vou escrever corpo/introdução. Bastante bom. Vou duplicá-lo, movê-lo para baixo e separá-lo de seu estilo. Aqui, vamos escrever por main e o tamanho da fonte será de 20 pontos. Finalmente, deixe-me diminuir o tamanho da fonte para 20 e criar o estilo de texto, body/main. Precisamos criar mais três estilos de texto para terminar nossos estilos de tipografia. Vamos duplicá-lo, movê-lo para baixo, separá-lo de seu estilo, e vamos escrever texto médio 17 regular. Bastante bom. Deixe-me mudar o tamanho da fonte para 17 pontos e criar o estilo. Agora, eu não quero criar nenhuma categoria aqui, então eu vou escrever mídia, eu vou duplicá-lo, movê-lo para baixo, separá-lo de seu estilo. Agora, vamos escrever texto de legenda e vai ser 15 pontos. Deixe-me criar o estilo e vou chamá-lo de legenda. Por último, mas não menos importante vou duplicá-lo, separá-lo de seu estilo, e deixe-me escrever, texto pequeno e vai ser 13 pontos. Deixe-me criar o estilo. Vou chamá-lo de pequeno. Isso é tudo o que fazemos com nossos estilos de topografias. Vou organizá-los agora. Vou manter pressionada a tecla “Shift” no meu teclado e clicar em cada camada para selecioná-las ao mesmo tempo. Então eu posso ir para a seção de alinhamento, no topo bem aqui está o inspetor. No topo você pode ver esta seção de alinhamento e no lado direito você receberá este ícone, Mais opções. Vou selecionar “Distribuir Espaçamento Vertical”, e se eu ampliar, posso ver essas alças cor-de-rosa. Posso clicar e modificar o espaçamento facilmente. Vou configurá-lo para, por exemplo, 40. Eu posso definir o valor aqui. Lá vamos nós. Tudo parece bem. Agora você pode se perguntar, por que eu preciso criar esses estilos de texto? Na verdade, não é uma tarefa obrigatória, mas se você quiser se tornar um designer de UX muito bom, e se quiser trabalhar para uma agência, por exemplo, você precisa ter certeza de usar texto e estilos de cores quase todo o tempo, e precisamos ter certeza de manter tudo organizado. Quais são as vantagens de usar um têxtil? Deixe-me demonstrar para você em um segundo. Vou criar uma camada de texto e aqui vou escrever olá. Este é um texto normal. Se eu quiser aplicar um desses estilos de texto, eu posso facilmente selecionar essa camada de texto e eu posso ir para esta seção Texto no inspetor e deixe-me clicar no ícone de estilo. A partir daqui, você pode encontrar os estilos que acabamos de criar. Temos corpo, cabeçalho e estes três estilos de texto. Vou configurá-lo para, por exemplo, H3. Vou ampliar e agora vou criar outra camada de texto e me deixar escrever mundo. Porque eu uso um estilo de texto para essa camada de texto anterior, e isso é exatamente o que eu quero. Então eu tenho duas camadas de texto com os mesmos estilos de texto. Quando o projeto estiver concluído, suponha que o cliente ou a empresa peça que você altere o tamanho da fonte do cabeçalho 3, se você não usar estilos de texto, você precisa ir e modificar manualmente todas as camadas de texto com as mesmas propriedades. Mas quando você usa um estilo de texto, você pode facilmente ir para este estilo de texto e clicar em “Editar estilo de texto”. Por exemplo aqui, você pode aumentar o tamanho da fonte para 50. Agora, como você pode ver, as mudanças se aplicam a ambas as camadas de texto ao mesmo tempo e se eu subir um pouco, você pode ver que este título 3 foi alterado também. Vou desfazer a operação segurando “Comando Z” ou “Controle Z”. Perfeito. É por isso que usamos um estilo de texto. Vou removê-los. Quando você está projetando para web ou mesmo para celular hoje em dia, certifique-se de não usar um tamanho de fonte menor para baixo 13 pontos. Porque vai ser muito difícil para os usuários lê-lo. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 96. Crie seus estilos de cores: Ei, neste vídeo, vamos começar a criar nossos estilos de cores juntos. Sem mais delongas, vamos começar. Deixe-me ampliar estes prancheta guia design como este. Finalmente, vou selecionar todas essas camadas e agrupá-las pressionando Command G ou Ctrl G no meu teclado. Deixe-me chamá-lo de Tipografia. Então eu vou criar outro retângulo ou eu poderia apenas duplicá-lo, mas deixe-me mostrar-lhe uma coisa. Vou arrastar e soltar algo assim. Na verdade, eu vou aplicar os mesmos efeitos e o mesmo estilo que são usados para esses retângulos. Se você manter pressionada a tecla Command ou Control no teclado e clicar neste retângulo, ela será selecionada. Alternativamente, você pode ir para a lista de camadas e escolhê-la manualmente. Agora eu vou clicar com o botão direito sobre isso, e na parte inferior, eu vou para Copiar e Colar, e a partir daqui, eu vou copiar as propriedades. Então eu vou selecionar este retângulo que eu acabei de criar. Vou clicar com o botão direito sobre isso, vá para Copiar e Colar e Colar propriedades. Lá vamos nós. Temos o mesmo estilo para este retângulo também. Este retângulo é para as nossas cores. Vou ampliá-lo assim, muito bem, e deixe-me criar um quadrado. Vou manter pressionada a tecla Shift, arrastar e soltar assim. Vamos definir a largura e a altura para 250 por 250, e finalmente, vamos aumentar o valor do raio do canto para 30. Muito bom. Para este projeto, vou criar seis estilos de cores diferentes. A primeira cor será a nossa cor primária. O código de cor é 554DDE. Muito bom. Este roxo vai ser a nossa cor primária. Como os têxteis, para criar um estilo de cor, você pode facilmente ir para a seção Preenchimento e clicar no ícone de estilo e clicar neste ícone de adição. Aqui vou escrever a Primária. Lá vamos nós. Acabamos de criar nosso primeiro estilo de cor. Então eu vou apertar Command D ou Control D no meu teclado, movendo-se para o lado direito, e eu vou desanexá-lo de seu estilo e então eu vou definir o código de cor para F44E77. Muito bom. Esta será a nossa cor de acento, e vamos usá-la para, por exemplo, botões de chamada à ação, ou quando quisermos destacar uma parte específica do texto, usaremos essa cor. Deixe-me criar um estilo de cor, e eu vou escrever Accent. Fantástico. Mais uma vez, duplique-o. Vou movê-lo para baixo, vou separá-lo de seu estilo, e deixe-me mudar o código de cor para 6A6D9E. Vai ser a nossa luz secundária, mas eu vou chamá-la de luz secundária, então deixe-me escrever Secundário/Luz, porque nós vamos ter um escuro também. Vou duplicá-lo, movê-lo para o lado direito, separá-lo de seu estilo, e deixe-me mudar o código de cor para 16194F. Deixe-me criar um estilo de cor, Secundário/Escuro. Fantástico. Precisamos criar mais dois. Vou duplicá-lo, movê-lo para cima. Este vai ser a nossa cor neutra e vamos usá-lo, por exemplo, para o nosso fundo. Vou desanexá-lo de seu estilo e deixe-me mudar o código de cor para F2F6FF. Muito bom. É uma cor azul claro, é a mesma cor que usamos para nosso fundo aqui. Vou criar um estilo de cor, deixe-me chamá-lo de Neutro. Fantástico. Por último, mas não menos importante, vamos criar um estilo de cor para o nosso traçado. Eu vou duplicá-lo, movê-lo para baixo, deixe-me separá-lo de seu estilo, remover o preenchimento, e adicionar um traço a ele. Vou definir o traçado para dois, a espessura não importa agora, porque mais tarde podemos modificá-lo quando aplicarmos este estilo às nossas formas, mas o que importa é a cor. Vou definir o código de cor para CAD6F1. Muito bom. Deixe-me ampliar que você pode ver. Fantástico. Deixe-me selecioná-lo e adicionar um estilo de cor. Vou escrever “Stroke”. Vou fazer este retângulo um pouco menor assim. Deixe-me selecionar todas essas formas, agrupá-las, manter pressionada a tecla Shift e selecionar esse retângulo. Finalmente, no inspetor na parte superior, você pode alinhá-los horizontalmente e verticalmente. O que queremos adicionar aqui é um título. Deixe-me diminuir o zoom e deixe-me ampliar este retângulo um pouco. Eu vou mover essas cores para baixo, e deixe-me selecionar este texto tipográfico, copiá-lo, Comando C ou Ctrl C, selecionar este retângulo e colá-lo, Comando V ou Ctrl V. Aqui, eu vou escrever Cores. Muito bom. O estofamento da esquerda vai ser 65, e seu estofamento superior vai ser 60. Criamos com sucesso nosso guia de design. Na verdade, você pode adicionar mais elementos aos seus guias de design, como logotipos, ícones, botões, controles deslizantes, etc. Mas, por enquanto, só precisamos do nosso estilo de tipografia e dos nossos estilos de cores. Tudo bem pessoal, isso é tudo por este vídeo, espero que tenham gostado, e vejo-vos no próximo vídeo. 97. Elaboração do projeto - Parte 1 de que o Wireframing: Ei, ali. Agora que nosso guia de design está pronto, é hora de criar um wireframe para nossa página de destino. O que é realmente wireframing? Wireframing é uma maneira de projetar um site ou um aplicativo móvel em um nível estrutural. Em outras palavras, é a planta do nosso design e nos ajuda a projetar nosso projeto de forma fácil e mais conveniente, então, sem mais delongas, vamos começar. Vou abrir Figma e aqui, ao lado deste guia de design que criamos, vou criar outra prancheta. Vou pressionar “A” no meu teclado e no lado direito no Inspetor, você pode ver que temos algumas pranchetas pré-construídas. Vou escolher a área de trabalho. A dimensão é de 1440 por 1024. Lá vamos nós. Deixe-me ampliar, muito bem. Nós criamos nossa prancheta, mas como você pode ver, não é grande o suficiente para colocar todos os nossos elementos. Primeiro de tudo, vou mudar o nome. Vamos clicar duas vezes em seu nome na lista da camada e eu vou renomeá-lo para wireframe. Perfeito. Então, no inspetor, eu vou definir a altura para 6.100, por enquanto. Se eu diminuir o zoom, você pode ver que agora, temos muito mais espaço para trabalhar. Na verdade, temos dois tipos de wireframe, um wireframe de baixa fidelidade e um wireframe de alta fidelidade. Qual é a diferença? Um wireframe de baixa fidelidade inclui apenas os elementos necessários. Ele não precisa ter as cores das marcas, ou espaçamento preciso, ou mesmo ícones. Só tentamos imaginar como será o nosso produto final. Vamos usar formas simples, como retângulo, círculo, etc, para visualizar nosso projeto final em um nível estrutural. Por outro lado, um wireframe de alta fidelidade requer mais conteúdo, como o tamanho exato de seus botões, seus elementos, ou até mesmo você pode incluir algumas cores. Mas, por enquanto, vamos criar um quadro de baixa fidelidade juntos. Vamos começar. Para nossa página de destino, precisamos ter uma seção de heróis, no topo de qualquer página de destino ou de qualquer site, vamos precisar de uma seção de heróis, que é a parte mais importante do site. Você deveria prestar tanta atenção nisso. Vou selecionar a ferramenta de retângulo na barra de ferramentas e deixe-me clicar e arrastar para criar um retângulo simples. Então eu vou em frente e mudar o nosso preenchimento. Deixe-me escolher um dos nossos estilos de cores que já criamos. Vou escolher o secundário, o negro, muito bom. Esta vai ser a nossa secção de heróis. No topo, vamos precisar de uma barra de navegação. Uma barra de navegação vai incluir um logotipo, em seguida, alguns itens de menu no meio e, finalmente, um botão de login no lado direito. Vou em frente e criar outro retângulo. Deixe-me manter pressionada a tecla Shift, clique e arraste para criar um quadrado. Vou ajustá-lo para 60 por 60. Vamos fazer isso arredondado, muito bom. Então vou escolher outra cor. Deixe-me escolher o secundário, o leve. Isto vai representar o nosso logotipo, então precisamos de alguns itens do menu. Na verdade, precisamos de três itens de menu, mas mais tarde se você quiser, você pode mudá-lo e você não precisa se preocupar com os detalhes. A fim de ilustrar os itens do menu, eu vou ir em frente e criar outro retângulo como este. Eu vou fazer isso arredondado. Deixe-me aumentar a quantidade de raio de canto no inspetor. Fantástico. Deixe-me mudar a cor, mas desta vez, vou usar esta cor neutra. Deixe-me duplicar duas vezes, movê-lo para o lado direito. Para duplicar a camada, você pode pressionar “Command D” ou “Control D” se estiver usando o Windows novamente. Estas três formas representam os nossos itens de menu. Em seguida, no lado direito, precisamos ter um botão Sign In. Deixe-me criar outro retângulo, um pouco maior, e eu vou torná-lo arredondado e deixe-me mudar sua cor para este sotaque. Você pode usar, por exemplo, essa cor secundária como usamos para o nosso logotipo. Mas como vamos usar a cor do acento para o botão Entrar em nosso produto final, você pode usar isso também. Aqui vou escrever algumas coisas. Deixe-me criar uma camada de texto e deixe-me escrever botão, fantástico. Deixe-me selecioná-lo e aumentar seu tamanho de fonte para 17 por enquanto. Por enquanto, não vamos usar nossos estilos de texto porque isso realmente não importa para este estágio. Mas se preferir, você pode usar seus estilos de texto também. Por exemplo, você poderia usar este, médio. Deixe-me selecionar ambas as camadas. Vou manter pressionada a tecla Shift no meu teclado e clicar em ambos. Então eu vou alinhá-los horizontalmente e verticalmente. Deixe-me torná-lo um pouco maior, que possamos usar nossos estilos de texto e, por exemplo, poderíamos usar o principal 20. Deixe-me alinhá-lo. Até agora, tudo bem. Criamos nossa barra de navegação com sucesso. Agora, deixe-me selecionar todos esses itens de menu e agrupá-los. Vou chamá-lo de menu. Vou chamar este logótipo retangular. Finalmente, vamos selecionar ambas as camadas, agrupá-las, e vamos chamá-lo de botão. Por último, mas não menos importante, você pode selecionar todas essas três camadas, já que as agrupamos. Mais uma vez, agrupe-os e alinhe este grupo final horizontalmente ao centro. Você pode dar um nome como Nav Bar. Até agora, tudo bem. Criamos nossa barra de navegação. Então, para a nossa seção de heróis, precisamos ter uma imagem no lado direito e um cabeçalho grande, uma descrição e um apelo à ação. Uma chamada à ação é, na verdade, um botão. Por exemplo, um botão de registro ou um botão Entrar. Não importa por enquanto. O que importa é criar algumas formas para representar nosso título, nossa descrição e nosso botão. Eu vou ir em frente e selecionar a ferramenta de retângulo, clique e arraste assim. Eu vou fazer isso arredondado. Deixe-me ampliá-lo um pouco, já que este é o nosso título e é perfeito, então eu vou mudar sua cor para a nossa linha secundária, duplicá-lo, movê-lo para baixo. Vou torná-lo um pouco menor para mostrar que este é um texto. Mais uma vez, duplique-o, torne-o um pouco menor. Fantástico. Este vai ser o nosso título. Vou agrupá-los e vamos chamar-lhe título. Então precisamos de uma descrição. Para nossa descrição, poderíamos usar a mesma técnica e criar um retângulo como este. Eu vou fazer isso arredondado assim. Vou escolher esta cor neutra para a nossa descrição, movê-la para baixo, torná-la um pouco menor, duplicá-la, torná-la um pouco menor. Isso é tudo. Nossa descrição também está pronta. Vou selecionar todos os três elementos, agrupá-los , “Command G” ou “Control G” no seu teclado. Vamos dar o nome de descrição. Fantástico. Por último, mas não menos importante, precisamos de um botão. Vou avançar e clicar duas vezes neste botão para selecioná-lo. Vou copiá-lo, “Comando C” ou “Controle C” no seu teclado. Em seguida, selecione este grande retângulo, que é o nosso plano de fundo, e pressione “Command V” ou “Control V”. Como podem ver, este botão não está dentro do nosso grupo de navegação, está fora dele. Vou colocá-lo aqui. O lado esquerdo da nossa seção de heróis está pronto. Mas e o lado direito? Para o lado direito, vou usar uma imagem muito simples. Eu vou escolher retângulo, clique e arraste assim, torná-lo arredondado. Vou aumentar a quantidade do raio do canto. Vamos definir para 40. Finalmente, vamos mudar sua cor para luz secundária. Muito bom. Agora vou selecionar todos esses três grupos e movê-los um pouco para baixo. Deixe-me torná-lo um pouco menor e movê-lo para baixo. Como você pode ver, nossa seção de heróis está pronta. Acabamos de criar uma estrutura de baixa fidelidade para a nossa seção de heróis. No próximo vídeo, continuaremos nossa jornada para completar esta página de destino. Vejo você na próxima. 98. Elaboração do projeto - Parte 2: Ei aí. Depois da seção de heróis, vou criar a seção de feição. Para este serviço, que é um aplicativo bancário online, vamos criar três seções de recursos. O que é uma seção de recursos? Uma seção de recursos, como você pode imaginar, é uma seção que fornece ao usuário os recursos desse serviço específico ou desse produto específico, que no nosso caso é o aplicativo. Então, para cada seção de recursos, vamos precisar de um título, uma descrição, e no lado direito, precisamos ter uma imagem. Vou em frente e selecionar este título. Nesta descrição, vou manter pressionada a tecla Shift para selecionar ambos. Pressione “Command C” ou “Control C” no teclado e, em seguida, pressione “Command V” ou “Control V” no teclado e mova-o para baixo, assim. Bastante bom. Deixe-me alinhá-los ao lado esquerdo também. Como você pode ver, nossa descrição aqui não é legível o suficiente. Então o que eu vou fazer, eu vou ir em frente e selecionar este quadro de arte wireframe e mudar sua cor de fundo. Como você pode ver por padrão, ele está definido como branco, mas eu vou mudá-lo para a nossa cor neutra. Deixe-me rolar para baixo. Agora, podemos mudar a cor da nossa descrição para outra coisa. Por exemplo, luz secundária. Para este título, podemos mudá-lo para secundário escuro. Fantástico. Agora, no lado direito, precisamos de uma imagem e podemos copiá-la e colá-la. Você pode ver como é simples criar um wireframe de baixa fidelidade? Vou copiar e colar. Mova-o para baixo. Mas eu vou torná-lo menor um pouco, assim. Bastante bom. Na verdade, nesta seção, vamos apresentar um cartão de crédito no lado direito. Foi por isso que fiz parecer um cartão de crédito. A relação de aspecto ilustra a sua finalidade. Agora, precisamos de outra seção de recursos, então eu vou selecionar todos esses três elementos e apertar “Command D” ou “Control D” no seu teclado para duplicá-los, movê-los um pouco para baixo assim. Mas desta vez vou mudar o lugar do nosso título e descrição com a nossa imagem. O que vou fazer, vou selecionar os dois, agrupá-los, movê-los para o lado direito, selecionar nossa imagem e movê-la para o lado esquerdo. Nesta seção, vamos ter algumas estatísticas, por exemplo, um gráfico. Então o que eu vou fazer, eu vou torná-lo um pouco menor. Este retângulo vai manter o nosso gráfico. Vou duplicá-lo, “Comando D” ou “Controle D” na minha palavra-chave, movê-lo para cima, e torná-lo um pouco menor assim. Mais uma vez duplique-o, mova-o para baixo, coloque-o ao lado do nosso retângulo anterior, assim. Bastante bom. Deixe-me selecionar todos eles, agrupá-los , e movê-lo para baixo. Mas para esse recurso, vou precisar de um botão, um botão “Saiba mais”. O que eu vou fazer é mover este grupo de texto um pouco para cima e abrir um lugar para o nosso botão. Vamos copiar este botão. Vou apertar “Comando C” ou “Controle C.” Aqui, vou apertar “Comando V” ou “Controle V.” Lá vamos nós. Agora precisamos criar mais uma seção de recursos para nossa página de aprendizado. Para esta seção de recursos, vou precisar, novamente, de um título, uma descrição, e também algumas pequenas imagens logo abaixo da descrição. Deixe-me copiar e colar, “Comando C” e “Comando V.” Vou movê-lo para baixo. Aqui, bem debaixo disso, preciso de algumas imagens circulares. Deixe-me criar um círculo. Vou escolher a elipse, manter pressionada a tecla Shift, clicar e arrastar, muito bem, assim. Vou mudar a cor para luz secundária. Então deixe-me duplicar, movê-lo para o lado direito. Duplicar de novo e de novo. Estes vão ser os nossos titulares de imagens. Bastante bom. Do lado direito, vou ter algumas imagens. O que eu vou fazer é selecionar um desses retângulos aqui. Vou clicar duas vezes sobre isso. Deixe-me copiá-lo, “Comando C”, “Comando V”, assim. Vou torná-lo um pouco menor. Esta seção vai representar o recurso de suporte desta plataforma. Do lado direito, vou precisar de algumas bolhas de bate-papo. Deixe-me duplicar, “Comando D” ou “Controle D”, mova-o para baixo. Mais uma vez duplique-o. Bastante bom. Nossa seção de recursos está concluída. Agora podemos passar para a próxima parte que é o nosso plano de adesão. Deixe-me ampliar. Aqui no meio, vamos ter um título. Logo abaixo disso, vamos ter uma descrição muito curta. Deixe-me manter pressionada a tecla Command no meu teclado ou a tecla Control e clique em um desses retângulos, como este, para selecionar apenas este. Vou copiá-lo, “Comando C”, e colá-lo, “Comando V.” Vou movê-lo para baixo. Deixe-me alinhá-lo ao centro horizontalmente. Também vou torná-lo maior, mas não assim. Na verdade, eu vou manter pressionada a tecla Option ou a tecla Alt no meu teclado e, em seguida, tentar ampliá-la de ambos os lados. Isso é exatamente o que eu quero. Deixe-me duplicar, movê-lo para baixo. Uma vez que esta é uma descrição, eu vou torná-la um pouco menor assim, e deixe-me mudar sua cor para luz secundária. Finalmente, vou torná-lo um pouco menor assim. Fantástico. Temos o nosso título, temos o nosso subtítulo, e aqui precisamos ter dois planos diferentes, o plano gratuito e o plano premium. Cada plano deve ter o preço, uma chamada à ação, e também uma imagem que o usuário pode escolher o design de seus cartões de débito ou de seus cartões de crédito e, finalmente, algumas características curtas desse plano específico. Deixe-me selecionar a ferramenta Retângulo. Vou clicar e arrastar assim. Fantástico. Eu vou fazer isso arredondado. Deixe-me mudar sua cor para nossa luz secundária, assim. Como eu disse antes, para este plano, precisamos ter algumas informações, como um título. Vou selecionar este retângulo, apertar “Comando C”, “Comando V”, para colá-lo, assim. Fantástico. Este vai ser o nosso título. Vou duplicá-lo e movê-lo para baixo. Deixe-me ampliá-lo um pouco. Este vai ser o nosso preço. Então precisamos de um botão. Eu vou subir, selecionar este botão, “Comando C”, “Comando V”, e movê-lo para baixo, assim. Mas na lista da camada, precisamos movê-la para cima, aqui. Bastante bom. Aqui temos o botão. Então precisamos ter uma imagem, então vamos criar uma. Vou selecionar a ferramenta Retângulo, clique e arraste. Este vai ser o nosso cartão de crédito ou cartão de débito espaço reservado, torná-lo arredondado, e vamos mudar a cor para escuro secundário. Então precisamos de uma mensagem. Vamos selecionar este título, copiá-lo e colá-lo, “Comando C”, “Comando V”, ou “Controle C”, “Controle V”, e torná-lo um pouco menor. Vamos torná-lo um pouco mais largo. Fantástico. Finalmente, vamos mudar a cor para neutra. Deixe-me duplicar. Mova-o para baixo, duplica-o. Criamos com sucesso o nosso primeiro plano. Vou selecionar todos esses elementos e agrupá-los. Clique e arraste para selecioná-los, assim, e pressione “Command G” ou “Control G” para agrupá-los. Então vamos chamá-lo de plano, e eu vou duplicá-lo, “Comando D” ou “Controle D”, e movê-lo para o lado direito. Em seguida, selecione ambos, agrupe-os, “Comando G” ou “Controle G”, e chame-os de planos. Finalmente, vou alinhá-lo ao centro horizontalmente. Parece tão bom. A próxima seção será uma seção de perguntas e respostas. Para esta seção de P e R, novamente, precisamos de um título, uma descrição. Então eu vou selecionar ambos, “Comando C”, “Comando V”, ou “Controle C”, “Controle V.” Mova-o para baixo, assim. Aqui precisamos ter alguns retângulos para manter nossas perguntas então deixe-me criar um retângulo. Podemos arrastar, assim. Deixe-me fazer isso arredondado. Finalmente, vou mudar sua cor para nossa luz secundária. Este espaço reservado vai ter uma camada de texto, então deixe-me selecionar este título, “Comando C”, “Comando V”, movê-lo para baixo, e eu vou movê-lo para cima na lista de camadas aqui. Bastante bom. Deixe-me fazer um pouco menor. Mova-o para o lado esquerdo. Esta vai ser a nossa pergunta. Do lado direito, vamos precisar de um ícone, que é uma imagem. Vou criar um círculo, como este. Mova para o lado direito e mude sua cor para neutra. Bastante bom. Então vamos selecionar todos eles, agrupá-los, e vamos dar um nome de pergunta. Finalmente, você pode duplicá-lo e movê-lo para baixo para nossa segunda pergunta. Novamente, duplique-o para obter 5 perguntas, como esta. Estamos quase terminando. A última coisa que precisamos para a nossa página de destino é um rodapé. Um rodapé é uma seção que inclui todos os links importantes do seu site e também a isenção de responsabilidade de direitos autorais. Vou selecionar a ferramenta Retângulo, clicar e arrastar assim e, em seguida, mudar sua cor para escuro secundário. Aqui, precisamos ter um logotipo, depois o aviso de direitos autorais e, em seguida, 3 colunas de links. Vamos criar um logotipo. É tão simples. Precisamos de um retângulo. Mantenha pressionada a tecla Shift para criar um quadrado. Lá vamos nós. Eu vou fazer isso arredondado. Deixe-me escolher a luz secundária para isso. Este é o nosso logótipo. Então precisamos ter o direito de isenção de responsabilidade de direitos autorais sob isso então vamos criar uma descrição como esta. Eu vou fazer isso arredondado. Novamente, vou escolher a luz secundária, assim, duplicá-la e movê-la para baixo. Fantástico. O lado esquerdo do rodapé está pronto. Eu vou selecionar essas duas camadas, agrupá-las, e também deixe-me selecionar este logotipo e este grupo, e mais uma vez agrupá-las, e eu vou movê-las para baixo. No lado direito, como mencionei antes, precisamos ter 3 colunas de links. Deixe-me criar um retângulo, mas pequeno e torná-lo arredondado. Vamos mudar a cor para este primário. Nunca a usamos. Uma vez que estes serão links, é melhor escolher outra cor. Duplicá-lo, movê-lo para baixo. Mais uma vez, duplique-o, assim. Cada coluna vai ter 3 links. Agora eu vou manter pressionada a tecla Shift no meu teclado e selecionar todos os 3 links, agrupá-los, pressionar “Command G” ou “Control G”, e vou nomear links para eles. Então, no inspetor, eu posso mudar o espaçamento entre eles facilmente, assim. Vou ajustá-lo para 70. Acho que é muito bom. Enquanto estiver selecionado, vamos duplicá-lo, “Command D” ou “Control D”, e movê-lo para o lado direito. Mais uma vez, duplique-o. Lá vamos nós. Todas as nossas 3 colunas estão prontas então eu vou movê-lo para o lado esquerdo. Certo, pessoal, vamos checar nosso grampo e ver se precisamos fazer algumas mudanças. Aqui, deixe-me selecionar todas essas perguntas e movê-las um pouco para cima. Vou diminuir o zoom. Lá vamos nós. A nossa armação está pronta. Então eu vou selecionar esta prancheta wireframe e clicar neste ícone “Reproduzir” para visualizá-la. Como você pode ver, temos uma seção de heróis com uma barra de navegação e todos os elementos necessários. Eu vou mover para baixo, e nós temos recurso 1, recurso 2, recurso 3, muito bom, e a seção de P e R, eo rodapé. Você viu como é fácil criar este wireframe de baixa fidelidade? No próximo vídeo, começaremos a projetar nosso projeto juntos. Espero que tenham gostado deste vídeo, e nos vemos no próximo. 99. Barra de navegação: Ei, bem-vindo de volta. Agora que nosso wireframe está pronto, vamos começar a projetar nossa página de destino juntos. Você está pronto? Vamos lá. Primeiro, vou criar outro quadro de arte ao lado da minha armação. Vou pressionar “A” no meu teclado e, no lado direito, vou escolher Desktop. Perfeito. Deixe-me movê-lo para cima, e eu vou aumentar o zoom. Agora, deixe-me mudar o nome para Landing Page. Certifique-se de nomear suas camadas e suas placas de arte corretamente para manter seu projeto organizado. Agora, deixe-me fazer um pouco mais, assim. É o suficiente por enquanto. O que precisamos para a nossa página de destino? Como você pode ver, temos um wireframe que criamos no vídeo anterior e sabemos onde os elementos serão colocados. No entanto, para esta página de destino, precisamos criar uma grade de layout primeiro, a fim de nos guiar onde devemos colocar nossos elementos. Enquanto este painel de arte da página de destino estiver selecionado, vá até a grade de layout no lado direito no Inspetor e clique neste ícone de adição. Lá vamos nós. Agora temos uma grade. Mas se você clicar neste ícone ao lado dessas tags, você pode modificar essa grade para colunas. Isso é exatamente o que queremos. Para este projeto, vamos usar uma grade de layout de 12 colunas, que é popular. Vou ajustar a contagem para 12. Lá vamos nós. Agora temos 12 colunas. Então o tipo vai ser esticado. Você pode configurá-lo para o centro e definir a largura, mas eu prefiro configurá-lo para esticar. Vou dar-lhe uma margem de 150 pixels do lado direito e do lado esquerdo. Então vamos mudar a quantidade da calha, que é o espaço em branco entre nossas colunas. Vou ajustá-lo para 16. Agora nossa grade de layout está pronta, e podemos começar a projetar nossa página de destino. Do que precisamos? Em primeiro lugar, precisamos projetar nossa barra de navegação na parte superior. Nossa barra de navegação vai ter um logotipo, em seguida, alguns itens de menu e, finalmente, um botão. Abra a pasta de ativos que você baixou antes, pois precisaremos do logotipo que já preparamos para você. Na pasta de logotipo, arraste e solte o arquivo logo.svg no seu projeto, assim. Fantástico. Se você quiser ocultar sua grade de layout, pressione facilmente “Control G” no teclado e pressione novamente para ativá-la. Perfeito. Agora, eu vou ampliar um pouco, e eu vou alinhar este logotipo para o lado esquerdo desta coluna, a segunda coluna. Não vamos colocar nossos elementos na primeira coluna da esquerda e da direita. Vamos deixá-los vazios. Bastante bom. Então precisamos ter alguns itens do menu. Vou pressionar “T” no meu teclado e clicar aqui para criar uma camada de texto. Então deixe-me escrever, por exemplo, Início como nosso primeiro item de menu. Agora, podemos começar a usar nosso tamanho de texto. Se eu passar para a seção Texto no Inspetor, eu posso clicar neste ícone de estilo no lado direito, e então eu vou escolher média 17. Este é o estilo de texto que criamos antes. Lá vamos nós. Vou movê-lo um pouco para cima. Deixe-me ampliar e duplicar pressionando “Command D” ou “Control D” se estiver usando o Windows e mova-o para o lado direito. Deixe-me alterá-lo para recursos. Perfeito. Mais uma vez, vou duplicá-lo, “Command D” ou “Control D”, movê-lo para o lado direito, e deixe-me escrever preços. Agora, temos nossos três itens do menu. O que eu vou fazer é selecionar esses três itens, e eu vou pressionar “Shift” e “A” para adicionar o layout automático a ele. Como você pode ver no lado direito, temos um layout automático adicionado. A partir de agora, podemos modificar o espaçamento entre esses elementos usando a seção, como esta. Se você quiser, por exemplo, adicionar um novo item, você só precisa selecionar um deles e pressionar “Command D”. Como você pode ver, este quadro que acabamos de criar crescerá horizontalmente automaticamente porque estamos usando um layout automático horizontal. Se mudarmos o modo de horizontal para vertical, você pode ver que eles empilham verticalmente, mas queremos mantê-lo horizontal, assim. Deixe-me remover esses recursos. Bastante bom. Vou definir o espaçamento entre eles para 70, assim, por enquanto. Então deixe-me alinhá-lo ao centro horizontalmente usando a seção de alinhamento no Inspetor, assim. A última coisa que precisamos para nossa barra de navegação é um botão. O que eu vou fazer é selecionar esta ferramenta de retângulo na barra de ferramentas e clicar e arrastar para criar um retângulo como este. Vou aumentar o raio do canto para 20 para torná-lo arredondado. Deixe-me ampliar. Vou esconder minha grade de layout para ver nossos elementos um pouco melhor. Deixe-me mudar a largura para, por exemplo, 167 em vez de 177. Vou definir a altura para 56 por enquanto. Agora, para este botão, vou usar um dos nossos estilos de cores que já criamos. Se eu for até a seção Preencher no lado direito e clicar no ícone de quatro pontos, posso escolher a cor do acento. Lá vamos nós. Para este botão, vou precisar de uma mensagem. Deixe-me pressionar “T” no meu teclado e clicar aqui para criar uma camada de texto. Vou escrever uma inscrição. Bastante bom. Como usamos um estilo de texto antes para nossos itens de menu, Figma escolherá automaticamente o mesmo estilo de texto nosso estilo de texto padrão quando criarmos uma nova camada de texto. Está totalmente bem. Então eu vou definir a cor para branco, assim. Por último, temos de alinhar aqui os nossos elementos. Se eu ampliar um pouco que você possa vê-lo melhor, como você pode ver, meu texto é selecionado. Vou manter pressionada a tecla “Shift” e clicar em nosso retângulo assim. Agora, se você der uma olhada na lista de camadas, você pode ver que duas camadas são selecionadas ao mesmo tempo. Isso é exatamente o que queremos. Agora, deixe-me alinhá-los horizontalmente e verticalmente, assim. Mais uma coisa, aqui podemos criar um grupo ou podemos adicionar um layout automático a eles. Prefiro o mais tarde. Deixe-me pressionar “Shift” e “A”, e agora este botão é dinâmico. O que eu quero dizer com isso? Como está definido como horizontal, se eu tentar adicionar algum texto a ele, ele vai crescer horizontalmente. Vamos tentar. Vou mudar a inscrição para algo como registro. Você pode ver como ele cresce horizontalmente? É perfeito. Nosso botão também está pronto. O que mais devemos fazer? Precisamos alinhar todos esses três elementos verticalmente. Vou selecionar todos eles mantendo pressionada a tecla “Shift”, e vou pressionar “Alinhar Vertical Center”. Mas temos mais um problema. Deixe-me mostrar minha grade de layout. O que eu vou fazer é mover este botão para o lado direito para tocar no lado direito da minha segunda coluna. Como este. Agora, eu acho que parece bem. No entanto, poderíamos torná-lo um pouco melhor, tendo a mesma quantidade de espaçamento entre nosso logotipo e o lado esquerdo de nossos itens de menu e nosso botão e o lado direito de nossos itens de menu. Agora, se eu manter pressionada a tecla Alt ou Option no teclado e passar o mouse sobre os elementos ao redor, posso ver a quantidade de margem que estou preenchendo. Do lado direito, tenho 154, e do lado esquerdo, tenho 274. Deixe-me movê-lo um pouco para o lado esquerdo. Como podem ver, tenho 214 pixels da esquerda e 214 pixels da direita. Este quadro está exatamente no meio desses dois elementos, e é exatamente o resultado que eu estava procurando. Por último, mas não menos importante, vamos selecionar todos eles, agrupá-los, apertar “Command G” ou “Control G” no seu teclado, e eu vou chamá-lo de Barra de Navegação. Como você pode ver, sua margem superior é definida como 79. Vou configurá-lo para 80 para que eu possa movê-lo baixo pela tecla de seta no meu teclado por um pixel. Perfeito. Tudo bem, pessoal, isso é tudo por este vídeo. Criamos com sucesso nossa barra de navegação. No próximo vídeo, vamos começar a projetar nossa seção de heróis juntos. Vejo você então. 100. Seção de Herói - parte 1: Olá, bem-vindo de volta. Neste vídeo, vamos começar a desenhar nossa seção de heróis. Sem mais delongas, vamos começar. O que precisamos para nossa seção de heróis? Vamos dar uma olhada no nosso wireframe. Como você pode ver nossa seção de herói, tem um fundo, e, em seguida, uma linha de cabeça, uma descrição do botão, e uma imagem no lado direito. Eu acho que é uma boa idéia começar a projetar nosso plano de fundo primeiro, e depois passar para os outros elementos. Para manter tudo organizado, vou pressionar “A” no meu teclado e deixe-me adicionar uma nova prancheta. Deixe-me selecionar Área de trabalho e vou colocá-la ao lado da minha página de destino. Deixe-me ampliar. Para este fundo, eu vou usar diferentes gradientes e cores diferentes, e então com uma técnica legal, eu vou mostrar a vocês como você pode misturar as cores juntas para obter um fundo muito legal, que é tão popular hoje em dia. Para este plano de fundo, vou usar a ferramenta Caneta, selecionar a “ferramenta Caneta” na barra de ferramentas e vou criar um nó. Deixe-me clicar em algum lugar aqui, e eu vou mover meu mouse para baixo assim, mantenha pressionada a tecla “Shift” para obter uma linha reta como esta. Clique para criar o segundo nó e movê-lo para o lado direito, clique assim, e aqui está a parte complicada. Agora, vou criar uma linha curva. Como posso fazer isso? Como você pode ver, se eu clicar em algum lugar, eu vou ter uma linha reta, mas isso não é o que eu quero. Para obter uma linha curva, você pode clicar e arrastar, assim, clicar e arrastar para obter algo assim e, finalmente, fechar seu caminho, clicando em seu primeiro nó. Perfeito. Temos a nossa primeira forma, mas vou modificá-la um pouco. Deixe-me selecionar a ferramenta de movimentação, e eu vou clicar neste nó no meio, e usando essas alças, eu posso modificá-la assim. Acho que agora parece bom. Agora é hora de adicionar uma cor a ele, mas antes de tudo, vou remover o traçado dele usando esse ícone de menos e, em seguida, adicionar um preenchimento a ele. Para esta primeira forma, eu vou usar nossa cor escura secundária como esta, e então eu vou duplicar essa forma, movê-la um pouco para cima assim, e finalmente eu vou torná-la um pouco maior. Mantenha pressionada a tecla “Shift” e clique e arraste assim. Mas você não pode ver nada porque ambas as camadas têm a mesma cor. Agora eu vou mudá-lo para acento, e como a segunda camada está acima de nossa camada anterior, nós não somos capazes de ver nossa camada anterior, então eu vou movê-la para baixo assim. Lá vamos nós. Agora ambos são visíveis. Até agora, tudo bem. Deixe-me girá-lo um pouco para obter algo assim, e eu vou torná-lo maior. Você pode brincar com esses valores e mover suas formas como quiser. Agora parece bom. Então preciso de outra forma. Vou selecionar a ferramenta Caneta e clicar aqui, movê-la para baixo, clique aqui, assim, clique em algum lugar aqui. Não importa como você dirige agora porque esta forma vai estar sob nossas camadas anteriores, assim, e eu vou colocar o próximo aqui e conectá-los assim. Muito bom. Agora deixe-me adicionar um preenchimento a ele. Eu vou escolher esta cor primária e deixe-me movê-la baixo assim para colocá-la sob nossas camadas anteriores. Até agora, tudo bem, podemos torná-lo um pouco maior. Agora vou adicionar mais cores, então deixe-me selecionar a ferramenta caneta novamente. Desta vez, clique aqui, mova-o aqui e aqui para criar uma linha curva como esta, e deixe-me adicionar outra cor a ela. Provavelmente, você poderia usar uma cor diferente de nossos estilos de cores, e é totalmente bom, já que é um fundo, o que eu vou escolher é uma cor azul claro. Deixe-me mudar a tonalidade, algo assim. Sim, parece bom e como pode ver, tem uma harmonia muito boa com as outras cores. O código de cor é 35ECEC. Lá vamos nós. Por último, mas não menos importante, precisamos de outra cor para colocar logo atrás dessas formas. Mas antes disso, como você pode ver, esta forma está fora da minha prancheta e é um problema. Se você passar para a lista da camada, você pode clicar e arrastá-lo e colocá-lo dentro da nossa prancheta, e deixe-me renomear esta prancheta para BG, que significa fundo, e por último, mas não menos importante, deixe-me criar outra forma para preencher esta área branca. Perfeito, muito bom. Vou escolher algo como laranja. Vamos tentar e ver se fica bem. Deixe-me colocar esta camada dentro da prancheta e movê-la para baixo. Fantástico. Como você pode ver, temos uma combinação de cores muito boa. No entanto, não parece bom para o nosso passado. Como podemos fazer com que pareça bom? Deixe-me mostrar-lhe uma técnica muito boa. O que eu vou fazer agora é selecionar este BG, copiá-lo, clicar em “Comando C”, selecionar sua página de destino e colá-lo, pressionar “Comando V”. Eu vou colocá-lo sob nossa barra de navegação e movê-lo para cima assim, e então eu vou adicionar um efeito a ele. Se você passar para a seção Efeito e clicar neste ícone de adição, você pode adicionar um efeito a ele, mas por padrão, ele está definido para soltar sombra. Vou mudar para Borrão de Camada assim. Então, se eu clicar neste ícone do sol, eu posso modificar essa quantidade de borrão para o que eu quiser. Eu vou usar este controle deslizante, assim, eu vou aumentá-lo para misturar todas essas cores. Você pode ver como é bonito agora? Acabamos de criar um belo fundo para a nossa página de destino usando esta técnica simples e usando formas simples na verdade. Agora eu vou modificar minhas cores um pouco para obter um resultado melhor. Primeiro, vou mudar esta laranja para outra coisa. Deixe-me escolher minha cor de acento, parece bom, e também, eu vou modificar esta cor azul um pouco. Deixe-me tornar mais escuro para obter algo assim. Fantástico. Além disso, vou mudar um pouco essa cor secundária. O que eu vou fazer é selecionar este elemento e torná-lo um pouco menor, e selecionar esta camada Vector 2, movê-lo um pouco para cima, e também acho que precisamos adicionar outra cor para nossa transição aqui entre estes atos e cores e esta cor azul. O que eu vou fazer é selecionar esta camada Vector 5, copiá-la e colá-la, movê-la para o lado direito, não é visível porque está sob nossas outras camadas. Movê-lo para cima na lista de camadas assim e mudar a cor para outra coisa, mas antes disso, precisamos separá-lo de seu estilo assim, e deixe-me mudá-lo para algo assim. O código de cor é 4EF4E0. Agora vou girá-lo um pouco. Está ficando melhor e melhor como você pode ver, muito bom. Finalmente, vamos mudar essa cor azul para obter um resultado melhor. Muito bom. Precisamos fazer mais uma coisa. Como você pode ver, agora que adicionou este efeito embaçado ao nosso fundo, nós temos um pouco de cor branca nos lados, e eu vou corrigir isso. Como posso fazer isso? Só precisamos escalar esse plano de fundo. Pressione “K” no teclado para selecionar a ferramenta de escala e mantenha pressionada a tecla “Shift” e tente dimensioná-la assim de ambos os lados, e agora parece melhor. Como você pode ver, embora tenhamos adicionado esse efeito embaçado ao nosso fundo, poderíamos reconhecer as bordas e linhas entre essas cores e não é bom. Devemos aumentar a quantidade de desfoque da camada para eliminar essas linhas como esta, e agora parece muito, muito mais suave, muito bom. Nós criamos com sucesso nosso histórico, mas não terminamos. Há mais um único passo a fazer, que é mascarar o nosso passado. Na verdade, você pode deixá-lo como está e tentar adicionar seu elemento seções herói aqui. No entanto, vou mudar sua forma para algo chique. Deixe-me selecionar a ferramenta de caneta e eu vou criar um nó aqui no canto superior esquerdo, ele está fora da nossa página de destino e eu sei, está totalmente bem. Vamos consertar isso em um minuto. Em seguida, clique aqui para criar outro nó, e agora vou criar uma linha de onda. Para fazer isso, eu posso clicar e arrastar assim, e então eu vou clicar e arrastar aqui. Fantástico, movê-lo para cima, clique aqui, clique aqui, e conecte-o ao seu primeiro nó. Então vamos remover o traçado e adicionar uma cor sólida a ele. Primeiro de tudo, deixe-me modificar esta curva usando estas alças. Vou selecionar esse nó, muito bem. Acho que parece perfeito. Agora devemos mover esta forma que acabamos criar e colocá-la logo abaixo do nosso plano de fundo, nosso BG, dentro da nossa página de destino, certificar-se de que está dentro da nossa página de destino. Agora está dentro, mas não é visível porque nosso fundo é maior do que isso. Como você pode ver, temos um quadro aqui, mas para mascará-lo corretamente, primeiro, precisamos mudá-lo do quadro para grupo, para que eu possa apertar “Comando G” ou “Controle G”, e eu vou chamá-lo de BG, e, em seguida, mantenha pressionada a tecla “Shift”, selecione Vector 7, a forma que acabamos de criar em nosso plano de fundo, e pressione o ícone “Máscara” na barra de ferramentas. Lá vamos nós. Acabamos de mascarar nosso passado, e este é exatamente o resultado que eu estava procurando. Consegues ver como é bonito? Se adicionarmos algum conteúdo a ele, vai ficar incrível. Agora podemos modificá-lo um pouco. Se você selecionar este Vector 7 e pressionar “Enter”, agora você está no modo de edição e você pode selecionar este nó e modificá-lo. Acho que se pudéssemos modificar um pouco essa curva, seria muito, muito melhor. A última coisa que precisamos fazer é mudar a cor de nossos itens de menu. Como você pode ver, não temos um bom contraste já que usamos a cor padrão para esses itens. Vou selecionar todos eles, mantenha pressionada a tecla “Shift” e clique neles e mude o campo para branco. Perfeito. Pessoal, isso é tudo por este vídeo. Espero que tenha gostado. No próximo vídeo, vamos terminar de projetar nossa seção de heróis juntos. Vejo você então. 101. Seção de Herói - parte 2: Ei, bem-vindo de volta. Neste vídeo, vamos continuar projetando nossa seção de heróis juntos. Sem mais delongas, vamos começar. Vamos dar uma olhada no nosso wireframe e ver o que mais precisamos. Precisamos de uma manchete, precisamos de um subtítulo, e também de um apelo à ação. Do lado direito, precisamos de uma imagem. Primeiro de tudo, vamos criar nossa manchete. Vou pressionar T no meu teclado e clicar para criar uma camada de texto. Mas como você pode ver, isso leva camada foi criado dentro do meu grupo de fundo. Vou movê-lo para fora assim, muito bem. Deixe-me escrever, banco inteligente para freelancers. Fantástico. Vou selecioná-lo e vamos mudar o estilo do texto para o título H1, que é o maior cabeçalho que temos. Agora deixe-me exibir minha grade de layout pressionando Control G no meu teclado dessa maneira. Vou movê-lo para o lado esquerdo, certificar-me de que está alinhado com o lado esquerdo da segunda coluna, assim. Então eu vou diminuir sua largura assim. Parece muito bom. Agora vou mudar sua cor de preto para branco para obter um melhor contraste. Deixe-me subir um pouco. Lá vamos nós. Perfeito. Agora vamos adicionar o nosso subtítulo. Deixe-me duplicá-lo, movê-lo para baixo e eu vou mudá-lo de direção H1 para corpo principal. Então eu vou apenas copiar e colar o texto que eu já preparei para economizar seu tempo. Deixe-me colá-lo. Lá vamos nós. O texto é, Draft é um aplicativo móvel revolucionário criado para ajudá-lo a gerenciar seu negócio facilmente e economizar dinheiro. É interessante. Agora deixe-me diminuir a largura como esta para torná-la um pouco menor. Perfeito. Agora parece incrível. Deixe-me pegar a margem superior desta camada de texto. Como você pode ver, está definido para 23. Vou ajustá-lo para 30, assim. Então precisamos criar um botão. Deixe-me selecionar a ferramenta de retângulo, clique e arraste para criar um retângulo como este. Novamente, está dentro dos nossos antecedentes. Vou movê-lo para fora. Para evitar que esse problema aconteça de novo e de novo, vou bloquear este grupo. Vamos selecionar BG e clicar neste ícone de cadeado. Para este botão, eu vou definir a largura para 200, como este e a altura 254. Vamos mantê-lo como está. Então eu vou fazer isso arredondado. Vamos definir para 20. Por último, mas não menos importante, precisamos dar uma cor. Vou escolher o escuro secundário. Como pode ver, não temos um bom contraste aqui. Mais tarde, podemos modificar nosso plano de fundo um pouco, mas por enquanto vamos manter essa cor como está. Então, para este botão, precisamos de um texto, então eu vou pressionar T e deixe-me escrever, Registrar Agora. Bastante bom. Vou torná-lo branco. Para este botão, vou escolher o estilo de texto da legenda como este. Amplie, certifique-se de alinhá-los verticalmente e horizontalmente. Até agora tão bom, mas para este botão, eu vou adicionar um ícone a ele. Um ícone de seta para a direita que mostra os usuários se eles clicarem neste botão, eles vão avançar. Na pasta de ativos, vou abrir ícones e você tem arrow-right.SVG. Arraste e solte aqui. Lá vamos nós. Vou movê-lo para cima na lista de camadas assim. Vou selecionar este ícone e manter pressionada a tecla Alt e vamos ver o que é o preenchimento entre essa camada de texto e esse ícone. Como você pode ver, está definido para quatro, eu vou definir para 10. Vou movê-lo para o lado direito, depois selecioná-los, agrupá-los, apertar o comando G ou Control G, selecionar o retângulo e alinhá-los ao centro horizontal e também verticalmente. Agora eu vou selecionar este grupo e nosso grupo retângulo, em seguida, mais uma vez e nomeá-lo botão Registrar. Bastante bom. Qual é a margem máxima desta margem? A margem superior é definida como 18. Vou configurá-lo para 30 pixels como este. Acho que é uma boa ideia diminuir um pouco a altura da linha destas manchetes. Por padrão, definimos para 150 por cento, mas acho que é demais, já que esse tamanho de fonte é tão grande. Podemos separá-lo de seu estilo e podemos reduzi-lo para 130 por cento assim. Agora parece muito melhor. Certifique-se de modificar a margem para obter 30 pixels entre esses elementos. Perfeito. Como eu mencionei antes, não temos um bom contraste para esses botões, então podemos precisar modificar nosso plano de fundo um pouco para obter um resultado melhor. Vou em frente e abrir esse grupo de fundo que bloqueamos. Vou desbloqueá-lo e vamos selecionar estas cores secundárias escuras. Este é o vetor 1. No meu caso, eu vou movê-lo um pouco para baixo e movê-lo para o lado esquerdo para obter algo assim. Este é o resultado que eu estava procurando. Perfeito. Até agora, tudo bem. Agora que criamos nosso conteúdo de texto para nossa seção de heróis, é hora de focar no lado direito. Uma vez que esta página de destino é para um aplicativo móvel, digamos que o aplicativo móvel bancário. Eu já projetei uma tela móvel simples e você tê-lo na pasta de ativos, imagens, seção de herói, e aqui você tem telefone e algumas formas. Se você arrastá-lo e soltá-lo em seu projeto, você pode ver a tela. Vou fazer zoom. É uma tela simples que eu já projetei. Uma vez que esta seção não é sobre design de aplicativos móveis, eu preparo para você com antecedência, que você possa colocar qualquer imagem que quiser no lado direito. Perfeito. Agora eu vou movê-lo um pouco para cima. Acho que aqui, parece bom. Deixe-me mostrar minha grade de layout. Vou me certificar de que está alinhado com minha grade de layout muito bom. Como você pode ver, já parece bom. Mas, a fim de torná-lo mais interessante, eu quero adicionar algumas formas 3D a esta página de destino e você tem acesso a essas formas 3D que eu já preparei. Se você abrir a seção de heróis, na pasta de ativos, imagens, seção de herói, você pode ver que eu preparei quatro formas diferentes para você. Eu vou selecionar a forma 1 e arrastar e soltá-lo no meu projeto assim, então eu movê-lo para cima e colocá-lo aqui. Parece muito bom. Deixe-me mover esta fonte um pouco para baixo. Parece muito melhor aqui. Também me deixe arrastar e soltar a segunda forma aqui. Eu vou colocá-lo bem ali. Você pode modificar as cores facilmente, uma vez que eles são vetores e também forma 3 Eu vou colocá-lo bem ali. Mas para este, a fim de criar o efeito de profundidade, eu vou adicionar um efeito de borrão a ele. Eu vou adicionar o efeito a ele e, em seguida, eu vou mudá-lo para camada de borrão e aumentar a quantidade de desfoque como este. Usando esta técnica você pode criar esses efeitos de profundidade de campo, e parece muito melhor, fantástico. Por último, mas não menos importante, vamos arrastar e soltar a forma 4 e colocá-lo aqui. Agora eu acho que é uma boa idéia selecionar todos esses elementos no lado esquerdo e movê-los um pouco para baixo. Como você pode ver, eu tenho muito espaço em branco aqui. Por espaço em branco, não me refiro à cor branca como este fundo aqui. Espaço em branco ou espaço negativo é o espaço entre seus elementos. É tão importante ter espaço em branco suficiente em seu design para que seu design seja breve. Um dos erros que vejo a maioria dos iniciantes cometer, é que eles não têm espaço em branco suficiente. Se você tentar mover este rumo para baixo assim e mover este padrão para cima, como você pode ver, seu design não pode respirar. Ou, por exemplo, se você selecionar todos eles e movê-los para o lado direito assim, você pode ver que você não tem espaço em branco suficiente aqui. Você vai modificar seu design até que esteja satisfeito com o espaçamento. Deixe-me movê-lo um pouco para baixo, muito bem. Nossa seção de heróis está pronta. Consegues ver como é bonito? Deixe-me selecionar minha prancheta e visualizá-la. É incrível. Espero que goste. Muito bem pessoal, espero que tenham gostado deste vídeo e vejo-vos no próximo. 102. Seção de característica - cartão de crédito: Ei, bem-vindo de volta. Neste vídeo, vamos começar a projetar nossa primeira seção de recursos, que é a seção de cartão de crédito. Primeiro de tudo, deixe-me dar uma olhada no nosso wireframe. Como você pode ver na primeira seção de recursos, você terá um cartão de crédito no lado direito e um título e uma legenda. Sem mais delongas, vamos começar. Primeiro, vou mostrar minha grade de layout. Vou pressionar Control G no teclado e agora minhas grades de layout estão visíveis. Do lado esquerdo, precisamos ter um título e um subtítulo. Eu vou criar uma camada de texto como esta, e eu vou mudar o estilo de texto para H2 e aqui deixe-me escrever, um cartão para todos os seus pagamentos. Eu vou movê-lo para o lado esquerdo e deixe-me diminuir sua largura para 366, então ele cobre quatro de nossas colunas assim. Então, o que eu vou fazer é mudar sua cor, então eu vou escolher essa cor primária assim. Eu vou duplicá-lo, movê-lo para baixo e aqui nós precisamos ter uma descrição. Para esta descrição, eu vou mudar o estilo do texto para Body Main, assim, movê-lo um pouco para baixo e eu já preparei um texto, então eu vou copiá-lo e colá-lo da minha área de transferência. Lá vamos nós. Como você pode ver, a descrição vai ser esta aqui. Receba 3% de volta em tudo o que comprar com o cartão Draft. Registe-se hoje e desfrute de todos os aspectos do seu negócio. É legal, não é? Agora vamos mudar a cor. Não preciso mais da cor primária, vou precisar da luz secundária, assim. Vou selecionar esta descrição e manter pressionada a tecla Option ou Alt no meu teclado e vou passar o mouse sobre o meu título para ver a margem, mas eu vou fazer com que 30 pixels, então eu vou usar as teclas de seta no meu para movê-lo um pouco para baixo. Lá vamos nós, agora temos 30 pixels e parece muito bom. Está tudo fixe. Agora podemos ir em frente e criar nosso cartão de crédito no lado direito. Para fazer isso, vou precisar de um retângulo. Deixe-me clicar em Retângulo, clique e arraste para desenhar um retângulo aqui e, como você pode ver, a largura é definida para 466 pixels e cobre cinco colunas, e a altura vai ser 268 pixels como este. Eu acho que é legal, e deixe-me aumentar o raio do canto para 24, assim. Eu vou esconder minhas grades de layout por agora porque eu não preciso disso. Vou pressionar Control G no meu teclado. O que precisamos para um cartão de crédito? Precisamos de um nome no topo, precisamos do número do cartão de crédito, precisamos do logotipo do emissor do cartão de crédito, e basicamente isso é tudo. Primeiro de tudo, eu vou mudar sua cor para o nosso escuro secundário, assim e então eu vou adicionar formas simples a ele, a fim de criar um fundo tão grande para o nosso cartão de crédito. Para fazer isso, vou selecionar a ferramenta Estrela assim, manter pressionada a tecla Shift, clicar e arrastar assim, e como você pode ver, temos uma estrela, mas o que eu vou fazer é mudar sua contagem de 5 para 7 para obter algo assim e depois disso eu vou aumentar o raio do canto assim. Você pode manter pressionada a tecla Shift no teclado e clicar neste pequeno círculo na parte superior e mover o mouse para baixo. Então eu vou mudar a proporção. Como podem ver aqui, temos três círculos diferentes. O primeiro é o raio do canto, o segundo é a proporção entre as bordas e o último é a contagem. Nossa contagem já está definida, no entanto, vou mudar a proporção. Vou manter pressionada a tecla Shift, clicar e arrastar. Vou aumentá-lo para cerca de 74 ou 75 como este e então vou aumentar o raio do canto um pouco para suavizar esses cantos. Você pode brincar com esses números e valores para obter a forma que você está procurando, mas eu acho que é uma forma legal para começar. Se você não estiver satisfeito com a aparência desta forma, você pode facilmente modificar esses valores e criar sua própria forma e isso é o que eu quero que você faça. Não basta copiar e colar o que eu faço, certifique-se de criar sua própria versão e usar sua própria criatividade. É assim que você se tornará um bom designer. Agora vou mudar sua cor para um roxo claro. Mas eu não quero usar nossos sinais de cores, eu vou definir a cor para CAC7FF, lá vamos nós. É a cor que eu estava procurando. Vou movê-lo um pouco para cima. Como podem ver, esta estrela está fora deste cartão de crédito, o que é um problema por enquanto, mas precisamos mascará-la de alguma forma. Se eu selecionar ambos, se eu pressionar a tecla Shift e selecionar ambos e clicar em Máscara, nosso retângulo será desaparecido. Vamos tentar, lá vamos nós. Para evitar isso, poderíamos duplicar nosso retângulo. Vou selecionar o retângulo, vou duplicá-lo, Comando D ou Controle D e como você pode ver agora eu tenho dois retângulos. Vou selecionar o topo e manter pressionada a tecla Shift e selecionar minha estrela e agora vou clicar em Máscara. Lá vamos nós. Aqui nós usamos este retângulo para mascarar nossa estrela, e este retângulo permanece como nossos limites de cartão de crédito como este. Deixe-me selecionar esta estrela e movê-la assim. Muito bom. Vou torná-lo um pouco maior. Então eu vou duplicá-lo, movê-lo para o lado direito e também vou movê-lo para baixo, como você pode ver, está acima da nossa primeira forma. Vou movê-lo para baixo. Nada mudou porque ambos usam a mesma cor. Eu vou selecionar minha segunda forma, que agora está abaixo da minha primeira forma e eu vou dar-lhe um código de cor de 9A94FF como este, muito bom. Vou movê-lo para o lado direito. O que mais precisamos? Vou selecionar minha primeira forma novamente, duplicá-la, movê-la para baixo assim, e deixe-me escalá-la. Eu vou pressionar K no meu teclado e manter pressionada a tecla Shift, clicar e arrastar assim, movê-lo para baixo e agora eu vou definir sua cor para meu escuro secundário, algo assim. Finalmente, vou dar-lhe uma cor de acento também. O que eu vou fazer é duplicar esta última forma que acabamos de criar Command D ou Control D e também vou selecionar a minha primeira forma e duplicá-la também. Então eu vou selecionar esta estrela 4 no meu caso, se você der uma olhada na lista de camadas no lado esquerdo, e eu vou mudar sua cor para acentuar assim. No entanto, eu vou mascará-lo usando este Star 5 que nós apenas duplicado então o que eu vou fazer é selecionar ambos para Star 5 este um, mantenha pressionada a tecla Shift e clique sobre esta estrela 4 e então eu vou clicar em Máscara, lá nós Vá. Acabamos de criar uma nova máscara e parece ótimo. No entanto, vou modificar a posição das minhas formas um pouco para que pareça melhor. Vou selecionar esta Estrela 2, movê-lo para baixo assim para cobrir o lado direito do meu cartão de crédito e também vou selecionar outras formas, Grupo Máscara, Estrela 1 e Estrela 3, e movê-los para o lado esquerdo, como este . Nosso cartão de crédito parece ótimo agora, então criamos um plano de fundo simples usando formas simples. Agora precisamos adicionar os detalhes. Como eu mencionei antes, para esta corrente de crédito, precisamos de um nome no topo, então eu vou selecionar a ferramenta de texto e criar uma camada de texto e vamos escrever um nome aleatório como Ronald Richards, assim. Vou selecioná-lo, e na lista de camadas, como você pode ver, está abaixo do nosso cartão de crédito. Eu vou movê-lo para cima assim e deixe-me mudar o estilo do texto para H4, assim e eu vou definir a cor para branco. Agora o que eu vou fazer é selecionar todas as camadas do nosso cartão de crédito que é este grupo de máscaras e este retângulo. É tão importante que este Rectângulo 48 seja os limites do seu cartão de crédito, então você precisa ter certeza de selecionar isso também. Comando G ou Controle G para criar um grupo e eu vou chamá-lo de cartão de crédito. Agora posso ampliar. Vamos verificar o estofamento. Para esta camada de texto, vou definir um preenchimento superior de 40 pixels e esquerdo. Vou movê-lo para o lado direito e movê-lo para baixo assim. Lá vamos nós. Agora eu vou duplicá-lo, movê-lo para baixo e aqui nós precisamos ter o número do cartão de crédito. Vamos escrever algo como este espaço 4242 mantenha pressionada a tecla Shift e pressione oito, 1, 2, 3, 4 para criar este espaço de estrelas, novamente, 1, 2, 3, 4 espaço 2456, algo assim. Para esta camada de texto, eu vou mudar o estilo de texto para Principal, e ele vai ter 40 pixels de preenchimento esquerdo e um preenchimento inferior de 40 pixels como este. Por último, mas não menos importante, precisamos criar um logotipo. Você pode facilmente ir em frente e baixar, por exemplo, o logotipo do cartão Visa ou o logotipo MasterCard. No entanto, precisamos criar um logotipo MasterCard simplesmente por nós mesmos porque ele vai ser exclusivo para o nosso design. Como sabemos, o logotipo do MasterCard é dois círculos simples combinados juntos. O que vou fazer, vou selecionar a elipse, manter pressionada a tecla Shift, clicar e arrastar para desenhar um círculo. Eu vou definir a largura e a altura para 35 como este. Vamos torná-lo branco, e agora eu vou duplicá-lo, movê-lo para o lado direito e na lista da camada, mover esta nova forma, que é o círculo certo para baixo e colocá-lo abaixo do nosso primeiro círculo. Em seguida, selecione o segundo e diminua a opacidade de 100 por cento para 75 por cento, assim. Vou movê-lo um pouco para o lado esquerdo e lá vamos nós. Eu vou agrupá-los, Comando G ou Controle G, movê-los para o lado direito, seu preenchimento direito vai ser 40 e seu preenchimento inferior vai ser 40 também. Vou diminuir um pouco, por isso parece fantástico. Poderíamos, naturalmente, modificar um pouco o nosso fundo para torná-lo ainda melhor. Vou selecionar minhas formas, este Grupo de Máscaras, este Grupo de Máscaras, mantenha pressionada a tecla Shift e Control no teclado ou a tecla Shift e Command e selecione Star 1 e Star 3 e mova-as para o lado direito um pouco e também para baixo. Agora acho que parece melhor. Nosso cartão de crédito está pronto. Vou selecionar todas as camadas. Mais uma vez, agrupe e vou chamar de cartão de crédito. A última coisa que podemos fazer é adicionar um pouco de sombra a ele. Vou em frente e adicionar efeitos a este cartão. Eu vou abrir as configurações de efeitos e para sua cor, eu vou usar o conta-gotas e escolher essa cor escura secundária como esta e eu vou diminuir a opacidade para 15 por cento e, finalmente, vamos mudar a quantidade de desfoque para 100 e o Y para 50. Lá vamos nós. Acabamos de criar uma grande sombra para este cartão de crédito. Parece incrível. Eu acho que a altura da linha deste título no lado esquerdo é um pouco demais. O que eu vou fazer é selecionar este título e eu vou separá-lo de seu estilo e então eu vou diminuir a altura da linha de 150 por cento para 120 por cento assim. Vou movê-lo para baixo para obter uma margem inferior de 30 pixels. Vou manter pressionada a tecla Shift e selecionar minha descrição, agrupá-los, e vou nomeá-la Feature 1 e vamos manter pressionada a tecla Shift e selecionar nosso cartão de crédito, alinhá-los verticalmente. Certo pessoal, agora vamos selecionar esses dois grupos, agrupá-los, Controle G ou Comando G e chamá-lo de seção Feature 1 e sua margem superior será 260 pixels. Vou movê-lo para baixo assim. Muito obrigado por assistir este vídeo. Espero que tenha gostado, e te vejo na próxima. 103. Seção de recursos - Statistics: Ei, bem-vindo de volta. Neste vídeo, vamos começar a projetar nossa segunda seção de recursos, logo abaixo desta seção de cartão de crédito. Primeiro de tudo, deixe-me dar uma olhada no nosso quadro de arame e ver o que precisamos projetar. Como você pode ver para a nossa segunda seção de recursos, no lado esquerdo, precisamos ter algumas cartas, duas cartas pequenas na parte superior e uma carta grande na parte inferior. No lado direito, precisamos ter um cabeçalho, uma descrição e também um botão. O que precisamos fazer é selecionar o título e descrição que criamos para nossa seção do recurso 1, então eu vou clicar duas vezes sobre isso. Como você pode ver na lista de camadas, recurso 1 está selecionado, vou copiá-lo, então pressione “Command C” ou “Control C” no seu teclado e eu vou colá-lo. Certifique-se de que esta nova camada que acabamos de colar está fora desta feição 1 seção. Se estiver dentro assim, certifique-se de movê-lo para fora, e, em seguida, usando minha tecla de seta, eu posso movê-lo para baixo assim. Agora, deixe-me pressionar “Control G” no meu teclado, e se você não conhece esses atalhos, você pode facilmente ir para ícone de ponto de interrogação no canto inferior direito você pode clicar sobre isso, e há uma opção chamada “Atalhos de Teclado”. Vou clicar nisso. Desde agora eu estou usando macOS ele me mostra apenas os atalhos do Mac. Mas se você estiver usando o Windows, eles podem ser diferentes. Se eu passar para “Ver” aqui você pode ver para grades de layout, está escrito Controle G, e você pode verificar todos os outros atalhos aqui. Vou fechá-la. Agora deixe-me mover esta camada para o lado direito aqui, assim. Deixe-me colocar bem ali. Perfeito. Como você pode ver, ele cobre quatro colunas, então eu vou renomeá-lo recurso 2. Se você clicar duas vezes em seu nome, você pode renomeá-lo facilmente. Finalmente, precisamos modificar o conteúdo. Vou copiar e colar o texto que já preparei da minha área de transferência. Para o título, vou escrever, gerir as suas finanças como um profissional num instante. Deixe-me mover esta descrição para baixo para obter uma margem superior de 30 pixels como esta. Para a descrição, vou copiar novamente e colar a descrição da minha área de transferência, e lá vamos nós. A descrição é assim. Nós rascunho contabilidade, banca e faturas estão todos em um só lugar. Você sempre saberá onde está. Logo abaixo disso, precisamos adicionar um botão, um botão aprender mais. O que eu vou fazer é selecionar esses botões “Registrar Agora”, da nossa seção de heróis, copiá-lo, “Controle C” ou “Comando C” e colá-lo e movê-lo para baixo. Lá vamos nós. Vou definir sua margem máxima para 30, para manter tudo consistente. Por último, precisamos de alterar o texto para saber mais. Deixe-me movê-lo para o lado direito para obter um preenchimento direito de 10 pixels. Perfeito. Para que este botão pareça mais interessante, vou adicionar algumas formas a ele. Deixe-me ocultar minhas grades de layout e, em seguida, vou selecionar a ferramenta Caneta. Clique aqui, uma vez, clique aqui e arraste assim para criar uma linha curva. Clique mais uma vez e arraste e, finalmente, conecte seus nós juntos. Agora que o nosso caminho está fechado, podemos dar-lhe um preenchimento. Deixe-me remover o traço e adicionar preenchimento a ele. Perfeito. Então eu vou adicionar um gradiente a este. Eu estou indo para ir e clicar sobre isso, e então eu vou abrir este menu suspenso no topo e mudá-lo de sólido para linear. Agora temos um gradiente linear. Para a primeira cor, eu seleciono isso, eu posso definir o código para 554DDE, para obter este roxo. A segunda cor será a mesma. Vou copiar este código de cor e selecionar a segunda cor e colá-lo aqui assim. Certifique-se de que a opacidade está definida como zero por cento para a nossa segunda cor. Fantástico. Agora, preciso mascarar esta forma. Como posso fazer isso? Primeiro de tudo, deixe-me selecionar o retângulo, este retângulo 47 no meu caso. Então eu vou duplicá-lo, comando D ou Control D e selecionar este novo retângulo que acabamos de criar. Mantenha pressionada a tecla Control ou a tecla Command no teclado e selecione a forma que acabamos de criar. Este, este roxo, como este. Agora que ambos estão selecionados, clique em “Ícone de máscara” na barra de ferramentas. Lá vamos nós. Agora, acabamos de mascarar esta forma e podemos movê-la facilmente assim. Perfeito. No entanto, vou torná-lo um pouco menor. Deixe-me manter pressionada a tecla “Shift” e dimensioná-la para baixo, e eu vou girá-la um pouco. Bastante bom. Fantástico. Agora deixe-me selecionar esta forma, duplicá-la, comando D ou Control D, movê-la para o topo, clique com o botão direito do mouse sobre isso e vire-a verticalmente. Como este. Parece incrível, é muito legal. Por último, mas não menos importante, precisamos modificar a cor desta nova forma. Eu vou mudar o gradiente de cor para F44E77 assim, e o mesmo para a nossa segunda cor como esta. Você pode modificar o gradiente usando este identificador. Perfeito. Deixe-me modificá-lo para a primeira forma também. Bastante fixe. É incrível, não é? Agora que o lado direito da nossa segunda seção está pronto, podemos começar a projetar a seção esquerda. Deixe-me mostrar as grades de layout e precisamos começar a criar nossos cartões. Precisamos de dois cartões pequenos e um cartão grande. Vou selecionar a ferramenta de retângulo na barra de ferramentas, clique e arraste. Agora eu tenho um retângulo. No entanto, eu vou definir sua largura para 223 pixels como este, e é altura para 180 como este. Além disso, vou mudar o raio do canto para 50. Tudo parece ótimo. A próxima coisa que vou fazer é mudar sua cor. Vou mudar para branco. No entanto, como você pode ver, não é visível porque nossa cor de fundo também está definida como branco, o que é um problema. Como podemos consertar isso? Podemos selecionar facilmente a prancheta da página de destino. Então, como você pode ver, o preenchimento é definido como branco e eu vou mudá-lo para a nossa cor neutra assim. Agora, nosso cartão é visível, e cria um belo contraste. No entanto, para torná-lo muito melhor, adicionaremos sombra e traço a ele. Deixe-me adicionar um golpe a ele. Eu vou escolher o sinal de cor do traçado que já preparamos assim, e então deixe-me modificar sua espessura para 0,5. Lá vamos nós. A última coisa que precisamos é de alguma sombra, então eu vou clicar neste ícone mais para adicionar alguns efeitos e deixe-me modificá-lo. Para a Blair, vou definir para 50. Para o Y, eu vou ajustá-lo para 25, então 50 dividido por 2 é igual a 25. Para a cor, eu vou escrever o código de cor 16194F assim. Finalmente, deixe-me diminuir a opacidade para cinco por cento. Lá vamos nós. Está tudo pronto, perfeito. Deixe-me exibir as grades de layout e eu vou adicionar uma camada de texto a ela, e deixe-me escrever o equilíbrio. Ele mostra o saldo do usuário logo abaixo desta camada de texto. Agora vou usar outro estilo de texto. Vamos usar o principal, o corpo principal. Parece muito bom. Eu vou definir seu preenchimento superior para 40, e é acolchoado esquerdo para 40 também. Duplicá-lo, Comando D ou Controle D, movê-lo para baixo, e aqui vamos tentar $5.600. Para esta camada de texto, eu vou usar H3 porque precisamos ter uma boa hierarquia já que essa quantidade, que é o saldo, é mais importante do que o próprio título, precisamos usar uma fonte maior e também negrito. É por isso que uso H3 para isso. Finalmente, vou definir sua cor para o nosso roxo. Lá vamos nós. Deixe-me definir seu preenchimento inferior para 40, e agora parece incrível. O que mais precisamos? Precisamos criar outro cartão ao lado dele para o valor da última transação. No entanto, antes de fazer isso, quero que você pause o vídeo agora e tente criá-lo sozinho. Você não precisa fazer tanto, você só precisa duplicar os elementos que acabamos de criar e apenas modificar o conteúdo. Pausar o vídeo e, quando terminar, você poderá reproduzir o vídeo novamente. Espero que possa fazer isso sozinho, agora é a minha vez. Primeiro de tudo, vou selecionar todos esses elementos. Deixe-me selecioná-los, agrupá-los, e eu vou chamá-lo Balance Card. Lá vamos nós. Agora eu vou duplicá-lo, Comando D ou Controle D, movê-lo para o lado direito, certifique-se de que ele toque sua sexta coluna. Como você pode ver, a margem é definida como 20. Agora vou clicar duas vezes na minha camada de texto e deixe-me alterá-la para Última Transação. Vamos mudar o valor para $230. Bastante bom. Vou diminuir o zoom e parece ótimo. A última coisa que precisamos antes de terminar de projetar nossa segunda seção de recursos é um cartão gráfico. Mas antes disso, certifique-se de renomear este último cartão de transação para manter tudo organizado. Vai ser o cartão da última transação. Então, eu vou selecionar um desses cartões, duplicá-lo, movê-lo para baixo assim, e eu vou renomeá-lo para Gráfico e selecionar essas camadas de texto e removê-los. Não precisamos mais deles. Para o nosso gráfico, precisamos de um cartão grande, então vou torná-lo maior. Sua largura será definida para 466 pixels e sua altura será definida para 246 pixels. Podemos modificá-lo mais tarde se não estivermos satisfeitos com o resultado. Mas, por enquanto, parece ótimo. Deixe-me ampliar. Perfeito. Na verdade, vamos projetar um gráfico de barras simples. Teremos segunda, terça, quarta, quinta, sexta, sábado e domingo, e alguns bares. Deixe-me começar com as camadas de texto. Vou pressionar T no meu teclado e clicar aqui. Vou escrever M-O-N, que significa segunda-feira. Qual estilo de texto é adequado para este? Acho que este pequeno é ótimo. Além disso, vou mudar sua cor para luz secundária. No entanto, temos um problema que é o peso desta camada de texto. O que eu vou fazer é separá-lo de seu estilo e mudar isso é muito ousado. Agora, parece muito, muito melhor. Mova-o um pouco para o lado esquerdo, duplique-o. Mova-o para o lado direito, e deixa-me escrever T-U-E, duplicá-lo. Mova-o para o lado direito e, em seguida, W-E-D. Novamente, duplique-o. Não vamos definir o estofamento por agora porque primeiro vou criar as barras. Mais tarde, lidaremos com o espaçamento. Para cada dia, precisamos ter duas barras próximas uma da outra. Vou selecionar a ferramenta Retângulo, clicar e arrastar assim para criar um retângulo alto e, em seguida, torná-lo completamente arredondado. Você pode configurá-lo como 20 para ter certeza de que ele é arredondado e sua largura será 14. Vou definir o raio do canto para 25 para ter certeza de que está arredondado. Para esta barra, deixe-me definir a altura para algo como 134. É só um número aleatório. Isso não significa nada. Você pode torná-lo mais curto ou mais alto. É totalmente com você. Mas acho que 134 é um bom número. Então eu vou mudar a cor para o nosso primário, duplicar, Controle D ou Comando D, movê-lo para o lado direito e torná-lo mais curto e mudar a cor para Accent. Certifique-se de que você tem um preenchimento de quatro pixels entre eles, como este. Bastante bom. Nosso primeiro dia está pronto. No entanto, vou selecionar ambas as barras. Mantenha pressionada a tecla Shift no teclado e clique em cada um deles para selecionar ambos ao mesmo tempo. Agrupe-os, Controle G ou Comando G, e vamos chamá-lo de Barras. Então eu vou manter pressionada a tecla Shift e selecionar “Monday” e alinhá-los horizontalmente assim. Deixe-me ampliar. O preenchimento inferior será de 10 pixels, então eu vou movê-los para cima por dois pixels e lá vamos nós. Agora vou selecionar as “Barras”, duplicá-las, movê-las para o lado direito, assim e vou modificar a altura deles um pouco. Se você manter pressionada a tecla Command ou Control no teclado e clicar em uma dessas barras, você pode selecionar essa camada específica e modificar facilmente sua altura assim. Vou ajustá-lo para 98. No próximo, eu vou definir para algo como 40. Parece bom. Em seguida, certifique-se de que ela está alinhada com a camada de texto ao centro. Perfeito. Selecione-o, duplique-o, mova-o para o lado direito. Vou modificar a altura deles novamente. Você só precisa repetir este processo uma e outra vez para criar um gráfico de barras muito exclusivo. Você pode ver como é simples criar esses gráficos? Vou alinhá-los, perfeito. Duplicá-lo, movê-lo para o lado direito assim. A última coisa que precisamos fazer é agrupar essas barras com seu nome correspondente. Vou selecioná-los, segunda-feira, agrupá-los, e vou chamá-lo de M-O-N. Vou avançar com este processo para poupar tempo. Agora que todos os grupos estão prontos, posso selecionar todos os grupos, manter pressionada a tecla Shift e selecioná-los um por um. Certifique-se de que todos eles são selecionados e eu posso distribuir um espaço uniforme entre eles. Se você passar para a seção de alinhamento no Inspetor, poderá ver este menu suspenso. Basta clicar neste ícone, “Mais Opções” e clicar em “Distribuir Espaçamento Horizontal”. Lá vamos nós. Agora está definido para 16. Vou ajustá-lo para 20 usando esta alça rosa. Finalmente, eu vou agrupá-los e deixe-me chamá-lo de Gráfico. Lá vamos nós. Por último, mas não menos importante, você precisa alinhar este gráfico com seu cartão gráfico. Vou selecionar este cartão gráfico e este gráfico de barras ao mesmo tempo e alinhá-los horizontalmente e verticalmente. Você também pode agrupá-los e chamá-lo de Cartão Gráfico. Lá vamos nós. Nosso cartão gráfico está pronto. Deixe-me ver o preenchimento de cima. Está definido para 22. Vou ajustá-lo para 20 para manter tudo consistente. Agora, podemos selecionar todas essas cartas e movê-las assim, agrupá-las e chamá-las de Cartas. Além disso, vamos organizar tudo no lado direito. Temos este Grupo Máscara, que inclui estas formas. Mantenha pressionada a tecla Shift e selecione este “Botão Registrar”. Podemos renomeá-lo com certeza, agrupá-los e chamá-lo de “botão Saiba mais”. Em seguida, você pode manter pressionada a tecla Shift e selecionar seus textos. Novamente, agrupe-os e chame-o de “Recurso 2", e você pode alinhá-los verticalmente. Mantenha pressionada a tecla Shift, selecione “Cards” e o grupo “Feature 2" e alinhe-os verticalmente. Lá vamos nós. Nossa seção Feature 2 está pronta. Vou manter pressionada a tecla Shift, selecionar os dois, agrupá-los, e vamos chamá-la de “Recurso 2 - Seção” assim. Bastante bom. Sua margem superior será de 260 pixels. Vou movê-lo para baixo e lá vamos nós. Tudo parece ótimo. Isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo. 104. Seção de recurso - suporte: Olá a todos. Bem-vinda de volta. Neste vídeo, vamos projetar nossa última seção de recursos, que é a seção de suporte. Deixe-me dar uma olhada no arame. Como você pode ver no lado esquerdo, precisamos ter algumas camadas de texto, como de costume, como nossas seções anteriores. Então precisamos ter um título, uma descrição, e além dessas camadas de texto, precisamos ter algumas imagens de perfil, como esta. No lado direito, precisamos projetar bolhas de bate-papo de impressão 3D, ele vai apresentar como a equipe de suporte responde às perguntas do usuário. Primeiro de tudo, precisamos aumentar o tamanho da altura da prancheta da nossa página de aprendizagem, então eu vou selecionar isso e deixe-me aumentar a altura para, digamos 4.000 por enquanto, mais tarde podemos modificá-lo. Eu vou ampliar, e o que eu preciso é de algumas camadas de texto, então eu vou ir em frente e clicar duas vezes sobre este conteúdo do recurso 1, copiá-lo e deixe-me colá-lo aqui. Eu vou mostrar minhas grades de layout, deixe-me colocá-lo para o lado esquerdo assim, e o título vai ser, “Nós apoiamos você em cinco idiomas diferentes.” Vou copiar e colar da minha prancheta assim. Deixe-me mover esta descrição para baixo e certifique-se de que a margem superior está definida como 30, assim, e deixe-me copiar e colar a descrição também. Vai ser, nossa equipe de suporte está aqui para ajudá-lo em cinco idiomas: inglês, francês, espanhol, polonês e alemão. Na parte inferior, precisamos ter algumas imagens de perfil. Para fazer isso, precisamos criar um círculo, então eu vou clicar e arrastar, e eu vou definir a largura e altura para 60 pixels, deixe-me movê-lo para baixo. Para cada círculo, precisamos ter uma imagem. Antes de adicionar a imagem ao nosso círculo, eu vou adicionar um traço a ele, e mudar a espessura de 1-1,5, e modificar a cor para branco, assim. Então eu vou selecionar isso e duplicá-lo, Comando D ou Controle D, movê-lo para o lado direito, mais uma vez, duplicá-lo, e mais duas vezes, lá vamos nós. No total, teremos cinco imagens diferentes. Agora, como podemos adicionar a imagem a esses círculos? Podemos selecionar todos eles e clicar neste menu de hambúrguer no canto superior esquerdo e ir para os plugins, e aqui eu estou indo para ir e clique em Content Reel plugin. Se você ainda não instalou este plugin, certifique-se de clicar em Gerenciar Plugins, e no lado esquerdo você pode ver todos os plugins instalados. Se você não instalou qualquer plugin, você pode facilmente ir para a comunidade, e depois ir para a guia plugins, e a partir daqui você pode encontrar conteúdo Reel e clique no botão Instalar no lado direito. Enquanto esses círculos são selecionados, eu vou ir em frente e executar estes plugin carretel conteúdo. Em seguida, na parte inferior, temos duas opções, Meu conteúdo e Biblioteca de conteúdo. Vou seguir em frente e clicar em Biblioteca de conteúdo e, em seguida, ir para imagens. Aqui você tem muitas bibliotecas, você tem Avatares da Microsoft e algumas outras bibliotecas. Deixe-me escolher Avatares da Microsoft, que inclui imagens masculinas e femininas, e eu vou clicar em Aplicar tudo. Lá vamos nós. Agora temos imagens aleatórias cortadas em nossos círculos, e esse é exatamente o resultado que estávamos procurando. No entanto, se você não estiver satisfeito com as imagens, você pode facilmente clicar em Aplicar tudo novamente para obter o melhor resultado possível. Certifique-se de manter um equilíbrio para que você não obtenha apenas fotos masculinas ou apenas fotos femininas. Claro, depende da finalidade do seu design e da finalidade do produto. Acho que agora temos um bom resultado. Vou fechar o plugin, nossas imagens estão prontas, você pode selecionar todas elas, agrupá-las, Comando G ou Controle G, e vamos chamá-lo de Imagens de Perfil. Bem ao lado dessas imagens, precisamos ter um número, uma camada de texto, então eu vou pressionar T no meu teclado e criar uma nova camada de texto, e eu vou escrever mais 20, e isso indica que há mais 20 pessoas trabalhando no departamento de suporte. Eu vou movê-lo um pouco para cima, certifique-se de que eles estão alinhados verticalmente. Vamos definir seu preenchimento esquerdo para 10, e eu vou escolher um estilo de texto para ele. Eu vou escolher principal e deixe-me mudar a cor, vamos usar nossos estilos de cores, Secundário/Leve. Lá vamos nós. Parece incrível. O lado esquerdo está pronto. E o lado direito? Como mencionei antes, precisamos criar três bolhas de bate-papo diferentes. Precisamos usar a ferramenta de retângulo, eu vou selecionar isso, clique e arraste, assim, certifique-se de definir a largura para 370, e então eu vou modificar o raio do canto, deixe-me alterá-lo para 30. Mas preciso definir o raio do canto deste canto em particular, o canto inferior esquerdo para zero. Para fazer isso, você pode facilmente ir até o inspetor e clicar neste ícone de cantos independentes. Agora você pode modificar o raio do canto de forma independente. Vou definir a parte inferior esquerda para zero, lá vamos nós, e finalmente, podemos mudar a cor para branco. Agora precisamos adicionar uma imagem de perfil ao lado deste balão de bate-papo, então precisamos criar um círculo, como este, e eu vou torná-lo menor, então vamos definir a largura e a altura para 55 pixels. Mova-o para baixo e certifique-se de que está alinhado com o seu balão de chat e que o preenchimento direito será definido para 20 pixels. Vamos em frente e executar o nosso plugin Reel de conteúdo. Mais uma vez, vá para imagens da biblioteca de conteúdo e escolha Avatares novamente. Mas desta vez eu vou escolher uma fêmea, porque eu tenho certeza que essa pessoa precisa ser uma fêmea. Então deixe-me escolher este, muito bem. Vou fechá-la e precisamos adicionar o nome dela e também o carimbo de data/hora. Vou escrever, por exemplo, Claire, 12:35, e para isso, vou mudar o estilo do texto para legenda. Certifique-se de que ele está alinhado com nossa bolha de bate-papo e seu preenchimento superior será de 10 pixels. Finalmente, deixe-me mudar a cor para Secundário/Leve, fantástico. A última coisa que precisamos fazer é adicionar a mensagem, então eu vou adicionar uma camada de texto aqui e deixe-me escrever, Oi Mike. Como posso ajudá-lo? Uma pergunta típica de apoio, é claro. Vou mudar o estilo do texto pelo principal assim. Certifique-se de que ele está alinhado com seu balão de bate-papo verticalmente e o preenchimento esquerdo será 40 pixels, como este. Como você pode ver, o preenchimento superior é definido como 30 e o preenchimento inferior é definido como 29. A fim de torná-lo 30, eu vou escolher nosso retângulo ou balão de bate-papo, e vamos definir a altura para 90 em vez de 89. Agora parece ótimo. Você precisa se certificar de alinhar sua imagem de perfil com o retângulo. Mais uma vez, também essas camada de texto deve ser movido por um pixel para obter o preenchimento superior de 10 pixels. Por último, mas não menos importante, precisamos mudar sua cor para Secundário/Leve, fantástico. Nossa primeira bolha de bate-papo está pronta. Agora vamos selecionar essas duas camadas primeiro, assim. Eu vou clicar e arrastar, e como você pode ver, nosso retângulo e esta pergunta é selecionado, agrupá-los e vamos chamá-lo de balão de bate-papo. Em seguida, selecione este balão de bate-papo com outros elementos. Mantenha pressionada a tecla Shift e clique nela. Agrupe-os, e agora vamos escrever a Mensagem 1. Agora eu vou duplicá-lo, Comando D ou Controle D, movê-lo para baixo assim. A próxima mensagem será a mensagem dos nossos usuários, e a direção desses balões de bate-papo deve ser alterada. O que eu vou fazer? Primeiro, eu vou selecionar este retângulo, então certifique-se de que seu retângulo está selecionado, não o grupo de balões de bate-papo, clique com o botão direito do mouse sobre isso, e vire-o horizontalmente, para que sua direção seja alterada. Então eu vou selecionar este retângulo mais uma vez e modificar sua cor. Para este, eu vou configurá-lo para Secundário/Luz e selecionar a pergunta que é esta camada de texto, separá-lo de seu estilo, e defini-lo para branco. Então eu vou clicar duas vezes nesta camada de texto, movê-la para o lado direito e certificar-se de que ela está alinhada com nosso balão de bate-papo, e finalmente, precisamos mover essa imagem de perfil para o lado direito. Precisamos de um preenchimento direito de 20 pixels, fantástico. Agora podemos mover nossa mensagem para o grupo para o lado esquerdo. Vou mostrar minhas grades de layout assim, muito bem. Não se esqueça de mudar o nome e a hora, eu vou escrever para Mike, e para o momento, vamos definir para 12:36. Alinhe-o, você pode alinhá-lo ao lado direito aqui também, e a camada de texto vai ser alterada para, meu cartão de crédito é roubado, assim. Por último, mas não menos importante, precisamos mudar nossa imagem. Vamos selecionar este círculo, certifique-se de que esta camada está selecionada e executar o plugin Reel de conteúdo, mais uma vez, vá para Biblioteca de conteúdo, vá para Imagens. Mas desta vez vou usar outra biblioteca, por exemplo, esta. Não importa qual deles, é com você. Mas deixe-me escolher, por exemplo, este. Acho que está ótimo, perfeito. Nossa Mensagem 2 também está pronta. Precisamos ter mais uma mensagem, e agora é tão fácil porque precisamos apenas selecionar Mensagem 1, duplicá-la, Comando D ou Controle D, movê-la para baixo assim. Certifique-se de definir o espaçamento corretamente. A margem superior desta Mensagem 2 será de 40 pixels como esta para esta também. Porque a consistência é a chave no design. Vamos escrever, não, não há problema. Nós cuidaremos disso. Você também pode adicionar um emoji a ele, mas nós vamos deixá-lo como está. Deixe-me diminuir sua largura para 258, assim, movê-lo para cima, e também precisamos ampliar essa bolha de bate-papo porque agora temos duas linhas. Certifique-se de selecionar este retângulo, e eu vou mudar a altura de 90 para 110 para ter algum espaço aqui. Mais uma vez, alinhe-os, certifique-se de mover sua camada de texto para baixo e também alinhar esta imagem de perfil, fantástico, tudo parece ótimo. Agora vamos selecionar todas essas mensagens, agrupá-las, e vamos chamá-la de Mensagens. Vou selecionar todo o conteúdo do lado esquerdo, agrupá-los, e vamos escrever Feature 3, manter pressionada a tecla Shift e selecionar as Mensagens, alinhá-las verticalmente agrupá-las, e vamos chamá-la de Seção Feature 3. Estamos quase terminando, no entanto, deixe-me mover esta Seção 3 para baixo para obter uma margem máxima de 260 pixels. Como podem ver aqui, temos espaços vazios. Para preencher esses espaços, poderíamos adicionar algumas formas simples ao nosso plano de fundo. Não precisa ser muito complicado, por exemplo, podemos adicionar alguns círculos. Deixe-me escolher a ferramenta Elipse, mantenha pressionada a tecla Shift, clique e arraste para criar um círculo, e deixe-me alterar a largura e a altura para 16 pixels, como este. Então vamos escolher nossa cor Secundária/Luz, separá-la de seu estilo e diminuir a opacidade para 10% para obter esse círculo de luz. Então eu vou duplicá-lo para o lado direito, mais uma vez, duplicá-lo, Command U ou Control D, e repetir este processo até você obter seis círculos seguidos, selecionar todos eles, agrupá-los, duplicá-lo, movê-lo para baixo, certifique-se de que o preenchimento entre eles e o preenchimento entre essas linhas é o mesmo, então, neste caso, ele está definido para seis pixels. Mais uma vez, eu vou duplicá-lo, movê-lo para baixo, e repetir este processo até você obter seis linhas como esta. Então, eu vou selecionar todos esses grupos, mais uma vez agrupá-los, vamos chamá-lo de BG. Vou movê-lo um pouco para o lado esquerdo, algo assim. Eu acho que parece bom, vamos duplicá-lo, movê-lo para o lado direito para baixo e certifique-se de mover esta camada para baixo e colocá-lo abaixo de sua seção Feature 3. Aqui, lá vamos nós. Acho que agora está ótimo. Tudo bem, pessoal, isso é tudo por este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 105. Planos de assinatura: Ei, bem-vindo de volta. Neste vídeo, vamos começar a desenhar nossa seção de plano de associação. Vamos dar uma olhada no nosso wireframe. Como você pode ver nesta seção, precisamos ter um título, uma legenda e duas cartas altas. Cada cartão terá algumas informações sobre essa associação específica, como nome, preço, uma chamada à ação ou, digamos, botão de registro, o cartão de crédito e os benefícios dessa associação em particular. Primeiro de tudo, precisamos criar uma camada de texto para o nosso título. Vou pressionar T no meu teclado e clicar aqui e vamos escrever um serviço excepcional pelo preço certo. Eu vou selecionar esta camada de texto e deixe-me escolher nosso H3 ou cabeçalho três como este e eu vou alinhá-lo ao centro horizontalmente. Perfeito. E quanto à cor? Para a cor que eu vou usar duas cores para esta camada de texto. Vou selecionar pelo preço certo e escolher nossa cor de acento para isso e o resto vai ter nossa cor primária. Perfeito. Parece bom. Então eu vou duplicar. Comando V ou Controle V movê-lo para baixo. Para o subtítulo, eu vou escrever começar com o nosso plano gratuito e mudar para premium à medida que você crescer. Como este. Para estes camada de texto, eu vou escolher pela introdução como este. Para a cor, podemos escolher escuro secundário e certifique-se de alinhá-lo horizontalmente ao centro e sua margem superior será de 20 pixels como esta. Perfeito. Agora precisamos criar nossos cartões, mas antes disso, precisamos aumentar a altura de nossa página de aprendizado. Certifique-se de selecionar seu quadro de arte e aumentá-lo para 6100 como este. Temos espaço suficiente para trabalhar. Vou fazer zoom. Primeiro, vamos desenhar um retângulo para o nosso cartão assim e eu vou definir a largura para 430 e a altura para 1131, assim. Eu já calculei porque eu já projetei este projeto então eu sei a altura que eu vou precisar, mas se você quiser projetar um projeto e você não sabe como calculá-lo, você só precisa modificar essas quantidades várias vezes como seu projeto continua. Por exemplo, suponha que você tenha algo assim e adicione mais conteúdo a ele e você precisa de mais espaço, então você aumentará a altura novamente e novamente até obter o tamanho de altura que você precisa. Para estes cartões, vamos usar o mesmo estilo que usamos para estes cartões. fim de copiar o estilo, eu vou manter pressionada a tecla Control no meu teclado ou tecla de comando e clicar sobre estes carros para selecionar estes retângulos específicos. Alternativamente, você pode ir para a lista de camadas no lado esquerdo e procurar este retângulo. Em seguida, clique com o botão direito do mouse sobre isso e vá para copiar e colar e copiar propriedades. Vou rolar para baixo, selecionar este retângulo, clicar com o botão direito do mouse sobre isso e colar propriedades e lá vamos nós. Você acabou de copiar e colar todos os estilos que adicionamos aos nossos cartões antes e isso é exatamente o que queremos. Temos o derrame, temos a sombra, tudo parece ótimo. Do que precisamos? Em primeiro lugar, no topo, precisamos do nome. Vou pressionar T no meu teclado e adicionar uma camada de texto e aqui vamos escrever livre. Então eu vou mudar o estilo do texto para três anos no entanto, nós não precisamos que ele seja negrito, então eu vou separá-lo de seu estilo e mudá-lo para regular. Em seguida, certifique-se de que ele está alinhado ao centro do seu cartão. Você precisa manter pressionada a tecla Shift, selecionar essa camada de texto e seu cartão e ir até a seção de alinhamento no inspetor e alinhá-la horizontalmente assim. Agora está exatamente no meio. Seu preenchimento superior vai ser 60 pixels, duplicá-lo, comando D ou Control D, movê-lo para baixo. aqui precisamos escrever o preço. Vou escrever $0/m, que significa por mês. Para este valor $ e zero, eu vou definir o tamanho da fonte para 60 e esta barra e m vão usar o mesmo tamanho de fonte 40. Não precisamos mudar isso. Certifique-se de alinhá-lo com o cartão para o centro assim. Seu preenchimento superior vai ser 50 pixels, assim. O que mais? Depois disso, precisamos ter uma descrição. Vou duplicá-lo, movê-lo para baixo. Vamos definir o alinhamento da nossa camada de textos para o centro. É mais fácil modificá-lo mais tarde e aqui vou escrever, gerenciar seu negócio com uma conta simples e eficiente. Só vou copiar e colar da minha prancheta. Para isso, eu vou escolher pelo principal e sua cor vai ser luz secundária como esta. Você pode definir a largura para 340 e certifique-se de alinhá-la ao centro horizontalmente. Sempre você precisa selecionar sua camada e seu cartão e, em seguida, alinhá-los. Seu preenchimento superior vai ser 30 pixels e até agora tão bom. Após essa descrição, precisamos ter um botão. Vou criar um botão de introdução e vou precisar de um retângulo. Clique e arraste assim. A largura deste retângulo vai ser 170 e a altura, eu vou configurá-lo para algo como 54 pixels. Então eu vou fazer isso arredondado, vamos aumentar o valor do raio do canto para 20 e, finalmente, vamos torná-lo um botão de contorno. Vou remover o preenchimento e adicionar um traço a ele. Vou definir a espessura para 1,5 e a cor vai ser escura secundária como esta. Em seguida, adicione uma camada de texto e vamos escrever, começar. Para estes camada de texto, eu vou usar legenda e também para a cor, eu vou usar escuro secundário. Finalmente, precisamos alinhar esses retângulo com a nossa camada de texto inicial tanto horizontal como verticalmente e agrupá-los Comando G ou Controle G. Vamos chamá-lo começar e eu vou alinhá-lo com o meu cartão horizontalmente. Lá vamos nós. Seu preenchimento superior vai ser 30 pixels. Até agora, tudo bem. O que vem a seguir? Em seguida, precisamos ter nosso cartão de crédito, não precisamos projetá-lo mais uma vez que já o projetamos. Deixe-me selecionar esses cartões de crédito, copiá-lo, rolar para baixo e colá-lo aqui. Vou pressionar K no meu teclado para selecionar a ferramenta de escala e tentar reduzi-la assim. Acho que parece bom. Alinhe ao centro. preenchimento superior vai ser 40 pixels. Logo abaixo destes cartões, precisamos criar dois círculos diferentes para permitir que o usuário escolha entre dois designs diferentes. Vou selecionar a ferramenta Elipse, clique e arraste, e vamos definir a largura e a altura para 30, assim. Teremos dois designs diferentes, a versão escura e a versão light. Para indicar a versão escura, vamos usar duas cores diferentes aqui, nossa cor escura secundária e essa cor roxa clara que usamos para nosso cartão de crédito. Deixe-me ampliar. Vou escolher um retângulo, clicar e arrastar assim para sentir metade do nosso círculo e escolher a nossa cor escura secundária. Certifique-se de selecionar este círculo, duplique-o. Enquanto essa camada duplicada estiver selecionada, mantenha pressionada a tecla Shift e selecione esse retângulo que acabamos de criar e clique em “Máscara” assim. Em seguida, escolha o seu círculo inicial, que é este, e mude sua cor para este roxo claro. Vou escolher o olho lá vamos nós. Nosso grupo de máscaras está pronto. Você precisa se certificar de selecionar ambas as camadas. Certifique-se de selecionar o círculo inicial e o Grupo de Máscaras e agrupá-los. Vamos chamá-lo de escuro, movê-lo para cima, e seu preenchimento superior será de 20 pixels. Duplicá-lo, movê-lo para o lado direito, e agora precisamos modificar a cor, então deixe-me ampliar. Vou selecionar este retângulo escuro e mudar sua cor para este roxo claro, e então selecionar nosso círculo inicial e mudar sua cor para esta cor mais clara no topo. Lá vamos nós. A última coisa que precisamos fazer é colocar um golpe em torno deste círculo escuro. Porque precisamos de alguma forma indicar que esta versão escura está selecionada, e se o usuário clicar nessa luz, esse traçado deve aparecer em torno desse círculo. Primeiro de tudo, deixe-me renomear este grupo para luz, e então eu vou criar outro círculo. Mantenha pressionada a tecla Shift, clique e arraste assim, e coloque-a sob o grupo escuro, remova um preenchimento, adicione um traçado a ele, e precisamos alinhá-lo com nosso círculo interno. Vou torná-lo um pouco menor. Se eu definir para 36 por 36 pixels e manter pressionada a opção ou a tecla Alt no meu teclado, você pode ver que temos um preenchimento de três pixels de todos os lados. Isso é exatamente o que precisamos. Vamos agrupá-los, e vou chamá-lo de veia selecionada. O preenchimento esquerdo deste tema de luz vai ser 10 pixels como este. Bastante bom. Mas eles não estão alinhados ao centro deste cartão. O que precisamos fazer é manter pressionada a tecla Shift e selecionar ambos, assim, agrupá-los, e aqui eu vou chamá-lo de temas, e mantenha pressionada a tecla Shift, clique em nosso cartão de crédito e alinhe-os ao centralizar horizontalmente. Agora eles estão no centro. A próxima seção são os benefícios desta associação. Precisamos ter um ícone no lado esquerdo e uma camada de texto ao lado dele. Abra a pasta de ativos e abra a pasta de ícones, e aqui você tem alguns ícones. Escolha o ícone de verificação e arraste e solte-o em seu projeto. Lá vamos nós. Vou ampliar, vamos pressionar T e criar uma camada de texto. Para o primeiro benefício, eu vou escrever, 10 transferências locais gratuitas, e então eu vou definir o estilo de texto para médio assim. Deixe-me alinhá-lo com o meu ícone de verificação muito rapidamente, e o preenchimento esquerdo vai ser 10 pixels e a cor deve ser secundária escura como este. Agora vamos selecionar os dois. Mantenha pressionada a tecla Shift e clique no ícone de verificação, agrupe-os, e eu vou nomeá-lo benefício. Duplicar, mover para baixo. Aqui para o segundo recurso, eu vou escrever retiradas ATM grátis em dólar até US $250 por mês. Vou copiá-lo e colá-lo da minha área de transferência para economizar algum tempo. Lá vamos nós. No entanto, eu preciso diminuir sua largura de 400 pixels para 316 pixels para obter algo assim. Fantástico. Então eu vou duplicá-lo, movê-lo para baixo e aqui eu vou escrever pagamentos gratuitos para outros rascunhos de contas. Deixe-me colá-lo. Lá vamos nós. Certifique-se de alinhá-los. Mais uma vez duplique-o, mova-o para cá. Vou escrever cartões de débito pré-pagos. Mais uma vez, duplique-o, mova-o para baixo. Aqui vamos escrever cartões visuais. Fantástico. Mais uma vez, duplique-o, mova-o para baixo. Aqui eu vou escrever prioridade 24-7 apoio como este. Precisamos escrever mais dois benefícios. Para este, vou escrever 24 moedas de câmbio. Para o último, vou escrever o acesso multiusuário. Bastante bom. Agora, precisamos definir o espaçamento entre eles. Vou manter pressionada a tecla Shift e selecioná-los todos assim, e distribuir o espaçamento vertical. Vou definir o preenchimento entre eles para 20 pixels como este. Agrupe-os e chame-o de benefícios. Selecione seu retângulo, que é seu cartão, alinhe-o ao centro e selecione seu grupo de benefícios, mova-o para cima. Seu preenchimento superior vai ser 40 pixels como este, e seu preenchimento inferior vai ser 40 pixels também. Como eu mencionei antes, você pode modificar a altura sempre que quiser. Como você pode ver, agora está definido para 41. Se eu definir a altura para 1126, eu posso obter 40 pixels de preenchimento do fundo assim. Até agora, tudo bem. A última coisa que precisamos fazer é desativar esses três últimos benefícios. Porque essa associação gratuita terá todos esses recursos, exceto esses três últimos benefícios. Eles estão disponíveis na assinatura premium. Eu só preciso mudar a cor deles para um cinza claro. Vou selecionar esta camada de texto, separá-la de seu estilo e mudar o código de cor para B7, B7, B7, B7 assim. Vou copiar esses códigos de cores e selecionar meu ícone de verificação, e na seção de cores de seleção, vou colá-lo. Lá vamos nós. Vou repetir o mesmo processo para outros benefícios como este. Estamos feitos com o nosso cartão livre, mas uma coisa que eu noto é que nós definimos o preenchimento superior para 60 pixels, então precisa ter um preenchimento inferior de 60 pixels também. No entanto, como você pode ver, está definido para 40. O que eu vou fazer é selecionar este retângulo e eu vou ir em frente e apenas adicionar mais 20 pixels para a altura. O que posso fazer é escrever mais 20 assim. Agora, o preenchimento inferior está ajustado para 60. E o cartão premium? Primeiro, precisamos selecionar todos esses elementos como este. Clique e arraste para selecionar todos eles, agrupá-los, e aqui vamos escrever plano livre. Em seguida, duplique-o, mova-o para o lado direito. O preenchimento entre eles vai ser 30 pixels como este. Precisamos modificar algo aqui. Primeiro, precisamos modificar o nome do grupo antes de esquecer que, Vamos modificá-lo para plano premium. Então precisamos modificar o nome, obviamente. Vamos mudar de graça para premium. Mas antes disso, certifique-se de alinhar a camada de texto ao centro para que ela permaneça no centro premium. O preço vai ser de 8 dólares. A descrição precisa ser alterada. Vou mudá-lo para um suporte prioritário e acesso multiusuário para maximizar sua produtividade. Deixe-me colá-lo da minha prancheta. Lá vamos nós. Vou rolar para baixo, e agora precisamos disponibilizar essas três últimas opções. O que devemos fazer é selecionar todas essas camadas de texto, manter pressionada a tecla Shift e clicar em todas elas e escolher escuro secundário. Em seguida, selecione o ícone de verificação e altere a cor para a cor principal. Bastante bom. É tão simples, não é? O cartão premium também está pronto. Estamos quase terminando, mas precisamos lembrar de alinhar nossas cartas ao centro. Vamos selecionar os dois, agrupá-los, e aqui vou chamá-lo de planos. Basta ir até a seção de alinhamento e alinhá-la horizontalmente ao centro. Fantástico. Sua margem superior será de 120 pixels. Isso é tudo. Você pode ver como eles são lindos? Espero que tenha gostado deste vídeo e te vejo no próximo. 106. Seção de perguntas: Ei, bem-vindo de volta. Neste vídeo, vamos projetar a seção de perguntas freqüentes. Para Esta seção, Precisamos ter, novamente um título, uma legenda, e alguns cartões. Estes cartões serão abertos e fechados dentro de um cartão em vigor. Sem mais delongas, vamos começar. Primeiro de tudo, vou em frente e selecionar Estas duas camadas de texto, duplicá-las, Control D ou Command D. Mova-as para baixo assim. O preenchimento superior vai ser definido para 260 pixels como este. O título será alterado para perguntas frequentes. Vou mudar Esta seção roxa para Frequentemente e a seção direita para Perguntas feitas. Deixe-me mudar a cor para a nossa cor de acento como esta, e alinhá-la ao centro. O subtítulo vai ser alterado para outra coisa. Vou copiar e colar da minha prancheta. Como você pode ver, é um parágrafo de linha. Eu vou diminuir a largura para 600 pixels e alinhar o texto para o centro e também alinhar uma camada para o centro horizontalmente como Este. A última coisa que precisamos mudar aqui é a cor. Vou mudar a cor para luz secundária em vez de escura para esta descrição. A descrição como você pode ver é se você não tem certeza se rascunho é adequado para você ou não, não se preocupe. Estamos aqui para explicar tudo o que você pode querer saber. Logo abaixo disso, precisamos ter nossos cartões de perguntas. Para o nosso cartão de perguntas, Precisamos criar um retângulo. Clique e arraste como Este. Vou mostrar minhas grades de layout. A segunda coluna do lado esquerdo e a segunda coluna do lado direito, deixe-me ampliar. A largura é definida como 948 e a altura, eu vou alterá-la para 96 pixels. Então, como você pode imaginar, Precisamos usar o mesmo estilo que usamos para esses cartões. Vou selecionar Este “Retângulo” enquanto estiver selecionado, clique com o botão direito do mouse sobre isso e “Copiar Propriedades”. Selecione Este “Retângulo”, clique com o botão direito nele e “Colar Propriedades”. Lá vamos nós. A única coisa que precisamos mudar é a quantidade do raio do canto. Como você pode ver, está definido para 50. No entanto, é demais. Vou ajustá-lo para 27. Precisamos de uma camada de texto e precisamos de um ícone no lado direito. Deixe-me criar uma camada de texto e eu vou colar a pergunta da minha área de transferência. Lá vamos nós. Aqui está uma pergunta. Qual é a diferença entre draft e uma conta bancária tradicional? Deixe-me mudar o estilo do texto para H4. Parece bom. Certifique-se de que ele está alinhado com nosso cartão verticalmente, e seu preenchimento esquerdo será 30 pixels como Este. No lado direito, como eu mencionei antes, Precisamos colocar um ícone mais. Abra a pasta de ativos, e na pasta do ícone, você pode encontrar o ícone de adição, arrastá-lo e soltá-lo em seu projeto e colocá-lo bem ali. É o preenchimento direito vai ser 30 pixels. Certifique-se de que ele está alinhado verticalmente ao centro do seu cartão. Selecione o ícone e o cartão e alinhe-o verticalmente. Lá vamos nós. Nosso cartão está pronto. Era tão simples, não era? Agora, vamos selecionar todos eles, agrupá-los, e eu vou chamá-lo de pergunta. Então eu vou duplicá-lo, movê-lo para baixo. A margem entre eles será de 20 pixels. Agora vou mudar a pergunta para outra coisa. Deixe-me alinhar Esta camada de texto ao lado esquerdo e, em seguida, colar a pergunta da minha área de transferência. Lá vamos nós. Quem pode abrir um rascunho de conta? Mais uma vez, duplique-o e mova-o para baixo, e eu vou mudar a pergunta. Desta vez a questão é, e se eu retirar dinheiro no exterior? Vou duplicá-lo mais uma vez, movê-lo para baixo e mudar a pergunta para outra coisa. Posso cancelar minha assinatura ou mudar para outro plano a qualquer momento? Mais uma vez, duplique-o, mova-o para baixo, e esta é a nossa última pergunta. Vou colá-lo imediatamente. Lá vamos nós. O que acontece se eu retirar mais de $250? Claro que você pode ir em frente e modificar essas camadas de textos e essas perguntas. É totalmente com você. Nossas perguntas estão prontas. Agora vou selecionar todos eles, agrupá-los, e vamos chamar de perguntas. Sua margem superior vai ser 120 pixels como esta. É muito bom. No entanto, como você pode ver aqui, Nós temos muito espaço vazio e não é bom. Vou adicionar alguns antecedentes a Esta seção para, de alguma forma, passar de Esta seção de planos de associação para Esta seção FAQ. Vou mostrar-lhe uma técnica muito legal para criar planos de fundo incríveis. Vamos escolher a ferramenta Caneta. Clique em algum lugar como aqui. Agora você acabou de criar uma nota, clique em outro lugar e arraste. Certifique-se de clicar e arrastar como este para criar uma linha curva, e eu vou clicar e arrastar como este. Perfeito. Agora eu vou movê-lo para baixo, e vamos mudar a cor para a nossa cor de luz secundária, e abrir Este menu, ir para plugins. Desta vez eu vou usar um plugin legal chamado Looper. Se você ainda não o instalou, certifique-se de ir para Gerenciar Plugins, em seguida, vá para Comunidade, como eu mostrei antes, e procure o Looper Plugin, instale-o e agora você pode executá-lo. Este plugin permite que você iterar seus objetos. Por exemplo, você pode criar uma forma como Esta linha e, em seguida, você pode definir alguns valores como iterações, posição, escala, opacidade, até mesmo cor e, em seguida, cria formas e diagramas legais. Vamos tentar. Por enquanto, vou manter as configurações como estão. A iteração é definida como 20, a posição x é 0, y é 10 e o ângulo é cinco. A escala é 10, a opacidade é 80 por cento. Vamos clicar em “Criar”. Consegue ver como é incrível? Agora você pode facilmente criar um fundo muito legal usando Este plugin. Pressione “Command Z” ou “Control Z” para desfazer o processo. Vou modificar esses valores. Vou mudar as iterações para 15 e também a escala para cinco. Parece bom. Como você pode ver, ele criou um grupo para nós. Eu vou chamá-lo de BG-2 e certifique-se de mover esse grupo BG-2 todo o caminho para baixo, assim, mover para baixo, muito legal. Então eu posso pressionar “K” no meu teclado e aumentá-lo um pouco. Fantástico. Como podem ver, aqui, não temos uma boa taxa de contraste. O que eu vou fazer é diminuir essa opacidade na seção da camada para 20%, como isso. Tudo bem, pessoal, isso é tudo para este vídeo. Espero que tenha gostado e te vejo no próximo vídeo. 107. Rodapé: Ei, bem-vindo de volta. Neste vídeo, vamos terminar de projetar nossa página de aprendizado juntos. A última coisa que precisamos projetar é o rodapé. Você pode encontrar um rodapé do site geralmente na parte inferior do site. Consiste em uma isenção de responsabilidade de direitos autorais, alguns recursos relevantes, e também você pode ter uma chamada à ação, como uma assinatura de newsletter e o logotipo da empresa. Vamos manter isso tão simples. Vamos dar uma olhada no nosso wireframe. Como podem ver, temos nove ligações diferentes. Temos um logotipo e algum texto, que é o nosso aviso de direitos autorais. Sem mais delongas, vamos começar. Primeiro de tudo, precisamos criar um retângulo como fundo do nosso rodapé, assim. Eu vou definir a altura para 440, e então eu vou mudar o código de cor para DC, E2 e F0, para criar uma boa taxa de contraste com a cor do nosso plano de fundo. Agora, precisamos colocar nosso logotipo aqui. Vou rolar para cima. Lá vamos nós. Aqui está o nosso logótipo. Copie-o, role para baixo e cole-o aqui. Vou pressionar “K” no meu teclado para escalá-lo. Acho que é demais. Vamos fazer algo assim. Vou mudar a largura para 80. É legal. Deixe-me mostrar minhas grades de layout. Eu vou colocá-lo aqui na segunda coluna e logo abaixo disso, nós precisamos ter nosso aviso de copyright, então eu vou criar uma camada de texto e vamos escrever copyright e um sinal de copyright 2020 Draft, LLC. Vamos escrever, todos os direitos reservados. Se não souber escrever este sinal de direitos de autor, pode manter premida a tecla de opção no teclado se for utilizador de Mac e premir “G”. Se você for um usuário do Windows, você precisa manter pressionada a tecla Alt e digitar o número 0169. Se você não tem um teclado no seu teclado, você pode procurar o login de direitos autorais no Google e você vai encontrar algo assim, e você pode selecioná-lo, é uma boa técnica, copiá-lo e vir aqui e colá-lo. Isso é tudo. Faz a mesma coisa. Agora, eu vou mudar o estilo do texto para comprar e deixe-me mudar a cor para luz secundária. Finalmente, vou alinhá-lo. Como você pode ver aqui, eu recebo 30,67. O problema é com o tamanho do quadro do meu logotipo. Desde que o escalei, não consegui um número arredondado. Não se preocupe com isso. Está totalmente bem. Para corrigir isso, você pode modificar o tamanho do seu quadro, mas por enquanto, vamos deixá-lo como está. A próxima coisa que precisamos criar são nossos links. Deixe-me criar uma nova camada de texto. Aqui eu vou escrever equipe e vai ser corpo/principal, então está bem, e sua cor vai ser secundário escuro, assim. Deixe-me movê-lo para o lado esquerdo. Vou duplicá-lo, movê-lo para baixo. Aqui, eu vou escrever, imprensa. Mais uma vez, duplique-o, mova-o para baixo. Aqui eu vou escrever taxas. Cada um deles é um link. O preenchimento entre eles vai ser 44 pixels, assim. Muito legal. Vou movê-los para cima, duplicá-los, movê-los para o lado direito e aqui vou escrever serviços. Então eu vou escrever projetos. O último, vou escrever afiliado. Mais uma vez, precisamos selecioná-los, duplicá-los, movê-los para o lado direito e aqui vou escrever termos de uso. Para o segundo, vou escrever política de privacidade, e então vou escrever para entrar em contato conosco. Perfeito. Vamos selecionar esses três primeiros links, agrupá-los e, em seguida, selecionar os links da segunda coluna. Mais uma vez, agrupe-os e o último, e agora selecione todos os três grupos. Eu vou ir em frente e distribuir espaçamento horizontal entre eles que eu posso facilmente modificar o preenchimento entre eles. O preenchimento entre eles vai ser 110 pixels como este. Você também pode modificá-lo a partir do inspetor. Em seguida, agrupe-os, vamos chamá-lo de links. Bastante bom. Agora, deixe-me colocá-lo no lado direito assim, e então eu vou selecionar o nosso retângulo, este fundo, e alinhá-lo ao centro verticalmente e também, precisamos selecionar este aviso de copyright, mantenha pressionado o botão “Shift “e selecione nosso logotipo, agrupe e selecione nosso retângulo e alinhe-os verticalmente também. Bastante bom. Por último, mas não menos importante, precisamos selecionar todos esses elementos, agrupá-los, e vamos chamá-lo de rodapé. Perfeito. Nós temos um pequeno problema aqui e isto é, nós não temos muito espaço em branco, então nós precisamos corrigi-lo. Ele está definido para 68 pixels, no entanto, eu vou defini-lo para 160 pixels. Vou selecionar “Landing Page” e aumentar a altura assim. Mova-o para baixo. Vamos ver. É demais. Vou diminuí-la. Agora, eu tenho 169, então eu vou selecionar a “Landing Page” e aqui para a altura, eu vou escrever menos nove como este, e mover este rodapé para cima. Lá vamos nós. Tudo bem, pessoal. Isso é tudo por este vídeo. Nossa página de destino está finalmente pronta, e agora vamos pré-visualizar juntos. Você está pronto? Vamos lá. Muito legal. Aqui está nossa seção de heróis. Vou rolar para baixo. Tudo bem, pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. Vejo você então. 108. Protótipo da página de desembarque: Ei, bem-vindo de volta. Agora que nossa página de destino está pronta, vamos criar um protótipo totalmente funcional para o nosso site. Sem mais delongas, vamos começar. Vamos dar uma olhada na nossa página de destino. Na verdade, vamos acrescentar interatividade a alguns dos nossos elementos. Se você for para os planos, eu vou dar um zoom. Primeiro de tudo, eu acho que é uma boa idéia adicionar o estado de foco a este botão Começar. Quando o usuário passa o mouse sobre este botão, ele será alterado. A próxima coisa que precisamos adicionar é a versão leve deste cartão de crédito. Como você pode ver aqui, adicionamos dois temas diferentes, e quando o usuário clica no tema da luz, este cartão de crédito deve ser alterado. Por último, mas não menos importante, vamos adicionar interatividade aos nossos cartões de perguntas e respostas. Como você pode ver aqui, queremos criar um efeito acordeão. Quando o usuário clica em um desses cartões, a altura desses cartões deve ser expandida e o texto relacionado a esse cartão específico deve ser exibido. Isso é tudo. Para adicionar essas três interações à nossa página de destino, em primeiro lugar, precisamos selecionar nossa página de destino, precisamos duplicá-la, comando D ou controle D. Basicamente aqui temos uma cópia da nossa página de destino. Agora vou ampliar assim, certifique-se de selecionar o grupo Introdução e, em seguida, vá para o inspetor e vá para a guia Protótipo na parte superior. Como você pode ver, se você ampliar, um círculo aparece em seus elementos como este com um ícone de adição dentro. O que eu quero que você faça é clicar e arrastar para criar essa linha de seta e conectar esse elemento à sua segunda página de destino que acabamos de copiar. Como isso. Agora, essas duas páginas de destino estão conectadas entre si. A esquerda, que é a primeira página de destino, é o início da animação. Funciona como um gatilho. Quando o usuário clica neste botão, a animação começa, e a segunda página de destino é o final dessa animação, ok? O último estágio. O que quer que aconteça no meio é tratado automaticamente pela Figma. Você não precisa se preocupar em criar uma animação específica. Tudo é tratado por Figma. Agora eu vou fechar esta interação detalhes pop-up. Vou ampliar, e aqui vamos mudar o botão. Eu vou selecionar isso, clique duas vezes sobre ele, e eu vou selecionar o retângulo. Vamos para a guia Design e eu vou remover o Traçado e adicionar um Preenchimento, e eu vou escolher a mesma cor, escuro secundário. Certifique-se de mudar a cor da camada de texto de escuro secundário para branco, ok? Bastante bom. Agora, vamos para Protótipo e eu vou selecionar meu primeiro botão na primeira página de destino. Como você pode ver aqui, temos a seção Interações. Se você clicar aqui, essa janela aparecerá, e aqui você poderá especificar as configurações de sua interação e animação. Para o gatilho, que é a primeira parte, vou abrir este menu. Por padrão, ele é definido como On Click. Você tem diferentes opções, como arrastar, enquanto paira, enquanto pressiona, etc. Eu vou com enquanto pairando, e na seção Animação, você pode abrir este menu suspenso e você tem opções diferentes também Aqui. Você pode ir com Instant, você pode ir com Dissolver, você pode ir com o Smart Animate. Eu sugiro que você deve usar o Smart Animate. Em seguida, você pode especificar o tipo de animação. Como facilidade de entrada, facilidade de saída, facilidade de entrada e saída. Não importa por enquanto. Além disso, você pode especificar a duração da animação, e eu vou deixá-la como está. Deixe-me fechar esta janela, e basicamente isso é tudo. Vamos pré-visualizar o nosso protótipo. Vou rolar para baixo. Quando o usuário passa o mouse sobre este botão, você pode ver que sua aparência muda imediatamente, assim. É muito bom, não é? Mas não funciona com o outro botão. Você pode ir em frente e adicioná-lo, se desejar. Mas para este tutorial, eu só quero mostrar como as interações funcionam. Agora vamos em frente e tentar animar nossa seção de cartão de crédito. Vou fazer zoom aqui. O que é que nós temos? Como podem ver, a nossa fase inicial é esta carta escura. Precisamos adicionar a interação a este círculo de luz. Agora precisamos ir em frente e selecionar nossa página inicial, que é nossa página inicial principal. Mais uma vez duplicá-lo, comando D ou controle D, muito bom, e então eu vou ampliar aqui. Precisamos clicar duas vezes nesse círculo de luz e tentar conectar esse círculo à página inicial que acabamos de duplicar. Assim, perfeito. Para essa interação, vou configurá-la como On Click e Smart Animate. Isso é tudo. O que devemos mudar aqui? Precisamos mudar duas coisas. Primeiro, a aparência do cartão de crédito porque deve ser leve. Em segundo lugar, devemos mover este golpe para o lado direito. Vamos começar com este derrame. Vou selecionar isso, movê-lo para o lado direito, e ter certeza de que está alinhado com o seu círculo interno. Perfeito. Então vou modificar a aparência deste cartão de crédito. Vamos para a guia Design, primeiro, vamos começar com essa cor escura. Vou selecionar Star 3, assim, e vou mudar sua cor para luz secundária. Então eu vou selecionar Star 4, e eu vou mudar este sotaque para neutro, muito bom. Então eu vou selecionar minhas camadas de texto e mudar sua cor para escuro secundário, assim, e pronto. Vamos em frente e tentar. Vou selecionar minha página inicial e vamos pré-visualizá-la. Vamos rolar para baixo. Nosso botão Introdução funciona perfeitamente. Então eu vou clicar neste círculo de luz. Lá vamos nós. Você viu aquela bela animação? No entanto, não podemos voltar ao primeiro estado porque ainda não adicionamos essa interação. Vamos em frente e adicionar isso. O que precisamos alcançar aqui é que se o usuário clicar neste tema escuro, tudo o que mudamos deve ser revertido. Temos de ligar este círculo negro. Vamos ao Protótipo. Precisamos conectá-lo à nossa página inicial, assim, e estamos prontos. Vamos pré-visualizar mais uma vez. Vou rolar para baixo. Vamos dar uma chance. Vou clicar neste círculo de luz, lá vamos nós, e escuro. Você pode ver como é bonito e fácil criar esse tipo de interações? Isso é incrível. A última coisa que precisamos fazer é adicionar interação aos nossos cartões de perguntas e respostas. Vou adicionar a interação apenas para o primeiro cartão. No entanto, para o produto final, você pode ir em frente e adicionar a interação a todos eles, se desejar. Mas por enquanto, eu vou adicionar a interação apenas para a primeira carta. Do que precisamos? Primeiro de tudo, precisamos selecionar nossa página inicial e precisamos duplicá-la, comando D ou controle D, muito bom. Agora vou em frente e selecionar nosso primeiro cartão na primeira página de destino. Enquanto estivermos na aba Protótipo, vou selecionar este cartão e conectá-lo à nossa última página de destino que acabamos de duplicar, assim. Para a interação, vou escolher On Click e animação deve ser Smart Animate, então não precisamos mudar nada. Então eu vou ampliar e tentar modificar nossa última página de destino. O que devemos mudar aqui? Primeiro de tudo, precisamos modificar a altura deste cartão. Eu vou para a guia Design e eu vou selecionar este cartão, você pode manter pressionada a tecla de comando ou a tecla de controle no seu teclado e clicar neste cartão para selecioná-lo. Alternativamente, você pode ir em frente e tentar selecioná-lo na lista de camadas. É totalmente com você. Então eu vou aumentar a altura deste cartão para 200 pixels. Finalmente, vou selecionar todas as outras perguntas e movê-las para baixo, e certifique-se de manter o preenchimento de 20 pixels entre elas assim. Por último, mas não menos importante, precisamos manter a margem superior de 160 pixels para este rodapé. Como podem ver agora, tenho 56 pixels. Como posso consertar isso? É tão simples. Devemos selecionar nossa página de destino, e aqui para a altura, eu vou escrever mais, já que eu tenho 56 pixels e eu preciso obter 160, eu vou escrever 104 assim, e finalmente, você seleciona o seu rodapé e movê-lo para baixo, e lá vamos nós. Temos 160 pixels. Perfeito. O que mais deve ser mudado aqui? Quando este cartão estiver aberto, este ícone de adição deve ser substituído por um ícone de menos. Vou em frente e selecionar esta linha vertical, e removê-la. Por último, mas não menos importante, precisamos adicionar nossa linha de texto aqui. Aqui temos uma pergunta e, em seguida, precisamos adicionar a resposta para essa pergunta específica. Por enquanto, vou adicionar uma camada de texto Lorem Ipsum porque a resposta não importa. Mas se você estiver trabalhando em um projeto de palavra real, certifique-se de adicionar respostas reais. Vou pressionar “T” no meu teclado e clicar para criar uma camada de texto e, em seguida, vou colar o texto da minha área de transferência. Para esta camada de texto, vou usar Body/Main. Finalmente, deixe-me mudar o estilo de cor para Secundário/Leve. Bastante bom. Deixe-me diminuir a largura desta camada de texto. Eu vou ampliar assim, deixe-me movê-lo para cima. Certifique-se de colocar esta camada de texto dentro deste grupo de cartas, ok? Este é o nosso cartão de perguntas, e eu vou mover esta camada de texto e colocá-lo dentro deste grupo. O preenchimento superior deve ter 10 pixels, o preenchimento esquerdo deve ser 30. Estamos quase terminando. A última coisa que precisamos fazer é conectar este cartão à nossa página inicial. Porque quando o usuário clicar neste primeiro cartão aqui, ele será aberto. No entanto, se ele ou ela quiser fechá-la, precisamos conectá-la à nossa página inicial também. Vou selecionar este cartão de perguntas, certifique-se de selecionar o seu grupo de perguntas, ir para a guia Protótipo e usar este círculo, tentar conectá-lo à sua primeira página de destino, e terminamos. Vamos selecionar nossa primeira página de destino e tentar visualizá-la. Tudo bem, deixe-me rolar para baixo. Vamos dar uma chance. Vou clicar no primeiro cartão, lá vamos nós. Você viu como essa interação foi bonita? Posso fechá-lo assim. Figma permite que você crie interações complexas e surpreendentes em poucos minutos. Você não precisa trabalhar com software complexo para criar um protótipo de alta fidelidade. Tudo bem pessoal, foi uma longa jornada juntos, espero que tenham gostado desta seção e eu vou ver vocês lá. 109. Tipos de logotipo: Olá, todo mundo. Nesta seção, vamos projetar nosso logotipo, e também, neste vídeo, vamos estar falando de sete tipos diferentes de design de logotipo. Sem mais delongas, vamos começar. O primeiro tipo de logotipo é chamado de monograma, ou você poderia dizer marcas de letras. Aqui temos logotipos diferentes como exemplos, como HBO, que significa Home Box Office. Como você pode ver, aqui temos apenas cartas. Eles são soletrados e representam sua empresa. O segundo tipo é chamado de marcas de palavras, ou digamos logotipos. Eles são realmente semelhantes a um carimbo. No entanto, uma marca de palavras se concentra apenas em um nome de empresa, como Google, Canon ou Jeep. O próximo tipo de logotipo é chamado de marcas de logotipo abstratas, como Pepsi, Nike ou BP, como você pode ver aqui. Na verdade, uma marca abstrata é um tipo de logotipo pictórico. O próximo tipo de logotipo é chamado de marcas pictóricas ou símbolos de logotipo, como logotipo da Apple, Twitter e outras marcas famosas. Na verdade, uma marca pictórica é simplesmente um ícone que representa as características da empresa. O próximo tipo de logotipo é mascotes. Mascot são logotipos que envolvem um personagem ilustrado de acordo com 99designs.com. Se você quiser obter mais informações sobre logotipos e como você deve usá-los, você pode conferir seu grande artigo em seu site. O próximo tipo de logotipo é marcas de combinação, e este é o logotipo que eu vou ensinar a você como você pode criar. Neste tipo de logotipo, você pode encontrar uma letra combinada com uma ilustração ou uma forma específica. Por último, mas não menos importante, logotipos de emblema. Um logotipo do emblema consiste em uma fonte dentro de um símbolo ou um ícone como o logotipo da Starbucks. Muito obrigado por assistir este vídeo. Na próxima série de vídeos, vamos criar quatro logotipos diferentes juntos. Certifique-se de baixar o projeto inicial porque eu já preparei as cores para você, a fim de economizar seu tempo. Você pode baixar o arquivo na seção de recursos da próxima palestra. 110. Crie o primeiro logotipo: Olá a todos? Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos começar a desenhar nosso primeiro logotipo. O logotipo que eu escolhi para este tutorial é o logotipo Figma, que é bastante interessante e ao mesmo tempo bastante simples logotipo. Primeiro de tudo, precisamos de uma prancheta. Vamos pressionar “A” e eu vou escolher o MacBook Pro, depois vou aumentar o tamanho da altura da prancheta. Assim, muito bom. Eu já preparei os ativos multa para você que você pode baixar a partir da palestra ativos desta seção. Primeiro de tudo, eu vou colocar o logotipo Figma como você pode ver na pasta Assets, há o logotipo FIGMA-, muito bom e, em seguida, vamos projetar o mesmo logotipo juntos. Como você pode ver, esse logotipo consiste em diferentes formas simples. Por exemplo, aqui temos um quadrado com dois cantos arredondados, aqui também. Aqui temos o mesmo quadrado, no entanto, com três cantos arredondados, e aqui temos um círculo simples. Primeiro de tudo, vamos inserir um retângulo aqui. Eu vou segurar Shift para criar um quadrado, e então eu vou definir a largura e altura para 200. Assim, é muito bom, vamos movê-lo para o lado direito. Agora eu preciso arredondar esses dois cantos. Eu vou clicar em cantos independentes como este, e vamos definir o raio do canto superior esquerdo para 100 e o raio do canto inferior esquerdo para 100 também, e como você pode ver, temos a mesma forma que o logotipo da Figma. Agora, precisamos usar o conta-gotas na seção de campos, a fim de escolher a mesma cor, muito bom. Então precisamos duplicá-lo, e eu vou clicar com o botão direito do mouse sobre isso, e vamos clicar em flip horizontal assim. Vou movê-lo para o lado direito, muito bem, então precisamos mudar sua cor assim, bem fantástico. Agora vamos usar nosso primeiro retângulo. Duplicá-lo, eu vou movê-lo para baixo, muito incrível. Mais uma vez, preciso mudar o grau de cor, e agora precisamos de um círculo. Vamos escolher círculo no menu de formas. Vou segurar “Shift” e vamos criar um círculo. No entanto, com a mesma largura e com a mesma altura. Vai ser 200 por 200 pixels como este, e eu vou mudar a cor para este azul. Mais uma vez, vamos duplicar este retângulo. Eu vou movê-lo para baixo, e agora eu preciso mudar a quantidade de raio deste canto inferior direito. Aqui no inspetor, eu vou ajustá-lo para 100 também. Por último, mas não menos importante, vamos mudar sua cor. Fantástico. Você viu como é fácil projetar um logotipo em Figma? Agora vou selecionar nossas camadas, vou agrupá-las, e vamos chamá-la de Figma novo. Você pode remover este e isso é tudo. Tudo bem pessoal, isso é tudo para este vídeo, espero que tenham gostado e eu vou ver vocês no próximo vídeo. 111. Crie nosso segundo logotipo: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos projetar nosso segundo logotipo juntos, que é para uma marca imaginária chamada Clock. Sem mais delongas, vamos começar. Primeiro de tudo, vou inserir um retângulo e vou segurar “Shift” para criar um quadrado. Bastante agradável. Vamos definir para 200 por 200, assim. Então eu vou aumentar o raio do canto de três cantos. Preciso mudar o canto superior esquerdo para 100, o canto superior direito para 100 também, e o canto inferior esquerdo para 100, assim. Depois disso, vou definir o código de cor para 00D179, assim. Deixe-me ampliar. Agora, preciso inserir um círculo aqui. Vou segurar “Shift”. Bastante agradável. Então eu vou usar um gradiente para isso, o linear. Vamos definir a primeira cor para a mesma cor que temos para o nosso quadrado principal. A segunda cor vai ser um pouco mais escura, então vamos tentar 038750, e eu vou aumentar a opacidade para 100, assim. Então vamos mudar a direção para conseguir algo assim. Muito bom, não é? Agora, vou escalá-lo um pouco. Vamos clicar neste “Move Tools” e aqui eu vou escolher Escala. Você também pode pressionar “K” no seu teclado e eu vou segurar “Shift”. Vamos escalá-lo. Bastante agradável. Vamos definir para 176 por 176, e os estofos serão 12, como você pode ver. Então eu vou clicar neste círculo de arco, e eu vou segurar “Shift” assim. Bastante agradável. Agora, eu vou girá-lo em 90 graus. Como você pode ver, eu tenho algo assim. No entanto, preciso mudar a direção do meu gradiente. Vamos usar esses controladores de alça para obter algo como isso. Você pode ver que eu criei um relógio aqui? É bem incrível, não é? Então eu vou adicionar um texto e a fonte é Roboto. Vamos escrever “Relógio”. Vai ser 80 pontos. Vou mudar a cor para o mesmo verde. Vamos alinhá-lo. Seu preenchimento esquerdo vai ser 16 pixels como este. Agora, vou agrupá-los. Vamos chamá-lo de Relógio. Isso é tudo. Você viu como é fácil usar formas simples para criar logotipos incríveis? Tudo bem, pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 112. Crie nosso terceiro logotipo: Olá a todos, bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos projetar nosso terceiro logotipo juntos, que é para novamente, uma marca imaginária chamada Moon. Vai ser tão interessante e vamos criá-lo tão rápido. Primeiro de tudo, preciso inserir um círculo. Vou segurar o Shift assim. Então eu preciso duplicar isso, e vamos movê-lo para o lado direito um pouco, assim. Depois disso, vou selecionar os dois e vou usar operações booleanas. Vamos escolher Subtrair Seleção e lá vamos nós. Acabamos de criar a nossa lua. Agora vou girá-lo um pouco para o lado esquerdo, assim. No entanto, vou modificá-lo. Para modificar isso, posso ter acesso a subcamadas abrindo este grupo e lá vamos nós. Eu vou escolher o círculo superior, e vamos movê-lo para o lado direito um pouco. Bastante incrível. Então vamos mudar a cor para preto. Depois disso, vou escrever Moon. No entanto, vamos mudar a fonte para Montserrat e o peso vai ser regular. Vai ser 80 pontos. Vou reduzir a minha lua assim. Vamos definir a largura para 130 e eu vou alinhá-los. No entanto, como você pode ver, parece que eles não estão perfeitamente alinhados. Porque às vezes, você precisa alinhá-los manualmente para obter um ótimo equilíbrio visual. Vou mover o texto da lua um pouco para o lado direito. Agora eu acho que é ótimo. Vamos movê-lo para cima. Bastante incrível. Vou agrupá-los e chamar-lhes Lua. Tudo bem, pessoal, isso é tudo por este vídeo. Você aprendeu como você pode criar seu próprio logotipo simplesmente em Figma usando formas simples. Espero que tenha gostado e te vejo no próximo vídeo. 113. Introdução ao Adobe Photoshop: Olá a todos. Bem-vindo de volta a outra seção deste curso. Nesta seção, vamos falar sobre o Adobe Photoshop. Embora eu mencionei antes que o Adobe Photoshop não é um bom software para design de interface de usuário, é bom estar familiarizado com o ambiente Adobe Photoshop e também os conceitos básicos do Photoshop para preparar nossas imagens às vezes ou até mesmo editando nossos arquivos. No próximo vídeo vamos começar nossa lição com os ambientes do Adobe Photoshop. Vejo você então. 114. Meio do Adobe Photoshop: Olá a todos. Neste vídeo, vamos falar sobre os ambientes do Adobe Photoshop. Sem mais delongas, vamos abrir nosso Adobe Photoshop. Como você pode ver, estou usando o Adobe Photoshop versão CS6. Não importa qual versão você está usando agora porque nós vamos nos concentrar apenas no básico e eu posso garantir que quase todos os elementos são os mesmos em todas as versões, mas seria ótimo usar a versão mais recente também. Aqui no Adobe Photoshop, podemos dividir esses ambientes em diferentes seções. Por exemplo, à sua esquerda, você pode ver que há o Painel de Ferramentas e aqui há todas as ferramentas que precisamos para editar nossas imagens ou até mesmo criar algum design gráfico. À sua direita, você pode ver que há mais painéis, por exemplo, aqui temos o painel de camadas, que é um dos painéis mais importantes do Adobe Photoshop e também temos ajuste, cores, etc. Mas o painel mais importante aqui é o painel Ferramentas. Muito bem pessoal, muito obrigado por assistirem este vídeo. No próximo vídeo, vamos falar sobre os conceitos básicos do Adobe Photoshop e como você pode usar essas ferramentas. Vejo você no próximo vídeo. 115. Noções básicas do Adobe Photoshop: Olá a todos, bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre os conceitos básicos do Adobe Photoshop. Como eu mencionei no vídeo anterior, vamos usar diferentes painéis no Adobe Photoshop, como painel de ferramentas, painel camadas, cores, ajuste, etc Mas primeiro as coisas, precisamos de uma tela ou digamos uma página para iniciando nosso projeto com. Para fazer isso, Você pode ir para o arquivo e clicar em novo, ou você pode pressionar o comando e N em sistemas Mac ou Controle e N no Windows. Aqui, como você pode ver, há uma janela que você pode escolher a dimensão da prancheta. Por exemplo, aqui podemos definir a largura para 1920 e certificar-nos de que ela está definida para pixels e a altura para 1080, e como você pode ver seus pixels. Eu vou mudar a resolução para 72 porque é suficiente para fins de computador e o modo de cor, precisamos configurá-lo para RGB porque vamos apresentar este projeto no computador ou em telas. CMYK é usado para fins de impressão. Eu posso ir em frente e clicar em ok. Lá vamos nós. Sua prancheta está pronta. Eu não defini um nome específico para isso, mas certifique-se de definir o nome desejado. Agora vamos falar sobre o painel de ferramentas. Como você pode ver aqui, temos diferentes ferramentas e seções diferentes. Esta é chamada de ferramenta de movimento, e é para mover objetos ou elementos em sua tela ou pranchetas. A próxima é a ferramenta de seleção. Por exemplo, deixe-me criar uma nova camada aqui. Se você quiser criar uma nova camada, você pode facilmente ir para a seção de camada e clicar neste ícone de camada. Como você pode ver, acabamos de criar uma nova camada. Então eu vou usar a ferramenta de seleção, a fim de selecionar uma área específica como esta e eu posso preenchê-la com qualquer cor que eu quiser. Se eu quiser mudar a cor, eu posso clicar nesta seção e eu posso escolher este azul. Deixe-me escolher o pincel para preenchê-lo. Agora, com esta ferramenta de movimento, eu posso facilmente mover estes ao redor. A próxima ferramenta é chamada ferramenta de seleção. Cada ferramenta aqui contém algumas ferramentas ocultas. Como você pode ver, há uma pequena seta no canto inferior direito de cada ferramenta específica e você pode ver que existem algumas ferramentas escondidas aqui que você pode escolher. A próxima ferramenta é chamada de laço magnético, e é para selecionar também. Você pode selecionar facilmente uma área específica e pode separar a seção desejada dessa imagem específica. Para cancelar a seleção, você pode pressionar Command e D ou Control D no Windows. Aqui também você tem diferentes ferramentas de laço, e esta é a varinha mágica. É para seleção. Também o temos no esboço, para que possa selecionar uma área específica magicamente. A próxima ferramenta é cortar. É para cortar suas pranchetas ou sua imagem. O próximo é o conta-gotas. Você pode escolher uma cor específica de uma foto ou um elemento. Estas ferramentas são para retoque. Como você pode ver, temos pincel de cura local, escova de cura, ferramenta de remendo, etc Em seguida, temos pincéis, por exemplo, eu posso escolher a cor vermelha aqui. Como você pode ver, eu posso pintar livremente aqui, e se eu clicar com o botão direito do mouse, eu posso mudar o tamanho disso e também a dureza do meu pincel. A próxima ferramenta é chamada ferramenta de carimbo clone. É para retocar também. Não trabalhamos muito com isso. Em seguida, temos ferramenta de pincel histórico e borracha que você pode apagar sua pintura ou até mesmo uma área específica de uma imagem. Então temos gradiente como este e ferramenta de desfoque para desfocar uma imagem ou uma parte específica de uma imagem. Esta é a ferramenta de esquivação e é para editar o brilho de uma área específica de uma imagem. Então temos a ferramenta caneta, que é uma ferramenta muito importante no Adobe Photoshop. Com a ferramenta caneta, você pode selecionar uma área específica com precisão. Se eu clicar com o botão direito do mouse aqui, eu posso clicar em fazer seleção, o raio do alimentador vai ser zero, e vamos clicar em, ok. Lá vamos nós. Agora, se eu escolher a ferramenta de pincel, eu posso preenchê-la com uma cor vermelha como esta. A próxima é a ferramenta de texto para digitar e criar algum texto. Você tem opções diferentes aqui. Você tem tipo horizontal, ferramenta de texto vertical, ferramenta de máscara de texto horizontal e ferramenta de máscara de texto vertical. Na maioria das vezes usamos ferramenta tipo horizontal. Esta ferramenta de seleção de caminho, não vamos usar muito isso. Em seguida, ferramenta de retângulo arredondado é para a criação de formas diferentes. Por exemplo, eu posso criar um objeto arredondado como Este então eu posso fazer uma seleção com o botão direito do mouse, e agora eu posso preenchê-lo com qualquer cor que eu quiser, como este. A próxima opção é ferramenta manual, e é para pintar ao redor. Você também pode apresentá-lo com espaço de retenção no teclado. Então temos a ferramenta de zoom, ok, para ampliar e diminuir o zoom. Tudo bem, pessoal. Agora vamos nos concentrar na seção da camada para ver o que temos lá. Como você pode ver, acabamos de criar uma nova camada e como eu mencionei antes, cada vez que Você quer uma nova camada, Você pode facilmente clicar neste ícone e ele cria uma nova camada para você. Você pode alterar o nome das camadas clicando duas vezes em seu nome e você pode alterá-lo para o que quiser. Vamos mudar para UI. Perfeito. Agora vou criar outra forma aqui com as ferramentas de seleção. Lá vamos nós, e eu posso movê-lo. Se você quiser ocultar uma camada, você pode clicar neste i, ícone, como no Sketch e lembrar que a ordem de colocar suas camadas é tão importante no Adobe Photoshop. Aqui a interface do usuário está acima desses retângulo arredondado. Se eu movê-lo para cima deste retângulo, você pode ver a diferença. Vou mudar a cor para ficar mais clara assim. Também podemos mudar a opacidade aqui de zero para 100 por cento. A outra coisa importante no Adobe Photoshop é a janela Estilo da camada. Vamos clicar duas vezes sobre essa camada de interface do usuário. Como você pode ver, uma janela aparece, que é chamado de lado da camada. Aqui você tem diferentes opções para modelar sua camada. Por exemplo, aqui temos opções de mesclagem padrão, por exemplo, você pode alterar a opacidade e o modo de mesclagem aqui. Você tem essas opções bem nesta janela, bem como você pode ver que você tem muitas opções aqui, você tem acidente vascular cerebral. Por exemplo, posso mudar a cor para vermelho e aumentar o tamanho. Você tem sombra interna, você tem brilho interno, sobreposição de cores, gradiente e muito mais. Você também tem sombra aqui assim. Muito bem pessoal, muito obrigado por assistirem este vídeo. Espero que você tenha gostado e no próximo vídeo, vamos falar sobre o uso do Adobe Photoshop para design de UX da interface do usuário. Então, vejo você então. 116. Adobe Photoshop para design UI/UX: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos falar sobre o uso do Adobe Photoshop para design de UI/UX. Você, como designer de UI/UX, pode precisar editar suas imagens, a fim de usá-las em seu projeto corretamente. Existem algumas modificações que você não pode fazer no Figma e é uma boa ideia processá-las no Adobe Photoshop. Neste vídeo, vou ensinar como você pode usar o Adobe Photoshop para editar suas imagens. Sem mais delongas, vamos abrir nosso Adobe Photoshop. Como você pode ver, baixei uma imagem deste sapato do unsplash.com para mostrar como você pode separar qualquer objeto de seu plano de fundo no Adobe Photoshop. Suponha que você está projetando um aplicativo de compras e precisamos ter alguns sapatos em nossa lista de compras. Neste caso, é melhor separar este sapato do seu plano de fundo e, em seguida, salvá-lo como um arquivo Png e, em seguida, você pode importá-lo no Figma. Há maneiras diferentes de fazer isso. Você pode usar diferentes ferramentas de seleção. Por exemplo, você pode usar a Varinha Mágica assim. Funciona em alguns exemplos. Mas antes de mais, deixa-me mostrar-te uma coisa. Como você pode ver, esta camada é chamada de Fundo. Não podemos fazer nada quando está trancada. Para desbloquear isso, você pode clicar duas vezes nesta camada, por exemplo, define um nome, não importa o que é. Você pode configurá-lo para sapato e agora ele está destrancado. Você pode fazer alterações. Vou clicar em “Excluir” assim. Como pode ver, não temos nenhum histórico aqui. No entanto, você precisa se certificar de que o plano de fundo foi completamente removido. Por exemplo aqui, como você pode ver, você tem algum espaço em branco. Precisamos mais uma vez selecionar este espaço em branco e clicar em “Excluir” assim. Agora, a fim de mostrar a vocês qual é a diferença aqui, eu vou criar uma nova camada e vamos chamá-la de BG como nosso fundo. Vou movê-lo para baixo, bem abaixo da nossa camada de sapato. Vamos pressionar Command A ou Control A no Windows. Então vamos escolher uma cor diferente, por exemplo, esta e pressione a opção “Excluir” e lá vamos nós. Como você pode ver, podemos facilmente mudar a cor do fundo. Eu também posso remover o plano de fundo e salvá-lo como um arquivo Png, e importá-lo no Figma e usá-lo. Você poderia ter mais possibilidades de trabalhar com esta imagem. Mas há algumas imagens que você não pode usar a Varinha Mágica facilmente para separar seu objeto específico do plano de fundo. Deixe-me desfazer esses processos. Nesse caso, você pode usar outras ferramentas. Por exemplo, você pode usar o Laço Magnético como este, e você pode selecionar seu objeto facilmente e perfeitamente. Você também pode usar a ferramenta Caneta, que é a melhor opção possível porque você pode obter uma seleção precisa do seu objeto. No entanto, leva mais tempo. Aqui, depois de selecionar dois pontos diferentes, você precisa manter a tecla Option pressionada e pressionar este ponto assim, e selecionar um novo ponto, e assim por diante. Agora vou mostrar outro exemplo de uso do Adobe Photoshop para modificar suas imagens. Às vezes, talvez seja necessário alterar a cor do seu produto. Primeiro de tudo, deixe-me selecionar o fundo e removê-lo assim. Suponha que eu mude a cor deste sapato. É um pouco difícil porque é muito escuro. No entanto, eu vou experimentá-lo. Primeiro, vamos criar uma nova camada. Então eu vou selecionar o sapato inteiro. Como podemos fazer isso? Podemos segurar a tecla Command e clicar neste quadrado aqui. Como você pode ver, ele já está selecionado. Em seguida, certifique-se de que você selecionou a nova camada e altere uma cor diferente, por exemplo, cor azul. Em seguida, escolha a ferramenta de pincel, assim. Vamos pintar tudo assim. Agora, parece estranho, mas em um minuto você pode ver como essa técnica é incrível. Como podem ver aqui, temos duas camadas diferentes. Aqui temos o modo de mesclagem e temos diferentes opções. Se você selecionar “Cor”, você pode ver que nossa cor de objetos foi alterada perfeitamente. É fantástico porque às vezes você como um designer de interface do usuário, você também tem versões diferentes de um produto específico, mas não está disponível na Internet, então você pode criar o seu próprio. Agora, suponha que você deseja mudar sua cor para outra coisa e você quer ver centenas de opções. Em vez de escolher cada cor uma por uma, eu tenho uma boa solução para você. Se você acessar Ajustes, você pode ver que temos opções diferentes. No entanto, se você clicar em “Saturação de Matiz”, você pode alterar a tonalidade facilmente. Como você pode ver, a cor do nosso sapato está mudando instantaneamente. É incrível. Não é? Para salvar seu arquivo, você pode simplesmente pressionar Command Shift e S, então aqui, você pode definir um nome, por exemplo, sapato, então você pode escolher o formato específico que você precisa. Aqui temos muitos formatos. No entanto, quando você quiser usar esta imagem sem fundo, você precisa escolher Png. Em seguida, clique em “Salvar”, e está pronto. Agora podemos importar este arquivo Png para o seu projeto Figma. Muito bem pessoal, muito obrigado por assistirem este vídeo. Espero que tenha gostado, e te vejo no próximo vídeo. 117. Introdução à modelagem 3D: Olá a todos, e bem-vindos de volta a outra seção deste curso. Nesta seção, vamos falar sobre modelagem 3D. Você pode estar se perguntando como a Modelagem 3D vai ajudá-lo em sua carreira como designer de UI/UX. Deixe-me explicar isso para você em um termo simples. Para você, como designer de UI/UX, é bom saber um pouco sobre modelagem 3D porque às vezes você quer projetar uma página de destino criativa, ou digamos uma tela para um aplicativo que precisa algumas formas simples ou até mesmo algum contexto 3D. Nesta seção, vou ensinar-lhe como você pode usar essas técnicas, a fim de criar coisas incríveis para o seu design. Você pode estar familiarizado com softwares tradicionais de modelagem 3D, como CINEMA 4D, 3ds Max, etc. No entanto, trabalhar com esses softwares tradicionais pode ser bastante ousado para os iniciantes. Em vez de trabalhar com esses softwares, vou te mostrar outro ótimo ambiente. Existe uma aplicação web que é chamada Vectary. É um aplicativo web incrível e novinho em folha que pode ajudá-lo a criar coisas 3D incríveis de uma maneira rápida e fácil. Em vez de trabalhar com algumas ferramentas complexas, vou ensinar-lhe como você pode usar o Vectary para obter os melhores resultados possíveis. Se você for ao vectary.com, como pode ver, esta é a página de destino. Lá vamos nós. Podemos ver esses recursos e a boa notícia é que, quando você terminar esta seção, você pode facilmente criar essas coisas e você pode colocar o código em seu site ou você pode até mesmo visualizá-lo como um modelo de realidade aumentada. A primeira coisa que precisamos fazer é criar uma conta. Existem dois tipos de conta. O primeiro tipo é gratuito. Se você for para preços, você pode ver que temos dois tipos, grátis e premium. Para este curso, você pode usar a conta gratuita porque vamos nos concentrar apenas no básico. Certifique-se de criar sua conta e, no próximo vídeo, começaremos nosso primeiro projeto de modelagem 3D juntos. Vejo você então. 118. Crie seu primeiro modelo 3D: Olá a todos. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos começar a trabalhar com reitoria. Sem mais delongas, vamos começar. Primeiro de tudo, vamos em frente e clicar e começar a criar. Em seguida, aqui você pode criar um novo projeto ou em vez disso, você pode usar alguns projetos pré-fabricados. Eu estou indo para ir em frente e clicar sobre este projeto. Como você pode ver aqui, temos um ambiente 3D com três dimensões. Aqui vamos nós. Até agora estávamos trabalhando em um ambiente 2D. No entanto, agora vamos mergulhar em um ambiente 3D. Isso é tão interessante. Primeiro de tudo, deixe-me explicar algumas coisas básicas. Se você quiser se mover por essas telas, você pode facilmente manter o espaço no teclado e se mover. Se você quiser ampliar ou diminuir o zoom, você pode rolar assim e você também pode girar ao redor com o botão esquerdo do mouse. Reitoria é uma aplicação bastante complexa, por isso não vamos cobrir todas as ferramentas. No entanto, vou ensinar-lhe os requisitos, a fim que você saiba como você pode usar esses grandes aplicativos. Bem no topo, temos alguns modos. Como você pode ver, temos objeto, modo de edição, biblioteca e comentários. No objeto, temos diferentes opções também. Aqui temos primitivos. Como você pode ver, temos caixa, esfera, cilindro, tubo, etc Você pode facilmente clicar na caixa aqui e lá vamos nós. Você tem sua caixa. Vamos diminuir o zoom. Bastante incrível. À sua direita você pode modificar algumas variáveis como posição, rotação, escala, tamanho e até mesmo material como este. Bastante incrível, não é? Temos segmentos também. Vou fazer 10 por enquanto. Como podem ver aqui, temos uma engenhoca. São algumas flechas, alguns cubos, e alguns arcos. Este aparelho permite que você gire, dimensione e mova seu objeto. Se você quiser mover seu objeto, você pode usar essas setas como esta em qualquer direção que você quiser. Se você quiser dimensionar seu objeto, você pode usar esses cubos. Como podem ver, temos dois cubos diferentes. O cubo externo, vamos usar escala seu objeto em uma direção como esta e o cubo interno, vamos você dimensionar seu objeto proporcionalmente. Se você quiser girar seu objeto, você pode usar esses arcos. Fantástico. Agora vou remover este objeto. A outra coisa que você pode usar é texto. Sempre que você clicar neste texto 3D, você pode ver que vetor você automaticamente cria um novo texto aqui para você e se você quiser alterar esse texto, você pode facilmente ir para uma seção de texto 3D e vamos mudar isso para design UX UX. Bastante incrível e eu posso movê-lo facilmente aqui. Posso mudar a profundidade. Perfeito. Também posso mudar o material ou digamos a cor neste caso. Bastante incrível e você também pode mudar a fonte. Vamos procurar Montserrat. Lá vamos nós. Você também pode alterar o peso, o espaçamento entre caracteres e o espaçamento entre linhas. Quando você está trabalhando com um objeto 3D, você precisa renderizá-lo. Aqui na parte superior pode ver que há uma alternância de renderização e se você passar o mouse sobre isso, você pode ver que existem três opções diferentes. Baixa qualidade, qualidade média e alta qualidade. Eu vou com qualidade média. Lá vamos nós. Ele foi processado perfeitamente. Claro, existem algumas marcas d'água na versão gratuita. Se você quiser removê-los, você pode usar a licença premium de vetor. Agora vamos parar de renderizar nosso texto. Pessoal, isso é tudo por este vídeo. Muito obrigado por assistir este vídeo. Espero que você tenha gostado e no próximo vídeo vamos falar sobre a câmera e iluminação. Vejo-te lá. 119. Câmera e iluminação: Oi, todo mundo. Bem-vindo de volta a outro vídeo deste curso. Neste vídeo, vamos continuar trabalhando em nosso projeto anterior. Como você pode ver, temos esses textos 3D. No entanto, agora é hora de adicionar uma câmera à nossa tela ou à nossa visualização. Vamos clicar nesta câmera. Bastante incrível. Agora, se você mover ao redor, você pode ver que a câmera está fixa e voltado para o nosso texto na visão específica que definimos. Se você clicar nesta visão de câmera, lista de camadas, lá vamos nós, você vai ter sua visão de câmera designer. Uma câmera nos ajuda a manter uma visão específica sempre que quisermos renderizar nosso projeto. Agora vamos renderizar nosso texto mais uma vez. Como você pode ver, não parece realista, porque nós não temos grandes sombras e ótima iluminação, então vamos consertar isso. O que vamos fazer é escolher um plano sombra. Bastante incrível. Vou movê-lo para baixo. Como podem ver, agora temos um plano sombra. Na verdade, sempre que você colocar um objeto ou digamos um texto 3D em cima de um plano de sombra, ele automaticamente criará uma sombra para isso. Por exemplo, aqui, deixe-me ampliar, como você pode ver, nosso texto não está perfeitamente acima do nosso plano sombra. Primeiro de tudo, vamos selecionar nosso texto 3D e pressionar A. Muito bom. Então eu vou movê-lo para cima assim, ter certeza de que está acima do seu plano sombra. Como você pode ver, não é, então eu vou movê-lo para cima novamente. Agora está muito bom. Se você renderizar seus objetos agora, você pode ver que nós temos uma grande sombra. Você pode ver isso? Na verdade, você também pode adicionar alguma luz. Por exemplo, aqui, eu vou para a luz retangular. Vou movê-lo um pouco. Vamos fazer nossa cena mais uma vez. É muito brilhante. Agora está melhor. Fantástico. Tudo bem, pessoal. Muito obrigado por assistir este vídeo. Espero que tenha gostado. Vejo-te no próximo vídeo. 120. Materiais e texturas: Olá a todos. Bem-vindo de volta a outro vídeo desta seção. Neste vídeo, vamos falar sobre texturas e materiais. Quando você está projetando um objeto 3D, certeza você precisa de uma textura ou material. Como eu mencionei antes, você tem uma biblioteca bem no topo, então vamos em frente e clicar sobre isso. Aqui você tem opções diferentes, aqui temos coleções, temos uma coleção de formas diferentes, como você pode ver, aqui podemos usar essas formas como esta ou esta, e temos outras opções como bem, como ativos. Você tem muitos ativos 3D, e então nós temos materiais. Suponha que queremos mudar o material do nosso texto aqui. Aqui podemos escolher um desses materiais, eu vou para este. Você pode arrastá-lo e soltá-lo em seu texto 3D assim. Isso é muito legal, não é? Vamos renderizá-lo mais uma vez e podemos ver a diferença. Você pode ver como é incrível? Você pode facilmente mudar o material como desejar. Vamos mudar para outra coisa, por exemplo, este. Você pode escolher o seu texto e clicar sobre isso, perfeito, ou é melhor criar outra forma aqui. Vamos criar uma caixa aqui. Eu vou reduzi-lo, vamos movê-lo aqui, perfeito, e então eu vou mudar seu material para outra coisa, por exemplo, este aqui. É muito legal, não é? Você consegue reconhecer quantas possibilidades existem para você criar objetos incríveis lá? Isso é fantástico. Muito bem pessoal, muito obrigado por assistirem este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 121. Crie uma cena 3D: Olá a todos, e bem-vindos de volta a outro vídeo da seção. Neste vídeo, vamos começar a projetar nossa primeira cena 3D juntos. O que é uma cena 3D? Como você pode imaginar, uma cena 3D é uma cena que consiste em diferentes objetos 3D. Por exemplo, aqui temos uma cena porque temos pelo menos dois elementos aqui. No entanto, vamos criar uma cena mais interessante juntos. Primeiro de tudo, vamos remover esses dois objetos, muito bom. Vou manter o avião Shadow. Eu não preciso mais da câmera, então vamos remover isso. Depois disso, vou criar um texto. Vamos clicar no texto 3D ali, muito bom. Então eu vou mudar para UI assim. Vamos definir esta cor para ser, assim, muito incrível. Então eu vou duplicá-lo, e vamos mudar sua posição. Vamos mudar para UX, assim. Depois disso, vou mudar a cor para 3646ff. Isso é bastante incrível. Deixe-me ampliar. Então eu vou girá-lo em 90 graus assim, muito incrível. Deixe-me movê-lo para o texto da interface do usuário como este. Mais uma vez, vou girá-lo assim. Parece que o UX está deitado em cima da interface do usuário. Então eu vou diminuir o tamanho do UX por este cubo, assim. Vamos movê-lo para o lado esquerdo, bem incrível. Vamos mover esse texto da interface um pouco para cima porque precisamos obter essa sombra. Se você se lembra, quando você está usando um Plano Sombra, precisamos colocar nossos objetos acima dele para obter uma sombra. Fantástico. Então vamos escolher UX aqui, e movê-lo para o lado esquerdo, assim. Isso é fantástico. No entanto, eu vou fazer UX um pouco menor, eu acho que agora é melhor, muito bom. A próxima coisa que vou fazer é adicionar uma parede atrás disto. Vamos para a Biblioteca e depois para Zig-zag Shapes by Vectary, e aqui temos um Corner Wall. Vamos clicar nisso, muito incrível. Vou diminuir o zoom porque precisamos ampliar esta parede. Aqui, certifique-se de que a parede está selecionada, e use este cubo para ampliá-lo, e este cubo também, muito impressionante. Então o que vou fazer é mudar sua cor. Vamos mudar sua cor para algo assim, isso é muito bom. Vou fazer zoom. Então eu vou para a Biblioteca, e desta vez eu vou abrir Ambientes como este. aqui temos ambientes diferentes. Por exemplo, podemos tentar este, você pode arrastar, e soltá-lo assim. Vamos renderizar nossa cena para ver como fica. Isso é ótimo. No entanto, vou mudá-lo para outra coisa como esta. Lembre-se que o ambiente que você escolher vai afetar os reflexos, e também as sombras. Certifique-se de escolher o melhor ambiente possível. Vamos tentar este também, eu acho que é ótimo. Então vamos adicionar alguns dos ativos 3D à nossa cena. Vamos para a seção Ativos, e aqui procurar livros, e eu vou escolher este, muito incrível. Vamos ampliá-lo, fantástico. Vou procurar outra coisa, por exemplo, uma xícara de bebida como esta. Vamos torná-lo menor, movê-lo para o lado direito, fantástico. Então também podemos adicionar um donut. Vamos procurar donut. Podemos acrescentar, por exemplo, este, é um donut de poliéster baixo. Vou torná-lo menor, e colocá-lo ao lado da nossa xícara de bebida. Como podem ver, temos uma Luz Retangular. No entanto, vou adicionar outra luz à nossa cena. Vamos procurar a luz direcional, muito bem. Vou diminuir o zoom, vamos movê-lo para o lado direito, girá-lo um pouco. Acho que agora é melhor. Também podemos adicionar objetos diferentes à nossa cena, a fim de torná-la mais profissional, e também mais complexa. No entanto, para o bem deste curso, vou mantê-lo simples. Vamos renderizar nossa cena para ver como fica. É muito bom, não é? Você também pode ir em frente e adicionar alguns objetos de Coleções. Por exemplo, podemos ir em frente e abrir Formas Orgânicas, e aqui temos objetos diferentes como este. Vamos reduzi-lo, ou você pode usar outros objetos, por exemplo, formas arredondadas como este. Depende de você e do projeto em que você está trabalhando, então certifique-se de escolher grandes objetos para criar a melhor combinação possível. Pessoal, muito obrigado por assistir este vídeo, espero que tenham gostado. No próximo vídeo, falaremos sobre renderização e exportação. Vejo você então. 122. Renderização e exportação: Olá a todos. Bem-vindo de volta a outro vídeo da seção. Neste vídeo, vamos falar sobre renderizar sua cena. Como eu mencionei antes, sempre que você estiver trabalhando em um projeto 3D, você precisa renderizá-lo no final. Agora eu vou mostrar como você pode modificar as configurações de renderização, e também como você pode usar a opção de visualizador, e também como você pode exportar seu arquivo. Antes de fazer isso, vou fazer alguns ajustes no nosso plano sombra. Vamos selecionar nosso plano sombra, e eu vou mudar sua cor para algo assim. Vou escolher a cor, selecionador. Agora, vamos fazer nossa cena. É ótimo, não é? Para renderizar sua cena, você tem opções diferentes. Primeiro de tudo, vamos em frente e abrir o menu de renderização logo na parte superior. A primeira seção é como essas alternâncias. Você pode modificar a qualidade, você pode configurá-la para baixo, médio ou alto, e você pode clicar em “Iniciar visualização de renderização” como este. Você pode adicionar alguns efeitos a ele, você pode alterar a saturação, o contraste, o filtro de cores e também o equilíbrio de cores, etc. Por último, mas não menos importante, você pode exportar sua cena como uma imagem. No entanto, você precisa atualizar sua licença para obter essa funcionalidade e, em seguida, você pode clicar na imagem de download. A próxima característica importante do Vectary é visualizador. Quando você vai para a seção Visualizador, você tem diferentes opções aqui que você pode modificar, como texturas, cozimento, e estes são sobre luzes. Aqui, podemos escolher a visão da câmera central, e isso significa que a visão da câmera será centrada no objeto selecionado atualmente. Se você selecionar UI, a visualização da câmera será centrada neste objeto e a realidade aumentada está ligada, que é ótimo porque podemos obter uma cena de realidade aumentada também. Então nós geramos nosso código aqui, e agora podemos clicar em “Gerar”, leva algum tempo e está feito. Aqui, você pode obter o código. Como você pode ver, você pode copiar e colar o código iframe para o seu código HTML, ou se você não estiver desenvolvendo seu site ou o aplicativo, você pode facilmente entregá-lo ao seu desenvolvedor e ele ou ela poderia usá-lo perfeitamente. No entanto, se você quiser exibi-lo para seus clientes com antecedência, você pode alterar o formato de iframe HTML para link, e você pode copiar este link para sua área de transferência e enviá-lo para seus clientes ou seu amigo. Primeiro de tudo, vamos verificar aqui. Lá vamos nós, vai ficar assim, não é ótimo? Podemos segurar o Comando e ampliar, isso é fantástico, não é? Se você abrir a cena em seu telefone, você pode usar a opção de realidade aumentada, a fim aumentar a cena em seus ambientes, isso é muito incrível. Certifique-se de verificar. Você pode usar dispositivos Android e iOS para fazer isso, e isso é fantástico. A próxima opção é exportar. Aqui você pode exportar seu arquivo com qualquer formato que você quiser OBJ, DAE, USDZ, que é o formato de realidade aumentada para iOS, etc. No entanto, para usar esse tipo de funcionalidade, você precisa obter uma licença estendida para isso. Muito bem, pessoal, isso é tudo por esta secção. Espero que você tenha gostado deste vídeo e eu vou vê-lo no próximo vídeo. 123. Ferramentas de protótipo: Oi, todo mundo. Bem-vindo de volta a outra seção deste curso. Nesta seção, vamos falar sobre prototipagem. Mas primeiro, vou apresentá-los a algumas das melhores ferramentas para prototipagem de seus projetos. Na verdade, você pode usar Figma para criar um protótipo, no entanto, se você quiser fazer um protótipo sofisticado e complexo, eu recomendo que você use outros sites e aplicativos. Bem, quais são as melhores ferramentas de prototipagem? Número 1, ProtoPie, que é o meu aplicativo favorito também, porque é tão fácil de trabalhar e há uma versão de teste, e você pode experimentá-lo antes de comprar qualquer licença. Número 2, Zeplin. Número 3, Framer X e InVision Studio, Figma e Marvel. No próximo vídeo, começaremos a prototipar um de nossos projetos anteriores em Figma. Vejo você então. 124. Protótipo em Figma: Olá a todos, e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, vamos começar a prototipar nosso projeto de aplicativo financeiro juntos em Figma. Vou mostrar-lhe algumas técnicas úteis, a fim criar um protótipo muito suave e excelente. Primeiro de tudo, vamos em frente e ampliar. Vou fazer a tela interativa. Esta é a nossa página de boas-vindas, e como você pode ver, ela consiste em dois botões diferentes. Primeiro, vamos selecionar o botão de entrada e, em seguida, vamos clicar no protótipo no inspetor como este. Como você pode ver, um nó circular aparece. Vamos clicar sobre isso e arrastar e soltá-lo assim para se conectar ao sinal na tela. Em seguida, no seu lado direito, você tem diferentes opções para modificar. Não precisamos mudar nada na interação. No entanto, na seção de animação, vou abrir este menu suspenso e vamos escolher Smart Animate, que é um recurso muito grande. Você pode criar micro interações com ele. Como você pode ver, o tipo de animação está definido para facilitar. É muito bom. A duração é de 300 milissegundos. Está tudo bem. O que o Smart Animate significa aqui? Smart Animate reconhecerá as camadas em ambas as telas com o mesmo nome. Por exemplo, aqui temos formas e nesta tela, no sinal na tela, temos formas também com a mesma ortografia. Lembre-se, soletrar importa muito. Eles precisam ser idênticos. Quando o usuário clica no botão de login, porque aqui temos duas camadas com o mesmo nome, Figma irá animá-lo automaticamente para nós. Vamos em frente e clique no ícone Exibir. Bastante bom. Vou clicar no login. Lá vamos nós. Você viu o quão suave e bonita era aquela animação? É bastante incrível. Vamos tentar mais uma vez. É fantástico. Você pode até modificar a duração, se quiser. Por exemplo, vamos definir como 400, e eu vou tentar. Fantástico. Agora, por exemplo, vamos fazer a mesma coisa para o nosso botão de inscrição. Vou arrastá-lo e soltá-lo aqui. Vamos configurá-lo para Smart Animate, e isso é tudo. Bastante bom. A próxima técnica que eu vou mostrar é para um deslizamento dentro e deslizando para fora. É muito útil quando você quer animar seu menu de hambúrguer. Aqui em nossa página inicial, vamos selecionar nosso ícone de menu de hambúrguer. Vou arrastar e soltar esta seta para criar uma conexão com a nossa tela de menu como esta. Então aqui, eu vou configurá-lo para empurrar assim. No entanto, a seta para a direita deve ser selecionada assim. Agora vamos tentar. Mas antes disso, precisamos ir em frente e arrastar e soltar este ícone de jogo e colocá-lo aqui porque indica que esta prototipagem deve começar a partir desta página inicial. Agora vamos em frente e clique neste ícone de menu de hambúrguer. Lá vamos nós. Acho que é uma boa ideia mudar a duração para 200 milissegundos. Vamos tentar. É muito bom, não é? Agora vamos em frente e selecionar esta camada de sobreposição, esta escura, e eu vou criar uma conexão a partir daqui para a nossa tela inicial. Vamos configurá-lo para empurrar. Desta vez, a seta para a esquerda deve ser selecionada com 200 milissegundos de duração e selecionarei camadas correspondentes do Smart Animate. Porque nessas duas telas, temos essa imagem de perfil. Vou fazê-la animada automaticamente. Vamos tentar. Lá vamos nós. Se eu clicar aqui, você pode ver que nossa imagem de perfil está animada. Claro, você também pode usar animações simples. Por exemplo, podemos ir em frente e clicar no botão Entrar. Vamos fazer uma conexão com a nossa verificação OTP. Bastante bom. Vou configurá-lo para instantâneo assim. Mais uma vez, lembre-se de mover este ícone de reprodução para esta tela. Vamos tentar assim. É instantâneo. Você também pode alterá-lo para dissolver e dar-lhe uma tentativa. Lá vamos nós. É faseamento. Como você pode ver, criar um grande protótipo não é tão difícil em Figma. Pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. Vejo você então. 125. Mocking em um aplicativo no Figma: Olá a todos e bem-vindos de volta a outro vídeo deste curso. Neste vídeo, eu vou mostrar como você pode criar uma marcação em Figma. Primeiro de tudo, eu vou pedir que você abra o site FreeBieSUI. Quando você abriu, vamos procurar por Figma assim. Vou rolar para baixo e acho que é um bom exemplo. Vamos clicar nisso. Bastante bom. Eu vou rolar para baixo e aqui você pode clicar em Download Freebie, e ele será aberto em sua Figma. Aqui você tem exemplos diferentes. Eu vou ir em frente e escolher esta tela um, copiar isso e vamos colá-lo em nosso projeto aqui. Fantástico. Vou movê-lo para o lado direito. Ótima. Deixe-me ampliar. Como você pode ver aqui, você tem camadas diferentes. Se você abrir esta tela, aqui você tem o seu design e aqui está a imagem. Vou selecionar isso e vamos colocar uma imagem. Se você se lembra, nós já exportamos nossas páginas iniciais. No entanto, se você não fez isso, você poderia ir em frente e exportar qualquer um desses artigos. Então vamos colocá-lo aqui e clicar. Como você pode ver, ele foi invertido horizontalmente. Vou clicar com o botão direito do mouse sobre isso e vamos clicar em flip horizontal, isso é tudo. Consegues ver como é fácil criar a tua marcação no Figma? Tudo bem, pessoal, isso é tudo por este vídeo. Eu espero que você tenha gostado e eu vou vê-lo no próximo vídeo. 126. Como criar seu próprio portfólio online?: Olá a todos. Neste vídeo, vamos falar sobre portfólio online. Você, como designer de UI/UX, precisa absolutamente de um portfólio on-line para mostrar suas habilidades e habilidades de design. É extremamente essencial ter um portfólio excepcional para que você consiga um bom emprego, seja como designer em tempo integral ou freelancer. Como você pode criar seu próprio portfólio on-line sem escrever uma única linha de código? Para fazer isso, você pode usar sites como Dribbble ou Behance, que são projetados para designers e quase todos os empregadores precisam verificar seu perfil em um desses sites. Behance é uma plataforma online para mostrar e descobrir trabalhos criativos. É propriedade da Adobe e você pode criar um ótimo portfólio usando ele gratuitamente. Como alternativa, você pode usar o Dribbble para exibir sua arte e ele cria automaticamente um portfólio on-line para você. Você também pode personalizar seu portfólio como desejar, mas você precisa manter algo em sua mente. Para usar os serviços Dribbble gratuitamente, você precisa ser convidado por outros designers. Caso contrário, você pode comprar a assinatura premium. 127. Como usar o Dribbble? ?: Oi, todo mundo. Neste vídeo, vamos falar sobre como você pode usar Dribbble. Para usar os serviços Dribbble, primeiro, você precisa ter uma conta. Depois de criar sua conta, você pode procurar a arte de outros designers em busca de inspiração ou fazer upload de sua própria arte criativa. Todos os meses, você pode fazer upload de até 48 tiros e suas fotos devem atender às diretrizes do Dribbble. Você pode carregar imagens de alta resolução com os formatos PNG, JPEG e GIF e também GIFs animados para o seu perfil. Além disso, se você é um membro profissional, você também pode fazer upload de vídeos. Depois de fazer o upload do seu trabalho artístico, você pode definir um título para ele. Você também pode adicionar tags relativas para permitir que outros usuários encontrem seu trabalho artístico mais fácil. Por último, mas não menos importante, você deve escrever uma breve descrição para a sua foto, e então você pode publicá-la imediatamente ou no futuro. 128. Como usar o Behance?: Olá a todos. Neste vídeo, vamos falar sobre como você pode usar o Behance. Assim como usar o Dribbble, para usar os serviços do Behance, você precisa ter uma conta primeiro. Em seguida, você pode navegar e conferir outras obras de arte de designers, ou criar seu próprio projeto. A principal diferença entre Dribbble e Behance é a proporção de suas fotos ou projetos. No Dribbble, você não pode carregar fotos verticais como uma página de aterrissagem completamente. No entanto, no Behance, você pode fazer upload de imagens com qualquer proporção para exibir seu trabalho artístico. Eu recomendo usar Behance e Dribbble ao mesmo tempo e tentar usar seus recursos exclusivos para apresentar seu design perfeitamente. O Behance também permite que você carregue suas imagens e vídeos de alta qualidade em um único projeto, que é um ótimo recurso para apresentar um produto interativo em nenhum momento. 129. Como obter seu primeiro cliente?: Olá a todos, e bem-vindos de volta a outra seção deste curso. Neste vídeo, vamos falar sobre ideias de negócios e como você pode obter seu primeiro cliente e começar seu próprio negócio. Como designer de interface do usuário, você pode estar se perguntando como você pode obter seu primeiro cliente. Bem, espero que haja muitas maneiras de começar. A primeira etapa de encontrar clientes é ter um portfólio forte. Se você ainda não assistiu a seção de portfólio, sugiro que você assista a seção de portfólio deste curso. Depois de criar seu portfólio, você precisa se perguntar, que tipo de empregos você gosta de ter? Você quer trabalhar como designer em tempo integral ou você quer trabalhar como freelancer. Se você quiser trabalhar como designer de interface do usuário em tempo integral, você precisa preparar seu currículo e candidatar-se às empresas nas quais deseja trabalhar. Por outro lado, se você quiser trabalhar como freelancer, você pode se registrar em alguns sites freelancers e encontrar seu primeiro cliente facilmente. Há tantos sites lá fora que você pode trabalhar com. Por exemplo, Freelancer.com, Fiverr, Upwork, 99designs, Dribbble, etc Certifique-se de verificá-los e descobrir qual é a opção mais adequada para você. 130. Como começar seu próprio negócio?: Olá a todos. Espero que esteja indo bem. Neste vídeo, vamos falar sobre como você pode começar seu próprio negócio. Começar um negócio é difícil, então você precisa determinar o nível de sua motivação antes de entrar nesse processo. Quando você está pensando em começar um negócio, você deve saber que leva muito tempo, energia e paciência para alcançar seus objetivos. Se você está ciente de todos esses aspectos, você está pronto para dar o próximo passo. Em primeiro lugar, você deve avaliar seu nível de habilidades e descobrir que tipo de serviços você gosta de oferecer, então você precisa descobrir quem são seus potenciais clientes. Além disso, você deve trabalhar em seus preços e analisar seus números. Em segundo lugar, você precisa registrar sua própria empresa. este respeito, recomendo obter alguns conselhos de um advogado e certificando-se de que você entende todos os requisitos legais associados ao registro de uma empresa. Depois de registrar sua empresa, você precisa começar a criar sua própria marca, projetar um logotipo para sua empresa e escolher as cores da sua marca. Por último, mas não menos importante, você deve definitivamente projetar seu próprio site porque é a parte mais crucial do seu negócio. Agora que você tem seu site pronto, é hora de pensar sobre sua estratégia de marketing. Se você não pudesse oferecer seus serviços e habilidades para as pessoas certas, seu negócio não seria bem sucedido, não importa quão profissional e útil suas habilidades sejam. Portanto, certifique-se de que você tem um ótimo plano de marketing e executá-lo com precisão. 131. Como dimensionar seu negócio?: Olá a todos. Espero que esteja indo bem. Neste vídeo, vamos falar sobre como você pode escalar seus negócios. Agora que você está dirigindo seu próprio negócio, você pode estar se perguntando como você pode dimensionar seu negócio, ou, em outras palavras, como você pode aumentar drasticamente a receita de seu negócio. Quando se trata de negócios on-line, a maioria dos empresários geralmente se concentra em uma região geográfica por causa da simplicidade. É uma ótima ideia para iniciar sua jornada, no entanto, não é suficiente para desenvolver um negócio lucrativo. Como você pode imaginar, a melhor solução é expandir suas opções globais e obter clientes de todo o mundo. O próximo passo é tentar automatizar seus processos manuais que podem evitar desperdiçar seu tempo, porque não importa quantos clientes você tem, há apenas 24 horas por dia. Você pode utilizar o site de buffer para gerenciar suas mídias sociais automaticamente. Além disso, há muitas outras ferramentas para lembrar seus clientes sobre suas faturas em nenhum momento. Você não precisa gastar tanto tempo nessas tarefas que podem ser delegadas e feitas automaticamente, em vez disso, você deve se concentrar no seu conteúdo e no resultado de cada projeto. 132. Comunicar com seus clientes: Oi, todo mundo. Neste vídeo, vamos falar sobre a comunicação com seus clientes. A comunicação eficiente com os clientes desempenha um papel fundamental em qualquer tipo de negócio, e para os designers, não há exceções. A maneira como você interage com seus clientes é tão importante se você quer ser um empreendedor de sucesso. Como você deve lidar com a situação se algo der errado? Bem, em qualquer tipo de negócio, há alturas em que algo dá errado e é normal. No entanto, a maneira como você enfrenta essas dificuldades é tão importante. Suponha que você defina um prazo para entregar o projeto final ao cliente e, no meio do processo de design, você entenda que pode demorar mais tempo. Bem, neste caso, você precisa informar seu cliente sobre isso o mais rápido possível e tentar encontrar uma boa solução que funcione para ambos. 133. Contrato: Oi, todo mundo. Neste vídeo, vamos falar de contratos. Assim como qualquer outra empresa, você deve ter um contrato adequado em vigor para iniciar um projeto. Não importa o quão grande ou pequeno esse projeto é, ter um contrato mantém tudo claro e protege os direitos de ambas as partes. O que deve ser incluído no acordo? A coisa mais importante que você precisa adicionar ao contrato é a declaração de seus serviços de forma clara, e às vezes também é ainda melhor mencionar o que você não fará para o cliente. Certifique-se de mencionar o prazo para entrega do projeto e também sobre o cronograma de pagamento. Lembre-se, que o contrato não deve ser apenas sobre as coisas que podem dar errado. É melhor se concentrar no que deve ser feito corretamente. Em geral, é uma boa idéia obter aconselhamento jurídico de um advogado com antecedência. 134. Onde encontrar inspiração do curso mundial?: Oi, todo mundo. Neste vídeo, vamos falar sobre Inspiração e Recursos. Ser inspirado por outros designers é absolutamente bom e importante. No entanto, você precisa ter certeza de que você não copia seus trabalhos. Se você estiver interessado em seus projetos e quiser usar partes deles em seu projeto, você precisa pedir permissão primeiro. Como você deve se lembrar, falamos sobre Behance e Dribbble nas seções anteriores deste curso. Estes dois sites são os lugares mais populares para encontrar inspiração artística. Há tantos sites e páginas do Instagram que você pode se referir como uma fonte de inspiração. Você também pode mostrar aos seus clientes o que você tem como inspiração para saber quais são suas expectativas. 135. Recursos de imagem: Olá, todo mundo. Neste vídeo, vamos falar sobre recursos de imagem. Nós, como designers, trabalhamos muito com imagens. Pode ser qualquer tipo de imagens na forma de perfis, produtos, etc. Ter recursos eficientes é absolutamente essencial, a fim de obter as imagens mais adequadas para nossos projetos. Há tantos sites que oferecem uma variedade de imagens. Alguns deles são pagos e alguns deles são gratuitos. No entanto, se você está procurando imagens livres de royalties para usar em seus projetos sem qualquer dúvida sobre sua licença, eu sugiro que você use Unsplash.com. É um dos melhores sites por aí, para encontrar praticamente qualquer tipo de imagens em diferentes categorias. Lembre-se de que você deve ter certeza sobre o licenciamento de imagens que deseja usar. Caso contrário, você pode estar em apuros. 136. Qual é seu próximo passo?: Oi pessoal. Neste vídeo, falaremos sobre a próxima etapa como designer de UX de interface do usuário. Agora que você aprendeu muito sobre design de interface de usuário, é hora de dar o próximo passo. Agora você está pronto para começar a criar aplicativos e sites móveis incríveis. Como designer, você deve sempre ser criativo. Portanto, tente se desafiar todos os dias para descobrir segredos ocultos do design de IU e UX, você provavelmente já deve ter ouvido falar que a prática leva à perfeição, mas lembre-se de que seu design deve nem sempre seja perfeito. A única coisa que importa, sua progressão e melhorias. Acho que é uma boa ideia mudar essa frase famosa, praticar faz progresso. Com isso dito, você deve se tornar um designer melhor a cada dia. Se você quiser saber mais sobre design UI UX e aumentar o nível de suas habilidades de design. Tenho boas notícias para você. Eu tenho um canal no YouTube onde coloco toneladas de coisas gratuitas que você pode achar interessantes. Portanto, certifique-se de se inscrever no meu canal para não perder meus próximos tutoriais. Se você quiser ser notificado sobre atualizações de cursos ou novos cursos, você também pode me seguir no Skillshare. Muitos de vocês me pediram para criar um curso que ajudasse criar sites modernos visualmente sem código. E eu gostaria de anunciar que publiquei recentemente um curso abrangente que ensina tudo o que você precisa saber para se tornar um web designer e desenvolvedor web de classe mundial, você aprenderá como converta visualmente seu Figma projetado para sites personalizados e torne-se um freelancer de sucesso se quiser aprender mais sobre a teoria das cores e entender como criar esquemas de cores impressionantes para sua interface do usuário UX projetos de design. Você pode conferir meu outro curso chamado criar esquemas de cores incríveis para seus projetos de design de UX de interface do usuário. Além disso, se você quiser aprender como criar cenas 3D e ilustrações 3D, você pode conferir meu outro curso. Muito ensiná-lo a se tornar um ilustrador 3D usando o Blender. Por último, mas não menos importante, agradeço por assistir a este tutorial. Foi uma longa jornada para nós dois e espero que você tenha gostado. Desejo-lhe boa sorte, e mal posso esperar para ver sua arte.