Do zero ao herói do web design: conquiste o Figma e crie sites de cair o queixo em 2024

1. Introdução do curso: Olá, bem-vindo ao meu bootcamp de design Figma and UI UX. A única aula que você precisa para criar, design web ou de aplicativos. Meu nome é Peter, e estou muito empolgado por ter tido o privilégio de ser seu instrutor neste curso. Nos últimos anos, milhares de pessoas aprenderam a programar e se atualizar sozinhas. Esta aula abrange todos os conceitos e tópicos que você precisa aprender e dominar sobre Figma e web design. Começamos com os conceitos básicos do Figma, como barra de ferramentas, camadas, painel, sistema de grade, teoria das cores , tipografia, trabalho com imagens , wireframes, animações e prototipagem e muito mais. Também criaremos um projeto do mundo real. Agora você pode adicionar ao seu portfólio. Esta aula é para qualquer pessoa que queira aprender sobre Figma como designer de UX de UI ou para alguém que queira apenas ter um ou para alguém que queira apenas ter conhecimento geral de design de sites ou aplicativos, independentemente da experiência anterior. É um balcão único. É a única aula que você precisará aprender sobre Figma. Ao final desta aula, você pode esperar criar não apenas aplicativos ou sites móveis, mas também contornar a criação de miniaturas ou conteúdo de infográfico para usuários de mídia social. Obrigado por nos visitar. Estou super confiante de que você vai adorar essa aula. 2. (1) Introdução à Figma: Olá pessoal. Bem-vindo à primeira palestra do nosso curso Figma. Vou apresentar a todos vocês o tópico Figma. E também aprenderemos a diferença entre nossa UI e UX. Então, sem mais delongas, vamos começar com a palestra de hoje. Então, o que é sigma? Portanto, o Figma é, na verdade, uma ferramenta de design de colaboração em tempo real baseada em nuvem. Bem, a nuvem é apenas um espaço virtual na Internet. Ele age como um servidor. Todos vocês devem ter usado aplicativos baseados em nuvem como o Google Drive e outras coisas. Portanto, a nuvem é apenas um servidor virtual que está presente na Internet. Este Figma permite que você colabore com outras pessoas em tempo real enquanto faz seu design. Portanto, não se confunda desde a primeira tentativa, ok, você aprenderá tudo passo a passo. Portanto, não se preocupe, basta seguir o curso. E se você tiver alguma dúvida, pode sempre comentar abaixo. Tudo bem, então quais são algumas das características do Figma? Então, o Figma basicamente nos fornece ferramentas de design. Podemos projetar seu projeto móvel. Digamos que você esteja tentando criar um aplicativo Android. Então, antes de realmente começar a codificar qualquer aplicativo ou site que você esteja tentando desenvolver. Ele sempre tem um front-end e um back-end. front-end basicamente significa que você está tentando enfatizar a parte da interação, o que o usuário verá, o que os clientes ou seus usuários ou os clientes, veremos o que será exibido na tela deles. Essa é a parte frontal. Basicamente, como seus itens , seus botões, seu texto, imagens , gráficos, tipografia, tudo isso está incluído na parte frontal. Então, se vocês estão familiarizados com o desenvolvimento web, todos devem saber que existe um front-end e um back-end. front-end basicamente significa que você está O front-end basicamente significa que você está realmente lidando com coisas de design, como miniaturas, ícones , botões, topografia, gráficos e tudo mais. Então essa é a parte frontal. Essa é a parte que os usuários que seus clientes verão. Portanto, qualquer aplicativo, qualquer site tem um front-end e um back-end. O back-end lida com a parte do servidor. O que acontecerá quando o usuário clicar em um botão específico? Qual é a função que ele precisa ser executado? Qual é a funcionalidade ou quais são as coisas que ela precisa exibir, como será exibida e tudo isso depende da parte do back-end. Portanto, todo o front-end e o back-end devem ser codificados. Agora você pode usar qualquer um dos idiomas, ok, existem tantos idiomas diferentes, como para o seu, para o seu desenvolvimento web, você tem seu HTML, CSS. Existem algumas estruturas para CSS, como seu tailwind, CSS Bootstrap e todas essas coisas. Portanto, você não precisa se preocupar com isso, porque esta aula não se concentra em todos esses diferentes componentes ou front-end, estamos apenas enfatizando a parte de design. Então, antes mesmo de tentarmos codificar o código do front-end, antes mesmo de tentarmos desenvolver a parte do front-end. Obviamente, seja front-end ou back-end, tudo precisa ser codificado. Então, antes de realmente saltarmos para a parte de codificação, queremos realmente formar um layout. Queremos formar um plano com base no qual possamos desenvolver nosso front-end. Então essa é a razão pela qual a parte de UI ou UX entra em cena. Lá temos nosso Figma e outras ferramentas de design com a ajuda das quais podemos realmente projetar nosso projeto em qualquer aplicativo. Portanto, com o Figma, você pode não apenas criar um projeto móvel, mas também criar um aplicativo para tablet ou um projeto para tablet. E você pode até mesmo criar a aparência de um aplicativo de desktop ou aplicativo da web em um laptop ou na tela do computador. Então, essas são algumas das características do Figma. Tudo bem, outra característica é que existe um recurso de prototipagem do Figma. Agora, o que realmente significa prototipagem? Bem, imagine que você está criando um aplicativo, certo? Agora, quando você está tentando desenvolver o aplicativo, você não gostaria apenas ter um protótipo ou algo parecido, digamos, não fosse um estágio perfeito para sua implantação, mas outro estágio de comprovação, um protótipo como se você ainda estivesse lidando com essas coisas. Você ainda está testando essas coisas. Então esse é o seu protótipo. Portanto, mesmo no seu Figma, ao criar seu próprio design, você pode usar o recurso de prototipagem do Figma para realmente ter uma aparência e ver como será exatamente a aparência do meu aplicativo em tempo real. Quando eu clico nesse botão, como ele vai interagir e todas essas coisas serão feitas no Figma. E a melhor parte do Figma é que você não precisa codificar nada. Tudo é baseado em GUI e você precisa apenas clicar em algumas das coisas. E há alguns atalhos de teclado que você pode usar. Então, tudo isso é muito fácil e muito simples de acompanhar. Então não se preocupe, este curso é muito fácil e eu vou explicar tudo passo a passo para você . Tudo bem, outro recurso do Figma é que é uma ferramenta de colaboração. exemplo, como mencionei logo no início, essa colaboração significa basicamente que você pode colaborar com seus colegas ou, digamos, com seus clientes. Digamos que você seja um desenvolvedor freelancer, você é um desenvolvedor de UX freelance, certo? Então você quer mostrar suas ideias, seu material de design para seu cliente. Então, como você vai mostrá-los? Você vai pegar todas essas coisas e enviar o arquivo de vídeo para eles? Não. Você pode simplesmente compartilhar seu ID de login ou melhor, dizer que pode simplesmente compartilhar o link do seu projeto. Eles podem fazer login e depois poderão ver no que você está trabalhando. E eles poderão ver isso em tempo real. Então, digamos que eles deixem alguns comentários sobre o projeto dizendo que querem mudar a cor do esquema de cores da pele do seu projeto. Eles querem um estilo de fonte diferente. Eles podem fazer isso e você poderá ver isso em tempo real. Então essa é a característica mais fantástica do Figma. Agora, o Figma não é apenas o único banquinho de design disponível no mercado. Também existem outras ferramentas, como o Adobe XD. Então surge a pergunta: por que não estamos usando o Adobe XD? Adobe, uma marca tão boa? A Adobe tem produtos diferentes, como Premier Pro, After Effects, Photoshop, Lightroom e tudo mais. Então, em vez de usar esse software premium bonito e um software muito confiável, por que estamos usando esse Figma? Bem, a razão por trás disso é que o figma é totalmente gratuito para usar o Adobe XD. Você precisa pagar algum preço. A Adobe tem sua assinatura Creative Cloud. Você precisa pagar a taxa de assinatura mensal ou anual para acessar esses aplicativos, caso contrário, não conseguiria usá-los. Tudo bem, então essa é a parte principal e principal do fêmur: seu uso é totalmente gratuito e fornece uma ferramenta colaborativa. Tudo bem, agora, isso se trata da parte da colaboração. Digamos que você esteja em algum lugar dos Estados Unidos e queira mostrar seu projeto e sua barriga esteja em algum lugar na Europa ou na África do Sul. Então, como eles verão seu projeto? Você pode simplesmente compartilhar seu link. Então essa é a flexibilidade que seu Figma oferece. Agora, chegando à parte sobre UI e UX, essas coisas são iguais? Existe alguma diferença? E se houver uma diferença, qual é a diferença entre UI e UX? Ui basicamente significa sua interface de usuário, enquanto UX significa experiência do usuário. Ui lida com o design visual. Qual seria a aparência do aplicativo , de um site ou de qualquer um dos seus projetos. E com a ajuda da Figma, você não está lidando apenas com a parte de design do aplicativo. Você pode até mesmo criar miniaturas para seus vídeos do YouTube. Você pode até criar infográficos. Você pode até mesmo criar modelos de slides e tudo mais. Portanto, com o Figma, você não pode apenas lidar com a parte do aplicativo, mas também criar seu conteúdo. Essa é a melhor parte de Figma. Então, basicamente, sinaliza que você vai lidar com as cores, o layout, a tipografia, os estilos de fonte, como seria a aparência do telefone? Essa é a parte topográfica que foi projetada. Já UX significa basicamente que você vai lidar com a parte da experiência do usuário. Agora, como você realmente determinará isso? Esse usuário terá uma experiência fantástica ao usar nosso aplicativo. Então, definitivamente, haverá algumas pesquisas de usuários em andamento. exemplo, digamos que você esteja conduzindo uma pesquisa e perguntando seus clientes ou clientes como você gostaria que nosso aplicativo fosse? Assim, seus clientes responderiam algo como : digamos que eu queira uma interface de usuário muito limpa e que as coisas sejam simples e muito sofisticadas. Não quero animações complexas. Não quero que nada complexo esteja na frente da minha tela. Então, eu não quero nenhum termo técnico. Quero que as coisas sejam exibidas na frente da minha tela em termos simples e leigos. Então é isso que seus usuários pesquisam. Portanto, antes de desenvolver a parte de UX, você precisa fazer uma pesquisa de usuário adequada. Precisamos enfatizar a redação. Então é isso que você vai ajustar ao conteúdo do seu aplicativo, certo? Então essa é a sua parte de redação. Então você tem os fluxos de trabalho que, digamos, se você clicar em um botão, quais outras coisas deveriam acontecer. Então esse é o seu fluxo de trabalho. Mas quais são os diferentes estágios que acontecerão quando você interagir com os botões ou ícones no aplicativo. Então esse é o seu fluxo de trabalho. E também como o usuário interagiria com o aplicativo e qual psicologia você usará para engajar seu público, seus clientes, com o aplicativo ou site o máximo possível. Então essa é a sua parte de UX. Mas, embora essas sejam as diferenças entre UI e UX, existem algumas coisas que se sobrepõem à UI e à UX, e essa é a sua wireframing. Agora, o que realmente significa wireframing? Portanto, embora tenhamos uma palestra dedicada sobre wireframing, deixe-me uma breve introdução sobre wireframing. Então, antes de você realmente, digamos que eu sou um cliente venha até você e diga que eu quero criar um site de portfólio. Agora, o cliente é na verdade um contador credenciado e está nesse setor há dez anos e tem ótimos clientes. Tudo bem? Agora, se você precisar desenvolver um site de portfólio para esse cliente, então qual conteúdo você realmente se encaixa na página da primeira página, na página inicial Sobre página Fale conosco e tudo mais. Então, apenas formar um layout é sua parte de wireframe. Tudo bem, então vem a usabilidade. A usabilidade é outra semelhança comum entre você e o UX. Isso significa que como o usuário usaria nosso aplicativo? Portanto, isso não é apenas parte da interface do usuário, também faz parte da parte do UX e, em seguida, surge a prototipagem conforme discutido. A prototipagem é apenas um aplicativo desenvolvido, embora não na fase final de produção, mas na fase de teste, em um recurso como se você estivesse realmente usando o aplicativo. Portanto, embora o aplicativo não esteja totalmente pronto , você está realmente testando. Na verdade, você está simulando de uma forma que parece que o aplicativo está completamente pronto. Então é isso que você está prototipando realmente significa. Então, sim, tudo se resumia à soma da introdução de Figma e todas essas coisas. Você pode simplesmente abrir qualquer navegador que estiver usando. Eu prefiro o Google Chrome. Você pode simplesmente abrir qualquer navegador e acessar figma.com. Depois de ir até lá, você verá esta página e poderá simplesmente criar sua própria conta. Então, depois de fazer o login, é isso que você verá. Agora, depois de acessar esta página, basta dizer o nome da sua equipe. Você pode simplesmente formar um D ou então você pode fazer isso mais tarde. Depois de formar uma equipe, o que acontece é que você pode simplesmente compartilhar link da sua equipe e os membros podem se juntar a esse grupo. E eles poderão ver seus projetos que você está criando para esse grupo. Agora, embora eu tenha dito que esse software Figma é totalmente gratuito, existem algumas limitações. Isso significa que você pode ter arquivos ilimitados. Por exemplo, digamos que você tenha alguns de seus próprios recursos, como suas imagens, alguns vídeos que deseja incorporar. Tudo isso é completamente ilimitado. Você pode carregar um número N de arquivos, mas só pode criar três arquivos e criar apenas um projeto. Então, esse é o revés de usar seu plano gratuito. Embora o plano gratuito possa parecer que, você sabe, pode não ser suficiente para você utilizar todos os recursos. Mas para esse curso em particular, você não precisa pagar um único centavo para começar com o Figma. Tudo bem, então vamos começar com o plano gratuito e continuaremos na próxima palestra. 3. (2) Visão geral de Figma: Bem-vindo de volta ao curso. Neste tutorial em vídeo, darei a todos uma visão geral rápida do Figma como espaço de trabalho. E aprenderemos algumas das coisas que temos em Figma. Tudo bem, então, assim que você se inscrever e criar sua própria conta, você receberá um e-mail de confirmação para seu e-mail. Então, vá até lá e confirme que é você e está tentando criar uma conta Figma. Depois de fazer isso, mantenha todas as coisas que ele solicita que você faça. Eles também tentarão levá-lo para um passeio rápido, tentarão fazer um passeio rápido até Figma, mas não precisam se preocupar com isso. Eu faço exatamente a mesma coisa aqui. Tudo bem, então agora, quando você realmente acessar esta Figma como página inicial, você verá que tem duas opções. Você pode criar um novo arquivo de design ou um novo arquivo de fig jam. Agora, o que é esse grande arquivo de congestionamento? Então, pense nisso como um quadro branco onde você discute suas ideias e explora algumas ideias. Tudo bem, então esse é o seu arquivo de exame. Já o arquivo de design é onde você realmente tentou projetar e criar protótipos para seu aplicativo. Como você pode ver na guia Resultados, nesta guia específica do lado esquerdo, você verá que tem motivos. Portanto, nos projetos recentes em que você está trabalhando , você verá rascunhos. Assim, as coisas que você não salvou manualmente serão salvas automaticamente e você verá, e você as verá aqui. Então, assim como no seu Gmail, você tenta redigir um e-mail e não o envia, o que acontece lá? Ele é salvo automaticamente na parte de rascunhos. Isso, isso é exatamente o que sua Figma está fazendo aqui. Então aqui você verá suas equipes. Então, quantas equipes você criou até agora e quem são os membros da equipe? Em que projeto de equipe você está trabalhando? Então, todas essas coisas você poderá ver aqui. Agora, como este é o primeiro vídeo de outro, devo dizer que, logo no início do nosso curso, não criei nenhum arquivo até agora. Então, todas essas coisas que você verá aqui, esses são os arquivos que já foram criados pela equipe Figma. E isso é apenas para que você possa dar uma olhada rápida e entender como usar essa ferramenta de design. Então, vamos tentar criar um novo arquivo de design. E quando eu clicar aqui, você verá que é assim que figma tem um espaço de trabalho. Agora, eles realmente tentarão lhe dar uma dica de que você deseja fazer um passeio rápido por Figma? Então, basta clicar nesses novos tanques e continuar com o espaço de trabalho. Então, na parte superior, você pode ver que o que você tem é sua barra de ferramentas. Isso é chamado de barra de ferramentas porque aqui você tem n várias opções para trabalhar. Agora, além deste rascunho, você o verá como sem título. Então você pode simplesmente clicar nos rascunhos. Mas, em vez disso, devo dizer que você pode simplesmente clicar neste sem título e renomear o projeto. Então, digamos que eu queira dar um título a isso como teste. Então, o título do meu projeto é teste. E quando clico nesse botão suspenso, tenho a opção de mostrar o histórico de versões. Isso significa quais foram as outras coisas que eu tinha feito anteriormente? Se eu quiser exportar isso em um formato de arquivo PNG ou JPEG, posso fazer isso. Se eu quiser duplicar esse projeto, posso fazer isso. Se eu fosse renomear isso, também posso fazer isso. Se eu quiser excluir isso, se eu quiser adicionar este arquivo aos favoritos, se eu tiver, se eu quiser mover este projeto para outra equipe ou, digamos, outro local de pasta. Eu também posso fazer isso. Então, essas são todas as funcionalidades na minha barra de ferramentas. Na parte superior, temos a barra de ferramentas, para que você possa ver a barra de ferramentas. Eu tenho esse ícone de cursor. Depois de clicar nesse menu suspenso, tenho a opção de mover ou escalar. Então, mova-se, basta clicar em algumas das competências que você pode ter em seu espaço de trabalho e movê-las de um local para outro. A parte da balança realmente tentará dimensionar seu tamanho. Então, digamos que você queira escalar 1,5 vezes. Então você pode fazer isso com a ajuda da balança. Então você tem isso como moldura, seção e fatiador. Se eu clicar na moldura, se eu clicar aqui, você pode ver que uma moldura foi criada para nós. Agora, o que isso nos permite fazer? Nesta moldura? Você pode realmente desenhar formas. Na verdade, você pode desenhá-lo usando a ferramenta caneta. Você pode realmente adicionar algumas e todas essas coisas. Então, digamos que usando esse botão de caixa retangular, eu tenha a capacidade de criar qualquer forma que eu quiser. Portanto, existem algumas formas predefinidas que você pode criar simplesmente arrastando para fora. Então você tem um retângulo, uma seta alinhada, a elipse, a estrela do polígono e pode até mesmo colocar uma imagem ou um vídeo, se quiser. Agora você pode ver que existem algumas teclas de atalho que você pode pressionar no teclado para realmente desenhar seu retângulo. Então, digamos que eu clique nesse retângulo e tenha que desenhar isso. Agora, digamos que, em vez de clicar aqui, se eu quiser desenhar uma seta, o que posso fazer em vez disso? Eu posso simplesmente, deixe-me deletar isso. A partir de agora. Vou apenas excluir isso usando a tecla delete. Tudo bem, posso segurar minha tecla Shift e apertar meu botão no teclado. Depois de fazer isso, você pode ver que a seta foi selecionada. Você pode ver que a forma da seta foi selecionada. Agora eu posso simplesmente arrastar isso e a forma da seta será desenhada. Tudo bem? Então, isso é o que eu posso fazer no meu quadro. Então, esta é a minha moldura e você pode ver todas as formas diferentes que eu tenho na minha moldura específica. Então, no lado esquerdo, essa parte específica é meu painel Layers. Você pode ver que tenho camadas diferentes e atualmente estamos trabalhando na página número um. Então você deve ter visto em muitos sites, temos a página inicial, temos a página sobre, temos a página Fale conosco. Na verdade, até mesmo no meu site, você verá minha página inicial. Sobre a página de contato. Quantos cursos eu tenho e todas essas coisas, tudo isso está no meu site. Portanto, há várias páginas. Assim, se você quiser criar primeiro a página inicial, a página branca será projetada para a página Fale Conosco. Então, talvez você queira criar os serviços que oferece a toda essa página. Então, basta clicar neste ícone de adição e várias páginas serão criadas para você. Tudo bem, então você pode simplesmente excluir isso se quiser. Digamos que você queira renomear esta página para, digamos , a página Sobre nós. Então você pode fazer isso se quiser deletar o paciente por três, você pode fazer isso. Se você quiser duplicar algumas páginas, digamos que, no paciente de uma, o que quer que tenhamos criado até agora, eu queira duplicar isso para que eu possa simplesmente duplicar e criar uma nova página com o título da página número dois. Exatamente as mesmas coisas que tenho na minha página número um. E se eu quiser fazer algumas pequenas mudanças, posso fazer isso no meu pH2. Então é isso que o Figma nos permite fazer. Tudo bem, agora passando para a próxima parte, há ativos no painel de camadas. Agora, esses ativos nos permitem criar alguns dos ativos para que possamos usar diferentes projetos Sigma. Então, digamos que agora, esse quadro em particular tenha um emaranhado e uma forma de seta. Agora, digamos que eu queira criar um ativo com isso, embora esse ativo não signifique nada, ok, é inútil. Nem é uma parte de design, mas só por causa disso, estou criando um ativo para poder usá-lo também em meus outros projetos. Eu posso fazer isso. Eu tenho a funcionalidade para fazer, para fazer isso. Tudo bem, então é isso que nossos ativos nos permitem fazer. Agora, nessa barra de ferramentas, eu também tenho a ferramenta caneta. Usando a ferramenta de caneta, o que eu posso fazer é clicar em um vértice, eu posso clicar nos outros vértices. Eu posso arrastar isso para criar um objeto. Então, digamos que esse objeto tenha sido criado. Então, isso está se formando como um triângulo. Se você puder ver um triângulo de alguma forma, um triângulo foi formado. E para sair disso, eu posso, o que eu posso fazer é clicar duas vezes em qualquer um dos vértices e ele realmente formará um. Eu posso simplesmente clicar em Concluído. E você pode ver que uma forma foi formada. Isso é o que anexar nos permite fazer. Eu também tenho a habilidade de desenhar usando a mão livre, então é isso que minha ferramenta Pencil nos permite fazer. Então, digamos que eu esteja desenhando isso usando a ferramenta do lápis. retângulo foi formado, mas desta vez, eu não precisei realmente mapear os vértices. Tive que desenhá-lo usando a mão livre. Portanto, se você tiver um tablet gráfico perfeito, poderá usar a ferramenta de lápis com muita eficiência. Caso contrário, usando o mouse, não é a melhor maneira de desenhar uma forma. Em vez disso, você pode usar a ferramenta caneta. Tudo bem, então temos a caixa de texto, certo? Então você pode, o que você pode fazer, você pode simplesmente clicar neste texto ou você pode simplesmente pressionar a tecla T no teclado e clicar em qualquer lugar no quadro. Agora, você pode digitar qualquer coisa que você gostaria de dar e até mesmo definir um pouco da cor do seu texto. Você pode formar o estilo do texto se tiver, digamos que você queira definir isso como, você deseja formar esse texto no formato negrito e sublinhado. Então, como você pode fazer isso? Se você quiser aumentar o tamanho dessa fonte, você pode até mesmo fazer isso para enfatizar esse painel de propriedades de design, que está no lado direito. Portanto, talvez não consigamos vê-lo completamente. Apenas me dê um segundo e você poderá ver completamente esse painel de propriedades de design. Então, agora espero que você possa ver esse painel de propriedades de design. E aqui você pode ver que eu tenho a capacidade de realmente dar cor a esse texto. Então, digamos que eu queira dar essa cor para poder dar essa cor vermelha. Tudo bem, eu tenho a capacidade de centralizar esse texto ou talvez alinhar à direita, alinhar à esquerda e tudo mais. Então, eu tenho a capacidade de exportar tudo isso em formato PNG. Se eu quiser fazer isso, eu posso fazer isso. Portanto, neste painel de propriedades de design, você pode simplesmente selecionar qualquer elemento e ver todos os elementos de design com os quais você pode lidar. Então, aqui você pode projetar, criar protótipos até mesmo inspecionar alguns dos elementos. Agora, o que esse elemento de inspeção realmente significa? Portanto, se você trabalhou em desenvolvimento web, deve estar familiarizado com a parte HTML e CSS. Assim, você pode ver toda a parte do design é feita com o CSS, com a ajuda das folhas de estilo em cascata do CSS, é isso que seu CSS representa. Então, aqui, se você quiser fazer exatamente a mesma coisa em sua página da web, basta copiar esses estilos CSS e colá-los em seu arquivo. Você pode até mesmo importar isso no formato CSS. Se você quiser desenvolver um aplicativo iOS , você pode copiar tudo isso e colá-lo em seu projeto iOS. No Android, você pode fazer isso da mesma forma. Portanto, mesmo que você não consiga incluir tudo isso completamente em seu projeto Android ou iOS, praticamente a parte do design é feita pela própria Figma. Podemos simplesmente copiar o código e, na maioria deles, maior parte do trabalho é feita para todos vocês. Essa é a característica fantástica do Figma. E sim, é basicamente isso. Também temos o ícone da mão que permite que você se mova de uma parte para outra. Então, digamos que você tenha essa interface número dois, você tenha esse quadro um. E vamos ver, você também cria mais um quadro. Digamos que você esteja criando mais um quadro. Então, agora você quer passar de uma parte para outra. Você pode simplesmente arrastar isso usando este ícone de mão. Tudo bem, digamos que você queira deixar alguns comentários especiais para essa caixa retangular em particular. Então você pode simplesmente deixar aqui uma coisa comum que faz, essa caixa retangular parece legal. E você pode simplesmente colocá-lo aqui. Agora, ao compartilhar o link do seu projeto Figma, você pode ver que pode compartilhar o link. Você pode simplesmente copiar este link e compartilhá-lo por e-mail ou em qualquer plataforma de mídia social. E quando eles entram neste projeto, eles podem simplesmente clicar nele e ver o comentário que deixaram. E eles podem até mesmo fazer mudanças por lá. Então, digamos que essa é a pergunta que estou tentando fazer e que outra pessoa, meu outro colega ou meu cliente, possa aplicá-la. Tudo bem. O tamanho da caixa parece legal, mas eu quero mudar a cor da forma para que eles possam deixar um comentário dizendo que acabou de mudar a cor da caixa. Tudo bem? E é isso que nosso comentário nos permite fazer. Então, esta foi apenas uma breve visão geral do nosso Figma e de como todas as diferentes ferramentas existem no Figma. O que vamos lidar com todo esse curso e todas essas coisas? Então, na próxima aula, vamos nos concentrar apenas na barra de ferramentas. Então, analisaremos cada recurso de nossas ofertas de barra de ferramentas e tentaremos criar algumas coisas usando os recursos da barra de ferramentas. Tudo bem. 4. (3) Barra de ferramentas em Figma: Olá pessoal, bem-vindos de volta a outro tutorial em vídeo. Nesta palestra, vamos nos concentrar em nossa barra de ferramentas no Figma. Então, embora eu tenha compartilhado praticamente tudo sobre a barra de ferramentas, ainda faltam algumas coisas. Então, vamos abordar este tutorial em vídeo. Tudo bem, então, como você pode ver, este é o nosso espaço de trabalho. E neste quadro em particular, e nesse quadro em particular, temos uma caixa retangular, temos um comentário, desenhamos uma forma usando a ferramenta caneta. Desenhamos um retângulo usando a ferramenta do lápis, temos alguns textos, temos algumas setas. Agora, e esse ícone de figma? O que isso faz? O que podemos fazer com a ajuda desse botão de ação do menu principal? Assim, você pode simplesmente voltar para os arquivos, arquivos anteriores nos quais estava trabalhando, e você pode simplesmente pular para outro arquivo. Então este é o arquivo de teste em que estávamos, nós, estávamos trabalhando. Então, vou clicar duas vezes sobre isso. E esse projeto Figma será aberto para nós. Se você quiser realmente importar esse arquivo. Se você quiser exportar, devo dizer que exporte isso na forma de PNG ou JPEG. Você pode simplesmente clicar no menu suspenso do ícone figma, clicar nesse arquivo e também ter a opção de exportá-lo na forma de PDF. Portanto, dependendo do número de salas que você criou, você pode criar o PDF. Então, digamos que você queira exportar os quadros para o formato PDF. Atualmente nesta página, página um, quantos quadros temos? Não temos nenhuma outra moldura. Temos apenas um quadro, como você pode ver aqui, destacado é apenas o quadro um na página dois, temos dois quadros, quadro um, quadro dois. Agora, se eu quiser exportar isso na forma de PDF , se eu abrir esse PDF, você verá que esse PDF tem duas páginas, página um e página dois, a página quando está completamente vazia porque esse quadro não tem nenhum outro elemento. Agora, embora tenhamos criado esse quadro, desenhamos manualmente usando o cursor. E se você quiser realmente criar um aplicativo? Ou digamos que você queira criar um aplicativo móvel adequado para o seu iPhone. Então, o que você vai fazer é clicar nesse quadro, selecionar o quadro. E no painel de propriedades, esse painel de propriedades de design, deixe-me me deslocar para o lado esquerdo. Você tem opções diferentes para criar uma moldura para o iPhone 14, 14, 14 plus, digamos que eu queira criar a moldura do iPhone 14. Então, essas são as dimensões exatas nas quais talvez eu queira trabalhar em meu aplicativo. Então é assim que eu crio uma moldura para um dispositivo de hardware específico. Posso clicar novamente nos meus quadros. Eu posso. E eu tenho a opção de escolher qualquer dispositivo Android e um telefone Android grande, Android pequeno. Eu tenho a opção de escolher entre o iPhone 814 e assim por diante. Tenho diferentes opções para escolher entre tablets diferentes, como seu Surface Pro, iPad. Eu posso escolher um desktop como MacBook Air, MacBook protein inch Pro, MacBook 816 polegadas Pro desktop. E eu também posso criar uma apresentação. Então, digamos que eu vou criar uma apresentação de slides da proporção 16 é 29, então eu também posso fazer isso. Posso até criar slides de quatro com uma proporção de 234 por três. Posso criar um aplicativo ou um design para meu smartwatch. Eu posso até criar o tamanho do papel, digamos, tamanho A4, tamanho A5 e todas essas coisas. Se eu quiser criar uma imagem para minhas postagens no Instagram e puder clicar nela, ela criará uma moldura para o tamanho exato dos dados. Então, esse Figma também nos permite criar uma postagem no Twitter, cabeçalho do Twitter e todas essas coisas. O Figma é tão flexível que nos permite criar molduras para coisas diferentes nas quais talvez queiramos trabalhar. Então, como você pode ver, esta é a minha moldura. Eu também tenho a opção de fatiar. Então, o que isso realmente significa? Então, digamos que neste quadro em particular, um , quadro, um, eu queira realmente cortar uma parte dele. Então, posso simplesmente clicar nessa fatia e arrastar a parte da caixa retangular que eu quero exportar separadamente. Então, depois de fazer isso, posso simplesmente clicar aqui e clicar em Exportar. Agora, posso exportar isso na forma de JPG, SVG. Svg é basicamente o seu formato de ícone, SVG. Se você exportar isso no formato SVG, o que basicamente significa que você pode usar isso na forma de um ícone de fábrica. Você pode usar isso como um ícone para o seu site. Então é isso que seu SVG realmente significa. Você pode até mesmo exportar isso nos formatos PDF. Se eu exportar isso em formato PDF, o que ele fará, ele realmente exportará isso. E vamos tentar exportar isso no formato PNG. E uma vez que eu fizer isso, e se eu abrir, você verá que uma parte da minha moldura foi recortada, e agora é essa imagem em particular. Tudo bem? Então, é assim que você divide algumas das coisas que você também tem a opção de mover e escalar. Digamos que você queira dimensionar essa forma, ou digamos que eu prefira dizer que vou criar uma. Digamos que seja uma elipse. Vou desenhar uma elipse. Legal. Agora, digamos que eu queira ampliar essa forma de círculo. Então, se eu clicar nesse vértice específico e quiser expandir isso, posso fazer isso. Mas você pode ver que a forma em si também está mudando, mas eu não quero que isso aconteça. Então, o que eu posso fazer em vez disso é simplesmente segurar minha tecla Shift. E agora. Mesmo se eu mover meu cursor de cima para baixo, você pode ver que ele não está mudando a forma com a ajuda da tecla shift. Você pode ver mesmo que, mesmo que eu mova meu cursor de cima para baixo, da esquerda para a direita, ele esteja apenas tentando expandir minha forma. Não está tentando mudar a propriedade da minha forma. Tudo bem, é isso que nossa tecla Shift nos permite fazer. Você pode expandir facilmente qualquer forma, não apenas sua elipse, mas até mesmo seu retângulo ou sua forma personalizada. Você pode expandir isso com a ajuda da tecla Shift. Então, basta segurar a tecla Shift e clicar em qualquer vértice e você pode expandi-lo. Tudo bem, então essa é a forma que você pode querer criar. Você também pode criar uma estrela. Então, digamos que você queira criar uma estrela. Assim como você pode ver, enquanto eu desenho a estrela, você pode ver que a forma em si também está mudando. Então, no momento, as bordas são compridas, mas a largura é muito pequena, mas eu não quero que isso aconteça. Então, o que posso fazer em vez disso é segurar minha tecla Shift e expandir minha forma de estrela. Legal. Também temos componentes diferentes. Podemos baixar alguns plug-ins. Agora, o que esse plugin realmente significa? Então, se você já trabalhou no WordPress, talvez esteja ciente dos plug-ins. Portanto, os plug-ins são basicamente algumas funcionalidades auditadas, desenvolvidas por alguns desenvolvedores. E agora eles estão disponíveis gratuitamente para serem executados. Agora, depois de instalar esses plug-ins em seu projeto específico, a maior parte do trabalho é feita pelo próprio plug-in. Você não precisa se preocupar em como fazer essas coisas manualmente. Então, assim como você pode ver sobre seu ícone plano, o que esse plugin fará? Este plugin realmente ajudará você a importar alguns dos ícones diretamente deste apartamento que eu posso conectar. Portanto, você não precisa realmente acessar outro site, pesquisar os plug-ins, baixá-los e fazer o upload aqui. Você pode simplesmente usar este plugin diretamente. Depois de instalar esse plugin para o seu projeto, basta pesquisar o ícone que está procurando e que será importado diretamente para o seu projeto. Então esse é o recurso interessante do Figma, que você tem a capacidade e a grande variedade de escolher entre diferentes plug-ins. Além disso, você pode até mesmo exportar sua forma de design de Jeff ou um formato de vídeo. Então, normalmente você pode ver que você pode exportar seu projeto Figma para um formato PDF ou em um formato PNG ou JPEG, basicamente apenas um formato estático, não em um formato dinâmico. Portanto, com a ajuda desses diferentes plug-ins, você pode até mesmo exportá-los em formato de vídeo. Tudo bem, então temos diferentes plug-ins e outras coisas para que você possa pesquisar e baixar o plug-in com base em seus requisitos. Não é nada rígido ou fixo que você precise usar esse plugin específico. Também temos diferentes widgets que você pode usar. Também temos a capacidade de integrar nosso Jira e Asana. Essas duas são as ferramentas de gerenciamento de projetos que permitirão lidar com seus fluxos de trabalho e com sua equipe. Tudo bem, então esses são todos os widgets que temos. Então, sim, é basicamente isso. Isso é o que temos. Caso contrário, outras coisas, como seu texto, seus comentários, formas diferentes, a moldura a capacidade de se mover de forma diferente entre objetos diferentes e suas molduras já foram abordadas nas aulas anteriores. Portanto, não preciso repetir essas coisas repetidamente. Tudo bem, então tudo foi do meu lado para esta palestra em particular. Vejo vocês na minha próxima palestra. Cuide-se. 5. (4) Painel de camadas em figma: Olá pessoal, bem-vindos de volta ao vídeo. Nesta videoaula, examinaremos o painel de camadas. Portanto, embora tenhamos abordado anteriormente o painel Layers, ainda temos algumas coisas a serem abordadas. Então, como você pode ver nesta página em particular, número dois, temos molduras diferentes, certo? E em cada quadro temos diferentes formas e vetores que criamos, certo? E, a propósito, esse vetor nada mais é do que a forma que você criou usando a ferramenta caneta. Então é isso que seu vetor é. Agora, digamos que se você quiser realmente renomear algumas de suas formas, digamos que, em vez de elipse uma, você queira dar esse título, pois você pode simplesmente clicar aqui ou aqui. E você pode clicar duas vezes nesse objeto específico e dar qualquer nome. Digamos que eu dê esse título como círculo, círculo um. Em vez de uma elipse um, gostaria nos dar uma circular. Tudo bem? E é assim que posso renomear qualquer uma das minhas formas, não apenas a forma, qualquer uma das coisas que você possa ter criado dentro do seu espaço de trabalho Figma. Agora, e se você quiser excluir algumas das coisas que você tem em seu, você sabe, seu espaço de trabalho. Digamos que você queira excluir o quadro três. Você também deseja excluir essa moldura do iPhone 14. Como você pode fazer isso? Bem, você faz isso manualmente, como clicar com o botão direito do mouse nesse quadro específico e depois apenas procurar uma exclusão ou talvez apenas clicar no botão excluir. Você pode fazer isso, mas há uma maneira mais curta de fazer isso. Você pode simplesmente segurar a tecla Shift e selecionar várias coisas, além de excluir todo o quadro. Então você pode ver que todas essas coisas foram excluídas até agora. Legal. Até mesmo esse quadro será excluído, certo? Então é isso que nos resta, apenas o quadro número um. Agora você pode ver que agora estamos no Zoom. A porcentagem de zoom é 78. Digamos que eu queira ampliar para cerca de 01:25. Então, posso simplesmente segurar meu botão de controle e usar a roda de rolagem do mouse. Usando a roda de rolagem do mouse, você pode ampliar e diminuir o zoom, mas precisa segurar o botão Control. Se eu segurar minha tecla Shift e usar meu botão de rolagem ou minha roda de rolagem do mouse para realmente alternar entre a mão esquerda direita do meu espaço de trabalho. Eu posso fazer isso. Então, em vez de usar manualmente meu cursor e meu mouse, na verdade, me mover do lado esquerdo para o direito, navegando até a luz esquerda, para a direita. Eu posso simplesmente segurar minha tecla Shift e usar a roda de rolagem do mouse. Tudo bem, então essas são algumas das coisas. Agora eu posso até agrupar algumas dessas coisas. Como se eu pudesse usar meu cursor, certifique-se de ter selecionado esse botão de movimentação. E você pode selecionar tudo. E agora usando isso, você pode simplesmente agrupá-los usando o Controle G. Então, tudo agora está formado em um grupo. Agora eu posso movê-los. Você pode ver que tudo pode ser movido. Essa coisa toda pode ser movida. Digamos que eu crie outro quadro. Ok, eu posso criar outra moldura. Por exemplo, digamos que eu queira criar uma moldura de desktop. Tudo bem? Então, digamos, para o MacBook Pro de 14 polegadas. Então você pode ver que a moldura do MacBook Pro de 14 polegadas foi criada para mim. Eu posso simplesmente arrastar e colocar aqui, ou então o que eu posso fazer é fazer uma cópia duplicada disso e colar lá. Para fazer isso, basta segurar o Controle e clicar em D ou Controle D, e isso será replicado aqui. Tudo bem, eu não preciso fazer isso. Controle C e controle V. Eu posso simplesmente fazer Controle D e arrastar a cópia duplicada dele. Tudo bem, então você pode ver que tenho dois quadros na minha página número dois e também posso alternar entre páginas diferentes. Então, eu tenho páginas diferentes, mas quero excluir outras páginas. Então, o que eu vou fazer? Eu posso simplesmente clicar aqui e clicar em excluir, ou posso simplesmente clicar com o botão direito do mouse e excluí-lo. Tudo bem? Portanto, essa marca de verificação basicamente representa que você está na página seis ou então você pode até ver aqui que está na página seis. Tudo bem, vou deletar isso. E agora estamos na segunda página. Temos a moldura do MacBook Pro de 14 polegadas e a moldura que desenhamos manualmente. Tudo bem, agora, e quanto aos ativos no painel de camadas? E quanto a isso? Como podemos fazer uso disso? Digamos que eu queira realmente criar um ativo de, digamos, um carro. Você deve ter realmente visto um carro em um site. Se você não está ciente disso, vamos tentar criar um cartão simples. Tudo bem, o que vou fazer é clicar nesse grupo também e eu posso excluir este. Tudo bem. Agora, o que vou fazer criar uma forma retangular com a cor branca. Vamos dar isso como cor branca. E eu vou dar isso , em vez de deixar eu tirar isso da minha moldura, caso contrário, você não conseguirá ver o que estou fazendo. Tudo bem, então esta caixa foi retirada da minha moldura. Agora vou dar esse raio de fronteira. Agora, vou clicar sobre isso. Eu tenho a habilidade de fornecer o raio da fronteira. Então esse é o raio do meu canto. Agora sou da área de desenvolvimento web e gosto de chamar isso de raio de fronteira dos EUA. Você pode até chamar esse raio do canto S em Figma, chamamos isso de raio do canto S. Então, se eu disser, quero chamá-lo de raio de cerca de dez. Então, digamos 20. Para zero. Então você verá que há algumas bordas ligeiramente curvadas. As bordas não são nítidas. Isso é possível usando o raio do canto, posso até mudar isso para, digamos, 50. 50 é o que eu selecionei. E sim, isso é basicamente ****. E agora o que vou fazer, vou criar um. Vou criar uma elipse. Tudo bem? Vou criar uma caixa de texto. Eu também posso dar o nome. Quero que a cor do meu texto seja preta. Então, vamos entender isso como preto. Joe. Os blogs também aumentam o tamanho do texto. Então, em vez de apenas, Bem, vamos dar isso como 24. Espero que seja visível para qualquer quatro. Vamos ampliar para 36. Sim. Então, o nome dessa pessoa é Joe Bloggs. E o que eu vou fazer, a próxima coisa que queremos fazer é dizer algo como desenvolvedor web. Ok, precisamos alterar as estatísticas de texto, cor e tamanho. Sim. Então, desenvolvedor web, freelancer e portais. Podemos ver um engenheiro de software. Engenheiro de software. Tudo bem. Agora, posso simplesmente selecionar tudo isso. Eu posso usar os textos da linha central. Tudo bem, posso ampliar o tamanho da caixa de texto para que ela apareça bem. Eu posso simplesmente clicar aqui. Eu posso ampliar isso. Certo? Sim, é basicamente isso. Agora, o que vou fazer é usar o plugin Unsplash para poder importar uma imagem. Na seção de plugins, posso pesquisar o Unsplash e clicar no botão Executar. Depois de fazer isso, levará algum tempo para realmente executar esse plugin específico para você. E você pode pesquisar qualquer pessoa. Digamos que você queira um engenheiro? Engenheiro? Eu só procuro. Sim. Vou apenas clicar nessa imagem. E eu posso arrastá-lo até aqui. Então essa imagem é muito grande, mas vamos ajustá-la de acordo com nossa, hum, você sabe, você pode ver que quando eu a arrasto para dentro da minha elipse, ela realmente foi redimensionada de acordo. Tudo bem, então é assim que meu cartão se parece. Agora, o que eu posso fazer é selecionar tudo isso. Eu posso selecionar tudo isso. E o que eu posso fazer agrupá-los usando a tecla de atalho Control G. E eu posso usar o controle de todos os dez K para realmente formar um ativo. Agora, esse grupo dois é meu ativo. Ou então, o que você pode fazer é selecionar todo esse grupo e ter a opção de criar um componente. Então você pode simplesmente criar um componente e agora um ativo foi criado para nós. Então, você pode simplesmente ir para esta parte de ativos e importar esse ativo dentro do seu MacBook Pro de 14 polegadas ou qualquer outra moldura ou qualquer página que você gostaria de usar, digamos, da primeira página para a página Sobre nós , eu gostaria de importar esse ativo. Então, o que vou fazer aqui é criar uma nova moldura, digamos, do meu iPhone Pro. E agora eu gostaria de trazer meu ácido. Então, agora você pode ver que esse ativo foi criado, correto? Digamos que esse quadro tenha um plano de fundo ou eu possa importá-lo. Você pode ver que é exatamente da mesma maneira. Até as dimensões são exatamente as mesmas. 5,7 por 616. Se eu voltar para minha página dois, eu acho. Sim. Então, aqui também temos 5,7 por 616. Então essa é minha largura e altura. Então, essas são todas as coisas que eu consegui fazer usando o painel de camadas, a barra de ferramentas e todas essas coisas. 6. (5) Alinhamento e distribuição na Figma: Olá pessoal, bem-vindos de volta a outro vídeo. Neste tutorial em vídeo, aprenderemos sobre alinhamentos e distribuição no Figma. Então, como você pode ver na frente da minha tela, criei uma moldura dentro da qual tenho uma caixa emaranhada. Agora, você pode ver que, assim que eu seleciono minha caixa emaranhada no painel de propriedades do design, tenho a opção de realmente alinhar minha caixa. Então, eu posso alinhá-lo à esquerda. Eu posso alinhá-lo à direita ou até mesmo alinhá-lo ao centro. Agora, o que acontece se eu escolher esse alinhado à esquerda? Então, assim que eu clico nele, ele o alinha no lado esquerdo, no lado esquerdo. Você pode ver, agora, se eu arrastá-lo para cima, você pode ver que é possível, embora eu possa até mesmo colocá-lo em algum lugar intermediário, eu posso fazer isso. E assim que eu clico no botão Align Left, novamente, ele o alinha ao lado esquerdo. De novo. Agora, isso está acontecendo em relação ao eixo x. Como você pode ver, isso está acontecendo em relação ao eixo x, correto? Agora, e se eu realmente quiser alinhar essa caixa específica para, digamos, alinhar centros horizontais. Agora, o que acontece neste caso é, na verdade, está alinhando nossa caixa na posição central em relação ao eixo x. Da mesma forma, se eu quiser alinhá-lo à direita, posso fazer isso. Como você pode ver, uma vez que eu clico aqui, ele não está alinhado à direita. Se eu clicar nesse botão que diz que está alinhado à parte superior, agora ele está alinhando meu elemento no lado mais à direita. Agora, por que isso? É porque já selecionamos isso. Queremos alinhá-lo à direita. E se eu quiser que minha caixa fique na posição mais alta, mas não no lado mais à direita, mas sim na parte central. Então eu posso selecionar o centro. E agora você pode ver que também é a linha central, mas também está na posição mais alta. Então, isso está acontecendo em relação ao eixo y. O alinhamento com o topo está acontecendo em relação aos eixos y e x. Agora, o que acontece se eu selecionar alinhar centros verticais. Portanto, está se alinhando em relação ao eixo y, não ao eixo x. Então, mesmo que eu coloque dessa forma, digamos que eu esteja colocando em algum lugar aqui. Agora, se eu fizer isso e você puder ver que está alinhando-o ao centro em relação ao eixo y. Então, mesmo fazendo o eixo x, minhas caixas voltadas para o lado esquerdo, ele o alinhou ao centro na maior parte em relação ao eixo y? Correto. Da mesma forma, também tenho outras opções para alinhá-lo na parte inferior. Isso significa que ele se conectará aos zeros e ao eixo y, correto? Posso até alinhá-lo ao contrário como se eu quisesse que ele fique no lado mais à direita, mas também na parte inferior. Se eu quiser estar no topo. E eu quero que seja a Irlanda, eu também posso fazer isso. Então, essas são algumas das coisas que eu queria mostrar a todos vocês. Tudo bem? Então esse foi um elemento individual. Agora, o que acontece quando temos um grupo de elementos? Digamos que eu tenha essa caixa e uma caixa menor também. E se eu estiver tentando E se eu estiver tentando agrupá-los? Não estou exatamente tentando agrupá-los com a ajuda do controle G. Mas, em vez disso, se eu puder selecionar isso com a ajuda desse botão de movimento, posso realmente selecioná-los. Agora, se eu tentar alinhar isso no lado esquerdo, você pode ver que minha imagem já desapareceu. Minha caixa retangular já desapareceu, mas não foi para lugar nenhum. Está logo atrás ou você pode dizer que está apenas no lado esquerdo relação ao meu elemento pai. Então, quando você tenta agrupar alguns dos elementos, o que acontece é que Figma entende automaticamente que o menor elemento, a menor forma é o elemento filho, enquanto o elemento que está na forma maior quando o tamanho maior é seu elemento pai. Da mesma forma, também temos irmãos, o que significa que digamos que eu também crie, deixe-me criar mais uma caixa. O que eu posso fazer em vez disso é simplesmente tentar fazer esse Controle D. Depois de fazer isso, eu posso arrastar. E agora um elemento irmão foi encontrado. Então, ambos estão agindo como irmãos, enquanto o pai dessas duas caixas é minha grande caixa retangular. Agora, se eu tentar alinhá-los, se eu tentasse selecionar tudo isso e se eu tentar alinhá-los à esquerda, você pode ver minhas duas caixas, esta caixa e essa caixa agora estão alinhadas no lado esquerdo em relação ao meu eixo x. É porque meu pai está acontecendo com relação ao meu elemento pai. Se eu tentar selecionar tudo isso novamente, agora se eu tentar alinhá-lo no lado mais à direita , o que acontece nesse caso? Você pode ver que está se alinhando com relação ao meu elemento pai, não o que eu realmente esperava. Eu esperava que este euro, meus elementos irmãos, o alinhasse ao lado mais à direita em relação à moldura. Mas agora está acontecendo com relação ao meu elemento pai, porque agora eles estão sob essa hierarquia. Tudo bem? Se eu quiser alinhá-los no universo, esses centros horizontais, então você pode ver que está se alinhando no centro. Eu posso até mudar a cor para que você possa ver exatamente onde estão minhas caixas. Então eu posso dar isso como cor vermelha, até mesmo isso como a mesma cor vermelha. Agora você poderá ver que agora ambos estão alinhados na maior parte central. Correto. Da mesma forma, tenho esse texto Figma dentro da minha caixa retangular. Agora, se eu tentar selecionar isso e se eu quiser alinhá-los, digamos que eu queira alinhar meu texto Figma na parte inferior. Minha caixa não está se movendo para nenhum outro lugar. As caixas estão exatamente na mesma posição. O que está se movendo é minha caixa de texto, meu elemento de texto. Certo? Agora, ele foi alinhado na maior parte inferior. Se eu quiser alinhá-lo ao centro relação ao eixo y, posso selecionar esse elemento específico. Se eu quiser que ele fique no topo em relação ao y, posso selecionar isso. Se eu quiser que esteja alinhado à direita, então você pode ver que está acontecendo em relação a x. Então, quando você está tentando alinhá-lo à esquerda ou à direita, isso acontecerá em relação ao eixo x, mas você deve tentar alinhar sua parte superior ou inferior. Isso pode acontecer dos dois modos, XOR y. Tudo bem? Então é isso que seu elemento pai e filho fazem, e é por isso que é importante entendermos como as camadas são realmente formadas, como a hierarquia é formada. Tudo bem? Mesmo que você não tenha formado um grupo aqui, você está tentando alinhá-los em um formato de grupo, mas não é um grupo. Você acabou de selecionar tudo isso. E Figma automaticamente entende que isso agora formou um grupo. Deixe-me dar outro exemplo. Na minha moldura, tenho caixas diferentes? Você pode ver todas do tamanho das minhas caixas exatamente da mesma forma. O alinhamento é bem diferente. E se eu quiser alinhá-los e agrupá-los forma que pareçam um teclado numérico. Você sabe como é a estrutura do nosso teclado numérico. Então, o que eu posso fazer em vez disso é simplesmente arrastar tudo isso e selecionar todos esses elementos. Agora você pode ver no canto inferior direito que, depois de mover meu cursor até aqui, tenho a opção de realmente alinhar minhas caixas de forma que elas se formem como um teclado numérico. Ou sua estrutura será tal que esteja alinhada com o espaçamento adequado, o alinhamento adequado e coisas assim. Então, quando eu clico ali, você pode ver a primeira caixa, caixa número um. Você pode ver que agora está de tal forma que agora pertence ao lado mais à esquerda em relação ao eixo x e na posição mais alta em relação ao eixo y. A segunda caixa agora está na posição mais alta, mas está no centro alinhada em relação ao eixo x, não no eixo y, mas no eixo x. Já esse elemento está alinhado no centro em relação ao eixo y e também no átomo central em relação ao eixo x. Então foi assim que ele foi capaz de fazer isso. E essa coisa em particular que eu fiz agora não era nada além da habilidade de arrumar. Você pode ver que também temos uma tecla de atalho para fazer isso. Você pode segurar as teclas Alt, Shift e D de controle para realmente arrumá-las. Caso contrário, se você quiser que eles sejam distribuídos, com espaçamento horizontal, você pode ver que é assim que ficará se você quiser que eles tenham um espaçamento vertical. É assim que vai ficar, certo? Agora. Embora falemos sobre as grades e toda essa seção posteriormente. Você pode ver que temos alguns destaques rosa. O que isso faz e como isso nos ajudará? Agora, digamos que eu tenha esse espaço rosa, o espaço que resta entre essas duas caixas. Se eu expandir isso , você verá que a mesma quantidade de espaço, que é o valor de 08, é deixada entre minha caixa um e a caixa dois. Da mesma forma, entre a caixa um, a caixa três, a caixa quatro e a caixa phi e assim por diante. Como deixo exatamente um espaço inteiro, também posso fazer isso com a horizontal. Você pode ver que eu posso deixar exatamente o mesmo espaço que eu quero que eles tenham. Tudo bem? Eu posso até mesmo, você sabe, escolher algumas caixas específicas que eu não quero que elas estejam alinhadas. Eu posso simplesmente segurar aquela caixa em particular e mudar o alinhamento dela. Então, sim, é basicamente isso, sobre seus alinhamentos e distribuição. Então, uma coisa a lembrar é que Figma sempre tentará alinhar a camada ao seu elemento pai. Pode ser seu grupo, pode ser um quadro ou conter a estrutura do componente. Então é disso que você precisa se lembrar. E com base nesse conhecimento, você poderá criar belos designs para seu site ou aplicativos. 7. (6) Sistema de grade em Figma: Olá pessoal, bem-vindos de volta a outro vídeo. Neste tutorial em vídeo, aprenderemos sobre o sistema de grade em Figma. Então, todos os caras que estão familiarizados com o desenvolvimento web devem conhecer as margens do flexbox, o preenchimento o layout da grade nos aspectos de desenvolvimento web, porque aprendemos no CSS, mesmo que você não tenha assistido ao meu curso, tenho certeza de que qualquer curso ou aula em que você estar matriculado em relação ao desenvolvimento web, você deve ter aprendeu sobre seu sistema de rede. Portanto, o sistema de grade também permanece o mesmo em Figma. Então, o que isso significa e por que o usamos? Então, basicamente, usamos o sistema de grade para fazer com que nosso aplicativo, ou melhor, devo dizer que site e o aplicativo Android não seriam muito responsivos. O site definitivamente precisa ser responsivo. Responsivo basicamente significa que, digamos que esse laptop específico que estou usando atualmente tenha 15,6" de tela. E se esse site estiver tentando ser acessado por um dispositivo móvel? Agora, os dispositivos móveis geralmente não têm telas maiores, correto? Eles geralmente estão na proporção de seis a nove. E o tamanho do dispositivo é bem pequeno em comparação com as telas do seu laptop, correto. Então, ali, como seria o seu site? Bem, algumas partes serão cortadas ou apenas algumas coisas serão exibidas e outras serão escondidas. O que acontecerá nesse caso? Geralmente, se você simplesmente abrir o telefone e pesquisar qualquer site, você vê tudo isso? Sim, claro que você faz todas essas coisas. Tudo bem. Isso porque o site que você está acessando é responsivo. Portanto, qualquer site que você esteja tentando criar ou até mesmo acessar precisa ser responsivo porque, nos dias de hoje , existem muitos dispositivos diferentes , não apenas seus smartphones , mas temos seus tablets , laptops, desktops, relógios inteligentes, telefones celulares. Portanto, esses dispositivos diferentes têm telas diferentes e, de acordo com esse site, devem acomodar o conteúdo acordo com o tamanho do dispositivo. Então, por esse motivo, temos o sistema de rede. Com a ajuda do sistema de grade, você entenderá como eu posso redimensionar meus elementos da minha página da web para que eles se ajustem perfeitamente a esse tamanho específico do dispositivo. Como você pode ver, criei uma moldura diferente MacBook Pro de 16 polegadas do MacBook Pro de 16 polegadas. E certifique-se de ter habilitado esses layouts de grade. Apenas certifique-se de que você possa ver as grades de layout. Caso contrário, mesmo que você tenha selecionado as grades , talvez não consiga vê-las só porque ocultou essa parte. Então, certifique-se de ter selecionado essa coisa. Então, basta clicar neste ícone de adição e você verá que a grade foi formada. Agora, essa grade está em coluna e linha. E se você quiser apenas ver as colunas, a grade da coluna? Então, agora você poderá ver apenas as colunas. Agora, o espaçamento entre essas duas colunas, essa coluna e essa coluna, o espaço que você tem, o espaço em branco que você tem é chamado de Godot. A sarjeta é o espaço entre suas colunas ou até mesmo linhas. Se eu quiser exibir em formato de linha, você também pode fazer isso. E se você quiser deixar algum espaço a partir do seu quadro? Quando sua coluna realmente começa, uma linha realmente começa, essa é a sua margem. Então, se eu disser que a margem tem que ser de cerca de 50 pixels. Tudo aqui, a margem ou o raio da borda, o raio do canto, o tamanho da caixa e tudo isso está no formato de pixels. Existem unidades diferentes, como seus pixels. Em CSS, temos unidades diferentes, como seus pixels. Temos, temos RAM EM, temos porcentagem. Portanto, no Figma, para simplificar as coisas, temos apenas o formato de pixels suficiente. Portanto, certifique-se de que o que quer que esteja digitando, você tenha uma unidade de pixels na mina. Tudo bem? Então, se eu inserir 50, para que você possa ver que ainda há algum espaço , tudo bem, agora, se eu quiser realmente ajustar o tamanho da calha também, eu posso fazer isso. Além disso. Digamos que eu queira que o tamanho da sarjeta seja de 30 pixels, então você pode ver que o tamanho da coluna agora foi reduzido. Se eu quiser que a contagem de colunas seja aumentada para, digamos, dez, então você pode ver que isso não tem significado. Agora cabe dez colunas diferentes dentro da nossa moldura. Agora, com a ajuda desse layout de suas colunas, o que você pode fazer é organizar seus elementos de forma a deixar algum espaço especificado entre esses elementos. Por exemplo, se eu criar uma caixa retangular aqui, certo? E se eu fizer a mesma coisa aqui, você pode ver que está deixando 42 pixels de espaço entre essas caixas diferentes. Tudo bem? Então essa é a minha barra de espaço, se você realmente quiser. E, a propósito, se você puder ver, se eu selecionar minha caixa retangular, você verá, na seção úmida, focar no painel de propriedades do design. Dentro dessa largura, W significa isso, h significa altura. Essa é a dimensão no formato de pixels, ok, 124 por 78. E essa posição x e y diz que restam 62 pixels de espaço a partir do meu quadro. Se eu tentar mover esta caixa em direção ao meu, em vez disso, eu deveria dizer eixo x, então você pode ver que o valor do eixo x diminui para 13. Inicialmente era algo em torno de 62, agora está em torno de 13. Tudo bem, vamos agora por volta dos 13. Se eu mover isso para cima, você poderá ver o valor do meu Y mudar. Então esse espaço, 47, é o espaço da pílula superior onde minha caixa realmente começa. Então essa é minha posição Y e essa é minha posição x. Tudo bem? Então é assim que você poderá criar um design responsivo. Se você quiser realmente descobrir quanto espaço resta daqui, deste ponto até este ponto. Deste ponto até este ponto, você pode usar as réguas. Então, basta voltar aqui e selecionar as réguas. Você também tem uma tecla de atalho que é Shift R para realmente habilitar as réguas dentro do seu projeto. Então, agora o que vou fazer? Na verdade, eu posso criar o centro. Posso clicar em todo o quadro e trazer minha régua. Então você pode ver que a régua agora está colocada, foi colocada aqui. Agora, se eu clicar aqui, você verá 62 é a posição do meu y. E se eu mover minha régua, se eu mover minha régua, você verá que ela também exibirá o valor 47. Deixe-me clicar na minha régua novamente. Por que não está mostrando a posição do eixo x. Então, se eu quiser realmente trazer uma régua que meça a partir do eixo x ou da horizontal. Só precisarei arrastar de cima para onde eu quero que minha régua fique. Então você pode ver que agora está nessa posição específica. Tudo bem? Então é isso que seus governantes permitirão que você faça. Então é só isso. E quais são as coisas que nos restam? A propósito, se vocês realmente quiserem dar uma olhada em todas as diferentes teclas de atalho que temos para o Figma. Você pode simplesmente clicar aqui e ajudar uma conta e clicar nesses atalhos de teclado ou então o que você pode fazer, basta atalhos de teclado ou então o que você pode fazer, segurar a tecla Control Shift e o botão do ponto de interrogação. Depois de clicar lá, você encontrará todas as diferentes teclas de atalho para ampliar, para realmente navegar entre diferentes ferramentas, para realmente selecionar alguns dos elementos e todas essas coisas. Então você pode ver todas essas diferentes teclas de atalho que você tem no Figma. 8. (7) Teoria de cores: Tudo bem pessoal, bem-vindos de volta a outro vídeo. Nesta videoaula, tentarei explicar tudo sobre a teoria das cores. E tentei explicar todas as informações críticas sem torná-las muito complicadas para todos vocês. Agora, quando se trata da teoria das cores, há muitas informações na Internet. Se você já trabalhou com algum tipo de trabalho de design antes , provavelmente conhece os fundamentos da teoria das cores. Mas se você não estiver, talvez você só precise de um pouco de atualização. Então, sem perder tempo, vamos ver no que acontece. Então, primeiro de tudo, vamos dar uma olhada em alguns tipos de cores. A primeira é sua cor primária. Agora, a cor primária envolve suas cores vermelha, amarela e azul. Ao misturar essas cores, obtemos nossas cores secundárias, que são verdes, que obtemos quando você mistura azul e amarelo, obtemos laranja. Quando misturamos amarelo e vermelho, obtemos violeta ou roxo quando misturamos azul e vermelho. Agora, ao misturar suas cores primárias e secundárias, você obtém as cores terciárias. Quando você mistura azul com verde, você obtém azul esverdeado. Quando você mistura verde e amarelo, você obtém um verde amarelo. O verde é na verdade sua cor secundária, enquanto o amarelo é a cor primária. Então, quando você combina essas duas cores, obtém uma cor terciária, que é amarela e verde. Vamos dar uma olhada em algumas terminologias de cores na Figma. Então, vou entrar na minha Figma. Agora vou criar uma caixa retangular do tamanho aproximado. E eu vou explicar sobre nós. Então, qual é a sua opinião? Você já deve ter ouvido falar sobre Q tantas vezes quando pode estar usando ferramentas de edição de fotos como o Lightroom ou o Canva. Então você é apenas a sua cor quando você escolhe a cor daqui, esta é a sua tonalidade. Use apenas uma cor. Então, se você selecionar esse cursor, você o aponta para o lado esquerdo. Isso vai dizer que você tem a capacidade de escolher entre diferentes tons de vermelho. Então, a forma mais pura de qualquer cor é basicamente você. Tudo bem? Então, se eu arrastar meu cursor deste lado para talvez, digamos, deste lado. Então, vou obter uma cor azul saturada adequada. Se eu arrastar isso para este lado, vou ficar verde. Se eu arrastar isso para este lado, vou ter uma cor rosa ou roxa, certo? Então essa é a minha. Vamos falar sobre tonalidades, sombras e tons. Agora, o que dizer das dezenas? Tudo bem, vamos imaginar que a cor dessa forma específica seja quase azul. Tudo bem? Agora vou criar exatamente a mesma réplica dessa caixa com uma cor branca, certo? Cor branca com opacidade de cerca de 40 por cento. Então, eu apenas modifiquei a opacidade pressionando o botão F4 no meu teclado. E agora você pode ver que a opacidade da minha forma foi alterada para 40%. Tudo bem? Agora, se eu mover essa forma sobre essa forma, você pode ver que a cor da caixa agora foi alterada para uma cor azul claro, certo? Então, dez é basicamente quando você adiciona um branco a uma cor específica, esse é o seu tendão. Tudo bem, deixe-me fazer outra caixa para que você possa ver a diferença na cor. Então, a caixa de baixo, essa caixa é a forma mais pura da minha cor, enquanto esta é a tonalidade dessa cor em particular. Então foi assim que consegui fazer com a ajuda do Tinder, certo? E quanto às sombras? Então, imagine que em vez de essa caixa em particular ser preta em vez de branca, você pode ver que é a cor preta. Se eu arrastar isso nesta caixa em particular, tudo bem, vou obter uma cor azul mais escura. Consegui obter essa cor específica porque adiciono preto a uma cor específica. Você pode ver a clara diferença entre essas duas cores. Esse parece muito mais monótono, certo? Tem um tom mais escuro. Considerando que esse é um formato mais puro e natural. Vamos falar sobre tons. Agora. Tom é quando você mistura sua cor com uma cor cinza. Deixe-me selecionar essa cor, ou melhor, essa caixa em particular com o cinza, certo? Isso é cinza, certo? Se eu arrastar essa ou essa caixa em particular, você verá que é assim que minha forma se parece. Certo? Agora. Se eu quiser combinar essa cor desta caixa com esta caixa , terei que mover meu controle deslizante. Eu terei que mover meu controle deslizante para a diagonal. Isso significa que no lado esquerdo, no canto inferior esquerdo, é assim que poderei obter essa cor exata. Você pode ver que quando eu movo meu cursor, o cursor, eu sou capaz de buscar exatamente a mesma cor. Um pouco o mesmo. Sim, você pode ver que o mesmo atraso é possível porque agora eu adicionei um é possível porque agora pouco de cinza à minha cor natural. Se eu quiser deixar essa forma um pouco mais escura, certo? Se eu quiser deixar essa cor um pouco mais escura ou adicionar um pouco de sombra a ela, precisarei arrastar meu cursor em direção ao canto inferior direito. Isso vai me deixar mais escuro e adicionar mais tonalidade à minha cor. Se eu quiser acrescentar mais a isso, terei que mover meu cursor em direção ao canto superior esquerdo. Certo. É assim que poderei cuidar dessa cor. Vamos falar sobre saturação. Agora, saturação é outra terminologia usada com bastante frequência quando falamos sobre cores e teoria das cores. Basicamente, nos diz o quão rico ou poderia ser. Então imagine que essa é a forma mais pura da minha cor. Assim, você pode ver a quantidade de azul adicionada a essa caixa específica. Portanto, esse nível de saturação está em 100%, ou você pode ver que a saturação está no máximo. Se eu adicionar mais embotamento a isso. Você pode ver que essa cor específica não está saturada. Está feito. Falar sobre brilho, que contrasta com essa afirmação específica de saturação, é quando a cor está mais próxima de um branco ou preto em uma escala. Digamos que se eu estiver movendo minha cor para o lado direito, você pode ver que a cor azul é muito brilhante. Se eu mover meu cursor para baixo, você pode ver que a cor não é aquela cor brilhante. Então é assim que eu posso dizer que, você sabe, que essa cor em particular não está na Albright. Falando sobre temperatura de cor, temos cores frias ou cores quentes. As cores frias são aquelas que temos que são agradáveis ou mais frias, quem quer que veja, são azul, verde e roxo. falar em cores mais quentes, elas recebem a terminologia como uma só porque são muito quentes para nossos olhos. Portanto, as cores incluem vermelho, amarelo e laranja. Se eu mover meu cursor para a UE, que está do lado esquerdo, você verá que vou obter a temperatura mais quente, certo? Se eu quiser modificar a temperatura da minha cor muito quente, deslizarei em direção ao calor. E se eu quiser que fique mais frio, vou deslizá-lo para o lado direito. Essas são as cores frias. Então, essas são algumas das terminologias. Vamos falar sobre alguns modelos de cores que temos. Vamos falar sobre RGB. Rgb é um modelo de cores bastante popular que usamos que usamos há muito tempo, mesmo em CSS. Sempre que estamos lidando com a atribuição de algumas cores aos nossos elementos, geralmente usamos as instruções RGB ou a unidade RGB. Portanto, RGB significa vermelho, verde e azul. Então, todos aqueles jogadores de PC, muito fascinados por faixas RGB e luzes RGB. Rgb significa vermelho, verde e azul. E usa a mistura aditiva de luz para criar cores diferentes. Agora, todas as nossas telas têm luzes LED diferentes. Agora, essas luzes LED têm três intensidades. Intensidade vermelha, intensidade verde e intensidade azul. Agora, com base nessas intensidades de luzes diferentes, você pode ver todas as cores diferentes. Então, mesmo na tela do meu laptop, eu tenho pequenos transistores, diodos e, cumulativamente, eles formam essas cores diferentes. Se eu disser que quero formar uma cor preta, a intensidade dos meus diodos vermelho, verde e azul seria a mínima ou a mais baixa. Então, agora, como a intensidade não está sendo fornecida, naturalmente a cor seria preta. Mas se eu quiser que a cor seja branca, todas as luzes que são vermelhas, verdes e azuis, a intensidade seria muito alta. Isso significa que todas as três cores estão crescendo em sua capacidade máxima. E agora eu obteria a cor branca. Então, quando você sobrepõe vermelho, verde e azul com brilho total, obtemos branco. E é assim que nossas telas funcionam, não apenas nossas telas, mas até mesmo meu mouse aqui. Você pode ver este mouse para jogos. É capaz de mudar cores diferentes. Deixe-me te mostrar. Então, essas são cores diferentes no meu mouse. Portanto, ele é capaz de obter essas cores diferentes porque tem diferentes diodos de luz, diodos de LED. Agora, essas faixas de LED não têm outras cores. Eles só têm vermelho, verde e azul, com base em sua intensidade de luz, é capaz de visitar cores diferentes. Então é assim que o modelo RGB funciona. Deixe-me mostrar como podemos trabalhar com o modelo RGB no Figma. Então, como você pode ver aqui, se eu escolher entre hexadecimal e RGB, tenho a capacidade ou a opção de adicionar os valores. Agora eu posso adicionar os valores do intervalo de 0 a 255. O valor de 55 é o valor máximo que posso dar ao vermelho, ao verde ou ao azul. Agora, a primeira unidade ou o primeiro valor que vou inserir representará a cor vermelha. O segundo valor representa o verde e o terceiro valor representa w. Já que, nesse caso, tenho uma cor mais fria. Eu não tenho nenhuma cor vermelha nisso. É por isso que temos zeros em vermelho. Como você pode ver, como essa cor está mais voltada para o lado azul, você pode ver que a saturação do azul está no máximo, ou seja, 255, embora haja alguma sombra, também temos um pouco de verde. Essa é a razão pela qual obtemos esse tom mais frio dessa cor em particular. Se eu quiser mudar isso para, digamos, vermelho, então vou definir como 55, 55, os outros como zero. É assim que poderei melhorar sua cor vermelha. Tudo bem, esse é o meu modelo de cores RGB. Vamos falar também sobre diferentes modelos de cores. Segundo, temos o CMYK. Cmyk significa ciano, magenta, amarelo, preto e, para criar cores, esse modelo usa o que é chamado de mistura subtrativa. Agora, não vamos entrar em detalhes sobre modelo de cores CMYK porque ele é usado principalmente para fins de impressão, geralmente não usamos no Figma ou em nenhuma das ferramentas de design, seja projetando um design de aplicativo, design de site ou qualquer criação de conteúdo, material de design, não usamos o modelo CMYK. Geralmente usamos o RGB e outros modelos que vou discutir. Outro é o seu HSB. Agora, HSB, significa matiz, saturação e brilho. Essas três terminologias de cores eu já discuti. Ainda assim, se você não tiver certeza sobre elas, volte para essa parte e consulte novamente. Agora, esse modelo de cores específico usa uma combinação desses três atributos para criar cores diferentes. Deixe-me te mostrar em Figma. Então, em vez de RGB, se eu escolher esse HSB, o que acontecerá? Você pode ver que o valor máximo que temos é 100 e o menor valor que podemos obter é zero. Então, se eu definir isso como 100, você pode ver que a UE é 100, a saturação também é 100 e o brilho também está definido como 100. Se eu definir o brilho como zero, obterei isso como preto. Por que isso? Porque não há brilho nele. A cor está completamente pronta. É preto, certo? Se eu definir a saturação para 50%, vamos ver o que acontece. Você pode ver que ainda está preto porque o brilho está definido como zero. Se eu definir o brilho para 50, ele estará em algum lugar por aqui, certo? Se eu definir a tonalidade como, digamos, 50 , isso me dará essa cor ocre específica, certo? É assim que ele é capaz de me dar saturação e brilho. Portanto, seu valor depende de onde você coloca o cursor nessa escala específica. Isso é o que você pode dizer é, vamos falar sobre outros modelos. Então hexadecimal é outro modelo de cores que usamos. hexadecimal é uma forma muito amigável de exibir suas cores RGB, porque as duas primeiras letras ou números se referem à leitura. Os próximos dois rios ficam verdes e os dois últimos se referem ao azul. Agora, todas aquelas pessoas que estão familiarizadas com CSS podem estar usando hexadecimal. Agora, geralmente em CSS, usamos o símbolo hash antes de escrever nossos valores hexadecimais. Mas em Figma, não precisamos fazer isso. Então, se eu voltar ao meu Figma, você pode ver que eu também posso selecionar o valor hexadecimal. Agora estamos aqui, como você pode ver, temos 40 AD e para o valor 40 representa meu vermelho, AT, representa meu verde e o quatro representa meu azul. Agora, por que nos avisamos via, porque se você aprendeu sobre valores hexadecimais, todos os valores que estão em dois dígitos, como se você fosse 10, 111-213-1415. Eles são representados no formato de rede. Caso contrário, 0-9, temos números. Portanto, a letra a representa o valor dez, porque em valor hexadecimal não podemos escrever dez, caso contrário, ela será representada como um NCO. É por isso que temos as letras como a, B e assim por diante. Então, esses são meus valores hexadecimais, certo? E se eu quiser mudar isso para, digamos, esse valor específico, você pode ver que o valor hexadecimal também muda. Então, vamos fazer uma rápida recapitulação sobre o que aprendemos ao longo desta sessão. Portanto, há três cores primárias, vermelho, amarelo e azul. Eles representam os blocos de construção de todas as outras cores. As cores secundárias são obtidas misturando as primárias, como o vermelho e o amarelo ficarão com o laranja. Se misturarmos vermelho e azul, obteremos roxo ou violeta. Se misturarmos azul e amarelo, buscaremos verde. As cores terciárias funcionam misturando cores primárias e secundárias. Você é a família dominante de uma determinada cor. O modo de cor CMYK usa as cores ciano, magenta, amarelo e preto, e elas são usadas principalmente para fins de impressão. É por isso que não incorporamos esse modelo de cores específico para Figma ou qualquer ferramenta de design. Por fim, temos modelos RGB e HSB usados em mídia digital. E o formato de cor hexadecimal é uma forma mais amigável de representar cores RGB. Então, sim, tudo isso foi do meu lado nesta palestra em particular. Na próxima palestra, aprenderemos sobre harmonias de cores, a psicologia do uso de cores diferentes e diferentes ferramentas que podemos usar para nos ajudar na elaboração de nossos projetos. 9. (8) Harmonias de cor e psicologia: Olá pessoal, bem-vindos de volta a outro vídeo. Nesta videoaula, aprenderemos sobre harmonias de cores e a psicologia do uso de cores diferentes. Agora, quando você está trabalhando com cores diferentes, pode ser um pouco assustador, especialmente para iniciantes, porque você conhece a teoria das cores, mas não sabe como incorporar cores diferentes em seu projeto específico. Então essa é a razão pela qual temos harmonias de cores, a paleta de cores e a psicologia do uso de cores diferentes. Agora, vamos usar este site de fórmula 1 como exemplo. Agora, como surgiu a fórmula quando surgiu a ideia de usar a cor vermelha em seu projeto, em seu site. Bem, não existe um conjunto de regras ao usar cores diferentes para seu projeto. Mas existem algumas diretrizes que ajudarão você a realmente escolher uma cor específica para o seu projeto. Então, como eles usaram vermelho, vermelho é basicamente a cor da paixão. É usado para chamar a atenção dos usuários ou talvez transmitir sua mensagem para o público. Então, a Fórmula 1 está tentando dar o exemplo para dizer que existem tantos corredores de tarifas diferentes e eles querem dar esse exemplo. Então essa é a razão pela qual eles podem ter usado a cor vermelha ao surgir. Temos o site digital oceânico. Agora, ele usa a cor azul como a cor mais primária. Você pode ver em todo o site que temos a cor azul, certo? azul é a cor mais popular e amplamente usada na Internet. A maioria dos sites e aplicativos móveis que você vê usam a cor azul em seus projetos. A maioria deles, na verdade, porque transmite confiança em peça, inteligência e segurança. Portanto, a maioria das marcas de tecnologia, como Facebook, Twitter, LinkedIn, todas usam a cor azul. Até mesmo o oceano digital é um slogan porque fornece servidores, certo? Eles estão fornecendo a você um aplicativo SAS. Eles estão fornecendo a você a capacidade de executar seus aplicativos e sites no servidor. Então, geralmente, pegue marcas, geralmente use a cor azul. As instituições financeiras também usam cores azuis, como o Goldman Sachs. Eles usam cores. Então temos amarelo. Agora, o amarelo é usado apenas pela sua indústria de entretenimento e brinquedos infantis. Por que isso? Porque o amarelo geralmente mostra movimentos divertidos e ousados. É a cor do sol. É por isso que nos traz alegria, felicidade. É isso que os filmes fazem. É isso que as séries de TV fazem. É por isso que a cor amarela é geralmente usada na indústria do entretenimento, certo? Também transmite energia quente. Portanto, a cor amarela geralmente é usada quando você está lidando com o setor de entretenimento. Então temos a cor verde do tema, que geralmente é usada para a natureza, certo? O verde é a cor da natureza. Representa saúde, bem-estar, segurança. Portanto, todos os sites que vendem seus suplementos, ou estão relacionados ao setor de saúde, fitness, indústria médica ou estão promovendo alguns produtos ecológicos, talvez seja melhor usar a cor verde. Como você pode ver, eles estão promovendo produtos veganos, então eles usaram a cor verde que está surgindo. Agora temos a cor laranja. As laranjas geralmente são usadas para mostrar felicidade, alegria e confiança. Portanto, como a laranja é uma combinação de vermelho e amarelo, as laranjas se formam quando você mistura vermelho e amarelo. É assim que você obtém laranja. Então essa é a razão pela qual a maioria das propriedades do amarelo e do vermelho obtemos uma laranja. Portanto, o laranja geralmente é usado por sites de comunicação como o Postman. Postman é uma plataforma de API, APIs, interface de programação de aplicativos usada para fins de comunicação. Então essa é a razão pela qual temos laranja como essa cor de tema no Postman. Digamos que eu queira criar um site para meu cliente que está realmente montando sua própria loja de produtos veganos, certo? Então, obviamente, a cor que devemos usar é verde. Mas qual cor exata ou qual brilho de saturação a UE ou meu tom deve ser para minha cor verde. Para descobrir que o que posso fazer é simplesmente copiar o código hexadecimal dessa cor verde. E eu posso acessar color.adobe.com. E lá na seção de criação, eu posso usar essa roda de cores. Agora podemos ver que eu tenho, posso escolher cores diferentes e ele exibirá o valor hexadecimal aqui. Ele até exibe os valores RGB. Agora podemos usar cores diferentes da roda de cores que ela realmente está nos mostrando. Você pode ver que eles têm cores diferentes. Quantas ferramentas, como sua tríade analógica e monocromática, complementares e tudo mais. Então, analógico basicamente significa que, se você estiver lidando com a cor verde, ele mostrará as cores no segmento verde. Se eu pegar o monocromático , ele mostrará a faixa de contraste, como o lado mais escuro do meu verde ou o lado mais claro do verde. Então você pode ver que há um contraste se formando aqui. Então eu tenho a tríade. Agora viajei. Na verdade, a Triad nos mostrará ou nos dará sugestões sobre cores diferentes que serão opostas. Portanto, também pode nos dar verde. Você pode ver na tonalidade do azul e também na temperatura mais quente. Então essa é minha tríade. Então eu tenho elogios. Agora, a cortesia é completamente o oposto. Ou nos mostrará o verde e algumas sugestões na direção oposta. Então, podemos usar verde, roxo, rosa. Eles são gratuitos. Também temos tons compostos divididos, duplos complementares e quadrados e podemos até usar cores personalizadas. Mas, geralmente, como regra geral, eu sempre recomendo que todos usem o monocromático ou talvez gratuito para desenvolver seus sites ou desenvolver suas ferramentas de design Figma. Portanto, temos modelos monocromáticos, análogos e complementares para usar em nosso projeto. Você pode até mesmo mover essa roda. Se você mover isso em direção ao centro , verá que a cor está mais voltada para o lado mais claro. A cor não está tão saturada. É mais brilhante e não está saturado. Quanto mais você se mover em direção ao volante, ele ficará mais saturado e um pouco mais brilhante. Ficará mais saturado. Depois de mover a roda, a cor também está se movendo, certo? Você pode ver que a cor base também está mudando, a monocromática. Você pode ver quando temos o saturado e o outro está menos saturado. Então, essas são cores diferentes que podemos usar para desenvolver nosso projeto Figma, certo? Vamos fazer uma rápida recapitulação sobre o que aprendemos em toda essa palestra. Então, antes de tudo, as cores podem ter significados diferentes em diferentes cenários ou culturas diferentes. Portanto, não há conjunto de regras específicas que você possa usar apenas para mostrar paixão ou chamar a atenção de seus espectadores. Depende totalmente do tipo de projeto que você está usando. Mas só para manter uma diretriz, eu tinha dado exemplos diferentes de sites diferentes em que eles usaram essas cores diferentes. Agora, as harmonias de cores permitem criar facilmente uma paleta de cores. Essa é a razão pela qual temos o conceito de harmonias de cores. Uma paleta de cores gratuita proporcionará o maior contraste. Isso é o que vimos na paleta de cores da Adobe, certo? Já um monocromático oferece o mínimo de contraste. A ferramenta Adobe Color é melhor para explorar temas de cores ou criar sua própria cor. Então, sim, isso foi praticamente tudo do meu lado. Nas próximas palestras, você aprenderá como criar suas próprias cores, como realmente criar cores como realmente criar lineares diferentes, cores de preenchimento sólidas. E também exploraremos a parte da topografia. 10. (9) Modo de preenchimento de cores: Olá pessoal, bem-vindos de volta a outro vídeo. Nesta videoaula, aprenderemos sobre o modo filme em Figma. E também examinaremos a seção de camadas que temos na Figma. Então, o que exatamente é Fillmore? Então, aprendemos sobre a teoria das cores. Não falamos sobre harmonias de cores, mas ainda há algumas coisas a serem abordadas sobre cores na Figma. Então, não apenas Figma, mas sobre design de coisas. Então, como você pode ver, eu tenho essa caixa em particular, mas de cor verde, certo? Agora você pode ver que, quando eu clicar nesse preenchimento no Modo de Cor, você verá que esse modo de filme específico é de cor sólida. Sólido significa basicamente que a cor terá apenas, essa caixa de elementos em particular terá apenas uma cor. Essa é a minha cor sólida. Se eu mudar isso para linear, o que acontecerá? Eu terei dois tons contrastantes. Isso significa que, primeiro, eu posso ter a cor verde e, segundo, posso ter ciano ou alguma outra cor. Então, deixe-me selecionar um verde, a outra cor como pecado. E se eu mover esse ponto para esse ponto e a segunda cor para esse ponto , você verá que é assim uma sombra ou cor linear foi formada. Duas cores foram usadas para formar essa única cor. Esse é o meu modo de filtro linear. Então eu tenho radial, radial, como você pode ver, está se formando como uma forma circular, como a forma como o sol brilha com a luz do sol, é assim que isso está nos mostrando. Você pode ver que este é o Fillmore radial, certo? Então temos o angular. Isso significa que eu posso escolher esse ângulo para esse ângulo. Somente nesse ângulo específico, obterei aquela cor mais escura ou ciano, certo? Esse é o meu modo de filme angular. Eu tenho diamante. Você pode ver que uma forma de diamante foi formada. Certo? Então eu tenho a imagem. Posso usar imagem ou vídeo ao criar uma cor e assim por diante, certo? Então, esses são os diferentes modos que eu tenho no Figma. Vamos falar sobre as camadas que temos na Figma. Tudo bem, dessa forma de camada, vamos ver como podemos realmente criar nossa própria cor quando sobrepomos diferentes formas de cores diferentes. Então, o que eu vou fazer é criar uma nova moldura, certo? E eu vou criar formas diferentes. Tudo bem? Ao segurar a tecla Alt, posso replicar exatamente essa mesma forma. Tudo bem? Então, essas são as três formas, e todas as três formas estão sobrepostas umas às outras. Digamos que essa forma específica tenha uma cor violeta ou roxa, certo? Uma cor violeta ou roxa com um pouco de transparência. Este tem cor amarela. Vamos definir isso como amarelo. Sim. Este era ciano. Assim, você pode ver essas três formas estão configuradas para assinar. Agora, quando eu sobreponho todas as três formas, obtenho a nova cor? Quando o roxo e o ciano se misturam? A parte sobreposta, eu recebo uma nova cor? Não, eu não tenho. Por que isso? Simplesmente porque a forma da camada, como ela é colocada em camadas, ela é transversal, não multiplicada. Se eu quiser fazer isso, precisarei arrastar todas as três formas e definir a camada como multiplicada. Uma vez que eu faça isso. Agora você pode ver que quando o ciano e o roxo se multiplicam, a cor que obtemos é w. Quando todas as três cores se multiplicam, obtemos preto. Quando o ciano e o amarelo se multiplicam , obtemos verde, roxo ou rosa multiplicado por amarelo, obtemos vermelho. Então, isso era tudo uma questão de cores. Acabamos com as cores. Agora, na próxima palestra em diante, aprenderemos sobre tipografia e diferentes tecidos. 11. (10) Estilos de texto: Tudo bem, vamos entrar na tipografia. Agora, a tipografia é um conceito muito importante no design, esteja você criando um site ou um aplicativo móvel. Teria algum tipo de conteúdo de texto. Agora, quando você escreve qualquer conteúdo em um formato baseado em texto, sabe que seu conteúdo pode ser imagens, vídeos, certo? Também pode ser texto. Portanto, x também precisa de um pouco de estilo. Agora, o estilo do texto pode ser o estilo da fonte, a família da fonte, o peso e o tamanho da fonte e também o alinhamento da fonte. Se você quiser que ele o alinhe ao centro ou talvez na parte superior, talvez na parte inferior. Então, isso é tudo que vamos aprender nesta palestra. Então, para isso, como você pode ver, eu criei uma moldura dentro dela. Se eu quiser escrever alguma coisa, precisarei clicar nesse ícone na minha barra de ferramentas. Esse T I pode representar o texto. Depois de clicar ali, agora posso arrastar. Posso segurar o botão do mouse e arrastar a caixa de texto. Dentro dessa caixa de texto, posso escrever meu texto. Digamos que eu escreva qualquer texto aleatório. Agora, novamente, veja, podemos ver esse texto. Embora o texto seja muito pequeno, podemos aumentá-lo acessando o painel de propriedades do design. Dentro do painel de propriedades do design, você pode ver que eu posso alterar o tamanho da fonte para, digamos, 30. Portanto, essa unidade de 30 está em pixels. Se você não conseguir ver nenhum outro símbolo ou unidade após o valor , provavelmente está em pixels. Se você ver um sinal de porcentagem, isso significa que está em porcentagem. Se você viu o formato não graduado, é em graus. Se você olhar aqui no painel de propriedades do design, essa rotação específica é definida no formato de graus. Portanto, a unidade aqui é graus, enquanto o tamanho da fonte é no formato n pixels. Aqui, você pode ver que temos o peso da fonte. Atualmente, está definido como normal. Você pode até mudar isso para negrito. Você pode ver que o texto agora foi alterado para tigela. Se você quiser que isso seja um pouco leve, você pode ver que é assim que nosso livro didático se parece. Vou voltar ao normal. Agora, vamos tentar mudar o estilo da nossa fonte, mas vamos tentar mudar a família da fonte. Eu gostaria de aplicar um estilo diferente a ele e posso escolher entre estilos diferentes. Agora, como podemos restringir a uma família de fontes específica de toda essa lista? Bem, para isso, você tem outros recursos a partir dos quais você pode definir qual família de fontes você gostaria de usar. Eu pessoalmente uso o Google Fonts para realmente verificar qual família de fontes seria melhor para o meu design. Então você pode simplesmente ir até a nova guia e pesquisar fontes do Google. Depois de clicar nas fontes do Google, você verá esta página. Vou entrar, ver os telefones disponíveis. Depois de ir até lá, você pode ver que tenho muitas famílias de fontes diferentes que posso escolher. Digamos que eu queira selecionar o Roboto. Clique duas vezes aqui. E agora você pode ver que também está nos mostrando como seria se eu dissesse que o peso da minha família de fontes é muito pequeno, 100, como ficaria meu telefone se eu mudasse isso para metálico, como ficaria se eu dissesse isso para irregular e assim por diante. Digamos que eu queira realmente examinar meu conteúdo em vez de seu conteúdo fictício. Eu gostaria de definir meu próprio conteúdo fictício para verificar se ele se encaixa no meu estilo ou não. Então, para isso, o que eu poderia fazer é escrever aqui um pouco do meu texto de pré-visualização. Digamos que eu queira escrever qualquer texto aleatório. Tudo bem? Então, é assim que meu texto ficaria. Digamos que eu queira usar essa família de fontes Roboto. Então eu posso simplesmente voltar para minha Figma. Eu posso clicar na família da fonte. Vou precisar selecionar todo esse texto. Você pode ir até aqui e simplesmente pesquisar Roboto. E você pode ver que o estilo Roboto foi aplicado aqui e atualmente está definido como normal. E se eu quiser colocar isso em negrito? É assim que nosso texto se parece. E é assim que seria ousado. Você pode ver exatamente da mesma maneira. Correto? Agora, essa área específica em que temos o valor 35, o que é essa coisa? Essa é basicamente a altura da minha linha. Agora, o que significa basicamente altura da linha? Digamos que eu também tenha outra frase. Digamos que qualquer texto aleatório que eu esteja digitando para testar isso. Então, no total, eu digitei três linhas. Certo? Agora, a altura entre essas três linhas é definida pela altura da minha linha. Então eu posso mudar a altura da linha para, digamos, 30. Então eu posso definir 30. E você pode ver agora que o texto está aparecendo mais próximo. E se eu quiser aumentar isso? Então, eu também posso aumentar a altura da linha. Estou apenas segurando minha tecla de seta para cima para aumentar a altura da linha. E agora você verá essa alteração sendo aplicada ao meu texto. Deixe-me selecionar todo o meu texto. Vou ultrapassar a altura da linha e aumentarei a altura da linha. Você pode ver. Isso é cada vez mais espaço entre essas diferentes linhas. E se eu quiser deixar algum espaço entre essas letras? Para isso, precisarei usar o espaçamento entre letras, que está aqui. Agora você pode ver que está usando a unidade percentual, não a unidade de pixels, mas a unidade percentual. Vamos definir isso para dez por cento primeiro e depois tentaremos aumentá-lo. Você pode ver 10%. É assim que parece. E se eu quiser diminuir isso? Você pode ver o espaçamento entre as letras como seria nosso formato. Certo? E essa parte? O que isso significa? Basicamente, significa que o espaçamento entre parágrafos é bom, não falaremos sobre o espaçamento entre parágrafos a partir de agora, porque não será evidente se eu mostrar tudo para vocês. Tudo bem, agora, vamos, deixe-me desfazer todas essas coisas em nosso estado inicial. Estou digitando para testar a fonte. Certo? Agora. Esse é o tamanho da minha caixa de texto. Porém, se eu quiser adicionar mais conteúdo, posso adicionar, digamos que depois disso, na minha nova linha, eu queira adicionar o número da linha para a linha phi. Todo esse texto, a linha quatro e a linha cinco, está fora da minha caixa de texto. Certo? Então, para isso, o que eu posso fazer, posso mudar isso para essa altura de linha. Isso significa que a caixa de texto se ajustará de acordo com a altura da minha linha. Agora, esse tamanho fixo significa que até esse ponto, o ponto, minha caixa de texto estará apenas até esse ponto, ela não mudará se eu adicionar mais palavras ou mais linhas. Deixe-me mostrar o exemplo disso. Digamos que esse seja o texto que estou realmente adicionando. Então você pode ver que a altura não está sendo ajustada. Até mesmo a largura não está sendo ajustada apenas porque dissemos isso para um tamanho fixo. Então, na verdade, ele fixou o tamanho anteriormente, com base nos textos que tínhamos na linha número cinco, e agora a caixa não mudará sua largura ou altura. E se eu quiser alterar a largura da nossa caixa de texto de acordo com o texto dentro da caixa de texto. Para isso, precisarei selecionar isso, que é largura automática. Agora você pode ver que é assim que minha caixa de texto se parece. E se eu quiser que esse texto seja alinhado ao centro? Posso selecionar esse botão específico que alinhará meu texto no centro em relação à minha caixa de texto. Se eu selecionar isso, ele o alinhará à esquerda em relação à minha caixa de texto. Se eu selecionar isso, ele o alinhará à direita em relação à minha caixa de texto. Isso está selecionado, ou seja, alinhe-o ao topo. Se eu selecionar isso, ele o alinhará na parte inferior, ou melhor, devo dizer meio. Deixe-me mostrar o que quero dizer com isso. Se eu escolher essa peça e se eu escolher, alinhe-a ao meio, deixe-me reduzir o próximo tamanho da caixa. Então, para isso, o que eu posso fazer é escrever, digamos, lorem ipsum. Tudo bem. Agora você pode ver que a caixa de texto está se ajustando de acordo com os textos que temos. Isso é possível porque configuramos nossa caixa de texto para ter um veterinário automático. Tudo bem? Se eu adicionar uma nova linha, você pode ver que ela está até mesmo acomodando sua altura, certo? Então eu clico nessa caixa de texto e arrasto uma nova caixa de texto. Agora você pode ver que eu sou capaz de escrever este texto do meio em diante. Agora ele está alinhando o texto em relação ao eixo y dentro da minha caixa de texto. Se eu selecionar isso para alinhá-lo à parte superior, meu texto aparecerá na parte superior em relação ao eixo y dentro da minha caixa de texto. Se eu selecionar isso na parte inferior, significa que meu texto está sendo alinhado na parte inferior em relação ao eixo y dentro da minha caixa de texto. Então, essas são algumas das propriedades das minhas fontes. Eu também tenho mais uma funcionalidade dentro do meu painel de propriedades de design, que são os três pontos aqui. Estas são minhas configurações de tipo. Se eu clicar aqui, posso visualizar o texto antes mesmo de aplicar o estilo ao meu texto. Agora você pode ver se eu aplico isso, que é de tamanho fixo. É assim que meu texto ficaria se eu o colocasse na altura automática. É assim que meu texto dentro dessa caixa de texto ficaria. Se eu configurar isso para automatizar. Essa é a aparência da exportação. Se eu quiser o alinhamento para o lado esquerdo, posso fazer isso se quiser que ele seja centralizado. É assim que seria se eu quisesse estar alinhado corretamente. É assim que ficaria. E se eu quiser que seja justificado, seria assim. Agora, lembre-se de que nem todas as funcionalidades, como seu alinhamento, você está redimensionando e a decoração estão disponíveis para todas as famílias de fontes. Algumas famílias de fontes permitem, alguns elementos de design, a soma não permite. Portanto, tenha isso em mente. Agora estamos usando o Roboto. É por isso que está nos permitindo ter esse alinhamento justificado. E se eu mudar esse texto específico de Roboto para, digamos, Poppins? Se eu fizer isso, agora você verá que alguns dos estilos não estão disponíveis. Digamos qual estilo não está disponível. Tudo bem, todo o estilo está disponível. Vamos aos detalhes. Portanto, até mesmo subscrito e sobrescrito estão disponíveis. Tudo bem, então sim, eu estava falando que alguns estilos não estão disponíveis para algumas famílias de fontes. Mas no meu caso, Poppins está nos permitindo formatar essas coisas, certo? Assim, podemos fazer um alinhamento justificado, podemos sublinhar. Podemos até ter um tachado, o que significa que uma linha passará pelo nosso texto. O que quero dizer com isso é, digamos que eu sou, deixe-me colocar desta forma. Tudo bem. Deixe-me escrever palavras que façam sentido, como texto aleatório. Você pode ver que o texto está sublinhado. E se eu não quiser um sublinhado, mas sim, gostaria de ter isso que fosse riscado. Então você pode ver que um ataque na linha está passando por nosso texto. E se eu quiser isso? Mas apenas nenhum, sem decoração como tal. Então você pode até mesmo fazer isso. Agora, se você tiver algum parágrafo recuado, poderá fazer isso. Agora, o que significa recuo de parágrafo? Digamos que você tenha dez pixels de parágrafo recuado. Isso significa que restariam dez pixels de espaço. Começando pela caixa de texto. Sua primeira carta começa com seus textos, certo? Então esse é o meu parágrafo recuado. Como eu disse anteriormente, o espaçamento entre parágrafos não faria sentido. Se eu explicar, todos vocês analisarão isso mais tarde, se necessário. Também temos o estilo de lista. Digamos que eu também tenha outros textos. Digamos que um. Primeiro, segundo, terceiro. Tudo bem? E eu vou selecionar todo o meu texto. E eu poderia aplicar algum estilo de lista, como, digamos, uma lista com marcadores. Então é assim que nosso texto ficaria se eu dissesse que duas listas numeradas teriam números, certo? Se eu tiver algum espaçamento entre linhas, posso até mesmo fazer isso. Então temos alguns casos. Agora, maiúscula significa que, se eu quiser todo o meu texto tenha maiúsculas , todas as letras do meu texto estarão em maiúsculas. Se eu quiser que isso seja minúsculo , todas as letras dentro do meu texto teriam letras minúsculas. Se eu quiser a letra maiúscula do título , isso significa que cada palavra, primeira letra, estaria em maiúscula. Tem todas as letras dessa palavra em minúsculas. Então temos isso, que não é compatível com letras maiúsculas. Você pode ver que a fonte não suporta letras maiúsculas, então esse Poppins não suporta esse invólucro específico. Então, isso é o que eu disse anteriormente. Vamos voltar para o Roboto e veremos se isso é aplicável ou não. Agora você pode aplicar isso , que é forçar pequenas capas. Agora, para letras minúsculas, basicamente significa que, embora todas as letras dentro do texto estejam em maiúsculas, o tamanho delas é menor, forma que ficaria assim. Não é uma fonte tão grande e grande, certo? Então é isso que essa primeira tampa pequena realmente significa. Digamos que você não queira aplicar nenhum desses casos, então você pode simplesmente selecionar esse nenhum. Você pode voltar para esses detalhes. Se você quiser algo sobrescrito ou subscrito, você pode até mesmo escrever isso. Digamos que você tenha esse texto algo como dois elevado a dois. Então você pode colocar isso em sobrescrito. Então, agora são dois aumentados para dois. E se eu quiser escrever, digamos, logar até a base dez. Então eu posso escrever o log dez. Posso selecionar dez e adicionar isso por assinatura. Agora podemos ver que agora é logarítmico na base dez. Se você está criando algum conteúdo para seu site, ou talvez um aplicativo no qual gostaria de usar essas expressões matemáticas ou talvez equações químicas, então você pode usar o Figma para realmente ter sobrescrito e subscrito em seu design. Tudo bem, então tudo foi do meu lado para esta palestra em particular. Na próxima palestra, você aprenderá sobre qual é a diferença entre seu formato serifado e sem serifa? 12. (11) Fontes de Serif vs Sans Serif: Agora, há muita confusão entre fontes com serifa e sem serifa. Bem, não se preocupem, pessoal. Vou tentar o meu melhor para esclarecer a confusão. E até o final desta palestra, você poderá escolher a fonte perfeita para seu design. Qual é exatamente a diferença entre essas fontes serifadas e sem serifa? Então Sons é uma palavra francesa, que basicamente significa sem. Assim, como o nome sugere, a principal diferença entre esses dois tipos de faces é a presença ou ausência de serifa nas letras. Agora, o que exatamente é esse seguro? Tão assertivo quanto uma linha decorativa ou um cone adicionado ao início ou ao final da haste das letras, que cria pequenos planos horizontais e verticais dentro de uma palavra. Resumindo, você pode dizer que as fontes serifadas têm essas linhas decorativas ou cones, enquanto as sem serifa não. Como você pode ver aqui, sans-serif não tem esses traços. Agora, vamos dar uma olhada em algumas das fontes Serif mais usadas. Então, esses são Times New Roman. Temos em nosso Microsoft Word. Portanto, Times New Roman é uma fonte serifada comumente usada. Garamond é outra fonte serifada comumente usada. Depois, temos Baskerville, Georgia e Courier New. Vamos dar uma olhada em algumas das fontes sem serifa mais usadas. Helvetica, Proxima Nova, Futura e Calibri. Agora, o que uma fonte serifada diz sobre sua marca? Se você busca uma aparência tradicional em seu design, definitivamente deve seguir a rota da serifa. Uma vez que as fontes serifadas têm sido amplamente utilizadas em livros, jornais e revistas. Eles nos lembram de temas mais clássicos, formais e sofisticados. As fontes serifadas são uma ótima opção para marcas que desejam ser vistas como confiáveis, estabelecidas e confiáveis. Portanto, as fontes serifadas são uma ótima opção para negócios mais tradicionais, como escritórios jurídicos , empresas financeiras ou seguradoras. O que uma fonte sem serifa diz sobre sua marca? Portanto, as fontes sem serifa têm mais a ver com jogar a tradição pela janela e favorecem muito mais do que sofisticação. Portanto, as sans serifs são consideradas mais modernas porque você sabe que, nossos minimalistas, oferecem um visual moderno. Eles são mais simplistas. Então, se você quer que seu design pareça mais jovem, mais acessível, certo? Portanto, fontes sem serifa podem parecer mais acessíveis do que as aqui, mais equivalentes com serifas corporativas. Portanto, as fontes sem serifa são vistas como mais acessíveis, divertidas e jovens devido à sua simplicidade. Então, basicamente, novos negócios, start-ups, negócios on-line, empresas de tecnologia usam essas fontes sem serifa. O logotipo atual do Google está usando fonte sans-serif. Mais cedo, em 2005 ou seis anos, quando o Google era bem novo em comparação com o Yahoo, eles usavam fontes serifadas. Então é só isso. Espero que a confusão entre Serif e Sans Serif seja clara e espero que todos saibam qual fonte usar para seu design. 13. (12) Usando fontes personalizadas em figma: Tudo bem, vamos dar uma olhada em como podemos fazer o upload de nossas fontes personalizadas e Figma. Agora, pode haver uma situação em que você queira usar algum tipo de família de fontes, que não está disponível no Figma. Não está disponível nas fontes do Google. Então, o que você faz nesse caso? Para dar um exemplo, e se eu quiser usar a família de fontes Grand Theft Auto? Como se eu realmente gostasse de jogar jogos alugados e gostaria de usar essa família de fontes, mas isso simplesmente não está disponível no Figma. Digamos que eu queira aplicar esse mesmo estilo a essa fonte. Então, como faço para aplicar isso? Então, para isso, precisarei acessar figma.com slash downloads. Basta ir até lá lá e escolher a plataforma que você está usando. No meu caso, estou usando uma máquina Windows, então vou instalar esse instalador do Windows nesses instaladores de fontes. Então, vai levar algum tempo e ele tentará baixar o aplicativo EXE, basta abri-lo e instalá-lo em seu sistema. Então, eu vou instalar isso. Você pode ver que isso foi instalado. Agora posso voltar a essa fonte e clicar aqui para fazer o download. Agora eu não vou baixar isso novamente porque eu já baixei isso no meu sistema. Então, aqui, como você pode ver, este é um arquivo zip. Então, vou extrair isso usando o 7-Zip. Você pode usar qualquer outra ferramenta que tenha , como sua traqueia ou qualquer uma dessas coisas. Não vou entrar em detalhes sobre dados. Então agora temos essa famosa fonte dot TXT. Depois de clicar sobre isso, ou melhor, eu deveria dizer isso, esse arquivo PDF de um ponto. Você pode ver este botão de instalação, basta clicar ali. Portanto, o Figma baixará essa família de fontes em particular. Agora você pode usar essa família de fontes em seu Figma. Então, deixe-me levá-lo de volta para Figma e eu vou voltar ao meu projeto de teste. Então, vamos voltar para lá. Vou aplicar o texto, que é Grand Theft Auto. Vamos aplicar o estilo, ou seja , se eu não estiver errado, seu preço é baixo. E você pode ver da mesma forma. Sim. Agora você pode ver que exatamente a mesma família de fontes foi aplicada. Por aqui. Você pode ver que essa é a família de fontes que está sendo usada. O mesmo está sendo aplicado aqui. Deixe-me aumentar o tamanho da fonte para que fique muito mais visível. Agora, espero que todos possam ver exatamente a mesma família de fontes está sendo aplicada. 14. (13) Trabalhando com imagens em Figma: Tudo bem, vamos continuar com as imagens em Figma. Agora, existem três maneiras de realmente importar imagens no Figma. O primeiro e mais importante método é que você pode examinar o ícone dessas formas na barra de ferramentas. E você pode selecionar essa opção que consiste em colocar imagem ou vídeo. Você também pode ver a tecla de atalho, que é Control Shift e k. Então, se você segurar os botões Control Shift e K, você terá que navegar pela imagem em que está localizada dentro de sua pasta. E você pode selecionar isso. E você pode simplesmente colocá-lo onde quiser colar. Tudo bem, então você pode ver que esta é a minha imagem. Essa imagem em particular é a miniatura do meu curso completo de desenvolvimento web. Se você estiver interessado em explorar os aspectos de desenvolvimento web, você definitivamente deveria conferir meu curso porque este curso é focado no desenvolvimento web completo. Ele se concentra tanto no front-end quanto no back-end. Então, começamos diretamente do HTML. Em seguida, abordamos CSS, algumas estruturas CSS como Bootstrap, Entail e CSS. Também analisamos o JavaScript em sua totalidade. Também abordamos estruturas de JavaScript como o React, que é uma estrutura de front-end. Em seguida, também abordamos uma estrutura de back-end, que é o NodeJS. Também analisamos o JS expresso. Em seguida, abordaremos bancos de dados como o MongoDB e você também verá como usar o Git e o GitHub para realmente fazer o upload de seus projetos. E não apenas projetos, mas qualquer site que eles gostem de enviar. E, a propósito, se você estiver interessado em criar aplicativos e sites do mundo real, você definitivamente deveria conferir este curso porque lá, eu tento o meu melhor para atualizar o curso regularmente, enviando projetos , vídeos e tutoriais sobre novas estruturas. Então, chega de marketing para meus outros cursos, vamos nos concentrar novamente em nossas imagens e Figma. Portanto, essa é a única maneira de importar imagens no Figma. A outra maneira é realmente abrir a pasta e usar o método de arrastar e soltar para colocar a imagem dentro do espaço de trabalho do Figma. Agora, por aqui, como você pode ver, eu não importei essa imagem para dentro da minha moldura. Se eu quiser colocar essa imagem e a moldura, também posso fazer isso. Então, deixe-me criar um quadro de, digamos, do tamanho de uma área de trabalho. E, hum, sim, eu sei onde posso colocar minha imagem para que eu possa usar o arrastar e soltar ou então eu posso até mesmo fazer o Controle C e o Controle V. Uma vez que eu faço o Controle V, você pode ver que a imagem foi colocada dentro da minha moldura. Agora você verá que as imagens são grandes em comparação com o tamanho do quadro. Então a imagem foi cortada, certo? Então, se eu quiser redimensionar a imagem, o que eu posso fazer é segurar esses, você sabe, esses quatro vértices. Você pode ver se acha que gostaria de redimensionar a imagem. E se você fizer algo assim, perceberá que a imagem não está sendo redimensionada, mas sim cortada. Então, o que você faz nesse caso? Por que isso está acontecendo? Está acontecendo porque selecionamos o movimento. Em vez disso, devemos selecionar o botão de escala. Então, deixe-me desfazer. E agora vou selecionar o método de escala ou você pode simplesmente segurar o botão no teclado. E agora vou redimensionar de forma que a imagem não seja cortada de forma alguma. Você pode ver que as imagens não estão sendo gravadas. Pelo contrário, é ter medo. Foi reduzido. O tamanho da minha imagem diminuiu significativamente e a imagem não está sendo cortada de qualquer maneira. Tudo bem, então essas são as três maneiras de realmente importar imagens no Figma. Agora, e se você quiser colocar essa imagem em uma forma? Como podemos fazer isso? Então, digamos que eu queira colocar essa imagem e a caixa retangular. Então, deixe-me criar uma caixa retangular. E aqui, eu gostaria de colocar essa imagem em particular. Então, o que eu posso fazer é selecionar essa caixa específica. E dentro do meu preenchimento. Aprendemos sobre campos e todas essas coisas na seção de cores. Então, em vez de sólido, escolherei Imagem. Uma vez que eu vá até aqui, eu posso escolher minha imagem, que é essa imagem em particular. Agora você pode ver que isso é agora, isso agora está dentro da minha forma. Tudo bem, agora eu posso até mesmo girar essa imagem. Então, quando eu clicar nessa rotação, ela a girará em 90 graus. Agora, por que ela? A imagem foi girada, não minha forma. Então, isso é uma coisa que você deve ter em mente. Tudo bem? Então, eu posso girá-lo quantas vezes eu quiser. Tudo bem? Agora, você também verá que temos alguns outros ajustes que eu posso fazer. Em vez disso, devo dizer isso no filme ou posso até mesmo mudar do modo filme para o modo de ajuste. Depois de fazer isso, você verá que a forma está ocupando a dimensão exata da minha caixa retangular. Então isso é possível porque eu escolhi esse modo FET. Se eu escolher isso para cortar, poderei recortar a imagem de forma que somente essa parte da imagem fique visível. Digamos que eu queira me remover da imagem e colocar apenas o logotipo, que são os logotipos NodeJS reagentes do MongoDB Express. Então, depois de cortar minha imagem, agora você pode simplesmente clicar nessa cruz para sair do modo de corte. E agora apenas essa parte da imagem está presente dentro da minha caixa. Tudo bem, também temos outras opções. Com isso, quero dizer, digamos que eu selecione essa peça eu gostaria de encaixar. Isso significa que vamos entrar em forma e aumentar o tamanho da minha caixa. Tudo bem? Vou aumentar o tamanho da minha caixa. E agora eu também posso fazer outros ajustes. Assim como o Lightroom e o Photoshop permitem que você lide com outros ajustes em suas imagens, como exposição, contraste, saturação, temperatura, tonalidade, realces, sombras, tudo isso que você pode fazer no próprio Figma. Você não precisa usar nenhum outro software para realmente lidar com a parte das imagens. Como você pode ver, diminuí um pouco a exposição para que a imagem pareça mais escura. Então, essa é a minha exposição, se eu quiser aumentar o contraste e você ver mais nitidez e tudo mais. Gostaríamos de aumentar a saturação. Eu também posso fazer isso. Portanto, a personalização depende de você. Não existem regras fixas sobre qual exposição deve ser definida para essa imagem ou qual contraste deve ser definido para essa imagem. Depende totalmente do seu caso de uso na imagem com a qual você está trabalhando. Tudo bem? E a outra coisa que eu queria mostrar é que embora eu aborde em detalhes na seção de efeitos, digamos que você queira criar tom mais escuro ou um efeito do tipo vidro para essa imagem em particular. E gostaria de aplicar algum texto a ele. Agora você deve ter visto alguns sites em que você tem uma imagem. Agora, essa imagem tem alguma transparência e sobre a qual uma certa largura de texto, tonalidade mais clara é aplicada uma tonalidade mais clara é aplicada de forma que a imagem também fique visível, embora não claramente, mas alguma sombra das imagens na página da web e o texto também esteja lá. Deixe-me mostrar o que quero dizer com isso. Em segundo lugar, selecione essa imagem. Eu posso ir até o painel de transparência e reduzir a transparência. Então, se eu mudar de 100% dois, digamos 80, 80 por cento. E você pode ver que a imagem é transparente. Tudo bem, vamos, vamos trazê-lo de volta para 100%. Tudo bem, eu posso usar o Alt. Posso arrastar para baixo para obter uma cópia exata dessa forma. E agora, dentro do modo filme, vamos mudar de imagem para sólido. Isso significa que não quero colorir uma imagem. Deixe-me ter um tom mais escuro aqui. E eu escolherei a transparência para cerca de 22%, digamos que seja cerca de 22%. Se eu trouxer de volta a esta parte. Agora você pode ver que é assim que minha imagem se parece. Você pode ver que é assim que minha imagem ficaria. Agora, posso até aplicar algum texto a essa imagem. Digamos que eu queira escrever algo como MAN stack. Também vou aumentar o tamanho da fonte. Então, vamos aumentar o tamanho da fonte desse texto. Então, em vez de 12, vamos fazer isso 36. 36 ainda não está claro. Vamos com 48. 48 parece bom. Vamos mudar o estilo do texto para Roboto. E eu posso até mudar a cor dessa fonte para, digamos, preto. Certo? Sim, isso parece legal. Uma pilha. Então, isso foi tudo uma questão de imagens para esta palestra. Mais uma vez, uma rápida recapitulação. Há três maneiras de importar imagens em seu arquivo. O primeiro método é realmente manter pressionados os botões Control Shift e K no teclado. E então você pode ver o arquivo que você gostaria de importar. A outra forma é simplesmente arrastar e soltar a imagem da sua pasta para o espaço de trabalho do Figma. O terceiro método é realmente usar os métodos Controle C e Controle V. O que aprendemos? Aprendemos que existe uma maneira de realmente importar ou colocar sua imagem dentro da forma, qualquer forma, não apenas um retângulo, mas se você estiver lidando com uma elipse ou polígono, você pode escolher o modo de preenchimento e do modo filme dentro do sólido, de, você pode mudar isso de sólido para imagem. Depois de fazer isso, você também tem outras opções. Você pode cortar isso. Uma última coisa que nos restou é que eu posso até mesmo mudar de FIT para crop. E uma vez que eu faço mosaico , isso significa que posso repetir as imagens quantas vezes eu quiser. Digamos que de 20 I10, defina isso como 25, então você verá 25%. Isso significa que basicamente quatro vezes minha imagem foi repetida dentro dessa forma específica. Então esse é o meu azulejo. Portanto, você tem opções diferentes para escolher. Se você preencher, isso significa que a imagem será colocada dentro da sua forma, mas não será ajustada acordo com as dimensões da forma. Se você escolher o ajuste, ele se encaixará adequadamente. Se você escolher a outra forma de cortar , terá que cortar a parte da sua imagem. Se você escolher o bloco, poderá repetir as imagens quantas vezes quiser. Depois, você tem as opções para lidar com os ajustes da imagem, como exposição, contraste, saturação e tudo mais. Também expliquei como girar imagens. Ok? Mais uma vez, lembre-se de que sempre que você gira, você está girando a imagem dentro da forma, não a forma em si. Então, isso é uma coisa que você precisa lembrar. E se você quiser diminuir ou aumentar a transparência da imagem, basta ir até essa camada e você poderá lidar com a transparência da imagem. Se você quiser usar esse tipo de efeito de sombra ou vidro, basta usar outra forma com uma cor sólida, reduzir sua transparência e posicioná-la com essa imagem específica. E então você pode usar qualquer outro telefone ou qualquer outra forma que você gostaria de usar nessa camada. Então isso foi tudo. Na próxima palestra, você aprenderá alguns plug-ins que podemos usar para realmente nos ajudar a importar imagens. E também aprenda como remover o fundo das imagens no próprio Figma. 15. (14) Plugin Unsplash: Tudo bem, vamos continuar com imagens e Figma. Agora, às vezes você está criando algum tipo de design para seu cliente. Talvez você queira usar algumas fotos de banco de imagens. Agora, se você está pensando que posso usar qualquer foto do Google, posso simplesmente pesquisar no Google qualquer imagem que eu gostaria de usar no meu design para que você possa entregá-la ao meu cliente. Bem, você está errado. Por que isso? Às vezes, as imagens são protegidas por direitos autorais. Se você usar para fins comerciais, poderá enfrentar alguns problemas legais, como questões de direitos autorais. Então você não quer se meter em problemas. A melhor maneira de lidar com essa situação é baixar imagens sem direitos autorais pelas laterais, o que fornece fotos de banco de dados. Um dos sites mais populares é o Unsplash. Então, basta acessar unsplash.com pesquisar qualquer imagem que você esteja procurando. Digamos que eu esteja procurando imagens abstratas. Então eu posso simplesmente ir até lá. Posso procurar qualquer uma das imagens e baixá-las. Outro site é o pexels.com. O terceiro é o Pixabay. E você encontrará vários sites da EGN que forneceriam fotos de banco de dados. Agora, uma maneira de importar as fotos para o seu projeto Figma é realmente baixá-las desses sites, localizá-las em alguma pasta e importá-las em seu Figma. Foi o que aprendemos anteriormente, que existem três maneiras de importar imagens no Figma. Mas não existe um atalho para importar imagens diretamente do Unsplash para o seu projeto Figma. É isso que os plug-ins entram em cena. Portanto, o plug-in é basicamente uma adição ou extensão do seu programa existente, que fornecerá alguns recursos adicionais que o programa existente não está fornecendo. Assim, você pode baixar qualquer plug-in, não apenas o plugin Unsplash, mas qualquer plug-in que você gostaria de ter no Figma basta acessar este ícone de Recursos na barra de ferramentas ou no Figma, basta clicar ali, acessar plug-ins e procurar o plug-in que você está procurando. No nosso caso, como estamos lidando com imagens, gostaríamos de baixar o plugin Unsplash. Então, vamos pesquisar o Unsplash. Agora mesmo. Você pode ver que isso está aparecendo recentemente, simplesmente porque eu já baixei isso na minha conta Figma. Basta clicar sobre isso. A instalação e a instalação serão necessárias algum tempo. Depois de fazer isso, você terá essa opção de execução. Agora você pode executá-lo a partir daqui e importar a imagem, o tipo de imagem que você gostaria de usar dentro do seu projeto. Então você pode fazer isso. De outra forma. Você pode ver que ele está executando meu plugin Unsplash. Agora eu posso selecionar este abstrato. Eu posso importar isso. Você pode ver que a importação levará algum tempo e agora foi importada, certo? Outra forma de baixar esse plugin é clicar com o botão direito do mouse em seu espaço de trabalho Figma. Acesse esses plug-ins e encontre mais plug-ins. Depois de fazer isso, você encontrará o Unsplash. Outra maneira de realmente usar o plugin Unsplash é clicar com o botão direito do mouse em sua forma ou moldura e acessar Plugins, unsplash. E seu plugin Unsplash abrirá diretamente, selecionará um resumo ou qualquer outro tipo de imagem que você gostaria de usar. E no meu caso, eu gostaria de usar essa imagem em particular. Então, eu só vou clicar sobre isso. Isso vai levar algum tempo. E agora você pode ver que essa imagem foi carregada. Eu posso até mudar a cor da fonte. No momento, está preto e a imagem também está escura, então não parece boa, mas não se preocupe. Estou apenas tentando explicar a todos como usar esse plugin específico. Agora, e se você quiser importar essa imagem do Unsplash da Itália em uma forma? Então, como vamos fazer isso? Digamos que eu tenha uma imagem retangular. Deixe-me deletar essa imagem em particular. Está demorando um pouco para ser desfeito. Agora eu posso criar uma forma retangular desse tamanho. Então eu posso criar outro retângulo, digamos, desse tamanho. Eu posso usar o Alt e é assim que eu posso lidar com isso, certo? Sim. Vamos fazer outra cópia dessa forma. E outra cópia dessa forma. Agora, eu quero importar as imagens dessa forma. E, a propósito, vamos tentar alinhá-los centralmente. Agora eu posso importar as imagens dentro dessa forma apenas clicando com o botão direito do mouse nessa forma. Eu posso escolher Plugins, unsplash e então eu posso escolher abstrato. Vamos importar essa imagem. E você pode ver que essa imagem foi importada. A mesma coisa que eu posso fazer aqui. Por aqui. Por aqui também. Por aqui, e por aqui também. Então, é assim que você pode simplesmente importar imagens sem direitos autorais para o seu projeto Figma. 16. (15) Remover fundo de imagens em Figm: Tudo bem, vamos ver como podemos remover o fundo de nossas imagens. Agora eu sei que todos vocês devem estar cientes da remoção do site dot Vg. Agora, este é um site muito famoso que remove o fundo de suas imagens. Até eu uso de vez em quando para remover o fundo das minhas imagens. Então, o que você faz aqui é simplesmente carregar qualquer imagem da qual deseja remover o plano de fundo e fazer o download da imagem modificada. Agora, podemos fazer isso diretamente em Figma? Bem, você pode fazer isso. E para isso, você precisará de um plugin, que obviamente removi ou BG. Mas você precisa primeiro se inscrever e criar uma conta ou remover o ponto Vg para poder gerar sua própria chave de API. Agora, usando essa chave de API, você a usará em seu plug-in, o Remove Background From the images. Então, deixe-me me inscrever rapidamente e criar uma conta aqui. Vou usar o Google. Apenas certifique-se de selecionar isso. Estou concordando com os termos de serviço. E se você quiser receber os novos recursos e ofertas especiais por e-mail. Você pode simplesmente clicar nisso, seu e-mail marketing, e-mail marketing, essas coisas. Então, depois de fazer isso, basta acessar as ferramentas e a API. Vá até lá. E você pode gerar sua própria chave de API. Basta acessar esta ABI e a linha de comando. E você verá como faço para obter uma API. Basta ir até lá. E eles mostrarão que, no perfil da conta, você verá a chave da API. Então, vou criar uma nova chave de API. Vou criar essa chave de API e copiá-la. Vou voltar para minha Figma. Vou selecionar essa forma específica qual gostaria de importar minha imagem. Então, vamos para Plugins unsplash. Vou procurar uma imagem de retrato. Então, vamos procurar um retrato. Vou selecionar esta imagem e gostaria de remover o plano de fundo dessa imagem. Use o padrão antigo para que eu possa fazer uma réplica dessa imagem. E vou baixar um novo plugin pesquisando, removendo, removendo, BG aqui. Você pode ver que eu posso selecionar Executar e ele tentará ser executado, mas não será executado. Por que isso? Simplesmente porque você precisa definir a chave de API primeiro, como você viu, precisamos definir a chave de API primeiro. Vamos voltar aos plug-ins. Vou clicar nesse menu suspenso. Vamos tentar configurar nossa chave de API. E agora vou precisar colar meu EBIT. Então, vou colar minha chave de API e clicaremos em Salvar. E agora eu posso remover esse plano de fundo apenas clicando em plug-ins com o botão direito do mouse. Remova o plano de fundo e execute, e a remoção do plano de fundo levará algum tempo. Vamos tentar dar a eles algum tempo para remover o plano de fundo. E você verá que o plano de fundo foi removido. 17. (16) Imagens de mascaramento em Figma: Tudo bem, vamos dar uma olhada nas diferentes técnicas de mascaramento que podemos fazer no Figma. Agora você pode estar se perguntando o que é esse mascaramento? Mascarar é, você sabe, uma forma de manipular suas imagens sem realmente destruir a qualidade de sua imagem. Então, digamos que você queira realmente mostrar alguma parte da sua imagem. Então esse é o seu mascaramento da imagem. Assim como vimos anteriormente, como remover o fundo das imagens. Isso não passava de uma forma de mascarar as imagens da capa. Nós removemos o fundo da imagem. Estávamos apenas exibindo o retrato, a pessoa em si, como você pode ver aqui. Se removermos o fundo da imagem, essa cor cinza que você está vendo não passa da cor da nossa caixa retangular. Então, essencialmente, nessa imagem em particular, ela não tem um fundo cinza. Agora ele ocupa a cor, que é a cor da nossa caixa retangular. Vamos ver maneiras diferentes de mascarar cursos. Então, para isso, o que vou fazer criar uma nova moldura do tamanho de uma área de trabalho. E dentro disso, vou copiar essa imagem. E eu vou colar aqui. Tudo bem, vamos tentar mascarar essa imagem. Portanto, você deve ter visto nas plataformas de mídia social que geralmente as fotos do perfil têm formato circular. Então, como podemos realmente mascarar essa imagem? E é dessa forma que apenas a face ou certas partes dessa imagem aparecem dentro da elipse ou de uma forma circular. Então, o que eu posso fazer é criar uma nova forma de elipse. Provavelmente do tamanho. Parece legal. E agora eu quero apenas a parte da minha imagem, que é o rosto dentro do círculo. Então, como posso fazer isso? Bem, o que você precisa fazer é simplesmente trazer sua imagem para a frente na seção de camadas, como você pode ver no painel de camadas aqui, bem aqui, elipse está na camada superior da caixa retangular que temos. Esse retângulo nada mais é do que a imagem da qual estávamos falando. Portanto, essa elipse precisa ficar por trás da nossa imagem. Ou você pode dizer que a imagem precisa ficar na frente da nossa forma de elipse. Então você pode fazer isso dentro do painel de camadas. Você pode simplesmente arrastar para baixo e a imagem aparecerá na frente. Ou então, o que você pode fazer é clicar com o botão direito nessa forma circular. E você pode simplesmente trazer de volta, ou melhor, Enviar para trás. Basta enviar para trás ou então o que você pode fazer, você pode selecionar sua imagem, clicar com o botão direito na imagem e trazê-la para frente. Você também pode ver as teclas de atalho para isso. Então é assim que você faz. Em seguida, selecione a forma da elipse e o retângulo segurando o botão Controle e, no painel Camadas, selecione a imagem e a forma da elipse. Agora clique com o botão direito na imagem e use-a como uma máscara. Você também pode ver a tecla de atalho, que é Control, Alt e M. Depois de fazer isso, você verá somente a face aparece dentro da forma circular. Então é assim que você realmente mascara suas imagens e Figma. Vamos também tentar ver como podemos mascarar uma imagem em nosso texto. Que eu selecionarei tudo isso e moverei isso para algum lugar aqui. Tudo bem. Agora, vou criar uma nova caixa de texto e lerei a máscara de texto. Ok, então a cor desse texto parece ser, ou melhor, devo dizer que esse texto não precisa fazer parte dessa camada específica. Tudo bem, então cadê minha mensagem? Esta é minha mensagem. Vamos escrever uma mesquita e ela precisa estar fora do material. Agora, antes, o que aconteceu é que Figma combinou automaticamente meu texto com a imagem da caixa retangular e minha forma de elipse como uma única camada. Agora, como a imagem está apenas nessa parte da área, você pode ver que a que está destacada em pontos azuis são traços azuis. Essa parte contém toda a minha imagem. Se eu colocar meu texto nessa parte , obviamente você não verá meu texto. É porque a imagem está sendo ocupada dentro desse texto. Certo? Agora queremos que essa máscara tenha alguma imagem em um formato mestre. Então, para isso, prefiro dizer que vou escrever tudo em maiúsculas. Vamos tentar mover esse texto para algum lugar aqui. Vamos fazer isso ousado, ok, já está ousado. Vamos tentar mudar o tipo de fonte ou a família de fontes. Vamos mudar para Roboto. Tudo bem? Quando 80 pixels parecem bons. Tudo bem, vamos tentar trazer uma imagem do plugin Unsplash. Então, vou escolher que o unsplash fará uso de uma imagem abstrata. Então, vamos ao resumo. Vou selecionar essa imagem ou outra. Vamos tentar escolher essa imagem corretamente? Agora. Vamos esperar até que apareça. Tudo bem, vamos tentar dimensionar essa imagem. Então, eu vou escalar isso. Eu selecionei a parte da escala. Tudo bem? Portanto, certifique-se de reduzi-lo. Tudo bem, isso parece legal. E agora queremos que nosso texto esteja por trás de nossa imagem. Agora você verá que essa imagem do Unsplash não faz parte da minha moldura da área de trabalho. Então, como podemos realmente colocar isso dentro de nosso desktop, desktop a quadro? Então, basta anotar isso. E agora você pode ver que essa máscara de texto aparece na frente da minha imagem. Mas não queremos que isso aconteça, caso contrário, o mascaramento não funcionará. Então, queremos que o texto fique por trás da nossa imagem. É assim que poderemos mascarar uma imagem em nosso texto. Então, sempre que você quiser mascarar sua imagem, sempre certifique-se de que, se quiser mascará-la em uma forma, texto ou qualquer coisa , certifique-se de que a imagem esteja na frente e a outra coisa na parte de trás. Então, basta enviar isso para trás e agora selecionar sua imagem e o texto, clicar com o botão direito do mouse e usar isso como máscara. Depois de fazer isso, você pode ver que essa imagem agora está dentro do meu texto. 18. Margem e preenchimento de UI UX Design: Agora, antes de entrarmos na parte de layout automático no Figma, é importante entendermos o conceito de margem e preenchimento. Agora, o que exatamente é essa margem e preenchimento? Então, para resumir, margem e preenchimento são, na verdade o espaçamento entre dois itens ou elementos diferentes. Para explicar isso, com a ajuda de um exemplo, posso simplesmente desenhar uma caixa retangular. Então, digamos que essa caixa retangular de, digamos, vermelha e outra caixa retangular de, digamos, verde. Sim. Portanto, o espaçamento entre essas duas caixas vermelhas e verdes é chamado de minha margem. margem é essencialmente o espaçamento, espaçamento externo entre elementos diferentes ou entre dois elementos ou dois itens. Portanto, a linha pontilhada azul que você pode ver entre a caixa vermelha e a caixa verde é minha margem. Agora, a margem é aplicável em todas as quatro direções. Isso significa que sempre que falamos sobre margem, se você quiser que a margem tenha uma altura específica, ela pode ser de cima, de baixo, da esquerda ou da direita. Portanto, a margem está presente em todas as quatro direções: superior, inferior, esquerda e direita. Então, se eu colocar outra caixa de, digamos, azul, deixe-me fazer isso com a cor azul. Outra caixa de, digamos, de cor amarela. Então, deixe-me colocar desta forma, certo? E vamos manter essa cor amarela. E também vamos tentar trazer mais uma caixa. Podemos manter isso como, digamos, preto . Tudo bem? Assim, você pode ver a caixa vermelha tem margem em todas as quatro direções, da esquerda, de cima, da direita e de baixo. Então, se eu quiser realmente verificar se a margem ou melhor, vota na margem da minha parte superior, inferior esquerda, direita. Você pode ver que, ao mover esses objetos, posso ver que há uma margem da esquerda e da direita. Você pode ver que há 88 pixels de comprimento de margem da minha esquerda e da direita. É assim que consigo ver minha margem. A margem é essencialmente a distância entre meus elementos externos. Tudo bem? A distância entre dois elementos diferentes, é a distância externa entre meus dois elementos. Agora temos acolchoamento. O preenchimento é o espaço interno entre dois elementos. Se eu colocar, digamos que estou excluindo minhas outras formas, como azul e amarelo. E deixe-me também liberar esse preto. Tudo bem, eu só tenho duas caixas, que são verdes e vermelhas. E deixe-me expandir essa caixa vermelha. Então, usando a escala 1, posso expandir isso. Vou colocar minha caixa verde em algum lugar no meio. Tudo bem? Portanto, o espaçamento interno entre minha caixa vermelha e verde é chamado de meu preenchimento. Vamos chamar isso de meu estofamento. Novamente, o preenchimento não é todas as quatro direções, de cima, baixo, da esquerda e da direita. Portanto, antes de realmente entrarmos na parte externa da camada em Figma, é importante entendermos sobre margem e preenchimento. Portanto, espero que os fundamentos da margem e do preenchimento estejam claros para todos vocês. 19. Layout automático em Figma: Tudo bem, vamos começar com o layout automático no Figma. Agora, o layout automático significa basicamente que o layout que vamos definir para nosso design mudará suas propriedades automaticamente. Então, isso é o que o layout automático realmente significa. Então, se eu tentar explicar isso com a ajuda de um exemplo, posso desenhar uma moldura, digamos, desse tamanho. E dentro dessa moldura, digamos que eu tenha um retângulo desse tamanho. Tudo bem, vamos adicionar texto dentro disso. Então eu vou desenhar uma caixa de texto provavelmente desse tamanho. Vamos inserir nosso texto. E vou reduzir o tamanho do texto para cerca de 32 pixels. E também vamos ajustar sua altura, ou melhor, devo dizer, ok, não diminuímos o tamanho dela. 36 pixels. Isso parece legal. E configuramos a caixa de texto para ter altura automática. Tudo bem, isso parece legal. E deixe-me ajustar a caixa de texto de forma que ela tenha a margem adequada. Isso significa que a margem dessa caixa retangular deve ser a mesma da esquerda. Tudo bem? Então isso é o que eu desenhei até agora. Esse é o meu design. Tudo bem? E se eu quiser adicionar mais uma caixa retangular, digamos, desse tamanho dentro da minha moldura. Então, o que você acha que vai acontecer nesse caso? Minha moldura ajustará sua altura ou talvez molhada de acordo com o conteúdo que eu realmente estou adicionando dentro dela? Não, acho que não. Bem, vamos tentar ver se eu arrasto essa caixa para dentro da minha moldura. Primeiro, você ainda pode ver que esse retângulo dois não faz parte da minha moldura. Então, o que eu posso fazer é que se eu quiser que essa caixa retangular seja incluída nesta moldura para outra moldura, terei que aumentar o tamanho do meu Freeman, certo? Vou ter que selecionar essa moldura. Então. Vou ter que aumentar o tamanho da minha moldura. Agora, você verá que esse retângulo agora é parte, ou melhor, eu deveria colocá-lo aqui. Agora esse retângulo faz parte do meu quadro um. Você pode ver no painel de camadas que primeiro temos essa caixa de texto. Temos um retângulo, dois, retângulo, um, certo? Então isso agora faz parte da minha moldura. E se eu remover e mover isso para fora da minha moldura, então você pode ver que a ferramenta retangular não faz parte da minha moldura, certo? E se eu tiver mais uma coisa? Digamos que eu crie mais uma caixa de texto. Ok, deixe-me criar mais uma caixa de texto. Você pode ver se eu arrasto minha caixa retangular para dentro da minha moldura. Agora faz parte da minha moldura quando eu tive que fazer isso manualmente e adicioná-la para aumentar o tamanho da minha moldura também. E se eu quiser adicionar uma caixa de texto dentro da minha moldura? Digamos que eu crie um texto. Ok, deixe-me colar o texto e ajustarei sua altura de acordo. Tudo bem. Digamos que, em vez disso, todos esses textos, vamos mantê-los apenas neste momento. Sim, isso parece legal. Vamos tentar incluir isso em nosso quadro. O que você acha que vai acontecer? Será que vai entrar? Não. Você pode ver que não faz parte da minha moldura. Eu tenho que aumentar isso. Se eu quiser incluir isso dentro disso, tenho que colocá-lo dentro da minha moldura aumentando o tamanho da moldura. Então, o layout automático, o que o layout automático basicamente faz é isso, deixe-me mostrar o que o layout automático faz. Então, o que eu vou fazer é colocar meu retângulo fora desta moldura. Deixe-me diminuir o tamanho da moldura. Então, vou usar meu quadro um. Vou diminuir o tamanho da moldura. Vou selecionar esse quadro e configurá-lo para adicionar layout automático. Então, essa é uma maneira. Você também pode ver que a tecla de atalho para adicionar layout automático ao seu quadro é Shift. Segurando o botão Shift e pressionando D no teclado. Ou no painel de propriedades do design também verá o ícone de layout automático. Além disso, você terá esse ícone positivo. Depois de clicar lá, você verá que o layout automático foi adicionado. Portanto, posso definir isso como layout automático. Você pode ver que ele já foi adicionado. Por que isso? Porque eu cliquei aqui no ícone de adição. Então, agora o layout automático foi adicionado a esse quadro. E você pode ver, agora você pode ver que o ícone do quadro um também foi alterado. Se eu desfizer o uso do Control Z, você verá que inicialmente o logotipo do frame one tinha esse tipo de caixa de tic-tac-toe. Você pode ver duas linhas verticais e duas linhas horizontais aqui. Depois de definir isso como layout automático, você pode ver que o ícone da minha moldura foi alterado. Isso indica que todo o quadro tem layout automático. Agora, se eu tentar adicionar uma caixa retangular dentro da minha moldura, o que você acha que vai acontecer? Você pode ver que a altura da moldura foi ajustada automaticamente. E se eu tentasse adicionar esse texto dentro do meu quadro? Você pode ver que a caixa de texto também foi adicionada ao meu quadro. Agora você não verá o texto em si porque o texto está em colarinho branco. Deixe-me mudar isso para a cor preta. Então, eu posso simplesmente ir para Fill. Eu posso selecionar preto. E agora você poderá ler o texto. Tudo bem? Então é assim que você contorna o layout automático. Agora, você verá que todos os elementos que estamos adicionando dentro de um quadro foram configurados para layout automático. A altura está sendo ajustada automaticamente. E se quiséssemos ajustar sua largura adequadamente? Como podemos definir nosso layout automático de forma que, quaisquer que sejam os elementos que adicionarmos a outra moldura, a largura aumente em vez da altura. Então, o que você precisa para fazer isso? Selecione sua moldura, vá para o painel de propriedades do design. Abra essa parte do layout automático e você verá esses ícones. Portanto, esse ícone em particular, digamos, é que ele foi configurado na direção vertical. Se eu mudar isso para a direção horizontal, você verá que a largura se ajusta automaticamente de acordo com os elementos que temos. Assim, você pode ver que os elementos agora estão em um formato vertical ou horizontal. Então essa é minha direção horizontal, certo? Então, se eu adicionar mais um elemento dentro disso, a altura será ajustada de acordo. Tudo bem, agora o que esse estado em particular, esse ícone em particular significa? Isso significa que o espaçamento entre os itens, portanto, atualmente está definido para 53 pixels. Uma vez que isso não tem nenhuma outra unidade. Sabemos que isso tem unidade de pixels. Se tivesse um grau ou uma unidade percentual, todos vocês devem estar cientes de que não é uma unidade de pixel. No momento, isso não é uma unidade de pixels. Então, se eu definir isso de 53 para, digamos, 60, então você verá que essa caixa vai aumentar e seu tamanho. Você pode ver que o espaçamento entre essa caixa de texto e essa caixa retangular foi aumentado. A área sombreada em vermelho é a região que é o espaçamento entre meus diferentes elementos. Esses são meus 60 pixels de espaço entre diferentes elementos. Agora, anteriormente, todos vocês aprenderam sobre preenchimento e margem, certo? E se eu quiser adicionar preenchimento de cima para baixo? Então, como faço para fazer isso? Então, deixe-me desfazer do quadro um. No momento, ele foi configurado para a direção horizontal. Vamos mudar isso para a direção vertical. E você verá que é assim que parece. Tudo bem, vamos tentar arrastar uma caixa retangular da moldura para que ela não faça mais parte da moldura. Vamos também mover nossa caixa de texto para fora do quadro. Portanto, não faz mais parte da moldura. Você pode ver que o tamanho do quadro diminuiu, pois configuramos nosso quadro para layout automático e na direção vertical. Você também pode ver que o espaçamento entre o item é de, digamos, 60 pixels. Agora, você aprendeu sobre o preenchimento. E se eu quiser adicionar preenchimento, que é o espaçamento interno entre minha moldura e a caixa retangular. Se eu quiser que isso aconteça , o que posso fazer simplesmente selecionar meu preenchimento vertical aqui. E eu posso mudar isso de 42 para, digamos, 60. Depois de fazer isso, você verá que o espaçamento de cima baixo foi aumentado. Deixe-me mover essa caixa de texto para cá. Tudo bem. Deixe-me mover isso para cá, certo? Então, agora podemos ver o texto. Em vez disso, o espaçamento entre essa parte e essa parte foi de 60 pixels. E se eu quiser que seja do mesmo tamanho? Isso significa de cima, baixo, da esquerda ou da direita. Vamos também primeiro verificar a forma horizontal. E se eu quiser manipular apenas o preenchimento das minhas direções esquerda e direita , posso escolher que isso seja 100. E você pode ver que esse tamanho foi aumentado, isso e essa região foi aumentada para 100 pixels. E se eu quiser isso? Quero definir que todas essas direções tenham o mesmo preenchimento. Então eu posso escolher isso para ser 60 também, e este para ser 60 também. E se eu quiser manipular apenas a área de preenchimento pela parte superior, inferior ou esquerda ou direita? Posso manipular o preenchimento individual? Sim, claro que eu posso fazer isso. Basta selecionar sua moldura, acessar este layout automático e selecionar esta parte que diz preenchimento independente. Depois de clicar ali, você encontrará o preenchimento esquerdo, o preenchimento superior, o acolchoamento direito e o preenchimento inferior. Assim, você pode inserir os valores que gostaria de ver em seu design. Mais uma coisa que você pode ver aqui é que isso está configurado para o alinhamento superior esquerdo. O que isso significa basicamente? Digamos que eu aumente o tamanho da moldura. Deixe-me excluir essa caixa retangular e essa caixa de texto. Vou deletar esses dois para mostrar o que isso realmente significa. Além disso, também vou reduzir o zoom para cerca de 50 por cento. Vamos tentar aumentar nosso quadro. Então, como você pode ver, se eu aumentar o tamanho do meu quadro, você ainda verá que meu conteúdo, que é a caixa retangular e minha caixa de texto, ainda está na seção superior esquerda. Não está se ajustando adequadamente porque o alinhamento foi definido no canto superior esquerdo. Se eu quiser que minha caixa retangular e essa parte sejam a linha central, então eu posso selecionar aqui. E agora você pode ver que ele está perfeitamente alinhado com o centro. Se eu quisesse estar na posição mais à direita, mas no centro em relação ao eixo y. Posso selecionar isso se quiser que fique na parte superior em relação ao eixo y, mas alinhado ao centro em relação ao eixo x. Eu posso selecionar isso e você pode simplesmente brincar com outras direções onde gostaria colocar seus elementos. Então, isso é sobre seu layout automático. Uma última coisa que nos resta abordar nesta palestra é que também podemos ter um layout aninhado em layout automático no Figma. Agora, o que basicamente significa layout automático aninhado é esse termo, layout automático dentro de um layout automático. Então, digamos que eu tenha essa moldura, certo? Eu tenho essa moldura em particular. Eu posso selecionar esse quadro. E eu posso segurar, em vez disso, devo dizer que posso selecionar esse quadro, posso segurar Shift e um botão. E agora você pode ver que também formamos uma moldura no interior da qual temos uma moldura. Então esse é o meu layout automático aninhado. O que quero dizer é que digamos que eu crie uma caixa retangular. E se eu quiser colocar isso dentro do meu layout automático aninhado? Se eu arrastar isso para o meu quadro dois, você pode ver, tudo bem, vou arrastá-lo para fora e colocá-lo dentro do meu quadro dois. Agora você pode ver que agora é parte da minha moldura agora faz parte da minha moldura para moldura uma. Esta parte em que tem essa caixa de texto e a pequena caixa retangular é meu quadro um, retângulo dois e o quadro um são a parte da minha moldura qual está configurada para layout automático e na direção vertical. Se eu quiser que isso fique na direção horizontal, você verá que é assim que aparece. 20. (19) Princípios de formatação em Figma: Tudo bem, vamos continuar com os princípios de formatação no Figma. Agora, há quatro princípios formativos fundamentais que você precisa ter em mente. O primeiro é o agrupamento. Então temos, você sabe, enquadrar, copiar e duplicar. Então, vamos dar uma olhada em cada um deles. Por exemplo, vamos supor que você tenha uma moldura, digamos, desse tamanho. E dentro dessa moldura, vou criar uma, digamos, uma estrela. Certo. Agora. É uma forma de estrela. Deixe-me mudar o site. E eu vou criar um texto dizendo que isso é uma estrela. Tudo bem? Deixe-me também aumentar o tamanho desse texto. Então, vamos aumentar o tamanho da fonte para talvez cerca de, digamos, 24 pixels. Vamos tentar com 32. Isso parece muito mais legível. Então, esse é um texto. Vamos também criar mais um texto, que diria algo como quantos lados esse começo tem 1.234,5. Então, diremos que essa estrela tem cinco lados, lados phi, e a ovelha é de cor cinza, algo assim. E vamos também tentar diminuir o tamanho da fonte para cerca de 20 pixels, certo? Sim, parece bom. Mais uma coisa, deixe-me reorganizar. Em vez disso, devo dizer que devo alinhá-lo adequadamente. Esse também. Por aqui, eu escreveria algo assim. Tudo bem, sim, isso parece legal. Portanto, temos três coisas em nosso quadro. Primeiro temos nossa forma, temos esse texto e depois temos a descrição desse texto. Agora, se eu tiver que agrupar esse elemento e esse elemento juntos, como posso fazer isso? Eu posso simplesmente selecionar este. Posso manter pressionada minha tecla Shift e clicar no outro elemento. Agora podemos ver no painel de camadas que esses dois textos foram selecionados até o momento. Se eu quiser agrupá-los, precisarei pressionar minha tecla Control ou Command se você estiver usando o MacBook e controlar G. Depois de fazer isso, você pode ver que um grupo foi formado. Dentro desse grupo, temos esses dois elementos de texto. Agora, com a ajuda desse grupo, o que eu posso fazer simplesmente arrastá-lo e colocá-lo onde eu quiser. Isso formou um grupo inteiro. Tudo bem? Então, esse é um grupo. Se eu quiser agrupar essa forma junto com essa forma, então esse seria um grupo aninhado. Porque pode ser um grupo dentro de um grupo. Então você também pode fazer isso. Novamente, basta selecionar esse elemento, que é a forma de nossa estrela. Mantenha pressionada a tecla Shift, selecione seu outro grupo ou qualquer outro elemento que você gostaria de agrupar e segure os botões Control e G. Depois de fazer isso, você descobrirá que agora esse grupo foi transformado em um grupo inteiro. Certo? Agora, dentro desse grupo dois, você descobrirá que esse grupo dois tem uma forma de estrela e um grupo quando em si mesmo. Este grupo um contém esses dois elementos de texto. Então é assim que você agrupa diferentes elementos dentro do seu quadro ou no Figma. Tudo bem, então é assim que você os agrupa. Agora, vamos entender como podemos copiar esses elementos. Digamos que eu queira copiar o elemento do meu grupo um, não o grupo dois inteiro, mas apenas o elemento Groupon. Digamos que eu tenha outra forma, algo como, digamos, um polígono. Então, eu vou criar um polígono. Tudo bem? E eu quero esse grupo um. Então, o que eu vou fazer é manter pressionada minha tecla Control. Se você estiver usando Mac, seria comando e pressione o botão C, que é controle de cópia, C é cópia. Agora eu copiei todo esse grupo, um, que tem dois elementos de texto, certo? Primeiro, o nome da nossa forma e a descrição da nossa forma. Se eu quiser colar esse texto abaixo do meu polígono, como vou fazer isso? Simples, vou usar o controle V. Agora, embora eu tenha pressionado o controle V, e no painel de camadas você verá que outro grupo chamado Groupon foi formado com este texto. Certo? Então, por que não podemos ver nosso elemento de texto que acabamos de colar? É porque já colou quase isso. Então, se eu arrastar isso para fora, você descobrirá que esta é nossa cópia do nosso grupo um. Certo? Agora eu posso manipular esse texto selecionando essa parte. Eu posso dizer que isso é um polígono. Esse polígono. Tem três lados. E a forma é cinza , certo? Então é assim que você forma ou outra você copia elementos diferentes e os cola. Então essa é uma maneira de fazer isso. Outra forma é que, digamos que eu deveria dizer que vou criar outra moldura. Tudo bem? Vou criar outro quadro. Deixe-me criar uma elipse desse tamanho, certo? Vamos dar a isso uma cor no preenchimento. Vou dar isso como uma cor verde-azulado, tipo, você sabe, tipo de cor água-marinha, azul claro, certo? E eu gostaria de fazer uma cópia ou duplicata desse elemento em particular. E como vou fazer isso? Posso segurar meu botão de controle e usarei d, que é controle duplicado. D significa duplicata. Uma duplicata foi formada com apenas uma única tecla de atalho Control D. Não preciso fazer o controle C e o controle V. Eu fiz o Controle D para fazer uma duplicata da minha forma. Mas por que não consigo ver minha cópia? Por uma resposta simples? É só minha elipse 1. Então, se eu me arrastar, você verá que formamos uma duplicata. Agora, novamente, se eu colocar isso ou se eu fizer uma duplicata desse elemento em particular , você descobrirá que, novamente, nenhuma duplicata foi formada. Se eu fizer o Controle D novamente, agora você verá que uma forma, que é, embora fora de uma moldura, eu posso aumentar o tamanho da minha moldura. Mas agora está no mesmo espaço, o espaço entre essa elipse, essa elipse, seja o que for, qualquer que seja a distância percorrida, as mesmas distâncias mantidas aqui também, ANOVA também. Agora, com a ajuda do controle D, o que acontece é que você está fazendo uma duplicata de seus elementos ou sua forma. E também está mantendo a distância que você tem entre diferentes elementos, certo? Então eu posso, o que eu posso fazer é aumentar o tamanho da minha moldura. Certo. Agora você verá que também temos a quarta elipse. Então é assim que você faz duplicatas de suas formas serem elementos com a ajuda do comando Control D. Tudo bem, então, até agora você aprendeu como agrupar coisas, como fazer uma cópia, como fazer uma cópia. Tudo bem, vamos tentar ver como podemos lidar com o layout automático. E embora tenhamos abordado coisas sobre layout automático, deixe-me também mostrar o que acontece se criarmos um layout automático para o texto, não para o quadro, mas outros dois são texto. Mas, ao contrário, eu deveria dizer isso. O que acontece se eu criar uma forma de retângulo? Tudo bem, vamos supor que essa seja a minha forma de retângulo. E agora temos uma elipse dentro dessa forma de retângulo. Tudo bem, deixe-me dar essa forma de retângulo como cor vermelha. Outra, essa elipse tem uma cor vermelha e um retângulo como um colarinho branco. Tudo bem, vou selecionar meu retângulo e dar a ele uma cor branca sólida. Tudo bem? Agora, o que acontece é que, se eu realmente quiser, se eu realmente quiser que esse retângulo se comporte como uma moldura , posso simplesmente selecionar isso. E eu posso criar, o que é seleção de molduras. Eu posso fazer isso. E agora você pode ver que um quadro três foi formado. Enquadre um dos nossos polígonos. Essas coisas. Deixe-me mostrar o que quero dizer com isso? Então, vou reduzir um pouco o zoom, certo? Sim, parece perfeito. Agora, você verá que esta é minha moldura para essa coisa toda é minha moldura, esta é minha moldura. Tudo bem? Então, dentro do meu quadro três, eu tenho meu retângulo. Então, no momento, meu retângulo não está agindo como uma moldura. Em vez disso, meu retângulo agora está dentro da moldura. Se eu clicar nesse quadro, você verá que o emaranhado agora faz parte do meu quadro, certo? Se eu mover esse quadro, você verá que a elipse está em sua posição original. Não está se movendo junto com a moldura. Normalmente, o que acontece é que, deixe-me mostrar o que quero dizer com isso? Se eu disser isso, quero mover essa moldura que tem nossa estrela de um polígono e todas essas coisas. Se eu quiser mover a moldura inteira, então a coisa toda, todos os elementos dentro dessa moldura também se moverão junto com ela. Você pode ver, mas isso não está acontecendo com nosso quadro três. Por que isso? Porque se você olhar bem de perto o painel de camadas, verá que a elipse não faz parte do nosso quadro três. Se eu quiser que essa elipse faça parte do nosso quadro três, terei que trazê-la para dentro do nosso quadro três. Certo? Agora, se eu mover meu quadro três, você verá as elipses também se movendo junto com ele. Então esse é o conceito de enquadramento. Até agora, aprendemos sobre enquadramento, agrupamento, cópia e duplicação, certo? Vamos aprender a última coisa que precisamos abordar nesta parte. Deixe-me adicionar um texto. Então, o que vou fazer é dizer que eu tenho um texto e ele não faz parte do meu quadro. É apenas na área de trabalho da Figma. E eu quero adicionar moldura a ele. Então, como vou ser capaz de fazer isso? Eu posso simplesmente adicionar um layout automático, certo? Aprendemos sobre layout automático nas palestras anteriores. Se você quiser saber mais sobre isso, basta consultar essas palestras. Novamente. Vamos escrever um texto simples dizendo que isso é simples. Próximo. Tudo bem. Agora você pode ver que, embora eu tenha criado esse texto, o texto é branco e não tem fundo porque não faz parte de nenhum quadro. Se eu quiser adicionar essa moldura interna, posso simplesmente adicionar um layout automático a ela, certo? Então você pode ver que um quadro é melhor, devo dizer que o texto agora faz parte do meu quadro. Você pode ver aqui. Agora, o que acontece é que, como agora é um layout automático, também posso especificar a direção do layout automático. Se eu quero que seja na direção vertical, na direção horizontal. Se eu quiser que esse elemento seja alinhado no canto superior esquerdo ou no centro, posso fazer isso. Mas uma coisa importante é que essa moldura não tenha uma cor. Então, eu posso adicionar um preenchimento a isso. Depois de fazer isso, você verá uma cor branca foi adicionada. Agora, se eu precisar selecionar meu texto, posso mudar essa cor para preto. Agora você poderá ver nosso quadro de texto corretamente. Posso adicionar texto ou fazer algumas alterações nele. Algo como, digamos que seja um texto. Eu posso simplesmente remover a palavra simples. E agora o tamanho do quadro também diminui simplesmente porque todo esse texto agora faz parte do meu quadro e agora é um layout automático, certo? Então é assim que fazemos. Agora, você também pode adicionar um layout automático a uma forma. Então, vamos ver. Adicione um layout automático à sua elipse e você pode até mesmo fazer isso. Então eu posso selecionar toda essa elipse. Posso adicionar um layout automático a ele. E agora a moldura tem essa elipse dentro dela. Então é assim que os princípios de formatação no Figma realmente funcionam. 21. Restrições de figma e dimensionamento: Tudo bem, vamos continuar com as restrições e o redimensionamento no Figma. Agora, o que as restrições realmente significam? Portanto, as restrições são uma forma de colocar nossos itens em uma posição fixa. Então, vamos tentar entender com a ajuda de um exemplo. Digamos que eu crie uma moldura com aproximadamente esse tamanho. E eu coloquei uma elipse em algum lugar aqui na posição superior esquerda. E deixe-me dar uma cor a essa forma em particular, em algum lugar assim. Tudo bem? Agora, o que acontece aqui é que se eu realmente mudar o tamanho da minha moldura, se eu a expandir, você sabe, do lado direito, a posição dessa elipse em particular não muda. Se eu aumentar desse lado, está mudando. Por que isso? Por que está mantendo sua posição superior esquerda? Porque no painel de propriedades do design, se você olhar de perto, verá que as restrições foram realmente definidas por padrão para a esquerda e para a parte superior. Esquerda significa que na direção horizontal. Isso significa que se você tentar esticar, apertar a moldura pela direita ou pela esquerda. Sua forma, a elipse do elemento que foi selecionada agora, sempre tentou ficar no lado esquerdo. E no eixo y, isso significa que se eu tentar expandir ou apertar minha estrutura da posição superior ou inferior, ela tentará ficar na posição mais alta. Deixe-me mostrar o que quero dizer com isso. Se eu tentar apertar minha moldura de baixo para cima , você verá que a elipse não muda de posição. Mas se eu tentar apertar a posição da minha moldura de cima para baixo , você verá que minha elipse está tentando ficar na parte superior da minha moldura. Então, isso é possível devido às restrições. Certo? Agora. Vamos tentar imitar um, você sabe, design de site. Então, o que vou fazer é criar um ícone de hambúrguer. Então ícone de hambúrguer, você sabe, ícone de hambúrguer são apenas essas três linhas. E depois de clicar lá, você verá sua barra de navegação. Então é isso que seu ícone de hambúrguer faz basicamente. Então, eu vou fazer uma réplica disso. Essa linha, hambúrguer, tem basicamente três linhas, então faremos isso. Sim, é assim que meu ícone realmente se parece. Ok, deixe-me agrupá-los. Tudo bem, eu vou agrupá-los com a ajuda do controle G. E deixe-me renomear isso para, você sabe, eu vou renomeá-lo para hambúrguer de presunto. Hambúrguer. E também vamos tentar adicionar alguns elementos de texto. Digamos que está em casa. Então eu vou criar um sobre. Então, vamos supor que, vamos também tentar aumentar um pouco o tamanho da moldura para que tenhamos algum espaço para adicionar nosso contato. Entre em contato conosco também. Então entrei em contato. Tudo bem, vamos tentar agrupar esses três elementos de navegação. Então, deixe-me renomear isso também, dizendo que navegação, tudo bem, marinha. Tudo bem. Vamos tentar movê-los para que apareçam em algum lugar assim, certo? Parece bom. E vamos tentar redimensionar um quadro de forma que pareça uma visualização de celular ou tablet. Tudo bem, vamos tentar fixar essa posição do meu ícone de hambúrguer à esquerda ou ao topo. E vamos colocar isso de uma forma que, na direção horizontal, sempre fique com o lado mais à direita. E no eixo y, ele fica no lado superior. Agora, uma vez que eu fizer isso, o que acontecerá se eu tentar aumentar ou diminuir o tamanho da minha moldura? Então, se eu tentar reduzir o tamanho do meu quadro, você verá que esse ícone de navegação, esses botões de navegação são como sua página inicial sobre contato. Todos eles estão tentando ficar no lado mais direito da nossa moldura. Se eu tentar aumentar a moldura do lado esquerdo, você verá que o ícone do hambúrguer está no lado esquerdo. Mas esses elementos de navegação, que são o lar e o contato, não estão mudando de posição porque estão tentando ficar no lado mais à direita. Se eu tentar aumentar de baixo para baixo , você não verá nenhuma mudança acontecendo. Eles permanecerão em sua posição. Mas se eu tentar diminuir de cima ou aumentar de cima para baixo o tamanho da minha moldura , obviamente, ela tentará ficar na posição mais alta. O que acontece se eu tentar selecionar meu ícone de hambúrguer e mudar as restrições da esquerda e da esquerda para, digamos, o centro , o que acontecerá nesse caso? Se eu tentar aumentar o tamanho da minha moldura na direção horizontal, você verá que o ícone do hambúrguer também muda de posição. Porque agora ele está tentando manter a posição mais central em relação à expansão no lado esquerdo. Mas se eu desfizer isso, e se eu aumentar o tamanho da minha posição ou o tamanho da minha moldura. Na maior parte da parte superior ou inferior , você não verá nenhuma mudança acontecendo. Ele está tentando colar a maior parte porque, no eixo y, selecionamos que ele deve ficar na parte superior. Se eu mudar isso para o centro , agora você verá a mudança. Deixe-me tentar diminuir. Então você não verá o ícone do hambúrguer. Por que isso? Porque está tentando manter a posição central. Se eu tentar aumentar , você verá que está tentando diminuir. Isso significa que, com relação ao eixo y, meu ícone de hambúrguer está tentando ficar na posição mais central. Assim, você pode brincar com outras direções para ver como nosso elemento reagiria. Então, deixe-me reduzir o zoom e onde está minha moldura? Então, aqui temos nossa moldura. Tudo bem? Portanto, espero que os fundamentos de suas restrições sejam claros. Vamos tentar entender o redimensionamento. Agora, redimensionar é praticamente o mesmo que restrições. A única diferença é que as restrições geralmente são aplicadas aos itens ou elementos que fazem parte do layout normal do quadro. Já o redimensionamento é aplicável aos itens ou elementos que pertencem a um quadro que está em um formato de layout automático. Ok, então vamos ver como podemos usar o redimensionamento. Então, o que eu vou fazer é criar uma moldura. Tudo bem, deixe-me desenhar uma moldura de, digamos, desse tamanho. E vou adicionar um layout automático a ele. Então, adicionarei um layout automático e adicionarei um elemento, que é retângulo dentro desse quadro. Agora, como esse quadro agora faz parte do nosso quadro a quadro , o próprio quadro é um layout automático. Você pode ver esse ícone específico. Esse ícone significa que esse quadro está em layout automático, enquanto esse ícone significa que o quadro está anormalmente fora. Então, agora o layout automático, todos nós sabemos o que acontece nele. Basicamente, muda o tamanho da minha moldura em relação aos elementos dentro da minha moldura. Isso é o que fizemos até agora. Agora você verá que, embora eu tenha adicionado meu retângulo dentro da moldura, inicialmente o tamanho da minha moldura era muito pequeno em comparação com o que é agora. Mas à medida que aumento o tamanho do meu retângulo, o tamanho da minha moldura também aumenta, mas ainda assim podemos ver alguma lacuna entre meu retângulo e minha moldura. Isso é chamado de preenchimento. Também abordamos essas coisas anteriormente. Mas o que acontece se eu tentar eliminar todo o preenchimento das posições? Isso é da posição X, Y. O que acontece nesse caso? Vou selecionar minha moldura. Eu irei para o painel de propriedades do design. E aqui você verá o preenchimento da posição horizontal e da posição vertical. Então, se eu mudar de dez para, digamos, zero, x , y e da direção y também zero. Então você verá que o retângulo não está ocupando espaço extra. Ou melhor, devo dizer que não há acolchoamento dentro da moldura. E o retângulo está aderindo exatamente ao tamanho da minha moldura, certo? Então, essa é a minha maneira que estou tentando representar. Agora, o que acontece nesse caso, se eu selecionar meu retângulo, essa forma específica? Você não verá as restrições. Forma das restrições. O que costumávamos ver anteriormente. Não podemos ver isso agora, porque agora temos tudo isso em um formato de layout automático. Devemos ver o painel de redimensionamento, à direita, em vez de restrições. Então, como podemos ver isso? O que devemos fazer para fazer isso? Então, o que podemos fazer é dentro desse retângulo, ou melhor, devo dizer que dentro desse quadro, você verá agora o retângulo na parte de layout automático aqui, onde meu cursor paira. Você verá que o retângulo agora está aderindo ao alinhamento superior esquerdo. Se eu chegar ao alinhamento central e tentar aumentar o tamanho da minha moldura, você verá que agora o retângulo fica na posição central, seja em relação ao eixo x, deveria estar em relação ao eixo y. O retângulo está na posição mais central. Isso é possível porque, na parte de layout automático, selecionamos que nosso retângulo de elementos deveria estar no centro, alinhado, certo? Isso é o que fizemos até agora. Agora, se eu quiser isso, quero que isso tenha um elemento de redimensionamento, então como podemos fazer isso? Então, posso simplesmente selecionar esse elemento retangular no painel de propriedades do design. A extremidade fixa, essas horizontais, é basicamente meu redimensionamento horizontal. Este é meu redimensionamento vertical. Portanto, ambos são, por padrão, definidos como fixos. Se eu mudar de contêiner fixo para, digamos , encher , o que você acha que acontecerá nesse caso? No momento, essa largura fixa significa basicamente que independentemente de eu aumentar o tamanho da minha moldura, haverá algum tipo de espaçamento entre minha moldura e meu retângulo. Embora não tenhamos usado nenhum tipo de preenchimento, ainda haverá algum espaço porque momento, o tamanho da minha moldura é maior que o tamanho do meu retângulo. E o triângulo foi definido como fixo. Redimensionamento. Diz-se que é definido para uma largura fixa. E o retângulo agora está no centro mais alinhado em relação aos eixos y e x, certo? Agora, se eu mudar isso para isso, o que significa que esse retângulo tem que ser um recipiente cheio , isso significa recipiente. O que significa basicamente contêiner? O contêiner funciona como uma caixa, um compartimento de armazenamento. Isso é o que basicamente significa contêiner. Então, retângulo, ou melhor, devo dizer que a moldura agora está agindo como um contêiner. E agora você está dizendo que o retângulo deve ocupar seu tamanho de acordo com o contêiner. Portanto, não importa o tamanho da minha moldura, ela expandirá seu tamanho e se estenderá. O elemento. retangular aqui está ocupando a largura máxima possível e tentará tocar as bordas das minhas três. Isso é possível porque fizemos um contêiner completo em relação ao eixo horizontal. Se eu fizer isso também para o eixo vertical, ele também fará assim. Então, no momento, não temos nenhum acolchoamento. Nosso retângulo também é a linha central. E o tamanho da minha moldura também pode diminuir. Ou melhor, devo dizer que o tamanho da minha moldura, não um emaranhado, o tamanho da minha moldura pode diminuir e ainda assim minha ferida retangular diminuir. Ele ocupará o tamanho da minha moldura em relação a ela. Ele mudará de tamanho. O retângulo mudará de tamanho em relação ao tamanho da minha moldura porque usamos o redimensionamento para que ele preencha seu contêiner, certo? Então, se eu expandir, você pode ver que o retângulo também está se expandindo. Isso é possível devido ao redimensionamento. Tudo bem, vamos tentar ver outro exemplo. E se eu criar, ou melhor, dizer, vamos voltar ao nosso quadro onde temos um layout normal. Tudo bem, temos uma camada normal. Não temos layout automático para este famoso. Ok, temos um ícone de hambúrguer, temos nossas ferramentas de navegação, certo? E se eu quiser adicionar um texto dentro desse quadro específico? Então, digamos que eu queira adicionar uma caixa de texto. Tudo bem, eu o desenhei XBox. Vou clicar com o botão direito do mouse neste quadro. Vou acessar meus plugins. E agora você pode ver que eu tenho um plugin chamado Lorem Ipsum. Se você não tiver esse, basta encontrar mais plug-ins e procurar o plugin Lorem Ipsum. Apenas tente executar isso. Agora, o que esse plugin faz é basicamente tentar gerar algum texto aleatório. E agora ele solicitará que realmente selecionemos algumas camadas de texto. Então, vou selecionar essa camada de texto. E aqui, ele nos pergunta se você quer gerar algumas palavras e frases aleatórias, dez caracteres, dez parágrafos, o que você quiser. Então, digamos que eu queira gerar dez frases, ou reduza para cinco frases. Ok, eu vou gerar isso. E agora você verá que é assim que realmente aparece, mas não queremos que isso apareça dessa maneira. Além disso, quero que isso ocupe a altura automática. Tudo bem? E eu quero mudar o tamanho da minha caixa de texto. Então, como eu faria isso? Deixe-me mover essa posição. E o que eu posso fazer é aqui, reduzir o tamanho da minha caixa de texto. Tudo bem, vamos tentar reduzir o tamanho da minha caixa de texto em algum lugar assim. Agora parece legal. E vamos tentar fazer com que isso tenha altura automática. Ocultação automática. Isso significa que, não importa quantas palavras ou caracteres diferentes eu adicione na minha caixa de texto, minha altura também aumentará ou diminuirá de acordo, certo? Isso é o que basicamente significa. Vamos tentar alinhar isso de forma que, não importa o que eu faça com meu amigo, essa caixa de texto permaneça na posição mais central. Então, vamos tentar alinhá-lo no centro. Tudo bem. É assim que eu gostaria que minha caixa de texto fosse. E dentro de minhas restrições, eu gostaria que isso estivesse na posição mais central em relação ao eixo horizontal ou x e ao eixo y também, eu gostaria que fosse alinhado ao centro. Agora, se eu tentar manipular meu quadro, digamos que se eu diminuir o tamanho do meu quadro, você verá que minha caixa de texto ainda permanece na posição mais central, certo? Esse ícone de hambúrguer deve estar à esquerda e no topo. Tudo bem, agora se eu tentar aumentar o tamanho do meu quadro, você verá que ainda esta caixa de texto está no centro, certo? Isso é o que fizemos com a ajuda de restrições, certo? Então foi só isso. Deixe-me voltar para o meu hambúrguer. Espero que esteja na parte superior esquerda. Sim. Vamos para a próxima parte, que é alinhar ou aplicar o conceito de redimensionamento ao nosso texto. Digamos que eu adicione algum texto aqui. Deixe-me desenhar uma caixa de texto, ou melhor, devo dizer que em vez de primeiro uma caixa de texto em branco, deixe-me clicar com o botão direito aqui. Gere um texto aleatório de cerca de cinco frases para cerca desta caixa. Tudo bem, gerado. Agora você pode ver que cinco frases foram geradas. E eu selecionarei toda a próxima caixa e aplicarei a altura automática. Tudo bem, legal. Isso é o que queríamos. Vamos tentar adicionar um layout automático a essa caixa de texto específica. Então, vou adicionar layout automático a essa caixa de texto. Então, basta clicar com o botão direito do mouse e adicionar um layout automático. E você pode ver que o layout automático foi adicionado a esses textos específicos, o que significa que agora esse quadro três contém texto. quadro três não está visível, mas o texto agora faz parte do meu quadro três. Tudo bem? Agora eu posso dar três a essa moldura com essa cor. Então, vamos tentar adicionar uma cor de fundo de, digamos, cinza, certo? Uma cor esverdeada. Cor cinza. E o texto teria preto, amarelo, certo? Vamos tentar dar a isso uma cor preta. Legal. Isso é o que queríamos. Agora, o que acontece nesse caso, se eu selecionar meu texto, você verá o redimensionado. Tem um hub, tem um contêiner cheio. Ele tem uma largura fixa no momento, selecionada e em relação ao eixo y, tem um conteúdo. Agora, o que acontece se eu tentar diminuir o tamanho da minha moldura? Você verá que o tamanho do meu quadro está diminuindo, mas o texto agora está fora do meu quadro. A caixa de texto não está ajustando seu tamanho de acordo com o tamanho do meu quadro. Então, como vamos mudar isso? Posso selecionar meu texto e fazer a mesma coisa, que é um contêiner cheio. Agora, se eu tentar diminuir o tamanho do meu quadro em relação ao eixo x, você verá que o tamanho da minha caixa de texto também aumenta em altura porque agora ela está tentando se encaixar no contêiner, certo? Isso é o que queríamos. Então é assim que podemos fazer isso e amarrar as coisas. Agora, e se eu adicionar esse quadro inteiro, três insights, outro quadro que não seja um layout automático, o que acontece nesse caso, vamos tentar criar um quadro com aproximadamente esse tamanho. Vamos adicionar esse quadro três dentro do meu quadro para ver o que aconteceria nesse caso. O que aconteceria? Vamos tentar descobrir isso. Então, deixe-me alinhá-lo em algum lugar aqui. Vou selecionar esse quadro três. Agora, uma coisa a observar aqui é que, uma vez que adicionamos um quadro três, que por si só é um layout automático dentro de outro quadro, que não é um layout automático , o que normalmente é, o que podemos ver serão restrições C ou veremos o redimensionamento. Bem, a resposta é que veremos os dois. Como você pode ver, ao selecionar meu quadro três, obterei opções de redimensionamento, que contêm largura ou altura fixas. E no eixo y também verei essas duas opções, e também verei restrições aqui. Portanto, agora, por padrão, diz-se que está na posição mais à esquerda em relação ao eixo x. E está configurado para a posição superior, restrição superior em relação ao eixo y. Portanto, você pode simplesmente brincar com direções diferentes para ver como funcionaria e como seria para o seu design. Então, tudo isso foi do meu lado para esta palestra em particular. Restrições e redimensionamento são conceitos muito importantes a serem aprendidos no design web ou design de aplicativos da Figma, simplesmente porque quando estamos tentando criar designs responsivos, seja ou seja, criar designs desenvolvidos para diferentes dispositivos , devemos saber como nosso design responderia a esse tamanho específico de nosso dispositivo. 22. Estilos e componentes de figma: Tudo bem, vamos continuar com estilos e componentes. Agora, sempre que estamos tentando desenvolver um site ou um aplicativo da web, ou pode ser outro aplicativo. Devemos criar alguns estilos e componentes para nosso design. Agora, por que precisamos deles? Vamos tentar entendê-los primeiro. Então, para dar um exemplo, você pode simplesmente dar uma olhada no meu próprio site. Eu criei meu próprio site usando tecnologias como reactant, tailwind, CSS. Então, aqui, se você pode ver do ponto de vista do design, você pode ver que o texto é preto. O plano de fundo ou, você sabe, o principal destaque do plano de fundo não é uma cor branca pura. Está em algum lugar na tonalidade de cinza, mesmo na barra de navegação superior, você verá que há alguma tonalidade nesse cinza, certo? Não está completamente escuro, não está completamente claro. Há um pouco de cinza nele. Sempre que tentarmos passar o mouse sobre os botões de navegação, como seus cursos em casa, entre em contato comigo, você verá uma cor azul quando passarmos o mouse sobre isso. E o mesmo Teller é aplicado aqui. Ao rolar para baixo, você verá que esses cartões, como a tecnologia que eu uso, o HTML, o CSS Bootstrap reagem, o JavaScript, o NodeJS, o Java, todas essas coisas. Todas essas cartas têm alguma sombra. Tem algum raio de fronteira. Ele tem um estilo fixo ou tamanho fixo de largura e altura que é consistente em todo o site. E na parte inferior do meu pé. Certo. Você pode ver na parte inferior da minha página da web, que é meu rodapé, ou através de você pode ver meus links sociais. Se eu passar o mouse sobre isso, você verá as cores dos ícones, as cores dos ícones da marca. Então, por exemplo que o Twitter tem a cor azul, grade acima, tem a cor laranja. Então, ao passar o mouse sobre essas cores, mouse sobre esses itens, você verá as cores da marca. Inicialmente. Você não verá nenhuma cor porque eu tenho que manter a consistência do meu design em todo o site. Então foi isso que fizemos. Tudo bem, agora, sempre que estamos tentando desenvolver um design para nosso site, primeiro e mais importante é realmente tentar criar estilos, estilos e estilos de tipografia. Então, que tipo de cores vamos usar em todo o nosso site? Qual será a cor primária? Qual será minha cor secundária? O que eu preciso de uma cor de marca em gradiente? Eu preciso deles? Se sim, então com certeza. Vá em frente e inclua-os também. Então, o que dizer das cores do texto, talvez da sombra ou, você sabe, de alguns destaques de fundo? Então, essas cores também são importantes. Depois vem a parte da topografia. Isso significa que tipo de tamanho de texto você deseja para o título do seu site. Que tipo de fonte, família de fontes você deseja usar? Que tipo de espessura de fonte você deseja usar. Você quer usar negrito. Siga em frente, semi-ousado, novo, normal. O que você quer? Quanto você quer que seja o espaçamento entre letras? Quanto você quer que seja a altura da linha? Todas essas coisas seriam formadas em um estilo formal. Agora, a vantagem de usar estilos é que, depois de formar um estilo, você pode realmente criar várias cópias desses blocos em outros componentes ou em outros estilos do seu site. O que quero dizer com isso é que, digamos que em seu site inicial, sua página inicial, você tenha criado o design do centro. Agora, na página sobre, você teria que realmente manter essa consistência do design. Então, tentamos, na verdade, tentar colar manualmente esses códigos hexadecimais para sua cor. Tente realmente fazer cada detalhe. Não. Por que não colar o estilo aplicado na página inicial? Isso facilitará sua vida, certo? Então é isso que o estilo faz. Digamos que depois de desenvolver todo o design, você o mostre ao seu cliente. Clientes é que você sabe o que? Não acho essa cor tão atraente. Eu gostaria de mudar as cores dos botões de, digamos, rosa e azul-petróleo. Então, quando você tenta acessar todas as páginas da web, como a página inicial sobre a página de contato paga encontra todos os botões e, em seguida, tenta alterar manualmente as cores de rosa para saber. Se eu tiver o estilo que apliquei a todos os botões, posso simplesmente mudar a cor do meu estilo. E o restante das mudanças será aplicado a todos os botões do meu site, certo? Então essa é a vantagem do meu estilo. Competência, por outro lado, é como se eu quisesse criar um botão, ou digamos, um carro como esse, certo? Um carro é simplesmente um cartão de exibição, certo? Ou ícones assim, desse tamanho. Então, uma vez eu crio um carro com esse peso específico, altura específica, raio de borda específico, texto específico no centro. Temos que definir a altura, a largura a partir da qual o texto deve ser colocado. Queremos que seja alinhado ao centro, alinhado à esquerda e à direita, todas essas coisas seriam formadas na forma de um componente. Em seguida, você pode replicar o competente em outras páginas da web ou na própria página da web, mas em um espaçamento diferente. Então essa é a vantagem de seus estilos e componentes. Vamos tentar ver como podemos realmente desenvolver nosso próprio site ou outro. Como desenvolvemos nossos próprios estilos e competências para nosso layout de design, certo? Então, antes de tudo, precisaremos de uma marca. Logotipo. Então, aleatoriamente, acabei esse logotipo de marca específico do Google. Então, como você pode ver, esse logotipo tem dois tons. Um é roxo ou roxo escuro, cor violeta, e o segundo é rosa, ou você pode dizer um tom de vinho, certo? Assim, posso escolher essas duas cores e usá-las no meu estilo. Então, primeiro de tudo, você precisa realmente instalar uma extensão do Chrome em seu navegador, e esse é o seletor de cores. Então, você pode simplesmente pesquisar a extensão Chrome do seletor de cores e baixá-la e instalá-la no seu Chrome, certo? Depois de fazer isso, você pode ver que essa pode ser a notificação pop-up de que você pode obter que o acesso ao arquivo é necessário. Isso significa seu arquivo pessoal, como essa imagem específica que baixei na minha pasta e a abri com o Chrome. Então, normalmente, o que acontece é que qualquer uma das imagens em nosso sistema é aberta com o ImageViewer, como um visualizador de fotos, ou eu não sei o que acontece no Mac. Portanto, se você não quiser fazer isso, basta abrir com o Chrome para usar a extensão Color Picker para escolher o valor do código hexadecimal de cor desse tom violeta e bordô. Agora você pode acessar as configurações rolar para baixo e escolher isso, permitir acesso aos URLs dos arquivos. Depois de ativar isso, você pode fechar esta parte, voltar a esse logotipo, clicar nessa extensão do Chrome para especificar e arrastar até a cor que gostaria de escolher a cor. Então, em algum lugar próximo a esse ponto, eu gostaria de copiar o valor hexadecimal. Então, vou copiar meu valor hexadecimal com a ajuda dos controles, aqui você pode simplesmente clicar neste botão, que é copiar todo o seu valor X. Volte para sua Figma. Vou criar uma moldura, digamos, do tamanho de uma área de trabalho. Tudo bem? E uma vez que eu fizer isso, o que eu vou fazer é criar uma forma de elipse de 160 pixels de largura 160 pixels de altura. Depois de fazer isso, vou adicionar cor a isso, que é um valor hexadecimal. Então, deixe-me adicionar e apenas certifique-se de remover o símbolo da libra ou o símbolo da hashtag antes do valor hexadecimal e pressionar Enter. Agora essa é minha cor primária. Então, se eu quiser armazenar isso na forma de um estilo, você pode ver esse ícone ao lado do seu filme ou do seu ícone de adição. Então você pode ver esse botão específico de quatro pontos, que é estilo. Então, basta ir até lá, clicar nesse sinal para criar seu próprio estilo e dar um nome a essa coisa. Então, vou dar isso como primário. Tudo bem, e eu vou escolher isso como estilo de criação. Agora vou fazer uma réplica dessa elipse, e agora vou usar a diferenciação de toda essa cor. E se o logotipo da sua marca não tiver nenhuma outra cor? Ele tem apenas uma cor, então como você realmente criará uma cor secundária para o seu design? Você pode usar o Adobe Color. Já usamos isso antes, certo? Então, você pode simplesmente ir até o Adobe Color e criar uma barra. Ali. Você encontrará esse análogo, vá até lá e cole a cor primária que você gostaria de usar. Então, vou colar minha cor primária. Eu vou clicar em Enter e você verá diferentes tonalidades, certo? Você verá diferentes tonalidades. Então, agora está nos mostrando essa cor, mostrando outras versões dela, não versões da Borgonha. Se você optar por opções monocromáticas ou tríades, complementares, divididas , complementares, com fenda dupla, encontrará o esquema de cores adequado ao seu design. Portanto, tudo depende do seu design, que você gostaria de usar em seu design. Tudo bem? Mas como esse logotipo em particular tem duas cores diferentes e combina com o design, vou escolher essa cor bordô e a cor violeta. Então, novamente, basta ir até o seletor de cores e pegar. E às vezes essa extensão pode não funcionar. Então, nesse caso, o que você pode fazer é simplesmente voltar para sua extensão ou clicar nessa extensão. Assim, posso clicar nesses três pontos e ir para Gerenciar extensão. Clique neste acesso para, Eu tenho acesso aos URLs dos arquivos. Atualize isso, volte, atualize e selecione Configurações. Novamente, tente alternar isso, volte. E agora você poderá escolher essa cor bordô. Vamos copiar esse valor hexadecimal que ficará aqui. Vamos colar isso. E antes de tudo, eu preciso realmente desvincular isso ou separar meu estilo. O que geralmente acontece é que, digamos que você crie um componente ou qualquer componente não competente, mas digamos, uma forma, um elemento ou qualquer um dos itens. E você colou um pouco de estilo nele e fez uma cópia desse item. Agora, o item duplicado terá exatamente o mesmo estilo contido no item original. Se você quiser realmente aplicar um estilo diferente ou criar um estilo diferente do item duplicado, primeiro você precisa combinar o estilo dele. Assim, você pode ver esse botão desvinculado ou um ícone, basta clicar sobre ele. E agora você pode voltar para o preenchimento, colar, o código hexadecimal colorido, remover esse ícone de cinza, clicar em OK e criar o estilo, que eu daria como secundário. Clique em Criar estilo e cor secundária também foi formada, também tentará criar outra elipse com um gradiente. Então, vamos tentar desvinculá-los. Tudo bem? Agora, o que vou fazer em vez de sólido. Faça um gradiente linear, um gradiente linear. E agora essa cor será bordô, e essa será minha, essa cor, essa cor. Então, deixe-me copiar essa cor. Então, vou clicar aqui. Qual é o valor da cor? Deixe-me selecionar o valor da cor. Vou selecionar o valor da cor e desfazer isso para que ele tenha esse estilo primário. Vamos até aqui. Selecione Linear, volte, cole o valor e pressione Enter. Não sei por que a cor verde selecionada? Idealmente, ele deveria selecionar essa cor, certo? Então, vamos tentar escolher isso. E sim, é isso que temos. E eu quero que isso aconteça de forma horizontal. Isso significa que da Borgonha ao violeta, eu quero que a forma vá da esquerda para a direita, algo assim. Então é isso que queremos e isso parece legal. Então esse é o gradiente da minha marca. Eu posso dar um novo estilo a essa coisa. Então, vamos dar um gradiente de marca. Tudo bem, vamos criar estilo. Então você pode ver que criamos três estilos de cores diferentes. Agora, e a nossa próxima cor? Então, vamos desvincular isso. Vamos dar uma cor preta escura. Em algum lugar, mais ou menos assim. Vamos fazer uma cópia disso. Vamos dar isso como outra. Vamos tentar mudar a transparência de 100% ou, digamos, 80 ou outra, digamos 75%. Tudo bem, então de 75 para, digamos, 50%. Então, vamos mudar isso para 50 por cento, depois 50-25. Vamos dar isso como 25%. Então, de 25 a, digamos, 10%. Então, de dez a, digamos, 5%. Nós criamos esses estilos diferentes. Vamos tentar salvá-los como um estilo. Então, vou dar isso como cem pretos. Tudo bem, preto e vermelho. Este era preto 75. Então, vamos criar um estilo chamado Black 75. Este tem 50 pretos. Este tem uns 50, este é preto 25. Este tem dez pretos. E este tem phi preto. Tudo bem, então esses são estilos diferentes que criamos até agora. Agora, imagine que estou tentando criar meu site. Então, novamente, eu criaria uma moldura de desktop. Dentro disso, digamos que eu a cor primária, pois posso escolher a cor do documento ou as cores locais. De documentários ao encerramento local. E agora você tem a opção de escolher. Então você quer sua cor primária, sua cor secundária. Vamos tentar escolher nossa cor primária, certo? Eu escolhi a cor primária. Digamos que eu tenha alguns, digamos que vamos formar uma caixa retangular. Vamos adicionar uma cor, que será a cor secundária. Vamos também adicionar um botão a essa coisa. Então, vamos adicionar um botão aqui. Com, digamos, de um gradiente. Meu gradiente. Não criamos um gradiente de marca no estilo gradiente? Sim, nós temos. E por que não consigo ver isso aqui? Vamos voltar. Escolha Preencher. Ou melhor, devo dizer, selecione o gradiente da sua marca, certo? Isso parece legal e não parece muito legal, como considerar que o fundo é roxo. Então, vamos tentar manipular para obter a saída desejada. Ou melhor, eu deveria selecionar, eu deveria selecionar, você sabe, Vamos criar um botão, um botão. Largura do botão, digamos, cerca de um raio de 20. Tudo bem, vamos adicionar algum texto nele. Digamos que eu queira que esse botão tenha preto, tipo 25, preto 50, preto 75. Isso é como 75 anos? Tipo 75, em algum lugar aqui dentro. Sim. E também posso adicionar algum texto dentro dessa coisa. Então, deixe-me adicionar um botão a seguir. Tudo bem. Agora, esse texto do botão, eu gostaria de dar 32 pixels. Dois pixels. Eu quero que isso seja meio ousado. Tenha uma família de fontes do Roboto com o texto da linha central. Eu quero que isso tenha altura automática. Eu quero que isso tenha algum espaçamento entre letras. Então, digamos que o espaçamento da rede seja de cerca de cinco, 5% de altura automática. Ok, vamos deixar isso como altura automática. E também vamos considerar isso como uma broca automática. Tudo bem. Isso parece muito bom. Então esse é o meu botão. Eu formo esse tipo de coisa de design. Tudo bem? Agora, se eu quiser criar um componente de botão, um componente como layout , como posso fazer isso? Se eu quiser que isso funcione como um botão. Para que não importa quantos botões eu tenha no design do meu site, eu possa usá-los. E o que posso fazer nesse caso? Eu posso simplesmente arrastar essa coisa toda. E na parte superior da barra de ferramentas, você verá esse ícone específico, que é para criar seu componente. E você pode até ver a tecla de atalho, que é totalmente ou control ou command no seu Mac, Alt no Windows ou opções no seu Mac e no botão K. Depois de fazer isso, um componente será criado. Tudo bem? Um componente foi criado. Agora, esse componente é na verdade um componente mestre, ou você pode dizer que é um elemento pai e não um elemento filho. Agora, o que quero dizer com pai e filho? Deixe-me te mostrar. Esse é o dos meus pais, certo? Se eu quiser usar exatamente esse mesmo componente em outras páginas da web ou em outros quadros, ou digamos, neste próprio quadro. Mas eu quero fazer isso, quero fazer uso desse componente. Então, como vou fazer isso? Bem, eu uso o controle D ou antigo, segurando a tecla Opções do meu pedido e usando o mouse para fazer uma cópia dele. Não, vou fazer uso dos ativos. Eu posso simplesmente acessar meus ativos no painel de camadas. Vou procurar componentes locais. Também encontrarei a área de trabalho e o texto do botão. Eu posso simplesmente arrastá-lo e colocá-lo aqui. Agora, se, digamos que por algum motivo meu cliente descobrir que eu não gosto desse texto de botão. Quero que o texto desse botão tenha uma cor diferente. Então, como vou fazer isso? Digamos que meu design contenha centenas de botões. E o cliente diz que eu quero mudar a cor desse botão. Em todos os botões, quero mudar a cor dentro do meu botão. E essa mudança deve ser aplicável a todos os botões do meu design. Então, como eu faria isso? Vou apenas selecionar meu elemento principal ou principal. Vou voltar a essa cor. Vou mudar isso para gradiente. E agora você verá que um botão de gradiente foi formado aqui. Você pode ver que este é meu filho. Se eu fizer alterações no elemento principal, todos os elementos terão , ou melhor, refletirão as mesmas mudanças. Certo? Espero que isso esteja claro para todos vocês. Agora, e se eu quiser fazer algumas mensagens de texto ou, você sabe, um estilo tecnológico? Então, o que vou fazer nesse caso? Digamos que eu crie o texto do título. Tudo bem, vou selecionar isso inteiro. Próximo. Vou aumentar o tamanho para, digamos que 40 ou 40 talvez não sejam suficientes do que 48. Tudo bem, eu quero que isso tenha, digamos, Josephine Sans semi ousada. Isso parece legal. E é isso que eu quero para o meu título. Então eu posso selecionar todo esse texto. Eu posso escolher este para criar um estilo do meu texto. Eu posso acrescentar. E eu posso nomear isso como Título. Eu posso criar um. Outra forma é criar também um corpo de texto. Então, posso apenas dizer o corpo do texto. Agora, geralmente, o que acontece é que o corpo do texto geralmente tem um tamanho de fonte pequeno, certo? Tem um tamanho de fonte pequeno. Onde está meu outro? Agora, para o corpo do texto, talvez você não veja as opções da família de fontes. Você não verá as opções de espaçamento entre letras e assim por diante no painel de propriedades do design. Simplesmente porque, no momento, Figma presumiu que, como criamos outra caixa de texto, ela conteria o mesmo estilo do texto do título. Então, novamente, agora você precisa desvincular ou separar o estilo que ele continha anteriormente. E agora você pode mudar o estilo dele. Então, o que eu posso fazer é simplesmente reduzir o tamanho desse texto. Deixe-me selecionar desvincular, mudar o estilo para 24 de semi-tigela para, digamos, normal ou normal. E vamos manter isso alinhado à esquerda. Então é isso que eu fiz corretamente. Vamos voltar para aqui. Digamos que eu queira renomear isso para ler mais. Leia mais. Tudo bem, digamos que nesse quadro específico no painel de camadas, eu possa selecionar minha área de trabalho para moldar com a cor , ou seja, eu posso selecionar a cor. Eu posso escolher, digamos, preto 25. 25. Talvez você não veja esse 25 preto simplesmente porque a área de trabalho do meu Figma está no modo escuro. Então você não verá as mudanças. Então, se eu quiser mudar para algo como o phi preto, ideal é ver porque o phi preto é de cor clara. Vamos ver. Nós vemos? Não, não vemos lag phi na cor preta, certo? Então, terei que mudar a aparência do Chrome, Chrome, do modo escuro para o claro. Então, deixe-me fazer isso. Bem, mudar o tema da minha Figma não ajudou. Basicamente, o que você precisa fazer é clicar na área do espaço de trabalho, ir para o plano de fundo e mudar a cor para cinza. A propósito, se você quiser mudar seu Figma do modo claro para o escuro, ou talvez do escuro para o claro ou vice-versa. Basta ir até este ícone de figma, clicar em Equipe de Preferências e escolher o que quiser, claro, escuro ou tema do sistema. Então foi isso que eu fiz. E agora você pode ver que essa área de trabalho com moldura também tem a cor cinza, certo? Deixe-me ampliar um pouco para que você possa ver corretamente. Então, vamos selecionar nossa área de trabalho, desktop a quadro. Novamente, selecionaremos esta área de trabalho para colorir, pois ela é preta no momento, certo? Podemos escolher 50 pretos. Sim, tipo 50 parece legal. E quanto ao preto 25. 25. Então parece bom, mas 50 parece muito mais bom. Então esse é meu quadro inteiro. Tudo bem, digamos que eu esteja falando sobre esse componente. Eu tenho esse próximo em particular. Tudo bem, deixe-me adicionar algum texto dentro dessas coisas. Tudo bem? Eu vou fazer. O que vou fazer é deixar eu adicionar algum texto dentro disso. Digamos que eu esteja escrevendo esse termo. Desenvolvimento web completo e completo. Desenvolvimento Web Full Stack. E eu posso adicionar estilo a isso. Então, onde está minha mensagem? Eu posso adicionar estilo. Então eu posso usar o título, eu posso usar o título, e eu posso simplesmente arrastar para que ele caiba em algum lugar aqui. Onde está meu corpo? Este é o texto do meu corpo. Deixe-me adicionar isso ao nosso novo tecido e adicionaremos corpo. Tudo bem, vamos criar estilo. Tudo bem? E vamos adicionar um estilo aqui. Vamos dar isso como um texto aleatório. Então, para isso, o que vou fazer é plugins Lorem Ipsum. Ok, vamos criar uma caixa de texto. Gere frases phi, isso seria suficiente. Agora, isso presumiu automaticamente que usaria o estilo corporal. Por que isso? Porque já criei esse estilo corporal. Então, agora usa o estilo corporal. Então é assim que ele realmente usa esse anti-material. Se você quiser replicar essas duas coisas inteiras, você pode fazer isso. Você pode usá-lo aqui, certo? Você pode usá-lo. Se você quiser aumentar o tamanho do seu quadro, você também pode fazer isso. Você pode até mesmo adicionar layout automático, você sabe disso. Vamos mudar a cor desse retângulo específico de secundário para, digamos que o site primário possa escolher de secundário para primário. Parece bom. Podemos ver que é assim que realmente trabalhamos com estilos e componentes no Figma. 23. Introdução a efeitos de figma: Tudo bem pessoal, vamos começar com efeitos Figma e tropas. Então, vamos tentar criar uma caixa retangular com cores. Digamos que verde. Essa sombra parece bonita. Tudo bem? E se eu quiser adicionar alguma borda a essa caixa específica de talvez, digamos, cor preta. Então, no CSS, sabemos que podemos dar uma caixa, certo? Podemos dar cerca de uma caixa. Em CSS, você deve ter aprendido sobre caixa de conteúdo e caixa de borda. Então é isso que vamos investigar. Então, digamos que eu queira adicionar alguma borda a essa caixa específica, então como posso fazer isso? Bem, se você se concentrar no painel de propriedades do design, verá uma opção para adicionar um traçado. Então você pode simplesmente adicionar. E agora você verá que uma linha fina de cor preta foi adicionada em forma de borda à nossa caixa verde, certo? A cor é preta, a opacidade é vermelha. E há cerca de uma linha. Agora, o que essa única linha realmente significa? Então, se eu ampliar isso, se eu ampliar isso até o nível em que você descobrirá que Figma em seu núcleo são essas caixas pequenas, certo? Há tantas caixas pequenas diferentes. Agora, deixe-me rolar até o topo para ver quantas caixas de uma borda preta ocupam, para que você tenha uma ideia de por que temos uma como valor? Então, agora você pode ver aqui, você pode ver que temos uma caixa. Isso significa que, embora minha caixa retangular, a caixa verde retangular tenha 622 pixels de largura e 320 pixels de altura. Essa borda agora faz parte da minha caixa retangular. Não está fora da minha caixa. Está dentro da minha caixa, certo? Você pode ver que selecionamos o interior. Isso faz parte da minha caixa retangular. Se eu aumentar o tamanho da minha borda , o retângulo, que é de cor verde, tentará parecer menor. Então, no momento, está ocupando apenas uma caixa. Se eu mudar isso para dois , você verá as caixas de ferramentas dos ocupantes em relação a y, porque esse é o nosso desconto, certo? A largura, ou você pode dizer, que seria essa altura é a altura da caixa aumenta com base no número que você coloca aqui. Se eu mudar isso de dois para, digamos, 20, então, obviamente, muitas caixas seriam ocupadas, cerca de 20 caixas. Agora, vamos ver se nossa caixa retangular realmente diminui de tamanho ou não. Agora você pode ver caixa retangular aparecer, mas menor do que costumava ser. Então, se eu mudar isso para 60, você pode ver que o retângulo verde parece tão pequeno. Mas se eu mudar isso de dentro para fora , agora a caixa verde parece maior. Mas o retângulo, ou melhor, a borda, que é de cor preta, agora está fora do meu retângulo. É um retângulo externo. Não faz mais parte dessa caixa retangular. Então, isso é o que basicamente significa. Se eu mudar isso para novamente 20, você verá que é assim que parece. Temos mais uma opção que é central. O que isso faz? Centro basicamente significa que é uma combinação de interior e exterior. Portanto, 20 caixas também estão ocupadas por dentro e por fora. E o centro é formado com essa linha azul. Você pode ver que isso é o que basicamente seu derrame realmente significa. Você pode alterar a cor da borda se quiser que ela tenha uma cor linear, você também pode fazer isso. Deixe-me mudar isso para, digamos que essa cor, isso não vai ficar bem. Vamos mudar para ler algo como vermelho e a outra cor para, digamos, talvez amarelo. E vamos dar essa cor. Mas esse tipo de sombra linear. Tudo bem. Sim, isso parece bom, certo? Isso parece bom. Deixe-me colocar desta forma para que você possa ver a cor corretamente. Queremos que as duas cores tenham 100%. Porque você pode ver aqui, quando o profissional de TI, sim, agora parece bom. E o que mais? Sim. Então é assim que você também pode mudar a cor da borda. Tudo bem, vamos dar uma olhada em alguns efeitos. Então, vamos ver. Estou criando outra caixa. Agora. Eu quero que essa caixa tenha algum tipo de sombra. Em seu painel de propriedades de design. Você pode ver um botão que é efeitos. Depois de clicar no ícone de adição, você terá uma sombra projetada. Então, agora está aplicando alguma forma de sombra que talvez você não consiga ver agora. Mas depois de desmarcar essa forma específica, você pode ver que algumas sombras se formam na parte inferior da minha caixa. Se eu selecionar isso novamente, tenho a opção de escolher a camada de sombra interna, o desfoque do fundo e assim por diante. Mas agora, vamos nos concentrar apenas na sombra projetada. Então, vou selecionar esse ícone. Vou ver o valor x, o valor y. O que isso significa? Basicamente, significa o valor da compensação. Se eu mudar o valor de x de zero para, digamos, 12, então do eixo x em relação ao eixo x, ele está se movendo bem pixels à frente. Então, isso é o que basicamente significa. Inicialmente, o valor do deslocamento X foi definido como zero. Então não houve compensação no lado direito ou esquerdo? Correto. E no y temos o valor quatro. Então, na parte inferior, você verá algum tipo de sombra. Se eu mudar isso novamente para 12, você verá a sombra aparecer, certo. Também há um pouco de desfoque. Vamos tentar remover o aprendizado a partir de agora. Se eu remover o desfoque, o que você pode ver? Você pode ver exatamente a mesma forma formada, certo? Quando você atravessa a rua, há algumas luzes da rua e uma sombra se forma atrás de você. Então, o que isso significa? A sombra é bem formada e a sombra tem exatamente o formato do seu tamanho. Então, sombra no Figma, sempre que você está criando sombra para seus objetos ou seus elementos ou itens, o que acontece é que ela ocupará exatamente o mesmo tamanho. Você pode até mesmo mudar a cor da sombra. Atualmente, ele foi definido como preto, 25% de transparência. Mas se quisermos que isso tenha alguma cor, digamos roxo, ou digamos, cor azulada, cor água-marinha. Então você pode fazer isso. Se você quiser um pouco de desfoque, você também pode adicionar um desfoque. Então você pode ver que um pouco de sangue foi adicionado a essa sombra em particular. Se você quiser que ele se espalhe. Espalhar basicamente significa que quanto você quer que sua sombra espalhe um efeito de mancha? Se você colocar 20, verá que está manchado em todas as direções. Então, isso é o que basicamente significa uma sombra projetada. Se você mudar de sombra projetada para, digamos, sombra interna, você verá que a sombra agora está aparecendo dentro do nosso elemento. Essa é a minha sombra interna, examinarei a camada e o desfoque do fundo mais tarde. 24. (23) Efeito de texto em figma: Tudo bem pessoal, deixe-me mostrar um efeito de texto legal que podemos fazer. Então, o que eu tenho em mente é que podemos tirar uma imagem espiando nosso texto. Então é isso que eu tenho em minha mente. Para isso. O que vou fazer é criar uma moldura talvez do tamanho. O tamanho é muito grande. Vamos tentar reduzir o tamanho disso para 1080 por 1080. E a próxima etapa que gostaríamos de usar na imagem. Então esta é a nossa moldura. Vamos tentar trazer uma imagem usando nosso plugin Unsplash. Então, vamos tentar trazer um resumo. Queremos um resumo ou um retrato? Vamos tirar um retrato. E vamos tentar pegar esse cara. Tudo bem. Essencialmente, o que acontece é isso. Sim, então era isso que queríamos. Não queríamos que essa imagem estivesse exatamente dentro da nossa moldura. Queremos que isso seja feito manualmente. Agora vou colocar essa imagem dentro da nossa moldura. Agora, como fazemos isso? Simplesmente entrando no painel Camadas, você pode arrastar a camada da imagem abaixo da moldura. Então agora está dentro da moldura. Você pode simplesmente se mover onde gostaria que o SMH estivesse. Se você quiser manipular com essa imagem, você também pode fazer isso. Basta clicar no preenchimento. Você pode simplesmente diminuir a saturação, se quiser, aumentar a saturação, o que funcionar melhor para você. Quer brincar com a exposição ao contraste, vá em frente e faça isso. Mas essa imagem não é necessária porque é simplesmente sua imagem em preto e branco. Então, próximo passo, o que vamos fazer? Vamos tentar criar um retângulo. Talvez desse tamanho. E deixe-me ampliar isso para cerca de 50%. Sim. E na próxima etapa, deixe-me também aumentar o tamanho da caixa retangular, mais ou menos assim. Sim. Em seguida, queremos que a cor dessa caixa seja branca. Tudo bem, vamos também tentar criar um texto dentro dessa caixa. Então, podemos dizer algo como Figma. Figma é melhor, Figma é incrível. Tudo bem, sigma é incrível. E agora eu posso criar designs de interface de usuário. Tudo bem, algo assim. E também vamos fazer com que essa caixa de texto de altura automática tenha altura automática. Ok, o estilo da fonte é um bom impacto. Temos 96, certo? Se quisermos aumentar o tamanho dessa caixa, também podemos fazer isso. Tudo bem. Podemos fazer isso mais ou menos assim. Sim. E o que nós queremos? É que a caixa retangular branca deve permanecer como está. Mas esse texto também deve ter a imagem e um pouco de desfoque por trás desse texto. Então, para fazer isso, o que podemos fazer é colocar uma réplica dessa imagem mantendo pressionada a tecla Alt, colocando-a na parte superior. É assim que ficaria. Na próxima etapa, queremos nosso texto. Podemos selecioná-la e podemos usá-la, que é para ser usada como mesquita. E é assim que nossa saída parece. Coisas simples. Então, o que aconteceu aqui dentro desse quadro, esse texto agora está atuando como uma máscara sobre nossa imagem. E essa imagem está agora, ou melhor, essa caixa retangular está na camada superior da nossa camada superior, não na camada superior, mas na camada superior da minha imagem. Você pode ver aqui, esta é a minha imagem de que temos uma caixa retangular. Dentro dessa caixa retangular, temos nosso texto. E o texto é usado como uma máscara para nossa imagem. Isso é o que fizemos. Você pode selecionar esse texto. Vá para, você sabe, seus efeitos, você pode adicionar, você pode adicionar um pouco de sombra projetada. Se você quiser um pouco de sombra, digamos que seja uma cor preta com talvez cerca de 50% de sombra. Desfoque para ser aproximadamente, digamos dez X, dez Y para ser Phi. Você pode ver que nossa saída seria assim. Você pode ver que foi assim que fizemos com a ajuda dos efeitos e sombras Figma. 25. Efeito de texto fatiado: Tudo bem pessoal, hoje estou muito empolgada porque agora vou mostrar algumas coisas de nível profissional. Então, o que vamos fazer é cortar nosso texto e adicionar um pouco de sombra a ele. Então, para fazer isso, em primeiro lugar, vamos tentar criar um quadro do tamanho de uma área de trabalho. Tudo bem? Então essa é a nossa dimensão. Vamos dar um pouco de cor à nossa área de trabalho. Então eu vou dar laranja. Vamos dar uma cor laranja, talvez laranja opaca. Sim, isso parece bom. Vamos adicionar um pouco de texto a esse quadro. Então, vou adicionar o texto que está cortado. E você pode ver que a família de fontes estou realmente usando está afetada e o tamanho da fonte é de 300 pixels. Bom. Certifique-se de que o texto seja uma linha central, tanto em relação ao eixo x quanto em relação ao eixo y. Então, agora nosso texto aparece perfeitamente no centro. Agora, com a ajuda da ferramenta Caneta, vou cortar o texto. E agora eu quero o texto de forma que seja cortado na diagonal. E alguma distância é formada entre essas duas diagonais, a diagonal superior esquerda e a diagonal inferior direita. E o espaço é pequeno, embora perceptível, mas não essa mudança de jogo. E queremos adicionar um pouco de sombra a isso. Então, para fazer isso, vou usar minha ferramenta de caneta. Basta selecionar sua ferramenta de caneta. O que vou fazer é colocá-lo em algum lugar aqui para que eu possa cortá-lo diretamente na diagonal. Em algum lugar aqui até o topo. Vá para a esquerda para que corresponda a essa posição. Traga-o para algum lugar por aqui. Então, essa parte do meu texto foi cortada. Agora, o que vou fazer é selecionar esse vetor que foi cortado junto com este texto. E agora, o que vou fazer é subtrair a parte selecionada. Você pode ver que isso agora foi subtraído. A parte que eu realmente selecionei agora foi cortada em fatias. Agora, o que vou fazer é, antes de tudo, selecionar esse vetor. Opa. Deixe-me selecionar essa parte. E o que eu queria fazer é essa parte subtraída, certo? A parte subtraída, deixe-me escolher esse vetor. Eu queria dar isso, tirar o traço e eu queria que isso tivesse, que é de cor cinza. Assim, você pode ver que a parte foi desmarcada ou outra parte do meu texto foi removida simplesmente porque removemos a parte do traçado. Tudo bem, então este é meu subtraído. Tudo bem, vamos criar uma duplicata da nossa subtração. Tudo bem, vou fazer uma duplicata com a ajuda do Controle D. Agora, temos que subtrair a primeira que foi cortada e a segunda que é duplicada. Aquele que foi cortado. Vou manter isso intacto bloqueando-o. E aquele que está bem aqui. O que vou fazer aqui, vou expandir. Eu vou escolher esse vetor, vou escolher essa cor. E agora, com a ajuda disso, que é editar meu objeto, vou me certificar de que meu botão Mover está selecionado. Vou escolher essa parte superior, que é três, esses três vértices, o primeiro, o segundo e o terceiro. Então, vou apenas arrastar e selecionar essa parte. Agora, vou arrastá-lo para baixo. Tudo bem. Talvez essa parte, essa parte tenha sido selecionada. Eu vou escolher isso feito. E agora o que aconteceu é que duas partes do meu texto foram cortadas. O primeiro foi meu no canto superior esquerdo e no canto inferior direito. Tudo bem. Então, duas subtrações foram feitas. Então agora vou escolher o vetor. Tudo bem? Vou alterar o valor do meu valor de compensação X. Vou aumentar o valor do deslocamento X. Então, se eu aumentar pressionando minha tecla de seta para cima, você verá que ela está se movendo ligeiramente para a esquerda. Se eu aumentar o tamanho do meu valor y. O que está acontecendo aqui é que a peça está se movendo e isso está formando uma espécie de espaço em branco, certo? Há algumas ações fragmentadas em andamento. Tudo bem? Agora, o que queremos é isso, deixe-me fazer desta forma. Agora, o que queremos é que, dentro deste, essa parte faça uma cópia desse vetor mantendo pressionado nosso antigo. Ou se você estiver usando o Mac, você pode usar a tecla de opção e colocá-la aqui. Tudo bem, vamos também criar uma elipse desse tamanho. E vamos agrupar isso, essa elipse e esse vetor, os dois, mas agora queremos essa elipse. A propósito, essa elipse estaria junto com nosso vetor. Tudo bem? Essa elipse deve ter uma cor linear com cem por cento de transparência preta e zero por cento de transparência preta. Portanto, certifique-se de que as duas cores no final sejam pretas. Isso deve ter 100%, isso deve ter 0% de opacidade. Tudo bem, vamos agrupá-los. Então, vou selecionar essa parte e essa parte mantendo pressionada minha tecla Shift. E em vez de realmente agrupá-los, vou usá-lo na forma de uma máscara. E agora o que vou fazer é selecionar isso. Posso selecionar todo esse grupo de massa ou outra parte apenas da elipse. Vou girar esse ângulo. Então, vou rotacionar isso. Sim, vou mover isso para cá. Deixe-me mudar a rotação novamente. Deixe-me selecionar minha elipse. Rotação. Sim, isso parece legal. Vamos reduzir o tamanho dessa sombra. Mais ou menos assim. Se eu, se eu selecionar minha elipse, novamente, isso é exatamente o que queríamos. Um design tão legal. Então é assim que você pode fazer com que seu design pareça 3D e você pode ter efeitos tão legais usando o Figma. Uma última coisa que resta a ser adicionada para que fique como uma cereja em cima do bolo. Então, isso seria adicionar alguma sombra à nossa sombra a essa elipse em particular. Então, adicionamos essa cor de preenchimento. Podemos ir para Efeitos, adicionar um pouco de desfoque de camada a ele. E se eu clicar nesse ícone, podemos alterar o valor do desfoque de quatro para, digamos, dez. Se eu fizer isso, você verá que é assim que nosso texto ficaria. Se você quiser reduzir o tamanho do nosso desfoque. Você também pode fazer isso. E perfeito. É assim que realmente deveria ser. Se quiser, você pode alterar o nome do quadro de desktop para, digamos, efeito de texto fatiado. 26. (25) Efeito de texto esboço: Tudo bem pessoal, vamos dar uma olhada em como podemos criar um efeito de texto de contorno. Então, para isso, vou criar uma nova moldura com aproximadamente esse tamanho. E antes de realmente criarmos um wireframe, você sabe o que, o que faremos? Vamos trazer apenas uma imagem do plugin Unsplash. Então, vamos tentar encontrar um animal. Ok, essa girafa parece legal. Então, eu vou trazer este e vamos tentar remover o fundo dessa imagem. Usando o plugin Remove BG, vou remover o plano de fundo dessa imagem em particular. Agora, depois que o fundo for removido, o que vou fazer é reduzir um pouco o zoom. E o próximo passo, queremos uma moldura. Então, vamos criar uma moldura de aproximadamente 1920 por dez ADP. Esses são seus pixels, certo? Esse é o nosso formato de exibição. Então, 1920 por 1080 pixels, certo? Quando ampliamos e queremos que essa imagem fique dentro de uma moldura, é isso que queremos. Vamos tentar centralizar o alinhamento ou outro primeiro, vamos tentar escalar isso. Vou tentar escalar essa girafa em particular. Mas você sabe o que é esse quadro, em vez de 1920 por 1080? Vamos também fazer isso, a largura zero por 1080. E vamos tentar trazer essa imagem para tentar reduzir isso. Novamente. Vamos tentar escalar isso. Sim, isso parece legal. Vamos tentar ampliar isso para que apareça bem. Tudo bem. Tentaremos centralizar alinhamento com a ajuda deste. Isso parece legal. Também daremos uma cor à nossa moldura. Então, vamos tentar dar uma cor a essa moldura. Então, para dar uma cor a essa moldura, vou me certificar de que ela foi selecionada para se mover, selecione sua moldura e, em seguida, volte ao painel de propriedades do design, vá até essa cor, sólida, encontrará uma cor natural que é verde, obviamente. Então, estou procurando aquele tom de cor da floresta e um lado um pouco mais escuro. Sim, isso parece bom. Tudo bem, próximo passo, queremos uma mensagem, então vou trazer minha caixa de texto. O tamanho. Parece legal. Tudo bem, vamos tentar escrever o texto do esboço. Tudo bem, vamos tentar centralizá-lo. Com a ajuda disso, tenho a linha central, meu texto. Tudo bem, saiba o que tenho em mente para delinear esses dois textos, fazer esse efeito de tipo de esboço. O que temos é que queremos que essa imagem seja massiva de tal forma que pareça assim. A imagem foi mascarada e o texto tem essa imagem dentro dela. Mas não estamos usando o método de mascaramento. Em vez disso, usaremos o método de esboço e veremos um pequeno truque. Então, como você pode ver aqui, temos esse texto e eu vou fazer uma réplica dele. Então, vou segurar meu botão alternativo e colocarei abaixo da minha imagem. Agora, o que acontece aqui é que há uma camada de texto, que é sobre minha imagem, e uma camada de texto que está por trás da minha imagem. Portanto, há duas camadas. Outro que está na frente, queremos escondê-lo. Então, para isso, vou apenas remover a cor. E depois que a cor for removida, obviamente, você não verá o caractere do texto porque agora ele está invisível. Embora o texto esteja presente, há declaração de imposto, que são textos resumidos. Mas como não tem cor, como você vai semear? Então é isso que está acontecendo aqui. O próximo passo, o que queremos é esse texto específico que está na frente. Queríamos dar um esboço. Então, vou adicionar um pouco de derrame. E assim que eu adiciono um traço que você pode ver, você pode ver a imagem que está dentro do meu texto. Agora, eu vou mudar a cor do meu, você sabe, o traço para ser também branco vai fazer isso. Ter células phi. Queremos que isso esteja dentro e é assim que nosso texto ficaria. Então, na camada frontal do texto, que está aparecendo na frente da minha imagem. Isso é não ter nenhum texto. É ter apenas uma fronteira. Fronteira. Quando tem borda e não tem nenhuma cor. Obviamente, você veria a imagem. Agora, por trás dessa imagem. Que outra coisa você tem? O mesmo texto com a mesma cor. Então, ele se forma como, você sabe, como se realmente lhe desse a ilusão que você criou um mascaramento de sua imagem. Então é isso que está acontecendo aqui. Caso contrário, é uma coisa bem simples. Não fizemos nada aqui. Portanto, duas coisas simples que fizemos. Em primeiro lugar, usamos nossa imagem dentro da moldura. Eles colocaram uma cor na nossa moldura. Em seguida, usamos duas camadas do nosso texto. Um que está na frente da minha imagem, sem cor, mas apenas traçado, que é novamente da mesma cor do meu texto. E a camada de texto que está por trás da minha imagem não tem nenhuma borda. Está tendo apenas cor de preenchimento. Portanto, dá a ilusão de que a imagem foi mascarada. 27. Efeito de ícone: Tudo bem pessoal, vamos ver como podemos criar efeitos de ícone azul. Então, para isso, vou criar um novo quadro do tamanho da postagem no Instagram. Vamos deixar isso mais escuro ou preto. Agora, vamos importar quando o ícone do Instagram. Agora, para fazer isso, vou realmente usar o plugin when, que na verdade é um ícone de fonte ou um plugin Font Awesome Você pode simplesmente encontrar mais plug-ins e procurar os ícones do Font Awesome ao conduzir. Basta executar isso e procurar o ícone que você está procurando. O que tenho em mente é que usaremos o ícone do Instagram e modificaremos de forma que usando os efeitos e sombras que aprendemos até agora, faremos com que pareça que está brilhando. Tudo bem, então vamos usar esse logotipo do Instagram. Tudo bem, vamos tentar alinhar seu centro. Linha central. Isso tem que estar alinhado ao centro. Selecione isso em algum lugar aqui. Tudo bem? E também vamos tentar aumentar seu tamanho. Digamos que 200 por 200. Ou o que mais você pode fazer é simplesmente bloquear isso para que, se você alterar o tamanho de sua largura ou altura, a outra dimensão se altere, respectivamente. Então, se você quiser que seja 250, você pode fazer isso. Parece bom. Selecione isso. E mudaremos a cor do nosso ícone de preto para branco para que fique visível. O próximo passo que queremos é que, você sabe, o próximo passo que precisaremos é tentar usar alguns efeitos de sombreamento. Então, clicaremos nos Efeitos. Usaremos primeiro um desfoque de camada, ou melhor, devo dizer que a primeira sombra interna que usaremos. Agora, dentro da sombra interna, o que queremos é que não haja compensação, certo? Não deve haver compensação. Não queremos que a sombra esteja fora do alcance determinado. Ele deve aparecer como está, como o ícone do Instagram com a mesma dimensão, não deve ser deslocado do eixo x ou y. É isso que queremos que o sangue tenha em cerca de 20 pixels. E a cor que vamos exigir é a cor roxa ou violeta. É isso que o Instagram usa, certo? Em algum lugar ao redor dessa sombra. E queremos que isso seja 100%, 100%. E essa é a cor que vamos usar. A próxima etapa que exigiremos é que precisaremos outra sombra que seja sua sombra projetada. Portanto, use a sombra projetada. De novo. Faça com que o deslocamento seja zero. Faça com que o desfoque seja 50. Vamos tentar com 50. Mude a cor para a mesma cor exata, que é a cor que realmente usamos. Envie as cores do documento. Você encontrará isso aqui. E isso é o que queríamos e que o desfoque fosse de 5.000%, certo? Agora, o que vou fazer é fazer uma cópia desse ícone do Instagram. Então, basta fazer uma cópia disso. Então, para os ícones do Instagram que temos, você pode ver, não clique nesse vetor. Clique neste ícone, Instagram, que é um grupo. Tudo bem, essa é a que realmente usamos, e essa é a cópia. Então, dentro da cópia, vou remover todas as sombras. O que vou usar é apenas meu derrame. Então, basta adicionar um traço, fazer com que o traçado seja branco. Faça isso com cerca de cinco pixels de tamanho. E a cor que vamos usar em vez do branco. Vamos usar a mesma cor do documento. E agora você pode ver esse tipo de efeito pegajoso. Por fim, antes de terminarmos este tutorial, a única coisa que você precisa fazer é remover a cor de preenchimento e também adicionar alguns efeitos, que seriam o desfoque da camada. Então, basta adicionar uma camada de desfoque e fazer isso com cerca de cinco de sangue. O que acontece se aumentarmos isso? Você verá que o desfoque ao redor do item é o que veremos se eu aumentá-lo. Tudo bem? Então, se você quiser que isso seja cinco, ficaria legal. E é assim que você cria efeitos de ícones brilhantes. 28. (27) Mini projeto: Tudo bem, pessoal, hoje estou muito empolgada porque agora vamos investigar coisas muito boas. Porque vamos construir um mini-projeto. Agora, esse mini-projeto que vamos construir é apenas um cabeçalho simples. Ou você pode ver uma página de destino para seu site. E não vamos nos aprofundar nisso. Pai, que tipo de topografia, que tipo de família de fontes, que tipo de esquema de cores você deve usar para o design do Figma. Mas, em vez disso, veremos como colocar nossos itens e como organizá-los com o que aprendemos até agora. Então, para isso, vou criar apenas um quadro do tamanho de uma área de trabalho. E eu quero que seja um MacBook Pro de 14 polegadas. Então, podemos selecionar isso. E deixe-me reduzir um pouco o zoom. Tudo bem, nem tanto. 50 por cento, isso seria bom. Sim. A próxima etapa que queremos é ter certeza de que, você sabe, podemos adicionar layout a isso. Então, para isso, apenas certifique-se de ir até aqui. Então, certifique-se de ir até aqui e garantir que as grades de layout tenham sido gravadas. próxima etapa que você deseja é clicar nessa grade de layout e você também verá toda a grade de layout que está nas colunas e linhas, mas nós só queremos nossas colunas. Então, para isso, o que vamos fazer é usar apenas esse, seja, eu vou selecionar esse ícone. Vou escolher entre grade e apenas colunas. Depois de selecionar as colunas, alterarei a contagem de colunas de 5 a 12. Se você quiser mudar a cor também, você pode mudar isso de, digamos, em vez de vermelho, você quer que algo como azul claro seja como essa cor. Então você pode fazer isso. Próxima etapa. O que vamos fazer é querer algum tipo de margem da primeira coluna da nossa grade e da última coluna da nossa grade. Então, vamos adicionar alguma margem. Selecione, digamos que eu queira adicionar uma margem de cerca de 50 pixels. Então eu posso fazer isso. Bem, isso não parece bom para o nosso projeto, então podemos mudar isso para, digamos, talvez 100. Agora, parece bom. Mas e se eu mudar isso para novamente, 125, algo assim. Isso parece muito legal. A próxima etapa é o espaçamento entre calhas. Agora, o que significa basicamente um bom espaçamento é que o espaçamento, o espaço extra entre as duas grades de layout, está entre as duas colunas de layout. Esse espaço onde meu cursor paira é meu espaço na sarjeta. Acho que o espaço da sarjeta agora é 20. Se mudarmos isso para, digamos que talvez 30, parece bom. Então, podemos fazer isso como 30. Próxima etapa. O que vamos fazer? Vou ampliar isso um pouco para que você possa ver. Tudo bem, na próxima etapa, queremos criar uma barra de navegação. Então, para isso, vou criar uma caixa emaranhada de fornecedores, começando deste canto até esta lista , para que seja anexada corretamente. Deixe-me ter certeza de que isso também toque essa linha. E garantiremos que a altura seja apenas 100. Tudo bem, vamos aumentar isso para 200. Não, não, isso seria demais. Então eu acho que cem 2.000 foi bom. Em seguida, queremos estender isso até este ponto. O próximo passo, o que vamos fazer? Queremos trazer nosso ícone aqui e os outros itens do menu aqui. Então, para isso, vou usar meu plug-in. Se você criou seu ícone, pode simplesmente destacá-lo ou, se quiser criar seu próprio logotipo, também pode fazer isso no Figma. Então, basta usar este ícone do Font Awesome. E eu posso procurar qualquer uma das marcas. Digamos que eu queira usar algumas marcas famosas como o LinkedIn. Então, vamos usar isso. Use isso. E garantiremos que esse ícone seis pixels de altura e 36 pixels de largura. Então, vou usar esses 36 pixels de altura e 36 células B e molhados. Tudo bem, 36 por 36. Na verdade, é muito pequeno. Vamos mudar isso de 50 por 50. Sim, parece bom. E se eu mudar isso de 50 por 50 para, digamos, talvez 60 por 60. Sim, isso parece bom. Portanto, 60 por 60 é o tamanho ideal que eu realmente usaria no meu projeto. Agora, na verdade, depende da aparência do seu design. Como tal, não existe uma regra rígida que você tenha que usar 60 pixels altura e largura para todos os seus ícones em seu web design. Você só precisa brincar e ver se ele se encaixa no seu design sob encomenda. O próximo passo, o que vamos fazer? Vamos garantir que, ou seja, ele esteja centralmente alinhado no centro relação ao eixo y. Então, vou selecionar isso, que é alinhar centros verticais. Tudo bem, o próximo passo que queremos é que façamos uso do nosso menu. Então, apenas pressionando meu Tiki, eu posso realmente escrever, digamos, em casa. Casa. Então eu tenho sobre os serviços de Dan e a página de contato conosco. Então, esses são os diferentes itens do menu de navegação. Então, o lar é aquele que eu vou selecionar. Na próxima etapa, quero que o tamanho do texto seja aproximadamente, talvez digamos que 36 pixels pareçam visíveis. Então, vamos prosseguir com 36 pixels. Usarei o meio. tamanho médio parece bom. E a família de fontes que deveríamos usar é, digamos, se eu usar algo como “ vamos manter esse estagiário”. Não me importo de usar este. Bem, eu farei o próximo. Vou fazer uma cópia disso. Vou mudar o conteúdo de casa para cerca de dez, de prestes a entrar em contato conosco. Entre em contato conosco. E por último, vou usar os serviços. Serviços. Tudo bem? Agora, a razão pela qual eu usei essas caixas de texto diferentes e as estou alinhando em direções diferentes. Você pode ver que este está na parte inferior, este está no topo da casa. Isso está novamente na parte inferior. Isso está novamente no topo. Esse alinhamento adequado não está acontecendo. Então, podemos fazer isso. O que você precisa fazer é selecionar todos esses e transformá-los na forma de um grupo, não exatamente de um grupo. Você não precisa usar o Controle G ou o Comando G. O que você precisa fazer é usar este. Depois de fazer isso, você pode realmente adicionar um layout automático. Depois de adicionar o layout automático, seu trabalho estará concluído. Então foi isso que você fez. Agora, basta arrastar esse quadro inteiro e colocá-lo aqui. Agora, por que o colocamos aqui? Por que garantimos que Fale conosco permaneça nesta parte do meu layout, porque queremos que a última parte da coluna de layout toque no último item do menu. Então foi isso que fizemos aqui. E no ícone azul que você viu anteriormente e eu cliquei, não havia nada além de apenas formar uma moldura. Então, acabamos de fazer uma seleção de molduras. Você pode fazer isso com o botão direito do mouse e também pode usar a seleção de molduras. Portanto, não há nada parecido com foguetes e ciência de foguetes acontecendo. Que o próximo passo que queremos fazer é esconder nosso retângulo. Não queremos que isso apareça em nosso site. Então, para isso, se você quiser, você pode usar isso e você pode simplesmente adicionar uma sombra desfocada e usar alguma transparência para essa barra de navegação específica. Na próxima etapa, queremos ter certeza que este e este, ambos estejam alinhados verticalmente. Então, vamos nos certificar de que os dois estejam alinhados verticalmente e apenas ocultaremos nossa caixa retangular. Uma vez que você esconda isso, é assim que nosso lado esquerdo ficaria. Tudo bem, a próxima etapa, já que estamos realmente tentando criar um projeto, um miniprojeto garantirá que seja responsivo. Isso significa que mesmo que o tamanho do meu molhado mude, tudo bem, se eu mudar do MacBook Pro para, digamos , um dispositivo móvel , o conteúdo não deve pular ou não deve ser cortado. Então, para garantir que isso não aconteça, o que vamos fazer? Selecionaremos nosso ícone, esse ícone do LinkedIn. E na parte das restrições, na parte das restrições, eu deveria ver a parte das restrições. Então, vou adicionar um layout automático. Depois de adicionar o layout automático, você verá essas restrições e os elementos de redimensionamento. Então, no eixo y, queremos que isso englobe outros itens. E a partir do eixo x, queremos que isso fique fixo nele. Tudo bem? O próximo passo, o que vamos fazer agora, é garantir que nosso design seja responsivo, ou seja, se eu passar do tamanho da tela do MacBook Pro para, digamos, um dispositivo móvel. Não quero que parte da minha porção seja cortada. Agora mesmo. Nosso design não é responsivo. Então, o que acontecerá se eu reduzir a largura do meu site? Então você verá que alguns dos conteúdos do meu menu estão sendo deixados de fora. Você não consegue ver o Fale conosco com clareza. Mesmo que eu reduza essa umidade desta parte para esta parte, você verá o ícone do lúmen fora da minha moldura. Ok, isso não faz parte do meu tema, então vamos trazer isso para dentro deste. E depois de fazer isso, você pode ver que isso foi deixado de fora. Então, o que vou fazer é simplesmente desfazer para obtermos o tamanho. Novamente. Ele garante que o ícone esteja dentro de uma moldura, a moldura do MacBook Pro. E para garantir que nossos designers sejam responsivos, basta clicar nesse quadro específico. Tudo bem? No momento, você não verá a parte das restrições. Você verá a parte de redimensionamento porque usamos o layout automático. Então, basta clicar com o botão direito do mouse, usar uma seleção de quadros e você poderá ver que um novo quadro foi formado. Então, posso simplesmente renomear esse quadro para ser um item de menu. E agora você verá que esse quadro nos dará restrições. Agora posso dizer que, no eixo x, quero que esses itens do menu fiquem no lado direito. E no eixo y, ele deve ficar no lado superior. Agora, se eu tentar reduzir o tamanho do meu quadro, você verá que os itens do menu não estão sendo compactados. Em vez disso, meu ícone foi compactado. Então, veremos como podemos corrigir esse ícone também. Então, novamente, clique com o botão direito sobre isso. Use a seleção de molduras. Altere o nome do quadro. Podemos mudar isso para ícone. Ícone. Você pode ver o logotipo. Você pode simplesmente renomear isso para no-go. Tudo bem, depois de fazer isso, fique para a esquerda e para cima. Agora, se eu tentar reduzir o tamanho da minha moldura, você pode ver que meu logotipo não está comprimindo. Tudo bem, foi assim que tornamos isso possível. A próxima etapa que queremos é um texto de título e um corpo de texto. E abaixo disso, queremos um botão. Além disso, no lado direito, queremos que uma imagem seja colocada. Então, para isso, vou usar texto. E você sabe o que? Vou usar apenas uma caixa de texto. Dentro dessa caixa de texto, vou colar as coisas que já usei. Então, vou copiar este texto, que é começar sua própria jornada de negócios hoje. Cole isso aqui, certifique-se de que ele use esse molhamento automático. E o próximo passo que queremos é, devo dizer, o próximo passo que queremos. Isso garante que sejam 36 pixels. Se você quiser que esse título tenha 40, você também pode fazer isso. Para ser ousado. Você também pode fazer isso. Você quer algum outro estilo de fonte. Vá em frente, faça isso. Eu não vou fazer. Basta selecionar este. Garante que ele toque nessa parte. Tudo bem? Certifique-se de que grude. Essa parte em particular. Criaremos outra caixa de texto. Desta parte até talvez, digamos que essa posição cole o resto da próxima, que é meu corpo. Então selecione isso. Novamente. Vamos usar 36. Você pode usar seus estilos, você pode, você pode salvar o estilo, e você pode usar isso em outras partes do seu design. Faça isso normal, regular. Sim, é isso. Então, vou me certificar de que esta caixa de texto tenha altura automática. Então, faremos isso. E vamos nos certificar de que haja algum espaçamento que justifique a distância entre o título e o corpo. Tudo bem, o próximo passo que faremos é usar nosso botão. Então, para criar um botão, não vou usar uma caixa retangular. Em vez disso, usarei uma caixa de texto. Então, vou usar apenas os textos que começam agora. E para fazer com que pareça um botão. Por que estamos usando? Em primeiro lugar, por que estamos usando essa caixa de texto como um botão e não como uma caixa retangular para que possamos tornar nosso botão responsivo. Então, o que vou fazer adicionar um layout automático a esse botão. Vou apenas selecionar isso. Vou adicionar um layout automático. Agora você não verá a opção de adicionar um layout automático diretamente às obras de texto. Primeiro, você precisará adicionar a seleção de molduras. Então, basta usar a seleção de quadros. E agora você verá uma opção para adicionar um layout automático. Depois de fazer isso, certifique-se de que seja a linha central. E então você fornece um pouco de preenchimento, quer você queira ou não. Então, para esse design, vou fornecer um pouco de preenchimento horizontal. Portanto, nas posições esquerda e direita, queremos 30 pixels de preenchimento e, na parte superior e inferior, V1, 15 pixels de preenchimento. Eu fiz isso. Agora, vamos adicionar uma cor. Então, eu quero que a cor seja sobre isso, um botão de apelo à ação positivo. Portanto, essa cor parece boa e a cor do texto seria byte. Então, vamos selecionar isso. Se você quiser adicionar algum raio de borda, você também pode fazer isso. Então, vamos tentar adicionar um raio de borda também. Então, deixe-me adicionar 20. Depois de fazer isso, o que posso fazer, posso simplesmente selecionar isso. Eu vou colocá-lo. E você pode ver que a distância entre esse corpo de texto e meu botão é de 61 pixels, e a distância entre meu título e corpo também é de 61 pixels. Então, vamos deixar assim. E vou me certificar de que as restrições sejam à esquerda ou à direita. Ele gruda na parte mais à esquerda. E, na verdade, é uma restrição, é na verdade uma largura fixa. Tudo bem? Depois de fazer isso, o que quero dizer com responsivo? Mas depois de criar o botão responsivo , sim, é claro. Então, se eu estender isso, deixe-me estender isso. Você pode ver que não importa o quanto o tamanho do meu botão aumente ou diminua, o texto, que é ensinado agora, sempre permanece no centro da posição da massa e o preenchimento é mantido constante. Então, isso é o que basicamente significa. Tudo bem, o próximo passo, o que queremos fazer é que, se eu , primeiro tente renomear esse quadro. Então, vou apenas renomear esse quadro para botão. Este como corpo de texto. Então, rênio dois, corpo. Próximo. Este como texto do título. Tudo bem, vamos selecionar todos os três. Na próxima etapa, queremos garantir que as restrições sejam selecionadas à esquerda e à direita. Tudo bem? E agora queremos adicionar uma seleção de molduras. Depois de adicioná-los dentro de uma moldura, o que vamos fazer? Garantiremos que ele atenda às restrições esquerda e direita. Na próxima etapa, dentro desse quadro dois, temos nosso corpo de texto e tags de título. Então, basta selecionar o texto do título. E dentro desta. Primeiro de tudo, vamos selecionar esse quadro inteiro. Faça. Vamos também adicionar um layout automático. Vamos adicionar um layout automático. Depois de fazer isso, certifique-se de que as restrições agora você não conseguirá ver isso à esquerda e à direita. Então, basta usar a esquerda. Depois de fazer isso, selecione seu título. E na parte de restrições aqui, para minha restrição horizontal, redimensionamento horizontal, você deve usar o contêiner completo. Agora, por que devemos usar o contêiner cheio? Então, se eu tentar diminuir o tamanho da minha moldura, você verá esse termo. Agora mesmo. Você não verá a mudança. Então, se eu selecionar esse contêiner completo, se eu me certificar de que, você sabe, está usando isso. Ok? Vamos também mudar isso para largura fixa. Agora, se eu tentar diminuir o tamanho da minha moldura agora, você não conseguirá ver o texto do título sendo ajustado de acordo com o tamanho da minha moldura. Então, para isso, o que vamos fazer para isso? Selecionaremos o texto do título e garantiremos que ele esteja definido como um contêiner cheio. E no eixo y, ele é definido como o hub contém. Agora, por que o Hub contém? Vou te mostrar isso em um minuto. Então é isso que queremos no vértice. Queremos que este seja, novamente, um recipiente cheio. Depois de fazer isso, certifique-se de que este tenha uma largura fixa. Tudo bem? Selecione o quadro inteiro para a esquerda e para a direita novamente. E então a próxima parte, o que queremos é que selecione sua moldura, tente redimensioná-la. E agora você pode ver os textos do título e o vértice está se ajustando de acordo com o tamanho da minha moldura. Então, está reduzindo seu tamanho. É assim que ficaria em dispositivos móveis, correto. Agora, o que quero dizer com Hub contém seu redimensionamento. O que essa propriedade significa basicamente? Então, digamos que meu corpo de texto, eu copio esse texto e o coloquei mais algumas vezes assim. E isso até quando tem um botão também, está mantendo essa distância, 61 pixels de distância daqui e daqui. Isso contém propriedades basicamente quando você está falando sobre redimensionamento. Tudo bem, então é assim que você realmente cria seu design responsivo. Até agora, fizemos a única coisa que resta é se você realmente quiser usar uma imagem. Então, se você quiser usar a imagem, não temos esse espaço para a imagem. Então, o que podemos fazer é selecionar nosso título e colocá-lo assim. Podemos selecionar nosso corpo de texto e aumentar o tamanho da altura, a altura da nossa caixa de texto. Sim, isso pareceria legal. Na próxima etapa, queremos importar uma imagem. Então, com a ajuda do meu plugin Unsplash, eu posso realmente usar qualquer imagem. Então, vamos tentar trazer alguma imagem, digamos, relacionada aos negócios. Então, vou selecionar isso. Vou procurar um empreendedor. E espero ver alguém que esteja realmente tentando apresentá-los na frente de seus clientes. Então esse parece bom. E essa é uma imagem muito boa que podemos usar em nosso design. Então, depois que essa imagem for importada, podemos redimensioná-la usando a ferramenta de redimensionamento. Então, vamos redimensionar isso. O tamanho apenas garante que ele se encaixe adequadamente em nosso conteúdo. Por que não consigo alugar isso em minhas redes? Tudo bem, então essa imagem precisa estar dentro da moldura do MacBook Pro. Então, vamos tentar colocar isso dentro da moldura de um MacBook Pro. Está dentro disso. Vamos tentar nos ajustar novamente. E agora ficaria bem. Sim, isso parece bom. Apenas certifique-se de que ele grude nessa parte. Tudo bem. Também podemos garantir que ele esteja alinhado ao centro em relação ao eixo y. Nós fizemos isso. Agora está no centro. Então, a próxima coisa, vou mudar isso para imagem. E para tornar essa imagem responsiva, vou me certificar de que as restrições sejam duas, esquerda e direita. Então, basta selecionar essa imagem , certifique-se de que as restrições estejam à esquerda e à direita. E tentaremos reduzir o tamanho para ver se funciona corretamente ou não. Então você pode ver que nossa imagem também é responsiva e esse texto também é responsivo. Agora você pode ver algum tipo de sobreposição acontecendo entre esse texto e a imagem simplesmente porque o espaço de dados é maior do que o que deveríamos ter usado. E essa é a razão pela qual você está vendo essas coisas. Então é assim que ficaria na minha GoPro de 14 polegadas. Então, no final, você pode simplesmente remover o layout da grade. E é assim que seu site ficaria. 29. (27) Animações e protótipos em Figma: Tudo bem pessoal, agora que todos vocês aprenderam a construir um mini-projeto, vamos ver como podemos criar fluxos interativos usando o Figma. Agora, quando você está criando designs no Figma, é importante que você realmente forneça ao cliente ou usuário o campo de que eles estão realmente usando o software, não apenas a parte do design. Então, precisamos de algumas animações para esses fluxos, certo? Para que o usuário obtenha o campo de que, ok, esse design é interativo. Quando eu clico nesse botão ou talvez quando eu passo o mouse em torno desses alguns elementos, ou quando eu deslizo sobre alguns objetos, eu consigo ver outras coisas. Então é isso que vamos aprender na palestra de hoje. É disso que trata a prototipagem . Então, para isso, o que vou fazer criar uma nova moldura do tamanho do iPhone 14. Então, vamos criar rapidamente algumas coisas básicas. Vou criar um texto dizendo que isso é prototipagem de protocolo de digitação. Vamos tentar alinhar o centro. Tudo bem, com relação ao meu eixo x, não eixo y, porque queremos que ele esteja no topo. A próxima etapa que queremos é criar uma caixa retangular simples talvez desse tamanho. E também vamos garantir que esteja alinhado ao centro. Tudo bem? Se você quiser adicionar um traço ou alguma cor, vá em frente, faça isso, mas eu não vou fazer isso. Na última etapa, queremos alguns botões. Então, eu vou dizer que, digamos, clique aqui, clique aqui no botão. E queremos que esse texto tenha alguns, você sabe, 2020 pareça muito menor do que isso. 24 funcionariam muito bem. Então 24, é isso. Vamos adicionar um layout automático a esse texto. Então, clique com o botão direito do mouse em adicionar layout automático. Certifique-se de que temos um pouco de preenchimento neste botão. Então, preenchendo com relação ao meu eixo x, vou dar isso porque, digamos, eu sou Wendy. E eixo y, isso significa de cima para baixo I15. Então, vamos em frente e fazer isso. Vamos também adicionar um pouco de cor a esse botão. Eu poderia acrescentar algo como, digamos, um botão amarelo. Um amarelo mais brilhante. Tudo bem, vamos também adicionar um pouco de traço a isso. Então, vou adicionar um traço e um traço preto. Sim, isso parece bom. E apenas certifique-se de que isso esteja alinhado corretamente. Tudo bem, a próxima etapa, esta é minha única moldura do iPhone 14. Agora, eu quero que sempre que o usuário contornar essa caixa emaranhada em particular, eu queira que a cor dessa caixa retangular mude. Agora, se você está aprendendo desenvolvimento web, você deve estar fazendo isso em CSS, temos os efeitos de passar o mouse, mas queremos realmente exibir esse tipo de coisa no Figma. Então, como podemos fazer isso? Então, para isso, vou selecionar todo o meu quadro. Vou fazer uma cópia dessa moldura. E vou me certificar de que, na moldura de cópia, tenho a cor da caixa retangular que eu realmente quero exibir, digamos, um vermelho brilhante. Então, quando eu passo o mouse sobre essa caixa retangular, quero que a cor da minha caixa retangular mude de cinza para, digamos, vermelho. Então, vamos tentar ver como isso vai acontecer. Para isso. Concentre-se no painel de propriedades do design. Na parte superior, você verá três opções. Projete, prototipe e inspecione. Então, basta ir para o protótipo. Selecione o dispositivo que você está realmente usando. Selecione o objeto no qual você deseja que, se alguma atividade estiver acontecendo nesse elemento específico, a alteração seja mostrada. Então, você pode ver aqui que temos o ícone de adição. Basta arrastar ao redor do quadro onde queremos a alteração desejada. Então, como você pode ver, temos o tipo de ação que esse objeto deve realizar. Então, se eu tocar nessa caixa retangular, então no próximo quadro, que é a votação do iPhone para ser exibida. Se eu arrastar esse objeto, se eu deslizar da esquerda para a direita ou da direita para a esquerda, é assim que minha alteração será mostrada. Se eu passar o mouse ao redor desse objeto, a alteração será mostrada. Então, vamos tentar ver o que acontece se eu tocar no objeto. Então, vou manter isso como está. Eu quero que isso navegue até o meu iPhone, iPhone 14 até o enquadramento. Se todos vocês estiverem usando algum projeto de design existente por lá, talvez também tenham outras molduras. Então, vá até o menu suspenso e certifique-se de selecionar o quadro correto. Depois de fazer isso, você pode ver a guia Animações, diretamente na janela pop-up de detalhes da interação. Você verá a animação. Então, neste momento, ele está selecionado para se dissolver. Inicialmente, ele pode ser selecionado para instantâneo. Isso significa que basta clicar ou tocar nesse ou nesse elemento específico. E B será exibido instantaneamente. Ou não haverá nenhum tipo de efeito especial. Se você quiser mostrar algum tipo de efeito especial, selecione esse menu suspenso e escolha a animação desejada. Então, se eu escolher dissolver, então é assim que nossa animação seria. Se eu selecionar isso muito inteligente, anime. É assim que ficaria. Se eu selecionar entrar , será assim que ficará. Vamos tentar examinar cada animação passando o mouse sobre ela , ou melhor, digitando nessa caixa retangular. Então, depois de selecionar sua animação, seu quadro, seu elemento, todas essas coisas. Basta clicar neste ícone de adição na parte superior. Então você pode simplesmente apresentar. Figma abrirá em uma nova guia e você verá o dispositivo que selecionou. Então, como você pode ver, temos essa votação para iPhone. Depois de clicar nessa caixa retangular, agora você pode ver que estou pairando ao redor dessa caixa retangular. Uma vez que eu clico nessa cor vermelha está sendo mostrada, certo? Isso é o que está acontecendo aqui. Eu posso simplesmente voltar às minhas interações. Eu posso escolher, em vez de tocar para deixar eu passar o mouse, então essa mudança deve ser mostrada. Então, se eu atualizar isso, e uma vez que eu passar o mouse, ou melhor, eu deveria divulgar isso, eu deveria recarregar isso novamente. Agora, se eu passar o mouse sobre essa caixa retangular, você verá a cor vermelha. Quando meu cursor sai da caixa retangular, ele está em seu estado original. Isso é o que realmente significa pairar. Esse é um efeito instantâneo. Deixe-me mudar de instante para, digamos, digamos que eu esteja mudando de instante para dissolver. Agora, você veria como será a animação. A cor se dissolverá do cinza para a leitura. Deixe-me te mostrar. Então, uma vez que eu vou até aqui, você pode ver que a guilhotina é para ler. Se eu mover meu cursor para fora, a cor se dissolve lentamente de volta ao cinza. Isso é o que ele basicamente faz. Agora mesmo. Não fizemos nada com nosso botão. Então, uma vez que eu clico nisso, embora você possa ver alguma mudança de cor acontecendo na caixa retangular, que é uma cor azul clara. Mas isso é basicamente para nos dizer que você não forneceu nenhuma ação a esse elemento. Se você quiser adicionar alguma ação ao seu botão, que é clicar aqui, basta voltar para selecionar seu elemento e arrastá-lo até aqui. E então você pode dizer no toque. E então você pode simplesmente escolher qual animação você gostaria. Digamos que eu queira esse deslizamento. Então você pode fazer isso. Tudo bem? Se você quiser isso, em vez de, você sabe, 300 milissegundos de atraso, gostaria de alterar o atraso para cerca de 100 milissegundos. Então até você pode fazer isso. Agora deslizando de qual direção? Da direita para a esquerda, da esquerda para a direita, de cima para baixo, de baixo para cima , da maneira que melhor lhe convier, você pode selecionar isso e a animação será aplicada. Então, vamos voltar. E podemos selecionar da direita para a esquerda. E vamos tentar executar isso. Agora, se eu passar o mouse em volta da minha caixa retangular, você pode ver as mudanças de cor. E se eu clicar nesse botão? Você pode ver que é assim que a mudança realmente aparece. Então é assim que você contorna essas coisas. Tudo bem? Agora, se você quiser isso, se eu clicar nesse botão e ele voltar ao estado original, você também poderá fazer isso. Basta alterar o texto em vez de Clique aqui para dizer que você também deseja renomear os textos. Hum, digamos que volte. Então, o que você pode fazer, você pode ir Selecionar, voltar. E isso seria apenas selecionar esse botão. Arraste de volta para o quadro anterior. E, melhor dizendo isso seria uma interação. Isso seria uma interação. E também podemos adicionar outra interação. Agora, essa interação é desse botão para o meu estado anterior. Então, na guia, navegue até o iPhone 141. Se você quiser que isso empurre. Você pode até mesmo fazer isso. Agora você também tem a curva. Isso significa que queremos que a animação entre , saia, entre e saia. Agora, se você tem seu próprio CSS, você deve estar ciente de todas as coisas. Não preciso me repetir. Essas são apenas uma maneira de você realmente representar sua animação. Tudo bem? Portanto, também há outra maneira de apresentar sua animação. E o que é animação? Basicamente, a animação é basicamente uma forma de representar suas imagens. O que é vídeo? Vídeo é basicamente imagens, você sabe, toneladas de imagens renderizadas em um segundo exibidas na tela, o que dá a ilusão que isso é realmente um vídeo. O vídeo nada mais é do que um grupo de imagens, grupo de imagens em movimento, como uma moldura em que uma pessoa está aqui. No segundo quadro, a pessoa está aqui, depois aqui. Quando essas três imagens são combinadas e são mostradas a uma velocidade específica, você realmente tem a ilusão de que a pessoa está realmente caminhando a uma distância, a distância b. Então, essa é a sua animação. Basicamente. É apenas contornar as imagens e você está tentando descobrir qual deve ser a curvatura da minha animação? Você quer que seja uma animação linear? A flexibilização acabou e todas essas coisas. Assim, você pode selecionar o que funciona melhor para você. Então, vou manter as coisas simples. Selecionarei o que selecionei até agora e executarei meu protótipo. Então, se eu voltar, você pode ver, eu posso voltar ao meu quadro anterior. Se eu passar o mouse, você verá que eu obtenho o vermelho, eu obtenho essa cor vermelha e também recebo uma caixa de texto diferente. Se eu clicar, você verá é assim que a animação aparece. Então é assim que você contorna suas animações e faz prototipagem no Figma. 30. Wireframing em Figma: Tudo bem pessoal, agora é hora de entendermos o que é wireframing e design de UI UX. Wireframe é um esboço digital de um design. Então, como designer de UI ou UX, você precisa criar wireframes para que os clientes ou sua empresa, ou talvez seus colegas, possam visualizar suas ideias rapidamente. Portanto, o wireframe representa apenas o panorama geral de uma ideia, e é muito importante que você saiba se deseja criar algum site ou aplicativo. Portanto, em geral, wireframe não tem nenhum elemento de estilo. Quando você tenta criar um aplicativo ou um site, você simplesmente não entra diretamente no estilo de design. isquemia vocal usará que tipo de topografia, que tipo de família de fontes e todas essas coisas. Não, essa não é a primeira coisa que você aborda. A primeira coisa é criar um wireframe. Wireframe contém basicamente todo o conteúdo, parte do conteúdo que basicamente você abordará nessa página da web ou naquela seção específica do seu aplicativo. Então, isso é o que seu wireframe basicamente significa. Para dar um exemplo. Durante toda esta palestra, vamos criar um wireframe do aplicativo Instagram. Então, quando você realmente acessa o Instagram e olha o perfil de qualquer um dos seus amigos, basta selecionar qualquer uma das fotos e encontrará o nome de usuário na parte superior. Você encontrará a localização. Se a pessoa marcou o local, a imagem em si, o ícone, o ícone do perfil do usuário. Em seguida, abaixo da imagem, você verá o nome de usuário, o comentário a legenda, os ícones como se você fosse comentar, enviar, salvar e tudo mais. Então, antes de entrarmos diretamente, descobrimos que tipo de família de fontes vamos usar, que tipo de esquema de cores vamos usar. Primeiro, tentamos visualizar a parte do conteúdo onde exatamente queremos que a imagem seja colocada. Se queremos que seja centralizado, se queremos um pouco de preenchimento, se queremos algum tipo de alinhamento diferente. Onde meu nome de usuário deve ser mostrado? Na parte superior, na parte inferior, onde deve ser mostrado. Tudo bem, então temos outros ícones e Instagram, como os reais do ícone de pesquisa de ícones da sua página inicial. Depois, há um, sei lá, quais são os ícones que temos? Temos nosso próprio ícone de foto de perfil , onde ele nos levaria ao nosso perfil. Depois, há um vazamento ou um ícone de feedback, eu acho que é. Então você tem outras coisas. Você também tem as imagens do carrossel e o Instagram, então você pode simplesmente deslizar e, no canto superior esquerdo, no canto superior direito, desculpe, você veria isso em quantas imagens, em qual imagem específica você está. Então, digamos que a pessoa que você está realmente estocando no Instagram postou três fotos no guarda-sol. Então você pode simplesmente deslizar e ir para o primeiro, segundo e terceiro. E ele será exibido na seção superior direita e assim por diante. Então é isso que vamos fazer nesta palestra. Então, vamos criar rapidamente uma moldura do tamanho do iPhone 14. E a próxima etapa, o que vou fazer é ampliar isso para que todos possam ver 75% da aparência. Na próxima etapa, sempre que você estiver tentando criar qualquer design ou estrutura de arame, é importante usar grades. Então, vamos adicionar uma grade de layout. Agora vamos mudar isso do sistema de rede para o sistema RO. Agora, por que filmar e não ligar para eles? Simplesmente porque estamos criando um aplicativo móvel. Agora, quando estamos lidando com aplicativos móveis, não temos muita umidade. Temos muita altura. Então, quando estamos lidando com muita altura, lidamos com linhas. Quando temos muita umidade, lidamos com muitas colunas. Então é com isso que vamos lidar. Então, basta selecionar linhas, selecionar bem, contagens de linhas. E cada celular tem sua própria barra de notificação, certo? Onde mostraria o tempo, a porcentagem de bateria, serviço da operadora que eles estão usando a rede, a força da rede. E na parte inferior da seção móvel, tela móvel, você veria a página inicial e os ícones do Gerenciador de Tarefas. Então, queremos algum tipo de margem por esse motivo. Então, vamos deixar cerca de 50 pixels de margem. E o tamanho da sarjeta parece justo para mim. Então, vou deixar isso em 20 pixels e vou fechar isso e vamos manter isso como está. Agora, na próxima etapa, vamos usar esse ponto na maior parte inferior aqui , onde estou passando o cursor. Nessa parte, queremos os ícones de navegação. Então, vamos criar rapidamente uma caixa retangular exatamente desse tamanho. Então, vou apenas criar uma caixa retangular. E vou me certificar de que a largura também corresponda à grade do layout. E esse é o próximo passo. Vamos garantir que tenhamos quantos acres a casa procura, a verdadeira Saigon, acho que há um ícone nítido, eu acredito. E a última é sua própria foto de perfil. Então, cinco, posso dizer que exigem. Tudo bem, então, para isso, o que vou fazer, vou usar meu incrível plugin de fontes. Portanto, se você não tem nenhum ícone que esteja procurando no plugin Font Awesome, basta usar a ferramenta Pen para criar seu próprio ícone. Mas maioria dos casos, você não encontrará nenhum ícone que não esteja disponível neste plugin específico. Então, vamos procurar quem eu puder e eu vou procurá-lo. E aqui você pode ver o ícone Início. Então, vamos trazer esse ícone aqui. Onde está meu ícone? Para onde estou indo exatamente? Eu posso descobrir isso. Onde está meu Eigen? Tudo bem, então foi entregue aqui. Vamos mover isso. Na próxima etapa, queremos o ícone de pesquisa. Vamos trazer nosso ícone de pesquisa. Agora não sei por que está demorando tanto para trazer esse ícone. Então, ícone de pesquisa. Tudo bem, temos nosso ícone de pesquisa. O próximo que queremos. Eu não acho que eles seriam ícone do Reels e esse Font Awesome. Então, em vez disso, podemos usar o ícone da cerca. Então, tornaríamos algo real assim. Você pode simplesmente digitar filme. Podemos usar esse ícone por enquanto. Na próxima etapa, queremos itens da loja. Tão afiado. Isso parece bom. Então, usaremos esse ícone, item de loja ou este, esse em particular geralmente é usado no Instagram. Então, vamos deletar este. E para a foto do perfil, usaremos uma forma de círculo para que você não precise se preocupar com isso. Na próxima etapa, os outros ícones que usaríamos são o ícone, o ícone, o ícone de comentário e o ícone de perfume, e também o ícone de salvar. Então, vamos trazer todos os ícones. Agora, adicionei todos os ícones. O próximo passo que vamos fazer é usar todos esses ícones em espaços iguais. Então, basta arrastar essa parte. Tudo bem, vamos arrastar isso. Garante que a largura e altura sejam de 30 pixels por 30 pixels. E isso parece bom. Tudo bem, vamos tentar alinhar esse centro relação ao eixo y, não ao eixo x. Ou desculpe, podemos simplesmente deixá-lo aqui. Tudo bem, na próxima etapa, queremos o ícone de pesquisa. Então, vamos clicar nesse ícone de pesquisa 30 por 30. Basta trazer todos esses ícones e depois tentaremos, então tentaremos realmente posicioná-los a distâncias adequadas. Então 30 T. Então este, novamente, precisa ser 30, 30. Vamos usá-lo aqui. E por último, queremos uma forma circular. Então, vamos usar isso. Ok, 38, 38. Revogue em torno disso. Então não se preocupe com isso. Vamos criar novamente uma elipse do tamanho 30 por 30. E daremos uma cor de preenchimento de talvez um tom mais escuro. Essa sombra parece boa. E garantimos que a distância dessa elipse a esse ponto seja a mesma a partir dessa posição. Então, para fazer isso, o que eu farei, nesse caso, vou segurar minha tecla Shift ou outra. Eu posso simplesmente selecionar todos eles juntos. Esse, esse, esse, esse e esse. E eu posso alinhá-los de forma que ocupem distâncias iguais. Tudo bem, agora, eu posso selecionar 12 coisas inteiras. Opa, eu posso simplesmente selecionar 123, o material inteiro. E basta movê-lo para que fique alinhado verticalmente. Tudo bem, é assim que nossa navegação deve ser, a parte inferior da navegação. Queremos o próximo passo. Na parte superior, queremos o ícone, que é o ícone da seta para trás. O ícone da seta para trás também exigirá isso. Então, vamos trazer esse ícone. Então, podemos dizer Back arrow. Sim, esse é o que eu estava procurando. Vamos colocá-lo aqui. E o próximo passo que queremos é, novamente, 30 por 30. Portanto, certifique-se de que todos os ícones sejam 30 por 30. Esse aqui. Também é 30 por 30. Este também é 30 por 30, 30 por 30, 30 por 30, 30 por 30. Tudo bem, legal. Embora este não pareça muito bom com 30 por 30 , vamos contornar isso. Então não se preocupe com isso. Na próxima etapa, queremos garantir que a imagem se encaixe na maior parte da peça. Tudo bem? Então, hum, você sabe, tem legenda, tem essa legenda, há uma seção de comentários. Veja todos os comentários e a parte da legenda. Então temos a imagem. Então, vamos usar esse para que saibamos que isso tem que acabar. Isso permite que o usuário volte. Tudo bem, então nesta linha, nesta linha, particularmente, bem, certifique-se de que temos o ícone, a foto do perfil, o nome de usuário. Abaixo disso, temos a localização e os três pontos. Eu acredito que seria. Então, deste ponto até talvez, digamos que este ponto, ou talvez este ponto, manteremos nossa imagem. Então, deste ponto para este ponto, deste para o outro. Então, vamos criar uma caixa retangular. Deste ponto até mais ou menos, sobre isso. Não, isso parece bom. Esse parece bom. Então, vamos continuar assim para que saibamos que é disso que estamos falando. Essa é a nossa imagem. Tudo bem, na próxima etapa, queremos que esta linha tenha nosso comentário curtido enviado e esse botão de salvar. Tudo bem, então vamos usar este. Verifique se isso está alinhado corretamente. Este também está devidamente alinhado. Ícone de coração. Selecione o que foi dito aqui. Tudo bem. Certifique-se de selecionar este. Aqui mesmo. Selecione este aqui. Tudo bem? Agora esse parece bom. Tudo bem. Apenas certifique-se de que esteja alinhado ao centro. Então, eu posso simplesmente selecionar este. Ícone de coração. E agora meu ícone de coração também está alinhado corretamente. Coisas legais. Agora, na próxima etapa, queremos o nome da pessoa, o nome da legenda, a legenda e os comentários e todas essas coisas. Então, faremos isso. E no topo aqui, termo V1, o que queremos? Queremos esse termo. Deixe-me copiar isso. Faça uma cópia aqui. Agora, posso configurar para que mostre que estou falando sobre a pessoa. Certo? Tudo bem. A próxima etapa, isso deve estar adequadamente alinhado ao centro. Sim. Vamos dar uma olhada no texto, que é inter, parece bom. Diremos Nome de usuário. O nome de usuário deve estar em negrito. Então, vamos mudar do normal para o semi-negrito. E abaixo desse texto, queremos outro texto, que é a localização. Então, quando falamos sobre tag, marque sua localização. E vamos copiar isso, mudar isso para normal, certo? Sim, isso parece bom. A próxima etapa que queremos é o ícone de três pontos, o ícone Opções. Hum, tentamos encontrar o plugin, se tivermos, ok, não temos opções. Talvez possamos dizer três pontos. Nós temos três pontos, então é isso que vamos usar. Vamos garantir que ele se encaixe corretamente. E também com relação a outros ícones. Está devidamente alinhado. Sim. E apenas certifique-se de que isso também seja 30 por 30. 30 por 30. Oh, opa. Isso tem que ser bloqueado. 30. 30. Ok, isso não parece bom. Vamos tentar usar o tamanho original. Esse parece bom. 30 por 8,7, seja o que for. E garante que essa seja a distância que ela percorre. Tudo bem, legal. Esse wireframe parece muito bom. A próxima etapa, se quisermos que isso tenha, você sabe, vamos manter isso como cor preta. E dentro dessa imagem no canto superior direito. Nesta parte, também criaremos mais uma pequena caixa retangular, que dirá quantas imagens estamos realmente vendo. Então, certifique-se de que essa caixa tenha essa cor. Essa cor, certo? Hum, certifique-se de que ele permaneça nesta linha. Ou melhor, devo dizer que vamos deletar esta caixa de texto e veremos um por 31 por três. Vamos adicionar um layout automático a isso. Depois de adicionarmos o layout automático, garantiremos que o preenchimento de todas as direções esteja apenas 55 de todas essas direções. Ainda assim, é muito grande. Então, vamos fazer esses três. Tudo bem, e vamos dar a isso uma cor de preenchimento. Então preencha uma cor cinza. Sim. Esse parece bom. Se você quiser adicionar algum raio de borda, vá em frente e faça isso. Mas o wireframe próprio exige necessariamente qualquer raio de borda. Então, vamos manter isso como está. Por aqui. Podemos adicionar três pontos novamente apenas para ter certeza de que estamos vendo que se trata de um guarda-sol. Então, podemos simplesmente fazer uma cópia disso. E podemos mudar a cor. Eu posso simplesmente colocá-lo no centro. Apenas certifique-se de que, em vez de preto, temos a cor azul. Só para mostrar que estão usando cortisol. Então, cor azul. E isso parece bom. No final, nós queremos. Aqui podemos dizer Instagram. Você pode usar o Instagram no estilo de fonte. E aqui, o que vamos fazer? Vamos dizer que, em primeiro lugar, teremos isso, certo. Deixe-me alinhar o centro, algo assim. Em seguida, usaremos a caixa de texto. Tudo bem, caixa de texto, curtida por esta parte, verá que essa pessoa gosta dela. E vamos trazer isso para algum lugar aqui. Essa parte. Podemos usar o mesmo texto. Então, basta copiar isso e colocá-lo aqui. Tudo bem. Veja, curtiu pelo nome de usuário e digamos que outros 20, certo? Wendy, outros. Legal. Isso é o que queríamos. Na próxima etapa, queremos a legenda. Então, novamente, vamos usar esse nome de usuário, estilo de fonte, certo? Podemos simplesmente colocar o nome de usuário aqui. Novamente, cópia do texto. Agora, para a legenda, podemos usar o texto Lorem Ipsum. Então, posso dizer hífen da legenda e depois usar o Lorem Ipsum. Então, vou usar apenas o plugin Lorem Ipsum. Então, vamos apenas gerar frases phi. E não avaliou cinco frases. Apenas certifique-se de que seja adequado para ocultar automaticamente essas coisas. Em vez disso, eu deveria dizer isso. Estou apenas diminuindo isso. E eu vou mudar o tamanho disso. Vou mudar o tamanho da minha caixa de texto. Esses sites de caixa de texto precisam ser encurtados. E apenas certifique-se de que ele ocupe a altura automática. Novamente, amplie isso. Algumas dessas coisas podem precisar ser excluídas na parte da legenda. Você pode simplesmente redimensionar essa parte. Você pode colocar a legenda aqui. Vamos deletar essa parte da legenda, essa grande parte. E podemos dizer que leia mais. Leia mais. E também podemos adicionar algumas reticências para ter certeza de que é isso que realmente queremos dizer. Podemos simplesmente selecionar a parte Leia mais. Podemos mudar a cor de preenchimento para cinza, algo parecido com isso. Tudo bem. Leia mais e, na parte inferior, usaremos a seção de comentários. Tudo bem? Então, podemos dizer Exibir todos os comentários do phi. E, por fim, também queremos especificar a data. Tudo bem, então, para isso, o que vou fazer, vamos diminuir o tamanho desses ícones. Acho que 30 por 30 é muito grande. Então, vamos reduzir para 2020. Não, isso seria muito pequeno. 25, no entanto, esses 25 parecem bons. Portanto, certifique-se de que este se encaixe corretamente. Tudo bem, vamos selecionar o material inteiro. Mova-o para algum lugar aqui. E, no final, queremos a data. Então, podemos ver aqui que podemos selecionar a data. Então, digamos que há dois dias. Então, dois dias atrás, algo assim. E é assim que seu wireframe do Instagram pareceria uma réplica exata dele. Quão legal é isso? No final, você pode simplesmente selecionar sua moldura. Você pode simplesmente remover a grade. E é assim que seu wireframe do Instagram realmente se parece. E antes de realmente terminarmos esta palestra, gostaria de acrescentar algumas outras coisas que eu acho que poderiam fazer algumas mudanças. Isso seria adicionar algumas linhas horizontais. Então, basta selecionar todas essas coisas. Por favor, sente-se em algum lugar aqui. Tudo bem. Agora, vamos adicionar uma linha, apenas uma linha simples, que divide essa seção. Tudo bem? Uma linha horizontal simples. Apenas certifique-se de que a cor do traço seja cinza. Essa cor. Tudo bem, por favor, sente-se em algum lugar por aqui. Tudo bem, vamos fazer uma cópia disso. E onde vamos colá-lo? Aqui mesmo. Tudo bem. Em algum lugar aqui. E mais um, que diria, que ficaria feliz em ouvir aquele deserto. É assim que seu Instagram. Deixe-me reduzir o zoom para que você possa ver corretamente. E é assim que seu wireframe do Instagram realmente seria. 31. (30) Exportando arquivos em Figma: Tudo bem, pessoal, agora que aprendemos a criar wireframes para nosso design, vamos também ver como podemos exportá-los em diferentes formatos e qual formato usar especialmente para nosso caso de uso. Então, vou selecionar minha moldura sempre que você quiser exportar qualquer um dos seus designs, apenas certifique-se de selecionar a moldura inteira. Então, basta selecionar isso. E no painel de propriedades de design, basta rolar para baixo até a maior parte inferior, onde você encontrará a exportação. Inicialmente. Seria assim. Então, basta clicar no ícone de adição e você encontrará o método de exportação. Agora, existem diferentes formatos nos quais você pode exportar seu arquivo de design Figma. Agora, isso é PNG, JPEG, SVG e PDF. Agora, o que realmente significa P&G? Por que devo exportar meu design em formato PNG? Então, PNG significa gráficos de rede portáteis. É um formato de imagem bitmap usado geralmente para transferir imagens via Internet. Então, não entre em detalhes sobre o que é PNG, o que é esse formato de bitmap? Basta entender que é um formato de arquivo sem perdas, o que significa que a qualidade da imagem não é reduzida sempre que a imagem é compactada. Tudo bem, então se eu tentasse enviar um arquivo PNG por e-mail, digamos, e todos vocês soubessem que existe um limite, há um limite de tamanho para os arquivos que apenas cerca de 25 mega, 25 MB de arquivo podem ser enviados usando seu Gmail ou qualquer provedor de serviços de e-mail que você está usando. Então, nesse caso, a P&G entra em cena porque você pode reduzir o tamanho do arquivo e a qualidade não será reduzida. Portanto, a P&G faz um bom uso quando você deseja compartilhar seus arquivos na Internet. Em segundo lugar, vem o formato JPEG. Jpeg significa Joint Photographic group. Agora, quando você compacta essa imagem de grupo fotográfico conjunto, isso resulta em um tamanho de arquivo menor, mas também reduz a qualidade da imagem. Portanto, não é a maneira ideal de realmente compartilhar seus arquivos JPEG via Internet. Geralmente, o que acontece é que, se você tiver um arquivo, arquivo JPEG, digamos que tenha cerca de um megabyte em seu sistema. E você está tentando enviar isso usando algum software de mensagens instantâneas ou aplicativo de mensagens instantâneas que você está usando. Algo como, digamos, WhatsApp. Portanto, se você enviar qualquer arquivo, há chances de o WhatsApp geralmente reduzir ou compactar o tamanho do arquivo para facilitar a transmissão de dados. Então, nesse caso, se você estiver enviando arquivos JPEG, os arquivos serão compactados e o receptor receberá uma imagem de baixa qualidade, e você não quer que isso aconteça. Portanto, os JPEGs geralmente são usados quando você deseja imprimir todo o design ou sempre que estiver usando para fins fotográficos. Portanto, use PNG quando quiser enviar os arquivos pela internet, use JPEG quando realmente quiser imprimir algumas coisas. Depois vem o formato SVG. Agora, SVG é na verdade seus gráficos vetoriais escaláveis. Agora, os gráficos não estão vinculados a nenhuma resolução específica. Como esse quadro em particular poderia ter 1920 por 20 pixels de largura, mas os SVGs não estão vinculados a nenhuma resolução específica. É um gráfico vetorial baseado em XML, o que significa que você pode tornar qualquer elemento grande ou pequeno sem perder sua clareza. Agora, quando você deve realmente usar SVG? Então, digamos que você esteja tentando criar qualquer novo ícone usando o Figma. Então, nesse caso, SVG se torna um ótimo uso y. Então, quando você passa esse formato SVG para um desenvolvedor de front-end, quando o desenvolvedor de front-end está realmente codificando essas coisas, digamos HTML ou react. Então, nesse momento, quando o desenvolvedor quer usar seu ícone, formato SVG se torna um ótimo caso de uso porque SVG é muito leve e não tem nenhuma resolução específica. E, no final, temos o formato PDF. O PDF é bastante popular porque não requer nenhum hardware ou software específico para ser executado em nenhum sistema. Pdf basicamente significa formato documentado de jarro. Então, geralmente usamos PDFs para compartilhar nossos ativos, que salvamos no Figma. E eu estou aqui. Você também pode ver que temos diferentes opções de escala quando x 1x2x, você pode estar se perguntando o que isso significa? Então, geralmente, ele foi definido como um x por padrão. Se eu selecionar x, a qualidade será duplicada. Se eu selecionar dois para x, a qualidade será mais alta, mas o tamanho do arquivo também será grande. Então, se eu tentar baixar isso, deixe-me exportar esse quadro do iPhone 14 para x e depois para o formato PNG. Então vou mostrar isso na pasta. E deixe-me mostrar isso a você. Quanto arquivo ele ocupa? Tamanho do arquivo. Portanto, cerca de 100.103 kb de espaço estão sendo ocupados. Deixe-me mostrar como é a imagem. Então, essa é a aparência real da imagem e essa é uma forma imprópria de realmente enviar qualquer arquivo de nosso interesse. Então é assim que você realmente contorna. Você está exportando sistemas sempre que quiser, na verdade, envia seus arquivos para seus clientes e talvez colegas e coisas assim. Então, nesse caso, você usa esses diferentes formatos de arquivo.