Fundamentos da Figma: uma introdução ao design de IU

1. Apresentação: Olá pessoal, Meu nome é Peter e bem-vindos à aula. Então, indo direto ao assunto, se você quer dominar alguma coisa na vida, é muito importante ter seus fundamentos claros. E é exatamente isso que estamos fazendo neste vídeo em particular, aprendendo os fundamentos do Figma. Então, nesta aula, vamos começar do mínimo para criar uma conta Figma. Em seguida, queremos explorar a interface do Pigma, onde detalhamos a seção de camadas desta semana, minhas ferramentas, o painel de propriedades, tudo com alguns exemplos relevantes. Finalmente, vamos finalizar limitando todo o conhecimento que adquirimos ao criar uma landing page permanente. Então, pessoal, até o final desta aula em particular, vocês terão uma ideia clara sobre o que é Figma e qual é o potencial do Figma. E haverá 100% de confiança para criar um design básico usando o Figma. Portanto, esta é uma visão geral de alto nível do que essas aulas em particular, e há muito mais sobre essa classe em particular que o próximo corpo estava perguntando. Então, muito obrigado por assistir e eu realmente espero ver vocês no próximo vídeo. 2. Introdução com a Figma: Então pessoal, neste vídeo e veja como podemos começar com o Figma. É assim que podemos criar uma conta no Figma. Portanto, este vídeo é para iniciantes que ainda não têm uma conta no Figma. Então, se você já tem uma conta, provavelmente posso pular esse vídeo em particular. Então, para criar uma conta no Figma, novamente, acesse o URL www dot figment are cool, que o levará diretamente a este lindo site em particular. Portanto, essa é uma vantagem muito informativa e bem construída. Eu sugiro que vocês dêem uma olhada neste site em particular, ver o que torna o Figma único. Quais são as diferentes características e muito mais. Portanto, se você já tem uma conta, pode acessar diretamente o login e fazer login usando suas credenciais. Então, se você não tiver uma conta, você pode clicar em Começar novamente, digitar um e-mail, senha, criar uma conta, verificar a mesma coisa e pronto, ou então, para facilitar as coisas, você pode se inscrever diretamente no Google. Então, essa é a parte de criação da conta. Então, agora vou fazer o login pois já tenho uma conta. Então pessoal, agora estamos no painel do Figma e, como vocês podem ver, temos alguns projetos nos quais estou trabalhando. Você também pode criar um novo arquivo de design aqui. você também pode importar um arquivo existente de outras ferramentas. Então, no momento, estamos basicamente acessando Figma por meio de seu aplicativo web e todos os outros dados são basicamente armazenados na nuvem e nada está sendo levado para o armazenamento local de sua máquina. Assim, você também pode obter o Figma e o aplicativo de desktop. Você pode clicar no logotipo do anúncio aqui e clicar em obter aplicativo de desktop para baixar o Figma também em sua máquina local. Portanto, esse é o painel básico. Então, vamos clicar no novo arquivo de design para criar um novo arquivo. Então pessoal, isso é figma tem interfase. Portanto, não se preocupe se você não entender o que são as coisas, basicamente nos aprofundaremos em cada uma das diferentes seções nos próximos vídeos. Então, tudo o que eu quis dizer neste vídeo em particular é que, se você é um iniciante absoluto, eu só queria orientá-lo a começar a usar o Figma, criar uma conta, dar uma olhada no painel e criar um novo projeto. Então, isso é tudo sobre esse vídeo em particular. Muito obrigado por assistir, e vejo vocês no próximo vídeo. 3. Visão geral da interface figma: Então pessoal, neste vídeo, vou te dar uma interface ou visão do Figma. Então, no vídeo anterior, criamos um novo projeto. E como você pode ver, a interface do usuário do Figma é bem simples e também é muito fácil de entender. E depois morrer na cara é dividido principalmente em quatro seções diferentes. À esquerda, aqui você pode ver a seção da camada. Então, sempre que você adiciona um objeto ou imagem, todas essas coisas podem ser organizadas na forma de camadas, aqui na seção esquerda. Na verdade, você pode ver toda a estrutura do seu projeto apenas observando a seção da camada. Então, isso é sobre a última seção. E no topo, aqui você pode ver a seção de ferramentas. E o Figma, comparativamente, tem menos ferramentas. Mas todas essas ferramentas são mais do que suficientes para criar basicamente qualquer tipo de design. E essa é a beleza de Figma. As coisas são bem simples, mas você tem uma quantidade suficiente de ferramentas e recursos para basicamente converter sua ideia em um design adequado. E na parte inferior aqui você pode ver a tela. Resumindo, este é um lugar onde basicamente construímos o design. E à direita, aqui você pode ver a seção de configurações ou a seção de propriedades. É aqui que basicamente personalizamos um objeto individualmente. Portanto, esta seção é novamente dividida em design, protótipo e inspeção. Mas provavelmente ficaremos apenas com a seção de design. Então, pessoal, esta é basicamente uma visão geral de alto nível do Figma individual. Nos próximos vídeos, analisaremos cada seção e nos aprofundaremos em seus recursos, enquanto eles dicas e truques diferentes, melhores práticas e tudo isso nos próximos vídeos. Então é isso para este vídeo, e vejo vocês no próximo vídeo. 4. Ferramentas figma: Então, pessoal, neste vídeo, vamos dar uma olhada nas diferentes ferramentas que o estigma oferece. Vamos entender o que são e quais são as diferentes funcionalidades que oferecem. O primeiro que posso escrever aqui na seção de ferramentas é basicamente o menu principal , que oferece uma antipatia funcional básica uma bela visão feminina. A coisa típica que podemos ver em qualquer tipo de site. A próxima ferramenta aqui é basicamente passar para a ferramenta de movimentação, como o nome sugere, é usada basicamente para mover coisas e a tela. Então, por exemplo, se eu tiver uma estrutura de símbolo aqui na tela, posso usar a ferramenta de movimentação para movê-la pela tela. Então, isso é sobre a ferramenta Move. E também pegamos essa ferramenta de escala. Então, qual é a diferença entre o Move Tool e o Scale Tool? Falaremos sobre outra diferença ou teste em um segundo. Então, a próxima ferramenta aqui é basicamente a moldura A ferramenta Frame é uma das ferramentas mais importantes aqui no Figma. Então, no momento em que clico na moldura em direção à seção de configurações, vejo novamente muitas delas sangramentos, como a da moldura da lâmina para telefone, tablet e desktop, ou então você também pode criar uma moldura de tamanho personalizado aqui. Então, podemos ver que temos uma moldura aqui na tela. Portanto, o iframe pode ser considerado como um documento separado, sobre o qual basicamente será construído nosso design. Então aqui eu posso clicar nessa bobina nos quatro cantos, qualquer que caia do canto. E eu vou clicar, redimensionar e decidir, digamos uma. O que eu usaria aqui para alterar os eixos x e y é a largura e a altura aqui a partir das configurações que elas podem aspirar. Portanto, se eu quiser um modelo predefinido, posso selecionar novamente os óleos da moldura. Posso usar o atalho F. E posso selecionar qualquer desativado para o modelo predefinido. E isso estará diretamente no meu Canvas. Então, isso diz respeito à ferramenta de moldura. Então, sempre que estivermos interessados em nosso design, basicamente o projetaremos para um desktop, celular ou tablet. Nesse caso, eles são predefinidos. Os modelos são molduras predefinidas que são úteis. Então é isso mesmo, a ferramenta de moldura. E também temos uma fatia dois. Então, deixe-me explicar a ferramenta Slice com a ajuda de um exemplo. Então, deixe-me colá-lo. Então, aqui temos um pequeno design simples aqui. Então, eu já selecionei uma ferramenta de fatia e vou definir essa seção específica aqui. Eu basicamente usei essa parte específica do design e eles podem basicamente ver você na direção aqui. E se eu clicar em Exportar e selecionar Visualizar aqui, você poderá ver que os mouses FIC só exportarão a área que eu cortei. Portanto, se eu alterar essa fatia, localize-a novamente para que a visualização seja alterada de forma correspondente. Portanto, se quisermos exportar apenas uma parte específica do design, é aí que os slides são úteis. Eu posso definir a área que eu quero exportar. E, novamente, venha aqui para clicar em visualizar e explorar a parte correspondente. Então, isso diz respeito à ferramenta Slice. E agora vamos para o terceiro da lista. Essas são as formas. E acho que mais oferece formas como retângulos, linhas, adultos, elipse, polígono , estrela e muitas coisas diferentes. E todos esses são designs autoexplicativos que eu quero selecionar e posso simplesmente arrastá-los para a tela e eles estão dentro. E sempre que eu basicamente adiciono um objeto, por exemplo, um retângulo aqui, você pode ver essas bordas de Coyer, que são usadas para redimensionar nós ou ter círculos dentro delas, que basicamente são usadas para que basicamente são usadas para fazer todo o raio, ou seja, um raio de borda. Eu posso movê-lo para dentro ou para fora. Da mesma forma , basicamente aumentará ou diminuirá o raio da borda. Então, isso é tudo. E aqui na terceira ferramenta, também reproduzimos uma imagem. Então, quando eu clico nela, eu basicamente pedi para selecionar uma imagem. Quando eles selecionam uma imagem, outra tecla, arraste-a até aqui. Portanto, sempre que você dimensiona a média, a imagem correspondente também é redimensionada de forma correspondente para alinhá-la. Então isso é uma coisa legal. Então, quando eu a altero, também podemos ver a música sendo alterada para a mesma. Então, aqui novamente, eu posso mudar o tamanho da imagem. Além disso, é o raio da fronteira. E se eu selecionar a imagem aqui mesmo nas configurações, novamente, clicarei na imagem e farei algumas correções básicas de cores ou também algumas edições básicas para a mídia. Também posso escolher uma imagem. Eu posso substituir a imagem. Todas essas coisas também podem ser feitas aqui. Então, isso se refere à ferramenta Place Image. Pode ser útil quando você trabalha com sites nos quais deseja mudar de curso, fazer algo básico imediatamente. Em todos esses cenários, a ferramenta Place Image é útil. Agora, ainda não conseguimos. A ferramenta caneta, como o nome sugere, também é bastante autoexplicativa. Ele é usado basicamente para criar alguns designs personalizados. Você pode fazer um design que a Sigma não oferece por padrão usando a ferramenta de caneta. E também temos a ferramenta de dobra que é usada para criar bordas mais nítidas e curvadas. Clique nele e isso criará uma curvatura. E também temos uma alça com a qual você pode basicamente alinhar o ângulo da curva. Então, se eu clicar no círculo novamente, ele voltará à estrutura anterior. Isso diz respeito à ferramenta caneta e à ferramenta Caneta aqui. E também temos um balde de tinta para papai. Assim, posso selecionar uma área e atribuir uma cor a ela. Então, tudo isso vai para o balde de tinta. Além da ferramenta de caneta, também temos o lápis e, como o nome sugere, ele ajuda em algumas coisas gerais no Canvas. Tudo bem, e deixe-me selecioná-lo. E vamos excluí-lo. E também temos r d x2, que eu posso selecionar a ferramenta de texto, clicar em um ponto na tela e novamente indireto. Então, aqui eu posso selecionar o texto e aqui mesmo nas configurações, posso personalizar uma parede de coisas relacionadas ao texto. Eu posso mudar o tipo de texto. Ouvimos muitos tipos de texto diferentes telefones que vêm pré-instalados com o Figma. E também posso adicionar algumas fontes personalizadas. Então, vou adicionar Poppins. Aqui, posso selecionar os diferentes parâmetros em negrito. Vou colocar aquele negrito extra que também altera o tamanho dos textos. Muitas coisas podem ser feitas aqui. Então, aqui você pode ver que temos nossos diferentes parâmetros, como eixo x , eixo y, largura, altura, todas essas coisas também podem ser alteradas. E também sempre que, quando escrevemos isso assim, posso pressionar Alt no meu teclado. Nos casos em que as janelas são opções no Mac, isso mudará o cursor para um controle deslizante. Isso, e eu posso deslizar o valor para a esquerda ou para a direita para aumentar ou diminuir o tamanho. Por exemplo, eu posso selecionar o texto e chego ao seletor de tamanho aqui, vou pressionar a tecla Opção no meu teclado. E, novamente, arraste para a direita ou para a esquerda para aumentar ou diminuir o tamanho do texto. Este é um pequeno atalho simbólico que, novamente, é o Rumba para que ele possa alterar esses valores de uma forma muito mais rápida. Então, isso é em relação ao texto. Agora, vamos dar uma olhada em qual é a diferença entre a ferramenta Move e a ferramenta de escala, que ainda não discutimos. Então, se eu selecionar a escala aqui, novamente, basicamente dimensionar o texto e o texto dentro de outro conteúdo dentro dele também será dimensionado junto com ele. Mas no caso da ferramenta de movimentação, isso não acontecerá nem fará a próxima área seja redimensionada. Agora, os textos dentro dele em um para aumentar o tamanho do texto junto com o de suas bordas ou área, posso usar a ferramenta de escala. Você também pode ver que o tamanho padrão também corresponde à Grécia. Então essa é a diferença entre a ferramenta Move Tool, Scale. Aqui eu tenho papai e ferramenta, que normalmente são usados para mover coisas. E também temos os recursos Like, nos quais você pode acessar componentes, plug-ins e todas essas coisas. E também temos o comentário muito leve aqui. Portanto, a dupla comum basicamente é mais útil quando você está trabalhando em equipe, especialmente com várias pessoas, você pode adicionar um comentário, por exemplo, se quiser uma pessoa específica, mas mudar a cor do texto, você pode clicar no texto. Depois de selecionar a ferramenta comum, posso simplesmente adicionar mudanças bruscas, cor do texto e placenta. Então aqui você pode ver que meu nome basicamente vem aqui. Então, quando outra pessoa se conecta a esse mesmo projeto específico, você pode ver meu comando aqui e responder a ele e, basicamente, resolver o comentário. Então, sim, isso em relação à ferramenta comum, então essas são algumas das ferramentas que a Figma oferece. Então, como você pode ver, essas ferramentas estão no nosso número de aula, mas são mais do que suficientes para basicamente converter uma ideia em um design. Essa é uma visão geral bastante básica das diferentes ferramentas que o Figma oferece. Então, espero que vocês tenham uma compreensão básica das diferentes ferramentas e quais são as diferentes funcionalidades que cada ferramenta faz. Então, isso é tudo para esse vídeo em particular, e vejo vocês no próximo vídeo. 5. Visão geral do painel de propriedades: Então pessoal, neste vídeo, vamos dar uma olhada na seção de propriedades do papai em Figma. Então, imediatamente, quero criar uma moldura na tela. Então, para isso, vou usar o atalho que é pressionar a tecla F no teclado. E eu vou arrastar uma pequena moldura simples Model Canvas. Tudo bem? E também posso mudar a cor da tela para que você possa distinguir entre a tela e a moldura em si. E depois disso, também vou adicionar uma elipse. Então eu posso clicar nele e adicionar uma elipse. Ou eu posso usar o atalho que é 0. E deixe-me desenhar uma elipse. Então, apenas uma dica rápida para você. Como você pode ver agora, as elipses estão basicamente sendo expandidas, compradas na largura e na altura. Ou seja, é uma espécie de objeto de fluxo livre. Portanto, para obter uma elipse perfeita ou basicamente alterar a altura e a largura simultaneamente, posso pressionar a tecla Shift no teclado. E se eu arrastá-lo agora, tanto a largura quanto a altura estariam basicamente ligadas e se expandiriam na mesma proporção. Então essa é uma pequena dica para você. E agora eu posso usar as linhas orientadoras para alinhar esse objeto em particular e o centro da moldura. E deixe-me também mudar a cor da elipse. Agora temos um pequeno desenho na tela. Então, no momento em que clico nessa elipse específica aqui nas configurações da propriedade. Já ouvi muitas configurações que posso alterar para esse objeto específico no cão. Aqui você pode ver as diferentes ferramentas de alinhamento, como alinhar, à esquerda, alinhar , centralizar, alinhar à direita, alinhar sob a parte superior e todas essas coisas. Portanto, isso pode ser útil se você quiser alinhar um objeto específico em uma posição específica dentro das três luzes. Agora eu não aprendi isso de volta ao centro. E logo abaixo temos nossas configurações que podem nos ajudar a mudar a posição do objeto. Por exemplo, I. Pode alterar a posição em termos do eixo x e do eixo y. Também podemos inserir valores manualmente aqui. E aqui, posso aumentar ou diminuir a largura e a altura. Então, agora, a largura e a altura estão vinculadas , como você pode ver com essa proporção de restrição específica. Portanto, se eu desmarcar, a largura e a altura podem ser alteradas individualmente ou terão impacto individual. Como você pode ver agora. Aqui eu posso basicamente girar o objeto. Então, como é basicamente uma elipse, já que temos uma largura e altura diferentes. Agora você pode ver que, na verdade, há alguma rotação acontecendo aqui quando também passamos o mouse sobre eles. Você pode ver um pequeno ponto aqui. Então esse é o arco. Então, se eu clicar nele, posso basicamente especificar um arco. Novamente, basicamente clique e arraste para que eu também possa fornecer um valor aqui. Portanto, isso pode ser muito útil, especialmente quando estamos fazendo gráficos circulares e tudo mais. Isso pode ser muito útil. E também temos algumas outras ferramentas que podem nos ajudar a criar um arco preciso. Então é isso, isso é em relação à ferramenta Arc. E logo abaixo disso, também temos restrições. Então, como você pode ver agora, a restrição está definida tanto na parte superior quanto na esquerda. Você pode ver uma pequena linha na parte superior quanto na esquerda. Então, se eu selecionar a moldura e sair da direita cá, você verá que basicamente nada acontece. Mas quando tentei mover a moldura da esquerda aqui, você pode ver que o objeto está fixo no canto superior esquerdo, ou seja, no canto superior e esquerdo. No entanto, eu mudo a moldura, o objeto será fixado no canto superior esquerdo, por exemplo, se eu selecionar o objeto e se eu mudar a restrição para centro, centro, centro e centro. Então você verá que, mesmo que eu mude, a moldura ficará fixa ou solta e muito livre. Então, isso diz respeito às restrições. Portanto, a restrição basicamente é muito útil, especialmente em termos de web design responsivo quando queremos especificar como um objeto deve ser colocado, em que ordem. Nesse tipo de cenário, as restrições desempenham um papel muito importante. Ao clicar neste botão, os glicanos e os referidos óleos restritivos podem clicar e basicamente definir a restrição necessária. Isso diz respeito à seção de restrições. Então, seguindo em frente, aqui, não conseguimos preencher a seção. Então, se você clicar na seção de preenchimento, basicamente pode mudar a cor do objeto. Basicamente, posso mudar de sólido ou fazer várias outras opções que temos para linear aqui, onde você pode especificar a cor do gradiente linear que queremos. Nós também, novamente, a anatomizamos. Aqui também temos algumas configurações básicas , são incríveis. Ferramentas básicas ou de edição de imagens também. Sim. Muitas opções diferentes também estão disponíveis aqui. E aqui também podemos especificar a cor em diferentes unidades, como hexadecimal, RGB. Também existem várias opções para especificar a cor do registro possível. E aqui você pode especificar a opacidade da cor. Então, aqui também posso usar a função antiga para aumentar ou diminuir a opacidade. E eu também posso ganhar cada vez mais. Logo abaixo, eu tenho essa opção de ações. Então, se eu clicar em mais, um traço será adicionado aqui, eu posso mudar a cor do traçado, por exemplo, se eu quiser algum tipo de traço verde, posso adicioná-lo aqui. Em vez disso, posso especificar onde quero o traçado, insights e dados ou externos. Aqui eu posso especificar a espessura do traçado, posso aumentá-lo ou diminuí-lo. E também posso adicionar vários traços clicando na ideia do ícone de adição. E aqui, se eu clicar nos três pontos, posso basicamente selecionar o estilo de estoque. Se eu quisesse sólido ou áspero. Ou eu posso especificar a lacuna tracejada. Eu posso especificar a junção. Se eu preciso que seja nítido, bom humor. Muitas opções também estão disponíveis aqui na opção de ações. Então, isso é tudo sobre a seção de caminhões. Então, deixe-me removê-lo. E logo abaixo, aqui temos a seção de efeitos. Então, vou clicar no ícone de adição. E, por padrão, no outono teremos a sombra projetada. Agora mesmo. Se olharmos mais de perto, teremos uma leve sombra aqui. Então, se eu clicar nesse ícone específico aqui, terei mais opções para personalizar a sombra. Então, novamente, especifique o eixo x. Novamente, especifique o eixo y, como um aumento ou diminuição do sangue. E aqui também posso especificar a cor. Então, ou eu posso especificar manualmente a cor que eu quero para o público. Aqui você pode clicar em Agora, esta ferramenta de caneta específica. Ou você também pode pressionar o atalho do teclado, ou seja, i. E você pode ver que agora temos a ferramenta de caneta. E aqui você pode escolher a cor inocente que quiser e obter uma cor perfeita em pixels. Então, agora ele tem eletrodos, objetos específicos. Então, estamos tendo a mesma chance desse uso sutil ministrado que ele vendeu. Portanto, reduza as listas de classificação para desfocar um pouco, aumente o eixo x e o eixo y. E também aumenta. Mas essas personalizações incríveis e tão pequenas que, novamente, também devem aprimorar as sombras. Também temos outras opções se você clicar na seta suspensa, como nossa camada de sombra interna, desfocada, desfoque de fundo e opções diferentes, e escolher novamente. Então, isso diz respeito à seção Efeitos. E, finalmente, chegamos à seção de exportação. Então, quando a selecionarmos aqui e aqui novamente, especifique o tamanho que está deslocando até x. Por exemplo se sua imagem ou o StartIndex de design, se você selecionar x, será uma zona de conforto quatro vezes maior que a do tamanho original. Então, isso diz respeito aos critérios de seleção do site. E aqui você pode selecionar todo o formato no qual deseja exportar. E ele também pode ter uma pequena prévia de como o design vai ficar. E você pode clicar em Exportar e ele será baixado. Então, obrigado pessoal. Isso é basicamente tudo sobre a interface do Figma. Espero que vocês uma ideia básica sobre coisas de esposa, coisas selvagens para usar onde as coisas estão e uma ideia geral que possa ajudá-lo a navegar em sua própria Figma de uma maneira confortável. Então é isso aí, pessoal. E vejo vocês no próximo vídeo. 6. Projetando uma landing page: Então pessoal, nos vídeos anteriores vimos o que é Figma. Quais são as diferentes ferramentas que o surf oferece, onde podemos acessá-las e o que elas fazem. Mas ainda não fizemos nada prático. Então, neste vídeo em particular, vamos colocar todo o conhecimento que adquirimos em uso prático. Meu prédio, uma landing page como essa. Então, neste vídeo, vamos construir essa praia de pouso em particular. Portanto, todos os ativos usados neste vídeo específico serão listados na seção de projetos e recursos. Você pode acessar isso de lá. Então, se tivermos mais tempo, vamos começar a construir esse projeto em particular. Então pessoal, eu já criei um novo projeto aqui. Então, o primeiro passo é basicamente criar uma moldura para isso. Vou pressionar o atalho F no meu teclado para selecionar a ferramenta de moldura. E eu vou desenhar uma moldura ou minha tela. E depois disso, vou para as configurações de Propriedades e vou alterar a largura e a altura. A largura será 2560 e a altura será um quarto para zero. Então, esse é o tamanho em que vamos trabalhar. Tudo bem. Deixe-me alinhá-lo em direção ao centro. E agora vamos selecionar a moldura e mudar sua cor de fundo. Então, aqui eu vou entrar na seção de campo e vamos selecioná-la. Aqui. Vou usar um gradiente linear. Então, vou mudar isso de sólido para linear. E deixe-me também ajustar a alça aqui. Tudo bem. Agora vamos selecionar a primeira alça, que é a alça da esquerda. E vou mudar a cor para escura novamente e selecionarei a alça certa. E eu vou fazer isso aqui mesmo. E vou aumentar a opacidade para máxima ou clara e liberais, ou apenas um controle deslizante. Agora estamos tendo um fundo de gradiente linear. E deixe-me também ir um pouco mais para a direita. Agora está parecendo bom. Agora, o que vou fazer é basicamente adicionar um objeto retangular à direita dessa árvore em particular. Então, para isso, vou pressionar Alt no meu teclado para selecionar a ferramenta retangular. E eu vou basicamente desenhar um retângulo por dólar aqui. Novamente, vou selecionar o retângulo e ir para uma seção diferente aqui. E eu quero mudar o fundo por radial. E, novamente, quero deixá-lo um pouco mais escuro. Selecione a alça superior. Vou deixar este escuro e o outro um pouco claro. Ajuste um pouco a alça, a posição. Tudo bem. E também fazemos alguns pequenos ajustes aqui. Deixe-me pegar um pouco mais de luz. Agora isso está parecendo bom. Então, agora fizemos um gradiente radial aqui em direção à seção direita da moldura. E agora é hora de basicamente adicionar algumas imagens. Aqui. Eu já adicionei algumas imagens aqui. Então, obter esse tipo de imagem, é muito fácil. Na verdade, existe uma extensão. Então, no momento, estou em um funcionário da Logitech. Repita. Então, essas são as imagens que usamos desse vídeo em particular, mas você não pode clicar com o botão direito do mouse diretamente salvá-las e usá-las, ou ele realmente não funcionará com sigma. Então, aqui podemos basicamente fazer uso de uma exposição chamada As fat can batch already meet. Portanto, se eu selecionar essa extensão específica, posso selecionar o aplicativo atual. Ou seja, se eu clicar nela, essa extensão agora exibirá todas as imagens apresentadas nesta página da web em particular. Assim, ele pode clicar diretamente e baixá-los no formato PT PNG. Portanto, essa é uma ferramenta útil que você pode usar para baixar algumas imagens de alta qualidade de sites oficiais como este onde as imagens do produto são de alta qualidade. Então essa é uma pequena dica para você. Agora, vamos basicamente adicionar os principais elementos da tela. Isso é uma espécie de moldura. Essa é a imagem principal do herói. Coloque-o aqui. Certo? Observe também que adicione essas imagens à direita da imagem do herói. O fundo parece um pouco mais claro, então deixe-me deixá-lo um pouco mais escuro. E isso parece bom. Eu vou colocá-los aqui mesmo. Então, para diminuí-lo. Então, agora basicamente adicionamos o meio e nosso agrupamento. Então, agora, se dermos uma olhada em nosso projeto finalizado aqui, você pode ver que estamos tendo um lindo anel ao redor desse mouse em particular. Então, agora vamos criar esse efeito específico. Então, para isso, deixe-me ampliar um pouco. E vou colocar todos nós no meu teclado para selecionar a ferramenta de elipse. E eu vou desenhar uma elipse assim. Deixe-me colocá-lo aqui. Agora eu quero ir para a seção de campo e vou remover o preenchimento daqui. Agora, para isso, quero adicionar um traço e aumentar a espessura para dois. E eu vou selecionar a cor para ser uma cor acinzentada aqui. E eu quero mudar o plano de fundo ou o tipo de traçado dois lineares. Deixe-me fazer alguns pequenos ajustes aqui. Torne-o um pouco mais brilhante. E eu quero girá-lo assim e deixar isso, ou apenas sua posição, para que fique bem. Então, vamos fazer alguns pequenos ajustes. Vamos torná-lo um pouco menor. Tudo bem, parece muito bom. Brinque com o gradiente linear para torná-lo um pouco mais realista. Tudo bem. Então, agora criamos nosso defeito mouse, que já é conhecido, que parece muito bom. Agora, terminamos com isso. Agora vamos também criar todos esses links agora ruins por lá. Vou pressionar T no meu teclado e deixar eu clicar aqui. Então, o primeiro ali é meio que pisar aqui. E vou selecionar as fraldas padrão para alterar o tamanho da fonte para 24. E também quero mudar a cor do telefone para esse valor específico. Agora, o que vou fazer é pressionar e segurar a tecla Alt no teclado e clicar e arrastar. E isso vai fazer uma cópia exata desse texto em particular. E o próximo byte exclui loja suporte comercial da loja. Neste momento, vamos sinalizar o alcance adequado desses links. Portanto, é muito útil colocar essas diretrizes. Esses elementos estão na posição correta com espaçamento adequado ou consistente. Certo? Agora, adicionamos os links de navegação. Vamos também aumentá-lo um pouco mais. E outra coisa que eu faço é dizer que a loja muda sua cor para branco. Então, é como se estivéssemos na versão beta curta agora. Portanto, os links de navegação estão bem. Vamos selecioná-lo e nos mover um pouco para a direita. E também vamos criar outra cópia dela. Nima é adequado. E vamos criar outra cópia. O logotipo do Windows. Aqui eu tenho dois ícones. É copiado e colado aqui. Certo? Sim, eles também estão bem lá. Então, deixe-me também ajustar um pouco a posição deles. Tudo bem, eles estão procurando uma definição agora. Eles estão meio que parecendo um pouco estranhos. Eles não estão perfeitamente alinhados. Então, deixe-me selecioná-los e alinhá-los. Parece bem plano. Nose também adiciona o logotipo aqui. Produto. E, em seguida, traga-os levemente para a direita. Agora, eles estão muito bem. Na verdade, fizemos a barra de navegação superior, bem como um login de pesquisa, bem como o logotipo. E agora é hora de basicamente adicionar o conteúdo do texto aqui para isso novamente. E então a mais B, digitando MX Master três. E então eu sou selecionado e vou mudar a capa do telefone para maiúscula. E também vou aumentar nosso tamanho de fonte em 200. E também quero mudar a ousadia para ousada. E então sente-se aqui. Novamente, quero clicar nesse texto específico enquanto pressiono Alt, vou fazer uma cópia. Faz um CD de mixagem. Então, para usar o tamanho para 30, vou transformar uma ousadia deformada regular e vou aumentar o espaçamento entre letras. Vou colocá-lo logo acima do principal saudável. Tudo bem, agora, vamos também adicionar essa descrição básica específica sobre o produto. Então, novamente, até mesmo um positivo, a tecla D no teclado. E vamos colar aqui. Aqui. herdamos o estilo do projeto anterior. Então, tudo o que fizemos foi mudar a cor do texto. Vamos colar isso aqui. Agora, o que precisamos é da parte de revisão. Então, novamente, acrescente a tecla de atalho de texto que é T e, em seguida, digite mais de 50 avaliações. Também precisamos adicionar algumas estrelas. Então, deixe-me ampliar um pouco a partir da seção de formas ou selecionar ou da Ferramenta Estrela. E eu vou adicionar essa escuridão e eles se tornarão equipes. É bom para 30 ou Lockett. Em primeiro lugar, não quero mudar a largura para 35, certo? E vamos criar uma cópia. Então, vou esperar algumas vezes para fazer cinco dessas doses. Vamos abrir algum espaço aqui. E eu quero selecionar a última estrela e deixá-la um pouco escura para que destacar que esse produto em particular tem uma classificação de quatro estrelas. E deixe-me selecioná-los agrupá-los e colocá-los aqui. Agora, vamos criar essa seção de preços específica, bem como o botão Adicionar ao carrinho. Portanto, o desejado na seção de preços, ou seja, dólar 99,999 aumentará o tamanho para colocá-lo aqui. Além disso, vamos adicionar esse retângulo aqui. E vou adicionar um texto que é para proteger. Deixe-me reduzir seu tamanho. Então eu quero uma equipe com essa cor específica de retângulos com uma cor escura. Quero mudar a cor do texto para branco. Também diminuímos a profundidade. E também vamos fazer as bordas arredondadas. Certo? Agora, vamos delinear esse texto em particular perfeitamente no centro desse botão específico, para que eu selecione os dois e selecione os centros verticais de alinhamento. E isso alinhará perfeitamente esse texto em particular em direção ao centro desse elemento retangular específico. E deixe-me também agrupá-los. E vamos colocá-lo aqui. Isso também parece muito bom. Então, aqui você pode ver que o fundo parece um pouco vazio ou errado. É por isso que adicionei esse M específico que faz uma espécie de sobreposição de texto que preenche o vazio do plano de fundo. Então, agora vamos adicionar isso aqui também. Para isso, vou adicionar um texto que é M max. E vamos aumentar o tamanho para 200, ou talvez até mais do que isso. E deixe-me colocá-lo aqui. Eu quero mudar o bolo para negrito. E vou pressionar o colchete de abertura para trazê-lo para trás aqui. E eu vou selecionar o texto e remover o preenchimento daqui. E eu quero adicionar um traço e a cor do traço ficará alerta um pouco brilhante. Na Grécia. A espessura para dois. Deixe-me reduzir um pouco a opacidade. E isso tornará perfeitamente o plano de fundo um pouco mais rico. Deixe-me selecionar isso e trazê-lo para o topo. Vamos falar um pouco sobre ele. Agora, isso está realmente parecendo muito bom. Aqui. Eu acho que isso está parecendo um pouco brilhante. Então, novamente, essa pode ser a profundidade. Novamente, acho que o fundo precisa estar um pouco mais escuro à direita. Então, vamos trazê-lo com mais escuridão. Agora isso parece muito bom. Quase imitamos todo o protótipo em nosso projeto. Aqui você pode ver que estamos fazendo uma diferenciação entre a esquerda e a direita. Para isso, vamos selecionar a moldura, ir para a seção de campo e selecionar a mão esquerda e aumentar um pouco a luminosidade da cor. E isso vai trazer uma diferenciação aqui. Então é isso aí, pessoal. Então, este foi um pequeno tutorial ou um exemplo prático de como podemos basicamente dar vida a um design. Então, espero que vocês tenham aprendido algo com esse vídeo em particular. Então, como eu já disse, todos os recursos que estão disponíveis ou todos os ativos que estão disponíveis na seção de projetos e recursos, você pode acessá-los a partir daí. Então é isso aí pessoal, obrigado, muito Y2 e vejo vocês no próximo vídeo. 7. Conclusão: É isso aí, pessoal. Você chegou ao fim do copo fundamental feminino. E isso mostra o quanto você é apaixonado pelo design da interface do usuário. E eu realmente espero ter conseguido oferecer o valor que procurávamos e, por favor, compartilhem na seção de resenhas o que vocês acham da aula? Então é isso aí, pessoal, até nos encontrarmos novamente com outro pigmento incrível ou a aprovação respiratória dorsal de Johnson.