Sites do Figma: construir e lançar um site

1. Introdução aos sites do Figma: Com o Figma Sites, você pode criar e publicar todo o seu site de dentro do Figma Sem código, sem desenvolvedor, sem pilha complicada. Basta arrastar e soltar, criar e publicar. Você pode até mesmo configurar bibliotecas compartilhadas, para que sua equipe use os mesmos blocos, cores e estilos, mantendo tudo consistente e de acordo com a marca. Neste curso, vou guiá-lo do básico aos tópicos mais avançados, até o lançamento do seu site Começaremos do zero usando os blocos pré-construídos Figma. Perfeito para iniciantes. Mostrarei como conectar subpáginas, adicionar elementos personalizados e dar vida ao seu lado com interações simples e animações suaves N. Você aprenderá como criar elementos reutilizáveis, como NAFBAs e Vamos incorporar vídeos e mapas e até mesmo criar blocos de código personalizados com IA usando o Figma Make Em seguida, publicaremos com um URL gratuito do Figma ou com seu próprio domínio Mostrarei como configurar tudo para acessibilidade e otimização de mecanismos de pesquisa. Assim, seu lado está polido e pronto para ser lançado. Se quiser dar um passo adiante , mostrarei como criar sua própria biblioteca de design com cores flexíveis, tipografia e blocos responsivos Você pode reutilizar em todos os seus projetos. Figma Sites é perfeito para portfólios, lançamentos de produtos e páginas pessoais ou pequenas empresas Uma maneira rápida e fácil de colocar sua ideia on-line e se concentrar novamente em seu produto. Este é o caso do moonlearning dot IO. 2. Material do curso: Para obter o material do curso, acesse o projeto e os recursos e, em seguida, veja um link chamado Downloads do material do curso. Clique nele. Você acessará a página de download e, em seguida, verá a miniatura do curso que está fazendo no momento Basta clicar em Baixar. Então, há dois arquivos para baixar, então um que termina em dot site, que é a página onde eu mostro tudo o que estou construindo durante o curso, você pode simplesmente inspecioná-lo ao seu gosto e brincar com Você não precisa disso, mas pode ser muito útil. E a que está aqui em cima, está na parte final do curso, onde vamos construir nossa própria biblioteca. Portanto, esta é uma biblioteca que você pode conectar. Você já pode baixar os dois agora. Portanto, para acessar esses arquivos, você não pode simplesmente clicar duas vezes neles para abri-los. Você precisa importá-los para o FIGMA. E vou percorrer a interface Figma em um segundo com mais detalhes Então, se você é novo nisso, não se preocupe. Vamos abordar isso com mais detalhes. Em geral, você precisa acessar sua conta e, em seguida, acessar seus projetos e selecionar um projeto. E lá dentro, você deve encontrar algum tipo de botão de importação. Isso continua mudando um pouco agora. Se você clicar em Criar , encontrará o botão Importar aqui e poderá simplesmente importar os arquivos que baixou. Não importa se é um arquivo de sites ou arquivos de design Figma, você pode armazená-los todos no mesmo projeto 3. BÁSICO: navegador de arquivos Figma: O navegador FigmaFle. Antes de nos aprofundarmos, vamos primeiro dar uma olhada na estrutura de trabalho do Figma Isso é especialmente importante se você é novo no Figma. Quando você abre sua conta, pode ser algo parecido com isso. Pode haver pequenas diferenças, por exemplo, se você estiver trabalhando em um navegador ou também se estiver trabalhando em outra versão ou atualização , às vezes as coisas mudam um pouco. No entanto, no núcleo, você deve encontrar os mesmos elementos. Então, o que você precisa é encontrar sua equipe e, dentro da sua equipe, você tem algo chamado projetos. Você pode ter mais de uma equipe no Figma, então você pode ser convidado para algumas equipes Você pode ter algumas equipes pagas para si mesmo ou pode ter algumas equipes gratuitas. Se você clicar em um pequeno erro, poderá ver todas as suas equipes e alternar entre elas. A equipe em que estou agora é uma equipe profissional. Para usar os sites e bibliotecas Figma, por exemplo, você precisa de uma conta profissional ou superior no momento Então, dentro da sua equipe, você vê os projetos, e esse termo é um pouco confuso Então esse é um nome que vem desde o início de Figma, e eles o mantiveram Então isso significa que esses são projetos diferentes. No entanto, você pode realmente usar isso para absolutamente tudo. Veja isso como uma camada de organização, na verdade. Agora, você pode ver aqui que eu tenho dois projetos, e o que queremos fazer é criar um novo para esse novo projeto em que vamos criar nossa página de Sites agora. No momento, no aplicativo, temos o botão Little Plus Project aqui. E, como eu disse, isso continua mudando o tempo todo. Para ser sincero, eu esperaria algo por aqui, mas não temos um botão de adição aqui. Então, vamos clicar aqui, clicar em Projeto, e agora você pode simplesmente nomear seu projeto. Então, vou nomear a demonstração do Sites. E então ele pergunta se você quer convidar outras pessoas. Não precisamos disso por enquanto, então basta pular para que você sempre possa convidar mais tarde. E agora você pode ver que tem seus novos projetos. Se clicarmos em todos os projetos, você verá que ele criou o terceiro e, a propósito, há um pequeno botão de estrela. Então, isso é muito útil. Você pode ver se você adicionar um projeto aos favoritos e, em seguida, ele aparecerá na linha lateral para que você possa acessá-lo Clique duas vezes aqui onde você começou ou diretamente no projeto e, em seguida, dentro de onde você pode criar arquivos. Então, ao criar um arquivo, usamos o mesmo botão e você pode ver uma alteração agora. Portanto, se clicarmos em mais ou no pequeno erro descendente aqui, você verá que pode escolher entre arquivos de design, FIG Jam e assim por diante Agora, queremos usar um arquivo sits. Então clique aqui e você vai direto para o arquivo lateral. Você será perguntado se deseja usar modelos. Por enquanto, vamos clicar em Não. E se você quiser voltar à sua visão geral, clique no pequeno botão Casa. Novamente, isso pode parecer um pouco diferente se você estiver no navegador e voltar à tela principal. E lembre-se de que você pode acessá-lo acessando todos os seus projetos, encontrando os projetos em que está e, logo dentro, verá o arquivo que acabou de criar. Você pode renomear seu arquivo daqui ou diretamente daqui clicando com o botão direito do mouse e clicando em Renomear 4. BÁSICO: visão geral da interface de sites: A interface do Figma Sites. Então, isso é o que você vê mais ou menos quando está abrindo seu arquivo. Agora, vamos diminuir o zoom um pouco. Você pode usar Command and minus e Command and plus para ampliar ou simplesmente usar as teclas do mouse Então, essas são nossas telas, essa é nossa casa, e você sempre começará com uma página inicial que é basicamente a página inicial que será aberta mais tarde E geralmente o que ele mostra é um desktop e um celular. Isso também pode mudar com o tempo. E eu recomendo que você clique no pequeno botão Mais aqui em cima e também adicione um tablet. E, na verdade, se você pressionar Shift e dois , terá uma visão completa muito boa disso. Então, antes de mergulharmos no design, vamos dar uma olhada no que está acontecendo por aqui, como as opções que temos nessa visualização. Então, no lado esquerdo, você tem o painel de camadas. Isso significa que você vê tudo o que está acontecendo na tela. Então, agora você pode ver que temos uma página da web. Você pode adicionar mais. Nós vamos fazer isso mais tarde. E você pode ver aqui a casa e depois os detalhes. Então, temos esses três pontos de interrupção, e você também pode ver o que está neles. No momento, não temos conteúdo. Vamos adicionar qualquer coisa aleatoriamente. Então, por exemplo, vamos adicionar uma espécie de círculo aqui. E agora você pode ver que isso foi adicionado a todos eles. Então, isso foi adicionado ao desktop, ao tablet e, digamos, no celular, poderíamos movê-lo individualmente. E digamos que não queremos esse elemento no celular, apenas no desktop e no tablet. Agora, se clicarmos em excluir, você pode ver que isso estaria oculto porque é a mesma tela. Portanto, as coisas sempre estariam presentes em todos os lugares, mas você pode mostrá-las e ocultá-las ao seu gosto Se você retirá-lo do desktop, ele será retirado em qualquer outro ponto de interrupção Então, mais tarde, você também encontrará o botão de publicação aqui. Vamos aprender em detalhes como publicar nossa página. É super fácil. Então aqui, você tem esse em que , com o Insert, você tem blocos e bibliotecas. Então, blocos, isso é, tipo, uma espécie de elementos pré-fabricados pela Figma Então, vamos pegar um herói. E se você soltá-lo no elemento da área de trabalho , verá que ele também já está configurado para todos os outros tamanhos de tela. Então, isso é muito útil, e você pode, é claro, alterá-lo ao seu gosto Também tem bibliotecas. aprender como conectar nossas próprias bibliotecas. Então, isso vai parecer com esses blocos aqui, mas vamos criar os nossos próprios, e eu vou te mostrar como fazer pontos de interrupção e tudo Então, aqui, você tem uma pesquisa, então você pode pesquisar qualquer elemento. Então temos nossa marca. Então, isso é realmente empolgante. Aqui, podemos adicionar elementos de código. Novamente, vou mostrar tudo isso em detalhes. Então aqui você já tem uma prévia. Figma está trazendo um CMS agora mesmo no momento da gravação Isso ainda está em andamento, mas vou adicioná-lo assim que estiver pronto. E então aqui temos algumas configurações. Então é aqui que você definirá o favicon, a pré-visualização e as informações sobre sua página Novamente, vamos analisar tudo isso. Então, por padrão, sempre tenha seu arquivo aberto. Então, na parte inferior aqui, você tem suas ferramentas, então você pode curtir, vamos escolher um texto, para que você possa simplesmente adicionar o texto aqui ao seu gosto E então, assim que você pegar um elemento, isso pode ser texto ou vamos adicionar nosso círculo aqui novamente. Se você pegá-lo, no lado direito, poderá ver a propriedade. Então, por exemplo, você pode alterar o tamanho do texto, alterar a fonte e tudo isso, as cores e qualquer propriedade de qualquer elemento que você pegar aqui. Então, a melhor maneira é passar por aqui. Então você tem formas diferentes. Você tem ferramentas de desenho , imagens, texto. E você também está aqui, você pode adicionar novas páginas. Novamente, vamos fazer isso separadamente e fazer. Vamos explorar isso em um vídeo separado. No painel do lado direito, você não tem apenas as propriedades. Assim como ao lado das propriedades, você também vê as interações. Então, isso é, tipo, você pode adicionar efeitos Ha, conectar páginas. E, novamente, vamos analisar tudo isso com mais detalhes. 5. BÁSICO: crie sua primeira página: Então, vamos começar configurando nossa primeira página com Pigmacytes A maneira mais fácil de começar e ainda ter muito controle sobre seu layout é provavelmente usar blocos. Clique em um pequeno sinal de adição e você verá os blocos Figma predefinidos Portanto, existem páginas predefinidas, mas temos melhor controle sobre o layout se estivermos usando os blocos reais Você pode ver que há navegação, heróis, recursos. Vamos começar com uma navegação. Vamos pegar qualquer navegação e depois arrastá-la A parte importante é que você só precisa arrastá-la para a versão desktop e, em seguida, ela criará todos os pontos de interrupção para você automaticamente Isso está embutido nesses blocos. Na verdade, vamos transformar isso em um pequeno portfólio , então vou até heróis e vou arrastar uma seção de heróis. E então, a partir dos recursos, vou adicionar um texto, algo assim, descrevendo minhas habilidades, talvez uma imagem como algo sobre. E então o que eu também quero no final é algum tipo de rodapé, então isso deve ser navegação Vou usar esse rodapé muito simples aqui. Agora, o que você pode ver é que eles não estão na ordem exata. Por exemplo, eu quero que o pé fique mais para baixo, então você pode simplesmente arrastá-lo ou você também pode usar as teclas A, e então você pode mover esses blocos inteiros ao seu gosto E observe como eu só preciso alterá-lo na área de trabalho e, em seguida, todos os outros pontos de interrupção virão Agora, qualquer coisa que eu excluiria na minha área de trabalho, por exemplo, se eu me livrasse de todo esse bloco isso aconteceria com todos os pontos de interrupção Mas note uma pequena coisa. Então, digamos que eu estou aqui, eu tenho esses botões, então vamos usar o secundário. Digamos que estamos retirando o secundário. Agora, aqui você pode ver que esta é a área de trabalho e dar uma olhada no que está acontecendo aqui. Se eu tirar o secundário , isso vai desaparecer completamente. Então é aqui que você pode realmente escolher se um elemento deve desaparecer completamente. Mas você também pode dizer: eu só quero esse botão na minha versão principal para desktop. Mas, por exemplo, no meu tablet, por qualquer motivo, eu não quero isso. Se você clicar em excluir, ele simplesmente o ocultará. E está tudo bem, apenas esteja ciente disso. Você também pode ocultar a seção inteira. Então, digamos que você não queira essa seção no desktop. No final das contas, ela pareceria sumida, mas observe como ela sempre estará aqui no painel Layers. Então, antes de alterarmos o conteúdo, vamos realmente ver aparência da nossa página em uma configuração dinâmica como ela ficará no navegador. Há diferentes maneiras de obter uma prévia. Você pode clicar neste botão de reprodução aqui ou você tem o botão de reprodução aqui. Com esse pequeno erro, você pode escolher se deseja uma visualização em linha ou uma página inteira Então, vamos clicar nele e, em seguida, você terá uma prévia própria. E veja, é muito bom. Já há alguma animação ambientada aqui. Assim, você pode redimensioná-lo, ver o comportamento diferente e também pode percorrer isso muito bem Se voltarmos aqui, o que você também pode fazer é usar o atalho e obtê-lo caso o esqueça aqui Então, mude no espaço. E se eu pressionar Shift e espaço, fico útil na visualização de arquivos, então é um pouco melhor trabalhar rapidamente nisso Ao usar os blocos predefinidos, o Figma é muito inteligente Então, se clicarmos aqui, você pode ver que ele já configurou o chamado layout automático para você. Então, eles adicionaram um layout vertical. Você pode ver que vemos a página inteira. Se você nunca vê a página inteira, precisa ir aqui na altura e verificar se ela está configurada para abraçar E todos os nossos blocos já estão configurados para algo chamado preencher o recipiente no redimensionamento Então, para começar, isso é ótimo. Então, tudo está configurado e vamos começar a partir daí. Lembre-se de que, mais tarde, quando adicionarmos elementos ou você estiver alterando coisas, precisamos entender um pouco melhor essa seção de layout para ter controle total sobre nosso layout. Mas, no nosso primeiro exemplo simples, tudo está funcionando da maneira que queremos, então agora podemos adicionar nosso conteúdo. E isso é realmente muito simples. Basta selecionar o conteúdo na trabalho e alterá-lo de acordo com sua preferência, e isso se refletirá em todos os pontos de interrupção Assim, você pode ir aos poucos e depois adicionar o texto ao seu gosto E, por exemplo, eu quero me livrar desses botões. Na verdade, eu não preciso deles, então vamos nos livrar disso. Agora, se quisermos adicionar nossas imagens, podemos simplesmente selecionar qualquer moldura ou forma e, por meio do menu de preenchimento, você clica em upload de preenchimento do computador e pode selecionar qualquer imagem. Há uma função de importação em massa no Figma, então você pode pressionar Shift Command e K, e então você pode literalmente selecionar as imagens e soltá-las onde quiser O único problema no momento é que há um pequeno bug, então ele não os adiciona aos pontos de interrupção atualmente Espero que isso seja resolvido no momento em que você estiver usando isso. Por enquanto, vou fazer isso manualmente. Só vou acelerar isso para você. Agora, se você quiser misturar um pouco os elementos, você também pode fazer isso, basta selecionar a imagem e, com a tecla de seta no teclado, movê-los Novamente, você pode ver que isso se reflete em todos os lugares. Acabei de entrar em segundo plano e já atualizei todo esse texto aqui. Você pode fazer isso completamente ao seu gosto. Outra pequena coisa que você pode realmente querer fazer é que pareça um pouco plana, toda em branco. Então, você pode simplesmente selecionar determinados blocos e clicar no botão de preenchimento caso não veja uma cor de preenchimento, e eu vou dar um leve tom de cinza claro apenas para dar um pouco de profundidade E assim, se pressionarmos o botão play, você verá que tem um primeiro design web realmente lindo e funcional pronto em pouco tempo. E, a propósito, todas essas lindas fotos que estou usando são do lomi.ai. Você pode encontrar muitas imagens gratuitas, atualizar para um plano profissional e obter imagens fantásticas geradas por IA para seus designs. 6. BÁSICO - Conecte-se a subpáginas: Então, agora vamos adicionar uma subpágina. Então, o que eu quero que aconteça é clicar em uma dessas imagens do portfólio e obter mais informações em uma página separada. Então, o que eu preciso fazer é adicionar essa página, então clicamos em adicionar uma página da web Você também pode fazer isso aqui. E então o que você obtém é esse tipo de página. Então, temos apenas o desktop, mas precisamos dos mesmos pontos de interrupção Então, o que vamos fazer é clicar no botão Mais, adicionar um tablet e adicionar um celular para controle de quedas. Você pode renomear a página. Então, vou ligar para esse café. Vou começar com meus blocos novamente. E desta vez, o que eu quero é algumas funcionalidades. Então, eu quero algo que seja um monte de imagens ou algo assim. Então, vou arrastar isso novamente, soltá-lo na área e depois duplicá-lo em todos os seus pontos de interrupção E eu também quero uma navegação, mas eu já alterei um pouco o texto dessa navegação aqui para entrar em contato comigo. Então, vou usar o mesmo, então vou copiar isso e colar na área de trabalho, colar aqui embaixo, então vou movê-lo com minhas teclas A para cima, e agora tenho a mesma navegação em todas elas. E então talvez queiramos apenas adicionar, sei lá, um pouco de texto ou algo parecido. Então, aqui embaixo, você pode ver que há alguns campos de texto. Não tenho certeza. Acho que isso aqui está certo, então podemos adicionar mais informações se quisermos. E, claro, nosso termo alimentar, vamos usar o mesmo aqui, e essa cópia está ótima na parte inferior. Então, agora, antes de entrarmos no conteúdo, vamos realmente conectá-lo imediatamente. Então, no painel de propriedades do lado direito, você tem design e interações. Clique nas interações e agora selecione o elemento. Então, neste caso, nossa imagem que você deseja conectar, você precisa clicar profundamente até obter a foto de verdade, e então você vê essas pequenas bolhas aparecendo Qualquer bolha, basta mantê-la pressionada com o mouse e depois conectá-la E você verá que ele se conecta a partir de todos os diferentes pontos de interrupção. É basicamente isso. Agora, queremos nos conectar novamente. Então, neste caso, eu adoraria uma migalha de pão, mas não há uma no meu bloco, então vou usar aqui o logotipo principal para Então, talvez isso seja algo que mais tarde eu vou consertar. Vou conectar os dois aqui e vou selecionar isso e apenas me conectar novamente. Ok, então vamos dar uma olhada se isso está funcionando. Então, vou usar meu atalho Shift e barra de espaço. E agora você pode ver aqui que isso está funcionando muito bem. Ainda é responsivo e tudo está funcionando. Então, se passarmos o mouse sobre isso, podemos ver que podemos clicar nele e, em seguida, chegaremos à nossa nova página E se clicarmos no logotipo, estamos bem, ótimo. Tudo o que vou fazer agora adicionar meu conteúdo aqui, voltar ao design e, na verdade, vou acelerar isso em segundo plano para você. Então, vamos adicionar o texto. Eu já escrevi e já adicionei um pequeno subtexto aqui também, que vou copiar Novamente, lembre-se de que sempre copiamos no desktop e agora só precisamos adicionar nossas imagens. Eu só vou acelerar isso um pouco para você aqui em segundo plano. E aqui está, então temos nossa página com subpáginas prontas. Vamos jogar tudo para que você possa ver a linda, toda responsiva Nós pulamos para nossa subpágina, que também é responsiva, e sempre podemos voltar 7. BÁSICO: inserir elementos personalizados: Então, vamos personalizar um pouco nosso design e adicionar alguns de nossos próprios elementos a ele. Como você pode ver aqui, eu tenho uma foto grande, que quero acrescentar porque, se eu der uma olhada agora e as imagens, verdade não obtenho apenas uma imagem grande de herói. Então, o que eu faço é simplesmente arrastar isso para o outro lado. Vou colocá-lo aqui, e você pode ver que eu posso adicioná-lo, mas ele não se comporta da maneira que meus blocos predefinidos Agora, se você quiser adicionar elementos personalizados, precisará saber um pouco sobre o layout. Vou apenas mostrar o básico, mas recomendo fortemente que, se você não estiver familiarizado com o recurso de layout automático do Figma, em um dos meus outros cursos enquanto eu analiso o layout automático do Figma É realmente um recurso que vale muito a pena conhecer. Se você está apenas brincando um pouco com sites, pode até usar apenas alguns truques que eu mostro. Então, a primeira coisa que precisamos fazer, se você selecionar esse bloco, por exemplo, você pode ver aqui que, na largura, ele é definido automaticamente para algo chamado encher o recipiente. Isso significa que ele ocupará todo o espaço disponível. No momento, se selecionarmos nossa imagem, ela não está configurada para encher o contêiner. Você pode ver aqui no layout, se colocarmos isso para baixo, você pode ver que isso tem uma largura fixa. Então, basta pular para encher o recipiente. Você também pode ver aqui que temos esse conjunto, o que significa que estamos mantendo a proporção dessa imagem. Agora você pode ver que isso enche o contêiner em todos os lugares. Então, não faça isso. Vamos voltar ao que tínhamos anteriormente. Você pode ficar tentado a simplesmente redimensionar isso. Mas o que aconteceu é que parece bom em sua visualização de estatísticas, mas se você tiver uma prévia, poderá ver que isso realmente não vai mais se comportar com seu design. Se você quiser um elemento fixo, tudo bem. Caso contrário, certifique-se de definir isso para encher o recipiente. Agora podemos personalizar isso um pouco mais. Você pode ver aqui que temos um raio de canto de 16, então podemos simplesmente pegar nossa imagem principal e também podemos definir isso para um raio de canto de Agora, eu adicionei outro elemento. Então, isso é uma pequena migalha de pão, porque lembre-se, é um pouco estranho eu ter que clicar no logotipo para voltar Eu quero que isso seja mais óbvio sobre como lidar com isso. Então, o problema é que, no momento, isso é apenas um quadro e eu adicionei um pouco de texto. No Figma, cada elemento que temos, e em blocos, eles configuram isso para você deve ser configurado no layout automático para funcionar Novamente, se você é totalmente iniciante, isso pode ser complicado, e eu recomendo que você se familiarize com Vou mostrar isso rapidamente e presumir que você entende um pouco de layout automático. Então, eu estou selecionando isso e vou pressionar Shift e A. Então isso criou um layout automático, e você pode ver que isso está acontecendo aqui. Então, isso está indo nessa direção. Eu posso ver a distância aqui. Eu vou fazer esse múltiplo de oito, na verdade. Posso adicionar um pouco de preenchimento e assim por diante. E agora eu também vou criar a moldura externa. Eu vou selecionar isso. E você pode ver aqui que isso é um quadro, então eu também posso selecionar isso aqui, ou eu posso pressionar Shift e A. Este é o meu atalho, e então eu estou criando esse layout automático Então, agora eu vou retirar isso. Então esse é o tamanho da minha moldura principal, 1.280. E agora posso, por exemplo, adicionar um pouco de preenchimento aqui na parte superior e inferior Então, eu vou ter apenas o de baixo, 24, o de cima, eu acho, 24, também. E agora, nas laterais, vou realmente verificar o que está acontecendo aqui na minha navegação. Então, minha navegação está me dizendo 64, então eu vou usar 64 para esquerda e direita também. Se isso for um pouco complicado quando você é novo no Figma, você também pode usar elementos simples como esse, simplesmente colocá-los e colocá-los lá dentro elementos simples como esse, usar elementos simples como esse, simplesmente colocá-los e colocá-los Então, o que vamos fazer agora é arrastar isso até aqui, e eu vou soltá-lo aqui. Você pode ver que ele o deixou cair em todos os lugares. Novamente, veja como ele não é redimensionado corretamente porque o que temos que fazer, assim como com os outros, selecionar o elemento inteiro e, na largura, definir isso para encher o contêiner Agora, há uma maneira mais estrutural de configurar isso, mas agora estamos fazendo isso um pouco manualmente, de vez em quando. Então você pode ver aqui que temos um preenchimento diferente. Então, aqui temos um preenchimento de 32. Então, eu vou fazer isso neste elemento aqui também. E então, para o celular, temos 24, e eu também vou configurar isso 24. Então aqui está. Então, o que eu não gosto é dessa enorme distância aqui. Na verdade, uma coisa que eu quero fazer é querer esse lindo fundo cinza aqui também. Então, vou selecionar isso, você pode clicar na cor de preenchimento. Eu vou fazer essa pequena escolha. Vou escolher a cor de fundo que tenho aqui, para ter uma visão geral melhor Então isso é bom, mas isso é muito grande aqui, essa distância. Então, eu também posso alterar isso aqui e posso simplesmente descer um pouco aqui e torná-lo um pouco menor. E se eu quiser, eu também posso usar isso e talvez adicionar um pouco aqui para que eu tenha mais espaço se eu quiser que isso seja clicado Tudo que eu preciso fazer agora é escolher esta casa aqui. Vou voltar para a interação novamente e vou me certificar de que, e vou me certificar ao clicar nisso, isso esteja voltando para casa Então, vamos experimentar isso. Então, aqui temos nosso design. Vamos para a subpágina. Isso está lindo. Vamos ver se nossa imagem está sendo redimensionada. Sim. E então, se eu clicar em Início, vou voltar para casa. 8. BÁSICO: adicionando links e mailto: Vamos adicionar alguns links externos ao nosso design. Então, um link de e-mail e conecte nossas mídias sociais, por exemplo. Então, o que temos aqui é que temos um botão, então queremos clicar nesse botão e abrir um e-mail. E aqui embaixo, temos algumas mídias sociais. Então, vamos fazer as duas coisas. Vamos começar com nosso botão. Então, vou selecionar o botão, e isso realmente funciona para qualquer elemento. E então, no painel de propriedades à direita, você vê algo chamado Link. Você vê isso no design e também na interação. Às vezes, ele se move um pouco. Clique no botão de adição e, em seguida, você receberá um campo para adicionar um URL. Você também pode conectá-la a qualquer subpágina que você criou, por exemplo Então, se você tem uma página com um formulário que deseja que as pessoas preencham, agora mesmo, o que queremos é que ela seja clicada e depois abra um e-mail E você pode fazer isso com o mailto. Então você não adiciona uma URL. Você pode adicionar uma URL, por exemplo, se tiver um blog externo ou algo para o qual deseja enviar pessoas, mas vamos usar o Mail dois. Agora você pode abrir isso em uma nova guia. Nesse caso, não importa, porque ele abrirá em um novo de qualquer maneira Então, vamos experimentar isso. Então, vamos abrir nossa prévia. Vamos clicar em nosso botão e você verá que ele abriu meu programa de e-mail e o está enviando para o endereço de e-mail que eu forneci. Ele está usando o mesmo aqui porque este é o meu endereço que estou usando para demonstração, então você encontrará o endereço do usuário do qual o enviou neste campo. Ao adicionar algo assim, certifique-se de que você também tenha seu endereço de e-mail no Foor ou em outro lugar em texto simples Portanto, qualquer pessoa que não tenha um programa de e-mail instalado no dispositivo ainda poderá encontrar seus detalhes de contato. Uma pequena observação lateral: você também pode estender mailto Então, em vez de apenas abrir o e-mail, o que você pode fazer é adicionar algumas informações. Portanto, existem geradores diferentes. Você pode, por exemplo, usar mailto linkgenerator.com ou simplesmente pesquisar Então, aqui você adiciona o endereço que deseja abrir, onde o e-mail deve ser enviado. Você pode adicionar CC, BCC, você pode adicionar um título. Então, por exemplo, você sabe que essa é uma solicitação vinda do seu site quando alguém a envia. Em seguida, você pode adicionar um corpo para adicionar um e-mail predefinido Isso é muito útil, por exemplo, você está recebendo uma espécie de solicitação que deseja que as pessoas preencham, tipo, qual é o seu orçamento Qual é a sua empresa? Qual é a sua posição? Em seguida, basta clicar em Gerar e ele fornecerá o link mailto ou o código HTML Precisamos do link mailto, pois estamos trabalhando com Links. E então, em vez do que acabamos de receber, vou mudar isso e colar o e-mail no que acabei de copiar Vamos agora dar uma olhada no que acontece. Então, se eu clicar em Contatar M, você pode ver que esta página inteira aqui foi adicionada. Então você pode ver que agora temos um assunto, temos um CC e temos isso como um corpo. Portanto, não é necessário, mas pode ser muito útil. Então, agora vamos também conectar nossas mídias sociais. Então, aqui em Foota eu tenho minhas redes sociais. Então, vou usar o LinkedIn como exemplo. Então, vou selecionar todo esse quadro aqui, então aquele para o quadro do LinkedIn E então eu vou seguir o mesmo caminho. Vou clicar em Vinculado e agora vou adicionar um link externo, na verdade. Então, aqui vou pegar o link da minha página do LinkedIn e colá-lo nesse campo Então, agora, se formos fazer uma prévia e clicarmos nisso, ela abrirá minha página no LinkedIn 9. BÁSICO: Componentes: Trabalhando com componentes. Portanto, o componente é um grande assunto Figma. E, novamente, se você é muito novo nisso, vá para o meu curso para iniciantes, e eu tenho uma seção onde explico tudo isso com muitos detalhes. Por enquanto, eu só quero mostrar alguns usos básicos de componentes com sites. Por exemplo, aqui temos nosso botão, e o usamos em todo lugar, e também temos nossa navegação, temos nosso Puta e também temos algum comportamento incorporado, que agora teríamos que copiar em todos esses botões em todos os lugares Então, o que podemos fazer é transformar isso em um componente, e um componente basicamente significa que você tem um molde que você está reutilizando. Então, vamos realmente tirar esse botão daqui e você pode ver que ele copiou todos eles. Eu só preciso de um. E isso é chamado de botão principal. Isso parece ótimo. E vou simplesmente transformá-lo em um componente clicando no pequeno sinal de componente aqui. Portanto, nosso componente deve estar sempre fora do nosso design, e vamos organizá-lo um pouco melhor mais tarde. Mas o que eu quero fazer agora, eu só quero copiar, e todas essas cópias são chamadas de instâncias, e vou colocá-las no meu design. Então, vou arrastar uma instância, manter pressionada a tecla Alt e a opção. A propósito, você pode usar copiar e colar. Eu só acho isso um pouco mais confuso. Então, o que eu faço é manter pressionada a tecla Option ou Alt e, em seguida, obtenho uma instância disso. E agora o que vou fazer é me livrar desse botão original e vou substituí-lo. Com o botão que acabei de fazer. Vamos apenas falar. Se você não conseguir posicioná-lo bem aqui, use seu painel de camadas Temos um pequeno grupo de botões aqui, então vou adicioná-lo lá. Deixe-me posicioná-lo do outro lado. Então agora eu tenho o mesmo botão na minha navegação que eu tenho aqui. Então, se eu mudar alguma coisa, por exemplo, esse comportamento do link, ou vamos mudar aleatoriamente a cor, você pode ver que isso se reflete em todos os lugares em nosso design agora No entanto, também estou usando essa navegação em vários lugares. Então eu o uso aqui e o uso ali. Então, eu também posso transformar toda essa navegação com o incenso aninhado do botão em um componente Então, vamos retirar isso. E então eu vou fazer o mesmo. Vou transformar isso em um componente. É chamado de cabeçalho dois. Vou deixar isso agora. E agora posso criar uma instância e depois substituí-la. Então, vamos nos livrar disso. E agora eu estou criando, então eu já criei um. Estou usando essa instância aqui e vou arrastá-la para lá. No entanto, o que aconteceu agora é que nesta instância, você pode ver que estou usando a mesma ali, então eu poderia alterá-la manualmente. Eu poderia sobrescrevê-lo, mas isso não seria claro porque eu sobrescreveria e perderia todas as informações que colocasse Então fica um pouco impuro. Mas, como você pode ver, o que aconteceu originalmente é que, quando eu retirei isso, você pode ver que ele realmente me deu todos esses três, ou eu poderia criá-los à mão. E agora podemos criar algo chamado conjunto de componentes com isso. Na verdade, vamos dar um pouco de cor de fundo para que possamos trabalhar melhor com ela. Podemos tirar isso mais tarde. Então você pode ver, eu já tenho todas essas três versões de que preciso, ou você pode configurá-las manualmente, por exemplo, com uma migalha de pão ou qualquer coisa que você adicione aqui, você também pode configurar isso manualmente, mas vou usar o que a Figma E então o que eu vou fazer é transformar tudo em um componente. E agora vou mudar um pouco o nome. Então, vou fazer com que todos eles sejam chamados de cabeçalho ou, na verdade, chamarei todos eles de navegação. Então, agora vou selecionar todos os três, e então você pode ver aqui, que está dizendo que você combina como variantes. Clique nele e então você verá um pequeno contorno roxo que Figma vai virar ao redor deles Então, o que você vê agora, vamos extrair uma instância disso. E agora você pode ver que eu tenho a instância, mas ela está me dizendo que há um erro. Diz que há uma propriedade , mas todas têm o mesmo nome. Então, o que precisamos fazer é selecionar cada um deles e, em seguida, vou chamá-lo um desktop. E isso é importante. Funcionará muito bem se você usar desktop, tablet e celular Caso contrário, propriedades Figma Design, você pode nomeá-las de qualquer coisa. Mas aqui nos limitamos a essa nomenclatura. Então eu pego o tablet. Eu chamo isso de tablet. E o celular móvel. Agora, ele também pode alterar o nome dessa propriedade. Você não precisa. Funcionaria de qualquer maneira, mas eu poderia chamar isso de ponto de interrupção. Ok, ótimo. E agora, se eu selecionar a instância, você pode ver que agora ela tem todas essas versões diferentes E o que eu posso fazer agora é me livrar disso, e vou arrastá-lo até aqui, e agora ele vai saber onde posicionar qual deles. Simplesmente por ter usado esse nome. Isso é algo que o Figma configurou para você em segundo plano E o melhor de tudo é que agora eu posso usar a mesma navegação aqui, então vou pegar uma instância e adicioná-la aqui. E agora eu também tenho minha navegação. Então, qualquer coisa que eu mude agora com o botão, com a configuração, digamos que estamos invertendo a ordem, digamos que estamos selecionando esse botão e o movendo, você pode ver que isso se refletiria em todos os lugares, e agora apenas na área de trabalho. Portanto, também posso tomar decisões conscientes, como o preenchimento ou as margens nesses diferentes Então, em segundo plano, todos esses blocos que você vê que funcionaram tão magicamente nos pontos de interrupção, como no plano de fundo na Figma, estão todos configurados dessa forma É por isso que funciona, o que também significa que podemos configurar nossa própria biblioteca de blocos, e faremos isso um pouco mais tarde. Por enquanto, vamos deixar nossos componentes aqui. Se você trabalhou com o Figma Design , saberá que geralmente não deseja seus componentes estejam na mesma página do design Mas, no momento, a Figma não está realmente nos dando muitas opções nesta versão beta com a qual estou trabalhando O que você pode fazer para adicionar um pouco de organização é ir até aqui, e aqui você encontra seções, ou você pode usar Shift e S, e então você pode desenhar uma seção por aqui e simplesmente chamar esse componente. Além disso, organize isso ainda mais para que você possa ter elementos de navegação e assim por diante. Mais tarde, porém, mostrarei uma maneira melhor de montar uma biblioteca e manter tudo isso organizado e organizado. Se você tem apenas alguns pedaços aqui e ali, então isso vai ser bom para você começar E só para pegar o jeito, vamos realmente fazer o mesmo com nossa navegação. Eu vou retirar isso. colocá-lo aqui agora mesmo. Vou dar um pouco de cor de fundo. Novamente, você pode tirar isso mais tarde, se isso o incomodar, só para que possamos ver melhor Vamos fazer isso muito rapidamente. Na verdade, também há um atalho para fazer isso. Então, o que estou fazendo é selecionar todos eles. Eu poderia criar componentes para cada um deles e depois combiná-los ou você pode usar um atalho Então, há uma pequena seta ao lado do seu sinal de componente e, em seguida, você pode ver criar conjunto de componentes a partir daqui. Então você também pode usar isso. Novamente, ele dirá que há um erro na nomenclatura, então resolvemos a nomenclatura Eu só vou acelerar isso, mas lembre-se, é desktop, tablet e celular. E se quiser, você pode clicar no nome inteiro do componente e também renomear a propriedade, por exemplo, para Breakpoint E agora podemos simplesmente extrair uma instância e adicioná-la novamente ao nosso design. Você pode adicioná-lo em qualquer lugar e, em seguida, lembre-se, basta movê-lo com as teclas de seta. Eu fiquei um pouco preso. Aparentemente, não. Vamos adicioná-lo ao final. E você também pode copiá-lo de qualquer design para outro, então poderíamos simplesmente nos livrar dele aqui e depois copiá-lo novamente. Novamente, você deve se certificar de posicioná-lo como neste pequeno lugar onde mostra essa pequena linha, e então você pode movê-lo ainda mais. E aqui está. Então, agora, qualquer coisa que você adicionar aqui, por exemplo, você só precisa adicionar seus links de mídia social uma vez, ou você também pode alterar esse botão principal. Portanto, tenha cuidado com uma coisa. Agora tenho um botão geral e só uso esse botão de contato, mas você pode usar um botão para coisas diferentes. Nesse caso, talvez seja necessário criar um botão separado. Então, quando você tem um botão para botão de contato e, em seguida , apenas um botão geral vinculado ao documento, fique um pouco atento a isso 10. Confira meu curso básico do Figma!: Agora, durante este curso, quero me referir a muitos recursos do FIGMA, como componentes, também layout e variáveis Se você usar T FIGMA, tudo isso será muito natural para você No entanto, se você é novo no FIGMA, isso pode ser um pouco opressor Não abordarei esses conceitos neste curso. No entanto, com sua assinatura do Skillshare, você pode entrar no meu curso para iniciantes do Figma Em Projetos e recursos, adicionei um link direto. Você pode simplesmente clicar nele. Isso o levará diretamente a este curso. O curso tem 4 horas de duração e começa com todas as noções básicas que você pode ou não querer estudar Se você quiser examinar apenas certos conceitos como componentes ou variáveis, por exemplo, a diferença entre variáveis e estilos, algo muito importante para a tipografia, basta pular para essas seções e explicar tudo isso desde o início Também ou para o layout, como você pode ver aqui. Se você quiser ir além, poderá encontrar mais coisas neste curso, como criar protótipos com a FIGMA, como colaborar e até mesmo um projeto de curso para Este também é, de longe, meu curso mais popular no Skillshare e, como você pode ver, nas avaliações, as pessoas ficaram muito felizes com isso Então entre e saiba mais sobre o Figma. 11. BÁSICO: navegação fixa: Vamos configurar uma barra de navegação fixa. Então, em nosso design aqui, temos uma prévia, podemos ver que temos uma barra de navegação, mas se rolarmos, ela desaparece Você pode querer isso, mas provavelmente em muitos casos, você só quer que isso fique fixo na parte superior. Então isso é muito fácil. Tudo o que você precisa fazer é selecionar sua navegação, e isso pode ser uma instância de um componente. Isso pode ser de blocos. Isso pode ser qualquer coisa que você mesmo crie . Isso não importa. O importante é que você perceba que é um filho direto do seu quadro principal. Então, às vezes você pode ter acidentalmente empacotado isso aqui. E isso parece o mesmo, mas pode bloquear que você possa configurá-lo para corrigir. Portanto, certifique-se de que no painel de camadas esteja em seu próprio nível e , em seguida, selecione-o no lado direito na posição. Isso costumava ser em interações, agora eles o têm em posição, então ele pode se mover um pouco. Portanto, procure algo chamado posição ou rolagem e escolha um comportamento fixo. Então você vai ver esse pequeno esboço aqui. Isso significa que ele foi retirado do comportamento padrão, então não acompanha o fluxo, é também por isso que seu conteúdo subiu? Porque seu conteúdo sobe quando se fala em layout automático. Então, vamos pegar isso para entender. Então, isso está alinhado aqui no topo. Então, vai começar do topo. Então, se você quiser essa pequena lacuna natural, por exemplo, aqui, você verá que é muito necessária. Então dê uma olhada. Então, isso tem cerca de 95 de altura, sua navegação. Você pode ver isso aqui nas suas configurações de altura. E o que você faz é simplesmente pegar o desktop, então ele vai adicionar isso a tudo. Em seguida, nas configurações de layout automático, você pode ver aqui o preenchimento e, em seguida, basta adicionar esse preenchimento novamente na parte superior E dessa forma, isso só vai diminuir. Você também pode alterar isso um pouco ao seu gosto e também pode ver soluções em que isso esteja, e também pode ver soluções em que isso na verdade, usando uma espécie de fundo falso aqui Então, às vezes, as pessoas simplesmente fazem uma pequena moldura e a colocam em cima dela. Também funciona, mas acho que essa é a solução mais limpa. Então, vamos dar uma olhada e pré-visualizar. E se percorrermos isso , tudo ficará bem. No entanto, se redimensionarmos, observe uma coisa como isso é pular Então, precisamos voltar e corrigir um pequeno detalhe. Portanto, selecione o cabeçalho porque, no momento, lembre-se, sempre configuramos tudo isso para preencher e, de repente, não temos mais isso disponível porque enchemos o contêiner. Essa é uma configuração de layout automático. E como retiramos isso do layout automático e o configuramos como fixo, não temos mais as regras de layout automático. Mas o que podemos usar é isso aqui em cima. Podemos usar as restrições. Então, em seu painel de restrições, procure algo chamado esquerda e direita Então, isso só vai mantê-lo lá. Então, agora, se clicarmos novamente na visualização prévia e a redimensionarmos agora, você pode ver que agora ela está mantendo uma boa distância. 12. BÁSICO: Noções básicas de animação: Vamos adicionar algumas animações ao nosso design. Então, na verdade, se formos dar uma prévia, podemos ver que essas pequenas miniaturas já estão animadas por si mesmas, e isso está meio que embutido Então, vamos voltar e entender como isso realmente funciona. Então, para animações, vá para o painel de interações. Então, ao lado do design, você encontra interações. Já adicionamos interação. Então, isso significa quando estamos indo de uma página para outra ou para um link externo. Mas se selecionarmos elementos em nossa tela , teremos mais opções nesse menu. E, por exemplo, vamos selecionar esse grupo de cartas em que já temos algo definido, então é uma pequena animação circulante E você pode ver que isso foi configurado aqui em interações. Portanto, há uma animação embutida chamada Marquee Eu poderia simplesmente clicar em menos para poder interromper a interação, e então eu tenho uma imagem estática aqui Para qualquer elemento que selecionarmos, podemos adicionar algumas interações. Agora, é bom adicioná-los quando fizerem sentido, mas use menos do que mais. Por favor, não tenha essas coisas em que as coisas estão entrando e saindo. É sempre uma fonte potencial de erro e é sempre um pouco confuso Portanto, use-o, mas esteja atento a isso. Mas vamos tentar. Então, temos Herotex aqui, e então temos interações Então, vamos clicar no sinal de adição e, em seguida, ver nosso menu de interações predefinidas Então você pode ver aqui que temos coisas como comportamento de rolagem, mas a parte importante que gostamos disso é, na verdade, isso aqui. Então, por exemplo, se eu quiser que essa tipografia apareça, então o que eu poderia usar é essa Eu poderia usar aquela máquina de escrever e então eu poderia definir a velocidade Na verdade, vou deixar isso moderado e posso repetir. Na verdade, eu não quero isso, e eu tenho um pequeno cursor. Então, vamos dar uma olhada no que isso parece. E você pode ver que isso é muito bom. Então, isso vai começar a digitar assim que eu clicar nele, assim que eu abrir esta página, basicamente Agora, vamos adicionar um pouco mais aqui e também entender que isso depende da camada que estou escolhendo para o que está acontecendo. Então, vamos adicionar outro efeito porque você pode, na verdade, mesmo que já tenhamos o efeito de letreiro, adicionar Então, digamos que queremos um pouco de efeito de foco. E, na verdade, é nota baixa. E isso porque eu já adicionei um efeito de foco. Assim, você pode ter vários efeitos, mas não o mesmo efeito duas vezes. Então, deixe-me tirar isso para que eu possa mostrar do zero, e vou selecionar isso novamente. Agora eu tenho um efeito de foco, e você pode ver que eu tenho isso aqui e posso configurá-lo Então, vou definir isso para a escala 1,2. Então isso significa que se eu passar o mouse sobre ele, ele meio que vai aparecer um pouco Então, vamos dar uma olhada e observar como eu defino isso em todo o grupo de cartas. Então, vamos dar uma olhada. Então eu posso rolar, e assim que eu passo por cima, ele fica maior. Então, eu posso querer isso, mas na verdade eu quero mouse sobre um cartão e colocá-lo em um único cartão Portanto, certifique-se de tirá-lo daqui. E agora eu seleciono o grupo de cartões. Eu apertei Enter. Essa é uma maneira rápida de acessar todos os elementos secundários. Você também pode simplesmente selecioná-los um por um. E então o que eu faço, eu adiciono uma interação e adiciono o efeito de foco, e eu faço o mesmo agora, 1.2 ou, na verdade, talvez 1.1 para mantê-lo um pouco sutil E vamos dar uma olhada agora. Então, eu estou jogando isso. E enquanto eu passo o mouse, você pode ver que obtenho esse pequeno efeito suave de passar o mouse Talvez eu queira ajustar um pouco a distância, então agora eu poderia simplesmente selecionar isso e voltar ao design. E aqui, eu realmente tenho a lacuna, então eu poderia ampliar essa lacuna um pouco e dar a ela um pouco mais de espaço para crescer Muito bom e muito sutil, também é revelador. Então, digamos que queremos revelar esses elementos à medida que rolamos. Na verdade, vou deixar isso como está. E então eu vou selecionar esses dois. Então, vou adicionar interação e revelar. Então, assim que estiver visível, você também pode carregar a página, mas eu vou fazer isso, assim que eu rolar até ela, ela vai desaparecer Então, isso é muito sutil. Vamos dar uma olhada. Então, se eu rolar, observe como isso fica ligeiramente visível. Então, é quase que você quase não percebe. Deixe-me realmente te dar este. E em vez de desaparecer, digamos que este venha da esquerda, e então vamos fazer com que este venha da direita Então, vemos isso um pouco melhor. E agora vamos dar uma olhada novamente. Vamos usar a visualização completa. E você pode ver que, muito lentamente, simplesmente desliza para dentro. Você também tem alguns loucos aqui. Vamos selecioná-los apenas por diversão. Então, aqui, por exemplo, se começarmos a jogar, e então tivermos Drager Ball, e dissermos que você pode arrastar para qualquer lugar, e então você pode ver que agora podemos simplesmente arrastar esses elementos Não tenho certeza de como isso é útil, mas, na verdade, apenas brinque com eles e veja o que pode ser útil para você. Tenha cuidado com as animações, mas use-as onde elas fizerem 13. BÁSICO: incorpore mapas e vídeos: Incorpora. Então, uma parte do nosso bloco. Então, se você clicar no botão de adição, verá os blocos e, aqui no final, atualmente tenho as incorporações Então, estou gravando essa palavra ainda na versão beta, então ela pode ser um pouco limitada, e espero que você veja uma melhor adaptabilidade Mas eu só quero te mostrar o que é possível por enquanto. Portanto, temos agora três URLs, YouTube e Google Maps. Então URL, se eu adicionar isso, você verá que, na verdade só você pode adicionar uma URL ou um código HTML Então, aqueles em que você provavelmente está mais interessado são o nosso YouTube. Então, vamos adicionar este e um do Google Maps. Portanto, se você selecioná-los, já verá que eles têm menos propriedades no painel Propriedades. Mas o que você pode fazer é não simplesmente abandoná-los agora, mas copiá-los. E então, por exemplo, você pode selecionar esse herói e adicioná-lo aqui. Então, você também pode colocá-lo dentro de qualquer um dos seus outros blocos ou layout como um elemento. Portanto, ele pode ter menos opções, mas você ainda pode posicioná-lo relativamente bem. Agora queremos adicionar um vídeo aqui e queremos adicionar um mapa aqui. Então, o que precisamos se selecionarmos isso, você pode ver que aqui em cima, precisamos de uma URL ou algum HTML. Então, com o YouTube, podemos simplesmente colar nosso URL do YouTube aqui. Então, vou pegar um dos meus vídeos. Então, isso está no meu canal do YouTube. Então, se você quiser usar seus próprios vídeos, primeiro você precisa enviá-los para seu próprio canal. Também poderíamos incorporar qualquer outro vídeo do YouTube. Encontre o botão Compartilhar e , por meio do botão Compartilhar, basta copiar o link de compartilhamento. E agora vamos apenas colá-lo aqui dentro. E você pode ver agora que sua miniatura já está aqui. Você pode escolher se deseja a reprodução automática. Você deseja habilitar a tela inteira para que as pessoas possam ampliá-la. E, no momento, devo dizer que há uma pequena coisa que espero que seja resolvida em breve: a miniatura e as dimensões não estão corretas para o Assim, você pode desclicar no registro de proporção e, em seguida, configurá-lo com as dimensões corretas Você também pode simplesmente obtê-los do YouTube. Se você quiser, vou fazer isso manualmente por enquanto, então parece bom. Aqui temos nosso mapa e você pode ver que temos um URL ou algum HTML, podemos obter um URL ou, na verdade, apenas um Eu vou fazer o mesmo aqui. Vou pular para o Google Maps. Então eu acabei de pesquisar Berlim agora, então tudo o que faço é obter o local de compartilhamento de Berlim. Você também pode adicionar uma rua específica com o número da casa, e eu vou copiar o link. Na verdade, não, eu quero o mapa incorporado. Então eu clico em Incorporar e você pode ver aqui que isso é um iframe, e eu vou copiar esse Então, agora vamos voltar para o nosso arquivo Figma, e eu vou colar isso aqui E agora, se clicarmos em nossa prévia, você pode ver que temos esse vídeo, então podemos reproduzi-lo aqui. Blogs e tamanhos***. E você também pode rolar para baixo e, em seguida, ter seu mapa, que pode ser usado da mesma forma que faria com o Google Maps. Então, na verdade, em seus blocos de recursos, se você quiser usar esse mapa com um endereço , você também encontrará um aqui. Então você pode simplesmente substituir esse bloco. Então, basicamente, você pode simplesmente usar este, e agora você pode simplesmente adicionar todas essas informações, assim como fizemos antes. Na verdade, ainda devemos salvá-lo para que você possa ver aqui se eu colo isso aqui dentro daqui, e vamos jogar novamente. Agora você vê se rola o bloco, pode adicionar as informações e ver o mapa integrado. 14. BÁSICO: camadas de código com Figma Make: Figma Make e camadas de código. Portanto, há um ótimo recurso que ainda não exploramos, que é o Figma Make, que traz código para dentro de nossa página E podemos literalmente criar esses pequenos blocos com código. Então, atualmente, nesta versão, esta ainda é a versão beta, dois lugares onde você a encontra. Então você o encontra aqui na barra, e aqui você pode ver que ele abre uma página completa para que você também possa criar uma página própria com o Figma Make O que eu quero mostrar a vocês é essa parte aqui, onde a usamos como camadas de código. Como você pode ver, está neste pequeno campo de incorporação ou criação que temos atualmente Então, basta clicar nele e ele abrirá a interface. E então você vê essa pequena camada de código aqui, e podemos colocá-la em nosso design. E então estamos recebendo essa janela com a camada de código. E agora é bem simples. Então, tudo o que você precisa fazer é usar uma ferramenta de IA e descrever a ideia que gostaria de criar. Então isso pode realmente ser qualquer coisa, e você pode ver que está nos dando algumas ideias aqui, como um fundo gradiente, um relógio digital Então, vamos usar o relógio digital e, em seguida, você pode ver um aviso de como seria a aparência, para que você possa ver aqui. Agora, se clicarmos nesse botão, ele gerará esse código para nós. Então, isso pode demorar um pouco, então vou acelerar isso em segundo plano para você. E agora você pode ver que a camada de código foi gerada. Observe como podemos ver nossa camada, então ela foi gerada para cada ponto de interrupção Parece assim. Está nos dando algumas opções alterar esse tipo de parâmetro mais importante. Você pode ver seu código aqui. E você também pode ver geralmente lado a lado, e então você pode ter seu bate-papo aqui para que você também possa pedir que ele faça alguma alteração. Mas vamos usá-lo por enquanto. Então, se fecharmos isso, podemos vê-lo aqui, então podemos movê-lo e você pode ver, como de costume, que provavelmente teremos que configurar isso, fazer layout automático e posicioná-lo um pouco. Mas basicamente temos esse pequeno bloco aqui. Então, se pressionarmos a visualização Pu, você verá que este é um relógio em funcionamento, que agora podemos posicionar aqui como qualquer outro elemento e integrar ao nosso design. Então, aqui em cima, você pode ver que também podemos editar o código, então você pode voltar aqui. E então o que eu realmente gosto é dessa pequena parte aqui, que é apontar e editar. Então, por exemplo, posso usar isso e agora posso apontar para diferentes áreas do meu design. Então, eu posso selecionar isso para que eu possa mudar a cor aqui. Então, isso é todo tipo de coisa de design, mas você também pode conversar ou conversar com sua camada de código e depois dizer a ela o que fazer. Então, vamos experimentar isso e tentar se ele poderia nos dar uma versão AM e PM em vez desse tipo de relógio. E geralmente é uma ferramenta de IA, então você nunca sabe realmente o que vai acontecer, então talvez precise brincar um pouco. Então, novamente, isso vai demorar um pouco em segundo plano. Vou acelerar isso para você. Então você pode ver que isso mudou isso para nós. Agora vamos tentar outra coisa. Então, a página que estamos criando é para freelancers. Então, o que eu quero fazer é ter essa calculadora para que eu possa adicionar meus preços lá, e então as pessoas possam calcular uma espécie de primeira estimativa de quanto custariam meus serviços e depois entrar em contato comigo. Então, neste momento, o que eu ainda gosto de fazer é descrever no JGBT ou no Claude o que eu gosto e depois pedir que ele escreva um prompt adequado para Então, isso apenas torna sua solicitação um pouco mais clara. Então eu dei uma ideia vaga. Quero uma calculadora de estimativas para você no site de designers. Assim, os clientes em potencial podem escolher entre um preço básico padrão e premium. E então eu quero algo para logotipo, tipografia, imagem feita e uma página de destino, e então eles veem o total Então, eu queria criar um prompt e, em seguida, vamos usar esse prompt. Normalmente, eu trabalhava um pouco e personalizava esse primeiro, mas vou copiá-lo assim, e agora vamos começar a criar e colar lá Você não precisa fazer isso. Você também pode simplesmente escrevê-lo aqui e depois brincar com ele. Mas acho que isso me dá melhores resultados. Mas, novamente, não há absolutamente nenhuma necessidade pré-fatorar a solicitação se você preferir escrevê-la você mesmo. Então, novamente, vou acelerar isso em segundo plano para você. Isso parece muito bom, então vamos fechá-lo e dar uma olhada em nossa página apropriada. Vou, como de costume, configurar o layout automático. Pressione Enter. Você pode realmente usar isso da mesma forma que usa qualquer outra camada, então preencha o recipiente e agora vamos vê-lo em ação. Então, podemos ver que agora podemos selecionar qualquer outro preço. Muito adorável. E aqui embaixo, na verdade, temos que recuar porque temos que configurar este, lembre-se, para abraçar o conteúdo, que vejamos o conteúdo completo , não está funcionando Então, basta definir a camada de criação para incluir também o conteúdo. E agora você deve ser capaz de ver isso. Então, vamos voltar. Agora podemos rolar para baixo. E então você pode ver que, ao mudar isso, isso atualizará automaticamente meu conteúdo. Então, muito, muito lindo. E isso, é claro, totalmente responsivo imediatamente. Agora você sempre pode voltar. Você pode selecionar a camada de código e voltar para Editar e, em seguida, fazer qualquer alteração aqui. 15. PUBLICAÇÃO: publique seu site: Então, vamos publicar seu site, e isso é muito, muito fácil. Então, quando estiver satisfeito, basta clicar em Publicar. E então o que vai acontecer é que o Figma fornecerá número ou palavra aleatória, e então será dot figma dot SIDE, e esse é um URL gratuito que você pode usar por enquanto Posteriormente, você pode conectar seu domínio personalizado, mas, por enquanto, sim, use este. Em seguida, basta clicar em Publicar. E depois de ver a atualização, basta clicar nesse link e ver seu site real ao vivo. É totalmente responsivo e você sempre pode voltar e simplesmente atualizar e enviar para o site de sua vida. 16. PUBLICAÇÃO: SEO, favicon e compartilhamento em redes sociais: Portanto, nossa página parece boa, mas há algumas informações adicionais que devemos adicionar, portanto, algumas informações sobre a página. Talvez queiramos um pequeno favicon, isso é coisa no cabeçalho Então, vamos realmente clicar aqui em nossas configurações, e então podemos ter configurações gerais e configurações de domínio. Então, aqui você pode conectar seu domínio e controlá-lo ainda mais se estiver fazendo isso. Mas, em geral, você também pode adicionar algumas informações sobre a página. Você tem um título, então o que está escrito em uma guia. Não é o melhor título aqui, mas vamos deixar isso por isso. E então temos uma descrição do site. Então, por exemplo, se você copiá-lo em algum lugar, eles o verão ou os mecanismos de pesquisa. Então, aqui você gostaria de adicionar uma descrição. Por exemplo, esse é meu portfólio. Então, o que vou fazer é pegar essa primeira parte aqui e adicioná-la. Na verdade, uma boa ideia é que, se você estiver usando Claude ou ChaChiBT para perguntar, ajudá-lo a escrever essas descrições e preencher tudo isso, e então você pode dizer isso usando a otimização de mecanismos de pesquisa Idioma. No meu caso, isso é inglês, então vou deixar esse Google Analytics. Isso é muito útil. Então, se você quiser ver quem clica, quem está visitando sua página, você não vê qual pessoa, mas você vê a demografia de quais países, então você tem uma visão geral, então você pode configurar uma conta de análise, e eles vão te dar essa fonte de código e você pode simplesmente copiá-la lá e ela vai rastreá-la Em seguida, você pode excluir o site dos resultados dos mecanismos de pesquisa. Vou continuar assim porque esta é apenas uma página de demonstração. Mas, obviamente, se esta é a sua página, você definitivamente quer que ela não seja clicada, então você quer ter certeza de que os mecanismos de pesquisa possam encontrar Aqui temos um favicon, coisinha na cabeça e aquele pequeno ícone que você vê e , em seguida, uma imagem de compartilhamento social Então, vamos configurar esses dois. Então favicon, 48 por 48 e compartilhamento social 1.200 por 630. Então, vamos pular e podemos fazer isso aqui mesmo. Então, vamos configurar nosso favicon. Então isso foi 48 por 48. Então, precisamos de uma moldura. Você pode clicar aqui e pegar a moldura ou pressionar F, e então vamos desenhar uma moldura e garantir que as dimensões sejam 48 por 48. Então, isso vai ser bem pequeno. Então, sim, então o favicon é aquele pequeno cabeçalho que você mais tarde terá aqui no seu site Há, tipo, esse pequeno ícone. Então, vou criar aleatoriamente algo com as cores da minha página Então, eu vou acelerar isso para você. Então, sim, essa é apenas uma ideia aleatória que tive, que acho que combina bem com meu design. Vou dar um nome a esse fabricon. Portanto, você pode exportar o favicon e importá-lo novamente ou, na verdade, isso é muito mais fácil Basta pular até aqui e acessar as configurações do favicon E aqui você pode ver, nós o chamamos fabricon e você pode simplesmente selecioná-lo, e então isso vai aparecer Então, deixe-me te mostrar. Vamos publicar novamente. E vamos visitar nossa página. E agora você pode ver aqui em cima que temos nosso pequeno favicon aparecendo Na verdade, estou amando tanto meu favicon que vou transformá-lo em um logotipo sem fundo para deixá-lo tão proeminente Então, vamos mover isso até aqui. Na verdade, vou transformar isso em um componente. E agora vou substituir tudo isso pelo meu novo logotipo. Uma pequena dica, o que você pode fazer para fazer isso em todo o seu grupo é selecioná-lo e, aqui em cima, você tem uma edição múltipla, para que você possa se livrar de tudo isso E então podemos selecionar esse também. E agora estamos retirando uma instância e adicionando essa instância aqui e o que temos que fazer em cada uma delas sozinhas E eu vou fazer o mesmo com o meu Futter. Então, eu vou me livrar disso. Eu vou me livrar desse também. E eu vou adicionar isso aqui. Ok, ótimo. Então, aqui você pode dar uma olhada porque são componentes, isso adicionou meu logotipo em todos os lugares. Agora que temos a página que queremos, vamos configurar nossa imagem de visualização. Então, deixe-me pular aqui e você pode ver que são 1.200 630, então eu vou fazer isso Então, vou pressionar F e desenhar uma moldura desse tamanho. Então, 1.200. Vezes 630 E então você pode adicionar o que quiser como pré-visualização. Você pode fazer isso completamente ao seu gosto. Vou seguir o caminho mais fácil e vou copiar uma prévia disso aqui. Portanto, há um pequeno truque que você pode fazer para copiar isso não precisar exportar e importar, pressione Shift Command e C, e isso deve copiar um PNG para você. Então, você verá um pequeno alerta, copiado como PNG, selecionará o quadro onde deseja colá-lo e pressionar Command e V. Então, basta colar normalmente E agora você vai ter uma foto do que você pegou Oh, o pequeno problema que tive foi pegar isso, como tudo isso, então eu não quero Então, o que vou fazer é simplesmente fazer uma captura de tela por enquanto Então, deixe-me pegar isso do meu computador. Eu só vou colá-lo aqui. E então esta é minha pequena imagem de pré-visualização. E, novamente, você pode personalizar isso completamente ao seu gosto, então vou dar a ele um fundo escuro E eu vou chamar isso de prévia. Volte para suas configurações. E então, normalmente, você pode simplesmente pegar isso aqui. E agora, em qualquer lugar que você compartilhe isso em suas redes sociais, isso vai aparecer Você também pode adicionar mais código. Portanto, se você estiver familiarizado com CSS aqui, você tem a opção de adicionar corpo, cabeçalho e código de cabeçalho personalizados , o que quiser adicionar aqui. Mas essas são as configurações básicas que você precisará. 17. PUBLICAÇÃO: conecte um domínio personalizado: Então, vamos conectar o domínio personalizado. Portanto, você precisa comprar esse domínio primeiro com qualquer provedor. Eu comprei o meu com o Go Dei, então vou te mostrar isso, mas você também pode usar qualquer outro fornecedor. Então, infigmasites, vá para publicar, e então você pode conectar Você estará na configuração, então você também a verá aqui e clique em Conectar domínio novamente e, em seguida, basta digitar o domínio que você comprou com seu provedor preferido. Depois de fazer isso, clique em Seguro. Na parte inferior, agora você está vendo as chamadas configurações de DNS Portanto, precisamos adicioná-los ao nosso provedor. Isso parece um pouco complicado, mas na verdade não é tão difícil Conte onde você embarca em seu domínio e, em seguida, você precisa pesquisar as configurações de DNS Se você tiver problemas para localizar isso , geralmente há algum contato suporte ao cliente que você pode solicitar Então, aqui você vê seus registros DNS, e vamos adicionar os que foram informados Portanto, você não precisa entender muito sobre isso. Você só precisa adicionar um registro CName e um registro de texto. E você pode simplesmente copiar as informações diretamente do FIGMA. Agora entramos aqui e você encontrará um botão onde poderá adicionar um registro. No menu suspenso, você tem o tipo de registro que pode adicionar. Então, aqui vamos usar o Cname e, em seguida, vamos simplesmente colar as informações que Figma nos deu e agora salvá-las e elas serão adicionadas E agora você pode ver que, na verdade, estamos recebendo um erro de que isso já existe. Então, temos que verificar aqui, e então podemos ver que já temos um nome C disso. Então, basicamente, o que um nome C faz é simplesmente apontar para uma direção. Então, vamos mudar os blocos lunares que tínhamos aqui por padrão para o nosso novo. E então você pode ser solicitado a verificar se você é o verdadeiro proprietário. E então vamos adicionar nosso registro de texto. Nesse caso, isso é apenas uma verificação de propriedade. E então você pode ver que já existem alguns. Então, vamos adicionar o nosso em qualquer caso, e então poderemos lidar com quaisquer erros posteriormente. Então, vou presumir que você não entende muito sobre registros DNS Nesse caso, basta copiá-lo lá e, em seguida, verificaremos o que está acontecendo. Então, vamos copiar esse também. E então provavelmente nos pedirão que verifiquemos isso novamente, se dissermos isso. Então vá em frente e verifique se você é o proprietário. E quando voltamos à Figma, podemos ver que o CNM está funcionando, mas parece que há algo errado com os registros de DNS Pode ser um atraso de tempo. Vamos tentar isso de novo. Mas em vez de apenas esperar, vou verificar, e o que eu gosto de fazer é usar um LLM para isso Então, eu não tenho ideia sobre esses registros. Vou apenas fazer uma captura sobre aqueles que me mostram um erro, e também vou fazer uma captura de tela do que o Figma me fornece, e então vou simplesmente colocá-la no ALM Estou usando o CGPT, mas você também pode usar qualquer outro ALM. Então, vou colocar essas imagens dentro do meu ALM no meu caso, JGBT E então vou perguntar, como faria com qualquer serviço ao cliente ou desenvolvedor por perto. Então, estou dizendo que estou tentando conectar sites do Pigma ao meu domínio do Go Daddy e você adicionaria o provedor que está usando E então eu estou pedindo que você dê uma olhada , porque o que eu estou um pouco confuso sobre não saber sobre registros DNS é eu realmente preciso desses dois registros ? Preciso excluir alguma coisa? E eu só vou pedir que ele me dê um pouco de ajuda com isso. E coisas assim funcionam muito bem porque são literalmente informações técnicas. Então está me dizendo que o nome C, como já vimos figma, está funcionando bem E então está me dizendo que aqui há um problema. Então, na verdade, está me mostrando que está definido para uma hora. Então, geralmente está tudo bem. Eu posso ser um pouco paciente, e então o que mais isso está me dizendo? Você não precisa excluir nenhum deles, então ambos estão bem e, em seguida, esperar um pouco e atualizar Então, eu não sou muito paciente. Então, a única coisa que vou mudar é porque todo o resto parece estar bem. Vou mudar isso para meia hora, esperar um pouco e depois atualizar. E meu paciente foi recompensado. Agora posso ver que tudo está conectado, então podemos clicar no link real e ver nosso site de trabalho completo. Então, sim, tudo bem simples. E se você tiver problemas, use seus LLMs. Isso faz maravilhas. Algumas notas laterais. Isso deve estar funcionando, mas às vezes você só pode acessar a página se colocar WWW e não apenas o nome Então, nesse caso, você tem que encaminhá-lo. Desculpe, isso está em alemão, mas você precisa encontrar seu encaminhador, escolher HTDPS e depois encaminhar para a WWW, e então sempre funcionará, e então sempre funcionará, quer eles coloquem os ThreeWS ou simplesmente coloquem o Em seguida, salve-o e agora ele deve estar funcionando bem. 18. PUBLICAÇÃO: fundamentos da acessibilidade: Configurações de acessibilidade. Então, neste vídeo, vou dar uma pequena visão geral das configurações atuais de acessibilidade que temos nos sites FiCMA e provavelmente também evoluem com o tempo Esteja ciente de que a acessibilidade, na verdade , em muitos países é um requisito legal que você precisa cumprir, e existem funções diferentes para diferentes países. Portanto, é sua responsabilidade verificar isso sozinho e, em caso de dúvida, consultar um advogado e certificar-se de que está ciente do que precisa entregar. Então, isso não é um conselho jurídico que estou lhe dando. Estou apenas examinando as configurações que temos disponíveis atualmente. Então, vamos começar com nosso texto. Então, em cada página, geralmente temos um título principal, chamado de H. Então, a primeira manchete. Agora, selecione esse título, e você pode ver aqui embaixo, no painel de propriedades do lado direito, que há uma janela de acessibilidade E como selecionamos a tipografia, obtemos as etiquetas tipográficas Agora, P, isso é qualquer texto de cópia padrão. Então, por exemplo, este aqui, isso deve ser definido como P. Vamos dar uma olhada, e está correto. Agora, este é o nosso título principal, H one, então queremos mudar isso para o nosso H. Ciente de que sempre há apenas um H um por página. Você pode ter mais H dois, H três, mas deve haver apenas um H um. Agora, observe como eu pessoalmente não estou chamando meus estilos de H um, H dois, H três e assim por diante, que você verá muito o que você verá muito por causa do motivo que você verá aqui imediatamente. Então, eu tenho um título de exibição, depois tenho outros títulos. Então esse é o estilo. Essa é minha hierarquia visual. E essa aqui, as tags, é minha hierarquia quando alguém com um leitor de tela está lendo isso Então, em nossa subpágina, por exemplo, não estou usando esse título de exibição, mas ainda é antigo porque ainda é o título principal Então, eu ainda quero usar isso aqui. Só uma pequena nota lateral. Existem diferentes abordagens para isso. Sou um forte defensor da dissociação do texto CSS dos nomes de Então, realmente pense em como alguém leria isso. Então, esse provavelmente será o principal. Então essa seria provavelmente a nossa idade de dois anos, ou talvez tenhamos uma manchete aqui Isso também pode ser uma idade de três anos. E desse jeito, eu corria por lá. Então, essas aqui são provavelmente as manchetes menos importantes, então eu as transformaria em uma de quatro anos E aqui você pode ver que você pode ter várias idades de quatro anos, mas você só tem uma idade de um Em seguida, qualquer texto de cópia que normalmente já esteja definido como P, podemos simplesmente deixá-lo lá. Agora, você deve ter notado que, ao publicar , aparecem erros. Então, se você tiver problemas, o Figma realmente ajuda você a resolvê-los. Até agora, nós os ignoramos, mas vamos dar uma olhada porque todos eles devem ser resolvidos em sua página final. Então, aqui está nos dizendo que vamos realmente começar com este aqui. Falta uma etiqueta. Isso significa que temos uma imagem que não tem um rótulo. Vamos clicar aqui e, em seguida vamos pular para essa imagem. E, na verdade, precisaríamos realmente adicionar isso a todas as nossas imagens. O que precisamos fazer é sempre que usamos uma imagem , adicionar um nome ou uma descrição, chamada tag Alt. Então, continuamos aqui. Clicamos em Mais, depois temos um rótulo e agora vamos descrever o que vemos aqui. Portanto, qualquer pessoa usando um leitor de tela agora seria capaz de entender o que está acontecendo aqui, caso não consiga ver essas imagens. E nós realmente precisamos fazer isso para todos eles. Se você tiver uma imagem decorativa, poderá pressionar este pequeno botão. Então, às vezes, você pode ter algo no meio , como um plano de fundo, um espaço reservado ou algo assim Então você pode realmente clicar aqui, e isso desativará o Alt. Mas também aqui, por exemplo, se você tiver sua foto de perfil, certifique-se de adicionar uma imagem e escrever uma descrição. Então, aqui onde você escreveria seu nome. E isso realmente precisa acontecer com todas as imagens que você está usando. Outra parte importante a ser adicionada ao seu CSS por meio dessas configurações é a estrutura geral. Novamente, para ter uma melhor leitura, a propósito, isso também melhorará a otimização de seus mecanismos de pesquisa. Então, por exemplo, aqui, selecione isso e, no texto, você pode ver esta seção, já está marcada como cabeçalho. Portanto, devemos ter um cabeçalho e também dizer ele que o Putter é o futuro Então você pode ver, porque provavelmente foi armazenado como um bloco de Putter, já foi coletado, mas caso contrário, você deve fazer isso manualmente Na verdade, vamos examinar essas tags principais em 1 segundo. Portanto, um div que é um contêiner geral, portanto, sem significado semântico Então você tem um artigo que é um conteúdo independente que pode ser independente, como, por exemplo, uma postagem de blog e, em seguida, um site que significa conteúdo relacionado ao conteúdo principal como uma barra lateral ou uma nota Então temos um botão, bastante óbvio. Portanto, um elemento interativo que executa uma ação enquanto é clicado Temos uma figura, que pode ser usada para embrulhar mídia, como uma imagem ou gráfico, com uma legenda opcional Então temos o puta que define a seção Puta da página, então isso é bem simples Em seguida, temos nosso cabeçalho que marca a seção superior da página, ou a seção geralmente com títulos ou navegação. Temos nosso principal, de modo que representa o conteúdo principal da página, excluindo elementos repetidos como nag bar ou E então temos o suficiente que contém os links de navegação para as seções laterais. E então temos a seção, então semanticamente é uma seção ou conteúdo de grupo, como um capítulo da página Então, por exemplo, nossa parte sobre aqui, pode ser uma seção. E então temos isso aqui como nosso cabeçalho, e então poderíamos ir um pouco mais longe e poderíamos, por exemplo, dizer , na verdade, poderíamos marcar isso aqui em nosso componente se estivermos usando o componente, se não apenas adicioná-lo na página. Então esse é o nosso cabeçalho. E então isso aqui, seria nosso NAF. Você pode ver que isso já está configurado. E então nosso botão, isso deve ser registrado como um botão. E aqui você pode ver que isso, por exemplo, não pegou. Então, podemos realmente fazer isso aqui mesmo no botão. Agora, se o selecionarmos aqui porque está aninhado, você pode ver que ele também o pegou É uma boa ideia configurar tudo isso em seu componente se você os estiver usando e para qualquer outro elemento diretamente na sua página. Portanto, acessibilidade é muito mais do que adicionar um pouco de contraste de cores e um pouco de etiquetas aqui e ali. Mas você já pode fazer um bom trabalho como designer. Como dito, isso não significa que você precise se familiarizar com as regras gerais do seu país, mas atualmente existem ferramentas excelentes apenas no design do Figma e não nos sites Espero que os vejamos nos sites plug-in em breve. Portanto, se você estiver no design do Figma, acesse seus plug-ins por meio do painel de ações Existem diferentes. Há um chamado ID. Há um chamado Stark, então vou mostrar o Star também apenas no Google para plug-ins de acessibilidade e experimentar outros. E isso é realmente ótimo porque vem com um verificador de contraste Então, por exemplo, podemos verificar se as cores do texto que temos podem realmente usá-las em qual plano de fundo diferente? Então, por exemplo, este texto, você não poderia estar usando neste, mas você poderia, por exemplo, usar essa cor de texto escura em qualquer um dos textos claros. Então você vê qual deles passa. Há mais informações. E há outros assuntos, como tipografia, alvos de toque, alvos de toque Novamente, você obtém todos os cabeçalhos de foco de texto. Então você tem tudo isso aqui dentro para mergulhar um pouco mais fundo. 19. BIBLIOTECA: introdução às bibliotecas: Configurando sua própria biblioteca de sites com cores, tipografia, hierarquia e seus próprios Então, como isso funciona? Bem, basicamente, o que você pode fazer é, usar os blocos Figma, criar seus próprios blocos Assim, você pode configurar uma biblioteca inteira. Isso significa que você pode configurar sua tipografia completamente ao seu gosto, então qual fonte você está usando, como você deseja que tudo isso se comporte em diferentes pontos de interrupção e uma ideia geral Então, que tipo de dinâmica você quer aqui? O mesmo acontece com suas cores, você pode configurar variáveis de cores e usá-las em todos os seus designs e atualizá-las facilmente. E você pode configurar seus próprios blocos, então eles são componentes totalmente personalizáveis que são configurados para diferentes pontos de interrupção Você pode configurar blocos, mas também pode configurar páginas inteiras e criar modelos para consumir qualquer página de sites figma Você pode publicar esse arquivo inteiro como uma biblioteca, que significa que você pode simplesmente colocá-lo em sua equipe e, em seguida, criar qualquer arquivo sit ou usar qualquer arquivo de sites existente. E por meio do botão da biblioteca, você pode simplesmente acessar essa biblioteca externa. Agora você pode inserir todos os blocos que você criou com todas as configurações corretas. Obviamente, você pode personalizar isso totalmente, adicionar imagens, alterar texto e qualquer alteração feita na biblioteca também será refletida aqui. Você pode simplesmente publicá-lo como faria com qualquer outro site criado em sites. Dessa forma, você pode criar sua página totalmente responsiva com seus próprios componentes 20. BIBLIOTECA: conectando uma biblioteca: Vamos importar nosso arquivo Figma moon Block, transformá-lo em uma biblioteca e conectá-lo aos sites do Pigma Portanto, a primeira coisa que você precisa fazer é acessar sua conta FiGMA e depois entrar em qualquer equipe, mas ela precisa ser uma equipe profissional ou superior Eu criei um novo projeto aqui. Eu vou pular aqui. E em vez de criar um novo arquivo, o que eu faço é usar o mesmo botão, mas vou para Importar. E, a propósito, no figma, a interface muda um pouco, então você pode encontrar isso em um lugar um pouco diferente A parte importante é que você use o Import e agora importará o arquivo FIGMA que você baixou anteriormente Isso pode levar apenas um momento. É um arquivo bem grande, então espere um pouco. Eu vou acelerar isso aqui. Então, quando terminar, clique duas vezes no arquivo e, dentro daqui, você poderá ver todos os elementos predefinidos Então você vai ter cores, tipografia e alguns elementos já configurados Agora, você não precisa fazer nada. Podemos consumir como estão, todos esses elementos por dentro. A única coisa que você precisa fazer é transformar esse arquivo em uma biblioteca para poder conectá-lo. Então vá para os ativos aqui. Então, ao lado do arquivo, você vê a pequena guia Ativos e aqui você vê o símbolo da biblioteca. Clique nesse símbolo e , em seguida, clique em Publicar. Novamente, isso pode levar apenas um momento pois é um pouco maior, então vou acelerar isso em segundo plano. Feito isso, vamos voltar para nossa equipe e você pode usar um arquivo de sites existente ou eu vou criar um novo. Então eu clico no botão novamente e vou para sites importantes, não um arquivo de design, mas você precisa de um arquivo de sites FIGMA, e podemos pular isso porque queremos começar do zero Então, vamos ampliar um pouco, e você pode ver que ele já vai nos dar a página inicial, e há uma versão para desktop e uma para celular Mas no arquivo que você tem, sempre temos uma versão, tudo, desktop, tablet e celular. Então, queremos o mesmo em nosso arquivo secundário. Basta clicar no botão de adição e, em seguida, você verá este aqui. Isso já está configurado exatamente nos mesmos tamanhos e agora temos exatamente a mesma configuração do nosso arquivo. Então, agora queremos conectar nossa biblioteca. Então clique neste pequeno botão aqui. E depois vá para as bibliotecas. Existem blocos, mas você quer bibliotecas e clique em Procurar bibliotecas da equipe, e agora você deve encontrar sua biblioteca, se não apenas pesquisar por nome. Depois de encontrá-lo, tenho dois aqui porque já o instalei anteriormente. Então esse é o que eu acabei de adicionar. Você só verá um. Basta clicar em Adicionar aos arquivos. E agora você pode ver sua biblioteca aqui na biblioteca. Então, mesmo se você sair daqui, é aqui que você a encontra o tempo todo. Agora, clique nele e você verá três seções, os blocos de construção. Então, esses são todos os pequenos blocos, navegação do herói, ou você também pode ter designs. Então, aqui eu fiz alguns designs prontos para você ou wireframes Se você voltar para o arquivo, ou seja, para o arquivo original que você transformou em uma biblioteca, poderá ver aqui se você passa dos ativos para arquivos com três páginas. Então, os blocos de construção, que você vê por padrão, são o wireframe Então é aqui que você encontra todos os wireframes e os designs Então, isso é um espelho exato disso. Então, tudo o que você precisa fazer é escolher os blocos pré-fabricados. Então você simplesmente seleciona um deles e só precisa arrastá-lo para a versão desktop, e então ele configurará os outros pontos de interrupção para você também Ou você também pode usar as páginas prontas, e o mesmo aqui, basta escolher qualquer uma delas, colocá-la apenas na versão desktop e ela configurará todas as outras automaticamente para você. 21. BIBLIOTECA: Configurando páginas personalizadas: Vamos configurar nossa primeira página e também adicionar algumas configurações básicas de layout automático porque o que foi incorporado aos blocos Figma, você precisa configurar aqui manualmente Então, temos nossa página configurada, mas ainda está um pouco errada, porque o fato é que não podemos ver a coisa toda. E se pressionarmos a pré-visualização, então este é esse botão aqui ou você também pode usar este, é o mesmo. Então, o que acontece é que vemos a prévia, mas não conseguimos rolar corretamente. E também, se redimensionarmos , sei lá, fica um pouco errado, certo? Não se comporta da maneira que esperamos. Então, vamos voltar atrás. E configure isso. Portanto, essas são algumas mudanças automáticas no layout que você precisa fazer. E se você precisar consertar o meu, essa é a única parte, que pode ser um pouco confusa Então, realmente me siga aqui, passo a passo, e você deve ficar bem. Então pegue a área de trabalho. Você só precisa configurá-lo na área e ele o configurará para todo o resto. Então, o que precisamos fazer é mudar isso de um layout de fluxo livre para um layout vertical. Então, vamos fazer isso. Agora, a próxima coisa que precisamos fazer é alinhar isso ao centro e ao topo E então certifique-se de que tudo isso esteja definido como zero. Então, se você tiver alguns números aqui, mude para zero. Para ver a página inteira, queremos definir a altura, não para um valor fixo, mas para abraçar o conteúdo Então, isso já parece muito bom. Vamos dar uma olhada na prévia. Agora podemos rolar, mas você ainda vê que, quando estamos redimensionando, agora está no centro, mas ainda temos essas pequenas lacunas que não queremos porque queremos que sejam muito fluidas Então, precisamos fazer uma última coisinha. Então, novamente, pegue a parte da área de trabalho e pressione Enter, e ela pegará todos os elementos secundários, e você precisará configurá-los para encher o recipiente. Então, em dimensões, não tire essa. Basta usar um pequeno erro e escolher encher o recipiente. Então, se estivermos verificando isso novamente, agora você pode ver que agora está funcionando muito bem E agora podemos alterar todo o conteúdo ao nosso gosto. Portanto, se você alterar o texto na área de trabalho, isso refletirá em todas as outras áreas. Você também pode alterar as imagens, é claro, basta selecionar a imagem e, por meio do preenchimento da imagem, escolher qualquer outra imagem do seu computador. Agora, as páginas já estão configuradas para você. Então, talvez você queira uma configuração um pouco mais flexível. Você também pode usar os diferentes blocos de construção então. Então, vamos criar outra página. Então, vou entrar na página da web aqui embaixo. Vou colocar isso ao lado dela e vou chamar isso, por exemplo, de página da cafeteria, e agora vou fazer a mesma configuração. Então, vou adicionar um tablet, vou adicionar um telefone celular. Agora, em vez das páginas prontas, vou pular para os blocos de construção, que eu possa ver aqui a mesma navegação. Vou simplesmente colocá-lo aqui e você pode ver que ele já adiciona o mesmo. Agora, precisamos repetir a configuração que tínhamos antes, que é ótimo, para que você possa ver isso novamente. Então, vamos selecionar nossa página principal e, em seguida, lembrar da primeira etapa, precisamos de uma configuração vertical. Então, precisamos centralizar isso. Precisamos ter certeza de que tudo isso está definido como zero, então comece do topo. E agora queremos configurar isso para abranger o conteúdo, para que possamos ver exatamente o que temos aqui O redimensionamento, o recipiente cheio, vamos fazer no final, mas também podemos fazer isso individualmente com todos eles. Então, você pode simplesmente selecionar o elemento e, em seguida, girá-lo para encher o recipiente a fim de redimensioná-lo Então, vamos adicionar mais alguns elementos. Vamos adicionar talvez apenas um pequeno herói. Vamos adicionar isso aqui. E então, se você não o tiver na ordem desejada, basta usar as teclas para cima e para baixo para alterar isso. E observe também aqui que você tem algumas opções. Então, por exemplo, você pode ocultar o logotipo e o grupo de botões ou talvez apenas um botão. Então, vou adicionar algumas imagens também. Então, vamos dar uma olhada no undercard. Então, o que eu posso fazer é adicionar esta aqui, e talvez uma imagem maior. E se você tiver algo assim, vamos adicionar mais texto também. Então, o que você pode querer é adicionar algum espaçamento entre eles Então você pode adicionar isso aqui, mas isso vai adicionar espaçamento a tudo, então eu não recomendo isso Então, o que eu recomendo é fazer, se você selecionar esses dois, e depois transformá-los em um grupo de layout automático também. Novamente, isso pode ser um pouco mais complicado. Então, o que você faz é pressionar Shift e A, e isso vai transformá-lo em um grupo de layout automático. E agora tudo que você precisa fazer é definir a lacuna dentro daqui agora. E você também pode definir algum preenchimento, por exemplo, superior e inferior Então, por exemplo, agora você teria uma pequena lacuna entre aqui. E, a propósito, você também pode definir uma cor de fundo. Se você queria isso, existem algumas cores predefinidas aqui para você Assim, você pode usá-los e definir qualquer cor de fundo, por exemplo. Agora, se quisermos adicionar imagens aqui , faremos o mesmo de antes. Basta clicar aqui e, em seguida, usar a imagem de preenchimento e fazer upload de imagens do seu computador. E, novamente, também aqui, se você quiser alterar a ordem, basta selecionar o elemento e, com as teclas para cima e para baixo você pode alterar isso, e também pode alterar qualquer texto aqui e ele será refletido nos pontos de interrupção Agora, se dermos uma olhada na prévia desta página, você pode ver que ela fica bem, mas, novamente, temos esse salto estranho Então lembre-se, temos que configurar tudo para preencher. Então, já temos isso definido aqui. Assim, poderíamos examinar cada um desses elementos e simplesmente configurá-los todos para encher o contêiner, ou você pode usar um pequeno truque, pressionar Enter e agora selecionar todos eles e configurá-los para encher o contêiner. Então, vamos dar uma olhada novamente. E você pode ver que agora isso é redimensionado bem Ah, na verdade, dê uma olhada aqui. Ele salta, e isso ocorre porque nós agrupamos isso, então precisamos entrar nesse grupo e depois garantir que ele também esteja configurado para encher o contêiner Então, se estamos dando uma olhada agora, agora ele deve funcionar sem problemas, e podemos ver esse comportamento muito bom Agora, vamos conectar as páginas. Então, para fazer isso, basta selecionar o elemento que você deseja conectar. Eu poderia ter a miniatura inteira ou apenas a foto ou talvez apenas este link aqui Depende de você. Em seguida, vá para interações. E então, tudo o que você precisa fazer é prolongar uma pequena interação, e você pode ver que ela sai de todos os pontos de descanso daqui para o café E agora, se estivermos dando uma olhada nisso, podemos ver nossa página aqui. Clicamos em nosso link e ele nos levará ao café. S: apenas certifique-se de adicionar uma migalha de pão aqui para voltar. Você sempre pode fazer isso mais tarde. Vamos voltar ao design, à navegação. Aqui temos nossa pequena migalha de pão. Vamos adicionar isso aqui. Novamente, se você adicionar um novo elemento, certifique-se de dizer isso para encher o recipiente, e agora podemos voltar com um link para nossa página principal. Lembre-se de que você pode alterar qualquer texto e, assim, tem um site funcional muito bom. 22. BIBLIOTECA: Personalizando cores com variáveis: Personalizando suas cores. Então, vamos aprender um pouco sobre como as cores funcionam em nossa biblioteca e como podemos personalizá-las. Portanto, as cores no Figma geralmente são configuradas em algo chamado variáveis Então, na sua biblioteca, e novamente, isso pode parecer um pouco diferente quando você olha para ela. Essa é a primeira versão. No entanto, a configuração deve ser a mesma. Assim, você encontrará uma visão geral de suas cores. Então, essas são as cores atuais da marca que estou usando nesta biblioteca, e você encontra uma pequena captura de tela, mas não pode realmente mudar nada lá Se você selecionar uma cor, por exemplo, esse vermelho , no menu de preenchimentos, poderá ver que essa é a barra frontal primária Então, aqui está um pequeno clipe para que eu possa destacar essa cor. E essa será uma cor meio pura para que eu possa ver o código hexadecimal Mas vamos voltar porque o que queremos é sempre que usarmos uma cor para qualquer coisa em nosso design, queremos usar uma variável. Então, por meio desse menu, clique nesse pequeno ícone e, em seguida, você poderá acessar as variáveis que eu já configurei para você. Então, o que é realmente importante se você estiver configurando qualquer elemento é que tudo nesse elemento seja configurado em uma variável. Nunca queremos ver nenhum código hexadecimal em seu design final Então, por exemplo, vamos dar uma olhada neste. Portanto, se selecionarmos isso, uma boa maneira de ver se você capturou todos eles é nos painéis de propriedades do lado direito. Vá até a parte inferior e você verá algo chamado cores de seleção, e então você deve ver tudo isso usando essa notação de variáveis Então você não quer ver nada parecido, mesmo que seja apenas o plano de fundo. A maneira de adicionar cores é selecionar os elementos e, no menu do filme, usar o pequeno ícone aqui e depois escolhê-los. Então, eu gosto de separá-lo em cores de texto, depois em cores de marca e, em seguida, ter alguns tons neutros para coisas como Mas existem maneiras muito diferentes de configurar isso, então sinta-se à vontade para experimentar sua própria configuração também. Você sempre pode alterá-los. Então, por exemplo, se você estiver selecionando este texto aqui, por meio desse menu de filme , você pode simplesmente clicar aqui e escolher qualquer outra cor também. Agora, o local onde essas cores residem e onde você pode editá-las, adicioná-las e organizar tudo isso está no painel de variáveis. Então, clique no plano de fundo do Canvas e, no lado direito, você pode ver algo chamado variáveis e abrir essa configuração. Se você não ver as cores imediatamente, certifique-se de escolher as cores no menu suspenso da coleção . E aqui você pode ver todas as cores do jeito que eu as configurei. Novamente, você pode alterar essas cores. Por exemplo, isso é na verdade para o nosso primário, basta alterá-lo para roxo e, em seguida, também podemos adicionar variáveis. Então, basta clicar no botão Mais. Você pode adicionar outra variável de cor. Então, você pode simplesmente adicionar qualquer variável ao seu gosto e, em seguida, ela aparecerá no menu Você também pode notar que eu tenho uma configuração de modo claro e um modo escuro. Assim, você pode adicionar modos clicando no pequeno botão de adição aqui. Então, se voltarmos ao nosso design, agora você pode ver que tudo isso mudou aqui. Então, todos os meus botões que estavam vermelhos, agora a variável mudou. Como estou usando a variável em todos os lugares, só preciso alterá-la neste único lugar. Então essa é minha única fonte de verdade. Agora, também podemos ver o modo escuro. Então você pode selecionar isso aqui ou, na verdade, vamos selecionar um deles. Acho que seria melhor se você simplesmente retirasse uma instância. Então, aqui temos uma instância. E agora o que podemos fazer é aqui, encontrar algum tipo de interruptor pequeno. E se você clicar nesse botão, verá suas diferentes variáveis, coleções e, por exemplo, aqui a cor, e eu posso mudar isso para o modo escuro. Agora, é melhor deixar tudo no modo padrão para o primeiro modo da sua coleção. Então, vamos atualizar isso e passar para o nosso design. Então, para ver o design atual, clique no pequeno botão Biblioteca ao ver esta pequena bolha aqui solicitando que você atualize e publique a nova biblioteca com as alterações Então, vamos passar para o nosso design. E então você precisa voltar até ver a miniatura e o pequeno ícone aqui Clique nele e agora você pode aceitar as atualizações. E agora veja o que está acontecendo com esse botão, e você pode ver que agora temos a nova cor que mudamos. Agora, você também pode usar seu modo aqui, então você pode simplesmente selecionar esta seção inteira. E aqui, você tem o pequeno interruptor novamente, e agora você pode mudar para o modo escuro. E então você vê tudo mudando para o modo escuro. Observe como isso ainda está em vermelho porque, na verdade, nunca mudamos a cor em nosso modo escuro. Você também pode acessar todas essas cores dentro do seu site. Por exemplo, se você estiver selecionando esse texto e quiser apenas fazer alterações aqui, menu do filme, se você clicar nele, verá que ele atualizou automaticamente todas as suas variáveis de cor, então você também pode acessá-las aqui. 23. BIBLIOTECA: estilos de tipografia responsivos: Então, vamos também dar uma olhada em nossa tipografia e como podemos usá-la e personalizá-la Então, novamente, vamos primeiro entender como isso é configurado. Como de costume, essa é a primeira versão dessa biblioteca que pode parecer um pouco diferente, mas geralmente você usará algo chamado estilos e variáveis para isso. A configuração da tipografia é, em geral, um pouco mais complexa Eu recomendo que, se você precisar desse conjunto siga um pouco a configuração que eu lhe dei. Eu vou te dar uma visão geral rápida. Mas, novamente, se você é totalmente iniciante no Figma, isso pode ser um pouco desafiador, mas fique comigo Então, o que eu fiz aqui, e isso é algo que eu gosto de configurar. Isso não é nada que vem com o Figma é apenas uma visão geral do seu design Então, geralmente, eu nomeio os estilos. Então eu tenho display, título L, M e assim por diante, e então eu tenho um pouco de corpo e botões E, novamente, você pode personalizá-lo absolutamente ao seu gosto Você pode tirar coisas, adicionar coisas exatamente como você precisa para o seu design. Agora, o que você vê aqui é uma prévia, e essa prévia está usando algo chamado estilo. Então, se eu selecionar isso, você pode ver aqui na tipografia que isso não é chamado E aqui você pode ver, assim como nas variáveis de cores anteriores, você pode ver os diferentes estilos de texto. Agora, se você clicar no plano de fundo do Canvas e ver uma prévia de seus estilos aqui e, por exemplo, na tela que acabei de mostrar, podemos abrir isso e alterar as configurações. Também posso ver que algumas coisas, eu gosto de usar o acerto de linha assim porque eu pessoalmente gosto de usar uma porcentagem aqui, mas você pode ver que algumas coisas são usadas como uma variável. Então, se está nesta pequena caixa aqui ou nesta aqui, apenas diz fonte, então isso é uma variável. Também temos uma coleção que colocamos nesses tecidos Novamente, isso não é nada que você precise fazer. Você poderia literalmente pegar este e digitar um 80 aqui e você teria o mesmo resultado. Então, se você é iniciante, talvez queira fazer isso. Estou apenas usando uma forma um pouco mais sofisticada, que significa que, se eu for direto até o final desta linha, vejo um pequeno símbolo de variável e agora escolho o tamanho na minha configuração de variáveis. Então, vamos dar uma olhada no que isso parece. E, novamente, se você é iniciante, talvez queira configurar tudo isso manualmente e pular esta Então, temos nossa coleção, vá para tipografia. E aqui você pode ver que o que eu fiz foi, nós temos a fonte, então eu estou usando pop-ins aqui. Então, digamos que você queira alterar a fonte em todo o documento e ele extraia o Google Fonts automaticamente Você pode simplesmente acessar o Google Fonts, o site, e ver todas as fontes diferentes. Então você pode simplesmente digitar o nome aqui. Digamos que eu queira mudar tudo isso para Inter, então eu teria que colocar isso aqui, e então todas as minhas fontes mudariam para Inter Então, eu não preciso ir um por um. Então, isso é muito, muito útil. Agora, aqui você pode ver os diferentes tamanhos. Então, isso é exibido no desktop, depois o título L no desktop, e você pode ver que eu posso alterá-los individualmente para os diferentes modos Nesse caso, é o desktop, tablet e celular que estou usando. Só para ver, vamos fazer isso ridiculamente grande. Vamos somar isso como um 100 para que possamos ver se funciona. Então, tudo que eu preciso fazer é mudar isso aqui. E agora, como você pode ver, isso é muito grande agora, e isso é Estagiário Então você realmente não pode ver isso aqui, mas se eu separasse isso e separasse essa fonte aqui também, então você pode ver que agora é o Inter No entanto, queremos manter isso intacto. Então você pode ver que tudo que eu tenho que fazer é isso, e agora isso vai se refletir em todos os meus designs. Então você pode ver aqui que, de repente, recebemos uma manchete muito, muito grande E agora, a forma como usamos isso aqui é exatamente como mostrei antes com a prévia. Então, por exemplo, neste, você pode ver que na tipografia, eu estou usando display Se eu quisesse outro, eu poderia simplesmente escolher outro título daqui E isso está atraindo os estilos. Portanto, você sempre lidará com os estilos e, em seguida, os estilos extrairão as variáveis Agora estamos ficando um pouco mais complicados porque o que está acontecendo aqui é que sempre usamos nosso estilo geral, e então o estilo sabe, vamos nos lembrar, o estilo sabe qual modo. Portanto, esse é o padrão, então sempre operamos em um desktop. Então, de alguma forma, se vamos aqui em nosso tablet, precisamos dizer a esse estilo que agora é um tablet. Então, o que acontece é que selecionamos esse pequeno interruptor que temos aqui, você vai para a tipografia Eu também inventei um para espaçamento, mas agora estamos interessados em tipografia e você precisa dizer que é um tablet porque, por padrão, o que aconteceria, ficaria assim Então, vamos dizer que , por favor, use o modo tablet. Então, todo o modo tablet de tipografia para isso. E então você pode ver o mesmo aqui para o celular. Se selecionarmos isso, você verá que tudo está configurado para celular. Então, novamente, se você precisar inventar isso pode ser um pouco cansativo Então, eu recomendaria manter minha configuração por enquanto. Se você quiser se aprofundar aqui, recomendo que você realmente se familiarize primeiro com estilos de topografia e variáveis Se você está familiarizado com o FIGMA, isso fará muito sentido para você Agora, se quisermos usar isso em nosso design, o normal, precisamos apenas atualizar nossa biblioteca. Então, vamos publicar todas essas mudanças. Agora, vamos passar para o nosso design, atualizar nossa biblioteca e agora dar uma olhada. Isso deve ficar bem grande. Além disso, vamos ver o Inter em vez de pop-ins aparecendo aqui E como tudo já está incorporado nos componentes, você não precisa mudar muita coisa aqui. Então você pode ver que isso vai captar isso automaticamente, mas você vai ver aqui embaixo na aparência, que isso está usando um tablet e que isso, por exemplo, está usando um celular. Uma última coisinha que talvez eu tenha esquecido de apontar. Então, acabei de voltar aqui nas minhas configurações originais, se você quiser adicionar um estilo, então vimos como adicionar variáveis. Então, vamos nos lembrar que, se você quiser outra variável, basta clicar no botão Mais e, desta vez, não usar cores, apenas adicionar outra variável numérica e definir isso de acordo com sua preferência E se você quiser adicionar outro estilo, então o que você pode fazer é defini-lo aqui, então você pode clicar em Mais e simplesmente adicionar um estilo de texto. E então você tem essa janela e pode simplesmente configurá-la. Mas, na verdade, acho mais fácil criar meu próprio estilo. Digamos que eu queira outra manchete. Eu retiro isso, eu o separo, e então eu configuro isso completamente ao meu gosto Vamos adicionar aleatoriamente qualquer coisa que gostaríamos Então, eu separaria tudo e depois configuraria isso da maneira que eu quisesse E quando eu estiver pronto com isso, eu entraria aqui no meu painel de tipografia e adicionaria a partir Então eu vou para estilos e, em seguida, crio esses novos estilos. E você descobrirá isso se clicar no plano de fundo, aqui dentro, dentro de seus estilos. E eu então criaria outro campo e documentaria isso em minha visão geral. Portanto, essa visão geral não é obrigatória. Na verdade, isso é apenas algo para você se lembrar de como tudo isso está funcionando. 24. BIBLIOTECA: blocos de componentes responsivos: Deixe-me mostrar como criar componentes para usá-los em sites figma, seja para estender uma biblioteca existente ou para configurar sua própria Uma pequena nota lateral antes de mergulharmos. Se você quiser criar suas próprias bibliotecas, você realmente precisa entender os recursos do Figmas, então você não pode se safar apenas adivinhando e experimentando Se quiser fazer isso, você precisa entender variáveis, estilos de tipografia e variáveis, componentes, propriedades dos componentes e o layout muito importante do Figma Então, acompanhe. Ainda pode fornecer uma boa visão geral se você souber o básico do Figma Mas se você leva isso a sério , certifique-se entrar em um curso sólido para iniciantes e de realmente entender esses princípios em sua essência. Então, vamos adicionar um componente à nossa biblioteca para entender como tudo isso funciona em segundo plano e todas as configurações em torno dele. Portanto, ao configurar componentes , também precisamos de alguns blocos de construção que os alimentem. Então, eu já configurei minhas cores em variáveis e tenho meus estilos de tipografia Vamos apenas nos lembrar. Aqui você pode ver os diferentes estilos de tipografia. E então, se verificarmos as variáveis, teremos coleções diferentes. Então, vou usar esses estilos de cores no meu componente, que vou criar. Eu tenho uma coleção adicional que fiz. Isso não é necessário, mas é muito útil e você pode até ficar mais sofisticado com isso Então, por exemplo, eu tenho o tamanho da tela como uma variável, então este é um desktop, tablet e celular, e então eu tenho um preenchimento que mudaria de acordo Novamente, você pode absolutamente configurar isso ao seu gosto. E lembre-se, eu também tenho meus tamanhos de tipografia configurados de forma que isso extraia automaticamente diferentes tamanhos para os diferentes Então, em nosso componente, isso está se encaixando agora. Então, vou adicionar uma galeria e colocá-la na seção do meu grupo de cartas. Então, o que as seções realmente fazem é que você tenha maneiras diferentes manter as coisas organizadas. Então, por um lado, no arquivo, temos nossas páginas. Então, temos nossos blocos de construção. Deixe-me dar uma visão geral. Então esta é esta página, e temos nossos wireframes e nossos designs Então foi assim que eu configurei isso. Você pode configurar isso de uma maneira completamente diferente. E então, em minhas páginas diferentes, eu uso seções. Então você encontra seções aqui embaixo. Você tem molduras ou seções. Você também pode usar o atalho Shift S. Sempre que você coloca algo em uma página ou seção diferente, vamos dar uma olhada aqui em nossa biblioteca, você pode ver que esta é a biblioteca Então, primeiro, vemos as diferentes páginas. E então, se pularmos para os blocos de construção, deixe-me lembrá-lo, esta seria esta página aqui. Então, lá dentro, podemos ver as diferentes seções que criamos. Então, aqui temos os grupos de cartas, que é onde vamos adicionar nosso novo componente, então ele deve aparecer aqui. Isso é muito bom porque também significa que você pode simplesmente arrastar componentes de uma seção para outra para manter tudo reorganizado ou renomeado corretamente Então, por enquanto, vamos ampliar este e adicionar nosso próprio componente. Então, o que vou fazer primeiro é pressionar F e desenhar uma moldura. E agora eu quero que esse tamanho de quadro seja do tamanho da minha área de trabalho. E eu já configurei uma variável para isso. Eu também poderia digitar isso à mão, mas eu tenho uma variável, então vou ver aqui as dimensões, e você vê o tamanho da tela, e eu vou usar essa. Vou adicionar um título. Vou pressionar T para digitar algo e vou dar um nome a esse título E então eu vou manter isso bem simples. Então, eu vou ter um retângulo e vou criar alguns retângulos E depois eu quero que eles se movam literalmente como uma pequena galeria em movimento por aqui. Vamos torná-los um pouco maiores. E vamos adicionar isso aqui. Então, estou mantendo isso bem simples. E você também pode investigar todos os outros exemplos que eu adicionei aqui. Por exemplo, aqui você pode ver que isso é como cartas aninhadas, então você pode pular aqui e ver onde essa carta foi originalmente construída Então você pode realmente se aninhar e se tornar muito sofisticado. Mas vou mostrar uma configuração simples e, em seguida, você pode começar a partir daí e explorá-la ainda mais. Vamos dar um nome a essa, e eu vou dar um nome a essa galeria, e agora vou adicionar um layout automático. E, novamente, você não conseguirá mais contornar o layout automático se quiser configurar seus próprios componentes. Então, primeiro de tudo, vou aninhá-los. Vou selecionar todos eles. E você pode ver que não tenho configurações de layout automático. Vou usar o atalho para criar um quadro ao redor dele, que é Shift A. Ele cria um quadro de layout automático ao redor dele, que você pode ver aqui Vou nomear as cartas. E agora podemos ver as configurações aqui. Isso é horizontal. Temos uma lacuna. Vamos fazer disso um múltiplo de oito, na verdade, talvez um pouco maior. E então também vamos adicionar um pouco de preenchimento para a esquerda e para a direita Então, na verdade, se tivermos, vamos manter o 40 aqui por enquanto, e então vamos ter um 20 aqui, e então isso deve resolver o problema. Agora vamos adicionar layout automático para tudo isso. Então, acho que posso me safar simplesmente adicionando-o ao pai. Vamos ver. E aqui estão as molduras. Eu já vejo o menu e agora tudo o que vou fazer é centralizar tudo isso. Então, vamos garantir que tudo esteja centralizado. Ok, ótimo. Poderíamos ajustar a lacuna e tudo mais, mas vou deixar assim por enquanto. E então eu vou tirar uma cópia, e agora eu quero que isso seja o desktop. E agora, lembre-se, eu trabalhei de tal forma que tenho variáveis para espaçamento. Caso contrário, você pode fazer isso manualmente. Então eu tenho desktop, eu tenho tablet, então eu posso simplesmente usá-los aqui. Eu não usei essas variáveis de espaçamento. E então, com a tipografia, é o mesmo. Então, eu tenho que ter certeza, antes de tudo, que estou configurando tudo com variáveis. Vou verificar isso de vez em quando, então você deve inserir o tamanho certo da tipografia E quaisquer mudanças. Então, primeiro de tudo, só para mostrar aqui, eu estou usando esse preenchimento, então eu estou tendo preenchimento esquerdo e direito, para que se adapte Eu realmente não preciso disso nesta configuração, mas ainda o tenho em segundo plano, caso precise. Então, o que eu ainda não fiz foi verificar se tudo está configurado com estrelas e variáveis. Então, o título, ele automaticamente me deu um título L, então está tudo E agora eu só preciso ter certeza de que minhas cores e minhas cores também são variáveis. Então, aqui vou tirar isso do plano de fundo. Acho que esse deveria ser esse que eu não preciso. Essa, eu vou transformar em imagens em um segundo. Então, essa é uma cor de texto. Você também pode simplesmente escolhê-lo aqui. Então você vê que é uma cor de texto. E até mesmo o plano de fundo é muito importante que sua cor de fundo, que isso também esteja configurado em variáveis de cor. Então, na verdade, eu vou deletar isso, e então eu o tenho aqui. Para ter uma cópia, você sempre pode verificar se todas as cores de sua seleção são variáveis. E eu esqueci minhas pequenas imagens novamente, então vamos voltar aqui novamente. E agora o que vou fazer é configurar isso como um preenchimento de imagem. Então, eu resolvi isso, e qualquer pessoa que consuma esse componente mais tarde sabe que este é o lugar onde eu espero que eles adicionem imagens. Ok, então agora devemos ficar bem. Agora, tudo o que precisamos fazer é ter uma aparência aqui e, como estamos usando tudo com variáveis, todas as informações já estão armazenadas nessas coleções diferentes. Agora estou fazendo espaçamento e vou para o tablet, e também quero a cor que não mude E então a tipografia, eu também quero que seja o tablet, para você possa ver que isso está E agora podemos fazer o mesmo com nosso celular. Então você vê que eu os tenho abertos, e eu vou para o celular, e eu vou para o celular. Não precisa dele em seu desktop porque é o primeiro modo. Às vezes, gosto muito de adicioná-lo para que tudo seja configurado da mesma maneira, mas como é o modo padrão, geralmente você não precisa dele. Então, o que podemos fazer agora, agora podemos selecionar tudo isso. E então, com um clique, vou com uma pequena lista suspensa, criar um conjunto de componentes Gosto muito de tornar esse contorno um pouco mais espesso, para que fique visível, e geralmente o amplifico um pouco para ter uma pouco para Ok, então vamos tirar um. Na verdade, vamos retirar esses dois, e então podemos ver que se comporta da maneira que eu espero Agora você pode ver que eu ainda tenho um erro. Então, o que eu preciso fazer é nomeá-los. E lembre-se, nosso nome é desktop, celular e desktop, tablet e celular Então, vamos selecionar isso, e eu vou renomear todos eles. E então eu também posso selecionar o grupo inteiro e nomear esse ponto de interrupção. Ok, ótimo. Tablet, desktop e, em seguida, você deve ver no menu suspenso nosso fantástico celular. Agora, posso adicionar uma pequena coisa e, novamente, isso é um pouco mais avançado, mas é muito útil porque, na aparência, você pode adicionar uma propriedade de componente E então você pode clicar em mais aqui, e então eu posso simplesmente dizer mostrar título, criar a propriedade Vou adicionar isso aqui também. Então, vou apenas selecioná-lo e, em seguida, ele deve vê-lo. Posso selecioná-lo aqui porque estou no mesmo conjunto de componentes. E agora, se eu estiver selecionando isso, você pode ver aqui mais tarde, podemos escolher se queremos esse componente com ou sem título Então, isso é muito bom mais tarde, quando o consumimos. Ok, então isso parece bom até agora. Vamos testá-lo. Então, o que vamos fazer é publicar essa biblioteca. Então, vamos atualizá-lo. Vamos entrar em nosso arquivo de design e depois atualizar. Vamos receber essas atualizações. Ok, ótimo. Então, agora, se pularmos para a seção em que o colocamos, que era grupos de cartas, devemos ver nossa galeria, e você pode ver que está aqui. E agora podemos simplesmente arrastar isso, e agora ele deve preencher todos os diferentes pontos de interrupção diretamente Vamos dar uma olhada, e isso funciona muito bem. Então, isso só funciona porque usamos a convenção de nomenclatura para desktop, tablet e celular, para que ele saiba o que fazer com ela. Ok, ótimo. Então, o que precisamos fazer agora, vamos apenas visualizar isso, e então podemos ver que provavelmente precisamos algumas configurações de layout automático porque elas não são transferidas automaticamente. Então, tudo que está dentro, ele fica, mas você precisa dizer a ele como esse bloco deve ficar aqui dentro. Então, fazemos o habitual, selecionamos nosso par e moldura. Isso já está configurado para um layout automático vertical. Em seguida, selecionamos essa moldura que acabamos de adicionar e apenas nos certificamos de que ela esteja configurada para encher o contêiner. Então, vamos dar uma olhada no que isso parece agora. E sim, isso parece ótimo. Esse é o tipo de efeito que queremos. Agora, queremos que isso seja rotativo e, no momento, só podemos fazer isso no site figma, então não podemos adicionar isso à nossa biblioteca Então, precisamos pegar o elemento aqui e depois pular para as interações, adicionar uma interação e adicionar uma interação marcante. Você pode ver que esse é o tipo de coisa que queremos. Você pode mudar isso, então a velocidade, a direção e tudo mais, vou deixar como está por enquanto. Então, agora vamos dar uma olhada. Esse é o lado errado. Vamos selecionar esse lado aqui. Jogue, e isso parece maravilhoso. E a parte importante, na verdade, é que temos um pouco de preenchimento à esquerda e à direita Caso contrário, eles ficariam juntos. Deixe-me te mostrar isso. Então, o que fizemos aqui, se você selecionar isso, poderá ver que temos um preenchimento à esquerda e à direita disso Caso contrário, eles ficam juntos, então esteja ciente disso. Ok, então vamos adicionar algumas imagens. Eu só vou acelerar isso para você em segundo plano. Então, vamos dar uma olhada. Isso parece ótimo. Vamos garantir que nosso redimensionamento funcione. Mas, na verdade, está me dando esse salto estranho novamente. Então, às vezes, quando você adiciona uma animação que acontece, você só precisa voltar e se certificar de que está configurada para encher o contêiner ou qualquer outra forma, na verdade, você quer que isso funcione. Então, vamos tentar novamente. E agora estamos tendo um comportamento muito bom, então você também pode usar suas predefinições aqui Você quer mudar alguma coisa sobre esse componente. Então, por exemplo, digamos que você queira ter tudo isso aqui, na verdade, com cantos arredondados. Vamos selecionar todos eles. Um pequeno atalho, pressione Enter, e então você obtém todos os elementos secundários e, em seguida, adicionamos alguns cantos arredondados E então vamos atualizar. A propósito, uma pequena nota lateral. Se você estiver usando elementos aninhados, aqui temos tudo em um único elemento Mas aqui, por exemplo, onde temos uma carta aninhada, vamos pular para essa carta Se você colocar um pouco de sutileza na nomenclatura , isso não atualizará a biblioteca porque só queremos dar uma visão posterior dos componentes completos de nossa biblioteca Então, essa é uma maneira de esconder aquela pequena nota lateral. Então, vamos publicar isso e, depois que isso for atualizado, também precisamos pular novamente. Vamos garantir que isso seja realmente atualizado, publique. Sim. Vamos nos certificar de pular até aqui, e agora precisamos voltar até ver nossa miniatura e recebê-la e agora dar uma olhada que acontece com os cantos Então, atualize tudo, e você pode ver isso recebe diretamente a atualização. 25. Saiba mais sobre o Figma: Agora, durante este curso, quero me referir a muitos recursos do FIGMA, como componentes, também layout e variáveis Se você usar T FIGMA, tudo isso será muito natural para você No entanto, se você é novo no FIGMA , isso pode ser um pouco complicado Não abordarei esses conceitos neste curso. No entanto, com sua assinatura do Skillshare, você pode entrar no meu curso para iniciantes do Figma Em Projetos e recursos, adicionei um link direto. Você pode simplesmente clicar nele. Isso o levará diretamente a este curso. O curso dura 4 horas e começa com todas as noções básicas que você pode ou não querer estudar Se você quiser examinar apenas certos conceitos como componentes ou variáveis, por exemplo, a diferença entre variáveis e estilos, algo muito importante para a tipografia, basta pular para essas seções e explicar tudo isso desde o início Também ou para layout, como você pode ver aqui. Se você quiser ir além, poderá encontrar mais coisas neste curso, como criar protótipos com a FIGMA, como colaborar e até mesmo um projeto de curso para Este também é, de longe, meu curso mais popular no Skillshare e, como você pode ver, nas avaliações, as pessoas ficaram muito felizes com isso Então entre e saiba mais sobre o Figma.