Web design no Figma — crie como um desenvolvedor, gere código com IA

1. Apresentação: Olá e bem-vindo a esta aula sobre Figma Web Design para desenvolvedores web. Sou Christopher Dodd Sou um desenvolvedor web freelance e excelente professor aqui no skillshare.com, cobrindo tudo sobre desenvolvimento web e Na aula de hoje, abordaremos o Figma não como os designers tradicionais, mas do ponto de vista dos desenvolvedores web Se você é um desenvolvedor que quer aprender design, mas também se preocupa com uma estrutura limpa, resposta e com a gerar código utilizável, essa aula é para Abordaremos os fundamentos do trabalho com a Figma, como configurar layouts responsivos usando componentes de layout automático Em seguida, daremos um passo adiante, usando ferramentas baseadas em IA, como Locofy e Cursor, para transformar nossos designs diretamente em Ao final desta aula, você não apenas se sentirá confortável criando designs Figma, mas também terá um fluxo de trabalho que a lacuna entre design e desenvolvimento, tornando-o um desenvolvedor web mais eficiente e versátil Então, se você estiver pronto para aprender a criar designs como um desenvolvedor Figma, clique no próximo vídeo e nos vemos por dentro 2. Demonstração: Tudo bem, então aqui eu tenho a versão web do programa Figma Figma é um programa que você pode executar no seu computador ou diretamente no seu navegador Atualmente, estou no Google Chrome e esta é a versão web. Mas mais tarde na aula, vamos baixar o programa de desktop porque vamos usar o servidor MCP No próximo vídeo, mostrarei o básico do FGMA e mostrarei o programa um pouco melhor Primeiro, quero começar a aula com uma demonstração, que demonstra a premissa de toda essa Está bem? Então, aqui, temos um design para um site de comércio eletrônico É chamado Dog Box. Eu descobri isso por meio de um anúncio de emprego no Upwork. Então, como você pode ver aqui, é uma espécie de caixa de assinatura para cães. Parece muito legal. Nós damos uma olhada no arquivo Figma. Mesmo que você nunca tenha usado o Figma antes, quero que clique neste quadro ou me veja clicar nesse quadro e depois dê uma olhada aqui no painel de camadas Aqui você pode ver vários grupos com números aleatórios depois deles. E então, dentro desses grupos, temos outros grupos com números aleatórios abaixo, e temos diferentes molduras, vetores, todo tipo de coisas. É uma bagunça gigante, ok? Agora, os designers configurarão seus designs dessa forma porque, visualmente , fica ótimo. E desde que tenha uma ótima aparência visual e eles possam mostrar esse design para as pessoas, ele não precisa necessariamente ser configurado para que faça sentido vê-lo no painel de camadas Mas a razão pela qual vamos fazer isso forma diferente nesta aula é dupla Número um, na verdade, não podemos redimensionar isso como faríamos com uma página da web real, como você pode ver aqui, algumas delas são meio responsivas, mas Eu realmente desmorono estamos expandindo e contratando coisas que não são muito importantes, porque este é um programa de design Na verdade, não é um programa de desenvolvimento web. O maior motivo pelo qual estou propondo que configuremos nossos arquivos Figma de forma diferente é para que possamos gerar automaticamente nosso código usando IA de forma mais precisa e confiável Então, só para dar uma olhada mais sobre esse design aqui, como você pode ver, se eu clicar em qualquer lugar desta seção, temos um grupo gigante que se estende para fora da moldura. Temos outro grupo que se estende para fora do quadro aqui. Este parece ter um ninho muito bom. Por exemplo, o que quero dizer com isso é que os itens que estão visualmente dentro do grupo estão, na verdade, aninhados na camada É uma boa ideia, como você pode ver aqui. Mas não há rotulagem e não há uso ou muito pouco uso do layout automático. Está bem? Então, agora deixe-me mostrar o inverso. Deixe-me mostrar a versão refratada que eu criei. Não é exatamente o mesmo, mas na verdade está configurado com rotulagem adequada das seções. Ele é dividido em seções individuais que se acumulam umas sobre as outras Se o layout automático for usado em todos os lugares, faz sentido. Então, aqui você pode ver o cabeçalho aqui dentro do cabeçalho, temos o lado esquerdo do cabeçalho, o menu do cabeçalho e o lado direito, e então temos as diferentes coisas aninhadas lá dentro E o que você também pode ver é esse ícone aqui, que indica o layout automático. Agora, não vou entrar no layout automático e em todas as coisas diferentes sobre o Figma Esse é o tópico da aula que abordaremos. Mas, como você pode ver aqui, isso tem muito mais estrutura nas camadas do que, digamos, aqui, o design original. E se eu redimensionar qualquer uma dessas seções, você verá que ela acaba sendo muito mais responsiva porque usa layout automático, que é essencialmente equivalente ao Flexbox Embora haja uma opção aqui para grade, que é quase equivalente à grade. Agora, como mencionado anteriormente, na versão refratada, se eu configurar todas as camadas para usar uma estrutura de contêiner responsiva adequada usando componentes, que aprenderemos um pouco Então, elementos que são duplicados várias vezes são essencialmente componentes Se eu me encaixar corretamente e usar o layout automático , devemos obter um resultado muito melhor ferramentas de IA como, como você pode ver aqui, Locifi Está bem? Então, notei que obtemos resultados muito inconsistentes toda vez que passamos por Locifi Então, vou mostrar uma solução diferente mais tarde na aula que acho que funciona melhor. Mas, por enquanto, vamos dar uma olhada nos resultados de um teste anterior que fiz usando o Locifi Então, se mudarmos para este gráfico aqui, você pode ver os resultados de um teste anterior que fiz com esse design de caixa de cachorro. Então, se dermos uma olhada no design original, obviamente, isso parece ótimo. Esse é o design original. Fica ótimo com infigma Acabei de copiar e colar a aparência diretamente neste gráfico Em seguida, criei uma página da web gerada por IA desse design Figma usando Locifi e esse é o resultado Então, como você pode ver, ele realmente começa a se decompor nas cartas. Você pode ver aqui que acabou de estragar tudo e as cartas aqui também E algumas partes ficaram bem, mas sim, não foi o melhor resultado. Refatorei a página da web e a executei por meio do Loci fi AI Eu obtive um resultado muito melhor, especialmente nas cartas. Obviamente, esse não é o Eva perfeito, mas em termos do HTML de saída que obtive, foi muito melhor. E desde que tenhamos um HTML sólido para trabalhar, fazer pequenas atualizações no CSS não é tão ruim. Mas se o programa de IA entender o HTML completamente errado, isso basicamente cria um projeto que eu tenho que refatorar completamente de qualquer maneira, então eu poderia muito bem não ter usado a IA para começar Essa é a inspiração para a aula, apresentando uma maneira de criar nossos designs Figma como um desenvolvedor web com estrutura adequada para que sejam responsivos, mais fáceis de navegar dentro do próprio programa FiGMA e mais traduzíveis em código real usando geradores de código de IA como o Locifi AI, que veremos Por enquanto, vamos dar um passo atrás e dar uma olhada no básico de como realmente usar o FiGMA 3. Noções básicas de Figma: Tudo bem, agora você pode ver que estamos de volta ao Figma, mas temos um design completamente vazio Ainda nem tem nome. Então, vamos clicar em Sem título e dar um nome a ele, digamos, design de teste, como você quiser chamá-lo E sem entrar nos detalhes extremos de tudo o que é Figma, eu só quero abordar o básico absoluto Na verdade, é um programa bem simples. Depois de conhecer alguns recursos principais e, para os recursos mais avançados, há muitos outros tutoriais on-line. É fácil adquirir essas habilidades avançadas um pouco mais tarde. Mas, basicamente, o que temos aqui é que temos nosso arquivo Figma aqui e podemos criar várias páginas aqui Não vemos diferença, mas se eu fosse desenhar um retângulo na primeira página, passe para a página dois Não podemos ver esse retângulo em nenhum lugar, mesmo se ampliarmos para 50% ou ampliarmos, você verá que está em uma página diferente Ok, bastante autoexplicativo, mas normalmente os web designers não separam as páginas da web em páginas diferentes no Figma Eles normalmente colocam tudo em uma página aqui para que ele possa ver, eu acho, a consistência do design em várias páginas. Então, em vez de criar uma página, o que os designers normalmente fazem é começar com um quadro. Então, se eu clicar neste botão aqui embaixo para ver o quadro, posso ver aqui que já temos alguns quadros predefinidos para desktop, se quisermos fazer desktop. Então, vamos fazer desktop. Vou clicar na área de trabalho aqui e ele nos dará um quadro de 14 40 por 1024 Essa é a moldura padrão que a Figma decidiu para nós no desktop E então você normalmente verá uma moldura móvel ao lado dela. Então, se formos ao telefone, e o tamanho típico que vejo com mais frequência é 390, você pode colocar uma tela 390 aqui Então você pode criar seu layout para celular aqui e seu layout para desktop aqui. Ok, então eu vou me livrar da moldura móvel. Nós realmente não precisamos dessa multa. Vamos nos concentrar apenas em um quadro. A moldura é a mãe de tudo. Na verdade, isso não é necessariamente verdade. Podemos criar uma seção, e isso é apenas algo que nos permite basicamente agrupar certos quadros. Mas, novamente, se eu usar esse exemplo de criação de uma moldura para o design do iPhone aqui, talvez possamos dizer que esta é a página inicial, colocar a descrição de qual página é como seção e, em seguida, podemos ter nossos diferentes quadros aqui com base na largura da tela dessa página, ok? Talvez eu deixe isso aí. Então, com o que mais temos que trabalhar? Então, temos formas aqui embaixo que podemos adicionar, se quisermos adicionar certas formas, eu acho que podemos desenhar essas formas. Portanto, essas são boas ferramentas de design se você é um pouco designer gráfico e deseja criar ícones e outras coisas. Obviamente, nosso site provavelmente terá texto. Então, poderíamos colocar algum texto aqui. Então, à direita, você pode ver, temos um monte de configurações, e se eu rolar para baixo, podemos ver a tipografia Então, vou aumentar o tamanho da fonte desse texto e depois vou digitar, não sei. Digamos apenas o título, certo? Agora, um designer normalmente coloca isso no meio usando essas linhas orientadoras, como você pode ver aqui E como temos uma tela fixa aqui, podemos atestar que ela sempre estará no meio Poderíamos trazer algumas imagens. Normalmente, você pode ver um banner com imagem de fundo em um site, então vamos trazer uma imagem. Como você pode ver aqui, eu tenho uma pasta aqui que vamos usar um pouco mais tarde. Vamos configurá-lo da maneira que eu recomendo. Mas, por enquanto, vamos colocar a imagem, colocá-la e clicar e arrastá-la, você sabe, nós mesmos para preencher o espaço do contêiner. Basicamente, a forma como funciona com a ordenação visual é que a imagem do herói será mostrada acima do título porque está acima do título no painel de camadas Então, só precisamos trocá-los e você verá o título aparecer Talvez queiramos mudar a cor desse título, obviamente, porque ele está sobre um fundo um pouco escuro, então podemos clicar aqui, dar um fundo branco e torná-lo maior. Novamente, posicione isso, certifique-se de que esteja na posição ali. Vamos digitar algo um pouco mais realista. O principal vestuário esportivo. Você pode ver aqui que, quando não estamos usando layouts flexíveis, precisamos redimensionar isso e decidir onde queremos nossas quebras Vou definir o alinhamento para que fique no meio, e vamos colocar assim Novamente, faremos esse design corretamente mais tarde. Estou apenas mostrando o básico absoluto. Podemos trazer uma imagem, podemos trazer texto. E, claro, vou usar intensamente o layout automático neste curso Mas, como mencionei antes, maioria dos designers não usa muito disso. Há uma área que eles usam muito, que é para botões. E então eu vou usar o botão para demonstrar. Então, vamos digitar o botão aqui. E se quiséssemos dar a esse botão uma cor de fundo, poderíamos ficar tentados a colocar um retângulo Agora, obviamente, temos que mudar o posicionamento vertical aqui, e então temos que fazer com que fique no meio. Está bem? Lá vamos nós. Agora, para fazer com que pareça mais um botão, podemos dar a ele mais um raio de canto, r. Mas o problema com isso é que, se alterarmos o texto do botão dessa forma, você verá que esses são dois elementos diferentes que não estão vinculados r. Mas o problema com isso é que, se alterarmos o texto do botão dessa forma, você verá que esses são dois elementos diferentes que não estão vinculados e estão fora dos limites desse Então teríamos que, você sabe, redimensionar isso novamente e posicioná-lo assim Tudo bem? Então, a maioria dos designers que encontro usa layout automático com botões Esse conceito se aplica em qualquer lugar do design do Figma, mas, por algum motivo, ele só é realmente usado em botões Então, em vez de colocar esse retângulo aqui como um elemento separado, o que podemos fazer é adicionar layout automático ao Podemos adicionar layout automático. De algumas maneiras diferentes, podemos clicar com o botão direito do mouse e clicar em Adicionar layout automático Ou podemos usar esse atalho de teclado. Eu gosto de usar o atalho do teclado, então vou pressionar Shift A, e agora, se olharmos aqui, ele estará aninhado dentro desse quadro Então, vou renomear esse botão de quadro porque gosto de usar a nomenclatura adequada E então, se clicarmos nesse layout automático, que é pai do texto, posso adicionar um preenchimento a esse layout automático Então, vamos até aqui e torná-la, digamos, vermelha. OK. Agora, como esse é um elemento de layout automático, se eu aumentar o texto do botão, você verá a caixa se expandir para cobrir o Então, é claro, posso adicionar esse quarto de raio novamente. O que eu tinha? Cinco pixels Também posso aumentar o preenchimento aqui Então, essa não é uma cor muito realista. Deixe-me mudar essa cor, vamos lá, talvez como um cinza aqui. Tudo bem? E então esse texto, se eu quiser realmente mudar o texto, eu preciso clicar no texto em si, e então vamos torná-lo 36. E então o que eu posso fazer é pegar o elemento do botão de layout automático aqui, e então eu poderia posicioná-lo aqui, certo? Para o design móvel, posso fazer algo semelhante. Posso trazer a imagem do herói para celular e depois arrastar manualmente. Aqui, obviamente, as dimensões não se alinham. Então, o que eu poderia fazer é clicar duas vezes sobre isso e configurá-lo para recortar. Depois, posso simplesmente ir até os limites do meu design móvel, o que farei agora. E então vamos copiar e colar esse texto aqui. Obviamente, meu ninho está fora de controle aqui. Eu tenho o texto e a imagem sobre a moldura, não realmente nela. Então, podemos realmente escapar impunes dessa Figma. Obviamente, não estou recomendando isso nesta aula, mas o Figma permite que você obtenha visualmente o resultado que está procurando sem realmente organizar seu projeto muito Então, o que vou fazer é trazer isso para o topo e depois aninhar arrastando assim, o texto e a imagem, ok? Então, pelo menos, está aninhado lá dentro. Se eu quiser mudar o texto para ficar um pouco menor, coloque-o lá. Então eu posso trazer uma cópia do meu botão. Eu posso manter pressionada a opção no Mac. Não tenho certeza do que está no Windows e, em seguida, posso clicar para trazer uma versão disso. Mas, obviamente, o tamanho do texto para a versão móvel é muito grande, então vamos reduzi-lo para 12. Na verdade, acho que precisamos de no mínimo 16 aqui. OK. OK. Então, como eu disse, um programa bem simples. Obviamente, existem alguns recursos avançados, mas você pode simplesmente clicar e arrastar as coisas para onde quiser na página. O básico do Figma não é tão difícil de entender, A maior habilidade é realmente descobrir as fontes certas para usar, os tamanhos de fonte certos, as imagens certas. Não é a ferramenta de design em si que é complicada, mas o design em si, ok? Então, essa ferramenta, Figma, simplifica ao máximo, e é por isso que essa ferramenta se tornou a ferramenta de web design mais popular do mercado atualmente Podemos simplesmente continuar a organizar nossos projetos dessa forma, mas, como mostrei, não respondemos de forma alguma Então, se realmente quisermos que isso seja organizado para facilitar o uso, mas, o mais importante, torná-lo traduzível para a web, precisaremos adotar uma abordagem um pouco mais estruturada E é isso que vamos abordar no próximo vídeo. 4. Crie como um desenvolvedor - Parte 1: Tudo bem, então, só para recapitular onde estamos até agora, começamos com uma demonstração de como os web designs normalmente aparecem nessa estrutura de grupos aleatórios, sem rótulos, sem muito uso E eu mostrei a alternativa, que é estruturar nossas seções como se fôssemos uma página da web com nomes adequados e muito uso do layout automático Então eu mostrei o básico do Figma, e acabamos de montar uma seção realmente básica de heróis em um site de comércio eletrônico. Eu me especializo em comércio eletrônico, então, basicamente, todo site que eu crio é de comércio eletrônico Então, vou continuar com esse exemplo e vamos realmente construir da maneira que mostrei neste primeiro exemplo com a versão refatorada, ok Então, vamos começar exatamente da mesma maneira. Vamos criar uma seção. Essa seção é opcional. Mas vou criar uma seção e vou chamar a seção de página inicial. OK. E então eu vou colocar minhas duas molduras lá. Então, eu vou fazer um quadro para desktop. Como você pode ver aqui, posso selecionar entre esses chicotes e alturas predeterminados E, obviamente, nossa seção não é grande o suficiente para acomodar esse design de desktop. Então, vou clicar e arrastar isso para cima, e depois coloco um design móvel também. Não gosto de 430 Eu vou com 390, então eu vou aqui. E vou simplesmente renomear esses quadros. Este será para desktop e este será móvel. OK. Então, aqui você pode ver, tanto visualmente quanto em nosso painel de camadas aqui, que temos um projeto bem organizado até agora. Vamos garantir que ele permaneça organizado à medida que criamos esse design. Como demonstrei no primeiro vídeo, a forma como vou criar meus designs no Figma é baseada em como os sites são realmente construídos no mundo real e são construídos com contêineres responsivos Para sair do Figma por um segundo e dar uma olhada em um exemplo muito básico na web ou apenas em uma página de HTML e CSS que criei pouco antes deste vídeo, você pode ver aqui que eu tenho um contêiner responsivo Obviamente, as cores e tudo mais não são ideais, mas só para mostrar os limites de nossos diferentes contêineres, se eu pressionasse a Opção Command I e usasse isso para redimensionar minha tela, posso ver aqui que em um tamanho de tela maior, há uma margem igual à esquerda e à direita desse contêiner E então, se reduzirmos a tamanhos de tela menores, esse espaço diminui até o contêiner ocupe toda a E se eu usar telas menores, essas caixas se dividirão em novas linhas porque estão flexionadas e estão usando uma caixa flexível Então, normalmente no desenvolvimento web, temos contêineres que têm Max Whips e temos elementos flexíveis Então é nisso que vou me concentrar ao criar meu design de figma E, como mencionei anteriormente, podemos criar algo semelhante ao CSS Flexbox usando o layout automático E também podemos, dentro de qualquer elemento ou quadro, definir um máximo com. Então, se eu for até aqui para fazer o layout do meu desktop aqui, posso realmente clicar nesse botão para transformar todo esse quadro em layout automático E agora eu tenho todas essas opções que são muito parecidas com o CSS Flex Assim, você pode ver a direção da flexão. Você pode ver o alinhamento aqui. Você pode ver a lacuna, que é exatamente a mesma em CSS. Você também pode ver essas divisas aparecerem em WIP e altura. Então, eu posso clicar nesses Chevrons e adicionar um chicote mi e um chicote Max, e também posso escolher a moldura e abraçar o conteúdo Isso não faz sentido, neste caso. Você normalmente usa abraço na altura. Mas o que você pode fazer é criar outro quadro e colocá-lo dentro da área de trabalho aqui, e então eu também transformar esse quadro em um quadro de layout automático Eu posso clicar novamente neste Chevron e você pode ver que eu posso clicar para encher o contêiner, o que significa que o WIP preencherá o espaço disponível de seu pai, que é essa moldura de desktop, que é essa moldura de desktop Se eu adicionar outro quadro aqui, ele os colocará lado a lado, e isso porque aqui eu defini a direção flexível ou ela não é chamada de direção flexível na Figma, mas o fluxo, como é conhecido no layout automático da Figma, ainda está na layout automático da Figma Então, para a página em si, quero defini-la como vertical, e então você pode ver que podemos colocar seções em camadas na página. E se eu simplesmente duplicasse pressionando Command D para criar um terceiro quadro, você pode ver que acumula em cima do outro, e se eu criar outro, você verá aqui que ele sai das dimensões do nosso quadro aqui, o que eu quero fazer é ir até as alturas e mudar isso para o conteúdo do abraço Portanto, agora o design do nosso desktop será tão grande quanto o conteúdo contido nele. Então, se eu excluir o último quadro, você verá que agora ele remove esse espaço extra, ok? Então, a estrutura que vou usar é que temos nossa página geral aqui e, em seguida, temos seções aninhadas nela, ok? Então, vou ligar para essa seção. Vamos excluir o outro e depois duplicá-lo depois de construirmos nossa estrutura Quero que minha seção estenda o chicote completo, como você pode ver aqui, para encher o recipiente Agora eu quero colocar meu contêiner de chicote de páginas dentro. Então, neste, é bem apertado porque eu estou gravando esta aula em um chicote de janela menor Portanto, esse contêiner tem 1.000 pixels de largura, o que é bem apertado. Normalmente, você teria um contêiner pelo menos 1.200 Vamos colocar outra moldura aqui dentro, e eu vou chamar esse contêiner, certo? Então, dentro desse contêiner, o que podemos fazer também é definir isso para layout automático Você verá que vou configurar quase tudo para o layout automático E então eu vou configurar isso para encher o recipiente. Então, agora ele vai preencher, vamos ampliar um pouco, o espaço disponível. Também vou clicar no Chevron novamente e adicionar uma largura máxima. Então, vou definir isso para 1.200. Tudo bem Mas agora você pode ver que nosso contêiner está à esquerda. Então, você só quer ir até a seção e atualizar o alinhamento para ficar no centro Então, vamos fazer isso e depois voltar para o nosso contêiner, e você pode ver que nosso contêiner está agora no meio. Na verdade, posso fazer com que seja uma cor diferente para demonstrar isso um pouco melhor para vocês. Então, vou deixar a seção vermelha e o recipiente azul. Obviamente, não vamos manter isso, mas apenas para realmente mostrar isso, e você também pode ver aqui o preenchimento Então, há um pouco de vermelho vindo acima e abaixo da seção azul, e há um pouco de branco aparecendo na seção Queremos ser muito intencionais com o preenchimento. Não queremos que o preenchimento seja apenas o padrão. Então, na própria página, o layout da área de trabalho, vou remover o preenchimento em ambos os lados A ideia é fazer com que a seção se estenda por toda a largura e que a página tenha a largura e que a página tenha um monte de seções empilhadas umas sobre as outras, para que não queiramos nenhum preenchimento ao redor da página E então, se eu descer para a seção, não quero nenhum preenchimento na superior e inferior, então vou removê-lo Agora, o que eu deveria ser capaz de ver é que, se eu redimensionar meu quadro, podemos ver um efeito semelhante ao que tivemos em nosso HTML Como você pode ver, se eu chegar a um tamanho de tela maior, como 1.500, meu conteúdo, que estará contido no meu contêiner, ainda terá 1.200 pixels, certo Mas se eu descer abaixo de 1.200 ou perto dele, você pode ver que o contêiner agora é tão grande quanto a própria moldura menos o preenchimento da seção Então, queremos um pouco de preenchimento em ambos os lados e também queremos padronizar isso. Então, vou mostrar algo que você deve usar no desenvolvimento web e que também pode ser usado no Figma, que são variáveis Vou clicar fora do meu quadro aqui e você pode ver aqui as variáveis. Tudo bem Então eu clico aqui para criar uma nova variável, e vamos inserir algumas medidas aqui, então vamos selecionar o número. E, como você pode ver, podemos organizar nossas variáveis em coleções diferentes. O nome padrão da nossa primeira coleção é coleção um. Então, vou renomear isso para dimensionamento. Também podemos criar outra coleção posteriormente para cores. Qualquer outra coisa que possamos imaginar que possamos armazenar dentro de uma variável. E vou criar uma variável para page With ou container Whip, você quiser chamá-la, e vamos marcar nossa largura de contêiner de 1.200 Agora, fechando isso, quando eu voltar para meu contêiner aqui, posso voltar para o Max WIP. Clique aqui, clique no Chevron ao lado do Max Whip e clique em Agora você pode ver que posso selecionar Page Whip. E agora, se eu, em qualquer outro momento, voltar e mudar minha variável, digamos, mude-a para 1.000. Veja que isso acontece em qualquer lugar em que estamos usando esse valor. Então ele continua escondendo isso, mas você pode ver aqui agora que o valor é 1.000. Então, no momento, estamos usando isso apenas em um lugar, o que significa que isso é redundante neste estágio Mas quando começamos a construir muitos contêineres, isso é muito útil porque nos permite alterar o contêiner posteriormente Então, por exemplo, só para dar uma demonstração de como perfurar aquela casa, se fôssemos criar outra seção com outro contêiner, obviamente, queremos que esses tamanhos de contêineres sejam consistentes. Entrei aqui e o troquei uma vez por esse contêiner em particular, e fiz, como faço para desligar o Deixe-me removê-lo, adicionar um novo e configurei isso para 1.000. Agora você tem uma largura de contêiner inconsistente. Em vez disso, o que você gostaria de fazer é manter largura do contêiner consistente e alterá-la aqui, e agora isso está afetando todos os contêineres na página. OK. Então, vamos verificar novamente. Ainda temos a largura do contêiner aqui, e também o preenchimento do contêiner é outra variável que talvez queiramos alterar posteriormente Então, vou até aqui, criar outro preenchimento de página número um, vamos chamá-lo, e talvez vamos fazer com que seja de 16 pixels Está bem? Então, vou até aqui e, em nossas seções, vamos definir o preenchimento esquerdo e direito para o preenchimento da página Está bem? Então, faremos isso nesta seção. Na verdade, não criaremos uma segunda seção até ligarmos para esta E agora, mais uma vez, se eu redimensionar isso, você verá que temos apenas 16 pixels de preenchimento em ambos os lados até chegarmos aos tamanhos de tela maiores o contêiner se limita a 1.200 e, na verdade, obtemos Está bem? Na época, usei a palavra margem, que é importante observar que, no desenvolvimento web, temos preenchimento e margem Mas na Figma, temos apenas acolchoamento. Então, se você está acostumado a ter margens e preenchimento, fica um pouco mais complicado traduzir isso para Mas, essencialmente, a forma de contornar isso é que, se quisermos definir uma margem, digamos, nesse contêiner, nós a adicionaríamos como preenchimento ao contêiner pai Está bem? Essa é a melhor maneira de contornar isso. Ok, então vou definir a largura da página de volta para 14.40 pixels. Já provamos que o contêiner é responsivo. E então, dentro do contêiner, colocaremos o conteúdo que quisermos dentro desse contêiner. Então, vou dar a isso um preenchimento diferente. Novamente, vamos usar amarelo, e talvez para a seção de heróis , pelo menos, seja um texto no meio que não queremos estender toda a largura do contêiner. Então, podemos chamar esse contêiner de interno. Talvez tenha uma largura máxima de 800. Queremos que ele preencha o espaço disponível. Tudo depende do que estamos fazendo dentro desse contêiner, ok? Então, o que eu vou fazer é salvar essa estrutura. Obviamente, vou remover as cores. Então, vou para a seção aqui. Use este botão de menos aqui para remover o vermelho, entrar no recipiente, remover o azul e depois o interior do recipiente e remover o amarelo Vou renomear esse interior, e essa será essencialmente nossa estrutura para construir nossa página da web Então, obviamente, isso é muito diferente do que fizemos no último vídeo, onde simplesmente jogamos coisas na página e vimos um resultado visual imediatamente Com essa abordagem, estamos nos concentrando mais na estrutura e garantindo que nosso projeto seja configurado com layout automático antes de adicionarmos qualquer elemento E falando nisso, vamos realmente usar essa estrutura e colocar alguns elementos reais a partir do próximo vídeo. 5. Crie como um desenvolvedor — parte 2: Tudo bem, agora que falamos sobre como vamos construir nossa estrutura geral responsiva para nosso projeto, vamos agora criar nossa primeira seção Então, o que eu vou fazer é salvar isso. Vou desativá-lo, mas vou salvá-lo para que possamos referenciá-lo e duplicá-lo em todas as nossas seções E então eu vou pressionar o Comando D para duplicá-lo, e vou ativar o segundo E eu vou chamar essa seção d. Então, o que vamos fazer neste projeto é criar quatro seções, um cabeçalho, um herói, uma seção de coleção em destaque e um rodapé Novamente, esse é um exemplo típico de comércio eletrônico porque eu trabalho predominantemente com sites de comércio eletrônico de desenvolvimento na web É por isso que estou fazendo mais um exemplo de comércio eletrônico. E o que eu gosto de fazer é que a seção interna aqui, eu gosto de chamá-la de cabeçalho interno. Gosto de reciclar o nome da seção. Obviamente, há alguma flexibilidade na forma como você o nomeia. Depende de você. E então, basicamente, esse será nosso cabeçalho. Então, vou me livrar desse WIP máximo. E eu vou mais uma vez fazer disso um quadro de layout automático. E toda vez que criamos uma moldura de layout automático, você verá que ela adiciona preenchimento automático na parte superior, inferior esquerda e direita Em nosso contêiner, já temos um preenchimento automático, então talvez não precisemos disso, mas vamos deixar isso lá por enquanto Talvez precisemos modificar isso no futuro. E o que eu vou fazer é trazer o primeiro elemento que vai entrar nesse cabeçalho. Esse é o nosso logotipo falso. Então, vou trazer detalhes pretos com o logotipo, e posso simplesmente clicar e arrastá-los diretamente para o nosso contêiner aqui E, obviamente, esse logotipo é muito grande. Vou colocá-lo em 113, o que o tornará muito menor. E aí está. Temos nosso logotipo inserido. O logotipo está no lado esquerdo do nosso cabeçalho. Agora vou criar o lado direito. Então, nosso lado direito terá alguns elementos. Ele terá um ícone para conta, um ícone para CRT e a bandeira do mercado atual Portanto, em um site de comércio eletrônico, você pode clicar no ícone CRT para abrir o cartão lateral Você pode clicar no botão Conta para abrir a página da sua conta e clicar na bandeira do seu país, seu mercado atual, para mudar para um mercado diferente. Para os ícones, eles estarão na forma de SVGs, então eu não os salvo no meu computador O que eu tenho é acesso a uma biblioteca, então eu posso abri-la em outra aba aqui. Este é chamado de ícones U por ícone plano. Como você pode ver, a licença permite que você use o conteúdo para projetos comerciais e pessoais, que possamos usar totalmente os ícones aqui para nossos propósitos, criando nosso pequeno design falso aqui. A página inicial. Vamos mudar aqui para esta página, e eu deveria ser capaz de, se elas estiverem rotuladas corretamente, procurar contas Talvez usuário. Ok, vamos lá. Então, vamos dar uma olhada. Isso é anúncio de usuário, usuário removido. Só queremos um usuário padrão. Ok, pressione Command C para copiar isso, cole aqui. Provavelmente não vai colar no lugar certo, mas está tudo bem. Podemos pegá-lo no painel de camadas e trazê-lo para o interior do cabeçalho. Veja aqui que, assim que o trouxermos, ele ficará ao lado do nosso logotipo aqui. E se eu tentar clicar e arrastar para reposicioná-lo, ele não se moverá porque estamos usando o layout automático Isso é bem diferente do exemplo anterior, em que você está simplesmente posicionando elementos na página. Isso não se traduz bem na web, mas sim, e essa é a grande diferença. Então, usando o layout automático, o que vamos fazer em vez de clicar e arrastar as coisas para a posição, vamos atualizar nossas configurações de layout automático, que, como mencionado anteriormente, são como nossas configurações CSS Flexbox , CSS Flexbox Então, aqui, o que vamos fazer é clicar em Aline center e depois clicar novamente para obter essencialmente o equivalente a justificar o espaço de conteúdo Agora você pode ver que temos nosso logotipo de um lado e nosso ícone do outro. Agora eu também queria um ícone de carrinho. Então, deixe-me procurar o carrinho. Tudo bem. Este é o carrinho de compras genérico. Então, vou pressionar o Comando C ou, claro, posso clicar com o botão direito do mouse e clicar em Copiar e colar aqui. Novamente, não será a posição correta. Vamos arrastá-lo para o interior do cabeçalho. Agora você pode ver que estamos recebendo esses dois ícones, mas eles não estão agrupados à direita, certo? Então, isso deveria ser esperado. Temos nossa seção flexível aqui com um espaço de conteúdo essencialmente justificado entre elas Então, o que precisamos fazer é agrupar esses ícones, e eu vou fazer isso em, você adivinhou, um quadro de layout automático Então, vou pressionar Shift A para transformá-lo em um quadro de layout automático e, em seguida, vou renomeá-lo para cabeçalho ou ícones de cabeçalho para você Vou configurar o WIP para abraçar o conteúdo. E, como você pode ver aqui, ele nos deu um WIP baseado em visualmente como esses dois apareciam anteriormente Então, o que eu vou fazer é passar para o WIP e usar o conteúdo do Hug, que é essencialmente como fit content Max WIP Mas agora você pode ver que, para manter o espaçamento entre eles, estabeleça uma lacuna gigante Então, queremos remover isso ou, na verdade, não queremos removê-lo completamente, mas definir uma lacuna muito menor. Então, talvez dez, deixe-me ampliar um pouco, dar uma olhada. Ok, então digamos que talvez 16 pixels entre eles, ok? Agora temos nosso logotipo à esquerda e nossos ícones à direita. A última coisa que eu queria acrescentar é a bandeira. Vou trazer a bandeira australiana aqui, que indicará nosso seletor de mercado E se compararmos o tamanho dessa bandeira com nossos ícones aqui, são 24. Então, para torná-los iguais, vou alterar a altura aqui para 24, e queremos apenas garantir que a proporção esteja bloqueada que o ícone não se estique. E então vamos mover isso para o cabeçalho aqui. Preciso testar um pouco mais, e aí você pode ver que temos um conjunto de três ícones lá, e podemos aumentar a lacuna entre eles dessa forma, ou podemos mexer com esses parâmetros da maneira que quisermos atualizar o espaço entre eles, essencialmente a aparência visual da nossa seção direita Ok. Agora, entre nosso logotipo e nossos ícones à direita, quero um menu no meio. Então, o que eu vou fazer é que eu posso fazer isso. De duas maneiras, posso criar o texto primeiro e depois agrupá-lo em um layout automático, ou posso criar o layout automático primeiro. Vamos com a escada. Então, vou colocar um quadro aqui e vou chamar esse menu de cabeçalho. E vou configurar isso para layout automático imediatamente, sem nenhum conteúdo Vou colocar os chicotes para abraçar o conteúdo. Sim, tudo para abraçar, então vai caber no conteúdo contido nele E então vou pegar minha ferramenta de texto aqui, escrever meu primeiro item de menu aqui, e vou ter apenas dois links em nosso menu. Muito simples. Masculino, clique fora disso. Pressione o Comando D para duplicar isso e mudar para feminino Como você pode ver, eles estão empilhados um sobre o outro, então precisamos mudar nosso fluxo em nosso layout automático aqui para horizontal Se é isso que queremos, a diferença entre eles será dez. Podemos mudar o alinhamento. Realmente não faz nenhum sentido no momento, já que tudo está pronto para se abraçar Temos um pouco de acolchoamento à esquerda e à direita. Talvez guardemos isso. Não quero o acolchoamento na parte superior e inferior porque já o temos em nosso contêiner Então, se diminuirmos o zoom aqui, você pode ver que temos nossos itens de menu centralizados no meio, ok? Então, como mostrei no vídeo anterior, porque temos nossa estrutura responsiva aqui, se eu redimensionar isso agora, você verá que ela é responsiva como se fosse um projetor web real E isso é mais do que o que pode ser dito sobre a maioria dos designs da web que chegarão seu colo, porque os designers, como eu disse antes, normalmente usam apenas o posicionamento absoluto. Ok. O que eu quero fazer aqui também, porque obviamente isso vai falhar quando chegarmos a tamanhos de tela bem baixos, mas esse é o design do desktop. Na verdade, não queremos mostrar sua aparência às 4:16 em nossa moldura de desktop aqui Queremos mostrar isso no celular. Então, o que eu realmente vou fazer é definir uma Mnwidth no próprio quadro geral, e vou definir isso para 769 Qualquer coisa menos do que 769, e você está olhando para tablet e celular, ok? Agora você verá que não consigo redimensioná-lo para menos de 769 Então, vou definir minha página de volta para 14 40 e vou cuidar de mais uma coisa antes de passarmos para a próxima seção, que é criar algumas novas variáveis em torno de fontes, ok? Então, como você pode ver aqui, quando criamos esse texto aqui, ele simplesmente o configurou com a fonte padrão Inter Esse é apenas o padrão. Ele assume o tamanho de fonte padrão e, obviamente, tudo é padrão. Coisas como cores e fontes da marca, normalmente gostaríamos de colocar em uma variável. Então, vou clicar na minha moldura aqui e configurar nossas fontes. Então, aqui você pode ver que temos uma coleção de tamanhos. Vou criar uma nova coleção e chamar isso de fontes, e vou criar duas fontes. Isso será uma string, e a primeira será a fonte do cabeçalho, a segunda será outra string, será a fonte do corpo. Estou feliz com a fonte corporal do Inter por enquanto, que é o que tínhamos, então vou colocar o Inter Mas quando criamos nossos cabeçalhos, eu quero uma fonte diferente Eu quero a fonte de Oswald. Então, criaremos nosso primeiro título na próxima seção, mas já temos algum texto em nossa seção de cabeçalho, então eu quero ir até aqui e, em vez de Inter, vou clicar aqui para vincular uma variável que vou colocar na fonte do corpo Portanto, isso não vai mudar nada porque a fonte do corpo já está entre elas. Mas se mudarmos a fonte do corpo posteriormente, como mostrei antes com o tamanho, ela fluirá para todas as áreas do nosso design E enquanto estamos aqui, eu poderia muito bem usar as cores da nossa marca. Então, criarei uma nova coleção, chamarei isso de cores e, em seguida, clicarei em Criar, e você pode ver que vamos usar nosso terceiro tipo de variável, que é cor. Então, se você está se perguntando como eu criei essa paleta de cores, tenho certeza que acabei de pedir ao HachPT que me gerasse uma paleta de cores com base Também foi assim que gerei o logotipo e as imagens que você está vendo aqui por meio da IA. A IA é ótima quando você quer produzir algo genérico para fins de demonstração. Então, vou chamar minha primeira cor de núcleo de preto, e os nomes deles também foram criados pelo Chat GBT Então, eu também dou crédito aberto a esses nomes. próximo, branco puro, que, como o nome sugere, será apenas branco puro. O próximo será carvão, o próximo será grafite. Não vou acabar usando todas essas cores, para ser sincero, mas elas me foram dadas pelo Chat GBT, então vou colocá-las aqui O próximo era cinza acinzentado. Novamente, se vocês estão acompanhando, pessoal, não precisam inserir todas as mesmas variáveis de cor aqui, apenas demonstrando como podemos usar variáveis de cor, prata, alguma cor chamada branca de fumaça E, finalmente, o azul de aço com um som super legal, que não se parece muito com um azul, mas parece bem legal Ok. Então, agora que temos nossas variáveis de cor digitadas, vamos dar uma olhada aqui e garantir que nossa fonte use a variável em vez de um valor arbitrário aqui Então, vou clicar no preenchimento e, aqui, não temos o mesmo botão que vimos antes para as outras áreas em que adicionamos a variável. Em vez disso, temos que clicar nas bibliotecas aqui, e então você pode ver nossas cores aqui. Então, vamos definir os itens do menu como Core black. E, como eu continuo mencionando ao longo desta aula, se mudarmos o líder do núcleo preto no nível variável, ele fluirá para onde quer que o núcleo preto seja usado em todo o nosso design Tudo bem, então essa é nossa primeira seção pronta, nossa seção de cabeçalho Como você pode ver, ele é responsivo desde 769, que será nosso ponto de interrupção até 14 40 e Portanto, está configurado corretamente. Está bonito com um design simples. Agora vamos criar nossa próxima seção no próximo vídeo. 6. Crie como um desenvolvedor - Parte 3: No último vídeo, criamos nossa primeira seção, nossa seção de cabeçalho, e agora, se criarmos uma nova seção, vou duplicar a partir do nosso pequeno modelo aqui e depois ativá-la e arrastá-la até aqui Você verá que ele estende a altura da moldura. Isso porque, se dermos uma olhada na moldura, você pode ver que o layout automático está ativado e que a altura está configurada para abraçar o Então, será tão alto quanto necessário para o conteúdo interno. que é consistente com a forma como a web realmente funciona, uma página da web terá o tamanho necessário para conter todo o conteúdo nela contido. Obviamente, existem algumas exceções em que experiência do usuário é mais uma rolagem horizontal, mas isso é muito incomum Na maioria das vezes, quando estamos navegando na web, estamos rolando verticalmente, e nossa tela e o chicote do navegador determinam nossa variável Então, como qualquer coisa que imite como a web realmente funciona, eu gosto dessa abordagem E agora o que vou fazer é renomear essa seção para herói, ok? Não estou familiarizado com uma seção de heróis, é basicamente o que criamos antes, assim como um banner com uma imagem de fundo. Normalmente, é isso que é uma seção de heróis. Não tenho certeza de qual é a definição real, mas é algo que fica acima da dobra. Então, no topo da página, basicamente, a primeira grande seção que você vê em uma página. E se você se lembra do início da aula, na aula básica do Figma, eu trouxe nossa imagem para o plano de fundo da aula, na aula básica do Figma, do herói Então, vou trazer isso de novo, como eu fazia antes. Então, eu o abri no Finder e simplesmente cliquei e o arrastei E agora você pode ver que está dentro do contêiner. Não é isso que queremos. Talvez o tenhamos arrastado até aqui, mas não é exatamente isso que queremos, Eva. Na verdade, existe uma maneira muito melhor de fazer isso, que é não usar nenhuma imagem. Defina a imagem dentro do preenchimento. Agora, como eu quero uma imagem de largura total que atravesse toda a seção, vou selecionar a seção. Em seguida, vou descer para preencher, clicar neste botão de adição para adicionar preenchimento, e o que você talvez não tenha percebido é além de adicionar um preenchimento de cor, também podemos adicionar um preenchimento de imagem. Vou clicar em Carregar do computador e, em seguida, vou selecionar a imagem do herói novamente. Agora você pode ver que temos a imagem do herói se estendendo por toda a largura da seção A altura total, mas atualmente a altura está restrita a 120. Definir isso para preencher aqui é essencialmente como capa da imagem de fundo em CSS ou a capa de ajuste do objeto e, em seguida, definir isso para caber é essencialmente como o objeto que o ajuste contém. Mas, obviamente, não queremos que ele seja contido aqui. Queremos que seja preenchido. Obviamente, existe a opção de cortar, que vimos anteriormente. Mas é muito melhor preenchê-lo. E, como você pode ver aqui, esta seção é muito curta. Queremos ter certeza de que podemos ver o suficiente da imagem. Então, vou dar a esta seção uma altura mínima. Então, vou clicar no Chevron, clicar em Adicionar altura mínima e vamos adicionar 750 pixels Agora, há uma limitação no Figma que temos no CSS, que é que podemos escolher o ponto de ancoragem de onde vem a imagem Assim, podemos configurá-lo para vir de cima ou de baixo ou da esquerda ou da direita. Não parece ser essa opção no BigMA, não sei por que a imagem deveria aparecer aqui, mas como você pode ver, não há opção aqui para fazer isso Então, isso pode ser uma modificação que precisaremos fazer em CSS depois de exportar isso para o código. Por enquanto, vou definir uma altura mínima para que possamos ver claramente os dois modelos. Eu poderia reduzir essa altura mais tarde, quando exportarmos para o código, mas aí você pode ver que com uma altura mínima de 900, estamos vendo os dois modelos, ok? Agora temos nosso contêiner aqui e parece que está assumindo a mesma altura da seção anterior. Então, eu vou mudar isso. Vou definir a altura para encher o recipiente em ambos. E agora, se eu fosse , por exemplo, escrever algum texto aqui, digamos apenas título. Isso é muito pequeno, então eu vou até aqui. Na verdade, primeiro de tudo, vou definir a do título como a fonte título que definimos antes de Oswald E então, obviamente, preciso aumentar esse tamanho para que possamos vê-lo se dirigindo assim. E então, agora, como esse quadro não está disposto automaticamente, posso clicar e arrastar esse título para onde quiser. Esse é o mesmo posicionamento absoluto que tínhamos antes. Não queremos isso, então vou usar a tecla interna Shift A para transformá-la em layout automático E você pode ver, por padrão, que só entra no bang metal, ok? Obviamente, podemos escolher nosso alinhamento. E se clicássemos no alinhamento superior esquerdo e removêssemos esse preenchimento que a Figma inseriu para manter essa posição, você pode ver que nosso título se alinha bem com o logotipo Então é isso que vamos querer para o resto da página. Mas para essa seção específica de heróis, queremos que o conteúdo fique no meio. Então, o que eu vou fazer é devolver isso para aqui. E então o que vou fazer é selecionar o texto, duplicá-lo e você verá que ele vai para a direita Então, vou mudar a direção da flexão ou, no layout automático, é chamada de direção do fluxo, eu acho Vou mudar isso para vertical, depois vou mudar a segunda parte do texto para o corpo e, em seguida, vou mudar a do título para a fonte do corpo. Isso não funcionou, deixe-me selecionar isso novamente e, em seguida, vamos reduzir isso. Está bem? Então, isso vai ficar no ponto morto porque temos nossas configurações de alinhamento configuradas como tal E haverá uma lacuna de dez pixels entre o título e o corpo do texto. O melhor redator, então pedi ao ChahPT que criasse um título melhor do que esse Então, vou colocá-lo aqui, redefinir seu eixo. E, obviamente, ou pelo menos, obviamente, para mim, o texto fica melhor em maiúsculas. E depois a segunda cópia para o corpo, roupas voltadas para o desempenho para quem se move com propósito, design minimalista Isso é um pouco pequeno e eu quero que esteja alinhado no meio Então, vou mudar o alinhamento para o meio. Não tenho certeza se a variável da fonte foi aplicada, então vou me certificar de que é a fonte do corpo e vou aumentá-la com, ok? Como você pode ver, à medida que eu o aumento, ele se sobrepõe ao Além disso, mesmo nesse tamanho, quando não se sobrepõe ao contêiner, ainda é um pouco largo demais. Então, o que vou fazer é entrar neste contêiner interno aqui e forçar algumas quebras de linha com um toque máximo neste Então, vou adicionar um toque máximo de vamos experimentar com cerca de Como você pode ver, isso é um recorte. Então, queremos mudar isso para ter uma largura de recipiente de enchimento. E então você pode ver que temos algumas quebras de linha. Então, vamos brincar com o tamanho da fonte e o tamanho do contêiner para melhorar um pouco a aparência. Acho que esse é provavelmente um equilíbrio melhor. É bom tê-la no meio dessa situação, mas eu meio que quero que ela fique nesse espaço disponível logo acima dela. Então, vou hackear isso um pouco para colocá-lo em posição Posso usar o alinhamento aqui para defini-lo na parte superior vertical, mas está muito próximo do cabeçalho Idealmente, eu gostaria que estivesse em algum lugar intermediário. Em HTML e CSS, posso adicionar uma porcentagem específica para colocá-la em algum lugar aqui, mas não temos acesso a essa Figma Então, o que vou fazer é adicionar pouco de preenchimento vertical para colocá-lo na Vamos começar com 50, subindo a partir daí, 100, 150. Vamos fazer 165. É como se estivesse lá, mas o texto está um pouco perto do rosto da moça. Então, vou trazer um pouco do contêiner, encontrar a largura máxima aqui e torná-lo 550. Ok. Talvez essa quebra de linha esteja no próprio texto. Lá vamos nós. Tudo bem, então a quebra de linha estava no próprio texto. Então, sim, se criarmos esse contêiner 550 pixels no máximo e brincarmos com o preenchimento, podemos colocá-lo em uma posição muito boa Agora, para testar isso, para ver se ainda está responsivo, vou clicar na moldura da área de trabalho e redimensioná-la vou clicar na moldura da área e redimensioná-la Como você pode ver, nossa imagem preenche o espaço disponível e nosso título no texto permanece no meio Perfeito. Mas há outra coisa que eu quero fazer aqui, que é colocar um botão, um botão de CTA Então, é claro, eu te mostrei um botão no básico do Figma. Vamos usar, mais uma vez, o layout automático para isso. Então, podemos simplesmente clicar em nosso design aqui e, em seguida, chamaremos o botão Comprar agora. Vou clicar fora da ferramenta de texto. Caso contrário, ele adicionará um A. Eu pressionarei Shift A e agora o layout automático foi adicionado Vou ligar para esse botão. Vamos descer e preencher isso, e vamos usar uma de nossas variáveis de cor. Então, talvez eu torne essa fumaça branca e, dentro do botão no texto real, mude o preenchimento para algo que esteja em contraste com isso. Então, talvez grafite. Vamos ampliar agora, dê uma olhada nisso. Obviamente, precisamos de um pouco mais de preenchimento, então vou adicionar um pouco de preenchimento à esquerda e à direita, pouco de preenchimento na parte superior Algum raio de borda, que é chamado de raio de canto aqui na Figma Vamos começar com dez, ok? Na verdade, eu não me importo com dez. Acho que dez é bom, desse jeito. E para finalizar, eu não sou um grande fã da diferença de espaço. Como você pode ver, parece que há mais espaço entre o título e o corpo do texto, em comparação com o corpo do texto e o botão. Vamos dar uma olhada no porquê disso. Vamos até nossa camada de cabeçalho aqui e você verá que a caixa é um pouco maior do que o texto em si. Talvez você queira ir até a altura da linha, defini-la como igual ao tamanho do texto, então 60, e isso muda isso. E agora você pode ver que tudo é um pouco mais igual. Então, isso quase resolve isso. Vou fazer a mesma coisa aqui com o corpo do texto, embora, nas entrelinhas, ele meio que precise dessa altura de linha. Então, vou reverter essa mudança. E vamos apenas aumentar a diferença aqui. Então, digamos 20 pixels. Ok. Agora, o que poderíamos fazer se quiséssemos espaços diferentes entre eles, poderíamos agrupar o texto, adicionar layout automático a ele, talvez chamar isso de texto do herói, se quiséssemos, e depois colocar talvez chamar isso de texto do herói, se quiséssemos, e depois colocar um pouco de preenchimento na parte inferior Na verdade, podemos clicar aqui embaixo, que nos permitirá separar o preenchimento esquerdo e direito e o preenchimento superior e inferior, e podemos inserir um preenchimento extra para separar o botão do Então, talvez eu use apenas cinco pixels aqui. Na verdade, acabei de colocar isso no lugar errado. Então, talvez eu use apenas dez ou cinco pixels aqui, e isso parece muito bom. Ok, então, novamente, redimensionando nosso design de 769 para além de 14 40 Obviamente, perdemos os rostos dos modelos aqui. E, na verdade, deixe-me colocar o desktop acima celular para que possamos exibi-lo. Mas com CSS, podemos corrigir isso facilmente alterando o posicionamento da imagem de fundo. Ok, então eu vou ajustar isso de volta para 14 40. Antes de passarmos para o próximo vídeo, o que vou fazer é mostrar os componentes. Para manter meus componentes, vou criar outra seção aqui. Vou chamar isso de elementos. Você pode chamá-lo do que quiser. Você nem precisa usar uma seção. A maioria das pessoas nem usa uma seção, e vou pegar esse botão aqui e arrastá-lo até os elementos. Agora, por que eu o tirei daqui e coloquei aqui é porque quero definir nosso estilo geral de botão que usaremos em todo o nosso design. Qualquer alteração que fizermos nesse estilo de botão centralizado será aplicada a todos os nossos botões Agora, isso não quer dizer que não possamos fazer alterações específicas em botões individuais, como se colocarmos aqui e seguida, talvez estivesse em um fundo branco, precisaríamos inverter as cores. Nós podemos fazer isso. Também podemos criar duas versões do botão mestre, mas para ter um estilo de botão centralizado principal, o que podemos fazer é criar o que é chamado de componente Então, podemos fazer isso clicando com o botão direito do mouse no elemento e clicando em Criar componente. Agora você pode ver que fica roxo. Esse ícone aqui indica que agora é um componente. Agora, se eu clicar e arrastar, desculpe, clique na opção e arraste um botão do componente até aqui, o que obtenho é uma instância desse componente. E você pode ver aqui que diz exemplo, e temos o diamante oco aqui em vez do diamante de quatro quadrados E como você pode ver , diz componente. Então você pode ver aqui que agora temos uma instância do nosso componente de botão. É claro que ainda podemos alterar o texto, e isso não mudará o componente original. Mas se eu mudar o componente original para texto aqui, você verá que isso realmente se aplica às instâncias Portanto, no nível da instância, podemos fazer personalizações ou, no nível do componente, podemos fazer personalizações, mas elas fluirão para todas as instâncias Tudo bem? Então, acho que os componentes são uma ideia muito boa, e vamos usá-los durante toda a aula. E você verá no próximo vídeo que, quando criarmos uma seção de coleção em destaque de vários cartões de produtos, vamos querer usar o mesmo cartão repetidamente , e esse é um caso de uso perfeito para componentes. 7. Crie como um desenvolvedor - Parte 4: Tudo bem, então, no último vídeo, criamos nossa seção de heróis Agora, vamos trabalhar na próxima seção, que será uma seção de coleção em destaque , muito comum no comércio eletrônico. Então, como estamos criando um site de comércio eletrônico, faz sentido colocar uma seção de coleção em destaque Então, vou duplicar modelo de seção que tínhamos e ativá-lo, e então vou chamar essa coleção em destaque A principal complexidade dessa coleção em destaque serão alguns componentes de cartas que vou incluir. OK. Então, primeiro de tudo, vamos querer um título aqui. Então, vou dar a isso o título de, digamos que em destaque, desculpe, isso é muito pequeno. Vou ampliar um pouco, mas vamos torná-lo maior. Coleção em destaque. A letra maiúscula é muito melhor, e vamos mudar a fonte para nossa fonte de título aqui mesmo de Oswald, talvez aumentá-la Isso parece um pouco melhor. Então eu vou torná-lo bem maior, então vou torná-lo com 60 pixels. OK. Então, como você pode ver, podemos movê-lo com nosso Cursor. Isso deve significar que não estamos atualmente dentro de um quadro de layout automático Então, vou clicar no interior do quadro e pressionar Shift A para transformá-lo em layout automático E como você pode ver aqui com nosso alinhamento, ele estará no meio Então, vou mover isso para a esquerda. E, como você pode ver, esse preenchimento é mantido, então queremos apenas remover esse preenchimento e, em seguida, devemos ver se esse título se alinha com o resto de nossos O próximo que vou fazer é trabalhar no componente do cartão. Na verdade, vou até meus elementos aqui e vamos criá-los separadamente, transformá-los em um componente e, em seguida, copiar algumas instâncias desse componente para nossa seção aqui. Vou clicar aqui para criar uma moldura e quero fazer essa moldura com cerca de 280 pixels de largura. E então a altura será maior quando adicionarmos os elementos dentro dela Então, vou chamar isso de nosso cartão de produto. E as verdadeiras crianças em nosso cartão de produto serão a imagem do cartão do produto e, em seguida, todos os detalhes. Está bem? Então, para a imagem, eu realmente não tenho um monte de imagens de produtos para colocar aqui. Então, vou colocar um espaço reservado e, para isso, vou usar apenas um retângulo Eu meio que gosto da cor desse retângulo de espaço reservado e, em seguida, vou dimensioná-lo para que seja igual à largura total do cartão do produto e, para a altura, talvez 320 Na verdade, vou ligar para aqui. 320. E então, para o WIP, eu quero que ele encha o recipiente Mas, para isso, precisaremos de um layout automático. Então, vou até o cartão do produto, clicar no layout automático, voltar ao nosso retângulo, configurá-lo para encher o recipiente e, em seguida, vou estender o cartão do produto Aqui você pode ver que o alinhamento está desativado. Está colocando-o no centro. Então, vamos movê-lo para lá e, em seguida, vamos colocar outro quadro aqui para nossos detalhes. Basta clicar novamente no cartão do produto e alterar o alinhamento para vertical e, em seguida, colocá-lo na parte inferior. Está bem? Essa moldura encherá o contêiner e as alturas abrangerão o conteúdo, mas ainda não há conteúdo nela Então, vamos começar a colocar isso. Vamos querer inserir o título do produto. Como você pode ver, ele salvou nosso tamanho de fonte de antes. Talvez eu reduza isso para 24 e depois escreva um produto. Vamos usar letras maiúsculas novamente, título do produto, certo? E, no momento, isso não está dentro de um quadro de layout automático. Então, vamos até aqui e adicionar layout automático ao quadro E agora você pode ver que haverá algum alinhamento com o título do nosso produto Vamos renomear a moldura com os detalhes do cartão do produto, e eu quero colocar o título desse produto à esquerda remover esses números de preenchimento por enquanto E como você pode ver aqui em cima, também há uma lacuna que vou remover por enquanto, e podemos marcar isso um pouco mais tarde, sem que a Figma decida isso por E o que vou fazer é título do produto e pressionar Shift A novamente, para criar outra moldura, para criar outra moldura, e esses serão os detalhes do nosso cartão de produto ou, na verdade, vou chamá-lo de cartão de produto à esquerda. Porque eu vou colocar algum outro texto aqui. Vamos colocar outro pedaço de texto e queremos que eles estejam alinhados verticalmente Então, vou mudar o fluxo para vertical. Estou começando a acelerar um pouco agora porque já discutimos muito sobre o layout automático E então essa não será nossa fonte de título. Será a fonte do nosso corpo, e vou chamar essa variante de título. Não queremos que isso seja ousado. Na verdade, talvez queiramos que seja leve, ok? E então o tamanho do texto é muito grande. Eu vou fazer com que seja como 14. OK. O alinhamento está no meio Então você só precisa mover isso para a esquerda. Na verdade, mesmo quando faz isso , ainda está no meio, porque temos que selecionar nosso alinhamento aqui e pressionar o Comando D para duplicar mais uma vez, e esse será o nosso preço Então, vou definir isso para talvez $10 com os zeros restantes. E para isso, quero que seja ousado e talvez um pouco maior. Vou colocar uma moldura no lado direito e, dentro dessa moldura, vou definir o número de avaliações. Então, vou chamar esse cartão de produto emoldurado da maneira certa. E para exibir o número de avaliações, vou usar um ícone de estrela. Então, vou voltar aos nossos ícones U pela biblioteca de ícones planos aqui e procurar por uma estrela. Essa é a estrela que estamos procurando. Bem, deixe-me ver o que é esse. Eu quero o arredondado. Então, vou copiar isso, colar dentro desse quadro e, em seguida, um pedaço de texto dentro desse quadro também para a quantidade de estrelas. Então, digamos 4,5. OK. Vou reordená-los e, em seguida, vou adicionar o layout automático ao cartão do produto, certo Em seguida, vou clicar detalhes do cartão do produto e atualizar nosso alinhamento aqui, vou definir isso para um espaço intermediário Esse é o termo no CSS Flex, mas basicamente, eu apenas cliquei duas vezes aqui para dar espaçamento automático e depois voltei aqui no cartão do produto à direita Vou definir a altura para encher o recipiente. Vou remover o acolchoamento superior e inferior que o faz ficar no meio e, em seguida, vou definir o alinhamento Na verdade, isso não resolveu o problema para nós. Queremos que fique no canto superior direito. Então, talvez precisemos clicar aqui. Lá vamos nós. É necessário clicar novamente para obter a lacuna automática. E então vamos para o cartão do produto aqui. Na verdade, queremos que isso esteja nesse layout automático, alinhado Em vez disso, talvez cinco pixels de diferença. E agora você pode ver que isso está um pouco errado. Vamos descer e alterar a altura da linha para 24. E agora você deve começar a ver tudo muito bem alinhado. Está bem? Agora, com todo o preenchimento basicamente removido, vou inserir meu próprio preenchimento ao meu Então, obviamente, eu vou querer alguma lacuna entre essas seções. Então 20 provavelmente é demais. Vamos fazer dez. E então, para os detalhes do cartão do produto, preciso de algum espaço em cada lado. Vamos marcar talvez 12. Isso é bom. Deixa que ele respire. Em seguida, vou até o próprio componente do cartão de produto, vou até a altura e clico em Abraçar conteúdo, para que não seja maior do que o conteúdo contido nele E então podemos ver aqui que precisa haver algum preenchimento na parte inferior dos detalhes do cartão do produto Então, em vez de ter uma lacuna aqui, poderíamos remover essa lacuna e, nos detalhes, dar a ela um pouco de preenchimento superior e inferior, como tal E, na verdade, agora estou muito feliz com meu cartão de produto. Tudo bem, então podemos deixar esse espaço reservado aqui dessa forma ou podemos alterar o preenchimento para a imagem real do nosso produto Eu só tenho uma imagem do produto. Então, vou até aqui e trarei um exemplo. Então, aqui podemos ver a imagem do produto. E, como você pode ver , está meio que cortando no topo da cabeça dela Portanto, há algumas opções que podemos configurar para caber, o que não é uma boa opção, porque agora temos esse espaço em branco no lado eva. Se ainda quisermos que ele seja preenchido e apenas ancorado a partir do topo, podemos fazer isso em nosso CSS posteriormente Infelizmente, não posso fazer isso no Figma. Mas, neste caso, vou apenas cortar. Então, vou alinhar a imagem assim, e talvez o produto seja apenas esse sutiã esportivo aqui. Não envolve a peça inferior; nesse caso, funcionaria bem. Está bem? Então, poderíamos dizer, em vez do título do produto, sutiã esportivo. Está bem? Podemos deixar isso aí, ou podemos nos livrar da imagem, ou podemos voltar para o espaço reservado, se eu apenas controlar Z a partir disso Mas aqui podemos ver nossa configuração de cartão de produto devidamente estruturada. OK. Então, o que vou fazer é clicar com o botão direito do mouse no cartão do produto e clicar em Criar componente. Agora podemos criar instâncias desse cartão de produto, e todas as alterações feitas nesse componente centralizado fluirão para cada instância, assim como acontece com os botões Está bem? Então, o que eu vou fazer é voltar para a nossa seção aqui. Vou renomear esse interior da coleção realmente em destaque E então eu vou criar uma nova moldura dentro dela. Obviamente, não queremos que ele vá para a direita do título. Queremos que vá para baixo, então vou mudar meu fluxo Esta será nossa lista de cartões de produtos. OK. E então o que eu posso fazer é estender essa extensão para encher todo o recipiente, e então eu posso começar a arrastar opcionalmente um deles para os meus cartões de produto, como tal. Na verdade, ele saiu para o lado, mas depois posso colocá-lo nos meus cartões de produtos aqui. E, mais uma vez, como vimos por toda parte, vou adicionar layout automático a isso, e agora você pode ver que temos nosso cartão de produto perfeitamente no centro O que vou fazer é duplicar esses cartões de produtos Vamos fazer quatro deles, eu acho. E você pode ver que Figma colocou um pouco de preenchimento esquerdo e direito Vamos nos livrar disso. Obviamente, queremos alguma lacuna entre tudo isso. Eu poderia aumentar essa diferença para 15. E como você pode ver aqui em nossos cartões de produtos, o conteúdo é adequado para abraçar, o que é bom Isso significa que será tão grande quanto as cartas dentro dele, e nosso WIP encherá o contêiner Perfeito. Agora, como você pode ver com nosso título aqui, a altura da linha é maior do que a altura do texto real. Então, vamos fazer esse 60 que ele ocupe apenas o espaço do texto. E nesse caso, precisaremos de alguma margem entre esse texto e os cartões do produto. Portanto, podemos adicionar layout automático a esse texto aqui e, no quadro de layout automático, podemos adicionar um pouco de preenchimento inferior ou podemos simplesmente usar uma lacuna na seção interna Está bem? Então, acho que vou fazer isso e aumentar a diferença. Na verdade, já temos uma lacuna aqui, mas vamos criar uma lacuna maior, talvez 30 pixels de lacuna. Tudo bem. Então, se olharmos para nosso contêiner aqui, há algum preenchimento na parte superior e inferior, que não deveria existir Além disso, essas seções não parecem se alinhar perfeitamente. Então, vamos descobrir por que isso acontece. Parece haver uma pequena lacuna aqui. Vamos até nossa moldura principal aqui, a moldura da área de trabalho, e você pode ver que há uma lacuna definida nela. Então, só queremos remover isso. E agora você pode ver que a parte superior da seção e a parte inferior da seção estão alinhadas com a seção Agora, obviamente, queremos criar algum espaço aqui, mas eu quero criar isso como uma variável, porque se criarmos outra seção como essa com texto e algumas imagens, vamos querer manter preenchimento da seção consistente Vou clicar em nosso quadro aqui, entrar em variáveis, acessar nossa coleção de tamanhos e criar uma nova variável numérica para preenchimento de seções E com os modos, podemos realmente mudar isso para ser diferente com base no celular ou no desktop. Mas somente se você estiver na cadeira de desenvolvedor, o que abordaremos um pouco mais tarde. Então, vamos usar 75 pixels. Tudo bem? E então o que vou fazer é acessar minha coleção em destaque e adicioná-la aqui ao nosso preenchimento de seções Ok, vamos estender a seção para baixo para que você possa ver que está muito bonita. Tudo bem, então, como vai funcionar com a capacidade de resposta? Então, como você pode ver aqui, isso pode ser um contêiner de transbordamento Então, pode realmente ter essa aparência, e então o usuário pode rolar para a esquerda e para a direita, ou podemos configurá-lo para que os cartões do produto sejam embrulhados. Então aqui está o botão para rap, e então vamos ver o que acontece se diminuirmos o botão. Você pode ver que eles começam a se enrolar, mas talvez queiramos que também se estiquem um pouco. Fico feliz que eles, neste caso, sejam apenas uma situação de contêiner transbordante E se quisermos algo diferente, podemos facilmente corrigir isso em nosso HTML NCSS OK. Então, voltando para 14 40, o chicote original Nesta lição, abordamos principalmente como criar esse componente único. Mas você pode ver que temos várias instâncias aqui desse único componente. E se eu voltar e mudar um desses espaços reservados em uma instância real para essa imagem Então, se eu for até onde está o preenchimento, aí está, e eu fizer o upload do computador, coloco a imagem do produto lá. Vamos cortá-lo mais uma vez para colocá-lo na posição correta. Assim. Na verdade, eu cortei um pouco a parte superior, então deixe-me movê-la para trás. Para tocar, ok? Isso parece muito bom. Como você pode ver, isso não mudará nenhuma de nossas outras instâncias. Mas se eu fosse até aqui e alterasse o preço aqui do componente real para 20, e depois olhássemos aqui, você veria que todas as nossas instâncias agora obtêm 20. Está bem? Vou apenas controlar Z, colocar isso de volta em dez e, em seguida, removerei essa imagem específica do produto aqui porque não tenho as outras para preencher os outros slots Preciso colocar de volta o preenchimento D 9d9d9. OK. Então, no próximo vídeo, vamos fazer a seção final, que é a seção de rodapé, e depois continuaremos com a migração desse design de desktop para nossa menor largura de tela de 390 para nossa menor largura de tela de 390 8. Crie como um desenvolvedor - Parte 5: Tudo bem, agora vamos para a seção final de nossa construção aqui, que é o rodapé Então, mais uma vez, vou duplicar esse modelo de seção, ativá-lo e renomear a seção para E esse rodapé terá uma cor de fundo separada para indicar que é um rodapé Então, vou adicionar isso agora. Vou usar uma de nossas variáveis de cor em nosso esquema de cores. Vou usar prata. OK. Isso parece muito bom. Renomeie o interior para o rodapé interno e, para que esta seção tenha um preenchimento consistente como a última seção e quaisquer outras seções que criarmos no futuro, vou até a seção e adicionarei nosso preenchimento superior e inferior do preenchimento e quaisquer outras seções que criarmos no futuro, vou até a seção e adicionarei nosso preenchimento superior e inferior do preenchimento da seção. Está bem? Ótimo. Agora, dentro do nosso rodapé interno, podemos adicionar o que queremos aqui Então, vou trazer o logotipo novamente, obviamente, muito grande, então vou reduzir para 113 , mesmo que o cabeçalho, e por algum motivo, está na lateral aqui. Nosso rodapé interno ainda não está no layout automático, então vou configurá-lo e, em seguida, ele traz de volta nosso logotipo OK. Então, o que eu vou fazer é um rodapé bem simples porque é um site bem simples, como você pode ver, vou ter um conjunto de menus à direita Então, para isso, podemos começar de baixo ou subir ou podemos começar de cima e ir descendo. Então, vou começar pelo topo. Vou adicionar outro quadro aqui. Este será um menu de rodapé. Em seguida, vou até o rodapé interno e vou mudar o fluxo para horizontal e definir a lacuna aqui como automática Em seguida, nos meus menus de rodapé, que serão empurrados para a direita, outro quadro para um único menu de rodapé Então, vou chamar esse menu de rodapé e transformá-lo em Layout automático E então, no menu do FDA, vou adicionar algum texto Então, esse será o título do nosso menu do FDA. Então, vou colocá-lo como loja. Eu gosto que seja ousado. Em vez de usar o Inter, mesmo sendo a mesma fonte, vou usar a variável que nos permite alterá-la posteriormente, se quisermos E então eu vou pressionar o Comando D para duplicar isso e mudar para uma fonte menos negrito, e não vamos usar maiúsculas aqui, e vou colocar o Comando D feminino novamente e o masculino Então aí está, nosso primeiro menu. Podemos mudar a diferença aqui entre os itens, mas estou feliz com dez. E agora, o que podemos fazer, porque já configuramos tudo nos layouts automáticos, é clicar no menu de rodapé, duplicá-lo e, em seguida, colocar outro menu à direita Está bem? Então, esse será nosso menu de ajuda, primeiro, FAQ, segundo link, informações de entrega. E, como você pode ver, como definimos isso de forma flexível, tudo se moverá para a posição automaticamente O próximo será fazer uma devolução. Se você está se perguntando de onde eu os descobri, basicamente me inspirei em outros sites, outros sites de comércio eletrônico que vendem produtos similares e apenas copiei alguns de seus links Está bem? Então, aqui você pode ver que temos um pequeno problema. Isso é definido como uma linha no meio. Não queremos isso, então vamos mudar o alinhamento. Pronto, para que nossos títulos estejam alinhados. Em seguida, criaremos mais um menu aqui duplicando e eu chamarei isso de legal Essas serão nossas políticas e termos e condições, privacidade, política, termos e condições, e então simplesmente removeremos essa. Tudo bem. Então aí está. Nossos menus serão expandidos para preencher o conteúdo, mas não gosto de como alguns são muito maiores que os outros. Então, vou pegar a largura desta, que é 172, e vou fazer com que todas essas larguras mínimas sejam 172 Então eu vou adicionar aqui 172, e no outro aqui, largura mínima 172 Portanto, eles serão pelo menos tão grandes quanto o menu de ajuda. Está bem? Então, aí você pode ver, temos um pequeno rodapé aqui E como usamos o layout automático para tudo, deixe-me pegar os limites do nosso quadro aqui, redimensioná-lo e você verá que ele funciona de 769, que era o mínimo, até tamanhos de tela muito grandes Lá você pode ver nosso rodapé funcionar. Vou apenas estender nossa seção para cobrir isso. E mais uma coisa que esqueci no último vídeo é que temos os componentes da que temos placa do produto configurados para Auto loud Então, na verdade, não testamos a capacidade de resposta disso. Você pode ver aqui. Sim, se o tornarmos mais largo, é muito improvável que seja tão largo, então não precisamos nos preocupar, embora talvez queiramos definir um máximo, talvez 450, não mais do que 450, e esteja começando a parecer estranho Não gostaríamos que fosse mais do que isso. Não conseguiremos redimensioná-lo mais do que isso. E então, obviamente, se descermos até aqui, o que é 250, então teremos alguma sobreposição com a classificação por estrelas Então, também queremos que essa largura seja mínima de 250, e então você pode ver que não podemos realmente quebrar esse design de cartão com a largura mínima e a largura máxima e o layout automático aplicados. Agora que nossa visualização para desktop está boa e é responsiva, vamos passar para dispositivos móveis no próximo vídeo E espero que possamos migrar tudo isso para o celular em uma única aula Então, eu vou te ver na próxima. 9. Crie como um desenvolvedor - Parte 6: Esperamos que neste vídeo final desta seção sobre como criar nosso design como um desenvolvedor, vamos traduzir esse design para dispositivos móveis Agora, é claro, na web, não temos dois quadros diferentes. O que temos é um ponto de interrupção. E, infelizmente, é praticamente impossível fazer esse quadro funcionar até, digamos, 320 pixels até 768 Está bem? Então, ainda precisaremos de uma moldura móvel. E para o quadro móvel, vou fazer o mesmo que fizemos aqui. Não quero que essa moldura móvel se estenda mais do que 768, porque então queremos entrar no design do nosso desktop Então, vou definir um WIP máximo, mas primeiro preciso transformá-lo em um layout flexível Então, vou mudar A para fazer isso. E então vou configurar o M WIP para Acho que o menor telefone que existe é como 320 Não ofereceremos suporte a telefones com menos de 320 e forneceremos um WIP máximo de 768, conforme discutimos Tudo bem, então, eu realmente defino os valores reais com, não os valores mínimo e máximo. Então, o que foi? Era 32768 Então, temos os dois lá. Então, aqui você pode ver como o design móvel deve funcionar de 320 a 768, ok? Mas eu vou colocar isso de volta para 390. Esse é o tamanho da tela que eu geralmente gosto de trabalhar. E vamos primeiro mostrar nosso cabeçalho. Está bem? Então, o que vou fazer é clicar no cabeçalho, clicar em Comando C para copiar, ir até a moldura do nosso celular aqui e clicar em colar, e você pode ver aqui. Temos um pouco de preenchimento geral na moldura, então queremos nos livrar disso Tudo bem. Na verdade, não precisamos de contêineres em dispositivos móveis, mas vamos mantê-los, pois isso provavelmente facilitará o entendimento da IA. E queremos que o logotipo, em primeiro lugar , seja menor. Vamos digitar, tipo, algo na metade desses 75 pixels. Parece que temos um pouco de preenchimento demais aqui. Então você pode ver que temos um pouco de preenchimento no cabeçalho interno e no contêiner Então, podemos escolher o maligno. Então, vou removê-lo para o cabeçalho interno e talvez também para o contêiner. Utilize o máximo de espaço possível. Nosso padrão comum no desenvolvimento web é pegar esse menu aqui, que é bem amplo, que é bem amplo, especialmente quando você tem outros itens do menu e transformá-lo em um ícone de hambúrguer Então, vou excluir isso completamente e, em seguida, vou acessar nossa biblioteca de ícones novamente e dizer hambúrguer Acredito que não se chame hambúrguer, mas hambúrguer, mas logo descobriremos Então, há o menu de hambúrguer. Na verdade, parece um hambúrguer, e esse é o hambúrguer do menu, ok Quais são os que temos? Sim. Então, basicamente , a mesma coisa reta ou arredondada. Seja honesto, eu acho. Sim. E então vamos colar esse ícone. Só precisamos arrastá-lo para a posição correta. Então, vou colocá-lo antes do logotipo, como você pode ver aqui. E como temos um cabeçalho interno com uma lacuna automática, estamos recebendo um espaço indesejado entre o ícone do Hambúrguer e o logotipo Então, vou agrupá-los. Agora, o que isso vai fazer é criar uma inconsistência com a versão para desktop Então, vou fazer a mesma coisa na versão desktop para mantê-las consistentes para a IA. Então, vou até nossa versão para desktop, e vamos agrupá-las também, ativar o layout automático e chamar esse cabeçalho à esquerda E talvez eu até queira que esses itens fiquem mais à esquerda. Então, para o cabeçalho esquerdo, não vou fazer uma margem automática. Vou fazer uma linha para a esquerda. Parece que há um preenchimento automático aplicado aqui em algum lugar, ou pelo menos um fixo Então, o que vou fazer é definir o With here para abraçar o conteúdo O menu ainda está em posição. Para descobrir por que isso acontece. Parece que, em vez de um preenchimento automático, estamos recebendo uma lacuna automática Então, vamos definir a lacuna como não automática, mas vamos dilatar em nós mesmos, mas vamos dilatar em nós mesmos, talvez dez pixels, ok? Agora vamos para a esquerda com nosso menu de cabeçalho e nosso logotipo à esquerda no desktop, e também temos a mesma coisa aqui, e só precisamos nos livrar desse espaçamento automático aqui Como você pode ver aqui, ele está usando o fluxo de forma livre. Vou definir isso como horizontal e, em seguida, vou definir a lacuna para começar com dez. OK. Acho que preciso de um pouco mais de dez. 20, digamos, para onde estamos indo no cabeçalho esquerdo. Ok, é conteúdo envolvente. Está alinhado no meio. Tem uma lacuna de dez pixels. Talvez aumentemos isso para 15 pixels. Ok, legal. Tudo bem, então esse é basicamente o nosso cabeçalho. Então, a próxima coisa que vamos mostrar é nosso herói. Então, vou pegar o herói pressionando o Comando C para copiar E então, aqui em nossos layouts móveis, eu vou clicar em colar, e você pode ver o passado no mesmo conteúdo A imagem do herói para celular será diferente. E é muito comum no desenvolvimento web ter imagens de banner diferentes com base na diferença entre desktop e celular. Então, vou entrar aqui e tenho uma versão alternativa, hero Image para celular. Então, vou fazer o upload disso e também diminuir a altura desse herói. Parece que algo tem um mínimo, o que provavelmente é herdado do design do desktop Então, deixe-me ver o que está acontecendo aqui. Altura definida para preencher. Ok, sim. Então, deixe-me ver aqui. Sim, temos uma altura mínima de 900. Definitivamente, queremos mudar isso para dispositivos móveis. Digamos que talvez a altura mínima seja 500, e então reduziremos a altura para 500. E agora você pode ver que temos mais modelos na moldura. Então, talvez eu diga altura mínima 450 , diminua ainda mais. Ok, isso é um pouco melhor. E depois mande uma mensagem aqui. Obviamente, não queremos ser tão grandes, então podemos colocar 36 no tamanho da fonte do título, talvez, vamos deixá-lo em 16, só para que fique mais legível E então vou diminuir a lacuna aqui, talvez apenas removê-la completamente e depois a mesma coisa entre o texto do herói e o botão Então, vou fazer com que seja talvez cinco pixels. Estamos recebendo um pouco de preenchimento na parte superior e inferior de 165. Vamos remover isso e ver o que acontece. Ok, nós recebemos nosso texto no topo. Vamos apenas alinhar o centro para obter esse alinhamento no meio, e estou muito feliz Tudo bem, então a próxima seção, a seção da coleção em destaque Vou copiar isso para o nosso design móvel. Na verdade, antes de fazer isso, vou definir a altura da nossa moldura móvel para abraçar o conteúdo Então, isso fará com que o quadro seja tão grande quanto o conteúdo dentro dele, mas não mais. Lá você pode ir. E então, em nosso celular, colarei nossa coleção em destaque, o que inevitavelmente tornará nossa moldura móvel maior Tudo bem? Agora você pode ver que temos nosso preenchimento de seção, mas ele é bastante pesado, com 75 pixels Então, o que podemos fazer é definir um preenchimento de seção diferente no celular Então, vou remover isso e vamos brincar com alguns números, primeiro de tudo, antes de definir a variável. Qual é a aparência de 25? OK. Acho que quero fazer 35 só para ter um pouco mais de espaço para respirar, ok? E então, nas variáveis aqui, eu posso, se você estiver na versão gratuita do Figma, você terá que criar outra variável, então você pode chamar essa seção de preenchimento móvel, certo Defina isso para 35 ou qualquer que seja o preenchimento desejado. E então, como vimos ao longo da aula, adicione isso aqui. Certo. Mas, na verdade, se você estiver em um banco de dados, o que veremos um pouco mais tarde quando falarmos sobre o servidor MCP, você pode realmente criar modos diferentes para o preenchimento de suas seções Então, eu não vou demonstrar isso agora, mas mais tarde, vamos realmente criar um modo separado, ok? Eu vou abordar isso em uma lição posterior. Por enquanto, vamos fazer isso da maneira que está disponível gratuitamente com o Figma Nenhuma assinatura paga Figma é necessária para fazer essa abordagem. Só precisamos separar o preenchimento da seção em duas variáveis diferentes para desktop e celular OK. Agora temos um pouco de espaço em branco aqui que precisamos resolver. Deixe-me ver o que está acontecendo lá. Acho que isso pode estar vindo do quadro geral. Você pode ver aqui que há uma lacuna. Não queremos nenhuma lacuna entre as seções, então vou removê-la. Lá vamos nós. Obviamente, esse título precisa ser bem menor. Então, vamos discar, digamos, 32, ok? Há muita diferença entre esses dois agora, então vou trabalhar nisso a seguir. Talvez dez. Ok, legal. E se estivermos satisfeitos com um contêiner transbordando horizontalmente, podemos deixá-lo assim Assim, o usuário pode rolar até os outros cartões de produtos da coleção. Tudo bem? Vamos dar uma olhada em como isso é responsivo até agora Tudo está usando o layout automático, então deve ser muito bom Tudo bem, parece muito bom, exceto quando começamos a perder espaço por aqui. Então, eu tenho telas muito pequenas. Então, podemos criar outra moldura ou, para torná-la mais flexível, colocar a fonte nela. Eu sei que eu disse que queria aos 16, mas vamos fazer com que seja 14. E, na verdade, o texto do nosso botão também pode ser um pouco menor . Então eu vou fazer isso 14. Agora, nosso herói deve funcionar muito melhor, independentemente do tamanho da tela 768-320 Há alguns tamanhos de tela em que há um pequeno problema de UX, pois o usuário pode não saber que você pode rolar. Por aqui, você pode ver que há, você sabe, um cartão de produto sendo cortado, então isso deve indicar ao usuário que ele pode rolar para a esquerda e para a direita. Mas aqui, nem tanto, e há alguns recortes da coleção de recursos Não vou tentar corrigir esse enigma porque essa é uma pequena melhoria que podemos fazer quando chegarmos ao código Então, vou deixar isso como está por enquanto. Mas, no geral, é bastante responsivo. E, finalmente, vou colocar nosso rodapé aqui. Então clique em Command C, vá até nosso frame móvel, pressione Command V. E o que queremos fazer aqui é reajustar isso um pouco, obviamente Não queremos usar o preenchimento da seção da área de trabalho. Queremos usar o preenchimento da seção móvel aqui que altura colocamos o logotipo Tinha 75 pixels. Então, vamos fazer isso aqui também. Onde está Axis Whip 75 pixels. OK. Vamos brincar com algumas dessas opções de fluxo aqui. Talvez tenhamos configurado para a vertical. Na verdade, um dos problemas que provavelmente enfrentamos é que esses menus de rodapé têm um chicote mínimo, então só queremos remover esses chicotes mínimos Acho que o último não tinha. Mas realmente não parece haver espaço horizontal suficiente para todos esses rodapés e menus. Alinhe horizontalmente Então, vou até aqui e vou definir a direção do fluxo para vertical e o alinhamento para a esquerda E sim, acho que estou feliz com isso, na verdade. Não parece muito ruim. Vamos ver o quão responsivo isso é. Sim, funciona desde 320 até 768. Então isso é muito bom. Estou muito feliz com isso. E isso é uma indicação suficiente, espero saber como queremos que os elementos da nossa página sejam reconfigurados para dispositivos móveis OK. Agora que terminamos criar nosso design como desenvolvedores, vamos ver como podemos realmente transformar isso em código HTML e CSS da vida real. 10. De Figma a programar com Locofy AI: Tudo bem, então, nos últimos vídeos, abordamos a criação desse design responsivo no E nos próximos dois vídeos, abordaremos dois métodos para gerar código HTML e CSS diretamente desse arquivo FIGMA Agora, eu encorajo você a criar seu próprio design Figma e, em seguida, executar esse processo que vou mostrar neste e no próximo vídeo Mas se você quiser copiar meu design, posso compartilhá-lo com você aqui no Skillshare para que você possa testá-lo sem necessariamente criar seu próprio Mas eu encorajo você a fazer seu próprio design. É importante colocar essas habilidades em prática se você quiser realmente aprender Eu o encorajo a criar seu próprio design. E como falaremos sobre o líder da turma, eu encorajo você a fazer o upload disso como um projeto de classe aqui no Skillshare Tudo bem, então, sem mais delongas, vamos começar o processo de transformar nosso design Figma em HTML e CSS com um plugin Figma Você pode ver aqui porque eu já o usei antes na minha lista de plugins, eu tenho o Locofy aqui Mas para o resto de vocês, você pode clicar em Ações aqui e pesquisar por Locofy Você pode filtrar até plug-ins e widgets. Como você pode ver, ele já está aparecendo lá porque é um plug-in recente para mim. Mas se não, você pode simplesmente pesquisar Locofy e clicar nesse plug-in Algo que devo observar antes prosseguir é que , entre os vídeos, atualizei o nome do meu quadro para que ele tenha um hífen na página inicial, na página inicial para computador e na página inicial Isso é para ajudar o Locofy AI a identificar que esses dois quadros representam a mesma página, mas pontos de interrupção diferentes Então, vamos ver o quão bem o Locofy faz isso agora. Portanto, antes de prosseguirmos, é importante observar que os resultados realmente variam ao usar essas ferramentas de IA, seja o Locofy ou o servidor MCP, que veremos mais tarde Até mesmo usar o mesmo projeto Figma com o mesmo prompt pode produzir resultados inconsistentes Portanto, lembre-se de que a saída pode ser inconsistente. Então, se você estiver comparando seu resultado com o meu resultado, muitas vezes ele simplesmente não será o mesmo devido à variabilidade aleatória OK. Então, como você pode ver aqui, eu tenho duas opções. Eu posso usar o clássico ou o relâmpago. Essas são as duas opções no momento da gravação. E, claro, se você ainda não se inscreveu no Locofy, precisa se inscrever uma conta gratuita ou paga, o que quiser fazer com ela Obviamente, fiz isso antes do tempo. Mas agora que tenho uma conta no Locofy, obviamente, não preciso passar pelas etapas de embarque novamente Mas só para notar, se for sua primeira vez, você precisará passar pela configuração da conta, ok? Deve ser totalmente gratuito para os fins desta classe Figma Você realmente não precisa de mais tokens do que os fornecidos no plano gratuito. Então, vou clicar aqui para converter em código e selecionar nossos dois quadros de página inicial, e espero que o Locofy AI detecte automaticamente que eles pertencem à mesma Então, vou clicar em Converter em quadros e, como você pode ver , funcionou. Agora, está lutando para encontrar a moldura do tablet aqui. Obviamente, não há moldura para tablet. Então, o que eu poderia fazer para facilitar as coisas, queremos tornar o mais fácil possível para a IA fazer seu trabalho. É assim que vamos obter os melhores resultados. Não quero que pense que o ponto de interrupção móvel é 390 Então, o que vou fazer é duplicar nosso design móvel aqui e renomear a duplicata Então, vou arrastar isso até o máximo de 768 e rotular isso como tablet OK. São todos os mesmos elementos e o mesmo conteúdo do design móvel, mas estamos simplesmente indicando aqui para esclarecer que tudo deve ser o Obviamente, responsivo. Queremos o mesmo design nesses dois pontos de interrupção. Basicamente, há apenas um ponto de interrupção, que é 768. Está bem? Então, vamos voltar ao Locofy, clique em Converter em Em seguida, selecionaremos esses três quadros pertencentes à página inicial E agora você deve ver que ele identifica corretamente os diferentes pontos de interrupção Tudo bem? Então, vou clicar em Confirmar e agora o Locofy fará isso Obviamente, isso vai levar algum tempo, então vou passar rapidamente por partes disso Tudo bem. E agora podemos ver uma prévia no aplicativo Locofy Então, vou tornar isso um pouco maior, se eu puder. Parece que não consigo mais, a menos que vá para a tela cheia, e isso é apenas para o código. De qualquer forma, então vamos dar uma olhada. Vamos rolar para baixo. Parece muito bom para mim, ok? Não identificou que esses são links, mas isso mesmo. Podemos acrescentar isso em nós mesmos. Vamos descer até 960 e ver o que acontece. Ok, há algum espaço em branco à direita e meio que perdemos nosso cabeçalho. Então, quando chegamos ao 768, começamos a ver o design do tablet e, se formos para 420 ou Curiosamente, aos 390, funciona, mas ainda não descobriu que às 4:20, ainda queremos mas ainda não descobriu que às 4:20, ainda queremos esse design móvel. Mas isso não é necessariamente um grande problema. O maior problema é que o HTML foi criado corretamente, porque podemos refinar um pouco o CSS, consertar pequenas coisas Mas se o HTML estiver uma bagunça, teremos que refatorar todo o projeto Então, vou dar uma olhada no nosso código aqui ou pelo menos no código que o Locofy gerou Ele está trazendo algumas folhas de estilo externas da API de fontes do Google, mas elas provavelmente serão quebradas quando chegarem porque a família está configurada como objeto objeto. Esse é um bug que eu notei no Locofy. Vamos dar uma olhada em nossa seção corporal. Então, como você pode ver aqui, temos toda a área de trabalho da página inicial em um div e, em seguida, temos nosso Temos nosso contêiner, temos um cabeçalho interno. Ok, isso é bom. Cabeçalho esquerdo. Ok, bom, vá para a direita. E então terminamos com esse cabeçalho. Passamos para o herói. Nós temos o herói. Contêiner da página inicial. Não sei por que é contêiner aqui e um contêiner de página inicial Eu gostaria que fossem consistentes. E é aqui que eu normalmente vejo problemas com o Locofy, como você pode ver Eles têm duas versões diferentes do HTML do herói. Eles têm um para desktop e outro para celular. Mas, como você pode ver aqui, o conteúdo está duplicado. Os nomes das classes também são um pouco estranhos. Então você pode ver aqui que temos o que era o contêiner aqui em cima. Em seguida, temos o contêiner da página inicial e, em seguida, o contêiner dois. Todos devem ter o mesmo nome, apenas contêiner. E então esse é um nome de classe bem estranho. Nós realmente não queremos nomear nossas aulas dessa forma. E se formos até aqui, contêiner três, novamente, a ideia era ter apenas uma classe de contêiner centralizada Poderíamos entrar e consertar as aulas, corrigir essa duplicação de conteúdo Mas no próximo vídeo, vou mostrar o que geralmente dá um resultado melhor para mim, ok? Como você pode ver, estamos usando um elemento de seção aqui para o cartão do produto. Eu não escolheria necessariamente um elemento de seção para o cartão do produto, mas, como você pode ver, a estrutura é consistente entre os cartões, ou seja , descemos para o nosso FOOTA Temos o contêiner FOOTA quatro, que eu prefiro ser apenas um contêiner porque estamos usando o mesmo contêiner em todo o site e depois com nossos menus de imagens do FODA Eu não usaria um elemento B. Isso está muito desatualizado em HTML e CSS. Mas, honestamente, isso exige muito do nosso trabalho para começar Acho que podemos aperfeiçoar isso e obter um resultado muito bom. Dito isso, encontrei uma ferramenta melhor para o trabalho, que abordarei no próximo vídeo. Então, antes de passarmos para o próximo método, vou apenas observar que a próxima opção será uma opção paga. Precisaremos de um assento de desenvolvedor com o Figma para usá-lo Se você não tiver nenhum orçamento para gastar, talvez experimente o Locofy e trabalhe para corrigir o código do Locofy ou dê uma olhada em o código do Locofy ou dê uma olhada Mas para aqueles que têm pelo menos 15 dólares, acho que é uma mãe Vamos dar uma olhada no uso do servidor MCP no próximo vídeo 11. Programando no Figma com Cursor e o servidor MCP do Figma: Tudo bem, então estamos de volta ao nosso projeto no Figma, mas você pode notar que a interface é um pouco diferente, porque atualmente estamos executando a versão desktop do aplicativo Figma Agora, os dois aplicativos funcionam incrivelmente bem. aplicativo para desktop e Para mim, o aplicativo para desktop e o aplicativo da web parecem exatamente iguais. Mas a razão pela qual eu tenho o projeto aberto no aplicativo de desktop é porque isso é necessário para executar um servidor MCP local Ok, então vou entender o que isso significa em apenas um segundo. Mas antes de tudo, precisamos baixar duas coisas , se você ainda não as tiver. Número um, você vai precisar da versão desktop do Figma Então você pode encontrar isso nos downloads do Figma. Eu uso um Max, então vou clicar neste. Se você usa o Windows, obviamente, você clicará neste. E também quero que você baixe o Cursor. Você pode usar outro navegador se não quiser usar o Cursor, mas as instruções de instalação do MCP serão um pouco diferentes Portanto, se você quiser acompanhar exatamente, precisará usar o Cursor. Caso contrário, se você estiver familiarizado com a instalação MCPs ou quiser pesquisar como fazer isso em um editor de código diferente, sinta-se à vontade para criar um editor de código diferente Finalmente, como mencionei no final do último vídeo, apenas para informar que, se você quiser usar o servidor MCP, precisará de um assento de desenvolvedor Então, se analisarmos os diferentes planos aqui, se você ocupar um ano como desenvolvedor, serão 12 dólares por mês Mensalmente, são 15 dólares por mês, e como você pode ver aqui embaixo, precisamos disso para usar o MCP Server, ok Então, se você não estiver disposto a experimentar isso por pelo menos um mês, fique à vontade para pular este vídeo Mas descobri que obtenho melhores resultados usando o Cursor e o Figma MCP Server. Ok, então o que eu vou fazer é, obviamente, eu tenho meu programa Figma aberto aqui Mas o que eu ainda não tenho é uma pasta para inserir o código gerado. Então, vou abrir minha pasta Skillshare e chamar esse site do Access Ok. Em seguida, vou até o Cursor e abro essa pasta. Este é o Cursor, ele se parece muito com o código do Visual Studio, que é o editor de código usual que eu uso. E para conectar o Cursor ao Figma por meio do MCP Server, vamos acessar no Mac o item de menu que diz Vai ficar um pouco fora da tela, mas quando eu clicar nele, você verá que esse menu aparece. Em seguida, vamos entrar nas configurações. Em seguida, vamos entrar nas configurações do cursor. Em seguida, procuraremos o MCP à esquerda aqui, e você pode ver que eu já tenho dois servidores MCP configurados, então vou removê-los rapidamente e reiniciá-los com o Figma Ok, então eu os removi, e agora você pode ver com um JCNFle emptmcpt, você pode clicar aqui para adicionar MCP personalizado e, dentro desse objeto, vamos adicionar, deixe-me ampliar aqui, criar mais espaço Então, podemos ver isso claramente. Vou digitar a palavra Figma com um F. E, dentro daqui, você pode ver a sugestão, o URL e, em seguida, o endereço do servidor MCP local Vou clicar em Salvar nisso. Agora, é provável que Cursor já tenha sugerido isso porque era isso que eu tinha feito anteriormente. Então, se você está se perguntando qual é o URL específico no seu caso, acho que é exatamente o mesmo, não importa o usuário, mas quando você ativa o servidor MCP no Figma, ele fornece o Então, vamos voltar para Figma. Vamos clicar no que é conhecido como menu Figma aqui Vamos descer até as preferências. Em seguida, garantiremos que a opção Ativar servidor MCP local esteja marcada Obviamente, eu já tenho isso ativado, então vamos desligá-lo e depois voltar ao menu, e vou mostrar como isso funciona, se você ainda não o ativou. Vou clicar em Ativar servidor MCP local. Na verdade, ele fornecerá as instruções aqui para que você possa ver aqui, podemos chamá-lo de Figma ou Figma desktop e isso fornecerá a configuração das instruções Talvez eu apenas copie isso. Na verdade, isso mudou desde a última vez que fiz isso. última vez, ele realmente apareceu com o URL em uma pequena dica de ferramenta aqui, e então eu simplesmente copiei isso aqui Mas, como eu disse, acho que esse URL nunca mude. É um URL local. Portanto, se você tiver o servidor MCP ativado em seu desktop para Figma, é provável que seja o URL Está bem? Se clicarmos em mcp dot JCN, agora poderemos ver se eu diminuir o zoom trabalho Figma está ativada com este ícone verde aqui Ok. Então, agora podemos realmente gerar o código a partir do nosso arquivo Figma Então, o que vou fazer é criar um prompt aqui. Eu vou dizer que dentro do meu arquivo Figma, eu tenho uma seção com minhas molduras para a página inicial E o que vou fazer é criar apenas uma terceira versão para ajudar a locify, então vou me livrar E eu vou apenas renomear. Em vez de celular, vou dizer que, na verdade, vou mantê-lo móvel e depois direi ao Cursor que quero isso em um determinado ponto de interrupção. Está bem? Então, dentro do meu arquivo Figma, deixe-me aumentar isso Dentro da minha seção Figma fiile Aber com minhas molduras para a página inicial, a área de trabalho da página inicial da moldura aparência e o layout pretendidos de 769 pixels ou mais, e o ponto da página inicial Mobile representa o design e o layout abaixo ponto da página inicial Mobile representa o design e o com minhas molduras para a página inicial, a área de trabalho da página inicial da moldura tem a aparência e o layout pretendidos de 769 pixels ou mais, e o ponto da página inicial Mobile representa o design e o layout abaixo de 769 pixels. Está bem? Por favor, gere-me o HTML e o CSS para esta página inicial, mantendo o HTML duplicado em um mínimo absoluto Agora, antes de pressionar Enter neste prompt, escrevi algo semelhante no Cursor usando o mesmo projeto e obtive um determinado resultado. Mas, como eu disse, os resultados podem variar. Eu escrevi algumas coisas no prompt, como manter o HTML duplicado em um mínimo absoluto por causa do que vimos no Locofy AI no vídeo anterior com esse HTML duplicado para a esse HTML duplicado para A menos que seja absolutamente necessário, não queremos nenhum HTML duplicado E qualquer outra coisa que você possa imaginar para dar mais contexto à IA ou ajudá-la a entender melhor os requisitos, você pode colocar aqui. Mas o principal é que o Cursor entenda que os dois quadros representam a mesma página, mas em pontos de interrupção diferentes E o que eu gosto no Cursor, aliás, é que eu posso realmente escrever no ponto de interrupção exato que eu quero, o que não é um recurso do Locofy Está bem? Então, vou apertar esse botão para enviá-la ao agente e ver o que ela traz de volta. Talvez precisemos clicar em Executar algumas vezes aqui. Vou diminuir um pouco o zoom e arrastar isso para cima. Continue clicando em Executar. Esses são métodos no próprio servidor MCP Então, vou continuar aprovando esses. E, obviamente, como isso leva um pouco de tempo para o aplicativo funcionar, estou avançando muito rápido em grande parte desse processo. Mamãe. Ok, então parece que está pronto. Ele também nos fornece muitas informações sobre o que foi feito. Assim, você pode ver o design responsivo. Ele tem o ponto de interrupção, uma estrutura HTML única que funciona tanto para desktop quanto para dispositivos móveis. Isso é o que nós queremos. Classes CSS para mostrar e ocultar elementos com base no tamanho da tela, componentes reutilizáveis para cartões de produtos e menu de navegação Perfeito. Ok. Então, pelo que estamos lendo aqui, parece muito bom. Então, eu vou clicar em Keyball. Eu não tenho nenhum feedback. Obviamente, eu não li o código, mas obviamente você pode fornecer feedback sobre o código que ele gera. Em vez disso, o que eu quero fazer é executar esse código em nosso navegador e ver o resultado. Vamos fazer isso primeiro. O que vou fazer para fazer isso é clicar aqui para executar o Live Server. Este é um plug-in, então se você não o tem atualmente, basta acessar as extensões, e se eu olhar minhas extensões aqui, servidor ativo aqui, servidor ativo aqui, esta é a do RIT WIC Day Deixe-me diminuir o zoom para que você possa ver a lista inteira ou a maior parte dela. Servidor ao vivo da RIT Wi Day. Com esse cartão, você pode clicar em Go Live aqui embaixo e agora temos nosso site em nosso navegador Vamos passar o mouse sobre nossos itens de menu e, como você pode ver, ele tem ponteiro do cursor, o que está correto Isso é algo que não tínhamos no Locofy AI, e o botão tem um pequeno efeito de Os cartões dos produtos parecem muito bons, mas têm uma borda arredondada, que não é o que eu coloquei, e um pouco sombreados. O texto da coleção em destaque está no meio, não à esquerda, mas talvez queiramos usar esse design. Parece muito bom. Então, nesta tela, Whip, isso está parecendo muito bom. Estou muito feliz com isso. Vamos ver a página da web como ela responde a diferentes variações na tela. Ok, muito bom. Como você pode ver aqui em 958, as cartas estão um pouco apertadas Gostaríamos de corrigir isso um pouco. Quando chegarmos abaixo de 768, receberemos o menu de hambúrguer e os itens do menu Na verdade, não queremos isso e estamos fazendo com que as cartas se acumulem de forma um pouco estranha, mas isso é fácil de consertar Vamos descer para 390. Ok. E com exceção deste menu aqui e da posição do menu de hambúrguer, não está à esquerda do logotipo, parece muito bom, e você pode ver que decidimos empilhar nossos cartões de produtos em vez de deixá-los transbordar horizontalmente Tudo bem? Então, estou muito impressionado com as coisas que erraram, provavelmente podemos corrigir facilmente Vamos apenas verificar se o HTML foi escrito bem. Então, vou entrar no HTML com pontos de índice e, em seguida, talvez eu feche isso ou tente criar um pouco mais de espaço aqui, fechando o bate-papo. Como você pode ver aqui, temos um link para a API de fontes do Google, que está realmente funcionando, que está realmente funcionando, ao contrário do exemplo do Locofy E se olharmos para o cabeçalho, temos camadas que imitam os nomes configuramos em nosso Figma. Isso é o que eu estava procurando. Então, dirija nosso contêiner centralizado, cabeçalho interno, cabeça da esquerda, cabeçalho direito. Está parecendo muito bom. Você pode ver que temos uma seção aqui, um conjunto de HTML para o herói. Ele está usando a mesma classe de contêiner aqui, que é exatamente o que queremos. Ele está usando essa classe de contêiner em toda a nossa página da web. Perfeito. Não está usando uma seção para o cartão do produto, que é um pequeno detalhe, mas ainda assim, acho que é muito mais inteligente Role para baixo para ver o rodapé. Novamente, aquela classe de contêiner que temos para toda a página, e estou muito feliz com esse HTML. Está bem? A única coisa que precisaremos corrigir é que atualmente está veiculando essas imagens por meio do Figma Então, só precisamos mover as imagens para a pasta aqui ou para algum endereço diferente do nosso endereço local aqui porque não pudemos publicar isso na web porque é uma versão local do servidor Figma Ok. Mas considerando tudo, estou muito feliz com esse resultado. E então, no próximo vídeo, vamos limpar um pouco nosso código, que não deve ser muito trabalhoso, já que a IA fez um bom trabalho na geração automática do código. Mostrarei que os modos variáveis apresentam Figma e, em seguida, encerraremos a aula Então, nos vemos na próxima. 12. Limpeza final do código: Tudo bem, então, no último vídeo, com o uso do servidor MCP Figma e do cogerador habilitado para IA Cursor, conseguimos criar nossa página da web com estrutura HTML e nomes de classes adequados, além do CSS para fazê-la funcionar em todos os tamanhos de tela, I E para ser responsiva, mas não está 100% Não podemos simplesmente pegar esse resultado e enviá-lo diretamente. Precisamos fazer algumas mudanças. Mas acho que você concordará comigo que IA fez um trabalho muito bom. Só precisamos fazer o último, digamos, 10% de refinamento para corrigir esse design OK. Então, se olharmos que esta é a maior tela com, mas talvez se eu simular isso em uma tela muito maior com, eu me pergunto se podemos aumentar isso para ver como é em 4.000 Ok, legal. Então, aí você pode ver que essa é uma tela improvável, mas ainda assim é possível. E o único problema que vejo nesta tela são os rostos dos modelos Lembre-se de que eu disse anteriormente quando estávamos adicionando o preenchimento do plano de fundo, que seria bom controlar o posicionamento, o ponto de ancoragem da imagem de fundo Então, podemos fazer isso em HTML e CSS. Vamos clicar em nossa seção de heróis aqui. Vamos ver como eles incluíram a imagem. Sim, então eles acabaram de colocá-lo como uma imagem de fundo no elemento por meio do CSS. E o que vou fazer para não depender dos servidores Figma MCP, vou mover esses arquivos de ativos e refatorar Mas antes de tudo, quero mudar a posição de fundo. Desculpe. Tudo está um pouco apertado aqui. E como você pode ver, quando eu passo o mouse sobre isso, ele preenche todo o espaço Mas, basicamente, o que estamos procurando é a posição de fundo aqui. E em vez do centro, eu quero que isso esteja no topo. Agora, isso parece um pouco estranho porque o queixo dela está um pouco cortado. Então, talvez queiramos definir outro ponto de interrupção e, em telas muito grandes, talvez tornar a altura da seção ainda maior. Então, vou usar minhas ferramentas de desenvolvimento aqui para marcar uma altura maior, talvez não 12. Cem, mas 1.000 pixels talvez eu olhe para o cabeçalho, que tem 98 pixels de altura, e faça isso se estender até a parte inferior da dobra, então eu posso fazer isso usando Cuk com 100% altura da janela de visualização menos o que era, novamente, OK. OK. É que eu vou voltar para o Cursor. Vamos até o final do nosso arquivo CSS aqui, insira a largura mínima da mídia e, digamos, 1.500 para começar O seletor é hero, e vamos definir a altura para a altura da visualização do Calk 100 Está bem? E então vamos mudar a posição de fundo superior, não em uma consulta de mídia, mas apenas em geral. Então, vamos procurar um herói. Em vez do centro da posição de fundo, mude para cima. OK. Isso parece um pouco melhor. Mas em vez do topo, podemos escolher algo um pouco mais direcionado, seja, para colocar em segundo plano, perdemos nosso atributo aqui. Deixe-me fazer isso diretamente no código aqui. Em vez de cima, vou fazer a posição de fundo Y. E depois coloco cerca de 5%. Tudo bem. Vamos brincar com isso, para que possamos fazer com que 5% seja mais ou menos isso, o que aumenta um pouco em relação ao topo, como você pode ver aqui. 5% reduzem um pouco o espaço acima da cabeça do cara. Ok, então vamos reduzir a largura da tela. Lembre-se, definimos isso em 1.500. Então, se chegarmos a 1.500, tudo isso deve funcionar para nós Na verdade, precisamos definir nossa posição de fundo X também, porque, como você pode ver aqui, ela não está centralizada Então, vamos trazer de volta nosso posicionamento central no eixo horizontal, assim. Ok, ótimo. E então, quando ficar abaixo de 1.500, você verá que a altura não é tão alta, certo? Então, até 1.200, acho que tudo está bem. Estou bem com isso. Se quiséssemos que nossos cartões se parecessem mais o design original sem o raio da borda, se quiséssemos remover o estado dos cascos e se quiséssemos remover as sombras, poderíamos Mas eu estou muito bem com isso. A única coisa com a qual tenho problemas é que eles são bem altos, então não sei se quero isso. Então, deixe-me remover modo responsivo e peço desculpas por ser muito rígido aqui E vamos ver o que está tornando isso assim. Se você der uma olhada em nosso contêiner, ele tem apenas 847 pixels largura porque tem um preenchimento enorme. OK. Então, na classe de contêineres, há um acolchoamento gigante que foi definido, que não é o que buscamos Eu acredito no Figma, ajustamos o preenchimento do contêiner para 16 Então, na verdade, por algum motivo , não vai me deixar mudar isso. Mas vamos voltar ao nosso código aqui, encontrar o contêiner. E então eu acho que se procurarmos por ele novamente, você pode ver que ele tem um preenchimento de 16 pixels, mas apenas até 480 pixels aqui Então, podemos simplesmente remover isso completamente. Dos estilos de desktop aqui e depois daquele que está abaixo de 480, também podemos removê-los porque simplesmente redundantes e vamos usar um preenchimento de 16 pixels em cada lado Agora, se dermos uma olhada, eles não são tão apertados, são muito fáceis de consertar. Tudo bem. Então, vamos verificar novamente nossos tamanhos de tela super grande, como estão? Vamos ligar para 4.000. Legal. Estou feliz com isso. Se cairmos para 1.200, fico muito feliz com isso. Vamos descer para 1.000. Legal, legal. Tudo bem. Então, provavelmente estamos onde estamos por aqui. Então, isso é 1030. Vamos derrubá-lo, descer, descer, descer. Acho que está ficando um pouco apertado aqui. Talvez queiramos definir um ponto de interrupção de talvez 10.000 até o ponto de interrupção móvel Talvez queiramos dividir isso em uma grade diferente, talvez uma grade de dois por dois como essa. E então os cartões do produto alteram a largura máxima deles, então fica um pouco assim. E eu faço isso. Vamos criar um ponto de interrupção no final do nosso arquivo CSS aqui. Min com 769 pixels e Max com 10.000. E então o que temos? Vamos remover a largura máxima do cartão do produto, máxima com, digamos, 100%, e o que era, grade de produtos. Na verdade, vou copiar isso. Me poupa algum tempo escrevendo isso, defino para duas, a mesma lacuna de antes. Então agora você pode ver que, quando chegarmos, na verdade, talvez eu tenha definido isso para muitos zeros. Lá vamos nós. Quando chegarmos acima de 10.000, teremos quatro horizontalmente Mas quando chegarmos até aqui, você verá que obtemos uma grade de quatro. E isso deve ser bom para todos os tamanhos de tela de nosso desktop. Então, 769 até muito grandes, tipo, testamos até 4.000 Agora vamos dar uma olhada abaixo de 769. E, como você pode ver, temos algum trabalho a fazer aqui. Portanto, não queremos mais que esse menu seja exibido. Portanto, diz apenas desktop, o que é interessante. E tem uma classe configurada para não exibir nenhuma. Mas então, é claro, está sendo sobrescrito aqui por essa outra classe Há algumas coisas que podemos fazer. Poderíamos colocar coisas importantes aqui. Poderíamos mudar o pedido. Como diz apenas desktop, não há problema em definir esses dois como importantes, certo, porque é um nome de classe bastante específico. Normalmente, você tem que ter cuidado com a importância, mas se eu estou colocando o desktop da classe apenas em alguma coisa, é quase certo que eu não quero que isso apareça. OK. Agora, a outra coisa no cabeçalho é que o menu do celular está à direita. Não sei como a IA errou. Isso não fazia parte do design, mas podemos simplesmente acessar nosso arquivo de índice aqui e movê-lo diretamente da cabeça da direita para o cabeçalho da esquerda. Está bem? Opa, crie o espaço lá, coloque-o lá e você verá que está na cabeça ou na esquerda O alinhamento parece um pouco errado. Eles estão configurados para alinhar os itens ao centro, mas às vezes os ícones têm uma altura um pouco estranha Então, como você pode ver aqui, o botão é um pouco maior do que o SVG dentro dele Há algumas maneiras de corrigir isso. Uma delas é colocar display flex nisso. Entendo. Somente para celular, temos o Block Important nos bloqueando. Então, sim, eu só vou usar Important quando estamos falando sobre display none, e então vou colocar display flex aqui com os itens de alinhamento colocados no centro do próprio botão, e você pode ver que, com isso ativado, ele meio que o move para Então, vou para a opção Menu aqui, ponto Menu Toggle . E, como você pode ver aqui, em vez de tentar criar todo esse HTML e CSS a partir do design, estou usando a IA para cortar cerca de 80% do trabalho e, em seguida, posso refinar isso com um pouco de limpeza de código, ok Então, eles já estão se acumulando, que eu não acho que seja o movimento certo Então, vamos encontrar nossa classe de grade de produtos aqui. E diz que abaixo de 768, queremos que seja uma coluna. Não vamos fazer isso. Vamos dar duas colunas. Mas à medida que reduzimos os tamanhos de tela ainda menores, provavelmente queremos que ela seja empilhada como uma coluna, ok? E então o cartão de produto Max WIP, na verdade, provavelmente podemos simplesmente remover o máximo completamente em qualquer tamanho de tela Desculpe, deixe-me descobrir isso novamente porque a largura máxima deve ser restringida qualquer maneira pelo contêiner com o espaço disponível em telas muito grandes. Então, basta verificar isso. Vamos voltar para 4.000 e você verá que, de qualquer forma, as cartas não ultrapassam 280 WIP, porque há quatro delas em uma fileira e elas estão dentro de um contêiner de WIP máximo Tudo bem. Então, voltando para, digamos, 650. Está parecendo muito bom. OK. E então vamos começar a usar o modo responsivo aqui para discar. Telefone 12 Pro. E, como você pode ver aqui, esses cartões de produtos são um pouco altos demais. Então, acho que nessa largura, vamos querer uma única coluna. Então, como você pode ver aqui, já existe um ponto de interrupção para 480. Então, o que vou fazer é, antes do cartão do produto, colocar um seletor aqui para a grade de produtos e definir as colunas do modelo de grade para um FR Legal. Eu gosto disso no celular. OK. Então aí está, pessoal. Agora está basicamente ininterrupto, mas não é particularmente funcional, e esses botões realmente não fazem nada Então, obviamente, precisaríamos projetar isso e construir isso. Talvez queiramos colocar o cursor como ponteiro nesses cartões Eu vou fazer isso. Então, coloque o cursor no ponteiro. E agora isso indica que, se eu clicar nesses cartões, vou para o produto individual. Se quisermos dar um passo adiante , ainda podemos usar a IA com o Cursor, sem um design Figma ou com um design Figma , se quiséssemos entrar aqui e criar nosso menu da barra lateral e nosso Poderíamos fazer isso com o Figma e depois referenciá-lo em um prompt Mas digamos que não construímos o design. Ainda podemos pedir ao Cursor que o crie para nós. Então, precisamos trazer de volta nosso agente Cursor. Vou pressionar o Comando I para fazer isso, e isso abrirá um bate-papo novamente. E o que vou fazer é me certificar de que sei a classe exata da opção de menu. Vou copiar isso e vou dizer que no celular, estou abaixo de 769 pixels Quando o usuário clica em, quero que uma gaveta da barra lateral apareça da esquerda com os mesmos itens de menu, pois é melhor ser bem específico Se você usar classes reais do HTML, isso lhe dará o melhor resultado. Então, vou encontrar o menu de cabeçalho como menu de cabeçalho de pontos. Está bem? No celular, quando o usuário clica nessa classe, quero que uma gaveta da barra lateral apareça da esquerda com os mesmos itens de menu desse Está bem? Se você tiver outros requisitos, se for realmente bom em descrever o que deseja, especificamente, pode adicionar mais detalhes, mas vou pressionar Enter e ver o que o Cursor cria. Como você pode ver, ele está examinando uma ou duas listas e atualizando nosso código. Se tivéssemos um design Figma para a gaveta, atualizaríamos esse prompt para dizer: Infigma, temos Por favor, siga esse design. Nesse caso, não vamos deixar o Cursor decidir o design para nós. E eu vou clicar em Manter A. E agora vamos dar uma olhada. Se olharmos nosso design no celular e eu clicar no item de menu aqui. Na verdade, fez um trabalho muito bom. Estou impressionado. Aí está. Portanto, temos os mesmos itens de menu que temos no desktop. Ah, e agora nós os perdemos. Então, vamos descobrir para onde eles foram. Só o desktop não é importante. Só que o desktop nem estava em um ponto de interrupção. Então, em vez de ser assim, prefiro que seja o contrário. Portanto, apenas no desktop até a mídia Max WIP, provavelmente já temos uma consulta de mídia para isso Então, em vez disso, encontre a consulta de mídia para Max WIP 768 e coloque apenas nove telas importantes para desktop OK. Agora você pode ver que temos nosso menu no desktop e, no celular, que se reduz a esse ícone de hambúrguer Clicamos nele e temos os mesmos itens de menu aqui. Está bem? Também podemos criar uma gaveta de forma semelhante usando IA para o carrinho Mas, obviamente, precisaremos criar muitas funcionalidades de JavaScript para que isso funcione. E muito mais lógica, depende da plataforma que você está usando. Mas sim, estou muito feliz com esse resultado. Estou gravando esse vídeo há talvez 15 a 20 minutos, e podemos pegar o resultado gerado pela IA e deixá-lo assim, totalmente responsivo a dispositivos móveis, com uma gaveta lateral para o Então, eu encorajo você a, depois de gerar o código para seu próprio projeto, limpar o código HTML e CSS e compartilhar conosco o resultado na seção de projeto de classe desta classe. 13. Modos variáveis do Figma: Tudo bem, então neste vídeo final, antes de concluirmos, estou de volta ao figma, e o motivo é porque quero mostrar a vocês um recurso interessante, o Figma, que é relevante para o que estamos fazendo e que eu recomendo que você use, mas requer a posição de desenvolvedor ou superior do Figma, o que significa que é É por isso que eu não o mostrei para você antes. Mas agora que examinamos o MCP e demonstramos o que requer um conjunto de desenvolvedores ou superior, pensei que, se você decidiu mudar para um plano pago com o Figma , vai querer usar Está bem? Então, eu aludi a isso mais cedo, quando configuramos nossas variáveis Mas se voltarmos às nossas variáveis aqui e eu for ao dimensionamento, você pode ver que tenho preenchimento de seção e preenchimento de seção móvel Esse é o caso de uso perfeito para um modo. Faz sentido ter dois diferentes quando é só o modo que muda. Está bem? Então, o que vou fazer é clicar nesse botão aqui para criar um novo modo variável. E vamos ver se consigo estender isso. Lá vamos nós. Assim, podemos ver os dois modos ao mesmo tempo. E em vez do modo um e do modo dois, o que vou fazer é dizer desktop padrão e, em seguida, vou criar um para celular. Está bem? Para largura e preenchimento da página, temos os mesmos valores, independentemente de ser desktop ou celular Sempre podemos mudar isso se quisermos, mas aqui você pode ver que, no preenchimento da seção, obviamente temos uma diferença Então, vou definir aqui o preenchimento da seção no modo móvel para 35, permitindo que eu exclua essa variável aqui, ok? Agora, o que isso vai fazer é usar a mesma variável no desktop e no celular, mas depois alterar o modo geral do quadro principal para modificar essa variável. Está bem? Então, vamos ver como isso funciona se eu passar para o meu design móvel agora. Devemos ver o preenchimento da seção fixa de 35. Você vê aqui que está um pouco acinzentado e desvinculado porque removemos essa variável Se eu entrar aqui e apenas configurá-lo para preenchimento de seção, será igual ao preenchimento de seção maior no desktop, mas corrigiremos isso em apenas um Então, vou definir isso como preenchimento de seção. Agora, para que ele responda a um modo diferente, precisamos dizer em qual modo esse quadro deve operar. Então, se eu clicar na moldura móvel da minha página inicial e passar aqui para a aparência, você pode ver este ícone aqui, aplicar o modo variável Então, vamos clicar nisso, entrar em dimensionamento e clicar em Celular Agora você pode ver se eu for até aqui e entrarmos em nossa seção de preenchimento aqui, é 35 lá, mas aqui, é 75 Então, obviamente, não precisávamos definir um modo na versão para desktop, mas vamos fazer isso para completar, porque ele usa automaticamente a primeira opção Se quisermos que seja específico, podemos entrar e definir o modo desse quadro para o padrão da área de trabalho, e você pode realmente ver o modo exibido aqui. E esse é apenas um exemplo básico de uso de modos. Deixe-me te mostrar algo legal agora. Não sei como descrever isso, então vou apenas mostrar mas poderíamos definir, por exemplo, o tamanho do texto do botão no desktop e no celular como uma variável e depois alterá-lo com base no modo. Então, como você pode ver, são 20 no desktop e 14 no celular. Em vez de tê-lo como dois valores diferentes, o que posso fazer para tornar isso mais automático e, novamente, isso é opcional. Ainda obtivemos um bom resultado com a geração de código de IA sem isso. Mas se você quiser levar tudo isso um passo adiante, se eu entrar aqui e vamos criar o tamanho do texto do botão. E então o primeiro no desktop foi 20, não foi? 20, eu acredito, e o outro tinha 14. Então, o que podemos fazer agora é ir até aqui mudar isso para usar uma variável em vez disso. Então, eu simplesmente desço até o final, clico neste ícone para ver a variável, escolho o tamanho do texto do botão. Isso o definirá automaticamente para 20 porque o modo do quadro principal é desktop. E se eu for até aqui, fizer a mesma coisa na versão móvel, alterar o tamanho do texto do botão, será 14. E o mais legal é que, se eu duplicasse esse componente, na verdade, provavelmente gostaríamos de definir o texto do botão no próprio componente pai Então, vou fazer isso agora com o tamanho do texto do botão, certo? Agora, se fôssemos duplicar esse botão, espero que isso fique visualmente óbvio quando eu fizer isso Mas se eu arrastar esse elemento daqui para cá, podemos ver uma mudança instantânea de um tamanho de tela para o outro. Está bem? Então, isso é só um pouco sobre os modos. Na verdade, poderíamos pegar todo o cabeçalho e refatorar grande parte desse conteúdo como variáveis, definir um modo separado para essas variáveis e, em seguida, arrastar a seção para o outro quadro, e ela se transformará automaticamente no design móvel Mas isso não é necessariamente necessário para obter um ótimo resultado com nossa geração de código de IA. Modes não é algo nativo do HMLCSS, mas apenas algo que torna nossas variáveis um pouco mais Por exemplo, ter dois preenchimentos de seção que são essencialmente a mesma coisa, mas para tamanhos de tela diferentes, ter o mesmo nome para os dois modos, mas apenas alterar o valor com base no modo, é um pouco mais limpo do ponto de vista do projeto FIGMA Ok. Então, com essa pequena dica, vamos concluir no próximo vídeo e falar sobre seu projeto de classe. 14. Conclusão e projeto do curso: Isso conclui esta aula sobre web design Figma para desenvolvedores web Para seu projeto de aula, eu encorajo você a criar seu primeiro web design Figma usando as técnicas que abordamos nesta aula, configurando seu layout com layout automático e componentes, nomeando suas camadas adequadamente e preparando seus designs para que possam ser transformados em código com uma das ferramentas de IA que exploramos Depois de concluir seu design, faça o upload para a seção de projetos da turma para compartilhar seu trabalho com outros alunos ou para obter feedback meu pessoalmente. Se você gostou dessa aula, deixe uma avaliação positiva e confira minhas outras aulas aqui no skillshare.com, onde eu me aprofundo no desenvolvimento web, no Shopify e em outras ferramentas modernas Obrigado, como sempre, por assistir, e nos vemos na próxima.