Sites do Figma: crie sites sem código

1. 0 Trailer: Ei, meu nome é Jeremy e bem-vindo ao meu curso de sites Figma, onde você criará um site sem código no Figma sem Vou mostrar tudo que ele tem a oferecer agora e como você pode criar seu próprio site de portfólio ou até mesmo um site básico de cliente. Mostrarei todo o processo do espaço de trabalho geral, aprendendo a usar a interface do usuário Vou detalhar como adicionar seções e usar modelos no espaço de trabalho FIGMA Também mostrarei meu processo de criação de um site de uma página onde adicionamos algumas imagens. Brinque com a topografia, crie componentes e também aprenda como tornar o site responsivo e, em crie componentes e também aprenda como tornar o site responsivo e seguida, finalize o site e publique-o ao vivo em um domínio de Então isso parece divertido. Inscreva-se na aula hoje e comece a criar sites no Figma em pouco tempo 2. 1 Introdução ao espaço de trabalho e UI do Figma: Em primeiro lugar, depois de entrar no Figma, aqueles que têm Sigma quatro ficarão bem Você pode ver agora que você tem um site e ele diz Beta. Podemos clicar nele e isso gerará um espaço de trabalho do site. Portanto, o Figma tem alguns modelos no momento, provavelmente haverá muito mais no futuro. As pessoas provavelmente criarão modelos. Mas, por enquanto, se você estiver na guia Explorar, poderá ver modelos simples feitos aqui, nada muito sofisticado Portanto, você pode começar com algo assim se não quiser construir do zero. Eu quero construir do zero, você pode aprender os fundamentos da criação do site Figma Você também pode clicar à esquerda se quiser uma landing page, pessoal ou um portfólio. Por enquanto, vou explorar e clicar em Blank Site. Quando estiver no espaço de trabalho, você terá suas ferramentas na parte inferior Você tem sua barra de ferramentas com tudo o que precisa. No lado direito, você tem os estilos, a exportação, as aráveis e qualquer outra coisa relacionada à topografia que parece normal e, à esquerda, você tem suas camadas Você notará logo à frente que tem a página inicial e pode ver que é uma moldura cinza e , por dentro, você terá seu desktop e seu celular. Agora, no lado esquerdo, você tem suas páginas da web. Portanto, nossa página inicial é a página atual que estamos usando. Se quisermos adicionar uma página, basta ir para o canto superior esquerdo e clicar no sinal de adição ao lado da seção da página da web Atualmente tenho uma página inicial, então posso clicar com o botão esquerdo aqui e adicionar uma página secundária Posso clicar duas vezes nele e criar uma página Sobre ou uma página de contato ou o que quer que seja. Se você não quiser essa página, basta clicar em Excluir depois de selecioná-la e eu me livrarei dela. Você também tem as configurações da sua página com uma pequena engrenagem. Se você colocar o mouse sobre a seção da página inicial, clicarei nela e teremos alguns detalhes básicos de SEO aqui, como meta-informações, o título da página, que é o título principal que você vê no Google Você tem a linguagem aqui e também a imagem social aqui. Quando você compartilha o Link, digamos, no LinkedIn, ele aparece com a imagem de pré-visualização para que você possa fazer o upload de uma imagem lá Você também tem domínios aqui para que possamos conectar o domínio posteriormente e, em seguida, você tem informações gerais do site aqui Então favicon, e você tem um código personalizado se quiser incorporar widgets ou E isso é basicamente tudo para os detalhes do site. Vou pressionar uma pequena seta para voltar, e agora estamos de volta aqui. Então, o que vou fazer agora é me livrar da visualização móvel e ficar com o desktop. O que podemos realmente fazer é começar a arrastar e soltar algumas seções e elementos dentro. Então eu quero ir para o lado esquerdo, e você quer ir para inserir. Eles já têm alguns modelos de página pré-fabricados, o que é bem legal. Então você tem alguns modelos aqui. Você também tem navegação. Então, temos um NavBA. Também temos seções, recursos e incorporações de heróis para que você possa incorporar vídeo do YouTube ou um link de URL, o que é muito legal Você também pode adicionar íris lá. Você também pode pesquisar coisas se tiver componentes, certas coisas. Você também tem uma coisa nova que eles criaram chamada M, que usa codificação de IA Então você não precisa fazer nenhum código, mas na verdade ele vai gerar efeitos para você, o que é legal. Se você quiser alterar a cor de fundo do nosso site, podemos simplesmente ir ao campo e alterá-lo para preto ou qualquer cor que você quiser. Depois de clicar nele, você também pode clicar duas vezes nele e chamá-lo de Página Inicial, certo Mas provavelmente é bom deixá-lo no desktop e mantê-lo na página inicial Barra de ferramentas inferior, você tem suas ferramentas. Você tem uma página da web, que é um quadro W para F, seção é Shift S. Você também tem o M e as ferramentas de incorporação, que mostrarei mais tarde, e então você tem suas ferramentas básicas de forma, ferramenta de imagem Então você tem algumas outras ferramentas que você pode pesquisar. Essa é a introdução ao espaço de trabalho dos fungos. Vou mostrar como criar algumas seções e projetar o primeiro layout e estrutura do 3. 2 Layout automático da versão desktop: R. Primeiro, quero clicar no pequeno botão positivo à esquerda e eu vou para a navegação E eu vou deixar essa pequena e linda Navbar aqui, e vou jogá-la ali mesmo Ele deve se encaixar automaticamente. Agora, se formos ao painel de camadas, podemos ver que a camada está dentro da área de trabalho, como podemos ver. Temos o cabeçalho, temos o menu e, em seguida, você tem todos esses layouts de pedidos Então você tem o logotipo lá e os botões no layout ordenado, nós ampliamos , então seria bom passar por essas camadas você mesmo e cortar o que está lá Então, temos dois botões aqui e, em seguida, temos um logotipo aqui, que podemos mudar. Vou adicionar uma seção de heróis. Vamos talvez fazer isso aqui. Arraste e solte isso. E bum, temos aquela seção legal de heróis. Poderíamos, poderia ser um painel ou algo divertido lá. Temos botões e uma manchete. Agora, vamos também adicionar uma seção de recursos. Vamos, talvez, devêssemos usar uma grade de Bento? Não tem como errar com um Bento. Então, coloque isso aí. Também podemos adicionar talvez outra seção. Vamos com depoimentos. Talvez coloquemos algum texto lá. Quais são alguns outros recursos que podemos adicionar. Também podemos adicionar alguns cartões. Também podemos simplesmente excluir uma seção, podemos clicar com o botão esquerdo e excluir. Se não estivermos vibrando ou não precisarmos disso, sempre podemos mudá-lo Isso é totalmente bom. Agora, uma coisa eu notei que não há a guia Fuda, mas eles têm a Foota na seção de navegação, então você desce aqui e digamos que podemos fazer a foota básica com, digamos, as três Deixe-me arrastar isso de volta para dentro, certifique-se de ver as linhas azuis ou se elas estão encaixadas. Legal. Então nós entendemos isso. Acho que também preciso adicionar uma chamada à ação. Então, deixe-me, eu não sei se eles têm um CTA aqui. Mas sempre podemos adicionar os nossos. Eu poderia simplesmente adicionar isso aí. Isso pode ser um botão. Então, temos o layout básico da nossa página de destino para desktop e vamos continuar personalizando o design. Eu tenho algumas imagens de marca, um logotipo e uma marca que eu criei e que vamos adicionar ao design. Por isso, recomendo criar seu próprio resumo ou usar o resumo que eu forneço e usá-lo para criar alguns modelos, gerar algumas imagens Você pode usar a IA, tudo bem. Use o que quiser e gere algumas imagens e coisas legais com as quais você possa preencher todas as informações e o conteúdo do site. Você não precisa copiar exatamente como eu estou fazendo, mas brinque, adicione os recursos e as seções que quiser e vamos personalizá-los. 4. 3 4 Design e imagens Pt: Parte da aula, adicionaremos nossas imagens e design para que possamos começar a finalizar a aparência visual geral do nosso site Fui em frente e adicionei meu ás t. Tenho alguns textos que criei e criei este produto chamado Neuroshot É um impulso de energia onde você pode beber. Tem cafeína e magnésio e um monte de coisas que acabaram de ser criadas, e eu tenho algumas ilustrações Eu tenho um plano de fundo, alguns ícones e alguns retratos de depoimentos. Eu quero adicioná-los aqui. O que vamos fazer primeiro é adicionar nossas cores e nosso texto. Quando começamos a criar o site, podemos atualizar todo o design. Eu fui em frente e criei algumas de nossas cores. Você tem a cor pêssego aqui e o roxo que eu criei E quando você clica, é apenas uma forma com a cor nela, você pode sentir no lado direito e clicar nesses quatro círculos, clicar no pequeno botão de adição e, pequeno botão de adição e se tiver, digamos, uma nova cor, pode vir aqui e ligar, sabe, pêssego ou digitar o que quiser e criar uma coleção, para que eu possa criar essa variável E agora você vê que ela criou essa cor em nossas variáveis. Agora, se eu for para as variáveis no canto superior direito, você pode clicar nela. Você pode ver agora que nossa cor foi adicionada aqui e você pode ver que é pêssego Posso entrar aqui e clicar com o botão direito do mouse e duplicar variáveis, posso excluir ou limpar o que eu quiser Eu só quero deletar isso porque eu já os adicionei aqui. Se você quiser ficar mais arrumado, pode ir até os três pontos e criar uma coleção e chamar essa marca E agora você tem várias coleções aqui. Então, para adicionar, eu quero adicionar cor a essa coleção, podemos fazer isso, ou você pode simplesmente deixá-la na coleção padrão. Agora, vou para a seção de heróis, pressionarei Control e clicarei com o botão esquerdo, o que me ajudará a clicar em algo que está dentro de um grupo. Você pode ver no painel de camadas que se eu clicar na área geral aqui, se eu clicar nesta seção aqui, você pode ver que temos um texto dentro do layout automático. E você pode ver que é um layout vertical e temos texto e, em seguida, botões. E se você quiser clicar rapidamente em algo sem selecioná-lo, basta pressionar Control e passar o mouse sobre esse elemento e você o encontrará e clique com o botão esquerdo para entrar nesse grupo e selecionar É só um pouco mais rápido. Agora, o que eu quero fazer aqui é ir para a seção de tipografia e digitar BN Vou mudar a fonte para B néctar Eu acredito que essa é a fonte que eu estava usando para a marca, então eu realmente gosto dessa. E vou apenas ajustar o espaçamento entre letras. Vamos talvez ir 2%. Sim, isso é legal. E o que podemos fazer agora é adicionar isso como um estilo de texto. Vou para o canto superior direito, ver os quatro círculos novamente. Diz aplicar estilo. Vou clicar nele e vou clicar no pequeno botão de adição. E eu vou chamar isso de H um, e podemos simplesmente fazer o título H um. Você pode colocar um pequeno traço se quiser torná-lo mais legível, o que quiser, e podemos realmente mostrar mais opções e você pode mais opções e você pode personalizar o tamanho, a pasta de alface e pasta de alface Se você quiser ter um ponto de interrupção diferente para celular, se quiser um tamanho separado, crie um tecido para celular Então, quando você diminuir a escala, o tamanho não ficará confuso Por enquanto, vou deixar esse estilo aqui e criar. Agora, se eu for até minhas fontes, digamos que eu queira selecionar essa fonte aqui, posso ir para os quatro pontos novamente, e meu estilo está ali Então, também criarei um estilo para o texto do parágrafo. Então, para o texto do parágrafo, estou usando figueira. Opa. Figueira, e estamos usando médio. Provavelmente também podemos escolher o 16 normal, talvez optemos pelo tamanho 20. espaçamento entre letras pode ser de 0% e a altura da linha é de 1:50, talvez queiramos aumentá-la ou endurecê-la Acho que podemos endurecê-lo um pouco. Vamos 145. Então eu vou salvar isso, e vamos chamá-lo de corpo e criar estilo, então agora eu tenho esse estilo. Mas eu também quero ajustar a cor disso. Então, vou usar a cor roxa escura em 50%. Vamos 75%. Então, temos aquela cor roxa, que parece boa, e agora ela deve ser atualizada. Agora, se eu for, vamos testá-lo rapidamente, e aí está lindo. 5. 4. Design e imagens Pt: Tenho os estilos principais e agora vamos trabalhar na barra de navegação antes de fazer o upload de qualquer um dos outros designs Então, vou usar o Navbar, e o que eu quero fazer é fazer com que o Navbar permaneça no lugar quando eu Então, atualmente, quando eu rolo, você pode ver que a Navbar não vem conosco Vou transformá-lo em uma barra de navegação fixa. Então, o que você quer fazer é selecionar a barra de navegação, ir para o canto superior direito e clicar na posição, e queremos alterá-la para fixa Agora, corrigido, tudo isso significa que ele o fixa uma parte específica na tela ou no navegador. Então, se eu corrigir isso agora, você pode ver que ele se livrou daquele contêiner traseiro. E agora, se eu pressionar play em nosso pergaminho, você pode ver que ele está grudado na tela na parte superior Vou atualizar algumas das cores, então vou clicar duas vezes, verificar se estamos selecionados no menu e vou mudar o preenchimento para a cor roxa. E então eu vou trazer meu logotipo. Mas eu vou fazer rapidamente uma versão branca. E vou clicar duas vezes aqui na empresa. Então, eu folheio esse logotipo e vou reduzi-lo e, em seguida, garantir que ele esteja centralizado dentro desse bloco E vou colocar esse logotipo dentro do layout do pedido, para garantir que tudo esteja funcionando. Varrer. Então, o que eu vou fazer é que podemos ter um link aqui. Talvez possamos dizer que talvez resenhas, e podemos dizer tudo bem agora. E eu vou fazer o botão talvez assim. E eu quero fazer com que seja um gradiente, assim como a cor de um pico. Então você tem dois nas paradas lá. Você pode ajustá-lo se quiser. Acho que por enquanto, isso parece bom. E eu realmente quero mudar a fonte para ser um néctar. Vou selecionar o plano de fundo, descer até, clicar em Imagem e clicar em Carregar do computador, e vou localizar meus arquivos e clicar duas vezes e ele deve carregá-los, o que é muito legal. Vou mudar meu texto, meu título. Eu quero me livrar do botão secundário. Agora, o que eu quero fazer é arrastar minha imagem aqui e soltá-la dentro. Eu pressiono Control set, seleciono no cabeçalho e colo a imagem aqui. Podemos torná-lo muito grande. Vou mudar o posicionamento para absoluto, para que possamos arrastá-lo para qualquer lugar dentro desta caixa. Portanto, no layout da ordem dos heróis, quando você cria algo absoluto, significa que ele pode se mover para qualquer lugar dentro desse contêiner principal ou desse layout principal. Então, se eu apertar play, você pode ver que deveria estar dentro dessa imagem, o que é legal. E talvez eu queira que ele se sobreponha um pouco ao texto Não sei, algo assim. E vamos fazer com que essa manchete seja muito grande. Você pode usar o Control Shift e o botão de parada total para torná-lo realmente grande. E eu vou seguir em frente e pressionar colar. Opa. E esse vai ser o roxo. Legal. E eu vou selecioná-lo, e agora vou expandir a caixa, a largura é pequena, então é como uma caixa de texto Então, vamos fazer com que a largura seja de cerca de 1056. Tudo bem. Sempre podemos personalizá-lo. E talvez possamos ter várias garrafas. Talvez tenhamos, tipo, um sabor diferente aqui. Vou copiar e colar o texto, e vou ter que criar alguns estilos novos, então vou fazer esse estilo H dois. Você também pode pressionar Control para selecionar e depois soldar a mudança Você pode selecionar vários objetos. Vou selecionar os cabeçalhos. E eu vou selecionar o cartão, e vou mudar a cor desse preenchimento, e provavelmente vou usar essa cor clara aqui. Solte uma ferramenta. Você pode selecionar vários objetos e pressionar I para a ferramenta Conta-gotas, e eu vou apenas tirar uma amostra dessa cor, que torna muito fácil fazer isso Você quer ter várias cores. Um pode ser pêssego, o outro pode ser 25%. Não sei, algo assim seria legal. Vou entrar aqui e fazer o upload dessas imagens aqui. Eu só vou arrastar isso para lá. Vou arrastar a outra imagem dentro daqui e excluir a outra. Vou entrar aqui e ir até a imagem no painel de camadas, clicar no salto e arrastar a outra aqui E podemos ampliá-lo, e você pode ver que ele já está recortando o conteúdo, que se encaixa perfeitamente nele Para os outros, terei que garantir que se encaixe um pouco melhor. Então, podemos escalar isso um pouco assim. Vou clicar na imagem e recortá-la para nos livrarmos dessa seção superior, pressione Enter. E eu vou selecionar a carta 1, e talvez eu vá ampliá-la. E vou escalar todo esse contêiner também para que possamos ver essa imagem aqui. Então, selecionamos o contêiner da grade. Então, podemos ver que há a seção do cartão de recursos e, em seguida, a grade aqui dentro. Só queremos ampliar isso um pouco. Vou selecionar a parte traseira e vamos ajustar o espaçamento. Mas vamos aumentar o tamanho geral desta seção para que tenhamos mais com que jogar. Neste caso, podemos simplesmente ampliá-lo. 6. 5 4 Design e imagens Pt: Tenha uma vitória agora. E para esta, vou usar a vitória. Vitória. Taça Victory 24. Roxo. Vou criar o cabeçalho H três e depois vou fazer esses H três, fazer aquele roxo. Vou jogar aquela imagem lá e deletar as outras. Nós temos essa imagem. Vou pressionar Shift A para colocar isso em um quadro e vou centralizar esse quadro. Eu só vou ampliar isso assim. Agora, uma coisa legal com os sites Figma que você pode realmente usar a IA para editar imagens Então eu vou clicar na imagem, tenho que sentir. O que vou fazer é clicar em Editar imagem e ela aparecerá. Agora eu vou dizer para remover o fundo branco. Você pode ver que obviamente é AI Beta, mas vou pressionar Control Enter e vamos ver se ele consegue se livrar do plano de fundo. Eu a removi, mas ela tem esse fundo cinza, então vou dizer que quero dizer remover o fundo e vou excluir essas imagens aqui. Vou arrastar minhas imagens para dentro daqui, e depois vou escalar isso, a mesma coisa. Você pode simplesmente clicar nos pequenos ícones de AR na parte inferior e clicar em Mover plano de fundo. Agora, vou copiar e colar a dela principal aqui dentro e vou trazê-la para a seção de cartões. Eu vou até o topo e torná-lo absoluto. E agora você pode ver que não está empurrando nenhuma das cartas para fora do caminho porque o absoluto ignora qualquer elemento dentro dessa caixa e permite que você a mova Então eu posso trazê-lo para trás e posso dizer, ingredientes. Vamos arrastá-lo um pouco assim. E então essa é uma maneira divertida de criar esse elemento, e então eu posso fazer talvez Oops Vou selecionar o texto e talvez alterar o campo para 75%. Agora vou passar para a próxima seção sobre serventes. Vou deletar alguns deles. Vou clicar duas vezes aqui e selecionar os cartões e excluí-los. Com os depoimentos, eu posso copiar e simplesmente selecionar, e ele pode substituir o Control Shift R. Então vou reduzir todas as dimensões dessas imagens Então, você pode clicar com o botão direito do mouse na proporção de bloqueio e, em seguida, vou digitar 50 para a largura. Eu vou fazer figueira. Para este, eu vou fazer regularmente. Eu vou fazer 15, eu vou 16170. 16 e cor de preenchimento, 75%. Vou trocar a figueira e colocá-la em negrito, e a cor pode ser o roxo escuro ali E lá vamos nós. Temos alguns bons. E se eu quisesse mudar a cor da borda? Vou apenas controlar e segurar a tecla Shift, clicar e selecionar o cartão, e você pode ver que o traçado é apenas um traço preto, mas podemos alterá-lo para roxo ou ficar como essa cor laranja clara. Eu vou fazer a cor pêssego. Eu acho que parece bom. Abra e cole o botão. Vou colar isso. Agora, o botão na loja aumenta para o tamanho. Dobre o pé para cima, podemos brincar com coisas diferentes aqui. Você pode simplesmente alterar a seleção de cores na parte inferior. Lá vamos nós. Algo diferente lá embaixo. Eu quero colar o logotipo, então vou selecionar a seção aqui embaixo no pé para cima. Mas eu o quero fora do contêiner e também vou mudar isso para absoluto. E podemos fazer com que pareça assim. Vou arrastar os ícones aqui, clicar com o botão esquerdo do mouse e colocá-los na lateral. Vou controlar e, em seguida selecionar aqui e colar isso. E vou me certificar de que este texto é. Vou colocá-lo em outro layout de ordem e mudar a ordem para horizontal , então fica assim. Mude a posição A e, em seguida certifique-se de que a lacuna seja a mesma da outra. Mude o layout. Reduza isso. Quando o design estiver concluído. Tudo o que faremos na próxima lição é adicionar algumas interações e efeitos divertidos de passar o mouse 7. 6 Adicione interações (controle deslizante do logotipo, efeitos hover): Então, vou mostrar como adicionar algumas interações suaves e efeitos de foco para dar vida ao seu site Primeiro, vou começar com a Navbar e vou até o botão Vou até o topo e vou clicar em Mais ao lado do Link. Isso adicionará um link e podemos adicionar Link. Podemos colocar uma URL. Então, se houver outra página, podemos vinculá-la a outra página. Então, se eu for para o canto superior esquerdo, clicar no botão Mais e, digamos, quero transformar isso em uma página de produto. Eu posso voltar para o meu botão. Pressione o menu suspenso e obtenha um produto. Então, agora, se eu passar o mouse sobre ele, clique nele, vou para a página do produto e no canto superior esquerdo, você pode ver como é. Agora, para torná-lo mais interessante, o que você quer fazer é clicar nessa extremidade na parte inferior, executar na parte superior e clicar em interação ao lado da guia de design e podemos ver aqui as interações. Já tem um efeito de foco nele. Podemos adicionar vários efeitos de foco, se você quiser. Mas posso adicionar outra interação. Então, eu vou clicar em Mais e vou clicar em Rolar dois, e vou mudar o gatilho. No momento, está ligado enquanto você paira. Você pode fazer enquanto pressiona, com o mouse para a esquerda, o mouse para baixo. Exceto clicar enquanto pressiona. Quero ir até a seção de citações ou a seção de depoimentos , por exemplo E agora você pode ver essas pequenas linhas de interação que mostram para onde está indo. Então, vai descer aqui. Agora, se eu voltar e fazer a interação , vou para aquela. Clique no texto aqui e um dos recursos interessantes é que você pode realmente atualizar coisas com código. E o que podemos fazer é ir até o canto superior direito e clicar em Tornar interativo com código. E agora o que posso fazer é pedir à IA que invente algo interessante. Então, posso dizer que faça o texto oscilar no HVA. A IA estará pensando. Tem uma pequena animação agradável. Agora, quando passamos o mouse, você pode ver que ela oscila, o que é Agora, se eu quiser testá-lo rapidamente, puxe meu mouse e você verá que ele está pairando Agora o texto está cheio porque é Beta. Eles não oferecem suporte a fontes personalizadas. Edite o código também. E digamos que não queremos esse efeito, podemos ir até os três pontos e dizer restaurar o design original, no canto superior direito, e eu vou me livrar desse efeito Então, agora não terá mais esse efeito. Então, como as fontes não estão sendo registradas, o que podemos realmente fazer é delinear o texto Vou clicar duas vezes nisso, clicar com o botão direito mouse e clicar em Outline Stroke E agora, ao visualizar se você tem uma fonte personalizada que está usando, você pode ver que ela a delineará e deverá funcionar Então, talvez você precise fazer isso para tudo, mas vamos adicionar mais algumas interações. Vou pressionar o botão de adição e você terá muitos efeitos diferentes. Digamos que queremos criar um efeito de revelação, podemos fazer um fade in e sair da saída ou não Podemos escalar, deslizar , o que você quiser. Vamos talvez deslizar de baixo para baixo. Depois que o pagamento for carregado, ele aparecerá e fornecerá uma pequena prévia da qual eu realmente gosto. Para esses também, faremos a mesma coisa. Você também pode clicar com o botão direito do mouse e remover interações se não estiver entusiasmado com elas Então, vou entrar aqui, interações, revelar, e vamos deslizar para baixo. Carregue a página, vamos pré-visualizar, e você pode ver os designs aparecerem, o que é muito legal. Basicamente, a melhor coisa a fazer é brincar. Então, você sabe, talvez eu queira selecionar uma dessas cartas ou essa grade, podemos interagir e fazer uma paralaxe de rolagem Talvez seja 50% da velocidade e você pode rolar e ver o efeito de paralaxe lá, mas obviamente, eu não quero esse Também faça coisas divertidas, como adicionar uma interação divertida clicável Por exemplo, se eu quiser ter essa imagem aqui, posso interagir e jogar e torná-la arrastável E eu posso pegá-lo, e queremos ter certeza de que podemos arrastá-lo para dentro do contêiner principal, que é esse cartão. Então, vou pressionar Play para testá-lo. Então, se eu puxar o mouse sobre isso, posso arrastá-lo agora assim, o que é legal. Então, está dentro desse contêiner. Mas digamos que quiséssemos arrastá-lo para qualquer lugar. Eu posso voltar ao efeito. Eu posso atualizá-lo, pré-visualizar. E agora ele deve ser capaz de se arrastar para qualquer lugar. E como está dentro desse contêiner, ele não se move, o que é muito legal. Você pode ver todos esses ícones que você pode arrastar agora, o que é um pouco divertido. Você pode adicionar quantas interações quiser para tornar o site muito mais agradável. Eu sugiro adicionar fade ins simples. Então, para este, podemos fazer um efeito de foco, e digamos que queremos aumentá-lo um pouco mais. Tipo um em quatro. Podemos alterar a transição para fácil entrada e saída ou você pode torná-la dinâmica ou rápida ou o que quiser Então você pode ver isso. Se eu pressionar play agora e passar o mouse, você pode ver que tem um efeito de foco legal , o que é divertido Então brinque com isso. Classe. Vou tornar o site responsivo para celular para que tudo funcione corretamente 8. 7 Torne o dispositivo móvel responsivo: Faremos com que o site seja totalmente responsivo para que funcione em tablets e dispositivos móveis Então, uma vez que você tenha concluído seu design, tenha interações e tudo esteja pronto para começar O que podemos fazer é excluir essa página, vou clicar no botão de adição e adicionar um novo ponto de interrupção Agora, qualquer alteração que você fizer no desktop, ela adicionará essas alterações ao tablet e depois formará espuma. Portanto, podemos usar o tablet e também adicionar um celular. Eu sempre recomendo fazer o design do desktop primeiro para que ele caia em cascata Você pode ver agora, mencionei anteriormente, que se você puder criar um tamanho diferente para os pontos de interrupção menores, é por isso que é sempre bom voltar aos nossos estilos de topografia Eu vou escolher isso. E se você for para a tipografia, podemos clicar em Editar estilo e você deseja adicionar alguns Então, no Tablet View, você pode ver que talvez queremos ir para 35 e, para dispositivos móveis, queremos ir ainda mais longe. Vamos por volta de 20. E deve ajustar isso. Então, agora, se clicarmos aqui, ajustarmos, mas acho que , como é Beta, eles provavelmente ainda não o atualizaram. Então, eu mesmo vou mudar o tamanho e ajustar esta seção. E eu vou apenas ajustar essas garrafas. Vou colocar um layout de pedido e quero personalizá-lo assim . Na verdade, vou continuar. Vou apenas personalizar isso. E para as outras garrafas, vou realmente escondê-la, então vou diminuir a opacidade, não possamos ver isso E, obviamente, não está aparecendo, mas queremos ver essa garrafa aqui. Basta seguir em frente. Verificaremos todos os tamanhos e, se você quiser adicionar mais preenchimento, pode fazer isso Acho que está tudo bem por enquanto. Para esses ingredientes, vamos apenas movê-los para o centro. Eu quero ajustar isso e mover isso para baixo. E todo o resto parece bom. Portanto, basta gerenciar o espaçamento e o dimensionamento e garantir que tudo funcione em tamanhos diferentes Quando sair da versão beta, tenho certeza de que todas essas correções serão corrigidas. Traga isso, esse. Você pode trazê-lo para fora. Você também pode ajustar o tamanho na lateral. Ok, então você pode ver as mudanças lá. À medida que vai diminuindo, a escala é diferente. Para este, o que queremos fazer. Vamos apenas remodelar essa caixa de texto. M. Vou ajustar o tamanho disso E acho que tudo está bem, exceto esses depoimentos Não sei o que tenho para consertar isso. Então, salvei novamente as imagens porque eu tinha máscaras de recorte porque as criei no Illustrator nesses problemas Então, eu apenas o reexportei como um. Agora, se arrastarmos a escala, podemos ver o que ela está fazendo Então, se reduzirmos a escala, você pode ver o que está acontecendo em tamanhos diferentes. E teria que consertar. Você vê como o Nav e o texto devem ser dimensionados de diferentes tamanhos Então, o que eu gosto de fazer é que, se eu quiser mantê-lo em um determinado tamanho, podemos ir para o lado direito e adicionar uma largura mínima. E essa largura mínima deve ser 612. Então, agora, se eu pressionar Play, você pode ver que ele deve permanecer e sempre alinhado ao centro. Então vamos lá Mas quando chega, sob a visualização móvel, sempre há uma centralização e mínimo, podemos adicionar uma largura masculina, pode ser 300, então ela deve estar centralizada ali para que você possa ver lá Então, essa é uma maneira de corrigir esse problema. E quando você estiver pronto para começar, na próxima lição, mostrarei como publicar seu site. 9. 8 Publicar o site mostra como conectar o domínio: Quando estiver satisfeito e estiver tudo bem, você pode ir para o canto superior esquerdo e clicar em Publicar. E o Figmae lhe dará um local de teste. Então, se você não conectar o domínio, tudo bem. Eu posso literalmente clicar em Publicar e isso me conectará a essa URL. Se você tiver outros problemas, ele dirá que você tem algumas máscaras ou qualquer outra coisa. E há acessibilidade e outras coisas, mas provavelmente não vou entrar em muitos detalhes sobre isso. Quando estiver pronto, basta clicar no site e eu posso navegar. Tudo parece estar funcionando na visualização do desktop. E está literalmente ao vivo no navegador. É literalmente assim que você publica seu site. Agora, se você quiser conectar um domínio, clique em Conectar e vá Conectar e deseja conectar um site. Eu geralmente compro meus domínios no Go Daddy ou você tem o Namecheap, e basta Go Daddy ou você tem o Namecheap, e basta seguir as instruções aqui. É bem simples. 10. 9 Altro: Por fazer esta breve videoaula sobre como configurar rapidamente um site Infigma agora Você não precisa aprender nenhuma outra ferramenta de terceiros. Você pode fazer tudo, desde design, logotipos, até mesmo projetar e construir sites, Infigma, que é muito legal Tenho certeza de que você entrará na seção de discussão e projetos de aula na seção de discussão e projetos de aula. Colocarei alguns links extras para explicar algumas coisas, fornecer mais informações, fornecer alguns recursos úteis e um resumo. Se você não tiver um resumo para criar, pode criar uma marca ou produto semelhante e criar apenas uma landing page de uma página. A turma, por favor, deixe um comentário também se você achar isso útil para que outros alunos possam fazer o curso.