Sistema de design em Figma a partir do zero - classe mestre UI UX

1. O que você vai aprender neste curso de Sistema de Design: Bem-vindo à minha classe sobre sistemas de design usando Figma. Nesta aula, vamos aprender o que são sistemas de design, como criamos nosso sistema de design e como convertemos isso ou projetamos isso em Figma. E podemos reutilizar isso em nossos projetos com desenvolvedores, com nossos colegas de equipe e diferentes designers. Antes de nos aprofundarmos nos sistemas de design, vamos aprender um pouco mais sobre quais nossos princípios de design. Qual é a declaração de propósito de seus sistemas de design? Quais são componentes diferentes? Quais são as qualidades deles? Como um componente deve ser? O que são tokens, regras, temas? Então, muitas coisas que vamos aprender antes de nos aprofundarmos em realmente projetar nosso sistema de design. Então fique atento comigo. Vamos trabalhar em grades. Vamos trabalhar em ícones, ilustrações. Vamos trabalhar em diferentes sistemas de grade, colocar muitas coisas, incluindo nossos botões. Em seguida, vamos criar componentes mais simples que vamos criar. Componentes maiores são chamados de moléculas. Se você sabe sobre o sistema de design atômico. Isso é tudo o que vamos cobrir nesta classe. Vamos criar um tema totalmente escuro, muitas vezes aplicativo de aprendizado de aplicativos usando Figma. E vamos construir seu sistema de design. E vou compartilhar com vocês minhas técnicas, como vamos usar layouts automáticos e como vamos usar componentes diferentes e como podemos facilmente trocar diferentes componentes uns com os outros ou nós pode manipulá-los facilmente. Espero que você aprenda muito comigo. Vamos aprender juntos e começar essa classe de sistema de design comigo. Encontrarei você em breve na aula. Até lá, tome cuidado. 2. Introdução ao sistema de design, benefícios e saídas do sistema de design: Neste vídeo, vamos falar sobre sistemas de design. Agora, as primeiras perguntas que surgem mesmo em nossas mentes é o que é realmente projetado sistema. Então pense em tudo o que se maquiar em qualquer produto. Você tem, qualquer aplicativo móvel ou qualquer empresa, por exemplo, digamos que o Google. Seja qual for o layout que eles usam, cores, ícones , topografia, tom e voz. Quais são seus estilos, diferentes estilos de designs. Então temos convenções de codificação. Então, tudo isso realmente compõe um sistema de design. Tenha em mente que os sistemas de design farão parte de todas essas coisas. Seu tom e estilo, sua gramática, sua personalidade, produto, personalidade, que será o seu estilo ou voz do seu produto. E então temos tipografia, cores, animações diferentes, até mesmo as micro animações, elas também fazem parte de seus sistemas de design. Como o botão será clicado quando, o que vai acontecer quando você clicar no botão? Ou o que vai, que animação vai tocar lá por um longo tempo. Então, tudo isso é, na verdade, parte do seu sistema de design. Vamos estudar alguns dos pilares do sistema de design. Muitos de vocês, eles entenderam mal os sistemas de design. Muitos de nós pensam que apenas a biblioteca de componentes ou a biblioteca de padrões, ou apenas o guia de estilo é o seu sistema de design, mas não é. Então, vamos analisar cinco pilares do sistema de design e, em seguida, vamos analisar os diferentes benefícios dos sistemas de design. Quais serão as entradas, desculpe, as saídas dos sistemas de design. Vamos começar e ver quais são essas coisas. Primeiro, vamos olhar para os pilares do sistema de design. E essas são, na verdade, diretrizes de marca que serão seu primeiro passo. As diretrizes de marca são desenvolvidas principalmente quando você está projetando os logotipos ou a imagem da marca. Inclui tom e voz, personalidade da sua marca. Então temos, na verdade, o que diz é que é sua presença geral de sua marca ou produto. Por exemplo, se eu sou uma pessoa e eu sair no mercado, todo o meu curativo, meu tom, meu estilo de falar, meu estilo de andar, tudo isso vai fazer parte da minha personalidade. Portanto, essas são as coisas que serão definidas nas diretrizes da sua marca. Então temos guia de estilo. Guias de estilo conterão toda a sua tipografia, seus ícones ou ilustrações. Todas essas coisas vão estar no guia de estilo. Principalmente estes são design de nível atômico. Você quer dizer que o básico e os elementos do seu design, os menores elementos do seu design, grades, grades também fazem parte dele. Então temos linguagem visual. A linguagem visual é, na verdade , toda a sensação do seu produto. Se eu usar apenas uma palavra, será a sensação do seu produto, como seu produto realmente se sente. Em seguida, temos uma biblioteca CSS, embora esteja no final do seu processo, mas é uma parte muito importante. biblioteca Css ou a estrutura CSS basicamente é o estilo de codificação ou a biblioteca de codificação que você está usando. Sempre que seus programadores estão usando uma biblioteca específica, você precisa, como designer, você precisa seguir essas regras ou você tem que adotá-las em seus próprios projetos. Por exemplo, se você olhar para o Bootstrap, todos os aplicativos ou sites criados pelo Bootstrap, eles parecem quase iguais. Da mesma forma, temos o Foundation. Recentemente, temos CSS de vento de cauda. Eu realmente amo esse designer. Comprei alguns dos cursos desse desenvolvedor. Na verdade, ele é um designer mais desenvolvedor pesado como desenvolvedor primeiro e depois foi para o design. Aprendi design com isso com ele também. Então temos fundação, bootstrap, Bulmer, o CSS e outras, muitas outras plataformas CSS. Ou você também pode chamá-los de estruturas front-end. Na verdade, eles ajudarão você a definir toda a sua interface em formato HTML e CSS. A última é a biblioteca de padrões. Na verdade, uma biblioteca melhor é , na verdade, a segunda última. Mas agora, o que vier à mente, vou dizer que o quinto é a biblioteca de padrões, que será seus componentes, por exemplo, seus cartões, seus repetíveis. Por exemplo, você tem blogposts. Existem parágrafos mais alguns botões e alguns títulos. Então, você vai combiná-los e criar uma biblioteca de componentes. Agora vamos falar sobre os benefícios dos sistemas de design. Muitas pessoas, principalmente empresas maiores, se você for um novo designer, elas vão resistir que não precisamos de um sistema de design. E como você vai convencê-los. Os sistemas de design realmente eliminarão todas as inconsistências em suas interpretações. Por exemplo, eu criei algo e isso vai ser, por exemplo, eu criei um botão e O estado do mouse do botão terá animação da sombra. Essa é minha, você pode dizer, percepção desse design enquanto eu estava projetando. Agora, quando esse design vai para um desenvolvedor, ele pode pensar que nem percebe essa mudança leve na sombra. Portanto, esses problemas vão se reunir de vez em quando e dentro um ano ou dois anos haverá muitas inconsistências e isso é chamado de profundidade de design da inconsistências e isso é interface do usuário. Essa profundidade continuará coletando. E o sistema de design na verdade não pode reduzir essa profundidade de projeto e também os problemas de interpretação. Meu desenvolvedor pode estar pensando que é outra coisa. Talvez eu esteja pensando que é outra coisa. Essas interpretações serão reduzidas. Então, temos uma única fonte de verdade para desenvolvedores e designers. Os desenvolvedores sabem que esse é o bloco que eles vão usar. Eles vão puxar esse bloco de código CSS e usarão a maior parte do sistema de design. Eles também vêm com exemplos codificados desses componentes. Isso é outra coisa que muitos, muitos designers que eles não entendem. Em seguida, temos consistência, uniformidade, abordagem de design coesa em todos os nossos diferentes produtos. A maioria das coisas como você pode ver que você está usando o Facebook, Google, todos os outros aplicativos, empresas maiores, eles estão em várias plataformas ou mesmo se o seu aplicativo é apenas uma munição do site Anna, e um aplicativo móvel, apenas para o aplicativo do produto ou dois produtos a facetados do produto são duas fases do mesmo produto. Ainda assim você pode, esse sistema de design pode ajudá-lo muito. Então, se você tiver duas fases, você pode mostrar a mesma personalidade em ambas as direções do seu. Então, por exemplo, se eu sou uma pessoa e estou usando uma camiseta e um pijama ou talvez alguns tênis. E quando viro o outro lado, estou usando um smoking. Isso é muito irritante para os usuários. Por exemplo, o espaçamento dos botões de design do site é diferente e no aplicativo móvel é diferente. Isso criará muitos problemas. Então, coesão, consistência entre suas diferentes plataformas. Por exemplo, um aplicativo semelhante tem a mesma aparência no iOS e quase o mesmo em telefones Android. Então, isso basicamente pode ser alcançado com sistemas de design. Então, temos mais uma coisa é que desenvolvedores e designers, eles não precisam lutar novo e de novo por pequenos problemas de design. Por exemplo, quero essa laranja e o desenvolvedor diz, quero esse laranja, esse tom de laranja. Portanto, esse é um problema muito pequeno. Depois de nos projetar o sistema de design, esses problemas não surgirão. Você tem que resolver os problemas do usuário real ou os problemas maiores que você precisa olhar para o quadro geral. Em vez de resolver pequenas mudanças e pequenos problemas. Isso é tudo sobre os benefícios do sistema de design. E vamos ver quais serão as saídas do sistema de design. Muitos de nós, não sabemos qual será a saída. A saída é, na verdade, uma documentação clara e atualizada, onde tudo é explicado. Em seguida, temos diretrizes, diretrizes de design, regras , estilos, tudo o que é fácil de entender para os desenvolvedores e para os designers. O segundo é documentar o raciocínio por que realmente escolhemos esse design ou essa animação. Isso é, na verdade, você pode justificar facilmente. Por exemplo, depois de seis meses, seu CEO ou seu gerente liga você e diz por que essa animação está acontecendo assim. Você pode mostrar a eles que esse foi o motivo por trás disso. Os usuários realmente adoraram. Talvez outra coisa. Em seguida, temos ferramentas e processos que ajudam você a implementar o sistema de design diariamente. Isso é, na verdade, por exemplo, se você escolheu uma Figma ou escolheu uma estrutura CSS específica ou específica, você pode dizer convenções de nomenclatura. Essas são, na verdade, terminologias diferentes que podem ter um impacto muito grande sobre quando você vai colaborar com seus designers e desenvolvedores. Da mesma forma, podemos, em diferentes processos, como por exemplo, nós, podemos, por exemplo, se eu quiser alterar todo o tema do meu aplicativo, por exemplo, quero uma atualização ou meu CEO me liga e diz que precisamos atualizar nosso sistema de design para um visual mais moderno ou talvez outra coisa. Podemos, podemos implementar isso de muitas maneiras diferentes. Podemos implementar isso em apenas um produto e ver qual é a resposta dos usuários. Existem muitos processos que você pode desenvolver para implementar esse sistema de design. E você pode dizer aos seus desenvolvedores ou aos gerentes de produto que é assim que vamos implementar esse sistema de design, essa terminologia de design ou algo novo. Se você está trazendo algo novo para o seu sistema de design, nós vamos tê-lo assim. Esse será o nosso processo. Essas são todas as coisas sobre o sistema de design. Depois, aprendemos pilares do sistema de design ou as partes principais do sistema de design. Quais são os benefícios do sistema de design? Espero que você tenha gostado desta lição. Até lá, vamos aprender muito sobre sistemas de design. Vamos construir nosso primeiro sistema de design nesta classe. E vou vê-lo em breve em outra lição. Até lá, tome cuidado. Adeus. 3. Declaração de propósito em sistemas de design: Sempre que começamos nosso sistema de design ou construindo como um sistema de design, a primeira coisa que temos, precisamos fazer é construir uma declaração de propósito do nosso sistema de design. Agora, para a declaração de propósito, vamos fazer apenas três ou quatro perguntas simples a todas as nossas partes interessadas. Designers, desenvolvedores, gerentes de equipe de produtos, CEOs ou gerente de produto ou o que quer que seja, a pessoa que está investida nesse aplicativo. Então as perguntas serão, a primeira pergunta será qual é o objetivo deste produto? Então temos, por que é importante? Por que você está criando esse sistema de design? E então o terceiro é, como isso nos ajudará? E o quarto é, para quem é? Poderia haver respostas diferentes para equipes diferentes ou aplicativos diferentes para o mesmo, mesmo essas perguntas. As respostas podem ser que nosso sistema de design nos ajudará a liberar nosso tempo para nossos designers e desenvolvedores de produtos. E eles podem se concentrar em grandes problemas pelos usuários ou nos principais problemas enfrentados e os usuários estão enfrentando. O segundo é por que é importante? Pode haver muitas respostas para este, mas um exemplo está aqui. Se não vamos inovar, nosso produto será comido por nossos concorrentes. Ou pode ser que nossos usuários possam ser confundidos com a inconsistência em nosso design de produto. Terceiro é como isso nos ajudará? Então, como isso nos ajudará? Na verdade, isso vai economizar com o tempo. Não vamos fazer o mesmo. Você pode dizer discussões sobre a cor do botão ou o tamanho do botão. Isso economizará muito tempo e dinheiro. Então, vamos ter padrões repetíveis. Podemos reutilizá-los de novo e de novo. Isso economizará muito tempo e muitas de cabeça para nossos desenvolvedores e designers. Agora o quarto é para quem é? Normalmente, é para toda a nossa equipe de produtos. E eles vão usá-lo, excluindo o, eu acho que o CEO ou o dono dessa empresa, principalmente os designers, desenvolvedores, até mesmo os gerentes de produtos. Talvez eles também precisem usá-los de vez em quando quando estão desenvolvendo alguns wireframes ou alguns modelos ou algo assim. Portanto, essas são as perguntas que você fará às partes interessadas, aos desenvolvedores ou aos designers antes começar a criar um sistema de design, certifique-se de criar essas perguntas. Você tem pelo menos a direção de que este será o nosso sistema de design. Este é o propósito sobre o sistema de design. Por que isso é importante? Como isso vai nos ajudar e para quem serve? Então, vou compartilhar com vocês todos os slides. Há dois exemplos aqui, então certifique-se de baixar esses arquivos PDF e todos nós junto com este curso, você pode revisá-los e sempre que eu postar isso, você deve enviar seu exercício, você pode enviá-lo facilmente. Isso é tudo sobre declaração de propósito do sistema de design. Espero que você tenha gostado disso, aprendeu algo novo, nos encontraremos em outra lição. Vamos passar para a nova lição. Cuide-se. Adeus. 4. Princípios de design e como criar um design: Neste vídeo, vamos aprender sobre os princípios de design. Quais são seus dois tipos principais e como realizar uma oficina de princípios de design. Como você vai reunir todas as suas equipes e quais perguntas, e como vamos criar esses princípios, princípios de design. Então, vamos começar. Primeiro, vamos apresentar o que é realmente princípios de design. Princípios de design são basicamente diretrizes que ajudarão você ao longo de todo o processo de design do início ao fim, onde você tem onde a direção do projeto será. Então, por quê? Porque podemos ter experiência mais alinhada ou experiência semelhante em diferentes produtos ou plataformas. Agora, isso ficará claro quando vamos ver alguns dos exemplos. E isso é delicioso e simples. Essas são apenas palavras, mas elas importam muito. Esses são chamados de princípios universais. Delightful se aplicará a todo o conjunto de produtos. Mas se você quiser chegar a um produto específico, princípio de design específico, por exemplo, como o princípio de design da Intercom, eles têm algo como transações de design, conjunto de Conversas de Design que então transações. Então, na verdade, significa que as transações são muito robóticas se você for ou visitar qualquer banco ou qualquer um desse tipo de instituto, as pessoas serão muito formais. Eles vão exigir muitos documentos, documentação e coisas assim. Eles não são calorosos e muito acolhedores, são muito amigáveis. Conversas de design em vez transações é um princípio de design, estático , muito específico, que teremos uma sensação muito acolhedora ou muito calorosa do nosso produto. Agora, por que precisamos desses princípios de design? Este é, na verdade , todo o seu design , seu comportamento de produto , seu tom e voz, tudo realmente será parte de seus princípios de design. Agora, a principal razão por trás disso é que vamos usar esses princípios de design para tomar melhores decisões de design. Isso é, na verdade, você pode dizer, você pode dizer a espada do princípio do design. Então, por que precisamos disso? Nós, nós somos, por exemplo, temos dois conjuntos de botões ou estilos e temos que decidir sobre um deles ou tema, um deles temos que múltiplos temas e um deles, reflete nosso design como simplicidade deliciosa. E o outro é um pouco, você pode dizer formal ou você pode dizer um pouco aborrecido em seu tema. Então, qual deles vamos decidir, vamos para tema mais agradável e simples ou botão simples em vez do complexo ou do volume formal. Esses princípios de design orientarão nossas decisões de design. Vamos falar sobre como vamos realizar uma oficina de princípios de design e como vamos criar esses princípios de design. Agora, o primeiro passo é que vamos reunir todos os membros da nossa equipe. Isso inclui desenvolvedores, designers, redatores, especialistas em SEO. Em seguida, temos gerentes de produto ou qualquer pessoa que esteja investida no produto vinculado a este produto. Em segundo lugar, vamos obter uma hora todos os materiais, por exemplo, nota post-it ou azedo Sharpies, marcadores ou o que você precisar. Em seguida, vamos dar esses documentos aos membros da nossa equipe e pedir-lhes que escrevam pelo menos cinco princípios. Vamos reunir todos esses princípios e vamos publicá-los em um quadro e vamos reorganizá-los e fazer um tema convergir. E o tema é o próximo passo. Assim que o tema for formado, vamos combiná-los, votando-os e classificando-os que esses são os melhores princípios. Na verdade, esses são os princípios que refletem nosso produto. Isso parece que este é o nosso produto. Então, na verdade, trata-se de sentir em vez de soluções de design concreto. Isso é, no entanto, tom será o que será a personalidade, você pode dizer, de nossos produtos. Assim, podemos classificá-los facilmente e depois votá-los e vamos selecionar cinco deles. Mais de cinco pessoas vão esquecê-las. Portanto, certifique-se de que eles sejam menos de cinco princípios de design para o seu produto que fará parte do seu sistema de design. Espero que você tenha aprendido muito e tenha gostado desta lição sobre princípios de design, como eles ajudam a tomar nossas decisões de design e como eles farão parte do nosso sistema de design. Então, vamos passar para a próxima lição e aprender algo novo. Adeus. 5. 7 passos para criar seu sistema de design: Neste vídeo, vamos discutir algumas das etapas, como vamos construir um sistema de design. Mas antes disso, antes de avançarmos para isso, vamos olhar para coisas diferentes que já temos. Então, sempre que vamos começar a construir nosso sistema de design, vamos começar com o que já temos. Portanto, existem basicamente dois ou três grupos de partes interessadas que estarão presentes, para investigar o que já temos e quais problemas já temos. Então comece com seus CEOs, seus gerentes de produto, seu gerente de marketing e também com sua equipe de desenvolvedores e sua equipe de design. Então pergunte a todos eles o que eles já têm, o que eles precisam, quais são seus problemas? Vamos perguntar a essas partes interessadas o que eles já têm. Então, o que eles já têm é chamado de inventário de UI. Você tem que construir isso. Vamos ver algumas das etapas no próximo slide. Então, antes disso, temos que olhar para todas as diferentes plataformas ou superfícies, basicamente, superfícies que farão parte do nosso sistema de design. Por exemplo, você pode precisar modelos de e-mail para marketing que você pode precisar e postagens de blog, modelos ou designs de blogs para marketing. Você precisa entender que seu sistema de design não será apenas seu aplicativo web ou móvel, mas também tocará em todas as superfícies diferentes. Por exemplo, marketing, por exemplo, adquirir novos clientes de anúncios do Facebook. Portanto, haverá muitas superfícies diferentes, você pode dizer, conectadas ao seu sistema de design. Então, vamos passar para o próximo e veremos todas as etapas. Agora vamos analisar sete etapas diferentes que precisamos seguir para criar nosso sistema de design. Novamente, como já disse, vamos começar com o que já temos, então vamos fazer um inventário do que já temos hoje. Vamos fazer nosso inventário de interface do usuário. Há uma lição sobre o inventário dos Emirados Árabes Unidos. Vou te mostrar como fazer isso. O próximo passo é colocar todos a bordo com seu sistema de design, seu desenvolvedor, em sua equipe de design, seus CEOs ou gerentes ou outras partes interessadas, você precisa colocá-los a bordo que realmente precisamos para desenvolver nosso sistema de design. Terceiro são estabelecidos os componentes da linha de base. Portanto, os componentes de linha de base são basicamente os principais componentes que serão os blocos de construção de seu sistema a, seu aplicativo móvel ou seu site. Sem isso, você não pode construir nada. Esses são os componentes da linha de base. Vamos construir tudo isso. Por exemplo, seus botões, suspensos, tudo o que as coisas se formam. Então temos tarugo, cédulas, topografia, escalas, tipografia e cores é eu acho, o principal componente principal de agrupamento do seu sistema de design que definirá o idioma da sua marca, seu esboço de design de design. Então, ele vai decidir onde seu design está realmente indo, em que direção. O quinto é Strand, certo? Eles padronizam esses produtos em todos os seus produtos. Não tente exagerar em seu sistema de design. No começo, você tem que criar coisas simples. Você não precisa criar um monte de sistema de design complexo são um sistema de design muito grande. Primeiro você tem que padronizar portas, todas as cores, paletas de cores que essas topografia, tipos de letra em todas as suas plataformas, seu site de laboratório móvel, eles devem parecer quase harmoniosos, Acho que não é idêntico, mas harmonioso. E eles devem parecer que fazem parte do mesmo sistema, um produto ou uma empresa. Então temos que integrar o sistema de design ao nosso processo. Temos que construir um processo de como vamos criar nosso sistema de design sobre como vamos implementar isso. Como nossos projetos da figma ou do nosso sistema de design em nossa ferramenta de design serão processados para os desenvolvedores em qual formato. Em vez disso, vamos usar a linguagem JSON de acordo com a linguagem ou CSS ou HTML, seja qual for. Você precisa criar um processo. Então o último é manter seu sistema de design. Temos que mantê-lo. Porque o sistema de design estará sempre evoluindo. Você não pode ter um sistema de design estático por cinco anos. Você precisa criar novos componentes. Talvez você não precise componente ou de um botão que você precise criar. Talvez depois de um ou dois anos, você tenha que criar um novo tema para todo o seu sistema de design? Talvez você precise de um tema escuro e iluminação para o seu sistema de design. Haverá mudanças que você terá que manter. Portanto, haverá uma equipe de designers ou talvez um desenvolvedor que irá ajudá-lo a construir, manter ou manter seu sistema de design. Isso é tudo, essas são todas as etapas da construção de um sistema de design. Sete etapas. Vamos discutir um pouco mais nas próximas lições. E então vamos para Figma e começaremos nosso sistema básico de design na Figma. Até lá, pegue, vamos vê-lo e encontrá-lo em breve na próxima lição. Até lá, tome cuidado. Tchau. 6. Como fazer auditoria de inventário de UI?: Neste vídeo, vamos aprender a auditar seu inventário de design de interface do usuário ou o que você já tem. Você tem que começar com a virtude já tem um MOU ou construindo um sistema de design. Existem algumas etapas. Não vou ser muito elaborado sobre isso ou torná-lo uma palestra muito longa. Este será um pequeno vídeo de dois ou três minutos, e veremos o que, como auditar nosso inventário de UA. Então, o primeiro passo é que temos que tirar as capturas de tela de todas as diferentes telas. Agora, o que estamos procurando, estamos procurando por inconsistências. Tenha isso em mente. Estamos procurando inconsistências em cores, nos tamanhos de diáfise e Typhoeus, tamanhos de fonte. Então estamos procurando inconsistências em estilos, talvez seus gradientes. Você tem que tomar essas, todas essas inconsistências. Faça as capturas de tela, você precisa olhar para todas as telas que já projetamos ou construímos. Se sua empresa ou seu produto for novo, você não construiu nada. Isso não é o que você precisa. Isso é para se a empresa já tiver construído algo e você tiver que auditar o inventário da interface do usuário. Portanto, tire essas capturas de tela de todas essas inconsistências, então vamos agrupá-las em diferentes categorias, como cabeçalho de navegação, menu suspenso, cartões ou quaisquer que sejam essas categorias diferentes. Então também podemos subcategorizá-los Estados do botão Curtir. Pode haver diferenças nos estados dos botões. E então temos que mostrar essas inconsistências para CEO, sua equipe de desenvolvedores ou sua equipe de design que essas são as inconsistências em seus diferentes produtos, em suas diferentes plataformas. E isso é tudo. Temos que trabalhar com essas inconsistências. Temos que limitá-los. Temos que unificá-los em um sistema de design. Vou compartilhar com vocês um artigo escrito aqui, temos o artigo que acho que está escrito por não tenho certeza. Brad Frost. Brad Foster é um cara famoso. Isso é sobre essas moléculas, átomos e todo esse material de sistemas de design. Você pode ver aqui está o exemplo do site do meu banco. E aqui você pode ver a inconsistência do ANS em designs de botões. Há como eu acho que eles têm dez tipos diferentes de botão. Existem estilos diferentes, são tamanhos diferentes. Existem várias inconsistências em todos esses botões. Então você pode ver que essas são apenas as capturas de tela. Ele tomou. Outro aqui. Você pode ver apenas o botão Saiba mais ou Começar com esta seta. Tem dez variações diferentes e isso é realmente frustrante. Aqui você pode ver para cada C, você pode ver aqui eles têm todas as inconsistências diferentes que podem insistir no botão. Você pode ver os tamanhos, o, até mesmo os gradientes, eles são diferentes. Isso é cinza total, este é um gradiente acinzentado e isso é um pouco diferente do que temos dois diferentes, você pode ver a inscrição e o sugerido que eles têm dois gradientes diferentes. Um é um pouco mais escuro e outro é um pouco mais leve. Você pode ver o checkout com o PayPal ou adicionar ao carrinho. Eles são eu acho que significam ações diferentes, mas eles têm a mesma cor. Você pode ver que é assim que você vai descobrir inconsistências diferentes e você precisa denunciá-las. Você precisa começar com essas auditorias de interface do usuário. Então você precisa criar um arquivo separado no Figma ou qualquer software que você esteja usando. Faça essas capturas de tela e agrupe-as em diferentes categorias e apresente-as à sua gerência. Isso é tudo sobre como auditar seu inventário de interface do usuário. Espero que você tenha gostado desta lição e tenha conseguido algo, algum bom conhecimento dela. Veremos você em breve. Vejo você em breve na próxima lição. Até lá, tome cuidado. Tchau. 7. Quais são componentes do sistema de design: Este vídeo é sobre componentes. São os, o quê, nossos componentes de grade ou como construir um bom componente, e como classificá-los, como categorizá-los e o que deve estar presente em um componente que é, ele dá o maior valor. Vamos começar e ver como vamos nomeá-los, como vamos categorizá-los. O que deve estar presente no componente? A primeira coisa é que existem dois tipos principais de componentes. Como vamos construir um componente. Tente ver qual é a coisa mais frequente que Lee usou ou elemento de design em seu design. Por exemplo, botões, eles serão usados de novo e de novo, impostos que serão usados de novo e de novo. Cabeçalhos, eles serão usados de novo e de novo. Todos esses são, podem ser componentes. Poderia haver componentes menores, pode haver componentes compostos principais são componentes maiores que são chamados de moléculas. Então, primeiro vamos analisar os componentes de alta frequência, os componentes que serão usados de novo e de novo. Em segundo lugar, vamos ver qual componente é que mostrará a essência da nossa marca ou show. Você pode ver sempre que um cliente, ele olha para esse componente, eles vão adivinhar que esse é o produto do Google. Este é o Airbnb. Temos que, isso, esses componentes, eles têm componentes de alto valor porque eles vão mostrar sua marca. Eles vão contar a história da sua marca. Então você também precisa categorizá-los. Você precisa criar componentes de alto valor e alta frequência também. O que são diferentes? Você pode dizer diferentes propriedades de um bom componente. Então, primeiro é proposital. Sempre que você estiver criando um componente, ele deve resolver nosso problema de design. Se não estiver resolvendo um problema de design , acho que não é um componente. Em segundo lugar, isso é reutilizável? Reutilizável não significa que temos que usar o mesmo botão de novo e de novo. Reutilizável significa que podemos mudar facilmente sua cor e forma. Não é bom para um único caso de uso, ou não é usado apenas em formulários. Você pode usá-los em qualquer lugar. Terceiro é que ele deve ser flexível. A flexibilidade vem, você pode mudar sua cor, você pode alterar seu tamanho, você pode mudar seu estilo. Então, essas são três coisas que o tornarão flexível, tamanho, cor e estilo. Talvez você possa descrever o mesmo botão e usá-lo em outro lugar. Então, isto é, vou mostrar alguns exemplos aqui. Vamos ver, vamos ver um exemplo. Aqui. Você pode ver, deixe-me mostrar-lhe. Você pode ver aqui, se você olhar para esta página do Airbnb, este componente maior, este componente de cabeçalho superior onde temos Mostrar todas as fotos que é muito específico do Airbnb. Sempre que você mostrar isso, apenas este produto inteiro, todo esse componente, o componente maior, em qualquer lugar alguém vai adivinhar que este é o site do Airbnb. Então, novamente, este componente aqui, este 1 $13 por noite, todo esse bloco de cartão de preços de cartão ou cartão check-out está realmente mostrando a essência de toda essa marca, esta empresa de buraco ou firme. Um. Isso vai ser muito, muito exclusivo para este produto. Portanto, esses são componentes de alto valor. Vamos à reutilização da flexibilidade de um componente. Você pode ver aqui, aqui temos verificar a disponibilidade, um botão muito bem projetado. E se esfriarmos aqui, você pode ver que este é novamente um botão que mostra todas as 11 comodidades. E é a mesma forma, a mesma altura, mesmas curvas das bordas, arredondamento das bordas, cantos e o mesmo estilo, mesmo tamanho, tudo, até o tamanho do texto é o mesmo, apenas as cores são diferentes e há softwares diferentes de estilo, linha de borda fina. Isso é chamado de flexibilidade de um componente. Portanto, esse é realmente um mesmo componente, mas com estilo diferente. Então, isso é o que você deve ter em um componente, reusabilidade, flexibilidade na solução de um problema. Por exemplo, você pode ver aqui que este botão está realmente mostrando todo esse lugar vai oferecer. Na verdade, está escondendo alguns dos recursos. Então, se você clicar nele e isso vai aparecer. Em todas as 11 comodidades diferentes aqui. Semelhante, mas este botão, isso está realmente resolvendo um problema que é muito único, que é realmente um recurso exclusivo do produto que é realmente verificar a disponibilidade. Na verdade, isso vai reservar ou mostrar a disponibilidade deste lugar. Da mesma forma, você pode ver esse botão, isso é totalmente diferente. Tem tamanho menor, tem ícone, tem menos espaçamento em torno dele porque está servindo a um propósito diferente. Ao todo. Vai mostrar todas as fotos. Estes são estilos de botões diferentes e estes são eles têm propósitos diferentes. Ok, então é isso. Vamos passar para o próximo slide. A próxima pergunta é como vamos agrupá-los? Como vamos nomear esses componentes? Esta é uma pergunta muito grande. A primeira coisa é sempre categorizá-los com base no propósito. Então, se você tiver títulos ou textos, eles estarão sentados em uma única página, página de guia de estilo, onde você vai estilizar todos os textos. Então temos um propósito como, por exemplo, temos uma página de checkout. Eles são, nós temos uma página de propriedade do Airbnb, por exemplo, digamos que temos página de propriedade. Vamos nos arrepender. Vamos agrupar todos esses cartões ou todos os componentes relacionados que vão ficar em cima estão relacionados a essa página específica ou a esse recurso específico. Você vai agrupá-los assim. Portanto, isso ajudará você a criar componentes maiores ou agrupar maiores, como temos cartões. Não podemos agendar esses cartões em páginas diferentes. Por exemplo, todos os cartões relacionados à página do produto, temos que mantê-los em uma única página. Da próxima vez, sempre que um novo designer entrou, ele pode facilmente ver que isso é, esses são todos os componentes relacionados à nossa página do produto. É assim que você vai agrupar seus componentes. Em seguida, deixe-me mostrar algumas das convenções de nomenclatura. Por exemplo, títulos. Podemos ter mega cabeçalho H1, H2, H3. Também podemos nomeá-los relacionados ao que os codificadores realmente usam. Nosso blog familiarizado com o traço de cabeçalho. Você pode ver que este blog de traço de ponto de cabeçalho está muito relacionado ao propósito desse título, em vez de seu tamanho. Estou categorizando ou usando o nome com base no propósito desse título, que ele vai ser o cabeçalho do blog, postagem do blog. Então temos cartões, cartões empréstimo, cartão de inscrição, rodapé, grande. Estes são carros diferentes que serão pagos específicos ou você pode dizer nome específico que esse nome mostra o propósito. O terceiro é Button. Nunca nomeie seus botões como botão azul, botão vermelho, botão verde. Isso não mostra nem conta a história de um propósito. Você precisa nomeá-los botões de ação primários. Botões de ação secundária. Botões suspensos talvez você também possa chamá-los botões de checkout ou botão de página de checkout, algo assim. Isso mostrará o propósito desse botão. Então deixe-me mostrar o exemplo. Deixe-me mostrar-lhe novamente a mesma página aqui, Airbnb que você pode ver aqui, se você olhar para este botão vermelho rosado, é realmente o botão de ação principal aqui. Portanto, é o botão principal aqui nesta página. Se você olhar para todos os outros botões, eles, eles não mostram muito de um bop. Bop significa que eles não são muito visíveis, ou são um pouco moderados, ou eles foram limitados em seu estilo. E você pode dizer saturação. Você pode ver que este é um botão cinza, branco e cinza novamente aqui. Se olharmos aqui, este é novamente um botão branco acinzentado. Ele não tem cores. Então, se entrarmos em contato com o host novamente. Botão que é maçante e cinza misturado com, quase misturado com o fundo. Mas você pode ver aqui, se me deixarmos derrubá-lo, você pode ver que a disponibilidade do cheque ainda está no topo e isso mostra que é uma ação principal, mas você tem que nomeá-los que este é um botão de ação principal. E você pode ver aqui esse estilo é, na verdade nosso botão de ação secundária ou botão de ação terciária. Então, esta é a hierarquia e o propósito incorporados ao seu sistema de design. Espero que você tenha gostado desta lição e aprendido algo novo. Encontrarei você em breve na próxima lição. Até lá, tome cuidado e adeus. 8. Como funciona a hierarquia dos componentes em sistemas de design: Neste vídeo, vou falar sobre diferentes níveis ou hierarquia de componentes. Hierarquia não significa que quais componentes serão mais importantes. É sobre o que são diferentes classes de componentes do básico ao avançado. O primeiro é, na verdade seus componentes básicos ou estacionários que serão seus botões formam seus campos de entrada que são, na verdade, você também é seus ícones. Eles vão estar no nível básico ou básico. Em seguida, temos componentes compostos. Esses são os componentes que serão componentes um pouco maiores, mas serão feitos combinando dois ou três componentes. Por exemplo, temos um cabeçalho na navegação que combinará links diferentes e talvez um botão e um logotipo. Este é um componente composto. Então temos contêineres. Os contêineres são, na verdade, você é, por exemplo, uma seção, por exemplo, eu tenho um contêiner de cartões de notícias. Então, será um contêiner, terá 1234 notícias diferentes. Vou mostrar os exemplos. Não, não se preocupe agora. Então, temos layout. O último é o layout. Temos que mostrar aos desenvolvedores que são outros que você vai colocar todos esses contêineres em uma página. Esta será a última parte. Certifique-se de que, sempre que você criar um componente, você tem que dizer seu propósito, o que ele está resolvendo e qual foi o motivo por trás dele. Você tem um documento que também. Deixe-me mostrar alguns dos exemplos. E aqui temos o New York Times. Então você pode ver no topo que temos esta assinatura agora. Na verdade, este é um composto, um componente ou é um componente grande e tem um botão, texto e logotipos aqui. Se descermos, você pode ver aqui, este é o primeiro. Este é novamente um componente composto. Ou você pode ver nosso contêiner, talvez um contêiner porque é um cabeçalho e tem algum espaço. Muitos estilos são como essa navegação, na verdade, a navegação é componente composto. E então temos dois botões. Então temos essa temperatura, data e tudo aqui. Portanto, na verdade, é componente, componente composto e também faz parte do contêiner de layout. Na verdade, é um contêiner. Então, este é, na verdade, nosso cabeçalho ou masthead. Então você pode ver, à esquerda, temos grandes notícias em destaque que são realmente um componente muito específico que é específico para essa marca ou para este New York Times. E você pode ver que esse corante teme o estilo. Este pequeno texto, ótimo x. já mostra que esta é uma notícia do New York Times. À direita, você pode ver novamente, temos uma notícia de recurso à direita, e é um componente totalmente diferente. À direita, temos um contêiner separado que contém todas as notícias diferentes. À esquerda, temos um contêiner que é realmente como 60 ou 60%, 70% da largura e apenas contendo notícias diferentes no layout de cima para baixo. Na verdade, isso ajudará a construir o layout. O layout será que temos um nome de recurso está aqui. Então temos um pequeno componente, pequenas notícias ao vivo, algo aqui. Então temos que notícias ou títulos de más notícias. Em seguida, temos novamente uma pequena notícia em destaque aqui. Acho que é novamente, o mesmo estilo, você pode ver quase o mesmo. Apenas o texto. O tratamento Dex do título é diferente, tudo é o mesmo. Você pode ver que esse é, na verdade, o layout. Você precisa dizer a eles esse recurso. Então temos que mostrar algum texto, notícias de texto e, novamente, um destaque. Então você pode ver novamente, temos alguns elementos gráficos e gráficos. Esse componente composto inteiro é, na verdade, um contêiner. Essas são, na verdade, as atualizações. Você pode chamá-los de atualizar atualizações de contêineres todas as notícias do coronavírus. E então, novamente, temos outra notícia que é novamente apresentada. Este é apenas este lado esquerdo. Agora, se você olhar para o lado direito, o layout é totalmente diferente. Temos esse primeiro componente que é nossa notícia de recursos à direita. Então, temos novamente texto para que você possa ver as semelhanças na repetitividade do mesmo quarto. Então, novamente, temos duas notícias de textos, então, novamente, temos. Um uso de opinião. Ok, então mais uma coisa está à direita, você pode ver que o tipo de letra usado é muito diferente. É muito alto. E, novamente, temos algo em destaque com uma imagem. uma vez, mais algumas notícias ou talvez artigos. Então, novamente, outro que está novamente com pequenos vídeos. Mais uma vez para o recurso, o recurso ou algo parecido. E então nós temos isso também pode tipo de coisa. Na verdade, isso é que você vai dizer a eles na parte de layout do seu sistema de design. Isso é um pouco avançado. Se você tem um produto muito grande de produtos muito importantes, você tem que mostrar a eles que é assim que você vai colocar sua landing page ou a primeira página. Então, se você for para esse negócio, ele terá um layout diferente. Você pode ver que o layout da seção superior foi alterado. Você pode ver que isso foi esmagado. Muito pequeno. Navegação superior. Em seguida, temos esse novo deck de negócios de componentes, onde temos diferentes categorias de negócios. E você pode ver que o layout foi alterado, totalmente alterado. Você pode ver agora que temos três colunas nesta página. Portanto, temos essa notícia de recurso como uma notícia de recursos um pouco menor. Então temos no lado direito, novamente temos duas notícias diferentes relacionadas que eu tenho uma imagem pequena e o estilo é diferente. Um pouco de arranjo diferente, mas o componente básico, o têxtil, esse tratamento de texto é quase o mesmo. Então temos este contêiner aqui. Este é novamente um contêiner de notícias de recursos ou coisas assim. Também estava presente no maior salário. Deixe-me mostrar-lhe se arrastarmos para baixo. Vamos ver aqui que temos o mesmo componente. Este é um componente composto comum ou contêineres. Você pode ver que ele contém quatro guardas que são basicamente novidades. Vai repetir na parte inferior novamente, se eu descer, você pode ver novamente que foi repetido aqui. E novamente, coloque-o aqui. E novamente. O mesmo se repetiu aqui, quatro áreas. E isso é tudo. Então, é assim que você criará seus componentes. Esse botão é, na verdade, nosso componente básico, o componente inicial básico. Este link novamente, você pode ver este tratamento de links. Esse é novamente um componente básico. E toda essa navegação é um componente composto. Este todo, esta seção é um contêiner. Ele tem muitos componentes organizados no layout para criar esse cabeçalho hetero correspondente. Espero que você tenha industrial todos esses diferentes contêineres de layout, componentes básicos ou componentes compostos. Vamos passar para a próxima lição e, em seguida, algo novo. Até lá, tome cuidado. Tchau. 9. Tokens e valores de papéis no sistema de design: Se você quiser começar a construir um sistema de design, você precisa entender o que são tokens, seus valores e seus papéis. Então esta é a lição sobre eles. Esta é a lição mais importante, acho que em todo este curso ou em toda essa aula. Então, vamos começar e ver quais são esses tokens e seus valores. Certo, então só para entender que o token é realmente um código, na verdade, ele é extraído do que os desenvolvedores costumam fazer. Eles costumavam atribuir uma variável a um valor. Este é, na verdade, o mesmo conceito que foi importado para o sistema de design. O que fazemos é, por exemplo, temos um símbolo de textos. Portanto, o token de texto pode ser aplicado à regra dos textos primários, pode ser um texto de botão, pode ser qualquer coisa. Portanto, cada regra ou cada função de token pode ser diferente. Portanto, haveria cinco ou seis ou talvez 20 tokens em seu sistema de design de design. E haveria duas ou três funções diferentes para cada token. Por exemplo, podemos dar a regra dos textos primários ao texto. Da mesma forma, o valor é, na verdade, a variável ou estática. Desculpe, o valor será variável, nome será estático, que na verdade é o mesmo conceito que usamos na programação. Se você é de um plano de fundo de programação, você já sabe disso, que temos um nome estático de uma variável e, em seguida, o valor realmente muda. Tokens de design. Você pode ver que temos tabela, fundo, página, fundo, valor de iluminação, valores de tema escuro. Surface é, na verdade, o que está no topo desse plano de fundo. Componente BG ou você pode dizer que é um cartão BD, você pode nomeá-lo de acordo com o que seus desenvolvedores ou sua equipe usam. Talvez sua equipe use cartões, use cartão BG para plano de fundo, tema claro, equipe escura, valor de textos, token de texto terá texto primário. E então temos luz, a equipe clara e escura. Da mesma forma, temos textos silenciados. A ação interativa é, na verdade , o botão que você também pode usar. Em vez de ter uma ação interativa token off, você pode usar o botão em vez disso. Isso não é um, nem muito, você pode dizer, tudo depende do que sua equipe está realmente usando. Ou você também pode usar botões e links separadamente. Isso depende de você, interativo em textos ou botão no texto, que depende de você. Então você pode ver que quase entendemos o conceito de tokens e seus papéis. Agora vamos falar sobre como vamos nomeá-los. Existe um método muito simples que temos que usar a categoria primeiro, depois digitar, qual é o tipo desse componente ou token, depois item e, em seguida, seu estado. Por exemplo, temos categoria de botão. E o tipo seria que tipo de botão é. É um botão de chamada à ação ou botão silenciado ou seja lá o que for, um botão desativado. Portanto, temos um traço de botão ou CTAs de pequeno traço, CTAs para o botão Call to Action. Então temos traço, qual é o item? Na verdade, é um plano de fundo. Em seguida, temos o item é, na verdade, estado. Então aqui não temos estado porque é uma cor. Então, a cor, na verdade terá apenas rolado a cor de fundo. Vamos nomeá-lo botão CTA, cor de fundo. Este será o nosso nome. Da mesma forma, você pode usar muitos outros nomes diferentes. Por exemplo, se você estiver apenas nomeando uma seção, um botão ou um texto, ou se houver um botão, ele terá um estado ativo ou desativado ou pressionado, algo assim. Então, o estado estará no final. Aqui está um exemplo do código que será usado pelos desenvolvedores. Só eu colo aqui para você possa entender o que será. Você pode ver aqui que temos um token de cor de fundo, então temos outro valor ou regra aplicada a ele. de cor de fundo. luz de cor de fundo é , na verdade, um tema leve. E então temos fronteira, borda, linha fina, raio de fronteira. Pode ser um raio de borda regular de rolo ou algo assim. Talvez no raio algo talvez tenhamos três ou dois papéis diferentes que possamos aplicar aqui. Por isso, é muito fácil mudar um tema para alguma coisa. Da mesma forma, você pode ver aqui Bill reverse é realmente cor de fundo, cor de borda escura é, na verdade, cor de fundo, cor escura, luz de cor do texto. Então esse é um esquema invertido. Isso é muito, muito fácil se você souber como nomear tokens e eles são variáveis e seus valores. Aqui está, na verdade, a representação visual do que estávamos falando. Este é o plano de fundo. Então temos a superfície no topo. Então temos um texto que é nosso você pode ver o texto é nosso cabeçalho ou título de parágrafo. Em seguida, temos textos silenciados, o que é um texto um pouco aborrecido. Não é um texto muito nítido ou regular, é um delta x. Então temos ação interativa, que é um botão, que é o plano de fundo do botão. E então temos o próprio texto interativo no texto significa que é o botão no texto. Você pode usar o botão, se quiser. Isso é outra coisa. À direita, você pode ver que personalizamos seu método de envio. É um tema reverso da mesma coisa para que possamos mudar os valores como quisermos. Este é o conceito mais simples de papéis e valores de token. Como podemos usá-los para mudar um tema inteiro em outra coisa facilmente. E também podemos encurtar nosso trabalho de manter muitas variáveis. Os tokens são, na verdade, a solução para toda essa bagunça de design. Então, temos 15 ou 20 cores diferentes para usar. Superfícies diferentes, sombras diferentes, diferentes. Você pode ver o espaçamento. Tudo o que você pode fazer é apenas atribuir a eles um token e alterar as regras. Isso é tudo. Espero que você tenha gostado desta lição. Vamos passar para outra lição para aprender algo novo. Vamos passar para a próxima lição. 10. Tipografia para você sistema de design: Neste vídeo, vou simplificar seu sistema de design onde falamos sobre tipografia. Então, onde nossa topografia cai no sistema de design e quantos tamanhos usaremos? Como vamos nomear essas diáfise e seus tamanhos? Então, vamos começar. Agora, o primeiro passo será que temos que selecionar e começar com um tamanho base. Então você precisa selecionar o tamanho do texto, que é o tamanho base. Por exemplo, 16 pixels, 18 pixels, 19 pixels, que dependem da fase TI. E se você quiser aprender mais sobre isso, você pode fazer minha aula de tipografia. Depois de decidir seu tamanho base, que é legível, facilmente legível, ilegível, você gerará uma escala de tipografia de tipo. No próximo, vamos decidir nossa altura da linha. Então, se quisermos que nosso design seja muito área ou temos, queremos ter um layout moderno. Vai ter mais espaço entre a altura da linha. Se você quer um design de dança onde temos, por exemplo, uma notícia ou um blog onde queremos mostrá-lo como se tivéssemos um jornal ou talvez algum outro site que usa um layout muito denso, layout mais escuro, temos para movê-los para mais perto. A altura da linha será menor. próxima pergunta é: como temos que nomear nossa escala de tipos ou tamanhos diferentes. O que eu realmente faço é usar para no máximo quatro ou cinco categorias diferentes. Como se tivéssemos um mega cabeçalho que estará presente em nossa área de imagem de herói no topo, muito no topo, quando você chegar em uma página de destino do site. Em seguida, temos nesses três títulos, títulos 123, maior cabeçalho, segundo título e terceiro cabeçalho. Então temos textos normais, que é o parágrafo que é nosso tamanho base. Em seguida, temos legendas ou pequenos textos ou metadados onde temos nosso, você pode dizer, se você ler vermelho, você leu quaisquer postagens do blog que você viu que está escrito pelo nome do autor e a data em que na verdade, são metadados. Na verdade, usamos tamanho muito pequeno para metadados ou tamanho de tifo pequeno para metadados ou legendas. Essa será nossa pequena categoria. Então nós temos, talvez possamos ter um tamanho diferente para nossos botões, seja qual for o texto nos botões, talvez eu esteja usando 18 pixels para meu texto, texto parágrafo, e talvez eu esteja usando 19 pixels em um botão. É assim que eu realmente divido o tamanho. Existem métodos diferentes, pessoas diferentes. Talvez eles possam, sua empresa pode usar o tamanho 123456 ou tamanho extra pequeno, pequeno, médio, grande, mega, algo assim. Cabe a você como você nomeia sua escala de tipos. Então você também pode nomeá-los ou categorizá-los com base em seu propósito. Por exemplo, temos títulos de histórias, títulos, cabeçalhos de seção de página de cópia do corpo, metadados, texto do botão Legenda que realmente discutimos como eu realmente os nomeio. Essas são categorias diferentes. É assim que você vai nomear o sistema de tipografia. Faremos tudo isso em nossa última seção, onde vamos realmente projetar nosso primeiro sistema de design. Então fique atento, fique comigo e veremos muito nas próximas lições. Então, até lá, tome cuidado. Adeus, o encontraremos na próxima lição. Vamos em frente. 11. Definir o sistema de espaçamento: O próximo passo no sistema de design é que temos que criar um sistema de espaçamento. Você pode ver que isso é na verdade, espaçamento vertical e horizontal, ambos na maioria de um site ou na maioria dos designs onde não estamos projetando um sistema de design para um aplicativo muito, muito grande. Normalmente, talvez precisemos do espaçamento vertical. Como você vai começar seu espaçamento primeiro é que você precisa selecionar seu número base, assim como sua tipografia. Você precisa selecionar seu número base como grade de quatro pixels ou oito pixels para pixel, é um pouco mais flexível. Ele pode ter tamanhos como 12 pixels se você quiser ter uma lacuna entre elementos muito pequenos no seu, talvez você esteja projetando uma tabela cheia de informações de dados. Você pode precisar de quatro pixels. E se você estiver criando um site, acho que oito pixels são mais do que suficientes. Ok, então o próximo é, depois de selecionar sua base. Além disso, você tem que selecionar sua escala, você tem que aumentar sua escala, por exemplo, para, então vamos saltar para 16 ou talvez oito, ou talvez até qualquer que seja o tamanho que você for. Teremos sete ou oito etapas diferentes. Isso é justo, é como construir uma escada. Então você especifica uma etapa e depois vai para cima. E como teremos escada de oito degraus. O próximo é menos ou mais contraste com o espaçamento. É o mesmo design de dança ou aéreo se você quiser um design muito moderno, onde temos muito espaço vazio, então teremos mais espaço entre nosso sistema de espaçamento. Por exemplo. Primeiro é talvez nosso primeiro começo seja de 16 pixels, depois o 32, depois talvez 64. Mais do que isso, teremos mais passos maiores de espaçamento. Agora, vamos chegar a como vamos nomeá-los. Existem duas maneiras. Primeiro é que você tem que nomeá-los com a gravata deles. Por exemplo, se for espaçamento vertical, o espaçamento horizontal seja lá o que for. E você também pode fazer isso, ou você pode misturar todo o espaçamento em um sistema, uma letra. E você pode dizer que temos espaço 01234, até dez ou 15, o que você quiser usar, mas acho que até dez seria mais do que suficiente. segunda parte é que, por exemplo, se você estiver projetando para dispositivos móveis para seu design, os espaços mudarão ou mudarão para espaços menores quando você for mudar para o tamanho do aplicativo móvel ou do celular. Por exemplo, se você tiver um site e estiver projetando uma versão responsiva ou menor sobre como ele seria visualizado em um celular. Os tamanhos mudarão. Você também pode especificar que o espaço 0 é como 16 pixels na área de trabalho. espaço 0 é de oito pixels em um celular. Assim, você pode gerar esse sistema em duas ramificações diferentes. Portanto, ele será recuperado, significaria o mesmo que quando usamos o espaço 0, ele mudaria para ele em um dispositivo móvel. Então, é assim que você pode alcançar uma harmonia em seu design. E você pode ter um sistema de espaçamento que vai e ampliou todos os seus aplicativos móveis, seus iPads e suas visualizações de desktop. Se houver algum aplicativo ou algum site que estende de desktop para tablet para celular, você pode ter um sistema de espaçamento onde todo o sistema de espaçamento terá três ramificações para desktop, tablet e móvel. É assim que você terá seu sistema de espaçamento e é assim que você vai nomeá-lo espaço 01234. Normalmente, o que eu normalmente faço é que na verdade não tenho muitos espaços separados. O que eu realmente faço é que seria mais fácil se o sistema for menor. Então, se você tem um sistema muito grande, você é como duas ou três equipes de desenvolvimento e desenvolvedores, ou talvez quatro ou cinco designers diferentes, então isso não funcionará. O que eu realmente faço é no meu trabalho freelance, eu realmente nomear ou marcar o espaço nele. Então, primeiro, espaçamento de categoria. O segundo é vertical, como o item com um surto vertical ou horizontal. Então eu realmente escrevo o espaço. Você pode usar talvez espaço vertical um. E isso é tudo. Mas normalmente tento mencionar que são 20 pixels, 32 fases, 40 pixels, 64 pixels, 44 pixels, que depende de você. Então, existem esses, Estes são dois métodos. Então, eu sugeriria que espaço 01234 é uma abordagem um pouco melhor , pois pode desenvolver tanto seus designs de desktop quanto seus designs de aplicativos móveis também. Então, ele vai se desenvolver ou aplicar a ambos e reduzirá a confusão. Isso é tudo sobre sistema de espaçamento. Espero que você tenha aprendido algo novo. Vamos passar para a nova lição e ver mais algumas coisas em sistemas de design. 12. Sistema de cores e como nomear a marca correta: Neste vídeo, vamos estudar outra partícula do sistema de design, que é cor, sistema de cores. Você precisa definir seu sistema de cores, como suas cores funcionarão em diferentes planos de fundo, temas diferentes, fundo mais escuro, fundos mais claros. Vamos começar e ver o que temos em nossos sistemas de cores. Portanto, o primeiro passo é sempre experimentar cores que você não pode estar certo. Você precisa primeiro testar suas cores em diferentes planos de fundo. Por exemplo, se você tiver um fundo mais escuro ou um fundo mais claro, você terá que testar as cores que têm cores mais acessíveis e acessíveis, que têm mais. Você pode dizer escuridão ou leveza. Vou mostrar plugins Figma que realmente fazem isso automaticamente. Então, não precisamos, Você não precisa se preocupar com isso. segundo passo é que você tem que ter pelo menos quatro, basicamente duas cores. Uma delas será sua cor primária ou de destaque, onde iremos ações e cores secundárias para planos de fundo e outras coisas. E então teremos sucesso ou cores de advertência. Na verdade, só precisamos duas cores que são basicamente para planos de fundo e sua cor de destaque. Ou talvez você possa apresentar um terceiro. As cores de aviso de sucesso serão verdes, azuis ou talvez vermelhas ou alguma variante dessas cores. Então teremos outra categoria que é BG, cores, que são três cores diferentes para fundos, temos fundos escuros, temos fundo claro. Então, podemos ter cores neutras, que podem ser algum tom de cinza, azul acinzentado ou talvez algum tom de amarelo esverdeado, ou talvez algum tipo cremoso de cor amarelada que seja um pouco aborrecido. Portanto, essas podem ser suas cores neutras que também podem ser úteis quando você tenta criar uma equipe diferente dentro do seu design. Vou mostrar meu design como todas essas cores criei. Agora, nomeando essas cores. Então, a primeira coisa é que você precisa agrupar suas cores em categorias diferentes. Por exemplo, as cores de ação serão diferentes. Seus links, eleições estão realmente mais próximas umas das outras. Eles são um grupo separado. Em seguida, temos cores de texto. Você precisa saber que temos texto silenciado, temos títulos, temos legendas, temos título. Então, tudo isso terá cores diferentes. Da mesma forma, podemos ter texto para entrada, texto dentro de nossa entrada, onde temos, temos que digitar algum texto. Portanto, haveria muitas cores de textos diferentes. Então teremos cores suaves. Já discutimos enfatizar a ênfase em que temos texto em negrito. Talvez queiramos mudar a cor do texto em negrito. Então teremos antecedentes. Os fundos serão diferentes. Fundos de ação, ênfase, desenfatizar. Os links também estão muito próximos das ações. Talvez listas, lista, item, marcadores. Eles também são, eu acho que na categoria de ênfase. Textos de texto terão, acho que três ou quatro categorias máximas. Um deles é o texto desativado , o texto normal, os textos de parágrafo, os títulos e talvez alguns textos sugestivos ou legendas que estejam e talvez alguns textos sugestivos ou legendas que em três ou quatro tipos diferentes de textos, cores. Então, também definiremos regras de cores. Por exemplo, em preto primário, qual será a cor primária em um fundo mais escuro? No secundário preto, qual será a cor secundária no fundo escuro? Nós vamos ter todas essas regras diferentes. Estou com sotaque preto, que será nossas tags são textos complementares em preto pairar nas bordas do convés. Se houver algo que vai mudar em uma cor preta talvez de borda, cor mouse ou talvez cor de destaque. Vamos definir esses papéis. Deixe-me mostrar o sistema de cores do meu sistema fechado favorito, Google Material Design. Eles têm muito, muito, você pode dizer, um tipo sólido de sistema de cores. E você pode ver aqui eu tenho um esquema de cores simples e à direita você pode ver cada fonte 1234, áreas diferentes. Então temos o primário, fff, que é de cor branca. No Secundário é nossa cor preta escura. Então temos no fundo, então temos na superfície, a superfície realmente descartar em caso de erro, temos uma cor branca. Então você pode ver se vamos para este cinco aqui, isso também é cinco, isso também é cinco. Se correlacionarmos isso, você pode ver que esse erro vermelho está realmente tendo uma cor branca em cima dele. Em termos de erro no adulto, no fundo da PNL, vamos usar a cor branca. Da mesma forma em segundo plano, vamos usar preto escuro. Plano de fundo. O fundo é, na verdade, deixe-me mostrar-lhe aqui. Este é o nosso passado. O fundo é branco, a superfície também é branca, o erro é vermelho. Da mesma forma, temos variantes primárias, primárias, secundárias e secundárias. Então, duas cores para primário para secundário. E você pode ver aqui, essa cor roxa é realmente usada. cor primária é usada. A análise, a análise aqui. E essa cor secundária verde é, na verdade, nossa excelente cor onde ela tem sido usada para a ação. Esta é a metodologia, você pode dizer. Você pode obter ideias, você pode usar em seu próprio sistema de design. Isso é tudo sobre sistema de cores em sistemas de design. Vamos passar para a próxima lição e eu vou encontrá-lo em outra lição até então, tome cuidado adeus. 13. Sistema de grade e layout: Agora, a próxima parte do seu sistema de design é, na verdade, seu layout de gradiente. A grade é diferente e o layout é diferente. Grid é, na verdade, como todo o sistema usará a grade. Colunas diferentes, largura diferente de espaçamento diferente entre a coluna que é cortadores. E seu layout é, na verdade, o quão diferentes são suas moléculas ou diferentes. Você pode ver que as áreas do seu design que você está projetando se unirão. Essas são duas coisas diferentes. Você pode ter o mesmo sistema de grade, mas você pode ter um layout totalmente diferente. Você pode gerar três ou quatro layouts diferentes. Vou mostrar um exemplo que será mais fácil para você entender a ideia. A primeira coisa é que você precisa selecionar um bootstrap de framework ou qualquer estrutura personalizada que seus codificadores ou desenvolvedores estejam usando, tentar se comunicar com eles. Comece a partir daí. Em seguida, vamos decidir sobre o número de colunas em tamanho maior da área de trabalho. Seria 12. Tamanhos médios podem usar 12 ou oito, e dispositivos menores podem usar duas ou quatro colunas. Então você tem que definir sua grade, que 1284 ou talvez duas, então quanta área deve ser o seu design, ok, Então isso também depende de suas notas. Então, se suas grades tiverem muito espaço entre suas duas colunas assim, elas terão mais espaço. Vai parecer mais especial e moderno. E se eles tiverem uma lacuna que é muito menos assim, parecerá um pouco mais denso. Então, é assim que você usará a grade para tornar sua área de design ou alterar o tema da sua área de design versus denso. Agora, o layout ajudará a saber como o design será coeso. Como ele realmente, você pode dizer, se revela na presença de um usuário. Vou mostrar alguns projetos aqui. Aqui você pode ver que temos um wireframe muito simples. E isso mostra que temos seção superior que temos aqui. Então, se definirmos isso, esta é na verdade a nossa seção principal. Em seguida, temos uma seção onde temos dois pedaços maiores de informação. E então temos nossa próxima seção. Temos nossa barra de guias. Então, novamente, temos alguns registros para registros diferentes. Então temos esse layout. Então você pode ver que isso pode ser organizado de várias maneiras diferentes. Mas uma vez que você especifique que é assim que vamos traçar nosso design, será assim. Você definirá seu layout em um celular. E, por exemplo, este é realmente um painel. E você pode ver regiões específicas da metade do Dashboard para coisas específicas. Por exemplo, seu gráfico, gráfico de pizza estará no lado direito e o segundo, na segunda linha. À esquerda, você pode ver que temos uma apresentação visual muito maior de diferentes países e coisas assim. No topo, no canto superior direito, temos uma seção onde temos dois erros diferentes, mensagens ou algo assim. Então é assim que você definirá o layout que será um cabelo. Você mostrará essa coisa, essa coisa, essa coisa e essa coisa. Por exemplo, temos sites de notícias, notícias de tempo e eles têm layouts muito específicos para cada uma de suas páginas diferentes ou categorias diferentes. É assim que você usará layouts diferentes. Você especificará diferentes layouts que é assim que você seguirá criar seu design ou criar, ou você vai vincular diferentes itens de design são áreas entre si. Então, isso é tudo sobre layout de grade em seu sistema de design. Espero que você tenha entendido a ideia por trás disso. Não quero mostrar a vocês centenas de exemplos diferentes. Faremos isso na próxima lição, na próxima seção. Acho que isso é tudo. Acho que você entendeu a ideia e vamos passar para a próxima lição agora. Até lá, tome cuidado. Adeus. 14. Tema em seu sistema de design: Agora vamos falar sobre a equipe em seu sistema de design. Quanta equipe deve ser permitida. Você vai te dar aos desenvolvedores que eles podem mudar seu tipo com blocos ou eles podem mudar totalmente o tipo de letra. Por exemplo, se você usou o Roboto e eles quiserem usar o Open Sans, você permitiria isso? Então, essas são as perguntas se você vai ter apenas um tema preto ou escuro para branco, onde temos temas claros e escuros e você só quer que eles mudem as cores. Por exemplo, de fundo mais escuro a um fundo mais claro, tema claro ou tema escuro. Ou talvez você queira usar um tema totalmente diferente, que é tema de outono ou equipe de primavera. Isso depende de você. Projetos diferentes ou projetos diferentes. Eles têm requisitos diferentes. Então, neste vídeo, vamos discutir o quanto o tema deve ser permitido e quais são as coisas diferentes que você deve cuidar quando você vai dar a eles muito design independência. A primeira coisa é que escuro versus luz. Esta é, na verdade, apenas a mudança de corrente. Portanto, esse é o nível que a maioria dos projetos vai estar. Acho que 70 a 80% vão estar aqui. Só precisamos de dois temas diferentes. Tudo o resto será o mesmo. espaçamento será a mesma altura da linha será a mesma. Texto, estilo ou rosto forte ou tipo de letra será realmente o mesmo. Agora o próximo é, por exemplo, se você tiver um sistema onde ele será usado no Windows, macOS, android, iOS, em diferentes sistemas, existem algumas especificações de algumas coisas ou sistema configurações que você não pode alterar. Você tem que adotar isso. Então, para fazer isso ou fazer, para criar todo esse tema, você pode ter que mudar seu design original um pouco. Você tem que ter isso em mente. Às vezes, sua personalização de design pode não funcionar no Windows, então você precisa mudar isso. Agora, o próximo nível é a estrutura ou o estilo de conteúdo. Se você vai mudar o estilo de suas cores ou sua diáfise ou quer mudar a estrutura? Por exemplo, o título está acima, ou talvez você, no próximo design, esteja na parte inferior da imagem. Essa é uma mudança muito grande. Certifique-se de que você precisa ser muito específico. Acho que você não deve mudar demais. Talvez usuários ou usuários estejam familiarizados com os padrões de design semelhantes. Portanto, não tente alternar muito entre estrutura e conteúdo. O conteúdo pode ser alterado. Por exemplo, se tivermos talvez um e-mail ou tivermos modelos do Instagram. Então, talvez eles sigam os mesmos tokens, tokens de design ou a mesma estrutura de design, mas o estilo será totalmente diferente. Ou seja, isso pode acontecer. Aqui está um exemplo à esquerda que você pode ver que temos duas cores de cores diferentes onde temos dois temas diferentes, claro e escuro, onde na verdade o tipo de letra é realmente mudado. Ambos são construídos com diretrizes de design de material, mas você pode ver que eles não estão usando design de material. Diáfise específica, por exemplo, Roboto ou algo assim. Eles estão usando seu próprio estilo. Isso é uma coisa à direita. Você pode ver que temos novamente, a mesma coisa acontecendo aqui, mas formas padronizadas, equipes escuras e claras. Agora vamos ver mais algumas variações aqui. Você pode ver aqui que temos variações de cor, espaçamento muscular versus tecnologia e coloração. O espaçamento na verdade vai mudar. Então, se você tentar alterar seu tipo de letra, por exemplo, você tenta usar um sans-serif. Você estava usando um sans-serif e começou a alternar entre um tipo serif. As alturas das linhas vão mudar. Typhus é uma alturas de linha totalmente diferentes, seus tamanhos de letras são totalmente diferentes. Então você tem que tomar cuidado para que todo o seu sistema de espaçamento seja ajustado. Depois de alterar o tipo de letra, todo o sistema de espaçamento, a altura da linha, eles devem ser ajustados. Isso é o que você deve considerar em seu tema. Porque se você der aos seus desenvolvedores ou à sua equipe de design muita independência, eles podem usar e mudar qualquer coisa que seja uma bagunça e você precisa se preocupar com isso. Isso é tudo sobre temas e o que deve ser domesticado em seu sistema de design. Encontrarei que você viu na lição e na próxima seção vamos começar a projetar um sistema de design básico. E vamos usá-lo para criar um aplicativo ou algo semelhante. Até lá, tome cuidado, adeus. 15. Princípios do design e declaração de propósito: Antes de iniciarmos nosso sistema de design, temos que fazer nossa declaração de propósito. E para isso, criamos esse documento de declaração de princípios de design e propósito. E eu criei outra página, página separada, e isso é muito simples. Vou passar por eles. E você pode ver aqui que temos o logotipo básico em preto e branco. E então temos nossos princípios de design. Prático em vez de teoria. Mostre em vez de contar. Isso significa que devemos ser mais práticos e temos que mostrar tudo em nosso design vez de contar muita história. Mostrar significa que os vídeos são, na verdade, a parte desse sistema de design que aprendeu na aprendizagem faz parte dos vídeos. Mostre-lhes em vez de dizer-lhes a coisa toda. Meios acessíveis em todos os lugares em todos os dispositivos, iOS e Android, ele estará acessível. Você tem que criar o design para que ele seja adotável em ambos. Concentre-se na experiência de aprendizado. Você tem que se concentrar no aprendizado. Então isso significa que os players de vídeo que tudo controla serão mais acessíveis, mais fáceis de usar, toque mais resistivo e coisas assim. Então temos essas declarações de propósito. Então você pode ver que temos ouro, por que beneficiar os usuários? Vimos tudo isso, mas criei isso para esse aplicativo específico. O objetivo é economizar tempo e criar design rapidamente, adicionar novos recursos de telas impulsionaram nosso aplicativo. Se não gerarmos design rapidamente, por quê? Cada novo recurso será entregue no mínimo duas semanas. Então, íamos enfrentar atrasos benefícios para resolver problemas semelhantes repetitivos. Assim, a equipe de produtos pode se concentrar em realmente mostra aos usuários que serão os usuários dessa finalidade. Este sistema de design será usado internamente dentro de nossa equipe. Isto é, já discutimos isso em nossa palestra de declaração de propósito. Isso é o que você deve criar pela primeira vez, e essa será sua tarefa. Esta será a sua tarefa dois. Isso é tudo. Antes de entrar em seu sistema de design, tente criar alguns princípios de design que serão fatores decisivos para toda a sua equipe e design. Então teremos uma declaração de propósito que estamos construindo esse sistema de design. Então fique comigo. Vamos construir um sistema de design. Vai encontrá-lo em outra lição. Até lá, tome cuidado, adeus. 16. Layout automático Figma e variantes 01: Se você quiser construir seu sistema de design na Figma, há dois conceitos que você realmente precisa dominar, e um deles é o layout automático e o segundo é a variante. Neste vídeo, vou compartilhar com vocês algumas das técnicas que você pode usar no layout automático e na variância, usando a variância para criar seus componentes na Figma. Vamos começar e ver o que podemos fazer com isso. Se você olhar para esta tela, você pode ver que temos essa navegação e se tentamos apertá-la, é facilmente expansível que você possa ver que tudo está ficando aqui. Da mesma forma, temos esses dois botões. Na verdade, eles são componentes e variância, mas antes disso eles eram realmente auto-layout. Eles são criados usando o layout automático. Da mesma forma, você pode ver aqui, aqui está uma entrada com rótulo. E você pode ver que isso também é criado com o layout automático. Então, se eu tentar alterá-lo, por exemplo, meu nome aqui, você pode ver que ele está se expandindo. Certo? Se você não quiser ir e quiser expandir, você precisa entrar nesse arranjo interno de layout automático. E vamos definir esse texto para preencher um contêiner. Você pode ver agora que não está se expandindo. Então, nós consertamos isso. Ok, então aqui está uma entrada de texto dentro da ação ou botão aqui. Mais uma coisa é o arranjo aqui. Você pode ver que isso está no layout automático e se esse rótulo estiver na parte inferior, então, se eu tentar movê-lo na parte superior, você pode ver que ele estará na parte inferior. Isso é realmente revertido em Figma. A parte inferior estará na parte superior e a superior estará no final desse arranjo. Vou movê-lo de volta para cá. Vamos começar e ver como podemos construir tudo isso. Então, primeiro vamos construir isso, esta caixa de entrada de texto com um rótulo. Para isso. Vamos usar apenas um texto. Então, vamos movê-lo um pouco para o lado. Vamos tentar expandir o quadro um pouco mais. Mova para cima. zoom. Aqui temos a tela e vou pressionar T para texto. E vamos usar seu nome. Vamos usar um pouco regular de cor acinzentada aqui. Vamos adicionar o layout automático a este, Shift a. Você pode ver que temos nosso layout automático adicionado. Vamos chamá-lo de texto. Vamos duplicá-lo pressionando segurando sua tecla alt ou opção e arrastando-a assim. Então, vou arrastá-lo para gostar, digamos que 60 pixels de distância. Vou nomeá-lo agora de ação. Ou talvez você possa usar o upload. Por exemplo, se você estiver criando um botão de upload, usarei diferentes cores de textos porque teremos link. E vamos enfiar os dois. Mais uma vez. Isso não é, na verdade, texto. Vamos chamá-lo. Selecione os dois e, novamente, pressione Shift it. Agora você pode ver que temos essa borda em torno deles e outro quadro, vamos chamá-lo de entrada. Se eu expandir, expanda essa entrada e você poderá ver que temos ação e texto. Assim, você pode ver que a ação está na parte superior, que na verdade está à direita, e o texto está à esquerda, que fica no canto inferior direito. Agora, se clicarmos em Entrada, você pode ver aqui à direita, temos separação de 60 pixels. Então, este é, na verdade, o espaçamento entre os itens dentro e o layout automático. A entrada tem, na verdade, dois itens dentro dela. E este layout automático, você pode ver que ele está na direção horizontal. Então, dois itens horizontalmente, eles estão a 60 pixels de distância. Basta obter o conceito. E se você quiser adicionar preenchimento em torno deles, por exemplo, toda essa seção, queremos adicionar preenchimento em torno dessa caixa de entrada. Podemos usar algo aqui, como dez pixels. Você pode ver agora que ele adicionou 101010 em todos os lados. Vamos usar oito aqui. Vou te mostrar por que usei no final. E esse é, na verdade, o arranjo. Agora mesmo. Não importa porque temos apenas dois elementos e eles já estão alinhados corretamente. Vamos usar no meio. Em seguida, vamos, você pode ver que eu selecionei essa entrada em vez da interna. Nos itens. Portanto, toda essa entrada é selecionada. Agora vou colocar um preenchimento sobre ele. E o branco é ótimo. Vamos adicionar oito pixels de arredondamento aqui. Você pode ver que nosso item básico está pronto, a entrada está pronta. Mas o problema é que quando eu começo a digitar, ele está realmente se expandindo. Corrija que vamos usar o clique no texto em vez de conteúdo quente. Vamos usar o contêiner cheio. Acho que vai consertar isso. Outra maneira de consertar isso é que poucos escorregaram. Selecione essa entrada. Você pode ver que temos empacotado e espaço entre as opções. Se você tentar usar o espaço entre eles, ele consertará essa opção. Sempre será que esse upload é sempre estar no lado direito vai espaço tudo usando esse espaçamento aqui, esse preenchimento. Vai porque temos dois itens. Um estará à direita e um estará à esquerda. Acho que isso é. Tudo bem. Agora vamos ver. Se eu tentar mudar. Vamos selecionar a entrada e tentar expandi-la. Então você pode ver agora o upload está se movendo com a direita. Se eu tentar expandi-lo, ele vai se mover assim. Também podemos adicionar um rótulo aqui. Então, vamos selecionar o texto. Vamos criar um rótulo. vez, vamos colocar um layout automático no rótulo para mudar a. E vamos tratá-lo um pouco e adicioná-lo à entrada. Agora, esse rótulo foi adicionado e também é um quadro, então vamos chamá-lo de rótulo. Você pode ver que tem um preenchimento de dez aqui. Vamos usá-lo. E vamos alinhá-lo com o rótulo aqui. O texto dentro da nossa entrada. Mais uma vez, vamos selecionar toda essa dica. Vamos usar o shift a para criar o quadro. Este quadro será inserido mais rótulo. Foi assim que eu realmente criei isso. Agora você pode ver se você olhar para este, a direção do layout automático é vertical porque não temos dois itens dentro disso. Deixe-me mostrar-lhe. Uma é entrada e outra é rotulada. E você pode ver o rótulo está na parte inferior, agora está no topo. Aqui temos isso. Vamos usar 0 porque queremos que o rótulo fique muito próximo. Esse rótulo tem, na verdade, um preenchimento de oito pixels, portanto, está a oito pixels de distância da área de texto de entrada inferior. É assim que você cria e usa essa técnica de layout automático. 17. Layouts automáticos e variantes: E a próxima coisa seria que, se você criou isso, vamos criar, criar um componente. Então, vamos criar um componente, Opção de Controle ou Comando K ou Controle Alt K. Vamos clicar nisso e você pode ver agora que temos isso. Vamos adicionar um brilhante. Então, vamos a propriedade ser estado. Vamos mantê-lo simples. Aqui está nosso estado padrão, e este será, vamos chamá-lo de estado ativo. Aqui vamos, podemos alterar o texto para ficar mais preto e mudar este para o nome. Torne um pouco mais leve. Só para ter a diferença entre esses dois estados. Se você votar, você também pode adicionar um traçado aqui. Vamos fazer isso assim. Ok, então aqui temos outra variante, esta é uma variante ativa. E vamos adicionar outra variante. Clique aqui e adicione outra variante e nova variante. E isso será realmente mantido, três seriam desativados. Então, vamos fazer essa cor branca para a cor esverdeada. Use esse cinza. Acho que dessa forma funcionaria. Este Upload agora seria de cor acinzentada. Talvez assim. Rótulo seria pecado. Agora você pode ver que criamos três variantes disso, input plus label. Você pode fazer o mesmo com qualquer componente, qualquer botão que você tenha. Por exemplo, vamos criar um botão aqui. Usaremos novamente o layout automático. Vamos criar um texto primeiro. Vamos apenas mudar um para adicionar o layout automático. Vou usar um preenchimento de, hum, que é usar um preenchimento de 12. Parte superior direita, 16161612 na parte inferior. Assim. Use isso no meio. Tudo será o mesmo. Conteúdo Huc. Sim. Vamos adicionar uma cor de preenchimento de companheiro guerreiro. Vamos mudar a cor para algo assim. A cor do texto será branca. Aqui temos o botão básico com nosso layout automático. Vamos adicionar oito pixels aqui para a redondeza. Para mim, acho que à direita e à esquerda, quero mais espaço. Eu adicionaria 2020 aqui. Você pode ver que este é agora o botão simples com layout automático. Você pode criar variância. Agora, se quisermos adicionar, vamos chamar esse botão. Se você quiser adicionar um ícone aqui, essa é outra história. Então, vamos usar a barra de comando ou controle. Eu tenho esse plug-in instalado ícones lúcidos, e vou usar, vamos usar algum mícron. Vamos usar esse ícone aqui. É aqui que o ícone aqui. Vamos trazê-lo para dentro do quadro. Arraste aqui. Aqui está a sobrecarga. Vamos tentar arrastar isso para dentro do botão. Agora você pode ver uma vez que eu o arrastei, ele está no final do botão porque na verdade é o que você chama, a parte inferior e a parte superior. Então, o que quer que esteja no topo, seria no final do botão. Porque nosso layout é na verdade direção horizontal. Este é o nosso gamepad. Vamos tentar usar uma cor branca aqui. Então, aqui está um botão de registro com um ícone. Agora, se você quiser aumentar o espaço entre esses dois itens, clique no botão, e esse é o espaço entre eles. Então, se eu tentar aumentá-lo, vamos usar 40 aqui. Acho que 36 seriam bons o suficiente. Agora você pode ver que está ótimo. Qual é o preenchimento à direita? Vamos usar 1818. Aqui. Isso parece melhor agora. Ok, então temos esse botão. Agora vamos criar um componente a partir dele. E vamos selecionar nosso componente. Agora. Ele foi transformado em um componente dentro do layout automático. Vamos criar uma variante. Agora aqui está a segunda variante. E para a propriedade, vamos usar o estado novamente agora. Simplifique. Essa é a distância entre as duas variantes. Então, se você quiser diminuí-lo, você pode diminuí-lo. Mas acho que 24 seria ótimo. 20 serão. Para o segundo vídeo. Vamos mudar as cores da segunda variância. Vamos torná-lo um pouco mais brilhante quando você vai passar o mouse sobre ele. E é isso, acho que agora vou mudar a cor agora. Aqui temos o padrão. Este é o segundo estado da variante que seria passar o mouse ou ativo. Vamos chamá-lo de estado ativo. Portanto, isso é padrão, isso está ativo. Vamos usar um caso maiúsculo aqui. Aqui está outro botão radiante com variância usando layout automático. Isto é, você pode dizer a essência do seu sistema de design. Se você entender esses dois conceitos, você pode fazer qualquer coisa. Você pode ver que este é um botão com um ícone. Se você quiser mover o ícone no início, vamos movê-lo para cá. Vamos movê-lo para cá. Agora, está no início ou no lado esquerdo. Faça isso para trazê-lo de volta. Agora, se você quiser alterar a distância entre o ícone, vamos fazer o, por exemplo, se você quisesse assim, e eu quero assim, 30. Você pode ver agora que ele está encolhido nessa direção. 1818. Aqui está um vídeo simples sobre layout automático, e esse é o poder da Figma. Essas são as duas coisas que você mais usará para criar variantes diferentes e tudo mais. Se eu tentei alterar o texto aqui, altere o texto agora você pode ver que ele está se expandindo automaticamente aqui. Se você quer um fixo, acho que o V é que você tem usar fixo. Eu acho. Acho que você tem que fazer a configuração no início. Vamos ver se consigo ter um botão de tamanho fixo. Ok, então isso é tudo sobre isso. Abrace o conteúdo e os itens de largura fixa. Principalmente, vamos usar o conteúdo do conteúdo. Isso é tudo. Então este é o meu vídeo simples sobre variância sigma e layout automático. Espero que você tenha entendido e aprendido algo novo. Usaremos muito essa técnica em nossas próximas lições quando formos construir nosso layout, topografia e tudo mais. Então, até lá, tome cuidado. Adeus. Nos encontraremos em outra lição. 18. Redimensionamento automático de layout feito certo: Este é um conceito muito básico que você precisa entender, que é o que é conteúdo quente e contêiner completo e largura fixa. Essa é a diferença entre o redimensionamento de um layout automático, o que é muito confuso para mim. Demorou muito tempo para eu entender isso. Vou compartilhar com vocês de duas maneiras. Uma é que você quer que todo o layout se expanda automaticamente. Segundo é que você quer o fixo com talvez texto de entrada ou algo assim usando o Layout Automático. Vamos usar esse exemplo. Você pode ver aqui como o conteúdo é, na verdade seu quadro pai ou layout automático pai ou quadro que se expandirá de acordo com seu filho. Então, se as crianças vão se expandir, ela se expandirá com ela. O contêiner preenchido é realmente usado para a criança. Portanto, o objeto filho realmente preenche o contêiner. Seja qual for o espaço restante, ele vai preencher isso. Esses são conceitos um pouco difíceis. Como o conteúdo também funcionará nos pais? Os objetos filhos vão para o pai se expandirão com um objeto filho. Isso é um pouco difícil. Então, apenas uma dica simples. Se você quiser um botão de expansão automática com o texto ou rótulos ou pode dizer ícones. Você precisa usar conteúdo quente em tudo. Por exemplo, aqui você pode ver esta é, na verdade, nossa entrada em uma entrada e eu defini que é para abraçar o conteúdo. Então, ele vai se expandir abraçando seu conteúdo se eu tentasse mudar seu conteúdo. Então, vamos tentar alterar esse texto aqui para que você possa ver que ele está se expandindo. Este é o pai está se expandindo. Sempre que estou tentando alterar o texto filho, objeto filho está mudando seu tamanho e o pai está se expandindo. Se descermos para texto e filhos filhos internos, você pode ver que eles também estão usando o conteúdo do Hulk e o link também está usando o conteúdo do abraço. Isso é muito, muito importante. Você precisa usar conteúdo quente se estiver criando um botão ou texto de entrada onde você precisa expandi-lo com o texto. Você tem que usar o conteúdo do abraço. Agora, no caso disso aqui, este texto aqui, que é na verdade nossa área rotulada. Não vou usar conteúdo quente, vou usar largura fixa. Largura fixa. Tente mudar isso. Agora. Você pode ver agora eu mudei para uma largura fixa. Então esse texto vai afetar e todo o meu rótulo ou toda essa entrada permanecerá. O mesmo. A ação vai estar à direita. Então, outra maneira é deixar-me te mostrar de uma outra maneira. Você pode ver se você clicar nesta entrada aqui, isto é, na verdade, ele tem dois elementos e layout automático está definido para espaçamento de 40 pixels de distância oito pixels é o preenchimento e a direção é horizontal. Se eu tentar usar em vez de ensacado, se eu tentei usar espaço entre eles, ele realmente vai ter esse efeito, que é se eu tentar expandi-lo assim. Então você pode ver que ele está se movendo com este assim. E agora, se eu tentar mudá-lo, será novamente o mesmo. Agora, mais uma configuração é que vou, em vez de usar largura fixa, vou usar o contêiner de preenchimento. Então agora você pode ver que tomou esse espaço aqui. Entre isso e este, temos um espaçamento automático. Então, vamos tentar expandi-lo. Então você pode ver agora, agora você pode ver esse efeito de preenchimento, contêiner preenchido tem efeito, ele realmente preenche o contêiner sempre que eu o expandi. Então este é o nosso contêiner. E se eu tentar expandi-lo ou apertá-lo, ele mudará o tamanho do campo de texto. Você pode ver agora, e vamos tentar torná-lo um pouco maior. Então agora você pode ver que isso está definido para contêiner completo. Na verdade, está enchendo o recipiente até aqui. Não sei qual é essa distância entre eles? É novamente 40. A distância novamente 40, que definimos inicialmente o início ou secamos agora está definida como OK, então está definida como 40. Está mantendo essa distância. Então, vamos tentar usar o espaço entre aqui e tentar expandi-lo. E C. Agora, o que está acontecendo? Agora você pode ver que ele está enchendo o recipiente. E está preenchendo todo o espaço porque o configuramos para configurá-lo para automático. Espaço entre. espaço entre é , na verdade, ajustar automaticamente o espaço entre esses dois itens. E você pode ver que está espaçando assim e enchendo todo o recipiente. Então normalmente eu não usaria espaço entre eles, mas usaria morcego. Agora está estragando toda a minha seção aqui. Então, vamos tentar apertá-lo, pronto para embalar. O problema é este. Vamos apertá-lo assim. Para o texto, usaremos largura fixa. Isso vai ter conteúdo e essa é uma largura fixa. Então, é assim que você realmente usará o contêiner de preenchimento e o conteúdo quente e largura fixa usando seu layout automático. Se você tiver alguma dúvida, por favor me pergunte. Sempre estarei aqui para responder a essas perguntas. Este é o conceito mais confuso, qual você precisa usar na criança ou no pai. Portanto, certifique-se de que se você tem um botão de expansão automática, tudo será definido para abraçar o conteúdo e o pai será definido para o espaçamento entre eles. Por exemplo, esse espaçamento de layout, vou configurá-lo para 40 ou 30 ou 20, seja qual for o espaçamento que eu quiser entre os itens e este é o preenchimento. Então isso é tudo. Espero que você tenha entendido esse conceito de contêiner preenchido com conteúdo , layout automático, espaçamento, redimensionamento. Diga-lhes que vamos encontrá-la na lição. Tome cuidado. Adeus. 19. Navbar responsivo em Figma usando layouts automáticos: Bem-vindo a outro tutorial Figma onde vamos criar uma barra de navegação responsiva usando Figma e usaremos o layout automático. Vamos começar. Vou mostrar como você pode usar o layout automático para criar uma barra de navegação responsiva na Figma. Agora vamos começar e criar essa barra de navegação responsiva. Pressione T para criar um texto. E vamos digitar em casa. Vamos replicar isso segurando a tecla Alt. E vamos usar o Comando D para ter outra cópia. E vamos citar isso, vamos chamar esse contato. E vamos selecionar tudo isso e vamos distribuir o espaçamento horizontal entre eles apenas para garantir que o espaçamento seja preciso. Então, agora é 19, temos que aumentá-lo. Vamos usar 46467. Entre eles. Agora vamos selecionar todos eles e vamos adicionar deslocamento de layout automático k. Primeiro criamos três camadas de texto, camadas texto simples e criamos um quadro ao redor delas. Aqui temos o quadro apenas para controlar esses itens. No momento, a direção do quadro está na direção horizontal. Então, se tentarmos adicionar, você pode ver se abrimos este quadro e tentar adicionar algo novo comando D. Então você pode ver que ele vai adicionar na direção horizontal, então esta é a direção certa. Ok, então aqui temos, vamos chamá-lo de links. Vamos ocultar essa barra de navegação agora, o botão inferior. Ok, então aqui temos este. E o próximo passo é que vamos criar nossos botões. Então, novamente, vamos prestígio. Este será o nosso botão. Vamos chamá-lo de login. E vamos adicionar um layout automático a esse turno, um layout automático adicionado. Então, vamos adicionar uma cor de preenchimento desse botão a esse botão. Vamos usar esse verde ou talvez esse azul. E a cor do texto será branca. Então aqui temos o botão pronto, e vamos adicionar um pouco de preenchimento aqui de oito. E a partir daqui vamos usar preenchimento diferente em todos os lados. Para um botão, vamos usar oito na parte superior, 16 aqui, 16 à direita e oito na parte inferior. Esse será o nosso padrão. Vamos chamá-lo. Vamos chamá-lo de TTN. Mantenha Gideon. E vamos replicá-lo segurando a tecla Alt ou a tecla Option. E vamos separá-los 16 pixels. Assim, você pode ver pressione, mantenha pressionada a tecla Alt ou Option para ver o espaçamento. E vamos chamá-lo de se inscrever. Agora você pode ver que ele está se expandindo por conta própria porque definimos o redimensionamento para abraçar o conteúdo. Portanto, sempre que o conteúdo for expandir o contêiner geral, ele abraçará o conteúdo mantendo o espaço que especificamos. Você pode ver se clicamos no botão, temos dez espaçamentos. Então Dan é o espaçamento entre dois itens. Estas são as margens ou paddings que aplicamos. Vai sempre mantê-los. Vamos clicar neste e vamos, vamos usar alguma outra cor, talvez laranja para se inscrever. Vamos usar laranja. Temos dois botões agora. E isso também é, na verdade, temos três layouts automáticos. Um deles é links para nossos botões, um botão, segundo botão. Vamos selecionar todos eles. uma vez, vamos pressionar Shift a. E você pode ver que temos esse quadro de layout automático, então este será o nosso NANDA. E antes disso, acho que precisamos ter outro quadro para os botões. Isso é realmente z. Vamos alinhar esses botões primeiro, mudar a para ter um layout automático para esses botões e vamos chamá-los, mas porque temos que organizar o layout de ambos os botões também. Se quisermos controlar o espaçamento entre dois botões agora podemos fazer isso aqui. Vamos usar 12 aqui agora. E agora temos botões, ambos os botões em outro quadro de camada. Agora, o que vamos fazer é selecionar todos esses. Você pode ver à esquerda, isso é muito importante. Temos botões. Então, novamente, dentro dos botões, temos dois botões diferentes layout automático. E então, nos links, temos três camadas de texto. Agora vamos selecionar todos eles. Shift a. E você pode ver que temos essa barra de navegação, quase nav bar que está concluída. Agora você pode ver que nosso texto está se movendo para cima. Então, sempre que criamos algo assim, às vezes acontece que nosso texto se move para cima. Você pode ver que esse é o espaçamento entre os itens. Então, se eu tentar reduzi-lo, você pode ver que ele vai se aproximar do texto que temos aqui. Para corrigir isso. Você pode ver que eu selecionei essa barra de navegação. Isso é muito importante. E eu vou para o meio assim. Estas são as opções de alinhamento. Então, se eu usar isso, você pode ver que o texto está alinhado na parte superior. Parte inferior. E você pode ver isso na parte inferior, e nós vamos selecionar isso. Vai estar à esquerda e no meio. Agora vamos adicionar uma cor de preenchimento à lanchonete, que será branca. Vamos usar branco. E a partir daqui vamos usar o raio de oito pixels. E aqui vamos usar algum preenchimento no topo. Vamos usar 16. Na parte inferior. Vamos usar 16. Vamos adicionar 24 à direita e 24 à esquerda. Agora você pode ver que temos nosso navbar pronto. Aplicamos todos os remendos ao redor usando este painel aqui. Agora, se você pode ver se tentamos expandi-lo, ele não está se expandindo, o conteúdo não está se expandindo, não é responsivo. Porque você pode ver aqui que esse espaçamento está definido como personalizado. Então, neste momento, temos que consertar isso. Então, para fazer isso, temos que ir até aqui. E vamos mudar para, vamos voltar onde quer que nossas configurações originais e anotemos. Você pode ver que eu selecionei navbar e vamos para espaço entre o que ele está fazendo, você pode ver agora esse espaço entre itens está realmente definido como automático, então é ajustando automaticamente o espaço sempre que tento arrastar ou tornar a barra de navegação maior ou menor. Este é o truque por trás dessa capacidade de resposta. Então você pode ver agora se eu tento arrastar algo assim, você pode ver agora que ele é totalmente responsivo. Então, este é o último passo. Agora você pode ver que uma barra de navegação responsiva está quase completa. Agora, se quisermos adicionar algo aqui, por exemplo, quero adicionar notificações. Então, vamos chamá-lo de notificações aqui. Ou talvez algumas mensagens. Se eu quiser ou arrastar algo aqui na parte superior, por exemplo, tenho um pequeno ponto vermelho para notificações. Por exemplo, este. E se eu tentar arrastar e colocá-lo aqui, você pode ver que está me mostrando que ele vai ser deixado dentro desse layout automático. Portanto, ele está adotando automaticamente o layout automático. Se eu tentar soltá-lo assim, ele vai estar aqui. Se você não quiser ou quiser escapar desse comportamento, você precisa segurar sua barra de espaço e arrastá-la e soltá-la assim. E vai ser assim aqui. Vamos tentar fazer isso um pouco feito. Aqui temos as mensagens. Você pode movê-lo assim. É assim que você cria uma barra de navegação responsiva na Figma. Espero que você tenha gostado deste vídeo e tenha certeza de assistir ao próximo vídeo também. Então, até lá, nos encontraremos em outro vídeo com outro truque Figma e Tutorial, tome cuidado e adeus. 20. Janela de modal de caixa responsiva em Figma: Bem-vindo a outro vídeo sobre Figma. E hoje vamos criar uma janela modal responsiva. Ou você pode dizer um layout automático complexo ao usar Figma. Vamos começar. Vou mostrar primeiro o que estaremos construindo e vou mostrar técnicas, como você pode obter janela responsiva ou um protetor de interface do usuário de cartão que você pode construir usando Figma. Vamos começar. Assim, você pode ver na tela que temos layout automático da janela modal responsiva. E esta é a janela modal que construímos. Então, se tentarmos espremê-lo da direita, você pode ver que ele é totalmente responsivo. Os botões e o ícone da roupa ficam na parte superior e inferior e suas posições fixas e o texto estão realmente apertando com a caixa. Isso é muito fácil de criar. Tenho que te mostrar quais são as camadas que estão dentro dela. Portanto, temos botões para que os botões estejam dentro de quadros automáticos e, em seguida, eles são combinados em outro quadro automático. Vamos criar isso. Então, vamos começar. Primeiro, vamos criar nosso botão. Pressione T. Vou fazer essa exclusão, adicionar um layout automático a este único turno. Nós adicionamos o layout automático. Vamos adicionar cor de preenchimento aqui. E desta vez vamos usar essa cor vermelha para o texto. Vamos usar a cor branca. Aqui temos nosso botão básico e você pode ver que este é o preenchimento ao redor do item e isso é um espaçamento. Para o próximo item. Vamos tentar usar um preenchimento de 81620 à direita. Vamos usar 28 aqui. Este vai ser meu botão. Vamos adicionar alguns cantos arredondados, oito pixels aqui. Vamos usar quatro. Aqui temos nosso botão de descida. Vou usar 1010 na parte superior e inferior. Então, temos um bom tamanho, mas botão. Temos nosso botão. Vamos chamá-lo de btn. Vamos replicá-lo pressionando ou segurando a tecla Alt ou Option e replicando-a. E vou colocá-lo, digamos que 16 pixels de distância. E desta vez vou mudar sua cor para essa cor. E isso vai ser cancelado. Agora você pode ver que o definimos para abraçar o conteúdo. É por isso que ele está realmente se expandindo alterando seu conteúdo. Por isso, sempre acomodará o conteúdo e expandirá e contrairá. Quando temos essa configuração, que é abraço, abraço o conteúdo. Ok, então temos os dois botões. Vamos envolvê-los, dentro e outro layout automático. Então Shift, eu selecionei esses dois turnos a. Isso é realmente importante. Isso é botões. Até agora, criamos botões de layout automático dentro do quadro de outro botão, que é o quadro de layout automático. E nós os combinamos em ambos. Então você pode ver aqui que temos a direção do layout automático horizontal. Então, se adicionarmos um pouco e ele vai estar à direita. Este é o espaço entre eles. Então, se você quiser controlar o espaço como 12 pixels ou dez pixels entre eles, você pode fazer isso aqui, temos nossos botões prontos. Certo? Agora precisamos de texto e um ícone. Aqui temos nosso botão. Vamos usar algum título. Cabeçalho. Por aqui. Tentei usar negrito. Vamos usar 24. Vou replicar isso. Mais uma vez. Isto é, vamos tentar usar um gráfico melhor então d, então vou usar um quadro como este, assim. E vamos tentar ver se temos, esta é uma caixa. Vou usar as costas do Control até cortar Lauren. Além disso. Vamos tentar adicionar alguns textos aqui. Verbos ingleses, gráfico. Vamos adicionar dois parágrafos aqui. Este é o nosso parágrafo. Vamos usar 1616. Vamos usar regularmente. Vamos usar um parágrafo. Acho que devo excluir o segundo. Vou pular todas essas configurações. Isso é apenas, vamos usar algo assim. Talvez algo assim. Certo. Temos nosso parágrafo de texto, que é este. Este, e indo para fingir. E agora vamos adicionar um ícone aqui. Vamos adicionar um ícone, ícones, ícone cruzado. Vamos adicionar outro ícone aqui para o botão fechar. Vamos usar fluxos. Então, desta vez, vamos usar este. Este é o nosso botão. Vamos tentar usar essa cor, talvez essa. Para fechar esta janela. Temos esse círculo aqui. Agora vamos selecionar todos eles. E o peito muda e adicione um layout automático. Você pode ver agora o layout automático foi adicionado. Vamos chamá-lo de pedido. Temos que adicionar uma cor de preenchimento, que será branca. Precisamos ter algum preenchimento aqui. Então, 16 no topo, digamos que às 24 à esquerda, 2416 na parte inferior. Você pode ver que temos o layout básico da nossa janela modal. Vamos usar alguns cantos arredondados. Vamos usar alguma sombra ao redor dele. Percentual de sombra vai ser dois. Este, adicionamos uma sombra muito clara em torno dele. Agora você pode ver que temos que usar algo que será esse layout. Selecionei esse modelo, modelo e vamos usar o layout correto. Então, para trazer esses botões e tudo à direita, você pode ver esses botões, esse texto, esses botões inferiores e este canto. Um foi movido para a direita. É assim que você vai conseguir isso. O primeiro passo é esse. E então, se tentarmos apertar isso, você pode ver que o texto não é responsivo porque sair da caixa. Então, para conseguir isso, temos que clicar no texto e, em vez de largura fixa, vamos usar o contêiner de preenchimento. Da mesma forma, esse contêiner será preenchido. Você pode ver agora que ele já está enchendo o contêiner, então temos que usar isso. E você pode ver lá nossa caixa responsiva e nosso imposto está realmente apertando com ela. Você pode ver que a distância entre esses dois é realmente controlada a partir daqui, temos dez. Então, se eu tentei reduzir, gritos, não os botões, mas a janela do modelo. Então temos 23, vamos usar 16. E vai ser assim. Este é o, se você quiser controlar mais coisas, você pode dar a elas outro layout. Então eu selecionei esses dois textos e vou dar a eles mais layout automático. E em vez de conteúdo quente, temos que usar o contêiner completo novamente. E aqui podemos controlar o espaçamento entre apenas o texto. Então você pode ver se, por exemplo, eu quero que seja assim. Agora, se eu tentar selecionar e apertá-lo, opa, o que está acontecendo? O quadro é, na verdade, o quadro. Acho que o texto foi deslocado. Mais uma vez. Temos que fazer o contêiner completo. E você pode assumir novamente. Essa é outra maneira. Então, agora meu texto está realmente dentro. Ambos os textos estão dentro de outro layout automático. Você pode ver aqui o texto dentro de outro layout de artéria. Você pode fazer o mesmo sem esse layout automático, mas eu adoro, você sabe, controlar o espaçamento entre meus diferentes itens. É assim que você pode fazer isso. Isso resume nossa janela modal, onde estamos criando uma janela modal responsiva, que será espremida e expandida e textos que estaremos envolvendo com todas as bordas são o espaçamento ou o preenchimento em torno dele. Espero que você tenha amado ou gostado deste vídeo de layout automático. Certifique-se de assistir meus outros cursos, óculos, videoaulas e vídeos do YouTube. Encontrarei você em outro vídeo até lá, tome cuidado. 21. Sistema de tipografia - escalas e estilos 01: O primeiro passo em seu sistema de design será a tipografia. Então, vamos selecionar tipografia e, em seguida, sua escala e categorias diferentes. Título, título um título, subtítulo, legenda, todas as categorias diferentes. Vamos definir isso em nosso sistema de design. Então, vamos começar e esse será o lugar onde você começar. Então, vamos criar um novo quadro. E vamos chamar esse quadro de Bob Murphy. Agora, vamos selecionar qualquer Typhoeus. Você tem que experimentar sobre isso. Há outra classe, minha classe, que é sobre direções de design, selecionando tipos de letra. Não vamos analisar como você selecionará esse tipo de letra. Agora, vou selecionar qualquer tipo de letra, vamos chamá-lo de portal. Texto. Base, o tamanho da fonte base será 18. Tente aumentar o zoom para que você possa ver corretamente. Então aqui temos textos de Roberto, e agora vou usar um plugin pressionando Control ou Command forward slash. E isso é chamado de escalas. Vamos ver qual delas é a escala é igual a escala de tipo. Este tipo é dimensionado. Aqui nós temos isso. E você pode ver que está me mostrando o valor da escala que é 1,25 e a altura da linha é 1,2. Vou defini-lo para 1.4. Seis escalas na direção para frente, ou tamanhos pequenos a maiores, maiores, tamanhos muito pequenos. Ok, então eu acho que preciso desses muitos, estes são bons. Vou clicar em Gerar. E aqui temos nossa escala agora. Você pode ver que ele criou uma escala muito boa. Vamos excluir isso. E vou excluir este e também vou usar essa biografia do quadro. Você pode ver isso me mostra que este é nosso valor base é 18, a escala é 1,25. E então esses são nossos tamanhos diferentes. Normalmente, vamos realmente nomeá-los corretamente porque isso não é o que precisamos. Então, esse será nosso título, título ou título, algo assim. Vamos chamá-lo de um. Vamos chamá-lo, vamos chamá-lo de H1. Se tivermos mais estilos, por exemplo, barra da área de trabalho, um, isso depende de você. Portanto, se você tiver duas ou três escalas diferentes para aplicativos de desktop e dispositivos móveis, escalas diferentes, essa é outra história. Agora mesmo. Você pode ver, sim, mantê-los. E eu vou fazer, o que vou fazer é vamos primeiro nomeá-los. Vamos chamá-lo. Agora mesmo. O que estou tentando fazer é que estou tentando nomeá-los corretamente. Vamos chamá-lo de subtítulo. Vamos chamar isso de um subtítulo. Subtítulo. Vamos chamá-lo de um subtítulo pequeno. Isso é chamado vamos chamá-lo de 4D. Vou mostrar por que estou nomeando essa legenda. Vamos chamá-lo sobre a linha. Esta será nossa legenda. 12 pixels é nosso texto de legenda e esta é a nossa linha. Então, vou mudar o estilo. Todas as lacunas. Lacunas. Este, todos os bonés como este. E também vou aumentar o espaçamento entre caracteres para ser 10%. Vamos usar 5% ou 1% Ok, então você pode ver que este é um texto on-line vou compartilhar com você por que estou fazendo isso. Aqui estão as diretrizes de interface humana da Apple, e você pode ver que elas têm esses estilos diferentes. Título grande, Título Um, 23 título, semi negrito, destaque corporal, subtítulo, legenda da nota de rodapé um e legenda também. Então, esta é na verdade a escala deles. Essas são categorias diferentes que serão implementadas no sistema de design da Apple. Se olharmos para o Material Design System, você pode ver que temos manchetes Headline One, 234566. Em seguida, temos duas legendas para o tamanho do corpo. Um deles é o corpo 116 pixels. Também vamos espaçar é mencionado 0.5. Aqui temos 14 pixels. O botão é um pouco maior. Pixels de proteína, peso médio , médio e legenda estão aqui. E então temos um sobrejacente. Overlying é basicamente deixe-me mostrar-lhe, na verdade. Ok, então você pode ver que é assim que ele está usando overline é na verdade a linha no topo de qualquer cabeçalho. Escolhemos talvez alguma categoria, algo assim. Manchete e corpo. Este é o corpo do texto. É assim que você aplicará seu sistema de design ou digitará escalas em seu sistema de design. Agora, vamos voltar para Figma. E agora vamos criar estilos de tipo aqui. Vou, estou segurando Control and Shift. Comande e Shift e clicando apenas nesses títulos ou impostos aqui. Não, eu selecionei todos eles. Vou executar outros estilos de tipo barra de plug-in, controle ou comando. Este é um plugin muito bom que é chamado de estilos de tipo. E você pode usar a família de fontes, tamanho da fonte, o que quiser usar. Por exemplo, vou usar a família de fontes no nome. Vamos usar o tamanho da fonte. E vamos usar. Acho que isso seria ótimo. Então, estou renomeando, nomeando-os. Vamos criar estilos de tipo e você pode ver seus problemas criados com nove tipos têxteis. Se eu selecionar aqui, você pode ver que é, ele criou o Roboto. E dentro de Roboto eu tenho todo esse têxtil. Deixe-me ver o que aconteceu aqui. Então, na verdade, o nome que sugerimos, sugerimos que o nome do tipo é. Clique aqui. Você pode ver se eu excluo tudo pressionando Excluir, posso recriá-los. Vamos tentar recriá-los. Estou segurando minha tecla de comando e shift ou tecla Control e Shift. Mais uma vez, vou executar os mesmos estilos de tipo de plug-in. Agora você pode clicar em Texto personalizado. Vamos chamá-los de estilos de tipo. Por aqui. Vou usar o tamanho da família de fontes. E clique em Make type size. Agora você pode ver que diz novamente nove vezes 10º ano. E se clicarmos aqui agora você pode ver que temos estilo de tipo e nisso temos Roboto. E esses são tamanhos de tipos diferentes. E você pode ver 140 é, na verdade, é altura da linha. 22. Sistema de tipografia - escalas e estilos 02: Esse será o primeiro passo para criar o tamanho do tipo. Então, uma vez que atualizamos o tamanho do nosso tipo, a próxima coisa é que também vamos criar outras coisas que podem mostrar o que está acontecendo. Então, esses são, na verdade, quadros. Em seguida, tente torná-lo um pouco maior. E por que esse layout automático neste quadro, tenho que remover o layout automático. Layout. Certo, então este é um quadro normal. Agora, deixe-me tentar adicionar algo aqui, que será nosso uso. Então, temos que mostrar aos nossos desenvolvedores ou outros designers que é assim que você vai usar isso. Digamos o parágrafo do cabeçalho. Aqui temos este. E se mudarmos para os ativos aqui, temos que usar esses estilos. Vamos tentar usar isso com o parágrafo. Mais uma vez, vamos replicar isso e vamos ter uma distância de 1828. Vamos usar 24. Em vez de usar 44, vamos usar 18, que é nosso parágrafo. Altere a cor deste parágrafo para um cinza um pouco mais escuro assim. Vamos usar outro lorem. Além disso. Vamos usar o parágrafo em inglês ou dois parágrafos. Aqui temos isso. Aplique o tecido, que é 18, mude a cor. Agora você pode ver nós, estamos mostrando a eles que este é o exemplo de uso de cabeçalho com um parágrafo. Então, também terá o espaçamento entre eles. Você tem que mostrar o espaçamento também que isso vai ser espaçamento. Essas serão as cores do cabeçalho e as cores do parágrafo que vamos criar na próxima lição. Agora estamos mais preocupados com isso. Então, também aqui, você também pode criar um link de texto aqui, se quiser. E sobre um parágrafo aqui com algum overline? Então, vamos criar esse feed overline ou textos aqui. Vamos chamá-lo de categoria overline, produto de categoria. Agora vamos selecionar sobre linha daqui. Ok, então isso era 14, na verdade. Nós o temos. Também vamos mostrar o espaçamento entre eles, que será oito. Opa. Então, neste momento, são nove. O que estou fazendo é segurar minha tecla Alt ou Option e clicar em um dos itens e também mudar para a Microsoft para outro. Ele mostra que está a oito pixels de distância. É assim que você vai mostrar a eles. Além disso, você pode usar alguma cor aqui, por exemplo, vamos tentar usar esse roxo. Roxo. Vamos tentar usar isso. Então é assim que você mostrará aos seus desenvolvedores e designers que isso é tudo o que você vai usar meu texto com sobreposição e títulos e é assim que os parágrafos serão. Você pode ver a altura da linha. Então, se você quiser alterar a altura da linha ou algo assim, você tem que entrar em seu clique em qualquer área vazia e você precisa entrar neste tecido e tentar alterar as configurações aqui. Por exemplo, aqui temos 8% e eu quero ter 10%. Agora você pode ver que ele tem 10% de espaçamento. Neste aqui neste estilo, é assim que você vai nomeá-los. Você também pode nomeá-los. Por exemplo, se eu tiver isso, posso clicar aqui. E em vez de ter 14, eu também posso usar isso é realmente sobreposto. Isso é legenda. Portanto, certifique-se de nomeá-los corretamente. Este é o nosso corpo. Isso foi vamos chamá-lo de subtítulo. Sim. Isso é subtítulo. Nomeie-os corretamente. Este é um grande título. Este é o título um. Vamos chamá-lo de título de um Cada para h3. Então você pode ver agora que os nomes são mais significativos e fáceis de lembrar. Então, é assim que seu arquivo de texto será. Vou compartilhar com vocês meu projeto. Deixe-me mostrar o que eu fiz neste têxtil aqui. Aqui eu tenho a escala de tipo. Você pode ver aqui Eu tenho o título Escala de Tipo 123. Não estou mostrando os tamanhos aqui porque eles estão dentro deste texto. Tenho textos diferentes para desktop mobile, board, três ou quatro links diferentes de tratamentos de texto em negrito. E você pode ver aqui que temos estilos de cores. Se você olhar aqui, você pode ver que estou mostrando meu tratamento fiscal em ambos os fundos, escuros e mais claros. Deixe-me mostrar-lhe. Então aqui temos os componentes dos textos. Então você pode ver aqui estão os textos com o cabeçalho e, em seguida, temos o corpo do texto, então temos um botão. Na verdade, estou mostrando que é assim que você vai tratar seus textos. Da mesma forma, você pode ver se você vê aqui este é um item de lista com algum parágrafo. Também está mostrando as distâncias entre eles. Este é novamente um grande título. Então você pode ver se eu clico nisso, você pode ver que está na rubrica 75. Então é assim que eu realmente os nomeio. Então é assim que eu realmente os nomeio como cabeçalho da barra de texto da barra da área de trabalho. E ele está sendo exibido para diferentes títulos. Então, novamente, o cabeçalho da barra móvel de barra de texto. Por que estou mostrando isso, porque você precisa saber que há muitas maneiras de nomeá-los corretamente. Então eu posso guiá-lo como você pode começar a construir seu sistema de design. O descanso depende de você como você realmente seleciona a fase TI. Tipo de letra diferente para cabeçalho, fonte diferente para o corpo do texto. Você pode ver que estou ao invés usar o corpo, estou usando o parágrafo. Você pode ver que este é o parágrafo da área de trabalho 14182430. Então, na verdade, isso era para um projeto de web design. Então eu não usei legendas ou etiquetas pequenas são notas de rodapé ou algo assim. Então, estou usando esses quatro tamanhos. Certifique-se de que sempre que você estiver construindo seu sistema de design, você também está mostrando o uso do tipo. Você pode ver aqui no uso do tipo de canto. Isso é muito importante como seus desenvolvedores saberão que como usar esse componente são, ou como espaçar as coisas, como usar esses parágrafos. Você também pode, o que você também pode fazer é, por exemplo, esse todo esse parágrafo com seu cabeçalho, você pode criar um componente. E você pode ver aqui que este é um componente. Então, sempre que eu quiser, posso tentar arrastar meu componente para fora dele. Então aqui temos texto do componente. Aqui temos textos componentes. Então eu posso arrastá-lo e soltá-lo em qualquer lugar. E ele criará um texto componente aqui. Estas são, você pode dizer as chaves da criação de um sistema de design. Você cria escalas de tipo, seleciona sua fonte base. Você cria escalas de tipo e, em seguida, cria tipos de estilos. Em seguida, você cria componentes usando esses estilos de tipo, usando seu cabeçalho e seu parágrafo e compartilhou com seus desenvolvedores. E eles vão simplesmente arrastá-lo e soltá-lo. E todos os outros designers e eles vão usá-lo em seu sistema de design. Isso é tudo sobre escalas de texto e tipo, toque em estilos de texto. Vejo você em breve na próxima lição, onde vamos discutir sobre cores. 23. Escalas e estilos de cores no Sistema de Design de Design 01: Bem-vindo a outro vídeo sobre o sistema de design. Hoje vamos lidar com nossas cores. Vamos gerar cores, escalas. Então vamos dar aos propósitos tardios duas cores diferentes que essa cor é para esse fim. Essa cor é para esse propósito porque se formos criar escalas, podemos ter cores 4050. Mas não vamos usar todos eles. Vamos usar talvez algumas curvas seletivas de dez ou 12. Temos que especificar que essa cor é para esse propósito específico. Então, vamos começar e ver o que podemos fazer. Agora você pode ver que eu tenho aqui, vamos ampliar. Esta será minha paleta de cores inicial. E eu realmente usei uma ferramenta web de servidor web, que é chamada essa, coolers dot CEO. E eu uso Gerar e criei o esquema de cores daqui. A primeira cor, que foi uma roxa que eu selecionei e as outras são realmente suportando cores que você pode gerar aqui. Só preciso, por exemplo, se você quiser bloquear este, por exemplo, isso, vamos supor que esta seja minha cor primária. Se eu pressionar a barra de espaço, você pode ver que ela gerará cores diferentes relacionadas a esta. Talvez eu queira usar roxo com algum Sian, o que é uma combinação muito boa. Também verde. Vou trancá-los, vou girar os outros. Vamos usar um escuro 12. E vamos usar este. Então é assim que crio um esquema de cores e o exporto como um SVG para começar a construir meu design. Então, aqui temos cores muito nítidas. Aqui temos como 12345 cores, cinco cores, e uma será nossos negros, uma será nossa cor primária, uma será nossa cor secundária. Então, vamos começar com este. Aqui temos isso. Desagrupe isso e vamos excluí-los. Esta será minha cor principal. Este será minha cor secundária. Você viu isso nos botões. Deixe-me mostrar-lhe. Se eu for aqui, você pode ver que esta é a nossa cor primária, esta é roxa e esta é a ação secundária explorar. Esta é uma segunda ação secundária. E estamos usando isso. Você pode ver que esta é a nossa cor terciária quando temos um campo ativo, você pode ver que temos um tipo azul muito azulado, azulado e esverdeado de cor espanhola espanhola clara aqui. Então, vamos voltar ao guia de estilo. Então, este é o nosso, na verdade, ele aciona ou vamos dizer. Também podemos chamá-lo de cor ativa. Este será nosso preto. Vamos mantê-lo aqui assim. Esta é a nossa, esta é novamente, nossa cor suplementar. Vamos usá-lo em algum lugar em algum lugar que não vamos usá-lo. Fora isso, talvez precisemos de uma cor vermelha. Para adders. Talvez. Vamos tentar replicar este porque nosso status, as cores de status são realmente chamadas de cores semânticas. Carros semânticos mostrarão os estéricos de diferentes objetos, elementos diferentes. Então, vamos tentar passar para este azulado. Vermelho. A saturação é demais. Vamos aproximá-lo. A saturação é demais, então vou reduzir a saturação. Então, aqui está uma saturação no meio. Vamos tentar dois, torná-lo menos saturado e vamos tentar aumentar ou diminuir seu brilho. Matiz. Eu novamente queria ser um pouco mais vermelho. Este parece bom. Vamos tentar. 99 matiz. O brilho seria 7490. Essa será minha cor para meu status. Então, vamos expandir essa prancheta. Tenha cores. Vamos tentar expandi-lo para dois. Agora vamos reduzir o tamanho deste também. Vamos selecionar todos eles. Selecione todos eles. Vamos torná-lo um 100 por um 100, assim. Nós vamos organizá-lo assim. Primeiro, queremos o propósito da cor. Então, vamos chamá-lo. Este será o texto do seguidor colorido. Então, esses serão nossos textos em preto. Então, vamos nomear aqui. Cores de texto. Talvez sejam apenas cores pretas. Isso é muito pequeno. Vou usá-lo aqui, 18 ou aqui. E vou usar o Roboto. Talvez você também possa trazer isso aqui. Esta é a caixa de informações. Vou replicá-lo ou bater. Seria mais fácil para mim. Você sabe, use tudo. Vamos movê-los para baixo. Vamos fazer isso assim. Aqui temos nossas escalas de cores, então você precisa renomeá-las. Vou pular isso. Temos nosso esquema de cores. Agora precisamos criar algumas habilidades. Então, para isso, vamos usar um controle ou comando de plugins, barra direta, escalas de cores, gerador de escala de cores. Então, vou usar, existem muitos plugins. Tenho um vídeo completo sobre como criá-los. Neste momento, eu selecionei este verde. Então, se eu clicar em, vou selecionar, Vamos selecionar etapas densas e clicar em Criar. Vou criar todo esse esquema de cores. Você pode ver aqui, isso é o que temos aqui. Da mesma forma, vamos repetir os mesmos passos para todos esses. Vou pular isso porque isso tornará o vídeo muito longo. Agora você pode ver que geramos nosso esquema de cores. Você pode ver que essas são nossas escalas de cores. Eles estão realmente ótimos. Se você quiser ter uma cor neutra, você pode ter algo aqui com o preto, talvez alguma cor verde clara ou talvez alguma luz na cor azulada opaca que depende de você. Agora vou usar esses pretos para meu preto e branco para minhas cores DAX. E essa será a nossa principal cor de ação primária. Esta é, na verdade, nossa cor de ação secundária. E não vamos usar todos eles. Então, vamos selecionar as cores que serão usadas aqui. Então talvez se você quiser, você pode expandir isso ou você pode usar algo, o espaço aqui, vamos tentar dois. Vamos verificar nosso aplicativo agora. Então esta é a nossa cor primária, que é 775 CFF 77, que é, eu acho que esta, esta é na verdade nossa cor primária. Esta é a cor do botão de ação. Então talvez possamos fazer muitas coisas como talvez possamos adicionar um golpe em torno dele como cinco. Essa será a nossa cor de ação principal. Então nossa cor secundária era 79 ingressos FEC 47979 47979. Vamos tentar trazê-lo aqui. Então, queremos ver se isso vai ser temido. Na verdade, ele combina. Acho que está muito perto deste. Esta cor aqui dois, fc 98. Vamos ampliar. Acho que está mais perto deste. Este será a nossa cor. Vamos adicionar um traço de cinco aqui. Então essa é a nossa cor. Você pode destacar as cores que você acha que esta será a nossa cor principal para o mesmo propósito, cores primárias e secundárias, então temos maior que o preto. Então, vamos tentar qual é a cor de fundo 1 sexto, 1 sexto, 1 sexto. Então eu acho que isso está mais próximo deste. Talvez eu pense que está mais perto deste. Então, vamos tentar ver se a cor de fundo é uma e. Vamos tentar abri-la. Está no azul, 209 a 516. A tonalidade é 209. Então, vamos tentar ver 209. Qual é a tonalidade para este 1188? Isso é 250. Talvez o que precisamos para corrigir isso, vamos usar essa cor, talvez essa cor, ou talvez possamos usar essa cor, esta. Vamos tentar criar mais escala de cores para esse tom mais escuro. Ou talvez vamos usar vermelho. Replique isso aqui. Vamos mover o controle deslizante para aqui. Vou usar essa cor para o plano de fundo. Mova-os. Então, essa será a nossa cor de fundo. Vamos destacá-lo com um traço de cor branca. Vamos usar vermelho aqui porque não podemos vê-lo assim. Talvez se você quiser, você pode nomeá-los corretamente. Então, vamos tentar mover isso agora. Vamos tentar remover. Você pode ver que você está aqui, isso é novamente um 100, isso é novamente um 100. Queremos chamá-lo. Vamos chamá-lo de 1 décimo. Precisamos nomeá-los corretamente. Então, vamos selecionar todos eles. Vou te mostrar como renomeá-los. Então Control ou Command R. Então, vamos renomeá-los, fazer barra primária para usar, vamos chamá-lo de roxo. E então vamos usar um número como este. Você pode usar algo assim. Nele, você também pode tentar usar o padrão numérico como adicionar um 0 no final, assim, depois 20, e vamos pressionar a renomeação. É assim que você vai renomeá-los. As cores primárias cortam roxo, roxo, roxo, roxo. Então, é assim que vai ser. Vamos tentar desagrupá-los e selecionar todos eles. Então é assim que você vai renomeá-los, e é assim que você criará estilos de cores a partir deles. Então eu vou usar também, você pode fazer mais uma coisa. Então, vamos tentar mostrar-lhe Venha em nosso nome atual. Antes disso, vamos usar cores cortando cores primárias. Então, isso vai ser mais, melhor. Em seguida, rênio eles como essas cores cortam as cores primárias cortam a cor que você tem. Da mesma forma, vamos desagrupá-los e vamos selecionar todos eles. E novamente, vamos renomeá-los para Fellows. Slash, barra de cores secundária. Próxima qualidade, verde afiado. Verde. Então, vamos usar um número. número será no final, adicionaremos 03, remova este n, renomeie. É assim que vamos renomeá-los e depois selecionaremos todos eles. Nós vamos executar outro plugin chamado Schuyler ruim, eu acho. Vamos tentar executá-lo. Opa. Temos que pensar que havia uma opção para criar vários estilos. Houve este gerado. Ok, então este é o plugins que Tyler gera estilos. Clique nisso. E vai gerar todos os estilos, 21 estilos. E você pode ver aqui, se formos aqui, vamos excluir tudo isso. Você pode ver que vou excluir os anteriores. O azul primário também será excluído. Vamos excluir todos os têxteis aqui. Estilo de cor, e você pode ver aqui temos cores e dentro temos cor primária. Então temos nossa cor secundária assim. Você pode ver que podemos aplicar todos esses assim. É assim que você criará suas cores primárias, secundárias e todas essas cores. Então, vou fazer o mesmo com os outros. Então, vamos pular isso. 24. Escalas e estilos de cores no Sistema de Design 02: Agora você pode ver que criamos todas as cores, estilos e tudo mais. E você pode ver aqui nossas cores estão bem feitas. As cores primárias serão essas. Cores secundárias ou essa escala. Então temos negros. Estes são nossos negros e brancos. Então temos cor semântica. Estes são azuis semânticos, vermelho e verde. Estes serão nossos estudiosos de status de cores semânticas. Isso é tudo o que você precisa criar, todo o seu esquema de cores, estilo de cores, tudo aqui. E o próximo passo é que você tem que mostrar o propósito. Você precisa selecionar cores diferentes que serão para o propósito dessas cores. Então, vamos tentar expandi-lo assim. Vamos tentar primeiro selecioná-los e escalar o quadro de arte. Vamos chamá-lo de esquerda. E normalmente não precisa expandir isso. Novamente, este também está escalando. Vamos chamá-lo de cima esquerdo. Tudo isso também para a esquerda e o topo, estamos realmente restringindo-os para que eles não sejam dimensionados com nossa expansão desta caixa. Nós criamos isso. Então, vamos tentar dar o propósito às nossas cores. Essa cor era, na verdade, essa cor era para o plano de fundo. E acho que essa cor estava seguindo nossa ação principal. Essa cor era nosso botão secundário. Vamos escrever tudo isso. Vamos selecionar isso. Copie aqui. Assim. Coroa. E vamos usar um gráfico de escala um pouco menor, este 24. Opa, temos que usar 24 tipos de tamanho. Essa será a nossa cor de fundo. Assim. É assim que você mostra o propósito. Então vamos mostrar que essa será nossa ação principal. Não é possível ver qual é a distância entre eles. Essa será nossa segunda reação. Definimos o propósito. Você também pode alinhá-lo aqui assim. Da mesma forma para negros, temos que ver onde usamos, por exemplo, este é para planos de fundo, para os campos de texto. E este foi para o fundo de, já fizemos isso. É isso que vamos procurar. Este será o nosso passado. Acho que foi algo mais próximo. Vamos tentar pegar isso aqui. C e cole-o aqui para ver qual cor está realmente combinando. É muito próximo deste. Essa é a cor. Então, temos que replicar. Ele, controla a arte pressionando Alt. Vamos replicá-lo. E vamos usar o mesmo aqui. Vamos chamá-lo de cor de fundo. E vamos ver se temos mais. Isso também é, acho que a mesma cor. mesmo que foi usado aqui. mesma cor. Este é diferente. 353344, e está nesta tonalidade roxa. Vamos definir tudo isso. Este é o nosso plano de fundo de entrada. E isso também foi quatro. Este é, na verdade, o primeiro, vamos chamá-lo de fundo dabs. Isso também é para o plano de fundo das guias. É assim que vamos gerar tokens diferentes. Portanto, esse é o propósito e o token. Temos que usar essas cores. Então, se revertermos a equipe, então vamos reverter esses tokens. Certifique-se de que você tenha especificado que essa é a regra que essa cor está sendo reproduzida. Você teve a ideia. E depois temos. Algumas cores semânticas. Então, vamos ver, acho que foi este ou este. Vamos usar este. Opa, não são opcionais aqui. Esta é nossa entrada ativa ou ativa. Isso está realmente mostrando que essa é uma entrada ativa. Agora temos que, tínhamos outro. Vamos replicá-lo aqui e tentar mudar a cor. Acho que usamos algo assim ou aqui, deixe-me mostrar-lhe. Então aqui temos outro pilar que é de cor esverdeada pontilhada. Acho que foi este. Vou pegar essa cor. Vamos excluir este. Assim. Esta é a nossa porcentagem ou barra de progresso. Também podemos chamá-lo de progresso. Plano de fundo. Não é mais cor que perdemos. Aqui. Temos analíticos, que é verde azulado, tipo de. Não tenho certeza de qual cor é essa. Vamos tentar trazer essa cor. Acho que o usamos em alguns lugares. Este, acho que esta é a cor. Esta é outra cor que usamos aqui. Então, vamos pegá-lo. Essa cor está realmente progredindo. Vamos chamá-lo de progresso, cor escura, progresso. Esta será nossa barra de progresso para os erros. Acho que vamos tentar ver se alguma cor aqui se aplica. Vamos tentar usar a borda aqui. Trace e tente selecionar a cor daqui. Vamos ver qual deles vai combinar. Este parece bom, leia 50. Então, vamos usar isso. Opa. Vamos voltar ao nosso guia de estilo. Leia 50 é este. Este parece ótimo em um somador. Vamos usar essa argamassa. Temos que usar o mercado de entrada, ok? É assim que apenas combinamos as distâncias. É assim que vamos definir todos os propósitos. Então acho que nosso esquema de cores está pronto. Uma coisa que perdemos é, na verdade, nossa cor de texto. Portanto, essa é a nossa cor de texto, que é Criar conta. Esta é, na verdade, essa cor arroxeada. Então, essa é realmente essa cor. Esta é a nossa cor de texto. Então, vamos movê-lo para cá. E você também pode criar uma seção separada ou aqui para cores de textos. Vamos pegar isso. Mova isso um pouco mais baixo. Assim. Vamos movê-lo para cá. Vamos chamá-lo de texto. Esta é a cor do texto do nosso parágrafo. Este é um cabeçalho, cabeçalho. cabeçalho vai, porque sabemos que isso é texto. Temos uma cor, cor de texto aqui. E vamos tentar descobrir que silenciamos a cor do texto aqui, o que é um pouco aborrecido de cor acinzentada aqui. Além disso, este texto de entrada, é da mesma cor. Então, vamos tentar aproximá-lo e ver de qual cor ele vai combinar. Acho que vai combinar em algum lugar aqui. Acho que essa cor, ou talvez essa, isso vai funcionar melhor. Então, vamos tentar criar um retângulo aqui assim e aplicar essa cor aqui. Acho que está mais perto desta, dessa cor que vamos usar para o texto silenciado. Vamos pegar essa cor. Vamos usá-lo aqui para texto silenciado. Texto, silenciado. Ok, então aqui temos duas cores de textos. Um deles é o título ou a nossa cor principal. Vamos ver se usamos mais uma cor. Então, isso é o mesmo. Temos mais uma cor que está em foco, que é um pouco mais escura, onde temos apenas uma pequena seção de informações. Então, vamos tentar usar isso aqui. São textos silenciados, que era BW 50. Vamos tentar 60, BW 64. Os outros textos para o texto informativo, pequenos em texto completo. Agora você pode ver que temos todas as seções preparadas. Temos diferentes cores primárias e secundárias. Então temos nossas cores de textos ou cores de textos. Você pode torná-los alinhados corretamente. Ou Triumph, agora esta palestra já é muito longa. Então aqui temos guias de fundo de entrada, cor. Então temos nossas cores de status, diferentes cores semânticas. Como você pode ver, estamos usando quase 1234567891011 cores aqui. Eu acho. As cores Dental 15 vão construir todo o seu sistema de design que será usado. Outras cores são apenas para suporte. Talvez precisemos de uma nova cor em algum lugar, então talvez precisemos usar isso. Então, isso é tudo sobre como você vai usar suas cores e tudo e criar todo o seu sistema de cores em seu sistema de design. Então, vou me certificar de que você aprenda, vou compartilhar esse link de arquivo com você para que você possa ver o que eu fiz. encontraremos em outra lição até então, tome cuidado. Adeus. 25. Componentes do botão e Ícones Sistema 01: Antes de começarmos com componentes maiores e construir componentes um pouco maiores, vamos começar com os menores. Vamos criar botões diferentes, chips diferentes, texto pequeno diferente de informações de texto, coisas assim. Vamos nos aprofundar nessa seção de botões e vamos criar botões com layout automático e variância diferente. Vamos começar. Agora você pode ver o que aqui temos esse botão, acabamos de criar uma conta. Há outro estilo que é o botão fantasma. Esses são dois estilos, o mesmo botão. Então temos esse problema. Este é um botão de destaque conhecido não rolado. Este botão é um pouco diferente. Então temos este botão Explorar, verde que são quatro cursos menores diferentes. Então temos essa navegação superior. A navegação terá um estado ativo e um estado normal. Este é outro. Eu acho que esses são todos também este. Este também é um botão suspenso. Vamos criar isso. E então temos isso. Esta também é uma barra de progresso, barra. Não vamos usar o layout automático para este, porque isso tem três elementos. Mas vamos criar um componente a partir que possamos atualizá-lo facilmente e renomeá-lo e alterar sua textura será atingida. Acho que é isso. Então, primeiro vamos usar os botões. Então, neste momento, temos nossas páginas para projetar o sistema. Este é outro quadro e eu chamo o botão. Primeiro, vamos ver que esse botão é realmente 327 por 48 pixels. Vamos tentar replicar isso em nosso sistema de design. Você também pode comandar C ou copiar, copiar o Comando V ou o Controle V para criar uma cópia deste. E agora vamos selecionar esses botões e pressionar D e tudo o que vamos usar. Certifique-se de ter selecionado esta topografia BD e textual aqui. Neste momento, isso está selecionado e é isso que vamos usar. Vamos pressionar Shift e Shift a para adicionar o layout automático a este. E a primeira coisa que vamos fazer é adicionar um pouco de preenchimento aqui também. Vamos adicionar 16 e o top 16 na parte inferior. Vou adicionar 58 ou 57,5. Vamos chamá-lo assim. 57,5 aqui. Talvez vamos chamá-lo de 5757. Esta é a nossa estrutura principal e vou te dizer por que eu adicionei 5757 antes. Deixe-me dizer-lhe qual será o problema, na verdade, vamos adicionar um pilar livre. Então, vamos usar uma cor de preenchimento, que é esta, roxa 50. Então, roxo 50 é a cor que é muito próxima da nossa cor real. Vamos adicionar oito pixels de redondeza e abrir isso. E vamos usar suavização de cantos. Este é o nosso layout real de um botão. Mas agora não é igual ao tamanho 327. Temos que consertá-lo porque vamos usar o mesmo tamanho para todos os botões. Agora vamos selecionar essa camada de texto dentro desse quadro, e temos que torná-la largura fixa. Vamos torná-lo maior. Porque, por exemplo, se eu adicionar texto, ele não deve se expandir. Vou usar como 200 e vamos usar a largura de altura de 212. E agora, se eu arrastá-lo para mais perto disso, então você pode ver que é 27 é 326, então ele está a um pixels de distância. Então eu acho que isso vai fazer para o texto aqui, estou usando essa cor branca, então eu adicionei isso às minhas cores. Estilos. Selecione, selecionando aqui. Agora, nós replicamos isso, então vamos excluir isso. E este é o nosso botão. Vamos chamá-lo btn notch. Temos ampliação 3D, e agora vamos criar um componente a partir dele Control Alt K ou Command Option K. Então, fomos compactados isso. Então você pode ver que temos esse botão grande. Criamos nosso botão com sucesso. E se eu tentar alterar seu conteúdo como login, ele funciona. Não está mudando seu Smith. É disso que precisamos. Agora, seguindo em frente, vamos criar alguma variação, pelo menos três variâncias. Então, antes disso, vamos clicar neste componente inteiro e tentar definir a propriedade. Por exemplo, vamos definir a propriedade do estilo do botão. Esse padrão será o botão normal. E este será nosso estilo de custo. Agora vamos mudar nosso estilo que vamos clicar nesta costa e remover essa cor de preenchimento e um traço, que será essa cor ou foi mais leve que 50. Então, vamos usar esse 40 aqui. É assim que esses dois botões estão realmente indo. Essa cor está vindo aqui. Veja, acho que selecionamos as cores da nossa paleta de cores, que criamos estilos de cores. Então é assim que criamos o segundo. E agora vamos adicionar outra variante. Vamos clicar aqui, adicionar outra variante. E isso seria chamado de desativado. Então, agora, vamos mudar a cor dessa para esta talvez. Sim. E para a cor branca, vamos usar um pouco de cor acinzentada aqui. Então, isso vai ser desativado. Então, para esses 3 terceiro estilo de botão, vamos ter desativado ou aqui, esta declaração. Na verdade, temos três estilos de botões, este é o nosso lote PDN e desativado, fantasma e normal. Portanto, esses são três botões, ou você também pode chamá-lo falha e o normal falhou ou o que quer que seja. Cabe a você. Vou chamá-lo de normal agora. Este é um conjunto de botões que criamos. Agora vamos criar outros botões também. Por exemplo, temos este. Este, este. Deixe-me mostrar que este também é criado usando o quadro. Precisamos não nos preocupar com a forma de criá-lo. Então deixe-me mostrar as configurações aqui. Então, ajuda superior, inferior, direita e esquerda dez. Então, vamos recriá-lo se você quiser copiá-lo. E vamos criar outro conjunto de botões aqui. Opa. Vamos recriá-lo. É isso? Vamos copiar isso. Copie este quadro. Vou colá-lo aqui. Aqui temos esse quadro. Aqui, temos esse quadro. Agora vamos chamá-lo de item de traço de ponto. Certifique-se de nomeá-los corretamente. Isso é muito, muito importante. Não queremos que ela tenha largura fixa. Então, ele vai flutuar com o texto. Se eu tentar mudá-lo, é dextro aqui, por exemplo. educação empresarial e comunitária deve se expandir. Não precisamos nos preocupar com o aspecto da largura fixa aqui. Isso vai ser assim. Vamos criar um componente aqui assim. E este é o nosso principal item de navegação. E vamos criar dois vídeos para este. Por quê? Porque alguém precisa clicar nele. Um deles será, vamos selecionar a propriedade. Aqui. Vai ser dirigido e um será 40 será basicamente ativo. Você pode chamá-lo de falso, vamos chamá-lo de falso. Este será nosso estado verdadeiro ou ativo. Este é realmente um estágio ativo, então vamos tentar mudar sua cor desta também. Isso usará pontos em preto e branco e seguirá a cor do texto. Vou usar o reverso. Então, vou usar este. Preto e branco VW nove. É assim que esses dois devem parecer. Um está ativo e outro está inativo, ou você também pode chamá-lo de falso e verdadeiro. Então, acho que ativo ou inativo faz mais sentido. Não quero confundir meus desenvolvedores. Portanto, esse estado estará ativo. Este vai ficar inativo. Este, isso faz mais sentido. Criamos isso com sucesso. E agora podemos, vamos criar mais ou aqui. Aqui temos este botão Inscrever-se. Vamos copiá-lo e colá-lo aqui porque precisamos replicar suas configurações. Então, é 48152. Isso é, na verdade, 50 soma. Vamos usar 50 agora. Isso também será corrigido. Acho que vamos usar o Inscrever-se agora. Este é o texto vértices será corrigido 152. Então, novamente, vamos usar a mesma técnica que usamos aqui, largura fixa. Vamos usar o Inscrito. Agora. Shift a. O layout automático foi adicionado oito pixels ou suavização de cantos que vamos adicionar, vamos adicionar cor de preenchimento, que será a mesma, que usamos este ou 50. Esta é a nossa principal cor primária. Este, vamos usar branco. Agora. Vamos adicionar um pouco de preenchimento aqui. Então, a parte inferior superior será 1515. O uso 4040 estava aqui. Gostaria de ver quantos tamanhos. 38. Certo, então primeiro vamos selecionar este texto aqui. Em vez de usar isso, isso aqui, vamos usar largura fixa, largura fixa e vou tentar expandi-lo assim. Talvez possamos mudar o texto um pouco, talvez alterá-lo para outra coisa. Então, vou ter algum preenchimento em torno dele. Então, vamos chamá-lo de 100. Acho que este funcionará. Agora vamos adicionar, alterar o preenchimento aqui. Vamos usar 3030. Acho que 2424. Agora estamos em 148 com este é 152, então precisamos de mais dois em ambos os lados. 4626. Replicamos esse botão usando o layout automático. Além disso, podemos mudá-lo para outra coisa, talvez agora. Ok, então este também está entrando nesta seção ou área. Isso é ótimo. Isso é ótimo. Vamos excluir o outro. Aqui temos nosso e btn e regra. Mais uma vez, vamos replicar a mesma coisa. Vamos ter mais um estado que é comprado. Se você já comprou as metas, elas aparecerão no turno do peito a menos z. Então, agora, vamos convertê-las em componente. E agora vamos adicionar uma variante. Então, vamos clicar na variante e agora será o estado do botão. Este é o stick padrão um é padrão, um será, Vamos chamá-lo de comprado. Este vai ser, vamos mantê-lo assim. Padrão em compras. Comprado vai ter comprado diferente ou aqui, a cor também seria diferente. Então, vamos tentar usar alguma cor daqui. Vamos tentar verde, algo verde aqui assim. Talvez algo assim. Temos que testá-lo nesse plano de fundo. Na verdade. Vou escolher este, verde 70. Acho que isso ficaria ótimo. Além disso, essa cor do texto não deve ser branca. Vou usar a demonstração verde aqui, ou talvez uma abundância verde. Assim. Isso vai ser duas etapas. Vamos testá-lo. Podemos mudá-lo de rastejar. Se tentarmos ver que a cor de fundo não está em loop, certo? Temos três conjuntos de botões. Você pode ver que este está realmente desativado, mas este é realmente um estado diferente. Isso mostra que já foi comprado. Então nós deixamos Você colocá-lo aqui e fichas aqui. Mais um chip que temos, acho que onde estava este? Este é apenas um chip de informação. Ele vai se expandir ou experimentar. Não precisamos nos preocupar com seu tamanho. Então este, este, eu vou precisar realmente deste, este, este é realmente este suspensa. Então eu acho, acho que já fizemos isso usando esse layout automático. Então vou mostrar, compartilhar com vocês minha técnica, como usei isso com o ícone. Você pode ver esse ícone. Ok, então antes de passar para este, você precisa criar um documento onde todos os ícones estariam. Vamos adicionar ícones a partir daí. Então deixe-me compartilhar rapidamente com você como você vai fazer isso. Vamos bloquear essa camada de fundo na verdade, não deve ser movida acidentalmente. Esse ícone, na verdade será um componente antes de adicioná-lo aqui. Então você precisa criar um componente. Vamos chamar ícones. O que usamos é, na verdade, usamos fósforos, ícones. Você também pode escrever aqui que você usou ícones de fósforo. Usamos uma barra de ícones traseira e tudo isso. Então, esses ícones você precisa adicionar aqui. Então clique em clicar nele. Por exemplo, talvez precisemos deles no vídeo. Setas. Uma flecha foi usada, esta que eu usei. Então, continuo adicionando isso. seta para baixo é realmente obtê-lo. Então eu fui buscá-lo, este, eu usei este. Você pode ver que você pode adicionar todos esses ícones que você precisa. Então, vamos usar o play. Talvez precisemos de exibição, exibição ou exibição. Então continue adicionando todos os ícones que você pode precisar aqui. Porque acho que usei este. Adicionamos todos os ícones, então vou mostrar o que realmente precisamos fazer. Portanto, esse plano de fundo deve ser, Somos todos esses ícones, estes foram adicionados em outro lugar fora disso. Vou trazê-los todos de volta. Selecionando todos esses e arrastando-os para ícones. Aqui. Temos todos os ícones, então vamos usar a cor de preenchimento para ser este. Opa, não assim. Então, você pode usar a cor de preenchimento, se quiser. Tente organizá-los. Vou mantê-lo assim. E selecione todos esses. Distribua o espaçamento horizontal. Vou mantê-los assim. Então, uma coisa é que você tem que manter o tamanho de 24 milhões. Então você pode ver que foi 3232. Você pode precisar de 3232 pixels ou talvez precise de 2424. Este está realmente usando, foi usado como 24. Então, vou reduzir seu tamanho para 24. Isso é o que estamos usando. Então, vamos ver se o vetor em torno dele é 24. Ok, então este tem que é 24. Vamos ver o que os outros teriam aqui. Então, vou usar a cor para ser esta. E para o fundo vetorial, vou remover essa cor porque esse fundo vetorial é apenas para o limite desse ícone. Você tem que fazer o mesmo para todos esses ícones. E o próximo passo seria que você precisa criar um componente. Vamos chamá-lo de barra de ícones. Eu entendo. Mantenha-o assim porque já temos esse ícone aqui, todo esse trabalho carregado, crie ícones como este. Então deixe-me ver se temos essa seta para trás. Também é 24. Deixe-me ver se este, este também é 24. Então, todo o nosso ícone que está baixando as configurações. Esses são todos 24 pixels. Além disso, você tem que usar esses ícones para, estes também são, eu não tenho certeza, muito difícil isso, mas eu tenho que procurá-los. De qualquer forma. No seu sistema de design, em seus ícones, todos são 24, então vamos redimensioná-los para 24. Selecione todos eles. 24. Estes são todos conhecidos, fixos. Temos que mudar a cor em seguida. Vou pular isso. 26. Componentes do botão e Ícones Sistema 02: Temos todos os nossos ícones, para que você também possa, o que você também pode fazer este já foi criado em componente. Selecione todos eles. Clique aqui, crie vários componentes. Isso, esses serão componentes. Mantenha-os assim. Além disso, acho que precisamos de uma toupeira, que era configurações. Acho que as configurações. Acho que este, talvez este, não me lembro, mas vamos usar este aqui. Vou usar isso. Vamos usar 24 aqui. Assim. Faça a mesma coisa. Selecione todos eles, altere a cor e crie um componente como esse. Crie todos esses ícones assim antes de adicioná-los aos seus botões. Temos esse ícone aqui. Aconteceu. Em vez de adicionar transferido aqui, o que estamos tentando fazer é usar realmente Command ou Control D para criar uma instância, e vamos arrastar essa instância para o nosso componente. Você pode ver que eu arrastei e deixei cair aqui assim. Você pode ver que isso é realmente o que eu criei. Este é o anterior. Isso é o que estou usando. Portanto, é muito fácil criar uma ferramenta de texto de tipo aqui chamada de um ano para 221. Mude a para criar isso. E você sabe, a broca, vamos ter um pouco mais de espaço. E isso seria no meio porque talvez precisemos mudar aquele ano ou algo assim, talvez mudar o texto. Então, aqui temos isso. Deixe-me dobrar. Agora vamos fazer, o que vamos fazer é adicionar um preenchimento. Opa, nós já acabamos companheiros aqui. Para este quadro, precisamos adicionar um preenchimento. Na verdade, o preenchimento será essa cor roxa que estamos usando. Opa, não este. Este para usar nossos padrões. E essa parte superior e inferior seriam, vamos usar oito aqui. Isso está ótimo. Eu acho. Vamos tentar adicionar isso assim. Basta arrastar e soltar e você tem que mudar , você tem que alterar o espaçamento. Eu consertei o botão, então a configuração estava aqui. Então esse movimento, na verdade, era assim. Então você tem que estar no meio assim para criar esse tipo de botão. Porque temos dois elementos, então temos que fazer o layout automático, corrigi-los. Então postar é que eu realmente reduzo a distância entre eles para que você possa aumentá-la se quiser. Estou mantendo-o em quatro pixels. Para a parte superior e inferior, 66810. No oito preenchimento direito é porque temos esse ícone aqui. Não deve parecer muito grande à direita. Assim. Está parecendo bom. Você pode usar sete ou seis se quiser. Seis também parece ótimo. Então, 10666, assim. E aqui temos nosso botão para que você possa ver a orelha está na parte inferior, carregada para baixo está na parte superior, então estará à direita. Certifique-se de clicar neste quadro. Então, vamos renomeá-lo para o menu suspenso. E essa é a configuração de layout automático desta lista suspensa. Então clique neste menu suspenso e temos para este, e para isso misto estamos realmente usando o arranjo aqui. Então, isso realmente vai corrigir esse texto movendo para cima e para baixo. Então você pode ver que isso é um problema. Certifique-se de que ele esteja no centro ou à esquerda. Cabe a você. Acho que centrado Parece ótimo para mim. É assim que vou criar esse projeto de lei. Agora vou excluir isso e criar um componente a partir dele. Então, criando um componente. E se você quiser criar uma ação suspensa ou talvez seleção ou algo assim, cabe a você. Como seco agora vou mantê-lo assim. Portanto, não há estado para este. Este vai ser meu menu suspenso. Acho que o manteria aqui. Agora vamos criar isso, isso , isso já foi criado. Nada pronto é difícil. Este é realmente o próximo outono com força total em chip completo, núcleos de chip e quatro, cabe a você. Na verdade, isso está usando as cores do, vamos tentar usar as cores daqui. Este cinza parece ótimo, e teremos a cor do traçado para ser esta tela. Acho que isso parece ótimo. Já está ótimo. Este aqui. Certifique-se de escolher as cores daqui. Por exemplo, aqui se tivermos essa dispersão por uma orelha, tentei usar as cores dos seus estilos de cores aqui. Então, se você tentar mudar algo já vai refletir isso em todo o seu sistema de design. Da mesma forma, você pode ver por que eu adicionei essa dispersão aqui. Então, se você quiser mudá-lo para qualquer outra coisa, por exemplo, você quer mudá-lo para trabalho, então você pode fazer isso apenas selecionando um incenso aqui, retroceder. Então, todos os seus ícones são, na verdade, agora. Todos os seus ícones estão aqui porque você os criou em um componente para que você possa sucatear os componentes aqui. Então, essa é a beleza desse sistema de design. Aqui temos o chip de metas na íntegra. E acho que isso é novamente, usei o layout automático aqui. Acho que devo mantê-lo no meio porque se eu tentar adicionar um ícone aqui, ele será interrompido. Então é a distância entre o preenchimento, mas precisamos dele. Então, vou criar um componente a partir dele. E está se expandindo automaticamente, então não precisamos nos preocupar. Controle ou Comando Alt Opção K. Aqui temos o componente de chip aqui. Criamos como diferentes botões e chips. Vamos ver se precisamos de mais um. Talvez possamos criar esse progresso, mas precisamos. Isso não é muito difícil e vamos usá-lo e tentar replicá-lo em nosso sistema de projeto. Não é botão, mas acho que é uma barra de progresso. Então, vamos chamá-lo de botões, além de fichas, além de barras de progresso. Só para garantir que o ataque tivemos usando tudo aqui. Aqui nós temos isso. Você pode ver que isso está realmente no meio e no centro. Se eu tentar mudá-lo, não devemos expandi-lo. Deve ser o mesmo assim, então ficará assim. Este deve ser movido facilmente. Assim. configuração seria a mesma. Estou usando a mesma configuração para este. E eu acho que isso está ligado. Deixe-me ver se temos uma barra de progresso diferente aqui. Este está usando configurações diferentes. Então eu quero usar 11 aqui, torná-lo semelhante a este. Então, usaremos a mesma barra de progresso. Então o vert é 199. Vamos fazer 200. Só para estar no lado seguro. Este é um pouco maior . Isso é 213. Então, vamos tentar usar 200 e ver se ele se encaixa. Sim. Então, vou usar 200 aqui novamente. Vamos torná-lo um pouco maior que duzentos e duzentos e dez. Este também 210. Esta também barra de progresso 210. Então, o tamanho MIG de cada um deles é semelhante. Isso vai fazer no meio. Vamos criar a mesma coisa com nosso sistema de design. Vai ser 210 pixels. Então, acho que não seremos mais complexos. Então, vamos tentar rênio deles. Preencha BG para plano de fundo, qualidade verde no BD e selecione esta tecla de opção de comando para criar um componente. Você pode ver que criamos esse componente aqui e podemos acessá-lo facilmente nos ativos. Então você pode ver que temos, você pode ver aqui nos ativos, se você mudar para ativos, temos esse chip para login. Botão pequeno. Acho que perdemos um botão aqui, que foi este. Perdemos este. Explore. Em seguida, copie-o e arraste-o para aqui. E vamos replicar esse botão em nosso próprio sistema de design. E você já sabe o exercício como criamos este cadastro sem login aqui. Então, vou pular isso rapidamente. E vamos criar dois estados para isso. Um para, um é comprado e o outro é o Explorer. Replicamos esse botão com sucesso. Então, agora o que estou tentando fazer é tentar ter um pouco mais de espaço no texto para que possamos mudá-lo para outra coisa, e o tamanho seria 102. Então, vamos reduzir como 16 pixels. Agora. Vamos tentar 16. Em 16. Muito perto. 1515 faria o truque. Aqui temos o botão e vamos chamá-lo de menor. Aqui nós o temos e criamos um componente a partir dele. Vamos criar um componente. Vamos criar uma variante. A segunda variante seria, mas acho que vamos usar a mesma equipe para isso. O que está acontecendo? Aqui? Vamos usar a propriedade. Já tínhamos status. Steve. Vamos extintos. Então, vamos usar o estado do botão. Oops, opa, opa, o que aconteceu? Estado. E esse estado padrão, isso será comprado. Ele foi comprado. Então, temos que corrigir isso entrando aqui e tentar replicar isso. Tentei tê-lo assim. Agora temos 213 e vemos se temos o mesmo tamanho, 10210411 aqui. Aqui temos isso, mas SIG e explore dois estados estão secos. Agora precisamos mudar a cor de fundo para outra coisa, que será um estudioso. Acho que usamos verde 70, sim, verde 17, ponto verde antes do texto. Verde para verde. Este ponto verde D, este. Se comprarmos o curso, será assim que é para este. Então, dois botões, vermelho. Fizemos e concluímos essa tarefa de criar todas essas barras de progresso, chips e botões. E acho que deixe-me ver se perdemos alguma coisa. Não, não misturamos perdeu, perdemos nada. Então você pode ver que temos um ícone aqui que é verificado circulado. Você também copiará isso para seu ícone ou ícones aqui. Este é, na verdade, 32 por 32, e nós vamos criar um componente a partir dele assim. Mantenha-o com seus ícones ou ícones. E vamos mencionar os tamanhos aqui mais tarde. Vou mostrar alguns truques sobre como manter seus ícones. Não tente fazer isso. Isso vai estragar o tamanho de seus ícones. Aqui temos todos os ícones. E o que você pode fazer é também tentar copiá-los aqui daqui. Assim. Copie isso porque este não está lá no sistema de design. Clique aqui. E isso é realmente tentar ampliar como esse componente. Faça o download simples. Vamos tentar ver se temos essa liberdade é horizontal. Tente copiá-los daqui porque acho que está tudo bem, então EQ nos ícones, este é diferente, este é diferente. Então, miséria, não alimentadores, mas vamos chamá-lo de Configurações. E este é configurações. Isso faz mais sentido. Você pode ver que temos todos os ícones diferentes em 24 pixels. Este está começando, se você tiver 30 para mantê-los em regra separada. E acho que isso é tudo. Também precisamos desses três ícones. Vamos copiar estes daqui para aqui temos como simples aluno e circular. Então, vamos copiar todos esses três. Em seguida, tente ir para este sistema de design. Clique nesses ícones, controle V. E temos nossos ícones aqui. Agora estamos usando essa cor, é por isso que temos isso. Vamos usar essa cor, esses ícones, BW. Então, para todos esses, vou usar o vw. Aqui nós temos isso. Bw. Bw pode seguir esses ícones. Estes são, na verdade, 32 por 32, então isso deve ser mantido nesta linha. Isso é 32 por 32 pixels. Aqui nós temos isso. Como símbolos usar uma engrenagem circular. Vamos mantê-los assim. Temos que criar vários componentes como esse. E aqui temos nosso conjunto de ícones de 32 por 32 pixels e 24 por 24. O que vou fazer elétron é que vou adicionar algo assim ou aqui, que é a nossa barra de informações. Este, este será adicionado aos nossos ícones 3224, e seria isso. Vou fazer isso acontecer e mostrarei na próxima lição. Esta lição é muito longa. Então, vamos passar para a próxima lição e estudar algo mais sobre nossa criação de componentes mais complexos. Eles então cuidarão, adeus. 27. Componentes maiores 01: Agora, antes de fazer você um componente maior, temos que usar outro quadro para ter nossas ilustrações sobre isso. Vamos fazer isso rapidamente. Então, aqui temos o sistema projetado. Vamos replicar esses ícones assim. Renomeie-o para mover isso, mova todos esses. E essas serão nossas ilustrações. Tenha ilustrações grandes e pequenas. Então, vamos usar a cabeça só para tê-la um pouco simples. Então, estou tentando copiar isso acontecendo. Então, o que é ilustração? Então este, foi bloqueado. Então eu vou sair do Comando C, Controle C. Basta colar aqui assim. Esta é uma ilustração. O que você precisa fazer é apenas criar um componente no tópico que eu vou ter um maior fazer o mesmo para os outros. Este é um menor. Usamos ilustração de progresso. Vou mantê-lo assim. Há mais algumas coisas que usamos. Por exemplo, esses pequenos pontos vermelhos e azuis. Eu não os usei como ilustração de fundo ou algo assim. Então, o que eu fiz foi usá-los em todo esse componente. Então, vamos adicioná-los a esse componente em vez de mantê-los separados. Agora, acho que estamos prontos para seguir em frente para criar alguns dos que alinhamos nossa ilustração. Então, agora vamos criar componentes maiores. Em seguida. Use este. Em seguida, chame-os de componentes. Vou remover esses. Vamos chamá-los de componentes. Esses serão nossos itens de lista, algo assim. E vamos ver, por exemplo, este é um cavalo de recurso e este é o curso normal. Temos mais um, que é este. Então, na verdade, temos três variações para elas. Vamos tentar criar isso primeiro, primeiro. Aqui nós os temos. Você pode ver que temos essa imagem em destaque. Você pode mantê-lo assim porque já adicionamos gradiente linear a ele. Este é o título do nosso curso. Isso em tudo. Eles foram selecionados para este. E o botão que vamos usar outros componentes que criamos. Vamos para Ativos e vídeo de palestra de cinco horas. Vamos soltá-lo assim. Que volta aqui. Isso para chip está aqui. Em nossas camadas, vamos adicioná-lo. Estava dentro deste curso em destaque. Esta é a forma de entrada. Eu acho. Este curso em destaque. Temos que abri-lo e adicionar esse chip de pools dentro dele. Esta é, na verdade, essa nação cara. Então, vou renomeá-lo para q duração. Essa é a nossa demanda futura. Vamos mantê-lo assim que temos que substituir. Então, vamos usar nosso botão Inscrever-se aqui, o mesmo. E este precisamos substituí-lo. Vamos primeiro movê-lo no topo. Regra Btn, e vamos remover isso. Agora vamos ter este, que será nosso componente maior. Nós o temos quase pronto. Vamos ver se temos alinhamentos. Os alinhamentos são perfeitos. E você pode ver que temos várias instâncias de diferentes outros botões e diferentes outros componentes menores para construir um maior. Agora vamos criar nosso componente a partir dele postagens em destaque. Da mesma forma, faremos o mesmo com esses menores. Agora, por que não estou usando o layout automático porque temos que ter espaços diferentes. Por exemplo, oito pixels aqui e 16 pixels aqui. Isso não é possível porque ele terá o mesmo preenchimento. Isso vai ser um enorme. Tentamos criá-lo com isso. Mais uma vez, este título de curso. Vamos fazer o mesmo. Esta será a nossa imagem, nossa imagem do curso chamada imagem de curso de qualidade. Assim, duração e alunos, este será o mesmo, este. Vou repetir o mesmo ou aqui, então vamos ignorá-lo. Temos a nação cara. Vamos tentar replicá-lo. Ele deve ser removido. Este aqui, este é aluno. Então eu vou replicar nesta segunda-feira aqui. E agora vou remover esta é a história de estudantes 450. Então. O problema é que ele deve ser mantido à esquerda. Podemos gerenciá-lo. Aqui, não exploramos, mas temos que pegar o botão explorador daqui e adicioná-lo aqui assim. Isso será capaz de explorar o botão, rolar para trás pelos ouvidos. Explore pequeno. Então artilheiros, duração dos alunos. Imagem do curso Btn. Nós fizemos. Vamos tentar ver se temos um título de curso é perfeito. Tudo é um componente dentro de um componente e estilos. Vamos criar um componente a partir dele assim. Este será o item do nosso curso. Este é o nosso componente maior. Para esse componente do curso, torne-se um, menor. Ok, então para este temos que criar, também criar esses dois. Vamos pegá-los e trazê-los para cá. Comando V, controle V para colá-lo aqui. Este já foi selecionado parágrafo mais texto silenciado. Então, temos que substituir isso porque fizemos uma barra de progresso em nosso próprio sistema de design. Vamos para Ativos. E onde está nossa barra de progresso? Então, vou trazê-lo aqui assim e ir para camadas. Este é, na verdade, meu curso em destaque. Não deve ser um quadro em destaque, mas é a lista. Forças. Força. Eu posso. Então, vou arrastar e soltar esse progresso aqui. Este aqui vai comprar minha imagem em destaque. Esses são rabiscos e, se você quiser, você pode criar um componente partir dele e mantê-lo em outro lugar. Vamos criar um componente nos principais rabiscos. E vou para o Comando D, duplicá-lo. Control X ou Command X. Vamos colá-los em nossas ilustrações. Aqui nós temos isso. Estes serão meus rabiscos assim. Vou mantê-lo por aqui em algum lugar. Em minhas ilustrações. Agora, se eu quisesse mudar a cor desse plano de fundo, temos que fazer isso aqui e isso será refletido em todos eles. Esta é a nossa imagem em destaque. Ok, então vamos chamá-lo de Imagem, Imagem. Imagem como esta. Aqui nós temos isso. Isso está completo. Vamos criar um componente a partir dele. Portanto, temos esses componentes prontos para adicioná-los aos nossos sistemas de design são três componentes que criamos. E deixe-me ver se criamos outros componentes para o texto. Eu diminua o zoom. Aqui temos outro componente, que é para o texto. Então, vamos pegar isso. Acho que deveria estar aqui para o nosso sistema de design e deve estar presente nos componentes maiores como este. O que ele faz, ele realmente criou. Vamos entrar em D e usar esse componente mestre. Domine o componente e trazendo-o para cá. Componente de postura. Precisamos de um mestre. Nós temos, estamos tentando alinhar isso. Esses não são componentes do curso, portanto, são componentes tributados na verdade. Vamos mantê-los no fundo. Assim. Eu criei alguns componentes aqui. A melhor coisa é que você pode mudá-los para o que quiser. Por exemplo, como este aqui, posso ter um chip e, por exemplo, essa ilustração de progresso, posso usá-los para que você possa arrastá-lo e soltá-lo assim. Além disso, você pode ver que temos esse jogador aqui. O que está acontecendo? Eu não tenho Claus VG. Eu os nomeei corretamente. O que está acontecendo? Por que temos isso por trás disso? Então, temos que excluí-lo. Controle V G, Esta é imagem de vídeo. Este é o progresso da revisão. Podemos criar um componente a partir dele. Então, esse é o logotipo. Este aqui. Você legendaria? Se o progresso for barra de progresso, leia sua legenda não deve estar aqui. Temos essa LAN G, controle G e vídeo. Você pode criar um componente do player de vídeo. E você pode me mostrar. Vamos criar um reprodutor de vídeo aqui. O que precisamos aqui é deixar-me dizer, gritos, aconteceu, acabou de acontecer. Meus ícones. Ok, então estes não são a parte de deixe-me apenas trazê-los para isso. Onde você obtém este? Agora? A outra parte, certifique-se de tentar ocultar e escolher o Comando C ou Controle C. E vamos voltar ao nosso sistema de design. Aqui vamos ter esse player de vídeo. O que temos que fazer é adicionar nossos ícones ou severos em meus ícones. Este é um ícone falso. Eles têm que adicioná-lo aqui. Ícone de download, isso é download. Isso é para configurações. Este foi usado. Agora. Apenas tente sobrepor isso. Este é o ícone. Sim. Dê uma volta nele. Ninguém nunca vai para as camadas. Estes em meus ícones. E eu tenho que excluir esses símbolos. Simples. Mantenha assim. Não queremos criar um componente a partir deles. Tudo bem, então este é um reprodutor de vídeo. Então, vamos tentar criar um componente. É por isso que eu usei aqui. Então deixe-me mostrar-lhe, por exemplo, se eu quiser usar azul aqui, posso usar o play aqui. Se eu quiser usar o rebobinamento aqui, posso usar o lembrete William. Então essa é a magia de criar isso. Usando esses ícones de componentes. Eu quero ensinar-lhe o que são, você pode ver a essência disso, esse todo, o que você deve chamá-lo, toda essa ideia de usar seu sistema de design. Por que você tem que criar um sistema de design? Porque você quer que seja fácil alterá-lo ou modificá-lo. E você deve ter mais opções para criar e controlar coisas. Por exemplo, você pode ver aqui, este é o meu nav inferior e eu quero criar algo para este. O que estou tentando fazer é criar estados diferentes para esses 13 estados. Um deles é ativo em casa, minha classe ativa e conta ativa. Então, vamos tentar fazer isso. Então, para isso, vou usar uma cor daqui para torná-la normal. Não assim. Estou usando preto e branco 60 agora, eu argumento que pode usar 52. Acho que 60 está com boa aparência. Preto e branco 60. E antes de seguirmos em frente, temos que trazer nossos ícones aqui. Então, aqui temos nossos ativos. Aqui em nossos ícones, onde estão meus símbolos de casa? Então este é o meu ícone de símbolo de casa. E então temos, em vez de ícones, este. E este. Vou sobrepor eles apenas para economizar tempo de posicioná-los de novo e de novo. Assim. Aqui temos isso assim. E exclua o resto dos planos de fundo. Nós temos. Vamos movê-los para dentro dele. Esses opa, o que aconteceu? Eu deixei ela rabiscar. Ok, então eu não vou acreditar naqueles que temos texto e temos isso. Vamos tentar usar a mesma cor para o texto, para os ícones. 60. Também para esses vetores, vou usar preto e branco 6060. Este será o meu estado para o estado normal, onde nada vai acontecer. Selecione todos esses preto e branco 60. Selecione neste. Nós vamos fazer, o que vamos fazer é esconder isso assim. Isso vai estar no NAB inferior, status normal. Isso vai ser normal. E temos três ícones. Por que usamos isso? Porque se eu quisesse mudar um ícone a qualquer momento, posso usar arrastar e soltar aqui e posso dar um tapa no ícone de pixel 2032. Isso é uma coisa. Ok, então agora podemos criar um componente a partir dele. Este é o nosso componente. Precisamos de alguma variância. Então, vou clicar na variação. É assim que vamos usar isso. Em. Este primeiro vídeo não será padrão, mas estará ativo e ativo. E o segundo será, terceiro será um vídeo, ele estará ativo. Nós temos esses, vamos clicar neste para descrever a propriedade. E é a barra de navegação. Basta chamá-lo de status. Acho que isso seria criado em vez de chamá-lo assim. Certo. Primeiro, vamos clicar nisso e vamos mudar o vetor para não. Não vamos encaixar essa instância. O que está acontecendo? Mantenha assim. E vamos mudar a cor para preto e branco. E a casa será preto e branco. Este será ativo e nulo para o segundo estado. Isso vai ser ativo, mas vai ser movido para cá. Assim. Preto e branco. Você teve a ideia de como estou tentando alcançar meu objetivo. E conta seria, novamente, todos os outros que vou usar de volta e assistir 60. Vamos ver se temos plano dos EUA e ampla 60, preto e branco 60. Então, se eu tentar mudar a cor, posso fazê-lo com apenas um clique. 606060 Dan. Aqui temos que fazer é que temos que usar essa perna. Aqui. Temos os três estados prontos para remotos. E podemos simplesmente arrastá-lo e soltá-lo e selecionar qual estado queremos. E vai ser assim. Bom. Criamos nossa barra de navegação, que é o botão nav inferior. Agora estamos tentando criar um layout mais complexo. Vá em frente. Opa. Deixamos algo aqui. Você pode criar esse componente com vários avatares diferentes, vários avatares diferentes, mas acho que vou ignorá-lo agora. Você também pode criar um chip aqui, que é este, que é sobre o progresso de um aluno. Você pode criar isso e também pode criar isso. Então, vamos criar 12, esses dois, e vamos arrastá-los e soltá-los em nosso design. Este é outro. Este aqui. Vamos começar com esse sistema de design. E eu vou fazer isso. Aqui. Nós o temos no quadro de pontos Avid. É alguém para comprar 72 e miséria 72. Devido ao retângulo. Você também pode ver que temos esse efeito, que é para todo esse conteúdo nesta viagem. Deixe-me ver se a sombra, ok, então temos a porta do elevador de sombra aqui. De qualquer forma. Este é o conteúdo e esse é o plano de fundo. Então, vamos chamá-lo. Este é o conteúdo. Cabe a você se você quiser criar um componente a partir dele ou não, cabe a você porque acho que será principalmente essa largura fixa. Normalmente. Cabe a você se você quiser criar um componente, ou seja, essa é a sua decisão. Agora vamos criar, vamos começar a criar um componente, mas precisamos arrastar uma ilustração aqui. Aqui temos a ilustração. Arraste para cá. Vamos ver se temos o mesmo. O livro está um pouco acima disso. Livro roxo está acima aqui. Assim. quase esse arquivo daqui. Agora vou criar um componente a partir dele porque preciso ter isso. Vamos mantê-lo assim. Desagrupe. Agora vou agrupá-los e vamos criar um componente a partir deste todo. Você pode usar o layout automático, mas isso tornará as coisas complexas. Se você tiver dois, vou selecionar tudo isso e criar um componente será minha informação de usuário, nosso usuário, vamos chamá-lo de progresso do usuário . Opa, o que aconteceu? Precisamos adicionar o efeito aqui, que é este. Perfeito. Este é meu componente mestre. Podemos arrastá-lo e soltá-lo a qualquer momento. 28. Componentes maiores 02: Deixe-me ver se podemos criar mais componentes. Enquanto o último, também podemos criar este. Esta é, na verdade, a nossa navegação superior, e a distância entre eles é, na verdade, 16 pixels. Se também pudermos ter estados diferentes para este. Vamos tentar trazê-lo dos ativos. Este é o nosso chip. Acho que já tinha esses estados. Vamos ver se ele tem fator inativo e inativo. O que vamos fazer é replicá-lo assim. 16 pixels seriam a distância entre eles. Antes disso, vamos usar e criar o layout automático para este. E totalmente ou direção seria isso. A distância seria 1616. Vamos tentar replicar isso. Estou pressionando Comando D ou Controle D para duplicar isso. Para criar este, vamos usar, digamos, usuário. Então vamos, novamente, não, não assim, eu tenho que selecionar isso. E aqui temos a interface de usuário de navegação completa. Ok, então você pode clicar e mudar inativo para ativo, SAP para você. Antes de entrar em outra coisa. Na verdade, vamos usar retangular aqui. Vamos tentar ver se podemos adicionar um preenchimento aqui. O que não vai ser isso. Mas, na verdade, precisamos desse jeito. O problema é, na verdade, os pensionistas vindo para cá. Deixe-me ver se consigo a partir daí. Aqui temos isso. Este é um retângulo. Este é o preenchimento linear de gradiente, o grupo de máscaras. Deixe-me ver se posso replicar isso aqui. A mesma coisa que é óbvia. Esse é o problema. Tudo. Eu adicionei outra cor aqui. Então esse é o problema ou isso está acontecendo, isso está acontecendo. Estou adicionando agora, revertendo-o. Este, este não vai ser 100%, mas 80%. Vamos mantê-lo 100%. Temos que mudar a cor para que você possa ver se eu tento mudar a cor. Então, talvez aqui. Isso não deveria ser assim. Este deve ser 100% assim. Estamos criando gradiente linear que é de 200% por cento porque ele irá ocultá-lo totalmente. Então, vinte e cinco por cento serão criados. E então este vai ser 100%. Você pode ver que este é o nosso grupo Masters. Esta é a nossa mesquita. E vamos criar um componente. Vamos chamá-lo. Este é o nosso componente. Se você quiser mudar a máscara, você pode torná-la cheia assim. É assim que vamos criar mais navegações. E se você quiser ter, acho que não precisamos ter dois ou três estágios diferentes para este, porque podemos ligar e desligar qualquer coisa. Deixe-me mostrar como você pode usá-los aqui. Então, temos uma distância de 41 pixels aqui. Vamos excluir este. E vamos usar a partir de ativos que nossos próprios criaram. Enquanto meu Então aqui temos os componentes. Abra isso. Aqui temos o pescoço inferior. Vou arrastá-lo e soltá-lo aqui. Seria 4000 pixels. 47, acho que foi 47. Vamos ver qual é o som 50 48. Isso é colorido sete. Assim. Parece a 30 anos daqui. A altura era de 48. Então este tem 48. Isso não importa. Não há problema. Este era 3s orbital. Este é 305. Vou movê-lo no meio. Trinta e cinco. Trinta e cinco. Sim. Vamos escolher 44 ou uma cabeça nula. Ok, então tem outros problemas, então vou usá-lo. Vamos tentar usar 4444. O fundo está começando. Isso é ótimo. Este é meu botão de navegação. Se eu quiser alterar o status para a classe ativa doméstica ativa, também posso fazer isso. Mais uma coisa é que você também pode a seção de protótipo. Você também pode criar um protótipo. Temos toda essa navegação que vai mudar para outra. Assim, você pode ter essa alteração para on dapp, em onclick. Onclick. Não deve ser, em vez disso, animar inteligente e fazer o mesmo mais longe. Assim. E também desta disciplina, de volta. A partir disso, ele vai voltar assim. Você pode criar algo assim e ficaria ótimo quando ele vai animar. Eu me divirto. Acho que tenho um tutorial de prototipagem no meu canal do YouTube que está mostrando este. Como animar isso. Eu estive mostrando a você nesta configuração. É assim que vamos substituir nosso equipamento de navegação inferior. Vamos apagar isso amanhã e ver e Martin V. Da mesma forma, temos isso aqui. Mais uma vez, traremos para excluir isso. Opa, o que está acontecendo? Ok, então eu tenho que selecionar o quadro. Aqui. Você pode ver que temos que fazer o outro. Será o design do próximo trimestre. Nav inferior vai ser minhas aulas. A classe de status dessa pessoa ativa. Aqui temos, vamos chamá-lo de minhas aulas. Clique neste ativo seria óculos. Este é o lar. Vamos tentar ir ao protótipo e mostrarei o que realmente quero dizer. Vamos tentar dois. Vamos tentar executar isso. Você pode ver se você clica aqui, você pode ver como eles realmente estão se movendo. Os escuros estão se movendo e tudo está mudando. Então você pode ver isso parece muito, muito legal animação de, então, na verdade, eu não liguei esta de volta a esta. Você pode fazer isso em seu sistema de design e você puxa aqui. Você também pode selecionar o item. Acho que podemos voltar assim. Este vai para aqui. Este vai para aqui. Este volta às aulas, na verdade. De qualquer forma, é assim que você piscaria para ter esse efeito animado do seu aqui. Então, vamos tentar adicionar dos meus ativos. Vou adicionar isso aqui. Assim. Das minhas camadas. Vou remover ou ocultar isso agora. Então você pode ver que é assim que eu vou fazer com isso. Mais uma coisa é que você também pode removê-los e continuar adicionando seus componentes daqui. Vamos para Design. Vamos tentar tê-los. 50, então estou realmente mantendo 6044. Aqui. Temos mais componentes como esses, para que você possa criar categorias diferentes. Por exemplo, eu tenho esse vídeo. Isto é, estes são textos alimentares, são navegações. Vou tê-los em seções diferentes. Por exemplo, esses são meus que você também pode adicionar, você pode ver que você pode adicionar descrição de todos esses componentes, se quiser. Por exemplo, esta é, na verdade, uma playlist. Chamaria de playlist aqui. E você também pode adicionar um link de documentação se quiser vinculá-lo a alguma página de documentação onde você mostrará como usar isso ou como você sabe? Mais detalhes sobre esse componente? É assim que realmente tenho, estou tentando gerenciá-los em grupos. Concluímos a média de todos os nossos componentes. Mostrei a você como criar variantes diferentes, componentes diferentes, diferentes componentes maiores para usar esses componentes menores. Como você vai usar esses ícones? Como implementar esses ícones, como substituí-los em seu sistema de design, se você quiser. Como você tem que construir suas ilustrações e ícones e tudo, todo o sistema. Você também pode criar links diferentes em seus ícones, por exemplo, você também pode dizer a eles que eles são falsos. Escrita de ícones. Esses foram para phosphor ícones é false para ícones. Esses são ícones de fósforo. Você também pode vincular, criar links. Por exemplo, se você tiver, você pode ver que temos essa topografia e estamos usando esses dois tipos de letra. E vou criar um link para eles. Para fazer isso, você pode ver se você seleciona um índice, você terá criado o link na tecla Top Control Command. O que estou tentando fazer é, na verdade, estarei movendo isso assim. E eu não estaria baixando a carga de vínculo. Clique neste link e você pode ver que posso colar o URL aqui. Então, vou para google.com e vou colar o link dessa garrafa ou dessa fórmula. Vou usar esse link. Cópia. Vou colá-lo aqui. É assim que você pode basear os links em seu cabelo. Vamos tentar. Mude a cor deste para outra coisa para que pareça um link. Então eu vou usar, vamos tentar usar este. Este parece ótimo. Se você quiser adicionar links a partes diferentes são diferentes. Páginas da Web diferentes ou coisas diferentes que você, seus designers ou desenvolvedores precisam baixar. Você pode clicar nisso e ele se moverá para, por exemplo, esses são ícones de fósforo. Você pode criar um link para ícones de fósforo. Para ir para essa página. Os desenvolvedores podem baixar todas as especificações, tudo. Por exemplo, essas ilustrações que gravamos essas ilustrações, você pode ter o link para essas ilustrações. Isso é tudo. Então isso é, acho que outra dica gostaria de lhe dar que você pode adicionar diferentes links diferentes a todo o seu sistema de design. Há mais uma coisa que as pessoas tentaram fazer é tentar criar páginas diferentes e ter seus botões e tudo separadamente. 29. Sistema de grade e layout: Mais uma coisa que esquecemos é, na verdade, grade. Você pode definir seu sistema de grade em seu documento aqui. Para fazer isso, vamos criar um novo quadro. Para moldura. Vamos tentar criar o iPhone, que usamos, acho que o iPhone permite o Pro Max. E usamos uma grade. Vamos ver se criamos um estilo de grade. Deixe-me, deixe-me ver se temos essa grade. Temos a grade agora. Vamos criar um estilo de grade, vamos chamá-lo de coluna de alimentos. Para usar isso, vamos ver aqui e selecionar isso e esta é a nossa grade. Você pode definir o modo como qual é a distância à esquerda e à direita na sua grade, e também as cores. Por exemplo. ter cores ou propriedades diferentes. Por exemplo, vamos tentar mudar a cor do plano de fundo para algo assim. Para mostrar a grade. Grades. Além disso, se você quiser ter o layout, por exemplo, temos um layout de todos esses elementos como este, dispostos assim. E, por exemplo, assim, você também pode criar um layout. Temos um grande elemento aqui, depois dois elementos aqui assim. Você pode criar esse layout também, o banco da grade. Então, neste momento, não estamos preocupados com isso, quem? Vamos apenas desenvolver nossos aplicativos móveis. Temos grades para celular. Se você quiser. Sistema de design onde temos Web T2, então teremos um sistema de grade para web design para me deixar fazer isso. Crie outro quadro. E desta vez vou usar um desktop 1440. Esta será minha área de trabalho. Vamos criar um layout de grade. E vamos usar um layout de grade de colunas, 12 colunas. Linha central. Deve ser 72, vamos chamá-lo de 72. Cutter não teria 30. É assim que você mostraria uma grade de área de trabalho. Você também pode salvá-lo aqui. Isso será mais fácil do que útil para grade de desktop de seus desenvolvedores. E isso faria o truque. Acho que isso é tudo sobre as grades. Acho que deixei isso. Você precisa criar um sistema de grade para onde você vai mostrar todas as diferentes grades. Melhor se você criou esses estilos de grade que podem ser facilmente aplicados quando você está tentando criar uma nova página no novo layout. Acho que completamos tudo os estudiosos de grade, topografia, chips de botão, barras de progresso, ícones, ilustrações e componentes. Acho que isso vai acabar e algumas das pontuações. Se você tiver alguma dúvida ou se eu tiver alguma coisa restante, se você tiver alguma dúvida, você sempre pode me perguntar. Você pode criar e tornar isso o mais complexo possível. Mas tentei simplificá-lo e tentei ensinar-lhe a essência do sistema de design, o que você realmente precisa e por que você realmente precisa construir um sistema de design que facilitará sua vida. E todas as dicas e truques que dei nesta aula que vão te ajudar muito ao usar Figma. Encontrarei você em outro vídeo e outro curso. Certifique-se de baixar os recursos para este curso até então, tome cuidado adeus e nos encontraremos em outro momento. 30. Como criar componentes de combo: Na última lição, criamos nossa seção de tipografia do nosso sistema de design. Agora vamos ver algumas das mais coisas que você pode precisar em seu sistema de tipografia. Esses são adicionais. Então você pode ver aqui que temos nosso sistema de design onde temos um título de título. Em seguida, temos a seção que descrevi aqui com os tamanhos à esquerda. E cada um deles é, na verdade, um estilo de tipo. Você pode ver, você pode facilmente adivinhar o que é agora que temos, eu também apliquei todos eles ao meu aplicativo de aprendizado de design. Deixe-me mostrar a você. Aqui nós temos isso. Então, se você clicar aqui, é um cabeçalho da seção de tipografia. E se você clicar aqui, este é um parágrafo de topografia mais texto silenciado. Se clicarmos aqui, este é um pequeno livro didático mais navegação inferior. Aplicamos tudo onde deveria estar. Estou pressionando Command or Control para clicar no Slack. Você pode ver o campo de texto e os rótulos. Da mesma forma, se você clicar aqui, este é um parágrafo mutante dentro do texto. Portanto, este é o FiltText. Na verdade, aplique esse estilo aqui. Então, novamente, dentro desses, todos esses botões. Portanto, esses são, na verdade, botões ou controles. Em todos esses controles, temos ou botões, aplicamos o texto do botão se você clicar aqui e texto do botão, se você clicar e texto btn, esses são todos textos de botão. Da mesma forma, para este texto, isso é apenas uma informação, a menor informação. Portanto, está em texto completo. Vamos verificar distâncias. Mais uma vez. Se você for aqui, este é um parágrafo mais silenciado. Então, cada título abaixo aqui é, na verdade, parágrafo. Então, se você clicar aqui, isso também é Parágrafo mais silenciado. Da mesma forma, temos este. Este é um texto pequeno. Se você for aqui na parte inferior, este é um texto pequeno e a navegação inferior. Então você pode ver que é assim que você aplica toda a tipografia ao seu sistema de design. Agora, se você quiser mostrar a eles a combinação de diferentes tipos de letra diferentes. Por exemplo. Aqui você pode ver que estamos combinando dois deles. É uma diferença entre eles. Você pode copiar daqui. Você pode ir para o guia de estilo e ver isso conduzido para esta seção aqui. Tão acelerado eles. Esta é a distância entre eles. Este é um texto que precisamos para colocar as duas camadas aqui separadamente. O que aconteceu aqui? Vamos ver onde ele está. Ok, então aqui temos isso. Vamos pegar esses dois comandos C. E vamos ver se podemos chamar as pessoas. Quanto mais aqui. Sim, agora eles têm sido custos indiretos, na verdade, ele copiou apenas o texto. Tente usar uma cor de fundo aqui, que é o Docker. Fundo escuro. Este, acho que usamos este. Tentei mostrar tudo em um fundo escuro. É mais fácil para eles. Aqui nós temos isso. Mova para baixo. Copie esses dois também. Vamos pressionar Alt e arrastar aqui assim. E vamos chamá-los de tipo. Da esquerda 88. Você pode compartilhar suas combinações de tipo de letra aqui. Também dirá aos elogios que quanta distância seria de um texto para outro. Você pode ver aqui que temos a distância de dez. Da mesma forma, se tivermos mais como este, esta seção onde temos títulos de palestras, e vamos copiar isso. E vamos voltar ao guia de estilo. E vamos usar isso aqui. Assim. Em seguida, estenda esse plano de fundo um pouco mais. Aqui nós temos isso. Vamos falar sobre esse plano de fundo. Acho que estamos usando este. É assim que seus desenvolvedores saberão que as distâncias entre esses tipos de letra, eles querem criar um componente. Você pode fazer isso também. Então, por exemplo, se eu quisesse criar um componente disso aqui, posso ir até aqui. Vai ser um componente. Então você pode alterá-lo mais tarde. Assim, você pode criar um componente e chamá-lo, por exemplo, seção, lista de vídeos da seção, algo assim. Da mesma forma, você pode ter, você pode selecionar ambos e criar um componente. Vamos chamá-lo de informações do usuário. Você pode ver que é assim que você criará alguns dos componentes que ajudarão seus desenvolvedores a pegá-los rapidamente e usá-los em seu design. Se houver uma tecla de atalho, se você quiser pegá-la , basta pressionar Shift. Corte. Houve um turno I. Você tem que pressionar Shift I. Você pode ver aqui que temos tipografia. Temos que lista de vídeos da seção. Se eu clicar aqui, ele vai pegá-lo. Ou aqui você pode ver que isso é o que temos aqui. Da mesma forma, esta é a nossa seção. Da mesma forma, se eu quiser usar esse turno eu e eu poderemos pesquisar qualquer componente. Por exemplo, foram poucos que criamos. E você também pode criar, usá-los, por exemplo, userinfo. E ele vai pagar algo assim. Se você quiser criar mais componentes, como talvez todo esse componente de metas em destaque e tudo isso. Vamos criá-los nos próximos passos atrás, não, estamos mais preocupados com a tipografia. Então, vamos ao nosso guia de estilo. E acho que aqui nós tínhamos, vamos deixar essa luta agora. Temos dois componentes aqui, ou seja, que vamos usar em nossos desenvolvedores ou designers usarão em sua tipografia. Seção. Vamos mover esse grupo. Temos dois ou quadril. Vamos chamar esse plano de fundo. Só saiba se você quer estendê-lo aqui assim. Isso depende de você. Assim. Agora você pode ver que temos alguns componentes de uso em que estamos mostrando ao usuário as distâncias entre parágrafos ou títulos ou algo assim. Além disso, estamos mostrando toda a escala de design onde temos todos os tipos de letra e seus estilos diferentes. E o propósito deles é qual propósito está vinculado a esse tipo de estilo. Isso é tudo o que você precisa aplicar tudo isso, nós já os aplicamos. Vamos avançar na próxima seção e vamos analisar combinações de cores e gerar outro esquema de cores. Vamos para a próxima lição. 31. Como usar o sistema de ícones em campos de entrada 01: Agora, na última lição, criamos o sistema de ícones e o sistema de botões. Os dados são poucas coisas que vamos usar agora, que é a nossa entrada. Vamos criar vídeos e campos de entrada de horas. Vamos começar e por que criamos os ícones antes. Vou te mostrar agora para que você possa ver aqui, se você olhar para este botão, então eu os rotulei botões com estados. Então, esses são nossos botões. Em seguida, temos barras de progresso em flexões onde temos que inferir chips e barra de progresso, e então temos essa barra de progresso. Então, este está na verdade em Port. Use o menu suspenso. Aqui vamos usar esse menu suspenso. E agora vamos recriar nossos campos de entrada, que são este. Nós temos esses. Então, vamos copiar os dois. Veremos se podemos replicá-los usando nosso sistema de design. Então aqui temos um e este é um, este está ativo, então a largura é de três quantidades 7. A primeira coisa é que podemos usar a mesma largura, que é 346. Estamos aqui. Vamos tentar replicar isso. Primeiro, vamos usar e criar isso pressionando D. E eu vou usar isso. Esta é minha entrada. Talvez possamos usar o email shift a para criar um layout automático em torno dele. E a altura é 48. Então, vamos usar, vamos usar 88 aqui. A altura é 34 agora, acho que lideraríamos o 1212. Ok, então uma coisa é que vamos ter clicado duas vezes neste texto. Vamos alinhá-lo à esquerda. Isso vai estar sempre à esquerda. Como você sabe, vamos tê-los de altura fixa. Então, vou clicar no meio. Vou fazer isso pelo menos por tanto tempo. Esse tempo é suficiente. Acho que isso é bom o suficiente para o texto. Importante, posso ter e-mail ou qualquer coisa em troca dentro dele. Isso é tudo. Talvez um pouco mais do que isso. Vou usar 260 palavras. Vamos adicionar uma cor de preenchimento neste quadro. Cor de preenchimento. E vai ser algo assim, pequeno mais escuro do que este. Então este, BW E9, esta é a cor dos nossos designs são alguns que vão combinar com essa cor. Certo, então acho que da esquerda temos 16. Então, vou manter 16 aqui, assim. E também daqui vou manter 16, no meio. Vamos mantê-lo no meio porque, uma vez vamos adicionar esse ícone, isso vai estragar tudo. Isso é tudo. Então, vamos tentar ver 42. Este tem 48, então precisamos um pouco mais de preenchimento na parte superior e inferior. 46. Vamos usar 15 aqui e ver se ele parece ótimo. Vamos sim. Quinze, Quinze, Quinze, 161648. Agora vamos deixar isso branco. Isso vai ser 330. Então, não assim. Então, vamos usar o clique neste quadro e tentar ver. Agora, tente adicionar esse ícone aqui. Então, vamos para nossos ícones. Vamos para Ativos daqui e ir para ícones. Vou adicionar isso e deixar isso aqui assim. Opa, você pode ver que já foi igual ao tamanho, quase igual ao tamanho. Agora volte para camadas e vamos verificar suas coisas. Por exemplo, superior, inferior. Vamos reduzir porque esse 32 está realmente tendo muita largura adicional a este. Vá para este quadro um, ou seja, vamos chamá-lo de entrada. Teremos na parte superior e inferior será 12 para, vamos ver qual é a altura 50. Este tem 48. É novamente muito. Vamos tentar 88 aqui está realmente adicionando. Isso é 48. Perfeito. E nos esquecemos disso. Adicionando o raio do canto assim. Vamos ver qual é a largura é 327, isso é 334. Este ícone parece um pouco longe demais dessa borda, então vou reduzir o tamanho do lado deste lado. Então, o preenchimento seria, vamos tentar reduzir. É. Parece ótimo. Ou aqui. Este 330 e este é 327. Vamos tentar reduzir esse tamanho. Duzentos e cinquenta e seis. Cinquenta e sete. E agora vamos ver o tamanho 327320 segundos. Então, isso é perfeito. Agora você pode ver que posso adicionar um endereço de e-mail aqui, M.com. Acho que será fácil para todo o e-mail. Isso vai ser estado não preenchido, na verdade. Então, vamos tentar usar algo que é bom ter isso. E temos que fazer outra coisa. Sistema de design e esses ícones, vou replicar isso. Este será meu ícone vazio. Não, não assim. Vou criar uma caixa de 32 por 32. E este, na verdade, vai ter cor de preenchimento loafing. Vamos tentar usar opacidade de 0%. Para este. Vou chamá-lo de vazio. Ou vamos chamá-lo de não. Não. Vou criar um componente a partir dele. Vamos torná-lo mais próximo deste. 32. Como usar o sistema de ícones em campos de entrada 02: Este é o nosso novo ícone. Vou mostrar por que criei isso. Aqui temos esse estado com falha. Criamos o campo. Então você realmente forçou mais uma coisa está faltando, que é esse endereço de e-mail, que é o rótulo, que é rótulos de dados isentos de impostos. Então, vamos tentar adicionar isso aqui. Fui para a porta D. Será o rótulo, o rótulo, o rótulo, o rótulo com um rótulo, rótulos de texto. Este é o rótulo e a cor é realmente algo mais próximo disso. Sim. Agora vamos arrastá-lo para esse layout automático. Você pode ver que ele foi adicionado aqui, então queremos que ele esteja no topo. Ok, então agora temos um problema. Antes de adicionar este a isso. Vamos usar outro layout automático. Este tem seis pixels. Vamos mantê-lo Seis. Além daqui. Vamos selecionar os dois. Turno. Certo? Aqui temos outro quadro e eu quero que seja, esta será minha entrada. Além disso, rotulado. Você pode ver que o layout automático é direção vertical, então ele está mantendo essa perna que o espaçamento entre os itens é seis, o que definimos agora. E à esquerda, vamos adicionar um pouco de preenchimento de seis. Ele está adicionando preenchimento em ambos. Isso aqui. Na verdade, isso está adicionando tudo a esse todo. Vamos tentar criar um layout automático para este. Este e-mail removerá o preenchimento superior, inferior. Isso está ficando muito complexo. Em baixo 0 e isso vai ser 16. Acho que vai combinar com isso assim. Então, 15, vou mantê-lo assim. O que eu fiz é que eu realmente revisei o layout automático para este também. Então eu normalmente não gosto de criar esses muitos layouts automáticos e coisas assim. Então, vamos voltar e mantê-lo mais simples. Então, vamos remover o layout automático. Vamos remover o quadro. Desagrupe assim. Então, o que estou tentando fazer é também desagrupar isso. Para mantê-lo simples. Vamos agrupá-los juntos. Comando G, e isso é entrada, habilitação, entrada mais rótulo. Você pode fazer muito com o layout automático, mas não gosto muitos layouts automáticos complexos se misturando assim. Esta não é uma boa maneira de iniciar seu design. Então, vou alinhar isso de forma personalizada a partir daqui. Isso é, na verdade, seis pixels de distância daqui. É assim que meu campo de e-mail será. Seis pixels. Sim. O que estou tentando fazer agora é tentar criar um componente simples que é esse. Mantenha assim aqui. Então, isso é, na verdade, vamos precisar de alguma variação aqui. E vamos mantê-lo simples agora. Vamos usar o rótulo aqui. Vamos chamá-lo. Isso vai ser normal. Vamos chamá-lo de rótulo novamente. Aqui. Vamos chamar isso vai ser, vamos deixá-lo vazio. Não podemos deixá-lo vazio. Então, vamos chamá-lo de texto de entrada. Agora vamos substituir isso pelo nosso ícone, que era novo ícone. Símbolo é que este texto é, queremos que seja algo assim. Não queremos ser muito destacados porque é apenas um texto de preenchimento antes de alguém entrar. Este é o nosso estado normal. Então, vamos chamá-lo de estado. Este é o nosso estado normal. Estado de entrada. Este é, na verdade, nosso estado. E precisamos de mais um estado ativo. Para que possamos movê-los assim. Não vou adicionar o layout automático a eles. E vamos criar mais um. Que vai ser onde temos essa fronteira. E o fundo é, eu acho mais leve. Não tenho certeza. Vou adicionar traço. E o traço estaria realmente nessas cores. Isso não é uma cor. Acho que isso é muito próximo. Vou usar outra cor, que é essa. Blue 50 é, na verdade, nossa cor para esse estado. E o ícone seria como estamos tentando preenchê-lo. Então, vamos usar no ícone agora mesmo campo de entrada. Isso, na verdade, está ativo. Foi assim que tentei usar criar componentes para meus campos de entrada. Se você tiver mais campos de entrada, poderá criar muitas outras coisas. São textos normais. Isso é que você também pode, se você quiser ocultar esse texto, você pode simplesmente fazê-lo 0% e ele esconderá assim se você quiser ter uma entrada como essa. Criamos nosso menu suspenso de texto de entrada. Isso me deixa ver se precisamos de mais alguma coisa. Ok, então aqui temos os avatares. Se você quiser criar um quadro de avatar, acho que você também precisa de um ícone de 32 bits de 32 pixels. Vá para este ícone. E isso é realmente aqui que temos. Vamos usar uma elipse. Vamos criar uma elipse segurando Shift e a largura e a altura devem ser 32. Este vai ser o nosso Aqui temos um vazio. Então, vamos ter outro aqui. Mantenha o vazio aqui. Vamos usar, o que é o mesmo para estes. Este será o nosso resultado. Para o preenchimento. Na verdade, vamos usar uma imagem. Para o preenchimento. Vamos usar uma imagem e mantê-la assim. Vou usar o avatar e temos que fazer um componente com ele. Resolva. Quase criamos todos os nossos componentes menores, e agora vamos para os maiores como este. Navegação inferior, esta navegação superior para estes, seguindo-os aqui, estes e também estes. Acho que já os criamos. Então, vamos criar esses componentes agora. Por exemplo, este player de vídeo, podemos ter todo um componente desse player de vídeo e não vamos usar muito da complexidade de adicionar muitos layouts automáticos e coisas assim. Vamos usar, combiná-los e criar nosso sistema. Vamos fazer isso na próxima lição. Vamos passar para a próxima lição e criar alguns componentes mais complexos. Podemos adicioná-los em nossos projetos facilmente. E também teremos as ilustrações copiadas para outro quadro chamado ilustrações, que possamos arrastá-las e soltá-las aqui. Encontrarei você na próxima lição até lá, tome cuidado. Adeus. 33. Como criar o sistema de espaçamento 01: Agora, no vídeo de hoje, vamos discutir um aspecto muito importante que, na verdade, esqueci ao gravar este curso, que é o sistema de espaçamento. No seu sistema de design, o espaçamento será principalmente vertical. Ou, às vezes, podemos ver um espaço rápido que estará em torno de todo o seu layout ou página. E existem diferentes categorias de espaçamento. Então, vamos ver quais são os espaçamentos que precisamos do sistema de espaçamento, precisamos em nosso sistema de design. Vamos começar. Agora você pode ver que eu criei uma placa de arte aqui, o sistema de espaçamento vertical. E vamos ao nosso aplicativo de aprendizado e veremos alguns dos espaçamentos. Por exemplo, você pode ver aqui deste logotipo até o topo, temos 34 pixels. O espaçamento é quase, acho que era 36. Então, vamos usar 36 aqui. Talvez possamos usar 32. Vamos usar 32. Novamente aqui vamos usar 32 novamente. Por aqui. Era b igual em todos os lados. Da mesma forma, esses dois têm um espaçamento de 24. Você pode ver que estes são os poucos sistemas de espaçamento diferentes, ok, Então, à esquerda e à direita, nosso sistema de grade tem margem de 24 pixels à esquerda e à direita. Então você pode ver, se você olhar aqui, temos 24 no topo. 24. Assim. Da mesma forma, temos 24 à direita. Vamos fazer isso 24. Então, este é, na verdade, nosso espaço de invólucro. Na verdade, estamos usando vinte e quatro, vinte e quatro. Então, pelo menos, estamos usando 24 espaços em torno do nosso design. Então, vamos chegar ao fundo e ver qual é o espaço que temos aqui. Vamos ter algo assim. Então esta é a nossa navegação inferior e tem espaçamento ao redor. Vamos tentar torná-lo um pouco maior. Acho que são 32 mais. Aqui nós temos isso. Vamos tentar ampliar e ver. Está na parte inferior? Sim. Então, o espaçamento é 0,77, então sim, é 32 na parte inferior. Agora o espaçamento está quase correspondendo. Nossos pequenos espaços menores. Um bloco é 24, outro é 32. Então, esses são os dois tamanhos. Então, vamos escrever aqui, mesma forma que realmente fizemos para nossa topografia aqui. Vou copiar isso. Vou colá-lo aqui. O primeiro é 24, temos, o segundo é 32. Esses são os dois espaços. Opa. Vamos voltar e ver se estamos usando mais espaço entre esses dois. Acho que deve ser. Um é 36. Vamos ver o que é este 20, isso é 211. espaçamento é, na verdade, 20 pixels. Então você pode ver aqui 3621 mais passo que vamos usar, que é menor que 24, que é 20. Identificamos três espaçamentos entre nosso design. Aqui temos 40 entre seções, seções maiores. E da mesma forma temos, o problema aqui é que precisamos ver o espaçamento. Isso é basicamente um bloco. Temos 16 espaçamentos aqui entre este título e este bloco. Então, vamos tentar ver aqui, deve ser 24 do topo. Da mesma forma, esses 224,5, isso está na verdade em 101. Isso também deve ser 01, assim, 2424. Certo. Vamos usar espécime de 16 aqui. E daqui são 28. Acho que deveria ser algo como 32 talvez. Vamos tentar ver. Temos mais um espaçamento, que é 16. Então, vamos adicionar 16 ou aqui temos 16. Então, identificamos quatro etapas. 16202432, acho que tínhamos, ok, então temos quatro. Vamos tentar ver se é 3232 que já identificamos. Sim. Um deles era 40, que estava entre essas duas seções. Então, isso é 40. Temos para espaçamento. Agora, vamos tentar ver se temos algo como 20202024. Certo, isso é bom. 12. Você pode ver itens muito adjacentes. Eles têm 12 espaçamentos. Vamos tentar 12 aqui. Temos agora 123456 espaçamentos, sistemas de espaçamento vertical. E vamos tentar ver se temos 36. Então, isso é 24. Isso é 40. Sim, acho que todo o nosso design é baseado nesses quatro ou cinco espaçamentos. 1216202430 a 40. Deixe-me ver se precisamos de espaçamento entre eles. Temos um espaçamento de 16 entre dois itens. Portanto, o espaçamento horizontal também tem o mesmo passo. E vamos ver se temos algo como qual é o espaçamento entre esses dois. Então eu usei duas ou três vezes esse 27. Acho que deveria estar em alguns números pares. 27 não é uma coisa boa. Na verdade, é baseado nisso. Certo, então vamos tentar ver esses oito. O menor, não é? Aqui estão oito entre eles. Você pode ver que são textos de três linhas, então estamos usando oito aqui. Vamos adicioná-lo para adicionar mais flexibilidade. Então, se tivermos o menor espaço entre nossos itens, seria 881216202430 a 40. E acho que isso completaria nosso sistema de design. 36 não deve ser 36, mas deve ser 32. Aqui temos, vamos tentar ajustá-los a um. Também podemos usar 40 aqui, mas acho que usaria 32 aqui. E a distância entre eles está na moda. E este também será 20. Fato que seja, vamos tentar ver a distância entre 168 camadas. Então isso é bom. Vamos tentar ver que esse sistema deve ser 16. E vamos tentar ver dez. Isso não é bom. Precisamos tê-lo aqui. E vamos tentar ver a distância entre esses dois. Isso é bom. E isso deve ser, na verdade, 16. Aqui. Isso parece ótimo. Você pode ver que estou mudando meu design para acomodar, então deve ser oito. Então, novamente, e depois são 16. Agora é perfeito. Isso é tudo que eu acho que esses são os sistemas de espaçamento que queremos usar em nossos projetos. Vamos começar a construí-los. Então, o que estou tentando fazer é construir alguns blocos dos espaços. Vamos pegar nosso retângulo. Aqui nós temos isso. Deve ter 40 de altura. Vamos tentar usar o 45º. Normalmente, o que eu tentei fazer é para o ritmo vertical, vou usar a largura deste, então ele tem 375 pixels de largura. O que estou tentando fazer é usar 375 aqui. Então vou escrever pressionando T 40 Bx, assim. Vou alinhá-lo no meio. Combine-os. Você pode colori-los se quiser. Por exemplo, talvez eu queira que seja algo assim. Para essa cor, vou usar algo. Este vai ser meu espaçamento. Isso vai ser, vou criar um componente. Vamos criar um componente. E vamos chamá-lo de espaço. Esta será minha última escala, 1234567, Espaço sete. Ou você também pode chamá-lo de seção, espaço, espaço que seção de traço. Vamos chamá-los por alguns nomes significativos. Esta será a seção espacial ou vamos chamá-la de Espaço sete. Então, deve ser o maior seria mais fácil lembrar sete, temos sete aqui. Vamos repetir a mesma coisa novamente. E para isso vamos desagrupá-lo D dessa instância. Então isso é de novo, vou resolver, estou fazendo a mesma coisa de novo e de novo. Então, vamos pular este 32. Então vou reduzir o tamanho da altura, 32. Assim. Vamos alinhar o texto no meio. Opa, eu realmente gosto disso. Vamos movê-lo para cima. Agora vou criar novamente este, e vamos chamá-lo de espaço seis. Este vai ser meu espaço seis. Da mesma forma, vamos fazer todos os outros. 34. Como criar o sistema de espaçamento 02: Agora você pode ver que criamos nosso sistema de espaçamento. E vou mostrar como você pode criar uma nova tela soltando esses sistemas de espaçamento. Agora, você também pode nomeá-los, por exemplo, você pode nomeá-los como se esta fosse nossa margem. Sei que essa será minha margem. Este será o espaço da Seção. Então eu sei que esse será o meu espaço de seção. E da mesma forma, tudo isso vai ser o menor entre algo assim ou apenas chamá-lo de espaço um. Este será o menor. Essa será minha margem. Esta será minha seção, espaçamento de seções ou margem de seção do próximo trimestre. Só para manter a mesma técnica de nomeação. Então agora, se você vier aqui, por exemplo, estou construindo uma nova tela ou estou construindo um novo design aqui. Então, vamos copiar este. E deixe-me mostrar-lhe. Se eu não tiver nada aqui. E eu queria iniciar minha tela para que eu faria rapidamente é mudar, mudar. Quando eu pressiono Shift I, você pode ver que tenho coisas diferentes aqui. Posso soltar botões. Posso soltar a ilustração. Aqui temos o sistema de espaçamento. Então, vamos começar com essa margem espacial ou espaço seis. Aqui nós o temos para que eu possa soltá-lo assim. E agora, se eu tentar digitar algo aqui, vamos a nota da Sally. Então eu sei que preciso manter essa margem aqui antes de começar algo. Este vai ser meu espaço. Da mesma forma, se eu quiser adicionar um novo texto ou quiser adicionar algo abaixo dele, vamos chamá-lo de subtítulo. Sei que preciso de oito pixels de espaço entre eles. Então eu posso pressionar rapidamente Shift I, e posso adicionar meu espaçamento. E você também pode mostrar aos seus desenvolvedores esse sistema de espaçamento. Você pode criar um documento e mostrar a eles que este é o sistema de espaçamento ou este é o espaçamento que será usado. Por exemplo, vamos colocar I, shift I, e este será o meu espaço do sistema de espaçamento T2 está realmente sendo usado entre os botões. Então, os desenvolvedores saberão que o espaço dois é de 12 pixels e é o espaço entre quando você tem dois botões adjacentes. Vou preparar um documento para mostrar todo o meu sistema de espaçamento. Acho que espaço para foi usado. Aqui nós usamos o maior, acho que o espaço da Seção. Vamos adicionar o último. Espaço sete aqui. Então você tem que preparar algo assim ou isso. Então você pode ver aqui que temos o espaçamento de 3624 na verdade mudar I. Opa, não tipografia. Eu quero ir para o sistema de espaçamento e vou adicionar espaço três, acho que 16 comida espacial. Você pode ver que você pode nomeá-los. É difícil para mim desenhá-lo aqui. Você também pode nomeá-los por seus tamanhos, temporais, vou usar 2020 ou aqui. E 43, vou colocar 16. Isso é mais fácil de compreender e mais adivinhação digital que você pode ver aqui, quando eu clico aqui diz seção Sexual 40 marginal. Da mesma forma, posso adicionar 32, que precisamos de 24 maneiras, então vamos usar. Você também pode pesquisar aqui. Então, vamos beneficiar do que está acontecendo. Espaço. Aqui temos espaço e falta 24. Talvez eu não tenha nomeado corretamente. É por isso que não estava chegando. Mais uma vez, vou pesquisar o Shift I para pesquisar dentro dos meus componentes. E eu vou digitar 24 vai rapidamente para isso. E vou preparar um documento para meus desenvolvedores. Da mesma forma, você pode ver que temos espaçamento. Não podemos compreender o espaçamento. É 32. Então, vamos adicionar 32 aqui. É assim que você mostrará sua tela para seus desenvolvedores. Então isso é 43, mas acho que deve ser 40. Então, vamos tentar adicionar para a tela, acho que vamos mantê-la um pouco mais alta. Então, vamos tentar adicionar Shift I, e vamos adicionar 40 aqui, pelo menos 40 pixels quando houver botões para que os usuários possam pressioná-los facilmente. Esse é um problema de acessibilidade. Então aqui temos isso. Talvez possamos adicionar algumas sombras ou algo assim. Então é assim que nossa tela inteira é. Você também pode deslocá-lo um pouco para baixo nesta tela inteira, amostra 123. Então podemos fazer isso. Aqui temos um layout de tela perfeito. É assim que você usará seu sistema de espaçamento, sistemas em seus sistemas de design. Você também pode especificar se o sistema de design tem tabelas e muitos dados, você também pode especificar um espaçamento horizontal. Talvez você precise de quatro pixels. Então, para espaçamento horizontal, você criará blocos menores. Blocos menores para mostrar o espaçamento horizontal. Em vez de criá-los. Por exemplo, deixe-me mostrar, Vamos criar um bloco de oito pixels. E vou te mostrar que é dy dt nisso. E vou digitar aqui oito pixels. Isso vai ter uma altura separada, vamos manter a altura 40 e vamos usá-la. Seria, vamos remover o pixel porque é muito difícil. Opa, nós temos. Vamos colocá-lo aqui. Não é necessariamente que você sempre precise colocar algum texto aqui. Você pode renomeá-los. Por exemplo, vou chamá-lo de espaço horizontal. Vamos manter a borda espaço pequeno. Isso vai ser na piscina espacial, que será oito. Vamos mantê-lo entre colchetes. Tamanho. É assim que vamos criar. Vamos criar um componente. O que está acontecendo? Comando Alt ou Opção K. Este é o nosso espaço publicitário. E este será um espaçamento e também podemos criar para 1216 horizontalmente, o espaçamento não seria para assistir ótimo, seria muito pequena. Mas você pode criar isso e mostrar aos seus desenvolvedores que é assim que vamos usar esse espaço. Então você pode ver que isso está no espaço. Você também pode usar o espaço aqui assim e a nomeação. Por isso, é fácil e fácil entender que este é um espaço vertical. Algo assim. nomeação deve ser muito compacta e significativa para que seus desenvolvedores possam entender facilmente ou qualquer novo designer se eles vão entrar ou se juntar à equipe de design da sua equipe, eles podem entender facilmente que é assim que seu sistema de espaçamento funcionará. Isso é tudo sobre sistema de espaçamento. É assim que você vai para Controlar o Comando Shift quatro para ocultar meu layout. E é assim que você mostrará isso ao seu desenvolvedor. E você também pode colocar tudo isso em um grupo e chamá-lo de espaçamento. E você pode esconder e mostrar assim. Deixe-me ampliar apenas nesta tela. Você pode apenas escondê-lo e mostrá-lo assim. É mais fácil gerenciar isso assim. Pessoal, isso é tudo sobre o seu sistema de espaçamento em seu sistema de design. Vi muitos designers que eles não usam isso e eles não sabem como usar todo esse espaço em escala de sistemas. É assim que você vai nomeá-los corretamente. É assim que você criará componentes a partir deles e os colocará rapidamente em seus projetos enquanto cria seu sistema de design. Até lá, vamos aprender muito e depois tomar cuidado. Adeus. 35. Links e documentação em Figma - como Links de páginas e quadros: Agora terminamos nosso sistema de design. Vamos falar sobre algumas das dicas que vou te dar, que você pode usar na Figma. E um deles é que você pode ver na tela, na tela você pode ver que eu usei alguns. Por aqui. Você pode ver que este é um documento de princípio de design, e estou usando um pequeno ícone aqui, que é chamado de emojis. Então você pode usar emojis aqui. O que você precisa fazer é ir para mais G's, copiar e colar. Então, aqui temos isso. Obtenha emoji.com. Então, vamos tentar usar um daqui. Vamos tentar usar, vamos tentar usar qualquer um deles. Por exemplo, como este, esse será um desses, ou é por isso que não consigo selecioná-lo. Deixe-me ver. Sim. Certo. Então, vou selecionar isso. Isso não é assim, às vezes é difícil selecioná-los. Vou selecionar isso, selecionar este, comando C ou controle C. E vou voltar para Figma. Você pode ver, por exemplo, essa declaração de propósito. Eu posso chegar no final e posso colar aqui assim. Você pode ver que está me mostrando agora emojis aqui. Da mesma forma, você pode, você pode fazer é colar aqui no início, se quiser se lembrar assim. É assim que vai se parecer. Você pode copiar um emoji. E, por exemplo, eu tenho este. Eu gosto deste, então não sei por que não consigo copiá-lo neste navegador. Vamos tentar outro. Aqui. É mais fácil para mim. Ok, então novamente, a mesma coisa está acontecendo. Vamos tentar torná-lo menor. E aqui temos, por exemplo, como este. Vou selecionar este comando C. E vamos voltar a isso. E vou usar princípios de design como esse. E também aqui vou remover isso. Este é um truque muito simples para usá-los. Portanto, esse é um bom truque para usar ícones em seu design. Da mesma forma, por exemplo, você pode ver que eu usei aqui. O que eu fiz foi, na verdade, copiá-lo, basta copiar daqui. Você pode usar qualquer imagem, se quiser. E eu vi pessoas, elas tentam usar ícones e outras coisas. Por exemplo, eles viram pessoas usando essas marcas de seleção, por exemplo. E vamos usar essa verificação. E vou voltar ao meu sistema de design. Então aqui temos isso, por exemplo, você pode ver que isso é a mesma coisa que eu fiz com isso. Você pode ver além de usar isso, eu posso arrastar e soltar aqui assim. Então você pode ver não visível assim. Estes são, na verdade, links e você pode acessar e criar links para outra página ou dentro da Figma. Portanto, o truque é, por exemplo, eu quero ir para os sistemas de design desta página ou clicar com o botão direito do mouse em Copiar link para a página e escrever qualquer textura aqui. Por exemplo, vá para Design System. Clique neste link, cole seu URL, pressione enter e isso é tudo o que você precisa. Você pode mudar a cor dela, seja qual for a cor que você quiser. E você também pode usar um emoji. Talvez eu possa tentar algo como esse coração aqui. Vou usar isso e colar, basta colar no começo. Opa, então escape. Aqui temos um link muito bom. Então, se você quiser mover para essa página, basta clicar em, ir para essa página. Ele vai para lá. Vi muitas pessoas que tentaram ter categorias diferentes, grades diferentes e tudo mais e ligadas aqui. Então, em todas as páginas, eles têm o link para esta documentação ou sistema de design e tudo mais. Assim, você pode voltar aos princípios de design do sistema de design daqui, você também pode usar esses links para outras páginas também, se quiser. Portanto, isso é, na verdade, uma navegação. Você também pode criar um quadro separado aqui, chamar a navegação na navegação. Como este sistema de design de navegação, algo assim. E você também pode vincular, por exemplo, se eu quiser vincular isso, então acho que também posso copiar o URL deste. A partir daqui, posso copiar o link Copiar. Então você pode ver aqui dentro desta cópia, Copiar fichas do botão de link. E se você quiser adicionar aqui, vamos ampliar essa navegação para que eu possa replicá-la. E eu posso chamá-lo em fichas do botão, elementos de formulário. Posso colar meu URL aqui e ele voltará para lá. Se eu clicar em ir para o quadro, ele vai diretamente para esse quadro. Portanto, há muitas maneiras de usar esses links dentro da sua Figma. Você pode vincular nosso quadro, você pode vincular nossa página inteira e criar todo esse sistema de navegação de design. No momento, não vou clicar em link para isso. Vou manter este aqui. Assim. Tente minimizar o tamanho. Vamos tentar selecionar os dois. Mova-os para fora, então vou mantê-lo aqui assim. Mais perto da minha primeira tela. E isso é tudo. Estas são algumas dicas para manter seu sistema de design. Além disso, você pode ver aqui, eu vou dar uma última olhada sobre como nós realmente, eu o juntei. Essa é a cor. Esta é uma cor de fundo que estamos usando em todo o nosso aplicativo. O que estou tentando fazer é que estou tentando usar e combinar. Toda a equipe está usando o mesmo plano de fundo para cada elemento aqui. Então você pode ver ícones, botões, Tudo está usando as mesmas cores. Deixe-me ampliar. E vou mostrar que aqui está o link para baixar o tipo de letra Barlow. Aqui estão nossas cores. Estas são as três cores usadas pelas cores de nossos textos. E também o propósito deles de que essa cor seja para esta. Então, na verdade, estamos tentando usar, acho 12345678910 ou 12 cores no máximo em todo esse design. Espero que você tenha aprendido muito e aproveite toda essa jornada comigo. Altos e baixos podem vir em toda esta jornada de janeiro. E eu adoraria embarcar e outros geralmente são devidos em breve. Então, agora vamos nos ver e vamos nos despedir. Porque esta será a última lição. Quero que você crie algo semelhante a este, um sistema de design simples do seu aplicativo. Você pode usar a versão clara e a versão escura. Cabe a você. Isso é tudo. Espero que você tenha gostado deste curso e fique em sintonia comigo, confira meus outros cursos até lá, tome cuidado. Tchau. 36. Atribuição do sistema de cores: Agora a hora é para sua primeira tarefa. Agora, sua primeira tarefa deve ser criar um sistema de cores para seu sistema de design. E antes disso, você precisa criar pelo menos quatro ou cinco, pelo menos quatro telas do seu aplicativo ou site móvel ou qualquer coisa que você esteja desenvolvendo. Uma ou duas telas, pelo menos duas páginas do seu site e pelo menos quatro telas do seu aplicativo móvel. Então me dê, mostre-me um esquema de cores. Crie um sistema de cores como este e mostre-me suas cores primárias, secundárias, suas cores para suas cores de textos, as cores, seus cinzas e pretos você ou quaisquer cores ou estados suplementares ou invocadores que você vai usar. E mostre-me tudo o propósito definido, dê-lhes um propósito, e mostre-me o que você tem quad. Então, estou ansioso para mostrar, ver sua tela. Você pode criar uma captura de tela. Você pode clicar nisso, por exemplo, isso é cores. Você pode criar um clique aqui, exportar. Você pode exportar isso, exportar cores em sua área de trabalho e carregar isso e me mostrar esse sistema de cores, todo o seu sistema de cores. Estou esperando por um sistema fechado. Encontrarei você e responderei sempre que puder para sua tarefa. Vamos começar. 37. Sistema de tipografia - escalas e estilos: Agora é a hora de sua segunda tarefa. Esse seria seu sistema técnico ou sua escala de tipos e seus diferentes estilos de tipo que você construirá para o seu sistema de design. Então, estou ansioso para ver suas tarefas. Você tem que criar uma escala de tipografia e um sistema de design de tipografia como eu fiz. Vou te mostrar. Então é assim que você tem que me apresentar. Você tem que me mostrar que este é o seu sistema de tipografia ou seus tipos de letra, escalas diferentes e atribuir a eles o propósito, o que esse estilo estaria fazendo assim. Este é o meu título, este é o cabeçalho ou subtítulo da minha seção, seja qual for o título do curso atribuído a essas escalas de tipo. E você tem que me mostrar que também pode compartilhar seu documento, por exemplo, clicando em Comprar aqui. Você pode copiar o link e apenas me enviar o link em vez de me mostrar a coisa toda. Você pode me mostrar o link que eu termino. Você pode continuar atualizando esse link. Vou vê-lo. Basta me enviar uma mensagem que temos. Atualizei e adicionei meu sistema de ícones ou meu sistema de grade ou qualquer coisa ao meu sistema de design. E vou dar uma olhada nisso. Certifique-se de criá-lo, mostrar-me e compartilhar comigo o link. E você também tem que criar alguns combos de combinação de tipos, como você pode ver que eu criei aqui userinfo, e esta é minha seção, reprodução de vídeo. Então, cabe a você. Você tem que mostrar a combinação, como serão os componentes, quais serão as distâncias entre diferentes. Já os cobrimos em nossos sistemas complexos aqui. Componentes do curso. Não precisa se preocupar, basta criar uma escala de tipografia. Isso é tudo o que você pode encontrar o link desse arquivo que vou compartilhar com você nos recursos. Também vou compartilhar o arquivo Figma, o arquivo Figma real para todo esse exercício. Certifique-se de baixar e importá-lo. E você pode fazer isso clicando aqui. Voltei para Início, clique no arquivo de importação e você pode abrir esse arquivo. Vamos voltar ao nosso sistema de design. Esta é sua segunda tarefa, sistema de escala de tipografia, e mostre para mim. Cuide-se, adeus. 38. Atribuição de botões e átomos: Agora, sua terceira tarefa é que você tem que criar os átomos do seu sistema de design, que na verdade são seus componentes menores, como botões, pequenos chips em quatro chips, algo assim. Navegações. Este é o documento que comprei de você. Fichas de botão, barras de progresso, itens de formulário. Então crie um documento como esse e me mostre em diferentes estados diferentes. Você pode criar variantes diferentes e mostrar este documento ou compartilhar o link comigo. Você pode clicar aqui no compartilhamento e compartilhar o link, copiar o link e me mostrar o link deste documento. Certifique-se de que você o nomeie corretamente. Você também pode escrever seu nome aqui. Por exemplo, meu nome, dash UX, designer. Posso criar e usar o maior aqui. Ou posso escolher essa camada e posso usar 48, algo assim, e usar preto. Dessa forma, vou saber que este é o seu arquivo ou isso pertence a você. Às vezes abro muitos sistemas de design são muitas tarefas para verificar e esqueci o que, quem realmente, ou quem é o aluno ou quem projetou isso. Certifique-se de colocar seu nome aqui. Ok, então aqui temos isso é o que eu preciso. Você pode criar isso e mostrá-lo para mim. Estou ansioso por suas tarefas. Vamos começar agora. 39. Ícones de illutrations e sistema de grade: Agora, sua próxima tarefa é que você precisa criar seus ícones e sistema de ilustração e mostrá-lo para mim. O sistema de ícones também terá seus logotipos. Você pode ver o que ele e eu temos dois logotipos. Assim, você pode criar logotipo, logotipo pequeno e certificar-se de que esses são componentes para que você possa adicioná-los facilmente enquanto estiver projetando. Da mesma forma ilustrações, você precisa redimensioná-las. Você precisa dimensioná-los corretamente para que eles possam ser inseridos no seu sistema de design facilmente. Essas são duas coisas que eu preciso de você. Além disso, se você conseguir criar esse desktop do sistema de grade, tablet móvel, isso seria uma vantagem. Então eu preciso de três deles, ícones, ilustrações e sistema de grade. Esses são os três que você criará a seguir. E na próxima tarefa vamos vê-lo, estou esperando por suas tarefas. Basta começar agora. 40. Projeto do curso - Sistema de design usando Figma: Agora é a hora de criar componentes maiores. Então você tem que criar uma seção de componentes aqui, uma placa de arte e me mostrar quais são os componentes maiores do seu sistema de design e como você vai implementá-los. Certifique-se de que eles sejam mais fáceis navegar e que eles tenham variância e tudo adequado se tiverem algum estado exagerado ou qualquer estado ativo tentado criar variância. Isto é o que eu preciso de você, seus componentes do seletor. Então, este vai ser o último, eu acho. Enquanto isso, se você pode criar um sistema de espaçamento, essas são as duas últimas coisas que eu acho que o sistema de espaçamento restante. Este é o núcleo do sistema de espaçamento do sistema de design, grades, tipografia e cores. Essas quatro coisas são, você pode dizer a base ou os pilares do seu sistema de design. Todas as outras coisas vão se basear neles. Por exemplo, os botões, eles importarão as cores e o texto e também o espaçamento do seu sistema de espaçamento vertical. Da mesma forma, seus ícones, eles vão usar um sistema de espaçamento como temos 3224 pixels como em seus componentes maiores, eles vão usar tudo isso. Isso é tudo isso vai ser sua última tarefa. Você pode compartilhar todo o sistema de design e também tentar criar páginas diferentes. Então eu posso ver que você tem a ideia de separar seu sistema de design. E você também pode criar um link. Por exemplo, aqui você pode ver que eu tenho um link aqui. que eu possa voltar ao sistema de design clicando aqui, vá para a página, e também posso voltar para lá a partir daqui. Isso é tudo isso vai ser suas tarefas finais. Mostre-me seu sistema de design completo e ficarei mais do que feliz em comandar e responder e ver o que você realizou. Isso é tudo que eu acho que cobrimos muitas coisas nesta classe. Espero que você tenha gostado e aprendido algo novo para mim. Certifique-se de me enviar alguns comandos e responder de volta. Seria um prazer ver seus comentários sobre essa aula. encontraremos em outra aula até então, tome cuidado. 41. O que vem a seguir?: Obrigado por ficar comigo durante toda essa classe de sistemas de design usando Figma, aprendemos muito sobre sistemas de design. Espero que você confira minhas outras classes que são sobre esquema de cores, tipografia, design de layout e muitas outras coisas que vão fazer você ou transformá-lo em uma interface de usuário profissional e usuário designer de experiência, del, então eu vou encontrá-lo em minhas outras aulas. Cuide-se, adeus.