Figma para design de UI e UX: elementos básicos

1. Introdução: Ei lá e seja bem-vindo a este curso que vai te ensinar o essencial de trabalhar com Figma. Ei, eu sou Chris Baron, um designer profissional de web e aplicativos, bem como um instrutor best-seller. Nessas duas horas, você aprenderá a começar a trabalhar com Figma em pouco tempo. E isso é sem nenhuma experiência anterior. Nosso objetivo é se acostumar com o programa enquanto se diverte. É por isso que criei todos os tipos de atividades e exercícios para que você possa melhorar suas habilidades enquanto faz algo divertido e interessante. Figma é a coisa mais nova para projetos de web design e design de aplicativos móveis. Está rapidamente se tornando o padrão do setor. Portanto, é ótimo aprender a ter um novo CD. A Figma compete com o Adobe XD sketch em alguns outros programas. Para fazer este curso, você aprenderá tudo o que precisa saber sobre ele, incluindo o básico sobre como instalá-lo, além de qual é a minha opinião como profissional? É bom o suficiente? É melhor que o Adobe XD e todos esses outros programas? Agora, no final dessas duas horas, você terá um site de reunião concluído, uma colagem. Você saberá como projetar cargas, camadas de texto e terá uma boa compreensão dos fundamentos e Figma. Coisas como mascarar itens, como trabalhar com cores, mas também coisas mais avançadas como trabalhar com grades, efeitos de todos os tipos, componentes e rascunhos. Finalmente, este curso faz parte de uma série e este é o começo de sua jornada. Depois que esta parte estiver concluída, você deve continuar com os próximos passos para que você possa se tornar proficiente na Figma. E com isso, vamos pegar a palavra. 2. O que é Figma e é melhor que outros programas de design?: Ei, isso é agrião, menos conversa sobre Figma. Figma é um programa de design gratuito que permite criar projetos incríveis de design web e de aplicativos. Então, sites, aplicativos Android e aplicativos iOS. Agora que eu digo que é gratuito, sim, é gratuito e não há limitações significativas para o plano gratuito. Você pode conferir a comparação aqui. Basicamente, você não poderá compartilhar coisas dentro de uma equipe, mas isso realmente não é essencial. Se você está trabalhando sozinho, você é o bom atrás. Mais sobre isso em outro vídeo. Agora, a próxima coisa que você precisa saber sobre Figma é que há muito hype em torno disso. As pessoas estão falando sobre Figma e como ela é incrível. Tem um impulso sério. E você pode ver isso neste gráfico aqui, pelo menos em termos de animar seus designs, que é chamado de prototipagem. Agora, Figma parece estar crescendo como louca. Por que os designers adoram tanto a Figma? Bem, eu realmente não posso dizer que há uma coisa específica, mas deixe-me dizer minha opinião. Número um, eu gosto do fato de que várias pessoas podem trabalhar na Figma ao mesmo tempo, no mesmo projeto. Isso é totalmente incrível. Agora, para ser justo, outros programas também estão fazendo isso. Por exemplo, o Adobe XD, a segunda coisa que eu gosto, você pode usar o Figma em seu navegador. Sim, você ouviu isso, certo? Você pode acionar praticamente qualquer navegador, inscrever-se gratuitamente e começar a trabalhar. Seu computador não precisa ser tão poderoso. Você precisará pelo menos do Windows 8.1 ou do macOS Sierra, mas isso não deve ser um problema. Agora, é isso. Nada mais para isso. Uma sugestão, instale o programa autônomo. Isso é o que vamos usar neste curso. Por favor, pause o vídeo, crie uma conta gratuita e baixe o programa. Novamente, você pode usá-lo em seu navegador, mas prefiro usá-lo como um programa. Não vou mostrar como você pode se inscrever porque é como se inscrever no Gmail. É tudo super simples, simples NADH. A terceira razão pela qual eu gosto da Figma é que ela é bastante fácil de usar para iniciantes, mas ela foi construída para lidar com os maiores projetos do mundo agora. Pense em projetos como Lyft ou Uber. Pense em aplicativos que têm quatro ou 500 telas. Figma pode lidar com isso, sem problema. E mais do que isso, Figma permite que você faça alterações rapidamente em centenas de telas. Esse é o verdadeiro poder da Sigma. Na verdade, está sendo usado pela equipe de design da Rubens. Agora, uma coisa antes de avançarmos, Figma no seu navegador versus big man tem um programa autônomo. Não há diferença entre eles. O mesmo programa, os mesmos recursos? Se você preferir trabalhar em um navegador, tudo bem, mas eu gosto de manter as coisas separadas. Então, embora não haja diferenças, novamente, recomendo a versão autônoma do programa. Em seguida, vamos falar sobre Figma versus Photoshop, Illustrator, Sketch, Adobe XD e assim por diante. Primeiro, você não deve comparar Figma com Photoshop e Illustrator. Aqueles para os programas da Adobe são incrivelmente poderosos, mas o della foi criado para outra coisa, completamente diferente. Photo shop é um programa incrivelmente versátil. Ele pode fazer muitas coisas, mas porque é tão capaz, também é incrivelmente lento. É como um navio de cruzeiro cheio de coisas para sua diversão. Mas porque oferece muito, é muito difícil contorná-lo e não é exatamente a definição de velocidade. Para colocá-lo bem. Illustrator, novamente, semelhante ao Photoshop. É um programa fantástico. Eu adoro, mas é tudo sobre trabalhar com vetores. Figma, por outro lado, é tudo sobre web design e adicionar projetos de design. É isso. Todo o programa gira em torno desses dois tipos de projetos. E como se concentra apenas nessas duas coisas, é mais rápido, mais fácil de aprender, mas também é incrivelmente poderoso nesse sentido. Agora, os rendimentos Adobe XD e sketch, que são concorrentes diretos para a Figma. Esses dois programas fazem as mesmas coisas, mas qual deles é melhor com C? Essa não é a pergunta certa. Não existe o melhor programa. Bmw três séries versus Mercedes, classe C versus A4. Qual deles é o melhor? O mais recente iPhone versus o Android mais recente, o que é melhor. Pepsi ou Coca-Cola, o que é melhor. É uma questão de preferência. Claro que nossas diferenças, mas no final do dia, todas elas fazem a mesma coisa. Agora, algo a notar é que Figma é esboços gratuitos de US $9 por mês. O Xd custa cerca de US $10 por mês no momento desta gravação. E o Adobe XD tem um recurso de grade VBD, o que é totalmente incrível. Mas figma tem layout automático e, como você pode ver, é uma lista muito longa de diferenças. Mas, como eu disse antes, não há um vencedor claro. E vamos dizer isso de novo. Há muitas diferenças, mas elas não são algo que você precisa pensar. Confie em mim, mesmo que sejam concorrentes diretos, não posso dizer qual é melhor porque é uma coisa subjetiva. Mais do que isso, tenho um curso de web design no Photoshop e um curso de web design no Adobe XD. No final do dia, não importa o que você usará. O que importa é o que você pode fazer com ele. Vou dizer isso mais uma vez. Não importa com qual programa você escolhe trabalhar. O cliente não se importa, o desenvolvedor não se importa, a comunidade de design não se importa. Vou mostrar a vocês como preparar o design para codificação, e isso funcionará para todos os envolvidos. O codificador não precisará aprender Figma com o Adobe XD com o Photoshop. O cliente não precisará abrir o arquivo de origem e brincar com ele. Isso não é necessário. Então, por causa dessas coisas, você pode usar o que quiser. Se você escolher Figma e alegria do que a Pepsi e a BMW. Isso é ótimo. Se você escolher outra coisa, novamente, é a mesma coisa, não faz diferença. Então, por favor, não se preocupe com isso e não se pergunte qual é melhor. Em vez disso, pergunte a si mesmo qual você prefere? E com isso fora do caminho, por favor, pause o vídeo e certifique-se de ter o Figma instalado como um programa autônomo porque estamos prestes a começar a trabalhar. Obrigado. 3. A tela de boas-vindas no Figma: Olá e seja bem-vindo a esta palestra. Vamos abrir Figma e nos acostumar com isso. É assim que o programa se parece no momento dessa gravação. Inicialmente, há muito o que olhar, mas vamos simplificá-lo. Para criar um novo projeto. Você pode clicar aqui no arquivo de design do lado superior direito. Depois de clicar nele, você será levado para seu novo projeto. Sem perguntas, sem configuração. Grandes mesclagens nos trazem direto para isso. Agora, observe rapidamente, se você vem do Adobe XD ou do Photoshop, não poderá abrir seus projetos na Figma. Agora mesmo. Figma só pode abrir arquivos de esboço e isso é sobre isso. Então você não pode realmente vir de um programa diferente com seus arquivos anteriores. Ok, deixe-me fechá-lo para que eu possa mostrar outra maneira de criar um novo projeto. E isso é com controle e onde você pode se lembrar de N para novo. Então isso é controle. E neste curso estamos interessados apenas em arquivos de design. Portanto, ignore esta outra opção não é necessária. Se você não gosta de ver essa opção, basta marcar esta caixa. Ok, vamos voltar para a tela principal ou para a tela de boas-vindas. É aqui que ele pode ver seus projetos recentes e você pode alterar esta seção clicando aqui. Eu recomendo essa versão em miniatura. Você não verá os mesmos projetos do seu lado porque eles são específicos da minha conta. Esse layout pode mudar com o tempo, então não se preocupe se o seu não se parecer exatamente com este. Por exemplo, aqui temos uma seção de modelo, mas podemos fechá-la caso você queira verificar seu perfil, suas configurações ou sair. Você pode fazer isso daqui agora. Certo, coisas boas. Agora, deixe-me mostrar as coisas importantes. Figma é muito grande em sua comunidade. Clique aqui e você terá um layout totalmente novo. Basicamente, é aqui que você tem uma tonelada de coisas gratuitas, plugins, brindes, coisas que ajudam você com seus wireframes, toneladas de coisas. Você tem uma barra de pesquisa aqui, caso esteja procurando algo em particular. Existem todas essas categorias aqui. Agora, eu sei que isso pode te assustar. É muito para absorver, mas saiba que nada aqui é essencial. Essas são coisas que podem ajudá-lo depois de ter mais experiência sob seu cinto. Esses são recursos que podem torná-lo um designer mais rápido e eficiente, mas depois, como iniciante, você não deve se concentrar neles. Em vez disso, proponho que você aprenda os princípios do Web Design. E depois de ter uma base sólida, você pode começar a explorar esses arquivos. Mais uma vez. Alguns deles são legais, mas não no início. Agora, como voltamos para a tela principal? Bem, se você clicar aqui, nada vai acontecer. O que você realmente precisa fazer é clicar nesta seta aqui. Isso vai te levar de volta. Portanto, temos recentes, rascunhos e comunidade. Oh, a propósito, isso está no Beta. Portanto, isso pode mudar quando você estiver assistindo a este vídeo. Se for esse o caso, não se preocupe, a funcionalidade será a mesma, ok? E quando você estiver na comunidade, você pode voltar clicando aqui. Certifique-se de verificar esse destaque, eu conheço entre a guia recente por causa dessa cor azul. Se você clicou em um projeto de equipe por engano, você obterá outro layout. Falando em julgamentos, Figma permite que você trabalhe com vários designers ao mesmo tempo, no mesmo arquivo. Deixe-me reorganizar rapidamente minha configuração. Eu tenho o programa autônomo de um lado e meu navegador do outro lado. Vamos imaginar que este seja outro designer. Agora, enquanto eu movo meu mouse, você pode vê-lo aqui também. Então é assim que é trabalhar com várias pessoas no mesmo arquivo. Mas isso não é para todos, então não vamos entrar nisso. Falando em coisas que não vamos cobrir muito foi essa outra coisa chamada geléia de figo. Podemos vê-lo aqui no canto superior direito, mas também quando clicamos em Control N, e não marcamos essa caixa na parte inferior. Muito rápido. A geléia de ovos é um quadro branco que você pode usar para esboçar suas ideias. Deixe-me mostrar como isso se parece. É basicamente um lugar onde você pode fazer brainstorming de ideias, esboçar coisas, criar uma estrutura para seus projetos e assim por diante. Mas pense que jam é uma ferramenta separada, não é essencial para o nosso trabalho de web design, então não entraremos nisso. O Jam é ótimo para reuniões online onde várias pessoas querem discutir algo. Ele funciona diretamente no seu navegador. É intuitivo, por isso é fácil começar. Mas, novamente, como não fazemos parte de uma equipe ou de uma empresa, vamos colocá-lo ao lado. Sei que você pode estar curioso sobre isso, mas há uma hora e um lugar para isso e não é agora. Confie em mim nisso. Certo. Vamos fazer uma pausa rápida e continuaremos em um segundo. 4. Primeiros passos com Figma: Bem-vindo de volta. Vamos começar a trabalhar. Mas eu encorajo você a assistir a maioria dos vídeos, especialmente suas mãos em alguém duas vezes. A primeira vez que você assiste. Não tente trabalhar junto. Basta assistir e entender o que está acontecendo quando você chegar ao final do vídeo, reiniciar e assistir novamente, desta vez fazendo uma pausa frequência necessária para trabalhar junto. Esta é de longe a melhor maneira de aprender. Então, novamente, não tente trabalhar comigo em sua primeira visualização. Em vez disso, faça isso na segunda vez que assistir ao vídeo. E, por favor, não use seu telefone. É muito pequeno e você não entenderá o que está acontecendo. Certo, vamos começar. Crie um novo projeto com controle e, ou clicando aqui, tudo parece tão vazio. Mas vamos criar um segundo projeto usando o mesmo controle de teclas de atalho. E tudo bem, vamos dar uma olhada rápida aqui. Nossos projetos são mostrados como guias. Se quisermos voltar para nossa tela principal, podemos clicar aqui neste ícone Home. Assim mesmo. Mova-se entre projetos. Basta clicar nos nomes. Neste momento, ambos são chamados de Untitled. Para alterar esse foco aqui no meio da página. Clique aqui e agora podemos renomeá-lo. Vou chamá-lo de Kress ganhou. Agora vá para o outro e renomeie isso para pressionar também. Então, o Projeto 1 e o Projeto 2, certo? Agora vamos criar um retângulo pressionando R, R para a ferramenta retângulo, ou você pode simplesmente clicar aqui. Você pode ver que essa ferramenta é a selecionada porque ela tem esse destaque azul. Agora vamos arrastar um. É cinza em cinza, então isso não funciona. Vamos mudar essa cor. Isso sempre é feito desse lado direito. Esse painel muda com base no que está selecionado. Você sabe, o retângulo é selecionado porque ele tem esse destaque azul. Se clicarmos em qualquer outro lugar, observe que temos poucas opções aqui. Certo? Selecione o retângulo e, no lado direito você encontrará Phil lá. Por favor, clique neste quadrado, não nas letras a propósito, no quadrado, também conhecido como a amostra. Certo, isso vai abrir o seletor de cores. Este é o seletor de cores. Escolha qualquer cor aleatória e, em seguida, pressione a tecla de escape ou o botão fechar. Mas se você clicar nos caracteres, poderá digitar manualmente o código de cores. Tudo bem também, mas não é isso que queremos agora. Certo. Agora temos um quadrado vermelho dentro de Chris, para ir para as abas e a cabeça, este símbolo X, para fechá-lo. Agora, isso é realmente importante. Nós apenas salvamos todo o trabalho que acabamos de perder. Isso aconteceria. Ouça, está tudo bem. Clique no ícone Início. E na facada recente, você verá agrião, este é o primeiro na lista porque é o último projeto em que trabalhamos. Se você quiser abri-lo, clique duas vezes nele. Então, o primeiro ponto essencial é que o Figma funciona com guias exatamente como qualquer navegador. Se você quiser alternar entre guias, clique nelas. O próximo ponto essencial, Figma sempre salva seu trabalho, então não há necessidade de usar o Control S ou qualquer outra tecla de atalho. Figma salva tudo automaticamente. Mas isso traz a pergunta, onde o projeto é salvo? Bem, eles não estão no seu computador local. Tudo é salvo na nuvem. É por isso que Figma é incrível. Se você fizer login em qualquer outro computador, você terá acesso a todos os seus arquivos. É assim que várias pessoas podem trabalhar no mesmo projeto. Já que tudo está na nuvem. Então, na Internet, todos têm acesso a ela. Pense nisso. Se o arquivo estiver na sua unidade, outras pessoas teriam que se conectar ao seu computador e isso não é legal. Mas como o arquivo fica no servidor, na web, todos podem acessá-lo. Ou seja, se você permitir que eles, é claro, a nuvem é segura, rápida e muito fácil de se acostumar. A desvantagem é que você precisa de acesso à internet. Agora não é o fim do mundo. Se você estiver em um voo ou se desconectar por algumas horas. Depois de voltar online, o projeto será carregado para a nuvem mais uma vez. Mas digamos que você não goste de trabalhar assim. Talvez você esteja acostumado a photoshops maneira de salvar arquivos. Você tem esse PSD no seu disco rígido. Você pode copiar, colá-lo em uma unidade USB, enviá-lo por e-mail e assim por diante. Bem, o problema é que todos estão se movendo para a nuvem. O Photoshop também tem essa opção. O Adobe XD é grande na nuvem. Até o esboço deixou a chave muito clara de que a nuvem é o futuro. Meu conselho, não lute contra isso, mesmo que você não esteja confortável agora, experimente. Contanto que você nomeie os projetos de forma decente. E você pode ver as miniaturas. Você deve ser capaz de encontrá-los rapidamente, mas apenas no caso de você simplesmente não conseguir lidar com isso. Por favor, clique aqui no logotipo da Figma. A partir daqui, vá para Arquivo. Agora escolha salvar cópia local. Novamente, eu não recomendo isso, mas saiba que você pode fazê-lo. Há mais alguns detalhes aqui e ali, mas vamos entrar em um projeto para sujar nossas mãos. Vamos trabalhar em algo. 5. As melhores maneiras de se mover no Figma: Bem-vindo de volta. Vamos falar sobre as melhores maneiras de se locomover e Figma. Primeiro, vá para a guia de arquivos recentes e clique com o botão direito do mouse nesses dois projetos que criamos anteriormente. Para excluir o projeto, basta clicar com o botão direito do mouse na lista e escolher o salto. Ok, apenas no caso de você ter cometido um erro, você sempre pode ir para rascunhos e partir daí, você tem uma seção excluída. Certo? Agora, vamos criar um novo arquivo para controlar a terra, o que, qualquer método que você preferir, e vamos começar a trabalhar. Inicialmente, sei que tudo parece tão vazio. Qualquer projeto começa com um quadro. Essa é a primeira coisa que você precisa se lembrar. A moldura é como uma placa de arte ou uma tela, mas há um pouco diferente em Figma é um lugar onde você adiciona todas as suas imagens de texto, basicamente seu conteúdo Isso está tudo dentro do quadro. Não se preocupe com a definição. À medida que trabalhamos, você logo conseguirá. Para adicionar um quadro. Por favor, pressione F para ativar a parede emoldurada ou simplesmente clique aqui. Oh, a propósito, faz outra ferramenta aqui chamada “fatia dwell”, mas não queremos isso. Ok, temos a Ferramenta Frame selecionada e o painel direito acabou de mudar. Você tem muitas opções que são muito bem organizadas. Telefone, tablet ou desktop e assim por diante. E você pode clicar nos nomes para abri-los ou fechá-los. E se você clicar em qualquer um deles, digamos iPad Mini, o quadro será adicionado automaticamente. Você também pode vê-lo no painel de camadas. Veja esse símbolo aqui que parece uma hashtag. Esse é um quadro para excluí-lo. Basta tocar na tecla Delete e pronto. Ok, vamos passar para a seção da área de trabalho e escolher o primeiro item desta lista, que também é chamado de desktop. Podemos ver o tamanho aqui. É 1440 por 1024, então você o tem. Agora o problema é que maioria dos projetos de web design deve começar com um quadro de 1920 por 1080. É por isso que recomendo vivamente a melhor maneira de redimensioná-la é usar essa parte aqui. W significa a teia, e h significa altura em vez de 1440, clique aqui. E agora você pode digitar em 1920. A mesma coisa para a altura que estamos procurando, depois 80. Agora o quadro se expandiu e não conseguimos vê-lo muito bem. Aqui está o que você precisa fazer. Aumente ou diminua o zoom. Mantenha pressionada a tecla Control e use a roda do mouse. Se você rolar para trás, você reduzirá o zoom. Se você rolar para frente, você aumentará depois de fazer isso algumas vezes vai se sentir natural. Por favor, use a mão esquerda, idealmente seu mindinho, para segurar a tecla de controle esquerda no teclado. Agora use seu pergaminho. Por favor, faça o seguinte. Mova o mouse na coordenada do quadro e amplie. Como você pode ver, isso realmente ajuda você a se concentrar nessa área. Agora, diminua o zoom e mova para outro canto. mesma coisa. Amplie rolando para a palavra. Sei que isso parece ser algo muito básico, mas confie em mim, é essencial que você pratique. Você não pode seguir em frente até dominar essas coisas. Há mais uma coisa que você precisa saber como usar, e essa é a chave da barra de espaço. Diga isso com Zoom, em seguida, para um canto e com muito feliz com o nível de zoom. Mas agora queremos nos mudar para o outro canto. Isso se chama panning. Panning ao redor. Segure a tecla Barra de espaço e o cursor do mouse mudará para uma mão. Se você soltar a tecla da barra de espaço, ela voltará para os dados padrão, O movido bem, então novamente, segure a barra de espaço, clique em segurar e mova de coordenada para coordenada, de um lado para lado, para cima e para baixo. Ao conseguir dominar essas duas técnicas simples, você está criando uma base muito sólida. Este é o seu alfabeto. Esta é sua matemática básica e básica. Por favor, aprenda. Não há como contornar isso. Para recapitular, mantenha pressionada a tecla Control e use a rolagem do mouse para ampliar ou diminuir e mantenha pressionada a tecla Barra de espaço, clique e segure para mover-se de lado para o outro, girando. Ok, por favor, comece um projeto vazio e pratique-o porque a próxima palestra será um exercício. 6. Exercício: como mover elementos ao redor: Bem-vindo de volta. Este é o nosso primeiro exercício. Aqui está o que eu quero que você faça. Faça o download deste arquivo chamado primeiro exercício que FIG. Quando você encontrá-lo, por favor, arraste-o para Figma. Você deve ver um destaque azul. Isso é um bom sinal. Solte-o e o arquivo será importado. Se você não gosta de arrastar e soltar, faça isso. Vá para a guia Início. Do lado direito, você verá esse ícone aqui, logo abaixo do seu avatar. Clique nele e você poderá procurar esse arquivo, selecioná-lo e isso fará a mesma coisa. Você vai abri-la. Isso é o que eu recomendo, ok? Neste projeto, você verá dois quadros no painel de camadas. O primeiro é chamado de quadro pequeno, e o segundo, cérebro grande. E essa é basicamente sua tarefa. Você precisa ampliar esse quadro no lado direito, selecionar um desses ícones e movê-lo para o quadro grande. Como você pode ver, você precisa usar a tecla da barra de espaço para se deslocar e você precisa ampliar e diminuir o zoom. Quero o assento para ícones em todos os cantos do quadro grande. Essa é a sua tarefa. Certifique-se de movê-los um de cada vez. Não trapaceie. Não é divertido dessa forma. E, por favor, não mova os quadros juntos, deixe-os como estão. Agora, uma última coisa, você notará que o quadro pequeno tem outro quadro dentro dele. Chama-se emoldurado para. Eu não quero que isso seja movido para dentro do quadro grande, apenas o ícone. Veja como você pode gerenciar isso. Agora, se você estragar qualquer coisa, praticamente qualquer coisa, você sempre pode usar o Control Z para desfazer várias etapas. Ok, quando terminar, exporte o quadro grande como PNG e compartilhe-o na plataforma para que eu possa vê-lo. Veja como você pode exportar na Figma. Selecione o quadro grande clicando neste nome. Por favor, esteja ciente de que, se você simplesmente clicar dentro dele, você não selecionará isso. Então clique no canto superior esquerdo ou você pode usar o painel de camadas. Basta clicar lá. Ok, agora mova o paciente para o lado direito da tela. A última opção aqui é chamada Exportar. Está acinzentado, mas você pode clicar nele. A partir daqui. Temos algumas opções. Vamos ficar felizes com um X e B e G. Então, assumindo que terminamos o exercício, podemos apertar este botão e vamos pegar essa janela. Gosto de salvar coisas na minha área de trabalho. Acho que isso é ótimo. Certo, clique em Salvar. E isso vai ser que, por favor, comece a trabalhar dois ícones em cada canto do quadro grande. Como você os organiza, isso depende totalmente de você. O que eu gostaria de ver um bom layout. Não continue com o curso porque no próximo vídeo, vou mostrar como resolvê-lo. Por favor, faça uma pausa e comece a trabalhar. Muito obrigado. Divirta-se com isso. 7. Soltar o exercício e algumas dicas profissionais: Olá e bem-vindo de volta. Você fez os exercícios por conta própria? Caso contrário, pare o vídeo agora mesmo. Sei que parece tão simples e tenho certeza que você entende o que precisa fazer, mas precisa praticar. velocidade requer uma outra prática. Ok, aqui está uma solução e algumas dicas para ser um pouco mais rápido. A maneira regular de fazer isso é ampliar um pouco e clicar no primeiro ícone. Agora, diminua um pouco e mova-o para o quadro grande. Não importa se você fizer isso em um único movimento ou, por outro lado, você pode fazê-lo em várias etapas. Você amplia novamente, seleciona um e, em seguida, move-o para a borda esquerda da tela. Segure a barra de espaço, clique em Segurar e deslocar para a esquerda. Agora mova-o novamente. E, se necessário, faça isso mais algumas vezes. Agora, quando você coloca o segundo ícone, sugiro que você tenha cuidado com essas linhas vermelhas. Isso ajuda você a alinhar as coisas com precisão. Não me importo onde você coloca os ícones no canto do quadro, mas gostaria de vê-los alinhados. Ok, agora, esta é a maneira padrão de trabalhar e sugiro que você faça o exercício dessa maneira pelo menos duas vezes. Ok, agora dê alguma alternativa. Você pode ajustar o nível de zoom para um ponto que você vê os dois quadros na mesma tela. Agora pegue o pequeno e mova-o ao lado do grande. Isso seria trapaça e eu não encorajo você a trabalhar dessa maneira para esse exercício específico. A ideia é aprender a ampliar e diminuir e girar, mas isso tornará as coisas muito mais fáceis e podemos aprender algumas outras coisas. Aqui está outra dica. Se você clicar e arrastar e criar um retângulo, você selecionará alguns dos ícones do quadro pequeno. Verifique o painel de camadas para isso. Veja como a marca de seleção no Chevron agora está destacada. Isso é bom. Mas se você clicar e arrastar a coisa toda, agora você selecionará todo o quadro. O ponto essencial é que você pode selecionar vários itens arrastando para fora da caixa. Se os pântanos forem implorar, você selecionará o quadro em si. Portanto, certifique-se de anotar isso. Ok, agora aqui está outra maneira de trabalhar. Selecionarei o menos e arrastarei sobre o quadro grande. Observe que Figma o move imediatamente no painel de camadas. Isso é incrível. Então, sempre que você mover uma camada acima da chuva, ela a engolirá. Por favor, anote isso. Ok, agora vou adicionar rapidamente o retângulo aleatório. Observe o painel de camadas. Isso fica acima dos dois quadros. Mas se eu movê-lo sobre o grande, bem, lá vai você. Ele só acompanha. E se você movê-lo para fora, Figma é inteligente o suficiente para removê-lo desse cérebro. Por sinal, caso você não tenha certeza se esse retângulo está dentro do quadro, você pode simplesmente fazer isso. Clique aqui para fechar o quadro. Isso é o que essa flecha faz. Agora podemos ver que esse retângulo está flutuando ao redor. Não faz parte de nenhum quadro. Mas e se arrastarmos no quadro grande usando o painel de camadas com se fizermos isso daqui, bem, aqui está a coisa. Ele faz. Mova-o no painel de camadas, mas não na tela real. Você pode ver o destaque aqui. Isso não é tão bom. Mas podemos fazer mais uma coisa. Diminua o zoom para um ponto em que você pode ver o quadro grande. Agora foque aqui no canto superior direito. Clique nesses dois ícones, o segundo e o quinto. E assim, os retângulos ficam bem no meio do quadro. Agora, como isso nos ajuda? Bem, podemos selecionar o símbolo de menos, e uma vez que ele esteja dentro do quadro grande, podemos usar os mesmos mundos de alinhamento. Desta vez, vamos usar uma linha certo? E depois disso terminar, alinhe a parte inferior, amplie esse canto e, em seguida, lá vai você. Certo, agora repita o processo. O problema é que você pode ter uma sobreposição. Isso não é um grande negócio porque esta é uma ótima maneira de apresentar as teclas de seta no teclado com este ícone selecionado, segure, Shift e toque na tecla de seta para a esquerda. Isso moverá o ícone e os incrementos de 10 pixels. Então, se você quiser se mover a 20 pixels para a esquerda, são duas guias. Um em coisas legais. O ponto essencial é que, quando você seleciona um item que está dentro do quadro, você pode usar as ferramentas de alinhamento para reposicioná-lo rapidamente dentro do quadro. Vou dizer isso de novo. Figma sabe que isso está dentro do quadro. Isso significa que podemos usar as ferramentas de alinhamento, reposicioná-las assim. Mais uma coisa a observar, digamos que movamos para mais ícones através do painel de camadas. Esta não é a melhor escolha, mas ouça-me. Agora. Digamos que queremos usar os poços de alinhamento. Isso não funcionará como esperado porque há dois elementos selecionados. E isso porque quando Figma vê dois elementos selecionados, se coisas que queremos alinhá-los entre si. Então, meu conselho, basta fazer isso um de cada vez quando ícone e, em seguida, use as ferramentas de alinhamento e depois o segundo ícone. E novamente, as ferramentas de alinhamento com quase pronto. Vamos passar rapidamente para o próximo ícone, que tem outro cérebro. Isso é algo para estar ciente. Aqui está a coisa. Anteriormente, fomos acima do ícone, clicamos e ele foi selecionado facilmente. Mas aqui isso não funcionará. Verifique o painel de camadas. Vou clicar no plano de fundo para cancelar a seleção. Certo, agora vou me mover acima do ícone e clicar nele. E observe que o quadro secundário está realmente selecionado. Para chegar ao ícone, temos que clicar duas vezes acima dele. Agora o quadro se abriu e podemos fazer o nosso negócio com o ícone. Vamos fazer isso de novo. Caso você tenha um quadro dentro de um quadro e há uma camada dentro da qual você deseja selecionar. Você terá que clicar e clicar duas vezes para descer o nível. Certifique-se de manter um olho no painel de camadas para saber o que está acontecendo. Não é um grande negócio, mas você precisa ter certeza de que você tem o banco certo selecionado, ok, no final do dia, isso é o que eu gosto de ver de você. Todos os contras morrem bem alinhados. Certifique-se de assistir a este vídeo mais uma vez para realmente entender todos os principais conceitos. Obrigado e divirta-se com isso. 8. Descubra a interface de Figma e por que profissionais usam a sua: Bem-vindo de volta. Quando você abre o Figma, parece um programa de design básico. Vamos abrir novos projetos para que possamos conferir a interface e realmente entender onde a Figma brilha. Certo, aqui estamos nós. O projeto está completamente vazio, então não há muito o que olhar, mas vamos tirá-lo do topo. Sempre temos o ícone de casa aqui que nos permite voltar a esta tela. Podemos querer fazer isso para abrir outro projeto. O que talvez confira a guia da comunidade ao lado do ícone inicial, temos nossas guias do projeto. Essa parte é muito semelhante ao seu navegador, então passaremos para a barra de ferramentas. É aqui que, começando a pensar, este é um programa super simples. E isso porque temos tão poucas ferramentas. O primeiro ícone nos mostra muitas opções. Aqui temos nosso menu principal e podemos fazer muitas coisas. Mas aqui está a coisa. Você não usará isso com tanta frequência. A maioria dessas opções tem teclas de atalho que são muito mais fáceis de usar. Ninguém vem aqui para criar um novo arquivo, por exemplo, em vez disso, a maioria das pessoas usa o Control N. Portanto, tenha isso em mente. Não usaremos esse menu com tanta frequência. Ok, Ao lado deste menu principal, temos algumas ferramentas e fato, são apenas algumas delas. A primeira é a ferramenta de movimento, e isso faz exatamente o que você acha que faz. Ele move as coisas ao redor, esteja em camadas ou nos quadros de glicose ou o que for selecionado. Por baixo dela, temos a ferramenta de escala. Isso é ótimo quando você quer redimensionar as coisas e temos uma palestra sobre isso. O próximo aqui é o quadro a parede. Esse tipo de parece um símbolo de hashtag. Não é o caso. Como você está prestes a ver, esta é realmente uma ferramenta muito útil. Temos uma palestra completa sobre isso também. Seguindo em frente, temos as formas clássicas, retângulo, linha, seta, elipse, as obras. 95% do tempo, você usará a ferramenta retângulo. Isso é apenas material básico de web design. No final desta lista, você tem a opção de trazer uma imagem para a Figma. Como você pode ver, isso inicia a janela de navegação. Escolha qualquer imagem e você está pronto para ir. E, claro, temos uma palestra dedicada sobre isso também. Ok, agora, por favor, note que os dois últimos mundo é o primeiro aqui. Então, é melhor você memorizar algumas teclas de atalho, por exemplo, são para retângulo. V para a ferramenta de movimento não é tão bom, mas você deve se lembrar disso. V para a ferramenta de movimento, ou basta clicar nesta pequena seta e selecionar a mais útil. E essa é a ferramenta retângulo neste caso. Em seguida, temos a ferramenta de caneta clássica, mas não a usaremos porque a maioria dos nossos ícones e gráficos virão da web. A ferramenta de texto está aqui, tecla de atalho P, é muito simples. Word mais algumas outras ferramentas aqui que, para ser honesto, elas não são tão ótimas, isso nem tudo tão interessante. Ok, vamos adicionar o quadro e , em seguida, um retângulo aleatoriamente. Só para que tenhamos algo para ver em nossas telas. Talvez uma camada de texto dois. Certo? Agora, no painel Camadas, você verá esses itens. Todos eles têm símbolos diferentes. À medida que continuarmos, você logo começará a aprendê-los. Quando você tiver algo selecionado, o painel direito mostrará propriedades dessa camada específica. Por exemplo, aqui podemos alterar a família de fontes, o tamanho, a cor e assim por diante. Mas se selecionarmos o retângulo, há menos opções. E se clicarmos em qualquer outro lugar, desmarcará a seleção e esse painel será apenas sobre eles. Aqui está a coisa. Pegue o retângulo novamente. Este painel direito está definido para o modo de design. E você pode ver isso aqui no topo. Há também um modo de protótipo que ajuda você a tornar um design interativo. Não vamos nos concentrar nisso, especialmente na primeira parte. E há também um terceiro modo aqui, inspecione. Isso lhe dá um pouco de código CSS e isso é basicamente útil para codificadores. Agora, o importante é que você fique com o modo de design. Ok, agora seguindo em frente, a próxima coisa. Você tem o nível de zoom aqui. E isso é algo que você deve olhar constantemente. A parte importante são essas teclas de atalho aqui, especificamente mude uma, Shift Z. Você não precisa se lembrar deles porque você sempre pode confiar em controles rosnando, mas saiba que isso está disponível aqui. E, novamente, o zoom para o nível de zoom correto é muito importante. Em seguida, o ícone de reprodução é o objetivo da apresentação quando você deseja conferir seu design sem distrações, sem ferramentas e outras coisas. Isso também é bom quando você tem um protótipo interativo. Mas, novamente, esse não será o caso aqui no início. Seguindo em frente na interface, este é o seu avatar. O meu é c para o Kress. Sem várias pessoas em um projeto ativo ao mesmo tempo, você verá que eu tenho toalhas aqui. E, finalmente, o botão de compartilhamento. Isso é realmente útil quando você quer mostrar seu trabalho ou quer convidar outros designers para trabalhar com você no mesmo arquivo? O recurso de compartilhamento é ótimo porque você pode enviar o design como um link via e-mail ou o que quer que seja, depois continuar trabalhando nele. Se você enviar o arquivo PNG, isso é como um instantâneo e, obviamente, isso não muda. Então, compartilhar o link é melhor porque você pode continuar trabalhando nele. E quando o cliente abrir o link, você pode ter corrigido o grande problema. Ok, no meio da interface, no topo, você encontrará alguns ícones, e estes são muito poderosos e os usarão bastante. Como sempre, terá palestras separadas sobre eles. Finalmente, à esquerda, há uma guia aqui chamada ativos. O que nossos usuários que querem tirar o máximo proveito da Figma. Isso é muito importante. Mas se você teve o começo, não tanto. Vou explicar tudo mais tarde. Só saiba que temos uma guia separada aqui. Sem portão. Agora, qualquer design pode ser dividido em várias páginas. Isso é útil quando você tem um projeto grande Com dezenas ou até centenas de telas. Pense em um projeto de web design com 20 páginas mais a versão do tablet, além da versão móvel, depois em um aplicativo Android e, em seguida, no aplicativo iOS, esse é um projeto enorme, então você faz precisa de alguma maneira de organizá-lo. Bem, você pode fazer isso através de páginas. Para ser honesto, existem várias maneiras organizar projetos enormes, mas as páginas definitivamente fazem parte disso. Ok, agora vamos dar um passo atrás e nos concentrar na parte essencial. A principal força da Figma, o que torna a Figma fantástica é a capacidade de dimensionar seu trabalho. Ou seja, com essas ferramentas básicas e alguns recursos avançados, você pode criar uma maneira de trabalhar que permitirá criar rapidamente dezenas de telas. Este é o verdadeiro poder da Figma, a capacidade de criar grandes projetos sem dores de cabeça, com facilidade. Para iniciantes, novamente, isso não é tão importante. Não criaremos projetos de 100 páginas neste curso, mas é melhor você saber sobre os pontos fortes da Figma desde o início. Novamente, a uber usa , a esquerda usa isso. E algumas outras grandes empresas são grandes panelas ou Pigma. Mas para nós, agora é realmente tão importante. Ok, com isso dito, vamos continuar. 9. Crie seu primeiro mini: Bem-vindo de volta. Temos uma atividade prática em que eu quero que você siga meus passos em sua segunda visualização. Na primeira vez, por favor, assista e entenda como abordo esse exercício. Na segunda vez que você assiste o vídeo em pausa sempre que precisar para trabalhar junto. Por favor, não tente trabalhar na primeira visualização. O objetivo é criar um mini site usando todos esses itens. O mais importante, por favor, divirta-se com ele. Sem pressão alguma. Sei que é muito cedo no curso, mas quero mostrar como é fácil se você tiver a abordagem certa. Comece pelo painel de camadas. Observe o que temos aqui, um logotipo, alguns itens para o menu principal, um fardo, uma foto, um fundo do menu principal e assim por diante. Então, as coisas são bastante organizadas. Vamos começar com o logotipo. Onde nossos logotipos normalmente são colocados na maioria dos sites. Está no canto superior direito? Está na parte inferior? Não, claro que não. O logotipo geralmente é colocado aqui no lado superior esquerdo. Então clique nele para selecioná-lo e arraste-o para o lugar onde exatamente. Bem, isso não importa neste momento agora. Ok, agora e o menu principal? Onde você costuma encontrar isso? Se você não tiver certeza, basta abrir seu navegador e conferir alguns dos seus sites favoritos. Normalmente, o menu principal fica à direita do logotipo. Por favor, mova-os um por um, assim. E você notará que o estigma é treinado para nos ajudar com essas linhas vermelhas e é totalmente bom trabalhar dessa maneira. Leve seu tempo com ele. Sem pressão. Depois de organizá-los aproximadamente, algo assim, clique em qualquer lugar na superfície y e arraste uma caixa. Ok, é assim que podemos selecionar todos eles. Agora, você pode ver que esse é o caso no painel de camadas. Verifique isso. Ok, agora use este ícone aqui para alinhá-los na parte inferior. Isso os organiza rapidamente. É um pouco mais rápido. Ok, mais um passo, clique aqui, e você terá uma opção chamada de ideia, o que basicamente significa limpá-la para mim. E assim, o menu principal parece muito bom. Se você realmente quer ser exato, você pode fazer isso. Mova isso do caminho. Por sinal, selecione o logotipo e o menu principal. E agora você pode usar esse ícone aqui, que centra, então isso é opcional, mas faz com que pareça um pouco melhor. Em seguida, selecione o retângulo branco e mova-o para cima. Este cinza obviamente não funciona tão bem. Então, vamos para o lado direito e ele procurará algo um pouco melhor. Gosto de cores brilhantes. Então eu acho que vou usar este, por exemplo. Isso parece melhor, mas um ótimo texto obviamente é agora. Certo. Então, aqui está o que podemos fazer. Selecione todos esses elementos assim. Ok, do lado direito, procure esta amostra cinza. Aqui está. Clique nele e abra o seletor de cores, que deve ser bastante fácil de trabalhar. White vai ser muito melhor. E, de fato, é ótimo. Feche este painel e agora vamos centralizá-los mais uma vez apenas para medidas seguras. Use este ícone aqui. Se você não tiver certeza de qual é qual, basta experimentá-los e usar o Control Z para desfazer. Explore. Seja curioso, essa é a essência. Certo, para o botão, mova o texto dentro disso. Se você olhar com cuidado, verá figma. Vamos tentar ajudá-lo LK. Quando isso for feito, selecione o retângulo e abra o seletor de cores mais uma vez. Queremos a mesma cor. Observe que Figma está novamente pulando para nossa ajuda. Temos del option aqui. Mas se você não conseguir vê-lo, você também pode usar esse ícone aqui. Clique no menu principal, e isso é sobre isso. Temos a mesma cor, mas e o texto? Bem, precisamos torná-lo branco. Claro, não há outra opção decente. Certo? As coisas estão indo bem. Ok, selecione a imagem e traga para cima. Certifique-se de que você pode ver o quadro inteiro para alinhá-lo corretamente. Isso é perfeito. Certo. Precisamos lidar com o título e a descrição. Para o título, altere seu tamanho para 40 pixels. Isso é para o z. Agora podemos vê-lo muito melhor para a cor branca é. O branco está sempre no lado superior esquerdo do seletor de cores. Vá até o canto. Você sabe, é branco puro. Se diz FF, FF, FF aqui. Então Fs para o outro pedaço de texto, 18 pixels, por favor, isso é 18, e por favor, torne-o branco também. Agora, eu sei que isso pode parecer rápido, mas quero mostrar como as coisas simplesmente se encaixam. Ok, a última coisa, esses itens estão por todo o lado. Para onde devemos movê-los? Bem, o melhor lugar é aqui do lado esquerdo. Mova o Paypal até ver uma linha vertical vermelha que sobe em direção ao logotipo. Isso é o que queremos. Cf. Isso é perfeito. Faça o mesmo com a outra camada FX. Leve seu tempo com ele. Espero que você esteja assistindo isso em um computador e espero que esteja trabalhando comigo. Finalmente, com o fardo, basta movê-lo para o lugar um de cada vez. Está tudo bem. E, no geral, este é o nosso mini site. Aqui está o que eu quero que você se lembre. Você não precisa ser criativo. Você precisa conhecer as regras. Um deles é alinhar as coisas é muito importante. Sei que pode ser chato, mas na verdade é essencial para o logotipo e o menu principal, para o fardo, para o alinhamento dessas camadas. São todos pedaços muito importantes. Veja como seria sem o forro deles. Apenas um olhar sobre como seria sem nenhum alinhamento. Então está tudo bem, parece horrível. Então, novamente, o princípio é bastante básico, mas poderoso. Alinhe tudo, use o alinhamento de dois mundos, ok, em termos de cor, escolhemos uma cor brilhante e o resto era branco puro. Branco puro, não amarelo, não verde, nem nada mais. Apenas branco para a cor principal. Não faria sentido escolher algo assim, certo? Tudo tem que fazer sentido. O título é maior que a descrição porque precisa se destacar. Então, esses são alguns dos princípios em que dependerão. Falaremos sobre eles em detalhes em outras palestras. Mas, por enquanto, diga-me, você precisa ser criativo para fazer isso em menos de 10 minutos. Criamos um mini site, e tudo foi baseado em alguns princípios. Alinhe as coisas corretamente, use boas cores, usa layout padrão. O logotipo à esquerda, o menu principal à direita e assim por diante. É assim que vamos trabalhar. Não vamos esboçar, não vamos desenhar, não seremos criativos. Aprenderemos princípios fundamentais como alinhamento, simetria, topografia, contraste e criaremos coisas incríveis juntos. Isso porque é isso que o cliente precisa. Isso é o que o contratará e isso vai colocar dinheiro em sua conta bancária. Agora, por favor, faça uma pausa, retroceda e comece a trabalhar. Quero ver sua versão com uma cor diferente. Sei que é um pouco cedo, mas acredite em si mesmo, você pode fazê-lo. Estou aqui para ajudar o máximo que puder. Leve isso como um desafio divertido. No final, clique no quadro e escolha Exportar. Em seguida, exporte mais uma vez , carregado e pronto. Ok, muito obrigado e procuro isso do que ver seu design. 10. Os ícones de edição: cores e tamanho: Bem-vindo de volta a um exercício. Esse arquivo é chamado de ícones de edição e você o anexa na pasta de recursos. Como lembrete, vá para a guia Início e clique neste ícone para importar para o arquivo Figma. Vamos trabalhar nesse conjunto de ícones que já conhecemos. Digamos que você queira redimensioná-lo, certo? Se você apenas pegar uma alça de canto e começar a arrastar, bem, veja o que acontece. O ícone fica maior e se você segurar Shift, ele fica maior proporcionalmente. Mas observe que fica mais fino. E se você fizer menor, cintura menor, bem, fica mais espessa. E essa é uma boa chance você não querer que isso aconteça. Então, aqui está a solução. Concentre-se no lado superior esquerdo da tela e clique nesta pequena seta. Isso revelará a ferramenta de escala. Isso é o que queremos usar a ferramenta de escala. Agora podemos redimensioná-lo rapidamente sem problemas. Las não estão segurando a tecla Shift porque o nariz Figma, queremos redimensionar todos os itens proporcionalmente. Deixe-me desfazer e mostrarei como isso funciona em vários ícones ao mesmo tempo. Então selecione-os e, em seguida, redimensione. Funciona como um charme. A próxima coisa, mudando de cores. Antes de entrarmos nisso, quero falar sobre algo que é realmente um pouco chato. Eu baixei esses ícones da web e é muito provável que você faça a mesma coisa repetidas vezes. Os web designers não criam ícones do zero. E note que isso pode parecer estranho, mas deixe-me explicar por que esse é o caso em uma palestra separada. Só saiba que você não deveria criar esses ícones sozinho do zero. Porque vamos baixar ícones da web. Isso significa que usaremos o de outras pessoas e todos trabalham de forma diferente. Se você pedir a 10 pessoas para torná-lo uma tomada, você verá maneiras diferentes de fazer isso. E é a mesma coisa aqui em Figma. Se você olhar no painel de camadas, notará que esses ícones têm um símbolo específico. Não é disso que eu quero falar. Em vez disso, clique aqui à esquerda desse símbolo e você abrirá esse elemento. Como você pode ver, o ícone da lixeira é realmente feito de quatro coisas. Essas duas linhas verticais, o contorno mais a linha horizontal para o chumbo. Bem, vamos passar para este outro. Isso tem um símbolo diferente. Este é um grupo. Novamente, isso não é o importante. Mas se abrirmos, esta é a cama essencial. Vai ver muitas outras coisas, mais grupos e poucos vetores. E podemos abrir um desses grupos. Mas aqui está outro grupo, meu Deus. Então, aqui está a ideia essencial. Todo designer funciona de forma diferente. Não espere que ícones sejam construídos de uma determinada maneira. Alguns ícones podem ter dois ou três elementos, outros podem ter 20 ou 30. Não há maneira certa ou errada de fazer isso. Ok, agora, vamos voltar aos ícones de colorir. Eu só queria tirar isso do caminho porque tenho certeza que você vai encontrar os vários tipos de ícones. Certo. Se simplesmente clicarmos no lixo Dan, podemos ver que há uma amostra cinza no lado inferior direito, caso você não a veja, mova o cursor neste painel e depois role para baixo. Isso significa que podemos clicar nele e alterar o ícone inteiro assim. É outra cor. Deixe-me desfazer para o Control Z. Como temos acesso a cada bloco de construção, podemos selecionar um deles, digamos o contorno, e apenas alteramos essa cor. E lá vai você. Agora, para esta lata de lixo, isso não parece tão bom para ser honesto, mas vamos tentar o balão de fala. Abra-o e selecione o contorno. Mude isso para qualquer coisa que você quiser. Estou feliz com qualquer cor aleatória, a propósito. Em seguida, selecionarei o vetor 6 e 7. Vou manter pressionada a tecla de controle para selecionar ambas de uma só vez. Agora posso mudar a cor deles para dizer a esta, por exemplo, aleatoriamente. Agora, ok, ótimas coisas, mas vamos fazer uma pausa um pouco. Vamos fazer uma recapitulação rápida. Se você quiser redimensionar os ícones corretamente, precisará usar a ferramenta de escala. Lembre-se de voltar para a ferramenta de movimentação, a propósito, tecla de atalho V, se você quiser mudar a cor de um ícone, você pode alterar a coisa toda, ou você pode detalhar no painel de camadas e selecionar algumas das seus blocos de construção e os alteram. Antes de eu deixar você experimentar este, aqui estão alguns outros ícones. Selecione o primeiro e ignorou todas essas camadas e grupos no painel de camadas. Em vez disso, concentre-se aqui. Observe que temos três cores mostrando, além disso, temos essa opção de carregar outras 11 cores. Agora aqui está a ideia essencial. Você pode decidir qual cor deseja ajustar e simplesmente clicar na amostra. Digamos que você não goste da cor verde clara. Não há problema. o seletor de cores e comece a brincar com ele. É tão fácil. Deixe-me desfazer e mostrar algo muito legal. Digamos que abrimos todas as cores e você não tenha certeza de que esse cinza escuro está sendo usado. Certo, isso não é um problema. Basta mover o mouse aqui e clicar neste ícone de destino. E assim, Figma apontará para essa camada específica. Então, novamente, você abre essa área e, se não tiver certeza de onde essa cor está sendo usada, clique no ícone de destino. Ok, aqui está uma técnica final antes desta sua vez. Esses ícones vêm do mesmo conjunto. Digamos que não somos fãs dessa cor dourada e amarela. Talvez nós o queiramos roxo. Certo, não há problema. Contanto que todos eles estejam selecionados, clique na amostra e altere-a. Isso não é incrível? Adorei esse tipo de coisa. A ideia principal é experimentar. Não há jeito certo ou errado. Você só quer se divertir neste momento. Então, abra este arquivo e altere esses dois conjuntos de ícones. Faça o que quiser com eles. E quando terminar, selecione-os todos e pressione o botão Exportar. Divirta-se e publique seu trabalho. Obrigado. 11. Aqui é que esse motivo dá tantos iniciantes: Olá e seja bem-vindo de volta. Vamos falar sobre algo que é um pouco sensível. Muitos iniciantes desistem de aprender quando atingem um problema. Quando eles não entendem algo, ficam frustrados. E eu entendo isso. E faço o meu melhor para simplificar as coisas e fornecer o máximo de ajuda possível no servidor de discurso. Mas na Figma, isso às vezes é muito desafiador e eu realmente quero abordar isso. Deixe-me mostrar um exemplo rápido. Você não precisa trabalhar junto, apenas tentei entender meu ponto de estar frustrado. Então aqui vai, você pode organizar um projeto em páginas, ok, digamos que estamos trabalhando em um redesenho para o site. Podemos ter uma página para os wireframes, outra a página para a versão para desktop, obviamente isso é necessário e isso será separado. Outro para a versão móvel, certo? Porque, novamente, isso deve ser separado. Agora, essa é uma maneira de organizar um projeto em duas páginas. Basta clicar aqui para expandir ou fechar essa área. E quando for expandido, você pode adicionar páginas clicando neste símbolo de mais e, em seguida, você pode renomeá-lo. Certo? Agora, novamente, todas essas páginas fazem parte de um único projeto com uma única empresa. Certo? Como você nomeia suas páginas, como você organiza as coisas dentro delas. Isso depende totalmente de você. Agora, vamos supor que você entenda como as páginas funcionam até este ponto, mesmo que você não entenda completamente, apenas fique comigo. Ok, aqui é onde fica complicado, mata um projeto que eu baixei da guia Comunidade. Confira isso. Temos tantas páginas, uma página de rosto simples, depois um guia que tem oito quadros. Você pode vê-los aqui. Mas depois outra página, quatro componentes, depois uma página que é usada como divisor aqui para ajudar a organizar as coisas. Então, em diante, vai avatar acordeão, banner e assim por diante. Há toneladas de páginas. Isso fará sua cabeça girar. É por isso que os iniciantes desistem. Quando as coisas ficam tão complicadas, você se sente sobrecarregado e frustrado. É por isso que quero tirar um momento e dizer que esse nível de organização de coisas para os profissionais, para usuários avançados, para aqueles que já fazem isso para os vivos. E eles querem maximizar o tempo. Se você trabalha na Uber ou no celular ou na HB, é assim que você precisa configurar as coisas. Mas aqui está a coisa. Se você quiser apenas ganhar alguns milhares de dólares por mês ou se quiser redesenhar seu próprio site, esse tipo de coisa não é necessário. Você não precisa entrar nesse nível de detalhe. Eu prometo que isso não é o essencial. Confie em mim. A ideia é que isso cobrirá alguns recursos avançados na Figma como esse tipo de organização. Mas meu plano é fazer você andar antes de correr. Se nos concentrarmos nas coisas mais avançadas da Figma, é muito provável que você desista. E eu quero ser o mais claro possível , esses recursos avançados. Eles não vão fazer de você um bom designer. Vou dizer isso de novo. Essas técnicas e fluxos de trabalho avançados não são uma grande parte da sua base como web designer, essas coisas extravagantes são os últimos cinco ou 10%, a cereja em cima do seu bolo. Então, por favor, não se preocupe se você não entender algo deste curso, continuar assistindo e eu prometo que você vai conseguir. E se você não vier ao servidor Discord e vamos falar sobre isso em tempo real. Novamente, esse acorde é uma sala de bate-papo como o WhatsApp ou o Facebook Messenger, mas não é privado. É com um grupo de outros alunos que estão passando pela mesma coisa que você. Portanto, certifique-se de se juntar ao servidor. É totalmente gratuito. E se você não quiser fazer isso, basta fazer perguntas na plataforma e eu vou esclarecer as coisas. Lembre-se, é bom não entender absolutamente tudo desde o início. Assista pelo menos metade do curso e você verá que tudo começará a fazer muito mais sentido. Obrigado por ter pacientes, e espero que você esteja tendo uma experiência de aprendizado cinco estrelas até agora. Por favor, escreva-me ou a vista. Isso realmente ajuda a trazer um sorriso para o meu rosto. Certo, vamos continuar. Muito obrigado. 12. A maior diferença em Figma e outros programas: Bem-vindo de volta. Deixe-me dizer o que eu acredito ser uma das maiores coisas que você tem que se acostumar na Figma, digamos que você quer adicionar um botão, certo? Como você costuma fazer isso? Digamos que no Photoshop ou no Adobe XD, o que na verdade a maioria dos outros programas de design, você normalmente obtém a ferramenta retângulo e arraste uma forma assim. Por favor, não trabalhe por sinal. Em seguida, você obtém o livro didático ou a Ferramenta Type e adiciona algo. Finalmente, você seleciona as duas camadas e, em seguida, usa as ferramentas de alinhamento para centralizar o texto dentro da forma. Como bônus, você pode agrupar essas duas camadas em uma pasta para manter as coisas organizadas. Agora, isso pode parecer natural para você, mas não ajuda Figma a funcionar. Você não deveria trabalhar assim. Na verdade, se você quiser mostrar às pessoas que você não usou Figma, este é um brinde claro. Isso diz às pessoas que você realmente não sabe como usar Figma. Veja como você deve realmente trabalhar com quadros, não com retângulos ou grupos. Deixe-me dar um exemplo. Aqui está um quadro, 1920 por 1080. Digamos que iniciamos um projeto de web design e precisamos do cabeçalho para o menu principal. Selecione a ferramenta de quadro e adicione uma nesta região, logo acima dessas duas camadas. Não é perfeito. E é provável que não seja perfeito. Sinta-se à vontade para se mover para as bordas e redimensioná-lo para o lugar. A partir daqui, vá para preencher e clique em qualquer lugar da região. No seletor de cores, escolha qualquer forma que você quiser. É assim que a Figma funciona melhor. Você pode perguntar o porquê. Por que temos que usar quadros? Agora para mantê-lo curto? Isso ajuda você a controlar seus elementos de design muito melhor e também é mais fácil criar versões responsivas. Também vai ajudá-lo com sua prototipagem, animar o design faz basicamente quando você quer tornar suas telas interativas sem codificação alguma. Então quadros, melhor dançarino, eu sei que isso pode parecer um pouco estranho porque você pode pensar que os quadros são exatamente como quadros de arte do Photoshop ou Adobe XD, mas não são. E outra coisa você pode colocar um quadro dentro do quadro. Isso é normal na Figma e é a maneira recomendada trabalhar em outros programas não é o caso. Então, a ideia essencial é essa. Para a maioria dos seus elementos de design, use quadros, não a ferramenta retângulo. Muito perto dessa ideia. Por favor, não use grupos. Não há necessidade de grupos porque temos uma maneira mais inteligente de organizar todos os elementos. Bem, você acabou de ver é um exemplo. Adicionamos o quadro acima dessas duas camadas de texto e agora elas estão dentro disso. Então, se quisermos mover a coisa toda, você pode pegar o quadro e fazer o que quiser. Como você pode ver, tudo se move sem o grupo. Vou mostrar muito mais benefícios à medida que continuamos. Mas eu queria ser o mais claro possível, quadros, não retângulos e grupos. Finalmente, adicionamos uma moldura de filme. Mas observe que isso não cria uma camada separada no painel de camadas. Só temos o quadro e essas camadas de textos. Isso é um pouco estranho se você vem de outros programas de design, mas logo se acostumará com isso. Vamos fazer uma pequena pausa. 13. Aqui está como você cria botões no Figma: Bem-vindo de volta. Eu disse que os quadros são a melhor maneira de ir na Figma, não em retângulos ou grupos. Vamos pular direto para que eu possa mostrar como você deve trabalhar para criar o botão e o Pigma. Certo. Pegue a ferramenta de texto. Sim, você ouviu isso, certo? Esse é o primeiro passo. Digite o que quiser. Vou dizer meu botão. Em seguida, você tem duas escolhas principais. Você pode clicar com o botão direito do mouse e escolher Adicionar layout automático. Então essa é a opção um. Embora o layout, ou o que a maioria das pessoas está fazendo hoje em dia é a mesma coisa. Então, novamente, você adiciona suas tags e, em seguida pressiona Shift a next, vá para o painel direito e clica em preenchimento. A cor padrão é branca. Então abra o seletor de cores e mude-o para qualquer coisa que você quiser. Esta é a base do seu fardo. É assim que você deveria trabalhar, não está parecendo tão cinza agora, mas vamos trazer alguma vida para isso. As bordas quadradas são chatas, então vamos arredondá-las. Isso é feito usando essa parte aqui. Vamos com um valor alto. Digamos que 25. Talvez você não goste da cor ou talvez o texto não faça sentido. Não há problema em alterá-lo. Você pode simplesmente clicar aqui abaixo das cores de seleção. Você tem isso disponível. Se você tiver o quadro selecionado, lembre-se de pressionar a tecla Escape para fechá-lo. Como alternativa, você pode usar o painel de camadas. Isso também é uma opção. Clique aqui para expandir o quadro e agora você pode selecionar o texto. Algumas pessoas acham estranho que não haja camada de fundo. Não há retângulo per se. Verifique o painel de camadas para isso, certo? Existe apenas a camada de texto e isso ocorre porque o próprio quadro tem um preenchimento aplicado a ele. Pense nisso como uma espécie. Portanto, nenhuma camada individual para o preenchimento é totalmente normal e Figma, agora a questão é, por que devemos usar shift eles embora layout sem sobrecarga, bem, temos algumas características interessantes. Primeiro, selecione a camada de texto e aumente seu tamanho, digamos 30 pixels, certo? Observe como o retângulo cresce em tamanho. Isso é uma coisa. Portanto, essa é uma vantagem ao usar o layout automático, o quadro muda seu tamanho automaticamente. A próxima coisa, selecione o quadro. Este é um passo muito importante. Então selecione o quadro. E desta parte aqui chamada Layout automático, altere esse valor para 20. Isso é chamado de preenchimento e é o espaço vazio dentro do fardo. Quanto maior o preenchimento, maior o botão. Se você usar um valor muito pequeno, como um ou dois, esse texto ficará sufocado e não queremos isso. Mas se usarmos valores maiores, como por exemplo, nosso botão não só será largo, mas também será alto. E isso não é ótimo. Então, aqui está o que podemos fazer. Clique aqui neste ícone à direita. Isso permite ajustar o preenchimento em todos os lados individualmente com 24 os campos superior e inferior e deixar o que é para os lados. Certo. Isso é muito mais parecido com isso. Este é um botão. Então, esse é outro benefício de usar o layout automático, mas não terminamos. Veja este ícone azul aqui. Isso nos diz onde a camada de texto é colocada para dar sentido a ela, ampliá-la do canto inferior direito. Observe como o texto permanece no canto superior esquerdo. Isso é o que isso controla. E podemos movê-lo para cá, por exemplo, ou aqui. Mas, obviamente, queríamos aqui no meio, assim. Então isso significa que temos muito controle sobre o fardo. Isso significa que não precisamos usar constantemente as ferramentas de alinhamento em um retângulo mais uma camada de texto. É por isso que usar quadros é muito melhor. Vamos fazer isso novamente, desta vez com um ícone para minha fonte para ícones é flat icon.com. Mas esteja ciente de que isso requer uma assinatura. Isso não é gratuito. O formato que estamos procurando é SVG. Isso funciona melhor com Figma. Você tem o ícone anexado a propósito, então sinta-se à vontade para arrastá-lo e soltá-lo. Ok, agora você pode querer redimensioná-lo um pouco. Vou cobrir isso rapidamente. Ok, agora, aqui está a aposta essencial. Se clicarmos em segurar e arrastá-lo aqui, você poderá ver que há um destaque. Vamos fazer isso acontecer. E aqui está a magia. Podemos controlar a distância entre o ícone e a camada de texto selecionando o quadro. Agora, da direita, dentro qualquer valor que você gostaria, digamos 15. Coisas incríveis, isso é ótimo. Então deixe-me fazer isso de novo. Vou arrastar o ícone mais uma vez para Figma e vou torná-lo menor. Em seguida, darei a ferramenta de tipo e escreverei algo aqui. Agora selecione as duas camadas e pressione Shift a. As chances são de que o alinhamento não esteja correto. Mas abra o preenchimento e centralize-o. Coisas adoráveis. Isso é muito fácil, mas por favor, trabalhe em sua segunda visualização para acompanhar. Certo, agora vamos adicionar um preenchimento e torná-lo qualquer cor aleatória. Estou me movendo rapidamente, mas é claro que você deve tomar seu tempo com ele. Agora, ajuste as coordenadas desta parte aqui. Use o valor que você deseja alterar o ícone e o texto para branco. Farei isso a partir de cores de seleção. Novamente, o quadro é selecionado. Agora, para a distância, vamos com algo como 20. E para o preenchimento, acho que vou usar algo como 34 dos lados. Mas isso é uma loucura. E então para a parte superior e inferior, e esse é o nosso fardo. Agora, é claro, há muito mais que podemos fazer, mas vamos dar um passo a passo. Por favor, pause o curso e crie seus próprios botões. Eu quero que você mude o raio do canto, o preenchimento, as cores e talvez experimente alguns outros ícones. Quando terminar, selecione o quadro grande e exporte-o. Se você tiver mais de três botões. Se você tiver apenas um ou talvez dois botões, poderá exportá-los individualmente. Para fazer isso, assim como os quadros e pressione Exportar. Há também uma folha de truques anexada no caso de você querer revisar rapidamente o que eu abordei nesta palestra. Lembre-se, divirta-se com isso. Não há pressão. Apenas experimente as coisas. 14. Os conceitos básicos de trabalhar com cores: Bem-vindo de volta. Deixe-me mostrar como você pode trabalhar com cores na Figma, os pontos essenciais, a propósito, na próxima palestra que entraremos em coisas mais avançadas. Ok, comece com qualquer quadro aleatório. Neste ponto, você sabe, você pode usar a área Preenchimento para controlar a cor dessa moldura. Não há diferença entre o preenchimento deste quadro e o preenchimento de um retângulo, por exemplo, deixe-me adicionar um. Abra o seletor de cores para que possamos explorar esta parte. O lado superior esquerdo é branco puro. Isso é FF, FF, FF. Então, seis f no total. E no lado oposto temos preto puro e são seis zeros, 0000, 0000, 0000. Agora, por que estou vendo esses personagens? Eles compõem o código hexadecimal. O código hexadecimal é o que os desenvolvedores da Web usam para transformar nossos designs em um site totalmente funcional. Você não diz a eles que quer a cor azul escuro para o botão. Em vez disso, você diz que quer d 0 seis, CA. Você pode ver que este é um código hexadecimal porque ele diz isso aqui. Nunca usei mais nada para fins de web design. Se seu cliente tiver um código de cor específico para sua marca, por exemplo, a DHL é famosa por seu amarelo. Você pode digitar isso no FFC, veja 0000, assim. E se você procurar esquemas de cores na web, poderá obter códigos hexadecimais para cada cor. Basta digitá-los em colá-los com Control V. Em seguida, você pode diminuir a opacidade usando este controle deslizante aqui, embora eu não recomendo que você faça isso com frequência. Não é uma boa ideia. Agora deixe-me fechar isso e adicionar o romance, a forma. Aqui está a coisa. Depois de definir uma cor, podemos vê-la aqui nas cores do documento. Isso é grande minha tentativa de nos ajudar. Se fizermos este vermelho e então queremos adicionar a terceira forma, por exemplo, acho que ia acontecer. Teremos esse relógio de pulso adicionado aqui do que é. E se clicarmos, ele pegará essa cor. Falando nisso, isso é chamado de ferramenta conta-gotas e ajuda você a selecionar cores de qualquer lugar na tela. Como você pode ver, há um efeito de ampliação no canto superior direito. Isso é Figma, não sou eu editando este vídeo. Então, isso ajuda você a pegar cores com precisão. Isso funciona muito bem em fotos, mas teremos tempo para explorar isso mais tarde. Vamos passar para este bar aqui. Até agora, trabalhamos com cores sólidas, mas você também pode adicionar gradientes. O problema é que esse linear é o único que eu recomendo. Os outros, eu os uso talvez menos de 5% do tempo. Com um gradiente linear, você obtém duas extremidades que você pode controlar. Neste momento, estou trabalhando neste. Quando terminar, posso passar para este colecionado e agora posso brincar com ele caso esteja meio cheio, apenas levante a opacidade assim. Por favor, amplie e vamos brincar com esse gradiente. Agora, para ser honesto, todos esses ajustes, como ajustar a transição aqui e tudo mais. Bem, você não vai fazer isso com tanta frequência. Essa é a verdade. Mas eu quero que você saiba que você tem controle total sobre o que está acontecendo aqui. Por exemplo, você pode adicionar uma terceira cor. Veja este quadrado vazio. Se você clicar, você adicionará outro ponto colorido. E se você quiser removê-lo, basta clicar nele e, em seguida, pressionar a tecla Delete. Então, novamente, você não vai fazer isso tudo o que foi aberto em projetos de web design, mas saiba que ele está disponível. Ok, uma última coisa, você pode mudar o ângulo do gradiente assim. Basta pegar uma ponta e depois movê-la. Agora, para ser honesto, você só usará dois tipos de gradientes aqui. Agora, a coisa é na maioria dos projetos de web design, você usará dois tipos de gradientes, verticais e horizontais. Estes são os únicos dois que são realmente usados no web design moderno para garantir que o gradiente seja perfeitamente reto. Gosto de alinhá-lo em uma de suas bordas, assim a opção final neste menu suspenso é a imagem. Quando você clica nele, você obterá esse padrão quadriculado. Isso significa que você pode arrastar um ano de imagem e essa parte, ou você pode clicar aqui para acessar a janela de navegação. O melhor disso é que você tem alguns controles deslizantes para ajustar a imagem. Agora, para ser justo, isso não é exatamente o Photoshop, mas isso é mais do que suficiente para a maioria das pessoas. Então, novamente, isso é algo incrível. Mas vamos voltar a usar cores. O melhor dessa parte é que você pode adicionar outro preenchimento sobre essa imagem. Basta clicar no símbolo de mais. Por padrão, a opacidade é reduzida para 20%. E é assim que você pode acrescentar que somos a imagem ou ainda melhor adicionar o gradiente. Por exemplo, imagine que você queira adicionar algum texto em branco na parte inferior, mas talvez essa parte não esteja escura o suficiente, então você não pode realmente ler esse texto em branco. Então, para corrigi-lo no gradiente de cima para baixo para a Opacidade, vá com 80%. Você pode querer ajustá-lo para que a parte superior não seja afetada. E, no geral, assim você tem um efeito incrível. Agora, para recapitular, isso é chamado de Seletor de cores, e esse é o código hexadecimal. Você pode digitar códigos de cores que você pode obter da Web. Mas lembre-se que são sempre seis personagens. Sigma está ajudando você com essas cores de documentos, mas isso é somente depois que você se compromete um aplicativo de cores que você realmente o usa. Você pode diminuir a opacidade de uma cor a partir daqui. E você pode alterar o tipo de falha desta parte aqui, meu conselho se ater a gradientes lineares , pois eles parecem muito melhores. Você pode empilhar várias cores usando este símbolo de mais aqui. E você também pode alterar a opacidade deste lugar, 01. A última coisa que esqueci de mencionar, você sempre pode esconder, você preencherá clicando neste ícone. Então, se você não tiver certeza se seu gradiente está bem, desligue-o e veja o que é o quê. E esse é o básico de trabalhar com cores. Em seguida, vamos ver como os profissionais funcionam. Vejo você na próxima palestra. 15. Como trabalhar com cores como um profissional: Bem-vindo de volta. Neste ponto, conhecemos o básico do uso de cores na Figma, mas aqui está como levamos isso para o próximo nível. Digamos que esse tom específico de azul é muito importante para o cliente, certo? Vamos imaginar esse caso. Isso significa que provavelmente o usaremos durante todo o design, certo? Vamos usá-lo e muitos lugares. Agora, em vez de confiar em cores de documentos ou usar a ferramenta conta-gotas, aqui está o que você deve fazer. Para o lado direito de Fell. Você vai ver esses círculos completos. Clique nesse ícone e isso abrirá estilos de cores. Atualmente não há nada aqui, mas clique nesse símbolo de mais à direita. Figma está nos pedindo para nomear e está até nos mostrando a cor aqui. E assim, temos nossa primeira cor em outros estilos de cores. Se você desmarcar clicando em uma região vazia, verá que esta entrada está bem aqui no canto superior direito. Agora, quando você quiser usar a mesma cor, seja em uma camada de texto, em um quadro, no retângulo, onde quer que você possa simplesmente clicar aqui, e isso revelará seus estilos de cores. Clique nele e haverá morto. Agora, deixe-me fazer isso mais uma vez. Você pode perguntar, por que isso é importante? Por que isso é tão revolucionário? Bem, a consistência é fundamental. Você quer ter certeza de usar exatamente o mesmo código de cores em todos os lugares. Em um projeto que é apenas uma página. Isso parece muito fácil. Mas imagine que você tem 20, 40, talvez 100 telas para as quais você precisa ir. É aí que isso realmente brilha. Deixe-me pegar rapidamente esses elementos. Faça a ferramenta Mover arrastando uma caixa, clique nos círculos e escolha um dos estilos. É assim que você pode atualizar rapidamente seu design muito, muito rápido. E se você quiser mudar as coisas, basta clicar aqui e escolher o outro. Simples e fácil de obter. Agora, deixe-me mudar para um brinde da guia comunidade. Aqui temos um aplicativo com muitos botões, mas imagine que acabamos de receber alguns comentários e isso é um feedback ruim. Bem, aqui está como você deve trabalhar. Não tenho nada selecionado agora, então posso ver os estilos de cores desse arquivo. Existem dois deles, botão principal e secundário. Clique com o botão direito do mouse no primeiro e escolha Editar estilo. Você pode alterar seu nome, descrição e propriedades, mas quero alterar o código de cor. Clique aqui e use o seletor de cores. Quando você estiver satisfeito com ele, basta fechá-lo e ver como você pode atualizar rapidamente todas essas telas em apenas uma ação. E este é um projeto bastante pequeno. Deixe-me atualizar o verde também. Então, nada é selecionado certo? Em seguida, clique com o botão direito do mouse para editar o estilo na parte inferior clique aqui para mostrar o seletor de cores. E agora você pode fazer sua coisa. Ok, esse é o, voltando para o projeto inicial. É aqui que você precisa fazer uma atualização. Veja, você nunca deve chamar essas cores pelo que elas são agora, como vermelho, verde, azul ou o que quer que seja. Em vez disso, dê a eles um nome de descrição como cor de fundo, cor de ação, título, cor primária e assim por diante. E isso porque se o adicionarmos e transformarmos isso em um tom verde, por exemplo, bem, o nome lido não faz nenhum sentido. Então, novamente, renomeie-o para algo universal, como carga principal, botão secundário, fundo e assim por diante. Mas antes de terminarmos, se você não quiser mais que a camada tenha a mesma cor? Bem, não há mais a entrada de preenchimento aqui porque você atribuiu esse estilo de cor. Então, basicamente, eles estão vinculados, mas você sempre pode desanexá-lo clicando aqui. Esteja ciente de que você não verá esse ícone de corrente, a menos que você passe o mouse sobre ele. Certo, agora ele aparece. Clique nele, e isso será que a forma permanece da mesma cor, mas agora você terá acesso para expulsão e pode alterá-la como quiser. Deixe-me selecionar outra camada. Você também pode usar esse símbolo de menos, mas isso removerá o preenchimento e você pode perder sua forma se não for cuidadoso. Veja o que quero dizer. Onde está? Ainda o temos aqui, mas é totalmente transparente. Agora, para recapitular, todas as empresas devem ter um esquema de cores. Se o seu cliente não fizer isso, você terá que criar um por conta própria. Temos uma palestra separada sobre como você deveria trabalhar com vários esquemas de cores e criá-los. Mas supondo que você tenha algumas cores que deseja usar, adicione-as aos seus estilos de cores. Isso é feito usando esse ícone à direita o preenchimento, clique nele e, em seguida, use o símbolo de mais. Lembre-se de nomeá-lo adequadamente com base em como ou onde ele é usado. Não o nomeie com base em sua aparência atual. Antes de irmos, deixe-me voltar para esse brinde e eu excluirei os dois estilos coloridos. Então, estamos começando do zero. Vamos imaginar que acabamos de baixar este arquivo e não há estilos, o alto-falante, certo? Certo, não há problema. Veja como você deve trabalhar. Vou manter pressionada a tecla Control e vou para um desses botões. Vou usar o Control porque isso me permite detalhar essa camada. Não importa se está dentro do quadro, um grupo será que vários quadros em vários loops. Então é por isso que estou segurando o controle vai, Ok, em seguida, vou continuar segurando Controle e depois adicionarei turno. E isso me permitirá pegar várias camadas. Então isso é Control and Shift. Assim mesmo. Agora, com todos eles selecionados, agora podemos chegar a este ícone, clicar no símbolo Plus e criar um novo estilo de cor. Em geral, você configurará suas cores no início do projeto. Mas no caso de você encontrar essa situação, agora você sabe como lidar com isso. Imagine que um colega de trabalho acabou de lhe enviar esse arquivo, certo? Mas talvez novamente, você baixou da web. Agora, ok, experimente e veja como você faz. Isso deve ser bom e divertido. 16. Como adicionar imagens: quadros de quadro x retângulos: Bem-vindo de volta. Nesta palestra, quero mostrar como você pode adicionar imagens aos seus projetos. Primeiro, onde você pode obter imagens de alta qualidade totalmente gratuitas? Felizmente, temos unsplash.com. Este é o lugar para belas imagens. Use-os como quiser, eles são totalmente gratuitos. Em seguida, quero mostrar como você deve trabalhar com eles em Figma. Na primeira linha, temos alguns quadros e por baixo temos alguns retângulos. Veja como eu recomendo que você trabalhe. Agora, use o controle de teclas de atalho Shift K, que é a tecla Command Shift no Mac. E isso abrirá uma janela do navegador. Se você não consegue se lembrar de Control Shift K, acesse a barra de ferramentas e você encontrará essa opção abaixo das ferramentas de forma. Então, embaixo da ferramenta retângulo lá embaixo, selecionarei as imagens mantendo pressionada a tecla de controle e clicando nelas. Agora, Figma vai pensar por um segundo, vai hesitar porque são imagens enormes com mais de 4000 pixels. Então você tem que ser um paciente ruim. Sabe, Figma está pronta quando seu cursor vai ficar assim. Podemos ver que temos três imagens carregadas. Agora, tudo o que resta é clicar nos quadros quando Entrada para. Ótimo. Agora vamos repetir o processo, mas usaremos os retângulos desta vez. Então, controle Shift K, mesmo para as imagens para que você possa obter uma boa comparação. E imediatamente você pode ver que isso é mais fácil de trabalhar. Isso é o que eu recomendo. Essas imagens parecem muito melhores porque se encaixam melhor. Esse é o primeiro ponto essencial. Colocar imagens em retângulos lhe dará um melhor ajuste. Se verificarmos o painel de camadas, observe as diferenças. As imagens substituíram os retângulos em certo sentido. Isso porque eles serão definidos como um preenchimento. Então, temos três camadas, não sexo. Em termos de quadros. Temos três quadros e três imagens. Então, temos um pouco mais de coisas e isso não é o ideal. Mas por que você deveria se preocupar com quadros? Bem, se você controlar, clique na imagem assim, você terá um destaque de suas bordas. Agora você pode redimensioná-lo. Ou seja, se você estiver ampliado e também puder usar o painel de camadas para selecionar as imagens e redimensioná-las. Apenas esteja ciente de uma coisa que você precisa segurar Shift enquanto redimensiona para não distorcer as imagens. Caso contrário, você pode acabar com algo assim. E, obviamente, não queremos isso. Então, segure Shift ou use a ferramenta de escala. Ok, então essa é a coisa com molduras. As imagens não estão definidas como Fells. Eles não se encaixam também, mas são mais fáceis de redimensionar. Vamos passar para a segunda linha, que é novamente a opção preferida aqui, caso você queira ajustar a imagem, meu conselho é clicar aqui em Cortar imagem. Essa é a maneira mais fácil e é isso que eu recomendo. Agora você pode movê-lo para cima ou para baixo, para esquerda e para a direita e assim por diante. E, claro, você também pode redimensioná-lo. Mas aqui está o kicker. Deixe-me ampliar muito. Você pode redimensionar o retângulo ou a imagem. Então, essa é uma distinção legal. O retângulo ou a imagem, símbolos azuis de CDs. Eles mostram as bordas do retângulo. Então, se eu arrastar para dentro assim, e então eu pressiono Escape para me comprometer. Bem, o retângulo agora está ciente. Ok, deixe-me ativar a colheita mais uma vez. Se eu for até a borda da imagem, veremos essa flecha sobre o que Deus, senhor. Agora podemos redimensioná-lo, mas mais uma vez, segure Shift. Agora, o pequeno problema é que você pode ter essa situação em que essas bordas se sobrepõem. Então você pode não saber qual é qual, certo? Nesses casos, meu conselho à medida que você move a imagem até que você possa ver claramente como bordas, isso realmente ajuda a ampliar muito. Agora, para recapitular quando você quer colocar imagens, retângulos são um pouco melhores que os quadros. Use Control Shift K e clique neles, esteja em retângulos, círculos ou qualquer outra coisa. Quando você quiser editar uma imagem que é colocada dentro do retângulo, use o ícone de corte na parte superior da tela. Se você quiser redimensioná-lo, certifique-se de entender os símbolos azuis delineados no retângulo. Ok, então novamente, azul para o retângulo. Certo? Uma coisa, você também pode clicar duas vezes qualquer imagem para ajustá-la em termos de contraste de exposição, e assim por diante, você obtém esses controles deslizantes. Mas esteja ciente de que, se este painel for aberto e você quiser fechá-lo, não clique na tela assim. Em vez disso, use a tecla Escape. Então deixe-me fazer isso de novo. Então, com uma imagem dentro do retângulo, se você clicar duas vezes nela, você abrirá este painel. Para fechá-lo, é claro que você pode usar o símbolo X ou melhor ainda, use a tecla Escape. Grau. Uma última coisa que você deve saber, digamos que você não gosta dessa imagem e queira adicionar outra. Claro. A maioria das pessoas prefere arrastar uma nova foto da área de trabalho acima de uma existente. Mas isso não funciona na Figma como esperado. Como você pode ver, a imagem não entra no retângulo. Em vez disso, aqui está o que você precisa fazer. Você precisa selecionar a forma existente e você notará que o preenchimento está definido como imagem. Agora, vá para sua área de trabalho ou qualquer pasta que você quiser. Pegue sua foto, mas desta vez, deixe-a aqui. Veja esse destaque. Isso significa que vai substituir o existente. Assim mesmo. Agora, deixe-me fazer isso de novo em um novo retângulo. Então, um simples, básico, certo? Agora, arraste uma imagem, mas não a solte na tela. Em vez disso, solte-o aqui nesta pequena área. Agora, é realmente um pouco pequeno demais. Então, o que pode fazer é clicar duas vezes dentro de uma imagem e esse painel será aberto. Agora você pode soltar a foto aqui. E como isso é maior, isso pode ser mais fácil para a maioria das pessoas. No geral. É assim que você adiciona imagens ao seu projeto. Controle Shift K em um retângulo, você também pode usar um quadro, mas na minha opinião não é tão bom. Então, retângulos é. Obrigado. 17. Crie uma galeria e colagem no Figma: Bem-vindo de volta. Vamos testar nossas habilidades criando uma linda galeria ou uma colagem em Figma. Aqui está o que eu quero que você faça. Quero que você se cronometre pela primeira vez e na segunda vez que você vai fazer isso. Por favor, tanto o tempo nos comentários quanto o seu design. Comece com qualquer quadro, qualquer tamanho, porque eu quero que você altere sua largura e altura no painel de propriedades. Estamos à procura de 1920 por 1080. Em seguida, adicione qualquer retângulo aleatório. Agora esta é a parte interessante. Digamos que queremos três colunas, certo? Você pode usar o que quiser, mas vou usar três. Como nos certificamos de que o retângulo é largo o suficiente para um bom ajuste? Bem, aqui está a coisa no campo de largura, você pode fazer algumas contas. Então digite em 1920 slash 3, que é 1920 dividido por três. E isso vai nos dar 640. E agora podemos criar cópias dessa forma e sabemos que ela vai se encaixar certo? Você pode usar o Controle D para fazer cópias, D como em duplicado, mas isso colocará a cópia logo acima da inicial. Então, aqui está uma maneira melhor. O que eu sugiro é que você mantenha pressionada Alt ou a tecla Option em um Mac, clique e arraste uma cópia. Agora, isso funciona na maioria dos programas de design, e estou muito feliz com palavras na Figma 21 mais tempo. Mas desta vez eu quero que você segure Alt e Shift também. Shift fará com que a cópia se mova em uma linha perfeitamente reta. Então isso é ótimo. Ok, agora o problema é que não podemos ver as bordas de nossas formas. Selecione Alt V e adicione um traçado. Isso está disponível aqui abaixo do preenchimento. O traço é muito fácil de usar. Você pode ajustar a cor para que o seletor de cores seja exatamente o mesmo. E isso significa que podemos ter uma cor sólida, um gradiente ou até mesmo uma imagem como traçado. Queríamos branco puro, embora meu conselho seja que você o tornasse um pouco mais espesso. Mas, por favor, note que você precisa usar as teclas de seta no teclado para alterar esse valor. O pergaminho do mouse não funciona aqui. Certo? Agora você também pode alternar o posicionamento. Agora ele está definido para dentro. Estou muito feliz com isso, mas você pode escolher outro cenário. Se você escolher o centro e tiver um valor como seis pixels, três deles serão colocados no interior e três deles do lado de fora. Então é isso que o centro significa. Em seguida, precisamos adicionar mais linhas. Então, vamos usar exatamente a mesma técnica. Então, tudo para fazer uma cópia e mudar para que ela vá em linha reta. Então todo o arrasto por turno. Nesse caso, não fiz nenhuma matemática porque quero mostrar uma alternativa. Então, agora que temos nove formas, selecione todas elas. Caso você selecione o quadro, pressione Enter. Observe essa diferença, a propósito. Então, neste momento, tenho as formas selecionadas. Mas se eu desenhar uma caixa grande, assim, ok, agora esse quadro que é chamado de top selecionado e isso não é bom, isso não é o que queremos. Portanto, se o quadro estiver selecionado, basta pressionar Enter e isso capturará todas as camadas dentro das quais elas serão selecionadas. Ok, agora vamos nos mudar para cá e arrastar para baixo. Você vai sentir figma. Vamos tentar ajudá-lo a encontrar a borda do quadro. Certo, lindo. Agora isso se encaixa. Ok, agora é hora de adicionar algumas fotos, ir para unsplash.com e baixar um monte delas. Já fiz isso, então deixe-me usar o Control Shift a para adicioná-los. vez, aguarde um segundo até que a Figma os processe. Geralmente é bastante passado. Ok, agora clique em cada retângulo. Este é um exercício de velocidade. As técnicas são bastante simples. Alterar Shift, arraste, controle Shift K, e isso é sobre isso nada tão especial. Ou, claro, você pode fazer algumas contas. Mas eu quero que você se mova o mais rápido possível e crie uma boa colagem. Agora, eu adoraria ver algumas imagens do seu próprio país. Veja se você consegue encontrar alguma coisa que seja divertida. E caso o traço branco não funcione, selecione todas as camadas assim. Mas dê uma olhada. O quadro não está selecionado. As formas são. Certo. Agora mude a cor do traçado para qualquer coisa que você quiser. Você também pode ajustar a espessura, talvez a posição. Agora, é melhor você fazer isso agora porque você consegue ver como toda a galeria é afetada. Experimente e publique sua própria colagem. Mais uma vez, adoraria ver fotos do seu outro país. Tenha um e lembre-se de publicar seu trabalho e seu tempo. Obrigado. 18. Como mascar no Figma: Bem-vindo de volta. Sabemos como adicionar imagens ao Figma Control Shift K ou arrastar e soltar fotos na região preenchida, seja no painel direito ou nesta área de revisão. Então, essas são as principais opções. Mas deixe-me mostrar outra coisa que você precisa saber e isso é mascaramento. Digamos que você queira fazer um avatar. Um tema muito comum em projetos de web design. Comece com uma elipse, um círculo. Você pode achar isso abaixo da ferramenta retângulo. Arraste um para fora e, enquanto você está fazendo, obtenha locação, segure o turno. E isso lhe dará um círculo perfeito. Em seguida, arraste qualquer imagem acima dela. Já tenho um preparado. Agora, inicialmente vai ser enorme, especialmente porque é do unsplash.com. Isso não é adicionado como um filme intencional. Ok, Agora, esta é uma boa chance de ensinar a você a redimensionar rapidamente uma imagem gigante além do ponto, mas é uma boa oportunidade. Então, sabemos que precisamos manter o turno para não distorçamos a imagem corretamente, esmague-a ou qualquer coisa assim. Ok, agora, o turno nos ajuda com isso. Mas se você pressionar a tecla Alt ou a tecla Option em um Mac, isso permitirá redimensionar a imagem de ambas as extremidades. Então, se você estiver trabalhando nesse ponto de coordenadas, o outro seguirá o exemplo. Então isso é Alt e Shift para encolhê-lo, é uma maneira mais rápida de trabalhar. Ok, agora de volta ao tópico principal máscaras novamente, certifique-se de que o círculo esteja embaixo da foto. Isso é muito importante, agora vai funcionar de outra forma. Agora selecione os dois e tinha esse ícone nessa área superior. Assim, você tem maior que a máscara. Se você verificar o painel Camadas, verá que agora você tem um grupo de máscaras. E contém duas coisas, é claro, a foto e o círculo. Se você clicar na foto, poderá redimensionar a imagem, movê-la e assim por diante, basicamente completa liberdade. O mesmo se aplica se você mudar para a elipse. Embora controle total. Agora, isso é melhor do que usar Control Shift K? Bem, depende de você e de sua preferência, mas observe que eles são vantajosos, digamos que você tenha uma grande camada de texto. Isso é mostrado no Airbus 300. Então, um tamanho enorme, 300 é absolutamente enorme. Agora vou arrastar outra imagem acima dessa camada de texto e repetirei a ação. Vou criar uma máscara clicando aqui. E como eu disse antes, temos controle total para mover a imagem para melhor que o efeito possa ser girado e assim por diante. E a camada de texto ainda está viva, ainda é editável. A única coisa que você precisa fazer é pegar a ferramenta de texto. Você não precisa ter uma camada específica selecionada. Você pode realmente selecionar algo completamente diferente, como esse avatar. Agora vou ativar a ferramenta de texto e me mover para cá. Certo, agora vou editar o texto para qualquer outra coisa, talvez algo assim, e é isso. Então, para recapitular, você pode usar qualquer tipo de camada de qualquer tipo, seja a forma de uma camada de texto ou outra imagem e usá-la como máscara. O importante é que você coloque essa camada específica embaixo da imagem, chegue lá. Agora, aqui está outra vantagem de usar máscaras versus a técnica de controle Shift K. Você pode adicionar várias camadas a essa máscara e elas ficarão ocultas, por exemplo, tudo como alguns círculos aqui. Observe como isso funciona. No painel de camadas. Podemos ver que isso se estende. Isso nos diz que todas essas elipses também fazem parte da máscara. Basicamente, qualquer coisa que você adicionar a esse grupo vai agir dessa maneira. Por exemplo, se você quiser um novo círculo que não esteja oculto, você tem que colocá-lo fora desse grupo. Agora, para ser honesto em outros trabalhos de web design, não encontraremos muitos casos como esse. Mas conhecer os princípios do mascaramento é importante. Caso você faça um teste de habilidades em uma entrevista, agora você saberá como isso funciona. E com isso, vamos continuar, mas por favor, certifique-se praticar o que acabei de mostrar. 19. Aqui estão três tipos de texto no figma: Bem-vindo, bem-vindo. Vamos ver como podemos trabalhar com texto. Vamos abordar o básico e, como antes no próximo vídeo, faremos mais avançados. Há duas maneiras de adicionar texto na Figma quando você pode clicar e começar a digitar assim. E o segundo em que você pode clicar, arrastar para fora uma caixa e começar a digitar. Vou colar algum texto com o Control V, então basta colá-lo. Agora, essas são duas maneiras diferentes de adicionar texto. Agora deixe-me clicar novamente. Quando você inicia qualquer camada de texto e quiser terminar de editá-la, você pode clicar em qualquer outro lugar assim. E, como você pode ver, o texto foi salvo. Ou deixe-me fazer isso de novo. Você também pode pressionar a tecla Escape e o texto permanecerá como está. Agora, eu sei que em outros programas, a tecla Escape pode remover o texto, mas aqui não é esse o caso. Então esse é seu primeiro ponto essencial. Escape é seu amigo, seja no seletor de cores quando você estiver adicionando texto ou quando estiver trabalhando com qualquer outro painel. Agora, de volta para o texto do parágrafo, ou seja, aquele com a caixa que desenhamos, podemos pegar uma alça e movê-la. Isso permite que você o torne tão largo ou tão estreito quanto quiser. Agora temos algumas opções aqui. Se clicarmos neste chamado Auto, onde o texto será tão amplo quanto precisa ser para caber em uma única linha. Não queremos que esse entalhe aqui e não em geral, seja honesto. Ok, agora deixe-me adicionar a nova camada de texto através de uma caixa. Observe qual ícone é pressionado por padrão, é este, tamanho fixo. Se você pensar sobre isso, realmente faz sentido. Nós desenhamos essa caixa certo? Nós, o usuário, o designer, provavelmente fizemos isso, tão grande porque é disso que precisamos. O mesmo acontece com a terceira opção, eles são de tamanho fixo. Basicamente isso é dizer à Figma, ei, esse é o tamanho que eu quero. Ok, agora há outra opção aqui chamada auto hide. Isso é muito útil porque quando desenhamos caixas, somos bastante desleixados para sermos honestos. Como você pode ver, há muito espaço vazio aqui na parte inferior. E isso não é legal. Deixe-me mostrar o porquê. Digamos que eu adicione outra forma ao Canvas. Ok, agora com esses dois lado a lado, digamos que eu quero um fundo alinhá-los direito. Agora, olhe o que acontece. Figma vê essa camada de texto como sendo tão grande. Agora, para nós, especialmente quando desmarcamos, bem, assumimos que isso, tudo o que é. Então, como você pode ver, isso é um grande problema. Aqui está outro exemplo rápido. Na Figma, você pode medir distâncias mantendo pressionada a tecla Alt e movendo o cursor. Então, há a tecla ALT e depois movendo o cursor. Então, se tivermos a camada de texto selecionada e mantemos pressionada a tecla Alt, e movemos o mouse sobre o retângulo. Bem, Figma vai nos mostrar a distância. Legal como esperado. Isso é previsível. Essa é a palavra-chave aqui. Previsível. Mas veja o que acontece se colocarmos o retângulo embaixo. Se verificarmos a medição. Isso obviamente não está correto. Isso é uma surpresa e isso não é bom. Agora, tecnicamente isso está correto, mas não é o que esperávamos. Portanto, a solução é escolher altura automática, altura automática. Certo? Agora, eu sei que gasto cinco minutos nisso, mas é importante no caso de você ter que explicar o que são para recapitular. A primeira é melhor para linhas únicas de texto que normalmente são curtas. O segundo geralmente é o mais útil como a caixa ou apenas com base no texto. E o terceiro é o que aqueles casos em que você sabe exatamente o tamanho que você quer. Em meus projetos reais, começo com uma caixa aleatória. Então, a terceira opção, depois de basear meus textos, eu mudo para ocultar automaticamente, e é isso que eu recomendaria. Então, novamente, desenhe uma caixa aleatória e, em seguida, mude para ocultar automaticamente. Antes de irmos, vamos falar sobre família de fontes, fontes e tipos de letra, palavras tudo isso. Bem. O primeiro aqui é a família de fontes. Roboto é um tipo de letra ou família de fontes que contém vários tipos de fonte ou família de fontes. Eles só significam a mesma coisa. Vou dizer que novamente, tipo de letra e família de fontes, eles são a mesma coisa. Agora, para entender as diferenças entre uma fonte e a família da fonte, pense no seguinte. Você faz parte de uma família, certo? Agora isso pode ser várias pessoas em sua família, talvez apenas uma pessoa, tudo bem também. No entanto, você tem uma família. Agora, use especificamente são uma fonte. Você é toda a família é uma fonte ou família de fontes. Mas os indivíduos, por exemplo, sua mãe ou seus irmãos ou seus sistemas, são fontes. Então, novamente, isso significa que o albedo é uma fonte ou família de fontes. E Roboto bold é uma fonte que faz parte dessa família de fontes. A maioria das pessoas costuma trocar essas palavras como se fossem a mesma coisa. Fonte e tipo de letra. Isso não está correto por causa do que acabei de descrever. Se você misturá-los, não é o fim do mundo para ser honesto. Você não será colocado no projeto da cadeia por causa disso. Mas, novamente, recapitular, várias fontes, maquiagem da família de fontes embora Bordeaux itálico, Roboto, Light, Roboto, negrito. Essas são todas fontes. Eles fazem parte da família de fontes Roboto. Ok, agora você conhece as diferenças e podemos continuar. Obrigado. 20. Descubra as propriedades das camadas de texto: Bem-vindo de volta. Vamos dar uma olhada nesta parte do painel Propriedades e ver o que a cama faz. Mais do que isso, vou contar minhas melhores práticas. Portanto, isso não será apenas um tour básico. Certo? Agora sabemos que este é o campo para o tipo de letra. Temos o Roboto aqui para mudá-lo, basta digitar outra coisa. É assim que a maioria dos Bros trabalha. Você não abre esta lista, então role saiba, em vez disso, basta digitar algo como MOSFETS e seu ego, Montserrat. Agora, vamos fazer um desvio rápido e rápido. Como você obtém essas fontes? Agora, a maioria das pessoas usa o Google Fonts, mas aqui está uma dica. É importante que você escolha suas fontes com base no humor do projeto. Por exemplo, imagine que você está indo para a praia, certo? Você usaria um terno formal? Claro que não. E o casamento? Você usaria os shorts e chinelos? Mais uma vez, claro que não. Cada situação é diferente e requer uma aparência diferente. Assim como seus projetos de web design. É por isso que você tem que tomar algum tempo e pensar sobre o que funciona melhor. Algumas fontes são elegantes, outras brincalhonas, algumas delas são sérias, severas. Então isso significa que isso não deve ser uma decisão rápida. Depois de se decidir, você precisa baixar a fonte clicando aqui. O processo é bem simples. Você obterá o arquivo zip que precisa ser extraído. Nesta pasta. Você encontrará alguns arquivos e eles precisam ser copiados em fontes C Windows. E é isso. Agora, em alguns casos, você pode querer reiniciar o mapa grande para garantir que esses títulos estarão disponíveis para você. Meu conselho é que você baixe esse arquivo específico que contém a maior parte da responsabilidade do Google Pons. É absolutamente enorme, então, por favor, tenha isso em mente. Ok, agora, isso é o que você precisa procurar. Este é um site muito popular e você pode confiar nele 100%. Ok, A próxima parte da Figma e este painel de propriedades, isso é chamado de peso ou estilo. Alguns tipos de letra têm um único estilo. Se você voltar para as fontes do Google, verá o número de estilos mostrados aqui nesta parte. Meu conselho, sempre use títulos que tenham pelo menos três estilos. Então isso é leve, regular e ousado, por exemplo, pelo menos três deles, certo? Seguindo em frente, é aqui que você define seu tamanho. Isso é em pixels, mesmo que na verdade não o mencione. Você não pode usar a rolagem do mouse para alterá-la, mas você pode digitar seus valores manualmente, ou como a maioria das pessoas faz isso, elas usam as teclas de seta para cima ou para baixo. Mais turno. Shift altera esse valor em incrementos de 10 pixels. Então isso é muito bom. Ok, aqui está a coisa divertida. A altura da linha. Isso é crucial para meus projetos de web design. Isso controla a quantidade de espaço vertical entre cada linha. Deixe-me mostrar um valor muito baixo fará com que o texto pareça questão. É como se alguém pisasse nele. Escreva, um valor generoso fará com que ele se sinta solto. Agora ambos os extremos devem ser evitados. Em vez disso, você deve usar essa fórmula específica, o tamanho da fonte multiplicado por 1,5. Portanto, se isso for 12 pixels, isso significa que a altura da linha deve ser 18. Caso você não queira fazer contas, você também pode digitar uma porcentagem como 150 por cento. Eu prefiro valores de pixels. Então, novamente, isso é 1,5 vezes o tamanho da fonte. Você sempre pode usar quanto menor o multiplicador, como 1,4 ou 1,3. Mas eu adoro o Pi de um ponto. Esse é o ponto ideal no máximo que eu uso para x, mas isso é em situações muito específicas que cobrirão juntas. Meu conselho fica com 1,5 e você estará pronto para ir. Em seguida, é o espaçamento entre letras. Você não deve jogar com isso exceto por títulos que são bem curtos. Algumas palavras e é isso. Mas, por favor, nunca modifique esse campo para os parágrafos. É um grande erro. Agora, espaçamento do próximo parágrafo, isso é bom e arrumado, mas não posso dizer que uso isso com tanta frequência. Mata a ideia. Digamos que temos um bloco de pacotes, certo? Vou apertar Enter e isso vai separá-lo. Mas se você quiser controlar a quantidade de espaço vazio aqui, você pode usar esse campo. Observe como funciona, mesmo que não tenhamos nenhum espaço vazio visível aqui, esse campo o inseriu. Aqui. Vou tocar duas vezes. E, obviamente, vamos conseguir essa lacuna aqui. Vou apertar Enter, mas apenas alguns. Para fazer essa opção chamada espaçamento de parágrafos. Podemos ajustar nossas lacunas. Mais uma vez, é legal para pessoas como eu, mas você vai usá-lo? Eu débito bastante. Portanto, não se preocupe com isso é apenas algo que você deve estar ciente. As opções finais aqui são bastante diretas. Esta é a orientação do texto, alinhamento à esquerda ou à direita, ou para esses poucos casos, centralizado. Muito fácil de entender. Você usará muito isso. Mas aqui está algo que você não usará. Esta parte aqui altera o alinhamento do texto na caixa que é postura. Então, se a caixa for bem grande, você pode potencialmente alinhá-la ou centralizá-la. Mas, e é um enorme, mas eu não recomendo que você brinque com ele. Não é necessário. Você verá por que esse é o caso mais tarde nos tribunais, temos opções muito melhores. Agora, você pode pensar que acabamos com essa parte, mas há muito mais para ir. Clique nesses pontos e veja quantos recursos Pigma está realmente nos dando. Além disso, esta é uma janela rolável para que haja cargas que exploramos. Agora, o que eu amo é o fato de você ter essa janela de pré-visualização aqui, esquerda, centro, alinhamento à direita. Você provavelmente sabe disso. Mas e se você não estiver familiarizado com apenas a torta, por exemplo, ouvirá essa palavra que é, a segunda linha de texto tem lacunas maiores para que ela forme um bom bloco de texto. E quanto a subjacente a todos os tachados? Basta passar o mouse sobre eles e ver o que é o quê. Mas, novamente, a verdade é que eu realmente não uso esses discursos, exceto aquele em particular, todos os limites. Isso está disponível aqui em maiúsculas. Clique no primeiro e observe a alteração. Você pode ver que isso está ativado por esse fundo cinza. O movimento ele clica no menos. Essa é uma escolha um pouco estranha porque na maioria dos programas de design, se você clicar nele novamente, você a desabilita não é o caso aqui. Então, novamente, se você quiser desativá-lo, use o símbolo de menos. Agora, para o resto, vou deixar você explorar essas partes se você estiver interessado. Mas meu conselho, instale muitas fontes do Google. Lembre-se de usar 1.5 para sua altura de linha e não mexa com essas outras coisas, exceto todas as tampas. Temos coisas muito mais importantes a cobrir. Obrigado, e te vejo na próxima palestra. 21. Como trabalhar com texto como um profissional: Bem-vindo de volta. Deixe-me mostrar como os profissionais trabalham com camadas de textos na Figma. Depois de configurar um texto, olhe de uma certa maneira, temos que usar esse ícone aqui. Esse painel é chamado de Estilos de texto. E se você estiver acompanhando, é muito semelhante aos estilos de cores. Clique no símbolo de mais e agora você pode nomeá-lo. Na próxima etapa, você pode selecionar qualquer outra camada de texto ou criar uma nova. E em vez de brincar com todas essas configurações, você pode fazer isso. Clique aqui e escolha o estilo basco que acabamos de criar. Além disso, você pode organizar esses estilos como quiser. Mas a maioria das pessoas usa a seguinte estrutura. H1, H2, H3, às vezes H4, textos corporais, citações, links e talvez alguns outros itens. Mas vamos levar o melhor para baixo. Por que, porém, por que precisamos de todo esse trabalho preparatório? Bem, aqui está a coisa. Deixe-me abrir este brinde na guia Comunidade. Temos três títulos aqui, certo? Se clicarmos no primeiro, podemos ver que isso é mostrado em uma ferrovia extra negrito 25 pixels. Mas e se o próximo fosse 23 pixels e o final fosse 27 pixels? Isso seria bom? Não, claro que não. Isso porque precisamos de consistência, mas também precisamos de velocidade. Então, para ter certeza de que temos essas duas coisas, criamos um estilo. Vamos chamar isso de h3 ou o subtítulo, ou o que você quiser. E agora podemos aplicar esse estilo em todos os lugares. Esta é uma única página, mas novamente, esta palestra é sobre como os designers profissionais funcionam. Projetos sérios podem ter 2050 Mesmo quando 100 páginas ou telas. Quando esse for o caso, talvez você não se lembre do, se esse valor fosse 22 ou 24, 26, as pessoas esquecem, é normal. É por isso que temos os têxteis dos EUA. Isso nos ajuda a trabalhar mais rápido , mas também a permanecer consistentes. Agora, sobre essa estrutura de nomeação, talvez você não saiba o que significa H1, H2, H3. Certo. Deixe-me explicar rapidamente. H significa o título ou o título. Este é um termo que vem do HTML e é uma convenção de nomenclatura padrão. H1 deve ser usado para o título mais importante na página. Também é o maior, e normalmente há apenas um deles na página. H2 é outro título e muitas vezes é visto várias vezes na página, mas é menos importante ter certeza de que essas coisas são muito diferentes. Você deve se certificar de que há uma grande diferença entre eles. Então, se H1 for 60 pixels, H2 não deve ter 56 pixels, certo? Por sexo. Não, porque isso seria muito semelhante. As pessoas podem não ver a diferença. Em vez disso, você deve usar algo como 48 pixels. Agora, deixe-me ser claro. Não há diretrizes rígidas. Não há um conjunto específico de regras que você precisa seguir se quiser seu maior título. Então H1 para ter 48 pixels, tudo bem. Se você quiser maior ou menor. Mais uma vez, está totalmente bom. Cabe a você. A única regra é isso garante que eles sejam diferentes o suficiente, especialmente com os três primeiros títulos, H1, H2, H3. Novamente, estes devem significar um nível de importância diferente. Agora, neste projeto em particular, se desmarcarmos, veremos que temos sete títulos. Isso é bastante incomum, mas como acabei de dizer, nomeie-os como quiser. Por exemplo, esse designer escolheu esse pedaço de textos da seção de depoimento para ser estilizado em H6. Eu preferiria que isso fosse chamado de corpo de texto. E eu provavelmente usaria o mesmo para esta breve descrição aqui nestes cartões. Mas, novamente, no final do dia, não coloque muita pressão sobre si mesmo. Se você não tem certeza de como chamá-los. Use qualquer nome que você quiser. Textos de testemunho para revisar texto, citação, o que funciona para você, desde que você se lembre do que fez está totalmente bem. Agora voltando à velocidade, vamos editar o cabeçalho para dizer a versão extra em negrito, certo? Vou aumentar isso até um valor grande, digamos 60 pixels. Observe como muitas camadas de texto foram atualizadas em uma página. Isso é bom ter, mas não há nada tão louco assim, certo? Não é tudo tão impressionante. Mas em um design de 50 páginas, isso é absolutamente monumental. É assim que os profissionais trabalham com camadas de texto. Eles os salvaram o estilo neste painel e fazem uso dele para ser mais rápido, mas também para permanecer consistente fazendo isso, eles fazem o trabalho, mas também Bacon muita flexibilidade. Portanto, se o cliente odeia essa fonte, você pode mudar rapidamente as coisas. Velocidade, consistência, flexibilidade, isso é têxtil para você. 22. Efeitos no Figma: descubra sombras e mais: Bem-vindo de volta. Quem não ama efeitos? Estou certo? Trabalho, sombras nas sombras borram as palavras, certo? Bem, figma descobriu, Vamos começar com esse design que você anexou ao curso. Vamos explorar os vários exemplos começando com este menu principal. Isso parece muito bom, certo? Mas o contraste simplesmente não está lá. É um pouco difícil de ler. Poderíamos selecioná-lo. Esse valor, isso controla a opacidade dessa camada, mas aqui está uma maneira melhor de fazer isso. Vá para efeitos e clique neste símbolo de mais. Lembre-se de que você pode rolar neste painel. Então, se você não vir efeitos ou exportar, basta rolar para baixo. Agora, por padrão, receberá uma sombra. Clique aqui e altere-o. E assim, esse retângulo ficou congelado. Mas digamos que você realmente não pode tocar talvez por causa da gravação. Bem, não há problema. Clique aqui neste ícone para personalizar o efeito deles. Isso tem um único campo e controla a força do desfoque de fundo. Mude para oito. Deixe-me ampliar e você deve ver o efeito. Isso é bastante popular, especialmente em aplicativos iOS. Este visual congelado para ver o antes e depois, você pode clicar neste ícone aqui mesmo para pensar que é um bom passo em frente. Mas meu conselho é que você fique com branco ou preto. Certo, vamos tentar isso de novo. Neste botão secundário, você pode ver que a imagem de fundo está um pouco confusa. Então, novamente, é difícil ler no desfoque de fundo e ficará mais bonito. Meu conselho é que você não se empolgue com isso. Eu não acrescentaria isso aqui nessas misturas simplesmente porque já o usamos no cabeçalho, e isso é o suficiente. Ok, agora vamos passar para o título principal. O mesmo problema de visibilidade. Desta vez, uma sombra pode nos ajudar a habilitá-la e, sim, acho que é mais fácil de ler. Agora meu conselho é que você sempre desmarque para ver o texto sem distrações. Vamos abrir as configurações e ver o que está acontecendo. X significa horizontal. Meu conselho é que você sempre o deixa em 0. Deixe-me levantar para algo como 30. Veja o que acontece. A sombra se move para a direita. E se você usar um valor negativo vai para a esquerda. No web design moderno, sombras perdidas são o caminho que vão. É melhor assim. Então, novamente, 0 e se x representa a horizontal, y representa o eixo vertical. E isso controla o quão longe a sombra é colocada do texto. Valores baixos funcionam melhor. Na verdade, a maioria das sombras deve ser realmente, realmente, muito sutil, quase imperceptível. Mas se você quiser se destacar mais, você pode aumentar a opacidade. Neste momento, está em 25%. Segure Shift e toque na tecla de seta para cima, aumentamos. Mas isso é perigo que já, eu nunca usaria um valor tão alto. Então, vamos levá-lo de volta para baixo. Certo, agora vamos passar para o botão principal. Aqui vou mostrar outro tipo de sombra, desta vez uma colorida. Use o mesmo roxo que o botão. Você deveria tê-lo aqui. Mas se você não simplesmente provar o botão, ok, a ferramenta conta-gotas é fantástica. Agora levante o borrado para algo como Ben e para o valor y, digamos seis. Finalmente, leve a opacidade até 50%, apenas no caso de você não ter visto estava fazendo a decodificação. Deixe-me mover essa imagem de fundo para fora do caminho. Observe como o botão está irradiando o hábito tem um globo. Essa é outra maneira de usar uma sombra, coisas legais. Agora vamos passar para a camada do desfoque. Selecione a imagem principal e aplique-a, e você verá imediatamente o que isso ajuda com a legibilidade do texto bastante. E, claro, você pode ajustar sua intensidade a partir desta parte aqui. Agora deixe-me esclarecer algo. Este é o desfoque da camada e está afetando a camada em que a aplicamos. Este botão aqui tem um desfoque de fundo. Então, o efeito congelado aparece apenas em seu plano de fundo. Então essa é a diferença. Vou dizer isso mais uma vez. O desfoque da camada funciona na camada que você tem a aplicada na camada de fundo apenas desfocará a camada que está atrás do retângulo ou daquele quadro específico. Certo, quando esta palestra, deixe-me dizer duas coisas. Primeiro, experimente esses efeitos para vê-lo por conta própria e ver como você gosta deles. Também recomendo que você tente substituir a imagem de fundo por outra do unsplash.com. Agora a segunda coisa, e essa é realmente a importante. Por favor, use efeitos com moderação. Não os adicione em todos os lugares. E quando você fizer isso, por favor, seja sutil sobre isso. Todos esses efeitos não são a muleta. Se você não conseguir ler o texto primeiro, tente desfocar o plano de fundo. Se isso não funcionar, clique aqui e adicione a sobreposição preta. Mas se isso não lhe der um resultado muito bom, por favor, mude a imagem. Mais uma vez. Os efeitos não são sua graça salvadora. Eles não são uma muleta na qual você pode se apoiar. Claro que você poderia adicionar uma enorme sombra e traços e qualquer outra coisa. Mas isso parecerá horrível. Então, novamente, use uma dose muito baixa de impactos. É por isso que não vou mostrar sombra suficiente, por exemplo. Não é uma opção aqui, mas a maioria dos iniciantes a usa demais e eles fazem com que seus designs pareçam ser 2005 novamente. Então, novamente, vou pular. Certo. No geral, divirta-se com ele e lembre-se, doses baixas. 23. Tudo que você precisa saber sobre grids: Bem-vindo de volta. Vamos falar sobre grades. Inicie um novo projeto e adicione esse quadro superior. Por favor, altere a largura para 1920, pois é isso que eu sempre recomendo. Diminua um pouco e vamos falar sobre adicionar e usar um sistema de grade. Primeiro, você adicioná-lo. Isso é feito selecionando o quadro assim. Agora, neste painel logo abaixo do layout automático, você encontrará a grade de layout. Clique nele e você terá uma grade móvel aplicada por padrão. Obviamente, isso é útil para os aplicativos móveis, iOS e Android, mas para fins de web design, clique aqui e na grade, mude duas colunas. Aqui estão as melhores configurações para a grade para um projeto de web design. 12 colunas e a margem de 360. Isso é o que eu recomendo que você use. Agora, por que precisamos de uma grade? Bem, isso nos ajuda a alinhar as coisas corretamente. Feche isso e pegue a Ferramenta Rectangle. Imagine que vamos projetar alguns cartões para uma loja online, certo? 12 colunas é o padrão porque podemos dividir esse número por 234 ou até seis. Aqui vou adicionar um retângulo que abrange quatro colunas. Vou duplicá-lo rapidamente, então você verá que ele se encaixará muito bem. Esta grade mostrará todas as imperfeições. Por exemplo, deixe-me mover este um pouco para o lado. Veja como isso se destaca. As grades mantêm você na linha, mas também o ajudam na Figma quando você quer redimensionar algo, por exemplo, para a versão desktop, redimensioná-lo para a versão do tablet. Então 12 colunas com o porquê 360 em ambos os lados. Bem, essa é minha preferência pessoal. E aqui está o porquê. 360 vezes 20 é 720. 1920 menos 720 é de 1200 pixels. Essa parte do design é chamada de área ativa, e é aqui que todos os seus elementos importantes devem ser colocados. Deixe-me mostrar um exemplo rápido. Diga o New York Times, certo? Veja como há muito espaço vazio em ambos os lados do conteúdo. Assim, a margem 360 que colocamos. Mas aqui está a coisa. Vamos mudar para Stripe.com. Você pode ver claramente que há uma linha vertical atravessando o lado esquerdo. As coisas estão perfeitamente alinhadas. Ok, nada mais sai disso. Mas no lado direito, olhe o que está acontecendo, o que está acontecendo aqui. Por que esse design de painel pode sair da área ativa? A mesma coisa se rolarmos um pouco para baixo. Isso não é um erro. Esta parte aqui no meio, esse é um conteúdo essencial. Você precisa lê-lo, você precisa vê-lo. Mas essa parte que está lá fora, é apenas decorativa. Parece bom, mas isso não é essencial, não é importante. Então, para recapitular, a grade para projetos de web design deve ser de 12 colunas, margem 360, 1920 de largura, com uma área ativa de 1200 pixels. Você pode colocar elementos de design fora desses 100 pixels construídos, mas somente se eles forem decorativos. Isso significa que, se eles não forem vistos, não é grande coisa. Deixe-me explicar as coisas um pouco mais. A resolução de tela mais usada no mundo agora é 1920 por 1080. É por isso que meu quadro é 1920 e não 1440. O que é outra coisa? Agora foi a segunda resolução mais usada. Os seis por 768. Isso é usado principalmente em laptops, mais antigos. Aqui está a coisa. Aqui está um quadro 1366 com uma grade adaptada a esse tamanho. Este retângulo aqui tem 1200 pixels de largura. É aqui que o conteúdo será colocado. E você ainda pode ver que há um pouco de espaço vazio em ambos os lados. Então é por isso que eu recomendo 1200 pixels para a área ativa. Mesmo em laptops mais antigos, o usuário verá o site de uma forma decente. Então, vou dizer isso novamente, projetamos a 1200 pixels porque isso se encaixa bem na maioria das telas de computadores e laptops, mesmo nos mais antigos. Agora, você pode perguntar, pressione, a grade 960? Claro. Isso é basicamente um pouco mais estreito e infelizmente, projetos estreitos simplesmente não parecem tão bons. A maioria das pessoas prefere experiências grandes e imersivas. Agora, se for esse o caso, você pode dizer, mas Chris, por que parar em 1200? Por que não ir para 1400 ou 1600? Talvez até mais. Wikipédia ocupa todo o espaço da tela, o mesmo acontece com a Amazon ou a Netflix. Mas essas são exceções e não posso recomendá-las. Você vai se meter em muitos problemas se não seguir meu conselho, pelo menos começar. As regras devem ser quebradas. Claro, mas não agora. Qualquer design que você postar, por favor, certifique-se de seguir meus conselhos. 1924, o quadro 1200 pixels para a área ativa, 12 colunas, margem 360. Agora, antes de terminarmos, quero que faças isso. Use Shift R, que revelará as réguas à esquerda e na parte superior. Então isso é enviado são. Agora clique e arraste um guia para longe, coloca-o em ambos os lados da área ativa aqui. E quando você terminar aqui, é aqui que vou usar enquanto estou gravando esses vídeos, na verdade vou esconder a grade durante a maior parte do tempo. E mesmo quando estiver habilitado agora será de 10%. Em vez disso, eu poderia usá-lo em 3% ou algo assim. E isso porque é distrativo ser honesto. Há muito o que olhar e desenvolver muitas decisões de design a serem tomadas. Quero que preste atenção no que estou fazendo e não se distraia com a grade. Acho que essa é uma experiência de aprendizado muito melhor. Para ocultar a grade, basta clicar aqui neste ícone e pronto. Ok, isso encerra isso. Por favor, certifique-se de se lembrar desses valores. 1920 e 1200 pixels, 360 em ambos os lados, 12 colunas. 24. Uma visão dos componentes: Bem-vindo de volta. Vamos cobrir rapidamente os componentes na Figma. Isso lhe dá muito controle e flexibilidade. Veja como isso acontece. Digamos que criemos um botão. Começarei com uma camada de texto e, em seguida, usarei Shift a para ativar o layout automático. Então, é realmente uma questão de preferência. Vou habilitar um preenchimento, escolher qualquer cor que você quiser. Vou escolher azul ou algo assim. Claro, precisamos mudar o texto para branco puro. Isso faz sentido. Obviamente, podemos querer torná-lo um pouco maior. O tamanho padrão é muito pequeno. Ok, então complete as coordenadas e assim por diante. Novamente, esse ladrilho é subjetivo, mas, como você pode ver, é preciso algumas ações, certo? Não é nada muito difícil, mas são muitos cliques. Agora que temos um botão concluído, podemos usá-lo em todo o nosso design, certo? Diga um design de 50 páginas. Mas, como sempre, o cliente entra e ele diz: Ei, eu não gosto dessa cor, eu não gosto desse fardo. Adicione um ícone, altere o raio do canto e assim por diante. Basicamente, mude tudo. É aqui que o problema entra em jogo. Temos que atualizá-lo em muitos e muitos lugares. Agora poderíamos mudar a cor se usarmos estilos de cores. Mas e o resto? É por isso que precisamos de componentes. Deixe-me excluir todas essas cópias. Aqui está o fardo original, certo? Selecione-o e clique neste ícone Criar componente. Em seguida, arrastarei uma cópia. Agora, digamos que o cliente diz que quer bordas quadradas. Certo, não é um problema. Lá vai você. E a cor? Basta alterá-lo. É tão fácil quanto isso. Mas e se precisarmos adicionar um ícone? Bem, podemos simplesmente arrastá-lo e ajustá-lo conforme necessário. Enquanto estou trabalhando. Aqui está a chave. O clone à direita está constantemente atualizando. Essa é a magia dos componentes. Eles permitem que você faça uma alteração no componente original e, em seguida, todos os clones são atualizados automaticamente , não importa quantos sejam. Deixe-me mudar para outro projeto. Aqui. Esses são todos botões básicos. Na verdade, eles são feitos de um retângulo e da camada de texto. Portanto, isso nem está usando um quadro que está longe de ser ideal. Mas digamos que o cliente queira mudar o estilo desse botão. Bem, antes de tudo, vamos excluir todos esses básicos porque não precisamos deles. Imagine que um colega seu acabou de entregar este projeto, certo? Talvez você tenha baixado da web ou algo assim. Ok, vamos selecionar os dois primeiros e usar o Shift oito para ativar o layout automático. Isso é opcional, mas a maioria dos designers prefere. Em seguida, vá para o topo da Figma e transforme isso em um componente. Linda. Agora você pode alterar cópias de arrastar assim. Mas se o projeto for enorme e em muitas páginas pode ser, você não pode gerenciar isso. Então vá para o painel esquerdo e mude para ativos. Aqui você vai encontrar o botão. Agora, arraste-o e coloque-o em qualquer outro lugar. É assim que você deve trabalhar desde o início, você pode pensar, mas Chris, se estamos constantemente arrastando coisas da barra lateral, não podemos simplesmente fazer isso toda vez o cliente muda de ideia? Basta atualizar e arrastar cópias. Bem, sim, é claro, em pequenos projetos como este é claro que isso é totalmente bom. Mas em maiores, é uma grande dor de cabeça. E tenha em mente que só vou fazer isso uma vez depois disso, começar a mudar o botão, assim, encontrar o original e começar a editar ainda, eu farei algo bastante óbvio para que você possa veja as alterações. É assim que os componentes podem economizar muito tempo. Mais do que isso, você pode alterar o conteúdo do texto em qualquer um dos clones para qualquer outra coisa, digitar algo, e é isso. Mas se você mudar o estilo original, este seguirá o exemplo. Ele atualizará o tamanho, a família de fontes com qualquer outra coisa que você fez no original. E os componentes não são apenas com botões. Você pode usá-los para praticamente qualquer coisa que você possa pensar. Mas vamos dar passo a passo. Primeiro de tudo, como você sabe qual é o botão original e quais são os clones? Bem, o original é oficialmente chamado de componente mestre. Se mudarmos para o painel Camadas, você verá esse símbolo. Percebi que isso está preenchido. Esta é uma massa desse componente e é aqui que você faz todas as suas edições e elas serão espalhadas por todos os seus clones. Os clones são realmente chamados de instâncias. Então, novamente, clones ou instâncias são a mesma coisa. E esse é o símbolo deles. Este está vazio. Portanto, é muito fácil lembrar preenchido para o original, vazio para o clone. Outra maneira de fazer isso, clique em qualquer clone e você verá essa opção aqui. Vá para o componente mestre. Assim mesmo. Agora você sabe onde você pode encontrar o original. Mas e se você deletou por engano? Não se preocupe. Clique no empréstimo OK e você verá essa opção chamada Restaurar componente. Figma tem nossas costas. Certo, agora vamos pausar e recapitular. Os componentes são uma ótima maneira de acelerar seu trabalho. Selecione qualquer quadro, qualquer pasta, qualquer elemento e use este ícone aqui na parte superior. A maioria das pessoas prefere ativar o layout automático. Antes disso, sugiro que você arraste cópias do painel de ativos. Você também pode fazer isso a partir da tela. Mas como este painel, é aí que essa guerra basicamente. Quando você quiser ter certeza de que está tudo bem, o componente muçulmano, também conhecido como o botão original. Você pode reconhecê-lo por esse símbolo no painel de camadas. Ou você pode clicar em qualquer clone e você terá a opção de ir para o componente principal. Ok, Voltando a ele, você pode fazer edições em suas instâncias e elas permanecerão como estão, mesmo se você alterar o componente mestre. Aqui está apenas um exemplo. Farei algo de forma justa. Amigo deles. Vou desativar o preenchimento. Vou manter um derrame. Vou mudar a cor do texto. Então, novamente, radicalmente diferente, certo? Não há necessidade de trabalhar junto para este. A propósito, quero que você perceba que as outras instâncias, então a outra, os clones, elas permanecem as mesmas. Agora vamos ao original e mudar, digamos que o formulário família, certo? Vou mudá-lo para Montserrat. Veja como tudo é atualizado, incluindo este. Também vou aumentar o tamanho para que você possa ver as diferenças. E, novamente, seguirá o mesmo que tenhamos feito algumas alterações nele. E se mudarmos de ideia, o melhor disso é que podemos ir aqui e você vai encontrar essa opção chamada redefinir todas as substituições. Assim, ele flui de todas as nossas edições. Esse é o poder dos componentes, mas isso é apenas uma visão geral. Falaremos mais sobre eles em um ritmo mais lento quando for a hora certa. Neste ponto, quero que você pratique com essa situação específica com um botão. Use este projeto e refaça todas as minhas etapas. Exclua todos esses outros botões, use o layout automático neste primeiro, transforme-o em um componente e depois divirta-se com ele. Veja o que você pode mudar no que você não pode mudar. Por favor, aproxime-se com uma atitude relaxada. Agora, eu não mencionei algumas coisas sobre componentes e isso é totalmente intencional. Entraremos em coisas mais avançadas mais tarde. Há também uma folha de truques anexada à proporção de memória. E com isso, por favor, vá e divirta-se um pouco. 25. Rodagem e projetos na figma: Bem-vindo de volta. Quero tirar um minuto e explicar as limitações do plano gratuito e da Figma, há muita informação para cobrir. E isso porque a Figma foi construída para os projetos que contêm centenas de telas. É por isso que tudo o que está chegando é tão complexo. A boa notícia é que você não precisa memorizá-lo. Você não precisa memorizar nada. Sente-se e relaxe. Ok, na tela de boas-vindas no painel esquerdo, você tem a opção de criar uma equipe. Você deve fazer isso mesmo se você planeja trabalhar sozinho no momento. Já tenho o Mindset up e posso clicar com o botão direito do mouse nele para renomeá-lo. Agora, é aqui que podemos criar um projeto. Eu recomendo que você use o nome da empresa para a qual você está trabalhando. Então, se você está redesenhando, isso parece ótimo. Dotnet, esse é o meu blog. Isso é o que eu escreveria aqui. Então, basta digitar o nome da empresa. Quando você clica em seu projeto, inicialmente estará vazio. Mas o lado direito conta a história do plano gratuito Figma. Você obtém três arquivos de design figma e o único projeto, o que significa este que acabamos de criar. Deixe-me explicar como isso funciona. Como acabei de dizer, recomendo que você nomeie seus projetos com base no nome da empresa. Portanto, se você estiver trabalhando para o Uber, digite isso, você sempre pode botão direito do mouse e renomear o projeto. Ok, agora, você pode pensar em um projeto como um jogo de tabuleiro. Todos os jogos de tabuleiro têm uma caixa que mantém todas as peças juntas, certo? Se você tem jogos de tabuleiro diferentes, você deve ter caixas diferentes para cada um deles, certo? E isso porque você não quer misturar peças entre elas. Isso seria absolutamente horrível, certo? Você deve mantê-los separados em todos os momentos. É por isso que temos projetos para manter todos os arquivos relacionados a essa empresa dentro de sua própria caixa. É muito semelhante às pastas em seu sistema operacional, certo? Digamos que você tenha três jogos instalados em seu sistema. Você deve ter três fontes diferentes, certo? Se você instalar todos os três ganhos em uma única pasta, os arquivos ficariam misturados e, obviamente, isso seria um pesadelo. Faz muito sentido ser organizado. Ok, então esse é um projeto, uma caixa grande ou a pasta que mantém todos os arquivos juntos. Mas quais arquivos entram no projeto? Arquivos de design Figma. Esses arquivos FIG, o que significa o que acabamos de criar com a palavra Control N usando esse botão dedicado no canto superior direito. Agora, se formos para a guia recente, você verá muitos arquivos aqui. Imagine que esses dois são para o projeto OBOR. Bem, basta clicar neles e arrastá-los para dentro do nosso projeto. Simples assim. Assim, você pode arrastar arquivos do lado direito para a esquerda. Agora vamos nos afastar do recente e do checkout para o projeto. Dentro desta caixa, temos os dois arquivos que acabamos de mover. Imagine que esse é o design para o aplicativo móvel e este é o que a versão superior. Faz sentido tê-los separados porque os projetos são bem diferentes para a mesma empresa, mas novamente, tipos diferentes de projetos, certo? Ou talvez um deles contenha os quadros de riqueza. Ou talvez você tenha as fontes de inspiração ou talvez algumas anotações do cliente talvez uma apresentação que você fez para o cliente. Projetos grandes podem ter dezenas de arquivos diferentes. Se você está vindo do Photoshop, você pode pensar nisso como arquivos PSD individuais. Isso é o que eles realmente são, arquivos FIG de ponto individuais. Mas, em vez de serem salvos no disco rígido do computador, eles são salvos na nuvem. Agora, vamos fazer uma pausa por um momento para recapitular um projeto. Este aqui pode conter vários arquivos de design. Esses arquivos de design podem ser praticamente qualquer coisa relacionada ao projeto. O plano de três Figma permite que você tenha três arquivos. É isso. Ok, mudei para a guia recente e arraste outra para lá. Agora, volte para o projeto e observe a mensagem, atualize para os arquivos de design ilimitados. Então esse é o limite com os três arquivos do plano Figma três. Agora, o preço é descendente, mas e se você não quiser pagar? Bem, eu não recomendo isso, mas aqui está. Quando você cria qualquer projeto aleatório assim. Deixe-me fazer um retângulo simples com uma cor brilhante. Agora, quando você fecha, isso é salvo automaticamente. A questão é onde não em recente, não se deixe enganar. Em vez disso, ele salvou aqui, sob rascunhos. Aqui você pode ter quantos arquivos quiser. Então, basicamente, esse é o trabalho ao redor. Você poderia, potencialmente, deixar todos os seus arquivos aqui. Você não pode compartilhá-los com nenhum outro designer para trabalhar neles juntos, mas você pode apresentá-los ao seu cliente e você pode renomear cada arquivo para algo como Uber iOS ou Android, Uber desktop e assim por diante. Obviamente, não é tão bom quanto não tão bem organizado. Mas se você é apenas um iniciante, isso é totalmente bom para começar. E depois de ganhar alguns milhares de dólares com seu trabalho de design, você deve atualizar para um plano pago que seja mais do que esses. Além disso, você tem a opção procurar seus arquivos, desde que os nomeie corretamente, você não deve ter nenhum problema. Agora, para recapitular, isso é tudo sobre como você organiza as coisas. Não há caminho certo e errado, mas existem melhores práticas. É melhor ter um projeto no lado esquerdo para todas as empresas em que você trabalha. Dentro desse projeto, você pode ter várias pilhas de design. Um para o design do boletim informativo, um para a mídia social 14, esse aplicativo iOS para a versão móvel e assim por diante. Agora, aqui está uma coisa que você pode fazer pelos projetos muito grandes. Dentro desses arquivos. Você pode ter páginas e páginas que o ajudem a organizar as coisas ainda melhor. Por exemplo, no arquivo de mídia social, o que pode ser muitas coisas. Você pode ter páginas separadas para YouTube, Facebook, TikTok, Pinterest, Instagram e assim por diante. Certo? Então, novamente, esta é apenas uma maneira de organizar um projeto massivo que pode conter dezenas, talvez centenas de telas. Figma pode ser usado para os maiores projetos do mundo com temas que têm dezenas de designers, projeto, gerentes de produto, testadores, desenvolvedores e assim por diante. Literalmente, US $100 mil projetos. E quando há tantas telas e tantas pessoas envolvidas, esse é o tipo de coisa que realmente ajuda você. Você tem que ser incrivelmente organizado. Mas de volta ao mundo real, você não precisa se preocupar com tudo isso. Vou te ensinar passo a passo para criar um novo arquivo e novas páginas e assim por diante. Então, por favor, seja paciente e não se preocupe se você não entender completamente tudo isso. À medida que continuamos com o curso, prometo que fará cada vez mais sentido. Mas agora, você conhece as limitações do plano gratuito, um projeto e três arquivos individuais. Você sabe que o vestido é um lugar onde tudo é armazenado por padrão. E que você não pode convidar outros designers para trabalhar nesses projetos junto com você. Mas mesmo com rascunhos, você pode compartilhar seu trabalho com o mundo no sentido de exibi-lo com a vista. E com isso, vamos continuar. 26. Aqui está o seu bom designer web: Quando penso sobre o que faz um bom web designer, sempre penso nessas três coisas. Execução perfeita de pixels, compreensão das necessidades do cliente e atenção aos detalhes. Vamos falar sobre essas coisas em detalhes. Mas quero sublinhar um ponto incrivelmente importante. Não se envolva em cargas de trabalho avançadas no início. Caso contrário, não pense que se você aprender Figma em um nível super alto, você se tornará automaticamente um ótimo web designer. Deixe-me explicar o que isso significa. Veja, Figma é um incrivelmente poderoso projetado para bem, que é usado por profissionais de todo o mundo, de freelancers a grandes estúdios de design. Agora, se você conseguir dominar esses recursos avançados, Figma, posso ajudá-lo a criar projetos incríveis em pouco tempo. Você pode trabalhar com sistemas de design. Você pode compartilhar ativos com uma equipe, confiar em componentes, invariância, usar restrições para criar estados responsivos facilmente. Mais uma vez, coisas verdadeiramente avançadas. E eu sei que você não conhece esses dois termos. Então, aqui está um exemplo rápido. Posso alterar facilmente o esquema de cores para fazer alguns cliques. Esse poder de entender a figma tem capacidades. Também posso mudar minha topografia com a mesma facilidade. Posso mudar esse texto escuro para algo um pouco mais vibrante e você pode ver como isso simplesmente funciona, certo? Talvez o cliente queira as categorias acima dessa área, não um problema. Esse layout é construído de uma forma em que isso literalmente não requer nenhum esforço. Posso virar um interruptor e posso mudar o estilo de um fardo assim. Agora, há alguns anos, isso teria sido incrivelmente demorado. E isso está na superfície. Há muito mais capacidade empacotada na Figma. Mas veja se você deixar o início de sua jornada, isso pode fazer sua cabeça girar. Isso pode desencorajá-lo. Enquadra a variância dos componentes com o inferno essas coisas. Quadros dentro de quadros com layout automático. É por isso que eu realmente fiz este vídeo. Para dizer isso, por favor, não se concentre nessas coisas. É ótimo aprendê-los. Não me entenda mal. É incrível construir seu projeto com as técnicas mais avançadas e as melhores práticas possíveis. Mas é tão intimidante e pode fazer você querer desistir. É por isso que eu queria falar sobre essas coisas aparentemente complicadas. Isso não vai fazer de você um ótimo web designer. As coisas mais avançadas não farão você sucesso da noite para o dia. Em vez disso, aqui está o que eu proponho. Por favor, entenda os três princípios que vou mencionar neste curso. Execução perfeita de pixels, compreensão das necessidades do cliente e atenção aos detalhes. Estes têm pouco a ver com Figma. Se você se concentrar neles e entendê-los, o resto se encaixará. Mais do que isso, você pode trabalhar em qualquer programa de design, estar no Figma e no Adobe XD sketch e qualquer outra coisa. Mas, por favor, não pare de aprender sobre web design porque você não entende como alguns recursos avançados funcionam. Essas coisas são todas opcionais, variância e restrições e outras coisas. Eles não são um must-have. Com o tempo. Você os aprenderá. Eu vou te ensinar sobre eles, mas eles são parte essencial são os princípios. Então, vou dizer isso pela última vez. Não deixe que esses recursos avançados o assuste. Eles não são essenciais para você se tornar um ótimo web designer. Você vai aprendê-los no devido tempo. E com essa pressão de si mesmo, podemos continuar com uma atitude mais relaxada. 27. O que vem a seguir?: Ei, este é o Chris. Parabéns, estou muito feliz por você ter chegado até então. Espero que você tenha visto o quão incrível Figma pode ser, suas atividades e exercícios. Mas você tem que notar que há muito mais para desempacotar. Sugiro que você verifique meu perfil para poder começar a próxima etapa da sua jornada. A Figma está sendo usada pelas maiores empresas do mundo para projetos de design web e de aplicativos. Então meu conselho, calor indo, veja do que se trata o primeiro. Há muito zumbido em torno de Figma. Todo mundo está falando sobre isso. E nesta parte, acabamos de arranhar a superfície. Há um terço a mais para desempacotar. Então, com isso, espero vê-lo na próxima parte da sua jornada. Lembre-se, continue aprendendo, continue crescendo. Este é o barão da imprensa se inscrevendo para o momento.