Mestre em design web e móvel: Figma, Fundamentos de UI/UX, +Mais

1. Introdução : Master Web e design móvel: Figma, UI/UX, +Mais: Bem-vindo ao curso definitivo que permitirá que você domine o design web e móvel com facilidade e confiança Meu nome é Chetan e sou designer, designer fitness e programo Para isso, pensei em estudar presencialmente e online. E estou muito empolgada por ser instrutora deste curso, seja você um iniciante querendo se tornar estrangeiro no mundo do design, um filósofo ansioso por suas habilidades ou um designer experiente buscando aprender a poderosa ferramenta da Figma Então este curso é seu companheiro perfeito. Apertem os cintos de segurança enquanto embarcamos em uma viagem emocionante. Isso nos levará do design gráfico fundamental à criação de um produto impressionante Como aluno deste curso, você terá acesso a mais 10 horas de conteúdo de vídeo real, que contém testes da segunda etapa, projetos interativos, exercícios e muito mais. Vou orientá-lo em todo esse processo, passo a passo, enquanto você acompanha este curso comigo . Juntos, exploraremos o reino do design X e NI. Vamos revelar o segredo das interações perfeitas e desbloquear um processo de design compacto, feito sob medida para projetos e linhas futuras. Agora, vamos mergulhar no mundo emocionante do design vex usando os incríveis recursos do Figma C para incerto a criatividade enquanto percorremos o processo de criação de uma interface cativante e Este curso foi desenvolvido para iniciantes. Não tente se você é novato design Vex ou não tem certeza sobre suas Começamos do início e orientamos você em uma etapa, desde a compreensão do resumo até a criação de molduras de texto e marcações de alta fidelidade tão pessoais Desmistificaremos itens como conjuntos de componentes, restrições e extremidades variadas, facilitando a navegação no mundo do design de interface do usuário Com a ajuda de CDs de IP gratuitos e plug-ins inebriantes, potencializaremos nosso fluxo de trabalho e criaremos protótipos interativos, prontos para testes de usuários e colaboração com Tarefas práticas serão distribuídas ao longo do curso para ajudá-lo a aprimorar suas habilidades e criar uma peça de portfólio impressionante Agora, o design é uma habilidade atemporal que permanece relevante mesmo com a mudança de tensão O básico que você aprende aqui permanecerá com você por muitos anos, e você poderá aplicar as habilidades para trabalhar com qualquer pessoa em qualquer lugar do mundo. E a melhor parte é que você não precisa ser um gênio artístico ou prodígio do desenho para se destacar no design. Todos nós começamos do zero e, ao final deste curso, você estará pronto. Então, como eu vejo esboço do curso no próximo vídeo para ver se este curso é adequado para você Este curso inclui tudo o que você precisa para reunir o Figma, então inscreva-se agora e vamos começar Nos veremos lá dentro. 2. Do Zero ao Figma Hero Nova Skillshare: Aqui, os estudantes subirão a bordo. Você chegou à linha de partida e estou muito feliz por tê-lo aqui nesta jornada emocionante Tudo bem. Primeiro de tudo. Vamos baixar esses arquivos verticais e arquivos de recursos. Você encontrará arquivos na seção de recursos aqui nesta página. Esses arquivos são seu ingresso para o aprendizado prático durante todo o curso. Mas além do material do curso, você encontrará uma folha de atalho útil Não estamos nos aprofundando muito nos atalhos, mas confie em mim, essas são mudanças no jogo Você não vai querer perder isso. Imprima um favorito circular e vamos começar. Agora, falando em ferramentas, você precisará do Figma. Nos recursos, há um link de download do Figma para obter a versão textop Baixe Figma e cadastre-se. Você também pode usar a versão do navegador. Mas lembre-se de que, se sua conexão com a Internet for interrompida, você não poderá trabalhar em seu projeto. Então, eu recomendo usar a versão dextop. Quer você navegue pela arte ou pelo Dextrop, como eu, é tudo a mesma bondade Pessoalmente, continuo com a versão para desktop, mas, ei, escolha o que funciona melhor E aqui estão as dicas rápidas. Disseram-me que falo na velocidade da luz, especialmente com toda aquela tomografia computadorizada que fiz. Hm. Eu amo City W, você acabou de dizer? Chi significa D mano, você está dizendo DD. Eu pediria um café com um espaço para amor com creme Mas não tenha medo. Se meu verso e sotaque te confundirem, basta apertar o botão vermelho de reprodução lá embaixo para ajustar a Eu posso parecer um pouco engraçado. Mas ei, tudo o que ajuda você a absorver melhor o conteúdo, certo? O inglês não é minha primeira língua, então às vezes eu pronuncio palavras de forma diferente, mas não tenho medo. Há legendas de geradores automáticos disponíveis. Agora, vamos falar sobre os sabores Figma. Livre versus espaço. Estamos usando a versão gratuita durante a maior parte de nossa aventura, porque, honestamente, é incrível o que você pode fazer sem perder tempo Mas, ei, no final de nossa jornada, darei uma olhada nas vantagens da versão pad Paul, alerta, é muito simples. Aqui está o acordo que a Figma permite manter as coisas frescas. Isso significa atualizações constantes, novos recursos e ajustes para facilitar sua vida de design Agora, embora isso seja fantástico para sua jornada de design, é uma dor de cabeça melhor para mim como seu instrutor. Mas não tenha medo. Se alguma coisa importante mudar, atualizarei esses vídeos adequadamente E, ei, fique de olho na seção de comentários abaixo. Para qualquer dica ou opinião de outros estudantes. Então, a montanha-russa BagGalf , repleta de atualizações e melhorias, tudo faz parte da Tudo bem, bata um papo. Vamos mergulhar no próximo vídeo e colocar esse programa na estrada. 3. Figma para projetar interfaces impressionantes sem escrever uma linha: Bem-vindos, estudantes. Vamos detalhar o que é o FiMMA e o que não é FGma é o seu super-herói para fazer rascunhos rápidos de É muito útil para designers de UX e UI. Aquelas pessoas que criam aparência e preenchimento de coisas de design, desde esboços em D até sites sofisticados, quase reais FimaGT, você cobre. Agora, aqui está a parte divertida. O FiMa não se trata apenas de criar um design interessante. É ótimo para testar esses designs com pessoas reais. Você pode mostrar seu trabalho ao cliente ou usuário, obter suas opiniões e fazer alterações neste local. É como um ciclo de feedback super rápido. Mas aqui está o problema. O FiPMA não transformará magicamente seu design em sites ou aplicativos reais Não, é aí que entra o desenvolvedor. O FIPA oferece a eles alguns detalhes com os quais trabalhar. Mas a parte da codificação, ainda, não é a coisa do FICA Então, depois de criar e aprovar, é hora entregá-lo aos desenvolvedores Eles trabalharão com a mágica e colocarão seu design ao vivo na web. Mas espere, tem mais. O FMA não serve apenas para sites e aplicativos. Não, também é útil para criar coisas legais, como postagens e anúncios em mídias sociais Pode não ser perfeito para imprimir coisas, mas está ficando melhor a cada dia e veja só. As pessoas estão usando o Figma para todo tipo de coisa. Nem era para isso. É como a ferramenta definitiva para fazer tudo para designers. Então aí está. Figma é seu código para um amigo para projetos e testes rápidos. Então você está pronto para dar um poço? Vamos mergulhar e ser criativos. 4. Interface do usuário vs. UX na magia de design da Figma Explicada: Tudo bem, pessoal, vamos mergulhar no maravilhoso mundo de Y versus X. Agora, se você já é um profissional nesse reino, sinta-se melhor em sinta-se melhor Mas se você não estiver, fique por aqui para um curso intensivo. É uma diferença entre os dois. A interface do usuário ou interface do usuário é como um produto de embalagem sofisticado. Tudo gira em torno da aparência e preenchimento das coisas na tela. Enquanto isso, x ou experiência do usuário é a jornada que você percorre ao interagir com o produto. Pense em Y como um carro esportivo extra elegante e Vx tem uma condução suave que leva você a girar de orelha a orelha Agora, basta detalhá-lo um pouco mais. Como designer de interface de usuário, seu trabalho principal é fazer com que as coisas pareçam incríveis Você é o mentor por trás dos botões, menu e do apelo visual geral do produto digital. Mas aqui está o problema. Antes do surgimento da UX, designers de interface de usuário como eu costumavam confiar em muita inovação e adivinhação Aqueles velhos para ter 60 dias. Claro, nosso design parece legal, mas onde eles realmente o usam é amigável. É aí que x entra em jogo. Ex-designers os interpretam como design de interface de usuário e os testam Eles são como detetives do mundo do design, investindo em como o usuário real interage com o produto Você já clicou no botão e acabou em algum lugar inesperadamente Sim, esse é o tipo de coisa que os designers de UX procuram. Agora, neste curso, vamos nos concentrar em U Y e X, mergulhando profundamente na figma A ferramenta definitiva para criação, interface impressionante e experiência do usuário Falando em facilidade de uso, deixe-me compartilhar uma pequena anedota sobre minha experiência recente com um novo aplicativo de receitas. Imagine isso. Eu baixo o aplicativo, para experimentar alguns pratos novos e o terraço moderno e polido No entanto, quando tento encontrar uma receita, é como navegar até o mit Estou preso em vários ícones procurando pela barra de pesquisa e só para perceber que está rastreado no canto. E não me comece com a ausência de uma categoria clara ou com o uso excessivo de cores brilhantes e perturbadoras. Então, no final, acabei usando o Cardp. Mas, ei, cada vx sup é uma lição aprendida, certo? Como designers, é nosso trabalho ficar de olho nesses pontos problemáticos e nos esforçar para tornar nosso design tão suave quanto um botão Então aí está x e tudo mais. Então você está pronto para usar designs A como um prono? Vamos ver o próximo vídeo e manter essa jornada criativa forte. 5. Criar aplicativos e sites que você vai adorar (neste curso do Figma) Novo: Bem-vindo ao nosso curso Figma. Se você está apenas começando ou quer dominar técnicas avançadas de UX, você está no lugar certo. Neste curso, levaremos fundamentos do Figma ao design avançado do Axe, abrangendo tudo o que está no meio Aprenderemos como aproveitar o poder dos recursos do Figma , das ferramentas básicas às mais avançadas, mas não vamos parar Vamos mergulhar no princípio do UIVX, garantindo que você entenda não apenas como usar o Figma, mas por que certas escolhas de design Nossos projetos não são apenas exercícios. Eles são cenários do mundo real. Cada produto traz uma visão abrangente de lidar com os objetivos do projeto e o público-alvo Em seguida, mapearemos o piso de tarefas, identificaremos os principais componentes, como a página de detalhes do projeto, a verificação do processo e as páginas iniciais. A partir daí, passaremos criação de estruturas de arame com baixo teor de gordura, estabelecendo a base para seu design. É aqui que você começará a compreender os fundamentos do UIEX enquanto explora os recursos do Pigma Como seu wireframing principal, passaremos para o design de interface de usuário de alta fidelidade. Você aprenderá como dar vida ao seu design, criando um visual impressionante que não só tem uma ótima aparência , mas também aprimora a experiência do usuário. prototipagem é o próximo item da agenda em que você aprenderá a adicionar animação, microinteração e outros recursos avançados ao seu design Compreender a psicologia por trás de x é crucial. Exploraremos como a cor, o texto e a animação podem influenciar o comportamento do usuário. E, finalmente, você terá a oportunidade de colocar tudo o que aprendeu em prática com projetos do mundo real. Mas lembre-se, nós possuímos alimentação com colher B. Você enfrentará esse projeto sozinho, aplicando esse conceito e as técnicas que aprendeu ao longo do curso. Quanto aos recursos, temos tudo o que você precisa. Você receberá um arquivo Zip cheio de ícones, plug-ins e links para sites úteis e inspiradores. Esses recursos ajudarão a aprimorar suas habilidades em Figma e UVA, garantindo que você esteja bem equipado para o sucesso Então, estamos prontos para se tornar o mestre do Figma, eu ganhar e criar algo incrível juntos 6. Aprenda os resumos de UX e fluxos de tarefas no Figma: No design do futuro, hoje, estamos mergulhando no aspecto crucial da colaboração em design, no resumo e no fluxo de tarefas. Agora, eu sei que alguns de vocês podem estar coçando a cabeça e se perguntando o que diabos é Vx Bem, não tenha medo. Ao final deste você será x brief export. Tudo bem, vamos detalhar. O Design Grip é como o mapa do seu projeto. Diz a todos que aonde ir e como chegar lá. Pense nisso como um papel secreto da equipe de design dos EUA para o sucesso. Ele descreve as metas, o escopo, o orçamento e os principais detalhes do projeto , garantindo que todos estejam na mesma página Pense nisso como a melhor ferramenta de colaboração. Mas espere o que exatamente acontece no X Prip. É o seu truque para o projeto. Ele explica do que se trata o projeto. Quais desafios esperar e o que você pretende alcançar Além disso, também fornece informações sobre seu produto e quem o usará. Agora vamos ver isso em ação. Imagine enviar um resumo e receber resposta que deixe você coçando a cabeça É o que acontece com um resumo ruim. Mas não tenha medo, com uma boa, você receberá uma proposta que o surpreenderá. Então, qual é a fonte secreta do excelente resumo k. É mais do que apenas um pedaço de papel, é o coração e a alma do seu projeto. Ele esclarece o que você deseja para Gate Severn na mesma página e orienta seu processo de design para Tudo bem, vamos falar sobre os resultados. Um resumo sólido, faça com que todos cantem da mesma forma. Facilita o processo de design como um botão, foca no que realmente importa e economiza tempo e dinheiro. Agora, isso é o que eu chamo de ganhar, ganhar. Eu sei que você pode estar sentindo, não se preocupe. Temos um modelo para facilitar as coisas. Desde a definição do problema até envio do orçamento e do cronograma, você tem tudo o que precisa. Ah, e há um pequeno segredo: saber seu público é fundamental entender quem usará seu produto. Você considera que cabe como uma luva. Mas, ei, vamos aprender com um erro: ficar muito nervoso, pular a pesquisa de usuários e sonhar muito alto pode confundir você. Mas com uma prática posterior, você os evitará como um profissional. Então, isso é tudo sobre x bra Vamos aprender sobre o fluxo de Ta. Já ouviu falar em fluxo de tarefas, é como um roteiro para o sucesso no mundo do design Mas, ei, não se preocupe, se soa como uma língua estrangeira para você, estamos prestes a detalhá-la para você. Então, o que exatamente é o fluxo de tarefas? Pense nisso como um passo a passo para alcançar uma meta. Por que o fluxo do usuário se concentra no fluxo de tarefas de decisão e interação, visualize cada passo a passo Precisava fazer as coisas. Ou seja, a novidade é tentar mergulhar na aula na plataforma de aprendizado. Bem, um fluxo de tarefas mapearia cada movimento que você precisa fazer desde o login até a comparação da aula. Mas aqui está a parte legal. Talod nem sempre começa do começo. Eles podem ampliar uma parte específica do processo, desde que sejam objetivos claros em um site. Agora, vamos falar sobre os benefícios. Talod é como o super-herói do design Ex. Eles são super simples de criar, os torna perfeitos para as primeiras sessões de brainstorming, quando você está tentando descobrir como lidar com um grande projeto Além disso, você não precisa de ferramentas ou designs sofisticados? Saiba como preparar um. Um alfinete, um pouco de papel e uma pitada de criatividade são tudo o que você precisa para dar vida às suas ideias Fale sobre o espião, aí está danificado. Tus flow. Se você é um designer experiente ou está apenas mergulhando no mundo de x. Tus flow e x b são uma arma secreta para transformar Tus flow e x b ideias em realidade Você está pronto para experimentá-lo? Então, vamos fazer o Pin Storming? 7. Showdown de design de Lo Fi vs Hi Fi Wireframes: Olá, colegas de design. Hoje, estamos embarcando em uma jornada para o maravilhoso mundo da Figma e dos fundamentos do design iFrames de baixa fidelidade versus alta fidelidade. Se você está apenas começando, você está no L, e se você já é um mago do design, tudo bem, porque sempre há algo novo para aprender. Ok, vamos começar com wireframes LF. Lance isso. Lofi significa baixa fidelidade, o que basicamente a impede de manter as coisas deliciosamente simples e difíceis no estágio inicial do processo de design É como esboçar a planta antes de começar a construir a casa dos sonhos Os wiframs de renda têm tudo a ver com formas, caixas e linhas básicas Estamos falando sobre os ossos básicos aqui, pessoal. Essas armações wip são a base do design de opiões. Eles ajudam você a planejar o layout, descobrir onde colocar esses botões e esboçar a estrutura geral É rápido, é Leet Meacy and Boy. É incrivelmente útil. iframes do Loaf são sua melhor opção para debater ideias e colaborar para debater ideias Pense nisso como uma ideia escrita em um papel. Agora, vamos para o lado mais fervoroso das coisas. É aqui que a mágica acontece. Altos níveis de fertilidade são como transformar esses esboços em uma obra-prima de Tasling esses esboços em uma obra-prima É como passar de um rabisco no guardanapo a renderização arquitetônica sofisticada de sua casa de design Você tinha botões, as imagens, o texto, você o fazia brilhar como um diamante. Então é aqui que seu design realmente ganha vida. Suas escolhas são perfeitas. Cada detalhe é meticulosamente elaborado e é o mais próximo possível de um negócio real sem tocar em uma única wireframes de alta qualidade são perfeitos para apresentação, testes fáceis e obtenção do selo final Está pronto para deslumbrar o mundo. Agora, vamos falar sobre nosso parceiro curador, Figma. É o melhor parceiro tanto para L Pi quanto para alta fidelidade Figma faz com que seja fácil começar com Lo fi. Você pode esboçar suas ideias, mover coisas e ver como tudo se encaixa em um único playground digital E quando chegou a hora de aumentar o nível de suas instalações, Figma te apoia Você pode refinar seu design, adicionar todos os recursos visuais e criar protótipos interativos para ver como nos sentimos seu mestre em relação ao ver como nos sentimos seu mestre Neste curso, vamos nos aprofundar instalações e altas do FiGMA Aprenderemos, cada um, como transformar perfeitamente um no outro Abordaremos as ferramentas, os truques e a fonte secreta para fazer seu design realmente se destacar. Lembre-se de que não se trata de escolher lados. Trata-se de saber quando liberar o poder de ambos. É como ter dois super arcos em seu kit de ferramentas de design. Então, você está pronto para conquistar o mundo, então prepare-se para embarcar nesta emocionante aventura armações de barra lop versus alta Estamos prestes a criar um pouco de mágica de design juntos, e eu não poderia estar mais empolgado. Então, nos vemos na próxima lição e vamos tornar realidade algum sonho de design. 8. Molduras e arquivo de design no Figma Design(Interface): Designer. Bem-vindo ao nosso FIigterial Hoje, estamos mergulhando no mundo empolgante da criação de seu primeiro arquivo de design. Mas antes de mergulharmos nesse vídeo, quero oferecer um rápido pedido de desculpas Enquanto eu estava gravando, achei que tinha tudo sob controle, passando pelo wireframe recortado por clique No entanto, enquanto trabalhava no projeto, notei que o arquivo não tinha título Ao verificar minhas fechaduras de janela, percebi que cometi um erro. Então esse foi meu erro. Então, agora vamos ao FiMa e deixe-me ensinar como criar molduras Agora, eu sei que pode ser um pouco confuso, especialmente se você está apenas começando, não se preocupe, eu te protejo Portanto, sua tela pode parecer um pouco diferente da minha porque Figma serve para pescar coisas. Se você não consegue encontrar o caminho, não se desvie, vá até o topo e à esquerda, você pode ver que há um nome como meu nome é programador imaginário E há ML ou outras coisas. Se tivermos várias contas nisso. Então, atualmente, eu só tenho uma conta, então essa é minha conta padrão. Mas digamos que se você tiver uma conta, ela mostrará o logotipo colorido e o MLID para que você possa mudar isso Digamos que você esteja usando algum aplicativo diferente porque está experimentando o Figma Então você pode se perder. Então, o que você quer fazer é clicar neste ícone inicial e você estará nesta seção. Eu sei que isso pode ser difícil para você porque eu trabalho em muitos projetos e criei muitos projetos Então essa é minha interface. Deixe-me te mostrar outra coisa. Aqui estão as equipes. OK. Deixe a raiva. É um pouco confuso. Eu sei. Então essa é minha interface. Então, vamos criar um novo arquivo de design. Então você pode ver que há uma opção chamada arquivo de design, e é de cor azul. Então, basta clicar nele e obteremos nosso arquivo de design. Então eu cometi esse erro. Então, deixe-me corrigir isso primeiro. Portanto, o nome do nosso projeto será clique em Carrinho. E vai ser a primeira versão, então é a V. Ok, então esse é o nome do meu aplicativo. Agora, vamos passar para os quadros, deixe-me dizer por que eu chamo esse V one porque eu trabalho em muitos projetos, e quando eu estava começando a aprender FMA, eu quero fazer uma atualização desta versão O que eu costumava fazer era dizer final depois disso, outra final. Depois disso, outra final após a final V four, algo parecido. Então, se você gosta de viseira ou design gráfico do Photoshop , talvez conheça meu pin Então, esse tipo de coisa que eu costumava fazer. Mas agora eu digo apenas a primeira versão. Então, sempre que eu quero operar alguma coisa, eu digo, esta é a versão 1. Eu preciso da versão dois. Eu remeti para a versão dois. Ou você pode criar um novo arquivo e renomear o version tune Ok, então esse era o problema com os nomes. Agora, vamos aprender como fazer molduras. Então esse botão quadrado é para uma moldura. Painel, então use o atalho F para quadros. Portanto, na seção direita do painel de design, temos muitas opções , como telefones e tablets, além de takes stop, apresentações e relógios. Sim, também podemos criar relógios, bem como papéis, mídias sociais, acessórios e arquivos. Eu vi muitas pessoas, elas usam o Figma para fins de mídia social, porque com o FDMA, podemos fazer muitas coisas Então, isso depende totalmente de você. Digamos que você queira mudar sua UI x atual para designer ou designer gráfico. Você também pode usar o Figma. Você não precisa usar outros soluços. Se você se sentir confortável com o Figma, você pode fazer isso. Ok, agora vamos com os telefones. Primeiro, temos o iPhone 14 e o iPhone 15. Eu não sei quando você está assistindo esse 212. Pode adicionar iPhone 17 16 iPhone 99. Portanto, para este projeto, estamos usando IP 14 e 15 P máx. Essa primeira opção. Você também pode verificar a resolução. Estes são os quatro 30 em 9302. Então, basta clicar nele e obtemos nosso primeiro quadro. Podemos movê-lo assim na tela. Se você quiser alterar a largura e a altura como uma moldura, você também pode fazer isso aqui. Portanto, há muitas opções, então não se confunda. Então, em vidas futuras, veremos todas as opções, como usá-las, como a exportação do efeito de traçado e tudo mais. Ok, atualmente, nesta edição, estamos apenas aprendendo sobre frames e um pouco sobre interface. Então esse é o primeiro quadro. Você pode renomeá-lo aqui. Você pode clicar duas vezes nele neste iPhone 14 P max one e clicar duas vezes nele, e você pode mudar para uma página de introdução, digamos, como se fosse uma página de introdução Ok, então se você quiser ampliar ou diminuir o zoom nessa interface, mantenha pressionado o controle e use o mouse scroller Também podemos fazer a mesma coisa com o controle de retenção e usar o botão mais ou o botão menos Então, isso funciona da mesma forma. Agora, digamos que você queira adicionar outro quadro, para poder ir para os quadros novamente e adicionar 14 15 P no máximo, este. Você pode escolher esse. Ou o que você pode fazer é simplesmente segurar a tecla Alt no teclado e ver que há uma cortina de mouse atrás da cortina do mouse, e duplicamos esse elemento ou quadro Então é assim que você pode duplicar ou copiar. Você também pode usar o controle C, que é o básico. E digamos que, atualmente, você queira, isso é um pouco caótico E eu quero um pouco de espaço. Eu quero passar para esse design. Você pode usar esse controle deslizante, você pode usar esse controle deslizante ou também pode usar a barra de espaço Se eu segurar a barra de espaço, você pode ver a mudança superficial do mouse para a Eu posso simplesmente clicar com o botão direito do mouse e movê-lo assim. É assim que você pode usar essa ferramenta de arrastar ou mais. E você também pode renomear páginas a partir daqui. Digamos que eu queira dar um nome a essa página inicial. Então essa vai ser minha página inicial, e esse vai ser meu hamburger man Ok, então essas são nossas molduras. Então, para este projeto, não vou gostar de até seis quadros, então vou diminuir um pouco o zoom e segurar Alt ou podemos usar o controle C e o controle V. Clique com o botão direito do mouse no seu quadro e selecione copiar, clique direito do mouse nesse espaço vazio e clique em pest Então, isso vai se espalhar por aqui. E deixe-me rastreá-lo até isso. Então, temos quatro. Então, novamente, controle V controle V. Então, temos nossos seis quadros. Vou nomear essa categoria. Esta será uma conta, e nossa página final será meus pedidos. Podemos rastrear nossos pedidos a partir daqui. Então, isso é tudo sobre molduras, e você pode ver em um painel de lista, que temos cada página. E se eu adicionar algum elemento, digamos que eu adicione uma linha nesta página. Como você pode ver, ele foi aninhado e abaixo desta página de introdução, temos nossos elementos Portanto, não se preocupe com esse. Vou deletar este por enquanto. Ok, então vamos manter o ritmo. Então, para praticar, crie mais molduras, copie e cole como um profissional e nomeie-as de acordo com o fluxo de tarefas do UA, e há uma dica profissional. Digamos que você esteja trabalhando em um projeto de UX como freelancer. Nesse caso, você pode solicitar o telefone do seu cliente. Então, como o modelo do telefone. Digamos que ele esteja usando um Samson Galaxy S 23 ultra. Então, nesse caso, você pode criar uma dimensão de acordo com esse telefone. Então, eles vão adorar por isso. Por fim, não se esqueça de nomear seu arquivo porque sei que cometi um grande erro Clique nesse espaço vazio e vá até esta seção e nomeie o arquivo. Atualmente, estou usando o click Cut, mas você pode nomeá-lo como quiser. E fique à vontade para explorar mais. Você está pronto para o próximo vídeo, então vamos continuar com esse trem criativo? 9. Ferramenta de texto e fontes Figma: Bem-vindos de volta, pessoal. Neste vídeo, aprenderemos tudo sobre texto, quais são as dicas, a fonte, o tamanho da fonte, p, como alinhá-lo e tudo Então, vamos digitar. Primeiro, vamos aprender sobre como adicionar texto. É muito simples. Basta ir ao menu do bar superior. E como você pode ver, temos esse botão t. Então clique nele e clique no troprig novamente. Você receberá seu texto assim. Agora, você pode estar vendo muitas coisas estranhas como se houvesse muito espaço entre elas e tudo Então, vamos corrigir isso em um momento. Há dois métodos para adicionar texto. A primeira que vimos foi uma bicicleta clicando no menu da barra superior. Além disso, podemos usar um atalho chamado t, pressionar t no teclado e o carsel do mouse mudará para esse ícone de adição, e você pode simplesmente arrastar uma caixa como essa e colocar muito texto nela Então é assim que podemos adicionar o texto na página ou, esta é a página, então podemos adicionar isso na página. Há uma coisa que eu esqueci de mencionar. exemplo, quando escolhemos apenas texto e clicamos nele, recebemos uma caixa, uma caixa pequena, e não podemos ajustá-la. Podemos resolver isso depois disso, assim. Mas, em alguns casos, queremos uma caixa que seja grande em comprimento e se divida, para que possamos arrastá-la assim e adicionar um monte de texto Então, é assim que podemos adicionar caixas e testar, também podemos ajustá-las assim. Então, deixe-me namorar este por enquanto. Esse também. Ok, eu vou ficar com este. Agora, vamos ver como podemos fazer muitas coisas com tipos. Antes de fazermos isso, vamos aprender sobre tipos de faces. Então, que tipo de caras? Um tipo de faces é um conjunto de caracteres com o mesmo design. Eles incluem letras, números, pontuação e CLFy Existem milhares de faces disponíveis. É importante não fazer várias faces de TI. Isso pode fazer com que seu design pareça fragmentado e desajeitado. Portanto, você precisa ter cuidado, selecionar e eliminar o s de duas, três faces de tipos Então, na maioria das vezes, quando projetamos estruturas de arame, optamos por fontes básicas, como roboto Eu sei que o robô é chato, mas muitas pessoas precisam, elas só precisam ter uma ideia, qual é o design Então, estamos usando essa fonte chata. Isso é roboto. Eu sei, eu sei. Desculpe, roboto. Eu tenho. Então, agora vamos passar para o peso da fonte. Um tipo de letra pode ter muitos tipos diferentes de ladrilhos ou pesos Por exemplo, o roboto tem muito estilo e pesos, como você pode É desconfortável para mim. Você pode passar o molhado, você pode contar todos eles, como um parafuso extra leve fino, um parafuso extra, esse tipo de peso de fonte O peso da fonte pode criar uma topografia Hetch va. Use um peso grande para destacar as informações mais importantes e menor para as menos importantes. Agora, vamos passar para o tamanho da fonte. Isso diminui a escala e o tamanho do texto. Figma representa o tamanho da fonte em pixels independentes da densidade. O tamanho da fonte também pode criar uma topografia hechi uva. É importante escolher o tamanho certo da fonte nas informações corretas. Certifique-se de que seu texto seja legível e nunca esteja abaixo de dez PT, ou seja, dez pixels Como você pode ver, se eu escolher dez, você pode ver que o tamanho da fonte é muito pequeno e meio legível, mas se formos abaixo disso, pode não ser legível, então acabe Então, isso o tornaria ilegível para muitos leitores. Agora vamos passar para a altura da linha. Ok, então esta é a altura da linha conectada, é 100%. Podemos ajustá-lo para que, digamos, a altura da linha controle a lacuna entre as linhas ou o texto no parágrafo. A altura da linha deve estar entre uma porcentagem de 20 a 1405 por cento do tamanho encontrado, tornando o parágrafo mais legível Então, se eu aumentar para 400, como vemos, é estranho Mas se eu mantiver até um 20, posso fazer isso manualmente. Então, pode ver que é mais legível. Quando sua linha for muito longa, o leitor terá dificuldade em se concentrar. Portanto, tenha isso em mente. Ok, no início do vídeo, eu disse, nós estragamos o espaçamento Então, agora vamos saber como corrigir o espaçamento e como adicionar o espaçamento Deixe o espaçamento desminar o espaço entre dois caracteres. Isso pode ser útil para o texto da legenda do site. Além disso, não confunda isso com astúcia, que é o processo de ajustar o espaço entre dois caracteres específicos Atualmente, é de 20%. E se eu for, digamos, seis ou sete assim, posso ver agora que isso é mais legível e não parece assim Ok, então espaçamento entre parágrafos. O próximo é o espaçamento entre parágrafos. Ok, para isso, eu tenho que adicionar outro texto aleatório para o que está acontecendo com você. Ok, agora está funcionando. Deixe-me adicionar um texto aleatório como este. Considere isso como um parágrafo. Eu sei que não é um parágrafo, mas estou considerando isso como um parágrafo. O parágrafo voltado para o parágrafo define a distância entre cada parágrafo. Isso pode aumentar ou reduzir o espaço entre cada parágrafo. Ele ajuda o usuário a se concentrar adicionando intervalos regulares, tornando o texto mais legível e Então, se eu aumentar o espaçamento entre parágrafos assim como você, ele aumenta assim Então é assim que você pode adicionar espaçamento entre programas. Agora, temos a opção de redimensionar. Atualmente, a caixa do texto é de tamanho fixo. Podemos escolher o peso automático e a ocultação automática. Eu usei muito um FMA, mas nunca uso muito essa opção Mas se você quiser, você pode usar isso, e ele ajustará seu texto assim. Portanto, depende totalmente do seu design. Ok, o próximo é o alinhamento. Isso determina como você distribui o texto dentro do espaço confinado Assim como os alinhamentos horizontais, alinhe seu texto no eixo x e o vertical alinhe seu texto no Então esta é para o lado e esta é para a direita. Eu não sei Eu nunca vi alguém fazer isso, como no lado direito. Na maioria das vezes, o texto está no lado esquerdo ou no pedal. E você também pode usar esse para alinhar o texto. Então, esses são os métodos básicos. E se você quiser obter mais opções avançadas, como adicionar menos marcadores ou curtir, esqueci Deixe-me ir e verificar. OK. Então, se você quiser adicionar um texto em maiúsculas, você pode fazer isso, adicionar sublinhado e esse tipo de coisa, e você também pode fazer outras coisas Como se tivéssemos visto a opção do elemento. Também está disponível aqui, mas nesse caso, temos uma vantagem. Ou seja, podemos ver uma prévia. Se eu escolher redimensionar e for para Auto W, ele nos mostrará uma prévia disso Como ficará depois de adicionarmos esse efeito, eu direi. E também o sublinhado, também o avanço. E classe alta, minúsculas e tudo mais. Você também pode adicionar marcadores. Então, essas são todas as configurações básicas de texto, fonte ou pipa que você pode fazer no figma Então, lembre-se de uma coisa: o texto continha mais de 80% do design de SEO É importante conhecer essas propriedades de texto e o que elas significam. Isso proporciona uma boa compreensão da topografia, concentre-se em sua utilidade e sempre coloque a legibilidade Então, isso é tudo sobre texto. Então, vídeo astro. E eu sei que há mais coisas, como a forma como podemos criar estilos de texto, bem como corpo de texto e tudo mais. Então, aprenderemos que essas são coisas mais avançadas. Então, aprenderemos essas coisas em vídeos futuros. Assim como Potro, vejo vocês na próxima 10. Noções básicas da Figma como CRIAR e MODIFICAR FORMAS: Todos nesta proposta aprendemos tudo sobre formas, como criar retângulos, lábios, policós e como criar cantos arredondados, além de adicioná-los Então, vamos começar. Ok, então para as formas, podemos ir ao menu superior e clicar neste quadrado. E a primeira é que temos um retângulo, essa linha, setas, é uma estrela poligonal, e também podemos colocar Ok, vamos começar com o retângulo. E eu estava pensando em usar esse espaço para fotos de produtos. Como quando vamos para a Amazon. Há um banner enorme. E aí ele desliza e mostra um produto como o tipo de oferta que está acontecendo. Então, eu quero fazer essa coisa. Ou eu vou fazer essa peça para, tipo, uma categoria. Ok, então vou mover esta foto do produto para cá e vou mantê-la assim. E tudo bem, isso é para os slides, e agora vou escolher a elipse e o atalho é : Ah, você também pode usar e para mudanças precisas, como um círculo perfeito, vou segurar a tecla shift e arrastá-la E eu vou fazer quatro disso. Se você quiser fazer uma duplicata como essa, mantenha pressionada a tecla Alt Se você segurar a tecla Alt em qualquer elemento, verá que há um cursor duplo do mouse, que significa que você pode duplicar o item, basta clicar no mouse e arrastá-lo assim Você receberá uma cópia. Ok, existem muitos métodos para usar controle C e o controle V. Mas se eu usar o controle C e o controle V, o objeto fica em cima um do outro. Você pode ver que eu estava no topo. Então, isso é um pouco confuso. Então eu uso altption. Então, vou alinhá-los assim e, novamente, selecionar todos eles e manter pressionada a tecla alt E arraste assim porque eu quero que essa seção seja uma categoria, e vou mantê-la assim. Então é assim que podemos fazer navios. Agora, digamos que eu queira fazer um ícone de barra de sobretensão aqui. Então, o que eu posso fazer é pressionar R e criar um pequeno retângulo como este e colocá-lo neste centro E eu também quero um hambúrguer minu. Então, você pode ver que, em muitos casos, há um menu de três linhas chamado menu de hambúrguer Então, podemos criar usando linhas. Então, deixe-me acompanhar isso como se fosse todo esse turno. Vou desenhar primeiro e também adicionarei alguns traços. Sei que estou indo rápido demais, mas é fácil. Atualmente, o AVC é um deles. Vou subir até três, então vai ficar mais pesado e aguentar assim, e mais um. Ok, então temos nosso menu de hambúrguer e aqui, podemos nos lábios ou no ícone de pesquisa Ou talvez eu continue como está por enquanto, porque não quero me mover muito rápido. Então, você sabe, a pesquisa Barbano está sempre com cantos arredondados Então, queremos cantos arredondados, e atualmente temos cantos muito afiados. Se eu colocar meu dedo nele, cortarei o papel. Eu sei que foi um trabalho muito ruim. Então, vamos criar alguns cantos arredondados. Clique no seu elemento. E você pode ver que há quatro pontos em cada lado. Você pode simplesmente clicar nele e rastreá-lo por dentro, e ele fica arredondado assim. Então, como veremos , temos d cantos. Você pode fazer isso manualmente, como se eu o tornasse zero, se você clicasse no elemento e entrasse no painel de design, e houvesse uma opção de raio de canto Você pode simplesmente clicar nele e adicionar valores como 15 para tornar seus cantos mais arredondados. E você também pode colocar cantos arredondados para cada lado, no canto superior esquerdo. Últimos 15 se eu adicionar valor zero. Como você pode ver, parece uma espécie de mensagem de texto. Então você também pode fazer isso assim. Você também pode segurar a tecla Alt e arrastá-la dessa forma para cantos individuais, e você pode fazer cantos arredondados dessa forma. Por enquanto, vou manter Ok, então esta é a estrutura principal da nossa página inicial. Eu sei que há muitas coisas que eu posso fazer aqui. Tipo, eu posso adicionar uma pequena barra de navegação. Então, deixe-me ir para esta página, eu posso simplesmente usar o atalho R e vou rastreá-lo assim E posso adicionar quatro ou cinco elementos, como perfil de cartão de pedido da categoria inicial, como essas coisas. E o que podemos fazer Ok, podemos adicionar um pequeno retângulo. Oh, aqui. Isso representará que este é para cartão. Eu sei que não parece muito bom, mas essa é a estrutura de arame, então não precisa ter uma aparência tão boa. Ok. Então, por enquanto, é o que é. Ok, então já vimos como o texto funciona no FMA. Só precisamos pressionar T ou até mesmo este botão. Então, vamos adicionar um texto como este para banner. Sem banner de Bruce. Ok. Então, este é para banners e este é para categoria, assim como eu posso desenhar quatro quadrados, e isso representará nossos menus de navegação Ok, então eu vou escolher cinco. Ok, assim. Ok, então eu esqueci de te mostrar uma coisa, é sobre camadas Aprenderemos sobre camadas em camadas futuras, mas isso é básico, então eu tenho que mostrar isso. Então, digamos, vamos imaginar que você está desenhando uma forma. E deixe-me mover isso para cá. E se eu escolher retângulo, e se eu desenhar um retângulo como este, e como você pode ver, nosso texto Eu sei que você deve estar em pânico agora para onde foi e tudo mais. Mas é muito fácil trazê-lo volta porque em layans você pode ver esse é o retângulo 15 e onde está nosso texto. Esse é o banner. Então você pode fazer isso a partir daqui, mas é meio que, digamos, para fins avançados. Então, nesse caso, o que você vai fazer é selecionar o primeiro item e clicar no centro das costas. E como você pode ver, temos nosso pacote de texto. Você pode usar o pacote quadrado de atalho que está próximo ao botão P e, se eu pressionar, obteremos nosso pacote de texto Então é assim que você pode ajustar as camadas. Ok, há outra opção. Você pode fazer a mesma coisa, ir até objeto e ver trazer para frente, ser para frente, recuar ou enviar de volta Portanto, há muitas opções. Você pode fazer isso. Você também pode ajustá-lo a partir daqui se usar muito Figma. Então, nesse caso, você pode ajustá-lo a partir daqui. Mas isso é meio confuso. Então, vou dizer atalho ou você pode corrigi-lo e ajustá-lo como um conjunto para enviar para trás ou ficar Então, isso será fácil para você. E eu esqueci no vídeo anterior de adicionar o nome da marca. Eu estava pensando em uma marca chamada click cart. Ok, então vou adicionar isso ao CD e detrib para baixo. E vou usar elipse para adicionar um logotipo da marca aqui Estou segurando a tecla Shift para um círculo perfeito. E nesse círculo, adicionaremos o logotipo da marca. Ok, então você pode estar se perguntando, o que é esse pequeno você pode estar se perguntando, o que é esse pequeno ponto? Ok, deixe-me te mostrar uma mágica. Se eu arrastar isso para cima, pegamos nosso matilheiro e ele pode atingir todos os pontos do nosso jogo Eu sei que é a cama. Ok. Então, também podemos fazer isso. Podemos criar círculos ocos como este Também podemos criar um bate-papo rápido e tudo mais. É para design complexo. Na maioria das vezes, não o usamos, então não se preocupe com isso. Então é assim que esse ponto funciona. Então, no final, temos um círculo oco, então você pode adicioná-lo assim Ok, então, por enquanto, vou viver Azits. É assim que você pode usar formas para criar essa estrutura de arame, como esse banner, essa seção de categoria, bem como esse ícone de pesquisa, a linha para o menu Hamburger e o quadrado para a seção do menu de navegação E também aprendemos como criar um círculo oco ou Pac Man Então é isso para dois neste vídeo. E nos vemos, Kays, na próxima palavra. 11. Como escolher e usar cores na figma: Bem-vindos de volta, estudantes. Hoje, estamos mergulhando no vibrante mundo das cores na Figma Prepare-se porque, ao final deste vídeo, você dominará a arte de adicionar o toque de cor perfeito aos seus designs Vamos começar entendendo que menos geralmente pode ser mais. Quando se trata de wireframe, embora o cinza seja uma escolha sólida, estamos aqui para explorar o arco-íris de possibilidades Para trabalhar com cores, selecionaremos o retângulo gigante No painel de design, temos essa opção chamada preenchimento. Então, no filme, podemos mudar nossas cores. Isso é para a luz. Isso é para o Tarke, isso é para o baixo contraste e isso é para o contraste E também podemos mudar a cor lateral, essa cor de cidra Além disso, também podemos aumentar ou diminuir a transparência da cor. Ok, então primeiro, vou escolher cor amarela industrial porque gosto muito dessa cor e o código hexadecimal é para isso, eu acho, algo EC dez é o código hexadecimal dessa Depois disso, temos o modo de transparência a partir daqui, você pode tornar sua cor ou elemento transparente. Então, digamos que se eu mover isso para o plano de fundo, onde está o plano de fundo? Ok, então esse é o plano de fundo. Então, como você pode ver, nossa cor é meio que transparente e transparente. Não é meio que seja transparente. Então, se eu fizer isso 200%. OK. Então, atualmente ify, se eu chegar 100%, como você pode ver, é invisível OK. Então é assim que você pode tornar a cor transparente. Então, deixe-me primeiro mandar isso para trás. Ok, então isso é uma frente indi agora. Agora, a próxima opção é que você pode escolher uma cor usando a ferramenta conta-gotas Então essa é a ferramenta de conta-gotas. E como você pode ver na parte superior, temos essa versão ampliada Se eu mover isso nas páginas, isso mudará. Como se estivesse ampliando. É como uma lupa, e podemos escolher qualquer cor Por exemplo, digamos que eu queira colorir todos eles. Primeiro, deixe-me selecionar a ferramenta de seleção. E os atalhos para a ferramenta de seleção são V, e eu vou selecionar tudo isso, e vamos escolher a ferramenta iroper E para os atalhos. Ok, então vou escolher esse carro amarelo, como você pode ver, temos amarelo em todos os lugares. OK. É assim que você pode usar a ferramenta Iroper Depois disso, temos o código X. São tipos diferentes de códigos, quatro cores, como se tivéssemos RGB RGB que significa vermelho, verde e azul Se você conhece os valores de vermelho, verde, azul e pode criar qualquer cor. E depois disso, temos CSS. O CSS é útil para desenvolvedores front-end. Como quando eu estava na faculdade, eu costumava programar em CSS, então naquela época eu precisava desses tipos de cores, como esses tipos de códigos. Depois disso, temos o HSL. Esses são do tipo RGB. Esses também são valores que você pode colocar e criar cores. Depois disso, temos o HSB. Mas na maioria das vezes usamos XCode ou RGB, ou se você for um desenvolvedor, usará Então, por enquanto, vamos usar o código X. Ok, então a partir daqui, você também pode aumentar ou diminuir a transparência. Você pode fazer a mesma coisa aqui. Depois disso, temos a cor do documento. Ok, a cor do documento significa, como a cor que usamos em nossos designs. Como se tivéssemos interesse em amarelo, branco, cinza, preto e meio cinza. Então essa é a cor do documento. Se você clicar nessa cor do documento, você terá algumas opções. Como se isso fosse para cores trabalhistas. eu criei vários projetos, Por exemplo, eu criei vários projetos, posso exportar essas cores neste projeto e também posso usá-las. Até agora, agora, vamos com este. Porque eu sei que esses tópicos são um pouco complicados, não complicados, mas não são fáceis de entender. Então, vou fazer um vídeo separado ou dedicado sobre isso. E também há uma opção chamada estilos de cores. Podemos criar nossa paleta de cores e usá-las em nosso design várias vezes. Então, será fácil. Então, direto para isso. Há um vídeo chegando. Então, isso é tudo sobre cores. Você também pode criar seu gradiente de cor se escolhermos essa opção Você pode escolher a cor do gradiente. Por enquanto, vamos usar cores solares e aprenderemos como criar gradientes em Então, direto para isso. Mas lembre-se de que uma coisa ao projetar um wireframe é usar cores simples, como cinza, branco ou Você pode ver em alguns wireframes. As cores são muito, muito chatas. Então você tem que tornar o wireframe realmente chato. E aí está, pessoal, o básico de adicionar cores na figma Até lá, boa coloração. 12. Traços e atualização de propriedades padrão na figma: Outros estudantes são bem-vindos de volta à nossa aventura de design. E hoje, estamos mergulhando profundamente no fascinante reino dos derrames Livre-se de seus designs com um toque de gênio. Então, qual traçado é a linha elegante ao redor das bordas, definindo os limites e adicionando esses dois visuais extras Vamos fotografar nossos sinais, certo? Imagine um espelho de hambúrguer, eu sei que você está imaginando outra coisa, mas isso não é um menu de hambúrguer Então esse é o menu de hambúrguer. Ok, nós temos aqui. Então, essas três linhas que todos conhecemos e amamos. Não estamos apenas desenhando linhas. Estamos dando a eles um estilo de pontas arredondadas porque, sejamos honestos. Bordas afiadas parecem muito chatas. Mas, ainda há mais, definiremos alguns padrões para facilitar sua vida de design. Cada retângulo que você desenhar virá com um ícone, um traço, uma cor inferior Chega de usar manualmente todas as vezes. Então, vamos nos unir. Ok, então, como você pode ver, temos esse retângulo chato, então vamos selecionar este Então, atualmente, ele tem bordas muito afiadas, e deixe-me adicionar algumas bordas arredondadas. Então, vamos com cinco. Parece ótimo agora. Então, como você pode ver abaixo do campo, temos uma opção chamada traços Então, vamos clicar no sinal de mais. Chamamos de traçado um, mas podemos somar quantos quiserem. Na maioria das vezes, eu escolho dois porque dois parecem sutis e lindos. Ok, podemos mudar a cor do traço. Como atualmente, é preto. Na maioria das vezes, vem com o preto. Você pode mudar a cor. Você já sabe que nos anos anteriores, vimos como mudar de cor e tudo mais. Então, se você não quiser essa cor, você também pode mudar essa cor. Depois disso, temos essa opção chamada, podemos colocar nosso traço tanto dentro quanto fora, bem como no centro. Então, se eu escolher o centro, como você pode ver, isso envolve um limite fora do limite, bem como dentro do limite, e cria o traçado no meio Depois disso, temos o interior. Então, isso cria um traço dentro dos limites. E, no final, todos sabemos que isso cria traços externos. Então é por isso que está lá fora. Então, eu vou continuar com o interior. E isso é para aumentar o AVC. Depois disso, temos um derrame por lado. Como vimos nos cantos arredondados, podemos atribuir um valor arredondado específico a bordas específicas. Então, deixe-me clicar neste menu de três pontos para que tenhamos muitas opções, como se você quisesse que seu traçado fosse pontilhado ou sólido Então, eu vou usar isso porque o sólido solta muito bem e a maioria de um sólido E também podemos usar algo personalizado , como dottil, bem como um pouco sólido Você também pode personalizá-los. Mas, na maioria das vezes, não usamos muito essa opção. Portanto, esteja ciente disso. Ok, uma coisa que eu esqueci de te mostrar é que essa opção é chamada de traçado por lado exemplo, se eu escolher o topo, o traço será apenas no topo. Então, como você pode ver, o traço só está disponível na parte superior. Então é assim que funciona. Se você escolher todas as opções, também poderá personalizá-las. Mas, por enquanto, quero que o derrame esteja em todos os lados. Então é assim que o AVC funciona. Agora podemos escolher várias opções como vários elementos, e, ao mesmo tempo, aplicar traços Vamos clicar no botão traçar mais, e eu vou atribuir o valor até. Dois. E você também pode usar as teclas de seta para aumentar ou diminuir o valor. Se eu usar a tecla de seta para cima, o traço seria maior. E se eu usar teclas para baixo, o traço terá menos valor. Então, por enquanto, eu vou com dois. Ok, então é assim que você pode usar traços, mas há mais algumas opções Digamos, digamos que você queira criar essa coisa como um pequeno retângulo, como um anúncio ou algum botão, então você precisa fazer tudo de novo e de novo Então, se eu não quiser fazer essas coisas de novo e de novo. Então, o que eu posso fazer é selecionar o elemento que eu quero que seja como um conjunto como padrão. Então, eu estou selecionando este por enquanto, e vamos namorar. E nisso, temos a opção chamada definir propriedades padrão, e você pode ver que o padrão da propriedade está atualizado. Agora eu posso escolher um retângulo e desenhar a mesma coisa em tamanhos diferentes como este Então, eu não preciso criar tudo isso de novo e de novo. Então, é assim que você pode definir algumas propriedades como padrão. Ok, então há uma coisa que eu tenho que te mostrar , como, digamos, na maior parte do quadro i, você deve ter visto que existem algumas linhas e que funcionam assim. E tudo bem, deixe-me escolher uma linha novamente. Ok. Isso indica o espaço reservado para a imagem Então, se alguém estiver acessando seu wireframe, essa pessoa saberá Neste lugar, temos que adicionar uma imagem, para que você possa adicionar assim. Ok, algumas pessoas gostam dessas linhas ou algumas pessoas mantêm uma imagem como espaço reservado Nesse caso, o que você pode fazer é que o evento exclua essa linha. Então, vamos adicionar uma imagem. Podemos acessar essa ferramenta de emaranhar, e há uma opção chamada colocar imagem, e também podemos acessar este Figma con, e no arquivo, temos a opção chamada colocar Vamos usar este e o atalho é, você sabe, em forma de controle K. Acho que adicionei a lista de atalhos nos recursos Você também pode acessar isso. Então, por enquanto, vamos mostrar esse. E eu posso simplesmente adicionar MH aqui. Você pode segurar a tecla Shift para obter uma forma semelhante precisa. E eu posso adicionar isso no centro, como testes. E eu posso usar isso como um espaço reservado. Mas, por enquanto, eu não vou fazer isso. Vou deletar esta e vou manter minhas linhas porque gosto muito delas. Então, vou manter essas linhas. Ok, então há uma coisa que eu esqueci de te mostrar. Como no vídeo em forma, criei esse menu de hambúrguer Mas há mais opções porque tem bordas afiadas e eu não quero bordas afiadas. Então, em traços, temos outras opções. Atualmente, não temos nenhuma, assim como temos a flecha de linha, o triangular, o triângulo do rio, a flecha de menos e a flecha de diamante . E também podemos fazer a borda das linhas em forma redonda ou quadrada Então, como você pode ver, isso é ótimo, mas eu quero que as bordas sejam arredondadas. Então, vou selecionar todos eles e vou escolher o arredondado. E eu vou contar um porque parece ótimo e estético. Oh, tem mais uma coisa que eu esqueci de te mostrar. exemplo, digamos que você queira duplicar algo que mantemos Alt e simplesmente duplicamos assim Mas digamos que você queira duplicar vários itens repetidamente. Você pode usar o controle de chamadas de atalho. Eu sei que existem muitos atalhos, mas os atalhos nos tornam especialistas em FiGMA Então, para isso, podemos usar o Controle D. Então, ele duplicará essas coisas de novo e de novo e de novo e de novo. Então é assim que você pode usar abreviatura de controle para duplicar o item Mas para o menu de hambúrguer, vamos manter três linhas Então, eu sei que algumas pessoas usam quatro linhas, mas quatro linhas não parecem muito boas, então eu vou usar três linhas. E se quiser, você também pode adicionar essas linhas ao círculo. Mas isso depende totalmente de você, mas eu vou continuar como está. Mas digamos que há uma coisa como digamos que você queira copiar as propriedades do círculo e colar essas mesmas propriedades nessa barra de pesquisa. Então, vamos selecionar esse ícone de pesquisa e, primeiro, vamos copiar as propriedades dessa coisa. Então, para isso, podemos editar e vamos copiar as propriedades e o atalho é o controle C. Ok, vamos copiar e colar aqui Controle. Então, como você pode ver, copiamos todas as propriedades E não aplicamos nenhum traço. Desculpe. Não aplicamos nenhum canto arredondado porque ele é alternado. É por isso que temos bordas afiadas, mas podemos corrigir isso aqui. Ou podemos escolher este e copiar as propriedades desse retângulo e colá-lo aqui Então, por enquanto, vou escolher a barra de pesquisa padrão porque ela parece ótima. Então, isso é tudo sobre derrames. Dessa forma, aprenderemos como adicionar traços a elementos como retângulo, círculo e tudo Também aprendemos como copiar as propriedades dos elementos e colar nos outros elementos, e também aprendemos sobre como criar esse lindo menu de hambúrguer como adicionar cantos arredondados a E o que aprendemos mais? Uh, também aprendemos sobre como adicionar imagem como espaço reservado e esse tipo de coisa básica que aprendemos hoje Então, isso é certo para um derrame individual. Agora você está armado com a habilidade de adicionar essa jogabilidade extra aos seus designs. Fique ligado para ver mais mágica de design no próximo vídeo até lá, continue criando e 13. O que é o modo de edição de objetos e como usá-lo! na figma: Gc design entusias Hoje, estou guiando você pelo reino amante do modo de edição de objetos no Figma Você conhece aquele lugar com aquelas linhas listradas. Você pode se sentir um pouco como um leveti de design. Mas se você já se viu em uma armadilha acelerada, não tenha medo Estou aqui para ser seu mago do Escape. Então, por que estamos nos aprofundando nisso no início do curso? Bem, se você clica duas vezes como eu, pode ter entrado no território sem saber Vamos diminuí-lo e aprender como romper com isso. Por exemplo, atualmente estou no modo Object Tor. Por acidente Vamos imaginar que seja acidentalmente. Se você quiser sair disso, basta clicar na linha Noman E você está fora do modo objetivo. exemplo, outra opção é que, se eu entrar no modo objetivo, essa barra aparecerá ou a barra de navegação mudará para esse modo objetivo, e você poderá cunhá-la Mas se eu entrar no modo objetivo, você pode ver que temos algumas opções, como editar nosso Então, atualmente quadrado, eu posso transformar esse quadrado em outra coisa, como eu posso fazer isso em don ou eu posso mudar a forma, se eu também puder fazer algo parecido, digamos, eu quero fazer esse lado ao redor dele, para que eu possa arrastá-lo assim. Eu posso arrastá-lo para fora ou para dentro para criar essa forma estranha Ok, digamos que você queira remover esse campo. Então, o que você pode fazer é escolher essa ferramenta de balde de pinos, o atalho é para essa B. Então, como você pode ver, o ícone ou cursor se transforma nessa gota E nessa queda, temos o botão de menos. Como se tivesse um símbolo negativo. Se eu clicar nele, você verá que o campo foi removido. Mas se eu quiser adicioná-lo novamente, basta clicar nele e, por padrão, ele escolhe cinza. Você também pode alterar a cor dela. Você já sabe como mudar a cor. Então, eu vou escolher este agora. Ok, eu estou realmente obcecado com aquele local industrial. Então é assim que você pode sair do modo de edição de objetos. Mas digamos que você queira entrar intencionalmente no modo de edição de objetos O que você pode fazer é escolher o elemento ou a forma e clicar nesse botão, como o botão quadrado pontilhado Então agora você está no mod de edição de objetos. Você pode editar ou criar um objeto como esse. Você pode fazer qualquer coisa com isso, vamos fazer algo estranho Oh, eu fiz P. Oh, não aquele P. que eu fiz em alfabeto OK. Então é assim que podemos sair do modo objetivo e das coisas que você pode fazer com mais edição objetiva Então, vou deletar essa obra-prima. Isso serve ao seu propósito. Agora, você está armado com o conhecimento do que é o modo objetivo como sair dele com elegância Então esse é o Porto Video, e vejo vocês no próximo. 14. Como usar a ferramenta de escala e seleção no Figma: Tudo bem, designers, vamos revelar o mistério da ferramenta de dimensionamento versus seleção no Figma Confie em mim, é um pouco peculiar, e eu te ajudei a navegar Primeiro, temos uma ferramenta de seleção. Oh, este é o p. Eu encaminho deleto um P. Ok, ele está excluído agora. Vamos pegar esse retângulo e duplicar esse. Se eu tentar reduzir a escala como segurar a tecla Shift, como você pode ver, o banner fica estranho Ele tenta amarrar, mas não o usa, e atualmente tem tamanhos de oito, então permanece 48. Então, como podemos reduzir nossos objetos ou elementos no Figma, Então, para isso, deixe-me desfazer isso primeiro. Então, vamos para a ferramenta de seleção e, abaixo desse movimento, temos Então, se eu escolher a escala, segurar a tecla Shift e diminuí-la. Como você pode ver, temos nosso sctgle amarrado, e você pode fazer o oposto, como torná-lo grande ou pequeno Então, com a ferramenta de seleção, a mágica acontece, a escala proporcional de tudo, do traçado e do tipo Mas algumas pessoas podem estar pensando que, digamos que você seja um designer, trabalhe com, tipo, photoshop ou anova E deixe um monte de mensagens de texto. E você pode estar pensando : vamos agrupá-los. Se você os agrupar, funcionará. Eu sei. Eu também sei. Mas se eu os agrupar, digamos, controle o grupo de fotos. E se eu tentar agrupá-los e, tipo, quebrá-los ou encolhê-los, como você pode ver, eles afundam ou ficam grandes, tipo, de uma forma estranha, não como Portanto, não funciona quando agrupamos as coisas. E sim, também existe um atalho para isso. Eu sei que você pode estar pensando em escala. Mas não, é uma ferramenta K para seleção. Eu sei. B é a lógica, mas é uma forma famosa de ferramenta de seleção e K de dimensionamento. Então, para seleção. Então, atualmente, estou escolhendo tudo isso. Então, ele é selecionado e K para seleção. Eu prometo que até o final deste curso você estará batendo e se tornando escravos Agora, você está armado com esse conhecimento de habilidade e seleção Vamos avançar para o próximo vídeo. Coloque-nos, meus camaradas de design. 15. Grupos e quadros Figma para designs de interface do usuário melhores: Bem-vindos, estudantes. O B de hoje nos levará às profundezas do reino da Figma Explore as nuances entre grupos e quadros. Baggala porque estamos entrando em um território um pouco mais complexo Mas não tenha medo. Estou aqui para guiá-lo por isso. Até que você tenha lido o básico, e aqui defina os tipos, as fontes, retângulo e as ferramentas, mas agora vamos transformá-lo em algo Bem-vindo ao mundo das molduras. Sei que estou introduzindo esse tópico no início do curso porque o MusteringFrames foi um dos desafios do MtricsFMA e quero ter certeza de que você está à Primeiro, vamos revelar o domínio dos grupos. Então, vamos pegar uma elipse retangular, bem como Então, como você pode ver no Menu Burger, essas são as formas que adicionamos, mas essas coisas não estão organizadas, e você também pode ver todas as coisas na página inicial, as linhas, retângulos, a linha número dez, retângulo dez Então, é um pouco confuso e organizado. Então, nesse caso, o que podemos fazer é selecionar todos eles assim, e podemos tentar clicar nele e clicar na seleção do grupo. Agora, eles são um grupo. E digamos você queira mover isso para a interpágina Você pode simplesmente movê-lo assim. Com um único clique. Você não precisa arrastá-lo e soltá-lo dessa forma repetidamente, então você pode fazer isso de uma só vez. Então essa é a grande vantagem do grupo. Isso torna nosso design organizado, assim como você pode ver no painel de camadas. Agora temos uma seção chamada grupo e o ícone dela pontilhado em um quadrado E nisso temos nossas formas. Podemos renomeá-lo de acordo com seu design. Mas, por enquanto, vou continuar como está. Digamos que você queira organizar isso, como no design. Então, o que você pode fazer é clicar duas vezes nele e rastreá-lo assim. Eu sei que podemos fazer isso em alinhamento. Mas esse tópico é um pouco mais avançado, eu diria. Ok, então é assim que podemos unir nossos elementos e objetos. Ok, esse é o único benefício do agrupamento. Você também pode usar a palavra de atalho Control G, deixe-me agrupar isso, clicar com o botão direito do mouse e desagrupar E se eu selecionar OK, agora é Desagrupar. Se eu selecionar todos eles, e eu puder simplesmente pressionar Control G. Agora, todos eles estão agrupados Agora, vamos mergulhar nos quadros. Ok, agora temos esse pequeno painel de navegação ou seção de navegação onde temos muitos botões. Então, atualmente, eu não mencionei que tipo de botões eles são, mas vamos imaginar que esse seja o botão home. Esse é o botão de categoria. Este é um botão de pedido. Este é o botão da minha conta, e talvez seja o botão do cartão. Ok, então vamos emoldurá-los. É o mesmo processo. Selecione todos os elementos do objeto e, diretamente sobre ele, a seleção do quadro. E você também pode usar o atalho Control G. Ok, então esse é o quadro agora Se eu entrar em um painel de camadas, você pode ver que esse é o quadro e o ícone também é alterado. Ok, então temos esses elementos aninhados dentro, e essas são as outras formas e objetos Podemos fazer as mesmas coisas que fizemos com grupos. Podemos organizá-los assim ou podemos sair. Atualmente, isso está fora do quadro. Podemos arranjar tudo amarrado e tudo mais. Nós podemos fazer todas as mesmas coisas. Mas com os quadros, obtemos mais recursos, como conteúdo do clipe e restrições Agora, deixe-me mostrar que tipo de recurso temos com molduras. Então eu tenho esse clone do Instagram. É um clone realmente básico. Portanto, atualmente temos essa seção horizontal semelhante a uma história, e eu não quero que essa seção seja visível como essa moldura externa. Então, o que eu posso fazer é clicar no conteúdo do clipe. E eu posso simplesmente rastreá-lo assim. E se eu entrar em um protótipo, você pode ver, eu sou capaz de fazer isso Eu também posso fazer isso. Portanto, esse é o benefício do conteúdo do clipe e, no final, é o quadro. Então, como você pode ver em menos painel, é a moldura. Ok, então esse é o superpoder do conteúdo do clipe, mas, mais parecido com quadros, introduza o conceito de restrição Ok, agora, vamos falar sobre as restrições. Ok, então temos esse grupo. Deixe-me desagrupar este primeiro. Ok, então agora é ngroup e deixe-me selecionar todos eles. Deixe-me reduzir um pouco. Vamos movê-lo para cá. E também adicionei nossa marca, que é click card. Agora, esses elementos não são grupos, nem molduras. Então, deixe-me selecionar todos eles. E clique com o botão direito e selecione o quadro. Agora, digamos eu quero que esse elemento esteja ou que esse texto esteja no lado esquerdo e também na parte superior. Então eu vou para um culto e vou para a esquerda e para cima. Essa é a configuração básica. Agora vou escolher a direita e a parte superior e esta deve estar na parte superior direita, esta deve estar na parte superior direita. Por exemplo, se eu fizer essa coisa grande ou pequena, ela tem que ficar no mesmo lugar do lado direito. Esse elemento deve ficar no lado direito e esse elemento deve ficar no lado esquerdo. Deixe-me duplicar este. E se eu importar, desculpe, se eu adicionar um pitch de dextop como esse, e se eu o adicionar aqui, se eu tentar estender isso, como você pode ver, posso reutilizar meu elemento repetidamente Esse é o benefício da restrição. E lembre-se, uma coisa. Se você quiser desagrupar o quadro, há uma opção chamada desagrupar Agora é desagrupar. E também funcionou com grupos, digamos que você tenha algum elemento. Digamos que esse seja o elemento do grupo. OK. E se você também quiser agrupar isso, use o mesmo método. Desagrupe o trabalho para ambos, como para a seleção de quadros, bem como para a seleção de grupos Ok, deixe-me acender este porque não estamos usando este. Ok, eu também fiz. Então essa é a restrição. Eu sei que foi um pouco confuso, como a restrição e o conteúdo do clipe Mas ao usá-lo repetidamente, você se acostumará e ele se tornará uma de suas ferramentas favoritas. Sei que apresentei esse tópico cedo porque, à medida que você progride no FiMMA, encontrará molduras Eles se tornam a escolha preferida devido a seus recursos extras, como restrição, variante e muito mais, que exploraremos em profundidade em tópicos futuros em vídeos futuros Da próxima vez, você se perguntar por que aquela placa de itens U gratuita está cheia de molduras. Você saberá disso porque os profissionais do frame estavam com eles. Você apenas arranhou a superfície das molduras e ranhuras À medida que avançamos, as coisas ficarão mais incríveis, não complicadas. Aceite a confusão agora e em breve você estará soldando estruturas como um mago do design. Você está pronto para mais aventuras de Figma porque eu estou? Então, vamos mergulhar no próximo vídeo e mais segredos de design. Portanto, fique curioso. 16. Skillshare 101: como enviar projetos e mostrar seu trabalho: As mentes criativas são bem-vindas de volta à Figma Master Class. Nesta aula magistral de figos, minha abordagem é aprender fazendo. Hoje, estamos mergulhando na parte emocionante da jornada. Isso é enviar nossos projetos no Skillshare. Então você está usando essas habilidades de design e conquistando os projetos do mundo real. Agora é hora de compartilhar sua obra-prima com o mundo. Então, aqui está como você pode fazer isso. Depois que seu projeto for concluído, é hora de compartilhá-lo com o mundo. Envie sua obra-prima em Skills Inspire outras pessoas com sua criação exclusiva Então, deixe-me dizer como você pode enviar seus projetos. Ok, então durante toda a aula, eu apresento alguns desafios de design como este. E nesse desafio de design, mencionei tudo o que você precisa fazer nesse desafio de design, bem como todas as instruções fornecidas aqui. Além disso, há um p na seção de recursos. Então, se formos ao projeto e ao recurso, há um Zile para baixá-lo e para abri-lo E nisso temos o arquivo de exercícios de design Figma UX e UI. Vá para este arquivo. E, como você pode ver, existem os pequenos desafios de design. Este desafio de design ajudará você a aprender o design Figma e x. Acho que há um total 18 pequenos projetos, mais pequenos desafios de design. E depois disso, anexei projetos traseiros do Word. O primeiro projeto traseiro é clicar no carrinho. Ou seja, vamos criar esse aplicativo. Nesta seção, você só precisa enviar esse projeto para a seção de projetos. Eu vou saber como enviar isso primeiro. Deixe-me falar sobre os outros projetos. Então temos o Projeto número dois. Fique. Este é o albergue onde você pode reservar um pequeno albergue quando estiver de férias em outro país. Então, temos o aplicativo de entrega de comida. Você precisa criar bots de aplicativos logo depois disso , temos o MCA, você pode criar o Aflac Spotify. Depois desse projeto número f, você precisa criar um aplicativo ou site Neste projeto, eu não vou te ajudar em nada. Mas, para cada projeto, dei todas as instruções, como o que você precisa fazer, de onde obter inspiração, onde enviá-la e que tipo de técnica, que tipo de matriz de figo você deve aplicar para concluir este Então, esses são o projeto Fire Word. Você tem que fazer isso. Deixe-me dizer agora como enviá-lo. Digamos que você tenha projetado esse wireframe. Agora você quer enviar isso para um compartilhamento de esqui. Você quer mostrar isso para o mundo. Então, podemos simplesmente ir esquiar há uma seção chamada Projeto Summit. Clique nisso E você pode adicionar uma imagem em miniatura. Você pode fazer uma captura de tela disso. Deixe-me mostrar como você pode fazer isso. Faça uma captura de tela do seu design como esta e envie-a aqui, faça o upload da imagem aqui e você poderá fornecer um título de projeto, como se o título desse projeto fosse estrutura de arame Assim, você pode adicionar o título do projeto, como quadro para carrinho de cliques e depois adicionar a descrição do projeto, como o que você fez neste projeto. E depois disso, você pode adicionar um link, mas eu direi que adicione um link para projetos traseiros porque esses projetos se comportarão Eu sei que há muitos estudantes que são criativos do que eu. Você pode gravar a tela de como você usa o aplicativo, como ele é visualizado, como ele interage com o usuário e adicioná-la aqui, e também tornaremos esse projeto privado, adicionando o texto como web design, X, Figma, assim E depois disso, envie o projeto. Vou te dizer uma coisa. Se você está projetando pequenos desafios de design. Então você pode torná-los privados. Então, eu só posso assisti-los, eu acho. E, então, eu só posso observá-los, como estamos nesta aula. E se eu quiser mostrar seus projetos ferroviários reais para o mundo , você pode se inscrever não precisar torná-los privados. A comunidade de esculturas está aqui para apoiá-lo em cada etapa do caminho Interaja com outros alunos e troque bem de volta. Eu celebro a conquista um do outro. Lembre-se de que isso não é apenas um desafio de projeto. É uma oportunidade para você crescer, aprender e mostrar suas habilidades para o público global Então, você está pronto para enfrentar o desafio? Deixe sua criatividade crescer no projeto Cm hoje. Agora, desafie o projeto de escultura e faça parte da comunidade de criadores da Wron É o seu potencial e seja um animal de estimação duradouro com seu projeto. Mal posso esperar para ver o que todos vocês criam. Lembre-se de que sua jornada é se tornar um especialista em figma. Vamos criar um pouco de mágica de design juntos. 17. Projeto de curso 01 Wireframe: Create lembra que é hora do projeto, e estamos mergulhando em algo incrível juntos Então você está acompanhando. E talvez você se encontre em estágio semelhante ou talvez um pouco atrasado Não se preocupe porque estamos juntos nisso. Se você está na mesma página ou precisa se atualizar um pouco, vamos chamar esses amigos. Agora, quero que você o mantenha um pouco próximo ao meu layout. Mesmo se você estiver pensando, talvez não esteja lá. Vamos lamber isso. Por quê? Bem, isso ajuda você a acompanhar este curso sem problemas Esses exercícios são essenciais para explorar todos os recursos interessantes que o FMA tem a oferecer Agora, verifique seu arquivo cis, há uma seção chamada projetos de exercícios FMA Abra e vá. Os requisitos para diferentes projetos de classe estão bem definidos Agora, utilize as habilidades que você adquiriu até agora, e sua criação deve ser semelhante ao exemplo dado Para ver mais de perto, amplie o PNG. Também é fornecido no arquivo de exercícios de recursos. Portanto, há uma versão grande do Pj chamada, eu acho, clickt Agora, vamos falar sobre os requisitos. Nosso objetivo é cerca de seis páginas. São como uma página de introdução. É muito simples de criar depois da página inicial, da categoria do menu de hambúrguer, da minha conta e dos meus pedidos E se quiser ser mais criativo, você pode adicionar uma página, como a página de acompanhamento, bem como, digamos, detalhes do produto Você também pode criar essas páginas. E lembre-se de que estamos projetando WiFire usando formas simples, bem como pontos simples Não use fontes muito divertidas. E depois de concluir seu projeto, faça uma captura de tela. Para pessoas com PC, é como uma tela impressa, e para pessoas com Mac, acho que é o coma ship four. E se você perdeu em algum lugar , o Google é seu amigo. Você pode pesquisar no Google ou é um atalho para uma captura E se você não quiser fazer uma captura de tela, basta capturar uma foto com seu smartphone e enviá-la para a seção do projeto Sei que parece um pouco mais de dever de casa, mas confie em mim. Vale a pena. Estamos aprimorando nossas habilidades, aprendendo o básico e melhorando juntos Então, guerreiros de wireframe, eu vou ver vocês no próximo vídeo Então pronto, esse design. 18. Melhores pacotes de conjunto de ícones gratuitos para designers da UIUX: Colegas designers. Hoje, vamos mergulhar nos tesouros dos ícones gratuitos e discutir onde obtê-los Não vou simplesmente dizer o nome do site para você. Em vez disso, vou orientá-lo sobre o que procurar ao baixar ícones para seus projetos Figma Meu destino preferido é a comunidade Figma. Nisso, temos recursos fantásticos com uma mistura de conteúdo gratuito e premium. No entanto, a Internet está se unindo aos ícones gratuitos. Então, explore e descubra o que melhor combina com você. Agora, vamos à comunidade Figma e vamos explorar alguns ícones gratuitos Ok, então, como você pode ver, atualmente, estamos em projetos. Então, se eu for para casa, há uma opção chamada Explorar Comunidade, ou você também pode acessar a partir daqui. E para a comunidade, o símbolo é uma espécie de globo, espécie de globo da Internet. E a partir daqui, você pode acessar todos os tipos de ativos diferentes, como ícones , projetos diferentes e estruturas de arame. Você escolhe, você vai ter tudo aqui. Então, deixe-me encontrar alguns ícones aqui. Então, como você pode ver, temos alguns ícones aqui. Esses são os pacotes de ícones. Ele contém 1.000 ícones gratuitos. Você pode ver que este telefone contém 6.000 ícones, e isso é adequado para esse tipo de software, como o Pigma sketch ou XD e outros pneus Você também pode classificá-los por, por exemplo, pad grátis ou premium. Atualmente, vou escolher gratuitamente. Você também pode usar plug-ins no próximo vídeo ou provavelmente depois de dois vídeos. Vou te dizer como usar plug-ins porque os plug-ins são muito simples de usar e você só precisa arrastar e soltar. Então, em vez de usar isso, você pode usar plugins. Ok, então você também pode classificar isso por trem popular e recente. Eu uso principalmente o popular. Porque na seção popular, temos muitos ícones que as pessoas adoram. Principalmente eu uso este como o Bazel, bem como este unicórnio Até agora, vamos usar molduras, acho que estou prometendo, certo. OK. Então eu acho que eu já uso isso, então é por isso que ele está mostrando fuma aberta Mas algumas pessoas podem ter essa opção duplicada. Portanto, se você estiver vendo uma duplicata, você pode duplicar, mas atualmente está menos aberta no Figma e ela abrirá um E nisso teremos muitos ícones. Então eu posso ver que temos um monte de ícones. Esse é o esboço. Esses são os ícones sólidos. Digamos que se você quiser usar esse ícone como este ícone inicial, basta copiá-lo como copiar contras e colá-lo em seu design Ok, então temos esse ícone inicial. Podemos simplesmente rastreá-lo aqui porque essa será nossa seção inicial, como o botão home. Como você pode ver, temos um ícone roxo em forma de diamante em nosso ícone. Como no painel, você pode associar isso aqui. Esse é o componente. O componente é como adicionar um tópico. Vamos abordar esses tópicos em vídeos futuros. Estádio para isso. Portanto, lembre-se de que esse é o componente principal e podemos usá-lo diretamente sempre que quisermos e onde quisermos. Agora, vamos descartar mais alguns ícones gratuitos. Ok, então existem alguns sites como o icon scout. Neste site, podemos obter todos os tipos de coisas relacionadas ao EIUX Isso também é como a comunidade FMA, mas esses modelos classificados e populares também estão disponíveis aqui A próxima é a escolha gratuita. OK. Então, deixe-me baixar um elemento daqui. Vamos supor que eu vou com este. Portanto, há uma opção chamada PNG, e podemos baixá-la. Por enquanto, vamos usar PNG. OK. E deixe-me baixar também o SVG. Acho que não há opção. Mas deixe-me baixar um arquivo SVG. Ok, então, atualmente, estou no site de localização de ícones. Portanto, temos duas opções, como arquivo PNG e arquivo S G. E em outros, também temos outras opções. Mas, por enquanto, quero baixar o arquivo SVG. Então, vamos baixar o arquivo SVG. E deixe-me importar esses arquivos em nosso projeto. Este é o arquivo SG e este é o arquivo PNG. Deixe-me passar por aqui. Estou esperando, eu não fiz um turno, mas por enquanto, vou segurar o turno. Ok, então temos o PNG e também temos o SG Mas com o SVG, podemos fazer muitas coisas. PNG é só uma imagem. Você não pode fazer muitas coisas com PNG. Mas com o SEG, você pode fazer muitas coisas. Atualmente, ele tem esse amplo plano de fundo. Ok, deixe-me tirar isso da moldura. Ok, então temos esse ícone G. Então, com esse arquivo SVG, podemos aumentar o traçado, digamos que eu queira que o traçado seja cinco Também posso mudar a cor do traçado. Então, digamos que eu queira que seja branco, posso trocá-lo de branco da mesma forma que posso fazê-lo escolher e não vai perder qualidade, por exemplo, se eu aumentar tanto, ele permanecerá o mesmo. Mas se eu aumentar o arquivo PNG, como você pode ver, o pixel fica meio embaçado, mas com o arquivo, não é o Ok, então essa é a diferença entre arquivos PNG e SVG. Portanto, lembre-se de quando estivermos usando ícones. Não use PNG. Eu direi que use arquivos SVG Ok, então é aqui que você pode encontrar todos os tipos de ícones para seus projetos. Eu lhe darei todos os links nos recursos. Então confira isso. Então, essa é a biblioteca de UX, essa é a base de ícones. Este é o La Pannja. E a escolha gratuita após o ícone nos encontra. Então, esses são alguns recursos gratuitos que você pode usar em seus projetos. E são totalmente livres de direitos autorais. Você pode usá-los diretamente. Mas antes de usar qualquer ícone semelhante, lembre-se de que o ícone é gratuito ou não. Digamos que você esteja importando alguns ícones do like icon scout Será uma parada. É de uso gratuito , comercial ou pessoal. Então, seja isso e use de acordo com. Isso. É assim que você pode baixar importação e os recursos para ícones. Agora, vamos gravar no próximo vídeo para aprimorar nosso wireframe com alguns dos ícones. Portanto, seja criativo. 19. Noções básicas de ícones no Figma: Em estudos anteriores, aprendemos sobre como baixar ícones gratuitos e onde obtê-los. Também vimos a diferença entre PNG e SVG. Também descartamos a comunidade, a comunidade Pigma, e também vimos alguns outros recursos Então, neste prédio, vamos realmente usar CoS em nossa estrutura de arame. Por isso, estamos mergulhando em nosso arquivo de acesso ao PMMA para trazer alguns CoS e garantir que eles se harmonizem alguns CoS e garantir que eles se com nosso design existente Então, vamos fazer com que pareçam lisos e uniformes em toda a nossa estrutura de arame Então você está pronto? Então, vamos começar. Então, vamos até nossa ferramenta de retângulo e posicionemos a imagem. Portanto, neste arquivo de acesso, haverá ícones de clique dobrados, então abra todos eles e coloque um por um Ok, então esses são cinco ícones. OK. Então, como você pode ver, adicionamos algum lugar d aqui, e este é o quadro. Então, deixe-me deletar essa caixa retangular. OK. Deixe-me selecionar isso e OK. Então, agora, a primeira vai ser nossa casa. Quadrado, vou colocar o ícone da minha casa. Depois disso, vou colocar a categoria. Depois disso, meu pedido, e este é para notificação, e este é para o nosso perfil. Ok, então atualmente, o tamanho dos ícones, direi que a largura é 22 pontos por um. A altura é 20 9117. Se eu quiser aumentar ou diminuir isso, você pode alterá-lo aqui. Ok, digamos que eu queira ir até 30, então eu posso ir até 30, e isso aumentará a largura e a altura. Depende totalmente do seu design. Mas, por enquanto, vou continuar como está porque está ótimo. Ok, então vamos usá-los primeiro. Esta é a seção de alinhamento onde você pode alinhar qualquer coisa no Figma Se você clicar nessas três barras, como menu de barra vertical, há mais uma opção, como amarrado. Então, ele se encaixará de acordo com nosso design, e você pode colocá-lo no centro desta forma, e você pode ver que a parte inferior não está muito bem ajustada, então vamos clicar no ajuste inferior. E isso é ajuste agora. Também podemos alinhar isso no centro, assim. Nosso ícone inicial não é tão grande, então deixe-me torná-lo grande porque os outros ícones têm cerca de 35 e este tem cerca de 27. Deixe-me selecionar este. Essas são as propriedades de restrição se eu selecionar isso e, se eu alterar o valor da largura, ele automaticamente aumentará a altura e o tamanho aqui Atualmente, todos os nossos ícones têm o mesmo tamanho. Digamos que esse ícone de perfil pareça pequeno, você também pode aumentá-lo aqui. Até agora, vou manter*** Deixe-me selecionar isso novamente e deixe-me ajustar a parte inferior Portanto, se não conseguirmos entender isso na seção, não se preocupe. Vou fazer um vídeo delicado sobre isso. Atualmente, basta entender que a seção in é para alinhar nossos ícones Neste vídeo, estamos aprendendo como importar ícones e como tocá-los. Ok, então esta é a nossa seção. Então, vamos selecionar todos eles, como esta barra de navegação, bem como os ícones. Vamos deslocar e selecionar todos eles, assim como esse retângulo e perna direita, e criá-los como uma moldura Deixe-me te mostrar uma mágica aqui. Digamos que eu queira essa mesma barra de navegação aqui também no menu de hambúrgueres Nesse caso, o que eu posso fazer é que haja uma etapa tradicional, tipo, eu vou fazer todas as coisas de novo. Mas você pode fazer outra coisa, como selecionar esse quadro. Então, como você pode ver em um painel, ele está selecionado. Agora, basta controlar C, selecionar o menu de hambúrguer. Você tem que selecionar o menu de hambúrguer e colar aqui. Como você pode ver na mesma posição, colamos esse botão de navegação Quanto a nós podemos fazer isso aqui, mas Tate fez isso primeiro Categoria I. E também na minha conta. Arquivo Eu deletei o tigre direto, então deixe-me deletar todos eles. Acho que isso não é moldura. OK. Então, deixe-me deletar este também, Pasta Control e meus pedidos. Ok, então é assim que podemos adicionar nossos ícones em nossa estrutura de arame. Mas deixe-me mudar a cor dela. Não vou me opor mais. Ok, então a cor vai ser essa porque uma peça não parece tão estética, assim como deveria ser branca. E porque estamos na seção Bergme. Então, acho que na seção Burgom, não precisamos dessa barra de navegação de navegação, então vou excluir esta OK. Ok, o quadro quatro está vazio. E, atualmente, estamos na categoria. Então a categoria deveria ser L. E esta é L. Deixe-me fazer isso branco branco branco branco. E essa é minha conta. Então esse perfil deveria ser L. E esse deveria ser branco. O mesmo com este. Ok, então esta é a nossa barra de navegação. Então, o usuário saberá nesta seção que ele está, digamos , na página inicial. Então, isso indicará que estamos na página inicial, se estiver na categoria, então esse ícone indicará estamos na seção de categorias depois disso, em meu perfil, bem como em meus pedidos. Estudantes, é assim que você pode adicionar ícones ao seu iframe ou aos seus designs de interface do usuário Então esse é o Ford Will e vejo vocês na próxima. 20. Como instalar e usar plugins no Figma: Olá, design para ias. Nesse caso, estamos mergulhando na fonte secreta que torna a Figma incrível Isso é plugue. Essa ferramenta bacana é criada por dragais fora do Amplie os recursos da plataforma permitindo que você faça mais e trabalhe com mais eficiência. Vamos nos concentrar em alguns plug-ins por enquanto. Mas lembre-se de que existe um mundo inteiro de plug-ins e todos eles podem ser acessados por meio da comunidade Figma Portanto, existem três opções nas quais podemos usar plug-ins. Como no primeiro, podemos entrar neste ícone do Figma. Há uma opção chamada plugins. Estes são alguns plugins instalados no meu Figma. Agora, você pode ir até esse botão. Esse é um recurso. E nisso, podemos acessar plug-ins e pesquisar diferentes tipos de plug-ins, e também podemos marcá-los clicar diretamente neles e usá-los Por exemplo, digamos que eu queira adicionar uma foto de perfil. Posso simplesmente selecioná-la, e digamos que eu queira que o perfil seja esse. Então, posso simplesmente clicar nela e, como você pode ver, a imagem é adicionada O Digamos que você queira conectar o ícone, então você pode simplesmente pesquisar o ícone. Ícones, e ele fornecerá alguns plug-ins de ícones muito populares. Vamos usar, digamos, o ícone oito. E só precisamos clicar porque ele não está instalado no meu sistema. Ok, então ele está instalado agora. Ok, então essa é a interface do plug-in icon eight. Podemos pesquisar como eu quero o ícone da casa. Posso simplesmente pesquisar na página inicial e também podemos escolher opções diferentes como a opção PNG p. Também podemos mudar a cor dela. Também podemos alterar o formato dos ícones. Digamos que eu queira esse botão home, para que eu possa simplesmente arrastá-lo, colá-lo e usá-lo sempre que quiser. Essa é a vantagem de usar o plug-in. Também podemos acessar o plugin por meio da comunidade. Você pode simplesmente ir para a comunidade. Digamos que eu queira apenas plug-ins do LetsPicture. Claro. E eu posso curtir nos plug-ins. Existem 47 plugins, e eu posso simplesmente clicar em Abrir. Eu posso resolver isso. Vamos para o popular. Então, esses são alguns plug-ins populares, então eu posso simplesmente abri-los no meu figma E como você pode ver, você está perguntando onde deseja abrir seus plug-ins, então vamos entrar sem título e executar Esse é um método meio difícil. Eu já mostrei como abrir plug-ins a partir dos recursos. Use esse também. Digamos que eu queira adicionar minha foto de perfil aqui. Ok, isso parece legal. Eu vou com esse. É assim que você pode usar os plug-ins. Lembre-se de que os plug-ins que usamos ao longo do curso podem ter interfaces diferentes, mas o conceito subjacente permanece o mesmo. Facilitando as capacidades do Pigma. plug-ins são um aspecto interessante do Figma, e exploraremos mais deles em vídeos futuros Prepare-se para se aprofundar nos pixels ou Pizza Bay e em outros plug-ins poderosos ao lado da trilha. Te vejo lá 21. Projeto de curso 2: como dominar a caixa de ferramentas: ícones e plugins para designs poderosos da Figma: Olá a todos, bem-vindos de volta à nossa jornada de design. Hoje, estamos mergulhando no maravilhoso mundo da Figma. De forma criativa, não conhecemos limites. Espero que todos estejam tão animados quanto eu porque estamos prestes a levar suas habilidades para o próximo nível. Como você sabe, estamos explorando as incríveis capacidades do Figma, e a sessão de hoje trata traduzir esse conhecimento em Você aprendeu sobre ícones, plug-ins e a mágica que acontece quando eles se juntam. Agora, vamos ver isso na ação enquanto você embarca em seu próprio projeto Em primeiro lugar, quero que todos vocês verifiquem o excesso de arquivos. Você encontrará as ferramentas preciosas dos ícones para apimentar seu design E você já não sabe como adicionar plugins no figma, abra isso. Pense nisso como seu playground de design. Agora lembre-se de que a flexibilidade é fundamental. Sinta-se à vontade para brincar com esses ícones e plug-ins. Mas lembre-se de que alguns plug-ins podem ajustar o tamanho dos seus ícones Portanto, não se preocupe, adapte-os para se adequarem ao seu design. Sem rumo. É tudo uma questão de torná-lo exclusivamente Para lhe dar um pouco de inspiração, aqui está um resumo do meu próprio projeto Observe a aparência geral dos ícones e plug-ins. É como adicionar um toque de personalidade ao seu design. Agora, vamos ver com o que você pode vir. E este é o arquivo de instruções em nosso exercício do projeto FDMA Você pode passar por isso, e todas as instruções estão escritas aqui e, no final, quando terminar seu projeto, envie esse arquivo para mim. Você pode fazer uma captura de tela ou capturar uma foto do design e enviá-la para mim. Estou aqui para ajudá-lo em cada etapa do caminho. Se você tiver alguma dúvida, fique à vontade para perguntar. Vamos transformar isso em uma jornada colaborativa. E lembre-se de que essa não é a nossa forma errada de design, novas descobertas empolgantes Então, meus incríveis designers, vamos trazer um jogo e transformar essa moldura em obra de arte. Mergulhe no Figma, explore os ícones , use o poder dos plug-ins e deixe sua criatividade correr como um selvagem Mal posso esperar para ver o que você vai inventar. Vamos fazer desse projeto um para os livros. 22. Como criar e usar páginas em seu arquivo Figma: Bem-vindos aos alunos desta licitação, vamos mergulhar na dobra de páginas da Figma Embora possa ser um pouco enfadonho, confie em mim, é uma ferramenta organizacional crucial que manterá seu trabalho de design rígido e flexível . Então, vamos começar. Em primeiro lugar, você provavelmente notou que já temos uma página padrão. Essa é a página número um. Agora, essa página contém todos os quadros que criamos até agora, provavelmente a página IntervageHome, a categoria do menu de hambúrguer, minha conta Para tornar isso mais claro e organizado, criaremos novas páginas. Por exemplo, vamos clicar no botão desta página e adicionar uma nova página ou podemos renomear essa página Então, vamos renomear essa página. Atualmente, é a primeira página, então vou renomeá-la como click art Mobile App Para renomeá-lo, basta clicar na sua página número um E agora podemos mudar o nome. Ok, então esse será o nome da nossa página. Agora, vamos adicionar outro nome de página. Digamos que queremos criar um aplicativo dextp ou aplicativo para tablet. Então, nesse caso, vamos criar uma nova página. E com isso vamos criar um design específico para tablet. Ou deixe-me renomear isso novamente porque este é para celular Se alguém acessar esse arquivo, essa pessoa ficará confusa. O que está acontecendo? Como se este fosse um tablet. Eu entendo, mas qual é a pergunta acima? Então, deixe-me renomeá-lo para celular. Ok, então temos duas páginas. A segunda está totalmente vazia, então não temos nenhum item nela, mas vamos adicionar algumas molduras. Então, tablet, vamos escolher tablet. Ah, isso. Ok, então somos o surface pro e o iPad mini eight e o iPad 11 e o iPad pro 0.12 0.9 Então, vamos pegar esse de 12,9 polegadas. E podemos criar algumas páginas múltiplas, eu diria, como segurar Alt e tublicar E digamos que temos seis páginas, eu acho, seis quadros em nosso aplicativo, então vamos fazer a mesma coisa. Ok, então essa será nossa seção de mesas. Então, eu não vou projetar isso. Estou apenas mostrando isso para fins de demonstração, por exemplo, como usar páginas. Como se você quisesse criar todo o aplicativo para tablet assim. Você pode criar uma nova página, criar esses novos quadros e criar um novo aplicativo para tablet ou criar um site semelhante a um desktop para o mesmo aplicativo que é um cartão de clique Então, se você estiver interessado nisso, faça isso, e você ganhará alguns pontos extras, e você também pode compartilhar isso comigo e você saberá para onde enviar esse projeto. Você pode fazer uma captura de e enviá-la para a seção do projeto Ok, agora vamos passar para a nova página e criar uma página única, e nela vamos adicionar cartão, Tastro e luto Ok, então esta vai ser nossa primeira página. Deixe-me movê-lo para cá. Apenas segure. Basta clicar nele, segurar e arrastar assim. Então, vai seguir em frente. Então, eu arquivo de recursos, arquivo de exercícios Figma Eu adicionei esse fluxo de tarefas, esse fluxo de tarefas e um resumo. Então você só precisa copiar e colar aqui. Então você não sabe como adicionar isso, vá para a seção inicial e clique em Importar. Escolha um do computador. Ok, eu arquivo de exercícios, está aqui, Figma, desculpe, clique no resumo do cartão e fale aqui, e se a extensão for fi Se você pode usar PNG, mas eu direi para adicionar o arquivo fi, arquivo Figma E menos importante. Ok, está feito, então está aqui. Basta copiar todas essas coisas. Quadro um e este quadro dois. Controle C, e vamos copiar isso em nosso Este é o lugar onde eu quero colar. Controle V. Este será nosso resumo. Esse será nosso aplicativo móvel e esse será nosso tablet. Ou se quiser criar outro site, você também pode criar uma nova página, renomeá-la e criar um site. Eu dou um desconto total em você Ok, agora, deixe-me mostrar alguns exemplos muito bons de páginas. Então, quando estamos tentando obter alguns ícones da comunidade, duplicamos esse arquivo como Basel e você pode ver que não temos nenhum, como ícones aqui porque estamos na página número um e o nome da página é miniatura E depois disso, ficamos totalmente profissionais. E no modo totalmente profissional, obtemos todos os ícones. Assim, podemos usar diretamente em nossos projetos. A mesma coisa com o design de unicórnio, você pode acessar as páginas A primeira são as capas, a segunda são os ícones, e temos muitos ícones, e podemos simplesmente copiá-los e usá-los. E há outro exemplo. Eu sei que estou dando muitos exemplos. Apenas tenha paciência comigo porque essa é a boa. Ok, digamos que alguém seja realmente um novato. Ele não sabe nada sobre o U x e conheceu esse novo recurso do iPhone que é uma ilha dinâmica E ele quer copiar esses elementos e usá-los em seu design. Então, se cairmos, você pode ver, não me deixaremos ir aqui Ok. Então, na primeira página, ele verá isso. Mas ele não está na seção da página. Então você pode ficar confuso. Então, nesse caso, ele pode simplesmente ir para esta seção de capa ou seção de página e acessar todos os elementos, como este status Hom Ba Mus, papel de parede, prancheta e grades . Essa é a grade. Portanto, a seção da grade é muito importante. Eu vou te ensinar in infattum para isso. Por causa das grades, podemos criar nossos aplicativos. In infat sottum para isso. Então é assim que as páginas funcionam. Isso nos ajuda a organizar nossas coisas em nossos designs. Ok, então, à medida que progredimos neste curso, criaremos um sistema de design simples. Geralmente chamado de guia de estilo, que será outro caso de uso para páginas. Por enquanto, certifique-se de ter criado páginas para o fluxo de tarefas móveis e para o toque na mesa. Se você estiver interessado nesse tipo de tabela, crie-o e faça um design e saiba para onde enviá-lo. E copia para a persona e o fluxo de tarefas para as respectivas páginas Tudo bem, meus alunos, estamos prontos com páginas. Então, mantenha-se organizado e eu te vejo no próximo vídeo. Feliz design. 23. Prototipagem Figma para iniciantes: Bem-vindo à experiência nesta licitação, veremos a tipagem de raízes multiversas Prepare-se, pois criaremos uma interação que nos permitirá navegar pelos nossos quadros sem problemas Então, deixe-me mostrar alguns versículos aqui. Então, como você pode ver, esta é a versão final do nosso aplicativo. Se eu aumentar o zoom. Então, temos alguns botões, imagens e tudo mais. Então essa é a versão final. Então, deixe-me mostrar um multiverso. Então, se atualmente estamos na seção de design, se eu entrar no protótipo, como você pode ver, isso é um pouco caótico e o multiverso está ao redor dele Não é chamado de multiverso. Eu chamo isso de multiverso porque parece engraçado. Ok, então essas são as linhas que acabamos adicionar para interagir com nosso aplicativo. Então, deixe-me ir ao nosso aplicativo principal, que será nosso wireframe do aplicativo de carrinho de cliques Então, atualmente, estamos na seção de design, se entrarmos em um protótipo, e atualmente ele não está selecionado nada, então estamos no espaço vazio Então, quando estamos em um espaço vazio, podemos escolher alguns dispositivos atualmente, escolhemos o iPhone 15 Pmax, podemos alterá-lo Podemos escolher qualquer dispositivo que quisermos. Podemos escolher entre, digamos, iPad, appog e Mac Book Mas vou manter o iPhone 15 PMx porque queremos classificar este em largura e altura, bem como nos mesmos pixels Então, também podemos mudar isso para horizontal ou vertical assim, e a cor do nosso iPhone é titânio natural. É por padrão. Você também pode escolher outra cor , que será p, a pré-seção do plano de fundo e o fluxo de correntes Portanto, não se concentre nisso agora. Mostrarei como o fluxo funciona no próximo vídeo. Então, se eu clicar em qualquer página, como atualmente estou no interage, se eu selecionar isso, você pode ver que aparece um ponto Ela aparece aqui, aqui, aqui, bem como aqui. Com esse ponto, podemos conectar nossas páginas. Então, eu posso conectar esta página assim. Você pode ver uma pequena seta e também há alguma interação. Digamos que, se eu digitar isso, se eu digitar isso no espaço, ele irá para esta página e será instantâneo. Então, essas são algumas configurações. Atualmente, vamos pular essa parte porque, na próxima, veremos essas coisas Então, agora vamos clicar na página inicial, a mesma coisa. Menu, ele se juntará à categoria e à categoria dois, minha conta e a última são meus pedidos, juntamos nossas seis páginas e, para começar basta clicar neste botão de reprodução aqui. Portanto, temos duas opções, como apresentar e visualizar. Se você clicar na pré-visualização, poderá ver esse menu aparecer ou esse pequeno popo aparecer E se eu clicar aleatoriamente em qualquer lugar da tela, isso muda porque a direção não é nada no momento Então, acabamos de adicionar um pouco de flop. Então, se eu clicar novamente no espaço vazio, ficará assim. Ele está apenas navegando em nosso aplicativo. Ok, então podemos decidir isso a partir daqui também. Portanto, esta é a seção anterior. E deixe-me te mostrar uma mágica. Então, se eu escolher a página inicial e mudar a cor desse banner e deixar eu ir para o design, teremos que usar o design para as mudanças E deixe-me transformá-lo em, digamos, se eu o fizer vermelho. Então, como você pode ver, ao mesmo tempo, na seção anterior, ele muda de cor. Deixe-me fazer isso. Então essa é a vantagem de também recebermos a mesma coisa ao apresentar. Então, deixe-me entrar na seção atual. Isso levará tempo. Depende totalmente do seu design. Então, atualmente, estamos na primeira página, não na primeira página, mas na página inicial. Deixe-me reiniciá-lo. Então, para reiniciar, é R. Ele aparece aqui. Se eu clicar no espaço vazio, entraremos na página inicial depois dessa categoria. Isso nesta categoria, na conta M e nos pedidos. Então é assim que o protótipo funciona. Se você clicar nesse espaço vazio, temos a opção de redefinir este aplicativo e também podemos navegar a partir daqui, como na segunda página, terceira, 4506, Também podemos alterná-lo para frente e para trás a partir desse botão. Também podemos adicionar comentários. E nesta seção, se tivermos vários fluxos, também podemos escolher isso. Atualmente, temos um fluxo, então ele está mostrando um fluxo. Digamos que você esteja apresentando este aplicativo para seu cliente e queira compartilhar essa coisa ao vivo com seus clientes. Nesse caso, você pode escolher isso e você pode me iluminar, clicar na linha spot Ele seguirá suas instruções. Depois disso, compartilhamos o protótipo. Você pode compartilhar ou criar protótipos com seu cliente e com seus amigos Você pode fazer algumas alterações, adicionar alguns anúncios de e-mail aqui e eles saberão como seu aplicativo funciona e como ele interage Opção, temos alguns tamanhos, como atualmente é 100%. Ok, atualmente está apto para a tela. Podemos escolher uma tela 100% adequada. Também podemos desativar algumas configurações aqui, e isso é para recitos Ok, então essa é a interface da seção pro present. E é assim que o protótipo funciona no Figma. Dessa forma, aprendemos como colocar o dispositivo na panela e no corpo horizontal. Também podemos alterar a cor da seção atual. Não aprendemos sobre o fluxo; próxima maneira, aprenderemos sobre o fluxo. Então, indique isso. E aprenderemos sobre o que mais aprendemos? Ok, aprenderemos sobre esta seção atual. Então, esse é o básico do protótipo, mas comparado a isso parece muito fácil A prototipagem é muito fácil. Sei que parece um pouco caótico, mas a prototipagem é uma das coisas mais fáceis que podemos fazer na Pois, como um exercício rápido, isso não é um projeto, apenas um exercício rápido. Eu sugiro que você interrompa a conexão do protótipo e configure uma interação específica para o botão Digamos que você crie esta página e digamos que você queira esse botão faça algo como se esse botão indicasse categoria. Então você pode se juntar a isso como uma categoria e simplesmente jogar com ela. Portanto, é apenas um exercício, não um projeto. Você pode fazer isso por um ph. E digamos que você domina algo e entra em outro lugar como este e não sabe como excluir isso, basta acessar este protótipo e ver a guia de interação na minha conta Basta clicar nesse sinal de menos, mas ele será excluído em seu ph. Ou você também pode pressionar o botão delete. Ele também será excluído. Então esse é o resumo do básico da prototipagem no Portanto, no próximo vídeo, daremos alguns passos adiante e adicionaremos animação usando a transição. Então, junte-se a mim no próximo vídeo para mais prototipagem de. 24. Prototipagem e transições Figma (Easing): Voltamos ao y x designer. Neste artigo, aprenderemos como criar protótipo de nossa estrutura de arame Anteriormente, aprendemos como prototipar nossas coisas, mas não havia nenhum detalhe Acabamos de entrar em nossas páginas assim. Se você não excluir isso como um protótipo, poderá excluí-lo Ok, então, nisso, vamos fazer essas coisas do zero. Se você não sabe como excluir isso, basta selecionar esse fio protótipo e pressionar delete no teclado É assim que você exclui o fio do protótipo. Eu chamo isso de fio. Ok, então, atualmente, estamos em um protótipo Se você estiver no painel de design, basta ir ao Ptype e eu quero fazer um protótipo deste primeiro Então tudo bem, então isso tem que ser como digitar. Ok, deixe-me deletar isso primeiro porque, para alguns alunos , pode ser confuso Ok. Então, deixe-me arrastar isso para. Aqui. Ok. Então, agora temos algum espaço. Então, deixe-me clicar na página inter e me juntar a isso. Portanto, nesta seção na interpágina, não temos nenhum botão ou item clicável Então, para isso, o que podemos fazer é simplesmente tocar em qualquer espaço vazio. Ele navegará até a página inicial. Como você pode ver, ele está navegando para a página inicial e a animação está se movendo Mas você pode definir qualquer animação. Você pode definir a instância dissolver a animação Mt, mover para fora, deslizar e deslizar para fora. Por enquanto, vou escolher dissol porque dissol é como uma animação básica E para estrutura de arame, devemos escolher animação normal, não tão sofisticada Ao trabalhar em um aplicativo real neste aplicativo real, escolheremos diferentes tipos de animação. Tenha isso em mente. Então, escolhemos dissolver. Depois disso, entramos , entramos e saímos. Temos muitos tipos de animação, então podemos escolher qualquer um deles e também obter uma prévia como ficará depois de clicar nesse espaço vazio. E depois disso, também podemos definir o tempo de animação atualmente bloqueado pelo Difult std Podemos dizer que mil mil é 1 segundo. Portanto, depende totalmente do seu design. Ok, então eu não quero nada fascinante aqui. Agora, vamos para a página inicial. E esse é o menu de hambúrguer. Então, vamos juntar esse menu de hambúrguer a esta página de menu de hambúrguer. Então, eu quero navegar nesses dois menus de hambúrgueres. E lembre-se de uma coisa. Como na criação de protótipos anterior, adicionamos algumas animações, como dissolver Então, será o mesmo porque Mar não redefine a animação. Ele mantém animações antigas e configurações antigas. Então, temos que mudar isso. Por exemplo, se você quiser mudar isso, você tem que mudar. Então, eu quero que esse seja o menu de hambúrguer, e deveria ser. Digamos que entre e a animação deva ser da esquerda, assim, e podemos definir easin e easin out Com facilidade, ele vem rápido e vai devagar assim. Se eu escolher aliviar, ele vem primeiro e o ajusto lentamente, como este. Eu sei que é confuso. Você pode simplesmente definir a hora em milissegundos e ver essas coisas como uma câmera lenta, para entender. Ok, então, para essa mudança, essa será a animação. Ok, então vamos fechar isso. Depois disso, ok, eu acertei em cheio. Se eu clicar aqui, ele deve ir para a página inicial porque, a partir da página inicial, fomos até lá. Ok, até agora, minha animação será removida e irá para a direita assim. Ok, vou manter o tempo 300 porque 300 perdem a nota. Se eu escolher 1.000 ou 2.000 , será muito lento. Ok, então temos que prototipar muitos protótipos , assim como temos que prototipar essas duas categorias, depois disso , pedidos, depois minha conta e depois desse perfil Ok, vamos nos juntar a essas duas categorias. Depois disso, temos minhas ordens. Ok. Eu não configurei nada. Ok, deixe-me definir isso primeiro. Vou manter a configuração como está, vou mantê-la dissolvida. Não quero nenhuma animação sofisticada para o wireframe. Analisaremos toda a animação e interação com o microfone em vídeos futuros, porque o wireframe não exige nada sofisticado Ok, então vou juntar todas as coisas e acelerar o vídeo. Ok, então eu esqueci, acho que uma página. Deveria haver uma seção na página de notificação, mas acho que esqueci que estava vazia Vou manter essa coisa como está. Eu não vou juntar isso a nada. Então, há um truque de mágica. Você não quer fazer tudo isso de novo e de novo. Como na seção de categorias, temos que juntar tudo de novo e de novo. Então, nesse caso, o que podemos fazer é excluir o primeiro. Eu sei que você ouviu direito. Você tem que deletar este. Este também, e este tem 12, e podemos simplesmente copiar esse quadro e clicar na categoria. Você precisa clicar nesse nome superior e colá-lo. E estará aqui no mesmo local e o protótipo será o mesmo com a conta e o mesmo com meus pedidos Então, só precisamos mudar a cor desses ícones. Para quem deve ser branco porque estamos na categoria, então vamos escolher essa cor para ser industrial e depois a mesma com esta Ok, eu fui para o modo de classificação de objetos. Isso. E esta é minha conta. Então, minha conta será industrial. Você pode escolher qualquer cor que quiser. Essa é minha cor favorita, então estou escolhendo essa. Ok. Mais uma vez, fui me opor a White. Minhas ordens, vai ser essa. Ok, então é assim que vai ficar. Então, se eu for para o protótipo, ficará assim. Se eu clicar aqui, você pode ver todas as coisas estão unidas. Não precisamos fazer essas coisas repetidamente. Temos que juntar todas as coisas como loja doméstica por categoria, meus pedidos repetidamente. Eu vou avançar com isso. Novamente, Bergamo, adicionei algumas coisas como lista de corredores, carteira, oferta, loja, cupom e clique em Então, eu não criei nenhuma página para eles. Então, se você quiser, você pode projetá-los, mas eu pensei que se eu projetasse isso, o projeto se tornaria muito, tipo , grande e seria avassalador Então, vamos continuar gravados e adicionar esses itens para melhorar a aparência do nosso design. Ok, então podemos entrar no menu Berg novamente. Ok, estamos quase terminando. Deixe-me verificar e avaliar a prévia do nosso aplicativo. Deixe-me apresentá-lo novamente. Ok, então, no momento, clique no disco recorte e, na primeira página, definimos apenas a animação da guia se eu tocar em qualquer espaço vazio, ele navegará até a página inicial. Ok. Então, deixe-me tocar nesse espaço vazio. Ok, funciona. A animação é dissolvida. Agora, se eu clicar no espaço vazio como este, ele me mostrará quais coisas são clicáveis Nesse caso, categorias clicáveis ou clicáveis, bem como minha conta e a seção de hambúrgueres bem como minha conta e Então, vamos para a categoria. Então, a animação é dissolvida. Eu já configurei a animação para ser dissolvida. E se eu escolher Bergman, Bergman, eu não criei Então, deixe-me ir para casa novamente. Ok, lar não é estado. Então é assim que os protótipos funcionam. E enquanto navegamos pelo nosso aplicativo, sabemos quais coisas estão conectadas ou quais não estão conectadas Então, meu filho mais velho e depois disso, novamente, minha conta. E animação doméstica não é status. Então, deixe-me arrumar a casa novamente para todos. Ok. Em cada dois sets em casa. Ok, então deixe-me tentar de novo. Então, se eu pressionar home, ok, está funcionando agora. E você pressionou o menu de hambúrguer. Então, no menu de hambúrguer, recebemos alguns itens clicáveis, como home show por categoria Então é assim que a prototipagem multiversa parece. Ok, então é assim que você pode unir seus ícones às páginas UR, como o ícone inicial à página inicial. Desculpe, não estou em casa. O ícone da categoria para a página da categoria, toccon para ir para a página, microfone para minha conta e outras microinterações. Isso é apenas um básico. Eu sei que parece muito avassalador e muito futurista, mas é básico, basta juntar os ícones sem páginas, uma pequena Esse é o problema com a prototipagem. Eu sei que há muitas coisas que precisamos abordar, como microinteração, animação e personalização de teclas e tudo Então, veremos essas coisas em futuras licitações. Então eu vejo Porto bi e vejo vocês na próxima. 25. Protótipo de teste Figma com Figma Mirror: Estudantes, nesta peça, veremos algo chamado espelho Figma É um aplicativo Figma. Você pode, tipo, testar seu aplicativo em seu telefone. Vamos até a Playstore ou a App Store se você estiver usando a Apple. Então, eu estou usando o Presto, então vou para o Presto, e há um aplicativo chamado Você pode pesquisar um Figma e depois de instalar, basta abri-lo E depois de abrir , faça o login com a mesma conta, que está logada no seu PC Então, após o login, as interfaces ficam assim. E atualmente temos muitos projetos em meu aplicativo. Então você pode ver que há opções. Como a primeira, há um botão play no canto superior esquerdo. Então isso significa que é o protótipo. Então, podemos simplesmente clicar nele. Então, atualmente, estamos usando a versão um do clickard. Então esse é o protótipo. Então, vamos clicar nisso. Usamos o mesmo protótipo no mScreen, você pode ver ao mesmo tempo em que aplicativo fliardp click card está aberto em nosso PC e também no Ok, mas o problema com meu smartphone é que meu telefone tem tela de 6,2 polegadas e o iPhone 15 P max tem tela de 6,69 polegadas Então, se eu for para a página inicial. Ok, então você pode ver na minha tela do celular que os ícones da barra de navegação estão ocultos. Então eu tenho que rolar um pouco para obter esse ícone. Mas em Bergamo isso funciona. se eu tocar lá, você pode ver a animação aqui, assim como eu posso acessar a página inicial, a categoria Mas se eu quiser acessar a barra de navegação, preciso rastrear o bit de dados, reduzir o bit de dados e, depois disso, posso acessar pedidos de categorias e também as minhas contas. Então é assim que o espelho Figma funciona. É muito fácil. Digamos que você queira compartilhar este aplicativo com seu amigo ou cliente, e seu cliente não conheça nenhum aplicativo fo. Nesse caso, o que você pode fazer é acessar o protótipo em seu aplicativo e ver a opção chamada compartilhar protótipo Nesta opção, temos algumas opções. Você pode adicionar um e-mail deles, adicioná-los por e-mail nesta seção ou simplesmente copiar este link e compartilhá-lo onde quiser. Como em qual aplicativo no telegram, assim como no Instagram, você pode mandar um DM para eles, e eles podem simplesmente abri-lo no Mas quando estou tentando isso, como no meu smartphone, não sei, por algum motivo, ele continua carregando. Como se eu não pudesse usar isso há alguns dias, abri a mesma linha, mas estava funcionando, mas não sei o que está acontecendo agora. Não está funcionando no momento. Você pode ver na tela que está carregando para sempre. Então, neste caso, eu não sei, pode haver hambúrguer e o sistema está em manutenção Há outra coisa. Digamos que se eu entrar em design. Eu já te mostrei isso, mas deixe-me mostrar de novo. Ok, digamos que estamos na página inicial. No celular também na página inicial. E se eu mudar a cor desse banner. Por exemplo, digamos que eu transforme isso em taxa azul. Você pode ver isso mudar no meu aplicativo móvel e também no aplicativo fimeter É em tempo real e é muito bom ver a interface assim. OK. Porque nosso cliente obterá informações. Digamos que você esteja na ligação e seus clientes digam: Ok, eu não gosto dessa cor, por favor, pode transformá-la em outra coisa, como torná-la vermelha. Então, nesse caso, basta arrastar um controle deslizante e seu cliente ficará, isso parece ótimo Ok, então devemos manter esse vermelho. Ok, então esse é o benefício do aplicativo Puma mirror. Outro benefício é que, digamos que, quando você está móvel, você pode ver o tamanho real do ícone, digamos que o tamanho atual do ícone seja muito bom, digamos, ou eu possa tornar esse retângulo pequeno Então, depende totalmente do telefone. Atualmente, estou usando um telefone muito antigo. Então, está ficando muito mole. Mas se você quiser, pode experimentá-lo no seu. Digamos que se você tem um iPhone, você pode experimentá-lo no iPhone. E você pode observar os ícones. Digamos que no seu telefone, os ícones pareçam muito grandes. Nesse caso, você pode torná-los pequenos ou grandes, assim. Mas, atualmente, estou gostando desse aplicativo. A fabricação de hambúrgueres é ótima e todas as opções da categoria, assim como o cardápio de assim como Então, tudo parece ótimo. O único ícone da barra de navegação tem um detalhe um pouco grande. Então, podemos mudar isso. Então essa é a vantagem de usar o espelho, para que tenhamos a perspectiva real do aplicativo que estamos projetando. Então, colegas estudantes, esse é o vídeo de fotos, e eu vou ver seus kits no próximo. 26. Projeto de curso 3: magia de design móvel: mostre seu aplicativo na Figma: Bem-vindos, meus alunos, notícias empolgantes. Hoje é o dia do projeto, e o número do nosso projeto é três, eu acho. OK. Então, vamos ao projeto Tap. Espero que você abra esse arquivo no seu PC. OK. Então, primeiro, você precisa baixar o aplicativo Figma na Playstore e também na App Store. Se você tiver um iPhone, digamos que, em qualquer caso, o aplicativo não esteja disponível em seu país Você pode acessar este site chamado figma, fazer o login e funcionará da mesma forma Depois de testar seu design, verifique se o design está correto com seu telefone. Digamos que, se o ícone for muito grande, faça as alterações, altere também a cor e o tamanho do telefone, faça essas alterações e verifique seu aplicativo novamente no telefone. Depois disso, capture aquela estrutura de arame como esta. Depois de capturar uma estrutura de arame como essa, envie-a para a seção do projeto E digamos que você seja um pouco experiente em tecnologia como eu, você pode gravar esse vídeo em seu telefone e converter esse vídeo em arquivos de presente Depois de converter isso, você pode enviar para a seção do projeto Este é o link para esse site. Você pode acessar o Auto Express e enviar seu arquivo aqui, e isso levará algum tempo. E depois de criar esse arquivo, não sei como ele se chama. É chamado de gif, se assim for chamado de presente. Então você pode enviar esse arquivo. E digamos que você não saiba como gravar a tela. Nesse caso, você pode simplesmente capturar uma captura de tela como essa e enviar esse arquivo para mim. Então esse é o projeto número três. Na próxima vez, veremos uma coisa muito legal chamada animação. Veremos o básico da animação. E espero que você esteja empolgado com isso, porque é uma parte muito interessante. Então fique por isso e faça o projeto, e eu te desejo boa sorte. Então, tchau por enquanto. 27. Figma Smart Animate para iniciantes: Bem-vindo de volta aos estudantes. Neste vídeo, estamos mergulhando no fascinante mundo da animação em Figma Até agora, acabamos de aprender sobre uma transição de página, mas prefiro algo novo. Isso é transição de elementos. Então eu fiz uma pequena animação para você. Então, se eu clicar no ícone Auto, a mágica acontecerá. Então, por favor, mantenha seus olhos abertos. Então essa é a pequena animação que fizemos. Então, vamos aprender como fazer essa animação. Ok, então temos minha página de pedidos e eu quero animar algo nesta página Então, deixe-me primeiro adicionar o ícone do carrinho nesta página. Para isso, vou entrar nos plugins e no ícone h. Você pode escolher qualquer ícone que quiser. Então, vamos procurar o carrinho. Ok, então eu vou escolher este. Tem um símbolo realmente igual por dentro, e lembre-se de que tem um PNG. É por isso que pode parecer embaçado. Como você pode ver, as bordas estão embaçadas. Ok, então deixe-me criar algumas páginas duplicadas dessas páginas Ok, então, Nate, acho que três páginas, página um, página dois e p. três. Ok, então deixe-me renomear a página primeiro porque ela ficará confusa Deixe-me renomear isso, digamos que meu pedido seja um, ou podemos nomeá-lo como Um Eu saberei ou qualquer outra pessoa saberá. Essa é a animação. Um. Deixe-me copiar e colar aqui. Esta será a página dois. Você pode chamá-lo do que quiser. Animação três, e esta será a animação quatro. Ok, agora vamos entrar no protótipo. Mas antes de fazermos isso, deixe-me datar isso primeiro. Ou podemos fazer uma coisa como, digamos, deixe-me entrar e eu estou tentando algo novo. Então, deixe-me deixar isso para trás. Mas deixe-me aumentar o tamanho. Estou segurando um turno e o tamanho é 1205, 1205. Deixe-me fazer esse 1205 também. Não sei por que a cor mudou. Isso também será 1205. Ele deveria ter 1205 anos, assim como o mesmo com este Ok, agora eu posso trabalhar na minha animação. Então, deixe-me enviar isso para trás e vamos para o protótipo. Ok. Então, atualmente, estamos no Animation Miles Animation One. Então, deixe-me entrar nesta página. Na guia, ele fará alguma coisa, mas não queremos que isso esteja ativado. Eu deveria querer depois de um atraso, e deveria ser uma animação. Temos que escolher a animação inteligente. Eu sei que no Figma, é um pouco confuso porque eu uso muitos softwares, todos eles básicos de filme SoftAsm, pois temos a opção de enquadramento Então, com o enquadramento de teclas, podemos fazer animação. Mas no Figma, temos animação inteligente. E só precisamos escolher a animação, como a animação inteligente. Não precisamos adicionar quadros-chave. Ele decide sozinho. Então é bom, mas se alguém é maior, essa pessoa não sabe nada sobre animação. Animação inteligente, será um pouco confusa para eles. Então, atualmente, navegue até a animação dois, animação inteligente e a redução são 300 milissegundos Mas ok, deixe-me manter 100 milissegundos, mas eu quero que esta página ou essa coisa esteja aqui E esse ícone do carrinho deve estar aqui. Isso vai ser coisa minha. Deixe-me conferir a animação. Está funcionando. Deixe-me fazer isso de novo. Ok, então é assim, mas deixe-me consertar o ícone. Acho que é um pouco. Eu tenho que colocar no centro. Agora vai funcionar. Está funcionando. Podemos fazer alguma animação por aqui. Agora, deixe-me reduzir isso. Agora, deixe-me ir, para que possamos mover isso em direção a isso. Mas em menos painel, você pode ver nossas imagens fora do quadro. Então, temos que trazer isso para dentro da moldura. E se eu for para o design, às vezes pode ser conteúdo de clipe, então você pode, por padrão, ser conteúdo de clipe, então você pode desclicar aqui Ok. Deixe-me fazer o protótipo novamente e me juntar a isso Ok. Então, navegue até esta página de animação três e anime de forma inteligente. E deixe-me entrar nesta seção novamente. Minhas ordens. É para ficar deste lado do lado direito, então eu cometi erros. Deixe-me verificar o que eu cometi aqui. Ok, então está na aba. Eu não quero pagar uma conta. Deve ser depois de um atraso. Então, funcionará agora. Deixe-me ir para esta seção novamente. Minhas ordens devem estar inativas. Ok, entendi. Eu coloquei o milissegundo, este um milissegundo. Então, deixe-me dizer 300. Deixe-me verificar novamente. Espero que funcione novamente. Ok, funciona perfeitamente bem. Mas agora queremos que isso esteja neste lugar. Então, vamos mantê-lo como está, e vamos fazê-lo desta vez. E deixe-me me juntar a isso novamente. E deve ser depois de um atraso. E animação de 300 milissegundos. Então, deixe-me tentar de novo. Ok, nossa animação está pronta. Ok, então descerá, vá para o lado direito. Ok, essa é a nossa animação. Então é assim que você pode fazer animação no Figma. Sei que é um pouco confuso e difícil de entender, mas faremos muitas animações em vídeos futuros. Então, estádio para isso. Se quiser, você pode assistir novamente a este vídeo várias vezes. Então você entenderá o que é a animação inteligente e como ela funciona no Figma E lembre-se do conteúdo do clipe. Se você destacar algum elemento fora da moldura, ele estará fora da moldura. Ok, então o elemento três da animação está fora do quadro, mas arrastamos para dentro Portanto, é a parte da animação três. Então, eu só quero dizer uma coisa. Em resumo, a animação no Figma gira em torno de alguns princípios fundamentais, garantindo que os elementos tenham os mesmos nomes, entendendo a animação inteligente de rolagem e gerenciando atrasos para criar gerenciando atrasos para capacidade de animação do Figma pode parecer um pouco pesada, mas é um pequeno preço a pagar pela verticalidade que ela oferece Então, estádio para mais aventuras emocionantes da FEMA no próximo vídeo 28. Projeto de curso 4: dê vida ao seu design: como criar animações inteligentes na Figma: Bem-vindos de volta, alunos, preparem-se para um desafio empolgante com o projeto de classe número três, ou quatro, acho que é quatro. Então, será nossa primeira animação. Para este projeto, você precisa criar essa animação muito legal, que eu criei aqui. Ok, então essas são as instruções. Acesse meus pedidos, crie algumas páginas e anime-as. Depois disso, você pode usar um método diferente, como eu uso cartão, mas você pode usar outro ícone, como forma, um retângulo quadrado ou uma seta total depende de: você pode usar PNG, ícones e formas. Depois disso, faça uma captura de tela e envie para mim. Se você for um texto, eu vou gostar de mim ou você quer me desafiar para que você possa gravar esse arquivo, gravar sua animação e convertê-la em determinado arquivo. Você já sabe que podemos converter nosso Bfour em um arquivo give no Ado express Então use isso aqui está o link, você pode clicar nele, e ele será redirecionado para o Auto Express, e depois disso, envie-o para a seção do projeto Então esse será o nosso projeto número quatro. Então, siga todas as instruções e envie essa animação para mim. Então, esse é um vídeo de maconha, e vejo vocês na próxima seção. 29. Compartilhamento e feedback em tempo real com a Figma: Bem-vindo de volta, designer. Hoje, estamos aprimorando nossa habilidade Figma. Então você dominou a arte de compartilhar arquivos com seus clientes, e tem sido uma viagem tranquila Mas agora, vamos falar sobre o trabalho em equipe. Colaborando com seu design de UX chamado AW. Imagine que você não está sozinho em um projeto. Há vários kits criativos em uma peça. Para tornar isso perfeito, estamos mergulhando no reino das equipes e dos projetos de equipe Agora, você teve uma boa experiência com os rascunhos. Um esboço limitado do sonho de um designer. Mas aqui está o teste da trama. Se você está se unindo a colegas, é hora de mudar Então, vamos imaginar um cenário como se você estivesse trabalhando em um projeto crítico, mas sua equipe estivesse espalhada por diferentes plataformas, crescendo em feedback e tentando desesperadamente permanecer na mesma página Portanto, basta fazer com que até o estilista mais experiente queira arrancar os cabelos. Mas e se houvesse uma maneira de colaborar sem problemas, compartilhar arquivos sem esforço e manter todos informados Então, estamos apresentando as equipes Figma. Você é um balcão único para design colaborativo no Nirvana Então, atualmente, estou em casa e fazendo rascunhos, então temos essa opção chamada trims Pode ser como essa interface de sempre, mas pode ter um projeto. Então, vamos criar uma nova equipe. Vamos conferir alguns benefícios do Figma P. Com versão gratuita, atualmente, estamos usando gratuitamente, obtemos um projeto, três arquivos de design e três arquivos fijum e três páginas Com a versão promocional, obtemos os novos recursos e também outros recursos Atualmente, queremos usar a versão gratuita. Vamos criar uma equipe e deixar eu te dar um missionário. Ok. Vamos criar uma equipe. Ok, agora, vamos adicionar mL ID. Por exemplo, digamos que você queira adicionar algumas pessoas. Então, eu quero adicionar uma pessoa. Serei eu com minha identidade diferente. Ok, você pode adicionar várias pessoas lá. Não há limite para adicionar pessoas ilimitadas. Ele está mostrando novamente a versão principal, mas eu quero continuar com minha startup, então vou escolher o Starter Pack e temos uma versão gratuita do Team Ok, então não tem nada no momento. Então, digamos que estamos trabalhando com rascunhos e queremos adicionar alguns membros da equipe em nosso design Então, digamos que estamos trabalhando neste projeto e queremos adicionar alguns membros da equipe em nosso design, que eu possa simplesmente rastrear esse arquivo e adicioná-lo à nossa equipe, que é uma equipe imaginária Agora está nas equipes. Agora, vamos abri-lo. Ok, então, atualmente, essa pessoa não está disponível aqui porque essa pessoa não aceitou nossa solicitação. Então, deixe-me fazer login com essa conta e aceitar a solicitação. Ok, então eu bloqueei com essa conta e obtive esse design. Agora, eu posso simplesmente arrastar qualquer elemento ou adicionar qualquer elemento, e eu posso fazer o que eu quiser. Eu posso adicionar uma loja de ponches como, digamos, elementos como esse, eu posso adicionar cores Ok. Eu vou primeiro. Ok, então se eu acessar minha conta principal novamente, como você pode ver, ela também está disponível aqui, deixe-me fazer assim. Ok, então eu também posso ver essa pessoa, como o que ela está fazendo em nosso design e que tipo de mudanças ela está fazendo. E também podemos atribuir, em tempo real, tipo, Ok, eu não quero essa cor, transformá-la em outra coisa, então podemos mudar isso assim. Então esse é o benefício de equipes colaborativas e do uso de equipes Então, por enquanto, vou parar isso porque espero que você entenda, como a forma como a equipe funciona, mas deixe-me contar outras características das equipes. Ok, então, vítimas, compartilhamos um local de trabalho como este. E nisso, podemos adicionar vários arquivos. Mas estamos usando a versão gratuita, então podemos criar apenas três arquivos. Como você pode ver, atualmente usamos um. Restam dois e também três arquivos JM de correção. No espaço de trabalho compartilhado, podemos compartilhar arquivos, criar protótipos e corrigir problemas ao mesmo tempo Também podemos fazer comentários de tópicos em alguns de nossos designs, essa pessoa pode simplesmente ir até esse retângulo e adicionar comentários e podemos receber uma resposta instantânea em tempo real Também temos controle de versão. Depois disso, essa pessoa pode obter acesso baseado em funções, como se quiséssemos manter nossas informações seguras. Então, nesse caso, podemos atribuir a função. Com equipes, somos capazes de gerenciar projetos. Com isso, podemos organizar nosso modelo de projeto, lista de tarefas e prazos, além de centralizar nosso sistema de design E após o término do projeto, podemos analisar nosso projeto, assim como obter informações valiosas das atividades de nossa equipe e identificar áreas de melhoria. Mas vou sugerir uma coisa, digamos que estamos trabalhando sozinhos. Portanto, nesse caso, não use equipes, use os rascunhos porque os rascunhos são mais fáceis e, com os rascunhos, podemos adicionar várias páginas Mas em equipes, se você puder ver, só podemos adicionar três páginas. Mas nos rascunhos, podemos adicionar várias páginas, e não há nenhuma limitação Portanto, o equilíbrio entre as planilhas gratuitas e as pagas depende da necessidade específica e da escala do seu trabalho de design Então, é assim que se cria uma equipe, adiciona vários colaboradores em nossa equipe e nos recursos da equipe Espero que você entenda tudo isso. Vou dizer novamente, uma coisa. Se você está trabalhando tão pouco, não precisa de equipes. Mas se você estiver trabalhando com dois ou três membros, talvez dessa vez, você pode ir para equipes e fazer o upgrade para profissional virgem. Então esse é o fo, pessoal, e vejo vocês na próxima. 30. Figma Colaborar em tempo real com o multiplayer: Bem-vindos, meus alunos. Neste projeto de lei, vamos explorar o processo de compartilhamento de nossos projetos com nossos clientes. Vamos supor que esse seja meu cliente imaginário e eu compartilhei meu projeto com ele. Então, sempre que ele muda seu design, consigo ver que tipo de coisas ele está fazendo em nosso design. exemplo, digamos que ele esteja passando por esse circo ou estandarte ou digamos que esse Pergamo, podemos ver todas Então, vamos ver como podemos compartilhar nosso design com nosso cliente. Ok, então esse é o nosso design. Esta é a nossa estrutura de arame, e também adicionamos algumas animações aqui. Então, vamos compartilhar com nosso cliente. Então, digamos que o nome do meu cliente seja Chetan. Esse também é meu nome porque eu entrei de outra conta, então é meu nome aqui, e esta é minha conta real, que eu costumava usar Figma Ok, então eu quero compartilhar isso com Chen. Posso adicionar essa pessoa ou simplesmente copiar este link e compartilhar por meio, digamos, do aplicativo, do Gmail qualquer outra mídia social de sua preferência Por enquanto, vamos usar navegador simples e vou copiar esse link. Assim, qualquer pessoa com o link poderá ver nosso design. E essa pessoa obtém uma conta anônima como essa, e essa é nossa conta real. Mas com o link, essa pessoa só consegue ver o design. Ele não é capaz de fazer muita coisa. Como se ele não soubesse editar ou não pudesse comentar sobre nosso design. Mas ele não pode apresentar nosso design. exemplo, digamos que, se quisermos ter uma visão do design semelhante, do que fizemos na criação de protótipos, para que ele possa ver essas coisas que ele possa ver essas Então, como esta, como se tivéssemos criado essa animação simples, conta de categoria e tudo mais. Agora, vamos atualizar nosso cliente imaginário que me permite fazer login com meu mit secundário Então, se essa pessoa estiver logada, poderá ver tudo, como o resumo, bem como os diferentes tipos de páginas que criamos, como para tablet, celular, bem como o fluxo de tarefas Essa pessoa só pode ver o design. Ele não sabe editar. Digamos que essa pessoa tente arrastar isso. Isso não vai acontecer porque só demos permissão para ver, não para ela. Mas o que ele pode fazer é adicionar um comentário. Digamos que ele esteja curioso sobre algo como esse circo Então você pode simplesmente clicar nele e adicionar comentários como este. O que o circo apresenta, e você pode enviar isso para o designer principal. Esse sou eu. Então, se eu entrar no meu design real, como se fosse eu, essa é minha conta principal, então eu posso ver nos meus comentários que recebi um comentário, e ele também está aparecendo aqui Posso simplesmente acessar os comentários e ver qual comentário recebi do Ceden. Basta clicar neste comentário Ok, então eu posso apenas responder, esta é a categoria quatro. Categoria e eu podemos simplesmente enviá-la. Ok, então essa pessoa recebeu nossa resposta, e eu posso simplesmente clicar neste botão de resolução. E se eu entrar nos comentários, você pode ver que nossos comentários estão resolvidos agora. Deixe-me te mostrar uma coisa. Faça assim. Ok, então você pode ver o que ele está fazendo em nosso design. Digamos que ele esteja passando o mouse assim, como neste design que criamos Então, somos capazes de ver para onde ele está indo e quais coisas ele está passando? Tipo, ele gosta da moldura ou não? Digamos que nós dois estamos de plantão, e digamos que ele queira, tipo, eu não gosto dessa cor. E, deixe-me ir. OK. Deixe-me pegar essa. Ok, então se ele disser, eu não gosto dessa cor, você pode mudar isso? Então eu posso simplesmente ir ao meu Figma. E eu posso simplesmente mudar de cor assim. Eu posso escolher vermelho, verde, azul, assim. Esse é o benefício de colaborar usando um Figma. A verdadeira mágica acontece com os recursos de design colaborativo da Figma Eu demonstrei que sou eu. Eu demonstrei ao meu cliente o que podemos fazer com o recurso colaborativo com um usuário manipulando um elemento que o outro usuário pode ver em tempo real É um recurso poderoso para designers que trabalham de forma colaborativa Isso mantém o processo de design organizado e ajuda os designers a gerenciar o feedback dos clientes de forma eficaz. Em resumo, compartilhar design no Figma é uma frase. Seja por meio de um link simples para feedback inicial ou permitindo comentários para uma interação mais detalhada, o recurso colaborativo da plataforma foi aprimorado pela comunicação entre designers e clientes, tornando o processo de revisão do design mais suave Tudo se resume a compartilhar seu design com seu cliente e a questão do comando. Fique por dentro da próxima página do Explore para ver, acho que equipes, como as equipes trabalham. É um porto e nos vemos , Kai, no próximo. 31. O que são os Moodboards e o SEGREDO para encontrar inspiração para design de web e aplicativos FAST: Bem-vindo de volta, designer. No blog de hoje, aprenderemos sobre o que é um quadro de humor e como obter inspiração para seus projetos. Imagine olhar para uma tela em branco, sua mente rolando com ideias Mas, sem uma visão coesa para seu próximo projeto nos EUA, pode ser avassalador, pode ser avassalador Entre no quadro de humor. Você está criando uma bússola e um roteiro visual para o sucesso Moodboards são mais do que apenas uma colagem. Eles são ferramentas poderosas. Eles liberam todo o potencial de uma jornada de design. Vamos mergulhar nos quadros de humor mágicos e descobrir por que eles são armas indispensáveis no design de UX. Primeiro, sobre essa clareza e foco. Imagine vender sem um mapa. Essa é essencialmente a sensação de projetar sem um moodboard Os moodboards fornecem a clareza e o foco necessários , capturando a essência do projeto Você define a estética, fixa a paleta de cores, explora a fonte e a textura e estabelece uma linguagem visual constituinte Esse roteiro orienta você em nossa decisão de design, garantindo uma experiência de usuário coesa e sem restrições O segundo é inspiração e criatividade. Os moodboards são como um banquete visual para sua alma. A mistura vibrante de imagens, cores e texturas acende sua criatividade e alimenta sua imaginação e alimenta É uma fonte constante de inspiração, abrindo portas para novas possibilidades de design e abordagens inovadoras Conforme você experimenta diferentes elementos, seus quadros de humor evoluem, refletindo o cenário em constante mudança de sua visão criativa O terceiro é colaboração e comunicação. A comunicação é fundamental. E o moodboard rompe os limites entre designers, clientes Eles atuam como uma poderosa ferramenta de comunicação, traduzindo sua ideia abstrata em representação visual concreta Ao apresentar seu quadro de humor, você compartilha efetivamente sua visão, garantindo que todos estejam na mesma página, alinhados com a direção do projeto e investidos em O primeiro é consistência e covisão. Imagine um design em que cada elemento pareça fora de lugar, como uma discórdia estrondosa em uma sinfonia quadros de humor evitam essa desarmonia promovendo Ao refletir seu mapa visual em todo o processo de design, você garante que todos os detalhes, da paleta de cores à tipografia, estejam alinhados com sua visão inicial, estejam alinhados com sua visão inicial, criando uma experiência de usuário unificada E o último é a tomada de decisões e a eficiência. O Moodboards atua como um catalisador para tomada de decisão eficiente com uma visão clara apresentada a você. Fazer escolhas em relação aos elementos de design se torna fácil Você complementa o trabalho com gás, evita revisões dispendiosas e navega pelo processo de design com a conferência e o foco A clareza e a orientação fornecidas por mais conselhos. Em última análise, simplifique seu fluxo de trabalho, economizando tempo e recursos valiosos Então, isso é tudo sobre quanto mais pranchas. Agora vamos ver uma maneira de obter inspiração para nossos projetos. Então, o primeiro site é uma página de amor. Este é o site onde você pode obter muita inspiração para seus projetos. E a melhor coisa sobre este site é que você pode classificar muitas coisas aqui. Por exemplo, digamos que eu queira criar um aplicativo. Eu posso acessar os modelos e o aplicativo. Você também pode acessar recursos, informações, contratar e também criar uma página. Então, atualmente, estou nos modelos e no aplicativo. Então você pode dizer que eu tenho muitos modelos. Eu posso simplesmente acessar qualquer modelo. Digamos, vá com este, de cabeça para baixo. Então, nisso, eu posso ver a fonte, bem como a imagem, bem como a cor do fundo e o tipo do design. Então é assim que você pode obter inspiração para seu projeto. Assim, você pode acessar este site, conferir todos os modelos e designs e se inspirar para o seu projeto. Agora, o segundo é voto, limites de voto de Ivo. Este também é um ótimo site para inspiração. Basta pesquisar e digitar o que quiser, como neste caso, quero site de comércio eletrônico, aplicativo de comércio eletrônico de maçãs E mostraremos todos os aplicativos. Ok, então é assim que o aplicativo se parece. Assim, você pode fazer um aplicativo de captura e nós podemos adicioná-lo em um quadro de humor Então, o próximo é que Dribble é um dos melhores sites para EV Dris e este site de guerras é um dos Então, esses são os três principais sites um design usou para se inspirar. Além disso, há uma parada da Adobe. Você pode acessar este site e pesquisar o que quiser e se inspirar nele. Você pode baixar esta imagem ou fazer uma captura de tela delas E depois de tirar essas imagens e capturar a tela, basta inserir o Figma Então, esse é o site onde você pode se inspirar. Deixe-me te mostrar este prêmio. Isso é realmente ótimo. Tem modelos e sites muito, muito bons, que são realmente premiados. Digamos que se eu acessar algum site. Então, como você pode ver, este é um site realmente minimalista. Tem algum texto e tudo mais. E o texto é muito simples, mas atraente. As imagens usadas também são muito boas. Então, isso é tudo sobre quadros de humor e como obter inspiração para seu projeto. Agora, deixe-me mostrar um quadro de humor que criei para o meu projeto, e vamos criar esse projeto no segundo projeto. Então, deixe-me te mostrar isso. Então esse é o nosso segundo projeto, e esse é o mood board, o design de texto e tudo mais. Também está presente. Eu sei que atualmente está muito confuso. Vou organizá-lo no futuro. Mas é assim que o moodboard se parece. Uh, eu fiz um monte de capturas de tela, e eu as organizei, e também criei isso, como a paleta de cores O para esse design específico, e o design final se parece com Não sei como te mostrar muita coisa, mas esse é o quadro de humor e a paleta de cores Então, isso é tudo sobre painéis de humor e sites inspiradores Basta passar por isso. Eu adicionei todos os links nos recursos e os examino, inspiro, tiro algumas imagens como captura de tela, normalmente as capturo Então, para o próximo vídeo, revelaremos como eu organizo os s em painéis de humor Então, eu vou te pegar na próxima. 32. Como criar um Moodboard na Figma: Nós, por mentes criativas. Hoje, estamos mergulhando na arte dos painéis de humor. Mostrarei como transformar sua captura de tela inspiradora em algo sofisticado, tanto para sua jornada criativa pessoal quanto para aqueles clientes exigentes Então, vamos começar com nossos quadros de humor. Para isso, podemos acessar a comunidade Figma e apenas pesquisar painéis de humor. Então, deixe-me te mostrar. Ok, então você pode ir para esta comunidade Figma. E pesquise por quadros de humor, você obterá vários quadros de humor e poderá selecionar qualquer um deles. Então eu selecionei esses três , como este, este e este. Então esse é o exemplo, como será a aparência do quadro de humor. Então, isso é como quadros de humor mais organizados. Então, na visão anterior, mostrei meu quadro de humor. Estava muito confuso. Então, se você quiser organizar se quiser criar um quadro de humor organizado, você pode escolher este tablet, copiar isso, deixe-me copiar outro. Ok, deixe-me copiar isso. E vamos ao Power Project e vamos colá-lo aqui. E agora eu posso adicionar uma imagem. Então, deixe-me rastrear primeiro uma imagem mais a imagem. No arquivo de exercícios Figma, adicionei quadros de humor, para que você também possa fazer uma captura de tela, se quiser, ou se tiver sua própria captura de tela, podemos escolher isso Abra um, dois, três. Essa é a forma mais organizada, mas vou ler esta. Ok, eu vou te mostrar o meu caminho, então o caminho sujo. Se você está trabalhando tão pouco, eu vou dizer que vá sujo. Arraste uma moldura como essa e deixe-me selecionar algumas imagens novamente. Vou até meu pote de moldes, selecionarei todos eles e o despejarei aqui Depois disso, vou organizá-lo assim. Esse é o meu jeito. Você pode simplesmente criar uma moldura e colocá-la desta forma, e você pode chamá-la de mood boards Se quiser, você pode ir à comunidade e escolher esta também. Para uma forma mais organizada. Se você está trabalhando, então eu vou dizer, vá sujo e crie painéis de humor como este. Lembre-se de que esses painéis de humor são uma ferramenta de comunicação vital, portanto, ajudam a transmitir sua direção de design aos clientes Então aí está, o quadro de humor rápido e sujo para sua exploração criada e a versão policial para nossas linhas. Então, prepare-se para mais aventuras de design no próximo vídeo. 33. Projeto de curso 5: Estação de inspiração: como criar um Moodboard na Figma: Olá, pessoal. Bem-vindo ao projeto número cinco. Isso é Mood Board. Neste projeto, exploraremos o empolgante mundo dos painéis de humor. Para o seu projeto, então vamos nos aprofundar. Em primeiro lugar, você precisará criar um moodboard para sua interface de Esta é uma representação visual do estilo estético geral e da emoção. Você quer que sua marca transmita. Depois de criar seus quadros de humor, é hora de mostrar Se você puder criar uma página dedicada e chamá-la de moodboards, você pode copiá-la e colá-la aqui para obter mais organização Isso pode ser um simples despejo de captura de tela ou algo um pouco mais elaborado, como o exemplo da comunidade Figma Depois de criar mais quadros como esse, faça uma captura de tela e envie para mim na seção de projetos Então esse será o nosso projeto número cinco, crie mais um quadro e envie para mim. Essas são as fotos B e nos vemos na próxima. 34. Criar um sistema de grade responsivo para design da Web e da interface do usuário: Olá, pessoal, e bem-vindos de volta ao custo figma dos designers do UI EX Cobrimos muitos terrenos até agora. Do básico à criação de wireframes e protótipos de baixo custo Agora é hora de testar nossas habilidades e começar a criar uma interface real. Então, a partir de hoje, estamos mergulhando em nossos wireframes de alto poço, que são estruturas de fogo altas E hoje, também aprenderemos sobre como adicionar colunas notas em nosso aplicativo móvel. Então, primeiro de tudo. Então, como você pode ver, atualmente, estamos em wireframe de baixa fidelidade. Essa é uma taxa baixa. Mas nas páginas, eu o chamei de aplicativo móvel Clickart, mas esse não é o aplicativo, então deixe-me renomeá-lo Clique duas vezes. E eu vou renomear isso Clique no aplicativo móvel Card, taxa baixa. Isso é um wireframe de baixa fé. OK. Você pode chamá-lo do que quiser. Estou nomeando isso Você pode nomear como Amazon, bem como Walmart Portanto, depende totalmente de você também poder colocar um nome em vez de um cartão pli E criamos esta página para tablet, mas não estamos projetando nenhum aplicativo para tablet. Na verdade, estamos criando aplicativos. Então, deixe-me renomear isso. Vou apenas chamá-lo de app e se. Essa é uma estrutura de arame de alta fidelidade. Então, sempre que quisermos usar o wireframe, podemos simplesmente fazer isso e usar nossa alta OK. Então, agora vamos aos quadros e vamos adicionar um quadro porque eu quero mostrar e ensinar sobre scripts de colunas Há algumas coisas que o usuário não vê, mas nós, como designers, as usamos para tornar o layout dos componentes na tela mais fácil e consistente. Quando você projeta uma tela, você tem componentes diferentes que diferem em tamanho e distantes um em relação ao outro. Então, aqui está uma breve visão geral de como estruturar uma tela para tomar decisões rápidas durante o design. A primeira coisa serão as margens. As margens são espaços que ficam entre o conteúdo e as bordas da tela Eles são definidos com H fixo, geralmente 16 pixels, mas alguns aplicativos usam margens de 20 ou 24 Todo o tamanho dos elementos da interface do usuário e o espaço entre eles são definidos como um múltiplo do número de oito. Você pode estar pensando em altura porque é fácil dividir a maior parte da tela do celular na grade de oito. Agora, o próximo passo são as coisas entre margens que são colunas O conteúdo é colocado dentro das colunas. Isso nos ajuda a tomar decisões sobre onde colocar um elemento e criar uma interface bem estruturada. As colunas ajudam o desenvolvedor a criar um layout consistente em vários tamanhos de tela. O número mais comum é quatro, mas você pode tentar seis ou oito. A largura é definida usando porcentagem em vez de valores fixos. E a próxima coisa são as calhas. As calhas separam o contêiner nas colunas. O valor recomendado para medianiz também é de 16 pixels. Menos de 16 pixels geralmente não é suficiente para manter o elemento visualmente separado. Mas ei, talvez oito pixels possam funcionar em algum momento. Apenas experimente por si mesmo. Agora, vamos falar sobre as linhas. Também é chamado de grits de interface de usuário horizontal. Uma grade horizontal da interface do usuário é usada para alinhar horizontalmente os elementos da interface do usuário, como botões, cartões As notas horizontais são definidas em um ritmo de oito pixels. Isso garantirá que o espaçamento vertical e horizontal estejam sincronizados Vamos falar em alemão fragma e vamos adicionar algumas notas e colunas Então, se você clicar em sua moldura no painel de design, obtemos a tela de layout. Basta clicar nela. E primeiro, é um pouco hábil dizer que uma grade de dez pixels é dez pixels, mas eu quero configurar a primeira, vou dizer colunas, então vamos escolher uma coluna E na maioria das vezes eu uso um quatro. Na frente você pode usar seis ou oito. Depende totalmente de você e do seu design. A margem deve ser 16 e as calhas devem ser 16 dois. Então, esses são os valores padrão do setor. Está bem? Agora, vamos com uma fileira. Acabamos com as colunas. Então, basta clicar no botão plotum plus e agora nas hastes. Então, para linhas, vou dizer que a contagem deve ser automática porque aumentará automaticamente a contagem. E uma vez eu deveria estar no centro, e a altura deveria ser oito e a sarjeta deveria ser oito também Então é isso, digite o valor e veja seu lindo layout. E aqui está uma fita adesiva. Brinque com números, um pouco, talvez três, seis colunas ou oito para ver o que acontecerá e como você pode usá-los Para ativar e desativar a grade de layout, basta clicar no ícone como Podemos desligá-lo e ativá-lo assim. Ou você pode usar o atalho para controlar G para Mac e controlar shift para Windows E aqui está a fita profissional mais importante. Por exemplo, não se preocupe se um componente funcionar e aparência melhor quando não estiver perfeitamente alinhado com uma grade Grid está aqui para ajudá-lo, mas você não precisa segui-la cegamente. Se você mantiver a maioria das coisas alinhadas, um pequeno ajuste não quebrará nada O conteúdo definirá a grade e não o contrário. Então, isso é tudo sobre margens, grades, cortadores, colunas e pisos Sim, então é assim que colocamos nossas grades em nossas molduras. Então isso é um vídeo de fotos, e eu vou ver vocês no próximo 35. Como escolher cores (inspiração de cores): Bem-vindo, Max designer. Neste mundo, estamos mergulhando no mundo colorido do design e explorando as várias fontes de inspiração de cores. Então, vamos começar a descobrir como encontrar, extrair e usar essas cores no Figma Primeiro, existem vários sites dedicados à inspiração de cores, mas deixe-me dizer que um Ju Juhad é algo como se fizéssemos algo estranho e criássemos dedicados à inspiração de cores, mas deixe-me dizer que um Ju Juhad é algo como se fizéssemos algo algo útil É o mundo indiano. Ok, então deixe-me te mostrar uma coisa. Então, na maioria das vezes, o que eu faço é criar placas-mãe como essa e desenhar alguns retângulos Vamos supor que esse seja o retângulo. Isso é um retângulo E eu simplesmente vou ao campo e escolho a ferramenta de conta-gotas e cores extras como essa E se eu quiser uma paleta de cores , posso usar cores e conta-gotas, e vamos escolher essa cor , posso usar cores e conta-gotas, e vamos escolher essa Está bem? Ok, esse. Como você pode ver, é assim que eu extraio minhas cores. Essa é a maneira realmente básica. Essa não é uma maneira profissional, mas você pode usá-la e depois funciona. Vamos atirar outra bola. Ok, vamos com esse. Portanto, temos três tipos diferentes de cor laranja. Ok, então é assim que podemos extrair cores. Agora, deixe-me mostrar alguns plug-ins de onde você pode se inspirar para suas paletas de cores OK. A primeira são as paletas de cores, essas quatro E também temos esse. Mas o Figma executa um plug-in por vez. Ok, então também temos essa paleta de cores com barra de cores Ok, então também podemos usar esse. Por exemplo, se eu selecionar este e quiser copiar isso, posso simplesmente copiar e ir para este controle de preenchimento e pragas E você pode ver que a cor mudou agora. Então, a partir daqui, podemos obter várias paletas de cores, e há outro plugin chamado paletas de cores E tudo bem, também é exatamente o mesmo site. Basta selecionar o retângulo e escolher a cor desejada e clicar nela Ele adicionará essa cor nesse retângulo. Agora você tem uma paleta de cores. Agora, vamos seguir o caminho proposto e vamos ver alguns sites que fornecem paleta de cores e inspiração para seus projetos OK. O primeiro é um dos melhores, eu diria, e a maior parte do design gráfico usa esses sites. O primeiro é va colors, w.com slash Colors. Podemos acessar este site e lá temos quatro opções, e lá temos como gerador de paleta de cores, ideia de paleta de cores, roda de cores e significado de cores Então, vamos usar o gerador de peças coloridas. Digamos que você tenha uma imagem e, atualmente, vamos MO imagem. Ok, então se você tiver uma imagem, você pode enviá-la, e ela extrairá todas as cores, fornecerá o código X para ela, e você pode simplesmente copiá-la e colá-la no Figma E você pode usar isso como uma paleta de cores. Então essa é a primeira opção. Depois disso, vamos pular para as ideias da paleta de cores. Também temos opções de bunjop aqui. E podemos digitar o tipo de cores que queremos. Por exemplo, digamos que eu queira um coma azul preto amarelo. Ok, vamos ver. Então, temos algumas barras de cores bonitas, temos azul, amarelo, bem como o que eu digitei Então é assim que essas barras de cores funcionam. O próximo é a roda de cores. Oh, essa é uma das melhores coisas que eu vou dizer. Se formos para a roda de cores, e se escolhermos qualquer cor, tipo , et, use vermelho. Ele também indicará a cor complementar. E você também pode mudar para monocromático, bem como para Depois disso, se você quiser algo análogo, você pode obter três cores nele Em striic também obtemos três cores com cores diferentes, e em sottic obtemos Podemos simplesmente copiar isso e exportar essa paleta e você pode inserir no Puma e usá-la em nosso design Se você quiser obter muitas informações sobre algumas cores seriadas, basta acessar o significado da cor e digitar, eu acho, o nome da cor, e ele contará toda a Digamos que se eu escolher essa, Amber, ela me contará toda a história dessa cor Se você estiver mais interessado, acesse este site. Se você quiser aprender sobre cores. Agora, o próximo é o Adobclor. Também é meio que o mesmo, mas também tem características semelhantes, como va. Giramos esse mostrador e obtemos essas cores, e podemos alterar o modo de cor RGB SG lab, bem como também podemos pesquisar as necessidades do ator, como eu fiz em azul, amarelo e verde, algo assim Você pode anexar aqui e obter uma paleta de cores como esta Agora, o próximo é extraí-los. Então, vimos no Canva, como se pudéssemos carregar qualquer arquivo, vamos fazer o upload deste, e ele extrairá todas as cores dele Se você ver a olho nu, diremos apenas duas cores, como azul, desculpe, amarelo e branco. Mas com essa ferramenta, podemos ver os diferentes tons de amarelo e preto. E você também pode extrair a cor do gradiente, como você pode ver a cor do gradiente. E essa é importante, a ferramenta de acessibilidade. Ele dirá que essa cor é adequada para o seu design ou não. Tipo, vamos ver se eu uso outra coisa. Então, deixe-me usar esse. Assim, você pode ver que é feltro e a cor não combina com a cor de fundo da cor principal. A cor do texto não combina com a cor do fundo. Portanto, ele dirá qual cor é ótima para nosso design ou plano de fundo para um texto. Então, isso é muito útil. Você pode acessar o Explore para obter mais paletas de cores como essa, e podemos pesquisar de acordo com nossa necessidade E também há uma seção de tendências, que mostra todas as paletas de cores populares Se você quiser baixar este segundo, basta baixá-lo e importá-lo para o figma, vamos baixar este E deixe-me adicionar isso ao Figma. OK. Ok, então essa foi a imagem que ele baixou. Então essa é a parte colorida. Ele também vem com o código X. Você também pode escolher tropo two para extrair essa cor. Agora, vamos para o próximo site. Isso é caça às cores. um dos sites mais populares na design gráfico no campo vx, bem como no campo motivador Então você pode simplesmente acessar o subsite. Já criou uma paleta de cores. Você pode simplesmente baixá-lo e importá-lo para o Figma. Você também pode pesquisá-lo de acordo com as cores. Além disso, mostra um cromon popular e seções aleatórias de todos os tempos Se você gosta de alguma cor, como se você gosta desta, e se você for à coleção, ela vai te mostrar. Você tem essa coisa na coleção. Ok, então isso é sobre caça às cores. Se você quiser paletas de cores com gradiente, vá para Criban. É também um tipo de site popular, você pode acessar este site e copiar essas cores e usá-las em seu design. Lembre-se de que o mundo está cheio de cores e seu design deve refletir o tom, clima e o propósito do seu projeto. Se você está se inspirando site, em gradientes ou em um design existente, o Fiber fornece a ferramenta para tornar sua paleta de cores perfeita. Então experimente, explore e deixe sua criatividade fluir. No próximo vídeo, continuaremos nossa jornada de design, então sintonizados. 36. Como faço paletas de cores da interface do usuário na figma: Bem-vindo. Nesta surpresa, estamos mergulhando no reino colorido do design criando uma paleta de cores que servirá como base para nossas ervas simuladas de alta fidelidade Então esse é o exemplo da minha paleta de cores. Então essa é a técnica de avanço de bits e essa é a técnica normal, que vamos aprender agora. E essas são minhas cores principais. Como se essa fosse a cor primária. Essa é a segunda cor, e essa é a cor ou a cor neutro, ou você pode chamá-la Então, vamos criar um sistema de cores. Então, antes de fazermos isso, deixe-me dizer uma coisa. Digamos que exista um aplicativo favorito no qual você queira replicar as cores Digamos que Instagram. Portanto, existe um site chamado Brand *** Tem todas as informações sobre essas marcas, como fontes, bem como as cores, bem como, eu diria, as imagens e tudo mais. Vamos entrar no Instagram. Digamos que o instagram seja um tipo de herói, e podemos entrar no Sagm e ele nos dirá todas as coisas, como o logotipo, a fonte e a cor Então, vamos às cores. Você pode ver que temos oito cores. E se você quiser se inspirar nessa marca, basta copiar as cores e usá-las em sua marca. Essa é uma das melhores opções que eu vou dizer. Também há opção de Tesla. Você pode ver em Tesla e vamos às cores. Você pode ver que T L é uma cor realmente básica. Não tem nenhum perfil. Essas cores são realmente básicas. Como as pessoas que conhecem os códigos de cores que conhecerão, essa é uma das cores básicas. Isso é totalmente branco, esse é o totalmente preto e essa é a cor totalmente vermelha. Se você quiser usar essas cores, vá em frente. Agora, vamos pular para o Figma e criar nossa paleta de cores Ok, vamos desenhar uma moldura e vou chamá-la de sistema de cores. Agora, vamos trazer nossas cores primárias. No meu caso, essas serão minhas cores primárias para nosso aplicativo de cartão de clique, e deixe-me colá-las e duplicar essa Eu duplico assim. Ok, então essas serão as cores principais. Isso será como uma espécie de tonalidade das cores, e essa será a tonalidade, eu acho Ok, então eu vou desenhar primeiro, vamos até Phil, e eu vou escolher Por padrão, será x, então escolha SSH SL, então escolha SSH SL, e você só precisa usar shifty e down erk para alterar os Mas antes você precisa escolher qualquer um dos parâmetros. Como nesse caso, vou escolher essa leveza e vou diminuí-la em dez E o mesmo com esses dez. Também podemos alterar a saturação. Atualmente, é feito. Deixe-me descer um pouco para 71, o mesmo com este, luzes menos dez, e este também é a saturação Acho que não mudei a saturação aqui. Ok, então essa será minha seção de tonalidades, e essa será minha seção compartilhada Então, deixe-me compartilhar. Atualmente são 81 turnos e parece que este também Entenda essa. Nesse caso, a saturação 100, então vamos manter 100 ats Se for para cem nesse caso, você pode modificá-lo um pouco. Só queremos uma pitada dessa cor. Eu vou até 95. É visível. Quase invisível. Agora, queremos criar alguns compartilhamentos, como compartilhamentos em preto e branco da cor primária. Deixe-me copiar este e deixe-me fazer os cinco. Isso não será totalmente preto, semelhante às cores. Como se tivesse que ser o mais escuro dessa cor. Eu vou para este. Depende totalmente de você e do seu design. Agora, neste caso, vou deixá-lo um pouco mais claro, assim, e copiaremos este Deixe-me virar mais para a esquerda O mesmo com este. O último tem que estar em branco esbranquiçado, não totalmente branco esbranquiçado. Se fizermos branco, é utilizável. Deixe-me fazer com que fique esbranquiçado. Ok, assim. Ok, então essa será nossa paleta de cores para esse design de interface do usuário para cartão É assim que criamos uma paleta de cores no Figma para nosso design Y. E no próximo pagamento, veremos como criar o estilo. Portanto, é muito útil. Deixe-me desenhar um retângulo. Então, eu posso simplesmente arrastá-lo para qualquer retângulo. Eu posso simplesmente preencher e escolher minha paleta de cores, como digamos que a minha atualmente, são as diferentes paletas Então, a cor é diferente. Então, digamos que este seja meu principal cologista que eu possa selecionar Então eu não preciso entrar no tipo de preenchimento, e então eu tenho que escolher a cor e soltar eu tenho que soltar. A tarefa de reentrada é interrompida aqui. Então, só precisamos acessar esta seção em estilos, na biblioteca e escolher cores para nosso design. Isso é simples. Este é o nosso sistema de design. Oh, desculpe. Este é o nosso sistema de cores para este aplicativo, clique no aplicativo. E aqui está um tipo profissional. É essencial observar que a cor pode ser útil para explorar cores complementares, como você pode usar cores de tela ou cores B automáticas e escolher as cores complementares Isso pode ajudar a encontrar cores secundárias e neutras para que se harmonizem com a paleta escolhida Lembre-se de que, embora exista alguma ciência na teoria das cores, também existe um elemento de criatividade. O processo envolve uma mistura de intuição, preferência pessoal e experimentação Portanto, sinta-se à vontade para explorar e ajustar até encontrar uma paleta de cores que ressoe 37. Como criar gradientes na Figma: Seja maxi designer, hoje estamos mergulhando no vibrante mundo dos abgradientes E confie em mim, vai ser incrível. Então, aperte o cinto de segurança ao embarcarmos na jornada para criar gradientes que não sejam apenas erradientes, um retrocesso ao vermelho que é Sim, estamos fazendo gradientes com um toque diferente. Ok, então vamos entrar no Figma e criar um gradiente. Então, por enquanto, vou escolher um retângulo e deixar pressionar a tecla shift para o retângulo Para criar um gradiente, temos uma opção especial em Phil. Então, vamos até Phil e podemos ver que temos várias opções, como primeiro descolorir Depois disso, temos o gradiente. Depois disso, temos milose. Depois disso, temos as imagens e depois o vídeo. Atualmente, escolhemos gradiente. E ingrediente, temos quatro opções como linear, radial, angular e diamante Então, na maioria das vezes, não usamos esse angular e diamante. Mas eu uso um linear muitas vezes. Então, vamos com linear. Então, temos essas opções, deixe-me entrar. Então você verá que obtemos essas duas caixas. Primeiro, é a cor primária. Então, vou escolher a tarifa. E a segunda será uma cor secundária. Você pode escolher qualquer cor que quiser. Então, eu vou dizer “ vamos dizer olá” assim. Ok, atualmente é transparente, então podemos aumentar a taxa de transparência para obter cores mais brilhantes como essa E temos uma espécie de clima de pôr do sol em nossa graduação. Podemos simplesmente ajustar essas linhas para a cor principal e a cor secundária, como essa. Se eu escolher, digamos, radial, então você pode ver que temos esse tipo de efeito baixo no meio, assim Podemos ajustá-lo a partir desse ponto, bem como a partir dessa linha. Agora, vamos dar uma olhada no angular. Angle é assim. É um círculo redondo, e podemos ajustá-lo como o mostrador, eu acho, assim. A maioria das pessoas não o usa. Nunca vi alguém usar angular em nenhum design. Vamos usar diamante novamente. Um diamante é assim. Isso cria um pequeno diamante e podemos ajustá-lo como d angular. O design requer qualquer um desses tipos de criação, para que você possa usá-lo. Depende totalmente do design. Vou escolher o linear porque gosto do linear assim e vou continuar assim. Ok, então esse será o nosso gradiente. Então, deixe-me mostrar um graduado que criei para o design desta hora, que veremos no futuro. Então, esse graduado que eu criei, eu uso a cor primária vermelha, bem como essa cor popo, então combina com esse troféu. Então, parece ótimo. É assim que você cria um gradiente em Fa. Se você quiser se inspirar, pode ir para o gradiente, e há várias opções que você pode escolher Eu sei que há três páginas no site, mas não são três páginas. Tipo, se eu for para esse estilo, posso mudá-lo assim. Eu posso adicionar várias cores. Portanto, este não é um site de três páginas. Ele tem vários, tipo, milhões de cores, então você pode simplesmente discar e se inspirar nessa cor e criar seu próprio gradiente Então, meus amigos, vocês se tornam profissionais de gradientes na Figma. Então você não está apenas projetando, você está criando uma sinfonia visual de cores Então vá em frente, experimente, divirta-se e eu vou ver você no próximo vídeo para mais delícias de design Portanto, mantenha a criatividade fluindo. 38. Como criar um sistema de cores na Figma: Mas estudantes. Hoje, vamos criar estilos de cores em uma figura, como essa na tela Eu sei que existem cores de bunjob porque eu estava tentando experimentar algo com É por isso que ele criou alguns estilos de banjop no meu painel de design Então, eu os leria e criaremos tudo do zero. Então, antes de fazermos isso, deixe-me dizer, imagine um mundo onde você possa salvar e reutilizar suas cores favoritas sem esforço salvar e reutilizar suas Mantenha a consistência em todos os projetos e compartilhe perfeitamente sua paleta de design com Bem, a corneta, porque é exatamente nisso que estamos mergulhando. Os estilos de cores são o ingresso para uma jornada de design mais organizada e eficiente Então, não há mais colírio infinito para fazer um teste, então estamos subindo de nível. Deixe-me deixar essa, porque isso é demais. Eu posso ter 2604 cores nele, então deixe-me excluir 2604 Ok, agora está ótimo. Ok, até agora, para criar um estilo de cor, basta selecionar nossa cor. Essa é a nossa cor primária, essa. Não sei como se chama azul tingido ou azul esverdeado , algo assim Se você sabe o nome da cor, por favor me avise. Quatro estilos, é simples, selecione qualquer cor e, nesse caso, essa é a cor primária, essa é a segunda cor e essa é a cor neutra e de destaque Esses são os tons do nosso cinza. Então, vamos escolher nossa cor primária, e podemos simplesmente clicar nesse botão de adição para criar um estilo. Podemos fazer isso em tudo, como se eu quisesse, digamos, com um derrame. Então, basta clicar no menu de quatro teclas e adicionar um botão de adição e obterei um estilo. Sit effect, Smith port, não symmet, exporte seus efeitos de traçado, preenchimento e com um texto Então, por enquanto, estamos interessados em cores. Então, vamos preencher. Clique no botão de adição. E vou chamá-lo de primário. Mas antes temos que adicionar o nome da nossa marca, porque na FMA, trabalhamos com muitas equipes e com muitos projetos, então vai dar errado, como quando trabalhamos em novos Então, deixe-me dar um nome. Serão as primeiras iniciais da nossa marca. É só clicar no cartão. Então, vou usar o CC. Tash. Primária. E vai ser um. Você também pode adicionar uma descrição. Digamos que você esteja trabalhando com várias pessoas da loja, então você pode adicionar uma descrição, tipo, qual é o significado dessa cor? Por que estamos usando isso? Onde vamos usar essa cor? Digamos que vamos usar essa cor apenas com um texto ou plano de fundo, para que você possa adicioná-la na descrição, para que outras pessoas conheçam essa cor. Ok, então vamos criar um estilo. Então, acabamos de criar nosso estilo. Deixe-me te mostrar uma coisa. Menos que eu esteja projetando algo assim, e eu não quero usar o conta-gotas como eu vou escolher, e depois vou escolher assim É meio doloroso e também uma perda de tempo. Nesse caso, o que podemos fazer é usar o estilo. Elemento seletivo, basta ir ao estilo e escolher nossa cor primária Esse vai ser esse. fácil em comparação com a ferramenta Iroper OK. Deixe-me fazer isso. Sempre escolha este e este e deixe-me renomeá-lo. Deixe-me te mostrar mais uma vez. Eu sei que algumas pessoas podem ser expulsas. Deixe-me mostrar a eles. Ok, então escolha sua cor. Vá para este menu de quatro dardos, menu estilo, clique em mais Nomeie, neste caso, será o segundo principal e criará um estilo. Agora vou acelerar este vídeo. Ok, vermelho vai ser uma cor secundária, então vou chamá-la de secundária, e todo o processo é o mesmo. E essa será nossa cor neutra. Então, vou chamá-lo de neutro, faça c neutro. Você também pode chamá-lo de sotaque. Isso também é chamado de sotaque. E esses serão tons de cinza para nosso design. Eu sei que não parece cinza, mas esses serão nossos tons de cinza para nosso sistema de cores. Ok, então terminamos com nosso estilo, mas uma coisa permanece, isso é gradiente. Não tenho certeza se devo adicionar isso ou não, mas vamos lá. Vamos adicionar isso. Style e D, eu encaminho para o capital. Gradiente. OK. Só temos um gradiente, então vou manter apenas um estilo gradiente maior Se eu clicar nesse espaço vazio, como você pode ver, nosso sistema de cores, está aqui. E podemos simplesmente escolhê-lo e usá-lo sempre que quisermos e onde quisermos. Como quando eu estava aprendendo Figma, naquela época, o botão de gradiente não estava lá Podemos adicionar gradiente como estilo, mas ele não é visível aqui Então, para isso, temos que entrar nesta seção e depois escolher nosso gradiente, assim. E tem uma coisa. Então, digamos que você use muito essa cor, então você pode mover essa cor em uma parte superior como esta, e é fácil escolher e ir e voltar enquanto muda de cor. E digamos que você queira mudar o nome por algum motivo, queira dar outro nome a ele. Nesse caso, basta clicar em selecionar qualquer cor. Nesse caso, eu escolho o C primário. Então, eu quero nomeá-lo como um zero primário. Nesse caso, posso usar esse estilo de disco, renomeá-lo e alterar a descrição e a transparência É assim que você edita seus estilos de cores. Então aí está, pessoal, estilo de cores na glória de A D. Não estamos apenas organizando cores. Estamos curando uma obra-prima, então prepare-se para mais aventuras de design até lá, um estilo feliz 39. Maneira mais fácil de gerar paleta de cores no Figma (Como usar plugins): Ei, designers, vocês já desejaram poder criar paletas de cores deslumbrantes para seu design em um Bem, hoje, estou revelando duas armas secretas que transformarão você em uma paleta de cores na loja Então, estou apresentando o construtor de fluxo de materiais e o gerador de cores de base. Esses plug-ins são o seu balcão único para criar uma bela paleta em um segundo, liberando você para se concentrar no que realmente importa Então, chega de encarar a confusão de cores, chega de passar horas criando a Esses plug-ins fazem o trabalho pesado para você. Assim, você pode criar um design atraente em uma fração do tempo Então você está pronto para mostrar o mestre de cores interno? Então, vamos mergulhar nesses incríveis plug-ins. Ok, então vamos ver os plug-ins no Figma. Você pode acessar a comunidade e, a partir daqui, pesquisar esses plug-ins. E também conhecemos o atalho que está aqui. Acho que se chama recursos. Você pode usar shift eye para isso. Vá até os plug-ins, procure esses dois plug-ins e clique em Executar, para que ele se abra assim. Primeiro, vamos usar o gerador de cores base. Esse plug-in nos ajuda muito. Anteriormente, vimos que estávamos criando esse sistema de cores de paleta de cores para nosso design E quando estávamos criando esses ladrilhos, demorou algum tempo e conseguimos criar esse sistema de cores em 10 minutos, eu acho. Mas nesses plug-ins, podemos criar paletas de cores por apenas um segundo Para o perfil, vou escolher o material. Então, para o nosso design, a cor primária é essa. O azul de aço, eu acho. Vamos clicar aqui e deixar eu experimentar aqui. Clique aqui e vamos escolher essa cor principal, essa cor primária. Como você pode ver, temos nossa paleta de cores para essa cor primária Então, podemos simplesmente clicar nesse botão de paleta e temos nossa paleta de cores para essa cor azul Eu posso simplesmente arrastá-lo para qualquer lugar na minha tela e posso usá-lo diretamente. Eu sei que você pode estar pensando, podemos criar um estilo? Sim, você pode criar um estilo. Você pode simplesmente clicar neste botão de estilo de carro, e ele criará um estilo para você, e está aqui. A base azul. E como você pode ver, temos paleta de cores para nossa cor primária E você pode renomeá-lo como, digamos, eu quero ser renomeado principalmente para azul Então, eu posso apenas nomeá-lo, e então eu tenho que criar novamente o estilo de design. Então, deixe-me ler este primeiro. Então corte e estilo c. Então, como você pode ver, temos azul primário. E também adicionou o código ou, eu acho, código de valor g. Então, como você pode ver nos estilos de cores, temos o estilo de cor azul. Assim, podemos usá-lo diretamente em nosso design. Portanto, é muito simples criar paletas de cores e estilos de cores usando apenas um clique Então, agora vamos seguir em direção ao próximo plug-in. Esse é o criador de temas de materiais. Esse plug-in é exatamente o mesmo, mas tem recursos como adicionar imagem a ele e extrair cores dele. A diferença entre o plug-in Foundation e plug-in do Material Theme Builder é que temos essa opção, podemos importar uma imagem e ela extrairá, eu diria, uma paleta de cores dela e criará uma paleta de cores E ele adicionará automaticamente todas essas paletas de cores em nosso sistema de cores, então não precisamos adicionar manualmente dessa forma, como você pode ver, desta forma Mas eu vou dizer, não use muito esse plugue porque ele te deixa preguiçoso e às vezes falta muito Então, eu direi que use o plugue de base. Então, atualmente, estamos em dinâmica. Então, na dinâmica, temos a opção de adicionar imagem. Se optarmos pela personalização, levará algum tempo, pois ela cria estilos e tudo o que ela adiciona em estilos de cores. Então, isso leva tempo. Na alfândega, podemos escolher nossa cor primária, cor secundária, cor neutra, cor de destaque de acordo com nossa necessidade, e criar estilos de acordo com isso Ok, então estamos na alfândega agora. Podemos simplesmente clicar no primário e deixar eu escolher minha cor primária. Não temos a opção, eu diria, de adicionar essa cor. Então, o que temos que fazer é ir para essa cor e adicionar o código x. Digamos que essa seja nossa cor primária. Não é. Se eu aplicar, ele escolhe nossa cor primária e começa a criar um estilo Se eu for para o estilo de cores e, como você pode ver no material, ele está começando a criar estilos de cores. Como você pode ver, o primário primário e tudo mais. Então é assim que esses plug-ins funcionam. Tudo bem, designers, exploramos o incrível poder do material, mesmo construtor e gerador de cores básicas E agora você está equipado com a incrível paleta de cores que elevará seu design Lembre-se de que o fundamental é fundamental Antes de mergulhar nos plug-ins, entenda o básico da teoria das cores. Assim como cores complementares e harmonia de cores, esse conhecimento fornecerá uma base sólida para criar ainda mais paletas infectadas E não se esqueça que esses plugins são uma arma secreta. Use-os para aumentar sua eficiência e experimentar as diferentes combinações de cores. Deixe que eles sejam seus colaboradores criativos, ajudando você, a menos que você seja um guru das cores Então, continue praticando, continue explorando e continue criando. Lembre-se de que o único limite é sua imaginação. E, ei, se você ficar preso, não hesite em revisitar o vídeo para uma rápida atualização 40. Projeto 06 cores, estilos e grades em ação!: Você está pronto para usar sua criatividade e embarcar na aventura do design Bem-vindo ao projeto número seis, onde cores, estilos e grades se unem para dar vida ao layout de um aplicativo móvel Então, o primeiro passo é escolher sua paleta de cores. Mas por onde começar, acesse esses recursos incríveis para se inspirar nos seios. Se você gosta de sapatos ousados ou de um pilão relaxante, lembre-se de escolher três ou quatro cores que estimulem lembre-se de escolher três ou quatro cores que estimulem lindamente os hormônios. O primeiro passo é um estilo de cor mais artesanal. Agora deixe sua imaginação fluir livremente, experimente diferentes tons e combinações para dar vida ao seu design De tons primários a tons de destaque, cada escolha de cor conta uma história Deixe sua criatividade brilhar. Agora, etapa número três, crie o layout móvel. É hora de colocar ordem na tela. Abrace o poder das redes para criar equilíbrio e estrutura E a etapa número quatro, a criação de tapetes, quando sua masterização estiver concluída, capture-a e compartilhe-a na projeção. Lembre-se de que não existe design errado, criatividade floresça e, mais importante, tenha um ao longo do caminho Então, se você está a favor do desafio, vamos mergulhar e criar algo extraordinário juntos. Então, boa sorte e feliz design. 41. Melhores práticas para escolher fontes e emparelhamento de fontes em interface do usuário e design web: Estudantes do Work Ma, hoje estamos mergulhando no mundo das fontes. A escolha da fonte pode ser um playground criativo, mas também deve ser levada em consideração. Então, vamos explorar qual fonte você permite usar a opção popular e um pouco de mágica de combinação de fontes Então, como você pode ver, na Figma, temos várias opções de fonte Também inclui InstrutdFont. Então, quais fontes podem ser usadas no Figma. Portanto, o universo do design está ao seu alcance e você não está limitado a duas fontes específicas Queremos garantir que a fonte escolhida tenha uma versão wave disponível. A convenção e a escolha popular para isso são as fontes do Google. Então esse é o site de fontes do Google. Ok, o font.google.com. É um verdadeiro tesouro de fontes gratuitas compatíveis com a web que você pode usar comercialmente, certo? Mas você pode estar pensando: por que não usar todos os telefones da sua máquina Bem, é crucial confirmar se suas fontes seletivas são compatíveis com a web Você pode ter uma fonte sofisticada que comprou recentemente. Mas lembre-se de que uma licença diferente pode ser necessária para um uso extra e na web. Portanto, não hesite em investir em fontes, se necessário. Eles são as trocas secretas do design estelar. Agora, vamos dar uma olhada rápida nas fontes do Google. Este é um dos sites mais populares na área de design gráfico. Você pode obter qualquer fonte que quiser nas fontes do Google. Basta selecionar uma fonte como vamos lá e selecionar esta, banir uma, e podemos simplesmente baixá-la. Podemos baixar toda a família da fonte. Podemos baixar uma única fonte específica como se você gostasse apenas desta. Você também pode baixar este. Obteremos as informações sobre a fonte dessa forma. E se você quiser aprender um pouco sobre topografia e psicologia da fonte, você pode ler o artigo Há outro site chamado Canva. No Canva, também recebemos vários artigos. Portanto, se você leva design gráfico a sério design ou trabalho gráfico, leia este artigo, pois ele acabará por ajudá-lo em seu processo de design. Para instalar a fonte, basta baixar o arquivo e a dupla conidade. Ele será instalado automaticamente em um sistema. Ok, então isso é sobre a fonte do Google. É um dos melhores sites, eu diria, mas digamos que, se houver uma fonte de informação que você não está recebendo na fonte do Google, nesse caso, você pode usar este site chamado de font.com Alguns dias atrás, eu estava editando um vídeo e queria HS tipo f. Então eu pesquisei na fonte do Google, mas não entendi. Neste site, eu pesquisei HS e obtive essa fonte. E eu o usei no meu vídeo, e é totalmente gratuito. Também nos diz que está disponível comercialmente para uso ou não Este também é um dos melhores sites que você pode usar para suas fontes. Então temos esse site chamado fontes. exemplo, se você quiser Por exemplo, se você quiser fontes Dfonts realmente treinadas, você pode acessar este site Como neste caso, eu quero escolher essa fonte MurmuraFont Posso acessar essa fonte , baixá-la e usá-la no meu design. E você pode ver que a licença é gratuita para uso pessoal. Se você quiser usar para uso comercial, talvez seja necessário comprar a fonte. E também temos esse espaço de fonte do site, assim como temos esquilos Então, esses são alguns sites de fontes gratuitas, você pode simplesmente baixá-los e usá-los em seu design. Agora, vamos entrar no emparelhamento de fontes. Depois de escolher uma fonte, explorar o emparelhamento é uma jogada inteligente Por exemplo, se você tem uma fonte S para títulos e considera uma forma sans re para o corpo do texto ou vice-versa Nesse caso, existem alguns sites que podem ajudá-lo. Então, na maioria das vezes, eu uso este site, par de fontes. Eu me inspiro muito neste site. Eu uso muito este site porque às vezes minha criatividade diminui e eu quero precisar de alguma motivação criativa. Então eu vou para este site. Então, como outro dia, eu estava desenhando alguns pôsteres para um cliente E eu estava me sentindo um pouco preso à fonte porque o cliente não especificou qual fonte eu deveria usar para seu design. Então, entrei neste site e examinei alguns dos pares de fontes E no final, eu escolhi, acho que era fonte básica. Ok, eu escolhi este, o robô e o roboto. E no final, ele gostou. Então, são recursos muito bons. Portanto, há tão poucos sites que eu uso, mas não muito parecidos com o monotype Este também é um dos melhores sites para emparelhamento de fontes, você pode acessar, vamos falar esse emparelhamento de fontes. E esse é o par de fontes. Também podemos trocar as fontes dessa forma, assim como obter mais pares, e podemos simplesmente selecionar essa, eu posso alterá-la e também podemos gerar nosso próprio par Portanto, este é um ótimo site. Depois disso, temos fga. Este também é um ótimo site. Para um iniciante, pode ser um site confuso. Então eu vou dizer que evite isso. Então, digamos que você queira ver o trabalho real da fonte. Portanto, nesse caso, você pode usar este site chamado fonte em uso. Digamos que você queira ver o trabalho real da fonte, como vamos usar esta. Então você pode ver a fonte usada neste livro didático, eu acho. E mostrará como funciona depois adicioná-la em páginas semelhantes, e você poderá ter uma perspectiva real dessa fonte antes de usá-la. Portanto, isso economizará seu tempo e você terá uma ideia de qual fonte usar ou qual fonte evitar. Eu sei que você pode estar se sentindo oprimido ao ver toda a fonte e tudo Eu já disse que basta ler este artigo e aprender tudo sobre a fonte se você leva a sério o design gráfico Lembre-se de que o emparelhamento de fontes é mais arte do que ciência. Portanto, confie nos instintos de design. A propósito, eu também adicionei todos os links nos recursos. Basta acessar o Google Fonts ou esta fonte Da para se inspirar, acesse, digamos, este site da Fontin, e pegue um pouco de inspiração e use o design inv Então, isso é tudo sobre fontes e aula básica de topografia. Então, vejo vocês na próxima. 42. Criar a escala de tipografia perfeita para projetos de interface do usuário e web: Oi, pessoas incríveis. É mais do que aqui. É quinta-feira às 10h30 e está chovendo lá fora. Achei que esse seria o momento perfeito para fazer com que Cozy fizesse um projeto para perfurar. A propósito, antes de começar, eu sei que se vocês estão procurando uma boa música para ouvir enquanto estão criando, ela tem uma taxa baixa para transmissão de 24 horas que eu deixo rodando em 2047 enquanto estou criando, e isso realmente me ajuda a ficar imerso no que estou fazendo Então, se você está procurando uma boa música, dê uma olhada. Agora, vamos tentar invadir nosso design para viajar. Aqui temos o layout de configuração de tipografia que temos para nosso Utilizamos o mesmo sistema de design em todos os nossos projetos porque ele nos ajuda a manter as coisas consistentes e, assim, não precisamos reinventar a roda toda vez Se você der uma olhada em como configuramos nossa escala de tipos, temos três seções, exibição, título e corpo do texto. Esses tipos p são, na verdade, para páginas de empréstimo e sites de marketing Onde você encontra em uma página inicial específica, você pode perceber que os títulos da seção de heróis são muito maiores do que H, aquele que você terá em todo o seu aplicativo web Portanto, no design específico da interface do usuário, tentamos ter um estilo específico para esse site de marketing e os títulos nele contidos. Assim, podemos torná-los extremamente grandes, extremamente ousados, e isso não afeta nenhum dos outros títulos que temos em áreas mais proeminentes, como as páginas da interface do usuário, a tela da interface do usuário e a página do próprio aplicativo Então, separamos isso, e então você verá que temos nossos títulos de um a seis, e você perceberá que há poucas variações neles Estruturamos isso em um formato de texto dedicado e, seguida, também temos um tablet e celular virgens menores dedicados Isso nos permite reduzir todo o tamanho de todos os nossos tipos de forma cuidadosa E também parece extremamente bonito. Em termos do corpo da cópia, temos algumas variações, forma do corpo, tamanho da legenda, tamanho da foto Geralmente, você quer trabalhar com 14 ou 16 pixels, que são os tamanhos mais usados, e não há razão para reinventar a roda Então, mantenha dois 14 ou 16. Então você tem a legenda, que geralmente são apenas pequenos trechos de legenda que você usa em todo o site Pode ser um texto detalhado de dica de ferramenta. Podem ser algumas dicas úteis que você coloca abaixo de um campo de entrada, coisas para as quais você realmente não precisa chamar muita atenção Depois, você também tem os tipos de fotos, que são tipos realmente minúsculos que você pode usar aqui Talvez na foto dos termos e serviços ou da política de privacidade. Coisas para as quais você realmente não quer chamar muita atenção e elas realmente não exigem muito potencial. Agora que você entende como criamos nossa própria escala de tipos responsivos, vou mostrar a vocês como usar isso em projetos reais Eu criei uma página inicial conceituada para Você pode acessar esta página inicial quando quiser trazer esse conteúdo ou para a visualização do tablet Então é isso que você vai fazer, tipo, deixe-me detalhar isso primeiro. Então, digamos, se eu trouxer isso, bem como este. Então, se eu copiar isso e levar para a versão para tablet, ele se encaixa perfeitamente. Preciso me ajustar um pouco, mas se encaixa perfeitamente. Ok, então eu posso ajustar este. Assim. Obviamente, você o copiará e colará, e eu poderia simplesmente copiar e colar este apenas para ilustrar o que quero dizer E você pode pensar consigo mesmo: Ok, bem, nos projetos ou neste espaço, especificamente, o tamanho do tipo realmente parece bom. Realmente não parece excessivo. Se houver muito espaço para respirar, ele se encaixa e não parece bagunçado Como você pode ver, ele se encaixa perfeitamente. E então, quando estiver satisfeito com um tablet, você pode mover tudo para a visualização móvel. E então é aí que você começa a perceber, oh, essa fonte é um pouco grande demais para a tela. E você pode pensar em reduzir esse tamanho de tipo. Então, deixe-me te mostrar uma coisa. Fontes diferentes têm pesos diferentes. Então, essa é a fonte Bon, e essa é do tamanho de Berlim, meio demi. Mas o tamanho da fonte é totalmente o mesmo. Como você pode ver, este é 24 e este é dois. Mas esse parece maior. Portanto, fontes diferentes têm pesos diferentes. E é muito difícil ter um sistema que funcione para todos eles. Então essa é a principal consideração que vocês precisam fazer. Para reiterar depois de configurar sua escala de tipos. Em seguida, você precisa ter certeza de que criou a versão menor de todos os seus títulos. Então, você quer ter certeza de ter uma versão menor para toda a variação do corpo do texto. Seu corpo, seus parágrafos, sua legenda e suas fotos Mas uma coisa que você precisa considerar agora é que chegará um momento em que você poderá trabalhar no mesmo site. Mas uma das páginas tem um título muito longo, e isso é uma ocorrência muito comum. Portanto, se você considerar reduzir o tamanho da fonte na página, precisará garantir que isso também seja consistente com as páginas. Portanto, essas são algumas considerações que você precisa fazer e trabalhar com sua equipe para descobrir como se adequar a tudo isso Agora, vamos corrigir isso como um design móvel. Como você pode ver, isso é um pouco confuso e não parece muito bom Então, neste caso, o que podemos fazer é que o tamanho da fonte, eu acho, seja 61, e ok, seja 60. Acho que acidentalmente o estendi para um. Ok, então deixe-me reduzi-lo para um título menor. Então, neste caso, vou usar 34. Porque este é para tablet e este é para celular. Deixe-me ir e mudar para 34. E esse quatro é 24, deixe-me escolher uma cópia móvel que será, eu acho, 14 ou talvez 16 ficará bem. Então, vamos com 16 e deixe-me escolher 16. OK. E deixe-me estender a caixa. Então, eu vou me encaixar bem. E deixe-me estender este também. E depois de mudar o tamanho, este é o H, este pode ser S dois ou S três ou este pode ser como H quatro. Então, depois de alterar todos os títulos e tamanhos de texto, tamanhos de telefone, parece bom Agora, espero que isso faça sentido para vocês. Então, isso é tudo sobre tipografia e sistema de tipografia. E provavelmente na próxima, veremos como podemos fazer isso em um estilo, como criamos em formato de cores, então vamos criar a mesma coisa para um texto. Portanto, não precisamos gostar, adicionar uma fonte, fazer um corte grande e pequeno. Então, será fácil se criarmos estilo. Então, agora, espero que isso faça sentido para vocês. Tudo bem, pessoal, nos vemos na próxima. 43. Maneira mais rápida de criar estilos de texto na Figma: Bem-vindos de volta, designers. Nesta licitação, estamos mergulhando no mundo têxtil da Figma Anteriormente, aprenderemos sobre esse sistema de tipografia que usaremos em todos os nossos projetos Isso mudará o projeto agonal da mesma forma que a fonte mudará o projeto agonal, mas todos os tamanhos de fonte serão os mesmos Os têxteis são as mudanças do jogo. Eles trazem consistência e permitem atualização rápida para o design de uma política. Então, vamos direto ao assunto. Então, deixe-me mostrar um exemplo. Então, esse é o único texto, e eu quero atualizá-lo em outra coisa, como em um único clique. Então, nesse caso, os têxteis nos ajudam muito. Então, só temos que ir a esse menu de quatro. Estilo e, atualmente, temos um monte disso. Deixe-me escolher este, médio. Assim, você pode ver uma mudança de estilo em um clique. Deixe-me fazer isso mais uma vez com este. Deixe-me escolher um de cabeça para cima. Ok, eu mudo agora. É assim que os têxteis funcionam. Agora, vamos entrar no FMA e criar têxteis. Ok, na verdade estamos no Fa. OK. Deixe-me ir para aquela proposta de tipografia Não sei por que sempre digo topografia, mas é tipografia Ok, vamos começar com este. Mas neste projeto, não estamos usando o display porque usamos principalmente esse, esse, esse, talvez provavelmente esse e tudo isso. Então, talvez esse também, mas não esse grande. Mas podemos compartilhar nossos têxteis em diferentes projetos. Então isso pode ser útil. Então, deixe-me começar este. Mas antes de fazermos isso, deixe-me excluir o tecido antigo, que não vamos usar Ok, deixe-me mostrar como excluir tecidos se não quisermos nenhum tecido em seu projeto Você pode simplesmente clicar no tecido diretamente sobre ele e excluir entre as camadas E isso dirá isso. Agora, vamos criar alguns novos tecidos OK. Este é para títulos, talvez eu diga sites, sites que são títulos grandes e ousados, como notícias. Então, deixe-me escolher este. E eu vou escolher, primeiro, deixe-me mudar porque é 61, e eu quero 60, 60. Vamos para quatro menus, botão de adição, criar um estilo e eu quero nomear esse título ou podemos nomeá-lo como título de exibição. Então, no futuro, saberemos que esse é o título da tela. Exibir título, e eu vou atribuir zero a esse título de exibição. E você também pode adicionar uma descrição e criar um estilo. Ok, então criamos nosso primeiro estilo. Agora, vamos direto ao assunto se alguém estiver perdido em seu mundo imaginário Então, deixe-me mostrar a eles novamente, como fazemos isso. Então, basta selecionar qualquer fonte na qual você deseja criar um estilo. Nesse caso, eu quero criar esse. Esta é a fonte do tablet tate pixel extra polt. E neste caso, eu vou para o cabeçalho um. E podemos especificar que este é um para tablet. Selecione textos, vá para Fortune, crie um estilo, um botão de adição e uma tabela Título 1 do tablet, crie um estilo. Ok, agora você sabe como criar um estilo. Então, vou avançar rapidamente para todos eles. Ok, então eu criei essa célula de design. Eu pulei este porque, neste projeto, não vou precisar desse corpo de cópia Então, se eu clicar no espaço em branco, como você pode ver, obtemos nossos títulos. Desculpe, temos nossos tecidos. Então, como você pode ver , é desorganizado, ou talvez esteja organizado Ok, alguns dos organizados, alguns deles não estão organizados, então vamos ver como podemos organizá-los. Ok, então você pode ver o tablet indo para baixo deste. Então, deixe-me rastrear isso assim. E é assim que você pode se organizar. Atualmente, esse é o título móvel. Este vai ser aqui um, dois, três, quatro, cinco, seis, e tudo está organizado. Quando você estiver trabalhando, será como qual título e qual é o tamanho da fonte. E também informa qual é o tamanho da fonte. Atualmente, esse 60, esse é um 48 24 e tudo mais. E digamos que você queira atualizar alguma coisa. Deixe-me adicionar algum texto como eb words. Deixe-me ir aos têxteis. Digamos que eu queira atualizar as leituras do celular, então podemos simplesmente clicar nela, e haverá alguns desses botões, esse botão de estilo Então, podemos clicar neles, e atualmente é uma placa aberta, então eu posso mudar para vamos continuar com isso ou apostar em cada gole E também podemos fazer o que dizemos. Também podemos alterar o tamanho dos quatro. Então, atualmente é 20. E podemos fazer com que seja 64 assim. E agora nosso estilo está atualizado. E se eu entrar aqui, como você pode ver, os dois estilos também são atualizados aqui. Então, porque escolhemos esse formulário e mudamos e atualizamos. Então, ele também atualizou o principal. Então deixe-me fazer isso porque eu não quero esse texto cifrado por enquanto Ok, agora eu tenho o que eu quero. Então é assim que você cria têxteis. Portanto, ao trabalhar nesse processo, lembre-se de que organizar seu tecido é crucial Você pode ter estilos diferentes para títulos de marketing, cabeçalhos informações ou outras categorias Isso ajuda a manter a clareza e a consistência em seu design. E há uma coisa que devo dizer, neste caso, eu projetei isso como, desculpe, eu nomeei isso como título para celular, título para tablet ou título para desktop. Tem que ser assim. Você pode simplesmente chamá-lo de Título um, Título dois, Título três. Você não precisa especificar dessa forma, como tablet ou celular. Então essa é a minha escolha principal. Eu vou dizer. É assim que eu trabalho. é por isso que eu escolhi este, esses nomes. Então, se você quiser mantê-lo como título um, título dois, título três, assim ou parágrafo, você pode nomear dessa forma. Então, espero que você goste criar e atualizar tecidos no Figma, então fique ligado para mais aventuras de design emocionantes no próximo vídeo 44. Como adicionar texto de lorem ipsum no Figma: Bem-vindo aos estudantes. Desta forma, estamos mergulhando no mundo do texto playdo Componente crucial nesse processo de design. Em vez de usar termos de gênero como playdo text ou tritratoex, exploraremos Lorm Ipsen, uma escolha clássica para playdo text ou tritratoex, exploraremos Lorm Ipsen, uma escolha clássica para gerar texto que lembra o inglês. Para tornar nossa vida mais fácil. Vou apresentar a você um plug-in fantástico chamado content rail. É um verdadeiro divisor e vamos usá-lo para várias tarefas ao longo do curso Então, primeiro, vamos falar sobre o site da Lorem PSA. Existe um site oficial do Lorem Ipsum. É chamado psm.com. Tem muitos anúncios, mas atualmente eu estou usando o navegador Breo, então bioexplore todos os anúncios, até mesmo no YouTube, para que você possa usar o navegador Bo Você não precisa adicionar nenhum bloqueador de anúncios ou plug-in para isso Funciona. Simplesmente funciona. Ok, então o site é lipsum.com. E você pode simplesmente clicar neste botão gerar. Atualmente, estou criando cinco parágrafos. E se eu clicar em gerar Amon com cinco parágrafos, ele gerará Mas, neste caso, eu quero apenas um, então vou usar um Ipsum de geração E como você pode ver, eu tenho um parágrafo. Mas é uma ferramenta no. Eu não quero essa quantidade de palavras, então vou copiar para esta. OK. Então, digamos que eu queira adicionar texto porque não tenho ideia. O que devo acrescentar aqui. Então, por um tempo temporário, eu quero adicionar algum texto. Então, nesse caso, vou usar teares. Mas, como você pode ver, a palavra não está embrulhada e está exagerada em nosso projeto. Ok, deixe-me entrar e me deixar encolher assim. Então, como você pode ver, o tamanho da fonte não é ótimo. Então, nesse caso, o que podemos fazer é usar estilos de cores, que aprendemos no vídeo anterior. Então, basta selecionar o texto neste caso, neste caso, mm e estilo de texto. E acho que vou escolher o gato 16 Sits. Deixe-me adicionar esse conjunto no centro. É assim que a L Epson funciona. Mas no Figma, nós nos conectamos, o que é muito popular, então vou dizer que como todos eles. Todos eles usam esse plug-in de conteúdo real, esse, o conteúdo real. Basta clicar nele. Se você não tiver esse plug-in introdud, basta instalar. Você sabe como funciona Você conhece o lar, é um e você pode ir para o teste. Ele adicionará a parte superior , basta clicar nela. Eventualmente, temos son plag shder e eu sei que é um pouco curto, mas acho que temos que assiná-lo para torná-lo maior, se você quiser, tamanho grande ou por, como este Eu acho que você tem que assinar. Ok, então esse plug-in de conteúdo realmente ajuda em tudo, como se você quiser um número completo, ID de mL, número de telefone dos EUA, nome da empresa e país Você escolhe. Você tem todo o tipo de espaço reservado Então, ele os gera automaticamente ou talvez tenha todos esses dados ativos em seu banco de dados. Então, eles o buscam aqui e o adicionam ao nosso design. Também podemos adicionar o ícone de imagens e, em adição, deixe-me ver. Ok, também podemos adicionar nossas próprias coisas. Ok, isso é ótimo. Então é assim que o content reel funciona, e é assim que você pode usar um Epson a partir desse content É uma combinação revolucionária que torna seu processo de design mais suave e Lembre-se de explicar aos clientes que usar textos antigos é intencional, especialmente se eles não estiverem familiarizados com o conceito, então fique para ver mais dicas e truques de design no próximo vídeo 45. Dicas e truques de texto úteis na Figma: Bem-vindos, meus alunos. Neste vídeo, vamos criar essa incrível página de introdução do cartão de clique Você pode estar se perguntando como diabos ele colocou esse nodo no iPhone nesta página de introdução Então, vamos ver todas essas coisas também. Existem alguns recursos de texto. Eu não te mostrei na versão anterior, então vamos aprendê-las também. Então, antes de fazermos isso, vamos aprender sobre alguns recursos de texto. Ok, então quando você está projetando coisas como Figma, como parado, você pode ter um pequeno problema, como adicionar algum espaçamento ou aumentar algum espaçamento ou diminuir algum espaçamento Então, neste caso, como você pode fazer isso. Então é simples, clique no texto assim e vá até esse menu avançado. Nessa configuração de tipo, temos essa opção, espaçamento entre parágrafos Então, eu sei que quando eu estava aprendendo Figma, eu costumava fazer isso, quando eu queria adicionar pressão, espaçamento entre parágrafos, eu costumava fazer isso, mas isso não é Portanto, temos um recurso específico para o chamado espaçamento entre parágrafos Então, basta arrastá-lo para a direita para adicionar espaçamento e arrastá-lo para a esquerda para pressionar o botão direito Então, neste caso, deixe-me somar, tipo, Ok, então é assim que você enfrenta um protótipo Ok, vamos supor que você tenha esse cenário, como se você quisesse alterar a propriedade do texto ao mesmo tempo. Então, nesse caso, o que você vai fazer é acessar a pesquisa universal, como Cutter, além da barra frontal, e pesquisar propriedades de texto Ok, selecione todas as propriedades do texto e ele selecionará todo o texto que você usa neste design. E, ao mesmo tempo, você deseja alterar as propriedades do texto interno. Você pode simplesmente dividir isso e transformá-lo em algo parecido com isso. E você pode ver que, ao mesmo tempo, com um único clique, podemos alterar nossas propriedades de texto. Você pode aumentar o tamanho frontal, alterar a frente e também alterar o tipo, como semi volts extras em negrito E além do espaçamento e tudo mais. Então deixe-me fazer isso porque eu não quero esse. OK. E eu acho que você pode ver os números dos marcadores, mas não usamos tecnologia, deixe-me selecionar este Vamos adicionar uma seção e podemos simplesmente usar nossa lista de marcadores desta forma Nenhuma lista, lista com marcadores e lista de números como essa Ok, então há um recurso que eu gosto, mas não uso muito. Digamos que você tenha uma página em branco e tenha apenas uma opção. Clique em mim. E você quer adicionar um link dentro dele. Então, basta selecionar isso. E como você pode ver Top armo, temos essa opção inserir link E podemos usar o Control K para isso e simplesmente clicar nele e adicionar qualquer link. Nesse caso, anteriormente, vimos o MSM, então adicionarei o WW LPS E se eu for para o protótipo, posso mudar a cor Assim, o usuário saberá onde devo clicar. Ok, então eu vou torná-lo vermelho, torná-lo rosa. E deixe-me ir para o protótipo. OK. E se eu clicar aqui, ele será redirecionado para mim , pois está aparecendo como eu quero redirecionar para a Laura Como você pode ver, é assim que adicionamos links redirecionamos nossos usuários para nossos sites OK. Existem algumas funções básicas, como você pode usá-las se souber um pouco sobre o Google Docs ou qualquer software básico de documentos Então, digamos que você queira fazer esse parafuso. Atualmente está em negrito, mas vamos supor que não seja ousado, é normal. Nesse caso, o que você pode fazer é usar o Controle B para fazê-lo aparafusar. Se você quiser desfazer isso, pressione novamente o controle B, ele estará no formato normal Se você quiser deixar itálico, você pode pressionar control para itálico E se você quiser desfazer isso, controle novamente assim Outra coisa é que, se você quiser adicionar sublinhado, use o controle. Isso adicionará sublinhado Como você pode ver, foi adicionado abaixo deste texto. Deixe-me sob esse controle. Eu sei que você pode fazer isso neste recurso, como nesta seção Eu sou. Oh, aqui. Você também pode adicionar sublinhado a esse estoque. Mas se você souber o atalho, será fácil. Você não precisa ir aqui e fazer isso. E há um outro atalho, como, digamos, que você queira aumentar essa fonte Nesse caso, você pode usar esse menu, mas usar atalhos. Você pode usar a tecla de controle e usar o botão maior e o botão menor do que no teclado. Está ao lado da marca de anulação ao lado da marca de anulação, e você pode segurar a tecla de controle Ótimo um pteror e menos de um botão para menos do que isso Portanto, esses são alguns recursos básicos que estamos usando para tornar nossa tarefa fácil e eficiente. Então, deixe-me deletar este e vamos criar nossa interface de usuário. Então, deixe-me deletar isso. Atualmente, temos e quero criar nossa página de introdução Ok, então, atualmente, vou escolher primeiro. Essa será nossa cor primária. Então, vou escolher uma cor primária. Então, neste caso, será esse, e esse será nosso logotipo ou corte por clique. Vou colocá-lo no centro e farei uma rodada, não uma volta no círculo. L e deixe Q Curtir isso ou deixe-me adicioná-lo na grade para que eu saiba se é perfeito ou não. Ok, assim. Ele se encaixa na grade e pode estar centralizado, deixe-me enviá-lo de volta. M e nosso cartão, e deixe-me trocá-lo por porque essa é nossa cor secundária. Ok, cor secundária. Ok, então nossa página foi projetada para que a frase seja totalmente projetada. Então, só precisamos adicionar texto, então vamos para o texto. E qual é o nome dele? Clique no carrinho, deixe-me torná-lo grande. Então eu estava pensando que oito seria perfeito. Assim. Ok, então esse é o nosso design, mas eu sei que isso é um pouco descendente, então o que podemos fazer é selecioná-lo Deixe-me movê-lo para cima. Agora, parece ótimo. Vamos agrupar este ou podemos enquadrar isso, deixe-me enquadrá-lo. Então, onde está, e eu posso nomear essa baixa. Ok, então esta é a nossa primeira página, e eu estou usando uma fonte. Mono em linha reta. OK. Não consigo prepará-la, mas essa é a fonte e, atualmente, o bot extra e o tamanho 40 Então, esse será o nosso tropag se você quiser usar uma forma diferente, eu sou totalmente igual a ela porque será igual, então use uma forma diferente, um logotipo diferente ou uma cor diferente Ok, então agora deixe-me concluir este vídeo. Portanto, lembre-se de que esses são os recursos que eu uso com frequência, mas não hesito em explorar todas as opções disponíveis. O objetivo do design é encontrar o equilíbrio certo entre funcionalidade e criatividade Sinta-se à vontade para experimentar e descobrir o que funciona melhor para você. Então, estádio para mais design interno no próximo vídeo. 46. Como adicionar fontes no Figma e Como adicionar fontes ausentes no Figma: Bem-vindo às palavras do vídeo anterior, esqueci uma coisa. exemplo, eu já disse, veremos como podemos adicionar esse entalhe em nosso design Mas eu esqueci de te mostrar. Mas quando eu estava regravando esse vídeo, fiquei sabendo de um problema, que é que eu não tenho as fontes no meu sistema. Neste vídeo, veremos como encontrar uma fonte ausente ou como corrigi-la. Então, primeiro de tudo, eu tenho essa fonte como SP display, eu tenho essa fonte no meu sistema. Então, eu não tenho nenhum erro com este. Mas, como você pode ver, eu tenho o SP display pro, mas atualmente esse design exige itálico gular, mas eu só tenho tamanho médio ou parafuso Então, se eu escolher o Bolt, ele funcionará. E, para isso, preciso baixar uma fonte. Então, entrei na Internet e conheci um site chamado Pixel Berg, que tinha uma família de formulários específica chamada SEP. Ele pertence à Apple. A Apple usa muito esse formulário. Se você tem um iPhone, talvez tenha visto este. Então eu baixei este e deixe-me mostrar a você e meu gerenciador de arquivos. Ok, então esta é a família de formulários, e eu tenho que baixar isso Oh, desculpe, eu tenho que instalar isso um por um. Basta clicar duas vezes nele e ele será instalado sozinho. Então, se eu instalar todos eles, instalei alguns deles, mas para que isso funcione, eu tenho que reiniciar esse software. Então, deixe-me reiniciar nosso Figma. Porque quando você instala algo como o Fs, você precisa reiniciar o software porque esse programa, bem conhecido, você tem esse software. Desculpe, você tem isso falso. Então, como você pode ver anteriormente, isso foi um erro, mas agora nosso ft está instalado. Portanto, não está nos dando um erro, mas atualmente não é normal, e temos tudo isso normal, então temos que instalar um normal. Mas digamos que você não queira baixar nenhuma fonte. Você só quer ter uma fonte nesse lugar. Então, nesse caso, o que você pode fazer é ir para, tipo, digamos, Oh, aqui. E você pode escolher qualquer outra fonte como a que está presente na sua foto. Então, nesse caso, vamos escolher Prata. E isso é Prata e substitua a fonte. Então, ele está substituído agora. Não sei se foi substituído , mas foi substituído. Então, deixe-me fazer isso de novo. OK. Deixe-me entrar. OK. Atualmente, você pode ver que isso está nos causando um erro, mas vamos transformá-lo em outra coisa. Não está me dando erro. Lembre-se de uma coisa ao copiar esta, atualmente, tão profunda. Ok, essa parte. Mudou por aqui. Deixe-me mudar, escolher outra coisa. Ok, então escolha este. Então eu ia dizer isso. E se eu copiar isso e usar no meu projeto, deixe-me fazer isso primeiro, copiar e, para que você possa ver, temos erros. Então, não queremos isso. Então, para isso, temos que instalar a fonte ou substituí-la por outra. Ok, agora vamos ao nosso design e adicionar esse não ao nosso design. Mas eu sei que isso vai curar meu erro. Mas vou substituí-lo por outra coisa. Ok, então adicionamos aqui. Ok, cabe agora. Mas, como você pode ver, temos o erro em nosso design. Então, vou substituí-la pela fonte S como tela profissional, que instalei no meu sistema. Então, substitua a fonte. Porque, como você pode ver, ele não faz nenhuma alteração. Parece exatamente o mesmo. Deixe-me fazer o mesmo com 32. OK. Vamos também fazer o mesmo com esta fonte S pro display replace. Ok, então não temos nenhum erro no momento. Como você pode ver, corte no modo itálico. Não sei como, mas estou em itálico. Acho que podemos mudar isso, mas deixe assim por enquanto. Então é assim que você substitui suas fontes. Lembre-se, tecla de flexibilidade e você pode decidir se deseja manter a fonte original baixá-la ou substituí-la por outra. Isso armazena o design. E é isso, meus amigos. Agora você está equipado com a fonte que falta no manuseio como R. Se você ferir este vídeo, por favor me avise e até o próximo 47. Projeto do curso 07 Estilo de texto e texto: É que, hoje, temos um projeto empolgante planejado para você na Figma Portanto, siga esta etapa simples para mostrar suas habilidades de criatividade e design O primeiro passo é o têxtil. Em primeiro lugar, vamos estabelecer a base do design par com o têxtil Escolha duas forças que ressoem com o tema do seu projeto. Agora, crie um estilo para o título e o corpo do texto no Figma. A consistência é fundamental aqui. Portanto, certifique-se de que sua escolha esteja alinhada com toda a estética que você deseja. Agora, a segunda é a página de introdução. Então, deixe-me mostrar para você no Figma. Ok, então você tem que criar um sistema de design como este e depois disso, nossa página de introdução como esta Então esta é minha página de introdução. Agora é hora de mergulhar no design do processo criativo ou página de introdução usando o tecido que você acabou de aprender e configurar Sinta-se à vontade para, a menos que sua criatividade aqui e eles experimentem cores, fontes e layouts diferentes. Até encontrar o design que fala com você. Não se esqueça de adicionar fonte e logotipo que complementem sua visão geral E quando estiver satisfeito com sua página de introdução, vamos capturar esse momento Faça uma captura de tela da sua obra-prima, garantindo que ela mostre o Esse instantâneo será uma representação visual do seu design, então faça valer a pena Portanto, você precisa fazer uma captura de tela do seu sistema têxtil e da sua página E eu sei que você está pronto para compartilhar sua criação com o mundo. Então vá para a projeção e envie sua captura de tela para lá Então esta é sua chance de brilhar. Então, reserve um momento, aprecie seu trabalho árduo e criatividade. E você também pode compartilhá-lo em suas mídias sociais como histórias do Instagram ou Twitter, bem como no Linkin, e você também pode me marcar lá porque eu quero ver essas criações épicas Aí está um projeto Figma rápido e divertido. Lembre-se de que a chave para um ótimo design é a consistência e a limpeza Organize a vida do texto de forma meticulosa e peça fundamental, elemento de design CZ, Wood luck and happy 48. Noções básicas da ferramenta Figma Pen e redes vetoriais: Estudantes da Amazon, bem-vindos de volta a mais um episódio. Hoje estamos mergulhando no universo do FBMA para desvendar mistérios da poderosa ferramenta de caneta e da ferramenta de lápis Fique por aqui e eu mostrarei como fixar ferramentas e lápis como um mago. Então você está pronto? Então, vamos começar. Primeiro, vamos entender o que é ferramenta de lápis e ferramenta de alfinete. O primeiro é o controle preciso. É inativo para criar formas precisas com linha reta e curva suave, incluindo formas de conflito, como logotipos, ícones e ilustrações Ele também oferece flexibilidade. A ferramenta Pin é muito flexível. Ele oferece controles Amos, como pontos de borda, adição de alças e manipulação de caminhos para obter detalhes Edição, e não é destrutiva. As alterações feitas em um ponto do caminho não afetam toda a forma, facilitando o ajuste. Agora, vamos entrar na ferramenta de lápis. É rápido e gratuito. Perfeito para esboçar esboços em D com a mesma rapidez, especialmente para formas de organistas É fácil de usar para iniciantes devido ao seu desenho intuitivo à mão livre , semelhante ao lápis tradicional Sei que o resultado é um formato menos preciso em comparação com a ferramenta caneta, mas pode ser bom para capturar a ideia inicial Então, agora vamos usar a ferramenta de caneta e criar algumas dessas estruturas estranhas Então, deixe-me deletar isso primeiro e remover essa minha tela porque eu não financiei Ok. Então, para isso, podemos usar essa ferramenta de pinos, e Short é apenas P. P para criar uma ferramenta para obter uma ferramenta de pinos. Queremos criar algo com Pinto. Clique na tela assim e criamos algo a partir de agora usando pintol E, como você pode ver, obtemos esses pontos e podemos editá-los Mas há um problema. Como se eu estivesse movendo meu cursor na tela e houvesse uma corda presa a ela. Se eu servisse em outro lugar, isso criaria um nó. Então, eu não quero que, se eu quiser me livrar dessa string de nós, eu possa simplesmente pressionar escape no meu teclado e ela desaparecerá Agora, deixe-me mostrar uma coisa, como se eu estivesse atualmente no PNR, e se eu mover meu cursor assim, como você pode ver, há um botão de adição sob a ferramenta da caneta E se eu clicar em qualquer lugar, isso adiciona um ponto em nosso nó. Posso usar esse ponto para adicionar uma curva ou fazer alguma edição. Eu gostaria que você fizesse isso, mas antes de fazermos isso, vamos criar algumas mudanças Ok, então digamos que eu queira criar um retângulo. Então, nesse caso, eu posso usar assim. E desculpe, não é um retângulo. Tem que ser quatro. Ok, três e quatro. Agora somos retangulares. Mas vamos supor que você queira criar um retângulo preciso. Então, nesse caso, você pode segurar a tecla shift e criar o ponto seis. E isso criará um retângulo preciso perfeito para você assim. E tem uma coisa. Você também pode adicionar preenchimento a ele, como digamos que, se eu adicionar preenchimento, como você pode ver, posso mudar a cor. Eu posso fazer com que seja gradiente ou algo parecido. Também posso adicionar imagem e tudo mais. Então, é fácil. Eu sei que não faz parte de usar o pintol para criar formas Mas vamos criar uma área de ícones complexa, se você criar algum elemento complexo Então, nesse caso, você tem um pintol. Mas raramente vi alguém usando pentel no design. Agora, vamos passar para a próxima coisa. Ou seja, digamos que você tenha essas duas linhas assim. E sim, podemos adicionar curvas a ele. Então, deixe-me mostrar como adicionar curvas. Eu posso simplesmente adicioná-lo assim. Deixe-me adicioná-lo aqui também. Ok. Agora, há uma coisa que eu quero te mostrar. Digamos que você queira unir este ponto neste ponto ou este ponto neste ponto. Então, neste caso, o que você pode fazer é usar a ferramenta de lápis, mas há um atalho Você pode simplesmente selecionar este ponto e usar o controle J. E ele se juntará. Os dois. E é fácil, assim. Como você pode ver, ele também preencheu a cor. E há outra coisa que você pode fazer. Eu sei que existem muitos peixes com alfinetes, mas isso é realmente uma ferramenta em sua palavra. Deixe-me juntar isso a esses pontos. Agora, os dois estão separados, e se eu usar essa ferramenta, balde de canetas, se eu clicar nela, sei que a cor desapareceu, mas podemos adicionar várias cores nela Então, basta selecioná-lo. E se eu escolher algo como rosa. Como você pode ver, podemos adicionar cores em nosso campo e diferenciá-las em uma única forma Ok, agora vamos pular para a curva. Há alguns minutos, adicionamos alguns pontos nesse nó. Então, agora eu selecionei essa curva e agora posso simplesmente torná-la E ele ventila, faz curvas suaves como essa. Então, como você pode ver, criamos algumas ondas aqui e, na seção de design, temos algumas opções, ângulo do espelho, fusão e não fusão do milagre e ângulo do espelho Principalmente, está no ângulo e no comprimento do espelho. E deixe-me mostrar como funciona. Então eu tenho esse, e atualmente estamos em bentol. Se eu movê-lo assim, como você pode ver, temos duas alças aqui. Então, se eu mover alguma coisa para cá, do outro lado, a mesma coisa vai acontecer, como também vai acontecer. Lua. Está apenas replicando a segunda alça do espelho Ok, então atualmente é o ângulo e o comprimento do espelho, e se eu escolher o ângulo do espelho, e se eu clicar neste ponto. Como você pode ver, eu tenho essa alça. Agora eu posso ajustar apenas um ângulo. Não há uma segunda alça e ela não está se replicando. Se eu quiser ajustar um ângulo, posso fazer isso assim. Ok, agora, vamos para a próxima coisa. Digamos que você queira excluir algo da mesma forma que deseja excluir esse nó. Ok, eu escolho o ângulo do espelho. Então, deixe-me escolher sem espelhamento. Se eu escolher esse, não sei o que é. Ok. Atualmente estou em Como, então é por isso que estou selecionando e transformando-a em uma enseada Deixe-me selecionar a ferramenta de seleção, e se eu selecionar os pontos normais como este, e se eu excluir isso, como você pode ver, o campo go será excluído, assim como os dois lados também serão excluídos. Mas digamos que eu queira excluir apenas esse ponto, mas o preenchimento deve estar intacto Então, nesse caso, eu posso usar shift, então eu posso selecionar meu ponto assim, que eu tenho que excluir, e eu vou segurar shift e deletar. Então, como você pode ver, o objeto está intacto e o preenchimento também está intacto Então, esse tipo de coisa estranha que podemos fazer com uma ferramenta de caneta. E também há uma ferramenta de lápis. Eu acho que não. Quem é esse? Mas quando eu estava no jardim de infância, costumávamos desenhar desenhos Costumávamos desenhar montanhas como essa, três montanhas, e costumávamos colocar um pouco de sol aqui assim. Ok, eu sei que meu desenho é muito estranho. Por que razão costumávamos desenhar sim assim. Ok. Está chorando. E tem que haver uma casa como essa. Acho que doeu. Ok, é muito pequeno. E eu não sei, por uma razão existe um rio. Vamos cruzar. Então, temos que criar designs como esse. Então é assim que você pode usar o lápis. Ok, é assim que você pode usar a ferramenta lápis e a ferramenta caneta. Mas você pode estar pensando quando devemos usar a ferramenta caneta ou a ferramenta lápis. Primeira coisa, primeiro, vamos usar pintol. Digamos que você queira algumas formas nítidas e precisas com linhas retas e curvas suaves, use a ferramenta de pinos E você também. Vamos criar formas complexas, como logotipos, ícones ou ilustração, ferramenta de alfinetes. Além disso, você deseja um controle preciso de pontos e curvas individuais usando a ferramenta de pinos Agora vamos falar sobre a ferramenta de lápis. Se você quiser esboçar uma ideia ou criador de contorno, use a ferramenta de lápis, se quiser desenhar algo orgânico ou um esboço de sabor, use Se você é iniciante e quer apenas ter um telefone como esse, quer criar essa imagem, use a ferramenta de lápis. Então, meu amigo, esse é o invólucro desse vídeo. Se você achou isso cheio, por favor me avise. Até a hora do almoço, Happe projetando. E lembre-se de que você escolhe um pixel, então cuide de você. 49. Por que os ícones da Apple são diferentes (suavização de canto): Chefes e esquadrão, sentimos que as coisas estão muito nítidas, como os ícones do seu telefone. Está esfaqueando seus olhos. E você, eu olho, ele bateu em uma parede. Bem, pegue um cobertor pixelado e café, porque estamos prestes a mergulhar no mundo alisando os cantos Arma secreta Fipma para fazer curvas. Lembro-me de ser usuário de Android por décadas, os ícones eram planos, quadrados, às vezes com bordas arredondadas, mas na maioria das vezes eram apenas uma caixa e pronto, meu amigo e seu novíssimo iPhone 15 P max. Eu conheço o Lucky Duck e estou me divertindo com os aplicativos. De repente, algo me atinge como um mentor pixelado. Os ícones são arredondados e quadrados ao mesmo tempo. E meu cérebro de designer de UX está ativo? Que feitiçaria é essa? Depois do nosso recesso, quebrei o carvão. Esse tx mágico é chamado de suavização de cantos Figma. Isso leva você a pegar aqueles cantos de hash e transformá-los em travesseiros macios Pense nisso como manter sua interface de usuário de dentro para fora. Ok, agora, vamos aprender sobre como criar bordas arredondadas. Então, antes de fazermos isso, há algo que esqueci de contar no último vídeo Você se lembra que criamos essa obra-prima como Picasso? Então, se você quer dominar a ferramenta de caneta, se você leva a sério o YuxFiel ou o design gráfico , existe um site, jogo da Bizer, algo parecido Ok, não consigo pronunciar, mas se você souber, me avise. Portanto, neste site, você pode praticar sua ferramenta de caneta dessa forma. Você pode praticar sua ferramenta de caneta dessa forma e se tornar mestre. Então é assim que você pode praticar sua ferramenta de caneta. Então, isso é apenas uma rápida recapitulação ou dica sobre esse vídeo. Agora, vamos pular para a nossa esquina suavizando. Ok, então deixe-me relatar essa obra-prima. Eu sei que isso parece muito bom, mas temos que relacionar esse, especialmente este. Ok, vamos desenhar alguns retângulos para nossos ícones e deixe-me desenhar um ao outro Ok. Deixe-me copiar isso. Então, saberemos a diferença. Digamos que este seja o nosso ícone, e deixe-me dar uma borda arredondada de até dez. E, como você pode ver , é arredondado. A maioria dos usuários sabe que é assim que o ícone aparece no Android. Mas agora, se eu der esse arredondamento, dez, e se eu for para esses cantos independentes, haverá mais opções de canto, suavize E se eu acompanhar esses 200%, como você pode ver, é um pouco diferente Sei que atualmente não estamos diferenciando, mas se eu ampliar um pouco, pois há uma diferença, esse canto é muito nítido e tem uma espécie de efeito de bolha ou efeito redondo Então, deixe-me fazer isso de novo, se eu for para um canto liso, e se eu fizer isso, observe os cantos. Como você pode ver, está se tornando redondo. Espero que você consiga ver isso. Deixe-me resumir novamente. Atualmente 100 zero cem zero cem. Ok, então é assim que Cormoing funciona, e essa é a curva normal Eu sei que parece muito bonito, mas se eu aumentar o 15 , ficará mais legal. Se eu fizer isso 15. Em comparação com isso, isso parece melhor. A suavização de cantos é o super arco desejado. Isso faz com que você se sinta mais acessível, amigável e moderno Imagine um botão que convida você a clicar. Em vez de um que grite, não toque em mim ou em um site com pequena transição que pareça uma cinta suave, não um furacão Então vá em frente e experimente, quebre as regras e veja que tipo de mágica de suavização de cantos você pode criar Lembre-se de que design tem tudo a ver com fazer com que as coisas se sintam bem e, com a suavização de cantos, serei a pessoa mais calorosa e confusa da Internet. Se você quiser saber mais sobre suavização de cantos, Figma é este artigo do blog, você pode acessar este site, provavelmente irei criar um link para que você possa ler todos os artigos, por que é E há uma fórmula. Existe uma fórmula matemática. Como quando eu estava na faculdade, matemática era uma das minhas disciplinas favoritas. E como se eu conhecesse esses derivados e tudo mais. Eu tenho que resolvê-los imediatamente, mas agora eu olho para eles, eles parecem muito estranhos. Se você quiser saber sobre esse efeito de canto, efeito de suavização de cantos, acesse este artigo e leia Então, isso é tudo sobre suavização de cantos no Figma. Então isso é um porto e nos vemos na próxima. 50. Operações booleanas Figma (Union,Subtract,Intersect,Exclude): Neste tutorial, estamos mergulhando nas operações do Boleon na Figma Embora o termo possa parecer um pouco perfeito para vender, essas operações são formas essenciais de combinar ou manipular Pense neles como uma caixa de ferramentas de design, permitindo que você crie ícones de interação ou componentes de interface do usuário para ilustrar esses ícones de reformulação dessa forma usando operações de dessa forma Há várias operações booleanas. Se eu selecionar esses dois, como você pode ver no menu da barra superior, obteremos essa opção. Mas se eu selecionar um, não teremos essa opção. Para que a operação booleana funcione, precisamos ter pelo menos duas formas Então, atualmente eu selecionei essas duas formas e, como você pode ver, temos essa operação. Post é união. Depois disso, subtraímos depois disso, cruzamos e excluímos. Então, vamos com a união. Então, digamos que eu tenha duas formas, como um retângulo. Deixe-me deletar esse primeiro. Ok, então deixe-me pegar algumas formas. Digamos que temos um retângulo, bem como um redondo, lábios como este, e eu quero mesclá-los. Então, neste caso, o sindicato vai funcionar. Então, deixe-me dizer o que é união. Na união de spaldum, a operação combina a forma em uma única unidade Se você quiser saber mais sobre unidades, aqui está. Union combina a forma selecionada em um grupo de boolin. Se os objetos se sobrepõem, o caminho externo da nova forma consiste no caminho comparans ops sublis menos Então, se eu unir isso, como você pode ver, essa forma é união cortada. Qualquer segmento que se sobreponha, o traçado seria aplicado a esse caminho externo, ignorando qualquer segmento do caminho que se sobreponha um ao Então, nesse caso, é assim que o sindicato funciona. Se você saciar suas formas e clicar neste botão, elas entrarão automaticamente em mais união, e essa será a nossa união Em linguagem simples em união, a imagem final é criada combinando duas imagens individuais como essa ou duas formas. Agora vamos ver a subtração. Então, deixe-me pegar duas formas que serão elipse. OK. Deixe-me quebrá-lo desta vez. Agora, vamos falar sobre subtrair. Essa operação subtrai a forma na parte superior da que está abaixo Atualmente, este está no topo, eu acho. Ok, este está no topo, e se eu selecionar os dois, e se eu selecionar subtrair Como você pode ver, o item superior foi subtraído. Subtrair é a união superior oposta, subtrair remove a área da forma ou configura formas a partir da forma base Somente a camada de formato inferior é sólida e a gota restante é subtraída dela É assim que a subtração funciona. Agora vamos seguir em frente para a interseção. Então, para isso, vamos pegar outra forma, vamos pegar a elipse, bem como deixe-me pegar Ok, assim. O que o intersect faz é reter a área sobreposição entre as formas Então, deixe-me pegar isso e cruzar os dois, e vamos escolher Isso é muito legal, moderno, parece uma espécie de diamante. Então, os cruzamentos criam um grupo de sangramento. Essas formas consistem apenas na parte sobreposta de seus Ok, então é assim que o intersect funciona. Agora, vamos começar a excluir. Então, deixe-me falar, vamos pegar uma estrela. Ok, então temos esses dois e vamos adicionar o extrato. Então eu coloco isso no centro. Vamos serrar os dois. Então, o que Exclude faz é isso. Essa operação cria buracos onde as formas se sobrepõem. Excluir é o oposto de cruzar. Excluir mostra somente as áreas de sua subcamada que não se sobrepõem Então, se eu serrar os dois e se eu excluir, como você pode ver, isso cria um orifício dentro do círculo E nós temos esse ícone muito legal. Ok, isso parece o logotipo do Capitão América. Ao combinar essa operação, criamos um ícone complexo com componentes individuais. Cada editável restante. Você sempre pode mergulhar nos detalhes e modificar partes específicas de cada design. Então, neste caso, se eu quiser mover isso, eu posso simplesmente fazer assim. Eu posso fazer Hop Moon assim ou movê-lo e editá-lo a qualquer momento Ok, então aqui está a única tarefa para você. Tipo, eu quero que você crie essa e essa estrela Have, bem como esta, esse símbolo. Pause o vídeo e faça isso. E eu vou te mostrar como fazer isso. Mas primeiro, pause o vídeo e faça isso. Ok, espero que você tenha feito isso, então deixe-me criar esse efeito usando esses círculos. Vamos precisar de seis círculos neste caso. Ok, então eu coloquei o círculo assim e deixe-me pegar outro círculo que será complementado por este no centro. Ok, então deixe-me selecionar todos eles. E eu vou escolher Excluir. Como você pode ver, criei essa forma incrível, não sei como se chama, mas parece muito louca. Aqui está outra coisa, digamos que você queira ver o contorno da estrutura; nesse caso, temos várias formas, quais criamos uma operação simples E digamos que você queira ver o esboço. Nesse caso, você pode usar shift para ver o contorno. Ele mostrará qual componente tem, quantas formas foram usadas nele ao projetar esses ícones dessa forma. Ao criar isso, temos seis sete círculos. Nesse caso, temos estrela e também esse retângulo, e neste temos três círculos Forts elipse, isso não é um círculo perfeito. Depois disso, temos dois círculos dentro dele. O mesmo com este, o mesmo com este. É assim que podemos ver o esboço. Vamos sair dessa. Você pode pressionar em forma para sair disso. Espero que você tenha criado essa metade da forma. É muito simples. Basta ir às formas. Temos estrelas aqui. Desenhe uma estrela e pegue um retângulo Coloque-o e venda os dois e use o intersect. É assim que você cria meias estrelas no Pigma. Esse é muito simples. Eu sei que muitas pessoas devem ter feito isso, mas deixe-me te mostrar. Primeiro, pegamos nossos lábios. Deixe-me desenhar um circo. circo vai até aqui, e um vai ser pequeno assim Deixe-me colocá-lo no centro e apenas impedir. Como você pode ver, criamos esse símbolo atraente. Espero que você seja capaz de realizar essa tarefa simples. Portanto, lembre-se de que as operações de esferas são um recurso poderoso, para ilustrar o localizador de pus ou o criador de formas Eles oferecem flexibilidade, criando um design integrado, mantendo a irritabilidade Portanto, seja criativo e eu vou ver você no próximo vídeo. 51. Duo de energia da Figma quando usar a Union e quando nivelar: Zener, neste botão, estamos explorando qual é a diferença entre união e Então, se eu selecionar isso e entrar no menu de operação do Bulin Então, como você pode ver, temos essa opção, a seleção achatada. Então, o que é isso? E o que é seleção de união e seleção achatada se diferenciará neste vídeo Então, sabemos o que é união. A união é uma operação não destrutiva que combina formas ao mesmo tempo que atende à irritabilidade individual Por exemplo, como você pode ver, criamos essa forma Se eu clicar duas vezes nela, como você pode ver, podemos editar essa forma. Então, usamos a união para mesclar a forma variável no design So. Isso é excelente para manter nosso design flexível e editável Mas deixe-me falar sobre o achatamento. operação Flatten Distruct conduz vários navios em uma Então criamos, deixe-me criar uma coisa aqui. Então você notará a diferença. Deixe-me fazer assim. Se eu selecionar os dois e escolher a seção de interseção, como você pode ver, obtemos essa E se eu entrar no modo de contorno, como você pode ver, existem duas formas Isso é visível no modo de contorno. Mas se eu selecionar os dois e se eu escolher a seleção plana Como você pode dizer, não há nada. Nós só temos essa forma. Então essa é a diferença entre união e lisonjeira. Portanto, é útil para simplificar design de conflitos ou quando você deseja exportar um design como uma única unidade Então, no sindicato, pudemos exportar nosso design, mas foi um pouco caótico Também podemos ver a forma de outras pessoas, mas com um achatamento, podemos ver apenas uma única unidade Digamos que, se um design contesta detalhes interativos e você deseja simplificá-lo para explodir, achatar é sempre Isso é sobre uma união e um achatamento. É assim que usamos flatten. Então, deixe-me falar sobre quando devemos usar union e onde devemos usar flatten Use a união quando quiser combinar formas mantendo a capacidade de editá-las individualmente. Isso é especialmente útil na criação de designs complexos, onde cada elemento precisa ser ajustado e usado como este, quando você quiser que eu molde em uma única unidade, facilitando a exploração na criação de designs complexos, onde cada elemento precisa ser ajustado e usado como este, quando você quiser que eu molde em uma única unidade, facilitando a exploração ou simplificação do design. Eu sou particularmente útil quando você não precisa editar componentes individuais separadamente. Então, isso é tudo sobre N L flatten. Portanto, entender a diferença entre N N flatten oferece maior controle sobre seu fluxo de trabalho de design, independentemente de você preferir a flexibilidade não destrutiva ou a simplicidade do design nivelado, de específicos Então, como eu sempre sou criativo, vou ver vocês no próximo vídeo. 52. Página inicial do projeto 8 desin e menu do burgur: Para estudantes é hora do projeto. Lembre-se, nós éramos uma base pixelizada. Como diabos já criamos uma página inicial decente. Bem, adivinhe o que temos, amor. Agora é hora de testar nossa habilidade de figma e criar algo realmente incrível: sua própria página inicial e algo realmente incrível: sua própria página inicial este menu de hambúrgueres Ok, então você precisa criar esta página inicial. Você aprendeu sobre estilo de cores, têxteis, também projetou o sistema de cores d, bem como o sistema de texto Use esse conhecimento e crie esta página inicial. E criei opções como se você quiser usar cores diferentes, use isso. Se você quiser usar um pote diferente, use-o. Também forneci todos os ícones no arquivo do projeto, para que você possa simplesmente examiná-los e usá-los em seu design. Se você quiser usar outros ícones ou plug-ins, use-os também, e a mesma coisa com um menu de hambúrguer Isso tem uma instrução que você precisa seguir para criar um projeto. Então, siga estas instruções e crie esta página inicial e menu de hambúrguer Anteriormente, aprendemos sobre operações de bulon e também sobre ícones achatados Então você tem que criar essas formas geométricas, ícones realmente apicais, tirar uma pequena captura de tela e enviar para projeção Acho que você já sabe como fazer isso. Então, estudantes, vocês entenderam isso, suas habilidades de figma, misture-as com sua coragem criativa e deixem sua obra-prima de design ganhar vida Portanto, não se esqueça de capturar a página inicial, menu de hambúrgueres e o touro criados para envio Lembre-se de que não há erros de design, apenas um feliz acidente. Então vá em frente, explore, experimente e mostre ao mundo sua magia Figma E se você quiser compartilhar esse projeto em suas redes sociais, você também pode fazer isso, e você pode me marcar lá. Portanto, sinta-se à vontade para adaptá-lo ainda mais e adicionar seu toque pessoal. Então, boa sorte com seu projeto Figma oito. 53. Como usar a seleção inteligente e a organização no Figma: Loco extras, acreditando nisso, estamos mergulhando no poderoso recurso de seleção amarrada de Mar na Figma, então prepare-se para agilizar seu processo de design e aumentar sua eficiência com essas Então, também vamos criar nossa primeira página inicial. Então você pode estar pensando: o que está amarrado? Ted up é sua ferramenta preferida quando você deseja organizar e organizar perfeitamente os elementos selecionados Ok, então temos nossa página inicial vazia. Agora, queremos criar algumas categorias. Então, deixe-me desenhar alguns círculos. E eu estava pensando em A seis porque enquanto eu estava testando, ele se encaixava perfeitamente nisso, o que eu digo, colunas Ok, então você já sabe como duplicar seu item. Segure e arraste. Existe um método. Você também pode pressionar o controle D para duplicá-lo, mas ele sai do topo assim Mas há um outro método. Então, se eu arrastar isso segurando Ed, e eu organizá-lo assim, e se eu pressionar o controle D. Ele copiará o baste na próxima coluna Portanto, é muito útil. Esses já são círculos alinhados. Então, não temos essa opção, mas digamos que se os círculos são assim, e se eu for todos eles, como você pode ver, temos esse botão amarrado. Então, se eu clicar aqui, nosso item ficará amarrado, mas não é isso que queríamos, então podemos simplesmente alinhar com a parte inferior e também horizontalmente usando essa ferramenta. Ok. Como você pode ver, alinhamos nossos círculos. Portanto, há várias opções nisso. Então, como você pode ver, há pontos rosa no centro. Então, eles são muito úteis. Digamos que você queira trocar este item por isso ou este item por isso Então, basta clicar nele e segurar o botão direito do mouse e arrastá-lo assim. E o item foi trocado. Deixe-me copiar tudo assim. E se eu selecionar todos eles, para que você possa ver, também podemos adicionar os círculos verticalmente assim Portanto, essa é a seleção inteligente. Ok, então vamos projetar nosso campo em casa. Ok, então essa será uma seção de categorias. Agora, vamos adicionar isso, não se este copiar e postar. Eu sei que há uma forma de tecido. Então, deixe-me corrigir isso. Ok, então isso vai ser uma barra de busca. Envie-o de volta. E deixe-me desenhar outro retângulo, para que ele dedique um subbanner Então, ele será trocado, haverá cinco e seis banners e ele será Ou podemos criar um banner simples como esse. Ele mostrará alguns produtos como um produto específico, como iPhone 15 max ou laptop ou monitor, algo eletrônico. E haverá alguns outros itens, como vamos criar subitens, como digamos que a oferta do smartphone esteja em andamento Ok, então criamos aqui. Então, digamos que esta seção é para roupas de mercearia e vamos criar outra Nesta seção, haverá os itens mais vendidos que vendemos neste aplicativo. Por enquanto, estamos apenas criando algumas noções básicas, mas espero que você tenha visto que a página da Amazon, as páginas do telefone e a página inicial nível de rolagem totalmente infinito Então, podemos fazer isso, mas levará muito tempo. Levará décadas para me projetar. Então, atualmente, estamos apenas aprendendo. Então, vou criar alguns elementos básicos, como banners, alguns produtos, bem como alguns produtos mais vendidos, bem como algumas categorias aqui. Então, agora, menos tc ou podemos desenhar uma barra de pesquisa ou adicionar nossos itens Então, vamos com nossa barra de pesquisa. Então, fornecerei todos os ícones no arquivo de exercícios. Então, basta rastrear esses elementos, rastrear esses ícones aqui e os adicionaremos em nossa página inicial. Então, deixe-me desenhar um retângulo para nossa barra de pesquisa. Então, vai estar aqui. Ou podemos tornar isso maior. Portanto, nossa barra de pesquisa ficará mais parecida com uma aparência melhor. Ok, deixe-me mudar a cor por enquanto. Deixe-me corrigir isso. Vamos centralizar. Ok. Isso parece ótimo. Vamos aumentar as bordas arredondadas até, eu quero arredondar totalmente. Então eu acho que, por favor, adivinhe. Ok, então 50. Podemos fazer até cerca de 100 g. Ok. Está acima de 100. Então vá com 100. Ok, assim. Agora, vamos adicionar ícones. Atualmente, eu estava pensando que aqui estaria a pesquisa e aqui estará o microfone. Então, temos busca e mouses, então está aqui. Arraste-o aqui. Ok, então eu terminei com a barra de pesquisa. Então, há uma coisa que podemos acrescentar aqui, digamos que estamos vendendo alguns produtos e queremos dizer que podemos pesquisar moda. Se eu cometer um erro de ortografia, por favor, me perdoe. Eu sou um monte de erros ortográficos. Ok. Deixe-me manter isso em ordem. E vamos dar uma cor bem neutra, como essa. Tem que ser visível, pouco visível. Tem que ter aquele sotaque de uma cor de marca poderosa, como cinza, como esta Ok. Agora vamos adicionar Bergm e também o botão Card do cartão Ok, então projetamos algumas coisas básicas. Agora, vamos criar uma barra de navegação. A barra de navegação estará aqui. Vamos desenhar um retângulo para isso. Mas eu estava pensando que, recentemente, estava acessando alguns aplicativos e vi um bar muito legal. Bem, fazer isso por enquanto. E foi assim. Eu tinha uma cornija redonda para torná-la redonda e tinha todos os elementos Então, vou adicionar todos os ícones. Assim. Se eu desligar a visibilidade da coluna, como você pode ver, isso parece ótimo, mas sem cor, é muito preocupante então vamos adicionar algumas cores Devemos criar um estilo de cor. Então, vai ser uma primária, isso não parece ótimo. Vamos adicionar algumas cores a esta. E para essa barra de irrigação, vamos adicionar a mais escura E isso vai ser, eu acho, preto. Ok, deixe-me ficar com isso ou podemos torná-lo preto também. Ok, então esta é uma página inicial. Eu sei que podemos adicionar um monte de imagens e tudo mais. Mas parte desse vídeo foi para ensinar você sobre seleção inteligente e o processo , bem como sobre amarração. ícone de pesquisa e o botão do microfone são totalmente invisíveis, então deixe-me mudar a cor. Ok. Deixe-me ir. Ok, agora está ótimo. Há várias coisas que você pode fazer nesse design, você pode adicionar um traçado a ele, como se eu adicionasse um traço, deixe-me dar uma olhada, e vamos mudar a cor para uma mais escura Ok. Ou podemos dar uma cor primária como essa. Não parece muito bom, mas podemos adicionar esse traço. Então, deixe-me adicionar outro traço. Deixe-me dar o branco. Acho que o branco ficará ótimo. Ok, isso parece ótimo. Também podemos adicionar preto. Também podemos adicionar traços a esse círculo. Também podemos adicionar bordas arredondadas dessa maneira, para que pareça mais moderna. E também podemos adicionar imagens. Acho que não cobri a parte da imagem. Então, na próxima seção, abordarei a parte da imagem. Então, adicionaremos imagens , bem como nossa página inicial. Sei que algumas pessoas sabem como adicionar imagens que você possa adicionar imagens diretamente . Então, isso é tudo sobre título e seleção inteligente. E também criamos nossa página inicial. Parece ótimo. Então, à medida que continuamos essa jornada de design, mantenha-se inspirado e continue criando so S no próximo vídeo. 54. Como colocar imagens no Figma: Designers de quadrinhos, neste campo, estamos mergulhando no mundo das imagens na Figma Vamos explorar várias maneiras de importar idades e brincar com imagens, incluindo algumas salas de luz básicas, como ajustes. Existem várias maneiras de adicionar imagens no Figma. Também há uma mudança de controle de atalho se você quiser importar imagens tA de arquivos locais E a opção está disponível nos retângulos. exemplo, digamos que eu queira importar essa imagem, então eu posso simplesmente clicar nela e abrir. Mas, como você pode ver, quando eu a importo, meu cursor está se transformando nessa pequena imagem Eu posso segurar a tecla Shift e arrastar a imagem como esta. Então essa é a primeira maneira. E se eu escolher outra forma, se eu escolher essa e abrir, se eu clicar nesse espaço vazio, como você pode ver, a imagem é muito grande. Ao importar a imagem, lembre-se de deslocar toda a tela e arrastá-la assim, para obter uma melhor perspectiva da imagem Portanto, há muitas coisas que podemos fazer com a imagem. A primeira é que você pode adicionar bordas arredondadas como essa. Você pode girar sua imagem desta forma e se eu clicar neste botão de imagem Então, como você pode ver, temos várias opções, como tom claro. Uh, eu sei que muitas pessoas usam mais luz no Photoshop. Recebemos esse pequeno ajuste. Eles não são tão avançados em comparação com o photoshop e o lightroom Eles são básicos. Você pode ajustá-lo assim. Você pode adicionar saturação de contraste, temperatura, realces de tonalidade Eu sei que você tem um design e uma necessidade. Também podemos cortá-lo de acordo com ele. No próximo carregamento, veremos como criar uma máscara usando essa tecnologia MS, OK Então essa é nossa primeira técnica. Também podemos ajustar a rotação a partir daqui. Você também pode ajustar ou adicionar nossas bordas arredondadas do tipo “O que eu digo”, como esta. Então, ao lado, você pode importar suas imagens de arquivos locais. Então, digamos que você queira importar essa imagem, basta arrastá-la assim e copiá-la aqui. Mas o problema com essa técnica é que você dirá em segundo lugar. Esse é o problema. O tamanho da imagem está muito grande e ativo, então precisamos redimensioná-la E deixe-me fazer isso porque não queremos esse agora. E há outra técnica. A terceira técnica , vem como máscara, mas não conta como máscara. Vou te ensinar as técnicas de máscara na próxima janela. Então, digamos que, se eu for preencher, atualmente está vazio, posso mudar a cor, mas se eu quiser mudar a imagem, posso simplesmente clicar nesse botão e, atualmente, ele está mudando para caixa de seleção ou caixa de perseguição, e eu posso simplesmente escolher a imagem em imagem aleatória. Eu posso simplesmente clicar aqui e abrir. Então, como podemos ver as imagens adicionadas aqui. Essa também é outra técnica. Digamos que você queira adicionar uma imagem como qualquer caixa específica como esta ou os círculos. Nesse caso, o que você pode fazer é colocar a imagem e selecionar qualquer imagem aberta e seus carros do mouse se transformarão nessa pequena imagem. E você pode escolher qualquer caixa. Nesse caso, eu quero colocar a imagem O, então eu posso simplesmente clicar nela e a imagem é colocada agora. Se eu ampliar, como você pode ver, as imagens aqui, então há muitos sites onde você pode baixar suas imagens de um dos meus favoritos, os pixels. Como você pode ver, eu uso essa imagem neste vídeo. E essas imagens são totalmente gratuitas. E se você quiser saber sobre licenças. Então, como você pode ver, a licença é muito simples. Portanto, não há necessidade de adicionar o nome do fotógrafo ou algo parecido. Você pode usar o gated, e eu também posso modificar Depois disso, temos o Pixabay. É também um dos melhores sites. E atualmente também está fornecendo vídeos stock, além de músicas, presentes com efeitos sonoros e tudo mais. Se você é um videógrafo ou designer gráfico, você pode usar isso p depois disso, temos É também um dos sites mais populares. E no Figma, também temos plug-ins. E no Figma, também temos plug-ins para esse site específico, como pixels e splash Então, vamos fazer essas coisas no próximo vídeo. Então, atualmente, estamos apenas aprendendo como adicionar imagens e diferentes tipos de imagem. E a última coisa que quero mostrar, digamos que queremos colocar uma imagem nesse quadro. Portanto, é muito simples, o mesmo processo de preencher a imagem, e ela é transformada em caixa de perseguição e escolha uma imagem. Você quer que escolhamos este, e ele será adicionado neste quadro. Se seu design exigir isso, faça isso. Não é essa boa prática. Ok, deixe-me fazer isso. Estes são alguns métodos para adicionar uma imagem em um design. Então, experimente importar imagens usando vários métodos. Era como um ajuste de photoshop com a imagem para uma imagem básica como esta Você pode ajustar este contador de exposição Suro enter presente em destaque e sombra Você pode aplicar a imagem diretamente às formas ou molduras dessa forma, economizando tempo. Você não precisa arrastar e soltar assim. Então, pessoal, isso é tudo sobre imagens. Estádio para obter mais dicas de design e fique à vontade para compartilhar sua opinião sobre este vídeo e o design dela. 55. Máscaras Figma (imagem e texto de máscara no Figma): Bem-vindos de volta, pessoal. Neste artigo, aprenderemos sobre o que é máscara e como fazer máscara no Figma Então, a primeira coisa é como funciona a máscara no Figma. Antes de mergulharmos nos detalhes do uso de máscara no Figma, vamos entender os fundamentos, como o que é a porque muitos estudantes não sabem o que é a máscara ou algumas pessoas sabem porque algumas pessoas usam photoshop ou sabem porque algumas pessoas usam photoshop namoro para gostar de remapear, para que possam Mas se você não sabe nada sobre máscara , deixe-me dizer o que é. No Figma, as máscaras são usadas para controlar a visibilidade de uma e mais páginas usando outras formas ou imagens como modelo Essa técnica é particularmente útil para revelar somente o conteúdo dentro dos limites da máscara Agora, como a máscara funciona. As camadas da máscara funcionam como uma janela através da qual você pode visualizar o conteúdo das camadas abaixo Qualquer conteúdo fora dos limites da máscara fica oculto. Você pode criar efeitos complexos e reconstruir uma parte específica do seu design usando máscaras Agora vamos entrar na figma e menos criar uma máscara. Então, deixe-me escolher uma forma. Nesse caso, escolherei um retângulo e pressionarei a tecla shift para obter um retângulo preciso Agora, deixe-me importar algumas imagens. OK. Ok, eu vou escolher este por enquanto. Este é o iPhone 14 ou 15. Ok, isso é 15. OK. Deixe-me redimensioná-lo. Então, na minha opinião, o método de mascaramento é meio oposto, porque eu uso Canva Photoshop, bem como um prem P. Então, usamos para colocar formas na usamos para colocar Então, isso cria marcas. Mas na Figma, é o oposto. Temos que colocar formas ou objetos embaixo de nossas imagens. Então, deixe-me a opção. E como você pode ver na parte superior, eu tenho uma máscara. Então lambe e pegamos nossa máscara. Então, este é o primeiro método no painel de camadas, você pode ver, temos nossa máscara. Esse é o grupo de máscaras. Você também pode renomeá-lo aqui. Vou mantê-lo como está por enquanto. Então, como você pode ver, esta é a imagem, e essa é a garota bronzeada. Se quiser, você também pode recortá-la , basta clicar duas vezes nela, e este ormino superior dará a opção de recortar a imagem A partir daqui, você pode cortar sua imagem ou ajustá-la assim. Ok, eu estou escolhendo a máscara, eu acho. Ok, então é assim que você pode cortar suas imagens. Existe outro método, mas ele não conta como máscara, mas funciona como máscara. Deixe-me fazer um turno. Estou escolhendo a elipse e o turno inteiro para uma elipse precisa. Então, vamos preencher. Atualmente, está em cores. Agora, este é para classificação e este filme é para imagem, e o Figma agora suporta vídeos Então, estou interessado em imagens. Então, vamos às imagens. Agora, temos a opção de escolher a imagem. E agora, vou escolher essa Diva Phagocc, temos nossa máscara. Mas no painel de camadas, você pode ver, isso não é uma máscara. Essa é a imagem e essa é a máscara. Ok, então é assim que você pode criar uma máscara. Mas alguns estudantes podem estar se perguntando como podemos desativar a máscara. Então, é muito fácil. Mas estou enfrentando um problema no meu design. Ok, então o atalho para a máscara é como Control M no Windows, e para Mac, é o comando ship M. Então eu uso esse método Deixe-me tentar outro. Deixe-me desenhar uma forma novamente. Lábios e deixe-me tirar uma foto novamente. Ok, então eu vou escolher este por enquanto. OK. Selecionarei os dois e pressionarei o controle Alt M para o atalho Mas não funciona no meu PC. Eu não sei qual é o problema se isso está acontecendo com você também. Então você pode me dizer ou também pode entrar em contato com a Figma aqui e dizer a eles que o atalho não está funcionando Se estiver funcionando ou se houver outro atalho, por favor me avise Então, agora vamos aprender sobre como desativar a máscara. Então, deixe-me escolher este. E só precisamos ir até o painel menor e clicar nessa forma. Portanto, neste caso, temos um retângulo e basta clicar no botão de máscara e você desativará sua máscara Ok, então há um outro método que você também pode usar para criar um texto realmente incrível. Então, estou escolhendo esse botão de texto. Vou cronometrar sete palavras aleatórias. Deixe-me aumentar o tamanho dele, 40 96. E vamos escolher um parafuso. Ok, eu quero uma diversão muito ousada. Ok, então vamos com esse. Então, eu quero usar o método de máscara no texto. Você pode ver esse efeito em muitos designs gráficos, então estamos recriando esse efeito de máscara Portanto, é muito fácil clicar no texto. E no segundo método, vimos como criar esse efeito de máscara usando preenchimento, estamos usando o mesmo método. Vamos preencher a imagem e escolher uma imagem, alguma imagem aleatória. Então eu vou escolher este. Ok, então, como você pode ver, temos uma máscara de texto. E nesse caso, você pode ver, esse é o texto, não uma máscara. Podemos chamar isso de máscara, mas Figma não conta como máscara, eu acho, porque as máscaras são assim na Figma, e esse é o texto E você também pode renomeá-lo. Ok, você pode renomeá-lo, o que quiser. Ele se ajustará se você adicionar mais texto como este. E também podemos cortar. Eu vou preencher. Antes de preenchermos, temos que selecionar, ir para preencher e podemos escolher o corte. E também podemos adicionar essa imagem, você pode redimensioná-la assim Então é assim que também podemos fazer o truque da máscara no texto. Então é assim que você pode criar uma máscara realmente incrível no Figma Essa é a batata, e nos vemos na próxima. 56. Plugins de imagens da Figma para designers UIUX: Bem-vindos de volta a todos. Para acreditar, vamos aprender sobre plug-ins para imagens. Esses plug-ins tornam seu trabalho muito fácil. Então, atualmente temos esse plugin de pixel. Então, deixe-me mostrar como funciona. Se eu selecionar este ícone na imagem desta maré. Como você pode ver, é uma maneira mais suave, muito mais suave do que adicionar imagem Então, vamos ver como podemos fazer isso. Imagine um mundo em que você possa acessar diretamente imagens incríveis com um plug-in. Então, meus amigos, o mundo está aqui. Então, deixe-me mostrar os plug-ins. Então, podemos ir para casa para comprar plug-ins ou você pode ir para a comunidade e adicionar plug-ins, mas Figma tem uma opção muito legal Isso é recursos e o atalho é uma escavação por turnos. Portanto, há vários plug-ins. Você pode procurá-lo. Então, atualmente estamos usando pixels. Para este anúncio, você pode usar splash, photo ou Pixabay. Essas também são ótimas opções. E vamos aos pixels. E digamos que eu queira pesquisar uma imagem sobre viagens, então eu posso simplesmente pesquisá-la, vamos pesquisá-la e eu posso simplesmente adicioná-la à minha seção. Então, digamos que eu queira adicionar uma imagem desse mundo. Então, posso simplesmente clicar nele e adicionar imagens ao nosso botão. Digamos que você tenha várias caixas vazias como essa e não tenha certeza do que devemos adicionar nessas caixas. Então, neste caso, o que você pode fazer é selecionar essas caixas e clicar em inserir imagem aleatória, e ela inserirá uma imagem aleatória como Portanto, é muito útil. Acho que também está em Saba. Deixe-me escolher um Saba. OK. Também está presente na Pizaby Acho que também estará em destaque. Ok, então deixe-me cobrir tudo isso. Então, deixe-me pesquisar moda. Nesse caso, a imagem não está se encaixando perfeitamente, então podemos recortá-la para que possamos ir para o recorte de imagem e ajustá-la Deixe-me assim. A imagem não é tão grande, então não podemos ajustá-la. Podemos simplesmente excluir esta e adicionar uma imagem muito boa. Vamos dizer isso para atrito individual. Nesse caso, podemos adicionar roupas. Deixe-me ler isso primeiro, mas temos que ajustá-lo porque o ajuste não é tão perfeito. Como você pode ver neste caso, a imagem está limpa, então podemos ajustá-la assim É assim que podemos cortar a imagem. Acho que vou te mostrar como cortar. OK. Agora, qual é a próxima? É eletrônica. Vamos adicionar eletrônicos. Ok, eu Pizawa eu não vi aquela imagem específica, mas em pixels, eu gosto muito dessa imagem E como você pode ver, está disponível em Pizawa, mas não era visível em Pizawy, isso é Então, deixe-me adicionar isso na eletrônica. Ok, o próximo é procurar comida, próximo são livros, livros. Este parece bom, então vou adicionar este, e o último é artesanal. Ok, artesanato, podemos acrescentar, este é bom, mas deixe-me mostrar alguns detalhes. Ok, esse parece bom. Então é assim que nos conectamos. Como você pode ver, isso economiza muito tempo. Eu sei que adicionar sua própria imagem também é bom. Mas digamos que, em alguns casos, você queira apenas adicionar uma imagem como espaço reservado ou não saiba qual imagem adicionar Nesse caso, você pode usar plug-ins como Pisels ou Pizawa ou splash Deixe seu design exigir isso, então você também pode adicionar isso. Mas a maioria do cliente fornecerá ou sua empresa fornecerá as imagens, acrescente isso. Ok, uma coisa que esqueci de acrescentar nesse design é que há um botão de localização Quero acrescentar, pois mostrará nossa localização atual. E eu vou escolher a cor Ok, essa vamos fazer com essa. E eu também tenho o símbolo de localização Oh icon. Vai estar aqui e deixe-me adicionar um texto. Então, atualmente, eu moro em Marsha, então meu nome é este pônei se o usuário digitar neste ícone, então haverá um menu que aparecerá e mostrará meu endereço e alguns contratos serão Se o usuário clicar nele , ele mostrará esse endereço. Portanto, quando quisermos alterar nosso endereço ou verificar seu endereço, nesse caso, será útil. Ok, então eu provavelmente estou falando mal do meu endereço. Acho que guardei minhas adições precisas, então provavelmente vou desfocar isso. Então, esse é um rapper para este vídeo, pré-plug-ins de imagem, combinação dos sonhos dos designers Então vá em frente, explore e descubra o mundo versus das possibilidades de design. Da próxima vez, continue criando e eu te encontro na próxima 57. Projeto de curso 9: Alquimia de imagens: como dominar imagens e plugins no Figma: Meus alunos. Isso é um projeto. Primeiro, coloque esse espaço vazio em branco e substitua-o por imagens legais como essa. Acho que também forneci todas as imagens no arquivo de recursos. Então, dê uma olhada, verifique e adicione imagens a isso. Se você quiser adicionar suas próprias imagens, para saber como adicioná-las, então vá e adicione essas imagens. Mas onde há mais, mergulhe nos plug-ins, no país das maravilhas e, certamente, no alquimista de imagens internas Redimensione, recorte e filtre, brinque com o efeito até cantar visualmente Basta lembrar o que está na composição. Ele aponta para o público-alvo e seus desejos e como. Então, depois de adicionar imagens, faça uma captura de tela e compartilhe-a na seção do projeto Estas são algumas instruções. Primeiro, neste espaço em branco, adicione imagens. Depois disso, se você quiser usar plug-ins, adicione plug-ins, faça uma captura de tela, faça o upload na seção do projeto e você também pode compartilhá-la nas redes sociais Então conclua este projeto e venha até mim, e eu vou ver vocês. O próximo. 58. Layout automático e restrições na Figma: Olá, colegas construtores. Bem-vindo de volta ao nosso design Click Art Commerce. Hoje, tenho uma confissão a fazer. Um caso clássico de oops. Eu esqueci Então, aqui está a informação. No meio da criação da obra-prima, adivinhe, escapou pela fenda Sim, você entendeu. A pequena página mais importante do produto. Eu sei que eu sei disso. É como assar um bolo e esquecer um jejum. Eu sei que é amador. Mas ei, não estamos lá para julgar. Estamos aqui para aprender e dar boas risadas ao longo do caminho. Portanto, fique por aqui, pois estamos nos empenhando primeiro em criar juntos a página do produto Eclosure Tudo isso, pessoal, a máquina de hoje é criar a página do produto que esquecemos totalmente Estamos fazendo isso em um estilo com figma e uma dose generosa de humor Mas isso não é tudo, você vê. Em nossa busca para corrigir esse pequeno erro, também vamos desvendar mistérios do layout automático e das restrições É como uma cola mágica que mantém tudo unido. A cobertura do bolo de design, se você quiser. Ok, então essa será nossa página de produto. Eu sei que já o desenhei, então vou mostrar como projetá-lo, e vamos criar esse botão, botão incrível. Como você pode ver, esse texto elástico e macio também fica E se eu estender isso assim, ele será estendido. Em Ts bold, vamos criar esse botão incrível usando layout e restrição automáticos Mas primeiro, vamos falar sobre o layout automático. Imagine que seu design de figma é uma casta saltitante. Cada elemento interno é um morto pulando ao redor. A arte automática é como uma rede invisível que impede que os mortos voem das paredes Você pode dizer a cada criança quanto espaço elas precisam e onde elas devem pular A segunda é que, se os mortos ficarem mais altos, as bordas da rede para que não colidam E se você adicionar um novo kit, a rede automaticamente abrirá espaço para que todos ainda possam pular alegremente Essa foi a definição básica de layout automático. Então, vamos projetar os detalhes do produto. Então, vai ser muito simples, então só temos que copiar isso. Então, vou copiar esse Control C, selecionar detalhes do produto. Controle. Como você pode ver, crie esse botão da Barra de Navegação, para que não precisemos projetá-lo repetidamente, então deixe-me enviá-lo de volta. OK. Agora, vamos criar essas páginas. Onde vamos adicionar algumas imagens de nossos produtos. Vamos dar às bordas arredondadas um máximo de 15 e deixar que eu ative as colunas para que eu possa encaixá-las perfeitamente. Estou segurando alt. Como você pode ver, estamos abordando do lado do conselho. OK. Agora, deixe-me copiar isso e colar aqui desta forma e para este também. Mas, como você pode ver, o retângulo está fora da moldura. Então, deixe-me reuni-los em detalhes do produto. E atualmente eles estão lá dentro. Se eu clicar aqui, o clipe contrate já está habilitado. Ok, então essas serão nossas imagens. Agora, vamos criar esse botão mágico. Isso se estende automaticamente. Ok, vamos adicionar um texto ao carrinho, deixe-me criar os sites de texto. Eu vou escolher 25, eu acho. Agora, selecione os dois e, como você pode ver, o layout automático aparece no painel de design. Se eu selecionar um deles, como você pode ver, o layout automático não está aqui, e temos que selecionar os dois. Se você quiser adicionar outolayout, clique no layout automático Agora, se eu esticá-lo, como você pode ver, ele fica no meio. Também há um preenchimento horizontal e preenchimento vertical neste botão Deixe-me mudar a cor do botão primeiro. Atualmente, é ótimo. Deixe-me escolher este e vou adicionar algumas bordas arredondadas para cima para deixar eu dar uma volta completa, então vou escolher assim, o botão Adicionar ao cartão. Podemos mudar a cor desse texto. Deixe-me transformá-lo em tudo um. Ok, agora está ótimo. Deixe-me remover, para que possamos fazer mais uma coisa. Podemos manter um botão assim e deixar eu diminuir o tamanho da fonte. Agora, deixe-me dissimular as colunas. OK. Deixe-me fazer uma cópia desta. Ok, digamos que você queira atualizar o texto. Digamos que eu queira dizer. Agora eu posso adicionar muito texto lá dentro. Como você pode ver, o botão canta junto com o texto. Ok, isso está acontecendo porque atualmente estamos em um painel de design, estamos em Hum. Mas digamos que se eu escolher peso fixo. E se eu tentar ajustar o texto dentro dele. Então, como você pode ver, o botão não está aumentando. Lembre-se de que deve ser um abraço, não um peso fixo Ok, tem uma coisa que eu quero te mostrar. Digamos que você tenha um botão como esse e eu vou adicionar algum texto como esse texto aleatório. E deixe-me selecionar os dois layouts automáticos. E digamos que sua restrição automática esteja aqui, por padrão, talvez esteja no canto superior esquerdo E se eu tentar estender esse botão. Então, como você pode ver, o texto permanece lá, ele não se move. Então, tem que estar aqui para funcionar. Isso é assim. Ok, tem outra coisa. Digamos que você tenha um texto como este e, atualmente, ele tenha um peso automático por padrão. Mas se você escolher a altura da água, ela se ajustará de acordo com a altura. Então, se eu adicionar algum texto, ele se ajustará de acordo com a altura. Mas se eu escolher um tamanho fixo, nesse caso, o texto não caberá na caixa. Ele fará algo aleatório como isso. Lembre-se de que deve ser um peso automático se você quiser fazer na horizontal, e se quiser fazer na vertical, mantenha Na verdade, existe um método de atalho que você pode usar para criar um layout automático, como botões como este Então, basta adicionar texto, adicionar texto como adicionar para adicionar dois recortes. E agora, selecione o texto. Você não precisa transformá-lo em uma moldura ou não precisa adicionar um retângulo Basta selecioná-lo e escolher o layout automático, e o atalho é shift A. E, como você pode ver, temos nosso botão Mas, atualmente, o preenchimento é branco e, portanto, não é visível. Então, deixe-me adicionar um preenchimento e vamos escolher a mesma cor. Este, como você pode ver, temos nosso botão e podemos adicionar alguns cantos aterrados Deixe-me somar 20 assim ou fazer dez. OK. E eu posso fazer com que escolha assim. Eu posso aumentar o tamanho. Agora eu posso adicionar preenchimentos verticalmente, horizontalmente. Também posso alterar a restrição, e é assim que criamos botões É um dos métodos mais simples. Portanto, você não precisa adicionar um texto retangular e, em seguida, convertê-lo em layout automático Então, como você pode ver, basta adicionar texto, ligar o layout automático É um dos métodos mais simples. E se você quiser usar esse botão em outro quadro, basta rastreá-lo desta forma, copiar e colar e usá-lo em seu design. Então, é simples assim. Ok, então é assim que criamos botões no Figma usando camadas automáticas E agora vou terminar essa apresentação porque ela está inacabada Então, deixe-me adicionar algumas imagens nele. Então, provavelmente, vou avançar rapidamente. Ok, então essa será nossa página de produto. Sei que parece ótimo, mas há muitas coisas que posso adicionar, como uma visualização semelhante ou categoria, ou há muitas opções, posso adicionar mais, mas atualmente estamos apenas aprendendo. Então, isso é para esta página de detalhes do produto. Eu sei que foi um vídeo totalmente não planejado, então demorei muito tempo para criá-lo O objetivo principal deste vídeo era criar esse botão usando o layout e as restrições do pedido, e todos sabemos que podemos usá-lo dessa forma e ajustá-lo ao centro Acho que parece melhor, então vou continuar assim. Então, amigos, até a próxima vez, felizes em projetar e lembre-se que até o melhor designer esqueceu ocasional de detalhes do produto Mas é isso que nos torna humanos, certo? Então, cuide dos meus amigos. 59. Espaço de layout automático da Figma entre objetos: Bem-vindo aos estudantes. Hoje, estamos levando o auto t para o próximo nível. Por fim, hoje, esticamos uma pulseira de botão porque estamos mergulhando no agrupamento de muitos itens e ampliando todo esse É como combinar o recurso de seleção inteligente que aprendemos anteriormente com uma mágica sofisticada de layout automático Então, sem mais delongas, vamos explorar o layout e o espaçamento automáticos Então, primeiro, vou digitar algumas palavras aleatórias aqui. Deixe-me escolher algumas palavras aleatórias. Como em casa. Deixe-me copiar esse. AI, Controle D , bloqueios de medicamentos e lista B. Ok, deixe-me organizar isso OK. Agora, vamos selecionar todos eles e a parte inferior. Ok, então temos esse tipo de botão de navegação. E digamos que você projetou seu botão de navegação em seu site desta forma, como horizontalmente, mas seus clientes querem que seja horizontal como este Não temos navegação no lado esquerdo e é vertical. Então, digamos que seu cliente queira isso. Portanto, nesse caso, o que você pode fazer é organizá-lo manualmente, um por um. Mas há outro recurso do layout automático, se vendermos todos eles e criarmos no layout automático. E se eu for para o layout automático, você pode ver que há uma opção chamada layout vertical. Se eu fizer isso, como você pode ver, somos capazes de fazer isso em um segundo com um clique. E temos todos os recursos que posso alinhar aqui desta forma E eu posso adicionar preenchimento a ele. Eu posso adicionar preenchimento vertical, preenchimento horizontal, bem como posso restringi-lo Eu posso adicionar ao centro, assim como posso usar uma seleção inteligente como essa. Eu posso mudar o texto assim. Eu posso trocar os blases deles. Esse é o recurso que obtemos com o layout automático e já vimos que podemos adicionar filtros. Vamos adicionar um preenchimento, como deixe-me adicionar um novo frac. Vamos COVID, este Agora, digamos que eu tenha um texto como esse teste aleatório. Digamos que eu tenha vários deles. Vamos assim. Vou digitar algumas palavras britânicas. Então, deixe-me alinhá-lo. Line Aig, vamos criar um layout automático. E digamos que eu queira copiar todo o recurso, todas as propriedades desse layout automático para isso, e eu possa simplesmente copiar a barra de navegação desta seção, que já é um layout automático, e copiar e colar, ir para copiar propriedades e selecionar esse layout automático, e colar suas propriedades. Como você pode ver, adicionamos todos os recursos disso a isso. E se quisermos adicionar alguns preenchimentos, como preenchimento esquerdo, você pode adicionar preenchimento superior esquerdo Este é o preenchimento direito , assim como este é o preenchimento Atom como E está escondido aqui. Você pode adicionar uma lacuna vertical como essa entre eles. Esses são alguns dos recursos adicionais do layout automático. Tem mais uma coisa. Digamos, digamos, que nossos blocos saiam do nosso layout automático. E você pode simplesmente trazê-lo assim. E podemos guardá-lo. Há uma linha. Acho que tenho que mudar a cor. Então, se eu mudar a cor e arrastá-la para fora, e se você arrastar para dentro, você pode ver que há uma linha azul de peras e podemos colá-la aqui assim Digamos que você errou e colocou em algum lugar aqui, como fora da moldura Atualmente, está fora do quadro, e este está fora do quadro 23. Podemos simplesmente trazê-lo assim. E é um layout de trenó ou automóvel. E, como você pode ver, para o layout automático, o ícone é diferente. exemplo, para molduras, é como a caixa quadrada e, para layout automático, temos 3 barras com bordas circundadas E há outra coisa que eu esqueci de mencionar. Acho que estou esquecendo muita coisa hoje em dia. Ok, então há uma coisa. exemplo, digamos que você queira copiar este item e colá-lo nele para poder fazer coisas simples, como até mesmo pressionar o controle. Para isso, o truque é simples, mas as pessoas sempre se confundem. exemplo, digamos que temos que selecionar, e aí as pessoas ficam confusas. Por exemplo, temos que entrar em primeiro lugar. Depois disso, temos que entrar em texto. Eu clico duas vezes. Depois disso, tenho que pressionar o controle. Então eu posso fazer uma cópia, um monte de cópias desse texto como este. Se eu precisar, primeiro selecione a ordem após esse texto clique duas vezes e, novamente, clique duas vezes para editar um texto como este. Então, como você pode ver, os layouts automáticos são realmente incríveis. Portanto, esses são alguns recursos avançados dos layouts automáticos. Então esse é o vídeo do Portola, e vejo vocês no próximo 60. Restrições e redimensionamento da Figma simplificados: Eu fiz um mundo fascinante de perguntas. As perguntas são como cola mágica que solta o design do lugar. As letras fazem coisas legais, como colocar a navegação em cantos específicos, criando designs responsivos visuais atraentes Então, deixe-me mostrar que tenho uma página chamada minha conta. E se eu definir isso. Como você pode ver, tudo permanece junto. Não fica confuso. Então, fizemos isso usando restrições. Então, deixe-me desfazer isso. Agora imagine as possibilidades de até mesmo lançar uma pitada de alavanca automática no final do curso, criando uma sinfonia de design que pode fazer seu design explodir Emocionante, certo. Então, vamos embarcar nessas restrições, Ok, copiei essa barra de navegação, bem como essa barra de navegação de nossos designs anteriores, e ela não tem restrições adicionais Eu tenho uma restrição por padrão, mas ela não tem acréscimos ou Será útil quando , digamos, queremos criar a mesma coisa para um site, para iPad. Então, dessa vez, isso vai ajudar. Então, deixe-me rastrear um quadro em que vou escolher um iPad 12. Como essa, e eu quero copiar essa coisa com um iPad, e ela tem que se encaixar exatamente assim. Então, nesse caso, podemos usar a restrição. Então, deixe-me te mostrar uma coisa. Então, se eu desenhar um retângulo como este, como você pode ver no painel de design, as restrições são esquerda Portanto, as restrições estão sempre presentes e por padrão. Os elementos estão restritos à parte superior e à esquerda, mas queremos mais controle Vamos começar com essa barra de navegação. Ok, então deixe-me fazer a primeira coisa com este, então vamos apenas copiar e colar sobre ele para que funcione bem. Agora, se eu esticar , como você pode ver, isso está totalmente confuso, e também está bagunçado aqui Então, agora vamos fazer uma pergunta. Ok, então deixe-me escolher esse retângulo primeiro, então vamos corrigir esse primeiro Ok, então isso é retgle e atualmente está no centro. Então, vou adicionar isso da esquerda para a direita, e você tem que estar no topo. E para este menu de hambúrguer, você tem que estar à esquerda e em cima, isso é perfeito E para o ícone de pesquisa, esquerdo e superior, também é bom. Você tem que estar no centro. Ok, no centro e isso tem que estar no centro e, para Mike, na direita e no topo. Ok. A parte superior direita é perfeita para a esquerda, a direita e a parte superior. Deixe-me pegar essa. Este tem a esquerda no topo, mas eu quero da esquerda para a direita no topo. Agora, se eu esticar isso, funcionará. Como você pode ver, está funcionando perfeitamente bem. Nós vamos fazer o mesmo com isso também. Deixe-me fazer essa. Isso vai ser esquerdo e inferior, deveria ser esquerdo e inferior deveria estar no centro e no centro, e você tem que estar direito e embaixo. Parte inferior direita, e esse retângulo tem que ser da esquerda para a direita. Mas se eu selecionar o centro, então se eu esticá-lo, como você pode ver. É total. Não se estica. Não sei por que está se alongando, mas não se estica Então, deixe-me adicionar a esquerda e a direita, e tem que estar na parte inferior. Agora, deixe-me escolher isso. E como você pode ver, se eu extrair, a barra também está extraindo, mas eu não sei o que está acontecendo nessa O que está acontecendo com você? Ok, eu mantive a esquerda direita. Tem que ser o centro. Ok, agora vai funcionar. Ok. Agora, se eu escolher isso, se eu esticar isso. Ok, então está funcionando totalmente bem. Agora eu posso simplesmente copiar este e pressioná-lo aqui. Então, como você pode ver, não é alongamento, mas eu posso fazer isso e me alongar perfeitamente. O mesmo com este. Eu posso segurar, arrastar assim. Ok, então não é moldura. Então, deixe-me fazer uma moldura. Seleção principal. E se eu copiar isso e eu puder esticá-lo assim, e eu posso usá-lo. Mas, como você pode ver, há um problema. Os ícones que estão indo totalmente para a direita e para a esquerda não ficam no meio. Mas se eu fizer alguma coisa aqui, não está funcionando. Eu sei porque eu o transformei em uma moldura. Mas se eu fizer isso e se eu desagrupar este mundo, e agora, se eu esticar isso, como você pode ver, está funcionando Eu não sei o que está acontecendo aqui. Acho que com molduras, não funciona da maneira que você deseja. E eu vou resolver isso, não se preocupe. Vou corrigir isso e atualizar o próximo vídeo. Ok, então há uma coisa que eu quero te mostrar. Por exemplo, com restrições, obtemos essas linhas pontilhadas. Como você pode ver, está presente aqui e também aqui. Então, é para a esquerda e para a direita, como você pode ver para a esquerda e para a direita, e esta é a parte inferior. Portanto, lembre-se de que essas linhas nada mais são do que linhas de restrição Ok, então tudo isso tem a ver com restrições. Criamos essa barra de navegação elástica para nosso celular e também para dispositivos móveis. Eu sei que é um pouco confuso, mas você vai se acostumar com isso Basta brincar com ela, brincar com a restrição e deixar para a direita tudo para que você a consiga No próximo vídeo, combinaremos o layout automático com restrições, então acho que isso será em outro nível De alguma forma, você pode ficar tentado a criar um layout complexo, como o exemplo do iPad Mas espere esse pensamento, é um pouco demais por enquanto. Vamos explorar mais exemplos juntos no próximo vídeo. Então, onde vamos misturar as restrições de layout automático no cenário do mundo real. É desafiador, mas é uma coisa dourada. Então nos vemos na próxima camada. E vamos continuar explorando essa mágica do design. 61. Molduras de ninho, layout automático e restrições na Figma: Bem-vindo. Com isso, estamos compilando recursos que já aprendemos Exploraremos os quadros de aninhamento dentro de nossos quadros. Vamos nos aprofundar no layout automático. Além disso, vamos dominar a restrição. O objetivo final é criar cartões reutilizáveis elegantes e escaláveis que possam ser Então, como você pode ver na minha tela, eu tenho um monte de cartões, que eu posso simplesmente usar, reutilizar ou escalar, ou posso copiá-los e usá-los em outro projeto Então, neste dia, vamos ver como criar esse cartão. E para isso usamos, tipo, vou te mostrar uma coisa. Portanto, usamos molduras, molduras aninhadas e layout automático Então, como você pode ver, estamos combinando todos os recursos com outro neste banner. Sei que esse vídeo será um pouco longo e algumas pessoas podem achar que é confuso Então, antes do pus, desligue o telefone. Vamos entrar nesse vídeo. Então, deixe-me rastreá-lo aqui. Vamos começar com esse. Então, para isso, vou rastrear um quadro. Podemos desenhar retângulos, mas com retângulos, há recursos limitados Portanto, com molduras, temos muitos recursos. Então, vou desenhar uma moldura como essa. Então, deixe-me habilitar minhas colunas. Então, vai se encaixar perfeitamente nisso. Assim. OK. Agora vou adicionar um preenchimento a ele. Vamos fazer de você uma cor normal. Portanto, é apenas para referência porque a cor da moldura e a cor do fundo são invisíveis para mim. Atualmente, estou usando a cor natural, neural ou não natural Vamos nivelar essa moldura em torno de bordas até dez. Agora, vamos adicionar uma imagem. Mas antes de fazermos isso, há um recurso que quero mostrar a vocês. Então, temos que criar essa imagem. Então, para isso, temos que remover o fundo dessa imagem. Então, deixe-me mostrar como podemos fazer isso. Essa é a imagem. Eu baixei do site da Apple. Mas, como você pode ver, ele tem uma ampla taxa de fundo. Então, eu posso acessar vários sites na Internet, mas o processo é demais. Você pode usar vários sites BG ou Bago, mas isso leva tempo e o processo No Figma, temos um plugin chamado benzine, então podemos usar esse plug-in para remover esse Mas para usar esse plug-in. Há um processo que você deve seguir, como configurar um pacote de chaves O processo é simples, basta clicar no pacote de configuração. Depois disso, acesse o site e cadastre-se. Depois de se inscrever, você precisa acessar as contas. E haverá uma opção chamada paces. Vá até lá, crie um novo pk, como você pode ver, é uma opção aqui Em seguida, ele criará uma chave, algo parecido, copiará e colará no Benzin Eu sei que existe um plugin de remoção de BG. Mas o problema com o plugin hat é que você precisa comprar depois de alguns testes. Então, para isso, estamos usando este. Então, basta clicar em remover BG para remover isso. Então, como você pode ver, nosso plano de fundo foi totalmente removido. Então, deixe-me redimensioná-la, redimensioná-la assim, e vou colocá-la aqui assim, mas temos que cortar essa luva, vamos até mas temos que cortar essa luva, vamos Bill e Ok, as imagens são cortadas agora. Atualmente, essa imagem está fora do nosso quadro, então deixe-me trazê-la para dentro. Como você pode ver, não está destinado, então eu tenho que fazer isso. Novamente, agora é t. Agora, vamos adicionar um texto. Isso será transferido para o iPhone. Ok, então eu adicionei esse texto no quadro, e ele está no quadro, quadro 36. Podemos renomeá-lo, então deixe-me renomeá-lo para um banner. Banner para que possamos fazer isso de novo e de novo. OK. Agora, como você pode ver, temos essa cor laranja, então vou adicionar isso. Então, para isso, atualmente, adicionamos uma nova cor, então eu sei que ela não parece muito boa em comparação com esta. Deixe-me ir até este quadro e deixe-me dividir isso e escolher a imagem, e eu tenho M um. Como você pode ver, tem alguma imagem certa, então usei o recurso de corte para cortar essa parte. Oh, desculpe, eu escolhi os diferentes, então deixe-me mudar isso. Ok, agora parece perfeito. Mas eu tenho que consertar isso primeiro. O texto que eu quero deveria ser 34 34 para Let's go a 24, 24, que está usando formas ovais e eu não quero abrir Ok, vou escolher este e quebrá-lo e fazer com que seja 24. Ok, agora temos texto e imagem, bem como panom, então deixe-me mudar a cor dele Eu vou para um natural, um neutro. Ok, então deixe-me adicionar a restrição. Então, se eu tentar redimensionar esse quadro, como você pode ver, ele não é tão redimensionável porque não adicionamos Então, para essa imagem, a restrição será central e o poom, para esse centro e topo, Agora, se eu tentar escalá-lo ou redimensioná-lo, como você pode ver, ele é Então, isso é cerca de uma porcentagem. Eu acho que o texto é muito grande, então deixe-me fazer 20. E também temos que adicionar o botão de fotografar agora, então eu tenho que colocar aqui. Ok, agora terminamos com isso. Agora, deixe-me adicionar um texto. E isso vai ser filmado agora e é muito grande. Então, deixe-me fazer isso bem. OK. Vamos lá, elemento. E já vimos em um vídeo. Quando estávamos criando botões, não precisávamos adicionar retângulo ou moldura, então só precisamos escolher esse texto corretamente e adicionar um layout para fazer Agora você pode ver que ele tem preenchimento e preenchimentos, mas não tem um arquivo Tem campo invisível. Deixe-me adicionar um recheio e ele vai ficar lascado. Vamos com esse. Ok, isso é muita conversa. Eu vou com esse. E deixe-me adicionar as bordas arredondadas. Tem que ser totalmente redondo. 20. Deixe-me escalá-lo. Então, vou pressionar, como você pode ver, ele muda em duas escalas. Então, agora eu posso escalá-lo como se fosse pressionado. Então, deixe-me adicionar restrições. Vai ser no centro e no topo, no centro e no topo. OK. Perfeito. Agora, se tentarmos escalá-lo ou diminuí-lo, como você pode ver, ele ficará no meio. Ok, então adicionamos o layout automático. Então, digamos que você queira transformar este texto em algo como eu copie este, então OK. Então, digamos que eu queira adicionar outra coisa , eu sei que joquei, mas me perdoe por isso, algo assim Como você pode ver, com o auto lat, obtemos esse recurso de redimensionamento automático com esse botão Portanto, não precisamos redimensioná-lo manualmente. Então é assim que o atraso automático vai nos ajudar. Então, como você pode ver, temos o layout automático do quadro. E se você quiser adicionar essa imagem ao quadro, você pode totalmente fazer isso, então ela se tornará um quadro. Como você pode ver, mainframe, e nós temos dentro de um to frame E também temos layout automático. Isso parece um pouco caótico. A loja número dez está presa nessas duas e não parece muito boa. Então, primeiro, vou desagrupar isso e arrastar isso para baixo Deixe-me ajustá-lo um pouco para baixo assim. Agora, parece ótimo. Ok, podemos ajustá-lo assim. Agora, parece ótimo. Ok, agora eu posso deletar este, este, e deixe-me adicionar a mesma coisa aqui. Temos que adicionar apenas muitos de a. Então, vou selecionar todas essas coisas e você tem que ir para frente. Vamos ativar a coluna de criação, e ela estará aqui Como você pode ver, parece muito bom. Deixe-me desligar isso. arrastá-la em direção a esta. Agora está totalmente perfeito. Posso simplesmente clicar aqui, se houver algum cartão de cupom, para que eles também possam clicar nele e isso os redirecionará para esse tom de fonte OK. É assim que usamos molduras, molduras naturais e automáticas com uma coisa suficiente. Há uma coisa. Como você pode ver, há um cartão que eu criei. Nisso, há algo que eu não lhe ensinei. Mas, como você pode ver, há uma sombra projetada embaixo deste iPhone Como você pode ver, isso dá personalidade a essa imagem. Não parece tão plano. Então, podemos adicionar isso a este. Mas primeiro, há uma coisa que eu quero te dizer. Então, como você pode ver, esses visuais parecem mais atraentes. Se você concorda comigo, por favor me avise. Porque se eu for à Amazon, como você pode ver, isso parece nojento, não há personalidade nessas imagens. É como se eles fossem mantidos lá sem motivo. E se eu for ao nosso design. Então, como você pode ver, parece ótimo. Tem uma personalidade. Ele tem uma imagem de fundo, bem como estacas. Então eu estava pensando por que a Amazon não faz isso. Eles devem seguir essa técnica para criar cartões de produtos realmente incríveis como esse. Ok, este também é redimensionável assim. Há outra coisa que eu esqueci de mencionar que você gosta, eu uso a imagem que não tem fundo porque essa imagem fica ótima quando é transponada Mas se eu te mostrar uma coisa aqui. Então, digamos que temos essa imagem, vou rastreá-la em nossa interface e deixe-me redimensioná-la E se eu tentar adicioná-lo aqui. Então, como você pode ver, não parece muito bom. Não combina com o nosso barril e parece muito sujo É por isso que usamos o método remoto. Então, como você pode ver, o produto parece muito melhor e, pelo menos, tem uma personalidade em comparação com este. É por isso que eu uso as imagens de transporte. Depende totalmente de você. É sua escolha criativa. Se você quiser usar, digamos, uma imagem como essa, então você pode usar aquela. Deixe-me te mostrar outra coisa. Eu gosto disso, deixe-me remover isso, e se eu tentar adicioná-lo aqui. Como você pode ver, a cor não combina, mas vamos ver se eu remover o fundo, ele ficará muito melhor em comparação com este. Essa é a técnica que você pode usar para fazer seu produto se destacar. E aí está outra aplicação principal de molduras, contêineres e layout automático Espero que isso aprofunde a compreensão desse conceito. Então esse é o invólucro desse vídeo. Encontrarei você na próxima, onde continuaremos nossa jornada pelo empolgante mundo do design figma. Então, veja amigos. 62. Técnicas avançadas de layout automático Figma: Olá, pessoal. Dessa forma, estamos mergulhando nas técnicas avançadas de figma, explorando algo como o layout automático avançado Além disso, triplicaremos altura automática do cubo mágico. Para caixas de texto, as técnicas levarão jogo de design a um novo nível, permitindo o ajuste dinâmico e acoplamento eficiente dos elementos Então, dessa forma, vamos dobrar o layout automático. Então, como você pode ver na minha tela, eu tenho três caixas. E se eu, digamos, eu quiser adicionar algo dentro dele. Então, deixe-me ler este conteúdo, e se eu pressioná-lo aqui. Então, como você pode ver, as caixas estão se ajustando sozinhas. Não precisamos direcioná-lo ou ajustá-lo manualmente ou não precisamos alinhá-lo novamente. Então, quando temos o múltiplo em camadas configurado, se colocarmos o conteúdo dentro, ele empurra o elemento de acordo. Agora vamos ver como implementar isso. Eu tenho esta página que eu criei anteriormente. Acabei de duplicar esta página. Agora vamos emoldurar e desenhar uma moldura como essa e deixar eu arrumar minha coluna Para que eu possa caber lá dentro. Eu não, a moldura tem que caber lá dentro. Deixe-me torná-lo invisível. Deixe-me adicionar algumas cores. Vou adicionar algumas cores neutras como essa. Agora, esta página será como uma informação geral. Ok, então, primeiro, quero adicionar uma breve nota nesta página como se este produto fosse feito de materiais reutilizáveis Então, deixe-me adicioná-lo aqui, e vamos adicionar alguns ícones, ícones reutilizáveis Então, para isso, vou usar ícones como plug-in, e há vários ícones agrupados que podemos usar totalmente de graça. Tão grátis. E para isso, vou escolher esse. Ok, agora deixe-me reutilizar. OK. Ok, então adicionamos os ícones. Deixe-me encerrar este ponto. E eu quero que cada ícone tenha até 20 porque é muito grande. E para isso, vou usar a propriedade question. Se eu clicar aqui, como você pode ver, isso se torna como um ícone de corrente, e se eu colocar 20. Assim, como você pode ver a largura e a altura ao mesmo tempo, não precisamos fazer isso manualmente repetidamente, como neste caso. Então, se eu clicar no ícone, se eu selecionar isso, e se eu adicionar o valor 20, como você pode ver, ele adicionará apenas largura e altura ao mesmo tempo. Ok, então temos esses três íons aqui. Eu acho que eu deveria fazer isso até 25. Ok, agora está ótimo. Bem, deixe-me selecionar isso. Deixe-me colocá-lo bem para cima e só para baixo. Ok, eles estão aqui agora. Então, vou desenhar uma caixa e acrescentar que este produto é feito com pelo menos 20% de reciclagem contida em peso Ok, então esta será nossa nota simples para isso. Ok, então criamos nosso primeiro cartão. Deixe-me adicionar as bordas arredondadas até as rasgadas. E agora, digamos que eu queira adicionar algum conteúdo interno. Digamos que eu queira adicionar isso. Então, como você pode ver, a caixa de texto não está se estendendo tão bem quanto o mainframe, que é esse, o azul Então, neste caso, o layout automático vai nos ajudar. Mas antes de usarmos o layout automático, preciso mostrar uma coisa : o recurso de altura automática. Portanto, atualmente, não é de tamanho fixo. E se eu escolher a altura automática, ela se ajustará sozinha. Então, se eu adicionar algum texto aleatório dentro dele, como você pode ver, o tamanho da caixa está se ajustando sozinho Ok, então terminamos com este. Agora queremos ajustar a moldura, a moldura real. Então, para isso, já aprendemos que precisamos usar o layout automático. Vamos selecionar todos eles e clicar na camada automática. Como você pode ver, funciona automaticamente, mas organizou as outras coisas com eles, como a nota com os ícones. Então, eu não quero isso neste cartão. Então, para resolver esse problema, podemos fazer a coisa mais simples. Podemos selecionar todos eles. Os ícones, eu quero que essa coisa sejam colocados aqui. Não se move para cá nem para cá. Então, foi desagrupado. Então, agora, deixe-me adicionar esse interframe. Agora, se eu selecionar todos eles, e se eu escolher o layout automático. Como você pode ver, está lá. Mas a caixa ficou pequena. É por causa do layout automático, o layout automático sempre faz essa coisa estranha Agora, deixe-me adicionar outra coluna. Agora, se eu tentar adicionar algo dentro dessa caixa, como você pode ver, a caixa se estende, mas essa caixa não se move. Ele permanece no mesmo lugar. Então, o que queremos nesse cenário é que ele se mova de acordo com nosso conteúdo, como, como você pode ver, se eu adicionar algo aqui, então, como você pode ver, a caixa está se movendo. Então, queremos a mesma coisa aqui. Então, para isso, estamos usando o layout automático. Portanto, é como dobrar nosso recurso de carregamento automático. Eu sei que o auto old já é um tópico um pouco confuso, e estamos aplicando o mesmo saque automático em duas Então, se não entendermos essa parte, assista novamente porque é meio confusa Então, deixe-me contar como funciona. Então, para isso, temos que usar a demissão automática. Mas antes de fazermos isso, deixe-me selecionar dois deles. Agora, os dois itens estão selecionados , como você pode ver no painel de design. quadro 41 e o quadro 42 são esses dois quadros e são camadas automáticas. O símbolo está aqui. Agora, temos que aplicar novamente o layout automático. É chamado de lote automático duplo e clique no botão de carregamento automático mais E deixe-me mostrar no painel de design. Não está no painel de camadas. Automatizamos dentro do Autode o layout automático aninhado. Agora, se eu adicionar algo de texto dentro dele. exemplo, digamos que você queira adicionar Por exemplo, digamos que você queira adicionar alguns novos detalhes a esta nota, como usar águas reutilizáveis ou algo parecido Assim, basta adicioná-lo e ver que caixa está se ajustando automaticamente sozinha Não precisamos ajustá-lo repetidamente manualmente. E isso é totalmente reutilizável. Então, para copiar, vou selecionar essa única opção, usar o atalho Control D e adicionar outra caixa E esse recurso também funcionará com essa caixa. Digamos que se eu adicionar algum texto. Como você pode ver, isso está funcionando totalmente. Tudo bem. Ok, então isso não parece muito bom. Eu sei que esse não é o método real para projetar os detalhes do produto. Digamos que há várias coisas que queremos adicionar ao nosso design usando esses carros, e não precisamos projetá-los repetidamente reorganizá-los ou realinhá-los Então, nesse caso, vamos usar o recurso de layout automático múltiplo. Agora, podemos simplesmente adicionar algumas informações, como detalhes do produto, bem como essa promoção, como esta. E deixe-me deletar esse primeiro. Ok, então há um espaço vazio, eu acho. E deixe-me adicionar apenas a margem de preenchimentos que ele chama de Então, basta excluí-los. Oh, mas eu cometi um erro. Eu posso ir para o texto e simplesmente clicar nesse espaço vazio. E desde que eu tenha algum lugar para trabalhar. Agora eu posso adicionar o uso. E nas avaliações, vou acrescentar, com o primeiro a avaliar o Jordan triplex one R P. Ok, esse é um nome muito grande para problemas Ok, então você tem um mergulho profundo no recurso avançado do Figma Espero que este vídeo anuncie sua compreensão e apimente a criatividade em seus designs Então esse é um rapper para esta sessão. Mas há uma coisa que eu quero te dizer. Eu conheço o carro ou estou um pouco confuso. Então, assista a este vídeo repetidamente e pratique em vários quadros. Então esse é um rapper para esta sessão. Então, nos vemos no próximo vídeo. Continuaremos explorando aspecto empolgante do Figma, então, feliz em projetar 63. Projeto do curso 10: design que se adapta: criando layouts responsivos na Figma: Vocês designers, criativos de arquivamento este projeto incrível para flexionar seus músculos de interface Você criará alguns botões e menus super legais que não serão inovadores, mas também chamativos Pense em expandir surpresas, ampliar a bondade e responder à magia Então, primeiro, você precisa criar esse botão, o botão de proteção A. Depois disso, você precisa criar a página do produto. Sei que esqueci e já peço desculpas por isso. Portanto, não entre no comentário e diga que você esqueceu os detalhes do produto Então, faça a página de detalhes do produto e crie a página de detalhes do produto. Depois, projetaremos essa barra de navegação móvel elástica Então, projete essa barra de navegação como se ela tivesse que se adaptar a telas como esta E depois disso, você precisa projetar esses carros pequenos para nossos produtos. E nisso, você tem que usar restrição, layout automático e Mr. Frames. E, no final, você precisa criar os incríveis cartões de ajuste automático Ok. Então, depois de concluir os projetos, você sabe o que fazer. Faça uma captura de tela e envie a seção procs. Você também pode enviar na rede social, você pode me marcar lá. Então, deixe-me te mostrar aqui. Mais uma vez, primeiro, você precisa criar esta página de detalhamento do produto depois botão Atoll, depois desses blocos Os ladrilhos de nossos produtos devem ser restrições reutilizáveis E então você deve projetar esses carros de ajuste automático. Tão pronto para fazer você marcar nessa palavra da interface do usuário, então vamos fazer isso. 64. Como fazer lindas sombras design da interface do usuário com o Figma: Ei, pessoal, bem-vindos de volta. Dia em que estamos mergulhando nas profundezas do mundo das sombras em Figma e também nos efeitos Não é uma sombra qualquer, mas a de mais legal da cidade, a sombra projetada e a sombra Bug, porque estamos prestes a explorar todo o seu potencial Então, vamos primeiro entender o que é a sombra projetada e a sombra interna. Então, como você pode ver, tenho dois exemplos na minha tela. A primeira é essa sombra projetada, e essa é o exemplo de sombra interna, assim como essa. Essa é a sombra projetada, e essa é a sombra superior interna imagine segurar uma carta na mão, a luz que a atinge cria uma área escura embaixo Então isso é uma sombra de corda. Agora, as sombras internas são como túneis, criando uma profundidade dentro objeto, como um botão ou uma página de cartão Como você pode ver aqui e aqui também, e aqui também. Ok, agora, vamos ver como criar botões usando sombra projetada e sombra interna. Como você pode ver, eu tenho esse design, e se eu clicar nele, como você pode ver, essa mágica acontece. Ele mudou para o modo claro para o modo escuro. E também tem cola. Então, criamos usando sombra projetada e sombra, então deixe-me fechar esta. E deixe-me primeiro contar como sombras projetadas funcionam nos botões. Ok, então criamos isso no botão c, então deixe-me rastreá-lo aqui e criar este. Não costumo usar o drop short porque gosto desses ícones de voo. Como você pode ver, isso realmente combina com nosso design. Mas se seu design exigir o ropshodo ou em uma sombra, ou se você quiser que o botão se destaque , você pode usar a E eu vou te dar um exemplo. Vou mostrar alguns exemplos em que você pode usar uma sombra projetada e uma sombra. Então, atualmente, isso não tem nenhum efeito. Então, basta clicar nele e ir ao painel de design e, no final, temos efeitos. Então, clique nesse botão de adição e, por padrão, chamamos de sombra projetada e, como você pode ver, ele adicionou um pouco de sombra projetada. Se eu desligar o olho, como você pode ver, há uma gota menor. E agora há uma sombra projetada. Esses são os valores padrão, mas agora podemos fixá-los de acordo com nossa necessidade. exemplo, digamos que atualmente a sombra projetada y é quatro, então se eu aumentá-la, como você pode ver, a posição Y está mudando, assim. E você também pode alterar x, assim. E você também pode espalhá-lo aqui e adicionar desfoque a ele Então é assim que você ajusta a sombra projetada, mas eu gosto dela assim. Por padrão, parece ótimo como este. E agora há uma coisa. Você pode mudar a cor da sombra. Atualmente, é preto. Você pode transformá-lo em correto ou em outra coisa, de sua preferência. Ok, vamos parecer amarelo e ainda azul. Então, como vemos, temos uma sombra sob esse túnel. Parece legal, azul e amarelo, combinando muito bem. Ok, então é assim que adicionamos sombra. Mas agora, digamos que eu queira adicionar uma sombra. Então, neste caso, o que eu posso fazer é primeiro deletar este. Porque eu não quero isso. Agora, vamos entrar em vigor. Temos quatro opções aqui no saco da camada de sombra e no desfoque do ensacador Então, neste caso, eu quero em uma sombra. Então, como você pode ver, entramos em uma sombra. Será útil quando, digamos que temos duas páginas como essa e as criamos um protótipo E se eu clicar nisso, ele se transformará em isso. Então, deixe-me mostrar um exemplo de como isso funciona. Eu criei esse. Este tem uma sombra projetada e este tem uma sombra interna. Agora, se eu for para prototipar e fluir, e clicar aqui Então, como você pode ver, isso cria esse efeito, estamos realmente pressionando o botão, e há um efeito que eu criei, como se eu arrastasse isso, ele cria aquela animação. Isso parece muito legal. É assim que a sombra interna funciona. Também podemos fazer a mesma coisa, como também podemos adicionar cores a ela. Atualmente em protótipo, vamos desenhar em uma sombra. Deixe-me transformá-lo em amarelo industrial. E deixe-me adicionar isso. Ok, deixe-me adicionar o golpe e mudar o X e o Y, assim. Eu sei que parece muito nojento, mas você pode adicioná-lo assim. Acho que adicionei demais. Ok, assim. Ok, isso é uma poção normal, e isso é enquanto pressiona o botão Espero que você entenda a sombra projetada e a sombra. Então, deixe-me dizer quando você pode usar sombra projetada. Por exemplo, se você quiser fazer seu botão aparecer , você pode usar sombra projetada. Isso dá ao botão uma vida útil clicável com uma sombra sutil Diz: Ei, estou aqui para pressionar. Então me pressione, e eu já mostro neste exemplo, como aqui, para onde foi. OK. Oh, aqui. Como você pode ver. Isso tem um drop shot, eu acho, M. Como você pode ver, este tem drop shader e este não tem drop shader. Mas, como você pode ver, a imagem que tem uma sombra projetada parece mais fria esta porque aparece neste cartão Você pode elevar seus carros a partir de elemento flutuante retangular plano com uma sombra projetada bem posicionada Então, ponto de bônus por jogar com um desfoque e espalhe. Então, neste caso, espero ter jogado com, como você pode ver. Eu adiciono quatro. Mas posso adicionar o quanto eu quiser de acordo com minha necessidade. Também posso usar sombras projetadas para adicionar conteúdo, como usar sombra projetada, que separará o objeto do dbro. Como você pode ver, nesse caso, ela está se separando por causa da sombra projetada e torna nosso design mais atraente Parece que não está coagulado. Ok, então há alguns exemplos de drop shot em uma sombra. Então eu tenho uma tarefa para você. Então, pause este vídeo e tente recriar esse efeito. Eu uso drop shot para isso, e uso in a short of para isso, o mesmo com este. Pause o vídeo e faça essas coisas. E eu vou te mostrar como criar isso. Então, experimente sozinho. Você saberá como soltar uma sombra e, em uma sombra, funciona. Depois disso, vou te mostrar como criar isso. Estou usando efeito de luz, pauso o vídeo e melhor Ok, espero que você tenha feito isso e espero aprenda a projetar sombras e, em uma sombra, funciona. Agora, deixe-me mostrar como criar esses botões. Como você pode ver, eu usei em uma sombra dentro dela em uma sombra. Deixe-me criar este. Deixe-me criar aqui. Vou usar retângulo. Retângulo pequeno, e vai ser totalmente arredondado assim E deixe-me tirar uma elipse. Deixe-me verificar a cor. Eu não quero esse. Eu quero esse, e você tem que ser azul. Azul azul Acho que se chama turco turco. Eu realmente errei ao nomear a cor. Então, atualmente, ele não tem sombras, então deixe-me adicionar a sombra interna Isso lhe dará profundidade. Com efeito, em uma sombra. Bf parece ótimo, então não vou acrescentar nada disso. Quero adicionar uma sombra projetada a esta. E vou adicionar um pouco de desfoque como este, assim como este. Sutil. Desfoque sutil. E agora vamos criar a mesma coisa aqui. Deixe-me copiar isso, arrastá-lo aqui e colocá-lo aqui assim, e eu vou mudar a cor. Então eu vou usar essa, e essa é e essa vai ser nossa cor neutro Ou podemos torná-lo branco. Ele também tem uma sombra interna e esta tem uma sombra projetada. Antes de fazermos isso, deixe-me mostrar como funciona. Vamos ao protótipo, e se eu clicar nesse botão, ele tem essa ação, e eu coloco uma animação inteligente, para que ela tenha esse efeito deslizante nela Então, deixe-me fluir. Como você diz, está funcionando, mas atualmente não está funcionando de outras maneiras. Então, deixe-me adicionar um efeito clicável nesse quadro também. Agora, se eu recortar isso, como você pode ver, os dois estão funcionando, mas não tem esse efeito baixo. Ah, sim. Então, vamos adicionar esse baixo efeito. Portanto , é muito simples. Basta ir ao painel de design e selecionar esta opção. Retângulo. Agora, vamos para o efeito mais a sombra projetada e vamos mudar um pouco a dispersão. Vamos adicionar, aumentar o desfoque, aumentar a propagação. Atualmente é preto, então não está visível, e deixe-me mudá-lo para branco assim. E vamos fazer um spread. Aumente assim, e vamos resolver o desfoque Então, como você pode ver, temos o desfoque. E se eu agora for para o protótipo e for o fluxo de fluxo, e se eu clicar nisso, como você pode ver, temos aquele efeito de brilho por Então foi assim que criamos esse clima sombrio e mais luz usando esses padrões. Como você pode ver, parece muito legal e é muito aditivo. Eu sei que há um aplicativo no Plast Nesse aplicativo, não há nada. Há apenas um botão. Você só precisa clicar neles e funciona. Acho que vi, provavelmente usei. Não sei por que, mas usei. É apenas um aplicativo e você só precisa pressionar um botão. Lembre-se de que esses efeitos são toques sutis que geralmente passam despercebidos Mas, quando bem feitos, eles contrabalançam o sinal telefônico à estética geral Evite exagerar. Se alguém notar seu drop shot, você provavelmente foi longe demais. Então, há alguns exemplos que eu quero mostrar a vocês como este. Então, como você pode ver, neste caso, eles usam drop shot e são muito sutis. Como você pode ver, usamos o mesmo efeito aqui. Esse é um conjunto normal e, quando pressionamos o botão, ele cria a sombra, que eles usam para a barra de sobretensão, bem como para a barra de carregamento, e para esse texto, bem como para essa barra de análise, bem como para a alternância Fizemos isso pequeno. Então, obrigado por se juntar a mim nessa exploração de sombras. Portanto, lembre-se de que as sombras são ferramentas poderosas. Nós os usamos com sabedoria. Para avaliar o design e torná-los realmente populares. Então, até a próxima vez para outra aventura da Figma. 65. Como criar desfoque de fundo e desfoque de camada no Figma: Por mestres reunidos ao redor. Hoje, estamos usando bordas nítidas para retocar sonhos com um desfoque de fundo e um desfoque de camada. Então, prepare-se para adicionar profundidade, foco e muita vibração artística ao seu design Imagine que você está apertando os olhos para a tela do telefone sob o sol Então é mais ou menos isso que o blur faz. É um elemento suavemente suavizado, criando um efeito nebuloso. Então, vamos entender o que é desfoque de fundo. Então, este será o nosso segundo projeto, Acc. Eu criei esse pequeno painel como o Sarge Bar Criamos esta bolsa Zinger com efeitos Acc In, usamos desfoque de pagod nela Então, neste construtor, vamos replicá-lo. Eu sei que não devemos entrar diretamente no projeto dois, mas eu tenho que cobrir o painel de efeitos, então vamos fazer isso neste vídeo. Então, vamos entender o que é bag blur e como ele funciona em nossa interface Pense nisso como um filtro de janela mágico. Seu conteúdo principal é nítido e claro, enquanto o ensacador se funde em um borrão sonhador Ele destaca a chave e os elementos. Isso faz com que a imagem ou o texto do nosso herói se destaque ao desfocar o fundo e atrair todos os olhos para a estrela do show Nesse caso, a estrela do show é o livro agora e os ícones de pesquisa. Quando você quiser criar um painel em um pôster de filme, adicione desfoque de volume. Isso adiciona um toque de drama e mistério. Também cria uma experiência imersiva. Isso faz com que nosso usuário sinta que está explorando um mundo virtual suavemente durante a borda da tela. Então, sabemos tudo sobre o desfoque de proibição. Então, agora vamos até Figma e criar um pouco de desfoque de celeiro. Então eu tenho isso para o quadro 45. Então, vamos inserir pixels e eu vou procurar montanhas. E tem um monte de fotos, mas essa é uma das minhas favoritas. Tem aquele efeito do nascer do sol nele. Então eu vou colocar esse H aqui. Feche o sol, adicione um gargalhão ou você também pode desenhar uma moldura Atualmente, o campo é de 100%. Você pode adicionar um tipo de efeito de fundo a esse byte diminuindo o campo Como você pode ver, acrescenta um blefe de liberdade condicional, não parece Então, atualmente, vou manter o preenchimento 100% e podemos entrar em vigor. E agora vamos usar bag on blur. Eu sei que não faz nada, mas agora temos que adicionar o campo. Tem que ser 50%. Em comparação com o arquivo, parece ótimo. E deixe-me adicionar algumas arredondadas. Ok, agora temos uma bolsa desfocada. Foi tão fácil. Agora podemos adicionar esse desfoque. Como você pode ver, não foi com a sensação. Não podemos ajustar esse tipo de desfoque com uma sensação. Parece incrível. Tem mais uma coisa. adicionar um efetor de gradiente. Parece muito legal. Deixe-me adicionar a cor verde. Vamos preencher. Atualmente, está na cor normal, escolha gradiente e obtemos esse efeito Como você pode ver, a peça é transparente, invisível. Eu posso criar assim. Deixe-me escolher essa cor para ser, vamos escolher rosa e vamos escolher essa. Traumático. Eu, isso parece ótimo. Ou há uma coisa que você também pode torná-la transparente. Atualmente, minha obesidade nesta seção, o verde 100%. Deixe-me fazer 50. Então você pode ver que parece mais estético agora. É assim que criamos o Brad Blur. E há uma coisa: você também pode adicionar um drop shot, para que ele apareça. Bata o retângulo Adicione e eu quero adicionar uma captura suspensa, então ele já adiciona uma foto suspensa, e podemos resolver isso se você quiser, vamos fazer com que os surtos aumentem E vamos continuar. Ok. Assim. Como você pode ver, parece mais legal. Depende totalmente do seu design. Se você quiser adicioná-lo, adicione-o ou você pode ignorá-lo totalmente Há mais uma coisa importante. Por exemplo, digamos que você tenha vários quadros. Sem moldura. Vamos imaginar que essa é a tela do iPad e você quer que a mesma coisa esteja aqui. Tipo, mas essa coisa está em outro design. Assim, você pode criar um estilo. Selecione até mesmo esse quadro. Vá para efeitos, clique aqui, um estilo, golpe PG. Você pode dar o nome que quiser. Estou chamando isso de BG Blow, crie um estilo, e eu quero que você fique bem, então eu tenho essa saga Eu vou escolher uma garota. Como você diz, acrescentou alegria. Então, como você pode ver, isso adicionou o desfoque, mas lembre-se de que você precisa diminuir o campo Então, atualmente, é 100%, então vou manter 50, mas deixe-me mudar a cor dessa moldura. Ok, então temos nosso estilo. Ok. Isso é tudo uma questão de fundo. Agora, vamos aprender sobre o desfoque da camada. Portanto, essa é uma das vantagens de adicionar o amarelo suave ao redor do objeto específico, como colocar uma luz suave em seu elemento de design Digamos que temos um botão como esse e queremos que esses cantos cercados ou as bordas sejam suaves. Então, nesse caso, podemos usá-lo. Também ajuda quando queremos distinguir elementos sobrepostos em nosso design, temos muitas camadas e, se usarmos o desfoque de camada, isso pode criar uma certa separação, isso pode criar uma certa separação mantendo essas coisas limpas e Também tinha uma profundidade sutil, para que nossos elementos ou formas parecessem mais texturizados e vivos. Então, como você pode ver, eu tenho essa moldura 46, e eu tenho um design muito legal, e eu criei isso usando o desfoque de camada Então, deixe-me contar como funciona o desfoque de camada. Eu vou escolher o retângulo. E deixe-me desenhá-lo aqui assim. Vou trocá-lo de rosa, rosa, por volta dos 30. Ok, agora vamos entrar em vigor. E desfoque de camada. Se eu aumentar o zoom, como você pode ver, as bordas ficam desfocadas Posso aumentar os plurins. Como você pode ver, ele derrete com nosso pagron e cria aquele efeito avelã Há algumas dicas que eu quero dar. Não vá a todo vapor. Comece com um desfoque baixo e aumente gradualmente até encontrar o ponto ideal, como neste caso Colors Matters: experimente as diferentes cores de desfoque para combinar com o tema do seu design Ok, agora você aprende tudo sobre o desfoque da bolsa, bem como sobre o desfoque da camada Portanto, há uma tarefa. É uma tarefa muito pequena e fácil. Então vá até Figma e tente recriar isso. Eu apliquei um sopro de camada nele, e o golpe de camada é muito 400 e tem três círculos. Esses dois círculos são unidos, e este tem um círculo normal, mas eu apliquei um gradiente nele, então fica assim Sim, então isso é tudo sobre esse design. Então, o que isso fará e tentará recriar isso. Eu também vou te mostrar como fazer isso. Então vá e faça isso. Eu vou te salvar em alguns minutos. Ok, estudantes, espero que tenham feito isso, bem, deixe-me decorá-lo novamente. Ok, esta vai ser minha moldura para sete e deixe-me adicionar as bordas 30. E você pode pular totalmente as bordas, mas com bordas arredondadas, fica muito legal Então eu vou escolher a cor para ser essa, e eu vou adicionar um círculo, lábios, eu vou desenhar os círculos. Mas primeiro, quero que essa cor seja essa. Isso não é laranja, mas é laranja. Agora vou duplicar dois círculos e este. Deixe-me entrar nisso. Você sabe como ganhar isso. Basta selecionar os dois e clicar nesse botão, e clicar nesse botão, ou você vai para O U e até mesmo para a seleção. Isso está aqui agora, então deixe-me girar 90 assim Agora vamos aos efeitos e escolha o desfoque de camada. Vamos com 400. Agora eu posso manter isso aqui. Agora eu posso escolher uma cor de gradiente. Eu posso simplesmente adicioná-lo aqui assim. Sim, é assim que criamos essa arte realmente incrível. Fa não é apenas uma ferramenta Y. Se você quiser usar isso como uma ferramenta gráfica e gráfica, você pode usá-lo totalmente. Eu sei que existem alguns erros. Parece muito bom e isso não parece muito bom. Mas eu precisava de algum tempo, mas eu preciso terminar esse vídeo muito rapidamente, então eu criei este. Ok, você também pode criar isso com estilo e, se quiser usá-lo em seu design, podemos reutilizá-lo repetidamente. Ok, então esses efeitos podem parecer simples, mas quando usados com cuidado, podem melhorar significativamente apelo visual de seus designs Portanto, lembre-se de que certamente é a chave, e cada efeito serve um propósito específico ao trazer seu design para o ar. Então, vá ao estádio para ver mais dicas e truques de design no próximo vídeo. 66. Projeto 11 Fiesta de efeitos funky: Olá, família Pigma, bem-vinda ao projeto número 11. Estamos mergulhando profundamente no maravilhoso mundo de sombras, borrões e aqueles botões macios e satisfatórios Portanto, há algumas etapas que você deve seguir. O primeiro passo é ler o livro didático e abraçar o parquinho. Para regras de design de stopi. Pense no projeto Pigma como seu playground. Não é um teste, a menos que os exorantes tenham pelos e façam algo realmente atraente Agora, a etapa número dois é selecionar um botão ou imagem ou até mesmo um texto. Agora imagine deixar cair uma fonte de luz acima dela. Aperte o botão de sombra projetada no Figma e hospede-o na tela Eu sei que você pode estar se sentindo chique, então você pode tentar em uma sombra a seguir Isso dá aquele efeito legal de três. Faça com que seu botão pareça curvo diretamente dessa tela. Etapa número três, b, decola. Quer destacar algo especial, selecionar um elemento e adicionar um desfoque de Tucholaer Isso cria um brilho sombrio e sonhador ao redor da borda, colocando os holofotes em seu E você também pode usar o efeito de desfoque de fundo. É como uma mágica. Seu conteúdo principal entra em primeiro plano, deixando o plano de fundo em beleza É um estado de sonho meio nebuloso, e o passo número quatro é mostrar e contar as horas Agora, vamos compartilhar sua obra-prima com o mundo. Faça uma captura de tela para capturar sua mágica de design, depois carregue-a na projeção e mostre suas habilidades E você quer espalhar um pouco mais o amor pela Figma Você pode fazer o upload disso nas redes sociais. E você também me leva. Lembre-se de que esse projeto divertido tem tudo a ver com diversão e experimentação Não tenham medo de ganhar crédito, ajustar coisas e aprender uns com os outros, compartilhar suas dicas e truques nos comentários, e vamos ver que design incrível você Então, eu vou te ver na próxima. 67. Como salvar seus arquivos Figma no desktop e como acessar o histórico do arquivo Figma: Bem-vindo pelos estudantes. Você já teve a sensação de que poderia perder seu mestre de design preciso Então, não hoje, estamos mergulhando no mundo do Figma file Save Muito bem, aprenda como salvar seu arquivo localmente. Acompanhe o histórico de versões de cada semana. Então, chega de decepções no design, basta pura paz de espírito Então, vamos começar com a forma de salvar seu arquivo localmente. Imagine que seu computador tenha um cofre sofisticado para seus arquivos Figma É esse tipo de salvamento local. Ele cria uma cópia do seu design sozinho. Dispositivo separado da nuvem. Basta pensar que isso pode nos dar acesso offline. Quando precisamos trabalhar em nosso design sem conexão com a Internet, use uma cópia local para resgatar Portanto, também reforça a felicidade. De alguma forma, o arquivo fica corrompido. Ele não será corrompido porque é um serviço em nuvem. Funciona na nuvem. Digamos que o Figma tenha uma falha ou algo parecido. Então, nesse caso, menor é a cópia local é septada. Então, vamos aprender como salvar nosso design localmente. E, como você pode ver, o painel de design é um pouco diferente porque atualmente estamos no histórico de versões, então deixe-me me livrar disso. Ok, então é simples. Basta acessar os arquivos. Estará aqui, o fiigmgo. Em que venderemos uma cópia local, clique nela e ela será baixada em média, como se tivéssemos sete quadros, ciclo de sete páginas E como você pode ver, nosso projeto é clicar em cortar uma virgem, e é uma pilha de figos. A extensão é a fig. Se eu clicar na venda e acessar a página do arquivo , como você pode ver , está aqui. E se chama Clicker Virgin one, e é uma extensão do FIC que você pode compartilhar diretamente com qualquer pessoa através do gmail, whatsapp, telegram, e depois disso, eles podem simplesmente abrir no Figma porque esse é o arquivo Figma porque esse Ok, então é assim que você pode economizar localmente. Agora, vamos aprender sobre o mundo do histórico de versões. L T do histórico de versões como uma máquina do tempo para seu design. Camada muito executada ou excluída acidentalmente. Então, volte no tempo e pegue a versão perfeita. Para o histórico de versões, podemos usar dois métodos. Como a primeira, você pode ir até aqui e ela mostrará que primeira opção é mostrar o histórico da versão. E neste painel de design, temos o histórico de versões. E você pode filtrá-lo, você pode adicionar um novo histórico de versões Com a versão gratuita do figma, temos 30 dias de histórico de E isso economiza toda a indústria periférica, mas você precisa pagar. Se você quiser acessar o arquivo antigo. Como você pode ver, está aqui, mas precisamos pagar por isso. E digamos, eu quero acessar o arquivo a partir de 10 de dezembro, 11, às 13:00 da manhã, se eu clicar aqui. Como você pode ver naquele dia, acabei de criar essas páginas no aplicativo Click Card e cinco, não se preocupe. Não perdemos nosso design. Se eu clicar no turn, ele trará de volta nossa versão atual, como você pode ver aqui. Então, vamos para a indústria de organizações. E tem mais uma coisa. Você pode nomear sua história virgem. Eu sei que essa é uma parte muito legal, e essa é uma prática muito boa de se ter. Mas o problema comigo é que eu trabalho sozinho, então eu não digo o nome. Então eu me lembro de tudo. E eu não preciso entrar na história das virgens. Digamos que você esteja trabalhando com sua equipe e, se o New Joini cometer alguns erros , você pode simplesmente acessar qualquer história virgem e fazer backup de seu design antigo Então, isso é tudo. E tem mais uma coisa. Ok, digamos que eu queira duplicar esse arquivo de 19 de dezembro Posso clicar na duplicata e ela abrirá o arquivo aqui. Deixe-me mostrar como isso funciona. Digamos que eu queira abrir isso em 19 de dezembro, projetamos isso se eu clicar nele e se eu clicar em duplicar, ele duplicará o arquivo e abrirá separadamente, assim como O aqui em casa E se 1719, fizemos essas coisas como uma página de produto de design, e aprenderemos sobre como criar botão usando o Auto Yes, fizemos isso naquele dia. Ok. Se eu for para casa, como você pode ver, esta é a cópia. Mostra que esta é a cópia deste design principal. A menos que você queira restaurar seu design. Então, atualmente estamos em 1919. E se você quiser restaurar esse design, se clicar nele, tudo o que você criou partir desses dois itens será excluído Então, ao pressionar esse botão, você pode copiar o link e definir como qualquer pessoa. Então, isso é básico. Ok, deixe-me fechar este porque precisamos disso, e eu vou terminar, e eu quero minha versão atual. Então essa vai ser minha versão atual. Deixe-me mostrar como eu estrago tudo por aqui. Como você pode ver, minha bagunça ao criar o aplicativo. Eu sempre faço isso. Ao criar um novo projeto, eu sempre acho que desta vez, eu não vou errar, mas toda vez eu erro assim Ok, então há alguns pontos que você precisa lembrar. economia local não substitui a economia na nuvem, mas é um ótimo aluguel seguro adicional. histórico da Virgin mantém apenas um número limitado de versões anteriores, portanto, salve com sabedoria e o compartilhamento de arquivos locais requer enviá-los manualmente, arquivos locais requer enviá-los manualmente ao contrário do Cloud, esse design Ok, agora, vamos aprender em que caso precisaremos do histórico de versões. Digamos que você excluiu acidentalmente um componente crucial ou um design de longarina de seção inteira, vamos excluir ergomnupage Então, nessa versão, ele ainda permite que você volte no tempo e o restaure, salvando você do nosso trabalho. Eu sei que às vezes tomamos decisões de design, você se arrepende de ter escolhido a cor errada ou a forma errada. Portanto, não se preocupe, basta voltar para as versões anteriores, para que, onde estava, continue perfeito Por causa da virgindade, podemos experimentar com confiança, assim como podemos experimentar novas ideias ousadas ou experimentar um layout diferente sem medo de perder seu trabalho original Se as coisas voltarem para uma versão estável e começarem do zero. Jogue com estilos visuais diferentes ou experimente diferentes elementos de design. Sem se preocupar em atrapalhar seu processo, história virgem dá a você a liberdade explorar e iterar Por causa da história da virgem, podemos colaborar muito bem Ele pode rastrear as alterações feitas por vários membros da equipe e facilmente reverter para a versão anterior se alguém acidentalmente escrever um trabalho importante Compare diferentes iterações de design e discuta qual delas funciona melhor, mesmo que tenham sido criadas com dias ou semanas de diferença Também resolve conflitos ou mal-entendidos analisando quem fez quais alterações e ao garantir uma compreensão clara da localização do projeto Então, isso é tudo sobre arquivos locais e também sobre o histórico virgem. Espero que você aprenda isso e não pratique como eu. Por favor, salve você como uma história virgem, e nomeie, por favor, dê um nome. Eu sei que esse é o meu estilo, mas não copie meu estilo, e eu não estou ocioso na história das virgens Portanto, renomeie-o como se você aprendesse hoje o que aprendemos hoje. Eu esqueci Ok, aprendemos sobre sombras e sombras projetadas nas sombras Também fizemos esses botões. Você pode criar uma história de versão chamada efeitos. Aprenderemos os efeitos. Então aí temos amigos, arquivos Pigma subscritos Agora vamos seguir em frente e projetar com confiança. 68. Componentes da Figma O básico: Bem-vindos de volta, estudantes, desta vez, estamos mergulhando no poderoso mundo dos componentes do Figma Portanto, os componentes são elementos reutilizáveis que trazem uma série de benefícios, tornando-os uma parte essencial design e do fluxo de trabalho da Figma Então, como você pode ver, minha interface ficou um pouco mais limpa porque eu despejei tudo aqui Sabe, sempre temos esse tipo de quarto. Sempre temos coisas desnecessárias nisso, então eu fiz desse lugar um quarto desnecessário e despejei tudo aqui OK. Agora, vamos começar com o design e criar alguns componentes. Então, como você pode ver, temos esse botão chamado Adicionar ao carrinho. Atualmente, vamos adicionar um componente a isso. Para criar o componente f, basta selecionar o item. Atualmente, estou escolhendo o botão. E basta clicar nesse botão. Isso é criar componente, e você pode usar atalho Control Alt K para criar o componente Então, como você pode ver, agora é um componente. Então, como você pode diferenciar o componente ou não, como você pode ver no painel de design, cortamos esse logotipo. Ao lado da fran impressa, há quatro diamantes. Então, como você pode ver, a cor da moldura também muda se eu clicar nela, como você pode ver, é azul, mas a cor do componente é sempre roxa. Uma vantagem significativa dos componentes é a reutilização Quando vou para um painel de ácido como este, como você pode ver na entrada, tenho esse botão de ação como um componente Posso arrastar isso facilmente para qualquer lugar do meu design dessa forma. E qualquer alteração que eu fizer no componente principal será refletida em todas as instâncias. No nosso caso, esse é o componente principal e esses são os filhos. Também é chamado de instante. Então, se eu fizer alguma alteração, digamos que, se eu redimensionar, ela também será redimensionada em todas as páginas Se eu mudar o ponto, também funcionará com isso. Como você pode ver, eu fiz 14, e em todos os lugares, agora são 14. OK. Agora, digamos que eu queira fazer algumas mudanças aqui. O texto deve estar como, digamos, agora, e isso deve ser um pagamento. Então, como você pode ver, se eu fizer alguma alteração nos componentes infantis, os componentes principais permanecerão como estão. Isso não muda. Digamos que se eu fizer alterações no componente principal no pad dessa forma. Somente o componente que eu não editei foi alterado, e outro componente que eu sobrescrevi anteriormente, eles permanecem os mesmos. Então, deixe-me fazer isso. Como você organiza, diferencia seu componente principal e o instante é que, quando eu vou para o painel de camadas e você seleciona a instância, como você pode ver, ela vem com um diamante, e isso vem com um Como você pode ver, tem um diamante. Digamos que o design seja muito grande e você não saiba qual é o seu componente principal. Então, você quer ir ao seu componente mestre para fazer algumas alterações, como se você quiser redimensioná-lo Então, nesse caso, digamos que, atualmente, você esteja nesta página e na página de pagamento e queira apenas acessar o componente Master. Você pode simplesmente clicar com o botão direito do mouse e selecionar ir para o componente principal e ir para o componente principal Como você pode ver, vá até o componente principal que está aqui na página do protetor. E você também pode nomear seu componente. Sei que não mencionei nada, mas é uma boa prática nomear seu componente, especialmente quando você está lidando com várias instâncias. Ele ajuda você a identificar rapidamente diferentes versões ou variações de seus componentes. E os componentes não se limitam a elementos simples, como botões. Você pode transformar projetos complexos em componentes. Por exemplo, você pode transformar seu logotipo em componente, para que você possa transformar esse logotipo em componente, bem como os cartões em componentes. Você pode criar qualquer coisa em um componente, como essa barra de navegação em componente. E tem uma coisa. Digamos que fizemos algumas mudanças, como a mudança de cor, deixe-me transformá-la em gradiente. Se eu transformar isso em gradiente, e por algum motivo, eu não gosto, só quero redefinir tudo Nesse caso, você pode fazer uso de apenas selecionar item e o botão direito e clicar em redefinir tudo. Ele redefinirá tudo, como mensagens de texto telefônicas e o botão opio colorido Em termos simples, as instâncias são criadas duplicando o componente mestre, transformando-as em cópias convencionais com a criação de componentes mestres adicionais Compreender e aproveitar os componentes é fundamental para maximizar os recursos do projeto principal Assim, à medida que você se acostumar com esse fluxo de trabalho, você se verá criando mão de obra com elementos reutilizáveis que Então, estudantes, tudo gira em torno dos componentes. Na próxima maneira, aprenderemos mais coisas sobre componentes. Portanto, há muitas coisas em que você pode criar componentes variados, assim como criar variantes. Você pode transformá-los no modo escuro ou no modo claro. Você pode criar um botão específico no painel de design para alterar sua cor de acordo com sua necessidade Então, estudantes, tudo gira em torno de componentes. E vejo vocês na próxima. 69. Atualizar, alterar, editar e redefinir componentes no Figma: Todos, dessa forma, estamos investigando a complexidade de atualizar, alterar, redefinir e transferir gravações para componentes e suportes para componentes e Além disso, eu tenho um atalho bacana para alternar entre mais claro e mais escuro, então Então, eu aprendi anteriormente sobre como criar componentes. Item seletivo, vamos até este Mnuva e basta clicar no E no painel Act, temos nosso componente, e podemos simplesmente arrastá-lo e usá-lo como instâncias como essa. Agora, vamos explorar como atualizar instâncias. Se você quiser fazer alterações em instâncias específicas, você pode encontrar o componente mestre selecionando desta forma e você pode ir para o componente principal, e este é o componente principal, e você pode fazer um ajuste que será refletido nessas instâncias. Mas e se você tiver feito uma alteração diretamente nas instâncias e quiser enviar essas alterações de volta para o mestre Então, agora, você pode selecionar instâncias como esta. Mas o que eu quero fazer é que, nesse caso, digamos que nosso cliente queira que a página da minha conta fique no modo escuro. Então, vou mudar isso para o modo de conversação como este. Como você pode ver, a barra de navegação não é tão visível. É visível, mas a cor é escura e eu quero que seja branco. Então, vou escolher uma luta como essa, mas os ícones não estão visíveis. Então, eu quero mudá-lo para preto. Estou segurando a tecla Shift, seleciono todos os ícones, a cor da seleção e a tag. Agora, quero atualizar todas as coisas que essa barra de navegação tem, como o painel branco e o botão é uma tag. Então, eu quero toda a atualização neste componente principal. Então, neste caso, o que eu posso fazer é simplesmente me deitar sobre ele e ir para o componente principal e enviar alterações para o componente principal. E como você pode ver no componente principal, esse é o componente principal, altere tudo, a cor do painel e a cor do ícone. Por enquanto, não quero que meu componente principal seja esse, então vou desfazer isso por enquanto Digamos que você recebeu uma ligação de um cliente e o cliente disse: Eu não quero essa cor. Eu quero que a cor seja escura. Portanto, nesse caso, o que você pode fazer é simplesmente selecionar o componente diretamente nele e redefinir todas as alterações. Como você pode ver, transforme todas as coisas em um componente principal como este. Ok, então eu quero te mostrar uma coisa aqui, então deixe-me fazer outra cópia da minha conta. Então essa é a instância e essa também é instantânea. Mas eu vou deletar esse. E eu quero que essa parte seja um modo claro porque essa é a cor escura e a cor escura não combina com essa, então eu quero transformar isso em um modo claro como este, e vou mudar tudo para preto assim. Atualmente, eu quero anexar isso, seja, de attach, de attach instance. Agora é uma nova moldura. Não é um componente ou instância. Eu quero criar isso em um componente. Ao mesmo tempo, quero criar esse formulário como um componente dois. Ao mesmo tempo, podemos criar várias coisas em componentes. Vamos selecionar os dois e, se eu for até os componentes, teremos a opção chamada criar vários componentes. E agora, se eu for atuar como painel. Então, como você pode ver, temos vários componentes. O primeiro é o modo claro e, em breve, o modo escuro. Isso economiza tempo real, especialmente quando você está lidando com elementos de design semelhantes. E isso o ajudará quando você quiser trocar o mesmo elemento em elementos diferentes. Atualmente, esses são os componentes principais, então não funcionará com isso. Digamos que eu tenha outra moldura como essa e eu queira mudar isso para essa. Então, neste caso, o que eu posso fazer é segurar t e arrastar isso para este nodo escuro Naba Se eu o descartar assim, desde que veja que mudou, posso fazer a mesma coisa com este Estou segurando e arrastando para este componente e despejando-o no Mas se eu tentar fazer isso em nosso componente principal, não funcionará. Estará nessa nioba. Não trocará o lugar, como aconteceu com as instâncias Então, deixe-me mostrar de uma forma simples. Então, digamos que temos essa instância aqui, e nosso cliente quer que isso fique mais escuro. Nesse caso, podemos segurar Alt e escolher mais o escuro, arrastá-lo com a perna direita e simplesmente despejá-lo Como você pode ver, é trocado por essa escuridão. E lembre-se de que ele não funciona nos componentes principais. Esses são os componentes principais, então não funcionará. E essas são as instâncias, então funcionará nelas. E você também pode alterá-lo no painel de design. Então, se você clicar em suas instâncias dessa forma e quiser mudar isso para o modo claro. Você pode ver que o menu aparece como o quadro 49, e podemos alterá-lo para o modo de luz como este. Então, ele mostrará todos os ativos. Portanto, atualmente estamos na minha conta e também temos a opção de detalhes do produto. Também podemos trocar isso. E o mesmo com este, digamos que esta seja a instância, e eu quero trocar isso com isso para que eu possa simplesmente segurá-la, arrastá-la e despejá-la Como você pode ver, ele também funciona com um botão para cortar. Então, estudante, espero que você entenda como redefinir componentes, como atualizá-los, como substituí-los, bem como o que aprendemos como trocá-los Então, esse é um invólucro para nossa explicação sobre atualização e gerenciamento de componentes no Então, indique motivos e truques no próximo vídeo. 70. Excluir componentes principais na figma é impossível (dicas e truques de componentes): Bem-vindos de volta, pessoal. Nesta proposta, aprenderemos sobre truques e dicas de componentes. Então, truques como restaurar nossos componentes excluídos, como podemos importar ou exportar componentes principais de outros arquivos de design para nosso arquivo de design principal, além de outras coisas. Então, vamos começar. Em primeiro lugar, mostrarei o que acontece quando você tenta excluir seu componente mestre. Então, como você pode ver, esse é o componente principal do nosso design. Também está em camadas, como você pode ver, os quatro diamantes, que é um componente principal, e essa é a instância Então, digamos que, de alguma forma, eu excluí meu componente mestre. Então, digamos que eu estava projetando algo e não sei, esse é o componente principal ou essa é a instância. Como você pode ver, se estamos em um quadro, não há diferença na instância e no componente mestre. Mas se eu rastrear isso lá fora, como você pode ver, está escrito aqui, também podemos ver o símbolo. Portanto, não é visível no quadro. Então, digamos que eu suponha que essa seja a instância. E se eu excluir este, como você pode ver, ele também será excluído do painel de camadas. Mas agora eu quero trazer isso de volta. Nesse caso, precisamos ter a instância. Então, com a ajuda, por exemplo, podemos restaurar isso. Então, basta clicar com o botão direito do mouse e você pode ir para o componente principal e restaurar o componente principal. Clique aqui, como você pode ver, nosso componente está de volta. O componente principal está de volta e também está aqui em menos painel. Agora vamos considerar a fonte da instância de outro arquivo de design, talvez da comunidade Figma Agora, digamos que você trouxe uma instância em vez de um componente. Então, se eu colar esse componente aqui, desculpe, instantâneo. E se eu não souber de onde importei essa instância. Então, eu quero voltar para esse arquivo. Então, neste caso, o que eu posso fazer é clicar nele e clicar nele e ir para o componente principal. E ele realmente abrirá esse arquivo e mostrará de onde você tirou esse componente. Então, como você pode ver, está destacando a partir disso que você tem essa instância Agora vamos passar para o terceiro. Agora, digamos que temos esse arquivo de ícone, e se eu for editar objetos mais como neste, e fizer alterações, como você pode ver, isso também acontece com a instância. Mas deixe-me sair do objeto para saber mais. Deixe-me copiar a instância desta cópia, e se eu colar aqui no meu arquivo de design do aplicativo Click Cut, e se eu alterá-la para o componente principal, se eu mudar algo assim, como você pode ver, isso está acontecendo com esse arquivo. Mas se eu abrir meu aplicativo de cartão cli, ele não está aqui, então não é atualizado Portanto, as alterações só estão disponíveis no arquivo principal. Portanto, se estivermos usando a biblioteca, nesse caso, ela fará alterações, mas atualmente estamos importando de outros arquivos desse arquivo para esse arquivo Portanto, não está sendo atualizado aqui. Agora, vamos abordar o conceito que componentes ou partes deles não podem ser excluídos. Quando você exclui algo em uma instância, como ocultar uma camada, ele não desaparece completamente Ela simplesmente fica oculta. Então, deixe-me mostrar como isso funciona. Então criamos esse botão de navegação e, como você pode ver, essa é a instância, e esse é o componente principal, e se eu excluir algo da instância, como você pode ver no painel de camadas, ele não será excluído. Está escondido. Basta clicar nele e ele ficará visível novamente. Eu posso fazer isso assim aqui. Mas se você quiser removê-lo permanentemente, precisará acessar o componente principal e excluí-lo Então, se eu deletasse aqui. Então você pode vê-lo totalmente excluído agora, e também não está escondido aqui. Então, deixe-me desfazer isso Então, esses foram todos os truques e dicas sobre os componentes. Espero que isso esclareça por que componentes principais e suas partes não podem ser facilmente dilatados no E entender essas nuances ajudará você a navegar pelo mundo dos componentes com mais eficiência. Então, deixe para o próximo vídeo, onde nos aprofundaremos no ativo mais interessante dos componentes Figma. Feliz design. 71. Mover os componentes principais e como organizar seus componentes: Bem-vindo, designer Max, hoje discutiremos as melhores práticas para componentes principais organizados no Figma Então, atualmente, podemos usá-los em todos os lugares, mas há uma maneira mais organizada de gerenciá-los, e vou mostrar minhas melhores práticas, que são amplamente adotadas por muitos designers Então, em seu painel de ácido, você pode ter um componente local como este, minha conta a partir deste botão bem como esta barra de navegação inferior, e também algum componente como esse espalhado em um espaço vazio, e algum componente pode estar no quadro como este. Portanto, a chave aqui é deixar o componente principal na própria página. Criaremos componentes separados na página quatro e usaremos uma instância como esta, use instance em nosso arquivo de design. Então, primeiro, vou criar alguns componentes. Atualmente, temos alguns cartões, bem como a barra de navegação superior barra de navegação inferior. Então, atualmente, eu não dei esse nome a eles, então eles são apenas uma moldura. Então, deixe-me nomeá-los. Então, como você pode ver, este é o quadro 31, então eu vou nomeá-los Ok, então eu nomeei alguns componentes como este. Eu nomeei esse logotipo, mas essa é a moldura agora. Também nomeei esta, as cartas pequenas, assim como esta, as cartas grandes, bem como este botão Atovd. E eu chamo esse botão tov, e esta é a barra inferior sem barra, e esta é a barra de navegação superior Porque queremos usar nosso componente principal fora do quadro e queremos usar o instantâneo em um quadro. Deixe-me te mostrar assim. Esse é o exemplo, e esse é o guaxinim principal, então vamos testá-lo. Manteremos isso aqui sempre que precisarmos desse componente, para que possamos usá-lo como uma instância instantânea como essa. Deixe-me convertê-los em componentes. Você também faz parte. Você também é um componente. Você também é componente. Ok, então eu fiz um componente no Hampitch, eu tenho esses quatro componentes no tom de introdução, eu tenho esse logotipo, assim como temos Agora, vamos ao painel de camadas. E vamos clicar nesse ícone de adição. Vou nomeá-los componentes. E podemos simplesmente movê-los daqui. Como se esse fosse o componente. Agora vamos mover nosso componente principal para essa seção de componentes. Então, atualmente está vazio, e este é o nosso botão de navegação. Botão de navegação superior, vamos para os componentes. Se eu for até os componentes, como você pode ver, onde está, acho que está tudo bem, está aqui, quadro 48. E vamos mover todos eles. Mas primeiro, tenho que separar meu componente principal dos quadros dessa forma Ok, deixe-me trazer isso à tona também, e deixe-me trazer a instância. O mesmo com este. Então, por exemplo, eu trouxe três componentes. Então, vamos selecionar todos eles. Assim, você pode pressionar Shift, segurar Shift, selecionar todos eles, clicar com o botão direito e clicar no tom discutível e nos componentes Agora, temos todos os componentes aqui. Você também pode organizar de uma maneira boa, como a única seção para botões ou a única seção para barras de soneca, única seção para carros Deixe-me mostrar como nesta página, como você pode ver, eles se organizam de forma muito bonita. O primeiro, eles têm barra de status, iPhone P max. Depois disso, eles têm o iPhone pro somente depois de terem o iPhone Pit plus. Então, eles se organizam de uma maneira muito boa. E, como você pode ver, nossa organização. Portanto, não temos muitos componentes. Estou apenas mostrando como é uma boa prática mover componentes para a página de componentes e depois usá-los como uma instância. Então, digamos que eu queira adicionar o botão Adicionar ao cartão aqui. Então, nesse caso, posso simplesmente ir ao painel de ativos e pesquisar o botão Adicionar ao cartão e arrastá-lo assim. Posso abordar isso aqui no meu design. Ok, então essa é uma prática muito boa. Como você pode ver, nosso painel de design parece mais limpo e organizado. E se eu for aos componentes, como você pode ver, nossos componentes principais também estão muito bem organizados. Portanto, isso é muito melhor do que ter a página espalhada por várias páginas. Portanto, se você tiver várias páginas no arquivo, é uma boa ideia manter uma página central para todos os componentes principais, como este. Dessa forma, eles são facilmente acessíveis e não atrapalharão seu design E lembre-se de que você pode usar a funcionalidade de pesquisa para encontrar componentes rapidamente, como fizemos anteriormente com o botão de adicionar para recortar, ou se você quiser pesquisar o logotipo, podemos simplesmente digitar o logotipo e ele nos mostrará o logotipo, e podemos simplesmente arrastá-lo e adicioná-lo em nossos designs. Isso é especialmente útil se você preferir um estilo organizado mais descontraído E há outra dica que é usar uma barra de espaço em uma barra de pesquisa para listar todos os componentes. Então, deixe-me mostrar como isso funciona. Então, como você pode ver na barra de pesquisa, não temos nada. Então, se eu digitar espaço, como você pode ver, todos os componentes ficam marcados assim, e podemos simplesmente arrastá-los Eu sei que essa é uma maneira não oficial fazer isso, mas é muito fácil Como você pode ver, temos todos os nossos componentes e podemos vê-los e podemos simplesmente rastreá-los dessa forma e usá-los em nossos projetos. Isso pode nos ajudar a ver todos os nossos componentes de uma só vez com a necessidade de molduras, sem a necessidade das molduras. Portanto, lembre-se de que, à medida que seu projeto cresce, e especialmente se você estiver colaborando com outras pessoas, manter uma estrutura organizadora para seus componentes principais se torna crucial Portanto, se você prefere uma página bem organizada ou realmente uma funcionalidade de pesquisa, encontre o método que funcione melhor para Espero que este vídeo sobre componentes principais organizados tenha sido útil. Então, estádio para mais truques e dicas como essa. Então, esses são todos os truques e dicas para organizar nosso arquivo de projeto e nossos componentes em um arquivo separado. Então, isso é tudo sobre componentes. Como se os organizássemos. Fizemos um teste separado para isso. Também aprendemos o truque e as dicas para isso. Então, tudo gira em torno de componentes. Então, vamos apoiar, e vejo vocês na próxima. 72. Práticas recomendadas da Figma Camadas de nomes e permaneça organizado: Designer de TV. Com isso, estamos mergulhando no mundo da convenção de nomenclatura Especificamente, o uso do Hardware slash no Figma. Você provavelmente já percebeu a convenção está sendo usada e, hoje, exploraremos por que ela é essencial e como ela pode ajudá-lo a organizar seus componentes de forma eficaz. Algumas pessoas podem ter visto e outras não, então deixe-me mostrar como a convenção de nomenclatura funciona no painel ácido ou para o componente Como você pode ver, temos essa linha dinâmica da Barra de Status aberta , e se eu a estender assim. Como você pode ver, tem barra de status barra iPhone 13 slash P. E se eu for para o painel de ativos e, como você pode ver, se eu for para status e Início, o ícone é diferente Eles usam flash para isso, eles têm a barra de status inicial após esse status B e H Ba slash ba slash phon Então, eles estão nos dizendo que este é para o telefone 13, e como eles têm o componente principal, temos mini, depois P e P máx. Então, vamos fazer a mesma coisa para organizar nossos componentes. Então, se eu for aos componentes, como você pode ver, criei esse botão de toque Mo. Deixe-me deletar isso primeiro, porque vamos aprender como criar esse trocadilho. Vamos ao painel de atuação. E, como você pode ver , é desorganizado. Está desordenado em todos os lugares e não temos vários botões Como você pode ver, temos essa barra inferior e digamos que também estamos projetando uma barra de navegação no modo claro. Então, atualmente, essa é a instância, então eu vou desanexá-la. D anexar instância, e eu vou nomear essa barra de navegação como barra de barra, você tem que estar no modo escuro, e este tem que ser mais claro Essa é a luz, essa é a escuridão. Então, não veremos nada alterado no painel do Act porque não o transformamos em um componente. Então, deixe-me selecionar este e vamos criar um componente. E agora, se eu for aos componentes. Então, como você pode ver, primeiro chegamos a Nava, o modo claro Desculpe, o primeiro é mais escuro e o segundo é o modo claro. Eu sei se você está confuso porque a cor é diferente, então deixe-me escolher uma neutra. Ok, agora ele está atualizado. Como você pode ver, este é o que usaremos para modo escuro e este usaremos para o modo claro. Então, podemos fazer o mesmo com essas coisas. Então, deixe-me escolher a segunda cor para ele. Eu vou com o vermelho . Ok, parece legal. Ok, primeiro, eu tenho que desconectá-lo. Então deixe-me dar um nome. Corte para o modo escuro, e este deve estar no modo claro Ok, agora isso é apenas uma moldura. Deixe-me transformá-lo em componente. Agora, se eu puder acessar os componentes, e houver um botão para cortar, e se eu clicar nele, como você pode ver, temos dois botões. O primeiro é o modo escuro e o segundo é o modo claro. Ok, deixe-me mostrar um exemplo. Adicionamos esses ícones de Basileia. Se eu for ao painel de ativos, como você pode ver, eles também nomeiam seus ícones assim. Primeiro, eles têm um esboço. Depois disso, eles têm novamente esboço e depois as marcas Se eu for até aqui, como você pode ver, todos os ícones de marcas estão presentes aqui. Então, se alguém importar esse arquivo para seu design, saberá que este é para marcas, e esta seção é para ícones gerais, como ícones gerais, e esta é para navegações como esta Essa convenção de nomenclatura se torna ainda mais crucial quando você está lidando com variáveis O que será explorado nos próximos vídeos. Em resumo, a convenção de nomenclatura de quatro barras no FIMMA é uma ferramenta poderosa Ele ajuda a criar uma estrutura rica, facilitando a navegação e a localização dos componentes necessários para você e sua colaboração . Então, indique para o próximo vídeo, onde vamos relacionar as variáveis até lá, feliz design. 73. Projeto 12: Blocos de construção: como dominar componentes no Figma: Meus alunos, é hora do projeto. Ok, então até lá, aprenderemos muito sobre componentes, como criar componentes, como adicioná-los em páginas separadas, como organizá-los no modo claro e no escuro. Então, primeiro, vamos criar um espaço de estilo para nossa criação de botões. Então entregue a Figma, nova página da marca Wiper chamada componentes É o nosso botão HQ. Sem botão HQ, mas vamos colocar todos os componentes aqui e organizá-los. Agora, em segundo lugar, é hora de liberar esses superpoderes de design, criar e adicionar botões de corte, e então você pode transformá-los no modo escuro ou no modo claro como Ok, então esses botões são uma dupla dinâmica. Então, vamos mantê-los juntos usando a barra frontal. Nomeando conson neste painel de ativos. Dessa forma, eles estarão sempre prontos para uma festa assim. E agora, depois de concluir sua tarefa, capture a captura de tela e envie para o nosso painel de projetos E você também pode criar dois botões, assim como esta, versão menor deles. Então, já adicionamos o layout automático. Então deixe-me copiar isso. Ok, então eu tenho que desanexá-lo primeiro. Ok, D anexe. Deixe-me renomear este pequeno botão de luz do carrinho para Slash e Pequeno e, novamente, nossa barra. Fimo, sabemos que esse é o menor e deixe-me criar outro como esse, e eu vou fazer isso Isso é claro, esse vai ficar escuro. Agora, vamos mudar a cor. Atualmente, tem azul. Então deixe-me torná-lo vermelho. Agora, vamos criar um componente. Ok, então eu tenho que nomeá-lo assim. Atualmente, é botão no botão frio. Depois disso, adicionei mais luz, mas não preciso adicionar mais luz, então posso simplesmente adicionar um pouco e ela tem que ser leve. OK. Se eu clicar no espaço vazio, como você pode ver, ele será adicionado no botão Adicionar ao Corte. Agora sabemos que esse é o modo escuro, esse é o molde claro e esse é o modo claro, e podemos fazer a mesma coisa aqui. Então eu vou fazer assim. Mais pequeno e escuro. Então, vamos clicar no espaço vazio. Ok, então ele não o adicionou porque é um quadro, então deixe-me criá-lo como componente. Ok, agora está adicionado, o pequeno modo escuro. Ok, então essas são as instruções que você precisa seguir para criar. Então, primeiro, crie um componente e, em seguida, mova seu componente para esse tom de componente dessa forma e agora crie um mais escuro e um mais claro como esse. E agora também vimos como criar uma versão menor deles tirar uma foto do pecado e enviá-la para nossa precisão. Então esse é o Figma fantástico. Você acabou de dominar a arte de criar elementos clicáveis para impulsionar a Se você puder experimentar com eles, poderá adicionar cores diferentes, adicionar fontes diferentes. Então, escolha totalmente criativa. Então, isso é para este projeto. Então, siga esta instrução e submeta-se a mim. Então, por. 74. Componentes e variantes do Figma para iniciantes: Designers, acreditando nisso, vamos explorar o conceito de variáveis na Figma Variáveis ou variantes, como a Figma agora as chama. Nossa maneira de combinar vários componentes em uma única unidade, facilitando o gerenciamento uma troca entre diferentes status ou estilos. Então, como você pode ver , essa janela apareceu na minha tela, e se eu passar o mouse sobre ela, como você pode ver, ela muda para essa cor de lona e se eu clicar nela, ela fica vermelha Então, nesse caso, vamos fazer isso usando variantes ou variáveis. Ok, então deixe-me fechar isso. Deixe-me ir ao design. Então, essas são as variantes. Agora, vamos aprender como criar componentes. Então, deixe-me excluí-los primeiro. OK. Então, como você pode ver, eu tenho esse botão de corte de anúncio. Atualmente, é uma instância. Então, como você pode ver, é instantâneo ele tem aquele botão de diamante. Mas é oco e este é um componente porque tem quatro diamantes dentro dele Ok, então eu quero que isso seja um componente, não uma instância. Se você quiser criar uma variante, ela precisa ser um componente. Então, deixe-me anexá-lo primeiro, anexe uma instância. OK. Agora é uma moldura. A moldura é adicionar corte. O nome do botão está em cut. Se eu selecionar isso, podemos usar o atalho Control K, e também podemos usar esse botão Agora, é uma variante. Desculpe, é um componente. Ok, então se eu for ao painel, este painel. Então, como você pode ver, esse é o componente agora. Então, eu quero criar uma variante. Então, vou rastrear isso como um exemplo, e vou desanexá-lo novamente e transformar a cor em azul escuro. Acho que também é chamado de cauda azul. Eu realmente me confundo com cores. Então, se você conhece a cor, por favor me avise. Ok, então temos dois botões, mas esse é o componente e esse é o quadro. Então, deixe-me converter isso em componente. Você é componente. OK. Agora, se eu moldar os dois, como você pode ver nos painéis de design, temos a opção de combinar como uma Então, se eu clicar nisso, agora se tornou uma variante. Também é indicado pelas linhas pontilhadas, a pontilhada Agora, se eu for aos ativos, como você pode ver, temos esse botão de adicionar ao cartão, e há um número dois, incluindo duas variantes. E se eu arrastar isso até aqui nesta seção de categorias, admita que esteja aqui desta forma. E se eu for ao painel de design, como você pode ver no botão adicionar ao corte, essa é a variante. Esse símbolo significa variante. E a propriedade nasce atualmente. Podemos renomeá-lo e atualmente é padrão porque renomeamos isso, eu acho Então, deixe-me renomeá-lo, então vou para o ativo porque ambos são padrão É por isso que não está funcionando. Mas, como você pode ver, se eu dobrar, a propriedade ficará inadimplente. Então, eu quero que isso seja como, digamos. Ela. Eu posso chamar isso de “como” e “ isso é normal”. Você pode chamá-lo do que quiser. Estou nomeando isso por enquanto. Agora, se eu for para esta instância, que a retiramos da nossa variante, e como você pode ver, nós a pegamos tão bem quanto o normal Ok, acho que fiz isso de maneira oposta. Posso alterá-lo facilmente, então posso simplesmente selecionar isso e alterá-lo a partir daqui. Tem que ser ela. E você tem que ser normal. Ok, então temos duas variantes. Ok, você é normal. Se eu copiar essa tecla Alt, e agora eu puder mudar para, e teremos a terceira. Vamos criar uma terceira variante, mas vamos criar um protótipo disso Estou criando um fluxo simples. A partir desta seção, você tem que ir aqui. Se eu clicar aqui e estiver colocando uma animação inteligente em fita, chegaremos à animação inteligente, mas quero que seja enquanto estou passando o mouse Se eu jogar isso enquanto estou pairando, a cor muda. Eu sei que a posição não é muito boa, então deixe-me atacar os dois Assinatura T na parte inferior também. Estou colocando meu mouse sobre ele, então ele se torna. Ok, agora vamos criar uma terceira variante. É muito fácil criar uma variante. Você pode fazer uma coisa como, digamos que eu criei isso, outra coisa porque eu não sei como criar uma variante. Acabei de arrastá-lo como exemplo e já disse que tem que ser composto Então, anexe D, por enquanto, onde está DH. E deixe-me ir para o componente do berço agora. E eu posso simplesmente arrastá-lo para dentro dele. Agora é uma variante. Eu sei que é uma prática muito ruim. Não use isso. Estou usando porque só quero te mostrar alguns truques aleatórios. Agora, essa é a variante. Deixe-me renomear algo Atualmente, é propriedade um e padrão. Só diga, eu estava pensando em De. Deixe-me digitar pronto. E atualmente são propriedades. Deixe-me ajudar para que eu saiba quais são os outros. Vire para o normal. Ok, então é ótimo. Agora, mas eu tenho que mudar a cor da curva. Ok, eu vou. É um bom ácido. Atualmente, temos três variantes, então deixe-me arrastá-la e, pro, você tem ser um. Vou colocá-la aqui. Agora, se eu for para Ptype On tap, você terá que mudar para vermelho Vamos jogar isso. Enquanto o abaixamento estiver escuro, se eu clicar aqui, ele ficará vermelho Essa é a vantagem de fazer variações. Ok, então aprendemos como criar variância usando muito hardware Agora, vamos aprender como criar variância usando formas muito simples Eu sei que existem várias maneiras de criar variações no figma, como se eu clicar aqui, um botão de adição aparece e eu posso simplesmente clicar nele, e ele cria Eu posso simplesmente ir para esta seção de cores e posso alterá-la para cores neurais como esta Eu posso usá-los diretamente. E, como você pode ver, ele também está atualizado. Eram três, agora são quatro. Eu posso fazer isso assim. E eu quero ficar cheia porque não a nomeamos. Ok, então deixe-me renomeá-lo. Ok, eu estava pensando. Só branco. Estou dando nomes totalmente ruins, eu sei, mas estamos apenas aprendendo. Não estamos trabalhando em projetos reais. Então, enquanto estiver trabalhando em octal, forneça o nome correto e real Isso significa alguma coisa. Nesse caso, isso não significa nada. Mas uma coisa, atualmente, é propriedade, mas podemos indicar isso como. Esse é o botão. Mudou para todos, bom. OK. Sempre que alguém vai se exercitar, eu disse assim , essa pessoa vai, esse é o botão e temos quatro variantes nele, como o branco. Bom. Oh, tem uma coisa. Com a variante, podemos criar algo realmente incrível. Deixe-me te mostrar uma coisa. Deixe-me criar dois botões. Vou escolher o retângulo, retângulo pequeno e deixar cerca de 20 E vamos transformá-lo em primeiro lugar será. O segundo é ficar agitado. Vamos torná-lo componente. E esses dois são componentes agora. Combine como uma variante. Ok, agora vocês são pais. Ok, então eu posso renomear isso atualmente, é propriedade. Eu posso renomear isso como ligado e mano vai ficar desligado. Deixe-me mostrar por que estou fazendo isso. Se eu for para acid ple, temos um componente e dois, e se eu arrastar isso, obtemos esse botão porque ligamos e desligamos Então, como você pode ver, isso é muito legal. Também podemos renomeá-lo, como digamos. Atualmente ligado. Podemos adicioná-lo como verdadeiro e falso. Então, eu vou ver com algumas palavras, você pode criar assim. Funciona apenas com O de verdadeiro falso e não, essas coisas. Você pode usá-lo para criar caixas de seleção ou pode usar para criar, deixe-me mostrar uma coisa como esses botões, você pode definir isso como um ativado e este como um. Existe outro método, você pode criar uma variante como eu vou escolher elipse e chi a cor ou é chato. Deixe-me escolher um rosa. Ok, então não é algo rosado. OK. Então, atualmente, é um quadro, então deixe-me criar um componente. E se eu selecionar nela, obtemos a opção chamada propriedades na seção de design. E se eu clicar no botão de adição, temos quatro opções, como a variante boon, uma troca e texto Então, por enquanto, eu quero criar uma variante. Então, a variante de resina de frequência agora, eu posso simplesmente clicar nela e mudar a cor Então, atualmente pesque alguma coisa. Agora eu o transformo em três primários, ou posso transformá-lo em algo assim. Esse é outro método para criar um pai. Esse método alternativo de criar variáveis é útil, especialmente quando você quer começar um combate e mergulhar imediatamente na variação atual sem uma etapa separada Lembre-se de que existem várias maneiras de obter o mesmo resultado com firma, encontre o estouro que melhor se adapta a você Então, isso confunde nossa intrusão variáveis ou variantes Eles são incrivelmente úteis para gerenciar diferentes estados ou estilos em uma única compota. Na próxima maneira, estamos nos aprofundando nas variáveis, mas estamos criando variáveis múltiplas Também é chamado de variável multidimensional. Então, estádio para isso e feliz design, meus amigos, 75. Propriedades do componente Figma: Crie dinheiro para a aventura Figma. Vamos conquistar um recurso super interessante chamado variância multidimensional . Não se preocupe Não é tão assustador quanto parece. Na verdade, é como um truque de mágica que tornará sua vida de design mais fácil e fresca. Então imagine um cenário você criou um botão incrível, mas precisa de uma versão diferente para situações diferentes, como clicar ou tamanhos diferentes É um ato de malabarismo. Eu sei Mas com a variação multidimensional, é como ter 1 milhão de pequenos clones do seu botão, cada um preparado para uma ocasião Então, como você pode ver, eu criei esses botões, usando várias variantes, e nomeei os botões, essa coisa toda chamada de botão Então, como você pode ver no meu painel de ativos, eu tenho esses botões. Se eu rastrear isso dessa forma, anteriormente só podíamos mudar a cor. Mas agora podemos mudar o tipo. exemplo, atualmente, posso mudar para o botão ir para o cartão, bem como para comprar agora, bem como se eu selecionar um cartão e quiser que ele fique em vermelho. Eu também posso fazer isso, assim como com o botão comprar agora com o botão ir para o cartão. Então, como você pode ver com variantes multidimensionais, as possibilidades são ilimitadas Agora vamos detalhá-lo. Pense no seu botão desbotado. Então, neste caso, adicionar ao cartão é meu botão favorito. Agora imagine-o usando chapéus diferentes, uma cartola para quando alguém passa o mouse sobre ele, um chapéu de cowboy para quando estiver aceso e talvez um chapéu de coelhinho descolado para um Então esse é o poder das variantes. Agora, vamos entrar no figma e criar alguns botões. Ok, então deixe-me deletar este e vamos começar do zero. Eu já desenhei alguns botões, então vou apenas copiar. Eles gostam desse, desse e desse. Atualmente, eles são todos instâncias, então vou selecionar todos eles e clicar com o botão direito do mouse e anexar uma instância D. Ok, então eles são todos uma moldura agora. Ok, então deixe-me colocar lá primeiro. Então, clique no botão de corte aqui. O primeiro vai ser pálido. A segunda vai ser filmada agora, mas acho que tenho que mudar a cor para torná-la azul E depois disso, vá para o botão do cartão e vá para cartão se eu for para o painel Menos, e se eu clicar nessa defesa, esses são layouts, mas estão na moldura Então, eu quero que isso seja um componente, então vou fazer com que todos eles sejam componentes. E tem mais uma coisa. Você também pode chamá-lo de botões, barra, azul, assim e o mesmo com este Certo. Se eu for ao painel de ativos, consigo ver um valor como esse. Aprendemos em vídeos anteriores e podemos fazer o mesmo com este. Mas esse é um processo muito demorado. Agora temos todos os componentes, então vamos fazê-los como uma variante se combinarem como uma variante. Ok, então essas são todas as variantes agora, e há um problema. Como você pode ver, o nome de todos eles é o mesmo, então o erro é g. Ok, agora vamos mudar a propriedade deles. Então, o primeiro é adicionar ao cartão e, ao descolar essa propriedade , vou transformá-la em um E ao nomeá-lo, adicionei azul, então é por isso que ele está aparecendo em azul Mas eu não quero esse. Ok, eu quero esse. Mas tudo bem, eu cometi um erro. Este tem que ser tipo, e este será adicionado ao mas. Ok, então esse também será um tipo de adição ao cartão. Agora, vamos adicionar outro tipo. Ok, então isso é uma loja agora, então vou chamá-la de loja agora. Ou o mesmo que este. O tipo é comprar agora, e esta será a carta desta Ok, então terminamos com os tipos. Agora, vamos adicionar cores. Então, vamos selecionar os botões, e eu vou adicionar uma nova variante, e vou nomear isso como uma cor. Ok. Então, por enquanto, vou manter o valor como padrão. Nós vamos mudá-los aqui. Se eu clicar nessa cor Acanc é padrão, mas podemos nomeá-la como pista Isso é para ser azul, isso vai ser. Se eu clicar agora na loja agora e escolher a faixa Accoti azul Este é o certo, então vou escolher , o mesmo com este, azul, para que não precisemos digitá-lo repetidamente. O mesmo com este. Ok. Azul, e esse é o vermelho. Então, criamos uma variante multidimensional. Então, se eu for até os botões, selecionar isso e deixar que eu os exclua, entenderemos como isso funciona. Ok, agora vamos adicionar as páginas , as páginas da categoria. Ok, agora, categoria um. Vou colocá-lo aqui. O mesmo com este, o mesmo com este. Só estou custando os custos. Apenas na parte inferior, e eu vou adicionar apenas o centro também. Ok, então tudo está ajustado agora. Então, liste, nesta página, que eu quero que isso seja lido enquanto eu estou passando o mouse sobre ela E depois de clicar, ele tem que se transformar nesse botão de guarda. E depois de passar o mouse novamente, ele tem que ficar vermelho Ok, Card, você tem que ser lido enquanto passa o mouse sobre ele. Ok, então é assim que a variante multidimensional funciona. Sei que criar essa variante multidimensional parece confuso Então, deixe-me mostrar mais uma vez como criá-los. Então, vou usar apenas um retângulo e vamos adicionar, y 1205 está Então, vamos adicionar cerca de 20 anos, e eu vou fazer quatro deles e menos mudar a cor deles. Então eu vou mudar para um gradiente e você vai escolher um rosa. E coloque essa Mas eu quero que sejam 50 sites, assim como você um, também, 50 e centenas de cores como este, e você será gradiente Ok. Ok, então não são um quadro, então temos que convertê-los em quadro. Controle G. E este controle G. Controle G. Controle G. Ok. Então, essas são molduras. Agora, vamos criá-los em componentes. Você não precisa se converter em quadro. Você pode convertê-los diretamente em componentes. Então, deixe-me te mostrar. Então, como você pode ver, isso não está em um quadro, então eu posso simplesmente clicar no componente. Mas para uma melhor compreensão, eu os crio em um componente. Ok, então componente e componente, e deixe-me transformá-los em uma variância. Combine como uma variação. Ok, então agora são variantes. Agora, vamos adicionar propriedades. Então você vai ser um tamanho. Ok. E para ser, o que eu digo, grande. R para ser grande novamente. Mas podemos transformá-lo em rosa grande. Mas podemos criar novamente uma variante. Então, deixe-me fazer isso, mas isso nos dará o erro. Portanto, há muitas coisas que temos que fazer. Ok, então vamos adicionar outra propriedade. Deixe-me ir até a câmera principal, clicar nela e clicar neste botão de adição, clicar na variante, e agora vamos adicionar uma cor, e vou deixar o valor como padrão. Ok, agora temos uma cor. Então, vou mudar esse problema. Eu sei que fiz um feitiço, então, por favor, você sabe, isso. Então você vai ser rosa, e você vai ser um gradiente e pequeno, pequeno é o tamanho par Este também vai ser pequeno. Então eu vou escolhê-lo daqui, um pequeno e rosa. Ok, então se eu for ao painel de ativos, vou dizer que somos comparáveis a, mas vou renomeá-lo E se eu rastrear isso atualmente grande, digamos pequeno e eu quero que seja rosa. Então é assim que a variância multidimensional funciona. Ok, então aprenderemos duas coisas como criamos do zero, além de criarmos usando elementos pré-fabricados, como o botão doar, e também criamos do Ok, então deixe-me contar os benefícios de usar variantes multidimensionais Primeiro, isso nos dá a eficiência do design. Então, chega de botões de ping como loucos. As variantes mantêm tudo organizado e consistente. Depois disso, temos o super-herói de escalabilidade. Eu sei que precisamos de 100 tamanhos diferentes em botões, sem problemas. Com variantes, podemos lidar com elas com facilidade. Podemos criar várias versões disso, como uma grande e uma pequena como essa, e podemos simplesmente escolhê-la. Então, eu quero que isso seja grande. E agora você tem um botão grande. Ao trabalhar com a equipe, compartilhar o design se torna fácil, todos sabem exatamente aparência de cada botão em todas as situações, e o desenvolvedor obtém um roteiro claro de todas as opções de botões, facilitando a implementação Lembre-se de que, se você achar uma abordagem multidimensional um pouco confusa no início, pode optar por uma variante simples com algumas dimensões, que criamos no vídeo anterior Portanto, é uma cobertura avançada, então reserve um tempo para criar o conceito para que você possa assistir a este vídeo novamente até se tornar um mestre em si variance Se você cometer um erro na ordem dos nomes, não se preocupe. Você pode alterá-la posteriormente clicando no componente, definindo e reorganizando a dimensão, como nas propriedades, e podemos alterá-la em tamanho grande e tudo variância multidimensional pode parecer um pouco intrigante Mas com a prática, você descobrirá que eles uma ferramenta poderosa para organizar e simplificar seu sistema de design Portanto, não hesite em experimentar e se familiarizar com esse recurso avançado. Então, estudantes, fizeram um ótimo trabalho em obter esse poder, e nos vemos no próximo vídeo. Tão feliz em projetar. 76. Projeto 13 variantes: Aqui, seus detetives de design, vocês se lembram do incrível poder das extremidades multidimensionais que descobrimos Então, prepare-se para testar esses superpoderes neste incrível desafio de fumaça Então esse é o projeto 13. Hoje, estamos construindo uma pequena parada de botões como interruptores adequados para um rei ou rainha de design. Portanto, nossa tarefa é criar esse botão de tatuagem, botão go cut, bem como o botão comprar agora e as torres mágicas OK. Então, nos meus painéis de botões, eu também criei uma versão menor dos botões de loja. Então, se eu for até os botões, e se eu usar o Shop e quiser que seja pequeno, posso usá-lo assim. Então eu criei isso usando o recurso multidimensional. Então você também pode fazer isso. E também criamos esse switch tbl, usamos apenas o botão ligado e o para cima e criamos esse incrível switch total s. Então você também precisa fazer isso Eu sei que você pode estar se sentindo selvagem com variações extras Botão de tamanhos diferentes, ícones ou até mesmo tomadas personalizadas. Portanto, faça com que seu interruptor de ferramentas mude de forma ou, a menos que seja um recurso secreto oculto. Portanto, toda a instrução também é dada em pedófilos. Abra aquele pedófilo e crie um botão par, um bom botão par, um botão compra e um botão de alavanca, use um tipo de cor de tamanho diferente E lembre-se, use seus superpoderes. Vans Ultiimon ou uma arma secreta. Seja criativo, deixe sua imaginação correr solta e não tenha medo de experimentar, experimente cores, estilos ou animações diferentes. E tenha esta é sua chance de criar uma dinastia botões e interruptores que aplaudem a realeza de pé Então, quando a dinastia de design estiver concluída, tire uma foto de um filho e envie-a para a procissão E lembre-se, se você estiver perdido ou precisar de um impulso de design, devemos perguntar. Você pode até mesmo assistir novamente ao vídeo quantas vezes precisar. Estamos sempre aqui para compartilhar você. Então, avante, designers corajosos. Que seu botão esteja em negrito, sua alavanca seja suave e sua habilidade no FIV Ma E lembre-se, a prática leva à perfeição. E com um pouco de criatividade, você estará construindo uma dinastia de design em pouco tempo Então sou eu, assinando. Obrigado por assistir, e vejo vocês na próxima. 77. Como criar um campo de entrada interativo na Figma: Vamos nos lembrar de todos aqueles truques incríveis de componentes que aprendemos, como transformá-los, redefini-los e fazê-los dançar como fantoches Ok, talvez não aquela parte da dança. Vamos usar o capacete espacial americano porque este vídeo é sobre como lançar você na próxima galáxia da Figma Mastery, então estamos criando nossa própria obra-prima então estamos criando nossa própria Portanto, chega de formulários de registro enfadonhos ou seções de perfil vazias. Então, vamos criar uma página de conta que seja tão exclusiva quanto você. Então, seremos como digitais por causa da pintura com nossos pixels e cordões. Exceto que nossa obra-prima vem com os formulários de registro e os botões de validação do switch Ok, então vamos entrar no Figma e criar nossa página de conta, minha conta Então, atualmente, isso está vazio, então vou usar esse componente. Ok, no painel de ativos. Eu adicionei isso como um componente. Então, isso está aqui. Então, vou rastreá-lo assim e adicioná-lo aqui, e esse será o nosso copiar/colar na barra de status do iPhone. Então, na página da conta, adicionaremos um nome, M LID, número de telefone, detalhes do cartão e data de nascimento. Então, vamos criar isso. Então, habilitei grades na página da minha conta. E eu quero linhas por enquanto , deslocar e arrastar uma linha. E não está visível. Então, deixe-me mudar a cor. Então, sotaque Nell. Ou vamos pegar um cinza, então eu quero um cinza como este. Agora eu quero um texto que será nosso nome. Temporário, vou escolher simplesmente o nome. Ok. E haverá uma gravadora como essa. Deixe-me transformá-lo em rótulo. Isso é um rótulo, e deixe-me mudá-lo. Não sei por que está usando o Pro Display. Acho que há algo que estou perdendo aqui. Eu vou mudar para 14, e isso é S, então você vai ser um 20. Deixe-me criar essa coisa em um componente, selecionar todos eles e criar um componente. Deixe-me arrastar esse componente mestre até o topo desse quadro porque quero colocar esse componente em nossa página de componentes. Está aqui. Vou chamá-lo de formulário de entrada. Ok, então você pode estar pensando por que criei isso na página da minha conta e por que estou arrastando isso para o Cumbo. Porque com essa página, consigo obter as grades e projetar isso de acordo com Como você pode ver, Sr. De. Deixe-me ir para o formulário de entrada e a linha. Deixe-me rastrear isso até esta coluna. Agora ele se encaixa perfeitamente. Deixe-me tirá-lo da moldura. Eu criei isso em um componente. Vamos cortar isso e adicionar isso aos nossos componentes. Componentes, e este é um controle de ritmo vazio V. Eu o adiciono aqui. Mas antes de fazermos isso, quero mudar a restrição. Vai ficar na esquerda e no topo. Você estará no lado esquerdo e inferior. Vamos escolher o fundo. E você vai ser escalável. Ok, que seja em escala. Agora, eu quero que isso seja uma variante. Você pode usar duas opções como essa, além de propriedades e variantes. Então, eu vou com este. Agora temos o botão de adição. Então, o primeiro será o nome, segundo, será o ID do e-mail. O terceiro será o número de telefone, depois as informações do cartão e a data de nascimento. Ok. Então, o primeiro será o mesmo que é, depois o segundo, será o ID de e-mail. Este será nosso formulário de entrada. Eu sei que tenho que fazer algumas mudanças. Eu moro na Índia, então meu código é mais 91 e, depois disso, dez dígitos Vou digitar alguns dígitos aleatórios. Eu não sei Não sei, sem motivo, ficou preso nessa altura automática fixa. Eu quero transformá-lo em automático assim e o mesmo com as informações do código Podemos digitar números aleatórios como zero zero, zero, 012, quatro, cinco, assim Acho que criei esse extra, então vou namorar esse. Ok. Então, agora vamos para nossa página de conta, esta, e vamos para comparações de ativos e ativos. Temos um formulário de entrada. Vamos arrastá-lo até aqui. Ok. Deixe-me duplicar este Esse será o nosso número de telefone. Isso vai ser talvez. Isso vai ser o que eu digo aos dois. Vamos até esse painel de design e, como você pode ver, esse é o nosso formulário de entrada. Atualmente, a propriedade é uma e esse é o padrão. Eu sei que eu não nomeei. É uma prática muito brilhante. Deixe-me ir para o formulário novamente e renomear isso. Primeiro, vai ser um nome. Ok, então deixe-me digitar a propriedade primeiro. Então, esse será um tipo, que tipo de campo de texto é esse? Esse vai ser o nome. Nome Isso vai ser um e-mail. Não, adicione ID. Este será o número de PH Este é Cardin e isso vai ser Acho que adicionei um botão de adição. Ok. Então, isso vai ser DOB. Essa é a data de nascimento. Ok, eu adicionei todas essas coisas. Agora, vamos ao PIPMA e vamos selecionar o tipo de formulário de entrada que atualmente Eu quero que isso seja um e-mail. Depois disso, quero que seja um número de telefone, e isso tem que estar na informação, último tem que ser DOB. Essa é a data de nascimento. Então, vou dizer que foi muito fácil criar uma página de informações da conta. Ok, essa foi a coisa básica. Já sabemos como criar componentes e variâncias, tudo isso. Então, esse era o básico. Agora, vamos adicionar uma variância multidimensional , bem como um botão de alternância Digamos que você não possa alterar seu número de telefone neste aplicativo. Então, nesse caso, o que podemos fazer é mudar a cor da mesma forma que podemos transformá-las em um decil Então, vamos aos componentes e vamos criar uma variante. Então, vou expandir isso e vamos copiar isso aqui. E deixe-me fazer um discípulo. Então, vou manter isso igual a este. Ok. Então eu vou entender, isso é um deficiente. Isso significa que ninguém pode alterar esse número quando você o adiciona pela primeira vez. Podemos adicionar uma nova variante. Deixe-me ir para a variante input and plus e será stratus e o valor deve estar ativado porque eu quero aquele botão alto Se você não colocar assim, definir esse padrão central e escolher criar propriedade e tentar adicionar e desativar propriedades novamente, isso não funcionará. Portanto, lembre-se de que você precisa adicionar e desativar valor aqui antes de criar essa propriedade. Vamos criar uma propriedade, e ela estará ativada, e essa será a opção Add New Off, e esse será nosso número de telefone. Se eu acessar meu aplicativo, agora quero mostrar que essa é a coisa desativada, então eu posso simplesmente desclicar nela Como você pode ver, isso está desativado. A parte numérica não está destacada. Ao criar uma conta, estamos usando tudo o que aprendemos nos variância anteriores, bem como nos componentes de vários milhões, bem como no botão de perseguição. Há uma coisa. Digamos que você adicione seu ID de e-mail desta forma e se esqueceu de adicionar um ponto e adicionou outra coisa D. Comp, e adicionou outra coisa D. isso é um erro, então não funcionará Quero mostrar que esse é o erro. Então, eu vou mudar a cor dela. Isso vai ser vermelho. Assim. A linha também deve ser vermelha. Vou mudar isso para essa cor e o mesmo com esta. Ok, assim, mas temos que adicionar outra coisa como erro. Deixe-me ir para o formulário de entrada, clicar no botão de adição, terminar, e isso será colorido. E podemos criar isso no botão de alternância, então vamos criar isso ou podemos simplesmente digitar dois ou falso ou S ou não Então, para isso, eu vou usar. E crie propriedades. Isso significa que o alerta é sim, mas isso não é, então vou acrescentar não, você está errado, então você tem que ter Sim. Se eu for até minha alta fidelidade e digamos qual foi essa Ok, M LID, e vamos criar isso. Digamos que o usuário digite outra coisa, ele adicionou D e esqueceu aquele ponto Nesse caso, podemos habilitá-lo e ele mostrará ao usuário que você colocará algo. Você tem que mudar isso. Ok, esta é a página da nossa conta. Eu sei que podemos fazer muitas coisas, mas eu só quero mostrar a vocês o poder de componentes, componentes multidimensionais variados bem como o poder desse simples botão de alternância como Ao projetar, é fundamental considerar a usabilidade e a confiabilidade do formulário Vou ajustar o espaçamento, verificar no meu telefone e ajustar para uma aparência mais limpa Mas eu não tenho iPhone no momento, tenho 100, então provavelmente vou dar uma olhada no telefone do meu amigo e vou ajustar isso. Quero mudar outra coisa, então farei isso como, digamos que cores não são muito visíveis Vou torná-lo mais transparente ou vou adicionar um pouco mais filtrado, 50%, assim. Parece mais legal. O poder dos componentes com variação brilha quando precisamos atualizar nosso design Como podemos ver nos componentes, temos vários tipos de atos, como se tivéssemos um elemento que é erro, um está desativado e este está ativo. Eu sei que essas são coisas um pouco complexas de entender para iniciantes Mas quando você pratica repetidamente, você entenderá e será capaz de criá-las em um segundo, e podemos simplesmente arrastar e soltar assim e podemos mudar o tipo de cor, tudo isso. Ok, assim. Portanto, este exemplo mais avançado demonstra o potencial das variáveis multidimensionais Então, para concluir, abordamos a criação de formulários usando componentes e variáveis No fGMA, ao implementar essa técnica, você pode criar formulários dinâmicos e adaptáveis com eficiência para uma experiência perfeita Mas antes de sair desse vídeo, quero te mostrar uma coisa. Assim, você não precisa criar um formulário repetidamente, você pode usar outra pessoa trabalhando assim. Você pode ir para a comunidade Figma e apenas pesquisar a entrada dos campos, e você obterá esta, insira esta no Figma e você pode simplesmente copiar Deixe-me copiar essa cópia. E onde está meu aplicativo. Ok, então Pet. Eu posso simplesmente usar aqui em vez desse nome, e posso mudar a cor, e ele vem com todos os recursos. Eu mostro o campo e o ícone , o ícone direito e o ícone de erro. Assim, ele já vem com todos os recursos, então não precisamos criá-lo do zero, mas estamos aprendendo do zero. Estou mostrando como criar todas essas coisas do zero, porque quando estivermos usando isso, saberemos o que isso significa? É por isso que está arquivado, por que está ativo, por que está desativado e por que tem o ícone de erro mais e tudo mais. Há um outro exemplo. É como o botão de login do Google. Você também pode usar esse design fino. Você pode copiar isso e fazer login no UAP usando o Google Essas são algumas boas práticas a serem implementadas no design de UA, se você quiser economizar tempo e usar o ativo de outra pessoa diretamente, e você pode personalizá-las. Depois disso, você sabe como personalizá-lo e tudo mais. O objetivo principal deste vídeo era implementar todas as coisas que aprendemos nos vídeos anteriores em uma única coisa, como na conta. Amigos, continuem praticando e experimentando, e eu vou ver vocês no próximo vídeo. Feliz design. 78. Projeto do curso 14: Domínio da conta e da categoria: como criar para o fluxo de usuários na Figma: É minha fantástica dose dupla de delícia de design. Dessa forma, estamos embarcando na missão criar duas páginas de cartas épicas, da conta e a página da categoria Então, prepare-se para liberar o poder das vans de componentes e sua criatividade sem limites para criar uma experiência de compra fácil de usar e visualmente Mas primeiro, vamos recapitular o essencial. O primeiro são os componentes. Esses são seus blocos de construção utilizáveis. Então deixe-me te mostrar Carns. Esses são seus blocos de construção, como botões de uniforme de madeira e cartões de produtos Pense neles como tijolos de lego para seu design, adicione-os para serem montados em uma estrutura incrível e, em seguida, varie Criamos essas variantes, como erro ou desativação. As variantes são armas SC, elas permitem que você adicione variedade e personalidade aos seus designs com apenas alguns cliques, e você também precisa usar várias dimensões Essas variantes superpoderosas permitem combinar várias propriedades ao mesmo tempo, criando designs dinâmicos e dispositivos que adicionam tamanhos diferentes aos diferentes tamanhos Então, na página da conta, você precisa compor um brique projetado para alimentar componentes como criados desta Estilo, cor e topografia especializados. Crie elementos dinâmicos que adicionam multidimensionais aos dados do usuário E adicione um ícone para detectar a cor para obter mais magia. E na categoria, eu forneço todos os ícones nos recursos. Então confira isso e adicione essas contas. Depois de preencher a página da conta e a página da categoria, capture um design com bondes com captura de tela e envie-os para a seção do projeto Conheço algumas pessoas que meu estoque ou outras não, então não entre em pânico, consulte o vídeo ou entre em contato comigo para obter orientação. Estou aqui para ajudar e não quero aceitar a estranheza Experimente e divirta-se. Esta é sua chance de criar algo verdadeiramente único. Então, aproveite a jornada. O design é explorar e aprender. Comemore seu processo e divirta-se. Também forneço todas as etapas no arquivo de exercícios. Vá até lá e leia todas as etapas. Anote um show assim e cole na seção do projeto, e você também pode compartilhá-lo e levá-lo até lá. Então pegue algumas folhas de esfregão, encha-as com criatividade e vamos mergulhar no mundo do design de plicar Mal posso esperar para ver as páginas incríveis que você criará. 79. Como criar um design de interface de usuário de notificação no Figma: Estudantes, vocês estão prontos para conquistar outra fronteira do design Hoje, estamos definindo nosso site no domínio crucial do aplicativo, que é a página de notificação de cartões de clique Lembre-se de que colocamos todas essas lições épicas em nosso cérebro Figma, como a variante Cerence, como o grupo de quadros, além de atualizar componentes, além Você escolhe, escalamos tudo em nosso cérebro. Então, eles estão prestes a se unir em uma sinfonia de preconceitos de design Mas isso não é apenas um exercício técnico. Estamos criando os heróis anônimos da experiência americana, a função aberta guardiã, o cânone de confinamento das boas notícias e talvez algumas não tão Mas ei, transparência. Seu usuário abre o aplicativo clicker e Bam, criado por uma página de notificação Isso não é apenas funcional , mas um deleite para seus olhos. Pense em uma mensagem clara e consciente, reproduza animações completas para atualizações importantes e talvez até mesmo pratos deliciosos ou personalizados Estamos falando de dicas visuais que chamam a atenção sem gritar, como compre agora ou clique no botão de reclamação Bagagem tão delicada que guia o usuário até a próxima compra. E um toque inesperado para manter as coisas interessantes. Então, vamos entrar na figura e criar nosso painel de notificação Então, como você pode ver, eu criei esse painel de notificação, então vamos criar algo novo. E como você pode ver, eu também atualizei este, então vamos ver como podemos fazer isso. Como você pode ver, eu tenho uma moldura vazia de tela em branco, e nela eu tenho algumas coisas como notificação, Mficon eu adiciono Acabei de copiar e colar este, mudei o texto, Mification e adicionei este perfil Se alguém quiser acessar seu perfil, basta digitar aqui e acessar esta seção, minha conta. E, a propósito, adicionei todos os contras porque antes parecia muito chato. Então, pensei em adicionar alguns ícones, para dar um pouco de personalidade. Agora, como você pode ver, parece moderno e meio utilizável. Ok. Vamos criar minha página de indução Eu quero uma moldura, moldura, e deixe-me desenhar uma moldura. Mas deixe-me habilitar o grão das colunas. Sei que não usamos muito rosa porque acho que abordaria essa coisa em uma ou talvez em uma seção avançada. Então, direto para isso. Eu quero que sejam 15 bordas arredondadas e, além disso, menos de alguma cor. Atualmente, ele não tem preenchimento de cor e eu quero que essa cor seja uma nota ainda. O profissional deveria estar aqui. Assim. E nós já criamos um gradiente, mas acho que vou, então vamos tentar esse gradiente porque eu já criei aquele em que é nosso campo Ok, está. E criamos esse gradiente. Então, vamos usar esse. Ok, então deixe-me desativar as colunas. Ok, então eu comi esse ícone de troféu por velocidade, então você pode baixar de lá Ok, agora vamos adicionar algum texto nesse painel de notificação, como o festival. Digamos que, enquanto está acontecendo, talvez no Natal ou talvez no Ano Novo. Então, o festival oferecerá apenas para você. Talvez lhe demos alguns cupons, e eles possam escurecê-los e obter algo com 100% de desconto, como meias Eu sei, sempre que eu entro neste site com, eles dizem 100% de desconto, mas não há nada que esteja 100% de desconto. É 100% do que, em alguns casos, você tem que comprar algo muito caro. Então, nesse caso, você receberá algo de graça, mas esses itens não valem muito. É uma câmera. Ok, então vou adicionar a oferta do Valley Festival. Ou aqui. Digamos que seja um cupom rascunho, como se o usuário digitar nele e raspar. Portanto, ele revela um código de cupom, que eles podem resgatar ao comprar algum produto Então, deixe-me acrescentar que aqui segurando o Alt Control V, arranhe com uma vitória. Ok, então eu escolhi esta forma atrás de um script fino, algo como eu não consigo pronunciá-lo Aga fine. Ok. Está tudo bem, eu acho. Eu sei que estou errado, então você pode me dizer nos comentários, talvez nas redes sociais. Ok, então digamos que estamos oferecendo algo com 100% de desconto. Portanto, ganhe até 100% de desconto. E vamos adicionar um botão, como comprar. Então, nós projetamos um robô de loja, eu acho. Então, temos esse botão O nos botões e o tipo é comprar agora e ple e eu quero pequenos. Ok, então isso é muito útil. Digamos que isso funcione nos dois sentidos. exemplo, o usuário pode riscá-lo ou clicar no Shopbt e algum produto específico terá 100% de desconto Ok, então, como você pode ver, criamos este cartão com uma aparência realmente incrível. A cor não está indo muito bem neste. Então, deixe-me mudar essa cor. Ok, então eu vou com azul. Então, isso é muito bom em comparação com o anterior. E agora podemos adicionar um logotipo, nosso logotipo de cartão de clique aqui. Então, estou pressionando para reduzi-lo. E eu vou colocá-lo aqui. Ok, então recebemos um troféu da Cliarap. Ok, então é assim que criamos nossa página de notificação e podemos criar um pop-up, como digamos. Ok, deixe-me mostrar uma página inicial. Por exemplo, digamos que o usuário acesse. Primeiro, eles verão esse. Depois disso, e haverá um pop-up e nesse pop-up, adicionaremos este. Portanto, use um redirecionamento direto para essa página, como uma página de discoteca ou algo parecido, e eles poderão usar essa oferta Ok, então criamos esse painel de navegação em um ambiente descontraído, eu acho. Então, deixe-me adicionar isso aqui. Então, estamos no painel de ativos, e ele está aqui. O que é Está escuro. É para o escuro. Então, vamos adicionar isso assim, então deixe-me habilitar minhas caixas novamente. Ok, então agora é peixe. Ok. Mas, como você pode ver, os ícones não são tão visíveis. Eles estão na cor branca. Então, eu estou mudando para essa cor primária. Ok, eu escolhi os filges. Eu tenho que escolher a seleção. Ok, agora isso parece legal e visível. Então, como você pode ver, não é uma atualização, então podemos atualizá-la. Nós já sabemos que você pode pausar o v e fazer isso, ou você pode dizer os comandos principais Mas digamos que você não saiba, então assista. Clique com o botão direito do mouse em ir para o componente principal e apenas diga empurrar as alterações para o componente principal, e isso mudará tudo Mude push para Minot Eu sei que não está visível no momento, mas se eu clicar nisso, fica visível E se formos para o componente principal, onde ele está aqui e as mudanças são feitas. Se eu fizer isso. Se eu agora for para a página principal, Azac é branca, e eu posso simplesmente ir para st, posso fazer alterações onde está. Tenho que ficar sentada por segundos. Agora, se eu for para C, envie as alterações para Minot se eu for para Moon, novamente, azac, novamente, azac Vamos voltar à distância novamente. Ok. Então, como você pode ver, nossa página de notificação está pronta e parece muito legal. Agora, agora, há uma tarefa para você. Você tem que criar minha página de acordos. Então, nós e nós projetamos. Deixe-me ver o que projetamos. Criamos a página inicial de introdução, o menu de hambúrgueres, bem como a página do produto, a página do acordo e a página da categoria. Mas não criamos minha página de pedido. Portanto, há uma tarefa para você. Você tem que criar minha página de pedido. Então, pause o vídeo e faça isso e eu mostrarei minha versão da minha página de pedidos Então, pause o vídeo. Ok, espero que você tenha feito isso, você projetou o M ou Spage. Então, deixe-me mostrar minha versão. Esta é a minha versão, e eu desenhei dois elementos nela, como desenhei esta e esta. Então, ambos perguntam a ele, e eles parecem apenas diferentes. Então, o primeiro é como rastrear seu pedido. Então, quando você acessar minha página de pedidos, verá que comprou algo. E a partir daqui, ele mostrará sua data, bem como o item, bem como um item de computador, e você poderá ir diretamente para esta página. se você clicar aqui, ele o redirecionará para esta página de produção e mostraremos qual item você comprou mesmo acontece com este, a mesma funcionalidade, mas parece diferente. Mas eu gosto dos dois. Mas se eu tiver que usar no hap, vou usar este. Parece muito mais legal. Mas hoje em dia, tudo está ficando grande. Então, acho que talvez a maioria dos usuários use ou crie esse cartão. Tudo isso é incrível, olhando a página de modificação e minha página de pedidos. Então, eu só quero te dar uma fita. Lembre-se de que não existem erros no Figma, apenas um feliz acidente esperando para acontecer Então, você apenas experimenta ao criar uma página como Modi ou minha página de pedidos . E tenha um telefone. E quando terminar, compartilhe sua criação com o mundo. Você pode fazer o upload na meta social, me digitar lá e compartilhar com seus amigos. Vamos nos inspirar e mostrar o poder da magia da Figma Então é isso para o vídeo de hoje, e vejo vocês no próximo. 80. Como criar um componente TOOLTIP (passe o mouse para mostrar texto) na Figma: Dispare uma montagem fantástica. Lembre-se de que 100% dos cupons foram criados em um vídeo de imprensa anterior. Então, sim, Baccala, porque está prestes a ficar mais estranho do que Lama usar batom Ok, então todos nós sabemos que ofertas incríveis vêm bem detalhadas. Então, para revelar os mistérios desse 100% de magia, estamos adicionando outra camada ao bolo, ou devo dizer cebola, e sobrepor com uma sobreposição Há um início. Eu sei, certo. Então, como você pode ver neste cupom, eu adicionei uma pequena coisa chamada termos e condições. Se alguém quiser saber os termos e condições. Eu sei que eles não fazem isso. Mas digamos que alguém inteligente como você queira verificar os termos e condições. Se eles clicarem nele, ele mostrará esse menos. Deixe-me mostrar a demonstração real. Fluxo tipo Pitch P três. Ok, então esse cupom aparecerá e, depois disso, teremos os termos e condições. Então, como você pode ver, o cursor do meu mouse muda para esse ícone de mão porque é clicável Então, se eu clicar nele, isso aparece. 100% de desconto. Sim, você leu certo, mas compre um item radicalmente caro e uma receita de CP que desbloqueia o desconto épico em A caça ao tesouro, as compras, estou muito preparado. Então você fica com o vazio. Assim, o usuário receberá esse pequeno pop-up. Então esse é o início. Vamos criar neste vídeo. Você pode estar pensando por que site com joga esses jogos intermediários. Porque é 100% do negócio, esse incentivo merece um pouco de aventura Além de decifrar o código que isso oferece ao WildF, não é como ganhar na loteria de design Por falar em refinar, lembre-se daquele item chave expressivo que você teve que comprar, até mesmo acessar a Sim, adivinha? Pode ser usado mais tarde ou se tornar chave para outro nivelamento oculto desse labian de design Quem sabe, as possibilidades são infinitas, como você imagina. E um pouco tão confuso quanto uma perna de redução de formulários fiscais. Ok, então eu também darei algumas dicas de psicologia ao projetar isso. Então, deixe-me fechar este. E deixe-me deletar este também porque vamos criar tudo do zero. Então, eu vou fazer isso. OK. Então, você tem que ir e vamos projetar mais. Coloque alguns retângulos. Eu sei que sei que as pessoas são inteligentes. Eles podem fazer tudo do zero. Mas é meu trabalho. Eu tenho que fazer isso. Vamos pegar um triângulo de um triângulo. Vamos adicioná-lo aqui e eu vou colocar O two, adicionei dois Eu quero as três bordas arredondadas, e vamos adicioná-las aqui. Ou talvez aqui. Vamos adicionar uma moldura. Antes de fazermos isso, deixe-me adicionar um texto. Controle V. Vamos adicioná-lo aqui no centro e vamos adicioná-los ao quadro. Controle. Temos a moldura e o processo que você precisa criar, deixe-me mudar a parte dela. Assim. P é o mesmo, então deixe-me adicionar um nome. Isso é como termos e condições. Ok, vamos ao protótipo , estamos adicionando sobreposição à sobreposição Anteriormente, adicionamos uma sobreposição a esse item, mas agora estamos adicionando uma sobreposição a esse item, e faremos isso usando termos e condições, e eu atualizei meu componente principal Então está aqui. Acabei de adicionar os termos e condições e eles foram atualizados. Todos nós sabemos como isso funciona. Então, clique duas vezes nos termos e condições e vamos juntar os termos e condições, e a mesma coisa na guia. Ok, eu sei qual é o problema. Eu adicionei três coisas aqui. Então deixe-me namorar todos eles. Agora, deixe-me escolher novamente. R, agora está tudo bem. Agora ele me permite usar no tipo. digitar, navegue até os termos da condição, dissolva, mas você precisa ser uma sobreposição aberta , vamos escolher um manual e adicioná-lo aqui, e tudo estará bem Eu quero que isso seja 25%. Agora, se eu clicar nesses três, espero que funcione. É uma mudança para isso e para o ícone. Ok, como você pode ver, funciona 100% de desconto. Ok, então esse é o termo condição. É assim que usamos a sobreposição dentro da sobreposição. Você também pode usar essa mesma coisa para criar essa. Tipo, deixe-me te mostrar uma coisa. Eu adicionei um ícone de botão, ele lhe dará algumas informações. Então, se alguém clicar nele, ele mostrará apenas números de telefone indianos Você não pode usar outros números de telefone. OK. Se eu clicar nesta conta, indique apenas números de telefone. Ele chama como botão de informações ou dicas de ferramentas, algo assim. Portanto, é muito útil. Ok, então eu quero te dar algumas dicas de psicologia. Então, como você pode ver, a condição do sinal de termo é muito pequena. E é intencionalmente pequeno porque eles não querem mostrar aos clientes os termos e condições reais E os termos e condições sempre escritos em linguagem muito rígida. Algumas pessoas podem entender ou algumas pessoas. Eles escrevem termos e condições de forma muito difícil. As palavras são muito difíceis de entender e são intencionais porque querem apenas que o usuário clique nesse ícone Então, essa é a técnica de psicologia, estudantes, tudo se resume à sobreposição Criamos essa sobreposição usando a sobreposição novamente. Sei que esse é o começo, e podemos usar algo para criar essa dica de ferramenta Há uma coisa que eu quero te dizer. Eu uso o Google Bar para criar esses termos e condições. Então você pode simplesmente ir ao Google Park e dar esta porta a esta Eu te dei esse. No começo, você me deu uma grande frase. Eu não quero isso, então eu disse novamente à Go Bard, eu quero uma versão menor Então ele me deu esse, copiei e eu o usei. É assim que você deve usar . Eu não vou aceitar seu emprego, não se preocupe. Ainda não é tão inteligente. Sei que será um dia, mas ainda não é inteligente. Você deve aproveitar as vantagens da IA. Também ensino sobre engenharia rápida de IA, como usar IA para mídias sociais e tudo mais. Se você quiser, pode conferir isso. O custo está nessa plataforma, e vou adicionar esse link nos recursos. Então vá até lá e confira isso e use a IA para salvar seu emprego. Agora, se você me der licença, eu tenho um Lama para levantar e ir assistir Até a próxima vez, liberdade de fantástico, fique estranho, fique curioso Saatum para mais psicólogo de design. 81. Como criar vários protótipos e criar fluxos separados em uma página da Figma: Ele é um designer fabuloso. Hoje estamos mergulhando no mundo dos fluxos em Pigma. Então, o que exatamente são fluxos? Bem? Eles são apenas um caminho bacana, representado pelo fluxo um, fluxo dois, fluxo três e assim por diante Então, você já se perguntou como usá-los, como renomeá-los ou simplesmente entender do que se tratam Então você está no teste certo. Então, vamos começar. Primeiro, verifique se você já tem alguns fluxos. Então, vamos ao protótipo e clicarei nessa seção aleatória, espaço vazio Como você pode ver, eu tenho fluxos, como eu tenho cinco fluxos. Então, um gráfico flua três, flua quatro e clique na farinha Então, por que estamos vendo isso fluir. Bem, é útil quando você está trabalhando em diferentes seções ou funcionalidades, você pode até mesmo conectá-las a páginas específicas Você deve ter visto que eu uso o flow lot como durante uma apresentação. Então, é fácil. Se eu clicar aqui, está representando o fluxo, como você pode ver. Ela está representando apenas uma tela no momento porque não está conectada. Mas se eu conectar isso desta forma , eu clico nele, como você pode ver, agora está acessível, e também temos nossa sobreposição Então é assim que o fluxo funciona. E digamos que eu queira acessar o fluxo quatro. Eu posso simplesmente dobrá-lo e ele mostrará qual é o fluxo quatro. E depois desse fluxo dois, fluxo três. E você se lembra de quando criamos isso também, nesse caso, eu uso flow. Então, se eu fizer isso e for ao Porto e apresentar isso, isso vai aparecer E nesta seção de slides, eu tenho todos os fluxos. Ok, então temos o fluxo um. Então, nisso eu posso simplesmente fazer isso, entender assim. Uh, eu tenho o fluxo três, eu posso acessar clicar na primeira página. Ok, vamos voltar ao nosso design. OK. Eu acho que Wild W é isso. Eu acidentalmente apaguei esse nome. Então, deixe-me renomeá-lo. Se você estiver desenhando no fluxo e quiser ler uma letra, clique no plano de fundo , vá até o protótipo e exclua as que você não precisa em um conjunto limpo Digamos que eu não queira o fluxo do carrinho de cliques, então posso simplesmente clicar no fluxo de cliques do carro aqui e, como você pode ver, isso aparece no painel do protótipo E eu posso simplesmente clicar nesse botão, e ele é excluído agora ou posso usar o botão de exclusão também. Como você pode ver, estamos trabalhando em nosso aplicativo de vírgula de carrinho de clique Então, digamos que eu queira começar meu fluxo a partir desta página. Portanto, neste caso, posso simplesmente ir para a configuração do Ptype e adicionar um novo fluxo, e posso dobrá-lo e renomeá-lo Digamos que seja um cartão de clique. Eu posso nomear, é um cartão de clique. Aplicativo Clickard. Eu posso simplesmente renomeá-lo. Você pode estar pensando por que temos fluxos diferentes. Bem, isso ajuda a organizar o protótipo E, especialmente ao lidar com projetos complexos Cada fluxo é um enredo separado para o comércio. Primeiro, criamos esse fluxo. Depois disso, temos esse reboque e juntamos essas sobreposições. Isso é uma jornada e nos ajuda a organizar nossas coisas. E há mais uma coisa, digamos que você queira adicionar uma descrição a esse fluxo. Então, basta clicar nesse fluxo e ir aqui e clicar no aplicativo de lápis, descrição. E posso dizer que esta é a página inicial. OK. Se eu fechar isso, se eu for apresentar e o que foi esse. Como pode ver, esta é a primeira página, clique em carp. Nossas partes interessadas ou clientes saberão qual é o significado disso? Há outra coisa muito legal como digamos que você queira compartilhar seus fluxos. Nesse caso, quero compartilhar meu fluxo número dois. Eu posso simplesmente copiar este link. Você pode dizer que há um botão de link, vamos copiá-lo e ele nos dará a URL. Se eu colar aqui, para que você possa ver, temos nosso fluxo dois e atualmente existem duas contas anônimas. Eles estão usando nosso fluxo e podemos acessar nossos fluxos. Mas não sei por que falta algo. exemplo, acho que há uma falha ou algo parecido porque não estamos presos ao Figma no momento Mas por que eles estão mostrando todos os fluxos. Isso deveria nos dar apenas um fluxo, não todos eles. Se isso estiver acontecendo com você, por favor me avise. Portanto, o benefício do link é que você pode compartilhá-lo diretamente com os membros da sua equipe , com seus clientes e com seus amigos. Você só quer, Oh, deixe-os saber. É assim que estou trabalhando, e é assim que parece, e é assim que funciona assim. Portanto, os fluxos resumidos são o enredo do seu design, ajudando você a navegar por tipos complexos com facilidade Renomeá-los e adicionar uma descrição é a chave para manter tudo organizado e organizado Então, tudo bem, essa é a baixa taxa de fluxo. Pronto para mais magia. Junte-se a mim no próximo vídeo e vamos continuar criando designs incríveis. 82. Transições de sobreposição de prototipagem no Figma: claro que os criadores se confundem porque é hora de prototipagem Estamos prestes a mergulhar no incrível mundo de dar a você a vida de click card alto em uma figura. Botões brilhantes do sul que realmente fazem coisas, mais transições que proporcionarão ao usuário uma tela interativa que parece mágica Agora eu sei que alguns de vocês podem ser profissionais da Pigma que já usam protótipos Mas, ei, para todos os outros que estão sentindo essa prototipagem. E agora? Ping, não se preocupe. Este vídeo é um guia amigável do básico. Daremos pequenos passos, conectaremos telas, adicionaremos interação e criaremos seu aplicativo de cartão de cliques, parecendo uma obra-prima suave e amigável Então, vai ser fácil. Estamos mantendo as coisas simples, mesmo que você nunca tenha tocado em figma antes Pense em impressões digitais, mas com pixels e uma incrível ferramenta de design sente aventureiro, se você conhece os passos, pause o vídeo e mostre suas habilidades Então, vamos criar uma comunidade de cliard protypingGUR. Ok, sem vergonha. Eu sei que alguns de vocês podem se sentir perdidos. Isso é uma rede de segurança. Vamos detalhar, responder às suas perguntas e garantir que todos cheguem à linha de chegada. Do qual um protótipo pode se orgulhar. E vamos transformar a visão do Clickart em realidade interativa clicável Então, vamos. Ok, então eu já tenho algumas falhas nele e que são totalmente desnecessárias Ok, vamos primeiro ao protótipo. Deixe-me intercalar este porque quero mostrar tudo desde o início Ok, então, quando você entrar em uma ressecção, haverá alguns pontos como este, e só precisamos conectá-los Essas são, e depois de conectá-las, relacionamos algumas opções. Como no toque, ele precisa navegar até a página inicial e a animação é instantânea Quero que seja depois de um atraso. Eu não quero que isso fique em uma conta. Então, depois de 800 milissegundos, você tem que ir para esta página Então, estamos contando isso para Figma e queremos que seja uma animação de disol Se você quiser, pode configurar a animação inteligente, mas o problema com a animação inteligente é como se você fizesse coisas estranhas às vezes Então, na maioria das vezes eu uso dissolver. Ok, então funciona. A animação inteligente funciona em exemplos complexos. Então, vamos ver essas coisas no futuro d. Então, para isso. Então, nesta proposta, vamos fazer uma prototipagem simples. Ok, então terminamos com o primeiro. Principalmente, já aprendemos sobre esse fluxo. Então eu o renomeei. Então eu a chamei de provavelmente carpa. Então, a partir daqui, nosso fluxo vai começar. Ok, então terminamos com este, e vou mantê-lo como está porque precisamos dos pop-ups em nossa tela, bem como desse termo e condição. Agora queremos conectar esse menu de hambúrguer. Portanto, este é o ícone do menu de hambúrguer. Então, vou conectar este com este menu. E tudo bem, atualmente está no caminho certo e na guia não está animal porque acho que já adicionei isso. Então eu preciso remover esse , esse também. Então, vamos fazer isso do zero. Quando alguém clica nela na aba, agora vamos para a página de hambúrguer, mas eu não quero tudo isso Então, há uma coisa que Figma lembra de sua animação anterior Então, na coisa anterior, nós adicionamos. Dissolver. Ele mantém aquela coisa de dissol Portanto, tenha isso em mente. Se você quiser alterá-lo, alterá-lo ou se quiser mantê-lo, você pode mantê-lo. Nesse caso, eu quero me mudar. Eu quero que essa animação seja do lado esquerdo assim depois de 300 milissegundos. Vamos definir esse menu de hambúrguer também. Quando clicamos nessa seta para trás, ela precisa ir para a página inicial. Mas atualmente na aba, estamos nos mudando. Então, se eu usar esse menu de hambúrguer, como você pode ver, ele está deslizando para dentro, mas quando clico nessa seta para trás, como você pode ver, não funciona como eu quero Então, neste caso, queremos que isso seja uma mudança, e tem que ser do lado esquerdo, assim. E também adicionamos algumas animações. Então, vamos manter este. E se eu colocar meu menu de hambúrguer novamente, como você pode ver, ele desliza para dentro e para trás, saia Ok, então é assim que deveria funcionar. OK. Agora terminamos com este. Então, digamos que vamos com a moda. E vamos unir essa moda com esse sapato. Sei que essa é uma forma apropriada porque, na moda, temos muitas categorias, e vou apenas acessar a página de discussão do produto sobre sapatos. Na guia, acesse os detalhes do produto e quero que seja D all or instant. Use o exemplo. Vamos jogar novamente a prévia depois das 800, entendi bem, não quero essa moda. Assim. É um instante. Se eu definir isso para dissolver, vamos ver como funciona. A moda se dissolve. Funciona melhor. Vou manter o diesel de introdução e diminuir 300 milissegundos. Ok, agora, vamos trabalhar na página da conta. Sempre que o usuário clica nesse humor, nenhum humano gosta de um ícone como este, e ele precisa ir para minha conta Eu adicionei uma coisa simples. A página gcc e o disol foram lançados e 300 milissegundos. Se eu clicar nisso, como você pode ver, tudo se resolve, e agora estamos nesta página fraudulenta Ok, agora eu quero voltar. A partir daqui, eu não posso voltar. Eu posso simplesmente apertar este botão i. Ok, então eu quero voltar para minha página inicial. Então, quando eu pressiono Voltar, você tem que ir para a página inicial, e eu adicionarei algumas entradas básicas. Navegue em casa, Disol está fora. A mesma coisa. Se eu clicar nesta página inicial. Isso é legal. OK. Qual é a próxima coisa? Ok, sem motivo, eu adicionei este, então vou tratar este porque não queremos aquele Ok, agora vamos projetar a categoria. Como você pode ver, somos a página da categoria, mas o ícone inicial está destacado. Então, eu quero que isso seja destacado. Então, vamos ao design e à seleção de cores. Ok, agora está ótimo. Então, sabemos que estamos na seção de categorias. Ok, agora eu tenho que me juntar a todos eles. Atualmente, estou projetando painéis, então vamos fazer um protótipo em que você estará em uma categoria como esta aqui, e vou manter as coisas simples categoria negativa acabou. A mesma coisa. Ok, agora, vamos juntar meu pedido. Eu sei que está um pouco longe das edições da página inicial. Minhas ordens estão no final. Você pode usar esse método, como arrastar e encontrar seus pedidos, e também pode encontrá-lo aqui Mas eu sei que criei muitas coisas nesta moldura. E temos um monte de molduras, bem como páginas, vamos lá. Se você é uma pessoa organizada, então não vai ficar confuso assim OK. Então, meu pedido, a mesma coisa. Animação, tudo isso. E notificação de notificação. Vamos participar da notificação. A notificação está onde está, está aqui. Vamos notificar e Minha notificação. É minha notificação, eu acho. Mas eu tenho duas notificações minhas. Eu não sei por quê. Ok, vamos nos juntar a este. Vamos ver. Isso é certo ou não. Ok, esse é o certo. Agora funciona. A última coisa é que eu tenho que entrar na minha conta. Minha conta, onde está minha conta. Essa. Ok, então juntamos quase 80% ou talvez 70% do nosso design. Vamos jogar do jeito que parece. Depois de 800 segundos após 800 milissegundos, temos esse pop-up. Eu não quero esse. Vamos para a categoria. E, novamente, eles não estão unidos, então temos que nos juntar a isso. Se eu clicar na parte de trás para trás, posso ir direto para o campo inicial Eu também tenho que mover essa coisa um pouco para cima. Então, deixe-me ir para o campo em casa e acompanhar isso até o topo. Ok, isso será suficiente, eu acho. Ok, então eu adicionei todo o vício a essa barra de navegação, mas temos um benefício. Então esse é para Dark Mo, e esse também é para Dark Mo. Então, neste caso, posso simplesmente copiar este e colar aqui, e funcionará da mesma forma. Então, se eu arrastar para fora, e se eu copiar controle C e ainda o quadro e o controle, nós, como você pode ver, tudo funciona bem. Mas só precisamos mudar a cor. Então, esta é a minha ordem. Então, vou ao painel de design e mudo a cor, este, e a notificação de minot será a terceira principal Isso é bom para digitar. OK. É suposto, está funcionando. Está funcionando, mano está trabalhando. Não criamos uma página de carrinho, mas podemos simplesmente redirecionar para a página Mold Vamos supor que, se você adicionar ao carrinho, ele faça o pedido automaticamente. Tem IA dentro. Ok, agora vamos jogar com este aplicativo. Acho que entrei em tudo. Então, temos que aparecer. Eu não quero essa moda. Ok, adicione ao carrinho um abre. Como você pode ver, há um ponto quente. Se eu clicar no espaço em branco, ele destaca algumas partes, e elas são chamadas de pontos quentes. Digamos que eu queira ir para a categoria. Eu posso simplesmente clicar nele, mas acho que estou categorizando. É quadrado. Vou mudar isso e vamos para a conta inicial. Falsa. Tudo funciona. Esta é a prototipagem básica para este aplicativo, e deixe-me ir para a categoria Está funcionando bem. Tem a mesma cor, mas não sei por que está mostrando o retângulo vermelho Vimos tudo na pré-morte e vamos ver em uma tela grande um protótipo real E meu fluxo é esse. Clique no aplicativo de carrinho. OK. Pop, vamos aparecer. OK. Depois disso, os pedidos das categorias C e Acme são contabilizados De volta para casa, Pogo, funciona. Funciona. Também podemos juntar essas duas páginas, categoria inicial, lista de sites de modificação de meus pedidos Não criei essas páginas porque achei que nosso projeto se tornaria muito pesado. OK. Então aí está , meus amigos, prototipagem básica para nosso aplicativo de carrinho Então, obrigado por se juntar a mim nesta aula, e eu vou falar com você na próxima. 83. Projeto do curso 15: Pop Up e Flow como um profissional: interações de prototipagem no Figma: Figma pos, esta é a hora do projeto. Neste projeto, temos que criar pop-ups, criar pop-ups atraentes com as ferramentas Figma Você pode usar formas de coisas, cores, texto, talvez até animação. Conecte esses pop-ups às páginas, usando suavemente o Over E depois disso, crie inception. Sem início Quero dizer, se você clicar nos termos e condições, ele tem que abrir, e esse é o início Você tem que criar a inception. E você também pode criar esse. Quando você clica no botão ie, ele precisa abrir. Este pequeno menu. Também é chamado de dica de ferramenta, eu acho. Depois disso, você precisa unir todas as coisas usando prototipagem, e já vimos Assim, você também pode usar fluxos E se você também puder usar um único fluxo. Depende totalmente de você. E depois de projetar e unir todo o seu design, faça uma captura de tela e envie para mim na seção de projetos Então, isso é tudo sobre o nosso projeto 15, eu acho. Talvez eu não saiba qual era o número. Outras coisas também estão disponíveis em pedófilos todas essas coisas e submetam-se a Então isso é uma foto, e eu vou ver que você está no outro mundo. 84. Rolo pegajoso na Figma: Co-designers, nesse clima, estamos mergulhando no mundo da fixação de elementos na parte superior e inferior Essa técnica adiciona um toque de condicionamento físico ao nosso design, permitindo que o conteúdo deslize suavemente por trás dos elementos fixos E então, o mundo legal da rolagem horizontal em figma você está pronto para melhorar seu jogo de design ? Então, vamos começar. Então, antes de começarmos nosso vídeo, deixe-me mostrar uma coisa. Então, se eu for apresentar, como você pode ver, se eu rolar isso, como você pode ver, essa barra de navegação também está rolando com nosso design. E eu não quero isso. Deve ficar aqui, tipo, no mesmo lugar, e assim como com esta, nossa barra de navegação superior. Então, se eu rolar. Como você pode dizer, vai para cima, mas eu quero que isso fique aqui Dessa forma, aprenderemos isso, assim como a rolagem da vérdica ou a rolagem horizontal Portanto, é muito simples. Vamos selecionar a página inicial e vamos ao protótipo E eu sei, existe uma loucura de vários multiversos. Mas estamos interessados nessas duas coisas, como barra superior, desculpe, navegação na barra superior e botão de navegação inferior Então, vamos começar com a barra superior. Então, basta selecionar isso. Espero que você tenha adicionado todas as coisas no quadro. E deixe-me verificar. Ok, eu adicionei no Cmd Car frame é a mesma coisa, não é a mesma coisa, mas adiciona tudo no quadro Como você pode ver, estou no protótipo agora e a barra de rolagem é rolagem com o pai Eu quero que o top n bar fique no mesmo lugar. Então, vamos escolher fixo e transbordar. Portanto, atualmente, ele não tem nenhum item de transbordamento, como qualquer imagem ou retângulo transbordando fora Então, vamos continuar como está, transbordando, sem rolagem. E agora, se eu rolar isso. Então, como você pode ver , ele permanece lá. Ele não se move com a moldura inteira. E agora vamos mudar essa e essa também. Então, como você pode ver , ele também está se movendo. E eu também quero que este fique no mesmo lugar. Então, vamos escolher essa foto no mesmo lugar, assim como essa O mesmo aqui, corrigido como mais simples e sem rolagem. Agora, se eu verificar meu aplicativo, como você pode ver, tudo fica no mesmo lugar. Então, estamos apenas fixando nossos elementos. Então foi muito simples. Ok, isso era tudo sobre como fixar todos os elementos em uma fuma Mas, como você vê, nossa moldura está embutida e eu não gostaria disso Quero que nossa moldura seja assim. E você pode ver que os elementos estão fora da moldura. Então eu preciso clicar no conteúdo do clipe. Agora eles são clipes. Então, eles não são excluídos, na verdade. Então, se eu for ao aplicativo e rolar para baixo, como você pode ver, tudo está lá Ok, então é assim que o conteúdo do clipe funciona. Agora, deixe-me mostrar como rolagem vertical ou horizontal funciona Então, atualmente, temos rolagem vertical, mas eu quero adicionar uma rolagem horizontal Então, acho que adicionei um layout diferente. Então, se eu escolher este, o décimo layout, como você pode ver, o conteúdo está fora do quadro e podemos usar o conteúdo do clipe. E deixe-me rastrear isso a quadro e o mesmo com este. Deixe-me recortar a moldura. Não, corte o. Estou apenas ajustando. OK. Agora, se eu for aos produtos de moda, role-os, como você pode ver. Ok, acho que tenho que ir até o descarril do protótipo P. Ok, não há rolagem. E vamos adicionar uma rolagem. Isso deveria ser ou mais ou menos? Não. É vertical. E agora, se eu verificar, como você pode ver, consigo rolá-lo. Mas nas cartas, não consigo rolar. Então, neste caso, eu quero adicionar a rolagem horizontal. E role o pai também . Isso vai ser o mesmo. Agora, se eu redimensioná-lo, vamos para a página de detalhes do produto e, como você pode ver, posso rolá-lo verticalmente e posso rolá-lo horizontalmente É assim que a rolagem vertical e rolagem horizontal funcionam no Figma Mas esses elementos não estão fixados. Deixe-me fixar o Elemento. Vamos ficar aqui, mesma casa, assim como esta. Se eu verificar agora, como você pode ver , parece mais legal. Há uma coisa que eu fiz aqui. Como você pode ver, adicionei essas opções de categoria na caixa, mas podemos convertê-las em rolagem vertical Fiz uma demonstração do registro da página inicial e adicionei a rolagem horizontal, e adicionei a rolagem horizontal ela rola com a mãe e, atualmente, não está rolando Deixe-me escolher a horizontal e deixe-me recortar o continente assim. Agora, deixe-me apresentar este. Então, como você pode ver, eu estou presente agora, e eu posso fazer isso. Se você quiser, você também pode escolher este, assim como este. Mas, do meu ponto de vista, isso parece mais legal. Mas se você puder fazer isso, parece uma tag So, isso é tudo sobre rolagem vertical, desaceleração horizontal e também como fixar seus elementos na parte inferior e na Então, filhos, isso é tudo sobre rolagem vertical , rolagem horizontal e como fixar cada elemento na parte inferior e na Sei que esse vídeo pode ser um pouco mais longo e confuso. Mas está repleto de informações valiosas para enfrentar possíveis desafios. Então continuem com isso e eu vou falar com vocês na próxima. 85. Como criar animação de rolagem automática no Figma: missão de Maxie and Tags é dominar a arte da rolagem automática Então, aperte o corneta, aqui se chama elogio. Então, como você pode ver, eu abri uma janela anterior meu Figma e na minha área de trabalho E se eu clicar na eletrônica, como você pode ver, ela rola automaticamente Eu não o rolei manualmente dessa forma. Então, ele rola automaticamente. Dessa forma, vamos aprender isso, como podemos fazer isso. Figma. Então, antes de fazermos isso, deixe-me falar sobre o conteúdo do clipe. Acho que, na pressa, eu te contei, mas não foi em detalhes, então pensei deixe-me dizer o que é o conteúdo do clipe. Ok, então imagine sua forma com um delicioso prato de comida, mas está transbordando na toalha da mesa Não é para substituir, certo? conteúdo do clipe Inf é como colocar uma bandeja de servir sob sua obra-prima de design É manter tudo limpo e organizado, ocultando todas as peças que se espalham fora do design fora da área de design Então, aqui está como funciona. Ok, então deixe-me mostrar como o conteúdo do clipe funciona. Então, vou selecionar a página inicial. E, como você pode ver, a tela do nosso telefone está aqui, mas nosso conteúdo está lotado. Então, neste caso, atualmente escolheu o conteúdo do clipe. Mas se eu selecioná-la e tentar fazer com que minha moldura seja igual a esta, igual à tela real do celular, como você pode ver, ela está transbordando Portanto, nesse caso, podemos simplesmente ativar o conteúdo do clipe e, como você pode ver, ele é invisível. Está lá, mas é invisível. Se eu for para as camadas da página inicial, como você pode ver, elas estão lá Eles estão simplesmente invisíveis por enquanto. Se eu quiser vê-los, basta clicar no conteúdo do clipe como este, e eles estão visíveis agora. Então, deixe-me falar, porque eu quero te mostrar a rolagem automática A vantagem do conteúdo do clipe é que ele reúne nossos ingredientes, como se eu reproduzisse todos os elementos que você deseja criar com texto, imagens formas dentro de uma moldura Pense em uma moldura como uma placa em U. Quando você clica no conteúdo do clipe, é como dizer ao aplicativo: Ei, mantenha tudo dentro da moldura. Sem espreitar, como um escudo mágico. Tudo o que transborda atrás da moldura desaparece, criando um design limpo e polido Lembre-se de que o conteúdo na verdade não desaparece, apenas se esconde atrás do escudo invisível. E você pode estar pensando onde podemos usá-lo. Você pode usá-los ao criar maquetes. Ele pode recortar nosso conteúdo tamanho do quadro para imitar os limites da tela Também podemos usá-los ao criar protótipos, como você pode ver Atualmente, vamos fazer um protótipo. Portanto, nesse caso, ele mantém todos os elementos dentro de uma moldura para que eles não se sobreponham ou baguncem a pele Também nos ajuda na construção de componentes reais. Esse recorte o conteúdo no quadro para definir limites claros para o elemento quando planejamos reutilizá-lo em todo o design Então, lembre-se de que o conteúdo do clipe é o seu quadro. Isso ajuda você a apresentar seu design profissionalmente e evitar transbordamentos confusos. Ok, então isso era tudo sobre o conteúdo do clipe. Agora vamos falar sobre como fazer a rolagem automática. Então, eu quero o recurso de pontos. Quando eu clico neste botão eletrônico, ele tem que marcar automaticamente para esta TV. Então, para esse efeito, vou usar o protótipo, e acho que ele foi selecionado e eu o criei Ok, então deixe-me fazer isso. Vamos fazer isso do zero. Ok, então deixe-me escolher eletrônicos, e eu vou juntar isso com uma TV. E temos essa opção. Em uma guia, ele deve rolar até o quadro 28, e esse é o quadro 28, e atualmente não adicionamos y upset e xbset Então, vamos adicionar isso. Mas primeiro, deixe-me contar como funciona. Então, atualmente, é uma animação. Defina a animação, então vamos ter a ideia. Ok, então estamos na página inicial. Se eu clicar na eletrônica, ela rola para este cartão Isso é eletrônica, TV com até 70% de desconto. Ok. Então, agora vamos mudar para animação. E se eu clicar nela agora, como você pode ver, ela rola muito e tem um efeito suave nela Ok, então você pode estar pensando no que são esses? Eles são apenas contrários a x e y. Então, digamos que eu coloque o valor em, tipo, -500 E agora, se eu for à nossa prévia e clicar na eletrônica, como você pode ver, ela vem aqui, mas eu quero que esta placa esteja aqui quando eu esteja aqui quando eu apertar o botão eletrônico. Então, neste caso, vou digitar algo como 250. Portanto, não é tão preciso. Você precisa apenas brincar com isso, porque o valor pode ser diferente para molduras e designs diferentes. Então, deixe-me fazer isso de novo. E como você pode ver, ele vem aqui. Então eu já joquei com este, então eu realmente sei que os dois 50 funcionam melhor para ele. E você também pode fazer a mesma coisa conosco. Então, vamos reutilizar. Estes são nossos produtos “nós mesmos”. Página. Então, essas são avaliações e eu vou me juntar a essas avaliações. Então, sempre que eu vou clicar nesse botão de avaliação, ele precisa rolar automaticamente até essa avaliação. Então, vamos conferir essa moda e clicar na resenha. Como você pode ver, ele rola. Ok, agora, digamos temos uma página bem grande como esta, e o clipe não contém essa página. Então, quando eu clico neste botão traseiro Aca, ele rola demais. Eu quero que eu venha aqui, não desse jeito. Então, neste caso, vou selecionar nosso proto fio e vou jogar com o número Então, deixe-me somar isso até 300. Ok, eu tenho que colocar meu padrão. E agora, se eu clicar nisso, deixe-me verificar se funciona ou não. Ok, então funciona. Mas se trata de potes de metal. Eu quero que isso fique no meio. Então, deixe-me alterar o valor para cerca de 500. Ok, -500. Agora, deixe-me verificar novamente , agora funciona. É assim que eu me sinto. Então você só precisa jogar com os offsets, x e y. Mas imagine, digamos que minha página seja assim e os valores atualmente estejam assim. Agora, se eu clicar na resenha, como você pode ver, fica assim. E quase derramado Então, como você pode ver, definimos até 300 milissegundos. E podemos configurá-lo em 1 segundo. Vamos definir isso. E eu sei que vai ser muito lento. Então, como eu disse, com 1 segundo, é muito lento. Mas acho que 300 é como uma inadimplência oficial divulgada. Você só precisa experimentar, tocar e encontrar seu ritmo. Então, temos amigos rolando facilmente uma página para baixo, como um figma metro Qualquer coisa clicável pode ser seu filho. Então vá em frente com esse pergaminho, coloque alguma animação e faça seu design dançar. Então, vejo você na próxima. 86. A diferença entre equipes, projetos e páginas: Olá pessoal, vamos mergulhar no universo Figma e revelar os mistérios das equipes, do projeto e do arquivo de design Então, aperte o corneta, vai ser esclarecedor. Em primeiro lugar, arquivos são mágicos, que estamos considerando até agora. Esse é o projeto em que estamos trabalhando. Eles podem se resfriar em uma jangada ou entrar em um projeto. Vamos voltar para as equipes. Pense na equipe como uma grande ala. Então, como você pode ver, eu tenho várias equipes aqui. Então, caso esteja fechado, basta clicar nele e ele abrirá. E no meu caso, eu tenho várias equipes. Então, no curso anterior ou durante o ensino no mural. Então eu criei esses projetos, e eles têm um projeto. E todos eles são gratuitos, e este é pago porque eu tenho um relacionamento muito bom com a Webma, então um dia, eles me enviaram um e-mail e disseram: Você pode ter uma equipe de graça por três anos Então eu fiquei tipo, claro, por que não? Eu terei uma equipe livre por três anos. E eu tenho isso e não uso muito, mas sim, eu comprei de graça. As equipes podem ser o nome ou divisão de uma empresa, como vendas, marketing ou alguma região específica. Dentro dessa equipe, existem projetos diferentes. Por exemplo, como você pode ver, eu tenho isso, vamos nos referir ao projeto de aplicativo, pois fiz um aplicativo de entrega de comida e tenho esse aplicativo de entrega de comida, bem como um wireframe E nessa equipe imaginária, eu tenho essa coisa de rolagem, bem como a cópia do aplicativo de cartão de clique no projeto MCU, eu tenho uma plataforma ait Eu criei isso. Foi realmente deixe-me te mostrar. Ok, esse. Eu criei essa plataforma OTT para MCO. Foi no curso anterior e enquanto eu estava ensinando. Naquela época, criei esse projeto. E dentro de uma única equipe, você pode ter um site, versão móvel desse site, versão do aplicativo até mesmo alguns arquivos relacionados a um grande lançamento. Agora, na versão gratuita, você pode ter muitas equipes de sua preferência, mas há um problema, apenas um projeto dentro dela Então, como você pode ver, essas são versões gratuitas. E se eu tentar clicar no botão de adição, e se eu tentar adicionar, ele me pergunta: você deve pagar. Sem dúvida, você não tem permissão para adicionar outro projeto, mas com a versão premium Então, neste caso, eu tenho uma equipe de graça, então eu posso adicionar quantos projetos eu quiser aqui. Para compartilhar o amor pela Figma com outros designers ou colaboradores, você os adiciona à equipe, para que eles possam acessar todos os projetos É como um passe para os bastidores do mundo do design R. Então, digamos que isso é meu, vamos fazer um CVD deste. E nisso, eu quero adicionar um membro da minha equipe, para que eu possa adicioná-lo compartilhando neste link ou eu posso simplesmente adicionar seu LID para que eles possam acessar tudo, que está presente dentro da minha equipe, eles podem acessar este arquivo, esse arquivo, esse arquivo ou qualquer coisa dentro deste projeto. Além disso, eles podem editar. Se você der a permissão, eles também poderão editar. Então você pode estar pensando: por que temos rascunhos e arquivos dentro dos projetos Pense no recrutamento como um esconderijo secreto. É onde você testa seu trabalho antes que ele esteja pronto para ser visto pelo mundo. Sem junho, sem olhos de oração. Só você e seu processo criativo. Os projetos, por outro lado, são os irmãos organizados ou os rascunhos. Eles permitem que sua equipe ou qualquer pessoa com quem você compartilhe a equipe encontre facilmente um arquivo de acesso público ou privado que você decidir. Deixe-me te mostrar uma coisa. Agora, digamos que você tenha concluído um projeto como este. Nesse caso, eu criei esse aplicativo. Ok, esse telefone era o aplicativo. E eu quero adicionar isso à equipe, que eu possa simplesmente arrastá-lo e colocá-lo aqui E pode abrir isso. Então, como você pode ver , está presente aqui, mas eu uso três dos três arquivos. Então, se eu tentar adicionar outro, ele dirá: pague, pague porque esta é uma versão gratuita. Mas se você fizer isso em uma versão paga, ele adicionará quantos arquivos você quiser. E é ilimitado. Agora eu sei que você pode estar pensando não posso simplesmente manter tudo em um rascunho e compartilhar quando estiver pronto Claro, você pode. Se você estiver trabalhando sozinho, então, vá em frente. Mas se você estiver trabalhando com equipes ou vários parceiros, vá com os projetos, com as equipes como esta. Quando comecei a aprender Figma, como em 2000189. Dessa vez, digamos que eu queira adicionar alguém ao meu arquivo enquanto estou usando o rascunho. Então essa pessoa só costumava ver o que eu estava fazendo. Essa pessoa não consegue editar. Mas agora a Figma atualizou sua versão gratuita. Agora, se você adicionar alguém em seu tum, você pode dizer que essa pessoa pode editar o design ou não, ou você pode simplesmente defini-la como uma visualização Ou você também pode transformá-los em próprios. Eu dependo totalmente de você. E aqui está a questão da limitação A versão gratuita permite apenas um projeto por equipe e cada um com no máximo três arquivos. Então, se eu abrir equipes. Como você pode ver, adicionamos três, e está aqui, como se fossem usados três arquivos pthree, e corrija os arquivos de salto que não estamos usando o arquivo fijum Então, usamos todas as três páginas. E com pm eu posso adicionar arquivos ilimitados. Mas espere, existe uma dica de lúpulo, e se um estudante ou educador gosta de mim, há uma opção de casamento para Vá até fakmot com e confira. Não sei qual é o plano atual para estudantes e educadores, mas acesse figmotcm Então, todas essas são as diferenças entre entregas e equipes. Então, pessoal, esses são seus profissionais e eu vou ver na próxima 87. Figma Criar uma biblioteca de equipe compartilhável: Bem-vindo de volta ao seu designer. Hoje, eu quero te mostrar algo legal. Como você pode ver, estamos em rascunho agora e eu crio um arquivo de design. E esse é um arquivo vazio. Vamos ao telefone Frames Iphone 15 P max. E eu vou entrar em ativos. E como você pode ver, há um livro. É chamado de biblioteca. Então, vamos clicar na biblioteca. E na biblioteca, eu tenho uma opção chamada recortar uma cópia e os 20 componentes e 29 estilos. Então, se eu adicionar, como você pode ver, nossos painéis de ativos têm nossos componentes desse aplicativo, que criamos. Ao projetar este aplicativo, criamos esses componentes, tecidos e estilos de cores Podemos usar todas essas coisas neste arquivo de design. Para que eu possa rastreá-lo. Eu posso adicionar o principal amino assim, posso adicionar um botão de navegação como este e também posso adicionar todo o estilo. Então, deixe-me adicionar um texto. E se eu for até essa coisa, como você pode ver, todos os tecidos estão presentes aqui, e eu posso simplesmente digitar algo aleatório bs e a mesma cor Vamos desenhar algo parecido com este e a cor pode ver que todas as cores estão presentes aqui. A cor primária, segunda cor cinza, cor natural, estridiente Tudo isso é possível por causa desse botão da biblioteca. Hoje estamos mergulhando no mundo Mose das bibliotecas de equipes em Figma Brace, digamos, para uma jornada esclarecedora Então você está pensando no que exatamente são bibliotecas de equipe, imaginamos um reino mágico Onde todos os seus componentes e estilos residem em seu documento, conectando-se à criação futura e até mesmo a outros membros de sua equipe. Essa é a essência das bibliotecas. Ao carregar seu ativo de design aqui, você está abrindo a porta de entrada para que outros documentos aproveitem a riqueza de seus estilos e componentes, promovendo Então, vamos criar bibliotecas. Antes de fazermos isso, deixe-me cancelar a publicação da biblioteca anterior, esta, Unpublished OK. Ok, então há um aviso Se você estiver usando a versão gratuita e não quiser usar esse recurso. Você pode pular isso totalmente porque esse é o recurso premium O FIPMA não permite esse recurso para usuários gratuitos, portanto, lembre-se Mas, para saber, veja o vídeo. Mas deixe-me dizer se você tentar fazer isso na versão gratuita, o que acontecerá? Então, digamos que, atualmente, temos esse arquivo. Criamos em rascunho e é gratuito. Ok, este é um arquivo gratuito. Digamos que, se eu acessar ativos em bibliotecas e tentar publicar isso, como você pode dizer, há um pop. A FICMA diz que mova esse arquivo para um toque profissional para publicar todos os componentes E você tem que ter uma equipe profissional. Eu uso um gratuito, não vou conseguir fazer isso. Então, eu tenho uma equipe profissional que recebi da Figma. Acho que eles viram meus cursos e meu trabalho. Então eles disseram que você pode ter uma equipe gratuitamente. OK. Eu adicionei nosso projeto a isso. Eu fiz uma cópia e a adicionei aqui. Então esta é a versão copiada. E vamos clicar em um. Então, vamos te envolver nisso. Atualmente, estou no painel de componentes, como na página de componentes. Agora eu quero publicar este. Então, vamos ao ativo, clique no botão Biblioteca de livros. Agora eu posso publicar este. Então, se eu clicar em publicar. Como você pode ver, todos os componentes do estilo de cores têxteis estão prontos para serem publicados Se eu clicar na publicação, levará algum tempo e ela será publicada, e podemos usar em qualquer lugar do nosso design, em qualquer lugar de nossos projetos, bem como em equipes. Ok, então foi publicado com sucesso. E se eu for aos rascunhos e criar um novo arquivo de design, ele estará vazio Como você pode ver, vamos adicionar uma biblioteca de ativos de 15 P e, como você pode ver, ela está aqui. Portanto, ainda não foi adicionado. Então, eles são adicionados e isso não é adicionado. Então, vou clicar em Adicionar um arquivo. E agora meu painel de ativos está cheio de camaradas. Ok, eu posso simplesmente rastreá-lo assim. Use esse, use esse. Eu posso criar meu arquivo. Eu sei que essa não é uma maneira profissional de fazer as coisas, mas você entendeu, como funciona. Lembre-se de que isso é apenas para a versão profissional, não para a versão gratuita. Deixe-me fazer isso de novo. Há mais uma coisa que você pode fazer para ver esses arquivos, como Unicorn ou Status Bar Você pode criar uma equipe especial e descartar todos os componentes e recursos, publicar esses ativos e usá-los em suas equipes Acho que com unicórnios, eles fizeram as costuras, despejaram todos os ícones, recursos têxteis, cores em um único arquivo, e podemos simplesmente publicar essa coisa e usá-la diretamente em nosso projeto Não precisamos entrar neste e copiar e colar neste. Então, esse é um processo demorado. Podemos simplesmente publicar este e usá-lo onde quisermos. Agora, deixe-me te mostrar uma coisa legal. Atualmente, estamos no painel Coons, e esses são todos os componentes que estamos usando nas bibliotecas E digamos que, por algum motivo, você queira mudar a cor disso, assim como desta. Vamos enlouquecer. E, como você pode ver, no painel de ativos, há aplicativos de um ponto, assim como neste livro, os aplicativos de ponto azul. E na biblioteca, como você pode ver , diz quatro mudanças. Então, se você clicar em publicar, essas são as quatro alterações. Se você quiser publicá-lo, você pode publicá-lo. Então, está nos dizendo que essas quatro mudanças foram modificadas agora. Se eu clicar na publicação, tudo bem. Agora, se eu for até esse arquivo, que ainda não está atualizado. Às vezes, aparece aquele pop-up como se dissesse que algo mudou. Você quer revisá-lo? Mas, atualmente, não consigo ver isso. Acho que há uma falha ou algo assim, mas você pode fazer a mesma coisa aqui Enviei o livro. Novamente, temos essa notificação. Diz uma atualização. Este botão foi atualizado, você quer atualizá-lo ou não? Vamos clicar na atualização. Se você quiser atualizar um único item, se quiser atualizar todos eles, basta clicar em Atualizar tudo, e agora ele está atualizado. Deixe-me mostrar como esse pop-up parece. Ok, é assim que esse pop-up parece. Digamos que você atualize alguma coisa e queira atualizar essa atualização. Eu sei que parece estranho. Se você quiser atualizar esse item substituído, você pode revisá-lo primeiro para saber qual coisa está oritada e agora você quer atualizar Este é o que foi atualizado e se você quiser atualizá-lo, basta clicar na atualização. É assim que o pop funciona. Mas você pode fazer a mesma coisa aqui se o pop-up não aparecer. Esses são todos os poderes da biblioteca. Mas lembre-se de que com grandes poderes vem uma grande responsabilidade. Se você atualizar um componente na biblioteca, isso não interferirá automaticamente com seus direitos sobre outros documentos Seus ajustes estão sãos e salvos. Em poucas palavras, as bibliotecas de equipe no Figma são orientações sobre design, consistência, colaboração e eficiência Vá em frente, crie, compartilhe e projete como um mago com as bibliotecas mágicas da Figma Então, estádio para mais aventuras de Figma no próximo vídeo. 88. Animação VS Micro InteraçãoNa Figma: Uma mente criativa. Hoje, estamos mergulhando no mundo da feitiçaria de design Onde pequenos carrapatos podem desencadear uma experiência mágica para o usuário. Então, vamos falar sobre dois feitiços poderosos que são microinteração e animação Imagine sua UI e UX como o palco. Cada guia de rolagem de clique é um artista. Mas às vezes precisamos de algo extra para manter o público hipnotizado É aí que entram duas estrelas. Com microinterações, elas se infiltram no mundo do design. Pequeno movimento sutil que sussurra. Eu me importo com isso. Para usuários R. Assim como o coração de um instrumento, como uma animação, Sury faz uma pausa e o coração cresce suavemente quando você toca nele, proporcionando gratificação do instrumento e confirmando a ação do Agora pense na seta de atualização do Twitter que aparece como um alfinete Representando visualmente o esforço que você está dedicando ao seu novo conteúdo. Até mesmo o pop-up de notificação de bate-papo do Facebook agarra sua audição sem ser cansativo Como uma pequena bolha se expandindo e piscando quando você recebe uma mensagem E quem pode focar na divertida animação de sequência do Snapcha, que os ícones de fogo crescem entre amigos em dias consecutivos, adicionando a sensação de diversão e a combinação de manter Agora, vamos aprender sobre a animação. As animações, por outro lado, são o grande iloginista Eles ocupam o centro do palco, fazendo com que o elemento apareça, se transforme ou desapareça magicamente Pense na transição descendente perfeita do Tiktox que combina vídeo, criando uma experiência de tecelagem dinâmica e envolvente que Nossa barra de processamento de histórias do Instagram, o anel colorido que se move ao redor da foto do seu perfil, fornece uma indicação clara da duração da história e do quanto você viu. E também o Cfd de endosso de habilidades vinculadas é outro ótimo exemplo A animação de celebração que reforça sua conquista e motiva um maior crescimento quando você recebe um E não se esqueça da animação expressiva discursiva que ganha vida, adicionando uma camada de personalidade e humor à Sabe, quando descobri a animação e microinteração em 2018 19, naquela época, eu estava tipo, as duas iguais. Qual é a diferença? Portanto, as diferenças, a escala, o propósito e a sutileza microintações são microscópicas acontecem Embora a animação possa ser grande espectro com duração de segundos ou até mais microintação é funcional, fornecendo feedback, confirmando a ação e orientando o usuário, enquanto animação pode ser puramente decorativa, adicionando um toque de Lembre-se de que microinterações são como sussurros sutis, mas impactantes, enquanto a animação pode ser ousada e alta, exigindo atenção e guiando Pense nisso assim. Micro rettion são marcas de abóbora em sua linguagem de design, guiando os usuários sem problemas Anmiti são pontos de exclamação acrescentam empatia e oração aos movimentos principais, mas a verdadeira mágica acontece quando eles dançam Uma microrretação pode acionar uma animação ou uma animação levar a uma microrreção, criando um fluxo digital contínuo Lembre-se de que a microdetecção e a animação são ferramentas poderosas em sua caixa de ferramentas de design Use-os com sabedoria. Mantenha-os focados no usuário e você criará uma interface que cante, dance e deixe seu usuário fascinado Então, aqui estão alguns exemplos que eu quero te mostrar. Existe um site chamado Air Bag Studio. Se eu estiver com o mouse neste airbag Studio, como você pode ver, a animação É como gelatina, e o mesmo acontece com a caixa O mesmo acontece com esse efeito de fundo. Se eu estiver com o mouse sobre ele, como você pode ver, ele está se movendo. Se eu parar, ele para. OK. Se eu rolar para baixo, a caixa fica grande, recebe alterações Também entra outra caixa. Isso muda novamente. Aí está em alguma transição. E as coisas estão acontecendo ao mesmo tempo. Essa é uma das melhores implementações da animação e da microinteração. Digamos que se eu pressionar esse botão, como você pode ver, essa animação de letras acontece e o mesmo acontece com essas animações de dados aqui Na verdade, se eu tiver meu musgo no logotipo, como você pode ver, ações neutras e transformá-las em caixa e depois novamente OK. Então você estaria pensando onde podemos obter animações ou microretração Portanto, existem alguns sites como este iTatVideo. Você pode obter animações ou croons como essa notificação de texto, bem como essa nação de dados das mídias sociais, essa opção de ferramenta OK. Este é o logotipo verificado. Isso é carregar a animação. A barra de processo. Então, há um monte disso. Basta acessar este site. Vou adicionar isso aos recursos. Ou você pode simplesmente acessar este site, Jitter dot video. E há outro chamado arquivos. Este é um dos melhores sites. E é grátis. Acho que é de uso gratuito. Deixe-me mostrar uma animação nisso. Ok, então essas são algumas animações. Animação pequena, pequena e microinação, que você pode baixar e usar em seu pigma Acho que eles também têm plug-in. Também posso baixar o plug-in e usá-lo em seu pigma. Ok, então deixe-me mostrar uma animação muito legal. Acabei de ver neste site. Então, se eu estiver com o mouse sobre isso, comece, como você pode ver, ele se transforma em foguete E há uma pequena animação por trás dela que fuma a mesma com esta, como você pode ver, a mão do gato entra e diz, não me toca Há vários exemplos. Acesse também este site e confira a animação. OK. Isso também parece muito legal. Então, sim, esses são alguns exemplos. Agora, escolha fontes de design e anule o poder da microcorreção e da animação. Ser criativo é um despertar que realmente traça gráficos. Lembre-se de sempre colocar seu usuário em primeiro lugar. E a magia fluirá. 89. Animações incríveis de Button na Figma: Qual é a diferença entre boa interface e uma ótima? São alguns pequenos detalhes, o movimento da magia que nos faz dizer. Uau, isso é legal Uma das maneiras mais fáceis de espalhar a magia são os botões de largura e métrica Então esqueci o chato quadrado estático, estamos falando de botões que pulsam, botões que dançam, abotoam aquela boca e se transformam diante de seus olhos Botão que se torna uma pequena porta de entrada para possibilidades empolgantes. Você pode estar pensando , mas como? Não se preocupe Você não precisa ser um mago da codificação. Neste vídeo da tarde, estamos desvendando o segredo da animação, transformando seu humilde botão Adicionar carrinho na Então, deixe-me te mostrar uma mágica. Se eu clicar no botão Adicionar carrinho, ele muda para uma animação muito legal E se eu clicar neste botão Mas, ele muda novamente para o botão No carrinho. Então, nesse ídolo, somos ruins em projetar isso. Ok, então eu tenho a página de detalhes do meu produto, vou copiá-la e esse será um botão de ir. Então, vamos transformar esse texto em. Vou reduzi-lo para um quadrado assim e deixe-me adicioná-lo ao centro Ok, agora está no centro, então deixe-me copiar esta página novamente, e esta será a nossa opção de cartão em cartão No último quadro, será um lado direito como este, e eu adicionarei alguns. Agora vou adicionar o botão de mais e o botão de menos Ok, então eu desenhei esse botão e deixe-me mudar um pouco a cor. Atualmente, é crave two, e eu vou escolher Cray one, e vamos colocá-los em Quadro de controle P. Ok, então essas serão nossas quatro páginas, e vamos adicionar animação muito legal como esta. Ok, agora vamos ao protótipo e adicionar alguma animação Então, se eu clicar nisso, ele tem que mudar para isso. Primeiro, digite navegue até a página de detalhes do produto e a animação inteligente entrará e sairá. 300 milissegundos, será a mesma para esta Ok, agora vou adicionar uma animação, mas tem que ser depois de um atraso. Então, para isso, vou escolher Portal pitch em segundo lugar. Então, por favor, esqueci a convenção de nomenclatura porque eu sou muito ruim em nomear, então você pode chamá-la de Pot less one, Poles two, pro three, Ok. Agora, vamos adicionar após o atraso. Então, se eu clicar nisso, depois de um atraso, ele tem que mudar para isso, depois de um atraso, mudar para isso. E, novamente, após um atraso, mude para isso. Então essa será nossa animação, mas animação. Então, atualmente é 800, mas vamos configurar para 300. E tudo será o mesmo. O mesmo com este. Portanto, Figma lembra as configurações antigas desse vtype, então teremos as mesmas configurações, mas elas devem estar ativadas após um atraso, 800, mas Ok, então terminamos com a animação. Resta uma coisa, mas vamos começar com esta: funciona ou não? Ok, sem motivo, as imagens. Agora está visível. Então, se eu clicar nisso, ele tem que ir, ir para o carrinho e este. Resta uma coisa: não podemos voltar à nossa primeira página. Esta página. Então, vamos animar esse Vamos clicar nesse botão de menos. Se eu clicar aqui, ele terá que ir para Adicionar ao carrinho. Ok, então, em um toque, vá para Acard e entre e saia e imine é 300 Se você quiser, pode escolher um desses, mas eu gosto desse, então vou escolher esse. E se eu clicar no botão de menos novamente, ele se transforma em adicionar ao cartão E é muito satisfatório. No carrinho, vá para o cartão e este botão de adição. Se quiser, você pode adicionar em outra página e aqui, e se você clicar no botão de adição, ele se transformará em dois. Então, vamos fazer isso. Vamos copiar esta página. E o número tem que ser. Ok, deixe-me aumentar a probabilidade de você ser um pouco dois. Se eu clicar no botão de adição. Então, deixe-me adicionar agora o tipo profissional. Ok. Se eu clicar no botão de adição, você tem que ir aqui. Se eu clicar no sinal de menos, você terá que ir para a página principal Não criamos nosso botão de ir para o cartão, significa botão do cartão. Desculpe, página do cartão, você pode criar isso. Será o seu projeto. Não se preocupe Ok. Agora tem que funcionar, então vamos para menos menos Ok, mas temos que ir com esta página novamente. Esta página. Se eu puder clicar nele, ele irá para a página principal. Vai ser esse. Ok. Vamos começar do começo. Ok, no carrinho, vá, vá para o carrinho. Em seguida, obtivemos esse botão de adição e gerenciamento, que podemos usar para alterar a quantidade do nosso produto. Digamos que eu queira comprar outro para meu irmão. Eu posso simplesmente clicar sobre isso. Mas digamos que seu irmão já tenha pedido este, então você pode clicar no sinal de menos assim Não precisa funcionar assim, deixe-me reiniciar novamente no cartão do carrinho , depois mais e depois menos Ok, há algo que estou perdendo aqui. Ok, eu coloquei isso no sinal de mais um. Eu tenho que me preparar para o menos um. E deixe-me fazer isso dessa vez. Então agora tem que funcionar. Ok, então deixe-me verificar. Botão Plus. Ok , está funcionando. Se eu clicar no sinal de menos, ele vai para um e, se eu clicar no sinal de menos novamente, adiciono ao carrinho Ok, então esta é a nossa pequena animação de botão. Existem versões que eu criei. São versões realmente malucas. Como você pode ver, está aqui. Você pode ver o multiverso do protótipo. Eu também adicionei esse botão Se eu clicar nele, ele muda para o modo escuro. Então, deixe-me mostrar como isso funciona. Atualmente, está no escuro. Se eu clicar nesse botão, ele muda para o modo branco, o modo claro E deixe-me mostrar a vocês a magia um do outro. Se eu passar o mouse sobre um cartão, como você pode ver, ele se transforma em um botão verde muito legal E se eu clicar aqui, como você pode ver, há uma animação muito legal. Eu sei que é um pouco longo e opressor. Algumas pessoas vão gostar. Algumas pessoas não o farão. Mas é a voz do seu criador. Se você está trabalhando tão pouco, faça isso Mas se você estiver trabalhando em projetos, projetos reais, não faça isso. Você pode usar este, que criamos, A mais menos, assim Como você pode ver, é realmente satisfatório. É muito fácil criar essa animação, mas você precisa fazer muita prototipagem Então, acabamos de aprender sobre esse botão de animação. Agora é a sua vez. Você precisa criar a mesma animação. É a hora do seu projeto. É hora de testar sua nova habilidade com fontes. Sua emissão será design e animação. Mas isso não é apenas funcional, mas um obstáculo. Pense fora do experimento bob e deixe sua criatividade brilhar. E eu sei que alguns de vocês podem estar se sentindo confiantes. Então, aqui está seu desafio de realmente dominar a arte do design interativo Esse botão angular que, quando você clica, transforma todo o evento em blocos elegantes no Lembre-se, se você ficar preso, não se preocupe. Abordaremos componentes interativos em nossa próxima aventura de figma Então, o estádio para isso e todas as instruções são fornecidas em nosso arquivo de exercícios do projeto Figma Vá lá, siga isso. Primeiro, você precisa criar essa imitação de botão de animação Depois disso, se você estiver se sentindo um pouco desafiador, crie essa opção para alternar a interface do modo claro para o modo escuro Portanto, o poder da animação na ponta dos dedos, lembre-se de que criar design tem tudo a ver com detalhes, e os botões animados com cauda são os detalhes que levam sua interface ao próximo nível Então vá em frente, anime e dê vida ao seu design. 90. Project 16 Adicionar ao carrinho Animação de Button: Design para dar as boas-vindas a outro projeto Figma. Hoje é o Projeto número 16. Hoje, estamos mergulhando no mundo da microinteração. Aquelas pequenas animações que fazem com que seu aplicativo pareça suave, polido e muito agradável Prepare-se para levar seu jogo de design para o próximo nível. Agora, vá em frente, compre até o bacalhau. Vamos criar uma experiência de compra satisfatória. Imagine que o cliente clica nesse botão tentador de cortar e, repente, se for uma animação rápida, ela se transforma em um botão CO menor e cheio de ação Mas a diversão não para por aí. Como que por mágica, um carrinho de compras aparece com uma animação bacana de ir para o carrinho Agora, isso é o que eu chamo de amigável. Agora, vamos passar para a segunda etapa de controle de qualidade na ponta dos dedos. Espere, um botão de aumento e diminuição do produto aparece mais repentinamente ao lado do botão de ir Imagine o creme digitando o botão de adição em Outro item que aparece magicamente no Mas que tal remover um item? Não tem problema. O botão negativo ajuda a reduzir a quantidade e adivinhar a data, transformando o botão novamente Isso não é legal? Agora, passo três, compre sua obra-prima Agora que suas compras estão lisas como manteiga. Vamos capturá-lo para o mundo ver. Tire uma foto limpa de sua obra-prima e faça o upload na seção de projetos Vamos comemorar aqueles perfeitamente menos pixels. Há um pequeno desafio. No projeto, é apenas um desafio. Vamos projetar uma chave seletora de modo escuro elegante. Imagine que o usuário clica nesse botão e, com uma animação suave, você se transformará em uma atmosfera gelada de alcatrão Mas tem mais. Queremos garantir que o texto seja nítido e adequado em um molde escuro Vamos testar essas sombras e garantir que o texto brilhe contra o fundo claro É aqui que sua habilidade de design entra em jogo. Ok, então lembre-se de que microtções têm tudo ver com detalhes sutis que fazem uma grande diferença Então, experimente o telefone, refine essas animações e não se esqueça de compartilhar a recreação na seção de projetos até a próxima vez continue projetando com prazer 91. Project 17 Modo negro e modo de luz: Fimo, você está pronto para adicionar um toque de sua magia ao seu aplicativo Hoje mergulhando no mundo dos componentes interativos. famosa arma secreta para criá-los sem problemas é um recurso amigável que faz seu aplicativo se destacar. Então, pronto para criar e montar um interruptor de torre que transforma perfeitamente seu aplicativo em um modo leve para eliminar a toupeira transforma perfeitamente seu aplicativo em um modo leve para eliminar a toupeira Então, você se lembra que no Projeto 16, eu lhe dei um desafio: você precisa criar o mesmo efeito sem usar o componente interativo. Agora você sabe como usar o componente interativo, para poder concluir este projeto. Então Sapons se torna um mestre de alternância. Imagine, use um botão de toque e transforme seu aplicativo de brilhante e brilhante em uma atmosfera de conversa descontraída Existe o poder de alternar Tarc More. Vamos usar os componentes interativos do figma para criar essa mágica Criaremos dois estados para o switch, um para mais claro e outro para mais escuro. Pense neles como dois lados da mesma moeda. Agora, tempo de animação da segunda etapa. Agora, vamos adicionar um quinto. Imagine alternar suavemente, deslizando entre duas torneiras de estado. Essa animação fará com que a experiência do usuário pareça refinada e agradável Passo número três, abrace a escuridão. modo Tark é incrível, mas a legibilidade é fundamental Precisamos garantir que o texto em seu aplicativo permaneça nítido e claro, mesmo contra o fundo escuro É aqui que suas habilidades de design entram em jogo. Explore as sombras e a cor do texto para encontrar o equilíbrio perfeito entre os modos claro e escuro As paradas mostram sua obra-prima. Quando seu Mtogle escuro brilhar mais do que uma bola de discoteca, capture toda a sua glória Tire uma foto da cidade e faça o upload para a seção do projeto. Vamos celebrar esses pixels perfeitamente criados. E você também pode compartilhá-lo em suas redes sociais, e você pode me marcar lá. Lembre-se de que os componentes interativos são sua porta de entrada para criar uma experiência agradável Então, divirta-se, experimente, refine essas animações e lembre-se de compartilhar sua obra-prima sombria de More com o mundo Na hora dos azulejos, continue desenhando com a magia da Figma. 92. Página de produto para iPhone e projeto de design de carrinho: Todos se preparem para mostrar habilidades de UX no projeto TS. Estamos nos aprofundando no design da página do produto e experiência do cartão para o iPhone mais recente no aplicativo Click Card. Lembre-se da incrível página da Nike que criamos. Desta vez, estamos dando um passo à frente com o corte Ste. Então, como anteriormente, criamos essa página de produto para a Nike Portanto, neste projeto, você precisa criar uma mesma página para o iPhone 15 Pax. Deixe-me te mostrar. Ok. Esta é a página do carro que eu desenhei e, neste projeto, você também precisa criar a mesma página. E você precisa criar exatamente a mesma página para o iPhone. Você só precisa substituir imagens, textos e algumas cores dos novos iPhones e algumas especificações para eles. Então você pode estar pensando por que esse projeto. Dominar o design do aplicativo Commerce tem tudo a ver com perfeição. Este projeto desafiará você a criar uma página de produto atraente Você pode mostrar o iPhone com visuais deslumbrantes, destacando os principais recursos e fornecendo detalhes nítidos e incríveis Otimize o carrinho para uma experiência de checkout tranquila. designer usa uma experiência de cartão amigável com controle integrativo e confirmação de pedidos Aplique suas habilidades de UX. Não crie apenas páginas bonitas, torne-as inovadoras e eficientes para todos os usuários Adote o aprendizado independente. Você terá recursos à sua disposição, mas a escolha do design é Nós, experimente, explore e aprenda com sua criatividade. Então, primeiro, você precisa projetar este produtoLPG para iPhone que adicione imagens, recursos do iPhone armazenamento Hama como Forneça especificações comparativas, colaboração e opções de acessórios com o novo ícone de pontos Boler Ou uma linguagem consciente, como aqui, mostramos há uma cor nesse produto, então eu só adicionei para queimar. Mas no novo iPhone, temos titânio azul, titânio natural, preto, branco, algo parecido. Você pode adicionar isso. Assim, você pode remover essa seção de tamanho e também exibir a prioridade de preço da seleção imprudente de cores de armazenamento e criar um botão de adição eficaz ao cartão como este E você também precisa mostrar, verificar, usar a classificação por estrelas e comparar com outros smartphones Se for possível, você pode adicionar outros smartphones como a Amazon Se você selecionar qualquer smartphone na Amazon ou qualquer produto eletrônico, isso fornecerá uma pequena comparação entre eles, como digamos que o iPhone escolha entre o iPhone e o 24 ultra. Então, vou te contar a comparação. Se você quiser fazer isso, por favor, faça isso. Ficarei muito orgulhosa de você se fizermos isso. Agora você precisa criar esta página do carrinho. Como você pode ver na minha tela, eu criei esta página. Eu estava pensando em não criar esta página, mas sem minha página de cartão, não há aplicativo de comércio, então eu tenho que criar isso, e esta é a minha versão. Então, nesta página, você tem que mostrar a imagem do produto, quantidade e o preço de cada item como este, que eu fiz aqui, e permitir ajustar a quantidade ou remover o item, primeiro, assim, usando o botão mais Ms. Você também pode usar a integração de códigos promocionais, como facilidade, aplicação de cupons ou descontos, o que eu fiz aqui E você também pode adicionar uma forma de pagamento. Como na Índia, temos a transferência bancária direta da UPA bem como alguns outros métodos Digamos que no seu país você tenha um cartão mastercard, então você pode adicionar um botão, tipo, selecionar um cartão, algo parecido Então lembre-se, esta é uma chance de brilhar. Não tenha medo de experimentar e mostrar suas versões exclusivas de design Então, haverá algum estudante. Eu sei que eles vão comentar sobre o meu curso, como se ele tivesse acabado de dar o projeto. Na verdade, ele não está fazendo o trabalho. Mas o problema com os cursos é que as pessoas pensam que estão apenas alimentando você com colher e eu não quero alimentá-lo com colher Quero ensinar coisas reais, como se eu te ensinasse algo como criar um cupom e ele fosse reutilizável Então, eu falo sobre isso, e você pode criar mesma coisa como essa com o mesmo conceito, então eu não quero tirar sarro de você. Você precisa experimentar e aplicar o que aprendeu. Então esse foi o lema principal deste curso. Portanto, priorize a experiência do usuário e torne as duas páginas integrativas Utilize os recursos fornecidos, mas lembre-se de que o aprendizado independente é a chave. Ligue mais modalmente e aproveite o processo de criação de uma página de produto brilhante para iPhone e cartão Para o iPhone mais recente no cartão que eu tenho. Também forneci todas as instruções sobre você, como para a página do produto, bem como para o cartão, e faça isso. Envie-me depois de concluir a captura de tela do tirador ou você pode gravá-la e convertê-la em arquivo de presente E então eu já te disse, você pode ir ao site B, Auto e de lá, você pode converter isso em arquivo de presente e enviar para mim na seção de projetos, e você também pode compartilhá-lo nas redes sociais. Então, isso é tudo sobre esse projeto. Desenhe meu cartão. Crie minha página de produto, se e envie para mim. Isso é um vídeo de fotos, e vejo vocês no próximo. 93. Micro animações usando componentes interativos na Figma: Estudantes B. No vídeo anterior, eu te dei um desafio. Não fazia parte do projeto. Foi só um desafio desafiar você. Ok, então eu disse para você criar essa chave seletora que pode alternar sua interface móvel para o modo de conversação para o modo de luz ou o modo de luz para o modo de conversação como Acho que você criou isso, e se você criou isso, estou muito orgulhosa de você. Eu sei que você criou usando o método tradicional, mas há uma coisa na Figma chamada componentes interativos Então, neste vídeo, estamos aprendendo essa técnica e vamos criar a mesma chave seletora usando o componente interativo Então, vamos criar um botão simples. Todos nós sabemos como fazer isso, uma elipse simples, depois um retângulo, e vamos adicionar um retângulo, algumas bordas arredondadas, 50 E vou adicionar isso dentro do retângulo. Este é o interruptor, e deixe-me mudar a cor. Então, será nosso modo de luz, e este será um para que eu o transforme em preto. Mas acho que o botão da pequena elipse está na parte de trás. Então, deixe-me enviar isso de volta. Ok, então isso agora está na frente. Agora, vamos transformá-la em algas de controle de estruturas. Agora, vamos criar isso no componente mestre. Crie um componente. E agora temos que criar uma variante. Você pode fazer isso daqui e daqui. Vamos com esse. E agora temos um componente. Então, vou trocar de lugar. Este será nosso botão de desligar, preto e a outra parte será branca assim. Isso vai ser preto. Combine a cor Ok. Ok, então todos nós sabemos o básico. Esse era o básico, mas eu o repeti para você. Ok. Então, agora vamos criar componentes interativos. Então, vamos para o Ptype. Eu quero que quando eu clico nisso, ele tenha que mudar para este botão. Atualmente, estamos no modo claro e, se clicarmos nele, ele deverá mudar para o modo de conversação. Ok, então deixe-me digitar isso. E, ao tocar, você terá que ir até dois, e o canto B entrará e sairá do pacote e 300 milissegundos. Agora, se eu usar isso em qualquer quadro. Ok, então vou adicionar esse botão aqui. Então, vamos ao ativo, e esse será o nosso botão. Então, vamos arrastá-lo. Ok. Agora, se eu clicar no chão, posso usar esse botão. Mas ele não volta ao modo claro novamente, então temos que reconectá-lo Digite-o. Ok. Então, se eu clicar nisso, você tem que ir para o normal. Mude para a propriedade um, padrão. Ok. Agora tem que funcionar, acenda a luz Mota veja a cor da página e a cor do botão é a mesma É por isso que está no mesmo modo, mas podemos alterá-lo. Vamos pegar uma página de dados real do produto para que você tenha uma ideia de como ela funciona Eu vou copiar isso. Vamos a esse protesto porque eu não quero isso agora Ok. Deixe-me ver o anterior , mas eu quero que esse botão esteja aqui, aqui, eu vou colocá-lo aqui. Acho que fiz isso muito grande, então deixe-me reduzir um pouco assim. Agora parece bom. E o posicionamento também é bom. Haverá outro arremesso. Isso vai ser um campo preto. Pop pitch para assinar. Deixe-me fechar a balança. Vender. Vai ser preto. Agora, vamos prototipar isso. Se eu clicar em você. Atualmente, você está no modo claro. Se eu clicar em você, você precisará entrar no modo de conversação. Ao tocar em Progal pitch, animação inteligente está em um pacote de saída de 300 Esse é o cenário. E você também pode chegar lá. Você também pode escolher outra opção, mas eu vou usar essa. Ok. Vamos adicionar um fluxo. Antes de adicionarmos fluxo a ele, há um problema. Reserve alguns segundos e tente resolver o problema. Cinco, quatro, três, dois, um. Ok. Espero que você tenha encontrado isso. E o problema é esse. Colocamos o mesmo botão na mesma página, ele precisa mudar. Ok, então deixe-me mudar isso para a segunda parte, assim. Ok, então esse é o modo de luz ligado, e esse é o modo de luz. Ok. Então, se eu adicionar um fluxo a ele, fluxo inicial, fluxo número dez, OK, isso está funcionando. Ok, eu não usei a carga para um protótipo como este. Ok, agora vai funcionar. O O, O, O. Agora está funcionando e, como você pode ver, parece muito bom. O que você precisa para lidar com algumas fontes e também alguns elementos? Porque alguns são totalmente invisíveis. Como aquele aqui, algum texto aqui, assim como este. Então você muda um pouco. Então essa foi uma pequena microanimação, microinteração, que criamos usando componentes interativos Então, para demonstração, eu o uso nessas duas páginas, mas se você quiser, você pode alterá-lo para todo o seu projeto desta forma. Se eu jogar um profissional número seis, posso escolher qualquer modo. Eu posso escolher o modo escuro ou o modo claro. Mas digamos que se eu for para outra página e quiser mudar outra página para o modo claro, eu posso escolhê-la e ela mudará. Não vai para a primeira página, como você pode ver, porque eu adicionei muitos protótipos Eu sei que parece um pouco confuso, mas não é, é muito fácil Então esse é o benefício do componente interativo. Você também pode fazer isso usando componentes simples, mas eu direi que use componentes interativos. As árvores são mais úteis. Isso mantém nosso elemento organizado. Ok, então agora eu quero te dar um projeto. Acho que é o projeto número 17, 18 nove. Ok. Serão 80 s. Então você precisa converter sua interface para o modo preto. Oh, desculpe, no modo TAC. Usando esse interruptor mais alto. Ok, deixe-me fechar essa opção Criar esta estola, e sempre que você clicar nela, ela terá que mudar para esse modo Se quiser, você pode usar esse método ou criar uma outra página, como digamos que, se você clicar no menu de hambúrguer, o menu de hambúrguer aparecerá e adicionará um botão especial, aparecerá e adicionará como Dark Moore E depois disso, adicione tudo isso. Você não precisa adicionar um botão de modo escuro em única página se adicioná-lo ao menu Burger Esse é um método simples, mas se você fizer isso, ficarei muito orgulhoso de você. Então, ou você pode fazer isso ou aquilo. Na maioria das vezes, todos os aplicativos têm o modo de toque dedicado ou o modo de luz na opção de configuração. Para este projeto, eu o mantive aqui. Então, se você quiser adicionar isso na página de configuração ou na página do menu de hambúrguer, faça isso. Então é isso. Tudo gira em torno de componentes interativos, e criamos esse incrível modo de conversação e modo leve. E você também pode adicionar brilho de cola a esse composto, assim como adicionar sombra e brilho Você já sabe como fazer isso. Portanto, seja criativo, escolha cores. Se você quiser se transformar em outra coisa. Você também pode fazer isso, ser criativo e isso é fotografar esse vídeo e concluir o projeto. Todas as instruções são fornecidas. Vá para aquele vídeo, siga todas as instruções, crie isso incrível. Crie o interruptor de roubo e envie para mim na acusação. Se você quiser compartilhar isso, por favor, compartilhe. Então é isso para este vídeo, vejo vocês no próximo. 94. Figma Prototype easing e animações de primavera: Imagine que você fosse um protótipo, tela bonita mostrando seu design brilhante, mas algo Parece um lugar de vida estático. É aí que entram a flexibilização e a animação de primavera. Você está pronto para injetar personalidades e aperfeiçoar seu trabalho Pense na flexibilização como uma fonte secreta de um movimento. Ele controla como o objeto é traduzido entre os principais enquadra o antes e o depois de uma animação. Não há nenhum movimento robótico chato aqui, cante como uma nuance, criando uma animação que parece natural Ok, então o Figma tem algumas predefinições embutidas, como linear out in is out back, in back, algo assim Então, vamos ver um por um, o que são e o que fazem. Ok, então eu criei esse efeito de salto de basquete. Então, deixe-me criar um novo novamente. E eu estou usando nosso antigo design de método, e vamos conectar Scout, vamos pesquisar basquete de basquete Quero a versão gratuita do Let's CV. As versões gratuitas são ótimas. Versão Parade também, mas se você está recebendo algo de graça, não deixe pra lá Esse p era a bola de basquete que eu queria. Atualmente, é uma luta bem, eu quero c e vamos colocá-la no centro, e vou desenhar uma sombra embaixo dessa Então, sempre que minha bola de basquete estiver se movendo, ela criará uma sombra parecida com uma coisa. Deixe-me colocá-lo no centro e na cesta. Acho que tenho que adicionar isso ao quadro. No começo , estará aqui e a sombra será assim. Agora vamos copiar esse argumento de venda. Estou segurando uma bola de basquete que não está dentro desta. Nós só temos essa elipse, onde está Frafyspring Agora eu tenho que deletar este porque ele não tem uma bola de basquete. A moldura deve estar aqui. Agora a bola de basquete está lá dentro, eu acho. Deixe-me copiar isso, está dentro. Agora, quando cair assim, sombra ficará assim. Ok. Isso é um sinal básico. Todos vocês sabem como isso funciona. Vamos ao protótipo. Você também pode fazer isso usando componentes interativos, mas usando frames, porque quero mostrar como funciona. Por enquanto, vamos juntar esse quadro após um atraso, após um milissegundo, 500 é bom Atualmente, estamos no Smart mate e vamos nos juntar a este também. mesma coisa. Ok. Depois de um atraso. Um milissegundo e atualmente é fácil. Vamos começar com um linear primeiro. Vamos entender o que o linear faz. Atualmente, ambos são lineares, não são lineares próximos. Vamos entender primeiro o que é linear. Linar é a linha desmatada. Pense que uma viagem previsível de elevador é útil para algumas situações, mas não para as mais empolgantes. Então, se eu jogar isso, como você pode ver, há um movimento, mas é meio robótico, mas a elipse parece boa Deixe-me adicionar um pouco de moleza para que tenha algum efeito saltitante . Assim. Ok, se eu jogar isso de novo, espero que tenha aquele efeito especial p. Mas em linear, parece estranho, d. Agora, vamos aprender que, como em uma estrela, um pico lento de velocidade, como estrela, um pico lento de velocidade um balão suave flutuando para cima, faz com que o elemento desaparecido Deixe-me ver nosso protótipo. Ok. Vamos trocar por essa. Atualmente, somos lineares, então vamos escolher, pecar. E se eu te mostrar o gráfico real para isso, para o pecado, é assim. Vai ser gentilmente assim e tão rápido. O eixo X indica uma velocidade lenta e o eixo y indica uma rápida. Se você joga futebol assim, uma curva é assim. Então, primeiro, ele vai devagar, lento, lento, lento e, a partir desse momento, rápido. Deixe-me primeiro mostrar os s , depois veremos os personalizados. Ok. Então, como você pode ver, a animação foi alterada. No início, é lento, depois rápido, primeiro, lento, rápido, os baixos continuam. Começa devagar e, eventualmente, aumenta a velocidade. Então, isso está na moda. Agora, vamos aprender sobre como relaxar. Vamos escolher a facilidade para ambos. Sair é o oposto do pecado. Começa primeiro e depois desacelera como uma bola saltando É perfeito para enfatizar elementos importantes ou chamar a atenção como este Como você pode ver, é. um efeito natural de quicar a bola Isso estava prestes a acabar. Agora, vamos aprender sobre o pecado e a saída. Sim e fora, este entra e sai. Ok, a estrela acelera lentamente e depois desacelera novamente, como uma corrida a todo vapor em um Que escolha para a maioria das animações como essa. Como você pode ver na animação, as estrelas aceleram lentamente, diminuem a velocidade novamente. Então, isso era sobre pecar. Mas tem mais W bounce heart ou play full notification toasts press sign back e bounce têm Então, se eu escolher, vamos escolher por trás. E se um está fora. Como você pode ver, o salto aumenta Vou adicionar alguns recursos, então adicionarei algumas curvas, gráficos e tudo Então você terá uma ideia de como o real funciona. Mas agora, vamos ver como a animação personalizada funciona no Figma. Ok, então há uma coisa chamada curva Fa zer. Não na Figma. É um termo matemático. Tem curvas. Por isso, é chamada de curva zero. E vamos aprender isso com o cliente aqui. Como você pode ver, eu estava brincando com ele. Então, minha curva é assim. Esse grupo pode parecer intimista, mas é mais simples do que Aqui está um resumo rápido. O parâmetro quadrado representa os quatro pontos que definem uma curva de peça Qubic como esta, e esses são os quatro pontos Esses são os parâmetros quadrados e esses são os quatro pontos. Deixe-me mostrar um, dois, três, quatro, quatro, um. eixo X representa o tempo e o eixo y representa a transição e propriedades como posição ou opacidade, e esses são os quadros-chave fixados em zero zero e um um, marcando o início e o fim da animação Atualmente eu sinto falta, então deixe-me fazer um clipe duplo. Como você pode ver, ele foi para sua posição normal. Clique duas vezes. Zero, zero, um. Essas são as alças ajustáveis. Arraste isso para remodelar a curva e ajustar o campo de animação Ok, vamos brincar com isso. Então, isso é para os lentos. E isso é para o primeiro. Então, acabamos de criar um efeito. Se eu rastrear demais. É estranho. Tem aquele efeito feio nele. Existem algumas curvas, digamos que curvas como essa, curvas como essa, e você queira simplesmente ir para o Eu clico nele. Clique nele uma vez. Como você pode ver, você também pode adicionar apenas o valor genumérico. Atualmente, vamos adicionar algo Dois seis, alguma coisa agora. É assim que funciona. Se eu adicionar o valor assim. Ok, então eu quero te mostrar uma coisa. Sei que alguns de vocês podem se sentir íntimos, talvez não consigam entender esse tópico, mas existe um único Eu quero te mostrar um plug-in. Isso vai te ajudar muito. É chamado. E neste plug-in, você só tem valores ou quadros-chave como este. Se eu copiei este é uma cópia e se eu o passei aqui Isso, como você pode ver, capturamos nossa animação. Digamos que você não seja bom com o curso e eu também não seja bom com o curso. Portanto, você pode acessar este plug-in, copiar qualquer quadro-chave de animação que desejar, é claro. Vamos usar este e publicá-lo aqui, e vamos ver se funciona ou não. Se você quiser saber mais sobre busier curse, vou te mostrar Ok, este é o site sing dotnet. Você receberá toda a maldição e poderá aprender sobre elas. Curtir Você pode clicar na curva mais movimentada e aprender sobre ela Se você realmente quer saber a curva real, acesse este site. Está em dotinato. Também adicionarei isso aos recursos. Acesse o site e conheça essa curva. E também contém a animação. exemplo, digamos que, se eu escolher este, o pequeno botão ou ponto pequeno nos mostre como funciona Devagar, rápido. Fatias de jejum. Rápido e baixo assim. Ok. Agora, vamos aprender sobre a animação da primavera. animação de primavera traz uma elasticidade deliciosa a todos os protótipos Imagine um botão que treme quando pressionado ou menu que aparece com uma peça Com predefinições como gentle e Quit, é fácil adicionar o máximo de magia Então, vamos adicionar alguns efeitos de animação de primavera. Portanto, temos trocadilhos rápidos e suaves, tela lenta e personalizada. Ok, então deixe-me dizer o que gentil faz. Um toque sutil, perfeito para mudanças sutis de destaques no conteúdo Isso é o que o gentil faz. Se eu clicar nisso. Deixe-me dizer isso para Gentle também. A, devagar. Tem efeito de ressalto, mas se você quiser destacar alguma parte básica de você, use suavemente Nós também agilizamos. Quick é rápido e você também recebe o pré como este. É como o ZP spring idle para adicionar Pep Agora vamos clicar no ataque. Tem esse efeito de ressalto, como você pode ver. Por mais lento que seja lento, uma mola deliberada suave, ótima para ampliar o conteúdo em tela cheia gradualmente Ok, então essas são algumas predefinições que a Figma nos fornece. Agora, vamos aprender sobre a mola personalizada. Se eu escolher uma mola personalizada, como você pode ver, obteremos o pequeno gráfico e a trilha de fogo desta forma e a emissão será assim. Animação de primavera e primavera. E há um ponto. Este é um quadro-chave. Se eu fizer assim, será muito elástico, como você pode ver na tela Também podemos ajustar a rigidez para maior elasticidade. Podemos despejar para suavizar as coisas e podemos simplesmente brincar com a máscara Portanto, isso incluirá o peso do nosso objeto. Então, atualmente, estão dois nervosos. Deixe-me criar uma mola. Se eu adicionar uma máscara a cinco, você verá que ela tem uma massa. Eu sinto que é pesado. Você só precisa brincar com a rigidez, o despejo e a massa para explorar as molas dessa forma Mas eu gostaria de manter isso assim, normal e sutil. Essa foi a diferença entre primavera e animação psi Essa animação transforma nosso protótipo de um estrato cativante Ele adiciona personalidade, chama a atenção e orienta o usuário com uma interação ativa e natural de preenchimento. Ao reunir a atenuação e a animação de primavera, você transformará seus protótipos de figma de uma tela rígida experiência interativa que cativa e envolve, então vá em frente, anime com confiança e dê vida à visão de design você transformará seus protótipos de figma de uma tela rígida em uma experiência interativa que cativa e envolve, então vá em frente, anime com confiança e dê vida à visão de design. Então, isso é tudo sobre a animação. Aprenderemos sobre BC e também sobre a animação da primavera. Também aprendemos sobre todas as predefinições que o Figma nos fornece, e esta também mostra um leve declive rápido. É assim que a animação funciona Na maioria das vezes, eu só uso essas animações. Eu não prefiro essa. Se seus projetos precisarem disso, ou se você quiser fazer um projeto realmente incrível com muita animação. Você também pode escolher este. Espero que você entenda tudo sobre essa animação. Então, obrigado por assistir e vejo vocês na próxima. 95. Animação pulsante no Figma: Ei, os entusiastas do design. Você já sentiu que seu aplicativo precisa um pouco mais de mapa após o pagamento ser processado Como se devesse comemorar o momento com uma festa visual Estamos prestes a mergulhar no mundo da animação pulsante em Figma e confie em Vai ser incrivelmente incrível. Então, como você pode ver na minha tela, eu tenho duas animações. O primeiro está em loop e o segundo é estável. Então, se eu reiniciar esse quadro, como você pode ver. O primeiro ainda está animando e o segundo parou. Então, desta forma, vamos criar este, bem como este. O segundo tem uma confity. OK. Como você pode ver, dá uma atmosfera de celebração Então, estou totalmente entusiasmado com forma como Pope e o Google Pay usam essa animação para criar essa gratificação instantânea após Então eu pensei: por que não trazer esse mesmo nível de satisfação para o nosso aplicativo. E é aí que os componentes interativos entram em cena para salvar o dia. Alguns de vocês podem estar pensando podemos usar uma forma tradicional como esta. E eu o usei. Funciona, mas não funciona como eu quero. Então, deixe-me te mostrar. Mais pedido. Depois disso, ele dá o confinamento, anima e é repetido Funciona. Eu tenho que trabalhar um pouco nisso, mas como você pode ver, ocupa muito espaço. Os componentes interativos , por outro lado, são como os operadores fluidos do mundo do design. Eles são eficientes, flexíveis e estão prestes a tornar nossa vida muito mais fácil. Então, vamos entrar no Figma e criar essa animação incrível, não essa Ok, nesta, vamos criar essa animação incrível, que é repetida e a segunda é estável Deixe-me ocupar um espaço vazio por enquanto. Então, vou escolher uma moldura, que será de 200 por 200. OK. Portanto, é minha escolha pessoal. Se você quiser pegar 500, você pode pegar isso. Ou você pode projetá-lo de acordo com o smartphone ou tablet. Se você está projetando para tablet, você pode aumentar a dimensão. Então, primeiro, vou adicionar três círculos, y três círculos porque temos que animar três círculos dentro deles OK. Então, segurando o turno. E primeiro, serão apenas 50. E eu vou mantê-lo no centro assim. Vamos mudar a cor. Eu vou usar nossa descoloração Você pode usar o verde, que eu mostrei anteriormente. Então, depende totalmente de você. Porque a cor y deve ser considerada em todos os nossos aplicativos. É por isso que estou escolhendo este. Agora, deixe-me copiar esse controle C, Controle C, Controle B. Como você pode ver, de 84, Ep 702-70-2702 Deixe-me renomeá-lo. Então, vou chamá-lo de P e C. Não quero me confundir. Agora temos três círculos. Agora, deixe-me fazer um componente. Assim, podemos adicionar uma variante e serão componentes interativos. Então, agora vamos adicionar variantes. OK. Temos a segunda variante. Deixe-me escolher um segundo que será B, e eu vou mudar essa dimensão para 100 e vou escolher passar por 25. Você pode usar blimação se quiser, mas atualmente estou usando este Vá para o centro desta forma, e eu vou adicionar outra variante e nesta até 1205 Ou vamos aumentar para um 50. OK. Vamos para o centro. E passe por esta. Vamos lá dez. Ok, é muito visível. Vamos 25. Ok, agora está visível. E vamos adicionar outra variante porque queremos repeti-la. Ok, então neste B vai ser invisível e este vai ser até 200. Vamos chegar ao centro. Vamos ver se funciona ou não. Acho que cometi um erro em algum lugar, mas vamos experimentar. O primeiro. OK. Então, depois de atraso após atraso, e eu quero depois um milissegundo. A moldura tem que mudar. Depois de um milissegundo, ele deve passar aqui após aqui, depois daquele aqui, e eu vou ficar com dois 50 Desculpe, quatro 50 porque eu uso vários valores, mas quatro 15 parece incrível em animação inteligente e facilidade . Seremos os mesmos. O mesmo acontece com este após um atraso e um milissegundo. O mesmo com este. Espero que funcione. Um milissegundo e todas as coisas restantes são iguais. Nesse momento, não vamos usar animação inteligente. Nós vamos nos dissolver. Eu vou te dizer por que estamos usando dissolve e por que não usamos animação inteligente. Vamos escolher a moldura do iPhone 15 e vamos para a composição. Espero que esteja aqui. Ok, está aqui. Agora, deixe-me jogar. Está funcionando. Está funcionando. É assim que eu quero. Mas podemos fazer algumas mudanças, podemos fazer esse círculo primário, um pouco maior aqui, assim como O aqui, e dentro dele, podemos adicionar uma marca de verificação. Portanto, sabemos que sua compra está concluída ou o pagamento está feito. Você pode estar pensando por que estamos usando molduras. Podemos simplesmente desenhar um círculo no espaço vazio e podemos, uh, apenas ligá-los. Sim, nós podemos fazer isso. Mas quando eu estava tentando isso, recebi um erro. Eu desenhei este, e se eu tentar arrastá-lo aqui e jogar isso, como você pode ver, ele não está mostrando nenhum lugar. Está se movendo. É por isso que temos que mantê-lo dentro da moldura. Então, ele fica no meio e não se move para outro lugar. Lembre-se de que uma coisa é como se um dos elementos profundos mais importantes fosse o mesmo. O componente tem que ser o mesmo, se você quiser animar algo Se você desenhar um círculo, copie este. Você não precisa desenhar um círculo novamente, porque se você fizer isso e tentar animá-lo, não funcionará Você pode adicionar animação, animação inteligente, mas isso apenas adicionará o efeito disol, não o efeito de animação inteligente Então, componente ou elemento ou qualquer que seja sua forma, use a mesma. Ok, agora vamos adicionar alguns carrapatos. Vou escolher o icon scout. Deixe-me verificar, marcar. É uma marca de verificação. E eu vou usar esse. Ok, você deveria ter 25 por 25. OK. Deixe-me fechar esse. Está aqui. E deixe-me diminuir a transparência. Também será animado. Copie, desculpe, duplique e aqui serão 50 e aqui serão 100, faça 100 e aqui também 100. OK. Então, se eu jogar isso de novo, vai parecer mais legal. É isso que você pode ver? Há uma coisa que podemos fazer. Podemos aumentar o círculo. Atualmente, é como 50. Vamos chegar a 75 e vamos mantê-lo no centro. O mesmo com este. Vamos lá 100. Deixe-me experimentar este. Eu só quero experimentar algo. Espero que funcione. Ok, funciona, mas no final, adicionamos uma animação inteligente ao encolhimento Então, podemos manter o tamanho do círculo médio, que é, eu acho, 100. Deixe-me fazer essa centena. OK. OK. Essa. Oh, você deveria estar no meio. OK. Espero que esteja funcionando agora. Está funcionando, mas podemos adicionar esse efeito. Ou vamos manter as coisas como estão. Também está ótimo. É assim que criamos animação. Há uma coisa que eu quero mostrar, digamos que se você escolher qualquer fio de armação de arame. Neste, já fornecemos o efeito This, mas você pode realmente personalizar sua animação. Temos esse gráfico, no qual podemos usar os botões stoger e aumentar nossa velocidade de animação Se você quiser realmente impressionar neste caso, você pode usar este Eu vou te mostrar como usá-lo. Em seguida, então estrato para isso. Também podemos usar essa ou há outra opção chamada mola personalizada. Também está aqui. Você também obtém uma prévia de como funciona. Então, a seguir, vamos aprender esse. Isso é para nossa opção de pagamento. Como você pode ver, eu criei este, ele ocupa muito espaço e parece muito feio Deixe-me copiar esse. OK. Deixe-me adicionar isso como uma sobreposição Então, ficará ótimo. Vamos para o componente de 84, e essa será nossa sobreposição Se eu pressionar colocar, solicite uma animação inteligente e está pronto. E tem que estar no toque e em uma caneta de animação inteligente. Vamos verificar se está funcionando. Deixe-me criar um novo fluxo para que eu possa simplesmente começar. Ok, está funcionando. Isso é bom. Podemos tornar nosso campo transparente, para que pareça mais frio do que f zero Ok, agora parece legal. Você pode aumentar o tamanho do quadro, e podemos adicionar outra opção, como deixe-me ir para o quadro, que eu possa adicionar este, este, e o plano de fundo deve ser 50 assim. E se eu jogar isso de novo, faça o pedido. Como você pode ver, o fundo fica um pouco preto e nossa animação aparece. Em comparação com este, você pode ver como é pequeno o espaço necessário e como é fácil de criar. Ok, eu quero te dar um projeto com a mesma técnica, você tem que criar essa animação, a animação de carregamento como esta. Então, pause o vídeo, faça isso e envie para mim na seção de projetos E podemos usar essa animação antes desta. se eu clicar em fazer pedido, primeiro, ele carregará por um momento e depois mudará para a caixa de seleção. Vamos fazer isso. Vamos fazer isso. Deixe-me ir ao ativo, que é aqui o componente seis. Deixe-me rastreá-lo aqui. Atualmente, as cores não são muito boas, mas as alteraremos mais tarde. Deixe-me me juntar a isso aqui. E depois disso, você deve ir até aqui. Depois do atraso, acho que, depois do atraso, esse. Após o atraso, acesse esse pagamento com sucesso. Vamos mantê-lo por 800 milhões de segundos. Vamos ver como isso funciona. Homem inteligente 450. Vamos ver como fica o carregamento do pedido. Estou tentando adicionar sobreposição após alguns milissegundos, ela precisa mudar Tem que ser trocado por este. Mas sempre que eu faço isso, essa animação para e isso funciona ou às vezes isso não funciona. Não sei o que está acontecendo com FM ou talvez esteja cometendo alguns erros. Deixe-me mostrar se eu quero trocar a animação, então vou vinculá-la a esta e navegar até a sobreposição de troca E tudo será o mesmo. Mas, como você pode ver, isso agora não está lá. Eu vou escolher depois de um atraso. Deixe-me encerrar e remover o que eu digo, coisas animadas anteriores. Após um atraso após 800 milissegundos, ele precisa mudar. Mas se eu reinicializar isso e colocar nela, como você pode ver, a animação de carregamento, ela desaparece e essa aparece e não há nada no quadro. Mas se eu tentar fazer assim, se eu excluir este, e se eu fizer o pedido novamente. Como você pode ver, agora não está visível. Eu não sei o que está acontecendo em Sigma. Estava funcionando antes e agora não está funcionando. E se eu remover isso e se eu juntar este ao tocar em abrir a sobreposição, tudo ficará no mesmo lugar do pedido Como funciona e não está funcionando. Deixe-me trocá-la novamente. Seis mais pedido. Como você pode ver, é invisível. Então eu tenho que deletar este e tento adicioná-lo novamente. E se eu juntar isso novamente, podemos abrir a sobreposição 95 mais o pedido Funciona agora. Como você pode ver, acho que há um erro, talvez eu esteja fazendo algo errado. Então, se você sabe como resolver isso, por favor me avise porque atualmente é assim que funciona. Eu quero que quando eu clicar nele, ele gire e depois de alguns segundos, isso tem que abrir Acho que tenho que usar agora o método tradicional. Então, vou deletar este e vou criar algumas páginas. Ok, agora eu diminuo o oposto e agora posso adicionar esse componente neste centro. Vamos juntá-lo do tipo P depois de fazer o pedido, você tem que ir até aqui e digitar, você tem que estar em fita, e eu vou guardar tudo desta vez Podemos usar a ação inteligente. Vamos usar o smart mon. Às vezes, dá uma animação muito alta. Então eu não gosto disso. Agora está funcionando. Agora, também parece legal. Ele está sendo processado e depois de um atraso, então ele vai para este. Depois de 800 milissegundos, ele irá para esta e adicionaremos a segunda animação, que é essa Vá para o Centro. Deixe-me ir de zero a zero, PL zero. Agora, deixe-me tentar como funciona. Além do pedido e após 800 milissegundos. Ele se transforma em este. Era assim que eu queria criar usando overlay, mas não sei se isso estava me causando erros realmente estranhos Podemos aumentar o tempo de atraso do tamanho. Você pode adicionar até 202.000 segundos, 2.000 milissegundos, deixe-me cozinhar novamente, deixe-me cozinhar novamente, fluir 19 mais o pedido após 2 segundos, ele se transformará em este Isso é legal. E também podemos adicionar preen com sucesso e podemos aumentar tudo a partir de você Deixe-me deletar este e eu posso copiar este, na verdade. Agora eu posso substituir minha dieta por esta. Ele não é excluído. B Você deveria estar no centro e sentir que tem que ser zero. E eu acho que você deveria ter 25 anos. OK. Este também deve ser 25. OK. Agora está funcionando. Como está funcionando. Reiniciar. Deixe-me reiniciá-lo. OK. Flow 19 faça o pedido. Ele carregará por 2 segundos. Depois disso, eu não entrei na página. Ok, deixe-me juntar isso após um atraso de 2000 milissegundos. Animação inteligente e quatro 50 serão lançados. Agora, vamos jogar. Faça o pedido, retroceda por 2 segundos. Agora, o pagamento está feito. E também podemos digitar o pagamento com sucesso. Ok, então eu adicionei o texto de pagamento bem-sucedido. Deixe-me refazer isso. Carregamento, carregamento, carregamento e sucesso. Como você pode ver, parece muito legal. Você pode aumentar o tamanho da fonte, mas eu sou como nesta , então eu mantenho isso. Foi assim que criamos essa animação, a animação de carregamento e também essa animação de clique, que emite a localização da luz Seu trabalho é criar essa animação de carregamento. Espero que você tenha feito isso, e é assim que parece. Você tem que realmente desenhar o primeiro círculo assim. Deixe-me mostrar um painel para você. O primeiro é ps, depois você tem que cortar o ps. Você precisa usar esses botões de alternância. Deixe-me mostrar os togletons e eles como este, e colocá-los em cima dessa elipse e apenas mudar a posição em cada quadro e posição em cada quadro usar componentes interativos, juntá-los ao protótipo e ajustar o valor, e e Se você souber como resolver essa sobreposição, por favor me avise e eu sei que cometi um erro Talvez eu não consiga resolver isso agora. Mas se eu fizer isso, atualizarei este vídeo. Dessa forma, aprendemos sobre como usar componentes indiretivos e também como criar este É isso, eu acho. É isso mesmo. Então isso está prestes a acontecer, e vejo vocês na próxima. 96. Projeto do curso 19: o clique final: como terminar o design de seu aplicativo Clickkart no Figma: Bom design pontuado, estamos no final do jogo agora. Então, amor, criamos aplicativo Kick Card da ponta até a parte inferior. Aprendemos sobre wireframe. Além disso, projetamos a interface do usuário, também aprendemos sobre microinteração , animação e prototipagem Então, essa é a hora do projeto. Este será o projeto 15 17, não sei, talvez 19. Ok, então esse será o projeto 19. Então, se você acha que algo está faltando neste aplicativo, como página de pedido ou carrinho, talvez eu saiba que perdi o carrinho. Você pode adicionar isso e , se quiser adicionar algo novo, crie do zero. Crie um wireframe, depois crie sua interface de usuário, inspire-se, adicione cores e tudo mais, e adicione um novo design. Adicione também a criação de protótipos Se você quiser, pode adicionar animação. E quando sua obra-prima estiver pronta, é hora do show. Faça uma captura de tela de todas as telas e carregue-as na seção do projeto. E não seja tímido, compartilhe sua magia de design nas mídias sociais Marque seu amigo. Talvez crie um hastag engraçado Deixe o mundo ver suas habilidades incríveis. Imagine que seu design possa se tornar viral. Então, estamos criando golpes no Figma como aqueles que matam o WiFi e o protótipo, mas adivinhe o que estamos formando Da próxima vez, as coisas estão ficando reais. Estamos projetando projetos individuais. Pense nisso como ter sua própria nave espacial e partir para projetar seus Você escolherá uma missão, construirá um mundo e o tornará incrível. Não se preocupe, você não está totalmente perdido no espaço. Sou um robô confiável que anda por aí com dicas e truques Boas ações, sem problemas. Ônibus de volta para aqueles antigos tutores. Eles são como seu curso secreto. E adivinhe. O próximo projeto será épico. Eu vou te falar sobre isso em breve, então fique entusiasmado. Até que ele continue jogando com Figma, continue aprendendo e prepare-se para superpotências de design Então isso é um campeão. Você conquistou o aplicativo de cartões. Aumente o nível de sua habilidade e agora você está pronto para enfrentar o mundo com os superpoderes do design Então vá em frente e crie. 97. Como eu defino uma miniatura ou capa de um projeto no Figma: Olá, pessoal, desta forma, vamos resolver um problema. Isso pode estar te deixando um pouco louco. Uma miniatura padrão no Pigma. Então, como você pode ver, esta é uma versão com um clique, e não há miniatura, e eu não sei Só consigo ver os componentes. Mas se eu for aos arquivos comunitários importados, como você pode ver, eles são muito precisos e eu consigo ver o que está dentro O mesmo com este 111, este. E assim como com este. Mas nosso arquivo não tem miniatura. Eu sei que é triste. Às vezes, eles estão bem, mas outras vezes acabam mostrando algo que não está representado no arquivo real e isso pode ser frustrante Então, deixe-me mostrar como personalizar uma miniatura, torná-la mais inativa em relação ao conteúdo de seus documentos Oh, então vamos ao nosso arquivo. Esta será nossa primeira versão com clickout. Quero uma página separada que seja a miniatura do nome. Você também pode nomeá-la como quiser, mas neste caso, vou chamá-la de miniatura Ok, vamos adicionar a miniatura do cartão de clique. Então, vou ficar confuso no futuro. OK. Portanto, não há nada nesta página, então vamos aos quadros. E na comunidade FIGMA, temos uma capa de arquivo em barra. Então, vamos escolher isso. É 90 20 em um 20 pixels e atualmente está vazio. Então, eu quero essas páginas na tela como as primeiras três páginas. Então, atualmente, vou exportá-los. Eu sei que estou indo longe demais. Eu não te contei como exportar o arquivo, mas siga, simplesmente não se concentre nisso porque vamos aprender como exportar lá. Então, vou escolher essa troca de arquivos e exportar, quero que seja em PNG. Você também pode escolher formatos diferentes, como JPA SPG P. Vou escolher PNG porque PNG funciona melhor com imagens e exporta três camadas Ok, então eu quero que isso seja em dólares. Ok, então essas três páginas são exportadas agora. Eles estão no PG e acho que a qualidade também é ótima. Vamos entrar em nossa página. Isso é chamado de miniatura de mentiroso, e deixe-me importá-los dentro desta. Bupa, vamos. Vamos até aqui. Como você pode ver, são imagens, não os quadros reais. Agora eu quero que isso seja organizado assim. Você vai estar aqui, você vai estar aqui, assim como este, então eu vou mesclá-los E vamos arrumar uma moldura, eu acho. Vamos convertê-los em moldura para que fiquem juntos. Seleção de quadros. Então, eles estão emoldurados agora, e eu vou estendê-los. Deixe-me torná-los grandes para que estejamos em alta escala. Vamos fazer com que seja grande assim. Então, como você pode ver, isso vai ser thobil, mas podemos adicionar alguns temperos. Não são especiarias reais. Podemos girar um pouco e adicioná-la assim. Ok, aqui também. Agora está ótimo e eu quero que seja um uminil. Nesse caso, posso simplesmente clicar no quadro real desse quadro. Clique com o botão direito nele definido como uma miniatura. Mas há um problema. Então, se eu for para casa, como você pode ver, ele ainda não está atualizado. Está me mostrando componentes novamente. Então, para esses dois trabalhos, você precisa reiniciar seu software. Não sei como funciona na web, mas em software, você tem que definir seu software. Macio. Se você estiver no Windows, sempre abre a opção de atalho, então feche-a também Eu não sei por quê. Então, deixe-me abrir o fi Margin. Como você pode ver, ele está atualizado agora e parece mais legal, e podemos ver que esse é o carrinho Ok, duplique, e atualmente estamos em dificuldades. Vamos contratar , deixe-me voltar novamente . Como você pode ver. Temos o thumil. Se você quiser, pode fazer uma captura de tela disso, deixe-me mostrar exemplo, se estivermos no Windows, você pode acessar a ferramenta de recorte e clicar em você Você pode fazer uma captura de tela dessa forma , salvá-la e usá-la como miniatura Então eu vou te mostrar como usar isso. Mas acho que a captura de tela não é tão clara, então tento importar cada quadro e depois os ajusto. Então funciona. Se, em qualquer caso, captura de tela estiver funcionando, vá em frente e, se quiser exportar um quadro no PG, você também pode fazer isso Há uma coisa que você deve ter em mente : em algumas versões, a miniatura pode não ser atualizada imediatamente Então, se isso aconteceu, feche-o, reabra-o e o arquivo deve estar lá As milhas devem ser atualizadas. Além de personalizá-lo, dê um toque de design e defina como miniatura Então aí está o x designer, uma maneira rápida e fácil de atualizar a miniatura do arquivo Pigma para melhor representar Chega de frustração com miniaturas aleatórias ou desatualizadas. Se você achou esse estado útil para obter mais truques e dicas. Então, nos vemos no próximo vídeo. 98. Como exportar seu design da Figma como imagem (PNG,JPG,SVG,PDF): Neste vídeo, vamos mergulhar no processamento da exportação de imagens da Figma Já vimos como exportar no Figma enquanto criávamos esse tumil, mas neste vídeo, vamos realmente aprender como exportar, quais são as coisas que podemos fazer ao O que são x, o que é sufixo, quais são os diferentes tipos de formato de imagem e o que temos em mente ao exportar imagens ou seu projeto Portanto, este será um guia de uso geral. E nos próximos vídeos, exploraremos casos de uso mais específicos para entregadores e colegas. Então, agora vamos começar com o básico. Exportar FIMMAs é um pouco diferente de outros programas, como eu uso softwares como Então, quando exportamos, basta dizer o nome e a regulamentação do vídeo, e basta clicar na exportação, mas no FiMMA é diferente No FMA, temos que aplicar a configuração de exposição diretamente ao las ou objeto que queremos exportar Por exemplo, digamos que eu queira exportar este e, como você pode ver em n, temos o botão de exportação. Clique nele e pegamos esse botão de exportação. E agora vou aplicar algumas configurações de exposição. Portanto, o Figma me permitirá escolher um formato de imagem diferente. Então, pense: qual é a diferença entre PNG e JPEG? Alguns de vocês podem estar pensando: eu pensei que PNG e JPEG são a mesma coisa Eu não sabia que havia uma diferença. Então, vamos entender o que é JPEG. JPEG é ótimo para fotos e coisas detalhadas, mas tira fotos e você não consegue enxergar como mágica. É bom para arquivos pequenos, bom para a web, mas não para texto ou transparência. Mas PNG é o oposto disso. PNG é uma imagem cristalina. O texto está nítido. Você pode ver através das coisas e tudo parece incrível. Mas, como o álbum de fotos Big, o tamanho do arquivo pode ser alto Use-o como ícone de logotipo e coisas em que a qualidade é mais importante. Agora, vamos entender o que é VG. Imagine um desenho super elástico que nunca fica ensanguentado. Não importa o quão grande você ganhe. Então, neste caso, deixe-me pegar um logotipo. Então, uma mudança como essa, se eu tentar escalar, torná-la grande, como você pode ver, o pixel não está ficando pixelizado Tudo parece perfeitamente bem e tudo está nítido. É perfeito para formas de ícones e coisas que precisam ser redimensionadas sem problemas, mas nem todos os aplicativos gostam dele, pensam nisso como um tipo especial de imagem, e agora vamos passar para o Eu sei que todo mundo conhece o PDP. Imagine uma pasta de apresentação sofisticada com tudo bem dentro, claro, fotos e imagens . Ótimo para compartilhar o design finalizado ou exibi-lo a um cliente. Mas você não pode editá-lo facilmente. É mais provável que Pid up encontre uma obra-prima que funcione em andamento Vamos tentar exportar esse cupom. Mas se eu tentar exportar isso, como você pode ver, temos essa opção como um x 1,5 x, dois X três, até quatro X, bem como essa largura de 0,50 e altura da espiga de combate Então, vamos entender isso primeiro. Então, na Figma, esses números 1x2x3 x. Você vê ao exportar um fator de escala. Eles basicamente dizem à Figma tamanho de seu design antes de salvá-lo como um arquivo Um X é o tamanho original do seu design, como o livro de receitas básico Não menos importante entender é dois x. Isso dobra o tamanho do seu design, tornando-o duas vezes maior original. Imagine dobrar os ingredientes em sua receita para um bolo maior e o mesmo com três x o mesmo com quatro x. Ele multiplica qual x Ele multiplica qual E o ponto zero s f e o ponto zero são opostos a três x e quatro x. Então, isso diminui nossa qualidade de imagens Esse fator de escala é útil para telas com um isolamento diferente. tela de alta resolução precisa imagens maiores para evitar a pixelização Embora a tela de baixa resolução possa lidar com palavras menores. Usando o fator de escala, vamos exportar seu design em um tamanho diferente para dispositivos diferentes. Garantindo que fique crocante em todos os lugares. Talvez você queira uma versão menor para seu design para pus. Enquanto um maior é perfeito para impressão, fator de escala oferece flexibilidade. Agora, vamos entender o que é 500 poços de largura e 500 de altura. Portanto, essas são dimensões absolutas, o que significa que especificam a largura exata e a imagem de exportação da parte superior superior em uma pixelização É como dar à Figma um tamanho específico de forma de bolo. Eu me levantei apenas dizendo o dobro da credibilidade. Agora, vamos tentar exportar alguma coisa. Eu sei que era muita teoria. Nós aprendemos agora. Então, atualmente, vamos exportar a mesma coisa dentro de um x, bem como em dois x. Eu quero fazer isso em um, bem como em três x. Ok, vamos adicionar isso em cinco de uma largura, bem como cinco de um de largura, mas vou alterar alguns valores. Vou adicionar um de 50 de largura. Você pode estar se perguntando o que são esses dois X em três x em três X. Esses são os sufixos que estamos exportando atualmente Portanto, no final da imagem antes da extensão, como antes do PNG, ele primeiro dirá o nome do componente que é cupom no nosso caso e, depois disso, eles adicionarão sufixo e depois dessa extensão Então, deixe-me exportar este por enquanto. Saberemos quais são eles. Vou adicionar isso nas cidades. Então, todas as imagens são exploradas e, como você pode ver, esses são o sufixo em dois x em três x e em três x Então, esses são os sufixos. Então, deixe-me ver a extensão. Ok, então eu explorei em formatos diferentes, como em JP bem como em P, bem como em P e também em SVG Então, vamos abrir o arquivo JPEG primeiro. E digamos a diferença. Então, como você pode ver com o JPEG, não temos transparência Mas se eu abrir o P G, como você pode ver, obtemos transparência. E você também pode ver os diferentes tamanhos, como os tamanhos reais da memória. Para JPEG é 204 para PNG, it e este é para uma largura de 50 É muito baixo, 70 K e para SG é 77 K. Mas benefício do PG é como se tentássemos importar isso em nosso design, e se eu tentar escalá-lo, zk, como você pode ver, ele não está Então, se você quiser usar seus elementos ou componentes em diferentes arquivos de design, porte em seu fg Há uma coisa extra que eu quero mostrar para você, como se eu fosse até arquivos e na exportação, como você pode ver, eu tenho 12 itens dentro dele, porque até agora, eu exportei 12 elementos deste Isso o ajudará quando você quiser ver seu histórico, como o que acha que você exportou até agora Ele mostrará as propriedades dele, qual é o pixel, o couro cabeludo, o formato p, e você poderá exportá-los diretamente novamente, se quiser. Então, isso é tudo o básico da exportação na Figma. Dessa forma, abordamos as imagens básicas de exportação da Figma Portanto, indique um caso de uso mais detalhado nos próximos vídeos. Se você encontrou esta piscina, por favor, não se esqueça de me avisar, e nos vemos na próxima. 99. Como entregar seus designs de UX como um PRO: Nesta página, guiarei você no processo de exportação do documento Figma, que pode ser útil para compartilhar com seus clientes, que pode ser útil para compartilhar partes interessadas, equipe de desenvolvimento, equipe de design e participantes da pesquisa com usuários Gerente de produto. Portanto, exploraremos diferentes métodos , incluindo a exportação de molduras usando ferramenta de slides e o compartilhamento de links Até usávamos todas as ferramentas disponíveis no Figma, mas existe uma ferramenta Essa é uma espécie de ferramenta oculta, e não a usamos. Acho que te mostrei, mas não usamos isso. Então, neste vídeo, também vamos usar essa ferramenta. Ok, talvez você saiba como compartilhar um projeto. Saiba como compartilhar e copiar um link, e deixe-me pressioná-lo aqui. Podemos copiar este link e compartilhá-lo por e-mail, seja qual for a sua escolha, e você também pode compartilhar o protótipo Basta compartilhar o protótipo, copiar o link ou você também pode convidá-los e defini-los como apenas visualizados e compartilhados com eles. Isso é a mesma coisa. Então, deixe-me copiar isso. Copie o link T para texto. OK. Portanto, esse é um dos métodos clássicos que você mais usa. Mas digamos que você queira compartilhar seu projeto no formato Pap. Então, nesse caso, você pode usar o Pap. Então, basta acessar os arquivos, exportar o quadro para o Pap, mas há um problema, mas vamos usar o Pap agora, para que você saiba qual é o X explodiu, então deixe-me abri-lo. Então, como você pode ver, explodiu tudo, como cada quadro, cada quadro automático, cada botão. Lembre-se de que o FIPMA considera um layout automático como uma moldura. Portanto, talvez seja necessário apertar o documento antes de explodir. Depois de explodir, você pode excluir páginas desnecessárias usando uma ferramenta de ppting como o ILO Outro método interessante é usar a ferramenta de fatiar. Então, vamos dar uma olhada nessa ferramenta de corte. Mas, como você pode ver, esses PDAs totalizam. Eu só queria ir desta página para esta página, mas ela adicionou todas as páginas do pp. Então, vamos aprender como cortá-los ou cortá-los, e estamos usando a ferramenta de fatiamento Ok, está aqui embaixo da moldura para cortar. Agora temos esse padrão positivo, então só temos que rastreá-lo porque eu só quero esses quadros. Agora, como você pode ver no painel de camadas, cortamos um, então podemos nomeá-lo como Ok, eu o chamei de click V one frames Um painel de design, só tem botão de exportação. Vamos clicar nele. Mas o problema com a fatia dois é que ela não suporta arquivos PD Ele suporta todo o formato, mas não suporta PD. Se eu tentar escolher PDF e clicar nele, como você pode ver, a exportação de fatias para PDF não é suportada no momento Vamos usar um PNG e definiremos nosso fator de escala para que a imagem escolhida seja clara e nítida Vamos clicar na porta. Ok, então é e o tamanho do arquivo é, não B. Se eu abrir, como você pode ver, é muito mais nítido, a qualidade é realmente ótima Ok, agora está ficando pixelizado, mas como você pode ver da perspectiva normal, é ótimo. É compartilhável. E também podemos converter isso em PDP usando outras ferramentas como PD Este é o site real. Você pode acessar esse site e ele P. Mas se você quiser apenas exportar esse quadro no PIP, exclua todos eles ou mova-os para componentes de página separados e, em seguida, escolha apenas esses quadros e exporte-os como P. Então, isso era tudo sobre como você pode compartilhar o projeto com os clientes de seus clientes, bem como usar a ferramenta de fatia e como exportar seus arquivos em P. Mas aí é uma coisa que eu esqueci de te mostrar, como, digamos, eu quero exportar apenas essa coisa Vamos clicar na exportação, e eu posso exportar isso para PNG porque PNG me dá transparência no plano de fundo, e há uma coisa que você pode fazer. exemplo, digamos que você não quer transparência, você quer tudo. Então, nesse caso, você quer camadas sobrepostas. Nesse caso, você pode escolher ir ao menu de três pontos e há uma opção. Ignore as camadas sobrepostas. Se você selecionar isso, como você pode ver, nada está acontecendo porque este não é o exemplo adequado, mas se eu escolher este, exporte se eu selecionar este, como você pode ver, temos camadas sobrepostas Portanto, lembre-se de que, se você quiser manter suas camadas sobrepostas, selecione isso e, se não quiser , clique aqui Por padrão, é clicado em ignorar camadas sobrepostas. Então, vamos fechar isso, então foi isso que eu esqueci de mostrar no vídeo anterior Então, tudo se resume a explodir. Esse é um vídeo de maconha, e nos vemos no próximo. 100. Introdução aos materiais e inspirações de sistemas de design: Bem-vindo a uma jornada ao coração da inovação em design. Hoje, estamos passando pela complexidade do sistema de design. A força motriz por trás da criação de produtos digitais coesos e eficientes Vamos começar desfazendo os mitos. Um sistema de design não é apenas uma biblioteca ou um guia. É uma fonte única de verdade que utiliza todos os elementos para um design e desenvolvimento de produtos perfeitos. Um sistema de design estático de entrega evolui O sistema de design evolui com produtos, ferramentas e tecnologias medida que Gina e Apo se sentam, elas abrangem ferramentas, padrões e componentes emaranhados, mas também abstraiem o elemento, como valores de marca e Então, vamos nos aprofundar no específico. Um guia de estilo se concentra no estilo gráfico. Enquanto a biblioteca de padrões integra componentes funcionais. Um exemplo notável inclui tropifiepoliz, combinando perfeitamente os dois. As demonstrações de design em breve cresceram, especialmente porque o digital se tornou o foco principal. sistema de design preenche a lacuna entre o impresso e o digital, estimulando uma linguagem compartilhada que se adapta e amadurece Então, vamos explorar os componentes cruciais. O primeiro propósito e o valor de cisalhamento estabelecem a base. Guias de princípios de design, decisões significativas e identidade de marca a partir de um alfabeto exclusivo Componentes e padrões, como blocos de lego, são instruções de construção e estrutura. Escolher o sistema de design certo exige fazer a pergunta certa: eu sou rigoroso ou perco modular ou integrado, centralizado ou distribuído Sua decisão influencia a eficácia e a escalabilidade desse sistema. Agora, vamos nos inspirar alguns exemplos de sistema de design. Como a primeira, é a defesa do sistema de design da IBM. Este é o sistema de design da IBM. Como o mundo dos EUA é tão aberto, eles nos fornecem todos os valores dessa cor Qual é o significado dessa? Qual é o significado dessa fonte ou algo parecido. Como você pode ver, todo o sistema de design é fornecido neste site. Vou adicionar esse link nos recursos, então dê uma olhada nele . E também incluirei este artigo de sistemas de design médio para design em 10204. Então, passe por isso. Tem tudo o que você precisa saber, todos os recursos e tudo mais. Agora, vamos passar para o polar do Shopify. Esse é o sistema de design do sistema da Shopify. Depois disso, temos o material.ai, material dot O. Este também é um dos ótimos sites para inspiração de design. E sistema de design. E se você quiser saber tudo sobre o sistema de design do zero, acesse este site chamado sistema de design e, a partir disso, você saberá tudo sobre o sistema de design. Um sistema de design é um produto em si. Como qualquer bom produto, ele foi literalmente impulsionado pelo feedback do usuário, pela integração com designers e desenvolvedores, integração com designers e desenvolvedores, eficácia do anúncio do fluxo de trabalho criação de uma experiência de usuário mais perfeita O futuro promete desenvolvimento empolgante em um sistema de design. avanço tecnológico simplificará nossas vidas e nos permitirá focar mais em anunciar a experiência do usuário Concluindo, um sistema de design é o modelo dinâmico que capacita as equipes a construir sua integração com fluxo e a localização constante, garantindo uma abordagem centrada que nos leve à empolgante era da inovação em Então, isso é tudo sobre o sistema de design e o propósito por trás do sistema de design. Este também é um dos sites em que você pode acessar e aprender sobre o sistema de design, como se eu fosse a este site, design dot wonderful dot flow. Este é o site, e este, este site tem todos os sistemas de design. Se eu analisar, como você pode ver, eles exibem tudo, como a cor , os ícones a finalidade do ícone. Tudo. E basta acessar o site e aprender tudo sobre o sistema de design. Há também um site chamado Atlantis Design. É também um dos melhores sites se você quiser aprender sobre o sistema científico. Então, analise e aprenda tudo sobre o sistema de design. Vou adicionar todos os recursos nos recursos. Então confira isso. Então, isso é tudo sobre sistema de design. Exploração do sistema de design. Então, comece a ter mais informações e inovações em cada velho mundo do design Design feliz para alunos sociais. 101. Introdução - projetos do mundo real Com figma: Heather design tos, bem-vindo à série de projetos UX do mundo real porta de entrada para reforçar a criatividade e aprimorar suas habilidades de design. Agora, escute. Ainda não anunciei que você está prestes a embarcar em uma jornada emocionante, na qual participará de um projeto de design do mundo real. Mas aqui está o problema. Não vou te dar o guia passo a passo. Não, você está no banco do motorista. Imagine isso. Você tem a tarefa de criar uma planilha e usar um aplicativo amigável de entrega de comida Você pode se inspirar seu aplicativo favorito, como bots ou Zomato, ou criar sua própria versão com um toque especial. OK. Eu sei que você precisará de uma pequena instalação de reforço. Mergulhe nos links de recursos que forneci. Explore diferentes sites e aplicativos, assista a esta palestra novamente no bate-papo com Chad Jept ou com o Google Gemini para ver alguns Nesta série, sua missão é aplicar todas as habilidades que você aprendeu neste curso, desde layout e componentes automáticos até animações e efeitos inteligentes. E não se esqueça da experiência do usuário. Seu design deve ser integrado e contínuo, facilitando a vida Ao longo desta série, você terá a liberdade de experimentar fontes, cores, ícones e imagens. Deixe sua criatividade fluir como uma loucura. Mas lembre-se de que a simplicidade é fundamental. Mantenha seu design limpo e livre de bagunças para obter o Depois de dar o toque final em sua obra-prima, é hora de compartilhar seu trabalho com o mundo Some o design e desfrute da glória de seu trabalho árduo e de suas novas proezas no design de fontes Então você está pronto para mergulhar no mundo do design V do mundo real? Mal posso esperar para ver o que você vai inventar. Então, vamos fazer alguma mágica acontecer. 102. Projeto UIUX do mundo real 2 StayWaveProjeto UIUX do mundo real 2 StayWave: Bem-vindo à série de projetos Real World X. Peça para vocês darem vida às suas habilidades de design e enfrentem juntos os desafios do mundo real. Desde a criação de uma interface elegante até o aprimoramento da experiência do usuário, esta série é sua chance Então, vamos mergulhar e fazer a mágica do design acontecer. Tudo bem, moça, hoje, eu tenho um projeto interessante para todos vocês Vamos projetar a interface de usuário para um site chamado Stay Wave. Site de estadias para reservar albergues para turistas com orçamento limitado. Nosso objetivo é criar uma interface amigável que permita aos viajantes pesquisar, comparar e reservar acomodações com facilidade . Antes de mergulharmos no processo de design, não deixe de conferir os arquivos de recursos que forneci. Você encontrará todos os ativos e informações necessários para começar. Agora, vamos falar sobre o conceito de design aplicaremos neste projeto. Você tem a liberdade de estimular a criatividade, mas certifique-se de incorporar o seguinte O primeiro é o layout automático, certifique-se de que o design seja responsivo e se adapte perfeitamente a diferentes tamanhos de tela A segunda é a variante, use a variante para criar um estilo diferente para botões, cartões e outros elementos da interface do usuário. terceiro componente negativo cria componentes reutilizáveis para manter a consistência em todo Force uma animação inteligente, adicione uma animação sutil para anunciar a experiência do usuário sem sobrecarregar a interface e, para durar esse efeito, experimente efeitos como sombra, gradiente e sobreposição para que o design geralmente apareça Portanto, sua primeira etapa é entender o fluxo de tarefas e entender o resumo do projeto. Pense na jornada do usuário desde a busca pelo albergue até a conclusão do processo de reserva. Ao projetar o wireframe, lembre-se de mantê-lo simples, focar no layout e na funcionalidade antes de adicionar elementos visuais Depois de finalizar o wireframe, é hora de colocar seu design no ar Preste atenção à tipografia, às cores e às imagens para criar uma UY visualmente atraente. Quando terminar o design da interface do usuário, você pode capturar uma captura de tela ou, se possível, link do protótipo da Semar e revisar as instruções do projeto em PDF para obter do projeto e às imagens para criar uma UY visualmente atraente. Quando terminar o design da interface do usuário, você pode capturar uma captura de tela ou, se possível, usar o link do protótipo da Semar e revisar as instruções do projeto em PDF para obter mais detalhes. Lembre-se de que este projeto é uma oportunidade para você aplicar tudo o que aprendeu em nosso curso Figma e não hesite em entrar em contato se tiver alguma dúvida ou precisar de orientação ao longo do caminho Estou animado para ver o que você vai inventar. OK. 103. Aplicativo de entrega de alimentos UIUX Project 3 do mundo real: Bem-vindo à terceira série de projetos UIVx do mundo real. Hoje, eu tenho algo que não só desafiará sua habilidade, mas também despertará sua criatividade Imagine que você está com fome, desejando seu prato favorito, e tudo o que você precisa para satisfazer esse desejo são alguns tipos em seu aplicativo lindamente projetado Então esse é o poder de um excelente aplicativo de entrega de comida. E hoje, vamos projetar um. Mas antes de nos aprofundarmos, vamos tornar isso ainda mais interessante. Aqui está o acordo. Neste vídeo. Eu não vou te dar uma breve visão geral do projeto ou qualquer fluxo de tarefas e qualquer Sua missão é criar o fluxo de tarefas e o resumo do projeto e, em seguida, criar um wireframe para esse aplicativo que não é apenas dinâmico, mas também fácil Portanto, nossa tarefa é clara criar uma experiência perfeita para usuário que pede comida on-line Tudo começa com um processo de estação de usuário, seguido pelo design de um AZ para navegar no menu. Pense em como o usuário selecionará seus pratos, personalizará o pedido e processará até a finalização da compra. Queremos que todo o processo seja suave como uma fita de seda. Para deixar sua criatividade fluir, deixe-me mostrar alguns exemplos de aplicativos de entrega de alimentos que elevaram o padrão Pense no que os torna excelentes e faça uma lista deles para superá-los. Para este aplicativo, você precisa criar um elemento essencial do aplicativo. A primeira é a tela principal depois dessa opção principal. O terceiro é a personalização do pedido e o último é o processo de pagamento. Mas aqui está a parte interessante. Quero que você deixe seu espírito criativo crescer, experimente fontes, cores, faça o layout e use a interação Lembre-se de todos os princípios de design que abordamos na aula. Se você precisar de alguma atualização, visite os vídeos das aulas E não se esqueça de conferir o projeto de lei em anexo com diretrizes e recursos adicionais. É a sua bússola nessa jornada criativa. Deixe-me deixar você com esse pensamento. Design é pensamento feito visualmente. Portanto, seu design representará seu pensamento, sua criatividade e sua inovação. Antes de terminar este vídeo, aqui está o desafio. Não apenas atende aos requisitos, mas os supera de maneiras criativas exclusivas. Não temos prazos, mas lembre-se: uma jornada de design, não apenas um destino Mal posso esperar para ver o design fantástico de I Was que você criou. Ok. Então, vamos tornar esse desafio memorável, inspirador e, acima de tudo, divertido Então, você está pronto para embarcar nessa deliciosa jornada de criar um aplicativo de entrega de comida que causará impacto? Então, vamos fazer isso. Agora vá lá, forme uma equipe e comece a projetar, compartilhe seu progresso, perguntas e ideias com a turma. O mundo dos aplicativos está para conquistar e, juntos, somos imparáveis Então, obrigado por fazer parte da jornada. Estou ansioso para ver você, criador, como o melhor. Boa sorte e vamos começar. 104. Aplicativo de música RealWorld UIUX Project 4: Bem-vindo à série de projetos de UX do mundo real. Este é o projeto quatro. Acho que sim. Hoje, tenho um projeto empolgante para você. Você criará um aplicativo de música fácil de usar e visualmente brilhante que rivaliza com plataformas populares como Spotify e YouTube Então, vamos começar entendendo o resumo do nosso projeto. Não é breve, apenas uma instrução. Queremos que você crie um aplicativo que ofereça uma experiência de audição perfeita e agradável para os amantes da música de todos Nosso público-alvo inclui entusiastas da música de todas as idades e origens Isso significa que precisamos criar um aplicativo que seja integrativo e fácil de navegar, tanto para usuários experientes quanto para usuários experientes Nossos aplicativos de música devem incluir recursos importantes, como descoberta de músicas, reprodução perfeita e compartilhamento social Você pode se inspirar em seu aplicativo favorito como música ou Spotify Ou você pode criar sua própria versão. Como parte do projeto, além dos esfregões Figma de alta fidelidade, você criará armações de arame para E também amigos de baixa fidelidade que representam o design do aplicativo R Music, ajudando você a planejar o layout e a funcionalidade Seus divs finais incluirão maquetes de alta ferrityFGMA e wireframes, mostrando a interface do usuário e a experiência do usuário do aplicativo maquetes de alta ferrityFGMA e wireframes, mostrando a interface do usuário e a experiência do usuário do aplicativo de música. Você também mapeará o fluxo do usuário para as principais tarefas, como desencorajar novas músicas, criar playlists e gerenciar a reprodução E lembre-se de que devemos priorizar o design centrado no usuário, garantir um design visualmente atraente e tornar o aplicativo acessível também ao usuário com Agora que entendemos claramente o projeto, é hora de testar suas habilidades, se inspirar em aplicativos públicos como o inspirar em aplicativos públicos Spotify YouTube Music, mas também deixar sua Experimente cores e fontes para tornar o aplicativo geralmente atraente Brinque com estilos diferentes e encontre a combinação adequada ao público-alvo. Depois de concluir o design e o wireframe, certifique-se de enviar o projeto de acordo com as instruções fornecidas no PDF Ele contém todos os detalhes que você conhece. E estou animado para ver o que todos vocês inventam. Lembre-se de que, se você se sentir preso ou precisar atualizar algum conceito, revisite os vídeos da aula anterior e boa sorte com seu projeto de aplicativo de música Mal posso esperar para ver seu design criativo e armações de arame. Se você tiver alguma dúvida, não hesite em perguntar. Vamos fazer algo incrível juntos. 105. RealWorld UIUX Project 5 DIY: Bem-vindo à série I X Project do mundo real. Este é o Projeto Número Cinco. Você aprendeu os meandros do Figma. Você dominou o princípio da UX e agora é hora de brilhar Para seu último projeto definitivo, tenho um tratamento especial para você. Você pode optar por criar um aplicativo móvel, um site ou até mesmo um aplicativo de texto O céu é o limite. E aqui está o problema. Você está começando do zero, sem wireframes ou modelos pré-fabricados. É tudo U. Choice é inteiramente verso O que você quer para criar um aplicativo móvel revolucionário , um site incrível ou um desktop regional ou deixar sua criatividade correr solta. E sim, você me ouviu direito. Sem recursos masculinos. Mas não se preocupe. Você tem todas as habilidades de que precisa. Se você se sentir preso, lembre-se, existem esses incríveis vídeos culturais. Observe-os novamente, eles são como um feitiço mágico UIX. Agora, eu quero que você veja seu Picasso interior brilhar. Não se limite a projetar, crie uma obra-prima, adicione seu toque único, seja criativo e torne-a sua. Depois de colocar seu coração e alma em seus projetos, siga as instruções super detalhadas neste pip. Mostra como enviar sua criação para mim. É como enviar uma mensagem em uma garrafa. Ok, então eu mal posso esperar para ver o que você virá. A jornada do UOXvis ao design, virtudes tem sido incrível. Você tem a habilidade. Agora, tudo se resume a colocá-los em ação. Então aproveite cada momento desse projeto. E se você tiver alguma dúvida ou precisar de um conselho, estou aqui para você. Então, sem mais delongas, vamos dar asas à criatividade e começar o design Você tem isso. OK. 106. 10 princípios psicológicos para um design poderoso de UX: Colegas designers e mentes curiosas. Bem-vindo a outro episódio empolgante em que revelamos o segredo de se tornar o melhor designer de UX. Hoje, estamos mergulhando no fascinante mundo dos princípios da psicologia que podem avaliar seu jogo de experiência de usuário Então pegue sua bebida favorita, relaxe e vamos embarcar juntos nessa jornada de design Como ex-designer, não somos apenas criadores. Somos psicólogos disfarçados. Compreender nosso orçamento e nossa percepção nos EUA é a chave para criar uma experiência agradável Hoje, exploraremos dez princípios psicológicos que o transferirão para uma área de UX. Então, vamos direto ao assunto. A primeira é a lei de Hicks. Já nos sentimos sobrecarregados com muitas opções? É como estar na frente da coleção de tênis We. Essa é a lei de Higs em ação. Quanto mais opções, maior o tempo de decisão. Ao criar menus ou interfaces, simplifique, priorize e facilite a decisão do usuário A próxima é a lei de Jacob. O usuário adora a familiaridade. Em vez de alugar, eles estudarão design de sucesso em seu setor É como encontrar a receita perfeita. Por que mudar isso. Alinhe-se aos leitores do setor para criar uma experiência de usuário perfeita e confortável A terceira é a lei de Miller. A lei de Miller nos ensina que nossa memória de trabalho tem limites. Só podemos lidar com cerca de sete vezes por vez. Portanto, ao apresentar as informações, comece a verificá-las, dividindo-as em pedaços pequenos para uma experiência cognitiva mais suave O quinto é o princípio de Gzel. Ela revela como nossa mente naturalmente organiza as informações. Ele utiliza proximidade, semelhança, continuidade, fechamento e conexão com um design visualmente estruturado A quinta é as cores, as cores falam mais alto que as palavras. Esteja atento às opções de cores, elas influenciam a emoção e a percepção O verde pode ser perfeito para produtos ecológicos, mas não tanto para alimentos. Prove e escolha cores amplamente para transmitir a mensagem certa O princípio do sexo são modelos de metal, modelos de metal são como sistemas de crenças do usuário. A Lign com eles cria produtos fáceis de usar. O aplicativo dela imita a ação da vida real. Design de materiais inspirado no mundo físico, alinhado com a forma como interagimos naturalmente É tudo uma questão de fazer com que o usuário se sinta em casa. O princípio sete é o único efeito resto. Queremos que o usuário se lembre de algo, faça com que se destaque. O único efeito nos diz que a nitidez melhora a memória. Assim como projetar uma plataforma Flight Bookme, torne uma informação crucial visualmente distinta para uma melhor lembrança Seu princípio é a lei mais adequada. Fits law simplifica a interação. Os elementos grandes mais próximos do usuário são mais fáceis de identificar e interagir. Considere essa tela de login. Os elementos grandes não são apenas perceptíveis, mas também convenientemente localizáveis para a interação do usuário O nono é o pico rural. forma como nos sentimos em relação à experiência depende de seu movimento máximo e final. Descubra os melhores momentos da interação com o usuário, como a descoberta de um produto ou a finalização interação com o usuário, como a descoberta de um produto ou da compra. Ser excepcional. Lembre-se, vários picos, crie uma jornada memorável. Por último, mas não menos importante, o efeito de usabilidade estética O usuário cria um pequeno problema de usabilidade se adora o design visual No entanto, a beleza nunca deve obscurecer a funcionalidade. Teste cedo com molduras opcionais para garantir uma combinação perfeita de estética e usabilidade E aí estão os dez princípios psicológicos que transformarão U UX design zar. Observe, aprenda e implemente esse princípio em seu design, fique curioso e continue experimentando e, o mais importante, aproveite a jornada de criar uma experiência de usuário agradável, e eu anexarei todos os recursos de todos os de Então, se você quiser aprendê-las profundamente, leia até a hora do almoço, Happy design 107. Como alavancar a psicologia para obter experiências personalizadas de usuários: um estudo de caso: Co-projetistas, aprenderemos um estudo de caso. Isso é para personalização, como a forma como a personalização funciona no design da interface do usuário X. Então, imagine passar 87 horas por ano pesquisando conteúdo na plataforma de streaming. Parece cansativo Certo. Bem, essa é a realidade do usuário médio. Na verdade, mais de 76% dos usuários sofrem de fadiga de conteúdo Mas não tenha medo, descobrimos uma solução baseada na psicologia Para realmente entender nossos usuários, seguimos um processo de design de robôs. Tenha empatia, defina, idealize e projete por meio de entrevistas e pesquisas. Com a luta está um rosto que nos leva a uma Ok, esse problema sempre acontece diariamente, digamos que eu queira assistir algo no ODD e também no Netflix Então, nesse caso, é muito opressor e eles estão muito contentes Às vezes eu ficava confuso, tipo, o que eu deveria assistir. E agora, a Netflix, assim como o YouTube tem um botão chamado reproduzir algo aleatório. Também está em tubo. Chegou recentemente, acho que, há alguns dias, vi que há um botão chamado. Botão quadrado. Era um botão quadrado, toque algo aleatório. Foi assim. E na netflix, há uma seção dedicada. Se você clicar nele, ele reproduz algo aleatório. Surpreenda-me. Então, quando eu estava pesquisando sobre isso, conheci o fluxo de usuários Por exemplo, digamos, após 1/52 da rolagem, os usuários são promovidos a escolher seu humor atual, como se estivessem felizes, animados, deprimidos ou tensos É a causa do primeiro conteúdo repleto de ação. Embora a felicidade permita gêneros versáteis, para se sentir deprimida, prescrevemos filmes leves, relaxantes e E quando ficamos tensos, acrescentamos algo que está por vir Em primeiro lugar, defina o tom emocional. Agora vem a mágica. Com base em seu humor, os usuários são apresentados gêneros estilizados de acordo com seu estado emocional Seja romance ou comédia, as opções são personalizadas para ressoar com seus E o usuário final escolhe entre conteúdo internacional ou original. E a recomendação personalizada de filmes aparece, criando uma experiência de usuário perfeita e emocionalmente ressonante Com um design meticuloso, criamos uma interface que lê o modo do usuário, como gêneros, e oferece uma escolha entre conteúdo internacional e regional Um recomendador de filmes personalizados com uma opção recheada Mas onde há mais. Então, quando eu estava lendo um artigo, vou ler isso, como no futuro, invadiremos usando o movimento de reparação da ratoeira Levando a pessoa a um nível totalmente novo. Portanto, se você arrastar o mouse como se estivesse empolgado, ele mostrará a contagem de empolgação, como ação e tudo Se você tentar devagar, vai mostrar que você gosta de filmes. Então, por causa disso, cada guia de movimento do usuário percorre uma jornada cinematográfica Agora, essa foi a primeira parte sobre a personificação. Agora, vamos falar sobre como o MS é como o Google e o Facebook. A personificação. Então, grandes empresas como Google e Facebook dominaram a arte de coletar dados de usuários, unindo ação e essência, criando um universo digital pessoal Mas como isso afeta emocionalmente o usuário? Mestres de design como Don Norman enfatizaram a importância do design emocional, da estética visual à usabilidade do castor, e do prestígio reflexivo. Um bom design deve trazer alegria e prazer ao usuário, mas como isso É aqui que entra a personalização no digital, onde os dados do usuário preenchem a comunicação inteligente, como o AIML. Lewis, você deve ter visto na caixa de entrada do Google e-mails categorizados. A estação do Facebook para novos conteúdos. Trata-se de apresentar dados personalizados, adicionando emoções negativas sem problemas Tipo, tem uma coisa que aconteceu comigo, como quando eu estava assistindo filme no YouTube ou algum vídeo aleatório, e eu estava pensando em assistir algo depois disso. Então, exatamente o mesmo vídeo foi confirmado novamente na minha área. Então foi chocante para mim. Eles são fortes e realmente conhecem você. Eles conhecem cada movimento, o que você faz e tudo mais. E com base nisso, eles recomendam coisas para você, além de anúncios. O futuro da personalização também se estende à Internet das coisas, como dispositivos inteligentes como Google Ns, Amazons, Alexa, preferências do usuário, não apenas visualmente, mas por meio de voz e O design e a emoção agora transcendem a tela. O princípio do design emocional de Donomos nos guia. prazer e a diversão devem acompanhar o uso da tecnologia à medida que criamos novos produtos e serviços digitais. O impacto emocional se torna fundamental para o sucesso. E também temos que explorar alguns gatilhos, assim como encontrar alguns gatilhos positivos e negativos exemplo, ao reservar um assento de cinema ou um voo, Por exemplo, ao reservar um assento de cinema ou um voo, use essa urgência e escassez de ação, sportifi encante o usuário É um equilíbrio delicado entre a criação experiência positiva e a ação negativa dos usuários. A verdadeira mágica acontece quando se trata de personalização e design emocional. Não se trata apenas de comunicação visual. Trata-se de impactar emocionalmente os usuários. Conseguir essa mágica requer uma compreensão profunda da motivação e do desejo do usuário. À medida que avançamos para o futuro, personalidade e a emoção no design se tornam mais aparentes Os designers evoluirão designers de engajamento emocional, criando experiências que ressoem com o grupo específico Portanto, nesta era de evolução digital, lembre-se um bom design é memorável, mas um ótimo design é ao mesmo tempo memorável e significativo. Então, isso é tudo sobre o estudo de caso, bem como sobre como a psicologia da personalidade funciona em YuxFeld bem como no campo do design gráfico Então, vou adicionar todos os recursos , bem como no pedófilo, bem como no It's a tap Passe por isso, se quiser aprender essas coisas profundamente. E obrigado por embarcar nessa jornada conosco. Se você achou essa visão valiosa, por favor, me avise e até a próxima hora, continue projetando com o coração e abrace a oposição mágica da experiência 108. Psicologia das cores em design de UI/UX: Bem-vindos de volta, estudantes. Hoje, estamos unindo o mundo da psicologia ao design VX Portanto, toda essa seção é dedicada à psicologia para UI e X. Então, EVA significa experiência do usuário Todos sabemos que ela desempenha um papel fundamental em nossa interação com Agora, por que a psicologia é importante no design da experiência do usuário? Bem, os Schumann são seres maravilhosamente complexos, cada um com uma preferência única Então, como as empresas de tecnologia tornam seus aplicativos tão atraentes para um público tão versátil É digitando única coisa que todos nós compartilhamos: nossos sentidos Temos cinco sentidos incríveis: tato, audição, visão, olfato e paladar No entanto, quando se trata de abdômen, focamos principalmente no toque, no arenque Infelizmente, não podemos sentir cheiro e paladar. Foco. Dois anos atrás, vi um vídeo, como se você vazasse uma tela, e se houvesse um pé em exibição, você provaria a comida Isso ou algo parecido. que isso acontecerá no futuro e também teremos esse recurso em nosso telefone. Eu sei que é assustador Agora, vamos explorar o impacto da representação visual na tomada de decisões OK. Considere isso qual prato de comida parece mais caro, o da direita ou do esquerdo. Acontece que não se trata da quantidade de comida. É sobre como foi apresentado. Isso enfatizou a importância da bela interface, mas como projetamos uma Tudo se resume aos dois fatores-chave. A quantidade de informações e como elas são apresentadas. Pegue um cardápio, por exemplo, muita informação pode levar à sobrecarga cognitiva, deixando rastros em nosso cérebro Como se houvesse uma lanchonete Bani na minha área. Então, suas tarefas são muito simples, existem apenas quatro opções, e é muito simples de encomendar, e há outra junta Eles nos dão um cartão domini, e nele existem centenas de opções Então, hoje em dia, eu vou a esse novo restaurante, que tem apenas quatro e cinco opções, e é muito fácil de encomendar. Agora, vamos falar sobre cores. As cores também desempenham um papel importante, pois uma cor brilhante e incompatível pode ser desgastante Isso nos leva à fluência de processamento e percepção. É com isso que processamos as informações. Agora vamos dar uma olhada nas informações apresentadas no site. Ambos gigantes da tecnologia oferecem funcionalidades semelhantes. Mas eles escolhem abordagens diferentes. Não se trata de certo ou errado. É sobre a experiência do usuário. Agora, vamos refazer o experimento. Feche os olhos por um momento e pense nas emoções associadas a essa cor. Vermelho, verde, azul, roxo. A cor influencia nosso sentimento e ação. É por isso que as notificações de aplicativos costumam usar a cor vermelha para chamar nossa atenção. Continuando com o som, é uma ferramenta poderosa para aplicativos capturarem nossa atenção e promoverem o comportamento individual. Vamos fazer um segundo experimento. Feche seus olhos. Vou tocar alguns sons e você precisa identificar o aplicativo de som ou o site. Espero que você tenha identificado os sons. Eles foram projetados com alta frequência para nos alertar ao ouvir um tom específico Não conseguimos identificar o aplicativo. Agora, vamos falar sobre capacidade de resposta e reforço positivo no design de aplicativos Feedback positivo, como vibração ao enviar uma postagem, incentiva a interação Por outro lado, o reforço positivo da Internet, como atualizar um campo de mídia social, nos mantém Semelhante à emoção de uma máquina caça-níqueis. A personalização é crucial para o design do aplicativo. O aplicativo cria um modelo de sua preferência com base na interação, criando um trailer mais agradável e uma experiência mais agradável Mas lembre-se, há uma adaptação hedônica pegajosa. Nós nos acostumamos com estímulos positivos e negativos levando as empresas a fornecer atualizações frequentes para nos manter engajados O design intuitivo é um motivador fundamental para que o usuário se comporte da maneira que o desenvolvedor deseja O Instagram, por exemplo, promove notificações para cada interação. Incentivando mais engajamento. Em última análise, todos esses elementos de design visam atingir o sistema de doponina em nosso cérebro Fazendo-nos felizes e, por sua vez, usando mais o aplicativo em um mundo onde os telefones evoluíram de um dispositivo de comunicação básico para dispositivos multifuncionais complexos, as empresas desejam Então, isso nos leva ao código quebrado do pensamento. Existem duas indústrias que chamam seus clientes de usuários primeira tonelada de drogas ilegais e a secundária de software. É algo que vale a pena se perguntar. Espero que você esteja entusiasmado com a forma como nossos sentidos e emoções estão sendo interpretados por meio do site appsit que usamos todos os dias, mas essa é a ponta do iceberg Há todo um oceano de psicologia fascinante em ação no mundo digital, e estamos apenas mergulhando. Então, prepare-se para se aprofundar, pois faremos muitos vídeos discutindo esses tópicos incríveis. Na próxima rodada, colocaremos nossos códigos de laboratório e ficaremos super nerds sobre a teoria das cores, a ciência do som, a estação herótica, o design responsivo e o reforço responsivo Então, abordaremos todos os tópicos em um vídeo dedicado, e isso é só o começo. Teremos ainda mais tópicos incríveis em uma loja, como design persistente , adaptação social e o futuro da Até a próxima vez, lembre-se que os aplicativos podem ter sido projetados, mas você é o usuário no controle. Use sua forma, habilidade conhecimento para navegar pelo mundo digital com consciência e escolher a experiência que realmente anuncia sua vida. Fique curioso, fique uniformizado e, o mais importante, permaneça humano 109. O paradoxo da felicidade: como entender a adaptação hedônica em design de UI/UX: Outros designers. Hoje, quero desvendar o segredo criando uma experiência de usuário excepcional Hoje, estamos mergulhando no fascinante mundo da psicologia e como ela pode transformar você em um ex-maestro de design Recentemente, me deparei com um podcast alucinante, o laboratório da felicidade com a médica Lures Santos Vou adicionar os recursos de vinculação. Se você quiser dar uma olhada, dê uma olhada. É ótimo. E eu acho que o que? Eu me vi pensando em alguns insights propostos que se aplicam diretamente ao design de UX Então, Bakala, você já ouviu falar de adaptação hedônica? Não sei se estou propondo isso corretamente ou não, mas é como uma adaptação hedônica. Eu acho que está certo. Portanto, é o incrível impulso humano em que retornamos rapidamente a um nível estável de felicidade Não importa, a vida muda. Imagine ganhar 50 mil dólares e pensar que você ganhou 100 mil. Vamos fazer de você uma estática. Alerta de spoiler Não vai. O princípio afeta diretamente a forma como abordamos a experiência positiva. Agora, vamos falar sobre jogos incrementais, também conhecidos como jogos clicker Eu não joquei este jogo, mas se você jogou, por favor me avise. Isso estava no estudo de caso, então eu só estou te dizendo. Quando eu estava pesquisando, eu soube que você tem que fazer uma tarefa simples É como clicar na tela e receber algumas recompensas, é como um ciclo de felicidade. Você continua se atualizando, ganhando mais. E adivinha? Isso reflete a tendência humana, discuta a adaptação hándica. Então, esses jogos exploram a psicologia positiva. Esse desejo por mais recursos se alinhou à nossa atenção para buscar aumentar a felicidade É um golpe de mestre em design de jogos que mantém jogador envolvido em uma aparência de feedback positivo. Isso é um gênio, certo. Mas onde há mais. Este jogo também oferece recompensas offline. Como quando você volta, você criou com felicidade boo. É como investir em sua alegria futura. A psicologia aqui é proposta e continua jogando basquete. Agora, vamos trocar a marcha. Lembre-se daquele novíssimo iPhone. Eu não tenho iPhone. OK. Então, digamos que se eu comprar um iPhone depois de um mês. Inicialmente, ficarei muito feliz e ficarei muito feliz em ver aquela capa brilhante e uma tela brilhante na tela colorida Mas com o tempo, vou adaptá-lo, e seus impactos serão aulas. Então, como lidamos com isso no design? Então, eu quero compartilhar algumas estratégias que são estratégias como UO x design, design gráfico manual, pague isso. Estamos combinando adaptação hedônica. Primeiro de apoiar o relacionamento interpessoal. Produto que promove experiências compartilhadas, como Muto IJ de Albert in Tenho certeza de que escrevi errado. Ok, então eu vou te mostrar na tela. É difícil. Inglês é difícil. Isso não é inglês. Não sei qual idioma é esse, mas é difícil de pronunciar. Portanto, isso cria um impacto positivo duradouro. Em seguida, a segunda é a experiência S, otimize a experiência atual com o mínimo de prazer. Ao apoiar as metas pessoais , como vemos na execução do aplicativo, mantemos o usuário envolvido em um fluxo de eventos positivos. Quer se adaptar, oferecer uma experiência nova e surpreendente, seja a Uber pegando carros esportivos ou empresas de telecomunicações enviando presentes inesperados As surpresas mantêm a experiência atualizada. E, por fim, apoie a gratidão, produtos e serviços como o Facebook, celebrando a amizade digital, como em 2018, havia um vídeo usado em cada símbolo, como se você conversasse com alguém naquele vídeo, houvesse fotos suas ou de ambos, e eles criassem um vídeo realmente incrível É assim que eles personalizam e mantêm você conectado à plataforma deles. Isso ajuda os usuários a apreciar o que vivenciaram e a mostrar um impacto emocional duradouro Então, como você pode ver, eu ainda me lembro disso. Então é ótimo. E aí está, projetando para a felicidade, usando princípios da psicologia. Não é incrível? Como entender o comportamento humano pode moldar uma experiência inesquecível? Se você gosta dessa viagem, por favor me avise. Eu fiquei aqui para mais revelações de design e vx. 110. O efeito da Dopamina no design da UI/UX: Em um mundo dominado pela tecnologia, nossa sociedade anseia por Quick Topaminhds 32º vídeo, uma postagem mundial de 60 e artigos de 1 minuto se tornaram a nova norma Mas você já pensou nas consequências dessa mudança no consumo de conteúdo As pessoas buscam um conteúdo mais curto, mais consciente e mais simples para um prazer rápido e uma solução fácil Mas essa postura contente de felicidade e simplicidade está nos levando a um caminho do qual podemos nos arrepender Está evoluindo, apenas para trás. Todos nós somos uma solução fácil, com pitadas de felicidade, mas e a liberdade. Estamos, sem saber, nos tornando inimigos de nosso próprio bem-estar, presos no ciclo, alimentados pela corporação e pelas constantes recompensas digitais Dopamina, o prazer, incluindo neurotransmissor que sempre fez parte do sistema de recompensa do nosso cérebro Seja para se divertir ou até mesmo fazer compras, experimentamos o aumento da dopamina Mas o que é a conexão digital? Quando você rola algo em um dispositivo de conteúdo, como real ou TikTok, ou também em uma postagem de instrumento, você experimenta uma pequena onda de Tpamin Um toque de dedo recompensa você com um novo conteúdo em um segundo. É um ciclo constante de recompensa sem que percebamos Vamos comparar isso com um prazer mais tradicional como comprar um biscoito recém-assado A expectativa, a compra, o sabor de cada etapa acionam o Dopinpike, mas aí Não percebi a rapidez com que você recebe seu dopinpike de produtos digitais, comare a comer um biscoito. É uma corrida. Seu cérebro pode nem perceber quem está no controle. Quando seu cérebro está sobrecarregado pelo consumo rápido e contido, você almeja a reputação Isso se torna viciante. Você não quer mais caminhar até a padaria, prefere abrir, e eu tenho que pedir um biscoito, mas a que custo picos de dopomia de curto prazo, especialmente entre adolescentes, estão aumentando Uma parte significativa dos usuários de plataformas como TikTok, stogam e YouTube são jovens adultos que experimentam prazer constante, mas evitam desafios que Os adolescentes estão ficando isolados, sofrendo distúrbios do sono e formando hábitos que impedem O fácil se tornou o padrão e está afetando suas vidas. Então, como podemos, como designers, estar na linha de frente para mudar essa narrativa? Como podemos garantir que nosso design promova relacionamentos de longo prazo em vez de dependência. Nossa responsabilidade é clara. Ajude as empresas a construir relacionamentos de longo prazo com o usuário. Devemos evitar ser a fonte do vício e encontrar o equilíbrio certo do pico de dopamina É hora de sermos designers éticos e considerarmos o impacto de nossa criação. Portanto, existem algumas maneiras práticas de os designers criarem relacionamentos em vez de se viciarem. Criando um ponto de parada para o usuário romper entre dopampikes quando eu jogava pop gin em 2016, em 2018 Depois de três partidas, havia um cronômetro. Você não pode jogar por meia hora. Como o I Tub também, há um botão. Lembre-me de fazer uma pausa , pois há vários aplicativos. Agora eles estão incluindo o recurso. A segunda é focar na retenção de longo prazo, não apenas nos compromissos de campo A terceira é evitar escolhas de design que induzam medo. Os usuários não são escravos. Defina toda a experiência do usuário para entender o impacto da Dopampie quinta é priorizar o que é bom para todos a longo prazo, alojamentos para metas comerciais de curto prazo Então, designers, temos o poder de moldar a perspectiva de nossa humanidade, especialmente na era digital Vamos criar experiências que promovam crescimento, aprendizado e bem-estar E há um fato chocante ex-Cs e desculpas técnicas limitam sua exposição digital fria, entendendo o potencial do perigo É hora de ser um designer que garante nosso futuro, fazendo melhorias que correspondam ao sabor da época Você é o designer que pode fazer a diferença. Você entende como isso funciona. Você pode garantir que nossa jornada rumo ao futuro digital seja positiva. Então, à medida que navegamos no cenário digital, vamos lembrar o impacto do nosso design nas vidas, especialmente nas da geração jovem. Vamos priorizar a criação de uma experiência positiva e duradoura que contribua para um futuro Obrigado por se juntar a mim nesta jornada pelo mundo do design Cpmin e do futuro. Até a próxima vez, fique atento, seja ético e continue projetando para um futuro melhor 111. O poder do som: como o áudio molda a psicologia da experiência do usuário (UX): Seja hoje, estamos mergulhando profundamente no mundo muitas vezes antigo do som no design. Sim, você ouviu os sons certos. Não se trata apenas do que você vê, mas também do que você ouve. Então, vamos nos sintonizar com a sinfonia do design UX e explorar o incrível impacto do som em nossa Imagem do mundo sem som pretty do right Well, o som tem sido um companheiro por 1.000 anos, adicionando comunicação como narrativa. Hoje, estamos liberando o potencial do som no design. Pressione-se para uma viagem à dimensão auditiva até vx O design gráfico. Você já percebeu o sutil feedback hepático ao interagir com seu iPhone ou apenas com um telefone Pro Ou um som de namoro que apresenta a Netflix. O som não é apenas um ajudante. É um super-herói no mundo vx. Ele não apenas anuncia sua experiência, mas também define a identidade da marca. Agora vamos explorar como o som se torna o herói doentio na aventura digital Por um momento, feche os olhos e você provavelmente reconhecerá sua marca favorita por seu som único. Do toque reconfortante do Microsoft Windows à renovação da Mercedes Carta Esse som conta uma história e cria uma conexão. É hora de explorar como os sons se tornam as novelas secretas da identidade da marca O som é mais do que apenas um pano de fundo. É um participante ativo na jornada do usuário, seja orientando o usuário pela interface ou fornecendo feedback sobre a ação completa O som é apenas um assistente silencioso que torna o X ou o design memoráveis. Vamos revelar como o som engajou o usuário em um mundo virtual O design é para todos e o lugar sonoro é fundamental, Roni, tornando a experiência digital acessível Desde a descrição em áudio ou netflix para deficientes visuais até o clique sutil de um botão pressionado com sucesso O som é unido a symplas e Vx exclusivos. Vamos explorar o mundo exclusivo do design de som. Pronto para levar seu design Vx para o próximo nível. Entre no design de som UX. Um divisor de águas. Não se trata apenas de funcionalidade, mas de criar uma conexão emocional com o usuário. Descubra a aventura de um design de som inteligente desde o aumento do engajamento até o aprimoramento do reconhecimento da marca Mas onde você encontra o som perfeito para sua sinfonia de design Não tenha medo. Temos uma lista de recursos para testar o jogo de som De efeitos sonoros japoneses isentos de slats a músicas isentas de direitos autorais sobre sons epidêmicos Temos cobertura. Você está pronto para amplificar seu som Ex ou de design gráfico Vamos mergulhar no mundo dos recursos sonoros? Vou adicionar todos os recursos de som nos recursos, bem como no arquivo de recursos. Vá e confira isso. Ao concluirmos nossa jornada sonora pelo design EVx, lembre-se de que um ótimo design não se resume apenas ao que você vê É sobre o que você ouve. Então, vamos ser seu guia para criar uma experiência de usuário memorável, envolvente e exclusiva Até a próxima vez, continue ouvindo, continue projetando e deixe a paisagem sonora da UX mostrar o caminho 112. Figma Final outro skillshare: Nossa, parabéns. Ele é a linha final. Essa jornada foi uma aventura mais tranquila, não é? Foi um longo curso. Mas aqui estamos. E deixe-me dizer que criar este curso também não foi fácil. Mas nós sobrevivemos juntos. Quero dedicar um momento para expressar minha gratidão. Um grande obrigado a todos os meus alunos anteriores e a todos os clientes de coaching Você foi um valioso defensor de campo e a visão desempenhou um papel crucial na formação desse incrível curso Eu não poderia ter feito isso sem você. Agora, vamos criar o amor. Se você achou este curso útil, sejamos honestos. Por que você não o compartilharia com seus colegas, amigos e qualquer outra pessoa em seu círculo que pudesse se beneficiar dele Seu apoio me ajudou a crescer e continuar fazendo o que eu amo, criando conteúdo valioso para pessoas incríveis como você. Ah, e não se esqueça de se conectar comigo nas redes sociais. Você provavelmente já tem todos os links em seus arquivos de classe. Mas caso você tenha perdido, eles estão aqui. Vamos nos manter conectados e manter a jornada de aprendizado em andamento. E, ei, você deu uma olhada no meu canal de mergulho? É um verdadeiro tesouro de conteúdo adicional desde dicas rápidas até trilhas profundas. Inscreva-se agora e nunca perca as últimas atualizações e insights Agora, vamos falar sobre o cenário cada vez mais gritante da indústria O mundo do design está mudando constantemente, e é isso que o torna tão empolgante. Abrace a jornada, mesmo que pareça um pouco duvidosa Lembre-se de que a síndrome do impostor é comum, mas você está mais do que qualificado para se chamar de designer de UX Nenhuma qualificação oficial é necessária. E adivinha? Sua jornada de aprendizado não precisa terminar aqui. Se você está ansioso para se aprofundar em design gráfico, mídia social, IA ou vdating, eu tenho o que você precisa Confira meus outros cursos no Canva, Catbi ou Audible Os links estão na seção de recursos, então não deixe de explorá-los. E se você tiver alguma dúvida, ou apenas quiser bater um papo, entre em contato comigo nas redes sociais. Você já tem todas as minhas alças, então não seja tímido. Estou aqui para apoiá-lo em cada etapa do caminho. Bem, pessoal, isso é um rap. Espero que você goste deste curso tanto quanto eu gostei de criá-lo. Foi um prazer compartilhar esse conhecimento com você, e mal posso esperar para vê-lo em outro curso em breve. Até lá, continue projetando, continue criando e, o mais importante, continue sendo incrível. Então, adeus por enquanto.