Fundamentos do UI/UX Design do Figma

1. Introdução ao curso de treinamento dos Fundamentos do Figma: Pessoal, meu nome é Dan Scott, e bem-vindo ao Figma Essentials. Juntos, você e eu, vamos aprender tudo o que precisamos saber para começar como designer de UX na Figma. Usaremos esta ferramenta de design UI UX para criar belas interfaces. Também criaremos alguns protótipos envolventes e também analisaremos algumas das expectativas do mundo real de você como um novo designer de UX. Agora, este curso é destinado a pessoas que são novas no design, novas no design da experiência do usuário, mesmo que você não tenha certeza do que é realmente o design UX, não se preocupe, vamos começar logo no início e trabalhe em nosso caminho passo a passo. Primeiro, descreveremos o resumo e como trabalhar com uma persona UX, então você aprenderá a criar wire-frames realmente simples. A partir daí, aprenderemos como implementar cores e imagens corretamente em seus modelos de alta fidelidade. Você aprenderá o que fazer e não fazer para escolher fontes para aplicativos web e móveis, aprenderá como criar ícones, botões e todos os tipos de componentes de interface do usuário. Você aprenderá todos os termos assustadores, como componentes , restrições e variância multidimensional. Eles são todos muito fáceis quando você os conhece. Mas também facilite nossas vidas usando kits de interface do usuário e plug-ins gratuitos para a Figma para acelerar nosso fluxo de trabalho, criaremos um guia de estilo simples pronto para a entrega de colegas ou clientes. Você saberá como fazer microinterações, transições de página e animações simples e avançadas . Antes do final deste curso, você terá protótipos totalmente interativos prontos para testes de usuários até colaborar com outros membros da equipe e exportar os arquivos certos prontos para entrega para seu desenvolvedor ou software engenheiro. Você tem tarefas que defini durante todo o curso para que você possa praticar e desenvolver suas habilidades, além de ter algo único para o seu portfólio no final. É hora de se atualizar e vai da Figma zero para o herói Figma. Inscreva-se e te vejo na aula. Essa camisa fazia muito sentido. Faz muitos sentidos mais tarde, quando você conhece Figma um pouco mais, mas no momento, percebi que provavelmente vai atravessar simplesmente assustador, mas é feito agora e vamos ter que viver com isso, então inscreva-se no curso. Vejo você lá dentro. 2. Introdução ao treinamento do Figma: Olá. Você conseguiu entrar. Parabéns. Bem-vindo ao curso. Em primeiro lugar, você precisa baixar os arquivos de exercícios. Haverá um link nesta página aqui. Faça o download desses. Nesses arquivos de exercícios, estarão os arquivos que usamos para o curso. Mas também haverá uma folha de atalho. OK. Não vamos nos aprofundar muito nos atalhos do Md aqui, mas existem apenas alguns super úteis que você precisará conhecer até o final do curso Então, imprima essa folha e você pode circular as que você realmente gosta. Espere aí, só estou parando aí. Esqueci de mencionar que você precisa se inscrever no Figma. Opa. Você pode usar esse link na tela aqui. E se você usar meu link, Figma me dá um pouco de crédito Nada diferente para você, e isso me ajuda a continuar fazendo o que faço. Tudo bem. Taylor, você pode retomar o vídeo. Taylor é nosso incrível editor de vídeo, e ele acha que eu não sei, ele pausa meu rosto nessas posições estranhas . De propósito. Eu sei que você sabe. Ou use a versão do navegador. Então cadastre-se, use a versão para navegador ou baixe a versão para desktop. Não há absolutamente nada, você sabe, nenhuma diferença entre os dois. Vou usar a versão para desktop. E porque sou velho e gosto que as coisas estejam no meu desktop sem um bom motivo porque são exatamente iguais. Então, isso não importa. Você também saberá, ao assistir apenas a um pouquinho do meu vídeo, que eu falo rápido. Eu tomei muito café. É cedo. Eu diminuo a velocidade. Está bem? Mas se você achar que eu falo muito rápido, ou talvez o inglês não seja sua primeira língua, e achar meu sotaque um pouco difícil, e achar meu sotaque um pouco difícil, aparecerá em todos os vídeos, é como uma pequena engrenagem, ou está lá embaixo, e você poderá clicar nele e me atrasar para uma versão mais lenta Parece um pouco estranho, mas talvez seja mais fácil para você E essa é a versão gratuita, a versão paga. Vamos usar a versão gratuita na maior parte do curso, principalmente porque é incrível. É incrível o que a Figma decidiu permitir que seja gratuito versus o que é pago No final do curso, mostrarei por que você pode querer passar para o pago. Mas você pode chegar tão longe quanto um designer profissional usando a versão gratuita, mas mostrarei as vantagens de pagar mais tarde Além disso, o Figma está sempre se atualizando, o que é incrível. Para mim, como designer, significa que novos recursos são lançados o tempo todo. Eles reformulam as coisas para torná-las mais simples e fáceis e incluem recursos mais avançados É muito doloroso para mim como instrutora, porque, basicamente, eu sei disso Assim que eu terminar de gravar este curso, eles vão mexer alguns trechos Portanto, fique de olho nisso. Se for algo fundamental, vou regravar os vídeos. Se forem apenas coisas pequenas, dê uma olhada. Muitas vezes, pode ser apenas uma mudança de nome. Está no mesmo lugar, é o mesmo trabalho, mas talvez eles tenham chamado isso de outra coisa ou esclarecido um pouco Confira também os comentários abaixo. Ou eu vou deixar um comentário se for apenas uma pequena mudança ou outros estudantes também o farão. Então, fique de olho nisso. Oi, aí. Uma pequena nota rápida. Se você achar que seu Figma não se parece com o meu, talvez esteja vendo o novo design UY que a Figma acaba Você pode fazer com que volte a se parecer com o meu. Se você estiver lá embaixo, poderá clicar no ponto de interrogação preto no canto inferior direito da tela e, em seguida, ir para a opção que diz: volte para a interface anterior e você verá o Figma exatamente igual ao meu Ambos funcionam da mesma forma. Eles acabaram fazer algumas mudanças na interface do usuário. Você vai. Continue. Sim, para muitas atualizações. Reserve para receber muitas atualizações. Tudo bem, vamos para o próximo vídeo. 3. Para que serve o Figma e ele faz a programação?: Vamos falar sobre o que serve Figma e para que não serve. É incrível na prototipagem rápida de coisas como sites e aplicativos. Ele faz outras coisas que abordaremos um pouco mas é a principal ferramenta de um designer de UX ou UI, e seu papel na criação de qualquer wireframes, que estamos fazendo esse curso de aparência muito rápida para um aplicativo ou um site, parece exatamente com um site. Mockups de alta fidelidade deste site com interatividade também. Isso me leva ao que ele não faz. Você pode fazer algo que se pareça muito com um site o suficiente para que você possa sair para testar. Essa é provavelmente a melhor parte sobre Figma e UX em geral, é que vamos criar algo e então na verdade, poderemos obtê-lo nas mãos do cliente, do público pretendido, nossos clientes, e isso não vai para ser completo, mas eles poderão usá-lo o suficiente para que possamos fazer algumas observações e realmente testar algumas teorias sobre o que eles pensam e o que os usuários querem. Se houver mudanças, podemos mudá-las rapidamente na Figma e depois levá-las de volta para elas enquanto elas estão sentadas lá. Trata-se de prototipagem rápida, mudanças rápidas e chegar a um ponto em que você está satisfeito com o site ou o aplicativo e você está assim que passou por um pouco de testes de usuários, cliente está satisfeito com isso. Agora, é aqui que Figma não faz mais nada. É apenas o protótipo e não codificará o site para você ou para o aplicativo. Ele entrega pequenos pedaços para o desenvolvedor usar, CSS e SVGs e gráficos e outras coisas. Mas não muito que o desenvolvedor possa usar. Eles acabarão começando do zero usando seus maquetes. Eles perderão muitas coisas como espaçamento e farão com que pareça o seu aplicativo, mas é isso que a Figma não faz, não faz o lado da codificação. Então, o que você faz é inscrevê-lo para o cliente e, em seguida, você trabalha com um desenvolvedor, se você é um desenvolvedor, você começa a codificá-lo, ou você pode começar se você pode entrar em HTML e CSS, eu tenho um curso sobre isso. Se você quiser começar a fazer suas próprias coisas. Ou você pode estar usando algo como WordPress ou Webflow. Tenho cursos no horizonte para ambos ou Wix ou algo mais, arraste e solte. Você então tem que construí-lo com base na sua maquete Figma que você tem, é muito mais rápido de fazer. Em seguida, vá e construa-o em uma dessas ferramentas ou codifique. Isso é o que é, prototipagem rápida. O que não é é que você não terá um site completo no final. Essa é uma pergunta que me fazem muito. Próximo vídeo. Na verdade, esqueci que uma coisa não desaparece. Não corte isso. que mais ele está se acostumando? Figma está se acostumando muito com apenas design gráfico regular. Principalmente no espaço digital, seleciona campanhas de mídia social. Essas coisas incríveis, você verá isso enquanto passa pelo curso que você gostaria, isso seria muito útil para fazer postagens de histórias ou carrosséis do Instagram, ou vários tamanhos diferentes para anúncios. Está ficando muito bom em. Ele não faz uma impressão muito boa. Você pode colocar uma página normal nela. Você pode dizer carta A4 EUA. Enquanto as pessoas o usam como alternativa para algo como talvez ilustrador e um pouco de photoshop. Photoshop ainda precisa disso, mas você verá que ele foi feito para sites e aplicativos de design. Mas as pessoas estão usando isso para todas as outras coisas agora, não vem uma ferramenta de design geral, mas saiba que você encontrará algumas pessoas estão usando muito mais para coisas que não é para fazer, mas isso é perfeito. Isso é o que é. Isso é o que não é. Agora este é o fim. Corte. 4. Qual é a diferença entre UI e UX no Figma: Vamos falar sobre o que é UI versus UX. Se você já sabe, você pode pular este vídeo. Está tudo bem. Isso não vai ser muito detalhado, apenas para lhe dar uma compreensão das diferenças entre os dois porque surge muito. Design de interface do usuário da maneira simples. Tudo isso é muito simples. A interface do usuário da interface do usuário versus UX, a experiência do usuário. A interface do usuário é a aparência de algo e a experiência do usuário é como alguém a usa. Muitas vezes, do jeito que parece, como é usado. Até a UX se tornar parte da minha vida e muitos de nós, é um novo, eu fiz muito design de interface do usuário. Eu criei um site. Baseava-se muito na minha intuição, os botões deveriam ser tão grandes e deveriam estar aqui, e tradicionalmente as coisas passam aqui no [inaudível]. Houve muito disso. Eu daria ao cliente que, como ele, ótimo. Mas faltava um grande elemento, o UX. Houve muito poucos testes. Eu tinha uma ideia do que funcionaria, mas foi totalmente uma ideia. Era como uma hipótese de como ele deveria funcionar. A parte do UX de ser um designer de UX é pegar esse layout de interface do usuário e colocá-lo nas mãos dos clientes e testá-lo. Essa parte disso transforma você de apenas um designer de UI para o início de um designer de UX, é colocá-lo lá e realmente testar isso. Funcionou? Ele fez exatamente o que eu esperava que ele fizesse? O cliente, quando eles clicam neste botão, eles conseguiram o que esperavam ou ficaram surpresos? É um designer de interface do usuário que projeta o botão, os cantos arredondados , o belo gradiente e os ticks no meio. O designer de UX diz: “Isso é ótimo. Vamos testar isso”, e diz: “É grande o suficiente? Eles podem clicar nele? Existe contraste suficiente? É acessível para pessoas que talvez sejam deficientes visuais? A hierarquia de botões, este é muito grande? Porque parece que deveria estar fazendo outra coisa.” Muito desse lado da coisa é a UX. Agora, com toda a honestidade, este curso é baseado principalmente em design de UI porque estamos deixando Figma. Figma é a criação dessas coisas, o lado do teste das coisas. Vou dar alguns insights medida que avançamos sobre o que eu faria em diferentes fases de teste, mas é mais amplo do que o que pode ser abordado neste curso. Mas faremos UI com um pouco de UX. Mas Figma basicamente é um software de balão. É por isso que você se inscreveu provavelmente. Isso não faz de você instantaneamente um designer de UX. A parte UX está levando isso mais longe do que apenas mover pixels na tela. É como dar isso lá fora, testá-lo, mudar coisas e testar coisas. Isso é UX. Meu pequeno exemplo que estou passando no momento, meu banco atualizou seu site e seu aplicativo, e ficou lindo. A interface do usuário, incrível. O UX é terrível. Tenho certeza que passou por alguns testes. Eu mencionei que passou por muitos testes. Mas não no final, porque são apenas coisas simples. Digamos que eu esteja digitando minha senha, clique em “Enter”, não, você vai pegar o mouse e clicar no botão. Quando você chegar ao fim, saberá que quando você pressionar Enter, você quer dizer este botão aqui. Isso é só uma coisa. Outra coisa, fui atualizar uma pessoa em meus pedidos permanentes, como um débito direto, não tenho certeza do que você chama isso em seu país, mas um pagamento regular que estou fazendo. Fui descobrir como editar isso. Eu sou como, eu tenho que excluí-lo porque ele não conseguiu encontrá-lo em nenhum lugar. Sou experiente em tecnologia, sei como usar computadores e não consegui encontrá-lo. Eu estava tipo, talvez eu tenha que excluí-lo. Eu tenho feito isso algumas vezes, e eu era como eu, vou enviá-los por e-mail [inaudível]. Eles são como, você deve ir e clicar no nome da pessoa para editá-lo. Eu sou como, bem, isso parece simples. Entre, dê uma olhada. Você faz, se você clicar no nome da pessoa, ela entrará em editá-la, mas falta algumas coisas. Qualquer indicação de que isso é possível, sublinhado, seta, sinal grande, dica de ferramenta. A outra maneira de pensar é, quando o mouse está se movendo e quando você passa por cima de algo clicável, ele se transforma na mãozinha. Isso não faz isso. Basta clicar nele com a seta e ela começa a clicar em tudo. Deve haver como desligar essa coisa. De alguma forma, está desligado. Há um milhão e uma dessas pequenas coisas. Acabou de sair. Mas eu tenho um problema com isso. De qualquer forma, estou balbuciando. [inaudível], isso parece muito sinistro, minha pequena luz colorida. Acabei de puxar a luz colorida. Você vai vê-lo todo o caminho através deste curso até eu ficar cansado disso. Mas sim, essa é minha história de UX no momento. Você os terá também. Esse é o tipo de coisa, se você é novo no UX, é manter essas ideias abertas. Eles são terríveis e são uma dor na bunda, mas é linguagem e coisas que você está reunindo como designer para que, quando estiver trabalhando, você possa evitar algumas dessas coisas, ou pelo menos quando ele voltar de testando, você não está surpreso. Você é como, aquela coisa que eu odeio também está nessa coisa. UI, UX, essa é minha explicação para o momento. Próximo vídeo. 5. O que estamos criando neste curso de Figma: Olá a todos. Neste vídeo, vamos ver o que estamos fazendo. Certo. Vamos começar a fazer alguns wire-frames inicialmente, ok. Então faremos algumas versões de alta fidelidade, ok. Isso parece um pouco mais bonito e um é realmente muito confuso. Vamos dar uma olhada neste aqui. Vejo as telas na parte inferior. Certo. Vamos trabalhar nestes. Vamos construir estilos, componentes, todo tipo de bondade. Vamos dar uma olhada em uma das versões de maquete. Sim. Isso vai ser o que fazemos. Vamos projetar isso adicionará alguma interatividade, fará um formulário que as pessoas possam comprar coisas, seguirá nosso resumo, tanto nossa persona quanto nosso fluxo de tarefas. Vamos falar sobre o que são essas coisas. Vamos nos concentrar no software Figma. Mas vou lançar algum tipo de conselho geral de design de UX para pessoas que são bastante novas. Com o que vamos, temos uma empresa chamada Scott Headphones, que quer que criemos algumas páginas após esse fluxo de tarefas. O fluxo de tarefas aqui, neste caso, é que eles querem uma página inicial que vá para alguns recursos sobre o produto, aquelas partes em que o produto pode ser adicionado a um checkout e, depois que o ID do crítico, ele preencheu as conformações. Isso é o que eles nos pediram para construir. Eles nos deram uma persona. Vamos falar rapidamente sobre o que é uma persona. Esta é apenas uma persona de ossos de lance. Eles podem ser executados para uma página inteira, para todas as páginas. Isso será suficiente para esse curso em particular. O que é uma força? Vou ler, você pode ler sobre eles. Nosso cliente ideal é uma mulher chamada Sarah. Sarah está na casa dos 20 anos. Ela tem um diploma de bacharel. Ela trabalha para si mesma. Ela é casada e tem filhos e mora na Irlanda. Ela nunca trouxe nada assim antes e algumas das preocupações é que ela é muito ecológica e consciente de resíduos. Por que temos uma persona? É para nos permitir ser específicos. Certo? Não especificamente para a própria Sarah. Sarah é representante de um tipo de pessoa, certo? Um grupo de pessoas que estão me fazendo usar este site e isso me ajuda a me distanciar. Caso contrário, acabo construindo coisas que eu gostaria, tudo bem, com base na minha própria história e na maneira como conheço o produto. Isso me dá limites. Caso contrário, você acaba projetando para si mesmo ou para todos, e então ninguém ganha, ok. Porque você acaba com essa coisa genérica que realmente não funciona para o público-alvo. Uma persona nos ajuda a definir esse público. Também ajuda quando você está lidando com o cliente ou as partes interessadas também porque você pode desanexar suas próprias preferências pessoais, como eu quero Pincel Script. Eles querem Times New Roman. Mas o que Sarah quer? Precisamos ter empatia por ela e sua situação e sua experiência com o produto. Isso ajuda com essas conversas a serem separadas do que Dan gosta como designer, do que o cliente gosta como ela ou ele mesmo. Vamos falar sobre o que é certo para Sarah. Isso é através da cor, fontes, linguagem, tipos de imagens, organização de informações como quais recursos devem ser mostrados anteriormente com base em algumas das preferências que ela tem e alguns dos conhecimentos do produto. Agora, isso é como uma visão geral super rápida da persona. É um design de UX de aprendizado aqui na Figma. Um pesquisador de UX, ok. Vamos gastar muito mais tempo e potencialmente produzir muito mais documentação e entender Sarah muito mais do que o que fizemos aqui. Acho que é uma visão geral ampla se você é novo e se você é novo, meu conselho para você é passar algum tempo, ok, agora ou depois deste curso pesquisando. Persona é o caso avançado para obter uma melhor compreensão e apenas saber que esta é uma versão muito simplificada, mas boa para o que precisamos para este curso. Agora, o fluxo de tarefas se você não ouviu falar disso antes. Fluxo de tarefas aqui, nos foi dado, em vez de projetar todo o site para dispositivos móveis, fomos solicitados a projetar um certo recurso crítico importante, ok. Temos que projetar esta página inicial, mostrar os produtos dos recursos do produto uma página de checkout e uma página de confirmação. Este é um bom fluxo de tarefas simples. Eles podem ser um pouco mais complicados, ok. Eles podem ser menos complicados. Pode ser como fluxos de tarefas, poderia incluir coisas como, como uma pessoa cancela este produto? Qual é o processo lá? Certo. Você pode estar projetando um processo de cancelamento. Talvez seja o processo de inscrição. Talvez seja como alterar sua senha, como baixar ou fazer upload de um documento, pode ser uma coisa específica que precisa ser feita em seu aplicativo ou site específico. Isso é considerado um fluxo de tarefas. Também, na verdade, vamos lançar esse outro termo tipo de fluxo de tarefas de amigo versus fluxos de usuário aparece um pouco, ok. Este é um ótimo artigo aqui de Erika Harano. Vou colocar um link na tela aqui, mas depois deste vídeo ou depois deste curso, passe um pouco mais de tempo entendendo isso, mas vou dar-lhe o breve resumo. Basicamente, o fluxo de tarefas, vamos dar uma olhada, eles têm o fluxo de tarefas de panqueca. Vou conseguir isso encontrando uma versão de receita. Certo. Muito simples, como o que estamos fazendo em nosso curso. Homepage, panquecas sociais, resultados de pesquisa, encontrar a receita de panqueca super banana , fluxo de tarefas simples, é passo a passo. É sequencial, tipo de linear. Enquanto um fluxo de tarefas, ok, é muito mais complexidade, vamos dar uma olhada neste. Este aqui, você pode ver? Acabamos nisso. É o mesmo tipo de processo, você inicia a página inicial e acaba com uma super panqueca de banana. Mas há muito mais maneiras de chegar lá. Há mais de uma opção, que sabemos que é sempre o caso como essa opção é como a grande aqui. O primeiro usará a barra de pesquisa, agora o fluxo de tarefas acima do caso é assumido usando a opção de pesquisa, mas haverá, sua persona pode não ser como pessoa da barra de pesquisa. Novamente, eles vão por esse caminho, então saiba que eles não vão usar a barra de pesquisa. Então teremos que criar um mock-up, ok, a navegação nas categorias, a navegação nas categorias, e há uma categoria de café da manhã, e depois há uma página de café da manhã. Certo? Eles estão encontrando panquecas dentro da página do café da manhã, e depois clicam na receita que querem, ok. Eles acabaram voltando ao mesmo lugar, mas é uma maneira diferente de chegar lá. Certo. Você pode ver a chave aqui, esses nós de decisão e as diferentes formas, ok, para ações diferentes, ok. Essas são todas as páginas. Essas são interações entre o usuário e a interface e as decisões do usuário. Tenho o começo e a parada por aí. Os fluxos de usuário são mais complexos, mostram opções diferentes. Você tem que se certificar de que está projetando para a coisa certa. Se você estiver projetando seu fluxo de usuário, ele terá mais e um trabalho maior, enquanto um fluxo de tarefas pode ser uma opção bem simples e limitada. Agora você terá fluxos de tarefas dentro deste fluxo de usuário, você ainda pode ver nossa página inicial, resultados de pesquisa, banana ainda está lá, ok. É apenas uma espécie de assado nesse caminho mais complexo ou diferente que o usuário pode seguir. Um fluxo de usuário ajudará você a encontrar mais coisas, como becos sem saída ou onde as pessoas ficam presas em um loop ou não sabem mais como lidar. Certo? Sim. Esse é o fluxo de usuário breve versus fluxo de tarefas. Outra coisa a mencionar é que fomos solicitados a projetar uma versão de site móvel disso, não um aplicativo. Um aplicativo que você tem apenas uma tela de tamanho móvel, ok, porque é um site para dispositivos móveis, isso significa que você provavelmente terá que projetar não apenas a versão móvel, mas talvez um tablet e uma versão para desktop também. Isso muitas vezes pode te pegar quando você é novo e você gosta, alguém pede que você crie um site para desktop que você terá que desenvolver, vai querer ver como o site se divide em uma versão móvel ou em um versão para desktop. Leve isso em conta. Mas nosso foco aqui é a versão móvel. Por fim, isso é muito simples em termos de que temos uma persona, eu tenho um nome de empresa e um fluxo de tarefas, mas, muitas vezes um breve pode ser muito maior do que isso, ok. Como projetar um site inteiro e, às vezes você pode obter muitos detalhes em torno dele, ok. Para mim, como designer, o que seria difícil com este em particular é, quanto eu sei sobre os fones de ouvido Scott? Não muito pouco nesta fase, ok. Eu gostaria de ver, gostaria de falar com eles ou tenho meu gerente de produto para falar com eles ou quem estiver no comando falar com eles sobre o que eles são e quais são seus valores, qual é a missão deles para me ajudar, tipo de ajuda com essa persona para construir outro nível lá. Às vezes você não recebe essa informação, tudo bem, e às vezes você vai. Se você receber algo de uma empresa maior, eles provavelmente terão declaração de valores e missões. Você pode sair e descobrir isso e adicionar isso ao seu conjunto de ferramentas quando estiver projetando essa coisa para ter conversas melhores com as partes interessadas quando estiver fazendo referência ao que está fazendo, é aqui que eles estão indo como uma empresa. Da mesma forma, você vai conseguir empregos onde não há valores e não há missão. Eles realmente não tinham pensado nisso. Você vai ter que fazer o seu melhor com o que você tem. À medida que você recebe um empurrão mais experiente para esses tipos de coisas, provavelmente são conversas que eu quero ter mais e mais, quanto mais experiente eu fico, não apenas uma persona, mas como, por que estamos fazendo isso? Onde está a direção que estamos indo? Certo. Quem estou ajudando? Por que estamos ajudando a realmente influenciar meu trabalho de design? Mas de qualquer forma, esse é um bom ponto de partida para este curso, e vamos seguir em frente. 6. Projeto do curso 1- crie seu próprio briefing: Olá, todos. É hora de sua primeira parte, não vamos chamá-lo de lição de casa, vamos chamá-lo de projetos de classe. Você pode ignorá-los. Você pode, mas isso realmente ajudará você a solidificar o que aprendemos e meu objetivo é que você possa criar algo através deste curso que seja único do material do curso que estou fazendo, que é ótimo para o seu portfólio próprio. O primeiro é criar seu próprio resumo. Vimos no último vídeo que fiz um breve. Onde está meu breve? Esse é o meu. O que eu quero que você faça é ir a este site que acabamos de criar aqui, é randomprojectgenerator.com. Quero que você insira seu sobrenome ou o nome do seu animal de estimação ou o sobrenome de um amigo, nome de alguém para a empresa e insira sua localização. Manurewa foi onde eu nasci. Você pode colocar na Irlanda como um país. Se você estiver em um país grande, coloque em seu estado ou cidade, seja lá o que for, e clique em GERAR MEU PROJETO. Certifique-se de que estamos na guia UX/UI lá e clique em GERAR MEU PROJETO. Você deve obter algo único para você. Tenho pranchas de surf sombreadas. É legal. Isso é gerado aleatoriamente, não toque novamente. O botão vermelho é lido. Eu só quero que você escolha o primeiro que você tem, mesmo que você seja como hmm. Alguns dos objetos mais complicados e personas complicadas são uma daquelas coisas que realmente ajudarão a construir você como designer. Não bata nele. Você tem um pouco de leitura e você vai conseguir algo único. Vai ser único de certa forma, como no nome da empresa e no produto. Mas a coisa real que construiremos juntos, será tudo o mesmo tipo de estrutura. Seguiremos o mesmo fluxo de tarefas. Você usará Homepage, Recursos do Produto, Checkout e Confirmação, seja qual for o produto. Isso significa, porém, que quando você começar a seguir, ainda vamos desenhar um botão e ainda vamos dizer saiba mais. Mas você vai usar cores que são boas para sua persona e quando eu digo trazer uma imagem, em vez de trazer fones de ouvido, você vai trazer pranchas de surf ou qualquer que seja o seu produto. Você ainda vai ter uma imagem em um círculo. Eles terão a mesma estrutura, mas pelo menos no final, você pode ter algo único para seu próprio portfólio, além disso, isso vai fazer você pensar sobre sua própria persona e como você pode projetar para eles. Entendeu a ideia? Acompanhe este curso, mas usando o nome da sua própria empresa, que eu vou fazer você fazer um pouco mais tarde e escolher suas próprias imagens e cores para essa marca. Depois de fazer isso, você tira uma captura de ou copia para a área de transferência ou o download como PNG, e apenas armazena no seu computador ou no telefone pronto para mais tarde no curso. Vamos juntá-los em uma página Breve e Fluxo de Tarefas mais tarde. Outra coisa que eu quero que você faça, temos o nome e a personalidade da nossa empresa. Você baixou, copiou na área de transferência ou algo assim. Você o tem em algum lugar armazenado. Vamos trazer o Fluxo de Tarefas também porque estamos todos usando o mesmo. Vai me permitir mostrar algo estranho, estranho e interessante para a Figma. A Figma realmente quer que tudo esteja na nuvem, online. Volte para sua página inicial, ou se você estiver em um PC, vá para o pequeno ícone Figma e vá para aquele que diz, está aqui, diz ir para arquivos ou algo semelhante. Esteja em seus rascunhos. Se você quiser importar um arquivo Figma em vez de ser compartilhado com você, este pequeno ícone aqui, Importar, procure esse ícone. Ele se moveu no passado, dê um clique e, em seus arquivos de exercícios, há um chamado Fluxo de Tarefas. Fig. Carregue isso lá e usaremos isso mais tarde também. Você pode abri-lo, dar uma olhada. Basicamente, é apenas nosso fluxo de tarefas. Copiaremos e colaremos isso e combinaremos mais tarde no curso. Mas você tem seu fluxo de tarefas, você tem seu próprio resumo, ou pelo menos personalidade e nome, e está pronto para continuar. Vá fazer isso como lição de casa e eu te vejo no próximo vídeo. 7. O que é wireframe de baixa fidelidade vs alta fidelidade no Figma: Olá, todos. Neste vídeo, vamos falar sobre a diferença entre wireframes e alta fidelidade. O que é muito fácil, você pode ver. wireframes são muito econômicos, e as maquetes de alta fidelidade parecem muito bonitas. Eles vão chamá-los Hi-Fi, Lo--Fi. Geralmente, porém, eles os chamam de wireframes. Hi-Fi é de alta fidelidade. Este será muito rápido e fácil de fazer e testar. Não tente pular, se você é novo na UX, ignorando o wireframe e a seção do processo de design na folha de pagamento. Você provavelmente pode gravar um wireframe em alguns minutos. Sempre de alta fidelidade, você pode acabar como brincar com um trekking e sair por horas e horas. Você não conseguirá um teste melhor do seu público em potencial. Fomos atribuídos a um fluxo de tarefas. Podemos criar facilmente um wireframe e testar esse fluxo de tarefas mesmo no aplicativo. Vou te mostrar como fazer isso. É como em um telefone ou em um site. Super rápido, super fácil e sem distração, como, oh, essa é a imagem certa? Essa é a fonte certa? Não tenho certeza sobre as cores. Você está falando sobre o fluxo de tarefas, a mecânica real de como isso é construído por baixo, e podemos testar rapidamente com wireframes. Wireframes não precisam se parecer com isso. Esse é meu wireframe. Outro wireframe que eu baixei muito mais bonito. Os botões têm cor neles. Escolha uma cor apenas em cinza e uma cor, se quiser, ou fique em cinza. Você quer tirar os elementos de design aqui, você gasta tempo fazendo isso, ou pelo menos, o cliente vai, oh, eu não gosto de rosa ou este azul não é o azul certo. Você quer tirar tudo isso da equação quando estiver projetando wireframes. Mantenha isso simples. Escolha uma fonte chata e uma cor chata. Outro wireframe, um pouco mais agradável. Sim, alguém passou algum tempo em muitas batidas e outras coisas. Não há razão para você não levar seus wireframes mais longe do que o que fazemos neste curso. Um muito simples que removeu todo o texto. Outro esboçado. Oh, um pouco esboçado. Acho que está muito perto do senso cômico para mim. Mas eu gosto que as linhas esboçadas estejam do lado de fora. São todos wireframes Lo-Fi ao vivo, Hi-Fi. Está no mesmo documento. Mas este parece muito bonito. Este aqui, outro Hi-Fi. Muito mais tempo, e se ele estiver indo para este. Mas para testes, você só precisará do básico. É por isso que estamos fazendo wireframes. Você tem que fazer isso, porque esse é o começo do curso. Vamos aprender muito sobre como usar Figma, construindo wireframes antes de começarmos a construir nossas coisas super bonitas um pouco mais tarde no curso. Vamos realmente começar com Figma e fazer alguma coisa. 8. Como criar nosso arquivo de design e colocar frames no Figma: Vamos criar nosso primeiro arquivo de design. Pode ser um pouco confuso para esta primeira tela. O seu vai parecer diferente do meu porque eles mudam isso com bastante frequência. Se você não tem nada como o meu, você pode ir até o canto superior esquerdo aqui e clicar no pequeno menu suspenso. Se Você estiver em outro lugar, você pode clicar no botão Início primeiro e, em seguida este pequeno menu suspenso e o que Você quer fazer é clicar no seu nome. O meu ficará um pouco desfocado aqui porque também tem meus endereços de e-mail. Mas clique em seu nome, não em Comunidade. Clique aqui e você deve chegar a algo parecido com a minha tela. O que queremos fazer é um novo arquivo de design. Isso só apareceu no outro dia e então o que eu normalmente fiz no passado é que vamos criar um rascunho e essa pequena vantagem ao lado dele. De qualquer forma, estou fazendo um novo arquivo de design e lá vamos nós . Tudo bem, se você é novo. Eu redefini minha Figma para que ela sempre pop-ups. Você pode mostrar suas coisas, estou aqui para te mostrar. Vou cancelar isso. Você acaba com essa grande tela de nada. Temos nosso arquivo de design, agora precisamos introduzir quadros. Os quadros são esses caras aqui. É este pequeno ícone aqui, o terceiro aqui, clique nele e Você pode desenhar qualquer quadro de tamanho. Pense em um quadro como uma página. Se estivermos desenhando um aplicativo. Vamos voltar a essa ferramenta aqui, desenhar algo que se parece com um aplicativo. Você pode ter vários quadros, todos os tipos de tamanhos diferentes, desktop um, tablet um. Os quadros têm muitos usos, mas neste estágio inicial do curso, pense neles como uma página ou um quadro de arte se Você for da Adobe. O que precisamos fazer é excluí-los porque são tamanhos aleatórios. Clique em qualquer lugar no interior deles, pressione Excluir. Clique neles, exclua-os. Tudo bem, então vá para sua ferramenta de quadro e, na verdade, vamos ser um pouco mais específicos com nossos tamanhos. Aqui Você terá alguns tamanhos pré-fabricados. Você estará no futuro, então você pode estar no iPhone 52. Vou usar o iPhone 8. É um bom tamanho genérico para Android e Apple. Alguns desses grandes têm um tamanho um pouco grande e estranho. Agora, o objetivo aqui é escolher um tamanho genérico. Não vamos projetar todos os iPhone diferentes em tamanhos diferentes, vamos projetar algo próximo o suficiente do telefone de uso geral e nosso desenvolvedor criará algo um pouco mais responsivo ajuste para as pequenas alterações em pixels diferentes. Vou escolher um tamanho de telefone que seja bastante genérico. É mais fácil apenas para o Google como o tamanho mais comum do telefone e você receberá algo ou o tamanho mais comum da área de trabalho e você receberá algo aqui e escolherá. Se Você está projetando um relógio, se Você está fazendo apenas papel normal da velha escola, as coisas de madeira. Há todas as coisas aqui, então o seu será diferente. Agora, vou começar com o iPhone 8 mesmo sendo muito antigo. Não sei por que ainda está aqui, aqui está. Mas é um bom tamanho genérico, 375 pixels que eu gosto. Você pode ajustar depois, aqui está o seu quadro. Na verdade, o novo tamanho nem está listado lá. Vou usar 400 e apenas digitar por cima. Vou desfazer isso porque o iPhone 8 é perfeito para o que eu preciso. Novamente, se Você estiver assistindo no futuro e não houver iPhone 8. Você pode digitar esse 375, 667 para obter as mesmas dimensões. Mas vá com o que for comum para Você agora. A outra coisa que costumo fazer é tentar descobrir o telefone meu cliente tem porque eles vão testá-lo potencialmente em seu telefone. Quero ter certeza de que se eles têm algum tipo de telefone, eu poderia usá-lo apenas para que a marcação funcione muito bem no telefone deles. Vamos acabar nomeando muitos desses quadros porque o iPhone 8, 1,2,3,4,5,6,7,8 não vai nos ajudar. Vamos clicar duas vezes na palavra aqui ou Você pode clicar duas vezes aqui no painel de camadas. Se você não conseguir ver as camadas, talvez você esteja em ativos. Clique duas vezes nele e chamaremos de página inicial de marketing de barra. Queremos outro, para que você possa voltar para sua ferramenta de quadro, clicar no iPhone 8 novamente, Você obtém outro e simplesmente continuar seguindo o caminho. Não vamos fazer grandes quantidades de atalhos neste curso, mas teremos que aprender alguns. O primeiro será a barra de espaço, então mantenha pressionada a barra de espaço. É bastante comum em muitos programas de design e clique em segurar e arrastar. Vou nomeá-lo neste. Lembre-se de que nosso fluxo de tarefas é a página de marketing, depois os detalhes do produto. Outro atalho que usamos bastante é Você pode simplesmente copiar e colar esses quadros, então basta clicar no nome Command C em um Mac ou Control C em um PC, então V. Então Command V, temos outro. Controle V em um PC, até você. Eu digo que não há atalhos. Então eu começo com muitos atalhos. Vamos colocá-lo agora quatro páginas para que nossa tarefa, como eu disse, fazemos essa parte dos detalhes. O que mais havia lá? Era uma finalização de compra e cópia, barra de espaço, clique e arraste. Vamos fazer nossa confirmação. No mesmo documento, não há motivo para que Você não possa ir , na verdade, agora eu quero minha versão para desktop. Vou clicar no quadro. Vou dizer tablets e vou dizer que vamos projetar para o iPad Pro 12 porque esse é o que eu possuo. Por aqui, paisagem, retrato. Vamos barra de espaço em paisagem, retrato. Você pode removê-los. Vou clicar no nome. Você arrasta o nome, a barra de espaço ao redor, arraste o nome ao redor, Você pode dizer copiar colar, colar e fazer a mesma coisa. Vamos ter homepage, detalhes do produto, o mesmo com as versões para desktop. Estou indo rápido aqui porque vamos excluí-los para que você não precise. Talvez pratique brincar com ele. Você vê este iPad Pro no momento, você pode clicar neste quadro e dizer, na verdade, agora Você é um desktop padrão normal. Esse é um tamanho de desktop muito bom. Muito comum e genérico. Agora, ampliando e diminuindo. Comando em um Mac, controle em um PC e são as teclas mais e menos. Estas são principalmente maneiras diferentes de fazer muitas coisas aqui em Figma. Vou te dar uma maneira que eu acho que é provavelmente a mais fácil no seu nível ou apenas a melhor maneira genérica. Se você encontrar outro caminho e você está horrorizado. Não estou usando a opção de espera, mantenha pressionada a tecla Command e uso minha roda de rolagem, é isso que posso fazer. Para aumentar e diminuir o zoom, Você pode fazer isso, tudo bem. O que eu quero que Você faça para este curso é que vou selecionar tudo isso e estou apenas usando essa ferramenta. Ele é padrão sempre para que você não precise escolher tanto. Só vou excluí-lo. É aqui que eu quero que você esteja no final disso. Se Você acabar no meio do nada, eu ampliei o meio do nada. Vou diminuir o zoom, usar minha barra de espaço, coloque-a bem no meio e, em seguida, aumentar o zoom. Isto é o que eu quero que você chegue. Quero apenas quatro molduras velhas chatas e quero que você nomeie todas elas. A última coisa que eu quero mostrar a Você, dando início a isso se acostumar com a Figma é nomear seu arquivo. Só para que você saiba, você vai acabar com muitos documentos sem título e isso acontece. Não sei, este programa adora ter documentos sem título e, portanto, vamos ser muito específicos e, na verdade, nomeá-los. Se clicarmos em segundo plano aqui, Você pode ver o que aparece lá em cima. Se você tiver algo selecionado, ele desaparece. Não tenha nada selecionado, clique no mans land e Você pode clicar aqui e você pode dar um nome a ele. Você já acertou seu breve, então o meu é Scott. O seu vai ser algo diferente. Mas todos vamos chamar o nosso Ecom V1. Você escolhe o nome da sua empresa e coloca Ecom V1. Nosso Ecom é a versão 1. Em vez de V1 apenas alguma coisa. A, B, C, 1, 2, 3, não importa. Contanto que você não seja uma pessoa final, final revisitada, final final. Se você está rindo, sabe do que estou falando. Estou falando com você, dê alguns números de versão. Há alguns recursos interessantes mais tarde para o controle de versão dentro do documento, mas isso é mais tarde. Outra coisa é que se você tem um monte de sem título, Você pode. Quero explorar esta casinha, ou voltar para a casinha. Lembre-se, certifique-se de que você está em seu pequeno nome aqui e nenhuma comunidade. O que você vai notar é, olhe lá ele está lá embaixo Ecom 1. Se você já tem muitos sem título. Eu planeei para o meu, Você pode clicar com o botão direito do mouse neles e ir renomear e apenas fazê-lo lá ou abri-los e fazer o que acabamos de fazer. De volta a esta guia, de volta para casa, continue praticando isso. Base inicial em nosso trabalho como um navegador. Tudo bem, essa é a nossa configuração básica. Estes são quadros, a coisa toda é chamada de arquivo de design. Os quadros têm outras configurações sorrateiras sobre as quais falaremos mais tarde no curso, mas, no momento, considere as páginas. Bem para cima, mas eles os chamam de quadros. Nas enfermarias para o próximo vídeo. 9. Os conceitos básicos de tipos e fontes no Figma: Olá a todos? Talvez nós realmente vamos parar de fazer coisas em Figma agora. O que vou fazer nos próximos vídeos é que vou apresentar coisas como digitar neste e o próximo será como círculos, botões e cores, e apenas as coisas que precisamos para começar. Vou tocar neles, e ao longo do curso vamos nos aprofundar cada vez mais em vez tentar clicar em todos os botões para fazer com o tipo neste vídeo, vamos obter todos os conceitos básicos e quando apropriado ao longo do mais legal mergulhará um pouco mais fundo neles. Vamos começar. Neste vídeo, vamos ver o tipo e as várias peculiaridades na Figma. Vamos começar com a ferramenta de tipo, diz letra t aqui. Se você passar o mouse acima das coisas, você pode ver o texto e o atalho está no meu teclado, então eu posso digitar t no meu teclado. Não vou passar pelos atalhos. Mas se há um que eu uso bastante paire sobre ele e ele deve dizer o que é. veja se estou adicionando um comentário. Temos dois tipos de caixas de texto, você clica uma vez e pode digitar para sempre. Esse é este aqui, é chamado A ou uma caixa de largura porque eu sei disso [inaudível]. O outro tipo de caixa que você vai criar é clicar e arrastar caixa. Pegue a ferramenta de tipo clique e arraste-a para fora. É um clique uma vez que clique e arraste-o, obtemos esta opção aqui, que é a caixa de tamanho fixo. Este é apenas significa que quando eu chegar ao fim, ele vai quebrar. Usaremos ambos neste curso, especialmente para este wireframe. Vou desfazer, se você não sabe disso, é desfazer se você estiver na versão do navegador, está aqui, é desfazer. Mais uma vez, você verá o atalho para ele, o desfazer, refazer. Vamos fazer duas coisas, vamos fazer largura automática, então digite ferramenta, então digite ferramenta, clique uma vez e apenas digitando o nome da sua marca. O meu é fones de ouvido Scott. Quando você terminar, você pode simplesmente clicar nesta terra de ninguém, e você pode movê-la e outras coisas e pegar a ferramenta de tipo novamente e vamos fazer uma caixa sobre esse tamanho, e vamos digitar nossa mensagem de marketing. Basta digitar algo assim é a nossa mensagem de marketing. Depende de quem você está trabalhando. É melhor manter tudo muito genérico, tentar não usar linguagem, falar de marketing aqui porque você pode enviar para testes e, em vez de as pessoas testarem o fluxo, elas podem acabar testando e voltar com erros ortográficos ou pode ser controvérsia sobre a mensagem de marketing. Isso não está certo. Vamos entrar em copywriting. No momento, vamos manter tudo o mais simples possível para eliminar quaisquer variáveis para nossos testes apenas para estarmos focados. Agora, você pode alterná-los mais tarde. Digamos que este aqui, queremos realmente fazer essa largura automática, para que possamos clicar nele aqui, o mesmo com este. Podemos fazer dela uma caixa fixa e a diferença agora é que só queremos começar a digitar, sopra fora da caixa e tem uma largura fixa. Você pode alterá-los mais tarde. Vou bater em Desfazer algumas vezes. Estou usando meu atalho Command Z em um Mac, Control Z em um PC. Undos não são tão consistentes quanto você imagina de outros programas. Você pode ver o desfazer, não colocou meu retângulo de volta ao tamanho grande, está desfazendo meu tipo, mas não está fazendo esse retângulo grande. Isso é bastante comum em toda a Figma. Às vezes você pode desenhar uma seta, mudar a ponta da seta, pressionar Desfazer e isso deixa a ponta da seta lá. Isso pode mudar com o tempo, mas é apenas uma dessas peculiaridades sobre Figma. Às vezes, se você clicar em Desfazer, ele decide nem sempre fazer o que você pede e diz partes dele. O que eu tenho é que eu selecionei com a minha ferramenta de seleção, me certifiquei de que é de tamanho fixo e vou arrastá-lo para fora, então é um pouco maior, porque o que eu gostaria que ele fizesse é brincar com apenas o básico aqui. Vejamos o tamanho da fonte e o básico, ouça. Eu não vou cobrir todos eles porque você sabe como ir o tamanho da fonte é um pouco suspenso, veja isso. Vá para algo bom e grande, você pode ter que selecionar as primeiras tomadas e clicar duas vezes nele, destacá-lo e dizer aqui, vou torná-lo agradável e grande. Por ser uma caixa fixa, ela vai quebrar nas laterais aqui e deixar a linha santificada. Você sabe tudo o tipo de coisas. Uma coisa que vou mostrar é que vamos dizer coisas, se você passar o mouse acima delas, esse pequeno ícone lá é a altura da linha, mas você pode clicar e arrastá-las para os ícones, então eu vou desfazer isso. Desfaça novamente lá vai. Se você vir o pequeno ícone, então aqui, não é arrastável. Aqui, em qualquer um desses pequenos ícones, você pode clicar em “Manter” e “Arrastar” eles. Eu costumo fazer isso bastante, quando estou trabalhando e você me verá durante todo o curso, arrastando a altura da linha e o rastreamento e o espaçamento meta e essas coisas. Esse é um pequeno truque. O que eu faço um pouco é, e digamos que isso não é arrastável, o que era, mas se você clicar aqui e ver meu pequeno cursor piscando, se eu apertar a tecla de seta no meu teclado, apenas o [inaudível] para cima para baixo susto, use o Up and the down. Se você segurar “Shift”, ele sobe e grandes pedaços e latas unidades de latas. Isso é verdade para cada caixa aqui, se eu quiser que a largura seja um pouco maior, para cima e para baixo, vamos segurar “Shift”, subir em pedaços grandes e estou fazendo com que a largura dessa caixa de texto seja maior desfazer, destruindo minhas caixas. Mas para as fontes, eu uso um pouco, apenas indo para cima e para baixo, estou olhando para o meu desktop, eu não estou realmente olhando aqui, estou apenas verificando, este é um bom tamanho de fonte? Não é um bom tamanho de fonte. Agora, quando se trata de fontes aqui, você usa algumas coisas. Estamos escolhendo tamanhos de fonte agora, e você precisa estar em 100% no momento em que estamos em 86, você pode estar em 100, você pode estar em 100, mas se você estiver escolhendo o tamanho da fonte que você gosta, “Isso é muito pequeno”. Você vai tentar escolher um tamanho de fonte serif em 100%. Você não quer tentar escolher um tamanho de fonte ao aumentar o zoom, porque você pode torná-lo muito grande. Como isso vai ser em um dispositivo móvel, é um site móvel, não é um aplicativo, mas só será visualizado através de um site móvel nessa proporção, nessa altura. É melhor escolher tamanhos de fonte no seu telefone. Vou mostrar-lhe um pouco mais tarde no curso, não muito longe, podemos realmente visualizar tudo em um dispositivo. Então você não está gastando muito tempo decidindo quem era 12? Deveria ser 16? 14? Na verdade, coloque-o para as extremidades do dispositivo que parecem. A última coisa que quero compartilhar com você quando você estiver neste estágio de seleção de fontes, especialmente para um wireframe, é que eu quero que você escolha uma fonte não, uma fonte que tenha zero caractere. Eu me sinto mal porque este é o Roboto. Desculpe, Roboto, você tem zero caractere. Não vamos roteiro de pincel, ou mesmo se for uma fonte bonita e é emocionante. Queremos fontes realmente simples aqui porque quando fazemos um teste e queremos feedback não sobre como “Ei, eu não gosto dessa fonte ou isso não está se comunicando”. Não queremos trazer isso para a conversa, queremos manter tudo separado e apenas tê-lo muito, muito simples. Seria muito comum usar algo como Roboto ou Open Sans. Vamos dar uma olhada no Open Sans e outro molho Source Sans. Você pode dizer. Esses caras não são os caras que você convida para a festa. Eles têm pouca personalidade, tão clara e são profissionais e ótimos para um wireframe, mas depois nenhum roteiro de pincel. Seja o que for que você decida, escolha um, vamos usar o Roboto para isso porque é o mais genérico de todos eles, além de ter muitos brancos com os quais você pode brincar com frequência. Se você não tem Roboto, você pode encontrá-lo online, baixá-lo e, é bastante comum em todo o lugar, e é gratuito. Você pode usar Arial ou Calibri ou o que quiser usar. Na verdade, não há como usar Arial Calibri, é para a Microsofty e tudo bem. Escolhemos uma fonte não, vamos lançar algumas coisas diferentes para o nosso maquete. Nós temos como e para o nosso logotipo também, vamos mantê-lo super simples e, se sua empresa já tem uma marca, provavelmente é uma garganta apropriada em preto e branco, basta mantê-lo simples. Porque a marca ainda não está sendo desenvolvida para essa empresa, e vamos mantê-la super simples. Vou brincar com fontes. Agora, é aqui que eu quebro todas as minhas próprias regras como: “Ei, não escolha uma fonte que tenha caráter, fique longe. Então você não pode ter você. Eu sinto como “Essa postura é muito grande”. Se você quiser colocar para voltar a zero, basta excluí-lo e clicar em “Enter”, e ele volta para [inaudível]. Mesmo assim você diz: “Eu só vou, certo que é um aqui só um pouco. Eu não posso me ajudar.” Você faz o que eu digo, não faça o que eu faço. Não brinque com espaçamento entre letras e outras coisas e faça com que seus laços de wireframe sejam bons. Fazer um wireframe parecer muito bom. É difícil parar com isso, você pode fazer um pouco de design. Precisamos de algumas coisas, então vamos manter isso e vamos copiar, colar e usar isso novamente. Isso foi estranho. Quando você copia e cola, você percebeu que há apenas um deles agora? Se eu copiar e colar na Figma, ela voltará para o topo. Há dois deles por cima, então isso é uma estranheza, mas funciona. Vamos ter um botão Comprar agora. Até agora. Agora eu acabo duplicando em vez de copiar e colar, você pode ou não fazer isso em um Mac, você mantém pressionada a tecla de opção, você vê uma pequena seta. É um pouco duplo ali. Em um PC, é a chave de opção. Se você fizer isso antes de começar a arrastar, então selecione Ferramenta, mantenha pressionada a tecla Option ou Alt, arraste-a para fora e você fica doente [inaudível]. Figma é muito bom em alinhar as coisas que você pode ver, oh, tão útil. Você tem uma compra agora e um saiba mais. Nós vamos ser santos por esse. Preciso de outro aqui em cima. Essa será minha foto do produto. Acho que são todos os carrapatos que vamos fazer para essa maquete em particular. Entraremos em um pouco mais de detalhes de ticks mais tarde, mas se você vir essa pequena linha pontilhada aqui, é aqui que você entra nisso. É incrível o quão profundo ele vai. Se você é um designer que ama um pouco de ligaduras e todas as coisas incríveis, você pode ver o alinhamento, não tão excitante. decoração sublinhada tachada não é nada. Há muitos pontos de bala aqui, você pode começar a fazer maiúsculas, minúsculas, eu não vou cobrir todos eles. Vamos olhar para pequenos pedaços ao longo do curso, mas o mais velho dele, se você realmente quiser entrar em cenários estilísticos e homens fica profundo. A maior parte está aqui sentada no menu certo. Eles chamam isso de painéis de gravação corretos, às vezes eles o chamam de inspetor de propriedades. Essa coisa aqui à direita. Você pode obter a maior parte aqui, essa pequena linha pontilhada lhe dá um monte mais. Na verdade, fizemos algo, um monte de texto chato. Vamos entrar no próximo vídeo e fazer alguns retângulos e botões chatos. Vejo você no próximo vídeo. 10. Retângulos, botões de círculos e cantos arredondados no Figma: Olá a todos. Neste vídeo vamos desenhar alguns retângulos, alguns círculos e alguns cantos arredondados. É muito emocionante. Vamos pular. Em primeiro lugar, vamos colocar nossa foto do produto, vamos colocá-lo em uma imagem de espaço reservado para isso. Vou usar minha ferramenta de seleção basta clicar e arrastar sobre vários deles, e então eu posso arrastá-la para baixo, então eu tenho um pouco de espaço. Vamos pegar a ferramenta retângulo. É um daqueles que você provavelmente aprenderá o atalho, e eles estão todos se escondendo aqui, veja linhas retangulares, todo o tipo de formas básicas. Quanto à ferramenta retângulo, o que faz sentido. Vou clicar em “Manter” e arrastá-lo para fora, e você obtém a grande caixa cinza, e você notará que nosso texto desapareceu. Isso nos leva a camadas. Por aqui, se você não puder vê-lo, você pode estar em ativos. Vá para camadas. Você verá. Este é o quadro da minha página inicial, e dentro disso, há todas essas coisas diferentes. Todas as diferentes tomadas de edição. Agora temos um retângulo, mas está no topo. Podemos fazer algumas coisas. Clique com o botão direito e diga: “Enviar para trás, por favor”. e é só esse atalho. Você aprenderá isso um pouco também. Aprenda os diferentes atalhos em seu nível, você pode estar pronto para atalhos, talvez não esteja, você pode estar pirando. Basta clicar com o botão direito do mouse e dizer realmente enviar para trás, ou eu quero que você pratique. Eu desfiz isso. Você pode ver aqui? Posso arrastar isso como o Photoshop [inaudível]. Estou segurando, arrastando-o, agora está no fundo de todos esses caras, e eu posso ver, fácil. Vou desfazer isso e mostrar apenas mais uma maneira dolorosa, principalmente porque há muitas maneiras de fazer tudo na Figma. Vou te mostrar o jeito que eu acho que faz mais sentido para o seu nível, e o que é realmente comum e útil, mas se você encontrar uma maneira diferente, e você “Ei, por que ele não nos mostrou assim? Isso parece melhor.” Se você o encontrar, e você gosta, você pode fazê-lo. Mas vamos ver este aqui, você vê este pequeno menu Figma aqui? Se você estiver em um Mac, você tem esse pouco na parte superior aqui, que é exatamente o mesmo que editar, ou é organizado. Você pode apenas ver como. Não, eu não quero um objeto range. Aí está, lá. Você pode ver o quanto eu uso esse menu, não com muita frequência. Em um Mac, você verá isso na parte superior, e eles corresponderão. Você arquiva, esse arquivo, edita, esta edição. Muitas vezes eu uso esses na parte superior aqui, mas sei que se você estiver usando a versão do navegador, eles não estão lá em um PC, estes não estão lá, são exatamente os mesmos. Vou tentar lembrar ao longo deste curso, que vou para o objeto, enviei para trás. Mas você pode achar neste curso que Dan vai subir para arrumar o topo aqui, e você diz: “Ei, eu não tenho isso.” Lá está lá. Vou fazer objeto, enviar para trás. Sim. Muitas maneiras de fazer a mesma coisa. Vamos pegar isso no meio lá. Você notará que a Figma está naturalmente querendo ir ao centro das coisas, centro das caixas, ao centro das placas de aplicativos ou simplesmente arrastá-lo. Você não precisa fazer muito. Há os arranjos completos ao longo do topo aqui, arrumar o centro, organizar para a esquerda, mas muitas vezes apenas arrastá-lo faz perfeitamente bem. Vamos fazer nossos botões na parte inferior aqui. Vou ampliar o Command Plus ou o Control Plus em um PC e, em seguida, mantenha pressionada a tecla da barra de espaço e clique e arraste. Depois da ferramenta retângulo ou simplesmente vá até lá, arraste-a. Sabemos que está no topo. Você pode arrastá-lo para aqui. Qual é o atalho? É um teste. Qual é o atalho para ir até a parte de trás? É esse colchete, ao lado de P no teclado. Aqui está, para baixo, para cima, é o outro, para baixo, para cima, para baixo. Eu tenho esse botão. Vou manter pressionada minha tecla Option e arrastar outra. Talvez você tenha que redimensionar isso. Eu quero passar para cantos arredondados, porque quando eu digo que não, o que quer que você faça, não projete essa coisa. É difícil porque você diz: “Eu queria cantos arredondados, você não é o chefe de mim Dan, eu vou fazer algumas pequenas escolhas de design.” Com o retângulo selecionado, você pode notar esses pequenos pontos. Se você não vir esses pequenos pontos, se eu diminuir o zoom menos, você verá que eles vão embora. Esses pequenos pontos nos cantos ajudam com cantos arredondados. Se você não consegue vê-los, continue ampliando. Olha, ainda não consigo vê-los. Ou eles estão lá? Sim, eles estão lá. Diminua o zoom. Há um nível, você olha lá, eles não estão lá. Amplie mais um, posso pegá-los e arrastá-los. Lá vai você. Belos cantos arredondados. Você pode fazer isso. Vou ampliar todo o caminho para 100%. O atalho é, onde está? Este é o longo caminho, 100%. Veja este Shift. Essa pequena tecla de seta é Shift. Eu sou sempre como, olhe para aquele, especialmente em um Mac, eu sou como, qual é esse cara. Tenho que olhar para o meu teclado, felizmente está escrito nele. Você acha que eu saberia. Mas então Shift 0, no topo, vai para 100% porque provavelmente esse é um lugar melhor para projetar cantos arredondados porque você é como se fosse assim que vai parecer. Se eu estiver fazendo isso aqui, posso realmente fazê-lo aqui no meu inspetor de propriedades aqui, neste painel direito. Posso dizer, na verdade, vamos tentar, adicionar usando minhas teclas de seta. Lembre-se do atalho doce um, oh, tem uma olhada em outro, esmagando-o para cima, para baixo. Vou colocar em alguns cantos arredondados, cinco. É útil porque você pode obter consistência, então, como este outro, vá cinco. Clique neste. Vamos ter cinco cantos arredondados. Olhe para isso. Como estamos fazendo cantos arredondados, não é apropriado agora. Mas se eu clicar nisso, ampliado o suficiente, para que eu possa ver esse raio, você pode realmente manter pressionada a tecla Option em um Mac, tecla Alt em um PC e, na verdade, basta clicar em um deles e ir [inaudível]. Olhe para isso. Desfaça isso porque não precisamos dele agora. Mas você provavelmente teve essa pergunta como posso fazer uma sozinha? Você pode, basta pressionar a tecla Option em um Mac, tecla Alt em um PC e clicar nela e arrastá-la. Lá vai você. Antes de irmos, vamos adicionar um pequeno círculo no fundo aqui. A ferramenta circular, a elipse é um O. Eu vou arrastá-la para fora. Outra coisa que ainda não abordei, se você quiser que seja completamente circular ou quadrada, mantenha pressionada a tecla Shift enquanto está arrastando. Assista a isso, vou voltar para minha ferramenta de círculo, e antes de começar a arrastar, mantenha pressionada a tecla Shift, arraste-a para fora e você vê um círculo perfeito. Se eu soltar, elipse ou oval. De volta a segurar Shift, vou contornar isso. No momento, vou colocá-lo aqui, vou pegar minha ferramenta de tipo e clicar uma vez. Vou acertar minha vantagem e vou escolher um tamanho de fonte apropriado. Agora com o tipo. Eu quero movê-lo, e ele só vai selecionar isso. Eu clico em segundo plano e, em seguida, basta arrastá-lo para onde você quiser. Tamanho da fonte, aqui, estou usando minha seta para cima para levá-la a um tamanho que eu quero. Bold é estranho para isso. Aqui vamos nós. Isso vai ser bom o suficiente para este vídeo. Círculos, excitantes, retângulos. Oh, uma pequena coisa de bônus para círculos. cell ia fazer isso mais tarde, mas veja isso. Vê esse círculo? O que essa coisa faz? Você provavelmente já o arrastou, está pronto? Absolutamente inútil. Nunca usei isso. Eu posso ver que sou como, sim, que faz um gráfico de barras e eu não simulei um gráfico de pizza antes. Isso é o que essa coisa faz. De qualquer forma, vamos para o próximo vídeo. 11. Como usar cores no Figma: Espero que esteja sentado. Neste vídeo, vamos olhar para a cor. Você está pronto? Estável? Boom. É verde e preto. Não é muito emocionante que eu conheço. Vou tentar convencê-lo de que você não precisa de muitas cores quando se trata de seus wire-frames, você provavelmente deve deixá-lo cinza, mas ei, estamos aprendendo sobre cores neste vídeo. Vamos entrar e eu mostrarei o que você precisa saber. Para trabalhar com cores e selecionar algo. Vamos usar esse retângulo grande aqui como a cor padrão para Figma, se você apenas clicar nele. Agora preencha, clique nele uma vez e você pegue esse carinha. Se você nunca usou um seletor de cores antes, este pequeno ponto onde nossa cor está, você pode clicar e arrastá-lo. No momento, você só pode escolher vermelho. Para alterá-lo, este pequeno controle deslizante de matiz aqui, arraste-o para a zona que você quer que ele seja. Vou escolher alguma coisa e depois mover isso para obter essa saturação total, sem luz de saturação em algum lugar lá dentro. Outras coisas que você deve saber aqui se quiser branco completo, basta clicar, arrastar e arrastá-lo como passado, basta continuar e ficará branco. Qualquer um desses escuros no fundo, vou ser o mesmo. Branco, preto, esse é preto, não importa e eu vou escolher algum tipo de cor verde. Você pode escolhê-lo da marca ou simplesmente escolher azul claro é provavelmente a cor mais comum da armação de arame. É o padrão e [inaudível] alguns outros, então você acaba vendo essa coisa azul de aço por toda parte. Vou escolher uma visão um pouco mais verde. Você escolhe o que quiser. Outras coisas para saber sobre cor é transparência na parte inferior aqui, você pode tornar as coisas ligeiramente transparentes, o que não faz sentido, a menos que eu traga isso até a frente, estou usando meu colchete quadrado. Você pode ver que está cobrindo as coisas com um pouco de transparência. Na verdade, vou mudar que eles estão em 100%. Não importa se você faz isso aqui. Você pode ver que o 100% ou você simplesmente digita aqui e você diz que eu quero que seja 50, bem o mesmo novamente, você pode usar suas setas para cima e para baixo para passar por tudo isso. Quero que o meu seja um 100, perfeito. Se você é um pouco mais nerd de cor, então você pode ser como eu. Números hexadecimais. Essa é a versão wib de uma cor. Você pode não gostar disso, você pode gostar das visões RGB, lá vai, isso é RGBA para que você possa ver uma transparência no final, vermelho, verde, azul. Você pode estar misturando cores de talvez um manual de fala corporativo ou outra coisa e outras cores, CSS. Se você for um desenvolvedor, pode estar trabalhando dessa maneira. Cores RGBA e digite-as aqui. Luminância de saturação de matiz, eu uso isso um pouco. Brilho de saturação de tonalidade. Na verdade, eu faço isso neste aqui? Provavelmente não neste programa com muita frequência. Eu faço muito em coisas como Premiere e Illustrator, mas não aqui na Figma. Vou ficar com o número hexadecimal. Outras coisas que quero apontar é o conta-gotas. Então, temos isso aqui. Eu quero roubar essa cor, então eu seleciono nela, vá para a minha cor de preenchimento, clique no conta-gotas pequeno. Você pode ver aqui em cima? Há como uma versão ampliada e assista isso, eu posso movê-la. Você vê apenas zoom nas coisas, isso foi muito fácil porque podemos escolher esse retângulo grande, mas às vezes você só quer escolher um pequeno pedaço de cor desse pedaço. Vai ser esse cinza estranho. Conta-gotas, vou clicar neste. O mesmo com esse cara. Você, conta-gotas, você. Agora, para chegar aos olhos, muitas vezes, não vou entrar no seletor de cores para fazê-lo então vou desfazer para recuperar meus cinzas. Eu seleciono nele. Há o atalho para conta-gotas, como eu, não E-Y-E, a letra I. É um atalho. Selecione isso, pressione o conta-gotas, clique nisso. Há muito disso acontecendo. Como você quiser, obtenha isso da mesma cor para mim e seja resiliente. Não tente adicionar um monte de cores. Mantenha-o realmente preto, cinza, branco e faculdades até seis um pouquinho. Quando você começa a adicionar paletas de cores a ele, você novamente começa a inserir partes diferentes para a conversa sobre : “Essa é a cor certa? É a cor certa da marca?” Basta mantê-lo genérico, mantê-lo cinza e ninguém vai reclamar. Aqui em baixo, você pode ver as cores do documento? Você diz: “Ótimo, essas são as cores que eu já usei.” Isso, porém, fica louco grande e muito útil. Tudo bem por enquanto, porque você diz: “Ok, eu quero voltar para aquele cinza que tínhamos antes.” Ali está lá, algo que está sendo usado ou “Tem esse verde, era o verde? É o mesmo verde.” Mais tarde, vamos ver isso e veremos as cores da biblioteca da equipe. É bem mais tarde no documento, além disso, vamos olhar para algo chamado estilos de cores em um futuro não muito distante, onde arrumamos tudo e ficamos um pouco mais consistentes. Mas as cores dos documentos compartilharão tudo o que está sendo usado neste documento para que fique um pouco louco, mas é isso que elas são. Esse é o básico das cores. Vamos pular para o próximo vídeo. Na verdade, não vamos a lugar nenhum. Está te deixando louco, está me deixando louco. Você não pode fazer isso então. Vamos fazer alguns botões responsivos mais tarde. Mas, no momento, não posso viver com isso, precisa ser maior e isso precisa estar mais no centro. Uma das coisas que eu quero mostrar, um pequeno atalho pode ser útil é porque você quer torná-lo maior em ambos os lados, você pode manter pressionada a tecla “Option” em um Mac, tecla “Alt” em um PC. Quando você está digitalizando coisas em vez de apenas arrastar as bordas e depois tentar movê-las. Se você segurar a tecla “Option” em um Mac, tecla “Alt” em um PC, e fizer isso de ambos os lados e você estiver tipo, “Isso é melhor”. Agora podemos passar para o próximo vídeo. Isso é mesmo no meio, então? Sim. Organize a aparência, isso é melhor. Vamos fazer a mesma coisa por este. Tenho que substituí-lo por esse. Alguns de vocês dizem: “Por que ele se importa tanto?” Então alguns de vocês ficarão como, “Meu Deus, finalmente. Ele consertou o botão e ele vai se livrar da parada completa?” Não está alinhando corretamente, não é? De qualquer forma, vamos para o próximo vídeo agora. 12. Traçados mais atualização de padrões de cores no Figma: Olá, todos. Neste vídeo, vamos ver traços. Traços ao redor do lado de fora, essa é a linha ao redor do lado de fora aqui. Vamos ver menus de hambúrguer, que é apenas um grupo de linhas. Mas também veremos os fins aqui. Você pode ver essas lindas linhas arredondadas em vez desta grande extremidade plana na polegada? Veremos definir alguns dos padrões que toda vez que desenhamos algo como um retângulo, ele é sentado nos cantos arredondados e o traço que gostamos e a cor que gostamos. Há algumas coisas que abordamos neste vídeo. Vamos pular para dentro. Vamos fazer nosso derrame. Vamos clicar no retângulo. O traço é este aqui, por padrão, você recebe um preenchimento, recebe um traçado. Para adicionar um traçado, pressione o pequeno botão Plus. Temos um traço preto ao redor do lado de fora. A largura do traçado, podemos arrastar. Vou colocar apenas dois para o meu. Você tem que ter um derrame em torno de coisas? Você não, mas estamos aprendendo coisas. A única coisa que você vai ficar irritado mais tarde é se você tem um estilo, você decidiu que este verde com esse traço do lado de fora, você está tipo, ok. Vou desenhar outro neste produto, detalhes aqui. De uma ferramenta retangular, você é como, é cinza. É cinza novamente. Não tem golpe nem cantos arredondados, e você está tipo, ok, então eu vou até aqui, e vou mudar para cinco e ficar um pouco louco tentando pegar a ferramenta conta-gotas. O que você pode fazer é chegar a um ponto. Você é como, na verdade, eu gosto disso. Gosto dos meus cantos arredondados, gosto do meu verde, gosto do meu derrame. Posso alterá-lo como padrão. Vamos ao nosso pequeno ícone Figma aqui e vá para Editar. Há este aqui que diz definir propriedades padrão. Nada realmente acontece, exceto que essa palavra aparece. Mas agora, eu clico, pego minha ferramenta retangular, desenho algo e olho para isso. Você tem um retângulo verde doce com forro preto do lado de fora e pelos cantos. É assim que você define os padrões, e eu vou deixar isso. Porque estes já foram desenhados no passado, eu não posso ir assim, quero que agora pareça assim. Não temos configuração de estilo, o que faremos mais tarde no curso. O que você pode fazer é clicar nesse cara e dizer: Editar. Copie suas propriedades. Estas são as propriedades dele aqui. Vamos copiá-los e podemos clicar nele. Não importa de que cor era, se formos para Editar, Colar Propriedades, ela aparece. Podemos clicar em mais de um, temos os dois retângulos. Vamos para Editar, Colar Propriedades, aqui vamos nós. Isso é derrame. Vejamos um pouco mais de derrame. Vamos adicionar um pouco de tangente. Eles estavam definindo os padrões, e vamos dar uma olhada em fazer um pequeno menu de hambúrguer no topo. Vou ampliar, no Command Plus, em um Mac Control plus em um PC, e chegar aqui para começar pelo menos. Vamos soltar o retângulo. Basta clicar e segurá-lo e ele mostrará outras coisas. Deixe-me usar a ferramenta de linha. Vou usar minha ferramenta para clicar em segurar e arrastar. Isso não funcionou. Não sei por quê. Clique em segurar e arraste. Ele tentará ser direto. Se não for reto o suficiente para você, segure a tecla Shift. tecla Shift fará algo com uma ferramenta de linha. Lembre-se que fez com a ferramenta circular, fez um círculo perfeito. Com uma ferramenta de linha, ela só faz com que ela vá em cerca de 45 graus, 90 graus e reta. Eu quero algo por tanto tempo. Não se preocupe com quanto tempo ainda dura, vamos conseguir, então vamos sair para 100% e torná-lo do tamanho certo. Vamos pegar esse cara. Vamos ter três deles. Vamos copiar e colar. Lembre-se, copiar e colar tem essa opção estranha, bem, não é estranho, mas está por cima. Lembre-se, eu costumo usar a ferramenta Seleção, mantenha pressionada minha tecla Option em um Mac, tecla Alt em um PC, e apenas arraste outra versão para fora, e isso realmente quer ir por baixo dela, o que é ótimo. Vou apresentar mais um atalho. Se esse cara apresentar outro atalho aqui, vou gritar. Feche os olhos ou os ouvidos. Vou apresentar a vocês o Comando D ou Controle D. Muito comum na Figma. Só significa, faça de novo. Duplicar, faça de novo. Como você quer chamá-lo? Então, Comando D. Faremos a última coisa que fiz. Eu posso ir Comando D, D, D, D. É ótimo quando você está fazendo como listas e imagens e você tem quatro delas. Você só quer fazer um novo. Não importa com o que você está fazendo isso. Digamos que eu queira algum tipo e estou fazendo uma lista, arraste-o para fora, segurando minha tecla Option em um Mac, tecla Alt em um comando do PC D, D, D, D ou Controle D, D, D, D, D em um PC. Você pode abrir seus ouvidos agora para pessoas que estão gritando sobre meus atalhos. Com essas linhas aqui, você é como, quão grande deve ser o nav? A melhor maneira é copiar um modelo existente. Vou mostrar alguns desses modelos que a Figma tem. Mas se você está construindo coisas por conta própria, especialmente coisas como ícones, é melhor lembrar que a mudança zero ou 100% aqui em cima, para que você tenha uma boa noção do tamanho. Porque se você os tiver assim, eles serão muito difíceis de clicar. Ou se eles vão ser grandes jumbo, só não é tão divertido. Bem, isso não parece que deveriam. Eu tive sorte com a minha. Acho que os meus são adequadamente dimensionados aqui. O que você pode fazer é arrastar uma caixa ao redor de todos eles. Pegue o canto e escale-os para o que você acha que eles deveriam sentir. Isso é bom para mim. Vou colocá-los em uma posição apropriada para navegação. É chamado de menu hambúrguer você ou sanduíche de navegação. Aquela coisa que você clica, que fornece uma lista de opções, muito comum no canto superior direito, mas também pode aparecer no canto superior esquerdo. Vejamos um pouco mais de bondade Stroking. Vou aumentar o zoom porque quero que a pequena bolha termine. Por aqui, o peso do AVC que falamos. Vamos começar no endpoint. Eles fazem duas coisas. Clique no primeiro. Você pode colocar uma flecha no final, isso é ótimo. Se eu bater em desfazer, ele não desaparece. Talvez isso esteja na minha máquina. Não sei por quê. Desfazer, desfazer. Essa é uma dessas peculiaridades. Vou deixá-lo neste curso porque é uma peculiaridade estranha. É só no meu computador? Não, acho que é universal, mas provavelmente vai desaparecer no futuro. É uma dessas atualizações em que está na lista de correções de bugs de alguns desenvolvedores. Não é super importante porque eu posso voltar a nenhum. Mas meu desfazer não desliga isso. Nós saímos em uma tangente. Vamos ficar no ponto porque quero mostrar essas e essas três opções. Seu golpe no momento acaba logo no final. Você pode vê-lo lá? O segundo, eu vou fazer esse golpe tem um final arredondado e esse é o bonito que eu quero. O golpe ainda termina lá, mas há apenas um pouco redondo, isso é um boné, que é um boné redondo, e isso vai ser um boné quadrado. Há um aqui. Veja a diferença entre este superior e o inferior. O traço é do mesmo tamanho, por baixo, mas isso tem como uma grande tampa quadrada na extremidade. Isso foi infelizmente chamado de tampa de bunda e isso tem um bom boné redondo. Isso é o que eu quero. Você vai ver muito misto se você selecionou coisas e não sabe o que dizer, em vez de entrar no ponto de interrogação, estou confuso, isso é misto. Há todos os tipos de coisas diferentes, eu vou dizer que você está por toda parte, o que funcionou apenas parcialmente. Nós vamos fazer o fim também. Aqui vamos nós. O que aprendemos? Há algumas peculiaridades para Figma como desfazer com as setas. Aprendemos sobre traços. A última coisa que eu quero fazer é com imagens, escrevemos uma foto de produto, mas na verdade é mais comum apenas desenhar a cruz pelo meio como um suporte de lugar para uma imagem. Vou pegar minha ferramenta de linha e vou de um canto até aqui. Este canto. Você tem que voltar para a ferramenta toda vez. Vá. Seria muito comum ter isso. Essa é uma dica visual de que há uma imagem para vir aqui, mas ela não está disponível agora. A outra coisa que você pode fazer apenas enquanto estamos no tópico é que, em vez dessas linhas, vou me livrar delas por um segundo e trazê-las de volta, é que podemos colocar como um ícone que mostra uma imagem. Um ícone muito comum para isso é um ícone. Vou te mostrar. Está em seus arquivos de exercícios. Como você traz uma imagem ou um ícone? Há algumas maneiras, e há esta aqui. É estranho. Sob sua ferramenta retângulo, como trazemos imagens também, para que eu possa colocar uma imagem. Há o atalho. O outro lado está sob Figma. Você pode ir para Editar arquivo, Inserir imagem. Use o atalho um pouco. Mas vou trazer uma imagem sob seus arquivos de exercícios e ícones. Traga o que diz Icon-Image e clique em Abrir. Com isso, se você trazer uma imagem, você clica uma vez, ela virá em tamanho gigantesco ou qualquer tamanho que fosse. Vou desfazer, voltar para minha imagem de entrada. Encontre-os novamente. Você pode clicar e arrastar, e isso lhe dá um tamanho mais apropriado. O que você vai notar é que está esmagando, o que está me matando por dentro. Nunca deixe seu ícone assim. Mantenha pressionada a tecla Shift e arraste-a para fora. A mesma coisa com as linhas fazendo-as ir direto em um retângulo sendo perfeitamente quadrado. Isso também seria muito comum para uma imagem de suporte de lugar. Não vamos fazer isso no momento. Não me importo. Eu realmente não entendo. Na verdade, não, mantenha as linhas lá porque vamos ver algo no próximo vídeo que depende de ter algumas linhas diagonais lá. Isso é Strokes 101. Vamos entrar no próximo vídeo. 13. Edição de objetos e como escapar no Figma: Olá, todos. Vou apresentar brevemente o modo de edição de objetos, esse tipo de linhas listradas onde você está preso atualmente. Você pode estar preso aqui agora e você não sabe como escapar. Deixe-me mostrar como escapar e o que é realmente útil. Eu quero apresentar isso no início do curso porque se você é um clique duplo, você provavelmente já esteve lá por acidente e eu vou te mostrar como sair. Vou pegar minha ferramenta retangular, vou desenhar algo. Normalmente, você pode simplesmente pegar as bordas e você é como, ok, isso é imaginar como eu quero. Mas se você quiser dizer: “Quebre a borda e distorça isso”. Você clica duas vezes. Há a maneira oficial de entrar aqui. Eu o selecionei. Olha, há o caminho oficial. “Editar objeto” clique nisso e nada realmente acontece, exceto que essas alterações no menu superior é o que deve começar. Clique nisso e você obtém esses recursos extras. Vamos cobri-los com mais detalhes quando começarmos a desenhar nossos próprios ícones, mas quero que você escapou agora mais cedo no curso. Então, a maneira oficial de entrar nele, clique nisso. Ok, e o que você pode fazer é pegar um canto e arrastá-lo e você está tipo, eu destruí ou manipulei. Você também pode clicar no centro e excluir o centro do retângulo. Clique nesta borda aqui, exclua a parte superior. É isso que é o modo de edição de objetos. Ele o quebra daquele retângulo que faz apenas coisas retangulares e eu mostro aqui porque muitas pessoas se perdem ou ficam presas aqui. Então, vou desfazer isso. Agora, a maneira oficial de sair; vamos clicar em “Concluído”. Mas a maneira normal, a maneira como a maioria das pessoas faz é apenas clicar duas vezes em segundo plano. Maneira oficial, selecione-o, dentro; out. Maneira não oficial, clique duas vezes nele, clique duas vezes no plano de fundo para sair. Eu deveria excluir isso, não preciso disso. Eu só queria mostrar o que era o modo de edição de objetos e como sair se você ficou preso. Tudo bem, para o próximo vídeo. 14. Ferramenta de escala vs de seleção no Figma: Vejamos o dimensionamento versus a ferramenta de seleção. Você vai precisar de ambos e eles são um pouco rápidos de outros programas que usei e me pegaram no início. Então, vamos fazer isso juntos. Com minha ferramenta de seleção, vou clicar no retângulo. Não estou no modo de edição de objetos, lembra? Tudo o que eu quero fazer é, eu tenho essa ferramenta aqui, a ferramenta padrão. Posso clicar na borda e posso arrastá-la. Foi assim que você imaginou. Isso é na maioria das vezes o que você quer fazer. O que você notará é que o derrame permanece em dois o tempo todo. Se eu fizer outra coisa, digamos que eu selecione o texto e o retângulo e estou tipo, quero que seja maior e arraste-o para fora. Isso é estranho. Talvez se eu segurar Shift, segure Shift, ainda não funcione. É aí que entra a ferramenta de balança. Há momentos em que você realmente quer fazer tudo maior, traçado, tipo, tudo. É essa ferramenta aqui escondida embaixo da ferramenta de seleção, clique, segure, arraste, não segure e arraste, basta clicar e segurar e lá está lá, a ferramenta de escala. Eu clico nisso, tenho ambos selecionados. Posso simplesmente clicar e arrastar o canto para lá. Se eu não segurar nada, ele faz isso proporcionalmente, escala-o para cima, tanto o traçado, você pode ver o traçado, a fonte e o retângulo? Há momentos em que precisamos de ambos. Digamos que neste caso eu desenhei isso muito grande para o que eu preciso que seja. Então, vou para a minha ferramenta de escala e vou torná-la um pouco menor e a fonte, porque eu uso isso como retângulo. Meu pequeno golpe fica menor. Eu o trago para a frente usando meu colchete quadrado. Mesmo se você agrupar as coisas primeiro, você ainda precisa usar a ferramenta de escala. O que quero dizer com isso é vamos dizer que fazemos, o que temos? Esses dois. Selecione os dois. Vou clicar com o botão direito do mouse nele. Vou dizer que você está agrupado, essa seleção. Vou usar minha ferramenta de seleção antiga normal. Ainda faz a mesma coisa, mesmo achando que eu o agrupei. Não. Ainda faz as coisas estranhas. Você tem que mudar para a ferramenta de escala e faz isso com tanta frequência que há um atalho e você é como, excelente. Isso é fácil de lembrar. Provavelmente é S porque é a ferramenta de escala. Não. É K. Não sei por quê, mas não se preocupe. A ferramenta S, se eu apertar S, é a ferramenta de fatia que ninguém usa. Há pessoas lá fora provavelmente usando isso, mas eu nunca faço. É um grande desperdício de um bom atalho. Embora tenhamos que usar K. É assim que é. V é o atalho para a ferramenta de seleção e K, você acaba alternando. Novamente, estou tentando não fazer muitos atalhos, apenas aqueles que são realmente úteis. Eu vou batê-los em você durante todo este curso, então você vai para o fim do ano e será como, eu sei que é K, eu sei que é V, porque eles são úteis, e é difícil lembrá-los às vezes. Você precisa de alguma surra. K, e você pode escalá-los. Perfeito. Volte para a ferramenta de seleção e desligue para o próximo vídeo. 15. Frames vs grupos no Figma: Olá a todos. Neste vídeo, veremos as diferenças entre grupos e quadros. Até agora, neste curso, tem sido bastante básico. A ferramenta de tipo faz o que você está fazendo imagens, a ferramenta retângulo faz o que você está fazendo imagens. Não é ciência de foguetes. Pronto para que este vídeo seja ciência de foguetes. Eu o apresentei no início do curso porque provavelmente era a coisa mais difícil que eu tinha que me acostumar a vir para Figma. Vou apresentar um pouco agora e um pouco mais tarde, e um pouco mais, e no final, você se tornará mestre de quadros. Mas se você chegar ao final deste vídeo e disser “Eu entendo, mas não entendo”, não se preocupe. Estou apresentando isso cedo para que possamos revisitá-lo algumas vezes. Primeiro, vamos entender os grupos. Vamos desenhar um monte de formas aqui em cima. Faremos a ferramenta Retângulo. Faremos três formas. Vejamos a ferramenta Polygon. Você não precisa ter o tamanho certo. Eles podem ser três círculos. Estou fazendo isso porque parece bom. Faça três ou algo assim, e o que você verá aqui neste quadro Detalhes do Produto é minha elipse, meu polígono e meu retângulo. Posso selecioná-los todos e posso clicar com o botão direito do mouse neles e agrupá-los. Ou eles são muito comuns, Command G em um Mac, Control G em um PC. Eles são agrupados. Ótimo. O que acontece? Aqui você pode ver que o ícone mudou? Chama-se Grupo 2. Onde está o grupo? Deve haver um grupo em outro lugar. Eu fiz um grupo mais cedo, não fiz? Aí está, esse botão. Grupo 2, posso renomear. Esses podem ser meus ícones. Ótimo. Este pequeno ícone aqui não é importante, mas você se acostumará com essas formas, então a pequena linha pontilhada é um grupo. Posso olhar em volta, olhar que há outro grupo. Posso olhar dentro do grupo das minhas camadas, esta pequena seta virada para baixo aqui. Você pode ver coisas dentro dela. O agrupamento é útil porque sabemos o que é agrupamento. Você pode pegá-los e eles se movem juntos. Mas eu posso entrar neles individualmente clicando neles aqui no painel Camadas e indo, isso precisa ser assim. Ou podemos entrar nesse modo de edição de objetos. Vamos clicar duas vezes no plano de fundo. Nem uma vez clique duas vezes, entramos no grupo e podemos operar e trabalhar nele, clicar duas vezes nele para sair e ainda é um bom grupo útil. Você pode desagrupar clicando com o botão direito do mouse e desagrupando, e então ele sai desse grupo pontilhado e volta a ser unidades únicas. Vou voltar Command G ou Control G em um PC e agrupá-lo. Qual é a diferença? Vamos fazer duas versões. Vou duplicar esse cara, e vou clicar com o botão direito do mouse nele e dizer “Desagrupar”. Eu tenho esse agrupado. Você pode vê-lo, ele se chama Grupo 2. Esses caras aqui, apenas andando sozinhos neste quadro. O que vamos fazer é muito semelhante, vamos selecionar todos eles. Em vez de clicar com o botão direito do mouse e dizer grupo, vamos para “Seleção de quadros”. É basicamente o mesmo que um grupo, exceto que o ícone é diferente. Você pode ver aqui, lá está o meu top, ele moveu essa ordem de camada, então faz mais sentido. Este meu grupo, são eles lá, este é o meu quadro, o ícone é diferente, você recebe esse pouco, como você chama isso? Símbolo de libra, símbolo de hash, grade, seja lá o que for. Mas eles fazem muito da mesma coisa, então você ainda pode vê-los lá dentro. Eles ainda estão presos dentro deste belo quadro, então qual é a diferença então? A diferença é que Frame pode sobreviver sozinho. O Grupo, se eu entrar nesse grupo e disser que você se foi e você se foi, talvez clicando duas vezes nele para entrar no grupo, o Grupo desaparece. Bye Group. Se eu desfazer isso porque quero de volta. O quadro, por outro lado, se eu entrar, excluir esse cara, este, você fica com um quadro que pode ser estranho quando você é novo. Você é como “Quais são esses quadros vazios em todos os lugares?” Porque o quadro pode existir sem o Grupo. Por que isso é útil então? É útil porque estou desfazendo, é porque posso fazer coisas como digamos que eu quero cortar isso. Posso arrastar meu quadro para dentro, você pode vê-lo? Ele está operando de forma diferente. Se eu arrastar a borda disso, olhe o que acontece, rodo. Se eu arrastar a borda disso, posso fazer coisas assim, cortar o conteúdo. Posso usar o quadro como uma máscara para esconder coisas, o que é uma coisa. Na verdade, deixe-me mostrar-lhe rapidamente. É por isso que isso é útil. Você cria uma boa lista grande, você pode pegar seu quadro, torná-lo um pouco menor. Sei que estamos avançando no curso, mas acho que quero apresentar quadros algumas vezes. É por isso que é bom. Você tem essa lista e você pode ver isso para rolar, de modo que a clipe. Diga com isso, você tem as coisas penduradas sobre as bordas aqui, eu posso dizer: “Onde está o seu quadro? Você pode estar lá.” Então eu posso dizer “Conteúdo do clipe”, para que eu possa usar pergaminhos. As pessoas podem rolar para a esquerda e para a direita, cortando as bordas. Essa é uma das coisas. Vamos pular de volta. É um clipe que contém esse um dos motivos e há outros. A razão pela qual eu mostro para você aqui é que, você vai baixar os modelos de interface do usuário gratuitos de alguém e você vai dizer você vai baixar os modelos de interface do usuário gratuitos de alguém e você vai “Por que tudo está enquadrado? É um pouco estranho. Eu não entendo.” Essa era minha posição de qualquer maneira. A razão pela qual as pessoas fazem isso, chegam a um nível intermediário ou um nível avançado de Figma e param de usar grupos. Porque os quadros são como grupos, mas com recursos extras bônus e o conteúdo do recorte é um deles. Vejamos um dos outros principais, apenas para apresentá-lo agora e vamos trabalhar nisso um pouco mais em profundidade mais tarde. O que podemos fazer é eu realmente desagrupar isso. Quando você pensa em um quadro, é que você o agrupa. Você agrupa este top e depois desagrupa. Seu enquadre-o, então você desagrupa. Isso faz sentido? O desagrupamento funciona para ambos. Agora, desagrupe e você vai notar que esses caras acabam de sair. Vou colocá-los acima aqui e pego meu nome aqui e vou selecionar todos esses e transformá-los em um quadro, não em um grupo. Porque eu quero ver o bônus. O bônus é, assista isso. Posso clicar duas vezes para entrar no modo de edição de objetos. Estou dentro do meu quadro e vou dizer que você fica com o elevador superior deste quadro, que está dentro. Esta moldura é a coisa ao redor do lado de fora. Esses caras, entretanto, vou clicar em você. Eu vou dizer, na verdade, você vai para o canto superior direito, mesmo com você, você pode ir para o canto superior direito, mesmo com você, canto superior direito. Você é como, o que isso faz? Assista isso. Se eu for agora e vou fazer uma cópia dela e assistir isso, quando eu arrastá-lo, estamos aqui. Ele fica no canto superior direito do quadro. Os grupos não podem fazer isso, eles os chamam de restrições. Faremos a propriedade mais tarde. Mas quando chega a coisas como, preciso de outra versão, preciso de um tablet. Basta clicar na minha ferramenta de quadro e digamos que será um tablet, mini. Vai ser retrato e depois vou colocá-lo aqui e comecei a projetar. Em vez de tentar arrastar tudo para fora e tentar fazer tudo alinhado, você pode clicar nesse cara e ir, você vai até aqui. Posso colocá-lo no topo e posso arrastar isso e posso enfiá-lo para aquele lado. Você vê a foto? Ele fica cada vez mais aprofundado quando você começa a empilhar as coisas, e significa que quando você começa a adicionar texto, as coisas começam a se refluir, não fica complicado, fica mais incrível. Isso é o que ele faz. Mas essa grandiosidade vem em um estágio confuso porque lembre-se, no início deste curso, arrastamos os quadros para fora. Lembre-se do quadro, esse era o nosso celular. Acabamos de fazer isso agora novamente com o tablet. Quadros se acostumam para a grande coisa ao redor do lado de fora, mas também as pequenas coisas dentro dela. Esses pequenos quadros aninhados. Tenho moldura dentro de um quadro, estranho. Se eu trouxer, diga talvez aquele ícone que trouxemos antes. Você provavelmente não notou, mas se eu for a uma imagem de lugar, e eu trouxer a mesma ou outra outra. Veja o que acontece se eu arrastar isso para fora. Você notará que, na verdade, você pode ver que eu o trouxe como um quadro. É uma moldura, dentro dela está nossa pequena coisa vetorial, mas está dentro de um quadro. É por isso que não podemos deixá-lo até o final do curso, porque eles seriam quadros em todos os lugares. Você é como, neste caso, não importa. Não estamos usando essa bondade com restrições e variância e todas as coisas legais que vamos fazer mais tarde. É como um grupo. Isso é tudo o que vamos usá-lo, para esse cara. Mas saiba que mais tarde, há algumas coisas extravagantes que podemos fazer. John, diga-me, Dan é ruim em grupos? Não. Os grupos são ótimos e funcionam muito bem, a menos que você não tenha todos os recursos extras. Esse é o meu ponto principal deste vídeo. Vamos usar quadros a partir de agora em vez de grupos porque eles têm recursos que vamos aprender mais tarde e eles simplesmente aparecem em lotes na Figma e eu me perguntei por quê. O estranho é quando você tem quadros dentro de outro quadro, estranho. Por que você tem quadros dentro dos quadros? A última coisa é que esse quadro, por que este tem um nome? Como você conseguiu esse nome lá e este não tem um nome? Basicamente, se um quadro não estiver listado, ele tem um nome. O que quero dizer com isso é ver este quadro aqui, vou selecioná-lo. Se eu o arrastar para fora daqui, assistir, nome dele aparece lá dentro, o nome dele desaparece. É por isso que às vezes você pode ver um nome de quadro e, às vezes o quadro é usado apenas como um grupo e está dentro de outro quadro. Uau, que vídeo confuso, Dan. De qualquer forma, espero que tenha nos aproximado de entender quadros versus grupos. O que não precisamos é que não precisamos desses exemplos específicos que fizemos. Vamos criar alguns ícones específicos em um pouco. Mas estamos caminhando para entender quadros versus grupos. Exclua esses, e eu o verei no próximo vídeo. 16. Projeto do curso 02- Wireframe: Olá a todos. É hora do projeto de aula, quero que você crie algo assim. Você pode estar acompanhando até agora e você pode estar em um tipo semelhante aqui. Se você não estiver, quero que você construa todos os seus quadros. Quero que você construa esta primeira página mais essas outras três, basicamente apenas outras versões desta primeira página. Retângulos, linhas, algum texto. Eu quero que você o mantenha muito razoavelmente semelhante ao meu layout. Mesmo que você goste, se você sabe, se você discorda e gosta de não, eles não deveriam estar lá, mantenha-o semelhante porque eu quero que você acompanhe seu exemplo ao longo deste curso e essas unidades me ajudam a mostrar um pouco diferente recursos na Figma. Mantenha-o próximo a isso e os requisitos reais para os diferentes projetos de classe estão em seus arquivos de exercícios. Você verá algo e eles chamaram Projetos de classe. Abra isso e parecerá algo assim fizemos este primeiro, então ignore que agora, se você não tiver esse URL do site mudará, construindo-o no momento. Mas talvez você vá para esse site e você vai criar seu próprio resumo e persona, então nós já fizemos isso potencialmente. Então estamos até aqui, então use as habilidades que você aprendeu até agora. Deve parecer algo assim. Se você estiver procurando por uma versão maior, poderá aumentar o zoom neste PDF. Mas se você não puder, em seus arquivos de exercícios há o exemplo PNG, Wireframe, apenas uma boa versão grande que você pode ver. Há um arquivo Figma lá também. Lembre-se se você não consegue se lembrar de como fazer as coisas do arquivo Figma, quando você for para Casa, vá para seus rascunhos e aperte isso e você pode importar esse arquivo Figma para você. O que mais precisa ser feito? Aqui estão os requisitos, portanto, quatro páginas, essas são as quatro páginas do nosso fluxo de tarefas. Escolha sua própria cor, ela não precisa ser verde e sua própria fonte. Você perde pontos se usar papiro, Trajano, Pincel Script ou Comic Sans, ou fontes terríveis. Escolha uma fonte simples e simples que eu não odeio é de acordo com os requisitos. Estou olhando para você papiro e então o que eu quero que você faça é apenas uma captura de tela e mostrarei como exportar quadros e coisas corretamente mais tarde, mas na verdade é mais fácil no momento entrar na Figma e abrir seu projeto e basta tirar uma captura de tela em um Mac, é Command Shift 4, você pode simplesmente arrastar uma caixa ao redor dela e na sua área de trabalho você provavelmente tem uma captura de tela. Em um PC, é um pouco diferente que você usa a tela de impressão e depois a cola em algum lugar. Eu não sou grande no PC exatamente como fazer isso para as diferentes versões, então apenas o Google como fazer uma captura de tela. Você pode tirar uma foto com seu telefone. De qualquer forma, você faz isso e, em seguida, carregá-lo para os projetos ou exercícios. Depende do site em que você está, você vai dar uma olhada. Haverá uma maneira de enviá-lo como tarefa, discussão ou projeto. Uma vez que você tenha feito isso, verei você no próximo vídeo, é grande lição de casa. Eu não sei. Não demora muito. Mas é bom. Vamos praticar nossas ferramentas, nossas técnicas, e vamos melhorar juntos, mas precisamos do nosso Wireframe. Tudo bem, te vejo no próximo vídeo. 17. 17: Olá a todos. Vamos falar sobre onde conseguir ícones gratuitos. Não vou falar especificamente sobre sites, embora eu lhes dê alguns. É mais sobre o que você procura ao baixar ícones para o nosso arquivo Figma Estou usando iconfinder.com. Gosto, há muitas coisas gratuitas Coisas bem pagas também. Mas se este site não estiver aqui, quando você visita a Internet, há muitos ícones gratuitos. Ok, então o que você está procurando é, digamos que eu queira o ícone do carrinho de compras. Ok, isso é o que eu preciso para minha maquete aqui. O que você está procurando é um formato de arquivo específico. É GorDong, estou parando aquela coisa para medir a carga de qualquer maneira. Portanto, há algumas coisas na maioria dos sites. O principal tem tudo a ver com o quão gratuito é. Está bem? Porque existe o gratuito e depois o é devidamente gratuito. Gratuito ou licenciado, vou usar o que é para uso comercial Está bem? No entanto, este aqui exige que você o use comercialmente, mas você precisa se conectar a eles, o que é totalmente bom Você pode encontrar coisas boas e gratuitas lá. Este aqui requer uso comercial, mas não requer um link de retorno. Então, na verdade, não preciso reconhecer as pessoas que fizeram isso. Então, aqui, escolha qualquer coisa que eu diga, escolha qualquer coisa. Vou encontrar um carrinho de compras que se parece com um carrinho de compras. Aqui está um. Escolha algo rápido, Dan, as pessoas estão assistindo Al corretamente. Essa. Tudo bem. Então esse aqui. Vou abri-lo e o que você encontrará na maioria desses sites é que há uma versão G e uma versão SPg Vamos dar uma olhada em ambos. Ping é provavelmente o que você já conhece. Spg, você pode ou não já saber. Então, vou escolher uma versão menor do ícone desse G e mostrarei a diferença. Vou baixar os dois, colocá-los no meu desktop e neste G, vamos comparar os dois e como a Figma lida com os dois. Existe um certo e um errado? Sim, Fg é melhor, mas mais complicado. Mas agora que sabemos o que são quadros e grupos, na verdade não é tão ruim. Ok, vamos trazer um arquivo. Eu vou fazer assim, coloque a imagem, ok? E vamos trazer os dois. Você pode inserir mais de uma imagem por vez segurando a tecla Shift e clicando em ambas. Vamos clicar em abrir. Você pode ver que eu tenho um número, dois pequenos lá. Você pode até ver meu pequeno ícone parecer um pequeno carrinho. Ok, então vou clicar em segurar a tecla Shift para que, quando eu os arrastar para fora, eles não fiquem todos tortos desse jeito Ok, segure a tecla Shift no teclado. Essa é a razão pela qual temos SVG em vez de PNG. Eu reconheço que baixei uma versão muito pequena. Ok, aqui aqui, você pode baixar como se fosse uma versão realmente grande. Vamos fazer o download e ficará bem. Vamos trazer outro. Vamos lá, shift K. Ok, nós temos esse outro PNG, a diferença é: você consegue ver o tamanho daquele Ok, então eu posso obter um PNG de boa qualidade, mas meu SPG é de 1 kilobyte Isso é 112 kilobytes. Essa é a razão pela qual não o fazemos. Preferimos usar G. Parece bom , mas é gigantesco Não consigo usar PNG. É transparente, o que é incrível. Esse Fg é transparente. Você fica tipo, uau, isso não é transparente. Tem um fundo branco. Fg está em figma. O que eles fazem é que analisamos isso mais cedo, você pode ver? Eles vieram como nossa moldura. Ok, dentro dessa moldura há um grupo. Dentro desse grupo há um vetor. Isso é tudo o que realmente queremos, então vou copiá-lo. Ok, saia desse quadro e clique em Colar. Na verdade, eu não saí dessa moldura. Você pode arrastá-lo para fora da moldura, então ele fica parado lá. Terra de ninguém. Então, vou clicar nessa coisa. Eu meio que gosto que seja isso que eu faço. Eu não quero isso em uma moldura no momento. Eu só quero retirá-la e deletar a moldura original só para ter o vetor espalhado por dias felizes, agora está transparente, está colorido, ok Assim, posso continuar usando minha ferramenta Eyedropper e realmente começar a usá-la agora. Considerando o PNG, não podemos mudar a cor. Nós poderíamos, podemos pegar um Photoshop, alterá-lo, ok. Mas, obviamente, o SG é escalável. Isso é o que o S e o SPg são. Então, ok, sim, podemos entrar no modo de edição de objetos, que você já conhece, ok. Se você quiser, eu adoro isso, mas eu realmente quero clicar duas vezes para começar a entrar. Eu realmente quero que uma espiga seja tratada. OK. Parece um escavador De qualquer forma, você entendeu, os BD's são melhores. Portanto, sempre que você estiver procurando por ícones gratuitos ou não, certifique-se de obter o SVG. Tudo bem. Outro ótimo lugar para obter material gratuito é parte da comunidade Figma Então, se você voltar para uma casinha aqui no topo, haverá uma opção em algum lugar por aqui chamada Figma Community É meio novo. É melhor no meu. Pessoal, pequena atualização rápida. Você teria resolvido isso. Eles mudaram a guia da comunidade, então vamos usar o botão Início. E não está lá onde eu te mostro no vídeo, mas está aqui embaixo. Não é difícil encontrar uma comunidade para explorar. Eles provavelmente o moverão novamente assim que eu fizer essa atualização, mas aí está. Continue com o vídeo. Vamos fazer uma pausa e ver no que Dan está trabalhando Hmm, nada incriminador. Vamos deixá-lo lá, dependendo de quanto tempo no futuro ele ficará cada vez mais robusto. Há coisas incríveis aqui e a maioria é gratuita. Ok, então aqui você pode fazer coisas como ícones, ok. E você encontrará muitos ótimos conjuntos de ícones criados por pessoas que podemos usar. Não é tão pesquisável quanto algo como o localizador de ícones, se você quiser apenas curtir, ei, eu preciso de um compartilhamento ou ícone de mídia social Você tem que pesquisar um pouco mais sobre isso. Mas tem coisas boas e meio que já estão na Figma Ok, então vamos dar uma olhada na palheta Fig. Ok, Fig pick significa apenas que Figma decidiu que isso é incrível e que todos deveriam dar uma olhada Então, o que podemos fazer é que, quando estamos lidando com a comunidade do Figma, você acaba baixando coisas Ok, então vamos dar uma olhada. Permita que você possa acessá-lo para visualizá-lo. Mas, eventualmente, em algum momento para tirar todas as coisas disso, você precisa fazer algo chamado duplicação Ok, então vamos clicar em Duplicar. E, basicamente, você salva sua própria cópia em seu tipo de fluxo Figma Então, agora vamos dar uma olhada, dar uma olhada por aqui. Há duas páginas diferentes. Oh, muitos ícones bons. Ok, e antes de realmente copiá-los e colá-los, deixe-me mostrar o que acontece com esses arquivos da comunidade, ou pelo menos com qualquer coisa que você tenha duplicado Vamos voltar para casa. O que você vai notar agora na minha casa é que estou meio perdido. OK. Então, vou até minha pequena lista aqui embaçada, meu endereço de e-mail embaçado, e vou dizer escolha meu Deixe-me voltar para o tipo de base onde estávamos antes. Isso demorou um pouco. O seu pode fazer o mesmo, então vou deixá-lo lá. OK. Eu estava tipo, eu fiz algo errado? Eventualmente carregou. OK. O que acontece é que ele se duplica em seus rascunhos Você notará que agora eu tenho unicórnios. Eu fico tipo, você meio que o abriu só para crescer, sair dele, mas agora faz parte do seu fluxo Ok, você pode clicar com o botão direito do mouse e excluí-lo. Está bem? Mas tudo o que você abre ou duplica no Figma termina É parte do seu mundo. Agora, esse é o tipo de benefício, eu acho, de trabalhar na nuvem, que a Figma oferece. Está bem? Não é segurança, seu disco rígido, faz parte do seu tipo de login on-line na nuvem. Isso também significa que depois de um tempo, você terá muitas coisas abertas aqui e será difícil saber qual é a sua. Então, vamos pesquisar e encontrar os arquivos que você deseja mais tarde, e você pode estar muito organizado e realmente excluir os que não deseja mais. Ok, então temos alguns arquivos abertos. Temos aquele em que estamos trabalhando, além nossos pequenos contras da Unicorns Union Então unicórnios. De qualquer forma, então vamos dar uma olhada agora. Dependerá de como essas coisas estão sendo criadas. Essas coisas estão sendo criadas como o que será chamado de componente posteriormente neste curso. Portanto, isso pode ser um pouco complicado para nós nesse nível. Ok, então vamos fazer isso de qualquer maneira. Vamos pegar uma cópia. Eu realmente preciso disso. Eu gosto da minha estrutura de arame. Vou voltar a este documento e vou colá-lo. E o que vai acabar acontecendo é que esse arquivo Wed aparece com o ícone Wed. Ele acaba em nossa pasta Assets. Está bem? Usado neste arquivo. Aí está, lá. É uma coisa especial que aprenderemos mais tarde. No momento, porém, o que vamos fazer é selecioná-la, clicar com o botão direito nela e dizer instância separada, como se eu não soubesse por que estou fazendo isso. Não se preocupe, aprenderemos sobre isso mais tarde Mas isso significa que você pode simplesmente dizer que é como desagrupar Está bem? Vamos ver como separar a instância, você pode ver que ela meio que volta para aquele quadro E você pode decidir, na verdade, como fizemos antes, que você pode manter a moldura. Isso funciona bem. Ou você pode fazer como fizemos antes e tirá-lo da moldura, arrastá-lo para fora, está só saindo sozinho ou ele está lá? Vamos renomeá-lo, vamos chamá-lo de arquivo. No meu caso, onde está ligado? Acabou em uma página estranha, digamos que eu a queira na página de checkout. No momento, não está na página de finalização da compra. Lá vamos nós. E essa é a comunidade. Eu o apresentei mais cedo. OK. Entrar na comunidade porque há muitas coisas boas lá dentro. Você pode encontrar boas estruturas de arame bons layouts, travas, cartões e ícones E vamos nos acostumar a copiá-los e colá-los, colar em nosso documento e ver o que acontece Eles aparecem como componentes, às vezes como molduras, às vezes são apenas grupos e são muito fáceis. Mas, no momento, vou apenas arrumar tudo. Eu não preciso desses caras, uma espécie de exemplo do que ir buscar e encontrar. E nos vemos no próximo vídeo. Agora sabemos o que precisamos quando estamos recebendo esses ícones gratuitos. Vamos colocar alguns ícones na página prontos para nossa estrutura de arame. 18. Correspondendo o traçado dos nossos ícones: Olá, todos. Neste vídeo, vamos trazer alguns ícones que tenho em nossos arquivos de exercícios. Vamos tentar combiná-los para que suas larguras de traçados correspondam a este primeiro e mostrarei como replicá-los em todos os nossos ascendentes. Sim, vamos cavar. Vamos trazer alguns ícones e arrumar todos eles para que possamos usá-los. Vamos usar o longo caminho ainda por enquanto, usando a pequena seta lá, Coloque a imagem. Quero 1, 2 e 3. Então, em Icon Share, User e Home, estou pressionando a tecla “Command” em um Mac e apenas clicando nelas individualmente. Em um PC, é “Control” e abra-os. Agora, qual é a chave que eu mantenho pressionado para garantir que eles não vão todo rabuginho? “Shift” é isso. Vou levar o meu para um tamanho. Não se preocupe com o tamanho do momento e arraste-os para dentro. Agora, o que vai acabar acontecendo é V o tamanho aqui dependerá do último tamanho do traçado com o qual você está trabalhando. Às vezes, você pode arrastar e eles podem ser grossos assim ou podem ser super finos. Uma coisa que precisamos fazer, porém, é fazer com que todos sejam muito semelhantes. Eu tenho um tamanho semelhante e o que eu quero fazer é escalá-los para baixo, é escalá-los para baixo, e você tem que decidir aqui se você vai usar a ferramenta de seleção normal ou nossa ferramenta de escala extravagante. Vai depender do que você quer fazer. Meu caso, você vê que os traços estão ficando em seus dois pontos. Se eu levá-los até lá, eles meio que fecham. Ou você pode usar a ferramenta de escala. Basta escalá-los para baixo, todos eles caem e podemos ajustá-los depois. Eu quero que eles baixem cerca de um tamanho e coloque-os nessa posição. Importe-os, coloque-os para essa posição e vamos tentar combiná-los agora. Agora, você tem que decidir se eu estou trabalhando tudo isso, estes são quadros como grupos com coisas neles. Se você está feliz em trabalhar assim agora, vamos deixá-los lá. Você pode retirá-los e excluir os quadros. O que vou fazer é deixá-los, então meu ícone Compartilhar aqui com ele selecionado, você pode ver aqui, eu preciso entrar nele porque eu quero clicar nessa coisa, veio com um grupo dentro dela, mas com ele selecionado, na verdade, posso entrar aqui e posso ver a cor do traçado. No meu caso, não preciso alterá-lo porque está mencionando o que mais tenho, mas a largura do traçado é de cerca de dois. Isso é o que usei aqui e quero tentar combinar tudo isso. mesmo com este e às vezes ainda não consigo ver o traçado, então eu preciso entrar no quadro e clicar em ambos segurando “Shift” para selecionar ambos e ele é reduzido para 0,5, você pode ver lá, então eu só vou digite dois. Este aqui, isso não é uma coisa terrível, mas a maneira como isso foi desenhado é que não é um pequeno golpe agradável, na verdade é um preenchimento. Se eu clicar duas vezes nele no modo de edição de código, não será como linhas que estão umas sobre as outras. Para uma pessoa ilustradora do caminho de volta, você saberá do que estou falando, e se você não é novo neste mundo Vector, você encontrará alguns deles que são feitos dos traços, e este é realmente feito até um preenchimento. Isso torna um pouco mais difícil de ajustar. Para este torná-lo mais fino, eu literalmente tenho que ir e fazer coisas assim, o que não é nada divertido. Você pode baixar um diferente ou simplesmente desenhar um. Vamos desenhar. Você poderia facilmente redesenhar isso com a ferramenta de linha. Vou desfazer. Clique duas vezes para sair e escalar, eles provavelmente precisam descer um pouco. É aqui que eu não quero usar minha balança. Se eu usar a escala agora e dimensioná-la para o tamanho certo, ela pode parecer com esta aqui, mas se eu entrar nela, clique duas vezes, você pode ver que não é mais 2, é 1,8, eles podem te pegar. Provavelmente ninguém vai notar, mas eu percebo, você notará. Vamos usar a ferramenta de seleção para fazer o dimensionamento e isso significa que segurar “Shift” significa que ela manterá sendo um traçado de dois pontos. Sabe o que quero dizer? Oh, reserve isso. Vou deixá-lo. [inaudível] O que vamos fazer agora é colocar esses três, fazê-los parecer iguais. Sinto que este talvez não esteja parecendo exatamente o mesmo. Não gaste muito tempo nisso, isso é apenas um wire-frame. O que eu quero fazer é mostrar outro, não truque, mas uma coisa útil na Figma é que vou apagar esses. Porque o que eu quero fazer é ter isso em todos eles. O que vou fazer é copiá-lo. A partir deste primeiro, clique no nome dos detalhes do produto e clique em “Colar” para que eu esteja usando “Ctrl+C” e “V”. Em um Mac, você usará, oh, isso é um PC. O PC usa “Ctrl+C” e “V”, e um Mac usa “Command+C” e “V”, então você apenas, “Command+V” em todos estes e obtê-lo de volta exatamente onde tirou desse primeiro quadro, o que é legal. Faça isso, eu não vou gastar muito tempo dando todo o espaçamento perfeito nisso porque vamos ter que ir e testar isso em um telefone, é como, eles são grandes demais em um telefone? Provavelmente. Eles estão longe o suficiente? Provavelmente não. Meus dedos gordos grandes e velhos vão acabar tocando mais de um ícone, então, faremos isso quando realmente testarmos em nosso telefone. Mas encontramos nossos ícones, nós os temos lá dentro, nós os temos a mesma aparência. Isso vai ser bom por enquanto. Vamos entrar no próximo vídeo. 19. Como usar plugins no Figma para ícones: Olá a todos. Neste vídeo, veremos algumas das fontes secretas que tornam a Figma incrível E são os plug-ins que são executados em paralelo com o Figma Os plug-ins são feitos por outras pessoas, não pela Figma. Ok, basicamente você os instala. Ok. E, neste caso, instalei um pequeno plug-in de ícones. E digamos que procuramos uma casa. Eu posso pegar meu ícone e simplesmente arrastá-lo para fora. É uma forma de, ele é um pouco pequeno lá, mas você entendeu Essa é uma forma de estender o Figma. Existem muitos plug-ins e eles são incríveis. Vamos nos concentrar no ícone um no momento, mas todos eles funcionam mais ou menos da mesma forma que ampliam o que o figma pode fazer Vamos dar uma olhada em pelo menos um deles para instalar nosso primeiro plug-in. Se você estiver nesta pequena lista suspensa ao lado do ícone Figma, você pode acessar Plug-Ins Olá a todos, nossa pequena atualização de interface do Figma. Novamente, plug-ins, vou fazer com que você clique em Navegar, Plug-ins e Comunidade. Você não faz mais isso desse jeito. A maneira de fazer isso é acessar este novo botão aqui chamado Resources Beyond Plug-Ins E então você pode acessar essa opção aqui chamada guia Comunidade. É assim que você entra nisso. Ou acesse a página inicial e acesse Explore a comunidade. Aqui embaixo, você pode alternar para todos os recursos. Não, obrigado Apenas me mostre os plug-ins. E você verá, se eu rolar para baixo novamente, todos esses detalhes sobre os plug-ins. Mas provavelmente o que você fará de agora em diante, eu gosto de usar dessa forma. Ainda faço assim, porque me dá muitas informações sobre quantas vezes ele foi baixado, o que é popular, se você já sabe o nome do plug-in. Ok, se Dan lhe der um ou você encontrar um em nosso site, você pode digitá-lo. Basta acessar os recursos, acessar os plug-ins e digitar aqui. Vamos aprender muito sobre isso , ok? Em vez de acessar a guia da comunidade, você pode ver que ela está lá se souber o nome dela. Tudo bem, isso é o que eu gostaria que você fizesse. Os plug-ins são uma parte incrível do Figma que basta fazer uma pausa, tirar 5 minutos e respirar todos os incríveis plug-ins Ok, há muita coisa aqui que pode levar você até aqui e meio permitir que você seja rápido e eficiente e, visualmente, muito atraente Ok, então dê uma olhada em todos os diferentes plug-ins, veremos os ícones no momento. O que você precisa fazer é, bem, a maneira como eu costumava avaliar se esse plug-in é bom está vinculada principalmente às instalações Ainda não há uma classificação por estrelas semelhante, o que eu gostaria que existisse. Mas, como o unsplash, que é uma forma de obter imagens comerciais gratuitas, é um plug-in muito legal, muito comum, provavelmente o primeiro que todo mundo instala, faremos isso mais tarde no Mas você pode ver que 630.000 outros designers de UX decidiram que era útil Então, deve haver algo grande aqui. Vamos usar o Iconify. Está bem? Se este não está aqui ou foi atualizado nos últimos três anos? Ok, você encontrará outra versão que funcionará de forma semelhante. Este vídeo não é realmente como usar o Conify, mas sim como instalá-lo, conectá-lo e fazê-lo funcionar Então, vamos clicar em instalar. Sim, lembre-se de que eles não são feitos pela Fugma. Nenhuma responsabilidade assumida. Ok, vamos dar uma olhada agora em como realmente operar um plugue. Faremos algumas durante este curso. Vamos dar uma olhada. Você tem que ligar o plugue. Você só pode ter um em execução por vez. Você vai dizer que quero que um plug-in chamado Iconify comece a Agora é aqui que todos eles variam. A maioria deles tem algum tipo de Y. Todos parecem diferentes. Nenhum deles tem a mesma aparência. Esse aqui, é grande. Eu coloquei o meu na outra tela, mas vou movê-lo para cá. Vamos dar uma olhada. Então, vamos dar uma olhada naquele shopping que estamos procurando. Vamos para outra casa. Talvez aquela casa estivesse quebrada, era difícil trocá-la aqui. Vamos dar uma olhada nas casas. Isso vai ser um derrame? Nenhum deles será um derrame. Aposto que talvez esse cara, talvez esse cara seja. Provavelmente não. Eu vou usar esse. Figuras cruzadas. Então você pode simplesmente clicar e arrastá-los para fora. Olha isso, eu tenho um ícone SVG gigante e realmente é isso Esse é o plugue, você pode simplesmente arrastar as coisas para fora. Obviamente, há outras opções aqui. Ok, você pode pesquisar ícones e há muitas marcações e outras coisas acontecendo Portanto, todos os plug-ins funcionam de maneira semelhante. Há algum tipo de interface de usuário e você poderá clicar e arrastar coisas para fora. Faremos mais algumas ao longo do curso, mas sim, esse é o plug-in específico para ícones. Eu não preciso desse cara agora, então vamos deletá-los. Agora, quando você está excluindo partes, provavelmente é porque você sempre ficará com uma moldura Então, tente como você pode, você pode simplesmente excluí-lo. Com esse quadro, é melhor entrar em suas camadas reais e dizer: pronto, vou excluir e tudo o que está dentro dela. E depois, certifique-se de que suas camadas estejam bem arrumadas para pendurar É isso que você está fazendo aí embaixo? De qualquer forma, não tenho ideia de como consegui esse, mantenha-o limpo. Selecione esse cara também. Tudo bem Ou seja, sim, um plug-in muito simples Os plug-ins são incríveis no Figma Vamos aprender mais algumas coisas ao longo do curso. Vamos ver o próximo vídeo. 20. Projeto do curso 03 - Ícones: Olá a todos, é hora do projeto de aula, sem lição de casa. Nós vamos fazer algo em torno de ícones, então, se você ainda não o fez, eu quero que você vá e certifique-se de adicionar os três ícones ao longo do topo que fizemos na classe e, em seguida, por conta própria, quero que você adicione esta seção na parte inferior aqui na página de confirmação, assim como um prompt para pedir às pessoas que compartilhem sua compra, então, quando clicarem nisso, ela preenche a página do Facebook ou o tweet do Twitter sobre “Ei, comprei estes ótimos fones de ouvido, verifique-os Verifique aqui neste link.” Quando você estiver fazendo isso, você vai começar a se envolver com nossa persona. No meu caso, Sarah aqui, ela está na casa dos 20 e poucos anos, então sinto que posso ser um pouco não tão explícito com minha língua porque se alguém talvez seja um pouco menos tecnologicamente experiente, nascido em uma década diferente, eles podem precisar de um pouco mais explisivo. Clique neste botão para fazer upload para suas mídias sociais e compartilhar com seus amigos o que você comprou. O meu tem que ser um pouco mais deliberado. Minha persona, ela tem 20 anos, então ela recebe a mordaça ou a piada, Gore, a inferência sem ser muito explícita. Além disso, esses são os ícones de mídia social que eu sinto. Não vou colocá-los todos lá. Você não odeia sites que só têm tipo, aqui estão as 40 plataformas diferentes de mídia social que você pode compartilhar nele, e eu excluí um monte porque eu me sinto como a faixa etária dela, o que mais? Ela está trabalhando para si mesma, então provavelmente tem um perfil no LinkedIn, e não vai ser corporativo, então ela provavelmente vai ficar bem compartilhando sua nova compra de fones de ouvido, e todos estão usando o do Facebook também. Use esses tipos de “O que devo ter aqui Volte para a persona, decida o que vai estar lá dentro. Pode estar errado, como: “Eu poderia ter entendido isso totalmente errado e meu cliente vai voltar e voltar, por que não há Reddit ou alguma outra coisa que é nova e TikoToky, mas isso é algo que eu sinto que vale a pena testar podemos adicionar mais a eles mais tarde, e espero que, em nossos testes de usuários, haja algum feedback como: “Ei, onde está aquela coisa que eu nem sei? Por que isso não está lá?” É isso. As principais navs, eu não quero que você os desenhe, eu quero que você encontre os existentes de um site gratuito apenas para praticar o material SVG e, ou plug-in, e armazene seu plug-in, faça-o funcionar, salvando as coisas para fora. É um pouco de carrapatos lá que se passa lá. Escolha os ícones apropriados. Falamos sobre isso, adicionamos à página Confirmação, tiramos uma captura de tela e enviamos para os comentários dos projetos de exercícios, e isso é um exemplo. Na verdade, antes de ir, se você estiver usando plugins que eu acho que você deve instalá-lo , vá com ele, não precisa ser ícone, eu uso outra coisa. Às vezes, quando você está arrastando coisas dos plugins, digamos, isso depende do tamanho deles. Digamos que eu arraste este Facebook. Às vezes você gosta, “Gigante F”, e isso torna tudo realmente difícil e [inaudível] quando você é novo, então eu vou desfazer isso. Muitas vezes, ele pode ser desfeito. É mais fácil encontrar um pote vazio ou sua prancheta e arrastá-lo para fora de lá, porque eles são próprios em seu próprio quadro pequeno. Eu posso arrastar também um monte desses. O que mais temos? Eu posso reduzi-los e obtê-los apropriados e depois trazê-los em vez de tentar empurrá-los para lá, e eles acabaram dentro de grupos ou quadros que não deveriam ser. Esse é meu conselho. Quando terminar o plug-in, feche-o. Vocês se foram. Vejo você no próximo vídeo. 21. Como usar páginas no Figma: Oi. Neste vídeo, vamos ver as páginas. Isso parece chato. Não é. Por aqui, no momento, vamos acabar criando uma página. Atualmente tem uma Página 1. Vamos renomeá-lo para celular. Vamos criar uma segunda página que terá nossos quadros de desktop nela. Em seguida, vamos criar outra página que tenha um breve e nossa persona e também nosso fluxo de tarefas, tudo em uma bela figura e documento. Mas essas páginas serão agradáveis e separadas. Vamos entrar e aprender a fazê-los. Para começar, você já tem uma Página 1 e ela está à espreita lá. Provavelmente está fechado. Você está no painel de camadas, você tem a Página 1. Aí está ele. Você pode chegar muito longe na Figma e nunca ter mais do que a Página 1. página 1 é tudo o que fizemos até agora. Temos essas pequenas divisas aqui para fechá-las só para fazer tudo parecer mais arrumado. Temos nossa página de confirmação, checkout, detalhes do produto. Você pode reorganizar isso porque não faz sentido, não é? Conformação até o fim. Temos nossos quadros, que você poderia argumentar, páginas. Eles são legais, como pranchas de arte, mas nós os chamamos de quadros porque é isso que Figma os chama. As páginas são uma forma de separar este quadro de arte aqui. Página 1, você pode ter mais de uma página, a, Página 2, e basicamente você começa a bater e você vai, eu vou parar de fazer algo diferente. Por que você teria duas páginas? No nosso caso, o que podemos fazer na Página 1 pode ser, vou clicar duas vezes nele e chamá-lo de celular. Este outro vai ser desktop. Eu quero que você faça isso porque vamos projetar uma versão móvel e uma versão para desktop neste curso, deve haver uma visão de tablet também. Não vamos projetá-lo porque não somos apenas pequenos, mas intermediários. Temos nosso celular e desktop. Deixe-me mostrar alguns outros exemplos disso. Você vai para a área de trabalho. Vamos, antes de irmos pegar nossa ferramenta de quadro. No Quadro 2, novamente, não estou tentando obter muitos atalhos, mas a tecla F, é bastante comum, aqui vou dizer que quero desktop. Dependendo de quando no futuro você assiste isso, este é um tamanho genérico realmente bom, 1440 por 1024. Nós vamos ter 1, 2, 3, 4 desses. Vou arrastar um para fora. Eu faço isso. Vá para sua ferramenta de movimento, pegue o nome, mantenha pressionada a tecla de opção em um Mac, tecla alt em um PC, mantenha pressionada a tecla shift também se você, se não estiver travando no lugar até que esteja. Em seguida, Comando D ou Controle D algumas vezes. Adoro esse comando D, tão satisfatório. Eu tenho três deles. Vá em frente, vou acelerar isso. Vou nomeá-los todos exatamente como o meu celular. Não consigo me lembrar. Vou virar para frente e para trás. Por favor, segure. Sim. Isso foi uma cópia e cola dolorosa. Esse é um bom uso das páginas. Não há razão para você não poder simplesmente tê-los por baixo aqui, mas você verá antes de chegar longe demais, eles acabam parecendo assim. Vamos dar uma olhada no meu celular mais tarde neste curso, apenas enchendo em todos os lugares. Não é bonito, mas é verdadeiro. É um arquivo honesto, é o que é. Outros casos de uso em é que vamos fazer nessa visão também, muitas vezes você coloca outra página com coisas como seu fluxo de tarefas e persona. Faremos isso em um segundo. Além disso, vamos dar uma olhada. Vou te mostrar agora porque você abriu algumas das coisas da comunidade. Lembre-se de que olhamos para esses e ícones, unicons, sejam eles quais forem. Por aqui, talvez eu tenha passado por ele. Talvez eu não os tenha carregado, mas você deve ter notado que eu poderia ter ido duas camadas e eu poderia ter colocado isso para baixo porque sou como todas essas páginas, essa capa e esses unicons. Foi assim que eu o encontrei. Essas são páginas diferentes dentro desta. Este aqui está apenas atuando como uma capa ou uma miniatura. Há onde estão todas as coisas boas. Ele fica ainda mais hardcore. Vejamos algo um pouco mais grande. Estou em casa, estou aqui na comunidade e vou explorar. Vou encontrar alguém. Vamos tentar este. O Microsoft Teams é responsável por ser massivo. Acabei, vai ser grande se você tiver uma conexão lenta com a Internet e for um kit grande ou arquivo Figma grande. Pode levar muito tempo para fazer o download. Tenho banda larga rural. Vai, está em um dispositivo móvel. Tudo bem. O que você encontrará é que você pode ver neste aqui é que você pode chegar aqui e ir embora. Isso não é tão útil. Onde está todo o resto? Está aqui. Todas as páginas são. Você notará que há uma página de rosto, ótimo. Informações gerais. Eles criaram uma página sem nada nela apenas para facilitar aqui, você pode ver que esta não faz nada. Este aqui é onde começamos, é um pouco de documentação sobre ele. Recursos. O que mais acha que o download? Você pode ver que é bastante complexo. O registro de alterações, vamos dar uma olhada em um tom disso, há mais aqui. Veja quantas páginas esta tem, carrega. Vamos escolher um pouco deles, os layouts, o ícone de avatares. No final deste curso, não vamos criar um sistema de design completo. Chama-se UIKit. UIKits subestimando o que essa coisa faz, este é um sistema para pensar sobre tudo sobre as equipes da Microsoft. Alguém fez isso, alguém na Microsoft. Eu me separei, então isso significa um designer. Sou designer júnior. Eu venho aqui e atrás, tenho que fazer essa janela pop-up que comunica que perdi todos os seus arquivos e sinto muito. Você pode passar por aqui, tudo bem. Leia as diretrizes, entenda fontes, como a comunicação com fontes diferentes em diferentes plataformas, espaçando quais cores elas podem usar? O que as cores se comunicam? Este é um sistema de design completo. Mais tarde, no curso, faremos um pequeno sistema de designs normalmente codificar como um guia de estilo. Mas este é um caso de uso muito grande. Mas eu acho que eu queria fazer páginas porque você vai ter que cair por isso. Vou fazer meu aplicativo novamente. Cada página que vê neste caso tem um monte de quadros nele. Dentro desses quadros, há um monte de outros quadros e pranchas de arte e coisas boas. isso que servem as páginas. Outros casos de uso podem ser que você tenha como dizer que tem celular. Eles podem ser a opção 1, eu tenho um fluxo de tarefas específico e você faz outro celular. opção 2, com um fluxo de tarefas diferente ou cores diferentes ou um conceito de aparência diferente 1 conceito 2. Você entende a ideia. Você pode usar páginas para separá-las. Estamos bem nisso? O que eu quero que você faça é ter uma terceira página e esta será nosso fluxo breve e de tarefas. É ótimo ter todas as coisas juntas. Vai ser o topo. Aqui eu quero que você traga a captura de tela ou o JP vá. Como você conseguiu sua persona no início do curso? Eu tenho o meu aqui. Vou copiar e colar isso. Você também será um pouco diferente. Estou construindo essa funcionalidade para você, mas no início do curso, eu teria mostrado a você como criar sua própria persona. Quero que você pegue, a captura de tela ou o JPA que você baixou e coloque-o em seu resumo no fluxo de tarefas. Coloque-o aqui e o seu provavelmente é apenas uma grande modelagem. O que redimensionar o meu e eu vou trazer esse fluxo de tarefas. Se você se lembrar de antes, se você abriu o fluxo de tarefas, ele deve estar sob seu pequeno botão inicial, sob seu nome. Onde está esse fluxo de tarefas? Ele está lá. Fluxo de tarefas. Se você não abriu, lembre-se, volte para lá. Vá para o seu nome, vá para rascunhos, vá para Importar e o fluxo de tarefas está em seus arquivos de exercícios. Aí está, abra esse aplicativo e eu só quero que você copie e cole aqui. É útil ter todos os seus documentos, copiá-lo, fechá-lo. Volte para a nossa inicial a que estamos trabalhando juntos e eu coloquei isso lá. Minha tarefa flui e meu resumo tudo em um só lugar para que eu possa me referir facilmente a ela e aprendemos o que as páginas fazem. Simples. Faça essas coisas e te verei no próximo vídeo. 22. 22: Olá a todos. Neste vídeo, vamos criar um protótipo Vamos colocá-lo em um telefone e, quando clicamos em algo, ele passa para o próximo quadro. Eu também vou me perder um pouco nesse vídeo. Algo dá errado, vamos consertá-lo juntos para que todos nós aprendamos: Vamos começar. Ok, é um momento emocionante. Como criamos protótipos Primeiro, ele fará algumas coisas básicas, o que precisamos fazer, antes de tudo, é ir do design, no qual estamos há muito tempo, até o protótipo Ok, e o que vamos fazer é selecionar a página inicial , ok, vamos começar com esta E o que você notará é que esse pequeno ponto é importante. Vamos clicar, segurar e arrastar, arrastar, arrastar nosso livro e colocá-lo lá. Dê uma jogada. Você pode simplesmente clicar nele e soltar. Agora, é isso. Para começar, ele vai fazer algumas coisas básicas. Nós faremos as outras páginas. É o mesmo com este. Clique no nome na parte superior e diga que você tem o nome na parte superior desta. E eles dizem, tudo bem, vamos prototipá-lo. Olá a todos. É Future Dan, vou pausar o vídeo aqui bem rápido e compartilhar uma atualização do Figma Estou prestes a clicar nesse botão aqui, aquela pequena seta. E essa é a opção atual. Essa foi a única opção quando fiz este curso. A atualização mais recente foi adicionada, uma opção extra Preview. Então, o presente é o que vamos usar no resto deste vídeo. Isso abre nosso design em uma nova guia. A diferença entre o presente, que usamos neste curso, e a visualização prévia é que a pré-visualização se abre sozinha em uma pequena janela. Ainda acontece com nossas interações. Não há diferença real, exceto que uma é uma pequena janela que você pode manter aberta o tempo todo E a outra é uma aba separada. Você tem uma pequena atualização do Figma, o que é melhor. Eu ainda uso a opção tab. Esse aqui é bom, mas sempre atrapalha, mas é novo, então talvez eu me acostume. Você pode decidir qual deles você prefere. Não há diferença real entre a prototipagem, exceto uma aberta e outra em uma guia separada Vou encerrar isso e deixar você voltar ao vídeo. Por que ele é dessa cor laranja? Eu não sei. Eu tentei recriar o vídeo, mas ei, está perto o suficiente Você volta ao vídeo fazendo o protótipo. É chamado de presente. Você pode ver isso aqui? O pequeno botão play. Clique nele e ele se abrirá. Você notará outra guia. Aqui está o nosso original. Passamos para essa outra aba. OK. E o que acontece é que ele será apresentado em qualquer página em que você esteja. Então não é isso que eu quero. Eu quero voltar aqui. E se eu for a esta página inicial aqui, basta clicar na palavra Página inicial e depois apresentar Basicamente, ele voltará para a mesma guia, mas pelo menos estamos na página inicial agora Olha isso. É uma ótima página inicial Então, o que vamos fazer é clicar em qualquer lugar, clicar uma vez e passar para a página de checkout novamente O que é isso? As páginas de confirmação tiveram um dia ruim. O que está lá que está fazendo isso não deveria fazer isso. Vamos fechá-lo para que, novamente, o que está lá? Nada. Algumas coisas que fizemos aconteceram. Eu vou explicar a causa, caso isso aconteça com você, página inicial presente O seu provavelmente também terá essa pequena tela de carregamento . Deixe-me ir. Ew, Ew, Ew, gigante, alguma coisa no caminho. Vou descobrir isso mais tarde. Mas está meio que funcionando o tempo todo. Caixa preta, como um UA lá e eu vou descobrir para que todos saibam o porquê. Tudo bem, estou de volta. Não tenho ideia como resposta. Você já o viu no modo rápido? Basicamente, o que eu normalmente faço em uma situação como essa é começar, começar a examinar e excluir coisas. Eu imaginei com um SVG fazendo algumas coisas estranhas, então eu apaguei e testei e ainda está quebrado Vamos verificar novamente. Ainda está funcionando. Não, está consertado. Estranho. Eu não sei então. Então, tudo que eu fiz foi deletar e depois desfazer e ele voltou à vida. Então, caso algo mais aconteça e não seja tão fácil de resolver, demorei muito e demorei cerca 05:10 minutos para descobrir o que estava acontecendo O que eu normalmente faço é, na verdade excluir coisas e depois testar, excluir coisas, depois testar, excluir coisas e testar. E ver, eventualmente, algo que eu deletei meio que mostra que estava causando os problemas. Normalmente, eu faço isso e depois desisti deles, então fiz outra versão . E isso funcionou. Nesse caso. Acabei de excluí-lo e depois fiz isso e ele voltou provavelmente fechando o programa, abrindo o backup, reiniciando a máquina De qualquer forma. Tudo bem, isso foi um pouco tangente, mas essas coisas acontecem Então meio que funcionou. Vamos apresentar bem, agora esqueça, isso está de volta à zona. Dan Beck na zona. Ok, então vamos pré-visualizá-lo e fizemos alguns protótipos básicos em que você clica em qualquer lugar e ele se move Chega ao fim e está meio preso. Então, o que você pode fazer se mexer é que, depois de um tempo, algumas outras pequenas opções aparecerão Reiniciar, que é R, é muito comum. Volte ao começo. Então você pode meio que trabalhar com seu protótipo novamente Você pode passar por isso manualmente. Você pode ver aqui embaixo a página 1234? Outras coisas que podem ser úteis são, nessas opções, talvez você queira usar 100% ou em tela cheia para se livrar de todo o tipo de Chrome externo O que mais você vai querer fazer? É mais ou menos isso. Uma coisa que você precisa saber é que você não precisa fechar isso todas as vezes. Você sente que, quando termina, fecha isso e depois volta aqui, mas não precisa deixá-la aberta e sempre voltar para ela. Porque o que acontece é que ele se atualiza. Veja isso se eu entrar aqui e decidir mudar a cor desse, oh, bom ponto. Isso acontece bastante quando você é novo e fica tipo, por que tudo acabou? Porque você está no protótipo Lembre-se de voltar ao design, esses três no topo aqui, veremos o Inspect no curso, mas sempre que você perder suas cores ou fontes, é porque está preso ao design do protótipo Eu vou entrar aqui e vou dizer que agora você vai ser de outra cor. Ok, agora vou pular para essa aba que ainda está aberta. E você notará que, se eu voltar às minhas páginas, elas serão atualizadas. Se você estiver usando a versão para navegador, é útil pegar essa guia, retirá-la e colocá-la em outro desktop Na versão para desktop, está meio que preso aqui no momento. Não consigo separá-lo. Então, basta alternar entre os dois. Se você quiser alternar entre os dois. O atalho é que não há atalho. Isso é um pouco chato. Eles podem estar no futuro. Verifique. Você quer pesquisar no Google o que diz que Figma present foi chamado Sim, o atalho atual não existe no momento. O que fazemos é usar o comando em um Mac, Controle em um PC. E o Command one está de volta à sua pequena tela inicial. Ok, clicamos nesse comando para ver qualquer que seja a segunda guia considerada a primeira 123. Então, no meu caso, vou voltar entre o comando dois, o comando 3123 Faça uma alteração em torno três atualizações instantaneamente. Então você pode manter isso aberto. Agora, o que você deve observar é que você não pode criar protótipos em várias páginas. Então, eu tenho minha página inicial Eu vou para o protótipo e acho que quero ver alguma coisa aqui Isso não é possível. Ok, então é só entre quadros em uma página. O que você também notará é que eu tenho esse belo cromo na parte externa de um iPhone 8. Eles podem parecer antigos quando você está assistindo isso, mas você pode mudar isso. E vamos, deixe-me mostrar como. Então, vamos começar o protótipo. Vamos mostrar as configurações do protótipo ou não selecionar nada Você acaba no mesmo lugar, ok, então, com algo selecionado, Prototype, clique neste botão ou simplesmente clique em Terra de Ninguém E você pode dizer, tudo bem, eu não quero um iPhone seis Eu quero, não sei do que é o Google Pixel. Eu tenho um quatro no momento. Por que não podemos ter um quatro. Você tem que olhar para um muito antigo também. E você pode escolher entre as diferentes cores que elas mudaram muito em um iPhone, mas obviamente em nosso iPhone oito, ok, em vez do dourado, você pode escolher o cinza espacial ou o prateado. É basicamente a parte traseira do telefone, então não muda muita coisa. Se você alterar a cor do plano de fundo, poderá ir do retrato para a paisagem. E quando eu entrar na prévia agora, vamos dar uma olhada. Ei, não funciona muito bem com paisagem, mas você entendeu. Se você não consegue ver nada disso, é porque quando você começou, lembre-se de que, no início, tudo bem, faça nosso primeiro quadro e escolhemos um desses padrões Eles estão ligados a isso. Ok, mesmo que você tenha acabado de digitar, você começou com uma versão para desktop e a digitou e a transformou em um tamanho de telefone Não se conecta mais. Portanto, talvez seja necessário criar tamanhos de telefone copiá-los e colá-los se quiser que o Chrome esteja lá. Não ajuda muito na degustação, além de ter uma aparência bacana Você também notará que nossas versões para desktop. Então, vamos dar uma olhada no desktop. Clique neste, mesmo que não haja nada sobre ele. Então, clico na página inicial, na ferramenta de moldura e clico na página inicial Você notará que no protótipo, nas configurações do protótipo, não há nada Então, posso dizer que quero que seja um desktop ou laptop e não está lá. Ok, então há apenas algumas coisas que você pode realmente usar no Chrome no momento. Tudo bem, uma última coisa antes de partirmos é que se você está me seguindo, o que eu quero que você faça é voltar para o celular E eu quero que você quebre todos esses protótipos aqui porque eu não quero simplesmente clicar em qualquer lugar Quero que ele acesse os detalhes do produto somente quando eu clicar no botão Saiba mais. E eu quero ir direto de agora até a página de checkout Quando esse botão é clicado, no momento ele está usando o quadro inteiro Então, para se livrar disso, você pode fazer duas coisas. O que eu costumo fazer é clicar na camada e clicar em Excluir. Ou você pode clicar na sua moldura aqui e dizer, abaixo do protótipo, você pode ver que diz que aplicamos essa indireção chamada Tap Ok, só tenha menos. É a mesma coisa com você querer excluí-lo selecionando-o e excluindo-o, ou selecionando o quadro e, em seguida, apenas anulando todas as interações que você tenha Editar Tudo bem, e daí? Não chegamos a lugar nenhum Nós os adicionamos, mas os excluímos. Vamos pular para o próximo vídeo e abriremos os botões, mas também adicionaremos algumas animações sem transições . Tudo bem, te vejo lá 23. Animação e easing de protótipos no Figma: Ei, todos. Neste vídeo, vamos montar esse protótipo. Os botões vão para lugares, não apenas clicando no quadro. Além disso, veremos as diferentes técnicas de animação entre os quadros. Na verdade, vou te mostrar. Compre agora, há uma coisa legal insistente. Este faz uma coisa slidey. Vou te mostrar isso. Também vou te mostrar, lembra-se daquele problema que tivemos neste último quadro, as grandes caixas pretas gigantes? Eles voltaram e nós consertamos logo no início aqui. Vou deixar isso lá para que todos possamos aprender. Aprenderemos sobre a flexibilização também. É um pouco longo, mas cobrimos muito. Vamos pular. Para mudar as animações, vamos fazer algumas coisas. Vamos nos certificar de que estamos no Prototype aqui no canto superior direito, e vamos excluí-los se você ainda não o fez. Clique nos nomes na parte superior e exclua essas transições. De onde ele veio? Você se lembra em um vídeo anterior, eu disse: “Quais eram aquelas grandes caixas pretas?” Eu desliguei Figma, abri de volta, e descobri totalmente quais eram esses grandes quadrados. Há algo aqui. Isso é o que eles eram. Cartas gigantes grandes, Facebook. Lá vamos nós. Nosso problema resolvido. Acho que estava rebaixando com vocês, mostrando como arrastá-lo, e todos acabaram lá, mas eles desapareceram, e agora estão de volta. Corrigimos esse problema. Vejamos a animação. Excluímos as conexões entre todas elas. Vamos fazer isso para botões específicos reais, em vez de todo o quadro. O que podemos fazer é que vamos dizer, a compra agora recebe seu próprio pontinho. Cada pequena unidade tem um ponto, então você pode tornar tudo clicável. Neste botão Comprar agora para ir, ele vai pular os detalhes do nosso produto e ir até este. Você pode ver que estou apenas arrastando e você pode conectá-lo? Quero ir para o checkout direto. É para os compradores aguçados irem direto para lá, sem barulho, sem perder. Agora a animação é essa. É instantâneo no momento, apenas se move. Vejamos dissolver e vamos testá-lo. Lembre-se, você não precisa recarregar isso, mas você pode, se você fechou, basta ir até este pequeno botão de reprodução, e vá para um presente e ele o abrirá. Nosso pequeno botão, posso clicar nele? Olhe para isso, dissolva. Muito emocionante. Lembre-se, R é o botão de atualização e você pode praticar através dele. Não cobriremos todos porque alguns deles são bastante autoexplicativos. Vamos instantaneamente é fácil, dissolver, como você acabou de ver. Animate inteligente, partiremos para este vídeo porque é um pouco mais complicado para mais tarde no curso. É incrível, mas vamos fazer isso mais tarde. Você precisa configurá-lo um pouco mais. Vamos brincar com o Move in. Vamos dar uma olhada. R para redefinir, mova-se. Você consegue vê-lo deslizar de lado? Isso é muito legal. Isso fica muito bom quando você está fazendo navegação móvel. Você quer se mudar de lado ou talvez imagens voando. Em vez de testar cada um, o que você pode fazer é sair. Você pode ver isso na parte inferior aqui? Se você passar o mouse sobre ele, ele lhe dá uma dica visual do que ele vai fazer. Empurre, você pode ver em vez de se mover, que é um deslizando na parte superior, empurre um para fora para mover um para dentro. Esta é uma maneira fácil, o slide é muito bom quando chegamos às camadas móveis onde ele apenas o empurra para o lado, não todo o caminho. Vou ficar para me mudar. Você pode ver aqui as instruções? Você pode decidir se queremos da esquerda ou vindo da direita, para baixo, para baixo, de cima e para cima de baixo. São todos bem fáceis. Vejamos que uma das outras coisas interessantes é a flexibilização. atenuação está ativada por padrão. Isso significa apenas que a facilidade significa que vai começar rápido e ir devagar para fora. Vai aliviar essa pequena curva lá. Vou exagerá-lo aqui. Este é outro termo que precisamos aprender, ms, que é milissegundos. Há 1.000 milissegundos em um segundo, então isso é um segundo. Então 300 é, eu não sei, aquela pequena parte dela, terceira. Vou transformá-lo em um segundo só para poder visualizá-lo e dar uma olhada. Vamos aqui, R para atualizar, compre agora. Você pode ver? Bom e lento. Começa rápido e depois fica agradável e lento no final. Isso é facilidade. O que muitas vezes é bom é a facilidade de entrar e sair. Você pode facilitar, então ele vai devagar no início. Você pode ver? Isso realmente mostra melhor neste pequeno ícone aqui. Começa lento, lento, lento, lento, lento, lento e fica mais rápido. Ele sempre fica bem com essa facilidade de entrada e facilidade. Vou acioná-lo até exagerá-lo para 200 milissegundos. Eu posso fazer isso, isso é 1/5 de segundo. Vamos visualizá-lo. Vamos dar uma olhada. R para redefinir, compre agora. Isso é muito rápido. Vamos tentar 400. Redefinir, clique nele. Ainda provavelmente um pouco rápido, mas você tem a ideia. Sua flexibilização é brincar com a animação. Facilidade para entrar e sair, é muito legal. É como um salto, então vamos dar uma olhada. Provavelmente ainda está indo um pouco rápido, dê uma olhada. Muito rápido, mas legal. Vamos fazer com que ele vá para empurrar. É isso. Empurre, vou facilitar a entrada e para fora, e vou transformá-lo para 600. Há muita brincadeira com isso. Depende de quanto tempo é e que tipo de flexibilização você está fazendo, que tipo de direção tem que se mover, até onde ela tem que se mover? R para redefinição. Como se chamava? Facilidade de entrada e saída é essa opção de rejeição. Antes de irmos, vamos prepará-lo um pouco. Você também faz isso em seu exemplo. Não vou fazer isso como um exercício de aula porque não consigo verificá-lo. O que vou fazer é apenas me seguir. Queremos ir do Saiba mais. Você poderia fazer isso a partir do texto. É melhor fazê-lo a partir do botão. Você poderia agrupá-lo e fazer isso de ambos. Só vou fazer isso a partir do botão ao redor do lado de fora. Vou dizer que Saiba mais está indo para nossos Detalhes do Produto, você pode aprender mais sobre isso. Vamos fazer o texto aqui. Quando você costuma clicar em um cabeçalho em um site, ele voltará para a página inicial. Esta é minha página inicial. O que vou fazer é dizer que você vai para este. Isso, vá para este. Agora, qual animação ele está usando? Vai usar a última coisa que você usou. Estou usando muitos empurrões. Se você não gosta de empurrar, vamos ter que mudar todos eles. Escolha primeiro antes de começar a clicar neles. Só se lembrará do último. Estou aderindo para empurrar. A outra coisa a observar sobre animação e apenas as interações em geral e prototipagem, se eu copiar isso e excluir esta, clicar lá, clicar em “Colar”, você pode vê-lo trazido junto com ele? Contanto que você esteja no modo protótipo, você pode copiar e colar em diferentes. Isso significa que você pode montar toda a navegação em um deles e simplesmente copiar e colar. Digamos que seja este aqui. Eu quero que ele vá para a página inicial. Eu faço isso ir para a página inicial. Ainda não tenho um botão de compartilhamento e conta ou mesmo um navegador móvel, mas eu poderia simplesmente copiá-los todos e colá-los e tudo só para economizar algum tempo. Compre agora, você acaba com um espaguete. Ele fica cada vez mais espaguete, dependendo de quão detalhado você deseja que seu protótipo seja. O que eu quero fazer é garantir que esse botão de compra vá para aqui. Meu botão home está indo, meu botão inicial está indo. Você não precisa arrastá-lo. Depois de um tempo, é muito fácil com apenas quatro deles, porque você pode apenas diminuir o zoom e arrastar rapidamente este, colocá-lo aqui. É factível. Depois de um tempo, não é. Você viu que a Microsoft materiais um. Não, Microsoft Teams um. Não há chance de manipular isso com arrastar e soltar. O que você pode fazer é clicar neles. Na verdade, não clique neles. Você o seleciona no modo protótipo, clica em “Interações”, aperta “Plus” e ele dirá Toque. O que acontece? Quando você toca neste, ele vai navegar até a página inicial. Você pode fazer isso dessa maneira e brincar com a sua dissolução. Em vez de arrastá-lo, você pode simplesmente selecioná-lo, adicionar essa interação e fazê-lo dessa maneira. Vou me dissolver de volta. Acho que é isso. Aguente. Deixe-me pensar. Vou pausá-lo. Aguente. É difícil acertar de qualquer maneira, quando você está na visualização da área de trabalho. Em nosso próximo vídeo, testaremos isso em nosso telefone real. Então você saberá instantaneamente. Você dizia: “Estou preso e não posso voltar.” Você pode atualizar seu protótipo. Atualizando-os. Nós não fizemos isso. Se eu quiser atualizar este a partir do Push, você pode clicar nesta linha e ela aparecerá isso. Caso contrário, clique nele e, em seguida, você pode clicar em “Homepage” e ele simplesmente aparece essa coisa novamente. Para excluir um, você pode arrastá-lo de volta para si mesmo para que ele desapareça ou você pode clicar na linha como fizemos antes e excluí-la. Está começando a obter protótipos. Vamos dar uma olhada no nosso protótipo. O que podemos fazer? Vamos voltar para casa. Você notou que se eu clicar em algum lugar onde não funcione, esses pequenos pontos azuis aparecerão? É só para ajudar as pessoas que estão testando, mesmo você mesmo, o que realmente clicar porque estamos fazendo, digamos que um fluxo de tarefas e seja muito simples, há apenas quatro slides nele. Eu só quero testar isso. Eu não quero que as pessoas vão, provavelmente removi esse botão de mais para o meu teste só porque ele vai confundir o teste em si. Mas talvez ele vá para a página de detalhes do produto, mas se você clicar em qualquer lugar, ele deve destacar a página. Compre agora, compre, hey, parabéns. O empurrão e o salto são um pouco estranhos, mas você tem a ideia. Isso é animação. O que você provavelmente está pensando é não tenho certeza se posso usar Figma porque ela não tem a melhor mais incrível transição de animação do mundo. Vamos dar uma olhada. Ele não se dissolve. Onde está minha página peeling e minhas portas de banda? Eles são realmente ilegais na maioria dos países agora porque são tão terríveis. Para o seu prazer de visualização, editor, podemos encerrar com um peeling de página? 24. Como testar no seu celular com o Figma Mirror: Olá. Este é o outro lado do meu escritório. Você normalmente está olhando dessa maneira por esse caminho. É o que parece. É meu lixo e minhas placas de som para tentar fazer parecer bom. É noite, não é mal-humorado, é apenas escuro. Já passaram onze horas da noite, e estamos fazendo cursos para nós. Neste vídeo, vamos olhar para algo chamado Figma Mirror. O que é isso? É uma maneira de testar como em um computador [inaudível], tentando projetar um site de telefone e um site móvel rápido ou um aplicativo. Não adianta gastar todo o seu tempo lá, você precisa estar testando no dispositivo, aquela coisa. Existe um aplicativo que você pode baixar do Android ou da Mac App Store, você pode dizer que não o uso. Mas se chama Figma Mirror. Eles podem estar mudando esse nome. Verifique os comentários se eles o atualizaram, mas se chama Figma Mirror. Você entra com seu nome de usuário e senha Figma. Então, de alguma forma, magicamente, ele só começa a acontecer. Você não precisa estar na mesma rede. É mágico. Basicamente, o que acontece é, posso te mostrar aqui? Vou te mostrar, você pode ampliar isso? Você pode. Basicamente, se eu clicar em coisas diferentes aqui na minha área de trabalho, você não pode ver o que estou fazendo aqui. Clique perfeito na minha página de detalhes, onde está? Página de detalhes? Aí está ele. Clique no meu Check out. É atualização ao vivo e ainda melhor. Na verdade, é ao vivo, indiretante. Isso funcionará? Talvez. Clique no botão Home. O que você pode ver? Botão Home. O botão Home é muito pequeno porque mal consigo clicar nele, você não consegue ver o que estou fazendo. Botão Comprar Agora, você ouve isso. Em seguida, compras. Em que ele se concentra? Está se concentrando na coisa certa? Talvez desapareça. Veja como isso é bom. Eu posso realmente trabalhar nisso, e a grande coisa que vou mostrar é que o botão Comprar agora é muito pequeno. Os textos ficam bem na área de trabalho, mas são pequenos lá dentro. O botão Comprar parece tão grande quando vou para Comprar agora. Como isso está filmando a câmera? Isso provavelmente é terrível, mas esse botão Comprar é bom para mim. Estou achando muito difícil clicar nos botões ao longo do nervo também. Eles não precisam ser maiores, precisam ser menores com uma área maior ao seu redor, então um quadro para torná-los maiores. O logotipo é muito pequeno. texto na página de compra é bom que ela tenha a página. Eu fico preso em um membro ou página. Não tenho nenhuma prototipagem na página de detalhes de produtos mais data. Esqueci de editar. Você provavelmente viu no último vídeo, mas é quando você chega a esse estágio e você gosta de testá-lo sozinho. Você é como, isso é muito pequeno ou é uma cor horrível, verde. Na verdade, isso é provavelmente muito bom. Vamos fazer uma atualização ao vivo porque isso é muito legal. Vou ajustar o zoom para que possamos fazê-lo um pouco melhor. Você espera lá, eu vou mudar a câmera. Provavelmente deveria ter feito isso no início. Assista a isso, ele atualiza ao vivo. Estou movendo coisas em meus desktops. Você está procurando meu laptop lá, meu telefone ali. Você pode simplesmente meio que trabalhar. Quando estou trabalhando, especialmente esse estágio inicial, obtendo tamanhos de fonte, as coisas não estão prontas? Eu só não tenho um suporte, qual é o meu telefone deitado no chão? Mas para que você possa vê-lo. Isso é realmente útil agora. Eu posso passar e dizer realmente o tamanho da fonte aqui. O que eu quero fazer? É um grupo, então vou entrar no meu grupo e vou usar para cima e para baixo até encontrar algo. O que estou vendo é que estou mantendo meu olho fora do meu telefone aqui. Certo. É isso que estou olhando. Eu sou como, esse é um tamanho de arquivo acessível? O que você vai encontrar é praticamente sempre 16 é bom. Você não pode ver porque está desse lado da minha área de trabalho, mas eu cheguei a 16 pontos que Jim realmente é, eu conheço o cérebro um bom. Não posso destruí-lo. Quinze se você tentar ser legal e chique e tentando dar pequeno. Mas se ele não arredondou os 12 e 13 pontos, torna-se uma coisa bastante complicada de fazer. Tudo bem para algumas coisas, mas para um grande clique agora botão comprar, parece um pouco pequeno. Eu quero passar e vamos fazer isso grande, eu os envio juntos. Você tem que fazer o mesmo pelo botão Lumo, é difícil fazê-lo com uma mão, colocando minhas mãos aqui, mas não meus dedos de audição no vídeo. Mas você entende a ideia. Você pode fazer alterações muito rapidamente. Esteja vendo o que parece em um telefone. É praticamente instantâneo. Estou muito espantado com a forma como isso funciona. Se você estiver projetando para tablet, tenha um tablet. Se você está projetando para desktop, é um pouco mais fácil porque você pode simplesmente fazê-lo em seu desktop, mas em um telefone celular ou um aplicativo ou um site rápido para dispositivos móveis como estamos fazendo, como parte do nosso plano, mas é secundário. A maior parte do nosso público virá de anúncios pagos porque falei com o cliente sobre isso. é o tipo de conversas sobre as quais você fala, bem como a geração de leads, enquanto ela virá, vem de anúncios do Facebook. Tudo virá de telefones celulares. Se vem do Youtube, como vídeos, como muitos dos meus cursos fazem. Em seguida, é a área de trabalho primeiro. Tipo de perguntas que você vai entrar como designer de UX, para que projetamos primeiro? É tarde e surpreendentemente ajudou com todas essas câmeras e luzes funcionando. Vamos fazer outro vídeo antes de ficarmos um pouco. Esse é o Figma Mirror e testando seu protótipo em seu telefone. Vejo você daqui a pouco. 25. Projeto do curso 04 - Como testar no seu celular: É hora do projeto de classe. Quero que você baixe o aplicativo Figma Mirror do Google Play ou da App Store. Ambos os chamei errado no último vídeo. Vá lá e procure o Figma Mirror. Se isso não estiver funcionando para você por algum motivo, você pode, na verdade, no seu celular, não na área de trabalho, ir para figma.com/mirror. Funciona principalmente da mesma maneira. Faça login com sua conta Figma e teste seu telefone. O que eu quero que você faça é ter um pouco de uma grande crítica ao seu próprio trabalho. As fontes são grandes o suficiente e legíveis o suficiente? As cores são facilmente contrastantes? Posso realmente ver um pouco do texto que está acima disso. Sei que é um wire-frame. Não há muita coisa acontecendo. Essas fontes para a descrição são grandes o suficiente? Eles nem todos precisam ter 16 anos e maciços, mas há algumas partes que precisam ser maiores. Este aqui, essa parte menor aqui embaixo, tem que ser maior? Eu não sei. Deixe-me testá-lo do meu telefone. Vamos também garantir que seus botões estejam todos conectados. Vá para o protótipo e verifique se eles estão todos conectados quando você estiver testando. Além disso, eles são facilmente clicáveis? Os botões são grandes o suficiente? O último, deixe-me voltar ao modo de design, tive problemas com isso. Eles simplesmente não se sentiram clicáveis. Eles não eram muito legais, apenas muito estranhos de clicar. O que eu não quero fazer é, você pode vê-los lá? Posso ver que este aqui só precisa ser maior. Não é o ícone real, eu gosto desse tamanho. É o enquadrador do lado de fora. Ao contrário de um grupo, lembre-se de um grupo, não podemos lidar com o quadro de forma independente. Mas porque estamos lidando com esses molduras legais com o pequeno símbolo de hash, vamos dar uma olhada, que essa coisa dentro e essa embalagem externa, que é o quadro, podem ter tamanhos diferentes. Vamos ter um pouco avançado aqui, mas ei, vamos fazer isso. Eu não quero pegar a vantagem, porque o que eu quero fazer é que eu quero entrar nesse grupo, grupo de olá, ou qualquer uma dessas coisas, entrar de todas elas. Na verdade, não quero que você escale. Vamos tentar combinar o tamanho do quadro, o que é legal. Mas, na verdade, eu não quero isso. Eu queria que você dissesse, eu poderia ficar no centro, não escalar. Significa que quando eu pego meu quadro, que é este do lado de fora e eu pego, olhe. Ei, eu posso torná-lo maior. Ele permanece no meio, o que é legal, mas posso parar de tornar meus botões muito mais clicáveis sem realmente distorcer a imagem ou tentar aumentar o ícone. mesmo com este aqui, eu posso entrar nele. Há dois vetores, vou clicar com a tecla Shift pressionada em ambos. Não dimensione, por favor. Apenas fique no centro. Incrível. Volte para o enquadrador do lado de fora. Eu vou dizer, na verdade, seja um pouco maior. Bom. Lá, eu não mudei o tamanho. Fiz a área clicável mais fácil de chegar e é a única que eu realmente manipulei, não é? Você entende a ideia. É isso. Vá e teste seu wire-frame e verifique seus projetos de classe. Você pode tirar uma foto do seu telefone? Nem todos podem. Se você tem o telefone de outra pessoa, tire uma foto dele. Eu só quero vê-lo na tela, prova de que você fez isso em um bom pouco, eu não sei, gráfico legal do seu wire-frame na tela. Como você se sente agora? Lembro-me de quando fiz o primeiro meu primeiro wire-frame, ainda recebo esse zumbido de como, o que eu fiz, está em um dispositivo. Está no meu computador, é emocionante, está interagindo, estou clicando nos botões. Sinto-me um profissional. Eu não sei. Isso é o YouTube? De qualquer forma, tire uma foto. Se não funcionar e você não puder, você não tem mais ninguém por perto para tirar uma foto do seu novo aplicativo wire-frame. Basta tirar uma captura de tela do seu telefone e enviá-la para a parte de tarefas deste site. É isso. Vejo você no próximo vídeo. 26. O que é Smart Animation e atrasos no Figma: Olá, todos. Neste vídeo, vamos ver a animação na Figma. Até agora, temos feito mais transições de página com a coisa toda deslizando, mas agora, você está pronto para isso? Espere por isso. Essa é a seta deslizando para dentro, apenas a seta em vez de tudo. Para fazer isso, precisamos aprender algo chamado Smart Animate e precisamos adicionar um atraso em nossas páginas. Vamos entrar e eu vou te mostrar como fazer isso. Para animar na Figma como um elemento, estaríamos apenas animando uma transição entre a coisa toda. Só queremos que essa flecha se mova, como no começo lá. O que eu quero fazer é basicamente você tem dois do mesmo quadro. Vamos ter confirmação desta primeira, vamos duplicá-la. Mantenha pressionada a tecla Option em um Mac, tecla Alt em um PC, para que você tenha dois deles. Neste primeiro, eu quero que ele fique fora da tela; aqui. Uma das dicas é quando você está fazendo animação é, eu estou desfazendo isso, é só ter um pouco de espaço. Vou movê-lo para cá para servir de espaço para minha flecha. Vamos ter essa primeira confirmação em que a flecha será desligada e a segunda em que ela vai estar ligada. Para que a magia aconteça é que precisamos conectar esses dois. Vou clicar neste quadro e quero dizer protótipo e quero dizer vá lá. Quando você for lá, eu quero que você use o Smart Animate. Esse é o que ignoramos anteriormente. Basicamente, isso funciona quando há objetos do mesmo nome em dois quadros separados e os animará. Você pode vê-los neste primeiro e você pode vê-los no segundo. Ele pode ver como, “Ei, eles estão em posições diferentes. Sou inteligente, vou animá-los.” Estou usando a facilidade de entrar e sair porque parecia bom. Vamos dar uma chance a isso. Confirmação, vamos clicar em “Visualizar”, e isso não vai funcionar. Sei que não vai funcionar. Essa será a grande coisa que te pega, especialmente com essas animações deslizantes. Vá, clique uma vez, ele desapareceu. O que está acontecendo é que essa seta não faz parte desse quadro ainda, não faz mais parte desse quadro. Houve um tempo que foi olhar, eu faço parte desse quadro. Eu dou uma olhada aqui no meu painel de camadas. Tenho esta Linha 13 na página de Confirmação, mas veja o que acontece. Coloque no painel de camadas, se eu arrastá-lo para fora, ele ainda faz parte dele. Em algum momento, ele fica [inaudível]. Você pode ver? Não sei de onde veio esse barulho, mas lá vai você. É a Linha 13 e não está neste quadro, ou neste quadro, então não sabe o que fazer. Basicamente, diz, não há flecha. Agora há uma flecha, é por isso que ela simplesmente desaparece. Isso é muito importante para garantir que ele faça parte desse quadro. Você pode tê-lo aqui. Você só precisa se certificar de que ele está dentro do quadro e você o faz arrastando para dentro. Uma pequena dica é que temos duas confirmações e isso é dor. É difícil saber qual deles é qual no painel de camadas, então vou fazer a confirmação A e a confirmação B apenas para ser útil aqui. Meu TOC diz que A precisa estar abaixo de B, A, B, aqui vai você. A confirmação A não tem minha pequena linha lá. Tudo o que vou fazer é arrastá-lo para dentro. Aqui está você. Não importa onde esteja, desde que esteja neste quadro e haja um que corresponda neste quadro, então há a Linha 13 lá, e há uma lá, ela vai funcionar. Vamos fazer um teste. Vou usar minha seta para trás uma vez e só estou usando a seta. Você pode clicar neles aqui se quiser. Estou na página 4, clique uma vez, uma pequena animação. Esse é o básico do Smart Animate. Desde que haja algo em ambos os quadros que tenha os mesmos nomes e faça algo diferente, funcionará. Vamos tentar algumas coisas. Uma das coisas com coisas fora da tela na confirmação A, sabemos que está lá. Podemos vê-lo lá, mas não podemos vê-lo aqui. O que podemos fazer é transformar o, talvez uma das vantagens de um quadro esteja em Design. Com o quadro selecionado, você pode dizer Conteúdo do clipe, então o clipe. Você pode realmente vê-lo e trabalhar nisso. Ainda faz parte da ordem da camada correta. Nada mudou, exceto que você pode vê-lo agora enquanto estiver trabalhando. Mas há momentos em que você quer desligá-lo, então está tudo arrumado. Agora eu posso vê-lo. Fizemos animação de movimento. Na verdade, será inteligente animar qualquer coisa. Digamos que queremos iniciá-lo aqui, então ele ainda à direita e ainda estamos no quadro certo. Ainda é um movimento diferente. Mas aqui vamos baixar a opacidade para 10% só para que eu ainda possa vê-la. Vamos começar agora. Seta para trás, clique uma vez, ela desaparece e faz isso. Há muita coisa que você pode fazer. Só vou manter isso simples no momento. Vamos falar sobre algumas das peculiaridades. Uma das peculiaridades é que se você renomeá-lo, então temos a Linha 13 e a Linha 13, se você quiser, eu vou ter muito cuidado e renomear pelo menos uma das minhas camadas. Como ele tem um nome diferente agora, não vai funcionar. Vamos voltar, seta para trás, clicar uma vez, apenas falsificar. Se você tem que nomear um, tudo bem, apenas certifique-se de nomear o outro, seta. Voltar um, clique em. O que mais eu quero fazer? Não gosto do fade-in. Vou voltar até 100 por cento. A outra coisa que eu quero fazer é que estou fazendo um clique. Basicamente, o que eu quero que aconteça é que eu quero ir para a página Checkout, e quando clico nisso, quero que a seta comece a se mover automaticamente. Porque no momento eu tenho que clicar nele e trazê-lo. Você também notará se eu voltar um, quando eu clicar nisso, devido à transição entre a página Checkout e a página Confirmação, porque ela faz isso para frente e para trás, você realmente vê a seta. Olhe. [inaudível]. Vamos fazer algumas coisas. Quando o Checkout estiver aberto e Protótipo, não quero que ele faça a loucura. O que estávamos fazendo? Vamos fazer com que ele faça No toque, Navegue até uma Confirmação, perfeito. Mas eu não quero fazer a mudança. Vou para o Instant e vou ligar esse recorte novamente. Voltar para Design. Talvez tenhamos recortado antes ou o trocamos para que possamos trabalhar nisso. É ótimo enquanto você está trabalhando, mas se você começar a ver coisas estranhas, talvez seja necessário ativar o conteúdo do clipe novamente. Vamos dar uma chance a isso. Na verdade, quero isso fora da tela. Certifique-se de que ele esteja dentro da confirmação A, pronto, ele vai voltar. Vamos clicar neste instante. Eu quero que ele passe automaticamente. Agora eu tenho que clicar em algum lugar e ir em frente. Vamos introduzir outra transição entre quadros. Basicamente, o que eu quero que aconteça é quando chega aqui e temos um protótipo, momento em que o que acontece é dizemos On tap, Navegue até esta outra Confirmação B. Eu não quero que ele esteja na torneira, eu só quero usar este que diz após um atraso. Eu quero que ele chegue aqui e depois de um atraso de quanto tempo, vou baixá-lo para um milissegundo. Você não pode ter zero por algum motivo, você tem que ter um milissegundo, o que é um milésimo de segundo. Vai ser instantâneo. Ele chegará aqui e depois se moverá automaticamente para isso. Ele ainda usará nossa Animação Inteligente, então essa é a única mudança. Vamos dar uma chance. Vamos voltar à nossa página de compra, dar um clique. Vê? Chegou lá e continuou automaticamente. Se isso for um pouco confuso, vamos mudá-lo para 2.000 milissegundos, e vamos voltar. Nós clicamos nisso, ele chega aqui, aguarda dois segundos e depois se move para o outro. A Animação Inteligente o move para dentro. Você está comigo? Se você não estiver comigo, não se preocupe. Temos mais algumas delas para fazer. É um pouco estranho, especialmente se você é de outra ferramenta de animação onde você tem uma linha do tempo e quadros-chave. Figma faz isso, mas se você está pensando, isso parece um pouco desajeitado, é. Não conte a ninguém. É Figma tentando o melhor para ser tudo para todas as pessoas. As regras garantem que os nomes das coisas que você deseja animar como nossa seta aqui sejam os mesmos em ambos os quadros. Você tem duplicatas do mesmo quadro. Não mova as coisas que você não quer, mova as coisas que você quer animar. Você precisa ter certeza de que o Smart Animate está fazendo a transição entre os dois. Isso é o que faz a magia acontecer. A outra grande coisa é que tudo precisa estar dentro dos quadros. O que quero dizer com isso é lembrar da nossa pequena flecha aqui? Não pode estar pendurado na terra de nenhum homem. Na verdade, ele tem que estar neste quadro e neste quadro, mesmo que esteja na prancheta, ele precisa ser agrupado para chegar lá dentro desse quadro. Essas são as regras da animação em Figma. É isso. Vejo você no próximo vídeo. 27. Projeto do curso 05 - Minha primeira animação: É hora do projeto de classe. Sua primeira animação. Basta pegar essa seta para se mover. Se você é novo na animação e diz : “Cara, isso vai ser difícil.” Basta fazer a flecha que fizemos. Trabalhe no seu, mude a seta um pouco. Seja emocionante, pegue uma seta de linha ou uma seta invertida, faça algo um pouco diferente. Mas faça isso e depois me envie capturas de tela. Basta capturar esses dois quadros ou três quadros se você acabar fazendo mais. Mas sim, se você precisar, basta fazer isso, bom e simples, entraremos em mais animação mais tarde. Se você é um pouco entusiasmado, experiente e corajoso, ok, estou feliz por você ir um pouco mais longe. Aqui diz que você pode tentar algo, mantê-lo simples ainda. Não pegue as coisas para saltar e saltar fora das coisas. Vários quadros-chave como esse são complicados na Figma, mas talvez venha do topo. Talvez usando uma tigela, um quadrado, um carrapato que vem em algo diferente. Depende de você. Se você quiser fazer mais de uma animação, você pode ter vários quadros que todos têm atrasos e levam uns aos outros. Mas, novamente, isso é para as pessoas que, eu não sei nesta fase, eu venho de uma animação segundo plano, então eu seria como lidar com isso. Mas se você é novo, basta fazer essa seta simples, e faremos mais tarde. A outra coisa é que estamos apenas tirando capturas de tela e enviando-as como tarefas. Eu adoraria ver suas animações, mas na Figma, só para você saber, não há nenhuma parte de gravação embutida quando você começa a ouvir. Seja [inaudível] se este botão disser gravar minhas coisas. verifique se pode estar lá agora. Mas não há no momento. Eu adoraria ver quais são suas animações. Se você sabe como gravar sua tela como eu, eu adoraria ver um vídeo enviado para algo como YouTube ou Vimeo que seria ótimo ou um GIF animado, mas pode ficar um pouco complicado se você não tiver feito antes, então a captura de tela está totalmente boa. Esse é o projeto da classe. Faça sua primeira pequena animação, fique animado mesmo que seja apenas uma flecha velha e chata deslizando. No próximo vídeo. 28. Compartilhando e comentando no arquivo do Figma com investidores: Olá a todos. Neste vídeo, compartilharemos nosso design com nosso cliente ou uma de nossas partes interessadas. Vamos compartilhá-lo antes de tudo com Doug. Quem é Doug? Doug é fictício. Estou usando Doug como representante de um nível de pessoa para quem você vai enviá-lo. Doug é uma criatura simples. Ele odeia computadores, login e senhas. Ele é nosso cliente, quero dar-lhe este protótipo, este wireframe nesta fase só para ver se estou no caminho certo. Mantenha-o envolvido em vez de surpreendê-lo no final. É muito fácil compartilhar coisas na Figma. Vou usar o botão de compartilhamento na parte superior. Clique nisso, e vamos começar com uma versão simples, porque o que vou fazer, é apenas enviar um link para Doug por e-mail. Isso é tudo o que vou fazer. Vou copiá-lo, vou fechá-lo, vou abrir um navegador e vou fingir ser Doug. Este é Doug. Eu envio-lhe um link, ele clicou nele em seu endereço de e-mail, e é isso que ele vê. O bom é que Doug não precisa se inscrever, ou obter senhas ou obter uma avaliação gratuita ou todo esse jazz, só funciona, o que é muito legal. Ele pode se movimentar. Ele não pode fazer muito sem entrar, mas ele pode olhar para ele. Ele não pode comentar nesta fase, faremos isso na próxima parte, mas ele pode olhar para ele e dizer, “Sim, isso é legal. Eu gosto disso”, ou “Ei, o que isso está acontecendo? Dê-me alguns comentários neste estágio inicial do meu wireframe, só para ter certeza de que estou no caminho certo.” A outra coisa que ele pode fazer, é que este pequeno botão Play ainda aparece aqui, então ele pode clicar nisso, você pode ter que dizer a ele exatamente onde ele está, e ele pode passar e realmente protóti-lo sem ter que fazer login. Ele pode vê-lo, ele pode clicar em Saiba mais. Ele pode perceber que você não pode ir do Learn More para a compra. Voltar para Homepage. Ele pode ver tudo isso, o que é legal. Uma coisa que pode confundir Doug, que faz com alguns dos meus clientes, é que ele abriu uma guia separada, e você não pode fechar isso e voltar ao que quiser. Você pode clicar em tudo, mas ela tem uma guia separada que se abre quando você pressiona este botão Reproduzir. Vê isso no topo lá? Onde isso fica ainda mais legal, assim pode assustar Doug. Pode te assustar. Ele está trabalhando nisso, o que você vai notar, é que eu vou fazer Doug ir para o lado, então finja que este lado é Doug e este lado é meu velho Figma regular. Vamos colocar uma lacuna no meio. Então este é ele em seu computador em sua casa e este sou eu trabalhando como eu fiz antes. O que você vai notar é que ele pode ver minha flecha. Figma é uma ferramenta de design colaborativo realmente incrível. Provavelmente para Doug, ele não vai apreciar isso. Ele vai ser esperado que eu o esteja seguindo com minha mãozinha. Posso até ver Doug, olha, está a mão dele. Se eu movê-lo para e clicar nisso. De qualquer forma, você pode se ver, esse é o ponto. Digamos que Doug diga: “Oh cara, é bom, mas o que é esse verde?” Eu sou como, “Rápido antes que Doug veja”, eu posso selecionar toda a mesma cor, ir e ele diz: “Eu odeio homem verde. verde é a pior cor do mundo.” Eu sou tipo, “Aha. E quanto a rosa?” Ele diz: “Eu odeio mais rosa”. “E quanto a vermelho ou laranja?” O que está acontecendo, é a colaboração ao vivo. É incrível quando você trabalha com outros designers e outros criativos porque você está apenas fazendo algo e todos nós podemos trabalhar nisso juntos. Mas nesta fase estamos trabalhando com Doug e ele não precisa fazer mais nada. Ele pode olhar, não temos que estar atualizando na frente dele, mas é um bônus extra legal. Agora, vamos trazer Doug de volta. Vamos Doug. Se Doug quiser usar comentários, que provavelmente é um dos recursos realmente legais, ele pode se inscrever gratuitamente com o Google ou se inscrever com seu endereço de e-mail e ele poderá começar a comentar. Isso é uma coisa que eu poderia convencer Doug a fazer. Você pode realmente usar um pequeno alfinete e realmente começar a comentar sobre ele. Vamos fazer algumas outras coisas antes de comentarmos. Vou voltar para Figma, então esqueça o Doug. Tchau Doug. Algumas coisas que você pode fazer como designer, é que você pode entrar aqui, e quando você for compartilhar, você pode dizer, eu quero vincular a um quadro específico. Digamos que a página inicial esteja encerrada, há apenas problemas com a página de detalhes do produto porque não há um botão clicável. Vamos fazer isso terrivelmente. Vamos tornar isso clicável e podemos chegar ao checkout. O que ele está fazendo? Instantâneo, isso serve. O que posso fazer agora é que posso selecionar o quadro primeiro e depois ir compartilhar e então essa opção funcionará. Ele dirá que quando eu enviar este link, ele realmente será vinculado a esse quadro específico, este aqui, ele começará por aí. Se estiver acinzentado, significa que você não tem nada selecionado e eu vou compartilhar, você não pode marcar nada. Isso é uma coisa. Deixe-me mostrar o que o comentário faz. Deixe-me atualizar Doug ali mesmo. Eu atualizei Doug, este é Doug agora. Antes que pudéssemos fazer coisas muito limitadas, agora com seu login gratuito, ele provavelmente recebe um pouco demais detalhes para o velho pobre Doug. Ele disse: “Por que posso ver o código CSS?” Mas a diferença agora, é que ele tem comentando. Doug aqui é como, “Ok. Eu gosto disso.” Não consigo ver meu comentário. Doug vai escrever “Por que não estamos usando imagens reais?” Assinado, Doug. Doug recebe um wireframe, é por isso. Ele posta no seu, do meu lado, eu posso ver Doug agora, lá está ele, e eu posso começar a ver comentários chegando. Posso vê-lo lá e posso ver que está preso e posso ver que está indo para lá e posso responder ao Doug e dizer: “Doug, já te disse um milhão de vezes, isso é apenas um wireframe para testes.” Mande isso para Doug. Eu deveria colocar um rosto Smiley lá dentro. Você pode ver, podemos ter essa colaboração entre meu cliente e eu. Eles podem fixar coisas, tudo o que o cliente precisa é um login gratuito ou eles podem simplesmente fazê-lo via e-mail e não precisam fazer login. Comentar é ótimo. Há algumas coisas. Para mim do meu lado, vamos esquecer o Doug agora. Vamos. Você pode ver aqui em cima, há dois Ds. Eu deveria tê-los chamado de desgastados ou algo assim, mas aqui estão dois Doug agora Há lá, e ele é o cara amarelo. Você pode ter cargas aqui de pessoas diferentes olhando para ele. Muitos clientes diferentes, muitos testadores diferentes. Vou sair do meu, não quero mais estar nos comentários porque posso fazer comentários sozinho. Quero voltar às minhas ferramentas que conheço e amo e, na verdade, posso voltar aos comentários e posso dizer, na verdade, este aqui, posso clicar nele e posso dizer, ver aqui, caso resolvido. É uma daquelas coisas com as quais terminamos agora. Fiz os ajustes com base nisso ou pelo menos respondi ao dele e terminei isso e posso trabalhar como designer através das diferentes notas do meu cliente ou testador ou gerente de produto para comentar é muito bom e fluido, e em tempo real. Vamos encerrar este vídeo. Nós faremos no próximo como compartilhar para edição. Vai apresentar uma parte diferente da experiência Figma, que são as equipes da Figma. Vejo você lá. Tchau Doug, tchau Dan. Sou Dan. 29. Compartilhe edições com outros UX designers no Figma: Neste vídeo, vamos dar mais um passo adiante. Enviamos nosso arquivo para ser compartilhado com nosso cliente e ele foi ótimo. Mas digamos que vamos compartilhar isso com outros colegas que trabalham em uma equipe de design de UX em uma empresa e que haja mais do que um de vocês trabalhando em documentos. Quando você compartilha isso com alguém, eles podem realmente começar a trabalhar no projeto e podemos trabalhar juntos. Para fazer isso, precisamos apresentar algo chamado equipes e projetos de equipe. Chegamos tão longe com apenas os rascunhos e usando nosso compartilhamento. Nós olhamos aqui, nos demos uma indicação. Se eu quiser compartilhar, posso enviá-lo para dizer Doug e eu quero que ele seja um editor, mas diz, hey, primeiro para ser um editor, você precisa movê-lo para um projeto de equipe. Vou clicar em Fechar, aqui diz que está bem, você quer mover este arquivo? Muitas coisas estão indicando que precisa estar em uma equipe. Vamos dar uma olhada nisso do jeito manual. Podemos mover isso e isso acontecerá automaticamente, mas vamos dar uma olhada no longo caminho só para que você possa entender melhor. De volta à minha casinha aqui, temos trabalhado em rascunhos. Você pode ter rascunhos descarregados, rascunhos bazilhões. No entanto, se você quiser compartilhá-lo com outras pessoas e trabalhar nisso, você precisa movê-lo para um de seus projetos. seu será nomeado de forma diferente, dependendo de como você configurou a Figma, mas isso é chamado de equipe. Pense em uma equipe como um projeto como o Scott Headphones. Como designer de UX freelancer, você provavelmente tem cerca de 20 equipes ou 30 equipes para diferentes empresas. Algumas empresas só precisam de uma equipe com muitos projetos dentro dela. Os projetos podem ser coisas como, ei, este é o site para dispositivos móveis, o site da área de trabalho, pode ser algumas coisas de mídia social em que estamos trabalhando, podem ser alguns folhetos que fizemos ou o redesenho dessa página da web, e depois redesenhe novamente. Muitos projetos diferentes. Você compartilha esse tipo de equipe de toda a empresa com as diferentes pessoas. Posso ir até os membros e dizer que quero convidar você, você, você, você e você para essa equipe e dentro deste projeto, teremos celular desktop, venda [inaudível], todo esse tipo de coisa. De qualquer forma, essa é a visão geral básica do que as equipes e os projetos são. Vamos voltar a isso. O seu será diferente. O nome será diferente. Mas você recebeu, dentro de sua equipe, já existe um projeto de equipe. É essa coisa aqui. Você pode vê-lo dessa forma ou dessa forma. É a mesma coisa. Vamos excluí-lo no momento e criar o nosso próprio. Eles lhe deram um projeto de equipe pré-fabricado com coisas nele. Podemos abri-lo, dar uma olhada. Este é o padrão para Figma no momento. Há apenas um monte de estilos, muitas coisas acontecendo aqui, ativos diferentes. É útil. Acho que provavelmente está pulando demais para um novato. Vamos fechá-lo e você pode mantê-lo se quiser. Você não precisa. De volta para casa. Vou me livrar desse projeto, clicar com o botão direito do mouse nele, excluí-lo. Desculpe, projeto de equipe. Eu crio o meu próprio. Além disso, crie meu próprio projeto. Este será o comércio eletrônico. Tem que ser minúscula e por algum motivo, site de comércio eletrônico. Ele foi criado. Agora, tudo o que precisamos fazer é esse rascunho aqui, o que estamos trabalhando é chamado Scott Ecom 1. Posso arrastá-lo para este projeto e isso desbloqueará a edição. Você diz: “Por quê? Qual é a diferença entre rascunhos e essa equipe com o projeto de equipe com um arquivo dentro desse projeto de equipe?” Isso desbloqueia alguns dos recursos para que eu possa realmente colaborar com essa pessoa. Ainda tenho um arquivo aberto, nada mudou, exceto que posso ver que não está mais em rascunhos, está nesse projeto. Agora, eu quero entrar em ação. Posso fazer mais. Posso permitir que as pessoas editem. Posso dizer, Doug, nós realmente não queremos editar, mas digamos que Victoria, Victoria é alguém com quem trabalho, outro designer de UX, eu posso enviar seu endereço de e-mail aqui e ela pode começar a editar essa coisa . Por que eu mostro tudo isso? Porque ele aparece um pouco e é um daqueles pontos de interrupção em que você vai de livre para pago. Porque vamos dar uma olhada. Deixe-me mostrar-lhe. De volta a casa. Lembra-se de rascunhos? Você pode ter quantos arquivos em seus rascunhos quiser, mas se quiser compartilhá-los com outro colaborador, ele precisa ser movido para cá. Tenho uma equipe. Essa equipe só pode ter um projeto de equipe. Dentro desse projeto de equipe, você só pode ter três arquivos. É aí que você passa de ir, ok, eu preciso pagar por isso porque é ótimo ter um projeto, mas preciso de dois deles, site de comércio eletrônico e esse outro aplicativo que estou criando para eles ou essa outra subseção que eu quero desmoronar em vez de apenas bloqueá-los no mesmo projeto. Agora, em termos de arquivos, sim, você vai precisar de mais de três rapidamente. Agora, isso muda. Vá para figma.com/pricing e eles mostrarão o que você tem. Na verdade, vou trazê-lo aqui. É assim que parece no momento. Isso mudará. Ele diz gratuito, você tem permissão de rascunhos ilimitados, mas só é permitido um projeto de equipe e só é permitido três arquivos dentro desse projeto. Há algumas outras coisas também, mas é aqui que você pode chegar ao produto pago. Há maneiras de contornar isso que muitas pessoas fazem. Seremos permitidos no momento equipes ilimitadas. Eu poderia ter um zilhão de equipes diferentes com um projeto e três arquivos nele. Você pode ver como funciona e você pode ver como pode ser um pouco complicado também, mas é incrível o que você ganha de graça com esta Figma. Novamente, essas regras mudarão. Vá e verifique figma.com/pricing para ver o que está disponível e o que não está. Para reiterar, eu tenho isso, posso compartilhá-lo quando estiver em rascunhos. Posso movê-lo de volta para rascunhos. Posso dizer aqui, na verdade, acabei com este projeto agora e vou ser sorrateiro e movê-lo de volta para rascunhos para que eu não tenha que pagar. O problema com isso, porém, é que qualquer um que foi um editor não consegue mais vê-lo. Sai da Figma deles e entra em rascunhos. Eu tenho que compartilhar dessa maneira. Aqui vamos nós. Doug, ele pode ver, ele pode comentar, mas ele não pode ser um co-colaborador nisso. Prós e contras. Há algumas outras coisas que uma versão paga lhe dá que lançarão durante todo o curso, mas essa é uma das grandes. Uma equipe, um projeto de equipe e apenas três arquivos. É isso. Espero que isso tenha ajudado. Isso realmente me confundiu no início desta tela aqui. Confundi como fazer rascunhos, essa coisa, essa coisa, posso criar mais equipes, o que acontece aqui. Espero que isso ajude. Vou deixar o meu de volta em rascunhos no momento. Se você o arrastou para fora, coloque-o de volta em rascunhos. Você pode simplesmente arrastá-lo, clicar em Manter, arrastá-lo de um para o outro. Retomaremos nossa versão gratuita agendada regular do Figma no próximo vídeo. Vejo você lá. 30. Como obtenho inspiração para projetos de UX: Olá a todos. Neste vídeo, vou mostrar onde me inspiro nos meus projetos. Todo mundo vai ter seus próprios lugares, achei que te mostraria aonde vou. Antes de fazermos isso, vamos falar rapidamente sobre a transição que estamos fazendo. Estamos fazendo a transição de wireframe, baixa fidelidade para alta fidelidade, algo mais parecido com isso. É aqui que vamos acabar. É Hi-Fi, alta fidelidade, parece que vai funcionar. É um protótipo mais próximo da coisa acabada. Todas as fontes, todas as cores, todas as imagens e sim, você também fica confuso também. Bem, isso depende. O meu sempre acaba parecendo tão confuso. Eu os arrumo quando os envio para clientes ou colegas, mas ei, acabo derramando os quadros e quebro todas as minhas próprias regras. Olha, nada está em um quadro. Faça o que eu digo, não como eu faço, mas não adianta fingir, pode ficar um pouco confuso. wireframe está sendo concluído, está sendo testado e agora estamos prontos para sair para este Hi-Fi. Agora, como faço para obter inspiração? Há os suspeitos habituais, Dribble, Behance. Vá para esses locais, digite um kit de interface do usuário. Esse é um bom termo e apenas veja o que aparece. Você pode ser muito específico como você viu antes. Digitei fones de ouvido. O que você está fazendo é, você não quer copiar, não é isso que estamos fazendo aqui. Estamos procurando ter ideias como: “Ooh, eu nunca pensei nisso”, ou “Ooh, eu nem sabia que tínhamos que ter esse tipo componente de interface do usuário” e comece a tirar capturas de tela. mesmo acontece com o Behance para procurar kits de interface do usuário e você terá muitas ideias. Também é útil, mesmo que você não vá comprar um kit premium de algo como Envato Elements ou Adobe Stock, é bom fazer uma pesquisa, kits de interface do usuário e apenas dar uma pequena olhada. Faça capturas de tela, inspire-se em cores e fontes, e apenas entre um pouco mais e tire muitas capturas de tela. Não se esqueça de realmente ir para os produtos reais, assim como eu deixei meu quadro de humor e as capturas de tela que tirei para me inspirar neste material do curso, eles estão todos aqui. Alguns desses últimos aqui são apenas empresas reais que estão vendendo fones de ouvido por conta própria. Acabei de tirar capturas de tela do meu telefone e enviá-las aqui e é assim que tive alguma ideia. Às vezes, nesses kits de interface do usuário, eles podem ser um pouco como: “Ei, não há chance de eu usar isso porque A, não é acessível ou B, com todos os termos e condições e todas as coisas feias chatas que você precisa.” Às vezes, eles os simplificam para parecer realmente bonitos, mas talvez não isso praticamente. Saia, confira concorrentes e até empresas paralelas ao que você está fazendo, especialmente se você é novo na área. Os fones de ouvido não são terrivelmente novos para mim, mas se eu tivesse que fazer algo na construção ou no shampoo, algo que não uso há muito tempo desde os meus vinte anos, eu teria que ir explorar a publicidade do shampoo. De qualquer forma, eu me fiz. A outra coisa que você pode fazer quando você está entrando nessa inspiração é que você pode se aprofundar. Está ficando cada vez melhor encontrar uma coisa única bastante específica. Digamos que neste projeto estamos fazendo como se fosse bonito, é divertido porque temos um grande projeto. Temos um site de comércio eletrônico completo para criar. Muitas vezes, aqueles como designer você diz: “Ei, você pode redesenhar minha página de inscrição?” Você diz: “Claro, eu posso.” É empolgante do ponto de vista da experiência do usuário porque você provavelmente já tem taxas de conversão existentes e pode fazer alterações, fazer testes AB, ver, você pode torná-lo melhor? Você piorou isso? Qual idioma funciona? Esses são empolgantes de maneiras diferentes, mas em termos de design, vamos redesenhar a página de inscrição. Você pode ir a lugares como este é um que eu uso. Pode haver melhores lá fora e isso pode ter desaparecido. Está cheio de anúncios, esse é o meu problema com este e as imagens não são de alta resolução, elas são um pouco baixas. De qualquer forma, esta ortografia de Pttrns. O que eles fizeram é que eles têm uma coisa muito legal onde você pode dizer, na verdade, me pediram para fazer o calendário. Você pode clicar em calendários e horas, e há um monte de capturas de tela de interface do usuário de aplicativos que também me dão meu web design. Apenas sites diferentes e como eles se aproximam dos calendários porque você diz: “Todos eles vão se parecer com o tradicional assim”. Ou olhe para esse, eles têm coisas de dias da semana. Vamos dar uma olhada, talvez você tenha que fazer notificações simples como parte de seu projeto de equipe. Você é responsável por isso e é interessante como lidar com notificações e diferentes tipos de instâncias. Gráficos é outro aqui. Se você é responsável por fazer alguma representação de dados, algum infográfico acontecendo, há algumas coisas legais. Outro bom para esse tipo de coisa e entrar nos caminhos é Awwwards com três W's. Você pode, digamos em Awwwards ir para o menu. Quero procurar indicados porque não lhe dá os vencedores, quero olhar para todas as pessoas indicadas para a categoria de e-commerce, perfeitas. Usando as tags do design do rodapé porque foi isso que fui colocado no comando. Você tem que redesenhar o rodapé, então você diz : “Okie dokie, eu vou fazer isso, não há problema.” O que você terá que fazer é, você tem que cavar e dar uma olhada. Você pode abri-lo, ter uma visão, você pode ver, clicar nesse botão lá. Eles também mudam de site, então dê uma olhada em volta, você poderá abri-lo, dar uma olhada e verificar o que eles fizeram. Acho que eles nem atualizaram seu site desde que foram nomeados neste prêmio. Você pode mergulhar nas capturas de tela. Onde como este rodapé incrível. Dê uma olhada. Eles mudaram isso? Isso é legal. Vamos dar uma olhada no rodapé. Sim, é muito bom. Olhe para isso. Eu não sei como eles estão fazendo isso e eu não venderia isso para meu cliente porque meu desenvolvedor pode me matar. Sim. Outros bons lugares que eu olho de tempos em tempos, CSSDesign Awards e onepagelove.com. Eles também podem ser divididos em coisas diferentes, mas sim, é aí que eu recebo minha inspiração, muitas capturas de tela e depois mostrarei o que faço com todas essas capturas de tela em nosso quadro de humor no próximo vídeo. Pouca nota, deixe nos comentários. Se você encontrou outro gooder, melhor como este, onde você pode entrar em um pouco de aplicativos e sites, me avise. Deixe-nos saber nos comentários, compartilhe-o com todos. Se você tem um bom site que o divide a esse nível muito granular de coisas estranhas, como: “Preciso de uma tela de login”. Olhe todos os logins. É isso. Vejo você no próximo vídeo. 31. Como criar um moodboard no Figma: Olá, todos. Neste vídeo, vamos tirar nossas capturas de tela de inspiração, colocá-las em algo que parece meio decente como um quadro de humor e vou mostrar como fazer a versão rápida e suja, dependendo do caso de uso do quadro de humor. Deixe-me mostrar-lhe como fazer isso. Para criar um quadro de humor, você tem dois quadros de humor. Você tem o quadro de humor para si mesmo como designer e , em seguida, o quadro de humor que você enviará para as partes interessadas. Agora, eu odeio a palavra stakeholders tanto quanto você, talvez você não. É uma fala de gestão, mas novo ex-mundo, todos são partes interessadas. Pessoas como o cliente é uma das partes interessadas, pode ser as pessoas que o financiam, pode ser o usuário no final. É um bom termo completo para todos, mas eu odeio. Pensar fora da caixa é outro que eu odeio. Seguindo em frente e talvez dando 110 por cento. Todas essas coisas de gestão, sou alérgico a, odeio elas, mas ei, partes interessadas. Aquele que você está fazendo um quadro de humor para si mesmo pode ser muito difícil e pronto. Tudo o que costumo fazer é diminuir o zoom, encontrar minhas capturas de tela do quadro de humor, e simplesmente simplesmente despejar todas elas e fazer o quadro de humor. Talvez eu os empilhe um pouco mais perto daqui. Eu só uso isso para obter ideias para fontes, cores e layouts. Isso é placas de humor simples número 1. Agora, pode ficar um pouco confuso. Você pode ver que eles não estão em um quadro? Só para tornar a vida um pouco mais fácil, o que eu costumo fazer, e você poderia ver o exemplo antes, eu totalmente não fiz. Mas vou colocá-lo para fora para que seja pelo menos um pouco gerenciável. Dê-me um segundo. Agora você viu que eu apenas os arrasto para a minha área de trabalho da minha janela do Finder. Você pode fazer isso ou usar o arquivo de busca normal, colocar a imagem. O que eu deveria fazer é colocá-los em um quadro para que eu possa arrumar isso. Posso dizer ferramenta de quadro, arraste uma para fora. Porque eu arrastei tudo, todos eles se encaixaram e eu posso chamar isso de meu quadro de humor. Você pode ficar mais extravagante e criar uma página chamada Mood board e copiar tudo para ela. Não quero isso, vou desfazer isso porque quero poder vê-lo enquanto estou trabalhando, mas dependendo do seu fluxo de trabalho. O estranho de um quadro de humor é que, para um cliente, não vai ser um monte de coisas e cores de interface do usuário porque eles vão voltar para mim e dizer: “Por que há um sapato lá? Por que isso está aqui?” Vou ter que ser muito mais deliberado com o meu quadro de humor e saber para quem ele vai. Para mim, posso despejar qualquer lixo velho aqui e ser feliz, para o meu cliente, preciso fazer com que pareça melhor e precisa ser um pouco mais claro sobre minha direção porque essa coisa mais aquela coisa lá não há uma direção clara. Eles não vão dizer: “Sim, essa é uma ótima ideia. Gosto da direção que você está batendo com seu quadro de humor.” Não há direção. Para projetar um extravagante, você poderia fazer exatamente o que estou fazendo aqui. São traços ao redor do lado de fora, imaginam cores, colocam tudo bem, escalam tudo usando nossa ferramenta CAE para escala e coloque-as bem dispostas ou você pode usar um dos modelos. Há vários modelos em nossa comunidade. De volta para casa, certifique-se de estar na comunidade, há uma pequena opção aqui. Vamos à nossa comunidade, você digita o quadro de humor. Há apenas muitos pré-definidos para você. Você pode decidir que você gosta deste, então eu vou clicar nele, vou clicar em duplicar. Lembre-se, duplicar significa que agora faz parte do meu arquivo Figma. Você pode ver um monte de layouts. Agora, se você não pode vê-los aqui, há um exemplo de quadro de humor. Vai acabar parecendo algo assim e você pode dizer o quanto isso é melhor. Não sei dizer para onde estou indo. Um pequeno atalho enquanto estamos aqui é o Shift 1. Shift 1 amplia para mostrar tudo que está no documento e isso pode ser realmente útil. Coloque isso no meio e, em seguida, esmague Command plus ou Control plus em um PC. Você pode ver que eu criei este. Sobre isso, eles criaram algumas estruturas de quadro de humor. Você pode simplesmente copiar isso, colá-lo e começar a adicionar suas imagens. Agora, vamos cobrir imagens muito melhor mais tarde, mas digamos que você goste do layout D, você pode clicar duas vezes nele para entrar nesse componente. Clique neste retângulo e vá para o nosso arquivo. O arquivo Figma F, coloque a imagem e escolha uma delas e lá você vai ou não faz nada disso e basta clicar nele. Você pode ver que ele entrou, clique duas vezes nele, mova-o ao redor. Vamos cobrir recortes e imagens mais tarde, mas só queria dar uma sensação agora. Neste ponto do meu design, quadros de humor estão sendo criados. Você pode simplesmente fazer um por si mesmo, despejá-lo em um quadro, realmente não se importar ou muito mais considerado quadro de humor com o qual vou ao meu cliente e dizer: “Ei, essa é a direção. Antes de começar a projetar e mover, escolher cores e escolher fontes, esse é o estilo que estou indo para. O que você acha?” Eles podem dar feedback como: “Não, quero que pareça com o site da Apple” ou “Não, quero que seja muito mais urbano e moderno”. Eu acho que você não é instantaneamente urbano e moderno se você disser como eu acabei de fazer lá. Eu não pretendo ser urbano e moderno, mas você entende o que quero dizer. Eles vão dar a eles uma noção de onde você está indo antes de começar a fazê-lo. Esse diálogo é realmente importante porque você pode passar idades fazendo uma interface de usuário que eles simplesmente não gostam. É isso para os quadros de humor, vamos passar para o nosso próximo vídeo. 32. Projeto do curso 06 - Moodboard: Olá, todos. É hora do projeto de classe. Você vai criar um moodboard para sua empresa. Não o que estou fazendo, então sem fones de ouvido, seja lá o que você disse. Seu resumo pode ser Bob e pode estar vendendo, não me lembro de todas as listas. Mas pode ser microfones ou pode ser querida ou, estou tentando lembrar o que eu tinha na lista. Mas vá embora, encontre coisas bonitas, componentes de interface do usuário, cores que você gosta, que você pode querer usar em seu design, bem como olhar para a indústria em que seu produto vive e indústrias paralelas para que você obtenha uma ideia de como o que está acontecendo no momento, onde você pode estar posicionado, tirar muitas capturas de tela e, em seguida, você pode fazer uma de duas coisas. Você pode simplesmente despejá-los todos na página como eu fiz, o velho preguiçoso Dan, ou você pode torná-los um pouco mais extravagantes usando um desses exemplos da comunidade Figma que fizemos. Eu mostrei antes, tudo bem disposto. Não me importo, mas fique de olho em outra página chamada moodboard. No momento, o meu está saindo no meu celular de baixa ficção, e está perdido aqui, é difícil encontrá-lo mais tarde. No ano em que preciso tentar encontrar, será difícil descobrir. Basta criar uma nova página aqui, fazer um moodboard, colocá-los todos e, em seguida, tirar uma captura de tela, como este exemplo aqui, e basta enviá-la para as tarefas, projetos, comentários deste site. É isso. Vá fazer um moodboard, e te vejo no próximo vídeo. 33. Como trabalhar com colunas e grades no Figma: Olá, todos. Neste vídeo, vamos criar nossos quadros HiFi. Vamos adicionar nossas colunas, essas coisas vermelhas aqui, tanto para desktop quanto para dispositivos móveis e olhamos para a grade que entra no design do aplicativo. Agora eu entro um pouco nas ervas daninhas aqui para ajudar a explicar por que estamos fazendo. Se seu cérebro derrete, a única coisa que você precisa lembrar é 12 é bom. Basta fazer 12 colunas. Vamos pular. Para começar com este, faremos alguma renomeação de páginas. Vou avançar isso. Não era muito [inaudível] acabei de colocar LoFi móvel ou um wireframe. Vou adicionar mais duas páginas e teremos dispositivos móveis. Vou avançar isso também. Esses são os que trabalhamos anteriormente. Vou começar em um documento separado para o HiFi. Muitas vezes faço isso. Eu não quero trazer nenhuma bagagem de lixo aleatório neste, então vou começar de novo para celular e desktop. Vamos mudar para a área de trabalho por um pouco, sem outro motivo, apenas para misturar esse curso. Estou no meu desktop HiFi; minha versão de alta fidelidade. Vou para minha ferramenta de quadro. Vou escolher o tamanho da área de trabalho. Este é um tamanho de desktop muito comum para projetar. É bonito no meio de muitas coisas. Isso mudará com o tempo. Isso provavelmente também será alterado. Você pode fazer o Google como o tamanho mais comum da área de trabalho na sua região. Se você está trabalhando com um país que não tem grandes adoções tecnológicas ou o oposto, você pode ter telas realmente grandes em sua cidade país ou indústria, você projeta para isso. Vamos falar sobre nossas colunas. Vou diminuir o zoom um pouco. Para fazer as colunas, clique no nome do quadro e vou nomeá-lo conforme vou, home page. Aqui há algo chamado grade de layout. Vou apertar o botão mais pequeno e vamos pegar uma grade e é isso que não queremos. Queremos clicar nessas pequenas configurações de layout de grade e ir da grade para as colunas. Temos a contagem que não queremos; queremos 12. Vamos fazer 12 para começar e explicar por que estamos usando 12. Alguns de vocês saberão, alguns de vocês não saberão. Mas por que estamos usando 12? Porque todos os outros fazem e porque você seria muito estranho se você usar 11 ou 13. Queremos estar, eu acho, seguindo os padrões da indústria. Não há nenhuma regra real que diga que você não pode usar 13, no entanto, seu desenvolvedor pode persegui-lo e ter palavras fortes com você porque 12, há muitas estruturas que eles usarão que usam 12 como padrão. Por que gostamos é que ele é facilmente divisível como designer. Podemos entrar nisso e dizer, tudo bem, este é o meu nav e esta será minha palavra, caixa de herói, ok, com minha grande imagem e minha grande mensagem de marketing nele. Então eu vou ter algumas caixas de recursos e vou ter quatro delas. O mais legal sobre 12 é que tudo é facilmente divisível. Há detalhes suficientes para separar esses quatro. Mas também poderíamos ir, na verdade, quero ter três caixas de recursos, cartões ou coisas, e ainda é facilmente divisível. Nós gostamos de 12. Fazemos algo semelhante para dispositivos móveis. Moldura móvel, vou para telefone, iPhone 8. Vou ir para a grade Layout, acertar a pequena vantagem. Eu não quero uma grade. Eu gostaria de uma coluna de 12 porque Dan disse isso. Vou mudar a margem, não. A calha é o espaço entre as colunas. As coisas vermelhas nas minhas colunas, essas são pequenas demais, então vou fazer seis. Tenho 12 aqui e posso fazer a mesma coisa. Posso dizer, na verdade, quero um equipamento de navegação móvel ao longo do topo, quero minha caixa de heróis. Como designer, sei que aqui tenho todo esse espaço extra na área de trabalho, então empurrei minha caixa de herói das bordas. Mas no celular, não tenho esse luxo, é muito pequeno. Minha caixa de heróis está passando por aqui. Quando eu chegar aos meus recursos, que tem essas três caixas aqui, vou dizer que, na verdade, três partes vão torná-las pequenas demais. O que vou fazer é empilhá-los um sobre o outro ou talvez digamos que aqui na área de trabalho, eu realmente vou ter quatro deles. Aqui vamos nós. Vou ter quatro deles para que, quando estiver trabalhando no celular, eu possa ter retângulo 2. Talvez eu tenha que atravessar. Faça dois desses, selecionando todos e faça minha opção de espera em um Mac, alt em um PC. Você pode ver que eu tenho exatamente o mesmo conteúdo; minhas quatro caixas de recursos, mas bem dispostas no celular. Tenho que testá-lo para ver o tamanho dos ticks e as imagens são. É por isso que 12 é útil. É divisível em todo o celular, você também pode estar projetando para tablet e desktop. Nós não abordamos isso especificamente, mas eu queria mostrar apenas algo aqui; este site aqui. Acabei de escolher um site aleatório. Se você estiver procurando por coisas sobre UX e UI e testes, provavelmente acabaria no HubSpot eventualmente. São alguns recursos muito bons aqui, eu gosto. Mas digamos que você seja o designer deste site. Você projetou uma versão do site, mas veja o que acontece quando eu a faço menor? Isso é como a tela grande. Quando eu chegar a uma tela menor, você consegue ver o que acontece? Algumas mudanças acontecem. Nesse caso, apenas a ilustração. Quando eu fico ainda menor, digamos para o tablet, eles se livram do menu e vão para esse tipo de imagem de navegação mais tradicional ou menu maior. Então, quando fico ainda menor, as coisas mudam novamente em um layout para um celular. Isso é o que você está fazendo aqui. Você está projetando uma versão para desktop. Você deve projetar uma versão para tablet também e uma versão móvel. Como todas essas coisas se parecem nos diferentes dispositivos e no desenvolvedor, a pessoa que faz a codificação irá: “Ok, estou fazendo aqui uma caixa”, e na área de trabalho, ela será colocada em linhas apenas em 10. Quando chegar ao celular, na verdade vai ficar cheio 12. É chamado de design responsivo. Há todo tipo de coisas divertidas com pontos de interrupção no CSS. Alguns de vocês vão ter algumas informações e conhecimentos sobre isso e quando eu disser pontos de interrupção no CSS, vocês vão acenar com a cabeça sagmente. Alguns de vocês vão ser, vai ser realmente estranho para você. Meu conselho é que você não precisa ser um programador para ser um designer de UX. Mas é realmente útil se você entender um pouco do que o desenvolvedor ou web designer fará depois. Eles estão usando uma estrutura? Qual é a estrutura? Ele usa uma grade de 12 colunas? Qual é o espaçamento padrão? Qual é o ponto de interrupção? O que é uma consulta de mídia? Todos esses tipos de coisas são bastante úteis. Você não precisa, mas eu sei que eles são realmente úteis quando estou projetando algo. Eu dou para o desenvolvedor e eles não me batem com o sapato porque eu desenhei algo terrivelmente difícil de fazer. Se você quiser entrar em algo assim, mesmo se você não entrar em tempo integral, você pode conferir o curso de qualquer pessoa; YouTube, o que quiser fazer. Mas se você quisesse conferir um dos meus cursos, provavelmente o web design responsivo é muito bom. Vá verificar isso. Isso vai te atualizar com muito desse design responsivo. De qualquer forma, vamos falar sobre alguns dos bits que pulei rapidamente. Para parar, homepage, fomos para as colunas aqui. Doze, sabemos por que estamos usando isso. As outras partes, a margem. O que a margem faz? São os lados. Se eu for 80, o que vai acontecer é que há 80 do lado de fora da margem. Vou apagar esses caras ou cortá-los. Obviamente, você precisava colocar suas margens e colunas antes de começar a projetar. Eu coloquei algumas bordas aqui. Digamos que eu esteja projetando um site e quero realmente projetá-lo para um tamanho muito grande. Mantenha a opção em um Mac, Alt em um PC para fazer com que os dois lados se encaixem. Estou projetando um site muito mais amplo. O que posso fazer é colocar em grandes margens agradáveis, digamos como 300, porque o que você notará é na maioria dos sites como este HubSpot um bom exemplo. Quando chega à minha tela gigante do monitor 4K LG, o que eles não querem é que eles não querem o logotipo até aqui e esta página de inscrição e inscrição até aqui, como se ele fique muito largo. Você conhece essas grandes telas envolventes? Só ficaria ridículo. O que fazemos é colocar margens do lado de fora. Você pode ver o site real, na verdade é apenas neste pedaço no meio aqui. Essas coisas aqui são apenas coisas de espaço reservado. Isso é o que você pode fazer aqui. Você pode colocá-lo em uma margem e pode ser apenas cor de fundo. Mas você inicia seu logotipo aqui, mantém o site dentro disso, e isso é um pouco esticado dependendo do tamanho da tela. Vou desfazer isso porque não é isso que eu quero. Vou ficar com 14. Vou dizer 14, quero dizer, a largura de 1440. Lá está lá. Vamos falar sobre a sarjeta. A calha é o espaço entre as colunas. Quão grande eles devem ser? Não há regra oficial de exigência policial. Mas é muito comum usar 24. Vinte e quatro também é uma coisa comum no desenvolvimento. É facilmente divisível por oito, oito é um número de grade de linha de base realmente bom. Veremos isso quando marcarmos um aplicativo em um segundo, ou pelo menos fizermos a grade. Mas você pode escolher 13. Novamente, 13 não é um número facilmente divisível, e isso se torna muito importante mais tarde quando estamos codificando o site. Vinte e quatro é um bom espaçamento. Mais alguma coisa que eu queira compartilhar com você antes de fazermos a grade? Uma última coisa é que, embora eu tenha dito que 12 é ótimo, tanto móvel quanto desktop, é um pouco estranho aqui. Há muitas colunas e o espaçamento não é grande o suficiente. Seria muito comum, mesmo que a tecnologia ou o código subjacente esteja usando 12 colunas, potencialmente. Muitas vezes, é. Basta clicar no quadro real e dizer que, na verdade, 12 colunas são demais. Deixe-me usar seis. É divisível por oito e só me dá um pouco mais de espaçamento. [inaudível] a sarjeta. Provavelmente vou usar algo como 16 para espaçá-lo, o que é um objetivo se você for um web designer. É comum usar em dispositivos móveis. Vou usar isso para meu layout. Mesmo que eu tenha dito usar 12, quando estou projetando, é mais fácil usar 6, e suponha que 12 aconteça mais tarde. Mas é fácil, seis vão para 12 duas vezes. Agora, a outra coisa que quero mostrar antes que seu cérebro derreta, provavelmente já está derretido. Vou adicionar uma versão do aplicativo. Não estamos projetando um aplicativo, estamos projetando um site móvel. Mas digamos que você esteja projetando um aplicativo. Seria muito comum não usar mais colunas. Vou usar o iPhone 8. Seria muito comum dizer que quero uma grade de layout. Clique no plus. Aí está ele. Não de 10, é muito comum usar oito. Essa é uma estrutura que alguém como Android e iOS usam para espaçamento. Novamente, é fácil, é divisível e espalha bem as coisas. Isso seria muito comum. Fale com o desenvolvedor que está fazendo isso primeiro, eles podem dizer o contrário. Mas oito é um tamanho de grade muito bom e você não usa colunas nesse caso porque ele não vai responder. Sempre vai estar em um telefone. Não precisamos do aplicativo agora. Adeus. Vou voltar ao meu desktop HiFi. Se você não conseguir mais nada desse vídeo, saiba que é bom ter 12 colunas para projetar. Eu acho que eu jogo isso lá, porque haverá alguns de vocês lá fora que têm muito conhecimento e alguns com um pouco de conhecimento da outra parte desse processo é o processo de desenvolvimento web e alguns desses números tocarão um sino. Última coisa antes de irmos, atalho. Ele estará na sua folha de atalho porque é estranho no Mac ligar e desligar isso. Porque, como quando eu visualizo esse visual, ele realmente não aparece. Está lá apenas no modo Wiki para me ajudar, mas na verdade não é produzido no final. Você acaba ativando e desligando um pouco. Controle G em um Mac. Agora não Command G, é o controle G, que é um atalho estranho. Fica ainda mais estranho para o PC, é Control Shift 4. Completamente diferente. Eles estarão em sua folha de atalho de qualquer maneira. Isso se sentiu como o fim? Foi o fim. Voltei para regravar algo. Eu quero que você realmente crie páginas inteiras e eu quero mostrar um pequeno truque ou dica, vou jogá-los com colunas. Digamos que eu tenha alguns quadros diferentes. Vou adicionar outra versão para desktop. Passei algum tempo pegando todas as colunas sobre isso. Há uma coisa estranha que você pode fazer em Figma. Vamos clicar nisso. Muitas dessas coisas podem ser selecionadas clicando na área cinza ao lado delas. Olha, só aí. Não lá porque isso abre isso. Mas esta área; terra de nenhum homem. Há alguns lugares diferentes onde você pode clicar, o mesmo com este. Posso pegar esse? Talvez o preenchimento. Nem todos eles são clicáveis. Mas este aqui, clique naquela pequena lacuna lá. Eu o selecionei para que eu possa copiá-lo, ir até lá, e estou usando meu comando Command C V em um Mac, que é Control C Control V em um PC. Estou apenas clicando lá e vou colar e você pode colar muitas dessas coisas. Essa é uma maneira de fazer isso ou você pode simplesmente passar e começar a duplicá-lo como este comando D, Control D em um PC. Eu tenho três deles. Vou avançar para nomear estes. Eu quero que você faça a mesma coisa. Tenha quatro deles. Faça a mesma coisa para celular e eu te verei no próximo vídeo. Não precisamos disso. Faça o modo de avanço rápido para que você saiba o que estou fazendo. Tudo bem, então isso. Quem se lembra de como colocar tudo na tela de uma só vez? Você se lembra, turno 1. Lá vai você. Isso é o que eu quero que você construa tanto para dispositivos móveis desktop e eu o verei no próximo vídeo. 34. 34: Ok, é hora de um pequeno interlúdio de dicas e truques interessantes, preferências e coisas estranhas Esse é o tipo de nome desse vídeo. Vamos fazer isso simplesmente, vamos voltar ao nosso fogo baixo porque temos mais coisas com as quais fazer dicas e truques. Ok, então eu sinto que você está em um ponto em que, na verdade algumas coisas do fluxo de trabalho não vão te assustar , mas na verdade te ajudar Então, vamos examinar alguns deles. Agora, em termos de todos os atalhos, você pode encontrá-los passando o mouse sobre alguns No entanto, muitos deles estão escondidos. Veja isso, um pequeno ponto de interrogação aqui embaixo. Espero que ainda esteja aqui. OK. Se você clicar nisso, como ajuda e recursos, todos nós fomos condicionados por softwares antigos que a ajuda e os recursos integrados são quase inúteis Isso deve ser evitado. Mas as invenções são muito boas Vamos clicar aqui. E eu vou para a seção de atalhos Está bem? Eles têm coisas ótimas. Está bem? Mas o atalho é muito útil e bem definido Então, o essencial, aí está. OK. Eu não vou passar por todos eles. Eu só quero te mostrar. Basta dar uma olhada e dizer, ok, aí está aquela. Ok, há aquela vista, ok? Todos esses. Como acessar as camadas. Painel pulando de ativos, protótipo de design, estamos fazendo isso há algum tempo Indo entre aqui e aqui. Você pode dizer, ok, sou eu, isso é Alt ou opção nove. Ok, então funciona. Existem alguns muito bons. Eu abordarei os principais ao longo deste curso, mas há alguns bons lá dentro. Então, vamos para a opção nove ou a minha na opção oito. Design, protótipo. Design, protótipo Ok, é uma coisa um pouco útil lá embaixo. Vou voltar ao design. Outro atalho muito útil é o atalho que rege todos eles. Ok, mantenha pressionado o comando em um Mac, controle em um PC e pressione a barra para frente Veja duas barras. Um deles vai para frente, um deles vai para trás Então o Ford Slash traz isso à tona: Você fica tipo, oh, o que é isso Certo? Um pequeno esclarecimento aqui. Acabei de usar as ações rápidas e disse, ei, é command forward slash em um Mac Controle a barra frontal em um PC. E isso funciona em muitos teclados quirti, como o inglês, mas se você estiver usando um teclado em um idioma diferente, talvez não use a barra frontal Então figma é inteligente e vamos escolher um personagem diferente. Então, dê uma olhada aqui. Então vá até aqui e passe o mouse sobre Ações rápidas. E você verá que qualquer que seja o atalho para seu tipo de sistema operacional e teclado, será diferente Pode ser isso mais o apóstrofo ou alguns dos personagens estranhos Aí está, Carry on. Basicamente, ele examinará tudo o que Figma pode fazer, se você puder digitar e soletrar Ok, então lembre-se de que antes de mudar a cor, bem, eu queria selecionar o mesmo preenchimento. Então, se eu selecionei isso, eu meio que fiz isso levianamente quando estávamos comentando Certo. Por exemplo, onde está isso de novo, o que você faz é que eu não vá e descubra que sei onde a maioria deles. OK. Mas isso é, estou fazendo isso para seu benefício porque essa é uma maneira muito estranha de fazer isso Tudo gira em torno dos atalhos, pelo menos para mim. Então, eu posso clicar aqui e seguir o comando para frente e barra, e posso dizer selecionar Acabei de digitar S E, L E. Eu nem preciso soletrar muito bem E eu posso ver Selecionar tudo com o mesmo, Phil. Então vá e mude a cor. Acho isso muito útil. OK. Em vez de ter que descobrir onde está, está sendo editado? Está em edição? O que está em selecionar? Está embaixo de você. OK. Então, basta digitar. Se eu quiser que tudo isso seja maiúsculo, vou usar comando por barra e vou para cima Aí está, Upper case, boom. Eu não preciso fazer nada. Eu não preciso ir procurá-lo. Está lá dentro. Também está aqui em algum lugar. Mas eu uso esse comando Ford slat o tempo todo. Tudo bem. Outra coisa útil que ainda não abordamos é clicar com o botão direito OK. Então, se você entrar aqui, clicar com o botão direito do mouse mostrará coisas relacionadas ao que você selecionou. Você pode ver que isso mudará dependendo do que você selecionou. Está bem? E há apenas partes úteis relacionadas ao que você está fazendo. Antecipe. Em vez de ficar na frente, você pode ver o atalho, mas basta clicar nele aqui Você pode movê-lo para outra página. Então, clicar com o botão direito do mouse fornecerá muitas coisas interessantes relacionadas ao objeto em que você clicou Ok, clicando com o botão direito, você sabe como clicar com o botão direito, ei, está na minha lista aqui, preferências. Há apenas algumas que eu trocaria por você. Ok, então eu vou, eu não tenho ideia. As preferências são, então vamos usar nosso comando forward slash e digitar as preferências Claro, não é o que está lá dentro. Nossa, ok, onde estão suas preferências? Aposto que estão em fase de edição. Não, estão arquivados. Por favor, espere aí, eles estão. Aqui embaixo. Não há muitos neste programa. OK. O que eu mudo é manter a ferramenta selecionada após o uso. Eu ligo isso, está desativado como padrão. Está bem? Significa apenas que sempre que eu pegava minha ferramenta retangular antes e a arrastava, ela voltava para a ferramenta de seleção e eu tinha que voltar à minha ferramenta retangular para escolher uma ferramenta e ela ficar por perto até você A única outra coisa com a qual eu mexo aqui é nas preferências e no suporte de cabeça. Está bem? Então, um pequeno empurrão significa apenas que um empurrão é Quando eu pegar esse retângulo e digamos que estou trabalhando nisso, vou usar meu lindo atalho Turno dois. O turno dois é o mesmo que fizemos no turno um. Tudo o que está em todo esse quadro ou página, desculpe. E se eu tiver algo selecionado, coloque dois zooms diretamente nele OK. Vou recuar um pouco porque é um pouco íntimo demais. De qualquer forma, por que estamos aqui? Cutando. Então eu tenho esses dois em um grupo. Cutucar significa apenas um pixel por vez. Provavelmente está tudo bem. OK. A menos que eu esteja lidando com meus oito membros. Fizemos o design do nosso aplicativo e estamos lidando com nossa grade de oito pontos. Você se lembra daquele somatório , Ok, e fizemos oito pontos. Ok, estávamos fazendo design de aplicativos , poderia ser muito bom entrar aqui e dizer preferências, empurrar, quantidade Na verdade, o grande empurrão não é dez, é oito. Isso é útil porque significa que eu posso obtê-lo aqui e acertar em pontos de oito Útil apenas quando você está desenvolvendo aplicativos. Tudo bem. Um pouco. Não é muito empolgante, mas vamos dar uma olhada, temos esses grupos. Eu sei que isso está lá dentro. Eu sei que posso clicar duas vezes neles para entrar. Um bom atalho K é manter pressionado o PC principal do Katro e clicar em uma vez E você vê que simplesmente mergulha direto em vez de clicar. Clique. OK. E quando você tem muitas coisas, tipos de grupos, digamos que você decida fazer isso usando um grupo antigo normal, então eu vou agrupá-lo com aquele. Com grupos. Com grupos, tudo bem. Você precisa clicar duas vezes. Clique duas vezes. OK. Você pode simplesmente manter pressionada a tecla de comando que eu tenho. Tentando descobrir tudo isso. Eu posso pegar essa linha apenas mantendo pressionado o comando e clicando. Uma vez que eu chego lá, é o controle em um PC. Sob tudo isso, eu o ergui totalmente. Esses são meus atalhos que eu uso. Vou apresentar mais algumas na aula, mas, na verdade, esse comando barra e depois digitar as coisas Até tenho os que usei por último, o que é bom. E essa pequena ajuda aqui embaixo marcando os atalhos, é que estou te ensinando a É isso que estou tentando fazer, é isso que estou tentando dizer. Em vez de ensinar uma a cada indivíduo, vamos também abordar algumas coisas estranhas no Figma, só para que elas já estejam te surpreendendo ou talvez no futuro Digamos que se você tem uma moldura, isso é estranho? Não, isso é normal, é um grupo. Você pode ir até aqui e dizer, na verdade, eu quero todo o material extra para uma moldura, ok? Se você tem grupos em todos os lugares e deseja passar a usar os recursos de quadro, basta alterná-los aqui. O que é estranho é que se seu nome aparece acima de um quadro, ok, é chamado de quadro um Se eu acabar colocando isso aqui, onde vou colocá-lo? Vou colocá-lo fora de tudo. Posso colocá-lo lá? Vamos colocar isso acima de tudo. Aí está. Se você acabar com nomes em todos os lugares, é porque esse quadro, mesmo que pareça estar em uma página inicial, não está. Está saindo sozinho. Você tem que garantir que ele entre lá. Tudo bem, então acabei com minhas dicas, truques, preferências e um pouco de estranheza no final Tudo bem, eu vou ver no próximo vídeo. 35. Inspiração de cores e conta-gotas no Figma: Olá a todos. Neste vídeo, vou mostrar os lugares onde vou para inspiração de cores, vários diferentes. Vou mostrar-lhe, então, como colocá-los na Figma, usando a ferramenta Conta-gotas, copiando e colando códigos, além de instalar um plugin que me fará parecer ruim. Você verá o porquê daqui a pouco. Inicialmente, descobri como usá-lo. Tudo bem, vamos começar. Para obter inspiração para a cor, você pode simplesmente digitá-la no Google. Sites de inspiração em cores, há muitos deles. Vou mostrar os que eu uso. É colorhunt.co, é bom. As cores são ótimas. Há quatro deles que funcionam bem juntos. O mesmo com color.adobe.com. Se você for aqui, ambos são livres. Gosto deste. Podemos ir para Explorar e digitar coisas aqui. É muito bom, você pode dizer. Lembre-se do eco-consciente da Sarah. Eu percebo que não precisa ser verde para torná-lo ecológico, mas você pode estar usando palavras dos valores da empresa. Pode ser que se trate de brilho e igualdade ou viagens, ou estou tentando pensar em coisas que teriam uma boa cor e uma paleta de cores única para eles. Pode ser corporativo, você pode colocar na empresa porque essa é a sensação de que você tem que essa coisa precisa. Como muitos desses, encontre um que você gosta. É difícil com esse olhar. Estou na zona. O que você pode fazer é clicar neles, e você pode ver se eu não passar o mouse sobre e ver esse número hexadecimal, esse número de hash, é o que você pode copiar e colar na Figma. mesmo com aqui, você pode ver os códigos se eu clicar neles. Vamos clicar nesse código lá, ele é copiado, é a mesma coisa daqui, você pode copiá-los. Então, em Figma, você simplesmente vai, e Sarah é ecológica. Ela vai gostar de verde. Vamos para nossa versão para desktop. Vou desenhar um retângulo e vou preenchê-lo com, é isso aí. Você pode colá-lo com um hash e Figma resolvê-lo. Lá vai você, é verde. Você pode copiar e colar algumas cores dessas cores mais oficiais. Lugares de inspiração, são muitos deles. Agora, outro para gradientes. Eu uso bastante Grabient, e há muitos desses por aí também em termos de sites de cores gradientes, e provavelmente o próximo vídeo. Mas você pode começar a ver cores gradientes muito agradáveis. Aqui em baixo, você pode ver os números hexadecimais. Você pode copiar colá-los para seus gradientes. A inspiração de cores não é algo que estamos com falta. Agora essas coisas isoladamente estão boas, muitas vezes o que você acaba fazendo ou o que eu acabo fazendo está indo para as coisas. Lembre-se de nossa inspiração moodboard board. Vou usar capturas de tela do Dribble. Mesmo as cores podem não ser o conteúdo certo, mas as cores são boas. O que você pode fazer em Figma é que eu vou para o meu Mobile-Lofi. Isso é aqui em cima. Lembre-se do meu moodboard desonesto, faça a mesma coisa. Retângulo, pegue isso, e eu vou pegar a ferramenta Conta-gotas e pegar qualquer coisa aqui. Você pode ver que eu poderia estar usando isso. Vou desenhar outro retângulo. Você conta-gotas algo mais leve e mais leve dele. Basta fazer algo assim, puxe as cores desse grupo. Você pode ver dicas de onde eu consegui minhas cores para a minha última. Você já viu o final, e então eu zombei de me preparar. Puxei algumas dessas cores e, em seguida, projetei as minhas. Você começa com o de outras pessoas e depois começa a usá-lo. Você é como realmente muito brilhante, não brilhante o suficiente, não há contraste suficiente. Fora do escopo desta classe, acessibilidade em termos de cor, em termos de contraste é bastante importante. Depende de onde você está indo e de quanto ele é aplicado, você deve, como designer de UX, realmente se preocupar com a acessibilidade. Nem todo mundo é, algumas pessoas são daltônicos. Algumas pessoas são um pouco daltônico. Muitos homens na minha idade são daltônicos um pouco. Os deficientes visuais precisam de uma taxa de contraste muito alta. O Adobe Color é útil para isso. Você pode ter uma leitura disso. Está fora daqui, mas aqui está um exemplo. Este e este tem uma taxa de contraste de 3, 33:1. Coloque suas duas cores e você pode ver 17 pontos ou abaixo com essa cor, ou o texto normal nesse fundo verde preenche o gosto de acessibilidade aqui. O contraste entre esses dois com esse 18 pontos e é ousado, essas cores funcionam. Mais uma vez, provavelmente é só, estamos nos arrastando para fazer muito neste curso. acessibilidade está fora do escopo aqui, mas saiba que ela deve fazer parte do seu processo e adicioná-la à lista de coisas a serem aprendidas como designer de UX. Uma última coisa é que isso deve ser um plug-in para ele. Vou para Navegar na Comunidade, ou podemos ir até aqui, Comunidade. Posso dizer plug-in e vou dizer cor. Estou usando a ortografia americana aqui. Eu olho para aqueles que têm mais downloads. Isso parece ter muitos downloads. Nunca usei este. Vamos descobrir isso juntos. Está instalado, o que é ótimo. De volta a este aqui. Vou usar Plugins, Color Pellets, e margem, aqui vamos nós, paletas de cores. É como se estivesse embutido em vez de sair para esses sites. Parece [inaudível], parece incrível. Acho que acabei de gostar. Não sei como usar isso, boa escolha. Boa escolha. Parece incrível. O que aconteceu? Não faço ideia. Tenho que ler a documentação. Ele apareceu aqui em baixo? Não aconteceu. Eu editei, lá vamos nós. Eu trabalhei isso originalmente. Esses são apenas retângulos antigos regulares que são agrupados, podemos começar a escolher cores. Todos os plug-ins funcionam um pouco diferentes. Obrigado. Pellets de cor, você me fez parecer que eu não sei o que estou fazendo. Aqui está você. Você entende a ideia. As cores estão por toda parte. Você deve extrair cores de suas sessões de descoberta com os clientes, você sabe o que eles querem fazer. Eles podem já ter cores corporativas e você está preso usando essas, mas às vezes temos toda a liberdade e podemos procurar inspiração de cores e usar a ferramenta Conta-gotas para roubar cores das imagens. É isso, inspiração de cores ferramenta Conta-gotas, aprendido e feito. 36. Como criar uma paleta de cores no Figma: Olá a todos. Neste vídeo, vamos criar uma paleta de cores com a qual vamos começar a construir nossa maquete de alta fidelidade. Vou mostrar minha técnica para pegar cores primárias e secundárias de acento pode ser algumas sombras delas. O que fazer com negros e brancos? Isso lidera meu processo. Vamos entrar nisso. Minhas cores, de onde elas vieram? Não me lembro. Preparei esta aula há algumas semanas. Tenho tudo pronto, não me lembro como recebi meu primeiro pelo menos. Então eu sei o que é porque tenho meus arquivos de exercícios de prática. Mas o que vou fazer é pegar minha ferramenta retangular e desenhar como um pequeno retângulo aqui. Por aqui, vou colar nessa cor. Você pode ter o seu da Color hunt ou da Adobe color ou da maquete de outra pessoa. Esta é a cor com que comecei e lembro que tirei minha cor secundária disso. Vou usar muito disso. Provavelmente vou usar um pouco desse próximo. Agora, com esse estágio de conceito, você acaba mudando tanto. Não vamos ficar muito oficiais. A polícia colorida não virá e te pegará. Você tem permissão para fazer o que quiser. Mas eu senti que esse tipo de andava juntos. Há alguns tons diferentes que você pode ver. Mais leve, mais escuro, pode vê-lo aqui em cima. Estou encontrando um que eu gosto. Algo assim. Eu queria outra cor, uma cor de destaque. É muito comum ter uma cor primária, secundária e de destaque. A cor do acento geralmente pode ser muito alta ou distinta porque é uma pequena cor especial que você usa e, em seguida, novamente. Eu só fui assim, passei por isso e encontrei algo que eu gostava com tudo. Acabei com algo mindinho, rougey, muito mandarim, algo assim. Você pode acabar chegando perto aqui e então você pode mover isso dependendo de quão saturado ele está, quão escuro é, quão brilhante ele é. Provavelmente algo lá dentro. Podemos mudar isso mais tarde, somos apenas um estágio conceitual. Muitas vezes, quando você chega a esse tipo de estágio, você precisa de algumas variações nessas cores. Estou movendo-o daqui e, na verdade, vou cortá-lo e movê-lo para o meu desktop hi-fi. Não sei por que eles lá Quem move o atalho nas Colunas desligado, Control G em um Mac e em um PC. Aí está, Control Shift cheio, para nunca ser lembrado. De qualquer forma. Vou colar isso aqui, e vou tê-lo aqui em cima e seria muito comum fazer isso. Eu tenho esses. Vou fazer todas essas versões retas, um pouco mais escuras. Então você vai ser movido um pouco para baixo. Quero mantê-lo na mesma zona. O que você pode fazer é alterná-lo para o brilho da saturação de matiz e a tonalidade muda a cor, saturação, o quão saturada ela está e esse brilho, você pode se mover para cima e para baixo. Estou usando minha tecla de seta para subir e descer. Para segurar “Shift” vai em grandes pedaços. Você não deve subir 10 por cento para dois ou vamos acabar tendo um prato com isso na maquete e ajustando-o à medida que vamos dependendo de seus estojos usados e não queremos ter um milhão de cores diferentes, mas vamos começar com alguns que podemos trabalhar. Versão ligeiramente mais escura e diga, segurando “Shift”, pressionando para baixo em algum lugar lá. Vou fazer a mesma coisa para os mais leves. Vou dizer que você quer um mais leve agora? Eu quero brilho apenas para cima? Sim, e provavelmente um pouco mais rico também, então terei mais saturação desta forma. Direto para cima, mais branco. Enquanto eu quero me levantar um pouco dessa maneira. O mesmo com este. Quero que seja um pouco mais brilhante. Está bem próximo do brilho agora. Precisa ser mais rico? Provavelmente não. Gosto disso lá. Provavelmente, na verdade, volta um pouco dessa maneira. Em algum lugar por lá. Acho que o que estou tentando enfatizar aqui é que há ciência para colorir. Há a roda de cores e você pode escolher cores e contraste específicos e análogos. Às vezes, embora haja um pouco como eu sou uma pessoa criativa fazendo coisas criativas com minhas cores. Além disso, o que vamos fazer é ver como fazer preto e branco. Com o branco, o branco é fácil, você não precisa misturá-lo. Eu costumo não usar um branco cheio, uso um pouco de esbranquiçado, apenas um minúsculo fora. Acho que posso usá-lo como um painel. Digamos que temos um grande aplicativo branco, e é branco. Muitas vezes vou usar essa coisa branca. Se eu levá-lo para os colchetes dianteiros, provavelmente não é suficiente. Só um pouquinho mais. Por conta própria, parece quase branco o suficiente. Mas aqui vou usar esse material de interface esbranquiçado, coisas que precisam ser brancas. Mas quando adicionamos coisas como uma sombra, elas funcionam mais tarde. Como você faz uma sombra? Muito cedo para uma correção. Deixe-me ver minha lista. Oh, sim, estamos chegando a uma solução em breve. Isso vai ser bom. Agora, quando eu me levantar para dizer um preto, então talvez eu vou ter cinco. Cinco é bom para preparar algo como 1, 2, 3, 4, “Control D” em um PC. Preto. Não vou ter preto completo. Vou ter o que é chamado de preto rico. Quero que seja um pouco verde porque vou usar muito desse verde em alguns lugares e não quero apenas um preto plano. Eu queria entrar nos verdes. Na verdade, vamos obter essa primeira cor. Vamos pegar minha ferramenta conta-gotas, agarrá-lo, estamos na mesma tonalidade, mas vou derrubá-la aqui. Você pode ver que é praticamente preto, mas há uma pitada de verde lá, apenas um pouco mais pequeno. É o que eu gosto de fazer e então vou usar a ferramenta conta-gotas, mas vou usar minha saturação e subir um pedaço. Veja, para cima e para cima. Não quero que seja muito verde, quero que seja mais leve e tenha uma pitada de verde, mas não muito. Mais uma vez com U. Para cima e mais. Mais uma vez lá, ainda uma pitada de verde lá dentro. Mas não muito. Se você é um teórico de cores ou um designer muito melhor do que eu, você está totalmente autorizado a discordar de mim. Quando me aproximo cada vez mais do branco, tendo um pouco de verde lá, parece um pouco estranho, então eu basicamente não consigo nada no final lá, mas nessas partes aqui, eu gosto que elas sejam mais escuras. O que eu fiz? Acho que acidentalmente cliquei no fundo. Eu para o conta-gotas, você, vou a algum lugar aqui e não muito verde. Aí estão minhas cores. Você pode ir para o outro lado. Ficamos verdes. Se você for para um grupo de cores mais quente, você pode fazer a mesma coisa como ter um preto que esteja apenas em espaços vermelhos e quentes. Neste caso, provavelmente é muito rico, então vou trazê-lo de volta para cá. Ainda está quente, chocolaty, mas também é preto. Agora está dizendo que agora que eu vi isso em contraste, acho que tudo isso é muito verde. Dê-me um segundo. Vou avançar rapidamente. Aqui vamos nós, eu sinto que eles são escuros, eles são cinzentos frios. Isso é o que estou fazendo. Há minha decisão final para pelo menos este primeiro conceito. É uma boa variedade de cores que posso começar a escolher para minha interface do usuário. Agora, se você tem uma cor corporativa que precisa se ater, mas você só tem uma cor primária e o logotipo, talvez dois deles e você precisa de outros bits, acho Adobe ou coloradobe.com. Eles mudam isso novamente. Dê uma olhada e tente encontrar a roda de cores. O que você pode fazer é escolher um. Estou escolhendo aquele que tem uma pequena flecha. É minha cor base. Vou colocá-lo naquele verde da fúcsia. O que você pode fazer é dizer, na verdade, quero encontrar cores complementares para isso. A roda de cores nem sempre está certa. É tecnicamente complementar, mas ei algo para mim. Acho a divisão complementar realmente boa. Aí está meu esverdeado. Não tenho certeza sobre esses caras, mas é uma forma de talvez ser um pouco mais científica dupla divisão complementar. Obter tríade, quadrado, composto. Você pode apenas se encontrar explorando cores que talvez não tenha antes e você pode encontrar algumas dessas cores secundárias e de destaque que você pode precisar para sua interface do usuário. Será uma cor, a menos que você queira que seja. É isso para este, temos uma paleta de cores. Vamos seguir em frente. 37. 37: Olá a todos, vou mostrar como fazer gradientes. Na Figma, vamos fazer gradientes bonitos e sutis, na minha opinião Vamos construir uma máquina do tempo, voltar no tempo até os anos 80 e fazer esse gradiente, e depois criaremos outros redondos que são muito, muito ruins Também mostrarei como alterar a cor do plano de fundo. Você parece que o fundo está escuro. Como você faz isso? Tudo bem, vamos pular no tempo do gradiente. Está bem? Para criar um gradiente, desenhe um retângulo Vou fazer isso na minha página de detalhes do produto Hi Fi para celular , porque preciso dela para mais tarde Ok, e vou arrastar um retângulo de qualquer tamanho antigo e, para alterá-lo para ter um gradiente partir de um preenchimento, clique nesta Está bem? Na verdade, clique no pequeno quadrado e vá de sólido para qualquer um desses. Pessoal, apenas uma pequena atualização rápida. A interface do usuário mudou um pouco. Então, eu tenho meu retângulo selecionado. Eu ainda clico nesse pequeno cubo, mas em vez do menu suspenso, como acabei de mostrar, eles meio que retiraram o menu suspenso e se tornaram um vídeo sólido com imagem em gradiente. Ok, eles estão todos lá embaixo como ícones. E o que eles fizeram foi agrupar todos os ingredientes. Então, se eu clicar em Ingrediente OK, você tem que ter o objeto selecionado. Você pode ver que eu tenho esse novo tipo de recurso semelhante na parte superior. E agora, aqui dentro, há um rádio linear, Angular, ok. Que eu vou abordar no curso. Mas sim, eles apenas mudaram um pouco. Eu sabia que você o encontraria, mas estou aqui fazendo atualizações e pensei em fazer isso Tudo bem com o vídeo. Ok, um linear será que o rádio é redondo, angular. Eu não uso nenhum deles, exceto o linear ou radial. Vamos usar linear neste caso. Vamos falar sobre como ajustá-lo. Você clica em qualquer um desses, ok? Para ajustar o início ou o fim e arrastar isso, arraste o controle deslizante de matiz, encontre algo que você goste e clique neste lado Essa, por padrão, é uma cor, mas a transparência está em zero, ok? Você consegue ver a diferença? Ok, este pode ser transparente. Não quero que a transparência aumente totalmente. Clique nele e eu posso arrastá-lo e escolher o pior gradiente do mundo. É o pior do mundo. Na verdade, eu fiz pior, melhor. De qualquer forma. É isso mesmo. Você pode ajustá-lo arrastando esses pontos. Ok, o começo e o fim, dependendo do tipo de gradiente na direção que você deseja Dizendo com radial, pegue isso, você pode ter seu ponto inicial e final e ver aquele ponto lá Não faz muita diferença quando você está fazendo o linear. Mas o radial, você pode torná-lo circular. Veja esse gradiente circular e talvez torne-o bonito e grande para que fique circular, mais ondulado De qualquer forma, é assim que se faz um gradiente. Para continuar com este curso, porém, quero fazer um gradiente com base em, sim, algumas das minhas paletas de cores que eu tinha Se você veio apenas para ver gradientes, isso é o suficiente. Se você quiser continuar com o curso, vou mostrar alguns trechos extras. Observe também que você pode adicionar um gradiente aos retângulos e aos nossos reais Vamos sair disso. Vamos cozinhar na página inicial. Digamos que você queira um ingrediente de fundo em sua moldura. Você não precisa desenhar um retângulo e colocá-lo na parte de trás Você pode, na verdade, eu vou fazer isso com este porque já tem algo nele. Veja isso. Se eu clicar nos detalhes do plano de fundo, mesmo estando acima do retângulo, veja isso Eu posso mudar o preenchimento para linear e ele ainda está atrasado. Ok. Nesse caso, vou querer usar a cor da minha interface. Lembra daquele branco ou esbranquiçado que eu fiz? Ok, a parte superior aqui é totalmente branca. Pode ser algo assim. E, na parte inferior da transparência, vou escolher algo que é um pouco maior, então não é bom. Ok, quando você está lidando com fundos de cores claras, você pode alterar o plano de fundo do aplicativo real Em Figma. Figma, você simplesmente não pode ter nada selecionado Clique em segundo plano, você pode ver o plano de fundo aqui. Isso não mudará nada a ver com sua maquete. Ok, mas é como uma maneira de seguir em frente. Ok. Eu quero que seja mais escuro para que eu possa ver o contraste e aqui, mas isso não afeta o tipo de apresentação Você não verá o plano de fundo. Sim, não há nada nesta página. Aqui está minha outra página. Aí está lá. Essa cor de fundo é apenas para seu próprio prazer visual. O que vou fazer agora é trazer minha paleta de cores O que eu fiz com isso? Eu fiz isso no desktop porque eu disse, vamos trabalhar no desktop, mudar de ideia, vamos copiar isso. E eu vou trazê-lo para, na verdade, vou cortá-lo e trazê-lo para o meu celular Hi Fi A zoom out. Vou colar aqui e vou colocar lá em cima. Agora, o problema com isso aqui em cima, oito, é muito grande, é bonito e pequeno. Ele está apenas no diretório raiz. Ok, arruinando meu lindo painel de camadas. Então, o que vou fazer com todos eles selecionados, clique em qualquer um deles e diga enquadrar essa seleção. E agora estão todos arrumados. Eles ainda estão lá. Mas agora eles estão todos bem arrumados Vou chamar isso de pellet de uma cor. Essa cor é uma pastilha? Acho que há muitos outros. Ah, eu não me importo o suficiente. Então, sim, existe minha paleta de cores e eu vou escolher um gradiente provavelmente com base em algumas delas Eu não tenho ideia de como isso vai acontecer, vamos tentar. Então, vamos entrar aqui. Isso vai te mostrar como eu posso ir. Essa cor eu quero tirar de lá. Então, essa cor, eu quero obter da ferramenta conta-gotas. De lá. É horrível. Horrível. Sim, fica lamacento no meio de lá Um ok. Vamos tentar mais um. Eu estou bem com isso. O que eu provavelmente vou fazer é pegar isso e ir embora. Está lá, há indícios disso, mas não está lá. E vou adicionar isso ao meu espaço de cores. Eu o dupliquei. Eu quero que seja do mesmo tamanho que isso. O que é isso? 52 por 52. Você pode digitar essas coisas manualmente. 52 por 52, amplie. Vou usar esse meu gradiente. Talvez eu crie mais alguns gradientes que usarei para botões e outras coisas, mas não sei Eu me sinto como gradientes. Pode ser que eu tenha colocado gradientes em tudo nos últimos dez anos A outra coisa que você pode fazer é usar algo como eu te mostrei e você pode ficar tipo, oh, eu amo uau Quem usa isso? De qualquer forma, vamos encontrar uma que tenha três cores que sejam boas. Ok, os anos 80 querem saber onde está seu gradiente. Aqui está, 98, aquele crossover. Talvez você possa copiá-los e colá-los, e eu quero mostrar como você adiciona mais de uma cor. Digamos que você ame isso. Ok, e eu vou usar mais um gradiente. Eu sinto que eles precisam ser separados. Eu vou, eu vou ser linear. Vou arrastá-lo de volta para algo normal, como em linha reta para cima e para baixo. O que eu quero fazer aqui no topo é colar meu código hexadecimal Ok, aí está o primeiro. Eu vou colocar o final. E então você vai perguntar, como faço para colocar um terceiro? Ah, bom. Ainda bem que você perguntou. Ok, clique neste aqui, cole no X então. Acabei de fazer isso por nós, mas fica um pouco lamacento aqui. O designer escolheu uma bela cor intermediária Tudo o que você precisa fazer é clicar uma vez. Você pode ter quantos desses pontos quiser. Eu vou ter três. Aí está. Mas você pode adicionar mais. Ok, você decide. Então, isso são gradientes. Isso é o suficiente. Te vejo no próximo vídeo. 38. Como criar e usar estilos de cores no Figma: Olá, todos. Neste vídeo, vamos ver os estilos de cores. Estilos de cores é uma maneira de salvar suas cores para reutilizar, aqui, você pode ver? Podemos dar a eles nomes legais e isso significa que mais tarde, se eu quiser atualizá-lo, posso atualizar esse estilo e você pode ver todos os usos dele foram atualizados, além disso, podemos compartilhá-lo com outros projetos e outros membros da equipe para que tenhamos todos obtiveram cores consistentes ao longo de um projeto. Deixe-me entrar agora e mostrar-lhe como fazê-los. Vejamos a criação do nosso primeiro estilo. estilo é ótimo porque no momento estou usando apenas a ferramenta conta-gotas, olho no teclado, e estou escolhendo cores, é ótimo. Mas essa coisa aqui, você arrasta isso para cada documento. É um pouco doloroso e você não pode se safar disso por um bom tempo, mas vai haver um tempo em que somos como, na verdade, eu só preciso deles em um local específico, meus estilos e eu quero poder compartilhar esses estilos com eu mesmo em outros documentos e compartilhe-os com outras pessoas da equipe, e quando atualizo o estilo, todos os usos dele em todos os meus documentos mudam, essa é a coisa útil. Você entende o que é um estilo, como você faz isso? O que vamos fazer é dizer que você vai ser um estilo e você faz isso, veja esses quatro pontos aqui, isso é o pouco. Todo mundo tem um estilo para que possamos fazer um estilo de traçado, faremos mais tarde no curso. Um estilo fixo são estilos de ticks. Isso é quatro pequenos aperto, então você clica nisso e aperta “Plus”, diga, quero adicionar um novo estilo de cor ao meu grupo. Você pode ter alguns estilos aqui, que vieram como padrões da Figma, mas ignorá-los por enquanto, vamos fazer estilos para este documento. Quando se trata de nomear isso, na verdade, o que eu vou fazer por este, você espera lá. Decidi que essa é a minha cor principal e esse é o meu segundo, vou usar isso muito mais. Com este selecionado, vou para meus quatro pontos e vou mais e, em termos de nomeação, essa é a minha cor principal. Como freelancer, você trabalha em muitos projetos diferentes. Vou colocar as iniciais da empresa, você acaba tendo muitas primárias. Se você estiver trabalhando em uma empresa, trabalhando especificamente internamente na empresa, talvez seja necessário chamá-la de principal porque trabalha. Quando se trata das convenções de nomenclatura, há algumas maneiras diferentes. Eu vou apenas 1, 2, 3 para as diferentes cores primárias com tons diferentes para, pode ser A, B, C, realmente não importa. Há alguma regra do Jim que eu não conheço, os padrões da indústria, mas isso não muda nada. É apenas algo pessoal, então 1, 2, 3 funciona muito bem, outras pessoas usam porcentagens. Eles usarão cores fixas e, em vez de misturar novas cores o que eu fiz, eles vão apenas derrubá-la, eles vão apenas dizer que o tom é, este primeiro é como 50% da cor original. Você verá isso um pouco, verá 18, 30, 70 porcentagens. A outra maneira de fazer isso é um pouco mais, puxa do CSS, que extrai da fonte antiga linha de tipo. Basicamente, as pessoas usarão centenas, isso seria 100% dessa cor é 1.000. Uma versão minúscula dessa cor, a menor que ela pode ir é 100, é um pouco estranho, eu sei. É muito comum você vê-lo, você verá principalmente em fontes, você já se deparou com isso? Especialmente com o web design, o negrito não será chamado de negrito, ele será chamado como 700, essa é a versão de código para negrito, para que possamos fazer isso para cores também. Digamos que se estivéssemos fazendo isso, eu chamaria isso de talvez 100, eu chamo esse, talvez ligue para 300, dando-me algum espaço para ir um pouco mais leve em 200 e 100 mais tarde, se eu precisar. Isso também é muito comum, mas vamos fazer apenas 1, 2, 3. Vou copiar você, salvá-lo, você mais você em, muito emocionante. Vou acelerar isso e te verei em um segundo. Se você acidentalmente apertar o botão, este aqui é bom para ser chamado de secundário. Como editar seu estilo? Uma vez feito e você precisa alterá-lo tanto a cor quanto o nome, você pode clicar com o botão direito do mouse aqui, porque acabei de tentar. Clique nele uma vez e aqui você pode clicar com o botão direito do mouse e ir para Editar estilo. O seu provavelmente está definido assim, talvez alguns outros lá de algum outro fragmento de documento lhe deram. Mas aqui você pode clicar com o botão direito do mouse e dizer editar estilos e, em seguida, entrar aqui e este será o meu secundário. Você também pode ajustar a cor aqui, mas estou apenas ajustando o nome. Dê uma descrição também, você pode ser a primeira pessoa. Na verdade, eu menti, grandes sistemas de design podem dar descrições às cores para que as pessoas saibam o que e onde usá-las. Vou continuar passando por isso, vamos voltar ao modo de avanço rápido. Estamos chegando aos cinzas, seria muito difícil agora fazer 1, 2, 3, 4, 5, nada de errado com isso, mas eu sinto que mesmo olhando para essas cores, provavelmente vou precisar de outra aqui porque é muito grande uma lacuna aqui. Haverá alguma coisa de interface do usuário que eu vou precisar ter algo no meio. Vou deixar algum espaço para me mover e depois misturo minha nomeação. Para os cinzas, vou usar esse tipo de nomes de centenas. Vou começar aqui e vou dizer que você é cinza e este vai ser meu 100. O que vou fazer é este próximo, quero chamá-lo de 200, vou me dar espaço no meio para dizer que você é, então este é 300. Apenas no caso, mais tarde, eu posso apertar, posso dizer, oh, cara, eu realmente precisava de 200 e isso não vai estragar minha numeração. Eu posso apenas colocar um 200 aqui e seguir meu caminho alegre, então vamos continuar. Estou de volta, esqueci gradientes. Este aqui, você pode aplicar da mesma maneira, para que você possa torná-lo um estilo. Este aqui, vou dizer que você é um estilo e este vai ser chamado SH- Gradiente e isso vai ser A1, ainda um. Algo um pouco diferente é que fizemos isso apenas por diversão, então temos nossos estilos, ele aparecerá em todos os estilos. A única coisa em que ela não aparecerá é se eu for você e eu disser você, e lembrar aqui em baixo das cores locais, ela não aparece aqui em baixo. Pode ser mais tarde, mas no momento você tem que ir para o caminho oficial, o que é bom. Vou trancá-lo no meu SH- Gradiente. Outra coisa bônus para as pessoas andando por aí é que você pode arrastar essas coisas. Se você clicar na terra de nenhum homem, você pode dizer, na verdade, eu quero que estes estejam aqui em cima. Não faz nada além de ter o seu Finch muito bom. Se você obtê-los, você adiciona um, mais tarde, você é como, na verdade, eu uso isso o tempo todo, então ele vai misturar as cores e o estado dos grãos. Tudo bem, obrigado por andar até o fim. Obrigado, Brian por me lembrar sobre gradientes antes de seguir em frente. Agora, para o próximo vídeo. 39. Projeto do curso - Cores e colunas: Hora do projeto da classe. Vamos combinar dois deles aqui, principalmente porque as colunas são chatas e eu não queria defini-las como seu próprio projeto de classe. Eu o amarrei com cores. Nós vamos fazer os dois. Os dois Cs, o chato C, colunas chatas e cores emocionantes. Você provavelmente ainda não foi, temos nossos wireframes lo-fi, criamos as duas páginas para o nosso hi-fi, para celular e desktop. Neles, quero que você adicione as colunas. Portanto, lembre-se, 12 para desktop, seis para dispositivos móveis e cada uma dessas novas páginas precisa ter quadros completos. Isso é o que quero dizer, vamos criar. Você só tem esta página no momento e nesta página. Crie esses dois, nomeie-os e certifique-se de que há, turno um, veja tudo na sua página. Há esses quatro quadros, 1, 2, 3, 4. mesmo acontece com a área de trabalho e certifique-se de que haja colunas e, mais emocionante, escolha cores. Isso pode ser um pouco esquisito, dependendo de quão experiente você é como designer. Não se preocupe com isso, podemos ajustá-los mais tarde. Eles podem ser terríveis e começaremos compartilhar coisas com o grupo um pouco mais tarde, e você poderá obter conselhos das pessoas. O que será ótimo. Nunca sou um bom seletor de cores. Eu não sei, isso parece certo. Escolha suas próprias cores, faça a mesma coisa. Então desenhe uma pequena grade como essa, escolha a cor primária, secundária e de destaque, além de todos os cinzas. De onde você tira todas essas cores? Você pode obtê-los do seu quadro de humor. Você pode encontrar algumas cores lá que você gosta. Você quer se apropriar ou roubar, ou pode ir a um desses sites de inspiração de cores que vimos antes e obter suas cores de lá. Faça a grade e crie estilos porque o que eu quero que você faça quando terminar, é me enviar uma captura de tela de todos os arquivos nomeados aqui, todas as cores nomeadas apenas para mostrar que você pode fazer isso, e você fez isso. Não se preocupe em me enviar uma captura de tela das colunas, colunas antigas chatas. Vou confiar que você os fez. Então esse é o projeto da classe. Uma coisa que quero mostrar a vocês enquanto estamos aqui é que cometi um erro no início do curso. Bem, não é um erro, quero te mostrar algo. As colunas aqui no meu celular, não coloquei nenhum preenchimento do lado de fora. Gosto de ter estofamento do lado de fora. Você não precisa tê-lo, mas vamos fazer isso primeiro. Vou dizer, vamos dar uma pequena olhada nas colunas. Vou clicar neles aqui, fizemos uma sarjeta de 16 entre as colunas, mas na verdade, eu quero uma margem de 16 também, de ambos os lados, de modo que quando eu estou desenhando coisas assim, elas estão realmente alinhadas. Depende do seu design. Se você não quer ir direto para as bordas aqui, você não pode ter essa margem, mas eu preciso dela. Gosto disso. Vou copiar e colar em todos eles. Quem se lembra de como? É uma coisa estranha. Clique no nome, vá até aqui, clique nesta área aleatória. Não lá. Vá lá. Copie, eu vou dizer que você, está segurando o turno, clicando em você e você vai colar. Não, eu tenho dois deles. [RISOS] Eu não percebi que isso aconteceu. Agora tenho dois deles em cada um deles. Ótimo, então. Qual deles eu excluo? É o de baixo? É. Lá vai você. Aprendemos alguma coisa. Você pode colocar mais de um conjunto de grades. Eu sei que quando estou fazendo horizontal e vertical, mais tarde, quando você estiver um pouco mais avançado, você pode começar a fazer grades, colunas. Quero fazer linhas. Você pode começar a fazer linhas, bem como colunas. Fica um pouco de fantasia hardcore. Temos nossas colunas. Então faça isso. Colunas na área de trabalho, compõem algumas cores, podemos alterá-lo mais tarde, e porque, lembre-se, é um estilo, seu estilo de cor, podemos ajustá-lo facilmente mais tarde. Faça alguns ajustes com base no feedback do cliente e talvez no feedback dos alunos, quando começarmos a compartilhar tudo juntos. É isso. Projeto de aula acabado. Vá fazer isso. Vejo você no próximo vídeo em um minuto. 40. Fonte de desktop vs de navegador no Figma: Olá a todos. Este é um pequeno vídeo especial para aqueles que decidiram usar Figma no navegador em vez da área de trabalho. Eu disse que não há muitas diferenças. Este é um deles. Mesmo que você seja um usuário de qualquer versão de desktop, há muitas vezes que você acaba pulando no navegador e as fontes serão uma das coisas que são um pouco estranhas. O que quero dizer com isso é, deixe-me mostrar-lhe. Tenho a versão para desktop aberta no meu computador e tenho a versão do navegador. Eles parecem muito parecidos, exceto que há esse pequeno botão de casa. Lembre-se que, no início do vídeo em que voltei, foi esse vídeo que percebi que há uma casinha aqui e não está na versão do navegador. Lembre-se, está lá, de qualquer maneira. A outra diferença é que as fontes que, quando estou procurando no navegador, deixe-me explicar um pouco, e vou para a minha ferramenta Tipo e começo a digitar o que você notará é que as fontes na versão do navegador são menores que a quantidade que você tem em sua versão para desktop. Para corrigir esse problema, para garantir que todas as fontes do seu sistema acabem dentro do navegador aqui, tudo o que você precisa fazer é ir ao Figma, o site e fazer uma busca no momento e downloads. Este aqui, mas procure o instalador de fontes e apenas instale a versão para o seu sistema operacional e, em seguida, sugará todas as suas fontes do seu desktop, seu computador ou laptop e as colocará na versão do navegador e tudo ficará bem. É isso. Vídeo curto, te vejo no próximo. 41. Quais fontes posso usar mais combinação de fontes no Figma: Olá. Neste vídeo, vamos ver quais fontes posso usar na Figma? Quais são realmente comuns usar? Então vamos ver um pouco de emparelhamento de fontes, juntando exemplos gratuitos que parecem muito bonitos. Aqui vamos nós. É um bom emparelhamento lá. Só para ajudá-lo se você não tiver certeza sobre quais fontes escolher e quais correspondem. Vamos pular. Quais fontes posso usar? Você pode usar qualquer coisa nos dias de hoje. Você quer ter certeza de que qualquer fonte que você usa, há uma versão web dela. Na maioria das vezes, as pessoas usarão apenas o Google Fonts. Google Fonts ou fonts.google.com, apenas está cheio de fontes gratuitas que podemos usar comercialmente e estão disponíveis para serem usadas on-line e dentro de aplicativos. Este é um ótimo lugar para obter fontes. Por que você não pode usar todas as fontes da sua máquina? É principalmente porque você precisa ter certeza de que eles estão disponíveis. Há um tipo diferente de fonte que acaba dentro de aplicativos e sites. Digamos que haja uma fonte que eu comprei no outro dia. Vamos digitar, vou usar maiúsculas, SCOTT HEADPHONES. É este aqui, Geograph. Eu pedi, é ótimo, adoro. Quando eu estava comprando, estava aqui. Eu disse: “Ótimo, adoro essa fonte.” Eu estava usando isso para design de camisetas para um dos meus últimos cursos. Eu disse: “Vou comprar este porque é uma fonte paga.” Não tenha medo de pagar por fontes. Este aqui e eu decidimos que queria usá-lo para visão de desktop. Em vez de tudo por 300, acabei de comprar os tamanhos que quero apenas para desktop. Mas se eu precisasse usar isso para um aplicativo ou para um site, preciso pagar por uma licença diferente. Isso dependerá de quantas visualizações de página? Saiba que você pode realmente colocar muitas fontes online, mas isso é um pouco obstáculo que muitas pessoas evitam usando algo como o Google Fonts porque não precisamos pagar por isso. O Google realmente, eu não sei, embelezou a web com suas fontes. Você pode percorrer e escolher fontes daqui e baixá-las. Digamos que eu já tenha dado uma olhada em como consegui minhas fontes, e havia um chamado Texto Crimson que eu gostei. Eu queria uma fonte serif junto com uma fonte sans-serif correspondente. Gosto deste. Eu disse: “Ótimo, é legal.” Você pode digitar aqui. Você pode colocar minha Mensagem de Marketing. Você pode verificar o que parece. Então você pode baixar partes deles ou baixar toda a família. O que é bom nisso é baixá-los, colocá-los em algum lugar, abri-los e instalá-los. Basta clicar duas vezes neles. Eles instalam. Muito fácil. O que é realmente bom nisso, porém, é que seu desenvolvedor ou quem estiver criando seu site poderá ter acesso às mesmas fontes. Eles os instalarão um pouco diferentes. Eles provavelmente usarão Content algo Network, algo chamado CDN. Eles têm maneiras diferentes de fazer isso acontecer, mas é a mesma fonte, o que é bom. Muito comum usar o Google Fonts. Há muitas alternativas para o Google Fonts. Se você tiver uma licença da Adobe, há o Adobe Fonts. Você pode usá-los, eles são gratuitos como parte de sua licença. Você pode ir a outros sites onde você os compra. Esta é apenas uma fundição independente da qual comprei coisas. Coisas bonitas aqui. Este se chama Klim. Mas você também pode ir para fonts.com ou Envato. Nós olhamos para a Envato Elements anteriormente. Eles têm muitas fontes legais lá. Mercado criativo. Há um milhão de lugares em que você pode comprar fontes. Mas saiba que você pode ter que comprar uma licença específica. Existem apenas algumas fontes que ninguém se preocupou em criar uma versão web dela ainda, então não se meta em problemas. Outra dica é o emparelhamento de fontes. O que eu acho é, digamos que você decida que você gosta dessa versão semi-negrito, veja 600. Lá vai você. Há uma numeração estranha novamente nas centenas que fizemos para a cor. Digamos que você goste desta versão 600, selecione o estilo. Na verdade, não vamos fazer isso dessa forma. Vamos dar uma olhada na parte inferior aqui. O que você verá é que muitas vezes eles terão emparelhos populares com Texto Carmesim. Lá vai você. Montserrat é muito comum. Você gosta? Sim, é uma boa combinação. Ou talvez Open Sans. Essas são todas as outras fontes que você pode baixar do Google Fonts. Agora, esta não é uma aula de topografia, mas uma maneira agradável, simples, bastante comum de trabalhar, é que se você escolheu uma fonte que tenha um serif para o texto do seu herói ou seu texto de acertar, essas pequenas serifas, essas pequenas [ inaudível] sobre ele. Será comum usar um sans-serif como cópia do corpo e vice-versa. Não é o papel de 100%, é apenas uma regra muito comum. Agora, se você é novo no jogo de fontes ou no jogo de design, você pode achar esse termo bastante útil, combinações de fontes. Se vamos usar o Google Fonts, o Adobe Fonts, ou o que quer que seja, a palavra, pares de fontes, é útil. O resultado está aqui. Vamos dar uma olhada. Vou abrir alguns desses. De qualquer forma, um monte deles. O que você verá é há emparelhamento de fontes. Alguém antes de você ter ido e decidiu emparelhar as coisas. Aqui vamos nós. Aqui estão alguns exemplos finalmente. Abril com um Lato. O que você acha? Aqui está você. Não se foi esse. Isso é muito legal. [inaudível] acontecendo. Tantos pop-ups. De qualquer forma, vamos dar uma olhada mais alguns exemplos. Montserrat Oswald. Você não precisa concordar. Não gosto desse emparelhamento. Vamos dar uma olhada. Mas tudo isso pode ser baixado do Google Fonts e você pode dizer: “Oh cara”. É isso. Abril Fatface com Roboto é para onde estou indo. Basta ter um pouco de trabalho com todos os diferentes. Você pode entrar na comunidade Figma. Há alguns arquivos de emparelhamento de fontes lá também, mas pode ser um pouco importante quando você está tentando escolher fontes para um aplicativo ou um site, um pouco de emparelhamento de fontes. É isso para quais fontes posso usar nos meus arquivos Figma? Vamos para o próximo vídeo. 42. Quais os tamanhos de fontes comuns devo escolher no web design: Olá a todos. Neste vídeo, vamos falar sobre o dimensionamento de fontes na Figma. A resposta curta é que você pode escolher qualquer tamanho que quiser, mas há alguns padrões ou coisas comuns que foram acordados entre muita comunidade da web. Mas você pode quebrar totalmente as regras, você pode usar qualquer tamanho que quiser. Mas mostrarei os padrões e, em seguida, faremos algumas coisas básicas e marcaremos alguns dos cartões de recursos que vamos usar neste curso. Tudo bem. Vamos pular. Certo. Tamanhos para texto, você pode escolher o tamanho que quiser. Existem algumas regras gerais que são úteis quando você é novo. Vou trabalhar na minha página inicial. Vou limpar qualquer lixo que eu tive dos tutoriais anteriores. Vamos manter pressionada a tecla Shift e ir Shift zero. Você pode ir para o turno número um, mostra a página inteira. turno dois faz a coisa que você selecionou em tela cheia. Mas isso está muito perto. O meu está em 133. Eu quero que seja no Shift zero, que é 100%. É uma maneira melhor de decidir sobre fontes. Novamente, você precisa estar testando em seu dispositivo. Especialmente se você estiver saindo para um smartwatch ou talvez uma televisão ou outra coisa. Vamos adicionar nossa mensagem de marketing principal nesta página inicial. Vou pegar meu T no meu teclado para a ferramenta de tipo, clique uma vez. Vou chamar isso, a música do nosso povo. Vou escolher minha fonte. Estou usando esse Crimson Pro. Gostei disso. Vi um exemplo lá em itálico. Quão grande devo fazer isso? Vou te mostrar os básicos. Vou começar você lá. Vou torná-lo branco para que eu possa vê-lo aqui. Vamos colocar alguns carrapatos de amostra, colocar o título uma amostra. O maior tamanho para vagar pela Terra é de cerca de 72. Deixe-me usá-lo. Mas parece fazer parte da lista de amostras de todos. Então eu vou descer um, depois vou mudá-lo para o próximo salto. São 48. Próximo salto, 32 , 24, 18. Então, muitas vezes você mudará para a cópia do seu corpo por 16. Essa é uma escala de dimensionamento realmente normal, você pode ter todos os tipos no meio. Mas isso será muito comum para apenas muitos sites terão isso, é uma hierarquia. Você pode ter Título 1, Título 2. Muitas vezes, isso é chamado de Título 0 porque ninguém o usa. Porque é tão grande. Então, Título 1, 2 , 3, você não pode ter cinco. Acabamos de pegar esses. Este é realmente típico. Vamos espalhá-los bem. Aqui vamos distribuir o espaçamento vertical, lá vamos nós. Você pode usar isso para seu espaçamento. Se você gosta, não tenho certeza do que deveria ser. Música para o nosso Povo, na verdade, todos estiveram lá e eu direi, vou fazer um título. Então, vou trazer este aqui. Vou torná-lo realmente uma das minhas cores. Então, vou usar meus três secundários. Isso está em contraste escuro com o plano de fundo. Vou usar essa mensagem de marketing, a música do nosso pessoal. Você terá que criar sua própria mensagem de marketing para sua persona ou seu cliente. Eu só vou colocar um retorno lá, e vou torná-lo centralizado, e depois vou pegar minha ferramenta de seleção, clicar, colocar no meio, e isso vai funcionar para mim. Essa é minha principal mensagem de marketing. Você começa a ser o Título 1 porque você é realmente importante. Dependendo de como você vai usar a fonte, você pode ter exatamente o mesmo grupo também, mas não é itálico. Está em talvez um semi-parafuso. Na verdade, isso é muito grande para mim. Regular, médio. Isso pode ser outro caso de uso para seus títulos. Isso pode ser como a versão de marketing coloquial e isso pode ser mais informações. Quando você chega à cópia do seu corpo, normalmente é sempre 16. Qualquer coisa menor do que isso tem problemas em aplicativos e sites onde é muito pequeno. acessibilidade é um problema em que as pessoas podem lê-la. Na verdade, os sites do Google, eles não gostam quando você coloca pequenas fontes em todos os lugares. Ele diz: “Ei, você quebrou algumas regras em seus rankings de busca podem ser afetados.” De qualquer forma. Minha fonte correspondente é chamada Dosis. Nunca usei antes, parece legal. Vi um exemplo e vou usá-lo regularmente e 16, esse será o meu parágrafo. Em vez do Título 4, esta será minha cópia do corpo ou você pode chamá-la de parágrafo. O que você também provavelmente notará nas linhas é que eles chamarão de H1 ou H0. H zero, desculpe. Título 1, Título 2. Seu cérebro de web designer pode ser como, eu sei totalmente o que é isso. Se você não fizer isso, você é um web designer e o cérebro do desenvolvedor web saberá o que é. É apenas uma versão abreviada disso. O que chega aqui, às vezes há um P um e P dois. Se você tem um segundo parágrafo, você pode ter um que precise ser, é um caso especial. Ele vai para algo como um fundo de modelo misto e essa versão leve é muito leve. Talvez seja necessário ter essa versão mais pesada. Esses são os tamanhos amostrais básicos. Você pode deixá-lo lá. Vou mover isso para lá, e olhar para um exemplo de trabalho. Vou me livrar desse fundo. Só vou ter preenchimento. Você precisa preencher. Mesmo que seja branco. Vou começar a construir alguns cartões que vamos construir mais tarde com nossos recursos. Quero desenhar algumas caixas, mas quero encaixá-las em nossas colunas. Há um pouco de produção. Aprendemos tudo o que vamos aprender sobre tamanhos. Mais uma vez, não há razão para você não ter 35. A razão pela qual alguns desses números existem são alguns papéis diferentes, mas digamos que 16, 16 seja o padrão na web. Algo chamado ems. One em tem o tamanho padrão para todas as fontes online se você não alterá-lo. Então, usamos isso como base. Falamos sobre essa grade de 8 pixels anteriormente. Oito é divisível por 16, então isso também é útil. Há coisas a ver com alturas de linha e grades. Você pode ir bem fundo nisso, mas essa é uma boa amostra inicial. Na verdade, me dê um segundo. Vou escrevê-los aqui para que você possa tirar uma captura de tela ou tê-la para si mesmo. Além disso, não me segure nisso. Isso é apenas regras gerais e você pode quebrá-las tudo o que quiser. Vamos fazer a coisa. Vou desenhar algo aqui. O que eu queria fazer, é que eu queria encaixar nas colunas. Vou criar o que é chamado de cartão. É nossa pequena caixa reutilizável. Vamos ter três deles. Você os viu no começo lá. O que vou fazer é clicar nisso no globo ocular na minha grade. Está lá. Vou desenhar com a ferramenta retângulo, e vou desenhar algo parecido com isso. termos de cores, vou escolher um dos meus estilos e ir para essa cor secundária. Vou para minha ferramenta circular. ferramenta Circle é a tecla O porque parece um círculo. Se você quiser um atalho. Vou arrastá-lo para fora segurando Shift. Vou usá-los como imagens mais tarde. Tenho planos de usá-los para imagens. Em termos de consistência, você não precisa seguir todas as grades, mas será útil. Vou fazer isso. Meu plano é usá-los alternadamente. Então a imagem vai estar aqui, os ticks de recursos serão assim. Quero virar este. Para isso, vamos usar nosso super incrível atalho, comando, barra direta ou controle de barra frontal. Eu me pergunto se há um flip? Não é um deslizamento, um flip. Existe, flip horizontal. Lá vai você. Vou fazer a mesma coisa. Este é o meu plano para o momento. Vou mostrar apenas um caso de uso para o texto, e precisamos realmente fazer algo que seja legal. Há muita teoria, não quero realmente fazer algo. Digite a ferramenta, clique uma vez. Meus recursos serão, teremos três deles. Um dos meus títulos é provavelmente plásticos reciclados. Vai ser um dos recursos que meu produto tem, plásticos. Selecione tudo. Que títulos temos? 22? Eu pulo para 24? 24 vai funcionar para mim, porque se encaixa. Em seguida, na cópia do meu amigo, vou clicar e arrastar. Porque eu quero que ele se rompa por aqui. Clicar uma vez lhe dá essa caixa em expansão para sempre. Clicando e arrastando, ele lhe dará uma largura fixa. Eu gostaria de ter um estilo. Vamos fazer isso em um segundo. Vou mudá-lo manualmente para Dosis. Vou usar 16. Vou começar a digitar. Faremos isso no momento. Aqui vamos nós. Legal. Estou de volta a zero, volta para 100%, então mude zero. Isso não funcionou. Se você pressionar Shift zero enquanto estiver na ferramenta de tipo, ela escreve isso. Quem sabia? Turno zero. Certo. Sim, está parecendo bom. No entanto, é sem texto adequado lá, mas isso é algo que eu estou procurando. Provavelmente algum espaçamento, provavelmente alguns cantos arredondados. Talvez seja isso que estou fazendo. altura da linha provavelmente precisa sair um pouco, na minha opinião. Vou me certificar de que o redator escreve apenas uma frase. Muito obrigado. Tudo bem. Esse é o meu plano para 1 , 2, 3 desses. Isso não se alinha a isso. Mas é muito bom. Você pode ver as linhas vermelhas? Eu tinha coberto, mas aqui. Lugar errado. Você pode ver tudo isso alinhado. Ainda não é perfeito, mas acho que precisamos parar de fazer algumas coisas, quero mostrar a vocês uma instância desse título é aquele título. Está muito perto? Poderia ser. Eu salto para o 32, talvez eu precise de um 28 por causa dessa fonte em particular. Algumas fontes parecem maiores do que outras. De qualquer forma. Não gaste muito tempo em seu laptop real, a menos que seja um site. Verifique em seu telefone, como o que precisamos fazer. Vá para aquele Figma Mirror e, na verdade, basta verificar, é legível? Isso precisa ser realmente regular ou precisa ser médio? Tudo bem. É isso, o tamanho da fonte acabou. Vejo você no próximo vídeo. 43. Como criar estilos de caracteres no Figma: Olá a todos. Neste vídeo, vamos ver os têxteis. Vamos fazer todos esses bonitos. Eles são úteis porque podemos ser consistentes. Podemos entrar aqui e fazer atualizações rápidas e realmente aperfeiçoar seu design. Vamos entrar nisso. Para criar um estilo, é exatamente o mesmo processo que fazer cores, exceto as fontes. Você não precisa ter essa fantasia. Você não os tem listados dessa maneira. Você pode usar essa fonte aqui. Eu poderia dizer que você, meu amigo, vai ser meu estilo de título um. Vou passar para a mensagem de texto. Lembra daqueles quatro pequenos pontos quando estávamos fazendo cores? É o mesmo aqui. Exceto que esse estilo informará nossa fonte ou nosso texto. Vamos apertar este pequeno botão Plus como antes, e você pode chamá-lo de Título 1, ou eu vou chamar H1. Seja o que você quiser chamá-lo. Vou chamar o meu título 1. Ótimo. Eu posso ir até aqui e dizer, na verdade, preciso que você esteja indo agora, é o mesmo lugar, mas no fundo aqui como se tivéssemos cores. Estes estão lá. Olhe para isso. Eu me candidatei a este. Este é a mesma coisa. O que você notará é que a fonte virá, mas a cor não. Vamos digitar outra coisa. Vou digitar, e vou dizer, digamos que esta seja a fonte errada. Vou quebrá-lo, e vou dizer Roboto, e é pequeno 16. Vou quebrar isso e dizer que você é apenas a cor de amarelo brilhante ou qualquer que seja essa cor. [inaudível] longe e você é tipo, eu preciso que ele seja meu estilo. Incrível. Eu posso usar meu estilo doce. Vou selecionar o texto. Onde estão meus estilos? Texto. Aí está ele. Vou dizer: “Você, meu amigo, está aqui embaixo.” Observe que o texto atualmente é lime. É uma cor esverdeada amarelada. Você notará que ele tem o tamanho certo, obteve a fonte certa. É itálico, todo o espaçamento entre letras, kerning e liderar farão parte do estilo. Mas você vê que a cor não era. Isso é algo que não vem junto com o estilo da fonte. Uma coisa que eu rapidamente pulei lá é digamos que eu quero mudar isso. O que você notará é que quando é um estilo, esse tipo de caixa de texto aqui fica muito pequena. Você diz: “Eu posso alinhar à esquerda, alinhar à direita. Posso brincar com algumas partes pequenas, mas não posso fazer muito.” Quero mudar isso. Por que está preso? Você pode quebrar o texto. Este estilo de cabeçalho, aplique a ele clicando na coisa do pequeno ícone de link quebrantado lá, e tudo isso aparece novamente. Antes, depois, e é separado desse estilo. Posso ir em frente e fazer qualquer coisa que eu goste. O que vou fazer, e vou fazer você fazer também, é trabalhar. Vou dizer que este aqui é meu texto. Vai ser um estilo. Vou usar o cabeçalho zero e continuar adicionando-o a eles. Agora, se eu clicar no plano de fundo, você pode ver? Esses são mais dos meus estilos. Mais tarde, vou mostrar como compartilhar todos esses estilos com outros membros da sua equipe, que os torna ainda mais emocionantes. Agora, trabalhe o seu caminho. Na verdade, antes de passarmos, um dos grandes bichos para estilos que eu simplesmente não te contei é a atualização. Esses dois são exatamente os mesmos, exceto pelas cores diferentes. Se eu aplicar um estilo de cabeçalho um a eles, nada muda. Digamos que o cliente volte e diga: “Na verdade, Dan, não estamos sentindo o texto Carmesim. Tenho uma fonte para você. Vou enviar isso. Você pode usar isso?” E você diz: “Não há problema. Posso atualizá-lo. Mal posso esperar.” Com ele selecionado, vou entrar aqui e não vou quebrar o link aqui. O que eu quero fazer é não ter nada selecionado. Vá até aqui e diga que um cabeçalho precisa ser atualizado e lembre-se, eu apliquei lá e ali. Se eu atualizar este, todos eles devem atualizar, e eu posso entrar aqui e dizer, legal, verificar o e-mail, desmaiar do choque, desmaiar do choque, e é o roteiro de pincel, e esse belo design que você tem está trabalhando agora tem sido o roteiro de pincel. Você pode gostar do script de pincel Odeio tanto. Mas de qualquer forma, então é assim que atualizar seu tecido. Você pode ver se ele está sendo usado em muitas páginas diferentes, quadros diferentes. Tudo vai ser atualizado. Muito difícil. Desfazer. Aqui vamos nós. Continue trabalhando, crie um estilo para cada um deles e vou fazer esse modo de avanço rápido. O que eu realmente deveria mencionar é que escolhi dois estilos. Eu não deveria. Eu deveria manter essa aula simples e ir como ignorar essa. Nunca vamos usá-lo. Mas você pode ter um cabeçalho de marketing e, em seguida, um cabeçalho de informações, ou pode haver versões do seu site que são back-end, front-end. Você pode ter dois tipos de cabeçalho. Como você os divide? Cabe a você. Vou ter isso como Alt H1 ou cabeçalho um. Só para saber a diferença entre os dois, e nas minhas especificações, ou minha especificação de design, ou meu sistema de design, posso explicar a outros designers quando usar o itálico, quando usar isso. Talvez este seja um coloquial para citações, ou talvez jargões, todas as mensagens de marketing casuais. Enquanto isso é realmente para cabeçalhos de informação para menus e coisas. Eu poderia explicar isso lá, qual deles usar e onde. Vou trabalhar no meu caminho. Vejo você em um segundo. Estou de volta. Eu adicionei todos eles. Duas coisas que eu quero lembrá-lo. Uma é se eu entrar aqui e eu ficar tipo, “Quero que você seja um dos estilos.” Você notará que nos meus estilos eles não estão em ordem alfabética. Eles estão na ordem em que eu os fiz. Isso vai dizer: “O que você está fazendo lá? Por que um está acima de zero?” Nós meio que fizemos isso antes. Não tenha nada selecionado e vá, bem zero está acima de um e Alt um. Tenho dois cabeçalhos. Eu tinha outra coisa. Não consigo lembrar o que é. Você espera lá. Estou sentado aqui por cinco minutos. Não consigo descobrir isso. Vamos passar para o próximo vídeo, sendo importante. 44. Lorem ipsum e texto de espaço reservado no Figma: Olá a todos. Neste vídeo, vamos introduzir algum texto de espaço reservado, em vez de usar o texto de espaço reservado da palavra ou xxx, que aprendemos anteriormente. Vou compartilhar um site para obtê-lo, e vou mostrar um plug-in de suíte chamado Content real. Vamos atualizar nosso estilo de parágrafo só porque, tudo isso e muito mais, na verdade, não mais apenas isso neste vídeo. Vamos começar. Precisamos de algum texto de espaço reservado porque escrevendo ou escrevendo, acho que antes fizemos xxx. Isso não vai voar. Vamos usar algo chamado Lorem Ipsum. Algumas pessoas não gostam de usá-lo, tudo bem. Você viu no início, apenas palavras misturadas em latim que se parecem com o inglês, há Lorem Ipsum para todos os idiomas diferentes, mas vamos dar uma olhada. Existe uma maneira fácil. Isso é como um rito de passagem para ir ao lipsum.com, cheio de anúncios, horrivelmente projetado, mas eu não sei que todo mundo o usa. Se você só vê isso uma vez sabe disso. Lá vai você lá está. Preciso de um parágrafo, gere Lorem Ipsum e você pode copiar isso e colá-lo em seu documento. Ele apenas mantém o lugar, um espaço reservado. É sobre isso. Até que recebamos o texto do redator apenas significa que não somos o que é um pouco mais fácil de projetar e isso nos dá uma ideia de como altura de linha, palavras diferentes e tamanho da fonte, mas como muitas coisas na Figma, há um plug-in para isso. Vou voltar para minha casa ou posso voltar aos arquivos. Tenho que voltar aqui, encontrar o pote da comunidade e vou para plug-ins e quero procurar conteúdo real, K-R-E-E-L. Este aqui é super incrível. Vamos usar para isso, além de muitas outras coisas no curso. Pode haver uma melhor agora, o Google, melhor alternativa para o plugin de texto de espaço reservado real ou base de conteúdo para Figma. Vou instalá-lo e o plugin é tão bom instalar rapidamente. Vá para a guia, abra o plugin. Aí está, eles têm conteúdo real e o que vou fazer é pegar minha ferramenta de tipo, Tiki, arrastar isso para fora. Na verdade, estou ligando minhas colunas lá vamos nós. Vou pegar minha ferramenta de tipo e vou desenhar uma caixa de tipo que se encaixe aqui e com o caso de carne, vou dizer Lorem Ipsum. Você pode dividi-lo. Vamos olhar para alguns desses outros mais tarde. Mas, quero que Lorem Ipsum entre. É muito grande. Imagine se eu tivesse um atalho para resumi-lo como texto de cópia corporal. Aqui está eu vou selecionar tudo e vou falar aqui e dizer que, na verdade, meu amigo vai ser parágrafo e também notei aqui é que meu espaçamento entre linhas. Meu espaçamento entre linhas para parágrafo não é bom, é muito apertado e eu gosto mais aqui. O que vou fazer é clicar nisso. O que isso define, defina-o para 115%. Eu não gosto desse número estranho, mas, aqui está definido como, como faço para atualizar este? Quem se lembra? É como um teste, teste pop. Você se lembra, não tem nada selecionado e eles estão todos aqui, eu posso entrar nisso. O que vou fazer é terminar com você conteúdo real. Muito obrigado. Essa era a coisa de Lorem Ipsum. Vamos terminar com ele. Aqui estamos nós. Lembre-se que desde a última vez que eu estava trabalhando. Se você excluir tudo e clicar para fora, ele irá para automático. Auto é muito útil. É muito bom. Você não pode forçá-lo digitando coisas, mas vou deixá-lo em 100% ou auto. Na verdade, não é 100%, é um pouco maior. Então o padrão aqui é 20.2 e eu gosto mais disso e o mais legal sobre isso é agora se eu jogar aqui e eu digo que você vai ser o estilo de parágrafo. Vai manter a largura, mas usará esse novo espaçamento entre linhas. Se você tiver um estilo configurado, mesmo que eles se sintam um pouco cedo para eles, então esse amigo deve copiar. Isso significa que você pode atualizar as coisas rapidamente em um documento realmente grande. Vou te dizer, meus amigos são parágrafos. Olhe para isso. Há texto de espaço reservado Lorem Ipsum na Figma para suas marcações. Uma nota que se você está trabalhando, você diz que seu cliente é como meu pai, ame meu pai, se eu enviar-lhes isso, ele reclamaria que estava quebrado e eu vou ter que explicar a ele por um e-mail que seu espaço reservado texto e é misturado palavras latinas apenas para dar a impressão porque ainda não temos o texto escrito só para que você saiba, isso acontecerá uma vez com você. Tudo bem. Próximo vídeo. 45. Coisas úteis para saber sobre texto no Figma: Olá pessoal, neste vídeo, vou passar por alguns recursos um pouco mais avançados para texto, apenas aqueles que eu uso muito e imagino que você usará. Não vou cobrir todos os casos de uso para fontes, mas vou mostrar onde encontrá-las. Vamos adicionar links. Vou te mostrar como fazer coisas como traços, destruir os carrapatos. Vamos fazer espaçamento adequado de parágrafos, espaçamento entre letras, além de outros. Vamos entrar e pular. O primeiro é garantir que você esteja ciente, eu tenho um estilo aplicado a isso, vou quebrá-lo, é tudo ou não tudo, mas muitas coisas boas aqui nos três pequenos pontos avançados. Vamos encobrir pedaços e pedaços dele, apenas as coisas úteis. Os principais que eu gosto de usar são a liderança ou a altura da linha aqui, obviamente nós olhamos, e o outro é o espaço entre parágrafos. Se eu colocar um retorno entre esses dois, eu entendo, é uma viúva? [inaudível] viúva ou órfão. Vou abrir isso. [inaudível] vire lá, mas tudo o que eu quero fazer é abrir o espaçamento. Não seja uma daquelas pessoas que fazem isso. Funciona ou faz essa costura menos quando você seleciona o texto, você pode fazer isso e diminuir o tamanho da fonte? Você está rindo se você fez isso. Vou selecionar tudo e vou para este aqui, quando eu usar um pouco de espaço entre parágrafos, seria muito comum dividir o tamanho da fonte pela metade. Você não precisa. Seja o que for, dividi-lo pela metade ou pelo menos [inaudível] alguns facilmente divisíveis pelo tamanho da fonte torna a vida mais fácil mais tarde quando você está tentando alinhar as coisas quando você fica um pouco mais avançado. Mas de qualquer forma, a altura da minha e este espaço [inaudível], como chamamos isso? Chame-o de espaço depois, espaçamento de parágrafos, ele tem o nome certo. Vejamos o espaçamento entre letras, vou dizer que vocês querem mais tarde criar um logotipo com base nas fontes que você está usando. Vamos fazer fones de ouvido Scott. Vou escolher um ousado, e com o meu Scott muitas vezes vou pegar esses dois. É este aqui, bem isso também. De qualquer forma, o espaço entre as letras geralmente essas duas, e eu vou arrastá-las para baixo. Se aparecer misturado, não sabe o que fazer quando você está arrastando. Vou excluir isso e arrastá-lo desta forma. Que desastre, zero. Essas coisas acontecem com o melhor de nós. Isso é o que eu quero fazer. Eu selecionei todos eles, tenho que voltar a zero e vou arrumar isso. Você pode decidir aqui, que é um grande espaço nesta fonte, eu não gosto disso, então vou dizer a você também, vou ficar menor. Só este menor, é aquele. Legal. Se eu for honesto, acabo fazendo muito mais trabalho de design no Illustrator. Só estou copiando e colando aqui. Mostrarei conexões do Illustrator mais tarde, mas espaçamento entre letras ou variações de rastreamento ou kerning de um tema. Vou ter fones de ouvido Scott. Você estará fazendo o seu próprio. Vamos fazer um pequeno bloqueio de logotipo no topo aqui. Posso fazer isso depois. Isso corta para uma das outras coisas que vou mostrar neste vídeo está aumentando. Você é como, onde está o tamanho maior. Lembre-se da ferramenta K ou Escala ou, na verdade apenas faça coisas em que realmente não queremos acertar nenhum desses como 72, 48. Só queremos torná-lo maior. Vou fazer isso. Este será meu logotipo no momento. Isso fará o título de caminhada. Deslocar zoom zero 100%. É grande o suficiente. Não está tudo alinhado do jeito que eu gosto, mas vamos continuar com as fontes mais avançadas. O próximo é selecionar tudo o mesmo. Digamos que eu tenha essa coisa, esses três aqui não têm o estilo aplicado a eles. Que outro lado eu acho acertar três. Vou passar. É como este primeiro, pode estar causando muitos quadros diferentes. Temos todos eles bem firmemente aqui. Não consegui selecionar todos os preenchimentos. Podemos tropeçar aqui e ir para “Editar”, “Selecione todo o texto para corrigir”, é um atalho? Acho que é. Com o selecionado “Command Forward Slash” ou “Control Forward Slash” em um PC e digite “Selecionar o mesmo com propriedades de texto” lá você vai. Ele passou e selecionou todos eles e agora posso dizer que, na verdade, vocês estão todos Título 3. Na verdade, meu Alt Heading 3 vai quebrá-lo, voltar. Aqui está o meu “Alt Heading 3", aqui vamos nós. Você pode trabalhar seu caminho e atualizar as coisas, alterá-las. Você não precisa alterá-lo para um estilo, mas esse pouco, selecionar as mesmas propriedades de texto é uma coisa útil. Uma coisa mais nova para Figma é que agora temos balas e numeração. Não são muito excitantes, são? Eles são, na verdade, muito úteis. Mas eles estão lá só para você saber. Outra coisa útil que eu quero mostrar é que você pode ter um link aqui. Vou selecionar tudo e [inaudível] aqui em cima, nós colocaríamos para. Você pode clicar nisso e dizer que quando isso for clicado, vamos para www. neste caso, vai para figma.com. Vamos estilizá-lo com o clique tradicional, porque sou uma cor de link, confira o que realmente é, mas vou deixar isso em negrito. Outro atalho que estou lançando como bônus é, se você tiver alguma coisa selecionada, você pode usar alguma formatação básica, como “Comando B” ou “Controle B” em um PC e eu simplesmente deixo em negrito. mesmo acontece com o itálico “Comando I”, se o seu telefone tiver um I, ele não tem um itálico. Mas se aconteceu, “Comando B”, este aqui vai para “Regular” Eu selecionei “Comando I”, irá para itálico. Estou dizendo comando, [inaudível] Então, se você ouvir o comando, pense em “Control” em um PC então “Command U”, é sublinhado “Command S” que não acontece. Strike through está lá sob o seu avançado ou está lá, não consigo lembrar o atalho para isso é, é “X” “Comando X” não, ele fecha. Essas são algumas formatações básicas. O link funcionará em seu protótipo, então, eu vou para o prato e lá vai você. Ele vai pular para um site. Ele saltou aqui. Está pedindo, você gostaria de sair para garantir novamente, ele vai fazer isso, vai para Figma. Você tem a ideia para esse. O que mais? O último é quando você está delineando a fonte. Digamos que você seja [inaudível] e queira fazer algo extravagante com ele. Vou duplicá-lo porque vou destruir essa coisa [inaudível]. Amplie, “Shift 2" para minha seleção, amplie-o e vou pressionar “Command Minus 1" para voltar um pouco, sempre amplia demais. Vamos lá, Figma apenas amplie o suficiente, mas não muito perto, então, isso é “Command Menos”, para diminuir um pouco ou “Control Menos”. Este é um texto editável, o que posso fazer dizer que você quer fazer algo especial para ele. Destruí-lo, tomar posse disso, vamos personalizar essa fonte. O que podemos fazer é descrever o traço. Basicamente, agora isso não é uma fonte. Você não pode editar o tipo, mas elas são formas editáveis para que eu possa clicar duas vezes nele, entrar no modo de edição ou integrar com ele selecionado, ir para o caminho extravagante ou para o longo caminho. Posso entrar aqui e dizer realmente o que vou fazer? Vou fazer é selecionar tudo isso e vou conseguir. O que vou fazer? Vou tentar pegar todos esses. Eu tive que ampliar para pegar todos esses. Há um deles, [inaudível] aqui vai você. Você precisa ampliar para obter um pouco detalhado. Scott Headphones, o que estou fazendo? Destruindo esse conjunto, é o que estou fazendo. Nem consigo fazer isso. Isso é o que acontece quando você realmente não planeja o vídeo muito bem. É como uma onda sonora? Eu podia me ver consertando isso. Vamos fazer mais um. É como uma onda sonora sônica olhar para isso, lindo. Você pode delinear texto, não mais editável, sempre se certificar de que há um backup. Tudo isso. Eu acabei, mas estou de volta agora porque tenho outra gorjinha. Na verdade, eu estava apenas usando como se eu devesse mostrar isso às pessoas. Vou usar este texto aqui, e com ele selecionado, se você não estiver nisso como muito regimentado em termos de tamanho [inaudível] na fase de reprodução, você pode selecionar texto e manter pressionado “Command Shift” em um Mac, e isso é “Control Shift” em um PC, e você está procurando o atalho do teclado é, é o período ou o maior que, menor do que eu não tenho certeza. Você vai ter que experimentar. Não sei qual deles é qual. Mas você pode subir e descer com texto apenas pelo globo ocular em vez usar os números aqui ou tentar manter algum número predefinido. Isso é útil e estou usando o próximo a ele. Então, o olhar para o período e a vírgula, ou o maior que e menor do que no teclado. Para baixo pela tecla M e mantenha pressionada a tecla Shift e Command em um Mac. Bem, a tecla Shift and Control em um PC. Tudo bem, vai ser isso. Não são todos os recursos da Figma para texto, mas são as manchetes nas coisas que eu acho que você vai usar mais, mas não se esqueça de brincar com o resto. Você pode encontrar coisas nele que você gosta de usar. Tudo bem, para o próximo vídeo. 46. Como corrigir fontes perdidas no Figma: Olá pessoal, neste vídeo vamos ver o que fazer quando você tiver uma fonte ausente. Você pode vê-lo aqui, interrogação com um A ou um A com um ponto de interrogação aqui, o que você faz? Bem, basicamente, basta clicar nele e substituí-lo. Há um pouco mais nisso. É um vídeo curto, ficar por aqui, sair e mostrarei todas as diferentes maneiras de substituir fontes ausentes. Substituindo fontes que você não tem, há algumas maneiras. Eu estava usando este kit aqui, queria usar os campos porque eles são muito legais. Obrigado, Michelle. Dupliquei, prendi e fiquei tipo, “Ótimo”. Fui copiar todos os campos e gostei do texto que estava nele também para o meu projeto, e havia uma fonte ausente. Você pode vê-lo aqui em cima neste documento original, realmente não importa se isso aconteça aqui ou digamos que eu o copie e mova-o para o meu documento, eu colo, ele virá junto para os passeios como, “Ei, estou perdendo”. O que fazer? A primeira coisa a fazer é apenas ver se você gosta da fonte, esta é chamada Helvetica Now Display, você pode ir e baixá-la. Pode ser uma fonte gratuita. Foi o que eu fiz por isso. Eu tenho essa fonte na minha máquina agora porque ela se chama Inter e eu gostei. Foi muito bom simples e clicando, estou quebrando o estilo dele, e indo, Inter. Eu só fui e baixei. Não pode sair, é grátis. Eu estava tipo, “Ótimo”. Então essa coisinha desapareceu. Este aqui eu não queria usar, então acabei de deixá-lo. Mas vamos usar isso como exemplo. Digamos que queremos isso. Você pode verificar, você pode realmente tê-lo em sua máquina. Pode ser chamado de outra coisa, então Helvetica, eu não tenho Helvetica agora, mas eu tenho Helvetica ousada, isso é bom o suficiente? Não é o mesmo, mas pode estar perto o suficiente. Digamos, eu não quero fazer isso. Digamos que eu queira trocá-lo por algo porque gosto do bloqueio disso, mas quero usar minhas fontes. Você pode selecionar o texto aqui e clicar nele aqui, apenas alterá-lo, ou há um mais extravagante no topo aqui onde você pode dizer, que está faltando. Vá por todo o documento e substitua-o por, estou usando o Crimson Pro. O Crimson Pro tem um preto? Ele faz. Este outro aqui eu vou usar a Dose, estou usando regularmente para minha cópia corporal. Clique em “Substituir”. Olhe para isso. Você pode fazer isso aqui para tudo e se eu desfazer este aqui, você pode fazê-lo especificamente para essa fonte específica aqui no texto, neste painel direito aqui. Isso está faltando fontes. Faça o download deles se forem gratuitos e você quiser usá-los. Verifique se sua máquina os tem e eles são chamados de outra coisa ou troque-os usando o pequeno ícone aqui ou no seu pequeno texto do painel direito. Isso é fontes ausentes. Vejo você no próximo vídeo. 47. Projeto do curso 08 - Texto: Olá, todos. É hora do projeto de classe. Vamos encerrar muitas coisas de texto que estamos fazendo e empurrar seu design em que você está trabalhando, aquele em que você recebeu o resumo mais cedo. Tem seu próprio nome e seu próprio objeto. Você vai trabalhar nessa. Crie um logotipo, eles podem ser simples, basta fazer algo como, tudo o que fiz para este curso foi manter uma maneira diferente zonas de fontes umas sobre as outras ou algo parecido onde são apenas pesos separados. Se você estiver interessado, você pode gastar muito mais tempo em seu logotipo, até você, mas eu não estou esperando nada extravagante. Na página inicial, quero que você adicione sua mensagem de marketing e cópia do amigo de espaço reservado e, em seguida, trabalhe encontrando uma fonte. Fizemos isso nesta classe, então vá embora, veja as fontes do Google, fontes da Adobe, o que você quiser, as fontes da Adobe, o que você quiser, encontre alguns bons pares de fontes. Eu quero que você tenha essa grande mensagem de marketing e esta cópia corporal. A mensagem de marketing surgiu sozinha. O meu é super queijo. Olhe para isso, a música do nosso povo. Venha com o seu próprio. Se o seu produto acabar sendo bolsas, você pode pedir emprestado de alguma outra empresa também. Estamos apenas praticando isso. Algo aqui, estilize-o, seja legal, faça dele um dos seus títulos. Aqui, quero que você instale o plugin para a linha de conteúdo apenas para praticar a instalação de um plugin e lançar alguma cópia corporal. Vou estilizá-lo, vou colocar o meu em algumas cores de fundo. Provavelmente vamos lançar uma imagem em segundo plano mais tarde. Depois de fazer isso, e você tem uma noção das fontes que deseja usar. Quero que você construa esses estilos, esses estilos de texto. Eu mudei o meu para aqui. Essa coisa, você não precisa de uma alternativa, apenas a primeira. Crie estes, você pode escolher qualquer fonte que quiser, transformá-los em estilos como aqui. O que eu quero que você faça é pegar essas paletas de cores, lembrar que elas costumavam estar aqui no celular, basta copiar e colar, movê-las para sua própria página para que você aprenda, você sabe criar uma nova página agora. Crie uma página, feche o guia de estilo, descarte ambos lá. Eu os amarrei em seus próprios quadros pequenos e vejo. Caso contrário, você acaba com coisas assim, onde está? Isso. Se você não acabar movendo o quadro de humor para quadros de humor e estilos para estilos, há muito lixo. Vamos fazer é eu dizer, mas não como eu faço. Para criar os estilos, mova-os para sua própria página. Este aqui é interessante. Este é um projeto de pesquisa. Então, se você é um designer experiente e já está apenas aprendendo Figma, você pode pular as partes da pesquisa e apenas construir alguns cartões. Cartões de interface do usuário é um termo que você precisa saber. Não, eu não posso conhecer princípios de design neste, então, se você é novo, vá e pesquise, o que é um cartão de interface do usuário? Eu lhe dei alguns exemplos daqueles que eu quero que você construa nisso, isso é o que eu fiz. Não é fantástico, mas este é meu pequeno cartão. A versão curta é que um cartão é como uma unidade reutilizável. Eu poderia ter 100 desses. É um bom, fácil, razoável. Essas serão imagens. Quero fazer um cartão de imagem. Eu fiz isso com círculo ao lado com o texto aqui. Sei que vai voltar para me morder quando alguém quiser mais texto. Mas, ei, estes são cartões, eu me safo com algumas coisas aqui. Faça uma pesquisa, o que é um cartão de interface e dê uma olhada em alguns artigos. Não precisa ser longo, gastar 10 minutos, ler sobre eles. Obtenha suas habilidades, saiba o que é um cartão. Eu lhe dei alguns exemplos daqueles que eu acho que seriam apropriados para isso. Você pode usar o que quiser, em seus arquivos de exercícios, em exemplos de cartões de interface do usuário, e eles são apenas aqueles que usam imagens e texto. Isso é o que eu estava procurando. Veja essas coisas aqui, há um cartão. Este é bastante aprofundado. Há uma cópia de cabeçalho e corpo como o que temos uma imagem. Muito diferente do cartão que estou tentando fazer aqui. Dê uma olhada, tamanhos, maneiras como eles estão colocando para fora, há alguns exemplos lá. Vá encontrar o seu próprio. Imagens do Google ou drible e veja design do cartão ou da interface do usuário seria o termo mais fácil de usar. Então, até agora, estamos fazendo coisas e apenas guardando para si mesmos ou enviando-as para suas tarefas. O que eu gostaria de fazer é compartilhar algumas dessas coisas para obter feedback agora do grupo. Temos um grupo amigável no Instagram, Twitter, grupo do Facebook e LinkedIn, sejam quais forem as bases da sua casa, o que você mais gosta. Faça uma captura de tela de duas coisas. Faça uma captura de tela desses dois bits e seu guia de estilo. Eu os carreguei para a parte de tarefas também nos projetos de classe, mas também faço capturas de tela e carrego ambas apenas para que eu possa ver o que você fez. Você pode pedir feedback. Estou no Facebook, estou em todos os lugares também. Eu fico um pouco sobrecarregado. Tenho ajuda de assistentes de ensino, meus amigos criativos que ajudam, revisam e dão feedback. Pode haver como, “Ei, bom trabalho”, e é isso que você está procurando. Ou se você quiser, “Ei, eu não sei por que estou fazendo, o que estou fazendo de errado?” Basta nos avisar nos comentários quando você postar coisas ou para qualquer banco, vá verificá-los. É isso. Vejo você no próximo vídeo. Um pouco de trabalho lá, não muito. Novamente, não estamos realmente procurando por design, se você odeia suas cores e odeia suas fontes, tudo bem. Não é disso que se trata. Este é um curso [inaudível]. Vamos aumentar as habilidades, vamos praticar e não se preocupe se você não está super orgulhoso de onde está, ainda. Tenha orgulho de você ter começado. Próximo vídeo. 48. Dicas e truques de desenho no Figma: Isso é o que fazemos neste vídeo. Você está desligando, pulando, não pule. Fazemos algumas coisas simples. Figma não é uma ferramenta de desenho em tempo integral. Ele faz coisas simples muito bem e você vai usá-lo provavelmente muito para criar UI e ícones. Não vou passar por todos os recursos, mas todas as coisas úteis quando você for um designer de interface do usuário. Você precisa fazer interruptores e ícones e pedaços e peças. Vou passar por essas dicas e truques agora. É tão ruim. Não vamos fazer isso. Agora vou começar. Para começar, vou usar a página de checkout porque ela está vazia. Você pode usar o que quiser. “Shift” 2 para ampliar a coisa que você selecionou. Vou passar brevemente a ferramenta de lápis porque eu realmente não gosto dela. Você pode alterar as configurações básicas aqui. Se você segurar “Shift”, você pode desenhar varas retas. Eu não uso isso. Você pode adorar. Não há muito nisso. A ferramenta Lápis é uma, a ferramenta Caneta é esquisita. Se você nunca o usou, este não é o vídeo para aprender. Só vou te dar o básico real. Mas, como designer de UI ou designer de UX, é realmente útil aprender a ferramenta Caneta. Tenho um curso ilustrador que passa muito tempo com a ferramenta Caneta. Isso pode ser certo para você. Mas o super básico é, se você clicar uma vez, você obtém um canto. Vou pegar você, você, você. Não fazendo nada, só realmente quer estalar e ir direto, o que é legal e esta é minha casa ou uma flecha. Tudo o que você quiser fazer. Quando você voltar ao começo aqui, assista isso. Se eu clicar nele de volta ao início, posso fechá-lo e então, aqui, posso dar um preenchimento. Esse é o básico das linhas retas com a ferramenta Caneta. Barra de espaço, arrastar, cair é qualquer a lua porque é um exemplo fácil. Lembre-se de clicar uma vez que lhe dá um canto e, se você quiser uma curva, você clica, segure e arraste. Clique uma vez para um canto, clique, segure e arraste para uma curva. Clique uma vez para um canto. Essas são as regras básicas disso. Agora, eu tenho esses dois, e como estamos desenhando no modo de edição de objetos, eles não são duas formas separadas. Você pode ver que ainda estou aqui dentro, estou preso no modo de edição de objetos. Eu fico preso nisso o tempo todo porque estou acostumado com outros programas. Esses vetores juntos. O que vou fazer é selecionar você, cortar. Quem se lembra de como sair disso? Existe o caminho oficial. Feito. A outra forma é apenas clicar duas vezes no plano de fundo com a ferramenta Seleção. Estou fora agora, posso clicar em “Colar”. Eu os tenho separados. Tenho minha casa e minha lua. Quando você está desenhando, você tenta fazer um pouco de simetria e simétrica. Se você ampliar diretamente, poderá começar a ver os pixels. É um pouco difícil de ver na tela, provavelmente na gravação, mas você pode ver e ele tentará encaixá-los. Você pode fazer algumas coisas assim, onde provavelmente está se encaixando nesses pixels aqui. Desenhar uma casa porque quem mais vai adorar a casa do lado? Estou usando minha tecla de seta apenas para movê-la através de uma. Eu o selecionei uma vez. Estou em um modo de edição de objetos, selecionei, movei-o uma vez. Quem mais os estava enlouquecendo? Este aqui. Lembre-se do nosso original, apenas o ignorou e eles disseram “Você é a largura errada”. Do jeito que foi projetado, não pude alterá-lo. Podemos fazer isso agora com nossa doce ferramenta Caneta. Para que ele pare de parecer uma flecha, preciso tê-la desenhado com uma porta. Minha ferramenta Caneta, vou entrar nessa coisa, na verdade, voltar à ferramenta Seleção, clique duas vezes nela para entrar, ferramenta Caneta, eu preciso provavelmente 1, 2, 3, 4. De volta à minha ferramenta Seleção, preciso que esses dois caras venham aqui. Aqui vamos nós, lindo final. Melhor? Um pouco melhor. zoom em pixels pode lhe dar um pouco de consistência. Outra coisa a ver com isso é o derrame. Se você sair do caminho, você vem aqui. O traçado que analisamos anteriormente, e com ele selecionou o traçado, você pode ir para essa opção de traçado avançado, clicar nisso e olhamos para os endpoints. Não temos endpoints porque é uma forma completa. Lembre-se que eles são arredondados e grosseiros. O que estou procurando agora é, na verdade, este primeiro, centro. Você pode ver aqui, a linha azul é a linha que desenhei, e então meu traço, que é um pixel, está enrolando. Mas você pode ir de dentro e de fora. Isso vai fazer uma diferença maior nisso. Você pode ver a diferença na casa agora? Esse é o mesmo tipo de traço original. O que você pode encontrar é que você vai baixar um monte de ícones e ele terá a mesma altura e largura, mas você gosta por que este parece menor e este parece maior? É apenas a maneira como isso está sendo processado. O traço corre por dentro ou por fora? A outra coisa são as bordas aqui, você pode ter um monte de ícones que não têm essas arestas realmente afiadas. De volta ao avançado lá, isso é uma medição. Isso é um pouco afiado por padrão, você pode cortá-los, um pouco grosseiro ou você pode arredondá-los, o que é muito bom. Fantasia. Não é chique. Esse é um pouco mais longo que esse. Estou desistindo. Você entende a ideia. Outro par de coisas é que há linhas de traço. Eles estão aqui, estilo de traçado, sólidos, ficou frustrado. Lá vai você. É aí que está. Desfaça isso. Outras coisas que são úteis e ainda não cobri, há uma estrela. Nós clicaremos nele uma vez. Quero clicar, segurar e arrastar e soltar. Isso não parece funcionar. Vou clicar uma vez e, em seguida, clicar, se você tiver o mesmo problema. Posso arrastar uma estrela se eu quiser que ela seja perfeitamente altura e largura é restrição, segure “Shift”. Eu ganho uma estrela. Voltarei à minha ferramenta Seleção agora. Posso brincar com coisas como aqui é o número da estrela. Eu posso fazer mais como uma pequena coisa baseada em estrelas, e esses dois aqui você pode brincar. Eles são bastante autoexplicativos. Este aqui e curvas randy. O mesmo com o triângulo. Você pode fazer um triângulo. Bem Polygon aqui. Eu continuo fazendo isso. Polígono, desenhe e depois vá assim. Olhe aqui para todas as suas formas. Você pode ver este aqui? Eu disse polígono, lembre-se, não triângulo. Você pode quatro, faz um quadrado, mas vamos cinco, e vamos para seis. Você entende a ideia. Octagon, vamos fazer isso. Ao redor dos cantos. Então aqui, a contagem também está lá. É um pouco estranho. Lá vai você. Você ganha um quadrado. Outra coisa que preciso mostrar é a rotação. Agora, com a ferramenta selecionada, você pode simplesmente passar o mouse aqui e girar as coisas. Se você girá-los, estou apenas pairando aqui fora, segure “Shift” e gire-o. Ele o bloqueará em unidades lógicas. Você pode digitá-lo aqui. Acho que era o que eu estava levantando em algo como incrementos de 15 graus. Você poderia decidir que, na verdade, eu só quero girar este 180 e você simplesmente digitá-lo. Também saiba que há um monte de opções aqui embaixo, sob pequeno f, em Objeto. Você pode ver girar? Já olhamos para esses flip horizontal, flip vertical. Há um monte de coisas aqui. Por último, mas não menos importante, é algo chamado Modo de contorno. Ele até usa, se você já ouviu falar do Outline View, do Adobe Illustrator, é o mesmo aqui. É até o mesmo atalho. Vá tentar. Se você conhece o atalho, é “Comando Y” em um Mac, “Controle Y” em um PC. Estava lá se você quiser o longo caminho. Se for novo para você, é apenas essa opção aqui. Está sob vista e lá está, os contornos. O que é isso? Ele está visualizando seu documento, se eu diminuir o zoom, vamos ampliar tudo. É certo, “Shift one”, tudo na minha página inteira. Você pode ver que ele o divide para essa visão realmente simplista. Isso é muito útil, especialmente quando as coisas são cortadas. Olhe para esse cara. Eu estava usando isso fora da câmera quando estava, que comando é isso? “Comando Y” ou “Controle Y”. Só estava tentando fazer com que estes se alinassem. Acabei de usar “Command Y” ou “Control Y” em um PC, para que eu possa começar a trabalhar neles e realmente vê-los. Você pode trabalhar exatamente como você estava fazendo antes. É apenas uma espécie de exibição de esboço, daí o nome Outline View. Muito bom quando você está desenhando, fazendo as coisas se alinhar, ver coisas como um raio-x. Vamos ativá-lo novamente em “Command Y” em um Mac, “Control Y” em um PC. A única coisa que eu sempre fico preso é, você está aqui e você não percebe e está tentando fazer algo aqui e você está preso dentro do modo de edição. Eu mencionei algumas vezes porque eu sinto que, por que não posso mover isso? Porque você ampliou aqui e não sabe o que está fazendo e está preso no modo de edição de objetos. Feito ou apenas clique duas vezes no plano de fundo com a ferramenta de seleção. Essas são minhas dicas e truques para desenhar na Figma sem se aprofundar demais. Fazemos desenho aqui. Não é o melhor recurso, mas faz todas as coisas boas, todas as coisas básicas perfeitamente. Obrigado Figma. Obrigado por assistir. Vejo você em outro vídeo. 49. Botões de círculos quadrados com cursos arredondados de ios no Figma: Olá, todos. Neste vídeo, vamos olhar para Squircles, que é, este é um esquilo e esse não é esquilo. É uma ótima palavra. Você pode ver a diferença de redondeza aqui? Este é um iOS arestas lisas e arredondadas. Este é apenas um antigo canto arredondado geométrico regular. Aprenderemos como fazer isso neste vídeo. Também fará cantos arredondados individuais também, além de alguns atalhos. Vamos esguichar. Vamos começar com esquilos porque ele tem o nome base. Vamos começar com alguns botões aqui em baixo na minha página inicial. Vou pegar a ferramenta retângulo, que é a arcie, e arrastar algum botão. Escolha um estilo de cor. Não poderíamos ter contraste. Acho que está tudo bem terá dois deles. O que faremos é fazer os dois com um canto arredondado, digamos 10. Agora, a coisa do esquilo é chamado de algo chamado alisamento de canto aqui. O que vamos fazer é que precisamos clicar nisso. Diz fazer a transição desses cantos e todos os cantos conectados para cantos independentes. Agora podemos ver tudo isso. Aqui está aqui. Eles chamam isso de suavização de canto e o que você pode fazer é arrastá-lo para cima. Você pode vê-lo lá? Vou continuar arrastando e farei com que o editor aumente o zoom. Você pode ver flexões. Isso é esquilo, não esquilo. Esquilo, não esquilo. É um quadrado, um círculo. O que você acha em comparação com este? É uma coisa muito Apple iOS. É de onde é que você pode usá-lo de qualquer maneira. Mas é emprestado deles. Eles fizeram alguns, eles fizeram isso e é legal. Eu achei isso para lhe dar um exemplo visual um pouco mais de licitante. É de Figma poucos, esquilo Google Figma, se você pode soletrar. Vai te levar a algo assim. Você não precisa fazer esquilo. O que você pode fazer é fazer independente nos cantos. Lembre-se de que você pode ir independente ao virar da esquina. Você pode dizer que realmente eu quero, você pode ver aqui se eu clicar? Você vê esses ícones? Ele diz qual deles. No topo da minha viagem, você vai fazer o zero. Você vê essa pequena coisa de guia nele. Estou fazendo isso aqui? Você pode fazer isso manualmente digitando-o ou pode fazê-lo aqui. Tenho meu retângulo aqui. Se eu segurar a tecla de opção em um Mac. Tecla Alt em um PC e eu só clico e arrasto um deles. Você pode apenas trabalhar nisso. Será isso e suavização de cantos ou não. Me avise nos comentários. Vale a pena? Você consegue ver a diferença? Gosto porque muito mais personalidade para um botão de qualquer maneira. Tudo bem para o próximo vídeo. 50. Booleano União Subtrair Cruzar Excluir Pathfinder no Figma: Olá, todos. Você está pronto para um tutorial de desenho um pouco melhor? Vamos explorar operações booleanas, União, Subtrair, Intersectar, Excluir. É muito parecido com o Pathfinder no Adobe Illustrator, mas aqui em Figma tinha algumas vantagens legais. Deixe-me mostrar o que eles fazem e quais são as vantagens. Sim, podemos pegar um ícone de casa em chamas. De qualquer forma, mostra todas as diferentes operações booleanas. Parece uma boa ideia, é por isso que está lá. Nos últimos vídeos, fizemos algum desenho real, usando a ferramenta de fizemos algum desenho real pinos de formas, e essa é uma maneira de desenhar seus ícones e componentes de interface do usuário, móveis de página é outra boa palavra para eles. Coisas que estão na página, vamos usar o que é chamado de operação booleana. É um nome ruim. Eu não gosto desse nome, mas basicamente essas são as formas como esses booleanos trabalham. Vamos criar algumas coisas. Vou para a ferramenta retângulo. Vou desenhar a base da minha casa. Vou usar a ferramenta polígono para desenhar o topo dela. Selecione os dois e diga centralizá-los, e faça-os assim. Bom o suficiente para mim. [inaudível] ambos e eu precisamos escolhê-los para ter uma boa cor só porque. Union, o que ele faz? Porque se eu fiz isso e esse era o ícone da minha casa, pode ser como, sim, lá está minha casa, isso é tudo o que eu preciso fazer. O problema é que quando eu exporto isso, ele exportará duas formas. Vou mandar isso para o meu desenvolvedor e ele vai ficar tipo, por que você me enviou um triângulo e um quadrado. Vamos exportar mais tarde no curso, mas isso é um problema. O que você precisa fazer para combiná-los ou uni-los é selecionar os dois. Você pode ter um monte de formas diferentes, não precisa ser apenas duas e essa coisa aparece. Sem ele, não lá, um deles, não lá, dois deles, faltando um pedaço. Como booleanos. Largue isso e vamos começar com o Union. Você é como, olhe para isso, esmagado juntos. Ele se livrou das duas formas e agora é uma. Chama-se sindicato e podemos chamar isso, vou chamá-lo de sindicato porque estamos tentando nos acostumar os nomes, mas este é o ícone da minha casa e eu o exporto. Vai ser uma unidade. A coisa legal sobre isso, porém, é que ele é sempre editável. É mágico. Posso clicar duas vezes nele para entrar e olhar, é separado, mas quando ele exporta é uma unidade. Isso é muito útil. Você ainda tem coisas como eu posso brincar com o raio fronteiriço. Essa é minha casa de ferreiro, então e volte para fora e essa é a coisa que é exportada. Isso o que um sindicato faz. Na verdade, vou copiá-lo, desfazer até que isso desapareça, porque o que eu deveria ter feito foi fazer algumas cópias diferentes. Lá vamos nós este, “Comando D” “Controle D” e eu vou colar meu próximo de volta. Subtrair, vamos passar por eles muito rápido. Subtrair, faz isso, quem estiver na parte superior subtrai a parte inferior. Eu desenhei essa coisa por último, então está no topo. Posso ver, lá é retângulo ou é um retângulo inferior na parte superior dele. Isso está em cima do meu retângulo. Se eu trocar por aí, se eu disser que você retângulo está no topo, vou usar meu colchete quadrado pelo pico, então eu sei que está em cima de tudo e eu seleciono os dois, exatamente a mesma coisa, subtrair, obter uma operação diferente. Quem estiver no topo cortará o que está por trás. Intersecção. Vamos fazer isso. Intersect, é o que sobra onde eles se sobrepõem. Isso é o que você sobrou. Exclua, isso deixaria um grande buraco onde eles se sobrepõem. Eles são seus opostos, se cruzam excluem. Tudo bem, isso é muito chique, mas você gosta, como funciona? Vai lhe dar um pouco mais de um exercício prático. Achei que isso era inteligente, talvez você não. Você pode continuar adicionando a ele. Vamos adicionar uma ferramenta retangular, desenhe uma chaminé para a cor diferente. Veja o que acontece se eu for para o sindicato, você pode realmente, esse é o padrão. Basta clicar no ícone. Seja qual for o topo, ele ainda vai esmagar, mas usará a cor superior. Union, você pode continuar sindicando coisas. Vamos movê-lo agora. Subtraia. O que vou fazer é pegar minha ferramenta retangular. Vou arrastá-lo aqui para minha porta e porque posso voltar à minha ferramenta de seleção e ampliar um pouco para poder ver meus pontos. Eu posso ir assim e depois ir para esses dois e usar exatamente a mesma coisa. Subtraia. Legal. Olha como sou chique. Este aqui, eu quero que uma casa fique pegando fogo porque eu faço. Este exercício, foi inteligente. Tenho uma elipse. Vou desenhar uma elipse. Vou ter dois deles e quero usar este aqui, o cruzamento. É um pouco difícil vê-los. Vou ir, como vejo o Outline View? Você se lembra disso? Você se lembra de “Command Y” em um Mac, “Controlar Y” em um PC, ou você pode usar o outro atalho, um atalho através de todos eles, “Command Forward Slash” basta digitar contorno. Aí está, mostre contornos. O que eu estou procurando é a parte intermediária para parecer uma chama. Estou procurando por essa parte. Eu quero pegar os dois e voltar para fora da visualização do esboço e usar esse cruzamento. Esta é minha pequena coisa flammie. Olha isso? Deveria estar se tornando fora daqui. Não sei por que a coisa toda precisa estar pegando fogo. Tudo bem. O último, como isso poderia ficar inteligente? Bem, vamos precisar de algumas janelas em mim. A tecla O para a ferramenta círculo mantenha pressionada Shift. Vou fazer como janelas terríveis. Não consigo vê-los, lá estão eles. Vá para a Exibição de contorno novamente. Está ficando confuso. A visualização de tópicos não é tão útil dessa maneira. Por que todos esses círculos aqui? Bem, vamos lidar com isso em um segundo, na verdade, vamos terminá-lo e usar [inaudível]. Vou selecionar todos esses. Você pode mudar as cores apenas para ser bom, mas selecione-as e vá até aqui e use a última. Chama-se excluir, temos nossa casa com buracos nela. Eu posso enfiá-los todos juntos e posso dizer sindicato. Agora essa é uma pequena unidade que será exportada para nossa terrível casa à beira-mar, [inaudível] que está pegando fogo. Ótimo ícone. Agora, a grande coisa que expliquei no início que ainda havia separado, mas todos eles ainda estão separados também. É por isso que se eu movê-los aqui e ir para o Outline View, você pode ver que ainda há muitas coisas aqui. Você pode ter na verdade aquela porta lá. Eu realmente vou sair desta porta aqui precisa ser diferente. O [inaudível] é um terrível, então você pode entrar nele. Posso dizer, onde está? Excluir um é um pouco profundo aqui. Mas posso dizer que o retângulo lá tem cantos arredondados de como dois agora. Não é tão estranho. Aqui vão eles, corrigi-lo totalmente, mas você pode clicar duas vezes em coisas, continuar clicando duas vezes e vá, veja isso. Ainda está excluído. Ainda é um buraco nele, mas ainda é editável. É por isso que essas coisas booleanas são muito legais, é como o Pathfinder, se você é de ilustrar uma terra ou talvez o construtor de formas que seja bastante útil também. Tudo bem, isso vai ser isso para esses. Sim, vamos para o próximo vídeo. Foi bom nas minhas anotações. Ícone de casa flamejante. De qualquer forma, próximo vídeo. 51. Qual é a diferença entre União vs Nivelar no Figma: Olá a todos. Neste vídeo, vamos ver a diferença entre união, no topo aqui e achatar, a opção não destrutiva e a opção terminal, muito destrutiva, mas às vezes útil. Vamos pular. Vamos falar sobre união versus achatado, vou usar esse exemplo aqui. Farei uma nova página, e se eu for para o modo de esboço, Command-Y ou Control-Y em um PC. Você vê todas as coisas no topo aqui é legal que ainda é editável, mas faz um documento muito confuso. Pode ver aqui também? Se eu entrar nessa união, vamos chamar isso de minha Casa de Bombeiros. Há muita coisa acontecendo aqui. Embora esteja tudo bem, ele exportará muito bem. O que eu quero fazer é, na verdade, apenas suavizá-lo em um único desenho e é aí que entra achatado. Vamos tomar este exemplo primeiro. Vamos fazer uma cópia dele aqui. Vamos para a visualização Outline. Eu tenho essa coisa e é totalmente editável, o que é bom. Mas, na verdade, eu vou apenas ir Flatten e ele só leva de volta para lá. É destrutivo. Não destrutivo é o sindicato que fizemos, ou neste caso, se fizermos cruzamentos para conseguir este. Muitas vezes você usa flatten depois de usar um desses. Usamos o intersect para fazer este e, em seguida, apenas para arrumar, fomos achatados. Também é uma boa vitória. Digamos que eu vou pegar meu O para a ferramenta circular. Vou pegar minha ferramenta retangular e vou me desenhar um homenzinho. Então eu fiz o quê? Eu acho que eles são diferentes, mas 12 pontos, ele é muito atarracado, ele deve ser meu homem de conta. Ele é muito atarracado. Ele é o ícone de bouncer/conta. Vamos alinhar ele. Agora, se eu tiver esse cara, não quero exportá-lo desta forma porque serão duas formas. Se eu disser File Export agora vamos inspecionar, exportar e outras coisas mais tarde, mas se eu quiser exportar esse cara, ele exportará duas formas separadas para o meu desenvolvedor, e ele vai, por que são duas formas? Normalmente você iria Union e que você poderia exportar, você pode agrupá-lo e exportar. Sem diferença. Vou desfazer isso primeiro. Vou ter duas versões. Este vai ser unido e este será achatado. Eles parecem iguais, você diz: “Qual é a diferença aqui?” trata de coisas como escalonamento que, se eu pegar ambos, segurar, mudar para baixo, dimensioná-los, observar este cujo raio está sendo definido para 12'ish. Você pode ver? Ele tenta manter esses 12, enquanto este é achatado. É como smooshed to bits e eu posso entrar aqui e dizer, o smooshed para pedaços, não sabe mais que é um canto arredondado. Só sabe que essa é a forma que sempre serei. Eu posso ir e personalizá-lo. Posso clicar neste ponto de ancoragem aqui, lá vai você. Ele é meu segurança com cara de lua. achatado o destrói, o que às vezes é útil e a união, porém, seria mais comum. Basta deixá-lo editável. Você pode escalá-lo como se eu desfazer isso. Há uma maneira de contornar todo esse problema com o stroker do lado de fora, ou pelo menos o raio. Você pode usar a ferramenta Escala em vez da ferramenta de seleção, mantenha pressionada a ferramenta Shift. Você pode ver que ele dimensiona o raio e isso. Flatten é para arrumar coisas bagunçadas que você quer então ir e editar em cima da união, como todos os outros operadores booleanos não são destrutivos. Você pode editá-los depois, o que provavelmente é mais comum. Você faz mais disso de qualquer maneira. É isso para este vídeo, te vejo no próximo. 52. Projeto do curso 09 - Como criar coisas: Outro projeto de classe, você está gostando, espero que esteja. Este aqui está preenchendo um pedaço que fizemos, muitas coisas de desenho, basicamente essas coisas aqui, os ícones e os botões. Clique no quadro Shift 2, amplie-o diretamente. Aqui vamos nós. Esses três estão na parte superior com esses dois botões. O que você tem que fazer? Faça botões com carrapatos nele, assim como os que eu fiz. Você pode decidir sobre seus botões. Você não precisa fazer as bordas do rabisco ou eu fiz uma versão de contorno. Você pode usar cores diferentes, pode ser quadrado, mas faça com que elas funcionem. Quero que você crie três ícones. Eu escolhi esses três chatos que estamos fazendo na classe, mas você pode escolher qualquer três. Na verdade, certifique-se de que um deles seja o nav, que é fácil de fazer, mas [inaudível]. Faça três deles e você tem que desenhá-los você mesmo. Você não pode sair e encontrá-los em lugares de ícones. Eu saberei. Eu vi todos eles, cada um deles. Escolha três, qualquer três. O que eu gostaria que você fizesse é, se você tiver um pouco mais de tempo, fazer cinco deles, escolher cinco. Se você é super interessado, eu quero ver você fazer todos eles, ver se você pode quebrar todos esses caras. Agora, eu os coloquei no que acho que é o mais fácil de desenhar. Como um carrinho de compras mais fácil, menus de hambúrguer. Se você vai escolher apenas três, vá para os mais difíceis se você sentir que pode. Mas de qualquer forma, tudo o que eu realmente preciso é de três, mas faça o máximo que puder. Agora, uma pequena nota é quando você está desenhando ícones, ícones não são fáceis. Não se preocupe se você estiver desenhando e todos eles não combinam e parecem um pouco horríveis. Não é isso que o objetivo disso aqui é. O objetivo é praticar o desenho, então eu gostaria de ver aqueles que você fez tanto com a seção de projetos e tarefas, além das mídias sociais. Você não vai ser julgado com base em quão incríveis eles são. Trata-se de mostrar nós, suas artes agora e receber algum feedback de outras pessoas. Agora, um bom começo para desenhar ícones é começar com um quadrado. Pode ser de qualquer tamanho, mas pode ser muito bom começar, desenhar isso e torná-lo uma largura e altura de cerca de 48. É um ícone muito comum projetando o tamanho. Isso significa apenas quando você estiver desenhando nisso, desenhe seu ícone para dentro e use as bordas. Você não precisa ir com bordas completas, mas saiba que essas pequenas unidades. Você vai empilhar esses ícones um ao lado do outro que possa ser útil desenhá-los para dentro, apertar, apenas para dar alguns limites. Quando eu desenhei este, ele parece um pouco largo o suficiente. Eu tentei preenchê-lo e torná-lo como uma pessoa curta e agachada. Você notará também que eu arredondei os ombros. Sinto que ele não é mais um grande segurança. De qualquer forma, três ícones, faça alguns botões, e eu quero que você faça um teste. Teste no seu telefone apenas para ver, os botões são facilmente clicáveis? Eles podem ser vistos? A fonte é grande o suficiente em seus botões? Pode ser menor? Pode ser maior? Só para dar um pouco de gosto do que você faz. Algumas regras aqui são: captura de tela de quais ícones você criou, três, cinco, todos eles, e tirar uma captura de tela da sua página inicial colocada assim. Esse cara Shift 2, não precisa disso. Faça o upload para a seção Atribuições/Projeto e também adoraria ver o que você faz nas mídias sociais também. Ícones de capturas de tela, página inicial da captura de tela, fora de você. Aproveite o desenho, consiga ver o que você realmente cria. Próximo vídeo. 53. Smart Selection e Arrumação no Figma: Olá a todos. Neste vídeo, vamos ver algo chamado Tidy Up. Super incrível, pegue coisas que não são arrumadas. Assista isso. Temos que arrumar. Melhora, porque você é como na verdade eu preciso desse cara aqui. Olha, eles trocam. Ele fica melhor. Tenho alguns cartões. Preciso selecioná-los todos, arrumar vocês. Mas também, você sabe o que eu preciso? Preciso de outro desses. Clique nele. Comando D, Controle D. Há outro e outro. Tão bom. Eu fico um pouco animado com este. Você vai se divertir. Vamos entrar e ver algo chamado Tidy Up e Smart Selection. Vamos começar com o Tidy Up. Se você selecionar algumas coisas, você pode notar que essa pequena linha vem aparecendo. O que ele faz? Vamos clicar nele. Dê um clique. Ele arruma. Isso é o que se chama, Tidy Up. Se eu desfazer isso e o Tidy Up não aparecerá se você tiver apenas duas coisas selecionadas. Ele precisa de três para fazer o espaçamento entre eles. Além disso, não aparecerá se você já for realmente inteligente e tiver um ótimo espaçamento. Se eu tiver todos esses caras separados, não aparece porque é como se eu não precisasse arrumar isso. Funciona também, se eu tiver, digamos que essas três linhas listradas mudem para uma grade quando há uma grade. Há mais de uma linha de coisas. Ou mais de duas colunas. Vamos clicar nele. Ele alinha tudo. Agora não é como tentar criar uma grade completa. Ele só coloca o espaçamento uniforme desta linha, o mesmo com essa. Você pode ver que isso está um pouco fora. Não é exatamente como eu pensei que funcionaria, mas ótimo para fazer linhas individuais. Há um longo caminho. Se eu selecionar isso aqui, arrumado, o ícone deve aparecer. Se estiver acinzentado aqui, uma dessas duas regras que mencionei há um segundo estão quebradas. Eles já estão espaçados uniformemente. Só temos duas coisas selecionadas. Se eu ficar arrumado agora, chegamos a um ponto em que a Seleção Inteligente. Esta é minha parte favorita de toda a Figma. Não importa se você usa o Tidy Up ou apenas os espaçou bem ou se usou o espaçamento horizontal de distribuição. Contanto que eles estejam uniformemente espaçados, você terá essas linhas cor-de-rosa e esses pontos cor-de-rosa. O que há de bom neles? Os espaços aqui no meio. Assista isso. Clique, arraste. Você tem muito controle sobre um grande grupo de coisas. Horizontalmente ou verticalmente. Eu tenho esses, são formas diferentes. Eu desenhei tudo com formas diferentes. De qualquer forma, vamos colocar o espaçamento direto sobre eles. Talvez sejamos até centralizá-los só porque. Talvez até os alinhe de um lado. Não importa horizontalmente, verticalmente. Podemos arrastá-los ou podemos digitá-lo aqui, digamos, usando 16 como seu espaçamento. Vamos descer para oito. Eles não precisam ser exatamente da mesma forma. Claramente, eu não fiz isso. Mas essa nem é a melhor parte. Você é como se houvesse pedaços melhores? Há pedaços melhores. Esses pontos cor-de-rosa são os melhores pedaços. Assista isso. Se eu clicar nele uma vez, clicar no verde, eu sou como, o que vou fazer com você? Preciso que você esteja aqui. Assista isso. Clique, segure e arraste. Olha, ele se move para onde eu quiser que ele vá. Imagine isso com cartões, listas e ícones. Estamos fazendo retângulos só para ir rápido e ter a ideia. Ele fica ainda melhor. Você é como, de jeito nenhum. Sim, caminho. Assista isso. Digamos que eu tenho isso. Eles estão todos uniformemente espaçados porque todas essas coisas aparecem chamadas Seleção Inteligente. Seja como, na verdade, eu preciso de outro desses. Clique nele e pressione Command D. Isso faz com que você seja outro, e se eu precisar de outro amarelo aqui? Comando D, Controle D em um PC. Ele só adiciona outro. Mencionando sua grande lista de coisas em cartões. Listas e cartões, não consigo pensar em mais nada. Você pode apenas Comandar ou Controlar D eles e ele fará um novo e separará todo o resto. Arrume, separe, mas eles ficam juntos. É apenas uma maneira de arrumá-los. Não importa se você usa o Tidy Up ou o espaçamento vertical horizontal, desde que estejam uniformemente espaçados, essas coisas aparecem. Com eles fora, você pode ver que eles não estão lá. Vamos fazer alguns outros exemplos da vida real. Coisas que podem te pegar é, eu tenho esse ícone, este e este. Este aqui, se eu fizer fila inteligente, funcionou. Na verdade, funcionou bem para o meu. Digamos que adicionemos um círculo à nossa chaminé. Essa é a minha fumaça saindo dela. Porque esses caras não estão agrupados, então eu tenho que arrumar, faz coisas estranhas. Se você está tendo problemas e seu ícone é feito de algumas partes, certifique-se de que seja um booleano como aprendemos, ou é um grupo, ou é um quadro. Apenas algo que o amarre. Estes são todos amarrados e este aqui são três linhas. Vou transformá-lo em um quadro. Vou chamar isso de Mobile Nav. Agora eu posso usar o espaçamento inteligente e então eu recebo isso. Você pode imaginar especialmente se estiver fazendo o teste para a área de toque. Eu sou como, na verdade, quero mover isso por aí. Agora você vê, você é como sim, agora eu entendo. Poderia ser só eu. Fico muito animado com esse. Tão bom. A próxima coisa que vou fazer é mostrar-lhe, é bom para o tipo também para menus. Vou digitar em Casa. Em vez de fazê-los em uma caixa de texto, na verdade, farei quatro deles. Duplicado. Vamos dar uma olhada. Casa. Vou acelerar isso. Vou fingir que há mais. Esse é o único que tenho para o meu aparelho de navegação. Digamos que você tenha um monte de linhas estão todas em pequenas caixas de texto separadas e você é como arrumá-las. Na verdade, uma vez que eles estejam arrumados, posso mudar o espaçamento? Você pode. Então posso clicar em um deles? Selecione todos eles. Os pontos cor-de-rosa nestes são bem pequenos. Lá estão eles. Olá? Então você pode movê-los. Adicione mais deles. Clique em um Comando ou Controle D. Fora de algo mais complicado muito rápido. Vou trazê-lo de volta muito rápido para outra pequena dica de bônus. Você me viu nomeando isso? Você provavelmente não fez, foi muito rápido. Mas acho que nomeei o primeiro, vamos mudá-lo para A. Eu seleciono tudo, eu copio. Posso clicar em Tab no meu teclado para descer para o próximo. Tab novamente. Você não precisa clicar duas vezes com o mouse, entrar , colar e o hovel. Eu criei esses. Eles precisam ser grupos como nossos ícones, combiná-los. Eu os transformei em quadros porque os quadros são incríveis. Mas se eu selecionar todos esses, achei que eles eram próximos. Você pode ver que o espaçamento deles está próximo. Mas não é. Clique nisso. Perfeito. Agora eu entendo isso. Sou ótimo. Se eu decidir, na verdade, eles são todos reciclados, mas espere lá. Eles estão todos em quadros, o que os tornou diferentes. Posso selecionar todos eles. Todos eles foram bem espaçados e posso dizer, na verdade, preciso de outro deste. Comando D, Controle D. Provavelmente você precisa ter todos selecionados. Você, Comando D. Eu posso dizer, na verdade, você vai lá. Olhe para isso. O que ele faz, ele empurra o quadro. Você pode ver o quadro externo em uma das peculiaridades. Provavelmente há uma maneira de consertar isso. Não consigo descobrir. Qual é o tamanho da minha página? A largura disso é a largura de 375. Vou dizer que você volta para 375 totalmente. Obrigado. Eles não terão problema se o seu, como o meu design, empurrar para fora do quadro, ele surtar um pouco. O que você acha? Me avise nos comentários. Essa é a sua coisa favorita? Qual é a sua coisa favorita até agora? Me avise nos comentários abaixo. Vou verificar de volta. Vou ver. Isso é tão bom quanto fica? Ou há outras coisas que você gosta, desculpe Dan, essa outra coisa. A casa flamejante. Isso é o Tidy Up, que é bom e simples. Então a Seleção Inteligente, que é um pouco complicada, mas eles precisam ser espaçados uniformemente primeiro e provavelmente agrupados ou presos em um quadro ou um componente que faremos em um pouco. Espero que você tenha gostado. Vejo você no próximo vídeo. 54. Preciso saber usar o Illustrator com o Figma: O que estamos fazendo aqui? Isso não é Figma. Este é o Illustrator. Preciso conhecer o Illustrator para trabalhar na Figma? A resposta é não. Você pode chegar muito longe com Figma, desenhar coisas, desenhar ícones, desenhar logotipos , ilustrações, tem todos os conceitos básicos lá dentro, mas haverá um momento em que realmente você precisa fazer algumas coisas personalizadas. Vamos demonstrá-lo um pouco neste vídeo apenas para mostrar a você e depois mostrar como é fácil virar para frente e para trás entre Figma e Illustrator. Não, para ser um designer de UX, você não precisa conhecer o Illustrator, mas é uma ferramenta útil. Deixe-me mostrar o porquê. Vou mostrar apenas um pouco do Illustrator, para mostrar onde Figma pára. Você pode ser pego com Figma para fazer muito do que o Illustrator faz, mas não é feito para isso, então o Illustrator pega rapidamente e você é como, na verdade, talvez eu precise aprender o Illustrator. Se você já tem as habilidades, elas não são desperdiçadas. Se você não tiver as habilidades, você pode participar do meu essencial do Illustrator ou cursos avançados do Illustrator, confira essas habilidades. De qualquer forma, vou desenhar isso e vou, eu acho, apenas mostrar algumas das coisas que fazem do Illustrator por que eu volto a ele, especialmente para design de logotipo ou ícone. Vou ampliar isso. Este é um desenho que eu fiz. É uma das coisas que fazemos em um dos cursos. Eu desenhei e só vou construí-lo com círculos. Você espera lá. Só estou fazendo um monte de círculos. Vamos continuar novamente. Acabei de ter um monte de círculos. Deixe-me mostrar a camada de fundo desligada. É só útil porque você pode selecionar todos eles. Uma das minhas ferramentas mais favoritas é a ferramenta de construtor de formas. Em um dos vídeos anteriores, usamos um Pathfinder booleano aqui e tudo bem. Construtor de formas, você está pronto? Vamos manter pressionada a tecla Option em um Mac, tecla Alt em um PC e simplesmente arrastar as coisas que não queremos. Veja como isso é rápido e bom. Agora que eu quero colorir, vou passar e escolher algumas cores aleatórias para esta. Vamos começar com um leve. Este ouvido aqui, em vez de segurar Opção, segure nada e você pode juntar as coisas. Olhe para isso. Eu trabalhei no meu caminho através das cores. Apenas os padrões. Bom para uma raposa. Você impressionou? É divertido. Adoro o Illustrator. A razão pela qual é, um designer de UX, ele ainda faz parte de todas as ferramentas que você precisa. Selecione tudo. Não vou ter derrame. O mais legal sobre isso é, assista isso. Trabalhar dentro da Figma ou fazer a transição para frente e para trás é super simples. Eu selecionei tudo, copiei, e vou pular na Figma e vou colá-lo. É um pouco grande. Mova para cá. Mas você pode ver, vem como um quadro, o que é incrível. É ainda mais incrível porque posso entrar nesse quadro e tudo ainda é editável. Posso fazer ajustes aqui. Você pode fazer seu trabalho de desenho aqui. Botão OK aqui. Você ainda pode fazer ajustes, mas também posso passar e realmente começar a escolher minhas cores corporativas. Você espera lá. Vou colorir. Lembre-se, se tivermos cores, preciso de outra cor para ficar mais escura. Posso clicar neste e, na verdade, apenas quebrar o link e ir realmente. Vamos ficar borrados um pouco mais escuro para este. Trabalhar entre o Illustrator e a Figma é super fácil. Basta copiar e colar, você não precisa exportar, e ele permanece editável, escalável e bom. Não temos motivo para essa raposa. Está aqui. É isso. Talvez depois deste curso, seja meu treinamento ou de outra pessoa, vá conferir o Illustrator se você ainda não o fez. Se você é um mestre do Illustrator ou pelo menos talvez um autodidata, confira meu curso avançado do Illustrator. No próximo vídeo. 55. Dicas e truques para usar imagens no Figma: Olá, todos. Este vídeo tem tudo a ver com imagens. Vamos ver as várias maneiras de importá-los, como ajustá-los, várias imagens e como brincar com coisas como exposição, como coisas básicas do Photoshop para que possamos empurrar isso em segundo plano. Parte disso é um pouco pouco intuitiva, então fique por aqui e deixe-me mostrar o que fazer. Nós cobrimos um pouco de imagens antes. Vamos passar por isso, todas as coisas boas e úteis para saber. Trazendo imagens, você provavelmente já viu que há cerca de um zilhão de maneiras. Anteriormente, não tenho certeza de como fizemos isso, mas há uma imagem de lugar, ou você pode ir até aqui e ir para colocar a imagem. É a mesma coisa. Ou o atalho, é o que eu mais uso. Vamos trazer uma imagem, apenas uma. Quando você traz uma imagem, você pode clicar uma vez e ela vem em tamanho real, o que é muito grande, e agora está bem. Isso pode estar bem, e você pode querer vê-lo em tamanho real. Vou usar meu atalho, que é Command Shift K em um Mac e é Control Shift K em um PC. O que eu costumo fazer é quando você está trazendo uma imagem é arrastá-la para fora. Vou arrastá-lo para aqui. Você pode dar o tamanho certo. Tenha cuidado, porém. Mantenha pressionada a tecla “Shift” para obter a altura e a largura proporcionalmente. Vamos trazer várias imagens. Vou usar meu atalho novamente, Command Shift K, Control Shift K em um PC. Vou trazer todos eles. Vamos lá, pessoal. O que você notará é que seu pequeno cursor será atualizado eventualmente. Há sete imagens. Vou segurar “Shift down” e apenas trazê-los nos tamanhos certos. A coisa é apropriada para isso. Girando, já falamos sobre antes, mas vamos reiterar. Se você tiver sua ferramenta de seleção selecionada e apenas mouse neste canto mágico, você pode clicar e arrastar. Segure “Shift”, ele irá encaixá-lo. Você pode digitá-lo aqui. Você pode ter 180 graus, muito obrigado. Agora, embora isso não seja o Photoshop, você pode fazer algumas coisas básicas aqui que lhe dão o suficiente para porque o que eu quero fazer é que eu quero, digamos que eu gosto dessa imagem aqui, mas eu quero iluminá-la. Quando eu seleciono aqui em Preencher, é aí que a imagem acaba, posso clicar nela e me livrar de todas as amostras de cores e recebo ajustes relacionados à imagem. Posso brincar com a exposição. Vou aumentar a exposição um pouco. Você pode fazer coisas básicas. Não vamos cobrir tudo. Mas saturação, preto e branco, lá vai você. Altere a temperatura se for talvez um pouco azul demais, um pouco amarelo demais. Tenha uma brincadeira com isso. Mais uma vez, não títulos do Photoshop, alguns dos bons conceitos básicos aqui para atualizar uma imagem. Outra maneira de trazer uma imagem é ter uma forma já. Digamos que eu tenho esse círculo aqui, pode ser um retângulo. Quando for selecionado, posso dizer, na verdade, não quero que você tenha um preenchimento dessa cor primária. Vou quebrar esse link. Vimos antes, as imagens são preenchimentos. Eu posso simplesmente ir em frente e mudar a cor desse preenchimento de gradientes sólidos, não para gradientes lineares ou radiais, mais ótimos que sejam, posso ir para a Imagem e pegar essa pequena coisa xadrez e você diz, é como um lugar suporte. Você pode dizer que escolha a imagem e vamos por esse caminho. É ótimo se você já tem formas em seu documento, como eu tenho. Zombado, escolha. Vou excluir essas coisas agora e começar a seguir em frente. Há alguns lugares apenas para clicar no botão, há um atalho, você pode arrastá-lo da sua área de trabalho. Eu cubri esse? Eu não fiz. Se eu fizer esse problema é que ele vem em um tamanho gigante. Se você usar um tamanho adequado, basta arrastá-los da janela de busca. Aquele último lá onde apenas clicamos em uma forma e entramos no preenchimento e dissemos que você é uma imagem agora. Farei mais um. Estou escolhendo isso aleatoriamente. A última coisa que quero fazer antes de irmos é me livrar desse fundo colorido, e vou combinar as coisas que acabamos aprender um pouco porque quero uma imagem de fundo, pode ser uma caixa de heróis. Estou usando isso para o site completo. Vou pegar, você tem duas opções aqui. Quero usar, digamos, essa imagem. Isso não é uma má maneira, mas é uma maneira. É natural como você pode fazer isso. Vou colocar isso aqui, e vou torná-lo maior. Se você segurar Shift, ele o fará proporcionalmente, que normalmente é bom, mas o que eu quero fazer é não segurar nada porque você pode ver o que ele faz? Naturalmente, ele quer ser responsivo, então eu posso arrastá-lo até o tamanho desta janela, e qualquer coisa [inaudível], basta movê-la para trás. Onde está isso? Ele está lá. Vou clicar com o botão direito do mouse nele e dizer, mover para trás ou usar esse atalho de comutação, e então você começa a trabalhar dessa maneira. Há uma imagem aqui na parte de trás, está tudo bem, mas é um objeto que pode ser movido. Não há nada de errado com isso. Mas, na verdade, é mais fácil simplesmente trocar o preenchimento do quadro real em si. Você não precisa. Mas o mais legal sobre isso é aqui, página inicial que eu selecionei. Novamente, vou quebrar o link para esse estilo porque na verdade eu quero que esse preenchimento seja uma imagem. Você precisa brincar com ambos porque você receberá muitas coisas da comunidade que está configurada dessa maneira e não é intuitiva, mas é útil. Vamos escolher a imagem, e vou encontrar essa. Qual deles é? Agora lá. Funciona da mesma forma. Já tínhamos uma forma e ela a preencheu, mas o mais legal é que não há nada nas minhas camadas, está arrumado, e mesmo que a tenhamos aplicado a esta página inicial de nível superior, ela é realmente executada na parte inferior. Vou voltar para onde fiz isso antes das configurações da imagem. Eu vou dizer, na verdade, exposição é uma boa maneira de diminuí-la. É o mais óbvio. O que acho útil, porém, muitas vezes é reduzir um pouco a exposição, mas não é tanto tudo estar em baixo, é principalmente os destaques diminuindo para remover um pouco desse forte contraste. Você pode simplesmente brincar com eles, decidir onde você quer que isso esteja. Vou retirar a saturação também, nem tudo. Eu sempre quis fazer essa coisa de fundo, e você é como, eu não consigo ver o texto. Isso é o que vou fazer entre os vídeos. Vou pegar um diminuído, torná-lo branco só para que ele se destaque no fundo. Essa foi minha rápida passagem por todas as coisas de imagem em um vídeo. Vamos começar a ter mais imagens no próximo vídeo. 56. Como mascarar ou recortar imagens no Figma: Olá, todos. Como você pode ver por essa saída confusa, vamos ver o mascaramento/corte. Desta forma, estamos mascarando e carrapatos dentro de formas. Há algumas maneiras diferentes pelas quais Figma pode fazer isso por você. Deixe-me mostrar os caminhos. Primeiro, uso a palavra máscara e corto intercambiavelmente aqui na Figma porque eles significam a mesma coisa para Figma. Figma chama isso de colheita, você pode chamá-lo de mascaramento, mesmo aqui. A primeira coisa a notar é a diferença entre cortar e usar preenchimento. Essas imagens que compramos no último vídeo, nada para elas, apenas as despejam aqui. Por padrão, se formos para o preenchimento e vamos para imagens, esta é a opção, preencha. Vamos olhar para a colheita em um segundo, mas o preenchimento faz o corte. Isso pode ser suficiente para você. Se eu não tiver nada selecionado, tenho minha ferramenta de seleção. Eu posso pegar o lado de fora destes e isso pode ser uma colheita suficiente para você. O problema é que não consigo mover para cima e para baixo. Posso exibir de forma responsiva, mas isso pode ser suficiente. Vamos mudar agora para a colheita. O que isso significa? Basicamente, ele mostra os extras. Agora posso trabalhar na borda de corte de forma intercambiável a partir da borda da imagem. Agora, agarrando a borda da imagem, você precisa segurar “Shift” e a largura, você fica um pouco mole. Quando eu entendi isso é como, sim, isso faz sentido? Como faço um duplo clique? Eu estava tentando ajustar a imagem. Figma precisa adicionar, eles podem já fazer, algumas alças aqui para saber que você pode clicar e arrastá-lo. Esse é meu conselho de qualquer maneira. Mas você pode clicar em segurar e arrastá-lo, segurar “Shift”, você pode girá-lo aqui também, você pode ver? Isso é recorte. Agora, há algumas maneiras de fazer o corte. Deixe-me quebrá-los porque, você vai tropeçar em todos eles. São três maneiras de mascarar. Uma maneira que muitas vezes acontece é que você fará isso com uma forma. Eu chamo isso de método de máscara de duas formas. Eu inventei esses nomes. Você não vai conseguir encontrar isso de qualquer maneira. Vou pegar a ferramenta polígono jogar fora segurar “Shift”. Agora, a maioria dos programas, você teria a forma na parte superior, você selecionaria a imagem de fundo. Eu selecionei os dois e você apertaria essa opção, viu isso lá? Ele sabe, ele não está lá, ele está lá quando você tem duas coisas selecionadas, que é o botão fazer máscara. Boom, não o que eu quero. A imagem tem que estar na frente. Quem remove o atalho para levar as coisas para a frente? Você pode clicar com o botão direito do mouse ou usar um colchete. É o segundo suporte quadrado. Aqui está você. Ambos estão lá, você está se escondendo por baixo. Imagem na parte superior, selecione ambas as máscaras finas. Essa é uma maneira de fazer isso e é muito bom. Você ainda pode entrar lá. Posso clicar duas vezes. É diferente, são dois objetos separados aqui no painel de camadas. Há um grupo de máscaras, há minha imagem e minha forma. É por isso que eu chamo de máscara de duas formas. Você precisa de dois, você precisa de uma imagem e alguma forma para mascará-la. Você ainda pode ajustá-los separadamente. Lá vai você, clique aqui, clique na minha imagem. Esse é o meu método de duas formas. A outra maneira de fazer isso é minha primeira máscara de forma, outro nome que eu inventei. Você desenha a forma e, como fizemos antes, clicamos nisso, fizemos isso um pouco. Clique no preenchimento. Não queremos ser cinza, não, vemos esse cinza. Vamos para imagens. Clique lá, escolha uma das minhas imagens e dominamos suas, mas estamos usando esse preenchimento. Você pode trocá-lo agora e ir para a colheita e você é como isso é diferente disso? É principalmente a ver com aqui que, você vê essa grande construção aqui, esse é o meu método de duas formas. Este aqui é a minha forma primeiro, fazemos a forma e apenas editamos um preenchimento para ele. É mais arrumado aqui, e funciona um pouco diferente. Eles fazem a mesma coisa versus se eu clicar duas vezes nele . Na verdade, não quero clicar duas vezes nele. Eu quero ir até aqui, abrir minha pequena imagem e você pode ver, eu posso ver a borda da minha forma e lembrar o magicamente que você só queria saber, pegar as bordas estão aqui, segure “Shift”. Você chega ao mesmo lugar. Você pode ver, mas uma duas formas, provavelmente a maneira mais fácil de dar a cabeça dessa maneira é uma remodelação, pode ter um preenchimento. Se você alterar esse preenchimento do preenchimento, há dois preenchimentos, excelentes, na colheita, então você pode ajustá-los separadamente ou levá-los, esse tipo de coisa. O terceiro caminho é o jeito que fizemos no início. Isso é o que eu chamo de safra de baunilha. Estou dando esses nomes, provavelmente não é útil, mas a cultura de baunilha está trazendo imagem. Vamos fazer isso juntos. Nós fizemos no início lá e eu trago este, arrasto para fora, segure “Shift”. Em vez de desenhar a forma primeiro, como fizemos aqui, e depois preenchê-la, já a temos. Temos uma forma que é um retângulo, tem um preenchimento, diz-se que preenche, configuramos para cortar e, em seguida, podemos ajustar a forma e a imagem. Três maneiras de fazer essa coisa semelhante. Você me pegou? Duas formas. Comece com a forma. Comece apenas com a imagem e mude-a para cortar. Esses dois exigem que você altere o preenchimento para cortar. Este aqui é mais como uma máscara tradicional onde você tem algo mascarando a coisa por baixo, mas neste caso as coisas no topo, estranha Figma. Outra coisa é usar essas técnicas que você pode com texto. Meu texto Roboto. Como cheguei a Roboto? Bem, Roboto é. Atualizações de tamanho da fonte, “Command Shift” e a tecla de parada total. Eu fiz isso antes? Tenho certeza que sim. “Command Shift” em um Mac ou “Control Shift “em um PC, e você pode fazer isso de qualquer maneira. Vou ter dois deles. Você pode fazer isso o método de duas formas. Posso dizer que você como a imagem na parte superior ou inferior. Vamos fazer isso com outro. Vamos fazer esse cara. Imagem na parte superior, na parte inferior, está certo. Imagem na parte superior usando colchete, selecione ambos, faça a mesma coisa. Máscara, boom. Eu ainda posso entrar lá, clicar duas vezes nele, tenho minha forma o interior. Ainda consigo editar o texto. Provavelmente é mais fácil fazê-lo aqui. O texto é legível? Acontece que não é. Presumi que seria. Espere lá em cima, Dan. Nesses vídeos originais, fiquei como se você não pudesse alterar o texto. Você realmente pode. Voltarei do futuro e vou te mostrar como. Obrigado, Victoria Bardo, que está revisando o curso e diz, você pode mudar totalmente o texto então, então lá vamos nós, vamos em alguma coisa. Como antes, há um método de duas partes onde há uma imagem e é preciso para garantir que a imagem esteja no topo. Ao selecioná-lo, vou usar meu colchete para trazê-lo para a frente, selecionar os dois e, em seguida, clicar no ícone Máscara. Nós temos isso, agora para editar o texto, você precisa estar nesta parte da sua camada, tem as letras que eu preciso ajustar e apenas mudar para o tipo dois. Foi o que eu perdi. Agora eu posso entrar aqui e dizer, agora é Ben. É assim que você ajusta o texto atualizando a parte da imagem é clicar nesta parte, é a imagem que eu trouxe, pegue minha ferramenta de seleção e posso movê-la clicando em qualquer lugar dentro da caixa delimitadora e posso ajustar o tamanho dele aqui também. É assim que ajustar o texto e a imagem. Agora, há outra maneira, esse é o método de duas partes, você tem uma imagem e tira separadamente e se junta a elas usando esse ícone de mascaramento na parte superior. Do outro lado, mais maneira de baunilha é pegar a ferramenta de tipo e é apenas clicar no lado aqui. Vamos digitar isso. Agora, em vez de ter duas coisas separadas e combiná-las, o que podemos fazer é voltar à minha ferramenta de seleção. Eu o selecionei. Podemos entrar em preenchimento e clicar na cor. Vou dizer de um sólido, vou para a Imagem, e vou clicar em “Escolher imagem” e depois vou escolher uma imagem. Podemos fazer isso dessa forma. Lá vai ele. A mesma coisa de antes é, na verdade, um pouco mais fácil de ajustar o tipo, porque você pode clicar duas vezes nele e ajustá-lo. É apenas uma maneira diferente de fazer isso. A diferença aqui é, assista a isso e você vê como ele se ajustou, que é quando eu digito O, pode ver a imagem se expande para preenchê-la. Enquanto esse método aqui, a imagem permanece onde está, não importa o tamanho que isso leva. Vamos excluí-lo. Você pode ajustar a imagem neste. Vamos clicar nele com esta ferramenta de seleção. Quero ver o preenchimento e, em vez de onde ele diz imagem e preenchimento, ele está se expandindo. Preencher significa que ele vai se expandir e contrair dependendo do tamanho do tipo, vamos obter uma colheita e agora você terá um pouco mais de controle como tínhamos nessa opção aqui. Não há jeito certo ou errado, mas posso ajustar o texto, posso ajustar a imagem de fundo. A imagem de fundo aqui, como as outras máscaras. Mais uma vez, talvez seja um pouco estranho. Não há caixa delimitadora ao redor do lado de fora. Basta clicar em “Shift” pressionado lá vai. Isso é mascarar com texto. É uma pequena atualização do meu conhecimento também. Lá você vai para o próximo vídeo. 57. Imagem e plugin gratuitos para o Figma: Olá, todos. Neste vídeo, vou mostrar alguns ótimos lugares para obter imagens gratuitas comercialmente utilizáveis, e também mostrarei o plugin correspondente. Para que possamos clicar em formas aqui e ir, sabe o quê? Eu quero este, bom demais. Deixe-me mostrar como tudo funciona. Imagens gratuitas. O grande lugar para ir é unsplash.com. Eles são comercialmente utilizáveis e podem ser usados profissionalmente, comercialmente, para educação. Muito incrível o que você pode obter nos dias de hoje. Não sei como isso funciona. Bem, eu sei como funciona. Eles são pagos por meio de anúncios e vendas adicionais para os pagos. Mas eu não sei, é bem espetacular. Unsplash and Pexels é outro, se você não consegue encontrar o que precisa no Unsplash. Se você está trabalhando para uma grande empresa, faça com que eles verifiquem os detalhes corretamente, mas você verá aqui a licença Unsplash. Está bem claro o que você pode ou não fazer com eles. Você pode fazer um pouco e eles apreciam a atribuição. Pode ser alguns que você diga: “Ei, se este fosse o fotógrafo, obrigado pela imagem gratuita.” Há muitos outros lugares, mas digamos que esses dois sejam realmente bons no momento. Seria ainda mais prático se houvesse um plugin que os conectasse, porque baixando-os, não vamos cobrir. Você entra nele, clique em download. Mas imagine se houvesse um plugin direto nele. Imagens gratuitas, vamos classificar por plugins. Estou no pote comunitário. Aí está, Unsplash e você pode ver onde há muitos downloads. Já o instalei. Cara, é fácil desinstalar e instalar essas coisas. Clique nele uma vez e ele se foi. Dê um segundo, na verdade, vamos instalar este também. Não sei se está instalado ou desinstalado, vamos conferir. É tão fácil então. Você tem plugins e sim, um se foi e esse está de volta. Pexels. Espero que funcione da mesma forma. Eu usei cargas Unsplash. Vamos dar uma olhada. Eles funcionam da mesma maneira? Sim, clique uma vez, eles instalam. Se você tiver uma forma primeiro, vamos excluir essa. Pode demorar um pouco para não continuar esmagando isso porque às vezes leva um pouco para aparecer aqui. Digamos que eu tenha essa seleção e digito, fones de ouvido, ela entrará nela. Aqui vamos nós. Clique uma vez e ele deve entrar lá. Tão bom. Isso é imagens gratuitas. Procure o plugin, provavelmente há um para praticamente tudo. É isso para este vídeo. Vejo você no próximo. 58. Você precisa do Photoshop para design de UX no Figma: Olá a todos. Neste vídeo, vamos falar sobre eu preciso do Photoshop como designer de experiência do usuário? Spoiler, acho que você sabe. Mas vamos falar sobre como eles trabalham juntos. O que há de bom na Figma e o que você poderia fazer no Photoshop. Vamos cobrir coisas como reduzir imagens prontas para Figma. Veremos imagens de corte de argila. Boom. Jogando-os na Figma. Aqui estão meus pequenos fones de ouvido aqui, cortando pessoas e provavelmente parte da monotonia e deixe o Photoshop tirar muito do trabalho por como estender fundos. Você tem lugares para texto e logotipos e preenchendo quadros de imagens de heróis. Tudo isso e muito mais neste tutorial. Vamos pular. Para começar, vamos responder à maior pergunta preciso de habilidades do Photoshop para me tornar um designer de UX ou designer de UI? Minha humilde opinião é sim. É só minha opinião. É muito difícil se afastar. Figma faz algumas coisas básicas. Nós fizemos como, clique em uma imagem, entramos aqui e você pode fazer como saturação, exposição e outras coisas. Isso é o que o Photoshop faz também. Mas é o mascaramento. Podemos fazer mascaramento básico, o que fizemos neste curso, mas simplesmente não vai muito longe. A outra coisa para o Photoshop é redimensionar imagens realmente grandes. Temos trazido essas imagens de genomas e apenas diminuí-las. O tamanho do arquivo é muito grande, então os protótipos começam a funcionar mal. Se você tem uma maquete muito grande, todas essas imagens fazem as coisas mais lentas. A outra parte é que quando você vai ser contratado se você ainda não estiver contratado e estiver procurando um emprego, muitas vezes haverá publicidade como, ei, papel de designer de UX deve ter, e Figma pode ser a ferramenta UX ou ela pode ser XD ou Sketch. Eles são todos muito parecidos. Eu tenho um curso XD se você quiser fazer isso também. Eles também terão provavelmente habilidades no Photoshop. Há alternativas gratuitas para o Photoshop. Gimp é um mal nomeado. A outra coisa a considerar é como você trabalha com o Photoshop? O que ele não faz é que você não pode importar arquivos do Photoshop. Não posso ir para Meus Rascunhos e ir Importar e ir PSD e clicar em “Abrir” porque não funciona no momento. Verifique sua versão. Porque o que muitas vezes acontece, este pode ser você agora. As pessoas estão usando o Photoshop para fazer o que estamos fazendo neste curso e faz tudo bem e muitas pessoas fazem. Então eles entregam a alguém como eu ou o novo você e eles dizem : “Aqui está você. Eu fiz isso.” Você gosta de protótipo essa coisa, não há como, Open Photoshop file ED prototipagem. Você tem que reconstruí-lo, o que não é divertido. Isso não funciona no momento. Verifique se há um plugin, não há no momento. PSD para Figma, fique de olho nisso se você se deparar com ele. Pode haver uma solução em algum estágio. O que acabamos fazendo é no Photoshop, apenas fazendo coisas e depois exportando para a Figma. O que eu quero fazer é passar por alguns exercícios do que seria incrível. Algumas das coisas boas únicas sobre o uso do Photoshop para entrar na Figma. Agora isso vai ser um pouco turbilhão. Não é um curso do Photoshop. Eu só quero jogar algumas coisas porque quero mostrar como você obtém arquivos para as pessoas que são experientes e as pessoas que não são eu quero tentar vender meu curso de Photoshop. Tenho um produto essencial e avançado do Photoshop. Se você tem alguma experiência autodidata, até mesmo o essencial ainda é muito bom para nosso pessoal autodidata. Se você é bastante avançado, confira meu curso avançado. Vamos fazer alguns conceitos básicos. O primeiro é apenas redimensionar imagens porque elas estão chegando muito grandes. Se pegarmos esse, são 1,4 megabytes. Vou editar no Photoshop. Mais uma vez, não vou te dar um tutorial completo. Se você quiser, “Ei, ele foi muito rápido.” Eu não quero entrar em muito tutorial aqui. O básico é se você for para Arquivo e estiver procurando por isso Exportar como. Este é o incrível para reduzir o tamanho do arquivo no formato certo. Na verdade, eu quero que tenha 500 pixels de diâmetro porque está entrando em uma dessas miniaturas. Vai ser um JPEG e talvez seja 60%. Em seguida, você o exporta. Vou enfiar o meu na minha área de trabalho. Você pode salvar isso. Estou tentando mantê-lo bom e, em seguida, você pode simplesmente importar esse arquivo. Vamos comparar os dois. Vamos pegar outro. Onde está minha área de trabalho? Aí está. Esse mesmo arquivo. Perfeitamente fino em termos de tamanho. São 38 kilobytes, que é 0,038 megabytes, [inaudível] que é 1,4. Você faz isso muito, apenas arrumando imagens, tornando-as menores. Provavelmente a maior coisa é quando você está tentando fazer mascaramento. Ele só faz isso tão bem no Photoshop. Vou usar este aqui. Vou despejá-lo no Photoshop. Vou renomear a camada de fundo para a camada 0. Há esse doce, olhe, Remova o plano de fundo. Quão bom é isso? Adoro mostrar às pessoas que usaram o Photoshop por algum tempo esse botão. Há muitas dessas coisas rastejando no Photoshop agora. Se você não deu a si mesmo algum desenvolvimento profissional no Photoshop ou se você fez, meu legal, é alto cinco você, talvez você já tenha feito. Pronto, high-five. Lá vai você. Mas se não, mesmo que não sejam meus cursos, passe pelo que há de novo no Photoshop. Está no site da Adobe, ele lhe dará uma versão desnatada do que sai desde 2004, quando você se atualizou pela última vez. Como eu coloco isso na Figma agora? Algumas maneiras. Do jeito que acabamos de fazer, provavelmente é uma boa maneira porque isso tem transparência. Tudo o que realmente precisamos fazer aqui é ir, na verdade, o tamanho pode ficar menor, não 100, é muito pequeno. O formato só precisa ser um PNG. Este trará a transparência e isso é realmente o que queremos. termos de tamanho não importa. Vou exportá-lo, salvá-lo na minha área de trabalho. Confunda essa área de trabalho e, em seguida, na Figma, vou ir Command Shift K ou Control Shift K, e onde estamos? Basta parar. Onde estava aquele cara? Entra. [inaudível] não tenho certeza do que eu fiz lá. Clique uma vez, lá vamos até 1000 pixels é bem grande. Use o K para dimensionamento. Por que, você vê isso. Já está lá. Farei uma pequena demonstração apenas para passar por ela e antes. É um pouco mais fluido do que os ums e as probabilidades, mas de qualquer forma, eu o coloquei entre algumas coisas aqui para ir, e para cima. Apenas tente parecer legal. Isso não funciona em cada um, ao contrário, descobri que esta é que, à noite, compras páginas para tentar impressionar você, não funciona em todos eles tão bem quanto isso. Outro, vamos para as pessoas. Nós vamos estar, onde está? Vamos cortar esse cara. Um dos recursos incríveis do Photoshop é o Select Subject. Você não clicou nele, você deveria, olhe para isso. Novamente, não funciona em todas as pessoas o tempo todo, mas vou fazer isso e máscara de camada, tão bom. Eu poderia voltar para o meu, essas coisas para retocar. Eu poderia trabalhar nessa máscara mais botão. O que poderíamos fazer é voltar ao nosso File Explore As e fazer um PNG. Se você apenas zombar das coisas rapidamente e não como oficial, você pode dizer com o botão direito do mouse nisso, na Máscara e, para dizer, vamos aplicar essa máscara de camada. Ele se foi, é edição destrutiva. Tudo bem. Só posso usar minha ferramenta para festas. Selecione ao redor, perdi a inicialização, e basta copiar, apenas usando o Comando C ou o Controle C em um PC e eu vou colá-lo. Vamos colá-lo em algum lugar aqui. Quão bom é isso? Olhe para as bordas. Não ficou tão bom no Photoshop. É incrível. Não acredito em como é bom. Você entende a ideia. Uma última coisa que é super útil para pessoas que estão usando o Photoshop que podem não saber sobre isso, é como o conteúdo fora das coisas em escala, eu quero tirá-lo de volta daqui, é que você pode ter uma imagem que apenas precisa ser maior. Vou virar este por aí porque essa é a imagem que decidi usar porque estava nessa lista. Vamos fazer este. Vou adicionar este ao Photoshop. O problema com essa imagem é que preciso de mais fundo, acontece o tempo todo. Quando você coloca texto nele, você precisa subir o topo lá. Há algumas maneiras de fazer isso no Photoshop. Vou usar a ferramenta de corte, que é o atalho C. Vou ativar o Content-Aware. Content-Aware é incrível no Photoshop. Faça isso muito tempo olhando para os vários Content-Aware. Há cerca de quatro ou cinco deles. Se eu fizer isso e clicar em “Enter”, você está pronto? [inaudível]. Não é ótimo. Mas vai se dar bem por colocar textos por cima. É realmente incrível dessa forma. Há outra maneira de fazer isso, se isso não funcionar bem ou você conseguir coisas estranhas, vou usar essa ferramenta de colheita novamente. Vou desativar o Content-Aware. Só vou torná-lo maior. Porque digamos que você queira um banner de ervas daninhas realmente grande no topo da nossa imagem de herói, ao longo do topo da sua imagem de herói. Vou usar essa ferramenta de letreiro retangular e pegar um pedaço dela e depois ir para Editar. Vou usar o Content-Aware, mas este é o preenchimento sensível ao conteúdo. Não, não o que eu quero. Vou clicar em “Escape”. Quero acertar, “Content-Aware Scale”, aquele lá. Eu disse, Fill. Lá vamos nós. Escala. Olhe para isso. Segure Shift, enquanto você estiver arrastando esse canto. Você precisa apenas gostar de tornar as coisas maiores. Tem que ser pano de fundo, o material embaçado, não funciona em tudo, mas isso é bom. Novamente, eu poderia simplesmente copiar e colar isso agora porque eu realmente não fiz nenhuma transparência. Copie para a Figma, talvez na minha versão para desktop. Eu tenho essa bela imagem de herói grande. Estou bagunçando as coisas. Vamos mudar para, você tem a ideia. Vamos arrastá-lo para fora, deve ter uma forma estranha. Vou colar e vamos em linha reta e isso acontece. Veja como somos bons. Algumas habilidades doces de photoshop combinadas com algumas habilidades doces Figma, menu profissional do designer UX. Esse foi um longo. Eu só queria tocar em algumas das coisas do Photoshop que podem ser úteis se você já for usuário da interface do usuário. Sei que muitos de vocês já são e escolhi alguns super emocionantes que funcionaram de forma diferente neste tutorial principal só para ver se, venha fazer o curso. É emocionante. Atravesse isso. Isso é Figma e Photoshop. Vejo você no próximo vídeo. 59. Projeto do curso - Imagens: Olá, todos. É hora do projeto de classe. Basicamente, eu só quero que você adicione algumas imagens ao seu mockup Hi-Fi móvel e me envie uma captura de tela. Obviamente, você não usará fones de ouvido, a menos que tenha a sorte de também obter fones de ouvido. Para o seu resumo, parte Embarque seu resumo disse, tenha em mente a persona para a qual você está trabalhando. Imagens apropriadas para eles. Aqui está. Adicione imagens ao experimento Hi-Fi com o plugin também. Basta tentar qualquer um desses plugins sobre a instalação de imagens. Tenha em mente seu resumo e personalidade quando você estiver escolhendo imagens. Faça uma captura de tela de todas as páginas que têm imagens e faça o upload, compartilhe também nas mídias sociais. Especialmente agora que estamos configurando um site de preenchimento, o que você pode querer fazer aqui é realmente tirar uma captura de tela do seu resumo e persona também quando você estiver enviando, especialmente se você estiver procurando feedback porque essas coisas pode ser útil. Provavelmente não o fluxo de tarefas, mas isso vai parecer diferente do meu, mas onde tem o nome da sua empresa e o que é, especialmente se você estiver procurando feedback, porque outras pessoas podem lê-lo e saber como eles estão julgando suas imagens. É isso. Vejo você no próximo vídeo. 60. 60 rabos: OK. Oi, pessoal. Neste vídeo, veremos o layout automático e os botões expandidos. O que eles fazem? Isso. OK. Ah, muito legal. Podemos moldar nosso botão para envolver nosso texto. É chamado de Auto Lut. Vamos um pouco mais longe. Vamos criar esse botão que seja super elástico e responsivo Ah. Lótus automáticos. Muito divertido. Tudo bem. Vamos começar. Logo antes de começarmos, você notará que a interface do usuário é diferente, que significa que este é um vídeo de atualização. Eu tentei combinar o tipo de fluxo do curso o máximo que pude. Pode haver algumas pequenas diferenças. Mas o conteúdo é o mesmo. Vamos começar. Tudo bem, para começar Pego esse botão e o coloquei aqui. E só um lembrete, tanto para mim quanto para você, é que é um pequeno texto em cima de um Retângulos são bons, mas não têm som automático. É para isso que viemos. Então, para fazer algo ficar alto automaticamente, vou selecionar os dois, e há um botão aqui que vai convertê-lo em um quadro com alto ruído automático. Esse é um daqueles poderes especiais que Frames tem e que eu mencionei anteriormente. Clique em mais. Nada mudou, exceto. Agora está mais incrível. OK. E elástico Co. Os acroautas são incríveis. Agora, o interessante a ser considerado. Vou clicar no plano de fundo aqui para conferir meu painel de camadas. Mudou. Em vez de haver apenas texto, acontece que está por cima de um retângulo, onde vai o retângulo. Está bem? O que aconteceu agora é texto dentro dessa coisa chamada moldura. Pendurado em um renomeado clicando duas vezes. Vamos chamar isso de BTN. Vamos chamá-lo de pequeno, e o ícone também muda. Esse é um novo. Então, o retângulo desaparece e é apenas texto dentro desse pai Esse pai. Ok, porque ele está lá dentro. De qualquer forma, os pais. Está bem? Ele é o chefe. Ele faz muitas coisas com esse texto. Como embrulhá-lo. Também lhe dá sua cor. Você pode ver por aqui? Sua cor está na moldura principal. Mesmo estando na parte superior, é como um plano de fundo para o botão. O que mais há nesse botão? O texto. Aí está. A próxima é como controlar o acolchoamento, porque antes nós meio movíamos fisicamente Mas agora, está meio que tudo unido. Então, o preenchimento acontece quando você seleciona nossa moldura de layout automático, e ela está aqui Há a esquerda e a direita e a parte superior e inferior. Então, esquerda e direita. Na verdade, é perfeito. Mas você pode mudar isso. Vamos alterá-lo em 32 e 16. Vou desfazer o que gostei de como era, mas aí você pode mudar o preenchimento Uma nota para o resto do curso de que todo esse preenchimento aqui estava escondido. Então, no resto do curso, se eu mostrar onde está, estava escondido em um ícone aqui. Eu vou te mostrar rapidamente. Então, no resto do curso, eu vou dizer: Isso já passou de mim. Ok, cliquei nesse pequeno ícone. Então eu vou fazer isso, o resto do curso, porque eu não sabia nada melhor. Mas Future Dan sabe, e ele sabe disso, Ei, vamos retirá-lo. Porque no curso original, eu gosto, por que eles o esconderam aqui? E eles ouviram. Duvido que tenham me escutado, mas para muitos usuários, o preenchimento está do lado de fora Se você quiser usar o preenchimento individual para obter lados exclusivos, basta clicar nessa opção Agora, o estranho do preenchimento é que, na verdade, ele é controlado pelo pai, o quadro de layout automático Não é o texto. Se eu clicar no texto, sem preenchimento. Clique no pai, em todo o preenchimento. Claro que o editor está odiando isso porque é um lado do vídeo para o outro Ok, mas você entendeu. Vou clicar sobre ele. Olha. Os pais fazem grande parte do trabalho. Outra coisa a ter em mente é que, quando você está convertendo uma caixa de texto, às vezes ela pode não se expandir e Dependerá dessa opção aqui. Então, você precisa realmente clicar no seu texto. A maneira mais fácil é clicar no painel de camadas ou simplesmente clicar duas vezes nele para entrar no meu quadro de layout automático, e eu tenho o texto selecionado, sem preenchimento Mas eu posso fazer coisas assim. Este é o que você deseja verificar novamente. Se você se limitou a uma altura automática, que terá uma largura fixa, significa que, quando você chegar ao final, ela funcionará meio que pela metade, mas não totalmente. É ainda pior quando está nessa altura e largura fixas. Vai tocar e é um texto branco, e está meio que pendurado lá embaixo. Então, para corrigir isso. Em primeiro lugar, você não precisa de muito texto e, em seguida, certifique-se de que sua caixa de texto seja chamada de largura automática. Eu sou incrível. Vamos voltar, vamos mudar isso, dois por xadrez. Tudo bem. A próxima coisa que quero mostrar é o botão que realmente se estica quando você o move, porque no momento, este não É tipo T um, você fará o máximo, mas se quiser um botão responsivo, que se mova por dentro, seja na horizontal ou na vertical, veremos algo chamado redimensionamento e veremos algo chamado abraço Você pode ver por padrão. Se eu clicar nesse, vejo um abraço Essa é a razão pela qual estou vestindo essa camisa. É meio que uma piada de pai. Você pode ver os pequenos ícones aqui? OK. É uma piada do pai do UX Design. Aí está. É daí que vem. Abraçando e o pai está abraçando o conteúdo. Tudo bem, eles entenderam a piada Então, o que eu quero fazer é arrastá-lo para fora, ele instantaneamente muda para esse chamado fixo, porque estou dizendo que você tem exatamente essa largura, mas ainda queremos o botão no meio Então, o que precisamos fazer é ir até Ard e há opções aqui. Para onde você gostaria que as coisas lá dentro fossem? Vou para o Centro. E agora, oh Squidgy, aí está. Botão SquigyGiant. Vamos torná-lo amarelo. Toda essa cor. E o último botão será cortar para o botão de perseguição. Está bem? Então, desenhamos um retângulo, colocamos alguns textos em cima dele, selecionamos tudo, criamos um layout automático O que você vai acabar fazendo é ir direto ao ponto. Agora que sabemos como isso funciona. Vou pegar a ferramenta de digitação, vou clicar uma vez e vou dizer, botão, parte inferior. Clique em Escape para sair dela. O que eu quero fazer é transformar isso em um lout automático. Clique com o botão direito do mouse em Adicionar saída automática. Você acabará aprendendo esse atalho eventualmente. Shift D. É muito bom. Desenhe algum texto, pressione Shift D no MCL PC e você fica tipo, parece que não funcionou Basicamente, ele criou essa coisa aqui, onde temos esse pai, e dentro dela um texto. Este aqui, começamos com texto, mas assim que o convertemos para Auto Lut, você pode ver o mesmo tipo de estrutura Tudo o que falta é o pai. Lembre-se, não o texto real. Quero dar a ele uma cor de campo de qualquer que seja minha cor. OK. Comece aquele. Aí está. É apenas uma maneira mais rápida de fazer isso do que apertar o botão, especialmente se você sabe que quer que seja uma saída automática Ainda podemos adicionar nossos cantos arredondados. OK. Demasiado. E sabemos que podemos ajustar nosso preenchimento aqui. Então eu poderia ir 24 por oito. Parece bom. Aí está . Então, no futuro, quando você criar botões, basta digitar algum texto. Mude a tecla A ou clique com o botão direito do mouse e clique em layout automático. Adicione uma cor de fundo e seu retângulo. Na verdade, o que você acabará fazendo é desenhar um botão uma vez neste curso e, para sempre, duplicá-lo e usá-lo Tudo está feito. E lembre-se, se você precisar que tenha uma largura fixa. Por aqui, precisamos que tenha, digamos, 130 pixels. Esse é o tamanho dos nossos botões. Nós podemos arrastá-lo. Você pode ver, e ele muda de abraço para fixo Ou eu posso desfazer e dizer manualmente que você está consertado, e então eu posso digitá-lo lá Vai ser um 30. Como faço para ficar no meio? Você se lembra? É como esse. Fica no meio. Como eu faço isso? Uh hein. Você se lembra das restrições, essa é uma pequena opção Ooh. Lá vamos nós. É um de 30 pixels de largura. O abraço na parte superior e inferior. Eu deixei isso. Eu não preciso de uma altura fixa. Você pode precisar dele. O que significa mais tarde se eu criar um botão, e ele precisa ser, eu não sei. 200. Vai se arrastar para o meio. Aí está. meio avançados no curso básico, mas parece que estamos prontos para isso E só para recapitular as mudanças. Então, o abraço subiu aqui para a seção da moldura. A reprodução automática agora tem preenchimento visível. Você não precisa clicar em um ícone. E o mesmo com restrições que parecem um pouco diferentes. Sim, quase o mesmo. Outra coisa é que, no passado, antes da atualização ser frequente, eu usava a ferramenta retangular E eu recebo minha ferramenta de texto. E o que eu faço é convertê-lo primeiro em um quadro. Então, clico com o botão direito do mouse, converto em um quadro e clico em Auto Lt. Tudo bem Você pode ir direto para isso. Você não precisa convertê-lo em um quadro primeiro. Vá direto para o Auto Lut, e ele faz esses dois trabalhos para nós Bom. Algo mais? Não. Essa é a atualização. Também atualizarei o próximo vídeo. E só para você saber, o futuro Dan está bem. Ele não se arrepende da camisa Dorky que ele fez. Eu meio que abraço o conteúdo. De qualquer forma, vamos ver outro vídeo. 61. Projeto do curso 11 - Botões: Olá a todos, hora do projeto da aula. Apenas um simples. Você vai desenhar três botões para mim, para o seu próprio projeto em que você está trabalhando. Dois dos botões em expansão. Quais são os que quando você digita, eles se expandem. Dois desses e um dos elásticos. Faça dele um botão de compra, porque vamos usá-lo mais tarde em nossa página de checkout apenas para praticar essas habilidades. Gosto muito disso é algumas das coisas mais complicadas que vamos fazer em Figma. Se você achar difícil e encontrar dicas e truques que ajudam a trabalhar melhor ou pode explicar melhor para outra pessoa, me avise nos comentários. Avise aos outros nos comentários porque acho que é difícil de explicar. Solte suas próprias anotações abaixo se você encontrar uma maneira melhor de explicá-la, faça esses três botões. Para este, você não precisa enviá-lo para as mídias sociais. Não é tão excitante. O que eu quero fazer é uma bola curva para o pouco mais. Faça um esboço que não tenha preenchimento, mesmo que você não goste. É quando você faz a prática. Vá, basta enviá-lo para as tarefas, mas não para qualquer outra mídia social. Vá fazer três botões, e te vejo no próximo vídeo. 62. 62: Oi pessoal. Neste vídeo, veremos layout automático e o levaremos um pouco mais longe do que no último vídeo. No último vídeo, usamos apenas um botão elástico. Mas neste, vamos ver como agrupar muitos itens e esticar esse grande grupo, que está encontrando outra, outra opção na minha navegação Veja-o remodelado, tornou a caixa maior. Eu posso deletá-lo, torná-lo menor. Então, é como combinar os recursos de seleção inteligente que analisamos anteriormente, junto com alguns novos recursos sofisticados de adição de layout automático Então, vamos começar e usar o layout automático para espaçamento. Olá a todos. Ei, você notou que a interface deste vídeo é um pouco diferente porque este é um vídeo de atualização. Os layouts dos pedidos mudaram bastante. Você notou no último vídeo que usamos o layout de áudio e você se abraçou bem, para o E notei que todo mundo encontrou abraço onde havia se mudado para um bom trabalho Mas neste vídeo, o layout automático mudou tanto que vou regravá-lo É por isso que as coisas parecem diferentes e eu pareço diferente, mais velha, mais madura. De qualquer forma, continue com o vídeo, Dan. Tudo bem, então a primeira coisa é que você vai me ver digitando algumas coisas. Faremos isso no modo rápido. Vá. Tudo bem, eu digito algumas coisas e vou alinhá-las à esquerda E a única coisa que faremos é garantir que o tipo esteja em caixas de texto separadas. Não desenhe apenas uma caixa de texto com tudo nos retornos de entrada e isso não funcionará com os truques de layout automático que queremos fazer Ok, então basta ter caixas de texto separadas. Eu apenas os dupliquei segurando Alt e arrastando e, em seguida, pressionando Command D para obter outro, e depois mudei o texto Aqui vamos nós. Ok, então vamos falar sobre layout automático. Eu tenho esses pedaços agora e já usamos a seleção inteligente antes. Se eu os alinhar, posso fazer coisas como arrastá-los e eles se ajustarem. Tão inteligente, então parece legal. Eu posso fazer o preenchimento, pode ser usado uma forma muito semelhante com algumas vantagens extras Então, vou convertê-lo em um layout de pedido, um pouco mais. E você notará que aqui, eu tenho agora um quadro principal, ok, no quadro de layout automático, esse é esse pequeno ícone aqui com as pequenas linhas, ok, e dentro dele estão esses caras. E, basicamente, posso fazer o que fiz com o Smart select. Eu posso usar os recursos, me movimentar. Eu posso pressionar o Comando D para obter outro deles e ele se ajusta muito facilmente Mas eu tenho muito mais controle aqui. Então você percebe que aqui eu só tenho recursos de texto. Ok, o que eu quero fazer é clicar na caixa principal, clicar na moldura 12 Mal nomeado. Vou chamar isso de nav Ok, e aqui, o layout automático tem todos esses recursos extras É por isso que tivemos que atualizar este vídeo, pois isso mudou um pouco. Então, podemos dizer que quero que todos sejam empilhados vertical ou Você pode embrulhá-los, mas isso é um pouco mais em recursos avançados Faremos isso mais tarde no curso avançado. Mas podemos fazer coisas boas, como a lacuna entre elas. Então, ainda temos esse controle total. Você pode digitá-lo em oito ou arrastar este ícone e este ícone aqui, clicando em segurar e arrastar. Você ainda pode fazer isso na tela como fazemos com a seleção inteligente Uma das outras vantagens de usar o layout automático como esse é que podemos fazer preenchimento Então, vamos dar o plano de fundo desse layout automático. Então eu selecionei os pais, veja o nav. Eu vou dizer que vou dar uma olhada. O padrão é branco, o que não ajuda. Eu vou escolher uma das cores. E agora eles saem do fundo. Clique aqui, eu tenho, eu tenho um pouco de preenchimento. Então, vou para o preenchimento horizontal e vertical. Portanto, você pode ver que há muitas semelhanças entre o Smart Select, mas a ordenação tem algumas vantagens e sua persistência significa que podemos ficar Eu posso adicionar preenchimento. E a outra coisa boa sobre a persistência das saídas orais. Digamos que eu crie um novo item ou um novo menu ou algo assim. Mas queremos os mesmos recursos. Queremos o preenchimento , a cor de fundo e o espaçamento O que ele pode fazer é dizer que você não tem permissão. Ok, então eu posso selecionar este, clicar com o botão direito do mouse e dizer Copiar Colar como copiar as propriedades como essas, clicar com o botão direito do mouse novamente, copiar e colar como colar E ele pega todos esses recursos e você pode obter coisas consistentes Agora, você pode fazer mais e mais com layouts automáticos. Vamos realmente aprofundar o curso avançado com layout automático. Mas, no momento, muitos dos casos de uso são botões e esses pequenos recursos de navegação aqui e esses pequenos recursos de navegação aqui são consistentes. E podemos controlar o espaçamento no preenchimento, nas margens e no E podemos adicionar e remover itens muita facilidade, e tudo se contrai e se expande. É incrível. Agora, algumas das coisas do vídeo anterior que eu fiz, o original com o qual as pessoas tinham problemas, com quais você pode ter problemas, é que às vezes as pessoas fazem isso. Eles vão copiar e colar. E acabou fora daqui. Agora, é por isso que eu queria ir lá tentando fazer isso e está meio que fora disso. Há algumas coisas. A maneira mais fácil de duplicar algo aqui é selecioná-lo, ok, não o texto Se eu clicar duas vezes demais, copio e colo e obtenho mais texto Obviamente, se eu clicar em Escape uma vez, meio que sai do modo de edição de carrapatos Agora, se eu copiar e colar, ele fará toda a unidade. Ou o que eu mais faço é uma vez na coisa toda, clicar duas vezes para pegar a parte que eu quero dentro daqui e simplesmente pressionar o comando D, Controle D em um PC e simplesmente duplicá-la, depois ir e alterá-la Se, por algum motivo, sair, você pode simplesmente arrastá-lo de volta. Você pode ver as linhas lá? Ok, aqui vai. Se ainda não estiver funcionando, dê uma olhada no painel de camadas aqui. Então eu tenho essa moldura, que é minha moldura externa para o meu telefone. OK. Dentro daqui, eu tenho esse quadro 12 mal chamado e meu navegador às vezes em casa pode acabar como aqui E ele acabou lá. Foi estranho OK. Você pode ver que está aqui fora, meu painel de camadas, se eu quiser que fique dentro disso, ok, dentro de uma navegação, o que eu posso fazer é dizer que você, meu amigo, está entre algodão capturado Aí está ele. Ele está no lugar certo. Você vai. Os layouts de pedidos são incríveis. Tudo bem, é isso. Para o próximo vídeo. 63. Como usar restrições no Figma: Olá a todos. Neste vídeo, vamos ver algo chamado restrições. Restrições nos permitem fazer coisas assim. Você consegue ver a navegação ao longo do topo? Isso nos permite dizer, fique no canto superior esquerdo, você fica no canto superior direito. Isso é para trás, mas você tem a ideia. Vamos lançar um pouco de Layout Automático no final deste curso, bem como uma combinação, para fazer seu cérebro explodir, juntar-se a mim nesta extravagância de restrições. Vamos começar com algumas coisas básicas. Vamos apenas fazer algumas formas, vou avançar isso rapidamente. Tenho algumas formas e digamos que quero fazer uma versão para iPad disso. Vou duplicar isso só porque vou destruí-lo. Eu chamarei essa banda de minha versão para iPad e, por padrão, se eu pegar a borda disso e esticá-la, ela faz algumas coisas. Você é como, por que eles não ficaram lá? Está tentando ser responsivo e está se espalhando uniformemente e você é como, não é o que eu quero, eu só quero que você fique no canto superior direito como Dan nos mostrou. Vamos olhar para as restrições. As restrições estão sempre lá, já as temos. Digamos que isso, a palavra Scott, você pode ver é restrita ao canto superior esquerdo. Esses caras aqui, também no canto superior esquerdo, não é o que eu quero. Vamos começar com esse triângulo aqui. Vou dizer que você está restrito ao canto superior direito do canto superior direito. Agora, se eu arrastá-lo, olhe o que acontece, esse cara fica direto na borda. O que eu poderia fazer é agrupar esses caras, mas vou usar o enquadramento em vez disso. Opção de comando G ou controle alt G. Para torná-lo um quadro, vamos chamar isso de meus ícones e eu vou dizer em vez de restringir para o canto superior esquerdo, restringir ao canto superior direito para que eles estejam todos juntos, e eu os arrasto para fora, olhe para isso, eles restringir. Essas são as restrições. Você pode colocá-lo para ficar no fundo, vamos fazer isso por esse cara. Podemos dizer que você está limitado ao canto inferior esquerdo, o que não vai funcionar. É o que eu quero, vamos desligá-lo primeiro. Vamos voltar ao topo. Se eu entrar aqui e arrastá-lo para fora, você é como, não, eu quero que você fique restrito ao canto inferior esquerdo e vai funcionar, assista isso. Ei, preso no fundo, mas eu quero que ele se estique em todos eles. Você pode dizer que você não está apenas preso à esquerda ou à direita, você pode fazer as duas coisas. É difícil clicar nessas coisas, você pode fazê-las aqui, mas você pode ir para a esquerda e para a direita. Ambos juntos e a parte inferior, agora assista. Clique nisso, restrição na parte inferior. Isso é o que são as restrições. Vamos usá-los para navegação, esse é um caso de uso muito bom. Eu os uso muito para nossos cartões, o que faremos alguns bons casos de uso em um pouco, mas esse é o básico. As coisas a observar aqui é, deixe-me ampliar, você pode ver as pequenas linhas pontilhadas lá? Vai disso para a direita. Ele deve ir até a borda, um pequeno inseto. Está mostrando que, se eu for para a esquerda, você pode vê-lo ali. Você pode ver o começo dele lá. É restrito ao quadro externo, você não verá restrições se esse cara, copiar e colar, estiver fora de um quadro. Ele não está na terra de nenhum homem, olha, sem restrições, ele se foi. Quando eu o movo de volta, ele tem restrições. Ele precisa de um quadro pai, restrições completas para funcionar. Isso é uma coisa. No momento, vamos até esse quadro inicial. Muitas vezes, o que acontecerá é que você colocará todas essas coisas em seu próprio quadro, talvez chamá-lo de nav, em seu próprio quadro pai. Talvez chame-o de nav para que esses caras estejam todos presos dentro desse pequeno grupo legal. Vamos fazer isso, meus ícones estão unidos. Eu poderia realmente me juntar a esses dois caras primeiro. Em vez de agrupar o membro, vamos colocá-lo em um quadro. Essas duas unidades aqui vão entrar em seu próprio quadro. Deixe-me apenas nomear as coisas, isso deixa um pouco mais claro, logotipo. Esses dois caras, dentro de um lugar de quadro. Talvez vamos desenhar o punho do quadro. Vamos fazer isso de outra forma porque vou pegar minha ferramenta de quadro. Temos convertido muitas coisas em quadros. Você pode começar com o quadro, que será minha navegação e dar a esse quadro uma cor de fundo. Vai ser preto neste caso, isso serve. Vou usar meu cinza escuro, eles vão olhar, o que eu percebi que A não é tão escuro, e B é apenas verde. Você pode ter visto mais cedo no anúncio do curso que você está tipo, ele só está fazendo verde, ele pode dizer? Eu não fiz quando era pequeno, mas quando é grande, ele precisa ser ajustado. Vamos deixar isso por enquanto. Vou quebrá-lo e torná-lo muito menos verde. Verde hindu, então, nem todo o verde. Temos esse quadro em que esses logotipos estão dentro. A razão pela qual eles entraram é porque eu os selecionei primeiro, em seguida, desenhei um quadro, eles aninhados por dentro. Se não o fizerem, você pode arrastá-los para dentro. Este vai ser meu equipamento de navegação. Eu penso nisso como em vez de usar o lado de fora da coisa toda, porque agora assista isso. Se eu ajustar todo o quadro, ele não funciona, mas significa que posso usar isso como uma boa unidade de copiar e colar e movê-lo. Mas o que eu preciso fazer é ajustá-lo novamente para que esses caras fiquem no canto superior direito deste quadro. Vamos dar uma chance. Vou desfazer, voltar para este. Temos nosso equipamento de navegação, que tem essas duas coisas dentro dele. O logotipo está padrão para o canto superior esquerdo, tudo bem. Os ícones ficam no canto superior direito. Agora, quando eu só você, maior ou menor, é para isso que servem restrições. É assim que você acaba com essas coisas loucas que você pegou emprestado de outras pessoas e você gosta, é tão confuso. É, é um pouco. A coisa a lembrar é que eles precisam estar dentro de um quadro. Lembra quando os tivemos aqui? Não foi possível ver as restrições. Você pode usar o exterior, como todo o quadro que estamos usando, o que estamos chamando de iPad ou celular, depende de você, mas neste caso, eu fiz uma moldura que diz nav, e esses caras são por dentro. Agora eu quero que você faça uma pausa, você entendeu? Tudo bem? Se você fosse como, Men, eu não segui muito disso. Quero que talvez pule para o próximo vídeo agora. Se você fosse como, eu estou seguindo, continue, vamos ir um nível mais profundo, mais Inception. Vamos combinar algumas coisas, vamos combinar as restrições que acabamos de aprender com outra coisa que aprendemos. Lembra-se do layout automático? layout automático era a navegação lá e usamos o layout automático para esses botões aqui. Vamos usar o layout automático para esses caras. Vou entrar, encontrar meus ícones, lá estão eles, e em vez de ser um quadro, vou fazer um layout automático. Lembre-se de uma das coisas legais sobre o layout automático, é uma seleção inteligente. Clique nisso, agora posso entrar aqui e posso ajustar isso muito facilmente, posso jogar com o pedido. Posso adicionar outro, comando D. Olhe para isso e, como está restrito ao canto superior direito, ele é empurrado dessa maneira. Combinando coisas, o layout automático é separado das restrições, mas se você combiná-las, você pode obter algumas coisas extravagantes e você terá algumas coisas extravagantes de outras pessoas e agora você sabe como é construído talvez. Você está pensando no que estou pensando? Este, se eu pegar o tamanho do iPad e eu fizer o tamanho do iPaddy , mas isso não vai e eu posso ir lá e posso fazer isso e é perfeito. Poderíamos fazer o que fizemos no fundo aqui? Digamos que, para a navegação, você está no canto superior esquerdo. E se eu dissesse que você estava no topo esquerdo e direito? Então pegamos esse quadro inteiro e ele faz o que este fez e vai para a esquerda e para a direita. Isso é demais. Esqueça que eu disse isso, eu vou te ver no próximo vídeo. Faremos mais alguns exemplos juntos de layouts automáticos do mundo real misturando com restrições e toda essa bondade porque é bom, mas é bom saber no próximo vídeo. 64. 64: Olá a todos. Neste vídeo, vamos combinar alguns recursos que já aprendemos. Ok, vamos dar olhada em quadros de aninhamento dentro de quadros Vamos analisar as restrições de saída automática. Vamos fazer algo assim, onde é um pequeno cartão bonito, você pode vê-lo aqui. Mas é escalável e razoável, ok? E eu posso mudar o texto, ok? Então, vamos combinar o material de saída automática. Lembre-se de que criamos botões, para que a caixa se ajuste e fique cada vez menor, além das restrições que a bloqueiam na Apenas mais um caso de uso para, esperançosamente aprofundar nossa compreensão de algumas dessas coisas que estamos aprendendo Também fica muito legal depois de fazer isso. Se eu copiar e colar, digamos, em nossa versão móvel, digamos que eu realmente não goste dos recursos desta. Ok, eu vou trocá-los. Vou usar um diferente. Está bem? Mas dá para ver, olha, comprando uma traseira para celular. OK. O texto se ajusta, tudo é igual, é reutilizável e é bom ver outro caso de uso de algumas dessas coisas que estamos aprendendo Tudo bem, vamos começar. Eu vou te mostrar como fazer tudo isso. Tudo bem, para fazer essa combinação, vamos fazer isso em nosso velho e solitário desktop OK. Não fizemos muita coisa neste caso. E vou usar deixe isso aqui apenas para que possamos recriá-lo para que você saiba para onde estou indo Ok, vamos mudar essa caixa de cores com uma imagem. Então, primeiro, ligue a grade. É fácil. Em um Mac, é o controle J, G, desculpe. OK. Pc, eu nunca consigo lembrar o que é porque é muito difícil. Mas todos nos lembramos daquele outro atalho, Ok, comando Ford Slash, E você pode digitar na grade. E basta olhar para aqui, bem no topo. Tudo bem, então eu quero desenhar retângulos e estamos aprendendo que retângulos são como molduras, mas com benefícios extras Em vez de usar a ferramenta retangular, geralmente começo com uma moldura Está bem? Então, vou começar com esse quadro. Eu vou subir talvez quatro desses. Faça um filme de fundo, use um dos meus estilos. Ok, vamos começar com esse. Agora vou desativar os contras. Ok, você notou aí que o atalho já estava meio pré-carregado quando eu acessei um comando para controle de barra para frente e barra porque ele lembra Então, você pode realmente alternar entre essas coisas. Acabei de inserir no meu teclado. Não funciona para todos os atalhos, mas muitos deles simplesmente ativam e desativam Tudo bem, então temos isso, é uma moldura, vamos chamá-la, vou chamá-la de recurso de cartão. Está bem? Agora eu quero colocar esse retângulo no interior. Ok, aquele aí. Vamos seguir em frente e pegar minha moldura novamente. Eu poderia usar uma ferramenta de retângulo como basta usar uma moldura. OK. Vou rastrear isso mais ou menos assim. Dê um preenchimento. Na verdade, escolha uma cor e eu vou quebrá-la e mudar para preto. Vou usar meu lindo atalho de apenas cinco na parte superior Você vê que isso muda a camada para 50%. Agora, dentro dessa coisa, vamos chamar esse bloco de texto. Não sei, vamos pegar o texto. Estou colocando dentro dessa coisa e em cima só para economizar tempo. Porque lembre-se de que, se criássemos um retângulo em um bloco de texto e depois tentássemos adicionar coisas como restrições e layout automático, o que eu quero, ok, porque quero que seja elástico Lembre-se de que podemos atualizar esse texto. E fica maior e menor. Ele vai fazer isso de qualquer maneira. Ele o converterá em um quadro, então eu poderia muito bem começar com um quadro e colocar o texto dentro dele, então eu selecionei. Se eu clicar lá, você notará que está dentro dessa moldura. Você pode arrastá-lo depois. Vamos nos confortar. Agora, algumas coisas. Esse marcador só apareceu porque eu usei o hífen, aquele ali e presume que você se refere a um Então, ele desapareceu e o mudou automaticamente. Se o seu mudar e você não quiser, você pode desligar os marcadores embaixo do texto. Agora, um problema com o uso desse lindo atalho de 50%, nós meio que aprendemos isso antes que esse quadro, quadro principal 50%, faz tudo dentro dele 50% Isso não é o que eu quero, ok? Porque é o Texas sendo destruído. Então, eu vou voltar para 100% Quem se lembra como voltar para 100% e zero no teclado OK. E, na verdade, apenas essa parte, apenas o preenchimento, não o traçado, apenas o preenchimento até 50%. Ok, estamos sendo um pouco mais específicos. Nós temos essa moldura, se eu reordená-la, ela não está funcionando bem. Vamos começar a primeira parte, vamos fazer com que essa moldura fique desse lado, ok? E é aí que analisamos as restrições. Há cerca de três grandes tópicos aqui, certo? Há molduras aninhadas, o que já fizemos. Então eu tenho esse retângulo de moldura externa com essa moldura interna, mais retângulos com texto dentro dela. Essa parte está pronta. Também estamos falando sobre restrições, então eu quero que essa coisa de ser pai realmente fique à direita Agora, pegue a moldura principal e esguiche-a. Bem, no meu caso, provavelmente eu quero que seja na parte inferior, porque não na parte superior. OK. Porque vou redimensionar alguns layouts diferentes e diferentes Então, eu vou dizer bloco de texto, você está preso na parte inferior. Agora, quando você for novo, descobrirá que é muito difícil saber qual deles você acabará escolhendo. Essa e brincando com ela, testando-a, essa. Testando dentro de um. OK. Portanto, não se preocupe se você for essa pessoa. Isso é o que todo mundo é. Depois de um tempo, você se acostuma. Tudo bem? Então isso é fazer essa parte. próxima coisa que eu quero fazer é dizer, você sabe, eu quero dois desses e o próximo vai ser, você sabe, reciclagem. Ok, então eu quero que ele se ajuste. Então, isso não tem nada a ver com restrições, tem a ver com o layout automático Agora, isso é meio confuso porque usamos layout automático para fazer essas coisas divertidas nos últimos vídeos Ok, adicionamos coisas e substituímos coisas. Mas lembre-se de que também usamos layout automático para esse botão que ficou cada vez maior e menor. Mesmo recurso, alguns usos diferentes. Então, vamos adicionar um layout automático. E está encolhido, o que vou consertar em um Mas espero que agora funcione e esteja saindo dessa forma porque os pais estão presos à direita Ok, vamos corrigir esse pouco de espaçamento novamente. Agora, vou desfazer isso até que você perceba que, basicamente, o que ele quer fazer é colocar um espaçamento uniforme em cada Eu vou fazer. Aí está. Então, digamos que você queira manter isso. Eu realmente não gosto muito, mas eu queria mostrar a vocês um pequeno recurso extra aqui enquanto estamos aqui. Ok, é a inspeção que vamos usar a inspeção mais tarde no Quanto mais todo mundo atualizou o Figma, eles mudaram as coisas Costumava dizer design, prototipar e inspecionar. Eu ia te mostrar a inspeção, mas eles a mudaram para essa coisa aqui agora chamada modo Dev Não vamos entrar no modo de desenvolvimento agora, entraremos mais tarde no curso. É um pouco mais avançado e requer acesso pago ao Figma Vou mostrar uma alternativa para isso que faz exatamente o que precisávamos fazer sem todos os extras. Se você quiser seguir esse caminho, você tem que tirar isso dos rascunhos, ok Atualmente, estamos em rascunhos. Mova-o para uma de suas equipes pagas e , em seguida, o modo de demonstração será ativado e você poderá ver a inspeção Tenho certeza de que não mencionei isso em nenhum outro lugar do curso que vou inspecionar, mas se você me ver clicando em Inspecionar aqui, é uma opção apenas no modo Dev Agora que esse é um plano pago, como podemos contornar isso? O que eu quero fazer é mostrar como podemos ver as diferenças. Refazi isso bem rápido. Porque você pode ver, porque é roxo. Agora eu quero ver a distância entre o topo e o fundo aqui, as margens Está bem? Para fazer isso, vamos clicar na coisa para a qual queremos encontrar as informações. Vamos clicar na lateral da moldura, aí está a palavra conforto. Quero manter pressionada a tecla de opção em um Mac OlkaPC e assistir Se eu mover o mouse, não estou clicando em nada, estou apenas mantendo a tecla pressionada. Você está em um PC, mantenha pressionada a tecla Alt. Se você estiver usando a opção de pressionar o Mac , basta se movimentar . Você pode ver, olha, a palavra conforto de cima e de baixo é 15 e 16 à esquerda e à direita da parte superior da moldura. Esta moldura externa, você pode ver que é 142. Basta manter a tecla pressionada para obter as medidas. Era isso que queríamos e era isso que costumávamos entrar para inspecionar. Mas há uma opção fácil e prática como essa. O único truque com isso é clicar no item para o qual deseja medir. Se eu quiser clicar nesta moldura externa aqui, posso obter medidas para ela. Ok, isso é manter pressionada a tecla de opção Agora. Agora vou pegar as medidas da parte superior até a moldura. Clique no texto, o que às vezes é mais fácil no painel de camadas, e segure a tecla opcional. Vou pegar as medidas da parte superior da moldura até o texto. Apenas certifique-se de ter muito propósito com o que você seleciona Se eu clicar nesse quadro, veja isso. Se eu segurar a mesma tecla, ok, 64 pixels do lado, 51 daquele lado. Aí está. Essa é a solução alternativa. Mas, novamente, faremos uma demonstração mais tarde no curso. A outra coisa é que estou lhe dando atalhos como a opção Alt Apenas verifique novamente. Não vi nenhum problema com isso, mas alguns atalhos de teclado que tentam internacionalizar muito mais o Figma Em vez de usar, como eu faço, um teclado de arte ocidental, eles estão alterando alguns atalhos Portanto, eles não são tão universais quanto deveriam ser porque algumas pessoas não têm algumas das chaves. O que você pode fazer é clicar no ponto de interrogação. Vá para os atalhos do teclado para este em particular, mas acho que está sob o cursor Você pode ver aqui a seleção de duas medidas . Isso é o que acabamos de fazer. Você pode ver a aparência da tecla de opção antiga. Ok, então verifique o seu se parecer que a mente não funciona. Eu não tenho uma chave de opção. Você deve ter uma chave de opção. Mas se você não quiser nada futuro, dê uma olhada aqui e, sim, vá até os atalhos do teclado e veja se consegue encontrar o que está procurando e que Dan mencionou Ok, e você pode encontrar a diferença, ok, para o seu Mac Px ou para o seu teclado diferente. Tudo bem, uma última coisa é só um lembrete. Eu vou entrar aqui agora e dizer, vamos inserir o preenchimento para isso aqui, ok? E costumava estar tudo escondido aqui, mas agora está expandido, certo? Acho que já mencionei isso antes em uma atualização. Ok, mas simplesmente não está escondido lá. O preenchimento individual é que, se quisermos algo diferente da esquerda e da direita k, ainda está lá Mas a versão desse tipo, com a qual gravei esse curso meio que tinha tudo amarrado nesses pequenos pontos aqui Mas agora está tudo expandido. Veja o preenchimento horizontal Estofamento vertical. Só uma pequena mudança. E eu só pensei em lembrá-lo porque eu já estou aqui atualizando o vídeo Tudo bem, continue com o quadrado amarelo no outro vídeo, divirta-se. O Auto só pode ser aplicado aos quadros. Vamos ver o que estamos fazendo? Eu não consigo me lembrar. Ah, sim. Automático. Lá vamos nós. E ele simplesmente pulou lá e você fica tipo, não se preocupe, eu posso encontrar o acolchoamento Onde está esse estofamento? Uau, está escondido aqui. Você meio que pode fazer isso no mixado. Ok, isso é todo o preenchimento. Este aqui mostra os individuais. Então, o que foi? 56. Vamos fazer 50, 16. Vá lá. Tudo bem, então espero que agora vamos tentar. Ele se ajusta, podemos fazer mais de uma versão. Para ativar minhas colunas novamente. Olha isso. Vamos fazer um controle de comando D em um PC e este aqui será reciclagem e o outro será base. Ok, reutilizável, incrível, ajustável. Então, quando eu for, posso precisar que esses caras acessem minha versão móvel. OK. Vá até isso. Estou dizendo que estou criando uma página alternativa de detalhes do produto porque decidi que não gosto desse layout. Ok, eu vou entrar aqui na verdade, basta colar um deles. Tenho muitas coisas para fazer. Vamos ativar as grades para este. Mesmo atalho, estou usando o comando forward slash ou control forward Vamos desligar todos eles. Bom trabalho. Nenhum deles vai participar dessa vez, não sei por quê. Agora eu posso ir até você e posso dizer, na verdade, eu quero que este esteja no celular talvez assim. Você entendeu? Acho que dá muito trabalho. Não dá muito trabalho. Depois de ter um pouco de experiência, essa será sua jornada. Chegará um momento em que você realmente passará meio dia fazendo com que essa coisa realmente funcione. E você fica tipo, não vale a pena. Demorei meio dia. Eu poderia simplesmente desenhar alguns retângulos então E então chegará um momento em que você dirá: na verdade, preciso reutilizar isso em várias coisas diferentes Vale a pena gastar o tempo. OK. Sim, vamos lá, vamos trocar as imagens e arrumar essa parte porque eu quero que seja como no início desta imagem interior, eu vou te mostrar uma coisa Esse problema, na verdade, não é um problema, a estrutura externa da placa. Ok, vou dizer que não quero preencher aqui. Quero uma imagem ótima para combinar um pouco rápido com algumas coisas. Não sei, estamos começando a ficar um pouco melhores. Não estamos ficando um pouco mais rápidos? OK. Eu tenho minha coisa, minha imagem aqui, é elástica, o que é incrível O problema é que o enquadramento não está certo. OK. Então, vou ter que mudar de Phil para Crop Está bem? E eu vou apenas arrastar essa mudança de baixa Está bem? Então, vai em linha reta. Ótimo. O problema é que minha elasticidade está um pouco quebrada O texto ainda está bom, mas a imagem não se ajusta. É apenas uma das desvantagens de trocá-lo para o Crop. OK. Se eu decidir ficar bem, assim, tenho que selecionar a moldura externa. Clique na minha imagem e vá, Phil Crop, arraste-a para baixo. Tem um pouco disso acontecendo. Pode haver uma solução melhor no futuro na Figma, mas esse é o tipo de solução no momento Então, vou trocar essas imagens. Tudo bem, então eu troquei as imagens e uma das outras vantagens é, uau, Basta jogar outro nível para que, se eu selecionar todos eles, eu poderia me transformar em uma saída automática. Não é o que eu preciso agora, você sabe, poderia reempacotá-los, brincar com os ajustes Mas vamos voltar à simples e velha seleção inteligente. Então, selecionando todos eles , todos estão no espaçamento certo Você pode usar a arrumação se não estiverem, mas podemos ajustar os espaçamentos e provavelmente a parte mais engraçada é Portanto, lembre-se de clicar no ponto uma vez e arrastá-lo. Precisa de um novo comando D, controle D em um PC. Super bom. Tudo bem, é isso. Então, espero que tenha sido útil ver o Club como outra versão funcional de algumas das coisas que já aprendemos. Talvez, para ter esperança, aprofunde nossa compreensão de coisas como estruturas e restrições aninhadas e saída automática. Tudo bem? Que vai ser isso. Nos vemos no próximo vídeo, amigos. 65. Como adicionar a altura automática da caixa de texto ao autolayout no Figma: Olá a todos. Neste vídeo, vamos abordar algo que já sabemos, chamado de layout automático. Vamos fazer algo chamado layout automático duplo. Esse é um nome que eu inventei. Mas também vamos olhar para algo que eu não inventei, algo chamado altura automática para caixas de texto. A parte do layout automático é o material que já conhecemos. Isso significa que podemos reordenar essas coisas. Podemos duplicá-los. Podemos brincar com o espaçamento deles. Esse é um dos layouts de ordem de pixels. Vamos dobrar o layout automático para que, quando ajustarmos coisas como texto, adicione mais coisas. Você pode vê-lo? Olha, ele se expande e empurra o resto deles para fora. Isso é algo chamado altura automática em uma caixa de texto. Vamos entrar, e eu vou te mostrar como fazer isso. Para começar este, vou duplicar esse quadro, fazer uma página de comentários e apenas juntar as partes de trabalho. Vou fazer isso no modo de velocidade. Vejo você em um segundo. Estamos em pausa aqui, e acabamos de começar. Eu sou tipo, não posso pendurar o cinza. Ajustando suas predefinições, você pode entrar aqui, e você pode dizer realmente muito verde então, e eu provavelmente quero que seja mais escuro ou assim. Aqui vamos nós. Aqui para verde. Agora ele está ajustado lá e em qualquer outro lugar que eu usei. Onde quer que eu o usei. Aqui vamos nós não significa que você está lá. Agora, o design de velocidade. Estamos de volta. Isso [inaudível] parece tão bom. De volta. Você está de volta. Essa é minha pequena coisa de revisão. O que eu quero fazer, como no início, quero que isso seja capaz de se esticar para cima e para baixo e brincar com o espaçamento. Vamos fazer um layout automático duplo. Para fazer o layout automático duplo, na verdade, vamos começar com a altura automática. Ignoramos isso e o anterior. Você pode ser como, “Ei, você não nos disse o que aquele fez.” Este aqui, Auto Width, sabemos que continua para sempre assim. Este aqui, é como um tamanho fixo. Isso significa que quando eu o desenha, ele tem uma altura. O texto pode se expandir para fora dele, mas essa é a altura, há uma altura fixa nisso. O que vamos fazer é fazer uma opção. Há este aqui. É uma largura fixa, mas uma altura automática. Você vê a coisa legal sobre isso, ele sugou isso até o fundo lá e significa que a altura vai ficar maior. Vê que a altura fica maior? Isso vai ser útil porque essa caixa azul será o que empurra o quadro externo para fora. Basicamente, é exatamente como fizemos com essas coisas. Este empurra para a esquerda e para a direita, então está preso. Usamos as restrições para a direita e para baixo. Este vai fazer algo um pouco diferente. Precisamos que esse quadro pai tenha altura automática, vamos chamar esse comentário. Precisamos desse pai como fizemos antes, com a caixa preta transparente clara, dissemos fazer a altura automática e funcionou. Funciona, vai funcionar. Na verdade, veja se funciona sem mais nada, esse cara está abraçando o conteúdo. Minha caixa de altura automática, você pode ficar maior? Ele fica, funciona, trabalho feito, exceto com essas coisas. O que está dizendo é que, quando você tem mais de um objeto, estamos de volta a essa lista. Lembra daquela lista de navegação que fizemos? Estou ampliando. Onde está essa lista de navegação? Ele está lá. Lembre-se de que tínhamos algumas coisas diferentes. Quando fazemos uma coisa, isso funciona assim. Quando temos algumas coisas, acaba tentando empilhá-las ou podemos ir para a esquerda ou para a direita e estamos ótimos. Nós fomos para cima e para baixo para este, mas todos esses objetos precisam ser um grupo, então eu vou desfazer. Muita ruína. Isso todo o caminho para cima. Basicamente, o que eu queria fazer é empilhar apenas essa parte e todas essas coisas de topo. Vou pegar um u e tudo isso e apenas torná-lo uma unidade. Eu poderia agrupá-lo. Eu poderia transformá-lo em um quadro. Vamos transformá-lo em um quadro. Vamos, você é um quadro. Uma maneira um pouco diferente de fazer isso aqui no painel Camadas, ou você pode clicar com o botão direito do mouse aqui ou usar seu atalho. Agora, na verdade, há apenas duas coisas nesta lista. Vai agora o quadro pai. Vamos fazer você Layout automático, chupar isso desse lado lá. Lembre-se de que é para abraçar o conteúdo como minha camiseta. Esta caixa de texto aqui só precisa ajudar a empurrar isso se você precisar que ela tenha uma certa largura. Ainda é a altura flexível ou a altura automática. Agora, se eu tiver alguém que tenha uma revisão muito longa, ela se ajusta, melhor. Aquele lá é realmente útil, especialmente para esse tipo de material texty boxy grande. Vamos fazer com que seja mais de um. Já fizemos um layout automático e o usamos principalmente para empilhar essas duas coisas dentro. Agora, vamos fazer mais empilhamento, então voltamos ao nosso layout automático duplo. Temos essa coisa aqui, é o quadro, mas está sendo convertido neste layout automático, que está indo para cima e para baixo. O que vamos fazer é explicar que esse contêiner pai, layouts automáticos das coisas dentro dele. O que vamos precisar é de um contêiner pai para dois desses. Esses dois, os caras internos, precisamos de um quadro ao redor do lado de fora e podemos fazer isso dizendo, vamos criar um layout automático. Este é o layout automático duplo que eu estava mencionando. Esta revisão aqui, digamos que esta, usa layout automático para empilhar essas coisas dentro disso. Isso pilha de layout automático externo, esses caras que por acaso também são layouts automáticos, mas não precisam ser. Eu tenho este, preciso de outro. Eu vou, você, selecioná-lo, Comando D. Quando você estiver usando o layout automático, o pequeno ponto rosa aparece o que ele fez, é útil. Mas Comando D, Comando D. Veja como somos bons e as coisas boas sobre isso, novamente, podemos aplicá-lo com o espaçamento. Podemos arrastá-lo, aqui vamos nós. Digite-o usando 24. Quando eu ajusto, copie e cole alguns deles. Não sei o que está fazendo. Selecione o texto. Não sei por que não está selecionando texto. Nada está funcionando. Acho que pode estar congelado. Acontece pessoas, seu pode congelar muito mais do que o meu. É como a primeira vez que a minha está congelada. Vou fechá-lo e abri-lo de volta. Estarei de volta em um segundo. Estamos de volta. Vamos ver se ele consertou. Cole, cole, cole. Está funcionando novamente. Nós fomos um pouco mais fundo neste, espero que novamente ajude a explicar algumas das coisas extravagantes que você vê sobre Figma em torno disso, oh meu Deus, imagine que se você pudesse fazer isso, nós sabemos como agora. Combinamos duas coisas, há uma nova altura da ordem para a caixa de texto e, além disso, passamos duas camadas de layout automático profundo. Há um layout automático operando dentro desse quadro, mas também há um operando no total externo. Vou chamar isso de nossa Pilha de Revisão. Isso vai ser para este vídeo. Vejo você no próximo. 66. Projeto do curso 12 - Design responsivo: Olá a todos, é hora do seu projeto de classe. Estou chamando de design responsivo. Eu só quero que você construa as três coisas que construímos. Você já pode ter feito isso. Há um menu móvel, um cartão de recurso e os cartões de revisão. Basicamente, o que fizemos até agora. Se você está apenas assistindo, precisamos começar a fazer o trabalho. A média móvel usa este aqui. Lembre-se de que podemos ajustar essas coisas e elas se movimentam. Podemos duplicá-los e eles ajustam o tamanho. Faça algo assim com os recursos e a conta do gato doméstico. Não precisa se parecer exatamente com a minha, mas apenas a mesma mecânica, esse layout automático. Os cartões de recurso, façam isso para a visualização da sua área de trabalho. Dê uma olhada. Esses aqui, lembre-se de que eles ficam no fundo e se movem. Agora cabe a você. O design não precisa se parecer com o meu, mas eu quero aquela mecânica onde há alguma unidade inferior de bloqueio aqui embaixo. Fique atento ao meu de perto se sentir um pouco confiante, porque você pode acompanhar, mas se você está se sentindo corajoso, fique chique. A última coisa são as resenhas. Essas coisas aqui. Eu quero que você veja se consegue fazer isso. Faça um e veja se você pode fazer vários. Agora, com este, há um opcional. Eu não tenho que fazer isso, mas quero que você veja se você pode, porque no momento esses aqui são responsáveis. Na parte inferior é responsiva, mas essa caixa de texto não vem junto para o passeio. Eu quero que você veja, e veja se você pode fazer isso. Esse é o seu bônus extra. Você não precisa fazer isso, porque eu realmente não te mostrei explicitamente, mas ei, espero que haja um pouco de ensiná-lo a pescar e você pode resolver isso. Clique em tudo. O que eu quero que você faça é se você descobrir, informar as pessoas nos comentários para as pessoas que se deparam com problemas, todos os problemas que você se depara e como você superou eles. Ajudar os outros geralmente é a melhor maneira de se lembrar dessas coisas você mesmo, então dê uma rachadura e apenas capture todas elas. Ainda não podemos ou Figma não permite gravações dele. Vou ter que assumir que as capturas de tela são responsivas, mas faça uma captura de tela de todas elas e carregue-as para os comentários das atribuições do projeto. Também compartilhe-os nas mídias sociais. Adoro ver o que você está fazendo e talvez receber algum feedback de outras pessoas. Tudo bem, projeto de classe. Vá fazer isso e te vejo no próximo vídeo. 67. Efeitos legais de sombra projetada e sombra projetada interior no Figma: Olá a todos, neste vídeo vamos começar a ver efeitos na Figma. Agora, vamos pular sombra. Onde está a sombra, lá vai você, solte sombra no texto, muito emocionante. Destaca-se da imagem lá. Vou tentar adicionar um pouco mais de valor. Este aqui tem duas sombras de gota aplicadas a ele. Vamos olhar para algumas coisas de sombra interior com duas delas lá para algumas coisas interfacey, veja aqui, há um pouco de valor extra aqui, então pule comigo, vamos começar. Vamos falar sobre sombras de queda primeiro. Qualquer coisa selecionada: fontes, botões, retângulos, quadros e aqui em baixo os efeitos. Pressione o padrão “Plus” para Drop shadow, e temos uma sombra. O que eu encontro com sombras é, acho que estou tentando adicionar um pouco mais do que apenas, há a sombra, para ajustá-la, clique no pequeno “Ícone” ao lado dele. Você pode obter um pouco mais? Você pode brincar com obviamente a transparência, como o quão escuro é, podemos voltar. Agora, acho que estes são bons para serem esfregados em vez de digitados em amostras, X, Y, Blur, Spread , você pode simplesmente passar o mouse acima deles e você pode ver, você pode arrastá-los ao redor. Uma boa sombra parece boa em zero e um pouco de Y. Esta é a minha opinião. Estou usando a seta para cima e para baixo segurando o shift também. Apenas algo sutil, não tão sutil, apenas para que ele se manche do fundo. Agora, não tenha medo, você pode adicionar mais de uma sombra. Digamos que você tenha uma sombra de preenchimento que é um pouco maior, você pode ver isso? Mas mais wafty. Eu tenho este. Vou fazê-lo ficar um pouco mais longe. Vou diminuir a opacidade usando minha seta para baixo. Eu vou ter um que o levanta em geral do fundo, mas depois um bom e afiado no topo para que você possa adicionar mais de um. Legal. Vai para aqui, e este, é uma duplicata do original, então eu realmente vou transformá-lo para dois, desfocar, levá-lo para baixo bem e pequeno, arrastar, algo assim. Aumente um pouco, esse pouco ficará bem então, talvez até um. Agora, os números reais aqui mudarão dependendo do tamanho de seus objetos. Você sabe que é muito grande, você tem que colocar mais, se for bem pequeno, você coloca menos. Mas saiba que você não pode adicionar mais de um, então vamos ligar e desligar isso. O que você acha? Globo ocular ligado. Isso é apenas com isso, esse é o grande wafty, e isso é apenas aquela pequena luz extra ou pequena coisa extra ao redor do lado de fora. Obviamente, é ótimo para tomadas, minhas tomadas se destaca do fundo. Na verdade, vamos trocá-lo. Vamos fazer você, meu amigo, imagem de fundo, dizer que a exposição e o contraste não são suficientes, e você tem que usá-lo para o texto. O texto, você pode fazer um duplo nisso também, acho que o efeito que você está procurando geralmente é que ninguém percebe. Se alguém perceber sua sombra, você foi longe demais. Afiado, abaixe-o e abaixe isso para baixo. Agora, uma coisa que eu não cubri foi a propagação, então eu tenho isso. Vamos para o borrão logo para cima. A propagação é até onde começa, ainda está, terra e seis, borrão, o que é um pouco, mas começa bem aqui. Esse é o spread. Eu não costumo tocar na propagação, você pode. Estou gostando mais disso? Não sou. Vejamos o outro primo da sombra, a sombra interior. Agora, você é como, quando diabos você vai usar a sombra interior como o medo da terra do Photoshop que você gosta, eu nunca uso sombra interior. Mas quando chega às opções da interface do usuário, você começa no início. Eu o entreguei, e vou aumentar isso até um máximo. Talvez você possa ir o mais alto que quiser e eu recebo cantos arredondados. Sou só eu. No seu teclado, para uma mudança de retenção de círculo para torná-lo perfeito, volte para minha ferramenta de seleção, que é V, Pac-Man sem motivo. Vamos escolher minha cor clara. Este aqui, sombra interior, além de deixar cair, você não tem muitos, menos de dois vídeos em todo este curso sobre efeitos. Sombra interior, eles podem estar mais no futuro. Eu tenho a sombra interior. Vou deixá-lo como padrão porque ele deseja cera. Vou adicionar outro, mudá-lo para sombra interna. É bom para coisas de interface como essa. Você pode passar idades trabalhando nestes e ninguém vai notar, mas eu vou notar, você notará. O que você também faz é que nós fomos para a esquerda, você pode ver que posso arrastá-lo para baixo e para a esquerda. Você pode realmente obter um negativo, assistir isso, se eu arrastá-lo desta forma, você pode ver em vez de empurrar pela direita, ele empurra da esquerda ou do oposto disso. Eu posso fazer algo assim apenas para preenchê-lo. Talvez este aqui, eu o faça ir um pouco mais longe dessa maneira, apenas para ir mais longe dessa maneira, fazer com que pareça mais fundo com esse borrão ligeiramente diferente. Este talvez com uma sombra. Corrigir sombra, eu gosto disso? Talvez precise ir assim. Dois, dois. Você pode trabalhar, não é ótimo. Há muita sombra interior acontecendo. Você entendeu a ideia? Vamos olhar para o novo morfismo em um vídeo separado um pouco porque é bastante popular e me perguntam sobre isso o tempo todo. Mas sombra interna, sombras, saiba que você pode adicionar mais de um. Eles podem se candidatar a praticamente qualquer coisa aqui. Vamos pular para o próximo vídeo. 68. Camada de desfoque Desfoque de fundo e Desfoque de imagem no Figma: Oi pessoal, vamos ver mais algumas coisas. Na Figma, vamos olhar para a imagem desfocada, vamos usá-la apenas para fingir um pouco de profundidade de campo. Também veremos o fundo de desfoque. Vamos fazer essa pequena coisa que paira acima, você pode ver através dela? Isso desfoca o plano de fundo para ajudar nosso modelo a sair e ser um pouco mais distinto do plano de fundo. Tudo bem, vamos entrar e aprender a fazer isso. Começaremos com a camada de desfoque e é útil. Selecione neste, vou dizer Efeitos e vou usar a camada de desfoque. Ele desfoca as camadas. Vou te mostrar alguns casos de uso, vamos. O que vou fazer, vamos mudar para nossa visualização de desktop, e você viu no início e nós vamos pegar esses 1,2,3, vou duplicá-los. Só vou reorganizá-los. Você espera lá. Basta redimensioná-los, lembre-se se você usar sua ferramenta de seleção para redimensioná-los, digamos que eu aumente, isso não fica maior. Se você usa seu “K”, ou troque-o aqui para escalar e torná-lo grande e tudo aparecer para o passeio. Eu fiz isso e apenas os reordenei. Isso é como uma página de marketing, talvez a alternativa da página inicial, de qualquer maneira. Você pode selecionar toda essa unidade, ou todo esse quadro e, em seguida, ir Efeitos, vou adicionar um desfoque de camada. Aquele vai ficar um pouco fora de foco e este ficará ainda mais fora de foco, você entende a ideia. Vamos um pouco mais longe. Aqui vamos nós. Adicione sombras. Se você for adicionar sombras, você precisa fazê-las além do desfoque da camada. Preciso adicionar uma sombra, soltar sombra e soltar sombra. Posso selecionar todos eles. Posso fazer todos eles? Não. Esses dois, porque eles têm várias coisas selecionadas neles, não consigo ajustá-los completamente. Você pode se houver um monte deles e todos eles tiverem a mesma coisa, assista, todos eles têm a mesma sombra sobre eles. Você vê, você pode ajustá-los todos em movimento. Porque esses caras têm várias coisas aplicadas a ele, isso não funciona. Se você chegar a ele e o seu gosto, na verdade, eu quero copiar e colar isso em letras de diferentes, vamos dar uma chance a isso. Vamos ter uma sombra que não é muito ruim. Ainda mal. Talvez haja aquele truque em que jogamos a terra de nenhum homem que você conhece, quando você clica, lugar estranho, basta ir “Copiar” no seu teclado e ir para “U” e você pode colar este. Acabamos com dois deles. Tudo bem. Cole esse. Qual deles eu estou excluindo? Aqui vamos nós. Todos eles têm algumas das sombras, todos bonitos e embaçados. Em seguida, vamos ver o desfoque de fundo. Há algumas coisas que precisam acontecer. Você precisa de um plano de fundo. Estou usando a página de confirmação, estou colocando uma imagem dos arquivos de exercícios chamados map. Que é um mapa da minha área local. Acabei de capturar isso do Google Maps. Há um plug-in para o Google Maps, colocá-lo lá e ser capaz de ajustá-lo, mas é o que eu preciso para o momento, e agora precisamos de algo no topo. Então, vou usar um retângulo em vez de um quadro, para misturar as coisas, confundir todos. Pode ser um quadro. Vou dar um preenchimento de branco. Isso tem que ser parcialmente transparente. Isso faz parte do negócio, não 100%, mas em parte pode ser de qualquer cor. Vamos aplicar o efeito aqui em baixo. Não é a sombra que eu quero, desfoque de fundo e nada acontece. Essa coisa precisa ser parcialmente transparente e eu posso até me lembrar qual é. Tenho um borrão de fundo e tenho certeza que é o preenchimento. Se eu fizer 50%, é 50%, mas o plano de fundo não está embaçado, então não esse. É o preenchimento 50%. Lá vamos nós. Eu posso ver na metade dessa coisa, 50% até, e o fundo é desfocado por esse valor. Você pode trazê-lo para cima ou para baixo, apenas permite que você faça coisas como esses modelos pop-up que são um pouco mais claros e se separam do plano de fundo. Eles ficam bem em preto ou branco. Esta será minha página de confirmação de animação lembre-se que fizemos antes. Isso é desfoque de fundo. Digamos que este modelo também tenha uma sombra, e você tenha gasto muito e duro tentando ficar perfeito, não 24 apenas dois borrões, está tudo bem. Talvez outro que seja um pouco mais waffty. Vai se espalhar um pouco, espalhar, borrar. Isso pode ser zero, pois está saindo de todas as direções e a opacidade diminuirá para 10%. Você tem um monte de coisas acontecendo. Vamos olhar para criar um estilo a partir disso para que eu possa mostrar a vocês, vou conseguir, é como tudo o resto. São esses pequenos pontos, adicione a vantagem para adicionar um, ele vai ser chamado de meu modelo de desfoque. Aqui vamos nós. Olha, para que mais tarde, quando você criar algo retangular para desenhar algo acima de tudo o resto, talvez passe por isso. Podemos ir, não vai fazer tudo, mas vamos para o meu modelo de fundo de estilo. Contanto que eu diminua a opacidade do preenchimento, 50%, você pode ver que funciona, na verdade eu quero ser branco ou preto. Esses são os efeitos, há apenas quatro. É tudo o que você precisa, na verdade, não é tudo o que você precisa. Precisamos de reflexo de lente, Figma, onde está o meu flare de lente? Flare de lente, completo. Vamos para o próximo vídeo. 69. Como fazer botões de ui neuromórficos no Figma: Olá, todos. Neste vídeo, vamos ver esses botões aqui. Eles são neumórficos, é o termo usado para descrever esse estilo de IU empurrado para fora. É muito fácil de fazer em Figma. Eles parecem bonitos. Eles têm alguns problemas de acessibilidade, mas vamos entrar e falar sobre isso agora na Figma. Antes de começarmos, o que é neumorfismo ou design neumórfico? É esse olhar. Parece lindo, parece que o botão é pressionado pelo tecido ou gel. Parece lindo. Eu corri para fora e editei em muitos projetos quando o descobri pela primeira vez. É basicamente apenas um monte de sombras, e eu vou te mostrar como fazer isso em um segundo. O problema é que há muitas pessoas que odeiam isso, e eu sou uma delas agora também. Por quê? Sua acessibilidade. São pessoas que estão usando seu dispositivo com pouca luz ou tela ruim ou têm impedimentos visuais, eles não vão ver seu botão. Vê aquele perto do cadastro? É muito difícil de ver, muito baixo contraste. Está fora do escopo deste curso, mas como designer de UX, você deve estar olhando para a acessibilidade e, especialmente, para esse design de interface do usuário da Figma, olhando para algo como taxas de contraste. Anote isso e seja algo que você vai e olhe depois deste curso Figma. Basicamente, o que eu faço é, é muito fácil depois de um tempo saber o que vai funcionar e o que não é. Se eu apertar meus olhos nesses botões, olhar através dos meus cílios, eles desaparecem, nem consigo dizer onde eles estão. Eles simplesmente derretem. Esse é o meu teste de acessibilidade rudimentar. Não é valioso, mas apertar os olhos, isso é estranho, toda essa interface desapareceu. Você precisa de alguma diferença muito forte, talvez apenas forte o suficiente entre coisas, botões e texto. Você pode fazer isso. Vou mostrar uma abordagem equilibrada aqui na Figma. Há muitos sabores diferentes desse neumorfismo. Você pode ir e pesquisar o neumorfismo no Google e procurar nas imagens do Google e encontrar tutoriais das pessoas sobre elas. Eu vou te dar o caminho básico, porque basicamente tudo é que eu tenho isso de levantar de outro tutorial, eu tenho este botão. Pode ser qualquer coisa, pode ser botão de texto, UI, vamos usar essa coisa. Não consegui nada aplicado a ele. Tudo o que eu quero fazer é basicamente que é um monte de sombras. Em Efeitos, sabemos que podemos adicionar mais de uma sombra. Eu peguei meu primeiro aqui, e basicamente, há dois no canto inferior direito e dois no canto superior esquerdo. Estes dois no canto inferior direito são pretos e estes dois no canto superior esquerdo são brancos. Agora, o problema com o uso de branco no canto superior esquerdo, é que ele corresponde à cor de fundo. O que quer que você faça, seja uma versão de modo escuro ou um modo claro como estamos fazendo, o fundo não pode ser preto ou branco sólido. Quanto maior o contraste esse pouco, se você fizer uma pequena dica, vamos ver como isso vai. Vamos alinhar essa lente. O fundo é um pouco mais escuro, então vou fazer duas sombras soltas aqui em baixo. Vou sair, talvez eu faça dois grandes. Esses números terão que se ajustar dependendo do que você está fazendo. Vou arrastar esse para talvez aqui e o outro para estar por aí, borrado. É bom e embaçado. Há um grande waft, preto embaçado. Vou adicionar outro. Então, há o meu grande waft preto lá embaixo. Este aqui vai ser um título 1, então talvez um e um, e o borrão será talvez dois. Você pode ver que ele adiciona essa profundidade a ele. Fizemos isso antes, duas sombras. Agora, precisamos adicionar mais dois. Esse, ele o adiciona ao topo. É difícil saber, você não pode renomear esses, então fica um pouco complicado, isso você precisa que seja branco e precisa que seja negativo. Então precisamos ir até esse caminho, você vai embora. Já temos um senso para isso. Vou fazer apenas um pequeno. E daí? Menos 2, menos 2, desligue o desfoque para dois. Estamos chegando lá, certo? Vamos adicionar outro. Está no topo, vá para branco. Ele vai para branco 100% por padrão. Vamos tonificar isso em um segundo, e este aqui vai ser até a esquerda novamente, até o topo, e talvez eu volte a desfocar um pouco. É legal. É isso. Aqui está meu tutorial, e talvez eu vou diminuir a opacidade disso, e é sobre isso de volta ao contraste também. Então, vamos um pouco mais escuros. Agora parece pior, então é um equilíbrio. Deixe-me diminuir a opacidade desses, 20%. Este aqui, reduzi-lo para talvez 40%. Suponho que eles só olhem para o documento lá. Eu acho que aquele top grande wafty, que é o wafty. Não sei por que uso a palavra wafty one. Eu consegui isso de Sarah Parkinson, ela costumava dizer rapazes wafty. Olha isso, parece neumórfico? De qualquer forma, eu gosto porque ainda há o contraste. Ainda tenho o contraste suficiente, mas também adicionei um pouco disso. Agora, deixe-me mostrar rapidamente, parece diferente em diferentes. Aquelas configurações que acabei de mostrar, ainda são como uma grande sombra, uma pequena sombra que você fez aqui, preto, os dois lá em cima, branco. Mas se eu mudar a cor de fundo, vamos. Vamos fazer um mau. Vai parecer legal, mas a taxa de contraste provavelmente não será alta o suficiente. Então, vamos fazer isso. Você vai ter a mesma cor que o plano de fundo, aqui está, e ele aparece, isso não funciona. Podemos ter que ir muito mais baixo nisso, então talvez 5, 10, 5. Você vê, isso dependerá do que você está fazendo, de que cores. Não é uma configuração específica. Se você seguir o tutorial de alguém e o seu não estiver tão incrível e neumórfico, talvez seja necessário ajustar as coisas para caber. Eu não sei. O que você acha? Se você está interessado nisso, google design neumórfico Figma. Há um monte de coisas na comunidade que você poderá simplesmente baixar e começar a usar. É neumórfico, e você pode simplesmente copiar e colar, começar a usá-los e apenas dar uma pequena olhada. Se você quiser, “Oh, isso parece legal, veja como Dan fez isso. Eles não vão invadir o caminho dele. Você viu lá. Onde está outro bom? Eu não sei. Há um monte de diferentes. Encontre o visual que você gosta. Anote qual ética foi aplicada e quão grande e quanto tempo elas são estendidas, mas tenha cuidado. Há momentos em que é bom fazer coisas boas. Mas se você quiser que isso seja utilizável e em um sentido prático do mundo real, esse botão não passará nenhum teste de acessibilidade e apenas dificultará para seus usuários. Mas se você ainda está animado com isso como eu estava quando eu vi pela primeira vez, fique louco. Coloque o neumorfismo em todos os lugares. Prepare o sistema, como aprender o reflexo da lente quando você aprende photoshop pela primeira vez, coloque tudo, mas eventualmente você percebe que tudo precisa de um reflexo de lente. É isso. Vejo você no próximo vídeo. 70. Projeto do curso - Efeitos: É hora do projeto de classe. Este é o projeto de efeitos. Eu quero que você passe e aplique pelo menos um dos quatro efeitos diferentes a diferentes partes do seu InDesign e faça uma captura de tela e faça o upload. Tanto as atribuições/projetos quanto também nas mídias sociais. Adoraria ver o que você fez. Mesmo se você decidir que não usará desfoque de fundo ou desfoque de camada em seu design final, basta aplicá-lo aqui agora, praticá-lo, usá-lo. Desça e encontre outros tutoriais sobre como fazer borrões de camadas e borrões de fundo para ver se você pode encontrar alguns casos de uso mais interessantes para isso. Experimento. Nessa mesma linha, quero que você faça um dos projetos neumórficos. Pode ser um botão, pode ser alguma interface apenas para praticar principalmente o uso dos efeitos da Figma. Mesmo se você decidir que sou contra, eu sou uma das pessoas no piquete, digo não ao design neumórfico, tudo bem. Eu só quero que você pratique isso porque pode ser bonito. Vamos lá. Se você estiver fazendo isso também, não use apenas minhas configurações com duas sombras esquerda e direita, superior e inferior, uma é branca, uma é preta, saia e dê uma olhada em outros tutoriais, versões de outras pessoas, venha com o seu próprio, pode ser um derrame. Dê uma olhada como, “Quero tentar copiar esse ou este.” Encontre tutoriais, dê uma chance, faça uma captura de tela, faça o upload. Adoraria ver o que você faz. Se você seguir o tutorial de outra pessoa, quando estiver compartilhando como dizer nas mídias sociais, certifique-se de compartilhar o link para o tutorial também para ajudar outras pessoas por aí. Eles podem ser como, “Cara, isso é incrível. Como você fez isso?” Porque você vai obtê-lo e explicar se você fez isso sozinho, talvez explique as configurações, talvez a captura de tela. Se você começou com outra pessoa e fez ajustes, talvez um link para o tutorial também seja útil. Não sei por que estamos de volta aqui, mas estamos. Efeitos, saia, pratique-os. Mal posso esperar para ver o que você faz. 71. Como salvar localmente e salvar história no Figma: Olá a todos. Neste vídeo, veremos salvar localmente em sua máquina e o histórico de salvamento incorporado na Figma. O que você provavelmente percebeu é que Figma realmente não precisa ser salva. É baseado em nuvem. O que é baseado em nuvem? Isso significa que, mesmo que eu esteja usando minha versão para desktop, ela está salvando na nuvem, salvando casos on-line e está funcionando o tempo todo. Na verdade, não precisávamos fazer um salvamento de arquivo adequado. Não há como Salvar normal. Há um Salvar uma cópia local. Cópia local significa apenas em vez desta adorável versão online, vou salvar um arquivo na minha área de trabalho, que às vezes é que sinto que preciso fazer isso, enviá-lo por e-mail para alguém, arquivá-lo. Mas você normalmente só compartilhava com alguém. Mas vamos salvar uma cópia local. Tudo o que ele faz é dar algo que você pode, basicamente uma versão para download e é um ponto fig. Salve-o em sua área de trabalho, envie um e-mail para as pessoas, tudo estará incluído. Quando eu o abro na Figma, ele irá convertê-lo e colocá-lo em seus documentos do Cloud e parte do workspace Figma. É assim que fazer isso localmente. O outro é o histórico de versões. Digamos que você chegue a um ponto agora porque, basicamente, se você estiver no plano gratuito, você recebe 30 dias de reversão do histórico. Está sempre gravando. Você pode encontrá-lo de algumas maneiras. Vamos dar uma olhada neste longo caminho. Histórico de divisão salvo, vamos mostrar o histórico de versões. Aparece aqui, e mostra todas as coisas que você fez. graça, economizará até 30 dias com as coisas. Você pode ver que houve dois autosaves lá. Vamos voltar alguns deles, vamos voltar a isso salvamento automático. Vamos clicar neste. Quão longe foi isso? Fique de olho nisso. Uau, o pote da casa em chamas. Posso voltar a isso e vê-lo. Olha, é um grande desfazer, bem, essas histórias são salvas. Para a versão gratuita do Figma no momento, são 30 dias. Você pode ser ilimitado se for pago. Esse é um dos parques. Digamos que você queira voltar para ele, você gosta, cara, eu odiei tudo o que fiz até agora. Quero voltar a isso. Você pode clicar nesta pequena linha pontilhada aqui e dizer restaurar esta versão, e ela voltará todo o caminho. Mas tenha cuidado porque você está se livrando de todas essas coisas futuras. Na verdade, uma coisa antes de seguirmos em frente, está um pouco claro o que fazer agora porque só tem visualização, você tem que apertar este botão “Concluído” para voltar para onde você estava. Vou mostrar o histórico de versões. Digamos que eu quebre essa coisa. Aqui vamos nós. Eu quebro e estou tipo, cara, gostaria de poder voltar. Eu posso. Vamos voltar para uma de nossas versões. Eu não uso esse método. É fácil não ter nada selecionado e ver essa pequena seta aqui e é o seu histórico de versões. É mais rápido? Eu não sei. Ainda aonde eu vou. Vou aqui e posso reverter para a nossa versão. Também posso clicar em “Desfazer”. Isso funciona totalmente. Clique em “Desfazer”. Vamos Comandar Z. Acho que está aqui no PC desfazer. Você pode fazer isso, mas esses autosaves são como pedaços maiores, grandes coisas aconteceram. Se eu reverter e eu disser que você e agora restaurar esta versão, não salva um idioma diferente, lê sair. Então, novamente, você tem que clicar em “Concluído”. Agora estou de volta para onde estava naquela história e estou substituindo qualquer coisa futura que fiz, tudo bem. O que eu gosto de fazer é, na verdade, nomeá-los. O que você teria visto em mente que você não tem no seu, são todos os nomes desses CLES. Isso é para mim e meus tutoriais, mas você pode usá-los para o seu trabalho também. Basicamente, quando terminei algo, gosto de nomeá-lo. Digamos que estou terminando este vídeo aqui. Este vídeo é chamado de como salvar localmente. Então eu vou mais e quero nomear este. Você pode adicionar mais descrição aqui, mas só salva como mais tarde, eu posso ir, é onde eu estou, em vez de adivinhar, foi há três horas, foi há três dias? É por isso. Você pode usá-lo um pouco diferente. Você pode estar a um minuto de Doug ou alterações na interface do usuário ou algo mais significativo para você mesmo e você pode reverter lá se precisar. Outra coisa que você pode fazer é duplicá-lo porque se eu reverter e começar a trabalhar, eu apago as coisas que eu poderia ter feito já. Isso não faz sentido, não é, Dan? Vamos entrar no histórico de versões. Digamos, tudo bem, estou aqui e quero voltar a isso, mas quero manter essa versão também. Não quero substituí-lo. O que você pode fazer é poder clicar com o botão direito do mouse. Vamos encontrar um que seja um pouco mais cedo, mascarando e cortando imagens. Lembre-se naquela época, isso é duplicado. Tudo o que está fazendo é, você pode ver que ele está duplicado em seus arquivos? Vamos abri-lo. Ele fez uma cópia dele naquele momento. Vamos dar uma olhada no que estamos fazendo. Sim, lembra desta parte do curso? Agora, se eu voltar para minha casa ou você pode ter que voltar para aqui e voltar para arquivos e descartes, veja, eu tenho outra versão. Vou ter que renomeá-lo porque isso vai ser muito confuso. Este é o meu vídeo de imagens de mascaramento. É um documento Figma separado nesse estágio. Isso tudo faz sentido? Está crescendo em mim, isso funciona on-line, funcionando na nuvem porque significa que posso pular em qualquer computador e todos os meus arquivos estão lá, fazer login na Figma, usar a versão do navegador. Você tem que lembrar quando você está usando isso quando você chega ao seu ponto quando você está terminado, ótimo, por que não posso fazer nada? Clique em “Concluído”. É isso. Salvando histórias ou ótimas coisas em Figma. 72. O que são componentes no Figma: Olá, todos. Neste vídeo, veremos um componente. O que é isso? Por que isso é útil? A versão curta é que você tem um mestre e uma instância, este mestre pode controlar todos os seus filhos pequenos que são chamados de instâncias, mas as criancinhas podem fazer coisas que são diferentes. Você pode ver que é verde, tem texto diferente. Podemos criar um componente mestre, fazer algumas pequenas substituições todas elas se sentem únicas, mas quando fazemos uma mudança em negrito, todas elas ficam em negrito, super útil. Vamos entrar e ver como fazer um componente. Vamos falar sobre os componentes. O que são componentes? São coisas reutilizáveis. Tenho muitas vantagens, vamos começar com um bom exemplo simples. Eu tenho esse botão aqui, pode ser um retângulo, você pode fazer qualquer coisa em um componente. Vou usar esse botão porque quero usá-lo mais de uma vez. Porque no momento em que preciso encontrá-lo, copiar e colar, então vou criá-lo no que é chamado de componente mestre. Selecione nele. Está aqui, é chamado botão, clique neste botão aqui. Ele diz Criar componente, boom. O que mudou? Muito pouco, exceto que o ícone mudou como desfazer, refazer. Ele mudou para essa coisinha. Você verá componentes em todos os lugares, e começaremos a usá-los um pouco agora, e depois os usaremos, você descobrirá que tudo é um componente. Por que você diz? É porque ele adiciona ao meu painel de ativos, o que é útil, então estávamos fazendo exclusivamente com camadas. Vamos para Ativos, e dê uma olhada na nossa página de checkout, há meu pequeno botão lá. Facilita a reutilização deles. Aqui embaixo, na verdade, não quero este, quero esse botão aqui para que eu possa clicar em segurar e arrastá-lo para fora. Isso é considerado uma instância do meu componente mestre. Meu mestre é aquele original aqui. Esse cara é o governante de todas as instâncias. Digamos que eu faça este e não quero excluí-los. Eles me levaram anos para me arrastar. Eu tenho este, copiar colar. Eu tenho três deles. Essas instâncias daquela original. Por quê? Este é CO, esse monstro está aqui? Se eu estiver neste, se eu entrar nele, então vou voltar ao meu painel de camadas, clique duas vezes nele para entrar. O que eu estou querendo fazer é talvez mudar algumas coisas. Talvez eu precise fazer dele um tamanho diferente. Olha, estão todos conectados. Esse é o poder de ter componentes, o mestre e a instância, ou o pai e o filho. Isso é chamado de massa, a principal e as versões anteriores da Figma. Você vai me ouvir chamá-lo de principal um pouco por acidente, e agora é chamado de mestre. O mesmo nome diferente. Legal. Isso é uma vantagem. Outra vantagem é que você pode realmente fazer algumas variações neles. Você pode dizer, na verdade, este aqui, eu vou mudar para essa cor. O mais legal disso é que posso fazer algumas pequenas aminas para minhas instâncias, algumas variações nele. Mas veja isso, ainda é controlado para que eu possa tornar tudo um pouco individual, mas controlar algumas das grandes coisas, como os tamanhos e essa escala. Posso entrar na fonte aqui e alterá-la para ser leve. Você vê que todos eles se iluminam. Você diz: “Oh, isso é legal.” E se eu precisar desse botão para dizer que não compre, mas exclua? As instâncias podem ter algumas partes exclusivas para elas. Cor, mudei o texto, mas há algumas partes que o mestre controlará. Está muito bem implementado aqui na Figma. Digamos que você tenha aqui no seu e, na verdade, eu preciso redefini-lo. Quero voltar a ser como o mestre, posso clicar com o botão direito do mouse nele e dizer, vamos redefinir todas as substituições. Substitui o que fazemos nessas instâncias, estamos substituindo algumas delas como se fizéssemos uma cor rosa fúcsia rosa rosa, mas você pode redefini-la. Muitas vezes, você perderá o controle de como bem, posicionamento com o título é um mestre. Posso clicar com o botão direito do mouse e dizer: “Na verdade, Componente principal, vá para esse para mim.” Bem, aí está, esse é o principal, e agora posso fazer meus ajustes. Preciso me livrar disso, arredondar os cantos, 0, 0, 0. Você pode ver que todos eles vêm junto para o passeio, mas este aqui, na verdade eu quero que este tenha alguns cantos, 10, 10, 10. Digitando o errado, aguente, 10. Eu adicionei ao redor dos cantos, então eu tinha algumas substituições aplicadas a isso. Legal. Vamos cobrir um pouco mais em um pouco, mas basicamente tudo se torna um componente como se fosse um quadro. Você começa com um quadro. Bem, a bondade do quadro, e então eventualmente se torna um componente. Como este logotipo aqui, seja ótimo, é um quadro, vou transformá-lo em um componente. Por quê? Porque eu quero que esse logotipo entre no meu painel de ativos. Na página de checkout, ela está lá. Posso ir ao meu novo documento e estou: “Ok. Vamos para nossas páginas. Vamos abrir minha área de trabalho”, e eu disse : “Preciso desse logotipo. Onde poderia estar?” Os ativos, lá está lá. Olhe para isso. Nesse caso, talvez eu nunca mude isso, mas talvez. Significa que ele pode voltar ao original. O que acontecerá é assistir a isso, porque estou em uma página diferente, vou ver camadas aqui, uma em uma página diferente. Vou clicar com o botão direito do mouse e dizer voltar ao meu componente principal, e ele voltará para a página móvel que temos de volta ao original. A outra coisa que eu não mencionei é que o componente mestre se parece com isso. É o doc com quatro diamantes totalmente qualquer coisa. Se eu voltar para a minha versão para desktop, você verá que é o mesmo nome, mas ele tem este single, não um quadrado de diamante no seu lado, mas é oco, essas são as instâncias. A outra maneira de dizer é dar uma olhada. Vamos voltar à nossa visualização móvel. Agora, no momento, temos a nossa em uma página, mas se eu arrastá-la para a terra do ninguém, você verá esse ícone novamente. Você verá isso um pouco. Esse é o meu mestre, e vamos arrastar uma instância. Antes de arrastarmos uma instância daqui, ela não tem todas essas coisas extravagantes com os diamantes, você pode simplesmente duplicar isso, e o que você fez é que você não fez para os mestres, você realmente fez um instância. Você pode dizer meu painel de camadas, você vê lá, apenas um pequeno diamante. Original, o mestre, o principal, o pai e, em seguida, a instância com base nisso. Você pode acabar com 100 instâncias em apenas um mestre. Vamos passar por mais algumas vantagens para componentes. 73. Como atualizar, alterar e redefinir seus componentes: Olá a todos. Neste vídeo, vamos analisar a atualização, alterar, redefinir, enviar substituições. Sim, todas as coisas boas a fazer com componentes e suas instâncias, além do atalho doce. Pronto? Modo claro, modo escuro. Vamos pular para dentro. Vejamos, temos essa coisa aqui que fizemos antes. Quero transformá-lo em um componente, porque quero usá-lo em coisas diferentes, e quero que seja um mestre. Selecione isso, torne-o um componente. Ótimo. Ele pode descer e só para que ele possa estar lá. Agora precisamos de uma instância dela. Podemos arrastar um Alt ou ir para o meu painel de ativos, descobrir onde ele está, lá está, arrastá-lo para fora. Sabemos que é uma instância, lembramos disso, porque na última instância do painel tem aquele pequeno tipo de diamante único, múltiplos diamantes preenchidos para o mestre. Sabemos que podemos selecionar sobre isso e dizer que realmente me encontre o componente principal. Posso ir até ele e fazer um ajuste. Digamos que isso precise ser ousado agora. Negrito. As instâncias são atualizadas. Sabemos como atualizar isso. Isso é fácil. Sabemos que podemos entrar nesta instância em particular, essa instância em particular. Posso entrar nele e dizer onde está esse quadro? Este aqui é chamado Stephen Butler. Você provavelmente já se deparou com ele. Ele é incrível. Grite Stephen. Podemos fazer com que nossas instâncias façam pequenas coisas. Eles são chamados de substituições do mestre, mas também podemos empurrar para trás. Digamos que esquecemos que estamos trabalhando nisso. Estamos como, sim, que estava em alguma outra página e em algum outro documento. Eu acabei aqui. Eu sou como, posso ajustar isso, posso entrar nele, e decidimos que todos esses estilos, não gostamos dos cantos arredondados. Estou segurando o turno para selecionar todos eles. Vou dizer, as partes interessadas voltam e disseram, sem cantos arredondados. Vamos para zero. Tenho que ter seis pedaços pontudos, ótimo. Na verdade, eu quero isso. Você percebe que você arrasta outro, você é como se eu fosse entrar em minhas coisas, há outra que você gosta, espere que elas sejam atualizadas. Você pode empurrar de volta para o original. Vamos deixar essas outras instâncias. Aí está meu mestre escondido lá em cima. Esse cara que eu sou, na verdade, podemos empurrar as substituições de volta para eles, mestre? Você pode. Vamos selecioná-lo. Podemos ir ao nosso componente principal e dizer empurrar as substituições para o componente principal. Você percebe que uma está atualizada e todas as outras instâncias o fazem se você estiver trabalhando em uma coisa específica, você não precisa ir e encontrar o mestre potencialmente, basta ajustar a instância e empurrar para trás. Outra coisa, se você decidir passar, nós meio que cobrimos isso, estou colocando todos eles em um vídeo para prosperidade. Você decide fazer algumas substituições, e você é como, essa é a cor certa? Você pode clicar com o botão direito do mouse e dizer, na verdade, vamos para limpar substituições. Não consigo vê-lo. Ele redefiniu todas as substituições. Há outra maneira de fazer isso aqui em cima. Você pode ver esse pequeno ícone, redefinir todas as substituições. Ele meio que voltará a esse design original. Vamos fazer algumas setas nesta página aqui, quero mostrar outra coisa. Só vou usar a flecha. Dê uma cor sem motivo, não consigo vê-la. Vamos estreitar é minha seta para a direita. Vou para a seta para a direita, vou fazer uma instância. Agora o atalho é, então eu quero dois deles. Eu quero uma seta para a esquerda e para a direita para o design da minha interface do usuário sobre duas dessas coisas, e haverá casos em que eu preciso que ele aponte para a direita, para a esquerda, você pode ter para cima e para baixo, pode estar ligado ou desligado, seja lá o que for. Você pode realmente selecionar mais de uma coisa e ir até aqui e dizer, não apenas fazer componente, se você tiver mais de um selecionado, essa opção aqui faz vários componentes como esse. Então, nos meus ativos, você pode ver que eu tenho dois deles todos de uma só vez. Se você desenhou vários botões e quer que todos sejam, você não precisa fazê-los individualmente, basta selecioná-los todos e dizer fazer vários componentes. Eu tenho esses dois, e digamos que neste design aqui por qualquer motivo que eu preciso de uma flecha, você é como ótimo trabalhar, trabalhar, trabalhar, trabalhar. É a flecha errada. Posso fazer duas coisas. Posso dizer que meu amigo realmente pode ir até aqui, e eu não quero que você seja flecha um, eu quero que você seja flecha dois. Lá vai você e você apenas os trocou para fora. Você pode ver que isso será bom para ícones. Você pode estar usando o ícone inicial e queira alterná-lo para o outro ícone, o ícone de compartilhamento. Há uma maneira mais rápida que você pode, então eu tenho nossa seta para a esquerda aqui. Você pode arrastar isso segurando a tecla Option em um Mac, tecla alt em um PC, basta despejá-lo perto de estar no topo e ele irá alterná-lo automaticamente. Talvez tenhamos duas versões disso. Bom ponto. Eu quero duas versões disso, então isso é como uma versão leve do logotipo, quero torná-lo uma versão escura. Isso no momento é uma instância, eu quero quebrar a instância. Quero criar um novo componente como uma versão escura. Eu não quero que seja uma instância que apenas o substitua. Na verdade, eu quero um componente completamente novo para poder clicar com o botão direito do mouse nele e dizer desanexar essa instância. Então, ele está de volta apenas ao logotipo antigo normal. É meio que como quebrá-lo mesmo que seja isso que você quer fazer, você acabou de quebrar. Não é mais um componente. Não há nada como conectado a qualquer outra coisa. Dias felizes. Mas vamos dizer que agora, embora queiramos entrar na verdade e mudar tudo para, esse é o quadro de fundo. Vamos fazer isso com o texto. Queremos mudá-lo para uma versão escura. Eu o desapegei. Agora vou torná-lo um componente como seu painel. Tenho uma versão clara e escura. Tenho minhas versões claras e escuras lá. Vamos criar uma nova página. Vamos fazer isso, por exemplo, eu quero pegar minha ferramenta de quadro e, em seguida, basta clicar quando eu tiver que ir para a ferramenta de quadro, vamos encontrar o iPhone oito. Temos um design. Usamos a versão escura do nosso logotipo. Parece bom, perfeito. Em seguida, fazemos outra versão e o plano de fundo está usando um tipo de cor escura. Posso entrar aqui e dizer e manter pressionada minha tecla Option em um Mac, tecla alt em um PC, e vou apenas trocar esses dois por aí. Você pode trocá-lo com qualquer coisa. Se você precisar de estreito lá agora, vai funcionar. Além disso, você pode trocá-los por aqui. Lembrar o logotipo. Agora, essa coisa aqui, é um pouco complicada como sushi, se você não deu certo as suas coisas diferentes. Muitas vezes, é fácil, especialmente se você nomeou suas camadas diretamente para fazer uma pesquisa. Logotipo, e ele vai reduzi-lo apenas para os ensaios que eu nomeei o logotipo. Desfazer. Tudo bem, é assim que atualizar, alterar, redefinir seus componentes. Uma coisa, na verdade, antes de eu ir é que essa coisa de comutação não funciona com os componentes principais. Este é um componente principal. Como eu sei? Tem aquela pequena estrela lá, e eu sei porque se eu for bem, vou trocar você para a versão light e segurar minha chave doce, não funciona. Os mestres são especiais, eles têm algumas coisas extras por aqui. Vamos fazer uma instância disso. A instância tem muito pouco. Você pode fazer algumas coisas aqui, mas esta que você vê tem coisas como eu quero adicionar uma descrição. Este é o logotipo do meu modo escuro. Você pode adicionar um link de documento quando estiver ficando um pouco mais avançado, e digamos que seja essa coisa aqui. Com um pouco mais, você pode realmente ter que criar como um documento de página da web ou uma especificação de design, ou talvez alguma documentação do sistema de design para explicar como este é esse preenchimento, não altere isso quando estiver fazendo neste caso, como muito mais detalhes, você pode adicionar um URL, onde está, lá. Basta copiar e colar o URL. Agora esse é o fim. Vejo você no próximo vídeo. 74. Você não pode destruir os componentes principais no Figma: Oi lá. Neste vídeo, vamos ver por que você não pode matar um componente principal na Figma. Bem, é difícil de fazer de qualquer maneira, deixe-me mostrar o que quero dizer. Vamos parar de chamá-lo, matá-lo e vamos chamá-lo de exclusão. Vou criar esse top nav como um componente. Não são vários componentes, apenas um grande componente inteiro. Vou chamar isso de Top Nav. Então esse é o mestre. Vamos colocá-lo lá e vamos fazer uma instância dele de volta para isso. Mas vamos dizer mais tarde que eu esqueço, eu sou como, o que é essa coisa, não preciso disso. Exclua-o. Na verdade, ele está me mostrando o painel de ativos, então há meu componente principal no painel de ativos, mas digamos que eu clique nele e o excluo. pode vê-lo excluído daqui? Assista excluir. Você é como, Oh não, ele se foi, mas você não pode excluir um componente mestre, é difícil. O que você pode fazer é, desde que você tenha pelo menos uma instância dela, você pode clicar com o botão direito do mouse nessas instâncias. Normalmente, isso diz ir para o componente principal, mas agora diz que não consigo encontrá-los, posso restaurá-los? Ele disse: “Sim, por favor.” Ele aparece de volta. Há um recuo onde ele estava. Exclua-o para sempre, se você excluí-lo e sua instância. Lá, você realmente, ele provavelmente se foi. Mas, desde que você tenha pelo menos uma instância olhando ao redor, você pode voltar para esse componente principal novamente. Agora, outro nível para isso é que estamos usando um mestre dentro do mesmo arquivo de design. Digamos que pegamos um mestre ou uma instância de outro arquivo de design. Vou encontrar algo dos meus rascunhos. Pode ser da comunidade, algo que alguém compartilhou de você. Vou usar isso, é algo que usamos no início do curso. É da comunidade e vou para os ativos, que estão acima dos componentes, e o que eu quero fazer é que eles estão por todo o lado. Eu quero a coisa de busca. Digamos que eu queira esse pequeno pesquisador. Arrastei uma instância e a copiei. Não quero usar isso na minha. Normalmente você não está fazendo isso de propósito. Você acidentalmente copia você gosta, eu vou pegar tudo isso e apropriá-lo, roubar, porque é bom e bem definido e vai dizer algum tempo. Essa é uma das coisas adoráveis sobre essa indústria UWiX e Figma em particular, há muitas naquela comunidade que podemos usar. Mas digamos que façamos isso de propósito, copiamos isso e instância, tem que ser uma instância para isso funcionar porque o que eu quero mostrar é, o que aconteceu com nosso painel de ativos. Um segundo atrás, se eu desfazer, só tínhamos componentes locais. Isso significa que os mestres estão neste documento em algum lugar, mas se eu colar uma instância de outra pessoa, obtemos essa coisa nova. Ótimo, Nice. Usamos essa coisa neste arquivo. É uma instância, como conheço as camadas? Ou é o pequeno diamante deles? Isso surgiu, o que é legal, mas onde está o original? Onde está o mestre? Na verdade, podemos voltar a ele como fizemos antes. Vá para o componente principal. É um idioma um pouco diferente do outro, mas vai ser a mesma coisa. Ela existe, não neste documento. Mesmo que eu tenha esse documento fechado, então eu esqueci um ganho disso. Se eu for clicar com o botão direito do mouse e disser, vá para o componente principal , boom, ele abrirá o arquivo. Vai tentar encontrá-lo para mim. Você está lá, você pode selecioná-lo. Isso às vezes é útil, e na maioria das vezes apenas uma dor na bunda. Se eu for para ativos e você gosta, por isso que está lá. O que você pode fazer é, eu cliquei com o botão direito, você também pode ir para o componente principal. Na verdade, o que vamos fazer é clicar com o botão direito do mouse e dizer desanexar instância. Não é mais um componente. É por isso que ele desapareceu e ele vai torná-lo um componente e pelo menos agora é um componente neste arquivo. Ele não voltará a esse outro arquivo agora ele está desconectado. Isso faz sentido? Agora, no momento, a forma como vou desfazer isso. Ele ainda está conectado a esse arquivo original. No momento, não, se eu for atualizar isso, vá para o componente principal e atualizei aqui, ele não flui. Não é a maneira ideal, ou pelo menos a maneira que a Figma quer que você controle arquivos grandes. Se eu entrar aqui agora e disser destruir, salve isso, clique em “Concluído”, Não há nenhum salvamento real. Eu ainda faço isso, comande isso ou controle isso. Isso não ajuda. Vamos fechar isso. Você pode ver que ele não flui dessa maneira. A atualização de peso e fazer assim, fazer com que ele flua é algo chamado biblioteca, uma biblioteca de equipe. Faremos isso um pouco mais tarde no curso. É uma das coisas pagas que precisamos usar e se você realmente quiser saber agora você pode ir verificar a parte do curso, é chamado de bibliotecas. No momento, vamos nos ater aos componentes e vamos fazer outra coisa sobre não matar componentes. Você pode ir até lá. Os componentes principais não morrem. A outra coisa que não pode morrer. Esta é uma instância do meu componente principal. Lembre-se, eu sei porque nas camadas, este é o meu original, mas digamos que eu tenho algumas delas. Eu tenho este e copio-o. Cola esse lá e tenta arrastar tudo isso para baixo. Sempre que estamos tentando selecionar tudo a bordo, eu tentando arrastar uma caixa ao redor de tudo, lá vai você. Eu tenho este e este. Nesse caso, não preciso de um botão home. Já estamos em casa, então vou entrar aqui, clicar duas vezes nele e clicar em excluir, e ele desapareceu. Na verdade, não. É estranho. Nada está relacionado. Você não pode matá-lo, lembra? Vamos dar uma olhada no que aconteceu. Vou movê-lo para que você possa ver isso. Podemos ampliar bem com o ângulo da câmera. Vou desfazer. Há minha instância Top Nav. Instância principal. Se eu entrar nesse clique duplo para entrar na minha instância e eu disser, estou usando apenas a tecla Delete no meu teclado. Veja o que acontece com essa coisa chamada Subtrair. Ele deve ser chamado de botão Home, mas hey, má nomeação. Você vê que na verdade não desaparece. Na verdade, não desaparece. O globo ocular simplesmente se fecha. Você não mata as coisas em um caso, apenas esconde. Isso significa que podemos ligá-lo novamente mais tarde e não interrompe a conexão entre esses dois. Se eu quisesse me livrar dele para sempre, eu tenho que entrar no meu principal e ele será excluído disso e disso. Isso faz sentido? Você pode encontrar coisas que têm um monte de coisas que eu vou desligá-lo. É por isso que você não pode matar componentes, mesmo pequenos pedaços deles e o que fazer quando você está trabalhando com o que parece ser os arquivos de outras pessoas, mas na verdade apenas projetou arquivos que fazem parte do seu mundo Figma que você não fez. Na verdade, isso é algo que eu não mencionei. Vou abrir essa coisa de novo. Vamos voltar para aquele local. Se você realmente trazer o Mestre em vez da instância, tudo isso desaparece. Digamos que eu vou precisar trazer isso, qual deles, ponto de exclamação. Se eu trouxer o Mestre, sei que esse é o mestre. Copie e eu o trago. Vejamos nossos ativos, cole-os. Aí está, você pode ver que é apenas parte dos meus componentes locais, não usado neste arquivo. Se eu quiser usar neste arquivo, clique com o botão direito do mouse, desconecte, faça um componente novamente, ele está de volta. Espero que isso tenha sido útil. Os componentes podem ficar um pouco misteriosos às vezes. Vamos despejados no próximo vídeo sobre componentes agora. 75. Onde você deve manter seus componentes principais no Figma: Ei gangue. Neste vídeo, vamos falar sobre onde você deve manter seus principais componentes. No momento, estamos apenas jogando-os em todos os lugares. Há uma prática recomendada, deixe-me mostrar-lhe como. Esta é a minha melhor prática e muitas das melhores práticas de outros designers. Você pode escolher o seu próprio caminho. No momento, nosso painel Ativos aqui não é muito ruim. Tem componentes locais e esses aqui não estão em um quadro, modo que ele está pendurado aqui fora das coisas. Este aqui está em um quadro, vamos dizer iTune, eu quero usar essa coisa. A melhor prática é que você será um componente. Eu vou a tecla de opção Command em um Mac, e isso é Control Alt K em um PC e o que você faz é deixar o principal ali e então você usa instância nisso, esse cara está separado. Só para que possamos colocar nosso mestre em outra página. Vamos fazer alguns deles nas páginas. Vamos copiar esse aqui. Vou transformar isso em nosso componente. Isso pode ficar super confuso. O que gostamos de fazer, falando por todos os designers de UX do mundo, é que eu quero pegar isso com meu mestre lá. Este mestre aqui, eu quero movê-lo para uma nova página, basta manter tudo ligado. Posso ir para minhas páginas aqui. Posso dizer que tenho que ser uma página inteira dedicada aos meus componentes. Vou colocá-lo no topo para que, se alguém estiver usando meu arquivo, eles possam encontrá-los todos. Eles estão em um só lugar. Eu posso encontrá-los lá em um só lugar e quando os movemos para lá, vamos ao nosso HiFi. Podemos clicar com o botão direito do mouse, mover para os componentes da página. Aquele bem, vamos movê-lo para lá, bem componentes apenas mantêm isso arrumado e uma vez que eles estejam todos lá, você verá que eu tenho esta página chamada componentes, e eles estão todos aqui em vez de se espalhar por este documento. Há alguns componentes na área de trabalho, vamos adicionar um componente aqui. Digamos que seja um componente, Command Shift K. Você pode ver Ativos espalhados por algumas páginas. Eles podem ser 100 páginas nas quais você está trabalhando. É bom dizer que vou deixar essa versão lá, mas o mestre vai para a página de componentes. Você pode dizer que tudo está apenas em componentes, facilitando. Agora vou voltar e mover tudo isso para lá. Há você e agora será movido para nossa página de componentes. Agora não salta para eles, o que você poderia clicar neles e simplesmente saltou para eles. Ele vai pular para a página em que eles estão. Espero que haja um show master ou show master. Talvez eu não consiga encontrá-lo, mas às vezes fico confuso entre o XD e isso. XD tem isso, K-Figma não. Acho que não. Deixe nas notas, se você souber como pular para o mestre dele. Onde está esse? Não sei, tem algo que se parece com ele, esse é o mestre? Sim. Estou clicando com o botão direito do mouse para ver se eles têm a opção principal. Eu o vi. Você também vai para esse, você pode simplesmente arrumá-lo, apenas certifique-se de que seus componentes todos em uma página e essa página não precisa de um quadro, vamos dar uma olhada. Vou para o Shift 1. O momento. Tem coisas em todos os lugares, vamos arrumar quando chegarmos um pouco mais tarde, faremos uma página de sistema de design spic, design, mas eles podem simplesmente sair sozinhos assim. Você pode fazer todos esses modais pop-up completamente, você pode fazer todas as cartas juntas, todos os logotipos diferentes para deixar o esticado parecer bonito. Agora, se você não quer ser tão legal ou organizado, você pode apenas usar a pesquisa. Se você tiver nomeado, pelo menos nomeando algo, você pode entrar na sua pasta Assets bagunçada e, na verdade, apenas digitar logotipo e ele irá reduzi-lo para esses. Isso pode ser suficiente para você. Você pode alterná-lo para o modo de lista, apenas certifique-se de limpar isso, paira em torno dos Ativos que pesquisam. Você pode trabalhar por um bom tempo e, na verdade, ir, outro pequeno truque. Não tenho certeza se você sempre pode fazer isso, mas se você acabou de colocar em um espaço, como se estivesse procurando por tudo e apenas listá-los bem. Não importa se é ListView, ou That View, os divide em quadros diferentes, mas se eu colocar uma barra de espaço lá, isso parece fraco. Mas não se sente muito oficial. Isso pode desaparecer. Vai se tornar um botão doce no qual você pode clicar. Essa é uma forma de fazer isso. Se você tiver o seu espalhado pelo documento, tudo bem também. Pode estar em todos os lugares e você apenas usa a pesquisa, mas você encontrará assim que passar por um documento, talvez alguns documentos estudando, compartilhando com outra pessoa, você terá que parar de ser um pouco um pouco mais cuidadoso com sua nomeação e onde você mantém seus componentes principais. Espero que isso tenha sido útil. Foi um vídeo confuso. Depois disso, vamos para o próximo vídeo. 76. Introdução à convenção de nomeação da barra invertida / no Figma: Olá, todos. Neste vídeo, vamos entender o que é essa convenção de nomenclatura. Você me viu usá-lo, você viu outros usá-la, por que todas essas barras para frente estão em todos os lugares? A resposta curta é que ele ajuda você a organizar seus componentes, mas deixe-me dar alguns exemplos, e vamos fazer alguns juntos. Vamos começar com o primeiro motivo que é útil, essa convenção de nomenclatura. Vou colocar o meu na minha página Componentes, porque estou sendo chique e uso a ferramenta triângulo. Vou desenhar alguma coisa. Vou acelerar isso. Eu tenho um desses e um desses; isso está indo para a esquerda, um vai para a direita. Vou transformá-los em componentes ao mesmo tempo. Faça vários componentes. É chamado de polígono 2 e polígono 1. Tudo bem. Mas nomear vai nos ajudar. Vamos dar uma olhada nisso. Polígono 1, vou chamar essa seta, mas vou usar essa barra. É tudo sobre isso. Estou apenas adicionando a barra direta entre isso. Você não precisa ter espaços. Se você for um desenvolvedor, provavelmente não terá espaços. Designers, na minha experiência de ensino, colocam espaços porque parece bom. Este é o Arrow Right. Estou usando Shift Tab para ir até o próximo. Apenas um pequeno atalho de bônus para nomear. Por algum motivo, isso precisa estar lá. Se eu usar essa convenção de nomenclatura, veja o que acontece com meus componentes. Vou ao meu painel Ativos. Não estou olhando para o material, mas para os componentes. Você pode ver o que é feito é, são setas agrupadas juntas. Você pode ver? Em um pequeno grupo, enquanto todo o resto está apenas unido. Eles são colocados juntos por causa dessa barra para frente. Diz, olha, há um componente, mas também é uma flecha, então estou agrupando todas essas setas. Digamos que eu ganhe mais alguns. Eu deveria tê-los feito antes de transformá-los em componentes. Vamos tirar esse cara, vamos nos separar do componente. No meu painel Camadas, este é chamado de Down. Não, vou transformá-lo em um componente primeiro. Na verdade, não importa se você o nomeia antes ou depois. Agora é um componente, e espero que eu tenha um extra no meu painel Ativos, todos agrupados como setas. Vamos fazer um botão também. Vou começar com um quadro. Vou usar nossa boa prática. Vou preenchê-lo com minha coisa, e vou adicionar algum texto dentro do quadro. Isso é um gigante. Este será meu botão Clique em mim. Acho que meu botão é bem grande. Essas setas em comparação, vamos diminuir o zoom, quão grandes são essas coisas? Muito grande. Eles não precisavam ser tão grandes, de qualquer maneira. Tenho um botão. Eu vou tornar o texto gigantesco também. Segurando Shift e usando a seta para cima, moverei esse texto. Vamos clicar no lado de fora e transformá-lo em um layout automático, apenas para que quando ele se ajusta. Sabemos como fazer um botão agora. Eu tenho esse botão. Eu tenho outro que é uma versão menor. Estou usando minha chave para diminuir as coisas. Há uma versão pequena, digamos, e uma versão grande. Vamos selecionar os dois. Vamos selecionar esse quadro e dizer componente. Este quadro, componente e vamos nomeá-los aqui, então meu painel Camadas. Em vez do quadro 4, vou chamar este botão. É como a raiz. É fácil encontrar todos os botões, mas eles não querem encontrar os grandes. O mesmo com este. Este ainda é um botão, então vou me juntar àquela gangue, mas este é o pequeno. No meu painel Ativos, tenho um lindo grupo chamado Button. Lá, todos eles estão, todos bem juntos. Botão grande, botão pequeno. Você pode ir modo de lista, modo de miniatura. Isso é razoavelmente fácil. Ele pode ficar ainda mais profundo. Você está pronto? Vamos descer mais um. Eu tenho esses dois botões, mas digamos que eu preciso dos modos claro e escuro também. Esses são ótimos em um fundo escuro. Esses são meus modos escuros. Esses dois aqui embaixo, vou me separar. Eles não são mais componentes. Vou mudá-los. Essa coisa aqui será minha versão escura. Vai ter texto claro. Na verdade, vou avançar isso. Eles são diferentes. Vou selecionar esse cara, transformá-los em um componente. Este em um componente e renomeie-os. Você pode fazer isso no seu painel Camadas, como fomos, mas você pode simplesmente clicar duas vezes nelas aqui em cima. Isso vai ser um botão grande, mas esse será o meu modo de luz. O mesmo com este. Ainda é pequeno, mas agora é o modo leve. Este aqui, este vai ser pequeno, mas vai ser o modo escuro. Você tem uma noção do que vai acontecer? Espero que. Contanto que a nomeação seja o mesmo modo escuro, terei botões agrupados em um grupo, então espero dividir em grandes e pequenos e, em seguida, modo escuro e modo claro. Vamos dar uma olhada nos meus ativos. Tenho botões. Dentro dos botões, há grandes e pequenos. Tudo o que eu quero um são aqueles grandes. Aqui estão eles. Há um modo claro e escuro. Aqui vamos nós. Você entende a ideia? Isso parecia muito sensato quando escrevi o avião da classe para este. Talvez, porém, este precise ser um botão escuro grande, você acha? É difícil saber com este em particular. Agora, as coisas também podem ir muito mais fundo do que isso. Deixe-me mostrar alguns exemplos de outras pessoas. Fazemos isso porque é bom para nós mesmos, agrupar essas coisas, além disso, você as obterá dos documentos de outras pessoas, ou você usa esse material. Design de material é o termo ou o nome que o Google usa para seu sistema de design. Aquele que ele compartilha em várias equipes e empresas diferentes para que sejam todas consistentes. Vamos olhar apenas um simples para começar. Este é chamado de Ícones de Design de Material da comunidade que encontrei, e mostrarei como eles usaram a convenção de nomenclatura. Neste documento, há um monte de páginas, há ícones preenchidos. Esses têm um preenchimento sólido. Há aqui que têm apenas o esboçado. Você pode ver? Eles são os mesmos ícones, apenas estilos diferentes. O que eles fizeram é que eles os separaram de forma diferente. Nós dividimos os nossos em botões/modo escuro ou claro, grande ou pequeno, e depois escuro. O que eles fizeram em seu painel de ativos, é que eles se foram; nós dividimos o nosso, digamos os preenchidos e os preenchidos que são itens de ação. Essas são as ações para as quais você pode usar o ícone. Vejamos os ícones de hardware. Eles são todos os preenchidos que têm algo a ver com hardware. Você pode ver o quanto isso seria mais fácil, em vez de todos os ícones preenchidos em todos os lugares. Eles os dividiram em pequenos grupos bonitos. Eles os nomearam bem. É essa convenção de nomenclatura. Vamos ver uma versão um pouco mais extrema. Digamos que estejamos projetando algo para o dispositivo Android. O material é o kit que eles usam ou seu sistema de design. Este arquivo Figma em particular, vamos dar uma olhada no que eles fizeram. Vamos para Ativos. Eles estão divididos em componentes. Acabamos de ter botões. Eles têm seus botões, mas você também pode ver que eles têm botões com ticks neles, aqueles com delineados, com contêineres neles. Vamos dar uma olhada nesse. É uma maneira de organizar muitos componentes diferentes para que eles possam ser encontrados. Há um bônus mais tarde quando fazemos variáveis, o que faremos muito em breve, e essa convenção de nomenclatura se torna ainda mais importante. Mas, no momento, digamos que estou projetando algo. Vou diminuir o zoom. Preciso fazer um telefone. Vamos para cá. Vamos escolher Pixel, porque estamos usando Material Design. Digamos que eu preciso de uma lanchonete na parte inferior. É um ótimo nome. Aí está, Snackbars. Digamos que eu preciso de uma lanchonete. Que tipo de lanchonete? Uma linha ou uma de duas linhas. Ele já foi projetado. Olhe para isso. Posso dizer, na verdade, preciso de um snack-bar que é este. Isso significa que ainda é um componente pronto para começar. Posso começar a fazer isso. Posso começar a atualizá-lo. Posso começar a construir coisas super rapidamente. Há aquela pequena lanchonete temporária que aparece um pouco e depois desaparece. Tudo está bem organizado com essas barras para frente. Essa é a convenção de nomenclatura. É útil para quebrar ativos. É ainda melhor para variáveis, em um vídeo futuro muito em breve. Na verdade, acho que é o próximo. É isso, convenções de nomenclatura, barra para frente tudo. Você está demitido. Vejo você daqui a pouco. 77. Projeto do curso - Componentes: Olá a todos, é hora do projeto de aula. Vamos construir um componente. Quero que você primeiro crie uma página, se ainda não o fez, componentes interessantes no seu arquivo Figma. Então você vai criar dois componentes, basicamente o mesmo componente, um modo claro e escuro. Eu quero que você pratique usando essa convenção de nomenclatura, para que você tenha dois componentes, mas eles acabam agrupados dentro do seu arquivo Figma, e faça uma captura de tela para provar que você fez isso. Aí está. É aqui que eu quero que você acabe. Faça uma captura de tela disso, agradável e simples, faça o upload para as tarefas ou para a parte do projeto, não se preocupe em compartilhar isso nas mídias sociais porque não é tão emocionante. Sim, esse é o projeto da classe. Vejo você no próximo vídeo. 78. 78: Olá a todos. Vamos aprender o que é uma variável. As regras do medo são fáceis, Ish. Basicamente, temos três componentes separados fazendo três coisas diferentes. Vamos juntá-los para que possamos arrastar uma unidade, um componente com variáveis dessas três cores diferentes Temos o modo claro, o modo escuro, modo médio, K. Isso é o que é uma variável Você pega componentes separados como esses três e os mistura Só para facilitar as coisas no Tidy Air, você pode alternar entre elas. Nós fazemos esse também. Ok, este aqui são esses três esmagados juntos. Oito estados diferentes do nosso botão ativo podem ter um desativado? Essa é uma variante. Vamos entrar e realmente fazer , pause, pause, pause, pause Ei, pouco antes de continuarmos, houve uma atualização para Figma Eu quero apenas, é só uma mudança de idioma. Neste vídeo, vou usar o termo Variante e variável de forma intercambiável porque foi isso que Recentemente, porém, a Figma fez algumas mudanças. E eles usaram a palavra variável para algo completamente diferente do que estamos fazendo aqui. Então, vou usar a palavra variável que você acha que é Variante o tempo todo. Então, em vez de acreditar, fazendo isso de forma exagerada, pense que, sempre que ele diz variável, ele está falando sobre variantes Variáveis são algo diferente que abordaremos. É um tipo de coisa do Cody que fazemos no curso avançado. Mas sim, quando eu estava originalmente fazendo isso, não havia isso. Então eu meio que os uso à toa. Variáveis são variantes. Entendi. Continue, oh, e divirta-se. Tudo bem, o que é a variante? Eu fiz dois botões. Ok, e eu vou nomeá-los porque eu sou bom. Vou usar aquela convenção de nomenclatura que aprendemos antes Então este é o meu botão para Duck Interfaces, modo escuro. Este é o meu modo de luz. Portanto, eles não precisam ser botões para serem uma variável tão grande e meia para ter essa convenção de nomenclatura É simplesmente útil, mas eu tenho duas coisas. Eu quero que seja um componente em ambos os componentes. Na verdade, o que eu poderia fazer é ter outro casal aqui embaixo, apenas duplicando-os para mais tarde Eu tenho esses dois, vou fazer vários componentes para mim, o que é legal. Eles são apenas componentes separados. Eles estão aqui na minha biblioteca e um botão. Aí estão eles. As duas coisas que aparecem no meu painel de ativos imaginavam que se você as combinasse como variáveis, ok, ele selecionaria as duas e diria: Ei, esses caras são apenas variantes da mesma coisa, entra em algo chamado conjunto de componentes, que é essa pequena linha pontilhada E você os deixa como um componente principal. Ok, é um conjunto de componentes principais. Ele vai deixá-los em paz. E o que você notará é um olhar que desapareceu. Você pode ver que esses dois foram combinados em um chamado botão, apenas aquele em que você arrasta para fora. Olha aqui, tem um modo escuro e um modo claro. É isso que as variantes fazem. Você pega dois ou mais componentes, os transforma em uma variável e depois pode examiná-los e ajustá-los. Você pode ter mais de uma variante. Ok, digamos isso. Vamos desfazer. Vou voltar até voltarmos aqui. Você pode ter uma terceira versão. Ok? Quero uma terceira versão que já seja componente. Se você quiser outra versão, porque agora estou arrastando uma instância dessa Como sei que é uma instância? Porque é isso que acontece quando você arrasta a tecla Alt ou a opção arrasta para fora. E é um exemplo que eu quero separá-lo. É um judeu piegas aonde vamos. Queríamos dizer “ separado da instância”. Ótimo. Portanto, é apenas um tipo normal de moldura antiga. Agora, isso vai ser no modo intermediário. Eu não sei o que estou fazendo. Ok. Vou passar e mudar a cor para rosa. Então isso é um componente, isso é componente, esse cara precisa ser um componente. Todos os três podem ser variáveis. Agora, isso são componentes. A maioria das pessoas chama isso de componentes. Ainda assim, mesmo sendo tecnicamente um conjunto de componentes com linhas pontilhadas, ouça meu painel Eu ainda só tenho uma coisinha. Não há três deles ou duas dúzias deles, dependendo do tamanho do seu aplicativo ou do seu sistema de design. Mas eu posso arrastar um agora e dizer que, na verdade, este é o modo intermediário, como o Mood Doc Mode. O momento é apenas uma propriedade. Propriedade com um ótimo nome. Então, se você selecionou aqui, você pode dizer, eu não quero ser propriedade número um, eu quero que ela seja cortada Eles querem ir até aqui. dizer que não coloque dois pontos e há dois deles. Ok, mas é um pouco mais descritivo. Isso não muda nada. Você pode apenas dizer que, tudo bem, como você encontrou essas variáveis Agora que entendemos os componentes, convenção de nomenclatura não é tão ruim Então, enquanto fazemos isso um pouco mais cedo, apenas arruma nossa lista de componentes Você não precisa usar variáveis, mas pode ver como elas são úteis. Uma coisa a fazer, todo tipo de coisa. Vamos fazer mais um juntos. Só para te mostrar, vou usar muito o modo claro, o modo escuro. E vamos fazer outra coisa, meio prática. Portanto, isso ainda não é um componente. Esse será um botão para os diferentes estados de um botão. Isso vai ser como um botão ativo. Vai ser como pairar. Esse aqui. Pode ser como se estivesse desativado ver governado. E deixe-me mudar as cores deles. Ok, então esses são estados diferentes para o meu web design. K, ativo quando alguém passa o mouse, fica um pouco mais escuro e esse será meu botão desativado Então, precisamos fazer com que todos eles sejam componentes. Então, vamos fazer isso. Selecione todos eles. Uma grande pancada. Então, eu tenho três componentes separados que são quase iguais Onde estão todos aqui? Meus componentes ou eles estão dentro? Este tem três deles, vai ver todos se tornarem um, boom. Um botão para governar todos eles. Ativo, desativado, outras coisas estranhas. Linha pontilhada significa que é um conjunto de componentes. Lembre-se de que você pode realmente mudar como aquela que será usada como padrão. Mude a ordem deles. Podemos nomeá-lo aqui. E meus estojos, o estado Buttons. Se eu arrastar outro, será este e a ordem mudará. Fez isso? Tenho certeza que sim. Tudo bem, essa é a nossa introdução às variáveis Vamos fazer um pouco mais de variáveis para que possamos conhecê-las um pouco melhor. Te vejo no próximo vídeo. 79. 79 1: Olá pessoal, há mais de uma maneira de criar uma variável. Neste vídeo, mostrarei uma maneira um pouco diferente. Essencialmente, você sabe que é a mesma peça, mas há apenas um método ligeiramente diferente para criá-las. E também vamos dar uma olhada na chave seletora doce. Olhe aqui, está escrito “toggle”, olhe para aquele pequeno interruptor Também criaremos um pequeno logotipo multicolorido. Ok, ainda é uma variável, basicamente o mesmo método de construção ligeiramente diferente. Deixe-me mostrar, tudo bem, no último vídeo, mostrei como fazer um componente OK, Command Option em um Mac, é a tecla Control Alt em um PC Então criamos duas delas, as duas opções diferentes e as combinamos , tem variação. Ok? Eu vou fazer isso de forma diferente neste vídeo. Vamos começar com essa pequena chave seletora. Não é nada, é só um círculo em um retângulo arredondado. Mas se eu convertê-lo em um componente, posso realmente começar a torná-lo virulento Olá a todos. Apenas uma pequena atualização rápida para este vídeo. Você notará que a palavra Variante não está mais superaquecida. Figma o mudou um pouco. K aqui, na verdade, está em Propriedades e você pressiona o sinal positivo. Há uma variante nisso. E o que você precisa fazer, a segunda etapa é adicionar uma segunda variante. Isso tudo era um passo antes, mas agora são dois passos. Ok, então o ego, essa é a atualização, você pode continuar com o vídeo. A outra coisa a lembrar, porém, é lembrar que vou chamar muitas coisas de variáveis. Essa é a palavra errada. Eu vou fazer tudo isso neste vídeo. O que eles significam para serem chamados de variância? Isso mesmo. Entendi. Tudo bem, Karen, com um vídeo. Ok, e a mesma coisa acontece. Recebemos esse tipo de conjunto de componentes. E depois, posso entrar aqui e dizer que essa é a minha opção para esse caminho Ok. Basta clicar duas vezes neles para entrar nele. E vou mudar isso para isso no meu painel de ativos aqui. Agora tenho meu pequeno interruptor e tenho uma opção que diz Variante. Você diz que, se você os nomeia mal, acaba com a propriedade um e a variante para nomear, renomeá-los depois não é Você precisa renomeá-los no componente ou no painel Layers, você meio que vê isso quando eles são chamados de Variante relação aos padrões no metro Portanto, você pode nomeá-los clicando duas vezes aqui. Ok, estamos fazendo isso aqui ou seremos um pouco melhores quando você fez essa chave seletora pela primeira vez Ok, se fizermos essa chave seletora e a chamarmos de talvez switch e chamá-la de slash Isso nos ajudará a fazer essa nomenclatura automaticamente. Mas nós fomos para a Clever, então vamos fazer isso depois Então, primeiro de tudo, a coisa toda é chamada de componente um, que não é o que eu quero. Este é o meu interruptor interno que comprei para Variants. Vou renomeá-los aqui para a propriedade se ela estiver ativada ou desativada Agora, isso vai fazer algo sofisticado se eu usar, não importa como eu chame isso, mas se eu tiver meu primeiro, que é padrão, ok, e vai estar desligado se eu usar as palavras ligado e desligado, observe como isso vai mudar aqui Vamos embora. Vamos pegar um ativo. Ele pegou a chave seletora. E como eu uso a palavra ligar e desligar, você pode ver, tem essa coisinha legal que é incrível. Aí está a chave seletora. Não faz nada. É só porque eu uso as palavras ligado e desligado. Você pode usar as palavras verdadeiro ou falso. Ou o que mais pode usar sim ou não. Ok. Pode ser uma caixa de seleção, desde que você use esse tipo de palavra real Em outras palavras, ative e desative isso. Você entende isso como um pequeno interruptor. E isso nos faz parecer chiques. Vamos fazer mais um. Faremos o logotipo e pronto, sinto que já fizemos o logotipo. Então, vou fingir que não temos. Eu vou ter essa versão. Ok? Esta é uma instância do meu componente. Vou quebrar essa instância e esquecer que a anexamos. Ok, então é só uma moldura agora. É dar uma olhada no que parece. Sim, agora é só uma moldura com meu logotipo. Então, vou mudar as cores dos textos no interior. Ok? Então, a mesma coisa, em vez de tipo, desde que seja um componente para começar. E vamos usar nossa convenção de nomenclatura. Então, vamos chamá-lo de um bom nome. Vamos chamá-lo de primário. Cor primária. Converta-o em um componente Command Option K Mac e Control Option KPC. Homens, estão ficando cansados disso? Você se lembra disso? Esse é o truque. Ou simplesmente clicamos no botão na parte superior. Eu tenho isso. O que eu estou fazendo? Eu lhe dei um nome, o que é ótimo. Eu o converti em um componente. E em vez de, vamos adicionar todas as variantes. Lá vamos nós. Depois de obter essa variante, você pode realmente adicionar outra. Então, na verdade, vamos entrar nisso e mudar a cor para outra. Secundário. Este, ele vai ser legal, não um dente variante será chamado de cor secundária. Você pode adicionar mais a isso clicando nesta pequena vantagem aqui. Ok, temos outra versão e adicionamos seu próprio efeito sonoro. Ok, e essa vai ser a nossa cor de destaque. Existe outra maneira de clicar nele, pressionar Comando D em um Mac, controlar D em um PC. Portanto, há muitas maneiras de criar variantes. Basta encontrar o que você se sente confortável em fazer. Esse vai estar aqui. Meu logotipo vai ser esse aqui, vai ser a cor. Você pode escolher. Edite para ver o que ele faz. Aqui vamos lá e eu posso dizer: qual cor eu quero? Vamos escolher uma cor de destaque secundária. Vamos criar variáveis. Então, passamos de muitos componentes, meio que preenchendo nosso painel de ativos, para combinar coisas como as três versões em uma pequena unidade O que podemos ver aqui também é que, na verdade, existem três botões. Portanto, isso ainda pode ficar fora de controle, a menos que criemos variáveis multidimensionais, o que faremos no próximo vídeo Tudo bem, te vejo lá. 80. 80: Olá a todos. Neste vídeo, vamos discutir variantes multidimensionais. Eles parecem chiques. Na verdade, o que eles são é que já criamos nossa Variante Dimensional, ou pelo menos uma Variante Dimensional. Esse aqui, simplesmente ligado ou desligado. Uma dimensão pode fazer qualquer outra coisa. Este look, tem uma versão pequena e uma versão grande com duas cores diferentes. Isso é o que vamos fazer. Vamos fazer um botão que diz: Ah, eu quero que seja na verdade a versão grande, que é a cor secundária. Tem várias dimensões. O mesmo com essa pessoa. Ok. Ele tem o positivo ou o negativo, mas também tem uma cor. Ele tem uma dimensão extra, multidimensional. Então, eu provavelmente vou sempre dizer multidimensional com essa voz estranha Você precisa fazer parte das regras do figma multidimensionais Tudo bem, vou tentar recusar. Vamos entrar no vídeo. Tudo bem, para criar uma variante multidimensional, você precisa começar com Ok? Não importa o que seja. Estou começando com um botão. Ok, ele precisa ser um componente como antes. Vamos fazer a versão de criação de variantes em que começamos com uma e criamos uma nova não utilizada nesta pequena vantagem Olá a todos. Faça uma pausa rápida aqui apenas para lembrá-lo sobre a alteração da interface No vídeo aqui, vou para Variantes e clico em mais, não há mais variação. Você tem que ir para Propriedades, ir para Plus e ir para Virion. Mas você já sabia disso. Só um lembrete. E você também precisa ir até o topo aqui e adicionar uma nova variante ou selecioná-la e pressionar Comando ou Controle D até você. E a nomenclatura é bem parecida. Ok, eu tenho esse primeiro aqui que eu posso nomear. A segunda variante aqui que eu posso escolher e nomear. E se eu quiser alterar a propriedade geral, clico duas vezes nela Muito parecidas, pequenas mudanças. Você entendeu isso. Tudo bem, continue com o vídeo O que vou fazer é que com essa variante aqui não vamos usar o modo claro e escuro. Eu provavelmente deveria chamar essas cores primárias e secundárias de cores lácteas. Então esse aqui é secundário. Este aqui não é o modo escuro. É primário. Mude a cor desta para a minha cor secundária. Então, essas são as variantes como as conhecemos. Tudo bem, vamos até mesmo dar essa variante e clicar no quadro do componente para dizer que, na verdade, esse componente é chamado de cor Mas agora, como no começo, queremos outro tamanho maior. E tudo isso é multidimensional. E a variante é que temos uma propriedade que diz para colorir todo mundo apenas mais uma atualização para este vídeo. Eles mudaram isso. É um pouco parecido com o que já fizemos, mas eu realmente quero destacar isso porque estava deixando as pessoas um pouco perdidas Ok, então abaixo do vídeo estão suas variantes. Clique nesses pontos e vá para a nova propriedade edX. Agora, o que fazemos em um tipo de lugar semelhante é ir às propriedades, então temos que selecioná-las. Vamos para Propriedades, vamos criar uma nova propriedade Variant. Ok, semelhante, semelhante. E vamos chamar nosso tamanho único e um segundo e criar uma propriedade, você acaba com duas propriedades. Diego multidimensional, pequena mudança, meio confuso. Eu posso ver que há a atualização. Continue. Vamos criar outra nova propriedade que será chamada de tamanho. Ele cria um chamado padrão. E o que você vai notar aqui é que nas minhas camadas aqui, vamos desfazer isso Então eu só tinha um, ok, só tinha o secundário e o primário. Se eu adicionar outra propriedade e chamá-la de cor, tamanho novamente, observe o que acontece aqui, o que resulta em uma barra mais calma nessa outra multidimensão, você tem duas dimensões Pode ser N secundário, pode ter tamanhos diferentes. Então, o que vou fazer é realmente dizer que esse sujeito aqui é do tamanho de um pequeno. Ele é a cor primária. Algum pequeno? Esse cara é da cor secundária e também é pequeno. Então eu preciso de mais dois. Preciso adicionar outro cara lá. Você pode, só para rir, OK, podemos clicar no conjunto Na verdade, você também pode adicionar outra variante dessa forma. Há muitas maneiras de adicionar variantes. Você pode clicar nele e em Comando D, Controle D. Você pode colar nele, copiar e colar. Eu sei que isso não funciona. Comando. Ok, então eu tenho esse outro. Esse cara vai duplicar esse só porque eu quero começar com a cor certa. Então, ele é primário e vai ser grande. Ele ainda não é grande, então vou adicionar um pouco de acolchoamento para ele. Então, selecionei os componentes, onde estão? Eles simplesmente estão lá. Eu vou dizer que você é o que eu vou fazer 24 horas por cima e por baixo. E eu vou fazer 72 lados. Portanto, é um botão maior. Você pode ver que foi cortado. Basta clicar nele e arrastá-lo de qualquer maneira. Vamos fazer variantes multidimensionais bastante simples Mas você pode acabar com centenas de variantes diferentes. Você faz todos esses tamanhos diferentes, cores diferentes e, em seguida, faz todo esse tipo de mouse ativo, inativo também Então, eles podem ficar bem complicados. Você pode fazer isso tão grande quanto quiser. Eu vou fazer outro ao lado de você, poderia simplesmente duplicá-lo Ok. Eu não sei. Parece que vem de. E vamos, essa é uma cor secundária. Esse cara vai ficar, onde está minha variável? Isso pode demorar muito agora porque somos variáveis. Então ele é uma cor primária, sabe, ele é uma cor secundária e é grande. Olha isso. A forma como funciona é ir ao painel Ativos. Tudo bem. Nosso pequeno botão E agora ele tem duas variáveis, ok? Ele tem dois tipos de propriedades em suas variáveis, cor e tamanho, o que o torna multidimensional Então eu posso dizer, na verdade, eu preciso da versão primária, da secundária, mas eu preciso da versão grande. Isso é multidimensional. Vamos fazer mais uma, ok, porque nomear aqui não é difícil, certo? Pode ser mais fácil. Lembre-se de nossas convenções de nomenclatura, as barras dianteiras, que podem ficar bem bonitas Então, vamos fazer isso. Eu vou acelerar isso. Te vejo em uma enfermaria. Ok, então eu fiz esses pequenos botões, esses pequenos botões circulares. E, novamente, nada para eles. Antes de tudo, vou torná-los componentes individuais. Agora, no momento, acho que estão todos separados. Se eu fizer todos esses componentes separados porque eles não estão agrupados ou enquadrados de forma alguma Veja isso, você vai acabar com quatro componentes separados. Então, vou selecionar isso e posso convertê-lo em um quadro, agrupá-lo ou simplesmente convertê-lo em um componente em si. Outra forma de agrupar é torná-lo um componente Tudo bem, então eu tenho duas delas agora convenções de nomenclatura. Então este será meu botão redondo, barra, cor de acento positivo, barra positiva Então, basicamente, estamos adicionando propriedades, essas multidimensões com essas barras aqui, e fazemos o mesmo aqui embaixo. Mas esse vai ser negativo, nega Tiv. Se eu criar variantes agora, multidimensionais. Ok, então você pode ir direto ao ponto se estiver disposto a usar a barra dianteira E aqui posso dizer que não tenho ideia de como nos chamar. Se você não tiver certeza, chame isso de valor. Ok, e essa vai ser minha cor. Eu posso fazer mais dois desses. Na verdade, vou selecionar os dois , fazer mais dois deles. E tudo o que vou fazer é mudar isso para uma cor secundária com esta. E agora, com ela selecionada, posso dizer que você é positiva , mas não é uma cor de destaque. Você adicionará um novo. Você vai ser minha cor secundária. Secundário. Você, eu não preciso digitar porque já está lá. Agora. Esqueci os ativos. Eu tenho você. E eu tenho todos vocês multidimensionais Eu preciso do negativo na cor secundária. Se você está pensando, eu poderia continuar nomeando-os em vez de duplicá-los Você totalmente pode. Então, vamos fazer o último exemplo que eu vou desfazer e antes era nossa variável Ok, eu poderia fazer isso agora. Ok, então não há razão para que eu não possa separá-los. Instâncias de toque. E este aqui vai ser o que significa um botão redondo positivo? Mas vou mudar isso para minha cor secundária. Você vai ser uma cor secundária. E isso vai mudar os nomes. Então isso agora é secundário. Então você pode fazer tudo isso antes. Fizemos isso depois, lá você pode fazer tudo antes, se quiser Secundário. Ainda devem ser componentes. Componente, componente, não componente. Isso não funcionou. Ok, então, enquanto as convenções de nomenclatura existirem, se eu ampliar, você poderá ver a E você poderia fazer um quarto. Não vamos fazer uma quarta aqui. Este pequeno curso é Essentials, mas não há razão para que você também não possa criar uma versão grande e pequena de todos eles Mas porque eu os nomeei bem. As variantes combinadas estavam ausentes. Olha isso. Ok. não tenho certeza do que chamar. Tenho certeza de que há um bom nome. Você provavelmente pode pensar em um bom nome. Não consigo ouvir que está lá? E o mesmo tipo de coisa. Secundário, negativo. Tudo bem? Como você se sente, como se sente em relação às variáveis e como se sente em relação à multidimensão Eu estava muito assustado com as variáveis de esquiar. Vamos ver que eu não queria me envolver quando eles saíram porque eu meio que sabia disso Acho que, cara, isso parece complicado. Mas uma vez que você os entenda, na verdade, você pode começar a ver a arrumação E então você começa a fazer multidimensionais. Eu também evitei isso porque pareciam todos aqueles cortes e ficavam confusos Se você está achando que talvez seja multidimensional confuso manter todas as variantes normais e ter apenas algumas versões aqui por um É algo relativamente avançado que estamos fazendo aqui. Uma última coisa que você pode fazer é, se você tem isso, digamos que talvez tenhamos feito nossas convenções de nomenclatura e fizemos . O que era esse? Não me lembro do que demos uma olhada. Nós gostamos de botão redondo, positivo, secundário. Se você errar, não se preocupe. Se você perguntar, em qual ordem ela vai? Você pode ajustar isso mais tarde, uma vez seja realmente um componente multidimensional, você pode dizer que na verdade eu quero que seja o primeiro, veja isso, você realmente clica no perfume Lembre-se do conjunto de componentes, você vê aquela pequena linha de adolescentes ali. Na verdade, você pode dizer que é mais apropriado escolher o tamanho primeiro deles. Então, vamos expulsar esse cara. Aquele cara. Eu não sei do que você é. eu dei uma olhada, aquele cara, eu o arrasto agora, ele vai usar o tamanho primeiro. E então o Premiere realmente não importa, não importa. Tudo bem, meus amigos, essas são variantes multidimensionais no Figma . Te vejo no próximo vídeo. 81. Projeto do curso 15 - Variantes: Olá, todos. É hora do projeto de classe. Vamos fazer alguma variação. Vamos fazer três deles, uma estrela, uma caixa de seleção e um botão. Dê uma olhada neles. Eu quero que você faça uma variante que tenha três opções. Podemos fazer estrela vazia, full star, meia-estrela, vamos usá-lo para essas avaliações. Você ganha pontos de bônus se puder obtê-los nesta ordem, vazios, meio e cheios. Por padrão, dependendo de como você faz isso, eles podem se misturar. Basicamente, eles são colocados em ordem alfanumérica. Você ganha pontos extras se puder colocá-los nessa ordem. O outro projeto, k é a caixa de seleção. Nesta caixa de seleção, para ativar e desativar. Fácil. Mas você recebe marcas de bônus se puder fazer com que ele use essa pequena coisa de alternância aqui. O grande botão multidimensional. Quero que você crie um botão em seu próprio estilo, sua própria fonte, suas próprias cores primárias. e eu quero que você tenha uma versão grande e pequena e mais de uma cor. Você pode enlouquecer e ter mais do que apenas essas quatro opções, até você. Mas eu quero o mínimo de duas propriedades diferentes, no nosso caso, tamanho e cor. Esta é a parte mais difícil de toda a Figma, variável. Se você está achando difícil, coloque uma pergunta na página, eu ou um dos TAs o ajudarão, ou um dos outros alunos. Se você vir uma pergunta, então você é como, ei, eu sei como responder a isso. Salte para dentro. Depois de terminar, faça uma captura de tela de tudo e faça o upload para a parte de tarefas desta página com uma parte do projeto para dar uma olhada. Isso é o que eu quero. É isso. Saia, faça alguma variação. Tenha orgulho de si mesmo se você conseguir um deles , porque é algo complicado. Vejo você no próximo vídeo. 82. 82: Olá a todos. Neste vídeo, vamos criar nosso formulário basicamente retângulos com texto, mas vamos ser sofisticados e dizer, na verdade, essa coisa aqui, que queremos, vamos torná-la uma variável para que possamos torná-la ativa ou torná-la mensagem de erro Então, este vídeo realmente contém todas as habilidades que você já conhece, mas em um formato diferente para nos ajudar a praticar o que aprendemos. Além disso, mostre-nos o quanto as variáveis são importantes e úteis. Tudo bem, vamos começar a fazer formulários. Ok, então vamos fazer nosso formulário. Eu selecionei o quadro externo, mudei dois para ampliá-lo. Também vou ativar minhas colunas. Podemos usar meu comando forward slash e ativar a grade. Grade. Ok, então vamos começar com uma moldura. Poderíamos usar um retângulo. Espere, espere, espere, espere. Onde eu acabei de dizer que você poderia usar uma moldura ou um retângulo, não importa Eu sei porque eu causo alguns problemas a muitas pessoas quando você está fazendo isso. Quando vamos redimensioná-lo em um segundo, vamos redimensioná-lo Ele não será redimensionado se você começar com um retângulo, mesmo que depois o converta em um quadro Nesse ponto, especialmente para esses formulários, basta usar molduras em vez do retângulo, porque as molduras têm poderes especiais Eu nem percebi até fazer esse vídeo e algumas pessoas se perderem. Ok, então certifique-se de usar molduras, não retângulos. Tudo bem Prossiga. As molduras parecem estranhas, mas sabemos que as molduras são úteis, então vou desenhá-las aproximadamente nesse tipo de tamanho Vou dar um derrame. Estamos apenas construindo, não sei o porquê disso primeiro. Ok, começaremos com alguns componentes antigos e solitários e depois mostrarei como atualizá-los à medida que avançamos Então eu tenho esses cantos arredondados. Sim, alguma coisa. Ok. O texto vai entrar. Se você tiver uma moldura selecionada aqui e apenas clicar dentro dela, ela realmente mergulhará dentro dela. Não é importante para este. Vamos colocar um exemplo de texto. Quero que fique alinhado à esquerda. O padrão é minha, a fonte que eu estava usando. Certo. E quando você estiver criando um formulário, não tente marcar o que seria. Meu conselho é que, especialmente no que diz respeito aos detalhes do cartão de crédito, você deve usar Roboto, Open Sands ou Inter, ou há muitos deles Quanto mais chato, melhor vou usar areias abertas. Quero que as pessoas confiem nesse formulário. Quero sentir que não é, sei lá, o Mickey Mouse Show Ok, Light não é o que eu quero. Areias abertas normais, vai ser fácil de ler aos 16 anos, vou diminuir um pouco a cor Vou tentar lembrar que 990 se repetiu. Ok, eu vou usar esse texto, copiá-lo, colá-lo fora da minha moldura só porque eu quero que esteja acima dele. E essa vai ser minha gravadora. Vou chamá-lo rótulo em vez de nome ou qualquer coisa, só para poder reutilizá-lo para coisas diferentes. Tudo bem Vou ligar minhas grades de comando, controle automático em um PC e simplesmente entrar Não precisa mudar nada. Eu adoro isso. Tudo bem Então eu tenho meu primeiro pedaço e acho que quero isso como preto Está bem? Porque eu quero usá-lo repetidamente. Vou transformá-lo em um componente. Ok. Se você não fizer nada além de usar um componente, tudo bem. Faremos uma variável em um segundo. Por causa dos componentes, lembre-se de que este é meu componente mestre. Muitas vezes, agora eu movo meu mestre cá e começo a criar com a instância dele para que eu possa fazer coisas assim e mudar esse nome. Se eu o alterei no primeiro, isso mudará para todos eles. Eu quero mudar a instância. Na verdade, isso vai ser um e-mail. Está bem? Meu texto de amostra terá alguns pré-preenchidos. Lá vamos nós. Ok, vamos duplicá-lo porque há uma instância Se eu mudar isso, posso dizer que talvez seja o nome no cartão. Vou deixar que talvez chame esse nome, talvez outro. Eu vou usar o Comando D enquanto estiver lá. Outro. Esse será o número do cartão. Tudo bem Você tem a ideia de que pode criar um componente e usá-lo repetidamente. Uma coisa legal que você também pode fazer com os componentes é que você pode ter aprendido, ela pode não ter. Eu mostrei obviamente, que você pode alterar o texto e a cor das coisas sem destruir a conexão com componente principal ou mestre original Eu vou desfazer isso. Na verdade, você pode fazer algumas coisas físicas, como desejar que eu não consiga mover esse texto separadamente consiga mover esse texto separadamente desse rótulo e eu gostaria de subir. Não vai. Algumas coisas físicas não mudarão com isso, mas algumas mudam. Então, vou ativar minhas colunas novamente. E veja isso. Se eu pegar toda a estrutura, todo o componente de fogo, e agir assim, você pode ver isso? Vai mudar. Ok. É como esticar essa caixa Algumas coisas ainda podem permanecer conectadas e mudar e outras não. Uma lista exaustiva. Eu não sei, eu me deparo com novos o tempo todo. Se não se mover, não pode. Se isso acontecer, pode. Olá a todos. Eu só quero entrar aqui e estender este vídeo só porque o seu não está sendo redimensionado bem Ok, assista ao vídeo, você pode ficar bem. Ok, mas há algumas pessoas nos comentários que estão tendo problemas com, você sabe, a culpa é minha de não explicar algo da maneira certa. E há algumas coisas que podem ter dado errado se você a redimensionar e ela não redimensionar, ou essa coisa fica na lateral ou a etiqueta se move Eu vou te mostrar as soluções para isso. Ok. A primeira é, eu meio que mencionei anteriormente, que para usar uma moldura e não um retângulo, você não pode nem mesmo usar um retângulo e convertê-lo como se não fosse possível moldar uma seção ou convertê-la em uma moldura Há algo embutido em um retângulo e é útil saber que apenas molduras são melhores para muitas coisas Basta usar uma moldura desde o início, então você terá que excluir o retângulo e reconstruí-lo novamente com uma moldura que resolva todos os seus Vou resolver isso novamente, fazer isso mais uma vez e mostrar algumas das partes que podem ter dado errado. Eu tenho essa estrutura aqui. Eu o mantive bem limpo aqui para que você possa conferir o seu. Ok, vou selecionar isso, vou dizer que você é um componente. Eu coloquei meu componente principal lá. Vou manter pressionada minha tecla de opção, PC. Essa vai ser minha instância, ok? E deveria ser redimensionado, exceto que às vezes esse cara, ele nunca costumava usar É claro que quando eu fiz isso pela primeira vez, isso nunca acontecia, mas está acontecendo. Agora, uma das coisas que podemos fazer, antes de tudo, é redimensionar Deixe-me saber nos comentários se você ainda não redimensionou, se seu texto no meio ou aqui está redimensionando A única coisa a observar é que eu cliquei duas vezes nele, então selecionei minha etiqueta aqui Sob restrições, o padrão é escalar. Ok, então está reduzindo a caixa. Às vezes, o texto, deixe-me mostrar o texto, é, na verdade, tipo, aquele está indo bem. O texto pode ser dividido em duas linhas. Esse foi outro problema que eu vi as pessoas terem. Ok. Vou clicar na minha etiqueta e vou alterá-la de escala. Eu não posso mudar isso em escala. Por que não? Ok, é porque estou trabalhando na minha instância. Lembre-se de que há algumas coisas que você pode fazer dentro de uma instância, como redimensionar essa caixa Mas não consigo mover a etiqueta. Tenho que voltar ao meu componente principal aqui. Se eu clicar no rótulo, posso dizer que você não é escala, não é o que eu queria. Eu quero que você fique alinhado à esquerda ou pelo menos preso ao lado esquerdo Em termos de altura, acho que podemos fazer com que fique no topo. Acho que não preciso disso porque só estou redimensionando desse lado Você pode ver agora que não vai se ajustar. Talvez você precise fazer o mesmo com o texto interno. Não preciso, neste caso, ver o que é Defoldedo, vai para o canto superior esquerdo Eles mudam quaisquer que sejam os padrões no Figma. Pensei em adicionar este vídeo apenas para que, se nos perdermos no futuro, você tenha mais chances de consertá-lo. Deixe-me saber nos comentários se você ainda tiver outros problemas e eu voltarei para outra atualização. Espero que isso nos aproxime de onde precisamos estar. Espero que o seu esteja sendo redimensionado neste caso aqui. Tudo bem, então é isso. Algumas mudanças na Fig. Estou culpando Figma, não meu ensino. Ok, definitivamente é Figma, não eu. Mas eu também gosto desses pequenos complementos. Espero que você também use algumas dessas soluções de solução de problemas , em vez simplesmente tudo dar certo no vídeo. Tudo bem, continuaremos com o vídeo. Há mais o que fazer, aproveite, ok? E esse vai ser meu mês, mês, ano. Esse vai ser meu CSV Tudo bem? A outra coisa boa de usar, bem, outra coisa que eu quero incluir neste curso é o comando de controle para entrar. Livre-se das minhas colunas. Se eu selecionar todas elas, teremos nossa seleção inteligente, ok? E, obviamente, eu posso ir e partir, na verdade, isso precisa estar lá. Isso precisa ser isso, ok? Uma coisa que causará algum drama é que você consegue ver? Eu tenho esses, está funcionando bem. Eu tenho esses espaços e posso ajustar o espaçamento com Mas digamos que eu diga Ok, quero duplicar esta por baixo, assim como esta comando Go D a coloca na lateral Também empurra minha moldura para fora. Você pode ver isso? Para compensar isso às vezes com esses caras porque eles estão fazendo coisas estranhas, posso agrupá-los ou colocá-los em uma Vou usar a opção de comando ou controlar a alternativa G em um PC apenas para colocá-los de forma que sejam o mesmo tipo de unidade. Então vai, tudo bem, eu posso lidar com isso, ok, e eu posso movê-los para cima e para baixo agora, e eu posso clicar neles e duplicá-los ou fazer outro desses Está bem? E depois arraste-o para baixo. Acontece muito com formulários. Está bem? Você quer essas metades, uma longa para em algum lugar, outra para em outro lugar. Mas acho que é tudo que eu quero . Você vai embora. Então você pode terminar, então você é como se tivesse feito um formulário. Era apenas uma caixa de texto com algum texto na parte superior. Ok, vamos levar isso um pouco mais longe, porque agora queremos adicionar algumas dessas mensagens de erro e diferentes tipos de versões dessas caixas. Então, vamos começar com nosso componente mestre. Onde está? Está aqui em cima. Ok. Se você não consegue encontrá-lo, como você o encontra? Clique com o botão direito do mouse, componente principal. Vá até mim. Aí, está aí. Vamos ser ainda mais sofisticados, vamos cortá-lo e colocá-lo em nossa página de componentes, porque somos incríveis assim O que eu quero fazer é onde você está no segundo turno. Lá vamos nós. Ok, eu quero ter algumas variáveis diferentes. Ok, então vou selecionar isso e dizer que você é uma variante, na verdade eu quero quatro delas. Vamos lá, boom. Esse primeiro é alegremente chamado de padrão. Vamos dar o nome desse componente, conjunto de componentes, vamos chamar isso de Ticksfield ou vamos soletrar corretamente dessa vez, E acho que o padrão está bom. O que faremos é ter um ativo, ok? Freqüentemente, você tem um ativo, um com erro e talvez um desativado. Podem ser outras versões, mas vamos usar o padrão, vamos fazer uma desativada. E vou dizer que a diferença entre vocês era 90, certo, 90. Viu o que eu fiz lá? Acabei de digitar 90 Assume que você quer dizer 1990, 90. Freqüentemente, esses números se repetem, especialmente se estiver usando escala de cinza. Eu quero que seja a mesma coisa, 90. Vamos clicar nisso. Onde está a variante dois? Não quero ser chamado de variante dois, quero que seja chamado de desativado. Ok, não preciso adicionar uma descrição ou documentação a isso porque é bastante autoexplicativo Este aqui vai ser meu ativo. Quando estiver ativo e você estiver clicando, ele fará algo sofisticado Isso fará com que o texto volte para preto. Talvez a linha externa aqui indique que está sendo usada. Então, vou usar um dos meus estilos. Vou usar essa cor de destaque porque não sei. Está muito perto da era, então vou usar talvez essa para torná-la um pouco maior. Acidente vascular cerebral, um que podemos testar e voltar. Ok, e a última será a Era. Então, vamos colocar muito vermelho em todos os lugares. Vermelho, vermelho, vermelho, até um pouco de vermelho. É legal o que você pode fazer com essas variações. Você pode criar algumas coisas realmente complexas. Ok, e como começamos com um componente, adicionamos isso depois. Vamos dar uma olhada no que aconteceu. Você está pronto para isso? Você acha que talvez tenha que começar de novo? Ok, mas como todos estavam usando esse componente original e expandimos esse componente em uma variante, agora podemos, na verdade, você preencheu seu nome errado aqui, a propriedade. Na verdade, essa é, eu não a chamei de erro, chame de variante, mas você entendeu bem. Então, talvez este não tenha uma variante. Onde está? É porque lembramos que os agrupamos dentro de uma moldura, então vou entrar nela Posso dizer que você é simplesmente deficiente. Você também está incapacitado. Você tem a ideia dos componentes. Incrível. Adicionar variantes, ainda mais especiais, bom. Essa é uma forma feia. Preciso quebrar minhas regras de coluna. Essa é uma forma feia. Agora, formulários em tempo real, preciso testá-los no meu telefone para ver se são grandes o suficiente. Preciso brincar com o espaçamento. Ok. Preciso voltar ao nome original. As coisas estão melhores. Eu não sei se eu estava fazendo algo assim agora. Ok. Eu procuraria outro formulário feito por outra pessoa que se parecesse com um formulário. E confiável. Algo sobre isso não parece confiável Dê uma olhada nisso. O que é isso? Eu fiz algo errado. Ok. Provavelmente vejo o que o Mac e, desculpe, o que a Apple e o Android fazem, ok, para criar seus formulários. Porque eu quero meio que igualar isso. Quero que as pessoas se sintam seguras clicando no meu botão. Eu sinto que o meu não está lá seguro. Tudo bem, então vamos voltar ao meu componente e habilitar esse último. Vamos chamá-lo de “ele”. Não sei, o que você achou disso? É muito bom quando você meio que começa a juntar coisas e pode ver como isso foi fácil Parece um grande baterista fazendo variáveis. Pelo menos eu a transformei em um tambor nos últimos vídeos, mas na verdade você pode criar variantes na metade Você não precisa ser totalmente proativo, então isso vai ser bom para nós Eu quero te mostrar como se fosse de outra pessoa. Então, vou ver onde é divertido. Então, eu meio que olhei para isso mais cedo. Então, veja essa que é uma dessas corujas. Está bem? Lembra como isso é chamado? Como é chamado? É chamado de conjunto de componentes do quadro de conteúdo. Eu mesmo esqueci totalmente. Portanto, esse conjunto de componentes é agradável, amigável e fácil. E esse aqui, uau. Ok, então há várias variáveis diferentes. Agora você pode ver, eu não vou falar sobre isso completamente, mas vamos dar uma olhada no painel Ativos. E o bom do painel Assets é a aparência do campo de entrada, apenas um campo de entrada antigo e solitário. Tudo isso está nele. Então, vamos dar uma olhada. Então, o que eles fizeram é que você pode ver que há três opções diferentes, uma com ícones e outra sem ícones. Há erros. Há um grupo de mensagens de erro. Há um grupo de, há, nem tenho certeza. Ok. Mas aqui o que eles fizeram foi dizer que o estado é o campo preenchido padrão de digitação ativa , campo desativado Nós fizemos isso. Ok. Mas eles também adicionaram uma mensagem de erro. Ok, há um ícone à esquerda? Eles fizeram muito mais, mas muito bem, se eu consegui, já que, como designer, posso usar isso e depois alternar os interruptores e fazer com que ele faça o que E há uma variável um pouco mais complexa. Está bem? E é uma variável multidimensional Quando você mesmo os está construindo, eles realmente não parecem tão confusos Oh, é disso que precisamos. Ok, eu preciso disso. Copie isso. Vamos até aqui. Isso é exatamente o que vai fazer do meu, vai consertar tudo no celular. É disso que eles precisam. Super seguro. Agora. Na verdade, sim. Isso traz um pouco de confiabilidade a ele. Tudo bem, esse é um exemplo prático de usar componentes com variáveis para criar um formulário. Tudo bem, é isso. Vamos para o próximo vídeo. 83. Projeto do curso 16 - Formulário: Olá a todos. Este é o nosso projeto de classe. Quero que você projete seu próprio formulário. Projete na sua página de checkout, assim como fizemos no último vídeo. Eu quero que você capture a tela do formulário finalizado me envie uma captura de tela do seu campo variável. Eu quero que você pratique usando uma variável para este campo e o que eu quero você faça é transformá-lo em um pequeno projeto de pesquisa. Eu fiz o meu um pouco na mosca. Eu quero que você dê uma olhada em outras formas. E o meu em que você confia? E quanto a isso você não confia? Há algo de errado com isso? Não sei exatamente o que é. O que eu quero que você faça é ser um designer de UX e realmente saia e veja o que realmente está faltando. Talvez seja um espaçamento, talvez seja o tipo de cantos arredondados, talvez sem cantos arredondados. Talvez seja a fonte, o espaçamento, o alinhamento. Talvez as bordas aqui. Dê uma olhada nos exemplos de outras pessoas. Construa o seu próprio, e eu gostaria de, quando você fizer o upload, especialmente nas mídias sociais, fazer o upload deste para as mídias sociais do que você fez e talvez jogue fora as coisas que você sentiu que deram a confiabilidade a este formulário, especialmente porque é um formulário de cartão de crédito. Talvez peça conselhos, talvez se você estiver lutando também e outras pessoas possam ajudar. Publique e vamos juntos descobrir o porquê. Eu nunca colocaria os detalhes do meu cartão de crédito neste formulário, talvez só porque ele não se alinha lá. Há algo, de qualquer forma, faça seu formulário, faça suas variáveis. Adoraria ver o que você faz. 84. Reunindo tudo em um exemplo de desktop: Olá, todos. Este vídeo, o que é isso? É um vídeo de produção. Preciso de uma versão para desktop. Ainda não temos isso. Vou trabalhar com isso. Não há nada realmente novo que vamos aprender aqui. É apenas um passeio de mim fazendo algo e mostrando como amarrar variáveis, atualizar variáveis, usar alguns dos estilos que usamos. Vou dar-lhe alguns atalhos também. Mas se você é um designer capaz e é muito bom na Figma, você se sente pronto, você pode pular para o final deste. Não vou ficar de coração partido, não há nada essencial neste vídeo além de eu trabalhar e fazer isso. Isso o surpreenderá no próximo vídeo. É apenas um quadro com algumas coisas, não há nada extravagante nisso também. Porque vamos entrar em prototipagem e precisamos dela. Vou fazer isso neste vídeo junto com a página inicial, algumas dicas e truques, mas principalmente apenas um pouco de passeio. Aproveite, pule, está totalmente bem comigo. Mas se você está ficando por aqui, vamos. Vamos começar. Espero que pareça profissional, mas vai ficar confuso e é o tipo de coisas que você vai encontrar, espero. Trabalhando na página da área de trabalho porque a negligenciamos neste curso, vou ligar minha grade, Command forward slash grid, bom. Então você desce um pouco. Agora, meus componentes estão ficando um pouco confusos, então vou arrumar alguns desses. Se você clicar nele, ele saltaria para a página em que está, aqui está. Isso foi bom. Não preciso mais dele para onde estou indo. Também não preciso de você. Você pode ver que ele o destaca? Se você estiver ampliado e clicar nele, assista a isso. Se eu for para minha outra página, Componentes, Páginas e eu for aqui, voltar aos meus Ativos e clicar nela, assista a isso. Ele o destaca na página. Ele leva você para a página, mas você não pode vê-la. Você vai ser ampliado muito. Lá vai você, ele o destacou. Não preciso mais de você porque estou fazendo variância super incrível. Preciso desse cara? Eu faço. Já usei os outros lugares. Lembre-se, mesmo se você excluí-lo daqui, desde que haja uma instância em algum lugar, você pode voltar a ela. Isso é bom e arrumado. Vamos até minha página. Agora vamos começar com esse atalho de bônus. Saltar para as páginas é que, quando você está no Ativos, ele fecha todas elas. Camadas. Está um pouco mais exposto, mas você ainda pode chegar até eles lá. O que eu acho mais útil, talvez você não. Se você tiver um PC ou um teclado grande conectado ao Mac, você pode usar page up, page down. Em um MacBook Pro que eu tenho, mantenho a função e uso a seta para baixo, e ele simplesmente se move pelas páginas. Você pode ver? Agora parece muito estranho. Isso não é estranho. Mas você pode ver o pequeno carrapato lá se movendo nesta parte aqui? Depois de um tempo, você tem uma noção de onde as coisas estão. Sei que essa é a minha visualização da área de trabalho. Vou fazer isso neste vídeo só porque eu faço isso. Painel de ativos. Vamos pegar nosso logotipo. Venha aqui logo. Agora. é um componente, é desse tamanho. Foi feito esse tamanho para o nosso celular. Vou torná-lo maior, segurando a chave ou tocando na ferramenta do kit arrastá-la um pouco. Aqui vamos nós. Lembre-se, temos uma cor de indexação primária e secundária disso. Não tenho certeza do que vou usar para isso. Vamos adicionar um pouco de texto aqui. Vou desenhar uma caixa de largura fixa que vai dessa coluna para essa coluna. Vou digitar minha “música para o nosso povo”. Selecione tudo. Vamos usar alguns de nossos estilos. Lembre-se que eu disse que não usaria zero porque era muito grande, usando totalmente nossa visualização de desktop. Isso é o que eu quero. Isso quer fazer. Quero adicionar alguns botões. Criamos algumas variáveis anteriormente. Vou usar isso. Você pode ver aqui nós os colocamos juntos com essas coisas e coisas que fizemos antes. Este botão aqui tem alguns. Eu quero um pequeno ou um grande? Quero o pequeno, por favor. Este pode permanecer a cor principal. Vou fazer outro. O problema com este é que eu quero a visualização do esboço. Vamos consertar esse. Vou clicar com o botão direito do mouse e dizer, leve-me para o componente principal. Aqui está. Vamos ficar um pouco loucos com isso. Não preciso disso. Isso é apenas um exemplo disso. Vamos ficar um pouco loucos. Vamos, em primeiro lugar, fazer a cor de destaque do botão. Eu não tenho isso. Só tenho primário e secundário. Vou selecionar isso, pegar aquele cara, Comando D, Controle D. Está mexendo com o meu fluxo. Isso mesmo. Podemos fazer com que isso seja maior lembrar. Vamos torná-lo realmente grande. Vocês dois podem descer aqui. Este vai ser pequeno, secundário. Na verdade, vou mudar a cor dela primeiro. Lembre-se da nossa visão. Este vai ser x em cores. O que vamos notar é, você pode ver que este diz, se você ver que isso é ruim, as coisas não vão funcionar. Propriedades e valores de variância são conflitantes porque a duplicamos. Isso tem exatamente o mesmo, é tão pequeno e secundário. Então Figma não tem chance de trabalhar qual você realmente quer dizer. Preciso de outra propriedade. Eu posso voltar para isso fora de um e dizer, preciso de outro aqui, então essa propriedade, eu preciso de outra agora. Não tenho certeza. Vamos desfazer isso. Vamos voltar para você, essa variante, vamos fazer isso aqui. É mais seguro. Vamos adicionar um novo. Este é chamado de sotaque. Agora não está tendo esse problema. Provavelmente preciso de outro desses. Vou duplicar isso. Este será a cor do acento. Vamos realmente dar a cor de destaque. O que você tende a fazer é passar por todos eles quando estiver fazendo, especialmente quando você é novo, para verificar se há algum erro. Eu tenho isso. A próxima coisa que quero fazer é a visualização do esboço. Basicamente, tudo o que vou fazer é agarrá-lo e ir em um conjunto de esboços. Preciso torná-lo um pouco maior. Certamente para essa versão gigante. Vou fazer uma visão de esboço de todos eles. Na verdade, nunca vou ter um esboço desses, então vou mantê-lo bom e limpo. Esses caras novamente são problemáticos porque eles não sabem o que fazer. Vamos fazer isso como um multidimensional de terceiro nível. De volta aqui, vamos dar outra propriedade não variante, que é essa aqui em cima. Esta será a versão do esboço. Você será a versão do esboço. Perfeito. Eu defino o canto como padrão. Vamos ter o esboço ativado. Todos esses caras, vou selecionar todos eles. Vou dizer que você não tem preenchimento. Você pode ver quando você tem muitos preenchimentos selecionados, diz que eu não sei o que fazer? Dá uma dica, só que foram colocadas todas elas com Accent 1. Quando eu o excluo, não quero nenhum preenchimento. Eu gostaria de um derrame. Haverá provavelmente 2, 3, 2, 2, 3. Podemos voltar. Começaremos com três. Este aqui será o golpe de primário, acidente vascular cerebral secundário, golpe de sotaque. Esses botões aqui, agora para clicar em coisas dentro de outras coisas, fizemos isso anteriormente. Temos um comando inteiro e você pode clicar dentro. Se eu segurar Shift e Command, posso clicar em pequenos bits dentro desses quadros. Caso contrário, não posso clicar se eu segurar Shift e clicar neles, ele pega a coisa toda. Eu só quero pegar os pedaços de texto dentro desses quadros. Só estou segurando Shift. Então vamos ser brancos. Nós o adicionamos à propriedade. Este aqui é pequeno. É primário e tem um esboço. O que é esse? Isso é pequeno, primário e o contorno está ativado. Agora, vamos desligar este. O mesmo com este, e aquele. Posso selecionar mais de um. Então você é a visão fora, o mesmo com isso. São todos grandes. São cores misturadas, mas eu posso fazê-las todas em termos de seu contorno. Lembre-se, usamos ligar e desligar. Espero que possamos ir, seu pequeno, preciso que seja de cor de sotaque e eu possa ligar o contorno. Vou clicar nisso. Vamos até nossa página, função seta para baixo ou nossa página para baixo. Você pode não achar esse atalho útil, mas agora posso dizer pequeno. Você pode encontrar este. Quero que você a cor secundária e quero o contorno. Vou mudar o texto. Este vai ser a compra agora. Este, ele vai ser que aprenda mais. Você percebe que eles não se esbarraram? Eles se encaixam bem lá. Mas se você fizer uma coisa toda essa batida, quem se lembra do que é? Esses dois precisam ser transformados em algo porque estamos usando a seleção inteligente. Gostamos de seleção inteligente. Significa apenas que não precisamos fazer nada com eles e podemos pegá-los e movê-los. Mas se você quiser que eles interajam o tempo todo, você seleciona os dois e os faz o layout automático. Tudo o que significa é que eles se referirão um ao outro. Vamos comprar. Este aqui vai ser o saiba mais. Não é realmente necessário lá, mas estamos aprendendo. Vamos adicionar nosso equipamento de navegação ao longo do topo aqui. Vou usar o mesmo botão. O problema com esses botões é que eu não gosto dos cantos arredondados em tudo. Na verdade, vamos adicionar o texto primeiro. Na verdade, vamos transformá-lo em um layout automático porque eu quero que eles se ajustem à medida que as coisas se ajustam. Isso me dá a chance de te mostrar algo legal. No momento, vamos ajustar este. Este será meu checkout ou carrinho, vamos chamá-lo de carrinho. Você pode ver que está fazendo da esquerda para a direita? O que não é o que eu quero. Quem se lembra do termo para fazê-lo ficar com esse lado? Você diz: “Eu me lembro.” Você com a mão para cima. Eu escolho você. O que é isso? São restrições. Eu selecionei isso, não precisa ser um layout automático, mas tem que ser um quadro. Você pode dizer que realmente se restringir a esse lado. O que está acontecendo é que isso é o que eu quero mostrar a vocês. Assista isso. Se eu te mover para lá, é restrito à minha grade ou aos meus guias, ou às minhas colunas mesmo, em vez da borda do quadro. Porque quando estamos usando colunas como esta, especialmente ela não está aderindo à coluna realmente está aderindo à margem, a borda aqui. Isso significa apenas que, se eu ajustar essa coisa aqui, ela vai ficar com essa coluna em vez da borda da página. Apenas algo para notar que ele também se encaixa em colunas. Você não pode vê-lo, mas ainda está fazendo isso. Está aderindo assim. Agora, se eu for, você é carrinho e está em casa e você está em conta. Eu quero que você seja secundário e você pode ser a saída, todas as cores. Agora, o que eu quero fazer é que eu quero um que não tenha cantos arredondados porque sinto que eles têm significados diferentes. Esses tipos de botões de navegação, e esses são botões extras. Vá aqui e faça isso. Quero que esses botões de navegação não tenham cantos arredondados. Clique com o botão direito do mouse, vamos para o componente principal. Por que não consigo vê-lo? Porque meus pequenos componentes estão realmente dentro dessa coisa é o layout automático, veja nas camadas. Lá estão eles. Mas eu cliquei nisso. É por isso que eu não consegui fazer isso? O que você pode fazer é Command-clique como um deles, depois clique com o botão direito do mouse nele e diga vá para o componente principal. Outra coisa que você deve ter notado é que essa coisa é realmente grande. Você pode, na verdade, com seu painel de camadas e ativos, você pode tornar isso cada vez maior e menor porque, à medida que adicionamos esses rótulos extras, você notará que eles vão empurrar isso para fora e você precisa expandi-lo para ver coisas. Vamos dar uma olhada. Quero adicionar outra propriedade. A maneira como você organiza isso depende totalmente de você. Digamos que eu queira parecer uma boa ideia para separá-los dessa maneira. Agora o que vou fazer é ir para você, vou arrastar outro pedaço deles. Na verdade, antes de fazer isso, eu realmente adicionarei a propriedade. Tenho tamanho, cor, contorno e vou fazer uma nova propriedade chamada em torno de cantos arredondados. Posso adicionar não apenas uma propriedade, mas vamos nomear os cantos arredondados, e vamos adicionar uma variante a essa também. Isso não funcionou. Vamos adicionar a variante depois. Cantos arredondados ligados. Vamos duplicar isso e vamos chamar esses adicionados de novo Este vai ser cantos arredondados. Você pode começar a ver por que agora você parou de precisar disso porque você começa a ficar bastante complicado, mas sabemos o que estamos fazendo. Todos esses selecionados, vou dizer que você tem cantos arredondados de zero ou talvez apenas um pequeno pequeno. Meu escritório está um pouco ligado. É como todos eles e apenas arrumá-los. Olhe para isso. Veja como estamos arrumados. Clique no quadro do componente externo. Vamos arrumar isso também. Vai funcionar? Eu não sei. Isso pode funcionar. Vamos ver se há algum erro. Na verdade, nunca verifico. Eu jogo com ele e se ele quebrar, volto e verifico qual deles está quebrado. Pode estar fazendo o certo. Vamos aplicá-lo. Função para baixo ou página para baixo. Clique com a tecla Command pressionada em um deles Eu estou tentando clicar na retenção externa Shift. Estou agarrando tudo isso, vou dizer que pequenas cores são misturadas. O contorno não é o que eu quero mudar, mas os cantos arredondados estão desligados. Sinta-se tão satisfatório. Trabalhamos na página inicial e precisamos passar para a próxima. Sabemos que a seta de página para baixo ou função se move para a próxima página. Você pode realmente passar para o próximo quadro. Se você quiser ir para o próximo quadro. Vou aumentar o zoom, Shift dois e dizer que quero passar para o próximo está apenas em, basta tocar na tecla de entrada. É uma boa maneira de alternar a mudança vai para trás. Você ficou por tanto tempo no vídeo, você recebe um atalho de bônus. Vou descer um. Aqui chegamos. A próxima coisa que vou fazer é esse modal. Vamos usá-lo nos próximos vídeos, então precisamos construí-lo. Vamos praticar o que estamos usando. Vou começar com um quadro ou um retângulo sem um bom motivo, vou dar um preenchimento do meu gradiente. Vou dar-lhe alguns cantos arredondados que aparecem, inscrever-se normalmente feito a coisa. Na verdade, tenho uma imagem que recortei no comando do Photoshop shift K e é chamada fita cassete. Ele estará nos arquivos de exercícios, se você quiser. É enorme um megabyte. Vou segurar o shift e arrastá-lo para fora. Algo assim. Adoro essas coisas que se projetam sobre as bordas. Type Tool armazenará uma caixa de largura fixa. Selecionado todo o texto. De volta ao uso da visão zero. Vou elevar o alinhamento de que está selecionado todos, Command Shift L para alinhado à esquerda. Agora, existem alguns atalhos que são totalmente ridículos. Eu conheço esse porque se você passar o mouse acima dele, seus carrapatos, a linha esquerda e direita. Você está em um PC. Provavelmente é o quê? Controle Alt L. Estamos chegando lá agora em termos de tamanho, provavelmente é o turno zero. Provavelmente é um bom a 100%. Sabemos que tipo se juntar a nós. Vamos pegar minha ferramenta de tipo novamente. Este aqui, é muito grande, vamos usar isso. Mesmo que seja parte do meu estilo de parágrafo ou do meu estilo de texto, não posso fazer essa coisa de caixa estrita de largura fixa inteira. Na verdade, está lá por algum motivo. Aqui está você. Eu quero que seja isso. Vou consertar a altura, então ela se expande à medida que precisamos apenas para arrumar para que não seja branco principalmente. mesmo com este, vou arrastar uma caixa e vou ver que você é esse tipo de versão inferior elástica. Vou mudar meu estilo para parágrafo e este vai dizer, vou acelerar esse pouco. Eu não posso soletrar, aí está, você quis dizer? Isso é o que eu quero dizer. Obrigado, Google. Vou usar meu campo de texto de formulário doce. Eu poderia voltar e adicionar outra variável para um plano de fundo preenchido, mas eu posso simplesmente modificar isso. Lembre-se, essas coisas que você pode simplesmente substituir. Vou colocar um preenchimento em segundo plano. Se eu quiser esse rótulo, vou excluí-lo. Ele excluiu? Você sabe que não aconteceu. Eu o apaguei e ele simplesmente o desliga. Ainda está lá. Vai mexer com meu revestimento de coisas. Vamos pegar nossos ativos vamos pegar nosso botão, inscrever-se. Por favor, coloque-o aqui. Eu quero totalmente a versão de cantos arredondados. Eu quero. Você pode ser primário, secundário ou nenhum deles funcionar. Botão de gradiente e, em seguida, ele serve. Assine. Se quiséssemos empurrar para o outro lado, selecionamos nele. Antes de fazer isso, na verdade, vamos desfazer isso. Se eu quiser que você saia desse lado da moldura exterior. Agora, quando eu digito, olhe para nós. Estamos sendo chiques. A taxa de contraste aqui provavelmente não funcionará como se não fosse o suficiente do contraste, mas vou reconhecer isso e seguir em frente. Vamos mudar os ticks da amostra também. Meu pequeno quadro terá um efeito de sombra. Isso provavelmente será suficiente até que o conectemos em nosso próximo vídeo. Espero que isso tenha sido útil. Você foi totalmente capaz de ignorá-lo. Havia alguns bônus lá dentro e acho que é bom ver pessoas trabalhando. Não sou um designer super incrível, mas é bom ver um pouco disso entrando e sendo usado em diferentes instâncias. Espero que seja de qualquer maneira, de qualquer forma, está feito agora. Vamos para o próximo vídeo. 85. Como adicionar um popup, overlay e modal no Figma: Olá a todos. Neste vídeo, vamos fazer algo assim. Há um Modal pop-up, cobre o plano de fundo. No nosso caso, faremos um boletim informativo, mas isso pode ser qualquer pop-up. Confirmação, você gostaria? Tem certeza? Esse tipo de coisa. Vamos clicar em segundo plano, ele desaparece. Eu os amo. Deixe-me mostrar-lhe como fazer isso aqui em Figma. A maneira como isso funciona é que você precisa de um quadro, próximo a ele, em algum lugar da sua página. Pode ser apenas um quadro antigo e simples. Criamos um no último vídeo que é um pouco mais extravagante. Vamos selecionar a página inicial. Então vamos para o modo Protótipo, e eu vou dizer que você vai lá. Eu não quero estar no clique, o que eu quero dizer é talvez depois de algum tempo, vou digitar em talvez quatro segundos. Não são quatro segundos. Há quatro segundos. Quero não navegar para, quero abrir uma sobreposição. É aqui que a magia acontece. Deixaremos tudo por padrão e vamos visualizá-lo. Esperando, ei, apareceu. Você se livra disso. Há algumas coisas que precisamos fazer. Se você não tiver selecionado, clique na pequena linha e diga após o atraso, legal. Esteja no centro, feche ao clicar ao redor do lado de fora, adicione sobreposição de fundo. Isso vai escurecer o fundo, eu gosto de aumentar um pouco mais escuro, então é um pouco óbvio. Até cinquenta. Na animação, vou fazer com que ela se dissolva. Vou clicar em Homepage, acesse meu botão de visualização. Vou ter que apertar R para redefinir, esperar por meus 4 segundos e passar o tempo. Você pode fazer isso com qualquer coisa pop-up modalmente. Estamos fazendo isso para uma inscrição no boletim informativo, o seu pode ser um botão. Tudo o que você faz é dizer que não é um boletim informativo que aparece automaticamente, é algo para confirmar algo, ou você clicou em um botão. Vamos dizer que este botão aqui, vai fazer a mesma coisa. Mas quando é clicado, em vez de nosso atraso, se você não puder fazer um atraso em um botão. Quando for clicado, abra em sobreposição. Normalmente, ele vai para Navegar até. Você pode abrir essa sobreposição. Vamos para nossa página de inscrição na Newsletter; todas essas mesmas coisas. Vamos dar uma olhada e excluir este aqui porque ele vai tentar lutar. Vai aparecer automaticamente, esse atraso um. Agora, se eu clicar neste botão, espero que ele se abra. Vamos dar uma chance. Vamos clicar em redefinir. Nada vai acontecer a menos que eu clique neste botão e ele apareça. Isso pode ser um, tem certeza? Tem certeza que tem certeza? Tem certeza de que deseja excluir coisas? O que quero dizer com isso é vamos dar uma olhada, eu apenas pesquisei inspiração pop-up no Google. Você pode ver que há muitos Modais pop-up diferentes. Ele apenas escurece a tela, não precisa sair da página, pode ser qualquer uma dessas coisas. Esse é o meu modal pop-up. Vamos entrar no próximo vídeo. 86. Como criar e prototipar uma dica de ferramenta no Figma: Olá, todos. Neste vídeo, vamos fazer essa pequena dica de ferramenta que aparece quando você clica na informação CSV. Há muita construção, como o cartão, a dica de ferramenta e o pequeno ícone de informação aqui. Eu vou fazer por você se você puder acompanhar a coisa toda. Mas se você quiser apenas cortar a perseguição, o que você precisa fazer é, deixe-me mostrar-lhe, você tem um quadro aqui embaixo. No nosso caso, é apenas um círculo, e temos outro quadro aqui, que é minha dica de ferramenta com alguns textos nele. Para conectá-los, você clica nisso, você diz, vá para lá. Quando você tocou, navegue até a dica de ferramenta. Isso é errado. Eu quero ir On tap, Abrir sobreposição para a dica de ferramenta e, em vez de centralizado, quero alterná-lo para Manual e você verá esta versão fantasma dela. Começa por lá, quando você clica nele, ele aparecerá onde quer que isso esteja. Vamos colocá-lo lá. Vamos dar uma prévia. Você clica nisso e ele aparece. Vamos fazer isso, a versão longa construindo tudo isso. Fique por aqui se quiser vê-lo. Caso contrário, pule direto para o posicionamento manual. Vamos começar com [inaudível] Vamos dar uma dica de ferramenta na página Checkout. Vamos ter que desenhar duas partes, o gatilho, um pequeno botão que o faz aparecer e depois um pequeno botão. O para a ferramenta oval ou para a ferramenta circular. Experimente algo do tamanho certo, é a cor certa. Vou adicionar essa pequena informação Olho, que vai na dica de ferramenta. Vou usar a ferramenta Texto, clique uma vez. Vou digitá-lo, eu. Provavelmente não vou usar minha fonte, vou usar o Roboto ou comecei a usar o Open Sans para tipo de informação. Você consegue ver a diferença entre Roboto e Open Sans? Certo, são fontes diferentes. Vamos colocar isso no meio. Vamos torná-lo branco. Vamos centralizar os dois. Agora centralizando há um atalho, é a opção H enviar para eles como horizontalmente e opção V para verticalmente. Ok, em um PC, mantenha pressionada a tecla Alt e H ou V para horizontal ou vertical. Ok, talvez você esteja lá do outro lado, tenha ambos a opção selecionada H. Agora, porque estamos lidando com algo tão pequeno, só temos como um Pixel, não podemos ficar no tamanho do Pixel, algo como no Photoshop. Então você precisa ter certeza de que o círculo é um pouco grande o suficiente para ter um espaço no meio. Você pode ver essa linha lá? Opção H. Aqui vamos nós. Ok, você também pode gastar muito tempo em você é pequeno gatilho. Então eu tenho os dois, gasto mais dois, precisa ser ousado. Não sei por quê. Não, não acontece. Tudo bem. Então, com eles selecionados, vou transformá-los em molduras pequenas. É Command Shift G ou clique com o botão direito neles, transforme-os em um quadro. Eu chamo isso de meu, vai ser dica de ferramenta e este vai ser o gatilho. Certo, vamos construir a outra parte. Então, vamos pegar um retângulo. Pensei que usássemos molduras para tudo. Estou usando um retângulo aqui porque quero pegar isso. Eu quero que você comece a usar essas coisas booleanas e você não pode fazer isso com quadros. Há um desses casos de uso em que podemos usar retângulos e triângulos. Certo, então eu quero fazer isso. Então eu seleciono a opção H, centralize-os juntos e vamos sufocá-los. Se você clicar no primeiro, ele fará Union. Lá vai você, é o que você mais usa e eu vou clicar duas vezes nele e vou pegar nos cantos. Tenho cantos de corrida muito inconsistentes por toda parte. Você deveria ter, eu adivinhei quatro. Você deve ter consistência nos cantos em todo o tipo de aplicativo. Vou selecioná-los, para que a dica de ferramenta e esses sindicatos moldam turnos, para que eu possa clicar neste primeiro, mantenha pressionada a tecla Command em um Mac. Tecla de controle em um PC, selecione ambos e novamente, opção H. Então eles se alinham. Pode fazer com que isso apareça um pouco. Também quero que seja branco. Vamos colocar algum texto nele. Clique e arraste para uma caixa de largura fixa. Certo. Tenho algumas mensagens para colocá-lo lá. A caixa simplesmente não é grande o suficiente. Clique duas vezes, entre para dentro, então estou faltando com um retângulo, algo assim. Vou mudá-lo também para a altura fixa. Vou dizer altura fixa, quero dizer, Altura automática. Vou centralizá-lo também. Certo, e vamos para Drop shadow. Há muitas coisas acontecendo. Tudo bem, mude a sombra Drop. Vou enfiar esses dois em um quadro, então essa é uma espécie de uma unidade. Certo, tem que ser um quadro. Vamos dizer que esta é a dica de ferramenta Popup. Legal, então há dois bits. Eu tenho essa coisa. Este é o meu gatilho de dica de ferramenta e eu tenho isso. Agora, o meu está meio escondido dentro disso. Isso não importa. Provavelmente não. O meu está meio confuso neste grupo. Não, não é, vamos tirá-lo de lá. Então lá estão eles, vamos colocá-los um embaixo do outro. Então essa coisa aqui, começa, veja esse arquivo, assim como o outro que fizemos. Certo, e o que dizemos é quando você é clicado, então vamos ao protótipo. Digamos que, quando você for clicado, eu quero que você vá aqui. Ok, e Ao tocar, o que é ótimo, Navegue até a dica de ferramenta. Na verdade, eu quero que ele abra a sobreposição. Ok, e a diferença entre este é que ele está lá em cima e pode aparecer no meio. Não vai ficar quieto sem valor, vamos apenas protóti-lo rapidamente. Vou clicar nesse botão e ele aparece no centro da minha tela. Eu queria que estivesse no topo. Então, o que você precisa fazer é mudar isso para dizer, nós tínhamos centrado, provavelmente vi que há Top esquerdo, Superior direito, Inferior center. Esses são os principais. Há um monte de outros, incluindo Manual. O que o Manual faz é que ele mostra uma espécie de prévia de onde ele vai aparecer. Então eu vou dizer, aqui vai você. Há minhas teclas de seta só para empurrá-lo para baixo. Então é aí que o mantemos aqui para fins de trabalho. Portanto, não está na tela e, em seguida, aparece aqui. Eu disse que vai se sobrepor. Não vai se dissolver. Ele só vai aparecer instantaneamente, não vou acinzentar o fundo. Vamos visualizá-lo, apresentá-lo. Vamos. Você olha para isso. Eu clico em segundo plano, nada acontece. Então, vamos fazer isso. Então, digamos que sempre que alguém clica na área de fundo, ele se apaga. Tudo bem, visualize mais uma vez. Tenho que parar de fechar essa pré-visualização. Isso levará mais e mais tempo quanto mais imagens você tiver envolvido em sua visualização. Olhe para isso, uma pequena dica de ferramenta legal. Tudo bem. Então basicamente o mesmo que o último, exceto que podemos usar esse posicionamento manual. Essa é a singularidade sobre essa coisa de dica de ferramenta específica. Tudo bem, vamos pular no próximo vídeo. 87. O que são Fluxos no Figma: Olá, todos. Vamos olhar para os fluxos. O que são fluxos? São essas coisas. Você provavelmente tem fluxo um e fluxo três deitado em algum lugar, e você não tem certeza de como conseguiu. Vou mostrar a vocês como usá-los, para que servem, como renomeá-los. Todos os tipos de coisas boas sobre fluxos em Figma. Vamos pular. Então você já tem alguns fluxos? Você pode ter um monte deles. Vá para Protótipo. Estou no meu celular, tenho um fluxo, você pode ter outro. Por que você teria mais de um fluxo? É porque você está trabalhando em outra coisa, talvez aqui embaixo, e você vai para protótipo, e você é como, eu vou desenhar isso para este, porque esse fluxo não se conecta a esse em qualquer estágio, ele sobe, você precisa começar aqui, e aqui, então você pode acabar com muitos deles. Para se livrar deles, porque você realmente não sabe o que eles fazem ainda. Ok, você não pode ter nada selecionado. Clique em segundo plano, além do protótipo, e há vários fluxos, e você pode realmente clicar neles e excluí-los. Ok, eu tenho um fluxo e ele começa aqui. Qual é o fluxo? Vamos, na verdade, ir andando. O único pedaço de prototipagem que fiz nesta maquete móvel em particular está nesta página aqui. Começa aqui, vai, eu sou o começo do fluxo. Você pode iniciá-lo em outro lugar clicando, segurando e arrastando, e dizer que realmente comece o fluxo lá. Então, quando esse botão é clicado, ele vai comprar Agora, vai até lá, e quando esse é clicado, ele vai lá. Você começa a manipulá-lo. Então esse é esse fluxo em particular. Este é o meu fluxo de comércio eletrônico. Vamos fazer isso, vamos chamá-lo de fluxo de comércio eletrônico. Vou clicar em segundo plano, vou nomear este, vou chamá-lo de eCommerce Flow. Porque é isso que fomos encarregados de fazer. Este é o fluxo de tarefas que estamos fazendo. Digamos que terminamos esse trabalho, agora precisamos trabalhar na tela de login. Portanto, é outro fluxo de tarefas. Vou roubar um login de outra pessoa. Eu encontrei este aqui do Bravo Studio. Muito obrigado. Cara, Figma é ótimo para a comunidade. Então eu vou pegar você, você, você, já está montado sob protótipo, o que é bom. Vou copiá-lo, e ele traz todas as coisas do protótipo com ele aqui, Shift-1 para ver tudo. Eu tenho todas essas coisas. O que é isso aqui em baixo? É lixo que eu construí ao longo deste curso. Vou colar este aqui embaixo. Deve estar acima, mas também há lixo lá em cima. Lixo em todos os lugares. Agora, no momento, porém, não há como chegar aqui. Então, se eu for visualizá-lo, quantas páginas temos? Temos um monte de quadros, vamos visualizá-lo. Começou com meu fluxo. Eu só tenho um fluxo, então ele não me mostra nenhum outro, e eu posso clicar nisso e ir trabalhar. Mas não há como chegar a essa tela de login, porque estamos começando na página inicial, já estamos logados. Estamos fingindo. Vou fechar isso, então precisamos de outro fluxo. Para criar outro fluxo, vamos clicar nesta primeira página aqui, e vou iniciar um fluxo a partir desse ponto. Este não será chamado de fluxo, isso pode ser chamado de Login. Só significa que agora, quando vou ao meu protótipo, redefinir, não, clique neste. Aí está ele. Tenho dois tipos de fluxos. Eu poderia estar mostrando a alguém, e se eles souberem o que estão fazendo, você poderia dizer assim dois fluxos à esquerda, você pode começar a qual você quer ir, porque eles realmente não se conectam. Não há como pular sobre esses dois. Você pode ter vários fluxos, login, talvez a tela de cancelamento, talvez como alterar seu perfil de usuário, como redefinir uma senha. Você tem muitos fluxos diferentes se seu protótipo estiver ficando bem grande. É para isso que servem os fluxos. Você pode realmente fazer algumas coisas legais, como você pode realmente começar a criar protótipos a partir do jogo em vez de acertar este, onde não tem certeza de onde você quer começar. Você pode dizer que realmente comece a partir da tela de login, por favor. Ou este aqui, comece com esse fluxo de comércio eletrônico. Você pode fazer um pouco mais. Você pode ver aqui que não há muita coisa acontecendo, então não podemos ir nada selecionado, além do protótipo, encontrar meu fluxo, você pode clicar nele, não, você clica nele aqui. Você pode adicionar uma descrição. Não consigo lembrar onde. Oh, aí está. Então eu selecionei aqui, e você pode ver este pequeno lápis aqui, inserir uma descrição, e você pode dizer: “É assim que comprar os fones de ouvido”. Você pode adicionar um pouco à descrição, e isso pode ser, “Isso inclui as atualizações do Doug”. Assim, quando as pessoas estão prototipando e dizem o login, elas podem ver essa tela, e podem ver isso inclui as atualizações do Doug. Você entende a ideia. Você pode fechá-lo. Agora, acho que provavelmente, eu não sei, está um pouco escondido ali. O que você pode fazer é realmente ir para, então se eu clicar em segundo plano, ver isso, há essa opção que diz: ver este pequeno link? Você pode copiar esse link, e tudo isso é apenas um URL, grande, longo e feio. Mas você pode colocar isso em um e-mail, e dizer: “Ei Dave, este é o que eu quero que você verifique, e o que acontecerá é que ele irá exatamente para esta página de login. Você acabou de receber um arquivo, mas Doug, ou Dave, ou quem for responsável pelo login, pode ir direto para lá. Ou talvez você tenha recebido um e-mail com alguns links diferentes, como: “Ei, confira o fluxo de comércio eletrônico. Aqui está. Ei, confira o login. Aqui está”, e apenas dê a eles dois links separados vez de tentar explicar que você entra aqui e depois clique nessa pequena coisa que se parece com uma caixa com um retângulo. Basta clicar nos links. Tudo bem, é por isso que você tem fluxos, e você provavelmente tem fluxo três e flui 17, apenas pendurado. Tudo bem, então é isso para fluxos. Sim, útil. Ótimo quando você os renomeia, ótimo quando você obtém um protótipo realmente grande. Tudo bem, é isso. Vejo você no próximo vídeo. 88. Overlay do menu de navegação móvel no Figma: Olá, todos. Vamos fazer um pequeno slide no menu de navegação que entra e sai. Você pode usar o botão fechar, super fácil de fazer. Vamos pular. Para economizar tempo, criei um pequeno slide no Menu, tudo é um quadro que fica aqui. Provavelmente não são botões grandes o suficiente para clicar, vou ter que testá-lo no meu telefone, mas fiz uma pequena cruz lá também. Na verdade, é apenas um plus virando de lado para que eu possa fechar as coisas. Mas sim, vamos começar a manipulá-lo. Ainda é um mundo de sobreposição. O que vamos fazer é home page, vamos ao nosso protótipo e vamos dizer quando esse botão aqui for clicado, é um pouco pequeno e está tudo bem no momento. Vou dizer que quando isso for clicado, vá lá. Não quero que você vá lá. Quero que você não navegue, abra uma sobreposição. Em vez de instantâneo, quero que você se mude. Vai deslizar, vamos dar uma chance, visualizá-lo. Clique em seus rabiscos e lá vai. Ele se move, é o jeito errado que eu queria. Vamos dar uma olhada. Posso dizer, na verdade, quero que você não o mova dessa maneira. Vai da esquerda. A flexibilização, vamos facilitar para entrar e sair para ser um pouco mais bonita. A mesma coisa, há brincadeira. Vou apertar minha redefinição, clique nesse botão. Está preso lá. Precisamos nos livrar disso. Vamos fazer algumas coisas. Uma delas é, vamos chegar muito perto ao clicar no plano de fundo. Isso é o que eu quero. Vou levá-lo ao fundo também. O que eu vou fazer é que eu fiz este pequeno botão aqui. O que eu quero que essa coisa faça é quando é clicada, na verdade eu não quero que ela vá a lugar nenhum. Quero que, quando clicar, vá para uma interação. Quando é grampeado, o que eu quero que ele faça, eu quero que ele feche a sobreposição. Esse é o trabalho dele. Não vai a lugar nenhum, só se fecha. Vamos dar uma prévia. Vamos apertar um para uma atualização e vamos clicar nele. Posso clicar em qualquer lugar em segundo plano aqui. Agora posso clicar nisso e ele fechará, com alguma flexibilização e saída, o escuro no fundo um pouco. É muito bom. Vamos prepará-lo um pouco mais só para ver porque o que eu quero fazer é, no momento, se eu clicar aqui e eu ir Recursos, não posso ir a nenhum outro lugar. Se eu chegar à página Recursos, o nav não parecerá. Vamos apenas passar pelos movimentos porque o que eu quero fazer é e preciso disso, clique duas vezes nele para entrar, para fazer a mesma coisa. Eu preciso disso para ir para isso e posso dizer On Tap, Overlay, fazer com que ele se mude. É lembrado da última coisa que fiz, o que é ótimo. Muitas vezes, porém, é mais fácil pegar isso, copiá-lo, e se eu copiar alguma coisa, e eu excluí-lo e colá-lo, isso trará através da prototipagem. Vamos dar uma prévia. Vamos redefini-lo para Aki. Funciona na página inicial. Se eu for ao Saiba mais, ele ainda funciona aqui também. O que provavelmente deveríamos estar fazendo agora é clicar duas vezes neles e dizer que vai para casa, que vai para os recursos, que vai para o corte e que vai para a página da minha conta. Não tenho uma página de conta. Agora, a navegação vai fazer algo e fazer mais do que simplesmente deslizar para dentro e para fora. É uma transição feia. Essa transição ainda está usando o movimento porque lembra a última coisa que você queria fazer. Essa coisa aqui, vamos para Tap. Não quero me mudar. Vou fazer com que ele se dissolva. Isso vai funcionar. O mesmo com este. Toque nessa coisa para Dissolver. Vamos dar uma prévia, recursos, aqui vamos nós. Vou deslizar qualquer menu, além de montar um pouco do nosso protótipo. Isso vai ser para este vídeo. Vejo você no próximo. 89. Projeto do curso - Criação de protótipos: Olá, pessoal, hora do projeto de aula. Vou fazer com que você faça alguns dos protótipos que fizemos em vídeos anteriores. Basicamente, o pop-up do boletim informativo, a dica de ferramenta e a navegação móvel que desliza. Certifique-se de que a dica de ferramenta seja chamada CVV, eu a chamo de CVC há muito tempo. Faça capturas de tela de todas elas, esteja no modo protótipo para que eu possa ver as linhas que as conectam. Agora, o seu não precisa ser como um boletim informativo, não precisa se parecer com o meu. A dica de ferramenta pode estar em outro lugar, e seu equipamento de navegação pode deslizar de diferentes lugares no topo e não se parecer com o meu. Mas eu só quero acertar essas mecânicas, então a sobreposição que é cronometrada e apareceu. Este aqui é um pouco clicável, aparece na página manualmente, e este aqui é um slide na navegação, e temos alguns desses outros pequenos botões lá também. Em seguida, compartilhe-o na parte atribuição/projetos/comentários deste site e também compartilhe nas mídias sociais. Estarei interessado em ver como seu design está aparecendo, como o pequeno formulário parece, que você fez com o pequeno pop-up do seu boletim informativo. É isso, te vejo no próximo vídeo. 90. 90: Olá a todos. Neste vídeo, vamos fixar coisas na parte superior. Ok, para que o conteúdo deslize por trás disso. Vamos torná-lo um pouco transparente. Também faremos um rodapé. Meu rodapé não é muito espetacular. É uma caixa. Ok, você quer a versão curta ou a versão longa? Começaremos com a versão curta. A versão curta é selecionar algo, digamos, posição fixa no topo. O mesmo com a inferior, você está em uma posição fixa. Marque isso e diga não, não é. Ele desapareceu e moveu o pequeno vídeo de atualização, eles simplesmente vão se mover para onde está. Então, clicamos no elemento. E no design, havia uma opção aqui que tinha uma pequena caixa de seleção que você deveria ver. Agora é movido para Prototype. Ok, então eu clico em Protótipo. Eu selecionei a coisa e em vez de a posição ser rolagem, que é o padrão, quero que ela seja corrigida. Eu quero que fique no lugar. Ok, e veja minha pequena prévia. E a aparência permanece no lugar. Incrível. Eles acabaram de movê-lo. Vamos fazer a parte inferior novamente. Ok, vou clicar aqui e sabemos que não está sendo projetado porque eles o moveram É aí que vai ficar pelo resto deste curso. Ok, se eu fizer isso de novo, tentei atualizar os vídeos que o contêm, mas você sabe que não consigo encontrá-lo lá. Agora está sob protótipo. OK. Em vez de rolagem aparente, ela será corrigida. A única diferença com este é que ele vai ser meio que consertado. Está tudo bem. Mas eu queria consertá-lo sem grudar na parte superior. Para o fundo. OK. Então, se eu for e redimensionar as coisas , elas ficarão na parte inferior Tudo o mais neste vídeo é bom e correto. Tudo bem, continue. A única outra coisa que você precisa fazer é garantir que o protótipo da moldura esteja configurado para rolagem vertical. Está bem? E coisas que realmente se expandem. Está vendo isso? Na verdade, vamos desligar o meu. Ok, então eu vou criar o conteúdo do Clip. Eu tenho um monte de coisas para percorrer. Segundo, se você não tiver isso, não vai rolar. OK. Esta página nunca pode rolar. Não importa quantos. Hm, rolagem de protótipos, trabalhos horizontais. Não vai funcionar fazer com que as coisas rolem. Basta colocá-lo como se estivesse no fundo. Tudo bem. Então, veja. Rolagem, rolagem da página inicial, página inicial, sem rolagem. Tudo bem. Então, por que esse vídeo é tão longo? É porque você vai correr, quero te mostrar como eu trabalho, mas também os problemas que você vai enfrentar. Vamos analisar os problemas com a adição de curtidas. Originalmente, não temos esse fundo preto, então vamos tentar forçá-lo a entrar em um componente existente. Ok, vamos correr, ter alguns problemas com a escalabilidade para algumas coisas gerais que podem te surpreender enquanto você está trabalhando Isso não parece interessante. Vá para o próximo vídeo. Vamos. Ok, então colocar no topo é fácil. Colocar no fundo com a mesma facilidade. Mas vamos ver por que esse vídeo é tão longo? É porque vou tentar fazer isso com o meu filho. Eu quero adicionar esse tipo de fundo preto a ele. Vou te mostrar algumas coisas que você também vai encontrar quando está fazendo isso do zero e sabe para onde está indo É fácil quando você está meio esforçando e mudando isso à medida que avança As coisas podem ficar confusas. Se você é novo, você está achando isso, você sabe, novo e excitante mas difícil, basta começar de novo. Apenas descarte, você sabe , descarte esses itens e comece de novo e crie um novo conforme necessário. Mas digamos que não queremos fazer isso porque o usamos várias vezes, você sabe, várias vezes. Então, bem, a primeira coisa que precisamos fazer é observar como as imagens ficaram. Isso acontece na minha versão de vez em quando, principalmente quando estou lidando com o histórico de versões. Então eu fecho e abro novamente, ele desaparece. Vou deixar isso no curso porque você pode se deparar com a mesma coisa. Você diria, para onde vão todas as minhas imagens? Eles estão lá apenas por algum motivo, eles desaparecem. Isso pode estar apenas on-line. De qualquer forma, estamos de volta. Eu quero aquele fundo preto lá dentro. Em primeiro lugar, não podemos adicionar o fundo preto a essa instância. Isso me deixou lá por um segundo. Ok, então queremos encontrar o componente principal, então clique com o botão direito e vamos para o componente principal até ele. Ok, ele acabou de chegar aqui. Ele deveria estar na página de componentes. O que vamos fazer é colocar a instância lá e usar o naw principal Vou colocá-lo aqui para que possamos alinhar tudo. Então, basicamente, o que aconteceu é que temos essa coisa chamada top nav É um componente dentro dele, são os diferentes ícones. Agora não há moldura. Ok, não há moldura enrolada nela. Então, como faço para colorir isso? Na verdade, o componente é uma moldura. quadro e um componente têm todos os mesmos atributos de um quadro. Ok, então se eu deslizar nele, posso realmente adicionar uma cor de fundo a ele Vou usar preto e vou reduzir a transparência. Você é ótimo, exceto que é San. Diminua o zoom do Excel. Vamos entrar um pouco mais perto. E veja isso. Se eu pegar esse cara e ir à operação, fico tipo, isso não está funcionando, é ficar. Por que isso não está exagerando no look? Veja esses caras. Ok, vamos dar uma olhada. Estamos de volta às nossas restrições. Vamos desfazer isso diretamente novamente. Se eu clicar nesse cara, dentro desse componente, diz que Scott aqui está usando os fones de ouvido esquerdo e superior Canto superior esquerdo. Porém, todo o grupo, por algum motivo, vamos dar uma olhada. Minha moldura inteira diz escala. O que não é. Então está tudo bem. Mas estou desligando isso desses caras. Se eu clicar nele, ele disse para escalar. Se eu virar o corpo dele para a direita, na verdade estou apenas desligando. Eu não me importo com o que é no momento porque eu quero me alongar. Só quero ter certeza de que são todos iguais. Certifique-se de que seus telefones estejam desligados. Vamos selecionar esse. Não quero mais escalar. Vou usar o que eu fiz. Eu fiz o certo. E o mesmo com esses caras. Esses caras vão ficar no topo. Significa apenas que quando eu escalo o quadro ou o componente, ok, eles não vão se distorcer Parte disso é o que deu errado. O que é aquela coisa? Qual era a porta da minha casa? Eu esqueci Até fizeram com que nossa porta desaparecesse há ases. Vamos ver o que está acontecendo com isso. Ok, então a porta está trancada de outra forma. Então, vamos pegar uma grande porta de alô no meio. Desapareceu há muito tempo. Então, o retângulo aqui está configurado em escala, então eu vou fazer com que ele fique à direita Essa é a primeira vez que isso acontece no topo. Então, espero que agora eles saiam. Lá vamos nós. Ok, então eu só estou distorcendo isso. Seria fácil simplesmente recriá-lo, certo? Mas ei, o que está esticando isso para cima e para baixo, essas partes individuais aqui? Esse retângulo está na parte superior e direita, essa parte está configurada em escala Oh, tem todo tipo de coisa acontecendo. Sabe, quando eu disse lá, você pode achatá-lo. Ok, é provável que eu o achate. Agora, o que você vai? Estou apenas verificando tudo isso, verificando a escala, todas essas peças, você pode simplesmente ir, meu amigo vai ser achatado Isso é simplesmente mais fácil de trabalhar. OK. Fizemos isso agora. Tudo bem, essas coisas complicadas aparecem. Eu tenho isso assim agora. Vou apenas reorganizá-lo dentro disso. Teria sido mais fácil simplesmente recriá-lo, mas não teríamos aprendido muito Tudo parece um pouco grande. Vou testá-lo no meu telefone. Eu não testo no meu telefone há muito tempo neste curso, e tive a horrível sensação de que eles são muito grandes Ok, você vai obter um 0%, que é o deslocamento zero. Sim. Eles ainda se sentem provavelmente muito grandes. Tudo bem, agora que eu consertei e está pronto, vou dizer que você está posição fixa na parte superior e esquerda. Só uma pequena interrupção aqui. Eu esqueci. Acabei de notar que, quando estou editando isso, esqueci de mencionar aqui no painel de camadas Você pode ver que há esse novo título? Diz que tudo consertado lá dentro será consertado, como o que acabamos de fazer. Corrigido. OK. E todo o resto está sob o título dos pergaminhos Então, você verá que provavelmente partes bastante autoexplicativas eram bits fixos Aqui embaixo estão os pergaminhos. Tudo bem, continue. E eu não quero usar isso, na verdade. Vou transferi-lo para que tudo seja devidamente oficial. Mova-o para a página do componente. Vou trazer essa pessoa até aqui. E esses caras precisam de um pouco mais de alinhamento. Esse aqui. Eu preciso ser um pouco diferente. Eu poderia estar começando a criar uma variante, mas sou preguiçoso. Ok, então vou clicar duas vezes aqui do lado de fora e me esconder. Não é possível excluí-lo porque faz parte do componente original. Há uma pequena lacuna lá. Acho que esse aqui, por algum motivo, o que é, 375 Este é provavelmente 376 por algum motivo. Por que é isso? Provavelmente foi quando eu estava brincando com a criação de variáveis aqui Às vezes, eles vão para o lado aqui e eu os arrasto de volta para dentro. E, obviamente, não o arrastou de volta da maneira certa. Tudo bem, para onde foi parar meu espaço de componentes é uma verificação dupla. Onde você foi parar? Aí está. Olá. Por todo o lado. Você pode ir lá agora. Tudo bem, vamos testar isso. Fica nessa página. Agora vamos dar uma olhada. A outra coisa que pode não acontecer com a sua, que abordamos rapidamente no início, é, digamos, esta página aqui. Na verdade, há coisas para rolar para baixo. Se não houver nada para onde rolar, ele pode descer. Essa vai ficar bem , mas não vai funcionar. Aposto que clico nisso. Eu vou para o protótipo. Na verdade, não precisa ir ao protótipo. Acesse esta prévia ou apresentação, eles chamam de Olha, nada acontece, ela não fica no topo. A maneira de fazer isso acontecer é clicar no quadro real. Ok, vá para Prototype e você dirá, o que você faz com o estouro Ok, sem rolagem, de jeito nenhum. Eu quero um pouco de rolagem vertical. Muitas vezes, pressiono a rolagem horizontal, que é para a esquerda e para OK. Por acidente, verticais que você deseja subir e descer. Tudo bem, lá vamos nós. Agora vamos rolar. Está fixado na parte superior? Não é. Meus amigos foram projetados fixos na parte superior. OK. Essa está fixada na parte superior? Vamos fazer isso. Lá vamos nós. Só mais uma vez. Muito fresco. Vamos para o jackpot de um pouco mais de página. Tudo bem, então isso é fixar coisas no topo. Fixar coisas no fundo não é a mesma coisa. Vou desenhar algo e dizer que você e meu amigo estão presos na posição inferior fixa ao rolar E você não estará no topo, mas no fundo. Ok, vamos tentar. , rolagem, rolagem, rolagem, coisas que você pode colocar Fiz uma pequena pesquisa no Google por você. Esses tipos de coisas aparecem em alguns aplicativos na parte inferior. Também vimos essas lanchonetes mais cedo. Essas pequenas coisas temporárias que aparecem. Essas são as coisas em potencial que podem aparecer na parte inferior. O que você pode considerar fazer, não siga a linha do caminho. Não sei por que não gosto. Sim, fixando coisas no topo. Fixando coisas na parte inferior. É isso mesmo. Nossa nave está funcionando e eu vou ver isso no próximo vídeo 91. Como criar um deslize de rolagem horizontal no Figma: Olá a todos. Neste vídeo, vamos ver como fazer a rolagem horizontal, bondade na Figma. Deixe-me mostrar como. Vamos começar com uma versão simples aqui. Nem sei por que fizemos isso, mas eles servirão ao propósito deles. Vamos fazer isso com alguns retângulos para começar. Vamos fazer 1, 2, e ir ao Comando D, D, D , D, então eles se afastam. Precisamos de algo que saia da página horizontalmente. Vou clicar no meu quadro e desligar conteúdo do clipe só para poder vê-lo. Vou pegar todos eles. Agora, para que isso funcione, todas essas coisas precisam estar dentro de um quadro ou dentro de um componente ou de um layout automático. Todas essas coisas embaixo do rolo são como uma moldura, e é disso que precisamos. Vou usar o quadro Plano, comando a opção G. É um quadro, não vou dar um nome porque não há nada, e você precisa fazer duas coisas. No outro vídeo, lembre-se que dissemos, ei, este é o protótipo de rolagem vertical. É o mesmo para horizontal. Exceto por fazer isso fora do quadro móvel, você faz isso neste quadro, e no quadro que acabamos de criar, dizemos que você pode realmente ter sua própria rolagem, e você diz rolagem vertical. Você pode usar esse pequeno erro e ele não vai funcionar porque o que ele está dizendo é, o quadro precisa ser pequeno, isso precisa ser claro. Vai ler. Mas o que isso está dizendo é que, se eu trabalhar para projetar, isso tem uma moldura em torno dele. Mesmo que eu recorte isso, ainda não funcionará. Veja isso, se eu voltar ao protótipo, isso ainda é um aviso. O que está dizendo é que você precisa cortar o quadro assim. Vamos voltar a ligar esse para fazer mais sentido. Lembre-se, esses caras dentro daqui, acabam por fora de um quadro. Esse quadro pode ser menor. Normalmente é maior. Sempre fazemos isso maior, mas podemos torná-lo menor. Lá vamos nós, nós o tornamos menor. Você tem que prendê-lo? Você não, mas parece melhor. Você só precisa ter esse quadro externo menor do que o conteúdo dentro dele, então ele funcionará. Vamos clicar nisso e tentar visualizá-lo, aqui vamos nós e eu posso rolar. Por que não está funcionando? Vamos voltar e verificar. Você tem protótipo de rolagem vertical. Perfeito. Ainda há um aviso e diz o pergaminho do quadro, maior que o quadro. É, eu fiz isso. Enquadre você, é o quão grande ele é. Uma metáfora grava o conteúdo e apliquei essa rolagem vertical, rolando horizontalmente. Eu quero um homem horizontal, eu os confundo o tempo todo. Você está vendo isso. Você é como, ei, ele quer dizer vertical, ele quer dizer horizontal. Isso acontece o tempo todo. Se você já fez algum dos meus outros cursos, você saberá. A ortografia é um desafio e horizontal, vertical. Eles precisam de mais ícones aqui. Eles têm um ícone? Eles não. Coloque um ícone lá para pessoas como eu que não conseguem dizer a horizontal da vertical. Essa é a visão básica. Desde que o enquadrador do lado de fora de onde está, seja menor e, em seguida, tenha que ser um pouco do que o conteúdo no interior. Apenas coloque-o. Novamente, não importa se você selecionou esse quadro e se ele foi cortado ou não. É só se você puder vê-lo ou não. Ele só quer ver o quadro menor. O que vou fazer? Vou fazer isso com isso. Fizemos isso antes. Eu não queria começar com isso no caso de você estar chegando a este vídeo sem fazer o curso inteiro. Essa coisa aqui é algo que fizemos antes quando estávamos aprendendo isso. A coisa legal sobre o layout automático é que você pode passar como isso, o que o faz funcionar, e há duas coisas que você precisa fazer. O que foi isso? Um deles é que precisamos dizer que o quadro é menor, e o outro é que precisamos garantir Dan não diga horizontal, vertical, horizontal. Você pode desenhar a linha no ar e vamos clicar nela. Vou tentar visualizá-lo, visualizando mal de propósito, eu acho. Está começando com esta página. Voltaremos para a página inicial. Bem, onde está? Não consigo ver essa página. Eu tenho 1-4. Eu tenho essa página aleatória, mas não tenho nenhuma das outras. Por que eu não tenho isso? Primeiro de tudo, eu poderia simplesmente entrar nisso e ir ao protótipo e dar a ele um ponto de partida de fluxo e então eu posso começar daqui, perfeito. A rolagem está funcionando, e a razão pela qual não é porque não estamos vinculados a ela em nenhum estágio. Vou desfazer esse fluxo, então não quero isso. Se eu tenho um protótipo e se eu selecionar tudo, eu apenas faço o comando A ou Controle A em um PC, você pode ver todas essas linhas indo em todos os lugares que se conectam a isso, algo se conecta a isso. Nada vai lá ou lá. É por isso que não conseguimos ver essas duas páginas sem primeiro clicar nelas e depois apresentar. O que podemos fazer é dizer que quando alguém clica no botão de compra e vai lá, toque em navegar instantaneamente, perfeito. Isso fará parte disso. Isso ainda não será. Como chegamos a este? Precisamos de um botão. Este é o show reviews. Não temos isso de qualquer maneira. Felizmente, temos um ativo, e temos um grande botão gigante aqui. Lá vamos nós. Agora posso dizer clique neste e chegue até lá. tocar, vá lá, abra-o, envie agora, mesmo que eu comece de novo aqui, comece nesse fluxo. Na verdade, não posso mais clicar nisso porque essa coisa é sempre o caminho. Às vezes, você precisa ampliar para poder clicar na parte superior disso. Mais uma revisão e há nossa pequena coisa scrolly. Aqui vamos nós. Isso é rolagem horizontal. As duas coisas a serem lembradas, o quadro externo precisa ser menor do que o conteúdo interno e o protótipo que você precisa para alterná-lo para horizontal. Lembro-me disso por um dia de dois, não se preocupe, mas isso desaparece eventualmente. A outra coisa que não está neste curso, eu acho, é que eu ficaria tentado a tornar isso mais curto para que você possa ver mais disso para dar a dica de swipability. Eu odeio sites quando é assim e você é como, oh, você simplesmente desliza e você está tipo, bem, como eu vou saber? Este provavelmente tem uma dica suficiente. Eu gostaria de ver algo assim, a espiada por lá. Eu passava e provavelmente criava um cartão de revisão que fosse um pouco mais magro, então havia a capacidade de ver isso. É isso. Vejo você no próximo vídeo. 92. Rolagem automática para baixo na página ao ponto de ancoragem no Figma: Ei, gangue. Vou mostrar a você como clicar nisso e rolar a página para baixo. Vamos para a parte inferior. É muito fácil de fazer. Deixe-me mostrar-lhe como. Para fazer isso funcionar, acabei de fazer essa coisa no topo aqui nos detalhes do meu produto. Basicamente, vou falar sobre essas coisas. Estes são apenas quadros que eu fiz. Temos um modo de protótipo, e dizemos que, em vez de ir às páginas, vamos até aqui, vá para este link. O retângulo. Agora, depende, pode ser um componente, pode até ser uma caixa de texto. Você pode ir para qualquer coisa, é muito legal. Também pressupõe que, como você está rolando, você está fazendo algo na mesma página. Ele diz que vamos rolar para. Entramos nesse retângulo. Vamos dar uma prévia, então vamos clicar no título aqui. Vamos apresentar. Eu clico nele e funciona. O que aconteceu lá? Para atualização. Essas coisas estão funcionando. Vai para o topo, mas essa coisa ficou presa, outra coisa surgiu. Funciona. Vou reivindicar que funciona. Primeiro de tudo, essas coisas não deveriam estar se movendo. Isso saiu, lembra de pergaminhos e consertado? Precisa fazer parte da gangue fixa, eles não estão rolando gangue. Essa atualização deve corrigir isso. Clique nisso e ele funciona. O problema é que ele vai até o topo. Agora, precisamos brincar com isso e isso é compensações. Você tem x e y. Uma daquelas coisas que eu acho difícil de novo, então você exatamente o que você realmente precisa saber é, e você pode ir para a esquerda e para a direita. Apenas brinque com isso. Não consigo nem lembrar qual é sempre que entro nele, sei porque já pratiquei este, que é este primeiro. Que é y para cima e para baixo, e isso é negativo. Vamos dar uma pré-visualização, atualizar. Saiba mais, Materiais. Você pode ver, ele simplesmente continua descendo até que você esteja feliz com ele ser um pouco menor. Vamos derrubá-lo. Eu brinquei com ele e cheguei a menos 200 foi bom. Atualize, clique no botão. Clique nesse botão. Vou levá-lo de volta, menos 200 não foi bom. Algo mudou desde então. Vamos fazer menos 150. Você tem a ideia lá. Uma coisa que faremos é apenas verificar este último. É quase certo, e fácil será animado. É padrão instantâneo. Vamos clicar em Animate. Vamos escolher uma boa flexibilização, e vamos dar outra chance. Atualizar. Clique nesse botão. Bom. Vou fazer o mesmo por este, e vou descer para este retângulo. Vamos manter tudo de bom. Vou usar o mesmo negativo 150. Vamos dar a ele uma visualização de atualização. Aquele. Aqui está você. Bom. Você só trabalha seu caminho através deste também. O problema é que não consigo ver isso. Talvez você tenha que ligar o quadro externo aqui. Você pode ter que ir ao design, desligar o conteúdo do clipe para que eu possa realmente ver tudo. Foi o último conforto. De volta ao protótipo. Até aqui, menos 150. É isso. Eu não percorri para o retângulo, provavelmente role para essa coisa toda em vez do retângulo dentro dela. É por isso que meu pequeno cálculo estava desativado. Isso é um. Material de rolagem. Se você descer a página, talvez seja necessário recusar porque se mover até aqui, não é muito longe. Pode levar uma parede de 0,3 segundos. Este aqui, talvez façamos isso um pouco mais longo. Este pode ser como usar minha seta para cima Shift Up, sobe em pedaços maiores, então eu posso ir para o x400 de um segundo. Posso obter minhas medidas, confundi-las. De qualquer forma, 400 milissegundos, e este aqui vai ser um pouco mais longo. Talvez Shift Seta para cima. Lá vamos nós. Isso vai fazer alguma diferença? Provavelmente não. Mas saberemos. Aqui vamos nós. É assim que rolar uma página para baixo. Ter algo não precisa ser nada. Não precisa ser um quadro, apenas uma coisa para clicar, pode ser um item de navegação. Basta arrastá-lo para baixo e ele deve ser rolado por padrão e animá-lo, se você escolher. Isso é rolar automaticamente as coisas da página na Figma. 93. O que são Equipes vs Projetos vs Arquivos no Figma: Olá a todos. Neste vídeo, vamos falar sobre o que são equipes e quais nossos projetos e o que eu projetei arquivos e esses arquivos de design, Qual é a diferença entre os do site do grupo do projeto e as diferenças entre os rascunhos. Deixe-me mostrar-lhe tudo como isso funciona. Vamos falar sobre as diferenças. Arquivos do que estamos trabalhando até agora, esse é esse projeto em que estamos trabalhando. Você pode ter vários arquivos diferentes. Os arquivos podem viver em rascunhos ou podem viver dentro de um projeto ou como um projeto. Bem, na verdade, vamos pular para a equipe. equipe é como o nome da empresa ou digamos que seja, você trabalha em uma empresa realmente grande, pode ser como uma divisão. Pode ser vendas ou marketing ou não sei, Ásia-Pacífico, que pode ser sua equipe. Dentro dessa equipe há projetos diferentes. Site de comércio eletrônico, então este é o meu projeto dentro dele, pode ter aquele site que estamos fazendo, a visão móvel. Pode ter outro arquivo que criamos, então estamos trabalhando no e-comm V1. Pode haver outro arquivo de design nesse projeto chamado V2. Pode ser uma divisão de aplicativos, pode ser uma versão iOS e Android. Também pode haver arquivos aqui relacionados com o lançamento do site. Este projeto é como um de alto nível da empresa. Para a versão gratuita, você obtém quantas equipes quiser, mas você só recebe um projeto. Se eu for aqui e disser que quero outro projeto, por favor, diz, hey, você já tem um de graça. O que você faz é compartilhar equipes com pessoas. Posso clicar em que tem fones de ouvido e dizer, estou trabalhando com outro designer, não talvez com meu cliente, porque vou falar sobre isso, na verdade, em um segundo. Outros membros da equipe, posso adicionar os outros designers com os quais estou trabalhando, e eles terão acesso aos nossos diferentes projetos. Esses projetos aqui, esses projetos nos permitem separar todo o trabalho que estamos fazendo, em vez de apenas colocá-los todos em um arquivo grande. Por que tivemos rascunhos e, em seguida, por que mantemos arquivos em nossos projetos e em nossos rascunhos. Rascunhos é um bom lugar para ter suas coisas antes que alguém possa vê-las. Porque, obviamente, se eu compartilhar minha equipe, eles podem ver dentro do meu projeto e ver meu trabalho meio acabado e então eles podem estar me julgando, eu não estou pronto para ser julgado. Essa é uma razão pela qual você pode manter as coisas em rascunho. Ninguém mais pode vê-los ainda. Acho que essa é a razão pela qual você tem esse projeto, é que você pode editar para que a outra equipe possa encontrá-lo, você não precisa enviar um link toda vez. Aqui está este outro arquivo que é um e-mail enterrado em algum lugar. Todos eles simplesmente aparecem aqui. Qualquer outro designer de UX ou marketing ou vendas que esteja usando a Figma. Eles podem entrar ou você, os desenvolvedores podem entrar aqui e realmente dar uma olhada nos arquivos do projeto de comércio eletrônico e ver tudo lá dentro. Privado, público e público com as pessoas com as quais você compartilhou a equipe, faz sentido. Você pode estar pensando, bem, eu vou manter qualquer coisa em rascunhos e depois compartilhá-lo assim e tudo bem. Você pode ir um pouco mais longe, como você pode chegar razoavelmente longe, para que eu possa compartilhá-lo com pessoas que podem ver. Mas não consigo fazer com que eles vejam se quero adicionar outra pessoa para editá-lo, poder copiar e colar coisas dele, fazer as pazes dentro deste arquivo. Tem que estar em um projeto. Lembre-se, você só tem um projeto para uma equipe, para o gratuito, mas sim, em rascunhos você só pode fazer algumas coisas. Posso compartilhá-lo. Lembre-se que fizemos isso antes de compartilharmos com Doug, Doug tinha que ele pode vê-lo e ele poderia comentar sobre isso, o que é legal. Mas haverá um ponto em que você está trabalhando com outro designer como eu, e eu tenho que compartilhar o arquivo com eles. Ele tem que entrar em nosso projeto, que faz parte de uma equipe. Quando as outras limitações gratuitas estão no momento, é que só posso ter três arquivos aqui no meu projeto. Um projeto, três arquivos que posso compartilhá-lo com meus outros amigos de design. Mas, como freelancer, vou ter mais de uma equipe. Essa é a empresa em que estou trabalhando. Você pode ter quantas equipes quiser. Então, digamos que estou trabalhando em outra empresa, móveis. Posso adicionar meus colaboradores a essa equipe. Vou pular isso por enquanto. Eu tenho uma versão paga, mas estou usando a gratuita para este curso. Você pode ter quantas equipes quiser no momento, mas apenas um projeto, um arquivo. Se você é um designer super frugal e pode sobreviver tendo apenas muitas equipes em um projeto, o problema é que você tem que compartilhar várias equipes diferentes com as pessoas. Não sei que chega a um ponto em que, na verdade, dependendo do seu profissionalismo, quanto trabalho você está fazendo nele, que na verdade é muito alto para tentar gerenciar todas essas equipes diferentes. Um projeto, três arquivos. Digamos que você receba quatro arquivos, você tem que criar outra equipe, compartilhar essa equipe com essa mesma pessoa. É aí que pode ficar confuso, mas lembre-se que essas coisas mudam, e também se você é um estudante ou um educador como eu sou, você pode obter uma versão gratuita, ir para figma.com e conferir. Existe uma opção gratuita para educadores e para alunos. Mas se você está se sentindo frugal, há uma coisa que pode empurrá-lo e sua biblioteca, então vou mostrar as bibliotecas no próximo vídeo. Veja, equipes como o nome da empresa, você tem projetos diferentes. Você pode ter arquivos nesses projetos. É isso, te vejo no próximo vídeo. 94. Como você usa as bibliotecas de equipe no Figma: Olá a todos. Neste vídeo, vamos falar sobre bibliotecas de equipe. O que são bibliotecas? As bibliotecas são uma forma de conectar os componentes e todos os estilos que você fez neste documento com todos os documentos futuros e potencialmente outras pessoas da sua equipe. Basicamente, nós os enviamos aqui para uma biblioteca e isso significa que outros documentos que você faz, aqui vamos vamos vamos fazer um rápido. Eu posso dizer, na verdade, “você sabe o quê? Não tenho nada aqui.” Imagine se eu pudesse conectá-lo a esta biblioteca e obter todos os estilos, todas as cores, todos os componentes com você usando você mesmo. Conectando muitos projetos diferentes ou ainda mais útil se você estiver trabalhando com outros designers, poderá compartilhá-lo com eles também. Se eu atualizar o original, arquivos de todos também serão atualizados. Isso é o que é. Deixe-me mostrar-lhe como fazer isso. Vejamos a publicação de uma biblioteca. Uma biblioteca será publicada. Você precisa ter o arquivo aberto do qual deseja publicar, o arquivo de origem. Ele tem componentes feitos nele, nossas variáveis, tem todos os nossos estilos, cores e, quando você estiver pronto, vá para “Ativos” e vá para o pequeno ícone do livro. Ele publicará esse arquivo atual. Vou publicá-lo. Ele vai publicar, como se você mantivesse suas mentes e rascunhos no momento, então ele só publicará os estilos, não o componente. Posso publicar minhas cores, fontes e efeitos. Mas, na verdade, o que eu quero fazer é fechar isso e quero movê-lo para uma equipe profissional. Tenho que pagar uma equipe profissional. Vou dizer, você, meu amigo precisa entrar neste. Não está mais nos meus rascunhos, está nessa equipe e neste projeto de equipe. Agora vou abri-la. Vou ao meu painel de ativos, e se eu entrar aqui agora, tudo vai funcionar. Vou cancelar a publicação porque acabei de fazer isso. Digamos que faremos isso corretamente. Em vez de apenas publicar meus estilos e cores, vou clicar em “Publicar”, e ele publicará tudo, incluindo QC aqui, meus componentes. Então essa é uma das desvantagens da versão gratuita, é que você pode publicar coisas como estilos de stick e estilos de cores, mas você não pode fazer esses componentes, que é uma das grandes vantagens. Vamos clicar em “Publicar”. Dê uma ideia. Então, o arquivo é publicado. O que você pode usar agora é que se você estiver apenas trabalhando sozinho, você pode criar um novo arquivo de design. Não precisa estar em rascunhos ou nos projetos de equipe. Tecla F, vou usar o iPhone 8, e o mais legal é que posso ir ao meu painel de ativos. Não há nada aqui ainda, mas posso ir a esta biblioteca e acessar essas bibliotecas publicadas. Aqui vamos nós, eu posso ligá-lo, vamos fechá-lo agora. O que veremos aqui no meu painel de ativos são esses componentes, para que eu possa continuar. Aqui vamos nós. Você, meu botão doce. Se eu criar algum texto, selecione tudo. Todos os meus estilos também vêm. O contrário, a solução alternativa é começar a copiar e colar os bits que você precisa daquele outro arquivo, que é factível, mas eles são divertidos. A outra grande vantagem é quando você está compartilhando com outra pessoa. Posso compartilhar essa biblioteca com qualquer outra pessoa da minha equipe. Na verdade, eu não precisava compartilhá-lo. Tudo o que preciso fazer é dizer que essa equipe aqui tem membros e eu tenho meus outros membros da equipe aqui e eles terão acesso à biblioteca deles. Eles podem pegar todas as coisas da empresa que fizemos, todos os estilos. Trata-se de consistência. Todos usarão o mesmo estilo de batida, estilos de cores, todos os mesmos componentes. Eu aqui ou meus colegas em outros países. O que acontece é se, digamos que eu, como designer principal, eu decido que realmente quero mudar isso. Vamos mudar, o que vamos mudar? Vamos mudar isso. Ele está sendo usado em cerca de 10 documentos diferentes e eu estou tipo, preciso mudar isso. Então, o que posso fazer é aqui, posso clicar com o botão direito do mouse e dizer ir para o componente principal. Isso traz à tona uma das coisas que são interessantes sobre bibliotecas. A biblioteca em si não é essa coisa autônoma. Na verdade, ele faz referência ao arquivo inicial que criamos. Vai abrir de volta Scott Econ um, o que eu criei originalmente. Então mantenha isso por perto porque isso vai ser como o original. A biblioteca funciona mais como uma ponte entre este e todos os outros documentos. Vou entrar nisso. Só vou destruí-lo. Vamos destruí-lo. Estamos causando isso. O que vai acontecer aqui é vou clicar em “Concluído”. Algumas coisas vão acontecer. Há este pequeno ícone aqui dos ativos, há um pequeno ponto azul lá. Se eu estiver clicando nisso, se eu clicar, ele realmente me diz lá também. Muitas vezes, as primeiras versões apareceram aqui como um pequeno pop-up para dizer: “Ei, você atualizou algo”, mas ei, o seu pode estar lá. Você pode voltar. Não está lá no momento. O que está dizendo é essas mudanças não foram publicadas nessa biblioteca, podem vir trabalhando aqui. O que posso fazer é clicar em minhas bibliotecas. Ativa bibliotecas e diga que você deseja publicar essa alteração em um botão redondo? Você pode dar uma nota. Apenas explique às pessoas: “Ei, esta é a mudança que pedimos.” Eles são muito gentis. Botão Plus agora. Se eu clicar em “Publicar”, ele vai subir. Qualquer outra pessoa usando essa biblioteca é que ela não vai atualizar automaticamente, o que é bom. Ele vai dizer: “Ei, aqui está, um dos componentes foi atualizado, o que você quer que eu faça?” Vou analisá-lo. Vai me dizer, como qualquer nota que eu possa ter dado e vou clicar em “Atualizar”. Veja nosso pequeno botão atualizado, mesmo com qualquer um dos nossos estilos de tick, estilos de cores. Qualquer coisa for atualizada, ela será enviada para todos os seus outros documentos para que você possa ver como talvez sua biblioteca de projeto inicial não seja tão útil, mas assim que você entrar em dois ou três tentando reutilizar logotipos e compartilhe com outros membros da equipe, as bibliotecas são incríveis. A versão gratuita você pode agitar cores e estilos. Quando eles falam sobre estilos, eles falam sobre todos esses. Vamos dar uma olhada. Esses aqui moldam o que os componentes fazem. Portanto, é uma grande vantagem para a versão profissional. Agora, novamente, direi isso um milhão de vezes eles mudaram essas coisas. Ele pode estar incluído, a lista pode estar incluída, portanto, não está definida em pedra. Outra coisa a mencionar é que este é o meu arquivo original. As substituições, este é o novo arquivo que começamos a fazer. Se eu entrar em algo assim, vamos dizer que este texto realmente onde é melhor. Esta caixa de seleção aqui e eu entramos nela e eu mudo a cor por qualquer motivo, ela precisa ser essa outra e não fiz uma visão de mudança de cor. Mas mudei a cor. Lembre-se de que é uma substituição se o arquivo original for atualizado. Vou clicar com o botão direito do mouse. Agora nós nos movemos da biblioteca. Vou encontrá-lo, lá está lá embaixo. Isso traz outro bom ponto. Falarei sobre isso em um segundo. Se eu entrar aqui e há algo mudado, novamente, quebrando as coisas, eu salvo. Vai dizer que essa coisa foi atualizada. Você empurra nossos pássaros, envia atualizações, publica até faz tudo isso. Agora o original dele, digamos que eu vou revisá-lo. Essa é a mudança. Vou atualizá-lo. Mas você pode ver espero que minha substituição seja que a cor não mudou. Botões do mesmo KG alteram o texto e o botão é atualizado. Não vai destruir tudo. É muito bom. Retém todas essas substituições como já usamos. Uma das outras coisas, estou no meu arquivo original novamente, o arquivo criativo, e você pode excluir coisas. Você pode ter um arquivo que tem muitas coisas nele, mas algum lixo e você é como,” na verdade este aqui não precisa estar na biblioteca.” Talvez esses aqui se movam da biblioteca, e então podemos atualizá-lo e dizer remover esses bits da biblioteca, por favor, porque eles não estão mais se acostumando. Outra coisa que você pode fazer é que é um pouco confuso a maneira como eu fiz isso. Eu usei esse documento de trabalho para criar minhas bibliotecas. O que eu poderia fazer em vez disso é mostrar-lhe uma maneira mais agradável de fazer isso. Ainda precisa estar em seus projetos de equipe, então vou duplicar este. Essa pessoa aqui, essa é uma nova, é uma nova “Copiar”. Vou dizer “Renomear”. Isso será SCOTT, estilos mestre e componentes. Então, vou usar isso para construir um nome e dentro deste. Isso vai ficar por aí, mas este aqui vai ser meu mestre principal, eu vou dizer, preciso do fluxo breve e arremesso? Não para este em particular. Tenho uma cópia dele, lembre-se. Vou manter o guia de estilo, vou manter os componentes, mas não preciso dessas páginas. Essa coisa só vai ter essas duas páginas e vai ser legal e bonita e eu não vou destruí-la e vou colocá-lo bem, e vou publicar esta. Ativos, biblioteca, por isso é um arquivo diferente. Este aqui, eu posso desligar este, desligar. Vou comandar isso em um segundo, mas você pode ver que isso é apenas um melhor para compartilhar com as pessoas. Porque faz mais sentido, você sabe o que é e-comm V1? Mas este, pode ser o nosso universal. Posso compartilhá-lo com outros designers. Eles podem adicionar a ele e mexer com ele, alterá-lo e atualizá-lo. Para eliminar a outra biblioteca, precisamos abrir esse arquivo ou é Ecom1, e você pode entrar em ativos, biblioteca. Eu fiz algumas mudanças, mas o que eu realmente quero fazer é entrar nisso e dizer: “Anular a publicação deste.” Eles são removidos das bibliotecas e quebram o link para todos os outros e veem o que aconteceu com esse arquivo que criamos. Este aqui. Isso foi baseado nessa biblioteca. O que você notará agora é este é o que arrastamos todas as coisas da biblioteca de sombras. Ele não os exclui. Ele só vai, seus arquivos locais agora eles não estão mais conectados como estavam. E você pode ver lá todos os meus estilos desapareceram do lado ali. Eu desconectei a biblioteca deles. Posso escolher outro. Vamos ter todas as mesmas coisas nele. Vamos ligar esse. De volta aos negócios. Uma coisa que eu poderia fazer é, bem, é eu ir ler as páginas que preciso. Vamos fazer isso a partir deste. Para usar esses estilos, uma coisa que acabei de lembrar que não abordei é que posso ir ao meu Ecom V1. Vamos para minha página de rosto, isso pode ir para a página inicial. Tenho algumas grades. Você também pode transformá-los em estilos. Posso adicionar isso e dizer que esta é minha bola, só para que sejamos consistentes em documentos diferentes, mesmo e outras pessoas com quem você pode estar trabalhando. Este é o meu 6 coronel. pode colocá-lo em que tipo de acariciamento você está usando também para que todos saibam, que pode fazer parte da biblioteca. Ou seja, bibliotecas de equipe na Figma, você precisa ter seu arquivo fora de rascunhos e em seus projetos de equipe para compartilhar seus estilos. Se você tem uma conta paga, seus componentes também, e que as bibliotecas são mais parecidas com uma ponte entre esse arquivo de origem e outros arquivos entre você e seus documentos e outros membros da equipe. Há as bibliotecas. Para o próximo vídeo. 95. A diferença entre animação e micro interações: Olá a todos. Neste vídeo, discutiremos rapidamente a diferença entre animação e microinterações. É um túmulo que é novo para algumas pessoas se você é novo no design UX, para outros, você vai saber exatamente do que estou falando. Mas se você não fizer isso, é apenas uma coisa sutil, e o processo de criação é o mesmo aqui na Figma, vou fazer nos próximos vídeos. Mas eu sei, é um termo que precisamos ser claros pelo menos um pouco. A animação é bem fácil. Animação é o que você imaginaria ser. Indique para encantar usos, ajudar, contar ou comunicar um pouco mais. Às vezes, é apenas uma marca pura. São apenas animações, e elas podem acontecer em sites e você pode fazer isso na Figma e eu vou te mostrar como. A outra é micro-interações. Esta é provavelmente uma boa representação de microinterações, apenas coisas simples que mostram isso. Assista quando isso for clicado. Parece alguma coisa. É o feedback do usuário ou pelo menos o feedback do sistema que algo aconteceu. Pode ser para ajudar a transmitir como se algo estivesse sendo processado assim, ou pode ser que algo esteja esperando. Você pode ver aquele pequeno micro indireto aqui. Você fica um pouco, “Uau, olhe isso.” Eles não precisam ser animados, mas geralmente são. Foi outro bom. Aquele pequeno ícone de bloqueio um. Essa é uma boa prática para saber se o seu sistema, o que você fez está bloqueado ou não bloqueado. Seja funcionando ou se o microfone está funcionando. Muitas vezes, talvez seja para evitar que você faça algo errado, lembre-se anteriormente que fizemos isso. Seria uma micro-interações de ossos muito grandes, as coisas começam a ficar vermelhas ou saber que você fez errado ou não tem o suficiente no segundo ano, não escolheu coisas suficientes para uma senha. Eles ficam um pouco embaçados às vezes pessoas como eu fiz uma micro indireta e você parece que poderia ser apenas uma animação porque não é realmente. Como este aqui está sendo marcado como um micro indireto, mas talvez seja apenas uma animação, eu acho, porque é muito legal, tornou-se parte do cérebro, isso é apoiado em encantar as pessoas com coisas divertidas. Ele cruza a linha. Olhe deste. Isso é uma micro interação? Acho que é bom, mas é chato. Não animação completa. Vamos dar uma olhada em alguns outros interessantes. Pague a coisa tocada completa. Veja esses aqui, esse CO e a diversão e definitivamente sejam rotulados como micro-interações porque sim, está ajudando. Muitas vezes, uma micro indireta é uma interação da interface do usuário, como eu fiz algo no site e no sistema, seu site, seu aplicativo está me dizendo, me dê uma resposta sem ter que abrir uma janela dizendo, sim, você tem ativou esse recurso. É como um pouco fácil. Construiremos um casal, ambos são construídos da mesma forma, com animação. Faremos alguns exemplos diferentes. Vamos pular. 96. Animação com easing personalizado no Figma: Olá a todos. Neste vídeo, vamos fazer essa animação. Nós clicamos no botão e ele se transforma em uma caixa e, em seguida, a caixa se apaga. Animação divertida. Agora, quando digo divertido, uso esse termo vagamente. Ele abordará alguns dos princípios de animação que aprendemos no início do curso e construímos sobre eles. Muitos deles que já usamos antes, vamos usá-los em um trabalho maior, e eu vou jogar algumas coisas novas, como flexibilização, vou lançar algumas personalizações pelo menos, e vou jogar nas coisas que eu saiba que meus alunos erram e ficam presos quando estamos construindo algo. Se isso não parecer muito excitante, você pode ignorá-lo, é um curso em vídeo. Mas se você quiser construí-lo comigo, vamos fazê-lo. Vamos pular. Vou avisá-lo, é um longo. Tudo bem, para começar. Bem, vamos ver onde começamos neste curso. Lembra de volta aqui quando fizemos essa animação? Ainda estamos nesse nível. Vamos um pouco mais longe e tornaremos um pouco mais emocionante começar por aí. Mas sim, foi aí que começamos. Vamos atualizar esta página. O que eu fiz é que vou trabalhar no meu Hi-Fi móvel. Voltei a este projeto original do Scott Ecom. Se você vier apenas para a flexibilização e animação, eu vou fazer algum desenho aqui primeiro, você pode querer pular. Vamos pegar o editor. Você poderia colocar um código de tempo na parte inferior agora apenas de uma maneira de saltar se quiser pular toda essa parte do desenho porque você sabe desenhar agora, você é uma gaveta incrível. Pule para lá. Caso contrário, espere comigo. O que eu preciso é de duas coisas. Preciso de uma caixa. Vou usar minha ferramenta retângulo neste caso, porque na maioria das vezes vamos fazer quadros para isso. Vou fazer coisas bem simples. Vou usar as cores da minha marca e desenhar alguns fones de ouvido. Prepare-se para fones de ouvido não incríveis. Outro retângulo. Lembre-se, não consigo ver meus pontos se for muito pequeno, não consigo vê-los. Você vai ampliar um pouco, lá estão eles. Quem se lembra de onde posso segurar apenas para fazer um? Mantenha pressionada a tecla Option ou a tecla de espera. Quero ambos os lados, 6, 6. Por que todos eles estão vindo? Selecione os primeiros, não. Estou segurando a chave errada? Eu sou. Não é uma opção, é um comando. Você sabia disso. Eu tenho esta chave aqui muff mod. Vou fazer um pouco disso. Vou copiar e colar. Ele volta por cima de si mesmo, muito bem. Mas eu quero agora ir para meus refletores de câmera. Flip horizontal, é Opção H? Não, isso é central horizontalmente. Não me lembro. Lembre-se, barra de comando ou controle de barra direta é a resposta para todas as nossas opções. Vamos lá, é flip? É. Shift H, lá vai você. Vamos fazer isso alinhado dessa maneira. Desenhe-os sobre o dedo do pé circular, começou por lá. Se você pressionar Option ou Alt em um PC, você pode fazer o material do centro. Estou segurando Shift também para conseguir algo assim. Quem se lembra de como virar o preenchimento e o traço? Shift X. Vou usar minha seta para cima para subir um pouco com meus fones de ouvido. Estamos chegando lá. Vou escolher minha mesma cor. O que vou fazer é este com meio retângulo. Nós só vamos cortá-lo aqui em baixo, ele desaparece nisso. Como faço isso? Selecione você, selecione você, desde que este esteja na parte superior, clique em não união, subtraia. Tenho um fone de ouvido 1. Escolha minhas teclas de seta para entrar duas vezes e temos alguns fones de ouvido de aparência média. Agora, você não precisa agrupá-los, mas é realmente útil fazê-lo, porque nem sempre dá errado, mas às vezes essas coisas acabam fazendo suas próprias coisas. Vamos enfiá-los todos juntos. Devemos colocá-los em um quadro ou grupo? Vamos colocá-los em um quadro porque tudo pode ser um quadro. Vamos dar um nome, fones de ouvido. Lembre-se de nossas animações iniciais, você precisa manter os nomes consistentes em ambos os painéis. Essa é minha caixa. Uau, isso foi emocionante. Temos alguns fones de ouvido. Eles vão cair na caixa que é pequena. Certo para aumentar a escala. Ele pode caber dentro? Perfeito. Vamos duplicar isso. Vou segurar minha tecla Option em um Mac, tecla O em um PC. É assim que vamos animar em dois quadros. O que fazemos? Este vai estar aqui em baixo. Ordem da camada, realmente não importa, eles não precisam corresponder, os nomes têm que corresponder, mas neste, na verdade, ele precisa estar embaixo da caixa. De alguma forma, eu realmente verificaria se isso é realmente uma linha, talvez precise começar à direita, mas vamos dar uma chance. Como animamos isso? Vamos ao nosso protótipo 2, depois chegamos ao protótipo. É todo o caminho até o topo aqui. Aqui está você. Role para cima. Nosso protótipo, você meu amigo vai para esta caixa. Vamos fazer a mesma coisa que fizemos antes. Vamos atrasar. Após o atraso, quanto custa um segundo? Isso mesmo, 1000 desses milissegundos, e então ele vai navegar para isso. Agora, a animação, basicamente sempre usa animate inteligente, é mágica. É inteligente anima isso. Fliasing, veremos em um segundo. Vamos entrar e sair facilmente, por que não? Vamos dar uma prévia. Tenho que me certificar de que este está selecionado. Esses fluxos agora, você pode clicar duas vezes nele aqui para alterá-lo em vez de fazê-lo aqui, há o fluxo 2. Vamos chamar isso de nossa animação de fones de ouvido. Nome ruim. De qualquer forma, simplesmente. Prepare-se para a glória, todos. Funcionou. Vou voltar usando minha seta para trás. Parece ótimo. Depois de um atraso, eles caem na animação, a flexibilização está boa. O que vamos fazer é olhar para personalizar. O que vamos fazer é que a flexibilização é feita entre os dois quadros aqui. Uma pequena dica é que você pode usar sua seta para cima para subir em dezenas, segure Shift para subir em centenas. Você só vai notar centenas. Digamos que vamos para dois segundos. Vamos dar uma prévia aqui. Não precisamos recarregá-lo porque ele tinha nossa chave. Devemos reiniciá-lo. Muito lento. Você pode fazer matemática em muitas coisas. Isso é como o bônus para este vídeo. Você ficou comigo com os fones de ouvido chatos, você terá o atalho super incrível. Posso dividir isso por 2. Você pode fazer isso em muitas coisas diferentes. Digamos que eu preciso projetar, e preciso que a largura seja metade disso, vou dividir por 2. Porque isso estava ligado, ambos vêm junto. Isso é matemática que você pode fazer em qualquer um deles. De qualquer forma, se você precisar de x para ser, e vamos seguir o dobro do caminho, ele precisa ir duas vezes assim, isso dobrará o que é. Você pode adicionar tempos, que é na verdade a chave asterisco, normalmente esmagada junto com sua chave 8. Então eu preciso segurar o Shift 8 no meu teclado, mas você encontrará isso no seu. Faça isso vezes 2 e ele se moverá para nós. Há muitos. Você pode fazer menos, dividir por, vezes, mais. Você precisa adicionar um pouco de preenchimento para o exterior. Você pode mais 20 preenchimento para qualquer um desses campos. Segue caminho, onde chegamos? Este protótipo terá atraso, facilidade de entrada e saída. Mas, na verdade, eu quero mudar para personalizado. Você pode ou não ter visto nada assim. Basicamente, a flexibilização para dentro e para fora, posso trocá-lo? Fliasing, isso é a entrada, é a saída. A flexibilização é esta linda curva aqui. Basicamente, esta é a hora, e basicamente isso é o quão rápido ele está indo. Com o tempo, isso está indo muito devagar. A velocidade está aumentando. Imagine que isso seja milhas por hora ou quilômetros por hora, dependendo de onde você é, 0-100. Entre aqui e aqui, logo no início desta parte, na verdade está indo muito devagar. Muito tempo passou, mas a velocidade passou de 0, não foi muito longe, só passou para 10 milhas por hora. Mas no meio aqui, está girando. Ele foi muito rápido, está muito alto. Está se movendo rápido no meio e, em seguida, ficando muito lento no final, milhas por hora. Leva idades para chegar a 80-100 milhas por hora, um velho bateu palmas de carro. Essa é a flexibilização. Se eu voltar à calma, na verdade, vamos fazer, é tão costume apenas para facilitar e depois voltar ao costume. Ele mostrará, devagar, devagar, rápido, rápido, rápido, rápido. Isso está diminuindo. Se você tiver que personalizar, você pode simplesmente clicar neles. Clique e arraste para fora deles. Isso é o que você tem que fazer. Você pode clicar e arrastá-los, e você pode facilitar e continuar. Agora olhe para esse, isso vai ser muito extremo. Vai processar é como whoa, e depois no final aqui mais de um segundo. Vamos dar uma pré-visualização e depois atualizar. Aqui está você. Isso é melhor? Não é, mas aprendemos o que é personalizar. Você também pode fazer o contrário. Poucas pessoas farão isso. Não, eu levo de volta. Eu não uso isso com muita frequência. Está indo rápido, está indo devagar no meio e isso. Você pode ter uma animação perfeita para ela. Vamos dar uma olhada. Rápido, lento, rápido, final. A curva S é a curva agradável. Algo assim sempre parece bom. Fechando o Photoshop, aliviando qualquer uma das animações que é bonita. Você pode provar isso aqui? Não muito bem. Essa será a personalização. Vejamos um pouco desses princípios. Viemos para a flexibilização, personalização, mas vamos ver algumas outras coisas que podem te pegar. Quero colocar uma tampa como você viu no início. A regra é que tem que estar em ambos os quadros se eu quiser que esteja em ambos. Se eu editar aqui, minha ferramenta de retângulo. Vou clicar nesta coisa da tampa, projetá-la incrivelmente. Aqui vamos nós, e eu chamo de tampa. Eu honestamente provavelmente acabarei com retângulo 50 ou 150, mas você está assistindo, então vai ser tampa hoje. Vamos rapidamente para Design. Escolha uma cor. Quero que isso anime. Na verdade, eu quero que ele esteja aqui. É aí que vai terminar diretamente na animação. Quero que ele seja fechado. Você precisa copiá-lo manualmente e colá-lo porque não está neste primeiro. Vai empurrar isso magicamente para repetir. Ele tenta o melhor que acontece. Não estou aqui, vou desaparecer e esperar o melhor. O que eu preciso fazer é aqui, fazer dessa maneira, e eu vou fazer alguma coisa de spin. Não há muito controle porque não é uma ferramenta de animação de linha do tempo. É muito primitivo e provavelmente o maior problema é que tudo acontece ao mesmo tempo. Essa personalização que acabamos de fazer é a mesma para a caixa, mas para uma animação simples, especialmente prototipagem, é perfeita. Se você quiser obter hardcore em animação, algo como After Fix tem um formato de arquivo chamado Latte. Isso é algo para ir e pesquisar, que faz algumas coisas incríveis de SVG animadas. Talvez eu faça um curso nesse dia ou no Adobe Animate. Existem outros programas. Acabei sendo um pouco para a Adobe. Ferramentas de animação SVG ou Latte do Google, mas estamos trabalhando na Figma, então trabalharemos com o que temos. Agora vou desenhar um carrapato rápido. Clique uma vez, clique novamente. Que meu amigo é o carrapato incrível. Arrastando para a esquerda e a direita. Vou clicar nisso e dizer que seu ponto final será redondo. Esse endpoint também será redondo. Naquele canto, vamos brincar com a esquadria, rodada. Você pode selecioná-los todos de uma só vez, fazer todos de uma só vez. De qualquer forma, este vai ser meu carrapato. Vou voltar para minha ferramenta de movimentação. Estou preso neste modo de edição de objetos. Eu fico preso aqui o tempo todo. Clique em “Concluído” e agora é uma coisa única chamada vector. Vou chamá-lo de carrapato. Ferramenta de escala. Vou escalá-lo para baixo porque quero que o traço também seja dimensionado. É um pouco grande. Quero que isso apareça aqui. Onde está isso? Você sabe onde ele está? Está lá. Está apenas escondido dentro dos fones de ouvido lá. Na verdade, arrastei por acidente dentro deste quadro. Eu só vim acima da caixa. Aqui vamos nós. Lembre-se que tem que estar nesta cópia e ela tem que estar nesta, e ela tem que ter o mesmo nome, tick, tick. O que eu quero fazer é se você quiser fora da tela, digamos que eu quero que essa coisa deslize aqui, o que tende a acontecer é que isso não vai funcionar. Você se lembra do porquê. Basta repetir. Apenas se desvanece. Porque na verdade não o vê aqui porque está fora do quadro. Podemos tê-lo fora do quadro, visivelmente aqui, mas ele tem que ser incluído em todo esse quadro V2 de confirmação que eu tenho: V2 A, B. Ele precisa estar em A. Mesmo que esteja pendurado aqui, você pode vê-lo? Não está dentro de nenhum desses. Eu posso colocá-lo lá dentro. Eu não consigo vê-lo lá, então você pode decidir se você tem essa coisa cortada ou não. Ele aumentará o zoom. Vamos dar uma chance. Fecho minha pré-visualização, e acho que porque não a selecionei, não tinha nada selecionado, então ela voltou para o meu Flow 1, mas veja, eu consegui meu fluxo incrível. Para repetir, atualizar, refazer, reiniciar, lá vamos nós. O que eu vou fazer também é provavelmente fazê-lo desaparecer. Aqui embaixo, vou dizer, você meu laboratório amigo. Na verdade, posso usar meu doce atalho. Quem se lembra? Selecione-o. Como faço para chegar a zero? Bem 50, basta digitar cinco ou zero. Não, zero é 100. Você pode reduzi-lo para 10%. O que é zero? Como eu não sei disso? Aqui está você. Você não precisa fazer isso também. Você pode simplesmente virar os olhos em toda a camada. Ele fará a mesma coisa. Vamos dar uma prévia. Atualize, ele deve aumentar e diminuir o zoom. Da última vez que terminamos em dois quadros. Vamos um pouco mais longe neste. Nós vamos até você duplicar porque eu quero que todas essas coisas com toda a ótima nomeação apareçam. O que vou fazer? Vou tentar fazer com que ele corra. Eu vou, quero que ele vá como o zip desse jeito. Eu quero que ele suba um pouco, então parece que está voando. Aqui vamos nós. Ele precisa ter certeza de que está dentro desse quadro, mesmo que eu não consiga vê-lo. Aqui vamos nós. Você vai vir com ele. Devemos pegar os dois? Sim. Shift clique em ambos, ele virá. Vai estar um pouco no ar também, e certifique-se de que está embaixo da minha tampa. Você pode vir junto com o passeio e apenas garantir que ele, onde ele está? Os fones de ouvido estão em confirmação, mas por baixo. Deixe-me usar meus colchetes para enviá-los direto para trás. Lá vamos nós. Encontre tudo. Quão bom isso vai ser? Provavelmente terrível. O momento não vai ser bom. É um design de manguito fora do manguito. Eu deveria passar mais tempo neste, mas aqui vamos nós. Você está pronto? Não vai funcionar. Sabemos por quê? Você sabe o porquê. Não há conexão entre a página. Onde você está? Aí está você. Protótipo. Preciso de uma conexão, então farei outro atraso após 0,3 segundos. Vamos animar inteligente. Vamos usar nossa facilidade personalizada. Na verdade, não sou. Quero que seja assim. Está ficando cada vez mais rápido. Começa devagar, começa devagar, começa lento, rápido, rápido, rápido, rápido, rápido, rápido. É bom ir. Atualizar. Está funcionando. Preciso brincar com o tempo. Está levando uma eternidade para chegar lá e ainda está com este. Como faço para controlar o tempo disso? É quanto tempo leva entre este e este. Aqui minha personalização, e então você muda para descer. Sim, isso serve. Você tem que subir e descer algumas vezes. Atualizar. Gênio da animação ali mesmo, olhe para mim. Minha caixa está chegando. Está escondido muito rápido para vir à minha porta. Provavelmente tenho um casal, ou talvez não tão abrupto. É quase isso. Vou te mostrar o que acontece agora quando você estiver tipo, eu sei, vou adicionar essa outra coisa no início. Você viu no início que o botão Comprar atualizado. Vai ser, eu quero realmente dobrar de volta. Como faço duas vezes e edito outro quadro? Não é tão difícil. Vou usar este novamente. Só para que eu tenha as convenções de nomenclatura, não preciso de metade dessas coisas. O que você faz quando você tem A? Você também pode, o último V2 final. Eu arruinei a nomeação. Está cheio nisso. Tenho dois fluxos iniciados, não é o que eu quero. Se você quiser se livrar do fluxo, não clique na coisa toda. Eu tenho dois desses. Eu dupliquei. Eu o menos, aqui vamos nós. Você vai lá. Você pode ver que eu posso realmente ter dois deles? O que é uma coisa estranha que eu não gosto na Figma. Você pode realmente ter dois desses, então exclua um adicione um. Você vai lá, você vai lá, e este vai ser diferente. Na verdade, não vou ter isso. Eu vou ter você quando você for clicado em ir lá. Vou fingir isso até um botão, então vou dizer que agora você é um botão. Não estou usando nossos componentes e toda essa adorável e variância. Só estou fingindo aqui, e vou dizer Design, quatro. Vou adicionar a compra lá, e me certificar de que estou usando meus estilos. Você tem que selecionar todos eles para garantir que os estilos sejam aplicados. Vou torná-lo ousado de qualquer maneira. É sobre o palco que provavelmente criarei outro estilo de texto. Este pode ser meu texto do botão 1. É basicamente o mesmo que o parágrafo, exceto que é ousado em vez de ter que mudar, e eu vou escrevê-lo. Isso vai ser isso. Esse cara aqui, protótipo. Quando ele é clicado, ele vai entrar na torneira, ir para este lugar neste é o meu animado, e eu provavelmente vou abandonar minha personalização e sair e voltar. Sim, isso pode ir. Vamos fazer um teste de qualquer maneira. Essas coisas aqui, lembre-se de que podemos excluí-lo desde que você queira que ele desapareça aqui. Vimos que, se você excluir coisas através do clique vou desaparecer porque não sei mais o que fazer. Sim, vamos jogar este. Clique sobre isso. Se você não quer que isso aconteça, eu vou desfazer. Você tem que fazer algo com ele, então talvez eles caiam do céu. Certifique-se de que os fones de ouvido ainda estejam no meu V final, e essa coisa aqui, você não consegue fazer com que ele siga um caminho se você estiver perguntando, posso fazê-lo seguir um caminho? Não, ele vai animar automaticamente que você tem que se acostumar com um pouco de animação automática, como o que é provável que faça. Eles estão todos lá? Ligue e desligue como uma boa maneira que eu vou, eles estão todos lá dentro? Isso vai funcionar? Atualize, compre. Está tudo bem. Você pode dizer isso. Atualize, compre. Isso é legal, a pequena coisa boxy. Isso vai ser isso. Para minha pequena animação aqui, eu vou dizer que você depois de algum tempo loopback aqui. Em atraso após zero segundos, volte para lá. É meu animado? Não. Só vou me dissolver. Vamos fazer um teste a isso. Botão, volte, volte para trás. Bem, há necessidade que você se esconda, coisas para lembrar, as coisas tinham que ser nomeadas da mesma forma em ambos. Se eu agora e vou chamar essa coisa, você pode mudá-los um pouco. Lembre-se se eu chamar esse botão porque estou sendo bom, ele não vai animar para este. Atualizar, clique em. Acabou de desaparecer. A outra coisa com a qual me deparo com problemas, vou desfazer, é que vou até aqui e vou começar a agrupar coisas. Estou no Design View, vou começar a agrupá-lo, e isso não é bom porque agora há um grupo em vez de todas essas coisas e está escondido, e o que isso faz com isso? Apenas desapareça no final porque não sabia como ir para cá. Tenha cuidado para não agrupar coisas ou enquadrar coisas. Depois de começar, mantenha a mesma consistência, continue testando para ver se algo quebra e, sim, você acaba com muitos amigos. É o que é aqui embaixo. Eu não o manteria junto com esse fluxo de trabalho porque você acaba com muitos desses. Outra coisa que você pode fazer, talvez não tenhamos arrumado. Eu selecionei todos esses que quero obter o espaçamento da mesma forma. Você pode ver, eles estão todos fora. Se eu selecionar todos eles, arrumado funciona em tudo, não apenas objetos em quadros, mas nos quadros fora dos próprios quadros. Se você acha que isso é complexo, deixe-me ir encontrar um para você. Você espera lá. Relutante em mostrar animações de outras pessoas porque elas são muito melhores, olhe para isso, quão legal é isso? Acho que queria tentar encontrar um na cabeça, é isso. Basicamente, cada coisa está em seu próprio quadro, e eles acabaram de brincar trabalhando com o que pode animar automaticamente e algumas personalizações para gostar dizer que esta caixa fechar. Obviamente que cair é muito fácil, mas depois o fechamento da caixa, não poderia ir direto de lá para lá porque Figma perdeu a animação, então eles tiveram que fazer um pouco intermediário, pouco no meio, um pouco mais, um pouco mais, um pouco fechado, pouco mais fechado, um pouco de fita lá. É incrível o que eles fizeram. Parece assim quando está terminado. Esse não é o único, aquele. Este é o meu favorito. Veja como este está feliz. Eu tive que entrar e dar uma olhada em como foi feito, e é isso que você vai fazer. Acabei de entrar na Comunidade, digitei animação e depois cliquei em muitos deles. Muitos deles são horríveis, e alguns deles são ótimos. Porque você tem habilidades doces na Figma. Você pode passar por eles e escolhê-los agora, isso é tão bom porque a ilustração é tão maravilhosa. Posso fazer a mesma coisa, mas meu pau não seria tão bom. Mas olhando para ele, podemos ver, há do quadro 1 é apenas muitos atrasos de tempo, vai para o quadro 2, tempo, atraso de tempo. Na verdade, desenhei essas peças separadas, e essa é a parte principal que sinto é essa ilustração adorável. Mas o salto real entre os dois é, vamos dar uma olhada. Tem tudo a ver com a flexibilização. Você pode ver isso feito animate inteligente como fizemos, mas depois eles fizeram algumas coisas boas com a flexibilização como em, quando eu digo legal, eles passaram e você pode clicar nele e acima. Não precisa estar aqui, eu mantive o meu na caixa. Você pode estar fora da caixa. Podemos arruinar a animação dessa pessoa. Vamos dar uma olhada. Vamos voltar, atualizar o que notamos? Sim, vamos ver esse zip no início para onde ele vai. Sim, isso é arte não ciência. Eu me sinto como esta bela ilustração, uma ótima flexibilização acontecendo, e muitos e muitos quadros de mudança 1. Eu vi muito mais também. Eu vi como 30 e 40 deles também. Que vídeo sinuoso, mas aprendemos a personalizar mais cedo. Construímos um projeto um pouco maior, e acho que esse era o meu objetivo aqui, é mostrar a vocês que uma animação mais completa e passamos de uma pequena seta preta que se moveu para, eu não sei. Deixe-me voltar para o meu, na linha. Vejo você no próximo vídeo. 97. Projeto do curso 18 - Minha segunda animação: Olá a todos. É hora do projeto de classe. Vamos criar sua segunda animação, ok. Agora você pode estar realmente animado com esse projeto de classe ou pode estar ridicularizando, ok. Mas isso é tudo sobre aprendizado, ok. Isso pode ser seu muito doente e animação de toda a sua vida. Tudo bem. Eu lhe dou permissão para ser uma edição terrível. Basta dar uma chance e ter um mínimo de três quadros e criar sua própria página de confirmação e ir para a coisa da caixa. Você pode fazer a coisa da caixa. Mas pense nisso como se o seu produto fosse como a bicicleta, talvez as motos voltem 10 e ele derrapasse ou se houver uma câmera talvez tire uma fotografia. Não precisa entrar em uma caixa. Certo. Dê uma olhada no que você tem. Cerveja artesanal pode estar borbulhando no topo, algo divertido. Desenhe sua própria versão de ícone. Eu desenhei aqueles fones de ouvido, você faz o que estiver fazendo, e experimento com a flexibilização como a outra coisa. Brinque com a flexibilização e o que você tem que entregar? Faça uma captura de tela de todas as suas telas, ok. Só de tudo isso, ok. Se você sabe como gravar sua tela, eu uso o QuickTime em um Mac, ok, em um PC, tenho certeza que há uma versão, mas seria incrível se você soubesse como gravar sua tela para fazer upload de um vídeo, faça o upload diretamente aqui ou coloque-o no Vimeo ou YouTube ou algo assim e compartilhe isso, e eu adoraria vê-lo no grupo. Mesmo se você se considerar como se eu fosse uma gaveta terrível, faça de qualquer maneira. Nosso grupo é um grupo incrivelmente acolhedor. Explicado, eu não estou animado esse meu rosto, o que vocês acham? Se você quiser criticar, pergunte para qual crítica. As pessoas são gentis, eu adoraria ver o que você faz, e é um mínimo de três quadros. Se você fizer uma grande animação longa, vá em frente. Caso contrário, basta fazer algo simples, e verei você no próximo vídeo. 98. 98: Olá a todos. Está vendo esse grande ninho de pássaro? Isso se transforma nessa mágica. Você está pronto, os desvanecimentos em Doug aparecem um pouco mais tarde Ok, então é isso que construímos, vamos fazer. Em vez de apenas fazer animação como estamos fazendo, é a mesma coisa, mas estamos meio que criando uma página, como uma transição de página. OK. Infelizmente, nenhuma página descasca Mas existe. Sim, podemos fazer algo quase tão bom. Tudo bem, vamos dar uma olhada nela, ok, para não destruirmos nossa página inicial ok, para não destruirmos nossa Vou movê-lo para cá e é aqui que nossa página gigante e bagunçada começa Bem, continua. Ok, então obteremos nossa página inicial. Vamos chamar essa coisa de algo diferente. Então, vamos chamar isso agora de animação. A forma como isso funciona é basicamente que precisamos de uma página reservada Teremos que juntar alguns deles para obter essa animação. A primeira coisa que vamos fazer é na verdade, não entre essas duas páginas. Entre aquele e esse. Venha comigo, copie aqui, cole. Agora vou deixar o meu um pouco mais distante no momento, só porque vou te mostrar um pouco de vinho. Eu quero essa página. Vou mudar para o protótipo. Agora, acabei de clicar nos botões aqui. Ok, sim, se você começar a usar um pouco de atalho, tipo ei, o que é? Ok, lembre-se de que o atalho é o comando ou controle para barra e você pode começar a digitá-lo como um painel de protótipo Está bem? E você viu isso lá. Veja o pequeno atalho, Ok, era a opção nove ou a antiga nove em um PC Se você olhar para o teclado, mantenha pressionada a tecla de opção em uma tecla Mac em um PC e toque em 890890 Eles estão todos próximos um do outro. Na parte superior do teclado, você vê o protótipo de design inspecionar Além disso, não se esqueça de que tem esse garotinho aqui embaixo, K abaixo dos atalhos do teclado E isso está realmente muito bem organizado e agrupado, e eles destacaram os melhores, e este está em exibição, ou são esses três Por que esses não são azuis? Acho que é só para mostrar a importância das mais úteis. Portanto, fique de olho nas azuis, provavelmente aquelas que você vai querer. Então eu vou, na verdade, o que eu poderia fazer é quebrar alguns desses, só porque está um pouco confuso Vamos voltar ao topo. Não é o que eu quero agora, ok? Então, o que eu quero fazer é dizer que, ao clicar um pouco mais, quero que você acesse o tipo de página de detalhes do produto. Ao tocar, vou usar uma animação de like push. Isso é o que eu usei neste. Não importa a flexibilização. Vamos dar uma prévia. Vamos renomear esse fluxo aqui em vez de E-Commerce Flow. Esse será meu fluxo de animação. Vamos jogar a partir daqui. Tudo bem. Não mais ele. Ok, é com isso que vou começar. E eu quero que isso cresça como você viu antes. Então, o que vamos fazer é ter duas páginas, ok? Separe-os. Novamente, basicamente não haverá nada nesta página. Essa é a principal conclusão deste curso ou deste vídeo: quando você está fazendo transições, provavelmente quer começar com uma tela vazia Lembre-se de que não podemos ter uma tela vazia. Precisamos ter as coisas fora da tela ou totalmente transparentes. O que eu gostaria de fazer é que talvez esse primeiro bloco caia. Esses caras vão se afastar. Teremos que tornar isso ainda maior. Lembre-se de que, se eles forem selecionados, você pode arrumá-los e, em seguida , preencher a lacuna entre eles, se tiver muitos deles. Ok, então eu tenho algum espaço, não os duplicando, estou apenas segurando a tecla Shift Então eles deslizam dessa maneira você, não tenho certeza de onde tirei essa coisa. Era meu rodapé agora, neste caso, quero agrupá-los agora Está bem? porque eu não os agrupei antes. Eles realmente deveriam ser componentes, mas nós os fizemos no início da aula. Agora, eu não vou, vou deixar todos eles como pedaços meio feios Por quê? Porque há pedaços de pedaços por aqui. Eles são do quadro nove? Na verdade, não são. Eles estão totalmente bem. Esqueça de mim. OK. Então você pode ir até lá, você pode ir até lá. Apenas tenha cuidado quando estiver segurando uma coisa. Eles não precisam ir até lá, não é? Ninguém pode realmente vê-los na primeira tela, mas, ei, vamos ser oficiais. O mesmo com vocês. Eu vou fazer com que vocês comecem de novo aqui, eu vou fazer com que vocês comecem de novo aqui e eu vou fazer com que vocês provavelmente desapareçam Então, vou começar desaparecendo. Vou atingir zero na capacidade do meu teclado definida como zero, 100% Talvez exista. Deixe-me saber nos comentários, se houver um conjunto para zero, eu sei que há um conjunto para 100%, como não sabemos disso? Talvez não haja um. Está bem? E você também pode desaparecer Então, zero eu estou projetando aqui. Estou dizendo que quero que essas coisas apareçam por esses lados. Ok, eu quero que isso desapareça. E o que vou fazer é aqui, na verdade, vamos pré-visualizar isso só para ter certeza de que tudo está funcionando. Então, vamos clicar no botão. Vai ficar aqui, e então nada vai acontecer. Certo. Só vai ficar parado para ser reiniciado Vamos mais um pouco. Ok, e ele simplesmente fica lá. Então, o que eu preciso fazer é um pouco de tempo. Então você vai para o modo de protótipo. Vamos usar nosso lindo novo atalho. Vamos lembrar nossa opção em um Mac. Em um PC e digite nove protótipos. Este vai para nós. Você pode arrastar isso para fora ou dizer em Ed em uma direção que diz não tocar. Eu quero dizer isso sem demora. Para onde eu quero ir? Eu queria ir para. Agora chegamos a qual página? Como eu chamo esse. Preciso dar alguns nomes aos detalhes do produto de animação Detalhes do produto de animação você adia para detalhes do produto de animação. Muito obrigado Ok , também vai ser instantâneo. Vamos para o smart animate. Ok, vamos dar uma prévia. Agora vamos reiniciar. Depois de um tempo, vai desaparecer. Não é o que eu quero, quero que apareça. Quer agora, por que eles não estão lá? Você pode estar gritando para a tela, indo. Ele não colocou todos eles na moldura original. OK. É uma das coisas que você está arrastando para fora, eu gostaria que existisse, elas não o fizeram Photoshop. E uma em que você possa dizer que não sai dessa moldura. Há uma opção aqui que diz para não, você sabe, sair da moldura principal quando eu arrasto você, mesmo que eu diga, mesmo que eu tenha meio que arrastado você para fora, espero que ela apareça O futuro pode estar aí agora. Pegue um cheque. O futuro está aqui. Na verdade. O futuro estava realmente disponível naquele momento, mas eu não conhecia o atalho OK. Acabei de mencionar que queria uma maneira de arrastar as coisas para fora para que elas ficassem dentro da página Ok, então ele sai desta página e sai dela enquanto você arrasta Então comece a arrastar apenas com o mouse, clique em antigo e arraste-o E enquanto estiver arrastando, mantenha pressionada a tecla da barra de espaço. E o que você notará é que, você pode ver aqui, ele ficou dentro da página. Quando você estiver movendo algo da página para fora, comece a arrastar primeiro e, em seguida, mantenha pressionada a barra de espaço É um pouco avançado porque o que você pode fazer é simplesmente ir, você está lá, você está lá fora e é expulso Eu apenas o arrasto de volta para dentro. OK. Essa é uma opção, mas aí está. Obrigado ao Dexter pela dica. Continue. Tudo isso, eu preciso que tudo seja um produto de animação, então, vou pegar vocês e colocá-lo aqui. Vamos fazer tudo isso primeiro. Tudo isso vai entrar em. Agora, se eu arrastar isso, você pode ver que estão faltando aqueles. Se eu as arrastasse para dentro, animação abaixo da parte dos pergaminhos a animação abaixo da parte dos pergaminhos deixaria os pais para trás É isso mesmo? Esses caras vieram, alguns deles ainda estão lá. Vamos colocá-los todos na mesma peça. Tudo bem. Vamos dar uma prévia agora para que esses caras trabalhem. Redefina esses slides. Essas coisas não fazem parte disso. A única razão pela qual os deixei separadamente é que, se eu os arrastar na ordem errada, se eu entrar, o que é? Tabs, segure as molduras principais. Além disso, se eu os arrastar e selecioná-los forma estranha ou arrastar aquele na primeira vez e adicioná-lo à animação abaixo do parceiro de rolagem Corrigido é isso. Não, não queremos que seja consertado. E, em seguida, arraste-os para cima , veja o que vai acontecer. Talvez não, mas a aba, na verdade, você a arrasta para baixo por acidente. Vamos dar uma olhada. Clique, pause, slides na ordem das camadas ficaram na direção errada por um segundo Vamos atualizar esse. É um pouco difícil ver o passado. Estou usando minhas costas e na verdade, você não pode realmente dizer a transição. Mas você pode descobrir que, se começar para trás, eles precisam virar o palco para chegar ao topo Ok, eles estão aqui em cima. Mas saiba que você apenas garante que a ordem das camadas não seja importante, pois não interrompe a animação. Mas você pode descobrir que, durante parte da transição, esses caras estarão por baixo dela Isso faz sentido? Por que não? De qualquer forma, onde estamos? Seta voltando para frente. Ok, então é isso que eu quero e quero que esses caras aconteçam mais tarde. Então, o truque para isso é que nós, você sabe, tudo tem que ser cronometrado ao mesmo tempo para entrar Agora, esses são apenas dois para Figma, não é algo que eu deixei bem claro nos últimos vídeos Tudo está meio que entrelaçado. Quando você realmente sai para criar este site da Apple, o desenvolvedor tem, você sabe, eles podem controlar todo o tempo em qualquer estágio, ok? Portanto, essa é apenas uma limitação da Figma no momento. Existem maneiras de contornar isso. Se você souber, existem alguns plug-ins de animação de linha do tempo, protótipos, outra coisa para a qual você pode exportar seus arquivos Figma e fazer animações mais complexas fazer Mas fora do escopo deste curso, saiba que todos nós temos ao mesmo tempo, é só porque é isso que a Figma faz Tudo bem, a próxima coisa que eu quero que eles não apareçam. Está bem? Então, o que vou fazer é ser inteligente e duplicar isso primeiro Está bem? Porque o problema de fazer isso depois, terei que tentar. E se eu tirar tudo isso e depois duplicar, tenho que tentar movê-los de volta para onde estavam Então, o que vou fazer é dizer Quadro 11, nos dê um pouco mais de espaço, você pode ficar sem detalhes, você pode sair. Oh, olha como isso está ficando confuso, e esses caras estão fora de questão de qualquer maneira. Isso pode ser visto. Começamos, ele passa para uma tela vazia. Essa coisa constrói. E então a diferença entre isso e isso são esses caras. Eles começaram por aqui e devem entrar. Dê uma chance. O quadro 11 não está na coisa certa. A animação rola com 99. Você precisa estar lá dentro, a animação rola. Agora experimente. Jogue. Bem, uma coisa que está faltando, vá lá, faça um teste. Por que isso não está passando para o próximo? Nós acabamos de fazer isso. Fizemos isso da maneira certa. Eu juro que sim, exceto que não dissemos o que acontece depois que isso fica lá Ok, precisamos dizer que você, meu amigo, protótipo de membro opcional ou Alt Nine Ok, podemos dizer que você vai lá na torneira. Não, eu quero que você vá depois de um atraso lá. Por quanto tempo essa animação inteligente, por favor. Vamos facilitar a entrada e fazer isso entrando, saindo e voltando apenas para o Google. Tudo bem, vamos pré-visualizá-lo agora, porque eu não selecionei nenhum lugar. Será apenas uma prévia da primeira página inicial. Então, eu vou para fones de ouvido. Animação. Sem fluxo de animação. Ok, e vamos para Lomore. Ok, então aí está. Oi pessoal. Eu quero inserir uma pequena seção aqui. Este vídeo está indo bem para algumas pessoas e algumas estão ficando um pouco perdidas. E eu pensei, ah, seria uma boa oportunidade para entrar e mostrar algumas coisas diferentes que poderiam ter te perdido. Se você se perdeu e acertou, é melhor assistir de qualquer maneira. Porque é útil ver onde você pode errar no futuro e como corrigi-lo. Então, muitos dos problemas eram essas coisas não entrarem, certo? Bem, na verdade, o primeiro foi que eles nem conseguiam vê-los. Então, uma vez que eles tiraram isso da página, eles parecem ter desaparecido. OK. O que precisamos fazer é garantir que, ao clicarmos em nosso quadro principal, tudo bem, seja qual for a página de animação, você precise acessar todas elas e alterá-las todas. Ok, mas escolha um. Ok, e então vá para o protótipo. E então vá para este que diz não. Vá para design. E vá até este que diz o conteúdo do clipe. Você pode ver? Na verdade, o conteúdo do clipe não muda muito além de não podermos vê-lo. Ok, na prévia aqui, você ainda pode obtê-lo como eu sei que um se chama, como se chama, Frame 11. Você pode ver isso lá? E eu posso meio que clicar nele e arrastá-lo para dentro. Ainda está acessível, simplesmente não consigo vê-lo. Então, se você está achando difícil fazer sua animação, clique no quadro principal e desative-o Ok, para que você possa ver coisas para limpar as coisas, você pode ligá-las. O principal problema é que quando as pessoas estão arrastando isso, estão saindo da página no momento, tudo está dentro dessa coisa chamada detalhes do produto A. Ok? Então, o que acontece é que, se eu quiser que seja arrastado para fora, porque não quero que seja incluído aqui, você pode ver se eu simplesmente arrasto sem segurar nada. O quadro 11 agora está fora desta página. Está bem? Quadro 11 na página. Está dentro dessa página principal, mas se eu arrastá-la para fora, você não precisa mais se certificar de arrastá-la de volta para dentro, está dentro da página do produto. Estou apenas clicando e arrastando o quadro principal, que é o quadro 11, e faço com que ele volte para dentro, ou, como mostrei um pouco antes, com a atualização, enquanto você o arrasta para fora, comece a arrastar e segure o espaço e ele simplesmente não sai da página Outra coisa a verificar é clicar na página principal e ir para Prototype E veja se você sabe onde está o comportamento de rolagem. Ok, confira o estouro. Veja se não há mudança vertical de rolagem entre esses dois. Não consigo ver isso como um problema, mas acho que é algo que eu verificaria. OK. A outra coisa a verificar é se eles têm o mesmo nome no momento. Esse aqui é chamado de Quadro 11. Está dentro dos Detalhes do Produto A, aqui em Detalhes do Produto, ok? Esse aqui ainda se chama Frame 11. Veja quando eu faço isso e eu mudo isso para outra coisa, como eu não sei, Quadro 11. Uma, alguma coisa, algo diferente. Esses não combinam. Agora vamos dar uma olhada e pré-visualizar este. Isso vai aparecer, legal. Certo? Então, a nova pequena atualização para descobrir isso se abre em sua própria pequena página. Eu clico neste, vai depois do atraso. Vai para este. Posso ver que simplesmente desapareceu em vez de deslizar para dentro. Ok, se está desaparecendo quando você diz para ele fazer outra coisa, pronto, não sei o que fazer com essa coisa porque não consigo encontrá-la na página anterior Não consigo encontrá-lo porque são nomes diferentes. Mas vamos atualizá-lo. Você assiste. Só vai desaparecer. Vamos garantir que os nomes sejam os mesmos. Realmente não importa quais chamam de quais. Vou ligar para você aqui. Vamos mudar para 11 A para que ambos sejam iguais. Vamos dar uma prévia. É, vai funcionar. Estive abaixo das páginas para ser diferente. Está na página errada. Vamos para o fluxo de animação. Vamos para Limore. Venha deslizar, comande deslizando. Ele desapareceu no vídeo de ajuda da atualização e não está funcionando. Espere aí. Tudo bem, eu sei o porquê. E eu renomeei este Então, na verdade, temos três exemplos da mesma coisa, certo? Então eu renomeei esse 111. Este 111. Mas o verdadeiro que faz a animação está entre esses dois quadros. Aqui. Entre este e este. Este ainda tem o nome antigo de quadro 11, então agora todos se chamarão 11. Está bem? Desde que tenham nomeado todos eles em todas as molduras. Vou deixar esse erro no vídeo também, porque provavelmente acontecerá com você Então, vamos clicar em Fa refresh. E espero que agora vamos entrar no pré, vamos no pré-controle deslizante A luz está acesa. Tudo bem, então espero que uma dessas pequenas atualizações ajude a sua se não estiver funcionando bem Tudo bem, continue com a última parte deste vídeo. O que podemos fazer com este é facilitar as idas e vindas, porque há muito mais acontecendo e talvez tenhamos que aumentar isso. Ok, então clique, arraste se tiver certeza, basta digitar. Talvez demore um em dois segundos. Outra coisa que podemos fazer antes de limpá-lo é clicar em Protótipo Não selecione nada e você pode arrastá-los. Sinto que meus fluxos de animação precisam estar presentes. Não tenho ideia do que é um flutuador. Assim, você pode selecioná-lo e excluí-lo. Ok, isso parece mais consistente. Vamos atualizar seus slides lá dentro. Sinta-se melhor. Melhor. OK. Então, essas são transições de página Você só precisa potencialmente fazer o que deseja fazer, ter uma página vazia e, em seguida, criá-la em cada página, se quiser um horário diferente. Se você obviamente quer que tudo se junte ao mesmo tempo, você pode pular desta até aqui. Tudo bem, isso é como fazer animações de transição de página no Vamos para o próximo vídeo. 99. Projeto do curso - Transição de páginas: Ei, gangue. É hora do projeto de classe. É transição de página. Acho isso muito difícil de dizer, então vou pronunciá-lo, transição de página. Quero que você faça algo parecido com o que temos aqui. seu pode ser igualmente feito. Não me importo entre quais quadros ele é, mas algum tipo de coisa de construção onde você vai de uma página para outra para que seja animação, mas é uma forma de, eu não sei, construir uma página. Não me importo, pode ser entre a página inicial e sua página de detalhes do produto existente, tudo bem. Ou podem ser novas páginas que você está criando para sua própria versão. Você pode ter um produto específico que pode ter uma página divertida muito legal. Construa isso e veja se você pode fazer alguma transição entre ele. Como antes, você acabou de tirar uma captura de tela das páginas que você faz. Digamos que este aqui. Basta diminuir o zoom. Eu quero ver tudo isso provavelmente na visualização de design. Todos os Ys se foram. Algo assim. Captura de tela disso se você souber como gravar sua tela. Adoraria ver sua animação real. Carregue isso em vez de ou tão bem quanto. Também compartilhe com as mídias sociais. Eu adoraria ver o que você está fazendo e o que você pode dobrar Figma para fazer. Sim, não é uma ferramenta de animação completa. Eu estaria interessado em ver o que você pode fazê-lo fazer. É isso. Vejo você no próximo vídeo. 100. Micro interações usando componentes interativos no Figma: Olá, todos. Neste vídeo, faremos o mais básico das microinterações. Isso é mesmo uma micro-interação? Um pairar. Eles são chamados de componentes interativos dentro da Figma. Este é um pairar, como você pode ver. Este aqui é apenas clicar e desligar. Até agora, tivemos que escolher uma variante para começar, e não tivemos essa interação adorável, mas agora temos. Deixe-me mostrar-lhe como fazê-los. Olá, todos. A primeira coisa é que esse recurso que estou mostrando aqui é novo para a Figma, na verdade, ainda não saiu. Ainda está em Beta, dependendo de quanto tempo no futuro você está assistindo a isso. Ou funcionará perfeitamente, ou você pode ter que ligá-lo. Se alguns dos recursos não estiverem por perto, basta ir para Figma, e faremos uma pesquisa no Google procurando algo chamado componentes interativos Beta e pediremos para fazer parte do programa. Demora cerca de uma semana e então eles pareciam estar deixando qualquer pessoa idosa. Eles me deixaram entrar. Mas no futuro isso pode funcionar, então vamos começar com isso. Vou desfazer e vamos começar de verdade. O que eu quero fazer é apenas para a versão realmente bare bones, só para que eu possa mostrar como funciona e depois faremos algumas coisas mais detalhadas à medida que avançamos. Acabei de receber um documento em branco porque outro está ficando confuso e eu chamei isso de microinterações. Só vou começar com um retângulo. Vamos fazer aquela coisa de botão que você viu no início. Eu realmente vou fazer ossos nus. Começaremos com um botão cinza e o transformaremos em um componente. Vamos contar com algumas das coisas que já conhecemos. Um botão precisa ser um componente, indo para uma variável. É com isso que precisamos começar porque componentes interativos são apenas uma maneira de alternar variáveis. Para criar uma variável, temos que começar com um componente. Esse componente tem que ser transformado em uma variável, e precisa ser duas variantes, ou um mínimo de duas. Este aqui, vou apenas clicar duas vezes e mudar a cor. Eu tenho duas cores, e é aqui que chegamos antes. Essa é uma variante e o que conseguimos fazer até recentemente é que só podemos ir, aqui está meu componente, posso escolher se é essa variante ou essa variante. Tínhamos que fazer isso. Não houve interatividade entre os dois, o que é estranho. Esses novos recursos parecem ser parte muito importante de nossos protótipos. Mas, de qualquer forma. O que precisamos fazer agora é tornar isso realmente interativo. Para este componente interativo, o que fazemos é entrar aqui, esses são meus componentes. Talvez os pontos forrassem o lado de fora. Vá para Protótipo, entre em meus componentes aqui. Aqui estão as duas versões. Você pode ver esses pontos aparecendo. Bem, até agora só podíamos ir para outros quadros. Mas agora podemos ir para outros componentes e usar coisas como, você vê isso na torneira enquanto paira. Se você não consegue ver enquanto paira, isso significa que você não faz parte do Beta e talvez precise pedir acesso se quiser fazer isso. Caso contrário, espere, ele sairá em breve. Eles podem mudar a nomeação dele. Basta olhar aqui. Alguns deles vão dizer algo a ver com o pairar. Pode não dizer enquanto paira, mas eles se reservam o direito de alterá-lo no Beta. Enquanto estiver pairando, vou mudar para Variant2, e é isso. Vamos dar uma chance. Vamos visualizar este. Eu digo que vai funcionar. Não vai funcionar, ou funciona. Se o seu não funcionar, olhe para isso, estou pairando, não estou fazendo nada. Essa é a nova e doce Figma, e a coisa chamada componentes interativos. Super útil, de longa data. Se você não pode ver o seu, é porque você só tem isso, o eu tenho esta versão dele. Bem, como eu expliquei aqui, arraste um para fora. Você pode ter apenas esses primeiros componentes aqui. Talvez seja necessário arrastar para fora do painel de ativos, o botão real. Você realmente deveria estar em sua própria página. Vamos para este agora, e lá vamos nós enquanto pairamos. Vamos fazer outro simples. Vai ser enquanto clica ou pelo menos no toque. Vou roubar algo do meu último documento. Eu fui e instalei essa caixa de seleção, acho que originalmente a roubei da comunidade Connect da Microsoft. De qualquer forma, vamos dar uma olhada nas camadas. É apenas um retângulo e uma caixa de carrapatos. Atualmente você está dentro de um quadro, mas isso realmente não importa. Vou selecionar os dois. Certifique-se de que seja componente. Certifique-se de que haja duas variantes dele. Na segunda variante, vou clicar duas vezes para excluir o tick. Foi o que fizemos antes. Fizemos essa coisinha e decidimos se ela está marcada ou desligada. Para adicionar a interatividade, assim como fizemos antes, mude para a opção de protótipo 9, Alt 9. Eu cliquei duas vezes para entrar nos componentes aqui, para dizer: “Você vai lá.” Quando você vai lá? Ao toque. Já fiz isso. Ao tocar, mude para Variant2. Instantaneamente? Sim, por que não? Dissolva, não vai ser tão excitante. Vamos dar uma prévia. Vou arrastar uma instância. Já tenho um lá e vamos visualizá-lo. Tenho certeza que já deveria estar aberto e assista. Veja como isso é legal. Por que não volta na época? Foi de um jeito. Se eu redefini-lo para todos, ele vai desligar, mas não voltar a ligar. Como fazemos isso? Basicamente, se você quiser que ele alterne, vá para frente e para trás, você basicamente vai para isso. Temos um arrastando daqui para aqui. Vamos fazer com que um volte para esse caminho. Ele vai se lembrar da última coisa que você fez. Ele vai se lembrar da mudança de toque também, e vai para este novo. Espero que isso funcione. Vamos. Alternar, alternar, alternar, alternar, alternar. Ei, microinterações super básicas. Realmente, isso é apenas componentes interativos. Isso é básico como ele fica. Faremos mais algumas micro-interações, os bits no próximo vídeo. São componentes interativos dentro da Figma. 101. Toggle switch de micro interação no Figma: Olá, todos. Neste vídeo, vamos fazer esse pequeno interruptor de alternância para que ele ligue e desligue, e ele anime e mude de cor. Muito semelhante ao último vídeo, mas um pouco mais emocionante e provavelmente um pouco mais micro-interação porque está ficando verde para nos ajudar a comunicar que está realmente ligado. Tudo bem, vamos ir. Para economizar tempo, coloquei um círculo com um retângulo com cantos arredondados, brinquei com algumas sombras doces e alguns gradientes adoráveis. Vamos começar neste momento. Lembre-se de fazer uma variante, ela precisa ser um componente primeiro, fazer uma variante. Precisa ser diferente e tudo o que vou fazer é mover isso para cá. A única diferença entre este e o último vídeo é que precisamos, quando nos juntarmos a eles, protótipo. Vou clicar neste no lado de dentro. Eu clico duas vezes nele para entrar no sentado. Você vai até lá e destoca a mudança dois que estamos usando instantâneo, que é o padrão. Mas podemos usar o smart animate. É a única diferença, e vai fazer nossa adorável a animação que estamos acostumados. Enquanto estamos aqui, temos que fazê-lo voltar para fazer a mesma coisa. Vamos dar uma prévia. Você não pode visualizar isso aqui. Os componentes dele, vamos arrastar uma instância dele. Agora isso deve funcionar realmente. É bom. Isso é bom. Vou gostar disso. Isso é uma micro interação. Sinto que é mais uma micro interação se fizermos algo com a cor. Vamos dar uma olhada. Design linear. Vamos indicar que ele está ligado para torná-lo um pouco mais claro. Aqui vamos nós. Vamos fazer alguma coisa. Vamos passar muito tempo escolhendo cores que é o que vamos fazer. É verde o suficiente. Acho que fui por muito aquático. De qualquer forma, vamos dar uma olhada. Este aqui e nós continuamos, desligamos. Olhe para isso. Olhe para nós fazendo coisas. É bem pequeno, mas você provavelmente está ampliado. Lá vai você. Você pode ter um vermelho de um lado e verde do outro. Está realmente nos ajudando a saber que a coisa que marcamos ao lado está realmente ativada e que o animado inteligente funciona bem. Tudo bem, vamos fazer uma fantasia extra especial no próximo vídeo. Sim, vamos fazer isso agora. Antes de ir, tenho sido muito preguiçoso com minhas convenções de nomenclatura. Algumas coisas para lembrar. As mesmas regras se aplicam. Se você quiser ir entre isso e isso, as camadas precisam ser as mesmas. Se o seu parar de funcionar em qualquer estágio, é porque você tem componente ou é ele, vamos para U. Este é meus componentes aqui. Posso dizer que é o mestre por causa do ícone e tenho a variante 1 por padrão. Primeiro de tudo, vamos arrumar isso. Podemos nomeá-lo aqui. Podemos chamar isso em vez da variante 2, provavelmente ele vai ser Ativado. Este aqui vai ficar desligado. Isso é uma coisa que vai tornar isso mais agradável. Quando estamos manipulando isso e tentando arrastá-lo para lugares diferentes. Você verá, 'Arraste mudar para. ' Você pode ver que eu tenho meu pequeno interruptor de alternância agora ligado e desligado. Isso pode ser útil. A outra coisa é aquela, esta é chamada Ellipse 10. Isso se chama Ellipse 10. Se eu acabar mudando ou agrupando acidentalmente, ele vai quebrar. Vamos dar uma chance a isso. Sem workey. Apenas certifique-se de que essas sejam as mesmas entre as duas variantes. O mesmo tipo de problemas que tivemos quando estávamos fazendo animação entre quadros, e entre essas pequenas variantes, a mesma estrutura, as mesmas regras se aplicam. vez, vamos dar uma olhada no design do nosso componente. O que temos? É chamado componente 1. Nome terrível para isso. Vai ser meu interruptor de alternância. Você vê que a variação é, o que você chama esse valor de nome, esse é o meu padrão para como: “Não tenho certeza do que chamar isso”. Ativou isso. Você entende a ideia. Voltamos ao nome apenas para lembrá-lo de nomear as coisas melhor do que apenas deixá-las padrão e na variante 2. Tudo bem, agora vamos fazer algo um pouco mais emocionante no próximo vídeo. 102. Menu de burger de micro interação transformado em cruz no Figma: Olá a todos. Prepare-se. Nós vamos ir de menus de hambúrguer listrados, coisa sanduíche [inaudível] também, coisa cruzada. Vai animar, mudará de cor, as formas externas vão mudar. É totalmente um rito de passagem para fazer essa animação. Todo mundo faz isso. É incrível. Parece legal. Eu poderia clicar nele o dia todo. Vamos continuar. Tudo bem. Vamos entrar e mostrar como fazer isso. O truque com este é que não há truque. É o mesmo que o pequeno Toggle Switch. É só aquele Smart animate, mas eu vou levar, bem, não mais, mas eu vou apenas trabalhar o seu caminho só para que você tenha a ideia de como fazê-lo, e além disso, é como um rito de passagem, aquela pequena animação do menu Burger. Vou começar com o retangular ou o quadro, não importa. Ao redor dos cantos, todo o caminho, termos de cor, isso serve. O que vamos fazer é começar com nossas pequenas linhas. Vou usar L para a linha 2. Vou segurar Shift para arrastá-los. Vou fazer três deles. Comando D. Arrastarei a primeira ou a opção drapeje a primeira. Comando D. Vamos selecionar todos os três. Vou para lá. Preciso realmente fazer um teste de quão distantes eles precisam estar. Cole todos eles. Vamos apertá-los. Tudo bem. Esse vai ser o meu começo. Vou começar com algumas marcas de cores específicas, é uma cor assim. Assim como antes, precisamos ter um componente que precisa ser variância entre eles neste final. Basicamente, o que fazemos é esse meio, você pode excluir ou diminuir a opacidade para zero, então ele desaparece ou decidir que ele desliza ou faça outra coisa. Com essas duas linhas, estou clicando duas vezes para entrar nos meus componentes. Não clique demais e eu entendo isso. Eu quero passar o mouse do lado de fora para conseguir isso, e eu quero fazê-lo, quem se lembra de como fazer com que ele vá para 45 graus, é o que eu quero. É isso. Segure e Shift. Você pode dizer olhando para ele e ele diz lá em cima. Há esse. Há esse, 45 graus também. Agora vou alinhá-los, eles no meio e não alinhados. Vamos por esse caminho. Vai ficar bom. Ninguém precisa seguir o caminho. Alinhado novamente. Horizontal, vertical. Lá vai você. Vou mudá-los para, vamos atrás de você. Vamos mudá-lo para vermelho. Eu quero bondade extra de micro interação. Eu queria fechar vermelho, verde para começar. Vamos dar uma rodada completa. Em vez de mudar para um círculo, você pode realmente fazer um círculo usando a ferramenta retângulo e tudo isso. Conversamos um pouco disso antes, mas todos os cantos arredondados. Enquanto você estiver acima, não importa quanto, mas 2.000 lá, desde que ele passe por ser um retângulo para um círculo. A magia acontece é esse bit de prototipagem. Lembre-se, vou clicar dentro para pegar minha variante de punho. Você vai lá. É o mesmo. tocar em Alterar para, mas em vez de instantâneo, será inteligente animado. O mesmo com este aqui. Quando eu clico neste, volte para lá e ele vai lembrar o que eu fiz. Vamos dar uma pequena prévia. Vamos. Lembre-se de que você precisa de uma instância arrastada para fora dela porque não é possível visualizar o conjunto de componentes. Vamos entrar aqui. Você está pronto. Onde está isso? Aí está. É um rito de passagem. Aquele impressionará seus colegas, seus amigos. Veja como é bom. Vai de quadrado para um círculo. Ele também faz essas linhas deslizando umas sobre as outras para atravessar. Isso é levar a coisa da micro direção para o próximo nível, algo que parece bastante extravagante. Mesmos princípios, prototipagem em vez de quadros apenas para diferentes variantes de um conjunto de componentes em vez de sobre páginas. Então, apenas mudando meu animado para conseguir tudo isso. Clique nisso o dia todo. Tudo bem. É isso. Vejo você no próximo vídeo. 103. Projeto do curso 20 - Micro interação: Ei gangue, é hora de um projeto de classe. Este é micro-interações. Eu quero que você faça o menu de hambúrguer e, como eu disse, é o rito de passagem se você ainda não o fez. É este. Linhas para você fazem sua própria versão. Bem, faça isso. Mas então eu quero que você faça o seu próprio. O costume e a direção podem ser o que você quiser. Pode ser um interruptor de alternância. O que eu quero que você faça é dar uma olhada, procurar uma pesquisa no Google por microinterações ou 20 melhores microinterações ou mais emocionantes, e ver se você pode recriar uma. Vai ser para o arquivo Figma real. Vá dar uma olhada nisso. O que poderia ser feito? Talvez seja esse botão aqui, talvez seja aquele botão de compra, talvez esteja na página Parabéns, algo para fazer as estrelas. O seu está começando a parecer um pouco diferente do meu agora porque você tem usado seus próprios produtos. Pense, faça um pouco de uma exploração, e eu gostaria que você criasse o menu do bugger e cruzasse e o seu próprio. Então, quando terminar, envie-me capturas de tela do conjunto de componentes. Se você não consegue descobrir como fazer uma animação em vídeo. O que quero dizer com isso é me enviar uma captura de tela disso. Mas se você puder, eu adoraria ver um vídeo da coisa funcionando, você interagindo com ele. Vá em frente, faça uma pequena interação, e te vejo no próximo vídeo. Depois de fazer sua lição de casa, vá fazer isso. 104. Como mudar a miniatura para arquivos do Figma: Olá, todos. Neste vídeo, vamos passar da miniatura aqui que estamos usando, que é para mim, não muito representativa do que estamos fazendo, desta para aquela, que é um pouco mais representativa do arquivo real dentro. Às vezes, pode ser muito óbvio o que está no arquivo e às vezes não tão óbvio, então uma miniatura personalizada pode ser útil. Deixe-me mostrar-lhe como. Provavelmente está te deixando tão louco. As miniaturas aqui estão boas às vezes, mas acabam como no momento em que está me mostrando coisas que eu fiz há muito tempo. Está na minha página Fluxo de Tarefas e não é realmente indicativo do que está realmente no documento. Aquele, não é útil. Basicamente, essa miniatura está usando a primeira página do documento. Vou abri-la e descobrir como ir mais tarde, qual eu estava trabalhando? Isso não é útil, é muito pequeno. O que você pode fazer é modificá-lo. Vou entrar nisso. O que ele está usando no momento é o que está na primeira página do primeiro quadro. Está usando essa coisa na minha. O que podemos fazer para atualizá-lo, podemos simplesmente ir para um quadro e clicar com o botão direito do mouse. Aqui está a miniatura. É uma forma de fazer isso. O problema é que só vai usar esse quadro, então o que você tende a fazer é criar uma página inteira para, você vai chamar isso de minha página de rosto ou miniatura de capa. Você pode chamá-lo de qualquer coisa que quiser. Coloque-o no topo, e aqui, há um padrão de quadro na comunidade Figma chamado capa de arquivo. É tudo o que queremos. Isso corresponde ao tamanho de volta daqui. Você pode colocar o que quiser lá. Estou relutante em ir e começar a copiar um pedaço disso. Por quê? Como eu tenho mais exemplos dessas coisas e do que costumo fazer, você pode usar copiar e colar isso e colocá-lo naquela página. O que eu costumo fazer é apenas fazer uma captura de tela de adequação. Em um Mac, é Command Shift 4. Em um PC, acho que você imprime a tela e depois a cola em alguma coisa. Você terá que verificar novamente. Vou capturar isso na tela. Vou para a minha capa e despejo lá. Command Shift K, Importar. Eu tenho uma captura de tela, aí está, e vou ter exatamente, clique uma vez. Vou enfiá-lo dentro do meu quadro. O que vou fazer é, eu não sei, parece que parte do legítimo de ser designer de UX é, ele tem que ser inclinado para o lado como uma arma nos filmes. Você não é um verdadeiro designer de UX se tiver suas coisas corretas. Tem que estar do lado. Galo para um ângulo. Esse será o meu e, em seguida, posso clicar com o botão direito do mouse e dizer: “Definir como miniatura”. É o tamanho certo. O que você também verá é, você pode ver o pequeno ícone mudar? Há um pequeno pequeno, não sei o que é isso. É o pequeno glamour que estava no cartão que aparece aqui. Bem, para mim, na minha visão, estou usando um pouco de visão, então isso pode estar na minha. Ele não o atualiza imediatamente e eu fecho isso e abro de volta. Bem ali e estamos de volta e funcionou. Olhe para isso. Tudo no slide e personalizado. Olhe para isso. Obviamente, alguns deles funcionam muito bem, mas lá vamos nós. Outra coisa que você pode fazer é, vamos abrir isso, você pode tirar uma captura de tela da apresentação real, você pode querer vê-la dentro do quadro, o que pode ser bom. Não essa página. Aqui vamos nós. Este aqui. Se fizermos isso e apresentarmos, faça uma captura de tela desta página. Pode parecer melhor, ainda precisa estar em um ângulo. Quanto de um ângulo? Não tenho certeza dos graus, não estou nos escalões mais altos dos designers de UX ainda para conhecer os graus. É uma fórmula de receita secreta. De qualquer forma, estou waffling. É assim que atualizar a miniatura nos arquivos Figma. 105. Como exportar imagens a partir do Figma: Olá a todos. Neste vídeo, veremos a exportação de imagens da Figma, uma exportação de imagens de uso geral. Analisaremos alguns casos de uso mais específicos para desenvolvedores e colegas e outras coisas nos próximos vídeos, mas vamos fazer esse uso geral. Você pode exportar qualquer coisa. Vamos dar uma olhada nesse logotipo, preciso do logotipo exportado. O que você precisa fazer é outros programas que você selecionaria e vá arquivar, exportar, algo assim. Este aqui você aplica configurações de exportação a ele, então eu quero dizer que você selecionou, vou aplicar algumas configurações a ele e então você pode passar e escolher. Este é o principal, que formato é, PNG, JPG, SVG ou PDF. Se você é novo nisso, um SVG é Scalable Vector Graphics ótimo para coisas como logotipos e ícones porque eles são como independentes de resolução, essa é a chave errada, escala, você pode ver que eles ficam maiores e maiores sem pixelar. No passado, você provavelmente teria usado o PNG porque isso permite ver alguma transparência em torno do plano de fundo em oposição aos JPGs. Agora esta pré-visualização é atualizada, acho que você tem que gostar de clicar, “Desligar”, clicar em “Ativar” novamente. Vamos sair, em. Olhe para a visualização, ela ainda está lá, apenas me mostrando o plano de fundo de qualquer maneira, isso será exportado com um fundo sólido, não ficará claro. SVG é quando você pode fazê-los, ícones ótimos, logotipos ótimos qualquer coisa que seja essa vitória, linhas retas simples, isso que o SVG é, um gráfico vetorial escalável e PNGs são úteis para, eu vou te mostrar, vamos faça JPG porque isso é o oposto de um PNG como JPG e SVG. JPGs são muito bons se não houver necessidade transparência e você tiver muitas informações de cores, algo assim. SVG não saberá o que fazer com ele, porque não é um gráfico vetorial como essas formas lineares de texto e ícones, então JPGs primeira base para isso. JPGs têm cores grandes, podem ser comprimidas agradáveis e pequenas, e ficam ótimas. Digamos exportar, e eu diria que você é um JPG. O que você notará é o nome aqui, se eu quiser exportar isso, basta clicar no botão e ele me diz, você vai exportar essa coisa. Estou colocando minhas imagens aqui em apenas uma pasta vazia na minha área de trabalho, você notará que ele vem o nome da camada aqui é o que Figma usará para o nome do seu arquivo. Eu posso salvá-lo lá, vamos dar uma olhada e lá está meu JPG. Agora, quão grande será? Figma não é realmente feito para comprimir isso, você pode ter que usar outra coisa, algo como pequeno JPG é uma boa solução ou usar algo como o Photoshop para reduzir o tamanho do arquivo. Pode haver um pouco grosso saindo de Figma. Você também percebe que esse é o nome do arquivo, então, se você quiser ser inteligente, pode entrar aqui e vamos chamar essa mulher IMG 1 e agora, quando eu for exportar, ela usará essa convenção de nomenclatura. JPGs bom para imagens sem transparência, SVG é bom para qualquer material linear vetorial. Quando usamos um PNG é ótimo para metade e metade. Este aqui tem um círculo e tem transparência, então não é possível usar um JPG. Esta imagem aqui pode ser um SVG ou JPG, por isso tem que ser esse PNG, porque permitirá transparência ao redor do lado de fora. Outras coisas sobre as quais não falamos é o guia de dimensionamento aqui. Isso dependeria, digamos de um web design, muitas vezes o fornecimento de seu desenvolvedor web com um 1X e um 2X, dependendo de como eles estão fazendo o site. Como eles estão lidando com imagens responsivas. Esta é uma pergunta com a qual você gostaria de conversar com um desenvolvedor. Você quer que ele apenas corte o meio e seja 1,5 e não tenha nenhuma mudança de imagens? Significa apenas alguns monitores que a imagem ficará ótima neste tamanho 1X menor, por 1X, será um 174 por 174. Se eu exportar este, será o dobro desse tamanho, o que significa apenas em novos laptops ou computadores sofisticados, que é a maioria deles agora. Ficará melhor e, em seguida, o 1X carregará rápido e depois será pequeno, mas um parece ótimo. Muitas vezes você pode adicionar mais de uma vez. Vou exportar esse PNG em 1 e 2X. Sufixo, essa é uma prática comum para o cabeçalho, então ainda será chamada de elipse 2, mas um deles não terá sufixo no final, você pode fazer isso para ficar claro consigo mesmo, e um sufixo significa que é indo para o final. Vamos colocá-lo lá. Vamos dar uma pequena olhada. Vou mudar para essa visualização, então temos 1X e 2X, você pode ver as diferenças de tamanho do arquivo? Ainda tem transparência, você vê a diferença de qualidade. Seria um pouco difícil neste vídeo, mas tenho certeza que você pode ver. Quais os grandes pixels? Isso está ficando um pouco velho agora maioria dos sites provavelmente tentará fazer isso duas semanas, nem sempre. Outras coisas que são úteis quando você está exportando, digamos que eu queira exportar isso. Vou clicar duas vezes em “Exportar”, apenas neste círculo novamente, então vou subir alto, preciso disso, o que é? Transparência PNG. Há uma opção aqui que diz, essas pequenas linhas pontilhadas, você pode dizer realmente ignorar camadas sobrepostas, mas se eu desligar, que é ícone aqui embaixo. Lá vai você. Ele pegou a parte de trás dessa imagem, também pegou a caixa verde e todas essas outras coisas. Depende, basicamente, apenas usando as bordas da elipse e agarrando todo o resto que se sobrepõe, então você pode ou não precisar, eu mostro a todos que nunca preciso dela, haverá algum tempo que você precisa. Falamos sobre 1X e 2X, mas digamos que você queira, digamos que você tenha um ícone, eu só vou pegar uma edição aqui. O que temos? Eu entendi isso, nem me lembro quando fiz isso. Eu consegui de algum lugar, digamos que preciso exportar isso. Vou exportar, mas em vez de ser um SVG, me pediram para ser fornecido em um tamanho específico, então eu vou ser um PNG, então ele ainda tem transparência, deve realmente ser um SVG. Mas vamos apenas dizer aqui, em vez de 1X, podemos digitá-lo, podemos dizer que quero que tenha uma largura de 500. Você coloca um W no final ou um H para a altura, você quer ter 500 pixels de altura ou 500 pixels de largura e isso apenas o forçaria. Ele assume pixels, então vamos fazer isso e vamos fazer outro e isso será, digamos, 100 pixels, talvez para uma versão em miniatura dele. Vamos exportar os dois PNGs. Deixei um sufixo lá como às vezes dois, o que não é bom, mas lá está lá, esse é o meu branco, você pode realmente vê-lo. Há a versão grande, você pode ver as rodas, elas tiveram transparência, outra é obviamente 1000 pixels ou 500 pixels e uma é 100. Se você aplicou a exportação a algumas coisas diferentes e passa e faz uma mudança, digamos que você altere um dos seus estilos de cores e atualize muitas coisas que você gosta, eu tenho que ir e aplicar tudo isso individualmente novamente? Não, você pode exportá-los como uma grande coisa indo até o seu pequeno ícone Figma, vá para o arquivo e, se você acertar este, apenas diz exportar. Vai passar e dizer, ei, veja, aqui estão todas as coisas que você também editou as configurações de exportação e você pode dizer, eu preciso disso, isso, não preciso disso, mas eu preciso desses três e apenas clique, “Exportar” e ele fará isso de uma grande coisa e os colocará lá, substitua os arquivos existentes, lá vamos nós, simples. Meus amigos que estão exportando imagens da Figma, espero que você tenha achado útil. Vejo você no próximo vídeo. 106. Como compartilhar seu documento com clientes e investidores: Olá a todos. Neste vídeo, mostrarei como exportar seu documento para talvez seus clientes ou partes interessadas talvez seu gerente de produto ou gerente de linha ou seu gerente de estúdio, quem quer que seja essa pessoa. Falamos sobre compartilhar um link. Faremos isso no final porque já fizemos isso. Vou te mostrar algumas coisas únicas que você pode fazer. Um deles é exportar seus quadros. Estou na minha página, clique nessa exportação. Vou até o meu ícone Figma e o arquivo superior esquerdo, este tem aqui os quadros para exportar ou exportar para quadros. Quadros para PDF. Clique nisso. Vai ser bom, vai ser ruim. A parte ruim é que, isso é considerado um quadro. Há muitas coisas, mesmo que isso seja layout automático, que é considerado um quadro. Vamos ter que arrumar. Temos evitado arrumar tudo há muito tempo, mas ei, vamos ter que em breve. Aí está meu PDF. Vou bater em salvar. Onde está isso? Está lá, é um PDF muito confuso. Isso passou por todas as coisas. Então ei, essas são as coisas que eu quero para que eu possa excluir as páginas que eu não quero, depende de suas necessidades eu acho. O que eu preciso fazer é ir, você meu amigo precisa ser esse meu nervo móvel, eu vou apagar porque eu precisava é parte deste documento que eu acho que eles não precisam nem mesmo lá. Este, eu não uso esse. Esses dois aqui, eu não queria mais. Esses caras aqui, o que eu vou fazer é que você vai se tornar um conteúdo recortado. Normalmente, não importa. Este em particular, para exportar PDFs, queremos recortar o conteúdo. Mais alguma coisa? Esses caras vão morar lá porque eu não quero excluí-los. Este é um lixo familiar sobre como o lixo eletrônico dessa forma um botão de exportação. Vamos ter que fazer isso em algum momento. Agora, quando exportarmos, ficará um pouco mais arrumado e podemos excluir as páginas. Quero manter isso por perto. Então olhe. Então, muito mais arrumado. Eu tenho esses dois que eu teria que excluir. Eu abriria no Acrobat e os removeria. O que você conseguiu sua máquina para trabalhar com PDFs. Você notará agora que isso está tudo bem integrado. Tenho todas as minhas páginas. Você pode pensar em outro motivo para usar isso, o KPDF. Você pode estar usando Figma para fazer apresentações. É muito comum usar a ferramenta de quadro. Aqui há apresentações para slides diferentes. Esse é um formato HD genérico para um slide. Você pode usar totalmente suas habilidades aqui apenas para usar Figma para apresentação porque você tem bom no edge. Você gosta disso. É rápido. É fácil de atualizar, fácil de compartilhar. As pessoas estão usando Figma para todas as coisas. Outro útil, eu não diria que é útil. É algo que eu pretendo mostrar a você. Vou mostrar que é a ferramenta Slice. A ferramenta de quadro é o que usamos cargas. ferramenta Slice, que usa o atalho realmente bom de s, que deve ser escala, é a ferramenta de fatia que ninguém usa. Não acho que a Figma tenha documentação sobre isso. Pode desaparecer. O que ele faz? Eu posso ver quando você usaria. Eu simplesmente nunca tive. Você quer que esses dois quadros saiam e você apenas desenhe uma caixa ao redor deles. Chama-se Slice 1. Você pode dar um nome a ele. Isso pode ser algum fluxo de tarefas para o fluxo de tarefas de login. Você pode selecioná-lo aqui como fazemos muitas coisas. Você pode ver que ele apareceu no topo da minha lista de camadas? Posso adicionar configurações de exportação como fiz anteriormente e dizer, quero exportar isso como JPEG ou acho que ele não suporta PDF, vamos verificá-lo. É um JPEG. Não quero um sufixo nele. Vou apenas ir para zero e só vou excluí-lo. Isso só vai ser um tamanho 1x ou posso dar uma largura específica. Digamos que ele tenha que se encaixar em alguma coisa. Ele vai para um site em alguma galeria e definitivamente precisa ser 480 por algum motivo. Ele precisa ser 480W. Vamos exportá-lo. Atualmente, a exportação de PDF não é suportada. Vai menos isso. Lá vamos nós. Vamos exportar apenas aquele pequeno slide. Olha o que ele fez. Teste para um login. Pode ser apenas um jeito. Um 180 pixels está bem embaçado. A culpa foi minha. Deve ser como um 1480. Isso é o que a ferramenta Slice faz. Agora, essas são formas de tirá-lo. É uma maneira genérica de sair. Haverá momentos em que precisamos disso. Se você estiver compartilhando com seu colega ou cliente ou eu não devo ligar para o cliente, alguém que não seja um designer de UX. Muitas vezes, é melhor compartilhar o link e dizer, não quero que você seja editável. Eu quero que você esteja vendo. Porque eu não quero que você mova as coisas, forneça o endereço de e-mail, ou você pode simplesmente copiar o link que você não precisa enviar por e-mail para escrever um e-mail e copiar isso. Você pode vincular a uma fatia [inaudível] específica. Digamos que você queira iniciá-lo nesta animação. Você pode dizer, você compartilha e vincula ao quadro selecionado. Ele é selecionado automaticamente porque cliquei e selecionei um primeiro quadro. Você pode fazer essas coisas. Copie esse link. Vou colá-lo em um documento de texto aqui. Pronto para meus e-mails mais tarde. Outro link que você pode enviar para eles é o protótipo real em vez do documento de trabalho real, você pode querer compartilhar do que o protótipo. Vamos apresentar. Estou usando esse fluxo aqui e vou dizer um protótipo puro desta janela e copiá-lo. Ele selecionará o protótipo para começar. Vai ser muito parecido com o outro. Você pode, a partir deste link, chegar ao protótipo. Vou te mostrar isso, mas este vai direto para lá. Muitas vezes, mesmo que você possa fazer protótipos deste aqui, muitos cliques duplos. Vou enviar-lhes dois links separados para que isso torne mais fácil para as pessoas. Então, vamos abrir este. Vou abrir um navegador. Vamos dar uma olhada. Fizemos assim, atrás. Então, apenas o básico para cobrir. Eles podem ignorar isso e realmente querem que eles se inscrevam, mas não precisam. Se eles quiserem comentar, eles podem fazer login com um endereço de e-mail gratuito, mas podem visualizá-lo sem fazer nada. Eles podem protótipá-lo sem olhar para nada. Há uma barreira muito baixa para visualizar seu trabalho se você estiver enviando para eles. Quem se lembra disso, foi há algum tempo? Há como compartilhar seu documento com clientes e partes interessadas. Não são realmente outros designers de UX, definitivamente não desenvolvedores. É uma ótima maneira de compartilhar designs, imagens e poder fazer alguns comentários que vêm e voltam da Figma. Isso vai ser para este vídeo. 107. Como falar com seu desenvolvedor no início do processo de design do Figma: Olá a todos. Pensei ter pulado para fora da tela. Faremos isso ao vivo. Trabalhando com seu desenvolvedor, não há maneira oficial de trabalhar com um desenvolvedor. Algum processo de entrega oficial, basicamente o que acaba acontecendo é que dependerá do desenvolvedor e do seu relacionamento com eles, do objetivo e onde tudo é incrível é onde você conseguiu o desenvolvedor no início do processo. Surpreender qualquer pessoa com um design acabado não é divertido. O desenvolvedor sentirá ressentimento, provavelmente uma palavra muito forte, mas eles não tiveram nenhuma entrada. Ok, esse designer me deu essa coisa para construir e eu vou construí-la porque eles disseram que eu tinha que fazer, o que você quer é que eles façam parte dos wire-frames, para lhe dar conselhos. Parte dos primeiros quadros que você faz para dar conselhos para que não haja apenas buy-in, mas eles sentem que fazem parte do processo. Especialmente quando você é novo receber feedback mais cedo significa que você não vai se projetar para um desastre. O idioma pode ser muito simples. Não precisa ser reuniões oficiais. Pode ser como, “Ei, Sandy, você se importaria, posso mostrar rapidamente meus wire-frames, é aqui que estou pensando em ir com o projeto. Só quero seu feedback. Você se importaria de me dar cinco minutos?” Ou, “Ei, aqui estão os primeiros quadros, o que você acha?” Porque há tantos trabalhos em que presumi que algo era muito difícil de fazer, então não fiz isso. Só para descobrir na primeira conversa que eu ia fazer isso, mas acho que vamos empurrar isso para a fase 2 porque parece trabalhar duro o que você acha e eles são como não, temos aquela outra coisa que é muito semelhante. Essa estrutura já foi construída para essa outra coisa. Vamos apenas colocar isso lá dentro e eu vou mudá-lo e você é como, ei, eu não sou engenheiro ou desenvolvedor, então há muitas coisas em que eu acho muito difícil, mas acontece que elas não são, e o contrário. Ok, há coisas que estou projetando e é como uma peça central da coisa que eu quero. Pode ser como um anúncio de valor “Oh, isso seria incrível”. Então você fala com o desenvolvedor logo no início e ele vai levar o dobro do tempo do projeto ou adicionar toda essa complexidade extra. Você realmente precisa disso? Quando for cedo você gosta, “Sim, faremos isso na fase 2.” Fase 2 é uma boa maneira de dizer que faremos isso mais tarde, mas provavelmente nunca vamos embaralhar para que possamos fazer esse projeto. Tudo isso acontece nesse primeiro diálogo. Sim, há um processo de entrega quando tudo está assinado, mas essa não deve ser a primeira vez que seu desenvolvedor deve ver seu projeto. Trabalhe a céu aberto, peça que eles comentem , envolvam e descubram por que e como eles gostam de trabalhar. Que tipos de coisas eles querem ver na mão que você não seja “espero que eles gostem” e enviando um e-mail com todos os seus links e imagens e eles querem um pouco. Eles vão querer ver maquetes, protótipos e muitas imagens provavelmente. Eles usarão suas maquetes para resolver espaçamento e preenchimento nesses tipos de coisas e se for um novo trabalho, ok, mas eles não usarão seus retângulos, certo? Eles vão apenas olhar para o espaçamento e reconstruir tudo principalmente em código, exceto por coisas como imagens. Existem algumas consistências entre o hand-off. Faremos um pouco mais em um segundo, mas falaremos com seu desenvolvedor e descubra quem eles são. Seja proativo. Não espere para gostar do departamento de engenharia mágica ir e fazê-lo. Você pode ter um líder de produto ou um gerente de produto, ou pode estar trabalhando sozinho e terceirizá-lo, ou talvez o cliente faça isso por você. Descubra quem é, fale com eles. Torne o desenvolvedor seu amigo, se você for o desenvolvedor, facilita as coisas. Mas tudo bem, é assim que trabalhar com seu desenvolvedor. Vamos entrar e mostrarei algumas coisas mais táteis que podemos fazer com a Figma. 108. Como compartilhar o Figma com desenvolvedores e o handoff para os engenheiros: Olá a todos. Neste vídeo veremos o que chamo versão básica do handoff para seu engenheiro ou desenvolvedor Ok, então, apenas o básico, está sua maquete na parte inferior, aqui embaixo , há um pouco de informação sobre o que estamos fazendo, que é o cliente, qual fluxo estamos demonstrando Talvez alguns links. Ok, o link do protótipo Ok, então adicionamos esse link anteriormente para que eles possam acessar facilmente o protótipo se não tiverem certeza de como chegar lá Na verdade, é para alguém com quem você trabalhará, algum desenvolvedor que se envolverá de verdade com o Figma e fará parte de toda essa coisa se envolverá de verdade com o Figma e de colaboração on-line E então haverá pessoas que só querem saber o que fazer, receber uma boa documentação e começar só querem saber o que fazer, a construí-la. Novamente, isso dependerá de seus desenvolvedores, basta trabalhar com eles. Pode ser um pouco complicado incorporá-los ao Figma Ok, há um documento compartilhado que talvez estejamos usando. Um pouco de papel, geleia de figo placa de espelho que você possa estar usando. Ok. Apenas todas as coisas que estão lá e são fáceis de encontrar. E eu simplesmente coloquei todos os meus estilos na página. Todas as cores, você sabe , dependem do quanto você quer impressioná-las. Como se isso não fosse nada impressionante, mas eu coloco as cores lá fora. Ok. Componentes, eu meio que retirei e não os rotulei todos. Eu poderia. Na verdade, não há certo ou errado. Ok. Basta ter uma ideia do que é necessário para este. Você pode exagerar na primeira. Ok, faça com que fique bonito. Vou te mostrar alguns bons exemplos. Melhor do que meus exemplos. Sim. Eu meio que descrevi o básico desta página agora, como faço para compartilhá-la com eles Você faz essa opção de compartilhamento. Oh, olá a todos. Botão pequeno aqui. Eu vou, há uma pequena atualização neste vídeo. A coisa pode ter mudado um pouco as coisas. O que fizemos no passado foi quando compartilhamos coisas para um desenvolvedor, compartilhamos com eles e pedimos que eles acessassem essa guia de inspeção aqui Eles moveram a aba de inspeção para esta pequena chave seletora Ok, agora é chamado de modo de desenvolvimento. Em vez de inspecionar, ainda meio que inspecione, aí está, ok Mas eles estão chamando isso de modo de desenvolvimento, ok? Então, quando você está compartilhando, estou no modo de design, é o modo azul. Verde. Ok, se eu for compartilhar e compartilhar este link com o desenvolvedor, o que vai acabar acontecendo é que eles vão acessar sua versão de design, que é um pouco mais complicada e um pouco mais difícil de usar para desenvolvedores Ok, então você quer colocá-los diretamente no modo de desenvolvimento. Então, o que você faz como designer, como você diz, você usa isso e depois compartilha. E se você compartilhar um link desse modo, ok, modo de desenvolvimento, ok, você receberá um link que vem para esta versão verde. Vou explicar onde está a versão verde agora, mas é uma maneira melhor de compartilhar. É por isso que eu o mordi naquele momento. Não compartilhe essa versão original. Essa é a nova maneira melhor. Agora eu poderia muito bem continuar com uma parte do vídeo explicando o que está nesse tipo de modo de inspeção. Agora, realmente chamado de modo Dev, é que isso permite um desenvolvedor passe e seja um pouco autossuficiente, ok? Então, eles podem continuar e dizer: na verdade, eu posso clicar nisso e é mais fácil para eles trabalharem. Ok, se você tem grupos dentro de, grupos dentro de quadros, pode ser um pouco complicado para os desenvolvedores clicarem, clicarem, clicarem, clicarem para tentar encontrar os bits de que precisam Já no modo Dev , basta um pouco mais de um clique, seja , se eu clicar nessa navegação superior, ok? Está me dando muitas coisas sobre navegação, altura e largura, ok? Estou usando CSS. Eles podem estar usando uma das estruturas de desenvolvimento de aplicativos, ok? Eu vou usar CSS, ok? Mas dá a eles o código que eles podem ou não usar, dependendo do que precisam, ok? As cores usadas lá dentro, o que é incrível. Está bem? Além disso, todos os ativos disso. Na verdade, estou fazendo o quadro inteiro. Vamos clicar apenas nos Ks de navegação superior. Ele me deu esse espaçamento, mas me deu os ícones que estão nele, o que é muito fácil Então, nos vídeos anteriores, mostramos como exportar SGs para o desenvolvedor Se você tem um desenvolvedor que está trabalhando dentro do Figma, ele pode pegar o material sozinho É assim que trabalhamos para trazer seu laptop. Ok, nosso desenvolvedor, Malcolm, entrará arquivos do Figma e retirará as coisas de que precisa daqui. Ok, então isso é útil. Ok, você pode decidir G PNG e depois apertar o pequeno botão de download, muito mais autossuficiente. A outra coisa a observar é que, no momento, isso é chamado de open better. Portanto, é uma função que é usada. Todo mundo em figura pode usá-lo. Contas gratuitas, contas pagas, empresas. E eu sei que o plano está no futuro. Eu acho que é, é fazer disso uma conta exclusiva para profissionais, ok? Então, uma conta somente para pagamento. Então, a sua pode ser diferente se você estiver na conta gratuita no futuro e estiver assistindo isso de alguma forma, você pegou este vídeo, ok, ele não está atualizado E que o seu pode parecer um pouco diferente. Você pode ter uma versão reduzida. Seu modo Dev pode estar ativado apenas no modo Pro, ok? E você pode ter uma quantidade limitada de recursos de inspeção, mas no momento eles estão abertos a todos. Então, vamos lá. Modo de desenvolvimento, é muito legal. Apenas certifique-se de que, ao compartilhar seu link, você esteja nesse botão de alternância para ter certeza de obter o link certo para o desenvolvedor Tudo bem, é isso, última parte do vídeo e depois vamos seguir em frente. Bem, essa é a versão de atualização desaparecida. Continue com o vídeo. Aproveite. Na verdade, antes de ir, uma última coisa. Super importante, ok? Você precisa saber como colocar emojis nos nomes das suas páginas porque isso vai impressionar todo mundo, ok Então, em um Mac, você clica duas vezes aqui, tem o cursor piscando onde você quer seu emoji e você vai para a barra de espaço de controle de comando, ok E então você pode começar a decidir que tipo de coisas você quer lá Muito importante, encontre material apropriado para os diferentes nomes das páginas. Facilita a localização deles. Mais ou menos, é divertido usar emojis em um PC. Não sei por que é um pouco estranho. Eu pesquiso no Google e não está muito claro. Você só precisa pesquisar as palavras no Google. Adicione emoji às camadas de texto. É mais uma coisa genérica do Windows. Ok, Same Olmcutus, mas o Mac tem um atalho para isso . Mas ambas podem ser feitas. Você também pode adicionar esses emojis aqui embaixo. Eles podem estar em qualquer caixa de texto. Apenas certifique-se de que sua maldição esteja lançando dois deles. Tudo bem, vai ser isso. Muito importante, Mochis. Tudo bem, para o próximo vídeo. 109. Quais são os handoffs de próximo nível, conhecidos como sistemas de design: Olá a todos. Neste vídeo, vamos dar uma olhada rápida na outra extremidade do espectro. Se este fosse o nosso guia de design ou guia de estilo de baunilha, esta outra extremidade é um sistema de design completo. Vamos falar rapidamente sobre isso. O que é um sistema de design? Ele se usa um pouco vagamente. Eu considero isso um sistema de design onde você não está apenas descrevendo o que você faz, é por isso que você faz isso. Este aqui é Atlassian, é incrível como a UX é uma comunidade e um setor tão abertos. Se você veio de um design mais tradicional ou qualquer outra coisa, o público não consegue ver seu manual corporativo e todas as suas especificações, mas no UX, bem, acontece se você pensar em uma empresa que você admira, isso é naquela vida digital do Vale do Silício, você provavelmente ficará bem. Você pode pesquisar no Google o sistema de design deles. Acabei de pegar alguns. Este é o do Google, Atlassian, o da Apple, Shopify, muitas vezes eles lhes dão um nome, Polaris. Acho que o Adobe é o Spectrum, Mailchimp, e o que ele faz é incrível. São vários sites e irá apresentá-lo se você é novo na UX, o que você pode ser, algumas das coisas, eles falarão sobre cores, vamos dar uma olhada. Há cores aqui e fontes, mas ler essas coisas anteriores, sua missão, sua visão, de onde eles vieram, sua história, onde eles querem ir, ajudará você a entender por que é amarelo e por que eles têm um macaco masculino. Mas isso seria considerado como os outros fins completos de ser um sistema de design. Você pode estar trabalhando em uma empresa ou seja, você pode estar trabalhando a partir de uma. Esse pode ser seu primeiro trabalho se você for novo na UX, você pode acabar criando um. Obviamente, não é um trabalho pequeno, e obviamente é construído a partir de uma equipe enorme, mas é incrível se você é novo apenas para passar. Aprendi muito quando estava entrando no UX com esse design de material. A) eles têm artigos agora sobre seu design e o que estão fazendo, mas apenas rastejando e dando uma olhada em qual cor, seu sistema de cores, por que eles estão fazendo isso, acertando a linguagem também, falando sobre legibilidade e hierárquicas e todas as palavras que você precisa adicionar ao seu vocabulário como designer de UX. Eu acho que eu só quero deixar você com este curso foi isso, você fez um sistema de design. Agora há muito mais nisso, e para ser honesto, meus tipos de trabalho e os tipos de clientes e as coisas que faço, acabo nesta fase ou um pouco mais longe, mas não muito. Mesmo que você acabe aqui, é realmente importante explorar outros sistemas de design, juntar-se a grupos de encontros com outros designers de UX para garantir que, mesmo que você esteja neste mundo, que você entenda o mais completo imagem de sistemas de design e design UX. 110. Projeto do curso 21 - Termine seu design: Olá a todos. É o último projeto, Projeto 21. Eu sei. Havia alguns deles, mas espero que você os tenha achado úteis no fato de cimentar alguns dos conhecimentos que você aprendeu nos vídeos, fazendo sua própria coisa, o que é emocionante. O que eu quero que você faça é arrumar. Todos podem levar isso ao seu próprio nível. Você pode simplesmente gravar rapidamente uma versão para desktop perfeita e me enviar uma captura de do celular acabado e da versão de desktop acabada. Mas se você quiser levar um pouco mais longe, o que eu quero que você faça é ser bastante sistemático. Até agora, faça isso. Quero que você olhe para o seu resumo, olhe para sua persona, e diga, que páginas eu não preciso aqui? Que páginas estou perdendo da minha persona? Eu sinto isso ambientalmente. Essa coisa é algo que eu realmente não abordei. Fiz algumas coisas básicas. Usamos plásticos reciclados, mas sinto que essa pessoa vai precisar de mais profundidade. Provavelmente vou precisar de uma visão explodida de quando isso for clicado, leia mais para saber como os materiais são obtidos, como me aproximo da nossa cadeia de suprimentos e provavelmente até coisas como nossos valores como uma empresa, onde nós ficar, para onde estamos indo, algo assim provavelmente está faltando disso para abordar minha persona. Esses podem ser diferentes. Pode precisar de lista de ingredientes ou suporte pode ser produtos, ou pode ser necessário vídeos ou alguns depoimentos, resenhas, esse tipo de coisa. Apenas pense um pouco sobre o que você pode fazer. Você não precisa ir longe demais. Mas, embora empolgante seja um checkout, provavelmente não é. Faz parte do fluxo e é parte da minha tarefa definitivamente, mas não é algo que eu me sinto. Essas outras coisas que eu poderia fazer para essa persona em particular realmente se envolver aqui. Pense em uma ou duas páginas extras, isso seria incrível. Mas, novamente, opcional. Nem todo mundo vai ter tempo e capacidade para fazê-lo, mas as pessoas que fazem essas coisas que tornarão esse produto em particular mais significativo e um pouco de pasta de portfólio. Se você vai transformá-lo em algo para o seu portfólio, novamente, totalmente opcional, você pode procurar criar algo para um portfólio. Você pode ter um portfólio como colocá-lo lá. Adoraria vê-lo lá e zombar. Quando eu digo simulado, apenas seus wireframes, belas capturas de tela dispostas, mostre seu resumo, sua persona. Os wireframes podem ter seus projetos acabados. Quando você está saindo para o portfólio, você quer incluir não apenas seus projetos finais, mas aqui está o resumo, aqui estão minhas suposições desse resumo, e aqui estão meus wireframes que eu uso para testar minhas suposições. Aqui estão alguns aprendizados que obtive tanto testando os wireframes e podem ser uma versão final. Se você não fez nenhum teste, você pode tentar testar até mesmo seu design final, pode ser seu outro significativo, seus filhos, seus amigos. Você pode encontrar alguém em um de nossos grupos do Facebook para ajudar a fazer alguns testes. Liste o que você pensou que iria acontecer, quais foram os resultados, qualquer alteração que você fez e quaisquer conclusões finais. Quando você está descrevendo isso, não é um projeto real. Sei que o estudo de caso é uma boa maneira de colocar isso. Não diga que este não foi um projeto real. Mas um estudo de caso é uma boa maneira de explicar que era um exercício conduzido por instrutor ou pelo menos que não era um verdadeiro estudo de caso do cliente. Boa maneira de dizer isso. Agora não há nenhum perfeito. É assim que ele deve parecer. Vá e dê uma pequena olhada. Não demora muito para encontrar um design que você goste em termos de layout de um projeto UX. Faça uma pesquisa no Google por exemplos de portfólio de UX. Há muitos no Dribble e no Google e há muitas coisas por aí. Encontre algo que você acha que se encaixa com seu projeto e seu estilo. Você já pode ter um e apenas colocar isso. Eu adoraria vê-lo também. Pode ser apenas as capturas de tela de seus quadros móveis e desktop. Mas para outros que estão levando um pouco mais longe, eu adoraria vê-lo como uma peça de portfólio. Se você tiver dúvidas e é novo nisso, publique a peça do portfólio e diga: “Ei, isso é o que estou pensando em adicionar ao meu portfólio. O que está faltando? O que posso atualizar?” É ótimo obter feedback e superar aquela pequena síndrome do impostor que você inevitavelmente terá começado em um novo campo. Grupos do Facebook são incríveis para isso, assim como o grupo LinkedIn. Mas mesmo que você não queira feedback crítico, basta enviá-lo. Eu adoraria ver o que você realmente fez, que produto real você tem. Certifique-se de compartilhar o resumo que você usou e eu quero ver o que você acabou fazendo. É isso para nossos projetos. Vejo você no próximo vídeo. Vou vê-lo ao vivo, sair por trás da tela. Vejo você em um segundo. 111. 111 3rdp: Tudo bem, uau, você chegou até o fim. É um longo percurso. Parabéns, você está aqui. Eu estou aqui É muito incrível. Longo curso para fazer, longo curso para fazer. Nós dois devemos estar muito orgulhosos de nós mesmos. Eu quero abordar algumas pequenas coisas neste vídeo só para finalizar, o que você acha dele? É novo para mim. Voltei para atualizar este vídeo porque há uma nova atualização muito importante em termos do que você deve fazer a seguir. E esse é o meu curso avançado Figma. Então você acabou de terminar o Figma essentials. Figma advanced leva você de onde você está agora para levá-lo a um nível mais avançado Então, vai se basear em onde estamos agora e é o próximo passo perfeito para ir mais longe e todas as coisas que você deseja levar um pouco mais longe. Sim. Então, é avançado, mas é mais para levá-lo a avançar. Não pense que é só para pessoas avançadas, é para fazer de você uma pessoa avançada. Mas começa mais ou menos onde estamos agora. Então, se você se sentir confortável aqui, vá para Figma, que avança na próxima etapa E outros softwares, se você não gosta muito do Figma ou do Advanced, talvez algo assim sejam duas opções Está aprendendo um pouco de HTML e CSS. Ok, eu tenho algo chamado web essentials. Então, confira se você quiser fazer um pouco de introdução à codificação Se ainda não fez isso, isso realmente ajuda você a se conectar com os desenvolvedores e falar sobre a linguagem deles E a outra pode ser se você quiser ir para a raiz da web, mas não quiser fazer o código. Você quer usar o código. E eu criei recentemente um curso chamado Webflow essentials Então dê uma olhada nessa. Não é um código totalmente relacionado ao design, mas ainda assim à criação de sites Além disso, eles podem ser coisas de design que você deseja cobrir e que eu faço. Há muitos cursos de design que eu tenho. Há um Photoshop, Illustrator, InDesign e, depois de uma sala fixa do Premiere Pro Light, há um curso básico e avançado para todos eles Portanto, se houver algo em que você queira começar, atualize-se e vá mais longe. E esses são os cursos que você deve conferir. Essas são as pequenas atualizações, exceto que eu tenho uma cadeira nova. O que pode acontecer em um ano? Uma nova cadeira em uma impressora 3D. Você pode ver isso lá atrás. Óculos novos também. Essa é a atualização. Depois, muitas coisas, Apple Glasses. Voltarei ao animado curso anterior, Dan, para explicar todo o resto. Gostaria agradecer aos editores, Jason e Taylor, por todo o trabalho Produzir esta série de vídeos é muito trabalhoso para eles. Obrigada, pessoal. E também para Stephen Butler e seu alegre grupo de assistentes de ensino que estão ajudando você nos comentários Você provavelmente já sabe quem Stephen Butler e os TAs Então, obrigado a vocês também. nesta fase, gostaria de perguntar se você gostou do curso, faça uma boa avaliação. E provavelmente o mais importante é se você conseguir pensar em uma maneira de compartilhar esse curso com outras pessoas. De qualquer forma, que você possa pensar em k, isso me ajuda a crescer e me permite continuar fazendo isso. Portanto, há qualquer coisa que você possa fazer, compartilhar com seus colegas, amigos, pessoas, talvez você conheça seu círculo, que também seria muito útil. Você pode me seguir nas redes sociais , pois provavelmente já fez depois de todos os arquivos das aulas, estarão aqui. Sim. Esse é o lado direito. Essas são minhas mídias sociais E a outra coisa que você pode fazer é o YouTube. Eu tenho um canal no YouTube e há muitas coisas que não se transformam em cursos, apenas coisas de formato menor que estão no meu canal do YouTube. Vá se inscrever para isso, confira isso. A próxima coisa que quero falar sobre isso brevemente sobre o setor, como está evoluindo, a síndrome do impostor e o quão grande isso síndrome do impostor e o quão grande Ok, então o setor é, não é novo, mas é novo na forma como tem sido aplicado a muitos desses tipos até mesmo em pequenas empresas. Como se ninguém estivesse fazendo a experiência do usuário e das pequenas e médias empresas, e até mesmo das grandes empresas, era um sabor diferente Então, se você acha que as coisas estão mudando o tempo todo e você sente que, oh, eu não sei nada porque tudo continua se movendo. São coisas que, você sabe, cinco anos atrás eram assim, é assim que trabalhamos e a culpa de todo mundo por não fazer isso dessa maneira é como neste ano. Como a coisa que apontamos para ela e rimos e você gosta, lembra quando costumávamos fazer dessa maneira. Acho que isso acontece muito no design da experiência do usuário. Agora, em termos da síndrome do impostor, há algo como: Você já é designer de UX Não, eu não sou. Eu não passei na qualificação. Agora, eu lhe dou permissão, se você é novo neste setor, para se chamar de designer de UX a partir de hoje, designer de UX, designer de UX júnior, designer de UX ruim, designer UX muito inexperiente Isso é totalmente bom. Não há qualificação oficial. É como se tornar um Dr.; há muito pouca educação formal sobre design de UX. Há mais aparecendo. A maioria de nós, porém, é autodidata. E eu acho que se você está começando aos 16 ou começando aos 60 ou 80. Ok. Não importa que não haja uma linha igual para cruzar. É tudo uma questão de começar, decidir por si mesmo que sim, esse é um setor que eu adoro Eu quero entrar no meio disso. Estou só no começo. E há muito o que aprender e mal posso esperar. Então eu acho que essa é a mentalidade de que como pode ajudá-lo a superar isso e a síndrome pós-impostor Mas a síndrome do impostor é enorme. É enorme, como muitas pessoas com quem você fala têm. O medo não importa se você tem oito, 80 ou 42 anos. Ok. Ainda sinto que alguém virá pedir meus papéis e pedir meus papéis e me arrastou porque eu não sou um verdadeiro designer de UX Essa pausa estranha é porque quando você disse 40 a 42 Dan, você parece Isso é o que você queria dizer lá. Tudo bem, esse será o fim do curso. As piadas mortas acabaram. Espero que tenham gostado do curso. Eu realmente gostei de fazer isso. Espero que tenham gostado de vê-lo e espero vê-lo em outro curso em breve. Tchau pessoal, esconda