Projete, crie e publique seu portfólio com o Figma e o Framer

1. 1: Se você é designer ou trabalha na área criativa, precisa de um portfólio. Não há desculpas, sim, você pode publicar nas redes sociais, mas ter seu trabalho em seu próprio domínio, em um site que você projetou e construiu, sempre será mais profissional Mas como você cria um site que exige muito trabalho e tempo. Não consigo ler um código. É muito caro. E qual plataforma devo usar? Não se preocupe, vamos fazer isso juntos nesta aula. Você criará seu próprio portfólio para poder compartilhá-lo com qualquer pessoa, incluindo empresas, clientes ou familiares e amigos, se quiser. E você não precisará escrever uma única linha de código. Oi, meu nome é No Keto. Sou um designer experiente e brilhante com sede em Barcelona. Para encontrar clientes e projetos, preciso revisar meu portfólio muitas vezes. Sei que pode ser uma experiência assustadora, mas não precisa ser, especialmente se você estiver usando as ferramentas certas E é isso que vamos fazer aqui. Vamos usar o Figma e Framer para criar nosso Examinaremos nosso design no Figma. E não se preocupe se você não tiver um design. Eu preparei um especialmente para esta aula que você pode usar para acompanhar e, em seguida, traremos nossos designs para o Framer Framer é uma ferramenta que nos permite criar site totalmente funcional sem escrever uma única linha de código Mais importante ainda para esta classe, o Framer é totalmente Depois de termos nossos designs no Framer, criaremos as interações para que possamos vincular nossas páginas, criar sistemas de gerenciamento de conteúdo para que possamos gerenciar nosso conteúdo dinamicamente, adicionar animações e transições e garantir que nosso site tenha uma boa aparência E, finalmente, publique nosso site em nosso próprio domínio. O resultado final, um site que você pode compartilhar com qualquer pessoa e começar a procurar o emprego dos sonhos. Mas não só isso, ao seguir esta aula, você adquirirá as habilidades necessárias para criar não só isso, mas qualquer site. Vamos começar. 2. PROJETO DO CURSO : O projeto desta aula é bastante autoexplicativo. Você criará seu próprio portfólio usando o Framer. Você tem a flexibilidade de seguir esta aula usando seus próprios designs que você cria no Figma ou usar os que estou fornecendo na guia de recursos. A escolha é sua. Você pode seguir esta aula independentemente do que escolher fazer, e essas são as etapas que seguiremos. Antes de tudo, prepararemos nossos arquivos Figma. Se você optar por usar seu próprio design, fornecerei dicas valiosas sobre como nomear camadas e organizar seu design para uma transição suave A segunda etapa será explorar o Framer para se familiarizar com a plataforma e conhecer todo o potencial que ela A terceira etapa será instalar o plugue entre o Figma e o Framer Aprenderemos como instalá-lo e usá-lo. O primeiro passo será trazer seus designs da Figma para o moldador Este é o momento mágico em que, com apenas copiar e colar, você coloca todos os seus designs no moldador Vamos ajustar e mudar tudo para que fique exatamente como você queria antes de termos qualquer animação transição ou qualquer outra camada de O resultado final dessa classe será um URL La que você poderá compartilhar com qualquer pessoa. E o mais importante, você poderá compartilhá-lo com o resto da turma. Além disso, se quiser, sinta-se à vontade para compartilhar seu design Figma para que possamos ver todo o seu processo de design Vamos começar essa aula examinando o Framer. 3. Apresentando o Framer: Temos falado muito sobre Framer. Mas o que é framer? O Framer é um construtor de sites gratuito e sem código. E isso significa que você pode criar sites reais com designs criados por você em questão de horas ou até minutos. Você não precisa programar, basta pegar seus designs, colocá-los lá, publicá-los e você terá um site ativo que poderá começar a criar, obviamente sem um design anterior. E faça o trabalho diretamente no Framer, pois ele tem muitos componentes e modelos com os quais você pode começar Mesmo com um design muito simples, você pode adicionar animações, transições e, se quiser ainda mais trechos de código para torná-lo mais complexo Agora, nada disso é necessário para criar um site simples. Como eu disse, você também tem muitos modelos com os quais pode começar. Alguns são gratuitos, outros são pagos, mas todos são ótimos pontos de partida para seus projetos. Ele também tem muita documentação, vídeos, tutoriais e até mesmo um curso completo para você começar Não teremos tempo para abordar nada disso nesta aula, mas se você estiver interessado, deixarei alguns recursos abaixo para que você possa conferir. E também fique à vontade para fazer qualquer pergunta sobre isso. Mas vamos dar uma olhada no editor real. Se for a primeira vez que você abre o Framer, você precisará se inscrever antes de poder usá-lo Eu realmente sugiro que você o use com o Google para não precisar se lembrar do seu registro, sua senha, etc Mas fique à vontade para continuar com seu e-mail se quiser mantê-lo separado da sua conta do Google. Agora, quando chegamos ao lançamento, somos apresentados à nossa página de projetos ou ao nosso painel. Se for a primeira vez que você pousa aqui, isso pode estar vazio ou parecer um projeto de demonstração. Mas aqui no topo, há quatro maneiras de começar. Você pode começar com um tutorial interativo. Você pode começar com um modelo. Você pode começar colando do Figma ou assistir a um tutorial para aprimorar suas habilidades À esquerda, você terá sua equipe. Então, no meu caso, eu tenho um playground, que é meu espaço para testar projetos. Tenho minha equipe de portfólio, onde tenho diferentes opções para meu portfólio. E então eu tenho dois projetos que estou trabalhando com outras pessoas. Mas vamos criar um novo projeto para que eu possa te mostrar o editor real. Agora, se você estiver familiarizado com o Figma ou com outros editores, isso parecerá muito parecido Na parte superior, temos opções diferentes para começar. Podemos começar inserindo uma página totalmente desenvolvida, apenas uma seção, algumas opções de navegação ou alguns menus, bem como algumas coleções de CMS e outros elementos que possam ser interessantes para nossa página, como links de mídia social Também podemos começar com um layout como uma moldura, linhas, colunas ou grades diferentes que se ajustem ao nosso design Podemos adicionar texto simples. A opção de começar com o CMS, mas não se preocupe, teremos uma aula focada apenas em adicionar uma coleção no Framer E então temos ações diferentes, que é como um menu rápido para realizar algumas ações específicas. Obviamente, cada projeto terá páginas diferentes. Por exemplo, temos uma página inicial, mas podemos adicionar uma página sobre, ou podemos adicionar quantas páginas quisermos depois vinculá-las como se fosse um site real. Quando adicionamos algo à nossa página, isso é exibido no menu Camadas. Como funciona no Figma ou em outras ferramentas, podemos selecionar cada elemento diferente Para cada um deles, teremos propriedades diferentes, como a posição, os efeitos de tamanho, que são a animação e as transições que podemos adicionar a esse elemento Mas, novamente, não se preocupe, vamos nos concentrar nisso em outra lição. Como esse é um elemento de texto, temos muitos tecidos que podemos modificar Aqui na parte superior, temos as diferentes configurações do site. Temos nosso perfil, temos a configuração de localização, para que você possa definir as opções de idioma padrão para alterá-lo para outro idioma Também temos as configurações da página e as configurações do site. Temos algumas propriedades de SEO que podemos definir aqui. Temos os diferentes domínios. Temos redirecionamento, para que possamos redirecionar de outra página. Temos teste e versão, que é muito útil se você quiser voltar para uma versão anterior que está salva no framer Temos algumas análises que são muito úteis quando publicamos nosso site e temos diferentes planos de atualização. Também temos as configurações de SEO para cada página específica do nosso lado. Agora, abordaremos isso muito mais detalhes quando estivermos prontos para publicar nosso site. Não se preocupe se você não entender o que tudo isso está fazendo. Finalmente, temos aqui a opção de pré-visualizar nossa versão para garantir que estamos satisfeitos com ela e, finalmente, publicá-la. Obviamente, esta é uma visão geral super rápida do Framer. Não se preocupe À medida que avançamos nesta aula, abordarei com muito mais detalhes algumas dessas áreas, como o CMS, como adicionar animações ou como criar uma versão responsiva para Não se preocupe se isso parecer novo, vamos tomar nosso tempo. Mas, por enquanto, vamos instalar o plugue que nos permitirá trazer nosso design da Figma para 4. Instalando o plug-in Figma to Framer: Há muitas maneiras de começar o projeto Framer. Vimos na lição anterior que você pode arrastar e soltar seções já criadas. Você pode começar a partir de um layout e adicionar seus componentes a ele. Você pode começar com um modelo ou com um design Figma Isso é o que faremos. Para isso, precisamos de um plugue. Vamos voltar ao nosso painel ou à página de projetos. Na parte superior, devemos selecionar Colar da Figma. Se por algum motivo você não o vê, acesse Framer.com slash Lá vamos nós. Ao clicar neste link você será direcionado para a mesma página. Realmente não importa qual opção você escolher. Clique em Obter o plug-in Figma e isso abrirá a página Figma desse plug-in Agora, no meu caso, não estou preso. Eu vou fazer isso rapidamente. Se você ainda não se conectou ao Figma no navegador, sugiro que faça isso também Quando estiver bloqueado no Figma, clique em Experimente. Isso deve abrir um novo arquivo Figma com a tela do plugin. Aberto. Essa tela nos fornece algumas informações sobre como usá-la, como nomear nossas camadas, como garantir que nossos grupos sejam totalmente preservados. E você também tem um link para um tutorial. Agora, esse é um arquivo vazio. Se clicarmos em Run, nada realmente acontecerá. Como se não houvesse nada para copiar aqui. Vamos criar rapidamente um design para que possamos testá-lo. Agora vou criar uma moldura de 120 ou 50 pixels. Vou dar alguns cantos arredondados e vou dar um pouco de cor. Vou adicionar o texto. Funcionou. Vou selecionar a moldura e ela deve estar disposta apenas para ter certeza de que o espaçamento está correto Agora que isso foi feito, vou selecionar o quadro a partir daqui. Você também pode selecioná-lo no painel de camadas. Vá para o menu Figma, clique em Plugins e clique em Figma para HTML com E isso deve nos dizer que algo está sendo copiado. Agora, você pode ver esse pop-up aqui. Você só precisa selecionar copiar para a área de transferência. Diz copiar para camadas com base no moldador. Vamos fazer isso. Vamos abrir o Framer Vou abrir o site que começamos anteriormente. Vou até a página Sobre e simplesmente aperto o comando V. Aqui está o nosso botão. Vou centralizá-lo um pouco mais. É a mesma coisa que criamos no Figma. Se você abrir aqui o painel de camadas, verá que temos uma moldura e temos algum texto E o texto, na verdade, é editável. Assim, podemos excluí-lo e substituí-lo por outra coisa, se quisermos. Além de ser muito fácil copiar nossos designs do Figma para o moldador, tudo é editável e tudo preservará tudo o que você Agora, se isso não funcionou, se você não conseguiu instalar o plug-in e copiar o design do Figma para o framer, sugiro que repita o processo Você vai para Framer.com e esmague Figma. Conecte o plug-in Figma, certifique-se de estar conectado ao Figma ao clicar em experimentar E também certifique-se, ao abrir o Figma, de que, se você acessar o menu de plug-ins, Figma to Tema with framer apareça Se isso ainda não estiver funcionando para você e você não tiver conseguido instalar o plug-in, informe-me abaixo e farei o possível para ajudá-lo a configurá-lo para que você possa continuar esta aula corretamente. No entanto, se isso funcionou para você e agora esse padrão foi copiado para o moldador, você está pronto para a próxima lição, que trará nossos designs da Figma 5. Verificando os designs de Figma: Antes de copiar tudo totalmente, vamos dar uma olhada no design que preparei para você. Agora, lembre-se de que você pode usar seus próprios designs ou aqueles que eu vivo na guia de recursos. Essa técnica funcionará nos dois sentidos. Aqui eu tenho um site de portfólio muito simples. Temos uma página inicial, ela tem um menu de navegação na parte superior com três guias. Temos trabalho, temos cerca de, e temos uma página de contato. Temos um pequeno cabeçalho aqui na parte superior com meu próprio nome, meu título, minha localização e minha disponibilidade atual. Então temos alguns projetos aqui. Não adicionei nenhum título, mas observe como cada um deles terá o mesmo layout. Temos um CTA, entramos em contato e, em seguida, um rodapé com links de mídia social Também criei a versão móvel e, embora não copiemos essa versão para o Framer, é bom porque me dá uma ideia de como quero que meu design fique em um dispositivo móvel Temos então a mesma coisa para a página do projeto. Temos o projeto aqui no topo, temos uma imagem principal, um pouco de descrição, a função do cliente, alguns dados sobre esse projeto. Depois, temos algumas imagens, parágrafos e os mesmos com um layout diferente Em seguida, o mesmo CTA aqui na parte inferior. Por fim, temos um about pit com um cabeçalho com algumas informações sobre minha experiência, como entrar em contato e esse mesmo CTA Esse é um design muito básico, mas tem alguns elementos que, à medida que trabalhamos nele no moldador, facilitarão nossa vida Coisas que podemos reutilizar. Coisas que podemos criar uma vez e duplicar o quanto quisermos Vamos tentar construir isso de forma eficiente. Algo a ser observado também é que tentei nomear cada camada e cada grupo que, depois de copiarmos para o framer, seja muito mais fácil entender o que está sendo copiado e o que estamos Eu sugiro que, se você estiver usando seus próprios designs, faça o mesmo. Certifique-se de que cada seção esteja agrupada corretamente e que cada camada tenha um nome apropriado Se você quiser usar esse design em vez do seu, acesse os recursos, esfaqueie e baixe-o de lá novamente. Se você tiver algum problema com isso, me avise e farei o possível para ajudá-lo com isso. 6. Copiando os designs para o Framer: Você deve estar pronto. Se você assistiu até agora, você deve ter uma conta no Framer Você instalou o plugue para colocar nossos designs Figma no moldador e agora está pronto para começar Lembre-se de que você pode usar seus próprios designs, mas vou usar o projeto que apresentei na lição anterior durante toda a aula. Vamos lá, para simplificar as coisas, vamos apenas copiar a versão para desktop. E vamos começar com a página inicial. Vou voltar ao Framer e voltar ao meu painel para poder criar um novo projeto Vou ser novo e devo receber uma página em branco. Eu vou voltar para Figma. Eu vou ser um pouco brutal. Vou selecionar tudo na minha página inicial. Está tudo embaixo de uma moldura, mas vou selecionar as diferentes seções da minha página inicial. Vou acessar os plug-ins do menu Figma e clicar em Figma para HTML com Observe aqui na parte inferior como está dizendo que está copiando minhas camadas. Eu vou dizer copiar para a área de transferência, e está me dizendo que copiou 51 camadas que eu posso colar Vou voltar ao Framer, selecionar a área de trabalho e vou dizer comando Você pode estar pensando, ok, tudo está aqui copiado, mas não consigo ver nada Bem, a cor de fundo é um pouco diferente. Vou me certificar que a cor de fundo que tenho no Figma seja a mesma que tenho no Framer. Lá vamos nós. Tudo está copiado agora. Mas não consigo ver além desse ponto. Isso ocorre porque essa área de trabalho não tem a altura adequada. Em vez de dizer 1.000 figos, vou dizer apenas conteúdo adequado E aí está, isso é perfeito. Mas, novamente, estou enfrentando outro problema. Agora, a largura que eu tenho na moldura é um pouco menor do que a largura que eu tenho na Há duas maneiras de resolver isso. Ou mudamos a área de trabalho com moldura para combinar com a do Figma, ou alteramos os diferentes elementos que estão além desse ponto para caber nessa nova largura Você pode fazer o que quiser. Nesse caso, definitivamente depende de você. Mas porque eu posso ver que é apenas esse elemento aqui, enquanto o resto está funcionando corretamente. Eu só vou consertar isso. Em vez de dizer que a largura é fixa, vou dizer que a largura está preenchida, a largura está preenchendo o recipiente com o qual esse elemento está. Podemos fazer o mesmo com esses outros elementos. Esse é o mesmo design que temos no Figma, e agora está no Framer O bom aqui é que no Figma construímos tudo usando o layout automático, que significa que ele preserva as diferentes distâncias entre os elementos Está preservando os diferentes layouts. E algo tão rápido quanto fixar a largura. E a altura de um elemento é muito simples porque ele é construído como uma pilha como layout automático no Figma Agora, se você não está familiarizado com o layout automático no Figma, sugiro que assista tutoriais e se familiarize com ele, pois é uma das ferramentas mais úteis que a que a Porque é algo muito comum. Agora, o Framer, embora tenha um nome diferente e o chame de Stack, oferece as mesmas propriedades que temos no Figma, para que possamos combinar Agora, vamos rapidamente fazer nossa página sobre isso também. Vamos às páginas e criamos uma nova página, sobre a qual vamos ligar. Vamos fazer o mesmo. Vamos ao nosso arquivo Figma Eu vou para a página sobre. Eu seleciono as diferentes camadas que tenho aqui. Acesse o menu Figma. Conecte o Figma ao HTML, verifique se ele está copiando Copie para a área de transferência, vá para o framer e pressione o comando V. Agora estamos executando o mesmo problema. Nós sabemos como consertar isso. Agora vamos definir o conteúdo mais adequado. Nesta parte aqui, vamos dizer Feel. A única coisa aqui é que, como essa versão para desktop é um pouco mais estreita do que a que temos no Figma, não há muito espaço entre esses dois elementos na versão emoldurada Agora, podemos deixá-lo como está, ou podemos mudá-lo se quisermos. Eu vou dizer começar, e vou tornar essa imagem um pouco menor. Tem aproximadamente a mesma altura do elemento de texto. Lá vamos nós. Temos nossa página sobre toda copiada. Agora, eu disse anteriormente que podemos ser eficientes com a forma como projetamos coisas que parecem iguais e funcionam da mesma forma em páginas diferentes e podem ser transformadas em componentes reutilizáveis Se voltarmos à nossa página inicial, temos esse link do projeto aqui e ele é repetido algumas vezes. Agora, cada projeto é o mesmo elemento com as mesmas informações. Ele terá títulos diferentes, mas são os mesmos dados. Temos um título, temos um tipo e temos um ano. Isso então será vinculado a outra página. Podemos transformar esse elemento em um componente. Agora, o que é um componente? É exatamente o mesmo que está no Figma. componentes são basicamente elementos que você pode reutilizar em todo o projeto ou em todo o design, e ajudaremos você a gerenciar designs consistentes em páginas diferentes Podemos continuar selecionando o link completo. Portanto, certifique-se de selecionar o link do projeto. Vamos clicar com o botão direito do mouse e dizer Criar componente. Vou chamá-lo de Project Link. Isso criará uma página separada na qual podemos editar esse componente mestre. Vou remover tudo isso se quisermos, podemos duplicar este, ter exatamente a mesma coisa Mas agora, se quisermos editá-los todos de uma vez, podemos simplesmente ir aqui. Vou mudar o lado do telefone, vou dizer 64, vou dizer 24. Quando acessamos nossa página inicial, ela está mudando todas as suas instâncias. É uma ótima maneira de trabalhar com eficiência e garantir que todos os elementos que parecem iguais ao seu lado sejam atualizados corretamente. Por enquanto, vamos deixar as coisas assim. Copiamos os designs da nossa página inicial e da nossa página Sobre da Figma para Você pode estar pensando, ok, a página do projeto? Temos uma página de projeto aqui que também deveríamos copiar, certo? Ok. Não vamos copiá-lo agora porque exige que você conheça coleções e CMS, o que, coincidentemente, é a 7. Entendendo o CMS: Agora temos o esqueleto principal do nosso site. Temos nossa página inicial e uma página sobre. E agora precisamos pensar em nossos projetos, mas antes disso, precisamos falar sobre o CMS ou as coleções Vamos imaginar o seguinte. Cada projeto é um bloco. Cada bloco tem informações diferentes, porque dois projetos não terão o mesmo título. Talvez eles tenham o mesmo ano, talvez tenham o mesmo cliente, mas os campos serão os mesmos. Você tem um título, um tipo de projeto, um ano, um cliente e talvez tenha alguns parágrafos e algumas imagens Cada página terá basicamente um conteúdo diferente, mas teremos a mesma estrutura. Podemos pensar sobre isso dinamicamente. Criamos a página ou aquele componente e a usamos para cada projeto com dados diferentes. Para isso, precisamos de coleções. Agora, se você não está seguindo, vamos ver de uma forma prática. Vamos até o CMS Stab e clicaremos aqui na parte superior, no botão de adição Isso é criar uma coleção para nós, e vamos chamá-la de Projects Perfect. Agora, isso não tem um item aqui, tem apenas dois campos aqui. Temos título e temos Slug, que são os dados básicos de que precisamos Vamos dizer campos de edição aqui. Você pode adicionar o que quiser. Já mencionamos alguns. Vamos adicionar texto sem formatação e, digamos , ano, porque será texto sem formatação. Vamos adicionar um cliente. Também vamos adicionar o tipo de projeto e vamos adicionar a função por enquanto. É isso mesmo. Veja que você pode adicionar diferentes tipos de campo por enquanto. Vamos apenas mantê-lo como texto simples para que possamos editá-lo rapidamente. Mas fique à vontade para explorar tudo isso. Agora temos todos esses campos, mas não temos nenhum conteúdo. Vamos criar um novo item de teste aqui, podemos preencher os diferentes campos que criamos para o título. Vou dizer o site da loja Nike, que é um projeto imaginário que eu nunca fiz, mas seria um ano muito bom Eu vou dizer cliente de 2019, obviamente. Tipo de projeto Nick. Eu vou dizer design do site, inscreva-se. Eu vou dizer designer de UX. Não vou adicionar nenhum conteúdo por enquanto. E eu vou dizer seguro, legal. Isso adicionou uma linha ao nosso CMS. Vou preencher isso com alguns projetos falsos, que possamos explorar as opções do CMS Ok, vamos trabalhar com esses cinco agora que temos essa informação aqui. Se voltarmos à nossa página, você verá que temos o CMS aqui e temos nossos projetos Mas agora precisamos extrair essas informações do CMS para o nosso design real Porque, embora eu tenha adicionado cinco projetos ao meu CMS, eles não estão aparecendo em lugar nenhum Como eu deveria fazer isso? Agora, há duas maneiras pelas quais podemos usar essas informações. Podemos usá-los como lista de coleções ou como páginas específicas. Agora, as listas de coleções são todos os itens da nossa coleção em um só lugar. Imagine uma lista de todos os itens que temos em nosso CMS. Basta inserir uma página, que é exatamente o que precisamos para nossa página inicial. Páginas são páginas para cada item em nosso CMS, uma página para cada um de nossos projetos Agora, a maneira de inserir isso é acessando Inserir. E na seção CMS aqui temos a lista de coleções E podemos arrastar e soltar aqui todos os projetos, ou podemos arrastar e soltar campos de conteúdo em nossa página específica. Agora temos nosso CMS adicionado com cinco projetos e os diferentes campos de que precisamos Sabemos que precisamos de todos esses projetos como uma lista em nossa página inicial. E sabemos que precisamos de uma página específica para cada projeto, na qual extraímos todas essas informações. Porque isso exige um pouco mais de trabalho e precisamos finalizar nosso design. Vamos nos concentrar nisso em nosso próximo vídeo, onde teremos uma lista de projetos na página inicial e uma página de projeto para cada um de nossos projetos. 8. Criando uma coleção de CMS: Legal, então vamos nos concentrar primeiro na página inicial. A primeira coisa que precisamos é de uma lista dos nossos projetos. Vou remover tudo isso e deixar apenas uma instância do nosso componente de projeto. Lembre-se de que criamos um componente para o título desse projeto e vou deixá-lo assim. Você verá o porquê. Vamos inserir na seção CMS, vamos dizer lista de coleções Vou arrastar isso aqui. É assim que nossos projetos são apresentados como uma lista. Está correto porque está obtendo todas as informações, mas não se parece em nada com nossos designs Mas, felizmente para nós, há uma maneira rápida de corrigi-lo em camadas Você pode ver, em primeiro lugar, que adicionamos no lado errado. Não deveria estar no CTA. Essa lista de coleções deve estar na seção do projeto. Primeiro de tudo, vamos mudar isso. Agora. Vou remover o conteúdo desta lista de coleção onde diz Post, vou removê-lo. Essa lista de coleções está basicamente conectada ao nosso CMS, e o que ela faz é extrair as informações do nosso CMS para qualquer conteúdo que esteja por Assim, podemos pegar nosso componente e arrastá-lo para dentro da lista de coleções. Agora, ele criará cinco instâncias da mesma coisa, porque temos cinco projetos. Mas agora temos dois problemas. Em primeiro lugar, nosso design mudou. Isso ocorre porque a lista de coleções não tem a largura certa. Então, em vez de dizer corrigido, vou dizer: sinta-se bem. Primeira coisa corrigida. A segunda coisa é que ele não está extraindo os dados de cada projeto, do nosso CMS. Por que isso? Bem, isso tem uma resposta muito simples. Isso é um componente. A ideia básica de um componente é que o que quer que ele diga aqui, ele dirá aqui, a menos que o alteremos. Mas temos apenas um elemento aqui e não podemos editar esse aqui. Como editamos este? Mostra as informações de cada um dos nossos projetos. O que precisamos fazer agora é criar variáveis. Tenha paciência comigo, isso não é tão complexo quanto parece. A única coisa que precisamos fazer é garantir que esses três campos mudem com qualquer informação que estamos obtendo do CMS Existe uma maneira muito fácil de fazer isso. título do nosso projeto aqui na seção de texto , diz conteúdo sobre conteúdo, diz título do projeto. Se mudarmos isso, isso mudará o texto aqui. Se voltarmos à nossa página inicial, o texto aqui será alterado em todas as nossas instâncias. Ok, legal. O que precisamos fazer é garantir que isso seja variável. Em vez de escrever aqui o que queremos, vamos criar uma variável. Fazemos isso pressionando este sinal positivo ao lado conteúdo e dizendo criar variável e digamos texto simples Vamos chamá-lo da mesma coisa que o chamávamos. E vamos dizer que o padrão é o título do projeto e, dessa forma, ele volta ao que temos. Legal, vou seguir em frente e fazer a mesma coisa com os dois. Em texto, vamos dizer que conteúdo cria variável, texto simples, tipo de projeto e, em seguida, vamos dizer ano. E a mesma coisa. O conteúdo cria uma variável, texto simples, ano. Lá vamos nós. Agora está conectado. Esse texto agora deve ser dinâmico porque não podemos alterá-lo aqui, vamos voltar para nossa página inicial. Isso não mudou, mas agora podemos extrair informações porque criamos essas três variáveis. Aqui no painel do lado direito, diremos que algo diz Project Link, que é o nome do nosso componente e das três variáveis que definimos. O que podemos fazer aqui é alterá-lo manualmente. Mas, novamente, isso mudará para cada projeto, e não é isso que queremos. Observe esse botão de adição aqui. Agora podemos conectá-lo às variáveis que temos do nosso CMS. Podemos dizer que o título do projeto será nosso título. O tipo de projeto será, o tipo de projeto será o ano. É assim que você o altera dinamicamente. Agora temos todas as informações sendo extraídas do nosso CMS para esta lista de projetos, e isso é perfeito Mas agora precisamos de uma página para cada um desses projetos. Vamos para a guia Página em CMS. Vamos acessar a página de detalhes dos projetos P e dizer. Isso criará um toque aqui que diz páginas do projeto. 55 é o número de projetos que temos em nosso CMS. Aqui no topo, podemos ver todos os diferentes projetos que temos. O bom disso é que você só precisa projetá-lo uma vez. Se prosseguirmos e criarmos esta campanha da Apple, ela se adaptará a cada uma das páginas do nosso projeto. Em primeiro lugar, exclua tudo isso. Em seguida, voltaremos ao design do Figma e faremos a mesma coisa que fizemos com nossa página inicial e com a página sobre, que é copiar tudo com nosso plug-in Lembre-se de que vamos ao menu Figma, conecte Figma ao HTM Você sabe como isso funciona. Deve ser muito rápido. E vamos selecionar isso e aquecer a pasta. Perfeito. Temos nossa página agora. Parece bom. Temos alguns problemas aqui com uma imagem, mas sabemos como ajustá-la à medida que avançamos Lembre-se de que agora estamos editando a maçã, os projetos da Apple, a mesma coisa que fizemos antes. Podemos atribuir dados diferentes do nosso CMS em diferentes campos, em nosso site Eu seleciono o tipo de projeto, que na verdade deve definir título do projeto, desculpe por isso. Mas selecionamos o título do projeto, vamos para o texto Content set variable e dizemos título abaixo do ano. Nós podemos fazer exatamente o mesmo. Também vou mudar isso, só para você ver como isso muda em todas as páginas diferentes. Não tenho certeza se criei um para o papel. Sim, eu fiz. Perfeito. Eu vou fazer isso para o tipo de projeto. Temos o tipo de projeto. Ok. Agora estamos na página da campanha da Apple, mas se eu for ao Lego One, ele deverá ser atualizado com todas as informações que temos em nosso CMS Isso é perfeito. Isso é exatamente o que queremos. Nós o criamos uma vez, fomos eficientes com ele e não precisamos criar uma página para cada um de nossos projetos. O mais importante é que se agora quisermos editar isso, porque não gostamos muito do nosso design no Figma, queremos mudar alguma coisa, o que quisermos Qualquer coisa que mudarmos aqui em termos de layout, em termos de fundos, em termos de qualquer coisa que se adapte a cada página. Todos eles terão exatamente a mesma aparência. Você viu como é fácil trabalhar com o CMS. Você adiciona todos os dados aqui. Além disso, você pode adicionar mais itens aqui e editar os campos como quiser, além de inserir essas informações nos designs. Mas o que é bom agora é que agora temos todas as páginas do nosso site. Temos nossa página inicial com todos os projetos aqui como uma lista. Temos a página sobre. Temos as páginas do projeto para cada um dos nossos projetos. Agora que configuramos o design, adicionamos a coleção. Então, estamos prontos para a próxima etapa, que é conectar todas essas páginas que você possa navegar até cada uma delas. 9. Conectando as páginas: Há várias coisas que precisamos conectar do nosso lado. Precisamos conectar a navegação a cada página individual do nosso lado, precisamos conectar cada link do projeto a cada página do projeto. Finalmente, precisamos conectar esse contato a talvez um endereço de e-mail. E esses três links de mídia social para as plataformas ou perfis de mídia social que queremos. Primeiro de tudo, vamos começar com os do projeto, porque acho que é o mais importante. Agora, o que precisamos fazer é voltar ao nosso componente. Porque lembre-se de que tudo o que queremos editar nesta lista de projetos, precisamos acessar o componente apenas para garantir que ele se aplique a cada um deles. Clique duas vezes para entrar nele. Agora vamos adicionar um link para tudo. O que podemos fazer é simplesmente adicionar um link aqui. Em vez de marcar uma página ou URL específica aqui, vamos criar uma variável Podemos editá-lo em nossa página inicial, criar a variável, tudo bem. Agora vamos voltar para a página inicial. Lembre-se de que acessamos as variáveis da seção aqui em link do projeto do componente, porque não temos nada no CMS que seja um link ou algo parecido Não temos esse padrão positivo aqui. Mas se você clicar aqui em A, veremos o projeto colon slack O que significa sluck é a página real do projeto, o link específico para cada projeto, conforme definido no CMS Agora, se eu apertar Slc, lá vamos nós. Ele será vinculado à página apropriada do projeto. Existe uma maneira de testá-lo e, para isso, precisamos visualizar nossa versão, que está aqui na parte superior. Podemos clicar aqui. Podemos rolar para baixo até nossa lista de projetos e encontrar um dos projetos perfeitos. E talvez, digamos, a perna de uma que seja perfeita. Incrível. Agora, os projetos em nossa lista de projetos estão vinculados a cada página específica do projeto. A segunda coisa que vamos fazer é a navegação. Agora podemos ser eficientes com a navegação porque é um elemento que será repetido em todas as páginas do nosso lado. Por que devemos editá-lo em cada uma das páginas? Na verdade, deveríamos ter um componente para isso. Isso é o que vamos fazer. Vamos escrever, clicar e dizer, criar uma navegação de componentes perfeita, que criará um componente para nossa navegação que podemos simplesmente copiar e colar em todas as páginas do nosso site e editá-lo apenas uma vez. Antes de fazer isso, vou vincular cada um desses links. Isso deve levar você para a página inicial, também para a página inicial porque não temos uma página específica para trabalhar Sobre deve levar você para a página de contato sobre. Por enquanto, vamos vinculá-lo a um endereço de e-mail só porque não temos uma página de contato específica. Vamos aqui. Vou selecionar o ícone. Eu vou aqui onde diz link. Vou criar um link para a página inicial. Lá vamos nós. Agora está vinculado. Agora vamos selecionar o trabalho. Faça a mesma coisa. Link para a página inicial, o link sobre a página. E vamos criar um link para a página sobre. Observe aqui onde diz link. É porque está usando um estilo padrão que podemos alterar se você quiser, podemos mudar sua aparência Por padrão, qualquer link está com essa cor. E eu realmente não gosto disso, só gosto da minha cor branca. Mas no Hover, talvez o alteremos para mais escuro. Vamos testá-lo. Lembre-se de que você pode visualizar qualquer coisa. Você pode visualizar esse componente aqui. Sim, é um pouco difícil de ver, mas sim, vamos deixar as coisas assim. Em seguida, na página de contato vamos adicionar um e-mail, vou dizer meu e-mail. E isso abrirá seu aplicativo de e-mail padrão para escrever um e-mail. Então, vamos deixar as coisas assim e não nos preocupar muito. Agora temos nosso link de navegação para a página sobre. A página de trabalho. Vamos voltar para a página inicial. O que faremos é simplesmente copiar essa navegação para que você possa comandar ou simplesmente dizer copiar. Vamos para a página sobre. Clique na área de trabalho, diga o comando V, arraste-o para o topo, Perfect, e remova a navegação que não é um componente. Tenha cuidado com qual deles você remove. Este é um componente com este símbolo de diamante aqui. Esse não é. Então, vamos removê-lo. Vamos acessar as páginas do nosso projeto. Lembre-se de que você só precisa fazer isso uma vez. E aqui vou selecionar Desktop, dizer o comando V, arrastá-lo para o topo e remover a navegação que não é um componente. Aqui, temos um pouco de espaço na parte superior, e vou me certificar de que esteja na parte superior. Lá vamos nós. Agora só precisamos verificar se está funcionando em todas as nossas páginas. Isso é perfeito. Isso é exatamente o que queríamos. Agora vamos fazer o mesmo com nosso rodapé, o que deve ser muito mais fácil porque já sabemos como fazer isso Lembre-se de clicar com o botão direito do mouse, criar um componente, digamos rodapé, e vinculá-lo a cada uma de suas mídias sociais preferidas Legal, vamos lá. Agora vamos voltar para nossa página inicial. Vou comandar C para copiar meu pé. Volte para a página sobre. Copie o rodapé e verifique se ele está na posição correta. E remova esse. Certifique-se de que a largura esteja preenchida, apenas queremos ocupar todo o espaço. Em seguida, vamos para as páginas do projeto, selecione Desktop e removeremos o rodapé Isso não é um componente. É isso mesmo. Temos nosso rodapé conectado, nossa navegação conectada aos links do projeto conectados a cada página específica do projeto Mas devido à navegação, ao rodapé, porque tudo precisa estar conectado não apenas no desktop, mas também no celular e em outros pontos de interrupção, precisamos falar sobre E esse será um grande tópico. Prepare-se para a próxima aula. 10. Projetando para celular: home page: Acho que é bastante óbvio que, nos dias de hoje, todos os sites precisam ter uma boa aparência em todos os dispositivos. E podemos supor que todos acessarão nosso site a partir do dispositivo desejado, neste caso, um laptop. A maioria das pessoas acessa sites pelo telefone, e precisamos atender a isso Na verdade, nós já fizemos isso. Em nossos designs, você pode ver que criamos para desktop e também pensamos no layout que queremos para dispositivos móveis. Tudo bem, mas como realmente aplicamos esses designs ao Framer Agora, Framer, por padrão, quando você abre este site no celular, ele escalará tudo Tudo parecerá muito pequeno. E não é isso que queremos, só queremos garantir que tenha boa aparência e seja acessível. Agora, o bom é que criamos usando layout automático ou pilha Adaptá-lo ao celular não deve demorar muito, embora exija um pouco de Vamos adicionar um ponto de interrupção para dispositivos móveis e você verá que tudo parece errado. Isso é bom. Vamos ajustar isso A primeira coisa é que vamos adaptar nossa navegação. Não vamos fazer nenhum menu sofisticado por enquanto. Vou deixar isso para uma aula bônus que você pode assistir mais tarde. Mas vamos apenas garantir que você possa acessar cada um desses links. Vamos criar uma variante aqui e eu vou dar um tamanho a ela. Eu vou dizer que essa variante é 390 porque esse é o tamanho que nosso dispositivo tem aqui Eu só vou copiar isso. Em vez de ter esses três links próximos um do outro, vou colocá-los como uma pilha vertical E eu vou deixar um pouco mais de espaço. Eu vou dizer 35. E vou me certificar de que tudo esteja alinhado ao centro Nós vamos continuar com isso aqui. Em vez de ter essa variante um, vou dizer a variante dois e garantir que ela tenha uma boa aparência. Perfeito. A segunda coisa é o cabeçalho. Agora, a primeira coisa que noto aqui é que meu nome é enorme, e eu não quero que seja tão grande. Vamos reduzir o tamanho do telefone. Legal. Você verá que tudo foi duplicado. Então, agora temos camadas para desktop e camadas para telefone. Você pode acessar rapidamente cada elemento em nosso dispositivo telefônico. Eu vou dizer 42. Também temos essa pilha aqui que está sentada uma ao lado da outra Em vez de horizontal, vou dizer vertical. Eu vou dizer que deixei uma linha. Isso já está funcionando. Mas você pode ver? Há muito acolchoamento ao redor dela. Não precisamos de muito. Vou selecionar a pilha inteira em vez de tê-la aqui Podemos deixar os 200 para cima e para baixo, mas vamos dizer 20 aqui, 20 aqui. Isso já está muito melhor. Vou apenas dar um pouco mais de espaço em vez de espaço entre eles, vou dizer para começar, não preciso de muito. Eu só vou adicionar 15. Isso já parece muito melhor. Isso é perfeito. Vamos continuar com essas seções. Vamos precisar ser inteligentes aqui. Em primeiro lugar, em toda essa seção, vou mudar o mesmo preenchimento que tínhamos na seção acima, em vez de 80 para a direita e para a esquerda, vou dizer para a esquerda, e isso já está um pouco melhor Eu vou mudar o fundo aqui. Eu vou dizer 24. Mas agora preciso entrar em cada componente, a mesma coisa que fizemos para nossa navegação, e alterá-lo aqui para que ele possa se adaptar a cada um de nossos projetos. Vamos entrar em nosso componente de projeto. Novamente, a mesma coisa que fizemos com a navegação. Vamos criar uma variante com 390 de largura. A primeira coisa que percebo é que o título desse projeto é enorme Vamos mudar o tamanho da fonte também. Vai ser 42. O tipo de projeto será 24, o que já é bom. 24 por ano, o que é perfeito. Agora, no design do nosso telefone, vamos selecionar o componente e garantir que ele diga a variante dois. Parece bom em termos de tamanho, mas está fazendo coisas estranhas porque vai além do que precisávamos Vamos voltar ao componente e ao título desse projeto. Vamos garantir que esteja escrito preenchido. Vamos deixá-lo como um espaço entre e abaixo dos detalhes do projeto. Vamos dizer com cuidado, apenas para garantir que o título desse projeto ocupe o máximo de espaço possível sem ultrapassar o primeiro ano. Quando voltarmos à nossa página inicial, isso deve ser corrigido. Agora observe que não há muito espaço entre o título e o ano em que o título é longo E podemos corrigir isso dizendo que, em vez de espaçarmos entre eles, podemos dizer iniciar e adicionar essa lacuna de 50, o que deve corrigir isso. Sim, isso é perfeito. É exatamente assim que queremos que pareça. Agora vamos ajustar os tamanhos de fonte que parecem um pouco grandes demais para o meu gosto, digamos 38 E vamos corrigir esse rodapé da mesma forma que fizemos com nossa navegação Vamos criar outra variante. Vamos dar a ele um 319. Estamos nos certificando de que esta é uma pilha vertical. Não vamos dar muito pudim para ele. E vamos centralizar isso. Agora selecionamos o rodapé e dizemos que a variante é perfeita É exatamente assim que queremos que nossa versão móvel seja. Tudo estará conectado da mesma forma. É apenas o layout que mudamos apenas para combinar com nossos designs. O que é perfeito. Legal, vamos ajustar as páginas do projeto e também a página sobre 11. Designing para celular: páginas sobre e projetos: Então, já sabemos como criar um ponto de interrupção responsivo para dispositivos móveis , como fizemos com a página inicial Vamos fazer o mesmo com a página sobre e isso deve ser bem mais rápido. Vamos criar um ponto de interrupção para o telefone, em primeiro lugar, vamos selecionar a variante correta para a navegação e para o rodapé Vou trocar os telefones porque já sei o tamanho do telefone que eles têm. Para este também, precisamos abordar as seções intermediárias aqui. E deve ser bem simples porque, novamente, estamos usando o stack e tudo já está configurado para ser responsivo de certa forma A primeira coisa que vamos fazer é abordar o cabeçalho. Temos uma pilha horizontal aqui que mudará para vertical, e isso já está resolvendo isso Vamos mudar o preenchimento da mesma forma que fizemos com a página inicial, que já está melhor . Vamos mudar o tamanho do telefone para, digamos, 64. Para dizer, Phil, vou mudar esse texto aqui para preencher o espaço Legal, acho que isso já está resolvendo muita coisa para essa imagem aqui. Está um pouco menor para que possa preencher o espaço. Vamos dizer, Phil, perfeito, já está resolvendo muita coisa. Nós temos o cabeçalho. Agora, vamos abordar essa experiência aqui. Novamente, deve ser bem simples. Antes de tudo, vamos, novamente, mudar o preenchimento, o que já sabemos fazer As pilhas horizontais aqui, vamos mudar para a vertical Então, temos algumas pilhas aqui para cada uma das funções. Essas são, novamente, pilhas horizontais que podemos alterar como verticais Elas têm uma grande lacuna entre Vamos mudar isso rapidamente para cada um, vou dizer dez. Em vez de ter um espaço entre eles, vou dizer começar e vou dar um espaço de 50. Perfeito, podemos fazer o mesmo com isso. Entre em contato, temos essa descrição aqui que está posicionada como uma pilha horizontal que mudará na vertical O espaço entre, vamos mudar o início e dar 50 como o mostrado acima. Temos as molduras aqui e os detalhes de contato que são pilha horizontal que mudará a vertical Vamos dizer que esse quadro é preenchido em vez de fixo. Só para ter certeza de que cabe em nosso espaço, vamos garantir que todos tenham um bom espaçamento entre Perfeito, é isso mesmo. Essa é a nossa página sobre, pronta para começar. E a última coisa que precisamos mudar são as páginas do projeto. Novamente, lembre-se de que você só precisa fazer isso em uma das páginas. Ele se adaptará aos outros. Vamos fazer isso rapidamente. Você deve ser bem rápido com isso. Agora fizemos isso duas vezes. Mas, novamente, se você não está entendendo o processo ou se eu estou indo rápido demais para o seu gosto, me avise e podemos fazer um tutorial mais baixo sobre como lidar com as diferentes opções de largura e altura, o que cada uma delas significa, como trabalhar com layouts ou layouts de pilha ou grade ou automáticos Se você está perdido com esses termos, me avise e eu me certificarei de explicá-los bem mais abaixo. Nós sabemos como é. Uma pequena mudança aqui com essa imagem aqui porque eu queria ser um pouco mais alto Eu vou dar uma taxa fixa. Vou desbloquear isso e garantir que esteja definido como preenchido. Vai ocupar um pouco mais de espaço, não é tão pequeno do que nesta seção aqui, é a mesma coisa. Você percebeu que não é tão difícil depois de fazer isso. Depois de saber o que você procura. Basicamente, você pode mudar a direção do estoque de horizontal para vertical. Você muda o texto. Em vez de corrigido, você o altera para Feel. E o mesmo com os títulos. Certifique-se de que tenha uma boa aparência. Altere o preenchimento para que ocupe um pouco mais de espaço para as imagens Talvez você precise ser um pouco travesso e dar a ela uma altura ou largura fixas, e está tudo bem. É o seu site, você precisa se sentir confortável com ele. Apenas certifique-se de que tudo esteja enchendo o recipiente em que está. Depois de fazer isso uma vez, você sabe exatamente como alterá-lo, porque eu conheço essa coisa responsiva Não é fácil para todos. Vou deixar algumas diretrizes que você pode usar. A primeira coisa é garantir que o texto esteja definido como preenchido. Então, está enchendo o recipiente em que está. Em seguida, para cada contêiner ou para cada pilha que você tem, verifique se o preenchimento está configurado Não está ocupando muito espaço da esquerda e da direita, de cima para baixo. Além disso, certifique-se de que a pilha que você tem esteja configurada como vertical em vez de horizontal Dessa forma, em vez de ocupar a largura da página, está se escondendo mais e temos mais espaço para ler tudo corretamente. Lá vamos nós. Agora, temos todas as nossas páginas projetadas para desktop e celular. Antes de prosseguir, vamos fazer uma rápida recapitulação do que fizemos Em primeiro lugar, verificamos nosso design Figma. Vimos como tudo está organizado e como tudo tem nome. Instalamos o plugue para trazer nossos designs da Figma para o moldador E nós, na verdade, o executamos. Copiamos basicamente a versão desktop para o Framer, da nossa página inicial e da página Também criamos a navegação e o rodapé como componentes para que possamos reutilizá-los em todas as nossas páginas Criamos uma lista de coleta com todos os nossos projetos, trazendo dados do nosso CMS. Também criamos páginas de projetos individuais para cada um dos nossos projetos. Conectamos tudo vinculando cada projeto à página de cada projeto A navegação para cada página específica e o rodapé para as diferentes plataformas de mídia social E, finalmente, criamos uma versão responsiva. Portanto, nossos designs ficam bem em dispositivos móveis. Antes de continuarmos, certifique-se de que tudo esteja bem para você no desktop. No celular, tudo está conectado. O CMS está funcionando. Se em algum momento você ficou preso, me avise abaixo para que eu possa ajudá-lo e ajudá-lo. Porque a próxima coisa que faremos é adicionar animações e transições Então, você quer ter certeza de que seus designs têm uma boa aparência antes de passar para isso. 12. Adicionando movimento: transições animadas: A única coisa que resta a fazer agora é adicionar uma camada extra de delicadeza ao nosso lado Para fazer isso, vamos adicionar algum movimento hoje em dia. Ter um site estático é muito estranho e todos incluem algum nível de movimento ou animação E é isso que vamos fazer agora. Agora, fazer animação no framer é extremamente fácil porque há muitas predefinições que você pode usar como quiser Eles estão todos na seção de efeitos aqui no painel do lado direito. E podemos adicionar animação em um par ao passar o mouse sobre as diferentes interações que fazemos Podemos definir a velocidade. Podemos definir transições. Podemos definir qual elemento queremos modificar, como tamanho, opacidade, cor, qualquer coisa que quisermos Nesta lição, abordaremos três tipos diferentes de animações sobre interação que você pode replicar com muita facilidade Embora estejamos apenas fazendo isso agora, sugiro que você experimente e enlouqueça. Porque é muito legal ver o que um moldador pode fazer nessa área Os três tipos de animação que vamos fazer são aparecer como um elemento, aparecem na página, na rolagem, à medida que percorremos esta página e quando passamos o mouse sobre esse elemento específico Vamos começar com o cabeçalho, animação. Quando entramos na primeira linha da página, quando esse elemento aparece na página, é isso que vamos criar. Quando a página é carregada, esse elemento aparece. Com uma transição desvanecida, a única coisa que precisamos fazer é selecionar os elementos, certificando-se de que todo o cabeçalho esteja selecionado Vamos acessar os efeitos, selecionar um par, vamos usar uma dessas predefinições Por padrão, está usando a predefinição de desvanecimento, qual eu já gosto porque é muito sutil e não é como um grande movimento Também podemos definir como essa animação entra. Por padrão, é como uma transição de primavera. Vai de 0 a 100, essa seria a animação. Não é escalonamento, a escala é definida como uma. Não está girando, então está definido como zero. E não há nenhuma compensação. Também podemos optar pela transição da primavera em vez da primavera, vou dizer que é muito sutil, e a primavera pode ser demais também porque eu já brinquei com isso e sei que é disso que gosto. Mas, novamente, brinque com ele e experimente a tempo. Vou dizer que não, 0,5 vou adicionar um pouco de atraso, não muito, só para que tenhamos tempo de ver a animação. Bom, acho que estou feliz com isso. Vou experimentar e clicar em Preview. E lá vamos nós. Essa é a nossa animação. É muito sutil. Não precisa ser tão forte. Sim, estou feliz com isso. Perfeito. A segunda animação será uma animação de rolagem À medida que rolamos, esses elementos aparecem um por um. Como estamos usando uma lista de coleções e um componente, precisamos apenas criá-la. Mais uma vez, vamos nos certificar de que estamos selecionando o link do projeto. Vamos fazer, vamos dizer animação de rolagem. Agora queremos que o gatilho seja quando essa camada estiver sendo exibida enquanto rolamos e essa camada começa a aparecer Essa animação não começa antes, caso contrário, perderíamos Vamos começar no centro dessa camada. Não vamos adicionar um replay. Isso significa que, quando rolamos, esse elemento aparece, esse elemento permanece lá em vez de entrar e sair enquanto rolamos pela página. Mas, novamente, sugiro que você experimente essas animações e depois brinque com elas, veja como é e veja o que parece certo para você Porque talvez você seja fã de um efeito de repetição, vou dizer que não Em vez de usar fade in, vou dizer slide in bottom Você pode definir a entrada novamente. Vou mudar novamente para facilitar o deslocamento, o que significa o quanto está se movendo Está se movendo no eixo y, 150 pixels. E talvez seja um pouco demais, mas tudo bem, vamos ver como isso funciona. Temos aquela animação inicial, temos essa deslizando para dentro Eu acho que parece bom. E veja que, à medida que rolamos para cima, não está se repetindo novamente. Vou ajustar isso um pouco mais. Vou mudar para 25. Eu sou. Sim, deixe assim. Viu como se sente? Ótimo. Eu acho que isso parece muito bom. Perfeito. Agora, para o terceiro tipo de animação, vamos fazer algo que parece muito sofisticado, mas é muito fácil de replicar Vamos fazer esse efeito de foco. Quando você passa o mouse sobre esse elemento, ele mostra um tipo diferente de informação Agora, para criar isso, precisamos entrar no componente de vazamentos do projeto Precisamos criar um componente a partir desse. Caso contrário, como está em uma pilha, podemos movê-lo livremente Apenas tenha paciência comigo. Vamos criar um componente a partir disso. Eu vou dizer que o tipo de projeto está bom. Vamos duplicar esse e movê-lo para fora do quadro Ele precisa ficar do lado de fora. Se essa for a moldura, ela precisa ser posicionada do lado de fora para que não a vejamos Eu vou dizer cliente e vamos configurar como uma variável do cliente. Legal. Agora vamos definir um estado de flutuação O que significa que quando passamos o mouse sobre esse elemento, isso acontece Vamos criá-lo. Pode ser que em vez de se mover ou fazer alguma coisa, isso mude de cor. Se for esse o caso, vou mudar a cor no estado de foco Vamos pré-visualizar ao passar o mouse. Ele muda de cor. Está bem? Não é isso que queremos. Mas podemos ver que podemos definir um estado de flutuação. Vamos voltar à cor original. O que queremos é que este se mova para onde este está. Vou me certificar de que isso esteja centralizado e que este fique logo acima. Vamos pré-visualizar. Perfeito. Ambos estão se mudando, mas tudo bem, não quero ver o cliente no primeiro estado e não quero ver o tipo de projeto no segundo estado. Precisamos definir o estouro como oculto. E vamos pré-visualizar Agora é isso, esse é o nosso efeito. Eu nem estou tocando na transição porque ela está usando a mola E eu acho que isso funciona. Eu gosto, vou deixar como está. Mas saiba que você também pode alterar a predefinição ou o efeito de transição aqui Vamos voltar ao nosso componente principal e visualizá-lo. Eu adoro isso. Eu realmente gosto da aparência. Vamos nos certificar de que estamos nos conectando à variável correta. Vamos criar uma variável aqui, como fizemos várias vezes. Vamos voltar à nossa página inicial. Aqui, em cliente, vamos definir essa variável. Nós podemos ver isso agora. Mas quando visualizamos isso, temos nossas boas transições. E nós pairamos Temos nosso cliente aqui. Acho que parece perfeito. Isso é exatamente o que queríamos. Esses são apenas três tipos de animação ou transições que você pode adicionar ao enquadrador Acabamos de fazer isso na página inicial agora. Sinta-se à vontade para adicionar animação na página do projeto, na página sobre. Enlouqueça com isso. Experimente transições e animações engraçadas. Mas eu lhe daria um conselho. Uma coisa que eu notei toda vez que criei algo é que menos é mais. E se exagerarmos, as animações meio que ocupam espaço e as pessoas não percebem o conteúdo ou até se sentem Então, sim, um pouco de movimento ajuda muito. Acho que estamos nesse ponto em que estamos prontos para publicar nosso site. Temos todo o nosso conteúdo, temos algumas boas transições. Temos o ponto de interrupção do telefone pronto para funcionar. Então, sim, acho que está na hora. E é exatamente isso que faremos na próxima lição. 13. Publicando nosso site: Então, vamos publicar nosso site. E por razões óbvias, este será o vídeo mais curto Porque publicar um site no Framer é muito fácil. Literalmente, só precisamos ir aqui e clicar em Publicar. Sim, pronto, seu site agora está ativo. Legal. Ok, tchau agora. Vamos esperar um segundo. Estou começando, tenho certeza que você não quer apresentar seu trabalho profissional e enviar seu portfólio para clientes como uma pequena casa 9036 para um fazendeiro Como se você pudesse fazer isso, mas essa não é a maneira mais profissional. Em primeiro lugar , porque não é tão reconhecível e ninguém saberá que esse é o seu portfólio Segundo, porque talvez você não precise eles saibam que você criou isso com Framer e não quer mostrar que é um aplicativo Framer, Mas eu sugiro que você adicione um domínio personalizado. Agora, para conectar um domínio personalizado que você possui e ocultar esse lado do criador, você precisa fazer um upgrade, o que significa pagar uma taxa mensal ao Framer e adicionar Mas se você não quiser fazer isso agora quando ainda não está pronto para pagar, você pode obter um subdomínio gratuito do Framer Então, para mim, seria meu nome, site Framer dot, por Ou podemos adicionar Framer. Vou deixar assim e salvar que será seu novo domínio personalizado. Quando estiver pronto para adicionar o seu próprio site sem esse criador de formulários, você pode remover o domínio e adicionar o seu próprio. É simples assim. É muito rápido de mudar. Vou deixar assim só para mostrar como funciona. Mas já que estamos aqui, vamos examinar algumas das configurações para melhorar seu site. Agora, se você se lembra do primeiro vídeo desta aula, passei rapidamente por todas essas configurações, mas agora que nosso site está pronto, podemos ir um pouco mais devagar e adicionar todas as coisas para melhorar nosso SEO e site em geral. A primeira coisa é que vou adicionar o título do site. O idioma é inglês e saiba que você pode adicionar vários idiomas. Agora isso é muito útil. Vou adicionar minha descrição se você quiser. Você também pode adicionar um fabcon, que é o pequeno logotipo exibido aqui no navegador Você pode adicionar uma imagem social Toda vez que você compartilhar seu link, seu site, em uma plataforma de mídia social, essa imagem aparecerá. Eu não estou tão incomodado agora, e isso é algo que eu posso fazer Vou deixar as coisas assim. Mas fique à vontade para adicionar o que quiser nessa imagem. Apenas certifique-se de que seja algo relevante para o seu site e que seja rapidamente reconhecido como algo que você criou Algumas outras configurações que você pode adicionar ao atualizar. Você também pode ter uma proteção por senha apenas para adicionar esse nível de segurança ao seu site, mesmo sem fazer o upload Você pode adicionar seu ID do Google Analytics aqui para se conectar ao site do Google Analytic, que é muito útil, embora o Framer tenha sua própria guia de análise Depois de publicar seu site e começar a compartilhá-lo, você poderá ver alguns dados sobre os visitantes na visualização paga e quais são as principais fontes de onde as pessoas vêm e as principais páginas visitadas em seu site. Finalmente, algo que mencionei é que você pode selecionar qual versão está ativa. Nesse ponto, o teste está desativado, o que significa que a versão mais recente que você criou será aquela que vai para todos os domínios Se você ativar o teste, poderá selecionar qual das versões que você criou vai para a versão ao vivo Como fizemos isso apenas hoje, há apenas uma versão, mas se você adicionar alterações e adicionar conteúdo, poderá selecionar qual versão está ativa e qual é a versão em que você está trabalhando. Finalmente, e você viu que não é necessário, você pode atualizar para uma versão paga do Framer Você pode adicionar mais coisas. Você pode ter páginas ilimitadas. Muitos outros recursos. No entanto, criamos este site totalmente de graça e você poderá publicá-lo em um URL ativo totalmente gratuito. Como conselho, você pode criar seu site em uma versão gratuita. E quando estiver pronto para publicar em um domínio personalizado e adicionar mais recursos a ele, você pode começar a pagar. Mas, novamente, isso é apenas um conselho, você faz o que quiser. Você está agora, você tem um portfólio agora? E é hora de compartilhar isso. Se você conectou seu domínio personalizado ou está apenas usando o do framer , tudo bem. Ou se você usou seu próprio design ou o que eu forneci. Certifique-se de enviar seu portfólio compartilhando o link na guia do projeto para que todos possam vê-lo Se você tiver alguma dúvida sobre alguma das aulas que fizemos até agora, me avise na parada de discussão e eu responderei Você também lembra que haverá algumas aulas extras. O primeiro sobre como criar uma barra de navegação responsiva com um bom menu de hambúrguer Mas isso é totalmente opcional e você não precisa dele para publicar seu site. Não se estresse por enquanto, certifique-se de enviar seu portfólio porque mal posso esperar para ver o que você criou com o Framer 14. Conclusão: Parabéns por ter terminado esta aula. Antes de sair, certifique-se de compartilhar o site da sua vida adicionando o URL na guia do projeto. E lembre-se de que esse não é o fim da estrada. Um mundo cheio de possibilidades se abriu agora que você sabe como usar o Framer E só para começar, aqui estão algumas coisas que você pode melhorar no site que acabou Em primeiro lugar, você pode adicionar outro ponto de interrupção para um tablet ou outro dispositivo, como fizemos com o telefone Em seguida, você pode adicionar mais campos ao CMS para gerenciar parágrafos de texto, imagens, vídeos ou links E então você pode enlouquecer adicionando animações e transições na página sobre e na página do projeto, como fizemos na página inicial Agora, essas são apenas sugestões secundárias, mas fique à vontade para explorar o resto dos recursos que o Famer Se você quiser algo um pouco mais desafiador, lembre-se de que algumas aulas extras serão adicionadas a esta aula. O primeiro sobre como criar uma navegação responsiva com o menu de hambúrguer Fique ligado. Mas, por enquanto, tudo o que tenho a dizer é parabéns novamente e muito obrigado por assistir a esta aula.