Fundamentos do UI/UX Design do Figma

1. Introdução ao curso de treinamento dos Fundamentos do Figma: Olá. Meu nome é Dan Scott, e este é o curso Figma Essentials. Juntos, você e eu aprenderemos tudo o que você precisa saber para começar como designer de UX dentro do FGMA Durante o curso, você aprenderá a dominar todas as ferramentas do Figma Também compartilharei todos os fundamentos do design de UX para criar belas interfaces de usuário e protótipos envolventes com facilidade no Figma Quem é ele? Sou Dan Scott. Sou designer há mais de 25 anos. Ganhei vários prêmios de ensino e meus cursos on-line já foram frequentados por mais de 1 milhão de pessoas, assim como você. Primeiro, forneceremos seu próprio resumo exclusivo e mostraremos como trabalhar com uma persona de UX Você aprenderá a criar wireframes simples. A partir daí, você aprenderá a implementar cores e imagens adequadamente em seus designs. Você aprenderá o que fazer e o que não fazer para escolher fontes para aplicativos móveis e da Web Você aprenderá a criar seus próprios ícones, botões e todos os tipos de componentes de interface do usuário usando os recursos de desenho do Figm Você aprenderá os termos assustadores, como componentes, restrições e variações. Eles são todos muito fáceis de onde você sabe como. Você também facilitará nossa vida usando kits de interface de usuário e plug-ins gratuitos para FiGMA para acelerar nosso fluxo de trabalho Você também aprenderá a usar alguns dos novos recursos úteis de IA do FiGMA Criaremos um guia de estilo simples pronto para entrega ao cliente Você aprenderá a criar microinterações e animações Até a colaboração com outros membros da equipe, uma visão geral dos sites do FugMA para que você mesmo possa criar o site e exportar todos os arquivos certos, prontos para serem entregues a um desenvolvedor ou engenheiro Você tem tarefas ao longo do curso que eu defini para que você possa praticar o que está aprendendo e ter algo exclusivo para seu portfólio no final Agora, este curso é voltado para pessoas novas em design, novas em design UIX, design de experiência do usuário Mesmo que você não tenha certeza do que é design de UX , não se preocupe, vamos começar do início e avançar passo a passo. Tudo bem, meu amigo, está na hora. Inscreva-se e junte-se a mim e vá de Figma zero a Figma hero. Ele desenha sua própria camisa? Ele fez. Estou tão orgulhosa dessa. É legal. Eu meio que o virei para o lado e o deixei pingar. Só que o ouro não vai passar. Todas as outras peças foram bem passadas. Essa parte me deixa louca. Por que você não vai passar ouro? Por quê? Ah. 2. Primeiros passos no treinamento no Figma: Olá. Você está dentro. Você conseguiu. Bom trabalho. Ei, a primeira coisa é que você precisa baixar os arquivos de exercícios. Haverá um link na página aqui em algum lugar. Faça o download desses arquivos que você precisa para este curso. Além disso, nesses arquivos de exercícios haverá uma folha de atalho, ok? Não vamos nos aprofundar muito nos atalhos desta. Vamos, mas existem alguns que são realmente naturais e úteis de usar. Então eu fiz uma folha que você pode imprimir, colar ao lado do seu computador e meio que circular as que você usa muito. A outra coisa é que existe uma versão gratuita e uma paga do Figma Começarei o curso usando muitos dos recursos gratuitos e encontraremos alguns recursos pagos à medida que avançarmos Então, se você planeja usar apenas a versão gratuita, tudo bem. Você pode ir muito longe em figma. Você sabe, você pode ser um designer de UX bastante competente no Figma usando a versão gratuita, e eu vou, mas também não vou me esconder da versão paga, porque também há algumas coisas muito legais para fazer Portanto, mesmo que você não faça a versão paga, é bom ver quais são os recursos pagos e como usá-los. A outra coisa é que há uma versão para desktop e uma versão baseada em navegador. Vou usar a versão para desktop. Eles são exatamente iguais. Um que você pode baixar e ter em seu computador, outro que você pode usar em seu navegador Chrome. Não há diferença entre os dois. Use qualquer um deles. Vou usar a versão do navegador porque sou velho e gosto que as coisas estejam no meu desktop sem um bom motivo. Então aí está. A outra coisa é que consigo falar muito rápido, especialmente se estou no início de um curso e acabei de tomar um café. Talvez sim, fale rápido demais para algumas pessoas, especialmente se talvez o inglês for sua segunda língua. A outra coisa é que algumas pessoas acham que eu falo muito devagar. Você pode me acelerar. Tem uma engrenagem. Onde está? Acho que está aqui. Clique nele. Você encontrará uma velocidade. Você pode me acelerar ou me desacelerar conforme lhe convier. A outra coisa é que a invenção é muito boa para atualizar coisas. Eles dizem: “Make it better”. Vamos mudar isso. Vamos deixar isso mais claro O problema para mim, porém, é que, como criadora de cursos, eles mudam as coisas e as tornam melhores, e isso pode ser complicado Se for uma grande mudança, vou regravar o vídeo e você não saberá. Se for uma pequena alteração, basta verificar os comentários. Pode haver uma nota lá embaixo, tipo , costumava ser chamada assim e agora se chama assim, ok Mas está no mesmo lugar, tem a mesma aparência e faz a mesma coisa. Então, fique de olho nisso durante o curso. A outra coisa é que, quem está animado para começar? Eu sou. Adoro fazer esse curso. Estou animado para começar. Deixe-me saber nos comentários se você também estiver. Adoro conferi-los depois de fazer um curso. Eu fico tipo, Quem apareceu para começar? Tudo bem. Continue com o curso, Dan. Ok, vamos. 3. Para que serve o Figma?: Tudo bem, neste vídeo, vamos falar sobre o que é figma e o que figma não é Então, figma, na verdade, se tornou muitas coisas. É usado principalmente para trabalhar com UIUX. Então, basicamente, resumindo, você está criando ou projetando um site ou um aplicativo. Então, um cliente vem até mim e diz: Dan, preciso que você crie um novo site para nós. Você abriria o Figma e o projetava lá, e depois desenvolvia em um site real Portanto, Figma é a aparência de um site e é uma maneira rápida de projetá-lo para que os clientes aprovem Por que nos preocupamos em projetá-lo no Figma e depois construí-lo É principalmente uma questão de velocidade. É sobre prototipagem rápida Esse é o tipo de termo-chave para Figma e tipos de alternativas para Figma Prototipagem rápida. Então, se o cliente vier até mim e disser quero todos esses recursos, quero fazer essas coisas. Você pode projetá-lo rapidamente, entregá-lo ao cliente. Você pode prototipá-lo para que pareça um site e funcione como um. Os botões clicam. Você vai a todos os lugares. Faremos isso no curso. É chamado de prototipagem Assim, você pode fazer com que seja um site realmente competente. Então, o **** pode voltar e dizer, uh, não é o que eu quero, ou que não funciona, ou mais importante, você pode testá-lo com os clientes desse cliente, e eles podem usar esse tipo de protótipo Está bem? Não é um site completo, mas parece um, e eles podem se perder. E você pode consertar isso. Está bem? A iteração é o que nos torna designers de UX e também o que torna o Figma tão poderoso Eu posso dizer, tudo bem, cliente, aqui está seu projeto, e eles dizem, não, eu posso voltar e fazer mudanças rápidas, não voltar para o desenvolvedor e reconstruir essa enorme grande base de código que criamos, ok Basta arrastar algo no Figma, protótipo super rápido, fácil e rápido E depois volte para o cliente ou seu cliente e diga: O que você acha agora, ok? E observe-os usá-la e perceber que ainda estão perdidos. Mude as coisas, mude o idioma, mude o tamanho , você sabe, ajuste as coisas muito rapidamente que você possa chegar a um ponto em que todos concordem, o cliente fica tipo, sim, adoro essa Então você pode trabalhar com um desenvolvedor, ok, para construir essa coisa. Ou trabalhe com um dos outros recursos do Figma, chamados sites Figma ou WordPress, ou o que mais temos? Tem outros na minha cabeça Webflow, tem mais, ok? Elementor. Há muitas maneiras de construí-lo depois, ok? Então, vamos nos concentrar no lado do design aqui, no tipo de processo de design de UX, ok? E crie sites que pareçam funcionar. Você só precisa saber que não é exatamente como no final, ok? Esse é o tipo de processo. E por que fazemos isso? Porque é rápido e muito mais barato do que fazer você projetá-lo ou gastar tempo criando este site totalmente funcional para ter muitas alterações. Então é aí que a figma se encaixa. Isso é o que ele faz muito bem. Prototipagem rápida. Agora, o que mais o Figma faz muito bem é que ele está meio infiltrando no espaço geral do design Então a Figma nasceu para criar sites e aplicativos, ok, prototipagem rápida Mas agora as pessoas superaram as ferramentas, ok? E as pessoas começaram a usá-lo apenas para coisas gerais de design. Então, as ferramentas que você aprenderá nesta aula serão baseadas em web design e design de aplicativos, mas aprenderemos a ferramenta para que você também possa usá-la como uma ferramenta geral de design. E as pessoas estão usando isso para isso. Então, eles o chamam de Figma draw, mas está meio que incluído neste curso Junto com isso, são as ferramentas de desenho. Então você vai se perguntar: Oh, por que não posso simplesmente criar este folheto aqui? Ou esse anúncio de mídia social, você pode usar totalmente as habilidades deste curso. Temos que nos concentrar no UIUX, mas você pode usá-lo para tudo Algumas das outras coisas que a FIGMA faz que não são abordadas neste curso Então, eles têm algum outro tipo de, tipo, outras ferramentas. Há um chamado FIG JAM, ok, que é, você sabe, um tipo de produto separado. É como uma ferramenta de quadro branco como o Merro, ok, como ideias e brainstorming Eles têm o Figma Buzz, que é uma ferramenta específica de design de mídia social que é uma espécie de alternativa para criar o Canva ou Eles têm sites Figma, ok, onde você pode pegar seu arquivo Figma, ok, que estamos criando neste, o design dele e realmente transformá-lo em um Está bem? Portanto, a Figma afirma que está fora do escopo deste curso No final, abordaremos isso um pouco. Ok, porque é muito legal e o próximo passo em seu processo. Mas isso seria uma alternativa para algo como web flow ou Wordpress, ok? Muitas vezes, porém, eu estou construindo coisas no Figma, ok, e depois entregando para um desenvolvedor construir em um tipo diferente de base de código, ok? Mas se você mesmo estiver construindo, poderá usar os sites Figma Eles têm slides Figma, que é basicamente uma alternativa ao PowerPoint O que mais eles têm? Figma buzz, mídia social? Deixe-me verificar minhas anotações. Espere aí. Lá vamos nós. Figma M é o tipo de versão beta da codificação de IA Você pode meio que conversar com ele para codificar seu site. Isso é muito legal fora do escopo deste curso. Vamos nos concentrar no que eles chamam de Figma. E esse é o tipo de uso geral para ele, e eles o chamam de design Figma. Então, vamos fazer isso. Concentre-se no design de UI UX, mas saiba que as ferramentas que você aprenderá também podem ser usadas para fins gerais de design. Também é uma espécie de alternativa. Vamos usar o Photoshop More Adobe Illustrator , se você conhece Tudo bem, então é isso que ele faz. Eu queimo um pouco. espero que seja útil, porque há muitas facetas diferentes no Figma Vamos nos concentrar na interface do usuário, no design de UX, e isso se chama Figma Design. Próximo vídeo. 4. Qual é a diferença entre UI e UX no Figma: Tudo bem, vamos falar sobre a diferença entre UI e UX Portanto, as diferenças são UY, interface do usuário, UX, experiência do usuário A interface do usuário são os pixels na página, como as fontes que você escolhe, as imagens, as cores, o espaçamento. Você está meio que fazendo com que pareça bom. Ok, você era designer de interface de usuário, e foi assim que eu comecei nesse campo. O cliente vinha até mim e dizia: eu quero um site. Eu desenhei que parecia legal. Ele gostou. Nós o enviamos. Ok, eu era designer de interface do usuário. Quando me tornei designer de UX , o cliente veio até mim com um problema. Digamos que seja necessário atualizar o checkout em nossa página Queremos melhorar as coisas, ok? Então, em vez de apenas projetar algo que achei que seria melhor, ok, eu projetaria algo. Eu teria uma boa ideia e uma hipótese sobre o que poderia ser feito, ok? E então eu ia e testava, ok? Então, eu testaria com algumas pessoas e veria, elas acham mais fácil? Eles acham que é mais confiável, ok? Fazemos pequenos testes presenciais, ou você pode fazer isso on-line ou, digamos, trazer seu laptop. Executamos muitos testes A/B em que dizemos: “Tudo bem, estamos sempre analisando as atualizações do fluxo de checkout Fazemos testes AB em que metade das pessoas que acessam o site acessam o antigo 1.5 e acessam este novo. E eu fico tipo, tudo bem, é melhor? Temos melhores conversões? Menos conversões Por quê? Podemos mudar essa coisa? Isso o tornou melhor? Estamos começando a entrar no campo de UX, ok, onde estamos testando nossas ideias, você sabe, iterando rapidamente, o que nos torna designers de UX Se você já usou um site quando deparou com algo frustrante, isso são problemas de design de UX, ok E isso é algo que você vai notar muito mais agora e deveria, ok? Então, digamos eu use meu site bancário por meio do meu computador aqui. Não sei por que estou fingindo digitar, mas, você sabe, uma das pequenas frustrações é toda vez que vou até essa coisa, eles E agora, quando eu digito minha senha e pressiono Enter, ela não faz nada. Você pega o mouse e clica no tipo de botão de envio. Você pensa que é muito fácil entrar e ajustar isso e, se eles tivessem feito alguns testes, ok, veriam que veriam que as pessoas ficaram frustradas e pararam aí, e teria sido uma solução fácil e teria tornado toda a experiência do usuário muito mais viável para o usuário Não é uma palavra. Mas você entendeu a ideia. A interface do usuário nos coloca na página, do jeito que parece. UX é como as pessoas interagem com seu projeto. E é isso que vamos fazer neste curso. Analisaremos a interface e darei algumas dicas sobre como UX é feita e a prototipagem ao longo do Vamos nos concentrar nas ferramentas Figma, mas vou tentar incluir algumas das melhores práticas de UX para você começar também 5. O que estamos fazendo neste curso de Figma: Tudo bem. O que estamos fazendo neste curso? Nós vamos fazer isso. É um site para uma determinada marca de comércio eletrônico. Todo mundo vai comprar seu próprio. O que eu uso neste curso é para carteiras, ok? E vamos fazer uma demonstração rápida. Tudo bem, um pequeno boletim informativo de assinatura aparece. Está bem? Podemos acessar Vamos aprender mais sobre isso. Nós o tornamos uma espécie de página inicial, uma página de recursos. Vamos para a página de compra. As pessoas podem marcar coisas, adicionar coisas e, em seguida, você recebe uma página de confirmação. E uma chave seletora que atualmente não faz nada. Criaremos uma versão para desktop e uma versão móvel do nosso site. A navegação móvel Também faremos wireframes. Está bem? Então, acabaremos esse tipo de versão mais alta fidelidade, esse tipo de versão completa, mas também criaremos nossos wireframes para começar, conectar tudo, para que ele vá a lugares e possamos fazer testes Garantiremos que tudo seja responsivo para que possa ser ajustado a diferentes tamanhos de tela Criaremos um guia de estilo básico com estilos e nossos vários componentes diferentes para navegação e botões. É muito divertido. Então, por que estamos construindo isso? Vamos trabalhar com isso. Então, vamos começar com um resumo que tem o que estamos fazendo e uma persona e vamos construir essa coisa chamada Ta oh, basicamente, vamos falar sobre isso No próximo vídeo, todos receberão seu próprio resumo exclusivo. Estamos todos construindo algo um pouco diferente. Você receberá nosso produto e uma personalidade curta Uma persona é apenas uma descrição concisa de quem é o cliente, porque se criarmos algo para todos, fica um pouco claro e não é muito bom para nenhuma pessoa em particular Vamos identificar para quem estamos construindo isso. Nesse caso, estou construindo para Sam. Eu sei a idade deles, conheço informações básicas sobre eles, então, quando tomamos decisões em todo o nosso processo de design usamos o usuário, sua personalidade, para tomar decisões, em vez de criar algo que Dan queira porque não é para mim, eu não deveria decidir, isso é Acho que deveria funcionar dessa maneira. Preciso me separar e pensar, o que Sam gostaria? Todos receberão um pouco diferente. Sam gosta de moda e das últimas tendências, então vou usar isso na minha cabeça Por outro lado, você pode contratar alguém que seja muito ecológico ou ecologicamente correto. Isso vai realmente mudar o design. O público-alvo. Precisamos construí-lo para eles, não para você, não para o cliente ou seu cliente, para Sam. Agora, abordaremos apenas um pouco do processo de design de UX. Estamos liderando principalmente o software, mas vou apresentá-lo ao longo do curso apenas para que você tenha uma compreensão básica do processo de design de UX. Mas depois desse vídeo ou depois desse curso, confira personas, um pouco mais. Leia sobre eles. Essa é realmente básica Agora que sabemos qual é a nossa personalidade, vamos trabalhar nesse fluxo de tarefas Todos nós vamos construir o mesmo. Vamos criar uma página inicial, uma página de recursos, uma página checkout e uma página de confirmação de pagamento Isso é chamado de fluxo de tarefas. É uma tarefa muito específica de se fazer em um site. Freqüentemente, você recebe um emprego para um site existente que não é uma reformulação completa É como se eu quisesse que você atualizasse o fluxo de inscrição ou o fluxo de cancelamento , ou talvez fosse como fazer o upload de um documento. Você trabalhará em um fluxo de tarefas específico. Provavelmente, agora é importante falar sobre a diferença entre um fluxo de tarefas e, digamos, um fluxo de usuário. Encontrei um bom exemplo aqui. Isso é mais um fluxo de usuários. Como o fluxo é muito linear, esse fluxo de usuários, há muitas maneiras diferentes , muitas decisões de chegar a essa última parte aqui e você precisa considerar todas elas. Um trabalho muito maior do que o que estamos fazendo neste curso. Digamos que um bom fluxo de usuários para o site bring our laptop. Pode ser que alguém chegue à página inicial, se inscreva e, para fazer um curso, possa acessá-lo por meio da opção de pesquisa. Pode haver pessoas procurando. Eles podem estar nas sobrancelhas, pessoal. Eles podem ter acessado um anúncio que vai diretamente para a página de visão geral. Há todas essas maneiras diferentes de começar a fazer um curso em vídeo. Como designer de UX fazendo um fluxo de usuário, essas são todas as considerações que preciso fazer. Trabalho maior. Estamos fazendo algo bom e simples, apenas uma tarefa, tudo bem. Então, no próximo vídeo, eu vou te dar seu resumo exclusivo. Usaremos esse fluxo de tarefas. Vamos construir uma versão wireframe dela, vamos testá-la. Em seguida, criaremos uma versão de hiidelidade. Também criaremos uma versão para desktop. Vamos projetá-lo. Vamos torná-lo inativo Ao mesmo tempo, aprendemos todos os fundamentos do Figma, mas também abordaremos parte desse processo de design de UX Tudo bem. Você está pronto? Estou pronto. Tudo bem. Vamos embora. 6. Projeto do curso 01 - Crie seu próprio briefing: Tudo bem, é hora do dever de casa. Ele disse dever de casa? Eu quis dizer praticar aprendendo. Então, vamos definir tarefas ao longo do curso, apenas para que você não acompanhe cegamente a criação de algo E o legal disso é que você pode criar algo único para você. Vamos usar essa coisa chamada random project generator.com para gerar um resumo exclusivo, mas todos seguiremos o mesmo fluxo de tarefas Então, todos nós vamos fazer isso. Todos nós vamos criar uma página inicial para um produto, as características do produto Haverá uma página de checkout e uma página de confirmação. Então, estamos fazendo o mesmo fluxo de tarefas. Mas se usarmos o gerador de projetos aleatórios, todos conseguiremos criar algo um pouco diferente que possamos usar e que seja exclusivo para nosso portfólio. Então, abra os projetos de classe Doc. Ele deve estar em seus arquivos de exercícios. Aí está lá, ok? E o seu estará muito mais cheio do que o meu. Então, estamos prontos para este aqui, Projeto 01. Então, visite random project generator.com e clique no botão UyX. Então, vamos fazer isso. Está bem? Esta é uma ferramenta que eu e a equipe aqui fizemos, e você pode clicar em Uyxo para inserir um nome Não importa o que seja. Está bem? Seu sobrenome, nome do amigo, nome do animal de estimação, nome do filho, nome da vovó, o que você quiser e, em seguida, um local Está bem? Então, eu moro em Limerick e vou clicar em Gerar meu projeto Tudo bem, e você gerará sua própria persona. Eles serão muito parecidos e a diferença será o produto, gerado aleatoriamente e o nome que você usa, mas todo o resto será estruturalmente Então, estamos todos projetando a mesma coisa, mas com um pouco de exclusividade Se você não gostar do que recebeu, não clique em tentar novamente. É vermelho por um motivo. Estou te avisando. Está bem? Então, eu estou fazendo Scott Wallets. Meu cliente é, Sam. E isso me fala um pouco sobre eles. O que podemos fazer é baixar como PNG. Então você o tem para poder voltar a ele, basta baixá-lo para sua máquina. Guarde-o em algum lugar seguro. Vamos usá-lo durante todo o curso e também no final, quando o combinarmos para criar mais uma peça de portfólio. Tudo bem, então é assim que os projetos de classe funcionam. Eu digo o que fazer e, às vezes, peço que você o envie para o site quando tivermos algo um pouco mais interessante para compartilhar, mas, por enquanto, salve seu resumo em algum lugar e lembre-se disso quando estivermos projetando este curso. Tudo bem É isso mesmo. Hora do próximo vídeo. 7. O que é wireframe de baixa fidelidade x alta fidelidade no Figma?: Tudo bem. Vamos falar sobre estrutura de arame versus alta fidelidade. Ooh. É bem fácil. Wireframes são wireframes, e alta fidelidade são Então, o que vamos fazer neste curso é criar o wireframe, primeiro testá-lo e, em seguida, desenvolver um pouco mais do recurso de design para essa alta Por isso, normalmente é chamado de quadro Y, algumas pessoas o chamam de low fi e hi fi ou wireframe e alta Meu conselho é não pular isso. O conselho é não pular a etapa de wireframing. Alguém vem até você com um projeto ou um resumo, você pode montar uma estrutura de arame e testá-la, como os botões funcionando e a navegação fazendo algumas coisas básicas em minutos. Você volta para seu cliente chefe de partes interessadas e diz: É isso que estamos tentando fazer? E eles podem dizer: Sim, você pode seguir em frente, em vez de passar anos analisando, rastreando escolhendo imagens e fazendo a coisa certa para elas usarem Não foi isso que eu quis dizer. É rápido, é sujo, é fácil. E você vai ter que fazer isso neste curso porque vamos construir isso primeiro. E isso nos dará muitas das características fundamentais do Figma antes de prosseguirmos e ficarmos bonitos Por que as molduras não precisam ter essa aparência. Não há uma regra real sobre o que eles podem fazer. Normalmente, as pessoas colocam uma linha nela para ver uma imagem, mas é. Vamos encontrar alguns exemplos no Figma. Estou em Figma. Vou acessar esse botão home aqui no topo. Vou abordar este que diz modelos e ferramentas. Eles continuam movendo esse botão, mas dê uma olhada, costumava ser chamado de comunidade. Vou digitar no canto superior direito aqui. Vou digitar em wireframe. Vamos dar uma olhada em alguns exemplos. Então você pode simplesmente pegar emprestado o kit de outra pessoa. Então, dê uma olhada neste . Clique nele uma vez. Entrar vai ver. Este aqui foi ainda mais antigo, pois eles retiraram o texto deste Você também pode fazer isso. O que você notará, porém, é que eles são monocromáticos Algumas pessoas usam uma cor, mas não mais do que uma. Escolha uma cor inofensiva ou use apenas preto e branco e versões em cinza e escolha uma fonte muito ofensiva Estamos procurando coisas chatas aqui, porque o que não queremos fazer, vamos dar uma olhada nessa boa também Está bem? É muito mais, digamos, completo. É um pouco mais sofisticado Novamente, não há regras reais. Você pode escolher um que tenha um pouco mais de design. O que você quer evitar é conversar com as partes interessadas do cliente e do cliente sobre: “Ah, isso não é Alfon Oh, essa é a imagem errada. Oh, nós não dizemos isso. Muito mais em nosso título. O que você está fazendo aqui é apenas testar a função. Quando eu clico neste botão, ele vai para aqui, e então isso vai para aqui, estou construindo todas as páginas certas? Sim. Incrível. Então, podemos ir para a alta fidelidade. Mantenha-o chato, mantenha-o funcional. Falaremos sobre o uso de modelos de outras pessoas mais tarde. Mas se você se deparou com isso, lembre-se da página inicial, dos modelos e Eu fiz uma pesquisa aqui e você pode abri-las. Vamos abrir esse aqui. E diz apenas aberto e Fig. O legal disso é que agora eu tenho esse arquivo. Está aberto em outra aba, eu posso voltar para casa aqui. Mas se eu for para os recentes, agora é só meu arquivo. Figma é uma grande comunidade onde as pessoas compartilham seus arquivos e você pode pegá-los emprestados, apropriar-se deles, roubá-los Obviamente, não queremos apenas duplicá-lo e distribuí-lo como nosso, mas se você gostar do estilo de alguns dos modelos de Okay, você pode acessá-los mas se você gostar do estilo de alguns dos modelos de Okay, você pode acessá-los e começar a pegá-los. Eles são todos selecionáveis. Você pode começar a trabalhar com eles. Mas isso está avançando um pouco na classe Vou fechar essa aba. Volto aos modelos e excluí a estrutura de arame daqui apenas para mostrar alta fidelidade. Não é tão chique. São sites realmente criados. Esse aqui eu poderia abrir e começar a trabalhar com ele. Este parece ser para um escritório de advocacia. Eles trabalharam muito. Talvez eu também esteja trabalhando para um contador ou advogado Eu gosto disso. Eu posso começar com isso. E comece a alterá-lo a partir de minhas próprias fontes, minhas próprias imagens, mas eu gosto da estrutura. Isso é alta fidelidade, pulando o estágio de wireframing Ruim. Tudo bem É isso aí, vamos entrar no curso e começar a fazer coisas. Tudo isso é tudo. Isso é enquadramento de fios versus infigma de alta fidelidade. Vamos para o próximo curso. Comece a fazer coisas, Dan. 8. Como criar nosso arquivo de design e apresentar frames no Figma: Lá. Neste vídeo, criaremos nosso primeiro arquivo de design e, em seguida, começaremos a adicionar páginas, chamadas de molduras. Faremos uma navegação básica e criaremos quatro caixas brancas de forma super empolgante Você pode vê-los na tela? De qualquer forma, esse será o layout do nosso celular para o nosso projeto. Vamos começar. Tudo bem, então eu abri o Figma. Eu tenho uma cópia nova aqui. Então, o que queremos fazer é que essa tela mude bastante. Toda vez que eu faço um curso, essa tela é diferente. Basicamente o mesmo. O que você está procurando é esse pequeno ícone de casa. Eles também o movem um pouco, mas deve estar no canto superior esquerdo. Em seguida, queremos criar o que é chamado de arquivo de design. Lembre-se de que este curso é sobre design Figma. Esse primeiro aqui, meu mouse está em câmera lenta. Tudo bem, espere aí. Tudo bem, meu mouse está de volta. Portanto, há um botão de design. Você pode clicar nisso. Mas na Figma, há cerca de dez maneiras de chegar a qualquer lugar Vou tentar oferecer a você a melhor maneira consistente ou a melhor maneira de atingir nosso nível. Se você descobrir outra maneira. Bom trabalho. Se você gosta mais desse jeito, faça desse jeito. Por exemplo, você pode clicar no arquivo de design, clicar no botão Mais depois clicar no arquivo de design. Você pode ir até Reese para saber quais são os rascunhos e clicar em Mais e obter um arquivo de design Há várias maneiras de obter um arquivo de design. Tudo bem, então vamos criar um. Bam. Basicamente, ele abre em uma nova guia aqui, veja, Página inicial do arquivo sem título que abrimos, página inicial do arquivo sem título Você pode trabalhar com modelos para começar. Nós não vamos. Você pode passar o mouse sobre eles e isso apenas os mostra. Isso está apenas começando. Vamos utilizar modelos mais tarde, quando melhorarmos, mas precisamos começar do zero. Vamos fechar tudo isso e teremos essa coisa chata. Tudo bem, vamos criar uma página. Você faz isso usando este botão aqui embaixo . É chamado de quadros. As molduras são como páginas ou mais do Adobe Land, clique neste pequeno ícone na parte inferior aqui embaixo , clique e desenhe algo. Agora você tem uma página. pequeno cursor usa como padrão a ferramenta de seleção depois de desenhada ; portanto, se você quiser outra página, volte para a ferramenta de moldura e desenhe Volta para a ferramenta de seleção, que na verdade é muito útil. Agora, queremos um tamanho específico porque queremos o tamanho do telefone o qual vamos fazer nossa maquete O que podemos fazer é excluí-los clicando no nome na parte superior. Veja se eu clicar no nome na parte superior, destacar tudo e clicar em Excluir no meu teclado. Eu quero me livrar desse cara também. O que vou fazer é usar minha ferramenta de moldura. O que você notará é que, neste lado direito, você precisa saber que o design é o que deveria ser. Esse quadro pode ter vários tamanhos predefinidos. Seja telefone, tablet, desktop, vamos usar o telefone e usar o tamanho mais comum da época. O iPhone 16 é, eu não sei. Eles são praticamente iguais e não se espera que você projete para todos os diferentes tamanhos de telefone. Pode-se esperar que você faça telefone, tablet e desktop, se estiver fazendo, digamos, um site. Se for um aplicativo, obviamente você só vai fazer um tamanho, o telefone. Vamos começar com o iPhone 16. Se você estiver assistindo isso no futuro e houver um iPhone 500, basta pesquisar no Google qual é o tamanho comum de telefone mais usado. Google lhe dirá o que a maior parte do mundo tem ou você pode descobrir o que seu chefe, cliente interessado, tem como telefone, porque eles o testarão e você quer impressioná-los ao máximo, então você quer usar o site deles Vou usar o iPhone 16. Se estamos fazendo isso para mídias sociais ou algo assim, você precisa que tenha um tamanho específico. Você pode ver se eu tenho o nome selecionado na parte superior, então, se selecionado aqui no lado direito, você pode digitar em qualquer tamanho. Se precisar ser de 500 por 800, você pode fazer isso. Eu não quero isso. Então, vou usar o Undo em um Mac, é Command Z, Control Z em um PC para voltar ao tamanho normal do iPhone Também está em Editar em Desfazer, ou se você estiver na versão para navegador, você terá uma pequena barra na parte superior aqui onde você pode acessar Editar Desfazer como. Está pronto. Eu disse que não vamos usar muitos atalhos, mas existem alguns inevitáveis A outra forma é super longa. Resumindo, o atalho é eu quero aumentar e diminuir o zoom, manter pressionada a tecla de comando e pressionar mais no meu teclado, e o sinal de menos aparece novamente Mantenha pressionado o comando em um Mac, controle em um PC e aumente e diminua o zoom. Você pode usar isso aqui. Há uma pequena lista manual, mas você vai ficar louco tentando usar essa coisa aqui. Diminua o zoom. Volte para cima. Diminua o zoom. Comando ou Controle mais e menos. Tudo bem. Então, temos esse documento, chamado iPhone 6-1. Isso não é divertido. Podemos renomeá-lo apenas clicando duas vezes aqui , chamando essa página inicial e pressionando Enter As pessoas preferem ir aqui do lado esquerdo aqui. Verifique se você está arquivado, não ativos. Faremos isso mais tarde. Vá para Arquivo e você verá aqui embaixo de suas camadas Você também pode clicar duas vezes aqui . Depende de você. Eu quero dois desses. voltar para minha ferramenta de moldura e dizer: quero outro iPhone 16 e vou jogá-lo ao lado dele Vamos chamar isso de. O que é esse? Funcionalidades do O. Outra maneira de fazer isso é selecionar os recursos da palavra e copiar e colar. Command C, Command V, em um Mac, Control C, Control V, em um PC, o padrão de copiar e colar. Não, obrigada. Outro atalho que eu quero te mostrar, mantenha pressionada a barra de espaço, somos apenas um vídeo e estamos fazendo coisas e já estamos fazendo o atalho, Stan, as Você mantém pressionada a tecla da barra de espaço e verá cursor se transformar em uma mão, você clica em segurar e a arrasta Mantenha a barra de espaço pressionada e clique em Manter arrastado. Agora temos esses três. Tudo bem. Agora, dependendo do trabalho, pode-se esperar que você faça tanto um telefone quanto um tablet e uma versão para desktop. O que você pode fazer é diminuir o zoom um pouco. Comando menos ou Controle menos em um PC. Vamos clicar nos recursos, copiar e colar. O que vou fazer é clicar em segurar e arrastar esses caras. Esses quadros, eu posso arrastá-los e dizer, eu quero que isso seja feito aqui. Você pode arrastar o nome? Se você arrastar as bordas, poderá alterar manualmente o tamanho da moldura. Eu vou desfazer isso E aqui, eu posso dizer este quadro aqui, eu quero que você não seja apenas um quadro, mas eu quero que você não seja o Android 16, eu quero que você seja o que vamos fazer? Eu rezo P 11. Está bem? Você pode ver que a moldura ficou muito maior. Barra de espaço, mantenha-a pressionada, clique e arraste. Com a opção selecionada, você pode ver essa rotação aqui. Você pode decidir se é paisagem ou retrato. Basta clicar duas vezes nele. Chame isso de página inicial. OK. A mesma coisa novamente, copie e cole o jogo. Podemos inserir recursos. Eu esqueci desse, esse se chama checkout. Eu tenho que copiar e colar. Clique com o botão direito Essa será chamada de confirmação. Você pode fazer isso para celular, tablet e o mesmo para desktop. Vamos pegar esses dois. Eu apenas cliquei e arrastei uma caixa ao redor dos dois e fui copiar e colar Eu acho que eles acabaram em cima um do outro. Eles fizeram isso. Então, vamos lá embaixo. Este aqui vai ser um quadro, eu quero que seja do tamanho de um desktop. O desktop é que você pode ver, há um monte de coisas. Você pode fazer o Apple Watch. Você pode fazer alguns tamanhos baseados em papel. Postagens no Twitter, estão todas aqui. Estou procurando scroll scroll scroll. Eu já superei isso. É um desktop. Esse é um tamanho de desktop muito comum e o que a maioria das pessoas usa para criar um site, embora existam muitos tamanhos diferentes on-line. Eu posso arrastar isso até lá. Você entendeu a ideia. O que eu costumo fazer é projetar algo primeiro. Vamos projetar primeiro para dispositivos móveis para esse wireframe, depois projetaremos primeiro para desktop quando estivermos trabalhando em nosso site Essa é uma conversa para ter com seu cliente. Talvez eles queiram ver os dois. Mas digamos que traga seu próprio laptop.com. Meu site. Somos uma empresa que prioriza os desktops porque a maioria das pessoas assiste aos vídeos e interage com o software Eles estão no computador. Primeiro projetamos para isso e depois descobrimos como ele se encaixa no celular. Muitos sites agora priorizarão os dispositivos móveis. Estamos projetando primeiro para dispositivos móveis e depois criando uma versão para desktop. Você pode projetá-los simultaneamente. Freqüentemente, o que eu faço é projetar um deles, o mais importante , e depois calcular os outros tamanhos intermediários. O que vou fazer é diminuir o zoom o suficiente para que eu possa ver tudo. Lembre-se, comande menos ou Controle menos em um PC. Vou arrastar uma caixa ao redor de todos esses caras porque vou trabalhar primeiro no celular. Vou clicar em Excluir, para que eles desapareçam. Se você se perder, às vezes você pode ampliar acidentalmente ou apertar a roda de rolagem e ampliar, ampliar e ampliar e pensar: Onde diabos estou Ok, você poderia usar essas pequenas barras de esfoliação aqui. Olá. Traga esses garotinhos aqui e tente descobrir uma saída. Muitas vezes, é mais fácil ir até aqui e dizer: você pode ampliar para caber? Vou colocar tudo o que você tem no meio da tela. Então, aqui está o nome do nosso documento. Por exemplo, alguns softwares solicitarão que você nomeie, você sabe, o arquivo assim que você o criar. Números como esses. Então você acaba com 1 milhão de arquivos sem título. Não, isso é comum. Mas vamos ser super incríveis e vamos renomear nosso arquivo Então, eu cliquei duas vezes aqui, vou dar um nome a ele Vamos ligar para Scott e você chama seu nome, ok? Então você não está fazendo Scott eCom. Você está fazendo, eu não sei, Sandy ou Jim, qualquer que seja o nome da sua empresa. E este é nosso site de eCom, e vamos usar o V One porque não somos cavernas. Não seja essa pessoa. Final. Final. Um, novo. Você está rindo porque você faz isso. Está bem? Vamos. Realmente não importa se é V um ou A, B, C, alguma coisa. Então, quando precisamos atualizar arquivos antigos, sim, é mais fácil encontrá-los. Existe uma maneira sofisticada de criar versões dentro do Figma, mas isso vai funcionar para nós Você também pode clicar duas vezes aqui. OK. E você pode fechá-lo acessando o arquivo fechar ou simplesmente pressionando essa pequena cruz no canto e ele desaparecerá Você está de volta para sua casa. E o que você descobrirá é que o padrão é recente, na maioria das vezes Se não estiver, vá para Recence e você verá lá que ele está lá. Olha, vamos. Então, vamos clicar nele e abri-lo em uma nova guia. Vamos voltar para casa. E o que você descobrirá é que, quando tiver muitos arquivos chamados sem título, você pode clicar com o botão direito do mouse aqui no Mac. Se não tiver um clique com o botão direito do mouse, você pode pressionar Control no teclado e clicar em clicar PCP, você terá um clique com o botão direito. Eu também faço no meu Mac. Mas você pode clicar com o botão direito do mouse e renomeá-los aqui. Realmente não importa onde você faz isso. E essas coisas aqui, são dores na bunda. Eu só vou selecioná-los. Go simplesmente arrastou uma caixa ao redor deles e excluiu Ok, isso é como se acostumar com arquivos figma. Eu só acho que eles fazem minha vida parecer confusa. Eu fico tipo, eu fiz esses? De onde eles vêm? Você pode deixá-los aqui ou clicar com o botão direito e ir para a lixeira Sim. Pegue esses dois também e exclua-os apenas para arrumar as coisas. Tudo bem, vamos voltar a isso, clicando duas vezes aqui ou nas guias já abertas E é isso. Desenhamos quatro caixas brancas. Bom trabalho. Todos nós pensamos que Figma seria mais empolgante Mas aprendemos quais molduras são como páginas e descobrimos o que é um arquivo de design figma É o tipo de coisa que abriga tudo. Tudo bem, vamos fazer mais algumas coisas no próximo vídeo. Te vejo lá. 9. Os conceitos básicos do tipo e fontes no Figma: Olá. Neste vídeo, abordaremos alguns dos conceitos básicos do tipo Não vamos analisar todas as configurações do menu de tipos, mas apenas o básico para começar Você sabe como alterar fontes e tamanhos de fontes, certo? Vou apenas te mostrar as peculiaridades do Figma. Tudo bem, vamos adicionar algum tipo à nossa página. Tudo bem, então vamos iniciar a barra de espaço para mover o comando ou o Control plus para ampliar Barra de espaço novamente. Vou pegar a ferramenta de digitação. Está aqui embaixo, clique sobre isso. Você notará que as ferramentas realmente comuns , se você passar o mouse sobre elas, ver que têm C ao lado, significa que posso pular para a ferramenta de comentários com o título C, T para a ferramenta de texto, F para a ferramenta de moldura Então, os mais comuns simplesmente passe o mouse sobre eles e você verá que ele exibirá o atalho Então, queremos T para a ferramenta de texto. Existem dois tipos de caixas. Há um em que você clica uma vez e começa a digitar. E essa vai continuar para sempre. Está bem? Então você clica uma vez obtém uma caixa de texto, boa para cabeçalhos ou botões, apenas pequenas partes de textos, e a caixa de texto continua funcionando É este aqui, é chamado de caixa automática com. Eu conhecia esse nome. O outro tipo de caixa de texto é clicar em segundo plano e, em seguida, ir para minha tecla T. Obviamente, se você tem o cursor piscando aqui e pressiona o atalho T, você só obtém Ok, então vou clicar em segundo plano, pressionar minha tecla T, clicar em segurar e arrastar uma caixa. Isso é chamado de caixa de tamanho fixo. Eu quero que tenha exatamente essa largura. A diferença é que quando eu começo a digitar, você pode ver que ela quebra no final da linha Melhor para texto corporal, qualquer coisa que precise de uma quebra de linha. Você pode convertê-los depois. Eu posso clicar aqui e dizer, na verdade, você sabe um tamanho fixo, e eu posso entender o ponto. Vou clicar em segundo plano. Vamos percorrer todo o caminho e clicar novamente. Se eu clicar nela uma vez, posso pegar a borda aqui, e agora ela tem uma largura fixa. O mesmo com este aqui. Eu não selecionei o texto. Afinal, o que isso funciona? Faz. Realmente não importa como você o selecionou. Quero que seja uma largura automática, mais parecida com um título, um botão ou algum tipo de pequena parte do texto. Você pode convertê-los depois. Abordaremos a altura automática mais tarde na aula. Essas são nossas duas caixas de texto. Vou desfazer para me livrar deles. Então, em um Max, Command Z em um PC, é Control Z ou na minha versão para desktop, é Edit Undo Se você estiver usando a versão para navegador, você terá outra edição. Estará logo abaixo daqui. Você pode ir para Editar, desfazer. A mesma coisa. Então, vou desfazer algumas vezes dt, dt, tantas desfazer Vamos pegar o Tiki e colocar nosso logotipo para a marca. Agora, se você tem um logotipo para a empresa para a qual trabalha e ele existe, você pode usar o logotipo. Mas como estamos, ao mesmo tempo, desenvolvendo uma marca para esse aplicativo, vamos usar apenas textos simples. Ainda não vamos entrar no design de logotipos. Então o meu vai se chamar. Eu vou usar o Caps. Eu vou escolher Scott ou usar Caps. Ok, vamos manter isso claro para movê-lo. Vou clicar em segundo plano. Use minha ferramenta de seleção, eu ia movê-la para cá. Em seguida, queremos nossa mensagem de marketing aqui. Vou pegar uma ferramenta de digitação, clicar e arrastar, e lembro que clicar e arrastar nos dá uma caixa de largura fixa Vamos apenas digitar uma mensagem de marketing. A mensagem de marketing vai aqui. Eu não vou te aborrecer com todas as fontes. Você sabe como alterar as fontes. Mas o truque, vamos mudar o tamanho da fonte, algo bom e grande. Eu quero que ele se quebre em duas linhas para que possamos ver a altura automática. Por padrão, ele está tentando fazer isso automaticamente. Você pode digitar alguma coisa. É 24, é muito comum adicionar mais oito ou mais quatro. Vamos lá 28. Genial, Dan. Vamos. O que é 832. O que você pode fazer é ver esses pequenos ícones aqui. Eu acabo fazendo muito isso neste curso. Eu vou te mostrar agora, veja se você mouse sobre esse ícone, esse ícone Você pode clicar em segurar e arrastá-lo. Se você gosta mais de olhar para ela, pensando: esse é o tamanho certo? Talvez algum espaçamento entre letras. Em vez de tentar digitar e fazer coisas matemáticas. Você pode arrastar um desses ícones. Aí está. De volta para 32. Então, em termos de fontes, quando você está fazendo um wireframe, quando está usando alta fidelidade, é claro, passe muito tempo Ao fazer uma estrutura de arame, é melhor deixá-la como uma fonte super chata. Algo que não vai ofender ninguém, porque o que você quer fazer é fazer um teste com alguém, especialmente com as partes interessadas, especialmente com as partes interessadas quando elas podem ter uma opinião sobre a fonte e não é que você está fazendo no primeiro teste Você está construindo uma maquete para testar a mecânica dessa coisa. Eles podem clicar nos botões? Eles chegam aonde precisam ir? Bem, você não quer voltar e dizer: Ei, eu não gosto dessa fonte. Está bem? Portanto, opte por fontes que sejam coisas simples que tenham, sei lá, caracteres que não tenham caracteres, como Roboto Desculpe, Roboto. Ou o padrão que vem. Você sabe, o Inter é o padrão Figma. Então, as pessoas usam muito isso. Roboto é bom Sauce envia, qualquer fonte que você quiser, desde que seja, eu não sei. Fontes chatas. Além disso, como Roboto, eu gosto porque é chato Desculpe, Roboto. Mas tem todos esses outros pesos aqui. Eu tenho negrito e itálico e todo tipo de outras coisas boas para acompanhar Portanto, mantenha suas fontes simples. A outra coisa é que, ao escolher fontes, é melhor fazer isso no dispositivo real Mais tarde, mostrarei como pré-visualizar em seu telefone. Quando estou trabalhando no meu computador, acabo passando anos brincando com e rastreamento entre letras e espaçamento entre linhas. É muito grande. Então, o que você pode fazer como truque é diminuir o zoom até que o telefone pareça do tamanho certo Literalmente, o que estou fazendo agora é pegar meu telefone e dizer “ É um pouco pequeno, 100 é muito grande, então talvez eu possa digitar aqui Talvez 75 seja bom. Segurando o telefone, ainda é muito grande. Você será capaz de descobrir o que está no seu telefone para ver como isso é pequeno agora? Você fica tipo, ok, isso é muito pequeno. Mas se eu segurar meu telefone, é do tamanho certo para o telefone. Tudo bem, então eu vou me aprofundar um pouco mais nisso. O outro truque com qualquer um desses campos aqui é que eu tenho 12. Esses números são muito bons para pular entre as coisas, mas o que você pode fazer é clicar em 12 e usar a seta para cima C só sobe em incrementos de um. Se você segurar a tecla shift e pressionar para cima , haverá incrementos de dez Então, estamos em 38 , sobe para 48. Mas se eu usar minha chave ra, basta clicar nela Isso funciona. Para cima e para baixo. Então eu acho que isso está aí, parece bom. Este aqui agora precisa ser maior, clique aqui, estoure, abra o botão de comando, suba. Você pode ver que, como eu tenho uma altura de linha fixa, 32, e meu tamanho de fonte é 53, está ficando um pouco estranho Se você precisar voltar para uma altura de linha automática, basta excluir o que está lá e ela voltará para Automático. Você pode ver aqui que está saindo da parte inferior da minha caixa de texto Realmente não faz diferença aqui, mas posso arrastar um pouco mais para lá. A outra razão é que eu vou para o alinhamento. Eu não vou passar por tudo isso. Você sabe como usar o tipo. O que eu quero mencionar é que, muitas vezes, quando você está lidando com, digamos, você vê como a mensagem de marketing é enviada aqui, em vez da mensagem de marketing real. Especialmente quando você está em um estágio realmente novo do aplicativo, eu gosto de adicionar coisas realmente genéricas, como essas fontes genéricas chatas com títulos não ofensivos Eles sabem para onde a mensagem de marketing vai entrar, mas se eu começar a usar, sei lá , minha própria criatividade para adicionar mensagens de marketing aqui nesta fase inicial de testes, alguém voltará e dirá: ei, não nos sentamos assim. Isso tem que ir para redação. Não, não, não, basta clicar no botão. Eu quero ver se funciona. Freqüentemente, retiro qualquer coisa que cause alguma ofensa ou cause um feedback errado A mensagem de marketing enviada aqui está bem. Precisamos de algumas pequenas coisas antes de prosseguirmos e outras coisas para destacar. Se eu estiver arrastando isso usando meu ponteiro. Se eu clicar em segurar e arrastar, você consegue ver que está pulando? É muito útil. Você pode ver o forro no meio da minha página. Eu posso arrastá-lo para baixo. Esse é o meio da página. Oh, bom. Vou colocar isso aí. Vou copiar e colar. Essa é outra coisa interessante sobre Figma e zoom in Copie e cole, e você fica tipo, o que aconteceu? Na verdade, estava colado na parte superior. Por padrão, ele colocará tudo o que você copiou, logo por cima Então parece que você não o copiou. Mas agora você sabe disso, tudo bem. Ok, eu copiei e colei. É aqui que minhas fotos de produtos serão tiradas. Foto do produto. Vou fazer o menor porque é mais do que um, não sei por quê. Vai ser menor. A outra coisa a fazer é se você quiser copiar e colar, geralmente o que eu faço é manter pressionada a tecla de opção no meu Okon em um PC. Eu o selecionei. Estou na minha ferramenta móvel, continue chamando-a de ferramenta de ponteiro Na ferramenta de movimentação, mantenha pressionada a tecla de opção em um Okon em um PC. Veja as pequenas setas duplas que estão aparecendo. As setas duplas significam quando eu a arrasto. Eu tenho o mouse pressionado o tempo todo. Eu tenho essa opção ou Olkey down. Vou fazer uma cópia. O mesmo aqui. Eu quero outro. Lá vamos nós. Há dois deles. Eu posso usar os dois, e tudo o que vou fazer provavelmente é torná-los ousados. E torne-os um pouco maiores. Agora, a tipografia aqui tem o básico. Se você pensa, Oh, onde está o resto? Aí está o resto. Há algumas opções aqui, digite as configurações e você obtém todas as coisas extras. Abordaremos diferentes partes disso neste curso. Mas aqui estão as outras coisas que você pode estar procurando. Vou me certificar de que está perfumado. Vou me certificar de que está tudo em maiúsculas com maiúsculas. Aí está lá. Vou clicar duas vezes neste e dizer, este é meu B agora, agora, e este será meu saiba mais. Saiba mais Tudo bem, acho que é isso. Olha o que fizemos. Colocamos texto na página. Tudo bem, vai ser isso. Texto antigo e chato. Vamos fazer caixas antigas chatas no próximo vídeo 10. Retângulos, círculos, botões e cantos arredondados no Figma: De volta, adicionamos retângulos ao vídeo. Eu vou te mostrar como fazer retângulos e círculos. Vamos fazer cantos arredondados. É muito empolgante. Eu prometo. Vamos começar. Tudo bem, vamos começar pegando a ferramenta retangular. Aqui embaixo, é essa coisa. É um retângulo. Há um monte de outras coisas. Se houver uma pequena seta ao lado dela. Ok, existem vários outros tipos de ferramentas de desenho úteis juntas, mas vamos começar com a ferramenta retangular E o que eu vou fazer é querer uma espécie de imagem de espaço reservado É um retângulo grande, como você viu no início. Então, vou clicar em segurar e arrastar para fora e fica cinza. Uau. Mas também cobriu meu texto. Ainda está lá. Olha, olá, você está aí embaixo. Então, vamos dar uma olhada em algo chamado camadas de camadas. Você sabe o que são camadas. Como eles funcionam no Figma Há algumas maneiras de chegar até ele. Então, vou mostrar algumas maneiras, apenas para mostrar todas as maneiras diferentes do Figma, não para enganar você, mas é bom conhecer as principais formas de encontrar E você encontrará o que funciona melhor para você em seu nível. É fácil clicar com o botão direito do mouse e dizer, não selecionar a camada. Eu quero mandá-lo de volta. Eu vou dizer envie para a parte de trás das camadas, e está lá atrás agora. Eu vou desfazer isso. A outra maneira é aqui neste painel esquerdo. Você deve ver o arquivo. Você pode estar na primeira página e devemos ver camadas. A única outra coisa em que você pode estar são ativos. Vá para arquivar suas camadas, essa é uma página chamada confirmação, O chamada Checkout, uma se chama recursos, e estamos nesta página inicial Dentro daqui estão todos os bits e você pode ver que é uma ordem de camadas, como um software de design mais tradicional. O retângulo está acima de onde está a foto do produto. Preciso clicar em segurar e arrastar o retângulo, ver se há linhas lá. Dê uma chance a isso. Desfaça isso se der terrivelmente errado. Você pode arrastar a foto do produto, clicar em Manter, segurar, segurar e arrastá-la acima do retângulo Isso também funciona. Quero mostrar que estou na versão para desktop, então tenho o objeto de visualização File Edit na parte superior aqui. Se você estiver na versão para navegador, você diria: “Eu não tenho isso”. O seu está apenas escondido aqui. Arquive, edite objetos de visualização. S? Eles são exatamente o mesmo objeto lá, objeto ali. Isso não importa. Muitas vezes, nesta aula, vou até o topo aqui para encontrar coisas e você fica tipo, eu não tenho. Está logo abaixo desse F aqui para Figma. Você verá que eu posso ir para Editar, posso ir para Objeto e posso descer para trazer para frente, trazer para frente. Na verdade, não posso porque é uma nota baixa, é porque eu não a selecionei, vou desfazê-la, então está no topo Então, vou clicar no retângulo. Então eu posso ir para Editar. Eu estava em Objeto. Você pode enviar backwood, que é simplesmente descer um nível para que fique por trás da mensagem de marketing Eu quero mandar para trás completamente na parte de trás. Novamente, está exatamente no mesmo lugar, objeto U e há envio para trás. Está bem? Você também disse que há um atalho De muitas maneiras. Objeto, eu uso esse um pouco. Depende. Se você está pronto para usar atalhos, este aqui, o colchete está apenas no seu Você o verá normalmente próximo ao seu Peki e o trará para a frente Eu posso usar o colchete para frente, colchete para trás, para frente, para trás, para frente, para trás Não importa qual deles você usa. Mas neste vídeo, quero mostrar todas as maneiras diferentes, porque quero dar a sensação de que existem várias maneiras de fazer isso e não importa qual caminho você escolha. Mas é isso. Vou seguir um caminho mais fácil de agora em diante. Tudo bem, vamos ampliar aqui, spa espacial, clicar e arrastar, Command plus para ampliar. Control plus em um PC. Vamos pegar nosso arco para a ferramenta retangular, arrastar uma caixa e vou usar meu colchete porque gostamos de usar nossos atalhos, mas use Eu tenho um botão B agora. Agora, outro truque no figma é que, se você quiser selecionar duas coisas, eu posso clicar e arrastar sobre essas duas ou posso clicar em uma, segurar a tecla Shift no meu teclado e clicar na outra, e ambas estão selecionadas Agora eu quero outro retângulo. Em vez de desenhá-lo, vou clicar nele uma vez e usar meu copiar/colar. O que acaba por colocá-lo por cima, mas não se preocupe, nós sabemos, e pronto. Eu tenho falado sobre manter o design fora desse wireframe Os quadros Wi foram feitos para serem simplesmente genéricos. Mas eu não consigo me culpar por algumas coisas, como cantos arredondados. Oh, eu realmente gosto de cantos arredondados. Se você clicar nesse retângulo aqui e aumentar o zoom o suficiente, verá os pequenos pontos no canto Você pode clicar em segurar e arrastá-los. Se você não consegue vê-los, ou seja, se eu diminuir o zoom e selecioná-lo e você tiver o cursor piscando acima dele Você pode ver que não está lá? Ele só mostra você em determinados níveis de visão. Você tem que estar bem perto para ver isso. Se você quiser fazê-las manualmente, selecione-as. Aqui, na aparência, você tem esse chamado raio de canto, e eu posso digitar oito Este, eu posso arrastá-lo e você pode ver que ele diz que é oito, depende de você. Segure a barra de espaço, mova para cima. Clique neste também, e eu vou tornar isso consistente digitando oito também Você pode decidir que, na verdade, no raio do canto, você não quer que eles sejam oito em todos os cantos, você quer que um deles seja diferente Veja esta pequena opção aqui, expande os cantos individuais No momento, eles estão todos com oito, você pode decidir isso no canto inferior direito. Você vê que é no canto superior esquerdo, no canto superior direito. Você tem no canto inferior direito, eu posso fazer esse 130. Significa apenas que, se eu diminuir o zoom, um deles será diferente. Você também pode fazer isso manualmente. Você pode manter pressionada a tecla de opção em uma tecla Mac em um PC e também pode fazê-las individualmente. Você pode ver isso? Apenas um deles se move. Tudo bem, vou voltar à consistência, cantos mistos. Vou me livrar do mixado e simplesmente excluí-lo, digitar oito na parte superior e pressionar Enter. Agora, eles são todos iguais. Tudo bem, estamos desenhando retângulos com cantos arredondados. Vamos desenhar um círculo. Aqui embaixo está nosso círculo. Era elipse, que é um atalho para O. Lisa parece Vou apertar a tecla O no meu teclado e vou arrastar um círculo. Outra coisa quando você está desenhando círculos ou quadrados ou qualquer coisa, se você quiser que não seja oval, ok, ok Aqui você segura. Que chave é essa? Você sabe qual é a chave. Turno. Mantenha pressionada a tecla Shift enquanto arrasta e você bloqueará a altura e a largura Então, sobre algo desse tipo de tamanho. Você pode ver os tamanhos aqui. O meu está em 32 por 32, mais ou menos lá. Isso realmente não importa. Vou ampliar a barra de espaço e pegar a ferramenta de digitação porque quero aquele botão de adição. Então eu vou pegar o Tiki, vou clicar uma vez e vou digitar um sinal de mais no meu teclado Fonte, vou usar negrito provisório, tudo bem. Volte para minha ferramenta de seleção. Agora, se você quiser mover isso, você vai ficar tipo, A, eu quero colocar isso acima deste botão. Sim. Às vezes, você só precisa clicar em segundo plano e arrastá-lo. Em termos de tamanho da fonte, vamos usar nosso doce shortku, clique aqui e seta para cima F obtenha o tamanho certo. Ele pula ao redor Está tentando se fixar em pixels. Tudo bem. Então, do tamanho certo. Novamente, lembre-se de que estamos em 400%. 60 meio que funcionou para mim. Então agora eu fico tipo, tudo bem, isso parece bom. O outro truque que quero mostrar é que, quando você está tentando alinhar algo , pode ser bem complicado Eu vou te mostrar mais exatamente mais tarde. Mas arrastando-a, ela tenta se romper. Você pode ver que é como, Oh, eu quero estar aqui. Você quer dizer aqui? Você fica tipo, não, não, não, bem no meio. Então, eu quero dar uma olhada Então, o que você faz é selecioná-lo, vou clicar em segundo plano, clicar de uma vez e posso usar minha tecla de seta, as teclas, no meu teclado, apenas para movê-lo para onde eu quiser. Isso é bom. Oh, o que esse botão faz? Você não perguntou. Se você se aproximar o suficiente do seu círculo, verá esse ponto e ficará tipo, o que isso faz? Você está pronto? Não, não, não, não, não, não. Isso não é totalmente útil, mas me deixa feliz. De qualquer forma, imagino gráficos de barras e gráficos circulares e. Tudo bem. Vamos diminuir o zoom. Vou usar o atalho para ir. Zoom to fit é algo que vou tentar colocar na sua cabeça à medida que avançamos neste curso É Comando zero ou Controle zero em um PC. Não, é mudar para zero. Não, não é nenhum desses. Comando zero? Oh, diabos. Meu cérebro sumiu. Amplie para caber. Isso é o que eu quero. Está bem? Então, o que acabei de te mostrar, o Comando zero é ir para 100%. Isso é bom. Esse aqui eu gosto muito. Amplie para caber. Ok, e o primeiro turno. Eu sei disso. Ok, mantenha pressionada a tecla Shift Mac e no PC e aperte uma tecla, e tudo caberá na sua janela. Lá vamos nós. Nós fazemos alguns retângulos. Olhe para nós. Tudo bem, vou selecionar os dois e simplesmente movê-los para cá Usaremos isso um pouco mais tarde. Vai ficar no meio aqui embaixo. E então vamos para o próximo vídeo. Vamos fazer isso. 11. Como usar cores no Figma: Oi, aí. Neste vídeo, vamos passar de isso para isso. Cinza até essa cor. Azul-petróleo, verde, azul. De qualquer forma, vamos dar uma olhada no básico da cor dentro do Figma. Não pule em frente Há algumas coisas úteis e interessantes aqui, além de um pequeno atalho genuíno no final Tudo bem. Vamos começar. Tudo bem, a cor é fácil. Vamos clicar em nosso retângulo cinza. É a cor padrão para Figma e aqui em Phil, você pode clicar neste pequeno quadrado colorido aqui e obter esse seletor de cores Você pode ter usado o seletor de cores antes. Se você não tiver um pontinho aqui está a cor que você selecionou. Você pode clicar e arrastá-la para escolher qualquer cor, desde que seja vermelha. Vou movê-lo para o topo aqui e o que você pode fazer é pegar o controle deslizante de matiz e arrastá-lo . Você pode ver o que está fazendo com a cor? Digamos que você queira que seja azul, você pode decidir que eu quero que seja mais azul e eu quero que seja um azul mais escuro, ou eu quero que seja um azul menos saturado A saturação é da esquerda para a direita, cima e para baixo como brilho Você pode escolher algo aqui que funcione para você. Preto e branco, é estranho. Você pode usá-los na parte inferior aqui. Essas são algumas cores padrão. Ou o que as pessoas tendem a fazer é clicar, segurar e arrastar, arrastar e arrastar até o canto. Ainda estou com o mouse pressionado. Se você arrastá-lo até o canto, colocá-lo em branco completo e o mesmo com o preto se você arrastá-lo para baixo dessa maneira, ele o arrastará totalmente Depende de você. É um controle deslizante enorme Este é o slide de transparência. Vou embalar essa cor aqui. Vou arrastar a transparência para baixo, para que fique um pouco mais transparente. Você realmente não pode dizer agora porque está vendo até o branco no fundo. Vamos movê-lo acima de tudo isso e movê-lo para a frente no painel de camadas, da maneira que você quiser. Vou usar o colchete ao lado do piki. Você pode ver que está congelando e olhando através dela. Às vezes você não precisa ter isso aberto. Eu posso ter isso selecionado. Se eu quiser o backup da transparência, você pode ver que está em 47% Foi para lá que eu o arrastei na última janela. Eu posso digitar 100 e entrar aqui. Vou colocá-lo na parte de trás novamente usando o primeiro colchete, vou colocá-lo de volta onde deveria estar. Vou escolher uma cor. É muito comum usar azul ou azul claro na parte superior aqui. Vou usar um verde-azulado sem um bom motivo. O truque aqui é usar apenas uma cor. Tente não exagerar na escolha de cores para tudo, especialmente neste iframe Lembre-se de que se trata de testar a mecânica, não de estilizá-la de verdade Mas você quer Ok, então escolha uma cor que você goste. Agora, o padrão aqui embaixo é esse número hexadecimal, então é um código de seis dígitos que representa a cor na web Você pode alterá-lo aqui para RGB. Se você tem um documento de especificação do manual corporativo, precisa usar a cor oficial da empresa, pode digitá-lo aqui É RGBA, que é vermelho, verde, azul e Alpha é a transparência Você pode arrastar esse controle deslizante ou fazê-lo aqui embaixo. Isso não importa. Outros que são úteis são CSS. Se você é mais um desenvolvedor e conhece as cores CSS, pode digitá-las, ou eu não uso muito, luminante de saturação de matiz Eu uso saturação de matiz e brilho. Acho que isso é muito útil, se eu quiser deixar isso mais escuro, tenho que arrastá-lo até aqui, mas você acaba dizendo: “ Uau, zagueando para baixo”, você fica tipo, “Não, direto para baixo Você pode clicar no brilho. O brilho está aumentando e diminuindo. Então, o que você pode fazer é entrar aqui e ir, viu minha flecha? Estou apenas usando. Você não pode ver meus dedos. Você pode simplesmente clicar aqui, como fizemos com muitos outros, e arrastá-lo para cima. Mantenha a tecla Shift e ela vai piar em pedaços grandes. A saturação da cor é da esquerda para a direita. Então, em vez de mexer dessa maneira, você pode simplesmente clicar neste aqui e ir para cima e para baixo Você vê que vai da esquerda para a direita. O mesmo com a tonalidade. Queria ser um pouco mais azul. Vai subir, subir, subir, p, p, p, p, p, p. Aí está. É muito comum, porém, deixá-la em hexadecimal. Deixe ligado dez. A outra coisa é que você vai acabar com um monte de cores aqui embaixo. É como as cores que você já usou. Aí está aquele cinza. Se você quiser voltar, aí está. Há aquele azul que acabamos de misturar, então podemos dizer que você ou quer que seja a cor do azul que desapareceu agora, porque não é usado em nenhum lugar desta página. Boa sorte, Dan. Desfaça isso, para que ele volte. Eu posso usá-lo agora e dizer que você é dessa cor. Eu não gosto disso. Você espera lá. Essa cor eu vou para nós. A outra coisa que você pode fazer é usar o Eyedrop atol. Você pode clicar aqui e dizer: quero que o conta-gotas A vantagem da ferramenta conta-gotas que você pode entrar em alguns detalhes Você pode ver? Ao lado do ícone, há uma pequena versão ampliada que você vê uma pequena versão ampliada que Digamos que você queira apenas essa cor cinza estranha na borda desse tipo Você só pode vê-lo quando realmente aumenta o zoom. Não, você nem consegue ver quando aumenta o zoom. Está lá. Ótima escolha de cores de imagens vou te mostrar entanto, vou te mostrar o atalho para clicar nele Eu faço isso com muita frequência. Vou segurar a tecla Shift para clicar em ambas. Eu selecionei os dois e faço isso para desfazer a jogada. Mantenha pressionada a tecla Shift e clique em ambas, use meu atalho Eyedropol, que é I em seu teclado, a letra I, não Eu posso clicar aqui e os dois ficarão dessa cor. Realmente não importa onde você faz isso. Às vezes, é difícil clicar nas coisas. Se você achar que é muito difícil clicar nas coisas, a maneira mais fácil é ampliar um pouco e dizer: Agora é mais fácil clicar. Eu posso entrar aqui, usar meu conta-gotas. Aí está. Tudo bem. Vou pegar um turno para me mostrar todas as minhas molduras em um único documento. Você pode alterar a cor da moldura do telefone que temos aqui, aqui embaixo, você pode dizer que está cheio de branco, ou seja, se , se, você pode alterá-lo para outra coisa. Algumas pessoas gostam de torná-lo cinza claro. Vamos deixá-lo branco por enquanto. As molduras podem ser coloridas da mesma forma que retângulos. Eles são muito parecidos. Algo que você pode querer mudar ou eu não consigo lembrar que o padrão é. É a cor do tema. Basicamente, há um layout muito branco na minha interface, tudo está branco Os fundos são cinza claro. Você pode entrar neste pequeno F aqui e acessar as preferências. Você pode dizer, na verdade, que eu quero que o tema seja claro ou escuro. tema do seu sistema no momento, meu está sendo obtido do meu Mac. Meu Mac diz que é dia, você vai usar um claro e à noite ele muda para preto, o que é estranho Você poderia forçá-lo a ser preto. Isso não muda o documento, apenas muda a interface. Isso também significa que quando eu crio um novo documento, crio um novo arquivo de design, você vê que o fundo é preto. Se eu pegar minha ferramenta de moldura e desenhar outra coisa, estamos na mesma posição, mas a interface parece bem diferente. É apenas uma versão preta escura. Depende de você. Se você mudar para escuro e quiser, mas o fundo ainda será de cor clara. Você pode selecionar nada, clicar no fundo e ir até aqui e dizer, na verdade, eu quero que esteja escuro. Não me lembro qual é o padrão. O seu será diferente dependendo das preferências do seu sistema. Então, vou forçá-lo a ficar leve e permanecer no modo claro pelo resto da aula, mas você pode alterá-lo. Tema, leve, agradável. Outra coisa útil é que dependendo da sua visão e da tela, você pode ir para a visualização e descer para a escala da interface. Você pode dizer, na verdade, que eu gostaria de aumentá-lo ou tentar decodificar esses hieróglifos. Não é útil Figma Mas se eu fizer isso, você pode ver tudo nos painéis fica maior, e você pode ficar cada vez maior e maior. Você tem uma tela envolvente enorme, talvez seja melhor ter a interface Vá, devo deixá-lo desse tamanho? Vou deixar esse tamanho para o vídeo para você possa ver o que estou fazendo com um pouco mais de facilidade. Uma última coisa é que isso está me deixando louco. Está te deixando louco? Você não se importou? Isso não cabe em todos os lugares. Então eu posso arrastar isso um pouco maior. Eu não sei. Precisa ser maior. Vou te mostrar um pequeno atalho Um pequeno bônus por esperar até o fim. Se eu arrastar este lado e quiser que fique igualmente para fora daquele lado, o que você pode fazer em vez de apenas arrastar um lado e depois o outro, você pode segurar um atalho agradável Prometi que não havia atalhos, mas terminamos muito. Mantenha pressionado o contador de opções mac. Ok, contra PC, e você vê que ele faz isso dos dois lados. Ooh. Extravagante. Veja, valeu a pena ficar por aí fazendo quadrados coloridos Tudo bem, é isso. A grande vantagem aqui, na verdade , é: não use muita cor Tente manter suas molduras em y realmente simplistas, use cinza, use azul Não tente começar a codificar por cores novamente. Não queremos nos distrair de nosso objetivo desse teste de quadro y. Basta testar a mecânica. As pessoas clicam onde achamos que vão clicar? É esse o tipo de coisa que o cliente quer sem fontes, sem cores, sem estilo Tudo bem, é isso. Te vejo no próximo vídeo. 12. Traçados mais atualizando padrões de cores no Figma: Olá. Neste vídeo, veremos o traço, que é a linha dentro da Figma, todas as coisas que você pode e não pode fazer com ela Além disso, mostrarei como alterar o padrão. Sempre que você desenha um retângulo, ele corresponde a um estilo anterior que criamos Tudo bem Vamos começar. Tudo bem Vamos adicionar um traço. Traçado é apenas outra palavra para uma linha. Vou clicar nesse retângulo grande na parte superior aqui e aqui, por padrão, quando desenhamos algo com uma ferramenta de retângulo, obtemos um preenchimento, mas nenhum Podemos adicionar um traço pressionando o pequeno botão de adição. Receba um pequeno golpe na parte externa. Por padrão, é um traçado de um ponto ou eles o chamam de peso. Essa é a espessura da linha. Posso clicar aqui e usar minha seta para cima ou digitá-la. Vou colocar algo bonito e grosso para que você possa ver três. Você pode se livrar do traço clicando neste pequeno sinal de menos, adicione-o novamente e você o obterá Obviamente, mude a cor dela. Se você quiser pastar, você quer apenas um cinza mais claro, basta mantê-lo arrastado até essa borda aqui e encontrar algo aqui ou simplesmente deixá-lo preto, feche-o Digamos que você passe algum tempo e pense, na verdade, eu quero que isso seja o quê? Três. Passe algum tempo, você fica tipo, eu amo essa cor verde. Bem, você não o ama, mas precisa usá-lo repetidamente. Se eu for até aqui e disser, ferramenta retangular, que é arqueada, e arrasto outra caixa, você fica tipo, não tem cantos arredondados, não tem a cor, não tem o traçado Eu poderia usar meu colírio na ferramenta, clicar nele, olho no colírio na ferramenta Bam, eu agarrei parte dela, mas não os cantos arredondados. Apenas pegou O que você pode fazer é alterar os padrões. Digamos que eu queira que esse seja o padrão para cada vez que eu desenho um retângulo O que você pode fazer é selecioná-lo, ir até o F aqui em cima, descer até Editar e tem esse aqui que diz, defina as propriedades padrão. Você precisa selecioná-lo primeiro ou a coisa da qual deseja roubar todas as propriedades Você clica nisso. Nada acontece , exceto que aparece na parte inferior. Agora vou clicar no fundo, apertar meu arco para pegar o retângulo e desenhar outra coisa Olhe para nós. Nós redefinimos nossos padrões Digamos que também façamos algo diferente com os botões. Esse é o padrão para cada vez que você usa uma ferramenta retangular, mas obviamente existem casos de uso diferentes Desenhamos nossa imagem de espaço reservado O primeiro é um botão. Digamos que o botão seja diferente e tenhamos uma cor diferente e um traçado diferente na parte externa. Horrível, mas precisamos movê-lo para cá. O que você pode fazer é dizer e provavelmente viu isso lá no mesmo lugar abaixo do F, vá para editar. Você pode copiar e colar as propriedades. Se você está fazendo isso com frequência, há um atalho lá, para que eu possa copiar as propriedades e você, meu amigo, editará e colará as propriedades, e eu pego tudo de lá e colarei lá Incrível. Eu não quero fazer isso, mas agora você sabe como. Tudo bem, desfaça, desfaça e faça. Esses são os padrões Vamos desenhar algumas linhas. Colocamos linhas ao redor do lado de fora. Vamos desenhar uma linha sozinha, ela está escondida embaixo da ferramenta retangular Existe a ferramenta de linha. Vou clicar nisso. Vou começar aqui, clicar em segurar e arrastar, arrastar e descer até o canto inferior aqui. Eu quero que tenha o mesmo peso, então vou clicar aqui e subir dois, então são três. Peso, e eu não alinhei muito bem. Faremos isso em um segundo. De volta à ferramenta de linha, que é a tecla l. Clique em segurar e arraste de baixo até lá. É muito comum que Ug continue mudando isso. Eu vou dizer, dois, três, poderíamos copiar e colar propriedades. Vamos fazer isso só para praticar. Eu clico nisso. Eu uso a Opção de Comando C em um Mac. Isso é Control Alt, C, e clique nesse outro e vá para a Opção de Comando V, ele colará a propriedade. Use essas cargas. Novamente, você pensa demais, cara, ele disse sem atalhos, espere muitos atalhos Eu te mostrei o caminho mais longo. Você pode fechar ouvidos quando eu começar a usar atalhos Tudo bem, então isso é bom. Só que eu estrago tudo, então vou ampliar. Command plus plus plus. Barra de espaço, arraste-a para fora. Você pode clicar nele uma vez nesta linha aqui. Se eu clicar e arrastá-lo, ele arrastará tudo. O que eu quero fazer é clicar duas vezes na linha e obtenho os dois pontos no final. Você pode ver? Se eu clicar nele, ele se transforma em círculos e eu obtenho os pequenos pontos finais dele Mova a barra de espaço para baixo se eu não clicar em segundo plano Eu clico nele, eu fico tipo, eu vou mover o quadrado. Acaba fazendo coisas estranhas. Então, se eu clicar duas vezes nele, posso dizer, com a barra de espaço, que parece bom Esse precisa ser trabalhado. Clique duas vezes. Aqui vamos nós. Tudo bem, então temos algumas linhas nos cantos. Para sair disso, você precisa clicar algumas vezes em segundo plano apenas para sair desse modo aqui. Não é porque você precisa clicar três vezes. Isso é o que você precisa fazer. Tudo bem Temos nossas linhas por lá. Vamos fazer nosso menu de hambúrgueres. O menu Burger é comum na navegação de um telefone celular Vamos pegar alky para a ferramenta de linha ou seguir o caminho mais longo. Você pode totalmente percorrer o caminho mais longo. Onde quer que você esteja pronto, aqui está o alky, vou clicar e arrastar para fora. Agora, é muito bom para fotografar, mas se você fizer o que quero dizer fotografar é ver isso. Realmente quer seguir em frente. Você está um pouco confuso, é fácil recuperá-lo. O que você pode fazer é como fizemos com o círculo lembre-se de quando arrastamos o círculo, pressionamos a tecla Shift, ele o bloqueou na largura elevada, você fez a mesma coisa com uma linha, que alky, clica e arrasta para fora o círculo, pressionamos a tecla Shift, ele o bloqueou na largura elevada, você fez a mesma coisa com uma linha, que alky, clica Se eu pressionar a tecla Shift, o momento vai para qualquer lugar; se eu segurar a tecla Shift, você verá que ela a trava em ângulos de 90 graus, até mesmo em ângulos de 45 graus. Isso é útil. Coloque-o no tamanho que você deseja. Novamente, quando testarmos em um telefone real em breve, é difícil saber o tamanho médio do hambúrguer Basicamente, apenas três pequenas linhas. Eu gosto de chamá-lo de sanduíche Nav. Ninguém mais chama isso de sanduíche nav, mas a maioria das pessoas se refere a ele como um Vou ampliar um pouco. Vamos dar uma olhada em mais algumas linhas. Queremos três deles. Você pode copiar e colar usando Command C, Command V ou Control C, Control V. Conhecemos o atalho da nossa suíte Agora lembre-se, mantenha pressionada a tecla de opção em um Mac, um PC e podemos duplicá-la Nós fazemos a mesma coisa novamente. Eu quero fazer mais um atalho Feche seus ouvidos, se quiser, nada mais. Tudo bem Mais um. Para aqueles que ainda estão por perto, mantenha pressionada a tecla de opção e arraste-a para fora. O que você pode fazer agora é pensar, eu quero fazer a mesma coisa de novo. Basta duplicá-lo, na mesma quantidade, na mesma distância. Você segura Command em um Mac, Control em um PC e D. Isso duplicará ou repetirá o Command D ou o Control D. É muito útil Você pode continuar, ótimo para listas e outras coisas. Sempre que você estiver arrastando algo, digamos, é um pouco uma lista para isso Antes de tudo, vou duplicá-lo . Você fica tipo, eu vou fazer isso. Em seguida, lembre-se do comando ou Controle D, para fazer isso novamente. É ótimo para criar pequenas listas como essas , quadrados, círculos ou pontos Nós temos esses caras. Precisamos examinar algumas coisas avançadas sobre AVC. Na verdade, não. Vamos começar vou aumentá-lo em tamanho para dois, só para que você possa ver um pouco mais facilmente Com este top, isso é chamado de boné. É um nome infeliz, mas é a linha que aparece e acaba aqui Você tem outra opção. Clique aqui. O derrame aqui. Este pequeno painel de traços. Você tem esse ponto inicial e final e aqui eles se relacionam com um monte de coisas. Eu gosto de flechas. Aí está. Se você quiser se livrar da flecha, clique em desfazer. Eu quero que o outro lado seja uma flecha. Aí está. Você tem algumas coisas básicas aqui. O que eu queria te mostrar é que não sei por que isso incomoda. Este boné no final aqui, você pode dizer, na verdade, eu quero que seja qualquer um, eu tenho que rolar um pouco para baixo não consigo ver no meu monitor De qualquer forma, não consigo ver no meu monitor, é redondo e quadrado. Eu vou dizer redondo. Você pode ver que está chegando ao fim? Eu gosto mais. Esta aqui, a última opção é que você pode fazer qualquer uma. Ele faz as duas pontas. Também há um quadrado. O que eu quero te mostrar é basicamente a linha, você pode ver que há aquela coisinha azul saindo pelo meio Esse é o derrame real. Então você coloca um peso nela e pode ver que a pequena linha azul permanecerá , mas as linhas azuis no meio se expandirão em ambos os lados Se eu fizer boné quadrado, vamos dar uma olhada. Você pode ver que empurra a linha um pouco e fica quadrado na extremidade Eu não uso isso com muita frequência. As pessoas perguntam. Está lá, mas eu uso bastante a tampa arredondada para suavizar as bordas dos traços; talvez você queira usar uma para suavizar as bordas dos traços; talvez você queira usar Vou selecionar todos eles. Esse é um bom ponto. Você pode ver aqui que diz misto. Você verá uma mistura em todos os lugares ao selecionar várias coisas. Estou apenas usando minha ferramenta de ponteiro, arraste a caixa ao redor de todos os três Está dizendo que o ponto de partida é que é uma mistura de nádegas, tampas arredondadas e quadradas, não sabe o que dizer, apenas e quadradas, não sabe escreve misturado Diz misto, não tem certeza do que exibir. Vou dizer que todos eles estão aqui embaixo, redondos. E eu só fiz isso com um deles. Isso é estranho Redondo. Está indo mal. Esse é um bug estranho. Normalmente não faz isso quando eu ensino. O que está errado? Estou desistindo. O que acontece com eu acho que é a tampa quadrada, eles mudaram a maneira como fazem isso. Quando eles fazem a tampa quadrada, ela costumava se projetar para fora. Agora eles a colocaram para dentro, então a linha da tampa quadrada acaba ficando do mesmo tamanho Mas isso mudou a largura do meu traço real. Você não está fazendo sentido, Dan. Não se preocupe Você não fará isso com muita frequência, mas é um bug, e vou deixá-lo no curso porque você também pode se deparar com ele. Estranho, confuso e desanimado, o instrutor fica um pouco estranho com isso. Eu acabei de refazê-los. De qualquer forma, o objetivo principal aqui é observar a diferença entre a tampa plana, a tampa traseira e a tampa arredondada Tudo o que eu vou usar é deslocar um para ver a coisa toda, e vou selecionar todas elas, e muitas vezes eu só uso meu ancinho para movê-las porque é difícil arrastá-las desse e muitas vezes eu só uso meu ancinho para movê-las tamanho É como fotos ao redor. Você diz, não, não, eu gosto de colocá-lo onde eu quero e depois usar meu ancinho para taperoni Tudo bem Você vai. Temos um menu de hambúrguer ou um nav móvel ou sanduíche nav Vamos começar com isso como uma coisa. Tudo bem Eu só vou mover isso para cá. Usando meu ancinho novamente. Oh, um pequeno atalho para você é que já fizemos isso antes. Quando estou usando meus ancinhos, eu apenas os empurro. Se você segurar a tecla shift enquanto faz isso, ele faz isso dez vezes mais dez. Então, em vez de mover um pixel para cima e para baixo, se você segurar a tecla shift e usar seus ancinhos, ele o faz em dez pixels Coisas que eu uso e esqueço que eu faço. Aí está. Você também sabe. Tudo bem É isso mesmo. Traços e observação das cores padrão dentro do Figma. Para o próximo vídeo. 13. Edição de objetos e como escapar no Figma: Ei, nesse vídeo, eu vou te mostrar essa coisa. É chamado de modo de edição de objetos. Talvez você já tenha ficado preso aqui. Eu vou te mostrar para que serve e como escapar disso. Veja linhas listradas Eu quero te mostrar isso logo no início da aula. Vamos entrar em detalhes mais avançados mais tarde. Mas as pessoas ficam presas desde cedo. Se você clica duas vezes, provavelmente já está aqui. Talvez você já tenha descoberto sua saída. Mas se eu tenho um objeto, e se você duas vezes e clica duas vezes em coisas que você gosta, o que está acontecendo? Como faço para sair? Como sair é só clicar duas vezes no fundo. Vamos fazer isso com novos retângulos. Desenhe o arco da ferramenta retangular. Volte para a ferramenta de movimentação por padrão. Clique duas vezes nele e você está dentro dele, você fica tipo, o que é isso? Isso significa que, basicamente, quando você não está no modo de edição de objetos, você pega os cantos do retângulo e ele faz coisas retangulares É forçado a ser um retângulo. Ao clicar duas vezes nele, eu entro nesse objeto e posso destruí-lo Eu posso pegar a esquina agora. Você percebe que as bordas mudam de um quadrado para um círculo. Veja isso. Olha, nós o destruímos. Já saiu, e agora não está mais fazendo pedaços retangulares. Você entrou nesse objeto e o editou. É chamado de Modo de Edição de Objetos. Você pode fazer outras coisas legais. Assista Clique duas vezes em Entrar. Eu posso clicar nesta linha aqui. Acabei de clicar em “Online”, “ Excluir” na minha chave. Eu me livrei dessa linha, que eliminou o preenchimento. Eu posso dizer: Livre-se dessa linha e você pode começar a destruir essa coisa e começar a separá-la destruir essa coisa e começar a separá-la . Não é mais um retângulo Isso pode ser útil mais tarde, quando começarmos a desenhar nossos próprios ícones Vou desfazer isso para voltar. Mas esse é o modo de edição de objetos. Foi aí que acabamos com essa linha também. E clicamos duas vezes na linha e ficamos como se tivéssemos os pontos Estamos no modo de edição de objetos. A maneira de saber também é que a linha não tem listras Essa coisa aqui embaixo aparece. Veja isso. Eu clico duas vezes sobre isso aqui. Você vê que isso não estava lá antes, clique em desligar, clique em. Diz: Ei, você quer mexer com a mudança? Você quer uma ferramenta de laço? Vamos fazer o Shape Builder. Nós faremos todas essas ferramentas mais tarde. Você pode sair dela clicando na cruz oficial ou, se estiver nela, basta clicar duas vezes no fundo. Vá para o modo de edição de objetos e onde as pessoas se perdem desde o início. Tudo bem, é isso. Te vejo no próximo vídeo. 14. Ferramenta de escala vs de seleção no Figma: Olá. Neste vídeo, veremos a diferença entre a movimentação e a ferramenta de escala. A ferramenta de movimentação é o que usamos até agora. Vou redimensionar isso, e ele meio que fica maior, mas não é o que queremos. Queremos ampliá-lo. Então, vamos usar a ferramenta de escala, ok? Selecione tudo e ele fará isso. Ambos têm seu lugar. Deixe-me mostrar como os dois funcionam. E ficamos um pouco perdidos, mas consertamos isso. Está tudo bem. Vamos começar. Para começar, quero adicionar o traço ao redor desses botões, então vou pegar isso. Vá até aqui, vá para editar, e eu vou dizer copiar propriedades, ou você pode usar um atalho e eu vou selecionar os dois Não é do tipo, quero apenas dois pequenos retângulos e vou usar o Command Shift V ou o Control Shift V em um PC Tudo bem. Figma, por padrão, funciona da maneira que você gerencia. Eu escolho isso. Eu pego os dois . Tanto o texto quanto esse botão aqui e você fica tipo, eu quero mudar isso um pouco. E talvez redimensione-o um pouco. Mas digamos que eu queira que fique maior. Digamos que essa aqui, eu sou tipo, A, é muito grande. Eu preciso torná-lo menor. Assista. A fonte não fica menor. Redimensiona o retângulo, mas nada dentro dele. mesmo acontece com o derrame aqui embaixo. Se eu quiser que todo esse botão seja maior, assista. Se eu arrastar mais, você fica tipo, o traço tem a mesma largura. O texto tem o mesmo tamanho, tipo, como faço isso então? Quero que tudo seja maior. Ah, turno. Ele meio que o dimensiona proporcionalmente para o retângulo, mas a fonte ainda tem o mesmo tamanho Então, vamos usar a ferramenta de escala. Você alternará bastante entre a ferramenta de movimentação e a ferramenta de escala neste curso Vou pegar escala e isso vai fazer o que queríamos fazer. Dimensione o traçado a fonte e o retângulo juntos Ele faz isso proporcionalmente. Vou desfazer isso porque quero fazer isso com isso. Vou selecionar os dois. Vou até minha ferramenta de balança. Já está definido como padrão. Agora eu posso ver que você fica um pouco menor. Você pode ver que está diminuindo a cruz, que é uma fonte ou o sinal positivo, e vou colocar isso Na verdade, eu quero um derrame por fora. Vamos fazer isso no final. É mais sobre a escala versus o derrame. Você precisará alternar um pouco entre os dois. Fontes. Terminamos, se eu clicar aqui, posso brincar com o tamanho da minha fonte. Clique duas vezes dentro da caixa de texto. Digamos que eu queira torná-lo maior. Você fica tipo, oh, sim. Mas não se preocupe, há um atalho fácil e incrível para escala, que é claramente S para escala Não, S é para a ferramenta de corte, que eu nunca uso Está tudo bem sem um bom motivo. V é a ferramenta de movimentação, veja abaixo, V e K. Você fala bastante entre elas Você vê isso mudando aqui embaixo? OK, VK. Eu estaria na escala K, posso dizer, tudo bem, uma maior. Essa coisa aqui, eu quero selecionar tudo isso. Estou usando minha ferramenta de balança. Posso dizer: Estou trocando meu esboço. Vou selecionar tudo isso e apenas reduzi-lo para que fique menor. De alguma forma, eu não entendi isso. Pegue tudo. Então diminua a escala? O que há de errado com você? O que eu fiz com esse cara? Vamos dar uma olhada. Ele está trabalhando. Mamãe. Por favor, espere. Tudo bem, estou de volta. Eu sei o que fiz agora para quebrá-lo. O seu provavelmente está funcionando bem. Vou te mostrar por que o meu está quebrado. É porque eu estava te mostrando algo mais cedo e você pode se deparar com isso de qualquer maneira Vamos manter isso no curso. Nesta linha, você pode dizer a diferença entre essas duas? Esse aqui tem uma caixa ao redor. O motivo é que, quando eu estava mostrando como entrar nele, clicar duas vezes nele e se mover por aquele lado, mostrei que a maneira errada de fazer isso é este relógio. Se eu pegar esse, então você. Pego o retângulo e tentei aumentá-lo. Acabei colocando uma caixa em volta dela, em vez de ser uma linha. Agora é uma linha dentro de um retângulo. Então, o que aconteceu quando pego a cabeça quadrada para demonstrar a maneira errada de fazer Eu normalmente não faço isso, então é por isso que me assustou um pouco, pois eu estava perdida Não vamos falar muito sobre como consertá-lo. É muito complicado para o início do curso e não é muito útil. Podemos simplesmente copiar e colar. Eu tenho outro desses, vou retirá-lo e vou mostrar que você ganha um bônus porque nos perdemos. O que eu vou fazer é ir até aqui e dizer vire essa e eu vou colocá-la no canto Quando eu estiver arrastando , vamos clicar na parte de trás. Clique e arraste a linha. Acabamos colocando uma caixa em volta dela, como fizemos. Veja isso. Se eu clicar em segurar e arrastar isso, isso causará esses problemas quando estivermos redimensionando Tente não tentar arrastar as bordas dessas caixas, pois isso pode nos causar alguns problemas. Se você precisar editar a linha, entre no modo de edição de objetos clicando duas vezes nela e movendo-a em vez de arrastar os quadrados fora, pois isso causa esse problema Tudo bem, esse é o problema. É assim que se conserta. Onde estávamos? A, seleção versus escala Espero que agora eu possa selecionar tudo isso Vá para o meu atalho super fofo, que é K. Você entendeu, e agora eu devo ser capaz de escalar isso para cima e E o traço vem junto com a fonte. Tudo escala. Voltando à ferramenta de movimentação, que provavelmente é a ferramenta mais comum, lembre-se de que não tenho nada selecionado. Vamos apertar V no teclado. Lá vamos nós. Atalhos ou use o caminho mais longo. Isso realmente não importa. Essa é a diferença entre usar a ferramenta de movimentação e usar a ferramenta de escala. Você alternará entre os dois o tempo todo. Ótimo para fontes. Ok, reduza a escala. Lá vamos nós. Fonte menor. Tudo bem. É isso mesmo. Te vejo no próximo vídeo. Vamos tentar não nos perder muito na próxima, Dan. Tudo bem. 15. Frames vs grupos no Figma: E neste vídeo, vamos ver quadros versus grupos. Nós usamos os dois. Bem, pelo menos você sabe o que é um grupo . É um grupo aqui em cima. Apenas mantém as coisas juntas e eu posso esmagá-las e movê-las. Faz coisas de groupie. Mas as molduras são muito especiais. Eles se agrupam, mas podem fazer coisas divertidas como essa. Olha, está grudado nos cantos. Eu posso torná-lo menor e posso recortar coisas. As molduras têm poderes especiais. Gosto de grupos, e eu quero apresentá-los bem cedo no curso, se você quiser, cara. Depois desse vídeo, você ainda está um pouco confuso sobre os frames. Não se preocupe. Apresentando-o mais cedo , para que não seja apenas um grande surto no final do curso, porque você encontrará muitos modelos e trabalhos de outras pessoas que usam molduras em vez de grupos, você dirá e trabalhos de outras pessoas que : por quê? Por quê? Vamos abordar um pouco do Y. Agora, vamos começar Vamos começar desenhando algumas formas desse lado. Vamos pegar a ferramenta retangular. Vou desenhar um retângulo e segurar a tecla Shift, então é um quadrado perfeito Vamos fazer o polígono, que é triângulo, vamos fazer uma elipse Quase do mesmo tamanho. Eu não preciso ser. Vou ampliar. Eu vou dizer que todos vocês não têm derrame. Vou selecionar os dois e dizer que você não tem nenhum raio de canto sem um bom motivo Só quero formas simples. Temos três formas e eu posso alinhá-las sem um bom motivo. Desça, siga em frente. Vamos selecionar todos os três e eu posso clicar com o botão direito do mouse e dizer grupo. Comando G, Controle G em um PC. Agrupamento muito comum. O agrupamento funciona, como você imagina. Eu posso clicar em segundo plano agora e agora posso clicar e arrastar tudo isso porque eles estão em um grupo. A outra coisa a observar é você pode ver aqui no meu painel de camadas, lembre-se de que você vai estar no arquivo, na primeira página, e nós estamos nesta página de recursos, há uma chamada “vou chamar isso de ícones”. Você pode renomeá-lo aqui. Dentro daqui, às vezes eles desabam, às vezes estão abertos Há um pequeno Chevron aqui. Você pode abri-los. Dentro do meu grupo, há uma elipse, polígono e um triângulo Excelente. Grupos. Você pode desagrupá-los clicando com o botão direito do mouse e dizendo desagrupar. O grupo desaparece e é apenas a forma está aqui agora sozinha Desfaça isso porque eu quero esse grupo. Eles são ícones. Para baixo. Tudo bem. Eu vou te mostrar a diferença entre um grupo e um quadro. Então, o que eu vou fazer é duplicar isso. Eu tenho dois deles. Estou usando meu arrasto alternativo opcional. Vou desagrupá-los. Meu grupo está no topo, chamado de ícones, e essas são minhas três elipses Vou movê-los acima disso no painel de camadas apenas para facilitar a visualização. Aí estão meus ícones, e então eu tenho esses caras apenas curtindo. que vou fazer é segurar o turno, agarrar você, você e você. Eles estão todos selecionados. Em vez de dizer grupo, vamos dizer seleção de quadros. Temos um atalho semelhante. Você vai dizer, oh, eles são muito parecidos. Como tudo isso é uma porcaria, você pode movê-los Este aqui que agora está em um quadro, não em um grupo. Eu posso movê-los. Qual a diferença, Dan? Bem, em termos de agrupamento de coisas, nada realmente Você pode usar uma moldura ou um grupo. Na figma, eles usam molduras para tudo em vez de grupos Por quê? Porque eles são como grupos, mas você ganha alguns recursos extras de bônus. Vou abordar um pouco neste vídeo, talvez apenas um teaser de como os quadros funcionam, principalmente porque se você estiver abrindo o modelo de outra pessoa, usando o modelo de outra pessoa ou abrindo o projeto de outra pessoa, eles podem usar quadros para tudo Foi isso que me confundiu quando comecei. Eu estava tipo, por que há molduras em todos os lugares? Eles dizem coisas estranhas, mas na verdade eles fazem coisas poderosas. À medida que avançamos no curso, aprenderemos mais sobre eles, mas quero apresentá-los cedo , para que você não goste de molduras Legal. Vamos falar sobre molduras. Aqui, você pode ver a diferença no ícone. Como você pode ver, os grupos são representados por esse pequeno quadrado pontilhado e molduras desse pequeno símbolo de libra Tem um funcionamento da mesma forma. Olha, tem coisas dentro dela. Algumas das diferenças fundamentais, veja isso. Se eu entrar no meu grupo. Então esse é o meu ícone . Vamos chamar isso de grupos para facilitar. Dentro daqui, se eu clicar duas vezes para entrar, esse é o modo de edição de objetos, você entra nele. Eu cliquei duas vezes nele. Então, dentro do meu grupo, ou você pode simplesmente clicar nele aqui. Vou excluir a elipse, excluir o polígono, excluir o retângulo e o grupo vai embora Não adianta um grupo sem nada dentro dele. Desfaça isso. O que acontece com a moldura? Se eu entrar na minha moldura, exclua isso, exclua isso, exclua isso. A moldura ainda está lá. Isso é estranho É por isso que você acabará com muitos quadros vazios. Você fica tipo, para que diabos serve uma moldura vazia? Eu posso existir sozinho. Isso nos traz de volta à forma como começamos este curso. Veja isso. Lembra quando desenhamos nossas páginas telefônicas. Eles estavam usando a ferramenta de moldura aqui embaixo que usamos. Aqui embaixo, usamos a ferramenta de moldura, o FK. Uma moldura pode existir sozinha com coisas dentro dela ou não. Os grupos não podem. Essa é uma das vantagens de ter uma moldura. Isso os torna estranhos quando você exclui coisas deles, elas ainda existem. Você é tipo, isso é estranho. Isso mesmo. Estamos nos acostumando com a estranheza. Vamos ver um pouco mais das diferenças. Quando estou usando um grupo e acabo de selecionar o grupo e redimensioná-lo, tudo se comprime redimensioná-lo, tudo Já se eu pegar este, o quadro QC pode ocupar seu próprio pequeno espaço Não comprime o conteúdo. Isso é muito útil porque molduras, digamos, eu faço assim e arrasto para cima, você fica tipo, sem fazer nada, Dan Uau, o que você pode fazer é dizer: quero recortar o conteúdo que você possa usá-lo como uma máscara Essa é uma vantagem de uma moldura, e eu a desfaço. Deixe-me mostrar mais algumas para que possamos nos acostumar. Por que estou fazendo com que todo mundo tenha medo de molduras? Se eu esperar até o final e te mostrar as molduras, é muito cedo. Vamos fazer um pouco aqui e vamos seguir o curso. No final, mestre dos quadros, você será. Vamos dar uma olhada no grupo. O grupo aqui tem algumas configurações diferentes no lado direito. Veja isso. Se eu clicar na moldura, há algumas partes extras como layout. Podemos clicar no fluxo. No momento, existe uma forma livre mista. Veja isso. Eu posso empilhá-los dessa forma. Eu posso empilhá-los na vertical Vê? Volte para o fluxo livre. Na verdade, você tem que desfazer. Pode fazer outras coisas legais. Deixe-me demonstrar mais uma, leve o grupo até lá, pegue essa moldura e o que faremos é saber que uma coisa estranha sobre molduras é que você não desmolda Você agrupa e desagrupa, mas enquadra e depois desagrupa Ambos usam o desagrupamento para separá-los novamente. Perdemos nossa estrutura. O que vou fazer é pegar você, copiar e colar isso e movê-lo para cima. Está avançando um pouco, mas quero dar uma ideia de por que os quadros são poderosos e por que você os vê nos documentos de tantas pessoas Então, vou selecionar todos os três, quatro deles agora. Vou clicar com o botão direito do mouse, vou dizer seleção de quadros. O que posso fazer é entrar na moldura clicando duas vezes nela. Modo de edição de objetos de membro, entre. Posso dizer que você terá a restrição de cima e esquerda por padrão Esses três, porém, eu selecionei todos os três com minha tecla shift. Então, eu estou dentro da moldura, clicando duas vezes em Eu apertei a tecla Shift para pegar todos os três. Eu vou dizer que não no canto superior esquerdo. Eu vou estar no canto superior direito, nada muda, exceto se eu sair, agora eu agarro as bordas, veja isso. Você pode ver que os ícones aqui querem ficar no canto superior direito porque eu os defini para a restrição superior direita Isso se torna muito útil mais tarde, quando você pensa: “Não tenho nada selecionado”, “ F, minha ferramenta de moldura” Quero que agora estejamos trabalhando na versão para tablet. Vamos fazer um iPad Pro de 11 polegadas. Vou arrastar o nome até aqui e vou pegar isso, copiar, colar e mover para cá. Coloque-o lá e veja o que acontece. Olha, arraste-o para fora, está grudado no canto superior direito. Você pode usar muitos elementos dentro das molduras onde pode arrastá-los para fora e redimensioná-los bem Se você está se sentindo um pouco sobrecarregado, tudo bem. Vamos abordar isso repetidamente, mas eu só quero entrar em um pouco de ação estrutural logo no início, para que não seja um grande choque mais tarde. Além disso, você verá que todo mundo usa molduras. Você está assistindo o tutorial online de outra pessoa, usando molduras. É por isso que. Eles são muito poderosos. Eu não preciso disso agora. Vou clicar no nome e clicar em Excluir no meu teclado. Eu também não preciso de nada disso. Então, eu vou me livrar de tudo isso. Oh, uma última coisa interessante sobre molduras é assistir isso. Quando há uma moldura no fundo, ela tem um nome. Essa moldura não tem nome. Vamos dar uma olhada. Eu tenho esse painel de recursos. Lembre-se de que chamamos isso. Esse é o tamanho do meu iPhone, e essa é uma moldura exatamente igual à moldura que acabamos de fazer. Você pode desenhar molduras usando a tecla F ou selecionar coisas e enrolar uma moldura . Seleção de quadros. Realmente não importa como você obtém sua moldura, elas são as mesmas depois de feitas. O estranho é que, veja como esse tem um nome aqui em cima, e esse aqui não tem , embora seja chamado de quadro um Eu posso ver a palavra características aqui, mas não no primeiro quadro. Isso só acontece quando isso acaba. Você vê? Quem eu tenho um nome agora. Mas eu não tenho nome. Então, todas as coisas encontram coisas que têm um nome que não tem nome. É só porque eles não estão aninhados, o que significa que há uma moldura dentro de uma moldura. O nome desaparece. Ah, Dan. Isso serve para ajudar você a ficar menos confuso sobre molduras. Mas vamos seguir em frente. Tudo bem. Siga em frente. Isso são quadros versus grupos dentro de uma figura. Uma coisa é que eu nunca deveria usar grupos? Eles são ruins? Eles não são ruins. Eles simplesmente carecem de alguns dos recursos. Então, se você gosta de usar grupos, você pode usá-los. Se você precisar que eles façam outras coisas, como recortar ou restringir aderência às bordas, você precisará usar molduras Mas não há nada de errado com um grupo. No entanto, as pessoas usam apenas frames Tudo bem. É isso mesmo. Nos vemos no próximo vídeo. 16. Projeto do curso 02 - Wireframe: Olá. É o projeto de classe número dois. Estamos construindo nosso wireframe para uma versão mais completa Então, basicamente, é só isso. Nós meio que construímos essa parte juntos. Eu quero que você construa essas outras páginas. Eles não são particularmente difíceis porque são apenas retângulos com algum tipo Eu coloquei um texto de espaço reservado aqui apenas usando Xs. Não precisa ser exatamente como eu tenho, mas algo parecido com isso. Queremos ser relativamente parecidos à medida que trabalhamos, porque vamos construir coisas juntos. Então, mesmo que você discorde, tipo, não, eles não deveriam estar lá Faça isso da mesma forma que Okay. A única outra coisa é a flecha. Nós cobrimos flechas, então talvez você tenha que voltar para aquela Mas sim, basta criar isso para as três páginas. Estamos seguindo nosso fluxo de tarefas. Se você não tiver certeza sobre tudo isso, lembre-se de que há projetos de classe no documento nos arquivos de exercícios Há um PDF de projetos de aula. Você pode conferir isso. Como estamos usando esse fluxo de tarefas que analisamos anteriormente. Estamos criando os recursos do produto na página inicial, a página de verificação e a confirmação É isso que estamos construindo. Lembre-se de escolher uma cor simples e uma fonte simples. Provavelmente também é um bom momento para mencionar que há fontes ilegais que você pode escolher. Você não pode escolher papiro, comic sans, Times New Roman, escrita aérea ou pincel. Esses vão te prender. Então, qualquer outra fonte além dessa. Então, quando você terminar, quero que faça uma captura de tela de tudo Portanto, existe uma maneira de exportar quadros. No momento, em um Mac, sei que posso pressionar Command, Shift 4, clicar e arrastar uma caixa ao redor de todos eles, e obtenho esse tipo de captura de tela útil que aparece na minha PC, não tenho certeza do que é. Basta verificar o que está em um PC. As diferentes versões são um pouco diferentes. Ou tire uma foto com seu telefone e faça o upload para a seção de tarefas deste site Ok, você encontrará um lugar onde você pode colocá-los. E para aquelas pessoas que ficam por aqui até o fim, você ganha um bônus. Você notará que o MO não os tem na parte superior, porque eu estava tipo, Oh, basta copiar isso clicar nesse recurso e colar. Você fica tipo, hein? Mas por que isso está aí? É por causa de alguma estranheza que eu quero te mostrar Então, normalmente não acontece, mas aconteceu nesse caso, e eu fiquei tipo, vou manter isso no vídeo. Então, a carteira de Scott está dentro desta página inicial. Você pode ver a página inicial? No painel interno do Laos, meio que recortado está Scott Por exemplo, você não está aparecendo em nenhuma página de alguma forma. Não está na confirmação. Não está na tela de checkout, nos recursos ou na página inicial. É só sair sozinho. Este é o meu menu de hambúrguer. É por isso que, quando você o seleciona, ele o copia para saber onde está na página. Essa coisa realmente não sabe para onde precisa ir. Então, quando eu copio e colo, ele simplesmente o joga na página de recursos e é como, M, isso acontece de vez Não com muita frequência, com frequência. De qualquer forma, o que vou fazer é garantir esse menu de hambúrguer esteja dentro da minha página inicial, que é onde, até que eles apareçam, isso só precisa ter certeza de que está dentro Você pode passar o mouse acima e ir, Quem está lá dentro? Agora, quando seleciono os dois e vou copiar, clico na palavra recursos e colo, vai para o lugar certo. Essa é uma peculiaridade da figma, acontece de vez em quando se trata de coisas que não estão dentro da moldura que você precisava estar Está apenas se divertindo sozinho. Não sei como fiz isso. Aí está. Uma pequena dica de bônus para você no final. Vá fazer seu projeto e nos vemos no próximo vídeo. 17. Onde obter ícones gratuitos para o Figma: Olá. Ei, vamos falar sobre ícones gratuitos. Há muitas coisas online. Vou mostrar bons lugares para obtê-los sites e na comunidade Figma Mostrarei quais tipos de arquivo precisamos e como limpá-los para torná-los utilizáveis Vamos começar. Tudo bem. Há muitos lugares para encontrar ícones gratuitos. Estou usando iconfnder.com. Eu gosto disso. Eu usei um grátis. Vamos encontrar um ícone e falar sobre o que fazer e o que não fazer Vou digitar. Eu preciso de um carrinho de compras. Então digite o carrinho de compras. Algumas coisas com as quais você deve ter cuidado dependem de como você está usando isso Digamos que o estamos usando apenas para a prática de estudo, você pode usar qualquer um desses. Os que você gosta são gratuitos e premium, então eu vou usar de graça para esta aula. Você pode pagar por eles, tudo bem. Estamos procurando. A outra coisa é que, se eu quiser usá-los comercialmente, então, para trabalhar, tenho que me certificar de que uso comercial Agora, alguns desses de uso comercial exigem que você tenha o que é chamado de backlink Se você passar o mouse sobre o que está escrito, você precisa adicionar um link para o site do designer Eles permitem que você o use, mas você precisa , em seu site ou aplicativo, em algum lugar, criar um link para dizer: Foi aqui que eu me diverti. Você pode optar por procurar um carrinho de compras que seja usado comercialmente, mas não há backlink Pois eu posso simplesmente usá-lo livremente sem ter que reconhecer o criador. Agora, o que eu estou procurando? Basicamente, encontre algo que você goste. Eu gosto desse. Eu vou clicar nele. Há algumas maneiras de fazer o download. Há PNG e SVG. Você provavelmente conhece PNG. Sabe, é só um arquivo de imagem. Tem transparência, o que é perfeito, e depois há o EfGi, que é melhor para este caso Então, vamos dar uma olhada em ambos. Vou baixar um PNG. Serão 28 pixels. Eu vou baixá-lo. Tudo bem. Vou clicar em Salvar. Você pode simplesmente copiar o PNG para a área de transferência e, em seguida, ir para Figma e colar porque eu acabei de copiar Ok, essa é obviamente uma maneira mais rápida ou você pode baixá-la se precisar compartilhá-la com outras pessoas De qualquer forma, vamos dar uma olhada no outro. Vamos ao EFG. Vamos baixá-lo porque eu quero te mostrar algumas coisas. Também estou baixando o SVG, vou copiar a área de transferência e colá-la Você é tipo, eles parecem iguais, Dan, mais ou menos. Se eu pegar os dois e aumentá-los, lembre-se de que nossa ferramenta de escala é a ferramenta K. Ok, e eu vou ampliá-los. Você consegue ver a diferença entre SVG aqui e PNG aqui? O PNG é feito de pixels. É transparente, o que é legal, mas não é escalável É isso que SVG significa gráfico vetorial escalável. Vou pegar isso e é escalável e transparente Obviamente, você pode obter um PNG maior. Eu posso entrar aqui e dizer, eu quero um PNG, Dan, se eu ficar grande, vai funcionar. Copiar para a prancheta. Perfeito. É bonito e claro nesse tamanho grande. No entanto, ainda é feito de pixels. Eventualmente, se eu aumentar a escala, vou começar a vê-los. Você vê a pequena imprecisão do lado de fora. A outra coisa é que, se eu fizer o download, quero mostrar que você o baixe novamente. Vamos dar uma olhada nos tamanhos. Ok, então o SVG é bem pequeno. São 500 bytes. Tem aquele primeiro PNG, o pequeno, que era muito pequeno, certo? E é bem próximo ao tamanho do arquivo. Mas assim que eu faço um PNG maior, o tamanho do arquivo é muito maior. Então, 5 kilobytes. São bytes, são kilobytes. Isso é 5.000 bytes. Portanto, é dez vezes maior. E quando se trata de design web e de aplicativos, ao produzir um site, você precisa que esses ícones sejam muito pequenos, carreguem muito rápido e sejam escaláveis. Os SVGs vencem A outra vantagem dos SVGs é livrar-se desse. Também é que eles podem mudar de cor. Veja isso. Eu posso clicar duas vezes nele para entrar. Estou nesse modo de edição de objetos e posso dizer que agora você está vermelho. Quanto aos PNGs, eu não consigo tão facilmente. Eu tenho que pular para algo e recolorir forma mais difícil de fazer SVG é para o vento. Às vezes, porém, você puxa para baixo um ícone com fundo branco. Só vai continuar assim. Às vezes eles estão ligados, às vezes não. Você pode ver aqui agora que não é transparente? Porque tinha uma moldura na parte externa que tem branco no fundo. Você pode corrigir isso. Vamos dar uma olhada. Vamos nos livrar disso. Os SVGs, quando você os obtém de outras pessoas, de sites, muitas vezes são uma bagunça A bagunça é que há uma moldura e dentro dessa moldura há um retângulo e meu pequeno desenho vetorial que eu quero do carrinho de compras Eu não preciso dessa outra porcaria. O que eu posso fazer é simplesmente selecioná-lo na minha moldura. Aqui está meu vetor. Eu quero tirá-los dessa moldura e essa moldura aqui agora não é muito útil. Eu posso limpá-los depois. Você acaba fazendo isso bastante quando trabalha com SVGs de outras pessoas da mesma forma que figma lida com elas Eles são complicados, eu sei, mais complicados do que um PNG, com certeza, mas esse é exatamente o caminho que precisamos seguir. A outra coisa boa sobre SVGs, se eu clicar duas vezes neles, você pode começar a ver esses pontos Vimos esses pontos quando trabalhamos com essa linha. Veja isso. Zouk. Você pode começar a personalizá-los no carrinho Mad Max. Super rápido. Outro bom lugar para obter ícones gratuitos é na própria Figma. Tem uma comunidade. Vou voltar a esse pequeno ícone inicial aqui. Vou acessar Template and Tools. Eles continuam renomeando isso Às vezes é chamado de Comunidade e às vezes havia um botão aqui embaixo e depois havia um botão aqui em cima, basta ficar de olho para onde ele poderia ter ido. Toda vez que eu mudo isso, e mudo. Então, da comunidade, vou pesquisar essa comunidade, vou digitar ícones, e o que você descobrirá é que há muitas coisas brilhantes aqui em grupos. Digamos que eu quero ícones de heróis sejam muito comuns de usar. É um grupo de ícones que muitos designers e desenvolvedores usarão. Eu vou abrir isso. Realmente não importa quais você usa. Você está procurando o estilo que você gosta. Isso vai trazer à tona um bom ponto. Estou abrindo basicamente o arquivo de outra pessoa. Esta é a prévia. Entrei na comunidade, encontrei algo de que gostei. Há muitas outras coisas aqui como wireframes, maquetes ou aplicativos e sites completos de outras pessoas maquetes ou aplicativos e sites completos Falaremos sobre isso novamente mais tarde. No momento, porém, ele vai dizer, eu quero abrir isso no Figma, o que é uma coisa estranha Você não dá uma olhada. Você realmente o abre e agora essa cópia é sua. O que quero dizer com isso é que, nos ícones de heróis, se eu voltar para minha casa, fecho isso e vou para meus rascunhos. É mais ou menos onde começamos. Há o fluxo de tarefas, há o wireframe em que estamos trabalhando E agora os ícones de heróis são um arquivo que eu tenho. Está na nuvem, mas pense nisso no seu desktop agora. É como seu arquivo. Não está conectado ao original. Isso pode ficar um pouco confuso. Eu sei que quando você abre muitos ícones diferentes, eles se acumulam aqui Então, o que você pode fazer é, depois de encontrar o material e talvez retirá-lo daqui, voltar para a guia Início, clicar com o botão direito do mouse e movê-lo para a lixeira, que você possa mantê-lo organizado Então, se você estiver examinando vários modelos diferentes, coisas da comunidade de outras pessoas, eles bagunçarão seus documentos Tudo bem, vamos dar uma olhada aqui, e você pode ver muitas coisas legais, de tamanhos diferentes. O bom disso é que, digamos que algo assim onde está esse ícone de casa. Isso está construindo aqui. Eles têm uma versão sólida versus uma versão resumida Mas quando fica menor, você pode ver que eles realmente mudam isso. Quando precisa operar em um tamanho muito pequeno, eles perdem muitos detalhes. Veja as janelas ficarem menores. Um designer pensou bem nisso e acha que, quando é tão grande, fica assim, mas quando é menor, nós meio que o ajustamos. Você pode ver que este aqui é um pouco mais elaborado. Quando fica menor, fica um pouco mais reduzido para ficar mais visível em um tamanho menor. Tem muita coisa legal aqui. Uma outra coisa é que, se você baixou algo diferente dos ícones de heróis, pode descobrir que, nas páginas aqui, pode haver uma capa e depois os ícones. Isso é o que eles fizeram aqui. Você pode abrir alguma coisa, você diria: “Eu não consigo encontrar ”. Porque há páginas. Faremos páginas juntos mais tarde, mas dê uma olhada, pode haver outra coisa. A outra coisa é tentar encontrar os ícones aqui. Você pode pesquisar pesquisar pesquisar, mas há uma opção. Ícones. Eu posso dar uma olhada por aqui. Existem todos os meus ícones, muitas coisas. Eles estão muito bem organizados, mas você pode fazer uma pesquisa. Você pode fazer o que estamos procurando? Fazendo compras? Existe um de compras ? Imagino que exista. Oh, olha isso. Está bem? Então , foi direto para ele. Agora, como faço para colocá-lo no meu documento? O que eu vou fazer é dizer: Tudo bem, eu gosto desse cara aqui, clique duas vezes nele para entrar Agora, é aqui que fica um pouco confuso. Vou encerrar a busca. Aí está lá. Estou clicando duas vezes nele novamente. Está bem? Então estava dentro de um grupo. Agora está lá dentro novamente. Eu posso entrar novamente, e eu posso ir direto para o vetor lá. Está bem? Você sabe, você acaba com esse modo de edição de objetos. É quando você sabe que se aprofundou o suficiente porque podem ser grupos dentro de grupos dentro de grupos. Então você está tentando encontrá-los. Vou copiá-lo e depois vou mudar para minha outra guia. Oh, hora do atalho. Comande um , dois, três em um Mac, controle um, dois, três. Vamos alternar entre essas guias na parte superior aqui. Se você tem quatro coisas abertas, você pode escolher uma, duas, três, quatro. Se você não tem nada aberto, você só pode ir para o Comando ou Controle um. Essa é apenas a base. Posso voltar para o Comando 2, colar e pronto. Vou usar minha ferramenta de escala, Juk Okay, e temos o ícone de outra pessoa Uma última coisa que pode acontecer é que você pode pegar, digamos que é isso e eu simplesmente pego o que acho que entendi, e vou usar Command two, Control two em um PC em que eu colo. O que eu quero te mostrar é que eu entendi. Mas tem esse ícone estranho aqui. Basicamente, esse pequeno ícone aqui e esse pequeno grupo aqui parecem estranhos Tem uma cor roxa. É porque é uma instância. Analisaremos os casos mais tarde. É muito longe de onde estamos agora, mas você pode Tudo bem, o que é tudo isso? Lembre-se, eu posso entrar nele, digamos, eu quero você, eu posso recortá-lo e colá-lo, ele sai disso e aquele pequeno recipiente, que é chamado de instância, pode ser excluído e voltamos a ter nosso vetor. Então eu acho que quero te mostrar isso porque você vai procurar coisas e fica tipo, O que é todo esse lixo Essencialmente, queremos apenas extrair o vetor dela mais tarde, quando soubermos o que é uma instância, eles serão úteis. Mas ainda não sabemos o que são. Pegue o vetor. Tudo bem, não precisamos de nada disso agora. Todos, descobrimos de onde podemos obtê-los. Vou te mostrar outro lugar para obtê-los antes de irmos e torná-lo um projeto de classe. Mas faremos isso em outro vídeo porque é outro lado funcional do Figma chamado plug-ins. É isso mesmo. Trabalhando com ícones no Figma, tente encontrar SVGs e tente descobrir a parte vetorial desse ícone, descartando a moldura em qualquer instância que a envolva Aprendemos um lindo atalho Command or Control, um, dois, três, vamos pular entre nossas guias Impressione seus colegas com o aumento da conta . Te vejo no próximo vídeo. 18. Como usar plugins no Figma para ícones: Olá. Ei, vamos dar uma olhada nos plug-ins dentro do Figma Basicamente, um plugin é um pequeno miniprograma que roda dentro do Figma para meio que estendê-lo Ok, pode ser encontrar fontes e imagens. Ele pode fazer todo tipo de coisa. Ei, há muitos plug-ins diferentes. Mostrarei como encontrá-los dentro do documento de design do Figma, também na comunidade Existe uma maneira super poderosa de estender Figma e muito útil para nós Então mergulhe e eu vou te mostrar como encontrá-los e usá-los. Certo, conectores. Eles são encontrados aqui em Ações. Eles movem isso de um lado para o outro. Toda vez que eu gravo esse vídeo, ele está em algum lugar novo. Eles dão uma pequena olhada ao redor. Estamos procurando ações e vamos usar essa chamada plug-ins e widgets Então, vamos dar uma olhada nos plug-ins agora. Veremos os widgets mais tarde. Vamos dar uma olhada em algo que já sabemos , então veremos os ícones. Vou digitar ícones de heróis. Porque foi para isso que encontramos aquele documento comunitário. Na verdade, não importa, mas também existe um plug-in para isso, em vez de abrir o documento da comunidade, pesquisar os arquivos e depois trazê-los. Isso significa que conectar apenas um pequeno miniprograma executado na tela é mais fácil do que vasculhar arquivos Eu posso entrar aqui e dizer, eu quero a página da conta. Eles têm uma conta, vamos em frente. Não há conta. Estou procurando uma pessoa. Homem. Eles ainda têm um? Pessoa da conta, homem, mulher, ninguém. Vá lá, Brain. Vamos desistir. Vamos reservar. Ok, então há um livro. Vamos usar esse marcador Então, o que você pode fazer é clicar e arrastá-lo para fora e você terá um ícone pronto para usar. Olha isso. Super legal, super rápido, super fácil. Lembre-se de que ele apareceu em um quadro com um vetor dentro. Não há nada de errado em ter uma moldura. Acho que nos últimos dois vídeos eu pensei Livre-se da moldura”. Não, é como um grupo. Tem o vetor dentro. Ele o mantém em um belo quadrado. Não há nada de errado com isso. Às vezes, porém, eles vêm com um fundo branco. Você pode ver como desligar o globo ocular para escondê-lo. Às vezes, eles chegam com ele e você pode desligá-lo. Às vezes, uma moldura é frequentemente usada porque vamos arrastar outra para que elas possam ser alinhadas. Você pode ver? Eles são vetores de tamanhos diferentes, mas vamos selecionar os dois. Eles estão na mesma praça, se você entende o que quero dizer? Isso é útil para ícones porque tem a mesma altura por largura, 24 por 24, pelo que parece. Você não precisa se livrar disso. Estou apenas fazendo com que você se conscientize da moldura porque o que está acontecendo é que vamos escolher outra coisa, vamos encontrar algo com bits. Lá vamos nós. Essa aqui, às vezes eu acabo fazendo isso e você fica tipo, Ok, eu quero me livrar dessa parte e depois dessa parte, e você acaba com o lixo que sobrou porque tem esse quadro que eu não apaguei aqui, eu posso ver isso. Não tem nada nele. Eu posso deletá-lo. Fazendo você se acostumar com isso. Você pode encontrar plug-ins de outras formas. Eu vou me livrar desses caras. Oh, você vê que eu fiz isso lá. Eu não me livrei das molduras. Eu me livrei do interior. Achei que sim. Eu simplesmente não arrastei uma seleção grande o suficiente ao redor deles antes de excluir. Então, vamos para a comunidade e vamos para os Modelos e Ferramentas, que costumavam ser chamados de comunidade, que eles ainda chamam de comunidade. E vamos aos plug-ins. Na verdade, há um conjunto que diz especificamente para encontrar plug-ins para organização de arquivos. Tem muita coisa aqui. Meu conselho para você é que, após este vídeo, passe 5 minutos dando uma olhada nos plug-ins. Você ficará surpreso com quantas coisas foram feitas para nós aqui na Figma É muito útil. Se há algo que você está fazendo repetidamente ou algo estranho em seu trabalho usando essa outra empresa, Splash ou algum site de biblioteca de estoque ou algum banco de dados, você provavelmente descobrirá que alguém criou um plug-in Há muita coisa aqui. Passe algum tempo, dê uma olhada na edição de efeitos. Em plug-ins, vamos lá. A razão pela qual essa forma é bastante útil é que muitas vezes você pode dizer que eu quero as gratuitas. A outra coisa útil aqui é, digamos, iconfy . Vamos fazer uma busca. Vamos, ícone, Pio? Era para ser uma empresa, mas há muitas pessoas diferentes. Eu digitei knifi em todos os produtos que eu quero mostrar plugins. Você pode ver essa iconografia, há outra iconografia. Você pode dar uma olhada e dizer: A, este foi usado por 23.000 pessoas, o que parece muito até você ver este e este ter sido usado por 3,5 milhões Quando você é novo, esse é um bom sinal. Tudo bem Muitas pessoas estão usando este. Esse é provavelmente o que eu quero. São os mesmos plug-ins. Podemos fazer isso de uma maneira diferente, seja por meio da comunidade ou por meio de nosso documento de design. Vou abri-lo em qual arquivo estamos trabalhando, estamos trabalhando nesse arquivo, e aí está meu plug-in. Aqui está. Você notará que todos os plug-ins são feitos de forma diferente, pois não há consistência. Eu te mostrar como usar este foi muito diferente do ícone do herói. Então, alguns deles são muito grandes como este, o que atrapalha. O outro herói con era bem pequeno. Este aqui tem alguns recursos interessantes como esse, se eu for, eu gosto desse aqui. Eu posso decidir de que cor é antes de entrar na Figma e posso decidir o tamanho que ela precisa ter Vai ser um SVG e eu posso importá-lo como um quadro ou como um componente Quando avançarmos mais tarde no curso, você poderá pular para isso. Então, isso nos poupará um passo mais tarde. Mas, no momento, sabemos o que é uma moldura. Nós vamos trazer isso para dentro. Para onde foi? Apenas na minha página, você pode simplesmente arrastá-los para fora como. Ok. Lembre-se de que eles não são fabricados pela FIGMA se não estiverem funcionando, pode ser que não sejam mais suportados ou sejam um novo plugue e haja uma pobre garota tentando manter o plugue ativo nos intervalos do almoço Então, às vezes você sente que, Oh, isso deveria funcionar, mas não funciona. Por que não está funcionando? plug-ins são feitos pela comunidade, às vezes por empresas, mas não pela FIGMA A única coisa aqui embaixo que eu quero mencionar é vamos encontrar outra. Vamos usar o Unsplash Uma opção muito boa para imagens de banco de imagens gratuitas. Se eu pesquisar isso, vou para plugins e widgets e, digamos, clique neste Eu me dá uma pequena prévia. Você tem Run and Save. Está bem? Corra é o que você quer. Ele só é executado dentro deste documento. Ok, eu acabei de começar a trabalhar. Esse é o que você quer. Salvar o salvará para sua organização, o que significa que se você estiver usando FIGMA como parte de uma equipe maior, como uma organização e uma grande empresa com vários usuários do Figma, você pode salvá-lo, e isso significa que todos terão acesso a Na maioria das vezes, porém, você só quer executá-lo. Lá vamos nós. Corte. Tudo bem, existem muitos plug-ins, e essa é sua introdução aos plug-ins. A última coisa é que, se você voltar para baixo e ficar aqui no painel de ações, verá que existem outras recentes, então você não precisa pesquisá-las todas as vezes. Tudo, é isso. Isso são plugues dentro do Figma. Veremos mais algumas cartas no curso, mas essa é uma boa introdução Vamos para o próximo vídeo. 19. Projeto do curso 03 - Ícones: Olá, não é lição de casa, mas sim um projeto de aula super divertido Quero que você encontre três ícones para o seu site. R, quero que você encontre um carrinho na imagem e um ícone de sucesso. Vamos dar uma olhada no meu. Então, o ícone do carrinho aparece em todas as páginas, aqui no topo, ok? E o ícone da imagem, vamos trocar pelas cruzes, ok? Portanto, é muito comum usar esse tipo de ícone de espaço reservado para imagem Iman de aparência genérica Ok, então eu quero que você troque isso onde você o usou. E também na página de confirmação, encontre algum tipo de bom trabalho. Você fez isso, ícone. Não precisa ser uma gravata. Pode ser uma gravata. Sua imagem pode parecer diferente da minha. Seu carrinho pode ser uma sacola de compras. Depende do seu produto. Você encontra um bom lugar para outro, você pode ter mais de três. Isso é bom. Mas algumas coisas que quero mostrar a vocês antes de continuarmos são um pequeno truque. Para aqueles que estão fazendo a lição de casa e não a pularam, vocês podem vencer. Eu vou copiar este. Preciso ter certeza de que pego o quadro que contém meu vetor ou apenas o vetor, se você o limpou Vou clicar em recursos. Clique no nome da página e eu clico em Colar. Vou entrar nessa página na mesma posição. mesmo com este, segure tecla Shift, pegue os dois e cole. Acaba nas duas páginas. Olhe para nós. É ótimo para navegações ou qualquer coisa que seja consistente em toda a página Consistente em muitas páginas. Imagine que você tenha, sei lá, 20 ou 30 dessas molduras para páginas diferentes do seu celular. Você pode colá-los em vários deles facilmente. A outra coisa que quero mostrar é que usei o IConfiPlug Você pode obtê-los no localizador de ícones. Você pode obtê-los de onde quiser na comunidade. Eu não me importo de onde você os compra. Agora vou voltar no tempo e mostrar alguns dos problemas que tenho, não conheço, apenas para continuar mostrando algumas das peculiaridades do Figma ao importar ícones Certo, deixe-me te mostrar agora. Então acabei usando o ícone Phi e apenas arrastei algumas versões dele Acabei nesta página aqui, e é aqui que é estranho. Vamos diminuir o zoom. Digamos que eu vou arrastar este até aqui, funcionou bem. Os vetores dentro da moldura, vou deixar assim, e estão lá em cima Este aqui, vou arrastar o vetor que saiu desse quadro, o quadro ainda está aqui embaixo. É apenas uma das coisas estranhas do FIGMA. Tudo bem. Estamos nos acostumando com isso. O que torna isso estranho é que, se eu clicar nesse vetor, é um vetor dentro dessa coisa chamada sucesso Ix De alguma forma, cliquei no vetor e não no quadro. Se eu clicar na moldura e depois arrastá-la para fora, obtenho a coisa toda. Às vezes você pode cultivar o vetor e não obtê-lo, Dan. A outra coisa a notar é que esse primeiro, eu vou desfazer Este ícone aqui está dentro da minha página de recursos porque parece que está. Olha, aí está lá. Esse outro, se eu clicar neste aqui, o sucesso, está na verdade pendurado no meu painel de camadas, não dentro dos recursos. Está apenas no topo. Imagine que se você conhece camadas, você saberá. Mas se você não tiver, significa apenas que parece que está em cima dela, mas na verdade não está dentro dessa moldura principal, que é chamada de recursos. O que vou fazer é apenas algo a ser considerado e continuarei lembrando você da e continuarei lembrando você aula, porque é aí que somos pegos O que vou fazer é dizer que você seleciona toda a moldura principal e, em seguida, vou arrastá-la. Ok, agora está completamente apagado. Isso é bom. O mesmo com este. Ele saiu das feições, então ele não está mais lá, e então esse aqui, eu pego o vetor novamente por acidente, vou pegar a moldura principal e arrastá-la para Agora esses caras estão saindo, não tocando nada, e eu vou ser um pouco mais específico. Às vezes, é mais fácil ampliar porque é mais fácil pegar os pequenos nomes. Nesse caso, é um ponto pontilhado porque é bem pequeno. Vou acrescentar isso a uma última coisa que quero mostrar a vocês é que pego três diferentes Eles eram da mesma família. Eles combinam em termos de tamanho. Mas esse não. O que eu vou precisar fazer é arrastá-lo para cima e ser um pouco maior. A razão pela qual isso aconteceu é 24 por 24. Esse é 24 por 24. Este chegou aos 16 por 16. Agora eu posso usar meu esqueleto, basta arrastá-lo para cima. Deve estalar e pegar. Aí está, 24 por 24. Agora é do tamanho certo. Você pode selecionar no quadro principal e dizer, na verdade, que você vai ter 24 anos. Veja que diz dimensões por e, como a altura e a largura estão bloqueadas, elas são chamadas de proporção. Eu farei as duas coisas ao mesmo tempo. Isso foi útil? Eu tenho que adicionar essas coisas porque sim, há algumas peculiaridades Os mais fáceis de se acostumar com eles. Eu quero jogá-los aqui para o caso de você se perder. E o que eu poderia fazer para tornar isso um pouco melhor é o que eu vou dizer Vou chamar esse ícone de corte de hífen . Esse aqui. Talvez você possa clicar duas vezes neles aqui ou no painel Las. Essa será chamada de imagem de ícone, e essa aqui será Não clique nesse botão. Isso é o que vamos remover. Ou seja, um pequeno ícone, se você clicar nele, que diz ao desenvolvedor quando você terminar este curso, eu terminei com isso e está pronto para ser desenvolvido. Quando está desligado, significa que não está. Você clicará nele acidentalmente, como eu fiz. Falaremos sobre o modo Desenvolvedor um pouco mais tarde, e vamos chamar isso de sucesso ou tecnologia. Isso realmente não importa neste estágio. Vou colocá-los no meu documento e agora movê-los como você viu no início. Eu quero você lá. Na verdade, este não precisava ter esse tamanho porque vou usá-lo muito mais para trabalhar e concluir o projeto. Te vejo depois do projeto da aula. 20. Como usar páginas no Figma: Tudo bem, pessoal. Neste vídeo, vamos ver o empolgante mundo das páginas. Eu quero ter seu próprio vídeo porque há algumas coisas nele. Quero agregar um valor extra, e precisaremos disso porque, no momento, estamos começando com apenas uma página, nosso wireframe móvel, mas vamos adicionar várias outras páginas para manter nossa personalidade e nosso fluxo de tarefas Teremos esta página em que estamos trabalhando atualmente em uma versão para desktop, e também quero mostrar porque você pode acessar uma página com a qual você pode ir muito longe, mas eventualmente acaba com coisas assim. Este é mais um projeto do mundo real da minha parte. Fica confuso, você acaba tendo muitas páginas diferentes. Em vez de apenas uma página com todo o lixo, você precisa separar as coisas para ter grupos diferentes de conteúdo para tornar as coisas um pouco mais fáceis Nós vamos fazer isso no curso. Vamos começar e aprender páginas em figma Vamos. Tudo bem, páginas. Você recebe a página um por padrão. Se você não consegue ver, você pode estar usando ativos. Verifique se você está registrado e veja a primeira página. Você pode ir muito longe com um documento. Você não precisa de páginas, é o que vou dizer. No entanto, você precisa entendê-los, porque sim, eles são úteis com páginas extras Além disso, quando você está trabalhando com documentos de outras pessoas. Vamos dar uma olhada agora e verificar se você está registrado. Vamos nos chamar de um. Em vez da primeira página, esta é móvel e será wireframe, não Wi-Fi Vamos adicionar uma nova página. Estamos no pequeno botão de adição. Vamos chamar isso de desktop. Provavelmente vamos pular os quadros Y. Vou chamar isso de um desktop e você tem duas páginas. Parecem páginas, mas são apenas molduras. Vamos para o desktop e vamos criar algumas páginas. F é o atalho para a ferramenta de moldura ou segure-a lá embaixo Vou até aqui e vamos mudar de tablet, desktop, vamos para pug, desktop , esse 1440 por Não sei por que você precisa dizer 1024, mas é assim que todos se referem a esse tamanho Não 1024 por algum motivo. Ok, quantos deles querem quatro. Vou usar minha opção em um Mac em um PC. Apenas arraste este para fora. Eu tenho dois ou você pode usar seu copiar e colar. Basta clicar primeiro no nome na parte superior e depois clicar em Comando. Quem se lembra de qual duplicador? Isso mesmo. Bom trabalho. É Command D no Mac Control D no PC. Eu tenho quatro deles. Em seguida, vamos para o atalho Shift Mantenha a tecla Shift pressionada e aperte um. Isso cabe tudo na página. Eu gosto disso. Vou acelerar isso porque vou copiar e colar. Na verdade, eu sei o que é essa, página inicial. Deixe-me copiá-los e colá-los para que correspondam. Você espera lá. Eu só vou alternar entre este e este O atalho para ir entre as duas páginas é apenas a página para cima, página para baixo no teclado Você pode ter avisado a tecla de função se estiver em um laptop. Eu copio o que havia escapado para sair dela, página abaixo. Isso é doloroso. Vou pular isso. Vamos pular até o fim. Vamos criar uma terceira página. Este será um sucesso, e este será uma persona e um fluxo de tarefas Agora, nesta página, quero que ela fique no topo, para que eu possa clicar em segurar e arrastá-la, para que ela fique na parte superior e não precise ter uma moldura. Eu só vou me despejar dos arquivos de exercícios. Vou citar o exemplo da minha personalidade. Você deve ter sua captura de tela ou baixada anteriormente Vou diminuir um pouco o zoom e depois adicionar meu fluxo de tarefas. Aqui, há dois fluxos de tarefas. É a versão da P&G, que é como uma captura de tela. Nós podemos usá-los. Troque um para espremer todos eles. Portanto, há um ótimo lugar para manter o resumo e o que estamos fazendo no documento. Como você pode ver, esses caras não precisam de molduras para usar. que eu quero mostrar é que, se o fluxo de tarefas no momento for PNG, é fácil de adicionar, mas veja, queremos adicionar o arquivo Figma de outra pessoa Você o baixou, encontrou, está no disco rígido, alguém o compartilhou com você. É mais fácil compartilhar um link para o arquivo, mas as pessoas compartilham os arquivos Figma, o arquivo real, você pode salvar uma versão local Eu fiz isso em arquivos de exercícios. Vou te mostrar no Hope and One. O que vamos fazer é voltar para casa e vamos até esse pequeno ícone aqui, Importar, e vamos importar do meu computador. Vamos descobrir arquivos de exercícios. Vamos dizer dot FIG. Você vê isso aí, não o wireframe. Vou pegar o ponto do fluxo de tarefas FIG. Eu quero este porque é um arquivo funcional. Eu inseri ou está aí? Isso, em vez de uma imagem, são na verdade todos os retângulos e outras coisas Em vez dessa imagem, eu posso copiá-la, voltar para o meu Comando 2, até mesmo para voltar a isso e me livrar desse PNG e simplesmente colar os arquivos reais, porque então podemos alterá-lo, modificá-lo, corrigi-lo, corrigir ortografia terrível e escolher novas cores Depende de você, mas eu também queria mostrar como importar os arquivos Figma de outras pessoas quando eles são um arquivo físico Compartilharemos adequadamente mais tarde. Por que nos preocupamos em ler as páginas? Eu mencionei no início, mas quero mostrar um outro bom exemplo. Eu vou para casa, vou para os modelos. Vamos ver, digamos que você esteja criando um aplicativo IOS, IOS, vamos pressionar Enter. Vamos encontrar um que tenha, para o IOS 17, vamos abrir isso. E o que você encontrará está aberto e a Figma, que sabemos que concordaremos nos dará uma cópia local de nossa própria versão Na verdade, não estamos trabalhando nisso, agora é a pessoa que fez isso. Agora estamos trabalhando na versão em que, se eu for para casa e for aos meus artigos recentes, aí está ela Na verdade, está no meu computador agora. Mas quando eu estou nele, você fica tipo, Oh, é bom. É muito confortável. Não há muita coisa acontecendo. Mas então você vai verificar se os arquivos estão abaixo das páginas. Olha, capa. Registro de alterações. Começando. Mas veja isso. Eu posso rolar para baixo e há muitas páginas para este documento em particular. Obviamente, o sistema operacional para dispositivos móveis é enorme. Então, podemos descer e dizer, na verdade, você pode ver o que eles fizeram foi agrupá-los Em vez de dispositivos móveis versus desktops, eles sumiram, eu quero ficar bem. Vamos encontrar algo interessante. Vamos dar uma olhada nas notificações. Super interessante. Mas aqui está uma página dedicada a links para as diretrizes para eles e outras coisas que você pode começar a usar. Eles são um pouco complicados agora porque estão em algo chamado componentes, mas vamos aprendê-los. Você vai se acostumar com eles mais tarde. Mas isso apenas lhe dá controle de página. Olha isso. Todos os pontos de que você precisa ao deslizar os popovers. Então, veja. Ah. Isso é somente para iPad, mas você pode começar a ver pessoas agrupando coisas em páginas e, quando você é novo, pode não encontrá-las ou ficar um pouco confuso ou perdido. Há muitas coisas escondidas nas páginas aqui. Tudo bem, vamos fechar isso. Vou voltar para cá e manter tudo limpo. Você não vai. Você vai ter um monte de lixo espalhado por aqui. Tudo bem. Vou entrar aqui e dizer, para me arrumar para este curso, remova o lixo Excelente. É isso mesmo. Fizemos um vídeo inteiro sobre como adicionar uma página. Bom trabalho, Dan. Espero que tenha havido algo útil para você e nos vemos no próximo vídeo. 21. Como criar protótipos no Figma: Oi, pessoal. Neste vídeo, vamos criar um protótipo Um dos recursos poderosos do Figma é poder simular nossos designs e testá-los em pelo menos um telefone virtual e, posteriormente, em um telefone físico, onde podemos clicar em nossas diferentes páginas e verificar como está funcionando Podemos colocá-lo em um tamanho mais apropriado. Podemos verificar os tamanhos e podemos manter isso aberto, continuar trabalhando e testando até o fim. É chamado de prototipagem Vamos começar e aprender o básico. Certo, em primeiro lugar, mude um para que, na tela, mudemos para essa opção aqui chamada protótipo Você alternará bastante entre design e protótipo e provavelmente ficará um pouco perdido no início , porque o protótipo, se eu clicar aqui agora, ele perderá todas as coisas do design, então a cor, a fonte e os tamanhos Então, fique atento. Vou lembrá-lo durante o curso. Vamos clicar em Protótipo. Vamos clicar nesse primeiro quadro. Você clica no primeiro título do quadro, vamos selecionar a página inicial. O que vamos fazer é ver essa voz pairar em torno desse ponto que aparece nos cantos aqui O que eu posso fazer é dizer, clique em Manter e arrastar. Vá lá. Por padrão, só vai dizer que tudo isso vai ficar bem. Diz: O gatilho será que, quando eu tocar, eu vou navegar para a página de recursos instantaneamente Vamos fazer a página de recursos. Esse, basta arrastá-lo até aqui. Você pode arrastá-lo de volta dessa maneira. Você pode arrastar tudo para ver essas coisas aqui, elas são chamadas de macarrão ou fios, e vamos arrastá-las dos recursos para esta página Então, quando finalizarmos a compra, vamos rolar a barra de espaço e arrastá-la até esta Vamos usar todas as interações padrão. Tudo bem. Prepare-se. Você está pronto para criar um protótipo? Você faz isso apertando este pequeno botão aqui no topo O pequeno botão play. É chamado de presente. Pronto, carregando. Aí está. Está em um telefone. Não é bom. Aqui está todo o meu logotipo e outras coisas presas nele. Abordaremos isso mais tarde. Ok, assista essa luta. Clique uma vez. Eu vou para a próxima página. Próxima página. Próxima página. Oh, muito emocionante. E então não vai a lugar nenhum porque não temos para onde ir quando terminar. Tudo bem. O que você deve observar ao lidar com essa visualização de protótipo é que, na verdade, ela está aberta em outra guia Então, aqui está a guia em que estamos trabalhando. Tudo o que ele fez foi que, quando tínhamos o botão play, ele abriu nosso design na guia. Algumas coisas que vamos ver são assistir isso. Não há nada aqui no momento, mas se você der uma grande sacudida do mouse, sacuda o gabarito ou clique no Eu vou dizer, olha, todas essas outras opções aqui. Os principais que você examinará são reiniciar. Você vê aqui embaixo, Restart ou o arche. Vamos voltar ao início para que possamos repassá-lo novamente. Adorável. Há mais opções aqui. Você pode usar a tela cheia para se livrar do Chrome se quiser que ele o apresente a um cliente. Clique nisso novamente. Há mais opções aqui. Eu não vou passar por tudo. A única outra coisa que você pode fazer é ter uma maneira manual de passar por isso também. Então, apenas para frente e para frente através do OK, você pode deixar isso aberto. Você não precisa fechar isso depois de terminar. Você pode simplesmente deixá-lo lá e ele estará ativo. O que acontece é que, se eu clicar aqui, você notará que não consigo ver a cor. Por que não consigo mudar a cor, Dan? Sim. Isso mesmo. Estou fazendo um protótipo, vou desenhar. Aqui embaixo, vou escolher uma nova cor. Eu só vou arrastar qualquer coisa velha para lá. E se eu voltar para a prévia, na verdade não preciso lançá-la. Eu posso reiniciá-lo e você pode ver que estou de volta aqui, posso ficar aberto. O que eu costumo fazer é clicar e arrastar essa guia. Eu posso movê-lo e dizer, certo, eu quero que ele esteja do lado direito aqui. Eu posso trabalhar neste lado, que está um pouco confuso agora. Mas é uma atualização ao vivo. Eu posso dizer isso. Na verdade, eu quero voltar para aquela cor original. O que foi desfazer, desfazer, desfazer. Você pode ver que está sendo atualizado aqui. E o que eu faço ainda mais é menos lado a lado. E o que eu faço é arrastar isso e abri-lo. O que eu vou fazer é fechar isso. O que eu normalmente faço é visualizá-la e, na verdade, pegar essa guia Você pode arrastá-la do navegador para minha outra área de trabalho que você não consegue ver. Estou fazendo exatamente a mesma coisa. Ouvindo meu outro documento. Depende de você. Eu vou fechá-lo. Outra boa forma de pré-visualizar está aqui, tem outra Então, em vez de apertar o botão play, há um botão de visualização Está bem? Então você clica nesta pequena Chevron aqui, nesta pequena seta para baixo, clica em pré-visualização, e ela se abrirá em uma pequena janela que pode ser movida Só está lá fora. É muito grande. Eu posso reduzi-lo para uma melhor visualização do meu telefone. O que isso é realmente útil está aqui, posso dizer, então estou trabalhando no tamanho do clique em Recursos Você pode ver as atualizações? Eu clico aqui e o texto do produto é muito pequeno. Eu passo por aqui e digo bup bup, bup, você pode ver que ele é Vou aproximá-lo, você pega a parte superior, pode começar na minha visualização panorâmica, eu posso ampliar bastante, trabalhar em coisas e dizer, certo, como é em termos de tamanho da fonte em tamanho da fonte Não estou projetando o tamanho errado. Porque você vê que 99 é muito pequeno. Então eu vou entrar aqui, fazer um grande, grande, grande, grande, maior, maior, maior. Você entendeu a ideia. Clique com Shift, bonito e grande. Novamente, você pode reiniciá-lo e fechá-lo quando terminar. Vou voltar ao meu modo de protótipo. Você pode excluir esses fios clicando neles e pressionando Excluir no teclado, apenas excluindo-os fisicamente Clique no quadro em si , clique aqui e clique em Excluir se quiser se livrar deles. Vou desfazer o desfazer porque vamos excluí-los Isso é o que eu quero fazer. Exclua aquele cara, você come lá. Na verdade, vou colocá-los de volta porque quero mostrar algumas outras coisas interessantes que talvez o surpreendam. Se eu estiver na finalização da compra e vou jogar, na verdade, acabou, sim, tudo bem Se eu clicar em, você a alterou da visualização para a apresentação. Qualquer um, qualquer quadro que você selecionou , é o primeiro que vai aparecer Você pode ver que acabei de finalizar a compra você está tipo, essa não é a primeira página Significa apenas que qualquer um você esteja trabalhando será apresentado primeiro. Se você quiser que seja a página inicial da primeira, eu reinicio, ela estará nessa página Uma coisa que ele não pode fazer é não permitir que excluamos isso no Direction. Você não pode se conectar a outra página. Ainda estou no modo protótipo. Eu posso clicar na página inicial. Eu posso ver isso como um pequeno ponto. Você pode fazer isso em qualquer um dos lados. Não importa se você quer que ele apareça no topo, simplesmente vai automaticamente para alguns lugares, mas você não consegue fazer com que ele vá para outra página. Não gosta disso. Então você tem que ir para outro quadro, tudo bem. Você vê que eles se soltam muito cedo, então você que ela se arraste e o que as pessoas perguntam é que às vezes você não tem a moldura do celular, então eu vou até a página inicial e você Como comprei o celular ou talvez eu não queira um iPhone, quero um Android ou outra coisa No modo protótipo, clique no plano de fundo, para que você não tenha nada selecionado e aqui você pode ver as configurações do protótipo Você pode querer um telefone antigo, você estará no futuro. Você só pode estar no futuro. Você provavelmente tem um 17, 18, 19, você pode dizer, certo, eu quero um Google Pixel 2 da Idade das Trevas. Então, quando eu tiver um presente, ele vai usá-lo como moldura. mesmo para o desktop, vamos para o desktop, sem nada selecionado, você pode acessar. Acho que mudei a minha. O seu provavelmente não está em nada. Eu coloquei o meu no Macbook Pro porque parece legal. E quando eu visualizo esta página, não há nada nela. Não é muito empolgante, mas está neste MacBook Pro. Vou voltar para o meu celular. Você pode alterá-lo para horizontal e vertical. Eles não funcionam muito bem pois é muito incomum projetar para dispositivos móveis com paisagem vertical, a menos que você esteja projetando especificamente um aplicativo para fazer isso Muitas vezes, ele assume o formato de um tablet, não é pré-visualizado muito bem porque fica comprimido lá dentro Lo, aí está. Tudo bem, é isso. Isso é prototipagem básica. Faremos algo um pouco mais empolgante do que o próximo. Vamos excluir as interações. Então, estou clicando neles e apenas excluindo-os. E diga adeus ao macarrão. Muitas pessoas não os chamam de macarrão de navegação. Pode ser só eu, então tenha cuidado ao entrar na reunião e falar sobre macarrão De qualquer forma, vamos para o próximo vídeo. Vamos conectar os botões. 22. Animação e easing de protótipos no Figma: Olá. Neste vídeo, veremos como adicionar interações aos botões e quando clicamos neles. Tudo isso não funcionou. Vamos clicar neste. Você pode ver que vamos adicionar alguma animação à transição entre os diferentes quadros. Faremos com que a navegação funcione na parte superior aqui, saiba mais. Oh, um pouco Ok, então vamos adicionar interações aos botões e adicionar algumas animações entre eles. Tudo bem, para começar, verifique se você está no modo protótipo e se livrou do macarrão antigo Então eu vou me livrar de você, você e você. Tudo bem, e troque um para que possamos ver todos eles. Tudo bem, então fizemos transições de página ou páginas e direções O que vamos fazer agora é na verdade, fazer isso com os botões. Vamos clicar no botão Até agora, verificar se você está no protótipo, e você verá os pequenos pontos aqui, como fizemos em todo o quadro, onde parecem que podemos arrastar Nós podemos fazer isso por qualquer coisa. Olha, o texto aqui, tem um ícone. Temos esse botão aqui. Quero que, quando o botão B agora for clicado, clique em segurar e arrastar e arrastar até a página de pagamento Ignoramos a página de recursos. Vamos fazer um teste com isso. Mude a barra de espaço para abrir aquela pequena prévia Com isso, vou te levar para lá. Quando eu clico em Até agora, ele pula para a página de checkout, pula a página pula a Incrível. Vou diminuí-lo para que possamos ver as coisas. O outro Bem, na verdade, antes de prosseguirmos demais, vou clicar para reiniciar. Não consigo ver os botões. Esse é um bom ponto a ser destacado. Estamos projetando para o I'm scrolling up para o iPhone 16 E os botões estão bem. Veja-os, mas talvez seja necessário oferecer suporte a modelos mais antigos de telefone. Talvez seja necessário verificar quais são os telefones mais comuns atualmente, quais são os tamanhos e testar alguns deles para ter certeza de que se eu voltar a isso, onde está? Pixel dois, se esses botões estiverem abaixo da tela, a tela inicial é chamada abaixo da dobra. É assim que eles chamam isso. Termo de impressão antigo em que eu não consigo vê-los e não tenho tanta probabilidade de encontrá-los porque eles precisam rolar aqui. O que vou fazer é que eles possam rolar no telefone. Mas aqui, o que eu posso fazer é assistir isso. Eu posso pegar esses dois. Uma coisa interessante dentro do Figma é que , se eu estou no protótipo, não no design, ainda posso mover as coisas Não consigo mudar a cor dela. É difícil agarrá-los. Peguei um monte de coisas lá. Não sei o que pegaram. Estou pegando que você pode movê-los. Vá lá, Dan. Vou ampliar. Claramente, não é tão útil no modo protótipo, mas você pode mover as coisas Você pode ver minha pequena prévia? Eu fico tipo, eu quero que eles estejam lá. Isso significa que eles podem ser vistos no iPhone 16 e neste telefone antigo. E o que mais podemos fazer? Vamos fazer esse botão. Agora, tenha cuidado de onde você está selecionando o protótipo. Você pode clicar no texto e enviá-lo para criar um protótipo em nossa página de recursos, e isso funcionará A área de clique, o que eles precisam clicar é o texto, que é muito menor do que o botão real. Então, vou desfazer isso e me certificar de que estou clicando no botão Eu quero que tudo isso seja um botão. Estou apenas clicando, segurando e arrastando. A próxima coisa que quero mostrar a vocês é a animação. Então, por padrão, está no Instant. O que eu gostaria de fazer é que, quando o botão Saiba mais fosse clicado, eu gostaria que ele fizesse algo um pouco mais interessante, como Dissolver. Dissolver é. Se você passar o mouse sobre esse pequeno polegar agora aqui, ele lhe dará uma pequena Dissolver é claramente muito fácil de entender. Ignore a animação Há várias animações diferentes aqui. Faltam os melhores do mundo , Page Peel. Mas faz com que seus clientes regulares entrem e saiam. Deixe-me demonstrar. Eu quero passar por lá, você pode explorá-los. Vamos fazer a diferença entre, digamos, entrar. Você vê? É muito emocionante. Estou pairando sobre ele, desliza para lá. Cuidado, há algo um pouco mais especial de empurrar ou deslizar. Eu gosto bastante. Você vê o slide entrar, eu empurro o outro e o dissolvo ao mesmo tempo O branco lá é empurrado para fora. Na verdade, vamos pré-visualizá-lo. Aqui, eu posso clicar sobre isso. Você pode ver o outro movido para a esquerda e dissolvido enquanto este, o segundo quadro, se moveu para dentro. Essa é muito legal. Algumas das outras coisas a serem observadas são: vamos ver a direção. Podemos fazer com que vá do outro lado. Eu vou bater. Estou clicando aqui, pressionando Alpha reset. Eu vou um pouco mais. Você pode vê-lo empurrando pela esquerda. Eu vou voltar para a direita. Você pode subir ou descer. Vamos falar sobre a curva. Facilitar é o padrão, e isso significa que ele chega muito rápido e fica mais lento no final. Isso facilita. Se você quiser que ele chegue muito devagar, quiser que ele entre com facilidade e , no final, seja rápido, você pode usar o recurso de entrada fácil. Você pode fazer as duas coisas. A facilidade de entrada e saída geralmente é apenas um bom padrão. Eu gosto disso. Lento no início, rápido no meio, lento no final. Algumas das outras boas são a facilidade de entrar e sair de casa. Isso tem um pequeno salto novamente. Assista a isso para saber mais. Tem isso o que você chama de antecipação da animação Ele entra e vai um pouco além de onde precisa estar, salta um pouco. Eu gosto disso. Você pode brincar com eles. Você não tem permissão para usar o Bouncy. É legal. Então experimente o Bouncy Fazendo isso, você tem permissão para fazer isso. Vou usá-los na parte de trás. Vamos ver a duração. A duração é exatamente o tempo necessário para que toda essa animação participe. Milissegundos, MS, há 1.000 milissegundos em 1 segundo, então é 1 segundo aí mesmo Então você quer que seja mais longo, você quer que seja 1 segundo, 0,3, você pode fazer isso e assistir isso. É isso. Não mais. Demora muito mais. Você calcula seu tempo. No entanto, os padrões são muito bons. Eu vou voltar para 400. Você definiu. Eu o arrasto. Provavelmente um pouco rápido, na verdade. Eu vou para 700. Aí está. Agora, vamos fazer alguns dos outros que temos Até agora trabalhando, saiba mais. Você pode simplesmente selecionar tudo, então você não precisa ter nada selecionado. Vou diminuir o zoom, mudar um. Veja tudo. Eu o fecho. E você não pode selecionar nada clicando no plano de fundo e depois em Selecionar tudo, é editar Não sei o atalho Lá está Selecionar tudo ou Command A em um Mac Control A em um PC, e você pode ver todos os diferentes macarrões Você pode vê-los lá? Há dois. Então, quais outros eu preciso? Na compra no botão. Vamos adiar isso, eu comprei. Parabéns. E o que ele fará é se lembrar da última coisa que você fez. Ele vai deslizar usando toda a curva e duração. Perfeito. Outra dica é que ficamos presos. Lembre-se, deslize a barra de espaço para abrir a pequena pré-visualização ou você pode apertar um pequeno botão de reprodução aqui, você decide. Vou até “Compre agora”. Chego nessa parte e fico preso. Não há nenhuma maneira real de eu fazer outra coisa. O que fazemos? Leve-o até lá. Pegue a parte branca para arrastá-la. É muito comum que o logotipo seja clicado para voltar à página inicial. Vamos fazer isso. Estou bem perto e preciso disso para ir para a página inicial Obviamente, eu poderia diminuir o zoom e arrastar o fio ou o macarrão Mas seus projetos ficam muito, muito complexos. Às vezes, você simplesmente sabe para onde ele precisa ir, mas não quer ter que diminuir o zoom e tentar arrastá-lo por todas essas coisas, que é arrastar, arrastar, o que você gosta de fazer Pode ser um pouco chato. O que você pode fazer é fazer isso manualmente. Com a seleção, você garante o protótipo. Você pode ver as instruções aqui. Você pode adicionar um sinal de adição ao lado dele. Tenho uma nova interseção. O gatilho está ao clicar. Quando essa coisa for clicada, a ação será abordada mais tarde Mas vamos dizer que eu gostaria que ele navegasse até. Qual destino? Bem, olha, aqui está nas minhas páginas. Quero que ele navegue até minha página inicial. Que tipo de animação eu vou fazer com que ela se dissolva. Vou deixar tudo padrão. Você pode fechá-lo e ver que o fio está caindo aqui. Às vezes, é mais fácil fazer isso manualmente. Então, é bom ir agora. Isso volta para lá. Mais. Não. Não posso voltar. Eu não fiz isso nesta página. Eu fiz isso apenas com esse logotipo aqui, mas não com esses dois. Esse é um bom ponto. O que você pode fazer é simplesmente trabalhar da mesma forma para todos eles. Ou o que você pode fazer é excluir esse. Exclua esse. O que você notará é que você pode fazer algumas coisas básicas de design dentro de um protótipo Acho que discutimos isso. Nós fizemos. selecionar isso e copiá-lo. Eu selecionei na página de confirmação que copiei usando meu atalho e vou clicar em Checkout, para saber para onde ir e depois colar Veja, ele foi para o lugar certo. Já falamos sobre isso antes, mas também compramos por meio da interação. Não funciona quando você está no design. Veja isso, se eu clicar aqui e copiar, vou até aqui e colo e depois volto ao protótipo Eu trabalhei. Nunca costumava ser. Agora funciona. Viva. Eu sabia disso. De qualquer forma, você pode copiar e colar elementos e eles trazem as interações com eles. Agora devemos ser capazes de ir aqui e voltar. Vá para a página Até agora, é compra, volte para a página inicial Oh, estamos fazendo isso. Estamos prototipando Preciso atualizar um antigo, como esse aqui, acho que não faz a mesma coisa, você pode clicar nele ou na verdade, talvez seja esse. Você pode clicar no fio e vê-lo embaixo ou pode alterá-lo aqui. Isso não importa. Se você quiser ver um pouco mais aqui, clique nele e ele se abrirá com todas as coisas que aparecem quando você clica no fio aqui. Tudo bem. Então, faça uma pequena experiência com as diferentes animações. Está bem? Você sabe, tudo isso. Infelizmente, não há nenhum peeling de página como todos nós adoramos. Acho que foi considerado ilegal na maioria dos países. Então, sim, é isso. Experimente, não mexa com animação inteligente. Tenha uma boa ideia. Editor, você pode nos sair deste vídeo usando o super lindo peeling de página? Vamos. Eu disse, faça isso. Aí está. 23. Como adicionar a barra de status do iOS no Figma: Oi, pessoal. Neste vídeo, vamos ver a barra de status, que é a hora, a bateria e o sinal Wi-Fi. Vamos adicioná-lo ao nosso modelo porque, no momento, ele está sendo agrupado aqui no iPhone 16 Vamos adicioná-lo para que tenhamos um pouco de espaço para que possamos evitar a caixa de correio, o janela. Não me lembro como se chama. De qualquer forma, queremos evitar a câmera que aparece pela tela na maioria dos novos telefones. Tudo bem, vamos começar. É chamada de Barra de Status. Tudo bem, então vamos fazer isso juntos. Eu faço isso há um tempo, então vamos descobrir. Eu vou para casa. Vou acessar ferramentas e modelos e presumo que consigo digitar no IOS É chamada de barra de status. Está bem? Estou usando o IOS porque estou usando o iPhone. Você pode usar a barra de status do Android. Está bem? E então a maneira como eu decido qual usar é, eu não sei. Basta começar a olhar para eles, ver qual deles parece bom. Tem muitas curtidas, muitos downloads. Provavelmente há mais. Não me importe o suficiente. Vou pegar um, abri-lo, ver se consigo pegar o IOS 7, dar uma olhada na barra de status. Aí está lá, então vou dizer que, na verdade, parecem partes da barra de status, dê uma olhada. Oh, tudo bem. Eles têm muitas opções. Vamos escolher apenas o básico. Estamos fazendo no escuro ou na luz? Precisamos do escuro. Vou copiar isso, ir até aqui e vou dizer, vamos fazer isso na página inicial. Vamos para a página inicial, voltemos ao design e eu vou para. Primeiro de tudo, eu sei que vou ter que reduzir tudo isso. Você não precisa adicionar a barra de status. A primeira coisa aqui é que seu desenvolvedor não vai querer isso, mas quando você está pré-visualizando, pode ser um pouco estranho não tê-lo Aqui vamos nós. Estou baseando isso lá em cima Perfeito. Eu provavelmente vou fazer isso. Vamos dar uma olhada na nossa prévia e garantir que temos, vamos dar uma olhada, está lá em cima. Vamos trocar os telefones. Vamos voltar. Vamos ao protótipo Vamos entrar aqui e voltar para o iPhone 16, que está lá no topo. Agora vamos pré-visualizá-lo melhor. Porque é colocado no “como eles chamam isso”? A pílula, não, a caixa de correio, a porta. Não consigo me lembrar. Mas agora temos nosso Nav aqui. O que costuma acontecer, especialmente na web móvel, é que você não precisa dela porque o navegador acaba pressionando-a para baixo de qualquer maneira, e há um pouco de cromo do navegador na parte superior Mas para o nosso modelo, acho que é bom. Nós resolvemos isso juntos. A única coisa que podemos fazer é : eu quero isso? Eu realmente não quero isso. O que podemos fazer é selecioná-lo e ir para o design e talvez apenas dar a ele uma cor de preenchimento, para que, quando estivermos projetando, possamos contornar isso. Posso arrastá-lo para cima? Oh, eu posso. Bem desenhado A única coisa, porém, é que quando você começa adicionar componentes complexos de outra pessoa, isso traz algumas coisas. Essa coisa aqui é uma instância de um componente, que você ainda não sabe o que é. Então você só tem que ter cuidado, você pensa, eu realmente preciso disso? Pode ser. Há uma opção de modo escuro. Olha, modo claro, modo escuro. Esse é o material que também seremos capazes de construir. O mais interessante é que, na verdade esses ícones estão sendo retirados deste documento aqui Há uma maneira de fazer isso no figma. Vou incluí-lo aqui no curso só porque você acabará fazendo isso. Você dirá: eu quero que você pegue de outra pessoa e ele comece a extrair outros documentos, o que pode ser um pouco confuso O que você pode fazer é selecioná-lo. Você pode clicar com o botão direito do mouse e dizer: “Eu gostaria de separar essa instância”, e você pode fazer o mesmo com todas elas Todos esses pequenos diamantes estão vinculados ao documento original Eu também posso ir até você e desanexar Instance. Agora é apenas parte deste documento, o mesmo com este. Essa é uma maneira um pouco rudimentar de fazer isso , pois seria ótimo se você soubesse o que são instâncias e componentes, o que você fará mais tarde Mas eu não quero me aprofundar muito nessas coisas agora. Só quero jogar coisas aqui e colocar um pouco disso aqui para que, se você estiver pulando na frente, tipo, eu vou pegar isso, eu vou pegar aquilo Você acaba com alguns problemas , sabe que não é você, é só que seu conhecimento atual ainda não chegou. Mas não se preocupe, chegaremos a isso. Nós temos isso. Eu quero isso? Eu vou tirá-lo. Curso. Você pode fazer isso. Você está totalmente autorizado. Ok, mas eu vou tirá-lo para o resto disso. Só estamos facilitando as coisas, cara. Aí está. E vamos seguir em frente. Para onde foi a linha ao redor do meu botão? Hm. Sempre desapareceu? Tem. Está te irritando, não é? Não tenho ideia de quando isso acabou. Tudo bem, não é É assim que você pega a barra de status e mexe nela para que você possa visualizá-la um pouco melhor Certo, vamos para o próximo vídeo. Esqueça que esse vídeo aconteceu. Acho que essa é a moral da história de hoje. Tudo bem, próximo vídeo 24. Como testar no seu celular com o Figma Mirror: Olá. Este é o outro lado do meu escritório. Você normalmente olha daquele lado para o outro lado. É assim que parece meu lixo e minhas placas de som para tentar fazer com que soe bem E é noite. Não é meio mal-humorado. Na verdade, está escuro. São cerca de 11:00 da noite e estamos fazendo cursos para nós E neste vídeo, vamos ver algo chamado espelho Figma. O que é isso? É uma forma de testar nosso Você sabe, estamos no computador tentando criar um site para telefone, um site que prioriza dispositivos móveis, ok, ou um aplicativo, ok? Não adianta gastar todo o seu tempo lá. Você precisa testar no dispositivo, aquela coisa, ok? Portanto, há um aplicativo que você pode baixar na loja de aplicativos Android ou Mac. Você pode dizer que eu não o uso. Mas é chamado de espelho Figma. Eles podem estar mudando esse nome, verifique nos comentários se eles o atualizaram, mas ele se chama Figma Mirror Certo, pare aí por um segundo. Ei, eles atualizaram um pouco o aplicativo espelho. Está bem? Então, depois de instalá-lo em seu telefone, tudo bem, o que você pode fazer é começar automaticamente. Agora, o que você precisa fazer é clicar no botão de espelhamento, que está no canto inferior direito Basta clicar em Mirror e, aqui dentro do Figma em sua área de trabalho, basta clicar na página em que você deseja um espelho Ok, vou clicar em uma página inicial e ela aparecerá no seu telefone É mágico. Na verdade, talvez você precise clicar no botão Iniciar espelhamento, mas será mágico. De volta ao vídeo. Você faz login com seu nome de usuário e senha do Figma e, alguma forma , magicamente, tudo está acontecendo Você não precisa estar na mesma rede. Magia. E, basicamente, o que acontece é: posso te mostrar aqui? Eu vou te mostrar. Você pode ampliar isso? Você meio que pode. Basicamente, se eu clicar em coisas diferentes aqui no meu desktop, você não consegue ver o que estou fazendo aqui. Mas se eu clicar na minha página de detalhes, onde ela está? Página de detalhes? Aí está. Clique em minha finalização da compra. Então, é uma espécie de atualização ao vivo. E até Verda, na verdade, está dirigindo ao vivo. Então, isso vai funcionar? Talvez. Então, clique no meu botão Início. O que você pode ver? Botão home. O botão Home é muito pequeno, porque mal consigo clicar nele e você não consegue ver o que estou fazendo. Botão “Até agora”. Olha isso. Ok, compras. Em que está se concentrando? Está se concentrando na coisa certa? Talvez. Desvanece-se. Oh, olha como isso é bom. Então, eu posso realmente trabalhar nisso. E a grande coisa que vou mostrar a vocês são os botões Até agora muito pequenos, o texto. Fica bem no desktop, mas é minúsculo lá dentro, ok? O botão de compra parece bom quando eu vou para By now. E como é isso filmar a câmera? Isso provavelmente é terrível, mas ei, esse botão de compra é bom para mim. Também estou achando muito difícil clicar nos botões ao longo da navegação Eles só precisam ser, não precisam ser maiores. Eles precisam ser menores com uma área maior ao redor deles, então uma moldura para torná-los maiores. Logotipos muito pequenos. O texto na página de compra é bom. A página de checkout E eu fico preso na página Saiba mais. Não tenho nenhum tipo de prototipagem na página de mais detalhes do produto Eu esqueci de adicioná-lo. Você provavelmente viu isso no último vídeo, mas quando você chega a esse tipo de palco e fica tipo, testando sozinho, você se esquece dessa parte Bem, isso é muito pequeno, ou é uma cor horrível. Verde. Ok, então, na verdade, isso provavelmente é muito bom. Ah, primeiro, vamos fazer uma atualização ao vivo, porque isso é muito legal Vou ajustar o Zoom para que possamos fazer isso um pouco melhor. Você espera lá. Vou trocar a câmera. Tudo bem. Então, provavelmente deveria ter feito isso no começo. Veja isso. São atualizações ao vivo. Estou movendo coisas no meu desktop, então você está olhando para o meu laptop. Ali, meu telefone está ali. E, sim, você pode simplesmente trabalhar. Então, quando estou trabalhando, especialmente na fase inicial de preparação de tamanhos de fonte e outras coisas, eu meio que gosto de não ter um suporte Eu só tenho meu telefone deitado no chão. Mas para que você possa ver isso. Isso é muito útil agora. Eu posso passar e dizer, na verdade, o tamanho da fonte aqui, o que eu quero fazer? É um grupo, então eu vou entrar no meu grupo e vou usar para cima e para baixo. Até encontrar algo, o que estou vendo é que estou de olho no meu telefone aqui. Está bem? É isso que estou vendo. Eu fico tipo, esse é um tamanho acessível O que você descobrirá é que, quase sempre, 16 é bom. Está bem? Você não pode vê-lo porque está deste lado do meu desktop, mas eu chego a 16 pontos. Essa academia realmente não tem cérebro, uma boa. Ok, não posso destruí-lo. 15, se você está tentando ser descolado e sofisticado e tentando mantê-lo pequeno Mas se você perder cerca de 12 e 13 pontos, isso se torna uma coisa bem complicada É bom para algumas coisas, mas para um grande botão antigo, clique agora e compre, parece um pouco pequeno. Então, eu quero continuar e vamos tornar isso um pouco maior. Coloque-os do outro lado. Vamos enviá-los juntos. Aí. Preciso fazer o mesmo com o botão Saiba mais. É difícil fazer isso com uma mão. Preciso de minhas mãos aqui, mas não quero meus dedos peludos no vídeo. Mas você entendeu a ideia. Você pode fazer alterações muito rapidamente, vendo como fica em um telefone, ok? É praticamente instantâneo. Eu não sei Estou muito surpreso com a forma como isso funciona Então, sim, se você está projetando para tablet, tenha um tablet. Se você está projetando para desktop, é um pouco mais fácil fazer isso em seu desktop. Mas um celular ou um aplicativo, ok, ou um site que prioriza dispositivos móveis, como estamos fazendo, ok? O desktop faz parte do nosso plano, mas é secundário. A maior parte do nosso público virá de anúncios pagos, porque conversei com o cliente sobre isso Esse é o tipo de conversa sobre a qual você também fala, como a Geração de Leads, de onde vem tudo isso? Está vindo dos anúncios do Facebook. Tudo virá dos telefones celulares. Se vem dos vídeos de instruções do YouTube, como muitos dos meus cursos , primeiro é o desktop. Então, tipo de perguntas que você vai fazer como designer de UX? Para que projetamos primeiro? Tudo bem, é tarde e surpreendentemente quente com todas essas câmeras e luzes acesas, vou fazer outro vídeo antes de irmos para a cama Tudo bem, esse é o espelho Figma e testando seu protótipo em seu telefone. Visto um pouco. 25. Projeto do curso 04 - Como testar no seu telefone: É hora do projeto da aula. Vamos criar um protótipo seu site para celular e testá-lo em seu telefone Use as técnicas que você já usou e que aprendemos nos últimos vídeos para denunciar seus botões de forma que, quando você clicar nos botões, eles saltem para as páginas certas. Em seguida, baixe o aplicativo Figma. Acho que está listado agora como Figma. Você deve encontrá-lo. Tem a opção de espelho. Você o encontrará no Google Play e na loja de aplicativos. É assim que se chama e teste. Clique nos botões, veja se funciona. Se, por algum motivo, você não conseguir fazer o aplicativo funcionar, o aplicativo para download Na verdade, você pode simplesmente acessar figma.com slash Mirror e também pode usá-lo Você faz isso no seu telefone. Vou pedir que você faça login. É uma solução alternativa. Então, quando você estiver no aplicativo , faça login e teste seu design. O que você está procurando é apenas fazer alguns ajustes de luz. Os botões são clicáveis? Eles são grandes o suficiente? O texto está legível? Uma das grandes coisas que você pode achar um pequeno bônus neste vídeo é que ele está aqui no carrinho de compras. Eu não me enganei. Deveria ser. Vamos ao protótipo Vamos lá e isso é clicado. Você acessa a página de checkout. A única coisa que pode acontecer é que esses botões sejam bem pequenos. É difícil tocar ou talvez fechar o menu. Então, o que você pode aprender por meio sua prototipagem é um zoom Eu vou dizer que, na verdade, isso precisa estar um pouco mais longe disso, para que eu possa realmente clicar nele com meu dedo grande. A outra coisa que você pode fazer é que, dependendo de como você tem seu ícone, você pode ter escolhido um diferente. Pode estar funcionando de forma diferente. Vamos continuar. É bom projetar. Digamos que eu queira que a área clicável seja maior, mas não o ícone real dentro dela Quero que o ícone permaneça no tamanho certo, mas quero que a área ativa na qual eu possa clicar seja maior. Eu tenho a ferramenta de movimentação, neste caso, o que está acontecendo é que ela está ampliando tudo dentro Estamos ficando um pouco avançados aqui, mas é algo que você talvez queira fazer. Cubra-o adequadamente mais tarde. Vamos clicar duas vezes para entrar nessa moldura. Se você não tiver uma moldura, mostrarei como fazer isso em um segundo. Esse material dentro do meu corte de ícone está configurado em escala. Posso colocá-lo no centro, onde diz restrições. Que se eu clicar e clicar novamente na moldura principal, você pode ver aqui, não o vetor, a moldura que está do lado de fora. Agora veja o que acontece. Eu posso torná-lo maior, você sabe, a área ao redor dele maior, mas o ícone permanece o mesmo. Há mais lugares onde seu dedo pode realmente tocar e clicar. Se você não tiver um, digamos que eu tenha um ícone e ele tem, e vou copiá-lo e colá-lo. Digamos que você tenha me seguido mais cedo e não tenha uma moldura, apenas colocou o ícone lá. O que você pode fazer é clicar com o botão direito e dizer seleção de quadros. Agora você está onde eu comecei. Vamos entrar e, por padrão, entrar demais. Vamos ver o vetor aqui. Ah. Ok, esse é um bom ponto. Quando clico o suficiente, recebo pequenos ícones. O que eu realmente quero fazer é selecionar o quadro, corrigir o vetor e então você verá se ele está configurado para escala ou centro. Então aí está. Pequenos bônus para as pessoas que realizam os projetos da classe. Você pode aumentar a moldura, mas não as coisas que estão dentro. Tudo bem, teste quando terminar, o que eu quero que você faça é tirar uma foto da moldura do seu pedido de desculpas. Tire uma foto do telefone, ok? Só para provar que você fez isso, faça o upload da foto do seu telefone com o projeto, a moldura Y, e faça o upload para a seção do projeto. Eu posso imaginar muitas pessoas como, eu não tenho um segundo telefone ou um amigo ou parceiro ou filho ou alguém para tirar uma foto do seu telefone Ok, você pode simplesmente fazer o upload de uma captura de tela, se quiser. E uma vez que você tenha feito isso, o que eu quero que você faça é ficar animado. Eu não sei. Aposto que você provavelmente tem a mesma coisa. Quando você faz isso no seu telefone, há algum tipo de mágica. Até eu, fiz 1 milhão desses. Eu fico tipo, quando eu vejo isso no meu telefone e começo a trabalhar nele, tocando nos botões, eu fico tipo, Oh É real. É ao vivo. É empolgante. Espero que você sinta isso também. Então, pratique, protótipo, faça alguns ajustes Talvez as fontes não tenham o tamanho certo, talvez os botões não sejam clicáveis e, em seguida, faça o upload para a seção de tarefas Seção de projetos, até mesmo. Tudo bem. Aproveite. Te vejo no próximo vídeo. 26. O que é Smart Animation e atrasos no Figma?: Olá. Ei, é hora de aprender a fazer animação básica dentro do Figma Ok, vamos pegar essa seta para animar nossos parabéns Sua compra está em sua página de entrega. A animação é muito interessante dentro do Figma. É um pouco rápido. Vamos aprender algo chamado Smart Animate. Vamos começar. Certo, primeiro. Turno um. Basta dar tudo o que está na página. Barra de espaço, clique e arraste. Vamos criar duas versões dessa página de confirmação. Vamos fazer uma animação entre eles. Assim, você pode copiar e colar. Vou manter pressionada minha tecla opcional KAnimaco em um PC e arrastá-la Então, eu tenho duas cópias dele. E o que eu quero fazer é animar essa flecha O que acontece na Figma. É um pouco estranho, é que basicamente vamos apenas animar entre essas duas páginas e algo precisa ser diferente Essa flecha vai ser diferente. Vamos movê-lo para cá. Basta movê-lo um pouco para a esquerda. Tudo o que fazemos é dizer página de confirmação se eu for para o protótipo, e quando este for prototipado, quando jogarmos e chegarmos à página de confirmação, quero que você vá até Vamos deixar todos os padrões e fazer um Então, vamos ao nosso pequeno protótipo. O que vai estar acontecendo? Vamos usar o presente. Não, não use o presente. O presente está bom. Vá. Vou usar uma pequena versão para que todos possamos vê-la , então vamos ter uma prévia. Telefone gigante. Vou até o VYWpage e compro e depois ele vai Se eu clicar uma vez, ele se move. Funciona. O que precisamos fazer é adicionar a magia. A mágica nesse caso é clicar na página de confirmação e clicar nessa transição entre as duas. Em vez de usar o Instant, vamos usar o que ignoramos antes do Smart Animate. Vamos deixar tudo por padrão e dar a mesma prévia. Vamos encerrar isso. Vou usar o Shift Enter para abrir essa pequena prévia. Não é mudança para Dan. É o espaço Shift. Mude de espaço e, agora, vá para as fotos e clique quando ela estiver animada. É muito desinteressante. Mas nós entendemos. Nós fizemos isso. Bom trabalho. Sua primeira animação. Vamos torná-lo melhor. Na verdade, vamos quebrá-lo porque aposto que você vai quebrar o seu. Agora, uma das coisas que eu quero fazer é que ele não se mova muito rápido. Eu quero que saia da tela. Então, eu vou movê-lo para cá. Você pode segurar a tecla Shift para que ela apareça enquanto você a arrasta em linha reta Ótimo. Então está aqui. Vou pré-visualizar a partir desta página de confirmação. Se você clicar primeiro, clique na barra de espaço Shift. Vou começar aqui em vez da página inicial. Se você não tiver nada selecionado, ele começa no primeiro quadro. Mas se você tiver o nome do quadro selecionado, ele começará de onde você selecionou. Vamos clicar nele uma vez e não funcionou. Meio que funcionou? Vou usar minha seta para trás para voltar atrás. Apenas minhas teclas de seta ou você pode pressionar Reiniciar. Eu só uso minhas setas esquerda e direita para avançar e voltar B, clicar uma vez não funciona. Por que isso não funciona? Isso acontece muito. Se as coisas estão desaparecendo, está quebrado A primeira coisa que vamos fazer é clicar no título aqui em cima e movê-lo um pouco mais perto. Vou segurar a tecla Shift, pegar as duas páginas de confirmação e movê-las para que tenhamos algum espaço. É muito comum manter as animações um pouco separadas, então você tem algum espaço Esse cara aqui, o que ele está fazendo? Se eu colocá-lo lá, tudo bem, segure o turno. Ele ainda não vai trabalhar. Por que é porque dê uma olhada nas camadas. Eu tenho minha página de confirmação um, dois, e estou na minha página de camadas e posso ver meu painel de camadas aqui. Arquivo, celular, wireframe, você pode ver esta página de confirmação e esta, se eu girá-las e fechá-las, esse cara, linha 13, está apenas saindo sozinho Ele não está em nenhuma dessas molduras. Está reproduzindo esta página. E ignorando esse cara. O que ele faz é dizer: Bem, ele não está aqui, mas ele aparece aqui quando nós simplesmente aparecemos O que precisamos fazer é garantir que isso esteja nesta página. Você pode fazer isso arrastando-o. Você vê agora, está dentro da página de confirmação. Olha, ele está lá dentro, mas se eu arrastar para fora, clicar de uma vez, segurar a tecla Shift, ela aparece O que eu posso fazer é simplesmente forçá-lo a entrar. Qual página é essa? Vamos nomeá-los. Clique duas vezes nele, confirmação 1. Confirmação dois, só para que eu possa saber a diferença entre. Quero que esteja na primeira página de confirmação. linha U 13 deve estar lá. Ela desaparece Está lá dentro. Só está oculto porque está recortado nesta página Experimente e veja. Saiba onde está lá. Vamos dar uma prévia. Clique neste, Shift space. Vamos clicar nele. Nós fizemos isso. É animado em. Somos gênios. Vamos fechá-lo. Uma das coisas que você pode fazer é, se estiver fazendo animação que sai da página clicar nessa página de confirmação e uma das vantagens de um quadro sobre um grupo, que é esta página aqui, está aqui Se eu for para design, há uma opção aqui que diz conteúdo do clipe. Está vendo esse aqui? Parece que aprendemos isso mais cedo, não é? Não consigo me lembrar. Tudo bem. Foi fim de semana. Ah, então vamos desligar isso e isso significa que você pode realmente vê-lo. Você pode ir. Na verdade, quero que fique um pouco mais perto ou um pouco mais longe ou altero o tamanho ou a largura do traço. Quando eu o visualizo, você muda a barra facial, clica novamente, ele ainda funciona da mesma forma. Simplesmente não foi cortado. Agora, realmente não importa como você publica isso, seja recortado ou não Às vezes, você quer que o recorte seja desligado enquanto você está trabalhando e depois o ative novamente quando terminar o projeto Outras coisas que podem destruir seu Se a sua ainda está desaparecendo, você ainda está desaparecendo, Dan Verifique se está dentro da moldura correta, então talvez dê um nome a eles. A outra coisa que é importante saber é que, basicamente, o que ele está fazendo é dizer que eu pego esses dois quadros e Dan decidiu fazer uma animação inteligente entre os dois O que é ver todas as coisas aqui. Se alguma coisa se mover, ela será animada, o que é incrível. Mas precisa saber do que está falando. Digamos que eu tenha a linha 13 e a linha 13. Se de alguma forma, por qualquer motivo, você os copiou e colou e esta é a linha 14, ele não saberá o que fazer Precisa ter o mesmo nome. 13 e 14 não vão funcionar. Vamos tentar, vai clicar e vai desaparecer Você fica tipo, está desaparecendo. Desvanecer significa quebrado porque é como, A, essa coisa simplesmente aparece nesta página, eu vou fazer com que apareça Você só precisa ter certeza de que seus nomes são os mesmos. Não importa como eles são chamados, desde que sejam iguais. Se ainda não estiver funcionando, o que você pode fazer entre os dois quadros é dizer que este não está funcionando. Eu fico tipo, não consigo fazer isso funcionar, Dan, me livrar disso. O que posso fazer é pegar esta versão aqui, copiá-la, clicar no título do quadro e colá-la, e você verá que ela está colada na Linha 13, Linha 13 e depois animá-la novamente Certifique-se de que ele não saia da página. É um pouco difícil de ver. Você pode ver se eu os giro? linha 13 realmente saiu dessa página, então preciso arrastá-la de volta para dentro. Nós aprendemos isso. Às vezes, isso pode resolver seu problema. Vamos dar uma olhada, clique uma vez. A próxima coisa que eu quero fazer é clicar uma vez na empresa. Obviamente, as pessoas não clicarão depois de chegarem a esta página. Vamos aprender outra técnica de animação. Vamos clicar na confirmação 1. Vamos garantir que temos um protótipo. O que vamos dizer é que, no momento em que ocorre essa interação chamada toque, vá para a confirmação. Nesse caso, será a confirmação dois. Ou você pode clicar nesse Y aqui. Matéria. Ok, então não queremos que esteja disponível. Queremos esse outro. Queremos outro que diga que, após um atraso de quanto tempo, vamos deixá-lo como padrão e, em seguida, ir para a confirmação dois. Não vai pedir permissão. Só vai esperar. sabe quantos segundos são? Está certo 0,8. Ok, vamos. Shot plus. E agora, C simplesmente continuou sozinho. Vou usar minhas chaves Ara para ir. Voltar para a página inicial. Você pode usar esquerda e a direita. Quero encontrar a página inicial Onde estamos? Aí estamos. Vamos para By agora. Vamos comprá-lo e esperar. Espere, espere, espere, espere. Olha isso. Fiz isso sozinho. Isso é chamado após atraso. Você pode brincar com o tempo. Está bem? Nós o temos em 0,8. Podemos fazer isso em 100 milissegundos. Então, basicamente, você não pode colocar zero. Você não pode colocar zero? Sim, você tem que colocar um milissegundo. Podemos, instantaneamente, depois de um milissegundo, partir. A outra coisa que podemos observar é que você pode clicar e arrastá-los, aliás, se estiverem no caminho. Muitas vezes, eles podem acabar assim. Você só precisa clicar e arrastar essa parte superior para movê-la para cima. Vamos dar uma olhada em nossa flexibilização. Analisamos a flexibilização. Vamos fazer o que eu mais gosto, que é entrar e sair com facilidade saltar um pouco. Quão rápido deveria ser? Vamos fazer isso por 1 segundo e dar uma olhada. Demora muito. Muita coisa muda a duração, Shift plus, apenas verificando muito rápido. Reinicialização alfa. Isso é bom. Agora, nós só fizemos o movimento. Você pode animar qualquer coisa. Desde que você não mude o nome, você pode animar qualquer coisa. Vamos encontrar. Vamos clicar na confirmação 1, voltar ao design. Você acabará alternando muito entre esses dois. Não quero exagerar no atalho, então, se você bloqueá-lo, se já estiver preenchido Mas se você estiver procurando por atalhos, a tecla Shift E alterna entre design e protótipo , design e protótipo Segure a tecla Shift no Mac e no PC e toque em E e alternaremos entre eles Então, eu quero me dedicar ao design. Vamos recortar o conteúdo para que possamos ver essa coisa e eu vou dizer, vamos mudar a transparência do traçado para que possamos torná-lo zero. Ele desaparece à medida que aparece. Você muda de espaço. Você vê que desapareceu. Realmente não consigo ver, mas enxergava. Onde você está agora? Tudo bem. Desapareceu. Linha 13. Aí está lá. Vamos aumentar a aparência para 100. Podemos decidir sobre o triângulo. Talvez o triângulo não tenha nada para começar e faça crescer um triângulo. Vamos dar uma chance. Vou movê-lo um pouco para que possamos realmente ver as animações que estão faltando Reiniciar. Ok, eu não acho que você possa cultivar esse. Sim, meio que cresceu. Aí está . Eu simplesmente não conseguia ver isso. Você consegue ver como parece? Isso não é tão divertido, Dan. Vamos mudar o peso do traçado. Tente não clicar neles. Elas são chamadas de variáveis. Vamos examiná-los mais tarde. Veja, esses são pequenos diamantes Eles estão em muitas coisas. Faremos variáveis mais tarde. Eles são muito hardcore. evitá-los. Vamos dar uma chance. Tudo bem. Para se refrescar, uma flecha gigante está chegando Tudo bem. Então é isso. Isso é animação, o básico de animação e figma. Você tem duas molduras, algo está diferente em ambas. Desde que as duas coisas apareçam nos dois quadros, você não pode deixar de aparecer aqui. Você não pode excluí-la desta moldura e esperar que apareça aqui, ela aparecerá, mas ela simplesmente desaparecerá Você precisa de duas coisas, com o mesmo nome em ambas, e precisa ter certeza de que elas estão realmente nos quadros entre os quais você está animando Dê uma olhada nessas camadas aqui, feche-as todas. Acho que essa é a maneira mais fácil de ver. Há alguma coisa por aqui que não deveria estar? Depois, basta fazer uma mudança entre eles. Movimento, tamanho, cor ou qualquer coisa que você quiser. O grande truque aqui é mudar para protótipo, Shift ou clicar no botão aqui em cima e garantir que nesta página, você clique em segurar e arrastar e verifique se ela está animada entre os dois e anima de forma inteligente e se ela os anima de forma inteligente Se você acidentalmente tiver duas interações, como acabei de fazer, o que você faz é clicar no quadro e dizer qual delas eu quero tocar ou atrasar Eu quero me livrar dessa torneira. Eu quero minha demora e vou para tudo bem. Esse é o básico da animação dentro do Figma. É um pouco desajeitado. Se você usa qualquer outra ferramenta de animação que tenha uma linha do tempo, é assim que funciona no figma, mas sabemos agora que é um pouco desajeitada Não fazemos muita animação nesse estágio de wireframe. Mas é divertido e eu quero apresentá-lo cedo para que possamos fazer coisas mais complicadas mais tarde. Tudo bem. É isso mesmo. Animação dentro do Figma Isso era para ser o fim e eu gravo as introduções no final E então eu estava gravando a introdução e a minha estava quebrada. Eu fico tipo, o que eles fazem? Eu voltei para te mostrar. Vou pré-visualizar a partir da finalização da compra aqui, então Shift plus Então eu vi aquela flecha grande que apareceu junto. Você fica tipo, de onde veio isso. Alguém mais tem esse problema quando está testando? A flecha se move dessa maneira. O que está acontecendo? E como podemos consertar isso? Temos uma animação entre a página de checkout e a página de confirmação É esse pequeno macarrão aqui. O botão vai até aqui e diz: Ao tocar, quero que você deslize para dentro. Estou usando isso para dentro e para fora. O que está fazendo é deslizar para cá. Eu era uma pequena animação. Então você vê que a página inteira está deslizando. Essa coisa aí pode ser vista porque eu deixei o design inicial incorreto No design, deixei o conteúdo do clipe desligado. Se eu desligá-lo agora, ele deve funcionar. Como eu deixei isso de fora, mesmo quando eu pré-visualizo, isso pode ser visto porque a animação entre aqui e aqui é um slide, toda essa unidade desliza, Zook, e podemos vê-la nessa transição Há duas maneiras de se livrar disso. Essa em que eu digo esta página, vou recortá-la para que fique escondida. Vamos ver se isso funciona. Tenho certeza que funciona. Ok, eu trabalhei. A outra coisa que podemos fazer é isso aqui quando há prototipagem entre os dois Em vez de fazer todo esse slide, podemos simplesmente agir instantaneamente. Não há nenhum visual entre esses dois. Basta pensar e eu já estou aqui, isso também funcionará. Espero que sim. De qualquer forma, provavelmente é mais fácil recortar o conteúdo depois terminar de trabalhar nele. Você pode ter tido esse problema. Eu tive esse problema. Agora vamos fazer o final final final final. Veja no próximo vídeo. 27. Projeto do curso 05 - Minha primeira animação: Olá, é hora do projeto da aula. Nós podemos fazer uma animação. Quero que você faça o que fizemos no último vídeo, anime algo na página de confirmação Não precisa ser a flecha. Se você é um pouco novo no Figma, está achando isso bastante complicado, especialmente em animação, basta fazer o que fizemos no último vídeo. Isso é totalmente bom. Se você está se sentindo corajoso e tem um pouco mais de experiência, você pensa: Sim, eu posso fazer isso. Tente outra coisa. Experimente bola, quadrado, carrapato, ícone ou outra coisa para animar. Eu não me importo com o que é. E quando você terminar suas entregas, quero que você faça uma captura de tela de ambas as páginas R, as duas páginas de confirmação. Isso é totalmente. Faça o upload para os projetos. No entanto, se você é uma pessoa que sabe fazer gravação de tela, faça uma prévia, grave sua tela e faça o upload. Você pode fazer upload de links do Vmeo ou do YouTube. Mas se isso estiver um pouco fora do seu escopo no momento, não se preocupe com isso. A captura de tela está boa. No entanto, quando estiver começando, dê uma olhada nos projetos veja o que outras pessoas fizeram. Sim, pegue algumas ideias, aproprie, copie, adicione seu próprio sabor a elas. E alguns de vocês podem ouvir o primeiro estouro. A maioria das pessoas terá um pouco de dificuldade em criar a animação desajeitada Isso é totalmente esperado, não se culpe se quiser, um pouco de provação e uma era acontecendo. Talvez você precise assistir novamente ao último vídeo. Você vai pegar o jeito. Tudo bem. É isso mesmo. vejo no próximo vídeo. Feliz Animate. 28. Compartilhando e comentando em um arquivo do Figma com investidores: Um. Neste vídeo, veremos como compartilhar seus arquivos com as partes interessadas. Pode ser seu cliente, cliente, chefe, amigo. Você quer compartilhar o wireframe com eles o quanto antes para que eles possam ver o que você está fazendo, fazer um teste e dizer que você está no caminho certo Mostrarei as melhores maneiras de compartilhá-lo e também como deixar e trabalhar com comentários. Estamos trabalhando com esse cara chamado Doug. Doug é meu alter ego não tão inteligente. Vou mostrar como tornar mais fácil para ele trabalhar comigo como UX. Entre. Para compartilhar seu documento com seu cliente, cliente, parte interessada, quem precisar vê-lo Gosto de compartilhar o meu desde cedo. Basta clicar no botão gigante Compartilhar. Vou clicar neste que diz Copiar link. Diz que Linked copiou. Então eu posso simplesmente colar isso em um e-mail. Então, qualquer pessoa com esse link pode visualizá-lo, deixe-me abri-lo em um navegador. Tudo bem. É isso que a parte interessada do cliente vê. Eu sou o cliente. Meu nome é Doug e Dan está trabalhando para mim e acabou de me enviar este link por e-mail Eu cliquei, abri e é isso que eu vejo. Não preciso de um login, não preciso de uma senha. Eu posso ver essa coisa, eu posso clicar e arrastar. Não há muito que eu possa fazer. Mas eu posso dar uma olhada, aprovar, dizer, você está no caminho certo Talvez você possa mudar isso, por que estamos fazendo isso? Você pode iniciar esse diálogo mais cedo. Basta usar o botão de compartilhamento. Agora, se você está praticando isso em casa e está copiando e colando o link em outro navegador, você precisa colá-lo em uma janela anônima, algo que não está logado em suas contas , caso contrário, você usará o link e ele saberá que você está conectado ao Figma, então seremos Infigma algo que não está logado em suas contas , caso contrário, você usará o link e ele saberá que você está conectado ao Figma, então seremos Infigma e está copiando e colando o link em outro navegador, você precisa colá-lo em uma janela anônima, algo que não está logado em suas contas , caso contrário, você usará o link e ele saberá que você está conectado ao Figma, então seremos Infigma. Você precisa usar um navegador, desconectar um Figma em seu navegador para testá-lo ou abrir uma janela anônima Você não precisa fazer isso. É mais de OK, então eu sou Doug, o cliente cliente Eu gosto disso. Se eu precisar fazer mais alguma coisa, eles precisam fazer login. É grátis. Eles podem se inscrever no Google ou simplesmente se inscrever com o endereço de e-mail. Deixe-me fazer isso. Agora que estou logado com Doug, você não precisa fazer isso Isso está apenas mostrando o que os outros clientes veem. Acho que é útil ver o que eles podem fazer. É um pouco complicado. Temos todas essas coisas acontecendo. Mas o legal disso agora é que eles podem comentar. Esse é o grande problema. Eles podem fazer comentários e Doug pode dizer: Ar Dan, o que está acontecendo Por que não há derrame aqui? Doug publica isso e o legal disso é que vamos voltar a ficar deprimidos. Feche isso. O que você verá é, olha, primeiro de tudo, há Doug, o que é muito estranho. Você pode ver esse comentário. Olha, por que Astra eu escrevi isso? Não preciso lê-lo. E o que posso fazer é nos comunicarmos por meio desses comentários fáceis. Eu posso fazer atualizações. Eu posso fazer coisas assim e dizer: Tudo bem, Doug, carinha perfeita e sorridente Não conte a ninguém. Você pode dizer, L, eu fiz isso. Marque, então isso está resolvido e desaparecido. Outra coisa interessante sobre o Figma é que ele é uma ferramenta colaborativa real, especialmente quando você está trabalhando com outros designers, você vê cães lá? Deixe-me te mostrar. Deixe-me organizar as telas. Esse é o Daniel. Este é Doug, meu cliente, e ele está vendo o documento atualmente O estranho é que, olha, você pode ver Doug se mexendo. Você pode ver na mão direita aqui? É Doug se movendo. Eu posso vê-lo se movendo na minha tela, está ao vivo. A mesma coisa do meu lado. Ele pode me ver andando, o que pode assustar Doug De qualquer forma, a outra coisa legal de ser uma ferramenta de colaboração ao vivo é que eu posso ler a mente de Doug Eu posso vê-lo cutucando esta placa aqui, e eu sei que ele está preocupado com a cor verde Eu posso dizer que você é de cor verde. Bem, o que foi um derrame? Não, foi isso. Posso dizer, vamos ao design, vamos atualizar o traçado, você pode ver no lado direito, está se atualizando. Estou usando esse lado esquerdo aqui quando estou projetando, mas Doug pode me ver movendo coisas e ajustando-as Veja isso. Vou movê-lo. Isso é mais fácil. Olha, é uma ferramenta de colaboração ao vivo. O legal disso é que Doug não precisava de uma conta paga infigma Ele pode verificar meu trabalho. Ele pode se manter atualizado com isso. Você pode entrar novamente e ver até onde eu chego. Você não precisa reenviar um novo link e um novo e-mail. A outra coisa é que vamos voltar a ser Dug. Eu sou Doug. Eu posso clicar nele e posso visualizá-lo. Eu não acho que você possa visualizá-lo sem estar logado. Mas ele também pode testar as animações. A última coisa que quero te mostrar é que ainda sou Doug, e Doug pode achar isso muito Há muitas coisas com as quais eles não podem mexer. Eles podem escorregar coisas, mas não conseguem movê-las. Há coisas como larguras e alturas de pixels, todo tipo de coisa por aqui, você pode ficar tipo, Oh, isso vai assustar Doug Doug não é especialista em computadores. Preciso mostrar para ele, mas precisa ser muito mais simples. O que você pode fazer é dentro de um Figma. Estou compartilhando isso. Eu posso dizer compartilhar. Você pode usar essa opção aqui. É o link Copy Prototype. Então você pula tudo isso e vai direto para o protótipo. Vamos abri-la, janela anônima, para que ela não esteja logada Ok, eu preciso ser cavado. Doug faz login e ele vai direto para o protótipo, e eles podem trabalhar com Mas eles simplesmente não recebem todos os extras. Além disso, eles podem fazer coisas. É um pouco difícil. Veja aqui em cima. Aí está o comentário Eu posso dizer, por que isso é 99? Ele volta para mim no meu site, assim como para Dan. Essa pode ser uma versão mais fácil para eles. Dê uma olhada rápida no comentário, Bec afigma, espero que você Bec afigma, espero que você veja. Aí está lá, Doug. E por último, você pode responder a Doug aqui. Você pode dizer, por que isso é 99? Isso é apenas um espaço reservado. Vá, e volta para Doug deste lado. Olha, na resposta, aí está, apenas um espaço reservado. Legal. Tudo bem. Isso é compartilhar com as partes interessadas para que elas possam ver e comentar tudo da Figma Tudo bem. É isso mesmo. Nos vemos no próximo vídeo. 29. O que são rascunhos de Projetos de Equipes no Figma: Um. Neste vídeo, compartilharemos nossos documentos para que possam ser editados. Vamos nos deparar com algo chamado equipes, projetos, arquivos e páginas É a forma como o Figma se estrutura, coisas de organização de arquivos Achei muito confuso quando comecei, então quero fazer um vídeo sobre isso aqui para que você saiba onde está tudo e o que esses toms significam Vamos começar. Tudo bem Se precisarmos compartilhar isso com outra pessoa que precise editar esse trabalho, além de muitas outras coisas. Muitos recursos estão relacionados a isso. Vamos compartilhar. Eu não posso dizer, Doug, você pode editá-lo. Você é um colega, precisa trabalhar nisso. Você é um desenvolvedor, precisa trabalhar nisso . Eu quero ir para a edição. Vai dizer: Ei, você precisa mover essa coisa para um dos seus projetos de equipe. Vamos explicar isso. Porque se eu for compartilhar novamente , você verá que aqui diz: para convidar pessoas para editar, mova esse rascunho para seus projetos. O que são todas essas coisas? Isso me confundiu quando comecei, então vou explicar para você. Vamos para a casa. Estamos em recens, o que é normal. Você tem essa coisa aqui, uma equipe. Dentro desta equipe tem rascunhos e projetos. Ei, então você recebe uma equipe de graça. Think Team é a empresa para a qual você trabalha. Isso pode ser trazer seu laptop e talvez você não precise de mais equipes. Talvez você precise trazer sua equipe de notebooks. Mas se você é um freelancer, você pode ter quatro clientes, 20 clientes, e todos eles são apenas equipes separadas, empresas diferentes nas quais você está trabalhando. Do lado dessa equipe, temos rascunhos e projetos. Rascunhos Sempre que você faz algo novo, isso acaba no rascunho Então, quando você precisar torná-lo editável para outra pessoa, compartilhá-lo para que eles possam trabalhar nele, você precisa movê-lo para um desses projetos Isso é o que isso estava perguntando anteriormente. Eu disse: Ei, você precisa ter certeza de mover isso dos rascunhos para um de seus projetos para uma de suas equipes. Só temos uma equipe. Você pode ter apenas um projeto gratuito dentro da sua equipe. Esse projeto pode ser, nesse caso, nosso site de eCom, mas você pode precisar de outro Jet, isso talvez tenha a ver com outra coisa dentro da empresa. Talvez seja o fluxo de inscrições, talvez seja a liquidação de verão. Você pode criar todos esses projetos. Você pode fornecer um por padrão gratuitamente e, se precisar de mais, é aqui que passamos do plano inicial ao profissional Isso mudará, os preços serão diferentes. Eles mexem conosco o tempo todo. Mas é aqui que você pode decidir que, na verdade, eu preciso de um assento. Um assento completo custa 16 euros por mês. Será diferente em todos os tipos de países diferentes. Veja aqui, o limitado é que você recebe um projeto. Isso é o que acontece aqui em nosso site econômico, mas talvez você precise de um segundo, que pode ser suas campanhas de mídia social Você pode ter três arquivos lá, e a outra limitação é que você só pode ter três páginas por arquivo. Vamos detalhar isso. Se você já o tem, você diz: Sim, não o cubra novamente. Pule para o próximo vídeo. Não há nada. Vou fazer uma capa de novo só para ter certeza de que precisava desse vídeo quando comecei . Temos uma equipe. Nós temos a conta gratuita, então só temos um projeto. Dentro desse projeto, posso ter três desses, os arquivos de design que criamos. Eu fiz este. Eu posso fazer outra para design e será uma moldura digamos que estamos criando uma postagem de mídia social no Twitter. Ou seja, dois arquivos. No meu projeto, eu posso ter três. O truque, porém, é que você pode ter quantos rascunhos quiser Você pode simplesmente deixá-los em rascunhos. Como freelancer, talvez seja tudo o que você precisa. Você só precisa movê-los para os projetos de equipe logo no final para exportá-los enviá-los ao desenvolvedor. Você pode ir muito longe com a conta gratuita. A última coisa foi quantas páginas você tem permissão. Veja este aqui, temos as páginas 1, dois e três até agora. Isso é quantas páginas você pode ter em um arquivo de design. Isso está em um projeto de equipe. Aí está. Um projeto, três arquivos e eles só podem ter três páginas. Isso faz sentido. O que nós fazemos? Precisamos agir, queremos que o compartilhamento continue aqui. Lembre-se de que dizia: Ei, você precisa mover isso dos seus rascunhos para os seus projetos Nós podemos fazer isso a partir daqui. Basta clicar no botão de mover e pronto. Ele sabe para onde precisa ir. Vamos fazer isso manualmente porque eu quero te mostrar. Estou em rascunhos. Aqui estão todos os meus arquivos. Eu não preciso que isso esteja no meu projeto, porque isso foi apenas uma coisa estranha da barra de status que eu copiei e Eu não preciso desse. Essa, porém, eu tenho. O que eu posso fazer é clicar e arrastá-lo. Eu posso dizer, entre em meus projetos. Não posso fazer isso porque não consigo ver. Costumava ser Abdu Agora, o que você faz é clicar com o botão direito do mouse e dizer mover arquivo. Quero transferi-lo para aquela equipe, por favor. Desapareceu dos seus rascunhos. Se eu continuar com projetos, aí está aqui, meu projeto de equipe. Aí está meu pequeno arquivo . Eu tenho esse sem título que eu não preciso Eu vou para o lixo, eu só tenho três. Eu não quero desperdiçar nada. É apenas um novo lar para ele. Mas se eu voltar para o mesmo arquivo que ainda tenho aberto, posso ir para Shear agora e aquele pequeno banner saiu do topo e posso dizer que Doug agora pode editá-lo Ele pode mover coisas, mudar fontes, basicamente fazer tudo o que eu posso fazer. Então essa é uma das coisas que você pode encontrar. Quero mostrar logo no início, apenas para apresentar projetos e equipes e onde você pode começar a encontrar alguns dos recursos pagos Você pode ver agora que meu arquivo está dentro do meu projeto, ele diz: Ei, você só tem permissão para três páginas. Se você quer mais, precisa se atualizar. Bem, atualize posteriormente no curso para mostrar alguns dos recursos profissionais premium. Mas, no momento, vamos simplesmente ignorar isso. A ressalva sobre ervas daninhas aqui está no momento. Bem, desde que a Figma exista , você pode ter mais de uma equipe Então, vamos renomear essa equipe porque esse é um nome engraçado para uma equipe Ok, eu vou entrar aqui. Então, eu cliquei na equipe. Vá até aqui e eu vou renomeá-lo e meu vai se chamar Scott wallets Esse é o cliente para quem estou trabalhando. Mas o que eu posso fazer é criar uma nova equipe. Esta pode ser a empresa de laptops Binger e eu estou trabalhando para eles. Não precisa de nenhum colaborador. Eu vou escolher o plano inicial, e você pode ver aqui em cima, eu tenho duas equipes bom disso é que a segunda equipe que criei tem seu próprio projeto e seus próprios três arquivos com suas próprias três páginas. Vá bem longe com uma conta gratuita. Tudo bem, então eu vou voltar para Scott Wallets para ver todos esses projetos Aí está lá meu eco, fechei isso, amarrou tudo, e pronto. Isso foi útil? Eu sei. Parece que eu poderia ter tornado tudo mais confuso do que é Talvez não. Espero que tenha sido útil É isso mesmo. Vamos para o próximo vídeo. 30. Como obtenho inspiração para projetos de UX: Um. Neste vídeo, vamos passar do nosso wireframe, ok, onde são apenas quadrados e texto simples para o nosso modelo de alta E antes de fazermos isso, vamos tentar obter ideias sobre como podemos passar de wireframes em branco para como colocar fontes, cores, estilos e a aparência das coisas E é uma parte meio divertida do processo em que buscamos inspiração de outras pessoas. Então, deixe-me mostrar os lugares que eu vou para me inspirar antes de começar a fazer maquetes de alta resolução e Ok, então há vários lugares que você pode ter seus próprios. Esses são os lugares que eu normalmente visito primeiro e algo como dribble ou Behance ou qualquer um desses sites de biblioteca de estoque O que você precisa fazer é procurar o termo kit de interface do O kit de interface de usuário geralmente se reduz a mais itens móveis para sites, em vez de apenas itens genéricos de design. UIKits e você pode simplesmente acessar e ficar tipo, oh, eu gosto disso, e você tira uma captura de tela e, em seguida, começaremos a colocá-los juntos em um Mas encontre coisas que você goste. Use o termo kit de interface do usuário. Você também pode digitar UX, apenas para reduzi-lo e iniciar a captura O Behance é outro bom. É focar na web, que é bom para nós, comece a fazer capturas de tela, coisas que você gosta Você pode pagar por um kit em um desses sites. Não estamos roubando aqui, estamos apenas tendo ideias de coisas que achamos que funcionarão usando elementos invados ou, digamos, Adobe Stock, eles também têm elementos bons, e depois passamos para outros Eu gosto desses. Isso é um prêmio. Ok, este é css design awards.com, e este aqui chamado Awards with ThreeWST é muito útil porque esses são ótimos designs que foram enviados para prêmios, então é um ótimo lugar para Vamos usar qualquer um desses dois. Gosto de prêmios porque, se eu digitar na carteira, ela se reduz a coisas que contêm carteiras, o que é muito legal O que quer que você esteja trabalhando, digite isso e ele será reduzido. Espero que você encontre algo que talvez não goste do meu. Não há muitas carteiras reais. Há uma carteira real. Todas essas parecem ser carteiras criptográficas digitais. Ok. Mas, independentemente disso, é útil dar uma olhada O que também é realmente bom nesse site de premiação é que você pode explorá-lo. Gosto de ver os indicados, não apenas os vencedores, e gosto de entrar aqui e dizer etiquetas Há muitas etiquetas boas aqui. Digamos que você precise fazer um checkout, porque nunca os fez antes e quer ver a aparência de outras pessoas Então, eu digitei no checkout. Não há checkout. Ok, não está funcionando porque não há check-out. Não estou fazendo uma busca. Estou procurando etiquetas. Você pode percorrer as tags. Eu sei que há rodapé lá, então Footer Design Awards. Quem foi indicado Ok, então você pode entrar e dizer: Tudo bem, vamos dar uma olhada neste site E vai para o próprio site. Vamos encerrar os pop-ups. Vamos dar uma olhada no rodapé deles. Até mesmo chegue ao rodapé deles. De qualquer forma, você entendeu. Você pode examinar e escolher coisas específicas. Eles podem ter mudado de site desde então. Não, isso é promovido. Eu cliquei em um anúncio. Bom trabalho, Dan. Vamos dar uma olhada no Footer Award dessas pessoas Estou vendo os desenhos. Vamos acessar o site real. Como você acessa o site real, Dan? É isso mesmo. Você clica em Visitar site. Eles mudaram este site com bastante frequência, então, quando você chegar aqui, pode parecer diferente. Vou até este e depois dar uma olhada no rodapé deles. Vamos dar uma olhada. Oh, sim, é um rodapé muito bom, eu acho. Você entende o que eu quero dizer? Porque às vezes você está redesenhando um determinado elemento em seu processo de design de UX, talvez não um site inteiro, então isso é útil Vamos fechar essa. Outros que eu gosto em uma página love.com Então, essas últimas aqui são apenas carteiras. Acabei de começar a pesquisar carteiras de designers on-line no Google e acabei de criar a carteira Ridge Eu só quero ver o site deles e como eles fizeram carteiras. Eles têm essa carteira mecânica que é bonita e vamos dar uma olhada em outras. É uma boa maneira, você não precisa apenas olhar para o design. Você pode ver os sites reais em si. Tente encontrar algumas marcas que você goste, especialmente para carteiras, eu sei o que é uma carteira. Eu comprei carteiras antes Mas se eu tivesse que fazer algo como xampu, que não estou no mercado há muito tempo, talvez tivesse que acessar sites para conferir como são os sites de xampu no momento, quais são os bons, quais marcas estão indo bem, e simplesmente começar a fazer e simplesmente começar capturas de tela das coisas que eles gostam Você fica tipo, oh, eu gosto do jeito que eles estão fazendo isso aqui, você começa a juntar pequenos pedaços para o seu quadro de humor. Inspire-se. W Eu tive que fazer uma captura de tela em sua máquina no Command Chef four do meu Mac e você pode arrastar uma caixa ao redor das coisas. Você pode dizer que gosto desse pouco aqui, vou pegar emprestado ou pelo menos tirar uma ideia em um PC, tenho certeza de que é uma tela impressa, mas você terá que verificar o que está em um PC Faça muitas capturas de tela. Deixe-me saber nos comentários também se você quiser, não mencionamos este site para se inspirar. Deixe-me saber nos comentários se você tem algum que você goste. Adoro essa parte do processo. Inspire-se, encontre coisas, jogue todas em uma doca, o que faremos no próximo vídeo. Te vejo lá. 31. Como criar um moodboard no Figma: Tudo bem, pessoal. Neste vídeo, veremos como colocar nossa inspiração em um quadro de humor. Faremos um sofisticado e depois faremos aquele que está todo lugar que eu normalmente uso Mas precisamos dos dois. Um vai para um cliente, outro para nossa própria referência. Vamos fazer um moodboard agora no Figma. Vamos fazer a primeira maneira confusa que você usa sozinho Basicamente, você pode criar sua própria página e ficar sem páginas. Posso voltar aos rascunhos e ter mais de uma página Mas eu estou com três páginas, então eu poderia criar uma que fosse uma página de moodboard que fosse totalmente boa Se você estiver na conta profissional, pode ser bom. No entanto, enquanto faço minhas coisas de design, muitas vezes gosto do meu humor ou das capturas de tela logo acima do que estou trabalhando Não preciso alternar entre as guias. Tudo o que eu faço é trazer uma imagem, caso eu tenha feito muitas capturas de tela, posso seguir esse caminho Há uma opção aqui embaixo do retângulo aqui, que diz, trazer imagem Está bem? E eu posso clicar nisso. Eu posso encontrar nos meus arquivos de exercícios. Há um chamado Mo Board. Eu coloquei todo o meu aqui. Não use os meus. Acabei de colocá-los aqui para ir. Aqui estão todas as minhas imagens. Eu posso ir até lá e dizer, na verdade, eu quero tudo isso. Eu clico na primeira , pressiono a tecla Shift, pego a última, clico em Abrir e tenho 21 imagens e clico uma vez por uma, e posso começar a inseri-las. Ok, então essa é minha inspiração, tudo pronto. Esse é o meu quadro de humor. Muitas vezes, isso é o suficiente para mim enquanto estou trabalhando. Continue clicando. Está bem? Eu só preciso disso aqui acima enquanto estou desenhando e escolhendo fontes, e eu fico tipo, Oh, essa é uma cor legal, e eu poderia mudar isso para ver se consigo combiná-la Isso é meio que suficiente. Obviamente, você pode movê-los depois. Você pode arrastar a borda, com uma imagem e simplesmente redimensionar. Você poderia usar a ferramenta oficial de escala, mas na imagem por si só, você pode simplesmente pegar o canto e , isso é legal, mas o que eu realmente gosto é essa coisa aqui, por algum motivo, estou tornando isso bonito e grande. Vamos cortar e outras coisas mais tarde, mas isso geralmente é o suficiente para eu começar a trabalhar Porém, o que eu poderia fazer para arrumar o quadro é você pode ver aqui embaixo, antes de termos as características de casa, o checkout, muito sereno em suas próprias Eu tenho esse aqui. O que todas essas coisas estão fazendo? Você pode ver todas essas garotas viciadas se divertindo, todas essas capturas de tela penduradas na minha cabeça, arruinando meu cardápio amoroso ao lado aqui arruinando meu cardápio amoroso O que eu vou fazer é que você pode adicionar uma moldura depois. Veja isso. Vamos fazer com que esse seja um pouco menor. Mãe, por favor, espere. O que você pode fazer é desenhar uma moldura ao redor de tudo, para poder pegar sua ferramenta de moldura. Se você desenhar a moldura em toda a parte externa de todas essas coisas, elas simplesmente cairão dentro dela Você pode ver que eu já fechei isso? Você pode ver o quadro um que eu poderia chamar de moodboard. Só para que seja por si só. Eu posso movê-lo quando terminar de usá-lo. Você entende o que quero dizer, certo? Vamos criar um quadro de humor mais oficial porque digamos que precisamos voltar para nossa parte interessada Está bem? Eu uso essa palavra, odeio, mas é comum. Qualquer pessoa que tenha a ver com este projeto, sei lá, alguns investidores ou qualquer pessoa que aborde um projeto como parte interessada, seria comum, especialmente se você estiver trabalhando em uma nova marca, voltar para eles com um voltar para eles com um quadro de humor antes Trabalhe no iframe. Em seguida, o quadro de mudanças, uma vez assinados e a direção em termos de tema e estilo , você começa a fazer algumas maquetes de alta fidelidade Uma boa maneira de fazer isso é alinhar tudo isso e fazer com que tenham uma boa aparência, adicionar alguns rótulos e melhorar um pouco Acho que é mais fácil começar com o modelo de outra pessoa. Então, vamos para a tela inicial. Vamos ver modelos e ferramentas, que tenho certeza de que eles já foram renomeados Encontre a comunidade e eu vou digitar no moodboard e ver o que outras pessoas fizeram Vamos encontrar um, escolha um. Talvez você precise passar por alguns para encontrar o que deseja. O que estamos procurando, porém, é ver esse pequeno ícone de lápis e aquele é diferente. O Fig Jam é um software diferente que a Figma fabrica. É como Merro ou PowerPoint. É uma ferramenta de quadro branco. É muito legal. Mas queremos arquivos Figma Vou clicar nesse. Agora lembre-se, se eu disser open infig, esse modelo ou esse arquivo da comunidade agora faz parte dos meus rascunhos para a Scott Isso é meu agora. Eu poderia pegar o que preciso e excluí-lo ou simplesmente mantê-lo por perto. O que eu quero fazer é encontrar muitas coisas sobre este. Confira, lembre-se de que, ao usar o trabalho de outras pessoas, veja as diferentes páginas. As grades. Isso é o que eu quero. Sim, vamos dar uma olhada nas grades aqui. Qual deles eu quero? Peslek esta. A única coisa, porém, é que, como mencionei antes, se eu copiar isso e trazê-lo de volta para o documento em que eles estão trabalhando, não consigo inserir outra página porque estou limitado pela conta gratuita no momento. Vou colocar o meu aqui e é uma instância de um componente, que você não sabe o que é. Se tiver um pequeno diamante no momento até aprendermos a trabalhar com eles, basta clicar com o botão direito do mouse e dizer: L é uma instância anexada. Agora é apenas parte deste documento. Veja, é uma moldura normal com molduras dentro dela, e o que eu quero fazer é trazer algumas imagens. Um pequeno atalho para trazer imagens geralmente o que eu gosto de fazer é abrir meu localizador, então eu não sou mais Figma Isso é Mac ou PC. Abra a janela do Finder, encontre o arquivo desejado e arraste-o para dentro e eu o adicionarei ao documento Acho que isso geralmente é fácil. Eu faço isso de qualquer maneira, basta arrastá-los para dentro. Então você pode ir se quiser entrar nesta moldura aqui. Se não entrar na moldura, você a arrasta. Veja se ficou azul. Agora ele sabe que precisa estar lá dentro. Agora ele saltou novamente. Se não estiver dentro da grade certa, então esta aqui, quadro zero. Quero que a captura de tela entre nela. Agora vou movê-lo na frente dele, dentro dele. Eu não estou tentando mostrar a coisa toda. Estou apenas dando uma referência visual. Essa é a vibração, a vibração da coisa. Outra maneira de fazer isso é com o selecionado. Na verdade, você não precisa selecioná-lo, mas você pode ir até aqui, ir para Imagem e Vídeo. Você pode encontrar o que você quer. Ray pegou aquela. Faça isso, clique em abrir e, em seguida, eu posso simplesmente clicar onde eu quero que ele vá. Essas podem ser as diferentes formas de trazer imagens. O objetivo aqui é tentar alinhá-los para que fiquem um pouco mais legais, para que eu possa enviar isso a um cliente Isso não é muito amigável ao cliente. Foi isso que poderia ser. Você pode fazer com que essas imagens maiores sejam representadas por coisas pelas quais você é mais influenciado. É assim, mas um pouco disso. Você entende o que eu quero dizer? Eu faço isso desde o início. Compartilhe o wireframe, assine, dê a eles um quadro de humor, essa é a direção que estou indo essa é a direção Eles podem não ter uma ideia muito clara, talvez uma ou duas, então talvez você precise criar alguns painéis de humor diferentes para começar. O que você acha? Essa direção, aquela direção antes de eu passar muito tempo projetando algo. Versão bonita. Versão bagunçada que eu uso quando estou trabalhando sozinho. Novamente, não é para copiar, é para que você possa ver isso. Você fica tipo, Oh, eu nunca pensei em fazer o fundo, essa cor esbranquiçada. É uma cor bastante cinza. E essa combinação azul-petróleo é muito legal. Eu gosto disso. Vou começar a usar isso em alguns dos meus botões e outras coisas. Isso apenas desperta a criatividade e uma parte muito divertida e importante do processo de design, eu acho É isso mesmo. É como fazer uma prancha de movimentos. Versão duvidosa, versão chique. Tudo bem Vamos ver o próximo vídeo. 32. Projeto do curso 06 - Moodboard: Ok, é hora de criar seu próprio quadro de humor. Este projeto de aula é criar um quadro de humor para a empresa que você obteve do gerador de projetos aleatórios. As minhas são as carteiras do Scott. E eu quero que você pesquise na Internet se inspire e faça muitas capturas de tela Ok, então todos os do último vídeo, veja esses sites, mas também veja os seus. Você pode conferir o Pinters e Instagram. Eu não os mostrei. Há uma outra que surgiu na minha cabeça é Mobinn. Ok, mobin.com. Esse é muito bom especificamente para design de aplicativos, ok? Há muitas coisas legais aqui. E, novamente, há uma opção gratuita e uma opção paga. Você precisa fazer login para usá-lo. No momento, isso pode mudar, mas você pode ver que você busca por elementos da interface do usuário, o que é muito bom. Ok, então essa é outra, basta despejá-los todos no arquivo de design do Figma Você pode fazer uma das duas coisas. Você pode fazer as duas coisas se quiser. Você pode fazer a versão grande e feia em que ela está apenas em uma moldura, jogada ao redor e alinhada sem entusiasmo Ou você pode fazer a parte boa ao encontrar um modelo. Pratique o uso de modelos de outras pessoas, coloque-os muito bem. Você pode fazer uma ou ambas e simplesmente tirar uma captura de tela e enviá-la Onde está nosso arquivo de projeto de classe. Você pode fazer isso ou aquilo ou ambos. E uma coisa que você pode fazer é que, primeiro de tudo, eu pintei minha prancha de movimento, a moldura, você pode realmente colorir as molduras. Assim, você pode adicionar, em vez de uma branca, escurecer a mina para separá-la. A outra coisa que você pode fazer é, se quiser outra página, saber que estamos presos a ter apenas três páginas agora que estamos em uma equipe. Se você quiser voltar aos bons velhos tempos quando tinha os rascunhos e tinha quantas páginas quiser, porque não precisa da capacidade de edição no momento O que você pode fazer é ir para casa, e acho que já fiz a minha. Eu fiz. Os meus eram rascunhos. É nisso que estou trabalhando. Posso mover arquivos para meus projetos de equipe, Scott Wallets. E aí temos as restrições de apenas três páginas. Se você quiser voltar aos rascunhos, o que você pode fazer é acessar todos os seus projetos e clicar duas vezes, não no arquivo real, mas apenas nessa área branca do mas apenas nessa área branca fora para entrar nele e clicar com o botão direito do mouse nesse cara e dizer: Ei, eu quero movê-lo de volta para algum lugar onde haja rascunhos Muito obrigado. Os arquivos ainda estão abertos. Na verdade, não abre e fecha. Acabou de ser alterado, e o que você encontrará está nos meus rascunhos, nas áreas existentes, e eu volto às minhas páginas para que você possa criar uma versão do moodboard Nova página, quadro de humor, e crie-a aqui para mantê-la separada Depende de você e do seu TOC. Vou deletar essa página. Vou manter o meu na mesma página só porque gosto de vê-lo quando estou projetando. Depende de você. É isso mesmo. É uma coisa muito simples de fazer. Coloque capturas de tela em uma página e, de alguma forma , transforme-a em um vídeo de alguns minutos. Bom trabalho, Dan. Tudo bem, saia e encontre alguma inspiração. E certifique-se de fazer o upload. Faça o upload para os projetos da classe, a seção de tarefas. Eu vou estar interessado em ver o que você faz. Especialmente quando vemos os mais recentes, é ótimo voltar atrás e ver onde a inspiração pode ter começado. Tudo bem. Agora esse é o fim. Adeus 33. Como trabalhar com colunas e grades no Figma: Olá. Bem-vindo ao vídeo da Epic que fala sobre essas 12 pequenas colunas aqui. De alguma forma, é um vídeo longo porque, na verdade, aplicar as colunas é fácil. Por que aplicamos as colunas, espero que você ache útil, especialmente se você não trabalhou muito em design de sites ou aplicativos. Também existem alguns truques muito úteis que abordamos por toda parte, então não sei, não os ignore Há algumas pequenas dicas e truques úteis além de apenas criar colunas aqui. É uma boa. Vamos nos aprofundar. Vamos começar. Até a introdução é longa Tudo bem, entre. Certo. A primeira coisa é que precisamos de algumas páginas extras. Se você está preso em algo parecido, Oh, eu só posso ter três. Precisamos colocar isso de volta nos rascunhos. Ok, então para fazer isso, volte para casa e encontre em seus rascunhos, encontre o cara em quem você está trabalhando Não, está em projetos. Está bem? E essa pessoa aqui, eu vou entrar nos projetos da minha equipe. Portanto, clique duas vezes na parte externa, não no arquivo real. Ok, posso clicar com o botão direito do mouse e dizer MoveTo move o arquivo Ok, dois, rascunhos e clique em Mover. Ou você pode clicar em Manter e arrastá-lo para os rascunhos. Está bem? Então, o arquivo que ainda está aberto meio que se abre e você pode ter mais páginas. Vamos dar uma olhada e renomear. Vou ampliar Acabei de renomear o escritório móvel para meu celular e desktop Vou adicionar duas novas páginas e chamá-las. Celular e desktop Hi Fi. Estas são minhas versões do quadro Y. Você pode chamá-los de quadro Y, tudo bem. Eu gosto de chamá-los de Lo fi. Vamos para a área de trabalho e eu vou ver as colunas. Vamos apertar a tecla F no meu teclado. Vamos clicar na nota. Vamos até aqui e dizer, eu quero um desktop. Eu quero o tamanho de desktop realmente comum, que é 14 40 por 1024. Você precisa dizer isso assim. Se você for a uma reunião e disser que tem um site com 1.440 pixels por 1024 pixels, eles saberão que você é 1.440 pixels por 1024 pixels, eles saberão que você Por alguma razão, você tem que dizer 14 40 por 1024. Não tenho certeza do porquê. Mas vá para o nosso desktop. Vamos adicionar uma coluna. Eu vou eliminá-los um pouco. Eles estão aqui chamados de guia de layout. Vamos clicar em mais no guia de layout e você receberá uma grade. Queremos mudar para colunas e a contagem de colunas por padrão é cinco por algum motivo, embora a quantidade realmente comum de colunas seja 12. Vamos dar uma olhada. Bem, primeiro de tudo, o que eles são? Eles acabaram de chegar. Se eu pegar o Fk para a moldura, isso me permite fazer algo assim, onde eu pego meu navegador e vou dar uma cor a ele Em seguida, aumente a cor. OK. E eu estou duplicando isso. Esta é minha caixa de heróis, que é o tipo de frequência em que a mensagem de marketing diz: Ei, venha se juntar a nós. Uma imagem inspiradora está aqui. Em seguida, queremos essas cartas na parte inferior. Vou duplicá-lo novamente. Agora, esses cartões geralmente são recursos, como: Ei, junte-se a nós e obtenha melhores benefícios, ganhe mais dinheiro. Economize peso agora, as características do produto obviamente, geralmente estão nessas três ou quatro caixinhas. Eles são chamados de cartões, às vezes cartões de recursos ou cartões de interface do usuário, e essa é uma estrutura muito básica para um site, é por isso que essa grade é realmente útil. Ele permite que você se encaixe nele para que você possa simplesmente ir, Do, e também nos dá um pouco de flexibilidade se você quiser três, mas, na verdade, o que você realmente queria, vou excluí-los é que você queria quatro 12 é facilmente divisível. Por um, dois, três, quatro, seis. Você não pode fazer cinco. Só não faça cinco. Pare de fazer perguntas. Portanto, depende de quantos recursos você tem. A outra razão pela qual fazemos isso é porque é muito comum. E isso é importante porque não há uma regra real. Você poderia ter 13 colunas, mas seu desenvolvedor o encontrará e o prejudicará. Como a pessoa que está criando o site ou se você o está codificando ou usando sites Wordpress, webflow ou figma, seja o que for, a base de código subjacente para ajudá-lo geralmente tem um intervalo de colunas padrão Pode ser ignorado, mas é doloroso sem um bom motivo Bom. O motivo pelo qual é bom é que, se você for um web designer, terá uma compreensão muito boa pontos de interrupção e da capacidade de resposta Para as pessoas que não o fazem, quero fazer uma pequena demonstração rápida apenas para explicar por que é importante focar nisso. Então, eu tenho este site aqui, HubSpot, por nenhuma boa razão além de ser muito bom e Então, quando estamos projetando, temos o site aqui. Vamos dar uma olhada em sua caixa de recursos. Eles têm três. Acontece quando se trata de: sou um desktop, sou um desktop, sou um tablet. Eu sou um tablet lá. O que eles fazem são algumas coisas. Eles trocam o menu por um menu de hambúrguer no mais chique de lá. Então, eles decidiram fazer isso. Mas eles também decidiram ativá-los em vez de continuar apertando-os porque estão começando a ficar bem pequenos. Eles dizem: “Tudo bem , livro, eles dizem, adicionar seu próprio efeito sonoro é descer até a grade Então, o que eles decidiram é: Tudo bem, eu tenho o tamanho de um tablet Vou duplicar isso e vou criar para tablet, então vou até o frame aqui e posso alterá-lo para iPad Pro Vamos deletar algumas coisas e arrumar isso. Então, primeiro de tudo, no iPad Pro, usamos a mesma navegação e caixa de heróis que ainda está lá. Mas eles vão passar de três dois, é isso que eles estão fazendo. Esse é o design que teria dado ao desenvolvedor e diria: Ei, aqui está minha visão de desktop. Aqui está a visualização do meu tablet para que eles saibam o que fazer. Eles continuam apertando isso? Se você não contar a eles, eles continuarão apertando Está bem? Ok, bons desenvolvedores saberão que algo precisa mudar, e você pode deixar isso para eles, ou você pode dizer a eles e dizer: Olha, quando chegar a hora, eu vou fazer isso. Às vezes, as pessoas agem assim. Já fiz isso antes , pensando, certo, esse último não é tão importante e realmente me incomoda que haja essa grande lacuna aqui. Claramente não incomoda Hubspot, mas há uma grande lacuna aqui Acho que você provavelmente precisa disso. O que nós fazemos? Então você poderia desligá-lo como eu acabei de fazer, e o que eu acabei de fazer? Acabei desligar a cor do globo ocular, ainda está lá, difícil de selecionar Ok, então você pode desligá-lo ou adicionar um novo. Um quarto aparece. Está bem? Talvez não seja tão importante, então não está no desktop, mas aparece aqui. Nós temos quatro, então funcionaria bem. Veja, eu gosto de quatro. Quatro é bom. Está bem? Mas isso significa que funciona bem aqui no tablet, mas às vezes três é mais comum, e você precisa descobrir algo para fazer E o que eles fazem com dispositivos móveis, veja isso. Pronto para o Então, agora é um site móvel e eles disseram, certo, eles se tornam tão grandes em dispositivos móveis. Veja que eles vão desse tamanho para um tamanho gigante no celular. Eles dizem, certo, design móvel, arraste isso. Eu vou deletar e você. Eu vou fazer isso. Estou apenas digitando Você pode ver a digitação. Você será nosso iPhone 16. E o que decidimos é isso e isso vai acabar. Então, vou ter a largura total, e vou ter uma para garantir que estejam na moldura móvel. Não consigo vê-los, então vou clicar no celular, digamos, no conteúdo do clipe, r. Mostrar como rolar mais tarde, mas basicamente, eles precisarão rolar para o celular para que caibam. Aí está. Essa é a capacidade de resposta móvel e é por isso que estamos nos preocupando em fazer essa Só nos dá algumas dicas, porque o que o desenvolvedor fará é dizer: essa caixa aqui, essa caixa aqui Quando tem tantos pixels de largura, 14 40, tem um pouco de código para anexar a este pequeno cartão aqui para dizer, B com três colunas de diâmetro. Mas se a largura do site for 800 pixels, B, quanto é esse 16 de diâmetro. Então, é muito fácil. Você pode simplesmente dar um raciocínio para dizer que, se for desse tamanho, tiver tantas colunas, e quando estiver ligado, você sabe, 600 pixels de largura, como um dispositivo móvel, precisa ter 12 colunas de largura Não sei, Malusa usa. Vamos dar uma olhada no celular. O celular é um pouco diferente. Então eu vou até aqui, pegue um telefone, vá Dean, você pode desenvolvê-los todos em sua própria página. Estou apenas separando-os para este curso. Muitas vezes, é isso que eu faço. Eu desenho o que é mais importante para o site. Trazendo um laptop, somos um site que prioriza o desktop, primeiro projetamos coisas e depois descobrimos como elas funcionam em dispositivos móveis. No entanto, muitos sites serão móveis primeiro, que significa que primeiro criem suas coisas de design de interface de usuário para dispositivos móveis e depois elaborem uma versão para desktop , porque é um site principalmente móvel Eu tenho um iPhone 16. Vou até a grade e Dan disse que deveríamos usar colunas de 12. Isso não é tão útil. Então, quando você trabalha com um telefone celular, a tecnologia subjacente será 12, mas é mais fácil projetar com seis. Seis é divisível por 12, então, você sabe, está tudo bem É muito mais fácil fazer isso com seis em vez de 12. Então, vou pegar minha moldura daqui. Está bem? Na verdade, não precisamos fazer isso. Você entendeu a ideia. Basta criar com seis para celular e 12 para desktop. E provavelmente 12 ainda para tablet. Se você criar para tablet , a decisão é sua. Depende do trabalho. É um grande trabalho que você também tenha muito tempo e recursos para desenvolver uma versão para tablet? Talvez seja um uso intenso para o seu site. Então, definitivamente, dedique algum tempo desenvolvendo o que você chama de versão para tablet. Às vezes, porém, os designers pulam o tablet e simplesmente usam o desktop e celular, deixando o desenvolvedor trabalhar com o tablet Não está certo, mas muitas vezes você encontrará apenas modelos e outras coisas, que têm apenas dispositivos móveis e computadores. Por que posso ver esses nomes aqui? É como um questionário pop. Por que posso ver o quadro três, e tudo isso está confuso. É porque eles não estão realmente na minha moldura móvel. Os nomes desaparecem quando estão lá dentro. Outras coisas que eu quero te mostrar é que eu vou para F, eu vou para U. Se você está criando um site móvel, você usa colunas Se você estiver criando um aplicativo para IOS, para Apple ou para Android. É muito comum não usar colunas porque elas não são tão flexíveis. Não há todo esse pulo por aí. Um aplicativo só aparece em um telefone e é muito comum usar aquela grade que apareceu primeiro. O tamanho da grade é muito comum usar 12. Ok, então esse é um tamanho ou forma muito comum de trabalhar quando você está criando um aplicativo, porque você pode ser um pouco mais preciso em um aplicativo. Você sabe a altura e a largura. Você notou que em um aplicativo você faz menos rolagem. É como se tudo estivesse definido em uma espécie de uso forçado do telefone. Tudo está meio organizado e meio deliberado em um telefone Portanto, seria comum usar uma grade de oito pontos para o design de um aplicativo. É o que os desenvolvedores do IOS usarão. Eles usarão uma grade de oito pontos. Então, novamente, se você acabar não o usando para espaçar as coisas, isso causará um problema a elas. Portanto, opte por uma grade de oito pontos. Tenho algumas outras coisas. Vamos para o topo do disco. Vamos clicar em Disktop aqui embaixo. Vamos clicar nesse pequeno ícone para abrir as configurações. Está bem? Então, temos 12. Vamos dar uma olhada nesses outros. Vamos dar uma olhada em Magin. Então Magin são as bordas. Está bem? Eu poderia colocar uma margem de oito e colocar uma pequena lacuna nas bordas aqui. Vamos fazer algo grande. Vamos fazer 80. Está bem? Aqui são apenas as bordas. Quando você está desenvolvendo as bordas de um site ou as projetando, não é muito importante saber qual esse número exato , porque ele é muito flexível. Veja isso. Se acessarmos este site da Hubspot, você notará a visualização do Disktop Você vê que o site real só aparece nesta parte intermediária. Tudo isso se estende até a borda. Muitas vezes, as pessoas não querem. Alguns sites fazem isso. Na verdade, eles se desenvolvem para telas muito grandes, como as grandes telas envolventes gigantes ou as grandes IMAX, e terão Muitas vezes, porém, eles simplesmente dizem: “Tudo bem, estamos desenvolvendo para essa parte intermediária, e essa parte aqui vai ficar um pouco apertada, basta estendê-la e adicionar essa sombra projetada até estendê-la e adicionar essa O mesmo acontece com essa cor aqui. Veja, não há nada aqui, mas parece que está assumindo o controle de todo o site. Isso também é uma coisa muito comum de se fazer. Para ter uma margem, vou usar 100. Significa apenas meu site porque tem 14 40 de largura. Eu os coloquei 100 em cada lado. Realmente, estou projetando um site no meio aqui que é 12 40. Vá para baixo, 12 40 lá dentro. Vou desenhar isso para minha caixa de heróis. Provavelmente vou fazer com que o NAV vá até o limite Mas minha caixa de heróis, minhas bagunças de marketing estarão aqui Eu vou deletá-los e vou dizer, você está aí. E quantos estamos fazendo? Não consigo me lembrar em nosso quadro Y. O que estamos fazendo? Temos três caixas de recursos. Então, vou até aqui e digo, Comando D ou Controle D para duplicá-lo novamente. Esse vai ser o meu básico. A outra coisa que preciso fazer antes de começar a desenhar as caixas é clicar na moldura principal. Vamos dar uma olhada na última coisa lá dentro, que é a sarjeta. calha é o espaço entre as colunas e é muito comum de usar Oito é um número muito importante na criação de sites e aplicativos. Muito espaçamento e tamanho da fonte são feitos com oito. Então, oito por si só é provavelmente muito pequeno. Úbere. Ok, mas vamos fazer 16. Está ficando certo. Você provavelmente verá esses números quando estiver trabalhando em web e design de interface do usuário, você verá 16. Você verá qual é o próximo, 24 e 32, ou apenas múltiplos de oito Vou usar 32 como sarjeta. É outro tamanho muito comum para calhas. É grande o suficiente para nos dar um pouco de espaço entre essas caixas sem ser muito grande. E novamente, aqui, se eu estiver usando o que era, 32, se eu arrastar isso para baixo, você pode ver o espaçamento entre esses caras? Você pode ver que é meio que um salto mover isso para cima até a parte superior aqui, e eu quero movê-lo um pouco para baixo O que nós temos? Posição. O y, que é o para cima e para baixo. Eu vou dizer mais 32. Eu sei que é exatamente o mesmo que isso é lá embaixo. Você notará que eu fiz matemática nos campos. Eu faço muito isso. Acho os números complicados O que eu acabo fazendo é, digamos, qual é a outra boa? Oh, quando eu estava fazendo a coluna, então vamos dar uma olhada nisso. Eu faço isso um pouco. Eu sei que são múltiplos de oito, mas às vezes fico confuso, é 32, 34? É 36. Então eu faço coisas assim oito vezes quatro delas. Então, quatro oitavos. Basta usar o asterisco quatro vezes e pressionar Enter, e é 32 Ou se você disser, qual é a próxima opção, você pode fazer menos oito e pressionar Enter, e isso dá 24 Eu gosto de fazer isso em muitos desses campos aqui. Basta fazer todo esse grupo também. Podemos muito bem alinhar tudo, entendi isso, vou movê-lo. X e Y são misturados. Eu só vou dizer mais oito. Lembra o que significa misto? Você se lembra? Isso mesmo. Só quer dizer que realmente não sabe. Eu fiz mais oito. Desfazer. É porque temos muitas coisas selecionadas. É tipo, Oh, eu realmente não sei o y. Eu sei o Y disso e daquilo, mas juntos, é um pouco estranho Então, vou dizer mais 32 apenas para movê-lo para baixo. Tudo bem, então temos algumas grades um pouco de consistência Agora, a última coisa é que eles não são impressos nem exibidos. Veja isso. Se eu for dar uma prévia, você notará isso. Na verdade, eles não aparecem. As caixas sim, mas não a grade real. Você pode ligá-los e desligá-los indo até aqui e ligando e desligando o I. Agora é o Shift G para ligar e desligar como um atalho. Deve ser o Control G em um PC. Oh, eu não tenho certeza. Ambos funcionam no Shift G em um Mac e no Control G em um Mac. Um deles funciona para PC. Digite-os, deixe-me saber quais são os comentários. Tenho certeza que é um desses. Eles são muito bons para o layout , mas são feios Muitas vezes eu os ligo e desligo. Mas você pode simplesmente usar o globo ocular, ligar e desligar. Ooh. Tudo o que sei é que esse está ficando muito longo. Eu também quero apresentar algo agora. Então, apenas um pequeno fato interessante, é estranho. Vamos usá-lo no curso. Eu quero apresentá-lo agora. Vamos para o desktop. Vamos para este. O que você pode fazer é, eu tenho essa grade aqui. Eu tenho que digitar de novo? Não se você a tiver duplicado, obviamente, mas se você tem uma nova página e pensa, por que isso não está aparecendo nesta O que você pode fazer é dizer. Na verdade, esse é o tamanho errado nele, Dist. Ok, é que eu posso copiar e colar. Veja isso. É uma coisa um pouco estranha no figma, mas é muito útil Se eu clicar na área de trabalho deste aqui, posso ir até este. Eu tenho isso. Eu posso transformá-lo em um estilo mais tarde. Mas o que você pode fazer é assistir isso. Eu posso clicar em Linha. Aqui é a Terra de Ninguém. Veja, eu posso fazer isso para nem tudo. O que posso fazer para preencher? Sim. É nesta área da terra de ninguém que eu posso copiar algumas coisas. Veja isso. Eu selecionei isso, eu quero você. Eu simplesmente uso o Command C em um Mac, o Control C em um PC. Clique aqui obter a moldura, cole e ela será exibida. Isso é interessante para muitas coisas. Vou apresentá-lo agora. Faremos isso algumas outras vezes no curso. Porque provavelmente, no momento, é mais fácil simplesmente duplicá-lo Então você tem as colunas chegando. Caramba, Dan, de alguma forma você se transformou em desenhar 12 linhas em toda uma saga épica Espero que você aprenda alguma coisa. Se você já é um desenvolvedor, muito disso ressoará em você, se você nunca trabalhou na web ou na interface do usuário antes Espero que isso seja útil. É confuso Você fica tipo, há muita coisa para absorver. Está tudo bem. Eu queria dar a vocês um pouco dos bastidores de por que nos preocupamos em escolher 12 Mas se você não tirar mais nada, basta escolher 12 e seguir em frente. É isso mesmo. Te vejo no próximo vídeo. 34. Dicas, truques e preferências no Figma: Oi, pessoal. Vou fazer um vídeo sobre os tipos de atalhos, onde encontrá-los, algumas dicas e truques do Figma Agora temos alguma experiência. É hora de adicionar algumas partes do fluxo de trabalho para nos acelerar. Então, uma das primeiras coisas que quero mostrar a vocês é esse pequeno ponto de interrogação. Todos nós meio que aprendemos que a ajuda dentro do software nunca é muito boa. Figma é muito bom. Clique no pequeno ponto de interrogação. O que é bastante interessante está nos atalhos do teclado E esses são todos os atalhos de teclado que não são óbvios Obviamente, você pode passar o mouse sobre algumas coisas. Sabe, eu sei que a ferramenta da caneta é P porque diz que está lá. Mas aqui vamos te mostrar todos os outros. Então aperte um pouco. Alguns deles são azuis. Os azuis que já usamos neste curso. Provavelmente já usei todos eles. Este é um novo login para mim neste curso, alguns deles ainda não estão azuis. Não sei, parece um desafio. Use todos eles. Mas dê uma olhada aqui e encontre algumas que você diga : Oh, eu gostaria que fosse um atalho para o strike through Shift Command X. Também mostrarei a versão para PC se você estiver no PC Vamos dar uma olhada em um dos meus favoritos. Está lá dentro. Acho que é seleção. Seleção profunda. Então, quando estiver trabalhando, vamos até esta caixa de recursos aqui. Então, eu estou no meu celular Lo Fi. Oh, outro atalho é se você selecionar algo, você pode ver que eu tenho o selecionado aqui embaixo? Em vez de ampliar diretamente para o meio da tela, você pode pressionar Shift dois no MacNPC O que eu vou fazer é ampliar o que você selecionou. Fizemos o Shift one, que é mostrar tudo no meu documento. O que vocês estão fazendo aqui? Não preciso mais de vocês. É um turno. Mas se eu selecionar algo, digamos que eu clique nesse texto aqui embaixo e pressione Shift 2, ele amplia diretamente o que eu selecionei Essa é útil. Diminua um pouco o zoom. O que nós temos? O outro atalho é o Deep Select. Isso aqui eu agrupei. Dentro desse grupo há outro grupo. Dentro desse grupo há outro grupo. Há muitos grupos. Então você acaba clicando duas vezes. Digamos, eu quero clicar neste ícone aqui. Eu o seleciono uma vez. Tenho o grupo. Clique duas vezes nele. Entre nesse grupo, clique duas vezes nele novamente, entre nesse grupo, clique duas vezes nele novamente para entrar e pegar o ícone. Muitos cliques. seleção profunda é manter pressionada a tecla de comando em um Mac, tecla de controle em um PC e clicar de uma só vez, e ela mergulha em todos esses grupos, quadros ou componentes Tudo simplesmente pega a coisa sobre a qual você está com o mouse sobre. Então, isso é uma seleção profunda. E eu só quero que você por exemplo, passe por aqui, use os atalhos do teclado e dê uma olhada em si mesmo e diga: Oh, essa é boa. Vou anotar isso. Lembre-se de que você tem uma planilha de atalho em seus arquivos de exercícios com os principais, mas há apenas algumas que você achará pessoalmente úteis para seu fluxo Agora, o outro atalho é o atalho para controlar todos os atalhos É chamado de ação rápida? Como se chama? É chamado de botão Ações. Você pode ver isso lá. Command K em um Mac, Control K em um PC. Esse é outro bom ponto em que às vezes há teclados que não são os teclados em inglês que Se você acha que não funciona na minha outra linguagem de estilo, mouse aqui e você também verá todos os atalhos ao lado Não use apenas atalhos no ponto de interrogação, mas também ao lado deles aqui. Dê uma olhada. Se eu terminar este curso e estiver tipo, use o Command K e não é adequado para. Dê uma olhada aqui no que está listado aqui. Tudo bem, o que eu quero é a chave das ações. Comando K. Esse é o atalho mais importante. Basicamente, você pode pedir à Figma que faça o que quiser. Eu adoro isso. Veja isso. Digamos que eu queira que isso seja maiúsculo. Eu sei que posso entrar aqui, posso rolar, posso acessar as configurações e posso descobrir que é essa aqui. Mas pensamos em muitas coisas é muito longo ou você não consegue se lembrar onde está. Eu posso clicar aqui, pressionar o Comando K e apenas digitar em cima. Tudo bem. Então, por que há um aviso. Pare meu Comando K. De qualquer forma, então eu tenho o Comando K selecionado, vamos usar o Comando K, e então ele apareceu O seu pode fazer isso e eu posso digitar em maiúsculo. Veja, passa por todos os menus e diz, você quer dizer isso? Você fica tipo, Sim, eu quero dizer isso. Co. Digamos que eu tenha essa cor aqui e queira selecionar todas as outras cores. Eu sei o que preciso fazer e sei que é possível. Então, eu vou usar Comando K. Em vez de tentar encontrá-lo, vou selecionar e vou dizer, aí está Selecione com o mesmo preenchimento. É clicar em tudo que tem a mesma cor de preenchimento desses caras. Eu posso dizer, certo, eu quero que você mude agora. Se você se lembrar de como é chamado vagamente, basta usar o Comando K, digitá-lo e ir direto ao assunto Tudo está aqui. A outra coisa útil é que, se você não clica com o botão direito do mouse, tudo bem, há muitas coisas úteis Está bem? Se você clicar com o botão direito do mouse nas coisas, é contextualmente sensível. Então, ele vai te dar uma lista de coisas que você pode fazer com isso. Quando você clica com o botão direito do mouse no texto, ele fornece coisas diferentes e também os atalhos Mas, muitas vezes, isso pode ser muito útil. Então, se eu clicar nisso e clicar com o botão direito do mouse, quero selecionar a camada. Você vê que ele está pegando todas as coisas diferentes que estavam embaixo do meu mouse? Eu quero o grupo? Você quer o grupo dentro do grupo? Você quer a imagem que está dentro do grupo que está dentro da guia de recursos forneça detalhamento de onde você selecionou sua coisa. Portanto, não se esqueça de clicar com o botão direito do mouse. Há coisas úteis lá dentro. Preferências. Não há muitos. Se eu for até o pequeno F para Figma e descer até as preferências Tem esses. Você já leu e encontrou alguma coisa que considere útil. Algumas das coisas que eu gosto de mudar são manter a ferramenta selecionada depois. Se eu pegar a ferramenta retangular e desenhá-la, por padrão, ela normalmente volta para a ferramenta de seleção, e você fica tipo, Não, agora ela vai ficar na ferramenta que você selecionou Outro útil que eu gosto é a roda de rolagem para Zoom. No momento em que minha roda de rolagem no mouse, talvez você não tenha uma subindo e descendo na página. Isso é totalmente legal. Mas você pode vir de um programa diferente em que você pensa, cara , que normalmente aumenta o zoom Vou mudar isso para a roda de rolagem para Zoom. Uma última que eu gosto ok, é toda essa preferência pessoal. Aquele que diz que o teclado amplia a seleção. Esse é o único. Está bem? É que antes, quando eu aumentava o zoom, ele simplesmente ia para o meio da tela Agora, se eu tiver isso selecionado e clicar em Zoom, então estou apenas usando meu Command plus em um Mac, Control plus em um PC, ele meio que amplia o que você selecionou Tudo bem, então dê uma olhada nas preferências, mude o que quiser. Oh, um último é cutucar. Vamos dar uma olhada nesse . Vamos entrar aqui. Vamos para as preferências e vamos para a quantidade de incentivos. Que diabos é isso. Cutucar é quando eu fui, uh, para a esquerda e para a direita com meus ancinhos Lembro-me de como o Shift empurra em pedaços maiores Quando você está trabalhando em uma grade de oito pontos, especialmente para um aplicativo, você quer que ele se mova em incrementos de oito pontos Mesmo que você não esteja trabalhando em um aplicativo, prefiro que o empurrão seja de oito pontos Vamos para as preferências, vá para o valor do empurrão. Um empurrão para um é um pixel. Isso é bom. Mas eu quero um grande empurrão quando você segura o turno para oito Agora, quando ele se move, eu sei que está se movendo oito pixels. Tudo bem, então essas são algumas das minhas dicas. E o maior deles é Command K ou Control C ou PC e basta digitar o que quiser. Basta digitar o layout. Então mostrem ao Lou, pessoal. Os guias idiotas estão escondidos. Poderíamos ao menos vê-los antes? Estamos no caminho errado. Vamos ver esse aqui. Vamos para Comando K. Mesmo que você não se lembre do atalho, você pode se lembrar do Comando K e depois digitá-lo Você pode ver que eu posso ligá-los e desligá-los. Cada atalho em Comando K, Controle C do PC. Tudo bem, é isso. Te vejo no próximo vídeo. 35. Inspiração de cores e conta-gotas no Figma: Olá. Vamos falar sobre inspiração de cores. Estamos estudando nossa maquete de alta fidelidade , então precisamos escolher as cores Você pode receber cores corporativas e ficar preso às cores, mas em nosso projeto de classe, podemos escolher as nossas. Por onde começamos? A inspiração de cores pode vir de vários lugares. Há muitos lugares online. Gosto muito de alguns e quero sugerir que os coolers são muito bons, e o Color Hunt é outro que eu uso muito O bom deles é que eles apenas mostram cores que funcionam juntas. Você pode ficar tipo, Oh, é isso. O que eu quero? Não role muito. Eu gosto desses quatro juntos. Eles são combinação de cores muito legal. É muito fácil colocá-los no Figma. Eu posso simplesmente clicar neles. Ok, e clique nisso. Ele diz que foi copiado ou você pode copiá-lo e colá-lo daqui de baixo Depois, no Figma, vou até o Hi Fi, ampliarei um pouco Vou criar alguns retângulos. Vou até essas molduras só porque estou pressionando a tecla Shift para deixá-las perfeitamente quadradas e, com elas selecionadas, vou me livrar da FFF e simplesmente colar o código , pressionar enter e a cor acabará Vou aumentar o zoom. fazer uma cópia e depois voltar para os refrigeradores e, na verdade, pesquisar cores, copiá-la depois voltar para os refrigeradores e, na verdade, pesquisar cores, também e depois trabalhar para trazer as Outro bom é color.adobe.com, e isso tem algumas coisas interessantes em tendências e em Explorar tendências e em Você pode ver aqui que as imagens estão orientando os esquemas de cores, o que é muito legal. Explore é só você ir até aqui e dizer: quero ver todos os temas de cores mais usados e populares neste mês. Que as pessoas estão usando. Eles têm uma grande biblioteca de pessoas usando cores, é muito interessante ver o que está sendo usado. Vá lá, carregue. Não está funcionando agora, mas funciona outras vezes. Outros ótimos lugares para obter ideias de cores. Especialmente se você é novato em design em geral. Significados das cores. Este é figma.com slash Colors e, digamos, ele quer usar essa cor, mas você precisa conversar com seu cliente Eu gosto de vermelho. Não é bom o suficiente. Você precisa dizer que o que é o Chili fornece uma linguagem para poder orientar o cliente a explicar por que você o escolheu, e apenas fornece, sim, algum idioma para usar Acho isso muito útil. Além disso, está me dando algumas cores que funcionam com ele. Outro bom da Figma é figma.com slash Está bem? E então você pode escolher sua cor, e ele escolherá uma cor complementar. Um que funcionará em conjunto. Eu gosto desse. Eu gosto mais desse. Outro útil é um gradiente. É muito bom para gradientes, e você pode percorrer os gradientes em um segundo, permitindo que você encontre uma boa inspiração para gradientes O que eu uso muito é do meu quadro de humor. Digamos que você esteja fazendo seu quadro de humor, procurando coisas e fazendo carteiras, mas goste dessa cor Então, eu vou fazer uma captura de tela, eu vou embora. Eu gosto dessas combinações de cores. Mesmo que não haja uma carteira nela, ela ainda pode fazer parte do meu quadro de humor Eu vou entrar em Figma. Vou ao meu quadro de humor. Onde está meu quadro de humor? Está acima do meu documento de registro. Só está passando um tempo por aqui. Vou pegar minha captura de tela e trazê-la. Basta arrastá-lo para a página a partir do meu localizador. O legal disso é que posso dizer que o Zoom in é pegar minha ferramenta retangular ou a ferramenta de moldura, desenhar isso, pegar meu colírio, uma ferramenta, que é a tecla ocular do teclado e aquela, tudo bem Aqui, colírio, uma ferramenta, você pode começar a trabalhar e começar a se apropriar das cores Ok, acho isso realmente mais fácil do que copiar e colar todos os números higodecimais Eu faço isso por eles também. Digamos que, se eu estiver em refrigeradores, vamos pegar o gerador Este é aleatório. Você pode pressionar a barra de espaço neste, apenas para percorrer os aleatórios. Eu não sei, é legal. Digamos que eu goste desse grupo, posso simplesmente fazer uma captura de tela dessa grande fatia colocá-la no Lá vamos nós. Eu uso o é muito grande. Maciço. Diminua a escala, aumente o zoom e eu uso a ferramenta conta-gotas novamente Vou fazer com que você faça uma cópia desses caras aqui. O que eu quero? Eu quero um, dois, três, quatro, cinco, posso simplesmente usar meu conta-gotas para retirá-los em vez de copiar e colar esse Perdi isso. Meu último. Agora eu tenho minhas cores. A outra coisa que você pode fazer é dizer, eu gosto desses, mas desta aqui, eu preciso de outra versão . Eu vou embora. Aqui, você pode começar a mexer nos controles deslizantes, como fizemos anteriormente Eu quero um que esteja um pouco mais saturado talvez entre aqui, entre em hexadecimal Vou mudar para brilho de saturação de matiz e quero que seja brilho de saturação de matiz Saturação é essa aqui? Vou usar minha seta para cima para encontrar uma que esteja mais saturada. Você vê aqui? Você pode começar a dividi-las em alternativas para essa cor primária. Talvez um mais dessaturado. Aí está. Isso é muito dessaturado Tudo bem. Essa é uma forma de começar a usar cores, encontrar inspiração e simplesmente continuar usando a ferramenta Eyedropper para extrair cores que você possa usar em seu design 36. Como criar uma paleta de cores no Figma: Oi, todo mundo. Neste vídeo, vamos criar uma paleta de cores com a qual podemos trabalhar para nosso design Teremos uma cor primária, secundária e de destaque. Criaremos algumas cores de interface e, em seguida, teremos algumas variações de nossas cores primárias, secundárias e de destaque Tudo bem. Não é a única maneira oficial de fazer isso. É o jeito que eu faço. Pensei em compartilhar que acho muito útil, quando estou começando a criar um conceito, ter algum tipo de amostra de cores pronta para ser lançada Tudo bem, vamos começar. Então, vamos criar uma paleta de cores mais utilizável Você começou a fazer isso pela metade. Vamos fazer um pouco mais. Vamos depois do tom do retângulo, desenhar um retângulo. Vou começar com a cor que eu quero. Eu gostei desse roxo aqui, na verdade, principalmente porque quando estou vendo o marrom do couro das minhas carteiras, parece uma boa cor roxo parece desaparecer. É, eu gosto com isso. Você pode obtê-lo em seus sites de inspiração de cores. Você pode retirá-lo do seu gráfico. Você pode receber uma cor da empresa. Ok, eu gosto de algo assim. Agora eu preciso de uma cor para combinar com isso. Ou você a escolheu ou é uma cor da empresa com a qual você precisa trabalhar, o que você pode fazer é pegar essa cor e escolher alguma coisa. Você está procurando uma roda de cores. Há muitos online. Usaremos a roda de cores de barra Figma one, figma.com, roda hífen de cor de barra e você pode publicá-la Esse é o roxo que eu quero no fundo, aqui você pode ver. Foi escolhida uma cor complementar. Eu gosto disso? Eu não tenho certeza se eu sei. Gratuito, como você verá aqui, é completamente oposto na roda de cores, geralmente é um ótimo lugar para começar. Como o que estou procurando, talvez um roxo que seja um pouco mais, menos no verde roxo, mas mais no Is that still purple Pus de mostarda roxa e azul. Estou curtindo isso Posso copiar isso e descobrir que pode ser uma boa cor secundária à minha cor primária. Essa é a cor principal da marca e essa será a cor primária. Mas nem sempre você não precisa usá-lo. Os sinais coloridos não são tanto uma ciência. Muitas vezes, você pode simplesmente ir e pegá-lo. Eu também gosto de dividir porque, dividido, ele vai diretamente para o outro lado, mas você pode ver qualquer um dos lados do outro lado. Dividir. Eu gosto desse. Essa é mais minha geleia. Definitivamente, é verde embaixo. Eu gosto desse roxo e marrom. Vou usar isso também? Eu realmente não gosto disso. Eu não sou. Mas resolva isso e você poderá descobrir que, ok, existem modelos diferentes para isso. Oh, eu realmente odeio isso. Square é muito bom. Você pode ver esses. Muitas vezes, quando você está trabalhando, você precisa de pelo menos duas cores, uma primária e uma secundária. Muitas vezes, porém, quando estou trabalhando, gosto de ter uma cor de destaque, como uma cor terciária, três delas É isso mesmo? Ou é isso? Meio que trabalhando para frente e para trás. No meu Mac, posso pressionar a aba Command. Acho que você pode usar a guia Controle em um PC para alternar entre os aplicativos Estou indo entre o Chrome e o Figma. E o que eu quero? Não tenha medo. Vá embora, acho que sei o que quero. Vou clicar na roda de cores aqui e voltar, Oh, eu gosto disso? Isso é bom? Não tenho certeza Vou superar isso por um tempo e, não sei, acho que quero mostrar a vocês que não é uma ciência completa Provavelmente quero algo mais brilhante para minha cor de destaque. Quero isso pronto. Eu ia avançar um pouco. Aqui estamos. Talvez não. Talvez deste lado do vermelho, talvez laranja. Tudo bem Voltarei em um segundo depois de escolher uma cor. Passei anos mudando todas as cores. Ainda não tenho certeza, mas é um lugar bom o suficiente para começar. O que eu gosto de fazer então é que temos nossa cor primária, secundária e terciária ou de destaque Use muito, use um pouco, use com moderação, coisas muito interessantes. E o que eu gosto de fazer é que você não pode simplesmente usar essas cores. Você precisa de um pouco mais. O que você acaba fazendo é pegar essa caixa, puxá-la para cima e dizer, certo, eu gosto dessa, mas preciso de uma mas preciso Então, vou clicar aqui. Eu vou para o meu HSB. Eu vou para. Você pode simplesmente arrastá-lo para baixo. Vou pegar meu brilho, segurar a tecla Shift e pressionar algumas vezes. Eu tenho uma versão mais escura. Eu vou fazer uma versão mais leve. Ok. E eu vou subir um pouco. Está bem? Então, eu quero uma versão mais leve. Agora, você não precisa simplesmente subir e descer no escuro. Algumas cores funcionam muito bem em torná-las um pouco mais escuras e um pouco mais claras Alguns deles ficam nojentos. Eu não sei sobre esse. Acho que isso vai ficar nojento. Então, vou aumentar o brilho, diminuir um pouco. Não, ficou tudo bem. O que você também pode fazer é deixá-lo mais escuro, mas também menos saturado Não existem regras de cores rígidas e rápidas Espero que algumas dessas dicas ajudem você se você é novato em entender melhor Então, aquela que fica mais brilhante se torna uma cor totalmente nova Então, eu quero obter a saturação e reduzir isso também Talvez eu também diminua um pouco o brilho. Sim, lá vamos nós. O mesmo com este. Vamos fazer isso. Eu vou pular junto com este Tudo bem Então aí está. Essas são minhas cores. Vou usá-los principalmente, mas haverá momentos em que precisarei de um pouco de contraste em que posso usar isso ou talvez isso, apenas para ter um contraste mais claro entre os dois ao mesmo tempo, manter o mesmo tipo de zona de cores O próximo é branco e preto. Então, branco e preto, você pode usar branco e preto completo. É muito comum, porém, não usar apenas branco, mas usar alguma coisa. Você pode ver a parte de trás do Figma, eles usaram esse esbranquiçado para essa cor de interface Vamos criar nossa própria cor de interface? E podemos combinar o plano de fundo? Basicamente, oh, oh, fiquei bem perto. Ok, então é muito comum ter um pouco de branco, apenas um pouco de cinza. motivo pelo qual temos uma cor de interface que não é exatamente branca é para que possamos fazer coisas como se eu deixasse isso aí. O que eu poderia fazer é pegar tudo isso e movê-lo para esse outro plano de fundo. Vou reduzi-lo pressionando a tecla shift para que ele se ajuste bem ou usarei sua ferramenta de escala, apenas para que seja facilmente visto, caso contrário, ele se confundirá no A razão pela qual temos isso é, digamos que eu tenho uma moldura e é um fundo branco. Eu quero ter uma caixa pop-up que apareça em cima dela e eu tenha um pouco de contraste para poder separá-la do fundo Posso adicionar um pequeno traço. Isso é apenas um pixel, que é realmente uma cor clara. Só para ter, vamos adicionar uma sombra projetada ex sombra projetada. Ainda não os abordamos, mas você pode acabar tendo esses modelos que aparecem em seu aplicativo eu provavelmente posso eliminar o derrame agora. A sombra suspensa está fazendo o trabalho e veja que há um bom contraste entre as duas Você pode fazer o contrário e ter esbranquiçado no fundo e ter todos os seus pop-ups brancos, depende de você. Ok. E, novamente, em termos de cores, você pode escolher o cinza que quiser, mas é comum ter apenas branco e preto, cinco deles. Você está esbranquiçado até o preto mais escuro. Muitas vezes, também com preto, não é tão nítido. Arraste-o até aqui e use tudo preto. Você poderia fazer isso. Não há nada de errado com isso. O que eu gosto de fazer é descobrir que sim, você pode escolher um preto frio ou quente. Você pode decidir que eu preciso ver todos eles um pouco com o Zoom. preto quente está na parte inferior aqui, mas no controle deslizante de matiz, vá para uma cor amarelada, uma cor dourada e escolha um preto , mas aí O preto quente está na parte inferior aqui, mas no controle deslizante de matiz, vá para uma cor amarelada, uma cor dourada e escolha um preto , mas aí dentro. Não é muito. Vamos compará-lo com o preto normal. O preto normal está aqui sozinho, não é muito, mas se você comparar com esse cara, você pode ver que há apenas um calor neste aqui e podemos ficar ainda mais quentes, mas mais escuros, você acaba com esse tipo preto quente em vez de preto frio Bem, isso é um preto liso, preto quente. Vamos ver a comparação. Vou fazer isso no slide aqui de um preto frio. Você pode entrar aqui e dizer: Tudo bem, eu quero que seja um preto frio , então vou usar o azul verde e escolher um preto que seja muito escuro Mas aqui, você consegue ver a diferença entre os dois? Sozinhos, eles parecem bem pretos. Mas com seus amigos, você pode ver o frio, calor, e depende de você qual caminho você quer seguir Decida se você quer esse tipo de preto quente ou frio combinando com suas cores. Eu vou escolher o preto. E você pode ter um azul meio legal. Você também pode ter um estilo verde meio frio. Depende de você. Eu poderia entrar em uma espécie de borda roxa até Ok. Sim, isso funciona para mim. Então você está aí. Agora eu vou pegar isso, pegar o iba dropal e dizer assim, precisamos de um, dois, três, quatro, cinco estágios Eu preciso de um no meio. Esse aqui, eu vou roubar da mesma cor Eu vou dizer que não é tão escuro, então precisamos ser muito mais brilhantes Você pode simplesmente lembrar o brilho da saturação de matiz. Essa é essa e suba, segure a tecla Shift, e você pode ver aqui, não é cinza. Eu quero estar aqui. Eu quero que seja cinza, mas me aqueça usando um pouco desse azul. Você pode ver isso aqui? É um cinza frio. Este aqui vai estar em algum lugar no meio. Então eu vou embora, largo tudo e vou, que ainda está na zona azul, mas mais aqui em cima. Oh, não, precisa estar escuro, em algum lugar lá dentro. Eu gosto disso. Tudo bem, faremos nosso último. Vai ficar no meio do caminho entre esses dois caras, e nunca será apenas um arrasto de 20% ou 50% Aí está, vou deixá-lo mais claro, mas parece muito azul, então vou vir aqui e ter um toque de Tudo bem Eu tenho minhas cores com as quais posso começar a construir. Eu tenho uma cor de destaque primária, secundária e, em seguida, essas são as cores da minha interface Texto, caixas, interruptores, esse tipo de coisa. Agora, estamos na fase conceitual. Isso pode ser ajustado rapidamente porque você descobrirá que o usará e dirá : Ah, isso não funciona ou parece horrível, existe uma combinação e você pode atualizá-la Mas é bom começar , especialmente quando você está usando painéis de humor e fica tipo, Oh, eu gosto desses Ah, como com o roxo. Vamos trocar? Não, Dan. Foco. Eu realmente quero essa cor agora em vez dessa cor de mostarda Tudo bem Desça. Tudo bem É assim que eu escolho as cores. Não é a única maneira oficial. Há muitas maneiras de fazer isso. Você pode pegar emprestado de sites coloridos e obter algumas ideias deles. Mas brinque com a roda de cores , se você nunca a usou antes, para ter uma ideia do que a ciência diz que você deve usar e, de qualquer maneira, faça suas próprias coisas Tudo isso é tudo. Nos vemos no próximo vídeo. 37. Como fazer degradês no Figma: Você. Vamos examinar os gradientes dentro da Figma Olá gradientes. Vamos fazer essa sutil. Vamos fazer um com três cores. Eu vou te mostrar como criar um gradiente que tenha uma transparência, para que pareça um desbotamento Tudo isso e muito mais, na verdade, apenas isso dentro do Figma. Vamos começar. Tudo bem, tempo de gradiente. Vamos embora e eu estou com todo tipo de bagunça. Essa é minha inspiração. Vou pegá-los, copiá-los e movê-los para o meu desktop Hi Fi. Essa é uma que vamos começar a construir. Não preciso mais de você. Não preciso de vocês. Exclua-o. Quem se lembra de como desligar as colunas? Ah, você não se lembra, mas lembre-se do super atalho Command ou Control K e digite o layout Prepare-se e podemos mostrar guias. Tudo bem. Vou colocá-los aqui no topo. O único problema está aqui no meu painel de camadas, eu tenho minha área de trabalho, mas tenho tudo isso aleatoriamente no meu painel de camadas Vamos selecionar tudo isso. Vamos clicar com o botão direito do mouse e podemos selecionar o quadro. Eles estão em seu próprio pequeno grupo slash frame. Vou chamar isso de uma paleta de cores. É sobre paleta de cores? De qualquer forma. Espere um pouco. Eu só preciso verificar. Espere aí. Tudo bem. Estou de volta, caramba, como mais dois. Soletrar bem, mouse bom. Mas fazer desenhos é bom. E vamos dar uma olhada. Eu tenho isso aqui. Um dos problemas é com esse fundo branco aqui. Já vimos isso antes: se eu não tiver nada selecionado, posso alterar o documento, como a cor do documento de trabalho, para algo mais escuro Isso às vezes é útil. Eu posso ver isso com um pouco mais de contraste. Então, simplesmente não selecione nada e você pode alterar a página. A página não é impressa nem acessa o site móvel. É apenas a interface do Figma. Tudo bem, então vamos fazer um gradiente. Vou copiar um desses caras. E os gradientes estão escondidos sob o filme e abaixo temos o sólido. Temos gradiente. Temos alguns outros, padrões, imagens, vídeos. Então, vamos aos gradientes, e ele nos dá um padrão, e o que você pode fazer é mudar aqui Essa é provavelmente a maneira mais fácil. Digamos que eu queira extrair gradientes de. Bem, vamos fazer um manual. Vamos clicar duas vezes aqui. Você pode pegar o controle deslizante, escolher qualquer cor antiga. Então, no final aqui, clique nesta, arraste-a e escolha qualquer cor antiga. Oh, isso é horrível. Então, digamos que eu queira escolher gradientes das minhas cores reais Eu pego a ferramenta conta-gotas e estamos trabalhando nesta última aqui, então eu não sei Vou resolver isso e ver o quão ruim fica. Neste primeiro, quero tirar o colírio do meu roxo. Estou curtindo. Muitas vezes, o que eu gosto de fazer é, em vez desse gradiente realmente muito completo, estranho. Você vê a curvatura na minha? Provavelmente apareceu no vídeo. Não tenho certeza de onde vem isso que não vai acontecer. É simplesmente estranho. Bem, é uma espécie de diferença no nível de zoom. Você pode ter isso no seu. Estranho Veja, voltei. Ignore a linha. Então, voltar ao gradiente é o que você pode fazer. O que eu acho um pouco melhor sobre gradientes é que você pode ver o pequeno ponto branco Você pode arrastá-lo até onde ele precisa estar. Muitas vezes eu gosto de gradientes um pouco mais sutis como esse. Diminua o zoom. Acho que geralmente é um gradiente melhor. Ainda mais, você pode ir ainda mais longe e dizer: Tudo bem, eu quero que isso esteja aqui E esse é um gradiente linear por padrão. Você pode ir ao rádio. Eles também são muito bons. Eu vou virar isso , o que eu quero fazer é pegar essa ponta e estar lá Na verdade, sei o que eu quero. Eu vou devolvê-lo Eu gosto de fazer isso onde há mais um relógio assim. Eu posso torná-lo maior. Há esse gradiente mais abstrato. Algo está acontecendo. Eu gosto de botões onde não é muito claro, olhe para mim. Sou um gradiente. É um gradiente sutil Gostei mais do que tínhamos no rádio, então vou desfazer Outras coisas que você pode fazer aqui. Há rádio, há outros que você nunca usará angulares. Parece legal, eu acho. Você gosta? E o último, que é diamante. Novamente, não um que eu use. Vou usar linear. Você também pode torná-los transparentes . Então, vamos trazer uma imagem. Eu tenho algo no arquivo de exercícios, então vamos descer até aqui. Não, vá até este aqui e vá para o vídeo da imagem. É Command Shift K, Control Shift K em um PC, vá para os arquivos de exercícios. Há algumas imagens aqui. Escolha qualquer coisa. Vamos escolher esse aqui. Ok, então Scott. Traga esse, eu vou clicar e arrastá-lo para fora. O que eu acho realmente útil para gradientes é, digamos que precisamos colocar algum tipo no topo aqui Vamos pegar a ferramenta de texto e clicar uma vez. Título. O problema com esse texto aqui é que é difícil lê-lo em segundo plano. Está bem? Portanto, certifique-se de usar o K para a ferramenta de escala para dimensionar o texto. Está bem? É muito difícil ler nesse contexto. Então, o que vamos fazer é adicionar um gradiente. Então, vamos fazer um novo. Vamos pegar a ferramenta retangular ou uma moldura. Está bem? E o que eu vou fazer é continuar com isso, ir para o gradiente. Eu vou escolher linear. O de cima será totalmente preto ou o preto que estou usando será o meu preto. Aquele aí, então vou pegar uma ferramenta e pegar aquela OK. E essa de baixo aqui, a segunda, em vez de ser totalmente colorida, que é essa aqui, você pode pegar essa e torná-la zero. Essa é a transparência como essa outra. Você pode fazer coisas assim e arrastá-la para baixo. Preciso jogar com as camadas. Lembra quem se lembra do atalho de camadas? Você pode simplesmente arrastá-lo aqui, abaixo do título, ou são os colchetes, que o enviam para Esses são os colchetes ao lado do piki e talvez eu tenha que fazer o mesmo com o fundo De qualquer forma, gosto de fazer isso quando você tem essa boa transição entre o plano de fundo e o primeiro plano e, com ela selecionada, você pode decidir sobre linear aqui, depois de clicar nela, decidir o quão curta ela também é Você pode ver que eu posso fazer esse pequeno desvanecer ? Estou tornando tudo horrível agora A outra coisa a se observar sobre fazer gradientes quando você está fazendo transparência, mesmo que seja completamente transparente, é dizer que, para zero, importa a cor Você consegue ver que a luz passa por lá ou torná-la mais exagerada. Vamos usar verde. Embora o verde seja completamente transparente, ele aparece nessa transição entre os dois. Então, às vezes você só quer preto e preto e tem a transição em zero, de modo que seja apenas um gradiente muito claro e simples Nenhuma outra cor se misturou. A última coisa que quero mostrar é adicionar três cores. Anteriormente, analisamos o gradiente como um gradiente. Tudo bem, eles têm muitas cores interessantes. Alguns horríveis também. Então, vamos pegar um que gostemos. Role, vá rolar. Diga isso aqui. Isso tem três cores aplicadas a ele. Tudo bem, e os sites não funcionam. Espero que, quando você for até lá, haja três cores diferentes aqui. Eles ajustaram este site. Eu costumava ter uma aparência diferente. Agora está quebrado. Na verdade, vamos fazer uma captura e fazer uma solução alternativa Vamos transformar isso em uma invenção e extrair as cores dela Como você pode ver que há uma cor aqui em cima, vamos torná-la um pouco menor e talvez uma cor diferente no meio para uma terceira cor ou mais azul. Então, vamos fazer isso. Vou deixar esse aí. Gosto muito dela como uma das minhas cores, e eu vou pegar. E adicione uma terceira cor. É linear no momento, tem um e dois. Você pode simplesmente clicar em qualquer lugar aqui para adicionar um terceiro. Você também pode fazer isso nesta linha aqui na prancheta. Isso realmente não importa. Então esse aqui, podemos dizer que esse terceiro pode ser esse look, eu tenho aquela cor do meio. Essa de cima vai ser roxa, mais azul aqui, e essa vai ser dessa cor aqui. E eu poderia movê-lo daqui a pouco. Você pode adicionar quantas cores quiser ao seu gradiente. Nós temos três. Aí está. É assim que se fazem três cores, e é assim que se fazem gradientes em geral dentro do Figma Eu vou fazer gradientes de cores ou algo parecido, onde eles se tornam transparentes É isso mesmo. Isso são gradientes em figma 38. Como criar e usar estilos de cores no Figma: Olá. Vamos transformar nossas paletas de cores em estilos de cores Os estilos são reutilizáveis. Podemos nomeá-los para que possamos obter cores consistentes. Podemos compartilhá-los com as pessoas. Podemos compartilhá-los com outros documentos. Eles são todos iguais. A parte poderosa deles é que, digamos que eu queira ajustar essa cor que eu criei e usar muito em todo o meu documento, eu posso acessá-los e eles estão todos conectados. Olha, eu meio que posso fazer alterações, e tudo neste documento atualizará o poder dos estilos de cores. Além disso, abordaremos algumas das convenções de nomenclatura que aparecem quando estamos nomeando Vamos começar. Tudo bem, para criar alguns estilos. Vamos começar com este aqui. E é para isso que servem esses pequenos pontos. Você pode ter estilos em qualquer um desses recursos. Você consegue ver estilos para efeitos, estilos para traços? Eles são simplesmente reutilizáveis, certo Então, vamos fazer esse primeiro. Vamos aos estilos. É muito confuso todas as bibliotecas. O que você pode fazer é criá-lo neste arquivo só para curtir, está claro. E o que vamos fazer é adicionar um novo. Então, essa pequena vantagem. Eu selecionei o meu, clico em Mais, ou acerto nos pontos e, em seguida, pressiono mais Podemos dar um nome a ele. Agora, convenções de nomenclatura para cores. Há um pouco de sim. Eu vou te dar os mais comuns. Há muitas maneiras de fazer isso. O mais comum é, em vez de chamá-lo de roxo, chamá-lo de primário. Caso você mude sua cor primária para outra, não queira ter um monte de cores chamadas roxo. Portanto, é primário. Se você é freelancer trabalha para muitas empresas, pode digitar o nome da marca. Muitas vezes eu só coloco as iniciais. Então, essa é a primária de Scott Wallets. Porque se você estiver trabalhando para outra empresa, acabará com muitas e muitas primárias. Então está claro o que é isso porque temos uma, duas, três versões disso. Você pode acabar com cinco, dez, uma boa convenção de nomenclatura Você poderia simplesmente chamar esse número um, ou talvez aquele número um, número dois, número três. Ok, às vezes as pessoas têm isso em 100 e então essa é, digamos, é mais transparente. Eles colocarão como 50. É como 50% dessa cor principal. Você vê isso um pouco. Provavelmente, o mais comum é usar centenas. É dos dias da fonte, pesos das fontes. Se você conhece os pesos das fontes, saberá que o peso de 500 é o normal 700 é negrito, 900 é extra ousado. Fazemos algo semelhante com cores. Sua cor média. Esse é o uso intermediário disso. Você tem uma escala de um a 900. 100 será a versão mais clara da sua cor e 900 será a versão mais escura Isso está bem no meio, então vamos chamar isso de 1500. Eu sei que é estranho. Ele está tentando ser tranquilo e alegre , mas é estranho Vou copiar isso, vou criar um estilo. Agora temos um estilo. Vamos aplicar o estilo e voltaremos à nomenclatura. Vou entrar no modo Zoom e adicionar alguns elementos diferentes à minha página. Tudo bem Bom trabalho. Todos os pedaços que eu já fiz, eu adicionei de volta. Agora, digamos que queremos adicionar nossa cor primária. O que podemos fazer é selecionar tudo. Em vez de tentar copiá-lo e colá-lo, use o atol do colírio, que é bom Você pode clicar nos estilos agora e dizer: Olha, esse é o meu estilo. O que é muito legal nisso é que você tem um documento muito grande e os clientes dizem : Ah, o que há de errado com o roxo? Por que não é um pouco mais, eu não sei, puramente. O que você pode fazer é não ter nada selecionado, encontrar seu estilo, editar e dizer, aqui embaixo, esta é minha mudança. Você pode ver que tudo vem junto durante o passeio? Você já pode ver a vantagem disso, certo? É uma ótima maneira de simplesmente ajustá-lo. A outra coisa legal é que você pode compartilhar estilos. Veremos isso mais tarde, mas você pode compartilhá-lo entre empresas, entre documentos, então estamos todos usando o mesmo roxo. Tudo bem, vamos construir mais alguns. Vamos ver essa aqui, que é a versão mais escura Vamos adicioná-lo aos meus estilos. Vamos apertar mais, e vamos chamar esse, como vamos chamá-lo? Ainda é uma cor primária, mas em vez da 500, a mais escura que você provavelmente deveria ter é a 900 Eu quero deixar espaço para uma versão mais escura, então vou chamar isso de 1700 Deixe-me fazer mais uma e desfazer. Eu adicionei um extra. Vamos fazer esse último. Eu vou fazer isso no modo de velocidade, você espera aí. Tudo bem motivo pelo qual isso é muito bom é que eu tenho 300, 700 e vamos arrastá-los se eu não tiver nada selecionado, porque eu os criei em momentos diferentes, basta empilhá-los, mas eu quero, digamos, 700 na parte inferior, 300 na parte superior Claro, meio escuro. A razão pela qual isso é muito útil é mais tarde, se você disser : Oh, cara, eu preciso colorir entre eles O que você pode fazer é dizer, certo, eu quero colorir no meio, e precisa ser um pouco mais claro, mas não tão escuro assim. Você tem espaço para citar um, olha, nós temos um 300, um 500 e um 700. Está entre esses. Ah, hein. Sim, poderíamos chamar isso de 1600. Portanto, temos algum escopo para trabalhar. Se você encontrar as cores de outras pessoas, elas terão uma para tudo. Eles terão 100, 200, 300, eles têm tudo isso. É um pouco exagerado para o que estamos fazendo. vamos desfazer isso, mas é assim que a nomenclatura funciona. É estranho, eu sei. Veja muito e é por isso que está lá. Se você nunca se deparou com isso antes, é assim que eles também usam fontes. Ousado, normal, isso é leve. Não, seja qual for a luz. O mais fino, há espaço para um mais fino e outro mais escuro Tudo bem Essas são essas cores. Sem nada selecionado, você pode ver seus estilos aqui, você pode clicar com o botão direito do mouse neles e excluí-los ou duplicá-los, copiá-los. Você pode editá-los. Você também pode reorganizá-los clicando e arrastando-os Vamos adicionar nosso gradiente também. Esse é o que eu quero acrescentar. A mesma coisa, adicione este. A convenção de nomenclatura para esta será um pouco diferente porque eu terei versões diferentes desta? Provavelmente não. Eu vou dizer gradiente. Vou chamar esse gradiente de um. Agora, o legal disso é que isso está em todo o documento. Assim, podemos voltar ao nosso Lo Fi móvel e encontrar nosso documento. Estamos usando essa cor aqui e clique duas vezes nela para entrar. Oh, não, eu vou usar meu atalho. Lembra do clique de comando ou clique de controle em um PC? Essa é a cor da imagem aqui. De qualquer forma, não sei por que é chamado de imagem. Oh, tinha uma imagem nela, não é? Oh, nós o fizemos e o deletamos, não é? Eu não consigo me lembrar. O bom, porém, é que eu selecionei isso. Eu posso ir para minha seleção de todas as cores. Podemos percorrer o caminho mais longo. Onde está? Em Editar, podemos selecionar tudo. Oh, essa é estranha Ok. Normalmente, ele seleciona tudo com o mesmo preenchimento , mas como fiz algo estranho e agora se chama imagem, não está funcionando Vamos fazer isso com este aqui. O que eu faria agora? Eu provavelmente simplesmente deletaria essa caixa. Ele acha que é uma imagem, não é. Mas este aqui tem um preenchimento antigo normal. Vamos fazer isso com este. Eu posso dizer Figma, editar e você pode ver selecionar tudo Tudo bem, me perdi. Aí está, Dan. Você fica tipo, clique nesse, Dan. Oh, aí está lá. Ok. Então, nada a ver com essa imagem. Selecione tudo com o mesmo preenchimento. Agora, esses estão usando um preenchimento semelhante. Este aqui por algum motivo, acho que mudei quando estava falando com vocês. Eu vou tentar o mesmo. No entanto, vou usar meu atalho, Command K ou Control C ou PC, e vou selecionar todos com o mesmo preenchimento, e ele não pegará nenhum deles Estranho. Eu quebrei isso e quero excluí-los e seguir em frente. Mas vamos fazer com esse aqui. Command K ou Control C ou PC, ele lembra as últimas coisas que você fez, então eu posso simplesmente clicar nessa Eu selecionei isso, imagine que está selecionando o documento inteiro. Eu posso ir preencher agora e posso dizer que vou usar minha cor primária e isso mudará todas elas. O mesmo com o derrame. Eu posso entrar aqui e minhas cores estão aqui. Talvez eu decida que vou usar esse. Você pode ver as vantagens. Às vezes, embora você não queira que isso mude, diga que quer que todos mudem, mas esse precisa permanecer roxo de qualquer maneira. O que você pode fazer é selecionar isso, vamos clicar imediatamente. Aí está lá. Você também pode ver a diferença na aparência do preenchimento. Algo como aqui, é um retângulo, enquanto este aqui é um ponto Um ponto representa estilos dentro de uma figura. O que você pode fazer é simplesmente quebrá-lo. Está de volta a essa cor aqui, aquele pequeno quadrado com a cor, e não estará mais conectado a esse estilo. Se eu atualizar meu estilo, eles mudarão. A última coisa que vamos fazer é você sair e ir para o próximo vídeo agora, porque o que vou fazer é apenas criar meus outros. Na verdade, as convenções de nomenclatura. Vai ser um sotaque primário e secundário. Eu só vou passar por isso e fazer isso. Eu vou dizer. É muito entediante Adicione estilos, mais o botão. Essa aqui vai ser a carteira Scott. Esse vai ser meu secundário. Este é o meu 500. Na verdade, não preciso deixar isso. Eu vou fazer o resto deles. também será um estilo. Além disso tudo bem. E uma coisa que eu não mencionei foi, chamamos esses? Se esse é o sotaque primário e secundário, vou chamá-los de neutros. Está bem? Então eu vou dizer, eu vou preencher. Além disso, este será meu Nu neutro. Não tenha uma coluna vertebral neutra, por favor, espere. Tudo bem, agora. Então, vou ver você e meio que trabalhar até 100. Serão 300, 500, 709 centenas. Então, vamos acelerar isso juntos. Tudo bem Já coloquei minhas cores. A próxima coisa que quero fazer é aumentá-los. 3057 ingredientes provavelmente vão descer até o fundo do poço Vou usar isso no mínimo. 57.300 vão acima de 700, vão acima de 700 não importa realmente como você os encomenda. Apenas certifique-se de que você não tenha nada selecionado no fundo para obter os estilos de cores, há um, todos esses caras. Incrível. Uma coisa que você pode ter feito é ter cuidado. Você vai até aqui e depois aperta mais. Às vezes, você só quer clicar em mais aqui e acaba com dois preenchimentos. Para se livrar de dois preenchimentos, você pode fechá-los ou apertar o pequeno botão de menos Tudo bem Temos uma paleta de cores Olhe para nós com designers de UX sofisticados, e temos uma paleta de cores com a qual trabalhar e as transformamos em estilos. Olhe para nós. Tudo bem Vamos começar a colocar essas coisas em ação. Vou ver no próximo vídeo. 39. Projeto de aula 07 - Cores e colunas: Olá. Faz algum tempo que não fazemos um projeto de classe. Está na hora. Eu agrupei em cores e colunas porque o projeto da classe de colunas é chato e o de cores é empolgante. É a parte chata Quero que você acesse e adicione suas colunas. Antes de tudo, crie um celular e um desktop Hi Fi. Criamos a versão wireframe anteriormente, você deve ter um total de cinco, certifique-se de que seu documento esteja no rascunho para que você possa adicionar mais de uma página ou mais de três Ok, eu te mostrei isso nos vídeos anteriores. E então eu quero que você adicione nessas páginas quatro molduras, nossas quatro páginas. Está bem? Portanto, nossa página inicial, detalhes do produto, página de pagamento e confirmação para desktop e celular. Deixe-me te mostrar rapidamente. Então, eu tenho essas duas páginas, móvel e desktop, mude uma para ver todas elas. Então, embale essas páginas Deve ser quatro em cada um, e eu quero que você adicione as colunas em ambos. Ok, no celular e no desktop. Número seis no celular, 12 no desktop. E você pode decidir sobre a sarjeta e a margem. Depende totalmente de você. Ok, então são cores empolgantes. Eu quero que você rascunhe uma paleta de cores como esta aqui, vou selecionar isso, apertar Shift dois, trazer aquela coisa que eu selecionei para a frente Eu quero que você crie isso. Você tem uma cor primária , secundária e terciária ou de destaque Realmente não importa como você o chama. Lembre-se de que queremos uma versão média, escura e clara, e quero que você as transforme em estilos. Então, aqui. Você pode usar numeração diferente, pode ser um, dois, três, estou usando a escala de centenas Quando terminar, certifique-se de arrastá-los para que façam sentido para você, alguma ordem. Faça os tons de cinza também. Nós os chamamos de neutros e pelo menos um gradiente. Quando terminar, o que eu quero que você faça é tirar uma captura de tela de tudo isso, porque eu quero ver suas cores, mas também seus estilos Em seguida, faça o upload disso. Eu não pegaram tudo. Eu quero pegar tudo isso. Vamos dar uma olhada nos projetos da classe. Aí está lá. Há um exemplo de entrega, algo parecido. Cores. Mas não se preocupe, se quiser, as cores fazem parte. Eu não sei o que vou fazer. Podemos ajustá-los ao longo do curso. À medida que avançamos, você pode ajustá-los com bastante facilidade, membro, porque temos estilos. Tudo bem. Você pode obter as cores no seu quadro de mudanças ou no site de inspiração de cores. Eu não me importo de onde você tira suas cores. Não se preocupe em me enviar uma captura de tela de suas colunas Eu confio que você fez isso. Mas eu quero ver isso para o seu projeto de classe. Tudo bem, vá fazer algumas cores. Se ainda não o fez , coloque-os todos bem arrumados e certifique-se de que também haja um gradiente Eu não tenho o meu lá. Na verdade, eu preciso atualizar este. Esta é uma versão antiga das minhas cores. Aí está. Essa é a correta. Tudo bem. Divirta-se criando cores e colunas antigas e chatas Vou ver no próximo vídeo. 40. Fontes ausentes no navegador do Figma: Este pequeno vídeo é para qualquer pessoa que esteja usando o Figma no navegador e não no aplicativo para desktop O aplicativo para desktop não precisa desse vídeo. Se você estiver usando a versão do navegador, e provavelmente o fará eventualmente, às vezes as fontes podem faltar. E tudo o que você precisa fazer é bem simples, acesse figma.com slash Downloads e instale isso. Reinicie o navegador. Deixe-me abordar um pouco mais de detalhes para aqueles que estão interessados. Entre. É fácil. Acesse figma.com slash Encontre o instalador de fontes que corresponda ao seu sistema operacional, instale-o e, em seguida, feche o navegador, abra-o novamente e ele aparecerá Um pouco mais de detalhes são duas versões do Figma que você pode usar Existe esse para desktop que você pode baixar. Ei, essa é essa. É algo em execução no meu desktop. É muito semelhante à versão aqui no navegador, que estou executando no Chrome. Está bem? E eles têm a mesma aparência. Uma pequena diferença é lembrar que esqueci que essa versão do navegador não tem o pequeno botão home, que mencionei algumas vezes durante o curso Então aí está, o botão home. Isso não tem. Você se lembra de ir para Arquivos e voltar para Arquivos e chegar ao mesmo lugar. Mas também a versão para desktop, esta aqui, tem. Estranho e tem todas as fontes que eu instalei no meu computador. Este navegador não tem. Ele tem apenas uma quantidade selecionada de fontes, nada instalado em sua máquina. Tudo o que você precisa fazer é instalá-lo e seguida, fechar o navegador, reabri-lo e todas as fontes que você tenha baixado ou comprado aparecerão dentro do Figma Calma, calma. É isso mesmo. Continue. 41. Que fontes posso usar? Além de combinação de fontes no Figma: Neste vídeo, veremos quais fontes posso usar no meu site e aplicativo. Analisaremos o Google Fonts e também emparelhamento de fontes, uma forma de combinar duas fontes diferentes que ficam bem juntas Sr. Bin. Tudo bem Quando você está nas coisas é o que eu quero. Quando você está digitando dentro do Figma, você tem um monte de fontes pré-carregadas e fica tipo, de onde elas vieram? Basicamente, eles são todos do Google Fonts. O Google forneceu ao mundo e à Internet várias fontes de uso comercial gratuitas, e você provavelmente encontrará algo que funcionará para você. Se você quiser instalar sua própria fonte, você só precisa ter cuidado. Digamos que você encontre uma fonte em outro lugar e a instale em sua máquina. Você só precisa ter certeza de que tem uma licença comercial para usá-lo. Não tenha medo de comprar fontes como a que comprei outro dia, Clem, eu amo essa fundição Se o site também. É muito legal. Digamos que American Grotesque é o que eu quero. É simplesmente perfeito para a marca, algo que eu quero usar hora de comprá-lo. Este é um que eu comprei. Eu comprei o Geograph e o comprei originalmente apenas para desktop Cinco usuários podem usá-lo e eu posso usá-lo no meu computador e fazer isso para todos os tipos de material impresso. Eu estava usando isso como uma camiseta. Quais fontes eu quero, eu escolho as fontes que eu uso, eu quero uma fina e regular. Você vê que na verdade está pagando por fonte. Você pode comprá-los mais baratos um pacote, mas estamos comprando esses. Não tenha medo de comprar, mas há muitas coisas boas e gratuitas online. Agora, o que devo verificar, porém, é que não consegui acessá-lo no meu site. Preciso usar a licença da web e preciso pagar por isso. Preciso ter certeza de que estou tomando cuidado com a fonte que vendo para meu cliente. Se eles disserem: Ah, sim, é ótimo. Então você vai e tenta usá-lo. Ou vai ter problemas ou vai custar, talvez esteja no orçamento. Você precisa ter certeza de que tem os direitos de usá-lo em sua web. Vamos voltar ao material gratuito incorporado ao Google. Basicamente, fonts.google.com é de onde todos eles vêm. Eles estão todos pré-carregados dentro do Figma, e isso é tudo que você realmente precisa saber sobre isso Mas então você começa com quais fontes eu escolho? Talvez você já tenha um carinho corporativo e esteja procurando uma fonte que combine com ele O termo que você está procurando é emparelhamento de fontes. Se você é novato em fontes, esse pode ser um termo muito útil e você pode pesquisar pings do Google na Internet Estou na barra figma.com. O Google Hyphen Fonts e Figma fizeram alguns emparelhamentos de fontes e só mostrará duas Vamos dar uma olhada em uma fonte que eu uso bastante. Ferrovia. Vamos dar uma olhada nisso, pegar o emparelhamento. O que eles vão fazer é tipo, certo, você gosta de Railway? Quais fontes vão acompanhá-lo? Você quer uma fonte Serif, que é aquela com pés pequenos ou Sand serif? Não tem o. Gosto muito desta página porque ela não me dá exemplos muito bons. Você pode eventualmente chegar lá. Veja isso. Se eu abrir o Railway plus, vamos tentar o Merryweather. Está aberto dentro do meu navegador. Basicamente, estou usando o Figma agora. Está copiado em meus rascunhos e eles deram exemplos de A, este é um Merywther, mas tem apenas algumas noções básicas O que eu gosto de ver é pesquisar na Internet por pares de fontes interessantes Acabei de clicar em vários resultados do Google. Uma delas é do próprio Google e mostra: Olha, essas duas fontes juntas podem ser para você. Que fontes são essas? Não é um site muito bom. Sites que eu gosto do fontpa.co Isso é muito bom. Você pode começar a ver, certo. Tudo bem Quais eu gosto juntos? Você pode estar nesse estágio de conceito ou de design de logotipo e dizer, oh, eu gosto desses dois juntos. Gosto ainda mais quando há exemplos. Acabei de encontrar esse. Apenas uma página de blog aleatória. Então, isso pode ou não estar aqui quando você voltar. Mas isso me dá mais alguns exemplos. Você é tipo, oh, eu gosto de Playfair. Qual delas eu quero usar com a fonte Playfair with a Sands here? O que é isso? Este é o Playfair Pass O que é esse? Fonte Sands Pro Corpo do texto para a fonte Sands proro e talvez eu faça meus títulos Medo. Você pode dar uma volta e ir embora, eu gosto disso. Eu gosto disso. Novamente, você apenas tenta encontrar bons pares. Você nem precisa instalá-los. Digamos que façamos Oswald aqui. Se eu entrar no FIGMA, você descobrirá que se eu entrar aqui e digitar Oz, aí está Oswald. Eu posso começar a usá-lo. Você terá todos os pesos. Há apenas alguns pesos aqui, mas você entendeu Tudo o que eu sou de volta do futuro. Eu só quero adicionar isso ao vídeo. As pessoas estão perguntando sobre fonts.adobe.com. Talvez você já tenha uma licença da Adobe e esteja usando fontes da Adobe. Você pode usá-los Figma Você precisa baixá-los e instalá-los da maneira que normalmente faz com as fontes da Adobe. Se você tiver o aplicativo Creative Cloud, basta clicar duas vezes nele e ele será adicionado ao seu computador. Se você estiver usando a versão do navegador, como no último vídeo, você precisa ter o instalador de fontes instalado para elas apareçam na versão do navegador da FIG. É isso mesmo. O único problema com as fontes FiGMA, desculpe, da Adobe é que você as usa porque tem uma licença paga da Adobe Portanto, você precisa manter a licença para continuar usando suas fontes. Essa é a única ressalva com eles. Além disso, se você a compartilhar com outro designer, ele também precisará ter sua própria licença para a fonte. Você não pode simplesmente dar a eles a fonte. Mas é muito comum usar fontes da Adobe. Não tenha medo deles, mas você só precisa ter certeza de que você é realmente um assinante da Adobe Tudo bem De volta com o vídeo. Essa é apenas uma pequena observação sobre como garantir que você tenha as fontes certas para usar. Se você tem uma fonte paga, certifique-se de obter a licença para ela e, se for usar fontes do Google, como combiná-las para que tenham uma aparência legal? Eu faço design há mais de 20 anos e ainda saio quando estou procurando coisas. Especialmente se eu receber uma fonte de uma empresa, vou tentar encontrar uma combinação de fontes com ela para que eu possa manter a fonte, mas também ter uma fonte ou fontes extras que eu possa usar em todo o design, apimentando um pouco Eu vou e vejo o emparelhamento de fontes. Eu gosto do Oswald Eu realmente não gosto de Oswald, normalmente, porque normalmente está em negrito Eu acho, mas luz extra é muito gostosa. Olha isso. Tudo isso é tudo. Sabores: Sesso. Te vejo no próximo vídeo. 42. Quais tamanhos de fontes comuns devo escolher no web design?: Olá. Bem-vindo. Ei, vamos falar sobre tamanhos de fonte. Existem alguns tamanhos muito comuns de usar. Você pode usar o tamanho que quiser. Mas existem algumas coisas comuns para fazer no design de aplicativos e web, e vou compartilhá-las com você. Em seguida, passaremos um pouco de tempo aplicando um pouco de texto às primeiras partes do nosso design. Vamos fazer nosso tipo de caixa de heróis, e essas cartas aqui embaixo com algum texto nela. Tudo bem, vamos entrar e começar. Certo, então vamos definir algumas fontes. Vou clicar no Tiki, clicar aqui e vou digitar pressionando um e vou colocar um hífen e depois uma Realmente não importa o que você escreve aqui. Vou apertar Escape para voltar à ferramenta de movimentação para poder movê-la. Com a opção selecionada, vou dizer: Tudo bem, qual fonte estou usando Eu decidi por algo chamado Source Sans. Eu gosto disso. Source Sans Pro e, para meus títulos, estou usando uma fonte em negrito. Agora, qual deve ser o tamanho do seu cabeçalho? Então, você quer uma variedade com a qual possa trabalhar. Muitas vezes, o maior deles é 72. Isso é bem grande. Depende de você. Freqüentemente, esse é o título zero porque eu não o uso com muita frequência. O próximo melhor tamanho e o tamanho grande para muitas páginas será 48, esse será o meu título . Por que estou dando nomes a eles Só para que possamos ter algumas regras e criar alguns estilos no próximo vídeo, serei consistente com o tamanho da minha fonte É muito comum ter 72, 48, 32 como o próximo tamanho para o título dois. Então eu tenho um título três. Que tamanho deveria ser esse? Eles podem ser do tamanho que você quiser. É muito comum usar esses tamanhos. Quando você desce para o cabeçalho quatro, que é 18, geralmente você não vai abaixo disso. Você poderia acertar cinco Depende de você e vamos acertar quatro. Em seguida, o próximo é uma cópia corporal. Este aqui geralmente é chamado de parágrafo. Você pode chamá-lo de corpo de texto, parágrafo. Vá lá, Dan. aqui normalmente é sempre para um site, 16. Esse é um tamanho inicial muito bom. Algumas fontes parecem maiores do que outras, então você pode ajustar isso. Talvez você precise usar 17 ou 14, seja o que for, e minha cópia corporal será normal. Isso é o que eu vou usar. Muitas vezes, é bom ter uma amostra como essa para que, ao projetar, você tenha alguma consistência. Estou apenas alinhando os meus agora porque, mas, tendo eles ao lado aqui, só para que você possa retirá-los e ir embora, preciso de um título três e começar a alterá-lo. Vou fazer isso com meu texto de marketing agora. Mas você pode pular agora. Esses são os tamanhos comuns. Você pode fazer o que quiser. Uma última coisa é que muitas vezes eles ligam para eles, eu não vou usar esse aqui. Muito grande. Eu vou fazer, vou dizer um H. Essa é a abreviatura de um título. Se você não usa a web há algum tempo, saberá o que são. Se você não tiver apenas uma abreviatura para claramente o título três. E o parágrafo se chama P. Esses são meus tamanhos. Você pode ter outro para termos e condições que seja pequeno, chegue a 14 ou 12. A outra coisa a fazer é garantir que você esteja 100% ao ver as fontes de um navegador, pois elas representarão a tela quando realmente forem publicadas. Se eu diminuir o zoom demais e disser: Ah, sim, eu definitivamente preciso do título zero porque não parece muito grande, você está muito reduzido em 50% Basta estar em 100%, que é o shift zero no meu teclado, vai para 100%. E se você estiver usando um dispositivo móvel, lembre-se de que precisa zoom para aproximadamente o mesmo tamanho ou fazer alguns testes no celular antes de chegar tarde. Vem em tamanhos diferentes. É isso mesmo. Vou fazer um pouco de produção agora, então você pode seguir em frente se você veio apenas para o tamanho da fonte e vamos criar algumas páginas porque há muita teoria Precisamos realmente fazer algumas coisas. Vou fazer isso na minha página inicial, vou pegar minha ferramenta de moldura. Vou colocar um NAV básico e vou escolher uma das minhas cores Meu preenchimento aqui, vou para minhas cores de preenchimento. Vou ver minhas pequenas amostras aqui. Nós fazemos isso? De qualquer forma, clique nos quatro pontos. Vou escolher qualquer um desses. Você pode acessá-lo de qualquer maneira, faça isso e pressione mais e depois entre nas cores desta página. Talvez você precise trocar isso ou com ela selecionada, vá até a pequena opção aqui e diga, na verdade, vou usar essa cor primária. Coloque-o em um Nav. Vou ativar minhas colunas. Quem se lembra qual era o atalho? Você não se lembra do Shift G. Isso mesmo. Vou trazer isso aqui para minha caixa de heróis. Essa é a parte principal da mensagem de marketing. Vai ter uma imagem e um pouco de texto. Vou desligar minhas colunas agora, Shift G. Vou adicionar meu título aqui, vou colocar meu marketing. Eu vou ter para o meu, vou dizer mínimo. Vou usar todas as letras maiúsculas. Na verdade, meu caps lock no meu teclado está quebrado, mas sabemos como consertar isso Então, vamos adotar um design minimalista, um propósito máximo. Você terá que criar sua própria mensagem de marketing quando fizermos um projeto de classe, mas é isso que vou usar. Lembre-se, eu quero fazer todas essas capas. Vou selecionar tudo. Na verdade, no meu atalho para governar todos eles. O Shift K não funcionará quando eu estiver usando minha ferramenta de digitação. Então, o que vou fazer é clicar em Escape para sair disso. Ele ainda está selecionado, mas não está destacado no texto. Agora eu posso fazer o Shift K. Não é o Shift K. Meu cérebro sumiu. É o comando K. Control K em um PC. E eu vou dizer maiúsculas e colocá-las todas em maiúsculas O que eu vou fazer, você não precisa é não usar uma fonte secundária. O que vou fazer é colocar negrito títulos e não em negrito no texto do parágrafo. Você poderia ter uma segunda fonte, tudo bem. Você pode ter uma frase um pouco exagerada para o acerto e algo um pouco mais simples para o corpo do texto ou O que vou fazer é optar por uma versão light. É assim que eu vou deixar de ter duas fontes. Vou usar a mesma fonte em pesos diferentes. Então eu coloquei minha mensagem de marketing lá, e o que vou fazer é fazer minhas pequenas caixas de recursos aqui embaixo. O que vou fazer é ligar a grade novamente. Provavelmente vou copiar e colar isso e vou fazer a caixa de recursos. Eles os chamam de cartões ou caixas especiais. E aqui, vou mudar isso para um título diferente. Eu vou dizer que você é, o que é esse? Isso é 24. Isso parece certo. 24, é misto. Vou apenas usar o negrito e vou digitar alguns títulos de caixas de recursos. Poderíamos usar texto de espaço reservado aqui, mas estamos na versão de alta fidelidade. Acabei de colocar o meu em outra página aqui. Eu os digitei. Vou fazer com que você faça isso um pouco, mas esse será o meu destino para este. Título. Vai descer pela parte inferior Vou colocar uma imagem na parte superior aqui. Agora vou duplicar isso. Vou usar um, Comando D, controlar o NRPC e vou digitá-los. Vou entrar no modo rápido. Vou selecionar todos os meus. Estou apenas segurando a tecla Shift e clicando duas vezes neles e direi que você está centrado em termos do alinhamento do texto Quando eu adiciono mais texto, em vez de sair da esquerda, ele sai do centro. Você sabe como o centramento funcionava e eu vou dizer que você e você serão esse aqui, esse alinhamento. Vocês estavam juntos. Isso não funcionou. Está colocado aqui embaixo em algum lugar. É por padrão. Isso é uma coisa boa e interessante. Com esses dois selecionados, na verdade, não, apenas com o texto selecionado dentro do quadro, eu deveria ser capaz de centralizá-lo. Aí está. Isso é uma coisa boa de se saber. Se eles estiverem um em cima do outro, você pode centralizá-los. Mas o que vou fazer é dizer que estou apenas clicando no texto, vou centralizá-lo e ele o centralizará dentro do quadro. Tudo bem. Há mais alguma coisa que eu queira fazer antes de seguirmos em frente? Isso vai ser tudo. É assim que se escolhe o tamanho da fonte. Construímos um pouco do nosso projeto de design agora. Vou usar o Shift G para desligar as colunas. Preciso brincar com o espaçamento, mas isso é o suficiente para este vídeo Nos vemos na próxima. 43. Como criar estilos de caracteres no Figma: Eu olá. Ei, neste vídeo, vamos criar esses estilos de tipos. Fizemos nossas manchetes no último vídeo. Agora vamos transformá-los em estilos reutilizáveis como as cores que fizemos anteriormente, para que, quando ajustarmos um, façamos isso e alteremos a fonte Você verá que todos os casos de uso aqui mudam. Escrita de pincel, oh. Desfazer desfazer Vamos começar e aprender como criar estilos de texto dentro de um Figma Tudo bem, transforme-os em estilos. Vamos pegar nosso primeiro aqui, KOH, e passamos para a tipografia e, assim como cor S, esses pequenos pontos no canto, esses são os Vou clicar nele e dizer , vamos adicionar um. O que são esses outros aqui embaixo? Eles são da have a look. O material três pode ser o material quatro ou cinco, dependendo de quão longe isso esteja no futuro, e é por isso que o Google cria suas fontes. Eles usam esse sistema de design chamado material. Em vez de chamá-lo de Android, eles o chamam de material. Se você rolar para baixo, encontrará todos os do IOS. Se você estiver fazendo design de aplicativos, pode simplesmente pular e começar a usar esses. IOS, e provavelmente é isso. Alguém mais tem alguma coisa lá dentro? Vamos ignorá-los. Vamos criar o nosso próprio. Vamos começar de novo. Assim selecionado, vamos ver os estilos. Vamos dizer mais, como fizemos com a cor, e diremos que este aqui será meu título e você pode adicionar uma descrição se precisar. Está claro o que temos e onde usá-lo , porque é apenas o título, mas vou criar o estilo. Tudo bem Por que isso é bom? Isso significa que você pode ir e vir, certo, este precisa ser o estilo de título. Não preciso descobrir quais são os tamanhos e o peso. Eu posso simplesmente entrar no meu estilo e dizer, você está liderando um. Aí está lá. Boom, muito grande. Ok, mas você entendeu. Você pode criar estilos. Se você não tiver nada selecionado, verá todos os estilos aparecerem com seus estilos de cores. Ei, pessoal, eu vou fazer o título dois também, e vou mostrar a vocês uma das vantagens. Vamos criá-lo mais, vamos chamar isso de cabeçalho dois. Ok, vou aplicá-lo aqui embaixo, vou segurar minha tecla de comando e mudar. Lembre-se, já vimos isso antes. Se você mantiver pressionada a tecla de comando ou a tecla Control em um PC, ela mergulhará nesse quadro que contém esse texto em vez de clicar duas vezes nele. Mas se eu segurar a tecla shift também, isso significa que ele selecionará mais de uma coisa por vez. Eu só vou clicar, clicar, clicar. Isso é mudança de comando em um Mac, mudança de controle em um PC. O que vou fazer é dizer que agora você tem o estilo de encabeçar dois. Ah. O estilo não está em maiúsculas, aí Vou fingir que isso fazia parte da aula. O que vamos fazer é dizer que o título dois, na verdade, todos os meus títulos estão em minúsculas Digamos que essa seja minha regra, para que eu não precise alterá-la mais tarde. Para editar um estilo, o cliente volta e diz: precisa estar em maiúsculas e com uma fonte diferente Esse era meu plano original. O que você pode fazer é seguir seus estilos. Não selecionei nada. Nada selecionado, eu posso ver meus estilos. Estou em design, não em protótipo, e posso ir até este título, título dois, e apertar o pequeno botão de edição de estilo Não há muita coisa lá. Posso clicar nos pontinhos e dizer, certo, quero que estejam todos em maiúsculas Você pode ver essa mudança, essa mudança, essa mudança. O cliente pode voltar e dizer: eu não gosto do molho Sands Pro ou talvez não seja pesado o suficiente Queremos que seja a versão preta e você pode ver que todas elas vêm pela direita, ou o cliente volta e diz: Tudo bem, é hora da Comic Sans E você desistiu porque não pode viver com a história em quadrinhos Sands em um fundo roxo Você entendeu a ideia? Desfaça rapidamente. Eu vou até lá . Eu não vou passar por todos eles. Agora, uma coisa que eu quero fazer antes de criarmos todas elas é que você pode ter duas fontes. Não seria comum, mas você pode acabar com dois estilos de título, um que talvez seja mais informativo e outro mais publicitário Você pode ter encontrado uma fonte, outra ótima dica é, se ela tiver um título aplicado a ela, um estilo aplicado a ela. Desculpe. Você pode ir até aqui e dizer, este título, eu posso mudá-lo. Mas também posso quebrá-lo. Ainda tem o tamanho certo na mesma fonte. Simplesmente não está conectado a esse estilo agora. Se eu mudar esse estilo, vamos mudá-lo. Ele parece o mesmo, mas se eu mudar, apertar o estilo e mudar para luz, você notará que isso mudou, mas não essa, porque eu quebrei o link Vou desfazer isso, ir para o estilo. Eu quebrei o link e não vou me lembrar do que estou fazendo. Por favor, oh, sim, isso mesmo. Estávamos criando um tamanho de fonte diferente. Vou digitar aqui todas as fontes. Aqui em cima, vou dizer fontes populares, fontes do Google. Na verdade, eu gostaria que houvesse filtros melhores aqui. Não é. Vou apenas digitar à mão e espero encontrar uma fonte desenhada à mão. Se eu conseguir digitar à mão. Vá lá, Dan. Tudo bem, então eu vou escolher esta aqui, Figma hand, fast hand Digamos que usar rápido e eu não goste. Por favor, espere. Que eu gosto, outra mão. Isso é legal. Digamos que você precise um título de fonte de informação regular e de um título de estilo de marketing publicitário mais descritivo O que você pode fazer é ter um H, e você pode ter um H, você pode nomeá-lo como quiser, mas vamos chamar o nosso um H one Alt como alternativa. Quando você cria esse estilo, você pode fazer a mesma coisa. Vou fazer um hit de estilo plus, e vou chamar esse título um, Alt. Só que eu tenho dois deles, então eu posso ir até aqui e dizer que, na verdade, esse propósito múltiplo ou propósito máximo pode ser o estilo desse título, um Alt. Este aqui será o título de um regular, o que eu preciso para inventar um caso. Então, eu vou passar por aqui e reestilizar tudo isso, eu poderia muito bem Estou começando a gostar dessa coisa de mão. Vou fazer isso e trabalhar criar todos os estilos. Você deve ter cinco deles no total. Vou acabar tendo seis deles porque quero esse estilo de título alternativo. Na verdade, antes de fazermos isso, uma coisa que não combina com o estilo do título é assistir isso. Eu faço algumas coisas. Vamos dar uma olhada, ter certeza de que está na primeira posição. Eu vou editar esse cabeçalho. Na verdade, eu não posso aqui. Essa é outra coisa interessante, todo tipo de coisas interessantes surgindo. Aqui, se eu tenho esse , que não é um estilo, tenho muitas opções de tipos. Se eu clicar em qualquer coisa que já seja uma amostra, você pode ver que só tenho coisas como alinhamento e alguns ajustes de linha É isso porque está tudo ligado ao estilo. Isso o limita. Você pode quebrá-lo e continuar se movendo. O que vou fazer é, antes de tudo, atualizar este, nada selecionado, vou para o título um, vou dizer que você precisa estar pronto o mais rápido possível Agradável. Então eu tenho esse. Digamos que eu vá pegar isso e colocá-lo em uma página diferente, mas preciso ter uma cor diferente. Obviamente, o branco não é bom aqui. Eu vou torná-lo vermelho. E sem nada selecionado, se eu ajustar meu título agora, assista. Preciso alterar o tamanho da fonte . Vamos torná-lo bem pequeno. Se eu fizer isso, você notará que ficou muito pequeno, mas manteve a cor. Portanto, a cor não aparece durante o passeio. Ele apenas ajusta a mecânica real do tamanho da fonte, do formato, abertura e desse tipo de coisa Vou passar agora no modo rápido e criar tudo o que eu quero. Vou desfazer tudo isso Vou criar todos os meus estilos e nos vemos em um segundo. Espere aí. Tudo bem, então eu criei um monte deles. Uma das coisas que quero compartilhar é que essa fonte em 100% fica realmente no tamanho certo. Eu nem vou criar um estilo para isso, caso a próxima pessoa diga, oh, eu posso usar o título quatro. Você não tem permissão. Eu decidi. Você pode ver como essa fonte está aqui? Eles são do mesmo tamanho. Ambos têm 48 anos. Este aqui é mais difícil de ler nesse tamanho. Tem a mesma altura. É muito mais estreito Eu tomei a decisão de não torná-lo muito pequeno e realmente não quero que seja usado como um parágrafo. Minhas mordidas. Se olharmos aqui, eu tenho o título para um, dois e três, mas nada mais. Outra coisa é que esses estilos são feitos na ordem em que você os cria ou estão listados aqui. Precisamos arrastá-los por aí. Eu quero dirigir um, dois, eu quero três lá em cima, quatro lá em cima. Então, provavelmente, um parágrafo no topo, porque é o que eu mais uso. Um, dois, três, quatro, e então eu tenho um, dois, três, pois essas alternativas não precisam ter um tipo alternativo de fonte para seus títulos Você pode ter um para o seu parágrafo ou pode ser uma versão em itálico dele Mas agora temos um estilo e o que é legal quando os usamos no documento Se precisarmos fazer ajustes, ajustaremos um arquivo muito grande e, na verdade, você descobrirá mais tarde que podemos fazer isso em vários documentos e compartilhar com outros colegas de equipe Todos nós podemos compartilhar esses estilos, o que é muito legal. Talvez você precise ter certeza de que você realmente os aplicou. Às vezes, você cria seu estilo depois e ele tem o mesmo tamanho, mas não está conectado. Preciso ter certeza de que essa parte aqui está conectada ao meu cabeçalho um, seja, essa aqui está conectada ao meu cabeçalho antigo. Esse aqui é o certo. Todos esses são títulos dois, então estou pronto para ir. Este aqui provavelmente também está, mas eu não preciso de você. É isso mesmo. Criamos alguns estilos de tipos ou estilos personagens dentro do Figma. Somos muito profissionais. Tudo bem Te vejo no próximo vídeo. 44. Lorem Ipsum e texto de espaço reservado no Figma: Neste vídeo, veremos como adicionar texto de espaço reservado É usado apenas para manter o lugar. Se não temos a cópia, apenas palavras latinas misturadas. Vou te mostrar bons lugares para obtê-lo . Eu vou te mostrar um plugin. É muito legal se chamar Content Real. Ele faz esse texto de espaço reservado, mas também permite que você acesse e adicione um monte de nomes ou datas falsos ou o que mais temos? Endereços de e-mail? Onde está isso? Eu estava aqui. De qualquer forma, moedas, é um ótimo gerador aleatório de conteúdo. Vamos entrar e conferir como funciona. Tudo bem, então vamos colocar um texto de espaço reservado. Vou pegar a tecla T, clicar e arrastar porque quero que minha mensagem de marketing tenha um pouco do corpo do texto. E, dependendo da última fonte usada, ela pode ser definida como provavelmente o cabeçalho 1. Uma coisa que eu não mostrei é que você pode simplesmente clicar aqui e depois clicar aqui para alterá-lo. Vou definir o meu em um parágrafo. Se não estiver sobre isso e estiver quebrado, lembre-se, você pode entrar aqui e dizer, eu quero que isso seja um texto de parágrafo. Micosa brilhando lá dentro. De onde posso obter Laura Nipsm? É o rito de passagem que fica deste lado, lipsum.com, cheio lipsum.com É feio. Mas é onde muitas pessoas simplesmente recebem mensagens fictícias Você pode entrar aqui e dizer: Tudo bem, o que eu quero? Eu quero cinco parágrafos. Na verdade, eu só quero um parágrafo, gerar, eu só te dou um monte de textos que você pode copiar diretamente do navegador, ignorar os anúncios. E cole aqui. São apenas palavras latinas misturadas que não significam nada. O problema de usar isso às vezes é que, quando você o envia ao cliente, porque ainda não tem os textos dos direitos autorais, eles dizem: O que é isso? Está quebrado. Então você pode ter que explicar isso. Mas é muito útil porque você precisa trabalhar em coisas como a altura e o layout da linha e dar ao redator algumas palavras para Se você permitiu espaço para 200 caracteres , eles podem trabalhar nesse sentido. Usamos texto de espaço reservado apenas para preencher a lacuna, em vez de, não sei, o que fizemos anteriormente? Mas acho que uma das coisas legais do X é que há um plugue. Sempre há um plugin, existe um muito bom. Há muitos deles por aí para um texto de pedido de encomenda. Digamos que eu queira o mesmo aqui embaixo, quero um pouco de texto. Vou usar minha ferramenta de digitação. Vai descer aqui. Eu não preciso de muita coisa. Vou me certificar de que não estou comendo dois no parágrafo e vou trazer um plugin. Os plug-ins estão escondidos aqui em seu painel de ações Vou até os plug-ins e vou digitar este chamado Content Real, Content Real. Se você digitar uropsm ou Place Auto ticks, digite Lam, você encontrará muitos deles aqui Novamente, você está vendo quantos usuários o usaram e gostaram. Essa é uma maneira fácil de saber qual é a mais popular. Mas o conteúdo real é muito comum e realmente incrível porque faz um monte de coisas diferentes. Digamos que aqui eu possa ir para o texto e dizer que, com meu cursor piscando aqui, vou deixá-lo alinhado à esquerda Eu vou dizer, me dê um pouco de Lornopsm. Está lá dentro. Não preciso de tudo isso. Eu só preciso desse pedaço, coloque um ponto final no final E aí está. Há um plugue. Esse plug-in é muito legal porque também faz outras coisas. Vou clicar duas vezes nele, fazer uma cópia mantendo pressionada minha tecla opcional. Vou digitar apenas a palavra amostra. Eu vou fazer o tamanho da caixa. Nós vimos isso dessa forma mais cedo. Vamos recapitular No momento em que é uma caixa de altura fixa porque vai até lá, quero mudá-la para essa caixa automática, onde é apenas a altura do que eu digitei lá, livre-se disso Faça algumas cópias dele, Escape to Get Out, arraste uma para fora, mantendo pressionada a tecla, mantendo pressionada a tecla, Command D DDDD ou Control DD DDD. Vou selecionar todos eles. O que ele está fazendo? O que ele está nos mostrando? Abaixo do texto aqui, há esse nome completo. Se você precisar de vários nomes aleatórios em suas maquetes, basta colocá-los aqui. Ou talvez você precise de endereços dos EUA, endereços de e-mail ou datas. É muito útil para muitas coisas além de apenas Lauren Eu vou desfazer tudo isso. Eu não preciso de nenhum desses, mas aí está. Texto de espaço reservado Bom enquanto você está trabalhando, preenche uma lacuna, permite que você continue projetando, mesmo que você não tenha o texto Muito bom para seus wireframes. Basta usá-los para as maquetes, porque você não quer começar a adicionar texto porque não se trata disso no estágio de wireframe e aprendemos Eu vou fechar esse. Tudo bem. Para o próximo vídeo. 45. Como usar IA para criar texto no Figma: Aqui. Ei, vou mostrar como usar o Figmas AI para criar textos para nós Nós o avisamos e ele criou alguns textos interessantes para nossas carteiras de couro É fácil de usar. Super útil. Deixe-me mostrar como funciona. Primeiro. No momento, esses recursos fazem parte do programa pago Figma, então estou mudando para minha conta paga aqui Provavelmente permaneceremos na conta paga pelo resto do curso. Vou tentar destacar qualquer coisa que seja paga e não gratuita, mas não quero evitar os recursos pagos durante todo o curso. Se você tem uma conta gratuita e vai continuar com ela, alguns dos vídeos você pode simplesmente assistir para ter uma ideia de que isso é bom. Talvez valha a pena fazer isso ou é bom saber, mas eu não estou bem, então mudei minha conta de pagamento A diferença realmente é que, se você está na conta gratuita, vê esse ícone aqui mudar, você fica tipo, o que isso faz? Este é o seu botão Ações. Entramos lá em busca de plug-ins e atalhos Esse aqui é a mesma coisa, mas é mágico. Essa é uma captura de tela que fiz da conta gratuita. Por exemplo, então vamos usar isso agora com a mágica. Oh, tem um pouco de IA embutida. O que vamos fazer é texto e redação. Vou selecionar tudo isso, excluí-lo. Minha maldição ainda está piscando lá, apertar esse botão mágico e eu vou usar a opção de reescrever É uma versão beta. Isso vai mudar. Eles o renomearão como *****. Mas dê uma olhada na opção de escrita. Vou clicar em reescrever isso e vou escrever algo Na verdade, eu o pré-escrevi. Você come lá. Aqui vamos nós. Escreva uma frase para a caixa do herói descrevendo o design minimalista da carteira de couro. É nisso que estou trabalhando. Preciso que alguns textos sejam escritos. Vou clicar em reescrever e isso vai fazer alguma coisa Ah. Agradável. Está bem? Você pode usá-lo para redação, como HgBt ou Gemini ou Claude ou qualquer ferramenta de IA que Este é seu primeiro toque de IA. Muito incrível. Você pode fazer coisas como: Tudo bem, eu quero fazer mudanças. Nesse caso, quero torná-lo mais casual, por favor. Clique em Reescrever Sim, é mais casual. Você pode fazer coisas como fazer alterações de forma mais curta, mais longa. Então, faça essas duas frases. Eu escrevo errado? Apenas duas frases. Aí está. desfazer o que eu gosto do que eu tinha antes Desfazer obras. Legal. A IA é incorporada ao figma em diferentes partes Abordaremos alguns deles. Mas esse material de reescrita é ótimo para encomendar textos ou até mesmo para redigir, algo em que eu não sou bom, e preciso colocar coisas Também gosto dele apenas para arrumar. Eu sei minha intenção, nenhum detalhe deixou de ser considerado. Eu não sei. Acabei de inventar isso e fiquei tipo, me pergunto o que a IA dirá só para arrumar tudo Clique aqui e, em seguida, você pode simplesmente digitar rewrite e, em seguida, digitar tidy not writy Em seguida, clique em Reescrever. Isso vai me ajudar com minha gramática e ortografia. Provavelmente vou colocar alguns Mdashs lá. Parece ser sua coisa favorita a fazer. Mas sim, acho isso bom apenas para aprimorar meu trabalho à medida que trabalho . Adoro isso. Esta caixa aqui precisa ter altura automática. Como eles realmente chamam isso. Sim, altura automática. Aquelas de tamanho fixo. Legal. Tudo bem. Isso é IA dentro do Figma Você pode usá-lo em vez do texto de espaço reservado. Se você quiser realmente colocar conteúdo, será útil. Mas será diferente quando você chegar aqui. É novo e sofisticado e me diga nos comentários se for completamente diferente e eu voltarei e reescreverei este Espero que não seja muito difícil de encontrar e seguir em frente Mas toda vez que eu entro no Figma, eles mudam a forma como a interface funciona. Aí está. Tudo bem. Te vejo no próximo vídeo. 46. Coisas úteis sobre texto no Figma: Olá. São dicas e truques de tipo levemente avançado Coisas que você vai precisar para o curso. Vamos examinar e mostrar como jogar com o espaçamento entre letras, espaçamento entre linhas e espaçamento entre parágrafos Vamos fazer uma pequena maquete de logotipo, listas, links. Vou mostrar como eles funcionam clicando neles. Eu trabalho então. Sim, apenas algumas pequenas coisas que precisaremos para o curso e agora que temos algumas habilidades nas quais podemos aprender. Então, vamos começar. Tudo bem Para começar, estou na minha página HyidelityHome. Vou selecionar esse trecho de texto aqui. Acabei de copiar e colar algumas vezes. Portanto, temos algumas linhas extras com as quais trabalhar. Também vou trocá-la por essa caixa de tamanho automático, altura automática, para que fique cada vez menor como meu texto. Vamos dar uma olhada em alguns recursos levemente avançados. A altura da linha aqui é o espaço entre minhas linhas. Então, em Auto, se eu clicar em Auto, a altura da linha é 20. Isso se baseia no tamanho da fonte 16. O padrão é muito bom. Você pode ir e mudar isso. Portanto, as regras básicas são cerca de metade do que os tamanhos de fonte geralmente parecem bons. Se você tem 16, oito funcionam. Desculpe, metade mais a fonte. 16 mais oito. Ok, te dá 24. Não é uma ciência completa. O automóvel é realmente muito bom. É um pouco mais apertado, depende de você, mas essas são algumas regras básicas A outra coisa aqui é que você pode usar porcentagens, então eu poderia usar 150% 150. Se eu digitar 150, presumo que estou usando pixels Eu tenho que digitar uma porcentagem, e isso me dará a mesma medida. Isso realmente não importa. O legal disso, porém, é que se eu aumentar até 20, isso aumentará a altura da linha. Desfaça isso Se você quiser se livrar dele e voltar para Auto, basta excluí-lo daqui, excluir tudo e pressionar Enter, ele voltará para Automático. Vamos ver a diferença entre a altura da linha e o espaçamento entre parágrafos Eu vou devolver. Eu coloco uma devolução depois disso, você pode ficar tentado a fazer uma segunda devolução em mal. Isso é impertinente Você não tem permissão para fazer duas devoluções. A melhor maneira de fazer isso é inicializar um retorno e eu selecionar todo o meu texto. Eu posso acessar esses recursos avançados, e há uma opção aqui que diz espaçamento entre parágrafos Então, esses são os espaços, não entre linhas, mas entre seus parágrafos. Um parágrafo seu foi devolvido. Então, novamente, vou colocar o que você quiser. A regra para espaçamento entre parágrafos é cerca de metade dos tamanhos das fontes É por isso que me confundi que 16/2 é oito. Bom trabalho, Dan. Isso acaba parecendo uma boa quebra de parágrafo. Depende de você se acha que isso é bom. Se você o mantiver em múltiplos de oito, ele pode ser menor, então pode ser quatro Qualquer coisa que seja divisível por oito ou vezes por oito é útil Isso é só mais tarde, quando estamos alinhando as coisas. Quando ficarmos superavançados, talvez em um curso avançado de criação, examinaremos a grade de oito pontos alinhando as coisas. É um pouco nerd, mas, via de regra, tente manter o espaçamento entre parágrafos em oito ou 8,5, ou seja, 12 Algo que funcione, novamente, você pode excluí-lo e pressionar Enter e. Você pode defini-lo como zero para voltar. Você não pode usar porcentagens aqui. Você pode estar fazendo algo tão dobrável, veja este ajuste, vá até este aqui, e eu vou fixar a altura e preciso diminuí-la Você pode ver que simplesmente sai do lado de fora. Eu simplesmente flui para fora. Qual é mesmo o objetivo? É para que você possa entrar aqui na topografia e truncá-la Se você ver o ponto ponto aí, provavelmente desejará adicionar um botão, diz Leia mais para que ele se abra. Você pode truncar os parágrafos. Outras coisas que são úteis, existem marcadores. Vou voltar ao tamanho automático, vou devolver, vou pegar. Lista. As listas também estão escondidas aqui. Eles não estavam inventados. Agora eles estão. Você tem balas e números Você pode fazer o espaçamento da lista em vez do espaçamento entre linhas. São especificamente quatro listas. Novamente, posso colocar oito ou talvez quatro neste caso. Agora eu quero que isso tenha espaçamento entre parágrafos e eu quero que ele diga que é, o que decidimos oito? Agradável. Quero mostrar o espaçamento entre letras, então vou pegar minha fonte e digitar uma espécie de logotipo de espaço reservado Você pode criar seu logotipo no Figma ou em outro lugar, talvez mais tarde, quando melhorar suas habilidades Mas se você tem habilidades com o Illustrator ou alguma outra afinidade com software, Canva, você pode criar um logotipo Não é comum criar logotipos no Figma, mas é possível Está bem? Então, o que eu vou fazer é mostrar isso para vocês. Vou escolher minha fonte. Gosto da coisa Zen para meu logotipo aqui e vou digitar outra coisa. Está bem? Digite dois, e eu vou colocar watts. Walts será aquela areia de molho que usamos anteriormente Molho. Aqui está Source Aspro Tudo bem, fuja, leve você de volta para a ferramenta de movimentação e eu vou meio que alinhá-los aqui. Eu vou dimensioná-lo. Lembre-se, como faço para dimensionar as fontes? Só quero arrastá-lo para cima porque não quero que tenha um tamanho específico. É um logotipo. Estou tentando simplesmente arrastá-lo. Isso mesmo. O cetol basta pressionar a tecla K no teclado e você pode aumentá-lo. Vou fazer a minha desse tamanho e minha carteira vai ficar um pouco menor. Só que não no cetol Dan. Tudo bem Lá vamos nós. Tudo bem, então este é meu pequeno logotipo simulado. O que eu quero fazer é brincar com. Você pode ver essa lacuna irritante entre aqui? Acontece muito com meu nome, Scott. Os dois Ts acabam se separando. O que posso fazer é selecionar esse primeiro, e isso afetará o espaço logo após ele. Por aqui, eu tenho espaçamento entre letras. Veja isso. Eu posso simplesmente clicar em segurar e arrastá-lo, cima e para baixo para o espaçamento entre letras Você vê o que eu estou fazendo aqui? Oh, mágica. Você pode decidir que o C pode estar um pouco mais próximo porque meio que se enrola nele Então, as fontes são melhores. Oh, eu gosto de não, só estou brincando com o espaçamento entre letras, geralmente chamado de enlatamento ou rastreamento, espaçamento entre letras Outra coisa que você pode fazer ao personalizar fontes é manter uma versão disso, então eu apenas a copiei Mas esta aqui, eu vou dizer, clique com o botão direito do mouse, há uma maneira de delinear Onde está, é traçado de contorno. O que eu quero dizer. O que aconteceu aqui é que agora não é uma fonte. São formas que parecem uma fonte. O bom disso, porém, é que não consigo alterar o texto, mas posso entrar nele. Clique duas vezes e eu posso realmente começar a ver esses pequenos pontos aqui. Eu amplio ainda mais. E veja isso, eu posso pegar Shift, esses dois pequenos pontos. Você tem que estar bem perto para mexer com os pontos. Olha, eu posso começar a mexer nisso. Eu posso dizer, eu quero que isso se junte a isso. Estou apenas seguindo o fluxo aqui. O que eu estou fazendo? Não tenho certeza. Clique com a tecla Shift clicando em ambos, movendo-os para o outro lado. Vou usar minhas teclas de seta apenas para tocar nela. Você pode ver que pode começar a separar as fontes. Clique no comando do membro. Vamos direto ao assunto em que você está trabalhando. Às vezes é mais fácil. Isso. Então, um pouco mais. Tudo bem Isso é legal. Tudo bem Delinear as fontes apenas as transforma em uma forma Eu também o uso com bastante frequência aqui embaixo. Digamos que eu queira um pouco mais, vamos dar uma olhada. Às vezes você usa fontes, aquela era para ser uma fonte, Scott, eu só queria mexer com ela Vamos pegar a ferramenta circular, clicar em segurar, pegar a EllipsToL, segurar a tecla Shift para arrastá-la para Não quero preencher e quero um traço. Vamos lançar uma sombra. O traço ficará branco, e eu vou fazer com que seja um peso de dentro disso, vou adicionar a ferramenta de digitação. Vou clicar uma vez aqui em cima , vou usar o sinal positivo. Eu quero que essa vantagem seja ousada. Mas eu não quero mais que seja uma fonte porque é muito difícil alinhá-la. Você pode ver aqui, eu vou pegar meu Ktol, aumentá-lo e O problema com isso, porém, é que se eu mudar minhas fontes, apenas algumas, vou usar comic sans, vou mudar essa porque é um aqui que pode ser um pouco difícil de alinhar porque está em uma caixa de texto grande porque não estou usando como fonte, vou clicar com o botão direito do mouse e dizer, crie um vou clicar com o botão direito do mouse e dizer, crie Agora é mais apenas uma forma. Eu posso decidir, vou entrar nisso e decidir que não tenho certeza do porquê, mas ajustá-lo, mas mais do que eu gosto dele como forma. Porque então é fácil pegar isso e isso e alinhá-lo no centro, em vez de em uma fonte. Vamos tentar fazer isso com uma fonte. Será que vai funcionar? É melhor que eu não. Ok, eu pego isso e isso e vou para aquele lado, e desse jeito, você pode ver que está um pouco descentralizado Então, vou voltar para minha linda fonte. Estava descentralizado, Dan? Vamos todos fingir que foi Está bem? Então, às vezes você só quer que a fonte tenha uma forma. Y perfumado, centrado. E vamos agrupá-lo. Vou emoldurá-la, entrar dentro de uma moldura. Tudo bem, vamos usar isso mais tarde também. Então, quando as pessoas clicarem nisso, ele vai para, tipo, a próxima página. Tudo bem, outras coisas interessantes sobre fontes, enquanto ouvimos falar de nerds. Olha isso cinco tenho esse texto aqui, e eu preciso de um link. Vou colocar um link com os colchetes sem um bom motivo Vou selecionar isso, e há uma opção aqui. Você pode ver ao lado do texto que há uma coisinha especial que diz: Ei, você quer criar um link? Está bem? Para onde isso vai? Vamos trazer nosso próprio laptop, Head Enter. Também vou torná-lo azul só porque acho que fontes precisam ser links precisam ser azuis. Minha capa tem que ser um pouco mais brilhante do que o azul normal porque não tenho certeza se vou vê-la contra a roxa Na verdade, não está funcionando, mas eu também vou selecioná-lo e pronto. Oh, eu adicionei um preenchimento. Eu tive um preenchimento? Não, eu não selecionei tudo isso e também posso usar negrito, então esse é outro atalho Em vez de ir e encontrar a versão ousada disso, tudo bem. Mas a maioria das fontes, se estiverem em negrito, você pode selecioná-la e clicar em Command ou Control B. O mesmo acontece com itálico Se houver um itálico na fonte, se não estiver, não será B, eu uso sublinhado, e acho que vamos lá, Shift X. É isso aí. Command Shift X ou Control Shift 6 em um PC, nós resolveremos. Essas são coisas nerds que funcionam em qualquer coisa no seu computador. Word, Google Docs, e-mails, Command B, I, UX. Você pode encontrá-los aqui. Lembre-se, lembrete de que você tem atalhos de teclado. Você pode acessar o texto e encontrar as coisas em que obtivemos Underline Aí está o link de criação que acabamos de criar. Existe o atalho para isso. Mas o sublinhado em negrito e itálico aparece. O legal deles, porém, é que, se você os aprender, eles são os mesmos em todas as editoras eletrônicas. Tudo o que vou tirar do Underline, longe do itálico. vamos dar uma prévia Na verdade, vamos dar uma prévia só para ver como funciona. Eu vou dizer, Ah, sim, porque as pessoas não saberão como o Link funciona, Dan. É um pouco assustador, tipo, Ei, você está deixando Figma. Tudo bem. Aí está. Os links funcionam. Não tenho certeza de onde eu tive que provar isso. Um último que eu acho muito útil como atalho, especialmente quando você não tem certeza das fontes Eu lhe dei algum tipo de limite para fontes, o que deveria ser? Muitas vezes você simplesmente não tem certeza. Você pode selecionar o texto e usar mudança de comando em um Mac e a mudança de controle em um PC. E você pode ver no teclado, você tem um maior que e um menor que. No meu teclado, eles estão misturados com o ponto e a vírgula Você mantém essas duas teclas pressionadas, mudança de comando ou mudança de controle em um PC. Ele apenas faz o tamanho da fonte. Eu adoro isso. Porque estou 100%. Eu acho que precisa ser maior. Quanto maior? Apenas dê uma dica, dica, dica, dica, faça. E essa, novamente, é uma daquelas ferramentas que funcionam em praticamente todos os softwares de editoração eletrônica. Você pode simplesmente pegar isso e torná-lo maior. Esse cara precisa ser maior. Agora, esse cara, eu estou tentando usar fontes maiores, que só funciona com fontes, certo? Isso não é mais uma fonte, então eu tenho que usar meu cetol e aumentá-lo Clique em You Nice Chef. Isso deveria ser perfumado? Não tenho certeza. Vou usar alguns ancinhos para empurrá-lo. Eu gosto disso lá. Uau. Legal. Tudo bem, meus amigos. É isso mesmo. Isso são fontes avançadas, truques e dicas. Coisas que vamos precisar para o curso. Vamos passar para o próximo vídeo. Antes que ele nos mostre como usar os Links novamente. Olha, clica. Eu vou ao nosso site. Uh. Tudo bem, próximo vídeo 47. Projeto do curso 08 - Texto: Tudo bem, é hora de colocar em prática um pouco do que aprendemos nos últimos vídeos Projeto de classe número oito, o texto. Ok, então eu quero que você crie um pequeno logotipo. Não precisa ser chique, a menos que você queira que seja. Você não precisa projetá-lo no Figma. Na verdade, projete Figma. Quero que você pratique com todos os diferentes tipos de ferramentas que aprendemos. Talvez descreva isso, você não precisa. E queremos algo no canto superior esquerdo. Não precisa ser chique Eu fiz alguns outros bloqueios fáceis em que você pode usar fontes apenas como exemplos Você pode ser um ótimo designer e criar algo legal. Se você está apenas procurando algo simples, apenas o texto com uma diferença de peso e uma diferença de cor, algo simples. Depende de você, mas eu quero isso na sua página inicial. Em sua página inicial de alta fidelidade, quero que você faça o básico Você precisa de sua mensagem de marketing texto reservado e de alguns cartões, o que faremos em um sexo. Basicamente, algo assim. No topo, sua caixa de heróis, sua principal mensagem de marketing Invente alguma coisa. Pode ser ridículo, pode ser muito atencioso Você pode usar a IA. Eu não me importo. Ok, e então algum texto de espaço reservado. Pode ser UrinopSumo novamente, você pode digitar algo, pensar em algo, usar IA Eu não me importo, mas eu quero que você use seus estilos. E o que eu quero que você faça com seus estilos e estilos cores é que eu quero que você crie uma página de guia de estilo. Figmaples pode ficar muito confuso, vamos criar uma página chamada Vou apenas copiar uma paleta de cores para ela e nossas fontes. Eu quero que você os invente, e eu quero que você tenha certeza de que eles são estilos. Você não precisa ter dois deles. Você pode ter apenas um. Isso é totalmente bom. Quero que você faça uma captura de tela de tudo isso e da sua página inicial Na sua página inicial, quero que você também faça um cartão. Eu vou voltar Ah, Do, Hi Fi. Este cartão aqui. Eu fiz este bastante genérico. Eu quero que você faça uma pequena pesquisa sobre o que você pode fazer. Na verdade, eu quero você lá em cima. Copie, entre neste, cole volte para o lugar certo. Está bem? Portanto, cartões de interface de usuário é um termo para iniciantes design de interface do usuário. Tenho alguns exemplos em seus arquivos de exercícios chamados exemplos de cartões de interface do usuário. Apenas alguns exemplos que achei meio legais. Eu quero que você saia e dê uma olhada você mesmo. Está bem? Então tem aquele site mob e que eu mostrei para vocês no último É muito bom para procurar placas de interface de usuário. Vá para drible, vá para Pentrs, vá para o Instagram, vá para onde você normalmente vai para procurar coisas e digite exemplos de UICard ou apenas UICard Basta ver o que outras pessoas fizeram. Parte muito comum do design da web e do design de aplicativos e descubra algo. Você pode copiar o que eu fiz. Tudo bem. Ou algo que está nos exemplos aqui, mas apenas algo básico. Ainda não precisa de imagens, e eu quero que você as exponha e eu quero três delas. Não tenho certeza se gosto deles. Isso não parece bom lá, não é? De volta para onde você estava. Aí está. E tenha três deles. Talvez você precise ativar seus guias. Não bata no H em um Mac. Desapareceu. Aí está você, você volta, e então é o Comando G. Não, Shift G. Eu quero três cartas na parte inferior aqui. Você pode brincar com o espaçamento para deixar tudo bonito. Precisa do mesmo na parte superior. Também aqui embaixo, vamos apresentar três recursos que seu produto pode ter. Novamente, não perca muito tempo pensando nos recursos perfeitos. Eu usei Lauren Ipsum na parte inferior, e acabamos de ter uma imagem Apague o ícone da imagem antes de fazermos imagens daqui a pouco. R: É isso? Vamos verificar. Mova seus estilos para um estilo GoodePagerSearch, cartões de interface, dê Você pode decidir se quer três ou quatro cartas especiais à sua disposição. Exemplos nos arquivos de exercícios, resultados. Faça uma captura de tela da sua página inicial e da página guia de estilo, ou pelo menos da parte que está nela Então eu quero que você compartilhe sobre as tarefas, normais, projetos e tarefas, mas também quero que você compartilhe nas redes sociais agora Agora estamos em um ponto em que você pensa Não é tudo a mesma coisa. São projetos chatos, chatos. Eles não são exclusivos para você e seu produto. Agora estamos nesse ponto. Eu quero que você compartilhe nas redes sociais também. Adoro ver o que você fez, e é um bom público como, Ei, isso é o que estou fazendo. Estou fazendo esse curso Figma Essentials cara kiwi muito bonito E é nisso que estamos trabalhando. Além disso, peça feedback e dê feedback. É a troca. Tenho pessoas me ajudando, trazendo nossos especialistas em notebooks para responder, mas é difícil chegar lá. Já cruzamos mais de 1 milhão de estudantes, então você pode imaginar que temos muito de nós. Então, o que fazemos agora é perguntar a você. Garantimos que, se você pedir uma opinião, tenha que dar duas, será mais útil para você. Ser capaz de se articular com outros designers, começar é uma habilidade muito importante, especialmente quando você precisa começar a defender ou explicar suas escolhas de design quando está do outro lado Coloque o seu, peça conselhos e certifique-se de encontrar de outras pessoas e dar-lhes conselhos. Pode ser muito ruim no começo. Você vai ficar melhor. As cores são boas. Mas veja o que outras pessoas estão fazendo. Tipo, eu gosto do contraste. Não gosto do contraste. A legibilidade disso não é ótima. Apenas certifique-se de fazer isso com um pouco de humildade. Todo mundo está apenas começando. O que eu gosto de fazer é chamá-lo de sanduíche ****. Não tenho certeza se podemos usar isso. Você começa com um positivo. Eu gosto que você fez nesta parte em particular. Então, no meio, a parte S do sanduíche é: o que eu faria a seguir, o que você poderia fazer mais adiante, ou acho que haverá um problema de legibilidade, mas acho que é um ótimo primeiro Você pode ver a parte do sanduíche? Positivo no exterior e crítica no meio Você sabe o que está fazendo. De qualquer forma, esse é o projeto. Vamos construir nossa página inicial, lançar nossa página Star go Mesmo que você esteja odiando suas fontes e suas cores, não se preocupe. Podemos alterá-los mais tarde. Estamos realmente aprendendo as ferramentas aqui, então entre, experimente e nos vemos no próximo vídeo. 48. Texto em um texto curvo de caminho no Figma: Oi, pessoal. Neste vídeo, mostrarei como digitar em um caminho. Olha, estamos digitando em um caminho no Figma. Deixe-me te mostrar como fazer isso. Tudo bem para começar, vamos desenhá-lo na borda aqui, em vez de dentro das molduras. Isso só torna as coisas um pouco mais fáceis enquanto trabalhamos. E é uma espécie de vídeo de transição em que passamos do texto para um pouco do desenho, que é a próxima seção. Precisamos de um pouco dos dois porque precisamos de uma curva. A melhor forma de fazer uma curva. Bem, a maneira mais fácil é mudar para esse modo de desenho na parte inferior aqui. Estamos empenhados em design. Está bem? Ainda não fomos ao Dev. Oh, o que tem aí? Não clique nisso. Vá para o modo de desenho, que é este aqui. Podemos pegar algumas coisas que pareçam secas. Agora vamos começar com o lápis. Pegue o lápis, escolha uma cor. Eu tenho que escolher uma cor branca porque não consigo vê-la no fundo. Depende de você em termos de tamanho. Essa é a largura. Woo, clique nele novamente. Essa é a espessura da linha. Realmente não importa para o que estamos fazendo. O que vamos fazer é clicar em segurar e arrastar uma linha ondulada Figma ainda não é boa em desenhar linhas suaves. Eu quero que haja uma opção suave. Ah. Basta desenhar alguma coisa. Desenhe rápido. Pronto? Desenhe rápido. Não. Desenhe rápido. Eu tinha um que era bom. Isso bastará. Ok, agora vamos pegar a ferramenta de texto, tudo o que precisamos fazer é passar o mouse sobre ela Ok, você pode ver o pequeno ícone mudar para a pequena curva ? Clique uma vez. E agora podemos digitar em uma curva. Deve acabar no lugar certo. Caso contrário, há uma opção aqui de inverter a orientação para ficar do outro lado. Não é o que eu quero. Outra coisa útil é que, se eu voltar para minha ferramenta de movimentação, você verá um pequeno ponto. Esse pequeno ponto branco aqui é mais ou menos onde tudo começa. Você pode brincar com se estiver centralizado, ok? Então, os pequenos pontos no meio. Está bem? Então, quando você começar a digitar , mais texto sairá do centro O que vou fazer agora é que você pode fazer qualquer curva, para que possamos usar uma linha. Na verdade, uma linha não é muito útil. Poderíamos usar a estrela. Clique e desenhe uma estrela, pegue a ferramenta de digitação. Não precisa da ferramenta de lápis, você não precisa realmente estar no modo de desenho. Vamos voltar ao design e vamos pegar a ferramenta de digitação. Contanto que você passe o mouse sobre ele, eu o transformarei em um caminho Clique em Escape para sair dela. Você notará que a estrela desapareceu. Antes de fazer isso, você pode copiá-lo para que, quando você o transformar em um caminho, escapar para sair, eu possa colá-lo novamente. Falha na colagem da área de transferência. Desfazer, desfazer, desfazer, desfazer, copiar . Eu ia colá-lo primeiro. Oh, falhei. Tudo bem, não gosta de copiar estrelas hoje. Isso, copiar e colar. Sim, eu tenho dois desses. Estranho. Não gosta da estrela. Isso é um bug para mim, provavelmente só hoje. Vou deixar isso aí porque coisas assim acontecem. Mas normalmente basta copiar e colar, então você tem duas versões. Vamos fazer algo um pouco melhor. Então eu vou, eu vou fazer com esse texto aqui. Eu faço esse segundo, copio e vou clicar duas vezes nele e colar nele. Você pode ver que tem dois pedaços de texto lá agora. Na verdade, eu apenas copiei e colei para que eu tivesse duas linhas diferentes Eu realmente não substituí um deles. Eles eram apenas dois empilhados um em cima do outro. O que eu vou fazer é fazer isso e fazer máximo de propósito onde eu quero que esteja. Algo parecido. Tudo bem, não é o que eu quero. Mas isso é digitar um caminho. Vou passar anos desenhando isso. Oh, essa foi boa. Copie isso, pegue minha ferramenta de texto e você verá que ela tem um traço branco, esse traço branco desaparecerá quando se transformar em texto em um caminho. Vou selecioná-lo online, torná-lo um pouco maior. O atalho para isso é deslocamento de comando e colchete Fizemos isso, não é? Sim, fizemos a mudança de controle, não o colchete, o maior que e o menor que pecados Eu vou fazer isso e escapei, saí de lá, e vou me livrar de você E eu vou mudar isso. Era melhor na minha cabeça. Eu vou girá-lo ao redor Girando qualquer coisa com ela selecionada. Você não pode passar o mouse nas bordas aqui, apenas do lado de fora. Consegue ver essas pequenas flechas duplas? Está bem? Estamos gostando disso Oh, eu vou fazer. Oh, é terrível. Ok, vamos digitar um caminho. Poderemos fazer uma linha mais suave quando entrarmos na próxima seção de desenho, quando começarmos a usar a ferramenta de pinos Mas, no momento, parece suave o suficiente. E é isso. Te vejo no próximo vídeo. 49. Texto em torno de um emblema circular no Figma: Oi, todo mundo. Vamos fazer esse crachá com texto na parte superior e inferior O truque sorrateiro é que, na verdade, são apenas dois círculos. Você tem dois pedaços de texto no mesmo caminho. Então, basta fazer dois deles, virá-los e alinhá-los para que tenham a aparência que têm São algumas outras coisas que eu quero compartilhar aqui, como o modo de contorno e algumas outras coisas Então, vamos começar. Ok, para este, é a mesma técnica de digitar um caminho do último vídeo, mas vamos fazer alguns pequenos extras para fazer isso. Vamos começar dizendo que não precisamos estar no modo de sorteio. Só precisamos de uma elipse, que é a Oki, que parece Aí está. Oh, Oki e eu vamos segurar a tecla shift para que meu círculo fique redondo perfeito e não oval, e eu vou pegar a ferramenta Type e clicar em algum lugar na parte superior e ela se transforma em um caminho Não é surpresa, Dan. Eu vou fazer 30 dias 30 dias. Quando você usa medalhas, é mais fácil usar letras maiúsculas. Se você começar a fazer parte superior e inferior, elas parecerão estranhas E depende de você. Dinheiro de volta é uma palavra? É hoje. Vou selecionar um tamanho de fonte mais apropriado. Vou desconectá-lo do meu cabeçalho e vou usar meu outro, que é sourcens Você pode ver que eu posso brincar com coisas como espaçamento entre letras, o que é importante quando você está contornando isso Também vou usar um tamanho de fonte mais apropriado, algo parecido com o meu espaçamento entre letras Se você quiser se livrar do que você digitou, basta excluí-lo e pressionar Enter, Oh, Não, basta digitar e zero Algumas coisas que eu quero fazer é bater, escapar ou voltar para a ferramenta de movimentação. Você pega o ponto. O que eu quero fazer é que seja centrado e que esteja lá Novamente, tamanho da fonte, vou diminuir um pouco. Agora, como faço para colocá-lo no fundo, ok? O que você precisa saber é que você não pode ter mais do que um pedaço de texto em um círculo. Então, eu preciso de dois círculos. Então eu vou copiar isso e colar, então eu tenho dois deles. Vou separá-los, vou virar isso ao contrário e depois vou girá-lo . Então eu tenho a parte inferior. Está bem? Você pode segurar a tecla Shift enquanto estiver girando Está bem? Você pode girá-lo aqui. Você pode ver aqui que diz rotação 180, e eu vou dizer que preciso garantir que ela e meu caps lock pararam de funcionar, então eu tenho um turno inteiro o tempo todo O único problema com isso é que, no momento, você não pode, com figma, brincar com o ponto em que ela está na linha Pelo menos eu não descobri como fazer isso. É um novo recurso para isso. Parece estranho, então vou ter que aumentar um pouco mais a elipse e você simplesmente Eu surto. É um pouco difícil ver onde eles estão agora porque eles são completamente transparentes. Há um atalho, ok? Ou Command Y ou Control Y em um PC. Uau. O que aconteceu? É chamado de modo de contorno e é como uma invisibilidade Não, raios-X que eu quero. Você pode começar a ver as coisas e seus contornos fundamentais Infelizmente, você não consegue ver o texto alguns deles, mas não nesses círculos aqui. O que vou fazer agora é que, se eu quiser exagerar perfeitamente, você pode ver aqui que é um pouco mais fácil nesse modo, basta ativar o Comando ou Controle Y para alinhar as coisas Então eu vou brincar com isso. Isso é tudo para digitar em um caminho. Eu vou sair e fazer minha piada. Você pode acompanhar se quiser, depende de você. Vou usar negrito, o espaçamento entre letras aqui precisa ser aumentado Só para caber um pouco melhor por aqui. Aquele aí parece estar bem. Vou pegar mais alguns círculos, veio o Oki Eu posso fazer uma das duas coisas. Eu vou manter o turno. Eu posso fazer uma coisa central aqui, segurar a tecla Shift novamente e colocá-la no meio. Deveria estalar. É muito bom para fotografar Então eu posso adicionar um traço na parte externa. Estou escolhendo qualquer coisa no momento e depois aumento o peso para ter aquela linha por aí Ele vai para a posição interna, fora do traço, e eu vou continuar cada vez maior e maior. Até chegar lá, e então eu vou usar meu atalho, que é enviar de volta, você pode clicar com o botão direito do mouse, lembrar, remetente de volta ou os colchetes Você pode fazer isso para fazer sua coisinha funcionar ou apenas dois círculos até você. Vamos descer até o fundo aqui. É um pouco estranho. Outro pequeno bônus, se você estiver por perto, é que, quando estou arrastando esse tamanho maior, eu mantenho a tecla Shift pressionada para que fique um círculo, caso contrário, fica instável Mas se eu pressionar meu Shift mais o contador opcional mac em um PC, ele será arrastado do centro, o que pode ser útil, especialmente alinhando isso . Aí está. Vou escolher algumas cores do meu estilo. Em vez de apenas escolher a cor do traço aleatório, vou usar meus estilos Eu vou dizer que o centro será um gradiente. Ah. Eu adicionei isso ao traço. Não é o que eu queria. Clique lá. Eu quero que seja qual deles eu quero do lado de fora? Espere aí pensando na cor escura. No centro disso, o preenchimento, eu vou escolher o gradiente. Extravagante. Tudo bem É assim que se faz um crachá com os textos na parte superior e inferior É só um truque. Eles estão apenas sobrepostos Parece que estão no mesmo caminho, mas não são apenas dois círculos sobrepostos Agora temos um distintivo. Os emblemas são incríveis Tudo bem É isso mesmo. Vou ver no próximo vídeo. 50. Como usar as ferramentas Lápis e Pincel no Figma: Oi, pessoal. Vamos desenhar muitas linhas e fazer com que todas sejam escovadas e com rodas . Aqui está minha linha de manobra É a ferramenta de lápis e a ferramenta de pincel e algumas de suas configurações dentro de uma figura. Vamos começar. A ferramenta de lápis e pincel. Cobrimos um pouco a ferramenta de lápis. Vamos mudar para nossas ferramentas de desenho, e ela muda para baixo aqui. A ferramenta lápis desenha com o traçado. Vou escolher uma cor melhor. Vamos escolher o branco. Ok, e clicando e arrastando, obtemos uma ferramenta de lápis. A ferramenta de pincel, por outro lado, desenha com esses traços mais estilísticos. Vou deixá-lo como assalto e clicar e arrastar. Oh, tenho que escolher uma cor. Vamos fazer isso. Você pode alterá-los depois. Mas clicando e arrastando, novamente, estou esperando a parte de suavização que pode estar Espero que haja uma atualização que diga: podemos desenhar de forma mais suave ou talvez desdobragem seja apenas mais suave. Mas é muito legal, não é? Eu gosto dos pincéis. Os pincéis meio que escondem alguns dos problemas de suavidade Mas como esse efeito muito legal, você pode cruzá-los. Veja isso. Temos esse desenho que fizemos com a ferramenta lápis. Você será melhor se tiver um Wacom ou algum outro tablet de desenho Serão mais suaves. Mas o que você pode fazer é selecioná-los. Você pode ir até o traço, e há uma opção aqui. Veja esta pequena opção de configurações e você pode dizer, na verdade, eu quero que ela seja dinâmica. Não, eu quero que seja uma escova. Você troca este por um pincel. Você pode acessar e escolher os da ferramenta de pincel. Aquele aí. Você realmente não pode ver isso. Você pode ver que eu preciso aumentar a espessura Você também pode brincar com uma direção. A outra coisa que você pode fazer com a ferramenta de lápis, desculpe, é desenhar algo. Vou torná-lo um pouco maior. Na verdade, vou ter que usar minha ferramenta de seleção, pegá-la e torná-la um pouco maior porque quero mostrar alguns dos outros recursos aqui. Está subdinâmico. Você pode fazer com que fique ondulado Você pode diminuir a frequência e torná-la realmente instável. Um pouco instável. Você também tem que brincar com o golpe. Então, a senhora talvez seja um pouco grossa. A frequência é o quão apertados são os movimentos. A ondulação é a extensão da altura deles Então, quão distantes eles estão, quão altos eles são. Se aumentarmos um pouco o zoom, você verá onde está escrito suave ou suavizado. Você pode torná-los nítidos ou supersuaves. Você pode adicionar pontos finais como nossas setas, e não sei por que precisamos deles aqui, mas estão lá Tudo bem. O que eu vou fazer é odiar isso de verdade. Vou pegar isso e agora estamos apenas fazendo coisas de produção. Isso é tudo para o pincel e a ferramenta de lápis. Acompanhe se quiser conferir isso. Eu vou me livrar disso, colocar isso de volta. Estou apenas copiando e colando. O que eu quero fazer é colocar um espaço entre eles e não tenho certeza do que quero, se é o pincel, então vou pegar a ferramenta de pincel. Faça algo assim, como uma pequena linha divisória. Isso é muito bom. Eu gosto disso. Ou talvez eu tenha a opção de te levar para lá. Talvez eu faça uma linha reta. Em vez de usar a ferramenta lápis ou a ferramenta caneta ou qualquer outra coisa, vou até as ovelhas, vou pegar uma linha e vou segurar a tecla Shift. É branco. Vou engrossar um pouco mais e vou fazer todas essas configurações para criar uma dinâmica ondulada. Não consigo ver o meu aqui embaixo. Você pode pegá-lo se ele acabar saindo da tela. Acho que o meu está fazendo isso porque tenho um segundo monitor aqui embaixo que você não pode ver. Isso parece legal, ondulado. Oh, estou gostando. Meio que combina com a fonte desenhada à mão, ok? Acho que sim, de qualquer forma. Ok, vou voltar para minha ferramenta de movimentação e vou usá-la como divisória qual deles gostamos? O acariciado, o escovado ou o ondulado Oh, acho que gosto da ondulada, mas por alguma razão, acho que precisa de um ponto na ponta Bem, uma coisa que ele tem é uma ponta muito afiada. Podemos mudar isso? Ah. Vamos dar uma olhada. Tampa arredondada. Carrinho para esses. Essas opções não funcionam, não é? Básico? Não. Ok, então você pode acabar aqui? Ponta arredondada? Oh, você pode. Tudo bem, decifre o código. O que eu também queria era o Oki e queria desenhar um pequeno círculo no final aqui que fosse da cor branca Por quê? Eu não sei. Está tudo bem com o ponto? Acho que sim. Tudo bem. Ferramenta de pincel, ferramenta de lápis dentro do Figma. 51. Como usar a ferramenta Caneta no Figma: Primeiro, neste vídeo, aprenderemos como usar o Pentl. É complicado. Na verdade, está fora do escopo deste curso, mas quero dar uma olhada que você possa começar. Se você chegar ao fim, você frustrado e fica tipo, eu odeio a lentilha Ok, muitas pessoas odeiam a ferramenta de caneta. Desculpe, ferramenta de caneta. Mas vou te dar como funciona na invenção, algumas dicas e truques, e vamos desenhar uma montanha É uma montanha. Essas são para serem nuvens. E isso eu não tenho certeza. Era para ser uma chama, mas agora parece uma folha. De qualquer forma, vamos começar e aprender a ferramenta de alfinetes no figma. Tudo bem, para a ferramenta de caneta, vamos desenhar alguma coisa. Vamos desenhar na parte superior de uma imagem que eu tenho. Então, quando você exercita arquivos, existe um Pentool 01 Você pode simplesmente arrastá-lo para dentro ou lembre-se, você também pode ir. Você pode estar no modo de sorteio? Provavelmente. Sim, você pode. Traga uma imagem e vá procurá-la. Ele está em seus arquivos de exercícios chamado Pentool 01. Traga-o aqui. Vou clicar uma vez e vou ampliá-la. Também vamos fazer isso: vamos trancá-lo. Você pode clicar com o botão direito do mouse nas coisas e dizer bloquear. Significa apenas que não consigo movê-lo. Para desbloqueá-lo, você pode clicar com o botão direito do mouse e dizer desbloquear ou no painel Camadas. Você pode ver que há um pequeno ícone de bloqueio aqui? Eu posso desbloqueá-lo, trancá-lo. De qualquer forma, preciso trancá-la porque vamos desenhar por cima. Vamos às nossas ferramentas de desenho. Vamos pegar esse cara aqui, a ferramenta de caneta. Que cor eu vou usar? Vou usar algo muito brilhante para que você possa vê-lo se desfazer com muita luz, para que você possa vê-lo acender, Dan Ele escapou para fechar isso. Pentilha. Certifique-se de usar pentilha É o piki e começaremos com os mais fáceis. Começaremos com o quadrado. Pentol é clicar uma vez, clique novamente e você pode criar formas personalizadas Vou aumentar o peso da minha linha para que você possa ver. Estou apenas clicando uma vez, clicando uma vez, clicando uma vez. O que você está procurando é que, quando você volta, está se encaixando ou não meu desenho, está se encaixando nessa coisa Você pode ver lá? Está indo, Ei, olha, estamos alinhados. Isso é legal para mim. Então, temos que voltar ao início. Aquele que você está procurando, veja a pentilha, ela tem aquele pequeno círculo que aparece Isso significa que estou em forma completa. O legal disso é que eu posso ir até aqui e dizer, você pode se fartar. Na verdade, vou usar um dos meus que vou usar. Um dos meus, como eles são chamados? Eles são chamados de estilos. É isso mesmo. Um cérebro. Eu vou usar isso. As linhas são fáceis. Para ajustá-los posteriormente. Digamos que você tenha clicado em Desativar, clique duas vezes para entrar padrão deve ser essa ferramenta Se não estiver, vá para a ferramenta de movimentação. É como uma ferramenta de segundo movimento. É como a ferramenta de movimentação, mas para esses vetores, essas linhas de ferramentas de caneta, o que você pode fazer é clicar nelas e mexer nelas e alinhá-las se não as tiver Isso é bom. Vamos ver como fazer curvas. Deixe-os entrar. Vamos fazer uma nuvem. A propósito , é uma nuvem. Certifique-se de que na minha lentilha estamos desenhando Pentl em termos de traços, vai ficar Então, vamos fazer curvas e alguns cantos. Então, o que vamos fazer é clicar uma vez para ver um canto. Se você quiser fazer uma curva, encontre o ápice da curva , clique em segurar e arraste Solte. E se você quiser encurralar novamente, clique uma vez. Clique em Segurar e arraste. Você está procurando o ápice de qualquer curva que esteja fazendo Lá, clique em segurar e arraste-o para fora. Abaixo disso, clique em segurar e arraste. Se você o perder, você fica tipo, como faço para voltar ao noscpescape, você fica tipo, como faço para voltar para ele faço para voltar ao noscpescape, você fica tipo, como faço para voltar para Você clica duas vezes nele para entrar. Você pode voltar para a sua pentilha e clicar nela e ela será reiniciada Nesse caso, ele o transformou em um canto. Vou clicar em segurar e arrastar isso para fora. Está quebrado, só isso. Eu vou te mostrar como consertar em um segundo. Se você perder, basta clicar para ver onde está o final da linha e o que vamos fazer é continuar. Eu vou te mostrar como consertar isso em um segundo. Clique uma vez em um canto, clique e segure e arraste para fazer uma curva. Clique uma vez em um canto e, em seguida, volte aqui, é outro clique uma vez. É uma bela curva afiada. Estou procurando aquele pequeno círculo e temos uma forma inteira. Olhe para nós. H. Se você tem coisas que estão um pouco quebradas, mas você quer que seja uma curva, você pode voltar para essa ferramenta aqui, ou ir para essa ferramenta aqui, dobrar. Clique aqui e, em seguida, clique e arraste sobre isso. Estou clicando, segurando e arrastando isso. É chamado de ponto de ancoragem, e eu posso arrastá-lo para fora. É assim que se convertem cantos em curvas. Se você quiser que vá para o outro lado, você quer que essa curva não seja porque no momento é uma gangorra Voltei à minha ferramenta de movimentação e posso ajustá-las. Elas são chamadas de alças. Isso é chamado de ponto de ancoragem. Eu posso arrastar essa alça. Mas digamos que eu queira que seja pontudo. Como faço para quebrar isso? Estou usando essa ferramenta aqui. Eu pressiono meu dossel opcional, C, e puxo uma das gangorras, e ela a Aí está. Eu tenho um estranho cogumelo flamejante Eu vou voltar, transformá-la em uma curva e dizer, você é incrível. Uma das outras coisas que você notará aqui é que eu tenho um traço bastante denso e muito pronunciado. Você pode ver que isso tem razão? Por que isso tem razão? É porque há algo chamado mitral. É mitração? Eu acho que sim. O que acontece é que esse é um ponto mais sutil do que esse, ele permite que ele faça isso. Quando eles estão realmente agudos, como este, você pode ver que estão escondidos ali Ele não sabe o que fazer, então simplesmente o interrompe. O que podemos fazer é assistir isso e voltar para minha ferramenta de movimentação, clicar aqui. Você verá as pequenas alças aparecerem aqui. Veja isso. Se eu abrir, veja, às vezes eles estão lá, às vezes não estão. Caso contrário, você pode ver o quão grande ele ficaria? Acabei saindo correndo da página, eles simplesmente a matam. O que você pode fazer, porém, é dizer, eu não gosto dessa inconsistência O que eu vou fazer é ir para meu derrame, onde está o meu derrame. Aqui está aqui, vou acessar as configurações aqui e que tipo de junções eu quero Mited é o que está passando no momento. Você pode brincar com o ângulo silenciado , como em vamos apenas brincar Bem, aumente para 290. Isso vai entalhar as bordas. Você pode ver que corta as bordas lá? Eu poderia ir até este aqui e apenas dizer chanfrá-los. Posso vê-lo chanfrar as bordas ou, eu poderia dizer, arredondá-las. Provavelmente é mais adequado para esse desenho em particular, é fazer isso para esses. A única coisa a notar é que isso também aconteceu com este, porque está fazendo isso com todo o vetor que eu desenhei. Se eu quiser que isso seja separado, o que posso fazer é clicar duas vezes para entrar, arrastar uma caixa ao redor de tudo isso, cortar, eu me livrei dela. Eu vou sair desse vetor duplo clique no fundo. Ele agora está sozinho, e eu posso colar este, e há dois vetores separados Agora eu posso dizer que você, meu amigo, não é mais arredondado, você está mudo, então você tem bordas pontiagudas Eu sei que isso é um pouco complicado, pois eu não sei. Isso é Figma. Estamos fazendo design de interface de usuário, mas as lentilhas são muito úteis É um curso por si só, mas eu quero dar uma boa visão geral sobre ele. Vamos fazer mais um. Vamos testar, PentilPiki clique uma vez em um canto, clique e arraste para clique e arraste Clique uma vez para um canto, clique e arraste para uma curva, clique uma vez para um canto, clique e arraste para uma curva, uma vez para um canto e depois volte ao início novamente. Se você perder, pode continuar clicando lá até encontrá-la, ou eu a desfaria e faria de novo. Há uma opção aqui se você chegar perto. Você pode usar o Comando J, eu acho. Você não pode. Você pode. Você pode usar a ferramenta de seleção, selecionar todos esses caras e pressionar Command J ou Control J em um PC. Mas isso é feio O que eu quero fazer provavelmente é excluir esse ponto para excluir um ponto. Esse é um bom ponto. Eu clico nele, então fica azul, clico em Excluir, pego minha ferramenta de caneta. Mm, eu posso simplesmente passar o mouse aqui para começar de novo, clique uma vez Mais uma vez, e estamos de volta fazendo isso. Eu vou roubar as cores disso. O que eu quero fazer é clicar duas vezes nele para sair do modo de desenho. Eu quero selecionar isso. Eu vou para. Não me lembro onde está. em Editar propriedades de cópia. Vou clicar aqui e ir para Editar propriedades do Pace. Existe um atalho. Não me lembro o que era. O que eram as propriedades de Pace lá. Opção de comando V em um Mac Control Ou uma TV antiga em um PC. Legal. Mas vamos ignorar isso. Tudo bem, vamos fazer algo mais complicado aqui. É mais complicado? Gentil. mostrar mais um exemplo antes de prosseguirmos. Vou pegar a lentilha. Na verdade, vou me certificar de que cliquei no plano de fundo para não adicionar nada a eles Estou fazendo meu próprio novo. Pentilha? Isso é uma curva ou um canto? Essa é uma esquina. Um nítido, então vou clicar em. Por aqui, para onde vai a curva? Porque era mais fácil aqui porque estava bem no meio. O que estamos procurando é o máximo o ápice é onde ele gira mais, seja , mais aqui Não está no meio. Veja, essa é a parte mais flexível. Então, vou clicar em segurar segurar segurar segurar e arrastar para fora. Ok, eu subo aqui e vou dizer, Oh, não está combinando. Você tem a tendência de clicar, segurar e arrastar e fazer isso funcionar O problema é que temos isso. Uau. De qualquer forma, precisamos consertá-lo. Nós o desbastamos e depois consertamos. Vamos continuar assim, e eu vou te mostrar como consertá-lo, e então vamos redesenhá-lo e mostrar uma maneira diferente Agora eu tenho duas curvas aqui. O que eu faço? Em primeiro lugar, não consigo lidar com isso. Já vimos isso antes no meu pentel. Se você mantiver pressionada a tecla de opção em um Mac, tecla antiga em um PC, ao passar o mouse sobre essa alça aqui, verá que ela muda da ferramenta caneta para essa pequena seta que diz: Vou pegar esse cara e, como estou pressionando a tecla lk na tecla de opção do PC em um Mac, posso quebrá-la Para onde isso vai? Essa é a parte complicada quando você está comprando uma ferramenta nova para caneta Alguns de vocês podem ser bons com isso. Algumas pessoas podem ter medo disso. É difícil. Isso está fora do escopo deste curso, mas eu quero dar a você as dicas. Vou arrastá-lo até aqui só porque sei que quando eu o solto, você pode ver que é a gravidade que o puxa dessa maneira Você pode pegá-lo novamente e dizer “realmente” aqui. É só desbastá-lo e depois consertá-lo. Para onde vai minha próxima curva? Eu quero um lá e outro lá. Essa curva é bidirecional. Ele entra e sai. O que vou fazer é clicar em segurar e arrastar até lá. Você fica tipo, não está funcionando, Dan, vou clicar em segurar e arrastar até lá. E então aqui embaixo, clique uma vez para ver um canto. Este se mexe para os dois lados. Há um ápice lá e um pequeno ápice ali. Vou exagerar o meu, clicar em segurar e arrastar, clicar em segurar e arrastar . Em seguida, clique uma vez para ver um canto. Isso só tem uma curva, clique em segurar e arraste até lá. De volta ao início, é uma esquina. Vou clicar uma vez. Como podemos consertar essa bagunça? Você pode passar o mouse sobre alguns pontos existentes. Se você pressionar a opção Kona MacKenna PC, poderá removê-los e ela Se você tem muitas dessas alças, o que eu quero fazer é passar para essa ferramenta e vou fazer algumas coisas. Eu vou dizer que você fez essa coisa arruinando minha pequena linha Vou arrastá-lo de volta para sua casa. E você pode se livrar dele arrastando ou completamente para dentro de sua casa porque esse cara está fazendo todo o trabalho Havia muitas alças pequenas tentando deformar a linha Na verdade, está parecendo bom agora. Você pode mover os pontos de ancoragem se eles estiverem no local errado Se você quiser, eu quero estar lá, arraste isso para cima. Como faço para resolver isso? É um pouco dos dois. Aquele cara lá, talvez esse. Você percebe que, quando se aproxima, é uma curva mais aguda e, quanto mais afastada, mais fluida é a curva. Então, há um pouco como você e você vão e voltam. Com esse, o que eu quero fazer? Isso parece bom. Esse aqui parece estranho Por que parece estranho? Não tenha medo de ampliar. Eu vou dizer que você provavelmente só precisa ser um pouco mais assim. Além disso, lembre-se de que não tenha medo de mover os pontos de ancoragem Estou exagerando na minha porque gosto mais dela. Esse aqui precisa ser torcido dessa maneira. Você notará esses caras no final aqui. Se forem úteis para você, use-os. Eles são adicionados automaticamente para você. Use-os se não estiverem e você ficar tipo, espere, são muitos. Lembre-se de arrastá-los de volta para casa. Eu quero esse? Eu gosto desse. Eu não usei o de cima, usei o de baixo, e esse é o meu que não é muito liso, não é? Se não for muito suave, eles precisam ser mais longos. Como eu gosto desse? Ainda tenho minhas propriedades de copiar e colar, então posso usar meu atalho agora posso clicar em segundo plano para que não seja um modo de edição Acabei de selecioná-lo e devo ter as propriedades de colagem, que são a Opção de Comando V em um Mac e controlando Alt V em um PC. Você pode simplesmente continuar copiando e colando. Eu gosto disso? É uma folha? É uma chama? Eu realmente quero o ponto na parte inferior, então vou entrar , clicar duas vezes pegar o que descobrimos anteriormente e que ele precisa ter um ângulo menos agudo para funcionar. Aí está lá. Adicione seus próprios efeitos sonoros. Tudo bem Parecia melhor na minha cabeça. Clique duas vezes. Essa coisa está aqui? Algo não está certo aqui. Ah, sim, isso é mais fluido. Tudo bem Essa é a vez da ferramenta de caneta. É complicado. Deveria ser uma seção inteira de um curso, mas o FIG é, na verdade, mais sobre criação de aplicativos. Mas eu quero incluir o Pentl e a ferramenta de lápis porque o Figma está sendo mais usado como uma ferramenta geral de design E quando você precisa criar ícones, mesmo se estiver fazendo design de logotipo, não há problema em fazer isso aqui. Tem algumas ferramentas de desenho muito poderosas, mas as lentilhas são complicadas Espero que tenha sido útil. Tudo bem É isso mesmo. Nos vemos no próximo vídeo. Eu posso sentir isso pelas pessoas novas em Pen até você dizer: Eu nunca vou voltar a este vídeo. Eu só vou importar ícones, Dan. Sim, tudo bem também. Tudo bem Próximo vídeo. 52. Projeto do curso 09 - Ferramenta caneta: Não vai nos obrigar a fazer um projeto de classe usando o Pentl, não é? Ele é. Aqui estou eu. Quero que você pratique usando o exercício de pentle que mostrei no último vídeo É chamado pentlo one. Está no seu arquivo de exercícios, desenhe-os como fizemos. Pratique com eles. Então, sozinho, quero que tente desenhar isso. Um coração não precisa se parecer com o meu. Use suas próprias cores. O que eu quero que você faça é experimentar as opções de junção do traçado. Talvez seja uma mitra chanfrada e redonda. Vamos dar uma olhada. Estou brincando com eles aqui. Se você tem bordas arredondadas ou bordas chanfradas, experimente. Além disso, quero que você experimente o que fizemos com a ferramenta lápis e a ferramenta pincel, onde abordamos essas configurações aqui e podemos, na verdade, sem usar a ferramenta lápis, a ferramenta pincel, apenas aplicar coisas como dinâmica ou pincel, ter um playground com aquelas como a que eu tinha. Aí está lá. Agora isso vai ser difícil. Eu até escrevi aqui. Isso é difícil, especialmente se você é novo na ferramenta de caneta, experimente. Se for horrível, tudo bem. Você ainda pode ser um designer de UX sem conhecer a ferramenta de caneta. É uma ferramenta difícil de aprender. Por que está aqui como um exercício. Vamos brincar com isso. Quando terminar, faça uma captura de tela de tudo junto e faça o upload para os projetos e tarefas Você não precisa fazer o upload para as redes sociais, principalmente porque todos terão a mesma aparência. Começaremos a colocar mais coisas exclusivas que criamos nas redes sociais. Mas, por enquanto, apenas nos projetos de aula ou na seção de tarefas, boa sorte com a ferramenta Caneta Agora, você pode fazer mais do que eu fiz aqui. Quanto mais empolgante for a ferramenta Caneta, veremos nos projetos de aula, melhor. Se você está apenas começando, basta algo simples. Tudo bem, divirta-se com a ferramenta Pin. Te vejo no próximo vídeo. 53. Como usar o Shapebuilder no Figma: Oi, todo mundo. Vamos usar a ferramenta Shape Builder. Dentro do Figma, para fazer isso, começaremos com algo fácil de guardar Isso, eu não sei o que é isso, mas parece legal, e isso é um escudo com um carrapato nele. Chamaremos isso de escudo do sucesso. Vamos aprender a ferramenta Shape Builder. Além disso, vamos combinar algumas das outras técnicas que aprendemos anteriormente no curso para que possamos fazer muitas coisas. É um pouco complicado, mas não quero pular coisas assim dentro do Figma porque o Figma está sendo usado cada vez mais como uma ferramenta de design gráfico de uso geral Vamos aprender a ferramenta Shape Builder, que é incrível. Tudo bem, vamos começar. Vamos encontrar um pedaço limpo do nosso papelão. Vamos desenhar uma casa. Vou pegar a ferramenta retangular. Vou desenhar um retângulo. Vou pegar a ferramenta de polígono. Vou desenhar um polígono ou um triângulo . Não abordamos essa ferramenta. Você pode ver aqui, eu posso mudar isso para ter quantos tamanhos eu precisar. Eu só preciso de três, mas aí está. Você precisa de um Pentágono ou um hexágono, eu vou alinhá-lo É muito bom em alinhar as coisas. Aí está. Você pode selecionar os dois e dizer que vocês dois estão perfeitamente alinhados. Tudo bem, Sra. dando uma olhada um pouco. Vamos desenhar a porta, voltar para a ferramenta retangular e desenhar uma porta lá Vou arrastá-lo depois só para alinhá-lo no centro. Isso parece uma casa? Parece uma casa o suficiente. O que teremos que fazer é que o truque mágico aqui é garantir que tudo esteja liso Você pode ver que são todas camadas separadas, em cima da outra. O que precisamos fazer é dizer que você, meu amigo, está todo achatado. Isso significa que eles estão todos comprimidos no mesmo vetor. É como um grupo, mas não um grupo. Significa que eles estão todos juntos como um vetor. Desça. Acabei de selecioná-la e quero entrar nessa opção aqui depois que ela estiver plana. É chamado de Editar objeto. Já fizemos isso antes ou basta clicar duas vezes nele. E você tem todas as linhas listradas. Agora vamos mudar para a ferramenta Shape Builder, que é a chave. Clique nele e você pode juntar as coisas. Nesse caso, queremos remover coisas. Mantenha pressionado o contador de opções Mac. Co PC, você pode ver, há um pequeno sinal negativo ao lado do meu cursor e as coisas estão vermelhas O que posso fazer é clicar e segurar e arrastar sobre esses dois para me livrar deles. Agora, eu poderia deixar isso meio bagunçado. Todas têm cores diferentes, então eu posso clicar e arrastar, sem segurar nada, e vamos adicioná-las. Agora tenho uma casa. Nós fizemos isso. Clique duas vezes no plano de fundo para sair e teremos um lindo ícone em vez do VToRhuse Você pode ir e ajustá-lo depois. Se você desenhou o seu e ele é um pouco pontudo ou alto demais, você pode clicar duas vezes para entrar Eu posso selecionar todos esses pontos de ancoragem na parte inferior, apenas usando a ferramenta padrão e vou segurar a tecla Shift e usar minha tecla de seta para movê-la para cima para tentar obter algo que pareça mais proporcional que possa ser exatamente esse O seu é muito alto ou não é alto o suficiente. Esse é o básico do construtor de formas. Vamos fazer algo legal como você viu no início, e vamos pegar a ferramenta circular e eu vou puxar uma alavanca para ferramenta circular e eu vou puxar que fique bem redonda. Vou trocar o meu para que não tenha preenchimento e tenha um traço branco para que possamos vê-lo. E esse será meu círculo externo, copie e cole, eu tenho outro e vou reduzi-lo Membro, se você copiar e colar, eles acabam se sobrepondo. Faça um círculo menor, não muito pequeno, algo assim. Então é só uma questão de alinhá-los, quero que um vá lá, copie e cole , quero que outro vá até aqui , copie e cole, quero que outro vá até o final. Tudo bem, espero que isso me dê meu pequeno espirógrafo Alguém se lembra disso, levante a mão. Assim como a casa, eu seleciono todos eles. Eu tenho um monte de elipses que não estão conectadas Preciso achatá-los, para que fiquem todos juntos no mesmo vetor, então eu posso clicar duas vezes neles ou clicar no vetor Editar Então podemos pegar esta aqui, M, a ferramenta Shape Builder e dizer, bem, antes disso, você poderia usar a ferramenta de preenchimento e entrar aqui e dizer, certo, eu quero que você seja preenchido com qual cor? Fique vermelho. Ok, e dê uma olhada e preencha isso. Eles não são unidos, mas são todos da mesma cor, e talvez seja isso que você precise fazer. Essa é uma boa maneira de usar isso para nivelar e depois editar o objeto Vou desfazer isso porque o que eu quero fazer é me juntar a todos eles Então, para o Shape Builder, eu vou colorir e você vai descobrir, tentar descobrir quais malditos eu preciso cobrir Eu não estou fazendo nada. Estou apenas arrastando entre eles usando a ferramenta padrão. Ou é esse? Acho que é esse. E então este aqui é o que eu estou procurando. Eu não consigo me lembrar. Isso é quase certo? Não, muitos. Desfazer desfazer. Talvez seja esse aqui. Você, é isso. Então, para me livrar deles, que tecla eu mantenho pressionada? Isso mesmo, a tecla de opção, e vou arrastar todas elas ou a tecla Ok em um PC. Eu acabei com aquela faixa. Aqui vamos nós. Vou voltar para minha ferramenta de balde de tinta e vou escolher uma cor de preenchimento. Vou me livrar dos traços e adicionar um preenchimento, e vou escolher entre os criados neste arquivo Vai me dar minhas cores aqui. Isso funciona. O comportamento desse balde de enchimento é um pouco estranho no momento É um novo recurso do figma. Imagino que vai ficar mais fácil no momento, o que estou fazendo é clicar em um e depois alterá-lo. Está mudando tudo. Ok, então eu meio que clico nele, desligo novamente ou apenas clico duas vezes. Então, se eu escolher uma cor daqui de baixo, ela se aplica. Então vá para Editar. Não clique nele muito rápido. Ok, está um pouco molhado. E de novo. E espero que esteja funcionando um pouco mais perfeitamente para você, de forma um pouco peculiar. Mas chegamos lá. Legal. E isso é. Eu quero adicionar gradientes, na verdade Nós fazemos isso? Ou faremos isso bem rápido. Em seguida, passamos para o próximo. Aqui, eu quero adicionar um gradiente. É o segundo em ou quando eu já gosto. Olha isso. Tudo bem, eu vou fazer todos os quatro. Você espera lá. Vou entrar no modo super rápido. Tudo bem Eu gosto mais? Eu acho que sim. É meio legal. Tudo bem, vamos fazer o escudo Está bem? Então, o escudo vai entrar. Vamos ficar extremamente avançados aqui. Somos extremamente avançados. Vai ser, eu não sei. Vamos apostar muito nessa. Novamente, lembre-se de que não é uma ferramenta de desenho. É uma ferramenta de design gráfico Figma. Estamos usando isso para UX aqui, então não estamos nos aprofundando muito nas ferramentas de design ou nas ferramentas de desenho, mas elas são muito úteis. Então, vamos começar com o retângulo. Vou desenhar um retângulo do tamanho de um escudo. Está lançando algumas coisas novas. Então, eu quero entrar em Editar Objeto, porque o que eu quero fazer é pegar minha lentilha e quero um novo ponto aqui embaixo Ok, não havia um antes. Agora existe. Agora posso voltar para minha ferramenta de movimentação e arrastá-la para baixo até a parte pontiaguda Vou segurar a tecla shift enquanto a arrasto para baixo, para que ela desça em linha reta Agora eu quero que seja curvado em torno dessas bordas aqui. Preciso converter alguns desses pontos. O que eu também vou fazer é focar apenas em um lado e depois virá-lo no final Vou pegar isso para fazer uma curva, clicar de uma vez e você fica tipo, o que vou fazer agora é voltar para essa primeira ferramenta aqui, a ferramenta de movimentação. E o que eu vou fazer é quebrar esse lado aqui. Quem se lembra de como quebrá-lo? Mantenha pressionada a tecla de opção em um mickey em um PC e você poderá dizer que o interrompeu Eu quero fazer com esse? Eu realmente não o quero, então vou arrastá-lo de volta para sua casa e ele vai embora. O bom disso, porém, é que, se eu ainda clicar nele , ainda tenho esse lado e é isso que vou fazer. Porque eu quero esse lado curvo nisso, mas pontudo nisso Vou pegar esse cara, talvez movê-lo um pouco mais para baixo. Só estou usando meu ancinho. Não estou muito preocupado com esse lado porque vou invertê-lo em um segundo Mas você poderia. A próxima coisa que vou fazer é pegar a pequena parte superior do meu escudo. Vou pegar a ferramenta para que a ferramenta circular se arraste e aperte a ferramenta novamente. Isso não funciona. Eu vou para o Ellipstol aqui. Ele saiu desse modo de edição de objetos. Ok. Então, vou ter que resolver isso em um segundo Desenhe algum tipo de círculo. Na verdade, vou mudar a cor só para poder vê-la. E estou tentando entender algum tipo de argumento. Preciso cruzar um pouco a linha intermediária . Isso parece bom. Você pode ajustar isso para que saiba que o que está procurando, lembre-se de que é exatamente o que ficou trás, porque usaremos a ferramenta She Builder. Como posso saber se já passou na metade do caminho? Estou apenas desenhando uma seleção. Sim. E o que vou fazer é: como faço para obter o Shape Builder? Não está aqui embaixo. Você tem essas outras coisas como união e fachada negativa Vamos ignorar esses. Vamos usar o Shape Builder, que é simplesmente mais fácil do que tudo isso. Vamos ter que usar o flatten. Em seguida, podemos entrar no modo Object Edding pressionar a tecla M do nosso Shape Builder, que é apenas esse terceiro ícone Posso manter pressionada a tecla Alt em uma opção de PC em um Mac e simplesmente clicar sobre elas. Eu tenho meio escudo. Agora, o que eu quero fazer é a mesma coisa novamente, vou usar um retângulo, que é a arquia, para atravessar isso Tudo o que eu quero fazer é fazer com que ele vá até aquele ponto. Vou usar isso como um cortador de biscoitos. Novamente, selecione os dois. Vamos achatá-los. Oh, eu fiz um achatamento automático Achatee-os. Oh, eu não sabia que fazia isso. Funciona. Faz isso? Ele está usando automaticamente um desses, que eu acho que está usando exclude. Há alguma estranheza na Figma. Vou deixar isso no curso porque nunca foi feito isso antes, mas agora aconteceu. Não pedi. Então, se pudermos fazer isso de qualquer maneira. Abriu um buraco neste L que eu posso ver através dele. O que vou fazer agora é entrar nela, pegar minha ferramenta Shape Builder e espero poder manter pressionada minha tecla de opção ou tecla em um mac Seja capaz de cortar metade dela. Ainda está funcionando. Agora tenho metade disso. O que eu vou fazer é duplicá-lo. Eu vou até aqui. Há uma curva horizontal e vou tentar alinhá-las e elas se unem Eles deveriam fazer isso automaticamente. Às vezes, tenho problemas que deixam uma pequena lacuna entre eles, então eu diminuo o zoom. Às vezes, há uma lacuna de um pixel lá dentro. Você pode simplesmente clicar nele e usar a tecla de seta para movê-lo por um. Agora eu poderia deixar assim, mas vou selecionar os dois. Vou achatar porque lembre-se existem duas formas separadas no meu painel de layouts Eu vou esmagá-los juntos e você verá que está lá Este será meu ícone de carrapato. Isso bastará. Para ver. Vou entrar no modo de edição de objetos. Vou pegar meu Shape Builder e juntá-los. Eu apenas clico e arrasto pelos dois. Vamos adicionar o carrapato. Vou raspar minha caneta, qual pegamos o jeito Vou clicar uma vez em um canto mais uma vez pela terceira vez. Vou pegar meu traço ok para obter um traço de tamanho apropriado, ter seus próprios efeitos sonoros e vou fazer esse chamado Outline Stroke Usamos isso anteriormente para separar o tipo. Podemos fazer a mesma coisa por. Eu vou escolher isso. Vou escrever, clique nele. Na verdade, não pode ser um modo de edição de objetos para que isso funcione. Vou fechar o modo de edição de objetos. Agora eu posso escrever, clique. A mesma opção aqui onde diz traçado de contorno. É mais para isso que ele deve ser usado. Nós o usamos anteriormente para descrever o tipo. Este aqui, traçado de contorno, o que significa que, no momento, é um traço Se eu for para o Comando Y, Controle Y em um PC. Você pode ver que é uma linha com um efeito na parte superior para torná-la grossa. O que queremos fazer é transformá-lo em um retângulo grande e grosso que possamos fazer um furo no fundo Controle ou Comando Y, vou dizer agora um esboço Veja o que acontece. Você pode ver se eu entro no modo de contorno novamente agora, em vez de uma linha com espessura, na verdade é uma forma, essa forma grande e grossa Vou clicar nele, movê-lo um pouco para cima , um pouco. Toque para tocar, Comando ou Controle, por quê? E o que eu quero fazer é abrir um buraco nele. Porque no momento está preto. Vamos torná-la uma cor, torná-la mais óbvia. Eu quero realmente ser um buraco nisso. Você pode deixá-lo como uma cor. Está totalmente bem. Eu quero abrir um buraco no meu. Então, vou cortar os dois , alisá-los juntos, K para o Shape Builder, e vou cortar o buraco no meio Isso também aconteceu comigo antes. Você acha que há alguma peculiaridade na ferramenta Shape Builder em todas as ferramentas de desenho do Figma no momento Por alguma razão, está deixando-a lá, k. Deveria abrir um buraco nela. Realmente quer. Mas uma pequena solução alternativa no momento. Eu ***** isso funcionará no futuro. São apenas alguns problemas iniciais com a ferramenta. Se você pegar seu balde de tinta, se você passar o mouse sobre algo que já tem tinta, você pode ver que isso é um sinal negativo É apenas menos no mesmo que não desfazer, você pode selecionar. Você pode selecionar essa parte? Não, basta usar o balde de enchimento se o seu não estiver funcionando com a ferramenta Shape Builder porque agora há um orifício nele. Como posso aprová-lo? Só para superar alguma coisa. Olá, eu posso ver através de você. Essa é a ferramenta Shape Builder. Colocamos alguns extras aqui, como o espelhamento. Também analisamos o uso de nossa ferramenta de caneta, que examinamos anteriormente. Há algumas pequenas peculiaridades minha versão do Figma. O seu pode ser diferente. Eu entrei no modo de objeção. Acho que isso precisa ser menor. Oh, bom. Tudo bem Essa é a ferramenta Shape Builder na figma. É super incrível. Desenhe coisas, sobreponha-as e junte ou subtraia bits. Dino adiciona alguns gradientes doces. Tudo bem É isso mesmo. Te vejo no próximo vídeo. 54. Botões com ondulação com cursos arredondados para iOS no Figma: Lá. Ei, vamos aprender o que é um esquilo dentro do design de UX e do Figma Squirkl não é exatamente um quadrado, não é exatamente um círculo. Veja o que eles fizeram lá. Está bem? Também é chamado de suavização de cantos , mas esquilos é um nome muito melhor Deixe-me mostrar como fazer isso dentro do Figma. Tudo bem, vamos fazer isso no desktop da nossa página inicial. Olá, cinco. Então mude um S para tudo o que está no nome aqui e clique em Shift dois. Vamos ampliar imediatamente. Então, precisamos de dois botões aqui. Eu vou entrar ainda mais. Estou usando minha roda craniana Ou você pode usar o Shift plus. Vamos criar dois retângulos ou molduras, vamos usar molduras Nós vamos dizer, eu quero um botão. Vai ser mais ou menos desse tipo de tamanho. Teremos que testar isso em 100% porque é grande? Sim, isso parece certo. Ok, então vamos ampliar um pouco mais. Vamos dar a isso uma cor de preenchimento de uma das nossas, essa é interessante. Sente-se aqui embaixo. Nesta página, Gate me mostra os que estão sendo usados e receberam crédito neste arquivo. Aqui estão todos os meus estilos. Você percebe que, por algum motivo, os gradientes não querem ver gradientes ou apenas ver os nomes, você pode acessar este que diz Aqui está minha biblioteca de cores. Essa pode ser uma maneira mais fácil de escolher cores. Vou escolher minha cor secundária. Não tenho certeza se gosto da cor secundária. De qualquer forma, vamos fazer dois deles. Teremos um botão Até agora e um botão Saiba mais, e selecionaremos os dois. Shift, clique em ambos. Vamos adicionar alguns a eles. Vou digitar o meu em vez de arrastá-lo, vou digitar dez pixels Ok, vamos ver a diferença entre nossos cantos arredondados regulares e esquilos. Eu selecionei este. Temos que acessar essa opção aqui, cantos individuais, e depois descer até as configurações. Na verdade, não queremos cantos individuais. Queremos essa coisa chamada suavização de cantos. Esse é o nome técnico. Mas Squirkle é muito melhor, certo? Círculo quadrado. Então, vamos dar uma olhada. Então essa é a grande mudança. Você fica tipo, parece o mesmo. Vou fazer com que o editor amplie isso antes, depois, antes, depois. Você pode ao menos ver isso? Tudo bem, vamos torná-lo maior para o editor de portas Está bem? Antes, depois, antes ou depois, é apenas um tipo diferente de canto arredondado. Então é assim que eu sempre faço. Não sei, tem sensação interessante que eu realmente amo, e é por isso que tem seu próprio vídeo. Está bem? Então, sim. Depende de você, você não precisa de esquilos. Você pode usar cantos arredondados regulares. Eu vou fazer os dois esquilos. Clique com o comando dentro dele ou clique com o botão de controle apenas para entrar nesse botão. Caso contrário, você selecionou o quadro inteiro, eu vou ter dois desses. Vou fazer com que este não tenha preenchimento, mas um traço, um traço bem grande e grosso da minha cor secundária, de que tamanho? Algo parecido. Vou adicionar meu texto a ele também. É isso mesmo. Isso são esquilos Uma última coisa. Você pode abandonar completamente os esquilos e fazer uma rodada Veja isso. Se eu a agarrar e continuar indo além de onde ela precisa estar, porque você pode ver que ela está tentando ter 146 cantos arredondados, ela não consegue Eu simplesmente me transforma em forma de pílula. Isso é algo que você também pode gostar. Analisamos isso mais cedo. Se eu descer até, descer para zero e recapitular. Se eu ampliar o zoom o suficiente, posso ver os pequenos pontos nos cantos C precisa começar. O que você pode fazer é dizer que eles não estão aparecendo. Me pergunto por quê. Normalmente, há um pequeno ponto que você pode arrastar nos cantos, sem ampliar o suficiente Hmm. Não está aparecendo. De qualquer forma, você pode ter cantos arredondados diferentes, você pode definir um como zero. Aí está. Esquilos dentro de uma figma. Te vejo no próximo vídeo. 55. Projeto do curso 10 - Ícones: Ah, é mais hora do dever de casa. Não, não se preocupe. É um momento de projeto de aula super divertido. Muito diferente. Fique por aqui para ver essa. Mesmo que você não esteja fazendo os projetos de classe, você deveria estar. Mas se você não estiver, há algumas coisas legais e interessantes que acontecem aqui. Então, eu quero que você desenhe algumas coisas, botões e ícones. Então, os botões são fáceis. Ok, você pode decidir se quer se esguichar ou não. São esses caras aqui. Agora, saiba mais, coloque-o em sua página inicial E então eu quero que você desenhe alguns ícones. Então, usando as ferramentas que aprendemos até agora, ferramenta de caneta, ferramenta Shape Builder, qualquer ferramenta que você goste, eu quero que você desenhe alguns ícones. Quantos você pode desenhar? Você precisa desenhar três. Ok, você pode escolher qualquer um desses três. Eu os coloquei em uma ordem do menos difícil de desenhar para o mais difícil. Então você pode começar com os três primeiros. Você pode fazer todas elas para continuar praticando. Uma pequena dica ao projetar qualquer coisa é colocá-la dentro de molduras de 28 por 28. Ok, desculpe, 28. Não consigo ler 48 por 48, só para começar. Está bem? Então, se eu pegar minha ferramenta de moldura, desenhe isso e direi que você tem dimensões de 48 pixels por 48 pixels. A razão pela qual fazemos isso é que quando você acaba combinando-os, ok, você precisa tê-los meio proporcionais Muitas vezes, você pode criar algo ou talvez montar ícones de outras pessoas. Não é o que eu quero desse vídeo. Eu quero que você desenhe os seus, mas muitas vezes você estará apenas juntando ícones de outras pessoas e precisará manipulá-los É por isso que você precisa das habilidades de desenho. Está bem? Pode ser que este aqui tenha vindo da biblioteca de ícones de outra pessoa e seja muito grande, em comparação com seus amigos A maneira de saber se é muito grande é colocá-los dentro desses quadros de 48 por 48 pixels e depois empilhá-los um ao lado do outro Também oferece uma maneira de espaçá-los, ok? E calcule quanto desse pequeno espaço aqui eles ocupam. Eles não precisam ter essa grande lacuna aqui. Eles poderiam ser maiores dentro dela. Estou segurando meu turno e a opção Comac ou shift e um PC para arrastá-lo para cima Se esse é desse tamanho, você fica tipo, talvez esse precise ser maior. Eu vou para o outro lado e torná-los menores. Começar com um quadrado de 48 por 48 pixels é muito comum. Estou desfazendo até ficar menor. Vá. Todos parecem ser um bom grupo. A outra razão pela qual gostamos de 48 pixels é que vamos fazer isso. Você acaba dizendo: Tudo bem, você. Eu tenho um fundo branco no momento em que os desenho, mas muitas vezes você desliga o preenchimento , simplesmente os usa assim diz: Tudo bem, este aqui vai passar por aqui e você pode ver o tipo de alinhamento e há um espaçamento consistente Então, o que eu fiz foi, você pode ver aqui? Há uma moldura chamada conta de ícone, e ela tem o vetor dentro dela. Alguns dos desenhos que estamos fazendo são apenas, digamos, esse coração aqui embaixo, onde ele está? Aí está, há apenas um vetor sentado no meu painel. Se eu precisasse colocar isso dentro de 48 por 48, desenhe a caixa e arraste-a para dentro dela ou posso dizer: quero enquadrar essa seleção e quero que a moldura ao redor seja Ts muito maior do que eu preciso, 48 por 48. Onde está minha pequena moldura. Agora vou dizer que você precisa ficar muito menor dentro dessa moldura. Uma dessas dicas úteis é comando do membro ou o controle Y para entrar no modo de contorno, especialmente se a moldura não tiver uma cor e, portanto, não houver preenchimento Agora, posso dizer que um ícone seria apropriado, provavelmente talvez eu precise redesenhar meu ícone um pouco para que ele ocupe bem o espaço Vou chamar isso agora de ícone Hart. A razão pela qual eu os chamo de ícones de coração é que, mais tarde, quando procuro ícones, o traço está um pouco grosso agora. Está aqui no meu painel de camadas. Você pode ver que há uma pesquisa no topo aqui? Eu posso digitar o ícone da palavra, com hífen, ele me dará tudo no meu documento que é um ícone Se você fizer o contrário ligue para o ícone de coração ou ícone de conta, não sei. Por algum motivo, isso parece melhor e mais fácil de encontrar. Tudo bem, venha no primeiro turno. Diminua o zoom. Eu vou fazer uma última coisa que quero mostrar a vocês antes de partirmos é que eu tenho esses ícones, perfeitos. Eu realmente quero isso na minha página inicial. Eu quero mudar as cores deles. O que você deve ter notado é que, em primeiro lugar, eles provavelmente são muito grandes e , na verdade, não estão ligados. Se você puder ver os nomes, lembre-se de que, na verdade, não estão na página certa. Vou encerrar minha busca. Certifique-se de encerrar a pesquisa depois. Caso contrário, você não conseguirá ver nada. Quero que tudo isso esteja na minha página inicial. Eu poderia simplesmente arrastá-los para baixo. Eles estão apenas quietos lá dentro. Em vez de tentar arrastá-los pelo painel Camadas. Então, vamos 100%. Eu diminuo um pouco o zoom. Eles meio que são do tamanho certo. Eu poderia diminuir para um tamanho um pouco menor para esses caras 32. Ah. Isso traz outro ponto positivo. Alguns deles escalam, outros não. Ah, há todo tipo de bondade neste vídeo Então, antes de fazermos isso, o que eu ia mostrar é que se eu mudar o preenchimento de tudo isso, veja o que acontece. Isso altera o preenchimento da moldura. Então, eu vou desfazer isso O que você pode fazer é ver aqui embaixo? Eu tenho meu preenchimento, mas diz cores de seleção. Se eu selecionar tudo isso, eu deveria usar preto e branco, e uma das minhas cores para o fundo aqui, minha cor primária. Então, vou pegar todos os meus ícones, você e você. Na verdade, isso não importa. Eu posso pegar tudo isso e você pode dizer, certo, tudo o que eu selecionei , cores de seleção. Qualquer coisa que seja preta, eu quero que seja, digamos, branca, ou você pode ir às suas bibliotecas e dizer, eu quero que seja minha cor secundária. É aí que as cores de seleção podem ser úteis. Você selecionou lotes, eu direi: Ei, aqui estão todas as cores que você selecionou. Mude-os se quiser. Caso contrário, você pode simplesmente mergulhar em cada ícone, selecioná-los e alterá-los aqui também. Tudo bem, em termos de tamanho. Analisamos isso mais cedo. Acho que sim. Vamos pegar todos os meus ícones. Você, eu estou segurando Shift, agarrando você, você. Qual é o meu último lá. Ok, eu tenho meus três ícones, e você notará que quando eu os alterei para 32, apenas alguns deles se ajustaram da maneira que eu queria. T one e este precisam de um pouco de trabalho. Vou pegar a casa que desenhei e vamos ver a diferença. Dê uma olhada aqui entre você e você. Nada é diferente. Se você entrar nela, eu clico nela. Esse cara aqui está configurado para escalar, e esse cara aqui dentro está configurado para estar no centro e no topo. Eu quero que ele escale, você escala e você. mesmo com este, e você, eu quero ser uma grande escala. Parte superior e parte inferior da escala. Vamos verificar se esse cara está pronto para escalar. Dentro de sua moldura, a moldura de seu pequeno pai, todos eles vão escalar agora, em vez de ficarem presos à esquerda e do canto superior direito ao topo e à esquerda. Em vez de ficarem presos na parte superior e na esquerda ou qualquer outra coisa em que estivessem presos . Vamos tentar. Vamos pegar todos vocês. Pegue essa, mude, mude, mude. Pode ser difícil entrar em algumas dessas molduras porque você está dentro dessa moldura principal Clique duas vezes de uma vez para pegar esse cara. Turno antigo. Ou você pode pegá-lo no painel Camadas, se for mais fácil. Espero que agora fale um bom jogo, Dan. Eles fizeram isso. Agradável. Ok, então 32, lembre-se de usar múltiplos de oito, o que é útil, 48, 32, equivale a 100% Parecem botões de tamanho adequado. Eu sei que é mais para um telefone celular, este aqui, mas está tudo bem no momento, o que vou fazer é clicar com a tecla Shift em todas elas, e vou usar minhas colunas, talvez Shift G, e vou realmente colocar as minhas lá. Troquei as chaves, aí está. Tudo bem. Esse é um longo vídeo de projeto de aula, mas nos deparamos com algumas partes interessantes que você provavelmente encontrará ou já conheceu O objetivo principal aqui é desenhar três ícones e criar alguns botões e garantir que você os envie para a parte de projetos de classe do site e também nos marque nas redes sociais. Eu adoraria ver qual marca. Tudo bem, é isso. Te vejo no próximo vídeo. Tudo bem, estou de volta. Outra coisa que coloquei na minha cabeça quando terminei de gravar foi você poderia, em vez de passar pelo incômodo de fazer isso. Então, eles não estão escalando. Bem, este não escala. Eu digo, você teria 48 anos, eles não estão fazendo exatamente o que eu quero. Você pode. Em vez de dizer: A, eu preciso que você seja essa coisa interna aqui para ser escala e escala, você pode simplesmente usar a ferramenta de escala. Eu deveria ter começado com esse. É mais fácil, Dan. Você pode simplesmente usar a escala, a ferramenta de escala, que é K, e você pode fazer isso dessa maneira. Talvez você tenha que sair. Está escondido aqui embaixo quando você está no modo de desenho. Vá para a escala. Isso só vai fazer isso da maneira mais rápida e fácil não da maneira que eu mostrei a você. Mas acho que vou deixar o contrário porque muitas vezes você precisa configurá-lo em escala para que não cause problemas eternos quando você está tentando redimensionar coisas Tudo bem. Use a ferramenta de escala. É muito mais fácil Mas de qualquer forma, esse é agora o fim oficial, o fim adequado. Tchau. 56. Seleção inteligente e arrumação no Figma: Olá. Quer ver algo muito legal? É chamado de seleção inteligente e organização dentro de um Figma. Pronto? Olha, eu posso simplesmente arrastá-los, brincar com o espaçamento de todos eles ao mesmo tempo É chamado de seleção inteligente. Também vamos usar algo chamado tidy up inside of Figma. Vamos embora. Jogue junto, desenhe um retângulo e eu vou fazer um, dois, três, quatro deles e colorir todos de forma diferente. Tudo bem, Magic. Agora, vou movê-los para que tenham espaçamentos diferentes E vamos dar uma olhada no primeiro, chamado tidy up. Vou apenas selecionar todos eles. E o que você notará é que você já deve ter notado isso antes. Se eu tiver várias coisas selecionadas, veja aqui, eu tenho essa pequena linha listrada Esse é o botão de arrumar, ele apenas arruma tudo. Você pode ir pelo caminho mais longo e, aqui, há a opção de dizer arrumado É ainda mais legal quando você tem alguns diferentes. Vamos aqui. Estou apenas duplicando alguns diferentes. Aqui vamos selecionar todos eles, passe o mouse acima. Olha, isso os arrumou. Você não verá a arrumação se elas já estiverem bem espaçadas. Vamos colocá-los aqui. Já está bem espaçado para que não apareça se já estiver arrumado Agora que eles estão arrumados, espaçados uniformemente, você verá, o que são essas outras coisas Há uma linha rosa e um círculo rosa. Eles são usados para o espaçamento entre eles. Essas pequenas linhas no meio, clique em segurar e arraste uma delas. Olha isso. Eu adoro isso. Isso é chamado de seleção inteligente. Eu posso fazer coisas inteligentes com seleções. A outra coisa muito legal sobre isso são os pontos. Posso clicar em segurar e arrastar um dos pontos. Veja o que acontece. Eles podem trocar de lugar. Você pode dizer: Sim, é muito bom para se trocar. Vamos fazer ícones em um segundo. Agora, eles não aparecerão. Se você tiver selecionado apenas uma coisa, precisará ter pelo menos duas. Depois, você pode trocar até mesmo dois deles. Você também pode fazer algo muito legal onde quer que vá Tudo bem, eu quero esse. Você pode dizer que é um destaque? Cliquei nele. Você pode pressionar Command D ou Control D em um PC, como fizemos. Olha, eu fiz outro deles. Vamos fazer isso com esse exemplo aqui embaixo. O legal desses caras, um, dois, três, quatro, é porque eles estão nesses 48 por 48 pixels, na verdade fizemos os nossos 32, então eles não estavam uniformemente espaçados Eu posso dizer, alguns segurando um turno para pegar todos eles. Aí está minha arrumação. Ótimo, e o mágico é esse. Você pode arrastar os pontos e dizer, na verdade eu preciso que esse seja assim, esse aqui vai ser, na verdade esse aqui vai Eu preciso de outro. Preciso de vocês dois. Na verdade, eu não preciso disso para isso. Você entendeu a ideia, muito útil. Também é muito bom para texto. Aqui estão algumas caixas de texto que eu digitei super rápido e elas precisam estar em caixas de texto separadas Eles não podem ser apenas retornos entre eles. O que você pode fazer é se eles estiverem espaçados de forma diferente, posso dizer, arrume-os para mim, se eu quiser ajustar o espaçamento entre eles, Olha isso. Prático. A mesma coisa. Você pode movê-los de um lado para o outro. Talvez seja necessário ampliar um pouco mais. Eu estava muito longe, esse é um bom ponto. Se eu estiver muito longe e não conseguir fazer o ponto por algum motivo, você precisa ampliar e os pontos ficarão maiores e eu posso dizer, na verdade, que quero que você esteja lá, quero que você esteja lá, e preciso de uma duplicata desse e de um membro que comando ou Controle D. Vamos jogar com o espaçamento fazer o ponto por algum motivo, você precisa ampliar e os pontos ficarão maiores e eu posso dizer, na verdade, que quero que você esteja lá, e preciso de uma duplicata desse e de um membro que seja comando ou Controle D. Vamos jogar com o espaçamento, muito útil para listas. Pode ser que você queira alinhá-los dessa maneira. Selecione todos eles, vamos arrumá-los. Está no espaçamento. Eu também quero a altura, então vou dizer, vamos alinhar esses caras com o centro Eu posso ver os pontos e posso dizer, eu preciso de você lá e eu preciso do espaçamento entre eles, que eu não consigo Por que não consigo ver o espaçamento entre eles? Aumente o zoom. Diminua o zoom. Se você não consegue ver as linhas entre eles, estou apenas tentando pensar em voz alta. Agora precisamos distribuí-los horizontalmente. Não, as linhas não aparecem. Aí está. Você tem que aumentar o zoom, Dan. Oh, eles estão lá, eles estão lá, eles estão lá. um certo nível, essas pequenas linhas Em um certo nível, essas pequenas linhas intermediárias também desaparecem. Esse é um bom ponto. Eu não percebi que isso aconteceu. Tudo bem Aí está . A outra coisa para a qual você pode usar isso é dizer nossas cartas. Certifique-se de que tudo esteja no cartão. Membro, eu tenho meu cartão de cartão dois e este aqui deve ser chamado de cartão três. Com todos eles selecionados, você notará que recebe os mesmos pontos. Isso é muito útil porque , obviamente, reorganizar tudo isso é muito fácil quando eles estão na seleção inteligente Novamente, você pode se mover pelos centros. Você só precisa se certificar de que eles estão arrumados ou dispostos horizontalmente, verticalmente, dependendo da maneira como você os está empilhando Oh, eu adoro isso. Tudo bem, isso é uma seleção inteligente e arrumada dentro de um Figma Eu adoro isso. Deixe-me saber os comentários. Esse é o seu recurso favorito? Qual é o seu recurso favorito até agora? Gosto de conferir os comentários para ver o que é, você fica tipo, Ah, isso é exclusivo da Figma e incrível Para mim, eu gosto seleção inteligente, mas me diga o que você acha. Tudo bem. Isso vai ser tudo. Ah, uma última coisa é que, se você está desenhando ícones e não os colocou em uma moldura como essa, digamos que eu desenhe esse ícone. Ferramenta circular, que é a ferramenta ok e para retângulo. Então você projeta isso. Não tenho certeza do que é. É um homem muito atrevido para a página da conta Eu faço isso e tenho essa outra coisa aqui e você fica tipo, eu tenho essas duas coisas. O que vai acabar acontecendo é que vai arrumar tudo, ótimo, e você fica tipo, ok, eu quero trocar isso Você fica tipo, o que está acontecendo? É porque esses caras não estão agrupados. Preciso ter certeza de que essa coisa aqui está em um quadro ou em um grupo. Não somos o que eu queria. Seleção de quadros. Agora é uma unidade. Agora eu posso ajustá-los como imaginei. É isso mesmo. Essa é uma seleção inteligente e arrumada dentro de uma figma. Tchau. 57. Dicas e truques para usar imagens no Figma: Neste vídeo, falaremos sobre imagens dentro do Figma Já fizemos um pouco, mas há muitas nuances nas imagens, maneiras diferentes de trazê-las, nas imagens, maneiras diferentes de trazê-las, e veremos algumas noções básicas de edição de imagens, brincaremos com saturação, contraste e temperatura Vamos começar e aprender tudo o que tem a ver com imagens. Portanto, há muitas maneiras de trazer imagens. Podemos ir até isso, ir para Arquivo e colocar imagens. Eu uso esse com bastante frequência. Atalho que você pode aprender dependendo do seu fluxo de trabalho. Nesse caso, Shift Command K, que será Shift Control K em um PC. Você pode usar essa forma para trazer uma imagem, ou você pode vir até aqui e, em vez de trazer um retângulo, você pode inserir uma imagem Ou você pode simplesmente arrastá-lo da sua área de trabalho, arrastá-lo para dentro e ele entra. O único problema em trazer arquivos do seu desktop é que, se forem arquivos muito grandes, eles virão muito grandes. Vou usar meu Command Shift K em seus arquivos de exercícios. Há algumas imagens. Eles são todos baseados em carteira. O legal disso é que você pode arrastar mais de um. Eu quero esse primeiro grupo aqui e vou abri-lo e você notará que seu cursor se atualiza. Veja, eu tenho seis imagens, e posso dizer que quero que elas tenham esse tamanho, esse tamanho, e você as obtenha em um tamanho mais apropriado. Isso pode ser útil. Aí está. Ao redimensionar uma imagem, se você pegar o canto e arrastá-lo para fora, notará que ele bloqueia a altura e a largura, mas se você pegar as laterais, não, esse é um novo recurso. Ele o redimensionou. Acabei de notar aqui que isso está ativado por padrão agora. Proporção do bloqueio. Se eu desligar, pego a lateral agora, olha o que acontece. O que ele está fazendo? Está mudando a moldura em que está e fazendo com que a imagem meio que a preencha. Então você também pode seguir esse caminho, e ele será redimensionado para tentar preencher melhor qualquer forma que você tenha decidido, porque é isso que eu quero Eu quero essa outra imagem aqui. Estou usando o atalho Mcmand shift K. Você pode usar o Control Shift K em um PC ou apenas usar as formas mais longas. Vou trazer isso , e o que eu quero fazer é arrastá-lo para um tamanho aleatório e vou colocá-lo aqui. O que eu quero fazer é entrar nessa moldura. O que eu quero fazer é selecionar todas essas coisas e movê-las para a direita sem a caixa roxa. Você pode clicar aqui e dizer, eu quero pegar tudo dentro daqui, que vamos selecioná-lo. Eu apenas cliquei no primeiro, segurei a tecla Shift e peguei-a Mas o que eu costumo fazer é que, se você ainda não está cheio de atalhos, lembre-se de manter pressionada a tecla de comando em uma tecla de controle ou PC para selecionar algo dentro dela Você também faz isso para uma seleção. Vou manter a mesma tecla pressionada, Command or Control, Mac ou PC e simplesmente arrastar uma caixa ao redor de tudo isso e ela pega tudo dentro Eu vou dizer você ou por aqui. Ele se arrastará muito bem para a direita como uma linha reta Eu gosto de manter pressionada a tecla Shift e forçá-la a fazer isso. Então eu vou dizer que você está aí e o que eu quero é isso vá para este canto superior aqui. Eu quero que ele se encaixe nos cantos? Aí está. R: Só estou me certificando de que está dentro dessa moldura. Vou renomear essa chamada caixa de heróis. Eu sei que todo esse pedaço é minha caixa de heróis, e essa é minha imagem de herói O herói é a palavra geralmente dada a essa caixa. Esta é minha imagem de herói, minha grande imagem de produto. O que eu quero fazer é quebrar o link da proporção para que eu possa arrastá-la e fazer com que ela preencha o espaço desejado. Eu quero que seja 50, 50 e você notará que redimensionado para melhor caber na moldura que eu arrastei Lembre-se de que posso arrastá-lo para um tamanho menor, maior, ele faz o possível para preenchê-lo. Está no meio da minha página. Você notou que eu encontrei o meio sem fazer nada, na verdade, eu apenas o arrastei para perto de onde o meio da página está no meio da página Não é. Por que não está indo para o meio O que eu poderia fazer é clicar nessa moldura externa e dizer, o que você é? Você tem uma largura de 12 40, então vou me certificar de que é 1240/2, e nós somos definitivamente a metade. Normalmente, ele estala Agora, outra forma de trazer uma imagem é começar com uma forma. Podemos começar com, vamos começar com qualquer forma antiga, mas vamos escolher uma elipse, porque retângulos O que você pode fazer é, basicamente, o que está acontecendo com este aqui embaixo é pressionar Escape para voltar à minha ferramenta de movimentação, segure a tecla de comando para clicar nela. Esta imagem, ou está no meu painel de layouts. Está lá. Essa imagem é na verdade um retângulo com um preenchimento dentro de uma imagem Este círculo é um preenchimento , mas com uma cor dentro. O que você pode dizer é que não precisamos excluí-lo. Nós podemos simplesmente mudar isso. É como mudar de sólido para gradiente. Mas podemos transformá-la em uma imagem, estranhamente. Eu vou te mostrar todas as maneiras diferentes de ajustar essas imagens Por quê? Principalmente porque você vai pegar modelos e dizer Como diabos eles fizeram isso? Bem, agora você sabe. Bem, depois desse vídeo, você saberá. Vou clicar aqui e dizer, em vez de um sólido ou não um gradiente. Ah. Uma imagem. Você clica em uma imagem e diz que vou fazer o upload do meu computador, vou escolher essa e vou inseri-la. Legal fazer a mesma coisa em vez de apenas arrastá-la para fora, você está preenchendo Você também pode fazer outra coisa. Vamos pegar outra forma aleatória, mesmo processo, apenas uma maneira diferente de fazer isso. Eu tenho uma estrela. Estou segurando tecla Shift para que não seja uma estrela mole Quantos lados eu vou colocar em oito? O que eu vou fazer é pegar esse cara e arrastá-lo para dentro. Eu posso fazer isso? Eu não sei se eu poderia. Eu sei que posso importá-lo e trazê-lo . Vamos fazer isso de uma maneira diferente. O que eu vou fazer é pegar meu oh, não, há duas maneiras. Vamos trazer uma imagem com o atalho Command Shift K, Control Shift K, um PC Vou encontrar uma imagem. aqui é bom. Eu clico em abrir. Em vez de apenas clicar e arrastar como fizemos, vou desfazer e ter que fazer tudo de novo, ou seja, basta clicar dentro de uma Você pode ver o que realmente pegou minha estrela e adicionou um preenchimento a ela com aquela imagem Essa é outra forma de trazer imagens. Por que ter uma maneira quando você pode ter 72. Mas agora você sabe, você pode arquivá-lo e portá-lo. Você pode usar a opção aqui embaixo para trazer uma imagem, você pode usar um atalho Você pode arrastá-lo da sua área de trabalho. Ao arrastá-lo , você pode inseri-lo diretamente em uma forma existente ou pegar uma forma existente e alterar o preenchimento de sólido para imagem. Útil. Não, eu quero abordar algumas noções básicas de fotos Girando isso. Se você clicar nele, poderá girar segurando apenas a parte externa Há esse tipo de agarrar a borda, não é o que eu quero. Se você passar o mouse do lado de fora, obterá o tipo de rotação tradicional Se você segurar Shift, ele o bloqueará no que é? Múltiplos de 15 graus? Sim, é isso que está fazendo. Ou você pode decidir, na verdade, que eu vou apenas digitar. Precisa estar 180 graus, de cabeça para baixo. Depende de você, você pode invertê-lo. Rotacione-o. Boop. Adicione seus próprios efeitos sonoros. Basta fazer uma última coisa e quero mostrar a vocês algumas edições básicas de imagens. Não é um editor de fotos completo, mas faz o básico muito bem Digamos que eu queira uma imagem em nosso plano de fundo. Na verdade, basta fazer isso primeiro no básico. Vamos dar uma olhada neste. Estou usando esse aqui. É uma das imagens dos arquivos e o que eu quero fazer é você ir até aqui, clicar na imagem. Por aqui, você tem o básico. Você tem exposição, contraste, temperatura de saturação, realces de tonalidade e sombra, caso não consiga ler, e você pode simplesmente arrastá-los Exposição, se quiser abaixá-la, arraste-a para a esquerda. Levante isso. Aí está. Não sei, isso é tipo muito básico de photoshop, então não há muita coisa nisso Preto e branco, arraste a saturação para baixo. Se você quiser deixá-lo mais quente, arraste-o para a direita. Se você quiser deixá-lo mais frio, arraste-o para a esquerda. Altere a temperatura de toda a imagem. Quando você trabalha com imagens da biblioteca de estoque, elas estão perfeitamente corretas e você não precisa fazer muito com elas. Quando você está lidando com imagens que talvez você tenha tirado ou de um fotógrafo que ainda não foram retocadas, talvez seja necessário brincar um pouco mais com elas . Eu arrasto isso de volta. Vou deixar você experimentar as tonalidades, a temperatura e os destaques Uma coisa que eu quero mostrar a você é que, muitas vezes, para , digamos, gráficos, eu escolho um gráfico que eu quero usar. Digamos que seja esse aqui. Eu gosto disso. Eu quero que seja uma imagem de fundo. O problema com isso, porém, é que se eu pegar esse texto e colocá-lo em cima, movê-lo para a frente usando meus colchetes Você pode ver que fica um pouco perdido naquele fundo? Você pode ver que fica um pouco difícil de ler? Essa é bem escura. Na verdade, é melhor aqui embaixo. O contato se torna difícil de ler. O que você pode fazer é que eu vou colocar isso lá. Você pode clicar no plano de fundo, clicar em preencher e clicar em Imagem. Há duas coisas. A exposição apenas o escurecerá. Acho que, se eu quiser colocar algo em segundo plano, mantenha-o rico, mas escuro, para que eu possa ler coisas. Vou reduzir isso um pouco para me expor e depois brincar com coisas como os destaques. Arrastando os destaques para baixo, você pode ver que retira as partes realmente nítidas que geralmente se perdem no texto Você pode esbarrar nas sombras. Eu encontro apenas esses dois. A exposição diminuída destaca um pouco o máximo que a imagem poderia capturar. Este pode ir até o fim e eu não acho que isso prejudique a imagem, você pode aumentar as sombras obter um pouco mais de contraste Pode torná-los um pouco mais quentes e ricos por causa suas carteiras e coisas de couro quentes A saturação também pode aumentar um pouco. Você pode brincar com eles. Eu acho exposição e destaques apenas para colocá-los em segundo plano. Eu não gosto do que fiz. Vai voltar para lá, saturação vai voltar Agora, o texto está muito mais legível. Agora, uma última coisa é, digamos que eu tenha essa imagem aqui, e talvez eu queira adicioná-la ao fundo aqui. Eu poderia simplesmente arrastá-lo e ir, eu vou, arrasto. Está do outro lado. Está dentro da minha página inicial, não é? Vou enviá-lo para trás usando meus colchetes ao lado meu PK no meu teclado, e você pode fazer isso Perfeito. Não há nada de errado com isso, mas quero mostrar outra maneira, só porque você obterá outros documentos nos quais ficará perplexo ao encontrar a imagem. Nós já fizemos isso. No momento em que isso fica bem claro, eu tenho minha página inicial e dentro da minha página inicial, há uma imagem logo na parte de trás. Isso faz sentido. Mas se eu excluir isso, posso realmente adicionar a imagem ao quadro da página inicial Nós também fizemos isso. Com qual deles fizemos isso? Esse aqui. Nós tínhamos um círculo, lembre-se, e mudamos o preenchimento para uma imagem. Estamos fazendo a mesma coisa, mas é estranho fazer isso na página inicial, mesmo que seja apenas uma moldura, mas podemos fazer isso Vamos clicar na página inicial. Amplie o Shift two, minha seleção. Eu vou dizer, eu não quero preencher com um sólido, eu quero preencher com uma imagem. Vou fazer o upload do meu computador e vou encontrar aquele que foi bem legal como plano de fundo. Em um Mac, se você quiser, como ele está visualizando as imagens Em um Mac, você pode pressionar a barra de espaço. Eu não acho que você possa fazer isso em um PC, talvez você possa, mas você pode ter espaços para visualizá-los ou você pode ter miniaturas maiores Estou usando este aqui, esse Julius Trost aberto e você notará que está em segundo plano Agora eu posso mexer um pouco com a exposição. Você pode ver como talvez seja um pouco mais estranho, não é tão ruim. Mas eu quero torná-lo mais sutil. Vou diminuir um pouco a exposição e arrastá-la um pouco para cima, encontrar meus destaques e arrastá-los para baixo. Você simplesmente tira a nitidez delas e pode decidir que a saturação precisa diminuir Talvez a exposição seja um pouco mais. Você quer que seja uma coisa bem sutil em segundo plano. Tudo o que eu disse foi uma última coisa. Uma última, última, última coisa é que você pode decidir que, na verdade, eu gosto dessa imagem. Talvez você tenha duplicatas e pense: A, eu tenho duas dessas Eu quero o mesmo círculo, mas preciso de uma imagem diferente. Você pode simplesmente entrar aqui, clicar na imagem, e você pode dizer carregar do computador e escolher outra, que é 1:00 da manhã eu para pegar esta aqui e substituí-la. Tudo bem. Isso tem muito a ver com imagens em um único vídeo. Espero que tenha sido útil. Eu faço isso principalmente porque há muitas maneiras diferentes de lidar com imagens no figma, e eu lembro que, quando eu estava aprendendo, eu pensava: imagens são estranhas, às vezes, às vezes estão É porque às vezes eles são simplesmente arrastados como uma imagem, o que faz sentido Então, às vezes, são imagens dentro de um preenchimento em uma moldura. Tudo bem. Vou parar de falar sobre imagens. Bem, vamos para o próximo vídeo. Faremos mais imagens. Mas faremos isso no próximo vídeo, nos vemos lá. 58. Como mascarar e recortar imagens no Figma: R: Tudo bem. Isso deve ser chamado de Como fazer uma grande bagunça no arquivo de design do Figma Mas, na verdade, tudo se resume a mascarar. Vamos usar formas para mascarar imagens e há três maneiras diferentes. Eu quero te mostrar todos eles para o caso de você topar com os arquivos de outras pessoas Há prós e contras todos os três. Além disso, também enviaremos mensagens de texto. Receberemos uma mensagem. Você pode escolher uma imagem melhor para incluir no seu texto. Isso parece horrível. Mas foi aí que acabamos. Então, vamos começar. Comece a fazer isso. Vejamos as três técnicas diferentes de mascaramento. Começaremos com a máscara de baunilha. Eu os nomeei. Ninguém mais os nomeou só eu. Só para dar a eles um diferencial para o nosso aprendizado. Vamos começar com o vanilla e o que vamos fazer é importar uma imagem. Digamos que importamos este. O corte básico consiste basicamente em trazer a imagem e depois trocá-la da imagem para cá. padrão é preencher, você pode mudar para recortar e fica tipo, nada acontece O que você pode fazer então é pegar a moldura e arrastá-la. Nós clicamos duas vezes no fundo e o cortamos. Aqui está. Eu uso a palavra cortar e mascarar de forma intercambiável, Figma chama isso de mascaramento. A mesma coisa. Para voltar a ela, você clica nela e pode clicar na imagem aqui e ela volta à vida. Preencha por padrão. Vamos clicar em preencher. Isso acontecerá, se eu redimensioná-lo, desde que as proporções estejam desativadas. Eu posso redimensioná-lo e ele sempre tentará preencher qualquer forma que eu tenha desenhado ou deixado Vou mudar para uma safra que é a safra de baunilha. Você pode decidir que o estranho é ver a borda aqui A moldura é muito fácil de pegar porque tem alças muito claras. Você pode arrastá-lo. Você pode girar a moldura. A imagem, porém, não parece ter as linhas azuis ao redor do lado de fora. Tem o equivalente. Você simplesmente não consegue vê-los. Então veja isso, eu posso arrastar a borda aqui, segurar a tecla Shift, que escala proporcionalmente Eu posso fazer a mesma coisa com a rotação. Lembre-se de pairar um pouco mais longe aqui. Há essa área mágica de rotação, e você também pode girá-la . Clique e arraste-o para movê-lo. Vou ter que tornar a minha maior para caber, para que você possa ajustar a imagem e retirá-la da moldura. Perguntando. Essa é a máscara de baunilha. Traga a imagem, mude-a para recortar, mexa com ela. Existe o método de duas formas. Na verdade, primeiro de tudo, na versão básica, dê uma olhada no painel Layers aqui. Consegue ver isso? É muito simples. É só uma imagem com o nome da imagem. Não há nada no painel de camadas. Muito claro. Você só precisa se lembrar de entrar aqui para ajustá-lo. Isso é legal. Portanto, o método de dois objetos é quando você tem uma imagem ou, desculpe, uma forma e uma imagem. Vou colocar o meu na frente. Se eu quiser mascarar esses dois, tudo o que preciso fazer é colocá-los um em cima do outro e selecionar os dois. Você precisa selecionar os dois e, aqui, aparece um pequeno ícone que diz: use como máscara. Você fica tipo, isso não funcionou. O estranho dessa máscara é que a forma tem que estar na parte inferior Eu tenho apenas a forma selecionada. Eu uso meus colchetes ao lado da minha PKey para empurrá-la para trás ou você pode clicar com o botão direito do mouse e dizer enviar para Ainda preciso selecionar os dois, então preciso tentar pegá-los agora, que é bem fácil, e agora preciso usar a máscara. É o objeto traseiro que mascarará a imagem na parte superior. Mas é assim que funciona. Você pode ver para editá-lo, selecionar nele e clicar duas vezes nele para entrar nele, ou provavelmente é mais fácil, ou provavelmente é mais fácil, especialmente quando você está aprendendo a clicar nele uma vez. Aqui, você vê a diferença. Esse outro objeto, que era esse, qual deles trabalhará naquele outro ali. Vou movê-lo para cima no meu painel de configurações para facilitar a comparação Esse foi o método básico, em que apenas trouxemos uma imagem e a cortamos Esse aqui funciona de forma diferente. Acabamos com a mesma parte, ainda temos uma máscara, mas neste caso, é um grupo de máscaras com duas coisas dentro dela, meu vetor, que está na parte inferior e minha imagem na parte superior. Isso torna as coisas um pouco mais fáceis quando você diz “Quero ajustar um pouco a oscilação da imagem Está bem? Eu posso selecionar a imagem, e então eu tenho essas pequenas alças bonitas que aparecem e eu posso segurar a tecla Shift, reorganizá-la e arrastá-la Se eu quiser trabalhar na moldura, posso clicar na moldura e dizer: quero torná-lo um pouco maior e talvez girá-lo Você pode trabalhar com eles de forma um pouco mais pragmática. Eu não sei. É mais fácil trabalhar nele, mas é um pouco mais confuso aqui no painel de camadas Fácil, difícil, mas provavelmente mais fácil de trabalhar. Ele disse que havia três opções de mascaramento. Há. A terceira forma é a forma da primeira máscara. Ou seja, você acabou de desenhar uma forma, qualquer forma. Vou desenhar uma elipse. Pode ser isso, você poderia ter desenhado uma chama, realmente não importa. Mas em vez de colocar a imagem em cima e fazer uma máscara, você a seleciona e diz, na verdade, eu quero mudar isso para uma imagem. Que tipo de imagem você? Eu vou dizer que vou escolher um aqui, e eu faço isso. É apenas uma forma um pouco diferente da primeira, a baunilha, em que você começa com a imagem e depois corta as bordas Neste caso, você começa com a forma e a preenche com uma imagem. Se eu mudar de preenchimento para corte, posso fazer basicamente a mesma coisa. Eu posso brincar com o plano de fundo. Você não pega as alças, mas pode fazer o mesmo. Como a baunilha, diferentes formas de abordá-la. Você encontrará outros tutoriais em que você diz : Achei que tinha que trazer a imagem e depois cortá-la ou você traz uma forma e a adiciona e depois recorta Ou você tem duas formas, cole-as uma em cima da outra e depois as mascara? Eles são todos iguais. Porque veja isso. Eu tenho outra cópia disso? Eu tenho. Vou pegar isso e posso fazer exatamente a mesma coisa que a elipse, posso dizer Você não tem mais um preenchimento. Na verdade, você vai ter um preenchimento, mas vai ser sólido. Não, vou mudar para imagem. Vou escolher uma imagem. Vou escolher aquela imagem do Scott. Vou me livrar do derrame e acabaremos exatamente no mesmo lugar. Eu ainda posso ajustá-lo, mas eu tenho aqui nas camadas, você pode ver que parece diferente. Isso é o que eu quero te mostrar é que eu estaria trabalhando nisso. Eu ficaria tipo, o que diabos é isso? Ou você vai ver isso acontecendo Como está a imagem? Como faço para chegar até ele? Apenas uma forma diferente de trabalhar. Eu clico aqui, vou para Crop e agora posso trabalhar nisso. Do mesmo jeito. Mesmo resultado final, apenas algumas maneiras diferentes de fazer isso. Vanilla, comece com a imagem. O método de duas formas em que apenas sobrepomos duas coisas e criamos uma máscara Em seguida, o último em que você começa com uma forma e adiciona um preenchimento que é uma imagem e, portanto, é cortada. Foi útil? Vamos mais longe. Vamos digitar. Se eu vou digitar tool, vou digitar meu nome. Vou clicar em Escape. Vou usar meu Ktol para fazer o dimensionamento apenas para que a fonte fique bonita Vou pegar minha ferramenta de digitação, selecioná-la, encontrar uma boa fonte preta, bonita e grossa, e posso fazer o mesmo. Veja isso. Está cheio de branco. Olha, imagine o que eu poderia fazer. Hmm, eu clico aqui e pronto, imagem. Você já está lá. Você acha que isso não é difícil. Não é. Aqui vamos nós. Temos uma imagem em segundo plano. Antes, se quiséssemos ajustá-lo porque no momento em que dizia para preencher, ou seja, se eu mudar vá para a ferramenta de texto, mude o texto. O texto ainda é editável, o que é legal. Vou digitar todo o meu nome. Você pode me chamar de Dan e pode vê-lo expandido com base nas letras disponíveis? Então, está enchendo. Você pode mudar para recortar e depois dizer: Tudo bem, não posso estar na minha ferramenta de digitação Eu tenho que estar em movimento, ferramenta. Oh, isso não funcionou. Vamos aqui. Ah, o tipo. Como faço para você esperar lá. Não tenho certeza. Oh, ainda está no Phil. Tenho uma safra. Lá vamos nós. Não tenho certeza do que fiz lá. Eu juro que já plantei antes, mas é claro que não. Ok, então eu posso arrastar minha imagem, segurando a tecla Shift, ok, posicioná-la onde eu quiser, ok? E se eu quiser mudar o tipo depois, tudo bem, eu tenho que usar a ferramenta de tipos. E porque somos amigos, você pode me chamar de Dan. Há uma imagem terrível do que estamos fazendo porque você realmente não consegue ver meu texto. Tudo bem. Eu quero voltar para isso. Clique no preenchimento como antes, e eu posso ajustar este para tentar encontrar mais. Talvez eu tenha que fazer o oposto do que fiz anteriormente, segurar a tecla Shift e tentar colocar todos os pedaços de couro Talvez eu tenha que brincar com o contraste e aumentá-lo um pouco Sem exposição, aumente um pouco. Está bem? São os destaques, derrube-os, talvez eu tenha que mencioná-los. Ou, nesse caso, as sombras. Eu quero que eles sejam mais leves. Está bem? Ainda não está funcionando tão feio Você entendeu a ideia. Então, são quatro maneiras de recortar se incluirmos o texto no final Sim, eu realmente quero isso aqui porque eu lembro que era muito confuso Se você não fizer mais nada, provavelmente a maneira mais fácil é usar o método de duas formas, onde você coloca a imagem e a forma juntas, certifique-se de que a imagem esteja na parte superior, selecione as duas e aperte o botão de máscara. Mas você vai se deparar com eles e vai ficar tipo, não é? Como faço para mudar isso? Você só precisa se lembrar de clicar na imagem para alterar o corte e, se você passar o mouse sobre aqui, como fizemos no último vídeo, podemos fazer o upload de uma nova imagem para substituí-la É isso mesmo. Barra de mascaramento Cropping Done. Nos vemos no próximo vídeo. 59. Imagens e plugins gratuitos para o Figma: Lá, neste vídeo, veremos como obter imagens gratuitas que você pode usar comercialmente em como obter imagens gratuitas que você seus projetos Figma, e eu mostrarei quais sites visitar e mostrarei como usar alguns dos Eles são muito fáceis. Vamos entrar e fazer isso. Esperando que este seja carregado. Aí está. Está carregado. Deixe-me mostrar de onde eu os obtenho. Tudo bem Então, quando se trata de procurar imagens para usar em seus documentos, você provavelmente está procurando por que você possa usar comercialmente Então, se o cliente disser, “ Sim, eu adoro”, e então você tem que sair e encontrar um diferente, isso não é divertido. Você está procurando por aqueles que sejam comercialmente licenciáveis Há dois lugares muito bons para Unsplash.com. E outro são os pixels. Você pode ter o seu próprio. Deixe-me saber os comentários. Se você tem outro que possa usar e que goste, que outras pessoas também possam gostar. O legal deles é que, digamos que o Unsplash, o que eu mais uso, tenha vários gratuitos Os que têm poucas vantagens no momento são os premium. Eles os chamam de Unsplash plus. Estou evitando esses, e digamos que eu queira fazer uma pesquisa. Vamos fazer o quê? Vamos fazer o quê? Está bem? E você encontrará um monte de coisas, e digamos que eu queira essa, basta baixá-las e usá-las. Você pode dar uma olhada e ver quais são os direitos comerciais deles, mas você descobrirá que tudo neste site é gratuito sob a licença Unsplash . Está bem claro. Você pode baixar gratuitamente. Você pode usar o comercialmente e não precisa de permissão Embora a atribuição seja apreciada. Você pode deixar um link ou enviar quem quer que seja o fotógrafo Você não pode ir e depois vendê-los. Verifique se você os está usando para algo um pouco estranho, mas para uso normal, pixels Unsplash são ótimos o download do site é algo que você pode ir direto ao ponto e instalar um plugue. Ok, então aqui embaixo, a sua terá uma aparência diferente se você estiver na conta gratuita, mas neste pequeno painel de ações. Você pode acessar Plugins e eu vou digitar imagens gratuitas. Novamente, você está procurando aqueles que tiveram muitos downloads, muitos deles. Vou digitar Unsplash porque sei que existe um plugin E você pode simplesmente clicar aqui, eu vou correr. Espere um segundo para carregar e pronto. Eu posso simplesmente clicar neles e eles simplesmente aparecem. Eu vou desfazer isso Você já pode clicar em uma forma e clicar nela e ela simplesmente a colará dentro dela. Agora que sabemos como usar o recorte, sabemos como entrar aqui e dizer mudar para recortar e podemos ver as bordas, podemos começar a ajustá-las . Sim, é isso mesmo. São imagens gratuitas dentro do Canva. Você pode usar os sites ou usar o plug-in. Super fácil. Tudo bem Te vejo no próximo vídeo. 60. Como criar imagens de IA no Figma: Lá, vamos usar inteligências artificiais para tornar as imagens do zero as comercialmente Eles não existiam. Nós apenas os digitamos e as máquinas os fabricaram. Obrigado, máquinas. Deixe-me mostrar dicas e truques para criá-los, obter a iluminação correta e a composição correta. Tudo bem. Vamos começar. Tudo bem. Vou selecionar a página inicial, deslocar dois para ampliar Vou substituir essa imagem aqui. Se você não vai ficar com este, na verdade, eu vou colocá-los lá, e vou desenhar um retângulo e, na verdade, vou desenhar uma moldura Você não precisa começar com uma moldura. Eu quero. Porque eu quero que tenha um tamanho específico. Seja qual for o tamanho que você desenhar, será o que a IA o preencherá. Ok, agora aqui embaixo, esse é um daqueles recursos em que você precisa da conta paga. Tenho certeza de que, se você está na conta gratuita, tenho certeza de que precisa dela, e vai usar esta que diz criar uma imagem Não está nos vencendo. O seu terá uma aparência diferente e provavelmente funcionará de forma diferente. Toda vez que eu carrego o Figma, isso é um pouco diferente. Uma das coisas frustrantes de uma ferramenta de design de UX é que ela está sempre ajustando a De qualquer forma. O que vou fazer é digitar uma carteira de couro em uma mesa de madeira cara. Você terá que descobrir que tipo de solicitação deseja usar Isso é o que eu tenho na minha cabeça. Vou clicar em Criar. esperar que tudo isso aconteça. Isso acontece na nuvem e basta baixá-lo, então pode levar um pouco de tempo. Estou protelando. Eu realmente não gosto dessa animação. Tudo bem. Vou começar a fazer isso. Está funcionando. Tudo bem, então provavelmente demoraram mais um minuto para terminar. Oh, eu gosto disso. Então é tipo, tudo bem, quais mudanças você quer fazer? Vamos fazer mudanças aqui. Digamos que eu queira uma visão panorâmica ou de cima para baixo. Você pode fazer ajustes nessa coisa, tipo, tudo o que eu quero é que não seja uma mesa de madeira, mas talvez uma mesa de bétula ou não sei Não conheço muitos tipos de madeira. Mas você pode fazer ajustes à medida que avança. Estou brincando com os ângulos da câmera aqui, vamos começar a fazer isso Tudo bem, o que é melhor descrito? Esse é o que eu quero. Esse era o original. Esse é o novo. Você pode clicar entre eles e deixar claro qual deles você quer que você decida. Em que eu cliquei? Eu vou voltar. Esse é um bom ponto. Vou usar minha ferramenta de movimentação, clicar nessa imagem e clicar na lateral dela novamente. Eu o selecionei aqui. Vou voltar a fazer uma imagem. OK. Ok, acabei descobrir que, uma vez que você saia desse fluxo, não acho que consiga colocá-lo de volta nele. Então, eu vou ter que começar de novo. Eu acho. Se você descobrir, você pode fazer isso. Me avise. Pode ser algo que eles atualizem. É uma versão beta de IA. Então, eu tenho que fazer tudo isso de novo? O que vou fazer é fazer essa visão panorâmica, e vou dizer Iluminação brilhante. Você pode estar fazendo diferente. Você pode dizer, você sabe, mal-humorado ou pode ser melhor em cinema e televisão do que eu ou em fotografia e inventar diferentes ângulos de iluminação, talvez externos, luz natural, iluminação superior esquerda Você pode dizer o que quiser. Tudo bem. Talvez seja melhor. Está bem? Então, sim, IA, é muito poderosa que não existia no mundo. Está bem? É um pouco difícil, carteiras Scott vamos realmente ter produtos físicos Mas para marcadores de posição ou imagens de apoio, ótimo. Agora, eu poderia fazer uma série dessas e dizer, faça com uma costura aproximada e ângulos diferentes, iluminação diferente, mas você entendeu Isso mudará essa interface. Mas eu não sei, LA está ficando muito boa. Então, o mundo é sua ostra. Uma das coisas, porém, que é interessante sobre isso é: assista isso. Se eu fizer uma moldura com esse tipo de formato de caixa de correio, eu fizer exatamente a mesma coisa, mas vou adicionar um pouco mais. Ah. Adicionado com uma luminária de mesa. Vou desenhar outro, e vamos começar a finalizá-lo. Tudo bem. Eu tenho minha luminária de mesa. Oh, eu gosto disso. É que você diria que está cortado aqui O que realmente acontece é que, se formos até aqui e digamos que queremos cortá-la, sabemos que, na verdade, não precisamos desse preenchimento branco. Está lá apenas para se divertir. Essa aqui, essa imagem. Se eu entrar nela e disser, quero que ela cresça, você pode ver? Na verdade, criou uma imagem maior, na verdade não a cortou. Ele acabou de criar essa proporção padrão e simplesmente a cortou em tudo o que você criou Talvez haja mais coisas que você não consiga ver. Isso é apenas algo que você deve conhecer no momento. Vá e mude essa interface de IA. Eu *****. Mas aí está. Ou seja, criando imagens que sejam comercialmente utilizáveis usando AI straighten figma, Tudo bem, o seu estará no futuro. Os resultados serão ainda melhores. Eu ***** a interface e mais controles estarão lá. Se mudar muito, eu vou refazer isso. Mas espero que não seja muito diferente e boa sorte com a IA Te vejo no próximo vídeo. 61. Projeto do curso 11 - Imagens: Tudo bem, hora do projeto da aula. Eu quero que você trabalhe suas imagens em seu design. Ok, então volte ao seu resumo e certifique-se de não estar usando carteiras. Descubra suas imagens. Você pode obtê-los no Unsplash ou usar a ferramenta de IA se tiver acesso a ela, se estiver na versão Pro, e então começar a preencher sua página inicial em seu desktop Hi Fi Agora, suas cartas parecerão diferentes das minhas. Ok, então onde está o seu? Você pode ter feito exemplos diferentes. Você pode ter usado círculos em vez de retângulos, como eu, ou como este aqui, onde há um recorte mais interessante nas imagens Depende de você, mas eu quero que você vá até lá, pegue as imagens. Quero que você experimente usar o plug-in também para pixels, unsplash ou qualquer outra coisa Eu não me importo. Eu quero que você experimente com isso. Novamente, a IA, se você tiver acesso a ela, não esqueça sua persona e o resumo, certificando-se de escolher imagens que relacionem quem é sua personalidade e faça uma captura Faça o upload para a barra de projetos Assignments e também nos leve às redes sociais, porque agora é interessante ver os projetos de todos começando a ser preenchidos, com imagens, fontes e outras coisas reais É um momento emocionante. Tudo bem, então vá adicionar algumas imagens, e te vejo no próximo vídeo. 62. O que são botões de autolayout e expansão no Figma?: Oi, pessoal. Neste vídeo, aprenderemos o que é uma saída automática. E vamos nos abraçar. Oh, sim, nós somos. Olha, ele vai fazer todo tipo de abraços. Por que abraçar é bom com saídas automáticas? É porque é incrível. Eu não consigo digitar. Vá lá, digitando. Isso bastará. Ok, você notará que o botão redimensionou o texto, e eu posso fazer coisas legais Olha, squdgy squidgy e o texto fica no meio. Está tudo bem e responsivo. Isso é Autouts e é por isso que adoramos abraçar. Tudo bem, vamos começar . Tudo bem. Antes de começarmos, não é só um aviso. Avisos ruins Baile de formatura. É que Aouts são as coisas mais complicadas que você vai fazer até agora E eles são complicados. Mas não se preocupe. Eu refiz esse vídeo várias vezes para tentar torná-lo cada vez mais fácil de entender Então, isso vai ser fácil, eu prometo. O que vamos fazer é garantir que você ainda não esteja. Estou no sorteio de mais cedo. Eu vou desenhar. Tudo bem. Primeiro, vamos ampliar a página em branco, ou você pode fazer isso na prancheta Descreva as ferramentas de estrutura, o FK. Desenhe uma coisa do tamanho de um botão e vamos preenchê-la. Vou usar um dos meus estilos para que você possa vê-lo. Está bem? Então, temos uma moldura. Nada realmente está acontecendo. Vou chamá-lo de BTN, e este será meu pequeno botão. Tudo bem, o que fazemos agora? O que fizemos no passado? Isso não funciona para a ferramenta retangular Você sabe, mais cedo , eu disse, Ei, molduras têm poderes especiais. Esse é um deles. É o layout automático. Portanto, não faça isso com uma ferramenta retangular. Certifique-se de fazer isso com uma ferramenta de moldura. Pegue minha ferramenta de digitação, clique aqui e eu vou digitar Agora. Agora, isso é o que acontece por padrão, certo? Vou pegar minha ferramenta de movimentação, clicar na parte externa e ela meio que fica lá dentro, certo? Tipo, isso é divertido. O que eu queria fazer era redimensionar Então, tudo o que preciso fazer é selecionar o quadro, não o texto interno, mas o pai. O pai é a coisa que está do lado de fora. Essa é a criança. Pegue o pai, e aqui, há um botão que diz Autout. É muito comum usar o shift a. E bam, eu meio que funciona. Vamos mudar o texto de B agora para Oh, olha, está se expandindo. Meu botão capsoc está quebrado, então estou tendo que manter pressionada a tecla Shift e Ganhe mais. Oh, está se expandindo. Vamos dar uma olhada um pouco mais porque não é bem do tamanho que eu quero. O que vou fazer é clicar no pai e dar uma olhada. Veja esse ícone aqui? Se eu remover o O, veja, isso é o que normalmente vemos. Esse é o ícone da moldura. Desfazer, refazer, desfazer, refazer Você pode ver o ícone, o hash e, em seguida, esse novo ícone, que indica uma saída automática. Ele faz as coisas mágicas automáticas. Também temos alguns abraços acontecendo. Se você não consegue ver as palavras abraço, talvez seja necessário ampliar um pouco Mas o que está acontecendo é que os pais estão abraçando tudo por É isso que faz sua coisa. O que queremos fazer é se você passar o mouse sobre ele ver esses pequenos hashes Esse é o acolchoamento, o que está ao redor está no meio e foi abraçado pelos pais, sendo mantido afastado das bordas pelo O padrão será qualquer tamanho que você tenha desenhado. Então, o que vamos fazer é aqui, diz preenchimento. Você também notará o painel de layout. O painel de layout automático era novo no lado da sua propriedade aqui, mas não estava lá antes. Isso lhe dá algumas opções. O que vamos fazer é dizer o preenchimento para a esquerda e para a direita. Essa é a primeira. Vou fazer esse 24 e esse 18, a parte superior e inferior. É um tamanho muito comum. Talvez usar múltiplos de oito seja bom. Aí está. Nós podemos ir e mudar isso. Vamos voltar a comprar agora. Agora, e o botão será redimensionado. A melhor parte é que ele simplesmente flutua no meio. Esse é um botão que será redimensionado para o texto interno Se você precisar alterar o tamanho do botão, se eu clicar em segurar e arrastá-lo, o que acontece é que ele quebra o abraço Tem um abraço para a esquerda e para a direita e para cima e Se eu arrastá-lo dessa maneira, você notará que ele tem um tamanho fixo e ainda se encaixa na parte superior e inferior, mas a esquerda e a direita agora têm um tamanho fixo Decidi que todos os meus botões terão o mesmo tamanho porque precisam de uma pilha Pode decidir que eles terão 200 pixels. É assim que você pode fazer isso. O bom disso é que, no botão, você pode ver o texto esticado por dentro Se você precisar que ele volte, o que você pode fazer aqui é ver se diz redimensionamento Você notará que este tem um abraço lá. Olha, eu posso largar isso e dizer que realmente volte, não conserte para o qual ele mudou automaticamente Vamos abraçar o conteúdo novamente. Ele tentará se encaixar o mais firmemente possível no texto Se eu remover o estofamento , ficará um pouco mais claro. Vou tentar me espremer completamente ao redor dela. Mas se adicionarmos um pouco de preenchimento, como 24 e oito, ele tentará se abraçar, mas respeitará o Outras coisas que podem confundir você é esse texto e o interior aqui. Como cliquei uma vez, obtive automaticamente um redimensionamento da largura automática Se eu disser, digamos, tamanho fixo quando estou desenhando e faço isso, vai funcionar, você vai ver isso Por que o texto está tão alto? Eu disse isso para ser esse pai aqui. Olha, está pronto para abraçar, abraçar, mas não está abraçando Eu só tenho 24 pixels de preenchimento, mas é maior do que isso É porque a caixa de texto. Se eu clicar duas vezes, ele será definido para essa largura fixa ou altura automática. Vamos ver a primeira aqui, que é a largura automática. A caixa de texto em si é automaticamente do tamanho certo e o pai se abraça porque gosta Isso é saída automática. Ele faz muitas outras coisas. Mas, no momento, acho que é uma boa introdução às saídas da Audi E se você precisar alterá-lo para um tamanho específico, basta arrastá-lo. Ok, e se você precisasse voltar, volte a abraçar. Tudo bem. Espero que não tenha sido tão ruim. Os Auto Lauts são super poderosos dentro do Figma. Agora vou fazer com que meu tenha um raio de canto de oito, e quero ouvir, usar a suavização de cantos, só para fazer com que, sei lá , seja É isso mesmo. Esse é um botão de layout automático dentro do Figma Na verdade, mais uma coisa, se você usar a ferramenta retangular, você nem terá a opção convertê-la em um layout automático Não quer fazer isso, então você precisa começar com um quadro. Tudo bem, é isso de novo. A final final. Te vejo no próximo vídeo. 63. Projeto do curso 12 - Botões: Tudo bem, é hora do projeto da aula. Quero que você vincule os botões que criou anteriormente, que talvez tenha feito com a moldura ou retângulo, comece do zero e crie um botão de layout Eu quero que você faça três deles. Haverá dois na página inicial Eu quero que esses sejam os botões de abraço. Aqueles que, quando você digita, se esticam. E então, na página de checkout, quero que você crie um botão de compra E eu quero que esse seja um botão de largura fixa. Está bem? Isso significa que ele não se abraça nem se expande É especificamente de 250 por 50 pixels. Eu vou te mostrar. Então, esses dois botões aqui, ok, digitam e se expandem e este aqui na nossa página de confirmação tem uma altura e largura específicas. Usaremos isso mais tarde no curso. Agora o Figma mudou para ser muito mais fácil por padrão. O que você pode encontrar em termos de problemas é, antes de tudo, lembre-se de que você não pode usar um retângulo, não consegue encontrar uma maneira de transformá-lo em um layout automático OK. Se eu fizer um quadro, é mais fácil fazer um autout. Tem uma cor, mas tudo bem. Eu posso ver esse quadro de saída automática. As coisas que podem lhe causar problemas estão aqui. Talvez você tenha ajustado o conteúdo do abraço, tanto na parte superior quanto na inferior, para aquele botão de abraço que se expande, e o outro é o alinhamento Você pode acabar com um alinhamento no canto superior esquerdo da minha ferramenta de digitação agora Na verdade, vamos colorir. Vamos encher de cores. Vamos pegar minha ferramenta de digitação para o Tiki. Eu vou digitar nele, digitar nele. A outra coisa é que você não encontrará as opções do Autout se estiver trabalhando com o tipo Não é a criança, você precisa trabalhar com uma estrutura parental. Se não estiver lá também, dê uma olhada aqui. Ele foi convertido nesse ícone Autu ou ainda é um quadro? Se ainda for um quadro, clique nele para sair automaticamente e, em seguida, você deverá obter essas opções. , abraço, em termos de alinhamento, especialmente para o de largura fixa, você pode acabar com algo que talvez esteja Você pode ver esse alinhamento aqui. O padrão é centralizar agora, nunca usei. Isso é uma coisa que pode confundir você. O outro é o preenchimento à esquerda e à direita. Realmente não importa para um botão esticado como este que eu quero fazer aqui, o de largura fixa, mas importa quando você quer que ele seja abraçado Se eu abraçar e abraçar, e o acolchoamento estiver definido como zero e zero , obviamente Quando eu faço isso com este botão, essa é uma largura fixa. Lembre-se de que acabou de ser definido como fixo. Eu configurei para 250. Se eu fizer o preenchimento à esquerda e à direita até oito, você percebe que isso realmente não muda nada O preenchimento muda, mas como eu tenho uma largura fixa, isso realmente não importa Se eu fizer 120, Oh, vou fazer 250. Não faz nada. Pang não importa Em uma caixa fixa. Aí está. Então, faça seus botões, e eu quero que você me envie uma captura de tela desse grupo aqui Então, está em seus arquivos de exercícios. Envie-me o grupo deles aqui. Não vou poder verificar se seus botões estão funcionando ou não. Deixe-nos saber nos comentários se você está tendo problemas e se você os resolver, e veja se consegue responder às perguntas de outras pessoas Informe-nos sobre quaisquer problemas que você tenha encontrado. Eles mudam a forma como os layouts automáticos funcionam para torná-los mais fáceis. Costumava ser um vídeo muito complicado aprendendo isso. Tenho certeza de que ainda há algumas peculiaridades e vou conferir os comentários Tudo bem. Faça alguns botões. Te vejo no próximo vídeo. Oh, uma última coisa. Não precisa ver isso nas redes sociais porque todo mundo vai ter os mesmos botões. Eu ia dizer agora e mais em cores diferentes. Não é muito empolgante. Carregue-os para a seção de projetos, com certeza, e veremos seus botões um pouco mais tarde em um design mais completo, completo e incrível É isso mesmo. Te vejo no próximo vídeo. 64. Auto layout para navegação com espaçamento no Figma: Um. Neste vídeo, vamos usar Auts. mesmo tipo de recursos do último vídeo, mas vamos usar várias coisas dentro de um alto-falante porque é legal o suficiente assim Eu posso mover as coisas. Isso tem um acolchoamento na parte externa que eu posso ajustar como nosso botão Você pode ver que a parte superior e a inferior agora são 50. É enorme. Tudo se ajusta. Eu posso jogar com um estofamento. Eu posso jogar com uma lacuna no meio. Eu posso torná-lo em dois pixels, bem apertado. Eu posso dizer, tudo bem, não preciso dessa pilha. Quero que esteja certo e vou aumentar a diferença novamente. Também vamos fazer isso com esse botão, onde dizemos: Tudo bem , é um botão que se expande, mas também tem um ícone lá dentro O ícone pode estar em qualquer um dos lados e se expande e faz coisas legais do Arooudy Eu adoro saídas automáticas. Eles são complicados se você é novo em tudo isso. Não se preocupe, vamos fazer isso algumas vezes ao longo deste curso, mas elas são muito úteis. Tudo bem, vamos entrar e fazer saídas automáticas para espaçamento em nossa navegação. Infigm Ah. Tudo bem Para começar, desenhei algumas caixas de texto com textos. Esta é apenas uma linha usando a ferramenta de linha, e eu tenho essas. Realmente não importa onde eles estejam. Vou movê-los só por diversão. Eles precisam ser caixas separadas para que todas as vantagens do autolou funcionem. O que fizemos no passado foi colocar primeiro um quadro, depois inserir o texto e depois convertê-lo em um Autout Você pode ir direto ao ponto e selecionar tudo isso. E se eu disser que seja uma saída automática, talvez você precise rolar para cima e para baixo, isso está ficando muito grande no momento Fique atento ao painel de layout. Então eu selecionei todos eles. Se eu clicar neste botão aqui, ele o envolverá automaticamente em um quadro para nós e o transformará em Automático. Fique atento no painel de camadas aqui. Vou clicar no botão Não sei por que faço esses barulhos É colocado em uma moldura. É chamado de quadro 19. Vou chamá-lo de Nav e converti esse quadro em um alto automático Você ainda pode fazer isso de outra maneira. Você pode desenhar um quadro e adicionar esse texto dentro dele depois convertê-lo em uma saída automática. Isso não importa. O que ele tenta fazer é colocar todos vocês centrados dentro dele O meu está à esquerda, apenas tenta fazer isso automaticamente. Não se preocupe com isso no momento. Vamos dar uma olhada em algumas das vantagens da saída automática. Uma das coisas, por ser uma moldura, posso selecionar a cor principal e dizer: quero que a cor principal, role, role a rolagem tenha uma cor de preenchimento de uma das minhas cores secundárias. É como o botão. O botão aqui, fizemos a mesma coisa, exceto que temos muitas coisas nele. Uma das vantagens desse botão é que podemos adicionar preenchimento Vamos encontrar o espaçamento, rolar, rolar. Aí está aí, vou colocar 16 e oito. Agora, você pode ter me visto em outro vídeo. Eu esqueci de mencionar. Eu só escrevo. Você pode ver se eu abro apenas as guias ao longo do menu? Eu costumo fazer isso 24 tab 16 para economizar tempo. Você fica tipo, o que aconteceu com isso? Estava funcionando. Agora não é. Há algumas coisas que precisamos fazer. Vamos verificar as coisas que podem estar nos causando problemas. Em primeiro lugar, o pai, o Nav, está pronto para se abraçar Está abraçando tudo por dentro? Não está definido para uma largura fixa. Você vê que esse está se abraçando, esse não é. Eu vou dizer, você abraça tudo por dentro, por favor, e isso pode resolver tudo Normalmente, isso acontece. Talvez tenha outro problema de como você criou as caixas de texto Se eu criar uma caixa de texto, arrastá-la e digitar na página inicial, você pode ter o hábito de fazer isso em outros programas e duplicá-la Tem uma largura fixa ou pode ser uma altura automática. Para que tudo seja responsivo e bom, você deve configurá-lo para o primeiro, que é a largura automática, aí está Isso significa apenas que não é uma largura fixa. Vou expandir e contratar também. Isso é algo que você pode ter que examinar e verificar este. Aqui está definido para uma altura fixa. Vamos fazer essa. Esse cara aqui eu também quero ter largura automática. Esse cara aqui, e esse cara aqui. Não é texto, então não precisamos nos preocupar com isso . É só uma linha. Fizemos uma caixa, com estofamento. Excelente. Algumas das outras vantagens um layout automático são a reordenação Gosta de seleções inteligentes e arrumação. O que podemos fazer é dizer, eu quero que você esteja no topo. Não precisei selecionar nada para criar um grupo como a seleção inteligente. Eu posso simplesmente movê-lo de um lado para o outro. Eu posso usar meu ancinho para descer, descer. Eu posso duplicá-lo como eu fiz antes. Comando ou Controle D. Ok? Vou adicionar um extra, e a saída automática se expande e se contrai Ótimo para menus e listas. Você pode alterar o espaçamento passando o mouse sobre ele. Você pode simplesmente arrastá-lo ou até aqui, você pode ser um pouco mais específico. Essa é a lacuna aqui. A lacuna apareceu quando estávamos apertando o botão, mas nada, não havia lacunas. Então, vou fazer meus múltiplos de oito e vou fazer 24 Agradável. Vamos invertê-lo para fazer isso. Outra vantagem da saída automática. Digamos que temos esse para nosso design móvel, mas queremos esse, vou fazer uma cópia dele para nossa página inicial Aqui em cima, você pode ver o fluxo? Ela adotou como padrão uma vertical porque é nova. Eu queria ir para a horizontal. Ah. Com isso. E o que eu poderia fazer aqui é excluir este, e vamos adicionar uma barra que está meio que para cima e para baixo. Então, vamos pegar a ferramenta de linha. Eu vou desenhar esse. Vou me certificar de que seja um pixel. Provavelmente é um pouco alto. Então eu vou fazer com que o meu seja 24. Ele escapa de volta para a ferramenta de movimentação. E o que eu posso fazer é simplesmente jogá-lo lá. Olha, incrível, hein. Eu realmente amo isso. Basta colocá-lo na saída automática e ele meio que se ajustará Eu fiz menos a largura específica. Eu vou decidir, na verdade, que não quero que tenha uma largura fixa. Desculpe, eu quero que seja um abraço. Agora ele abraça, e agora me dá essa flexibilidade mudar o texto e tudo se realinha Você começa a ver as vantagens das saídas automáticas, basta alinhar isso por cima Você não precisa usar uma saída automática. Eu poderia ser apenas um retângulo com texto na parte superior e você faz com que os links funcionem, eles ainda funcionarão perfeitamente para um portfólio, mas você receberá muitos modelos de outras pessoas e eles serão configurados para serem encomendados Depois de um tempo, você também começará a usar saídas automáticas porque, tipo, é mais fácil se transformar rapidamente em um faça o pedido. legal disso é exatamente o mesmo princípio se aplica quando eu digo, vou copiar isso, então vou até aqui, copiei e colei e terminei Eu vou retirá-lo. O que eu quero fazer é pegar isso. Vou trazer um ícone. Vamos até aqui. Vamos aos ícones, conify, vamos pegar um botão home Alguém em casa. Eu ganhei Qual deles? Escolha um para baixo, escolha um, aquele, redondo. Não me importo com todos esses tamanhos. Acabou de aparecer? Eu não ia arrastá-lo para fora. Aqui está lá. Qual é o tamanho 24 por 24? Parece bom. Vou alinhá-los. Na verdade, eu não preciso. Vamos fechá-lo. Vamos pegar esses dois. Vou convertê-la em uma saída automática, que a transforma em uma moldura e também cria uma automática Você fica tipo, oh, está fazendo a coisa do Huggy. Novamente, agora posso ir até o limite para que você possa ver o que estou fazendo. Vamos ver minhas amostras reais. Vamos. Isso é útil. Você pode ver que eu mudei o preenchimento para o pai. Vamos chamar isso de botão home. Ok, vamos chamá-lo de BTN home. Estamos saindo um pouco de tangente aqui. Eu não planejei isso, mas acho que esse é outro bom exemplo. Está bem? Eu selecionei isso, o pai. Está fora. Tem algumas coisas nele. As coisas que eu selecionei têm uma cor primária e há um pouco de preto lá dentro. Eu vou dizer que tudo o que é preto dentro da minha seleção vai ser branco agora. Legal. Você está começando a ver que está tipo, oh, estamos fazendo um botão. Vamos adicionar um pouco de preenchimento ao nosso botão, então um pouco de preenchimento, 16 e oito Vamos adicionar cantos arredondados porque estou apaixonado por eles. Você fica tipo, Oh, eu gosto disso. A lacuna intermediária. Vamos fazer esse oito também. Você pode vê-lo encolher Isso. É um botão home com um ícone. Veja isso. Se eu clicar no ícone da página inicial aqui, posso dizer, ok. Ele se move ao redor. Eu vou desfazer isso E se eu mudar isso para outra coisa. O botão se expande, o ícone continua. Basicamente, fizemos exatamente a mesma coisa aqui. Essa é uma saída automática que estamos usando para um menu. O botão é a mesma coisa que fizemos no último. Mas como temos várias coisas lá dentro, temos essa gentileza de mover as coisas É um pouco mais flexível. Ela se expande e se contrai. Podemos brincar bem com o espaçamento. Não precisamos alinhá-lo e arrastá-lo por alguns pixels e depois medi-lo. Tudo é feito através do Auto layu. Faça uma auditoria, basta clicar no botão novamente e agora ele volta a ser um quadro que por acaso tem um ícone com texto, e eu posso fazer coisas, mas acabou de perder toda a qualidade do layout automático Eu posso configurá-lo agora, fazer uma saída automática. Eu quero mudar meu preenchimento de volta para oito, e estamos de volta aos negócios novamente. Espero que você esteja começando a ver as vantagens dos autolouts. Uma coisa que causou problemas a algumas pessoas na última vez que fiz este vídeo foi que elas o copiaram e colaram e ele acabou fora daqui Você sabe, não vai entrar. É muito fácil arrastá-lo para dentro. Mas às vezes aqui, QC, há meus recursos e há o Nav em que estou trabalhando Você pode simplesmente arrastá-lo para dentro dele. Você também pode fazer isso para reordenar. Se você quiser que os recursos fiquem abaixo do preço, altere-os aqui e eles serão atualizados no menu aqui. De qualquer forma. Tudo bem Espero que tenha sido útil. Quais são as vantagens de fazer coisas de espaçamento e navegação. Tudo bem Te vejo no próximo vídeo. 65. Como usar restrições no Figma: Oi, todo mundo. Neste vídeo, veremos algo chamado restrições Basicamente, vamos fazer isso no final. Você vê que a navegação permanece no canto superior direito, o logotipo permanece lá, pode mover você. Tudo é o que chamamos de responsivo. Eles são chamados de restrições dentro do Figma. Eu vou fazer alguns níveis diferentes. Vai ser um modo fácil. Isso é tudo que eu realmente quero que você faça. Isso é o essencial. meio difícil e o supermega difícil No final das contas, o meio difícil e o supermega difícil são apenas para as pessoas que são capazes, para que possamos fazer isso mais cedo e faremos isso mais algumas vezes mais tarde no curso se você não entender algumas das partes mais complicadas. Mas vamos fazer tudo isso agora. Vamos começar. Tudo bem. Vamos configurá-lo para o modo fácil para começar. Acabei de mover tudo para o fundo. Eu desenhei uma elipse e trouxe o logotipo da outra página Restrições já aplicadas. Você nem precisou perguntar. Isso representa nossa navegação no canto superior direito. É um pequeno ponto, apenas mantendo você vendo os pontinhos aqui? Esses pontos são as restrições. Está restrito ao topo e a esta terra mágica à esquerda aqui Não totalmente transversal, apenas tamanho aleatório. Na verdade, é do tamanho superior logo aqui. Você consegue ver a esquerda e a parte superior? Quando eu redimensiono, apenas tento usar o lado esquerdo. O que eu quero dizer é, Ei, amigo, eu quero que você fique do lado direito Você pode usar o menu suspenso ou este menu aqui. Você pode ver que isso muda os dois. Eu quero que você use o topo e o direito como seu ponto de referência. Dessa forma, posso dizer caixa de características, que é o que acontece com o ponto. Olha, ele fica. Ele é pegajoso e estará à mesma distância É muito útil. Desfaça isso Ótimo para os melhores navegadores. Vamos dar uma olhada nesse cara aqui também. Você pode não ter feito o mesmo, mas este é apenas um bom exemplo que quero lhe mostrar. Se eu redimensionar essa moldura principal, esse cartão, veja o que acontece Zuk, mas se eu disser você, pequeno botão positivo. Sua restrição não é deixada porque isso não está funcionando para mim, à direita Então eu pego a moldura principal novamente. É chamado de cartão um, e eu o refaço. Juju. Aha. Você é tipo, quem? Na verdade, isso é muito legal. Tudo bem, esse é o nível um. Estamos prontos para ir para o nível dois. Não é muito mais difícil. É como médio. O seu pode não estar fazendo isso, mas dê uma olhada. Eu quero te dar uma chance, por exemplo, porque isso vai acontecer. Você pode ver meus logotipos fazendo coisas estranhas? Essa carteira aqui tem sua própria blusa e fica para a esquerda e vai para aqui. A palavra Scott vai um pouco mais longe aqui. Você vê que esse cara tem sua própria esquerda. O mesmo com esse cara vai um pouco mais longe. É por isso que todos estão fazendo coisas diferentes. A maneira mais fácil de contornar isso é dizer: Ei, pessoal, quero fazer de vocês uma unidade e fazer com que todos façam a mesma coisa. No momento em que são peças separadas. Eu posso dizer você, meu amigo. Vou clicar com o botão direito do mouse. Eu vou dizer que você pode agrupá-lo ou emoldurá-lo, isso realmente não importa, mas os quadros têm mais magia. Vamos dizer que a mágica é padrão na parte superior e esquerda. No momento, está indo para cá. Se você chegar mais perto da borda, ele desaparecerá, você quer dizer do lado esquerdo? É isso que queremos para o nosso logotipo. Eu vou dizer que vamos dar uma olhada. Pronto, Juuchu, se eu for para este lado, olha, Não sei por que esse barulho vem. Jarro. De qualquer forma, essas são restrições Você pode colocar a restrição na parte inferior vamos fazer isso com este botão aqui. Eu vou copiar isso. Vou até aqui e vou usar uma ferramenta de moldura, vou escolher um telefone iPhone 16, alinhá-lo, colar esse cara e vou dizer, veja se o padrão para ele é superior e inferior. Mas digamos que você queira que isso esteja sempre presente aqui. Não vai funcionar. Telefone de tamanho diferente, desaparecido. O que posso dizer é você, meu amigo, embaixo e esquerdo. Agora, assista isso? Chuk chuk. Ele está preso no fundo. Andy? Veja isso. Esquerda e direita. Ainda não está no meio. Está ficando para a esquerda. Imagine se houvesse um aqui que não fosse apenas esquerda ou direita, mas esquerda e direita. Veja isso. Agora você está fixado lá embaixo. Olhe para nós. Estamos fazendo isso. Essas são restrições, e essa é a versão média. Pronto para a mais difícil? Vamos adicionar uma saída automática a toda essa bagunça. Desligue se você já estiver cheio. O que eu vou fazer é pegar, eu tenho mais alguns botões aqui embaixo, colocar você aqui em cima. Tenho vários objetos aqui para minha navegação. E, por padrão, vamos dar uma olhada, jarro. Os roxos funcionando. Os outros caras estão fazendo todo tipo de loucura. Assim como o logotipo, posso dizer que você. Eu vou arrumá-los primeiro Talvez os alinhe. Vou adicioná-los a uma moldura. Eu vou dizer que enquadre essa seleção. Por padrão, está indo para cima e para a esquerda, mas eu digo, eu quero que você seja o direito, amigo Agora temos essa navegação que contém muitas coisas que se movem e se conectam ao topo. Estamos navegando agora, mas você encontrará muitas instâncias, como esse botão de adição, há momentos em que você precisa que os grupos se concentrem em uma área. Tudo bem. Nível máximo de dificuldade. Você está pronto? Vou pegar minha ferramenta de moldura e vamos fazer uma navegação na parte superior. Isso está ficando difícil. Provavelmente não deveria incluí-lo. Vou incluí-lo para os poucos de vocês que eu gosto. Isso está indo bem. Se a mente estiver derretida, isso é bom As restrições lhe causarão problemas se você não souber que elas existem, especialmente quando você é novo usando o trabalho de outras pessoas Talvez você tenha que continuar e pensar : Tudo bem, o que está acontecendo Restrições, mesmo que você não saiba para onde elas vão, comece a destruí-las e eu tentarei Vou tentar da maneira certa. Vou tentar uma balança. Eles podem fornecer o resultado que você precisa, porque talvez o designer anterior e o modelo tenham mexido com eles para serem úteis, mas isso não está ajudando você Eu desenhei uma navegação por padrão, porque a desenhei sobre meu logotipo. Vou nomear as coisas, meu logotipo e meus círculos. Há uma moldura aqui, eles estão todos dentro. Talvez você tenha que arrastar o seu se não trabalhar, vou preenchê-lo. Eu vou embora. Na verdade, vou usar minhas cores. Eu vou usar esse. Não, isso é feio. Eu vou escolher aquela. Meu logotipo não pode ser visto, então vou clicar no logotipo. Essa não é a parte difícil. Isso é uma bagunça. O roxo não pode ser vermelho. Então, com seu selecionado. Tudo nessa moldura, tem todas as cores selecionadas que eu tenho. Eu quero mudar o roxo, por favor, para branco. Vou movê-lo para que caiba melhor. Eu quero que vocês acabem um pouco. Vamos dar uma olhada. Por padrão, essa navegação é muito legal. Se eu pegar e fizer o que temos em um telefone, vamos fazer uma versão para tablet. Digamos que UR iPad Mini. Se eu colar isso e precisar diminuí-lo agora para esse outro trabalho, você pode ver, olhe para nós. Fizemos coisas. Fizemos uma navegação que pode ser usada em páginas e escalas diferentes. Tudo fica na posição certa, muito prático. Esse é o nível máximo de dificuldade. Não, não é. Há um nível extra difícil. Se aprendermos saídas automáticas. Eles funcionarão? Oh, não, há dois níveis extras difíceis. Uma é que isso pode muito bem ser uma saída automática. Isso não vai mudar muito, exceto que eu posso fazer coisas legais onde posso entrar nela e movê-las de um lado para o outro. Ok, então os layouts de pedidos são úteis dessa forma. Eu posso brincar com o preenchimento muito mais facilidade, clicar em desligar, clicar duas vezes novamente para obter apenas esse grupo desses caras e posso dizer que vocês têm uma diferença de oito Eles se arrumam. O nível supermáximo é esse. O que acontece quando eu pego a parte externa disso? Você pode ver Juke? Você fica tipo, não acabamos de tornar isso responsivo? Tornamos isso e tudo dentro dele responsivo, pois colocamos as restrições certas , então essa coisa funciona Mas não mexemos com o exterior. O que vamos fazer é unir tudo. Você está pronto? Hora de derreter o cérebro. Aprendemos o que aprendemos , certo, também aprendemos. Aprendemos aqui, aprendemos a torto e a direito. Está bem? Onde isso se estende para os dois lados. Há o último, que é esse cara. Em vez de estar no canto superior esquerdo, o que é por padrão e não funciona, o canto superior está bem. Eu quero que a esquerda e a direita sejam escaláveis. Isso significa que essa navegação será escalada para a principal, que é minha página de recursos. Vamos dar uma olhada em gancho. É como o início, em que meus círculos estão grudados na parte superior e direita da moldura principal, que é o A navegação para seu paráquadro é escalar. Fizemos algumas coisas diferentes aqui. Eu sei que é confuso, cara. Estou tentando. Uh, vai ser um pouco de prática. Faremos isso novamente no curso. Quero colocar todas as restrições em um único vídeo. Se a única coisa que você tira é que existem restrições e que você pode mexer Às vezes, isso é tudo que você precisa. Eu faço isso às vezes. Eu abri o documento de alguém fico tipo, Oh, o que há de errado com essa coisa? Eu apenas clico nas coisas, descubro, começo a mudar as restrições e tento entender, tipo, tudo bem, isso faz sentido tipo, tudo bem, isso Tudo bem. Estava errado e agora eu o consertei. Isso foi útil? Espero que sim. Te vejo no próximo vídeo. Vamos facilitar as coisas. Na verdade, talvez outro exemplo seja útil. Sim. Vamos fazer outro exemplo. 66. Combinando quadros aninhados e restrições de layout automático no Figma: Olá. Ei, vamos fazer outro exemplo de restrições apenas para colocá-las lá e eu vou te mostrar um caso de uso diferente Além disso, vamos incluir um layout automático para que possamos praticá-lo também. Nós com esses. O legal deles é a aparência, eles se arrastam e se movem Eu posso pegar um desses caras, ir para o meu dispositivo móvel, colá-lo e decidir: Tudo bem, ele precisa ter um tamanho diferente aqui, e o texto pode ser alterado Aqui está. Como fizemos no último exemplo. Mas agora é só mais um exemplo. Vamos praticar. Vamos começar. Tudo bem. Vamos reconstruir uma versão fácil deles Eles são um pouco mais complicados responder Então, vamos fazer algo simples, apenas como um bom exemplo. Vou usar o Shift G para ligar minhas grades. Você pode rolar para baixo e descobrir que , se eu clicar nos recursos, você deve encontrar suas grades lá embaixo Você pode ligar e desligar o globo ocular. Vou pegar minha ferramenta de moldura em vez de um retângulo porque originalmente esses caras eram o que eram? Ah. Eram molduras. É sempre melhor quando você cria algo propositalmente com layouts automáticos e restrições de aninhamento, é que você Tentar reutilizar algo sempre acaba me mordendo na bunda Vou criar uma moldura. Terá quatro colunas de diâmetro. Vou dar a ele uma cor de preenchimento a partir das minhas amostras. Vamos escolher esse. Não, vamos escolher algo mais leve. Vou desativar minhas grades Shift G. Ok, então o que eu quero fazer é adicionar meu texto no canto inferior direito, como você viu no início Vou pegar minha ferramenta de moldura. Vou colocar uma moldura dentro de uma moldura. Eles chamam isso de aninhamento. Você não precisa se lembrar, mas essa moldura está dentro desta. Vou dar a ele uma cor de preenchimento preta. Eu vou. Eu quero alinhar a parte inferior. Lá. Sabemos que, se redimensionarmos este para nosso dispositivo móvel, ele realmente não funcionará, porque se eu selecionar neste quadro, ele estará dizendo superior e esquerdo Eu não quero que seja superior e esquerdo. Eu quero que esteja à direita e que funcione. Pegue a moldura principal e ela funciona, mas não funciona na parte inferior. Oh, eu clico nesse cara. Eu posso dizer inferior e direita. Aí está. Agora eu posso redimensionar essa coisa Eu tenho minha pequena caixa de texto aqui ou uma pequena barra na qual vou colocar meu texto dentro. Vamos fazer isso. Vamos colocar o texto dentro dela. Pegue o Tipo dois, e vamos clicar dentro desse cara e vamos até. Não consigo me lembrar das palavras que eu uso. Isso vai copiar o RFID e eu vou colocá-lo na minha caixa de texto que Se você não usar sua caixa de texto, ela desaparecerá, o que é útil Digite dois, clique em Colar, vou diminuir minha fonte. Meu 16, e eu vou pegar minha ferramenta de movimento e movê-la. Não, clique, pegue a caixa inteira e eu vou colocá-la em um marcador. Há um atalho para colocar marcadores. Se você colocá-lo em um hífen em um espaço, ele automaticamente cria um marcador, ou você pode selecioná-lo e entrar nas opções extras de tipografia e dizer: Eu quero que seja Eu tenho isso. Eu quero que seja tão longe deste site, eu vou usar minha flecha. É aqui que você fica tipo, tudo bem, deveríamos estar alinhando assim? Posso fazer com que ele pule para o centro? É aí que uma saída automática é muito útil. Aquele membro do exercício com botões fez a caixa ao redor dele. O botão se expande e contrai e podemos jogar com o preenchimento. Vamos fazer isso. O pai dessa caixa de texto, vamos dar um nome a ela. Vamos chamar isso de bloco de texto. OK. Tem minha mensagem dentro dela. Essa coisa aqui é preta, e eu quero apenas mudá-la para uma moldura automática. Isso envolve meu texto. Tem acolchoamento. Apenas certifique-se de que continue funcionando. Continue verificando à medida que avança. Ainda funciona? Se não tiver, verifique novamente. Eu tenho a moldura, não o texto selecionado. Quero que a moldura seja selecionada. Quero ter certeza de que, neste caso, quero que esteja na direita e na parte inferior. Isso é perfeito. O legal disso é que, porque é uma moldura automática, é fácil de abraçar Ok, se eu mudar isso para o meu outro, vamos diminuir o zoom. Vamos pegar outro, Shift G da minha moldura, pegar você. Eu tenho um segundo. Eu não quero mudar esse também. Qual é o nosso outro texto? Eu não consigo me lembrar. Vou consertar isso daqui a pouco. Meu cadeado ainda está quebrado. Você vai, ele é redimensionado porque é uma moldura automática e dizem que se abraça Se não funcionar. Se está apenas mudando e pode-se dizer que corrige, para que, quando eu o mudo, ele não mude. Isso pode ser o que você quer. Você será consertado. Você sabe que tem um certo tamanho de personagem e quer que todos tenham a mesma aparência. Isso é o que você quer. Isso traz um bom ponto. Isso agora está no centro disso. O centro. Quero escrever um alinhamento e encontrar o que eu queria aqui. O que eu quero dizer é que esse pai aqui, tudo dentro dele, lembre-se do alinhamento, o padrão é centralizado. Eu posso ir para a direita. Às vezes, o padrão é o correto, tanto para a direita quanto correto , porque está inclinado para um lado Eu tento fazer coisas automáticas. Eu vou dizer que esse pai, tudo dentro deles está alinhado com este site aqui Não importa se você disse isso para abraçar. Se eu for abraçar, está à direita, mas isso realmente não importa, porque é abraço. Sem espaçamento ao redor Então, vou dizer centro e quero que tenha uma largura fixa. Quão inteligente é essa? Este é 215. Então eu vou dizer, Oh, não, isso não foi. Às vezes fico confuso com o posicionamento e a largura. Isso acontece com todo mundo? Aí está a largura, 177. Então eu vou dizer que são 177. É 177? Eu vou alinhá-lo. E devemos estar prontos para ir, exceto que eu quero que esteja alinhado Uma coisa que você pode achar complicada é que, se você tiver uma fonte, ela tente colocá-la no meio Se você tem uma fonte estranha ou um marcador estranho, às vezes os marcadores podem ser Algumas fontes acabam tendo uma lacuna muito grande abaixo dessa altura X e acima desses ascendentes, dessas letras maiúsculas, talvez você precise brincar com o preenchimento da Talvez você deva dizer que, na verdade, no momento, está na parte superior e inferior 11. Você pode ter que entrar aqui e dizer, certo, isso o divide e dizer, certo, topo tem apenas dez e o inferior é 15 porque você precisa fazer um preenchimento sofisticado para fazer com que a fonte pareça Percebi isso em alguns dos projetos da classe. As pessoas estavam preocupadas com isso. Tudo bem. A última coisa que vou fazer é ver você, vou fazer outro. Eu vou pegar todas essas coisas super rápido. Oh, eu vou pausá-lo aqui porque esse é um atalho avançado, apenas um atalho legal Estou copiando isso aqui e se eu copiar tudo isso, o que acontece? Colar aparece como o estilo daquele original. Você tem que mudar o tamanho, é um pouco de tinta. Em vez de apenas colar normalmente, ele funciona em todos os programas, não apenas no Figma, no Word Docs, no Google Docs Se você pressionar a pasta Command Shift ou a pasta Control Shift, ela será colada apenas como material bruto e corresponderá ao estilo que você tem. Também descobri que ter uma largura fixa está me causando problemas aqui. Eu só vou dizer rastreável. Lá vamos nós. Corrigido. A última coisa que vou fazer é adicionar algumas imagens a esses quadros. Vou clicar na cor aqui e vou para a cor personalizada. Se tem um estilo como você chama aqui, ele não quer que você faça coisas. Então eu clico nisso, você fica tipo, onde está minha mudança para a imagem? Eu posso simplesmente ir para o personalizado e depois ir para a imagem. Então eu vou fazer isso. Vou fazer o upload para o computador. Eu vou escolher um desses caras. Esse é o que eu quero. Eu vou adicioná-los. Aí está. Adicionando imagens. Vamos fazer o modo de velocidade para esses dois. Então eu coloquei minhas imagens e que fica super incrível é quando eu as pego, vou até meu dispositivo móvel e digo: vou colá-las aqui, colocá-las na moldura e dizer: Tudo bem, vamos lá Eu os tenho aqui. Eu posso redimensioná-los para esse dispositivo diferente, tudo é redimensionado As imagens são configuradas para serem preenchidas por padrão. Esses caras têm suas restrições no canto inferior direito, e eu fiz algumas coisas sofisticadas e disse: Tudo bem, todo esse quadro aqui está configurado Eu sei que isso pode ser um pouco confuso. O legal do layout automático é que eu posso ajustar o tamanho da fonte. Vamos reduzir o tamanho da fonte ou aumentar para o celular, e a moldura principal ao redor, tentarei abraçá-la porque o layout automático gosta de abraçar É um abraço. Espero que tenha sido útil ver alguns outros casos de uso de restrições e combinarmos lá um layout automático, apenas para que possamos fazer o texto Mesmo que seja uma saída automática, talvez combinar isso seja demais, basta usar as restrições Você só tem uma caixa de largura fixa. Não vamos nos esticar e ficar maiores. Basta usar os layouts automáticos para talvez os botões onde talvez faça um pouco mais de sentido e separe De qualquer forma, espero que tenha sido útil. Vamos para o próximo vídeo. 67. Projeto do curso 13 - Design responsivo: Projeto de classe número 131010. Dum dum, dum Essa é uma pergunta complicada. Os laustritos automotivos são bastante complicados. Portanto, há um projeto de classe para que você possa praticar. Basicamente, o que já abordamos na aula é a navegação no desktop e alguns cartões de recursos que eu quero que você crie. Para a navegação no desktop, quero que você crie um novo Nav que contenha esses recursos Vamos dar uma olhada. Eu quero que você vá para o desktop Hi Fi. O que eu fiz foi duplicar a página inicial original e chamá-la Então eu construí um novo Navel na parte superior e algumas novas cartas especiais Só que eu não sei, nós nos esforçamos um pouco nisso. Vou deixar isso aí. Quero sua melhor navegação. O principal é garantir que ele faça isso, que ele se contorça e se Também seja ótimo. Eu não defini isso e, de qualquer forma, não consigo verificar se isso é uma propaganda, então você pode fazer essas coisas boas Você também verá que um dos ícones ou um dos textos é na verdade um ícone. Esse é o cartão. Eu escrevi isso nos projetos da aula, criei uma lista de texto para nosso cartão de navegação, recursos domésticos e conta e apenas certifique-se de que o cartão seja um ícone Você pode desenhá-lo. Você pode obtê-lo em um site de ícones gratuito. Você pode obtê-lo de um plugin, não me importo. Eu quero que você crie o Nav para o celular também. Isso vai ser um pouco diferente e muito fácil, porque vamos usar o sistema de alta fidelidade móvel e recriar uma navegação bem diferente Basta adicionar as linhas listradas, o menu de hambúrgueres, o sanduíche Nav , porque não conseguimos encaixar É por isso que temos esses garotinhos. Basta colocar o logotipo e a barra de navegação em faixas na parte superior de uma caixa Ele também precisa ser responsivo. O meu não é. Mas o seu precisa ser. Essa pequena linha estroboscópica precisa ficar na parte superior e na direita Em seguida, os cartões de recursos. Eles são apenas copiar e colar um do outro para que você possa redimensioná-los. Eu quero que os móveis façam isso. Onde você pode alterar o tamanho deles, movê-los e eles se ajustam da mesma forma na área de trabalho aqui. Faça novos. Eles não precisam se parecer exatamente com os meus. Eu quero algo no fundo, aqui, para que faça essas coisas fofas e macias Uma coisa com a qual você pode ter problemas é se eu copiar isso porque primeiro o design no celular ou no desktop, não me importo, copio. Se eu for para o Wi-Fi Hi Fi e, na verdade, for para o Hi Fi móvel e colar nesta página aqui. Você fica tipo, A, eu vou fazer isso mudar. Não está se movendo. Por que não? Eu vejo o nome que é uma oferta. Na verdade, não está dentro do checkout. Eu posso tentar arrastá-lo para dentro. Isso funcionou? Entrou. Às vezes, isso não acontece. O que você pode fazer é recortar, clicar na finalização da compra e depois colar e dá uma dica de que figma quer aqui e depois colar e dá uma dica de que figma quer Então você pode começar a mexer com isso. Às vezes, isso pode fazer você tentar entrar no lugar certo. Cortar e colar é provavelmente a maneira mais fácil de fazer isso. Você pode arrastá-lo nas camadas, mas essas camadas estão ficando bem grandes agora, então é um pouco mais difícil. Então é isso e, quando terminar, faça uma captura de tela, faça upload da sua página inicial no seu desktop e no seu celular e faça o upload para a seção do projeto e também compartilhe nas redes sociais Estamos em um estágio em que todo mundo está começando a parecer um pouco diferente. Eu estarei interessado em ver o que você fez. Você pode obter feedback de outras pessoas. Eu posso dar feedback. Aí está. Crie uma navegação e um cartão de recursos. Faça com que tudo seja responsivo e bom. Tudo bem É uma pergunta complicada . Está tudo bem. Talvez você precise voltar e assistir novamente aos vídeos, confira os comentários Se houver outros alunos, eles podem ajudá-lo ou podem ter o mesmo problema e ter respostas. Então, sim, aproveite a prática. Esse é o Projeto de Classe 13. Te vejo no próximo vídeo. Depois de fazer sua lição de casa, não sua lição de casa, 68. Efeitos legais de sombra projetada e sombra projetada interior no Figma: Olá. É hora da sombra projetada. Vamos adicionar sombras projetadas aos botões e vou mostrar como adicionar sombras duplas Eu vou te mostrar como se transformar em estilos, e vou te mostrar a maneira super incrível, minha maneira favorita de fazer sombras É uma espécie de preferência pessoal. Você pode fazer isso para digitar A, obviamente, para removê-lo quando estiver no topo das imagens. Também criaremos sombras internas para tipo de opção de tipo de interface para dar a elas um pouco de profundidade Tudo bem. Vamos falar sobre sombras projetadas. Tudo bem. Então, meu celular Hi Fi. Se você ainda não o fez, mudei o botão de compra do desktop logo aqui. Se você não o copiou , nós o fizemos mais cedo. Vou usar a tecla 2 para ampliar a coisa selecionada e recuar um pouco. E vou até os efeitos são fáceis, rolar, rolar, rolar, selecionar as coisas e encontrar o painel de efeitos. Let's plus e drop shadow é o padrão. Há um monte de outros. Vamos começar com uma sombra projetada e uma sombra projetada muito bonita. Essa é uma preferência pessoal, mas eu criei muitas sombras. Eu gosto de X em zero. X é o quão longe ele vai para a esquerda e Y é o quão longe ele vai para baixo. Eu vou fazer X zero e dois acaba ficando bonito e depois brincando com um desfoque, geralmente dois também é bom Você também precisa ver uma visão ampliada. Se as pessoas notarem sua sombra projetada, você tem muita sombra projetada. Você quer que seja sutil, eu os acho muito legais. Porém, o legal das sombras projetadas, ou de qualquer efeito, é que, com as selecionadas, vou ampliar um pouco É possível adicionar mais de um. Os efeitos aqui, eu posso clicar em mais de novo, geralmente o que eu gosto é um que é bem apertado, como o primeiro que fizemos, e depois esse outro mais distante e mais embaçado Aumente a desfocagem. Você pode ver que é como uma combinação com ela selecionada aqui. Vamos desligar um deles. Você pode ver esse borrão de preenchimento. Também depende muito do tamanho do objeto, essa não é uma regra rígida e rápida, mas comece com 02 e depois adicione uma desfocada. Esse é meu dropsh favorito Outras configurações no Drop Shadows, caso você esteja interessado Obviamente, o desfoque é o quão embaçado é. O spread é interessante. Vamos apenas arrastá-lo para cima. Você pode pegar o ícone e arrastá-lo para cima. Ainda é um borrão de dois, mas começa mais longe. Isso pode ficar legal quando você tem isso e está bem longe, parece que está mais longe da página, e teremos que deixá-lo muito mais desfocado e provavelmente pegar as cores em 25% Você também pode arrastar a porcentagem apenas para fazer com que pareça que está flutuando. Gosto muito disso. Eu não uso muito spread. Aí está. Outra coisa legal sobre efeitos é que você pode copiá-los. Há uma área estranha aqui. Você pode ver se Hova está apenas nesta área estranha, veja, há algumas pequenas linhas Eu posso clicar nele uma vez, segurar a tecla Shift , pegá-lo, copiá-lo e Tudo o que vou usar para esse outro botão no meu desktop Hi Fi, e vou usá-lo para esse cara aqui também. Vou selecionar esse botão, clicar duas vezes, entrar e clicar em colar no meu teclado. Você vê que eu posso trazê-lo junto. Você também pode configurá-lo para um estilo, que é lick, esse cara Aqui estão meus efeitos. Eu posso dizer estilo. Posso dizer mais, e isso produzirá o efeito que eu criei, e vou dar um nome ao meu estilo. Agora, é um estilo. Se eu não tiver nada selecionado, clique em segundo plano. Você pode ver que eu tenho minhas fontes, minhas cores e olha aqui embaixo , estilo super incrível. Você pode ajustá-lo. O legal disso é que tudo em que é aplicado, você pode alterá-lo aqui. Vamos aplicá-lo a. Não vai funcionar com este, não tem preenchimento. Mas vamos aplicá-lo de qualquer maneira. Vou ver meus estilos aqui. Eu vou dizer um estilo super incrível. Uh, vai funcionar bem. Lá vai. Obviamente, sombras suspensas australianas são ótimas quando você tem texto Vou copiar isso acima de uma imagem. Está bem? Isso realmente funciona bem, mas eu ***** ficaria melhor com um efeito Eu vou para. Não, vou usar meus estilos e escolher um estilo super incrível. Novamente, mínimo, mas realmente faz com que se destaque do fundo. Vamos dar uma olhada nas sombras internas. Sombras internas podem ser realmente incríveis, especialmente com itens de interface de usuário, ok? Vamos fazer uma pequena troca. Então, vou pegar minha ferramenta de moldura. Eu vou fazer uma pequena pílula. Vou fazer o meu um pouco grande para que todos possam vê-lo. Vou dar uma olhada nas minhas amostras. Vou dar, eu os chamo de amostras, mas nossos estilos. Vou usar meu sotaque 300, vou pegar uma marca de cantos e de cantos Este aqui, se você agarrá-lo arrastá-lo e arrastá-lo para longe, você precisa dele. Fazemos isso cedo? Acho que sim. Continue até atingir o limite máximo. Você pode ir para 1.000 e, eventualmente, ele ficará completamente arredondado nos cantos. Essa é uma delas. Eu quero circular. Vou usar a ferramenta O para a elipse. Desenhe uma pequena opção aqui, como uma pequena chave seletora. Escolha uma cor melhor. Excelente. E aqui, nesta pílula que eu escolhi, posso dizer que você tem um efeito de onde está a sombra interna Sombras internas são legais para adicionar um pouco de profundidade a essas coisas e, como antes, o padrão aqui é bom O desfoque provavelmente está um pouco alto. Você pode usar suas setas, lembre-se, nesses campos para baixo, para cima. Este aqui, provavelmente não tão distante, e você pode dobrar, adicionar outro, e faremos a mesma coisa em uma sombra. Mas vamos continuar. É interessante saber que você pode ser negativo. Mais quatro, podemos dar negativo para que desça até o fundo. Talvez eu tenha um pouco menor lá embaixo. Está parecendo legal? Não sei, Dan. Essa aqui, eu vou aplicar meu estilo super incrível também. Você pode ver que pode adicionar um pouco de profundidade a essas coisas. Botão gigante. Você tem a ideia nas sombras Não é difícil, mas agora você pode usar o negativo e adicionar mais de um e transformá-los em estilos. Ou você pode copiá-los e colá-los. Lembre-se, é meio estranho copiá-los e colá-los. Existe uma espécie de terra de ninguém que você pode selecionar e simplesmente pressionar Command C, Command B. Tudo bem, então esse é o super mega incrível tutorial de sombras projetadas de Dan . Vamos para o próximo vídeo. 69. Camada de desfoque, desfoque de fundo e desfoque de imagem no Figma: Oi, pessoal. Neste vídeo, vamos desfocar as coisas. Vamos fazer esse efeito de vidro em que as coisas por trás desse modelo pop-up ficam todas embaçadas. Você consegue ver embaçado Também faremos isso para camadas, onde essa imagem aqui começa bem onde essa imagem aqui começa nítida e potencialmente perturbadora Vou desfocá-lo, movê-lo para o fundo, escurecê-lo para que eu possa colocar coisas por cima e não distrair. Coisas azuis. Para começar, vamos dar uma olhada no fundo azul. Essa é a mais divertida, a melhor. Estou na minha página de confirmação no meu celular Hi Fi. Eu selecionei a moldura, vou adicionar uma imagem a ela, então vou me livrar do preenchimento, e vou adicionar e vou adicionar o preenchimento novamente e alterá-lo para imagem. Vou fazer o upload de uma imagem do meu computador e tenho uma chamada mapa. Então, a página de confirmação vai mostrar Olá, este é o seu endereço, e é aqui que estamos entregando ou é aqui que estamos baseados. Esta é minha área local, e eu vou instalá-la. Perfeito. desfocar partes dela e fazer isso com o objeto em cima Vou pegar minha ferramenta de moldura. Este será o nosso modelo pop-up que aparece acima, ele vai ter algo escrito nele, então queremos ampliar o plano de fundo para que possamos lê-lo. Eu vou enchê-lo. E vamos adicionar o efeito. É chamado de desfoque de fundo e vai desfocar tudo o que está por trás dele O problema é que você ainda não consegue ver o que está por trás disso. Então você vai diminuir a opacidade disso. A parte difícil de lembrar é que existem duas maneiras de diminuir a Você pode diminuir a opacidade dessa aparência durante todo o processo, funciona. Veja isso. Se eu arrastá-lo para baixo, posso ver através dele. Mas o estranho disso é que isso diminuirá a opacidade do preenchimento, do traçado e de tudo o que há nele, incluindo Isso não é o que eu quero. O que eu quero fazer é diminuir a opacidade da cor de preenchimento Eu escolhi branco, mas se eu abaixar isso, você pode borrar Você tem que decidir o quão opaco ou transparente você quer que isso seja Está bem? Basicamente, queremos que seja apenas o tipo de efeito legal de um efeito de vidro que você pode ver através dele. Podemos adicionar texto na parte superior. Deixe-me começar adicionando meu texto. Aí está. Para que pareça mais um modelo pop-up, ele provavelmente precisa de cantos arredondados, você não precisa de cantos arredondados, vou colocar oito, e pode ser bom com um pouco de sombra projetada, para que possamos combinar nosso efeito. Portanto, temos um plano de fundo de efeitos. Vamos adicionar um pouco de sombra projetada também. Lembre-se da regra superespecial de dois dois e talvez de adicionar outra para a versão mais vibrante. Vamos para oito. Nós gostamos? Provavelmente está um pouco forte no momento, mas você entendeu, você pode desfocar as coisas por trás dele, é um efeito de vidro frio Vamos desligar esse programa. Tudo bem, meu primeiro. Isso funciona. A próxima que eu quero mostrar é a camada azul. Você pode desfocar qualquer coisa. Você pode pegar essa imagem e dizer efeito e simplesmente dizer, eu quero que a camada que eu selecionei fique desfocada Não acho isso particularmente útil, e o que acho útil para usá-lo é desfocar uma imagem de fundo que pode ser um pouco forte Fizemos isso mais cedo, derrubando os pretos ou apagando as luzes, desculpe. Agora, será para esse plano de fundo. Eu poderia colocar essa imagem e dizer: Al é meu filme. Eu quero mudar isso para uma imagem. Eu vou te mostrar como fazer isso errado primeiro. É a maneira natural de fazer. Você diz: “Tudo bem, eu tenho uma imagem”. Eu quero que fique embaçado. Sabe, eu quero que isso seja mais abstrato. É bem geométrico e eu quero remover um pouco da nitidez Então eu vou entrar em vigor. Eu vou para o laboratório e você fica tipo, Oh, legal. Eu vou pegar isso, ok? E o único problema com isso é que se eu disser: Tudo bem, vou pegar meu menu agora, ele vai ficar dentro dessa moldura que tem uma imagem que tem um efeito aplicado a ela Borracha. Está bem? Ele faz isso, faz tudo no quadro. Então, o que vamos fazer é fazer isso talvez de uma maneira diferente, não errada, não certa, apenas de uma maneira diferente. Vou trazer uma imagem. Então, Command Shift K, eu uso um pequeno menu suspenso aqui no painel de formas, e eu vou dizer que você entra. Vou clicar e arrastá-lo, então não quero clicar no plano de fundo porque ele o aplicará a esse quadro. Tudo o que vou fazer é torná-lo realmente grande. Vai pular da página, provavelmente não vai pular da página para você. O que você precisa fazer é ter certeza de que está na página certa. Eu tenho minha página de recursos lá. Eu quero que você esteja lá, o que pode ser complicado, não vou mentir. Estamos lotados. Vou plantar porque quero que seja em um determinado lugar. Eu quero isso assim, eu quero isso. Lá vamos nós. Agora que é uma imagem dentro da moldura, posso selecionar a imagem e dizer: quero que o efeito seja aplicado a ela. Você vai ser uma gravadora e eu posso aumentá-la o quanto eu quiser Agora, quando pego meu menu, copio, colo, estou copiando daqui e lembro que estou clicando no nome do quadro a ser acessado para que ele saiba onde colocá-lo. Olhe para nós. Outras coisas que eu gosto de fazer com esse desfoque de camada são, bem, coisas que eu não faço e que eu deveria mostrar a vocês Com a imagem selecionada, aí está a imagem. Às vezes, acho mais fácil selecionar coisas nas camadas. Sim, clique duas vezes. Você pode encontrar a mesma coisa. Pode ser um pouco estranho manter pressionada a tecla de comando ou controle para clicar na imagem Isso também funciona. Ok, no meu desfoque de camada, há um progressivo Significa apenas que o progressista está onde? Como minha imagem é muito grande, a progressão está aqui por algum motivo Posso arrastá-lo até aqui para torná-lo um pouco mais útil visualmente. O que você notará é que você pode ver que a parte inferior aqui vamos aumentar, está embaçada e a parte superior está definida como dois, zero, para que você possa decidir o quanto deseja que fique Esse é um efeito interessante. Não achei um uso muito bom para isso. Tenho certeza de que existem muitos deles e você pode invertê-los Consegue ver o que estou fazendo? Eu gosto disso? Talvez. Volte para o uniforme. Vou abaixá-lo um pouco. É um pouco forte. O que eu também gosto de fazer é que fizemos isso em um vídeo anterior, apenas uma pequena recapitulação adicional Essa imagem está aqui? Eu quero escurecê-lo um pouco O meu é bem escuro, o texto aparecerá em cima dele. Não vai ser muito perturbador. Mas lembre-se, você pode selecionar nesta imagem. Eu vou entrar nisso e você pode diminuir a exposição. Dessa imagem, só para escurecê-la novamente. E lembre-se de brincar com os destaques, arrastá-los para fora, meu não tem muitos ou nenhum destaque , então não estou preocupado com isso Outra maneira de fazer isso, porém, você verá. Eu o uso muito. Vou colocar isso de volta em zero e isso de volta em zero e sair disso. O que você pode fazer é ter mais de um preenchimento em uma camada. Fizemos mais de um efeito. Você pode fazer mais de um preenchimento. Eu tenho minha imagem e vou dizer que tenho dois preenchimentos por padrão, ela realmente faz o que eu quero Ele adiciona um preenchimento preto, mas também reduz a transparência ou a opacidade para 20% Eu posso aumentá-lo Obviamente, se for 100%, é totalmente preto, mas você pode simplesmente fazer isso. É quase exatamente como usar a exposição. a razão pela qual eu gostaria de fazer isso Às vezes, a razão pela qual eu gostaria de fazer isso é que, se estou fazendo várias imagens, posso ser consistente, enquanto brincar com a exposição é olhar para ela, com a língua para fora, com a cabeça, **** de lado De qualquer forma, é o que eu faço. Eu fico tipo, sim, o que havia nele? Sim. Ok, onde está isso, eu posso simplesmente copiar isso e fazer com que sejam 30%, para que sejam todos consistentes. Mas isso realmente não importa. Eu gosto disso para planos de fundo. Apague-os um pouco. Agora, quando começamos a adicionar nossos objetos, é um fundo meio legal, mas não está saindo da frente ou do meu conteúdo. Tudo bem, esses são alguns borrões. Nós temos o que eles eram? Eles eram azuis em camadas, este, e então tivemos o azul de fundo provavelmente mais frio, o tipo de efeito de vidro Certo. É isso mesmo. Oh, é quase isso. Há um novo recurso aqui. Eu não ia cobrir isso, mas fiquei tipo, Oh, isso seria legal para isso. Há outros efeitos aqui. Eu te dei o básico, você pode explorar. Alguma outra que apareça? O que acabou de aparecer é esse aqui, ruído. Por padrão, é um pouco difícil, mas você pode ver como, se eu reduzir isso, a densidade, aumentar a densidade, e talvez não seja tão preto, mais claro. Eu vou usar o efeito de vidro, aquele tipo de efeito fosco de janela de banheiro Então, há um pouco de brincadeira. Ainda não tenho um número mágico para isso. É só se arrastar, com a língua para fora, a cabeça inclinada e decidir o que isso aumenta Isso não é verdade? Parece mais vidro? Isso não acontece. Mas agora você sabe como usar o ruído. Obviamente, você também pode fazer isso com imagens. Mas, no momento, é isso. Desfoque feito. Te vejo no próximo vídeo. 70. Projeto do curso 14 - Efeitos: Equipe, hora do projeto de classe. Fácil e divertido. Eu só quero que você pratique os efeitos que aprendemos nos últimos vídeos. Coloque a sombra em um desfoque de camada de sombra e desfoque de fundo. Não me importo como você os implementa. O que eu fiz foi o que fizemos no tutorial, ou seja, o desfoque do fundo Eu fiz o meu na minha página inicial no meu Hi Fi. Eu passei e fiz espécie de desfoque difuso na camada de fundo para essa coisa para essa Eu ainda queria que fosse bem leve. Foi o que eu fiz, e fiz minhas sombras. E aqui eu acabei de colocar minha interface em uma sombra aqui Depende de você para onde vai. Também fiz isso no texto e quero que você faça uma captura de tela que inclua tudo Acabei com duas capturas de tela para a minha. Você pode combinar todos os seus em um. Então tem o meu e tem o meu. Eu adoraria ver isso nas redes sociais também. Faça o upload para os projetos, obviamente, mas também compartilhe e marque a missa nas redes sociais ou em nosso grupo no Facebook, grupo no LinkedIn Adoro ver o que você faz. Tudo bem. Divirta-se fazendo efeitos infigma. Nos vemos no próximo vídeo. 71. O que são componentes e instâncias no Figma: Um. Vamos falar sobre componentes e instâncias. Basicamente, eles permitem que você crie um componente mestre que controla muitos outros. Veja isso. Posso dizer que quero mais acolchoamento na parte superior e inferior ou menos, e todas elas mudam O bom deles é que você pode ver que pode manter suas instâncias desse componente principal exclusivas. Essa tem sua própria cor, tem seu próprio texto, mas eu posso controlar coisas como, por exemplo, vamos analisar a espessura da fonte e fazer essas alterações. Eles são atualizados, mas mantêm sua exclusividade. Muito legal. Vamos começar. Vamos falar sobre componentes e instâncias. Tudo bem Vamos primeiro criar um componente principal. Vamos começar com nosso botão. Você pode usar qualquer coisa. Vou apenas copiar e colar aqui. Apenas mantenha-o separado. Ok, então o que queremos fazer é esse botão, passamos anos entendendo como queremos, queremos reutilizá-lo Mas queremos o controle, como você viu na introdução, de poder ajustar esse componente principal e todo o resto Então, primeiro de tudo, precisamos transformá-lo em um componente. Você faz isso na parte superior do painel de propriedades aqui. Você pode ver esses pequenos quatro diamantes aqui ou o atalho, que é a Opção de Comando K em Controle Holt K em um PC. Foi difícil revelar isso. Mas você clica aqui, nada acontece. Você é como se tivesse acontecido. Uma coisa que aconteceu é que em seu painel do Laos, vou ver aqui desfazer isso quando era um layout automático ou uma moldura, seja o que for Depois de alterá-lo, ele ganha esse pequeno recurso de diamante. Você fica tipo, tudo bem, o que você faz agora? Bem, podemos fazer uma cópia disso. Posso dizer que quero outro. O que acontece é que você consegue ver o ícone neste? É uma cópia, mas recebe um único diamante. Esse é o componente principal, essa é a instância desse componente principal, pai-filho. Agora, por que isso é útil? Eu vou ter uma, duas, três versões. Na verdade, vamos ter três versões. Min e três instâncias disso. O legal disso é que veja isso. Quando eu mudo o principal, todos eles mudam. Isso é muito útil. Talvez eu decida que o preenchimento precisa ser 32 e 16 Você notará que os 32 não fizeram muita coisa porque quem se lembra? Isso mesmo. Não é abraço Vou mudar isso para aproveitar o que é legal , porque mudei aquela que talvez tenha esquecido, como fiz lá Todas as crianças ou instâncias desse componente principal também mudam O que é realmente interessante é que essas instâncias podem ser exclusivas Digamos que este queira ter uma cor diferente. Então eu vou dizer que você não é mais. Oh, há um preenchimento por trás disso. Não, são as cores selecionadas. Aí está o preenchimento. Me mostrando o texto em branco. Aqui está meu preenchimento. Posso dizer, na verdade, que quero que esse cara seja minha cor primária, esse aqui seja minha cor de destaque, e vou deixar essa cor normal Vou deixar essa minha cor secundária. O legal deles é que eles são únicos, mas olha, todos eles ainda têm esse controle principal. Eles podem ser bastante únicos. O mesmo com o texto. Temos que comprar agora. Receberemos nosso botão de compra. O cadeado idiota para gatos ainda está quebrado. Eles são únicos, mas ainda têm esse controle principal. Você pode entrar aqui e dizer, certo, esse cara aqui por algum motivo, porque ele está em uma página diferente e deve ter uma aparência diferente. Ele não pode ter nenhum raio de canto. Novamente, ainda podemos controlá-lo com os pais. Você pode decidir que esta aqui, na verdade, vamos fazer mais um tipo de mudança global. Então, eu quero mudar isso do título um. Vou quebrá-la porque quero usar uma versão light, e todas elas se tornam leves. Esse é o poder de usar um componente principal e ter instâncias. Outra vantagem é que isso é muito confuso, certo ? Tudo está aqui. Está bem? Posso acessar meu painel Ativos, que ainda não vimos, e ele deve ter meu botão na biblioteca. Não está aqui. Onde está? Os componentes são adicionados à biblioteca. Às vezes, há um bug. Espero que isso desapareça. Tenho que fechar a invenção e abri-la novamente. Você espera lá. Não é. Eles acabaram de mudar a interface do usuário. O que está dizendo está nesta biblioteca aqui, lá está lá. Aí está meu botão. Eu não gosto dessa nova forma de trabalhar. Eu simplesmente gosto dos mais listados aqui. É para quando você tem projetos realmente grandes, você precisa dizer na minha biblioteca para este arquivo: Ok, essa é a primeira página deste documento, onde está aqui? Essa é minha primeira página, então é por isso que está mostrando isso. Nessa página ou nesse documento de design, aqui estão todos os meus ativos. Você pode arrastar para fora. Vou voltar para esta página que estamos trabalhando e voltar aos meus ativos. Eu posso arrastar uma instância dessa forma. Não importa se você copia e cola ou arrasta para fora daqui, você está criando uma instância desse componente principal. Isso é útil quando você começa a criar bibliotecas e compartilhar com as pessoas Eles podem ir. Tudo bem, eu quero todos os ativos desta doca e eles serão listados aqui O que deveria ser um componente? Basicamente, na fase de projeto quando tudo é um pouco conceitual, você não precisa de componentes em instâncias Assim que você trancou alguma coisa, sim. Eles devem ser componentes. Como esse logotipo aqui, estamos felizes com ele. Eu vou dizer que você, meu amigo, vai ser um componente e vai acabar como um logotipo aqui. Tem um fundo branco , então você não pode realmente vê-lo. Mas isso significa que se eu for para outra página agora e disser, certo, estou no meu celular Hi Fi, em vez de ter que voltar ao documento, copiá-lo e colá-lo e não ter nenhuma conexão agora, posso acessar minha página de confirmação, acessar meus ativos e simplesmente pegar o logotipo e arrastá-lo para fora. É consistente. Vou adicionar um efeito. Na verdade, vou adicionar meu estilo que fiz antes. Super incrível. Ainda não funciona muito bem. Eu posso mudar a cor desta aqui para a cor da minha biblioteca. Fizemos algumas modificações no meu componente principal. Mas se eu voltar ao componente principal, esse é um bom truque. Como faço para voltar ao principal? Sei no meu painel Layers que estou trabalhando nessa instância. É o pequeno diamante. Como faço para encontrá-lo? Você pode clicar com o botão direito do mouse e dizer, componente principal, vá para o componente principal. Eu volto para a minha página que o contém e posso dizer que, na verdade, estou ausente com o tamanho deles Tenho que usar a ferramenta K. Eu vou torná-lo maior. Você provavelmente não será capaz de dizer isso, vamos fazer outra coisa. Vamos destruí-lo. Não, eu disse ao Shift. Vamos torná-lo maior, muito maior. O que fazemos se voltarmos ao Hi Fi móvel , veja, eu fiquei muito grande. Incrível. Outro truque para isso é que, digamos que você tenha feito alguns ajustes e queira voltar ao original, eu quero usá-lo novamente, mas não quero que todas as coisas que eu fiz roxo e o drop possa ir para redefinir a instância, volta para qualquer que seja o componente principal. Você também pode decidir que, na verdade, nesta página aqui, você passou anos fazendo a coisa certa e gostou desse jeito. É do tamanho certo. Você pode ir para o outro lado. Você pode dizer, na verdade, que eu quero que esse seja o componente principal agora, não o componente principal, mas eu quero enviar todas as alterações para esse componente principal. Você pode ver aqui que diz empurrar as alterações para o componente principal. Se eu voltar para o Hi Fi do desktop, ele terá essas novas configurações. Eu tenho uma cor nova, tem o novo tamanho, ainda é muito grande, ainda tem uma cor errada, mas você entendeu. Vou desfazer isso antes de corrigir meu logotipo. Deixe isso aí. Vamos dar uma olhada nisso. Ainda tem suas substituições. Então, eu vou dizer, na verdade, volte para onde está a instância de reinicialização ? Tudo bem, componentes. Você começará com um ou dois e depois descobrirá que tem muitos deles. E você encontrará modelos de outras pessoas com os quais está trabalhando. Você os pegará, copiará e colará no documento ou trabalhará a partir do modelo, e eles usarão várias instâncias em todo E se você quiser mudar todos eles, tudo o que você precisa fazer porque não tem ideia de onde está o componente principal? Você fica tipo, isso é definitivamente uma instância, ou essa aqui, definitivamente uma instância. Onde está o componente principal? Eu poderia clicar com o botão direito do mouse e ir até lá. Vá até lá, por favor. Agora está lá. Ah, e a última coisa é que fizemos isso mais cedo, quando copiamos e colamos do documento de outra pessoa, você pode realmente quebrá-lo Você acabará com instâncias que copiou e colou e ficará tipo, eu não quero que elas sejam conectadas ao componente principal porque Ele pode se vincular a vários documentos. Digamos que você não queira isso, posso apenas dizer que, na verdade, quero separar essa instância Fizemos isso antes sem saber o porquê, agora sabemos o porquê, porque não queremos esse componente principal conectado a ele. Podemos quebrá-lo e fazer o nosso. Podemos clicar com o botão direito do mouse ou ir até aqui e dizer criar componente ou criar componente. Agora temos esse componente principal que agora é Ls que podemos usar e não está conectado ao documento de outra pessoa de muito tempo atrás. Certo, é isso mesmo. Ou seja, componentes e instâncias, componente principal e instâncias desse componente principal. Eu explico isso bem? É complicado. Espero que faça sentido agora ou pelo menos um pouco mais de sentido Vamos praticar mais disso. Tudo bem É isso mesmo. Te vejo no próximo vídeo. 72. Onde você deve manter seus componentes principais no Figma?: Olá, aí. Vamos organizar nossos componentes principais porque somos muito organizados. Muitos designers têm esse problema de TOC em que tudo ficaria bem e organizado em outra página. Isso é o que vamos fazer. É uma boa etiqueta de UX e, para aquelas pessoas bagunçadas por aí, você Vou mostrar alguns truques sobre como deixar tudo bagunçado e seus componentes principais em todos os lugares e realmente encontrá-los. Certo, vamos começar. Vamos nos organizar. Vamos começar a arrumar tudo. Temos nosso componente principal aqui. Lembre-se de que, se você não conseguir encontrar seu componente principal, clique com o botão direito do mouse e diga: onde está? Componente principal, vá para o componente principal, para que você saiba onde ele está. Eu vou cortá-lo e vou para onde eu vou. Vou criar uma nova página. Este vai se chamar C po Let's. Vou arrastá-lo para que fique no topo aqui e eu estarei nessa página, que eu vejo. Eu só vou colá-lo. Muito grande. É melhor manter seus componentes principais em uma página de componentes para que sejam fáceis de encontrar. Só estamos fazendo esse curso há pouco tempo, HiFi. Olha isso. Sou eu. Mas agora é um hábito muito bom mantê-los em uma página de componentes ou mantê-los separados para que você saiba onde eles estão, especialmente quando você está trabalhando com outra pessoa, você não quer que eles tenham que tentar descobrir onde está esse componente principal misterioso. Eu vou fazer outro componente. Vou te mostrar outra maneira de chegar lá. Eu tenho essa coisa toda. Vai ser meu navegador principal. Vou ver os momentos apenas como uma moldura. Vou transformá-lo em um componente. Clique no botão ou use o atalho Opção de Comando K ou clique com o botão direito Tudo bem Isso não o tornará um componente principal. Vamos fazer isso, clique com o botão direito do mouse e vá para criar componente. E eu realmente não quero isso porque se eu acabar mexendo nisso, vou afetar todas as outras páginas Então, é melhor ir agora, certo, você, meu amigo, vai passar para a página, ou você pode copiá-la e colá-la e eu vou movê-la para a minha página de componentes. O que eu vou fazer é ir para meus ativos, e eu vou voltar e vou voltar novamente. Este arquivo aqui no meu painel de componentes, eu vou ter tudo aqui e, em seguida, está tudo em um só lugar, em vez de espalhado O que ele faz aqui está nesta página e, se eu tiver outro componente, quero mostrar onde está bagunçado. Se eu fizer isso e criar, essa será minha placa, então vou usar o atalho Command Option K ou Control Alt K em um PC Eu tenho meu componente, vou dar a ele um nome melhor. Cartão A, tenho certeza de que criarei outro. Você pode ver que é definitivamente um componente porque tem os quatro diamantes Agora, se eu voltar ao painel Ativos, você pode começar a ver que acabo com componentes em cada página. Mas se eu tirar todos eles, assista Mobile está aqui. Se eu for até este aqui e disser: A, agora você será movido para minha página de componentes. Você pode ver que isso arruma tudo? O mesmo com o meu Hi Fi. Eu tenho o logotipo aqui em algum lugar. Posso clicar com o botão direito do mouse e dizer, vá para o componente principal. Aí está lá e eu vou dizer, e agora vou para frente. Vamos lá, vá para os componentes da página. Você verá que, neste documento, eu só tenho esses componentes. Arruma-os. Caso contrário, ele mostra todas as páginas em que eles estão. Eles entendem, Dan, eles entendem. Vou acrescentar isso na perfeição. Agora você pode simplesmente deixar tudo bagunçado e espalhado. Você faz isso no início e, rapidamente, acaba simplesmente movendo-os para outra página. Se você decidir ser a pessoa confusa e simplesmente deixá-la espalhada pelo documento, tudo bem No painel Ativos, se for realmente difícil descobrir, basta pesquisar. Se eu precisar daquele cartão que acabei de fazer, posso digitar o cartão e ele só vai me dar o cartão. Isso é muito útil quando você está trabalhando, digamos, com um documento maior, quando há muitas e muitas coisas diferentes Muitos botões diferentes estão misturados com todo o resto e você só quer pesquisar por botões. Bom ponto, vamos voltar à minha página de componentes e fazer alguns nomes. Botão pequeno, eu já fiz esse. Agora, eu sou bom. Eu já nomeei essas coisas, carta um. Sou um gênio e um logotipo. Aí está. Não preciso renomear nada. Você está aqui, porém, vou te mostrar uma maneira legal de passar por tudo isso e renomeá-los. Digamos que não se chamasse Logo, posso clicar em tab para dar um nome a este, porque muitas vezes você acaba com apenas o quadro 47, quadro 52. Levante a mão se já é você. Sim, eu sabia que seria você. Você pode simplesmente baixar a aba, renomeá-los, abaixar a aba. Isso é útil? Acho que é útil. Pesquisando, verifique se eles estão em nossa própria página e também em outro truque para encontrar o componente principal. Você pode clicar com o botão direito do mouse. Eu tenho essa instância aqui agora. Veja aqui, eu posso dizer, vá para o componente principal, faz isso. Você também verá que, quando eles não estiverem em uma moldura, você pode ver o nome, mas também pode ver o ícone. Você vê que quando está em uma moldura, você não vê o nome ou aquele pequeno ícone. Agora é só uma questão de alinhá-los. Talvez eu tenha uma seção de botões aqui embaixo para as pessoas com TOC no curso Você pode começar a alinhar as coisas, rotulá-las, agrupá-las e colocá-las em lugares especiais Você tem um segundo botão, você os agrupa, os torna fáceis de encontrar, faz seu feng funcionar É isso mesmo. É como arrumar seus componentes. Você não precisa. Mas à medida seus projetos ficam maiores e quando você os entrega para outras pessoas, você provavelmente o fará Pelo menos pela ilusão de ser organizado. É isso mesmo. Te vejo no próximo vídeo. 73. Projeto do curso 15 - Componentes: É hora do projeto da aula, e se você está pulando os projetos da aula, não vá lá Há um pouco mais nisso. Quero acrescentar um pouco de coisas interessantes antes de fazermos o projeto da aula. Ok, vamos falar sobre o que precisamos fazer, e então eu vou te mostrar as coisas. Quero que você crie uma página de componentes e crie duas versões de logotipo, um botão e um Nav. Deixe-me te mostrar. Eu tenho meus dois logotipos Nav. Eu tenho um que fica em um fundo escuro e outro que fica em um fundo claro. Então você realmente não pode ver isso lá. É uma versão mais escura do logotipo. Então, quando você está nomeando, é difícil saber. Esse é o logotipo claro real, e esse é o logotipo escuro, mas esse é chamado de modo claro, modo escuro. É muito comum em UX dar a ela o nome de onde ela está indo em segundo plano. Modo claro, modo escuro, você provavelmente já se deparou antes Isso está sendo usado no modo claro, pois há um fundo branco, isso seria mais apropriado. Em um fundo escuro, isso é mais apropriado. Use o modo claro e o modo escuro. Portanto, os dois componentes principais separados, em vez de uma instância que você alterou. Se você está tendo problemas para ver alguns de seus elementos, você pode colocar uma moldura em torno disso. Não há problema em ter uma moldura para tornar isso um pouco mais confuso, a menos que você possa ver o modo escuro ou simplesmente altere o Portanto, se não tiver nada selecionado aqui, você pode encontrar um plano de fundo que seja como um meio termo feliz nesta página específica para que todos possam ver todos os elementos diferentes. A outra coisa que eu quero compartilhar com você, se você não estiver fazendo os projetos de classe, você deveria, é esta instância aninhada de um logotipo Então, temos nosso Nav aqui. Dentro dela, temos nossa navegação, que é essa coisa aqui à direita. OK. E eu provavelmente nunca mencionei esse nome. Vamos chamar isso de botões de hífen Nav. Eu também tenho esse logotipo aqui. Não é um exemplo disso. Este é apenas o logotipo que fizemos anteriormente. Você pode ver, ainda é uma moldura. O que eu deveria fazer? Porque o problema agora é que, se eu fizer uma alteração nisso, você pode ver , se eu aumentar, isso não acontece. Isso é chamado de instância aninhada, significa que eu tenho meu componente principal e quero uma instância dentro dele Explicar isso não ajudou, não é? Então, componente principal. Eu criei uma instância que vou usar nesta navegação. Eu vou me livrar desse cara e vou colocar esse cara aqui. Não é o componente principal. É apenas uma instância para que eu possa trabalhar nisso separadamente, que precisa ser desativada. Mas o legal é que quando eu mexo com isso, porque é um prato principal e esse é o exemplo, ele vem para o passeio Eu tenho esse controle maior. Eu tenho toda essa parte de navegação dentro dela, é uma instância. Não há razão para que você não pudesse ter o principal aqui também, então talvez fosse mais fácil, mas não é. É muito bom ter o logotipo sozinho , em vez de incorporado porque você o usará em vários lugares diferentes, não apenas no NAV Vamos apenas colocar uma instância lá. Tudo bem Se você não está fazendo os projetos de classe, o que deveria estar, você pode ir agora. Para o resto de nós, crie uma página, faça dois logotipos, um escuro, um claro, um componente de botão e o NAV, que tem o logotipo aninhado Resultados, faça uma captura de tela como a de tudo na sua página e faça o upload para os projetos Não precisamos compartilhar isso nas redes sociais, não é particularmente interessante. Compartilharemos mais informações posteriormente, mas certifique-se de enviá-las para os projetos, cortar Tarefas e pronto certifique-se de enviá-las para os projetos, cortar Tarefas e pronto . Te vejo no próximo vídeo. 74. Como fazer variantes de componentes no Figma: Olá. Bem-vindo. Vamos ver o que é uma variante de componente. Fizemos componentes no último vídeo, apenas algo reutilizável que está em nossa biblioteca de ativos, mas vamos dar um passo adiante e combinar dois componentes para que, mais tarde, possamos dizer: A, você, você pode realmente ter duas variantes diferentes da mesma coisa É bom. Isso mantém as coisas simples e agradáveis. Eu tenho um botão que pode ser muitas coisas em vez de tentar arrastar muitas e muitas outras diferentes. O mesmo com este aqui, fizemos essa variante. Coloque-os nessa coisa. Na verdade, posso dizer que quero o estado de Hova ou o estado de deficiência Liguei para variance e vamos fazer isso agora. Vamos começar. Certo. Variação do botão Vou criar o meu na minha página de componentes. Eles podem entrar em qualquer página que você quiser, e eu desenhei isso. É apenas uma moldura simples com algum texto nela. Nada mais. Eu o transformei em uma saída automática para que eu pudesse obter o espaçamento frio, mas é isso O que eu vou fazer é duplicá-lo. Vou ter duas versões, e essa aqui, vou chamar de secundária. Quero um botão que eu possa reutilizar e que esteja pronto para usar com minha cor secundária Essa é a cor secundária. Tudo bem. Este será o principal. Eu tenho meus botões primário e secundário. Vou transformá-los em componentes. Então, eu vou dizer que botão principal do meu amigo será um componente, vá até o topo, aperte esse botão, você também, os dois componentes, como fizemos. Isso é basicamente tudo o que fizemos do último vídeo. Veja meu painel de ativos, há dois deles, dois deles estão bem. Mas quando você tem três deles com sua terceira cor e depois tem outro com contornos e tamanhos de fonte diferentes e botões maiores, botões menores, você pode imaginar esse painel de ativos ficando muito grande O que podemos fazer é ter meus dois componentes. Eu posso selecionar os dois. O que acontece quando você seleciona dois componentes ao mesmo tempo, veja o topo aqui, diz: Ei, você gostaria de combiná-los como variância Você fica tipo, Sim, isso seria incrível. O que aconteceu? Não muito. Tem uma linha pontilhada na parte externa. O que aconteceu com meu painel de ativos, você pode ver, passa de dois, refeito para um. Esse agora contém muitas coisas. Nossa, muitas coisas. Mais de uma coisa. Com ele selecionado, eu posso ir até aqui e dizer, olha, eu posso dizer que você é o botão secundário. Ah. Ah, você pode misturar diferentes versões ou variantes em um único componente Isso é o que são as variantes. Vamos fazer outro. Esta aqui novamente é: vamos dar uma olhada na moldura. É apenas um lote automático com algum texto nele. Não é um componente, não é nada. Neste caso, porém, eu quero fazer um botão mais comum em sites onde eu possa dizer, eu tenho um, dois, três. Este não será meu esboço, esse será meu botão principal Este aqui será meu mouse, quando você passar o mouse sobre ele, e então teremos uma opção para esse botão que está teremos uma opção para esse botão que está Vamos alterá-los quando você passar o mouse sobre ele Vou mudar a cor do traçado para ficar mais escura, o mesmo com o O texto ficará com a cor mais escura quando você passar o mouse sobre ele e a opção desativada, vou apenas derrubar a opacidade de tudo dentro dele para que seja transparente Consegue ver o que estou fazendo aqui? Assim como você já viu botões desativados antes. Agora precisamos transformá-los todos em componentes. Existe um truque para fazer isso um pouco mais rápido. Você pode selecionar todos eles. Em vez de apenas fazer um de cada vez, você pode dizer, veja esta pequena lista aqui embaixo. Quando você seleciona vários quadros, ele diz: Ei, você quer criar um componente? Não, eu quero criar vários componentes. Você pode ver que acabei de fazer tudo de uma só vez. Dias felizes. Agora, porém, se eu selecioná-los posso combiná-los em uma variante. Novamente, eu tenho uma variante e, se eu for ao meu painel de Ativos, vou desfazer a desfazer de uma, duas, três coisas que bagunçam meu painel de Ativos Lá está ele. Arraste-o para fora e eu posso dizer que uma delas tem que ser a opção de passar o mouse Não, essa será a opção desativada. Essa é uma variante de componente, assim como um componente, mas com algumas variações. Vamos arrumar isso um pouco. Em vez de chamar o componente dois, é um nome ruim, isso será chamado de meu esboço de BTN, só para eu saber o que é isso no meu painel de ativos Você pode nomeá-lo aqui ou no topo. A outra coisa que podemos fazer é selecionar o componente principal, não a instância que arrastamos. Esse cara aqui. Podemos ir até isso e dizer, vá até as configurações aqui e diga, na verdade, qual propriedade estou selecionando? Porque é isso que fazemos. Vamos até aqui e dizemos, qual propriedade você quer? Tem uma primária? Eu quero ir até aqui e dizer, seja um pouco mais descritivo e, digamos, não a propriedade Eu quero colocar o estado do botão. Em seguida, você pode escolher entre passar o mouse desativado e o primário. Você pode arrastá-los, dependendo como deseja que a ordem do menu suspenso apareça. Então, agora aqui, este aqui, qual estado de botão você quer? Você pode dizer, eu quero a primária, a primeira. Aí está. Você criou uma variante de componente ultra complicada para torná-la mais complicada, basta fornecer a linguagem enquanto avançamos. Isso agora era chamado de componente principal, e ainda é, eles o chamam de conjunto de componentes agora. É isso que significam as pequenas linhas pontilhadas ao redor da borda. É apenas uma maneira de dizer que esse cara aqui tem habilidades especiais, todas combinadas em uma Então, arraste uma instância dela ou você pode arrastá-la diretamente do componente principal, como antes. Você pode arrastar uma cópia disso. Isso não importa. Esse cara aqui, eu quero mudar o estado do botão. Nome. Você não precisa fazer isso com o componente principal. Então eu posso entrar aqui e dizer estado do botão que pode ser alterado. mesmo aqui, você pode dizer, tudo bem, eu quero mudar a palavra passar o mouse aqui Você não pode fazer isso na instância, mas pode voltar ao componente principal ou ao conjunto de componentes, acessar as configurações e entrar aqui e dizer que isso não é primário, é outra coisa. Então, faça sua edição no conjunto de componentes ou no componente principal. Eles usam essas duas palavras para essas coisas e, nos casos, você simplesmente analisa e faz as mudanças que deseja ver. Eu quero escolher essa variante. Isso foi útil? Espero que tenha sido Novamente, isso está no curso básico, é razoavelmente avançado, principalmente porque você encontrará o botão de alguém dirá: Incrível. Eu copiei esse botão. Ah, eu gostaria que houvesse outras versões disso, e talvez você tivesse que ir até aqui , conferir e dizer, alguém fez todo o trabalho para mim, e você chegará a um ponto em que você Cara, eu só preciso combinar alguns desses caras, e você pode criar suas próprias variantes. Tudo bem, olhe para nós. Usuários hardcore do Figma Tudo bem, vai ser isso. Te vejo no próximo vídeo. 75. Outra maneira de fazer variantes no Figma: Olá, vamos praticar a criação de variantes novamente. Vou te mostrar outra maneira de fazê-los. Basicamente, você pode simplesmente criá-los dentro do conjunto de componentes em vez de criá-los todos primeiro, e vou mostrar um truque interessante para transformá-los em pequenos interruptores Oh, eu adoro uma chave seletora. Tudo bem, boa prática. Vamos fazer outra variante. Vou te mostrar alguns outros truques legais. E, claro, o botão de alternância. Como ele faz isso? Certo, vamos começar. OK. Para começar, eu criei, na verdade, acabei de roubar isso de um tutorial anterior que aprendemos sombras projetadas Então, isso não é nada além de uma moldura de canto arredondado, com um pequeno círculo nela. Não está acontecendo nada. Vou convertê-lo em um componente, assim como fizemos antes. É um atalho Command, Option K, Control Alt K em um PC Ok, eu tenho um desses. E se você rolar até o topo aqui, ok, eu mesmo o chamei de Toggle Switch Está bem? E você pode ver essa pequena opção? Está bem? Em vez de apenas assinar dois deles, basta clicar aqui. E olha, eu vou adicionar uma variante. E meio que faz tudo isso funcionar para nós, em vez de, tipo, criar dois componentes diferentes, selecionar os dois e depois transformá-los em uma variante. Faça um componente e diga: eu quero uma variante desse componente. Isso funciona para você? O segundo aqui agora, vou coletar duas vezes para entrar. Eu quero que esse interruptor esteja aqui, talvez a cor de fundo mude para um dos meus tons neutros, então os interruptores se desliguem Como antes em nosso painel de ativos, podemos simplesmente arrastá-lo para fora. Nós acabamos no mesmo lugar. Não importa se é assim ou não, acabamos com uma instância que tem variantes diferentes. Nossa nomenclatura é muito ruim, mas é a mesma coisa. Você pode adicionar outro novamente. Você vê isso, eu o selecionei. Você pode ver que essa pequena vantagem aparece na parte inferior, você pode adicionar outra. Não tenho certeza de qual botão isso vai fazer . Preso no botão do meio. Eu também posso pegá-lo e pressionar meu Comando D ou Controle D em um PC para duplicar coisas. Não importa como você faz sua variação. Você pode copiá-los e colá-los, duplicá-los, apertar o pequeno botão de adição Isso não importa. O que funcionar para O que eu vou fazer é te mostrar algumas outras coisas. Se eu estiver excluindo esses botões, você pode notar que a pequena linha pontilhada não se recompõe. Você pode pegar a parte externa e fazer isso de qualquer tamanho. Isso é apenas uma dica visual para você saber que, ei, isso é importante Conjunto de componentes, o componente principal, e você pode ajustá-lo conforme necessário. O interessante é que esse é apenas mais um truque divertido, é a nossa nomenclatura, certo? Se eu clicar no componente principal. Aqui, você notará que há duas configurações. Esse pequeno ícone de propriedades universais está em toda parte. Este dos primeiros aqui é genérico. O que eu quero fazer é aqui embaixo, há essa outra opção aqui para que eu possa entrar e fazer minha nomeação. Essa vai ser, eu não consigo pensar. Eu vou ligar para ele. O editor teria cortado isso, mas eu estava sentado, apertando os olhos, tentando pensar como seria chamado Eu a chamo de posição desse botão porque não nomeamos nada. É chamado de padrão na variante dois. Você vai acabar com muitos desses. Está bem? Poderíamos dar a eles outros nomes, mas se dermos o nome secreto, será que é um nome secreto? Ativado. E se esses outros cancelarem, veja o que acontece. Está bem? Se eu pressionar Enter agora, me livre disso. Se eu clicar na minha instância, ela será arrastada da biblioteca ou copiada daqui Estou segurando minha tecla de opção em um Mac. Oh, contra PC, não importa, eles são todos iguais. Todas as instâncias desse componente principal. Olha o que acontece. Há uma chave seletora. Para, clique em, adicione seus próprios efeitos sonoros. Não sei por que isso é incrível, mas se você usar a palavra ao e desativar sua variância ativar e desativar sua variância, isso fará com que isso Você pode chamá-los de verdadeiros e falsos, sim e não. Não sei por que isso me deixa feliz. Está bem? Eu adoro uma chave seletora. Tudo bem, então é bem complicado. Vamos fazer outro, super simples. Se for para a ferramenta de moldura, vou desenhar um retângulo simples e vou dizer que você, meu amigo, será um componente e eu farei uma variante de você Essa outra variante terá uma cor diferente. Vai ter um tamanho diferente. E agora, aqui no meu painel de propriedades, lá está. E ele tem duas variantes. Por que você não faz isso no começo, Dan? Eu provavelmente deveria. Mas você pega o jeito. Fizemos o complicado primeiro, e depois esse super simples mais tarde. Você pode usá-lo de forma muito rápida e simples, além de manter sua biblioteca limpa e compacta. Certifique-se de nomear suas coisas. Caso contrário, você terá que criar um que seja difícil de entender para que serve. O que é realmente bom nisso é mais tarde, quando você copia e cola o trabalho de outras pessoas, outros designers em seu escritório ou talvez esteja usando uma biblioteca de outra pessoa Na Internet, você pode clicar em coisas e descobrir que pode haver outras opções escondidas lá. Tudo bem, estou de volta. Você não sabia que eu saí. Eu terminei e pensei: Ah, devemos fazer mais um porque outro caso de uso muito bom e que só nos ajuda a praticar é o logotipo claro e escuro. Nós já os temos. Nós já os fizemos. Já criamos um atalho, certo? Temos essas duas versões. Eles não precisam estar em cima um do outro. Não sei por que os estou empilhando, mas posso selecionar os dois agora Oh, vá direto para ser uma variante. E agora está arrumada nossa biblioteca. Em vez dessas duas coisas, temos apenas uma coisa. Podemos arrastá-lo para fora e dizer: Tudo bem, eu quero o modo claro do logotipo ou o modo escuro Vá. Talvez eu mude o nome agora Eu poderia dizer que, em vez do chamado componente dois, eu poderia simplesmente chamar esse logotipo e, dentro dele, vou entrar nessas propriedades, e vou dizer que a propriedade é modo, e em vez de chamar modo escuro do logotipo, oh, para onde vamos? Eu me perdi. De volta para você. Em vez do modo escuro do logotipo, vou colocar não consigo digitar. Modo escuro, modo de luz com aba para baixo. Aí está. Outro caso de uso muito bom, muito melhor do que a chave seletora ou esse cara Tão glorioso quanto ele é. Tudo bem, esse é o fim. Te vejo no próximo vídeo. 76. Projeto do curso 16 - Variantes: Olá, é hora de praticar o que estamos praticando. Eu quero que você faça algumas de suas próprias variantes. Ok, então vamos fazer quatro deles. Três deles nós já fizemos na aula. Você pode simplesmente fazer isso, se ainda não o fez. E então o último quer que você adicione uma caixa de seleção na parte inferior aqui Mesmo que você não esteja fazendo o projeto da turma, você deveria. Vou te dar uma pequena dica sobre onde você pode errar. Então, veja o que você vai fazer. Eu quero criar um botão que tenha duas variantes. Um é o secundário e o outro é o primário. Eu quero que você faça uma chave seletora com uma pequena opção de alternância com uma pequena O mesmo acontece com o logotipo, haverá um modo claro e um escuro desses caras entre os quais você pode alternar, então eu quero que você marque essa caixa de seleção, o que você pode encontrar, e é algo que eu raramente encontro, mas aconteceu enquanto eu estava fazendo o que você pode encontrar, e é algo que eu raramente encontro, isso Eu estava tipo, Oh, aqui. O que acaba acontecendo é: veja isso, eu tenho minha caixa de seleção. Parece certo. Eu tenho um sem a tecnologia, um com a tecnologia aqui. Eu fico tipo, A, vou mudar para Não consigo mudar para nada. Eu liguei-o, mas depois não desliga. É estranho É porque aqui, esse conjunto de componentes tem duas variantes. Lado a lado, em vez de em cima um do outro, não importa. O que importa é a nomenclatura. Esse cara aqui é chamado de padrão e esse cara aqui é chamado de padrão. Eu posso ver aqui no meu painel de camadas, padrão e padrão. Esse cara não sabe o que mostrar porque ambos são chamados de padrão. Podemos renomeá-lo, podemos pegar a caixa de seleção. Podemos entrar nas propriedades aqui. Na verdade, não podemos apenas um deles lá. Tenho que fazer isso aqui. Eu tenho um. Esse é o vazio. Há um nome melhor para isso. Não consigo pensar nisso. Inativo, provavelmente é isso. Este vai ser verificado. Porque eles são diferentes, agora essa coisa sabe o que fazer. Pode-se dizer, certo, que eu tenho duas opções, não apenas o padrão, você pode ativá-las e desativá-las. Qualquer um desses, se eu ligar, vamos fazer isso com este também para quebrá-lo. Vou entrar aqui e vou chamar os dois de modo escuro, modo escuro. Elimina um, mas ambos são chamados de modo escuro. Então essa coisa aqui, não sei o que fazer. Modo escuro, modo escuro. Portanto, certifique-se de que ambas as variantes tenham seu próprio nome exclusivo. Isso geralmente acontece por padrão. Componente um, componente dois, componente três, componente quatro. Não sei como consegui que os meus fossem chamados de padrão, mas eu fiz isso e você também pode. Aí está. Eu quero que você crie esses quatro e eu quero que você faça uma captura de deles alinhados assim, onde eu possa ver o conjunto e o exemplo dele e enviá-lo para a seção do projeto Divirta-se fazendo variações. Te vejo no próximo vídeo. 77. Como adicionar um popup, overlay modal no Figma: Olá. Você está pronto? Nós vamos fazer isso. Três, dois, um, um, Go. Eu adoro isso. É um protótipo em que esse modal aqui aparece acima de tudo Eu posso fechá-lo, ele aparece automaticamente por cima de uma moldura existente Deixe-me mostrar como fazer isso no figma. Para que isso funcione, você precisa ter o item que deseja que apareça em sua própria moldura no plano de fundo. Não pode estar em nenhum outro quadro desta página aqui, você o tem ao lado. Eu desenhei apenas uma pequena moldura com alguns ícones e um botão lá dentro. Eu posso ser apenas uma figura normal. Isso não importa. Eu estilizei meu para parecer um pop-up de boletim informativo O que fazemos é mudar para o modo de protótipo, que é alternativo, ou você pode clicar em Protótipo O que dizemos é a página inicial aqui, quero que você vá até lá Não queremos que ele tenha um Navigate two. Queremos que a ação diga para abrir uma sobreposição. É basicamente isso. Vamos dar uma olhada para ver o que isso faz. Vamos criar um protótipo da página inicial. Vamos ao Prototype. Espere por uma carga. E está configurado para um clique, então eu clico de uma só vez. O boletim informativo é exibido. Eu não sei Algo incrível sobre isso. Não fecha, mas eu não sei, SMS, então o que precisamos fazer é clicar no Y aqui ou no macarrão, digamos, não no clique, queremos que ele diga depois de um atraso Eu vou dizer que depois de cerca de 4 segundos, 4.000 milissegundos. Vamos dar uma chance. Mais uma vez, vou dar uma prévia desse cara, digamos, play. Ok. E depois de 4 segundos, 4 segundos. Aí está. Oi. Apareceu. Isso não vai embora. Vamos deixar a prévia aberta. Vamos dar uma olhada em algumas outras coisas. Com ele selecionado aqui, após um atraso de 4 segundos, quero que ele seja centralizado Quero que ele feche ao clicar na parte externa. Isso é muito comum e eu quero que o fundo tenha apenas um desbotamento na parte superior Eu gosto de 50%. Parece muito certo. E a animação, vamos fazer com que ela se dissolva. E vamos dar uma prévia disso agora. Ele está aqui. Vamos clicar em Reiniciar. Lembre-se, é a chave, 4 segundos. Vá. Vá. Oh, quase funcionou. Desapareceu, o que é bom. Agora, se eu clicar na parte externa, ela desaparece. Por que o fundo preto não apareceu? Vamos dar uma olhada. Antecedentes. Então eu desligo isso. Você viu isso? De qualquer forma, eu coxo figma Provavelmente sou eu. Depois de um reset, três, dois, um. Vá. Desaparece do fundo Posso me inscrever para acessar minha página de assinatura. não tenho esse botão configurado, mas se eu clicar em segundo plano, ele desaparece. Tudo bem, então fizemos um boletim informativo por e-mail. Você pode usar isso como um alerta, digamos, em vez de um botão. Então, eu vou dizer que, quando esse botão “Até agora” é clicado, eu estou no protótipo em “Agora”, ele vai para essa outra Eu tenho outra moldura aqui? Quadro. Essas são todas imagens. Isso é uma moldura. Eu não quero que ele vá para lá. Vamos desenhar um retângulo e ele ficará vermelho. Digamos que seja uma mensagem de erro. Teríamos que projetar isso. Mas, por enquanto, vou clicar no botão e vou até prototype shifty e vou dizer vá até lá, mas quero Eu também não quero navegar, lembre-se, eu queria abrir a sobreposição e quero que ela vá para o quadro 29 Eu chamei esse modelo pop-up. Foi exatamente assim que eu o chamei. Modal é o termo genérico para uma unidade que não é outra página, que parece, como um pequeno grupo É um modelo. Centralizado, fechado ao clicar, plano de fundo, vamos fazer tudo Está tudo bem. Tudo bem, vamos tentar. Página inicial. E vamos pré-visualizar. Na verdade, voltamos aqui e clicamos em reiniciar. Se eu clicar no botão B agora, recebo minha pequena caixa de diálogo de aviso. Ela aparece, ou pode ser como, tem certeza? Tem certeza que tem certeza? Ou pode ser que você não tenha preenchido esse campo ou qualquer que seja o modelo pop-up. Outra coisa que você pode pesquisar é apenas um pouco da terminologia Eu usei o modelo. Se você já ouviu isso antes, meu sotaque talvez seja um pouco difícil Não é modelo, modelo com A. Também há coisas como pop-ups, caixas de diálogo. Eles também ligarão para eles. Os avisos de que eles os chamarão de lanchonete são interessantes Lanchonete do Google. Isso é interessante. É o que acontece nos telefones celulares. Está bem na parte inferior. É um pequeno pop-up. Eles os chamam de lanchonete. Aí está. É uma pequena técnica legal de prototipagem para pop-ups e pronto. Vou ver no próximo vídeo. 78. Como fazer e prototipar uma dica de ferramenta no Figma: Olá, vamos fazer outra sobreposição, basicamente com exatamente os mesmos recursos com outra alteração, e é nessa dica de ferramenta que a sobreposição não fica bem no meio da página, como fizemos com o boletim informativo por e-mail Veja isso. Quando eu clico aqui. logo acima do que estamos trabalhando. Agora, este é um vídeo bastante longo só porque eu apenas o faço , nós o fazemos juntos. Se você veio aqui apenas para ver essa dica de ferramenta e como fazer com que ela apareça onde quiser, vou direto ao ponto. Basicamente, tudo o que você precisa fazer é, como fizemos antes, vamos fazer com um clique. Vamos abrir a sobreposição. A única coisa que mudamos é o posicionamento. padrão é centralizado, que fica bem no meio da tela, o não é o que queremos dizer. Ok, queremos dizer manual Em seguida, manual, você pode movê-lo para qualquer lugar que quiser. Ainda precisa começar a vida útil fora da tela e você pode alterá-la para manual e, em seguida, movê-la para onde quiser que ela apareça. A mesma técnica, ao clicar em Olay, vai para esse quadro chamado Olay CC aqui em cima, e eu mudo para manual, então posso arrastá-lo Mas para o resto de nós que queremos construir tudo isso juntos, é sair e fazer. Vamos construir esse I e esse kit pop-up aqui em cima. Eu não vou fazer isso. Deixei minha página de checkout mais cheia, coloquei uma imagem em segundo plano e desenhei alguns retângulos no Você sabe como fazer isso, você pode fazer isso sozinho. Eu tenho apenas um retângulo branco com algum texto, com alguns retângulos com cantos arredondados que parecem campos quais você pode digitar seu cartão de crédito Então, vamos pular essa parte e começar a construir essas peças mais exclusivas Vamos começar. Tudo bem, então a maneira longa e chata de fazer isso é pontuar juntos Eu vou dizer, Oh, para o meu circatol, desenhe um Eu vou ver o design. Vou dar a ele uma cor de preenchimento da minha cor de destaque. Podemos ter uma cor mais informativa geralmente as informações são verdes. O sucesso é verde Na verdade, a informação é azul. Você precisa descobrir o que você vai fazer cores de informação para o seu site. Er está sempre vermelho. A conformação normalmente é sempre verde. As informações estão em azul ou cinza. Vamos colocar nosso I no meio disso. Vamos usar a ferramenta I. Na verdade, eu quero colocar uma letra I, vou usar a ferramenta de digitação, que é T, digitar um I. E por alguma razão, eu preciso ser. Vou quebrar o link para o estilo. Precisa ser uma seraponte. Não sei por que, sabe. Parece que sim. Vou mudar meu não. Eu uso analmente meus ancinhos. Ok, segure um botão para tocar nele. Isso parece bom para mim. Se as coisas não estão alinhadas, às vezes é difícil alinhar essas coisas. Se você pulou isso anteriormente em Preferências, aqui nas preferências F, há uma grade de pixels quebrada Você pode desligá-lo para facilitar o alinhamento no centro O que você também pode fazer é clicar nesse I, segurar a tecla Shift, pegar o círculo e usar essa horizontal. O atalho é a opção H ou Alt H em um PC. Vertical é a mesma opção ou Alt, mas V. Eu a uso bastante. Vou fazer isso branco, e esse será meu pequeno grupo aqui. Ambos são clicáveis. Vou clicar com a tecla Shift em ambos . Você pode vê-los aqui. Eles estão lá. Vou transformá-los em uma moldura. Vou clicar com o botão direito do mouse, vou dizer que enquadre essa seleção em uma pequena unidade que eu possa mover. É como um agrupamento. Essa é essa parte. Agora precisamos da parte que vamos sobrepor. A grande coisa a lembrar é que você pode projetá-lo aqui embaixo, mas ele precisa acabar fora da moldura, caso contrário, não funcionará. Talvez eu consiga o básico aqui. Vou agrupar a ferramenta de moldura e dizer, quero que seja desse tamanho. Incrível. Agora vou pegá-lo e arrastá-lo até aqui e, por algum motivo, não estava cheio. Não sei por quê. Vou pegar essa moldura. E percebo que não posso usar uma moldura para o que estou fazendo. As molduras devem ser retangulares. Você notará que até mesmo o círculo ao redor do qual colocamos uma moldura acabou com uma caixa. Esse é um daqueles lugares em que eles ainda precisam da ferramenta retangular Metade da ferramenta retangular tem aproximadamente esse tamanho. O legal da ferramenta retangular é que você pode entrar nela e separá-la com a ferramenta caneta, que é o que eu quero fazer Eu quero ir primeiro para alguns cantos arredondados. Vamos oito. Não, é demais, quatro, vou torná-lo branco. Vou pegar minha caneta. Na verdade, vamos primeiro para o modo de desenho. Vamos fazer isso. Vamos desenhar o Modo. Vamos entrar no modo de desenho, que é Editar objeto. Eu fui até aqui, no modo de desenho. Eu tenho o selecionado, eu entro nele. Você pode clicar duas vezes nele ou clicar no botão que foi chamado. Vá lá, Dan, você consegue. Aquele aqui, Editar objeto. Eu ganho. Agora eu posso pegar minha ferramenta de caneta e dizer, eu quero um extra lá. Eu quero um lá, eu quero um no meio, e então eu vou pegar minha ferramenta de movimento. E basta arrastar isso para baixo para que eu tenha alguns pontos extras. Oh, é arredondado, até mesmo. Eu gosto disso. Agradável. Você poderia simplesmente usar um triângulo e juntá-los usando a ferramenta de criação de formas, mas isso vai funcionar para mim Eu quero mover o meu , provavelmente. Vou segurar os cascalhos do Shift, arrastá-los para este lado, será meu pequeno humor Vou pegar meu tipo de dedo e colocá-lo aqui. Vou comprar o HeipTo. Não tenho certeza do que eles estão usando como espinha dorsal para Vou enviar um e-mail como um e-mail para meu chefe. Eu quero CVP x. Estou errado? Aí está. Ah. Faça alterações. Não faça mais do que quantas palavras? Um, dois, três, quatro, cinco, cerca de oito. Oh, vamos fazer sete. É incrível o que você pode mandar ele fazer. C. É texto em branco, o que não é bom. Eu não acho que você pode fazer isso para fazer isso. Você não pode usar a IA no momento para mudar as cores, mas aí está. Também não é muito bom. Provavelmente preciso dele para dizer coisas como: “Está no verso do cartão”. Mas de qualquer forma, isso bastará. Então, eu vou juntá-los. Vou me certificar de que eles estejam em uma moldura. Essa é uma das regras. A sobreposição não pode carregar um retângulo nela, mas pode carregar uma Então, posso simplesmente selecionar tudo isso e dizer a você, meu amigo, a seleção de molduras. Vou dar a ele um nome melhor do que quadro 30. Isso vai ser uma sobreposição, CVB. Gosto de colocar primeiro o tipo de palavra genérica : se você tiver muitas delas no painel Ativos, o que não temos no momento, todas as sobreposições serão agrupadas De qualquer forma. Acho que estamos quase prontos para ir. Vamos dar uma olhada. Shift E, vá para o modo protótipo. Shift E. ShiftE não funciona quando você está no modo de desenho no momento. Deveria. Mas não é. Eu estava no modo de desenho, o Shift E não funciona. Eu tenho que voltar ao design. E então vá para Shift D. Gates, eu vou dizer, você, meu amigo, vai para lá. Eu não quero navegar até lá. Eu quero ir para o OnClick. Eu gostaria que ele abrisse a sobreposição como fizemos antes e, por padrão, ele será carregado no centro Vamos dar a isso um mundo rápido para mostrar a você. Gosto de visualizá-lo em todas as etapas, porque se você o quebrar, não sabe em que parte das últimas 20 etapas você fez, então continue visualizando à medida que avança e pronto. Está bem no meio. Não é o que eu. Ok, primeiro de tudo, eu quero acrescentar abaixo do design, Shifty Eu quero adicionar sombra projetada porque isso parecia um pouco estranho Eu tenho meu estilo de antes, um estilo super incrível. Você pode ver como os estilos começam a se tornar úteis quando você entra na carne e nas batatas do design, você precisa de consistência Eu quero que seja igual à sombra projetada que foi aplicada lá. Tudo bem, então vamos agora para isso. Volte para Shifty. Modo de protótipo. Vou clicar no macarrão ou no fio, e vou dizer no clique, abra a posição de sobreposição, não centralizada ou no não centralizada ou Há alguns padrões. Você pode clicar no manual. Um manual é legal. Vamos fazer isso para o outro lado. Você pode simplesmente movê-lo para onde quiser. Tem que começar a vida e viver lá em cima. Mas depois de clicar em manual, você pode arrastar isso para dizer: quero que apareça lá quando a interação de sobreposição acontecer Instantaneamente, vamos fazer uma dissolução. Vamos fechar ao clicar na parte externa. Isso faz sentido. Visualize novamente, clique em Redefinir, que é o Archie em que clico aqui Ah. Olhe para nós. Sobreposição pop-up Agora, clicar é útil, especialmente quando você está usando dispositivos móveis. Quando você está usando uma versão para desktop , pode ser melhor simplesmente acessá-la Clique no macarrão e eu posso dizer: Em vez de onclick, eu poderia dizer “passar o mouse” enquanto estou passando o mouse O motivo pelo qual isso não funciona em telefones celulares é que você sabe o porquê, porque não consegue passar o mouse, mas pode passar o mouse sobre um desktop Isso é muito bom para um desktop. Apenas certifique-se de que, ao fazer isso para celular, esteja configurado para talvez com um clique. Nós. É outra sobreposição pop-up Fizemos isso mais como uma dica de ferramenta aqui, mas o termo é sobreposição e as regras são apenas garantir que o quadro em que você vai fazer a sobreposição ou o pop-up ou, nesse caso, uma dica de ferramenta esteja fora do quadro principal Uma das coisas que chama a atenção das pessoas quando estão trabalhando é que elas podem fazer uma e podem dizer, elas estão erradas, e o que elas fazem é ir, na verdade, eu quero ir para essa outra coisa Eles têm dois aplicados. O que acaba acontecendo é que você pode ver aqui que está pirando. É como se você não pudesse ter dois. Tenho um ao passar o mouse e um ao clicar, e o que você pode descobrir é que vamos tentar alterá-lo para ao clicar. Consegue ver que a nota está baixa? É como se eu fizesse isso? Passei anos tentando descobrir por que não consigo clicar. E eu simplesmente não percebi que, na verdade, existem duas aplicadas a isso. Porque às vezes você está trabalhando aqui. Clicando nele, você fica tipo, “Tudo bem”. Vai mudar isso para um clique. Eu não posso gostar, Oh, por que não? Porque você não está realmente olhando para cá. Só tenha cuidado. Se for nota baixa, provavelmente significa que você obteve duas delas. Está bem? Eu quero me livrar de. Vou manter meu “on click”. Você apenas os menos. Agora, está tudo bem no mundo das sobreposições Certo. Essa é uma pequena sobreposição modal pop-up com dica de ferramenta Usando toda a terminologia. Você provavelmente já ouviu falar de todos eles. Mas de qualquer forma, é isso. Te vejo no próximo vídeo. 79. O que são fluxos no Figma?: Tudo bem Neste vídeo, falaremos sobre fluxos. São essas coisas. Você os viu por aí. O que eles fazem? Deixe-me te mostrar. Tudo bem Então, o que os fluxos fazem? Basicamente, eles são apenas o lugar onde os protótipos começam Você não pode vê-los, lembre-se de B no protótipo, Shift E. Nós conhecemos Dan, nós sabemos, e você pode vê-los. Talvez você não. Se você não vê uma, é porque você não tem nenhuma configuração de prototipagem . Este não tem fluxo. Assista. Nada por aqui, mas se eu conectar isso a alguma coisa, veja o que acontece. Se eu conectá-lo a isso, o fluxo três aparecerá. É por isso que você acaba com vários, porque isso não tem como chegar a isso. Esse é um novo fluxo. Esse só vai até lá. Esse aqui, vai para lá em cima. Vamos dar uma olhada no nosso anterior. Vamos ao evento Mobile Info Lo Fi. Temos um fluxo porque isso vai para lá, vai para lá, vai para lá. Isso é fluxo contínuo. Se eu tiver outra página aqui embaixo, uma moldura e uma moldura, estou no modo protótipo, então vou pegar outra moldura? Eu não fiz. Você vai até aqui. Eu recebo fluxo porque eles não se conectam. O motivo pelo qual você teria dois é que você pode realmente compartilhar com as pessoas e dizer: Ei, na mesma página, quero que você confira a página inicial, mas também esse outro fluxo que eu criei. Vamos fazer um exemplo mais interessante. Eu obtive isso na biblioteca de modelos. É chamado de Onboarding Logging and Signup. Onde eu o encontrei ? Esse está aqui? Eu não sei Eu apenas procuro fluxos de inscrição Eu achei esse. É um bom exemplo. Há um registro, você tem uma verificação por e-mail, esqueceu a senha Há todos esses fluxos de tarefas diferentes que não se conectam entre si. Não há como ir da página de registro para a página de senha esquecida Temos nosso primeiro. Eu os conectei. Apenas um fluxo básico real para o registro. Eu desço aqui e digo, esqueci a senha e vou sair daqui Assim que eu faço isso, o fluxo dois começa porque continua, tudo bem, esse é um fluxo completamente diferente. E o que é legal é que eu posso pré-visualizar diretamente daqui, então eu posso ir, OK flow one, apertar play, e eu posso pré-visualizar esse fluxo de registro Então eu posso ir até este aqui e pré-visualizar este. Fluxo dois, esqueci a senha. Que não está carregando. Vá lá. Não está funcionando. Por que você está trabalhando? Hm. Não sei por que não está funcionando. Deixe-me pensar sobre isso. Vamos dar uma olhada em outra maneira de chegar ao fluxo. Se você apenas clicar em Apresentar ou acessar essa outra guia, você verá. É uma forma prática de compartilhar com as pessoas. Você pode dizer: Olha, você pode ir para o fluxo um ou para o fluxo dois. Esse ou aquele trabalha aqui. Eu não sei por quê. Portanto, não há como sair dessa primeira. Para o segundo. Então você pode usar a navegação aqui. Se não estiver ativo, você pode clicar nele. O pequeno ícone da barra lateral aqui, e é para isso que servem os fluxos Vamos dar um nome aos nossos fluxos. Você pode ter obtido fluxos por acidente. Você pode pensar, na verdade, eu não quero que isso seja um fluxo. O que você pode fazer é clicar nele ou, na verdade, clicar no plano de fundo sem nada selecionado, você pode ver, aí estão meus fluxos? Eu não preciso de você. Eu vou dizer que você está morto. Não quero que ninguém tenha acesso a essa outra moldura. Não é um ponto de partida, é apenas algo em que estou trabalhando. O que você também pode fazer é não selecionar nada. Aqui, diz fluxo um. Você pode clicar duas vezes nele e dizer que este é meu fluxo de compra, fluxo de compra. Se eu for pré-visualizá-lo aqui, na verdade eu só tenho um fluxo, não é? Se você tiver apenas um fluxo, ele não mostrará isso por padrão. Você pode ativá-lo. Fluxo de compra. Vamos dar uma olhada nesse. Na verdade, você entendeu. Você pode nomeá-los. A descrição também pode ser útil. Fluxo de compra aqui. Não selecionei nada. Fluxo de compra, eu posso entrar aqui e fiquei olhando para a tela por um tempo pensando Onde diabos está a descrição Eu descobri isso. Você clica nela aqui, a etiqueta real que está pendurada na primeira moldura. Depois, há esse pequeno ícone com aparência de papel e você pode adicionar uma descrição. Isso pode incluir as mudanças de D. Ok? Então, quando eu pré-visualizá-lo, aí está. Inclui as mudanças para Doug. Você pode alterar onde o fluxo começa arrastando-o. Digamos que você precise começar aqui e talvez sejam páginas traseiras. Você pode arrastá-los. Desfaça isso Outra coisa útil é que, sem nada selecionado aqui, você notará que, ao lado desse fluxo, vamos criar outro fluxo. Nós não fizemos isso, não é? Se não houver fluxo para começar, você pode adicionar um fluxo, ponto de partida do fluxo. Bop vai chamar isso de meu fluxo de teste. Ok. Agora, sem nada selecionado, basta clicar no plano de fundo e obteremos nossos dois fluxos. Há essas opções aqui. Esse aqui é muito útil. Digamos que temos muitos fluxos em nosso documento e queremos vincular diretamente a este. É copiado para a prancheta. Posso entrar no meu e-mail e dizer: este link aqui, Doug, isso o levará ao meu fluxo de compras Então você pode simplesmente separá-los, porque às vezes enviar a prévia para alguém que você precisa explicar, clicar nesse pequeno ícone e percorrer esses pode ser um pouco complicado Se você quiser apenas tê-los na documentação ou enviá-los por e-mail para alguém, às vezes é melhor simplesmente colá-los em links separados E abrimos em um navegador. Ele está carregando no Chrome e vai direto para esse fluxo. Se você quiser ir para o fluxo de teste, basta copiar o outro link. Você sabe como copiar links. Vamos fazer isso de qualquer maneira. Então, eu não selecionei nada, vou para meus fluxos. Oh, não está funcionando. Estou usando minha ferramenta de digitação. Volte para sua ferramenta de movimentação e, em seguida, não selecione nada, e então posso dizer que quero criar um link para esta. E quando eles abrirem o link, padrão é começar aqui. Faça isso, Dan. Está bem? Tudo bem, clique no link e pronto. Ele vai direto para o meu estranho fluxo de tarefas na página branca. É para isso que servem os fluxos. Exatamente onde tudo começa, você começará a vê-los aparecendo. Você já deve ter se perguntado o que eles fazem. Agora você sabe. Tudo bem Para o próximo vídeo. 80. Sobreposição do menu de navegação móvel Slide In no Figma: Oi, pessoal. Nós vamos fazer isso. É um menu de navegação móvel que vai aparecer. Está bem? Vamos dar uma prévia. Vou clicar no meu pequeno menu de hambúrguer. O menu desliza para dentro, então eu posso fechá-lo e ele desliza para fora. Algo muito divertido e tátil sobre isso. É usar habilidades que já aprendemos, o que é legal, reunidas de uma maneira diferente. Tudo bem, vamos começar e criar uma navegação móvel no Figma. Tudo bem, vou começar com essa navegação móvel já feita Se você quiser ver como eu fiz isso, farei isso no final deste vídeo, mas, por enquanto, apenas um retângulo com texto nele. Vamos fazer com que funcione. Então, o que eu quero fazer é ter certeza de que essa moldura ainda não está no topo dela. Vamos usar esse recurso de sobreposição. Ok, então Shift E para mudar para potter, eu quero a página inicial. Na verdade, não, eu quero que este menu de hambúrguer aqui vá para este navegador móvel aqui. Obviamente, estamos na página móvel Hi Fi. Está bem? Então, quando isso é tocado, eu não quero que ele navegue até Quero que ele abra uma sobreposição e que seja posicionado, não centralizado, mas Vamos dar uma chance. Vamos pré-visualizá-lo. Vamos dar uma prévia desse cara. Bem, às vezes é difícil clicar no fluxo porque esse fio estava no caminho. Lá vamos nós. Vamos clicar no Nav Apareceu. Mais ou menos. E então não vai desaparecer. Então, vamos dar uma olhada. Vou clicar no fio. Eu vou dizer na torneira, isso é bom. Sobreposição aberta, canto superior esquerdo. Não quero que se dissolva. Eu quero me mudar para cá. De qual direção faremos com que ele se mova pela direita. E vamos tornar a flexibilização agradável. Gosto da facilidade de entrar e voltar. Está bem? Bem, na verdade, não, eu gosto e sair, mas vamos ver como é. Vamos jogar, dar uma olhada. Zuko. É um pouco rápido. Está se confundindo na caixa de correio no topo aqui, caso o que façamos seja fazer algumas coisas. Vou ter que ajustar minha navegação porque quero que você e você passem por baixo Isso significa que você e você vão descer. E eu quero clicar neste fio aqui e ir relaxando. Eu só quero entrar e sair com facilidade. E vamos prolongar um pouco mais. 0,4 segundos. Algo mais que você queira mudar? Sim, é isso mesmo. Então, vamos pré-visualizar novamente. Sim, sim, mais legal. Eu ainda preciso mover isso para baixo. Poderíamos adicionar todas as outras partes à navegação com a bateria o Wi-Fi e coisas assim. Eu não quero fazer isso agora. Agora funciona, preciso fechá-lo porque não fecha. Há algumas coisas fáceis que podemos fazer. Vamos clicar nesse fio novamente. Podemos dizer ganhe clicando do lado de fora, feche-o e adicione um desfoque de fundo Mas meu até 50 e isso fará parte disso. A outra parte que eu quero fazer é fazer isso funcionar. Eu quero dizer, meu amigo, o que eu quero para você. Essa é estranha Eu não o arrasto para lugar nenhum. O que posso fazer é adicionar uma interação a esse botão que não direcione para algum lugar. Com ele selecionado, posso dizer que, na verdade, basta adicionar uma interação. Isso é o mesmo que arrastar. Se eu arrastar até aqui, adicionei interação e ela apenas preencheu essas coisas Mas se eu disser, vou me livrar dessa. Com ele selecionado, posso dizer que quero uma interação, mas em vez de tocar, sim, quero que seja ao toque. A ação será uma sobreposição próxima. Você pode ver que não vai a lugar nenhum, tem aquele pouco, agora vamos dar uma prévia, vamos para o Zouk e depois para o Jug Look tem aquele pouco, agora vamos dar uma prévia, vamos para o Zouk e depois para o Jug Look at us. Não sei por que eu gosto. Algo muito tátil em um menu entrar e fechá-lo Agradável. As outras coisas que preciso fazer é conectar meus botões. Quando você clica em Início, ele vai para esta página aqui. Quando se trata de recursos, ele vai para esta página aqui, e o Cart vai para esta página aqui. O fato é que, ao se lembrar da última interação que fiz, provavelmente fará algumas coisas estranhas. Vamos lá e vamos aos recursos e ele apareceu pela direita Acabei de me lembrar disso. O que eu provavelmente vou fazer é passar por tudo isso e, em vez de me mudar, vou simplesmente para o Instant ou me dissolver. Mover-se instantaneamente e tocar é bom. Está descendo. Vá lá. Instantâneo. Tudo bem. Dê uma prévia, e acho que precisaremos fazer uma última coisa : posso acessar os recursos e, em seguida, no menu, clico no menu. Então isso não está funcionando. Então, o que eu posso fazer é montar este. Está bem? Posso dizer que, quando você clica, vá até aqui, faça com que ela se sobreponha, faça com que ela deslize, faça todas Mas provavelmente é, bem, eu sei que é mais fácil. Vou desfazer isso e pegar esse menu aqui, aquele que eu já criei, copiá-lo, deletar este aqui, colar e ir até este e ir colar e ir até este e passar Logotipo abaixo deste do qual eu vou me livrar. Está bem? E eu vou pegar esse, ir lá. E é isso. Espero que isso funcione. Basta verificar. Vou checar um desses caras. Sim. Então, todas as interações surgiram. Vamos dar outra prévia. Sim, vamos para a página de recursos. Volte ao menu, pegue um carrinho e volte aqui. Nada no meu carrinho. Olhe para nós. Eu tenho um navegador móvel que funciona. Basicamente, usamos sobreposição para isso. Nós o usamos em nosso menu pop-up. Nós o usamos como nossa dica de ferramenta, um pequeno recurso útil, e você pode começar agora. Você está dispensado Se você quiser ficar por aqui, mostrarei como fiz uma caixa com texto nela, pode ser útil porque eu as fiz um pouco diferentes com algum espaçamento ao redor delas ou usando ferramentas que você já conhece Então, fique por aqui se quiser ver. Caso contrário, nos vemos no próximo vídeo. Continue. Veja como então foi feito. Certo, vamos começar a construir. Tudo bem, então a parte funcional disso é que vamos construí-lo. Vou desenhar algo que se parece com uma navegação. Vou colocá-lo na minha página rapidamente para obter o tamanho certo. Quero um pouco de área no lado direito aqui porque tenho espaço e quero que as pessoas saibam que não acessamos uma nova página e que elas possam clicar no plano de fundo para fechá-la. Quando eu terminar, vou retirá-lo, vamos construí-lo aqui. Vamos dar um bom nome a ele. Vamos chamar isso de celular. OK. E vamos adicionar o logotipo do nosso painel Ativos. Então, logo, aí está, J ****** e vamos entrar no modo claro ou olhar para nós usando a variância. Está bem? E eu quero pegar a ferramenta de digitação. Eu vou ter um botão home. O que eu quero fazer é tornar o botão home um pouco fácil de clicar, no momento, ele é bem Então, o que vou fazer é fazer uma espécie de acolchoamento ao redor do lado de fora A maneira de fazer isso é adicioná-lo a um quadro automático porque é fácil adicionar preenchimento, Mas você não pode adicionar um layout automático apenas ao texto. Isso tem que estar dentro de uma moldura. Seleção de quadros, e eu vou dizer, agora você está com a saída automática apenas porque eu quero isso. Você não precisa fazer isso dessa maneira. Você pode simplesmente arrastar o quadro fora e mover o texto para dentro dele como um botão, mas eu estou fazendo isso de uma maneira diferente. Mostrando maneiras diferentes. oito por oito para que seja uma coisa bem grande e fácil de clicar com o dedo. Tudo bem, porque eu quero que esses botões sejam separados, vou colocá-los em caixas de texto separadas Então, quantos eu quero? Não consigo me lembrar. Vamos embora. Oh, devemos fazer isso. Vamos fazer isso corretamente, Dan. Vamos fazer disso agora um componente. Está bem? Então, vamos escolher a opção “Venha”. Ok, agora é um componente. Eu quero ter, eu mantenho esse componente principal aqui? Muitas vezes não. Eu gosto de tê-lo na minha outra página real. Na verdade, isso é apenas no Não, está tudo bem. Ele deve ser recortado e colado na minha página para componentes. Está bem? E vamos usar o botão de navegação móvel Ok, vamos voltar para a mesma página. Onde estamos, Mobile Hi Fi, e vamos extrair um ativo disso. Você vai. Tudo bem. Agora vou arrastar uma instância, uma, duas, três, quatro. Tudo bem, então chegamos em casa. Lembre-se de que podemos alterar essas instâncias para que sejam exclusivas. Temos características domésticas. Vou chamar isso de carrinho agora de carrinho. Na verdade, então eu preciso de três desses, seu site acabaria com mais, certo? Você foi embora. Com tudo isso selecionado, se eu ampliar o suficiente, posso ver essas pequenas linhas aqui. Você pode fazer isso manualmente aqui, com espaçamento. Estamos apenas usando os guias inteligentes aqui. Tudo bem. Agora precisamos de uma pequena cruz no canto. Costumo trapacear e usar apenas a mesma fonte que estou usando, obtenho um ponto positivo Alguma razão pela qual os Xs não funcionam bem. Eles nunca parecem uma cruz, e eu vou torná-la maior. Não, vou usar meu CatOfEscale, aumentá-lo e vou delineá-lo, para que não seja uma Vai delinear o traço. Agora está em forma, e eu vou girá-la. E agora temos nossa cruz. É grande o suficiente para clicar? Novamente, talvez eu tenha que colocá-lo em uma moldura. Só para dar mais área clicável , isso provavelmente é o suficiente Mas, novamente, eu poderia transformá-la em uma moldura automática no preenchimento, ou simplesmente arrastar a moldura um pouco maior Você grade a coisa dentro dela e a move. Lá vamos nós. Principalmente no meio. Bom o suficiente. Aí está. E foi aí que meio que começamos o vídeo. Eu quero que isso se alinhe um pouco, aí. E só porque eu gosto de adicionar sombra projetada, vou adicionar meu tipo de efeito where we go Vou adicionar meu estilo super incrível. Eu vou quebrá-lo, ok? Porque eu provavelmente preciso empurrar porque , no momento, está pressionando para baixo. Está bem? Está tudo emparelhado lá embaixo Vou usar quatro e zero, o que empurra quatro pixels para o eixo X, que está certo, e o mesmo com este aqui Oh, eu não sabia que isso te mostrava isso. Você pode ver lá? Está te mostrando para que lado está realmente apontando? Oh, é chique. Dois e zero. Agradável. Tudo bem. E foi aí que começamos nosso tutorial. Isso provavelmente não foi muito útil. Adicionamos algum texto, mas às vezes é bom vê-lo. É bom usar uma variante, o que é legal. Tudo bem, para frente e para cima. Te vejo no próximo vídeo. 81. Projeto do curso 17 - Criação de protótipos: Tudo bem, hora de fazer seu próprio protótipo. Ok, eu quero que você faça três coisas. Então, no modelo pop-up, fizemos o boletim informativo por e-mail nos tutoriais, a dica de ferramenta para o CVV e a navegação móvel, o que acabamos Então, já fizemos todos eles antes. Eu quero que você tenha certeza de que fez o seu. Faça uma captura de tela e mostre-a para mim. Quando você estiver tirando capturas de tela deles, fique no modo protótipo para poder ver todas as linhas. Tudo bem, conecte todas elas Está bem? Então, faça uma captura de tela de tudo isso O seu não precisa ser um boletim informativo. Está bem? Eu te dei algumas outras opções, mas você pode escolher o que quiser, algum tipo de atraso aparece, ok? Assinatura de e-mail na confirmação do carrinho. Eu te dei alguns outros lá. A dica da ferramenta não precisa ser para o CVV, pode ser outra coisa. E quando você estiver fazendo isso, você terá que reunir algum tipo de dados de entrada do cartão e conferir outros modelos, ver o que outras pessoas fizeram, o que faz com que pareça um formulário bom e confiável que você pode inserir Mas eu não me importo com qual é a dica da ferramenta . Pode ser para outra coisa. mesmo acontece com o Nav móvel. Faça com que seja inserido no celular Hi Fi, mas não precisa se parecer com o meu. Ele pode deslizar em direções diferentes. É mais sobre a mecânica de fazê-lo funcionar. Tudo bem, então divirta-se fazendo protótipos usando muitas sobreposições Te vejo no próximo vídeo. 82. Como fixar a navegação ao topo no Figma: Olá. Neste vídeo, vamos criar uma navegação que fica na parte superior, onde as coisas deslizam para baixo. Vou fazer uma versão rápida porque a técnica atual é bem simples. E depois farei uma versão mais longa em que veremos um pouco de transparência e faremos uma pequena lanchonete na parte de trás. Tudo bem, vamos começar. Tudo bem, a maneira mais rápida é pegar a coisa que você não quer rolar. Você quer fixá-lo no topo. E você tem que mudar para o protótipo Isso é o que eu continuo esquecendo. Eu sei que meus alunos esquecem, então você pode esquecer se você tem que ir ao protótipo e dizer, essa coisa aqui selecionada Eu quero a posição. Você quer rolar com o pai? Isso é apenas rolar e ele se move. Eu quero dizer não, eu quero que isso seja corrigido. A outra coisa que você precisa fazer é acessar algo para onde rolar. No momento, meu conteúdo termina antes do final da minha página, a coisa não rola porque não há nada para onde rolar Vou duplicar isso, ok? E está exagerado aqui, e eu só preciso verificar se ainda está na página inicial Eu posso dizer porque está cortado. Você pode ver aqui as camadas da minha página inicial, o cartão, o novo cartão que eu fiz, cartão quatro que vou arrastar para baixo porque não sei, TOC Vá lá. Ok, um, dois, três, quatro está pendente, mas ainda faz parte da página inicial Cauda isso. Eu sei que está lá. Uma última coisa é que você precisa selecionar o quadro principal e dizer: você quer que eu faça com esse comportamento de estouro sob rolagem Eu quero rolar verticalmente, por favor. Agora vamos dar uma prévia, dê uma olhada. Espero que agora também tenhamos coisas para ver. A grande coisa a lembrar aqui é que há três etapas. Você precisa consertar a coisa. Você precisa gostar de protótipos, ok? Faça isso consertado. E então o transbordamento precisa ser vertical Está bem? Mas você não faz isso nesse objeto em particular. Isso é tudo que me esconde. Às vezes. Eu fico tipo, Ah, sim, faça a rolagem vertical. Perfeito. Está bem? É a moldura principal real, não essa. Você quer que esse transbordamento seja definido como vertical. E você também precisa de algo para rolar. Três coisas, você vale ouro. Tudo bem, vamos fazer o caminho mais longo agora. Um pouco de transparência, e quero mostrar apenas meu trabalho e há algumas pequenas coisas interessantes que você encontrará. Eu quero voltar para o Design View, então Shift E para me livrar principalmente dos fios. É difícil rolar muito, o que você faz é clicar nesta página inicial e dizer: não quero recortar o conteúdo Você não precisa ter isso ligado. Isso é mais parecido com um material visual. Você pode ter algo muito longo, vou duplicá-los Na verdade, vou voltar ao meu painel de Ativos. Eu criei um cartão? Não, não deveríamos ter criado um cartão. Fizemos isso na página inicial? Não estamos bem, deveria, eu deveria pegar este primeiro agora, transformá-lo em componente para que eu possa controlá-lo globalmente. Mas só neste vídeo, vou ignorar meus próprios conselhos e continuar com alguns deles. Esse aqui acabou fora de casa? Dê uma olhada. Então não, ele ainda está lá. Legal. Então você não precisa mover isso de volta para cima. Isso pode ser pelo tempo que quiser. Ok, eu vou até aqui. E quando eu pré-visualizar, ok, a pré-visualização, vou usar o Shift Space para pré-visualizá-la. Está bem? E eu vou rolar agora, e você pode ver que ele rola para baixo. Ainda está contido no telefone. Entende o que quero dizer? Mesmo que você tenha tornado a moldura mais longa. Obviamente, você precisa disso enquanto trabalha. Quando é publicado, fica preso dentro do telefone. Se você ativou ou desativou o recorte, não importa. A próxima coisa que quero fazer é adicionar um pouco de transparência ao meu NAV O que vou fazer é não ter uma navegação para meu celular como em um componente. Eu tenho tudo isso como molduras separadas. O que vou fazer é transformar isso em um componente, opção de comando K em um MAC, controle Alt K em um PC. Agora é um componente principal. copiá-lo ou recortá-lo, movê-lo para o meu painel de componentes porque estamos sendo super incríveis. Eu tenho o Nav aqui. Vamos dar a esse um nome amargo. Chame isso de NAV Móvel. Legal. Vamos voltar à nossa página. Estamos fazendo Hi Fi móvel. Eu vou dizer, é penal, onde você está? Está acordado? ' Então, traga-o para fora. Leve-o até lá, verifique se ele está na página certa. Isso é só uma verificação dupla. Às vezes, sim, ele está na página inicial, o que é bom. Eu vou deletá-lo, deletá-lo. Excluir. O que eu não quero fazer é arrastar o Nav do painel Assets toda vez, então vou copiá-lo E se você copiar uma instância, você simplesmente obtém outra instância. Colar. Novamente, se você clicar no nome, ele meio que sabe onde colocá-lo. E vamos deixar essa parte roxa um pouco transparente. Vamos clicar com o botão direito do mouse. Eu acidentalmente vou para o Maine lá de alguma forma Ou você pode simplesmente ir ao painel de componentes, e eu vou pegar meu roxo aqui e vou ter que quebrar o link porque não é transparente. Se eu fizer a aparição disso, ele fará a coisa toda. Eu quero quebrar o link para isso, e eu vou dizer que isso vai ser 80%. Tenho que fazer algumas idas e vindas nesta outra página. Vamos para o celular. O Hi Fi lava um pouco. Parece bom nesse contexto. Vamos dar uma prévia. De qualquer forma, desloque a barra de espaço e você verá que ela não está mais fixada. Vamos ligar tudo isso novamente . Você, meu amigo, lembra sob o protótipo. Scroll parent? Não, fixado na parte superior. Eu já configurei a página inteira para rolagem vertical , então isso deve funcionar Mude a barra de espaço Eu gosto quando ela sobe lá embaixo Como a cor lá. O que eu poderia fazer é escolher a cor mais escura Vou fazer isso da maneira correta desta vez, vou para o componente médio, e vou para o design, shifty Olhe para nós com atalhos. Vou escolher nossa biblioteca. Vou escolher a cor mais escura para começar, depois quebrá-la e reduzir para 80% Tudo bem. E todo o meu celular Hi Fi deveria ter sido atualizado. Lembre-se de que é por isso que os componentes são realmente úteis, pois eles atualizam todos eles de uma só vez Vamos ver nossa prévia. Vou fazer um reset. Eu já fiz. Sim, eu gosto mais dessa cor. Não gosto de Scott espremido no canto. Eu tenho que trabalhar nisso. Mas aí está. Rolando coisas. Você também pode fazer isso na parte inferior. É só mais um passo. Se você tem o que eles chamam de lanchonetes que aparecem na parte inferior. Às vezes, as pessoas têm uma navegação na parte inferior bastante comum. Vamos fazer isso com um retângulo. O que eu preciso fazer é dizer, vamos fazer isso com este aqui. Basta colocar a posição correta e depois vou movê-la porque esta é bem longa Vou dizer que você gosta de um pequeno navegador móvel aqui embaixo e eu vou ter uma cor de preenchimento de Vamos escolher essa. Vou quebrá-lo e torná-lo um pouco transparente. Apenas um pouco 90%. Eu realmente não quero isso lá. Quero que acabe com isso, cole. Está na posição certa, se você entende o que quero dizer, sabe onde está a parte inferior do telefone porque eu comecei com esta. O que precisamos fazer é selecioná-lo. Lembre-se de que, no modo protótipo, precisamos dizer que você tem o que é? pai da rolagem foi corrigido. Fique onde você está. Novamente, a página inicial ou todo o quadro precisa ser colocado na vertical. Já fiz isso. Vamos tentar. Barra de espaço do navio, role para cima e para baixo. Aí está. H. Uma coisa que você talvez tenha que fazer. Não preciso fazer isso neste caso . Às vezes, no design, as restrições do canto superior esquerdo funcionam para mim, porque se eu redimensionar minha página, vamos pegar meu quadro as restrições do canto superior esquerdo funcionam para mim, porque se eu redimensionar minha página, vamos pegar meu Ele está preso ao topo, então não está se movendo. Às vezes, o padrão . Esse cara aqui pode ficar na parte inferior Então, quando eu redimensiono minha página, ela fica presa nessa parte Então foi bom para o meu. Isso é algo que você pode encontrar dependendo do seu design. Aí está. Nós fizemos. Navegação pegajosa. Caneta até o topo. Lembre-o mais uma vez. Você precisa estar em um protótipo para que isso funcione Você precisa clicar na coisa. Você quer ser consertado. Em seguida, posicione. O pai da rolagem é alterado para corrigir. O quadro principal no qual você deseja fixar precisa permitir a rolagem vertical e você também precisa ter algo para rolar. Isso deve funcionar. Tudo bem, a navegação adesiva acabou. Te vejo no próximo vídeo. 83. O que são Equipes vs Projetos vs Arquivos no Figma?: Oi, todo mundo. Vídeo rápido. Eu quero apenas recapitular. Posso ficar um pouco confuso aqui na sua página inicial. Você tem equipes. Dentro dessas equipes, você tem projetos. Dentro desses projetos, você tem arquivos de design. Você também tem rascunhos. Vamos apenas cobri-los agora, arrumá-los em nossas cabeças. Vamos começar. Tudo bem Primeiro, vamos voltar para a página inicial, usar o ícone da página inicial na parte superior ou, se estiver em um navegador, você pode ir para o F na parte superior aqui e voltar aos arquivos. Não importa qual. Então você tem três tipos de arquivos, ou três tipos de coisas. Você tem arquivos, arquivos de design nos quais estamos trabalhando. Você tem projetos nos quais eles vivem, e todos eles estão sob essa equipe abrangente Tem projetos. Dentro desses projetos tem arquivos de design. Esses arquivos de design. Vamos dar uma olhada. Tenho minha equipe aqui, minha equipe de trazer laptops. Eu tenho muitos projetos em que trabalho e dentro de todos esses projetos diferentes estão os arquivos de design. Agora, esses projetos aqui, eu posso fazer um novo projeto. Digamos que estamos trabalhando em uma campanha de e-mail. Com quem eu quero compartilhar isso? Eu simplesmente não vou compartilhar com ninguém, e então eu posso colocar meus arquivos aqui. Posso ver meus rascunhos para dizer que posso estar trabalhando em alguma coisa e rascunhos não são mais ninguém que sua equipe possa Está escondido para você, a menos que você o compartilhe. Se você for, tudo bem, estou pronto para compartilhar com a equipe Posso mover esse arquivo para este projeto de e-mail aqui. Ok, é só uma forma de organizar tudo. Vamos dar uma olhada nos meus projetos agora, eles saíram de rascunhos. Está no meu projeto chamado Email e todos que têm acesso à minha equipe, todos com quem estou trabalhando, podem vê-lo agora. Faz sentido? A vantagem de movê-lo dos rascunhos para os projetos é, obviamente, que todo mundo pode ver, mas sua equipe também pode colaborar com Eles podem realmente começar a trabalhar nesse arquivo. Se estiver em rascunhos, eles não podem vê-lo, comentar como Doug fez, mas não podem trabalhar nisso Uma das limitações da conta gratuita é que você só pode ter um projeto e, dentro desse projeto, só pode ter três arquivos de design. A brecha da web é que você pode ter quantas equipes quiser Então eu vou dizer, tudo bem, eu estou na conta gratuita. Eu usei meu único projeto e três arquivos. Vou criar uma nova equipe. Então eu recebo outro projeto e três arquivos. Quando você começa a pensar na conta Pro, se você está usando muito o Figma e digamos que estou trabalhando com um cliente e tenho que compartilhá-los com duas equipes separadas e descobrir onde estão os arquivos e as duas equipes separadas que se juntaram, eu fico confuso Factível. Se você está trabalhando apenas em alguns projetos para vários clientes diferentes , isso funciona perfeitamente. É quando você trabalha para um cliente principal e tem muitos projetos, muitos arquivos, talvez precise fazer uma atualização Você pode alternar entre as equipes. Você pode ver que eu tenho essa outra equipe aqui. Foi criado por alguém com uma conta gratuita. Você pode ver que diz que é grátis. Eu não fui criado por mim, fui criado por outra pessoa. Eu só queria te mostrar como é. Eu tenho uma conta paga, mas a pessoa que criou a equipe não é a chefe, ela a controla, e só é permitido um projeto e apenas três arquivos aqui. Mais útil? Espero que sim Pode ficar um pouco confuso aqui, tudo bem, o que estou fazendo aqui? As equipes são como o cliente. Dentro da equipe há projetos, coisas diferentes nas quais você está trabalhando. Você pode ver aqui algumas das coisas para trazer nosso laptop, algumas das campanhas em que estamos trabalhando, páginas de destino. Eles estão todos em projetos separados e podemos colocar quantos arquivos quisermos lá Você pode ver que não somos uma grande empresa, mas você pode começar a ver que há muitos projetos em andamento. Então, precisamos da conta Pro. Aí está. Você tem uma equipe. A equipe tem projetos, e dentro desses projetos estão seus arquivos de design. Você também tem esses arquivos de design que podem residir em projetos, mas também podem estar em rascunhos, mas os rascunhos são um pouco limitados em termos do que você pode fazer Principalmente em torno do compartilhamento. Tudo bem Espero que tenha sido útil. Te vejo no próximo vídeo. 84. Variante de componentes interativos para caixa de verificação hover no Figma: Segure seus chapéus, pessoal. Temos que marcar uma caixa de seleção. Olha, alguém em nosso protótipo pode interagir e vamos passar o mouse Olha, você pode passar o mouse sobre ele e ele muda de cor. Tudo bem, eles são chamados de variantes de componentes interativos. Esse é um nome muito ruim. Eles não são tão difíceis. Fizemos componentes, fizemos variações. Vamos apenas adicionar um pouco de interatividade entre nossas variantes. É hora de Ha. Vamos entrar lá. Tudo bem, então vou começar com um simples botão antigo. Não é um componente. Não é nada especial. Este aqui é um layout automático porque eu quero o preenchimento, mas é isso Você pode começar com apenas um novo retângulo se não quiser estragar nada em que trabalhou e dar uma cor a ele. Faça com que pareça um botão. Não precisa de texto para isso. Então, eu vou fazer com isso. Em primeiro lugar, vou criar isso em um componente, Command Shift, K ou além do design. Isso funcionou? Eu trabalhei. O atalho funciona mesmo se você estiver no protótipo. Isso é legal. Caso contrário, projete e clique nesta opção aqui no topo que diz: faça um componente. Agora, como fizemos anteriormente, vamos criar uma variante desse botão. Nesse caso, vou apenas torná-lo mais escuro. Vou selecionar isso e vou descer para a minha cor e vou trocar essa pela versão mais escura Então, já fizemos isso antes, certo? Vou arrastar uma instância disso ou posso pegá-la do meu painel Ativos e simplesmente arrastá-la para fora de lá. Onde é chamado? É chamado. Não está na página de componentes. Está nesta nova página Hi Fi para desktop. Aí está lá. Você também pode arrastar isso. Isso não importa. Agora, o que fizemos antes é que só podíamos ir até esse cara e Tudo bem, há duas variantes disso, e eu posso alternar entre elas. Eu o selecionei e posso rolar até o topo e tenho essas duas variantes diferentes com nomes errados Mas agora podemos adicionar a interação entre os dois. Nós fazemos isso aqui no componente principal. Há uma variação aqui. Eu só quero clicar nisso. Eu vou para a minha seção de protótipos e vou dizer, eu quero que você vá até lá Até agora, nós apenas o arrastávamos para outras páginas para navegar Agora, o que podemos fazer é arrastá-la entre essas duas variantes, e poderíamos dizer que, ao passar o mouse, pairar o mouse Enquanto paira. Também queremos mudar para essa variante, que é minha segunda versão mal nomeada. E, instantaneamente, não estamos. Vamos fazer com que se dissolva. Agora, vamos dar uma prévia. Mude a barra de espaço É um pouco pequeno, e veja isso. Estamos fazendo coisas pairando. Meu mouse está muito estranho hoje. Aí está. Você entendeu. Isso. Está adicionando um pouco de interatividade aos componentes É isso que tem o nome maluco interativo porque é interativo. É um componente porque o transformamos em um componente e criamos variáveis desse componente. Não são variáveis, são variantes. Eu digo isso com bastante frequência. Sinto falta desses dois termos. Mas se você colocar um pouco de animação entre eles, você pode fazer coisas legais como essa. O truque não é esse, isso precisa estar em outro lugar. Precisamos desse cara. Na verdade, eu quero pegar tudo lá fora. Vou cortá-lo e colocá-lo na página certa. Vou acessar arquivos, componentes e vou criar este aqui. E você fica tipo, nós fizemos isso mais cedo. Podemos simplesmente montar esse ? Nós podemos totalmente. Enquanto estivermos no modo protótipo, posso dizer que isso acontece aqui Na verdade, eu queria ver apenas essa aqui, a versão mais escura. Ao clicar. Agora vou passar o Hover novamente enquanto estou pairando, desculpe, e vou dizer que mude para esta, dissolva, entre e saia Tudo bem, vamos pegar isso e colocar em uma de nossas páginas. Vamos continuar: Não podemos colocar o mouse em um celular porque descobrimos que você não pode passar o mouse sobre um Vamos fazer esses dois começarem. Vamos dar uma prévia, Shift Spacebar. Você pode ver. Você realmente não consegue ver porque é muito pequeno, mas paira. Lá vamos nós. Versão mais escura no Hover. Tudo bem, então o H é empolgante. Vamos fazer algo um pouco mais mundano. Vamos fazer Chick Mark. Alguém vai construir um bem rápido. Você pode me ver fazendo isso no modo rápido. Aí está. É só a lentilha e a elipse Vou selecionar os dois porque o que eu quero fazer é onde eles acabaram na página de recursos. Às vezes, é mais fácil simplesmente criá-lo a partir desta página, mas vou viver com isso. Esses dois aqui. O que eu gostaria de fazer é transformá-los em uma moldura e depois em um componente. Não preciso fazer um quadro primeiro. Se eu o tornasse um componente, ele o colocaria automaticamente em uma moldura, então é um pequeno atalho Aqui embaixo, eu posso convertê-lo em um componente. É porque estou no modo de sorteio. Quando você está no modo de design, ele não tem essa opção e você precisa usar o atalho ou, aqui no topo, há uma opção que diz: sumiu. Eu uso as cargas de atalho, que são o comando de opção K ou Control Alt K. Tudo bem, você entendeu. Vamos dar um nome a ele. Vamos chamar isso. Marca de verificação. Vamos fazer uma variante desse componente. Dois deles. Esse aqui embaixo, eu vou ligar. Vamos dar a ele alguns bons nomes. Primeiro de tudo, esse precisa estar no topo. Isso não será o padrão, mas neste aqui embaixo será chamado. Desligado. Não importa se você nomeia nas camadas ou aqui em cima. Esse aqui vai ser desligado. O que eu vou fazer é pegar esse carrapato. Eu apenas clico duas vezes para entrar nela. Eu vou até aqui e simplesmente desligo o globo ocular. Você pode excluí-lo. Como antes, precisamos adicionar essa interatividade dentro do nosso componente que tem variância Adoro esses termos. mudar para o modo de protótipo, Shifty Eu vou dizer que vou até este usando o botão “on click”, o que na verdade é muito bom agora. Queremos clicar nele e queremos realmente querer o contrário, não é? Se eu estivesse fazendo isso de novo, desligaria a marca na primeira. Ok, vamos mudar para aquele. Instantaneamente, vamos tentar. Então, vamos extrair uma instância disso. Preciso clicar no objeto real e arrastar uma instância ou arrastá-la da sua biblioteca. Vamos dar uma prévia disso. Shift Spacebar agora clique clique, clique, clique, clique, oh. Só foi para um lado. Então funcionou. E o que precisamos fazer agora é voltar aqui dentro do meu componente que tem variância, precisamos adicionar interação a ele, voltar dessa forma, e ele deve se lembrar da última coisa que você fez Tudo bem? Agora vamos tentar novamente e pronto. Clique, clique, clique, clique. É muito trabalhoso, Dan, marcar. Isso é o que estamos fazendo. E é muito útil ver a potência de ambos os componentes, ok Porque eu posso reutilizar essas cargas e cargas em meu documento Posso pegar emprestadas as de outras pessoas, ok? Mas agora eu tenho uma pequena unidade que pode alternar, mas pode fazer isso automaticamente, ok? Há uma interação com ele agora. Em vez de antes, nós o arrastamos e eu diria que, no projeto, eu trocaria a propriedade aqui. E escolha-o manualmente. Agora, as pessoas que testam meu site ou meu aplicativo podem realmente interagir com ele. São muitos termos. É um componente que tem uma variante e agora adicionamos alguma interatividade a ele. É por isso que são chamadas de variantes de componentes interativos. Tudo isso é tudo. Fizemos uma caixa de seleção. Nos vemos no próximo vídeo. 85. Toggle Switch de Micro Interação no Figma: Olá, vamos fazer uma microinteração. Fora dessa chave seletora. Você está tipo, já fez uma chave seletora, mas veja isso. Quando eu clico nele. Olha, isso fica verde. E veja essa interação adorável. Adoro aprender essa coisa. Vamos aprender a microinteração. Então, basicamente, uma microinteração é semelhante à que fizemos no último vídeo quando tínhamos uma caixa de seleção, mas uma microinteração adiciona um pouco de animação para ajudar a comunicar o que está acontecendo A acrescenta um pouco de alegria à operação. É chamado de microinteração. Vamos fazer isso acontecer. Vamos usar todas as ferramentas que já aprendemos. É muito fácil de fazer. Pare de clicar nele. Tudo bem. Vá em frente. Tudo bem. Vou começar com essa chave seletora que fizemos anteriormente no exercício de sombra projetada Vou fazer o meu um pouco menor. É apenas uma elipse com outra elipse no topo com Está bem? Volte para o exercício de sombra projetada. Se você não fez isso, não precisa de uma sombra projetada. Vou mudar o meu para não ter isso. Vou ter um preenchimento parecido com um cinza porque está apagado. Esse círculo precisa ser um pouco assim. E, assim como antes, vou fazer com que isso seja um componente. Vá lá. Opção K, opção de controle K em um PC. Portanto, é um componente. Esse componente precisa de duas variantes. Nesta variante inferior, eu vou ter o círculo deste lado. Ok, então precisamos fazer o protótipo como antes. Estou usando o Shifty, vou dizer que este se resume a O que isso vai fazer? Quando eu toco nele? Ótimo, vai mudar para isso. Mas a diferença aqui é definir a instância ou dissolver, vamos usar a animação inteligente. Enquanto estivermos aqui, podemos muito bem fazer com que este volte aqui quando clicado Ele deve fazer todos os padrões. Vamos tentar. Lembre-se de que você não pode visualizar o conjunto de componentes. Você precisa arrastar uma instância dela, não a coisa toda, uma dessas partes. Clique duas vezes para entrar e eu apenas pressionei opção e arrastei outra versão ou segurei a tecla Alt ou você pode arrastá-la de Agora, eu tenho uma chave seletora bastante grande Vamos dar uma prévia, com a barra de espaço Shift, e ela começará na página certa. Espero que sim. Faz. E pronto. Clique. Agradável. Preciso brincar com a flexibilização porque é um pouco estranho Vamos mudar a cor também, estamos aqui. Podemos manter isso aberto. Você fica lá, e eu vou dizer que esta parte inferior aqui voltará à visualização de design. Vai mudar para um botão pegajoso. Cor que é verde porque estou ligado agora. Excelente. E como a animação inteligente é ativada, ela deve funcionar Vamos tentar. Alternar, alternar Você pode ver como é útil ter isso aberto o tempo todo ou, como eu, eu o abriria nessa outra janela da área que abri, mas você não consegue ver aquela. Tem piadas do meu pai listadas. Tudo bem, essa é uma chave seletora legal. Vamos mexer com a flexibilização bem rápido, porque isso é um pouco estranho. Está bem? Então, vamos voltar ao modo de protótipo, e eu vou clicar neste, e vou dizer “relaxe Vou entrar e sair com calma. Deixe-me fazer isso um pouco mais rápido e o mesmo para os outros. Você tem que clicar nos dois fios. Está bem? Essa vai ser fácil de entrar e sair, e vai durar 0,2 de segundo. Tudo bem, vamos tentar isso agora. Ok. Melhor. E quanto à facilidade de entrar e sair? De volta. Vamos fazer isso pelos dois. Agora faça isso. Há um botão animado. Tudo bem. Isso é usar exatamente os mesmos exercícios do último projeto. Só quero mostrar alguns exemplos diferentes, e incluímos uma animação inteligente e uma mudança de cor Eu escrevi isso de mudança de cor. Mas a animação inteligente parece legal. Não consigo parar de clicar nele. É um pequeno brinquedo para brincar Tudo bem. É isso mesmo. Fizemos outra variante de componente interativo, e essa animação aqui seria considerada uma microinteração, apenas um pouco de algo que é um pouco mais empolgante e um pouco alegre, ajuda a comunicar o que estamos fazendo. A cor é boa. O equilíbrio é muito claro. Microinteração. Tudo bem. É isso mesmo. Te vejo no próximo vídeo. 86. Projeto do curso 18 - Microinteração: Hora do projeto da aula. Vamos fazer algumas microinterações ou algumas variantes de componentes interativos. As microinterações são melhores. Marque os três que fizemos na aula, então marque Eu quero que você o transforme em um tipo de permissão de boletim informativo por e-mail, não precisa ser exatamente isso, mas você pode ver aqui que eu o transformei em entrar em nossa lista de e-mails, pequena marca de seleção Eu quero que você também faça o botão Hover e a chave seletora Certifique-se de que , ao criar seus conjuntos de componentes, eles não acabem apenas em todas as suas páginas, mas também na página de componentes , e mantenha-os bem separados. instância real do componente precisa estar em suas respectivas páginas. O Google Switch encontra algo criativo para fazer com isso. Mas, na verdade, o que eu quero fazer é fazer uma captura de tela desse grupo e enviá-la para a seção do projeto Agora, se você sabe como gravar sua tela, adoraria ver um vídeo dela, usando o link do Vmeo ou do YouTube. Você sabe como fazer isso? Isso não é essencial e compartilhe nas redes sociais o que você fez. Adoro ver isso funcionando, especialmente. Tudo bem, feliz Micro Interaction Building. 87. Como mudar a miniatura para arquivos do Figma: Cada um. Um simples. Vamos atualizar a miniatura de nossos arquivos de design porque, por padrão, ela apenas escolhe as primeiras páginas e, às vezes, você provavelmente já está vendo seus rascunhos e dizendo: O que esse ainda faz? O que é esse? O que está acontecendo aqui? Vamos atualizar isso, especialmente em nosso projeto, para que pareça algo representativo do projeto nos projetos e fique inclinado, o que o torna legal. Eu sou tão chata. Vamos entrar lá e mostrar atualizar essas miniaturas apenas para facilitar um pouco a vida de encontrar arquivos Tudo bem, então estou no meu projeto de equipe. Vou até a Scott Wallet e você pode ver a miniatura, que não é muito Você pode entrar nesse arquivo e dizer que, basicamente, ele está apenas mostrando as páginas principais, o que está aqui. Você pode simplesmente mudar o que está na primeira página. Ou você pode acessar uma de suas páginas que diz desktop i Fi e, para dizer página inicial, você pode clicar com o botão direito do mouse no nome e dizer definir como polegar É mais representativo, certo? Eu volto para a casa aqui. Não é atualizado. Você tem que fechar o Figma, abri-lo novamente, e agora esse é o seu polegar. Essa é uma boa maneira de fazer isso. Outra forma é ir até muitas pessoas. Ou seja, eles entrarão no documento, criarão uma nova página, chamarão de capa e a colocarão no topo. Não há nada sobre isso no momento. Mas o que podemos fazer é dizer, eu quero enquadrar. Quero uma imagem de, se você acessar esta lista, há uma chamada comunidade Figma e esse arquivo de capa do plug-in Arquivo de capa é o que queremos. Este é o padrão de 1920 por 1080 pixels de largura, e podemos colocar uma imagem nele Eu vou procurar alguma coisa. Vamos usar dispositivos móveis, dispositivos móveis de alta fidelidade, e vou fazer uma captura de tela de tudo isso Olha. Ok, e volte para minha capa, encontre minha captura Aí está lá, coloque-o nessa imagem e use uma imagem Em vez de copiar e colar molduras e outras coisas de outras páginas, você pode fazer isso, mas acaba com duplicatas de Você também perde o que é muito real. Tudo tem que estar do seu lado. Eu não sei por quê. Mas eu não conheço a indústria de design de UX quando você está exibindo alguma coisa, ela precisa ser virada para o lado, como uma arma em filmes, um pouco Tudo bem, vou usar essa cor de preenchimento. Vou usar o mesmo que isso. OK. Oh, vai ser ótimo. Vou apenas verificar se isso está definido como miniatura É aí que você abre muitos modelos. E essa primeira página que você verifica não faz nada. Tente clicar nas coisas, geralmente é apenas uma captura de tela das coisas Há um elemento de marketing quando se trata de encontrar modelos. Mas para você, você só quer que seja útil, não precisa entender, mas não sei, parecem regras de design de UX. Tenho que sair do Figma e voltar logo. Ei, Presto, olhe para nós. Tudo sombrio no ângulo. Defina uma moldura como miniatura apenas para facilitar ou crie uma capa, a página deve estar na parte superior e inclinada. Aí está. Está bem? Só para contornar a dor de, vou te mostrar alguns dos meus rascunhos, você fica tipo, O que é isso? O que é isso? Este aqui nem tem uma página porque você pode estar trabalhando na segunda página. Esse aqui, não é muito útil. Esse aqui, o que é mesmo isso? Esse aqui? Novamente, é difícil saber o que essas coisas estão criando. Você consegue ver o que elas fizeram? Vamos realmente abrir este e ver o que eles fizeram. A propósito, não tenho ideia. Então, eles criaram um moodboard de primeira página, ou seja, criaram isso em um texto Na verdade, eles os projetaram especificamente para isso. Em vez de apenas uma captura de tela. Você pode dizer que eles se esforçarão para projetá-lo. Se você olhar mais um exemplo, veja este, por favor, seja JB. Acabei de mandar todo mundo fazer um JP. Oh, há uma imagem de capa. Oh, perfeito. Então, nesta capa, eles até usaram a palavra certa, e você pode ver que, na verdade, é só que, se eu der uma olhada, é. Se você clicar nela, é só uma imagem. Então, eles projetaram isso em figma ou em outra coisa e simplesmente colocaram isso como uma imagem Na parte superior. Aí está. No final, uma pequena maneira de arrumar seus arquivos. Tudo bem. É isso mesmo. Como fazer um polegar agora. Oh, ótimo vídeo, Dan. Tudo bem. Vamos pular para o próximo vídeo. 88. Visão geral rápida dos sites do Figma: Todo mundo. Bem-vindo à visão geral super rápida de algo chamado sites Figma Projetamos nosso site. Agora queremos realmente construí-lo. Você tem algumas opções. Você pode procurar um desenvolvedor, reconstruí-lo em algo como o WordPress ou usar o que eles chamam de dragon drop ou Wizzywig O que você vê é o que você obtém como editor, onde você usa uma abordagem mais visual em vez de uma abordagem de codificação para web design Os sites Figma são novos. É um concorrente direto de algo como o Webflow. Projetei em sigma, agora precisamos construí-lo. Os sites da Infigma são uma forma de fazer isso. É um curso completo por si só, mas eu queria dar mas eu queria dar uma olhada rápida agora para ter uma ideia do que é e por que ele pode ser ideal para você. Jogue alguma coisa para ele, Dan. Tudo bem, então esse é o arquivo de design que fizemos. Comecei a reconstruí-lo nos sites da Infigma, o que faremos neste tutorial E você pode ver aqui desktop, tablet, celular. Vou pré-visualizá-lo e você pode ver que no desktop, fica assim, mas você pode ver quando ele se transforma em tablet Ok, eu troco meus cartões. Quando eu começo a usar o celular, isso muda novamente. É tudo muito lindo e responsivo. É muito legal. É chamado de sites Figma. Deixe-me dar uma olhada rápida agora. Lembre-se, apenas uma rápida visão geral, não se assuste. Não é difícil, mas é diferente. Mais do que um módulo neste curso. Mas eu quero te mostrar de qualquer maneira, vamos começar. Tudo bem, sites Figma Vou embora, você pode clicar no novo botão e acessar o site da Figma ou a página inicial, você pode criar e escolher um site De qualquer forma, temos um novo site. O legal disso é que ele está usando muitas das mesmas ferramentas do Figma Existe o Figma design, o que estamos aprendendo a criar sites Depois, há a parte do edifício, que são os sites da Figma. Vamos começar com um site em branco. Você pode começar com um modelo, que oferece desktop e uma versão móvel. Algumas coisas que precisamos fazer se quisermos mover coisas de um lado para o outro. Podemos copiá-lo e colá-lo. Eu funciona totalmente. Vamos começar dizendo, certo, construímos nosso site em torno desse site 14 40. O padrão aqui é 12 80. Vamos apenas ajustar isso. Há muita coisa para copiar e colar porque não é tão fácil quanto criar um site Felizmente, nosso celular é o que é nosso celular? Nosso tamanho de celular é móvel. Hi Fi será. Escolhemos um dos tamanhos do iPhone. É esse 393. Vamos apenas garantir que o celular seja 393. Você pode fazer isso, podemos fazer uma visualização em desktop também. Desculpe, uma visão de tablet. O que vamos fazer é nos aproximar e dizer: “Eu também quero projetar meu tablet”. Precisamos criar um site que tenha boa aparência tanto no desktop quanto no tablet e no celular. Você também pode fazer isso no figma enquanto estiver viajando. Nós apenas mantemos esse curso um pouco mais rígido removendo o tablet, mas você precisa considerar isso Tudo bem, outras coisas que vamos precisar. Vamos fazer algo simples. Vamos desenhar alguma coisa. Vamos pegar. Vamos desenhar uma caixa de heróis FK para a ferramenta de moldura Todos esses atalhos que você aprendeu e encontrou durante o curso, você ainda os tem. Vou arrastar isso para fora e vou colocá-lo nas laterais aqui, assim. Vou dar a ele uma cor de preenchimento de qualquer coisa. O legal disso é que toda vez que você cria em algo no desktop, ele mostra como fica no tablet e no celular. Infelizmente, na verdade, isso está funcionando. Você pode ver que este aqui tem uma pequena lacuna aqui. É porque há uma pequena lacuna aqui. Não grudou na lateral. Eu deixei uma pequena lacuna, então vou me certificar de que ela seja arrastada até lá Espero que, deste lado, eu diga que você é arrastado, eu quero encaixar nas bordas e depois neste Digamos que eu queira que esteja a essa distância das bordas. Que neste caso é 27 por acaso. O que eu posso fazer agora é ir e pré-visualizá-lo. Você pode apertar o botão de visualização, ou eu acabo apertando muito esse Ele vai pré-visualizar a visualização do desktop, a visualização do tablet e a visualização móvel. Vá. Isso é chamado de design responsivo, e é aqui que passamos a maior parte do tempo quando estamos criando um site Precisamos projetá-lo no Figma, fazer com que os clientes assinem, e eles dizem: Sim, adoraram Você tem que construí-lo para fazer toda essa elasticidade. Porque se eu olhar para isso, posso arrastar isso de um lado para o outro, então posso dizer: Bem, seu laptop é desse tamanho, meu laptop é daquele tamanho. Você precisa dele para responder a todos os tamanhos diferentes. Vamos fazer um pouco de responsividade. Continue voltando para essa guia. Você aperta um pequeno botão de voltar lá. Dentro dessa moldura, vamos digitar um pouco. Eu tive todos os tipos de atalhos lá. O que eu desenhei? Não tenho certeza. Eu ouvi um monte de coisas. O que vamos fazer é pegar a ferramenta de digitação, clicar aqui e eu vou digitar. Eu só vou aumentar a fonte. O legal disso é que vamos escolher uma fonte realmente gigante, caso ela apareça aqui. De volta à minha ferramenta de movimentação, ela aparece aqui e aparece aqui. Você realmente não pode ver isso neste. O painel Layers aqui, eu tenho desktop, tablet e celular. Se eu adicionar alguma coisa à área de trabalho, isso se aplica a todas elas. Está aqui no meu celular. Se eu clicar nele, aqui, onde ele está aqui? O que eu preciso fazer para o celular é decidir, na verdade, eu preciso que isso esteja em duas linhas. As três linhas, e eu quero que a fonte seja menor, algo apropriado para o meu dispositivo móvel. Aqui vamos lá. O que a Figma está fazendo ou os sites da Figma estão fazendo é dizer que, bem, nesta página aqui, vou colocá-la no topo sem um bom motivo Vamos pré-visualizá-lo. No desktop, é grande e no meio, no tablet , está de cima para baixo aqui e aqui embaixo no celular, é uma fonte menor e está dividida em duas linhas. Essa é a diversão de criar para a web. Você tem que pensar em todos esses tamanhos diferentes e depois ignorar os pedaços intermediários, você fica tipo, o que você está fazendo aqui, ok? É apenas uma visão geral rápida. Vamos construir algo, alguma coisa. Vamos nos livrar dessa mensagem da Hera. Se eu excluí-lo da minha página inicial ou do meu desktop, ele desaparecerá de todos eles. O que eu quero fazer agora é ver fazer essas cartas a partir desta. Primeiro de tudo, nossos cartões, usaremos o de desktop. Nós o construímos em torno de nossas colunas. O legal disso é que, no momento, não consigo copiar e colar. As colunas lembram o Comando G. Mas eu sei o básico. Vamos até aqui e, digamos, cabelos de mesa Um guia de layout ainda está aqui? Incrível. Aprender duas ferramentas em uma, o que é muito legal. Eu quero que sejam colunas. Eu gostaria que eles fossem um contador de 12 membros. Eu quero ter uma margem nas bordas de 100 e acho que a diferença era de 32. Então, agora isso combina. Nesses , eles não se aplicam. Eles não funcionam muito bem. Esse aqui, o que eu poderia fazer em um tablet, talvez eu diminuísse para seis porque é mais fácil de lidar. Margens de 50, e eu vou reduzir a diferença para 24 no celular, vou descer para seis e vou ter margens zero nas bordas, e a diferença vai ser 16 Você pode personalizar todas as coisas para diferentes. Eles os chamam de pontos de interrupção. Isso significa que quando esse tamanho chegar a isso, qualquer coisa abaixo de 1.400, quebre e faça essa coisa nova, que no nosso caso são apenas as colunas Vamos pegar algumas coisas. É aqui que é divertido. Eu posso copiar isso e eu posso vir aqui e colar. Ou se você simplesmente colar à toa, pode acabar se eu não tiver nada selecionado, e eu colar, escolhi colocá-la como uma nova página e você não pode simplesmente arrastá-la facilmente Eu vou desfazer isso. Vou entrar na minha área de trabalho e clicar em colar. Você notará que ele aparece em todas as minhas páginas diferentes. Vamos pegar os outros dois e você. Copie para este design, certifique-se de que na minha área de trabalho, clique em colar, e eles devem aparecer em todos eles. O que vamos fazer é ir, R, eles estão todos bem alinhados Perfeito. Tudo bem, então eu projetei isso para desktop. Isso parece ótimo. E o que você acaba fazendo é fazê-lo funcionar primeiro no desktop e depois fazer esses outros um pouco mais tarde. Porque o que eu quero fazer é dar uma prévia. Vamos ver o que parece em casa. Está meio que funcionando. Está fazendo algumas coisas estranhas com as lacunas, você pode ver Então, o que eu posso dizer é que voltando aqui, eu posso dizer, nós fomos Este está apenas usando a esquerda. Então, vai estar a 100 pixels da esquerda, independentemente do que eu faça. O que eu poderia dizer é ir para a esquerda e para a direita. Agora, se pré-visualizarmos, OK. Você pode vê-lo lá? Ele é muito maior? Você pode ver que ele se alonga porque está usando a esquerda e a direita para suas dimensões, em vez de apenas a esquerda Essas são as coisas que são úteis quando você as aprende de uma forma que você gosta, sim, eu entendo Mas quando se trata da criação do site, é muito mais importante. Eu vou fazer o mesmo aqui. Eu vou dizer que você e você vão ficar à esquerda e à direita, e espero fazer um teste Há muitos testes. Você faz alguma coisa, testa, faz alguma coisa, testa, nunca pula Mas nessa visão de desktop, é muito bom. Está a 100 pixels da borda e é responsivo. Está tudo mole Quando chega ao tablet, diz, Boop, ainda está funcionando Então, agora podemos voltar ao tablet e consertar esse. Seis, faça o desktop funcionar, depois vá para o tablet e diga Tudo bem, eu quero que você esteja lá Eu quero que você cubra. Você pode ver, eu preciso que eles sejam menores. Seja que nós os tornamos responsivos, lembre-se de que, mais cedo , você disse, fizemos isso no canto inferior esquerdo e você ficou tipo, nós o tornamos responsivo Tipo, por que nos preocupamos em fazer isso? É porque agora aprendemos isso. Este pequeno objeto aqui embaixo está preso no fundo. Lembre-se de que aprendemos na parte inferior e fizemos com que ela ficasse na direita. É para que possamos fazer isso mais tarde, podemos ir, perfeitos. Facilmente redimensionado Faz sentido quando estamos fazendo Figma, faz muito mais sentido quando você está realmente projetando ou construindo o site O engraçado aqui é que há um, dois, com o terceiro pronto? Assim como no celular, talvez você precise acessar a visualização do tablet. Eu tenho algumas cartas mal nomeadas. Vamos fechar tudo isso. Eu tenho 18, que eu posso ver, 19, que eu posso ver e 20. De alguma forma, está lá. Esta é uma versão beta, então haverá coisas que melhorarão com o tempo, que podem não acontecer com você. Agora, o que eu vou fazer aqui? Esse é o enigma, tipo, Oh, aqui, O que você pode fazer é dizer no tablet, eu vou aparecer e eu vou dizer, você vai embora. Você está lá, ainda está lá, só não pode ser visto. No celular, este aqui, posso decidir que, em vez de ser o primeiro, vou reorganizá-lo Eu vou dizer que você é o primeiro, você vai até as bordas. Agora, em figmacytes, se você arrastá-lo até a borda e ele se encaixar, ele o mudará para a esquerda e para a direita Você verá este configurado para a direita. Mas se eu disser que você está aqui e está lá, você vê que foi o que aconteceu. Obviamente, você pode alterá-lo manualmente, mas isso será feito automaticamente. No meu dispositivo móvel, quero prolongar essa coisa. Ok, mais, mais, mais. Você verá que este está preso na parte inferior porque acha que é isso que você quer Não, eu quero que seja na parte superior, para não seja redimensionada e mova para a parte inferior Você usa a parte superior como quiser ponto de ancoragem e o que eu poderia fazer é amadurecer um pouco mais Na verdade, as colunas aqui não são muito úteis. No celular, vou até o globo ocular, desligá-las e encontrar o cartão que falta Para onde ele foi? Ele estava no quadro 20. De alguma forma, ele está lá. Então, até brincamos com o pedido, ok? E o mais bonito é que ele está usando as mesmas ferramentas. Assim como o Webflow faz isso, o Framer faz isso. Existem muitas outras ferramentas que são como os sites Figma É como uma cópia direta delas, mas usa a mesma linguagem e a mesma terminologia Você pode copiar e colar do Figma. E quando você está projetando, depois de criar alguns sites, ao criar essa coisa, você pode muito bem se esforçar agora para que essa coisa seja, você sabe, fixada na se esforçar agora para que essa coisa seja, você sabe, parte inferior e direita, porque você sabe que isso economizará seu tempo mais tarde quando estiver criando o site. Tudo bem, vamos pré-visualizá-lo. Visualize o tempo todo. E se você não pré-visualiza por um tempo e a quebra, não tem certeza do que quebrou aquela quebrada. Ok, então você está bem. Oh, você está trabalhando bem, e você está trabalhando bem, também. Está bem? O legal disso é que você consegue ver o tablet? livrei desse , desliguei-o, mas ele volta a ligar no celular, e eu mudei a ordem dele. Incrível. Há uma coisa estranha em sites em que eles têm essa barra, a barra deslizante que eu não gosto, meio que cobre O site real que publicaremos com esse pequeno pedaço aqui, mas com pequenas barras deslizantes no caminho Espero que algo que desapareça como. Dê uma olhada no meio, porque parece bom aqui. O que acontece quando eu estou fazendo aquela coisa de novo, que fazia no desktop. O desktop funciona, mas no tablet não. Eu preciso ir para o Tablet. Arquivo errado. Afaste-se disso. Eu quero ir para o Tablet, onde você está? Basicamente, o que fizemos para a página inicial, dissemos: vamos fazer com que você não seja à esquerda, mas à esquerda e à direita, à esquerda e à direita Visualize novamente. Espero que agora, às vezes você tenha que ir 21, outro ponto de interrupção Está bem? Oh, muito melhor. Tem esse tipo de coisa, você pode ver agora como criamos um telefone tão grande, mas também desse tamanho, mas também desse tamanho. E um tablet que por acaso é tão grande, mas um pouco maior, eu sei que é tablet agora. Esse é um telefone gigante e esse aqui, tablet. Mas quando fica maior, maior, maior, maior. Então, eventualmente, quando chega ao tamanho da área de trabalho, diz , certo, desktop, você pode ter quantos pontos de interrupção quiser. Você pode escolher o hábito de continuar voltando lá. Você pode ter um desktop super grande que seja maior que 14 40. O que você faz com isso? Talvez você tenha um quarto. Agora, eu escolhi algo que estava fazendo sentido para você agora no seu ritmo. Este precisa ser um curso completo nos sites Figma , porque o web design é muito maior do que eu posso fazer com um pequeno módulo aqui Se você estiver interessado, deixarei um link nos arquivos de exercícios para um curso de sites da Figma Eu ainda não fiz um, mas se você estiver interessado, você pode se pré-registrar e se eu tiver juros suficientes, eu o farei. Por enquanto, porém, algo como Webflow funcionará. Esse é um curso que eu tenho. Você pode dar uma olhada de onde você tirou isso. Isso não queria fazer é te deixar drogado e seco neste curso de, tipo, o que eu faço a seguir? Freqüentemente, um desenvolvedor cria seu site para você e ele não usa os sites da Figma Eles codificarão o site, usarão alguma outra estrutura, talvez palavras de oração, outra coisa, e usarão seus designs não como inspiração, mas extrairão as imagens, o texto, os tamanhos, todas essas coisas que podem sair Mas agora, com algo como sites Figma ou fluxo da web, você pode criá-lo agora sozinho Você pode publicar, vamos publicá-lo. Publicou nosso site, ok? Ainda não o está publicando em um domínio adequado. Você pode colocar isso. Ok, eu vou dar uma olhada nessa aqui, veja a publicada. Vamos dar uma olhada. Estou abrindo no meu navegador. Na verdade, isso está na Internet. Eu poderia enviar isso para alguém agora, ok? E não está fazendo muita coisa. Veja, exceto que tem pontos de interrupção de varredura que acabamos de descobrir. Vamos fazer algumas últimas pequenas coisas apenas para dar a você mais uma ideia de como isso funciona. Criamos apenas a página inicial. O que podemos fazer é como antes, duplicar essa coisa Essa vai se chamar Minha página de recursos. Nesta página de recursos, vou me livrar dessas caixas na minha página de recursos, vou torná-la muito grande, vou colocar algum tipo nela. Vou apenas ajustá-lo para os diferentes pontos de interrupção Estou fazendo coisas muito ruins. Vamos fazer isso. Todos os recursos que aprendemos sobre interações, posso dizer, vamos mudar para o Command E, o que é incrível. Mesmo atalho do design Figal. Posso dizer que quando alguém clica aqui, vai até a página de recursos Agora, quando eu visualizo isso, faço meu site, uso meus botões, eu o transformo em um botão clico nele e vou para minha página de recursos, que criei com base no meu arquivo de design FIGMA Você também pode fazer todas as outras coisas , coisas normais do site. Se eu for para as configurações. Posso dizer que aqui está o título do meu site, posso adicionar todas as minhas coisas de SEO. Eu posso adicionar o Google Analytics. Há muitas coisas que você pode fazer. Você pode conectar um domínio real. Então, pode ser trazer seu laptop.com, criar o site para o cliente, testá-lo porque é rápido Falamos no início sobre por que nos preocupamos em usar o Figma, não apenas criar um site, porque é muito rápido criar um conceito, criar um wireframe, testá-lo, criar um design, aprová-lo por todas as partes interessadas e depois começar a construir aprová-lo por todas as partes interessadas e depois começar a e depois Porque então, quando você constrói, você tem que passar muito tempo ou não. Você tem que gastar muito tempo. Vamos sair daqui. Decidir isso sobre isso precisa ser feito à esquerda e à direita. Isso vai para uma caixa? Como isso flui? Já no arquivo de design do Figma, você pode simplesmente arrastar um botão para dizer que está lá OK. Mas quando você está projetando um site, o que acontece em todos os tamanhos, você tem que pensar sobre isso, A. Isso é anexado à parte superior e anexado à esquerda? Qual é o tamanho no celular? Como ele se ajusta às que estão entre os tamanhos? Demora muito mais, mas quando você tem a aprovação do arquivo Figma, o arquivo de design, basta entrar no modo Build Gosto muito do modo de construção. Está tudo bem. Você começa a fazer isso. É como resolver um quebra-cabeça. Tudo bem. Essa é a rápida visualização dos sites. Você não vai ser bom em sites depois de assistir a esse tutorial, mas eu queria te dar uma ideia do que são sites e também por que nos preocupamos em fazer todas as coisas no Figma, talvez especialmente esta aqui, talvez tenhamos feito isso talvez especialmente esta aqui, talvez tenhamos feito É legal. Nós emprestamos o recurso, mas agora sabemos por que fazemos esses recursos é que precisamos torná-los responsivos em algum momento, mesmo em nossos designs. É útil simplesmente poder copiá-los e colá-los, colocá-los no celular, redimensioná-los, mas fica ainda mais especial quando você faz esse trabalho, que pode ser publicado Tudo bem, meus amigos, esse é o dos sites Figma, lembra Use o link nos arquivos da classe. Vou colocá-lo no topo agora. Se houver um curso, esse link irá diretamente para o curso real dos sites Figma, vou apenas avaliar o interesse de vocês Tudo bem. Sites Figma, pronto. Há muitos wafflings. Me desculpe. Vamos ver alguns vídeos mais sucintos. Te vejo na próxima. 89. Como exportar imagens a partir do Figma: Primeiro, veremos as configurações de exportação de imagens do Figma Você precisa tirar uma imagem do Figma e enviá-la para alguém Vamos examinar os diferentes formatos. Está bem? Falaremos sobre os diferentes tamanhos e quando usar cada um Tudo bem, vamos começar e exportar imagens do Figma. Tudo bem, vamos falar sobre uma espécie de exportação de imagens de uso geral Então, vamos falar sobre alguns formatos de arquivo e fazer isso. Então, eu quero exportar uma imagem. Vamos começar com apenas essa imagem aqui. Está bem? Eu quero exportá-lo. Você não usa exportação de arquivos como em muitos programas. Na verdade, há esta unidade aqui que eu quero selecionar, adicionar uma exportação. Está bem? Que tipo de exportação? Ah, adicionou Effex. Exportação Reden Em seguida, ele fornecerá algumas opções sobre o tipo de configuração de exportação que você deseja usar. Esses são os principais grupos de alimentos, PNG, JPEG, Fici PDF Quando se trata de imagens, geralmente é mais útil usar JPG, mais JPIG Ótimo para imagens, deixa o tamanho do arquivo muito pequeno. A desvantagem é que ele não tem transparência, mas mantém os tamanhos dos arquivos muito pequenos Você verá muitos JPigs on-line e fazem parte do web design Clique em exportar e ele o colocará em algum lugar. Vou colocar o meu no meu desktop em uma pasta de imagens que acabei de criar. Tudo bem, vamos com os outros formatos. Quando o PNG seria bom? É quando você tem algo que precisa de transparência, veja que algo está mascarado Digamos que esse aqui. Então, se eu exportar isso como JPEG, mas você também pode adicionar outro para dizer, eu quero um PNG também no X. Falaremos sobre Xs em um segundo, mas eles são exatamente do tamanho que eu fiz Nesse caso, esse tem 314 pixels quadrados. Se eu exportar, você notará que ele escolhe o nome de qualquer grupo ou quadro que você tenha selecionado Você pode ver que isso é só uma imagem? Vou chamar isso de carteira IMG Star. Então, se você nomeá-lo em seu painel de camadas à medida que avança, será mais fácil quando você estiver exportando Eu só vou escolher lá, dar uma olhada. Ok, você verá que eu tenho duas imagens. Um deles é JPEG O problema com isso é que um JPEG não tem transparência Você não consegue ver através dele, enquanto o PNG tem uma boa transparência Você pode ver até o fundo. Então, se eu precisar disso para acessar um site e você precisar ver a cor do plano de fundo, você precisa de um PNG, mesmo que seja uma imagem, mas porque você precisa de transparência, estamos fazendo PNG. O outro aí é SVG. SVG é bom para qualquer coisa que seja vetorial. Significa gráfico vetorial escalável. O que eles querem dizer com isso é que vamos encontrar algo escalável Vamos para nossa página de componentes. Quer encontrar um logotipo que existe lá. Sabemos que se eu usar minha ferramenta K e escalá-la, essa coisa crescerá para sempre. É feito de gráficos vetoriais, pequenos pontos de ancoragem e outras coisas, então é muito útil ser um SVG porque pode ser escalado em vários Lembre-se dos sites da Figma, podemos escalar as coisas para cima e para baixo. É por isso que isso é bom , o tamanho do arquivo é pequeno e tem transparência. Nesse caso, diríamos que vou voltar para minha ferramenta de movimentação. Eu vou dizer que não afeta. Vou encontrar a exportação e vou dizer que você é o melhor como SVG É exportado e é por isso que o X desaparece. Não precisa dele em nenhum outro tamanho pois ele pode ser dimensionado até o infinito Vou salvá-lo, exportá-lo e tenho esse SVG Muitos logotipos. O meu é branco sobre fundo branco. Bom trabalho, faça. Vamos mudar para o modo claro. É exportado novamente. Vamos substituir esse. Agora, às vezes, o SVG visualiza uma palavra como aqui, mas agora é escalável Super pequeno, 15 kilobytes. Por outro lado, digamos que eu queria um PNG muito grande porque preciso ser grande porque ele precisa aumentar e diminuir a escala, enquanto meu SVG faz isso Eu digo, eu quero um PNG. Vou exportar este e vamos comparar os tamanhos. Aqui. Eu tenho dois PNG, que são 12 pixels, menores que o meu SVG, mas estão fixos nesse tamanho Não consigo fazer com que seja maior do que isso. Caso contrário, a qualidade ficará ruim. Vamos trazê-los para Figma. Aqui estão meus dois arquivos. Você já pode ver o PNG. Tem pequenos pixels. É um formato baseado em pixels, enquanto o SVG aqui que acabei trazer pode ser escalado para o infinito É por isso que eu o uso para muitos ícones e logotipos, esse tipo de coisa. Vou desfazer antes de escrever todos os meus designs Você também pode usar um PDF Isso é bom. Um PDF pode ser útil se você estiver fazendo isso. Vamos às minhas páginas e quero exportar tudo isso. Vou exportar esse quadro inteiro. Eu vou dizer, saia da minha ferramenta de escala, volte para a minha ferramenta MO e eu vou dizer, vamos exportar esta não como uma imagem grande, mas como um PDF. Eles são fáceis, são compartilháveis. Os PDFs são ótimos porque incluem imagens em pixels, mas também o vetor que é escalável É uma mistura de JPEGs e SVGs. É incrível. Exporte aquele cara. Vai usar o nome da moldura, vamos dar uma olhada e temos um PDF que podemos compartilhar com as pessoas. Incrível. Ah. Por que eu quero ter um menu? Vamos dar uma olhada por que eu não tenho um menu. Isso aqui, oh, não é da minha necessidade estar ligado. Posso colocá-lo? Não está preso lá. Entrei, dei uma volta acabei na minha página inicial Agora vamos exportar. Vamos falar sobre os Xs. Então, digamos que eu tenha essa imagem aqui. Eu quero exportá-lo. Eu quero fazer isso como um JPEG em um X. Eu só quero dizer que qualquer coisa maior que 620 de diâmetro, vai começar a ficar pixelizada O que você pode fazer é decidir que vou exportar o dobro do tamanho que preciso, então será lançado na Come on maths 12 40. Eu fiz. A, na verdade, você pode exportar duas versões dele, uma em JPEG de um X e outra em dois X. Você precisa conversar com seu desenvolvedor sobre o que eles querem Eles querem duas versões? Eles querem um pequeno e um grande? E o que eles farão é codificar. Quando essa imagem for exibida em uma tela de baixa qualidade, ela carregará o tamanho pequeno. Carrega bem rápido porque não adianta ter essa versão big mama jammer, que tem o dobro do tamanho em uma tela muito pequena Já em uma tela traseira grande e alta, ela mudará para essa. Vamos dar uma olhada em como ele o exporta. Substitua-o. O meu se chama , vamos dar uma olhada. Eu tenho esses dois aqui. Uma é a carteira e essa aqui é a menor. Esse é o tamanho que eu tinha no Figma. Essa é a exportação do segundo. Você precisa garantir que sua imagem original seja alta qualidade para ela possa ser exportada com o dobro do tamanho. Converse com o desenvolvedor, veja o tamanho que eles querem. Pode ser que você exporte apenas o dobro do tamanho. Porque lembre-se de quando demos uma olhada nos sites e também quando estávamos fazendo os sites Figma ou este. Na verdade, qual é? Esse aqui. Por causa disso, veja, ele aparecerá desse tamanho em uma tela, mas desse tamanho em outra ou desse tamanho em outra. Você pode ver que é muito? É por isso que geralmente exportamos o dobro do tamanho quando exportamos imagens para nosso site Às vezes, porém, você precisa de algo para exportar em um tamanho específico. Digamos que você tem isso e precisa sair em um tamanho específico, você pode se livrar disso e apenas dizer, veja essa lista suspensa aqui, há uma largura na parte inferior aqui. Isso é só por exemplo. Se eu clicar aqui, 512 W significa apenas a largura. Posso dizer que quero que este tenha 100 pixels largura porque preciso dele para algo para o meu site. Vou lhe dar outro nome. Vamos chamar isso de 100 pixels. Eu apenas presumo pixels. Quando você diz W, vamos bater. Vamos dar uma olhada. Temos nossa carteira que é super pequena. Aí está. Tudo bem. Digamos que você faça algumas alterações, precise exportar tudo novamente. Você fica tipo, eu tenho que clicar em cada um deles? Você não pode simplesmente ir até o F aqui, ir para Arquivo e ir para Exportar, o que ele fará é lembrar todas as coisas pelas quais você adicionou a pequena opção de exportação dois. Você pode ver que aqui estão minhas quatro coisas, você pode decidir que eu não preciso de você e de você. Eu só preciso dessas duas atualizações. Vou exportar todas essas imagens novamente, no mesmo lugar. Eu vou substituí-los. Qualquer coisa que você precise exportar, basta pegá-la e dizer aqui embaixo, clique em Exportar, escolha o que quiser Nesse caso, quero que seja JPEG. Na verdade, não preciso exportar agora, posso simplesmente acessar minhas configurações gerais de exportação e elas serão incluídas nessa lista. Vamos. Aí está a página inicial deles. Estrondo. E terminamos. Tudo bem, essa é uma visão geral rápida de como obter imagens do Figma Apenas um tipo de formato de arquivo de imagem de uso geral. Vamos nos aprofundar um pouco mais nos próximos vídeos. Tudo bem, vamos começar . Tudo bem, estou de volta. Eu disse para entrar. Eu quis dizer que te vejo no próximo vídeo. Tem sido um longo curso. Nós dois sabemos disso. Ah. Tudo bem, te vejo no próximo vídeo. 90. Como compartilhar seu documento com clientes e investidores: Olá. Neste vídeo, vamos exportar nossos arquivos Figma prontos para nossos clientes Portanto, nossos clientes, talvez partes interessadas, não outros designers, desenvolvedores, especificamente, pessoas que não são realmente usuários do Figma ou designers de UX Então, deixe-me mostrar as diferentes opções para eles. Tudo bem, então analisamos anteriormente compartilhamento e podemos copiar o link ou enviar um e-mail para eles O único problema com isso é que eles acabam nesse tipo de mundo de, tipo, terra da MGF, que alguns clientes, você sabe, isso só vai lhes causar problemas Está bem? Além disso, é chamado de lixo e você precisa arrumar, o que também vimos anteriormente Você pode passar por isso e selecionar esses caras e dizer: Tudo bem, eu quero que você exporte como um PDF. Essa é outra maneira de fazer isso. Há uma opção aqui que diz: Tudo bem, sob este FK aqui, você pode dizer: eu gostaria que você arquivasse quadros de exportação para PDF Isso não funciona muito bem porque você acaba com isso, que ele explora cada quadro do meu documento, independentemente do que eu tenha escolhido Eu exportei tudo isso. Isso é um quadro, isso é um quadro, então ele exportou todos eles. Você pode arrumá-los depois usando, sei lá , o acrobat reader ou o que quer que você use para PDF, mas não é muito útil Obviamente, uma que é útil é a captura de tela, mas há outra ferramenta aqui embaixo. Então, examinamos a ferramenta Slice. Posso arrastar uma caixa ao redor desse grupo aqui, digamos que eu queira que essa parte seja exportada Eu vou me mudar Ok, qualquer outra coisa que esteja escondida lá. Deixe-o bem arrumado. A opção de fatiar aqui. Essa pequena linha pontilhada acaba aqui no seu painel de camadas Se eu rolar até o topo, há uma coisa chamada fatia um. Eu vou ligar para ele. Fluxo de tarefas e o que é isso? Ecom. O legal disso é que essa pequena linha do lado de fora daqui só vai exportar tudo o que está dentro dessa caixa. Não é um objeto real. É como uma janela de exportação. Se eu for para Exportar agora, se eu tiver selecionado, posso clicar aqui no meu painel LAS. Posso dizer que quero que você exporte como Ch Pi. Eu vou exportar isso. Aí está meu fluxo de tarefas e ele exporta quase tudo que está lá Ele se livrou dos nomes na parte superior. É só um pouco mais arrumado. Se você disser: Ei, por que você não apareceu mais cedo, especialmente se você é um usuário do Windows e a captura de tela é um pouco mais difícil Me desculpe Principalmente porque isso só faz com que haja essa caixa aqui, ela atrapalha. Agora que você é um usuário muito bom do Figma, pode começar a usá-los Você pode ajustá-los depois. Você pode excluí-los. Clique aqui, exclua-os. Você pode desenhar caixas em torno de muitas coisas diferentes e simplesmente exportar tudo dentro delas. É a ferramenta de corte aqui embaixo. Vou voltar atrás. Outra maneira legal de compartilhar seus arquivos com um cliente que é mais uma apresentação é pegar esta página inicial aqui e copiá-la Eu vou para Plus ou você pode voltar para casa. Você está procurando os slides. Como sites e esses outros. Tudo isso é diferente da ferramenta que estamos aprendendo, que é o design Figma, usada por designers de UX Você também pode usar o Figma para slides, como uma apresentação em PowerPoint Vou começar com apenas um slide e vou começar com um modelo. Ele vai escolher um aleatório. Vamos ver este. Com o que queremos começar? Vamos adicionar todos os slides. legal disso é que é um software diferente , mas agora que você tem boas habilidades em design do Figma, poderá usar os slides do Figma com muita facilidade. Vamos pegar. Acabei de copiá-lo, membro Posso colar meu design, usar minha ferramenta de escala e adicioná-la a uma apresentação para meu cliente. Talvez eu decida isso e comece a usar esse modelo. O legal desses modelos é que, se eu clicar em segundo plano, posso começar a brincar com o estilo do modelo. Eles têm toda essa hierarquia em funcionamento. Talvez eu desligue. Existe esse botão de mixagem. Um modelo de remix, basta clicar nele e encontrar um que você goste bastante gosto de nada disso. Continue clicando para sempre. Oh, eu gosto desse. Você pode voltar, Undo? Você pode Você pode passar e dizer, na verdade, eu quero que todo o meu “O que é isso” destacando isso É meu H dois, então vou clicar em segundo plano. Eu vou dizer que os dois H agora não são discos. Eles vão ser arroz picante. Vou examinar todo o seu documento e tudo será atualizado. Eles criaram estilos. Você pode ir muito longe, bem rápido. Não vou ler um tutorial completo sobre os slides do Figma, mas é uma ótima maneira de ser profissional rapidamente Sem sair do Figma, você pode copiar e colar coisas do seu arquivo de design sem precisar usar o PowerPoint. Eu odeio o PowerPoint Eu não odeio o PowerPoint. O PowerPoint me odeia. Essa pode ser a melhor maneira de começar a compartilhar. Você pode compartilhar esta apresentação em vez do arquivo Figma sozinho. Você pode simplesmente compartilhar o link para o arquivo de design do Figma, o que pode ser confuso para Você pode usar apenas o antigo Export PDF, ou pode usar essa fatia para desenhar uma caixa ao redor deles, ou pode investigar os slides do Figma e fazer mais uma Tudo isso é compartilhamento para clientes, clientes, não para outros designers, não para desenvolvedores. Faremos isso a seguir. Te vejo no próximo vídeo. 91. Conversando com seu desenvolvedor no início do processo de design no Figma: Oi, todo mundo. Pensei em pular para fora da tela. Faremos isso ao vivo. Trabalhando com seu desenvolvedor. Não existe forma oficial de trabalhar com um desenvolvedor, algum tipo de processo oficial de transferência, ok Basicamente, o que acaba acontecendo é que isso vai depender do desenvolvedor e do seu relacionamento com ele. exemplo, o objetivo, e onde tudo isso é incrível , é incluir o desenvolvedor no início do processo, ok? Surpreender alguém com um design finalizado não é divertido. O desenvolvedor achará que ressentimento provavelmente é uma palavra muito forte, mas, tipo, ele não teve nenhuma contribuição Então, ok, esse designer me deu essa coisa para construir, e eu vou construí-la porque eles disseram que eu precisava. exemplo, o que você quer é eles façam parte dos wireframes para lhe dar conselhos, parte do tipo de primeiros quadros que você Por exemplo, o que você quer é que eles façam parte dos wireframes para lhe dar conselhos, parte do tipo de primeiros quadros que você usa para dar conselhos, para que não haja apenas aceitação, mas sintam que fazem parte do processo. Especialmente quando você é novo, receber feedback mais cedo significa que você não vai se transformar em um desastre Muitas vezes eu entendi, tipo, que a linguagem pode ser muito simples. Não precisam ser reuniões oficiais. Pode ser como, Ei, Sandy, você poderia, você sabe, posso te mostrar rapidamente as molduras da minha esposa? É aqui que estou pensando em ir com o projeto? Só quero seu feedback. Sabe, você poderia me dar 5 minutos, ok? Ou, Ei, esses são os primeiros quadros. O que você acha? Como há muitos trabalhos em que presumi que algo era muito difícil de fazer, então não fiz isso, apenas para descobrir, na primeira conversa, que eles disseram: “Ah, eu ia fazer isso, mas acho que vamos levar isso para a fase dois, porque parece um trabalho árduo”. O que você acha? E eles dizem: Não, temos outra coisa que é muito parecida. Nós já construímos esse, você sabe, esse tipo de estrutura que já foi construída para essa outra coisa. Acabamos de colocar isso lá, e eu vou mudar isso. E você fica tipo, eu não sou engenheiro ou desenvolvedor, então há muitas coisas que eu acho muito difíceis, mas acontece que não são e o contrário. Está bem? Há coisas que estou projetando e é como uma peça central do que eu quero. Tipo, pode ser como um valor. Eu fico tipo, Oh, vamos ser incríveis. E então você conversa com o desenvolvedor logo no início, e eles dizem que isso vai levar o dobro do tempo do projeto ou adicionar toda essa complexidade extra. Você realmente precisa disso? E quando você pensa: Não, você fica tipo, faremos isso na fase dois, fase dois é uma boa maneira de dizer, faremos isso mais tarde, mas provavelmente nunca, você sabe, chega cedo, você pensa: Não, você fica tipo, faremos isso na fase dois, a fase dois é uma boa maneira de dizer, faremos isso mais tarde, mas provavelmente nunca, você sabe, vamos embaralhar para que possamos concluir esse projeto E tudo isso acontece nesse primeiro tipo de diálogo. Então, sim, há um processo de transferência quando tudo está aprovado, mas essa não deve ser a primeira vez seu desenvolvedor deve ver seu projeto. Então, trabalhe abertamente, peça que comentem, envolva-os e descubra por que e como eles gostam de trabalhar. Você sabe, que tipo de coisas eles querem ver na entrega para que você não goste, espero que eles gostem e enviem um e-mail com todos os seus links e imagens, e todos queiram alguma coisa Eles vão querer ver maquetes, protótipos e um monte de imagens, Eles usarão suas maquetes para calcular espaçamento, preenchimento e esse tipo de coisa, se for um novo Mas eles não usarão seus retângulos, ok? Eles apenas examinarão o espaçamento e, sim, reconstruirão tudo, principalmente em código, ok, exceto coisas como imagens Então, sim, existem algumas consistências entre a transferência Faremos um pouco mais em um segundo, mas converse com seu desenvolvedor e descubra quem ele é. Seja proativo Não espere até que, tipo, departamento de engenharia mágica faça isso. Pergunte. Você pode ter um Você sabe, você pode ter um líder de produto ou um gerente ou você pode estar trabalhando por conta própria e terceirizando, ou talvez o cliente faça isso por você Descubra quem é. Fale com eles. Faça do desenvolvedor seu amigo. Se você é o desenvolvedor, isso facilita as coisas. Mas, certo, é assim que se trabalha com seu desenvolvedor. Vamos começar e eu vou te mostrar mais algumas coisas táteis que podemos fazer no 92. Modo de desenvolvimento e entrega para um desenvolvedor: Neste vídeo, veremos algo chamado modo Dev dentro do Figma É voltado para desenvolvedores. Nós, como designers, podemos marcar coisas prontas para o desenvolvedor ver, e o que eles podem ver são coisas como, certo, essa é minha fonte. Esse é um código CSS que o faz funcionar para que eles possam fazer exatamente como você o projetou. Digamos que estamos aqui para ver esse logotipo aqui. Isso permite que eles entrem e digam, certo, logotipo aqui. Eles podem baixar seu próprio SVG e dar a eles o poder baixar seus próprios arquivos em vez de você exportar tudo pronto Tudo bem, vamos entrar no Modo Desenvolvedor. Tudo bem. Primeiro, o Dev Mode é um recurso pago no Figma para acessá-lo Você tem uma opção aqui embaixo. Você pode simplesmente mudar para ele. Fizemos design, no qual passamos a maior parte deste curso. Fizemos um pequeno desenho que muda as ferramentas, e o mesmo acontece com o modo Dev. Muda as ferramentas e você obtém um novo conjunto de ferramentas aqui embaixo. O que você pode fazer no modo de design é decidir: Tudo bem, vamos para o Hi Fi móvel Digamos que a página inicial esteja pronta, tudo assinado e pronto para nosso desenvolvedor. Você pode. Essa pequena opção aqui que estamos ignorando para o curso, você pode dizer que Mark está pronto para o Dev Clique neste e clique aqui ou você pode simplesmente dizer que este quadro está pronto para desenvolvimento. Ele foi assinado, pronto para ser usado, mesmo que não haja nada nesta página, e então podemos ir e compartilhar e podemos entrar aqui e compartilhar este link do modo Dev. Eu copiei isso e digamos que eu envie isso para o meu desenvolvedor. Isso é o que eles veem. Para o desenvolvedor, eles precisam de sua própria licença, então precisam assinar e podem vê-la assim. Eles podem ver que esta aqui está marcada como desenvolvedor, esta está pronta para DV, mas eles não podem fazer muita coisa a menos que tenham uma conta paga Mais barato do que a conta normal da FIGMA. Está bem? Então, vai depender de onde você está trabalhando. E se você usa muito esse fluxo, é muito útil que eles tenham uma conta de desenvolvedor para que possam fazer algo chamado inspecionar os elementos Vamos dar uma olhada. Isso é o que seu desenvolvedor verá quando estiver examinando seu arquivo. Se eles tiverem uma conta paga, poderão ver todas as minhas colunas que estou usando, o que será muito útil para eles saberem quais tamanhos de coluna você usou. O que é muito legal é que eles podem entrar e dizer: Tudo bem, veja esse Nab que Dan fez Isso lhes diz que eles são as partes importantes disso. Você pode ver que usei 12 e 12 na parte superior, em termos de preenchimento de pixels e 16 nas laterais Aqui, deste lado, ele começa a oferecer a eles tamanhos úteis para desenvolvedores. Além disso, nem tanto o tamanho do design, ele fornecerá a eles o CSS ou qualquer outra estrutura que eles possam estar usando o Android OOS, dependendo se é um site ou site, juntamente com outras propriedades CSS que possam ajudá-los a criá-lo mais rapidamente, cores e rolar para baixo Até mesmo os ícones que eu usei aqui. Aí está o logotipo. Eles podem clicar nele e dizer que, sozinhos, você pode enviar os SVGs, dizer os tamanhos Eles podem resolver isso a partir do visual. Mas isso lhes dá larguras, alturas e tamanhos de preenchimento específicos e permite que eles digam, certo, que podem baixar seus próprios SVGs, dá a eles o controle de baixar o que quiserem, em vez você ter que exportar tudo Digamos que essa pequena unidade que construímos aqui, membro, seja meio redimensionável, fique no canto inferior direito Isso lhes dá a opção de extremidade flexível. Você não precisa realmente saber o que é isso. É útil se você conhece um pouco de tipo de codificação. Não é essencial. Você pode conferir meu curso de web essentials. Se você quiser fazer isso, comece a codificar você mesmo. Mesmo que você não queira codificá-lo sozinho, pode ser útil apenas obter uma compreensão básica, sei lá, da linguagem, especialmente dessa opção flexível É chamado Flexbox. Você não sabe, isso fará sentido para seu desenvolvedor e lhe dará um pouco mais de vantagem em termos de eles querem usar essa fonte, que fonte é essa? É o Source Sans Pro. Qual é o peso? Normal, que é nosso 700. Lembre-se de que aprendemos que, anteriormente, os pesos das fontes no código costumam ser citados na casa das centenas Eles podem copiar e colar o texto dele. Eles podem adicionar comentários, que retornarão diretamente ao seu arquivo de design onde poderão perguntar: Ei, o que você está fazendo aqui? Por que isso é assim? Você se importa se for assim? Converse com seu desenvolvedor, veja se ele já usou Figma antes e se isso é útil Às vezes, os desenvolvedores querem apenas uma maquete JPEG e todos os ícones, logotipos e imagens exportados e eles os criam sozinhos porque talvez seja assim que funcionam O que você provavelmente precisa fazer é eu volte à minha visão de design, não ao desenvolvedor Você provavelmente precisará dar a eles uma página. É muito comum dizer, pronto? Para DIV. O que eu faço é ter meus arquivos de trabalho, mas também tenho esse arquivo aqui no topo. Talvez esteja bem no topo para que eles possam encontrá-lo facilmente. Eu só vou copiar porque o meu desktop, só para Hi Fi, está muito bagunçado. Eu poderia pegar esses que eu sei que estão prontos e simplesmente copiá-los, copiá-los, colocá-los em sua própria página, prontos para DIV Cole-os, marque-os como prontos só porque, mas diga a eles que esta é a página eles deveriam tirar da final final Porque para você, é útil ter todos os arquivos de trabalho aqui embaixo Você pode ver que este aqui tem um pequeno indicador dizendo que algo nesta página está pronto para ser desenvolvido. Você pode ver isso aqui no celular Hi Fi que fizemos anteriormente. Se você, como designer, pode estar apenas marcando-os como prontos para o desenvolvimento e pronto. Você mesmo pode. Se você é o desenvolvedor, pode alternar esse modo de desenvolvimento aqui e começar a extrair informações úteis, extrair o texto, os pesos da fonte, as cores, os estilos, as sombras do trabalho que você passou anos. Encontre lá, você verá que está Esse é o código CSS para fazer isso acontecer. Exatamente como você conseguiu. E até tem o nome. Estilo super incrível de Gold Mines. Esse é o DevMde dentro do Figma. Depois de terminar aqui, você pode voltar ao modo de design. Se eles tiverem uma conta exclusiva para desenvolvedores, terão apenas o Dvmode e não poderão entrar no modo de design Mas para mim, que codifica um pouco, posso alternar entre os dois Observe que , depois de preparar sua página, você pode decidir, tudo bem, a página inicial aqui. Na verdade, vou voltar à visualização de design Essa página inicial aqui foi selecionada, vou compartilhá-la e vou compartilhá-la para copiar o Dev Você pode ver que o link realmente começará aqui nesta página inicial Oferece a eles o lugar certo para começar. Tudo bem, então essa é uma rápida corrida pelo Dvmode. Depende de como você está trabalhando com um desenvolvedor, se ele quer apenas maquetes visuais e várias imagens que você possa exportar. Nós fizemos isso. Podemos selecionar isso e dizer: neste caso, quero exportar essa imagem provavelmente como JPEG, fornecer a eles um arquivo com tudo o que há nele e soltá-la com apenas uma maquete de talvez um PD ou JPEG do talvez um PD ou JPEG Tudo bem. Esse é o modo Dev. Nos vemos no próximo vídeo. 93. Projeto do curso 19 - Termine seu design: Tudo bem, é hora do projeto da última aula. Espero que você os tenha achado úteis. E o que vamos fazer aqui é terminar nossos projetos, ok? Deixamos algumas lacunas principalmente ao redor desta página de recursos. Use-o como um campo de testes. Quero que você expanda seus recursos que temos desta página inicial em seus próprios tipos de cartões semelhantes aqui, esses blocos Eu não me importo com a aparência deles. Se você está procurando inspiração, como se eu tivesse acabado de bater em algo como drible, ok, eu digitei recursos da interface do e meio que dei uma olhada e fiquei tipo, Oh, isso parece meio legal aqui E é para isso que eu uso a inspiração. Você pode ver minha prisão aqui. Seu fluxo de alta fidelidade no desktop, quero que você tenha quatro páginas inteiras. Então, qualquer coisa que você perdeu ou deixou para trás, eu quero que você termine. Você pode ver aqui que concluí minha página inicial, meus recursos, meu checkout e minha página de confirmação na minha versão para desktop Qualquer outra coisa que você esteja perdendo também. Certifique-se de usar seus estilos de tipo e cor. Quero que você pratique com mascaramento, um ou mais efeitos, e você pode usar texto reservado para o texto, especialmente em sua página de recursos, ou praticar com as opções de IA dentro do Se você não tiver a conta paga, pode usar algo como o GBT, que é gratuito e fará o mesmo Pedi que me desse um parágrafo ou uma página de marketing proteção RFID para uma carteira, e foi isso que me deu Eu pedi pontos principais, e isso é o que ele me deu, e eu fiz isso para todos os três. Eu até morri um pouco lá embaixo. Então, eu quero que você termine e faça uma captura de tela ou você pode usar sua ferramenta de fatia ou exportar Depende de você, mas eu quero ver esses quatro quadros. Faça o upload para a seção de projetos e eu adoraria, amaria, amaria. Se você ainda não fez isso, compartilhe nas redes sociais. Se você quiser, pode dizer onde você está. Uh, você está fazendo este curso com Dan. E aqui está o link. Isso também seria útil. Compartilhe em qualquer um desses ou em todos eles. Você também ganha pontos Comer de bônus opcionais se usar o Hi Fi móvel. Reduzir isso para uma versão móvel será divertido e interessante. Experimente se tiver tempo. Mas para todos os outros, eu só quero que você termine essas quatro páginas. Eles não precisam ser perfeitos ou bonitos. Eu só quero que você preencha as quatro páginas. Eu adoraria vê-los. Tudo bem, é isso. Divirta-se com o projeto da última aula. Ufa, terminamos. Você vai fazer isso e eu te vejo no próximo vídeo. 94. O que vem a seguir?: Oh, não, é o fim. Não vá. Uh, estamos juntos há muito tempo, mas esse é o fim. Uh, adivinha? Podemos sair mais, se você quiser. Você pode fazer outro curso. Tenho muitas outras que podem ser interessantes para saber onde você está na Figma Existe um Figma Advanced. Essa é provavelmente a próxima etapa. Tenho cursos sobre Photoshop, Illustrator em design, After Effects Premiere Pro O Blender é outro bom. Eu co-ensinei isso com Robin, então veja isso. Essa é outra boa próxima etapa. Mas eu só queria dizer, parabéns para você e para mim, nós dois conseguimos, ok? Esses cursos não são fáceis de fazer e não são fáceis de fazer. Está bem? O que outras pessoas estão fazendo scrobbling, você está aqui ficando mais bom no Então, você mesmo na parte de trás. Bom trabalho. Gostaria de agradecer rapidamente aos editores, Taylor, Jason e Edgar, ok, por seu trabalho neste curso Eu não faço tudo sozinho. Então, também me diga o que você achou de toda a experiência, ok, minha parte, o que eu poderia fazer melhor. Deixe-me saber os comentários. Eu os leio. Gosto de dar uma olhada e ver como está o curso, ver a proporção de pessoas felizes e insatisfeitas, o que poderia ser melhor no próximo curso, o que você gostou desse curso. E, geralmente, sim. Você pensa nisso? Deixe-me saber nos comentários. Tudo bem. Esse é o fim. E o que eu gostaria de fazer e encerrar é dar permissão para você se chamar de designer de UX. Você está agora. Algumas pessoas me perguntam , tipo, como eu sei quando estou? Você sabe, como faço para credenciá-lo? Não há credenciamento, ok? É um estado de espírito, e pode ser difícil sair pelo mundo se você é padeiro designer gráfico ou mecânico e depois diz: quando vou me tornar designer de UX? Tipo, você é um designer de UX agora. Parabéns. Você não é muito boa. Você está apenas começando. Mas é mais ou menos assim que funciona. Está bem? Não se envergonhe. Na próxima parte, quando alguém pergunta o que você faz, diga que você é um designer de UX, ok? Só estou começando. Você é novo, ok? Mas você é. Você pode ser um designer de UX experiente que acabou de aprender Figma, então você pode dizer isso com orgulho Mas eu gostaria de lhe dar permissão para dizer que você é um designer de UX. É difícil saber quando isso é apropriado. Agora é a hora. Você fez um grande curso longo. Você aprendeu muito. Vá em frente, seja um designer de UX. Ok, fim, fim, fim. É isso mesmo. Espero que nos vejamos novamente em outro curso Triste. Tchau. Preto gordo. Vou girar.