Design avançado de UI/UX no Figma: torne-se um profissional do Figma

1. Introdução ao curso avançado de Figma: Olá. Eu sou Dan Scott, e esse meu amigo, é o curso Figma Advanced Agora, este curso é voltado para pessoas que já fizeram meu curso Figma Essentials ou foram autodidatas. Você é muito bom. Mas você sabe que existem muitas outras ferramentas, dicas, truques, fluxos de trabalho e atualizações que você ainda não teve tempo de explorar Se isso soa como você, este curso é para você. Quem é esse cara? Eu sou Dan Scott. Sou designer de UX e instrutor de Figma. Ganhei vários prêmios de ensino e ajudei mais de 1 milhão de pessoas como você a se tornarem melhores designers. Então, não vamos apenas mover caixas por aqui. Na verdade, vamos construir algo. Você terá seu próprio projeto e personalidade exclusivos e, no final, terá um aplicativo completo pronto para ser inserido diretamente em seu portfólio Primeiro, usaremos a IA no co Figma para nos movermos rapidamente. Estou falando de eficiência real, do tipo que economiza horas, não minutos. Vamos nos aprofundar nos layouts automáticos e nas restrições, coisas que separam Você dominará componentes e variáveis de forma tão restrita que é impossível quebrá-los e atualizá-los facilmente Adicione impacto visual, efeitos, tipografia e microinterações que destacam seu design Mostrarei truques de fluxo de trabalho para gerenciar seus ativos, grades e estilos como um chefe absoluto, e mostrarei alguns dos hardwares que tornam você mais rápido e fazem você parecer sabe o que está fazendo quando as pessoas passam pela sua mesa Oh, olha isso. Você usará variáveis para criar modos claros e escuros, layouts compactos e confortáveis Vamos abordar animação, mascaramento e vídeo avançados. Tipo de coisa que a maioria dos designers de UX nem percebe que o Figma pode fazer Você aprenderá a executar testes de usuário melhores, protótipos com mais rapidez e criar coisas que pareçam reais Você entenderá a acessibilidade, a colaboração, desenvolverá uma transferência usando o Dvmode, a refatoração e as bibliotecas de equipe, como o Então você está pronto para se tornar um profissional da Figma? Se você se inscrever e se preparar para passar de Figma a super-herói Figma Ah. Não se preocupe Eu projeto super-heróis durante todo o curso. Percebi que, enquanto estou gravando, fiz a camiseta da maneira certa, e fiquei tipo, eu continuo ficando bagunçada, então eu faço isso durante todo o curso, ok Para tentar decifrá-lo e projetar super-heróis. Tão natural. Continue com o curso. 2. Primeiros passos — anúncios de figos: Tudo bem. Você conseguiu entrar. Bem-vindo. Parabéns. Você fez uma boa escolha. A primeira coisa que você vai fazer é baixar os arquivos de exercícios para este curso. Ok, haverá um link nesta página para baixá-los. Dentro dela, haverá uma folha de atalho. Vou examiná-los no curso, mas também haverá uma folha com eles , onde você pode imprimir e circular os que você realmente gosta e adicionar os que eu perdi. Coloque-o ao lado do seu computador. Parece tudo incrível. Eu falo rápido. Acho que falo rápido. Então você pode me atrasar. Há uma engrenagem no canto aqui onde você pode clicar nela e definir a velocidade com que eu falo Você pode me colocar no modo de bebida super lenta ou no modo hibunk ou me deixar assim, você decide Figma é nova e está mudando o tempo todo. Eles adoram mover as coisas. Então, se você está no curso e diz: H, isso não tem o mesmo nome, mas tem a mesma aparência. Provavelmente é o mesmo. Ou, se for movido, talvez seja necessário dar uma olhada para ver onde ele sumiu um pouco ou foi renomeado Veja os comentários deles, talvez eu tenha deixado um comentário. Se for fácil, se for uma grande mudança, vou regravar o curso. Mas há mudanças o tempo todo. Figman gosta de fazer isso conosco. Você faz esse curso com a versão gratuita? Você pode por um tempo. Muito do curso você pode fazer na versão gratuita. Isso não é problema. Existiremos algumas peças pagas. Então, se você não tem isso, você pode simplesmente acompanhar, você pode acabar decidindo: eu preciso da versão paga Mas sim, não é perda de tempo fazer isso com a versão gratuita do Figma Vou fazer o meu em um Mac com o software baixado. Você pode fazer isso no PC no navegador. Tudo parece e funciona da mesma forma. Alguns de vocês sairão do curso Figma Essentials, e alguns de vocês irão direto para este curso porque estão As pessoas que vêm do curso antigo, enquanto do curso antigo, do primeiro curso, do curso Essentials, descobrirão que há uma pequena sobreposição É quando chegamos a coisas mais complicadas que vamos nos esforçar ainda mais, as coisas ficam em ordem Vamos abordar rapidamente o que um all-out faz e como funciona, o que você já fez, ok? Apenas uma pequena recapitulação antes de prosseguirmos ainda mais Então, algumas vezes pensamos, Han, fizemos isso? Fiz um pouco disso, mas vamos ir mais longe neste curso, e quero que todos comecem do jeito certo. Você sabe o que eu quero dizer? Neste curso, há alguns níveis um e dois, como subsídio automático Há um nível um, nível dois. A razão pela qual eu faço isso é separá-los para que não fiquemos loucos e passemos a maior parte, é claro , olhando para essa única função, componentes ou uma variável ou algo assim Está bem? Então, eu meio que fiz um nível um em que fazemos tudo o que provavelmente usaremos muitas coisas do tipo. Vamos fazer uma pausa, fazer outras coisas para não enlouquecermos, mas também vamos encontrar algumas razões pelas quais: Ah, isso seria bom se pudéssemos fazer mais com o que aprendemos anteriormente Surpresa, nível dois. Onde passamos por isso e meio que expandimos isso. Então, você verá alguns níveis um e dois neste curso. É para isso que eles servem lá. Separe-os, para que não fiquemos entediados com a mesma coisa, mas também para que tenhamos a chance de trabalhar com ela e descobrir o motivo pelo qual buscamos ir ainda mais longe com esses recursos Por fim, você pode me seguir na Figma, ok? Há uma comunidade. Vá para figma.com slash AP BYOL, ok? E você não precisa, mas me siga até lá. É aí que vou postar os arquivos finais deste curso, ok? Se você está apenas começando, haverá os arquivos finalizados no curso. Você pode dar uma olhada nas coisas que eu fiz. Não é particularmente organizado, mas às vezes é útil ver os arquivos nos quais estou trabalhando, e você também pode dar uma olhada neles Tudo bem. É isso, meus amigos. Chega de falar. Vamos começar a fazer. Nos vemos no próximo vídeo, não é? 3. Seu resumo para o curso avançado de Figma: Olá. Antes de começarmos, vou dar a vocês cada resumo exclusivo para trabalhar no curso. Todos nós vamos criar um aplicativo de música. Vou te dar sua própria versão para que você não me copie e que todos tenha uma aparência diferente. Portanto, é bom para o seu portfólio porque é único. Então, se você acessar o projeto aleatório generator.com, é uma coisa malvada trazer seu laptop feito pela equipe e encontrar o Figma Advanced Clique nele no nome da sua vila ou cidade. Meu nome é Limerick, então vou dizer gerar Projeto. E eu tenho o que eu nem sei o que é Bluegrass. Mas essa vai ser a minha. Tente ficar com o que você recebeu. Isso meio que te empurra para fora da sua zona de conforto ou mostra que isso o torna mais um tipo de projeto intelectual em que você precisa pensar no usuário, ok? Bluegrass é algo que eu não conheço e preciso dar uma olhada rápida no gênero Que tipo de vibração ele tem Eu não sei Na verdade, eu não sei. Então, sim, o copo de cerveja Limerick, e o que ele também tem aqui é que ele oferece a marca para você Está bem? Vamos criar uma pequena micromarca. Não é uma aula de branding. Vamos usar apenas um chacal como logotipo, ok? Então, vamos encontrar fotos de chacais. Vamos encontrar um pequeno ícone para o logotipo, que todos sejam únicos. É daí que você o obtém. Não clique em Responder. Bem, o que é isso? Tente novamente. Está bem? Definitivamente, não bata três vezes. Apenas pegue. Faça uma captura de tela aqui, pois ela mostra exatamente o que estamos fazendo Realmente não importa muito agora, pegue-o, use um atalho ou baixe-o como PNG Então, o que eu vou fazer é trabalhar durante a aula. O seu vai ser diferente, mas parecido. Você entendeu. Tudo bem, próximo vídeo 4. Primeiro rascunho usando a IA no Figma: Olá a todos. Vamos começar o curso analisando um recurso chamado primeiro rascunho. Está bem? É orientado por IA. É uma ótima maneira de obter modelos e começar. É mais útil quando você tem mais algumas das habilidades deste curso para ir mais longe, mas quero mostrá-lo agora porque é incrível e uma ótima maneira de começar com projetos. Então, você pode ver aqui embaixo, eu tenho o prompt aberto e vou dizer que é um aplicativo básico. Crie uma página de checkout para um aplicativo de eventos musicais e pronto. Aí está. Foi transformada em uma página de checkout Eu posso brincar com os estilos e as fontes, mas é algo gerado do zero a partir do Figmas AI Vamos começar e analisar os prós e os contras e como fazer com que funcione para você. Também analisaremos o recurso de IA para interações com anúncios. Vamos. Tudo bem, então estou em um novo arquivo de design em branco. Estou em design. É isso que está na parte inferior aqui e eu vou para as ações Agora, este aqui é um recurso pago, então assista se você estiver usando o gratuito. É onde está? É chamado de First Draft. Você pode procurá-lo. Encontrei o meu aqui em Ferramentas de Design. Isso. O legal disso é que você pode dar algumas diretrizes como eu quero um aplicativo básico ou um wireframe Ele precisa de imagens ou não, site básico ou um wireframe de site Já vimos isso antes, alta fidelidade, baixa fidelidade. Vou criar um aplicativo e vou dizer que quero que seja um aplicativo de listagem de eventos. Para música, basta clicar em Make it. Afaste-se e veja os bots de IA fazerem a pequena coisa. Oh, isso foi rápido. Achei que talvez até tivéssemos que pular rápido. Ah, Coldplay. Taylor Swift, estou fora. É Sharon Billy Eilish. Não é minha música. Mas o que você pode ver aqui é que ele realmente criou esse aplicativo exclusivo para você. Ele está gerando essas imagens. Essas imagens são como se fosse um mecanismo de IA que as cria. É por isso que às vezes eles podem demorar um pouco e são meio brilhantes Mas, meu Deus, ele fez um aplicativo. Olha isso. Vamos. Vamos prototipá-lo. Vamos. Sim. Ok. E vamos dar uma olhada. Eu gosto disso. O que funciona? O que não é meio que simulado. Não faz muita coisa. Há muita interatividade. Você pode, no curso Essentials, dizer: Na verdade, vamos dar uma olhada em outra coisa. Vamos dar uma olhada nas cores. O que é isso? Essa é a primeira forma de cores. Você pode ver que pode passar e dizer: Oh, eu gosto desses. É uma ótima maneira de começar. E quando terminar este curso, o Avançado, você poderá adicionar toda a interatividade e todas as formas certas de lançá-lo para designs É como trabalhar com um modelo, exceto o modelo, que precisa ser muito personalizado. Ok, especialmente com coisas como as cores. Coisas como fazer mudanças também. Olha, você pode dizer, na verdade, cantos arredondados. Eu quero cantos super arredondados. Sem cantos arredondados. Vamos escolher o look quadrado. Está bem? O espaçamento, queremos abrir isso. É simplesmente muito legal. Que tipo de fonte você deseja usar? Está bem? Você pode resolver isso. Você também pode perguntar: você pode comprar uma caixa de heróis grande? A propósito, não sei se isso vai funcionar. Está bem? Mas você pode começar a solicitar que ele faça coisas. Provavelmente seria mais fácil para mim fazer muitas pequenas mudanças sozinho. Ok, porque foi feita uma versão disso. Não é o que eu tinha na minha cabeça, então essa vai ser a parte complicada Você pode se afastar e, às vezes, é fácil simplesmente fazer isso. Portanto, dê uma olhada em ativos. Está bem? Ele não tem ativos para este documento específico. Não há biblioteca, não há estilos para isso. Talvez isso mude quando você começar, mas agora ainda há muito trabalho a fazer, mas uma maneira muito legal de começar quando você tiver algumas habilidades. Você não pode simplesmente ser um designer de UX e pronto, tudo bem. Eu não aprendi nada sobre Figma. Só vou usar o prompt. Talvez isso seja possível no futuro. Acho que não, mas quero te mostrar isso aí. A outra coisa que eu queria mostrar a vocês no curso básico era, digamos que queremos criar outra página Vamos. Hum, e vamos selecionar tudo e excluí-lo. Nesta, voltaremos à nossa solicitação novamente e diremos onde obtivemos o primeiro rascunho, e eu vou dizer a listagem de eventos em detalhes. Veja ou soletre com a letra certa . Aqui vamos nós. Tudo bem, acabou e está. Oh, acabei de criar uma nova página em vez de tentar usar a que fiz para ela. Mas você pode ver aqui se ele usou as mesmas fontes? Então, olha Public Sands, e essa não é uma roupa, então vai ficar melhor Sabe, estou ansioso pelo momento que eu só precise de uma página realmente básica, como uma página Ts e Cs ou uma página de checkout que pareça realmente confiável, e que possa pegar as estrelas que você já tem e depois aplicá-las já tem e depois Isso provavelmente não está muito longe no futuro. No momento, é mais ou menos uma geração de ideias e você conserta e muda a partir de agora, tudo está diferente. Mas o que ele pode fazer é fazer essa parte aqui, entrar nas ações e dizer: eu gostaria de adicionar interações. Está bem? Entre você e você Adicione interações. Ok, e funcionou, ok? Então, adicione as pequenas interações mágicas. Então, vamos dar a ele um protótipo agora. Vamos começar com esse cara e ir direto ao prato. E vamos dar uma olhada. Nem me lembro qual botão era. Ah, sim, eu trabalhei. Está bem? E depois volte para casa. Tudo bem. Então, essas duas pequenas coisas podem ser poderosas, ok? E será melhor mais tarde. Mas eu só quero mostrar a vocês, no início do curso, o tipo de coisas novas que estão acontecendo com o Figma, e eu posso voltar e atualizar este vídeo no futuro Não está tomando nossos empregos, mas está reduzindo algumas das coisas que costumávamos fazer em termos de, tipo, tudo bem, eu me pergunto como seria uma boa forma Você pode começar a trabalhar com M no primeiro rascunho ou, como normal, voltar para a versão inicial do navegador, lembre-se, vá até o F e vá para o Início, que está no topo. Está bem? E você pode acessar os modelos. Existem muitos modelos disponíveis. É mais ou menos a maneira como estou usando no momento. Vai ficar melhor. Mas é novo, é sofisticado e será mais útil quando suas habilidades forem ainda mais práticas e você puder, tipo, pegar o que isso faz e fazer com que, você sabe, se conecte com estilos, layouts automáticos e variáveis Oh, vai ser divertido. Tudo bem, isso é tudo para o primeiro vídeo. O que você acha? Faça uma rodada de jogo com ele. Te vejo no próximo vídeo. 5. Efeito de vidro líquido no Figma: Oi, pessoal. Neste vídeo, vamos ver o vidro líquido da Apple. Está bem? É um efeito muito legal, e você pode ver aqui que faz parte da interface do usuário, mas também podemos fazer isso dentro do figment. Nós vamos fazer isso. Ele se move e você meio que pode ver através dele. É tudo vidrado e bom. Tudo bem, vamos começar . Tudo bem. Primeiro, abra um novo arquivo de design, usando a Nova guia, arquivo de design em qualquer lugar que você quiser. E dos seus arquivos de exercícios, quero que você traga apenas uma imagem. Pode ser qualquer coisa. Isso realmente não importa. Estou usando esse efeito de vidro líquido e gosto de arrastá-los do meu navegador desse jeito, só para endireitar o Mas você pode usar o Command Shift K, que é um atalho para trazer imagens, ou você pode ir até o retângulo e dizer: são imagens e dizer: são imagens Outra coisa que só para esclarecer é que há alguns modos diferentes na parte inferior aqui. A menos que eu diga, é esse do meio. Nós vamos trabalhar em. Insira a imagem . Eu perdi minha imagem. Você entra e vamos desenhar algo no topo. Agora, o efeito de vidro líquido só funciona em molduras, então você não pode usar a ferramenta retangular aqui para desenhá-lo Isso precisa ser feito com uma moldura. O F k, vamos desenhar R, grande botão antigo no meio aqui e vamos mantê-lo simples por enquanto. Vamos adicionar o efeito. Em Effex, eu o selecionei. É uma moldura. Eu posso apertar mais, e eu posso ir para Drop Shadow, e podemos entrar nesta. Vidro. Já é incrível. E o que podemos fazer é simplesmente movê-lo. Ah, é tão legal. Vamos fazer algumas pequenas coisas. Certifique-se de que eu tenha cantos arredondados. Para obter o máximo de cantos arredondados, basta colocá-lo em algo bem alto, como 1.000, e ele arredondará as bordas. Vou ampliar, vamos dar uma olhada nos diferentes efeitos da abertura do vidro. Se eu desmarcar, clico nele e, para abrir os efeitos, clico neste pequeno ícone aqui e abrirei esse backup A luz, onde a luz está atingindo ela? Depende de você. Quão brilhante é a luz? Você pode digitá-lo ou simplesmente clicar e segurar qualquer um desses ícones aqui. Isso. Vou deixar o meu aos 80, e então você pode simplesmente brincar com eles. Você vai ter uma ideia deles. Não há certo ou errado. O padrão é ótimo, mas você pode brincar com coisas como a profundidade e a espessura do vidro Oh, copo grande e borbulhante, pequena folha de vidro fina Se você está projetando para o sistema operacional Apple, pode verificar as especificações para ver exatamente o que ele precisa ser Provavelmente, será melhor ir para casa e usar os modelos. E então fazendo uma pesquisa aqui e digitando em vidro líquido A Apple chama isso de vidro líquido e a Figma chama apenas de efeito de vidro Provavelmente é melhor começar com um desses porque outra pessoa já usou o sistema de design da Apple. Oh, aí está lá. É o kit, comece com o kit. Mas para nós, vamos voltar a isso. Podemos contornar a refração e a profundidade porque não estamos limitados pelas especificações da Apple Um dos que é um pouco estranho é a dispersão, ok? Você pode ver um pouco mais quando está acima, digamos, de algum texto. Você pode ver as bordas aqui? É tudo cinza. Se eu escrever em dispersão, adicione algumas cores lá. Talvez seja melhor com um pouco de profundidade. Aí está. Você pode começar a ver o azul passar e um pouco de amarelo por aqui. Obviamente, a geada mostra o quão azul é. Eu gosto disso. O último é a luz. Consegue ver uma pequena lâmpada? Você pode arrastá-los. Dependendo de onde você deseja que a luz acenda. Nós já fazemos isso? Sim. Acho que sim. A única coisa que pode te surpreender é que isso precisa estar além do que está tentando dispersar É por isso que começamos com uma imagem apenas para facilitar as coisas no momento. Vamos fazer algo difícil no próximo vídeo. Efeito de vidro. Oh, é bom. Espero que minha voz tenha melhorado É hora da manhã e eu tenho minha primeira voz de café na metade Ao longo do curso, você poderá realmente dizer o que aconteceu quanto minha voz realmente começou a aparecer. Tudo bem. Próximo vídeo, Dan. 6. Trabalhando com layouts complexos no Figma: Oi, pessoal. Neste vídeo, vamos fazer desse vidro uma coisa pequena. Não é realmente o que estamos fazendo aqui. O que estamos fazendo aqui é que este é o curso avançado. Mas, às vezes, é muito difícil trabalhar com todas as vantagens avançadas . Vamos dar uma olhada nisso. Se eu quiser mover esse botão aqui, você pode ver que há saídas automáticas dentro de saídas automáticas dentro de saídas automáticas. É muito bom e estruturado, mas às vezes você só quer movê-lo e então Por que você está aí? Pare de ser tão complicado. Isso é o que vamos fazer neste vídeo. Vou mostrar como desativar ou trabalhar com alguns dos layouts complicados Estamos fazendo o curso avançado, mas às vezes ainda não estamos muito avançados. Estamos nos aproximando do avanço. Só preciso desligar algumas coisas ou pelo menos trabalhar dentro delas. Então, vamos começar e mostrar como trabalhar com layouts complexos. Vamos. R: Primeiro, você precisa abrir um arquivo. Há algumas maneiras de chegar até isso. Coloquei uma cópia nos arquivos de exercícios, para que você possa clicar duas vezes nesse arquivo de figo pontilhado e abri-lo. Siga as etapas de onde você deseja colocá-lo, provavelmente coloque-o em seus rascunhos e clique em Importar E então espere um segundo, e então ele dirá: você quer movê-lo para uma pasta publicada? Você não precisa entrar ou entrar em um projeto, basta clicar em Concluído e ele estará pronto para ser usado. A outra maneira de fazer isso, aí está agora. Posso clicar duas vezes nele e começar a trabalhar. A outra maneira de fazer isso é se você acessar tofgma.com slash em BYOL, você também encontrará os arquivos Seja qual for a forma que você quiser, você encontrará o Figma Advanced Haverá vários outros arquivos à medida que esse curso crescer. Você pode abri-los e dizer, abra no Figma, por favor, e eles abrirão no navegador Realmente não importa como você acessa esse arquivo, vou abri-lo no meu desktop porque sou da velha escola. Deveria estar em meus rascunhos, aonde vamos. E aí está. Tudo bem. Te dou esse porque é muito complicado. É e não é. Está bem? Isso foi criado no início do curso, quando eu estava usando o primeiro recurso de rascunho dentro do Figma Nem todo mundo tem acesso a isso porque faz parte do plano pago. Mas eu tenho o resultado final aqui para todos nós trabalharmos. O legal disso é que tudo tem layouts automáticos e é muito bem Então eu pego este e digo, eu quero comprar abaixo, entrega de comida. Eu posso simplesmente arrastá-lo para baixo e olhar, eles mudam porque estão em layouts automáticos Desfazer. Vamos entrar na camada de compras aqui e dizer, logo na parte superior, na inferior, na próxima. Eu posso simplesmente clicar no topo , apertar a seta para baixo. E você pode ver que ele se move lá dentro. Então, está tudo muito bem estruturado. Às vezes, porém, você entra e fica tipo, oh, mais alocações automáticas. Mou. Mais saídas. Mais layouts automáticos Existem tantas saídas automáticas, e as coisas ficam complicadas mesmo se você for avançado e ficar tipo, Ok, eu só quero mover esse botão Como eu vi no começo aqui, vou mover isso para cá. Vai entrar lá. Tudo bem. Agora é parte dessa saída automática. Não é. Eu só quero dizer Ah, está em todo lugar. Está bem? Pode ser complicado trabalhar com esse recurso, primeiro rascunho ou apenas arquivos de outras pessoas ou dizer que você acabou de entrar em uma grande empresa, eles têm um grande sistema de design e você fica tipo, cara, isso é muito difícil Eu só preciso fazer algo simples. Pare de ser tão inteligente. Então, o que você pode fazer, uma das coisas boas é selecionar a moldura principal, clicar com o botão direito nela e dizer: onde está? Saídas automáticas. Oh, mais opções de saída automática. Eles continuam movendo isso e renomeando. Dê uma olhada. Estará escondido aqui em algum lugar. Poderíamos dizer que remova o autolot, isso só funcionará para aquele quadro Queremos dizer, livre-se de todos os layouts automáticos e você descobrirá que eles são apenas molduras antigas Agora, as coisas estão um pouco mais fáceis. Um dos outros recursos úteis de trabalhar com saídas complexas é que há muitas camadas em andamento, é que há muitas camadas em andamento mas todas elas estão lá, o que é bom Às vezes, esse botão aqui. Eu só quero entrar. Faça isso, clique. Então, novamente, clique em. Clique, clique duas vezes. Finalmente encontrei essa coisa chamada Botão Grande, que tem algum texto nela. Ótimo. Quero retirá-lo. Vamos fazer com que seja de vidro porque vou mostrar mais sobre por exemplo, aquele efeito que fizemos anteriormente. Mas eu quero que esteja acima de tudo. Se eu começar a arrastá-lo, um dos padrões do Figma e uma das complicações de trabalhar com arquivos complexos é que ele vai para uma das complicações de trabalhar com arquivos complexos é que ele vai dentro desse contêiner, que faz parte do caixa de compras, ou você o coloca aqui e agora faz parte desse layout Ele deseja se encaixar automaticamente nesses quadros ou sair automaticamente , o que é legal na maioria das vezes. Mas diga que às vezes você só quer que ele vá para onde quiser. Você faz coisas assim. Vou voltar para onde estava, então você é igual a mim. Ok, achei o botão. Lá está ele, aqui embaixo . Vou arrastá-lo para fora. Eu vou dizer que você sai e coloca você talvez entre a barra inferior e o conteúdo principal, faça com que ele se levante e saia. Então ele está fora, ok? Então, ele está no topo de tudo. Mas assim que eu começo a arrastá-lo, ele mergulha de volta em algo Então ele está acima de tudo agora. Posso fechar tudo isso só para deixar tudo um pouco mais limpo. Então, eu fechei tudo . Minhas barras inferiores estão lá. Eu realmente não preciso disso no momento. E aí está meu botão principal grande. E, novamente, lembre-se, se eu o arrastar , ele entra em alguma coisa. O que eu posso fazer é clicar nele, ok? Antes de começar a arrastar, cliquei com o mouse para baixo, segure a barra de espaço Depois, você pode simplesmente arrastá-lo para qualquer lugar que quiser. Ele não vai errar. Eu realmente não consigo apontar para as camadas ali, mas ele não vai se mover das camadas, e eu posso colocá-lo onde eu quiser. Eu posso dizer que você vai lá agora. Veja, ele não pulou dentro de nenhuma outra camada. Acho que essas duas coisas são as mais importantes quando se trata de trabalhar com arquivos complexos de outras pessoas ou usar alguns dos arquivos gerados automaticamente. Os modelos são simplesmente acessar os layouts automáticos, removê-los e, quando você começa a arrastar coisas, clique em Manter, segure o espaço B mova-as Então ele não pulará camadas. Legal. É isso mesmo. Agora, o que eu quero fazer é fazer o que mostrei no início, onde tínhamos o botão de vidro e ele estava se movendo. Então, vamos fazer isso juntos. Algumas coisas que preciso fazer é que meus botões fiquem aqui em cima. O que eu poderia fazer é bloquear essas camadas para não precisar segurar a barra de espaço. Eu posso simplesmente arrastá-lo. Não há para onde ele possa ir, algumas coisas que eu preciso fazer é vamos pré-visualizá-lo agora Então, vou clicar no aplicativo. Eu vou dizer, vamos abrir a prévia, então isso é espaço de mudança, e ele deve ficar aberto lá, ok? Você verá que se eu rolar para cima e para baixo, está funcionando. Se o seu não estiver funcionando assim, o que você pode fazer é clicar na parte externa, ir para o protótipo Na verdade, vamos clicar no plano de fundo e eu vou dizer, certifique-se de que não tenha nada selecionado. Nas configurações do protótipo, vou usar este aqui, o iPhone 16, e tudo bem. Você pode usar o que quiser. Acabou minha prévia novamente e continua funcionando. Se isso não funcionar, às vezes você tem que entrar aqui e dizer, na verdade, comportamento de rolagem. Eu quero rolar verticalmente para que ele realmente comece a rolar Mas, novamente, estamos todos bem. O que eu quero fazer é que isso fique no fundo. Como eu faço isso? Porque eu o selecionei e pego esse botão aqui e digo, na verdade, quero que você fique alinhado com a parte inferior disso No momento, está restrito ao topo. Restrito ao topo, o que provavelmente funcionará. Eu vou dizer que estou em um protótipo. O que posso dizer é que quero você se posicione para rolar como pai Não, eu quero que você fique no lugar. Eu posso prototipá-lo. Agora, quando eu rolo, você consegue ver as estacas no lugar? Então, vamos torná-los todos vidrados. Vamos clicar nele. Vamos ao design. Vamos descer para afixar. Agora lembre-se de que isso deve ser uma moldura para que isso funcione. Eu não posso ser um retângulo. Vou pegar uma sombra projetada, vou pegar um copo. Oh, eu gosto disso. Eu vou aumentar a profundidade. A geada está quase perfeita. Tudo parece bom por padrão. faça a refração deslizante para cima e para baixo. Olha isso. Isso é legal. Tudo bem. Agora vamos pré-visualizar novamente e rolá-los para cima e para baixo e ele faz a coisa mais legal e vidrada, mas permanece onde deveria estar Agora, como faço para que ele se alinhe na parte inferior? Vamos fechar isso. Vamos. Preciso descobrir onde está o fundo. Se eu clicar em desligar e for para o protótipo, posso ver que o iPhone 16 é, o que é? 393 por 852. Posso clicar em você e dizer que, na verdade, no design, o tamanho dessa moldura deve ser 393 por 852, 92 Foi há apenas um segundo. Não consigo me lembrar. Vamos adivinhar 852. Vá lá, Brain. Você pode ver isso? É o conteúdo do clipe. Você pode ligar e desligar isso. A menos que eu saiba onde está o fundo agora, então posso dizer que você estará aqui embaixo. Eu poderia segurar a tecla Shift para que ela não entrasse em todos os quadros diferentes. Mas lembre-se, eu bloqueio essas camadas, então não é um grande problema. Agora ele está restrito ao topo para aquela linha pontilhada. Posso dizer que você está restrito ao fundo porque agora temos um fundo ao qual ele pode se restringir, realmente não importa Mude a barra de espaço e veja como estamos fazendo coisas legais com efeitos vítreos em designs realmente complicados Está bem? O pai, clique com o botão direito do mouse, acesse mais opções de layout e remova todos os layouts automáticos Quando estiver se arrastando, segure a tecla Shift para o seu dragão. Ele não mergulhará em todas as diferentes molduras e layouts automáticos e adicionará um efeito de vidro doce Você pode ver que o meu tem uma coloração vermelha, que vem disso, meu preenchimento, que foi diminuído, você pode voltar a ficar branco para obter aquele efeito vítreo mais tradicional Talvez um pouco de azul. Tudo bem. Espero que tenha sido útil. Falamos sobre algumas coisas que aprendemos no curso Essentials, como restrições, como brincar com a prototipagem e garantir que pudéssemos colocar nosso pequeno protótipo em um iPhone, e garantir que pudéssemos nosso pequeno protótipo em um iPhone R: Nos vemos no próximo vídeo. 7. Textura, ruído e ordem do efeito: Oi, pessoal. Vamos dar uma olhada em alguns efeitos interessantes. Um deles é que esse ruído que aplicamos à imagem de fundo dá a ela uma aparência antiga. A outra é essa, essa textura para que possamos obter esse efeito de vidro muito legal. Como se estivéssemos espiando pela janela do banheiro do trailer Olha como parece legal. Oh, incrível. Vamos começar e aprender a textura, ruído e alguns dos efeitos que a ordem das camadas tem sobre esses efeitos. Vamos começar. Para começar, você pode ter qualquer imagem. usaremos o efeito de vidro para esse efeito de textura e ruído. Mas se você quiser acompanhar exatamente, há um efeito no DotFig em seus arquivos de exercícios Você pode abrir isso no Figma, ou você pode me encontrar como membro em figma.com slash at BYOL, e você pode abrir esse arquivo e abrir sua própria versão OK. Então eu tenho esse botão, ok? Ele tem o efeito de vidro aplicado a ele. Está bem? É efeito, e eu adicionei vidro. Os outros novos efeitos, se eu pressionar mais, você pode ter mais de um efeito aplicado a um objeto. Está bem? E eu posso dizer, eu não quero deixar a sombra cair, o que é legal, ok? Eu gosto da sombra projetada, mas vou usar a que diz textura, ok? E você pode ver, vamos ampliar um pouco. O que está acontecendo com ele? Vamos aumentar o volume imediatamente. Está bem? A textura é como vidro fosco, ok? E é isso que ele faz. Ok, chega a esse tipo de covinha, como quer que você chame Ok, você pode jogar essas duas configurações. Um pouco dos dois. A única coisa que parece um pouco estranha são as bordas Se eu abrir uma textura novamente, uma mistura de recortar a forma para que ela não saia dela e voltar para o vidro e brincar de onde vem a fonte de luz e girá-la o vidro e brincar de onde vem a fonte de luz e para cima e Depende de cada instância. Não há um número especial. Mas é muito legal. Uma coisa que você pode fazer é dar uma olhada. Effex, vamos adicionar um terceiro. Vamos ver o texto, desculpe, barulho. Barulho, você pode ver, adicione um pouco de ruído. Nesse caso, é interessante. Eu quero mostrar aqui porque o barulho é interessante. Você pode brincar com apenas uma cor dupla monocromática. Há dois deles, e o multicolorido funcionará com todos os tipos que você pode ver aqui, o ruído é de várias cores diferentes Portanto, dá um efeito verde à moda antiga. A razão pela qual eu quero te mostrar isso é que vou aumentar o tamanho do ruído, só para que você possa vê-lo Você pode brincar com alguns efeitos, você pode brincar com a ordem. No momento em que está fazendo ruído e depois textura, você pode dizer que, na verdade, arrastando essa pequena área estranha até aqui com algumas mãos, você pode vê-la e arrastá-la para cima e para cima, como camadas Ele vai fazer a textura primeiro e depois o ruído. Você pode descobrir que não consegue obter o efeito desejado. Você está tentando copiar o de outra pessoa. É porque essa ordem existe de maneiras diferentes. vidro, neste caso, não parece fazer nenhuma diferença do jeito que está. Mas alguns deles têm. Provavelmente, o melhor ruído é para algo como esta imagem retrô Eu posso ver você, meu amigo, ter um efeito e vai ser o barulho. Vou ampliar um pouco e você pode começar a ver que dá uma atmosfera retrô escolar Desligue, ligue, desligue, você entendeu. Uma das coisas sobre essa configuração em que ativamos a textura que vou desligar o ruído. Vou excluí-lo pressionando o sinal de menos. Gosto da textura. Não gosto muito do barulho, mas digamos que eu faça isso. Se eu quiser no momento, é uma moldura, digamos que eu queira colocar texto dentro dela. Vou pegar meu T para a ferramenta de digitação, clicar dentro e vou dizer, reserve agora, reserve. OK. Então, o que acontece? Você está fazendo isso para que o pai tenha a capa de textura, tudo dentro dela, infelizmente, também tem o efeito aplicado a ela. Se eu quiser fazer assim, não posso fazer carros sofisticados. O texto precisa estar dentro dele, tudo que eu preciso fazer é escrever o texto aqui fora dele. Reserve agora de volta para a ferramenta de movimentação e coloque-a por cima, não por dentro. Ok, uma coisa que eu não notei é que a imagem era uma moldura e agora os botões dentro dela. Como apliquei a imagem para ter um efeito nela, ela está se aplicando a tudo dentro dela. Você pode ver que meu texto ainda tem o efeito de ruído nele. Novamente, se eu não quisesse isso, eu teria que pegar esses dois caras e ir, você está fora de lá, e você está no topo. E eu escolhi uma fonte diferente. Aí está. Esse é o efeito de textura e ruído. Você só precisa saber, especialmente tudo dentro de uma figma, que muitas vezes você pode alterar a ordem das camadas dessas coisas Você pode fazer dois preenchimentos e depois brincar com vamos lá Eu posso decifrar isso imediatamente. Se estiver em cima, é muito diferente se estiver embaixo. Não é tão diferente, não é? Vamos aumentar isso. Se os brancos estão em cima ou os brancos abaixo, é muito diferente Todos eles têm isso e não está claro se você pode movê-los adiante. Aí está. Desfazer, desfazer, desfazer, criamos um botão legal Mas agora talvez eu precise me agrupar. Clique com o botão direito em Grupo. Yuk. Agora, eles se movem juntos. Excelente. Tudo bem, é isso. Nos vemos no próximo vídeo. Estou de volta porque queria te mostrar uma coisa. Eu estava me preparando para fazer a introdução deste curso. Então, para este vídeo, eu faço isso no final para que você possa ver o que fazemos. Eu só estava fazendo com que parecesse melhor porque eu estava tipo, algo um pouco sobre isso. E então eu fiquei tipo, Oh, eu tornei tudo melhor. Oh, eu deveria mostrar a eles. Ok, então eu selecionei essa coisa. Ok, então eu tenho o botão selecionado. Há algumas coisas acontecendo aqui. Então, resta esse pequeno preenchimento. Começou a vida em 100%. Quando você aplica o efeito de vidro, ele diminui automaticamente para 10%. Eu poderia me livrar disso, e isso meio que dá um efeito mais vítreo, eu gosto A outra coisa é uma pequena borda estranha ao redor que parece um pouco forte demais. Se eu entrar e clicar aqui, posso ver o vidro sob a textura, o raio Se eu virar isso para baixo ou para cima, você pode ver o que está fazendo aqui? De alguma forma, escolhi esse ponto realmente estranho em que é o mais horrível Você pode aumentá-lo e ele desaparece . Quando está muito baixo, ele desaparece. Para encontrar algo que funcione para você, obviamente você também pode brincar com o tamanho. Mas se você diminuir e brincar com um raio grande ou pequeno, eu não sei Eu estava tipo, isso é o que eu estava procurando, e minhas necessidades de texto. Sombra projetada. Isso não está tão embaçado Não cai até agora. Tudo bem. É isso mesmo. Agora podemos terminar o vídeo. Nos vemos na próxima? Olha como é legal. Ho. 8. Efeito de desfoque progressivo: Oi, todo mundo. Neste vídeo, veremos algo chamado Desfoque progressivo. É aqui que a cor se torna progressivamente mais embaçada. Você também pode fazer com imagens. É muito fácil e muito rápido, e faremos isso primeiro. No entanto, se você quiser ficar por aqui, vamos fazer isso um pouco mais longe neste tutorial, apenas para recapitular algumas das coisas boas que aprendemos anteriormente no curso básico para colocar todo mundo Existem alguns recursos pagos que usamos, alguns de IA. Vale a pena ficar por aqui se você é um pouco novato no Figma Só viemos aqui para fazer o desfoque progressivo, fazemos isso no início e depois passamos para o próximo Certo. É isso mesmo. Vamos entrar. Vamos desfocar progressivamente. Tudo bem, você notará que minha interface está escura. Pensei em te mostrar um pouco antes de começarmos . Eu troquei o meu à noite Você precisa abrir um arquivo, acessar o FK, acessar as preferências e, sob o tema, pode ir entre claro e escuro Agora é noite, e a luz é realmente muito clara no meu escritório, então eu meio que a desligo Lembre-se, arquivo aberto, tema de preferências escuro. Sem nada selecionado, você pode alterar a cor da sua página. Pode ser o padrão, ser branco, mas talvez você queira trabalhar com uma cor mais escura aqui Co. Vamos pegar o FK. Clique uma vez. Vamos pegar o iPhone 16. Eu gosto disso, o contraste do branco com o preto. Vamos trazer uma imagem. O Command Shift K é um que eu uso muito ou o arrasto para dentro. O problema de arrastá-la, se for uma imagem de alta resolução, é enorme O Command Shift K é um atalho muito bom. Vou trazer este 03, e vamos abrir. A razão pela qual faço isso dessa maneira é que posso clicar e arrastá-lo para obter um tamanho que eu queira aproximadamente esse tipo de tamanho. Agora vamos fazer com que seja um desfoque progressivo e, em seguida, faremos que pareça na introdução Tudo o que você precisa fazer é outro efeito aqui. Você pode ir da sombra projetada até a tecnologia e o desfoque de camadas. Aquele que queremos esconder aqui é progressivo. E o que você pode fazer é mesmo assim, é muito legal. Começa na parte superior, bem nítida, e você pode ver aqui embaixo, que está embaçada Você pode arrastar esses pequenos pontos. Então, da esquerda para a direita, você pode segurar a tecla shift e ela se encaixará em linhas retas Então você pode fazer coisas legais. Não precisa ser uma imagem. Posso pegar Fk na ferramenta de moldura, segurando a tecla Shift, é um quadrado, dar uma cor de preenchimento, qualquer cor de preenchimento antiga aqui, desde que seja verde, esverdeada Vá lá, verde, o aqua, aquele. Nós podemos fazer a mesma coisa. Oh, vamos fazer um atalho Vamos escolher o selecionado. Eu tenho um efeito. Eu posso clicar aqui e fica azul. Você pode ver essa área que usamos anteriormente para arrastá-la Você pode clicar nele, copiá-lo, clicar nele e clicar em Colar. Você pode copiar e colar estilos. E nós faremos isso. Vamos entrar e fazer isso um pouco mais, e isso faz uma coisa muito legal. Se você agarrar a ponta e arrastá-la para cima, verá que ela realmente fica embaçada. É um efeito muito legal. Eu não consigo usá-lo com muita frequência. Ele funciona em código. Vocês, desenvolvedores, vão se assustar um pouco por ter que aplicá-lo, mas é possível e razoavelmente fácil com CSS . Isso é desfoque progressivo. O que vamos fazer agora é estilizá-lo como antes. Há uma pequena recapitulação de algumas das coisas que aprendemos no curso Essentials, apenas para aquelas pessoas que precisam de uma recapitulação ou se você pula o curso Essentials porque já é muito bom porque já é muito Talvez você queira conferir o resto deste vídeo, caso tenha perdido algo. Eu quero manter isso. Parece legal. Parece ainda mais legal contra o pato. Adoro isso. O que eu quero fazer é fazer esse quadrado, então eu preciso fazer isso recortado O que eu vou fazer é preencher, que é a minha imagem. Eu vou para selecionado. Aí está o preenchimento. Vou clicar na imagem e vou até aqui, ela diz preenchimento, digamos, você não está preenchido, você está cortado, e então eu posso arrastar essa borda aqui Quão grande eu quero que seja? No momento, -16 16116 de altura, então vou fazer o meu 116 branco É um quadrado. Agora, isso está arrastando a borda. A borda disso é a colheita. Se você arrastar para qualquer lugar no meio, poderá movê-lo para dentro do recorte. Então, vou arrastar o meu para que fique bem no meio aqui. Vou clicar no fundo, e agora é um quadrado com essa coisa. Acho que quero brincar com a camada, a camada progressiva azul, e torná-la grande como fizemos nesta. Você pode ver que pode iniciá-lo em qualquer lugar. Pode estar aqui. Como se trata de uma lista genérica de gêneros, não de um artista real, talvez eu tenha que começar bem longe para dar a atmosfera do hip hop, mas não mostrar o artista de verdade Tudo bem, eu quero reduzi-lo. Sempre que eu dimensiono imagens, isso funciona, mas sempre que eu faço escala coisas, eu uso a ferramenta K. K no teclado para alternar da ferramenta de movimento para a ferramenta de escala apenas para dimensionar todos os efeitos e tudo mais. É um hábito muito bom de se ter. Provavelmente é assim que eu quero o meu. Isso é diminuir um pouco o zoom. Quero adicionar FK para isso porque quero uma caixinha para o gênero Coloque-o bem no topo. Escolha qualquer cor, desde que seja verde Você pode pegar o conta-gotas no teclado. Apenas pegue isso. Oh, é muito azul. Eu quero que seja um pouco mais verde. Ah, é isso mesmo. Vou digitar algum tipo de coisa. Então, digite dois, clique uma vez. Na verdade, vou acelerar isso porque você não precisa me ver digitar. Uma coisa que eu quero pausar e mostrar a vocês, que aceleramos muito pouco, é que eu realmente gosto de fontes, ok, que são como roboto, eu gosto porque tem uma Está bem? O condensado é muito útil quando você está tentando encaixar muitos tipos Você pode ver? Na verdade, você sabe, nessa outra fonte, você pode ver o quanto ela era mais branca Estava em uma fonte condensada, há muitas fontes condensadas. Você pode aqui simplesmente digitar , não roboto, digitar condensado para ver todos os diferentes tipos de fontes condensadas E alguns deles são supercondensados. Tipo, veja aquele aí, você vai conseguir caber muito mais. Há condensado e comprimido, comprimido comprimido é menor que condensado Não tenho certeza se não consigo me lembrar do idioma, mas C. O que estamos fazendo? Condensado, ok? E é só que, sim, você pode colocar mais texto em um espaço limitado, especialmente em um telefone, porque é uma proporção estranha É mais estreito do que alto, certo? Então, vamos desfazer. Então eu fiz minha coisa realmente acelerar novamente. Não aceleramos novamente. Gosto de usar a mesma fonte com pesos diferentes. Então, o robô ainda está condensado. Uma é a luz. Um é ousado, usando a hierarquia de tamanho. Menos importante, mais importante. Brincando com o peso, ok, leve e ousado. Novamente, você pode pular em frente se você já é muito bom com esse tipo de coisa, eu meio que não sei, adicionando alguns extras Na verdade, continue porque verdade, existem as coisas da IA. Ao redor da altura da linha e simplesmente arraste-a para a esquerda. Não é a altura da linha. Vou jogar com a altura da linha, selecionar tudo e a altura da linha, vou digitar -50. Demasiado. Vou digitar. Então você pode simplesmente digitar por cima. Eu posso digitar menos, na verdade, basta colocar 16. Vou segurar a tecla Shift e usar minha seta para cima só para encontrar algo. O que estamos fazendo 24 horas? Não estou segurando a seta Shift agora, estou apenas usando a seta para cima e para baixo apenas para obter a altura da linha onde eu quero que ela esteja. Algo parecido. Todas as dicas meio que fizemos no curso Essentials, mas, ei, vamos incluí-las aqui no início Ok, escape algumas vezes para sair da ferramenta de digitação. Vou clicar aqui. estar aqui, mais ou menos ali. Agora, o que eu quero fazer é fazer alguns desses, então vou diminuir o zoom. Eu vou pegar isso grande o suficiente? Shift zero no teclado será o automático para chegar a 100%. Está bem? Então segure a tecla Shift O para caber tudo na tela. O número dois é selecionar algo e ampliar tudo isso. Então, a mudança dois e a mudança zero no teclado vão para 100%. Eu gosto desse. Portanto, o tamanho da fonte provavelmente é grande o suficiente. Se eu quiser apenas pegar os dois e torná-los maiores, segure o membro da ferramenta K para escalar, vá e os dois ficarão um pouco maiores em termos de fontes. Para movê-lo de um lado para o outro. Tudo bem, vamos fazer algumas versões disso Então, vou selecionar tudo, pegar minha tecla de opção em um Mac. Oh ko PC para duplicá-lo, arraste-o diretamente para baixo. Eu vou ter um, dois, três, isso vai fazer o Ooh quatro, cinco Está bem? No momento, o que eu quero fazer é clicar nas próprias caixas? Vamos ver se podemos selecionar todas elas. Ok, agora, esse é um recurso pago. Todas essas coisas geralmente são C em ações. Está bem? Vamos descer até. Nosso primeiro chef, não. Vamos para. Reescreva isso. Clique nele e eu direi: O que eu quero que você faça? Eu quero que você acelere a digitação. Se eu for música, vamos ver se consigo fazer isso sem precisar selecionar uma gravata. Oh, eu posso. Está fazendo isso. Isso tirou todas as minhas outras coisas. Droga. Está bem? Não fazia isso quando eu o praticava. Então, vou ter que construir o meu de forma um pouco diferente. Erros, pessoal. Ok. Então, na verdade, provavelmente sempre será mais fácil se eu pegar você. Coloque isso aí, cole o texto. Eles estão em duas caixas de texto separadas. Diminua o zoom. Como meu espaçamento entre linhas é um pouco maior? Um pouco mais alto. Tudo bem Agora vamos fazer isso. Vamos pegar e descer até aqui. Estou segurando a tecla de opção em um PC e depois vou usar o Comando D. Eu disse isso antes ou o Controle D para duplicar o que acabamos de fazer Quantos eu tenho agora seis. Agora preciso selecionar tudo, apenas o texto. Eu só quero o hip hop, mas quero que ele mude o gênero da palavra. Com o selecionado, quero selecionar essa tecla de pressão e clicar nela para pegar a coisa toda, não, não, não, não, eu só quero pegar o texto dentro dela Vamos clicar nesse primeiro. Ok, esse cara aqui por Double click nele. Então, se você segurar Shift e sua tecla de comando ou Shift e Control, poderá clicar em você, em você e em você, você e em você. Então, todos eles selecionados. Agora eu posso reescrever Eu posso dizer que você reescreve isso. Eu quero que você diga Digitação rápida. Música de dramas. Estou escaneando , ele substituirá o meu primeiro. Isso diz hip hop. É, não é? Está tudo bem. Oh, nerd, faça mudanças Apenas para palavras. Muito tempo. É legal, hein? Muito bom para texto de espaço reservado Eu gosto disso. Provavelmente vou ter que escolher. Também é muito bom, porque você tem uma ideia de quanto tempo algumas das coisas vão Então você fica tipo, Oh, isso foi legal para o hip hop, mas tudo isso realmente precisa ter um tamanho de fonte menor, provavelmente 24 para poder encaixar tudo. Oh, fizemos muito nesse curso, hein? Viemos para o desfoque progressivo. Agora, você está usando IA. Você está aprendendo todos os tipos de atalhos legais. O curso avançado. É incrível. Está cheio de soul beats vibrações básicas e para grupos. Tudo bem, é isso. Nos vemos no próximo vídeo. 9. Projeto de aula 01 — Listas de gênero: Tudo bem. É a primeira vez dos projetos da turma. Portanto, os projetos de classe listados nos arquivos de exercícios em um PDF chamado Projetos de classe. Vou ficar mais ou menos assim. E esse é o primeiro. Quero que você crie uma moldura para celular. Basicamente, quero que você refaça o que fizemos no último tutorial Então essa coisa. Mas especificamente para seu resumo. O meu é hip hop de Limerick. Eu quero que você se concentre nisso e depois descubra quais são os subgêneros, como este, por exemplo Techno, você pode ter dub techno acid como industrial. Esses são todos os tipos de techno. Rock, há muitas subcategorias. Você realmente não conhece o gênero musical com o qual está trabalhando. Pesquise no Google. Aposto que você descobrirá que existem subcategorias que as compõem. Isso não é realmente o que importa aqui, quero que você experimente o desfoque progressivo Eu não me importo como você faz isso. Você pode fazer exatamente como eu fiz. Apenas brinque com ele. Eu não me importo como você faz isso. Se você tiver a conta profissional, presumo que neste curso você tenha a conta profissional. Se você não consegue continuar totalmente com isso. Não vou me desculpar toda vez dizendo que se você não tem, tente encontrar uma solução alternativa, porque ok Se você não pode fazer os recursos de IA reescrevendo isso, tudo bem. Você viu como funciona. Você pode usar o HGBT em vez disso, que é gratuito. Essa é a principal coisa que todo mundo tem, mas os recursos de IA, e alguns deles neste curso, são apenas profissionais. Mas se você os tiver, vá brincar com eles. Experimente reescrever isso, que foi quando fizemos o texto E eu fiz isso com as imagens também. Você pode selecionar uma delas e ir para as ações e criar uma imagem, ou você já pode selecionar uma imagem, ir até o preenchimento e dizer, criar uma imagem, você pode usar a IA para criar a imagem. Algo como Unsplash ou pixels, você encontrará muitas imagens gratuitas que você pode usar para preencher seu Eu era o projeto da turma, você precisa fazer isso. Definitivamente, faça o desfoque progressivo, brinque com os recursos e resultados da IA Quero que você faça uma captura de tela ou exporte sua imagem e a envie para os projetos da turma captura de tela em um Mac é Command Shift four e você pode arrastar uma caixa ao redor dela Você pode fazer algo semelhante em um Mac com tela de impressão. Acho que é assim que você faz. Eu sei que há outro atalho para PCs. Você provavelmente sabe o que é. Caso contrário, basta exportar a imagem. Eu posso escolher isso. Oh, eu ficaria muito bem. Oh, eu não pensei nisso. Se você foi apresentar e estava em um telefone, aprendi mais cedo como ativá-lo. Isso pareceria mais legal, faça uma captura de tela do que essa. Caso contrário, se você não tiver certeza de como fazer uma captura de tela, clique no quadro e vá até a exportação Quero exportar todo esse quadro, role para baixo novamente. Que tipo de tamanho? Com apenas um tamanho, e vou fazer um PNG, vou clicar em Exportar iPhone 16. Você vai. Você pode usar esse arquivo para fazer o upload para os projetos de classe do projeto de classe. Sim. Como todo mundo é único e é um projeto interessante, eu adoraria que você o compartilhasse nas redes sociais. Marque-me com a hashtag Figma Advanced para facilitar o agrupamento e a visualização de cursos específicos Mas certifique-se de que no Instagram, no grupo do Facebook, no Twitter, certifique-se de me marcar nesses identificadores aqui Qualquer que seja seu sabor normal, seu Instagram, LinkedIn ou TikToker, você decide, mas eu adoro Divirta-se principalmente de brincar com o desfoque progressivo. Você poderia ir um pouco mais longe e tornar isso muito mais legal em termos de página de gênero Estamos mantendo as coisas leves para aqueles que não têm muito tempo, mas se estiverem prontos para jogar, você pode tornar esta página um pouco mais agradável Se você não tem certeza sobre como fazer isso, o que eu faço para copiá-los? O que devo fazer? Você pode dar uma pequena olhada on-line para se inspirar. Um bom termo é algo como placa de interface do usuário. Vamos passar pela parte de trás em casa. Você pode ver os modelos, uma olhada para que eu possa listar. Mas realmente não funcionou. Você pode ver que algumas formas diferentes de cartas provavelmente são melhores. Cartões é o termo genérico para, tipo, qualquer coisa dentro de uma caixa, e você pode começar a ver algum tipo interessante de, talvez até mesmo, cartões especiais. Vamos fazer isso. Cartões de destaque ainda melhores, um pouco mais específicos, ok? E você pode ver algumas coisas como, Oh, eu poderia fazer isso com isso, algo na parte inferior, ok? Depende de você. Pode ser simples, pode ser complexo. Estou ansioso para ver o que você faz. Tudo bem, o projeto da turma acabou. Te vejo no próximo vídeo. 10. Salvar estilos de efeito e limpar estilos não usados: Oi, pessoal. Vamos transformar os efeitos que fizemos no último vídeo em um estilo para que possamos reutilizá-los e alterá-los todos de uma vez O que vai ser uniforme em perspectiva. Na verdade, a palavra é progressiva. Mas temos controle sobre todos eles e, em seguida, mostrarei como remover todas as bibliotecas de estilos que foram adicionadas ao seu arquivo, elas ficam um pouco confusas, estilos que você não pediu Em seguida, mostrarei como remover todos os estilos que você não pediu, que simplesmente aparecem em suas bibliotecas, e você fica tipo: De onde vêm eles? Vou te mostrar como eliminá-los, então só temos as coisas que criamos como estilos. Vamos começar. Tudo bem, então no último vídeo, fizemos alguns estilos. Eu fiz um casal. Eu também fiz algumas sombras. Vamos pegar esse desfoque progressivo. Você pode ver isso aqui. Foi aplicado aos meus painéis fixos. Esses quatro pequenos pontos são a forma como podemos criar e usar estilos Agora estamos fazendo isso para afixar. Podemos fazer isso para traçar e preencher qualquer coisa que tenha pequenos pontos Vou clicar no afixo e dizer que gostaria de adicionar um novo efeito inicial É diferente de atingir o ponto positivo aqui. Entramos nos pontos. Ouça mais e dizemos, vamos chamar esse, eu vou chamar esse de M. Eu vou chamar isso de 101 porque sou obrigado a criar outro e outro e preciso diferenciá-los Às vezes, coloco o nome do cliente na frente dele só para saber que essa é a versão do Drop Shadow estou usando para trazer um laptop ou qualquer empresa. Você também pode descrevê-lo aqui embaixo. Vamos clicar em Criar estilo. O legal disso é que podemos dizer que a novidade de desenhar o desfoque progressivo de membros do FK só funciona no quadro R. Não, isso é outra coisa. Esse é o efeito de vidro. Ok, então eu vou afixar aqui. Em vez de clicar em + e analisar e configurar tudo agora, posso simplesmente ir até os pequenos pontos abaixo do afixo e dizer Desfoque progressivo Aí está. Feito. Reutilizável. A outra coisa legal sobre definir estilos é que vamos aplicar esses estilos. Oh, eles já estão aplicados. Esse é um desfoque progressivo. Esse é chamado de desfoque progressivo de camada. Desfoque de camada, progressivo, não, esse aí está. Oh, eu criei o estilo a partir deste. Esses não se aplicaram. Então, vou aplicar todos esses. Vou dizer que gostaria de remover o efeito e não quero aplicar o efeito de camada aleatória. Quero adicionar o que eu criei chamado Desfoque progressivo. Tudo bem, agora eles estão todos conectados. O que eu gostaria de fazer é mudá-los todos de uma vez. Não selecionei nada. Absolutamente nada. Você pode ver aqui que, enquanto eu estiver no design, você pode estar preso ao Draw ou ao Dev. Ok, verifique se você está neste design. Em Design, você verá todos os estilos listados que você usou. O legal disso é que eu posso dizer, olha isso. Eu tenho algumas configurações aqui. Posso dizer que edite esse estilo. Posso entrar e dizer que gostaria que acabasse, na verdade, com o que será mais óbvio. Vamos usar o uniforme. Eu mudei para o uniforme e todos eles foram atualizados Essa é uma ótima maneira de controlar um documento muito grande. Crie um estilo e, em seguida, você poderá editá-lo sem selecionar nada e revisar seu estilo. Queria recapitular isso. Não fizemos isso no curso básico de efeitos, mas fizemos isso para muitas outras coisas Então, se você está pulando direto para o curso avançado, o que você encontrará é, digamos, o que isso, é uma cor que eu gosto, ok? Em vez de digitá-la toda vez, você pode acessar Estilos, fazer exatamente a mesma coisa, clique em plus, e essa será minha cor primária primária, e eu posso criar um estilo e começar a reutilizá-lo Quando desenho uma nova moldura, posso simplesmente entrar aqui, apertar o botão de estilos e pronto, temos a cor primária. É tudo o que fazemos para isso. A próxima coisa que quero mostrar é como remover algumas das bibliotecas padrão que oferecem sugestões de estilo, se você quiser limpá-las. Pode estar lá apenas por padrão. Pode estar lá porque você abriu o documento de outra pessoa, talvez um projeto maior, que você queira limpar. O que vou fazer é clicar neste. E se eu clicar no subafixo, vou, na verdade, não importa qual estilo escolhamos. Eu vou me abastecer. O que você verá é : você pode ver que há muitos outros aqui embaixo? Tipo, de onde eles vêm? Ok, você pode não ter nada, mas talvez já tenha essa lista gigante. Na verdade, eu só quero arrumar tudo. Você pode ir para todas as bibliotecas, você pode ir para aquelas que são creditadas neste arquivo. Vamos apenas arrumá-los. Você está mostrando apenas as que estão nesse arquivo, não todas as bibliotecas que você pode ter como parte do seu trabalho. Faremos bibliotecas especificamente mais tarde, mas é bom arrumar as coisas mais cedo Olha essa. Vamos quebrar o link para o estilo. Vamos entrar aqui. Ok, a mesma coisa aqui. Ok, meus estilos fex, tem todo tipo de coisa aqui. Então eu posso entrar na minha biblioteca e dizer, na verdade, eu não quero. Vou remover as bibliotecas e, a partir disso, disso, isso, voltar. Vou remover esse e esse. Essas são bibliotecas de equipe que foram compartilhadas comigo neste documento. Mais tarde, abordaremos as bibliotecas da equipe, mas às vezes você só quer arrumá-las e ir embora. E eu só tenho desfoque progressivo agora. Bom. Tudo bem, então isso é adicionar estilos de efeitos e apenas estilos em geral. Os benefícios deles significam que, uma vez aplicados, você pode aplicá-los com muita facilidade e, uma vez aplicados, editá-los todos de uma vez. Analisamos a eliminação todos os estilos conectados ao seu documento que você não solicitou Tudo isso é tudo. Nos vemos no próximo vídeo. 11. Dicas e truques de fluxo de trabalho: Todo mundo. Neste vídeo, veremos todas as dicas e truques que eu consigo imaginar. Vou colocar todos eles em um vídeo. Se você já é bom com dicas e truques, pode pular É um vídeo muito longo. Eu me sinto mal. Mas há muitas dicas e truques e um bônus para quem espera até o fim, vou te mostrar isso É um pequeno teclado que eu tenho para Figma e vou mostrar o que é útil para o Cool Mas é um bônus por ler todas as dicas e truques. Ou esse será o vídeo mais valioso do curso, ou talvez você não desista porque é muito longo. Bem, vamos começar. Bom discurso de vendas, Dan. Mary está de mãos atentas. Hora do vídeo. Tudo bem para começar, abra qualquer arquivo antigo. Vamos abrir algo bem complicado para provar todos os ótimos atalhos Em seus arquivos de exercícios, há um link aqui chamado Demonstração do fluxo de trabalho. Você pode abrir qualquer coisa. Eu realmente gosto desse arquivo. Está nos seus arquivos de exercícios. É chamado de Workflow 01. De qualquer forma, você estará aqui dentro da Figma. E aqui nas páginas, vamos ao design. Vamos direto ao assunto. Esse é o que eu gosto. Muito legal. O problema de começar com o arquivo de outra pessoa ou trabalhar para uma grande empresa é que às vezes pode ser muito complicado mudar qualquer coisa antiga, especialmente quando não há estilos. O que você pode fazer, porém, é que uma das mais fáceis é selecionar um monte de coisas aqui, em vez de brincar com um recheio, porque você selecionou coisas misturadas, obviamente você tem muitas coisas selecionadas O que você pode ver aqui em cores de seleção, se você tiver muitas opções selecionadas, pode haver uma pequena lista suspensa como esta. Mas você pode ver aqui, aqui estão todas as cores lá dentro. Aí está minha cor primária ou minha cor de destaque. Não sei exatamente como eles o chamaram. Na verdade, não tem nome. Tenho o número hexadecimal Então, podemos clicar aqui e dizer, na verdade, eu gostaria que você fosse. Ou azul. É apenas uma maneira muito rápida de trabalhar com muitos arquivos em vez de fazer a temida mudança, dica Clique nessa, segure a tecla Shift, segure aquela. Quem fez isso? Isso leva muito tempo. Outra muito útil é, vamos clicar nesta caixa aqui Estou muito afastado. Adoro o atalho Shift two. Isso ampliará o que você selecionou. Se você tiver uma coisinha selecionada, então se eu segurar o comando e clicar nesse pequeno ponto que salta dentro do grupo Vamos controlar em um PC, comandar em um Mac. Se eu mudar dois, não é realmente útil. Ok, então o Shift 1 é porque ele diminui o zoom para mostrar tudo Coloque dois diretamente na coisa que você selecionou. O deslocamento zero é 100%. Essa é muito boa. Mude um, dois e zero. Um é tudo no documento, dois é o que você selecionou e zero é 100%. Perfeito. Vamos clicar em. Digamos que temos isso aqui. Vamos clicar e segurar o Command no meu Mac, controlar meu PC. Só entra porque há um grupo dentro de um grupo dentro de um grupo dentro de um grupo, e você pode morrer por clicar duas vezes, ok Então você não tem nada selecionado. Basta manter pressionada a tecla Command ou Control. Clique sobre isso. Então você pode ir até Editar, ok? E há um Selecionar tudo com. Isso é muito útil. Você pode dizer, na verdade, que eu quero preencher Eu quero tudo que tenha as mesmas propriedades de texto. Está bem? E percorreu toda a página em que estamos. Eu diminuo um pouco o zoom. O que mais existe? São só aqueles caras. Mas isso significa que eu não preciso com a tecla Shift e clicar em todos eles. Eu posso dizer que, na verdade, vamos usar, eu não sei, Acme para este Oh, eu não gosto da Acme. Estou destruindo o trabalho desse homem Acho que ele está sendo apresentado. Lá está ele lá. JH Patel, você criou um modelo legal Obrigado por compartilhar. Tudo bem, outras dicas legais Desça e vamos pegar um desses botões. Vou clicar duas vezes à distância. Isso é um monte de coisas. É mais do que apenas texto, tem um preenchimento ao redor para que você possa editar e selecionar Há várias outras opções diferentes aqui. Não abordaremos todos eles, mas imagine se tiver uma sombra projetada, você pode examinar e escolher tudo que tenha o mesmo efeito. Vou fazer as mesmas propriedades. Ele escolheu todos os componentes que têm a mesma aparência. A propriedade é um pouco mais genérica. Tem a mesma cor de preenchimento mais o preenchimento e o raio do canto Acho que é isso para todo o documento. Experimente mais um. Vamos pegar o círculo aqui. Vamos editar, selecionar com e vamos preencher e você descobrirá que muitos desses documentos têm o mesmo preenchimento, semelhante ao que fizemos antes usando a cor selecionada. Vertical. Uma das coisas que me perguntam é: você vê como o JS dividiu tudo com essas páginas aqui. Vamos voltar para um dos nossos arquivos antigos. Vou voltar a esse que fizemos. Eu só tenho uma página. O que podemos fazer é dividir a página. Eu tenho esse. Este é o meu Hi Fi. Vamos acelerar isso. Ok, então eu vou ter uma página de componentes. Vai ser o melhor. Quero separá-lo do meu tipo de documento de trabalho. Então eu vou adicionar uma página, e tudo que você faz é a página três, para dividi-las. Você pode colocar os hífens como JSTe.Gosto segurar a tecla Shift e apertar o botão de sublinhado, e parece mais um divisor de página Se quiser ficar ainda mais sofisticado, você pode adicionar emojis a qualquer Digamos, componentes, você queira encontrar algo que realmente faça isso em dispositivos móveis aqui. Barra de espaço de comando de controle automático, ok? E isso vai aparecer. É um pequeno emoji, e você pode clicar duas vezes em qualquer um deles Então, vou digitar no celular, encontrar algo falso para celular. Isso é um celular? Sim. Ok, clique duas vezes nele e ele entrará em qualquer lugar onde você estiver com o cursor. Então você clica duas vezes. Oh, tenho dois deles. Ok, em um PC, faça cursor piscar aqui dentro, mantenha pressionada a tecla Windows e pressione, acho que é ponto ou ponto e vírgula, um desses dois acho que é ponto ou ponto e vírgula, um desses Isso não se parece em nada com um telefone. Você entendeu a ideia. E para componentes, você tem que colocar peças do quebra-cabeça. Aí está. Tudo bem. Ocultar a interface do usuário é útil. É comando e barra invertida, ou barra invertida de controle no PC Apenas o esconde enquanto você está trabalhando. Não muda nada. Você ainda pode trabalhar se conhecer seus atalhos Qualquer um desses atalhos mudou entre a gravação deste vídeo e o local em que você o está assistindo Dê uma olhada neste ponto de interrogação na parte inferior. Vá para os atalhos do teclado e dê uma olhada lá. Eles explicarão todos os diferentes atalhos. Eles são azuis se você os usou. Está bem? Eles são escuros se você não usou o atalho, ok? Aí está. Vou desligar minha interface porque, depois de desativá-la, ela se torna um pouco difícil de usar, mas você tem mais espaço, especialmente em um laptop Mas é aí que está o atalho mais incrível que já existiu Isso é chamado de ações rápidas. Está bem? É basicamente um atalho para acessar esse botão aqui Está bem? Então, vamos fechá-lo. Então, as ações rápidas. Vamos. O que eu mais uso é muito chato. Vou clicar com o comando ou controle na palavra Eu sou Jenny, no topo aqui, e vou usar minhas ações rápidas, que são Command K ou Control K em um PC Vou digitar um caso, ok? Caso contrário, esse menu leva uma eternidade para encontrar uma caixa. Mas você pode usá-lo para qualquer coisa. coisa em qualquer um dos menus, inclua esta barra de menu superior aqui, vou dizer Comando K e vou dizer girar 90 graus para a esquerda Não sei por que, mas está tudo lá. último, Command K, e vamos traduzi-lo também. Eu não sei Vamos para o português. Aí está. E feito e feito. Talvez nem todo mundo precise traduzir. Agora, porém, pode ser um recurso profissional, pense nisso. Mas, no caso, isso é gratuito para todos. Quem se lembra de como ativar a interface do usuário novamente? Isso mesmo. Barra invertida de comando ou controle. É aí que está se inclinando para trás. Barra para frente. Tudo bem. A próxima é uma atualização relativamente nova. Ok, eu vou clicar neste botão no topo aqui. É um componente de um mestre. Eu não sobrevivi, então não tenho ideia de onde está. Ou mencionei se havia um ótimo atalho, pronto? Atalho, alterne para frente e para trás. Qual é o atalho Está em um Mac. Você pressiona todos os botões. Comando, controle de opções. Todos os três no canto inferior esquerdo e pressione K. Em um PC, é um pouco diferente É Control Alt Shift K. Dê uma olhada no seu teclado? É difícil lembrar, mas se você estiver ajustando muitos componentes como eu, gostará do atalho e se acostumará Lembre-se de que haverá uma folha de atalho em seus arquivos de exercícios na qual colocarei tudo isso Eu adoro poder alternar para frente e para trás muito rápido. Algo mais? Tem outros componentes, este aqui. Você não é esse, são todos os botões mais K, alterne para frente e para trás Outra novidade é que você pode copiar e colar estilos agora. Nós criamos apenas alguns estilos aqui. Mas se você criou vários documentos gratuitos, pode consultá-los, copiá-los e selecionar vários. Eu não tenho vários. Faça várias, Dan. Espere aí. Sombra projetada, para que eu possa selecionar dois desses caras. Basta clicar na parte superior, segurar a tecla Shift, pegar a inferior, clicar com o botão direito nela e eu posso dizer copiar estilos, mover para outro documento, não selecionar nada e, seguida, clicar na pasta normal. Comande VN MAC Control V em um PC. Copiar e colar qualquer tipo de estilo. Agradável. Tudo bem. Vamos fazer um trabalho de campo super sofisticado. Vou voltar ao documento em que estava trabalhando. Não tenho ideia de onde está tudo. Oh, eu criei uma nova página. Lá vamos nós. Vamos dar uma olhada em todos os campos. Então, vamos começar com um título. Você os comeu? Tudo bem, então eu adicionei um pouco de texto. Todos esses campos são ajustáveis apenas clicando neles e usando a seta para cima. Gosto disso quando escolho fontes porque não tenho certeza do tamanho que estou fazendo aqui Estou apenas segurando a seta para cima ou a seta para baixo. Clique em qualquer um deles. Você poderia fazer isso com esse espaçamento entre letras também? Use a seta para cima ou para baixo. Você pode fazer isso para qualquer campo único. Isso aqui, essa posição aqui, digamos que X e Y, para cima e para baixo, a movem para a esquerda e para a direita. Se você quiser usar pedaços maiores, mantenha pressionada a tecla shift É um grande empurrão ou um grande empurrão, e ele aumentará em múltiplos Você pode ver aqui oito. Isso funciona para qualquer coisa. Rotação. Eu queria subir, ele não faz um oito, mas o turno de espera faz um. Basta segurar nada usando a tecla de seta e movê-lo em unidades. Mas se você segurar a tecla Shift, ela se moverá em um pedaço maior. Muitos de nós estão usando a grade de oito pontos. Então, quando estamos movendo as coisas ao longo da mesma posição, ela entra, vamos começar a descer 100 e clicar aqui, segurar a tecla Shift, você pode ver que está subindo em oito, descendo oito. Vamos adiar isso para que seja um pouco mais fácil para o editor. Desculpe, editor, e dizendo isso , vou diminuir o zoom imediatamente e vamos para as preferências. Vá para LitleF, vá para preferências e na parte inferior, aqui está algo chamado valor do empurrão Por padrão, é um. Isso é apenas usar ancinho ou oito. Isso se você mantiver o turno. Você pode alterá-lo de volta para dez. Esse foi o padrão por um tempo lá e em muitos outros programas. Eu gosto de oito porque é muito comum espaçar quatro. Celular e web. É o mesmo quando você não tem nada selecionado, sem usar nenhum dos campos, você pode clicar aqui e usar tecla Ara para movê-lo, mantenha pressionada a tecla Shift para ir em pedaços maiores Pedaços de oito pixels. Você também pode arrastar todos esses campos, especialmente aqueles em que eles têm o ícone. Você pode ver aqui, basta arrastar o ícone para a esquerda e para a direita em vez de usar o teclado. Você pode simplesmente arrastá-lo para frente e para trás. Se você é mais uma pessoa arrastadora. Alguns deles não têm ícones. Esse sim. Eu não tenho nenhuma altura de camada, então isso realmente não funciona. Cidade, basta arrastar isso para frente e para trás. Aqueles que não conseguem manter pressionada a opção KineMac em um PC e ainda arrastam, mesmo que não tenham um ícone Se você adora fazer esse tipo de coisa e não há nenhum ícone como este, basta pressionar a opção KineMaoky Uma das minhas coisas favoritas é virar de cabeça para baixo. Não. Vamos pegar Ike pela ferramenta de moldura. Digamos que você desenhe algo de um lado para o outro. Vamos dar uma olhada. Ok. Oh, você pode usá-los aqui também. Veja isso. Posso usar meu I'm on HSB. Depende de você o que você quer usar. Eu prefiro o HSB. Então, se eu quiser mudar com o brilho da saturação de matiz, o matiz que eu quero, vamos para É muito brilhante. Está no canto superior direito. Você pode simplesmente usar a seta para baixo. Você vê que desce, desce , menos brilhante, menos brilhante. Ganhe pedaços maiores se você segurar a tecla Shift. Em vez de tentar ir, tudo bem, digamos que esteja lá e você queira derrubá-lo, você pode simplesmente pegar este e colocá-lo direto para baixo, em vez de arrastar, diferenciar, seguir em frente, em linha reta A razão pela qual eu também quero fazer isso, quero mostrar a vocês o outro truque de campo é, digamos que eu precise dividi-lo em três partes, o que é complicado Meu cérebro não funciona assim. Vou encontrar a dimensão para que seja uma largura, perfeita. Você pode dividir por, que é a barra três Aí está. Agora eu tenho três caixas separadas, divididas por três. Aqui está. Você pode fazer todas as contas. Você pode dizer, na verdade, eu quero que isso seja justo, digamos que você queira colocar. Você quer encolhê-lo um pouco em cada lado. Você quer menos oito de cada lado. Então eu vou dizer -16, é um pouco menor agora. Oito pixels em cada lado. Dê a si mesmo uma pequena margem. Não consigo fazer coisas de rotação, fico confuso em 90 graus e 45 o tempo todo, como eu faço. Você pode dizer, certo, eu quero três, 60/4. Tudo bem, é 90, não 45. Tudo bem. Vamos falar sobre alguns dos símbolos difíceis de encontrar. Vou colá-los na tela aqui. Eles são chamados de símbolo inteligente, ok? Esses são os que estão lá no momento. Vou adicionar isso à planilha de atalho. Mas digamos que escolha um caminho aqui. Vou girar isso de volta onde está a 12 graus zero Acho que estou digitando aqui. Você precisa digitá-los em ordem e eles devem se parecer exatamente com a parte superior. Então, se eu usar colchete, C, KC inferior e outro colchete, ele instantaneamente me dará o símbolo Você pode ver como isso vai acontecer, R, vai acontecer e me dar a marca registrada Esses são úteis. Provavelmente, as que eu mais uso são o tipo de flechas Às vezes, é difícil encontrar na fonte e você pode ver que é apenas um traço e é maior do que, menor que, seja ela qual for A seta para baixo é estranha é VB. Aí está. É uma seta para baixo. A seta para cima é a tecla que nunca consigo encontrar no meu teclado. Por favor, espere. Aí está no meu teclado. Fim dos seis. O editor teria adiantado isso rapidamente , mas isso demorou muito Então, vou ter que segurar a tecla Shift e vou usar seis, seis e depois espaço. Você tem que colocá-lo um pouco depois, caso contrário, não funciona. E o último é o quadrado. Está bem? Só vamos embora. Colchetes, esquerdo e direito, espaço para a cabeça Oh, parece que tem que haver um espaço entre eles. Eu não uso esse, obviamente. Aí está. Então colchete, espaço, colchete de fechamento. Aí está. Apenas alguns dos símbolos inteligentes, ok, para todas as fontes. Na próxima, abreviando um componente, selecione tudo isso. Vou usar a Opção de Comando K em um Mac. Vamos controlar K em um PC. Vimos isso mais cedo Se eu começar a arrastar isso, ele realmente quer entrar nas coisas Você fica tipo, isso é legal, mas não entre nessa moldura. Não entre nesse componente. Lembre-se de clicar nele para começar a arrastá-lo, depois segurar a barra de espaço e movê-lo Você verá que não estará no painel de camadas , não tentará pular e fazer parte de outras camadas. Uma boa e fácil é que o Command one leve você de volta à sua pequena opção inicial, a menos que você esteja no navegador, então eu vou te levar de volta para a primeira guia do navegador que você abriu. Se você estiver dentro, ele funciona em um navegador, exceto que simplesmente pula para as diferentes guias Comande um, dois, três, quaisquer que sejam as guias abertas no seu navegador Chrome, Fiery ou o que você estiver usando dentro do Figma, o aplicativo faz algo semelhante Veja essas guias aqui em cima, eu posso usar o Comando um para a casa, o Comando dois para aquele documento, o Comando três Eu posso ir dois e três, dois e três. Ele está segurando Command or Control em um PC e basta alternar entre as diferentes guias que Você tem uma guia que indica que você está retirando componentes de uma biblioteca ou algum arquivo do qual precisa extrair o tempo todo Se você não quiser transformá-lo em uma guia, você pode clicar com o botão direito do mouse e dizer fixar essa guia. Você pode ver que lá em cima se torna um pequeno ícone, o torna menor e é mais difícil de fechar. Mas você pode fechá-lo. Isso também funciona no navegador. Você pode fixar abas. Isso é apenas um tipo normal de Chrome ou safári. Você pode soltá-los. Você também pode reordená-los clicando, segurando e arrastando-os Muitas vezes, eu os abro em ordens engraçadas. Você só quer que aquele de onde você está se retirando esteja na frente aqui Mesmo que não esteja fixado, você pode simplesmente arrastá-lo. Então, está no começo. Se você está trabalhando com os mesmos arquivos repetidamente e é difícil descobrir onde eles estão todas as vezes, você pensa que, nos meus últimos anos, digamos seja esse limeric techno, você pode adicioná-lo à barra lateral São favoritos. Clique aqui e você verá que está lá, Limeric techno Sempre que eu abro um documento, você tem alguns que estão lá e que você usa o tempo todo. Também não importa onde você esteja em seu projeto. Se estiver na tela inicial ou no navegador, acesse Continuar esquecendo no navegador agora, você pode ir para aquela que diz “Voltar aos arquivos Você volta para a tela inicial em vez de clicar na tela inicial. Vamos fechá-lo. Não importa onde você esteja. Veja esses três pequenos pontos. Eles são úteis, basta ter todos os seus arquivos fechados recentemente Em vez de ter que voltar ao recente. Não tenho certeza se isso é uma economia, mas aí está Outra é que, se você estiver trabalhando com arquivos muito grandes ou com um computador muito antigo, poderá descobrir o que realmente está fazendo com que ele funcione lentamente. Você tem que estar dentro do médico em questão. Isso pode estar um pouco lento e você pode ir para o F, descer para ver, e há um chamado uso de memória que aparece aqui. Você pode ver que está usando 2% da minha memória, o que não é muito, então está tudo bem. O seu pode estar chegando ao limite. E se for esse o caso, você pode clicar em Memória gerenciada e descobrir o que realmente está causando o problema. O conteúdo da página está fazendo a maior parte do trabalho e componentes importados de outros lugares estão fazendo um pouco disso, o que dá algumas dicas. Você também pode ativar isso. Eu digo que o conteúdo da página está indo muito mal. É de até 80% e tudo está um pouco lento. Você pode ver aqui, ele vai ativá-lo para cada camada. Você pode ver qual deles tem pequenos pontos aqui? Nenhuma das minhas camadas está fazendo nada Você pode ver essa moldura. Tem 0,2% e você pode descobrir o que pode estar causando seus problemas Muitas vezes, podem ser SVGs, arquivos muito complexos que você importou Você acabou de obtê-los de um site gratuito e acontece que eles são muito mal feitos. Aí está. Você pode ver a sugestão aqui. Você pode nivelar os SVGs. Ou pode significar que você precise retirar algumas páginas e criar duas e mais de um documento. Minhas máquinas estão funcionando bem, então vamos fechar isso. A última coisa antes de mostrar o teclado é que você pode arrastar esse painel para fora com frequência, especialmente quando você tem camadas meio complexas aqui. Você pode arrastar isso para fora para vê-los com um pouco mais de facilidade. OK. Mas também no painel Ativos, quando isso começar a ficar um pouco louco, vou dar uma olhada nos ativos desse arquivo. Não tenho muito, mas você pode começar a procurá-lo. Você pode começar a pesquisar por. Há um ícone aqui que eu sei como se chama porque eu o nomeei muito bem. É chamado de Exportar e você pode pesquisar aqui. E é esse aqui, é esse cara aqui. Funciona somente se você estiver nomeando todos os seus ativos. Você notará que neste componente, há muito frame 64, o que não é bom. Quando ficarem grandes, você pode entrar aqui e ajustar a filtragem, digamos, deixe-me mostrar as listas apenas para facilitar a descoberta de onde está tudo Essa pesquisa também funciona em arquivo. Você clica em Pesquisar e digamos que eu quero que as estrelas que eu sei estejam aqui. Lá estão todos eles. Eles estão em todo o meu documento. Mas eu posso configurá-los todos agora, ou posso clicar neles e dizer, vá até aqui. Mas eu posso começar a clicar em todas essas estrelas. Uau, muitas estrelas são usadas. Eu posso selecionar todos eles, excluí-los, removê-los. Eles estão todos lá embaixo. Quando suas camadas estão ficando muito longas, isso é fácil. Ou se você precisar encontrar, digamos, este aqui, eu posso pesquisar e encontrar o texto com o Wiz, então eu nem sei o que isso significa Não são. Você também pode pesquisar no painel do Laos. Tenho que lembrar de desligá-lo batendo na cruz. Caso contrário, vocês serão aqueles. O painel de páginas, ok, pode ser maior ou menor, ok. Por padrão, você obtém esse pequeno slot, o que pode ser um pouco complicado Às vezes, você também não quer ver todos eles . Então você pode diminuí-lo. Tudo bem, vamos dar uma olhada no teclado Figma legal. Tudo bem. Então é isso aqui. Está bem? Esse é o trabalho mais alto, ok Figma creator micro Acho que é assim que eles chamam isso. E tudo o que são são atalhos super incríveis Então você pode ver aqui, você pode programá-lo para fazer qualquer coisa, ok? Então, temos a rolagem. Ampliando, ok? E você tem atalhos automáticos para o componente de crédito, escale para, eu adoro Tudo bem, isso é componente. Você pode programá-los para fazer tudo. Eu não uso todos eles, mas é simplesmente útil. Ok, especialmente quando você usa figma o tempo todo para conectá-lo Também é uma bela obra de arte de mesa. Ele vem com vários botões diferentes. Ok, então você pode meio que fazer com que ele faça o que quiser. Agora, na verdade, nem todos vocês viram meu escritório, certo? Isso é o que parece. É você normalmente de frente para mim usando esta câmera. Está bem? Mas esse é meu escritório. Sim, umas três impressoras D e outras coisas. Sim, este é o escritório reformado acima, era apenas um pequeno quarto acima minha garagem que convertemos para isso. Saiu muito bem. Tudo bem, no computador. Tudo bem. Quero mostrar a vocês que o Figma one não está mais sendo feito. Foi uma espécie de promoção por tempo limitado com o Figma Eu perdi o lançamento inicial. Eles se esgotaram rapidamente. Comprei um no Ebay porque sou nerd e queria o oficial da Figma Mas na verdade é um teclado que essa empresa Wlouder dot cc fabrica. Pegue um cheque. O Micro criado pela Figma pode estar disponível, esgotado agora. Ok, mas eles têm apenas o micro criativo normal, que atualmente está esgotado. Mas voltaremos. Não foi no outro dia. Então, é exatamente a mesma coisa. Simplesmente não está nas cores Figma. De qualquer forma, você precisa dele para trabalhar na Figma? Não, são joias de mesa que eu realmente queria. Então, paguei mais do que custa ter o Figma oficial porque tenho medo de perder. Tudo bem. Essa foi longa. Nós abordamos muitos e muitos bons atalhos. Espero que tenham sido úteis. Vamos falar mais sobre o fluxo de trabalho no próximo vídeo. Obrigado por ficar por aqui 12. Como usar truques avançados para copiar, colar e selecionar no Figma?: Vamos voltar ao documento em que estávamos trabalhando anteriormente com nossos tipos de gêneros diferentes E o que eu quero que você faça é criar uma moldura com algum texto nela. Coloque o nome do seu tipo de aplicativo. Ok, o meu é Limerick Techno. Eu fiz uma versão clara e uma versão escura. Não há nada sofisticado nesses quadros com texto dentro deles Ok, então vamos fazer outro iPhone 16. Ok, então eu vou, vamos apenas duplicar este Vou clicar na moldura. É Command D em um Mac, Control D em um PC. Podemos obter uma cópia? O que podemos dizer é: vamos fazer a primeira seleção. Vamos clicar aqui e eu vou dizer que tem uma estranha aqui Surpreendentemente, uso muito. Vá para Editar. Isso não é muito complicado, então evitamos não usá-lo. Mas se formos editar e selecionarmos Inverse, que é Command Shift A em um Mac, Control Shift A em um PC, e ele simplesmente seleciona tudo menos isso, e você pode excluí-lo Não me pergunte por que, mas acabo usando muito isso. E a outra característica, provavelmente a mais importante, é : digamos que queremos tornar essa versão escura, queremos trocá-la. Poderíamos pegar isso, copiar e colocar aqui, colar, alinhar e remover tudo. O que é realmente bom é se você copiar isso, selecionar isso e há uma opção aqui em Editar e há uma que diz, cole para substituir. Há uma seleção colada sobre a seleção. Você pode colocá-lo por cima. O outro ainda está embaixo. Não sei por que você precisaria desse. Mas eu uso este, Edit paste to replace, que é Command Shift R em um Mac, control shift, R em um PC. Isso é muito útil, e fica útil. Digamos que eu use a estrela em todos os lugares do meu documento, mantendo pressionada a tecla de opção enquanto arrasto ou a tecla antiga em um PC para duplicá-la Ok, digamos, porém, que eu queira que isso o substitua, para eu possa copiá-lo e estou usando meu atalho de cópia normal, vou pegar você e segurar a tecla Shift e pegar você, e vou pegar você, você pode fazer exatamente a mesma coisa, colar para substituir Alguém conhece o atalho? Muitos atalhos, Dan. É Command Shift R ou Control Shift R em um PC. Ou vá até Editar, também está lá em cima. Eu apenas substituo todos esses . Isso pode ser útil. Cole para substituir. Agora, isso está um pouco raspando o fundo do barril Digamos que eu tenha essa estrela aqui e eu a copie e digamos que eu vá até aqui, pode ser texto, pode ser qualquer coisa. Você diminui o zoom e está trabalhando aqui na terra de ninguém. Deixe-me saber os comentários. Quem acaba trabalhando aqui por algum motivo. Se eu tivesse que colar, por padrão, ele colocava de volta onde estava, há dois deles, cima do outro e você fica tipo, um em cima do outro e você fica tipo, A, eu queria isso aqui e não há nenhuma maneira real de colocá-lo aqui além de colar e movê-lo Mas o que você pode fazer é dizer, aqui em cima, uma dessas pessoas, e você pode clicar com o botão direito e dizer, cole aqui, por favor. Aí está minha pequena estrela. Cerca de 10% de vocês diriam : Oh, isso parece bom. Para o resto de vocês, vamos seguir em frente. Na verdade, uma última coisa que eu queria te mostrar é que já fizemos isso antes. Só quero destacar que digo que tenho muitas molduras novas. Vou usar a ferramenta de moldura. Eu vou dizer, vamos me dar um desses. Vamos, Command DDD, eu tenho muitos deles. Se eu quiser isso em todos eles, posso dizer, copiar, clicar em você, segurar a tecla Shift e pegar todos os nomes dos quadros e depois clicar na pasta antiga normal. Ele o colocará de volta na posição na moldura de uma só vez, como uma pasta múltipla. Não há nada de especial que você precise fazer. Basta copiar e colar, mas selecione várias coisas ao colar. Incrível. Como foi isso? Deixe-me saber os comentários. Eu tornei a cópia e a colagem sensuais? Você provavelmente pulou logo no começo, de qualquer forma. Para aqueles que ficaram por aqui, obrigado. Me divertindo. Vamos para o próximo vídeo. 13. Dicas e truques de quadro para trabalhar com quadros do Figma de forma eficaz: Ali mesmo. Neste vídeo, aprenderemos todos os quadros, dicas e truques. Sim, um vídeo inteiro trabalhando com quadros. Eles são muito úteis. Vamos começar. Tudo bem, o primeiro não tem nada a ver com molduras. Veja este pequeno ícone aqui. Se suas molduras estiverem todas abertas, todas inclinadas para baixo, elas estão muito bagunçadas Ok, clique nisso. Todos eles se arrumam. E se quisermos dizer meu quadro número oito, basta clicar duas vezes no ícone aqui e eu vou direto para ele. Está bem? Você pode contornar este documento , desde que tenha nomeado seus quadros. Ok, é uma boa e fácil. Melhor ainda, porém, é assistir isso. Digamos que eu esteja aqui nesta primeira página. Eu deveria nomear minhas páginas melhor. Clique em entrar e entrar no seu teclado. Em, vamos apenas para o próximo quadro. Vou ampliar isso. Essa é apenas a maneira prática de trabalhar com documentos. Mude para cá, vamos voltar atrás. Não para seguir em frente. Isso é novembro, meu sotaque, e depois mude para novembro para voltar atrás Há outro que eu uso provavelmente mais. A tinta aumenta o zoom. Então, se eu diminuir o zoom e tirar a tinta, certo? Estou no próximo quadro, mas estou realmente ampliado. Está bem? A que eu mais gosto é a chave inicial e final. Nem todos os teclados o têm ou, às vezes, você precisa pressionar uma tecla especial para obtê-lo se estiver em um laptop, mas eu estou no meu teclado grande Você provavelmente pode ouvi-lo tocando. O lar está ao contrário e FIM está indo para frente, para frente e para trás Exatamente a mesma coisa, exceto que o zoom in e home mantêm o mesmo nível de zoom e apenas se movem junto com quadros diferentes Essa é boa. Você pode redimensionar uma moldura. Digamos que eu crie uma moldura aqui e ela tenha todo o meu Nav dentro dela Vou pegar todos vocês. Eu vou colocá-lo aqui. Eu não preciso desse. Havia uma estrela lá dentro, lá está você . Está ali em cima. Saudações, esta moldura é muito grande. O que você pode fazer é que há uma pequena opção aqui. Há um atalho. São todas as teclas mais R, não as use o suficiente, mas é uma ótima maneira de simplesmente embrulhar a moldura externa e alisá-la bem perto das coisas que estão dentro da Tudo bem. O próximo que fizemos antes, mas em um contexto diferente. Vamos inserir uma imagem em seus arquivos de exercícios, chamada Imagem de quatro. É um arquivo vetorial e vamos trazê-lo aqui. Você quer se aproximar da borda. Mas queremos ficar na parte de trás e simplesmente tirá-la e depois ela pular da moldura Você fica tipo, não, eu só quero que você pule do quadro O que você pode fazer é enquanto o arrasta, fizemos isso anteriormente, lembre-se de iniciar, clicar e segurar, segurar a barra de espaço e isso significa que você pode arrastá-lo até aqui Ainda está nesta moldura do iPhone 16. Você pode arrastá-lo e usá-lo apenas na borda aqui para impedir que ele salte para outros quadros e se transforme em componentes Já fazíamos isso antes, quando estávamos apenas arrastando coisas como a estrela, mas é útil quando você está tentando colocar as coisas no limite que deseja que estejam nesta moldura e não pular desse jeito Aí está. Vou empurrar o meu aqui. E eu vou enviá-lo para a parte de trás. O atalho para enviá-lo para trás são os colchetes É ao lado do PK. Vou mandar o meu para trás usando o primeiro dos colchetes. Tudo bem. Outra coisa interessante do enquadramento é ver tudo no modo de contorno. É Command Shift O ou Control Shift O em um PC. Ele mostrará tudo dividido em vetores. Isso pode ser muito útil especialmente com aquela estrela, lembre-se, ele estava apenas saindo, veja se eu diminuo o zoom Você pode ver, havia um cara lá, ele estava lá? Só um pouco mais fácil de ver do que isso. Estrela desaparecida, estrela ali. Ele era pequenino, minúsculo Se você veio, digamos, do Illustrator ou de qualquer outro programa de desenho vetorial, você o usa bastante Especialmente quando você está desenhando e criando coisas com uma ferramenta de caneta. Acho que é útil para as molduras, especialmente quando as molduras talvez tenham cores semelhantes Você pode ver os contornos e simplesmente trabalhar nesse modo aqui Você pode fazer com que as coisas se encaixem um pouco mais facilmente porque você pode vê-las melhor. Se você vem do Illustrator, Adobe Illustrator , o comando Y ainda funciona. Eu não sei por quê. Se você está acostumado com isso. A invenção oficial é Command Shift O ou Control Shift O. Se alguns dos atalhos mudaram, eles Eles estão sempre tentando torná-los melhores. Eles nunca se apegam a eles. Você pode clicar no ponto de interrogação, acessar os atalhos do teclado e ver se, se Dan disse que sim, onde está o resumo do programa Sim, ainda é Command Shift O em um Mac. Talvez sejam apenas diferentes do que estou dizendo no PC, você os verá listados aqui. Azul significa que você os usou. Eu não usei os atalhos das réguas desde que reiniciei este documento, então ele é graduado Isso, meus amigos, são todas as minhas molduras, dicas e truques. Se você tiver alguns, eu adoraria incluir todos eles. Então, deixe-me saber nos comentários se você quiser, você não mencionou essa. Esse é um novo e legal. Para você, confira os comentários. Pode haver alguns novos legais lá dentro. É isso mesmo. Nos vemos no próximo vídeo. 14. Atualização automática do layout com soluções de problemas: Oi, todo mundo. Vamos revisar a auditoria para descobrir por que eles são bons, como funcionam e os componentes por que são bons e como funcionam Talvez você já saiba disso, então pode pular este vídeo O que faremos é fazer uma pequena revisão, agradável e rápida. E então eu vou passar anos. É por isso que este vídeo aborda há tanto tempo todos os problemas que as pessoas enfrentam, especialmente quando você é um pouco mais novo no Figma Se você ficar por aqui, faremos uma demonstração rápida e, em seguida, mostrarei as inúmeras maneiras pelas quais meus alunos se perdem e como contorná-los Se você sabe o que é um idiota e um componente e nunca teve realmente nenhum problema ou pelo menos sabe como corrigi-los, passe para as coisas novas Mas, por enquanto, vamos começar, colocar todo mundo na mesma página e começar a decifrar componentes e quebrar. Dentro. Tudo bem. Para começar, vamos trabalhar nesse projeto anterior, onde tínhamos nossos gêneros, vamos fazer algumas coisas para arrumar Vamos clicar duas vezes nome no topo aqui e dar um nome a ele. Está bem? O meu se chama Limerick Techno V one Está bem? E aqui em cima, temos o iPhone 16. O único problema que você deve ter notado é que, se você duplicá-lo, na parte superior selecionada, pressione Shift D. Ok, não shifty, desfaça Entrou no modo Inspetor. Vamos sair do modo de inspeção indo até aqui. Você pode fazer isso. Vou deixar isso no curso, se eu quiser que esse nome seja selecionado, e vamos usar o Comando D para duplicar Você notará aqui que diz: Oh, olha, iPhone 17, nós fomos para o futuro. Não, é só tentar ser inteligente. Vai ser iPhone 16, 17. Se eu fizer isso de novo, o Comando D vai para 18. Vamos nos livrar disso. É útil, mas não para iPhone. Pode ser útil, mas não agora. Vamos chamar isso de gêneros. Agora vamos duplicá-lo Member Command ou Control D em um PC Vamos clicar duas vezes nesse e vamos chamar esse. Página inicial. Eu conheço o contrário. Vamos nos livrar de tudo isso. Vamos criar o Auto out. Também vou mudar a cor de fundo. Eu estava brincando conosco mais cedo para comer um pouco de branco. Tudo bem. Vamos fazer a versão rápida de um autolou. Vamos trazer alguns ícones. Vamos usar o Command Shift K para trazer muitas coisas. Eu vou dizer, todos vocês, vocês vão entrar, clicar em Abrir e eu vou clicar em Colar A. Vou movê-los para cá só para me dar um pouco de espaço Vou pegar minha ferramenta de balança, que é a ferramenta K, e quero que todas tenham uma altura de cerca de 32. Quando digo exatamente 32. Para ampliar um pouco. Vou arrastá-los para fora para que eu possa ver todos eles. Realmente não importa em que ordem eles estão no momento, selecione todos eles e diga, Shift A, você está em ordem. Diminua o zoom e comece. Vamos colocá-lo aqui. Vamos descer até o fundo. Eu vou dizer que, na verdade, vou arrastá-lo até aqui. Não quero que ele cresça. Estou na ferramenta de escala, é por isso. Vou usar a ferramenta V para voltar à ferramenta de seleção , não para escalá-la Eu vou arrastar você para lá, todo o lado, e vou fazer algumas coisas onde eu estava sentado. Eu o quero no meio e posso brincar com a lacuna entre eles. OK. E isso, meus amigos, é como fazer um Autolayout. O legal disso é que vamos transformá-lo em um componente. Portanto, é reutilizável Você pode clicar no botão aqui em cima ou usar o atalho, que é Command Option K em um Mac e Control Alt K em um PC. É um componente. Eu vou duplicar essa página inteira, Command or Control D. Esta página vai ser M. Em vez dessa moldura ser o iPhone 16, eu vou fazer o iPhone P max, o grande O legal disso é que, como é um layout automático, eu posso ver o Ju Doc e movê-lo para baixo, talvez eu brinque com o espaçamento ou a É muito fácil ser responsivo. A outra coisa legal é que posso te dizer, meu amigo, digamos que esta página inicial aqui As pessoas ainda não se conectaram, então não devem conseguir ver a opção de emissão de ingressos Eu posso clicar nele e dizer no meu arquivo abaixo das minhas camadas. Vamos dar uma olhada nesse cara e posso dizer que você é meu amigo. Qual deles eu quero o ingresso? Eu posso desligar o globo ocular. aqui, porém, posso dizer que Por aqui, porém, posso dizer que quero ver o globo ocular Oh, olhe para nós. Responsivo. Eu posso clicar aqui. Na verdade, essa é minha instância. Esses são os componentes principais. Sobre esse componente principal, posso dizer que, na verdade, quero que a pesquisa esteja aqui. Você pode ver que você contorna o pedido. Sejam os componentes, essas coisas estão ligadas, a lupa acabou aqui O ingresso está de volta. Esse é o poder do Auto Loos. Espero que seja uma boa atualização sobre saídas automáticas. Fizemos muito no curso básico e talvez você seja um usuário intermediário do Figma já seja um usuário intermediário do Figma e esteja indo direto para o Vamos analisar todos os problemas e como resolvê-los. Vou fazer isso porque, no que acabei de fazer, evitei inconscientemente muitos erros Mas eu sei que quando estou ensinando as pessoas, todas elas cometem os erros que poderiam ser você. Fique por aqui. Vamos analisar todos os problemas e soluções. Tudo bem, então eu meio que desfiz até voltar antes de colocar os ícones Então, vamos começar e nos deparar com todos os problemas. Então, quando eu trago meus ícones, há duas maneiras diferentes. Eu poderia usar o comando shift K e trazer todos eles para dentro, e isso meio que os coloca todos no topo, especialmente se eu clicar em colocar todos Eles estão todos lá, foi o que eu fiz na primeira parte da sutura e tudo funcionou Mas se você é como eu e faz muito dos seus arquivos de exercícios a partir de ícones, basta pegar todos eles e adicionar seus próprios efeitos sonoros e arrastá-los. Eles vêm de uma maneira diferente. Você diz: Sim, isso não é um problema, exceto quando todos são selecionados e você vai até o Kt para ver a escala e pode dizer, na verdade, eu quero que a altura seja 32. Você fica tipo, isso é perfeito, pronto. Na verdade, não acabou. O que você acabou fazendo é que todo esse grupo se tornou 32. Você vê? Toda essa altura é 32. Esse ícone de coração em particular tem apenas 15. Para contornar isso, é fácil. Você acabou de selecionar este e diz que tem 32 anos de altura. Isso me leva ao outro problema. É isso, vamos dar uma olhada nesse coração. Aqui está em uma moldura, o que é legal. Dentro daqui há um vetor. O que as pessoas podem fazer é clicar acidentalmente no vetor, não no quadro principal. Você pode ver que eles são diferentes? A moldura que está ao redor e a coisa que está dentro dela, se eu tiver a coisa dentro dela selecionada e eu disser, você tem uma altura de 32. Lo faz coisas estranhas. Consegue entender o que está acontecendo? Há uma moldura, mas o coração dentro dela foi dimensionado, mas não a moldura, então é como cortá-la É desfazer, desfazer. Esses podem ser problemas que as pessoas enfrentam acidentalmente. Você pode fazer isso no quadro aqui Você pode ver que eu coletei o vetor, não o quadro principal. Tudo bem. Resolva alguns problemas. Talvez você já tenha se deparado com eles A próxima é que às vezes as pessoas pegam SVGs como esse, e eu vou fazer uma pequena seleção sobre isso Notaremos que eu selecionei as partes internas de tudo isso. Observe os vetores, não o quadro principal. Se eu arrastar isso agora, veja, arrastando os vetores internos, não esses Você acaba com essas molduras deixadas sozinhas. É que o mundo não vai explodir se você tiver vetores próprios e tentar escalá-los. Isso é bom. Mas é muito comum e você tem muito mais flexibilidade se os vetores estiverem dentro dos quadros Apenas tenha cuidado ao selecionar, faça uma seleção muito grande, ela gira para fora e você pode ver que tenho tudo selecionado, ou você pode clicar com a tecla Shift nos nomes se puder ver os nomes. Posso pegar todas elas selecionadas ou, em seu painel de camadas aqui, posso clicar na tecla de cima pegar a de baixo. Isso realmente não importa. Se você está encontrando problemas e diz: “Isso é estranho”, é provável que você tenha selecionado o vetor e não o quadro Você acaba com um vetor sozinho e não tem ideia de para onde foi a moldura dele ou ele simplesmente não veio com uma. O arquivo que você herdou não o tinha, você pode simplesmente enquadrá-lo Você pode dizer “clique com o botão direito do mouse” e, digamos, “seleção de quadros”. Ele tem que incriminar agora. Excelente. Tudo bem. Vamos voltar para dentro. Tudo bem. E o que eu quero fazer é, acho que esses são os problemas por enquanto. Há mais por vir. O que eu vou fazer é fazer um truque sorrateiro. Em vez de fazer tudo separadamente, vou dizer que vocês estão alinhados um em cima do outro Lembre-se, não os arraste um sobre o outro. Se eu arrastá-lo, para onde ele vai? Ele vai entrar no coração. Você pode segurar a barra de espaço. Aprendemos isso antes que ficasse no topo. Mas é fácil pegar todos eles, uma grande seleção no topo, e você. Agora vou dizer que gostaria que a altura de todos esses caras fosse 32. Agradável. Certifique-se de que estou usando as dimensões das molduras, não a escala. Eu quero a balança aqui. Aros, 32. Vou fingir que adicionei isso de propósito, mas não, eu só estraguei tudo Agora, o próximo problema é que, quando convertemos isso para saída automática, você fica tipo, OK, legal, selecionou todos eles, fez a grande seleção, como disse Dan, e então você usou Shift A. Na versão anterior, todos se encaixavam bem Está bem? É porque eu estava fazendo coisas sabendo como evitar problemas como esse. Está bem? O padrão do Figma agora é que ele tenta pensar por você e faz um trabalho terrível no momento Isso pode funcionar. Se funcionar, você está pronto. Se isso não acontecer, e você tiver esse problema como esse, o que aconteceu foi que transformou essa coisa em saída automática, ok? Então, olha, é chamado de quadro dez. Vamos chamar isso de Nav forward slash, o que é esse Nav bottom OK. E dentro dela, vamos fechar tudo isso, só para deixá-la arrumada Você tem um quadro, que é um pequeno hash, outro quadro, pequeno hash Então você tem esse cara dentro de um pequeno alvo. Esses caras aqui estão ignorando a saída automática. Esse cara, ouvindo, o coração, lupa, ouvindo, e eles estão fluindo um ao lado do outro Esse aqui, o adolescente Moody, está te ignorando. Esse é esse pequeno ícone aqui. Você os verá em muitos documentos. Outras pessoas os farão. Tudo isso significa que ele ainda está dentro do Autolayout, mas não está fluindo como uma saída automática Por quê? Razões. Nós faremos isso mais tarde. Vamos ver algo chamado posicionamento absoluto. Mas no momento, você pode dizer que para de fazer isso, ok? Eu quero que você cresça, vá e pare de ser mal-humorado. Ao ignorar a saída automática, desligue-a. Olha, o bilhete agora flui. Só há mais uma pessoa, o usuário do ícone. Você não está mais nos ignorando. Tudo bem. Eles estão todos fluindo bem A outra coisa que pode acontecer é que, se você clicar no quadro, descobrirá que o Autolayout tem algo diferente que ele tenta adivinhar Você quer dizer horizontal? Na maioria das vezes , ele adivinha. Às vezes acontece, Dada, vamos voltar para a horizontal e diminuir o zoom. Acho que esses são os problemas que vamos enfrentar. Na verdade, uma coisa que precisamos fazer antes de prosseguirmos é pegar essa moldura e arrastá-la para fora. Vamos transformar os ícones que estão dentro dele em componentes. Por que fazemos isso? Porque o coração não queremos muitas cópias do coração. Queremos que um coração seja usado várias vezes para que possamos controlar. Então, vamos selecionar todos eles. Eu gostaria que todos vocês fossem componentes. Não quero transformá-los em um componente. Você consegue ver um componente gigante? Eu gostaria que todos eles aparecessem aqui, criassem vários componentes. Eu tenho um coração, uma lupa, um ingresso e um usuário. Vamos colocá-los em prática e explicar por que os componentes são tão bons. Você provavelmente já sabe. Vamos fazer isso descer até o fundo aqui. Vamos arrastar isso aqui para fora. Vamos fazer com que o alinhamento fique no centro e vamos arrastar a lacuna para cima Você pode colocar a lacuna como Auto, mas ela vai direto para a borda. Eu quero acabar com isso. Eu quero reduzir isso para 50. Na verdade, faça o centro de alinhamento. Se eu aumentar o zoom, você pode brincar com isso na prancheta Você pode ver se há uma lacuna que não está definida como Automática. Qualquer outro número, você pode arrastá-los para fora enquanto estiver aqui. Podemos definir isso como Automático e adicionar um pouco de preenchimento à esquerda e à direita, apenas para que seja o que devemos fazer? Vamos fazer 32. Vamos adicioná-lo ao documento maior. Vamos em frente. Vamos duplicá-los Command ou Control D. Você será o quadro do Pmax Então, é bonito e grande. O legal disso agora é que, como é um autolo, configuramos esse lindo espaçamento, Shi doc Você pode ver que o aumentamos para um dispositivo diferente e tudo flui bem Está bem? A razão pela qual criamos esses ícones, nosso componente, é para que possamos entrar nisso e dizer, certo. Esse é meu componente principal. Eu posso dizer que tem um pequeno ícone estranho aqui, não essa versão dele aqui embaixo Onde está ele? Clique duas vezes nele. Você vê o diamante, essa é a instância normal. Vamos até aqui. Se clicarmos duas vezes, clicarmos duas vezes, clicarmos duas vezes e começarmos a brincar com ele, vamos dar a ele algumas costeletas malucas De qualquer forma, essas não são costeletas loucas. Mas como você mexeu com o mestre, com o Zoom out ou com o componente principal, você pode ver que isso também se ajusta Se não os convertêssemos em vários componentes, isso não teria sido atualizado e teríamos que atualizá-lo novamente. Tudo bem, meus amigos, esse foi um vídeo longo, e espero que nos leve ao mesmo nível de compreensão sobre pedidos altos, por que os usamos, como criar um componente, por que os usamos e a infinidade de problemas que você pode encontrar sendo, sei lá ao mesmo nível de compreensão sobre pedidos altos, por que os usamos, como criar um componente, por que os usamos e a infinidade de problemas que você pode encontrar sendo, e a infinidade de problemas que você pode , bom o suficiente para usar o Figma, mas enfrentando muitos problemas. Espero que isso tenha resolvido alguns deles. Tudo bem, vamos falar sobre algumas coisas novas no próximo vídeo. 15. Sugira layout automático, substitua conteúdo, duplique e renomeie camadas (Ai): Um. Neste vídeo, abordaremos todos os incríveis recursos de IA do cyto Figma, sugerimos saída automática, substituição de conteúdo, duplicação, renomeação e Tão bom. Vamos pegar isso, que é só uma imagem e alguns textos. Não há nada de sofisticado nisso. Vamos copiar e clicar com o botão direito em mais camadas, sugerir autolou e bam, é Ele faz todas essas ótimas coisas de autolout sem precisar construí-las sozinho Em seguida, criaremos alguns deles, adicionaremos os dois em uma saída automática e, em seguida, pareceremos mágicos. Nós podemos duplicá-los. Mais magia. Podemos clicar aqui e dizer: vamos substituir o conteúdo lá. Vamos usar o padrão, preenchê-lo com algum conteúdo realista. Sente-se, relaxe. Ele refez tudo e sabe o que está fazendo Além disso, também faremos todas as imagens. Tudo bem. Na verdade, eu fiz todo o tutorial na introdução Há um pouco mais de detalhes do que isso. Tem um pouco. Então, vamos começar. Estou lutando contra os robôs de IA. Tudo bem, então eu criei um cartão aqui. É uma moldura dentro dessa moldura que está apenas uma imagem, alguns textos. Eles são todos meio que flutuando por aí. Ninguém está fazendo nada. Ok, então eu preciso usar o Auto Layout porque o que eu quero fazer é colocar outro documento e redimensioná-lo e fazer todo tipo de coisa onde eu vou, certo, o rock and roll precisa ser muito, muito longo Ele simplesmente digita sobre tudo. Não há nada responsivo nisso. Tudo o que preciso fazer é pegar a moldura dos pais. Se eu usar meu turno normal para ativar a saída automática. Isso não funciona. Vamos desfazer Um truque aqui é selecionar o pai, quadro 38, clicar com o botão direito do mouse nele, e há uma opção e aqui está escrito mais opções. Este aqui sugere Auto loud. Deve ser uma saída automática super incrível. Muito despretensioso Vamos clicar no botão e nada muda. Quão legal é isso? Nada mudou. Dê uma olhada. Minha moldura agora é um layout automático Dentro dela há uma imagem. Mas depois há outro quadro de layout automático. Eu emoldurei isso para mim. Então, está nesse tipo de moldura grande, e eu posso decidir agora que, na verdade, vamos trabalhar até que a imagem fique abaixo dela Ela reflui. Tudo são layouts automáticos aninhados. É muito empolgante. Podemos decidir aqui, porém, que o que temos? Há uma moldura, 40, quero que fique abaixo do texto ou arrasto o texto acima. Todos eles refluem, desfazem, desfazem, desfazem. Digamos rock 'n roll também. Digamos que eu digite esse toque muito longo e veja o que ele faz agora Se quebrar, criou esta caixa. É tão bom. É desfazer. Vamos ainda mais longe. No momento em que é muito difícil, lembre-se de que se chamava quadro 35. Ele apenas limpa os nomes dos quadros, mas você pode recuperá-los. Vocês podem dizer, todos vocês, eu posso clicar com o botão direito do mouse e usar a doce IA de renomear camadas Isso pode estar desativado se você estiver na versão gratuita, mas veja isso. Você pode digitá-los. Veja isso. Renomeie as camadas. Vai passar. Ele vai pensar sobre isso. Olha isso, digitando. É o futuro. Imagem da capa. Oh, eu até mudei isso. Olha, imagem da capa, informações da música. Não está certo. Tem o cabeçalho, o título, a data. Ah, descrição. As informações da música não são realmente informações da música. É mais um gênero. Ah, muito bom. Oh, fica melhor. Vamos pegá-lo. Vamos fazer uma cópia disso. Está bem? Eu não transformei isso em uma instância. Eu deveria, mas eu tenho duas molduras aqui agora. Vou selecionar os dois, colocá-los em modo automático. Só o normal. Dia do turno. Isso funciona. Não é muito complicado. Mas veja isso aparecer. Ooh. Ok, então é uma opção de duplicação sofisticada Você pode ver pequenos brilhos ao lado. Na verdade, vou primeiro arrastá-lo porque está ficando um pouco apertado lá dentro e vou torná-lo maior. Vamos diminuir o zoom, na verdade. Você tem que arrastá-lo longe o suficiente. Se você arrastar, não fará nada até chegar longe o suficiente para ter espaço suficiente para que todos apareçam lá. Está bem? Olha o que estamos fazendo. Ah, e fica ainda melhor. Vamos usar o recurso de IA chamado clique com o botão direito do mouse. Esse não é o recurso, mas há um aqui chamado carrinho, lembre-se. Vá lá, cérebro. Substitua o conteúdo. Não está lá, de jeito nenhum. Com ele selecionado, todo o quadro grande que você tem, entre aqui e vamos substituir o conteúdo. E você vê essa coisinha pré-preenchida? Diz, cheio de conteúdo realista, se você clicar. Isso é um aviso. Você poderia digitar isso. Isso não importa. Mas sim, dê uma chance. Conteúdo realista. Vai tentar. Oh, está fazendo isso. Quão legal é isso? Não está fazendo as imagens. Você tem que fazer isso individualmente. Vamos fazer isso em um segundo. Mas veja isso. Tem as datas. Tem os diferentes gêneros. Eu gosto disso. Agora podemos entrar e dizer, na verdade, você está aqui, eu fiz essa. Poderíamos usar mais inteligência artificial e dizer criar uma imagem, e essa é uma banda de indie pop Vamos cortá-lo para quando estiver pronto, porque demora um pouco. Eu gosto disso. Oh, veja como é responsivo Gosto da pequena mudança do IndioPo, faça mudanças. Hein. Está mais perto de mim. Eu aceito. Tudo com óculos. Melhor. Um pequeno rosto redondo para mim, mas isso serve Não tem costeletas. O que acontece lá Mas tem o penteado. Tudo bem, então podemos nos esforçar para fazer essas coisas. A única ressalva, o único problema que estou enfrentando em termos da opção duplicada é Oh, eu não guardei uma versão disso. Copie esse da moldura e cole aqui. Ok, então ele está fora. Eu chego a isso e devemos transformar isso em, na verdade, eu quero transformar aquilo. Eu quero deixar essa moldura mais alta. Na verdade, eu sei, quero obter a imagem. Eu usei um tamanho muito estranho lá, não é? Esse é o acolchoamento. Vá lá, Dan. Vamos agarrar a borda. Lá vamos nós. OK. O que devemos fazer é transformar isso em um componente. Lembre-se de Command Shift K. Não, lembre-se opção de comando K para transformá-la em um componente ou simplesmente clique no botão ali OK. Então, temos um componente principal para que possamos alterá-lo mais tarde e controlar tudo. Eu faço uma cópia dela, que é minha instância, instância do meu quadro principal. Vou movê-los de um lugar para outro. Isso está no topo, está lá. Eu seleciono os dois e os faço mudar para R. Na verdade, a coisa duplicada, lembra que estava aqui embaixo? Desapareceu. Para ir. Está bem? Então, funcionará com componentes principais como você não pode, mas vou desfazer isso devemos colocar na página de componentes A, abrir e colocar aqui E depois de volta à minha outra página, meu celular Hi Fi. Na verdade, eu fiz isso da maneira errada, e vou cortar isso, ir para meus componentes. Então, meus principais componentes estão aqui. Então eu vou copiar isso, voltar para o meu celular de alta fidelidade e colar aqui. Portanto, esta é uma cópia desse componente principal. Você pode ver que é um pequeno diamante. Isso vai funcionar. Está bem? Então eu vou fazer isso com eles. Você muda um layout automático e, em seguida, ele aparece lá. Isso pode desaparecer. Não sei por que isso acontece , mas sim, muito legal. Algumas outras coisas que talvez você precise fazer antes de transformá-lo em algo duplicado são, na verdade, voltar ao componente principal O que você quer fazer ao usar a sugestão de saída automática. Apenas certifique-se de que funcione. Essa imagem funcionou muito bem. Você pode ver, isso é o que eu queria fazer. O acolchoamento dos dois lados. Qual era meu preenchimento original? Vamos clicar nisso. Veja, eu tinha 17 de um lado e 16 do outro. Só porque eu o desenhei aleatoriamente, provavelmente é melhor arrumar isso agora antes transformá-lo em um componente para fazer duplicatas Eu provavelmente quero 16, 16, na verdade 16 ao redor. Vá lá, Dan. Gostaria de contorná-los apenas para obtê-los. A outra coisa é que vamos dar uma olhada. Vou fazer algumas devoluções . Você pode ver que não está fluindo. Isso é algo que eu provavelmente quero. Depende. Se você quiser um cartão de altura fixa, deixe-o. Mas o que eu quero fazer é clicar duas vezes na parte inferior da caixa de texto e ela sairá do KC, onde está Esse é um tamanho fixo e, se eu clicar duas vezes na parte inferior, ele salta automaticamente para este, ou você pode clicar no ícone Altura automática Essa é outra coisa boa a ser verificada. Agora eu posso adicionar mais coisas. Entre lá. Entre para entrar. Aí está. Outra coisa que eu provavelmente verificaria aqui agora é se há espaço suficiente para todas as datas? Provavelmente. O que acontece quando eu chego a um dígito, isso ainda funciona Essas são as coisas que eu gosto de verificar. E se o cliente disser que tudo isso precisa estar em maiúsculas, ainda serve, ou queremos a versão completa Tudo bem também. Por aqui, o que acontece quando isso fica muito longo? Nós já verificamos isso. Tudo bem. Oh, a outra coisa é que isso está diminuindo. Está sendo centralizado dentro do cabeçalho, o que é legal, que é esse pedaço aqui O que você poderia dizer é que a data provavelmente está centrada em algum lugar. Onde está? Na verdade, não é isso, é o cabeçalho principal. Podemos dizer que o cabeçalho espaçado, o que é legal, mas quero que seja espaçado e alinhado na parte superior . Nós abordamos algumas coisas estranhas aqui. Tudo é muito fácil até que não seja. Eu dei algo que funciona muito bem. Mas você descobrirá que muitas vezes isso simplesmente não funciona. Isso é o que faremos no resto desta seção Saída automática. Vou te dar um pouco mais de um curso intensivo sobre como fazer essas restrições aninhadas incrivelmente alinhadas e sobre como fazer essas restrições aninhadas incrivelmente saídas Mas sim. Isso é muito legal, hein? Tudo bem. É isso mesmo. Te vejo no próximo vídeo. Na verdade, uma última coisa. Na verdade, vamos colocá-lo na página. Vou tirar você daqui. qual deles estamos trabalhando por último? Acho que esse. Sim, nós. Como todas essas instâncias estão nesse layout automático, eu posso dizer, você e assistir isso. Eu posso pegar os pais tanto quanto os pais. Ah, essa é a parte mais legal. Eu posso fazer o espaçamento. Está bem? Mexa com o espaçamento, o que eu quero que seja 32. Quem H deve fazer. Vamos fazer isso aqui, 32. Outro pequeno truque também você pode simplesmente clicar duas vezes nessa lacuna e digitá-la. Quem, clique duas vezes na lacuna do espaçamento. Vá lá, Dan. Meu mouse está fazendo coisas estranhas. Então, vamos até você, clique duas vezes na lacuna, e você pode digitá-la aqui, para que eu possa digitar 32. Vamos fazer isso aqui. Depende de você. Mas não importa o tamanho que isso aconteça, ele responderá a isso. Tão bom. Tudo bem, fizemos uma bagunça. Agora eu vou te ver no próximo vídeo. 16. Projeto de aula 02 — Listas de bandas: Tudo bem, é hora do projeto da aula. Eu quero que você crie uma página. E vamos aos projetos da classe. Lembre-se de que eles estão em seus arquivos de exercícios. Quero que você crie What's on page. Está bem? O que está acontecendo? Não me importo com o idioma. Ok, precisa haver um título e um cartão de repetição da lista de bandas Ok, vamos dar uma olhada no meu. Ok, então eu tenho um título aqui. Temos esse cartão que se repete com todas as bandas diferentes que estão chegando em datas diferentes Para experimentar os recursos de IA. Se você está tentando fazer esse curso na versão gratuita, tudo bem. Basta projetá-lo. Não precisa ser construído com IA. Você só precisa digitar um pouco mais copiar, colar e encontrar imagens em sites de imagens de bibliotecas gratuitas Eu não me importo. Na verdade, se você estiver na versão gratuita, há um teste gratuito. Pode ser ótimo fazer este curso por meio do teste gratuito e você pode desativá-lo no final. Mas se você tiver os recursos, quero que experimente e brinque com eles. O Suggest Autolayout é o principal. Fizemos isso no último vídeo, onde você apenas o projeta e diz: Ei, me dê o layout automático, por favor. E faz coisas boas. Você vai se deparar com problemas. Tipo, eu projetei um bem simples para que funcionasse. Funcionou pela primeira vez. Eu sei que fiz outras coisas em que pensei : Oh, isso vai funcionar, e não funcionou. Portanto, mantenha a simplicidade ou faça algo complicado e veja como Suggest Auto Layout lida com isso. Posteriormente no curso, aprimoraremos nossas habilidades para que possamos corrigi-lo, mas brinque com algo simples, pelo menos quero que você brinque com esses recursos de renomeação. Se você não consegue se lembrar onde está porque era uma pequena parte do curso, você pode entrar aqui e dizer, na verdade, eu quero pegar tudo isso, clicar com o botão direito do mouse e renomear, onde você está ? Renomear camadas Aí está lá. Eu também quero que você duplique com novos conteúdos Esse é o termo técnico para aquela coisinha que aparece na parte inferior, quando você a arrasta para fora. É essa coisa aqui embaixo. Eu não consigo ver essa coisa. Substitua o conteúdo. Nós fizemos isso. Nesse caso, o que eu gosto de fazer quando sei o que vou fazer é construir algo. O que é isso? Saia do meu caminho. É que nos lembramos se você perder o Comando 1. Oh, eu digitei o ponto de exclamação. Desculpe, desculpa, e o zoom diminuirá para tudo o que você tem. O que eu gosto de fazer quando coloco o texto do espaço reservado, vou usar esse substituto de conteúdo por Eu apenas digito o nome da banda. Isso dá uma dica. uso reescrever isso ou reescrever isso para adicionar uma descrição sobre uma banda chamada e dei a ela um nome falso e depois o dupliquei para poder usar o que é chamado de reescrever isso Eu digitei uma data real e uso reescrever isso ou reescrever isso para adicionar uma descrição sobre uma banda chamada e dei a ela um nome falso e depois o dupliquei para poder usar o que é chamado de reescrever isso . Inventa os nomes das bandas. Você pode sugerir isso, dar uma descrição muito clara. Você poderia dizer, na verdade, que estou reescrevendo isso e estou dizendo que estou escrevendo isso para bandas de techno dos anos 90 e vou te dar Você não precisa simplesmente deixá-lo em branco. Tudo bem, brinque com a criação de uma imagem. Ok, então eu fiz uma imagem, e você notará que todos eles têm caras de meia idade Eu tentei fazer as costeletas. Não gosta de adicionar costeletas. Nenhum deles se parece comigo. Mas de qualquer forma, eles estão todos escondidos lá. Um pouco de facilidade. Acho que gosto mais desse cara. Ele tem uma mão peluda semelhante. O que mais reescrever isso de que falamos, que é a versão de Figman do Chat GPT, brinque Quero tornar sua página rolável. Ok. Portanto, certifique-se de que, ao fazer o modelo, ele possa fazer isso. Se você nunca fez isso antes, certifique-se de que, quando tiver sua moldura e a tiver nela, ela seja mais longa. Ok, então cabe aí. Ok, também, essa é a altura do telefone. Minha altura é 852, e recortamos o conteúdo, então não o vemos Isso realmente não importa. O que realmente importa é que ele esteja configurado para uma moldura de algo que ele conhece, como um iPhone 16. Se não funcionar, você pode ir para o protótipo. Provavelmente ainda não funcionará, então você tem que ir até o protótipo e dizer, eu gostaria do transbordamento, que é o material que está por aqui então você tem que ir até o protótipo e dizer, eu gostaria do transbordamento, que é o material que está por aqui . O padrão é sem rolagem Eu quero rolar verticalmente, e isso deve te dar esse cara. Tudo bem Incrível. Eu tomei algumas liberdades e a movi para remover a câmera. Você faz o mesmo. Eu brinquei com algumas fontes e algumas cores. Falaremos mais sobre isso mais tarde, mas eu não consegui me explicar. Tudo bem, entre. Brinque com a IA, fique entusiasmado com o tempo que ela pode salvar você e perceba algumas de suas fraquezas quando ela não faz o que fizemos no último curso Coisas simples, ótimas, coisas muito complicadas. Vamos precisar nos consertar. Preocupe-se. Aprenderemos como fazer isso. Tudo bem Criação de projetos de boa classe. vejo depois de terminar. Oh, na verdade, qualquer última coisa aqui, resultados Faça uma captura de tela como essa e faça o upload para os projetos da turma Além disso, compartilhe nas redes sociais. Deixe as pessoas saberem que você está fazendo o curso avançado com Dan e é incrível. Vocês dão uma olhada e isso é o que eu fiz. Sim, aí está. Te vejo no próximo vídeo. 17. Layouts automáticos aninhados e responsivos: Um. Neste vídeo, vamos criar nossos próprios layouts automáticos aninhados responsivos Como fizemos no vídeo anterior, usamos os robôs. Usamos a IA para fazer tudo isso. Vamos fazer tudo sozinhos porque precisamos entender como essas coisas são criadas para que possamos resolver problemas, criar layouts mais complexos e aprender a abraçar Sim, haverá abraços neste. Vai ser muito estranho. Tudo bem, vamos começar Abraçar. Vamos começar pressionando a tecla I e escolheremos uma moldura para iPhone 16 Por alguma razão, coloque-o onde quiser, alinhe-o perfeitamente, e este será meu menu ou dois Tem um nome, muito sexy. O que vamos fazer é começar a construí-lo. Vou começar com uma moldura e vou desenhar uma aqui. Tudo bem, vou mudar a cor só que possamos vê-la no fundo, escolher qualquer cor antiga na tela, um loop. Vamos trazer uma imagem. Você pode trazer qualquer coisa. Eu tenho um. Lembre-se de que o Command Shift K é o atalho para trazer uma imagem E há uma chamada Imagem cinco. É muito legal. Traga um laptop. Lá vamos nós. Vou simplesmente arrastá-lo manualmente para ficar do jeito que eu quero, e vamos dar uma olhada. Ok, as restrições estão bloqueadas. Você consegue ver que quando eu a arrasto, você consegue ver aquela linha pontilhada que passa pelo meio Está apenas dizendo que a altura e a largura estão bloqueadas. Você pode quebrá-lo apertando aquele botão lá. Desbloqueie a proporção. Eu quero ter apenas uma proporção estranha. OK. Vou arrastá-lo para fora. Eu deveria ser mais atencioso. É bom o suficiente. Agora, o que vou fazer é construí-lo à medida que avançamos. Em vez de construir tudo e depois convertê-lo. Então, o que vou dizer é, na verdade, esse quadro, vamos dar um nome a ele. Vamos chamar isso de um cartão. Essa imagem será chamada de imagem. O que eu quero fazer é o pai, que é o cartão. Eu quero dizer que você está fora de casa. Eu posso clicar no botão. Onde está o botão? Aí está lá, ou eu posso usar meu atalho Shift A. Agora, o legal disso é que você consegue ver que está envolto nele? Tudo bem. Quero ter certeza de que meu acolchoamento é 16 e a altura é 16 Ótimo. Vamos fazer algum tipo. Vou digitar isso aqui. Vou digitar, trazer seu laptop, e ele vai entrar aqui, mas o problema é que, se eu colocar o Autou, vai funcionar? Vai ir exatamente onde eu precisava ir. Excelente. O problema é que vou adicionar minha data. Deixe-me começar a marcar um encontro. Eu tenho meu par. Se eu tentar colocá-la lá, há saída automática, essa saída automática está configurada para aquela, que é vertical, ou eu poderia fazer na horizontal. Ambos não vão funcionar. Precisamos fazer essa bondade de aninhar aqui no meio. Deixe-me movê-los para trazer um laptop além da data. Ainda não está funcionando, mas se eu pegar esses dois caras e colocá-los dentro de sua própria saída automática, isso é chamado de saída automática aninhada Eu tenho um que vou colocar aqui dentro desse pai. Está aninhado por dentro. Selecionei esses dois, você pode clicar com o botão direito do mouse e dizer: Quero enquadrar essa seleção. Você poderia desenhar a moldura primeiro e colocar esses caras lá dentro. Depende de você. Eles estão nesse quadro. Vou transformá-lo em um toot Shift A. Este será chamado de cabeçalho Ainda não está funcionando, Dan. Olha, mas está aninhado. Lo escondendo seu cartão interno. Mas essa coisa aqui, eu posso fazer algumas coisas legais. Lembre-se de que esta carta estava programada para fluir para baixo. Este Ayo pode ser configurado na horizontal. Vertical, horizontal. Legal. Não está funcionando bem, mas é uma Au aninhada Você encontrará muitos ninhos dentro de ninhos dentro de ninhos. Foi assim que a IA fez isso automaticamente, o que foi legal. Vamos tentar torná-lo um pouco melhor porque no momento em que isso acontece. Não está certo. Quando eu digito, ele funciona, mas simplesmente se apaga e para sempre. Há algumas coisas que precisamos analisar. Vamos dar uma olhada nesse pai, o título. Este título no momento vai para mais ou menos lá. Queríamos ir até aqui. Faça isso. No momento em que a largura, você vê diz abraço ali, abraço conteúdo, está abraçando um urso grande abraço ao redor do conteúdo o mais forte que puder, o que é muito apertado, que é muito apertado, O que eu quero dizer é que não abrace. Eu gostaria que você enchesse seu recipiente. O contêiner, nesse caso, é o carrinho. Esse é o pai ou o contêiner. Eu quero que você preencha o máximo que puder. Você vê uma pequena seta que aparece aqui, assista. Eu vou seguir esse caminho. Você é tipo, incrível. Isso funciona. Então, esse rumo agora se estende por toda parte O que eu preciso fazer agora é que, no momento, eles estão todos esmagados para a esquerda Eu vou dizer, eu quero que você se esmague para a esquerda. E tem uma diferença de oito. Essa é uma pequena lacuna entre elas. Eu vou dizer que a lacuna, na verdade, você pode simplesmente torná-la automática? O pai diz: “Eu quero ser o maior que puder”. Vou preencher este contêiner. Mas estávamos forçando a diferença a ser também um certo número. Mas dizemos B Auto, ele diz, certo, B o que você quiser e se expandirá para o contêiner. Entenda. Vamos encerrar nosso pai, que é uma saída automática. Temos essa imagem pendurada dentro dela, e então temos esse pequeno bloco que tem seu próprio mundinho de Auto Lou acontecendo com esses dois caras Ok, agora vou adicionar meu texto descritivo. Vou começar a fazer isso. Ok, isso foi o mais estranho que verifiquei para ver se a IA me daria urnipsmos Esse é o Laurenopsm que temos. Então agora temos a Disney. Uau. Não é Disney. Eu senti a Disney ao lê-lo. Está bem? Se os deixarmos aqui, desde os coloquemos no lugar certo, ele deve ser preenchido e obteremos essa linda saída automática, da mesma forma que esta Vamos verificar algumas coisas para garantir que tudo funcione. Algumas coisas são que isso não vai chegar ao limite. Como fazemos isso? Nós o atacamos e dissemos: queremos sua largura? Queremos que você vá. Vamos encher seu recipiente. Vamos até o fim. Foi o que aconteceu. Isso realmente não funciona porque nenhuma das palavras é pequena o suficiente para ser quebrada. Vamos fazer isso de novo. Então, vou mudar o tamanho do texto. Vamos ao Roboto regularmente. Oh, isso bastará. Eu faço exatamente a mesma coisa. Por que não pegar o texto. Podemos dizer sua largura, meu amigo está enchendo o recipiente. Oh, pelo menos uma palavra apareceu. O que quero dizer, porém, é que eu o preenche muito bem. Vamos continuar digitando. Outra coisa que eu gosto de verificar com o Autolayouts. Fizemos isso logo no início, verifique se isso funciona, continue. Não está funcionando. Essa caixa de texto é chamada de altura fixa. W selecionado, o texto. Eu posso ver que a altura está definida para essa altura de 115. Você é como se eu não quisesse ter 115 anos. Eu gostaria que fosse um conteúdo de abraço. Isso funcionaria. Há algumas que podemos fazer. Poderíamos fazer conteúdos incríveis. Esse botão aqui faz exatamente a mesma coisa. Altura automática. É apenas outra palavra para abraçar conteúdos. Até muda. Olha, se você for abraçar o conteúdo, você pode ver que ele muda para aquele Da outra forma, da terceira maneira porque você precisa de três maneiras de fazer as coisas. Você pode simplesmente clicar duas vezes na parte inferior de uma caixa de texto. Ele mudará para abraço e altura automática da mesma forma. Faça um teste. Testando, teste, vá lá. Isso funciona. Incrível. Tudo bem. Algo mais que queiramos verificar? A outra coisa que gostaríamos de verificar se tudo isso é responsivo? Ah, mais ou menos. Sim, é. Totalmente responsivo. O que eu estava pensando que não ia funcionar e eu ia te mostrar era que tudo funciona. Legal. Às vezes é só essa caixa aqui. Está configurado para ser preenchido. Nós já fizemos isso. Às vezes, quando você o arrasta, é isso que era. Eu tinha o meu muito claramente assim, com uma largura específica. Quando estou projetando, muitas vezes eu o alinho de qualquer maneira, mesmo que eu não tenha dito preenchimento, e ainda terá uma largura fixa. Vou parecer que está. Parecerei que está indo até o limite. Mas quando eu faço isso, eu digo: Não. OK. Então, este aqui, eu me preparei para. Encha esse recipiente, por favor. Agradável. É totalmente complicado Está bem? Então, se você está pensando : Oh, isso foi um pouco difícil. Faremos mais algumas durante a aula. Mas em termos de saídas automáticas, saídas automáticas por si só, uma delas é muito simples Quando você começa a colocar uns dentro dos outros, você fica tipo, isso é estranho Então você joga isso, vai ser abraço ou vai encher o recipiente Lembro-me de quando falei, tive que clicar na bola e dizer: É um gancho? É um recipiente cheio? Fazer compras não é certo. E você apenas brincou com os botões até ter uma ideia, ok. Eu entendo. Eu entendo isso perfeitamente, mas também não foi instantâneo quando eu estava aprendendo. Então, se você está achando isso um pouco complicado, é complicado. Mas quando você entende e está fazendo todas essas coisas boas, e pode começar a fazer as coisas que fizemos na última vez em que vamos, tudo bem, você vai ser uma duplicata, pegar os dois, deslocar A ou sair, arrastar vários deles e depois Comando K porque somos incríveis e vamos substituir o conteúdo, e simplesmente dizemos, fazendo todas essas coisas boas, e pode começar a fazer as coisas que fizemos na última vez em que vamos, tudo bem, você vai ser uma duplicata, pegar os dois, deslocar A ou sair, arrastar vários deles e depois usar o Comando K porque somos incríveis e vamos substituir o conteúdo, e simplesmente dizemos, preencha com guias reproduzíveis para que possamos preencher com conteúdo realista e, em seguida, pressionar Command Enter, mesmo que eu sempre pressione Enter. Alguém mais faz isso? É tão bom. Olha, os eventos de networking acabaram de acontecer e os mudaram. Datas diferentes, descrições diferentes, diferentes Oh, meio que sabe o que somos. Como ele sabe o que é o laptop Bring her? Ah. Isso é meio assustador. Isso é. Isso é o que fazemos para trazer o laptop dela. Designer renomado. Ah, os robôs. Você está me assustando, cara. Tudo bem, é isso. Vou contemplar minha vida com os robôs e nos vemos no próximo vídeo. Uau. 18. Grids de layout automático no Figma: Oi, pessoal. Neste vídeo, aprenderemos sobre as grades de saída automática Olha como essa coisa é legal. Tem grades. Podemos mover coisas. Você vai lá. Eles são chamados de redes de saída automática. Eles são fáceis de usar. Eu os amo. Está pulando. Ok, para começar, eu criei uma nova moldura, nada nela. Eu criei uma cor de fundo como azul meia-noite. Isso não importa. Vamos pegar uma moldura. Vamos colocá-lo lá dentro e vamos encontrar o Auto. É esse novo aqui. Analisamos basicamente que a forma livre significa que é uma moldura com coisas se mexendo Da mesma forma que estou desenhando coisas dentro dessa moldura. Isso é forma livre. Há um retângulo aqui. Isso simplesmente não tem preenchimento, mas é só sair. Vamos deletá-lo e vamos alterá-lo. Analisamos a saída automática na vertical e na horizontal. O que vamos fazer é clicar neste aqui. O que ele vai fazer é convertê-lo em autolout. Poupa a necessidade de clicar nela, mas também a transforma nessa grade. Então está melhor no momento. Tenho certeza de que, quando você fizer isso, será bom e não a bateria, talvez não tenha tantos bugs, talvez eu crie alguns novos recursos. Tudo o que temos aqui é, vamos trazer algumas imagens. É a melhor maneira de explicar isso. Vamos para Command Shift K ou Control Shift K. Vamos trazer de seis a dez das imagens Vou clicar em Colocar A, arrastar um para dentro e não vai funcionar. Vamos até lá. Eles estão todos empilhados um em cima do outro Se eu pegar isso e jogá-lo na minha grade, o que eu realmente não consigo ver, onde você está? Aí está. Se eu pegar isso e arrastar para dentro, não vai funcionar. Vamos fazer com que ele tenha o tamanho adequado apenas para começar. Vou expandir e contrair. Vamos colocá-lo em algum lugar desse tamanho, e eu vou dizer que você entra lá. Ou você pode copiar e entrar aqui, selecionar a moldura onde deseja e colar e eu também entro. O único problema com isso é que está funcionando. Tem essa pequena grade. Você pode ver aqui que a imagem está ficando menor. Está tentando encher, mas simplesmente não consegue. O que precisamos fazer é antes ou depois, selecionar a imagem e dizer: não tenha sua proporção de aspecto bloqueada Vamos desbloquear a proporção Aspec . Dê um clique. Eu vou fazer isso com tudo isso de uma só vez. Agora ele vai fazer coisas mais legais e responsivas. Nome de S. Você mesmo pode criar isso com molduras, preenchimento e layout automático, mas as grades simplesmente fazem com que O legal disso também é que vamos pegar essa cópia e eu vou, na verdade, arrastá-la para dentro quando estiver um pouco maior. Vamos ver o que isso faz. Se eu arrastar esse cara até aqui, não é. Está usando o canto superior esquerdo dessa coisa e não está chegando nem perto. Então é muito grande, não sabe para onde ir. Isso é branco e beta. Se eu fizer isso, fica espremido Às vezes, ele vai e passa pelos ruídos. Isso cruzará duas das minhas fileiras do que são? O legal disso é que, olha, tudo é redimensionado e responsável Responsivo é a palavra certa. Vamos entrar. Essa era minha chave. Pedi à IA que me fizesse um keta. Eu não sabia o que era. Eu disse: É um piano com uma guitarra e ele o quebrou na lateral. Agora, o que eu queria. Então eu vou copiar isso, colar. Acabei de clicar duas vezes e colar. É tão bom. Super fáceis de fazer essas pequenas grades. Caso contrário, você leva séculos para marcá-los. Você pode fazer com que eles abranjam mais de um como este aqui. Eles podem se sobrepor OK. E essa coisa ainda estará se expandindo e se contraindo Se você precisar brincar com as camadas, é normal aqui no painel de camadas, se eu quiser ele abaixo de todos esses caras, bam, aí está. Eu não quero isso. Eu gosto da grade que eles têm em funcionamento, todas as lacunas se desfazem Você pode ajustar tudo isso. Você pode ver aqui, você pode ver que a diferença é dez e dez. Se você quiser que seja, o que queremos 16 e 16? Você pode adicionar preenchimento. Vamos às oito e oito. Eles são bastante versáteis. Eu arrasto esse até aquele ponto, e eles são muito responsáveis. Por que esse cara está lá embaixo? Bem, vamos dar uma olhada. Ele não está limitado agora, mas sob a imagem de preenchimento, ele está preenchido Isso. Bill, é porque eu o arrastei para fora mais cedo Talvez eu estivesse tentando arrastá-lo. Aí está. Sendo sua pequena casa lá, amigo, você pode movê-los facilmente Eu posso clicar duas vezes nesse cara e simplesmente arrastá-lo para cima e ele tentará chegar lá. Agradável. Você pode duplicá-los. O que vai acontecer por causa dessa estrutura de linhas estranha Vamos lá. Vá lá, Di. Vamos colocar um novo. É tão inteligente. Você pode adicioná-los em si mesmo clicando em todo o quadro e, aqui, você pode clicar nele e dizer: Eu só usei dois e dois como padrão Digamos que eu queira que seja três e dois. Eu simplesmente passo o mouse sobre ele, tenho uma ideia do que eu quero e depois clico nele Nesse caso, vou ter que dizer a você, eu quero, mas eu quero isso aqui e talvez eu faça com que isso aconteça dessa maneira. Olhe para nós. Sendo um KitArt totalmente criativo, você entra lá Ok, aquele fundo escuro foi uma ideia idiota. Vamos voltar para um esbranquiçado. Na verdade, totalmente branco. ser um pouco estranho quando você os move. Veja isso. Eu quero mudar esse cara para cá. Queremos esse lado. Esmaguei-o e moveu tudo ao redor. Às vezes, você precisa copiá-los e colá-los. Às vezes, funciona bem, às vezes não depende de quanto você percorreu e do que está dentro da grade Agora, você pode criar essas linhas, linhas e colunas para cima e para baixo. Você pode torná-los em tamanhos individuais. No momento, eles estão todos prontos para Auto. Esses pequenos pontos quando estou pairando por aí. Esses pequenos pontos estão do lado de fora e aí estão as medidas O que posso fazer é dizer, na verdade, que quero que este aqui seja justo e você pode clicar nele e arrastá-lo ou digitá-lo. Se você sabe que quer que seja 150, digite-o. Tudo isso muda para caber no espaço fornecido. É muito legal. Você pode realmente arrastá-los para fora de suas pequenas casas. Tudo o que você precisa fazer é que o quadro principal não esteja configurado para recortar o conteúdo. Você pode fazer algumas coisas peculiares com ele, mas acaba quebrando . Não quebre isso. Desfazendo, não quebre. Mas eu sei que você pode adicionar texto. Deixe-me saber nos comentários se você puder resolver isso. Não consigo fazer o texto, expandir e contrair quando é texto comestível Não é tão responsivo, mas vamos fazer isso de qualquer maneira. Vamos entrar aqui, vamos arrastar isso para dentro e ir até você. Recebi uma mensagem com a qual estava brincando. Aqui está. Eu vou colocar isso. Na verdade, é por isso que eu tinha o fundo escuro na época. Isso é aqui? Eu quero uma fileira extra no topo. O que eu posso fazer é dizer, eu quero, o que eu quero, outra linha. Agora serão três por três. W. Eu vou pegar e vou ter que arrastar esses para baixo para me dar algum espaço para o texto. É tão fácil, não é? Agora, isso aqui, eu vou cortar. Então copie, clique aqui novamente. Vou clicar nesse campo e colar, ele estará lá. É do tamanho errado. Mas o problema é que, sim, o grande problema é que não consigo descobrir como redimensioná-lo, então você tem que escolher uma largura apropriada para que ele possa sair com os caras, fazer as coisas Mas o texto eventualmente chegará ao limite e dirá, tchau tchau. Essa é a única coisa. O mesmo acontece com essa altura aqui. Eu não quero que seja automático. Vou arrastá-lo para baixo para que fique mais ou menos assim. Eu poderia fazer com que ele quebrasse. Veja isso. Não consigo fazer com que o tamanho mude. Isso é realmente o que eu quero. Vou selecionar o texto, vou dizer que não quero que ele ultrapasse a largura Eu quero que ele encha o recipiente, e eu quero que ele o arraste até aqui. Então, ele vai quebrar agora. Veja isso. Você pode fazer isso funcionar. Vamos pegar isso também. Você fica menor. Ah, muito legal. Tudo bem. O que? Ficou mais fácil usar essa função de grade. Uma coisa que eu quero te mostrar, porém, é que, pouco antes de eu ir, é como um presente especial se alguém esperou tanto tempo Eu esqueci de usá-lo. Essa aqui foi a minha escolha. Eu estava tipo, Cara, isso foi legal. Eu comprei isso em uma IA e fiquei tipo, como diabos eu consegui isso Porque eu comprei por isso também. Então, o que eu fiz foi, certo, desenhar um retângulo. E então eu fiz isso. Não vai ser o mesmo porque a IA tem, sei lá, a incapacidade de repetir coisas, mas eu vou criar uma imagem e vou ver Isso é o que eu coloco na guitarra de perto. Você pode usar cores e eu uso o número hexadecimal da Você pode usar IGB, seja o que for, como cor principal. Então eu fiz isso e recebi isso e fiquei tipo, um gênio. Eu fiz os fones de ouvido. Genial. Então eu fiz o Keta falhar Oh, eu usei uma cor diferente. Não era laranja, era rosa. Nesse caso, eu poderia dizer, todos façam mudanças e digamos violão acústico Depende de você, mas foi assim que consegui gráficos planos muito bons que estou usando aqui. Aplausos. Se você tem uma idade e diz: “ Que diabos é um keitar? M é o sotaque Você está pronto? Aí está. Você é bem-vindo. Eu queria tanto um. Levante a mão quem esqueceu que eles existiam. Aí está. Neste vídeo, aprendemos muito sobre Figma, Auto Lou grids Tudo bem. É isso mesmo. Te vejo no próximo vídeo. 19. Projeto do curso 03 - Grades: Ah, divertido. É hora do projeto da aula. É divertido. Do que você está falando? Ótimo aprendizado e prática. O que eu quero que você faça é usar o recurso Auto Lout, desculpe, o recurso de grade Auto Lout que aprendemos no último vídeo Está bem? É muito fácil. Eu quero que você faça o que fizemos no último vídeo. Há alguns requisitos. Eu gostaria que você usasse quatro ou mais imagens. Não importa onde você as obtém, biblioteca de estoque gerada por IA, suas próprias imagens. Eu gostaria que eles estivessem relacionados ao seu gênero musical específico. Então pode ser rock 'n' roll, soul, hip hop, o que quer que você tenha. Ei, faça isso. Eu quero que você experimente usando pelo menos uma caixa colorida. Você pode ver aqui no meu, eu mudei o meu depois do vídeo para adicionar essas caixas coloridas. O problema é que eles precisam ser capazes se movimentar com eles. Isso vai ser um pouco mais difícil? Não sei, curso avançado. Estou realizando algumas tarefas em que, de alguma forma, quando você as coloca, provavelmente é apenas uma moldura. Portanto, é uma moldura que estava aqui e agora está lá. Mas, por padrão, esse cara não quer expandir e contrair. Eu quero que você veja se você consegue descobrir como fazer isso. Faça isso. Não se preocupe Confira no próximo vídeo. Bem, confira abaixo. Ainda não olhe, mas alguém nos comentários dirá como eles fizeram isso funcionar. Então, apenas uma caixa colorida em vez de uma imagem. Vou te dar uma dica, algo a ver com a largura e a altura Veja se você consegue descobrir isso. Já fizemos isso antes, é a chave. E texto, mas isso é opcional. Quero que você faça pelo menos um objeto abrangendo uma coluna. Isso abrange um, dois, três, que abrange dois, é apenas um deles, pelo menos. Regras, faça uma captura de tela e envie-a para os projetos da turma E esses estão parecendo legais. Eu gosto dessa pequena grade. Faça o upload nas redes sociais e diga que você está experimentando o layout automático da grade Figma E o que você acha disso? Certifique-se de me marcar. Divirta-se brincando com isso. Tudo bem. Eu vou te ver depois que você terminar sua lição de casa, não lição de casa, projeto de classe, coisas divertidas Lembra? A. Próximo vídeo. 20. Coisas importantes para saber sobre componentes no Figma: Componentes. Você já os conhece. Por que estamos fazendo um vídeo? Eu tenho algumas coisas importantes que surpreendem as pessoas, me surpreendem. Eu quero compartilhar isso com você. Esse vídeo é divertido? Eu me perco um pouco. Eu não estava planejando me perder, mas nos perdemos, mas resolvemos o problema. Espero que seja uma boa pepita para você . Nós juramos, eu sei Não pretendemos, mas temos. Tudo bem. É isso mesmo. Vamos entrar. Fale sobre componentes. Tudo bem, então vamos usar Eu criei esse nervo e esqueci seu pode estar na frente porque você acha que ele deixou a coragem para trás. Fizemos isso no início do curso, então vou clicar aqui usar meu botão voltar, que é apenas o primeiro colchete E então eu tenho isso. Eu só vou fazer isso aqui porque é um pouco mais claro A, eu tenho esse Nav que eu fiz. Vamos dar uma olhada em como é feito. Então é chamado de Nerve bottom. Dentro dela estão alguns. O que são esses? Você se lembra? Sim, esses são os componentes principais. Esses são os chefes. Esses são os pais. Então, quando eu faço cópias deles, eles se tornam exemplos desse chefe. O legal disso é que quando eu ajusto o principal, eu faço. Não tenho certeza do que vou fazer com isso, mas vou destruí-lo Posso fazer isso a essa distância? Você pode ver isso lá? Está fazendo isso com os dois. Legal. Sabemos o que os componentes fazem. Uma das coisas, porém, é que digamos que eu queira transformar esse Nav também em um componente principal, porque vou usá-lo em muitas páginas Eu poderia muito bem controlar tudo. Vamos ver o que acontece. Vou usar meu atalho Command Shift K. Você é componente. Essa é a imagem de importação. Essa é a opção de comando K ou controle K, o que aconteceu? Ele se tornou o componente principal, isso é incrível, mas os lançou . De onde eles vieram? É o que acontece quando vejo os arquivos de outras pessoas, especialmente quando estão no nível intermediário, não muito avançado. Você fica tipo, eles simplesmente deixam isso aqui e o que diabos isso aconteceu? A regra é que você não pode ter componentes principais aninhados dentro de outros componentes principais Como transformamos a estrutura externa em componente principal, ela os expeliu e saiu daqui, veja, esses não são mais os componentes principais. Olha, são apenas exemplos, pequena versão diamantada. O que precisamos fazer é pensar nisso. E o que você descobrirá é que vamos ampliar um pouco. Você verá que esse cara aqui, olha, eles estão lá embaixo . Eu vou. O que eu vou fazer? Sim, vamos demiti-los. E o que eu vou fazer é encontrá-los. Eles estão todos aqui. Vamos arrastá-los para fora e colocá-los em uma página de componentes. Então, vou cortá-los e dizer que agora vocês estão na minha página de componentes doces , da qual eu não tenho muitos. Você pode mantê-los no mesmo documento, não há nenhuma lei contra isso. Mas quando você está trabalhando em um arquivo maior, você realmente precisa de uma página de componentes. Caso contrário, você pode simplesmente colocá-los ao lado do seu design, apenas passando o tempo aqui. Tudo bem, isso é importante, número um. A outra coisa que quero mostrar é que isso agora é um componente principal. Então, claramente, o que eu fiz? Ooh. Eu fico tipo, O que há de errado? Congelado? Não, eu acidentalmente apertei o atalho para a camada de bloqueio Eu nem consigo lembrar o que é. O que é o atalho da camada de bloqueio? Por favor, espere. Ooh. Aí está lá. Desloque o comando para fora. Eu não cliquei nisso. Cliquei em algo no meu teclado e ele o bloqueou. De qualquer forma. Então eu o desbloqueei. O que eu preciso fazer é que eu também não deveria usar isso aqui. Eu poderia deixá-lo aqui. Então, muitas pessoas simplesmente deixam isso na primeira página e depois criam exemplos disso. Sejamos espertos, ok? E vamos cortar isso. Vamos ao nosso painel de componentes. Vamos colocá-lo aqui. Isso é uma bagunça ainda maior. O que fizemos aqui? Você está aí. O que eu tenho é que muitos desses caras se sobrepõem. Tudo bem. Eu realmente quero simplesmente eliminá-los do curso, mas essas coisas acontecerão com você também. O que diabos aconteceu lá? Eu vou desfazer, voltar. Deve ter havido tantos caras andando por aí. Vamos voltar para o meu hi fi. Eu quero você de volta. Aí está você. O que é isso? Há apenas um deles. Copie e acesse meus componentes. Clique em Colar. O que eu fiz? Talvez eu os tenha colado dentro desses caras Eles foram selecionados e colados? Foi o que eu fiz. Eu não sei o que aconteceu lá. Você sabe o que estou fazendo. De qualquer forma, isso acontece. Aí está. Eu os selecionei. Acabei de comer minha pasta normal e, de alguma forma, estou dizendo que é um bug. São três deles. Colou um para cada ícone que eu tinha. Hm. Oh, eu coloquei uma instância dentro de cada imagem. Isso é estranho. Tudo bem. Aí está. Eu aprendi algo nessa aula. Tudo bem, vamos começar de novo. Confira. Sacuda isso. Você está pronto? Esqueça tudo o que está perdido. Vou na Mobile Hi Fi. Eu vou dizer você, meu amigo. cortá-lo, não copiá-lo. Provavelmente foi aí que eu errei. Não é um bom componente, então vou te dizer. Nada selecionado. Cole-o. É aqui que vou manter esse componente principal. Dentro desse componente principal, há várias dessas instâncias desses caras no topo aqui. Tudo bem, estamos indo bem. Vamos voltar ao celular. Vamos ao nosso painel Ativos e devemos ter crédito nesse arquivo em componentes. Deveríamos saber onde ele está. Aí está minha bunda agora. Ok, então eu vou colocar isso aqui. Agora deve ser uma instância. Legal. Algo mais? Onde precisamos aprender? Existe, mas estou confusa. É isso mesmo. O que eu quero fazer é colocar um aqui também, porque é responsivo, podemos ajustá-lo O legal de instâncias do componente principal que lembre-se de que nossos componentes principais estão aqui. São apenas filhos deles. Eles fazem o que ele diz, mas há algumas pequenas coisas que podemos fazer. Eu posso dizer, na verdade, as cores selecionadas aqui, eu quero que sejam brancas. Ok, eles ainda estão conectados se eu voltar para o meu componente principal e eu disser, onde ele está esse cara aqui? Eu digo, todo mundo tem um pouco de acolchoamento. Estou acolchoando na parte inferior. O que eu quero fazer é dividir o preenchimento. Quando se trata de navegação, eu gosto mais da parte inferior, um belo queixo pequeno, vamos 24, e esse aqui em cima, vamos 16 Também vou querer uma cor de fundo. Vou dar um preenchimento um pouco esbranquiçado. Só porque eu acho que parece legal e eu gostaria de tê-lo, e eu gosto de dizer que você tem um efeito de sombra projetada. Eu gostaria que não caísse, zero, nada fosse para a direita. Isso é para cima e para baixo, então eu quero ter menos quatro, ele sobe. Você pode ver isso lá? Talvez a dispersão ou o desfoque sejam um pouco maiores. Talvez um pouco menos de opacidade. Já fiz isso muitas vezes, sei do que gosto sem ver isso no documento. Vamos voltar ao nosso celular e, como fizemos isso em nosso componente, tudo isso foi ajustado. Isso é muito legal. Mas você pode ver aqui que eles permaneceram brancos, o que também é muito legal. Provavelmente posso usar esse Nav agora, mas vou selecionar isso e dizer que quero que você tenha uma cor mais escura do que a que estou O ideal é que ainda não resolvi isso. O componente principal é ótimo. Não coloque componentes principais dentro de outros componentes principais porque eles são expelidos. Você provavelmente deveria mantê-las em uma página separada, mas não precisa , e você pode substituir as instâncias por coisas pequenas, como cores Não consigo ajustar o ícone aqui. Eu tenho que voltar para o componente principal, mas eu posso mudar a cor e um pouco do layout e eu posso dizer, A bilheteria, eu quero ir até aqui Eu quero desligar o globo ocular disso e ele reflui porque somos incríveis Ainda está lá. Não está desligado. É impossível transformar ou excluir qualquer coisa. Se eu clicar nele e excluir no meu teclado, ele simplesmente adormece. Sonolento. A última coisa sobre componentes é algo chamado restrições Você sabe sobre eles, mas vamos dar uma olhada em algumas peculiaridades. Aqui, eu vou mover esses caras para cima. No momento, por padrão, eu arrasto isso para cima, eles desaparecem. Quero que fique na parte inferior do Nav. Eu vou dizer restrições. Eu quero que seja para a esquerda e para a direita , porque no momento não está, vamos dar uma olhada. Acho que está apenas para a esquerda, então está preso lá. Preciso dizer que você precisa ir para a esquerda e direita para que fique mole Além disso, quero que fique no fundo. Você vai ficar preso ao fundo. Você fica tipo, eu já sei disso, Dan. Você fica tipo, Ok. Mas onde está agora? Onde estão as restrições adoráveis? Eles se foram. Eu sei. As restrições precisam ter uma estrutura principal. Caso contrário, eles não aparecerão. Sem restrições, observe exatamente a mesma coisa dentro de um quadro principal, as restrições Nem precisa ser um componente. Se eu desenhar alguma coisa, moldura, sem restrições porque não tem moldura principal. Ele entra aqui. Oh, ele tem restrições. Dias felizes. Ok, então isso é uma coisa para lembrar. A outra última coisinha, eu digo a última coisa. Provavelmente serão mais 20 então vamos voltar à minha página de componentes. Você fica tipo, Oh, eu poderia muito bem fazer isso por ele. Então esse cara, então eu não tenho que fazer isso toda vez. Casey diz: “Tudo bem, sem restrições”. Dan nos disse que precisa de uma moldura principal. Muitas vezes, você encontrará todos os componentes dentro dessa estrutura, mesmo que eles não precisem, para que você possa ver coisas assim. Olha, ele está preso no topo e à esquerda. Está bem? Isso não faz nada. Digamos que eu chegue ao topo novamente e mude para que eu queira ficar na direita, eu deveria fazer isso. Vou para outra página. Vamos lá F Oh, não é o que eu quis dizer. um quadro, clique aqui Por que eu vou ? Acho que estamos apenas xingando todo mundo. Qual é o corte usual? Estava no meu cérebro, eu me distraí com o FU. Oh, eu só estava dizendo. Agarrando. Aí está. Eu tenho esse novo quadro com linguagem imprópria. Então, vou pegar meus ativos. Vou encontrar a única chamada inferior e vou colocá-la lá dentro. Coloque-os em qualquer lugar. E olha. Oh, ele está dentro. Ele é o melhor, o que é o padrão, mas cuidado. Ele não foi para a direita. Então, realmente não importa o que você faz. Eu não sei por quê. Confira agora na sua versão. Eles podem mudar isso. Seria ótimo defini-lo como uma espécie de padrão para o componente principal, porque eu não sei. Seja esse o motivo dos componentes principais, mas não funciona. Deixe-me saber se isso acontecer, e nos comentários, você meio que tem que fazer isso depois. Tudo bem. Ok, em cima, em baixo. Porque uma vez que você tenha feito isso uma vez, não é tão ruim, ok? Porque muitas vezes você os pega, ok, e cola, e ele traz essas coisas Só que não do componente principal. Tudo bem, foi uma divertida. Nós juramos um pouco, nos perdemos e nos perdemos de verdade Espero que você tenha achado útil. Os componentes são fáceis, mas também podem ter algumas partes rápidas, e esse é o tipo de coisa rápida que eu adoro Ótimo. É isso mesmo. Te vejo no próximo vídeo. Vou colocar cantos arredondados nas coisas. Isso é tudo que eu vou fazer, ok? Você pode ir agora. Sim. Oito é um bom tamanho para um telefone. Na verdade, eles precisam parecer maiores para um telefone. 24 é mais representativo de um telefone moderno, ainda um pouco maior. Gosto de ver isso no design. Você não precisa se eu desfizer isso e eu voltar à praça. Obviamente, quando eu o protótipo, ele entra e é recortado dentro de um telefone de Então você realmente não precisa disso, mas usando minhas flechas, ok? Você pode ver que eles têm cantos arredondados, muito grandes no novo iPhone. Tudo bem. Isso era tudo que eu queria. Eu vou voltar para onde, oh, eu vou voltar para minha volta de curvas. Eu vou fazer isso no intervalo, você vai para o próximo vídeo. Nos vemos lá. 21. Qual é o melhor espaçamento para usar no Figma?: Neste vídeo, falaremos sobre qual espaçamento usar Você pode usar o que quiser, mas o que quiser, você pode fazer essa pequena grade aqui. Isso te dá uma pequena referência visual. Tudo bem, estou espaçando aqui. O que deveria ser? Milla Vamos usar 32 Eu posso ter certeza de que isso está a 32 de distância. Atualmente é 43. Isso não é bom. Você pode usá-lo apenas como um guia visual de, o que devo usar? Ser consistente com seu espaçamento. O que vou fazer é mostrar também como usar um aplicativo para adicionar todas essas pequenas medidas ou desenhar as caixas. E faremos isso uma vez e você poderá copiar e colar esse garotinho em cada novo emprego para que não demore no futuro. Tudo bem, vamos começar. Tudo bem, vamos começar a arrastá-los para fora. Depois de fazer isso uma vez, basta copiar e colar todos os documentos futuros para sempre. Está bem? Então, eu quero que essa seja uma bela cor brilhante para que eu possa vê-la como uma referência visual. E eu quero o meu primeiro, o tamanho mais fundamental é oito por oito, ok? E como eu tenho as restrições ativadas, ok, isso significa que eu só preciso digitá-la uma vez, e ela atualizará a altura e a largura . Economiza um pouco de tempo. Ok, então oito é o primeiro. Vou ampliar um pouco. Ok, e eu quero ver uma representação visual do próximo tamanho, que é apenas mais oito, que é 16. Então eu quero continuar subindo em oito, ok? Eu fico um pouco confuso com matemática na minha cabeça, então eu só isso mais oito na área. Está bem? Estamos às 24. Eu sei disso. Ok, 32. Esses são os tamanhos realmente comuns. Você pode continuar subindo. Depende de você. Você também pode fazer múltiplos de seis ou cinco. Eles são apenas mais difíceis de dividir e seu desenvolvedor odiará você porque, muitas vezes, a desenvolvedora trabalha com uma estrutura que já existe. Em vez de escrever em todos os zeros zeros e 16 pixels, ela usará o espaçamento predefinido, e provavelmente será oito ou uma divisão dele Depende do quanto você gosta do seu desenvolvedor. Eu gosto de manter o espaçamento lá também. Porque eu gosto deles quanto ao tamanho que meu botão deveria ter, ícone B, imagem B. Você tem uma ideia disso olhando para eles. O espaçamento, eu gosto de deixar. Se você aumentar o zoom o suficiente, não consigo mais ver meus pixels. Eu costumava ser capaz. Não tenho certeza se desligo o meu ou se ele está desligado por padrão. Você saberá que, se o seu estiver ligado, você poderá ver os pequenos pixels aqui. Você pode ir até alguns e acessar a grade de pixels. E você pode vê-los. Porque eu quero contar quatro deles . Olha, eu tenho quatro lá. Esse é o tipo de lacuna mínima para as coisas. Obviamente, a diferença mínima é zero. Minimis não é uma palavra, Dan, o próximo tamanho está subindo novamente Então, vamos dizer que um, dois, três, quatro, seis é bom. Desculpe, oito é outro. As pessoas usam seis. Estou apenas te dando as regras gerais. As pessoas colocam o que quiserem. Então, seis você verá normalmente. Vou me ater a essa grade oito. Como eu sei? Em vez de contar pixels, você pode fazer algumas coisas. Se você tiver, digamos, essa opção selecionada, segure a tecla de opção em uma tecla Mac Oh em um PC e simplesmente passeie Você pode ver que isso te mostra a diferença entre todos esses caras. Oito, você conseguiu. Ou você pode fazer isso. Você pode dizer, você começa aí, e então eu quero que essa exposição seja mais 16 Eu queria fazer 16 anos porque é fácil ver essas lacunas. Essa aqui, queremos uma lacuna de 24? Provavelmente precisamos de um no meio. O que eu vou fazer é, em vez de ir mais 16, o que eu fiz mais 16? Eu fiz. Eu queria um tamanho diferente aqui. O que eu vou fazer é desfazer isso. Volte, por favor. Vou fazer mais oito mais quatro. Isso está tornando a massa difícil. Isso funciona no meu cérebro. Então, eu não quero ir os 16 completos. Eu quero ir apenas 12. Eu vou mais 12. É um tamanho mais razoável. Ainda é divisível, há oito, mais ou menos, você me entende Está bem? E então este pode ter o tamanho de 16. Então, vamos obter mais 16. Você pode continuar aumentando os tamanhos, mas eu gosto deles. Essa é uma boa referência justa para se ter em todos os documentos. Copie ou cole para que você possa começar a fazer, vê essa lacuna aqui? O que deveria ser? Provavelmente aquele. Não, talvez esse. Talvez as lacunas entre isso fossem boas assim. Você pode ver que é apenas uma referência visual? Isso pode estar funcionando apenas na minha cabeça. Uma coisa que eu quero fazer, porém, é não saber o que é isso. Eu tenho que clicar nele. Diz 32. Não é difícil. Eu vou te mostrar um plugin de chamada. Vou até o meu painel de Ações. Vamos aos Plugins. Há um chamado Design Doc. Eles o estão renomeando Spectral atualmente. Acho que eles o renomearam para Spectral, e então todo mundo não o encontrou, então voltaram para o Design Pode ser chamado de algo diferente. Quando você chega aqui, muitas pessoas fazem isso. Esse não é só um deles. É o que eu gosto. Esse é o melhor? Eu não tenho ideia. Eu só uso isso. Na verdade, há uma chamada dimensão, há anotações. Há alguns outros. Você pode simplesmente digitar as medidas e ver o que obtém. Se este não estiver mais disponível. É como o beijo da morte se eu os adicionar a uma classe. Assim que eu faço um plug-in, quem o fez morre ou para de atualizá-lo pelo menos. Vamos rodar esse. Eu gosto dessa medida. muitas outras coisas legais que fazemos. Mas vamos dar uma olhada neste. Eu vou até isso. Eu vou dizer que gostaria que você colocasse a altura logo acima dela. Aí está. Não é temporário. Está lá para sempre. Você pode ver isso no meu painel de anúncios. Tem esse recipiente que tem minhas medidas nele. Eu posso ligar e desligar. É muito útil. O mesmo com este, vamos lá, você precisa. Um dos melhores também. Você também, por favor, também. É apenas uma maneira mais limpa de ver quais tamanhos você tem. Provavelmente vai precisar de alguns tamanhos maiores. Você também pode fazer as lacunas entre as coisas. Eu posso dizer você e você. Vamos fazer o espaço entre eles. Oh, quando eu fiz isso lá embaixo, é tão inteligente. Ok, eu gosto de pequenos aplicativos como esse. Isso é muito útil. Agora, esqueci essa. Você pode copiá-lo e colá-lo no novo documento toda vez que iniciar um e, em seguida, você terá uma pequena dica visual de onde tudo estará O que eu gosto neste aplicativo é que gosto de colocá-lo dentro dele, ele cria tudo isso. É muito confuso. Está bagunçado? Eu não sei. Vou colocá-la dentro de uma moldura, e vou colocar essa que vai se chamar, nem tudo entrou. O contêiner realmente não queria entrar. Acho que é porque está trancado. Eu posso arrastá-lo para dentro. Você vai lá, amigo. Eu sou Debess. Vou usar esse espaçamento. Só para que eu possa fechá-lo e ficar um pouco melhor, para que eu possa fechá-lo Oh, isso é estranho. Tudo isso está lá. Não consigo selecioná-lo porque está bloqueado e não consigo, oh, aí está. Olá. Desculpe por isso. Tudo bem, vamos deixar o fundo escuro do espaçamento porque parece estranho e Porque eu o projetei. Vamos ficar pretos. Contraste muito alto. Agora, esse é esse aplicativo. Vamos dar uma olhada mais tarde. Eu quero te mostrar porque eu não sei, eu não consigo me conter. Adoro esse aplicativo de medição. Ah, não, faremos isso mais tarde no estande do curso. Não faça isso agora. Tudo bem. Esses são os espaçamentos básicos. Você pode usar o que quiser. O que quer que você faça, porém, crie uma pequena grade. Faça o esforço uma vez e você poderá usá-lo repetidamente. Tudo bem. Próximo vídeo. 22. Qual espaçamento devo usar para web design e aplicativos no Figma: Oi, pessoal. Vamos falar um pouco mais sobre o que deve ser o espaçamento Eu te dei algumas coisas genéricas no último. De onde eu tirei essa magia? Como você fica melhor nisso? Se você já é, sabe, bastante proficiente em seu espaçamento, pode Mas se você quiser um pouco de Não sei, ajude a garantir que as coisas sejam consistentes e fáceis trabalhar com seu desenvolvedor ao entregar seu aplicativo, sem causar problemas ou, pelo menos, estar atento ao desenvolvedor e ao que ele trabalhará . Veja, oh, há muitos lugares em que seu aplicativo ou site acabará e o que acabará O que está acontecendo é seu engenheiro, seu desenvolvedor, quem quer que você esteja usando para fazer isso, pode ser você É muito provável que seja construído sobre o que é chamado de estrutura. Sua desenvolvedora, ela não vai começar a colocar todos os zeros e zeros. Está bem? Eles vão construir em cima de coisas, eles teriam construído em cima de coisas, eles construirão em cima de. Se você é desenvolvedor de IOS, tudo bem, o desenvolvedor usará o pré-fabricado ou, pelo menos, as diretrizes da Apple. Se for Android, será esse material. É assim que eles chamam de sistema de design e oferecem muitas coisas úteis sobre como as coisas devem ser espaçadas Se você estiver acessando a web, pode ser bootstrap, pode ser tailwind Então, converse com seu desenvolvedor, descubra para onde está indo, sobre o que eles estão construindo e depois leia um pouco. Isso pode ser confuso Precisamos começar com esse tipo de coisa para que você possa realmente, eu não sei, começar a entender talvez um pouco de CSS, um pouco de código, para que você não use o espaçamento de sete para desenvolvedores porque sete é complicado porque você não pode dividi-lo Ok, você não pode ter meio pixel. Você pode dividir oito ao meio. Você pode ter quatro pixels. Vamos dar uma olhada em por que oito também é bom. Então, vamos dar uma olhada no material para Android, ok? No ponto de material IO. Eles estão na versão três. No futuro, você pode estar na versão quatro ou cinco. Confira. Estou sob as fundações. Estou vendo o layout, entendendo em voz alta. E é muito bom dizer que o espaço entre as colunas é padrão de 24 DP, que é essencialmente pixels Abreviação de pixels independentes do dispositivo. Eles usam isso porque muitos telefones diferentes têm densidades de pixels diferentes Apenas considere pixels se você entender isso. E quando você está projetando Figma, DP é igual a Px. Eles estão usando um espaçamento de 24. Portanto, certifique-se de que, ao construir seu pequeno bloco espaçador e acessar o Android primeiro, faça com que sua lacuna seja 24 Esse é o padrão. Felizmente, é divisível por oito Não por acaso. Mas pelo menos é um espaçamento muito comum no momento Vamos dar uma olhada no IOS. Leia o que eles fazem. Eu acho que eles estão usando 20 para suas margens laterais Eles têm alguns padrões diferentes de muitos outros. E o problema com o IOS é que tem telefone, TV, gadgets, ok? Há relógios. Então dê uma olhada. Seja qual for o objetivo do seu projeto, haverá documentação on-line. Você está acessando a web, então você está criando um site ou aplicativo web, descubra, é Wordpress? O Wordpress está usando o Bootstrap? O Bootstrap é uma estrutura que ajuda os desenvolvedores a trabalhar rapidamente. Está bem? E o que eles vão acabar fazendo é dar uma olhada. Eu achei isso, ok? A sarjeta é o que eles chamam Ok, o espaço entre as coisas e as calhas padrão é de 1,5 RM, e você pode ver lá que eles diziam 24 pixels, o mesmo que o Então, se eu usar 24 como meu espaçamento, o desenvolvedor vai gostar porque é meio consistente com o bootstrap e é consistente com bootstrap e é consistente o Android, dependendo de onde você está indo Agora, existem 100 estruturas diferentes. Tailwinds, as pessoas estão usando muito isso, ok, para ajudar com seu estilo Você pode ver aqui, descobri que em GAAP Bootstrap chama isso de gutter, tailwind Tudo isso é útil para ser um designer de interface do usuário. Você pode ver aqui que o que um desenvolvedor digitará é que, na verdade, não digitará o número. Espero que estejam perto de um desses. Então, eles colocarão espaçamento quando estiverem codificando para dizer que a lacuna é zero, que é O GAP é um, que é 0,25 do REM. Um REM por padrão é 16. Então, 0,25 de 16 são quatro pixels. Então, talvez esse pequeno espaçamento que tínhamos antes seja o mínimo aqui, e é uma boa regra não usar três Você sabe, as divisões se tornam complicadas e seu desenvolvedor terá que substituir muitos dos padrões da estrutura Você pode fazer isso, mas seu desenvolvedor provavelmente simplesmente o ignorará e usará alguns dos padrões, a menos que você os force Está bem? Vamos dar uma olhada. Então 16, seis, oito, dez, Oh, há um dez. Você pode decidir que, em seu design precisa de uma dezena. Onde estava? Não temos um dez. Temos quatro, seis, oito, 12. Não há regras realmente rígidas sobre o que elas podem ser. Mas se você projeta quatro estruturas ou as entende um pouco, especialmente se você sabe para onde elas estão indo, se você sabe que o desenvolvedor usa o Tailwind, ótimo ou as entende um pouco, especialmente se você sabe para onde elas estão indo, se você sabe que o desenvolvedor usa o Tailwind, ótimo. Digite tudo isso. Portanto, a grande conclusão é que múltiplos de oito são bons, mas, na verdade, você deve verificar como está sendo feito e copiá-lo Isso tornará a transição do Figma para o design e desenvolvimento reais muito mais suave Não preciso, mas eu também tenho um artigo básico da web, que abrange muitos dos tipos de coisas que analisamos aqui, como o que é um REM O que é um DP? O que é bootstrap? O que é flexbox Há todo tipo de coisas boas que você pode aprender que informarão seu design quando você estiver no Figma Mas meio que fora do escopo deste curso, mas um pouco de conhecimento de HTML, CSS e framework faz de você um melhor designer de UX, na minha opinião. Tudo bem. Isso foi confuso Um pouco sinuoso. De qualquer forma, vamos abordar mais algumas habilidades difíceis Figma 23. Projeto de aula 04 — navegação inferior responsiva: É hora do projeto da aula. fazer a navegação baixa. Já fizemos isso se você estiver acompanhando. Eu só quero que todo mundo chegue até aqui. Então, o que eu quero que você faça, crie o Low Nav, ok? É esse cara aqui, ok? E eu quero que ele faça algumas coisas, ok? E vamos apenas praticar as coisas que já aprendemos. Então, quero ter certeza de que você está usando componentes, tanto os ícones quanto o Nav. O que isso significa? Está bem? Essa coisa aqui é uma instância do meu componente principal, que está aqui. Para fazer isso. Esses são os principais componentes dos meus ícones. Certifique-se de fazer isso apenas para praticar. Você precisa usar um layout automático para sua navegação poder fazer o espaçamento automático entre os itens Isso significa que quando eu pego isso, ele se comprime e os ícones têm espaçamento automático que entra e sai Execute a saída automática pela parte externa e verifique se você pode configurar a saída automática entre elas. A última delas tem restrições. As restrições nos permitem fazer isso com uma navegação. Eu quero que você a cole na parte inferior, esquerda e direita para que, quando escolhermos uma nova página, na verdade, vamos para esta , não para uma nova página, mas digamos que precisamos fazer um tamanho de quadro diferente, porque estamos fazendo, eu não sei. iPhone 13. Olha, encolheu Não faz muita diferença. Foi empolgante, mas você pode ver que está preso na parte inferior e nas laterais. Essa é a parte das restrições. Faça tudo isso. Então eu quero que você grave um vídeo de você fazendo essa coisa assim em uma de suas páginas para que possamos ver que você fez isso funcionar. Se você não consegue gravar vídeos porque é muito difícil e não consegue fazer isso acontecer, aceitarei capturas de tela, confio em você que funciona Talvez faça uma captura de tela disso. Além disso, podemos ver todas as coisas acontecendo aqui e pensamos: eu posso ver as restrições, mas parece que adoro ver vídeos se você não tiver certeza de como gravar um vídeo no seu computador A maioria dos Macs e PCs tem software integrado, Mac chama isso de captura de imagem Você pode fazer isso. Eu uso o Camtasia Você pode usar o QuickTime, que é gratuito no Mac e no PC. Existem plugins dentro do Figma, que são interessantes. Você pode acessar os plug-ins. O que eu usei antes é registro VMeovMovmo, que permite que você faça login e crie uma conta gratuita com eles, mas você poderá gravar sua tela Também haverá outros plug-ins. Quando você está fazendo o upload, queremos o link para o vídeo, não o vídeo em si. Não podemos pegar o grande MP Fours, enviá-lo para o Vimeo, Bee Hunts ou o YouTube com contas gratuitas e simplesmente enviar o Link Tudo bem. O verdadeiro objetivo aqui não é tanto fazer vídeos, é fazer que esse Lower Nav responsivo Quero que você pratique com isso e nos vemos no próximo vídeo. 24. Projeto de aula 05 — restrições de cartões de eventos: Outro projeto de classe. Não acabamos de fazer um projeto de classe? Nós fizemos. Essa é como uma via de coleta. Faça você mesmo. Vou fazer com que você crie um cartão de evento responsivo. Isso faz isso sozinho. Eu quero que você crie essa coisa, tudo responsivo e bom. Então, as datas ficaram no canto, um pouco de texto e imagem. Ah. Vou deixar você fazer isso. Descubra que esses pequenos projetos são alguns dos melhores para pessoas que estão aprendendo, onde você tem todas as ferramentas. Eu te ensinei tudo o que você precisa saber, mas, na verdade, criar algo próprio, sem acompanhar, pode ser complicado e meio que eliminar todas as habilidades de oh, ok Porque há algumas maneiras de lidar com isso. Porque existe e pode ser complicado, dependendo do seu nível de habilidades no Figma, há um vídeo logo depois disso em que eu o construí Então, se você se perder, pode direto ao assunto e me ver construindo. Mas faça você mesmo e veja aonde você chegou. É um desafio. Eu desafio você. Veja se você pode fazer isso. Seu jeito pode ser diferente do meu. Você pode se perder. Isso é totalmente legal. Mas aposto que você é uma tonelada lunar. Quando terminar, compartilhe um vídeo sobre sua capacidade de resposta. Está bem? Estou aqui à direita porque eu quero que o texto se expanda e se contraia, ok, tornando a caixa maior. Não precisa ser exatamente assim , escolha sua própria imagem. Mais uma vez, estou tentando encontrar fotos minhas. meia-idade provavelmente é muito velha para mim, mas eu também não sou esse cara. Não me importo com o texto e tudo mais. É mais da estrutura. Uma imagem lá dentro, uma caixa de data gruda no canto superior direito. Talvez sejam restrições. Detalhes do evento. Certifique-se de que seja um componente e depois os resultados, um vídeo em que você não possa fazer os vídeos. Uma captura de tela. Essa é uma página legal onde você pode compartilhar nas redes sociais, certifique-se de usar a hashtag Figma Advanced e me marcar nela, para que eu possa dar uma olhada É isso mesmo. Divirta-se criando seu próprio cartão de evento. Veja no próximo vídeo. 25. Projeto de curso 05 - Concluído: Olá. Este vídeo é minha versão de como eu fiz essa coisa funcionar. Você pode acompanhar para ver o quão perto o seu estava do meu. Realmente não importa como você chegou ao resultado final. Mas se você ficou preso, você ainda está preso no momento, você pode me assistir. Nós ficamos um pouco perdidos neste vídeo. Existem alguns pequenos atalhos. Então, mesmo que você tenha entendido e tenha sido bem fácil, dê uma olhada nesta, talvez aumente a velocidade e haja pepitas É o que estou dizendo. Tudo bem, então não há uma regra real de por onde começar, e há algumas maneiras diferentes de fazer isso. Eu vou mostrar o que eu fiz. Quando eu faço isso com os alunos em sala de aula, as pessoas encontram outras maneiras de fazer isso. Portanto, não se preocupe se o seu for um pouco diferente. Vou começar com minha moldura superior aqui, a imagem com a data nela, e trabalharei no texto mais tarde. Então, vou preenchê-lo apenas para que possamos ver o que estamos fazendo. Escolha qualquer cor, desde que seja verde ou aqua. Então, o que eu quero fazer é colocar outra moldura dentro dela, escolher outra cor. Algo claro e eu vou dizer que você vai lá e dentro desse quadro, eu quero dizer que você só precisa estar restrito ao topo e à direita Agora, espero que tenhamos esse pedaço funcionando. Essa é a primeira parte, essa parte inferior, como fazemos isso? Agora, você realmente não quer colocá-lo aqui, quer que esteja em uma caixa separada porque ele precisa fazer algo diferente. Vou fazer uma caixa nova. Eu vou dizer que essa é uma cor escura sem motivo. Vou colocar algum texto dentro dele, colocar os elementos dentro. Tudo bem, estou apenas enviando uma mensagem. Há algumas coisas que preciso fazer é que talvez tenha o tamanho certo. Esse é o primeiro bom passo. Quero que esse texto entre aqui. Eu quero dizer que você não tem esse tipo de largura automática ou tamanho fixo, eu quero essa altura automática do meio , e então vou quebrá-la para que você vá lá. Perfeito. Mas quando eu redimensiono isso, nada acontece porque esse cara precisa ser excluído automaticamente Ok, então eu vou dizer Shift A. Ele está todo enrolado do lado de fora. Perfeito. Agora temos um pequeno texto responsivo em andamento. Não está funcionando. O texto que está aqui agora é a altura automática, mas precisamos que a largura mude com base em seu pai ou no contêiner. Vamos dar uma olhada na largura. uma largura fixa. Não quero focar na largura. Eu quero dizer, eu gostaria que você enchesse o recipiente, por favor. Agora, se o recipiente mudar, ele tenta enchê-lo. Vá. Então, quais são esses dois bits, e você poderia deixá-los separados, mas isso seria estranho Então, o que queremos fazer agora é colocar os dois juntos dentro de sua própria moldura. Ambos selecionados, vou dizer, incriminar esses caras. OK. Vamos dar um nome para que não fiquemos muito perdidos. Bem, na verdade, vamos ver o quão boa é a nomenclatura automática . Então, vamos embora. Vamos renomear. Aí está lá, renomeie as camadas Basta ver o que ele faz. Fica cada vez melhor. Aposto que você é um contêiner. Rodapé. Oh, está bem feito. Contêiner. Vamos chamar isso de imagem. Pensa-se que era a imagem, mas não é. Essa é a data. Chegou perto. De qualquer forma, é um bom começo. Oh, eu gosto disso. Eu tenho um recipiente dentro dele. Eu tenho aquelas duas caixas que eu fiz. Vamos dar uma olhada e continuar testando sempre. Pegue o pai, tudo funciona? Isso não acontece. Por quê? É porque não é saída automática. Este contêiner, saída de áudio, por favor. Vamos tentar. Vamos ver o que ele fez. Estamos construindo isso nós mesmos. Não estamos usando o recurso de IA make do it all for us. Está funcionando. Exceto que o fundo não sobe nem desce. O que eu quero fazer provavelmente é deixar essa caixa de imagem aqui sozinha. Eu só quero a caixa de texto na parte inferior. Desça. O que eu vou fazer é que você precisa fazer o quê? Você precisa encher o recipiente. Então, é a altura desta vez, a largura que fizemos, mas não emprestamos a altura Agora, não queremos que você se abrace, não há abraços aqui, amigo. Vamos encher o recipiente e eu quero que você o encha, mas eu quero que você fique no topo, por favor. Olha o pai. O que estamos fazendo aqui? Funcionou. Oh, vamos colocar mais alguns detalhes e ver se quebramos. Está bem? Mas isso é meio que fundamental. O que as pessoas tendem a fazer, e eu faço. Não há uma maneira real, tipo, mais difícil de fazer isso é começar com os pais, depois começar a trabalhar com os blocos intermediários e depois colocar outro bloco aqui para a data. Você pode fazer isso dessa maneira. É um pouco mais complicado quando você é novo. Se você lidar com isso dessa forma e achar isso muito frustrante, tente fazer as peças individuais primeiro e depois combiná-las. Mas realmente não importa se você tentar construir a estrutura do contêiner primeiro e depois começar a construir coisas dentro dela. É um pouco mais complicado. Tudo bem, eu quero que isso seja uma imagem. Então, eu não posso simplesmente colocar uma imagem aqui porque isso é exagerado Então, vou usar o Command Shift K para trazer minha imagem, Control Shift C PC. Sabe, eu sei que você sabe. Vou trazer isso para cá. O que eu quero fazer é pegar a moldura. Na verdade, eu poderia ter selecionado a moldura e trazida como preenchimento. Eu fiz isso de uma maneira diferente. Então, o que eu vou fazer é pegar isso, roubar o preenchimento disso, copiar, pegar o verde e clicar em colar Eu não preciso mais desse verde. E espero que você se lembre do teste, teste e teste, sempre funcionando? Está funcionando. Legal. Agradável. A seguir está esse texto aqui embaixo. Vou apenas substituir isso pelo Command K. Vou dizer que reescreva isso e vou digitar algo com um ritmo de música mais cantado Eu sei o que é isso. Vamos quatro. Tudo bem. Não tenho certeza do que isso vai fazer. Command Enter para fazer com que o material de IA faça isso. Às vezes, agora você precisa encurtar . Preciso fazer mudanças. Acho que é tempo suficiente. Vamos encurtar porque vou usar uma fonte menor. Se você não tem a IA e gostaria de ter a IA, basta acessar o Chachi BTK gratuito ou digitar o que quiser Tudo bem, tamanho da fonte, eu vou para 16. Você pode sair agora. Eu não sei. Se eu vou ter problemas, talvez eu tenha. Uma coisa que aconteceu lá é você percebeu que não havia acolchoamento. Então eu fiz isso maior e isso não se expandiu. Ainda funciona. Olha, tudo é escalável, mas sim, não o coloquei no fundo Quem sabe por quê? Algumas coisas. Primeiro de tudo, quero fazer com que esse cara tenha altura automática. Além disso, a estrutura principal do pai está funcionando, o acolchoamento é muito pequeno Eu vou dizer que, aqui no estofamento, 24 é ótimo nas laterais Quero que a parte superior e inferior sejam diferentes. Vou te dar um pequeno atalho para quem está saindo há tanto tempo Então, no topo, digamos que eu queira que seja 24. Mas então você pode colocar um pouco de Cameron, Cameron, o teclado. Esse é o topo. Se você colocar um Cameron, poderá fazer a parte inferior até 32. Isso meio que funcionou 100%. Eu tenho 24 no topo, 32. Ok, mas meu texto aqui não está fazendo o que deveria, da altura desse cara. A altura desse cara. Você está cheio. Preenchendo o par e o recipiente. Meu par e recipientes não são grandes o suficiente para o texto. Vá lá, Dan. Então esse truque funcionou. Você pode ver? Eu tenho 32 na parte inferior, 24 na parte superior. Você pode fazer o mesmo para a esquerda e direita. Você pode simplesmente adicionar vírgulas Isso só evita que você realmente não faça muita coisa ao abrir isso. Você pode simplesmente usar vírgulas. Você é um hacker de computador Você é bem-vindo. Tudo bem, outras coisas vão me causar problemas é que eu quero que essa altura, assim como eu digito dois, assim. Está fazendo isso? Não é. E isso é só porque eu continuo arrastando para provar que funciona Quero que esse herdeiro caia no fundo do poço. Então, em termos de altura, há algumas coisas a fazer. Veja, diz, encha o recipiente, então deveria estar fazendo isso. Mas esse pai, onde eu vou, clica em “c”. Esse pai tem uma altura fixa. Ele tem uma altura de 330. Ele está forçando isso a ser maior. Então, posso dizer que, na verdade, eu só quero abraçar o conteúdo. Na verdade, você tem uma altura agora que eu quero que você abrace o conteúdo também. Pode ser um pouco estranho sentar essas coisas. Então, agora o que eu estou procurando é isso. Quando eu digito coisas, digito coisas, e elas ficam mais longas , elas ficam maiores. Incrível. Se eu sair e pegar o pai agora e ele for para um documento maior, posso simplesmente arrastá-lo para fora. Olha para mim. A que distância das bordas? O que eu poderia fazer é ligar meu guia. Vamos até os pais. até aqui, guias de layout. Fizemos isso de forma essencial, vamos colocá-lo aqui novamente. Adicionar guia de layout. Eu não quero grades. Eu quero colunas. Vou clicar aqui e quantas colunas eu quero? Eu só quero um, mas quero que as margens nas bordas sejam 16, 24 Você pode ver as bordas aqui. Você pode usá-lo apenas para que tudo comece a se alinhar. Você Snap. Agradável. O atalho para guias é Shift G, liga-as e desliga-as Está bem? E nós fizemos isso. Precisa de cantos arredondados. Pai, você vai dizer ou tinha cantos arredondados. Cantos arredondados. Oito? Não, 16? Algo parecido. Oh, não funcionou. Por que você não tem um raio de 16 cantos Por favor, espere. Eu posso descobrir isso. Qual é o seu raio Oh, acho que sei o que é. Vamos voltar, para que eu possa provar a você que fiz isso. Vamos ver o conteúdo do clipe. Oh, havia uma boa. Não sei como não acabou com o conteúdo do clipe. Aí está. Ok, então vamos para 16. É muito grande. Eu tenho 12. Embora eu tenha dito usar múltiplos de oito, você pode fazer o que quiser Este é o design dez. Tudo bem, então foi um pouco interessante. O conteúdo do clipe estava errado, então tudo está meio que pendurado do lado de fora, mas agora eu quero dizer tudo dentro desse componente principal. Oh, não é um componente principal. Você vai vir aqui. Vou transformar você em um componente principal, que não consigo lembrar qual é o atalho no momento Oh, o que você é? Ah, isso mesmo. Opção de comando K. Isso é controle, antigo K em um PC. Às vezes, todos nós esquecemos. Então esse é o meu componente principal, e eu vou usá-lo. E esse cara precisa ser cortado, você precisa ir para a página do meu componente. Você pode ficar aqui. Ok, você pode ir lá, você pode ir lá. Opa. Nós fizemos isso. Ah, é muito emocionante. Você pode ir embora agora. Tudo bem, estou muito feliz comigo mesma. Você pode ter feito de uma maneira completamente diferente. Você pode ter passado meio dia trabalhando no seu, mas você meio que entende agora Acho que gosto desses pequenos exercícios. Eles são como alguma coisa. Oh, você não marcou o encontro. marcar o encontro? Na verdade, não há nada até a data. Você simplesmente envia o texto . Um, dois, três. Tudo bem, então basta digitar um texto. Eu vou jogá-lo aqui, e você não foi no lugar certo. Chegue lá. E vou selecionar março e usar Command B ou Control B para deixá-lo em negrito. Nós. O texto ainda funciona. Gancho ok. Isso não funciona. Não está no caminho certo. Então você está fora de tudo isso. Ah, por que eu não pude fazer isso? É porque estou tentando adicionar texto também, o que é? Pausa Você acha? É uma instância do componente principal, não do componente real em si. Uma boa dica é que na verdade, você não pode adicionar coisas às instâncias. Você tem que ir até aqui e dizer, cole aí. Agora, ele deve aparecer em todos eles. Correto. O celular e o texto estão lá. O único problema agora é que eu fiz isso, isso é rosa, e esse aqui é verde. O que posso fazer para isso é que consegui fazer isso na instância, alterar os cantos arredondados e torná-la verde. O que você pode fazer é selecionar a instância inteira, clicar com o botão direito nela e dizer, na verdade, tudo o que eu mudei, você pode ir para o componente principal inserir essas alterações nele, e inserir essas alterações nele, e vamos ver nosso componente. Fiz isso. Olhe para nós. Por que não podemos simplesmente pegar tudo e escolher essa opção que vimos antes? Você consegue se lembrar da versão de IA em que dissemos: “ A”, vamos ver mais opções “A”. Vamos sugerir isso, e não funcionou. É por isso. Às vezes, pode funcionar e quando não precisa conhecer as habilidades de se esforçar e sobreviver Mas eu gosto da resolução de problemas de fazer algo assim Sinto que fiz algo no mundo. Mesmo que seja, apenas pequenos pixels ajustáveis. Tudo bem, é isso. Foi assim que eu fiz. Eu gostaria de saber os comentários, como você fez isso. Alguma coisa estava completamente diferente? Todo mundo fez isso de forma diferente de mim? Isso é o que eu gostaria de ver. Além disso, me dê um horário. Quanto tempo você demorou? Você demorou 10 minutos? 5 minutos. 5 horas. Vamos dar uma olhada. Está tudo bem? Só estou interessado. Eu vou ver isso quando eu estiver. Eu vou dormir. 26. Como fazer uma variante simples no Figma: Oi, todo mundo. Vamos criar uma variante muito simples. Está bem? Você pode ter feito um antes. Eu ia examiná-lo apenas para que todos tivessem uma boa linha de base Está bem? Isso significa que, em primeiro lugar, se você não encontrou uma variante ou já faz muito tempo que não faz as pontuações essenciais, neste botão aqui, ok, aqui, você pode dizer, na verdade, eu quero ser melancia O que é realmente legal nisso está, digamos, no meu painel de ativos, ok , veja, eu só tenho um botão. Mas nesse botão, ok, ele tem duas variantes. Está bem? Mantenha-o limpo e organizado, e isso nos dará as habilidades para criar variantes multidimensionais na próxima Muito sério. Tudo bem, vamos acabar com isso Vamos criar uma variante. Tudo bem. Então, vou começar com um botão que eu criei. Vou criar esse botão no final do vídeo se você estiver interessado, mas qualquer botão antigo. Não há nada além de uma moldura, mas um pouco de texto nela. É uma saída automática. Nada disso é realmente importante para uma variante. Tudo o que precisamos fazer agora é garantir que seja um componente. Vamos fazer isso. Command, Option K Automac, Command K em um PC, você está entendendo Ou você pode clicar no botão aqui. Bosh. OK. O que vamos fazer é dizer, na verdade, que eu gostaria de outra variante disso. Veja esta pequena opção aqui que diz que eu quero dois deles. Eu tenho uma variante. Eles são dois semelhantes, então tecnicamente são uma variante, mas vamos mudar a cor dessa parte inferior Vou clicar no quadro principal. Eu vou dizer, role para baixo, preencha a cor. Vou escolher a cor de melancia que estamos usando. Agora variante. Precisamos dar um nome, mas é isso. Vamos dar uma olhada. Deveríamos fazer isso, eu vou cortar. Vou acessar minha página de componentes. Você deveria estar aqui, amigo. Vamos fazer tudo certo. Isso é chamado de conjunto de componentes. Veja a linha pontilhada ao redor do lado de fora. Figman chama um conjunto de componentes. Não se preocupe com isso, mas ele aparecerá . Há um componente. Coloque mais de um deles lá, que são suas variantes em algo chamado conjunto de componentes. Muitos termos. Tudo bem. Vamos ao nosso celular Hi Fi. Vamos ao nosso painel de Ativos. atalho que começaremos a usar a partir de agora é se você mantiver pressionada a opção KemackOpc e um em dois, um em dois, um em dois, um em dois é fácil de passar do arquivo para os ativos. O que é isso? Opção um e dois, um e dois ou Alt no painel Ativos, vamos dar uma olhada nos arquivos desta biblioteca. Vamos aos do nosso painel de componentes. Excelente. Aqui está nosso botão. Arraste-o para fora. A coisa boa sobre ele é que ele tem uma variante aqui Padrão? Não, não o outro. Ah. Legal. As variantes são incríveis. O que devemos fazer agora, porém, é voltar para nossa opção ou Alt one, voltar para nossas camadas. Arquivos. Vou até meus componentes e vou dizer. Vamos dar alguns nomes. Vamos selecionar o todo. Como é chamado? Você se lembra do que significam as linhas pontilhadas? Conjunto de componentes. Você entendeu. Com o selecionado aqui, tenho várias propriedades que posso renomear É só dar a eles o material padrão. Clique nessas pequenas configurações como uma propriedade Editar. Isso é o que é. Clique nele e vamos dar um nome, esse vai se chamar. Eu abotoo. Eu tenho alguns valores. Ok, volte lá. Eu tenho alguns valores. Na verdade, o nome disso não é botão, é cor. Está bem? Então, estamos nomeando nossa variante, não o nome do botão real. Nós já fizemos isso. Eu quero chamar essa variante de variantes de cores diferentes. Oh, continue pulando dessa. Onde diz padrão, quero que um seja, digamos, verde e o outro seja melão Ater Nada realmente muda , exceto quando estou de volta ao meu celular Hi Fi, clico aqui. Faz um pouco de sentido. Olha, eu tenho cor. OK. E eu tenho verde ou melancia Isso torna mais fácil para outra pessoa usá-lo e para você. Vá lá, vamos dar nomes às coisas. Sr. Sem título 57 ou, neste caso, quadro 57. Dan gosta de esconder as pessoas, mesmo que ele tenha coisas muito mal nomeadas quando está trabalhando sozinho. Não me diga uma. Tudo bem, então é assim que se constrói uma variante muito simples do Figma Vamos criar o botão agora se você estiver interessado. Se você sabe como criar um botão, o que provavelmente sabe, vá para o próximo vídeo, mas eu vou criá-lo juntos. Vamos sair. Tudo bem, vamos fazer isso tudo de novo. Vamos fazer o botão, mas acabei gravar com o microfone desligado. Vamos fazer isso de novo. Adoro fazer isso duas vezes. Tudo bem, vamos até a ferramenta de moldura, desenhe qualquer tamanho antigo Vamos dar a cor do botão que queremos usar. Eu vou usar isso. começar a fazer algum estilo de cores em breve. Algumas coisas estão acontecendo, Dan. Vou pegar a ferramenta F. Não, vou pegar a ferramenta Type, que é o Tiki. Clique no interior em qualquer lugar e basta digitar o botão. Estou usando letras maiúsculas e estou usando um robô Um tamanho de botão muito comum é 16. É facilmente visto. Está tudo bem, agora eu deveria alinhá-lo no meio. Eu apertei escape para sair da ferramenta de digitação. Eu deveria alinhá-lo no meio, mas o que posso fazer é clicar no quadro principal. Então eu tenho essa moldura aqui, que vou chamar de botão de botões. OK. Com ele selecionado, o pai com um texto dentro dele, se eu simplesmente pressionar Shift A, eu me transformarei em Auto Lout e, por padrão, você pode ver que ele se abraçará ao redor do texto, o que é perfeito Abraçar é perfeito, porque significa que podemos digitar mais e você vê o botão se expandir, o A única coisa, porém, é que o padrão um preenchimento aleatório com base no tamanho original Em termos de preenchimento que eu quero fazer , comece com a largura, 24, vou passar a aba e pressionar oito na parte superior e inferior Ele é meu pequeno botão aqui embaixo para o raio da esquina. Eu posso usar minha seta para cima, olhar para cima, se você quiser ser perfeitamente redondo, você só precisa estar acima. Sempre que os raios começarem a diminuir, deixe-me ampliá-los aqui. Você pode ver o que eu quero dizer? Você entende o que quero dizer, se eu fizesse 16, você ficaria tipo, é redondo. Mas se eu fizer esses 100, é massivamente redondo e tem que ser o círculo perfeito Então, basta inserir um número gigante e ele será arredondado nas pontas. Eu fiz isso para o caso de você estar interessado. Tudo bem. Te vejo no próximo vídeo. 27. Como fazer uma variante multidimensional no Figma: Olá. Ei, vamos aprender neste vídeo a variante multidimensional Está bem? Eles são sofisticados, principalmente porque fazem isso com essa voz, mas nos permitem levar as variantes para o próximo nível, ou seja, as vozes Isso significa que esse botão não tem apenas uma variante, como a cor, temos variantes multidimensionais Essa é uma palavra chique. É por isso que eles chamam isso, mas significa apenas que eu tenho duas coisas diferentes. Eu posso ir, quero ser verde, mas também quero que seja delineado Essa coisa aqui, ok? É um pequeno ativo adorável. Você o vê lá, o botão Zoom. Você o arrasta para fora, mas ele tem todo tipo de coisa. Ele tem cores e valores diferentes. Ter mais de uma propriedade significa apenas que ela é multidimensional, não tão sofisticada quanto parece Basta ir e construir um. Tudo bem. Hora de ir. Tudo bem. Então, o que vamos fazer é começar com a variante simples que criamos no último vídeo e desenvolvê-la começar com a variante simples que criamos no último vídeo e desenvolvê-la para torná-la multidimensional Tudo o que precisamos fazer é, adivinhe? Agora é multidimensional. Temos uma terceira opção. Então, na verdade, essas são apenas três variantes. O que queremos fazer é mudar isso um pouco. Então, o que eu vou fazer é entrar no modo rápido e fazer com que seja um esboço Ok, eu vou fazer outro. Para fazer outro novamente, você pode apertar este pequeno botão de adição. Há uma opção aqui em cima. Não, tem um deles. Não, tenho certeza que há um botão lá em cima também. Então, aperte esse botão ou controle D. Eu não acho que você possa copiá-los e colá-los. Não, por algum motivo, você não pode copiá-los e colá-los. Aqui vamos nós. Vá lá, D. Também vou mudar essa cor . Você espera lá. Tudo bem, então eu tenho esses. Eu poderia simplesmente deixá-los assim e, quando os estiver usando, posso pegá-los e dizer: A, eu tenho todas essas opções diferentes. Mas o que vou fazer é torná-lo multidimensional. O que isso significa é que vou pegar meu conjunto de componentes e dizer que tenho uma propriedade. Eu quero adicionar outro. Vou adicionar outra variante. Este vai se chamar fill. Eu estava apenas tentando pensar como ele poderia ser chamado e o valor padrão seria sólido. O que estamos tentando descobrir aqui é que, quando eu seleciono isso, vou dizer que você, meu amigo, é verde e sólido. Você é melancia e sólida. Você ficará verde, mas também adicionará um novo, você será um contorno Essa é a primeira propriedade que fizemos e essa é a dimensão extra. Multidimensional. Mas você tem que dizer que isso é multidimensional Temos cor, somos preenchidos, somos incondicional. Esse aqui, o que você é? Você é da cor quatro. Não, você é melancia e vai ser esboçado O que isso significa agora é que quando eu pego esse belo botão simples, lembre-se de que, no painel Ativos, a opção Alt, dois, um, dois, alterne o painel Ativos. Este lindo botãozinho aqui. Para arrastá-lo para fora, ele é multidimensional. Ele tem cor e tem saciedade. Eu vou dizer que você é melancia. Mas eu quero o esboço. Vá. Eu estava com medo de fazer variantes multidimensionais por um longo tempo. Parecia assustador. Multidimensional, tudo parece difícil. Está bem? Mas é complicado Estou tentando ficar calmo, dê para você. É muito fácil. Mas quando você faz isso pela primeira vez, você pensa: Isso não faz sentido. Está bem? O que eu costumo fazer é meio que esmagá-lo até que você tenha pelo menos quatro desses Então esqueça de tentar fazer coisas sofisticadas e venha até aqui e certifique-se de que há duas propriedades primeiro, depois aperte cada botão e diga Tudo bem, eu quero que você leia esta lista E se não houver algo que você queira aqui, basta clicar em ADN. Ok, o mesmo aqui embaixo, você fica tipo, Ok, eu não preciso ser verde. Há uma terceira cor, então vou adicionar uma terceira cor. Ou é a cor certa, mas não há nada aqui embaixo, então preciso adicionar uma propriedade. Se não houver, se você tiver a propriedade certa e disser: Tudo o que eu preciso é adicionar uma nova dessas. Essa geralmente é a maneira mais fácil. Eu quero que você termine aí, saia daí, se sinta confiante. Agora vou te dar uma forma mais avançada porque estamos no curso avançado. Há outra maneira de fazer isso. Talvez seja mais fácil para você. Você é tipo, cara, isso explodiu meu cérebro. Ou você pode dizer: Eu adoro fazer isso de duas maneiras. Por que aprender a fazer isso? que eu fiz aqui é que acabei de fazer um círculo com um sinal positivo nele. Se você clicar nos botões de mais e menos, geralmente é melhor, em vez de tentar encontrar um símbolo, encontrar uma fonte na qual você gostaria de inserir o Costumo usar esse aqui, chamado de primeiro dia, mas você pode ver que posso prosseguir e encontrar uma vantagem de que gosto. Você pode gostar mais desse plus do que desse plus. O que você pode fazer então é clicar com o botão direito do mouse e ir para o esboço Ou não é? Traço de contorno Então é como um quadrado. Você não pode mudar a fonte, então você provavelmente precisa fazer isso primeiro e pronto, eu preciso de você? E depois descreva-o. Ou quem se lembra do doce atalho familia? Se fizermos um traço e depois um maior que, pegue uma flecha. Essas flechas não são muito boas. Qualquer outra pessoa tem uma flecha melhor. Todos nós temos estilos diferentes. Vamos fazer isso de outra forma. Você vê? Trabalhe e veja quem faz uma flecha melhor. Apenas usando fontes. Claro, você pode ir a algum tipo de biblioteca de ícones em algum lugar, isso funcionará. Coloquei-os no meio. Tudo bem, isso foi um pouco tangente. Então, a razão pela qual quero mostrar isso é que vou colocar vocês lá, porque vou usar vocês mais tarde, é que eu tenho esses dois, ok? Então, criamos uma variante. Mas o que podemos fazer é, em vez de fazer o que fizemos, criar uma primeira variante, duplicatas e depois dividi-las todas O que podemos fazer é dizer: Tudo bem, eu quero esses dois E você acabou de construir todos eles primeiro. Então, eu quero que esses dois sejam conta-gotas. Então, eu tenho tudo isso primeiro. Todos eles precisam ser seus próprios componentes. Um dos grandes problemas é que eu não os agrupei, ok? Então, se eu criar vários componentes aqui, mostrarei isso porque você fará isso. Você vai, tudo bem, eu vou fazer o que vamos fazer? Vamos fazer vários componentes. OK. Agora temos um, dois, três, quatro, cinco, seis, sete, oito componentes. Vamos desfazer isso O que vou fazer é agrupá-los primeiro, grupo, grupo, grupo, grupo. Na verdade, vou te mostrar uma maneira. Estou ficando muito distraído. Agora eu posso criar vários componentes. A outra maneira é fazê-los um de cada vez. Mas temos um, dois, três, quatro. Eu tenho tudo isso. Vou selecionar todas elas e vou dizer variantes de combinadores Por que não fazemos dessa maneira, Dan? Ah. Na verdade, isso provavelmente é mais fácil, não é? Sim, ainda fica bagunçado. Então, estamos neste momento. Não foi difícil criar isso. Não é difícil chegar a esse ponto. A próxima parte é o que queremos precisamos de algumas propriedades. Eu tenho um. Vamos clicar duas vezes na propriedade um e vamos chamá-la de uma cor. Cor. Vou adicionar outra propriedade. Vai ser uma variante, e vou chamar essa. O que você chama de positivo ou negativo? Às vezes, meu cérebro não funciona. Você só espera valor. Eu posso criar a propriedade deles. Se você não tem certeza do que é, o valor é algo É um bom genérico para todos. Agora vamos clicar nisso. Você é da cor do grupo um. Não, vamos chamá-lo, renomeá-lo. Vamos chamar esse. Verde, é esverdeado, e é um valor de, vamos chamar isso de padrão vamos chamar esse de positivo ou positivo Não sei se devemos usar o símbolo de adição ou escrever a palavra positivo. Não tenho certeza do que é mais fácil. Mas este aqui é de que cor. Vai ser verde, verde. Vai ter um valor de não termos um sinal de menos, vamos adicionar um novo, e vamos dizer, você é um sinal negativo, meu amigo Apenas trabalhe do seu jeito . Essa aqui, cor do grupo dois. Esse não é um nome muito bom. Vamos chamá-la de melancia E um valor de A, temos um positivo. Agora, este aqui deve ser fácil porque temos melancia e temos um valor negativo Tudo bem. A mesma coisa. Faça uma coisinha, pratique com os dois e veja qual você gosta da opção. Qual deles você acha que é melhor? O painel Get Assets, o mais legal de tudo, provavelmente precisa de um nome melhor. Posso fazer isso aqui? Não, não posso fazer isso aqui. Você deve ser capaz. De qualquer forma, vamos para Option ou Alt one para voltar aos nossos arquivos. Vamos aos componentes. Você tem um nome terrível chamado Componente Um. Você pode nomeá-lo aqui, ok, ou você pode nomeá-lo aqui. O que é isso? Parece que vai ser, mas não consigo pensar em como chamá-lo. Não é possível chamar um valor. Por favor, espere. Não consigo pensar em uma palavra. Estou chamando isso de Zoom. Em Oti. De qualquer forma, então há um pouco de nome para isso. Vamos voltar ao nosso celular de alta fidelidade. Vamos até a Opção ou a Alt two para acessar nosso painel Ativos. Arraste meu botão Zoom, ok? E vamos dizer multidimensional. Olhe para nós. Tudo bem. Portanto, a versão geral é que não importa como você chega lá, mas você só precisa de um conjunto de componentes. Em seguida, você avança até aqui , adicionando valores diferentes, adicionando variantes diferentes, propriedades diferentes e, em seguida, dando eles nomes melhores à medida que avança. Não importa se você gosta daqui, comece com eles já feitos e trabalhe-os dessa forma, ou comece com um e continue duplicando-os e adicionando os valores De qualquer forma, acabo fazendo dessa maneira, por algum motivo. Não sei por que, mas você pode gostar desse jeito. Tudo bem, são componentes multidimensionais. Me sentindo bem, me sentindo avançado. Isso é coisa avançada. Agora, o legal disso é que você encontrará bibliotecas de outras pessoas que as terão e saberá o que significam as linhas pontilhadas Você não se lembrará do nome deles, mas sabe o que eles fazem. Você vai dizer, Oh, eu posso pegar um desses e dizer, Tudo bem, ele tem várias dimensões Bom. Tem muitas variáveis diferentes. Extravagante. Tudo bem. É isso mesmo. Vamos para o próximo vídeo. 28. Projeto de aula 06 — variante multidimensional: É o projeto número seis vezes. Está bem? Esta é uma variante multidimensional Então, basicamente, exatamente o que fizemos no último vídeo, exceto que eu quero que suas duas propriedades diferentes sejam tamanho e cor, faça uma captura de tela do conjunto de componentes Isso é uma linha pontilhada, e eu quero ver isso aqui também, suas propriedades para ver todas elas bem nomeadas Vou verificar e enviar isso para as tarefas. Você não precisa compartilhar isso nas redes sociais porque é um pouco chato. Muito útil, mas não muito estimulante visualmente. Uma coisa que eu quero te mostrar, porém, é, bem, eu quero que você tenha certeza de que ele faz isso. Eu posso dizer: Tudo bem, eu quero escolher verde, mas eu preciso desse pequeno Assim como fizemos com o esboço, mas estamos fazendo o tamanho. Uma coisa que eu queria mencionar é antes de você ir, esses componentes aqui, às vezes você pode, digamos que eu pegue todos vocês porque quero outras variantes. Eu quero três deles. Eu realmente não quero que você faça isso. Mas digamos que você fez isso porque é louco. Você queria os tamanhos, as cores, mas também se estava preenchido ou delineado Eu vou para o Comando, pego um monte deles e você vai, mas é melhor se eles estiverem aqui. Eles acabam saindo disso. É muito ruim. O que você pode fazer nesta linha, é isso que eu quero te mostrar. Essa linha pontilhada aqui, na verdade, não é automática. Você apenas o arrasta. Você pode dizer, certo, que esses caras se sentem melhor aqui. Vocês podem ir lá. Você não deveria ser, sim, você pode criar uma terceira propriedade, o que eu não quero que você faça com o esboço. Eu quero que você faça este. Esse garotinho aqui com as duas cores e os dois tamanhos. Eu só queria que você soubesse que você pode ajustar os tamanhos. Clique na moldura e , em seguida, sacuda-a. Tudo bem. Antes de eu quebrá-lo, B, costas, costas, costas, costas, costas, você pode continuar com a sua enquanto eu estou me desfazendo. Tudo bem, divirta-se fazendo sua variante multidimensional. Eles podem ser complicados. Eles são muito gratificantes quando você os faz funcionar, especialmente quando você pode entregá-los aos seus colegas de equipe No futuro, você terá esse botão muito fácil de usar, que evita que meus ativos fiquem loucos Está bem? Acabei de ter um botão que faz todas essas coisas diferentes. Tudo bem, faça sua lição de casa, sem lição de casa, e te vejo no próximo vídeo 29. Variável — modos claro e escuro: Primeiro, vamos aprender o que uma variável faz. Você pode usá-los de forma realmente simples Figma. Você pode usá-los muito intensamente. Vamos começar bem e de forma simples. Vamos fazer um modo claro e um modo escuro. Veja esse texto aqui, arraste-o até aqui. Mudou de cor. Eu sei. Estou muito animada. Eu sou um desenvolvedor comum de Coda slash. Eu copio e colo um pouco de frond pensando que sou um hacker de computador, mas adoro soluções simples como essa mas adoro soluções simples . Fica ainda melhor assistir isso. Se eu pegasse esses e os arrastasse até aqui, tudo mudaria. Mas se eu for com os pais e disser , na verdade, quero que você fique no modo escuro. A coisa toda muda. A mudança de fundo. Você viu isso? E o texto mudou as variáveis. Se você é um desenvolvedor, vai ficar tipo, Uau, revirando os olhos Isso não é tão incrível. Mas se você é como eu, pode ficar muito entusiasmado com as variáveis. Vamos todos ficar animados. E vamos começar. Algumas variáveis. Breve, então vamos fazer isso. O que eu tenho é apenas texto em uma página. É isso mesmo. Não há nada de sofisticado nisso. Vamos criar nossa primeira variável. Agora, você descobrirá que eu continuo dizendo variante. Varie o que fizemos anteriormente. Esse botão tem duas variantes diferentes aqui. Variáveis muito diferentes. Onde você encontra suas variáveis? É isso mesmo. Não tenha nada selecionado. O que você descobrirá é que há uma pequena opção. Variáveis. Você pode clicar nele. Não temos variáveis. Vamos clicar em Criar. Que tipo de opções diferentes. Vamos abordar as cores no momento. Faremos mais tarde no curso. Traga-nos aqui e comece. Vamos colorir. Agora, isso muda. Se você tem a versão gratuita, talvez tenha chegado até aqui. Pode apenas pedir que você o transfira para uma equipe. Existem algumas opções gratuitas. Há momentos em que a opção paga entra em ação. Isso mudou com o tempo, então não posso fornecer fatos sólidos agora porque pode ser diferente. Você está no futuro. Eu estou aqui Talvez você precise assistir se tiver apenas a versão gratuita, mas provavelmente concordará com ela. Tudo bem, então o que você tem? Nós temos isso. É só uma pequena mesa. Essas são minhas variáveis. Eu tenho um aqui. É chamado de cor. Vamos dar a ele um nome melhor. Vou ligar para esse. Texto. É minha variável de cor chamada Texto, e eu quero ter duas opções, dois modos, como eles os chamam. Eu quero um modo de luz, modo de luz. No modo claro, quando tudo está claro, o texto precisa estar bem escuro, porque simplesmente está. Vou mover isso aqui para que eu possa ver, coloque algumas pequenas amostras aqui para tornar isso mais fácil No modo claro, quero um verde escuro para o texto. Oh, você criou uma variável. Não faz muita coisa, mas vamos aplicá-la. Vamos clicar no título, ele é aplicado como um estilo, especificamente aquela variável de cor. Se eu entrar aqui e obtiver uma cor de campo de apenas uma cor aleatória que escolhi, posso ir para meus estilos. Você pode usar os estilos. Ainda não criamos nenhum. Nós fazemos isso? Claro que deixamos isso claro em algum momento. Há alguns outros pré-fabricados lá dentro. Mas tem isso. Eu deveria dizer variável acima dela. Não envia mensagens de texto. Você pode ver que é a cor. Vamos aplicá-lo. É como um estilo. É muito trabalhoso só para isso. Mas não se preocupe, fica mais emocionante. vamos selecionar nada e vamos às variáveis. Vamos usar outro modo clicando em mais aqui, vamos chamar isso de modo escuro, modo escuro. No modo escuro, o texto realmente precisa estar bem claro. Vou escolher apenas uma cor de interface. Eu gosto de usar o EEE. Ok, basta separar todos os seis ovos. Tudo bem Criamos outro modo para nossa variável. Vamos clicar aqui. Na verdade, vamos pegar esse cara, vamos copiá-lo. Vamos clicar aqui, vamos colá-los e você fica tipo, estamos no modo escuro. Aqui, preenchido, você não faz isso aqui. É aí que eu continuo. Você fica tipo, eu vou clicar nisso. Não há cor clara. Para onde foi? Todos eles aparecerão sob a aparência. Esse cara tem uma variável aplicada de texto. O que eu posso fazer sob a aparência, veja essa pequena amostra aqui, eu posso aplicar um modo variável Lembre-se de que criamos dois modos. Eu tenho uma coleção chamada Light mode. Bem, já estava no Modo Light. Eu posso ir aqui e dizer que você está no modo escuro. Oh, muito emocionante. É isso? Oh, fica melhor. Veja isso. Vamos deletar esse. Vamos aplicar a mesma coisa aqui. Vamos lá, Phil, você tem um estilo dessa cor de texto, que é verde Se eu pegar os dois, copiá-los, colá-los, selecionar os dois, posso dizer que você está no modo escuro e todos eles mudam. Oh, fica ainda melhor. Não sei por que gosto disso. Vamos adicionar outras variáveis. Não tenha nada selecionado, vá para variáveis. E aplicamos texto. Vamos criar outro. Não, não é outro modo. Você pode arrastar isso para um tamanho maior. Eu não quero aquele terceiro modo que eu fiz, como me livrar dele. Clique nele, exclua, você exclui o modo, basta. Eu não quero outro modo. O que eu quero é outra variável aqui. Outra cor, e essa vai ser uma cor. Vamos chamar essa interface ou plano de fundo, como você quiser chamá-lo. Vou chamá-la de interface só porque é um pouco mais genérica. Uma cor de interface quando estou no modo claro provavelmente deve ser bonita e clara porque é o plano de fundo. O texto precisa se destacar disso. Aqui, vou usar meu EEE. No modo escuro, porém, a interface precisa estar bem escura para que possamos ver o texto claro. Eu vou dizer, eu vou usar essa cor. Copie-os, coloque-os de volta aqui. Você pode ver no modo claro o texto está escuro. A interface é leve e os opostos estão aqui. Se você é um desenvolvedor, você pensa: Isso é muito fácil. Se você gosta mais do lado do artista de design criativo, está hackeando a matriz Isso é o que eu sinto que estou fazendo quando estou fazendo essas coisas. Ok. Então, o que fizemos? Vamos ao que interessa. Digamos, eu quero que todo esse quadro de pais tenha o preenchimento de “vamos lá”. Agora temos duas opções. Eu quero ser a cor da interface. Oh, isso muda. Ele muda para qualquer que seja o primeiro, o padrão. O legal disso é que eu posso dizer: Tudo bem, eu preciso desse texto aqui. Se depare. Vou duplicar, manter pressionada a tecla de opção, trazê-los aqui e nada realmente aconteceu. Isso foi nada assombroso O que vamos fazer é mover isso para cá e desligar todo o B que eu disse que era muito específico. Eu disse, você definitivamente vai ficar no modo escuro. Basta transformá-lo em Auto. Agora esse cara aqui, ele está no Auto, que no caso do primeiro é o modo leve Então, aqui, ele é perfeito. Mas se eu disser, Ei, todo esse quadro não está sob o comando de Phil, lembre-se, eu ainda quero voltar lá Vamos à aparição. Então, na verdade, aquela moldura e qualquer coisa dentro dela, agora é aqui que fica um bom modo escuro. Ah. Agora, fizemos isso com o plano de fundo e o texto. Você pode ter botões. Eles têm variáveis, modo claro e escuro. Tudo o que você precisa fazer é alterar a moldura principal, tudo o que está dentro dela. Você não precisa ir. Você é um novo estilo e o muda. Tudo vem junto com o passeio. Você está animado? Vamos criá-lo desde o início. Vamos. Oh, eu gostaria de te mostrar isso. Eu vou fazer uma nova versão, ok? Essa é sempre a mais empolgante. Está bem? Eu vou dizer que você é membro aparente. Está bem? Eu vou para o Modo Light? O legal disso é que eu não apliquei nada nesse, lembre-se, esse tem a aparência de nada. Ele estava no Auto. Mas se eu arrastá-lo até aqui, veja. Ah. Sim, isso estava na introdução Tudo o que precisávamos fazer era criar algumas variáveis realmente básicas. Como você está se sentindo? Você é tipo um hacker de computador. Tudo bem Essa é uma boa variável fácil. Eles podem ficar muito complicados. Vamos ficar um pouco mais complicados na escada do curso Vamos fazer mais um agora, antes de deixarmos terras variáveis. O cérebro derrete muito cedo no curso. Tudo bem Nos vemos no próximo vídeo. Na verdade, antes de prosseguirmos, eu só quero reiterar esses trechos de texto, embora eles não estejam configurados para, digamos, o modo escuro, eles estão deixando os pais fazerem isso Na verdade, você ainda precisa aplicar a variável. Então, se eu pegar um texto agora e dizer, e digitar aqui, posso seis? Eu digitei no quadro. Digite dois, digite aqui, digitando O que você descobrirá é que isso não mudará. Ainda está branco. Mesmo que os pais tenham uma cor diferente. Você precisa pelo menos aplicar a variável, então podemos dizer que você tem uma cor de preenchimento de cor do texto. Não fomos até aqui e dissemos que você tem uma aparência de modo claro ou escuro porque não importa aonde ele vá, ele será dessa cor. O que fazemos é simplesmente deixá-lo , não mexer na aparência. Voltamos ao Auto, que, na verdade, quando eu clico novamente nele, desaparece, enquanto meus pais, lá está, desaparecem. Eu acabei de deixá-lo. Eu coloquei aqui embaixo, o texto. Tem a variável de texto aplicada. Mas agora tudo que está dentro dela, porque meus pais dizem, faça isso, ou as crianças vêm para passear. É isso mesmo. Vamos para o próximo vídeo. 30. Projeto de aula 07 — Variáveis de cores: É melhor não pedir que criemos nossas próprias variáveis. Eu vou fazer isso. Basicamente, exatamente o que fizemos no último vídeo. Apenas copie isso. Veja como você vai. O único tipo de mistura é que eu quero que você adicione um logotipo, que é apenas texto. Portanto, é exatamente como o corpo do texto e o título. Você só precisa aplicar a variante, deixá-la em Auto e ela deve mudar. Então, eu quero que o texto mude e eu quero a interface. Então, ele terá dois modos, claro e escuro. Onde eles estão? Esses são esses dois modos e duas variantes. Texto e interface. Você pode chamá-lo de algo assim, Texto, só porque torna um pouco mais fácil quando você está olhando para isso, mas é um pouco mais fácil ver quando você está aqui, você pode ver, tudo bem, isso tem que preenchido com texto variável. Caso contrário, você fica tipo, que diabos é isso? Não está muito claro. Algumas pequenas coisas que eu não fiz no último vídeo que quero compartilhar com vocês, você pode quebrá-las. Você pode dizer, não faça mais isso. Basta voltar para a cor. Além disso, você pode ver no seu painel de camadas. Você pode ver por aqui? Temos o modo claro e o modo escuro. Isso pode ser muito útil, especialmente se não estiver mudando Descobrimos que, se eu pegar o título e forçá-lo a aparecer no modo escuro. Está bem? Eu tento arrastá-lo até aqui, não muda. Mesmo que esse pai esteja dizendo que está no modo leve, simplesmente não faz o que queremos. Sabemos que, na verdade, não pode ser configurado como algo, defina-o como Automático e ele seguirá o exemplo desse pai. Volta, avança. O que é realmente útil é vê-lo aqui. Você pode ver se eu vou e o forço a ficar, digamos, no modo leve. Você pode ver aqui? O pai tem uma variável aplicada. Essa é essa pequena pílula aqui. Mas esse título está fazendo suas próprias coisas. Ele diz: “Bem, que se danem vocês. Estou apenas no modo leve. Eu não me importo com o que mamãe e papai são. Tudo bem. Legal. Então construa Jerome, faça uma captura de tela de Eu te mostrei lá, meio que vendo os dois dispostos. Porque você pode mover isso. Se você clicar em nada, pegar as variáveis e arrastá-las. Está bem? Faça-o maior. Então, pegue-o da maneira que você criou, para que eu possa ver tudo em uma grande captura e faça o upload para a seção do projeto da classe Tudo bem. Divirta-se Boa sorte Espero que você fique tão empolgado quanto eu quando funciona e possa arrastá-lo e fazer coisas, mas é complicado Se você está arrancando o cabelo e fica tipo, isso é o que eu fiz Claramente, estou sentindo falta de muita coisa aqui. Mas se você está achando isso muito difícil, não se preocupe. É muito difícil. Você sabe que se você não pode fazer isso funcionar agora, tudo bem. Vamos abordar isso novamente mais tarde no curso. Vamos abordar mais algumas variáveis. Na verdade, acho que faremos mais uma vez só para conseguir uma casa e depois faremos um pouco mais na aula. Tudo bem, feliz criação de cores variáveis. 31. Como criar o total do carrinho usando variáveis de número no Figma: Olá, pessoal. Nós vamos fazer isso. Assista, clique, clique, clique. E de baixo para baixo. Oh, eu adoro isso. É chamado de variável, como fizemos em outro vídeo. Essa é uma variável numérica. Clique em nossos botões. Eles sobem, nós compramos ingressos. Se você disser, Oh, eu posso fazer isso, basta vincular várias páginas. Olha, não temos um monte de páginas. Acabamos de pegar esses garotinhos. Vamos começar. Vamos comprar alguns ingressos de techno usando variáveis numéricas Tudo bem, para começar e nada a ver com variáveis numéricas, vamos ser incríveis e usar Option ou Alt to Troque ativos. Vamos pegar nosso botão que fizemos anteriormente, e eu vou ter um com o segundo conjunto. Você pode ver como isso é legal agora, e eu quero usar a cor da melancia Gosto disso. Vou colocar esse lado em mais dois. É ótimo poder realmente usar algumas das coisas que criamos. Vou pegar o F k, fazer uma caixinha como você viu no começo. Vamos preenchê-lo com branco. Vou colocar um texto dentro dela. Vai ser um grande e velho zero, na verdade, um pequeno e velho zero. Basta colocá-lo no meio. Vamos torná-lo maior. eu vou dizer, vamos nos concentrar 24 para rir, eu vou dizer, vamos nos concentrar. Você vai ver daqui a pouco. Tudo bem Então, o que vamos fazer? Vamos começar algumas variáveis. Não teremos nada selecionado. Vamos abordar as variáveis. Vamos clicar aqui, e temos os que fizemos anteriormente. O que podemos fazer é criar uma variável e vamos fazer o número a seguir. Mas então você começa a misturar tudo e fica tipo, novamente, é um pouco confuso O que eu gosto é que você pode clicar nessa abertura , se ainda não estiver aberta, e você pode dizer, na verdade, eu quero dar um nome a essa coleção. Esse aqui vai se chamar material colorido. Ok, eu vou fazer outra, criar uma nova coleção, e isso vai ser um número de coleção. Eles ainda estão lá. Eu tenho coisas porque ou coisas coloridas, e eu tenho coisas numéricas. Vou trabalhar em coisas numéricas apenas para mantê-las separadas. Eles podem ir juntos. Vamos criar em um número um, o que vamos fazer? Em vez desse número chamado. Vamos chamar isso de total, para que fique um pouco mais claro E o valor, vamos mudar esse valor para algo como cinco, só para que possamos ver o que ele faz. Ok, legal. O que vamos fazer é mover isso para cá, mover aquilo para lá, para que você possa ver os dois. Tudo o que precisamos fazer é dizer essa caixa de texto, não a externa, mas na verdade podemos dizer a externa Mas este aqui, eu gostaria agora, não é um preenchimento e um estilo, porque assim que fizemos os últimos. Os números são diferentes. Vou entrar aqui em números, e o que fazemos é o caminho até o topo aqui. Veja este pequeno ícone aqui. Esse é o ícone da variável. Você vê isso de vez em quando, costumava estar em todo lugar. A atualização mais recente da interface do usuário, eles a removeram um pouco, mas você a verá aonde quer que vá. Está vendo lá? É isso mesmo. Hexágono, Pentágono, Pentágono, Pentágono . Acho que é o Pentágono Mas você verá isso em alguns campos, alguns têm, outros não significam que eu possa aplicar uma variável à altura da linha. Eu não quero. Eu só quero te dar uma ideia. Porém, este aqui vai aplicá-lo a esta caixa de texto. Qual deles? Eu poderia. Eu só posso aplicar o total. Joguei-o e mudou para cinco. Essa variável agora está conectada a essa caixa de texto. O bom disso é que posso dizer que, na verdade, quero que seja 15, ou volte ao zero. Vamos colocá-lo em zero, mas podemos ver que eles estão conectados. A próxima coisa que precisamos fazer é encerrar isso. Há duas partes nisso. Essa é a mais complicada A cor, quando dissemos, na verdade, a fizemos em toda a moldura. Fizemos isso sob preenchimento. Isso ficou claro, queremos que o preenchimento tenha uma determinada cor de interface. Isso foi legal. Você viu isso no começo. É um botão no qual você clica. É uma interação que acontece no protótipo. Isso me incomoda toda vez que eu faço isso. Na parte. Oh, eu me lembro. Porque o que eu quero fazer é que quando esse botão é clicado, isso mude Terminamos com o número agora. Não precisamos nem um pouco dele. Ele está conectado. O que precisamos, porém, é o botão para dizer a esse cara o que fazer. Você faz isso sob o protótipo. Em protótipo, quero adicionar interação como fizemos antes Eu quero dizer, quando essa coisa é tocada, que ação eu quero fazer? O que fizemos foi navegar dois. Muitas vezes, simplesmente vamos para outra página. Esse é o que queremos. Queremos definir uma variável. É aqui que as coisas ficam um pouco estranhas. Algumas coisas acontecem. Você tem essa interação. Você pode ver essa coisinha aparecer? Então, se você está pegando emprestado o arquivo Figma de outra pessoa, um dos arquivos da comunidade, e ele está fazendo coisas, você fica tipo: “Como diabos ele está Então, basta um protótipo e veja se você consegue dar a volta e dizer, olha, há algo acontecendo aqui E o que eu gosto de fazer é com esse botão selecionado, em vez de trabalhar aqui, eu não gosto dele. É muito desapegado Não sei por que exatamente o mesmo menu suspenso , se você fizer isso aqui, parece mais vinculado. Não importa como você faz isso. Botão selecionado, clique aqui ou clique nesta opção. Realmente não consigo ver que tenho que movê-lo para cima. Defina uma variável para fazer isso. Qual variável? Não é o material colorido. Coisas coloridas. Eu quero o material numérico, aquela coisa total. Então, o que fizemos até agora foi, quando clicamos, definir uma variável dessa cor O que eu quero fazer com isso? Está bem? Essa é a expressão. Quero que o total seja subtraído por um e acabei de digitar um no Você pode digitar, subtrair, subtrair. Na verdade, eu não quero subtraí-lo. Eu quero fazer uma pausa Portanto, não importa se você digita ou deseja adicionar, número um. Excelente. Isso vai funcionar. Esperançosamente. Vamos prototipar isso Vou clicar no quadro, ir aqui e vamos colocá-lo no modo de visualização para que possamos ver tudo. Você está pronto? Prepare a matriz. Estamos vindo por você. Biografia B. Eu amo muito isso. O problema é.dd dt. Não desça. Legal. Eu adoro isso. Vamos fazer exatamente a mesma coisa, mas vamos fazer com que ela diminua. Então, há um botão aqui. O que nós vamos fazer? Precisamos ter certeza no modo protótipo. O que precisamos fazer? Modo de protótipo. Na direção? O que nós vamos fazer? Pode ser com um toque ou um clique. Não importa, mas eu vou dizer na hora certa, o que eu quero? Quando eu disse “clique no toque”, se ele souber que é um telefone celular, ele tocará porque você não clica em um telefone. Você toca em OK, se estiver fazendo um desktop, tudo isso ainda funciona. Mas dirá com um clique. Exatamente a mesma coisa. Nas ações aqui, posso dizer que gostaria de definir uma variável como fizemos antes. Mas eu gosto de fazer isso aqui embaixo. Qual variável? Vamos fazer o número. Role para baixo. Ah, cara. Não consigo ver a variável. Eu gostaria de ter feito isso. Esse aqui. Qual alvo? Eu gostaria que você visasse o total, que é esse número lá. O que eu quero que você faça com eles, eu pego o total e menos um Você está fazendo isso. Pegue a parte superior. Vamos pré-visualizar, e vamos subir um e descer um. Uh, de baixo para baixo para baixo. Olhe para nós. É super simples, mas eu não sei. Eu gosto disso. Uma coisa que quero mostrar ou lembrar é que às vezes você quer remover os alvos enquanto diz: “Hue, quebre-os Ele não estará mais conectado. Além disso, como faço para ter certeza de que não consigo ver as variáveis. Onde eles estão? Lembre-se de que eles estão no modo protótipo. O atalho para isso é a opção Alt em um PC em um Mac, e é oito e nove Nove é protótipo, oito é design. Alterne entre esses dois, acostume-se com isso. E logo na outra extremidade do teclado, a mesma tecla 1 e 2 alterna entre ativos e arquivos Essa é uma maneira prática de me lembrar deles. Eles estão em cada lado da interface, como se oito e nove estivessem no meu teclado e um e dois estivessem aqui. Oh, ele tem que segurar o Alki opcional. Tudo bem Criamos uma variável. E sobe e desce. É bem simples. Eu gosto disso. Faremos coisas mais avançadas porque um dos nossos problemas agora é que esse cara faz isso. Você provavelmente fez isso. Você fica tipo, Ah. O que acontece se um checkout for negativo em sete? Pagamos dinheiro a eles? Por exemplo, o Limerick Techno precisa enviar a você menos $7, menos um segundo , quaisquer que sejam os preços É algo chamado condições variáveis. Faremos isso mais tarde no curso, um pouco mais tarde. Então, você pode ampliar isso se quiser continuar agora, mas acho que é isso. Isso é bom para começarmos neste curso avançado. Passe muito tempo em variáveis porque isso é muito importante. Há uma seção inteira sobre isso mais tarde no curso, mas eu não sei. Eu quero que você se orgulhe de ter isso para funcionar. Criamos duas variáveis diferentes. Fizemos a cor um e fizemos a número um. Há muitas coisas que você pode fazer com isso, e o legal é que você pode pegar emprestados documentos de outras pessoas que contêm variáveis, e agora você sabe como alterá-los Basta fazer alguns ajustes. Olha isso. Somos programadores. Te vejo no próximo vídeo. Espero que isso não nos obrigue a fazer um projeto de classe. Sim. 32. Projeto do curso 08 - Variáveis de número: Certo, acalme-se. Acalme-se. É hora do projeto da aula. Você adora isso. Ok, eu quero que você crie um carrinho. Na verdade, vamos até chamá-lo de carrinho de compras. Está bem? E eu quero que você faça o balcão funcionar. Exatamente como fizemos no último tutorial. Basta criar sua própria versão. Ok, eu listei, crie uma variável numérica, faça os botões de mais e menos funcionarem Então, basicamente isso. Eu quero que você visualize qual é o Shift Spacebar, vá para a página certa Mude a barra de espaço. E eu quero que isso funcione para cima e para baixo. OK. O que eu também gosto que você faça é criar sua página de checkout Eu chamei isso de checkout. Na verdade, isso é carrinho de compras. Eles são muito diferentes. Não somos muito diferentes, mas eles são partes diferentes do carrinho de compras Flow. Freqüentemente, a página de checkout é quando você confirma isso, você precisa inserir os detalhes do seu cartão de crédito e coisas como o endereço de entrega que acontece depois do carro. Eu quero que você o desenhe. Eu fiz algo muito pequeno, você pode ir mais longe. A forma como eu me inspiro é que algumas das coisas novas estão aqui, Shift two. Foi isso que pedi ao Figman que fizesse usando os recursos de IA Fui até o primeiro rascunho e disse: Faça-me uma página de checkout, que é a palavra errada Eu deveria ter dito carrinho para um site de eventos. Eu me dei o básico e simplesmente o copiei grosseiramente. Eu estava tipo, imagem desse lado, título. Eu uso o texto menor para isso, e depois uso os botões que já estão feitos, busco sua inspiração. Se você não tem o recurso de IA, há muitos lugares para se inspirar gratuitamente on-line, provavelmente o melhor é algo chamado mob Ok, mobin.com é o que muitos designers de UX usarão. É um site pago. Existem opções gratuitas. Você pode usá-lo gratuitamente, mas só obtém uma certa quantidade de resultados. Você pode ver aqui, eu digitei CRT e ele me deu algumas opções de carrinho Vamos dar uma olhada no IOS para a web. O site é muito bom, mas você tem que pagar por isso. Se você usa o Mobin, pode me seguir aqui Estou na BYOL on Mobin. Não sei por que você faria isso, mas você está aqui. Em outros lugares, obviamente, drible é um lugar muito bom. Eu digitei no carrinho de compras. Você pode ver aqui que eles são superprojetados. Esse é um design muito legal que alguém usa em seu portfólio. Você também pode fazer isso totalmente. Às vezes, quando você está procurando coisas e fica tipo, faz isso funcionar? Isso é viável? Às vezes você não pode, às vezes você pode. Porque quem está vendendo aquela coisa de cabeça de capacete Nike? Você tem alguma coisa chata para vender. Mas alguns deles são legais. Outros lugares são coisas como eu apenas a inspiração da interface do Google para o carrinho de compras, não a página de checkout, porque são diferentes Deixe-me te mostrar. Carrinho de compras, vamos ver a página de checkout Veja, isso é mais como o toque final antes de você pagar agora. Você anotou todos os detalhes. Vamos dar uma olhada. O carrinho de conversão foi aquele que apareceu e eles se inspiraram muito aqui Obviamente, coisas como Pintres Bhans Anywhere, você encontra um carrinho de compras e compra algo para você Agora, quando você o faz funcionar, isso sobe, sobe, desce e desce. Eu adoraria ver um vídeo funcionando, subindo, descendo, descendo e publicando esse vídeo em sua conta do YouTube ou Vumeo e nos enviar o link nos projetos da aula Caso contrário, farei uma captura de tela. Então, o que eu quero que você faça é que você esteja no modo protótipo para que você possa ver esses garotinhos, e eu quero que você abra seu design real, abra as variáveis, depois volte ao protótipo e faça uma captura de tela disso, que eu possa ver os números, o valor, ou Olha isso. Mostrando você trabalhando. Uma captura de tela de tudo isso seria ótimo. Carregue arquivos de classe e se sinta incrível e avançado ao usar variáveis em seus protótipos. Aproveite. Pode ser um pouco frustrante. Talvez seja necessário assistir novamente aos últimos vídeos. Se você tiver alguma dúvida ou se perder, me avise nos comentários. Se você sabe o que está fazendo, confira os comentários, veja se você pode ajudar outra pessoa. Acho difícil responder a todas as perguntas, você poderia me ajudar. É isso mesmo. Esse é o fim do projeto de classe. Nos vemos no próximo vídeo. 33. Projeto do curso 09 - Branding de eventos: Tudo bem, é um ótimo momento de projeto de aula. Quero que você crie um pequeno logotipo com um pequeno ícone. Eu quero que você o coloque em Encontre uma barra de status. Está bem? Essa é essa coisinha aqui em cima. Eu quero que você escolha algumas cores também. Ok, isso é o básico. A única outra coisa é que o logotipo precisa ter um modo claro e escuro. Ooh. Eu tenho uma chave seletora. Também mostrarei como fazer isso neste vídeo. Então, eu quero analisar isso com um pouco mais de detalhes, mostrar onde obter cores, onde obter ícones. Então, basta conversar um pouco. Mas o projeto da classe não é particularmente difícil. Ok, logotipo, cores, barra de status, gráficos em tela de areia. Entra. Onde você pega seu animal? É do gerador Random Project. Se você ainda não fez isso, acesse o projeto aleatório generator.com, e este é o que eu recebi Ok, então eu era Limerick Techno e minha marca era um pássaro. Você pode criar seu próprio logotipo se estiver pronto para criar um logotipo. Vá fazer isso. Caso contrário, você pode simplesmente usar um ícone como eu fiz. Coloque-o ao lado de algum texto, adicione uma barra de status, torne-os componentes e pronto. Ah, e escolha cores. Deixe-me analisar isso um pouco mais especificamente. Então, onde vamos pegar o resumo, pronto. O logotipo. Você pode usar ícones de ações gratuitas. Onde eu fui é que desci até aqui. Olhei meus plug-ins e digitei o ícone, e eles mudaram O que eu sugeri nas minhas aulas anteriores desapareceu. ícone oito é bom, alguns são gratuitos, outros não. O ConAPI também é bom. Foi daí que eu tirei esse. Eu gosto que você vá trazê-lo, você pode dizer, na verdade, porque eu trouxe um desses E eu quero te mostrar alguns problemas que você pode ter. Vamos trazer esse. Está bem? Eu entendo a altura, a cor. Eu posso importá-lo como um componente. Ah, isso meio que economiza tempo ou como moldura e depois cria você mesmo um componente. Está bem? Independentemente disso, traga-o aqui. E o que você descobrirá é que, mesmo que esteja na página, às vezes ela acaba sendo separada dela. Vamos deletar isso novamente. Quero mover minha página para cima. Então, eu estou bem no meio da minha página agora, se eu vejo o kiwi, eu sou um neozelandês Queria muito usar os Kiwis, meu pássaro. É uma forma tão feia. É uma bola de futebol com a parte caída. Sim. O que eu realmente queria te mostrar era, você pode ver que acabou? Por que posso ver o nome? Você sabe? Questionário pop? Você sabe. É porque na verdade não está nesse quadro. Só joga por cima, ok? Então, está aqui bem no topo das minhas camadas. Para colocá-lo nesse quadro, ok? Preciso sair e depois voltar, sem sair. Vou deixar você aí, solte, traga de volta. E agora ele saltará automaticamente para esse quadro. Uma coisa a notar. Às vezes, ao escalá-lo, dependendo de como o ícone foi projetado, talvez seja necessário usar a ferramenta de escala, não a ferramenta de seleção Freqüentemente, a ferramenta de seleção funciona, mas às vezes é necessária uma ferramenta de escala se houver traços , pois eles podem fazer coisas estranhas Tudo bem, você pode sair. Talvez possamos usar. Ok, então crie um logotipo, bem básico. Certifique-se de que seu logotipo seja um componente e eu quero que você crie uma variante. Eu quero que você tenha certeza de que há um modo claro e um escuro. Fizemos algo muito semelhante anteriormente. Fizemos variantes. Onde fizemos isso? Variante multidimensional ou qualquer variante. Fizemos isso com os botões, mas você poderia totalmente fazer isso porque eu quero que você faça isso e diga : Oh, modo claro, modo escuro, modo claro, modo escuro. Portanto, certifique-se de que seja um componente. Eu deixei o meu na minha página de componentes. Eu tenho um modo claro e um modo escuro. Eu quero que você veja se consegue fazer essa variante funcionar novamente. Não é uma variável, variante. A última coisa aqui é onde estamos? A segunda ou última coisa é escolher algumas cores. Eu quero pelo menos uma cor primária e secundária. Eu também escolhi alguns outros. Eu tenho uma cor de destaque, às vezes chamada de cor terciária, e depois tenho uma luz neutra e uma escuridão neutra Você fica tipo, isso é branco e preto? Não é. Já fiz isso antes, onde parece que não é totalmente branco. Você pode ver o contraste aí. Eu gosto desse contraste entre os dois. Você decide se deseja usar branco puro para todas as suas cores ou o mesmo com o preto aqui. Não é totalmente preto. Como você os escolhe? Eu fiz uma pequena amostra de cor que você poderia usar Então, se você acessar meu figma.com no BYOL, encontrará todos os meus arquivos da comunidade, e um deles se chama Você pode ver aqui, eles são todos em preto e branco, exceto que eu acho que este é o único preto e branco. Você pode ver que eu disse cores mais quentes, elas ficam um pouco vermelhas Há cores um pouco diferentes e depois fica mais frio aqui embaixo. Aqui embaixo, você pode escolher seus conjuntos se quiser Acabei escolhendo esses dois para o meu. Está bem? Eles estão quentes. É mais ou menos o que eu pretendo para o resto da minha paleta de cores Às vezes, as cores mais frias funcionam melhor. Você pode inventá-los sozinho. Você não precisa pegar o meu. Na verdade, pare aí. Vou disponibilizá-lo para download a partir dos arquivos de exercícios e vou chamá-lo de cores neutras. Você espera lá. Na verdade, venha comigo. Você pode salvar uma cópia local. Veja, arquive, salve a cópia local. Isso não acontece muito porque é um tipo de software muito online. Mas vou colocar isso aqui para você. Vou me livrar das cores neutras e você poderá abri-las a partir de seus arquivos de exercícios. Eu tenho um link na parte superior dos arquivos de exercícios para os arquivos da minha comunidade encontrará aqui e Você o encontrará aqui e poderá abri-lo como. Você. Aí está você. Cores neutras. Sou eu. Tudo bem. Eu disse que não há muito o que fazer. É muita explicação sobre o que fazer. A Barra de Status é a próxima. Eu quero que você vá até lá e encontre a barra de status, que é onde eu uso a barra de status, você é aquela coisa lá em cima. Está bem? Encontre-o para seu design específico. Está bem? Então, fui até minha casa ou, se você é membro do navegador, acesse aqui e vá para Arquivos que queremos que sejam modelos e ferramentas. E aqui em cima, eu quero digitar, eles chamam isso de barra de status. Barra de status é o nome daquela coisa na parte superior que contém sua bateria e outras coisas. Então, o que você pode fazer é a barra de status e digitar se você estiver usando o iPhone 18, quando você está fazendo este curso ou o que quer que seja, ou se você quiser o Android , basta digitá-lo. Atualmente com 16 anos, acabei de abrir um. Quando estou decidindo, estou olhando para um. Muitas vezes eu escolho o primeiro. Bem, ele tem controles de câmera, com muitas curtidas e muitos downloads, e esse aqui foi muito bom. Alguém fez lá, está lá. E é muito bom. Entendido, Dan, idiota , facilita as coisas. Acabei de copiar e fui até o meu design, e fui colar. O legal é que quem fez isso fez a coisa linda que acabamos de aprender e colocou variantes nela Eu estava tipo, eu tenho um. Sim. Está bem? Tem um botão de luz e escuridão Oh, olha isso. Então, na verdade, não faça nada sobre isso. Obrigado à pessoa que fez isso. Então ela, Herman, definitivamente fez isso errado. Mas obrigado por isso. A outra coisa que vou fazer enquanto estiver aqui é que você vai dizer, o interruptor, como fazemos isso Ok, isso é muito fácil. Vamos também. Estamos saindo do assunto agora porque, na verdade, vamos terminar. Então fiz isso. Resultados, faça uma captura de tela de suas opções de cores, barra de status na parte superior e do seu logotipo. Isso é o que eu quero ver. E deixe-nos saber se você criou seu próprio logotipo. Se for totalmente personalizado, você desenhou seu próprio pássaro, avise-nos ou se é um ícone gratuito que você usou. Talvez de onde você o comprou. Tudo bem, voltando à coisa da troca. Vamos até aqui. Vamos lá, então componentes. Vamos para o outro lado. Eu tenho meu logotipo aqui. Posso clicar com o botão direito do mouse e ir para o componente principal, mesmo que estou aqui e se trata da nomenclatura. Se eu entrar nisso e abri-lo, eu tenho o modo e tenho valores de luz e escuridão. Se você ligar e desligar este, vamos tentar. Olhe este, veja, ele muda o modo a partir deste. Tudo o que você precisa usar é a palavra sim ou não para os nomes. Ou acho que há algumas outras variações que você pode usar. Acho que você pode usar, clicar em algo, Dan, sim, não, não. Isso pode fazer mais sentido nesse caso, porque diremos: qual é o padrão? Isso é. Diga modo escuro. Não, mais. Modo de luz. Então, agora o modo de luz? Sim, você está no Modo de Luz, o que significa que fica bem em telas claras. Mas se eu desligar o modo claro, pop, está no modo escuro. Não importa, mas parece legal. Tudo bem. Isso foi mais longo do que eu pensava. Mas há alguns pequenos projetos divertidos, logotipo e cores na barra de status. Depois de fazer isso, você não precisa enviar este para as mídias sociais, apenas para os projetos da turma, e sim, veja no próximo vídeo 34. Como criar variantes de cores UX usando um widget do Figma: Oi, pessoal. Neste vídeo, veremos os estilos de cores e os criaremos automaticamente. Aqui, precisamos dessas amostras primárias e secundárias das quais podemos extrair Em vez de tentar adivinhá-los e criá-los nós mesmos, vamos usar nosso plug-in, onde podemos mudar a cor e ele cria todos os estilos de cores para nós. Pronto para acessar nosso painel de Estilos. Super fácil, super rápido e super incrível. Ah, para encontrar o widget, vamos abrir nossas ações. Comando K ou Controle K. Basta clicar no botão e digitar o gerador de rótulos coloridos Agora é chamado de gerador de inserção de cores. De qualquer forma, mesmo que isso não esteja aqui, você encontrará qualquer gerador de paleta de cores Tem outro que é muito bom. É chamado de gerador de cores de fundações. Esse é um pouco mais pesado para você, mas eu gosto desse Dizer que, se você não conseguir encontrar isso ou se ele parar de funcionar e não for mais suportado, há outros para encontrar. Mas o processo geral é o mesmo. O que vamos fazer é pegar Eu vou pegar minha cor primária. É este aqui, eu quatro, sete, quatro, seis B, e vou digitá-lo aqui. Certifique-se de manter o hash lá dentro. Eu me assusto se não houver haxixe. Então, nada acontece até que você avance, saia dela ou clique nela, e agora eu tenho minha cor. O que ele fez foi dividir aquela cor que eu tinha em vários tons mais escuros e mais claros. Podemos dar um nome a isso. A capa será minha cor principal de hífen. Se eu deixar isso de lado, a ortografia britânica não é mais usada, ok? Você pode ver que eles os nomearam muito bem. Você também pode ter que ter um acrônimo para o seu, porque se estiver trabalhando com muitos clientes diferentes, poderá ter muitas cores primárias Está bem? Depende de você. Vou deixar o meu, só não me confundir neste curso, faça isso E então todos eles têm um nome bonito. Olha isso. O que podemos fazer é dizer, na verdade, que eu quero salvar esses estilos. E é aqui que o cúbito acontece. Você fica tipo, Nada legal aconteceu. Ooh. Mas não tenha nada selecionado. Assista. Se eu entrar , isso acontece. Por quê? Vamos tentar novamente. Clique aqui. Salve estilos. Lá, lá. Não tenho certeza do que aconteceu lá. Lá, lá. De qualquer forma, clique duas vezes. Eu tenho minha cor primária. Vou me livrar disso porque essa não é minha cor primária. Eu tenho tudo isso. Por que eles são bons? Obviamente, eles estão prontos para partir. Posso dar uma olhada e dizer que, na verdade, estou fazendo um cartão aqui embaixo e preciso escolher uma das minhas cores. Eu posso usar estilos de cores e Tudo bem, eu quero que seja o 700 Incrível. O que eu costumo fazer, porém, é que muitas vezes não tenho a gama completa. Eu não uso 50. Isso depende de você. Eu também me livro de todos os números inteiros. Eu me livro de 200, 400 números inteiros, números pares. Isso é o que eu quero saber. Eu só quero esses. Seria muito típico ter esses. Se você for uma empresa maior, terá todas elas. Eu só costumo trabalhar em projetos menores e, se eu precisar de um 600, posso fazer isso. Não é difícil. Ba Na acabou de ter um grupo mais organizado. E o legal disso é que esse pequeno plugue simplesmente desliga. Você não precisa mais dele. Você pode deletá-lo, ok? E seu primi e suas cores não desaparecem. Ele é um plugue que fica pendurado até você não precisar mais dele, ok? Eu vou fazer o resto desses. Vamos fazer mais um juntos, não é? Eu os farei rapidamente e pararei se conseguir algo útil. Cole-o. Tudo bem. Te vejo em um segundo. Ah, sim, pausou. Eu sei que eu fiz. Eu nem preciso verificar. Então eu fui até este, mudei a cor, sabe, dei uma cor primária, fui para este, mudei a cor, basta clicar em Salvar estilos, e eu não mudei o nome, aposto que agora, se eu der uma olhada, cor primária? Oh, não o substituiu. Talvez você precise clicar duas vezes. Mas se eu fizer isso agora, vou substituir minhas cores primárias por essa nova. Então, se eu for para o ensino médio, quero fazer isso corretamente. Ok, você quer que seja isso. Então, são os corretos, mas preciso mudar isso antes de prosseguir. Então, isso vai ser meu secundário. Pressione Enter. Vou dizer que Salvar estilos foi exibido duas vezes porque não parecia funcionar com. Vá, eles entraram. Tudo bem. Então, nosso último novamente, o modo de velocidade. Sim. OK. Você disse não, eu vou ignorar isso. 100% anulou essa cor secundária. De volta ao modo de velocidade. Tudo bem, uma coisa vou mostrar é que você vê que isso parece muito preto na tela, mas quando você chega a essas cores mais claras, você pode ver que há muito calor no preto que eu Então, vou chamá-lo de neutro e acrescentar isso. Eu tenho que clicar duas vezes. Eu não sei por quê. E para este aqui, eu realmente não quero versões disso. Vou mudar o nome disso para interface e vou ter apenas uma cor para ela. Então, eu não preciso usar essa coisa de estilo. Vai ser apenas essa cor, então eu vou dizer, vamos ver isso, vou clicar em adicionar um estilo. Eu não vou ser uma variável. Eu vou voltar ao estilo. Bem, isso é confuso Vamos pular para as coisas variáveis que fizemos anteriormente. Eu vou escolher o estilo. O nome desse será interface. Ótimo estilo. Vamos ver o que temos. Não preciso mais de você. Pense, amigo. Vou apenas arrumá-los no modo rápido porque isso está apenas excluindo um monte de coisas Veja isso. Se você quiser os 50, pode ficar com os 50. Se você quiser todos eles, fique com todos eles. Não há regras reais. O que eu gosto de fazer é ter certeza de que estão em ordem. As únicas cores que estão sozinhas devem estar no topo. Esses grupos aqui, basta dizer que se você os criou em ordens diferentes, você pode passar principalmente para o topo, se não fosse antes, incrível. A outra coisa que eu gosto de fazer é quando estou, digamos, colorindo algo, digamos desenhar uma caixa ou uma moldura, e eu vou dizer, você vai ser essa cor de amostra Em vez de ter que passar por todos eles, o que é bastante longo, você pode simplesmente subir aqui, diz pesquisar Tipo 500. Ok, então ele vai te dar 500 de tudo isso porque você sabe que quer a cor 500. Digamos que você queira a versão mais escura da cor. Ok, você pode ir até lá e escolher este. Quando estão escuros, na verdade, todos parecem muito parecidos. Então, sim, essa é útil. 500 e eu vou usar você. Tudo bem. Isso é criar variantes de cores dentro do Figma usando um widget. Não precisa ser esse widget Lembre-se de que muitas outras pessoas usam o que chamamos de fundações. Também é muito legal. Meio que faz isso de um pouco diferente. Eu prefiro esse. Você pode encontrar um que você realmente goste. Tudo bem, meus amigos. É isso mesmo. Te vejo no próximo vídeo. 35. Grade v Restrições v Autolayout: qual usar e quando?: Fale sobre grades, restrições e/ou limites, quando você as usaria, para que elas eram usadas e quando você as usaria, como eu as uso no meu fluxo de design, que são mais importantes, com as quais eu começo, que eu não faço direito até o final, e algumas delas que eu não uso muito, apenas para que você tenha uma ideia melhor do que todas essas coisas fazem e É um waffly. Prepare-se para o waffle Certo, vamos começar. Tudo bem, então recapitule rapidamente os Autolayouts Esses são apenas pedaços de texto espalhados. As saídas automáticas são ótimas. Você desliza todas elas e usa a tecla Shift A. Agora elas estão desativadas automaticamente A forma como as saídas automáticas funcionam é que elas funcionam internamente aqui Eles o tornam responsivo. Mas para as coisas que estão dentro da minha saída automática. Significa que eu posso pegar isso, movê-lo para cá, eu posso pegar o login e jogá-lo aqui. Eu posso mudar para o texto e ele reflui. Isso é uma saída automática. Uma restrição é a parte externa da caixa Ainda é responsivo, mas aqui, se eu o trouxer para este desktop, no momento em que ele tenta sair do topo e continua com o padrão, que é a Mas se eu for até aqui e disser, meu amigo, estamos ficando à direita Isso significa que quando eu entro aqui e digo, preciso que você redimensione, ele será redimensionado e ficará totalmente Então, é o lado de fora da caixa. Agora, o último são grades, guias de layout ou colunas. O guia de layout da chamada aqui. Eu tenho três colunas feitas na minha. Vou ligá-lo para torná-los corretamente mais tarde. Mas eu tenho colunas. Eles são úteis apenas para manter a consistência em todas as páginas. Quero que as margens sejam iguais nos dois lados vez de tentar adivinhar ou desenhar a caixa mágica Se você já desenhou isso mova-o para alinhar as coisas. Você quer consistência em suas margens e colunas. Você ativa seu guia de layout e isso nos ajuda a agilizar a resposta. Como isso ajuda na capacidade de resposta? É bom apenas para alinhar as coisas. Isso se torna bom para a capacidade de resposta. Se eu realmente, vamos jogar essa carta aqui. Este é um pedido que eu fiz anteriormente. Eu vou, tudo bem, encaixe na lateral. Estamos fazendo. Isso é útil o suficiente. Mas se eu fizer outro, agora estou trabalhando no meu tablet. E eu preciso que seja menor, vou ver o que vai acontecer. Ele segue nossas colunas. Não precisamos arrastá-la para dentro e depois encontrar nossas colunas e recuperá-la. O motivo disso é uma combinação. É um Atoout, a primeira coisa qual falamos. São restrições A segunda coisa sobre a qual conversamos, veja isso. Se eu arrastar, você verá que ele está lá. É restritivo, mas não ao tamanho total da página. Se você tiver colunas ativadas, ele dirá: Estou apenas indo aqui. Se você não tiver nenhuma coluna, ele tentará usar a lateral da página. Você verá que os dois também estão do lado. Eu tenho essa saída automática configurada para a esquerda e para a direita. Então, quando eu vou para o tablet, ele faz isso. Eu posso fazer a mesma coisa quando vou para o celular. Essas são as três áreas restrições e guias de saída automática Eu quero te mostrar quando eu os uso porque isso é importante. Estou te mostrando tudo neste curso. Quero que você saiba qual é usada com mais frequência porque há uma terceira ou quarta opção. Existe a opção de não fazer nada. Muito do meu trabalho é uma maquete que não requer saídas automáticas, restrições e grades. Então eu vou usar uma grade. Deixe-me falar sobre quando eu mais os uso. Eu acabo usando provavelmente mais os guias porque quero consistência ao projetar e quero margens e quero que elas se encaixem Mesmo que eu planeje não fazer nada, meu primeiro nível é não fazer nada, não ter nada. Desenhe tudo e, muitas vezes, consigo acessar meu desenvolvedor sem mais nada. Apenas quadros na página, nada é responsivo, e trabalhamos juntos há tanto tempo que ele não precisa ver, se movimentar Não estamos fazendo nenhum teste com usuários em telefones diferentes, na verdade, apenas um monte de quadrados com imagens alinhadas Mas, para meu próprio bem, muitas vezes tenho guias para garantir a consistência entre as páginas. Não quero que seja um pouco assim nessa página e depois um pouco mais adiante nesta , quero consistência. A próxima coisa que eu usaria é a saída automática. As saídas automáticas são úteis. Eles são muito fáceis de fazer e eu posso mudar as coisas e redigitar coisas, especialmente coisas como botões Temos um botão aqui que é Auto Layout? Provavelmente não. Talvez sobre isso. Como testo meus cursos teste o vídeo antes de fazer isso com você. Temos um botão? Aí está. Este é o botão de saída automática, você pode ver como isso é útil. Provavelmente vou fazer os botões. Isso se torna muito útil quando você está fazendo isso aqui. Vamos para este. Audiotas que eu uso bastante quando vou, tudo bem, eu tenho essa coisa legal Ok, mas eu preciso de um monte deles. Eu vou subir, duplicar, duplicar, duplicar, ok Vou colocar todos eles no Auto Out, depois vou subir até lá, ali. Você pode ver como é rápido e fácil. Mas no primeiro estágio, quando estou projetando essa coisa, nunca é uma saída automática. Eu apenas o desenho para parecer, e depois de fazer montes deles, vou transformá-lo em autolou e começar a mexer Tudo bem, o que mais? O último diz restrições. As restrições são úteis quando você precisa. Digamos que você tenha algo relativamente complexo ou, pelo menos saiba que os desenvolvedores poderiam interpretar seu design de algumas maneiras diferentes. Você fica tipo, não, não, não, definitivamente precisa fazer isso. Vamos até nosso cartão, troque um, diminua o zoom e tudo mais. Temos um cartão? Digamos que esse aqui. Eu quero que ele saiba que isso fica no canto superior direito e não fica lá. Ok, eu precisava saber que isso acontece. Esse é um exemplo meio simples, mas você entende o que quero dizer? Tipo, eu não quero que ele quebre em uma linha. Eu quero que fique um quadrado. Quero que fique no canto superior direito, para que eu possa construir um protótipo que seja arrastável e amassável é muito difícil explicar Às vezes é muito difícil explicar, você sabe, tipo, Ei, a caixa verde no canto superior direito, quando entra no modo tablet, eu quero que ela fique na parte superior, esquerda e direita da imagem, mas ignorando você acaba com isso, tipo, vou mostrar que você acaba usando restrições Torna-se ainda mais importante quando você está trabalhando em uma equipe maior e entregando arquivos que serão reutilizados Você não quer deixar que eles voltem e é tipo, deixamos isso para a equipe, e se eu for para o meu componente principal e essa coisa aqui, você sabe, eles meio que a têm aqui. Você sabe, você pode facilmente adicionar uma restrição para que ela fique onde está, para que todo o resto da equipe possa usá-la da maneira que deveria Certo. É como se eu não soubesse. Isso é útil? É um resumo de onde eu uso todas essas coisas sobre as quais estamos falando, quão importantes elas são e quando elas aparecem no meu processo de design. Mas muito disso é apenas um quadro com algum texto, e tudo parece que vai ser responsivo, mas eu não faço isso porque estou trabalhando com alguém com quem já trabalhei antes Eles sabem como lidamos com as coisas em nosso site, então não precisam de uma saída automática sofisticada Tudo bem. É isso mesmo. Te vejo no próximo vídeo. Espero que tenha sido útil. 36. Como adicionar linhas e grades de colunas a um layout no Figma: Oi, pessoal. Neste vídeo, vamos colocar listras em um documento Parece que cadê o Wally. Você pode chamá-lo de Onde está Waldo, o mesmo cara. O que realmente vamos fazer é adicionar mais de uma grade de layout. Vamos adicionar nossas colunas como fizemos, mas vamos adicionar rosas desta vez e vamos explicar por que nos preocupamos com essa grade de oito pixels A será revelado de uma forma entediante. Alguns de vocês vão adorar isso, alguns de vocês se perguntam por que alguém se importa. Eu me importo. Então, vamos fazer isso. Tudo bem. Vamos adicionar nosso primeiro. A questão com a qual começo na maioria das vezes é eliminar meu quadro principal, acessar o Lou Guide e adicionar uma que seja uma coluna, especialmente quando estou trabalhando em dispositivos móveis. Muitas vezes, trabalho apenas com uma porque realmente quero essa coisa apenas pela margem Lembre-se, trabalhe em múltiplos de oito, se puder, então eu quero provavelmente 24 O legal disso é que está tudo pronto? Tudo bem? É que agora eu posso continuar e ter certeza de que estou alinhando tudo, certificando de que tudo está funcionando, tudo está consistente Eu quero que isso esteja aqui. E a outra coisa que podemos fazer enquanto estou aqui é garantir que seja consistente. Você pode ver que está girando para a direita, mas não Está ligado para a esquerda e para a direita Excelente. Caso contrário , você pode ir até aqui e dizer “fique à esquerda e à direita” para que ela se anexe à coluna. Nós já fizemos isso. Isso fica ainda mais legal quando também adicionamos linhas. Vamos clicar na moldura principal. Vamos até meu guia de layout e podemos adicionar mais de um. Defina mais. Agora temos o primeiro e este novo chamado grade de oito pontos. Quer que eu queira uma rosa aqui com uma contagem, você pode mudar isso para Automático e, na verdade, vamos dar uma olhada. Vamos para cinco. Você pode ver que, por padrão, as linhas funcionam como colunas. Não é o que eu quero. Então eu vou cortar isso. Você pode ver que há um, dois, três, quatro, cinco. Com linhas, por padrão, ele está configurado para se esticar. Você pode ver que faz isso. Não é o que eu quero. Eu quero um espaçamento regular consistente. O que eu vou fazer é ir até aqui, mudar minhas linhas para B. Definir como Automático. Então diz que alongar, eu não quero alongar, eu quero começar do topo, e depois eu quero descer oito é muito bom. Quatro é melhor para esse layout, oferece um pouco mais de controle. Você pode ver que eu tenho pequenos oito pontos e uma sarjeta entre eles de 20. Eu só quero ter quatro e quatro anos. Eu compro esse tipo de poste listrado, barbearia Eu continuo dizendo Whiz Wally. Você pode chamá-lo de gênio Waldo. O mesmo, o mesmo. Ok, então eu tenho isso. Isso é tudo que eu preciso. E o que podemos fazer é o legal disso agora é que podemos dizer que, na verdade, a minha já está perfeitamente alinhada, mas se você arrastar minha nave superior até aqui, na verdade, se encaixará na verdade, se encaixará Eu coloquei isso no lugar certo, vá até a borda. Vamos dar uma olhada. Vou colar o outro, vamos fazer esse de baixo. Onde ele foi parar? Tudo está se alinhando, mas você pode descobrir que o seu está no meio do caminho Agora o meu está se alinhando. Excelente. colar essas coisas de volta . Para onde você foi? É aqui que as coisas ficam realmente interessantes. O tipo é ótimo ao usar essa altura de quatro pixels. Você pode ver aqui que está caindo na parte inferior. Ótimo, então eu posso fazer com que o tipo se alinhe com essa grade. O que é realmente bom nisso é pegar isso e dizer, na verdade, eu quero você. Você pode ver aqui embaixo? Está se encaixando nessa grade, e então você pode ver nesta que não está Você fica tipo, H, eu quero que isso seja consistente. Eu amo minhas grades. Por que eles não estão gradeando Este aqui não está alinhado com a linha vermelha, nem este. O que você precisa fazer é garantir que, seja qual for a fonte usada, certifique-se de que a altura da linha seja divisível por oito O que vou fazer é, na verdade, tornar tamanho da minha fonte divisível por oito Você não precisa, mas não sei por que foi aos 17. Então aqui, quando se trata de altura, provavelmente quero que seja 24. O que acontecerá é que, como nossa grade é divisível por oito, isso aqui deve ser o mesmo Na primeira, todos devem estar alinhados. Você fica tipo, eu não curo. Está tudo bem. Você não precisa curar. Mas o bom disso é que posso dizer que quero menos oito, para a altura da linha, e tudo ainda estará alinhado com sua grade Você tem que decidir o quanto as grades são importantes para você. Você pode não usá-lo para fontes, mas é definitivamente bom quando você está usando coisas como imagens. Você pode ver esse aqui? Ele nem está lá. Agora está alinhado. espaçamento consistente é uma daquelas coisas em que você pode dizer a alguém que talvez seja designer júnior e designer sênior quando você começa a se preocupar não apenas com as coisas se alinhando, mas com as coisas alinhadas de forma consistente nas páginas Está muito apertado. Você pode fazer let's go plus four. Eu posso alinhá-lo e você pode ver, olha, ah, é consistente. Provavelmente é o que eu quero 20. Lembre-se, Shift G para ligá-lo , Shift G para desligá-lo. É assim que você adiciona mais de um guia de layout ao documento e por quê. E você vai se deparar com pessoas fazendo isso, você vai ficar tipo, por que tudo é listrado Por que alguém se importaria? É porque nos preocupamos com consistência , layout e composição Sim, está muito longe. Oh, mas olha, porque eu tenho a grade ligada, eu posso ajustá-la ao que parece certo Olha, essas são quatro linhas separadas. Esses também são. Bom. Tudo bem, é isso. Vou ver no próximo vídeo. 37. Como criar e atualizar estilos de guia de layout para colunas e linhas no Figma: Primeiro, veremos como criar um estilo de grade e atualizá-lo neste vídeo. Vamos embora. Vamos começar a estilizar. Vamos começar com um atalho G, liga e desliga as guias. Digamos que eu tenha passado algum tempo comprando este. Eu quero colocá-lo aqui. Eu vou primeiro ir até este e dizer, me livre de você. Eu quero pegar esse. O que você pode fazer é clicar. Lembre-se, essa pequena área estranha. Shift, pegue o outro embaixo dele. Nesta pequena área vazia aqui, copie, clique no nome desta, e talvez a gente clique no nome desta, clique em Colar. Isso não funciona. Por que isso não funciona? Porque este já tem algo aplicado. Sim. Você não pode ter mais do que duas coisas iguais aplicadas. Mas eu posso colocá-lo em dois deles. Eu só tenho que limpá-los. Legal. Obviamente, esse é o longo caminho para fazer isso. O que eu quero fazer é transformá-lo em um estilo. Vou selecionar isso, vou até o que eu criei e vou até esse pequeno painel de estrelas e vou dizer que quero adicionar um estilo. Vou dar um nome a isso. Vou chamar isso de celular. Vou chamar isso de uma coluna, um carvão e cinco picaretas ou fileiras. Ok, dê um nome que você vai usar ou reconhecer, e eu vou criar um estilo. Novamente, você pode adicionar uma descrição. Agora eu posso ir até eles. E, na verdade, em vez de tentar copiar e colar rapidamente, vou dizer que vou adicionar o estilo que eu criei chamado móvel Aí está. Agora atualizando-o. Digamos que seu estilo, digamos que você queira mudar esse. Você pode entrar aqui e quebrá-lo e tentar fazer um novo e depois colá-lo em todo o resto. O que você pode fazer é não selecionar nada e você encontrará seus estilos, como todo o resto, no painel de design, aqui embaixo. Você pode ir para a edição. Você pode entrar aqui e dizer, na verdade, eu quero que isso tenha uma grade também. Você pode ver que foi adicionado um terceiro. Temos uma grade e linhas e colunas. Ou você pode decidir que deseja apenas editar as linhas. Você decidiu que vai usar oito pixels. Zero. Eu vou voltar, mas é assim que você faz. Bloqueando isso. É assim que você cria e edita um estilo, em particular, um estilo de guia de layout. Tudo bem, meu amigo, é isso. Você está todo estiloso. Parecendo bem. Te vejo no próximo vídeo. 38. Animação com easing personalizado no Figma: Oi, pessoal. Neste vídeo, vamos fazer uma atenuação personalizada Vamos fazer o nosso próprio, onde podemos fazer coisas boas. Em vez dos padrões, pode parecer com todos os outros, mas fizemos isso de forma personalizada. Eu vou te mostrar. É esse tipo de flexibilização em que podemos brincar com facilidade e fazer o que quisermos maioria das vezes piora as coisas, mas às vezes as torna melhores. Vamos começar. Primeiro, eu tenho uma moldura vazia, não uma moldura vazia. Uma moldura que eu desenhei para ser um ingresso, parece uma bandeira. Se você quiser ver como eu faço essas coisas, que já fizemos a maior parte antes. O que viemos aqui é uma flexibilização personalizada. Eu preciso ter duas molduras. Vou apenas pressionar Command D, Control D em um PC. Animação um, agora eu tenho a animação dois. O que eu preciso fazer é que eles precisam ser diferentes. Eu quero começar isso aqui ao lado. Primeiro de tudo, vou agrupá-lo. Agrupe isso. Agora, isso é uma coisa interessante, assista. Isso é chamado de grupo dois agora porque eu acabei de agrupá-lo. Clique em Command G ou Control D em um PC ou você pode clicar com o botão direito Essa aqui, se eu agrupar, é a mesma coisa. O que acabou acontecendo. É chamado de grupo três. As animações não funcionam. Quando seus nomes são diferentes. Isso é diferente disso. Eu posso fazer uma das duas coisas. Eu poderia agrupá-lo antes de duplicar esse quadro, isso funcionaria Ou posso apenas ter certeza de que ambos têm o mesmo nome. Se sua animação não estiver funcionando, verifique se os nomes são iguais nas duas animações. Co. A próxima coisa que eu quero fazer é arrastar, ele vai começar fora da tela e depois aparecer na tela. Agora, o que vai acontecer aqui? Vai sair da minha animação. Eu não quero que fique fora disso. Ele ainda precisa estar dentro dele, mas fora, quem se lembra qual é o atalho Isso mesmo. Um pouco confuso. Você começa a arrastar, depois segura a barra de espaço, e ela sairá para o lado de fora Você pode segurar a barra de espaço e mudar, e ela seguirá em linha reta Muitos atalhos e agora deve funcionar. Só precisamos adicionar a transição entre as duas páginas. Vamos clicar nesse. Vamos mudar para o protótipo. Você pode clicar no botão ou se lembrar do atalho. Você se lembra que agora é a opção nove, oito, nove, oito, nove ou Alt, oito, nove, nove obtém seu protótipo, oito faz você voltar ao design Sei que você sabe. Tudo bem. Vamos clicar e arrastar isso. Vamos dizer na torneira. Claro. Navegue até essa página. Ótimo. A animação será Smart dissolve e vamos usar, vamos começar com I like in and out. Parece bom. Vamos clicar em desligar. Vamos pré-visualizá-lo. Outra coisa que faremos é se seu fluxo não apareceu aqui, digamos que ele não está mais lá. Livre-se disso. Você pode clicar nessa primeira porque, caso contrário, se você começar a prototipagem, ela disparará e prototipará a primeira página do documento, que não é onde estamos Especialmente quando você está recebendo um documento maior como nós temos, você é como você. Você pode dizer que vai começar do ponto de fluxo. Lá? Agora é muito simples, basta clicar nesse botão. Sem atalhos, sem nada. Legal. Eu disse: O que temos que fazer? Nada está acontecendo, Dan. Por quê? Porque dissemos na torneira, tocamos e aí está. Temos uma animação básica, mas queremos fazer uma animação personalizada. Vamos clicar nisso. Essa coisa pode ser movida. Está sempre no lugar errado para mim, mas você pode arrastar a parte superior. Vamos mudar a curva de algo pré-fabricado para um bezier personalizado Esta é a sua curva de Bezier, e ela parecerá diferente da minha, dependendo da primeira Isso é entrar e sair. Isso é o que parece. Se eu disser facilidade e depois voltar ao bezier personalizado, é assim que se parece o ESN. Estamos personalizando algo que já escolhemos. Pode ser reto. Se for reto, significa que se parece com isso, então é linear. Então eu volto ao costume, é como se tudo tivesse sumido. Deixe-me explicar rapidamente o que estamos fazendo você pode clicar nesses pontos e arrastá-los para qualquer lugar. Se você já arrastou algo, pode arrastar essa pequena alça aqui e simplesmente movê-la. Você pode ter dois deles. Ok, vamos fazer algo louco e vamos fazer isso. Você pode arrastá-los para todos os tipos de lugares estranhos. Vamos assim. Vamos ver o que nossa animação vai fazer. Então, vou até o pequeno botão play e clico uma vez estranha Você pode fazer todo tipo de coisas legais. As principais que você vai usar Yk são que essa curva S é o que parece bom Isso é o que é entrar e sair, mas entrar e sair é muito sutil. É assim e aquilo. Gosto de pegá-lo para dentro e para fora e deixá-lo ainda mais longe . Então é assim. Está indo muito devagar no começo, super rápido no meio, super lento no final. O padrão é muito sutil. Eu gosto de maximizar isso. Quanto tempo isso vai levar? Vamos fazer com que demore meio segundo. Quantas centenas de milissegundos? Isso mesmo, 500. 1.000 é um segundo, 500 é metade disso, então meio segundo. Vamos aqui. Vamos pré-visualizar, clique uma vez. É bom, não é? Eu entrei bem rápido no meio e fui bem relaxado. Você fica tipo, eu perdi, Dan. Arquivamento de membros, vamos redefini-lo, clique novamente. Bom. Eu gosto de exagerar nos pré-fabricados, se você quiser, não consigo ver nos pré-fabricados, se a diferença Não se preocupe em fazer tarefas personalizadas pois é uma coisa muito pequena Vamos dar uma olhada em algumas coisas. Eu só quero explicar isso para você. Então, vamos para a Esn e vamos voltar à personalização O que está acontecendo é tão difícil de entender. Mas se você desenhar um pequeno gráfico, o movimento do tempo. Esse é o X? Vamos ver que o X na parte inferior é o tempo, e esse é o movimento. Então, se eu fizer isso, o que significa que Es in está acontecendo ao longo do tempo, digamos que na metade do tempo aqui é permitido, que é meio segundo, vamos fazer com que seja um Apenas faça uma massa fácil para que o tempo aqui seja 0 segundos, que seja zero, e isso seja 1 segundo. Então, o que você verá é que, na metade do tempo, ele fez muito pouco movimento. Você vê isso? Esse é o movimento desde o ponto em que o iniciamos até aqui. Então, se traçarmos uma pequena linha aqui, subirmos até aqui por metade do meu segundo, ela fará muito pouco do movimento real. Então, tem que fazer tudo no final. Então, nesta última metade do segundo, ele move uma grande parte É por isso que é chamado de facilidade de entrada. Vai ficar lento, lento, então f. Vamos dar uma pequena prévia. É útil, tudo bem. Veja, super lento no começo, super rápido no final. O oposto disso é que E está fora. Eu desligo o Ease para que eu possa mostrar você um Bezier Up personalizado É exatamente o oposto. Se eu o estender apenas para acentuá-lo um pouco mais, depois de meio segundo, se você subir até aqui, olhar e tentar encontrá-lo onde ele se encontra, verá que está quase pronto em meio O resto do segundo está indo muito devagar porque é como se eu tivesse meio segundo para fazer essa última parte do movimento. Sentir. Dan balançando o mouse Se você não sabe, mexa e visualize. Você sentirá o movimento do tempo. Parece muito bom. Na verdade, você pode clicar duas vezes nessas coisas e elas desaparecem. O que parece muito bom é essa curva S. Este aqui, talvez você o conheça de outros programas. Usamos muito o Photoshop e todos os tipos de edição de fotos para as curvas Isso parece bom. Então é só escolher a hora certa. Você pode simplesmente arrastar isso. Por que não está se arrastando? Costumava ser capaz de. Aposto que você será capaz de fazer isso. Alguma razão pela qual a minha de hoje não está funcionando. Então, vou reduzir o meu para 750. Vamos dar uma olhada, pré-visualizar e clicar nele. Veja nossa alfândega. Tudo bem. Vamos continuar com nossa animação. Então é isso. Essa é a flexibilização personalizada Você pode seguir em frente se for isso, mas se quiser ficar por aqui, faremos um pouco mais de animação e mostrarei como desenhei isso. Vou clicar aqui e clicar em Command D. Se você acidentalmente apertar Shift D sempre que quiser, o que está acontecendo? Você já esteve aqui? Você está no modo de desenvolvedor. Está bem? Esse é o grande modo assustador Falaremos um pouco mais sobre isso mais tarde, mas volte aqui para criar. Está bem? Então, o comando ou controle D que eu quero fazer é que, quando chegar aqui, eu quero que ele espere um pouco e depois vá para longe. Vou clicar no meu tíquete, começar a arrastar, segurar a barra de espaço e a tecla Shift, ela desliga O que eu também poderia fazer é clicar nele e desativar o conteúdo do clipe. Ainda está tocando, mas pelo menos eu posso ver. O mesmo com este aqui. É um pouco difícil. Você fica tipo, Onde está? Eu sei que está aqui em algum lugar onde eu posso dizer, vamos desligar o conteúdo do clipe. Isso não muda minha animação, apenas facilita um pouco o trabalho com ela. Tudo bem, então agora eu preciso dizer que você terá a opção nove de prototipagem Eu vou, vá até aqui. Ele vai tentar se lembrar de coisas, mas eu não quero que apareça. Eu quero que fique por aqui um pouco. Depois de um atraso de sim, agora está funcionando. Olha. Agora eu quero digitar nele. Espere, deixe-me digitar. Tudo bem. Está fazendo algumas coisas estranhas. Sim, então vamos o quê? Depois de tanto tempo. Isso não importa. Vá até a página. Instantâneo. Não, eu ainda queria fazer a animação inteligente e vou fazer com que ela a deixe como padrão Vamos dar uma prévia primeiro. Então, vamos subir. Clique de uma vez. Depois de um atraso, ele vai parar. Vamos fazer outra flexibilização personalizada. Está bem? Então, em vez de relaxar, vou usar a personalização. Isso aí. O que eu quero fazer é começar devagar. Isso significa que vou clicar e arrastar isso para fora. Vou começar devagar. Com o tempo, não vai funcionar muito porque vou arrastá-lo dessa maneira. Lento para começar e eu também vou entender. Na verdade, o que eu quero fazer é retroceder um pouco. Isso se chama antecipação. Se inclina para trás antes de avançar. Todos nós fazemos isso quando caminhamos. Ninguém simplesmente começa a caminhar para frente. Todos nós colocamos nosso peso na parte de trás dos pés, como um corcunda É ótimo para tipos e ingressos, e o que eu poderia fazer é simplesmente seguir assim. Um pouco de tempo. Eu não sei exatamente o que isso deveria ser. Quanto tempo deve demorar? Tanto tempo. Vamos tentar. Sim, clique uma vez. Vai esperar um pouco e depois vai retroceder Tudo bem, então isso não funcionou. Vamos clicar nele novamente, e há muito disso. Eu nunca faço animações o suficiente para dizer : Ah, eu sei exatamente o que precisa ser OK. Vamos clicar nesse aqui. Aquele estava muito nervoso, então vou tentar esticá-lo Então, está demorando muito para avançar, depois vai decolar, e eu provavelmente preciso de mais tempo no geral. Mas, novamente, esse tipo de coisa vem com a experiência. Você vai ser terrível por muito tempo. Mas melhore . Clique uma vez, espere, avance, retroceda Oh, foi quase isso. É meio bom, certo? É só um pouco lento. Um pouco mais rápido. Tudo bem, então vamos dar uma olhada. O que eu mudaria aqui? Zoom profissional. Tem o lado direito. Acho que talvez seja um pouco mais rápido. Não é muito diferente porque eu quero que ele comece a ampliar Talvez isso daqui a pouco. Tudo bem, então vamos. Última vez. É isso, seja o que for, eu vou deixar você então o suficiente. Não está certo. Vamos deixar isso porque você pode mexer com isso por muito tempo. A última coisa que vou fazer é ir até isso e desativar o conteúdo do clipe em design, lembre-se de Option ou Alt eight. De volta ao design. Eu vou dizer o conteúdo do clipe só porque ele está no caminho até lá e eu vou movê-lo e outras coisas. Então agora eu posso colocar esse cara. Acabei de tirá-lo da tela. O que eu quero desta é dizer Opção ou Alt nove. Eu vou dizer que você vai até aqui, e eu nunca vou ver um Bezier personalizado funcionar quando você faz uma dissolução, porque eu só queria me dissolver nele Você pode mexer com o Besier personalizado o quanto quiser, ou até mesmo brincar com eles Você simplesmente não os nota. O que quer que você escolha , você simplesmente não percebe. Eu já disse isso 1 milhão de vezes. É verdade. Você é assim, eu coloquei um cronômetro nele? Não consegui clicar. O padrão era ao clicar. Eu vou dizer que você não está na torneira. Lembre-se de que está no toque se você estiver usando um dispositivo móvel e ele souber disso, está no clique se estiver usando algo diferente de um celular. Claramente, um telefone celular faz a mesma coisa. Eu vou dizer que depois de um atraso de, provavelmente vou cair para zero. Você não pode ter zero, na verdade, apenas ponto só pode ter um milissegundo. Tudo bem. Vamos embora. Pré-visualize, dê uma olhada em nós. Fizemos algumas coisas com facilidade personalizada. Agora, vamos criar um tíquete bem rápido. Na verdade, a única coisa para lembrar é que, se algo não está funcionando, conversamos sobre isso no início do final, mas se eu fizesse esse número três e fizesse exatamente a mesma animação, assista como se fosse uma vez. Eu simplesmente ignoro todas as minhas animações porque ela não consegue uni-las e não sei o que fazer porque isso não é o mesmo que isso Diz: Bem, você não tem para onde ir e você aparece magicamente no grupo três Eu só vou fazer com que você apareça por padrão. Se você tem coisas desaparecendo em vez de se moverem, é dar nomes a galinhas Geralmente, esse é sempre o problema. único outro problema é que isso pode acabar Se arrastar agora, ele ainda está dentro dela. Mas se eu prolongar isso, sabemos que, embora achemos que pode estar tentando ir até lá, está fora da minha animação enquadrar. Ele só está lá sozinho. Você só precisa se certificar de que ao arrastá-los para fora, digamos assim, mantenha pressionada a tecla da barra de espaço enquanto arrasta para que ela não saia da moldura, mesmo que pareça Confundindo as pessoas, Dan. Como eu construí isso? Está bem? Eu quero te mostrar isso porque agora todo mundo está no curso básico. Então, vou começar com um retângulo. Ok, vou desenhar isso. Vou voltar para o modo de design, que é opção ou Alt oito, ok? Vou dar uma cor de preenchimento para meus estilos. Vamos fazer uma de cor diferente. 500. Você pode seguir em frente. Estou apenas projetando isso agora. Eu quero o Oki para o círculo, segure a tecla shift para obter um círculo perfeito Não importa a cor. Eu vou fazer. Vamos fazer duas por esta, porque somos empolgantes. 12 pegue outro aqui. Ok, vamos usar as ferramentas de desenho. Alguém se lembra de como usar esses círculos para cortá-lo É complicado. Temos que passar para a ferramenta de desenho. Estamos na ferramenta de desenho e ainda não há a opção aqui. Eu sempre quero ir até ficar tipo, Como é chamado? Construtor de formas. Essa é a ferramenta. Então, com o selecionado, como Where's the shape Builder, pensei que estava aqui. Você precisa achatá-lo primeiro, depois o Shape Builder aparece É MK. Sim, K. Oh, eu sei. Você está tipo, ainda não está lá embaixo. Eu coloquei isso em um vetor. Foi o que eu fiz quando o nivelei. No momento, há um monte de camadas diferentes. Eu disse achatar em um vetor. Esmagar É um vetor. Ainda não está lá. Se você clicar duas vezes nele para entrar, clicar três vezes nele para entrar, você estará dentro desse vetor e receberá a ferramenta que queremos. O Construtor de Formas. Muitas vezes, o que eu faço é achatá-lo e depois apertar o MK Eu quero me livrar das coisas. Para me livrar, se eu quiser adicioná-los, arrasto. Se eu quiser removê-los, mantenho pressionada a opção KoaCoh KPC Estou apenas me arrastando por eles. Você também pode clicar neles. Há uma linha lá dentro da qual eu quero me livrar. Então esse é o meu ingresso. A estrela é fácil. A linha. Na verdade, a estrela, só para você saber, está embaixo da estrela. Está bem? Arraste-o para fora. Segurando Shift, segurando Shift, e eu vou estilizar o meu OK. E eu quero a linha pontilhada. Vou usar a tecla Al para a ferramenta de linha. Vou traçar uma linha para baixo, segurar a tecla Shift, para que fique rígida. Vou me certificar de que o peso está alto. Vou arrastá-lo para algo que eu goste. Agora, a linha pontilhada está escondida sob o perfil de largura? Não, essas linhas pontilhadas, sim. Então, nessas pequenas configurações, você pode dizer estilo. Eu quero ser enganado. Que tipo de arrojo queremos? Eu gosto do arredondado, ok? Sem boné. Está bem? Normalmente é chamado. Qual deles é chamado, eles não os chamam neste. Ilustrados, eles os chamam apenas de maiúsculas, que eu adoro chamar São apenas tampas arredondadas. Porque eu tenho 12 anos, vamos fazer a rodada do Dash Cap. O seu pode parecer um pouco estranho. Você tem que brincar com os traços e as lacunas. Os traços para mim precisam ser menores, não 23, três, e a lacuna, eu quero dez Você apenas brinca com os tamanhos. Faça como quiser. Tudo bem, essas linhas. Eles são bem legais, não é? mesma coisa. Linha dois, desenhe uma linha. Ok, vou empacotar e vou usar esse perfil de largura. Largue isso. Não essa. Vamos acessar as configurações novamente e não vamos para o perfil de largura, vamos para os pincéis Vamos para o básico, vamos para a escova. E eu vou dizer, eu gosto desse pincel. pincéis estão aqui. Os que eu encontrei, não me lembro qual usei. Por favor, mantenha essa aí, eu acho. Agora, o que você pode fazer é odiar, sei lá, quando os derrames são todos iguais Eu passo muito tempo. duplicar isso algumas vezes. Eu passo um pouco de tempo dizendo: “Tudo bem, eu quero que você possa virar a direção, para que essa seja diferente Eu posso fazer isso um pouco mais longo, pegar o pontinho lá e arrastar por mais tempo. Está bem? Este aqui vai ser invertido Vai ser um pouco assim e vai estar um pouquinho, um grau de diferença. Eu não sei. Passo muito tempo fazendo coisas com as quais ninguém se importa. Tudo bem. Vou pular lá porque passo muito tempo tentando encontrar o ângulo certo nisso. Então, sim, eu tenho alguma aleatoriedade. Aí está. Esse é o meu ingresso. Como mais o primeiro. Mas de qualquer forma, por que viemos aqui, Dan? Viemos aqui para uma flexibilização personalizada. Isso é fácil. Eu queria entrar aqui e lembrar às pessoas algumas das peculiaridades de quebrar suas animações, porque todo mundo tem diferentes níveis de habilidade com suas animações de prototipagem atuais e mostrar Uma muito feia. Te vejo no próximo vídeo. 39. Projeto do curso 10 - Confira a animação: Tudo bem É um projeto de classe. Quer que você faça sua própria animação de checkout. Você foi convidado a criar uma animação de sucesso depois que alguém compra um ingresso Eles inserem os detalhes do cartão de crédito, clicam em enviar, é a partir daí que eu quero que você faça. Fizemos algo parecido no último vídeo. Acabei de simular um. Esse está aqui? Alguém comprou uma passagem e ela aparece, e aí está. Eu quero que você faça o seu próprio. Na verdade, o que estamos fazendo aqui é que eu quero que você pratique com poeira, então crie três ou mais quadros para sua animação Pode ser simples, pode ser avançado. Você pode ter marcas de seleção e animações em todos os lugares, até você. Depois de terminar, quero que você compartilhe um vídeo de sua animação e faça o upload da duração dos projetos da aula. Como alternativa, se você acha que os vídeos estão apenas me matando, você pode simplesmente fazer uma captura de tela no modo protótipo para que eu possa ver todos os seus fios Mas eu adoraria ver o vídeo. Compartilhe nas redes sociais se você também fizer o vídeo. Marque-me. Adoro ver como são as primeiras animações de sucesso de todos como são as primeiras animações de sucesso Eles podem ser muito sérios. Mas eles não precisam ser. Aproveite o projeto da aula. Certifique-se de brincar com a atenuação personalizada. Muitas vezes você pode fazer com que pareça pior, mas tudo bem. Estamos brincando com essa configuração. Depois disso, nos vemos no próximo vídeo. 40. Como copiar e colar interações no Figma: Olá. Neste vídeo, veremos como copiar e colar interações Você passa muito tempo fazendo eles. O atalho é só pegar na agulha, copiá-la e colá-la Há algumas pequenas coisas que precisamos consertar , então vamos resolver isso juntos. Mas você veio aqui só para isso, é tudo que você faz. Selecione-os, copie-os e cole-os. Mas vamos entrar em um pouco mais de detalhes. Ok, então isso funcionará com qualquer animação ou interação. O que eu tenho é, deixe-me pré-visualizá-lo. É só que isso passa para a próxima. O que eu fiz foi passar muito tempo contornando coisas como aparência, minha própria atenuação personalizada já personalizei a facilidade e saída. Eu saí da animação. Em vez de animar de forma instantânea, dissolvida ou inteligente, eu a movo para dentro e dentro, rolamos até o final Se você passar o mouse sobre ele, verá que ele simplesmente empurra um quadro para baixo em relação ao próximo Você tem isso vindo de cima, então eu trabalhei muito. O que eu quero fazer é não ter que fazer isso para cada um. Ok, o que eu posso fazer é fazer isso de duas maneiras. Eu posso clicar neste fio aqui ou no noodle, e simplesmente usar Command ou Control C, apenas uma cópia antiga normal, e então eu posso dizer, colar, funciona Se eu desfizer, você pode fazer isso com todos eles. E você. Boom, você tem tudo. Fez tudo isso, exceto uma coisa errada. O que fizemos foi desfazer tudo e este aqui teve a interação de dizer que está fazendo tudo isso, mas diz navegue até a animação cinco Não sei como fazer com que vá para a próxima, em vez de cinco, porque se eu colar aqui, esse cara volta a si mesmo porque tem cinco anos. Eu tenho que dizer, na verdade, não para cinco. Vá até aquele. Porém, qualquer outra coisa surge, toda essa personalização, a mudança, todo o tempo que você fez mesmo com este, pasta, você tem que fazer um pouco de Às vezes, esse macarrão fica cruzado. Nunca quero cruzar macarrão Clique no título na parte superior aqui, esteja no modo protótipo. Lembre-se, opção oito, Altate. Não, são nove. Foi um teste. Eu posso dizer, na verdade, em vez de ir para cinco, vamos para dois. Qual é o próximo? Sete. Aí está. Agora deve funcionar. Vamos embora. Opa. A, o ritmo. Hoje é a noite. É um pouco lento. forma, há algo estranho nisso. Mas essa é a dica. Você pode fazer isso de outra maneira. Eu costumava fazer isso dessa maneira. Eu só quero te mostrar, digamos, que eu quero copiar tudo disso. Gosto de mostrar essas duas maneiras só porque algumas coisas são estranhas Você não clica nele porque ele o abre. Tudo o que você quer fazer é clicar nesta pequena área estranha aqui, pop que está selecionado Eu posso simplesmente usar minha cópia normal, depois posso dizer, colar, mas vá lá. Isso realmente não importa. Essa é uma boa pergunta fácil. Copiar e colar interações dentro do Figma. É isso mesmo. Próximo vídeo. 41. Animação dentro de variantes no Figma: Um. Neste vídeo, veremos como adicionar animação. Em vez de usar o método quadro a quadro que fizemos anteriormente e que muitas pessoas usam, vamos fazer assim. Na verdade, você pode animar entre variantes e obter a mesma coisa Então, essa animação substitui tudo isso. Podemos usá-lo apenas como pequenas unidades. Veja esse garotinho aqui, vamos pré-visualizá-lo. Tudo está acontecendo dentro daquele cara. Oh, até mesmo um botão. Vamos fazer um botão que até se move para dentro. Você pode ver a mesma coisa. apenas um componente que contém duas variantes. parte superior você não pode ver na parte inferior e ficar impressionado com a animação muito comum Tanto o botão quanto o botão. Tudo bem, poderia ser melhor. Mas é legal e muito útil, arrume nossas animações Chega de mil quadros para animar coisas simples. Tudo bem. Vamos começar. Ok, então estou no modo protótipo, opção ou Alt nove Você pode ver que eu fiz isso anteriormente, onde fizemos esse tipo de animação passo a passo, quadro a quadro. Muitas pessoas fazem isso, você pode fazer, mas obviamente, é confuso, certo? Então, vamos dar uma prévia rápida para ver o que fizemos. Faz isso. Vamos fazer algo um pouco diferente. Vamos fazer com que o texto simplesmente apareça. Mas, em vez de ter que pular entre os quadros, faremos tudo em variantes. Vamos começar com W, devemos fazer isso aqui. Eu vou voltar ao design. Opção ou Alt eight. Eu vou até aqui. E vamos transformá-la em uma opção de componente K ou Control Alt K. É um componente. Eu quero variantes. Então eu vou fazer um, dois, três, quatro. Isso não funcionou. Você só pode clicar nele uma vez. Então eu vou embora. Em que eu cliquei? Esmagando todos os botões Tudo bem. Vamos voltar, desfazer, desfazer e fazer Variantes principais, não clique em mais nada. Vou duplicar isso, cliquei nele. Eu tenho quatro palavras. Hoje é a noite. Eu só vou mudar o texto e as cores. Você espera aí, vamos para o modo de velocidade. Isso é tudo que eu fiz. A próxima coisa que quero fazer é poder realmente usar o protótipo como fizemos aqui Lembre-se, clicamos aqui, dissemos modo protótipo, opcional lt nine, e arrastamos o macarrão Na verdade, você pode fazer isso entre variantes dentro desse conjunto de componentes. Você pode dizer, na verdade, certifique-se de estar no modo protótipo, para ampliar um pouco Você pode realmente arrastar um macarrão daqui para esse cara. Eu quero fazer não está disponível, quero dizer depois de um atraso de alguns segundos. Eu queria mudar para essa outra variante , chamada Variante dois. Vamos fazer com que ele se acalme. Não estou muito preocupado, quanto tempo vai levar? Eu não sei. Por algum motivo, não consigo clicar no meu agora. É um bug. Se eu apagar essa invenção, ela volta à vida Mas de qualquer forma, só para você saber, às vezes figma é um pouco estranho. Eu realmente quero digitar isso. Mas de qualquer forma, nós temos isso. Então eu acho que isso vai funcionar. Depois de um tempo de atraso, mude para este anime inteligente. Na verdade, poderíamos fazer com que isso se dissolvesse se quiséssemos. Isso não é um problema. Tudo bem, vamos dar essa pra lá Rastreie esse. Não me lembrava de tudo. Ele se lembrou de algumas delas, mas quer fazer isso agora mesmo. Eu vou dizer que depois de um atraso de algo aqui embaixo, nós realmente queremos digitá-lo. Todo o resto é perfeito. Isso me dá uma boa desculpa para usar o copiar e colar Vou clicar no macarrão, copiá-lo, ir até este, colar Vai tentar voltar a si mesma, mas vai voltar para lá depois de atraso, tudo isso deve ser bom. Parcialmente lá. É como animar entre quadros Estamos apenas fazendo isso aqui dentro desse conjunto de componentes entre variantes. Muitas palavras? O que vou fazer é criar uma nova moldura para isso. Na verdade, vou fazer dele um iPhone seis. Comido. Você pode vir aqui, quão bagunçado é nosso uppud Vamos escolher uma cor de fundo. Opção oito, Alt oito, volte ao design, e eu vou escolher na verdade uma delas e quero uma das cores escuras. 900 de qualquer um desses, na verdade. Vamos pegar um exemplo disso e arrastá-lo para fora. Estou segurando a opção CaCl PC ou você pode copiá-la e colá-la. Agora, o legal disso é que isso tem a animação embutida. Isso pode ser acessado na minha página de componentes. Eu não preciso desse lixo. Vamos provar que funciona primeiro. Vamos até você e, digamos , Shift Space bar para a pré-visualização. Hoje é a noite. Precisa ser mais rápido, mas você entendeu. O que é muito legal nisso é que podemos realmente fazer mais do que dar uma olhada. a que estamos limitados, especialmente neste caso, o tempo entre as páginas é o mesmo. Se eu quiser que algo apareça, digamos, vamos fazer isso neste para dar uma instância. Vou usar apenas uma moldura em branco com uma cor na sua cor. Desde que seja alguma variação de, você entendeu. Eu tenho isso. Preciso que seja uma cópia, quero que esteja em todas essas molduras. Mas eu quero que o momento seja diferente. Digamos que eu queira que comece a vir desse lado, vá para o meio e depois desça até o fundo e volte a subir. Eu tenho que fazer o tempo que fiz para comprar o ingresso. Vou mudar para o modo protótipo. O que quer que eu tenha decidido sobre isso afetará cada coisa nessa página. Vamos dar uma prévia. Clique uma vez que ela se move para dentro. Você pode ver que eles são exatamente iguais? Por que o último não foi a lugar nenhum? Esse aqui, é chamado de quadro 22. O que é essa ligação? Quadro 22? É porque a transição entre aqui está desaparecendo. Tudo faz sentido. Mas você entendeu, o momento é o mesmo. É aí que isso se torna útil. Vamos desfazer isso. Deixe-me fazer mais, por exemplo. Eu tenho essa configuração na parte inferior. Eu criei um plano de fundo de IA usando coisas de computador dos anos 80. Não se preocupe com o texto. Vamos dar uma olhada no botão. Se eu fosse fazer isso, vou pré-visualizá-lo, Shift Spacebar Você pode ver que o botão aparece e aparece. É assim que você o constrói, certo? Você tem dois quadros separados e anima entre eles. Mas digamos que você queira que o texto apareça , mas em um momento diferente, você não pode, porque o texto precisa fazer exatamente a mesma coisa que o botão. Então, a maneira de contornar isso é criar exatamente como fizemos antes, criar tudo em sua própria pequena animação. Eu quero fazer outro só para , sei lá, deixar isso claro. Porque eu vou deletar isso, na verdade, e vamos trazer meus ativos Eu tenho crédito neste arquivo em componentes. Já que M não lhe deu um nome, não é? Como é chamado? Não consigo me lembrar. O que estamos fazendo? Onde está? Aqui está aqui. Vamos copiar isso. Volte para o modo de design. Oh, não está na página de componentes. É por isso que não consegui encontrá-lo. Aí está. Passeando por aí. É de qualquer maneira. Então, eu tenho isso aqui, Shift Spacef para uma Está fazendo sua própria pequena animação, e o legal disso é que posso dizer que você pode fazer suas próprias coisas. Vamos construir sua própria coisa. Algumas coisas que eu quero fazer nesse caso é não querer que seja a saída automática porque quero que o texto se mova. O texto fica preso no meio como uma saída automática Vamos analisar isso antes de dizermos para remover todas as saídas automáticas. Incrível. Eu tenho um botão com alguns textos nele. Nada é autow. O que eu quero fazer é selecionar os dois. Vamos torná-lo um componente, comando shift, command shift, K, control shift K. Não, isso abre a opção de comando K ou Control Alt K. Agora é Excelente. Vamos adicionar uma variável. Nessa variável inferior, vou realmente pegar os componentes e torná-los um pouco maiores. Eu tenho algum espaço. Eu quero que o texto aqui dentro se mova um pouco para baixo. Lembre-se de não sair. Eu apenas pressiono a barra de espaço para que ela se mova para baixo porque o que eu quero, oh, eu quero o contrário. Então, eu quero começar com isso. Eu vou dizer que você vem aqui. Você pode simplesmente usar seus rakeys se quiser. Então, primeiro, ele vai começar a descer, depois ele vai aparecer. Vamos tentar, mudar para o modo protótipo, opção nove, Alt, nove Você está cansado disso. Vamos arrastar isso para o outro lado. Queremos dizer imediatamente que não, logo após algum atraso, sem demora, mude para este. Vamos animá-lo de forma inteligente. Perfeito. Conseguimos que seja fácil de entrar. Isso deve funcionar. OK. Isso deve ir para nossa página de componentes. Eu só vou colocá-lo lá, vamos pegar uma versão dele. OK. Agora, o legal disso é que eles estão fazendo coisas diferentes. Isso está fazendo o quê? Desvanecer-se. Este está fazendo algum movimento em momentos diferentes. Aqui está, shift, barra de espaço. Todos começam ao mesmo tempo Mas você vê que isso ainda está acontecendo. Esse aqui está acabado. O que eu poderia fazer também, é este aqui, eu poderia depois de um atraso maior, eu poderia dizer um atraso. Vamos fazer um atraso de quanto tempo isso leva? Talvez cheguemos perto de quando essa coisa terminar. Você pode fazer todas essas animações personalizadas agora. Você só precisa vincular as animações em uma variante. Faça-os aqui e depois empilhe-os em uma página. Você pode ver o quanto é melhor. Apenas uma página e suas animações são separadas. Vamos dar uma prévia. Ainda é muito tempo, mas você entendeu. Você pode começar a construir essas coisas e vamos começar. Vamos ficar muito tempo agora. E então espere Oh. Espero que tenha provado que é verdade, porque não é muito empolgante. Mas espero que você tenha entendido. É complicado, acabei de me acostumar a fazer isso dessa maneira. Mas você pode ver que para fazer tudo isso teria que ter isso mais que começar depois. Nesse caso, tudo o que temos de tudo, toda a minha animação é essa. Você desce. Vá, vá, vá. Então, isso é tudo que eles precisam em vez de um monte de molduras. Se você for muito esquisito, eu vou fazer 1.000 quadros, fazer 1.000 quadros. Tudo bem. Novamente, acho que é o curso avançado, queremos entrar em coisas avançadas. Você encontrará coisas na comunidade, diabos, isso foi feito? Agora, você pode ter animações aqui dentro. Você precisa mudar para o modo protótipo. Caso contrário, você nunca os verá. Por último, volte ao modo de design. Opção oito, antiga oito. Vamos redimensionar isso para que fique um pouco mais organizado É isso mesmo. Te vejo no próximo vídeo. 42. Projeto 11 do curso — animação de variantes: Primeiro, é hora de você tentar. É o projeto de classe número 11. É uma animação variante, quero que você crie um botão. Você pode ser exatamente como eu acabei de fazer. Acabamos de fazer isso juntos, ou você pode construir o seu próprio. É aqui que há algo acontecendo com o botão. Aí está. Minha invenção carregou Você pode fazer com que o seu faça o que quiser. Mas quero ter certeza de que você está apenas praticando o uso da animação em uma variante Lembre-se de que o conjunto de componentes tem variantes dentro dele. Eu quero que você faça a animação entre esses dois. Lembre-se de que, ao fazer isso, mude para o modo protótipo. Eu adoraria ver uma animação ou um vídeo seu. Se você quiser fazer o tipo também, depende totalmente de você. Realmente, o que eu quero do tutorial é que você crie sua própria animação variante Então, dê uma olhada nos requisitos. Então você foi convidado a criar um botão animado, basta usar as variantes dentro do seu componente enviado para fazer a animação. Compartilhe um vídeo, faça o upload para os projetos da turma e, se você não puder fazer vídeos, não se preocupe, faça uma captura de tela mostrando seus fios Realmente não consigo verificar, mas adoraria ver. Se você fizer a versão em vídeo, compartilhe-a nas redes sociais, certifique-se de me marcar. Eu adoraria ver o que você está fazendo. E se alguém perguntar, você está fazendo aquela aula super incrível com Dan, traga seu próprio laptop. Você deveria dar uma olhada. Algo parecido. Tudo bem, aproveite o projeto da aula. Nos vemos no próximo vídeo. 43. Texto do Houdini: como criar uma animação de máscara de texto no Figma?: Oi, todo mundo. Neste vídeo, vamos fazer isso. Houdini. Veja o que vem do nada Nós vamos fazer a animação. Basicamente dependerá de duas coisas principais. Vamos fazer uma animação dentro de uma variante, o que acabamos de fazer, e vamos adicionar uma máscara a ela porque somos incríveis e ela é avançada. Se você achar isso complicado, é tipo, Oh, meu Deus, esse é um acampamento muito complicado . Eu entendo totalmente. Estamos combinando algumas coisas. Alguns de vocês entenderão, alguns de vocês aceitarão. Você vai chegar lá. Tudo bem, vamos começar. Ok. Apenas comece. Temos dois trechos de texto. Eles são apenas textos simples e antigos. Eles estão em caixas separadas porque eu quero animá-los separadamente. Mas eles podem ser qualquer tipo de texto ou fonte. E a próxima coisa que vou fazer é mascará-los. Então, precisamos pegar algo para mascará-los. Vou usar uma ferramenta retangular. Você poderia usar uma moldura. Você pode usar todos os tipos de formas. Vou usar a ferramenta retangular. Eu encobri isso. Você precisa ter certeza de que ele cobre o texto. E vamos precisar de dois deles. Então, vou duplicar esse e usá-lo para cobri-lo E é aqui que o comando ou controle Y é útil. Talvez essa seja a visão geral Está bem? Podemos meio que verificar se está completamente. O que é incrível. Em seguida, o texto precisa estar no topo. Eu vou pegar aquele e aquele. Estou segurando a tecla Shift para conectar os dois e vou usar meu suporte quadrado apenas para empurrá-lo para trás Ou você pode arrastá-las no painel de camadas. Você só precisa se certificar de que o texto esteja no topo do retângulo Ok, então eu preciso desses dois agora. Vou arrastar uma caixa em volta dois. Eu preciso que os dois sejam selecionados. Vamos transformá-los em uma máscara. Havia uma opção de comando de atalho. Não, controle de comando. Eu nunca o uso. Não sei como isso acontece no meu cérebro. É mais fácil começar a desenhar e começar Há uma opção aqui usar máscara ou clicar com o botão direito do mouse nela. Está em um PC, essa é uma boa pergunta. Você terá que ir até o topo e conferir. Me desculpe Ou simplesmente vá aqui e clique com o botão direito do mouse e diz: use uma máscara e você verá lá em um PC qual é o atalho Eu não consigo me lembrar. Tudo bem, então a máscara. O que aconteceu agora não é nada, na verdade, exceto como grupo de máscaras. Você pode ver? Há um grupo de máscaras. Há texto dentro dela e há o retângulo que dá a máscara. É assim que eles são configurados. O que você pode fazer é pegar Viva la. Você pode digitar o que quiser, obviamente, e você pode mover o texto para baixo. Você pode ver que é uma máscara. Ok. O que acontece com frequência na sala de aula é que algumas pessoas acidentalmente pegam o grupo inteiro, não o texto sozinho, e tentam movê-lo para baixo Isso não funciona. Basta clicar em febre, seja qual for o texto, e mova-o para baixo. A outra coisa é que ele pode saltar para fora. Ele pode pular da máscara se você arrastá-lo muito longe. Quem se lembra do que você segura? Você se lembra, selecione o texto, comece a arrastar e, em seguida, mantenha pressionado, diga longe Depois, você pode movê-lo para baixo e ele ficará dentro da máscara, mas ficará escondido. Lembre-se, controle de conforto, por quê? Você não pode ver isso nessa visão. Bom trabalho. Isso não importa. Vamos desfazer isso de qualquer maneira. Estamos usando nossas máscaras, grupo de máscaras um, grupo de máscaras dois. O texto está nele. Agora, o que vamos fazer é pegar os dois e começar de novo aqui. É mais fácil. Porque eu tenho três estágios. Ele precisa desaparecer completamente. Então o Viva precisa aparecer e depois o Techno. Há três níveis. Você poderia simplesmente fazer isso com um texto Houdini. Não sei por que, neste curso, decidi fazer isso com dois B, é o curso avançado. Estamos fazendo isso com antecedência. Então, vamos torná-lo componente. Ok, Command Shift K, Control Shift K, que abre a entrada da imagem. Combine a opção K. Eu faço isso o dia todo. Sim, combine a opção K em um Mac. Controle lk em um PC. Nós apenas clicamos no botão lá em cima. É um componente. Vamos dar a ele um nome amargo. Ok, vamos chamar esse. Animação do título. Um, e vamos duplicá-lo algumas vezes. Precisamos de variantes. Vamos dizer uma variante e, em seguida, vamos dizer U, duplicado, que é Comando ou Controle D com três variantes Esse aqui precisa desaparecer completamente. É aqui que vamos clicar duas vezes para entrar ou entrar no seu grupo de máscaras e clicar em Viva. Então você quer chegar a esse nível como fizemos antes e, em seguida, arrastá-lo para baixo, arrastá-lo para baixo. Você pode usar seus ancinhos. Mantenha a tecla Shift nos ancinhos. Isso também funciona. Ou clique duas vezes para pegar a palavra techno e arrastá-la para baixo segurando a tecla Spacebkey Eu também vou mudar de marcha, então siga em frente. Ok, então esta, a primeira variante, não pode ser vista, e depois a próxima, eu quero que apenas Viva la apareça. techno precisa desaparecer. Então, vou clicar em, continuar clicando duas vezes até encontrar meu texto, arrastá-lo para baixo. Acho os ancinhos muito mais fáceis. Ok, não pode ser visto. Agora eu posso ver essa primeira linha. Eu posso ver os dois. Vamos fazer com que eles animem juntos. Vamos para a opção nove ou simplesmente vamos para o seu protótipo aqui em cima Vou arrastar uma caixa de você para lá. O que eu gostaria que você fizesse está na torneira. Não, eu quero que você diga, depois um pequeno atraso de quanto tempo, um milissegundo, imediatamente, eu gostaria que você mudasse para a variante para. Legal. Vamos usar o Smart animate se ainda não estiver configurado para isso, o que vou usar é facilitar o retrocesso apenas porque não pode ser visto no início Vai relaxar e fazer uma pequena lata. Sobre então, não sei. Vamos fazer um teste. Faça a mesma coisa com isso. Eu vou dizer que você tem a mesma animação. Isso traz um pouco disso à tona. Depois de um atraso, Zuk fez alguma das outras? É lembrado de todas essas coisas. Está tudo bem. Vamos dar uma olhada. Tudo bem Ainda não vamos testar os componentes reais. Vamos pegar uma instância do nosso componente. O problema é que está em branco. Me mostrando minha primeira instância, o que é um pouco chato. Mas de qualquer forma, entendemos a ideia. Eu o tenho em algum lugar aqui. Vamos dar uma seleção ao quadro. Vamos ao Schiff Space Bar para fazer uma pequena prévia. Oh, olhe para nós. Em uma repetição. Estamos animando gênios Incrível. Eu adoro isso. Está bem? Então, se você quiser escrever textos como esse, o importante é, lembre-se, garantir que você esteja arrastando o texto para fora, não o grupo de mascaramento, que causa problemas às pessoas A outra coisa é que, se você realmente assiste isso, vamos lidar com isso aqui. Então, se eu quiser essa animação, vamos usar essas variantes, e depois de um atraso, ela mudará. Ele está usando o Ease out and Back. Se eu for ao meu próprio Bezier personalizado, veja, é assim que o Ease out se parece Vai se acalmar dessa maneira e depois vai para onde deveria e depois voltará. Se você quiser realmente maximizar isso, funcionará. Vamos dar uma prévia. Eu vou te mostrar o que acontece. Mude a barra de espaço. Viu que subiu? Vamos repetir isso. Vamos ver a palavra techno. Ele subiu e se perdeu. É só porque nossa máscara não é grande o suficiente. Se eu entrar nisso e vamos para o Comando, por quê? O que acontece é que ela sobe e lá está minha máscara. Você vê lá, onde está minha máscara, o retângulo. Vai lá e sobe e supera isso. Você só vai se certificar de que é realmente muito maior do que precisa ser. Acabei de ter espaço para o techno entrar. Um pouco confuso. Dê uma prévia. Se você já está impressionado com este, tudo bem. Essa é uma pergunta complicada. Máscaras e atenuação personalizada. Estamos fazendo animações dentro variantes. Você está fazendo coisas pesadas. Se sua mente estiver um pouco confusa, tudo bem. Mas você pode ver que o techno tinha espaço para usar aquela máscara agora A máscara meio que se encaixa aqui, e se você quiser ir mais longe, você tem que fazer a máscara ficar cada vez mais alta e. Você entendeu a ideia. Tudo bem, amigos. Nós fizemos isso. Para quem você mandou uma mensagem? Tudo bem, é isso. Te vejo no próximo vídeo. 44. Animação de primavera e sobreposições no Figma: Oi, pessoal. Neste vídeo, vamos fazer isso. Pronto, defina Bio. Ok, vamos aprender algumas coisas. Vamos fazer um lembrete do que é uma sobreposição do curso Essentials, o que é um bom lembrete. Mas também, sério? Garoto. Ok, vamos fazer com que o pequeno aumento da navegação seja todo elástico É chamado de abrandamento da primavera, e vamos fazer isso agora dentro do Figma Bem, eu quero fazer barulho novamente. Mais uma vez. Vaia. Tudo bem, vamos fazer isso. Tudo bem, para começar. Você pode começar com uma página nova e não precisa tirar uma soneca. Qualquer coisa pode ser saltitante ou suspensa. Ok, então eu vou voltar ao começo aqui e vou colocar isso aqui. Vou usar meu Nav que fiz anteriormente. Então, vou ao meu painel de ativos e vou encontrar os componentes, e aí está meu OK, então vou usar isso. Vai começar na tela porque vamos fazer uma sobreposição O que eu vou dizer é que esta página aqui, eu estou em protótipo Eu vou dizer para ir para esta página. Quero ter certeza depois de um atraso de quanto tempo? Não sei, mas quero um pouco de atraso. 0,3 de segundo, eu gostaria de ir até isso, mas não quero que ele não navegue. Eu quero que seja uma sobreposição aberta. Isso abrirá uma sobreposição. O que vai abrir? Isso vai abrir essa minha bunda Nav. Estamos centrados Não, eu quero estar no centro inferior. Eu gostaria que não fosse instantâneo. Eu quero me mudar de baixo para cima. Ok, e é aqui que estão as molas. Então, esses são os que temos usado até agora. A primavera são essas aqui embaixo. Você também pode fazer um personalizado. Vamos dar uma olhada nisso. Você pode ver, é apenas um arco de aparência muito diferente do que tínhamos com alguns desses beziers personalizados, ok primavera passa por onde deveria estar e meio que volta para trás até finalmente parar Você pode dar uma olhada. Bouncy é a mais óbvia, ok Você pode ver isso aqui embaixo. É muito legal. Você pode brincar com os outros, muito parecidos, mais sutis. Tudo bem, faça isso funcionar, Dan. Isso realmente funciona? Vamos clicar nesse cara, dar uma prévia, mudar a barra de espaço e ativar Eu adoro isso. Arthur reinicie ou repita. Ah. Ei, seus próprios efeitos sonoros, eu gosto. Vamos analisar rapidamente apenas a configuração. Vou dar uma olhada no protótipo. Opção nove, 09. Vou clicar nisso e arrastá-lo para cima. Bouncy é a mais óbvia. Tudo isso é apenas menos do que isso. Eles não são diferentes. Eles dizem que isso é realmente extremo. São um pouco sutis. O que podemos fazer é personalizar a mola e, como fizemos com a outra flexibilização personalizada, o que você descobrirá é que pode arrastar essas coisas Às vezes, porém, é mais fácil brincar com a rigidez, o amortecimento Massa é o quão pesada essa coisa parece. Isso muda o tempo. Se eu disser que quero que a massa suba, vou clicar em segurar e arrastá-la dessa forma. Não me deixa arrastar e segurar minha tecla de opção ou, se isso acontecer. Veja, estou arrastando isso para fora. Agora são 6 segundos ou 8 segundos, você pode ver o quanto essa coisa parece mais pesada Porque é mais pesado. Com uma baixa, é muito leve. Vamos colocar isso em um. OK. E isso é meio legal. Então, brinque com isso, saiba que você pode acabar quebrando isso. Se eu aumentar para quatro, ok? É meio pesado. Vamos ver o amortecimento Amortecer é se eu não tiver amortecimento, vamos lá. Vai ser realmente uma recuperação muito boa. O que é isso? Pule, pule, caçador de lixo. Talvez nunca pare. Olha, está tocando por, tipo, um minuto, 4 minutos. Nunca vai parar de saltar. Está bem? Então isso vai funcionar. Vamos falar sobre isso, mas vai ser uma, interessante, não muito útil. Animação por telefone. Você vai quebrá-lo. E quando você fizer isso, você precisa entrar aqui e dizer que, na verdade, você vai descer para 1 segundo novamente. 1 segundo. Voltando ao que era? Ninguém. Não me lembro qual era o padrão. Na verdade, vamos voltar ao Bouncy e depois voltar ao Custom Spring e reiniciaremos. Rigidez Vamos fazer mais um. Vou analisar rigidez e deixar de lado o umedecimento Então, quão rígida é a mola. Vamos torná-lo mais rígido. Vamos até 3.000, ok? É pesado, mas tem uma mola muito rígida. Tudo bem, você entendeu. Essa é uma sobreposição e uma sobreposição que tem essa atenuação de mola aplicada a Brinque com os outros , gentis, rápidos, saltitantes, trabalhe em seus efeitos sonoros, Bo, nos vemos no próximo vídeo Tchau. 45. Projeto de aula 12 — animação de texto no Houdini: Tudo bem Eu quero que você faça sua própria animação Houdini Text Não precisa ser exatamente como o meu. Eu só quero digitar Houdini e usar máscaras, como fizemos nos tutoriais anteriores Eu quero que você use a animação da primavera. Então, pratique com eles e compartilhe um vídeo, se puder. Caso contrário, compartilhe uma captura de tela e faça o upload para os projetos da turma Eu adoraria ver isso nas redes sociais, só para lembrar que não consigo acessar todos os projetos de todo mundo A única maneira de isso funcionar é se você enviar os seus para os projetos da turma, é dar uma olhada em outros dois e deixar um comentário. Não precisa estar bem. Mas, muitas vezes, o que realmente funciona bem é um elogio, algo que eles talvez queiram experimentar a seguir, seguido por um elogio Chame isso de sanduíche ****, mas provavelmente há mais um nome, na verdade, não consigo pensar em outra palavra É um ótimo nome para isso. Está bem? Então comece com algo que você goste, algo que eles possam tentar. E o que você descobrirá é que se torna um designer amargo, capaz de se expressar por meio de texto, e tudo se resume à prática. Então, eu quero que você saia e, se fizer o upload de um, comente sobre o de outras duas pessoas. Dessa forma, recebemos muitos comentários . Você começa a praticar. As pessoas podem praticar criticar seu trabalho, seja respeitoso Faça o sanduíche. Tudo bem Divirta-se fazendo o Texto Houdini . É complicado. Deixe-me saber nos comentários se você tiver problemas, se estiver com problemas, espero que alguém tenha resolvido isso nos comentários Tudo bem Nos vemos no próximo vídeo depois fazer o Texto Houdini . Tudo bem Tchau. 46. Por que a interação ao clicar está em cinza ou ausente no Figma?: R: Oi, pessoal. Neste vídeo, veremos por que às vezes o botão “ao tocar” é “nota baixa” ou “ao clicar” é “nota baixa”, e também vamos reiterar por que às vezes diz “ao toque” e às vezes diz “ao clicar” Só estou dizendo que, ao tocar no clique, é o mesmo. Vamos analisar isso com um pouco mais de detalhes. Vamos começar com um toque em um clique. Vou pegar um dos meus botões da minha biblioteca e vou mudar para o modo de protótipo, Alt ou Opção nove, eu vou dizer, você vai aqui Vou rolar até o topo, diz “on tap”. Ou toque em, acesse esta página. Excelente. Eu pego minha ferramenta de moldura e vou até aqui e digo, eu quero uma bela moldura grande chamada MacBook ear Okay Ainda com o nome iPhone 16. Ignore isso. É só repetir o que estava aqui em cima, vamos dar ao Scrab o mesmo botão, qual botão eu pego e agora volto ao modo Eu vou dizer, vá lá quando você clicou. Vamos dar uma olhada. Ainda está escrito na torneira. Você fica tipo, isso não é um telefone. É um site, deve estar em um clique. O que aconteceu é que se eu clicar na moldura, vou até aqui e digo as configurações do protótipo, é usado o documento um, que é o iPhone 16 Posso dizer que, na verdade, agora é o MacBook Air SCQUScroll, que é um laptop no qual clicamos Um clique no botão é exatamente a mesma coisa, mas se chama clique. Este aqui agora também está disponível em um clique. Mudamos o protótipo desse arquivo para que agora seja um laptop Vamos dar uma prévia e ver se ele foi pré-visualizado e exibido usando um laptop, o Eles fazem exatamente a mesma coisa. Isso não importa. Se você está seguindo o tutor de alguém e essa pessoa pensa, agora eu uso o on tap e você fica tipo, eu não tenho. Eu tenho o OnClick mesmo, exceto nas configurações do protótipo prototipado, nessas configurações de protótipo, ele está definido como provavelmente, às vezes, não pode ser definido como nada aqui ou às vezes, não pode ser definido como nada Vou voltar para o iPhone uma coisa ou outra só para tocar novamente. O outro que eu queria te mostrar na torneira, às vezes você não o tem. É nota baixa. Vou clicar nesse macarrão aqui. Às vezes você chega ao topo e fica tipo, não deixa você escolher, é nota baixa. É quando você tem mais de um aplicado. Eu faço isso o tempo todo e depois surto, surto, mas procuro meu cérebro para descobrir por que dizer que eu tenho Eu estou tipo, eu quero que você vá aqui. Eu tenho a blusa aqui. Eu acho que queria estar disponível, é ótimo sair. É ótimo porque você já aplicou algo. Vou me inscrever no travesti. Isso é legal. Eu tenho duas coisas aplicadas a isso. Você não pode ter dois na torneira porque ele não sabe para onde ir Se eu precisar que este esteja disponível, preciso pegar este e clicar em Excluir. Agora eu posso voltar para este e no topo aqui no toque estarei de volta. Aí está. É isso mesmo. clicar é para visualizar em um laptop ou desktop, isso está nas configurações do protótipo ou não tem nada selecionado quando você está no modo de protótipo, ou ao tocar é porque você está em algum dispositivo móvel ou iPad. Aí está. Eles são todos iguais. Te vejo no próximo vídeo. 47. IA adicione interações automaticamente no Figma: Primeiro, neste vídeo, vamos deixar robôs fazerem todas as interações e prototipagem Vamos clicar em um botão, e vai de isso para bam, isso, tem mais. Tem macarrão em todo lugar, e eu não fiz nada disso. Ele foi e disse: A, o botão do coração vai para os favoritos e esse botão Agora deve ir para o carrinho, tudo automaticamente usando os robôs. Tudo bem, vamos começar. Ok, então o que eu fiz foi criar uma nova página, pois estamos trabalhando nisso. Fique bagunçado. Fiz uma nova página, OK hit plus, fiz uma página chamada direções. Eu apenas copiei pedaços e fiz essa pequena mistura Ok, eu só pego a página de gêneros e coloquei meu Nav A página do Watsa é exatamente o que acontecendo e é exatamente como estava no outro documento Eu criei este novo chamado Favoritos, dei a ele um título e, o mesmo com o carrinho de compras, o trouxe do outro dock. Todos eles compartilham a mesma navegação que criamos anteriormente. Se você está acompanhando, verifique o modo protótipo para ver se há alguma interação atualmente nele No protótipo, você pode ver que acabei de remover tudo o que eu tinha, está tudo limpo porque queremos que a IA faça o trabalho E vamos tentar. A primeira coisa que vou fazer é acessar meus ativos e adicionar alguns botões. Os botões são muito inteligentes. Vai ficar mais inteligente. Esse botão , obviamente, a palavra botão não é boa. Vou adicionar a palavra. O que está acontecendo? Vou usar esse botão novamente e talvez eu coloque outro aqui. Me dê um botão. Tenho que entrar no modo de design. Você pode fazer um pouco de edição no protótipo Eu vou lá, saio, corto, e você pode ir aqui. Co. Esse cara não vai ser o que está acontecendo. Vamos dizer adeus agora. Tchau, compra. De qualquer forma. Veremos que funciona para algumas coisas e não para outras. Tudo bem Tudo o que fazemos é selecionar tudo. Na verdade, você nem precisa estar no modo protótipo. Você simplesmente entra aqui e diz, digite essas interações publicitárias. É IA, então será um recurso pago. Clique nele, sente-se e veja o que ele faz. O que está fazendo coisas. Macarrão em todos os lugares. Vamos ver o que isso fez. Nós aceitamos isso? Eu continuo dando uma olhada. Então, isso é bom. Olha. O que está acontecendo. Estou no modo protótipo. Você pode ver o que está acontecendo foi para a página O que está acontecendo . Eu não fiz nada. Acho que o que ele está fazendo é olhar o texto aqui e olhar para o título ou para o quadro. Não sei, é mágico. Vamos dar uma olhada. O botão BioNW entrou aqui? By foi até o carrinho. Essa foi legal porque eu não escrevi o carrinho de compras, mas ele sabia que o carrinho de compras está conectado ao botão Bynw Agora, um que eu realmente gosto é ver esse coração aqui, vai para a página de favoritos e está em todos eles. Olha, o coração, se eu clicar, vamos prototipá-lo, na verdade, você verá que, diminuindo , o coração vai para os favoritos ingressos vai para a página Até agora, coração vai para lá, é bom Não sabe para onde isso vai por um bom motivo. A busca. Oh, isso funciona. Está bem? Parece uma página de busca. Eu não sei Gêneros, acho que estou muito surpreso, que você possa começar dessa maneira Sim, digamos, adicione algumas interações, IA e, de alguma forma, conecte a maior parte delas. Quanto tempo isso está economizando para você? Eu não sei É. Depende do tamanho do seu projeto. Estou impressionado com isso, então pensei em compartilhar. Não funciona tão bem quando você tem um arquivo antigo e bagunçado, algo assim, porque você pode fazer isso Mas, uau, provavelmente vai ficar louco só porque deixamos isso bem bagunçado Principalmente porque é tutorial. Temos muitos iPhone 16 e variáveis um, dois e três. Mas de qualquer forma, estou impressionado. Você ficaria impressionado. É isso mesmo. Obrigado, robôs. Todos sejam gentis com os robôs, por precaução. Tudo bem Próximo vídeo. 48. Crie e remova vários fios de macarrão de uma vez no Figma: Olá. Você tem problemas com macarrão? Você tem dois macarrões de joelho Um macarrão em todo lugar, ou você precisa atualizar uma coisa e precisa fazer tudo de uma vez Você precisa adicionar esse botão em massa ao nosso assento ejetor Deixe-me mostrar como adicionar e remover em massa. Vamos chamá-los de fios. Macarrão parece engraçado . Tudo bem, vamos Tudo bem, então acabei de adicionar um botão a todas as páginas de forma bem simples O que você pode fazer, a maneira mais fácil é mudar de posição, clicar em todos eles e depois ir para o modo de prototipagem, que é a opção nove, você sabe disso, eu sei que você sabe disso Pegue um deles e veja o que acontece. Todos eles vêm para o passeio. Essa é uma boa maneira de fazer tudo em massa. Você pode fazer todas as alterações, e isso funcionará de uma só vez. Você também pode fazer isso quando eu vou me livrar disso, remover tudo isso. Se for, eu o transformo em um componente e, em seguida, uso instâncias disso em todas as páginas. Você vai lá, coloque-os no topo. Vou copiá-los e colá-los porque são todos exemplos desta página principal O que você pode fazer é dizer, vá até a página Eject e descubra que todos esses amiguinhos também funcionam Isso. Qualquer problema que aconteça com esse método é se isso desfizer isso Desfaça até que acabe. Desaparecido. Se este quadro aqui estiver correto, então em uma página de componentes Essa coisa aqui, você não pode dizer, certo, eu quero que você vá para uma interação clicando em Eu quero que você vá para Navigate two. No momento, você não pode, pelo menos, ir para outra página. Você só pode acessar os quadros que estão na página atual, então isso não funcionará. Eu tenho que selecionar todos eles e movê-los para baixo. Às vezes, é difícil fazer que este acabe dentro dessa moldura. Então, se eu quiser selecionar todos eles, às vezes clicar com a tecla Shift neles pode ser complicado O que você pode fazer é selecionar uma delas, ir até suas ações rápidas ou Comando ou Controle e selecionar e descobrir qual delas pode ser a certa. Selecionar com as mesmas propriedades funciona muito bem para este. Estou no protótipo Eu vou dizer que qualquer um desses caras, vá até lá. Excelente. O que faltará agora é remover todas as interações. Digamos que você o tenha adquirido de outra pessoa ou tenha criado sua própria bagunça, é um arquivo da comunidade Você não selecionou nada e , em seguida, verifique se está no protótipo Clique com o botão direito e diga remover todas as interações. Você pode fazer isso por quadro. Você pode clicar na moldura, clicar com o botão direito nela e dizer remover tudo. Se você conseguir encontrá-lo, aguarde o processamento. Lá está na parte inferior, remova todas as ações apenas para aquela página. Mas vou fazer isso em toda a página para arrumá-la. Porque o que eu quero mostrar também é selecionar todas as propriedades que funcionam para esta. Fui fazer a mesma coisa para isso e fui, Command or Control K, vamos selecionar todas as mesmas propriedades, perfeito. Ele tem. Decidi que decidi que tudo isso eram as mesmas propriedades. Tem muita coisa. Então você pode entrar e tentar outra coisa. Comande, selecione e aí está o cônjuge, selecione corretamente. Por que nós vamos? Dê uma olhada aqui embaixo. Há as mesmas camadas correspondentes. Tudo bem, funcionou. todas as camadas correspondentes selecionadas. Agora podemos fazer isso. É uma boa maneira de mergulhar nessas coisas que são bastante complicadas e atualizá-las todas de uma vez. Olhe para nós. Somos avançados e o transformamos em um assento ejetor. Eu usei a IA e disse, digite um designer gráfico. Ah. Ele é definitivamente um contador com uma placa de design gráfico. Mas é muito legal. Tudo bem, é isso. Isso é edição em massa e remoção em massa do macarrão. Tchau. 49. Como criar uma barra de pesquisa com posição de rolagem fixa no Figma: Oi, todo mundo. Neste vídeo, veremos como tornar as coisas pegajosas. Vamos rolar para cima e ver a barra de pesquisa ficar presa lá. Tudo vai rolar atrás dele. fixaremos os elementos superior e inferior do UA, mas na verdade viemos aqui por causa da aderência, rolamos um pouco para cima e depois ficamos presos na Tudo bem, vamos começar. Tudo bem A primeira coisa que você precisa é que eu acabei de criar uma página de pesquisa básica real, acabei de criar um círculo com o ícone nela. Então, não há nada de sofisticado nisso. Eu criei uma lista. Nessa lista, o importante é que ela precisa sair da página para não rolar. Não há nada para rolar dois. Então, primeiro de tudo, vamos dar uma prévia. Vamos clicar nisso, clicar no quadro principal, deslocar a barra de espaço e eu estou mexendo meu dedo mindinho na roda de rolagem antiga, sem rolagem no momento. Precisamos ativar isso. Selecionei o pai no meu próprio protótipo, você pode ver aqui O que você faz com o estouro? Eu gostaria que ele rolasse verticalmente, por favor. Agora eu posso dar uma prévia e rolar. Não é exatamente o que queremos que aquele cara seja pegajoso. O que podemos fazer é antes disso porque eu quero que isso fique no topo também. Já fizemos isso antes. Eu quero dizer que não vá com os pais. Eu não quero que você fique aqui, por favor. Vou me certificar de que está no topo da minha pilha de camadas, e vou dizer pré-visualizar novamente, esta, agora role para cima e você pode ver que a coisa permanece no topo Mas eu quero que a busca fique atolada aqui no topo, não desapareça porque eu quero que ela esteja sempre lá Oh, o que vamos fazer é clicar em você e dizer: Ei, eu gostaria que você não percorresse o botão principal, quero que você não seja corrigido como fazemos com a navegação superior, estamos usando eu gostaria que você não percorresse o botão principal, quero que você não seja corrigido como fazemos com a o Sticky Ele para na borda superior e vai funcionar. Vamos lá, você visualiza, rola, rola, rola. O que está acontecendo é que está grudando, mas está escondido por trás disso, sobe e fica preso na parte superior Ele está lá logo abaixo disso. Então, precisamos fazer um pouco de preenchimento. Com isso, isso passa a ser uma saída automática, então eu vou projetar. Pode ir até o meu estofamento e aumentá-lo. O problema é que ele fez isso. Passei algum tempo fazendo com que tudo parecesse bom. A sua pode funcionar, mas eu fiz algumas coisas com minhas camadas de pedidos para deixar tudo bem. O que precisamos fazer é colocá-lo em uma moldura, criar um layout automático, colocar uma embalagem principal por cima e colocar pintura para que não mexamos com toda essa bondade que fizemos Vamos clicar com o botão direito do mouse e selecionar o quadro. Vou convertê-lo em um Aoout. E tudo o que fiz foi basicamente pegar minha barra de pesquisa, colocá-la em uma moldura, dar a ela o ótimo nome de 22 e depois convertê-la em Aolout Eu faço isso apenas porque quero adicionar um pouco de preenchimento a ele. Vou colocar um estofamento na parte superior. Está bem? Com tanto. Eu não tenho ideia e mudo isso de volta. Espero que você veja o que isso vai fazer. Essa vantagem superior. O que vai se deparar com o topo Precisamos ser um pouco mais. Ok. Tudo bem, vamos dar uma prévia. Clique neste. Ok, vou rolar para cima. Opa. Trabalhando. Oh, eu sei o porquê. Pensamos: “Bem, foi feito para ficar no topo”. Dan disse que estava entre os quatro primeiros. Por que não é agora? Fizemos isso com isso. Nós invadimos a barra de pesquisa. Fomos até o protótipo e dissemos: “ Tudo bem, pegajoso na Mas então fizemos essa outra moldura em torno dela, chamada de moldura 22, e ela não é aplicada. Então, seja qual for o fundo dessa pilha, não podemos adicionar aderência a isso, aquilo ou aquilo Tem que ser o que estiver nesse nível básico. O que eu quero dizer? Em termos de hierarquia Eu quero dizer quadro 22. Scroll Parent? Não, eu quero que você seja pegajoso no topo. Agora vamos tentar. É barra de espaço. Grosse. Suba, role para cima. E não funciona de verdade, não é? Vamos fazer isso, Dan, onde eu diminuo um pouco. E agora vamos fazer isso funcionar. Vamos abrir a barra de espaço e clicar nele. Veja isso. Ele vai rolar até o topo e depois ficar preso. Co. Ele vai até o topo e depois permanece persistente. Qualquer problema com isso é a ordem das camadas. Então, vou dizer que você está no topo usando meu último colchete ou o segundo Vamos dar outra prévia de você, subir e ele vai rolar, rolar, rolar, pular, ficar preso e ficar para trás. Legal. Ok, então você pode obtê-lo, para ele grude onde quer que o estofamento esteja Então, às vezes você só precisa embrulhá-lo em uma moldura, prepará-lo e lubrificá-lo, adicionar um pouco de acolchoamento a tudo dentro dele, colocar um pouco de acolchoamento nele Uma coisa que precisamos fazer é que você provavelmente também precisa ser consertado. Você vê fixo aqui em suas camadas. Você pode ver que o fixo está sendo empurrado para o topo. Então, há coisas que rolam e coisas que são corrigidas. É uma maneira fácil de ver o que está fazendo o quê, e as coisas corrigidas estão no topo. Vamos tentar novamente. Por último, rolar, rolar , rolar, você pode fazer isso com vários títulos. Vamos fazer isso. É um bom tipo de lembrete. Ok, digamos que temos uma vitória aqui, queremos chegar ao topo e enfrentá-la O que precisamos fazer é garantir que esteja em sua própria caixa. Precisamos adicionar o preenchimento a ele. Então, vou adicionar um layout automático a essa coisa. Eu vou dizer que você tem um pouco de acolchoamento na parte superior. O que acha disso? Na verdade, não, eu preciso que seja muito grande, não é? Ok, vamos pegá-lo porque ele vai parar no topo da página. É sobre você ver o que estou fazendo aqui? Estou meio que te agarrando e dizendo: Tudo bem, você vai parar por aí Então, eu preciso ter um acolchoamento menor, mas talvez isso. Vamos dar uma chance. Só precisamos dizer protótipo, rolar o protótipo. Não, uma deve ficar pegajosa na borda superior. Você está deixando tudo mais confuso, Dan. Não. Nós vemos como vamos. Role e a barra de pesquisa para, e então, ele para muito baixo. Menos acolchoamento. Dan ao menos sabe o que está fazendo? Basta dar uma olhada, pré-visualizar, rolar, rolar. Isso é melhor. Vá. Você pode fazer com que outro título fique abaixo deste e simplesmente faça isso na barra de pesquisa Porque talvez apenas tentar empilhá-los possa ser um pouco confuso O que você precisa lembrar é que, se quiser preenchimento, ele deve ser uma saída automática. E, muitas vezes, é mais fácil simplesmente colocar a sua própria, colocar uma moldura em volta dela e transformá-la em uma saída automática. A outra coisa que você precisa fazer é garantir que as coisas saiam da página. Vejo que meus alunos também meio que não há nada para percorrer, então realmente não importa o que você ativa. Ele não rola, então você precisa de lixo saindo do fundo. A outra coisa é clicar na moldura principal abaixo do protótipo O comportamento da rolagem precisa ser vertical, e o que você quer que fique no topo precisa estar na parte inferior da hierarquia aqui, não em três ou quatro camadas de profundidade nessa grande estrutura de camadas Selecionado, você vai para sticky. É isso mesmo. Não tenho certeza se tornei essa coisa mais difícil de aprender ou mais fácil de aprender, mas aí está. Foi o que aconteceu. Tudo bem Te vejo no próximo vídeo. 50. Como fazer uma rolagem horizontal no Figma: Olá, aí. Este vídeo, nós vamos fazer isso. Vamos fazer uma rolagem horizontal. Vamos fazer algumas avaliações e fazer elas rolem dessa maneira, como um pequeno carrossel Muito legal. Chamada de rolagem horizontal Eu vou te mostrar como fazer isso dentro do Figma. Para começar, acabei de criar um cartão, cartão de avaliação genérico. O que eu quero fazer é começar, começar. Você pode fazer isso com qualquer coisa, apenas uma moldura simples e antiga. Eu só quero fazer isso de forma muito simples. Eu vou fazer isso porque parece legal. O que vamos fazer é, antes de tudo, que precisamos que isso seja, precisamos que alguns deles saiam da página. Agora, você pode se lembrar começar a arrastar e segurar a barra de espaço, começar a cruzá-las ou com esta selecionada aqui, Do outro lado. Ele saiu. Vamos fingir que vai sair porque você fará isso por acidente Eu vou para o DDD. Eu tenho alguns deles. O que eu quero dizer é que, antes de começar eles não estão neste quadro para realmente rolar. Preciso ter certeza de que você e você. Esses caras não estão na moldura. Esse primeiro cara é o quadro 23. Bom trabalho, Dan. Na verdade, não, é chamado de “B review Então, vou arrastá-lo para baixo para ficar com seus amigos. Você vai lá. Agora eles estão todos na página. Você pode clicar no quadro principal e acessar design e decidir se deseja recortar o conteúdo ou não. Isso não importa. Parece diferente. Vamos tentar. Eu sempre pré-visualizo à medida que avança. Mude a barra de espaço e você não verá nenhuma rolagem. Tudo o que precisamos fazer é dizer, página de avaliações. Vamos mudar para o protótipo. Opção nove, você vai se cansar disso porque está lá, não é? Vamos para Overflow. Horizontal. Não é o que eu quero. Só estou pensando agora. Não quero que tudo isso flua. Eu só quero isso, e esses são todos esses caras. Quero que estejam em seu próprio quadro, todas essas avaliações de compra estejam em seu próprio quadro e faremos com que elas sejam roladas, não a mãe. Essa é a grande coisa aqui. Não queremos que a tela inteira flua. Eu vou. É bom ir. Rápido na horizontal, eu vou dizer “pré-visualizar”, e a coisa toda virá A coisa toda funciona. O problema será porque eles serão corrigidos se eu adicionar um título aqui. Se eu adicionar algum texto aqui embaixo. Vamos dar uma olhada. Vamos clicar em, visualizar melhor isso Tem um V lá. Está indo terrivelmente errado. U, V, vá embora. Clique em você, visualize. Se eu rolar, a coisa toda rola. Não quero que isso role e não quero que as avaliações rolem. Não quero rolar o quadro inteiro. Isso é o que eu estava tentando explicar. Vá lá, Dan. O que eu quero é isso. Todos esses caras precisam estar em sua própria estrutura. Pode ser uma saída automática, pode ser uma moldura, não importa. Vou usar o Shift A para o Autout. Basta ajustar o espaçamento e garantir que eles estejam dentro do quadro de avaliações Agora eu faço isso com isso. Em vez do quadro de chamada 24, vamos chamar isso de rolagem de avaliação. Quando selecionado, quero ser capaz de não saber rolar, quero ir na vertical ou na horizontal. Eu nunca consigo me lembrar. Eu acho que é horizontal, mas eu tenho que pensar sobre isso. Vá lá, Brain, vamos tentar. Vamos pré-visualizá-lo. Agora, você pode ver, o que está acontecendo aqui? Está funcionando. Tudo bem, vamos descobrir o que deu errado. Isso deve funcionar. Deve estar rolando horizontalmente Basta clicar e arrastar, não funciona. Tudo bem. Deixe-me mostrar como eu explico as coisas. Primeiro de tudo, eu vi algo por baixo. Sim, o que você está fazendo aí? Você está aí. Sim, vou me livrar de você. Não preciso de você. Vamos dar uma prévia novamente. Navegando. OK. Para que haja rolagem horizontal Deveria ser Oh. Eu sei o que é. É a chave para todo esse curso. Novamente, fingir que eu pretendia fazer isso é que essa moldura aqui precisa ser recortada Temos esse quadro principal no qual aplicamos . O pergaminho está até aqui. O que precisamos fazer é ter um lugar para ele rolar. Precisamos arrastá-lo para cima. A moldura, essa moldura principal com todos esses caras dentro, essa moldura pode realmente ser menor. Pode ser menor. Normalmente, nós apenas os mantemos do mesmo tamanho. Mas podemos dizer que, na verdade, você é uma pequena janela para o mundo e, em design, podemos acessar o conteúdo do clipe para que não possamos vê-lo. Isso explica isso um pouco melhor. A moldura principal é um pouco menor, então há coisas para rolar aqui. Agora vamos tentar. Por favor, trabalhe. Está funcionando. Nós podemos fazer esse pergaminho. Obviamente, testar no celular com o dedo é melhor. Você vai. Há rolagens horizontais Uma coisa que vou precisar fazer é que o pai precise ser um pouco mais largo porque as sombras projetadas estão cortadas, e vou apenas dizer: vamos para o alinhamento, canto superior esquerdo, vá agora, deve ser Eu posso ver minhas sombras lá, você pode ver, Sim, é perfeito. Tudo bem. Portanto, a principal conclusão garantir que tudo o que você deseja rolar horizontalmente saia da tela e que seja aparente em quadro ou em qualquer lugar, que o layout ou quadro automático precise ser configurado para rolagem horizontal e que o quadro principal tenha o mesmo que o layout ou quadro automático precise ser configurado para rolagem horizontal e que o quadro precise ser configurado para rolagem horizontal e tamanho do seu dispositivo é garantir que tudo o que você deseja rolar horizontalmente saia da tela e que seja aparente em quadro ou em qualquer lugar, que o layout ou quadro automático precise ser configurado para rolagem horizontal e que o quadro principal tenha o mesmo tamanho do seu dispositivo móvel. E isso não importa, mas você pode dizer, em design, recortar o conteúdo para ver todos eles. Isso deve funcionar. A próxima coisa que eu quero fazer é pegar você e fazer coisas de IA. Reescreva isso. Nós terminamos agora. Estou apenas mostrando algumas coisas legais que eu gosto de fazer com algumas coisas de IA Vou fazer avaliações e clicar no que era Command Enter ou Control Enter. Olha isso. Apenas analisa e altera tudo isso, não faz as imagens no momento e você pode usar a IA para fazê-las. O problema com isso é que eles demoram um pouco para serem feitos. Costumo usar o Command ou o Control K para meus atalhos, vou usar o conteúdo R. oCentral é um plug-in ou widget muito legal Você pode ir lá e encontrá-lo. É muito útil para muitas coisas Digamos que eu só porque o que eu quero é que eu não precise que seja gerado por IA. Ele vai anunciar e clicar em Min. O mesmo com posso fazer múltiplos? Tenho certeza que posso. Posso dizer que todos vocês simplesmente não funcionaram. Eu posso clicar em você. Estou segurando a tecla de comando na tecla Control em um PC e Shift ao mesmo tempo, e você pode clicar nelas e ela simplesmente passa e insere imagens genéricas de espaço reservado agora Eles não são gerados por IA, são apenas predefinidos. Você vê que eles têm 1.700 deles. A mesma coisa se tivéssemos nomes completos. Se precisar de uma lista de nomes completos, você pode usar coisas de IA. Se você não tiver acesso a ele porque está na conta gratuita. O que você pode fazer é segurar o Commander Shift ou o Control Shift PC. Pegue tudo isso e você pode dizer, me dê alguns nomes completos. Em seguida, você pode clicar nele novamente. Me dê alguns nomes diferentes. Há um monte de coisas aqui que são assim. Você pode trabalhar até o fim e, sim, é útil. Vou me desfazer porque quero minhas costas, e isso bastará. Ainda funciona? Sempre há algo divertido depois de você mexer com isso Ainda funciona. Olha isso. Somos gênios. Tudo bem. É isso mesmo. Vou ativar o conteúdo do meu pequeno clipe, para que fique tudo arrumado e eu vou ver você no próximo vídeo Na verdade, uma última coisa é o Comando Y, controle y é que você pode acessar Outline View se precisar ver coisas. Você fica tipo, eu preciso ver todas essas coisas. Você fica tipo, O que é tudo isso? Na verdade, o que é tudo isso? É o pergaminho desta página. Essa página ainda rola? Aposto que não? Faz. De qualquer forma, ainda precisamos consertar a tampa, nos distraindo. Fizemos a rolagem horizontal e somos incríveis. Eu vou ver seu eu incrível no próximo vídeo. 51. Projeto 13 do curso — rolagem horizontal: Tudo bem. É o número 13 da sorte. Eu quero que você faça sua própria rolagem horizontal, faça um cartão de avaliação, seja simples, pode ser complexo, depende de você e eu só quero que você faça a revisão rolar horizontalmente em seu dispositivo Basicamente, exatamente isso, o que fizemos no último vídeo. Faça sua própria versão e eu adoraria ver um vídeo, caso contrário, faça uma captura de tela dela, parcialmente rolada. Eu sei que você pode fingir. Não é para isso que estamos aqui. Estamos aqui para melhorar e praticar esses exercícios. Aposto que se você os está fazendo, você se sente mais amargo. E é isso. Faça o upload para a seção de tarefas. Eu retirei o compartilhamento nas redes sociais. Se for chato, não compartilhe. Se você trabalhou um pouco nisso, você fica tipo, legal. Compartilhe, por favor. Eu adoro ver isso. Esta parte aqui é chamada de Paully Take a screenshot of Your preview parcialmente rolada Isso é o que quero dizer, mudou um pouco. Certo, mas eu adoraria ver um vídeo. Faça o upload para os projetos da turma. Este é fácil, mas também muito técnico. Você tem que fazer todas as coisas corretamente. Portanto, talvez seja necessário assistir novamente ao vídeo para ver onde você errou. Provavelmente, na maioria das vezes, vejo pessoas tendo problemas quando se esquecem fazer todo o resto da maneira certa, mas a estrutura em que tudo mas a estrutura em que isso está acontecendo precisa ficar um pouco menor. Tudo bem. Divirta-se. Veja se você pode fazer isso acontecer. Nos vemos no próximo vídeo. Eu tomei café. Você pode dizer? Tudo bem, próximo vídeo. 52. Rolagem automática para baixo na página ao ponto de ancoragem no Figma: Olá. Neste vídeo, criaremos botões que rolam para baixo na página em que estamos trabalhando , mesmo que estejam bem longe na página. Você pode ver isso aqui. Não são quadros separados. Basta rolar para baixo dentro desse quadro e, mais, mostraremos como criar um hiperlink. Acesse um site. É fácil e, ao mesmo tempo, um pouco peculiar. Deixe-me mostrar todas as peculiaridades. Para começar, tudo o que fiz foi criar uma página de evento com um pouco mais de detalhes, o nome do show. Eu tenho alguns botões aqui. Eles são apenas layouts automáticos com alguns textos neles. Na verdade, você pode fazer isso com qualquer coisa e eu tenho algumas coisas que queremos rolar, então é bem fácil. Vamos mudar para o que vamos fazer, mudar para o protótipo Opção nove, linha Alt em um PC. Essa é a última vez que vou dizer isso. Você provavelmente gosta de vídeos de parar com 50 e poucos anos. É o suficiente. O que vamos fazer é, sob protótipo, vamos namorar Para onde você vai? Você vai descer até aqui. É muito simples assim. Ele será automaticamente inteligente o suficiente para dizer, ao tocar, role dois. Se isso não acontecer, você pode forçá-lo a sair. Vai rolar até aquela data de ayerchord. Você pode ver isso lá no meu painel Layers. Agora, onde diz animação, Instant é o padrão que você obterá. Vamos dar uma prévia disso. Shift Space Bar, essa é a última vez que vou dizer que uma ferramenta data e ela salta para a data Vá. Um encontro. O que faremos agora é torná-lo um pouco mais agradável. Com o macarrão selecionado, vamos começar a animar e vou usar a facilidade de entrada e saída para se sentir bem Então, quão rápido ele vai? Eu gosto de acelerar. Vai levar mais tempo, então eu quero o número maior. Isso vai levar um segundo, 1,1 segundo. Novamente, de alguma forma, não consigo clicar online. Então, vamos usar o Shift, não vou mais dizer isso. Vamos namorar. Olha, ele rola muito bem para baixo Vamos fazer o resto deles e eu vou te mostrar qual é o próximo problema que você encontra O local vai até o local e sempre testará, continue testando. Nunca pense que você vai fazer 1.000 coisas e espero que tudo fique bem e você não tenha certeza onde errou. O local funciona. A única diferença é que, bem, vamos fazer isso com o preço. O preço precisa cair até o fim. Às vezes, pode ser um pouco difícil chegar até lá. Então, o que você pode fazer é clicar aqui. Vamos entrar em interação. Eu quero que esteja disponível. Que ação? Eu gostaria que ele rolasse dois. Onde você quer rolar dois? Tem muita coisa aqui. Eu quero reduzir o preço. O mesmo, mas eu quero que seja animado. A diferença aqui é que ele usa o padrão de 300 milissegundos e 0,3 segundos. Mesmo se eu usar esse, o que era esse? Esse durou cerca de 1 segundo. Se eu fizer isso, leva 1 segundo. Ainda tem muito a percorrer. Se eu fizer cerca de 1 segundo, nada está funcionando. Preciso manter pressionada minha tecla de opção agora para fazê-la rolar, Figma Normalmente, não há insetos e figma. É uma aplicação bastante sólida. Mas vamos dar uma prévia. Se eu clicar na data, ela rola para baixo sem pressa, mas se eu fizer o preço, terá que cobrir muito mais; na verdade, o preço não é tão Ok, vamos fingir. Vamos fazer esse super duper longo. Gancho. Fingindo isso. Vou voltar ao modo de design e reduzi-lo totalmente. Estou fazendo isso para adivinhar um exemplo melhor. Vou pré-visualizar você e vou dizer a data e ela tem que chegar lá em 1 segundo, então acelera. Você pode, se precisar rolar uma página muito para baixo, ajustar a quantidade necessária. Eu poderia dobrar isso porque tem que ir muito mais longe. Estranho. Eu posso digitar aqui, mas não posso digitar aqui. De qualquer forma, a única coisa é que agora que isso é muito longo, vamos dar uma prévia novamente. Se eu for namorar, isso traz a data para o topo. O seu pode ser bom porque você pode não ter uma página longa. Mas se você ler uma página longa, ela tem muito o que rolar. Então, essa data quer realmente estar no topo e, para mim, está escondida por trás de tudo. Só um pouco estranho Eu quero que ele chegue lá para que as datas nele e quando os locais clicados cheguem que as datas nele e quando os locais clicados até aqui para que você possa ver o local e, obviamente, o preço desça até lá. Então, vamos fazer isso. Vamos pegar uma tâmara e clicar no macarrão. Vou clicar duas vezes no macarrão, e é para isso que serve esse offset X está à esquerda e à direita, Y está acima e abaixo. Tenho que dizer isso a mim mesma e o quanto eu quero fazer é inserir, digamos, tono pixels Vamos dar uma prévia. Eu clico na data e não funciona, ainda mais da maneira errada. Já passaram 200 pixels de onde está a data. Você precisa se certificar de que, ao fazer isso, use números negativos se quiser preenchimento na parte superior Exatamente a mesma coisa. Vamos para menos 200. Vamos dar uma prévia e, digamos, a data. Ainda não funciona. Por que isso não está funcionando? Vamos ignorar U, negativo. Talvez não seja suficiente. X. É definitivamente Y, eu acho que sim. Vá lá, encontro. Aí está. Não é suficiente. Em algum lugar no meio do que eu fiz lá. Eu fiz 200, 400. Vamos tentar 300. Encontro. Oh, quase lá, 250. Vá lá, Dan. Há muito disso. Não faço isso o suficiente para saber exatamente o que deveria ser e ter uma ideia disso. Se você estiver fazendo um pouco mais, talvez fique melhor nisso. Oh, eu queria ser um pouco mais. 20? Depois, você pode passar dia todo tentando fazer com que a coisa deslize para onde você também precisa. A única coisa que não vou sintonizar em seu próprio vídeo é que você pode analisar os diferentes deslocamentos para que funcionem Uma coisa que vou colocar no final aqui como bônus é digamos que queremos um link para o mapa. Eu vou selecionar isso. Uma das interações que não abordamos em um vídeo separado que aparecerá aqui é que vimos ir ao Scroll há um segundo Há um que diz abrir link e, em seguida, você pode digitar o URL. Deixe-me pegar algo do Google Maps. Acabei de pegar um link do Google Maps. Obviamente, pode ser qualquer URL em qualquer site. Se você estiver na Irlanda e chegar a Limerick, antes de tudo, me mande uma mensagem e também não deixe de visitar o Daln's É o mais legal. Ok, e vamos até o meu ritmo de tinta. Ele vai abrir em outra aba. Vamos dar uma prévia disso. Vamos até Venue. Vamos clicar no mapa. E olha, ele se abre. Bom. A única coisa que você precisa fazer sozinho é dar a ele uma cor horrível Portanto, o mapa aqui provavelmente precisa ser o azul que foi inventado há muitas luas, sublinhado, que é comando ou controle Tenho orgulho de precisar colocá-lo em negrito Por que não? Sob controle B. Tudo bem. É assim que se desliza a página para baixo, ok? É chamada de âncora, e falta um pouco quando se trata de tempo e, especialmente, de deslocamento Mas você vai chegar lá. Ah, e uma última coisa é que, como descobrimos que 220 ou menos 220 funcionam para isso, você não muda isso para tudo isso. O tempo, sim, mas o deslocamento real permanece o mesmo, se você quiser que ele apareça no mesmo lugar Então, vamos ver o preço em que temos que descer bastante. Ainda é menos 220. O que quer que você tenha decidido, vou fazer com que seja mais rápido, e vamos fazer com que as digitações funcionem novamente Ok, então um minuto e meio, talvez um minuto e meio, um segundo, 1,3 segundos. Vamos dar uma prévia e assistir isso. Ele ainda vai usar esse deslocamento que funcionará. A razão pela qual não vai até o topo é porque não há espaço suficiente na parte inferior. Então, vamos assim. Vamos pegar você. Saia pela tangente. Ok, volte ao design. Vamos clicar na moldura. Onde ele está lá? Aqui estão as avaliações. Clique na moldura, esfregue-o, e eu vou fazer isso mais longo para que esse cara tenha um lugar para ir até onde ir, entende o que quero dizer? Caso contrário, não há lugar para continuar subindo . O que ele quer dizer? Isso? Agora ele deve chegar ao local onde queríamos, porque há um pouco de espaço aqui embaixo para ele ir. Não adicione coisas assim, Dan, clique nos botões e role um pouco para baixo e pronto. É isso mesmo. Isso é rolar âncoras dentro do figma. 53. Como criar componentes interativos no Figma: Bem-vindo. Bem-vindo, bem-vindo. O que vamos fazer? É super empolgante. Você está pronto? Olha, você vê. Está pairando Muito empolgante. Não se preocupe Fica ainda mais emocionante. Olha, eu insiro o botão. Clique em ligado e desligado. Nem mesmo uma sombra projetada nessa. De qualquer forma, vamos fazer esses, eles são chamados de componentes interativos. Nós fazemos isso sem problemas. Dan fica muito perdido fazendo isso. Mas vou incluir no curso porque você pode se perder da mesma forma. Realmente muito simples, apesar de parecer um vídeo longo, é só porque eu fico um pouco perdido. Todos meus amigos, vamos passar o mouse super empolgante e marcar uma marca de verificação Tudo bem, então eu estou começando com um simples botão antigo. É um barulho automático. Tem algum texto nele. É isso mesmo. O que eu quero te lembrar é que, na verdade, fizemos isso. Vou te mostrar isso. Isso é exatamente a mesma coisa. Nós o usamos aqui para ter um conjunto de componentes que continha uma, duas, três coisas diferentes e animamos entre todas elas. Acabamos com isso. O que fizemos foi dizer, você anima entre esses dois, protótipo Dissemos que usamos apenas um atraso de tempo. Essa é a única diferença, mas parece algo completamente estranho. Todos, vamos entrar, entrar, entrar, entrar. Aprendemos isso mais cedo. Esqueci de usá-lo durante o curso. Basta percorrer todas as novas páginas que abrimos. Aí está. Eu tenho essa página aqui. O motivo pelo qual estou em um MacBook Pro ou uma versão para desktop é que , obviamente, o mouse não funciona em um telefone Você não pode passar o mouse sobre um telefone com o dedo. Mas é um exemplo muito bom dessa técnica em particular. Então, precisamos fazer de você um componente. Fam, você é um componente. É adicionar uma variante disso. Em design, variante Agora, o que eu quero é que algo seja diferente na segunda variante. Provavelmente, tudo o que eu quero fazer é que a cor de preenchimento será uma das minhas escuras. Vamos dar uma sombra projetada. Legal. Assim como o viva techno, tudo o que precisamos fazer é criar um protótipo, entrar no meu conjunto de componentes Essa variante vai para esta. Mas, em vez de fazer um atraso após o tempo, diremos ao toque, o que é ótimo, ou ao clicar, e diremos que mude para a variante dois instantaneamente sem tocar no toque. Vamos continuar enquanto estamos pairando. Vamos citar um exemplo desse cara. Ele deveria estar na minha página de componentes, mas não está, vamos dar uma prévia. Ainda está sendo exibido no meu telefone. Você pode trocá-la. Estou usando o atalho para pré-visualizar, ele se abre assim Você pode ir até este, presente. Ainda está no telefone. Não selecione nada e, digamos, nem um iPhone 16. Você poderia dizer que não há dispositivo. Vou escolher o tamanho de página em que você está trabalhando ou você poderia ter trocado para o Macbook Pro 16 Ei, vamos pré-visualizar e assistir isso. Tudo bem, temos um botão de passar o mouse . Somos mais duros. É um pouco, chamamos isso de instantâneo. O que vamos fazer é dizer, na verdade, você, eu quero fazer enquanto estou pairando, não instantaneamente Vamos para animar, dissolver. Não importará nesses dois, acabará parecendo o mesmo. Pré-visualize, passe o mouse sobre ele. Oh, é só um pouco lento. O drop shot chega bem rápido, hein? Vamos tentar o outro. Então, digamos que, quando eu disser que não importa, vamos experimentar a animação inteligente. Vamos ver se isso funciona melhor. Você definitivamente está melhor. OK. Ignore o que eu disse antes. As animações inteligentes são muito mais bonitas. É um pouco lento. Está bem? Então você pode simplesmente brincar com isso. Meio segundo, veja isso, saia. Isso é melhor. Bom H. Vamos fazer outro exemplo. Vou criar rapidamente uma caixa de seleção. Você está aí. Tudo bem. Depois de tudo isso, eu me causei alguns problemas e fiquei tipo, vou te mostrar também. Eu usei o plugin para encontrar um carrapato porque, de alguma forma, os carrapatos são muito difíceis de desenhar sozinho Eles sempre se sentem errados. Estranhamente, se eu sou um usuário do Android, então meus carrapatos parecem carrapatos, isso não Essa é a marca do IOS. Esse é o truque do Android. Eles usam algo chamado material, mas nomeiam seu sistema de design. Eu sempre gosto de carrapatos como se parecessem muito estagnados ; de qualquer forma, o carrapato não é longo o suficiente. É por isso que estou usando o plug-in. Gosto do Cons Eight porque tem muitas coisas da Apple. Tem IOS aqui. Tem o material do Google, tem o Windows, todo o tipo de coisas genéricas. O que eu fiz, porém, foi fazer isso, achei o carrapato e disse: “Tudo bem, esse é o que eu quero”, peguei-o e o arrastei Eu o fechei e comecei a trabalhar. O que eu fiz foi clicar no carrapato e reduzi-lo e começar a trabalhar, movê-lo e mostrei isso para vocês no início do curso Vou fingir que toquei no assunto de novo agora para lembrá-lo, mas na verdade acabei de fazer isso O que você verá é que quando isso saiu do ícone oito do plug-in, havia uma moldura com um vetor dentro. Acabei de vasculhar o vetor e lá está tudo pronto para sair. Veja isso. Se eu pegar o vetor dentro daqui e tentar movê-lo para cá. Olha, isso sai de lá. Agora eles estão separados, mas eu ainda tenho essa grande moldura. Exclua isso e exclua isso porque foi isso que eu fiz. Veja isso. Se eu passar o mouse aqui em algum lugar, onde está o meu. Aí está lá. Tem uma moldura grande que eu não achava que estava lá e eu pensei Que diabos é isso Podemos vê-lo em Comando ou Controle Y para obter esboços. Tem essa coisa. O que diabos você está fazendo aqui? Nós sabemos. Eu reduzi a marca de seleção dentro dela. Então eu coloquei essa pequena moldura ao redor da marca. O que eu preciso fazer é pegar tudo isso. Eu o chamei de quadro 30. Vamos chamar isso de marca de verificação, e eu quero que não esteja pronto Então você sai, pronto e se livra do feito. Livre-se do pronto. Tudo bem. Então essa é a maneira mais longa de dizer: O que você faz, Dan? Realmente, o que eu fiz foi: Preciso desse segundo quadro? Eu realmente não quero? Você pode sair e ficar na marca de seleção e isso pode desaparecer. Marque a caixa com um vetor dentro dela. Eu deveria ter começado dessa forma e apenas reduzido a caixa inteira. Mas de qualquer forma, podemos fazer exatamente a mesma coisa. O que diabos estávamos fazendo? Eu não sei Eu me perdi. Estamos fazendo isso. Isso é exatamente a mesma coisa. Então, o que eu posso fazer é, como antes, eu posso dizer que o componente UR não pode transformá-lo em um componente, esse é um bom componente. Por que não? Eu posso ver no meu último painel lá. Essa marca de seleção está de alguma forma fora da moldura do meu MacBook Pro Eu posso dizer isso. Eu posso ver o texto lá. Então eu preciso fazer é ter certeza de que você está lá. Agora eu posso usar os dois, mapear o componente e, em seguida, usar a variante Tudo o que vou fazer é dizer nesta variante aqui, vou desligar o globo ocular. Ok, e vamos para modo de protótipo e dizer quando essa coisa é Quando clicar, mudaremos a variante dois e usaremos todo esse material animado inteligente Provavelmente não precisamos da animação inteligente. Vamos começar imediatamente, porque é uma marca de seleção. Vamos pegar um exemplo disso. Você vem aqui e vamos pré-visualizar. É pequeno. Vamos até aqui e insira. Eu posso clicar nele. Olha, não volta. No entanto, ele foi ativado, então é necessário atualizar. Voltou para uma página há muitas luas. Está tudo bem Vamos abordar o principal problema: quando o carrapato acende, ele não volta. Eu só preciso entrar aqui e dizer, quando você clicou, volte para aquele lado Você pode fazer todas as mesmas coisas. Pré-visualize isso. Agora, porque eu não tinha nada selecionado. Está voltando para outro lugar. Acho que esse aqui é o Flow One. O que eu preciso fazer é se isso continuar acontecendo, vá aqui, vá para a prototipagem Vamos começar um novo fluxo. Vou chamar isso de desktop e vou pré-visualizar a partir daqui. Agora vou para o campo de entrada que liga e desliga. Quanto tempo dura esse vídeo? Olha, nós temos Havas, Dill, eu mencionei que também fazemos Hvas , e Tudo bem. Mas você entende agora. Fizemos isso desde o início para uma animação, mas agora o usamos para ter componentes interativos fazendo coisas interativas interessantes. Tudo bem, é isso. Aprendemos algumas coisas. Nós nos perdemos. Por que se perdeu. Mas todos nós aprendemos alguma coisa. Você estará perdido da mesma forma em algum momento, mas se lembrará de quando Dan se perdeu. Tudo bem, é isso. Para o próximo vídeo. 54. Projeto do curso 14 - Componente interativo: Tudo bem Hora do projeto da aula. Vamos criar alguns componentes interativos. Eu quero que você faça isso. É uma página de login com uma pequena marca de seleção para lembrar de mim e o botão de login tem o estado Ha. Agora, eu sei que você não pode fazer Ha em uma espuma, mas você só vai ter que me satisfazer São apenas retângulos com sombras, nada de especial acontecendo Dê uma olhada on-line para ver um exemplo de interface de usuário de login. Tem uma ideia de como deveria ser? Realmente, porém, estamos aqui para isso. Quero que os componentes interativos para ambos funcionem. Quando terminar, faça uma captura de tela de ambos. Coloque seu componente ao lado dele para que, ao fazer o upload, possamos ver as duas coisas que você criou mais os conjuntos de componentes que têm esses componentes interativos em andamento Nas redes sociais, gosto de ver o que você faz. Se você está curtindo este curso, talvez agora seja o momento de dizer a outras pessoas o quão bons os cursos e que elas poderiam vir e fazer isso É assim que eu continuo fazendo essa coisa. Se você gosta do curso e consegue pensar uma maneira de promovê-lo, faça-o. Isso tornaria meu dia. Mas sim, divirta-se fazendo o projeto da turma. Vamos colocar esses componentes interativos em funcionamento. Marcas de verificação super empolgantes. Uau. 55. Como usar seções no Figma para organizar seu conteúdo: Oi, todo mundo. Este vídeo é sobre seções. Levante a mão, quem nunca usou ou sequer sabia que ela existia. Já está lá há algum tempo. Vamos dar uma olhada nas seções, para que elas são usadas. Eles são muito úteis do ponto de vista organizacional , o que é um código chato Vamos dar uma olhada neles porque você vai se deparar com eles. Para começar, encontrei esse arquivo da comunidade. Era da Hansa Ohile. Muito obrigado Usando-o como exemplo, há uma versão para iPad para desktop e telefone deste aplicativo comercial. É aqui que as seções podem ser realmente úteis pois são relativamente bem organizadas Mas o que podemos fazer é apertar o botão, você nunca apertou. Está embaixo da nossa moldura para segurá-la e é essa aqui, turnos É chamado de seção. É colocar uma caixa ao redor das coisas. Você fica tipo, eu fiz caixas. É muito parecido com uma moldura. Ele não tem parte da estrutura, mas tem algumas partes organizacionais interessantes. Por exemplo, ele tem um novo ícone. É como uma pequena pasta ou uma seção. Tudo dentro dela está por baixo, o que é ótimo. Vamos dar um nome a ele, Command or Control R, e digamos que este será meu telefone ou apenas ligue para um celular. Você pode fazer algumas coisas, como se eu mudasse a cor de fundo e ela apenas organizasse seus materiais Você pode fazer isso com uma moldura. A maioria das pessoas simplesmente faz isso com uma moldura. Você pode converter quadros em seções, seção de quadros. O nome muda na parte superior, em vez de ser apenas uma moldura antiga, está em uma pílula ou em uma caixa Você pode clicar duas vezes nas bordas e ele se contorna da borda de seus designs. Ok, aperte-os. Você pode vincular diretamente a uma seção. Em vez de tentar dizer, certo, eu quero que você vá até este quadro. Você pode ver, vamos para esta seção na qual estou trabalhando. Pode ser uma versão, pode ser móvel. Quando você acessa Compartilhar, você pode dizer: Eu gostaria que você pudesse ver aqui que diz que é compartilhar na seção móvel. Se você não tiver nada selecionado, nada selecionado, vá para Compartilhar, é diferente. Só vou compartilhar o arquivo inteiro. Você pode fazer com que as pessoas cheguem exatamente aonde você quer que elas cheguem. Você pode obter realmente noventa com suas seções, turnos e pode ter seções dentro das seções para dividir ainda mais as coisas O que você não pode fazer, porém, é que eles precisam ser os chefes. Se eu tiver uma moldura e depois tentar colocar uma seção dentro dela, veja o que acontece com Myers, quadro quatro, se eu colocar uma seção nela, você notará que minha Seção cinco, ele está acima da moldura Ele simplesmente não vai entrar. As seções são o chefe e as molduras podem entrar. Você pode viver sem seções, mas você vai se deparar com isso nos arquivos de outras pessoas vai se perguntar: que fantasia elas são? Você sabe, você tem seções. A outra coisa é que você pode esbarrar no arquivo de outra pessoa e ficar tipo, Oh, isso é um quadro Você fica tipo, por que eu não posso fazer coisas na moldura? Por que eu não posso fazer isso? Vamos transformar em Auto lout Shift e Shift e. Então aí está. Essas são seções. Se você é um designer de UX super organizado, vai adorar as seções. Se você é como eu, acaba se afastando Eu faço seções quando entrego arquivos para o desenvolvedor ou outras pessoas apenas para fingir que estou realmente organizado, mas aí está Seções, traga para algumas pessoas. Algumas pessoas os amam. Deixe-me saber nos comentários, você é um amante ou não vê o ponteiro Tudo bem, meus amigos, é isso. Te vejo no próximo vídeo. 56. Como fazer uma barra de pesquisa expandida no Figma: Olá, você. Você está pronto para algo divertido? Tudo bem, pronto Brinquedo super inquieto, barra de pesquisa super agressiva e flexível que se Oh, eu amo esse. legal é que, na verdade, ele se baseia em tudo o que fizemos antes e é um pequeno resumo de nossa grandiosidade de prototipagem Vamos nos deparar com muitas coisas diferentes juntos neste projeto Resultado legal, é um projeto muito legal que reúne tudo o que aprendemos em um projeto complicado e satisfatório Não consigo parar de clicar na pequena barra de pesquisa. Então, vamos começar do início desta vez, apenas para garantir que estamos prontos e que somos incríveis em protótipos e parar de clicar Primeiro, eu criei uma página. Na verdade, acabei de roubar a página familia e deletei a barra de pesquisa que tínhamos, mas há espaço suficiente na parte superior para que possamos colocar uma pequena barra de pesquisa funcionando na Vamos trazer nosso ícone, Command Shift K, Control Shift K. Em seus arquivos de exercícios, há uma pasta de ícones Vamos trazer o ícone. Vou clicar uma vez aqui. É muito grande. Vou pegar a ferramenta de escala e vou me certificar de que selecionei a camada principal. Rosie está lá. Não é o vetor interno, lembra? Eu vou dizer que você tem 24 anos de altura. Volte para minha ferramenta de movimentação, ferramenta de seleção, selecione as cores. Na verdade, vou escolher um dos meus estilos, 500. Você consegue ver todas as coisas legais que estamos começando a costurar O que eu também quero é a ferramenta Type, vou digitar. Pesquisar. Vou copiar isso, vou editar, e vou copiar propriedades, vou editar. Vamos visitar a Pace Properties. Opa. Co. Eu tenho um membro da barra de texto e pesquisa. Você tem que tentar pegar o moldador do lado de fora, não o vetor do Lá você vai lá. Tudo bem. Eu quero que essas coisas estejam em uma saída automática. Eles precisam ser? Pensamento cerebral, provavelmente. Vou selecionar os dois, Shift A. Eles são de saída automática. Vamos adicionar um pouco de branco. Vou adicionar uma sombra projetada. Vai ser que eu gostaria de folhear esses números. Vai ser um, um, e 25 é sempre um pouco alto demais. Talvez 20. Tudo bem, vamos adicionar alguns cantos arredondados. Lembre-se de que basta algo muito alto para fazê-los redondos, e precisaremos de um pouco de acolchoamento Vamos jogar qualquer coisa aqui no momento. Vamos dar oito voltas. Então é oito tabulação oito. Ele precisa de mais. Tudo bem. Vamos fazer a mecânica funcionar e depois podemos arrumá-la Então, o que eu gostaria de fazer é chegar onde eu quero. Vou pressionar Shift G para ativar minhas guias. Está bem? Aí está. E então, desse lado, eu quero que fique até aqui. Agradável. Mude G novamente. Tudo bem, isso deve funcionar agora. Portanto, ele precisa ser um componente, Command Option K, Control Alt K. É um novo dia Acho que talvez seja uma nova semana, na verdade. Acho que na semana passada eu disse que pararia usar os atalhos, pelo menos alguns deles. Eu esqueci quais, então tenha paciência comigo. Nós o colocamos em um componente. Precisamos que ele seja rolado na parte superior, duas variantes. Essa variante superior, eu quero que seja bonita e pequena, sacudida assim Uau. Incrível. Vamos fazer com que funcione mecanicamente Então, podemos corrigir todos os bugs. O que queremos fazer é o modo protótipo, e queremos dizer que este está aqui O que isso faz? Em, clique em Alterar para este. Em pouco tempo, vamos colocá-lo no Smart Animate. E o que eu quero fazer é gostar que a facilidade de entrar e sair pareça legal. Legal. E o que precisamos é que esse seja um componente principal, então devemos colocá-lo em nossa página de componentes principais , mas, por enquanto, não somos. Está bem? Eu quero que uma amostra disso seja divulgada. É meio chato arrastar uma instância. Eu mantenho pressionada a tecla de opção. Você pode manter pressionada a tecla Alt em um Mac para arrastar uma para fora. Um pequeno truque aqui é, lembre-se opção dois nos leva aos ativos, que a opção dois nos leva aos ativos, em vez de clicar e clicar, clicar, clicar, clicar, clicar, clicar, clicar, todos os cliques. Você pode estar de volta aqui. B nos arquivos, vamos usar Option ou Alt two e apenas digitar search, o que não vai funcionar porque se chama quadro 32. Tudo bem. Então eu vou chamar isso de busca. Tudo isso funcionaria muito mais facilmente se fosse chamado de pesquisa Estou aqui, é ótimo ter o painel Ativos, opcional, rolar dois e depois começar a digitar a pesquisa, e lá está ele na parte superior Eu vou dizer, você vai até aqui, vamos tentar. Estamos ignorando o texto saindo. Vamos clicar em você, vamos pré-visualizar e os bits funcionarão. Ah, ele se expandiu. Você pode ver isso? Saiu dessa forma para atualização, funciona. Algumas coisas que precisamos fazer. Queremos que saia Se você o tiver aqui, na verdade, funcionará. Então, se você queria isso desse lado, na maioria das vezes acabou. Eu quero sentir dor e quero que a minha esteja aqui. O que estou tentado a fazer é ir até aqui e dizer: A Eu não sei o que fazer, design, vou dizer sua restrição à direita Talvez este precise ser restringido à direita. Não sei, e você tenta e não funciona porque você fica tipo, você fica tipo, é a instância real aqui. Lembre-se de que a restrição não é feita no componente real Tem que ser a instância. Você pode ver que aqui está indo da esquerda e ele está usando isso como referência e está indo nessa direção. Eu vou dizer, você vai para a direita. Vamos dar um G. Duke. Ah. Estamos fazendo isso. Não volta atrás, mas sabemos como consertar isso. Ok, vamos voltar. Então está acontecendo, então eu tenho um modo de protótipo, e vamos dizer O botão inteiro vai lá. Quando terminar, porém, não pegue a lateral. Pegue os pequenos pontos. Às vezes, eles são difíceis de encontrar, hein, volta para lá e tudo parece bem. Inteligente, sim. Lembre-se de tudo o que eu durei. Então, espero que agora possamos alternar , sim e sim Adoro esse movimento de ida e volta. Talvez um pouco rápido. De qualquer forma, agora vamos mudar isso. Precisamos nos livrar da busca. Está bem? Você pode fazer isso de duas maneiras. Então, eu tenho sorte. Minha busca meio que está paralisada aqui. Então, o que eu posso fazer é vir aqui e dizer sobre isso, você está sob o design, você está cortado Você está recortando? Por favor, segure o conteúdo do clipe Aí está. Está bem? E espero que agora vamos tentar Desapareceu. Parece meio estranho Não, isso não acontece. Desliza para fora. Perfeito. A outra coisa que a minha funciona com muita frequência quando eu faço isso, porém, é que as coisas não se alinham. Esse cara é empurrado em um círculo estranho. Ele não está bem. Vou presumir que o seu é o mesmo, quebrado. O que você pode fazer se estiver usando lupa é um pouco estranho ou ainda consegue ver a pesquisa, mesmo que ela esteja recortada Eu vou dizer, na verdade, a moldura principal aqui no componente. Você pode dizer que quero que seu preenchimento seja um pouco diferente. Então, vou dividi-lo em todos os quatro, para que eu possa ver todos os quatro e talvez você só precise de um pouco mais na parte superior, ou talvez um pouco mais na direita aqui. Você pode clicar duas vezes sobre isso. Você vai estar no modo de design, mas você pode simplesmente clicar duas vezes neles e dizer, na verdade, eu gostaria que fossem nove. Bem, você pode usar a seta para cima para cima. Entrar? O que eu estava fazendo? Eu estava fazendo a lacuna. Sim, aí está. A lacuna é o espaço entre você e a barra de pesquisa. Se eu fizer esse, você vai começar a ver. Essa é outra dica. Eu não era o que estava tentando fazer. Se eu subir, você pode ver que eu posso simplesmente empurrá-lo para que ele saia do círculo. Com isso, fica em nove. Agora eu posso subir e pegar onde quiser. Talvez seja necessário redimensionar sua lupa. Você pode aumentar toda a barra de pesquisa. Há muitas maneiras de lidar com isso. A mecânica está lá agora. Vamos pré-visualizá-la mais uma vez, e há outra coisa que eu sei que quero fazer. Você pode ver por aqui? Eu apenas coloquei aleatoriamente no canto superior direito. Mas quando ele desaparece, você o vê muito longe dessa maneira, não muito longe dessa maneira. É difícil alinhá-lo porque, veja, é muito pequeno. Como você faz isso? Você pode fazer muitos testes. O que você pode fazer é um pequeno truque: o que acontece com uma variante é selecionada, o padrão é essa primeira. O que você pode dizer é, tipo, eu não quero que seja o padrão. Eu quero ser o segundo e então você pode alinhá-lo ou Shift G, você pode alinhá-lo bem, Shift G novamente para desligá-lo e você pode dizer, na verdade, eu só usei você por um pequeno segundo, volte a isso Agora, ok, incrível. Bem, você também notará que, se você apertar os olhos , acontece uma pixelização estranha, acho que é a sombra do trabalho Não sei, está lá desde sempre e parece que não vai embora. É um protótipo. Você só deve ter notado isso agora que eu percebi , certo? Então você fica tipo, OK. Mas eu adoro isso. Olha isso. É legal. Espere um pouco. Acho que posso ter uma maneira de me livrar disso. Você espera lá. Não, não consigo descobrir. Ignore a pixelização. A menos que você saiba, deixe-me saber nos comentários se você tiver uma solução alternativa Talvez esteja apenas consertado, mas está assim há cerca de quatro anos, três anos. Quando você faz isso, como no aplicativo, ok ou em um site, você pode fazer isso totalmente e a pixelização não sairá para Talvez você precise suspender sua descrença por um tempo Não consigo parar de clicar nele. É melhor seguirmos em frente porque acabamos com isso. Adoro a ideia de uma função de pesquisa que usa muito pouco espaço na tela. Está muito claro o que é. Você clica nele, ele se expande para uma bela caixa grande. Oh, eu gosto disso. Tudo bem. É isso mesmo. Te vejo no próximo vídeo. 57. Projeto do curso 15 - Expandindo a barra de pesquisa: Certo, hora do projeto de aula, quero que você crie sua própria barra de pesquisa em expansão com todos os problemas que ela tem. É complicado, envolve muitas coisas diferentes. Dê uma chance. O que eu quero que você faça é nesta. No passado, eu disse para você comentar sobre o trabalho de duas outras pessoas. O que eu quero que você faça é ir até os comentários e ver se alguém precisa de ajuda. Veja se você pode ajudar duas outras pessoas lá embaixo, então todos nós seremos muito úteis. Se você está entendendo errado, seja uma das pessoas que comenta lá embaixo e diz: Estou perdido e explique o porquê. Compartilhe um link para seu projeto também, assim como quando compartilhamos projetos para as pessoas revisarem, você pode compartilhar projetos que as pessoas possam dar uma olhada, pegar o link e colocá-lo nos comentários para que as pessoas possam realmente decifrar e dar uma olhada no seu Se você fez o seu funcionar, certifique-se de ajudar algumas dessas pessoas. Não consigo chegar até todo mundo. Eu literalmente recebo centenas de milhares de comentários todos os anos, mas eu tento o meu melhor. Eu adoraria sua ajuda. Portanto, crie uma barra de pesquisa em expansão. Eu adoraria ver uma animação disso. Vídeo enviado para os projetos da turma. Caso contrário, você pode fazer uma captura de tela do seu conjunto de componentes e diremos que você o fez funcionar Se você publicar o vídeo, eu adoraria vê-lo nas redes sociais. Eu não sei o que acha disso. Eu adoro essas pequenas barras de pesquisa saltitantes e garanto que todos saibam onde você está fazendo isso O curso de Dan. Tudo bem. Divirta-se criando a barra de pesquisa. Vai ser um pouco frustrante. Boa sorte 58. Tenha cuidado com o que criar no Figma: Oi, pessoal. Este vídeo é um aviso. Tenha cuidado com o que você cria. Editor, você pode aumentar e diminuir o zoom assim? Tenha cuidado e. Então, do que ele está falando? Estou falando sobre protótipos e animação. Então, animações são coisas que acabam de ser reproduzidas, ok? Você realmente não faz nada com eles. E então os protótipos, ok, quais estamos fazendo os últimos vídeos com os quais estamos fazendo os últimos vídeos são como interatividade E o aviso é que às vezes você pode projetar coisas que são impossíveis de construir ou que, pelo menos, consomem muito tempo, o que significa que são muito caras. Às vezes, pode estar fora das habilidades de seu engenheiro ou desenvolvedor ou de você mesmo, se você quiser fazer isso. Portanto, tome cuidado para não criar algo, vendê-lo para o cliente e depois não ser, você sabe, e depois ser eliminado e algo que eles amaram ou algo que custou Você sabe, às vezes algumas dessas interações e, você sabe, habilidades especializadas podem acabar dobrando o preço do trabalho ou dobrando o tempo Então, fique atento a isso. Um bom jeito. Tipo, há momentos em que você precisa de todas essas coisas. exemplo, se você está fazendo uma proposta para um cliente, às vezes precisa de todas as ininstruções para fazer com que pareça e, você sabe, realmente vender o conceito Pode ser para sua peça de portfólio, exagere Talvez seja só para impressionar o chefe, ok? Há momentos em que você precisa subir de nível. Mas muitas vezes, na verdade começo a fazer algo e continuo adicionando coisas, e dobrei o tempo necessário para criar sem nenhum ganho líquido real quando se trata de testes com usuários porque é isso que realmente queremos fazer Queremos criar algo rápido, divulgá-lo às partes interessadas, chegar às mãos de nossos usuários e obter feedback. E, você sabe, Figma é prototipagem rápida. Não sei por que fiz isso. É uma prototipagem rápida. Não há nada rápido algumas das coisas que construímos aqui. Só tenha cuidado. Dê uma olhada no termo lean UX, ok? É meio que, você sabe, às vezes você pode se perder um pouco nos detalhes. E, às vezes, tudo o que ele realmente precisa é de algo super rápido, superestruturado e esboçado para chegar aonde você precisa e ser capaz de iterar. Então é isso. Às vezes você não precisa de todo o nível. Às vezes, você só precisa de algo rápido e, às vezes, pode criar coisas que podem ser muito difíceis para o desenvolvedor ou engenheiro criar Talvez não possa ser construído. Outra coisa é que a animação, que abordamos em um capítulo anterior, faremos um pouco mais. Animation Figma, não é? Não foi feito para isso, ok? Você pode fazer algumas animações básicas. Faremos isso porque é divertido e nos ajuda a estragar as ferramentas e a ficar realmente bons Mas se eu vou fazer animação para alguma coisa, algo que vai aparecer na página inicial ou na imagem de boas-vindas ou do herói, eu quero que alguma animação continue, eu a farei em outro programa O After Effects tem um plugin chamado Body Moving, que abordaremos nas animações de Lottie E você meio que pega e joga na Figma, ok Não é realmente uma ferramenta de animação. Existem plug-ins que ajudarão você com animação, animação de linha do tempo , ok? Só saiba que, sim, você pode fazer isso em outros lugares e simplesmente jogá-lo fora Se trata de prototipagem, ou seja, Figma é especialidade. OK. Então, era muito bom em protótipos interativos, ok, e em fazer isso meio rápido Porém, também há limites, e se você quiser ser ainda mais especial, como, eu sei, fotorrealista, não tenho certeza de quando usá-los Mas algo que parece um aplicativo real, talvez você precise passar para a próxima etapa com algo como o ProtoPie, é bastante comum Falaremos sobre isso mais tarde. Mas sim, aí está. Não projete algo que não possa ser construído. Esse é o aviso de que eu queria sair daqui. Tudo bem, é isso. Te vejo no próximo vídeo. 59. Zen em camadas no Figma: Olá, minha Figma. É a camada Zent. Vou trazer alegria ao trabalhar com camadas. Documentos grandes e confusos que causam dor de cabeça. Não se preocupe Zenhem. Agora, erro. Este vídeo vai te trazer alegria ou vai te entediar para Tess Isso me traz alegria, então junte-se mim na jornada. Vamos começar. Tudo bem. A primeira é a tecla Enter ou a tecla Return se você estiver em um Mac. Eu o uso o tempo todo, especialmente para botões. Você pode clicar no botão. Em vez de clicar duas vezes, clicar duas vezes, clicar duas vezes, pegar o texto Você pode. Selecione no botão. Pressione Enter, e ele simplesmente mergulha dentro do botão e agora tem o texto selecionado Você pode pressionar Enter novamente e até mesmo destacar o texto. Vá. Isso é útil? Eu não sei o tempo todo. Digite Enter, mude-me. Fuja para sair. Algumas vezes eu descerei tudo. Isso é útil? Você pode simplesmente executar o comando e clicar, e isso mergulhará em coisas mais complexas. O Enter não funciona para isso porque há muitas coisas. Vamos ver minhas camadas. Você pode ver dentro do meu Nav há um monte de coisas acontecendo, então talvez seja mais fácil segurar a tecla de comando ou controle e clicar nela Em seguida, você pode pressionar Enter e alterá-lo. Ah, a tecla Enter. Por que é tão bom? Oh, fica melhor. Às vezes, estou tentando encontrar coisas complexas, coisas em cima de outras coisas. Vamos ler esse texto. Esse trecho de texto aqui está dentro de pequena rolagem horizontal, dentro de um cartão, que está dentro de um layout automático, que está dentro de Então, há muita coisa acontecendo. O que eu realmente gosto é manter pressionada a tecla de comando ou controle, macOPC, e clicar com o botão direito Todo mundo tem cliques com o botão direito do mouse, mas veja isso. Você pode escolher a hierarquia. Olha, você quis dizer a avaliação como no quadro ou você quis dizer o pergaminho de avaliação? Talvez você esteja vendo a avaliação de compra. Talvez seja a tag em que está ou o texto recomendado. Eu gosto disso porque você só precisa disso, às vezes é difícil ir, certo, não você, nem você reserva um. Você pode simplesmente segurar o comando ou controle, escrever cliques e dizer: eu quero seus lábios e quero a moldura em que Você não quer isso exatamente no fundo. Você está pensando que é chato, vai ficar mais chato, mas eu adoro isso Há um pouco de OCDME de designer e, por algum motivo, isso me dá isso Olha o quanto está acontecendo aqui. O que eu realmente gosto é da opção. Tatue isso no antebraço ou no Alt Al, não mude Mac ou BC. A tatuagem não vai funcionar. Eu simplesmente adoro isso. Olha, eu só arrumo tudo. Tudo desmoronou e o Zen foi restaurado. Depois, você pode entrar no campo desejado e dar uma olhada. Eu vou combinar este. Você pode clicar nesses Chevrons e ver, digamos que este aqui. O que tem aí? O que tem aí dentro? O que significa que você pode passar anos tentando descobrir que todo o TOC acabou Preciso encontrar tudo aqui. Preciso expandir todos esses Chevrons. O que você pode fazer é segurar a tecla Command ou Control e clicar na Chevron e ela se expõe Tudo bem, talvez não se exponha, mas compartilhe todo o seu interior É uma espécie de assassinato. Tudo bem. Isso é fazer isso. Mantenha pressionado o comando, mantenha pressionado o botão Control e clique no Chevron Na verdade, você tem que selecioná-lo primeiro e depois fazê-lo. Bem, bom argumento. Então você pode ver aqui que não foi escolhido, então eu posso ver tudo Novamente, você não pode ter nada selecionado. E lembre-se daquela tatuagem, Option enrolada toda arrumada. Agradável. A outra coisa é que quando você está aqui, algumas pessoas nem usam páginas. O que você pode fazer é ver que as páginas aqui podem ser colocadas lado a lado. Você, assim como eu, nunca os uso. Quero mais espaço para minhas camadas. A outra é, digamos, vamos expandir tudo em Selecionar tudo, manter pressionada a tecla Kamankey e clicar em uma delas, e abriremos todas as Às vezes, porém, eles ficam bem longos. Nenhum dos meus é muito. Oh, tem alguns. Você pode ver que está ficando cada vez mais longo e mais longo? Na verdade, você pode simplesmente arrastar isso para maior, você tem um pouco mais de espaço. Você pode ter uma tela muito grande e ficar feliz por ter uma bela janela grande aqui. A mesma coisa com as páginas. Se você estiver usando muitas páginas, pode simplesmente dizer: tudo o que eu preciso é de mais páginas porque eu tenho uma grande tela gigante. Você pode clicar duas vezes nele e ele voltará para a versão menor. Tudo isso é tudo. Isso é camadas. Agora fique. Deixe-me saber nos comentários. Se há um lá dentro, você fica tipo, é isso. É o único. Da mesma forma, deixe-me saber se eu refazer este curso, como, Dan, este curso não precisa de camadas em vídeo Talvez eu pare com isso. Eu provavelmente não vou. Me faz feliz. É isso mesmo. Te vejo no próximo vídeo. 60. Pesquisa avançada no Figma: Estamos fazendo uma pesquisa avançada, não tão avançada, mas muito útil, especialmente se você não estiver ciente do poder dela. Vamos entrar e fazer algumas pesquisas. Ok, então encontre um substituto. Você estará no arquivo e muitas pessoas não saberão que há um pequeno ícone de pesquisa lá. Eu posso digitar alguma coisa. Digamos que eu precise. Tenho algumas alterações de texto que preciso fazer e preciso de muitas delas. A palavra, o que eu tenho coletivo. O Groove Collective está em todo o documento. A única coisa que também deve ser observada, Cs a coloriu, faz isso o tempo todo. Me assustou quando o vi pela primeira vez. Eu estava tipo, o que aconteceu com isso? Quais estilos se aplicaram a ele? Não é relógio na busca desligada, volta ao normal. Ative a pesquisa novamente, obviamente , encontrar e substituir é realmente útil. Vou digitar groove collective e descobrimos que , na verdade, ele deveria ser chamado de groove Acho que isso é útil quando você está meio usando o login, o cadastro ou o login. Você precisa ser consistente, então você precisa encontrar todas as instâncias um grande documento e dizer: Sim, eu quero que você mude tudo isso e faça uma grande tentativa. Bom. Agora é groove co em todos os lugares Substituir tem apenas algumas coisas que você pode fazer. Encontre, porém, vamos digitar um botão de palavra. Você pode encontrar tudo que tem um botão, mas você pode ver que é demais. Você fica tipo, não, eu quero todas as instâncias. O legal do Find é que você pode entrar aqui e dizer: quero mostrar apenas os exemplos desses caras. Aqui estão todos os meus botões. Muito útil para um documento grande. Você tem que mudar alguma coisa. Você só precisa descobrir onde está tudo. Uma coisa é desligar a filtragem e desligá-la com um pequeno X se terminar de pesquisar coisas. Uma fácil. Para o próximo vídeo. 61. Como renomear camadas manualmente com truques avançados no Figma: Oi, pessoal. tentar impressionar você com toda a minha codificação Mas, na verdade, acabei de clicar nesses botões. É uma ótima maneira de renomear muitos objetos ao mesmo tempo. Você não precisa saber programar. Você só precisa saber como clicar nos botões e a mágica acontecerá. Vamos começar. Tudo bem, então vou passar para minha página de interações , que é um pouco menor. Aprenderemos isso mais cedo, mas você pode renomear usando IA, digamos, a página do carrinho de compras aqui Vou dizer, clique com o botão direito do mouse e quero que você use esse recurso de renomear camadas e IA e clique nele e assista à mágica Linda. Uma das grandes coisas que eu gostei quando eu estava usando o nome. Está bem? Diz, foi Groove Collective, para o título aqui em cima Mas uma vez que eu fiz a renomeação, ele o chamou de nome do artista, e você fica tipo, Oh, você está bem Isso mudará com o tempo. Você pode ver aqui, quadro 23. Isso não mudou. Então, o que você pode fazer é dizer, na verdade, renomear esse cara, renomear Laos e ele pode dizer: Ei, não há nada que precise ser renomeado, como, E às vezes simplesmente acerta. Você fica tipo, você vai aqui, Jickbton. Tudo bem. Mas agora queremos fazer algo um pouco mais manual , porque é bom e pode levar você perto de onde você precisa chegar, mas às vezes precisamos fazer isso automaticamente. Eu tenho alguns ícones. Se você está perguntando sobre eles, eles são muito legais. Eles são do ícone oito e são. Três D mais o sina Nunca consegui usá-los a não ser nas aulas, mas eles parecem muito legais. Vou selecionar todos eles, passe o mouse acima. Vamos arrumar tudo. Por alguma razão, arrumar não quer fazê-las horizontalmente. Verticalmente, não é Você pode manter pressionada a tecla Roll V opcional. Essa é útil, opção V ou H, horizontal, vertical. Eu não quero que eles estejam alinhados horizontalmente, desfaça. É apenas um atalho para esses dois. Então, se você passar o mouse e passar o mouse, eu os uso bastante. Certo, então temos nossos ícones, e você vê que eles vieram direto do ícone oito chamado Trash Share e do Bookmark, o que é Torna difícil encontrar aquele. Eu os chamo de ícone de todos, e posso clicar neles e simplesmente digitá-los. Mas em uma fuga de sucesso, eu não quero isso. Eu vou dizer, pessoal, se eu usar um deles e goommand , esse é Você pode vê-lo destacado no painel LaaS para que eu possa começar a digitar Você selecionou mais de um e pressiona exatamente a mesma tecla, comando ou controle, então vai para essa coisa. É como o renomeador em massa. O legal disso é que você pode dizer, na verdade, eu quero renomear dois, o quê? O ícone da palavra. Você pode ver o que está fazendo. Está chamando isso de ícone. Eu quero dar a ele um número, ascendente, decrescente, então eu quero usar o ícone um, dois, três Você pode ver o que foi feito lá? Esta é uma expressão de algum motivo, sinal Dlo N é um número e N é outro número. Então, há dois deles. Você pode se livrar de um deles. Talvez você queira chamá-lo de ícone um, dois, três. Olha, hacker de computador Eu realmente não sei como essas asas funcionam. Eu os uso um pouco no design. Eles têm algo chamado estilos grep. É muito parecido. Se você tiver algo complicado, pode ir a um desenvolvedor e perguntar. Há alguma documentação sobre o Figma, se você um desenvolvedor, sobre como fazê-lo funcionar. Vamos manter as coisas simples. O que eu quero fazer é adicionar o ícone da palavra. Quero adicionar um número, apenas um deles, não dois. Não quatro ou cinco, só um. Então, o que eu gostaria de fazer é colocar um espaço, um hífen e um espaço Isso não é necessariamente apenas a maneira como eu gosto de nomear as coisas e quero usar o nome atual. Algum motivo é cifrão e é o código para usar seu nome existente. Legal. Eu os renomeei da lixeira e adicionei um marcador ao ícone com um sistema de numeração e, em seguida, usei o nome atual e adicionei um marcador ao ícone com um sistema de numeração e, em seguida, usei o nome atual. Renomeie, não é Legal. Então, se você se lembra da pesquisa do último vídeo, foi chata. Você pode ir até lá e encontrar coisas. Ok, encontre todas as suas instâncias de botões, isso, aquele, e há apenas dois nesta página específica. Mas imagine que você tinha muito mais, então aperte seu comando ou controle. Ok, você pode dizer, na verdade, eu gostaria de usar o nome atual. Eu não tenho. Eu só quero que esses caras liguem para a primária. Isso pode ser suficiente ou você deseja usar a numeração como primária Está bem? E vai renomeá-los Tudo bem, há uma renomeação em massa. Você pode usar os recursos de IA, mas às vezes você só precisa usar o tipo manual e não ter medo do código. Está bem? Basicamente, esses são três que você usará e basta dar uma olhada na prévia aqui. O que você quer fazer? Cancelar. Tudo bem. Espero que tenha sido útil. Somos mestres em camadas. Na verdade, vou fazer isso mais uma vez só para ser lento. Você pode continuar. Se você tem o jeito desse. Vou desfazer, desfazer, desfazer até esses caras voltem a ser coisas Vá lá, vamos lá. Só mais um. Eu sei que na aula, às vezes mais uma vez é útil. Então eu tenho vocês, mais de um selecionado. Clique em Command ou Control R para renomeá-los. E eu vou dizer, eu gostaria que você os chamasse de ícones com um número. Então eu vou colocá-lo em um espaço em um hífen sem um bom motivo porque eu gosto da aparência dele, e então eu vou dizer use seus nomes atuais Clique em renomear e tudo estará pronto. Aí está. Suave. Você pode ter vários cartões com recursos neles. Tudo o que você precisa renomear em massa, selecione mais de um, Command ou Control R. Tudo bem. É isso mesmo. Nos vemos no próximo vídeo. 62. Encontrando componentes usando a IA: Você, nós vamos fazer algo super incrível. Eu amo esse vídeo. Isso se chama encontrar componentes com IA, o que parece ridículo, mas cara, é legal Muitos bons atalhos o forno principal diz: “Eu preciso de um ingresso Me dê aqueles da comunidade que se pareçam com isso e seja capaz de arrastá-los e usá-los. Pronto para rodar. Vamos começar. Tudo bem. Estamos pegando nossos ativos do painel de ativos. Esse ativo é uma dor de cabeça alternar entre esses dois Há um atalho Shift I no Mac e no BC que será exibido no painel Ativos nesta pequena janela aqui Você pode digitar coisas. Digamos que eu precise de um ingresso. Eu sei que tenho um ícone de ingresso. Foi encontrado. Eu posso muito mais fácil. Shift I. O que ele está fazendo é pular para essa opção aqui e depois ir para os ativos É apenas uma maneira diferente de chegar à mesma coisa, mas, no turno, eu o levarei automaticamente até lá. Turno I. A outra coisa legal sobre isso é que digamos que o ingresso não é muito caro. As pessoas não têm certeza se isso é um ingresso. Então, podemos digitar o tíquete. O que eu realmente gosto é examinar o resto do meu documento. Só descobri que uma é que você pode ir à comunidade, e o que ela vai fazer é examinar arquivos da comunidade de todos e encontrar tickets dentro deles. Então, este aqui em Tamsburg eu posso arrastá-lo para fora. Eu posso simplesmente começar a usar esse. A única coisa a ter cuidado é que isso apareça como um componente principal, pronto para uso. Às vezes, eles apareciam como exemplos. Então, basta verificar se é uma instância. Você só precisa clicar com o botão direito do mouse e dizer desanexar, e então você pode torná-lo seu próprio componente principal Turno I. Digamos que compramos o ingresso novamente e digamos que você goste desse ingresso. Você é tipo, bem, assim. Gostaria de saber se realmente há alguma coisa na comunidade. Digamos que você goste deste, ou se pergunte o que é o resto. Você pode, com ela selecionada, dizer aberta e comunidade e ela irá para o arquivo do qual foi roubada, e roubar não é a palavra certa Esse é o arquivo. Eu posso entrar nele e abrir o arquivo da comunidade do qual ele o pegou emprestado Dê uma olhada, vamos usar nosso recurso Sweet Find. Kit de carrapatos. Nada nesta página. São todas as páginas. Desloque dois para ampliar porque estava escondido lá, mas agora você pode ver todos os outros que você pode usar. Mas não vamos nos confundir. Você pode ir e ver de onde veio, mas eu realmente gosto. Digamos que você precise, tudo bem, eu tenho que criar um botão Compartilhar. Shift I, digite Compartilhar. Vou ver o que você tem atualmente em suas bibliotecas, coisas que você criou, mas também em nossa comunidade. Você pode dar uma olhada. Você vai dizer: “O que parece ser ela?” Eu gosto desse. Arraste-o para fora e comece a usá-lo. Lembre-se, selecione-o. Apenas verifique novamente. O que é esse. Veja aqui, esta é uma instância, não o componente principal real. Eu poderia clicar com o botão direito do mouse e ir para o componente principal e abriremos o arquivo do qual eu o obtive, mas eu só quero desanexá-lo Vou fazer disso um componente principal para mim. Oh, fica melhor. Essa é uma busca visual. Às vezes você fica tipo, eu quero que você ache que essa é difícil. Digamos que a pessoa. Você é tipo, A, essa pessoa aqui. Eu quero encontrar um substituto. Faça o que Dan disse, Shift D, digite pessoas. Não. É uma pessoa. Está examinando minhas coisas. Eu só tenho um. Vamos para a comunidade, pessoa. Mais ou menos o que eu queria. Homem. Você pode passar anos dizendo “Não é o que eu queria”. Isso é muito legal. Então, eu vou fechá-lo . Com ele selecionado, posso dizer isso aqui. Use a IA para fazer uma pesquisa visual do que eu selecionei. Fez isso. Como é realmente chamado? Na verdade, não diz, mas me mostrou muitas opções diferentes. Você pode dizer, na verdade, que eu gosto dessa. Não, eu gosto desse. Você pode arrastá-lo para fora e começar a usá-lo. Pronto para rodar. Está bem? Então, há algumas coisas lá. Desloca o grande, abre sua pasta de ativos. Você pode digitar coisas. Botão, Shifte, digite coisas Não entre e dê uma olhada nas coisas que você tem , talvez apenas na sua biblioteca, ou vá até a comunidade. Vamos ver quais outros botões estão sendo feitos. Tantos botões. Se você não consegue pensar nisso ou só precisa de um guia visual para fazer isso, basta clicar nele e dizer a mesma coisa, astuto Faça uma busca visual, por favor. Dê uma olhada nos meus documentos, mas também o que você tem na comunidade. Muitos corações diferentes. Tudo bem. É isso mesmo. Feliz em encontrar componentes no novo atalho Shift I. 63. Troca de instância dentro de um componente: Olá. Neste vídeo, vamos fazer uma troca de instâncias Isso significa que eu posso ter um botão e escolher entre diferentes instâncias que estão dentro dele. Eu posso ir rapidamente, eu preciso do plus. Feito. Isso é diferente de criar um botão que tenha todos os ícones diferentes listados. Podemos ter apenas um componente principal e podemos dizer: Ei, nesta pequena área aqui, você pode usar esses ícones diferentes se quiser sem precisar ser tão específico. Isso fica mais amargo. Quatro não é ruim para variar. Mas quando você obtém algo assim, precisa de um campo de entrada, e ele precisa ter muitas variações diferentes, algumas delas têm um rótulo, outras não, algumas têm menus suspensos de textos Alguns deles têm a coisa do globo ocular. Há tantas variações diferentes que você acaba com um arquivo como esse apenas para um formulário simples. Então, vamos aprender como fazer uma troca de instâncias. Portanto, podemos ter apenas um campo ou, neste caso, botão. Começaremos com um botão porque é mais simples e pronto: Tudo bem, posso escolher entre qualquer número desses componentes preferidos Um botão para governar todos eles. Tudo bem? Vamos começar. Certo, para começar, eu criei um botão, apenas um quadro simples com algum texto nele, e o transformei em uma saída automática para que ele se expanda Está trazendo alguns ícones, Command Shift K em um Mac, Control Shift K em um PC, e há uma pasta com alguns ícones especiais ou especiais. Os que queremos usar são chamados de ícones dois, pegue todos os quatro, abra-os e eu vou clicar uma vez, duas, três vezes, quatro vezes. Eu tenho todos os meus ícones. Preciso ter certeza de que esse botão é um componente. M, e o mesmo com esses. Selecione todos eles, e eu vou dizer, eu gostaria que você fosse ou vários componentes. Tudo bem, então esses são meus componentes principais. O que eu quero fazer é pegar uma instância, digamos, do carrapato. Então, vou simplesmente arrastar uma cópia para fora e colocá-la dentro do meu botão. Por ser um layout automático, ele reflui. Agora vou arrastar uma instância do meu botão, que chamei de quadro dois Talvez o chamemos de outra coisa. Vamos chamar esse. Mas um nome laranja terrível para isso. Porque a primeira coisa que vamos fazer é com a instância, vamos mudar a cor só para deixar mais claro o que estamos fazendo Então, componentes principais aqui em cima, exemplo aqui embaixo. O que eu posso fazer com a instância e pular todo o incômodo que vamos aprender, não o incômodo, mas todas as coisas sofisticadas é que eu poderia entrar nela, clicar na marca e dizer, na verdade, eu não quero Quero trocar a instância para onde eu quero? Não esse, o lápis, o lápis ali. Isso funciona bem. Quando estou trabalhando sozinho, o problema com isso é que é difícil saber quais estão autorizados a estar aqui. O lápis, você fica tipo, Oh, é esse, é esse outro? Há tantos na minha página de componentes. O que podemos fazer para sermos excelentes e tornar as coisas mais fáceis para nós mesmos, para sistemas de design maiores e para designers juniores, você pode dizer neste componente principal aqui, você pode dizer, veja esta marca aqui, clique na tecla dentro dela. Então, nesta instância, você pode fazer algo chamado troca instantânea Com um ti selecionado, é a instância dentro do meu botão. Eu posso dizer, veja essa opção aqui. Diz, crie a propriedade de troca de instância. Você pode dizer, Hop, vamos chamá-lo de ícone para deixar claro o que estamos trocando O valor padrão será feito, tudo bem. O que eu posso fazer, essa é a parte aqui. Diz valores preferenciais. Além disso, posso dizer: gostaria do que eu quero perto de ser um deles, gostaria que fosse um deles, e não aquele, que outros temos? Lápis e mais. O legal disso é que, se eu fecho e crio a propriedade, significa que quando alguém diz “Eu preciso de um botão?” Vou extrair um exemplo disso e eles podem dizer: Nos vemos aqui? Ícone, qual ícone você quer? Esses são os únicos para escolher, não a grande lista gigante de componentes em todo o seu documento ou sistema de design. É muito mais claro. Co. Vou te mostrar isso para que você possa ser incrível, mas também para que, quando você encontrar um botão e ficar tipo, isso esteja acontecendo? O que é esse Voodoo? É porque eles fizeram uma troca instantânea Você poderia ter problemas? Não é realmente um problema, mas esses ícones eu escolhi especificamente porque você vê isso, têm a mesma altura e largura, 16 por 16, este, 16 por 16, este, 16 16. Então, quando eles fazem a troca, é uma boa sobreposição Se você acabar colocando vários tamanhos diferentes nele, fica mais complicado É por isso que, ao encontrar conjuntos de ícones, você descobrirá que eles são frequentes. Veja, isso é mais estreito do que o lápis, mas eles o colocam dentro da moldura principal, e tem uma altura e largura específicas, modo que todos combinam. Porque você combina com uma variante, 100%, ok? Se você não gosta desse jeito, o motivo pelo qual é bom é que o componente principal é exatamente isso. Por outro lado, se tivéssemos uma variação, teríamos que fazer isso, teríamos que ter essa, e depois trocaríamos essa por quatro. Vamos excluí-lo. Vamos pegar uma versão disso. Tudo bem. Então eu teria que ter outro e outro, e outro, e tudo bem se houver quatro. Mas quando você começa a acessar versões de botões que têm inúmeras variações, fica muito complicado Sim, essa é uma boa introdução. Apenas usando botões. É chamado de troca de instância e você pode ter um botão e ele pode fazer vários trabalhos diferentes Incrível. Nos vemos no próximo vídeo. 64. Como usar a propriedade de componentes booleanos no Figma: Tudo bem, pessoal. Neste vídeo, veremos as propriedades dos componentes. Esse é chamado de lingote, e o que ele faz? É muito legal. simplesmente ativá-lo e desativá-lo no ícone que criamos. Isso significa que podemos dizer que eu tenho esse componente principal que pode fazer algumas coisas. Eu posso dizer, A, eu quero que seja o fim ou o fim. Mas na verdade, você sabe o que? Nenhuma. Somos nós criando uma propriedade de componente de ouro Parece um nome estranho, mas pode ser ótimo. Vamos começar. Certo. Para fazer nosso pequeno botão liga/desliga, encontre o componente principal e encontre o que você deseja desligar. Eu a selecionei e vou até aqui e a aparência e há essa opção aqui. Isso é aplicar uma variável ou uma propriedade. Vamos aplicar uma propriedade, e vamos para plus e a propriedade vai ser, você pode ver que o padrão é esse ouro Eles nem se referem mais a isso como 1 bilhão. É uma palavra estranha, me deu um bom nome. Eu quero mostrar o que está pronto? Na verdade, quero chamá-lo de ícone porque ele mostrará muitos ícones diferentes. O padrão será. Propriedade. Agora eu pego minha instância e posso dizer: A o quê? Ícone que eu quero mostrar? Talvez o feito. Na verdade, eu não quero nenhum. Aí está. Vá lá. Por ser uma saída automática, ela reflui Não me pergunte o que é essa coisa roxa. Eu estava procurando por isso e fiquei tipo, o que diabos é isso? Eu não sei. Parece que não dá uma prévia, e se você puder me dizer o que é, me avise nos comentários. Eu pesquisei as opções de visualização. Parece que simplesmente desapareceu. Você pode ver? Desapareceu para lá. Eu acho que pode ser apenas lá que você vai. É assim que se liga e desliga as coisas. Você pode ver que quando você o combina com, eu quero que seja ligado, mas eu quero que seja um lápis, esse pequeno componente principal é bonito e pequeno, não é uma pilha de variações, com todos os ícones e depois desligado novamente Muito legal. Tudo bem. Próximo vídeo. 65. Criando um campo simples com propriedades de componentes: Tudo bem, pessoal. Neste vídeo, vamos combinar o que fizemos nos últimos dois vídeos em algo diferente. Vamos fazer isso com o botão. Nós vamos fazer exatamente a mesma coisa. Vamos ligar e desligar as coisas e trocar os ícones. Mas vamos fazer isso para um campo de texto porque é a mesma coisa, mas parece diferente quando usado de forma diferente. É uma boa recapitulação do que aprendemos. Esse cara aqui pode ter uma etiqueta ligada e desligada, pode ter o ícone ligado e desligado e o ícone pode ser desligado Estamos fazendo. Entre. Para começar, desenhei algo que parecia um campo. É apenas uma moldura com um traçado na parte externa e nos cantos arredondados. Eu coloquei algumas mensagens no interior. Nem está fazendo nada. Simplesmente não são loucos automáticos só estou saindo e eu fiz um cinza claro Também creditou um pouco de texto, que diz rótulo. Vamos começar com esse. Vamos até aqui pegar um rótulo para nosso campo, e vamos pegar tudo isso transformá-lo em um componente. Em seguida, vamos entrar nisso e pegar um pouco de texto. Aqui, onde diz aparência, queremos dizer, eu quero adicionar uma. Queremos mostrar o rótulo? Sim, por favor. Agora, quando a arrastamos e temos nossa instância, podemos dizer, mostre o rótulo. Não quero mostrar o rótulo, você pode alterar o texto aqui. Esta será, digamos, a data de nascimento, Dp. Vamos adicionar também a troca de instâncias. Vou importar alguns ícones. Command Shift K, Control Shift K em um PC. Há outra pasta chamada icons three. Eu tenho esses dois ícones. Vou clicar uma vez, clicar duas vezes, pegar os dois. Eles têm o tamanho certo. Você tem 18 por 18 e você tem 16 por 16. Opa, você vai ter que mudá-los. Porque eu realmente quero que eles tenham o mesmo tamanho. Vou selecionar os dois e criar vários componentes. Vou pegar uma instância dele, não o membro do componente principal. Um componente principal não pode viver dentro de outro componente principal, então vamos pegar sua instância, entrar, todos os UPs ali. Agora, o que vamos fazer é dizer que essa coisa se move, certo? Usamos o que está lá embaixo e esse parece um pouco diferente. Você vê que os ícones são apenas um pouco diferentes. Aplique a propriedade variável, e esta aqui é uma troca de instância. Muito parecido. Clique nele e quais eu quero permitir que as pessoas usem? A marca de verificação. Isso para baixo. Eu tenho meus valores preferidos, propriedade rasteira. Agora, espero que essa coisa aqui, eu possa dizer, você quer o rótulo Não. Eu quero o perigo? Essa é uma marca de seleção, mas às vezes queremos desativá-la. De volta ao nosso componente principal, descubra o componente. Então, nossa instância aqui dentro, digamos, aqui embaixo, aparência. Eu quero que você pareça que a propriedade mostra perigo? Vou chamá-lo de ícone de exibição. Crie uma propriedade. Espero que agora esse cara, eu possa dizer que realmente mostre o rótulo ligando e desligando o ícone E escolha um ícone diferente. Olha o que fizemos. Ignore o roxo. Talvez seja um pouco rápido, você possa assistir novamente. É exatamente a mesma coisa que fizemos no último vídeo, mas criamos um botão, o que é útil, mas esses campos também podem ser muito úteis. Uma coisa que eu poderia fazer é que meu componente principal pareça ser a maneira errada. Quero rotular, depois ativar e desativar o ícone escolher qual instância dele. No meu caso, quero alterá-lo de sua chamada instância. Vamos chamar isso de um ícone. Só para ficar um pouco claro aqui. Ícone Sim, marca de seleção. Fazendo coisas. A única outra coisa é que eu pulei pela metade é que aquele pedaço de texto está centralizado, tenho que voltar ao meu componente principal e dizer: você precisa estar alinhado à esquerda e Este manteve o aroma, o que é interessante. Se você arrastasse um novo componente, ele permaneceria alinhado à esquerda Mas eu não sabia que você poderia. Oh, não é. Por que não? Você está alinhado à esquerda. Todos eles deveriam vir para o passeio agora. Vamos arrastar outra instância. Dan está se perdendo, transformou um tutorial fácil em um tutorial de Dan se perdendo. Sim. Está funcionando, estamos combinando coisas e estamos sendo sofisticados Pode haver muitos casos em que você precise ativar e desativar coisas e trocar instâncias apenas que seu componente principal seja bonito e pequeno, fácil de compartilhar, mas possa se tornar em várias versões diferentes Espero que tenha sido esclarecedor. Ok, nos vemos no próximo vídeo. 66. Projeto do curso 16 - É seu aniversário: Olá. É hora do projeto da aula. Eu quero que você coloque o que aprendemos em prática. Ok, vamos criar esse campo aqui e ele tem muitas coisas que queremos usar. Você precisará criar uma etiqueta que precisa ser ativada e desativada. O mesmo acontece com o ícone, e o ícone quando está ligado, posso escolher ícones diferentes e também posso escolher ícones diferentes e texto auxiliar na parte inferior e o texto de amostra que fica no meio Não se esqueça, em seu componente principal que talvez você queira reorganizar essas coisas Acabei de notar que coisas chamadas de instância, provavelmente quero chamar essa. Então, nomeie-os corretamente e faça o pedido certo, porque provavelmente quero o texto de amostra logo no topo. Parece um dos mais importantes. A, em seu arquivo de projeto de classe, então crie um campo de entrada usando as propriedades do componente. O importante é que, quando você cria propriedades de componentes, às vezes ele está no topo e às vezes está aqui embaixo na aparência. Se não estiver no topo, tem uma aparência baixa. Essa é a única coisa que eu não sei. Se eu não os faço há algum tempo, esqueço em qual deles estou clicando. Co. Então você precisa de um campo, que é apenas a caixa branca. texto de amostra precisa ser ativado, desligado, a etiqueta ativada, texto auxiliar desligado e o ícone desligado, mas tem essa troca instantânea Você pode usar meus ícones, você pode encontrar os seus. Os resultados, quero que você faça uma captura de tela do seu componente principal, incluindo as propriedades Vou te mostrar aqui. Onde está meu componente principal. Configure-o ao clicar aqui, posso fazer uma captura de tela de tudo isso de uma vez Eu posso ver meu componente principal, mas na verdade podemos ver todas as propriedades diferentes e ver se você as nomeia corretamente ou não. Na verdade, eu realmente não me importo com o nome deles para ver se você consegue fazer isso funcionar. É complicado de fazer, mas pode ser muito útil e ainda mais útil quando você recebe a coisa de outra pessoa e diz, aqui está e fica tipo, Uau, está fazendo todo tipo de coisa incrível Você sabe como é feito. Seu próprio. Tudo bem. Aproveite o projeto da aula. Nos vemos no próximo vídeo. 67. Como curvar texto com fontes em um caminho no Figma: Oi, pessoal. Neste vídeo, vou mostrar como colocar texto em um caminho dentro do Figma. Vamos começar. Tudo bem, então você tem que começar com a forma. Vou usar o círculo. Então, usando o atalho O no meu teclado, segurando a tecla Shift para obter um círculo perfeito, depois mude para a ferramenta de texto e clique na borda Você verá o ícone mudar das barras cruzadas para isso e basta clicar onde deseja que ele comece Mesmo que você não o coloque no lugar certo, selecione tudo. Vou manter pressionada a tecla de opção PC e arrastá-la para um tamanho maior. O que você pode fazer é voltar para a ferramenta de seleção e você notará que eu a selecionei. Consegue ver esse pontinho? É aí que tudo começa. O meu está alinhado à esquerda Vou colocar o meu no centro e mudar meu alinhamento normal de texto antigo para o centro. Agora está no topo. Você percebe que a forma é invisível. Se você ainda precisar de um círculo, precisará desenhar uma segunda elipse para usar como parte central Porque estamos usando esse círculo original como texto no caminho. Agora, você pode desenhar e pegar qualquer uma dessas ferramentas aqui. Vou usar a ferramenta de lápis e vou desenhar uma forma e é a mesma coisa aqui. Pegue a ferramenta de digitação e você pode simplesmente clicar nela e nós podemos digitar. As outras coisas que você pode fazer é: vamos nos livrar disso. Com o selecionado, você pode brincar com o básico. Freqüentemente, você precisa brincar com o espaçamento entre letras para talvez acertar, porque ele está espalhado, dependendo da intensidade do seu círculo A outra coisa é que aqui embaixo você tem algumas novas opções, C aqui. Você pode enviar uma mensagem de texto sobre o caminho, você pode dizer o texto no meio abaixo, dependendo do que você precisa O que me perguntam muito é como você faz isso dos dois lados? Você realmente não. Você só tem dois círculos separados. Eu vou fazer limerick. Duas caixas de texto separadas, e o que vou fazer é, oh, há uma opção de virar. Eu esqueci de mencionar isso Vou girar isso e quero que fique abaixo da linha, e você pode ver que posso fazer com que essa coisa pareça estar ao redor de uma elipse. Vou colocar Depois, vou passar anos fazendo com que tudo fique bonito, brincando com o espaçamento entre linhas Mas isso é o básico. Você pode fazer isso em torno de um círculo, um rabisco, um quadrado, uma estrela, o que quiser Isso é texto em um caminho dentro do Figma. 68. Projeto do curso 17 - Texto curvo: É hora do projeto da aula. Quero que você use o recurso de texto curvo e refaça seu logotipo Pode ser muito simples. Você pode passar um pouco mais de tempo. Esse não é realmente o ponto. É só brincar com o texto da curva. Um novo logotipo, certifique-se de usar um ou mais elementos de texto curvo e fazer o upload de uma captura Também adoro ver isso nas redes sociais. Se você está procurando inspiração, algo como driblar Acabei de digitar o logotipo do crachá, às vezes eles são chamados de logotipos de emblemas Mas você pode ver aqui apenas uma curva. Este é um círculo redondo completo até você. Certifique-se de me marcar nas redes sociais. Eu gostaria de ver o que você faz. Não sei por que o texto curvo é incrível, mas é Divirta-se e nos vemos no próximo vídeo. 69. Como fazer as caixas de texto se alinharem com a borda usando recorte vertical: Oi, todo mundo. Vamos analisar o acabamento vertical. Se você é como eu, e você pensa, eu defino meu preenchimento para oito pixels, e você fica tipo, não está nem perto de oito O que é essa grande lacuna aqui? Vou te mostrar como desligá-lo. Na verdade, é muito fácil ir até aqui e clicar nesse botão. Mas há um pouco mais do que isso, então vamos começar. Mas veja como as linhas estão boas agora. Certo, vou começar com o tipo de ferramenta de digitação e vou usar o botão de digitação da palavra Vou escapar para sair da ferramenta de texto e você verá que estou apenas usando o Inter, que é o padrão para figma, e vou transformá-lo em um layout automático e dar uma cor colorida E o que vamos fazer? Bem, se eu clicar na moldura principal aqui, você notará que ela tem um preenchimento horizontal e vertical de oito por padrão O que você notará é que, se eu passar o mouse sobre o preenchimento vertical, você pode ver o oito aqui em cima ? Deixe-me movê-lo para que possamos ampliar Você pode ver? Não está nem perto do texto real Os lados estão mais próximos, mas a parte superior e inferior estão longe de oito pixels Eu posso contá-los. Eles estão tão perto. Isso é oito, nove, dez, 11 pixels. O que está acontecendo é que o tipógrafo decidiu que o apt, que é a letra maiúscula, está colocado tão abaixo e tão longe Cada fonte é diferente. Se eu trocá-lo por este ultra. Não é o mesmo que o Inter. Na verdade, está bem perto. Deixe-me pensar em outro. Eu acho que Leto é diferente. Ok, posso ver que Lato tem cerca 3,5 pixels antes de chegar perto do topo O que podemos fazer, eu vou voltar para Inter é com o texto selecionado, você pode ir para a tipografia, ir para as configurações aqui, e você pode ativar essa É chamado de corte vertical ou que quer que eles chamem de altura de uma tampa até a linha de base Ele apenas ajusta a caixa ao redor do tipo real. Nunca vai ser perfeito. Você pode ver, olha, o que é isso aí? Por que há um espaço lá? Será porque algumas das outras letras maiúsculas serão maiores ou menores do que aquela. Eles são todos iguais. Eu acho que o que eu queria dizer é que você nunca vai conseguir uma coisa perfeita. Mas usar o acabamento vertical o deixará muito perto. Agora parece mais que, se eu clicar no texto interno, faço com que a caixa de texto segure sua tecla de opção, a tecla antiga em um PC e simplesmente passe o mouse Você pode ver que está mais perto dos oitos. Isso é chamado de acabamento vertical Se você passa anos tentando alinhar as coisas e fica tipo, por que não está alinhado? Perfeito. Experimente com acabamento vertical Mas saiba que algumas fontes são diferentes e você terá alguma peculiaridade com algumas delas, pelo menos Tudo bem, acabamento vertical. Te vejo no próximo vídeo. 70. Truncamento para texto no Figma…: Olá a todos. Neste vídeo, veremos os truncamentos, o ponto pontilhado que aparece quando você tem o pântano S. É muito bom quando você está fazendo cartas. Eu não ia incluir isso no curso avançado, mas acabo fazendo muito quando estou copiando e colando muitos textos para preencher os campos Você projetou para quatro ou cinco linhas pequenas e, em seguida, precisa examinar todas as outras listagens e meio que falsificar o ponto. Podemos ativá-lo no componente principal e fazer com que ele funcione automaticamente. Na verdade, é apenas essa topografia, truncamento com algumas linhas truncamento com algumas linhas. Essa é a versão fácil. Deixe-me explicar um pouco mais e esperar até o final Encontrei um problema que você também poderia resolver se estivesse acompanhando o curso. Vamos truncar as coisas. Para fazer isso funcionar, não há nada layout automático nem nada sobre isso, vou transformá-lo em um componente Eu quero outra versão, e o próximo grupo é o prodígio, e vamos preencher todas essas listas diferentes, e eu as obtive de um banco de copiando e colando ou de Eu fico tipo, Oh, oh Nós poderíamos ir para a caixa de texto. O que eu fiz no passado foi com a caixa de texto selecionada. Eu simplesmente passo e tudo isso e excluo um pouco mais e seguida, adiciono meu próprio ponto de truncamento e finjo. Mas há uma maneira fácil. Com tudo isso ainda lá, o que podemos fazer é voltar ao componente principal. Pegue a caixa e abaixo das propriedades do texto. Você tem essa opção que diz truncar texto. Você pode ver lá, na parte inferior da caixa de texto, que ela será truncada e tudo e todas as O texto ainda está lá e ainda é editável, mas você notará que, quando eu saio, tudo vai e adiciona o truncamento Agradável e fácil. No momento em que minha caixa de texto é definida para um tamanho fixo. Se você optar pela altura automática, o que significa que ela se expandirá e se contrairá, poderá voltar às mesmas configurações de topografia e obter linhas Mx Isso é só com isso, então eu vou configurá-lo para três. Todos eles vão para três. A única coisa a verificar, porém, é ter certeza que você está configurado para a altura automática e só então as linhas máximas aparecerão. Uma das coisas que descobri nos últimos vídeos, quando estávamos mexendo com o tipo em um caminho, fiz isso enquanto o padrão estava definido para essa linha média Vou desligar o truncamento. Então, fizemos o Truncation, desative-o agora porque quero mostrar o problema que tive Quando adicionei muito texto, ele começou a se expandir do meio para os dois lados. Você também teve esse problema ? É porque estávamos mexendo com o tipo em um caminho Conseguimos que funcionasse no centro. Eu só precisava ter certeza de ir até minha caixa original aqui e colocá-la no topo, que é o padrão, colocá-la volta na posição e começar a trabalhar. Vou ativar meu truncamento novamente. Opa. Defina-o para uma linha. Suba dois, três ou quatro. Incrível. Isso é truncamento. Vamos apenas digitá-lo em ponto, ponto, ponto e fazer muitas exclusões. Tudo bem, é isso. Te vejo no próximo vídeo. 71. Como mascarar imagens usando IA para remover fundo: Oi, todo mundo. Vamos usar a ferramenta de mascaramento de IA dentro do Figma Eu vou te mostrar as coisas boas sobre isso, algumas das coisas peculiares que estão erradas sobre Mas, no geral, ele faz um trabalho incrível. E se você esperar até o fim, eu uso toda a década de 1980 e mostrarei uma ferramenta de cores Figma bacana Tudo bem, vamos começar . Tudo bem Primeira estadia, tenho algo para compartilhar. Essa é a terceira vez que eu gravei esse tutorial. Estou gravando a tela errada duas vezes seguidas. Então, vou te ensinar sobre máscara, e vou fazer isso de uma forma meio maluca e mal-humorada Por mais que tenha ficado mal-humorado Oh, ok. O que precisamos fazer é trazer algumas imagens. Então eu quero que você traga de seus arquivos de exercícios os números 912 e 13 Traga isso, acabei de criar uma nova página chamada Imagens, só para ter algo separado. Vamos começar com este aqui. Essa é uma imagem gerada por IA, mas tem um plano de fundo. Poderíamos trabalhar com a IA para ver se eles poderiam nos dar uma sem experiência quando a criamos originalmente, mas isso foi há muito tempo. Então, o que vamos fazer é selecioná-lo. Vamos descer até aqui para ver nossas ações e digitar remover plano de fundo. É um recurso de IA. Faz parte das opções pagas do Figma Vou clicar nele e, na verdade, ficar surpreso com o quão bom ele está pronto Ah, é bom. Esse material tem sido estranho há muito tempo, mas está ficando muito bom Existem alguns pedaços. Por exemplo, se eu arrastar até aqui, é perfeito. Está bem? Veja tudo ao redor. É ótimo. Está meio que aqui. Fez um ótimo trabalho, mas há algumas coisas estranhas porque eu amo uma sombra projetada para mim Então, se eu adicionar uma sombra projetada, você pode ver que ela simplesmente enlouquece. Essa garota é sua, você estará no futuro. Eles podem ter consertado isso, mas aqui não se sabe o que fazer nessas bordas. Tem uma máscara de recorte muito dura que é usada para a sombra projetada, mas na verdade existe uma máscara adorável Não tenho certeza de onde está o problema, mas sei que existem alguns problemas. A Exporta Lovely como PNG. Não tenho certeza do que está acontecendo com a sombra projetada. Por isso, funciona muito bem quando há um alto contraste entre o plano de fundo e o primeiro plano Vamos fazer isso de novo, remova o fundo. Pessoas reais e coisas complicadas demoram muito tempo. Esse foi muito rápido. Vou pular para quando esse estiver pronto. Tudo bem Então, isso leva talvez quatro ou cinco vezes mais do que isso, mas ainda assim é um resultado incrível. Olha isso. Mesmo por aqui, eu gosto. Vou colocar isso acima disso, mas ótimo. Tem os mesmos problemas quando você começa a adicionar uma sombra projetada. Mas quando há menos contraste entre o fundo e o primeiro plano, KC, há muitas cores semelhantes aqui no É muito difícil resolver isso. Vamos tentar e remover o plano de fundo. Eu tento escolher algo difícil. Vou pular para quando estiver pronto. Na verdade, enquanto está acontecendo. Oh, essa foi uma boa transição. Você pode ver? Eu não sabia o que fazer. Fez um trabalho incrível. Se você já mascarou o Photoshop há um ou dois anos, isso ainda é muito bom e poderíamos corrigi-lo, mas fez um ótimo trabalho ao descobrir onde ele termina e o plano de descobrir onde ele termina e o plano Provavelmente não é aceitável contra um fundo branco. Mas olhe aqui embaixo. É pegar o dedo e descobrir onde está o buraco entre o braço dela Se você já fez isso antes, se for um mestre da velha escola, saberá que metade da bola pode facilmente faltar e definitivamente, o dedo desapareceria e metade do fundo seria incluída. Oh, cara, está indo muito bem. Isso funcionaria se eu tivesse um fundo preto, então o Iki ou uma cor escura Eu queria cortar isso aqui e era uma cor escura. Mova-o de volta. Comando de moldagem em meu primeiro colchete ou controle, KC, eu mascarei Acabei de contornar o problema dessa parte da máscara. Funciona muito bem. Mas se você precisar dela contra um fundo branco, precisará usar algo como o Photoshop Photoshop tem todas as ferramentas manuais, enquanto o Figma não É uma chance única no momento. A outra coisa a notar é que, se eu escolher por ela, na verdade, vou me livrar disso. Isso é porque eu fiz esse vídeo algumas vezes. Para ir, Dan. Então, o que acontece é que quando você faz uma máscara, você acaba com essas duas camadas. Então, o de fundo, você pode ver que ainda está lá? Então, se você precisar voltar a ela, o que ela faz é gerar uma imagem completamente nova, preenchida em cima dela. Então você ainda tem os dois. Está bem? E isso vai ser útil quando fizermos uma espécie de máscara de transbordamento na próxima Mas não, há apenas dois preenchimentos. Você não precisa desse, ok? Não é obrigatório, mas aí está. É muito incrível. Na verdade, vamos adicionar cerca de 80% de espetacularidade. Você pode ir agora que está dispensado. Mas se você ficar por aqui, há uma pequena ferramenta legal que eu quero mostrar. Para escolha de cores. Então, vou usar o triângulo segurando a tecla shift para torná-la proporcional à largura e à altura E indo em frente, vou escolher uma cor. Então, vou pegar o conta-gotas e partes de mim só querem deixá-lo mais escuro Ok, e talvez coloque isso atrás dele. Vou manter pressionada minha tecla de comando ou tecla de controle em um PC e usar meu colchete. Isso é legal. Eu quero desfazer Eu quero encontrar a cor de contraste para isso. Vou selecionar a cor aqui no meu preenchimento de cores. Prestes a um site bacana chamado figma.com slash Color O que você pode fazer é simplesmente colar nessa cor e digitar. E o padrão é gratuito . Você pode ver que tem uma ótima cor que a complementa. Esses são os que são análogos ao Bt, eles deveriam ser. Eu não sei Eu nunca uso esses. Eles são cientificamente úteis, como no triângulo, mas eu não sei, o gratuito é o único que eu uso, basta clicar nele. Eu adoro isso. Vou colar isso e tenho um bom contraste de cores. Eu provavelmente quero que fique um pouco mais escuro e o mova para trás. Aqui vamos nós. década de 1980. Tudo bem, faremos outro com isso. Então, a tecla O da ferramenta Ellipse e eu vou manter pressionadas duas teclas, a opção e uma tecla Shift em um Mac, e essa é a tecla Alton Shift em um PC. Você pode obter um círculo redondo e começar do centro Isso é legal. Tudo bem Eu vou escolher uma cor. Vou movê-la para trás na minha paleta e vou adivinhar a cor complementar Na verdade, vou usar meu conta-gotas para pegar um desses roxos, e depois vou até aqui e tentar pegar o outro lado. Isso é muito legal. Talvez, talvez um pouco mais escuro. Tudo bem Estamos fazendo isso. Tudo bem É isso mesmo. Isso é remover o fundo, e acredito que gravamos a tela certa desta vez, dias felizes. Te vejo no próximo vídeo. 72. Como criar uma máscara com respingos fora do quadro no Figma: Olá. Eu vou te mostrar como fazer a máscara de transbordamento É bem fácil. É um pouco confuso, mas eu gosto do efeito em que o produto se espalha Você pode ver assim. O mesmo acontece com esta imagem aqui embaixo, nós a examinamos e recortamos usando nossa máscara, mas faça com que ela se espalhe sobre o produto e eu mostrarei como escurecer o fundo nós a examinamos e recortamos usando nossa máscara, mas faça com que ela se espalhe sobre o produto e eu mostrarei como escurecer o Efeito. Vamos começar. Eu vou te mostrar como fazer isso. Para começar, inclua as imagens 14 e 15. Vamos fazer isso primeiro. usar o que usamos antes, remover o plano de fundo. Gates fez um trabalho muito bom. Lembre-se de que o plano de fundo ainda está lá, então esse é o truque. Teremos duas versões disso. Essa é chamada de imagem 14. Vamos chamar isso de top. Vamos copiar e colar, não o preenchimento, mas a camada real aqui. Às vezes, se você tiver a camada selecionada, ela simplesmente copiará o preenchimento. Eu só quero copiar a camada aqui, copiar e colar. Eu tenho dois deles, tenho a parte superior e a que está na parte inferior será chamada de É aqui que fica um pouco confuso. Vamos desligar o globo ocular do de cima. Boop. Nada realmente mudou, então estamos analisando a parte inferior. Nesta parte inferior, quero desligar a máscara e ativar a versão completa. Confuso. É um pouco confuso É como o início. Vamos pegar a ferramenta Oh, a elipse. Vou mudar uma opção ou mudar de posição, e vou fazer com que eu pegue um pouco do fundo e a tampa fique na parte superior. Agora eu quero mascarar com fundo. Quem sabe o que há de errado em mascarar esses dois juntos? Isso mesmo. Isso precisa estar na parte de trás. Na verdade, vou trazer isso para a frente usando meus colchetes. Agora eu preciso cortar isso mais a elipse, e eu vou fazer uma máscara, aperte este botão e eu vou fazer uma máscara, aperte este E terminamos. Ela. Só precisamos ligar. Esse é o nosso top. Vamos movê-lo para que fique lá. Na verdade, não, esta é a parte inferior e vamos virar nossa parte superior para preencher essa parte. Ah, início. Eu sei. Basicamente, você precisa de duas camadas, uma completamente mascarada, que é aquela, e outra que está mascarada apenas em um círculo, aquela Mas quando você os coloca um em cima do outro, é uma máscara de transbordamento Você vai fazer o mesmo com este. Vamos ver o quão bem essa máscara, na verdade, eu não verifiquei. Eu só esperava mover o fundo, por favor, não fique com a árvore. Por favor, não fique com a árvore. Fez um trabalho horrível. Tudo bem, vou deixar isso aqui. Foi uma boa ideia. Polegar para baixo. Você não fez um bom trabalho nesse caso. Eu só quero essa bolsa. Ah. Ainda vamos contornar isso. Vamos ver o que Dan faria. Vamos desfazer isso Ah, sim, eu sei o que fazemos. Será que vai funcionar? Eu não sei. Então eu vou ter a imagem 15. Vou copiar e colar a camada. Eu tenho dois deles. Vamos desligar o de baixo. Vamos pegar o de cima. Vamos ligar para eles e dar alguns nomes, também. Esse aqui vai ficar no fundo do poço. Só estou fazendo isso porque você está assistindo, tentando deixar isso mais claro Ótimo nome. Tudo bem, então o que eu vou fazer é clicar duas vezes nele. Quero cortar essa coisa e ver se consigo obtê-la também. Corte isso primeiro. Tudo bem. Vamos dar uma chance. Sim, sim, sim. Feche-o agora, você vai mover o fundo? Tudo bem. Sou um gênio Agora podemos ligar o de baixo e desligar o de cima, e o que eu quero fazer é apenas mascarar isso. Você pode fazer o que acabei de mostrar entrando aqui e trocando para cortar. Existe um atalho. Você pode manter pressionada a tecla de comando e ela pressionará ou controlará KeyOpc e começaremos a recortar Isso é o que eu quero. Eu quero você, eu quero você, talvez até um pouco mais baixo. Algo parecido. Nós vamos fazer isso. Lá vamos nós. Isso é o que eu estava procurando. O que é isso? É uma caixa de heróis. Deixe-me adicionar um texto a ele. Agora eu só estou faltando para que você possa sair se quiser. Vou pegar minha ferramenta retangular e devo usar uma moldura Vou prolongar isso. Eu tento fazer com que ele se encaixe nas bordas disso. Será. Bom. Mostre o que eu quero fazer para que o texto saia disso, como no início deste vídeo. Eu vou voltar e gravar a introdução depois. Isso vai funcionar? Eu não sei. O que vou fazer é preenchê-lo com um gradiente. Esse lado vai ser preto. Este lado será preto, mas terá uma transparência melhor, na verdade, transparência total, então vou mover isso para cá, algo parecido, e reduzir a transparência para baixo. Isso é tempo suficiente? Parece que é longo o suficiente. Agora eu posso adicionar texto a ele. Digite para escolher um novo telefone, vou usar meu ultra, vou dividi-lo em duas coisas e pronto. Vou escolher algumas cores, brincar com o espaçamento entre linhas Tudo bem, tem cores. Eu senti que seria melhor. De qualquer forma, é isso que temos. Parecia mais frio na minha cabeça Mas foi útil criar um pequeno truque para contornar nosso problema de mascaramento onde não estava mascarando tudo Afinal, uma vitória, e isso sempre parece legal. Imagens saindo dos círculos. É isso mesmo. Nos vemos no próximo vídeo. 73. Como mascarar imagens com texto no Figma: Olá pessoal, vou mostrar como mascarar uma imagem dentro do texto. É super fácil. O texto ainda é editável Há algumas maneiras de fazer isso. Deixe-me te mostrar como. Vamos pegar o Rowdy. É assim que se escreve Rowdy? Isso bastará. Vamos começar com o atalho simples, porque se você quiser mascarar o texto, o texto precisa ser grosso o suficiente para ver a imagem Você poderia fazer isso por texto, mas não é tão bom. Já concluímos que, no início do curso, você pode pressionar Command ou Control B, o que só o torna ousado. Mas você sabia que pode manter pressionada a opção Command, que é Control Alt, em um PC e usar apenas o maior que e o menor que. Oh, eu sei. Ele brinca com um peso. Você pode ver aqui, eu vou usar o atalho, assista Ele vai do leve ao normal ao semirausto médio. Eu vou até o preto. Você precisa ter uma fonte. Estou usando o Inter que tem todas essas opções diferentes, mas esse é um atalho legal Tudo bem. Então, o que precisamos fazer é que a melhor maneira, na minha opinião, é que nem precisamos disso lá. Precisamos selecioná-lo e podemos editar e copiar propriedades. Com este, podemos colar propriedades, que estão no mesmo bit, ou você pressiona Command Option V em um Mac, Control Ol V em um PC. Agora, está lá, então está mascarado. Eu cliquei em uma imagem terrível porque ela está meio centralizada no meio dela O que podemos fazer é que eu vou te dar outra. Na verdade, basta te dar o caminho mais longo, então eu te darei o atalho Então, a imagem está lá. É um preenchimento como parte deste texto. O que posso fazer é clicar na imagem e, em vez de tentar preencher o texto, podemos pular, não ladrilhar, recortar o texto. Está bem? Assim, podemos pegar essa imagem de fundo e encontrar algo que seja um pouco mais parecido com o que queremos em termos de corte Você também pode girá-lo aqui. Preciso torná-lo maior agora. Você entendeu a ideia. Portanto, é apenas um ótimo atalho para começar a convertê-lo em um preenchimento Vamos voltar para onde estava quebrado. Vamos lá. Não é uma imagem cortada, mas se eu segurar minha opção KeneMaco em um PC e clicar duas vezes nela, de alguma forma mágica, esse é um atalho para mudá-la para um recorte em vez de um preenchimento Isso é útil? Provavelmente não. Mas é o curso avançado. Há coisas estranhas no meu cérebro que eu quero compartilhar. Lá vamos nós. Ok, essa é uma maneira de fazer uma máscara em vez de texto. A vantagem é que podemos ficar turbulentos e você pode ver o fluxo refluir O texto é totalmente editável. A outra coisa legal é: você pode ver no painel Layers? É só esse texto que por acaso tem um preenchimento. A outra forma de fazer isso é com uma máscara. Vou pegar isso. Livre-se do preenchimento cinza de volta para onde estávamos quando começamos Pegue minha ferramenta para reduzi-la, coloque-a onde eu a jogo no meio. Você pode usar apenas uma máscara. Não há nada realmente errado com isso, exceto que o texto precisa estar atrasado. Lá vamos nós. Agora posso selecionar os dois e usar minha ferramenta de máscara. Acho que é a Opção de Comando. Não, isso minimiza isso. Ah. Tudo bem, estamos de volta. Não consigo me lembrar. Então, com esses dois selecionados, há uma opção aqui que diz que usa máscara. Aí está. É Command Control M. Caso contrário, minimiza em um Mac Imagine que ainda seja Control Alt em um PC. Dê uma chance. Não tenho certeza se o PC tem o minimize. A diferença aqui é: você consegue ver esse velho e feio grupo de mascaramento Está um pouco mais claro, ok? Então, você sabe, eu posso ver meu texto. Eu posso ver minha imagem. Está nessa coisa chamada grupo de máscaras. Não há nada realmente errado com isso. Está bem? O texto ainda é editável Ainda é editável? Sim, é. É estranho, porém, não o mostre como um pouco de texto e, se eu clicar duas vezes nele, entro na máscara Mas se eu pegar minha ferramenta de texto e entrar aqui e selecioná-la, ela funciona. Realmente entendi a ideia. Depende de você como você quer fazer isso. Ambos funcionam, e eu mostro a vocês dois porque você pegará o arquivo de alguém e alguém o fará assim e alguém o fará assim e você dirá : “Que diabos? Mas agora você sabe. Além disso, aprendemos alguns outros atalhos interessantes A opção ou o clique duplo vão direto para torná-lo um recorte. E por alguma razão, eu realmente gosto do atalho para os pesos, opção de comando ou Control Alt e uso as teclas maior que e menor que para trabalhar com os diferentes pesos da fonte Oh, estamos ficando avançados. Tudo bem. É isso mesmo. Te vejo no próximo vídeo. 74. Como usar os modos de mesclagem de camadas de cores no Figma: Oi, pessoal. Vamos ver os modos de mesclagem de cores. Isso significa que podemos fazer algumas coisas interessantes com esse JPEG que não tem nenhuma transparência Podemos dizer, tudo bem, Bam, você está transparente agora e podemos fazer algumas coisas criativas com cores e imagens. Também podemos fazer isso com texto quando isso afeta o plano de fundo, é chamado de modos de mesclagem de camadas Vamos entrar e dar uma olhada. Para começar, traga de seus arquivos de exercícios o logotipo, um, dois e três. Esse aqui é só um JPEG. Mas preciso torná-lo transparente e aí que os modos de mesclagem podem ser úteis Onde estiver selecionada, use esta pequena gota de lágrima aqui e você poderá resolver o que é normal por padrão. Mas você pode ver, oh, olhar, multiplicar e escurecer Vamos multiplicar. Ótimo com um logotipo em preto e branco. Você pode ver que agora está transparente. Muito legal. Agora, isso vai depender da imagem. Então, essa versão branca sobre preta. Dê uma olhada na mesma coisa novamente, multiplique, não funciona muito bem. Funciona. Assista. Tem um buraco nele. Talvez você queira isso. Eu não acho que você possa superar alguns dos outros, e vamos dar uma olhada no que pode funcionar neste. Down one funciona. Perfeito. Tela relâmpago. O que você encontrará é ver as linhas lá. Esse grupo faz algo semelhante, não exatamente, mas semelhante. O mesmo com esses. Todos eles fazem algo semelhante, mas não exatamente. Esses são parecidos, mas não exatamente. É assim que eles os agrupam. De volta ao Lighten. Agora, quando há uma mistura de cores, pode ser um pouco mais complicado Então eu posso entrar nisso e escurecer. Está meio que funcionando, mas você pode ver a diferença entre normal e multiplicação Escureceu um pouco a cor, o que para mim, como designer, é uma dor de cabeça, e quando cobre coisas, dá para ver que faz algumas coisas ver que faz algumas Bem, isso não funcionaria para um logotipo colorido, pode ser o suficiente para você sobreviver, mas serve para fazer algumas misturas de cores Ótimo, quando você só tem um logotipo que não tem transparência na parte de trás. Você pode usar o fundo removido ou simplesmente brincar com os modos de mesclagem Você tem que criar outra moldura e trazer uma imagem em que você está. Eu trouxe uma imagem chamada mistura de camadas. Você pode trazer esse também. O que vou fazer é colocá-lo em segundo plano. Podemos simplesmente deixá-lo lá parado. Na verdade, não importa se é um preenchimento na moldura de fundo ou apenas uma imagem na parte inferior do meu painel de camadas. Vamos deixar assim. O que podemos fazer é acessar a imagem e podemos entrar aqui e brincar com os modos de mesclagem dentro daqui Mas, na verdade, primeiro, o que faremos é brincar com a exposição. Na verdade, vamos brincar com a saturação, retirá-la e depois brincar com contraste e exposição para conseguir o que queremos O que queremos é que eu não sei. Só estou brincando com isso. Monocromático para que possamos desenhar coisas por cima. Vou pegar um grande e velho círculo, ok, todo o turno, um grande círculo velho. Vou escolher uma cor, talvez uma das minhas cores aqui. O legal disso é que, não sei onde estou dizendo, você também pode jogar com os modos de mesclagem disso A cor aqui que aparece aqui, como fizemos antes com as imagens do logotipo, tem a mesma pequena lágrima, e podemos brincar Olha como isso é legal. Além disso, mais escuro. Oh, eu gosto disso. Passe anos percorrendo eles e encontrando aquele. Eu gosto desse. Sobreposição. Você pode ter mais de um e pode ver que eles se dobram. Na verdade, vou escolher outra das minhas cores, 500. Vamos tentar esse. Há uma sobreposição interessante aqui. Há algumas coisas legais que você pode fazer com os modos de mesclagem. Você também pode fazer isso com texto. Eu fiz outro quadro e acabei de trazer pouco de texto e podemos fazer exatamente a mesma coisa e usar minha ferramenta Ka, na verdade, para torná-lo bonito e grande, girá-lo Vai ser um grande texto abstrato. Ok, e voltando à minha ferramenta de movimento e aparência. A mesma coisa. Apenas trabalhe, encontre algo que você goste, ou Olagds é meu favorito Isso é muito legal. Oh, diferença Está bem? Portanto, os modos de mesclagem podem ser aplicados a tudo e você obtém um efeito diferente Às vezes é útil para logotipos, às vezes é como um efeito criativo. Isso pode ser recriado em CSS ou você pode simplesmente exportá-lo como uma imagem para ser usada em seu aplicativo ou site Certo, esses são os modos de mesclagem . Te vejo no próximo vídeo. 75. Projeto de aula 18 — Anúncio em redes sociais: Olá. É hora de fazer um projeto de classe. Vamos combinar muitas das coisas que fizemos anteriormente. Está bem? Então, aqui está, Class Project 18, você deve criar um anúncio de mídia social que promova seu aplicativo. Eu só quero que você inclua essas técnicas. Portanto, máscara de texto, máscara de transbordamento e modo de mesclagem de camadas A máscara Spillover é algo que eu inventei. É onde as coisas acontecem como essa aqui, o telefone desliga. Fora de uma máscara. Fizemos isso mais cedo, mas só para você saber, acho que ninguém mais chama isso de máscara de transbordamento Mas há minha máscara de texto dentro dela, e eu estou brincando com o plano de fundo aqui com os modos de mesclagem Não precisa ser um gênio criativo como o meu. Eu não sei É rápido. É mais sobre colocar essas três coisas lá e praticar com elas. O que eu fiz foi criar uma nova página chamada social media add e usei o tamanho quadrado do Instagram, que é 1080 por 1080 Na verdade, não me importo com o tipo ou o tamanho do anúncio nas redes sociais. É principalmente em torno das técnicas de mascaramento. Divirta-se Faça alguma coisa. Bem, se você gosta de mim, forçar técnicas em um anúncio acaba com resultados médios Praticando. Mas se você conseguir, eu adoraria ver, compartilhar nas redes sociais e também enviar sua tarefa Você pode fazer uma captura de tela ou clicar nela e lembrar de usar a opção Exportar até você, enviá-la para os projetos da classe e compartilhá-la on-line Marque-me se você puder. Esse não é o exemplo certo. Aí está. Corrigido. Tudo bem Divirta-se Te vejo no próximo vídeo. 76. Como adicionar vídeos no Figma: Tudo bem, é hora de aprender a usar vídeo dentro dos protótipos da Figma Vamos colocar esse pequeno Pug feliz dentro do texto Você também pode usá-lo apenas em um quadro de vídeo antigo normal. Você pode clicar nele para que ele pare e inicie. Sim, vamos ver vídeos e pequenos pugs felizes. Tudo bem, uma coisa rápida antes de começarmos é que, se você estiver na versão gratuita do FIGMA, acho que eles não permitem que você faça vídeos Então, é uma espécie de assistir e aprender como usar vídeos. Mas se você tiver o teste gratuito ou estiver na conta paga, podemos criar vídeos. Saltando. Vou começar com apenas uma moldura vazia com um pouco de navegação básica Agora, os vídeos são importados usando apenas a imagem de importação normal. Command Shift K, Control Shift K em um PC. Nos arquivos de exercícios, há uma pasta de vídeos, e eu deveria trazer isso porque é mais, eu não sei, lame techne, mas eu encontrei esse cara Eu vou trazer o pug. Vou clicar em abrir. Como antes com as imagens, você pode clicar uma vez e elas aparecerão em tamanho real. Caso contrário, você pode clicar e arrastar. Pode demorar um pouco para ficar pronto para a importação. Por alguma razão, sacudir o mouse parece acelerá-lo. Quando estiver pronto, basta clicar e arrastar para fora. Perfeito. Você tem um vídeo. É isso mesmo. Vamos fazer um pouco mais, mas vamos dar uma prévia desse cara. Demorando um pouco para carregar, mas aí está. Há um pug de aparência feliz. Agora, vamos dar uma olhada em um pouco mais de detalhes. Com ele selecionado, o que você descobrirá é que você pode ter mais algumas configurações abaixo do protótipo Você pode ver aqui com a imagem selecionada, em protótipo, que eu tenho coisas como reprodução automática Por padrão, ele será reproduzido automaticamente. Você pode fazer com que ele se repita se quiser. Por padrão, é um loop, você pode desligar o som se tiver algum Você não quer isso. O meu não tem nenhum. Agora, o legal dos vídeos é que eles são como um preenchimento. O preenchimento desse retângulo é um vídeo, como fazemos com as imagens. Eu tenho uma imagem ou tenho uma imagem? Por favor, espere. Este aqui é apenas um quadro com um preenchimento de imagem. Vamos voltar para esse cara. Aqui estamos ficando confusos. Aqui estamos. O legal disso é que eu posso pegá-lo, copiá-lo e fazer coisas assim. Você espera lá. Tudo bem. ROP para pug. Pug life, nós vamos dar uma olhada nela. Na verdade, podemos simplesmente colá-lo. Nós o copiamos disso, colamos nele e deve funcionar. Vamos tentar. Funcionou. Não sei por que a fonte não está carregando. Está funcionando. Ignore a fonte. Vamos tentar novamente. Oh, eu me pergunto por quê. Você vai fechar a figura e abri-la novamente? Tudo bem, eu fiz. Basta desligá-lo e ligá-lo novamente. Insira o texto Eu adoro isso. Parece que o cachorro está permanentemente encostado no vidro. Há algumas limitações. Vou reproduzir a maioria dos arquivos de vídeo, MOVs, MB fours, esse tipo de coisa Você não pode colocar arquivos gigantescos lá. Acho que costumava ser de 100 megas. Não tenho certeza do que é agora. Não tente colocar arquivos de vídeo de dois gigabytes lá dentro. Vamos adicionar um pouco de interações a ele. No momento, ele é reproduzido automaticamente. Vamos desligar isso. O que podemos fazer é adicionar uma interação que diz: Quero reproduzir e pausar o vídeo Tem essa pequena interação que não leva a lugar nenhum. Mas espero que, se fizermos isso, baixando para a reprodução automática, esta, porém, só tocaremos quando clicarmos nela Estamos fazendo isso. Tudo isso para adicionar vídeo. Bem simples. Vamos adicionar um pouco mais de interação no próximo vídeo. 77. Como fazer um botão de pausa de reprodução para vídeo no Figma: Olá. Neste vídeo, vamos criar um botão de reprodução e um botão de pausa para vídeo dentro do Figma Vamos começar. Tudo bem. Para começar, eu trouxe dois ícones da minha pasta gratuita de ícones. É chamado de reprodução e pausa do ícone de vídeo. Também trouxe um vídeo do arquivo de vídeos. Acontece que esse é o Vídeo 02. O que vamos fazer é que elas se tornaram muito, muito grandes. Vou me certificar de clicar no quadro principal, pressionar K e verificar se eles estão. Eu vou fazer com que eles tenham uma altura de 32, provavelmente. Vou usar esses dois. Vou fabricar componentes para eles. Eu vou dizer que vocês são vários componentes. Devo movê-los para minha página de componentes e , em seguida, arrastar instâncias deles apenas para fazer tudo certo. Vou misturá-los. Você vai para aquele lado e nós apenas paramos, você vai para aquele lado Um pouco grande. Está tudo bem. O que vamos fazer é dizer botão em um modo de protótipo Vamos dizer que você tem uma interação e, quando você clica, quero que você toque alguma coisa O que? Que vídeo? Eu quero que você jogue o único neste quadro. E eu quero que ele alterne? Não, eu só queria jogar. Vamos tentar. Vamos pré-visualizar esse quadro. O vídeo demora um pouco para carregar e depois funciona. O botão está funcionando, mas está na reprodução automática. Quem se lembra de onde eu posso desativar a Reprodução Automática? Está aí, Dan. Você está certo. Em protótipo com o vídeo selecionado, desative a reprodução automática Agora vamos jogar esse. Vamos para uma página aleatória. Vamos clicar aqui e visualizar, e agora não é reprodução automática, mas eu aperto o botão play e ele toca e preciso clicar em pausa Vou fazer exatamente a mesma coisa que fiz antes. Você clica, eu quero que ele reproduza a pausa do vídeo, e o que eu quero Eu quero ir ao vídeo, e o que eu quero fazer? Somente pausa. Tudo bem, vamos tentar. Jogue. Pausa, somos gênios Olhe para nós. Agora, não vamos cobrir todos eles. As outras coisas que você pode fazer com vídeo só porque eu não sei. O vídeo em maquetes, talvez um pouco longe, pode ser útil para alguns deles, especialmente se você estiver criando um aplicativo específico sobre vídeo, talvez seja necessário se esforçar um pouco mais para fazer talvez seja necessário se esforçar um pouco mais para vídeo funcionar em Eu quero te mostrar aqui, você pode clicar em Reproduzir e pausar. Há coisas como silenciar Você pode pular para um determinado tempo, pode avançar alguns segundos. Há algumas outras coisas que você pode fazer aqui. Eles são bastante autoexplicativos. Eles funcionam exatamente da mesma forma que reproduzir e pausar. Vou deixar você jogar com eles, se precisar. Tudo bem. Isso é reproduzir uma pausa do vídeo dentro do Figma. 78. Como reproduzir um vídeo quando você pega o mouse no Figma: Olá, aí. Teremos um vídeo para reproduzir quando você passar o mouse sobre ele. Olha isso. Ignore que estamos em um telefone celular, que não consegue passar o mouse sobre acaso, eu estava trabalhando em dispositivos móveis no momento, mas isso seria para um site para desktop em que o mouse mouse e ele começa a visualizar o vídeo Muito legal. Vamos começar. Tudo bem Acabei de trazer um vídeo. Vamos pré-visualizá-lo. Ele é reproduzido automaticamente normalmente. E o que você pode supor que eu presumi quando fiz isso pela primeira vez foi que, se eu mudar para o modo de protótipo, opção nove, Alt nove, apenas um pequeno lembrete para ir ao protótipo é que você provavelmente vai, certo, basta adicionar uma interação e, em Ha, eu posso fazer o vídeo Ele muda. Diz: Não, você tem que ser um clique. Você fica tipo, isso não funciona. Eu vou me livrar dessa interação. Certifique-se de se livrar dele. Também reconheço que estou usando um telefone celular, sobre o qual você não pode passar o mouse Isso mesmo. Finja que estamos em um dispositivo como um laptop, temos um mouse e você pode passar o mouse O que precisamos fazer é dizer que , aqui, vamos fazer uma variante. Já fizemos isso antes, mas não com um vídeo. Voltando à visualização de design, vamos dizer que você é um componente. Teremos duas variações de você. Um deles estará sob protótipo, vídeo selecionado. Oh, isso é um bom ponto. Se eu tenho isso e você diz: Onde foi o Autoplay? O que aconteceu é que, você pode ver aqui, essas variantes estão encerrando o vídeo Se eu tiver o vídeo selecionado, posso jogar com a reprodução automática Também é o melhor nome. Esse é o de baixo. Este é o nome da propriedade variante de Actually, nomeie-os aqui. Com o pai selecionado, vá para design. Vamos nomear tudo isso muito bem. Esse é chamado de vídeo hover, e temos o primeiro, que é chamado de padrão. Vou renomear este Essa é a pausa. Por que não? Esse é chamado de jogo. Lembre-se de que, para obter a reprodução automática, precisamos estar sob o protótipo Neste primeiro, vamos clicar duas vezes ou entrar na variante, pegá-la e dizer: a primeira é reproduzida automaticamente Esse aqui, entre, pegue o vídeo, você faz a reprodução automática Agora precisamos adicionar uma interação, pegar a primeira, não o vídeo, mas a variante principal. Tudo o que eu sei é estranho O que vamos dizer é que, digamos, você vai lá quando é clicado Não, quando estiver pairando e o que eu vou fazer é mudar essa coisa aqui para o vídeo , isso vai funcionar Precisamos fazer com que ele volte a mudar? Não sei. Vamos pegar um exemplo disso e arrastá-lo para fora. Essa é uma variante como fizemos antes. É um pouco estranho estarmos brincando com um vídeo. Vamos jogar essa, não está funcionando, não está funcionando. Passe o mouse. Ei, saia e isso para. Uau. Oh, estamos em um telefone celular, sobre o qual você não pode passar o mouse Mas nós fizemos isso. Tudo bem É assim que um vídeo é reproduzido quando você passa o mouse sobre ele. Tudo bem Te vejo no próximo vídeo. 79. Projeto do curso 19 - Cartão de vídeo: Certo, é hora do projeto da aula. Não se preocupe se você tiver a conta gratuita. Tenho uma missão paralela para você fazer. Mas se você tem a opção paga Figma ou usa a trilha, eu quero que você crie algo assim, um cartão que tenha a pausa Vamos dar uma olhada nos detalhes. Uma placa de vídeo que tem o botão de pausa na reprodução e um título de vídeo Faça uma pequena pesquisa sobre a interface do usuário dos reprodutores de vídeo. Eu te dei alguns exemplos de lugares para visitar aqui. Você pode simplesmente fazer uma pesquisa no Google sobre a interface do player de vídeo. Eu tenho um muito básico. Talvez você ache algo um pouco mais interessante para copiar. Em seguida, compartilhe um vídeo de você usando seu vídeo, envie o link para os projetos da aula ou eu deixarei você fazer uma captura de tela da sua placa de vídeo Realmente não consigo testar se funciona. E a mesma coisa para pessoas livres. Você não tem a conta paga. Quero que você seja criativo com a imagem que você carrega. Eu estava olhando alguns dos outros. Vocês são incríveis. Crie sua própria versão de algo rápido e fácil, ou seja eu não tenho a conta paga Figma Eu amo tudo isso. Tudo bem. Se você é pago ou está usando a conta gratuita, seja criativo, crie um vídeo ou não sei por que há um gato envolvido, mas faça o upload de algo para os projetos da classe. Espero que você tenha a versão paga e possa fazê-la funcionar Caso contrário, gatos chorando. Vou ver daqui a pouco. 80. Truques avançados de cores no Figma: Olá, meus amigos. Vamos comprar Nerdy com cores Vou te mostrar alguns truques de cores e algumas das estranhezas que acontecem dentro do Vamos começar. A primeira é que eu tenho uma moldura simples aqui. ferramenta Eyedropper é a chave do olho para o globo ocular, mas na verdade é o Você sabe o que eu quero dizer? Eu posso pegar cores da imagem. Veja aqui, eu vou pegá-lo e ele me dá o número ix para ele. O problema é que se eu usar ferramenta Eyedropper e roubá-la, digamos, daqui, que tem minha cor de estilo aplicada, você vê que ela traz o número x, não Se eu clicar aqui, esse é um estilo de cor primária. Isso roubou apenas o número hexadecimal, eles não estão conectados Se eu atualizar meu estilo, isso não será suficiente para o passeio, o que pode ser complicado De volta ao Itol, você pode ver se eu segurar a tecla Shift e clicar nela, verá que não será o número hexadecimal, mas a cor primária Agora eles estão conectados. O mesmo por aqui. Eu quero essa cor, mas quero o estilo real, segure a tecla Shift e ela seguirá o estilo da cor, não o hexadecimal Isso pode te ajudar. A próxima é que, se você clicar em, digamos, uma imagem e quiser diminuir a opacidade dela, poderá usar os números na parte superior do teclado Você provavelmente já conhece esse. Acerte quatro, ele mudará para. Você pode ver a opacidade em 40%, Tipo oito, para 80 Se você for rápido, você pode fazer 66 Vai ser bom e rápido. Se você quiser voltar a 100%, acerte o zero e, se quiser ver completamente, zero, zero. Você só precisa digitá-los rapidamente juntos. Dez, 20, 30, zero para completar e clique duas vezes em zero para ficar completamente transparente. Eu vou dar zero uma vez para trazê-lo de volta. Funciona para qualquer coisa que você tenha selecionado. Colore imagens e até funciona no vídeo. Primeiro, se você brincar com seu filme e escolher qualquer cor antiga, se tiver uma roda de rolagem, dê uma olhada no mouse, talvez tenha uma roda de rolagem, talvez não. Eu tenho. Eu uso minha roda de rolagem sobre essa área de cores aqui. Você pode ver que só falta com uma tonalidade. Eu posso deslizar com minha roda de rolagem. Se você pressionar a tecla de opção ou a tecla antiga em um PC, ela funcionará com a transparência para cima e para baixo, entendeu ? Útil? Talvez não. Eu uso o de matiz, não tanto o de opacidade. O próximo está aqui embaixo. Por padrão, está no Hicks, que é fácil de copiar e colar entre programas GB, você pode ter um manual corporativo, você quer digitar isso lá. CSS é interessante. Se você está usando CSS, ou precisa dar uma cor ao seu desenvolvedor, esse RGBA, que é vermelho, verde e azul, e esse é o Alpha de transparência Eu coloquei 0,5, vai ficar 50% transparente. Eu não uso HSL, matiz, saturação, luminosidade. Eu uso muito HSB, saturação de matiz Semelhante. A razão pela qual eu gosto disso é que eu odeio ter arrastar isso para baixo e mexer para baixo porque você fica tipo, eu quero uma cor escura O que você pode fazer: matiz, saturação e brilho, você pode dizer, tudo bem, Eu posso segurar minha tecla Shift e simplesmente subir. Você pode ver que ele simplesmente pula para cima e para baixo. Acho isso muito bom escolher uma cor muito escura dessa cor específica sem esperar que fique reta Eu apenas clico lá e uso meu turno e subo e desço, solto o turno, então ele funciona em incrementos menores Eu não os uso, você pode. A saturação vai para a esquerda e para a direita. E matiz é apenas o controle deslizante de matiz. Eu não uso muito isso, mas adoro pegar esse e descer um pouco Eu quero uma cor um pouco mais escura dessa. Eu mudo para o HSB. Eles são todos da mesma cor quando você termina, apenas maneiras diferentes de representar. Isso é tudo para quem gosta de cores. Há uma última coisa. É meio que eu não sei. É parte da lei da Internet, onde você pode simplesmente digitar em vermelho. Está bem? Eu posso entrar aqui e dizer, eu quero rosa. Por que isso é legal? Não é muito legal. É interessante, especialmente quando você começa a ouvir coisas como: “Tudo bem, eu quero cinza E se eu soletrar de outra forma? Há duas grafias de cinza por algum motivo . Eles são exatamente iguais. Alguém deu uma volta e nomeou cada cor. Bem, nem todas as cores, mas existem muitas cores nomeadas. Eles ficam muito estranhos Assim. Se eu ficar cinza escuro, você não pode ter espaços entre eles, cinza escuro, de alguma forma mais claro que cinza. Então, os grandes nomes, ok? Peach Peach é um bom nome. Mas veja isso. PH puff é um ótimo nome. Então, se você tem uma cor e está perto de um nome, eu não sei. É ótimo poder digitá-lo, mas também faz parte da operação de branding muito boa quando você não usa o FDA B nine Você está usando Peach Puff, muito mais legal. Sabe, você pode dar uma olhada na internet. Aqui estão eles aqui. Está bem? Este é o w3.org Você pode ver, dê uma olhada todas as cores nomeadas. Há alguns estranhos. Encontre um estranho para sua marca. Chifron de limão Ah. Não gosto da cor, mas gosto do nome. Tudo bem, isso é tudo para coisas de cores avançadas. 81. Como alterar e substituir cores no Figma: Oi Ei, aí. Neste vídeo, mostrarei como atualizar todas as cores de uma só vez. Algumas das minhas coisas estão usando o estilo de cor, o correto e este aqui está usando o número ix. Mostrarei como selecionar todos eles e atualizá-los, para que todos usem o estilo, não usando partes de ambos. Vamos começar. Tudo bem. Quando comecei a desenhar, comecei a usar essa cor antes de transformá-la em um estilo. É muito comum. Você pode ter usado acidentalmente a ferramenta conta-gotas para instalar o número Hix em vez do estilo de cor oficial que eu pretendia A maneira de alterá-los todos para garantir que você seja consistente é usar o estilo em qualquer lugar dessa cor, não no Ix, é apenas fazer uma seleção. Basta selecionar nada e selecionar A, que é comandar ou controlar tudo está selecionado e desça aqui embaixo, onde diz cores de seleção, há muitas para mostrar, diz: Você gostaria que eu as mostrasse? Sim, por favor. O que podemos fazer é que você veja os principais aqui ou seus estilos. Mas você pode ver aqui embaixo que diz, mostre-me todas as outras cores. O que eu estou procurando é, o que é? F quatro, 746b. Eu vou me seitar, voltar aqui. O que eu vou fazer é dizer, mostre-me todos eles e eu vou encontrar aquele, não você. Aí está lá. Eu vou dizer, não seja um número idiota Eu quero que você seja desse estilo. Ele examinará todos os casos de uso disso. Você notou que ele desapareceu daqui? É porque agora todas essas cores estão conectadas ao mesmo estilo de cor. Aí está. Aposto que você também o tem para o verde, em algum lugar. Aí está você aqui. Não está ligado ao estilo, Wendy C two, selectol, venha aqui, apenas arrume tudo que todos usem É isso aí? Acho que usei algumas versões desse verde. Vou mudar este para este e garantir que tudo esteja consistente. Porque muitas vezes, no começo, você está apenas brincando com as cores e depois arruma as coisas . Esse cara me cansa. Tudo bem. É assim que você atualiza todas as suas cores de uma só vez. Obviamente, se você já os tem como parte de um estilo, pode seguir em frente e dizer, na verdade, vou ajustar tudo isso e ajustar o estilo para essa nova cor. Não sei o que é essa nova cor, mas você pode trabalhar e ajustar seu estilo secundário e simplesmente trabalhar com as diferentes cores. É uma maneira fácil de atualizá-lo. Eu volto antes de quebrá-lo. Tudo bem, é isso. Selecionar e atualizar várias cores ao mesmo tempo, tornando-as consistentes. Tudo bem, próximo vídeo. 82. Como criar temas de cores para claro e escuro no Figma: Ei, aí está neste vídeo. Eu quero te mostrar essa ferramenta aqui que eu uso. Só uma rápida. Acho isso muito útil. Você escolheu suas cores primárias, secundárias e de destaque e elas são ótimas para objetos grandes e em blocos Eles parecem legais. Mas então você se resume a coisas assim. O que vamos fazer em termos de caixas de texto diferentes? Qual é a aparência de um esquema de luz, para o qual geralmente projetamos primeiro e depois você acha que precisa de um esquema escuro. Deixe-me mostrar como inserir todos os seus dados para ter uma ideia do que vai funcionar e quais são os bons contrastes. Tudo bem, eu adicionei um link para isso em seus arquivos de exercícios ou em seus arquivos de projetos de classe Construtor de temas com todos os materiais. Ele se move, então talvez você precise pesquisar no Google se ele foi movido e o link está quebrado. O que é muito legal, porém, é que é ótimo apenas para escolher cores no início de um projeto Você pode prosseguir e dizer: Oh, me dê algumas ideias de como a interface do usuário pode funcionar. Há um contraste padrão, médio e alto contraste. O que é muito legal é que eu escolhi minhas fontes, então escolhi ultra e Roboto, como as que usei Mas o que você pode fazer é ver aqui, você pode adicionar sua cor primária secundária e terciária Vou entrar na Figma e dizer: Tudo bem, cor primária, onde você está? Aí? Eu vou pegar isso. Vou pegar esse aqui embaixo. Vou pegar o número do caipira, aqui, colar e clicar em Aplicar e você pode vê-lo dizendo: Tudo bem, essa é a sua cor primária Na verdade, vamos adicioná-los todos primeiro. Vamos acelerar o modo. Tudo bem, então eu adicionei essas cores, e é muito interessante ver o que essa ferramenta faz com minhas cores. Você pode ver se eu desço até a parte inferior? Essa é a minha cor primária, e é aqui que diz que eu deveria estar em termos de um bom contraste entre texto claro e esse fundo colorido. Já escureceu tudo. Você não precisa, mas é um bom senso porque às vezes você acaba assim. Use demais as cores de sua marca muito fortes para fazer coisas muito utilitárias Digamos que precisamos de uma página de contas, você precise alterar suas preferências de e-mail, provavelmente usando todas cores primárias e secundárias em negrito para fazer isso. É provável que isso o desvalorize em termos de atenção. O que você pode fazer é entrar em algo assim e dizer que estou usando isso pode ser uma maneira melhor de exibir dados ou aqui embaixo, como pequenos painéis. As preferências de e-mail podem funcionar melhor nesse caso aqui. É simplesmente sutil, não é grande e ousado. Você pode decidir, na verdade, que eu quero que seja uma versão de contraste leve de tudo isso. Não está tão escuro. Quando lidamos com algumas das partes utilitárias de um aplicativo, você pode decidir qual mídia pesada, especialmente se você receber as cores da marca Você está trabalhando para uma empresa que já tem um logotipo de marca. Você não quer simplesmente jogá-lo em todos os lugares, como fizemos. Você pode entrar aqui e essa ferramenta aqui, não se preocupe se é IOS ou se você está fazendo coisas na web ou para Android. É uma boa maneira de ver suas cores de outra forma muito bons e consistentes contrastes muito bons e consistentes. Eles são facilmente legíveis, por algum motivo, com cantos muito arredondados. De qualquer forma, eu gosto disso. Adoro usar minhas cores nela, especialmente se já temos cores de marca para ter uma ideia do que podemos fazer, e eu gosto de aumentá-las até o contraste de altura Jantar. Você pode então passar e dizer: Tudo bem, eu quero copiar essa cor aqui e você pode colar isso no Figma Você também pode escolher suas fontes. Estou usando o Ultra e o Roboto apenas para ter uma ideia de como pode ser Mas, novamente, mais sugestões, acho útil. Pensei em compartilhar com você. Tudo bem É isso mesmo. Esse é o criador de temas de materiais. Eu gosto disso. Você também pode. 83. Como você usa bibliotecas de equipe no Figma: Olá a todos neste vídeo, vamos dar uma olhada nas bibliotecas. As bibliotecas são uma forma de criarmos vários componentes agora e vários estilos de cores fonte e estilos de efeitos. Queremos usá-los em outros projetos e não precisamos continuar copiando e colando, ou se quisermos compartilhá-los com outra pessoa da nossa equipe, para com outra pessoa da nossa equipe, que eles possam usar exatamente a mesma coisa Somos todos consistentes. Podemos criar uma biblioteca, publicá-la, acessar novos documentos que não tenham nada aplicado a ela. Um novo documento e crio uma moldura e posso dizer que, na verdade, gostaria de carregar a biblioteca Limerick, adicioná-la ao arquivo, tenho acesso a todos os componentes Neste novo documento, além disso, tenho acesso a todas as cores dessa biblioteca. Eu tenho que copiar e colar ou começar de novo. A melhor parte é que eu posso compartilhá-la com outros membros da equipe e comigo mesma. Tudo bem, vamos começar. Primeiro, muitos desses recursos são para a conta paga. Eles continuam mudando isso em mim, veja até onde você pode chegar nas versões gratuitas. Bem, no passado, você podia usar as cores e os estilos de fonte, mas não os componentes. Eu sei que isso fala em tornar isso totalmente pago, mas veja até onde você vai. No documento em que estou trabalhando, criei vários componentes para vários estilos de cores e tecidos, correções, variações e variáveis Há muitas coisas que você pode guardar em uma biblioteca. Crie a biblioteca, sendo o documento a partir do qual você deseja criá-la, que é este. Você vai até o painel Ativos e há esse pequeno ícone de livro. Sobre isso. Vamos dizer que eu gostaria de publicar isso como uma biblioteca para outras pessoas usarem. Vou clicar em publicar. Vai dizer: Ei, você não pode fazer isso porque está em seus rascunhos. Você gostaria de movê-lo? Eu vou ficar com a Okie Você tem um projeto no qual deseja que ele participe? O que eu não vou fazer é sair disso. Vou voltar para minha casa e vou para meus projetos. Eu vou fazer um novo. Crie um projeto. Eu sei que na conta gratuita você só pode ter três, não é? Eu acho que sim. Vou criar um chamado Limeric techno Eu vou compartilhar isso com as pessoas? Agora não, eu vou criar. Eu tenho um projeto para fazer isso. Agora podemos movê-lo para lá. Volte aqui, crie uma biblioteca, publique isso. Diz que precisa ir a algum lugar em um projeto. Eu tenho um para ele entrar. Vá. Essa é a primeira parte. Agora você pode prosseguir e decidir o que deseja incluir nele. Está feito em todas as minhas cores. Você quer todos os seus componentes? Só essa. Eu quero ir e dizer, basta fazer todos eles. Ligue isso, desligue isso e inclua tudo. Talvez você precise arrumar seu arquivo primeiro. Especialmente se você estiver compartilhando com outros colegas de equipe ou com seu futuro eu Nomear coisas como o componente quatro provavelmente não é muito útil Arrume tudo isso primeiro. Vamos clicar em Publicar. Ele vai se esgotar dependendo de quantos componentes você tem Veja aqui embaixo, abraços à distância. Cachorro, eu vou passar por isso rapidamente. O que é legal agora é que, se eu criar um novo documento, em vez de tentar copiar e colar coisas desse documento, criar todos os meus componentes principais, o que posso fazer é criar um novo arquivo, novo arquivo de design, vou começar a criar o aplicativo. Vou usar o iPhone 16 e agora quero arrastar coisas da minha biblioteca de ativos. Não há nada aqui no momento, o que você pode dizer é que pode ir até o pequeno livro da biblioteca. Você pode pesquisá-lo. Você pode dizer, na verdade, eu quero o Limeric. Lá está ele Limerick techno, vou adicionar algo a este arquivo e fechá-lo Agora, veja, no painel da minha biblioteca, posso ir até meus componentes e começar a construir essa coisa aqui, pegando toneladas de instâncias, ícones, qualquer coisa que tenha sido criada Ah. Estranho. Sim, ele era um componente principal. A outra coisa legal é que se eu quiser colorir essa moldura aqui, posso entrar no meu preenchimento e ir até meus estilos e você pode dizer, todas as bibliotecas, não, eu quero dar uma olhada na biblioteca Limerick Você pode ver aqui todas as cores desse documento original para que possamos manter as coisas consistentes. O que é muito legal nisso é que, nesse arquivo original, as bibliotecas parecem que deveria haver algo separado. Onde posso encontrar minhas bibliotecas? As bibliotecas não são uma coisa por si só. É apenas a conexão entre esse documento original. Se você estiver criando uma biblioteca de equipe, talvez seu arquivo precise ser organizado e não ter todo esse lixo em todos os lugares. Basta manter os componentes, os estilos, torná-lo um pouco mais organizado porque não há Se eu entrar nisso e disser, volte para o componente principal. Ele não vai para um documento de biblioteca separado , apenas abrirá o arquivo original, mesmo que eu o tenha fechado. Eu digo: Ei, onde está esse componente principal porque eu preciso alterá-lo agora. Ele abrirá o arquivo original onde quer que esteja e mostrará o componente principal. Isso é do meu documento Limerick Techno V one. Digamos que eu precise mudar isso porque quero continuar. Na verdade, vamos fazer isso um pouco diferente. Então, aqui, eu mudei o botão para dizer adeus agora. Fizemos algumas coisas. Mudamos o texto e decidimos que esse realmente tem uma cor diferente. Vamos aplicar o estilo de 500. Se eu voltar ao meu componente principal agora e disser: Ei, componente principal agora você terá cantos arredondados diferentes ou 100, vou diminuir para oito. O que vai acontecer é porque esse é o componente principal e controla minha biblioteca. Há um pequeno ícone aqui, que diz: Ei, há mudanças não publicadas Nada mudou aqui ainda. Mas aqui, posso dizer que, na verdade, gostaria de publicar essas mudanças. Há uma mudança nisso. Vou clicar em publicar. Você quer publicar todos eles ou apenas um deles? Eu só tenho um deles. Há vários inalterados, então isso é legal. Clique em publicar. O que é muito bom nisso é que pode estar conectado a 20 outros arquivos e eles não são atualizados automaticamente, o que é muito bom. Eu posso entrar aqui e dizer, na verdade, clique no meu botão. Você pode ver no topo aqui, tem uma opção que diz: Ei, há uma atualização disponível. Você fica tipo, quem fez isso? Você clica nele e pode dizer: eu só quero atualizá-lo ou posso revisar a atualização? É muito inteligente. Olha, mostra lado a lado o que vai acontecer. Você notará que ele mantém meu texto e a cor que eu mudei, mas altera os cantos arredondados. Você pode olhar lado a lado ou sobrepor. Às vezes, é difícil dizer qual mudança foi feita. Você fica tipo, o que aconteceu. Você se sobrepõe, tipo, eles mexeram com os cantos arredondados Vamos clicar em Atualizar instância. Vamos fechá-lo e ele será atualizado. É uma ótima maneira de controlar muitos documentos. Você tem um componente principal e documento de estilo vinculado a vários outros arquivos. O legal disso é que essas bibliotecas podem ser compartilhadas com outras pessoas da sua equipe. Como eles têm acesso a ele? Se você for ao seu projeto, aí estão todos os meus projetos. Vamos para Limerick Techno. O que podemos fazer é compartilhar qualquer um dos membros da sua equipe. Esse é o meu laptop Binger Ou simplesmente digite as pessoas da designer Victoria Borode UX, eu posso clicar nela e enviar um convite para que ela tenha acesso a esta biblioteca Você pode decidir se ela pode visualizá-lo e não alterá-lo ou se ela também pode editá-lo. Ela faz toda a UX aqui agora trazendo seu laptop, para poder editá-lo. Muitas vezes, ela compartilha arquivos comigo e eu peço apenas para visualização, então não mexa com as coisas Legal. O importante é que não há biblioteca para encontrar. É apenas um arquivo que pode ser publicado. Ele precisa estar em um projeto e, ao criar um novo documento, você pode carregar essa biblioteca para garantir que esteja usando todos os botões, cores e estilos consistentes. Pesquise na parte superior, lá está, e eu vou adicioná-lo ao arquivo. Está lá. Eles não aparecem aqui nos estilos. Mas quando você os arrasta para fora e vai para estilos, eles estão naquele que você conectou. Eles estão todos lá. Você notará que temos os estilos de preenchimento, as cores, mas também temos alguns dos efeitos que estavam no último documento. Fizemos o efeito dropshadow. Criamos um estilo a partir disso. Legal. As bibliotecas são ótimas. Eles precisam estar em um projeto de equipe. Você precisará verificar novamente a conta gratuita, na verdade, o que está incluído agora. Eu sei que no passado, até recentemente, você só podia usar cores e estilos de fonte e não componentes, mas eu sei que eles estão falando sobre mudar isso. Esse é o incrível benefício de usar bibliotecas de equipe dentro do Figma. Vou ver no próximo vídeo. 84. Como ocultar estilos de fonte de cores e componentes da biblioteca de equipes no Figma: Oi, pessoal. Neste vídeo, mostrarei como criar essa pasta oculta para componentes. Também ocultaremos as cores da biblioteca principal. Podem ser componentes nos quais você está trabalhando ou apenas componentes que você sabe que a equipe não precisa. Você pode desativá-los e ocultá-los da biblioteca compartilhada. Você também pode fazer isso com cores, e eu mostrarei esse nome e a convenção de sublinhado no início. Tudo bem, vamos começar Certo para começar. Vamos ser duas pessoas diferentes. Dan e Doug. Doug está trabalhando como colega meu Cria um arquivo de design e ele diz, eu preciso conectar a biblioteca que estamos usando, e ele vai até Limerick e a encontra técnico de Limerick, ninguém, acrescenta, e então ele pode começar a trabalhar em um novo projeto, mas usando todos os componentes que foram usados Arrasta alguns dos meus botões e começa a trabalhar, tem acesso às cores Embora eu também não queira que Doug tenha algumas coisas , elas precisam fazer parte do meu arquivo, mas eu não quero que elas sejam publicadas ainda porque são arquivos futuros Talvez eu os esteja usando, mas ninguém mais deveria. O que precisamos fazer é voltar a ser Dan. Precisamos voltar à biblioteca original para criar o arquivo, e precisamos fazer isso é bem fácil. No painel Ativos, encontre o item em componentes que você não quer que façam parte da biblioteca e você pode simplesmente dizer ocultar ao publicar. Se você voltar a ser Doug, pode levar um segundo, mas eventualmente, vá lá, ele desaparecerá. Não está desaparecendo Eu sei o porquê. Então, se eu desligá-lo, eu o escondi, preciso republicar minha biblioteca Você pode ver que esse pequeno ponto significa que há alterações não publicadas Agora preciso publicá-lo. Há apenas uma alteração e removemos o botão do objeto. Publique agora, volte a ser Doug Doug deve perder o acesso a ele Sim. OK. Porém, é importante observar que quaisquer usos ou instâncias desse projeto principal que já estejam disponíveis em projetos não serão como se fossem sugados de volta para a biblioteca. Ok, então isso é bom. Nós não queremos isso. Está bem? Mas agora eles não podem ser usados para novos projetos, arquivos antigos, componentes antigos. Digamos que eu queira ligá-lo novamente. Ok, eu voltei a ser Daniel. Eu sou o chefe. Preciso ligá-lo novamente para acessar. O que você descobrirá é que meio sumiu do meu painel de ativos. Se você voltar um, ok? Existe uma pequena seta que remonta a uma dos componentes Existe outra pasta chamada oculta E aqui está meu botão. Ok, e eu posso clicar nele e dizer, Mostrar publicação. Só preciso ter certeza de que agora vou até aqui e digo, publique minha biblioteca, e Doug terá acesso novamente. O que eu quero mostrar é que algumas pessoas não usam o botão direito do mouse para ocultar ao publicar. Eles simplesmente o renomearam. Vou voltar aos meus arquivos. Vou encontrar esse recurso aqui e clicar duas vezes nele e as pessoas colocarão um sublinhado na frente dele e isso fará a mesma coisa Se ele fizer a mesma coisa, veja, ele apenas diz que há uma mudança. As alterações foram removidas. O nome e a convenção do sublinhado logo antes do nome do componente são outra maneira de fazer isso e você verá isso e ficará tipo Que diabos é É apenas outra forma de fazer o mesmo. As pessoas gostam que você escolha cores aqui. Estou na minha biblioteca criando um arquivo e você pode ver que tenho todas essas cores. Digamos 900, eu não quero acesso. Não queremos que as pessoas o usem. Eu preciso disso no meu documento de trabalho aqui, mas posso dizer a mesma coisa. Eu posso simplesmente colocar um sublinhado. Não há como clicar com o botão direito do mouse e dizer ocultar estilo de cor. Então, o que eles fazem é deixar você colocar um sublinhado na frente dele também. A mesma coisa. Se eu publicá-lo agora, ele está publicando e removendo esse arquivo de cores. E por arquivo de cores, quero dizer estilo de cor. Se você encontrar documentos de outras pessoas, elas têm sublinhados em todos os lugares, é porque estão removendo-os de uma biblioteca compartilhada Vou ligar o meu novamente e nos vemos no próximo vídeo. 85. Como mover e reconectar componentes de refatoração a outro arquivo de design no Figma: Vamos analisar algo chamado refatoração ou, mais fácil, pensar nisso como revinculação ou, mais fácil, pensar nisso como revinculação Temos nosso arquivo a partir do qual criamos nossos componentes, mas está confuso. Temos tudo isso aqui, temos anúncios de mídia social, imagens, coisas que não queremos em nossos componentes principais ou em nossos estilos. Queremos que nossos estilos sejam legais e se resumam a um único documento. Isso é o que vamos fazer. Vamos mover nossos componentes e mover todos os nossos estilos de cores para documento separado, e o legal disso é que o Figma os revinculará se forem usados em qualquer outro arquivo O resultado final é que terei esse belo arquivo de design limpo que contém apenas meus componentes, meus estilos , sem funcionar, sem layouts móveis, nada mais, e isso é muito mais fácil de compartilhar com a equipe Isso se chama refatoração. Pense nisso como um novo link para outro documento. Vamos começar. Para começar, estou no arquivo em que criei minha biblioteca. Este é meu grande arquivo bagunçado. Eu vou até aqui, tem todos os meus designs móveis. Ele tem meus componentes, o que é útil, mas agora preciso retirá-los e colocá-los em seu próprio arquivo para que as pessoas não acessem esse arquivo antigo e bagunçado e você tenha que mantê-lo por aí para sempre. Então, vamos fazer uma arrumada Para começar, criei apenas um documento totalmente novo. Eu conectei a biblioteca Limerick e usei um componente e uma cor no plano de fundo, então eles estão sendo extraídos dessa biblioteca Eu quero mudar isso. Para mudar isso, o que você faz é criar um novo arquivo e eu vou criar um novo arquivo de design. Vou ligar para esse. Techno de Limerick, vou chamá-lo de principal. E tudo o que fazemos é recortar e colar coisas a partir dele. Eu digo que isso é a única coisa. Há algumas outras coisas, mas essa é a parte principal Se eu for até aqui e disser, esse item aqui, quero encontrá-lo em meus componentes. Vou cortar, que é Command or Control X, apenas sua versão antiga normal. Você corta e cola aqui, ok? Dê um aviso dizendo: Ei, você moveu coisas de uma biblioteca. Você precisa publicá-lo. Eu posso fazer isso, mas isso é o principal. Você recorta e cola coisas nesse novo documento. Para fazer tudo funcionar e para que as coisas não fiquem quebradas porque esse arquivo que eu fiz aqui tem esse botão aqui. O que isso faz? Está vinculando ao arquivo antigo ou ao novo arquivo? Para que tudo funcione, o que você precisa fazer é publicar isso. Vou acessar meus ativos, vou dizer que publique essa coisa, vou publicar. Vai dizer algumas coisas. Sabemos que você não pode tê-lo em rascunhos, então posso movê-lo para o meu projeto Vou movê-lo para minha pasta techno de Limerick. Mova-o para lá apenas como um arquivo de design separado. E vou me certificar de que todas essas coisas mudem. Isso vai te dar um aviso. Vai dizer: Ei, as coisas foram cortadas daqui para este documento, mas outros documentos, como meu novo design e 1.000 outros projetos, usam isso. Eles vão receber um aviso. Tudo bem. É grande, vermelho e assustador, mas não é tão assustador. Está publicado. O que você notará é que meu novo arquivo aqui dirá que tenho algumas atualizações. Quais são essas atualizações? Vamos clicar nele para dar uma olhada. Tudo o que vai dizer é que acabei de clicar em atualizar. Tudo o que ele fez foi atualizar o link de onde ele estava indo. Agora não está saindo do Limeric Techno V, um que tinha todo o meu lixo nele, está vindo Vamos verificar novamente. Ok, vamos clicar nisso. Isso aqui, volte aqui. Agora você pode ver que eu tenho duas bibliotecas conectadas a ele. Eu tenho esse aqui, que tem um componente, que é isso, e todas essas outras coisas. Agora eu deveria remover todos os componentes que eu quero que estejam no meu conjunto principal de componentes principais e continuar movendo-os. O legal disso é refatorá-los para você. Basta recortá-los e colá-los em seu novo documento, certificar-se de que ele foi publicado, e qualquer arquivo que estava usando o botão de ejeção, temos apenas uma atualização e nada realmente muda, exceto onde está vinculado Um arquivo muito mais organizado. Podemos trabalhar duro neste, mantendo-o limpo e bonito, em vez do original. Isso faz sentido? Agora, o principal problema que as pessoas enfrentam é a publicação. As pessoas se esquecem de publicar e dirão que não está funcionando, não está aparecendo. Portanto, certifique-se de que tudo esteja publicado e atualizado. O que quero dizer com isso é entrar aqui e garantir que não haja editoras excelentes Não tem alterações. Tudo bem. Meu principal não sofreu alterações, precisa ser publicado. Está bem? E certifique-se de que todos os outros arquivos que você abrir, acesse a biblioteca e verifique se há alguma atualização. Fazemos a mesma coisa com as cores, ainda é mais uma vez para deixar isso claro. As cores são um pouco diferentes Esqueci que nada selecionado reside aqui no meu painel de propriedades Digamos que eu queira pegar todas as minhas cores primárias. Eu vou cortar, como antes. Isso vem deste documento. Eu vou até este, eu colo. Diz que você tem que publicar, eu posso publicar. Não importa de onde você vá. Eu clico em publicar aqui embaixo ou, se você fizer isso a partir do pequeno livro aqui, clique em publicar, e se eu voltar para o arquivo em que eles podem ter sido usados, talvez você precise ir aqui e depois acessar as atualizações e ver que uma está atualizada. Vamos clicar em Atualizar e pronto. Feito. Está refatorando agora e vou fazer o lento processo de passar Então, o que eu vou fazer é realmente pegar todas as minhas cores agora. Estou clicando no primeiro, pressionando a tecla Shift, corto para o meu novo. Vamos fazer isso de novo, vamos colar, vamos publicar, publicar todas essas coisas. Se você ouvir algum estalo ao fundo, comprei dois kits novos e eles estão atacando coisas no escritório É difícil fazer com que parem de fazer barulho. Você gostaria de parar com isso? Tudo bem, então está atualizado, vamos dar uma olhada em tudo. Você só precisa se certificar de que a biblioteca de estilos esteja atualizada. Não há nada aqui que precise ser atualizado apenas porque eu uso apenas uma das cores da minha biblioteca de estilos. Um componente da minha biblioteca de componentes. Não há realmente nada para atualizar aqui. Você simplesmente avança e diz que essa coisa aqui precisa se mover. Vamos fazer isso mais uma vez. Você vem aqui e eu vou clicar em publicar ou fazer isso aqui. Eu vou publicá-lo. Publique, por favor. Meu novo arquivo de design aqui. Se eu entrar na minha biblioteca e acessar as atualizações, não haverá atualizações porque eu não usei esse botão principal neste documento. Acho que vou acessá-lo. Aí está o botão principal. É um pouco lento e entediante, mas é muito melhor do que trabalhar essa monstruosidade que criamos até agora Tantos arquivos, tantas páginas diferentes. Você pode ficar muito arrumado ao refatorar. Lembre-se de que refatorar é apenas revincular. A única coisa que vai impressionar você e surpreender os alunos o tempo todo é que as coisas não são publicadas. Basta ler e publicar tudo e verificar se há atualizações sobre tudo, e você provavelmente descobrirá que esse é o seu problema. Às vezes, descobri que preciso fechar a figueira e abrir um backup. Isso acontece cada vez menos à medida que amadurece como produto, mas às vezes também é útil Só vou voltar, não sei, tentando fazer alguma coisa com os gatinhos Eles precisam fazer outra coisa em vez de atacar coisas perto do meu microfone Tudo bem, isso é refatoração. Te vejo no próximo vídeo. 86. Quais são algumas dicas e truques avançados de desenho no Figma: Todo mundo. Neste vídeo, vamos bagunçar um documento Mas, ao longo do caminho, aprenderemos todas as minhas dicas e truques avançados de desenho. Tudo bem, vamos. Tudo bem, vamos começar com a ferramenta Lasso Você precisa estar na função ou no modo de desenho do Figma, e eu tenho a estrela que desenhei Temos que entrar nela para começar a editar a forma, clicar duas vezes nela. E eu poderia usar a ferramenta de seleção e arrastá-la e obter os pontos necessários, mas a ferramenta Lasso é incrível para arquivos vetoriais realmente complexos Você pode simplesmente arrastar e dizer, eu quero você, mas não nenhum dos outros, e você pode selecionar todos eles. Agora posso clicar em arrastar e movê-los se quiser excluí-los. Se eu tivesse deletado meu teclado, basta deletar tudo. Então, vou voltar à minha seleção. Eu vou pegar esses. Se eu quiser excluir apenas os principais aqui, mantenha pressionada a tecla Shift e pressione a tecla delete ou a tecla backspace Ambos funcionam. Mas se você fizer isso sem a tecla Shift, ela excluirá o todo Dica de chamada: se eu usar minha ferramenta de movimentação e clicar em apenas uma delas, posso usar minha guia no teclado. Olha isso, passa e pega o próximo ponto de ancoragem Isso pode ser muito útil. Especialmente quando eles estão muito próximos, você pode clicar em um e depois passar para o próximo. Mude o salto, livre-se dele. Pobre velha estrela. Em seguida, quero mostrar a ferramenta conjunta e, na verdade, pausei o vídeo porque estraguei tudo Eu quero te mostrar como eu estrago tudo porque eu faço isso o tempo todo, você faz o mesmo Se eu pegar a ferramenta caneta agora e clicar, arrastar e fazer tudo isso, o que acontecerá é que eu realmente desenhei isso com uma ferramenta de caneta, mas desenhei dentro da forma de estrela. É parte da estrela, o que é uma dor na bunda porque elas não têm duas formas separadas Veja se eu voltar para o meu MoveTool, clique no plano de fundo. Essa é uma unidade. E um pouco de trabalho, mas não é o que eu queria. Sempre que você estiver trabalhando em, digamos, a estrela, estou desfazendo, clique duas vezes no fundo para voltar desenhar uma forma separada que me surpreenda o tempo todo Pentl desenhe uma forma e chegue perto de finalizá-la, acredite na lacuna Você pode obter o ícone ou gráfico de outra pessoa de outra biblioteca ou biblioteca de ícones. A lacuna pode ter vindo do seu desenho. O que você pode fazer é simplesmente usar o Comando J, e ele unirá os dois pontos de ancoragem onde há uma lacuna, muito útil porque, caso contrário, não consigo adicionar um preenchimento pontos de ancoragem onde há uma lacuna, muito útil porque, caso contrário, não consigo adicionar um Comando ou Controle J, junte-se a ele. Agora eu posso adicionar um preenchimento. Uma coisa que você não pode fazer, e eu não sei, é legal também. Eu pego minha ferramenta de movimentação, seleciono todas elas e você pressiona o Comando J, veja isso. Como. Acho que criamos um culto, mas vamos desfazer isso e você pode selecionar esses dois e usar Command ou Control J ou não selecionar nada Esteja dentro da sua forma. Se eu clicar duas vezes para sair, não funcionará, mas se eu entrar nele e usar o Comando J, ele dirá : Oh, você provavelmente quer dizer esses dois. E adicione um preenchimento. O próximo passo é o ponto de ancoragem para rotação Se eu clicar em sair do meu quadrado aleatório na estrela quebrada que eu giro, ela girará em torno do centro, e isso pode ser o que você deseja Mas muitas vezes você não quer que isso aconteça e simplesmente passa o mouse aqui como se fosse girá-lo Espere, espere, espere, espere. Viu que o ponto de ancoragem no meio acabou de aparecer Olá. Este pequeno alvo aqui significa que você pode arrastá-lo e dizer, eu quero que ele esteja lá. Agora, quando você gira, o centro de rotação muda Você só tem que esperar um pouco. O próximo passo é embalar na horizontal ou na vertical. Já nos deparamos com esse problema antes. Vamos trazer alguns ícones anteriores. Ok, estou apenas em um novo projeto. Eu fui importar. Vou ver os arquivos de exercícios. Eu vou usar os ícones dois. Nós o enviamos para esses. Vou trazer mais. Eu coloco, e ele simplesmente os joga um em cima do outro e você passa anos andando Você pode ver como pegou a moldura separada do vetor interno, pintando a bunda O que você pode fazer é selecionar todos eles e usar nossas ações, K Command K ou clicar no botão na parte inferior aqui. O que estamos procurando é um pacote. Podemos empacotar horizontalmente ou verticalmente e ele simplesmente empilha todos eles Finalmente. E se aumentarmos o zoom o suficiente, você começará a ver as coisas normais que vimos antes. É uma seleção inteligente. Podemos ir e arrastá-los por aí. Não sai óleo, e podemos brincar com o acolchoamento apenas para nos recuperarmos. Antes, no entanto. Outro par de simples é se eu pegar a moldura de lápis aqui em cima, aqui em cima, há uma opção de virar vertical ou horizontalmente, só Vamos dar uma olhada em um atalho para alinhar as coisas. Digamos que eu tenho uma moldura, tenho meus ícones dentro dela. Esses caras aqui, eu quero alinhar talvez à direita. Não é realmente o que eu quero. Quero alinhá-la à borda da moldura principal. Eu poderia agrupá-los e alinhá-los, veja isso. Se eu segurar minha tecla shift e passar o mouse sobre elas, você pode ver com a tecla shift ao tocar nela no meu teclado Se eu segurar, você pode ver que eles mudam um pouco? O que ele vai fazer é se alinhar à direita da moldura. Use este ao máximo. Basta centralizá-los vertical e horizontalmente Mantenha a tecla Shift. Caso contrário, eles vão para o meio, mas todos se acumulam Você pode agrupá-los, transformá-los em saída automática. Manter o turno é apenas um pequeno truque. Outra é que se você desenhar alguma coisa, só vem com uma caixa cinza sem traço. Tem um preenchimento, sem traço. Você pode trocá-los com muita facilidade. Pressionei a tecla Shift e o X. Eu apenas alterno. A cor do traçado é movida para o preenchimento. preenchimento se move para o traçado. Eles simplesmente alternam entre eles. Isso pode ser útil. Você tem algo que tem um traço e um preenchimento. Vou fazer isso bem e grosso, para facilitar a visualização. Eu tenho um derrame e um preenchimento. Você pode ativá-los. Lembre-se de Shift X, alterne-os. Isso é legal. Então você quer remover o traço. Tudo tem a ver com o botão de barra do Ford. Abaixe o teclado e encontre a barra frontal. Se você segurar a tecla Shift e pressionar a barra para frente, ela se livra do traçado. Eu vou desfazer Se você adicionar uma opção e usar barra para frente, ela eliminará o preenchimento Aí está. Atalhos do Nudy Você provavelmente já conhece esse. Comande ou controle Y. Vamos alternar entre É mais fácil ver alguns dos vetores quando você está nessa visualização, e isso não os altera para sempre, mas ajuda você a ver algumas partes e alinhar as coisas com um pouco mais É comando ou controle Y para contorno. Esses são meus truques avançados de desenho. Te vejo no próximo vídeo. 87. Como usar a ferramenta Largura variável e Traço simples no Figma: Tudo bem, pessoal. Neste vídeo, veremos a ferramenta simplificada e a ferramenta de largura. A ferramenta simplificada transformará desenhos credy em coisas bonitas e suaves , às quais podemos adicionar essas larguras variáveis floreios lindos ou linhas simples que têm um pouco mais de dinamismo Não é uma palavra, então entramos e mostramos como fazê-las. Vou me certificar de que não estou dentro de nenhuma outra forma que estamos desenhando. Eu vou para o modo de desenho. Vou até a ferramenta de lápis e vou escolher uma cor bonita. Vou desenhar uma forma. Por padrão, não é particularmente suave. O que eu posso fazer é trocar a ferramenta de movimentação, que é o Viki. Clique nele uma vez e você verá essa opção aqui, que diz, simplificar vetor. Funciona para qualquer formato vetorial, mas é ótimo para essa curva. Você pode ver que há muitos pontos de ancoragem, tentando combatê-los. O que você pode fazer é simplesmente arrastá-lo dessa maneira, você pode ver que ele começa a removê-los e torná-lo cada vez mais suave até obter resolução suficiente ou pontos de ancoragem suficientes Vou deixar o meu bem pequeno e liso e clicar agora para usar a ferramenta Largura O que eu preciso fazer é um pouco diferente, preciso entrar na forma que desenhei. Com ela selecionada, vou clicar duas vezes nela para entrar e você percebe essa opção aqui, chamada de ferramenta de largura variável. Você pode pegá-lo em qualquer lugar, clicar em segurar e arrastar e obter essa forma doce. Vá em frente. Há alguns perfis padrão aqui. Talvez você queira brincar com eles. Eles precisam ser maiores. Vou desfazer e voltar para o que eu estava fazendo. Ok, então eu fiz minha largura. Você pode arrastar o centro para decidir para onde ele vai. E você pode arrastar as bordas novamente para ajustá-las. Você pode adicionar mais de um, certifique-se de que ainda está usando sua ferramenta de largura. Você pode ter várias larguras diferentes. Eu uso muito essa ferramenta no Illustrator. Para coisas assim, onde há pequenas bolhas e floreios, você pode fazer o mesmo Eles são basicamente a mesma ferramenta. Vamos fazer isso, então vou para minha ferramenta de largura. O que você precisa para que isso funcione, na verdade, vamos excluí-lo e começar com algo melhor. Vou dar minha ferramenta de caneta. Vou segurar e arrastar, clicar em segurar e arrastar. Eu ainda tenho minha largura aplicada a ela. Clique em segurar e arraste, e talvez outra aqui para obter uma boa curva. Vou me livrar do perfil de largura e voltar ao normal. Vou até minha ferramenta de largura. Para fazer aquela coisinha boba que acabei de te mostrar, você precisa ter duas Você precisa desse. Ok, um pode ser menor e depois outro na extremidade aqui no final para torná-lo maior. Agora, o que você pode descobrir é que, dependendo de quando o usou pela última vez, você pode acabar com uma extremidade plana ou arredondada. Mude isso, posso pegar minha ferramenta de seleção e clicar na linha e você verá aqui que há diferentes encaps Por padrão, é definido como dois, sem limite, e então há este aqui que é redondo e dá aquela pequena bolha agradável Posso usar minha ferramenta de largura e encontrar algo um pouco mais apropriado. Você pode brincar com o traço da coisa toda. Mesmo que diga dois, ele só vai aumentá-lo proporcionalmente às larguras que você fez Não precisa ser tão exótico. Pode ser algo simples, como um sublinhado em que você está fazendo algo simples e agradável Vou reduzir o peso da minha linha para não zero, mas um, para que fique bem fina. Pegue minha ferramenta de largura. Talvez você precise clicar duas vezes nele para entrar e pegar a ferramenta de largura. Eu fiz exatamente a mesma coisa que te mostrei para não fazer antes. Vou deixar isso no curso porque continuo fazendo isso toda vez que desenho novas formas. Se eu estou aqui dentro e começo a desenhar, isso os combina. Eu vou pegar você. cortar sua aparência no fundo. Não selecione nada, cole, ele está sozinho, então entre dentro dele. Depois, posso acessar minha ferramenta de largura e fazer algo melhor como isso Algo bonito e simples e talvez eu use essa tampa que é bem pontiaguda Você verá aqui que eu ainda tenho razão no final. Você pode alterar o peso da linha para algo como 0,1, ela ficará muito fina nas pontas. Vou ter que ajustar minha ferramenta de largura aqui para voltar a ser pontiaguda nas pontas e ter meu pequeno nivelado no meio Essa é uma largura variável. Eu posso invertê-lo, essa é a ferramenta de largura variável. Você pode excluí-los. Pode ir, excluí-los e voltar a ser apenas uma linha reta normal. É isso aí, meus amigos. É a ferramenta de largura variável. 88. Como sobrepor e empilhar coisas em um autolayout do Figma: Tudo bem, pessoal, vamos fazer com que as coisas se sobreponham Você pode simplesmente arrastá-los um sobre o outro. Mas vamos mostrar como fazer com a saída automática para que você possa mexer com o espaçamento e deixá-lo perfeito Você pode mexer com seus objetos e arrastá-los. E como é uma saída automática, temos alguns recursos especiais que podemos dizer primeiro no topo, último no topo, primeiro no topo, último Ei, vamos começar. A para começar. Eu tenho um quadro de avaliação. Estou de volta ao meu documento original. Estou no meu celular Hi Fi e criei uma página de avaliações e acabei colocar um retângulo lá para minha avaliação Vou usar o Oki para desenhar meus pequenos círculos e vou segurar a tecla Shift para que fique perfeitamente redondo Vou duplicá-lo algumas vezes, Comando D D D D. O que eu poderia fazer agora é selecionar todos eles Estou segurando Shift para pegar todos eles e você pode segurar o espaçamento. Não consigo ver o espaçamento e o zoom. Bem, não está me mostrando o espaçamento. Estou sentindo falta de um? Hm. Quando eu faço isso? Eu posso mudá-los, mas não posso mudar o espaçamento. Ou aí está. Aí está meu espaçamento. Simplesmente apareceu magicamente. Você não pode simplesmente fazer com que eles se sobreponham assim, certo? Mas o que vamos fazer é transformá-los em um Audi lout pois isso nos dá alguns recursos extras Adoramos o Audiouts. Na verdade, antes de fazermos isso, vamos adicionar alguns avatares. Eu gosto de usar um plugin chamado Content Reel. Você pode usar qualquer um deles. Há muitos deles. Gosto do Content Reel porque ele tem várias coisas diferentes que eu poderia usar Em Imagem, vou escolher, digamos, avatares masculinos. Você clica em aplicar. De volta. Eu gosto muito desse aqui porque são pessoas mais realistas. É meio que um usuário desconectado, vai movê-lo até aqui Tudo bem, vamos transformá-lo em Atoout. As vantagens aqui são as mesmas de antes de eu começar a brincar com a Você pode fazer isso aqui ou aqui na lacuna. Você acabou de colocá-lo em um valor negativo. O bom de usar o Atoout que temos esses controles aqui Você consegue ver essas pequenas configurações de layout automático? Há uma opção de dizer último no topo ou primeiro no topo e você pode ver que isso muda a ordem das camadas. Último, primeiro. Tudo bem Basicamente, você só precisa de um valor negativo de Gap e pode fazer com que eles se sobreponham Fácil, fácil. É isso mesmo. Te vejo no próximo vídeo. 89. Como ignorar o layout automático para o espaço absoluto no Figma: Ok. Primeiro, para ignorar a saída automática, você precisa ter uma saída automática No momento, isso é apenas uma moldura com algumas cabeças nela. Eu tenho alguns textos que criei para minha análise. Vou pegar a moldura principal, transformar você em um layout automático e fazer com que ela fique do jeito que eu quiser, com o preenchimento, 24 e 24, arrastando-a Está fazendo coisas de saída automática, o que é bom. Eu quero aquela cabeça no canto superior. Vou pegar esse recheio e colar, e isso não faz parte da saída do pedido. Só estou mostrando como estou construindo isso. Veja isso. Se eu adicionar isso à saída do pedido, é como se eu quisesse fazer parte do fluxo e acabar com meus amigos Essa é a configuração padrão do Atoout. Eu poderia simplesmente colocá-lo aqui e segurar a barra de espaço para que ele não entre nisso e aquilo funcionasse, mas não faz parte disso. Não posso transformar isso em um componente porque essas são duas coisas distintas. O que posso fazer é dizer que você, meu amigo, está aí, mas está pronto para isso aqui. Você consegue ficar em uma posição que diz Ignorar saída automática. Precisa estar dentro de uma caixa, para que esse cara possa ignorar. Rude. Eu posso ir até lá e ele pode ignorar a saída. O problema é que ele foi recortado, então eu posso pegar a moldura principal e dizer: não vamos recortá-la enquanto recorto, recorte Lá vamos nós. Agora, você descobrirá que, ao arrastá-la, ela acabará pulando da moldura principal e não fará parte dela Você vê que há uma elipse agora , está apenas saindo sozinho Usaremos essa técnica que usamos antes. Está aqui dentro, o que é bom. Comece a arrastar e segure a barra de espaço e você poderá obtê-la para que ela não saia do controle automático Agora isso vai ser ignorado, mas tudo faz parte da mesma saída automática unificada. Vou brincar com o espaçamento. Eu seleciono esse cara e vou segurar a barra de espaço para que ele não saia. ' vai fazer algo assim. Pegue esta moldura principal. Vou pegar o layout deste lado. Provavelmente faça esse cara um pouco menor. Eu apenas saio um pouco segurando barra de espaço e esse será o meu Pode se transformar em componente agora, ele sai, mas está ignorando a saída automática Isso é fácil. Te vejo no próximo vídeo. 90. Como ignorar o layout automático, mas ainda é responsivo no Figma: Oi, todo mundo. Neste vídeo, vamos pegar algo, essa pastilha aqui no topo Vou fazer com que ele seja responsivo , além de ignorar a saída automática Significa que eu posso arrastar o carro fora e ele vem para a direita. Caso contrário, ele simplesmente fica lá. Está ignorando isso, mas não aparece e não responde Estou aqui para fazer isso. Tudo bem Para começar, fiz uma pequena pastilha. É saída automática. Eu quero que esteja na minha saída automática. E vamos fazer a mesma coisa que fizemos antes: vamos movê-lo para cá, vamos mudá-lo para o posicionamento absoluto. Agora se chama Ignore Auto Lut. O termo é chamado de posicionamento absoluto. Era assim que costumava ser chamado. Se você é um desenvolvedor web designer, você saberá o que isso significa. O mesmo. Ignore a saída automática. Então, estamos ignorando isso. Se a colocarmos aqui, lembre-se, não queremos arrastá-la para fora da moldura, queremos mantê-la na moldura, vamos segurar a barra de espaço enquanto arrastamos , ela pode estar aqui em cima Vou deixar o meu pendurado um pouco e funciona. Está lá, pelo menos. Não se ajusta , não responde. É responsivo. Tudo que eu preciso fazer é selecioná-lo. Você pode ver aqui as linhas pontilhadas? Está tentando se manter no topo e na esquerda. Tudo o que preciso fazer é dizer: Tudo bem, você é o melhor e o direito. Agora, quando eu ajusto meu pequeno Auto alto aqui, olha, vem para a direita. Fácil, fácil Veja como combinamos recursos diferentes. Aí está. É assim que se certifica de que está absolutamente posicionado, ignorado ou permitido, mas também responsivo. É isso mesmo. 91. Como criar um botão de altura de largura mínima no Figma: Oi, pessoal. Vou mostrar como criar um botão de tamanho mínimo e máximo. Este pode ser chamado de carrinho, mas você pode ver que o botão não fica menor, mas pode ficar maior até um certo ponto e não vai ficar mais largo do que eu o configurei. Esse é o tamanho mínimo e máximo. Responder às saídas automáticas. Deixe-me te mostrar como fazer isso. Acabei de começar com um pouco de texto. O Min Max só funcionará quando você estiver na saída automática. Então, eu vou usar Shift A ou autolou. Ei, eu vou colorir , você come lá. Ok, então é um botão colorido, e eu posso digitar para sempre, certo? Então, o que eu preciso fazer é colocar meu texto de volta. Preciso configurá-lo para o mínimo e o máximo. Agora, você precisa fazer isso no quadro externo, não no texto interno. O quadro principal deve ser uma saída automática. Não funcionará com um retângulo Não funcionará apenas com uma moldura simples e antiga Então, com isso selecionado, vou até a largura e posso dizer que gostaria de começar com máximo que quero colocar , sei lá, 140 Você pode ver que é o mais longe possível. Vamos tentar. Tudo bem, então você pode ver, ele simplesmente quebra. Não consigo ficar maior do que isso. Mas, no mínimo, no momento , continuará descendo e se enrolando na parte externa Preciso torná-lo um tamanho mínimo. Novamente, clique no pai e eu vou dizer novamente com a largura, mas eu quero uma largura mínima. E eu quero que a largura mínima seja, digamos 40. Você pode ver a largura mínima lá. Agora, quando eu faço o menor, faço o menor, você pode ver que ele só chega a um certo tamanho. O que você pode fazer é, digamos que eu queira chamar isso de B. Você quer que ele provavelmente fique centralizado nessa caixa para que, quando ficar menor , menor, fique no meio. Depende de você. Eu vou desfazer? Digamos que você tenha botões existentes. Você só quer que esse botão tenha tamanho menor. Você pode clicar no pai. Você pode entrar aqui e, quando estiver com a largura mínima, largura mínima, aqui embaixo, onde diz largura mínima, você pode alterá-la para definir a largura atual, e ela terá esse tamanho. Não consigo ficar menor do que o que você tem bem na sua frente. Lembre-se de que precisa ser um layout automático, não pode ser apenas uma moldura simples e antiga, porque você não a encontrará aqui em Largura Se você está se perguntando como eu fiz aquela sombra projetada, ela está logo abaixo do afixado e você continua Você provavelmente viu isso no modo de velocidade, mas eu apenas aumentei a opacidade para 100 e depois removi o desfoque para zero, e você acaba Eu usei duas abas, duas, e depois pintei. Aí está. É mínimo e máximo. Ótimo para botões, mas você pode usá-lo para qualquer layout automático. 92. Como envolver objetos de layout automático no Figma: Oi, pessoal. Vamos dar uma olhada em algo chamado embrulho dentro de uma saída automática. É muito fácil de fazer e muito útil. Se você tem muitos elementos que só precisam preencher o espaço fornecido. Você pode fazer com que o pai saia automaticamente cima e para baixo e tudo dentro dele será embrulhado. Usando botões aqui, mas podem ser imagens, pode ser o que você quiser. Vamos começar a fazer alguns embrulhos. Para começar, o que eu fiz foi criar apenas um layout automático com algum texto, assim como os botões que criamos várias vezes e eu criei vários. Então, vou selecionar todos eles e colocá-los ou trocá-los, e ele tentará adivinhar o que você quer. Freqüentemente, ele adivinha na horizontal ou na vertical. Este aqui foi usado para tentar colocá-los em uma grade. Examinamos as grades anteriormente Podemos pegar essas molduras e dizer, você vai lá, nós fizemos com imagens. Mas o que queremos fazer não é estar em uma grade. Então, eu quero clicar no quadro principal e eu quero mudar para horizontal. Nesse caso, o padrão era empacotamento. Às vezes não acontece e simplesmente faz isso. Quando eu fiz uma demonstração disso há um segundo, então essa é a opção de embrulho, clique nela Tem que ser uma saída automática, tem que ser horizontal e vertical, e então você pode clicar em embrulhar O que isso significa agora é que, se houver espaço para caber, caberá , e se precisar ficar maior, também caberá. Vou mudar a minha para uma altura automática. Você pode simplesmente clicar duas vezes na parte inferior. Na verdade, não consigo fazer o meu clicar duas vezes para fazer a parte inferior. Só vou dizer que abrace o conteúdo, e isso significa que, se precisar ser redimensionado, todos refluirão e estarão prontos. Isso é embrulho. Você pode ter imagens aqui. Você pode ter essas pequenas pílulas como essas. Eu os chamei de pastilha antes. É uma palavra terrível para eles. Vamos chamá-los de pílulas. Sim, isso é embrulhar o autolout dentro do 93. Como organizar componentes em grupos no Figma: Oi, todo mundo. Neste vídeo, mostrarei como organizar seus componentes no painel Ativos. Ok. No momento, eles estão todos meio que espalhados aqui, e é exatamente onde você tem apenas alguns, mas quando você tem muitos, é ótimo colocá-los nessas pequenas subpastas aqui, para colocá-los nessas pequenas subpastas aqui eu possa dizer: Tudo bem, todos os meus botões estão escondidos nesta Certo. Deixe-me mostrar duas maneiras de fazer isso. Ambos estão igualmente certos, você descobrirá que ambos estão sendo usados na comunidade, então é melhor conhecer os dois. ' está pulando. Ok, então eu abri dois arquivos o arquivo original que criamos com todos os nossos designs móveis e o documento que estamos usando para nossa biblioteca principal, para que todos os nossos componentes sejam usados em outros projetos. É nesse que eu vou trabalhar. Agora, no momento, não há muita coisa acontecendo neste documento. Há apenas alguns botões aqui. Vamos começar com a maneira mais fácil. Vamos às seções aqui embaixo. Então, examinamos as seções anteriores, mas vamos mostrar outro poder oculto delas. Ok, então eu vou para a seção ferramenta. Vou desenhar uma seção ao redor que não funcionou. Vou desenhar uma seção ao redor desses botões. Vou ligar para esta seção. Não use a ferramenta de seção para clicar duas vezes nela. Volte para a ferramenta de movimentação, o Viki. Chama um botão. O bom disso é que tudo dentro daqui agora está nesse subgrupo chamado botões. Dê uma olhada aqui. Não tanto no arquivo em minhas camadas, mas vá para ativos e você pode ver o crédito neste arquivo aqui, existem esses dois botões. Eles ainda não estão em um grupo. Você tem que ligá-lo depois. Por padrão, está desativado. Você pode acessar as configurações da biblioteca aqui e dizer: você também pode mostrar as subpastas É útil quando você tem um documento muito pequeno para desativar as subpastas, porque não há nenhum motivo real. Apertamos dois botões. Mas quando você começa a criar um design mais complexo, e ele rapidamente se transforma em um design complexo, você pode mostrar as pastas e ver, aqui estão meus botões você pode mostrar as pastas meus Eu posso clicar lá dentro. Olha, eu tenho esses dois. Shift S é minha ferramenta de seção. Eu posso arrastá-lo para fora. Quero voltar para minha ferramenta de movimentação, quero chamá-la de meus ícones, e vou até isso, acessar minha página de componentes e extrair alguns ícones dela. Vamos pegar esses caras. Você será cortado e entrará aqui, vou me certificar de atualizar a biblioteca, biblioteca, publicar, publicar, você pode ver aqui agora, tenho uma opção de botões, meus ativos, mas também tenho uma opção de ícones. Obviamente, posso desligá-lo novamente para não mostrar as subpastas e apenas vê-las em uma lista grande e longa O mesmo acontece com os arquivos que o estão usando. Há um arquivo techno de Limerick aqui. Se eu tiver uma moldura nova aqui, vamos emoldurá-la e arrumá-la. Preciso adicionar alguns dos meus ativos. Por padrão, ele está listando apenas tudo. Mas, novamente, quando você começar a criar designs mais complicados, poderá mostrar as subpastas para facilitar o acesso. Preciso de um ícone, posso ir até a pasta Cons e arrastá-la para fora O bom dessa maneira é que, aqui atrás, se eu tiver um ícone que não quero aqui e quero os botões, veja isso, basta arrastá-lo. Agora, se eu ligar isso novamente, está ligado Ok, esse coração está agora na pasta de botões. Portanto, é uma maneira fácil de mover as coisas. Deixe-me mostrar o outro caminho só porque muitas pessoas ainda fazem isso. Eu vou pegar isso. Este é meu principal componente para meus campos. Eu vou cortar isso. Vou colocar isso na minha biblioteca principal. Em vez de colocá-lo dentro de uma seção, você pode simplesmente nomeá-lo. Então, vamos dar a esse nome melhor para começar. Este será meu campo DOB. O que você precisa fazer é, no início do nome, digitar o campo e colocar uma barra Ford Pode ter espaços, não precisa de espaços. Gosto de espaços. Clique sobre isso. Bem, eu adicionei algumas coisas lá. Você vai embora. O que você descobrirá é que, se eu for ao meu painel Ativos, você pode ver que tenho essa pasta de campos aqui. Você acaba no mesmo lugar. A única diferença realmente é que essa é a maneira que tivemos que fazer. Agora você pode fazer isso com seções. Não importa para que lado, mas você vai se deparar com os dois. É por isso que eu queria mostrar não há uma maneira certa achar as seções mais fáceis porque obviamente eu só precisava arrastá-las para dentro. Mas se eu tiver muitos deles, tenho que renomeá-los. Eu posso renomear em massa, então vamos dar um exemplo aqui. Com o FK, vamos criar um monte de Yep. Dê cor a ele. Qualquer cor. Vamos transformá-los em vários componentes principais. Isso é fundamental. Você não pode fazer isso com instâncias. Você tem que ir e encontrar o componente principal, e eu posso fazer minha renomeação em massa agora Eu poderia adicioná-los individualmente, mas posso usar meu comando ou controle R. Posso dizer que gostaria de renomear dois Vou ter uma pasta chamada squares e vou colocar uma barra Ford e depois vou usar o nome atual Estou renomeando todas essas molduras, quadrados como fizemos para a data de nascimento Mas espero que, no meu painel de ativos agora, eu tenha uma pasta compacta. É como mostrar duas maneiras de fazer algo, mas você encontrará as duas, e é útil saber o que diabos está acontecendo Você precisa colocá-los em grupos? Não, mas você chega a um ponto em que, na verdade , você tem muitos desses componentes diferentes e precisa agrupá-los porque está ficando difícil descobrir onde está tudo Tudo bem, então é assim que você organiza seus componentes em grupos no painel de ativos As duas coisas que podem te surpreender é que, se eu pegar isso e partir, você é o componente principal. Não, você pode ver aqui que é apenas um exemplo. Está bem? Então, se eu pegar esse e for até aqui, e eu entrar em um grupo, vamos renomear o Comando Vamos chamá-lo de Ty porque estou ficando sem nomes, Thingi porque é uma instância, você pode ver isso lá em comparação com o componente principal Vá para minha pasta de ativos. Eu não tenho uma pasta This. A outra coisa que te irrita é que você tem que ligá-lo aqui. Caso contrário, você não os verá. Eu vou ficar todo espalhado. Outra coisa que eu queria abordar e mostrar que, se você colocar seções dentro de seções, você tem essa seção aqui chamada componentes. Componentes. O que você descobrirá é que você tem os componentes um, mas não terá esse subgrupo extra de ícones Eles simplesmente não funcionam assim quando você os nomeia, então isso pode ser outra coisa que você encontra Quem quer que seja o pai será o nome do grupo, então você não pode ter seções e seções laterais para esse nome de grupo aqui. Tudo bem, é isso. Vou desfazer isso e nos vemos no próximo vídeo 94. Projeto do curso 20 - Cartão de revisão: Eu sei que você está pedindo por isso. É hora do projeto da aula. Já faz um tempo. Quero que você crie um cartão de avaliação, semelhante ao que estamos criando. Quero que você inclua esses recursos aqui, a ferramenta Largura que sobrepõe estrelas, ignora o objeto de exclusão automática, o botão xmax e os Deixe-me mostrar o que quero dizer, algo assim. Portanto, inclua a ferramenta Largura em algum lugar. Acabei de obtê-lo como parte do autolout, como uma linha divisória que você pode ter como gráfico de Eu não me importo como você faz isso. Seja criativo. Pode ser algo legal em torno disso ou depender de você. Quero que você tenha uma classificação por estrelas e quero que elas se sobreponham apenas porque transformo a minha em um componente e , em seguida, adiciono várias instâncias a um layout automático que eu também possa entrar aqui e desativá-las , se necessário, para classificações e leituras diferentes Mas eu só queria vê-los sobrepostos. Quero ver pelo menos um ignorar a saída automática. Eu tenho um aqui no topo e outro aqui. Eu não me importo com qual deles você faz. Você pode experimentar aquele que é responsivo, mas eu não me importo Desde que haja um que ignore o layout automático, mas ainda faça parte desse quadro, verifique se você tem um botão Min Max. Eu tenho este aqui, ele tem, um tem um Min animax e eu só tenho que ter certeza de que o meu vai daquele lado E então meu texto é escrever uma linha para que, quando eu começar a digitar, ela se mova daquele lado Legal. Além disso, certifique-se de que seus ativos estejam em pastas. Não me importo se está na pasta atual ou na pasta principal, dependendo de quanto você está pronto para arrumar seu projeto Eu quero ver isso acontecendo. Podem ser apenas botões e ícones. Eu também estou bem com isso. Quando terminar, normalmente, compartilhe uma captura de tela do seu cartão de avaliação Tente tirar uma foto em que você tenha os grupos e o cartão de avaliação. Faça algo melhor que o meu. Faça o upload para os projetos da turma e compartilhe-o on-line. Veja se podemos colocar algumas das coisas que aprendemos em ação. Te vejo depois de terminar seu projeto de aula. 95. Como adicionar adicionar condições a variáveis no Figma: Oi, todo mundo. É tempo variável condicional Criamos variáveis mais cedo, lembre-se de que criamos o botão, quando pressionamos mais, ele subia e quando pressionamos menos, ele descia Faremos isso novamente para recapitular, mas também garantiremos que não fique abaixo de zero Ele sobe, sobe, mas depois não pode descer, descer, descer, descer. Essa é a condição. Se for menor que zero, não continue. Também adicionaremos outra condição em que diz: Se você chegar a dez, não suba mais. Olha isso. Elas são chamadas de variáveis condicionais Vamos entrar e fazer. Certo. Para começar, acabei de criar um novo arquivo de design. Chama-se Sem título, e eu arrastei meus botões, e há um pouco de texto aqui no meio para os números É só um documento novo. Vamos recapitular como criamos as variáveis anteriormente porque preciso recapitular porque foi há muito tempo, provavelmente você Vamos criar as variáveis primeiro. Não vamos selecionar nada. Vá até aqui. Variáveis. Vamos clicar nessa pequena opção. Vamos criar um e vamos criar uma variável numérica. Vamos chamar isso de um total e definiremos o valor como cinco apenas para sabermos que o aplicamos corretamente. Então, vamos aplicar essa variável ao número e aqui. Clique na caixa numérica e, no design na parte superior aqui, você verá este botão de aplicar variável. Vamos clicar nisso. Qual variável queremos aplicar? Vamos ao total. Agora eles estão conectados. Então, cinco não é o que eu quero. Vou voltar para zero, mas sabemos que funciona. Vamos fechar isso agora. Agora precisamos desses botões para alterar essa variável. Vamos fazer o plus. Vamos clicar nesse e vamos até aqui, onde está? É um protótipo opções oito e nove alternam entre design e protótipo Esse é o único salto que é um pouco estranho. Portanto, certifique-se de estar no protótipo. adicionar interação a esse botão. No toque, o que eu queria fazer. Eu não quero ir para uma página. Eu gostaria de definir uma variável. Qual variável? Total. Eu só tenho um. É escrever uma expressão. Quando esse botão é clicado, eu gostaria de pegar o total e adicionar um a ele Acabei de digitar um no meu teclado e isso deve funcionar. Estou apenas clicando em segundo plano, na barra de espaço Shift, e isso deve funcionar. Vamos fazer o mesmo por menos. Digamos que, sob o protótipo Vamos adicionar interação. Ao tocar, eu gostaria que essa coisa definisse uma variável. Qual variável? Eu já tenho um? Eu gostaria que fosse expressado. Essa é a única coisa que você tem que fazer duas vezes. Procurando subtrair. Você tem que dizer, na verdade, eu quero que o total seja subtraído, e eu quero que seja submetido a Em segundo plano, vamos ver se funciona. Mude a barra de espaço, para cima, para cima, para baixo, para baixo, para baixo. Mas vai para baixo para baixo, pai. É aqui que as condições são úteis. O que eu vou dizer é esse aqui. Você pode fazer isso aqui ou aqui embaixo. Eu vou dizer que não quero definir uma variável. Vou mudar isso para uma condição. Agora, uma condição é como um fluxograma. Você pode ver um pequeno ícone lá. Um fluxograma, sim, não, e você segue direções diferentes. É o mesmo aqui para essa condição. O que vai dizer é que, se isso for verdade, faça isso. Se não for verdade, faça isso. Se o que for verdade, vamos clicar para escrever nossa condição. Eu vou dizer que se o total for menor que zero, oh, se for maior que zero. Se for maior que zero, eu gostaria que fosse menos um porque substituímos a variável original, completamente sumida Então, vamos dizer que se for maior que zero, eu gostaria de definir a variável. Eu gostaria de pegar o total, que é nossa meta, e eu gostaria pegar o total e gostaria de menos um Então, a mesma coisa que fizemos antes, mas agora está nesta declaração que diz: Se for maior que zero, faça isso. Se não for, não faça nada. Se não for maior que zero, não fique desligando Vamos dar uma chance. Isso funciona? Mude o espaço. Ok, de cima para cima, baixo para baixo para baixo, da, da, da. Pára de funcionar. Olhe para nós. Somos programadores de hackers de computador. Se você é um desenvolvedor assistindo isso, muitos desenvolvedores aprimoram suas habilidades de figma e sabem como os designers trabalham Você vai rir da minha terminologia e da minha empolgação em minha terminologia e da minha empolgação fazer algo tão Como não sou muito bom desenvolvedor ou programador, estou muito empolgado. Você pode ser como eu. Vamos fazer mais uma, e conversamos sobre isso porque eu quero dizer que não vai abaixo de zero, mas não pode ir acima de dez. Digamos que as pessoas não possam comprar mais do que dez ingressos. Então, vamos dizer que vamos entrar aqui. Está bem? Nós temos essa coisa configurada. Nós vamos nos livrar disso. Vamos dizer que, na verdade, eu não quero definir uma variável, vou definir uma condição. Eu gostaria que a condição fosse definida em dois no total. Se o total for o quê? Se o total for menor que dez, quero que funcione. O que eu quero trabalhar. Então, se o total for menor que dez, eu quero que você faça isso. Quero que você defina a variável no total, que é a meta, e quero que o total tenha uma adicionada a ela. Eu quero adicionar um. Isso é tudo o que fizemos quando começamos o vídeo. Mas agora está nessa condição. Só vai funcionar se o número for menor que dez. Se for maior que dez, eu quero que você não faça nada, por favor. Eu não quero que você trabalhe. Vamos dar uma chance. Vá lá, funciona e fica às dez. Se você não é um programador hardcore, há um pouco de brincadeira e tentativa de descobrir menos que, menos que igual a, maior Mas espero que tenha lhe dado uma boa visão das condições, uma forma de estender as variáveis, especialmente as desvantagens É uma ótima maneira de estender variáveis e há 1 milhão de outras coisas que você pode fazer com variáveis, basicamente toda a codificação Mas espero que eles forneçam uma boa visão do que as pessoas estão fazendo, outras pessoas podem ter feito por você ou criando suas próprias variáveis com condições Agora, sou bastante visual. Eu não consigo ver essas coisas e ir embora, eu sei que isso está acontecendo. Eu tenho que ir, eu tenho uma variável. Se for total, e então eu aponto para ela, há uma variável que eu coloquei no zero aqui Se o total for menor que e eu tiver que fazer minhas mãos com o jacaré, menos de dez, faça essa coisa. O que é essa coisa? Quero encontrar o total, depois pegar esse total e adicionar mais um a ele. De qualquer forma, espero que tenha sido útil. Eu deveria ter parado aí, certo? Algumas pessoas acharão isso fácil. Então, as pessoas vão achar isso difícil. Estou no meio. Eu me sinto um gênio quando faço isso funcionar, mas nem sempre consigo fazer funcionar na primeira vez Você estará em algum lugar ao longo desse espectro. Tudo bem, são variáveis condicionais dentro do Figma. 96. Transformando nossa variável booleana para falso no Figma: Todo mundo. Neste vídeo, veremos outra variável. Vamos examinar algo chamado variável de ouro É um nome chique para ligado ou desligado, verdadeiro ou falso. O que vamos fazer é clicar em Mais sobre isso e observar o ícone do cartão que está atualmente definido como falso como vazio. Se eu clicar em Mais. Olha, isso mostra que você tem algo em seu carrinho. Calças chiques Vamos começar e mostrar como fazer com uma variável de ouro dentro de lingote seja uma palavra difícil de dizer e muito estranha . Vamos começar. Tudo bem. Para começar, encontrei o ícone de um carrinho de compras e o coloquei em um círculo. É isso mesmo. Eu uso o iconify e pego qualquer coisa antiga do carrinho de compras e transformei qualquer coisa antiga do carrinho de compras e isso no vetor com a elipse Eu me livrei da moldura em que estava . Agora fazemos isso agora. Precisamos ter um componente. Então, vou selecionar os dois, transformá-los em componente, opção de comando K, controle OK. Vamos dar um nome a ele. Vamos chamar isso de meu carrinho e precisamos de duas variantes. Portanto, um booleano alternará entre apenas dois. Tem que estar ligado ou desligado. Verdadeiro ou falso. Essa aqui, eu vou colorir você de oito. Tudo bem. Bem, demorei mais do que eu esperava, mas temos duas variantes, não variáveis. Fizemos isso mais cedo. Temos um componente, há apenas duas variantes dele. Eu tenho um que parece estar vazio e outro que parece estar cheio. Vamos nomeá-los. Vamos clicar nesse primeiro aqui. Temos que nomeá-los corretamente. Você não pode chamar isso de vazio. Você tem que chamar isso de falso. Como em Posso soletrar falso? Aí está. O carrinho é falso. Não está vazio. Essa aqui vamos chamar de verdadeira. Oh, a ortografia é importante. Boolean é verdadeiro ou falso. Vamos arrastar uma instância disso, e é isso que vamos alternar Agora, o que precisamos fazer é criar uma variável. Lembre-se, nada selecionado na visualização de design, vá para variáveis. Nós já temos um. Eu vou criar outro. Vai ser o número um. Na verdade, não vai ser o número um. Vou criar outro chamado Boolean. Você pode continuar chamando isso de Bullion. Você deve fazer algo como o indicador do carrinho. Você verá muitas vezes o que é a caixa de camelo. O primeiro é minúsculo e os que estão entre maiúsculas. Coisa indicadora de carrinho. Isso é Camel Case Eu nunca uso estojo de camelo porque você poderia simplesmente fazer um carrinho. Eu faço coisas como “O carrinho está cheio”. Se você quiser ser melhor, as pessoas usam sublinhados. Não vou fazer nada disso. Porque você não é meu chefe e não precisa da Figma Se você estiver codificando isso corretamente, precisará usar sublinhados, hífens De qualquer forma, criamos essa variável. Não é aplicado a nada, então vamos aplicá-lo a alguma coisa. Então você vai ser essa variável. Onde você faz isso? Por aqui? Está um pouco escondido porque está lá. A instância do carrinho. Aí está minha pequena alavanca, o que é legal. Já fizemos isso antes. membro, verdadeiro ou falso, fornece essa pequena alternância e aqui você pode aplicar essa variável Quero dizer que o carrinho está cheio quando aplicado a isso. Para controlá-lo. O que usamos para ativá-lo Vamos usar esse botão. Vamos dizer que vamos abrir nossas variáveis, que lembramos que estão no modo protótipo Eu já tenho um. Eu clico aqui e subo um pouco. Vou adicionar um segundo. É outra condição. Porque o que eu vou dizer é que se o total for maior que zero, eu quero que ele faça alguma coisa. O que eu quero fazer? Eu quero fazer essa ação. Essa ação aqui vai definir essa variável, qual variável, a variável cheia do carrinho, que é essa coisa aqui, eu quero que ela a defina como verdadeira. Muito obrigado. Apenas experimente. Veja se funciona. Shift plus. Se isso for maior que zero, isso deve fazer com que isso seja verdade. E é verdade. Oh, eu estou tão feliz comigo mesma, ok? E o que vou fazer, porém, é deixá-lo lá quando chegar a zero, não está funcionando. Vou fazer você fazer isso. O que vou fazer é definir você como um pequeno mini-projeto. Não será um projeto completo como fizemos. Eu só quero que você vá, veja se consegue fazer que fique falso quando ficar abaixo de zero, na verdade, para zero ou abaixo. Vá você mesmo, veja se você pode fazer isso. Deixe-me saber nos comentários, se você fez isso. Mesmo que você não tenha feito isso, me avise se for muito difícil, só estou interessado. No próximo vídeo, mostrarei como fiz isso para que você possa comparar as notas. Se você fez isso, pule. Você é um hacker de computador Se você já é desenvolvedor, pode revirar os olhos ao ver como isso é fácil. Mas se você é como eu e fica realmente empolgado em programar coisas, pule por aí Deixe-me saber nos comentários como você está encontrando variáveis. Experimente e te vejo no próximo vídeo. 97. Variável booleana — concluída: Tudo bem. No último vídeo, mostramos o carrinho ficando cheio, mas não conseguimos desligá-lo. Mas neste vídeo, vou mostrar como consegui desligá-lo. Caso você não consiga caso queira comparar notas. Se você fez isso funcionar. Tudo bem, vamos Tudo bem, espero que tenha corrido bem no último vídeo. Faremos isso juntos, caso você não tenha entendido ou queira apenas comparar notas. Ok, então vamos fazer isso com esse sinal negativo. Queremos desligar isso. Queremos voltar ao vazio. Então, vamos dizer que vamos adicionar outra condição fazendo isso aqui. Ok, vamos dizer, eu quero uma condição que diga, nossa condição vai ser? Se o total for igual a zero, quero que você faça alguma coisa. Zero, eu quero que você faça essa ação. Que ação? Eu vou dizer a variável? Que tipo de variável eu quero ver? O carrinho está cheio? Não está cheio. É falso. Vamos tentar. Isso funcionou? Conecte para cima, para cima, para baixo para baixo. Sim, nós fizemos isso. Tenho certeza de que você também fez isso. Se sente bem? Eu me sinto bem. De qualquer forma, isso era possível e você tem que olhar para as coisas que está fazendo agora Você olha para isso e diz, Bem, olha o que eu fiz. Eu fiz isso. Não é muito, mas essas pequenas interações podem realmente fazer seu protótipo funcionar quando você está tentando vender ideias para clientes e mostrar ao desenvolvedor como você imagina esse tipo de protótipo funcionando antes de ele começar a construí-lo Tudo bem, eu me sinto bem. Espero que você esteja orgulhoso de si mesmo por fazer algumas variáveis com condições e lingotes Olhe para nós. Te vejo no próximo vídeo. 98. Como fazer uma sobreposição pop-up no painel de ação variável no Figma: Olá. Vamos ver abrir um modelo quando atingirmos o sinal positivo, dizendo: Olha, adicionamos ao carrinho e, depois de algum tempo, ele desaparece Não é bem uma variável, embora estejamos na seção de variáveis, mas eu queria mostrar como fiquei confusa e sei que faz sentido nesta parte do vídeo. Vamos começar e criar uma variável não na classe de variáveis. Em primeiro lugar, vamos estar no modo protótipo para fazer tudo isso funcionar Temos algumas variáveis aplicadas a esses botões. Um monte de coisas acontecendo. O que você pode fazer é Quando eu estava vendo isso pela primeira vez, quando eles introduziram, pensei: A, podemos adicionar uma variável que faz sobreposições Na verdade, não. Não estamos fazendo nada variável. O que estamos fazendo é trabalhar com o on tap. Essas variáveis, o que estamos adicionando, não são. Fizemos pop-ups no curso básico. O que vamos fazer é dizer, eu gostaria que, quando isso fosse tocado, esqueça todas essas coisas. Eu só queria fazer algo separadamente. Eu quero fazer uma ação. Eu não quero definir uma variável. Eu só quero abrir uma sobreposição. Aqui, não estamos fazendo variáveis, embora pareça que estamos fazendo isso porque estamos na mesma janela para mover isso para cima. Eu vou dizer que quando isso for tocado, eu gostaria de abrir uma sobreposição, sobreposição , eu só tenho Eu o transformei no botão do sucesso . Isso está aqui, eu fiz. Eu dei um nome a ele, e o que eu quero fazer com ele? Eu quero que apareça na posição. Vou pegar e não mandar. Eu quero colocá-lo manualmente em algum lugar. Eu vou dizer que está sempre no caminho até lá. Quero que apareça aqui embaixo, compre meu rodapé. Ele aparecerá próximo ao clicar do lado de fora. Em que animação, vou fazer com que ela se dissolva depois de qualquer desdobramento Aqui, ele apareceu entre minhas duas variáveis separadas. Não se preocupe com isso. Você pode arrastá-los. Você não pode arrastá-los. Você costumava arrastá-los e também fechá-los, para poder vê-los um pouco mais de facilidade, tudo bem. Duas variáveis se aplicam a esse botão, mas separadamente, acabamos de experimentar essas sobreposições abertas Quando esse botão é clicado, vamos tentar. Eu deveria fazer o número, ele deveria mudar o carrinho e deveria ter essa pequena métrica de sucesso aqui embaixo, adicionada ao carrinho. Quando eu clico no fundo, ele se dissolve. Um pouco mais sofisticado e vamos fazer com que esse botão se dissolva Portanto, não precisamos clicar no plano de fundo, se dissolve após um tempo O que podemos fazer aqui é clicar em nosso botão e adicionar uma interação. Então, protótipo Vamos adicionar uma interação e, digamos, depois de um atraso de quanto tempo? Não sei, 1,5 segundos. Eu gostaria que ele fechasse a sobreposição. Vamos dar uma chance. Adicione uma barra de espaço e, em seguida, espere, espere, espere, espere um minuto e meio Ela desaparece sozinha. Obviamente, pratique você mesmo a opção de remover do carrinho. Então você precisa de outro botão e veja se consegue fazer essa lógica funcionar aqui. Eu não vou fazer isso sozinho no próximo vídeo. Eu sinto que você tem isso. Dê uma chance. Deixe-me saber nos comentários. Você entendeu isso? Se você tiver problemas, deixe-os nos comentários e eu ou um dos especialistas entraremos e o ajudaremos. Acho que quero adicionar isso a essa seção de variáveis, embora não estejamos criando uma variável porque, quando vi esse recurso pela primeira vez, pensei: Estamos criando uma variável? Nós não somos. Estamos apenas adicionando outra ação ao nosso toque. Isso não é uma variável, mas está tudo misturado. Eu resolvi isso, tudo fez um pouco mais de sentido. Tudo bem, espero que tenha feito sentido para você. Te vejo no próximo vídeo. 99. Como alterar o espaçamento com variáveis de número no Figma: Tudo bem, pessoal, vamos analisar outra variável Basicamente, vamos usar variáveis para espaçamento. Veja isso. Eu vou dizer que você não está confortável, você vai ser compacto e isso reduz todo o espaçamento por aqui, confortável Você pode ver que também podemos usar variáveis para espaçamento. Fizemos isso mais cedo, quando fizemos o modo escuro. Você pode criar esses designs realmente atraentes e diferentes, com muitas alterações diferentes que são feitas apenas com o toque de um Neste vídeo, eu vou me perder um pouco. Vou incluí-lo no curso porque você também se perderá. O que eu quero focar neste vídeo é apenas jogar com um espaçamento. Isso não é tão difícil. De alguma forma, eu dificulto as coisas neste vídeo ao ficar quebrado, perdido, conserto tudo juntos e todos nós ficaremos mais sábios Vamos começar. Tudo bem, para começar. Eu só queria mostrar a vocês o que fizemos no início do curso, quando fizemos o modo claro e o modo escuro. Lembre-se que fizemos isso e pudemos ir de onde estão as coisas coloridas do modo claro para o modo escuro. É muito parecido com isso. Você não precisa aplicar o modo claro e o modo escuro, mas vou voltar para aquele arquivo específico que fiz de volta ao nosso documento principal e fazer meu espaçamento nele Para começar, eu só tenho um monte de caixas de texto e uma pequena imagem por aí. O que eu quero fazer é transformá-lo em um layout automático. Eu quero transformá-los em um layout automático, Shift A, e então eu combino esses dois, a saída automática e esta imagem em um dia de turno de saída automática Há um ninho de Auto aqui porque eu quero brincar com o espaço entre esses dois e o espaço entre esses dois aqui. É aos espaçamentos que eu quero aplicar variáveis. Não vamos selecionar nada. Vamos entrar em variáveis. Nós já temos um. Você pode não, mas eu tenho esse chamado material colorido. Vamos fazer um novo. Eu vou dizer que vamos fazer uma cobrança de crédito. Vou chamar isso , não coleção. Vou chamar isso de espaçamento. OK. E aqui, vou criar minha primeira variável. Vai ser uma variável numérica, e temos algumas coisas. aqui, quando fazemos com espaçamento, geralmente não usamos números, usamos palavras como palavras do Tissuet. Usamos pequenas, médias, esse tipo de coisa. Vou começar com o médio. Você pode escrever a palavra média completa. Isso não importa. É muito comum na web usar MD para meu tamanho médio, eu quero ter cerca de 16 anos. Não é muito grande, não é muito pequeno. É médio. O que eu quero fazer é querer dois modos. Esse primeiro modo aqui será chamado de compacto. Uma pequena nota lateral aqui. Se você ouvir muitos sussurros e coisas batendo, eu tenho dois gatinhos novos e eles estão atacando tudo no escritório e eles têm que estar aqui porque eu estou estar aqui porque eu Ignore o farfalhar. Acontece que eu gosto de gatos. Nós temos o compacto e seria comum ter outro modo chamado confortável. Vamos chamá-lo de confortável. Ba, é mais curto. Você pode chamar isso de celular e desktop. Desktop, você tem mais espaço, então você pode tornar o meio um pouco maior quando estiver no desktop. Você pode renomear isso É muito comum ter um espaço compacto e confortável, bem como para espaçamento. Você pode ter se deparado com isso em suas viagens. médio em um dispositivo pequeno ou compacto será 16, mas temos mais espaço; o médio, na verdade, será um pouco maior. Vamos tentar e aplicar. Vamos creditar nossas variáveis. Vamos aplicá-lo. Vamos fazer isso com o espaçamento aqui. Esse espaçamento aqui entre esse título aqui e o texto, eu quero ser médio Você não pode usar isso no momento para aplicar a variável. Você tem que fazer exatamente o mesmo ícone aqui. A lacuna é a mesma que a lacuna ali. Mas neste, para obter o menu suspenso, podemos dizer: eu gostaria de aplicar uma variável, qual delas, eu gostaria de aplicar meu espaçamento de média a ela Eu quero que talvez o espaçamento entre isso também seja médio Eu quero que você não tenha 18 18 anos, eu quero que você seja uma variável de médio porte. Ambos separados por 16 pixels. O legal disso é que eu não digitei 16 agora. Eu digitei em médio. Isso significa que posso dizer a esse pai aqui que o padrão é qualquer que seja a primeira de suas variáveis O padrão é 16 porque é o primeiro na lista. O que posso dizer, porém, é que essa coisa aqui, tínhamos o modo claro e escuro, talvez você não tivesse isso. Podemos adicionar outro para dizer: quero que o espaçamento seja compacto, o que não mudará nada porque é o padrão porque é o primeiro, está em Automático Eu vou dizer isso para ser confortável. Olha isso. Tudo muda. Tudo muda. Além disso, podemos passar do modo leve para o modo compacto. Vá lá. Oh, eu adoro combinar essas coisas. Então, vamos analisar um pouco mais. Vou voltar ao modo escuro. Vou voltar ao compacto. Isso é bom. Vamos preencher algumas das outras variáveis. Isso é mais do mesmo. Eu só quero te mostrar. Você deve analisar e criar todas as suas variáveis de cores diferentes, desculpe, todas as suas variáveis numéricas. Você deve fazer um pequeno Ok, você deve ir até o fim e torná-lo ainda mais pequeno. Obviamente, é grande, extra grande. Esses são os tamanhos normais que você usa. Obviamente, você pode criar o que quiser. Então, em um dispositivo pequeno, eu gostaria que fossem seis. Desculpe, não é um dispositivo pequeno. Em um dispositivo compacto, eu gostaria que o espaçamento pequeno fosse oito e o confortável fosse 16, expandindo um pouco o pequeno Extremamente pequeno, é reduzido para quatro. E sempre que eu uso um espaçamento extra pequeno, ok? Quando é confortável, diminui para oito. Você deve preencher os outros. Eu não vou. O legal disso é que eu só apliquei meio em todos os lugares, e essa lacuna é muito grande. Está bem? Então, o que eu quero dizer é que, quando estou lidando com isso, sim, o tamanho médio é um bom tamanho para isso O tamanho entre esses dois, posso clicar nele? Eu não posso. Vou clicar na caixa principal. Clique duas vezes nele. Lá vamos nós. Eu quero que não seja 16. Você pode ver o que acontece? Está em um tipo de caixa estranha. Isso significa que uma variável meio que diz o que fazer. Não é 16, na verdade é médio, que é 16. Oh, cara, estou confundindo todo mundo. Vá e mude isso. Digamos eu queira aplicar a variável a uma variável que não seja média, quero que ela seja muito pequena. Em um modo compacto, decidimos que extra pequeno é quatro, mas em um modo confortável, é oito Começando com quatro, como eu gosto. Mas se eu disser que, na verdade, vocês estão todos confortáveis agora, aquele pequeno é um pouco maior Você entendeu a ideia? Isso significa que se eu excluir esses e eu for para este e aplicar minha variável de Tudo bem, eu volto. Você me viu me perdendo lá. Porque eu estava tipo, “Tudo bem”. Porque eu ia mostrar que deletamos o texto, vamos dizer: Tudo bem, vamos até aqui e vamos nos inscrever Espaçamento. Não está aqui. Eu estava tipo, eu deletei coisas, eu mudei coisas. Eu até reiniciei o Fgment e fiquei tipo, talvez, é isso. Acontece que isso não se aplicará se não houver nada lá dentro com o espaçamento aplicado a ele Então, eu apliquei um meio extra pequeno. Então, aqui, como isso não está neste documento, não posso aplicar meus conjuntos de variáveis. Porque está em coisas de boa cor. Mas se eu pegar você, duplique-os. Eu digo, esse pai agora tem espaçamento porque não tinha espaçamento antes Eu não gosto disso. Mas agora você sabe, nós dois sabemos. Vou adicionar espaçamento e vou dizer que está configurado para ser confortável Claro, podemos dizer que eu também quero desligar meu modo claro e escuro , pensando que esse era o problema. Posso alterná-lo do modo escuro e quero que seja compacto. Olhe para nós, usando variáveis para espaçamento. Foi um bom vídeo? Preciso regravar este? Eu não sei Gosto que tenhamos nos perdido e descoberto isso juntos. Eu acho que isso é importante. Eu quero te mostrar uma última coisa é que temos esse layout automático aqui Vamos mudar a cor do plano de fundo porque quero mostrar como os preenchimentos são aplicados em termos de uma variável É um pouco diferente. Vamos dar uma cor de preenchimento para que possamos ver o que está acontecendo. Não é dessa cor. Qualquer cor verde. Isso vai ser bom. Então esta é minha saída automática. Eu quero adicionar um pouco de preenchimento ao redor dele. Eu vou dizer, você pode ver aqui, eu posso digitar 16. Opa. Não há uma lista suspensa como esta aqui para dizer aplicar variável. Você faz isso de forma um pouco diferente, e é isso que eu queria te mostrar. Você pode ver lá? É exatamente o mesmo pequeno ícone variável que vimos por todo o lugar. R, e podemos fazer a mesma coisa. Aplique o meio, que é 16. A, esse aqui, médio, que é 16, e vai funcionar. Digamos que isso tenha o espaçamento de compacto. Esse é o padrão. Vamos ficar confortáveis e o acolchoamento fica maior Há algumas coisas erradas com isso. Não tem nada a ver com as variáveis. Vamos corrigir isso agora. Mas acho que só queria recapitular que podemos usar o espaçamento Criamos variáveis para espaçamento. Nós os nomeamos e tínhamos dois modos diferentes entre os quais podemos alternar. O que fizemos antes foi fazer isso com cores em dois modos diferentes, modo claro e modo escuro. Fomos e depois o aplicamos. Para cor, foi com a cor de preenchimento. Livre-se disso. Podemos dizer preencha a cor com Oh, não, e aqui eu quero preenchê-la com aquela variável de interface que criamos. Já quando estamos fazendo espaçamento, encontramos o espaçamento com o qual queremos mexer. Encontraremos pelo menos a caixa principal com a qual queremos mexer Você pode fazer isso no menu suspenso de alguns deles e alguns deles têm esse pequeno ícone de variável. Tudo bem, é isso. Quero deixar você aí porque, com espaçamento, você pode decidir qual é o espaçamento e quais tamanhos diferentes eles são confortáveis e compactos Você também percebe que isso não funcionou. Vamos consertar isso agora. Algo completamente separado. Vamos fazer uma pausa e respirar fundo. Algo errado com isso. Eu sei o que é. Minha saída automática está configurada para a parte superior e para nada mais. Acho que sim ou a esquerda. O que vamos fazer é dizer que as restrições estão caindo, vamos colocá-las de volta no modo compacto Vamos sentar aí. Vamos colocar isso no meio para que, quando ficar confortável, se empurre e não pule para a direita O topo e a esquerda não são o que queremos. Queremos ir aqui e dizer esquerda e direita e superior e inferior. Já fizemos isso antes. As restrições. Vamos dar uma chance. Provavelmente ainda não vai funcionar. Vamos para o modo confortável. A caixa não ficou maior, o espaçamento mudou, mas vai ficar um pouco preso nas laterais O que há de errado com eles? Volte ao compacto. É essa caixa de texto aqui. Bem, na verdade, a saída automática que está neste lado direito aqui está configurada para uma largura fixa. Portanto, é uma largura fixa de 230. Então, quando adicionamos mais preenchimento, ele não sabe para onde ir. Dizemos: encha o recipiente em que você está. Incrível. Isso vai funcionar. Vamos aqui. C você pode ver que funcionou na largura. Encha o recipiente em que está, basta empurrar um pouco para baixo. Desfazer, refazer, mas não funcionou na parte inferior. Basicamente, é a mesma coisa, vai acontecer aqui. Vamos descobrir se a altura disso está configurada para abraçar. Isso é bom. É essa caixa de texto dentro dela. Às vezes, é o pai completo. Às vezes, é a caixa de pedidos que está dentro da caixa de texto e, às vezes, é essa caixa de texto Essa caixa de texto tem uma largura de preenchimento, tudo bem. Uma altura de abraço. Tudo bem, então não é ele. Vamos pegar o Aout em que ele está, e ele tem um grande conteúdo Vamos fazer com que ele encha o recipiente e vamos tentar. Você está pronto para ficar confortável. Isso ainda não funcionou. O que estou fazendo de errado? Você faz uma pausa e vê o que estou fazendo de errado. Oh, é alguma coisa. Oh, é o pai de tudo. É esse cara, olha, suas alturas em altura fixa. Ah, as alegrias da figma, mas sabemos como consertá-la. Não podemos sobreviver. É isso? É isso? Está bem? Bem, espero que seja isso. Vamos abraçar o conteúdo. E agora vamos tentar. Sim. Estamos fazendo isso. Confortável e compacto E tudo se redimensiona bem. Olhe para nós. Nós fizemos isso. Vou fingir que não estava perdido, mas estava totalmente perdido Quando começamos a combinar muitas coisas diferentes, variáveis e layouts de pedidos e, em seguida, espaçamentos variáveis, pode ficar um pouco complicado, não se preocupe Esses são os gatos. Eles distraem bastante. Trabalhe até o fim. É isso? É isso? Talvez não seja isso. Faça muitos testes e você descobrirá e ficará melhor no figma Assim como eu e sem se perder. Tudo isso é tudo. Fizemos espaçamento para variáveis Te vejo no próximo vídeo. 100. Tornando seus designs acessíveis - um guia do plugin de acessibilidade no Figma: Oi, todo mundo. Este vídeo vai falar sobre acessibilidade. Basicamente, garantir que nossos designs possam ser usados por pessoas com deficiência visual, talvez daltônicas. Aqui, vamos nos concentrar em algumas áreas principais. Vamos ver a fonte, o tamanho, o peso e a cor dela. Quanto contraste existe entre a fonte e o plano de fundo? Também analisaremos os pontos de contato. É fácil clicar nos botões? que distância eles estão? Tudo se resume a algo chamado acessibilidade. Muitas vezes, são coisas fáceis de implementar e, depois de fazer algumas delas, você pode simplesmente fazê-las naturalmente à medida que avança e cria projetos. Vamos examiná-los agora, tanto os integrados do Figma quanto alguns plug-ins Vamos ser um pouco confusos, porque não me sinto altamente qualificado para ensinar essa parte, mas eu faço isso, precisamos fazer isso Vou lhe dar o conhecimento que tenho até agora e abrir a ideia para você sair e olhar mais longe. Vamos começar. Tudo bem. Há algumas peças incorporadas ao Figma e algumas partes para as quais usaremos um plug-in Vamos dar uma olhada nos bits embutidos no Figman, ver os contrastes de cores para começar Vamos escolher um fácil e vamos escolher um dos nossos títulos. Vamos escolher esse aqui. Então, aqui, ele pode ser lido em segundo plano? Sim, vou dizer que podemos verificar, porém, com a opção selecionada aqui, podemos ir para nossa cor, nossa cor completa para o texto, e vamos mudar para a cor personalizada. Não vamos quebrar a biblioteca, vamos apenas verificar. Ele ultrapassa as taxas de contraste Essas são essas opções aqui Você pode ligar e desligar clicando neste botão. Basicamente, estamos procurando uma proporção. Basicamente, ele analisará a diferença entre o primeiro plano e o plano Nesse caso, é a cor da fonte com o fundo, eu tenho um cinza esbranquiçado. Esse aqui passa. Como isso passa? Deixe-me voltar ao costume, verifique se está ligado. Eu posso ver isso lá. Tem um carrapato ao lado do AA. AA é o nível básico padrão. Você pode aumentar isso até, digamos, o AA, as garotas mais altas Olhando para um contraste muito alto. Também passa nessa, o que é ótimo. Eu desenhei para este aqui. Ele está procurando um nível básico de três para um. Então você pode ver aqui que é de seis para um, muito alto. Se eu escolher uma fonte diferente como essa, é de um para um ou 1,3 para um. Ou você pode chegar a algum lugar onde é como se eu estivesse perto, mas você ainda estivesse falhando O legal disso, porém, é dizer que você tem uma fonte aqui e é da cor errada. Você pode clicar aqui. Você pode ver que vai pular até aqui e ver essa banda. Qualquer coisa abaixo aqui é boa. Você pode escolher qualquer uma das cores que quiser , desde que esteja abaixo dessa curva. Isso realmente depende de seu histórico. Vamos pegar o mesmo título movê-lo para cá. É no deserto Não pode estar escuro porque os fundos são escuros. Novamente, a taxa de contraste aqui é de 1,5 para um, precisa ser de três para um ou mais. Mais uma vez, eu posso clicar sobre isso. Isso traz isso à tona. Eu posso estar em qualquer lugar nesta zona para passar no teste. Adoro como a Figment implementou isso. É super fácil. Você coloca isso de volta. Vamos dar uma olhada em algumas outras opções sobre coisas que me preocupam. Estou preocupado que isso não funcione. Eu cliquei no meu botão. Eu vou descer até aqui. Vou dar uma olhada no derrame. Então, dê uma olhada no traço e você pode ver aqui, está simplesmente desligado. Então, não vai funcionar. Vou clicar nisso, soltá-lo e descobrir que, na verdade, está tudo bem. O que eu também poderia fazer é, na verdade, em vez de ajustar a fonte ou a cor, eu poderia entrar aqui e realmente escolher, eu tenho algumas cores da biblioteca Membro, fizemos 500. Bem, 500 funcionam. Vamos fazer um cheque. Personalizado. Se não aparecer, às vezes você precisa clicar na coisa certa. Vou clicar no meu traçado aqui e depois ir para personalizado. Eu passei para as cores selecionadas lá. Eu fiz o derrame real desta vez e ele passa. Incrível. Eu só vou usar o 500 em vez de qualquer cor aleatória que eu estava usando lá. O mesmo com isso, não vai passar. Em vez de apenas usar essa pequena opção aqui, vou dizer: na verdade, vá até minhas bibliotecas e eu vou usar a 500 e devemos estar sob o comando de Phil, certifique-se de que esteja ligada. Não estamos passando A. Por que não está passando, mesmo que o derrame tenha sido? É assim que parecemos. Vamos para a personalização. O que ele vai fazer é escolher essas pequenas opções aqui. Está me mostrando que isso é apenas um texto normal. Com esse tamanho e peso, não está passando. O texto normal é diferente dos textos grandes. Fizemos isso anteriormente, escolhemos a mesma cor, mas como é um texto grande, tudo bem. Quando chega ao texto normal, ou texto pequeno, que é 16, ele sabe. É verdade que a taxa de contraste realmente precisa ser maior. Ela olha. Diz que precisa ser, o que precisa ser? Solo, ele precisa ser de 4,5 para um. Às vezes, você pode contornar isso usando uma fonte mais pesada. Não podemos fazer isso porque já estamos em negrito. Para atingir minha marca AA, vou trocá-la para 700 do meu verde. Lá vamos nós. Espero que agora, como texto normal, aí está. É perfeito. Vamos dar uma olhada em algumas outras opções. Dê uma olhada em alguns problemas. Eu entendi isso como um projeto que fiz anteriormente, e o que você vai descobrir é, digamos que esse texto aqui, o que é isso? Isso é 18 e isso é 14. Existem algumas regras básicas quando se trata de texto e de onde vêm as regras? É esse site feio. É do site w3.org e se chama WCAG No momento, 2.2 é o atual. Eles estão redigindo o terceiro. Dê uma olhada quando chegar lá. O que eu faço quando preciso encontrar esta página, porque é muito difícil de encontrar, é digitar WIAG e inserir referência rápida e ela chegará à mais recente Depois, você pode entrar em um pouco mais de detalhes. O que eu acabo fazendo quando venho a esses sites é que sou muito avassaladora Se eu for para contrastar e apenas pesquisar na página, você pode ver aqui para mostrar a descrição completa. Você pode dizer que um texto grande precisa ser 3.1 e tipos de logotipo. Olha isso. Não precisa de nenhum requisito de colocandra Os logotipos recebem uma isenção, texto incidental. Isso seria algo assim , então eu vou te mostrar um texto incidental Temos algum texto incidental? Uh, aquela mensagem ali, texto incidental. É só um gráfico. Não é usado para leitura. É apenas um tipo visual, é um gráfico. É incidental. Algum outro texto incidental A vida de um pug seria um texto incidental. Os outros que GD seriam incidentais. Vamos dar uma olhada nisso. Isso pode ser interessante. Portanto, é contra um pano de fundo bastante misto. Então, isso enlouquece ou funciona? É muito grande. Acho que funciona. Vamos dar uma olhada, preencher de forma personalizada. Como tem um plano de fundo de imagem, não funcionará. Então, o que você pode fazer é experimentar uma das cores principais, e então o que eu faço é você, colocar um colírio em uma ferramenta, pegar você e testá-la dessa forma. Então, devemos ser capazes de ler melhor se é aprovado, tudo bem. Eu tenho que usar meu cérebro, sei lá, para isso e acho que vai passar. Perfeito. Então, dê uma olhada neste botão aqui embaixo. Rick, e ele não vai passar. Vamos dar uma olhada. Isso em segundo plano não vai funcionar. Odeia isso, 2.8. O problema aqui é que você pode ver aqui, ele quer isso aqui embaixo. Eu queria ser sombrio. Eu fico tipo, não, eu queria ser leve. Se você quiser que isso aconteça, você tem que brincar com um fundo separadamente e dizer, na verdade, vou usar minha cor de 700 para isso. Agora vou verificar o texto e ver se funciona. Acho que passamos agora. Oh, veja aquela pequena lacuna lá. Essa é a pequena área com a qual você pode brincar e funciona. Então, quando você está lidando com contraste, é diferente quando você está lidando com um gráfico versus texto. A taxa de contraste precisa ser maior. Vamos dar uma olhada em um plug-in porque o material embutido no Figma é bom Mas vamos dar uma olhada neste. Portanto, existem alguns plug-ins excelentes. Se você acessar suas ações, acessar plug-ins e digitar acessibilidade, existem muitas. Os que eu mais uso são esses dois, fortes e contrastantes Vamos usar este porque é visualmente atraente. Simples é o que eu quis dizer. Nesta página, eu vou dizer digitalizá-lo e ele vai escanear essa seleção. Vai dizer que muitas delas falharam. Você pode ver que esta linha aqui é AA e esta é AA. Depende se você está projetando para AA ou AA. Isso se resumirá ao AAs Muito raramente trabalho para uma empresa que vem até mim e diz, em termos ondulados que queremos que ela seja acessível, mas não terá nenhuma regra mais agências governamentais para as quais trabalhei, elas dirão que você precisa seguir o padrão AA, totalmente legal, e ninguém nunca o verifica. É uma área divertida de acessibilidade. Você deve fazer isso como parte do design da experiência do usuário. Você deve estar ciente disso. Às vezes você terá que acertar. Onde fica um pouco mais complicado ou você precisa fazer isso é quando você está criando sites, especialmente sites para celular Os rankings de pesquisa do Google classificarão os sites não apenas em, tipo, esse é um site relevante, mas também é acessível, ok? E pode ser examinado e verificado. Ok, vou verificar se há uma classificação AA e, obviamente, uma AA será melhor do que uma classificação AA, mas AA é bastante restritiva em termos de quais cores você pode usar Você tem que olhar para o seu público, para quem é. Aqui para meu guia de shows, A vai funcionar. Veja esse texto aqui. Então, esse texto aqui, falhou, texto de amostra? Onde está? Na verdade, você pode simplesmente selecionar algo e dizer, escanear a seleção. Nenhum sapato foi encontrado. Ótimo. Vamos para AA. Seleção de digitalização. Nenhum sapato foi encontrado. Está tudo bem. O que você descobrirá é que uma das regras que eu uso e que está listada no site W three é que o texto normal é considerado essas duas. Se estiver em negrito, o texto normal que passa por toda a acessibilidade é 14, mas em negrito. Normal, porém, se você não usar texto em negrito, como normal ou claro, deve ser 18. Esses dois são iguais em termos de tamanho. Esses dois são iguais em termos de acessibilidade. Esse aqui é menor, mas é ousado. Este aqui é maior , não é ousado e tem um contraste muito alto. É preto nesse cinza. Este é um vídeo meio sinuoso. O que eu quero que você faça é não tomar nenhuma das coisas que eu lhe dei como evangelho. Eu quero que você saia e explore isso sozinho. Você se deparará com coisas e verá Dan Eu não sou um especialista em acessibilidade, mas quando se trata de design de experiência do usuário, você precisa ter algumas habilidades básicas O básico é contraste de cores e tamanhos de fonte. Dê uma olhada neste aqui. Vamos escanear essa seleção. Isso falhou. Por que está falhando? Estamos no AA. Vamos dar uma olhada em A, digitalizá-lo. Ainda falhou. O engraçado é que, se eu disser que, na verdade, você tem 16 pontos, você é da cor errada. Vamos dar uma olhada e escolher a versão 700 disso. Digitalize, vai passar. Há algumas coisas simples que você pode fazer para fazer pequenos ajustes e fazer com que as coisas passem Vamos dar uma olhada em outro aplicativo que eu gosto. Está preso. Você pode fazer o login sem se inscrever aqui. Vamos dar uma olhada no contraste. Vamos dar uma olhada neste. Este falhou no AA, mas passa no AA, o que é perfeito. Você pode ver aqui que isso é um texto grande. Não vamos basear que está falhando no A, mas esse é um texto grande, qualquer coisa acima de 18, e você pode ver aqui que ele passou no teste A. Na verdade, tudo se resume ao tamanho do texto, ao peso do texto e à forma como o contraste de cores funciona com o fundo. O que você precisa considerar ao lidar com acessibilidade são os pontos de contato Esse é esse botão aqui. Vamos pré-visualizá-lo. E essa coisa aqui para clicar em um touro precisa estar no Android , precisa ter 48 pixels e na Apple, como um iPhone, precisa ter 44. Se eu clicar aqui, eu tenho esse botão. Você pode ver que a área de toque é bem pequena. Não quero aumentar o tamanho do coração. O que você pode fazer é ver aqui que são 32 pixels. Isso é o que eu disse para você fazê-los mais cedo. O que vamos fazer é encontrar aquele original. Vou voltar ao meu componente principal. Você pode ver aqui que é 32 por 31. O que você também notará é que eu tenho esse vetor, que é o coração, que está dentro desse pai. O que eu posso fazer é a moldura principal um pouco maior, deixando o coração dentro dela, o tamanho menor, o tamanho que eu quero que ela tenha. Com esse pai selecionado, posso dizer que, na verdade , gostaria que as dimensões fossem 48 por 48. É maior. Vou dizer A out para que eu possa colocá-la bem no meio dos pais. Eu o transformei em um Lou e acabou de enrolá-lo novamente. Eu vou dizer, certifique-se de selecionar a moldura externa, vou obter uma 48 por 48. Você pode ver aqui. Agora eu tenho esse ponto de contato que é muito maior, mas o coração ainda tem o tamanho certo. Ao criar seus ícones mais cedo, certifique-se de que, se for VOS, tenha pelo menos 44 por 44 pixels e, no Android , 48 por 48. Outra coisa a observar é que os pontos de contato precisam estar separados por pelo menos 16 pontos no Mac, na Apple e no Android. Embora as pessoas não percebam, especialmente quando você está lidando com, digamos, um site móvel, o Google, que possui Android, elas classificam os sites com base não apenas no conteúdo, mas também no quão acessíveis eles são. Se você tem ícones muito pequenos que estão muito próximos e difíceis de clicar, menos provável que eles mostrem um resultado de pesquisa com seu site porque são menos acessíveis. Para ter isso em mente também. Fontes, contraste, pontos de contato. Essa é apenas uma das principais quando você lida com o lado do design Figma Há muitas outras considerações sobre acessibilidade fora do escopo aqui, como botões para imagens, daltonismo, navegação com teclado para pessoas com deficiência visual, leitores de tela e esse Há mais do que o que abordamos aqui, mas essas são as partes principais. Certifique-se de que suas cores tenham um bom contraste, certifique-se de que os tamanhos de fonte sejam grandes o suficiente e da cor certa e certifique-se de que seus pontos de toque sejam grandes e distantes o suficiente. Tudo bem, essa é minha pequena renda em acessibilidade. Há mais do que isso. Não me obrigue a nada. Um dos novos recursos interessantes do Figma é que ele tem parte da acessibilidade incorporada Se você ativá-lo, lembre-se de clicar em personalizado, mesmo se estiver usando um item da biblioteca, apenas para verificá-lo. Tudo bem. É isso mesmo. Te vejo no próximo vídeo. 101. Como usar o modo DEV no Figma: Oi, pessoal. Vamos ver algo chamado Modo DEV dentro do Figma É uma forma de seu desenvolvedor interagir com seus arquivos, começar a extrair dimensões, arquivos, começar a extrair cores e ícones sozinho, para que você não precise enviar a eles todos os elementos individuais Eles podem explorar o documento, obter o que precisam e começar a criar o seu depois que você o projetou. Tudo bem, vamos começar. Tudo bem. Para começar a trabalhar no DevMo, você, como designer, pode trabalhar no Modo DEV. O desenvolvedor pode obter suas próprias contas pagas apenas na versão profissional, mas o desenvolvedor pode obter uma versão mais barata para trabalhar com seus arquivos Então, aqui está meu assento completo, mas um DV é um pouco mais barato e eles não podem fazer todo o design, mas podem fazer um pouco disso Se você é um pouco dos dois, um pouco designer e um pouco desenvolvedor, talvez consiga viver na cadeira de DV Isso muda de acordo com o que você tem acesso, mas geralmente os desenvolvedores podem fazer muito trabalho de design. Ou digamos que traga seu desenvolvedor de laptop, Malcolm, ele só tem um DV, isso significa? Então, isso significa um designer. Digamos que eu esteja trabalhando no arquivo de inscrição, na página e esteja pronto para ser o desenvolvedor. Talvez você já tenha visto isso. Há essa opção aqui. Você, Dan, o designer. Posso dizer que está pronto para o desenvolvedor. Vai dizer algumas coisas. Diz: Ei, você não renomeou um monte de arquivos Eu poderia ir e fazer isso. Eu não vou no momento. Digamos que eu vou compartilhá-lo. Vou clicar nele novamente e dizer: vamos copiar esse link e enviá-lo por e-mail para eles, slack para eles. Quem quer que seja, mande o link. O que acaba acontecendo é que eles entram nesse modo. Parecia basicamente o mesmo, o que pode ser um pouco confuso. Eles entram no modo DEV. O legal disso, porém, é que o Modo DEV fornece as informações de que precisam. Além disso, se eles diminuírem o zoom, eles poderão ver as coisas em que deveriam estar trabalhando Aqui, no painel Layers , estamos apenas mostrando que eles estão prontos para o desenvolvimento. Eles podem selar isso e clicar nele, trabalhar nele e vê-lo. Mas eles podem ver facilmente, olha, isso é o que eu queria fazer. Você pode copiá-lo e colá-lo em outro documento, tudo bem, porque isso pode ser um pouco cansativo para alguém. Talvez eu faça isso. Mas a coisa legal que eles entendem é que, digamos que eles tenham trabalhado nisso há algum tempo. Eles viram o arquivo original, você fez algumas alterações e eles se debruçaram sobre isso. Uma das vantagens do Dvmode é que eles podem entrar nisso e dizer: isso não era diferente antes ou eles me contaram Eu sou o desenvolvedor agora. Dan me enviou este e-mail dizendo: Eu fiz todas as alterações e você está tipo, eu nem me lembro desse documento. Eles podem ser comparados a várias versões. Eu preciso fazer uma mudança primeiro. Então, digamos que Dan, o designer , diga: Tudo bem, eu mudei algumas coisas , fiz minha acessibilidade, e agora precisa ser isso. Vou escolher essa cor escura, e essa será uma fonte diferente. Vamos mudar a fonte. Eu fiz minhas mudanças. Agora Malcolm, quando nosso desenvolvedor entra aqui e vai, tudo bem . Eu não via isso há algum tempo. O que diabos mudou? Eles podem dizer que se comparam com as versões anteriores. Você pode ver? Essa é a versão antiga. Essa é a nova versão. Eles podem começar a ver quais são as mudanças. Eles podem decidir lado a lado, sobreposição pode ser útil Você pode ver que eu também estava mexendo em um layout, para que eles possam ver a mudança facilmente. ' Então, feche-o. Essa é uma das vantagens. A outra vantagem é que, quando estão no modo de desenvolvedor, quando clicam nas coisas, obtêm o que querem Sabemos, do ponto de vista do design que algumas das coisas que eu fiz são alto-falantes de áudio dentro de estruturas dentro dos componentes principais, eles não se importam Digamos que o desenvolvedor queira começar agora e calcular os tamanhos e o espaçamento que você usou, basta clicar nele e dizer: aí está a fonte Aí está a fonte. É Roboto condensado e eu posso simplesmente pegar o CSS disso, ou eles podem estar usando o IOS e podem usar o SiFui, talvez seja Eles podem obter o código que quiserem. Eles também podem decidir que, se estiverem usando CSS, talvez não estejam usando pixels, estejam usando aros Apenas uma medida diferente Ok, tudo bem. 1h da manhã em vez de 16 pixels. em vez de 16 pixels mesmo, mas dá a eles um pouco de controle sobre como eles pegam coisas daqui. Você pode ver que existem as cores. Eles podem entrar em alguns deles, então eu posso entrar em qualquer coisa, eu marquei para Dev, mas eles podem ir a qualquer lugar que quiserem. Eles podem entrar aqui e simplesmente pegar o texto. Muitas vezes, isso é algo que eu costumava fazer. Eu costumava ler e enviar o texto por e-mail separadamente porque estava em um documento de design que o desenvolvedor se recusou a acessar. Agora eles podem entrar e pegar o que quiserem. O que eu realmente gosto é de dizer isso aqui. Eu fiz isso. Era um membro do Auto Layout. Nós fizemos isso juntos. É um layout automático. Tem todo tipo de coisa acontecendo que o torna responsivo Ok, o que acontece com eles, porém, foi todo o trabalho que fizemos, eles podem ver. Como desenvolvedor, sou um desenvolvedor muito ruim. Eu posso copiar e colar coisas. Eu sei o que estou fazendo com algum código de front-end. Nós os chamamos de Autolayout dentro do Figma porque faz sentido Mas para um desenvolvedor, ele se chama Flexbox e está me dando o que eu preciso para tornar essa coisa responsiva, então eu não preciso tentar recriar Você pode ver aqui todo o preenchimento, todas as bordas, todos os estilos diferentes A outra coisa legal são todas as cores, olha, alguns dos ativos que estão aqui, você pode ver que eu tenho três estrelas? Eles podem entrar e dizer, na verdade, eu quero que você baixe todos esses ícones, e eu vou colocá-los lá. Porque eu os vejo aqui agora, eles estão no meu computador. O desenvolvedor tem esses SVGs, esses gráficos vetoriais escaláveis, prontos para trabalhar em seus designs Facilita muito as coisas. Nas variáveis que criamos anteriormente, você pode ver que não selecionei nada. Eles podem abrir a tabela de variáveis e ver o que fizemos para que nossos modos claro e escuro funcionassem. A outra coisa boa é que, digamos que temos esse documento aqui. Eles podem ir até aqui e dizer código aberto e VS. Provavelmente seria o terminal, a coisa codificada que eles usam para escrever o código, algo como o código VS O que eles podem fazer é que você pode ter passado muito tempo tendo variantes diferentes, não variáveis. Talvez tenhamos feito isso para o nosso logotipo. Tínhamos o modo claro e o modo escuro. Ok, eu sei que na visão de design, eu tenho essa pequena chave seletora que eu fiz O que eles podem fazer como desenvolvedores entrar em qualquer coisa e ver que vamos clicar no logotipo aqui. Pode ver o acesso do esquadrão às camadas. Eu posso clicar no logotipo. Eu posso explorar o comportamento que eu fiz. Nesse caso, basta ligar e desligar, para o modo claro e o modo escuro. Dê uma olhada em outro projeto em que trabalhei aqui. Na visualização Design, criei esse madrugador intermitentemente e o tornei horizontal, foi muito complicado. Demorei muito tempo, mas quero que o desenvolvedor possa experimentar isso em vez apenas ver um site estático, em vez de apenas ver uma interface de usuário estática. Eles podem, no modo Div, se eu compartilhar com eles, eles podem explorar o comportamento e dizer, eu vejo o que eles fizeram aqui Eles podem recriá-lo, em vez de você tentar documentar três versões diferentes de tudo, eles podem examiná-las e experimentá-las. Bom. O desenvolvedor também tem acesso a vários plug-ins diferentes, separados dos de design , nesta guia aqui. Portanto, você pode gastar um pouco de tempo atualizando seu desenvolvedor. Muitos desenvolvedores farão esse curso específico apenas para trabalhar melhor com designers, mesmo que não estejam confiantes fazer o design sozinhos. Bem-vindo ao curso. Mas você pode enviar a eles uma breve explicação de como eles podem trabalhar com você no lado do desenvolvedor, em vez de apenas enviar JPEGs. Esperar que eles possam recriar coisas Exige um pouco de trabalho deles para se atualizarem, mas eles acharão útil o suficiente para se preocuparem em fazer isso pois isso pode nos poupar muito tempo em vez de tentar enviar imagens, eles podem pegá-lo e carregá-lo. Mesmo que seja só por isso, eles se acostumarão e começarão a explorar. Eles descobrirão que estão usando elástico para encher a caixa. Coisas assim se tornarão úteis para eles e eles explorarão Figma um pouco mais, facilitando tanto seu trabalho quanto essa transferência. Em vez de criar um documento de entrega para desenvolvedores separado , você pode simplesmente entregar os arquivos. Isso é DevMde É pago somente. É super útil. É essa pequena opção aqui. Você pode comercializar para Dev. Você não precisa. Eles podem explorar os arquivos. Ainda é muito comum criar talvez uma nova página que diga pronta para o desenvolvimento e simplesmente colocar as partes que você deseja nela. Obviamente, isso pode ser um pouco opressor. É isso, DevMde in Figma . Te vejo no próximo vídeo. 102. Como documentar um componente em um sistema de design no Figma: Oi, todo mundo. Neste vídeo, veremos uma especificação de design, que é diferente de um sistema de design Vou explicar o que são os dois. Criaremos nossa própria especificação de design, qual começaremos a adicionar medidas e a detalhar a anatomia de alguns dos elementos que criamos Aqui, vamos usar alguns plug-ins interessantes para nos ajudar a chegar a essa posição rapidamente. É mais uma forma visual de expressar o que você criou e como ele deve ser usado, em vez de apenas mudar para o Dvmode e permitir que outras pessoas, colegas e desenvolvedores descubram por Vamos começar. Ok, para começar, criei uma nova página e a chamo de especificações de design Há dois níveis para entregar seus documentos. Você tem especificações de design e um sistema de design. Uma especificação de design é o que você viu no início. Um sistema de design está fora do escopo deste curso e, para empresas muito grandes, onde existem centenas de designers e desenvolvedores e todos precisam trabalhar a partir de uma fonte central e novas pessoas precisam se familiarizar e aprender sozinhas. É quando você sai e cria um sistema. Digamos que o Shopify tenha isso. Eles chamaram isso. É chamado Polaris. Eles trabalham nisso. Ele tem seu próprio site e você pode entender como eles pensam sobre todos os ícones diferentes, como os usam, o que fazer e o que não fazer O que você descobrirá é que alguns dos nomes são bastante consistentes. Você vê? Componente. Eu sei quais são os componentes. Que tipo de componente eu preciso? Eu quero ver um grupo, e você pode descobrir como eles estão se saindo com isso. Não há regras definidas sobre como deveria ser. Muitas vezes, eles são voltados para desenvolvedores. Há muitos códigos, dependendo de como o site deles é construído, mas haverá o que fazer e o que não fazer, as melhores práticas Vamos dar uma olhada em alguns deles. A Microsoft usa fluent, para seus sistemas de design, você pode consultar Muitas vezes você acaba tendo que usar a opção de pesquisa. Digamos que eu queira ver como eles lidam com cartas, e aí está a carta delas. Sim, ele fornece muita documentação sobre isso. Asiática. Eles têm seu próprio sistema de design com seu próprio nome, chame-o de Lasian Vamos dar uma olhada no da Adobe. Eles chamam o espectro. Então, se eu precisasse de um cartão deles, vamos dar uma olhada. O que nós temos? Cartão. Todos eles funcionam de forma um pouco diferente. Aí está. Você pode baixar o arquivo Adobe XD, que é um software redundante no momento Às vezes, eles também têm arquivos Figma que você pode baixar Base é o que a Uber usa. Ok, então eu posso entrar em seus componentes e descobrir como eles estão usando o. O que estamos fazendo? Mensagens. Vou dar um exemplo disso, as especificações em termos, nem todas fornecem os dígitos reais Faremos isso neste vídeo, mas alguns deles fornecerão apenas o código e você poderá examiná-lo para descobrir o que é. Alguns deles estão mais claramente identificados. Ok, e o Google usa material e a Apple para IOS. Se você está fazendo aplicativos, eles usam essa interface humana, é o nome deles. Você pode analisar e descobrir, certo, como eles estão fazendo o layout e como estão abordando isso Muita documentação. Há um super pesado acontecendo. Não é pesado, mas você não pode estragar tudo se ler tudo Então, vamos fazer o tipo de versão light, que é chamada de especificação de design Digamos que eu precise entregar esse cartão ao meu desenvolvedor ou apenas precise documentá-lo que todos saibam o que eu fiz, o que estamos fazendo. Eu criei uma nova página chamada Especificações de design. Acabei de copiar e colar esse elemento, ok, esse cartão do nosso design principal A primeira coisa que você provavelmente precisa fazer é certificar-se de rotulá-lo. Então, vou até isso e dar uma chance à IA de nomeá-la, porque há muitos quadros justos Não. Nenhum deles precisa ser nomeado. Vou ter que passar agora e dizer que este é meu cartão de opinião para shows e trabalhar para dar nomes Depois de fazer isso, existem alguns plug-ins excelentes. Vamos começar com o meu favorito. Eles mudaram o nome disso. Toda vez que eu refaço uma atualização para este curso, eles vão para Design e widgets Isso costumava ser chamado de oito formas. Agora é chamado de especificações. Documento de design. Eles o renomearam como espectral e, em seguida, o renomearam novamente para documento Dê uma olhada. Nem importa se você está usando esse em particular. Dê uma olhada, digamos, nas especificações de design, dê olhada e eu as avalio com base no que eu usei antes, obviamente, mas também em quantas delas foram baixadas, quantos Existem apenas alguns usuários e algumas curtidas, talvez não seja usado com muita frequência. Você quer encontrar um que esteja sendo usado por muitas pessoas. Olha, 38.000 pessoas. Vamos usar o Design Doc, meu favorito. Usamos a medida desde o início. E isso é simplesmente útil. Se você selecionou, você pode clicar em medir e ela simplesmente mostra todas as medidas. Há algumas coisas como 15 que não deveriam estar lá. Quando estou fazendo essas coisas, muitas vezes, preciso ajustá-las para garantir que também estejam todas perfeitas. Vou ter que desfazer isso, passar por isso, descobrir que espaço é esse e alterá-lo de 15 porque deveria ser 16 Não tenho certeza de como chegou a 15. O legal do design Doc é que também existe uma opção chamada especificação Esse aqui, vamos dar uma olhada. Você pode ver que eu tenho conta gratuita para isso no momento. Vou usar a especificação de design. O que vai fazer, vai fazer uma grande bagunça. Você tem que ter certeza de que há espaço suficiente para essa coisa crescer e começar a ver que é a mesma coisa, mas com muito mais detalhes. Essa pode ser uma ótima maneira de ter uma aparência profissional, mas também é muito clara. Você pode ver que ele quebra em todas as opções diferentes. Então, a imagem da capa é sua própria pequena barra aqui, você pode ver que ela mostra não apenas o espaçamento, mas é preenchida e tem uma altura fixa Isso pode ser muito útil para o desenvolvedor saber se você é um documento Muitas vezes, porém, você pode simplesmente fornecer a eles o arquivo Figma e fazer com que eles usem o modo de desenvolvimento como fizemos antes Esse tipo de documentação é muito bom quando você trabalha, digamos, como freelancer e foi contratado para fazer algo e quer realmente devolver algo em vez de apenas um arquivo, com muitos detalhes aqui Você pode renomear tudo isso. O que você descobrirá é que ele foi criado. Esse enorme documento, basicamente, é criado pela Figma Para você, com tudo isso, você pode continuar, começar a renomeá-los, mudando as cores Aqui também, acho que há opções para descobrir e mudar coisas como o preenchimento, quais são as cores O que você quer incluir? Precisamos das cores? Precisamos que os efeitos sejam aplicados? Ou queremos manter as coisas mais simples? Muito útil. Nesse caso, temos espaçamento e anatomia, que me dá coisas como fontes em vez de apenas o Tudo anotado lindamente. Eu adoro isso. O outro, chamado specs funciona de forma muito semelhante, então vou pegar você, duplicá-lo e acessar exatamente os mesmos plug-ins e widgets. Vou encontrar especificações. Isso funciona de forma muito semelhante. Espere um segundo. Vou criar uma ramificação de molduras com toda a documentação aqui. Dê uma olhada para ver qual deles aproxima de onde você precisa estar. Eles mudam com o tempo, e você descobrirá que alguns deles têm algumas configurações gratuitas, outros não, e o que você acabará fazendo é gastar um pouco de tempo arrumando tudo Às vezes, eles não têm os nomes certos e você usou o tamanho e outras coisas errados Há dois níveis. Há uma especificação de design, que é basicamente apenas uma página dentro do Figma Aqui está. Aqui está o que eu fiz e está documentado. Em seguida, você pode passar para um sistema de design. Eu nunca trabalhei em uma empresa em que eu realmente tivesse que produzir um sistema de design, para ser honesto. Eu trabalho com pequenas e médias empresas , então tudo são pequenas empresas e nada precisa de um sistema de design Eu entendo como eles funcionam e trabalhei com eles, você extraindo detalhes deles. O que eu acabo fazendo é usar o sistema de design para ter uma ideia de como eu deveria documentar. Está bem? O que aqui seria útil para minha equipe? Provavelmente um arquivo Figma para download. Preciso copiar o CSS e o JavaScript? Como isso funciona e reage? Você precisará decidir o que precisa entregar. Mas apenas usar alguns desses plug-ins pode ajudar você a chegar lá, pelo menos dar uma ideia do que você deveria entregar, caso ainda não tenha feito isso. Lembre-se de que isso não é compartilhar algo para que pareça sofisticado, mas para ser útil Se você tem coisas aqui que você sabe, simplesmente expulse as pessoas. Direção vertical, isso precisa estar lá? Eu posso ler e começar a editar essa lista e dizer, na verdade, eu não preciso disso. Vamos nos concentrar nas coisas que eu quero que sejam importantes. Caso contrário, jogar lixo aqui por causa de lixo não vai ajudar ninguém parece chique. Tudo bem, para cobrir novamente, às vezes você simplesmente entrega um documento diz, certo, onde está? Esse aqui? Vamos ver meus arquivos. Basta dizer, ampliar , marcar para Dev, e isso pode ser tudo o que você precisa, e compartilha o link que está vinculado a esse arquivo lá. Você pode dizer: eu quero copiar o link do Modo DEV, e é isso que vou enviar para o meu desenvolvedor. Pode ser que você faça uma especificação de design, que é mais parecida com esta Ok, meio que listado. As coisas, o acolchoamento, as margens. Você pode adicionar algumas anotações aqui sobre não usar essas imagens Isso é só para deixar bem claro o que você espera entrar lá e o que não quer , então o próximo nível partir disso é um sistema de design. Está bem? E então você pode encontrar um modelo dentro da comunidade para começar. Tive que dar uma olhada em alguns que fazem parte do Figma, e havia vários modelos aqui para sistemas de design. Eles são todos diferentes. Você tem que decidir qual sabor funciona para você. Não há regras específicas codificadas sobre como esses sistemas de design devem funcionar Eles devem ser úteis. Isso é o que eles deveriam ser. Certo. Essa é uma especificação de design e um sistema de design dentro de um Figma e alguns plug-ins interessantes. Tudo bem. É isso mesmo. Te vejo no próximo vídeo. 103. Projeto do curso 21 - Especificações de design: Oi, pessoal. É hora do projeto da aula. Quero que você crie sua própria especificação de design para um dos elementos do seu design, encontre qualquer coisa, algo com um pouco de interesse Está bem? Coloque-o em sua própria página. Quero ter certeza de que todas as camadas têm um bom nome. Eu quero que você vá e adicione a anatomia e as medidas Está bem? Então você pode usar o plugin. Mas eu quero que você dê uma olhada e verifique tudo. Eu quero que você experimente que o espaçamento de TI não está certo Isso não faz sentido. Talvez eu devesse mudar isso. Não basta clicar em Exportar o plug-in e simplesmente enviá-lo, examiná-lo, verificar se o nome está correto, se tudo está lá, o que é importante, e descubra como eles funcionam. Uma coisa que você pode ter que fazer é passar dependendo do plugue Alguns deles podem estar bloqueados, o que pode ser um pouco complicado Eu não mencionei isso no último vídeo, mas você pode ver aqui este contêiner aqui, pois todas as minhas medições foram feitas em camadas bloqueadas. Eu teria que selecionar tudo isso e pensar em fazer com os pais uma mudança de comando? É para desbloqueá-lo. Preciso que todos vocês sejam desbloqueados se eu precisar fazer algumas alterações Desbloqueie as camadas, faça as pazes conforme necessário, verifique se tudo está bem rotulado analise o espaçamento e a anatomia, certificando-se de que preciso que a descrição tenha Provavelmente não. Então, basta amarrá-lo antes de fazer uma captura de tela e enviá-lo para a seção de tarefas. Compartilhe também nas redes sociais. Sempre parece sofisticado quando você faz uma especificação de design. Para você, talvez, seja para mim, eu sou um designer de UX, olhe para mim com minhas especificações de design Então faça isso e nos vemos no próximo vídeo. 104. Como visualizar, duplicar e restaurar o histórico de versões no Figma: Um. Neste vídeo, veremos o histórico de versões. Basicamente, o Figma está salvando tudo o que você fez automaticamente Você também pode fazer isso manualmente. Vamos dar uma olhada no histórico de versões dentro do Figma Para encontrar seu histórico de versões, isso acontece automaticamente, o que é bom. Se você for até o nome aqui, há uma lista suspensa. Você pode mostrar o histórico da versão. Você também pode ir para o F e ir para Arquivo e mostrar o Histórico da Versão. E há muitas maneiras de chegar lá. O que acaba acontecendo é isso se abre no lado direito aqui. Mostra todas as versões do documento. Se você estiver em um plano gratuito, eles desaparecerão após 30 dias. Se você estiver em um plano pago, certifique-se de que não esteja em rascunhos, mas em um projeto real, que será gravado para sempre Eu vou fazer isso automaticamente, o que é legal. Você pode voltar e dizer, ou pegar um dos mais velhos. Veja, aqueles que têm datas são salvamentos automáticos. Isso acontece a cada meia hora. Basicamente, ele faz isso toda vez que você pausa, ele sabe que você fez um lote de trabalho e não trabalhou nele por um tempo. Isso guarda para você. Você pode revertê-lo para este. Você vê um clique com o botão direito do mouse e diz restaurar para esta versão. O legal é que você pode copiar o link para isso. Digamos que fizemos algumas reparações, os clientes voltam Fizemos as mudanças e ninguém tem certeza sobre quais mudanças foram feitas ou eles dizem Era assim antes?” Na verdade, você pode ir até aqui e dizer, copie este link e eles receberão um link para essa versão, como uma versão anterior deste documento. Isso o salva para sempre. É incrível. Eu o uso muito, digamos que estou fazendo mudanças ou que faço muito neste curso. Quando estou prestes a começar um vídeo, o que eu faço é salvar uma versão dele para poder acessar o Histórico de versões. Eu posso salvá-lo. Eu vou fazer o vídeo inicial. Uh, um a um, para que se eu estragar minha gravação enquanto estou gravando, eu não precise clicar em desfazer, desfazer, desfazer, desfazer Eu posso simplesmente restaurar esta versão. Não tenho certeza do que estou digitando lá Digite-o lá. Eu posso salvá-lo e agora ele está no meu histórico de versões. Se eu passar agora, eu estrago tudo isso . Oh, a grande coisa. Vou fingir que fiz isso de propósito com histórico de versões vou deletar isso Não consigo excluir nada nem fazer nada. Você vê que as barras de ferramentas são limitadas? É porque eu não fechei meu histórico de versões. Eu realmente quero que você acabe com essa pequena cruz, então tudo volta à vida, e eu tudo bem, eu me livrei de você por acidente e você e aquilo foram transferidos, e agora eu posso ir para o meu histórico de versões Posso dizer que você mostra o histórico de versões e eu posso revertê-lo para aqui. Posso dizer que restaure esta versão. Você só precisa se lembrar fechar isso quando estiver pronto. Tudo bem. Se você restaurá-lo, ele será fechado automaticamente. Mas eu fico preso no histórico de versões sem conseguir fazer nada o tempo todo. Eu o uso bastante quando um cliente volta com um homem. Vou salvar o histórico de versões antes fazer as alterações, caso eu precise reverter. É como salvar como se estivesse usando outros arquivos, documentos e softwares. Outra coisa útil é que, se você estiver em um plano especial, eu estou no plano profissional. Você pode estar usando a conta gratuita. Você precisa estar em um plano organizacional ou empresarial. Você está pagando mais por isso e obtém recursos extras como esse, obtém o registro de alterações, para que, como administrador, possa ver quem trabalhou no arquivo, o que eles mudaram, quando e acompanhar tudo. É um pouco irmandade, mas você pode ficar de olho nos arquivos para dizer quem destruiu isso ou quem fez isso? Quando isso foi feito? Você pode acessar esse registro de seus diferentes arquivos, ver quem fez as coisas, mas precisa estar nesses planos especiais de organização ou empresa. É isso mesmo. Isso é salvar seu histórico e recarregar seu histórico Lembre-se de bater na pequena cruz quando terminar. Caso contrário, fica preso no limbo. É isso mesmo. Nos vemos no próximo vídeo. 105. Como usar a ferramenta Slice no Figma: Tudo bem, pessoal, e vamos dar uma olhada na ferramenta de fatiamento Você pode desenhar coisas e exportar limites específicos em vez de quadros específicos. É uma ferramenta de corte Mostre-o aqui porque ele ocupa um atalho muito importante Não sei por que, mas acontece. Vamos descobrir o que ele faz e para quem será útil. Tudo bem Vamos começar. Tem um atalho super fácil, a tecla S. Acho que isso é desperdiçado na ferramenta Slice. Você desenha caixas ao redor das coisas que deseja exportar. É bom para, digamos, esta longa página aqui. Se eu quiser exportar o quadro inteiro, posso vir aqui e dizer que quero exportar tudo isso. Mas eu vou pegar a peça inteira. O que eu quero fazer é pegar a fatia k e arrastá-la O legal disso é que você pode decidir o tamanho e depois pode ir até aqui e dizer: quero exportar um PNG para este, e vou exportar apenas aquele. Vamos colocá-lo lá. Vamos dar uma olhada rápida nisso. Você pode ver aí que está a fatia e exporta o plano de fundo também exporta o plano de fundo em relação a outras coisas É por isso que é muito útil. Talvez você queira pegar isso. Estou usando minha ferramenta de corte novamente. Eu vou agarrar a ponta dela. Você tem que estar em movimento, ferramenta. Eles são Viki, agarre a ponta disso. Eles são difíceis de pegar. Se você arrastar uma caixa ao redor deles, eles são um pouco difíceis de agarrar. Veja, eu não consigo clicar nela, mas se eu arrastar uma caixa em volta dela, eu posso pegá-la e exportar esse pedaço inteiro Ambos os topos, incluindo o plano de fundo. O que se deve notar é que eles têm um ícone especial aqui no painel Camadas e, se você os nomear, esse será meu fluxo de entrada Agora posso selecioná-lo no meu painel do Laos e exportar apenas esse pedaço aqui e ele usará o nome certo e o colocará no lugar certo É apenas uma alternativa para usar sua captura de tela em um Mac É o Command Chef Four. Acho que é uma tela impressa em um PC. Sim, isso é suficiente para a ferramenta de corte. É útil. Você verá por aí, usará um atalho muito bom, desperdiçado, na minha opinião, provavelmente há alguns de vocês por aí, talvez dois de vocês no YouTube, três de vocês que acharão isso muito É a ferramenta de fatiar. Eu vou deletá-lo. Essa é a ferramenta Slice. Feito. Para o próximo vídeo. 106. Projeto do curso 22 - Termine seu design: Certo, é o último projeto da turma. Vamos fazer com que você termine seu design. Dependendo do quanto você fez ao longo do curso, isso será razoavelmente fácil ou poderá demorar um pouco Vamos dar uma olhada. Eu vou te mostrar o que vamos fazer primeiro. Se você acessar seus arquivos de exercícios, logo abaixo está algo chamado Z final de aula, Z, só que está na parte inferior e você verá um PNG aqui, e este é o quadro Y que eu quero que você crie em alta fidelidade. Ah, você precisa crie em alta fidelidade. Ah, de uma tela de boas-vindas, página inicial, resultados de pesquisa, detalhes do evento, carrinho e uma confirmação Nós os construímos ao longo do curso. Deixe-me te mostrar. Basicamente, vai arrumar tudo. Dê uma olhada na animação de boas-vindas, fizemos várias diferentes. Fizemos o Texto Houdini e animações diferentes em que todo o texto aparece Portanto, dependendo do seu design, talvez você queira voltar e começar uma nova página e apenas copiar as partes necessárias, em vez de parte da bagunça que criamos ao longo deste curso Primeiro a animação, a próxima parte é a página inicial. Fizemos isso aqui. Depois da animação, ele será carregado na sua página inicial e na página What's on ou nos shows mais populares que estão chegando página What's on ou shows mais populares que estão . Basicamente , apenas este cartão. No entanto, a página inicial tem duas opções. Vou começar na página de treinamento, mas também quero que as pessoas possam acessar os gêneros ou uma forma diferente de pesquisar em seu site Deixe-me te mostrar no iframe. Vai começar. Sua página inicial estará na moda e terá seu cartão de eventos Mas eu quero que haja uma subnavegação no topo aqui para que as pessoas possam ir até aqui e entrar nessa categoria, eu dei um nome genérico Os seus podem ser gêneros. Ao clicar aqui, você obtém todos esses gêneros diferentes com base em seus diferentes tipos de techno , se o seu for techno O seu pode ser por localização. Essa categoria aqui pode ser um botão de localização que desce para os diferentes locais e as pessoas podem clicar nas diferentes áreas, talvez no seu bairro ou na sua cidade Eu te dei algumas opções, então pode ser novo. Este fim de semana pode ser outra opção. Pode ser uma subcategoria dos gêneros reais. Pode ser a localização, duas maneiras de acessar essa página inicial. Para mim, eu já fiz essa versão aqui, então provavelmente usaria apenas gêneros Mas vou ter que fazer uma pequena navegação para ficar entre isso e aquilo. Além dos botões, pode ser o que você quiser. O próximo passo são os resultados da pesquisa. Você tem uma barra de pesquisa na parte inferior aqui. Quero que seja clicável e acesse sua página de resultados de pesquisa Fizemos isso em algum lugar. Fizemos essa versão. Quero que haja uma página de detalhes do ventilador. É esse aqui que simplesmente explode. Se você clicar em uma das páginas iniciais, clique nesta aqui, Groove C, que entrará em mais detalhes e mostrará as datas, locais e como fazer Portanto, há uma página de detalhes. Feito isso, eles clicam em Adicionar ao carrinho. Quero que você crie sua página CRT. Você pode usar a página que criamos anteriormente com variáveis. Aí está lá. O meu é muito simples. Isso se resumirá à quantidade de tempo que você tem. Preencha-o, especialmente se você for usá-lo em seu portfólio. Veja um pouco mais de detalhes aqui. Dê uma olhada em outros carrinhos existentes e o que pode acontecer lá, o que pode ser útil Também quero uma página de confirmação. Ao clicar no botão Comprar agora, você recebe uma confirmação da compra dos ingressos. Dependendo do tempo disponível, você pode inserir um formulário no meio, inserindo os detalhes do seu cartão de crédito. Mas esses são os requisitos, qualquer outra coisa no projeto da classe. Pode ser fácil. Você deveria ter todas essas coisas. Vamos arrumar tudo. A página inicial precisa ter como padrão os eventos mais populares, e há uma navegação inferior e uma subnavegação na parte superior sobre as quais falamos, e é onde está e há uma navegação inferior e uma subnavegação na parte superior sobre as quais falamos, e é uma subnavegação na parte superior sobre as quais falamos, quais Esses dois no topo aqui, essa pequena subnavegação. Tenho uma página de resultados de pesquisa, há uma página de eventos, há um fluxo de ingressos. Nós apenas compramos e confirmamos. Você pode colocar o cartão de crédito lá também. Opcionais, se você estiver fazendo isso para seu portfólio, definitivamente preencha algumas outras páginas para torná-lo um pouco mais completo. Coisas como o perfil do artista da lista de desejos, vou deixar isso para você. Eles são opcionais. Mas você pode ver aqui a navegação inferior. Temos um que tem uma navegação mais baixa. Aí está aqui, poderíamos pular para o nosso carrinho. Podemos acessar os resultados da pesquisa do nosso perfil. É aí que você conecta esse e também pode ter uma página de lista de desejos Você fez isso, eu gostaria de fazer um vídeo de você interagindo com ele Lembre-se de enviá-lo para o Vimeo ou YouTube e compartilhar esse link nos projetos da turma Se você não consegue fazer as coisas do vídeo, está apenas se esforçando para fazer isso. Talvez seja a hora de fazer isso, porque então você pode ter um interativo que todos possamos ver. Caso contrário, basta fazer uma captura de tela de todas as suas páginas finais e enviá-la para os projetos da turma Compartilhe isso também nas redes sociais. Você não precisa, mas esse pode ser o momento que você está Ok, eu fiz alguma coisa. Compartilhe nas redes sociais, marque-me nelas e, ao fazer o upload para os projetos da turma, dê uma olhada em outros dois projetos e ofereça algum feedback Se você fizer isso para duas pessoas, cuidaremos de todos. Não consigo acessar todos eles, dar uma olhada nos projetos de todos e deixar um ou dois comentários, o que você gostou, o que acha poderia ser mudado, no que você poderia trabalhar. Esses são os pontos Super Duper Karma opcionais. Prepare isso para seu portfólio. Os próximos passos a partir daqui seriam incluir o resumo, a personalidade para a qual você está trabalhando, as molduras em Y que você fez, seus designs finalizados e apenas garantir que, se estiver usando seu portfólio você o descreva como um estudo de caso É muito comum chamá-lo assim. Não estamos fingindo que é um produto real que fizemos para um cliente Essa é a única coisa. Às vezes, as pessoas relutam em gostar, isso é falso É assim que os designers de UX obtêm projetos e começam usando estudos de caso. Precisamos deixar claro com os futuros empregadores que este foi um estudo de caso. Descreva-o como. Certo, é isso mesmo. Os projetos de classe terminaram. Reúna seus designs finais, organize-os , coloque-os em uma nova página, faça com que todas as interações funcionem Eu adoraria ver como eles se unem. Gosto de conferir os projetos das pessoas, especialmente no final deste curso avançado, porque estamos começando a adquirir algumas habilidades agora e eu gosto de vê-las. Tudo bem, então faça, compartilhe, e nos vemos no próximo vídeo. Essa é longa. Não tenha pressa, faça isso. Então eu vou te ver no próximo vídeo. 107. O que vem a seguir depois do avançado do Figma: Tudo bem, é o fim do curso. Mas eu preciso dizer adeus , mas isso. Você tem que se mover. Mova-se. Mova-se. Por que você não quer se mover? Tudo bem, isso é melhor. Hum, parabéns. Você chegou ao final do curso. Estamos no final do Figma Advanced. O que, um grande curso. Muitos vídeos, e eu só quero parabenizar você e a mim, chegamos até o fim Eu gravei tudo, e você assistiu tudo. Outras pessoas estão assistindo Netflix. Você está se aprimorando. Sim. Também é triste. Temos que terminar aqui. Mas se você quiser continuar com outros cursos, o próximo passo a partir de agora é fazer como se o Webflow fosse um bom próximo curso para isso, ok, onde o Webflow está pegando seus designs do Figma e sites Figma são uma espécie de novo software amargo que a Figma está fazendo Deixe-me saber que haverá um link aqui, ok? Se você puder se pré-registrar. E se eu tiver interesse suficiente, também farei um vídeo do Figma sites Outros cursos, temos Photoshop e After Effects e In Design e Illustrator, e o que mais temos, temos Cava, DaVinci e Há muitos outros cursos em Bring Our Laptop. Então, onde quer que você tenha encontrado este curso, talvez vá conferir alguns desses outros cursos e você possa me conhecer ou com alguém da equipe de traga seu laptop. Você também pode me seguir no Figma, ok? Acesse esse link aqui, figma.com slash APBYOL E você pode me seguir até lá. Além disso, o que pode ser realmente interessante para você agora é o FGMA. Chama-se CFI e acontece uma vez por ano É o grande tipo de show que eles fazem. Está bem? É presencial e eles fazem isso online. Então, tente chegar lá pessoalmente. É super legal. Mas você também pode fazer isso online. E é só que há uma transmissão ao vivo e eles lançam todos os novos produtos. Portanto, é uma ótima maneira, uma vez por ano, colocar na sua agenda, apenas para se manter atualizado. Vou continuar atualizando o curso, ok? E nós podemos. É uma distração, certo? E ele não está usando seus óculos. Não consigo pegá-los agora porque lá está o gato. Mas sim, a configuração é ótima de se fazer. Eu também gostaria de agradecer aos editores. Isso é, tipo, há muito trabalho para mim, mas a mesma quantidade de trabalho gigantesco para Taylor e Jason, os editores deste curso Então, muito obrigado. Também para Sepan Inappropriate Por favor, espere. Os gatos são simultaneamente fofos, mas também meio nojentos. Você é nojento. A outra coisa que eu adoraria perguntar é, se você voltar ao assunto. A outra coisa que eu adoraria perguntar é, somos amigos agora, se você conhece alguém ou descobre uma maneira de compartilhar, tipo, Ei, eu fiz esse curso. Você deve conferir em Traga seu próprio laptop. Isso também seria ótimo. O tipo de indicação é a melhor maneira de as pessoas encontrarem meu conteúdo e nos permitirem continuar fazendo coisas aqui na Bring Your Então, se você conseguir descobrir uma maneira, um link, uma postagem social, isso também seria ótimo. Agora, como você faz parte do Bring your own laptop, você ganha algumas coisas extras especiais. Então, obviamente, há certificados. Então, se você não os fez, você deve fazê-los. Há um passe, um mérito e uma distinção. Nós meio que abordamos isso no curso, mas essas são coisas que você pode incluir em seu currículo, e é principalmente o que é bom para praticar, porque você precisa fazer o projeto da classe Portanto, certifique-se de conferi-los. Você está trabalhando em uma grande organização ou em uma escola, fazemos reservas de grupos para trazer seu laptop Você ganha um desconto se reservar mais de cinco. Ok, então confira isso também para reservas de grupos no Bing, nosso laptop, se você quiser atualizar sua equipe ou seus alunos Sim, confira as reservas de grupos no Bing, nosso laptop. A outra coisa a verificar são nossos desafios de design, ok? Então, traga nosso laptop e confira que há, você sabe, um desafio regular que surge. Às vezes, o design gráfico, às vezes o UX, vídeo para conferir e envolvê-los. Você está meio que procurando uma maneira de praticar . Certifique-se de entrar nisso. Mais uma vez, parabéns por chegar até o fim. High five. Aqui está. Sim. É muito trabalhoso. Espero que você tenha aprendido muito e eu tenha gostado de sair. É divertido, não é? Eu gosto de fazer essas coisas. Hum, esse é o fim. Como vamos acabar com isso? Não pode ser mais estranho do que parecer um gato sozinho, eu acho. Vamos acabar com isso aí. Gatos fofos, diga adeus. Não há nada para ver aqui. Tudo bem, espero ver outro curso para você, no entanto. Tchau. Do gordo ao preto. Fate Black.