NOVO Figma 2024: Como começar – da classe de iniciante à profissional

1. 00 Introdução para iniciante+exercício: Hoje, vou guiá-lo pelo mundo da Figma. Vamos aprender como dar vida às nossas ideias com os incríveis recursos do Figma Aprenderemos tudo sobre configuração e criação de designs básicos, trabalhando com componentes para criar elementos de design reutilizáveis Configuração de estilos e variáveis para consistência e hierarquia em cores, tipografia e espaçamento, design responsivo com layout automático para se adaptar a diferentes tamanhos de tela, prototipagem básica para dar vida ao seu design e como compartilhar e colaborar com outros designers e, o mais importante, com desenvolvedores para mais importante Começaremos do zero configurando nossa conta Figma e nos familiarizando com a estrutura de incêndio Ótimo. Em seguida, mergulharemos nos fundamentos, como configurar quadros e agrupá-los, adicionar formas, texto, cores e grades, criando um design de interface de usuário sólido Quando você estiver familiarizado com o básico, garantiremos que seus designs não sejam apenas imagens bonitas, mas também sejam altamente funcionais e escaláveis Mostrarei como criar elementos de design reutilizáveis com componentes e variantes, que são essenciais para o design moderno da interface Criaremos variáveis e estilos para definir e reutilizar cores, tipografia e espaçamento, garantindo a consistência em todos os projetos e permitindo mudanças rápidas Compreender esses recursos e documentá-los de forma eficaz é crucial para comunicação perfeita com Em seguida, faremos com que nossos designs sejam responsivos às mudanças no conteúdo e nos tamanhos da tela, usando layout automático e restrições Você verá que, com a abordagem correta, é muito mais fácil do que você imagina. Agora, vamos dar vida aos nossos designs e adicionar alguns protótipos básicos à mistura Para finalizar, mostrarei como compartilhar seu design com outros designers usando bibliotecas de equipe compartilhadas. E provavelmente um dos assuntos mais importantes, mas muitas vezes negligenciados Falaremos sobre como documentar e compartilhar seus projetos para facilitar a comunicação e a colaboração com o desenvolvimento. Ao longo do curso, abordarei questões comuns, como escolher o tamanho certo de tela, quando usar variáveis versus estilos e compartilhar atalhos, dicas e truques valiosos e pequenas joias escondidas Fornecerei um arquivo de exercícios Figma, permitindo que você acompanhe o pequeno vídeo passo a passo ao meu lado Depois de dominarmos o essencial, vamos aplicá-lo a um projeto real, criando um design de podcast totalmente responsivo baseado em componentes pronto para ser usado em Eu o mantenho curto e focado, para que, em pouco tempo, você possa descobrir tudo sobre o Figma de que precisa para realizar qualquer projeto Esta aula é ideal para você, se você é totalmente iniciante ou migrando de qualquer outro software de design Este é o curso do Moon learning dot AO. 2. 02 O que é Figma? Quem faz a programação?: Então, o que é Figma? Resumindo, o Figma é um software de design de interface de usuário, também conhecido como software de design de interface do usuário No Figma, você pode criar estruturas de arame interativas, configurar designs avançados de interface de usuário e criar protótipos impressionantes O melhor é que o Figma funciona tanto para Mac quanto para PC. Você pode usá-lo em seu navegador da web ou conectar o aplicativo para desktop. Figma fornece todas as ferramentas que você precisa para projetar para web ou aplicativos, como trabalhar com componentes, configurar estilos e variáveis, ferramentas para design responsivo informações automatizadas para desenvolvedores É realmente a combinação de suas incríveis características que torna FIMAS tão especial e a posiciona como líder do setor FIMA é baseado em nuvem, tornando-o a escolha ideal para colaborar com outros designers ou compartilhar seus projetos com Você pode criar com outras pessoas em tempo real, permitindo que você e sua equipe trabalhem no mesmo projeto simultaneamente para permanecerem perfeitamente alinhados Okay MA é incrivelmente fácil de usar e tem uma curva de aprendizado suave para iniciantes, mas também pode ser levado a níveis muito avançados para alinhamento com código e criação de sistemas de design complexos Agora, uma pergunta comum que ouço é se eu criei um site no Figma, como ele se torna um site real Figma faz isso? O Figma faz a codificação Bem, desculpe, mas não. O Figma fornece excelentes ferramentas para facilitar a colaboração entre design e desenvolvimento, como o modo def, onde você pode ver trechos de CSS, informações de código, inspecionar componentes Mas não existe um botão de publicação. Portanto, você precisa de um desenvolvedor qualificado para isso. Como alternativa, para sites simples, você pode usar ferramentas como Webflow ou Framer, usando o Figma como base para planejar e configurar seu 3. 01 Figma no navegador vs: Você pode trabalhar com o Figma de duas maneiras. Você pode trabalhar diretamente no navegador, que é o que você está vendo aqui, ou pode baixar o aplicativo. Para baixar o aplicativo, acesse figma.com forward slash Em seguida, você pode escolher entre a versão MC e a versão para Windows. É muito importante observar que, embora você trabalhe no aplicativo de desktop, o Figma permanece baseado na nuvem Isso significa que todos os seus arquivos serão armazenados na nuvem e não localmente no seu computador. E, portanto, você sempre precisa de acesso à Internet para trabalhar com seus arquivos Figma Você pode exportar e armazenar um arquivo Figma localmente, mas isso é algo que você realmente só deve fazer em caso de emergência, como se precisasse concluir um projeto e soubesse que não terá acesso à Internet Isso pode causar obstáculos à colaboração com sua equipe Portanto, é sempre melhor deixar tudo na nuvem como deveria ser. Além do aplicativo para desktop, você pode se interessar pelo espelho Figma para visualizar seus designs em seu celular ou tablet E caso você não consiga usar o aplicativo para desktop, use apenas a versão do navegador. Eu recomendo fortemente baixar o instalador de fontes. Isso lhe dará acesso a todas as fontes locais. No entanto, isso não será necessário ao usar o aplicativo. 4. 02 O navegador de arquivos Figma: a casa do Figma: O navegador de arquivos Figma, ou em outras palavras, a página inicial do Figma Ao abrir o Figma pela primeira vez, você verá algo semelhante a isso Ele pode estar vazio ou talvez você já tenha alguns arquivos. Esse é o lugar onde você mantém seus arquivos e suas equipes organizados. Antes de criarmos nosso primeiro arquivo, vamos nos certificar de que entendemos a estrutura do arquivo Figma, que é um pouco estranha no começo. Mas apenas brinque comigo. Primeiro, temos equipes. Eles podem ser para seu próprio trabalho ou para colaboração. Dentro das equipes , temos projetos, que você pode usar para agrupar arquivos em diferentes projetos dentro de uma equipe. No plano gratuito, você atualmente recebe um projeto gratuito. Dentro de um projeto, agora você pode ter vários arquivos, como arquivos JEM ou arquivos de design Esses arquivos são onde você faria o trabalho real. Você pode estruturá-los ainda mais em páginas. Vamos voltar à realidade. Aqui, você pode ver a equipe. Você pode fazer parte de apenas uma equipe ou pode abrir o menu suspenso e alternar entre diferentes equipes as quais você pode ser convidado. Você também pode criar suas próprias equipes, basta clicar no botão de adição e nomear sua equipe. Depois, você pode escolher se deseja convidar outras pessoas. Podemos pular isso por enquanto. Você sempre pode convidar mais tarde. Escolha um plano de equipe. Você sempre pode optar pelo iniciante e, posteriormente, upgrade, se precisar de recursos adicionais Em seguida, você verá a equipe que você criou na parte superior. Para excluir a equipe, basta usar um pequeno menu suspenso e escolher uma exclusão. Vamos entender um pouco melhor a estrutura da equipe. Então, dentro da nossa equipe, encontramos os projetos. A palavra projeto é um pouco confusa. Vem dos velhos tempos da Figma. Hoje em dia, um projeto pode realmente ser usado para absolutamente qualquer coisa. Basta vê-lo como outra subpasta e outra camada de organização Você pode armazenar os arquivos que quiser lá e pode nomeá-los como quiser. Se clicarmos em nossos projetos , dentro deles você encontrará seus arquivos. Clique em qualquer arquivo para abri-lo e ele abrirá uma nova guia. Você pode abrir quantas abas quiser. Dentro do seu arquivo, no lado esquerdo, você pode ver páginas diferentes que estruturarão ainda mais seu arquivo. Se você quiser voltar ao seu navegador de arquivos, clique em um pequeno ícone inicial no canto superior esquerdo. Você pode ver que seu arquivo permanece aberto e, a propósito, tudo é salvo automaticamente no Figma Uma pequena dica, um recurso muito útil, é que você pode marcar projetos e arquivos como favoritos Aqui, por exemplo, se eu tirar isso, você pode ver aqui, eu tenho meus arquivos iniciais. Na verdade, gosto muito de marcar todos os projetos relevantes e, em seguida, tenho uma visão geral melhor aqui. O mesmo funciona se você clicar aqui, agora podemos começar isso e, em aqui, agora podemos começar isso e, seguida, você também pode ter arquivos importantes para acesso rápido. A propósito, isso só é visível para você. Também é muito útil porque, dessa forma, por exemplo, se você quiser mover qualquer arquivo entre projetos, basta fazer isso por meio do navegador aqui Você também pode convidar outras pessoas para sua equipe, voltar para a visão geral e clicar no botão Compartilhar. Aqui você pode convidar por link ou e-mail. Muito importante, certifique-se de escolher se você está convidando apenas para ver ou editar Se você escolher editar, certifique-se de verificar o plano de preços Figma que você tem, pois isso pode acarretar um custo adicional por Você sempre pode alterar o tipo de direitos e também revertê-los clicando na pequena seta aqui e acessando a visualização Administrativa, onde você pode encontrar todas as configurações Uma última pequena área de interesse pode ser a comunidade. Às vezes, você vê um pequeno globo aqui em cima ou pode encontrar o globo para explorar a comunidade aqui embaixo. Ele se move um pouco. Se você clicar lá, você entra na comunidade Figma, e este é um ótimo lugar onde você pode encontrar muitos recursos gratuitos, arquivos diferentes, plug-ins Sinta-se à vontade para entrar lá e dar uma olhada no que outras pessoas já criaram para você 5. 03 criando arquivos de design: Vamos criar um novo arquivo de design no Figma. Você deve ter notado que, no Figma, você precisa escolher entre criar um figo Jamboard, um arquivo de design ou um conjunto de slides Vamos trabalhar somente com arquivos de design. Eles estão aqui para configurar seus designs. jamboards FIC são mais para brainstorming, colaboração e O conjunto de slides, como o nome diz, é para apresentação. No entanto, você também pode configurar sua apresentação somente com arquivos de design. Mas não se preocupe. Vamos abordar isso durante este curso. Vamos criar um novo arquivo. Você pode criar um novo projeto e depois ter arquivos nesse projeto, ou você pode usar um projeto existente para clicar duas vezes nele para abrir, e agora você encontrará na parte superior para criar um novo botão. Vamos escolher um novo arquivo de design. Isso criou um novo arquivo e o está abrindo imediatamente em uma nova guia. Você sempre pode voltar aqui para o seu painel e ver aqui nosso novo arquivo sem título Se quisermos renomeá-lo, podemos fazer isso diretamente no arquivo clicando duas vezes no nome Você também pode movê-lo daqui. Basta usar esse pequeno erro e clicar em Mover e movê-lo para qualquer outro projeto. Também podemos fazer o mesmo em nosso projeto. Aqui temos nosso arquivo. Em seguida, podemos clicar com o botão direito e, em seguida, você pode renomeá-lo e também mover o arquivo Ou você pode simplesmente arrastá-lo. Lembre-se, eu gosto de estrelar meus projetos. Ao marcá-los com uma estrela aqui, eles aparecem na barra lateral, o que facilita muito a movimentação dos arquivos Normalmente, os arquivos no Figma são sempre compartilhados no navegador de arquivos No entanto, se você receber um arquivo para download, ou seja , um arquivo que termine com um ponto , para vê-lo no navegador de arquivos, use o botão de importação. Não vai funcionar simplesmente clicando duas vezes nele. 6. 01 Como adicionar quadros ao nosso arquivo: Vamos começar com uma base de tudo no Figma. Quadros. Verifique se você está em um arquivo de design. Essa área cinza que você vê aqui no centro é chamada de tela. Pense nisso como a superfície de uma mesa em que você está trabalhando. Além disso, você adicionará seus designs como folhas de papel. Na Figma, essas folhas são chamadas de molduras. Você pode adicionar imagens, textos e formas a esses quadros para configurar seus designs. Para criar uma moldura, basta clicar no símbolo da moldura na barra de ferramentas, ou você também pode usar o atalho F. Agora abrimos o menu de moldura predefinido Figma no lado Como você pode ver, o Figma configurou tamanhos de tela mais comuns para você Se eu clicar em um deles, ele adicionará a moldura desse tamanho ao meu Canvas. Caso não esteja procurando um tamanho de tela específico, você também pode desenhar uma moldura. Então, vamos pressionar F novamente e, em seguida, podemos simplesmente arrastar uma moldura aberta em nossa tela. Agora, o melhor é que, se eu selecionar esse quadro e voltar para o menu suspenso do quadro, também posso transformá-lo em qualquer uma dessas predefinições Você pode usar um atalho para deslocar e centralizar qualquer coisa no seu Cvas. Duas coisas aconteceram. Figma adicionou essas molduras à nossa tela, e também podemos ver as molduras em nosso painel de camadas do lado esquerdo O painel de camadas é basicamente um espelho de tudo o que acontece nas cavas Você pode renomear seus quadros. Você pode clicar diretamente no nome do quadro e simplesmente digitar o que deseja, ou também pode clicar no nome no painel de camadas. Sempre usamos molduras e nunca formas para representar nossas telas no Figma Ao contrário das pranchetas tradicionais, você pode agrupar molduras dentro de molduras no Figma, que permitirá criar layouts mais complexos posteriormente 7. 02 Alguns atalhos úteis: Alguns atalhos úteis. Em geral, você encontrará uma visão geral de todos os atalhos se pular para o menu de ações e pesquisar atalhos de teclado Você verá alguns marcados em azul, que são os que você já usou, e os em branco, são os que você ainda não usou. Eu quero te mostrar os mais importantes por enquanto. Para ocultar e mostrar o UR, você pode pressionar o comando e a barra invertida Se você pressionar a tecla shift e a barra invertida , isso só vai se esconder no lado esquerdo Assim que você selecionar qualquer coisa em seu Canvas, você ainda verá todas as propriedades no lado direito, muito útil se precisar de um pouco mais de espaço Você pode ampliar e reduzir pressionando o comando n mais ou o comando menos Se você pressionar Shift e zero, obterá 100% de visualização. Se você pressionar shift e one, terá uma visão geral de tudo o que está no seu Canvas. Se você selecionar um elemento específico e pressionar Shift e dois , ele ampliará apenas esse elemento. Se você pressionar enter , ele selecionará os filhos diretos desse elemento. Ao pressionar a barra de espaço, você pode se mover pela tela. 8. 03 Visão geral do arquivo de design: Vamos ter uma visão geral rápida do nosso arquivo de design antes de nos aprofundarmos. Por padrão, você terá sua guia de arquivo aberta mostrando suas camadas. Também existem outras torneiras, então temos arquivos, ativos, design e prototipagem Mas vamos ficar nos arquivos por enquanto e conhecer isso. Você pode ver aqui em cima que você também tem algo chamado páginas e, se clicar em um pequeno botão de adição, poderá adicionar uma página adicional. E isso é basicamente um novo Cvas totalmente vazio. As páginas podem servir a propósitos diferentes, e falaremos mais sobre elas mais tarde. Geralmente, você pode adicionar quantas páginas quiser em um plano pago, mas em um plano gratuito, você pode estar limitado a apenas três. Se você quiser nomear uma página, basta clicar duas vezes e alterar o nome e, ao clicar com o botão direito, excluir uma página. Esse é o nosso painel esquerdo. Então, no lado direito, aqui, temos o painel de propriedades. É muito importante que, se você clicar na área de fundo cinza da tela , tenha uma visão geral do que está acontecendo no seu arquivo. Posteriormente, você verá todos os estilos, variáveis e , portanto, todas as configurações gerais. Se você selecionar um quadro ou um elemento específico, como um texto ou uma forma , obterá as informações sobre esse elemento que você selecionou atualmente. Aqui em cima, você pode ver quem está no seu arquivo. Você pode obter o modo atual, em uma área diferente, ou também pode ter uma visualização prévia no arquivo, e também encontra o botão de compartilhamento aqui. Tudo isso, vamos conhecer com mais detalhes posteriormente. Na parte inferior, você atualmente tem sua barra de ferramentas e observe que essas coisas podem estar se movendo. Costumava estar aqui no topo antes. Você encontra todas as suas ferramentas principais aqui, como molduras, todas as formas, texto e assim por diante. Observe que, se você passar o mouse sobre eles, obterá o atalho Vale a pena anotar isso porque realmente acelerará seu fluxo de trabalho, conhecendo-os. Você também encontra o menu de ações aqui. No menu de ações, você pode pesquisar literalmente por qualquer coisa relacionada ao seu arquivo, e você também encontra suas ferramentas de I aqui. Há uma seção para plug-in e Wichets. Novamente, saberemos mais sobre plug-ins em um minuto. Aqui, você encontra a opção para o modo surdo. Temos o modo de design, no qual estamos atualmente, e podemos alternar isso se você estiver em um plano pago para o modo surdo, e essa é a área destinada à sua equipe de desenvolvimento Se eles selecionarem qualquer elemento , ele obterá as informações relevantes para o código. Alguns desses recursos podem estar por trás de um paywall. Isso está mudando constantemente, portanto, consulte a página de preços da FICMA para ver o que está disponível atualmente 9. 04 Como adicionar formas e cores: Vamos adicionar um pouco de conteúdo aos nossos quadros. Então aqui eu tenho uma moldura, que eu chamei de moldura. Agora vamos adicionar algumas formas. Vou usar a ferramenta de forma e posso escolher entre retângulo, linhas, erro, elipse e polígono, bem como estrela Agora, observe como por trás de cada uma dessas formas, você verá o atalho Eu vou escolher um retângulo. E se eu simplesmente o desenhasse , ele não manteria a forma. Então, se eu quiser um quadrado perfeito, o que posso fazer é pressionar a tecla Shift e depois desenhar. Posso selecioná-lo e, em seguida, posicioná-lo e observar como a Figma fornecerá linhas de ajuda Agora vamos desenhar um círculo. Então, se eu der uma olhada no meu menu, vejo que o atalho é. Então, vamos pressionar O. E novamente, eu mantenho a tecla Shift pressionada para obter um círculo perfeito, e vou adicionar um círculo. Vamos adicionar outra forma. Eu vou escolher um polígono. Esse, eu simplesmente vou desenhar assim. Agora eu percebo que há um pouco mais de espaço. No lado direito, você pode ver que agora tem uma contagem de três. Você pode mover este para cima e depois criar outros polígonos Vou deixá-lo em um triângulo por enquanto. Vamos adicionar um pouco de cor a isso. Vou começar com meu círculo aqui. Verifique se você tem a forma que deseja selecionar. E então, no lado direito, no painel de propriedades, você pode alterar uma cor por meio do preenchimento. Você pode clicar na amostra de cores e simplesmente escolher qualquer cor, ou também pode adicionar uma camada Hx, que é o que vou fazer Agora vou selecionar meu triângulo. Desta vez, vou usar a roda de cores e simplesmente vou escolher um lindo vermelho alaranjado. Para este quadrado aqui, eu quero usar um azul. Brinque com o menu de arquivos para se familiarizar. Você pode usar a opacidade para simplesmente adicionar qualquer número. Você pode tornar o preenchimento visível e invisível e até adicionar mais arquivos No entanto, isso é algo que eu raramente uso. Se você clicar neste relógio, você pode ver que aqui, você também pode alterar o gradiente, e podemos transformar isso em um preenchimento de imagem, que é algo que vamos usar mais tarde Também podemos adicionar um traço. Agora eu poderia adicionar isso a esse único elemento, ou posso simplesmente selecionar todos os elementos. Basta manter o mouse pressionado e selecionar tudo. Agora posso clicar no botão de adição ao lado do traçado, e você verá que agora cada um deles tem um contorno Eu poderia mudar o traço para um traço mais grosso, algo como quatro Se você, por exemplo, quisesse uma linha pontilhada, você poderia fazer isso aqui clicando nos três pontos e mudando de sólido para da Assim como você fez com o preenchimento, você pode alterar a cor do traçado. 10. 05 elementos de manipulação: Vamos aprender sobre a manipulação de elementos na tela. Se você selecionar qualquer elemento, verá as propriedades no painel lateral direito. Observe como elementos diferentes fornecerão propriedades diferentes. Na primeira seção, geralmente encontre o posicionamento para que isso funcione, selecione mais de um elemento, basta manter pressionada a tecla do mouse e agora você pode alinhá-los. Você pode ver essas pequenas linhas azuis por padrão, elas sempre apontam para a esquerda e para o topo da moldura principal mais próxima, e você pode ver o posicionamento aqui, então você pode tornar isso muito específico apenas digitando um número específico Falaremos mais sobre o menu de restrições posteriormente, mas você pode ativá-lo e desativá-lo e, em seguida, alterar O que as restrições fazem é literalmente, fixar o que você selecionou em uma área na moldura principal Se eu mudar da esquerda para a direita e agora redimensionar, você pode ver que agora está preso à direita, e esses aqui ainda estão presos à esquerda Mas não se preocupe muito com isso por enquanto. Vamos selecionar todos eles e enviá-los novamente. Mais abaixo, você tem a ferramenta de transformação. Vamos selecionar nosso quadrado para ver isso melhor. E com isso, você pode girar seus elementos. Você pode fazer isso aqui mesmo no menu ou também pode se aproximar do elemento com o cursor e ver esse pequeno erro de alteração. Depois de ver isso, mantenha o mouse pressionado e agora você também pode girar para a direita na tela E aqui, você pode virar elementos, girá-los e assim por diante Agora, essa parte aqui embaixo, o layout, essa é a parte importante com suas dimensões. Se você tiver um elemento selecionado, vamos selecionar nosso círculo novamente, então você pode ver um pequeno clipe aqui. Atualmente, não está recortado. Se eu mudasse essa largura para 200, e você pode ver que ela mudaria apenas de um lado. Se eu quiser que os dois sejam alterados igualmente, certifique-se de selecionar o clipe, e agora você pode alterar qualquer coisa e ele será aplicado nos dois lados, muito útil. O melhor desses campos é que você não pode apenas digitar números, mas também pode usá-los para fazer alguns cálculos básicos, ou seja, qualquer coisa, desde mais menos divisão e multiplicação Como acontece com a maioria das coisas, tudo o que você pode fazer aqui no painel de propriedades também pode ser feito diretamente no Canvas. Conforme você se aproxima, você pode ver esse pequeno erro aqui em cima. Você precisa chegar perto de uma borda para que isso funcione. E agora, se você pressionar a tecla shift, poderá redimensioná-la mantendo as proporções no lugar certo Uma pequena dica escondida. Se você tiver um círculo e passar o mouse sobre ele, verá a ferramenta de arco aparecer Se você mantiver isso pressionado, poderá manipular esse círculo ainda mais ao seu gosto. Coisas muito legais. Também podemos adicionar o raio do canto, escolher um ou mais elementos e, na aparência, você encontra o raio do canto e pode adicioná-lo simultaneamente a todos os cantos, ou também pode abrir o menu de cantos individuais e, em seguida, aplicá-lo aos cantos de sua preferência 11. 06 Alinhar, organizar e medir: Vamos aprender como alinhar arrumar e medir entre seus objetos Então, já estamos familiarizados com o alinhamento. Mas outra opção que eu realmente gosto é que, se você selecionar mais opções, obterá o recurso de organização aqui Se você passar o mouse sobre isso, verá essas pequenas alças e também verá esses círculos Então, ele arrumou isso e criou a mesma distância entre todos os seus elementos Agora observe que estou usando meu retângulo, pois ele ainda é um polígono e está dentro de O que eu poderia fazer agora é selecionar todas elas e mudar essas alças, e mudar e isso será o mesmo para todas elas. Eu também poderia usar o painel de propriedades para manipular isso , pois agora ele me dará o espaço entre esses elementos como uma propriedade própria Você também pode selecionar qualquer uma dessas formas e trocá-la facilmente assim que estiver arrumada Agora, se selecionarmos todos eles , eles ainda não estão alinhados no centro No entanto, você pode selecionar todos eles juntos, movê-los e, em seguida, o Figma também mostrará algumas linhas orientadoras para obter o centro da Outra ferramenta útil que eu uso o tempo todo é que, se você selecionar uma forma e manter pressionada e passar o mouse sobre qualquer outra forma , ela mostrará a Isso funciona até a borda da moldura principal ou de qualquer objeto vizinho. É muito, muito útil Você ainda pode movê-lo enquanto tiver selecionado tudo e, em seguida, verá como a distância muda para esse objeto. 12. 07 Como adicionar e trabalhar com texto: Vamos adicionar um pouco de texto. Na barra de ferramentas, selecione a ferramenta de texto ou você pode simplesmente pressionar t. Há duas maneiras de adicionar texto Você pode simplesmente clicar em qualquer lugar, adicionar o texto e começar a digitar Você também pode desenhar uma caixa de texto. Vamos pressionar T novamente, e eu vou desenhar uma caixa de texto, e agora posso adicionar o texto aqui. Não importa qual abordagem você vai usar porque você sempre pode alterá-la por meio do menu de texto, que é o que vamos conhecer agora. Eu vou ficar com os dois. Este será o meu título, e eu vou manter este e apenas copiar em mais algum texto fictício, e podemos usá-lo como uma Posso abrir uma caixa de texto maior simplesmente mantendo pressionada a tecla do mouse e arrastando-a Em primeiro lugar, quero que os dois tenham o mesmo tipo de rosto. Eu seleciono os dois e, por meio do menu, vou selecionar um tipo de letra Você pode ver que todas as fontes do Google estão pré-instaladas se você estiver usando o aplicativo Figma Além disso, todos os telefones que você tiver localmente no seu computador aparecerão aqui. Vou usar uma fonte do Google chamada Poppins. Agora, antes de eu alterar o tamanho e a largura, você pode ver que isso está um pouco espalhado. Vamos arrumar isso. vou escolher o que será meu título e vou definir isso como largura automática Isso significa que a caixa de texto sempre se ajustará a qualquer coisa que eu adicionar aqui em largura. Meu texto de cópia, vou definir como largura fixa e altura automática. Isso significa que ele vai ocupar toda a altura e, o que quer que eu adicione, ele se ajustará a essa altura. O último aqui é altura e largura fixas. E para ser honesto, eu quase nunca uso isso. Vamos selecionar nossas formas, puxá-las para baixo e criar mais espaço. Então, agora eu quero mudar o peso. Posso fazer isso com o segundo menu suspenso, colocarei meu título em negrito e deixarei meu texto de texto normal Então, obviamente, eu quero que meu título seja maior, para que eu possa fazer isso com o tamanho do texto aqui Você pode digitar qualquer número ou também usar as teclas de seta no teclado para subir e descer. Novamente, se você pressionou a tecla Shift, você aumentará sua quantidade máxima Vou dar um grande olá aqui em cima. Agora, minha cópia de texto, vou ter essa caixa ainda maior, vou manter em 16, que é o tamanho padrão para copiar texto. A próxima aqui é a altura da linha. Essa é muito importante. A altura da linha é, podemos ver isso melhor em nosso título, esse pequeno espaço na parte superior e inferior do seu texto É como uma lacuna natural que estamos criando. Sempre deixe isso pelo menos em automático, o que corresponde a 1,5, ou você pode até subir e configurá-lo para 1,7. Posso calcular isso, então você poderia dizer que 16 é o tamanho do meu texto, e agora estou multiplicando isso por 1,75 e, portanto, isso me daria o valor em pixels Você também pode usar uma notação percentual, então eu tenho 175% Se tudo isso é novo para você, deixe-o no modo automático por enquanto, o que lhe dará uma altura de linha muito boa. Faça o que fizer, não o defina para o mesmo tamanho do seu texto ou até mesmo para um tamanho menor. Porque o que aconteceria é que você perderia a altura da linha, o que pode ser bom em um título de uma linha Mas em seu texto de cópia ou assim que algo for alterado, como a caixa de texto muda, conforme a janela do navegador muda , o texto será compactado e não queremos isso O alinhamento é no centro esquerdo ou, portanto, é bastante normal. Essa pequena ferramenta aqui significa que, se você adicionar mais texto, para qual direção crescerá. O padrão que temos ativado significa que, se eu copiar mais texto, vamos adicionar mais texto aqui, ele será adicionado na parte inferior. Agora, se você tivesse esse conjunto no centro , o que aconteceria é que ele cresceria a partir do centro e, obviamente, o mesmo se você tivesse um conjunto na parte inferior, ele cresceria para cima Você também pode abrir o menu estendido e, em seguida, aqui você encontra mais opções de alinhamento. Nunca use alinhamento de texto justificado. Eu nem sei por que ainda existe, para ser honesto. Os que você provavelmente usará mais são como Sublinhado e coisas assim, e você encontrará coisas mais avançadas, como corte vertical, estilo de parágrafo e, em detalhes, ainda mais coisas como certos recuos, ou se você tiver posições numéricas específicas e Mas, na maioria das vezes, o menu padrão funcionará bem. Assim como qualquer outro objeto, você pode selecionar texto e alinhá-lo E qualquer mudança na cor, você usaria o menu do filme. E, a propósito, no Figma e no design de interface do usuário em geral, texto sempre tem sua própria caixa O título tem uma caixa própria e o texto de cópia tem sua própria caixa Tecnicamente, você poderia ter esse título dentro da mesma caixa, mas não é assim que configuramos o design da interface 13. 08 quadros de aninhamento: o superpoder Figma: Na verdade, Figma tem tudo a ver com estruturas de nidificação. No começo, pode não parecer tão óbvio por que tudo deveria ser colocado em uma moldura. Isso é algo que você entenderá muito melhor quando passar para recursos mais avançados, como trabalhar com componentes ou também com layout. Vamos dar uma olhada em como seriam as molduras aninhadas. Aqui você tem uma moldura principal e, dentro dessa moldura principal, você tem mais molduras. Então você tem uma moldura laranja, uma moldura vermelha e uma moldura azul. Você pode ver que no painel de camadas do lado esquerdo, você pode mover as molduras simplesmente arrastando-as. Agora, dentro dessas molduras, eu ainda tenho mais. Então, se eu clicar na minha moldura azul ou abri-la através do painel de camadas, você pode ver que eu tenho uma forma, mas também tenho outra moldura que contém algum texto. Então, isso seria algo como um botão que seria novamente uma moldura aninhada Se você selecionar qualquer moldura e movê-la, tudo o que você colocar dentro dela se moverá com ela. Se você arrastar elementos entre os quadros. Por exemplo, digamos que essa forma, eu a arrasto para a moldura vermelha você pode ver que ela se reorganiza automaticamente no painel de camadas Então você não precisa se preocupar com isso. Também posso simplesmente arrastar um elemento para fora do quadro principal e ele criará automaticamente outro quadro na minha tela ao lado dele. Você também pode desenhar uma moldura. Então, se eu pressionar F, posso simplesmente desenhar uma moldura aqui dentro, e se eu desenhá-la sobre certos elementos , ela conterá esses elementos. Mas vamos voltar um segundo à nossa configuração original. Se você tiver todas as camadas abertas e quiser recolhê-las, basta selecionar o quadro principal e pressionar a opção antiga L. Se você quiser pular para o próximo elemento filho, pressione enter. Observe como isso selecionará todos os quadros no próximo nível. Se eu pressionar enter novamente, ele vai dar um passo adiante e assim por diante. Com a barra invertida, você pode voltar para o pai principal E não se esqueça de que com old e L, você vai derrubar as camadas mais antigas. Se você quiser selecionar profundamente uma camada, digamos que você queira esse botão aqui , primeiro você teria que clicar até o fim. O que você pode fazer é simplesmente manter o comando pressionado e selecionar a camada a seguir Na verdade, esse é o atalho que você realmente precisa lembrar, porque é algo que você usará o tempo todo É uma boa prática se você já começar a pensar e projetar os elementos básicos do seu design com molduras, e eu vou mostrar como isso funciona. No entanto, não se estresse se, aqui ou ali, você cometer um pequeno erro ou não tiver certeza do que usar Você sempre pode corrigir isso mais tarde. 14. 09 quadros vs grupos: A próxima pergunta que você provavelmente terá é por que quadros e não apenas grupos no FICMA Porque no FICMA, poderíamos simplesmente agrupar elementos selecionando-os e pressionando command e G. Vamos dar uma olhada mais de perto nisso Aqui eu tenho uma moldura, e essa moldura contém outra moldura azul e uma elipse E aqui eu tenho a mesma configuração, mas isso é um grupo, como você pode ver no painel de camadas. Agora eu posso movê-los como um grupo, então é isso que eu procuro, e eu poderia até mesmo colocá-los em outra moldura. Digamos que desenhe uma moldura ao redor deles. Então você pode ver que os dois se encaixam bem dentro dessa moldura, seja uma estrutura minada ou um grupo minado No começo, parece que não há muita diferença, então por que não escolher essa? É verdade que quando eu começo a desenhar, às vezes eu realmente uso grupos. De alguma forma, eles são mais rápidos e fáceis de gerenciar no início. Se eu faço um rascunho rápido de algo, geralmente começo com grupos. Na verdade, você não precisa se preocupar porque, mesmo que tenha um grupo, você sempre pode convertê-lo em um quadro posteriormente simplesmente usando o menu suspenso no lado direito, e você sempre pode converter qualquer quadro novamente em um grupo, se por qualquer motivo você quiser. Portanto, no começo, não se preocupe muito com a forma como você precisa configurar tudo isso. Isso acontecerá quando você passar para coisas mais avançadas, como design de layout automático com componentes prototipagem, onde você perceberá que simplesmente precisará de uma moldura ou a Figma até mesmo ajudará e converterá e converterá tudo em molduras para você Ainda vamos tentar adquirir o hábito de trabalhar com molduras. Por enquanto, apenas algumas diferenças básicas que você pode notar imediatamente. A primeira é se eu tenho uma moldura, então você pode ver no lado direito, eu recebo essa pequena caixa que pode marcar, que é chamada de conteúdo do clipe. Agora, o conteúdo do clipe é muito útil, especialmente porque estamos usando a moldura para representar nossa tela ou o tamanho do nosso Portanto, teremos conteúdo que transborda. Isso é algo que, mais tarde, com a prototipagem , talvez queiramos animar, mas no começo, não queremos ver todo esse excesso, então é muito útil mostrarmos e ocultarmos isso Eu não posso fazer isso em um grupo. Você também notará que, se quiser usar isso como plano de fundo, digamos que estamos apenas redimensionando este aqui, então temos exatamente a mesma aparência Se estivermos usando isso, faltam alguns recursos. Dê uma olhada se eu mudar para a moldura. Você verá que estou recebendo muito mais recursos, como grades de layout e todas essas seleções diferentes Aqui estou recebendo alguns. Eu poderia, por exemplo, adicionar layout automático, algo que queremos fazer mais tarde. Se eu tirá-lo, você notará que Figma foi gentil o suficiente para convertê-lo em uma moldura para mim Então, em vez de se estressar com a abordagem correta, recomendo entrar, comprar alguns tratores e, quando você alcançar os recursos mais avançados, tudo se encaixará 15. 10 Como projetar com quadros aninhados: Vamos criar um primeiro design com molduras aninhadas e figma. Aqui está um exemplo clássico. Eu tenho uma moldura principal, chamada de bloco, que contém outras molduras e elementos. Você pode ver aqui que tenho minha navegação, que também é uma moldura que contém outra moldura, e lá dentro, tenho algumas linhas representando o menu de hambúrguer A propósito, posso simplesmente arrastar isso até aqui se eu quiser alterar a ordem. Em seguida, tenho meu título, e você pode ver que os títulos ou apenas o texto como tal não são colocados em uma moldura separada, a menos que sejam parte de um cartão ou outro elemento Um título, você pode simplesmente colocar livremente no quadro principal Então eu tenho meu cartão aqui. Você pode ver que eu tenho duas cartas. Novamente, se eu quiser alterar a ordem, basta arrastá-la para dentro do painel de camadas. Dentro do meu cartão, você pode ver que eu tenho uma forma, que eu chamei de imagem, e então eu tenho um título, e eu tenho um texto Então, vamos recriar isso e, no processo de construção, ficará muito mais claro por que e como eu configuro os diferentes elementos OK. Vamos mudar isso um pouco. Vamos pressionar F e adicionar uma tela vazia ao lado dela com o mesmo tamanho. Com o deslocamento de dois, nós os enviamos bem no meio. Vou passar por isso bem rápido, então fique à vontade para pausar o vídeo e experimentar diferentes etapas em seu próprio tempo A primeira coisa que vou fazer é pressionar L e isso ativa a ferramenta de linha Você pode ver isso aqui em cima, os atalhos. E vou traçar uma linha para o meu menu de hambúrguer. Vamos definir isso para 40. E o que vou fazer agora é selecionar essa opção de apertar Shift ou qualquer outra E então eu vou arrastar uma cópia para baixo. E você pode ver que agora eu posso ver o tamanho direto. Se você não tiver isso, você também pode selecioná-lo e usar a ferramenta de organização Agora vamos selecionar todos eles e vou torná-los um pouco maiores para que possamos vê-los melhor em dois pixels. Agora, a próxima coisa que você pode fazer é transformar isso em um grupo, para que o comando e G criem um grupo. No lado esquerdo aqui, você pode ver um grupo e você pode chamar isso de hambúrguer E para ser honesto, por enquanto, isso funcionaria muito bem. Se mais tarde você quiser transformar isso em um quadro, basta selecionar seu grupo e, no painel de propriedades do lado direito, você pode simplesmente alternar entre quadros e grupos. Observe como o grupo, se eu quisesse algum espaço extra, não está permitindo que eu faça isso. Então, o que vou fazer é transformar isso em uma moldura por enquanto, e você pode ver que me mostraria tudo se eu recortasse, mas cortaria algumas coisas. Mas o que podemos fazer então é simplesmente pressionar o comando, e agora você pode redimensionar esse quadro ao seu gosto Agora vamos terminar a navegação f, basta pressionar F. E em vez de escolher uma moldura, vou desenhar uma moldura e vou desenhá-la ao redor do hambúrguer que acabei de fazer ao redor do hambúrguer que acabei Você pode ver se eu desenhar em torno de qualquer elemento, então esse elemento ficará automaticamente dentro da moldura, então ele se moverá com essa moldura. Vamos dar um pouco de cor ao fundo para que possamos vê-lo melhor Estou apenas usando meu preenchimento e escolhendo uma cor um pouco mais escura Vamos garantir que também tenhamos um preenchimento aqui. Caso você não tenha um preenchimento, basta pressionar mais e o branco será exibido como padrão. Você ainda pode selecionar seu hambúrguer aqui. Se você pressionar o comando, poderá até mesmo selecionar profundamente nossos traços Mas a maneira mais fácil é, na verdade, pressionar enter, e isso seleciona todos os elementos secundários, e você pode então usar a ferramenta de alinhamento para centralizar no meio da navegação que você acabou O próximo são alguns textos. Vamos pressionar t e eu posso simplesmente desenhar uma caixa de texto onde quiser adicioná-la Eu posso adicionar texto aqui, e eu simplesmente vou copiar o texto que eu já escrevi, e vou colocá-lo dentro daqui. Agora você pode ver que isso assumiu automaticamente o estilo desse texto Se você quisesse mudar isso, você poderia fazer isso aqui. Adquira o hábito de sempre adicionar altura automática ao seu texto. Isso significa simplesmente que, se eu estiver excluindo alguns textos ou adicionando algum texto, a caixa de texto responderá Vamos adicionar a moldura do nosso cartão. Eu simplesmente pressiono F e, em vez de usar o menu predefinido, vou desenhar esse cartão na minha tela Vou adicionar a base de um efeito, para dar uma sombra ao fundo. Observe que, se você não vê nada que garanta que sua moldura tenha um preenchimento, se ela não clicar em mais, ela fornecerá um preenchimento padrão branco Você também pode alterar o efeito clicando no menu de efeitos. Vou adicionar essa área da imagem à minha moldura, então vou pressionar r e desenhar um retângulo Se eu desenhar na minha moldura, você pode ver que, no menu da moldura, ela é adicionada automaticamente à moldura. Se eu clicar duas vezes, posso mudar isso para imagem. Há muita opinião sobre se um espaço reservado para uma imagem deve ser uma moldura ou uma forma Não se preocupe muito com isso. Não há certo ou errado. Ambas as abordagens funcionarão. Geralmente, você me vê usando formas um pouco mais do que molduras na maioria dos casos, porque acho mais fácil adicionar imagens a elas. Mas, em algumas ocasiões, uma moldura fará sentido. Às vezes, até uso uma moldura com uma forma interna se estiver trabalhando com efeitos avançados de animação e zoom. Neste momento, não se preocupe muito com isso. Use o que funciona melhor para você. Agora vamos adicionar nosso título, então eu pressiono T, então eu pego minha ferramenta de texto e escrevo o título Para o meu texto de cópia aqui, vou ser preguiçoso e copiá-lo do meu exemplo Agora observe como isso já está definido na altura automática, e vou deixar assim. Você pode ajustá-lo da maneira que quiser para configurar este cartão. Eu também vou ter esse título em altura automática. Em geral, eu usaria a largura automática para algo como botões em que sei que ela não fluirá para uma segunda linha. E eu vou reorganizá-los um pouco. Fantástico. Agora, uma coisa que quero destacar é observar como aqui temos o conteúdo do clipe. Conteúdo do clipe, vamos desenhar outra forma aqui. Se eu tivesse, digamos, um círculo, você pode ver que ele não exibirá o círculo completo. Se você selecionar a moldura principal, poderá ver tudo fora do seu cartão. Às vezes, se você não vê elementos, especialmente se estiver trabalhando com esboço de algo, verifique se o conteúdo do clipe está definido Para fazer uma cópia do seu cartão, basta selecionar um cartão, pressionar alt ou opção e, com uma pequena dica, segurar a tecla Shift e pressionar também. Em seguida, ele o copiará apenas na linha abaixo e não se moverá para a esquerda e para a direita. Aqui está. Seu primeiro layout está pronto. 16. 11 grades utilizáveis do Re com estilos: Vamos criar algumas grades reutilizáveis. Aqui eu tenho minha página de bloqueio e tenho outra página detalhada se eu clicar neste artigo. Agora, quero adicionar a mesma grade aos dois para garantir que sigam o mesmo layout geral. Para adicionar uma grade, basta selecionar um quadro. E observe que isso funciona em qualquer quadro, então, neste caso, vou selecionar meu quadro principal aqui, representando a janela de visualização, e no lado direito, vou clicar na grade de layout Mas, por padrão, você obterá essa grade de pixels, mas não queremos isso. Queremos colunas. Clique no ícone e, no menu suspenso, escolha Você pode alterar a contagem, então eu poderia mudar isso para quatro, e eu também posso definir uma margem. Então, vamos tentar algo como 24. Observe como eu sempre trabalho com múltiplos de quatro ou oito. E Dn para o Gutter, eu também vou escolher um múltiplo de oito ou 24 Na verdade, vamos subir um pouco para 32. Agora, existem diferentes tipos de grades. O alongamento é provavelmente o mais comum. Isso significa que se eu mudar a largura, ela vai se esticar, então a coluna se estica, e a calha e a margem permanecem as mesmas Lembre-se de que você sempre pode voltar ao tamanho original por meio do menu. Agora, se eu for para o centro, isso significará que a grade permanece no centro. E eu precisaria descobrir qual largura eu precisaria aqui. Então, você precisa fazer um pouco de matemática para descobrir o que está procurando. Para nosso design, vamos nos limitar ao alongamento. Agora eu poderia aplicar a mesma grade à minha outra moldura simplesmente passando por esse processo novamente, mas é muito mais fácil e melhor praticá-la como um estilo. Vou selecionar o quadro em que minha grade está ativada. Então, onde vejo a grade que acabei de criar, clique no ícone Estilos. Agora você pode clicar no Plus e salvá-lo. Vou chamá-la de rede móvel. Você pode adicionar mais algumas descrições aqui e depois criar o estilo. Se você clicar na tela cinza , verá esse estilo de grade salvo em sua visão geral. Se você escrever, clicar também poderá alterá-lo ou excluí-lo. Agora, se quisermos aplicá-lo a qualquer outro quadro, basta selecionar esse quadro. E então, no menu da grade, se você passar o mouse sobre ele, verá o ícone de estilos, agora você pode selecionar essa grade Agora posso começar a alinhar, por exemplo, minhas caixas de texto à grade Observe que, com coisas como essas cartas aqui, mais tarde, esse também será um layout. Então, tudo isso vai funcionar de forma um pouco mais automatizada. Mas, por enquanto, vamos fazer isso manualmente. Eu posso mover o pequeno botão Voltar aqui, alinhado com a grade Com minha imagem, eu poderia escolher se eu quero que essa imagem aqui vá para a borda ou se eu quero que ela fique na grade. Se você posicionar imagens na grade, sempre use as colunas do arquivo, não faça nada como posicioná-las no meio de uma coluna ou algo parecido. Então, por enquanto, vou usar a largura total e, em seguida, vou fazer o mesmo com minhas caixas de texto Vamos apenas garantir que eles se encaixem bem na grade. Você pode ocultar ou mostrar a grade usando o menu do lado direito. Se você passar o mouse sobre ele, verá o ícone si ou poderá usar o controle de atalho e 17. 12 Comunidade Figma e plugins: Plug-ins e a comunidade Figma. Se você voltar para casa, então em casa, você encontrará este pequeno globo aqui, atualmente anúncios na parte superior e aqui embaixo. Mas observe que isso muda bastante, então você pode encontrá-lo em outros lugares no futuro. Se você clicar nele , você acessará a comunidade Figma E aqui você vê todos os tipos de arquivos. Isso pode ser apresentações, arquivos de design que você pode usar Alguns deles são gratuitos e alguns podem ser pagos, mas a maioria deles é gratuita. Por exemplo, digamos que estamos procurando um conjunto de ícones e, em seguida, podemos simplesmente pesquisá-lo. E então aqui você vê diferentes Consets. Se você gosta de alguns deles, acesse a página, navegue um pouco e tenha uma pequena prévia do que está acontecendo aqui e, em seguida, basta clicar em abrir no Figma para criar uma duplicata desse arquivo na sua conta FIMA Você também pode pesquisar criadores. Então você poderia, por exemplo, pesquisar minha página na comunidade, então basta digitar Kristine Valor E então, se você acessar os criadores aqui, você acessará minha página. Você também pode usar o link direto, que é a barra frontal do figma.com, e depois usar a alça, que no meu caso está no Moon Aqui você pode encontrar todos os meus recursos gratuitamente e simplesmente duplicá-los e jogar com eles em sua própria conta Figma Outra coisa que temos aqui são os plug-ins. Você pode pesquisá-los ou, aqui em cima, você também tem uma guia de plug-in, que mostra alguns plug-ins de plug-ins populares, acessibilidade e assim por diante. Vamos dar uma olhada no que isso nos dá em termos de organização de arquivos. Em seguida, você obtém uma lista de plug-ins. Você pode ver quantas pessoas o estão usando atualmente e, em seguida, basta abri-lo em seu arquivo. Você também pode abrir plug-ins diretamente no seu arquivo de design. Vá para o menu de ações e você pode simplesmente pesquisá-las aqui na pesquisa normal ou ir para plug-ins e widgets, e então você também pode pesquisar qualquer tópico de seu interesse Eu quero te mostrar um ótimo plugin chamado HTML to Design. Depois de ver o plug-in, basta clicar duas vezes nele e ele será aberto. O que podemos fazer com HTML to Design, podemos simplesmente adicionar uma URL a qualquer site e, a partir de uma URL, criar esse site no Figma Então, aqui você pode ver a página que ele importou e ver tudo como editável Então, eu posso, por exemplo , abrir essa navegação aqui, e então eu posso simplesmente trabalhar com isso e eu posso entrar aqui, eu posso alterar todos os textos e tudo mais. Portanto, é muito bom começar com qualquer site com o qual você queira jogar. 18. 13 Como adicionar imagens aos seus designs: Adicionar imagens aos seus designs. Há diferentes maneiras de adicionar imagens aos seus designs. Você pode usar um menu de filme e importá-los, importá-los em massa copiar imagens existentes da sua prancheta Você pode criá-los com IA ou usar um plug-in como o Unsplash Portanto, a primeira opção é simplesmente adicionar uma imagem por meio do menu de arquivos. Então, selecione sua moldura ou forma e, em seguida, vá para o preenchimento e, em seguida, mude para a imagem. Agora você pode ter a opção de escolher uma imagem e simplesmente selecionar essa imagem do seu arquivo. No entanto, isso é um pouco lento. Assim, também podemos selecionar essas imagens em massa, pressionar o comando shift ou no Windows Control e K, e agora você pode selecionar várias imagens ao mesmo tempo. Você verá no cursor uma prévia da próxima imagem a ser colocada e o número de quantas imagens você armazenou. Você pode adicioná-lo diretamente na tela ou clicar em qualquer forma para colocar a imagem. Você também pode ter a situação de já ter imagens em seu arquivo de design que deseja reutilizar Agora, você não precisa exportá-los e importá-los. Você pode usá-los diretamente daqui. Basta selecionar a imagem, pressionar o comando Shift e C, e ela copiará um PNG, e você pode simplesmente colar isso pressionando o comando ou controle e colocando-o em qualquer outra forma. Outra opção é que também podemos gerar imagens com A. Você pode simplesmente clicar no menu Ações e, em seguida, criar uma imagem ou selecionar uma moldura ou forma e, através do menu de preenchimentos, escolher preenchimento de imagem, trocar imagem e, em seguida, você também pode gerar imagens aqui selecionar uma moldura ou forma e, através do menu de preenchimentos, escolher preenchimento de imagem, trocar imagem e, em seguida, você também pode gerar imagens E agora, basta digitar o que você está procurando. Se você gosta de mais de uma imagem, pequena dica, basta arrastá-la para a área de trabalho e depois armazená-la e, posteriormente, sempre poderá usá-la em qualquer outro elemento. A última opção, e na verdade, minha favorita é usar um plug-in. Abra o menu de ações, clique em Plug-ins e digite Unsplash Clique duas vezes nele para abrir e você pode digitar o que estiver procurando ou usar algumas das categorias predefinidas A maioria dessas imagens é alta resolução e isenta de direitos autorais Você pode simplesmente clicar neles para preencher qualquer imagem ou moldura em seu design. Então, vamos adicionar uma imagem ao nosso design. Outro plug-in que funciona exatamente como unsplash e que eu também gosto muito é Basta acessar seus plug-ins e escolher o Lumi ou o plug-in unsplash e, em seguida, abri-lo e selecionar qualquer o plug-in unsplash e, em seguida, abri-lo e selecionar E então você pode pesquisar as imagens que você gosta aqui. Vamos escolher este e, em seguida, você pode colocá-lo diretamente dentro da sua forma. Agora, se quisermos usar a mesma imagem aqui , o que podemos fazer é usar a mesma. Bem, digamos que você feche o plugue e não saiba onde o encontrou. Então, o que você pode fazer é usar o atalho, comando shift e C para copiar um PNG, selecionar a outra forma ou moldura, e agora você pode simplesmente colá-la aqui Se você quiser alterar a seleção da imagem, clique duas vezes e você obterá o menu de imagens. Aqui no menu suspenso, que está configurado para ser preenchido, escolha Cortar. Agora você pode mover a imagem. Você também pode, se chegar perto das bordas, alterar o tamanho. Se você segurar a tecla shift , ela aumentará proporcionalmente 19. 15 métodos de duplicação: No Figma, você quer copiar e colar um pouco. Portanto, é uma boa ideia entender as diferentes formas de duplicar Você pode colar na mesma posição, várias vezes, colar aqui, colar para substituir ou duplicar Vamos começar com a pasta na mesma posição. Assim, simplesmente copiamos um elemento, colocado em um quadro em uma determinada posição, selecionamos um novo quadro e o colamos lá Então, vamos selecionar nosso cabeçalho, pressionar Command ou Control e copiar, selecionar um novo quadro. E se simplesmente colarmos agora com o comando Control e V, ele será colado exatamente no mesmo local. Também podemos fazer isso com vários elementos, para que possamos escolher mais do que apenas um, selecionar uma moldura e ela será colada exatamente no mesmo lugar, muito útil. E o melhor de tudo é que isso também funciona para pastas múltiplas Assim, podemos fazer exatamente o mesmo e selecionar vários quadros. Digamos que queremos que nosso cabeçalho e nosso botão aqui embaixo sejam colocados em cada quadro na mesma posição, e simplesmente os copiamos , selecionamos todos os quadros e colamos, e eles ficarão exatamente no mesmo lugar. Se quisermos um local diferente, também podemos usar colar aqui. Então, nós o copiamos também, mas depois clicamos com o botão direito do mouse e selecionamos colar aqui no nosso menu. Então, vamos selecionar nosso círculo novamente. Eu o copiei e agora vou selecionar onde quero colocá-lo, clicar com o botão direito do mouse em colar aqui, e ele será colocado exatamente nessa posição Outro muito útil que usei bastante é colar para substituir Novamente, basta copiar o elemento como antes e pressionar o comando Shift e R, ou você também pode usar o botão direito e colar para substituir um objeto existente. Então, vou selecionar o quadrado aqui. Vou pressionar comando ou controle e C para copiá-lo. Agora posso selecionar qualquer outro elemento e simplesmente pressionar shift, command ou control, e R, e ele será substituído. Você também pode selecionar vários elementos e substituí-los todos de uma vez. O último que eu quero te mostrar é duplicado, você vai me ver usando isso o tempo todo Para duplicar, basta selecionar um elemento, pressionar Alt e arrastar uma cópia Se você mantiver pressionada a tecla Shift adicionalmente, você a copiará na mesma linha. Depois de fazer uma cópia, basta pressionar o comando e D e ela fará várias cópias com a mesma distância. Vamos experimentar isso. Então, eu posso selecionar esse quadro, pressionar t, e agora posso simplesmente retirar uma cópia idêntica, mas você pode ver que isso se move livremente. Se eu fizer o mesmo, mas também mantiver a tecla shift pressionada, copiarei exatamente na mesma linha. E uma vez que eu fiz uma duplicata, agora eu posso pressionar o comando ou controle e D, e ele vai fazer mais cópias exatamente na mesma distância Se selecionarmos todos eles, vamos pressionar Shift e dois para posicioná-los todos no centro. Você pode ver no lado direito e no painel de propriedades, eu posso ajustar as lacunas entre eles. Isso ocorre porque eles estão todos à mesma distância, estão arrumados e, portanto, você pode ajustá-los e também trocá-los usando as pequenas bolhas 20. 16 Desenho em Figma: Você também pode usar o FIMA para ilustração e desenho. O FIMA é um programa baseado em vetores. Se você trabalhou com algo como o Illustrator antes, isso será muito familiar para você É importante observar que o FICMA é feito principalmente para configuração de design de interface do usuário Na verdade, não se trata de ilustração, mas você pode obter resultados muito bons se quiser configurar coisas como ícones, por exemplo. Você pode usar simplesmente suas formas aqui para ilustrar. Se eu desenhar uma forma e clicar duas vezes nessa forma, observe como estou recebendo um menu diferente e você pode clicar nele e, portanto, adivinhar essas novas ferramentas. Você vai ter essas curvas e coisas assim. Agora, você provavelmente deseja configurar sua própria ilustração e, portanto, faria mais sentido usar seu lápis ou sua ferramenta de caneta. Se você tem experiência com ilustração e tem coisas como um trackpad e canetas em casa, talvez queira usar o lápis Ele pode desenhar livremente. No entanto, se você estiver trabalhando com um mouse em uma configuração mais padrão , provavelmente desejará usar a ferramenta recarregada A ferramenta pent é algo qual você realmente estará acostumado se já trabalhou com software de ilustração antes Basta adicionar um primeiro ponto em nossa tela e, em seguida, obter uma linha. Se você segurar a tecla shift, obterá uma linha reta. Vamos fazer isso aqui. E, portanto, você pode desenhar qualquer ícone ou qualquer elemento de ilustração necessário. Agora, se você pular desse menu, ainda poderá obter esses pontos novamente clicando duas vezes e poderá ajustá-los. Você também pode obter as curvas de Bezier. Vamos clicar duas vezes para voltar à nossa ilustração. Se você clicar aqui, poderá obter as curvas e manipulá-las ainda 21. 17 Escala em Figma: Dimensionamento no Figma. A ferramenta de dimensionamento do Figma é um pouco negligenciada , mas às vezes é muito útil Aqui eu tenho uma ilustração vetorial, e você pode ver que ela é feita de formas diferentes, e essas formas têm um traçado com um peso diferente. Às vezes é 28 e assim por diante. Agora, se eu quiser ampliar isso, o que eu poderia fazer é ir até a borda até ver a pequena roche a aqui e depois toda virada para baixo para manter as proporções e agora eu posso mudar o No entanto, com os traços, ele simplesmente não funciona corretamente, não me dá as proporções corretas Uma maneira muito melhor de fazer isso seria usar uma ferramenta de escala. Você encontra a ferramenta de escala na barra de ferramentas ao lado da ferramenta de movimentação. Portanto, certifique-se de retirar o submenu e, em seguida, aqui você vê a escala, ou você também pode usar um atalho k. Você notará que o erro parece um pouco diferente e, no lado direito aqui você pode ver o menu de escala Então, no menu de escala, você pode adicionar uma quantidade, ou seja duas vezes o tamanho atual, por exemplo, se você pressionar K novamente, você volta lá. Você também pode adicionar uma altura e uma largura específicas para as quais deseja que sejam dimensionadas. Você também pode escolher a direção da escala. Por exemplo, poderíamos fazê-lo crescer do canto inferior esquerdo em diante Você também pode escalar no Cvas , desde que esteja dentro da ferramenta de escala Então, basta selecionar qualquer elemento e , em seguida, você verá um novo erro na borda e, como você estiver na ferramenta de escala, agora ela será dimensionada corretamente. Às vezes, você fica preso na ferramenta de balança. Portanto, se você não encontrar todas as outras configurações, isso ocorre porque a ferramenta de escala ainda está aberta. Apenas certifique-se de fechá-lo aqui com o x. 22. Parte 1: Deixe-me contar um pouco sobre o projeto do nosso curso. No projeto do curso que abrange todo o curso, trabalharemos em um design de aplicativo de podcast, bem como em um protótipo funcional para No final de cada capítulo em seu arquivo de trabalho do Figma, você encontra uma solicitação e um link para entrar no projeto do curso O projeto do curso é um acréscimo ao curso geral. Isso significa que é absolutamente opcional. Você não perderá nenhuma informação se nenhuma informação se apenas frequentar as aulas gerais. Mas deixe-me contar um pouco mais antes de você decidir. Ao abrir o arquivo do projeto do curso no lado esquerdo, você verá páginas. Na primeira página, temos nossos exercícios. Você pode ver que, para cada seção do curso, temos um exercício. Esses exercícios se baseiam uns nos outros e vêm com instruções. Certifique-se de ler primeiro as lições gerais sobre, por exemplo, o básico do Figma ou dos E quando estiver pronto, volte para o arquivo do projeto do curso e continue com as próximas etapas. Não se apresse, porque isso só vai confundir você. Cada uma das etapas vem com uma solução sugerida. Observe que não existe uma solução final em design. Na verdade, é só uma sugestão. Você pode inventar algo completamente diferente que seja igualmente bom. Mas também fique à vontade para pegar minha solução e continuar a partir daí. Se você ficar preso no lado esquerdo das páginas, encontrará o design final. Esta é realmente a versão polida e finalizada. Você também encontrará uma página para componentes e guias. Não se preocupe, você aprenderá sobre tudo isso durante o curso. Agora vamos voltar aos exercícios e dar uma olhada em nossa primeira parte, que é o básico do Figma Eu tento manter esses arquivos atualizados. O seu pode parecer um pouco diferente. Todas as informações importantes estarão lá. Não se preocupe. 23. Parte 1: Nesta primeira parte, somos solicitados a criar um wireframe E você pode ver que há uma imagem de como deveria ser e você recebe algumas instruções. Você também pode realmente construir isso em seu próprio tempo. No lado direito, aqui, você encontra minha solução sugerida. Esta é realmente uma estrutura de arame você pode clicar e ver exatamente no painel de camadas, como eu a configurei. Você não precisa construí-lo exatamente assim, mas se você ficar preso, basta dar uma olhada em coisas assim. Barra de progresso aqui, isso pode ser um pouco complicado para começar. Basta copiá-lo. Está absolutamente bem. A ideia desses exercícios é que você realmente mergulhe em si mesmo e descubra. Mas, para começar, deixe-me guiá-lo um pouco. Vou copiar esse primeiro aqui. E vou trazê-lo e colocá-lo próximo às minhas estruturas de arame nas quais vou trabalhar. Vamos lá, vou colocar isso bem ao lado dele. Vamos tirar esses aqui do caminho. Vamos colocar isso aqui. Isso pode parecer um pouco complicado e um pouco complicado, mas na verdade são apenas formas e texto Isso é tudo o que fizemos durante nossa sessão básica. Vou começar assim. Vou pressionar R e vou desenhar essa forma de fundo. Mantenha a tecla Shift pressionada para obter uma forma uniforme. Esta é minha foto de fundo aqui na parte de trás. E eu vou fazer o mesmo novamente. Eu pressiono R novamente, vou criar uma forma menor aqui. Eu não quero que eles sejam da mesma cor. Você pode simplesmente clicar em qualquer cinza aqui. Você pode ter algo guardado aqui embaixo. Não importa quais cores você usa. Você também pode usar o seletor de cores. Portanto, você também pode usar a cor que estou usando no meu exemplo. Mas é realmente irrelevante para a estrutura de arame. Agora vou adicionar o texto. Então, escolho minha ferramenta de texto na barra de ferramentas e simplesmente clico onde quero colocá-la e começar a digitar o nome do podcast Vou duplicar isso novamente. Fizemos tudo isso nas aulas. Se você não se lembra de como duplicar, volte para as aulas É a opção de mudar e alterar. E dessa forma eu posso duplicar logo abaixo na mesma linha. Vou colocar isso aqui e vou chamar isso de acordo com o artista. Agora eu posso selecioná-lo. E então, no tamanho da mão direita no painel de propriedades do texto, eu poderia, por exemplo, alterar isso para médio e também alterar o tamanho do texto. Por exemplo, 216 Se eu selecionar o texto, também posso alterar o preenchimento para preto. Este botão aqui ou esta etiqueta. Você pode ver que é simplesmente uma moldura com um texto dentro. Eu vou bater e vou desenhar uma moldura aninhada. Clique no botão de adição ao lado de Phil, se ele não vier com uma pílula Agora vou virar as esquinas. Vou simplesmente copiar o texto de um colega. Clique na moldura, cole-a no tamanho e altere-a. Basta arrastá-lo e posicioná-lo. E você pode ver no painel Camadas que, se você selecionar o quadro, tudo o que você arrastar sobre ele será automaticamente colocado em tamanho se você quiser uma pequena sombra para o botão e você pode simplesmente clicar no sinal de adição ao lado de Efeitos à direita no painel Propriedades. E vai acrescentar isso. Agora, no meu exemplo, você pode ver que tudo isso está em um quadro. Tudo isso está agrupado. Vou fazer o mesmo com meu novo exemplo aqui. Vou selecionar todos esses elementos. Agora vou pressionar Command e G. Isso o agrupará, na verdade, para estruturas de arame. Isso é certo ou correto. Agora posso chamar esse grupo de herói. Mas talvez você já queira começar a pensar em quadros, pois sabemos que essa é a superpotência de Igms O que você pode fazer para converter isso rapidamente em um quadro? Vá para o painel de propriedades do lado direito e, em vez de agrupar, use apenas uma moldura. Você também pode selecionar elementos e clicar com o botão direito do mouse. E então você pode ver aqui a seleção de quadros e um atalho para você também fazer isso uma só vez ou simplesmente desenhar outro quadro ao redor dele, melhor se você pausar o vídeo e depois experimentar Agora eu quero que essa manchete aqui seja reproduzida recentemente, e podemos ver que é 24 e média Então, o que eu vou fazer é copiar este aqui em Oh, e a propósito, eu não ligo minhas grades Vamos fazer isso. Vamos selecionar esse par e moldura. E então, no lado direito, eu posso ver que não há nenhuma grade aplicável, mas eu já criei um estilo de grade para você. Clique nos pequenos pontos Estilos e basta adicionar a grade móvel Então agora você pode ver isso. Também posso alinhar minhas imagens Agora vamos deixar isso velho. E é aqui que você obtém uma boa distância para poder medi-la. Vou colocar essa manchete aqui e vou chamá-la recentemente de placa Vou selecioná-lo e vou alterá-lo para médio. Eu quero criar esses pequenos cartões aqui. Para este cartão, na verdade, vou copiar o que eu já tenho. Parece que eles são praticamente do mesmo tamanho. Vou arrastar esse nome para baixo porque parece ser, isso é 16. Quanto custa isso também? 16. Ok, ótimo. Então, vou mudá-lo para o nome do podcast agora. Eu já vou selecionar os dois. Desta vez, vou clicar com o botão direito do mouse e dizer seleção de quadros. É o mesmo se você agrupá-lo e depois alterá-lo por meio do menu suspenso aqui, ou simplesmente desenhar uma moldura ao redor dele. Isso não importa. O que você vai acabar com é essa moldura. E dentro dessa moldura você tem sua imagem. Obviamente, você pode renomeá-los e terá o nome do podcast Vamos chamar isso aqui de cartão. Agora, simplesmente queremos duplicá-lo. Vamos arrastar algumas cópias. E eu sempre mantenho o velho pressionado para que eu possa ver as distâncias. E eu vou selecionar todo esse grupo aqui. Deixe-me ver. Na verdade, sim, esses são solteiros nesse. E eu vou copiar todo o grupo e colocá-lo aqui embaixo. E eu também vou copiar meu título. E eu vou chamar isso de, talvez você goste se pausasse o vídeo aqui novamente e experimentasse isso sozinho Como eu disse antes, talvez você nem precise do vídeo. Talvez seja mais fácil simplesmente ter essa referência e construir a partir daí. Ok, a última coisa que precisamos agora é essa barra aqui embaixo, a barra de toque. Vou pressionar F e vou desenhar uma moldura para isso. Vamos dar a isso uma cor de fundo. Vamos clicar em Mais. E, na verdade, vou escolher a cor do meu exemplo aqui. Agora, o que eu poderia fazer é simplesmente adicionar esses elementos. Mas, como você pode ver na barra de guias aqui, eu já as configurei em subcategorias, então isso facilitará mais tarde, quando quisermos adicionar capacidade de resposta e coisas assim Você não precisa fazer isso assim, mas vou mostrar como já configurá-lo nessas três seções. A coisa mais fácil é simplesmente copiar sua barra de guias e depois lembrar nossos campos aqui em cima, eles podem fazer cálculos. O que vou fazer é somar dividido por três. Dessa forma, estou obtendo a quantidade exata de um dos meus ícones que mais tarde quero colocar aqui. Agora vou simplesmente receber alguns textos. Este texto aqui é, na verdade, muito menor. Isso é apenas 12. Vou mudar isso para 12. Vou colocar isso aqui dentro. Então eu simplesmente vou bater e desenhar um círculo. Então, isso é apenas um espaço reservado para um ícone que mais tarde estará lá Vamos chegar um pouco mais perto. Podemos usar nossa ferramenta de alinhamento. Opa, na verdade não é isso que eu queria, mas bem, vamos colocar isso Dê um pouco mais de espaço. Agora, vamos chamar esse link, ou ícone, ou o que você quiser chamar isso. Vamos agora colocá-lo dentro novamente. Agora posso simplesmente duplicá-lo dessa forma. Estou recebendo três desses links que têm exatamente o tamanho certo. Vou chamar esse de lar. Observe que isso é como na esquerda. O que eu quero fazer, eu quero pular para trás. Vou colocar isso no centro. Vamos mudar o alinhamento do texto para o centro. E eu vou chamar isso de lar. Na verdade, vou dar a ele todo o espaço que tenho disponível, porque talvez eu tenha outra redação mais tarde aqui para ter certeza de que há espaço suficiente Então vamos chamar esse. Vamos chamar isso de salvo. É isso mesmo. Temos nossa primeira configuração de nossa primeira tela. Vamos para o segundo. Bem, na verdade, vamos clicar duas vezes neste e chamá-lo de casa. Agora vamos trazer nosso segundo. Vamos copiar isso e colar aqui. O que eu vou fazer aqui, assim, é praticamente o mesmo. Vou copiar isso. Eu só vou me livrar desses elementos. Eu não preciso deles. Eu tenho esse pequeno botão de voltar. Vou apenas copiar um texto. Deixe-me isso mesmo, onde estava naquela época? Também tenho o nome da playlist e o nome do podcast aqui. Vou adicionar minha grade de layout novamente e, na verdade, vou copiá-la colocá-la no meio. E eu vou apenas arrastá-lo até as bordas. Vou me certificar de que, se eu tiver um nome mais longo, haja espaço suficiente. Vou selecioná-lo e centralizar o texto. Então eu tenho uma cópia do texto. Eu vou ser preguiçoso aqui e vou pegar isso e colocá-lo aqui porque eu sei que é apenas uma cópia de texto E então eu tenho que ler mais. Então, deixe-me fazer isso. Leia mais. Eu o seleciono e, se você quiser sublinhado, insira pequenos três pontos nas configurações de texto e aqui você pode encontrar o texto sublinhado Se você clicar duas vezes, ele mudará da largura quatro para a largura alterada, se você quiser, porque na verdade é um pouco como um botão. Ok, ótimo. Agora eu só preciso adicionar os episódios. Vou apenas copiar um quadrado dos que eu já tenho aqui. Vou torná-lo um pouco menor. Como você vê, ele não precisa ficar na grade porque é como um elemento próprio. Então eu vou copiar este. Vou colocá-lo de volta à esquerda. Vamos realmente ver o quão grande é esse. É muito pequeno, tem dez. Você pode digitar todas as letras maiúsculas ou não. Você também pode, novamente, acessar essas configurações extras e alterá-las para letras maiúsculas. Então eu vou copiar este aqui e colocá-lo aqui. Agora eu vou fazer o mesmo. Deixe-me alterar as configurações do texto para que fique tudo à esquerda. E eu vou colocar isso abaixo. Na verdade, vamos ter uma boa distância de oito também. Vou copiar isso novamente. Você pode ver aqui que deixei um pouco mais de espaço porque algo pode ser realmente mais longo. O que eu fiz aqui é que eu posso ver que isso é automático, esta é uma altura de linha de 24. Se você clicar nele, poderá vê-lo. Eu vou dar um tamanho. Deixe-me abrir isso. Vou dar a essas duas linhas que se encaixam em cerca de 48. Se isso for um pouco avançado demais, não se preocupe. Basta arrastá-lo para abri-lo para que ele atenda às suas necessidades. Agora isso está na parte inferior. Eu não quero isso. Vou mudar a direção aqui para colocá-la no topo. Agora eu posso alinhá-lo um pouco melhor. Na verdade, vamos dar uma olhada no que eles têm aqui. Eles têm carro e 48, provavelmente só precisam se livrar disso. Ok, agora eu só preciso desse pequeno botão de reprodução aqui. Isso é um retângulo. Vamos às nossas formas. Em nossas formas, escolhemos um polígono. Vamos desenhar um. E é isso. Agora, obviamente, isso pertence a um todo, então vou selecionar tudo isso. Na verdade, estou agrupando desta vez porque quero que isso, como você pode ver aqui, abranja toda a largura. Eu vou realmente bater e vou desenhar uma moldura ao redor dela. Agora, isso é um on frame, o que é chamado de episódio, vamos chamá-lo de episódio também. Ótimo. Agora podemos simplesmente duplicar isso Note como eu quero mais alguns episódios, como ir até aqui. Isso vai para a área visível. Lembre-se de que, se selecionarmos uma moldura principal e soltarmos, poderemos ver tudo o que está abaixo Então você também pode fazer isso no meu exemplo, e você pode ver que, na verdade, eles só têm dois aqui. Mas sim, tudo o que é maior do que sua moldura se tornaria visível. É muito importante sempre lembrar. A última coisa que preciso é meu pequeno bar aqui embaixo. Vamos simplesmente copiar isso. Selecione a moldura e, como sabemos, ela será colada no lugar certo. Ótimo, então terminamos com o segundo. Ok, ótimo. Agora só precisamos do nosso último. Vamos dar uma olhada. Nosso último é o episódio em que observamos que ele é colocado em uma moldura própria e , em seguida, simplesmente temos um quadrado. Temos uma mensagem de texto, esta barra de reprodução aqui. É simplesmente uma moldura com outra forma interna. Se isso for muito complicado, basta copiar o que eu fiz aqui. E aqui temos o texto novamente. Aqui você pode ver que é simplesmente uma moldura com cantos arredondados e um pouco de traçado. E então eu coloquei meu triângulo que eu criei dentro daqui. Então, dê uma olhada se você pode descobrir isso por si mesmo com a solução fornecida. 24. Parte 1: Como segunda parte do básico, queremos dar vida a essa estrutura de arame e adicionar algumas imagens e cores Eu lhe forneci o material. Então, aqui você tem todas as imagens. Aqui você também tem alguns ícones. E eu estou usando um gradiente. Você pode usar isso. Eu vou te mostrar em um segundo como, mas você não precisa. Obviamente, você também pode usar a tinta preta sem manchas ou qualquer outra imagem de Ok, vamos pular até aqui. O que vou fazer é copiar minha estrutura de arame. Você pode usar a solução em que trabalhou ou a que eu lhe forneci. O que vou fazer é copiar isso ao lado da minha solução novamente. Então, isso torna um pouco mais fácil para mim pegar tudo. Na verdade, eu não preciso das grades, então vamos desligá-las. Eu vou indo pouco a pouco. Vou começar com minha seção de heróis aqui e, na verdade, também vamos aproximar um pouco mais nossas imagens. E esse pequeno gradiente aqui eu vou usar no segundo. Ok, ótimo. Então, vou começar com a primeira imagem. Vou pegar isso, vou segurar comando shift e ver que essa cópia é um PNG. Se você ainda não tem certeza de como usar imagens, volte ao vídeo, onde encontramos as diferentes opções de como usar Ao copiar uma imagem existente, você também pode selecionar qualquer moldura ou forma. Clique em Preencher, depois em Imagem e escolha uma imagem. Ou você pode, é claro, usar o plug-in unsplash que examinamos durante as sessões Vou copiar isso novamente, comando shift, e essa é minha opção favorita. E então eu simplesmente vou pressionar o comando V e copiá-lo aqui. E eu vou fazer isso com esse pequeno aqui também. Agora você pode ver que eu quero contrastar mais. É por isso que criei essa sobreposição aqui. Na verdade, acho que, no meu exemplo, é uma sobreposição melhor porque abrange todo o tamanho da imagem Vou copiar isso. colocá-lo na imagem aqui. Agora eu só preciso ir ao meu painel de camadas e eu tenho o fundo da imagem. Eu tenho isso, ok, está parecendo bom. E eu tenho tudo isso em cima. Então, vou selecionar o texto. Eu só vou mudar isso para branco. Isso parece bom. Não se preocupe muito com gradientes. Nós os usamos, não muito o novo design dos olhos, mas se você quiser dar uma olhada, basta clicar no gradiente que eu criei E você pode ver que simplesmente em vez de imagem, você também pode criar gradientes aqui Você também pode mudar as cores. Vou colocar minha barra de abas ao lado e vou adicionar o resto das minhas imagens e vou simplesmente copiar todas elas com meus pequenos atalhos Então eu quero mudar a cor de fundo. Eu já vou pegar minha mensagem. Deixe-me soltar isso para que eu pegue todo o texto. Se você pressionar a tecla shift e os comandos no controle do Windows, poderá selecionar vários textos e fazer uma seleção profunda. Como isso está aninhado, vamos selecionar tudo isso. Se não for selecionado apenas um por um, o mesmo resultado. E eu vou escolher um pouco de branco aqui e vou fazer o mesmo com as manchetes Ok, ótimo. Então, agora vou mudar minha cor de fundo. Estou fazendo isso por meio do preenchimento do quadro principal. Novamente, vou selecioná-lo do meu exemplo aqui. Vamos recortá-lo novamente. Isso parece muito bom. E isso é muito mais fácil do que você pensava, não é? Eu só preciso organizar minha barra de toque aqui embaixo. Eu adicionei alguns ícones para você. Deixe-me dar uma olhada. Os ícones que vamos liderar são a casa, a busca e o coração. Eu já vou copiar esse botão play. Vamos colocar isso aqui. Agora, vamos primeiro configurar nossa navegação. Parece que está tudo bem. Antes de tudo, vou mudar a cor, a cor do fundo. Também vou escolher um exemplo aqui. Depois, selecionarei todos os textos e mudarei para branco. Vou me livrar desses pontinhos que eu tinha aqui. Novamente, sempre segure a tecla shift e comande ou controle. Dessa forma, você pode selecionar vários itens profundamente ou simplesmente ir um por um, se ainda for muito rápido. Agora vou adicionar uma pequena casa aqui. Vou substituir isso pela minha pesquisa. E vou colocar meu botão aqui, ótimo. Agora eu só preciso selecionar essa, porque eu também quero que essa cor de preenchimento se pareça com o meu exemplo. Ok, ótimo, agora eu posso adicioná-lo novamente aqui. Novamente, vou simplesmente copiá-lo. E eu já posso colá-lo aqui. Agora vamos fazer o mesmo com este. Vou pegar essa imagem e colar aqui dentro. Vou me livrar dessa parte de trás e vou usar outro ícone que me foi fornecido. Eu tenho para trás e para baixo. Vamos copiá-los também. Vamos trazê-los aqui. E eu vou colocar isso aqui. Na verdade, vamos dar uma olhada no exemplo porque você pode ver que eu já coloquei isso em uma moldura que abrange toda a largura, só vai facilitar o manuseio posterior Eu só vou ter essa moldura invisível ao redor dela. Ok, ótimo. Agora vou sair como está. Eu só vou prolongar isso por enquanto. Vou selecionar meu texto. Tudo isso está branco agora, posso alterar o preenchimento do fundo novamente. Estou passando por isso bem rápido. Na verdade, é apenas uma referência para você tenha pressa, pegue a solução sugerida e realmente tente descobrir isso em seu próprio tempo. Agora, quero trabalhar nos meus episódios aqui. Eu tenho um botão play que vem com os ícones sugeridos. Também vou dar a isso uma cor de fundo, só para que eu possa ver e lidar com isso um pouco melhor. Por enquanto, vou me livrar desse triângulo e vou usar meu botão Play. Você já pode posicioná-lo bem, não precisa. Em seguida, selecione o texto. Então, vamos mudar o preenchimento para branco. Esse aqui também. Certifique-se de que temos tudo isso. Na verdade, vou deixar isso como está, porque então eu posso preenchê-lo. Vou deixar isso de lado por um momento. Não há lugar tão atrás aqui. Agora eu posso simplesmente pegar essa imagem. Eu posso colocá-lo em minhas formas. Observe que, assim que você vê o nome do quadro , ele é pulado para fora desse quadro O que você pode fazer se quiser adicionar mais um, mas ele continuar aparecendo, basta selecioná-lo Basta fazer uma cópia, verdade, um pouco abaixo. E depois use-o com as teclas do teclado, dessa forma ele permanece dentro. Ou simplesmente reorganize-o em seu painel de camadas. Ok, agora podemos selecionar o quadro principal. Vamos recortá-lo novamente. Podemos colocar nosso bar aqui de volta. A maneira mais fácil é, na verdade copiar um que já está colocado no topo e colá-lo de volta aqui. Deixe-me arrumar isso aqui e colocá-lo bem. Também poderíamos organizar um pouco as distâncias que temos aqui. Agora vamos para a última, que é nossa sobreposição Vou pegar a cor de fundo a partir daqui. Agora observe que esta é uma moldura própria. Vamos chamar isso de sobreposição. Isso contém todas as informações porque, mais tarde , se clicarmos em uma música, passará basicamente passará por aqui e ficará assim. Para essa sobreposição, tenho uma cor um pouco mais clara Também vou escolher isso do meu exemplo. Vamos nos livrar desse aqui. Vamos fazer o mesmo que fizemos aqui. Temos um pequeno botão para baixo que vamos pegar. Eu já vou colocar uma moldura em volta dela. Na verdade, era um retângulo. Vamos pressionar novamente. Precisamos de uma moldura, não de um retângulo. Agora podemos colocar isso ao redor e agora você pode ver que está bem colocado dentro da imagem aqui Vou simplesmente copiar minha imagem de qualquer design existente ou aqui embaixo das minhas amostras. Agora eu posso selecionar meu texto, deixar isso branco aqui. Na verdade, vou usar meu botão Play. Vou colocar isso aqui. Lembra como podemos escalar? Você se lembra exatamente disso? Precisamos pressionar K, o botão Escala. E agora eu posso agregar qualquer valor ou posso aumentá-lo. O que vou fazer é ter o dobro do tamanho ou algo parecido. Ok, ótimo. A última parte está aqui, meu texto. Sempre se certifique de pular da ferramenta de balança novamente. E agora você pode ver seu painel de propriedades gerais. Então, vamos mudar a cor para isso. Agora vou pegar esse pequeno celeiro aqui. Novamente, se você quiser fazer uma seleção profunda, pressione comando ou controle. E agora vou simplesmente selecionar minha cor de alta luz. Vamos ver se esse cinza também, acho que é um pouco mais claro. De alguma forma, perdi meu pequeno círculo. Vou pegar isso do meu exemplo. Você também pode destruir um círculo novamente, e eu vou colocar isso aqui. Agora, se isso for colocado assim, se você já tiver algo assim, é porque esse quadro tem conteúdo recortado Então você pode simplesmente soltá-lo. Acabei de dar um pouco mais de espaço para que minha pequena bolha aqui se encaixasse perfeitamente Como você pode ver, apenas usando molduras de formas gerais, preenchendo algumas imagens e brincando com a cor, criamos um design de interface de usuário bastante impressionante. E, a propósito, não fique frustrado se não for tão rápido quanto o que mostrei neste vídeo Eu venho fazendo isso há um bom tempo. Além disso, estou gravando isso para que eu possa parar e cortar pedaços. E isso é simplesmente um vídeo para ajudá-lo na vida real. Isso simplesmente vai levar mais tempo. Então, sente-se, não se apresse e brinque com isso. 25. COMPONENTES 01 componentes e instâncias no Figma: Vamos conhecer um dos componentes de recursos mais importantes do Figma componentes de recursos mais importantes Depois de começar a projetar, você notará que projetará os mesmos elementos repetidamente. Então, coisas como minha navegação e meus cartões. E, a propósito, lembre-se descriptografar seu quadro principal para ver todo Agora, em vez de refazer esses elementos e tentar acompanhar as alterações, é muito mais útil ter algum tipo de modelo, que, em figma, chamamos de que, em figma, chamamos E a partir desse componente, você pode fazer cópias do Infigma, que chamamos de instância, que você pode usar em todo o seu design . Então, vamos configurar isso. Vou usar essa navegação aqui porque quero adquirir imediatamente o hábito de separar meus componentes do meu design. Para transformar a navegação em componentes, basta selecioná-la, no painel de propriedades do lado direito, clicar no símbolo do componente. Observe como isso resultará em um contorno roxo e um sinal de componente anexado ao nome E você pode ver a mesma alteração no painel Camadas. Outras formas de criar um componente seriam usar o atalho Alt ou Option Command e K, ou simplesmente clicar com o botão direito do mouse e escolher Criar componente Agora, queremos usar uma instância, ou seja, uma cópia desse componente em nosso design. Também há várias maneiras de fazer isso. Você pode criar uma instância simplesmente copiando-a e colando-a ou, o que é um pouco mais rápido, mantenha pressionada e, em seguida, simplesmente retire uma cópia, que você pode colocar dentro do seu design Observe como a instância também tem um contorno roxo, mas tem um formato de diamante vazio Outras formas de criar uma instância são ir para o painel Ativos, que fica ao lado do painel Camadas, e ele verá qualquer componente que você criou nesse arquivo ou posteriormente qual você se conectou a uma biblioteca externa. Você pode simplesmente retirar esse componente e colocá-lo em seu design. Então, vamos nos livrar de nossa navegação na página Artigos e depois substituí-la por nossa instância também. Além do painel Ativos, você também pode usar a função de pesquisa, ir para ativos e simplesmente pesquisar pelo nome. Vamos fazer o mesmo com nosso cartão. E desta vez, eu quero usar um atalho. Se você esquecer um atalho, basta passar o mouse sobre o símbolo do componente e ele será exibido aqui Então, no meu caso, essa é a opção Command K. Agora vamos pular para o painel Ativos, onde posso ver que meu cartão foi salvo como um componente e posso colocá-lo em meu design Eu também quero substituir a outra placa, então vamos nos livrar dela. E, a propósito, eu também posso simplesmente copiar diretamente de uma instância existente. Se você mantiver a tecla Shift pressionada e a tecla Alt, copiará logo abaixo na mesma linha. No entanto, ele também copia o conteúdo do meu componente. Então, o que vou fazer é normalmente ter meu componente bastante neutro, então eu me livraria dessa imagem aqui e vamos substituí-la clicando em mais por apenas um preenchimento neutro. E então minha manchete, eu também vou chamar de manchete Portanto, geralmente tento deixar todos os meus componentes bastante neutros e, em seguida, preencherei as informações, o conteúdo do meu design. Então, vamos descobrir como fazer isso. 26. 02 Sobreposição de instâncias: Vamos aprender o que e como sobrescrever em nossas instâncias. Então, aqui temos vários componentes e usamos instâncias desses componentes em nosso design. Você pode ver isso dando uma olhada no painel de camadas e pode ver a forma de diamante vazia. Se você quiser ver o componente original, no lado direito, ao lado do nome do componente, clique em Ir para o componente principal e ele pulará para o componente original que você usou para configurar essa instância. Portanto, geralmente deixo meus componentes bastante neutros e descritivos. Mas no meu design, eu obviamente quero adicionar algum conteúdo, então eu quero transformar esses fundos cinza em imagens, e eu quero adicionar um título Então, para o meu título, eu poderia simplesmente clicar duas vezes e depois sobrescrevê-lo Eu posso fazer o mesmo com minhas imagens. Posso simplesmente preencher e depois transformar em imagem e importá-las, ou posso usar meu atalho com esse comando shift e K, e vou importar essas imagens em massa Agora posso simplesmente colocá-los nas formas. Eu quero a nuvem aqui também. Vou selecionar isso com meu comando de atalho Shift e C, que copiará um PNG, e agora posso simplesmente colá-lo na forma aqui No entanto, pode haver alguns elementos que você realmente não deseja que sejam substituídos Por exemplo, esse botão de voltar aqui, eu sempre quero que ele seja chamado de volta. Assim, posso simplesmente selecionar meu componente e, em seguida, selecionar o texto que eu quero manter fixo. No meu painel de camadas, se eu passar o mouse sobre isso, posso ver esse pequeno cadeado e depois bloquear essa camada momento, no design, ninguém conseguiria clicar e alterar esse texto. Agora, o melhor de configurar seu design com componentes e instâncias é que, mesmo que você estivesse substituindo isso, ainda poderia projetar em seus componentes Por exemplo, aqui, talvez queiramos alterar um pouco a configuração. Talvez queiramos aumentar o tamanho desse texto, e você pode ver que todas as instâncias seguirão. Além disso, algumas mudanças mais drásticas no layout. Digamos que queremos mover nosso menu para a esquerda, para que todas as instâncias sigam o exemplo. Dois pequenos comentários, você pode estar se perguntando por que esse componente está aqui, esse componente traseiro configurado em toda a largura, por que ele abrange toda a largura e tem todo o espaço ao redor? Você não precisa fazer isso assim. Você também pode simplesmente pegar o texto e transformá-lo em componente, e esse é o seu botão. Eu gosto muito desse jeito. Dessa forma, eu já sei que essa é a distância. Só preciso colocá-la logo abaixo da minha navegação e não preciso me preocupar com a distância entre a imagem sendo a mesma se eu criar mais páginas. Mas fique à vontade para encontrar sua própria maneira de configurar isso para seu design. A outra coisa que você pode estar se perguntando é: e o texto? Isso também não precisa ser um componente? Bem, você pode configurar o texto, como, por exemplo, aqui, onde faz sentido quando o texto é um link, ou isso pode ser uma introdução, onde você pode adicionar mais detalhes, talvez ícones ou algo parecido Você pode ter uma composição definida e transformá-la em um componente. Mas apenas copiar o texto, apenas um texto padrão em seu design, como esse, não precisa ser um componente. 27. 03 O que substituir e o que não substituir: O que você pode sobrescrever e o que deve substituir. Agora, o Figma oferece muitas opções para substituir. Você pode sobrescrever cores, imagens, texto, estilos, opacidade, efeitos como sombras e desfoques e visibilidade Mas só porque você teoricamente pode sobrescrever, não recomendo substituir tudo isso Geralmente, recomendo substituir apenas texto e imagens, ou seja, qualquer coisa que venha de um banco de Se você quiser outras alterações, como a cor de fundo , essa seria uma nova versão desse componente. Então, eu configuraria outro componente para isso. Posteriormente, você pode combinar essas versões em um conjunto de componentes com variantes. Vamos abordar isso em um momento posterior do curso. 28. 04 Revertendo componentes e substituições: Inversão de componentes e substituições. Aqui eu tenho um componente e uma instância, e você pode ver que, na minha instância, eu anulei algumas coisas, como a imagem, o traçado e o plano Agora, e se eu não estiver feliz com isso? Verifique se você selecionou a instância e, em seguida, no painel de propriedades à direita, você pode ver o nome da instância e, mais à direita, você pode ver três pequenos pontos, quanto mais menu de ação Aqui dentro, você vê as opções de redefinição. Podemos simplesmente redefinir elementos individuais, como, por exemplo, redefinir o traçado, ou também podemos selecionar o cartão e redefinir tudo. Vamos ver o que mais encontramos neste menu. Então, o que também poderíamos fazer é pular para o componente principal, que significaria que acabaríamos aqui. Poderíamos criar um componente adicional para isso. Então, se eu clicasse aqui, você pode ver que isso seria apenas mais um componente. Ao começar, tenha muito cuidado para não usar isso em uma instância existente porque o que você esperaria é outro componente da placa, mas o que ele faz é empacotar a instância dentro de outro componente chamado cartão, então está aninhando-a, e provavelmente não é o que você está procurando Portanto, a menos que você esteja realmente confiante com os componentes, tente ficar longe deles por enquanto. Podemos separar a instância. Agora você tem que ter cuidado com este. Não separe nenhuma instância se você estiver trabalhando em um sistema de design No entanto, se você está apenas explorando seu próprio design e indo e voltando entre as coisas , não há problema em usá-lo. Mas o que acontece, digamos que você tenha apenas um componente e o tenha criado por acidente. Agora, não há nenhuma maneira no painel de propriedades voltar apenas ao estado original de um quadro. O que você pode fazer é extrair uma instância Excluir o componente original. Selecione a instância e observe como isso também oferece a opção de restaurar um componente. Essa é uma notícia muito boa, se você excluir um componente acidentalmente, basta clicar aqui e ele restaurará seu componente original. No momento, não é o que queremos. O que queremos, só queremos a moldura original disso. Nesse caso, agora você usaria instance e, em seguida, teria apenas um quadro simples novamente. 29. 05 componentes de aninhamento: A melhor coisa sobre os componentes do Figma é que você também pode agrupá-los. O aninhamento significa que podemos ter dois componentes e, em seguida, criar uma instância de um componente e colocá-la em outro componente Vamos dar esse exemplo aqui. Eu tenho uma navegação, um formulário de login e apenas um cartão padrão. Vou transformar esses três itens em componentes. pequena dica: quando você tem mais de um elemento selecionado, na lista suspensa de mais opções, você pode criar vários componentes ao mesmo tempo. Agora posso arrastar instâncias e usá-las em meu design. Vou usar essa navegação aqui e esse cartão como exemplo. Mas observe como estou reutilizando o mesmo botão em todos os componentes Portanto, use uma boa prática para retirar o botão e criar um componente próprio para o botão. Agora, excluirei os botões únicos anteriores que eu estava usando e os substituirei por uma instância do meu componente de botão que acabei de criar. Agora posso sobrescrever o texto, então cadastre-se aqui na navegação, faça login e assine meu cartão de workshop E como você pode ver, tudo isso se reflete no lado direito do meu design. Agora, vamos mudar nosso componente principal do botão. Um pouco, vamos adicionar um pouco de raio e mudar a cor. Como você pode ver, qualquer alteração no componente principal será refletida em todo o design. Não importa se está aninhado em um componente ou se é uma instância de um componente aninhado 30. 06 conjuntos de componentes com variantes: Variantes Figma. Às vezes, você pode achar que precisa de variações de um componente. Aqui, tenho um exemplo em que tenho uma versão padrão de um cartão e uma versão flutuante de um cartão A única diferença aqui é que isso tem uma cor de fundo. Então você pode dizer, bem, eu poderia simplesmente adicionar essa cor de fundo na minha instância e sobrescrevê-la. Por favor, adquira o hábito de não sobrescrever as alterações do layout ou as mudanças na variação Só queremos sobrescrever alterações no conteúdo, como imagens ou texto Essa é uma nova variação desta carta. Portanto, ele precisa ser seu próprio componente para que os desenvolvedores posteriores vejam que é isso que eles precisam programar e planejar. Agora, em teoria, você poderia usá-lo assim e ter dois componentes separados. Mas há uma boa camada de organização extra no Figma, chamada de conjunto de componentes com variantes, e isso permite agrupar diferentes versões do mesmo componente Observe como estou usando a convenção de nomenclatura de barra invertida. Eles já têm o mesmo nome, são chamados de barra frontal padrão e, em seguida, passe o mouse sobre barra frontal da carta A primeira coisa aqui seria o nome do componente e, em seguida, o segundo nome após a barra, que seria a propriedade Se eu selecionar essas duas cartas agora, posso ver no lado direito que os componentes se combinam como variantes. Se eu clicar aqui, você verá que Figma cria esse contorno pontilhado roxo Agora, a melhor coisa sobre isso é agora você pode simplesmente retirar uma instância. Ou você pode simplesmente usar o painel de ativos , bem como com qualquer outro componente. Ele mostrará a primeira variante. Se você clicar nessa instância , no painel de propriedades do tamanho direito, poderá ver uma pequena lista suspensa. Com esse menu suspenso, agora você pode alternar entre as diferentes variantes em seu conjunto de componentes. Agora, isso é simplesmente chamado de propriedade um. Você também pode clicar no seu conjunto de componentes e, em seguida, clicar duas vezes na propriedade, e agora você pode chamá-la, por exemplo, de estado. Você pode adicionar mais variações. Digamos que você queira algo como um estado desativado Basta abrir um pouco e depois pular aqui para sua primeira ou segunda variante, e você verá esse pequeno sinal positivo aqui. Clique nele e ele criará outro para você. Agora, o que podemos fazer é simplesmente dar 50% de opacidade e chamar isso de Agora, o que eu preciso fazer é nomear o estado. É automaticamente chamado de estado três, mas vou mudar isso para inativo Agora, se eu selecionar minha instância, você verá que, no menu suspenso, agora posso escolher entre o novo estado e os dois estados que criei anteriormente. A propósito, se você ainda não transformou seus elementos em componentes, também há um atalho, para que você possa selecionar vários elementos e, em seguida, obter uma pequena lista suspensa ao lado do sinal do componente na barra superior Use esse menu suspenso e selecione criar conjunto de componentes. Isso criará o conjunto de componentes imediatamente. Agora, eu não usei a convenção de nomenclatura correta com a barra invertida Eu também posso fazer isso agora, então eu posso nomear este cartão. Então eu entro e aqui eu tenho minha propriedade, e eu quero chamar isso de padrão, e eu quero que minha segunda chamada HVA E eu posso clicar no meu conjunto de componentes novamente para mudar isso para o estado. Agora, se eu obtiver uma instância, você verá que ela funciona exatamente como antes e tem meu Hova e o estado padrão incorporados 31. 07 Mover componentes para sua própria página 2: Como podemos mover nossos componentes para sua própria página? Aqui eu tenho meus componentes e uso instâncias desses componentes em meu design aqui. Não há problema em armazenar seu componente ao lado seu design enquanto você ainda está trabalhando em seus projetos. Mas quando você terminar e souber como deseja configurar seus componentes, é hora de limpar um pouco e encontrar uma área própria designada para seus componentes. Existem técnicas mais avançadas e você pode armazenar seus componentes em bibliotecas externas. Mas em um pequeno projeto, por enquanto, queremos apenas armazená-los em sua própria página. Então, vá para o canto superior esquerdo do seu arquivo e clique no botão Mais. Isso abrirá uma nova página e você poderá chamar essa página de componentes. Podemos voltar para nossa página original, que agora também podemos chamar de design. E agora, se simplesmente copiássemos esse componente, pulássemos para a página do componente e o colássemos , isso obviamente colaria uma instância. Então, não queremos isso. Então, como podemos movê-lo da página de design para a página de componentes? O que você precisa fazer é usar o botão direito do mouse e, em seguida, aqui você pode ver mover para a página, e então isso mostrará a página que você acabou de criar, ou uma técnica melhor é realmente usar o comando e o X, e isso vai cortar o componente. Agora você pode ir para a página do componente e colar o componente aqui. Agora, se voltarmos para nossa página de design, podemos ver que, se clicarmos nessa instância aqui e depois clicarmos no sinal do componente ao lado do nome da instância, ele nos levará ao componente principal e saltará para a nova página. Ótimo. Vamos fazer isso também com o resto dos componentes. Vamos selecionar todos eles, comandar um x para recortá-los e, em seguida, colá-los dentro da nossa página de componentes. Se voltarmos ao design, você verá que todas as conexões estão intactas A propósito, às vezes você vê que as pessoas adicionam pequenos ícones na frente do nome. Você pode simplesmente adicioná-los pressionando o comando de controle e a barra de espaço e, seguida, aqui você pode encontrar ícones diferentes. Aqui estão alguns que eu usei antes para design. Eu gostaria de usar algo como esse arco-íris. Para meus componentes, na verdade, se você se aprofundar nos seus emoticons, acho que por aqui, você encontra um sinal de componente ou algo que parece um sinal de componente, e eu gosto muito de usar esse 32. 08 Como manter os componentes organizados: Manter os componentes organizados. Digamos que você esteja trabalhando em seu design e tenha criado uma página separada para seus componentes. Agora você tem todos os seus componentes aqui, mas agora eles estão um pouco bagunçados Então, vamos nos certificar de que nós mesmos, outros designers e desenvolvedores que entrariam em nosso arquivo, entenderíamos o que está acontecendo. Então, primeiro, vamos agrupá-los um pouco. Por aqui, tenho meus ícones gerais. Então eu tenho meu cartão. E aqui, eu tenho meus componentes que têm a ver com navegação. Assim, você pode ver o cabeçalho, a barra de guias, os elementos aninhados e esses ícones, que são apenas os ícones da barra gravada E depois, mais adiante, eu tenho meus botões. Quero criar uma seção própria para cada um deles. E não, estamos usando seções e não molduras para armazenar nossos componentes. Você encontra seções na barra de ferramentas ao lado dos quadros ou pode simplesmente usar um atalho shift e S e, em seguida, desenhar suas seções ao redor dos clusters que criou E eu posso clicar duas vezes no nome da seção e agora posso nomeá-la. Vou nomear este aqui como navegação. Vamos acessar o painel Ativos e ver o que aconteceu e garantir que você tenha a visualização de subpastas ativada Vou mudar para o formato de lista, para facilitar a visualização, e você pode ver que todos os meus componentes estão listados apenas na camada superior, e você pode ver que foi criada uma pasta para meus itens de navegação. Também vou fazer isso com o resto dos meus componentes. Vou apertar Shift S e vou desenhar uma seção ao redor da minha carta. Vou fazer o mesmo com meus ícones e um último com meus botões. Então, agora dê uma olhada no meu painel de ativos aqui. Se eu agora renomear isso, então eu tenho um cartão, tenho ícones e tenho botões Então, ao criar essas seções, você pode ver que, no meu painel de ativos, agora tenho subpastas e é mais fácil encontrar meus componentes Outra coisa que adoro nas seções é que, se você selecionar o nome da seção, poderá ver esse pequeno ícone ao lado que diz pronto para desenvolvimento. Se você clicar nela , verá essa bolha verde aparecer Agora, se passarmos para o modo surdo, então é aqui que seus desenvolvedores visualizariam seus projetos, você pode ver que isso cria uma pasta antiga informando aos desenvolvedores quais de seus componentes ou designs já estão prontos para as próximas etapas do desenvolvimento Portanto, adquira o hábito de armazenar seus componentes em sua própria área designada em seções, que você pode marcar como prontas para desenvolvimento. Para começar, armazenamos nossos componentes em uma página separada. Mas se você tem um plano profissional ou superior e está trabalhando em uma equipe maior, talvez também veja que os componentes estão armazenados em um arquivo separado, e estamos usando as chamadas bibliotecas de equipe compartilhadas para trabalhar com eles. À medida que nosso sistema está ficando cada vez mais avançado, você também pode ver que pode adicionar mais informações a essas seções. Não fique muito estressado com isso. Comece aos poucos e organize em seções Em qualquer informação adicional, você sempre pode adicionar a essas seções. 33. Componentes da parte 2: Se você se sentir desconfortável com componentes, instâncias e variantes , agora podemos começar. Na segunda parte do projeto do nosso curso, queremos transformar o design que criamos em um design reutilizável baseado em componentes Você pode usar qualquer solução da primeira parte ou simplesmente copiar minha solução sugerida aqui, que foi o que fiz por você. que eu faço é examinar meu design e , em seguida, simplesmente retirar os elementos que acho que fariam sentido como componentes reutilizáveis Agora, não há ninguém certo ou errado, depende de você, e você também pode mudar isso ou, no futuro, agrupar itens de forma diferente. Mas precisamos começar em algum lugar. Eu vou te mostrar como eu abordo isso. Eu fui pouco a pouco. Por exemplo, comecei com minha seção de heróis, porque estou reusando essa imagem aqui. Na verdade, tirei essa parte interna. Eu selecionei tudo isso. Deixe-me realmente chegar um pouco mais perto aqui. Eu seleciono a imagem, o texto e o botão, pressiono o comando G ou clico com o botão direito do mouse e me transformo em um quadro. Agora estou desmontando isso, você pode ver aqui embaixo, acabei de chamar essa informação. Então isso é o que eu criei aqui. Então eu fiz o mesmo com os outros elementos. Tirei a barra superior depois a barra inferior para a sobreposição. Então, isso é isso aqui. Eu passei por isso pouco a pouco. Então essa imagem, então eu tenho minhas cartas, obviamente eu toco meus elementos aqui. Na verdade, depende de você como você deseja configurar isso aqui. Por exemplo, eu uso isso como um componente. Você também pode ter isso como um componente. E texto solto, como eu disse, não há certo e errado. Acho que é um pouco mais confortável, pois provavelmente vou voltar a usar essa peça um pouco. E eu decidi então fazer o mesmo com a barra de jogo. Então, toda essa área de controle é um componente. Novamente, mais tarde, você poderia ter isso como um componente aninhado Como um componente aninhado, depende de você, mas vamos simplificar por enquanto Agora, neste arquivo, tenho minha solução final. Se você acessar as páginas, verá o design final e também verá uma página de componente. Então, aqui você pode ver todos os componentes, como eu os organizo, configurei, nomeei e assim por diante. E é isso que estou usando no meu design final. Portanto, sugiro que você não se confunda com meus componentes ao simplesmente copiar tudo isso para um novo arquivo. Na verdade, vamos selecionar meus exemplos e extrair possíveis componentes que eu criei. E vamos pular para um novo arquivo de design e simplesmente colar isso aqui. Eu gosto muito de ter meu plano de fundo um pouco mais claro. E, a propósito, você pode mudar isso. Se você clicar na tela, então você pode ver aqui na página, você pode mudar a cor. Eu só acho isso um pouco mais confortável. Agora, você pode ter seu próprio arquivo com seus componentes sem se confundir com a mesma nomenclatura. Eu posso selecionar cada um deles individualmente e depois transformá-los em componentes, ou posso selecionar todos eles. Clique em uma pequena lista suspensa e crie vários componentes. Não é um conjunto de componentes, isso é outra coisa que sabemos agora, mas vários componentes. Agora, alguns desses componentes eu estou aninhando, por exemplo, os ícones, eu só preciso limpá-los porque este não vai saber que você quer que eles sejam aninhados Vou apenas extrair aqui uma instância desta , desta. Agora vou substituir esses elementos aqui pelos equivalentes aninhados, mantendo tudo limpo e limpo Nós faríamos isso e, para todos os ícones, deixe-me dar uma olhada, por exemplo, no nosso botão play aqui. Também substituiríamos isso por uma instância, e temos a mesma aqui. Então você já pode ver que gostaríamos de reutilizar, o que é muito bom, se mudássemos alguma coisa nesse botão Play. Isso será o mesmo em todos os lugares. Este ainda pode ser um botão de reprodução em escala, ou você pode tê-lo como um componente próprio, novamente, depende de você Ok, agora precisamos configurar esses designs, novamente com os componentes. Agora, isso parece entediante, mas na verdade é bem rápido. Então, vamos fazer isso. Vamos nos livrar disso, e eu simplesmente vou arrastar nossa capa até aqui e depois nossas informações. E então eu vou fazer o mesmo aqui. Vou deletar a dose e vou substituí-las por instâncias. O que precisamos fazer, é claro, é colocar nossas imagens novamente. Além disso, provavelmente farei isso um pouco mais arrumado do que estou trabalhando Mantenha minhas distâncias e tudo mais, mas faça isso só para te mostrar rapidamente. Faça com que seja assim. Precisamos de nossas imagens. Vamos voltar aqui. E podemos simplesmente copiar nossas imagens para esse arquivo. Nós os temos em mãos. Porque o que eu faria de qualquer maneira, provavelmente vou me livrar das imagens no meu componente Além disso, tenha cuidado para sempre pegar a imagem e não nossa pequena sobreposição de gradiente que fizemos Agora, precisamos adicionar um preenchimento. Isso é realmente um pouco entediante. Precisaríamos colocar essas imagens novamente. Nós, em nossos componentes, os teríamos bonitos e neutros. E então, em nosso design, teríamos que refazer nossas imagens. Mas, assim, podemos configurar nosso design rapidamente , pois você verá qualquer alteração obviamente, porque agora isso é baseado em componentes, basta seguir e será muito fácil manter tudo atualizado. Então, vamos pegar nossa barra de abas também. Você pode ver, assim, que agora tenho meu mesmo design baseado em componentes. Eu faria o mesmo para que minhas outras páginas funcionassem. É bom ter tudo em uma página, mas lembre-se que queremos que nossos componentes sejam armazenados em páginas. Certifique-se de criar uma página própria chamada componentes. Agora você pode enviar seus componentes para lá, selecionando todos eles clicando com o botão direito do mouse e indo para a página e os componentes. Ou você pode recortá-los, o que é comando e x não comando e cópia. Deve ser x. E agora você pode colá-los aqui, eles manterão as conexões. Por exemplo, se você estiver clicando aqui, agora você pode clicar no pequeno ícone do componente e ele irá para o seu componente principal na página. Lembre-se de que queremos armazenar nossos componentes em seções. As seções estão aqui embaixo das molduras. Queremos criar seções, por exemplo, 14 ícones e, em seguida, colocar todos os nossos ícones aqui, depois um para navegação e assim por diante. Você pode acessar seu arquivo de exercícios em Componentes e guias. Aqui você terá uma ideia de como eu organizo meus componentes. A propósito, estou usando um pequeno sistema de tratamento de arquivos que criei. Você não precisa usar isso, mas você pode usar isso. Eu tenho algumas manchetes e tenho pequenas bolhas aqui. Assim, posso alternar se algo está ligado ou em andamento. E também tenho alguns pequenos nós fixos para adicionar comentários. Além disso, lembre-se de que temos conjuntos de componentes aqui. Agora eu organizei nossos componentes, nós os criamos. E eu tenho minha barra traseira, minha barra over liber, bem parecida, então eu posso combiná-las como variantes Por exemplo, se eu os usar em meu design , você pode ver aqui que estou fazendo uma pequena lista suspensa para ficar entre eles. Você não precisa fazer isso. Mas é bom se você tiver itens semelhantes e quiser organizá-los conforme discutimos em nossas sessões anteriores. No final das contas, nosso design é inteiramente composto por instâncias, exceto talvez algum texto aqui e ali. E lembre-se de que, nos casos em que podemos sobrescrever, estávamos substituindo o preenchimento de imagens antigas e, portanto, adicionando imagens mais antigas E também podemos fazer o mesmo com texto. Podemos, por exemplo, mudar o nome dos álbuns aqui se você quiser esses pequenos três pontos aqui. Se algo for muito longo, você poderá fazer isso. Vamos voltar aos nossos componentes. Você pode fazer isso selecionando o nome e depois acessando os extras. E aqui embaixo você encontra o texto que é cortado com pequenos pontos. Lembre-se de que qualquer alteração em um componente, por exemplo, invertê-lo aqui, resultará em uma alteração na instância. 34. 01 Introdução às variáveis: Introdução às variáveis. Uma variável é um nome simbólico para um dado. Então, é como um espaço reservado. Digamos que temos uma variável x e a atribuímos à cor vermelha. Podemos então usá-lo em todo o nosso design. Assim que mudamos nossa variável x para a cor azul, mantemos o nome da variável, mas alteramos o valor da variável , tudo em nosso design seguirá. Ainda usamos componentes. Temos nossos componentes, mas dentro e ao redor desses componentes, há muitas coisas, como espaçamentos, cores diferentes, que vamos usar Para tudo isso, vamos usar variáveis. Resumindo, os componentes são objetos reutilizáveis. Variáveis são propriedades reutilizáveis que podemos aplicar a esses objetos Parece tudo ainda um pouco abstrato. Não se preocupe. Vamos começar e experimentar nós mesmos, e ficará muito, muito mais claro 35. 02 Trabalhando com variáveis de cores: Trabalhando com variáveis de cor. Em nosso design, geralmente temos uma paleta de cores definida e queremos garantir que tudo em nosso design siga essa paleta Agora, no meu design aqui, você pode ver que estou usando vermelho, mas alguns tons de vermelho estão um pouco errados. O que eu poderia fazer agora é selecionar todos os elementos diferentes, usar meu seletor de cores e, em seguida, entrar e escolher a cor correta No entanto, isso seria muito entediante. Em algum momento, talvez eu também queira mudar esse vermelho aqui para outra cor. É também por isso que não chamo minhas cores pelo nome, então não as chamo de laranja, vermelho e azul. Eu lhes dou nomes semânticos, para que eu possa sempre alterá-los Então, eu os chamo de primários para as cores da minha marca e dou a eles um número. Isso me dá espaço suficiente para, por exemplo, adicionar outro tom entre o 20 e o 50, e eu tenho alguns tons neutros. Aqui também, eu poderia adicionar mais tons de nota entre 30 e 90. Você também pode nomeá-los como qualquer outra coisa, por exemplo, call to action ou background. Apenas certifique-se de que seja semântico. Agora, para reutilizar essas cores, vamos configurá-las como variáveis, que podemos aplicar em nosso design e componentes Para abrir suas variáveis, certifique-se de clicar na área cinza do Canvas e, no lado direito, você pode ver as variáveis locais. Se você clicar no ícone, ele abrirá um modo. Para criar uma variável, clique em Criar variável e escolha a cor. Agora vou simplesmente chamar isso de 120. Agora posso usar meu atalho para criar mais. Vou segurar Shift e enter, e vou chamar isso de 150, vou pressionar Shift e enter novamente, e vou para 80. Você também pode usar o menu suspenso aqui para criar mais variáveis. Agora, para adicionar um valor, basta clicar nesse campo aqui e, em seguida, escolher um seletor de cores e escolher seu valor na folha de estilo que você configurou ou diretamente nos seus designs Vamos também criar nossos neutros. Eu vou ter outro com 90. Em seguida, vou usar meu atalho novamente e vou usar 3010 e zero E agora estou fazendo o mesmo. Eu simplesmente vou escolhê-los da folha de estilo que eu já configurei. Se você passar o mouse sobre sua variável, no lado direito, verá o sinal de variável adicionada e poderá clicar nesse pequeno ícone aqui e agora poderá adicioná-lo, adicionar mais informações e também definir o escopo Escopo significa que ele estará disponível somente para determinados campos. Ótimo. Então, agora criamos nossas variáveis, agora vamos aplicá-las. Assim, eu poderia selecionar qualquer elemento e, no menu Arquivo, clicar no ícone Estilos. Ainda é um pouco estranho que estejamos usando o ícone Estilos para usar variáveis. Eu esperaria que isso mudasse no futuro. Por enquanto, vamos clicar aqui para abrir nossas bibliotecas, e aqui você encontra todas as variáveis que você configurou. Observe que as variáveis têm um s e os estilos têm um círculo. Podemos clicar aqui e isso aplicaria a variável de cor. Agora, eu poderia fazer isso em todo o meu design, o que, novamente, seria muito entediante Lembre-se de que queremos trabalhar com componentes e você pode ver que meu design está configurado em instâncias. Então, vamos voltar aqui. Vamos redefinir esse preenchimento e passar para os componentes que usei para criar esse design. Eu coloco o design ao lado do meu componente, para que você possa ver isso melhor. Normalmente, você teria isso em uma página própria ou até mesmo em um arquivo externo. Então, o que queremos fazer agora é examinar todos os nossos componentes e garantir que nossas variáveis sejam aplicadas, porque você também pode ver que algumas delas, como, por exemplo, a data máxima do meu botão, nem mesmo está visível no meu design, mas ainda assim eu quero fornecer as informações sobre a variável correta aqui Vamos apenas verificar porque aqui podemos ver que atualmente nada é aplicado. Agora, poderíamos examinar esses componentes um por um, para que eu pudesse selecionar o plano de fundo aqui, aplicar uma variável e, em seguida , selecionar o texto. Mas, na verdade, existe uma maneira muito boa de fazer isso. Então, basta selecionar tudo isso e, em seguida, você pode ver aqui as cores da seleção. Agora posso ver aqui que até tenho um estilo antigo aplicado e quero usar minhas variáveis. Eu também tenho uma mistura de cores aplicada, então você pode ver que eu tenho diferentes tons de vermelho, então eu quero ter tudo isso alinhado com minhas variáveis O que vamos fazer é, por exemplo, se tivermos um estilo antigo, basta separar esse estilo E agora vamos falar um pouco de vermelho. Então, vou dizer que essa é branca e, em seguida, vou selecionar uma variável para cada uma dessas cores. Como estou usando a seleção, esse é o esboço do meu conjunto de componentes Vou deixar esse em paz. Como estou usando essa seleção, ela realmente obterá todas as cores para mim. E aqui vamos nós. O último, vamos nivelar o vermelho do nosso pequeno marcador E agora vamos dar uma olhada no nosso design. Ao selecionar qualquer elemento no meu design, você pode ver que a variável foi aplicada. Este é esse pequeno quadrado, você pode ver tanto na cor quanto no nome. À medida que corro por aqui, mesmo descendo até o aninhamento mais profundo, dá para ver que tudo está aplicado corretamente Pode haver alguns elementos em minhas cavas aqui, por exemplo, esse texto que não é um componente O que você pode fazer é selecionar essa moldura inteira e, em seguida, ver algumas que sobraram e também podemos limpá-las. Se em algum momento você quiser editar suas variáveis, basta clicar no plano de fundo do Canvas, abrir as variáveis locais e alterar o valor da variável. Todo o seu design seguirá. 36. 03 Organização com coleções e grupos variáveis: Organizando suas variáveis, coleção e agrupamento. Então ele pode ver que eu tenho todas as minhas variáveis. Mas na minha folha de estilo, eu realmente os categorizo, então tenho primários, secundários e alguns neutros Agora, em vez de ter todos eles em uma linha, quero adicionar um pouco de ordem, e posso fazer isso com o agrupamento Para agrupar suas variáveis, basta selecioná-las, segurar a tecla Shift e clicar com o botão direito do mouse, e agora você obtém um menu e pode escolher agrupar. Você pode ver o grupo à esquerda, clicar duas vezes nele e dar um nome a ele. Então, vou nomear isso como primário. Se eu quiser ver todas as minhas variáveis novamente, basta clicar na parte superior. Eu vou fazer o mesmo com o meu azul. Vou chamar isso de secundário. E eu volto para ver tudo, e vou fazer isso com meus neutros também, então vamos selecionar todos eles com a tecla shift e clicar com o botão direito do mouse, e agora vamos chamá-los de neutros Ok, então isso é organizar minha coleção em si, mas eu também posso ter várias coleções. Então, o que isso significa? Esta é uma coleção que tem todas as minhas cores. No canto superior esquerdo do seu modo de variáveis, você pode ver uma pequena lista suspensa Se você clicar nisso, primeiro, vamos renomear essa coleção e chamá-la de cores da marca Agora eu quero adicionar outra coleção. Vou clicar em Criar coleção. Nesta coleção, quero salvar meu tamanho. Pode ser o espaçamento, pode ser o tamanho de certos cartões ou elementos Vou simplesmente chamar isso de tamanho único. Agora posso adicionar mais variáveis aqui e, desta vez, vou usar números em vez de cores. Eu posso, por exemplo, configurar meu sistema de espaçamento Eu poderia dizer que o menor espaçamento, que é oito, na verdade é chamado de X S, e então eu posso criar outro e devo chamá-lo de S, e isso seria 16 Eu também poderia adicionar números que poderiam ser a largura do meu cartão, eu pudesse ligar para este cartão e, por exemplo, ter um cartão, digamos, 320. Que tipo de coleções, quantas e de que forma você precisa depende puramente de sua configuração e projeto Normalmente, você precisa pelo menos de uma coleção de cores. Se você quiser voltar para sua coleção de cores, basta ir até o menu suspenso e voltar às cores da sua marca, e você pode vê-las e editá-las aqui. 37. 04 Variáveis de tamanho e espaçamento: Variáveis de tamanho. Também podemos trabalhar com variáveis de tamanho no Figma Para aplicá-los, basta selecionar um elemento e, no lado direito, no painel de propriedades, se você passar o mouse sobre os campos, verá um símbolo de variável aparecer onde quer que você possa aplicá-los Então, poderíamos adicionar nossa variável para uma largura e também para coisas como raio Agora, se você aplicar esses tamanhos a qualquer design, notará que isso realmente não funciona porque o design não responde. Portanto, para que isso funcione, você precisa configurar seus componentes como também um componente de layout. Isso é algo que faremos em um momento posterior. Então, quando começarmos a adicionar o layout automático, você notará que é aqui que a mágica das variáveis e do tamanho acontece Porque agora, à medida que aplicamos nossos tamanhos, o cartão inteiro responderá. Além disso, podemos adicionar todo o preenchimento e as margens com nossas variáveis Isso significa que, à medida que definimos esse preenchimento e margem e redimensionamos nossos componentes, tudo permanecerá no Mas falaremos mais sobre isso daqui a pouco. 38. 05 E os estilos?: Então, para que servem os estilos no Figma? Você deve ter notado que, no Figma, você pode configurar variáveis, mas também pode configurar estilos Em alguns casos, como, por exemplo, com cores, é quase idêntico criá-las e consumi-las. Portanto, é muito confuso entender por que devemos usar um ou outro Vamos entender isso melhor. Usamos variáveis para valores únicos, ou seja, coisas como cor ou tamanho. Os estilos, por outro lado, usamos para manter vários valores juntos. Pense neles como uma classe CSS. Uma variável também pode ser um elemento em um estilo. Digamos que eu criei uma variável chamada tamanho variável S e que tenha o valor de 24. Eu criei um estilo chamado Headline Strong. Agora meu estilo é composto por vários valores. Só para citar alguns. Isso pode ser tipo de letra, tamanho, altura e peso da linha Atualmente, eu configuro todos eles manualmente. Então eu digo que o tamanho é definido como 24. O que eu também poderia fazer é usar uma variável aqui. Assim, posso definir o tamanho para o tamanho variável, que no momento também é 24, então não faria diferença. No entanto, em um sistema de design mais sofisticado, isso seria muito útil porque o que aconteceria é que eu teria vários tecidos Então, digamos que eu tenha o mesmo título, mas uma versão flexível, e eu poderia usar a mesma variável Agora, se em algum momento eu quiser que o tamanho de todas essas manchetes mude, eu só precisaria mudar meu tamanho variável S e tudo aconteceria Não há certo ou errado. Você pode usar nenhuma ou tão poucas variáveis quanto precisar em seus estilos ou fazer com que todas elas variem o quanto você precisar. Eu recomendaria que, se você está apenas começando, mantenha as coisas simples , caso contrário, isso pode ser muito difícil. É realmente algo que você usaria em um sistema de design mais sofisticado. Outras áreas do Figma, onde usaríamos estilos, são, por exemplo, efeitos Portanto, em qualquer forma ou moldura no painel de propriedades do lado direito, você pode ver os efeitos, clicar em mais e escolher o efeito. Então você tem coisas como queda, sombra, desfoque e assim por diante Você também pode clicar no ícone Little Sun aqui e alterar qualquer um desses valores. Em todos os estilos, se você passar o mouse sobre o campo de entrada, verá o pequeno símbolo da variável aparecer, clique nele e poderá substituí-lo por qualquer variável criada anteriormente Agora, assim que você gostar do efeito, poderá salvá-lo como um estilo. Clique no símbolo Estilo e, em seguida, clique no botão Mais. Agora você pode nomear seu estilo. Você também pode adicionar uma descrição e depois criar o estilo. Se você clicar na área cinza do Canvas , verá uma visão geral dos estilos que você salvou atualmente neste arquivo. Em qualquer outro objeto, agora você pode simplesmente ir ao menu Efeitos, clicar com o botão direito em Estilos, selecionar o estilo e aplicá-lo. Já encontramos estilos de grade. Para lembrá-lo, você pode aplicar uma grade ao seu layout. Clique no ícone para transformá-lo em uma grade de layout. Assim que você gostar da sua grade, agora você pode salvá-la como um estilo. Mesmo procedimento. Clique no ícone Estilos, clique no botão de adição, nomeie-o e salve-o como um estilo. Se você clicar no fundo cinza do seu Canvas, poderá ver todos os seus estilos em seu arquivo exibidos aqui. Você também pode clicar no campo adicionado para alterá-los. Então, para lhe dar uma visão geral do Figma atualmente, temos uma sequência de números de cores e variáveis booleanas E então, para estilos, temos tipografia e gradientes de efeitos de grade E, novamente, isso pode mudar um pouco com o tempo. Portanto, se você está apenas começando, pode usá-los isoladamente. Por exemplo, talvez você queira usar variáveis para cores, mas talvez tenha apenas estilos de tipografia em que não use nenhuma variável E isso ainda funcionaria bem. Mas à medida que você escala seu design e se torna mais sistemático, como em uma abordagem de sistema de design Você notará que talvez queira usar variáveis dentro desses estilos para ter valores reutilizáveis Você não precisará de todas as variáveis em todos os estilos. Por exemplo, em grades, você provavelmente só precisa números para definir sua medianiz e suas margens e, em algo como um gradiente, você só usará Na tipografia, você verá mais uma mistura, por exemplo, números para definir o tamanho e a altura da linha Mas você vai ter uma string porque é assim que você definiria a família da fonte. Se você está apenas começando, minha recomendação seria configurar suas variáveis de cor. Isso é realmente obrigatório, e você também deve ter estilos de tipografia Posteriormente, talvez você queira adicionar variáveis numéricas. Por exemplo, se você estiver trabalhando com layout automático para controlar o espaçamento, talvez também queira ter alguns estilos de grade É claro que você pode ter gradientes de efeitos. Depende do que você precisa para seu design. Mas mantenha as coisas simples e eu os manteria separados por enquanto. Quando se sentir confortável, você sempre pode editar seus estilos e transformar qualquer valor fixo em variáveis. 39. 06 Tipografia e estilos: Configurando estilos de texto. Para criar um estilo de texto, selecione um texto e, no menu de texto do lado direito , você verá o símbolo do estilo. Clique nele. Clique em mais e agora você pode nomear o estilo. Vou chamar isso de estilo de texto. Você pode adicionar uma descrição e criar seu estilo. Agora posso selecionar qualquer outro texto por meio do menu Estilos. Posso selecionar um dos meus estilos criados e ele será aplicado. Se você quiser alterar a cor, isso é separado do estilo, basta escolher qualquer variável configurada por meio do menu de preenchimento. Se você quiser separar um estilo, basta selecionar um texto e , ao lado do nome do estilo, você encontrará o símbolo destacado Se você quiser excluir um estilo, clique na área cinza da tela onde você encontrará uma visão geral de todos os estilos. Você pode editar estilos aqui e também clicar com o botão direito do mouse e excluir o estilo. Se estivermos trabalhando com A projetado com componentes , recomendo que você sempre aplique seu estilo aos seus componentes. Em vez de escolher textos aleatoriamente e transformá-los em estilos, é melhor ter uma abordagem mais sistemática Então, pessoalmente, gosto de fazer isso quando sei que gosto do meu design assim, vou refiná-lo muito mais, retiro uma cópia de todo o texto que uso no meu design Esses podem ser meus componentes. Se eu já criei alguns, isso pode ser apenas a partir de um design bruto Então eu escolho tudo o que usei e depois coloco em ordem. Então, do maior, o mais proeminente para o menor, e isso me permite criar uma hierarquia Então eu acabo com algo assim. Dessa forma, obtenho uma boa visão geral. Também posso combinar textos bem parecidos e posso limpá-los para coisas como altura da linha. Em seguida, eu o nomeio adequadamente. Não importa quais nomes você usa. Apenas certifique-se de ter uma configuração semântica. Gosto de fazer isso dessa maneira, mas algumas pessoas preferem primeiro criar uma hierarquia e depois usá-la em seus designs. Isso depende de você. Quando estiver satisfeito com minha configuração, agora posso começar a salvá-la com os nomes fornecidos. Então, uma vez que fizemos isso para todos os nossos estilos, clique na área de fundo cinza e você pode ver todos eles aqui. Você pode organizá-los ainda mais selecionando determinados estilos e, em seguida, botão direito do mouse ou usando o atalho Command NG, e você pode criar uma nova pasta, por exemplo, para todos os seus títulos Então, aplique os estilos aos meus componentes, eu simplesmente seleciono o texto e, a propósito, se você pressionar a tecla Shift, poderá selecionar vários de uma vez e, agora, no menu suspenso, aplicar meus novos estilos. Também posso corrigir pequenas imprecisões. Por exemplo, aqui, eu provavelmente quero um padrão forte. Depois de fazer isso para todo o meu texto em todos os componentes, se eu passar para o meu design, você pode ver que eles herdam do meu componente, mesmo que sejam sobrescritos, porque isso diz respeito apenas ao conteúdo, não ao estilo Qualquer mudança no estilo obviamente se refletiria todos os componentes e, portanto, em todas as instâncias. 40. 07 Variáveis e estilos de documentação: Vamos falar um pouco sobre como documentar o sistema por trás do nosso design Com nossos componentes, precisamos de um componente como mestre ao qual nossas instâncias se vinculem novamente. Portanto, precisamos armazenar cada componente em algum lugar, idealmente em sua própria página ou em seu próprio arquivo com algumas informações adicionais. Agora, nossos estilos e variáveis não apontam para um estilo mestre ou variável. Portanto, não precisaríamos de nenhuma referência ou visão geral em nosso arquivo. No entanto, eu recomendo fortemente criar uma visão geral de qualquer forma para fornecer uma compreensão abrangente e documentação de uso Isso é útil não apenas para você, mas também para outros designers e, o mais importante, para outros desenvolvedores que posteriormente criarão seu design. Então, vamos dar uma olhada em como documentar cores. Para cores, a maneira mais simples é adicionar uma amostra da sua cor variável e incluir o nome ao qual você a atribuiu Queremos usar nomenclatura semântica, então evite nomes como laranja, vermelho ou azul Em vez disso, use nomes descritivos, como primário, plano de fundo neutro ou qualquer coisa nesse sentido Os números por trás do nome existem para permitir que você adicione mais variações da cor. Portanto, eu recomendaria usar etapas de 100 ou etapas de dez, porque se você seguir uma, duas, três e quiser adicionar qualquer coisa mais tarde, não terá espaço. Eu recomendo adicionar uma camada adicional e criar variáveis separadas para as cores do texto, mesmo que essa cor já esteja representada nos neutros Isso torna mais fácil manter um controle geral e garantir que o contraste esteja correto. Você pode ir ainda mais longe e verificar contraste correto dessas cores com as cores da sua marca. Você pode usar uma ferramenta on-line, como o web aim, ou pode usar qualquer plug-in do Figma, algo como o Stark ou qualquer outro para isso Espaçamento. Agora, eu também gostaria de adicionar algumas informações sobre o espaçamento que eu uso, mas isso não requer muita documentação Na maioria dos casos, você usaria um sistema de espaçamento de um múltiplo de quatro ou oito Oito é um número mágico em web design por vários motivos, incluindo evitar meio pixel. Por exemplo, se você usasse cinco ao reduzi-lo, ele se tornaria 2,5, o que não é o ideal Um sistema de espaçamento também evita muita discussão com os desenvolvedores, porque se você estiver a um pixel de distância aqui e ali, eles saberão para onde arredondá-lo para cima ou para baixo Normalmente incluo uma folha de informações simples sobre o sistema de espaçamento de oito pontos em minhas folhas de estilo, junto com um exemplo de como usá-lo Também gosto de configurar variáveis adequadamente. Nota. Em web design, não usamos a chamada grade rígida. Grade rígida significa que haveria alguma grade de pixels no plano de fundo à qual se alinhar Nós não fazemos isso. Usamos a chamada grade flexível. Isso significa que nosso sistema de espaçamento sempre funciona de um elemento para o outro e também dentro, por exemplo, de nossos componentes Eu aplico o mesmo princípio à tipografia. Incluo uma folha de estilo de visão geral para minha tipografia com foco em mostrar a Você pode criar uma hierarquia aleatoriamente ou usar um sistema como uma proporção Existem ótimas ferramentas on-line disponíveis para essa finalidade. Como alternativa, você pode simplesmente pular na etapa oito, que funciona muito bem com seu sistema de espaçamento Para cada um dos estilos, forneço informações adicionais, como a fase do tipo, a altura da linha, o peso e qualquer outra coisa. Eu prefiro apresentar essas informações em formato de gráfico, mas elas também podem ser visualizadas diretamente no modo de design Figmus ou no modo surdo, então você pode optar por nem mesmo adicioná-las Novamente, eu recomendaria usar uma abordagem de nomenclatura semântica Não há regras rígidas, mas evite nomear o estilo exato Portanto, não use algo como Poppins 24 em negrito. Em vez disso, opte por nomes como título 03 ou título S. Se você estiver criando para uma página responsiva, talvez seja necessário ajustar tamanho do texto em determinados pontos de quebra e também adicionar essas informações à sua Este é um tópico mais avançado, e eu tenho um curso de aprofundamento totalmente separado sobre isso. Tenho alguns exemplos gratuitos de diferentes escalas de tipos responsivos na minha página da comunidade Figma para você baixar Quaisquer estilos adicionais, como gradientes ou sombras, que você possa estar usando Apenas certifique-se de adicionar também uma página com as informações à sua documentação. Você pode armazenar essas informações sobre seus estilos e variáveis em uma página separada do seu arquivo ou dedicar um arquivo separado a elas e usá-las como uma biblioteca externa Em geral, a documentação vai do muito básico ao superdetalhado e avançado No final das contas, a parte importante é comunicar o sistema que você está usando da maneira que se adapte à sua equipe, aos seus recursos e orçamento. Portanto, comece aos poucos e você sempre poderá adicionar e melhorar sua documentação. 41. Parte 3 Variáveis de cor: Se você se sentir desconfortável com variáveis e estilos , vamos adicionar isso ao nosso projeto de curso. As variáveis ainda estão mudando muito. Portanto, você pode ver uma configuração diferente em seu arquivo de exercícios do que a que estou mostrando na tela. Eu sempre tento manter o arquivo de exercícios atualizado. Portanto, certifique-se também de obter a versão mais recente. O que queremos fazer é começar criando nossas variáveis de cor. Eu tirei todas as cores do nosso projeto para você já nessas amostras, e agora só precisamos configurá-las no lado direito Se você clicar na tela, verá as variáveis locais aqui, poderá abrir as variáveis de cor que eu já criei para você. Se você não os vê, existe um pequeno interruptor. Você pode ver algumas cores auxiliares que também estão configuradas. Certifique-se de que na coleção você esteja usando cores e, em seguida, veja as diferentes cores para aplicá-las. Lembre-se, podemos simplesmente comer qualquer coisa. E então, por meio do preenchimento, clicamos nos pequenos estilos. E, como eu disse, espero que isso mude um pouco no futuro. E então podemos selecionar qualquer uma das variáveis que configuramos. Agora, lembre-se de que criamos nossos componentes em um arquivo separado e queremos fazer o mesmo com nossas variantes de cores, caso contrário, estaríamos em conflito com as que eu já criei para você neste arquivo com uma solução. Vamos pular para o arquivo em que configuramos nosso design. E lembre-se de que temos nossos componentes aqui em uma página separada. Na verdade, vamos pular para nossa página de componentes e colar nosso conjunto de cores aqui. Podemos desenhar uma seção em torno dela e também organizá-la bem Vamos chamar isso de cor. Você também pode alterar a cor de qualquer seção. Em vez disso, vou usar esse branco. Não importa o que você usa, é só para melhorar a visibilidade. Agora eu quero criar minhas variáveis e clico nas variáveis locais e ainda não há nada criado. E eu clico na variável de cor. Agora eu posso simplesmente selecionar o nome que eu dei a ele. Novamente, você pode dar qualquer nome a isso, apenas tente ser semântico Agora selecione a amostra. E com o seletor, estou escolhendo a cor do meu conjunto. Pequeno atalho. Pressione shift e enter. Dessa forma, você pode criar rapidamente várias variáveis e depois preenchê-las. Eu vou fazer isso por você. Aqui estão minhas variáveis. Gosto muito de adicionar variáveis separadas. Quatro textos, você não precisa, você também pode usar isso, mas vou adicionar outra variável de cor que chamo de texto no escuro primário. Na verdade, será da mesma cor que aqui. Só vai ser um branco simples. Mas eu gosto muito de mantê-lo separado, caso eu queira mudar alguma coisa mais tarde. Também posso verificar se o contraste é forte o suficiente. Aqui você pode ver que estou dando essa faixa, que significa que você pode usar essa cor em todos esses tons neutros. E eu verifiquei isso de antemão. Vou criar um segundo, que vou chamar de texto no secundário. Isso também é, novamente, um dos meus neutros no momento, mas isso pode mudar no futuro dessa forma Eu o tenho bem e separado. Há mais uma coisinha, você pode definir as cores. Na verdade, vamos tornar isso um pouco maior aqui. Então, o que você pode fazer é passar o mouse sobre a cor e ver esse pequeno campo de edição E aqui você pode dizer que só quer que essa variável fique visível ao selecionar texto. Não vou fazer isso por enquanto porque é um pouco avançado, mas esteja ciente de que está lá. Novamente, as variáveis estão mudando rapidamente, então isso pode ser colocado em outro lugar, mas certamente será encontrado no campo de edição. Agora que criamos nossas variáveis, queremos aplicá-las e, muito importante, não queremos aplicá-las aqui. Não queremos adicioná-los ao nosso design. Poderíamos adicioná-los em nosso design. Mas faz muito mais sentido acessar nossos componentes e aplicá-los aos nossos componentes porque então todas as nossas instâncias herdarão o que pode parecer negativo agora Mas se você tem centenas de telas , isso está fazendo uma grande diferença. Na verdade, é muito mais rápido aplicá-las aos seus componentes. O que eu faço é selecionar todos esses componentes. E então, com a cor de seleção aqui, vou simplesmente escolher rapidamente todas elas e transformá-las em, hum, minhas cores variáveis. Vou fazer o mesmo aqui e agora posso selecionar isso. Veja bem, estou trabalhando com cores separadas para o meu texto. Se eu fizer isso, ainda precisarei selecionar o texto separadamente. E então eu estou apenas mudando desta aqui para a cor do meu texto. Se isso for um pouco avançado demais, se for um pouco opressor, vá pouco a pouco Selecione esta e aplique uma cor. Em seguida, selecione o próximo e aplique o próximo. Depende realmente de você. Se for muito difícil, dê um passo atrás Mas, por enquanto, vou seguir o caminho mais rápido. Vou deixar o gradiente em paz. Muito importante, e eu vou seguir assim. Isso também é muito útil se você estiver desenhando e usando cores semelhantes e estiver limpando Depois, você pode simplesmente combiná-los aqui e garantir que tudo esteja bem definido com suas variáveis Somente se eu fizer isso de novo , precisarei ter certeza de que meu texto está definido na variável de texto. Quando eu terminar, vou simplesmente escolher o texto. Vou transformar esse texto aqui em texto primário. Na verdade, eu precisaria criar outro, para este aqui a longo prazo, um texto escuro e para este. Mas, por enquanto, vou deixá-los sozinhos. Eu pego esse? Deixe-me dar uma olhada. Este aqui é o texto sobre o secundário. Você pode ver que isso é como o cinza. Se agora selecionarmos qualquer uma de nossas instâncias, vamos selecionar esse texto aqui, por exemplo. Então você pode ver que a variável é aplicada automaticamente. Não precisamos nos preocupar com o design. Ainda existem alguns elementos, como, por exemplo, cores de fundo que talvez eu precise resolver. Eu costumo passar por isso e, por exemplo, esse preenchimento, eu gostaria de ir de acordo com minhas variáveis. Eu limparia isso um pouco, por exemplo, desse texto aqui. Outra boa maneira de fazer isso é selecionar esse quadro. E aqui você pode ver as cores não utilizadas. Se eu clicar nesse pequeno alvo , ele me dirá quais não estão usando variáveis ou quais estão usando essa cor. Eu posso simplesmente mudá-los assim. Obviamente, qualquer alteração na variável, vamos mudar nosso destaque, por exemplo, para vermelho, resultará em uma mudança em todo o design. 42. Estilos de texto da parte 3: Agora, além das variáveis de cor, também queremos transformar nosso texto em estilos. Novamente, atualmente são estilos. Espero que a Figma em breve nos forneça variáveis para isso E vou atualizar que estou usando meu método de seleção, que discuti durante as aulas do curso Novamente, eu só quero enfatizar certifique-se de primeiro realizar todas as sessões antes de começar esses exercícios. Caso contrário, eles serão muito avassaladores. forma como eles funcionam novamente, vamos apenas atualizar, é que eu simplesmente retiro tudo o que estou usando no meu design A partir daqui, eu só preciso copiar isso. Copie e cole. Estou criando essas pequenas hierarquias. Também estou usando aqui meu pequeno texto. Dessa forma, estou agrupando-os. Se voltarmos para o seu arquivo de exercícios, você poderá ver isso. Que aqui eu tenho tudo isso e o agrupei. E você pode ver que aqui em cima, eu criei alguns títulos de 24 pixels, depois 16 corpos de texto, e assim por diante, e um bem pequeno aqui embaixo Agora, se você está projetando livremente, talvez tenha algo em que tenha 32, 34, e esse também é o momento em que você pode agrupar todos eles. Nem sempre vai ficar tão claro. Provavelmente será uma pequena limpeza se você se aprofundar em um projeto mais criativo. Depois de agrupá-los, o que fiz foi criar o título um, o título dois, o título três e assim por diante, e alguns textos corporais E eu tenho essa escala. E agora quero transformar isso em estilos. E você pode ver se clicar na cor de fundo cinza. Eu criei esses estilos já em seus arquivos de exercícios, para que eles estivessem prontos para uso. Eu poderia simplesmente clicar aqui e depois ir para a seção de estilo e selecionar qualquer um desses estilos. Agora, queremos criar esses mesmos estilos em seus arquivos separados. Então, vamos fazer o mesmo com nossos componentes e cores. Vamos entrar aqui no arquivo separado que você criou e adicionaremos nossos estilos aqui. Novamente, podemos adicionar uma seção ao redor para manter tudo bem organizado, para ter esse branco também para melhor visibilidade Agora vou ir um por um, salvando esses estilos. Vou escolher este aqui e vou clicar no botão de estilo, além chamá-lo de título um. Posso adicionar mais informações onde elas são usadas e posso criar esse estilo. Agora estou fazendo o mesmo que fiz com minhas variáveis de cor antes. Eu não vou aplicar esse estilo aqui. Figma me deixaria fazer isso. E isso é um pouco perigoso. Não queremos ter isso em nosso design. Queremos ter isso em nossos componentes. Então, tudo em nosso design segue. Para meu título, eu começaria aqui. Eu selecionaria qualquer coisa que fosse um título e, em seguida, escolheria o título. Em seguida, eu criaria meu título. Segundo, na verdade, prefiro primeiro criar todos os estilos e depois examinar gradualmente todos os meus componentes para garantir que tudo esteja configurado. Se você acessar seu design e clicar no título aqui , obteremos um preço melhor. Não herdou. Se eu clicar no título aqui , ele herdou o que às vezes acontecia se colássemos texto, mesmo que não quiséssemos, estávamos acidentalmente substituindo O que precisamos fazer nesse caso é selecionar nossa instância e, em seguida, redefini-la, onde os três pequenos pontos são redefinidos, redefinindo todas as alterações e, infelizmente, isso também redefine as Eu só preciso colocar esse texto aqui novamente. Agora, se eu selecionar, você verá que agora ele tem o estilo correto. 43. 01 O que é layout automático?: Então, vamos ter uma ideia, o que é layout automático e para que o usamos? Com o layout automático, podemos configurar nossos designs no Figma forma que eles correspondam às mudanças de tamanho Isso funcionará em coisas como componentes únicos, mas também em grupos desses componentes. Isso significa que podemos realmente usar o layout automático para configurar qualquer coisa, desde um botão até uma página inteira. Você notará que, às vezes, quando aplica o layout automático, isso funciona muito bem e é muito fácil. No entanto, em outras ocasiões, ele se comportará da maneira mais estranha, e você precisa entender Isso ocorre porque o layout automático não é apenas um botão no qual você clica. É composto por três pilares e você precisa entender cada um deles em profundidade O primeiro é o layout e o posicionamento, o segundo, o comportamento de redimensionamento e o terceiro, o aninhamento Vamos entender cada um desses pilares mais detalhes e depois reuni-los como um todo, dando a você total confiança para configurar qualquer coisa com layout automático 44. 02 Como configurar quadros de layout automático: Vamos aprender como configurar um quadro de layout automático. Com o layout automático, nossos elementos de design podem responder ao conteúdo. Então aqui eu tenho um botão. Sem o layout automático, você pode ver que, se eu mudar o conteúdo , nada se adaptaria. Agora, se eu adicionar o layout automático, que posso fazer simplesmente selecionando esse botão e, no lado direito do painel de propriedades, no layout, clico no botão do layout automático. Se eu mudar o texto agora, você verá que ele se adapta automaticamente a qualquer conteúdo que recebo Vamos fazer o mesmo com o meu cartão. Eu selecionei. Eu adicionei o layout automático e agora o converti em um quadro de layout automático. E agora você pode ver que, se eu mudar alguma coisa no conteúdo , tudo se adaptará, mas ainda manterá todo o seu preenchimento Agora, com esse preenchimento e espaçamento, se você selecionar o quadro de layout automático novamente, poderá ver isso no painel de propriedades do lado direito Então, no menu aqui, você pode ver que primeiro você obtém algo chamado de lacuna entre os itens. Então, esses são todos os itens infantis. Então, meus itens infantis aqui seriam minha imagem, meu título e meu texto Vamos fazer com que este volte ao seu estado original. Então, se eu mudasse isso, você pode ver que isso muda a lacuna entre esses elementos. Se você mantiver pressionada a tecla Shift , ela aumentará e diminuirá sua quantidade n. Você também pode ajustar qualquer coisa diretamente nas cavas ou clicar duas vezes e digitar o valor desejado. Isso funciona da mesma forma para seu preenchimento. Aqui você tem seu preenchimento horizontal e vertical. Você pode mudar isso aqui. No painel de propriedades, você também pode simplesmente digitar qualquer número que desejar e também pode ajustá-lo no Canvas usando as alças ou simplesmente clicando duas vezes e adicionando qualquer valor. Com o menu de alinhamento, agora você pode alinhar seus elementos dentro da moldura de layout automático Vamos diminuir essa imagem para que você possa vê-la melhor. Você pode alinhar tudo à direita, tudo ao centro ou tudo à esquerda Isso alinha a caixa de texto inteira, não o texto em si. Se você quiser alinhar o texto, ainda precisará usar as configurações da propriedade do texto O layout é muito bom para adivinhar a direção em que você está projetando Mas se você quiser alterá-lo, poderá usar esses erros aqui em cima, para poder mudar da vertical para a horizontal. RAP é algo que usaríamos se tivéssemos mais elementos de layout automático, portanto, elementos aninhados um ao lado do outro Não é nada que você precise agora, no começo. Você pode mover elementos para dentro ou para layout simplesmente arrastando-os ou pode usar as teclas de erro no teclado para subir e descer Você verá que, no painel de camadas, elas mudarão posição de acordo com onde você as coloca. Você também pode remover o recurso de layout automático a qualquer momento, basta selecionar o quadro e clicar novamente no botão de layout automático. Você ficará com apenas uma moldura simples. Além do painel de propriedades, você também pode usar os atalhos Shift e A para criar uma moldura de layout automático e todas as teclas Shift e A para removê-la, ou simplesmente clicar com o botão direito do mouse O atalho é muito útil. Se, por exemplo, você tiver apenas um texto , não verá a opção de layout automático no painel de propriedades, mas poderá pressionar Shift e A. Isso o transformará em um quadro de layout automático Então, se adicionarmos algum preenchimento, você pode ver que ele adicionou uma moldura ao redor do seu texto. Se você remover o layout automático, verá que saiu com uma moldura e o texto dentro. É também por isso que é chamado de quadros de layout automático , porque só funcionará com um quadro. Portanto, se você aplicá-lo como apenas um texto, um grupo, ele sempre o converterá em um quadro para você. 45. 03 Componentes e variáveis de layout automático: Se você estiver usando variáveis e configurar uma coleção com seus valores de espaçamento, poderá usá-las no layout automático Essa é uma ótima maneira de garantir a consistência em todos os diferentes elementos e componentes do seu design. Para aplicá-los a um quadro de layout automático, basta selecionar o quadro e, em seguida, no menu de layout automático, encontrar os valores de preenchimento e espaçamento Se você passar o mouse sobre eles, verá um pequeno sinal variável aparecer Clique nele e você verá uma lista suspensa com todos os valores. Agora você pode escolher o valor a seguir. Você também pode usá-lo para seu espaçamento. Você só precisa aplicar a variável no menu suspenso e agora você pode escolher qualquer variável que você gostaria de aplicar. E você pode, é claro, aplicar a mesma variável várias vezes em diferentes elementos. Você sempre pode alterar a variável simplesmente clicando nela e escolhendo outro valor da lista ou destacá-la clicando no pequeno clipe Se você não vê esse clipe em alguns campos, pressione a tecla Voltar duas vezes. E lembre-se de que, em resumo, estamos trabalhando com uma abordagem baseada em componentes, então seria uma boa prática transformar qualquer quadro de layout automático que esteja sendo usado várias vezes em um componente Se agora retirarmos uma instância, você verá que a instância herdará todos os valores de espaçamento aplicados com variáveis Como estou alterando o texto na instância, essas variáveis permanecerão no lugar E, claro, como acontece com qualquer outro componente, isso também funcionaria com qualquer outra variável. Então, por exemplo, se você definir uma variável de cor para seu componente, todas as instâncias herdarão 46. 04 Redimensionar configurações: Redimensionamento com layout automático. Então, aprendemos que podemos simplesmente transformar qualquer elemento em um quadro de layout automático. Podemos ajustar o espaçamento, o tamanho e o preenchimento e, à medida que alteramos o conteúdo , podemos ver que nosso Agora, funciona muito bem assim porque, se dermos uma olhada novamente, essa é uma moldura de layout automático vertical. Mas o que também queremos que esse quadro faça é que, se o redimensionarmos , queremos que nosso conteúdo também responda dessa forma Para que isso funcione, precisamos adicionar uma camada adicional de layout automático, chamada de configurações de redimensionamento Você pode encontrar a configuração de redimensionamento na parte superior da caixa de layout Se você tiver o layout automático aplicado, isso pode estar no quadro principal ou no quadro aninhado, então você pode encontrá-lo aqui Mas também qualquer elemento dentro de uma moldura de layout automático. Se você clicar nele, obterá a caixa de layout com as configurações de redimensionamento desse elemento, e essa é a parte em que estamos interessados Portanto, é muito importante entender que enquanto aplicamos o layout automático ao quadro principal, o menu de layout automático determina o comportamento de todos os elementos secundários dentro desse quadro. Então, o alinhamento de todos esses elementos, o espaçamento de todos esses Agora, se quisermos configurar como esses elementos devem se comportar individualmente, precisamos selecioná-los e definir seu comportamento de redimensionamento, não o comportamento de redimensionamento do quadro geral As opções atuais que temos são um tamanho fixo, encher o recipiente ou abraçar o conteúdo Auto Layout se tornou muito bom em adivinhar qual comportamento você pode querer Então você pode realmente escapar impune. Por exemplo, essa imagem aqui já está configurada para preencher o contêiner. E isso ocorre porque o layout automático detectou uma margem semelhante à esquerda e à direita. Mas eu recomendo fortemente que você não confie nessas predefinições e realmente tente entender uma vez como configurar o redimensionamento adequado O redimensionamento geralmente é a parte em que as pessoas ficam mais confusas sobre o layout automático, mas não é tão difícil Na verdade, é só entender uma vez e praticar um pouco A parte crucial é ir passo a passo. Você não pode apressar isso. Então vá pouco a pouco. A primeira coisa que vamos selecionar é nossa imagem. Agora vamos ao nosso menu suspenso e vamos configurá-lo para encher o recipiente. Isso significa que, se redimensionarmos o contêiner, ele vai, bem, o que diz, preenchê-lo, sempre respeitando o preenchimento que dissemos à esquerda Aqui estamos lidando com uma configuração horizontal, então não estou me preocupando muito com a configuração vertical Ainda assim, vou ter este aqui em uma altura fixa. Isso significa que minha imagem está sempre fixada nessa altura específica. Agora vou usar o próximo elemento, que é meu texto, e quero fazer o mesmo. Não quero que isso seja corrigido no tamanho. Eu quero que isso seja horizontal para encher o recipiente. E eu vou fazer o mesmo com o meu texto de cópia. Eu também quero que isso encha o recipiente. Agora, com o texto, não quero fixar a altura porque não sei quão alta será se eu adicionar mais texto ou redimensionar É por isso que eu quero esse abraço. O abraço é um pequeno recurso muito fofo. Basicamente, pense nisso como dar um abraço no conteúdo vertical Ao lidar com texto copiado em layout automático, quero dizer qualquer coisa que não seja um botão ou um link, certifique-se de que esteja sempre configurado com altura automática Normalmente, o layout automático faz isso sozinho. E isso já é mais ou menos isso. Vamos redimensionar nossa caixa agora e você verá que tudo segue bem E mesmo que eu mude meu texto. Então, vamos adicionar mais texto de cópia aqui. Você pode ver porque isso está definido como altura automática e Hug a caixa se expande automaticamente e o layout automático responde Ainda posso alterar coisas como meu espaçamento e meu tamanho com o menu de layout automático Mas se eu redimensionar , tudo se comportará da maneira pretendida O recurso de layout automático do Figma é muito inteligente. Então, se eu, por exemplo, tenho um botão aqui, quero adicionar e transformo isso em layout automático, você pode ver que ele não apenas pega automaticamente todo o espaçamento, mas também já me dá uma sugestão de configuração de redimensionamento Agora, em um botão, abraçar horizontalmente e abraçar verticalmente faz sentido, porque se eu mudar isso, digamos que mude para ler mais, então você pode ver que eu quero que isso seja E, a propósito, também posso arrastar um quadro de layout automático para dentro de outro. botão seria aninhado e manteria suas configurações de redimensionamento Se quiséssemos movê-lo , o que poderíamos fazer é usar o alinhamento. E também podemos alterar suas configurações de redimensionamento. Por exemplo, se quiséssemos um botão em tamanho real , poderíamos alterá-lo para encher o recipiente e ele ficaria no meio. Observe que, se o texto estiver preso à esquerda, provavelmente é porque o alinhamento do botão ainda está definido para a esquerda e você pode alterá-lo para o centro 47. 05 A configuração automática: Há um recurso que está um pouco oculto, mas eu o uso o tempo todo. Eu quero que você saiba disso, e é chamado de automático. Esse recurso era anteriormente chamado de espaço entre no Figma e ainda é chamado assim no Flexbox, então você também pode ouvir esse nome sendo referido Então, basicamente, aqui temos nosso quadro com três elementos secundários. E se eu redimensionar , você verá que posso alinhar isso agora que está no meio, posso alinhá-lo à esquerda, mas sempre manterá o espaçamento Agora, no espaçamento com a lista suspensa, posso mudar isso Com o Auto, o espaço é distribuído igualmente entre as crianças. Além do menu suspenso, você também pode simplesmente clicar nas alças. Agora, se você digitar qualquer valor , ele voltará para a configuração original. Ou se você clicar duas vezes novamente e digitar auto , ele saltará para o espaço entre, ou como chamamos agora, automático. Meu atalho favorito, basta clicar no menu de alinhamento para alternar entre compactado e espaço entre eles, ou você também pode usar o atalho x enquanto estiver no O Auto é muito, muito útil quando queremos criar coisas como uma navegação em que queremos colocar alguns elementos à esquerda e colocar outros à direita Agora, o melhor é que, se adicionarmos mais elementos, isso depende de onde os adicionamos. Então, agora isso seria um filho direto. Então, agora temos três elementos secundários. Portanto, se redimensionarmos, o espaço disponível será distribuído entre três Mas se eu colocar isso dentro da minha moldura aninhada aqui , volto à minha configuração original maioria das vezes, o Auto será exatamente a solução que você estava procurando. Portanto, tenha isso em mente. 48. 06 Aprenda sobre aninhamento e relação de pais filhos: Vamos entender o aninhamento e o relacionamento entre pais e filhos. para entender o aninhamento no layout automático, bem como no código, é importante entender a relação pai-filho Aqui você pode ver um design de cartão que eu configurei. Agora, não há nenhum layout automático aplicado até o momento. Você pode ver que esse cartão tem clusters. Essa armadilha aqui pertence uma à outra, e então temos um texto e um link que pertencem um Agora, se eu selecionasse esse cartão e simplesmente aplicasse o layout automático , isso aconteceria. O que aconteceu é que o layout automático adicionou a mesma quantidade de espaçamento entre todos os elementos A razão para isso é que layout automático é assim. Nosso quadro é o elemento pai e, em seguida, tudo o que ele encontra logo abaixo na primeira camada da hierarquia são os filhos Todas as regras de layout automático são aplicadas a todas essas crianças. Nesse caso, nosso espaçamento. Agora, se prosseguirmos e aninharmos isso, agora eu tenho uma moldura aninhada de layout automático aqui, e também aninhei essa parte Em seguida, o layout automático analisará o design desta forma. Temos o quadro de exemplo de aninhamento que ainda é o principal, mas agora temos apenas três elementos secundários Agora, se mudarmos nosso espaçamento, por exemplo, isso só afetará as crianças Ainda temos todas as nossas camadas, mas agora elas são netas Eles vão seguir as regras de seus próprios pais. Dependendo de como você deseja que seu design mude e se comporte, você precisa ajustar esse aninhamento Por exemplo, digamos que você queira uma imagem de largura total. O que precisamos fazer é nos livrar do nosso estofamento em ambos os lados No entanto, o que também queremos é que ainda queremos ter alguma margem aqui. O que podemos fazer agora é selecionar esses dois, criar outro layout automático aninhado e aplicar as margens à esquerda e à direita Se quisermos nos livrar da parte superior, também podemos fazer isso, defina isso como zero. Agora você pode ver que tem um layout completamente diferente, que também precisa de suas próprias funções de aninhamento É por isso que é tão importante se concentrar na nidificação e, na verdade, trata-se apenas de praticar Então, o layout automático realmente não se trata apenas de aplicar aquele pequeno botão aqui. Trata-se de pensar na estrutura geral do seu design e, em seguida, aplicar quadros de layout automático onde você precisar deles e, muito importante, todos esses quadros de layout automático que você aninhou, bem como todas as camadas dentro deles, você precisa pensar cuidadosamente sobre o comportamento de redimensionamento que você deseja que eles tenham Na verdade, trata-se de entender e combinar os três pilares do layout automático 49. 07 Sugerir layout automático: Vamos adicionar um pouco de mágica que sugere layout automático. Aqui eu tenho alguns designs que precisariam de algum aninhamento se eu quisesse transformá-los em layout automático A primeira é bem simples, então essa parte seria um layout automático aninhado, depois essa parte e, em seguida, tudo isso é um layout automático vertical O segundo cartão é um pouco mais complexo. Essa parte direita precisaria ser um aninhamento de layout automático vertical e, em seguida, o próprio aninhamento de layout automático horizontal do cartão E então temos uma navegação, então essa parte direita precisaria ser aninhada E entre o logotipo e essa parte aninhada à direita, precisaríamos definir o automático, também conhecido como espaço entre Agora podemos fazer tudo isso manualmente ou podemos usar um pequeno truque. Vamos começar com o primeiro. Se eu simplesmente selecionasse uma moldura, aplicasse o layout automático, isso aconteceria, o que não é bom. Além disso, se dermos uma olhada no segundo, definitivamente precisamos de alguns ninhos aqui Mas o que podemos fazer é clicar com o botão direito e, em seguida, você verá em adicionar layout automático, outra opção chamada Sugerir layout automático. Ou também podemos usar um atalho Shift Control e A. Então, no painel de camadas, você pode ver que o layout automático sugeriu aninhamento para Agora, acabamos de chamar esse quadro para que possamos adicionar uma pequena dica adicional, que é clicar no menu AI e renomear suas camadas E então você também obterá alguns bons nomes de camadas para esses elementos aninhados Agora vamos dar uma olhada se isso funciona, e parece muito bom se eu estiver redimensionando aqui Se clicarmos aqui, podemos ver que isso também adicionou nosso redimensionamento Isso está configurado para preencher, e também meu pai aqui está configurado para preencher. Se eu quiser mudar isso, posso simplesmente excluir ou arrastar esses elementos pelo meu painel de camadas e alterar meu aninhamento Vamos tentar a próxima e selecionar esta carta, controle de mudança e A. Vou usar o atalho Além disso, vou renomear as camadas. Vamos dar uma olhada. Isso também parece muito bom. Eu ainda posso fazer ajustes. Digamos que eu queira que essa imagem ocupe metade do contêiner, então eu posso simplesmente selecioná-la e alterar meu redimensionamento para encher o contêiner Assim, eu o ajustei da maneira que eu quero que ele se comporte. Nosso último, vamos dar uma olhada na navegação. Shift, control e A, nosso atalho, e também vamos adquirir o hábito de renomear as camadas Isso vai renomear qualquer coisa que eu não tenha citado antes Esses que eu mencionei antes não vão sobrescrevê-los Vamos dar uma olhada se isso se aplicou automaticamente. Sim. Perfeitamente, podemos ver que no menu de alinhamento aqui, esse automático foi aplicado Isso realmente costumava ser algo muito difícil fazer antes de termos esse pequeno recurso. Faça uso disso. No entanto, eu ainda recomendo fortemente que você adquira o hábito de entender o aninhamento manual, porque em algum momento você quer mudar as coisas e precisa entender por que as coisas estão configuradas de uma determinada maneira pequena observação: no momento da gravação desse recurso, é muito novo e ele é muito novo e, considerando o quão poderoso e importante é, eu esperaria que ele saísse desse pequeno submenu de clicar com o botão direito do mouse para o menu principal de layout automático em breve, mas cuidado com isso 50. 08 Ignore o layout automático: Ignorando o layout automático. O que isso significa? Então, aqui eu tenho um quadro de layout automático. Quero arrastar esse novo adesivo aqui e quero que ele fique em cima da minha imagem Agora, se eu simplesmente arrastá-lo para dentro do quadro de layout automático, você notará que não consigo puxá-lo para cima da imagem , pois ele se torna parte do layout automático assim que entra no quadro. Então, o que posso fazer agora é colocá-lo dentro do quadro, selecioná-lo e, no painel de propriedades, em posição, você encontra esse pequeno ícone chamado ignorar layout automático. Nas versões anteriores, isso era chamado de posição absoluta. Agora você pode arrastar livremente seu elemento pela moldura do layout automático. Pequena dica, há também um atalho, mantenha pressionado o controle e arraste-o para dentro de uma moldura de layout automático, e então você terá que ignorar o layout automático aplicado automaticamente Se você quiser tirá-lo, basta clicar no ícone novamente. No entanto, ao redimensionar o cartão, você notará que ele não responde mais à largura. Isso ocorre porque ele não faz mais parte do layout automático. Portanto, o redimensionamento não se aplica. O que posso fazer para resolver isso é selecionar o elemento em uma próxima posição do menu Localizar as restrições e colocá-lo à direita Isso só funciona para elementos que não são de layout automático. Isso também é ótimo para criar coisas como bolhas de alerta Basta arrastá-lo para o quadro de layout automático, ignorar o layout automático e posicioná-lo onde quiser. Agora, por padrão, provavelmente vai cortá-lo. Certifique-se de selecionar o quadro principal e, no menu de layout automático, alternar do conteúdo do clipe para mostrar o conteúdo. Isso significa que vai mostrar tudo o que está transbordando de sua moldura 51. 12 AUTO LAYOUT: 09 Imagens com proporção fixa: Agora configure as imagens de proporção Aspec com o Figma. Aqui eu tenho um cartão de layout automático com uma imagem. Agora, basta selecionar o elemento ao qual você deseja aplicar a proporção. A propósito, isso também funciona para molduras. E então, ao lado do seu tamanho você vê essa pequena fechadura. Clique nele. E se você agora redimensionar, verá que a imagem mantém bem a proporção Um pouco deprimente, se você pular para o modo surdo neste momento, mas lembre-se de que acabamos de lançar, essa é a tradução que vemos Idealmente, gostaríamos de ter uma relação de aspecto, como a vemos no CSS, mas ainda é cedo 52. 09 páginas de layout automático: Também podemos usar o aninhamento para configurar páginas inteiras de layout automático No meu exemplo aqui, tenho um conjunto de componentes com duas variantes, uma para celular e outra para telas maiores. Aqui eu tenho uma instância desse componente, e você pode ver que ele já está configurado com layout automático. E eu tenho um componente de cartão, que também é configurado com layout automático. No lado direito, você pode ver que eu tenho um conjunto de instâncias e já adicionei alguns conteúdos, algumas imagens e títulos aqui Agora, queremos configurar uma moldura que contenha tudo isso. Vamos pressionar F. Recebemos nosso menu de molduras e vou escolher um tamanho aleatório do iPhone Agora posso adicionar minhas instâncias a esse quadro e, como todas elas já estão configuradas com o layout automático, não preciso me preocupar com os detalhes. Agora posso escolher o layout maior. Agora eu poderia adicionar meus cartões um por um, mas o que vou fazer em vez disso é selecionar todos eles. Vou pressionar Shift e A. Agora eu criei uma moldura de layout automático por aqui e vou chamar esse grupo de cartas. Agora eu posso arrumar esse grupo. Por exemplo, vamos adicionar um pouco de espaçamento. O que eu posso fazer agora é adicionar isso dentro da minha moldura. Lembre-se de que podemos selecionar o quadro principal e, com o conteúdo do clipe, podemos ver todo o conteúdo transbordante. Vamos ampliar um pouco aqui para que possamos ver isso melhor. E o que eu quero fazer, talvez eu queira remodelar isso um pouco Eu posso fazer isso subindo e descendo com minhas teclas de seta. Agora eu tenho meu layout geral, e o que eu quero fazer agora é adicionar o redimensionamento para que ele se comporte com Portanto, também preciso transformar esse quadro principal em um quadro de layout automático. Ele configura automaticamente a moldura principal como fixa e fixa, e isso é ótimo porque estou lidando com esse tamanho fixo predefinido. Então, o que vamos fazer agora é fazer o mesmo quando configuramos nossos elementos como a navegação e os carros. Vamos analisar isso pouco a pouco, configurando as configurações de redimensionamento Não precisamos nos preocupar com os carros e a navegação em si, porque isso já está configurado no componente. Então, vou pegar essa instância como um todo, e vou dizer, toda essa instância, por favor, preencha o contêiner. Então, vamos dar uma olhada se isso já funciona. Ok, isso é ótimo. Agora vamos pegar nossas cartas. Novamente, posso primeiro pegar o grupo dos pais, então o grupo do cartão, e agora posso dizer encher o recipiente. Agora, minhas cartas dentro desse grupo ainda não sabem como se comportar. Se eu selecionar um deles, você verá que eles ainda estão corrigidos. Vamos selecionar todos eles. Vamos usar nosso atalho para selecionar um grupo de cartas, pressionar Enter e selecionar todos os elementos secundários de uma só vez Agora vou dizer encher o recipiente e o conteúdo em altura porque não sei como isso vai ser redimensionado. Isso é ótimo. Mas eu quero um pouco de preenchimento para a esquerda e para a direita. Agora, eu já tenho o preenchimento dentro da minha navegação porque isso é uma parte natural da navegação Então, com meus cartões, posso simplesmente adicioná-los ao meu grupo de cartões, então seleciono meu grupo de cartões e, em seguida, adicionarei um pouco de preenchimento Estou usando minhas variáveis. Você também pode adicionar um número aqui à esquerda e à direita. Agora tudo está sendo redimensionado corretamente. Se você estiver lidando com telas móveis , recomendo usar o menu predefinido, pois dessa forma você obtém uma representação mais precisa dos diferentes tamanhos de tela Então isso funciona bem, mas talvez eu queira adicionar mais alguns tamanhos. Então, vamos pressionar F novamente e digamos que eu também queira ter uma versão para desktop. Então, vou copiar uma instância da minha navegação. E eu posso copiar essa instância diretamente daqui ou posso usar a versão pequena e simplesmente alterá-la na janela de propriedades do meu componente. Então, por enquanto, antes de adicionarmos o layout automático, vamos adicioná-lo manualmente. E você pode ver que isso também já está configurado com o layout automático, então não precisamos nos preocupar com esse componente ou instância em si. Quero adicionar meus cartões. Eu posso configurar isso do zero ou simplesmente copiá-los da minha versão móvel. Se eu apenas os ajustasse ao tamanho da tela, isso aconteceria. Agora, isso ocorre porque o layout automático está definido como um layout vertical. Mas, para esse layout, precisaríamos alterá-lo para horizontal. Você pode achar que a mudança é um pouco confusa no começo Então, basta trabalhar do zero. Quero ajustar a margem e o preenchimento. Então, aqui você pode ver que na minha navegação, eu tenho um preenchimento esquerdo e direito de 48 Então, vamos também selecionar meu grupo de cartões e definir o preenchimento para a variável 48 Também podemos definir a altura do nosso grupo de cartas para abraçar o conteúdo, para que seja sempre tão alto quanto as cartas E agora podemos transformar a tela inteira em uma tela de layout automático e, assim, também podemos usar variáveis para ajustar o espaço entre elas Você pode escolher entre usar variáveis ou simplesmente digitar esses números. Agora, como já definimos o comportamento de redimensionamento aqui e o copiamos novamente, ele permanecerá o mesmo, então isso está configurado para preencher, isso está definido para preencher e todos os elementos secundários também estão definidos para preencher Então, se eu estiver redimensionando o pai, você pode ver que tudo se redimensiona bem com Uma pequena dica extra um pouco mais avançada. Você pode selecionar seu componente e, em seguida, por meio do menu suspenso de largura, escolher uma largura mínima e máxima. Agora, se eu definir uma largura mínima, digamos que eu defina isso para 260 pixels aleatoriamente por enquanto Então você pode ver que, se eu sair por um instante, não consigo fazer com que seja menor do que a quantidade definida. A melhor coisa sobre isso é que agora eu posso selecionar essa linha inteira e configurá-la para quebrar. Antes de fazermos isso, vamos dar uma olhada no comportamento normal, para que ele pare por aqui. Se o configurarmos para agrupar, o que ele faria agora é agrupá-lo em uma nova linha. A propósito, você não pode controlar quando sua navegação, por exemplo, seria muito pequena. Então, no momento em que você precisa mudar para a outra versão. Isso é realmente algo que você precisa testar manualmente no Figma e documentar Como você pode ver, é muito importante primeiro configurar seus componentes, certificando-se de que eles sejam responsivos E quando tudo estiver em ordem com seus componentes, você poderá trazê-los e transformar suas páginas em páginas responsivas Se você quiser, isso não é nada que você precise fazer. 53. 10 Quais são as restrições na Figma?: Restrições no Figma. No Figma, temos outro recurso que nos permite controlar o comportamento ao redimensionar, chamado de restrições Selecione qualquer elemento dentro de um quadro, e isso deve ser apenas um quadro simples, não um quadro de layout automático. E agora você verá linhas pontilhadas azuis que apontam para o próximo quadro principal Essas são as restrições. Você também pode vê-los no menu do lado direito, sob restrições No entanto, somente em molduras padrão, elas não estão disponíveis em molduras de layout automático. Por padrão, essas restrições são definidas para cima e para a esquerda. E observe que, mesmo quando você tem quadros aninhados, eles sempre vão para o pai mais novo. Então, se redimensionarmos, parece que nada acontece porque eles estão definidos para a esquerda e para cima No entanto, se alterarmos essas restrições, por exemplo, vamos defini-las para a esquerda, para a direita, para esta caixa e, em seguida, neste ponto vermelho aqui, vou defini-las para baixo e para a Observe como eles mudam e mostram que lado estão fixados, e vamos colocar esse aqui no centro Você pode usar os menus suspensos ou simplesmente usar o ícone e clicar nas diferentes direções À medida que os fixamos em suas novas direções e agora os redimensionamos, você pode ver que isso muda seu comportamento, e podemos configurá-los horizontalmente ou também Portanto, fixá-los em um lado ou na parte inferior parece muito óbvio Mas às vezes ficamos um pouco confusos quando falamos sobre centro, a chamada esquerda direita e escala. A diferença entre eles é que fixo simplesmente tem uma margem fixa esquerda e direita. Onde quer que você a coloque , ela manterá essa distância, escala tem uma margem percentual para onde quer que você a coloque, e o centro permanece no centro relativo. E o mesmo, obviamente, funciona na horizontal e na vertical. Uma pequena dica: às vezes você só quer redimensionar o quadro principal e ignorar as restrições Nesse caso, mantenha pressionado o comando e ele simplesmente ignorará as restrições enquanto você o mantém pressionado 54. 11 Restrições e grades: Restrições e grades. Em vez de configurar tudo com layout automático, poderíamos simplesmente configurar nosso componente como componentes de layout automático. Então, o que poderíamos fazer é usar a esquerda e a direita para fixá-las nos lados esquerdo e direito, e fazemos o mesmo aqui. Podemos até adicionar elementos como essa pequena bolha aqui e configurá-la na parte inferior e direita Agora, se estivermos redimensionando , obteremos praticamente o mesmo resultado, mas é muito mais fácil do que configurar um quadro de layout automático No entanto, você notará que, embora isso funcione muito bem para configurações móveis simples com apenas um elemento, assim que você adicionar mais elementos, simplesmente não funcionará Porque o problema aqui é que, se estivermos usando a esquerda para a direita , ela percorrerá toda a distância. Ele não conhece esses outros elementos ao redor. O que poderíamos fazer é selecionar todos eles e configurá-los em escala. Mas com isso, funcionaria, mas não manteríamos uma distância definida. Portanto, não conseguíamos realmente manter nosso preenchimento alinhado com, por exemplo, nossa navegação Uma ótima maneira de lidar com isso é adicionar uma grade. Porque dê uma olhada, se eu estiver adicionando minhas restrições à esquerda e à direita em uma grade , agora ele examinará a coluna mais próxima porque está considerando as colunas como pais Portanto, o que aconteceria agora, se selecionássemos todas essas cartas e as colocassemos todas para a esquerda e para a direita, é que elas permaneceriam nas colunas designadas durante o redimensionamento Agora, podemos fazer o mesmo com nossa navegação aqui. Vamos configurá-lo para a esquerda e para a direita. Você pode ver que, com apenas alguns cliques e poucas complicações, estamos obtendo uma configuração responsiva e podemos testar nosso design Agora, isso é muito útil apenas para um teste rápido, mas também funciona muito bem, se, por exemplo, você estiver trabalhando com números ímpares Digamos que você não queira distribuir tudo uniformemente. Isso não funcionaria com o layout também, mas funciona muito bem com uma grade. No entanto, isso também tem desvantagens porque a grade não respeita nenhum preenchimento vertical e, portanto, não sabe a distância entre aqui e aqui Se você adicionar mais elementos, como texto, as coisas começarão a fluir umas para Mas isso é puramente um problema da Figma. Isso não será um problema no código posteriormente. Então, eu ainda gosto de usar grades para testes rápidos. No entanto, isso não substitui o layout automático. Seus componentes sempre devem ser configurados com layout automático, mas às vezes é muito mais rápido testá-los rapidamente com uma grade e restrições Uma pequena dica: você também pode ativar e desativar a grade Use o painel de propriedades do lado direito e clique no ícone, ou você também pode usar os atalhos Control e G. Se você tiver a grade desativada , todas as restrições ainda permanecerão 55. Parte 4 responsivo: Assim que você se sentir confortável com o layout automático e as restrições, vamos começar nosso projeto de curso Lembre-se de que não há nenhuma informação nova nisso. Essa é apenas uma prática adicional para aprofundar sua compreensão desse tópico Na quarta parte responsiva, você vê algumas instruções e também alguns exemplos em que a capacidade de resposta real ocorre , no entanto, nos componentes Se pularmos para nossa página de componentes, então para cada um desses componentes onde isso faz sentido. Por exemplo, não para meus ícones, eles não precisam de layout automático, mas qualquer coisa que seja redimensionada tem conteúdo remodelado Eu adicionei o layout automático e você pode clicar nesses componentes e também se certificar de que está abrindo as camadas. Então, aqui você pode ver como eu aninhei tudo. E então, no lado direito e no painel de propriedades, você pode ver as configurações de layout automático e também não se esquecer das configurações de redimensionamento Abra realmente essas camadas para ver onde tudo está aninhado O aninhamento é muito importante para fazer isso da maneira certa. E lembre-se de que o design responsivo é a parte mais desafiadora do Figma. Portanto, seja gentil consigo mesmo e use esses componentes que eu configurei para você como referência Essa é uma parte que estamos adicionando a alguns dos componentes onde precisamos dela. Por exemplo, meus ícones não precisariam de layout automático, eles são apenas ícones padrão. Depois, há outra parte. Então, se entrarmos em nosso design, agora todas as nossas instâncias aqui herdarão Então você pode ver no lado direito que isso tem todas as configurações de antes. E você também pode ver que aqui dentro, no painel de camadas, isso tem o mesmo aninhamento Tudo isso é herdado. Não preciso adicionar isso toda vez que uso esse componente ou uma instância dele. No entanto, quando eu o coloco em um novo design, o que eu preciso fazer agora é dizer a ele como se comportar em relação a esse novo ambiente que é colocado. Há várias maneiras de fazer isso. Você pode configurar o quadro inteiro com layout automático ou usar restrições, que é o que estou usando, pois acho isso um pouco mais fácil de manusear e ainda me dá mais flexibilidade no Por exemplo, você pode ver que essa instância aqui tem restrições definidas para esquerda, direita e superior E você pode, por exemplo, ver que a barra de toque aqui embaixo tem esquerda, direita e parte inferior. Se eu agora selecionar a tela e usar meu menu suspenso, agora posso experimentar todos os tamanhos diferentes dos telefones atuais Então, eu geralmente experimento o menor. Esse não é um tamanho comum, mas ainda pode existir. Então, eu me certifico de que tudo ainda se encaixa e depois uso o maior. E posso simplesmente alternar entre aqui e garantir que meu design funcione bem para todos os tamanhos. Você também pode, é claro, pegá-lo e redimensioná-lo manualmente No entanto, acho um pouco mais confiável usar esse menu suspenso aqui com tamanhos reais. Agora, deixe-me guiá-lo um pouco ao iniciar este exercício, pois você precisaria adicioná-lo aos componentes que você criou em seus arquivos separados que ainda não têm nenhum layout automático aplicado. Se você não configurou isso , o que você pode fazer é voltar aos exercícios e pegar os componentes sugeridos que criei para você no segundo exercício. Agora você precisaria copiar isso para um novo arquivo, transformar todos eles em componentes, e o que você deve fazer também é garantir que você esteja aninhando esses ícones novamente, ou você pode simplesmente se livrar deles e esquecer o aninhamento por um minuto e se concentrar no layout automático Isso também seria bom. Em seguida, você pode configurar seu design com esses componentes. Se isso for um pouco rápido , volte para esta sessão. Volte para a segunda parte do nosso projeto de curso, onde falamos sobre componentes. Agora, se você seguiu todas as diferentes etapas do projeto do curso , isso é algo que você deve ter agora. Você provavelmente tem seu design configurado aqui e também tem seus componentes, e seu design é composto de instâncias desses componentes. No entanto, no momento, ainda não há restrições aplicadas. Vamos primeiro examinar nossos componentes e garantir que eles se comportem corretamente. Estamos começando do começo. Não preciso adicionar layout automático lá, assim como existem. Muito bem. Agora, nossa barra de toque aqui, eu preciso adicionar o layout automático. Eu já configurei essa barra de toque em que cada um desses ícones aqui tem sua própria moldura. Isso está facilitando muito para mim. Eu posso simplesmente aplicar o layout automático. Eu aplico o layout automático a esse quadro. Eu aplico a esta moldura e aplico-a a esta moldura. Agora posso aplicar o layout automático em toda a barra. Agora eu só preciso pressionar Enter. Dessa forma, estou selecionando todos os elementos secundários aninhados de uma vez e agora posso configurá-los para preencher o contêiner Eles só vão preencher o espaço disponível dividido por três. Vamos dar uma olhada se isso está funcionando. Então, vou retirar uma instância e redimensioná-la Isso. Parece fantástico. Foi isso. Ok, próximo, nossos melhores bares aqui. Você poderia realmente argumentar e dizer, bem, vou deixar isso com restrições e funcionaria Funcionaria, mas assim que eu tiver um redimensionamento adequado, gosto muito de ter tudo uniforme Além disso, para corrigir todas essas distâncias aqui com o layout automático. Então, vou adicionar layout automático a isso. Vou trazê-lo de volta ao tamanho real. Acho que tenho tudo em 390. Na verdade, não importaria porque agora é responsivo, mas eu gosto muito de ter tudo do mesmo jeito Agora, eu simplesmente arrumo para que você possa ver aqui, isso já está funcionando bem Eu tenho a esquerda e a direita, vou apenas alinhar no centro, então eu tenho no canto inferior esquerdo e direito, todo o bom espaçamento Vamos dar uma olhada se isso está funcionando. Sim, está tudo bem. Eu vou fazer o mesmo com esse aqui embaixo. Vou aplicar também um layout. Você pode ver, por exemplo, aqui, que o espaçamento está um pouco errado. Eu também vou fazer isso 390. Novamente, isso pode ser de qualquer tamanho, é responsivo. Agora, eu vou arrumar isso e também ter isso às 16. Dessa forma, os dois são idênticos com todo o espaçamento. Ok, ótimo, vamos pular até aqui. Nossos elementos de design na capa da minha playlist. Na verdade, vou deixar isso e vou usar restrições Mesmo que eu tenha acabado de dizer que prefiro ter tudo com layout automático. Acho que começar com isso seria um pouco complicado. Ainda funcionaria com layout automático. Você pode selecioná-lo, você pode adicionar layout automático. Então você teria que selecionar esse gradiente aqui. Você teria que posicioná-lo de forma absoluta, trazê-lo de volta, você pode ver que ainda está funcionando. Mas está ficando um pouco complicado. Vamos voltar aqui. O que vou fazer é simplesmente definir isso aqui, então a sobreposição, na verdade, deveria ser chamada de gradiente O gradiente eu vou definir para a esquerda, para a direita, e a imagem que eu também vou definir para a esquerda, para a direita Na verdade, vou fazer o mesmo com a parte superior e inferior. Isso significa que eles sempre estarão escalando corretamente. Agora, este pequeno aqui, eu definitivamente preciso adicionar um layout automático aqui. Primeiro, precisamos aninhar, porque o que aconteceria se simplesmente aplicássemos o layout automático? Faria algo assim. Não queremos isso, precisamos aninhar. Na verdade, quero que esses dois aqui tenham sua própria distância. Eu os seleciono, pressiono Shift e A, depois seleciono esses shift e A. E agora eu posso aplicar o layout automático a todo o quadro. Está bem? Portanto, lembre-se de que estamos fazendo nossas três etapas. Primeiro pensamos no aninhamento, depois adicionamos o layout automático e depois redimensionamos Agora precisamos adicionar o comportamento de redimensionamento. Vou começar com esse botão aqui. Está tudo bem, na verdade. Não, vamos definir que isso também precisa ser um elemento de layout automático. Vamos adicionar aquele abraço. Isso é perfeito. Agora, essa aqui, eu quero encher o recipiente. Eu quero encher o recipiente. Então esse recipiente, eu também quero encher o recipiente. E essa aqui, vou deixá-la consertada. Vamos experimentar isso. Vamos apenas extrair uma instância para garantir que ela funcione. Isso não, na verdade não. Esse aqui, esquecemos que, também precisa encher o recipiente Vamos adicionar mais texto e ver o que acontece. Podemos ver que há um pequeno erro. Ok, vamos encontrar esse erro. Encha o recipiente, isso também é encher o recipiente. Isto é, vamos preenchendo pouco a pouco. Diz-se que isso enche, ainda se diz k. Aqui temos o problema, encher o recipiente. Você pode ver se você fizer esse pequeno teste aqui , isso é muito útil. Outra coisa que eu provavelmente faria é centralizar isso. Então, seria algo assim. Ok, fantástico, isso também está funcionando agora. Você pode ver aqui em seu arquivo de exercícios que na verdade, esse é o exemplo que estou usando. Então, você pode ver primeiro que estamos pensando no ninho de nidificação, depois na configuração do layout automático Você pode ver na verdade uma posição, tudo na parte inferior, depende de você. E então eu aplico o componente aqui no final. Não importa quando você o transforma em um componente. Você também pode jogar com esses exemplos aqui. Vamos voltar atrás, nossa capa. Nossa capa. Eu faço o mesmo que aqui. Eu simplesmente deixo isso importante. Sempre pegue todos os elementos internos e certifique-se de que todos tenham algum tipo de configuração. Você pode colocar imagens diretamente na moldura. Estou usando essa pequena forma simplesmente porque isso me permite copiar e colar imagens mais rapidamente. Mas uma forma é boa ou uma moldura é boa. Depende realmente de você. Este cartão aqui. Na verdade, essa é muito fácil, porque tem apenas dois elementos secundários que podemos aplicar diretamente no layout, sem a necessidade de mais aninhamentos. A única coisa que vou fazer é definir esse texto para preencher o contêiner. Vamos também tentar isso. Vamos copiar mais um pouco de texto. E você pode ver, sim, na verdade isso tem pequenos pontos. Eu não quero que isso vá para a próxima fila. Perfeito. Lembre-se de que, se você quiser isso, está no pequeno menu extra de suas propriedades de texto e, em seguida, você o encontra aqui embaixo. próximo. Este também precisa de um pouco de aninhamento. E, a propósito, você pode encontrar pequenas diferenças entre o que estou mostrando aqui e como está minha configuração final no arquivo de exercícios. Há várias maneiras de ajustar isso, mas deve ser semelhante O importante é retirar uma instância, secá-la e garantir que ela funcione. Aqui, primeiro precisamos de alguns aninhamentos, então vamos pegar esses dois, shift e oito, e criar um quadro de layout automático Agora vamos adicionar o layout automático também ao pai e garantir que tudo esteja organizado Então, eu quero que isso seja 16 também. Agora, se retirarmos uma instância, você pode ver que ela ainda não se comporta da maneira que queremos. Então, o que eu quero fazer é pegar essa parte intermediária e dizer encher o recipiente. E agora isso vai ocupar todo o espaço disponível. E basicamente apertará esse pequeno botão para a direita, e ele ainda permanecerá à esquerda. No entanto, sempre certifique-se testar com mais conteúdo. Então, aqui você pode ver que o que esquecemos agora é definir as crianças internas, então eu pressiono Enter, obtenho todos os elementos filhos Você também pode simplesmente escolhê-los um por um e eu os configuro para encher o recipiente. E este aqui também para encher o recipiente. Portanto, se você estiver retirando uma instância e brincando um pouco com o conteúdo, sempre poderá obter um resultado muito bom Aliás, uma ideia do que está acontecendo, para evitar coisas assim, como se estivesse ficando muito pequeno, o estouro, isso não é um layout automático, é simplesmente o conteúdo do clipe do nosso velho amigo Basta examinar o resto dos componentes sozinho. Então, só esses dois para finalizar. Lembre-se de que primeiro vamos aninhar, depois adicionar o layout automático e depois redimensionar os três sagrados Depois de terminar com isso, eu fiz isso por você. Então, vamos voltar ao nosso design. Você pode ver se clicarmos em uma, então você pode ver que todas elas herdaram essas configurações Agora, só precisamos adicionar nosso comportamento de redimensionamento aqui. Eu vou pouco a pouco. Estou selecionando este à esquerda e à direita e superior. Então esse aqui. Na verdade, deixe-me ligar minha grade porque eu quero posicioná-la com a grade. Lembre-se de que as restrições se comportam com a grade. Também vou definir isso para a esquerda e para a direita. Então aqui está meu texto para ter certeza de que é toda a largura da grade à esquerda e à direita. Eu já joquei com isso. Aparentemente, isso também está definido para a esquerda e para a direita. Agora, esses aqui, eu preciso selecioná-los. E agora vou clicar com o botão direito do mouse e enquadrar a seleção porque eu quero que eles o façam. Caso contrário, ele grudaria na areia do fundo e tentaria se reorganizar Agora, isso é como um elemento que eu posso posicionar à esquerda e à direita. Eu vou fazer o mesmo com esse aqui embaixo. Vou selecionar o quadro à esquerda e à direita. Obviamente, minha barra inferior esquerda e direita, e eu quero que ela fique presa na parte inferior. Vamos experimentar e, como sempre trata-se apenas de tentar e consertar as coisas. Se não funcionar da maneira que você espera, vamos parecer bastante promissores. Vamos dar uma olhada no nosso pequeno. E isso também parece bom. Perfeito. Vamos voltar ao nosso tamanho padrão. Basta passar por isso pouco a pouco. Então selecione tudo isso aqui, pequena dica, toda essa sobreposição Você precisa ter certeza de que está preso na parte inferior. Se você estiver redimensionando, se quiser ter um pico grosso, basta acessar nosso arquivo de exercícios No design final, você pode ver meus designs. E você pode simplesmente clicar aqui. E você pode ver como eu configurei as restrições para as diferentes E sim, vai parecer um pouco como trabalhar com chiclete no começo, mas confie em mim, você vai chegar lá Vai ficar mais fácil quanto mais você fizer isso. 56. 01 O espaço de trabalho do protótipo Figma: Então, vamos começar com algumas noções básicas sobre o espaço de trabalho ao lidar com prototipagem Então, aqui temos algumas configurações de design, algumas para celular e outras para desktop e, por padrão, estaremos na guia Design Ao lado da guia de design, você encontra a torneira de prototipagem Ou você também pode usar o atalho para alternar entre eles, antigo ou Opção oito Então, vamos conhecer esse menu aqui com mais detalhes. Por enquanto, observe que, se você clicar na tela cinza, estará definindo as configurações gerais do protótipo Então, qualquer dispositivo que você queira configurar, saberemos mais sobre isso mais tarde, e se você quiser alterar o plano de fundo , ele estará na visualização da apresentação, que veremos em um minuto. No entanto, se você selecionar qualquer moldura em seu Canvas , verá que o menu de prototipagem aqui muda, e é aqui que trabalharemos na maior parte do tempo Aqui em nosso arquivo de design, é aqui que vamos configurar o design e todo o comportamento do nosso protótipo Se quisermos ver nosso protótipo em ação , precisamos apertar o pequeno botão play no canto superior direito do seu arquivo Em seguida, isso passa para o modo de apresentação ou visualização. Pode simplesmente usar as teclas do teclado para ir para o próximo quadro, mesmo que você ainda não tenha conexões configuradas. Observe a ordem que a Figma usa aqui. Isso é muito útil porque o Figma realmente escolhe a primeira moldura que encontra e depois percorre a fileira Se não houver mais quadros , ele passará para o próximo quadro disponível. Isso não precisa ser uma linha clara. Pode ser algo assim, mas Figma interpretará isso como uma linha e percorrerá o quadro um por um Também é possível configurar um dispositivo para a pré-visualização. Certifique-se de que nada esteja selecionado e clique no fundo cinza do Canvas e, em seguida, você verá o menu suspenso dispositivos em um menu de prototipagem Aqui você pode escolher um dispositivo. Certifique-se de que o dispositivo que você está escolhendo corresponda ao tamanho das suas molduras. Se agora selecionarmos uma tela e voltarmos ao modo de apresentação , você verá que agora temos um dispositivo ao redor dela Ainda podemos alternar entre os designs. Mas observe que ele só se encaixa no dispositivo que você configurou. Assim que acessarmos , por exemplo, nossos layouts de desktop, isso não funcionaria mais. A solução para isso seria armazenar seus designs de celular e desktop em páginas diferentes para sua prototipagem A propósito, também podemos adicionar vídeos ou presentes animados aos nossos designs. Em nosso modo de design, isso não aparecia, mas assim que você pular para o modo de apresentação, poderá ver seus vídeos em ação. Esse é apenas um recurso profissional. Além do modo de apresentação, você também pode selecionar telas únicas no Figma e, em seguida, pressionar Shift e barra de espaço, para obter a visualização prévia do arquivo Se você esquecer esses atalhos , ao lado do botão play, encontrará uma pequena lista suspensa e também poderá ativar a visualização de informações e ver os diferentes 57. 02 Como definir o comportamento de rolagem: No Figma, podemos configurar nossos designs de forma que , no modo de apresentação, alguns elementos sejam fixos e outros roláveis . Vamos dar uma olhada. Aqui eu tenho o design de uma tela de celular. Quero que a navegação na parte superior permaneça fixa enquanto o conteúdo rola Tenho outro botão de anúncio aqui embaixo, que também gosto de manter corrigido. Vamos dar uma olhada no modo de apresentação, como isso se parece agora. Então, eu pressiono o botão play, posso ver meu protótipo e posso ver que, se eu tentar rolá-lo, absolutamente nada Então, vamos voltar atrás e configurar isso. Para que a rolagem realmente funcione, precisamos de conteúdo maior que o quadro. Aqui, seleciono o quadro principal chamado celular e, no lado direito, você pode ver uma pequena caixa de seleção chamada conteúdo do clipe. Se eu desmarcar essa caixa, você verá que meu grupo de cartões é na verdade, muito maior do que minha moldura original Isso é muito importante. Se você não tiver conteúdo que possa recortar e que basicamente sobrecarregue seu quadro, não poderá adicionar rolagem Você pode ter isso marcado ou desmarcado. Isso não faz nenhuma diferença. O que você precisa fazer agora é entrar no modo de prototipagem, então clique na guia de prototipagem no canto superior direito e, em rolagem flutuante, escolha a rolagem vertical então clique na guia de prototipagem no canto superior direito e, em rolagem flutuante, escolha a rolagem vertical. Vamos voltar ao nosso modo de apresentação e ver o que isso fez. Agora posso rolar o conteúdo, mas, como você pode ver, meu cabeçalho e meu botão aqui não estão fixos. Então, vamos voltar e configurar isso. Escolha o elemento, no meu caso, o cabeçalho que você deseja manter fixo e comece a prototipagem Você verá na posição a opção de corrigir, permanecer no lugar. Observe que aqui no elemento filho, você também tem a opção de definir o comportamento de estouro Então esse seria o comportamento de rolagem dentro desse quadro aninhado Nesse caso, não queremos nenhum comportamento. Já definimos nossa rolagem vertical para o contêiner principal. Vamos também corrigir esse botão aqui embaixo. Também vamos definir isso para uma permanência fixa. E agora vamos clicar em play e dar uma olhada no que isso parece. Portanto, meu contêiner principal rola bem e todos os meus elementos fixos permanecem no Se você já teve a rolagem sem funcionar, certifique-se de verificar três coisas Em primeiro lugar, na guia Design, verifique se você recortou conteúdo maior do que o quadro com o qual você está lidando No menu de prototipagem, verifique se a rolagem de sobrecarga está configurada Depois de configurar o elemento pai, agora escolha o elemento filho que você deseja fixar. Vá para a prototipagem e, em seguida, posicione, escolha a permanência fixa no local 58. 03 Telas de conexão: Vincular telas no Figma é realmente muito simples Aqui eu tenho um exemplo simples. Nesta tela inicial, tenho formas de cores diferentes. Depois de clicar em uma dessas formas de cores, eu queria ir para a página de detalhes de cada cor. Verifique se você está no modo protótipo e, em seguida, selecione qualquer forma, enquadre o texto, não importa Depois de passar o mouse sobre ele, você verá aquelas pequenas bolhas Você pode simplesmente escolher qualquer bolha. Não importa qual lado você está selecionando. Agora, arraste um conector e simplesmente conecte-o à estrutura à qual você deseja se conectar e solte-o. E é isso. Figma abrirá automaticamente o painel de detalhes da interação para você, e aqui você poderá personalizar ainda mais sua interação Você pode fazer isso imediatamente ou, se estiver fechado, basta clicar no conector ou diretamente na interação no painel e ele abrirá novamente. Uma interação é sempre composta por um gatilho, uma ação e um destino. Esta é a parte superior deste painel aqui. Ao clicar está nosso gatilho, então nossa ação é Navegar dois, e o destino é nosso quadro chamado laranja. Agora posso alterar a ação e o destino do gatilho simplesmente clicando neles. Eu poderia trocar o gatilho de clicar para arrastar, mouse, inserir e Se quisermos mudar de tela , geralmente será com um clique. Vou deixar as coisas assim por enquanto. Minha ação é Navigate two. Isso significa que vamos pular para uma nova página, e essa é a que você provavelmente mais usará. Também está de volta, o que significa que você voltará para a página anterior. Depois, há algumas configurações mais avançadas que você pode fazer com variáveis. Você pode rolar até os elementos na mesma página. Você pode abrir links externos e pode abrir sobreposições e trocá-las . Depois, o destino. Eu também poderia escolher qualquer outro quadro nesse menu suspenso. No entanto, você notará que, ao lidar com mais quadros, isso é um pouco entediante Portanto, prefiro simplesmente selecionar meu conector e, em seguida, escolher outra moldura simplesmente movendo-a. Abaixo está a parte da animação. Então é assim que as coisas são animadas e se comportam quando a interação está acontecendo Agora, essa é a parte elegante, a parte em que você configura todo esse comportamento mágico, coisas se transformando umas nas outras e No entanto, apenas uma palavra de cautela. As microinterações são muito úteis. No entanto, recomendo que você primeiro se certifique que sua conexão real e sua usabilidade estejam funcionando e que tudo faça sentido E depois, com sua equipe de desenvolvimento, você pode pensar nas animações e interações que gostaria de adicionar Porque o que às vezes é apenas um clique no Figma é, na verdade, muito difícil de configurar em CSS Então, só para suavizar um pouco, vou optar por dissolver. Ele pode definir o tempo necessário para se dissolver em outra tela, e também podemos escolher um dos comportamentos predefinidos Vou deixar tudo à vontade por enquanto, que é muito bom. Vamos dar uma olhada em como isso ficaria em nossa prévia. Vou selecionar a moldura principal e vou adicionar uma maquete em torno dela Estou trabalhando em um tamanho de iPhone 14. Ok, vamos apertar o play. Então, aqui eu vejo minha tela inicial e, se eu clicar agora na minha forma laranja, posso ver que ela navega até a subpágina No entanto, se eu estiver clicando em Voltar , nada está acontecendo. Então, vamos configurar as outras interações também. Então, vamos voltar ao nosso arquivo Figma. Aqui, primeiro de tudo, vou conectar as outras duas formas. Vou simplesmente arrastar um conector e você pode ver que o Figma salvou as predefinições que acabei de usar para o laranja Isso é muito bom e útil para acelerar seu trabalho. A próxima coisa que eu quero fazer é clicar em Voltar, voltar para a Página Inicial ou, na verdade, de onde eu vim. Eu posso selecionar todos esses botões de uma vez. Se você pressionar a tecla Shift, poderá selecionar várias. Agora eu posso arrastar a conexão daqui ou clicar no botão de adição de interações no painel Propriedades do lado direito. Aqui eu posso definir a interação e simplesmente vou voltar atrás. Então, vamos passar para o nosso protótipo, e ele está funcionando perfeitamente 59. 04 Menu suspenso com sobreposições: Vamos dar uma olhada nas sobreposições no Figma. Então, um exemplo perfeito de sobreposição é um menu. Então, é basicamente sua própria moldura. Mas se clicarmos, por exemplo, no trabalho, não queremos que o quadro inteiro mude para esse menu, mas queremos que o menu apareça abaixo da nossa navegação aqui. Nós praticamente os configuramos como qualquer outra conexão. Então, vamos selecionar o trabalho. Link para o menu. Agora, ao clicar, em vez de navegar dois, escolhemos abrir sobreposição No menu de sobreposição, agora posso escolher a posição, centralizada, superior esquerda, inferior e assim por diante, em relação à moldura principal, ou também posso escolher manual, que é o que eu precisaria aqui Agora posso ver essa pequena prévia da minha sobreposição e posso posicioná-la na moldura conforme necessário Eu posso escolher que ele feche automaticamente quando alguém clica do lado de fora, seja, qualquer área por aqui, e eu poderia adicionar um plano de fundo para um menu que realmente não faz muito sentido, então eu deixo Como sempre, posso escolher minha animação, então vou fazer com que ela também se dissolva, como de costume. Vamos dar uma olhada em como isso vai ficar. clicar em reproduzir e posso ver que, se eu clicar em trabalhar, meu menu aparecerá e, se eu clicar novamente no trabalho ou em qualquer outro lugar Vamos clicar em reproduzir e posso ver que, se eu clicar em trabalhar, meu menu aparecerá e, se eu clicar novamente no trabalho ou em qualquer outro lugar do Canvas, desaparecerá novamente. Então, agora eu posso simplesmente conectar qualquer um desses submenus aqui a uma nova tela 60. 05 tipos de animação: Diferentes tipos de animações. Na prototipagem, temos a opção alterar o tipo de animação Por padrão, é sempre definido como instantâneo. Vamos pressionar shift e barra de espaço e, em seguida, obtemos nossa pré-visualização no arquivo. Se eu clicar aqui, você verá que tenho uma mudança instantânea. A propósito, se você pressionar R , isso será reiniciado. Vamos mudar do instante para a dissolução. Você pode ver que eu tenho mais algumas opções. Esse é o tempo necessário para se dissolver. Então aqui você pode ver que eu posso escolher o tipo de facilidade de entrada, facilidade de saída e assim por diante. Vamos clicar nele para dar uma olhada. Você pode ver que estou recebendo essa animação mais suave. Mais adiante, você obtém as chamadas animações em movimento. Entre, saia, empurre e assim por diante. Vamos dar um empurrão e você verá uma pequena foto com a animação em movimento. Você pode escolher onde ele será empurrado, por exemplo, de baixo para cima ou da esquerda, direita e assim por diante. Agora vamos dar uma olhada. Você pode ver que isso aparece em toda a nova tela. Agora, quero destacar uma última animação, que é a animação inteligente, e essa é realmente mágica O que o Smart animate faz é procurar camadas com a mesma hierarquia e nome entre quadros diferentes ou também dentro do conjunto de componentes entre diferentes variantes e, em seguida, anima magicamente coisas como cor, tamanho, posição tamanho, Vamos redefinir nosso quadro e ver o que o Smart animate faz Podemos jogar com a velocidade e você pode ver que estamos obtendo essas animações muito boas e suaves Também podemos jogar com nossos gatilhos. Eu vou me livrar dessa animação. Na verdade, vou selecionar o quadro inteiro para animar nesse quadro e direi que, após o atraso, vamos mantê-lo com as mesmas animações inteligentes Eu vou dizer que se eu clicar nesta imagem aqui, ela será animada de forma inteligente aqui Então, vamos abrir nossa prévia e agora você pode vê-la animada automaticamente da primeira para a segunda tela. Vamos fazer isso de novo. Agora, se eu clicar na miniatura, ela será animada de forma inteligente da segunda tela para a terceira tela A parte importante para que isso funcione é que você precisa do mesmo nome e nível de hierarquia entre suas diferentes telas Agora, não importa se dentro de um nível hierárquico, por exemplo, você moveria as imagens ou se você tem uma moldura de layout automático ou uma moldura padrão A parte importante é o mesmo nome e a mesma hierarquia para que a animação inteligente funcione Então, se dermos uma olhada, na nossa segunda tela, se abrirmos o conteúdo, podemos ver que, por exemplo, esse texto sempre esteve aqui Caso contrário, não poderia ser animado tão bem. Ainda seria animado, apareceria, mas não teria essa boa animação em movimento E o mesmo acontece com minhas imagens, se eu quiser que elas se movam, primeiro elas precisam manter sua hierarquia, então elas ainda estão dentro de um grupo de imagens e ainda têm o mesmo nome E então, aqueles que são invisíveis, eu simplesmente defino a opacidade no segundo quadro Portanto, você precisa ser muito inteligente ao mostrar, ocultar e posicionar suas camadas para obter a animação certa. É por isso que eu também recomendaria manter a prototipagem separada do design 61. 06 componentes interativos: Até agora, usamos animação entre quadros diferentes e agora vou mostrar um dos meus recursos favoritos, os componentes interativos. Eles são basicamente animações reutilizáveis ambientadas dentro do seu componente Como o nome permanece, para que isso funcione, precisamos de componentes, ou melhor conjuntos de componentes com variação lateral Se você não está familiarizado com isso, um conjunto de variâncias consiste basicamente em dois componentes, dois ou mais componentes, na verdade, e você pode ver aqui que eu uso convenção de nomenclatura: botão, barra frontal padrão, botão, barra frontal, passar botão, barra frontal Eles são da mesma família, eles são apenas um estado diferente da mesma coisa, na verdade. Então, aqui no lado direito, posso dizer combinar como variantes. A melhor coisa sobre isso é que, se você agora retirar a instância aqui, poderá ver que, nesse botão, as duas instâncias são salvas apenas como estados diferentes. Em todo o meu design, vou usar muitas instâncias desses elementos. Portanto, posso não apenas salvar os diferentes estados que eles têm nessa instância, mas também posso salvar o comportamento. Então, eu preciso estar nas configurações do meu protótipo. Então, por exemplo, para salvar o comportamento de um botão, mouse sobre o estado, eu quero adicionar Estou simplesmente conectando meus dois botões , como faria antes, com qualquer outro quadro. Agora você pode ver que no meu menu escrito ao clicar, ou vou mudar isso para enquanto estiver passando o mouse, e ele mudou para definir Essa mudança para aqui só estará ativa nos conjuntos de componentes. Agora posso usar a resolução instantânea ou a animação inteligente, vou usar a animação inteligente porque é simplesmente Agora vamos dar uma olhada no que isso faz, para que possamos ver isso em nosso modo de visualização, preciso desenhar uma moldura e agora posso adicionar uma instância do meu botão a essa moldura. Agora vamos dar uma olhada. Ao passar o mouse sobre meu botão, você pode ver que tenho esse comportamento seguro, e isso será o mesmo onde quer que eu use esse botão OK. Agora eu quero o mesmo para o meu switch aqui, mas eu quero que isso seja arrastado até aqui e depois se transforme nesse switch Agora, neste caso, não quero que o switch inteiro seja ativado, mas quero pegar essa pequena bolha aqui Quero selecionar essa bolha, desenhar uma animação e você verá que ela aparecerá ao clicar Nesse caso, quero arrastar, alterar dois e quero uma animação inteligente aqui. Agora, neste caso, preciso retribuir o favor. Então, ao arrastar, ele voltará ao meu estado original. Agora, o que vou fazer é arrastar uma instância, colocá-la no meu quadro e dar uma olhada se isso funciona. Então aqui está meu botão, eu o arrasto e você pode ver que ele muda cor com a animação inteligente 62. 07 Figma Mirror – visualização em seu dispositivo: Figma tem um aplicativo fantástico que permite que você visualize seus protótipos no seu celular Acesse o site da Figma e os produtos, você encontra a guia downloads Nos downloads, você pode baixar a versão IOS ou Android do aplicativo para o seu telefone. Depois de abrir o aplicativo móvel, você solicitou o login. Para fazer o login, basta usar seu login padrão do Figma. Na verdade, é importante que você use exatamente o mesmo login que usa para seus arquivos de trabalho. Caso contrário, o espelho não funcionará. Em seguida, você verá uma visão geral dos arquivos em sua conta. No entanto, dê uma olhada no canto inferior direito e clique no espelho. Você clica em Iniciar espelho, isso espelhará qualquer quadro que você selecionar neste momento em sua área de trabalho Todas as configurações do protótipo serão automaticamente visíveis aqui. Então, eu adoro ter isso aberto enquanto trabalho em meus designs móveis. Isso me permite ver e testar meu design de uma forma mais realista durante o design. Apenas certifique-se de verificar o tamanho da moldura em que você está projetando é, na verdade o tamanho correto para o celular que você está usando. No meu caso, tenho um iPhone 14 físico. Portanto, minha tela também está configurada para essas dimensões. O. O aplicativo aumentará e diminuirá seu design. Portanto, parecerá real mesmo se você estiver usando outro tamanho. No entanto, isso pode realmente levar a erros quando se trata, por exemplo, de testar tamanhos de alvos de toque. Você também pode compartilhar seus protótipos móveis por meio do link. Certifique-se de ter copiado o link da exibição da apresentação Em seguida, ele será aberto automaticamente no aplicativo móvel Figma, se instalado em um telefone Novamente, certifique-se de que aqui o tamanho do seu protótipo corresponda ao tamanho físico do telefone que está sendo usado Você não precisa se preocupar com a resolução nesse caso porque o link volta para a Figma, que cuida disso 63. Parte 5 de prototipagem: Vamos transformar nosso projeto de curso em um protótipo interativo para a prototipagem Certifique-se de que nas páginas você vá para a página de prototipagem Aqui você encontra, como de costume , o exercício e uma solução à direita. Se selecionarmos a primeira tela na solução, podemos pressionar Shift e barra de espaço e abrir nossa Essa é uma maneira muito boa e rápida de fazer isso dentro do seu espaço de trabalho Mas, na verdade, provavelmente é melhor entrar no modo de apresentação. Basta clicar no botão play no canto superior direito e, em seguida, você verá a tela do seu protótipo No modo de apresentação, você pode rabiscar e também clicar no seu protótipo e interagir com ele Isso é o que vamos construir. Vamos primeiro torná-lo rolável e corrigir certos elementos, como a barra de toque Em primeiro lugar, vou selecionar todas as telas que tinham conteúdo transbordante Lembre-se de que você pode abrir o clipe aqui e ver qualquer conteúdo que vá além de nossos pontos de vista Agora vamos para o protótipo aqui. Podemos definir isso para rabiscar verticalmente. Se selecionarmos esse quadro e pressionarmos Shift e barra de espaço, obteremos nossa Agora podemos ver que isso rabisca. No entanto, ele não rola o suficiente porque basicamente não respeita isso. Aqui embaixo eu tenho essa Tapa. O que eu preciso fazer é dar a ele algum tipo de buffer, algum tipo de espaço extra E há várias maneiras de fazer isso. Você pode simplesmente desenhar outra moldura no fundo que seja maior, ou o que eu fiz foi, deixe-me soltá-la para que você possa vê-la melhor Basicamente, empacotei esses grupos de cartões aqui. Eu o chamei de Grupo de Cartas e coloquei uma moldura ao redor dele. Então, o que vou fazer agora é manter pressionado o comando ou controle no Windows e adicionar um pouco de espaço extra. Isso basicamente vai usar o espaço. Agora, veja o que acontece se eu rabiscar novamente. Agora está funcionando. Esse também é um dos motivos pelos quais eu sempre recomendaria ter a prototipagem em uma página separada, porque vamos ajustar bastante seus designs Tudo o que precisamos fazer agora é conectá-los. Eu adicionei alguns erros aqui. Vou selecionar essa miniatura, verificar se você está criando protótipos e, em seguida, você verá E agora vou me conectar com este. Vou navegar dois no Tab. A propósito, você pode ver clique aqui ou Tab, é exatamente o mesmo. Navegue por duas páginas de destino e eu realmente quero que isso se dissolva. Provavelmente parece instantâneo aqui, esse é o padrão. Eu quero que isso se dissolva. Então, a partir daqui, quero abrir uma sobreposição. Observe que isso é um pouco menor do que o outro quadro. Eu quero que isso entre e seja colocado sobre esse design original na aba. Isso está correto. Agora, precisamos alterar isso para abrir a sobreposição Esse é simplesmente o nome desse quadro. Eu quero que ele se mova de baixo para cima. Eu tenho um centro inferior. Sim, está correto. Eu tenho perto. Ao clicar do lado de fora, adicionei um plano de fundo de 50%, você pode redefinir a posição de rabiscar Isso significa que se você voltar, vai voltar ao topo aqui novamente, o que é muito bom. Eu vou fazer mais duas pequenas coisas. Vou selecionar esse aqui e vou adicionar uma interação. E eu vou dizer no Tab, volte. Vai voltar de onde quer que tenha vindo. Porque mais tarde eu poderia inserir isso de qualquer outro lugar. Eu vou fazer o mesmo com a sobreposição. Esteja ciente de que, na sobreposição, agora queremos uma guia. Agora, se voltarmos , ele voltará para o quadro anterior, para este. Como uma sobreposição não é uma moldura real, é apenas uma sobreposição Então, o que queremos fazer é fechar essa sobreposição. Ok, agora vamos dar uma olhada que está funcionando bem. Estou clicando aqui. Também está funcionando agora. Eu quero abrir a sobreposição. Fantástico. Agora vamos fechar a sobreposição novamente. Ótimo. Se eu clicar aqui, eu volto para casa. Eu tenho um pouco mais para você aqui. Isso é bastante avançado, porém, se soltarmos, dá para ver que tenho material horizontal para ser rabiscado Agora, o que você pode fazer, como mostrei antes, coloquei isso em um novo quadro chamado Cartão, e agora posso configurá-lo coloquei isso em um novo quadro chamado Cartão, para rabiscar com o pai Isso está correto, mas horizontal. E eu vou fazer o mesmo este aqui embaixo, Horizontal. Uma parte importante para que isso funcione é que observe que esse quadro é menor, então esse quadro tem o tamanho. Ele termina na borda da moldura principal. Não funcionaria se eu tivesse isso inteiro, você pode dar uma olhada e brincar com isso, mas como eu disse, é um pouco mais avançado. Vamos dar uma olhada. E isso também está funcionando muito bem. Ok, última coisinha a ser demonstrada no modo de apresentação. Você também tem dispositivos aqui. Você pode ver que eu já configurei isso por padrão, está definido como nenhum. Você pode escolher um dispositivo aqui. Agora é importante que você escolha o dispositivo exato do tamanho da tela. Vamos dar uma olhada. Eu tenho 390 por 844. Se eu for fazer protótipos e dispositivos, preciso escolher algo que seja 390 por 844 Se eu pressionar play agora , você verá que agora tenho esse dispositivo em torno do meu design. Está funcionando como um protótipo normal, mas está incorporado nesta bela prévia 64. 01 Compartilhar e convidar outros: Uma das grandes vantagens do Figma é que você pode convidar outras pessoas para seus arquivos, equipes e projetos e colaborar em tempo real Se você quiser compartilhar um arquivo basta clicar no botão Compartilhar, e você verá a abertura do modelo de compartilhamento. Você pode ver quem já tem acesso ao arquivo e também pode ver que tipo de acesso eles receberam. Isso pode ser direitos de visualização ou direitos de edição. Se você for administrador, também poderá alterar o tipo de direitos nessa janela aqui. Se você quiser convidar outras pessoas, insira o e-mail delas e envie um convite ou copie um link de compartilhamento. A parte interessante é essa aqui. Parece que agora, se você convidar , as pessoas só terão direitos de visualização. Isso não é problema porque, mais tarde, quando eles forem convidados, você sempre poderá alterar e controlar isso por meio das configurações de administrador. Agora você pode mudar isso. Você pode mudar para qualquer pessoa e, em seguida, pode alterar isso para visualizar ou editar. Se você clicar em Editar, tenha cuidado e certifique-se de verificar primeiro seu plano Figma atual, pois assentos adicionais de edição podem acarretar custos adicionais e você não quer uma grande surpresa quando sua fatura chegar no final do mês A forma de controlar a visualização e a edição mudou bastante no último mês. Também podemos ver algumas mudanças aqui. Apenas tome cuidado e esteja atento a quem você dá opinião e a quem você concede direitos Então você pode ver aqui, qualquer pessoa em design, atualmente é uma pessoa que pode acessar isso. O que isso significa é que nossa equipe aqui se chama Moon Team, e então temos um projeto chamado Design. Aqui embaixo, você tem outros links, então você só pode compartilhar um link do modo def Se você estiver trabalhando com desenvolvimento, faz muito sentido fornecer a eles apenas um link para o modo surdo Então temos aqui apenas um protótipo de link. Isso é algo que eu realmente gosto de compartilhar, por exemplo, com clientes, para que eles não tenham acesso ao arquivo real. Você pode publicar na comunidade e também pode incorporar o código em outras páginas Se você pular para o modo surdo, também poderá compartilhar diretamente daqui, e isso deve copiar um link do modo surdo para Podemos escolher nosso arquivo, que provavelmente é o que você mais usará, mas também podemos optar por compartilhar nosso projeto ou toda a nossa equipe. Você pode simplesmente clicar em um de seus projetos e , em seguida, também encontrará um botão de compartilhamento aqui e, em seguida, poderá ver compartilhar este projeto. Novamente, você pode copiar seu link ou enviar um convite. E você pode subir uma camada hierárquica e também pode compartilhar toda a sua equipe Se você compartilha sua equipe, novamente, a parte lamentável parece diferente novamente, então você pode escolher entre os direitos de visualização e edição, e você tem mais opções aqui para controle No nível da equipe, você também pode clicar na visualização do administrador. Portanto, se você for o administrador, isso lhe dará acesso para controlar todos os direitos do painel. Isso também depende do tipo de plano que você tem com o FIMA, então pode parecer um pouco diferente se você, por exemplo, tiver um plano corporativo que oferece mais visão geral e controle sobre o controle do acesso de sua equipe 65. 02 Como configurar uma miniatura: Adicionando uma miniatura. Por padrão, o Figma oferece uma visão geral do que está dentro do seu arquivo como uma miniatura Agora você deve ter visto em alguns arquivos que eles têm uma bela miniatura, indicando um nome e dando uma pequena visão Deixe-me mostrar como isso funciona. Vamos entrar nesse arquivo de design aqui. Agora, você pode ver que eu já configurei uma miniatura. Eu poderia adicionar uma página separada e chamá-la de casa e adicioná-la aqui, ou posso simplesmente tê-la junto com meu design. Isso não importa. Nossa miniatura é apenas uma moldura simples com um tamanho de 16 a nove Você pode configurar isso simplesmente usando os slides da apresentação no menu de molduras. Então, gosto de adicionar coisas como uma categoria. Isso, por exemplo, seria um arquivo de design. Então eu gosto de adicionar um nome de projeto, uma breve descrição. E também é sempre uma boa ideia se você estiver em uma equipe com muitos, adicionar quem é o responsável ou quem editou esse arquivo por último. Agora, no lado direito, eu gosto de editar uma imagem, e você pode realmente configurar tudo isso como quiser. É apenas uma moldura, basicamente outro design. O que eu gosto de fazer é adicionar algumas informações sobre como isso se parece. Basta copiar algumas telas representativas ou apenas um componente representativo aqui. Então eu posso simplesmente redimensionar isso, lembra. O truque é pressionar K, e eu estou no menu de escala agora, e agora posso reduzir isso, e estou apenas adicionando-o a esse quadro para dar um pouco mais de contexto Quando estiver satisfeito com meu design, basta selecionar esta unha do polegar e clicar com o botão direito do mouse No menu, você encontra definido como miniatura. Você verá o pequeno ícone de unha do polegar ao lado do nome. Se agora voltarmos para casa, você pode ver que agora tenho minha miniatura configurada Se você visitar a página da minha comunidade em figma.com fola at Moon Earning, você pode ver o conjunto de rotulagem de arquivos Mo earning e obter uma cópia 66. 03 bibliotecas de equipe compartilhadas no Figma: No FiMa, podemos criar bibliotecas de equipe compartilhadas. As bibliotecas de equipe compartilhadas são uma forma de as equipes criarem uma biblioteca centralizada de ativos de design que podem ser compartilhados e reutilizados em vários projetos de design Você pode armazenar suas variáveis, estilos e componentes em bibliotecas externas. Então, suas cores, configuração de tipografia e quaisquer componentes, desde ícones, botões até cartões e Uma atualização do estilo ou componente da variável na biblioteca compartilhada da equipe resultaria em uma solicitação para atualizar qualquer arquivo de design que usa o componente ou a variável de estilo. Você pode trabalhar com uma ou várias bibliotecas de equipe. É importante observar que, para usar um recurso de biblioteca de equipe compartilhada no Figma, você precisará de um plano Figma pro ou superior Isso significa que custos adicionais podem ser aplicados dependendo do número de editores que você tem em sua equipe Certifique-se de verificar os planos de preços atuais da FIMA para obter mais informações 67. 04 bibliotecas de equipe: Bibliotecas de equipe compartilhadas. Aqui eu tenho dois arquivos e observo que, no momento, eles são apenas arquivos de design normais. Você vê que se você passar o mouse sobre eles, você obtém este arquivo de design azul que eu posso Agora, essa é chamada de biblioteca, e aqui eu guardo meus componentes. E o que eu quero fazer é transformar isso em uma biblioteca e, aqui no meu arquivo de design, quero configurar meu design consumindo esses componentes da biblioteca. Então, a primeira coisa que precisamos fazer é basicamente dizer a esse arquivo que ele não é mais um arquivo de design, mas agora é uma biblioteca. Então, vamos abri-lo. E aí dentro, você pode ver que eu tenho componentes aqui, e eu também configurei algumas variáveis básicas. Então, vamos pular para o painel Ativos e, em seguida, aqui você encontra o símbolo da biblioteca. Clique nele e você verá o arquivo atual e a opção de publicar. Agora vamos adicionar uma breve descrição. Aqui você deve ser o mais específico possível. Vou apenas adicionar a primeira publicação a partir de agora. Em seguida, obtemos uma visão geral, então você pode ver aqui que temos nossas quatro variáveis e podemos publicar tudo isso, ou podemos apenas selecionar determinados componentes ou variáveis a serem publicados. Agora vamos publicar, e publicamos com sucesso nossa biblioteca. Agora, parece que nada aconteceu. Mas se voltarmos para nossa casa , você verá que nosso ícone agora mudou de azul para preto. Um ícone preto, você verá que já é uma biblioteca. Para consumir nossa biblioteca, abrimos nosso arquivo de design. A propósito, você também pode consumir bibliotecas em arquivos de design ou em outros arquivos de biblioteca. Em nosso arquivo de design, vamos para o painel Ativos. Você pode ver que também temos algumas predefinições do Figma com as quais podemos brincar, mas queremos navegar em nossas bibliotecas ou simplesmente clicar no símbolo da biblioteca novamente E agora, por meio do menu suspenso, dê uma olhada em sua equipe ou qualquer outra equipe, dependendo de onde sua biblioteca Ele pode ver o que acabamos de publicar. Vamos adicionar isso ao nosso arquivo. Agora você pode ver no painel de ativos que temos nossa biblioteca e aqui podemos ver todos os diferentes componentes. É claro que podemos sobrescrevê-los e criar com eles, assim como em qualquer outro arquivo Agora, lembre-se, também tínhamos algumas variáveis. Se clicarmos nas variáveis locais, não as encontraremos aqui. Mas digamos que apenas desenhamos uma forma ou uma moldura e, por meio do menu de preenchimento, você verá que aqui agora você tem uma nova paleta onde as cores da nossa biblioteca são armazenadas E, a propósito, você também pode separar isso. Você pode obter duas bibliotecas, uma para componentes, outra para variáveis, e depois combiná-las aqui. Você simplesmente encontraria todos eles aqui no painel de ativos. Como você pode ver, se você clicar em Adicionar mais, poderá simplesmente adicionar a eles. Obviamente, se você quiser removê-lo, mesma forma, basta clicar no botão remover. Se você estiver trabalhando em um arquivo de design e quiser voltar para o componente original, basta selecionar qualquer instância e, por meio do painel de propriedades, clicar em ir para o componente principal e ele o levará ao arquivo que seus componentes originais estão. O que acontece se os componentes forem atualizados. Digamos que aqui estamos adicionando algum raio e, em seguida, também vamos entrar em nossas variáveis Vamos trocar essa aqui por uma, digamos, verde, só para ter certeza de que vemos as mudanças. Agora você pode ver que há uma pequena bolha em nossa biblioteca. Portanto, revise as alterações não publicadas. Vamos clicar aqui e clicar em Publicar. E você também pode ver onde encontrou modificações. Agora vamos publicar isso. A propósito, deveríamos ter adicionado uma descrição. Agora, se abrirmos qualquer arquivo, onde usamos qualquer um dos elementos que foram alterados, você também verá essa pequena bolha aparecendo aqui Se você clicar aqui, terá uma visão geral da atualização que aconteceu Você pode atualizá-las individualmente ou simplesmente atualizar todas. 68. 05 Mover componentes para bibliotecas externas: Componentes móveis. Aqui temos nosso design e nossos componentes. Agora, o único lugar em que realmente não os queremos é na mesma página. Se simplesmente os copiássemos e depois os colássemos em uma nova página, isso seria uma instância. Isso não vai funcionar. O que podemos fazer para isso é clicar com o botão direito do mouse e ir para uma nova página ou pressionar o comando e o X. uma nova página ou pressionar o comando e o X. Isso cortará os componentes e, em seguida, poderemos colá-los na nova página, e isso manterá nossa conexão Se clicarmos aqui, você verá que estamos acessando a página em que nosso componente está agora. Agora, o que acontece se quisermos colocar esses componentes em um arquivo totalmente diferente e conectá-los de volta ao nosso design? O que primeiro precisamos fazer para que isso funcione é ir para o painel de ativos e salvar esse arquivo, mesmo que seja seu arquivo de design como uma biblioteca. Vamos publicar isso, e a parte importante é que os componentes que você está prestes a mover sejam publicados. Agora vamos criar um arquivo adicional. Vou ligar para essa biblioteca. Agora vou selecionar esses componentes e, ao movê-los para a nova página, pressionarei command e x para recortá-los. Agora vou pular para a biblioteca que acabei de criar e vou colá-las. Você pode ver que há um pequeno alerta porque eu a chamei de biblioteca, mas ainda não é uma biblioteca porque precisamos publicá-la. Ele diz que para mover componentes básicos para esse arquivo, publique a atualização da biblioteca. Vamos publicar isso. Você pode ver que aqui está meu botão e meu cartão. Vá para este arquivo e você poderá até obter mais informações. Vamos dar uma olhada no que isso diz. O componente será movido. Esse arquivo e as instâncias serão conectados a esse arquivo daqui para frente. Ótimo. É tudo o que queremos. Avisamos aqui que, quando você move e altera o componente, qualquer pessoa que aceite a atualização da biblioteca pode perder a substituição Então, sim, esse é o grande perigo aqui. As substituições não são necessariamente seguras. Às vezes funciona, às vezes não. Mesmo assim, precisamos movê-los, então vamos clicar em publicar. Agora, ao voltarmos ao nosso arquivo de design, vamos para a primeira página. Agora podemos ver que também estamos recebendo uma pequena atualização para revisar aqui, e você pode ver que movemos esses dois componentes desse arquivo. Queremos atualizar isso, é claro. Agora vamos ver se temos sorte, temos sorte e nossas sobrescrições ainda estão intactas Então, conforme mencionado, às vezes isso pode fazer com que suas substituições desapareçam Agora tivemos sorte de tudo funcionar. Se pularmos aqui para o componente principal, você verá que estou pulando para meu novo arquivo de biblioteca Se voltarmos para nosso arquivo de design na verdade, para o painel de ativos, você verá que isso está consumindo essa nova biblioteca, mas o arquivo em si não é mais uma biblioteca porque não há mais componentes adicionados. Se pularmos aqui para nossa visão geral, vamos dar uma olhada, então você pode ver que agora ele tem um ícone preto e é nossa biblioteca, e nosso arquivo de design volta a ser um arquivo de design. 69. 07 Compartilhamento de design, componentes, estilos e variáveis: Vamos dar uma olhada no que gostaríamos de compartilhar. Então, como documentaríamos nosso design, componentes, estilos e variáveis? Então, deixe-me dar uma visão geral rápida de um arquivo. Vamos começar com os componentes. Armazenamos nossos componentes em nossa própria página separada em nosso arquivo de design ou os armazenamos em um arquivo totalmente separado. Podemos conectar um arquivo de biblioteca separado aos nossos arquivos de design, ou seja, bibliotecas de equipe compartilhadas. Onde quer que você armazene seus componentes, recomendo que você os coloque em seções. Isso criará pastas no painel de ativos, facilitando muito a organização de tudo para você e para qualquer pessoa com quem você esteja compartilhando. Você pode renomear e reorganizar facilmente à medida que seu projeto cresce sem perder as conexões com as instâncias Além disso, você também pode sempre adicionar mais informações sobre seus componentes a essas seções. Mas não se preocupe muito com isso no começo. Comece simplesmente colocando-os em sua própria seção. Outro benefício das seções é que você pode marcá-las como prontas para desenvolvimento. O mesmo princípio se aplica aos nossos estilos e variáveis. Eles podem ser armazenados localmente no mesmo arquivo. Clicar na área cinza da tela fornece uma visão geral no painel lateral direito. Como alternativa, você pode armazená-los em arquivos externos, conectando-se por meio de bibliotecas de equipe compartilhadas aos arquivos de design. Ao contrário dos componentes, não há conexão com nenhum elemento de tela para estilos e variáveis. No entanto, eu recomendo fortemente criar uma visão geral para você, outros designers e desenvolvedores. Para nossas variáveis de cor, isso seria uma folha de estilo de cores. Em seguida, adiciono uma hierarquia tipográfica e informações sobre regras comuns de espaçamento Você também pode incluir outras regras ou outros estilos, como desfoques, sombras e gradientes Isso não apenas ajuda a transmitir informações técnicas, mas também fornece informações sobre uso do projeto e o sistema subjacente Como sempre acontece com o design, estabelecer uma hierarquia visual e funcional é crucial Agora, além dessas diretrizes, obviamente queremos compartilhar nossos designs. Para design móvel, eu só uso um. Mas para aplicativos e sites da web, normalmente tenho duas telas principais. Um para celular e outro para desktop. Não há regras definidas. Adapte isso às necessidades do seu projeto. Portanto, esta é uma página do Figma fornece uma visão geral de todas as telas Algumas equipes também têm uma página por recurso. Novamente, você decide como estruturar isso. E também posso usar seções para estruturar meus projetos e marcar o que está pronto para desenvolvimento. Se você estiver trabalhando com prototipagem, recomendo adicionar outra página para seus protótipos ou talvez até mesmo outro arquivo, pois isso pode envolver alguns ajustes A propósito, eu costumo criar protótipos de fluxos de trabalho críticos, como inscrições e recursos específicos em vez de criar protótipos de todo o produto Você pode usar fluxos para marcar as diferentes seções em seu protótipo Pessoalmente, gosto de reservar uma página do meu arquivo como área de playground para testar comportamento responsivo e quaisquer incertezas No entanto, eu só os incluo na documentação do meu componente ou documentação do projeto se forem relevantes. Eu também uso algum tipo de sistema de gerenciamento de arquivos onde posso adicionar títulos e algumas informações adicionais com marcadores É isso mesmo. Você está pronto para ir. 70. 08 Modo de desenvolvimento Compartilhando com desenvolvimento: Como compartilhar com desenvolvedores usando o modo surdo. Observe que o modo para surdos não está incluído no plano gratuito Então, aqui tenho meu design, que é configurado por componentes, que são armazenados em outra página. Para permitir um melhor compartilhamento com o desenvolvimento, Figma tem o chamado modo surdo Você pode ativar o modo surdo por meio da barra de ferramentas. Você terá a mesma visão geral do design, mas verá que seus painéis à esquerda e à direita mudaram ligeiramente. Se selecionarmos qualquer elemento , podemos ver que, no lado direito, estamos recebendo informações apropriadas para o desenvolvimento. Vamos dar uma olhada mais de perto. Então, primeiro de tudo, podemos ver aqui em cima que isso é um componente e estamos usando uma instância. Poderíamos ir para o componente principal clicando no ícone do componente. Então, aqui você pode ver que ele saltou automaticamente para a outra página e está me mostrando o componente detalhado Podemos inspecionar o componente ou a instância. Então, aqui, por exemplo, se eu selecionar o texto, você pode ver que estou obtendo a cor, neste caso, a variável, a família da fonte, o tamanho e assim por diante. E, a propósito, você pode escolher se deseja que essas informações sejam exibidas em CSS, no IOS, no Android ou também em RAM ou pixels. Isso não é nada com que você precise se preocupar, mas é algo que seus desenvolvedores acharão muito útil configurar Se clicarmos ainda mais em nosso componente, você verá que todas as pequenas distâncias e espaçamentos que configuramos são bem exibidos e podem ser simplesmente copiados Vamos voltar à nossa instância por enquanto. E você pode ver que, ao passar o mouse sobre nossa instância, obtemos todas essas informações, bem como a distância de qualquer item vizinho Outro recurso que eu realmente adoro é que, se você selecionar qualquer instância que faça parte de um conjunto de componentes, você receberá um pequeno botão chamado abrir o playground. E nesse playground, você pode ver as diferentes variantes desse conjunto de componentes. Depois de começar a configurar componentes ainda mais complexos com propriedades de componentes, isso também será exibido aqui. Outra grande vantagem é que todos os seus ativos, por exemplo, imagens, ou aqui em cima, você pode ver nosso pequeno ícone, são muito fáceis de serem baixados. Portanto, você não precisa mais exportar ativos separadamente. Posso ver que isso será baixado automaticamente como um SVG Se selecionarmos essa imagem aqui, você poderá baixá-la em PNG, JPEC ou assim por diante Você também pode clicar em Exportar e até escolher outras resoluções Para resoluções de tela mais altas, você pode escolher dois X, três X e assim por diante e exportá-los em qualquer formato necessário Novamente, nada com que você precise se preocupar como designer, porque agora seus desenvolvedores têm todas essas ferramentas em mãos. Então, esses são todos os detalhes, e você pode até mesmo um link, por exemplo, para recursos para surdos Então, aqui, você pode adicionar um link. Se você já tem componentes configurados, por exemplo, no gup, você pode se conectar aos Tokens e assim por diante Este é um espaço muito, muito poderoso, e eu recomendo fortemente que você se sente com sua equipe de desenvolvimento e dê uma olhada nisso. Além disso , também o ajudará na comunicação geral. Então você pode ver aqui agora que diz pronto para desenvolvimento, e não temos nada marcado. Bem, se voltarmos ao nosso modo de design , o que podemos fazer é desenhar uma seção em torno de qualquer design. Então, você encontra uma seção no menu de molduras ou pode usar os atalhos Shift e S. E digamos que esta versão para desktop aqui já esteja concluída, mas na minha versão móvel ainda estou trabalhando Desenhe uma seção ao redor dela e podemos mudar a cor do fundo para garantir que possamos ver isso um pouco melhor. Se você passar o mouse aqui ou clicar no nome , verá essa pequena placa de pronto para o desenvolvimento aparecendo Se você clicar nela, esta seção e qualquer coisa que você colocar nela serão marcadas como prontas para desenvolvimento. Se voltarmos para o modo surdo, você poderá ver no seu lado esquerdo agora temos tudo pronto para que os desenvolvedores sejam inspecionados E então, assim que eu estiver pronto com minhas outras molduras em meu design, eu poderia simplesmente adicioná-las à minha seção e, a propósito, você pode adicionar quantas seções quiser. Então, se eu voltar para Pronto para o desenvolvimento novamente, agora você pode ver que os dois estão marcados aqui. Se eu clicar neles, aumentarei o zoom e poderei inspecionar isso ainda mais Outro recurso que eu realmente adoro é que ele mostra todas as alterações em seu design. Vamos voltar ao nosso design e mudar isso um pouco. Digamos que estou mudando o preenchimento aqui. O espaço entre eles agora é maior, então algo realmente sutil. Se eu voltar ao meu modo de morte e selecionar esse design, agora posso ver aqui comparar as alterações. Vamos clicar nisso. E agora você pode ver que algumas pequenas alterações foram adicionadas. Então, às vezes, eles são muito sutis, e aqui eu realmente gosto de usar o recurso de sobreposição E agora podemos ver as mudanças e você pode ver essa pequena mudança no preenchimento Se você clicar nele , ele também fornecerá informações mais detalhadas. Além disso, eu sempre recomendo que você adicione mais informações sobre seus componentes e forneça uma visão geral com a folha de estilo de coisas como o uso da hierarquia de cores e tipografia Você pode compartilhar diretamente do modo surdo simplesmente clicando no botão de compartilhamento 71. 99 Obrigado: Parabéns por terminar este curso. Sinta-se à vontade para entrar em contato conosco em Moonlearningt. Estamos sempre interessados em ouvir seus comentários. Você também nos faria um grande favor se pudesse dedicar um minuto e deixar um comentário aqui. Se você gosta deste curso, também dê uma olhada em nossos cursos adicionais em Molearn dot. Nós cobrimos todos os assuntos, desde os fundamentos do design de interface de usuário até o Figma e até mesmo alguns conceitos básicos de código Não deixe de visitar nosso site em molar dot O, onde você também pode se inscrever em nosso boletim informativo