Figma: crie um sistema de design

1. Introdução ao curso: Ei, bem-vindo a este caminho. Vamos falar sobre o sistema científico. Vamos aprender qual é o seu verdadeiro sistema científico, como usá-lo. E, ao mesmo tempo, estaremos aprendendo Fichman para criar nosso próprio sistema de design Em todo o processo, estaremos aprendendo como fazer layouts cumprimentam Ajudar você a escolher Colores Como criar sua própria paleta? Como escolher um grupo de tipos de letra também. Como criar um ritmo vertical. Como escolher o seu tipográfico é chave e fora do curso Nós estaremos criando um monte de fora componentes ou elementos para o seu do mesmo sistema como caixas de seleção, batalhas de rádio, garrafas fora do curso Texan impulso X áreas, tudo o que coisas carnais. Espero que vá para a aula. Meu nome é Bruno. Você aceita você? Eu designer. Trabalho para uma empresa de big data. Eu tentei criarproblemas simples e difíceis, problemas simples e difíceis, então eu espero vê-lo na lição sobre Vamos começar com isso 2. O que é e por que um sistema de design: Então, primeiro lugar, obrigado por ir ao curso. Vou ser uma breve introdução sobre o que a nossa decência tem. Basicamente, o mesmo sistema é uma mistura entre você I componentes para designers e citando componentes para desenvolvedores em desenvolvedores front-end. Então isso faz com que, útil é combinado é o que faz um sistema de design Imagine a parte inferior do componente. Certo, quero dizer, nenhuma grande temporada que cada vez que um designer custa uma bala, fundo tem que fazer isso sozinho ou ela mesma, de novo, na mesma coisa se aplica ao Loper. Imagine que cada vez que o desenvolvedor tem que colocar uma garrafa na página tem que ir e ver os rádios fronteiriços que eles chamam. Ou que eles enfrentam tudo para que o script demorado e no final, dá consistência a eles para a plataforma ou os problemas que você está construindo. Então, basicamente, os sistemas científicos são muito bons para dar consistência a todos. Além disso, tornou mais fácil ser cantado com a tomada de decisão. Então todo mundo permanece vivo, uma cercas e melhores equipes de desenvolvimento Worf adoráveis, porque se você tem componentes senhor, você não é, não é o que está gaseando todos os dias tipo de componentes que você está fazendo e todo mundo fala o mesmo linguagem. Eso outro muito. E isso faz com que o provavelmente assinado dure mais tempo porque você comete menos erros. Cada tudo é mais consistente. Como eu lhe disse todas as coisas, para falar a mesma, a mesma língua e no próprio e isso é, mas muito importante para o seu para o negócio e a empresa porque ou para si mesmo, porque a longo prazo, Diz que é seguro. Dinheiro no final, pode parecer algo que você gasta dinheiro com ele e porque talvez você vai gastar como um mês fazendo isso. E talvez você não esteja sozinho. Você está trabalhando com um grupo de três ou quatro pessoas para que a realidade um pouco de dinheiro arriscando, mas no final sozinho eles estão correndo, é muito bom para o em outro Marie em. O importante é que você ia fazer um produto melhor. Então é por isso que basicamente todo dedo do pé de elogio faz qualquer sistema de sentido não se opor precisa dele, uh , algumas estradas , sim , eu só preciso , tipo, básico Você gosta de falar com eles caras, Mas, na maioria das vezes, recomendei quase todas as vezes. Então vamos começar e ver alguns levantamentos decência que eu recomendo dar uma olhada. Ok, então vamos em frente. 3. Interface figma: Então bem-vindo a esta lição. Estamos indo para o pé, Leonard. Vai ser consertado. Minha interface. Se você já tem, use Fichman antes de escapar desta lição porque talvez seja um pouco chato para você . Mas se foi a primeira vez que disparou MMA de figo, um, um, apenas um lembrete dos dias de água vitimizar. Projetar ferramenta de prototipagem para mim agora é uma das melhores ferramentas lá fora. E a coisa legal sobre Fatemeh é que ele é ah, ele pode ser um aplicativo de desktop, mas também. Você pode trabalhar no navegador em qualquer incêndio para que você possa usá-lo em qualquer sistema operacional, como forros de janelas Mac , onde quiser. Dedo dedo do pé do sinal. Ah, você está pronto para ir. Então é uma ferramenta fantástica porque eles eram todos deles, que existem outras ferramentas pré legal, como Ah, é obter que só funcionou para Mac ou bem em tudo. Xtinha trabalhado para o meu PC, mas se você é um usuário de Lena vai ser complicado. Então, de qualquer maneira, vamos começar e vamos criar primeiro. Ah, arquivo. Aqui parece que eu quero dizer que eles param o aplicativo que você vai ver agora que eu tenho estes menu aqui, mas de qualquer maneira, tudo pode ser feito apenas dentro deste. Ah, dentro desta janela. Então não precisamos deste menu. Ah, aqui. Quando isso é meio fora da nossa mulher, Speight e então eu já Speight e então eu jácriei um. Mas eu vim pressionar aqui no fundo da solha e ir para o fogo novo. E o mais fantástico é que o arquivo o arquivose abre como um campus negro. Agora, se você clicar aqui, você pode pegar o nome. Então vamos renomeá-los, pedir-lhes para compartilhar o sistema científico, e vamos aprender a base. São as ferramentas básicas aqui. Eu não vou muito fundo porque vamos vê-lo mais tarde como nós um sui ver, antes de termos este menu aqui, mas as mesmas funções, você vai tê-los aqui também. Então é exatamente o mesmo menu aparecer aqui em baixo. Então, enquanto você pode pegar isso, há um monte de coisas como você arquivo que você pode importar para a partir de esboço. Hum, você pode jogar seus emissores versões seguras porque a FEMA tem esse recurso escolar que você pode, hum, você tem a pessoa no sistema dentro dela dentro de seu núcleo. Então você não precisa depender de software de terceiros e bem, e vamos para o importante aqui. Ah, nós temos aqui. Eles se movem em uma ferramenta de escala. Aqui temos a moldura nestes bancos de vida. E aqui temos nossa poliomielite sobre as coisas são linhas retangulares, flechas, opiáceos ou formas. E você tem aqui como um atalho para colocar suas imagens. Este é o quatro Vector desta banda. Sim. Você sabe, só você pode sim, pintar o que quiser. Lápis. Encontre-o indie. Eu nunca uso essa parte. Se você está em um uso de um tablet para projetar Você é bom para ir com a caneta ou sim, se você está fazendo Simon de centros retos agora, o Tito é, obviamente, para o texto. E isso é para comentários para colocar comentários dentro de seus sinais. Eu recomendo, como você pode ver aqui, perto dos soviéticos, você pode ver aqui algumas letras como R l peneirar l. Estes são os circuitos. Eu recomendo, como você pode ver aqui, perto dos soviéticos, você pode ver aqui algumas letras como R l peneirar l. Recomendo apenas o dedo do pé, hum, lembrar o básico como retângulo, linha oval e o quadro. Estes são muito úteis. Oh, não. Eu não quero colocar comentários agora, então eu vou pressionar F, e eu vou ser capaz de colocar um quadro se você está vindo de um esboço, isso é chamado eles são javalis ou seu outro eu onde eles chamam eles de campus. Ah, aqui. Pés. molduras de Michael Holden. Ok, então isso é muito importante para lembrar, porque tudo tem que ser o sinal em quadros em Sigma. Ok, então se pressionarmos, hum, ok, se pressionarmos f a que funciona, que funciona tão bem A ou F. Então, se você selecionar o f ah kee ou ir para o frame, você pode ver aqui neste lado direito, Bart que você tem como algumas predefinições para o telefone para tablet para o papel do mundo desktop mídia social , , o que quer. Isto é muito fixe. Então você não precisa, uh, uh, ficar estressado sobre quais tamanhos, dois dois e tudo mais. Se eu estou descendo para sites chicotes, eu costumo ir com MacBook pro e alguém que eu diga, Por que você não vai para desktop? Tudo bem? Porque, como você pode ver, eles têm servido o mesmo com eu menti 1440 Mas a altura aqui é menos altura. E eu acho este pré legal ou eu gosto mais porque quando você está apresentando algo toe cliente com estes a proporção de aspecto, é um pouco para um quadrado para o meu gosto. Vamos apenas dar um exemplo de como todos eles se parecem. Então pressionamos f novamente e então escolhemos meu pro quem. E agora você pode ver a diferença aqui que é mais como é mais quadrado como ele? Sim, é, ah, ah, 4/3 de alguma coisa. E isso é mais como, você sabe, estilo panorâmico para apresentação vai se encaixar melhor e também, quando eu estou projetando para sites de forma útil, você re assinar, você tem que levar em conta que Normalmente aqui vem um folheto. Temos que presumir que o bruiser, os tops, osmanuais, todas as coisas e atrás, provavelmente temos algo na barra de ferramentas ou algo assim. Temos que presumir que o bruiser, os tops, osmanuais, manuais, todas as coisas e atrás, Então, no final, isso vai resumir algo assim. Mas eu quero que meus projetos sejam senhoras nuas. Então estes são os nossos quadros onde podemos colocar os nossos elementos. Eu tenho Sim, pressione são para fazer um retângulo. Ok, então algo interessante para quando você, uh, quando você está colocando opiáceos em seu campus e você diz, deixe eles é que você pode ver aqui no trabalho lateral que você pode usar como Elaine em que ele se alinha a o campus no topo do meio. Você sabe muito bem que pode movê-lo por aqui. Você pode movê-lo também. Estamos apenas selecionando. Mas pode ferir. Foi a posição aqui no 00 porque ele queria no topo. Faça isso pela Heather, por exemplo, algo assim. Vai ser bem simples. Às vezes você vai algo assim, você não percebe que você é, você sabe, como, como, 18 vendas de pico antes de você se adequar. Então isso é prequel e todas as coisas que você pode fazer aqui também. Vamos para mim em um pouco aqui que você pode fazê-lo com comando ou controle, além de botões que aqui você pode mudar os rádios de fronteira fora do nosso retângulo. Se ampliarmos aqui um pouco mais, podemos ver aqui também que podemos nos mover em torno deste contraponto e diz a rádio fronteira Sicília. Às vezes você pode precisar, por exemplo, se você está projetando como um carro ou algo como um bilhete, ou você quer dar esse sentimento que você quer que as se você está projetando como um carro ou algo como um bilhete,ou você quer dar esse sentimento que você quer que as fronteiras sejam com rádios e isto para ser um quadrado? Porque se você fizer isso, todos eles vão mudar. Mas há este pequeno ícone aqui, cantos independentes. Você pode colocá-los para fora, e então você pode vir aqui e sim, você sabe, você pode apenas colocá-los para cima e um pouco. Então, no caso de você precisar deste tipo fora de jogo como carro ou algo assim, você pode fazê-lo. Ok, então, você sabe, um, aqui, bem, vamos falar mais tarde sobre todas essas coisas. O que? Sim, bem, não mais tarde falaremos mais tarde sobre isso então você só precisa saber que as ferramentas que você precisa para projetar tudo que eles estão aqui, e enquanto algo interessante é que você pode mudar a Guerra Fria Aqui. Bem, neste campo final, mas isso é praticamente o que você precisa. cerveja do dedo começou agora. Então eu vejo você e sua próxima lição 4. Alguns sistemas de design: Ei, bem-vindo de volta nestes. Ouça, vamos ver quais são os componentes principais? Como foi feito? A. Parece. Vê-las que eu tenho aqui se prepara para casa. Se forem amostras, todas elas são grátis, então você pode ir baixá-las. Vou colocar seus links para que você possa dar uma olhada neles e brincar com eles ou modificá-los ou o que você quiser fazer. Como eu disse, eles são Frito para olhar para eles. Ah, se vemos aqui o 1º 1 podemos ver que nós ao meio nestas páginas, como tipografia Colores, ícones, ícones, alguns ativos embarcar nas rádios selas pré importantes também cumprimenta por que há controles de branding que é principalmente botões neles fóruns e carros. Saber essas coisas, então esta parte como ele tem o componente. Vamos dar uma olhada em outro. Como podemos ver, temos novamente cores tipografia do que os componentes que incluíram aqui. Alguns quadros, que inclui algumas sombras. Ah, alguns elementos y, algo iconografia para. Mas como você pode ver, é meio que a mesma coisa. Vamos dar uma olhada em outro aqui que você começa com um grande grau pré importante. Em seguida, eles se colocam para diferentes dispositivos. Eles têm novamente a tipografia de cores. Eu cones alguns ativos como avatares, rádios relatados novamente algum dia por anos. Em Sadow também é muito importante . E então os componentes aqui, como batalhas, começam a formar, cartas esses componentes, cetera, cetera. Você pode dar uma olhada aqui enquanto eles construíram aqui alguns gráficos. Então, sim, cartões, estes componentes. Mas como você pode ver, há uma base em todos esses , sistemas de design que são refrigeradores, tipografia, tipografia, cumprimentos no layout e rádios fronteiriços e deveres tristes. E há uma coisa importante nisso. É ir espaçando o coração do espaço que você definiu entre os elementos. Mas nós vamos ver e em profundidade, como em um minuto ou mais. Então podemos ir a ele com alguns sites onde algumas empresas eles colocaram seus sistemas de design . Existem algumas páginas da Web como relatório de sistemas de design ou Adele. Vou colocar os links para isso onde você pode ver alguns sistemas de design aqui, e você pode explorá-los. Basta clicar neles. Veja como essas empresas estão fazendo as coisas certas. Há dois que eu realmente gosto. Um deles. É carbono. Este é um sistema decente fora da IBM. Sim, é uma espécie de superior, de código aberto, o mesmo sistema e é muito, muito legal. É bastante extensa. É tão extensa. Isso às vezes é esmagador, é como, mas hey, o que precisamos nesta parte é ah toe. Veja, quais são os padrões comuns entre todo o sistema decente para que possamos tirar o melhor de todos eles e o que fazer no início. Então, como podemos ver aqui, eles são definidos e concordaram com o estão usando como um para pixel ganância. Eles mudaram porque o outro começo que eles estavam usando sua data de oito pixels grande . Em seguida, eles foram para quatro e agora eles perceberam que eles precisavam de maneira pixel para ser mais operar e para satisfazer todas as suas necessidades. Então, mas como podemos ver, isso é o importante. Todos eles vão da mesma maneira. Então eles falam sobre a ganância e layouts, o minério de carvão, os ícones novamente o poço, eles tiraram um pouco sobre pictogramas e movimentos, mas isso não é importante para isso. O mesmo sistema agora está se baseando. Era onde eu estava falando, há um minuto. Como eles definem diferentes configurações de espaço de espaço para diferentes objetos. Então eles têm esse tipo fora, hum, espaçamentos duas necessidades diferentes e também. A coisa boa sobre os mesmos sistemas é que o que é chamado de temas ou fama é que você pode personalizá-lo. Você escolhe como um pré fez o mesmo sistema, mudando alguns parâmetros aqui como as cores como a tipografia. E talvez se você quiser mudar o luto um pouco ou o que seja, você tem um produto diferente e você não tem que pensar muito. Demasiadas coisas. Tudo vai ficar em cascata, sabe? Então, se mudarmos o que é chamado tokens, esses tokens, nossas cores, a tipografia de espaçamento e eles chamam isso de global aqui. Mas pode ser como o layout em algumas variáveis acima. Então, sim, vamos ver clareza, design também. Claridade é som lá. Uh, ele está pendurado sistema chamado italiano vê-las para que você possa ver aqui é ah, ah, ah, ah , ah, ah, onde a empresa é e eles estão usando, você sabe, essas coisas. Se formos à comenda, temos tudo isso. Mas eles ligaram para cá, Butters. Eu os chamaria como, sim, fichas ou átomos. Você dá o nome. E eles estão definindo aqui as cores. Certo. Como podemos ver, todos os britânicos fazem o mesmo. Eles têm aqui os componentes da mesma maneira. Ah, eles têm uma audição em carbono na parte superior dos componentes, ele acordeão. Você pode ver que eles têm todos esses componentes realmente bem documentados e como implementá-los em código. Então, isto é tudo sobre os sistemas científicos. Então vamos cortar a porcaria e ir para Yes, Goto nossa primeira abordagem dedo do pé projetar nosso sistema de design. Ok, então a primeira parte vai ser como escolher cores. Então vamos em frente. 5. Cores: Então, temos anteriormente aqui o nosso campus ou realmente feito com um MacBook Pro um nossa guerra. Essa é uma boa. Só um lembrete. Você pode apenas configurá-lo aqui. Então o que vamos fazer, é como criar nossas paletas de cores. Ajuda aos estudiosos e tudo mais. , Às vezes,o desbaste Kohler será dado a você. Tipo, talvez sim, eu termine Você está trabalhando para McDonald's ou Coca Cola ou alguma outra marca, e eles te dão as paletas de cores porque eles já têm, tipo, diretrizes de marca. Então, e então, se você está trabalhando para o meu doador alguma certeza que sua primeira cor será algo em torno disso e algo em torno disso e da chamada secundária ou será como aquele amarelo como algo assim. Ok, então você está praticamente no deles Eles são chamados por muito bem. Mas se você está fazendo como, produto a partir do zero ou você está trabalhando com um cliente que realmente não sabe o que cores para colocar em seu site ou aplicativo ou suas diretrizes de marca cara são praticamente perto de conhecido ou 20 Eu sou vai mostrar-lhe como criar os paladares principais. Tudo bem, então o que eu costumo fazer é sim. Criou um retângulo. Aplique uma chamada aqui, então sim, que seja. Cory realmente não importa no início, eu só vou fazer uma ligação aleatória. O que eu costumo fazer é que ele tem que dizer bem. Eu só vou com alguns rádios fronteiriços. Então, mais tarde, quando você está apresentando isso para o cliente, é bem legal enquanto você pode deixá-lo na Síria, é claro. Eu costumo colocar aqui como um nome como o Isso poderia ser como o Yeah, minha cor primária. Eu costumo colocar aqui como um nome como o Isso poderia ser como o Yeah, Este vai ser o meu principal e o que podemos fazer aqui, é apenas duplicar estes e este vai ser o segundo mericle, ou ok. E então vamos criar Tom sobre cores como, digamos, ah em neutros. Ok, então sim, isso é o que vamos fazer. Eu costumo colocar como 100 primárias. Veremos mais tarde. Por que vai ser o nosso secundário 100 e neutro 100. Certo, mas vamos começar a definir nossa cor. Imaginemos que queremos, tipo, uma cor super azul aqui, tipo escalar azul. Pode ser da cor que quiser, não importa. Você está muito doente ou você gosta e fora do curso. É difícil estar de acordo com a marca e o sentimento que tem de transmitir ao cliente, certo? Então, sim, vamos deixar emitir nós escolhemos esta cor. Então o que eu costumo fazer se eu tiver a mina de calorias, eu vou com ela. Mas se não é o que costumo fazer, é que usei estas duas ferramentas. Este é o gerador de paleta de cores ou estes refrigeradores nome do site ponto Co. E isso é muito legal porque se você pressionar ah espaço do nosso aqui, ele vai gerar uma cor bonita aleatória. Paletas são paleta de cores da manhã. Então, e imagine que você gosta deste vermelho para sua aplicação. Você tem algumas ferramentas aqui. Então o que eu costumo fazer é imaginar que gosto deste vermelho. Mas estes velhos cursos são pré eu não sei tantas vezes sem graça. E eu não quero este tipo de cores fora na minha paleta, mas estes eu realmente gosto do quê? O que eu costumo fazer é apertar aqui o fundo da fechadura que você vê Agora ele está trancado e apresenta um espaço Morgan e enquanto ele gera. Outra palete baseada nessa cor e nessa cor, eu realmente gosto. Então eu vou trancar essas duas cores porque bem, neste também. Mas isso eu não tenho tanta certeza sobre isso. Esse tipo de coisa marrom que eu vou procurar, pressione a barra de espaço novamente. E enquanto eu gosto deste, então eu olhei e eu meio que ostentei o dedo do pé como você é e depois importado para o meu. Sim, podemos importá-lo para o nosso campus para que possamos escolher as cores. Certo, o reset. Outra característica legal aqui que é chamado de estados alternativos. O que ele faz é dizer é a luminosidade e sim e o lat bem, a outra leveza. Então, como podemos ver, eles estão nos dando alguns, uh é a mesma parte de cor com menos luz nessas partes e com mais luz aqui. Então todas essas cores vão estar na mesma banda fora do curso. Então, isso é bonito. Isso é uma coisa muito legal. Mas imagine que já escolhemos nosso primeiro chamador com esses dias, e queremos obedecer o paladar nesses dois. Então, o que fazemos. Está tudo bem. Nós clicamos aqui novamente. Só desbloqueamos isso. Acho que já temos Kobe a cor deles antes. Agora já o temos. Aqui nós olhamos, ele olhou e nós temos que olhar, este é para que possamos mudá-los novamente. E agora pressionamos o espaço. Onde de novo? E podemos ver que estamos gerando essa cor. Fantástica chamada polit. Certo, enquanto essas cores são bem legais, como essas, talvez elas sejam muito macias também. Então vamos ver se há outra proposta que se adapte às nossas necessidades. Gosto deste tipo de coisa boa para os nossos neutros. Então, sim, acho que temos alguns vencedores aqui. Talvez essas Jill , coisas colombianas. Então vamos para outra rodada que isso não é tão ruim. Então vamos localizar, está bem? Cerca de 64 dias como deciframos novamente. Acho que vamos começar aqui. Chamada de sistema bem projetada ou e está tudo bem. Então voltamos para combater o MMA, e então podemos ir aqui para arquivar bem, vamos vir aqui e ir para arquivo e colocar imagem. Ou podemos apenas ir para as ferramentas para no lugar, emitir ou Podemos apenas usar o circuito Comando salvo K e define para o nosso fogo. Então, basta clicar. E aqui aparece a nossa paleta de cores. Ok, então há essa característica legal aqui. Quando clicamos na sensação de um objeto que é thes conta-gotas. É muito comum em ferramentas de design. E eu acho que vamos escolher essa cor para a cor secundária e para o neutro que vamos escolher. Eu gosto deste. Isso é meio verde, então eu gosto mais deste. Bem, está no lado verde, mas se o fizermos, isto vai ficar no azulado. Então, vamos lidar com isso por Hicks. Bem, Bem, vamos ver por que agora e o que vamos fazer. Chegou novamente à nossa paleta de cores, e então nós estamos indo para o pé. Quero ver esses estados. Não é tão ruim, na verdade, mas eu quero me ajustar um pouco porque a tonalidade eu queria azul, então sim, agora vamos para os Estados Unidos. Sim, bem, eles são uma espécie de graça, certo? Não é tão ruim, na verdade. Então eu só vou fazer uma tela definir isso e então eu vou tentar. Vou trazê-lo para Fichtner, como dissemos antes. Como uma segurança comum. Está bem. E isso colocou nossa captura de tela. Às vezes eu preferia, sim. O mundo com as capturas de tela. Então, a seta da mesma pasta, vamos deixá-lo para mais tarde. Então, eu vou com o conta-gotas. Venha aqui. Aprecio isso. Estamos prontos para ir. Então temos nossas cores principais aqui. Nossa cor primária para ação primária. Cor secundária para padrões secundários complementares Axiron. Algo assim, dependendo de como queremos fazê-lo. E você joga atrás de fundos. Obviamente estes preto é muito preto para o ponto de fundo. Por quê? Normalmente gosto de fazer isso. Crie todos estes. Sim, todos estes estados aqui. Então este seria o nêutron 90 porque tem 90% de desconto nesta cor, e vai haver um novo teste 80. Isso é muito estúpido agora colocar esses nomes aqui, mas você verá o ponto um pouco mais tarde. Ok? Então você faz isso com todos eles. Então, quando alguém alguém até chegarmos ao seu branco, que é uma cor também. Então eu sempre recomendo colocá-lo para fora e o que vamos fazer aqui, é fazer duas versões dessas cores primárias. Podemos ir para os Estados Unidos. Polit e whoops. Vá aqui. Sim, para os Estados Unidos e fazer em uma tela acionar isso e vir aqui e ver esses estados e fazer uma excreção desses dois ou outro truque que podemos fazer. É gentil. Venha aqui para Fichman. E se formos para esta cor e vamos aqui e tendemos manteve a cor em vez de dedo sextavado oito anos L isto é matiz, saturação e leveza. E o que é legal sobre isso é que podemos afirmar a leveza aqui, como em 10%. Então, se conseguirmos essa leveza para zero vai nos dar que aquele preto porque ele não tem Linus. Mas podemos ir com esses valores. Então eu acho que vai ser 30. É muito bom. Então vamos para cá também. 30 como vimos antes, quando estávamos aqui , eram 50. Então o que podemos fazer aqui é colocar como a Primária 50 e agora vamos criar nossa pessoa leve disso Então, em vez de 50 o que temos que fazer. Levante-se e levante-se um pouco a 100 será branco. Mas nós queremos. Tipo, se isto é 50 e este é 30 que é um 20 de diferença, talvez 70 imunizados, mas eu prefiro algo mais leve. Então nós vamos com Sim, vamos com 90. Então este vai ser o nosso primário 90, ok? E nós vamos fazer a mesma coisa aqui. Nós estamos indo do pé para arrancar, tipo, 30 aqui. Então nós temos os mesmos valores aqui estão aqui correspondentes ao estudioso. Então isso vai ser 30 e isso vai ser 90. O que? Tudo bem. Então este vai ser o nosso secundário 90. Podemos chamá-lo de 90 se quisermos saber os valores ou bem, neste caso, não foram 50. Então estamos aqui um pouco claros, mas tudo bem, só para fazer tudo parecer um americano para que você não precise do dedo do pé. Quer dizer, está perfeitamente bem da sua parte. Nome aqui, Secundário 50. E este vai ser o aqui na leveza. Tem 44. Quero dizer, não precisamos ser tão puristas porque é apenas a referência deles. Algumas outras pessoas gostam de gostar desse nome, como padrão primário na luz primária, escura e primária. Algumas outras pessoas gostam de gostar desse nome, como padrão primário na luz primária, Você pode nomeá-los, nomeá-los como quiser. Eu faço isto. Sim, para o bem de saber que tipo de valores são diferentes deste é OK. E para os neutros, a mesma coisa se aplica. Poderíamos ser como fazer aqui, como adolescentes, que temos valor Ciro aqui. Isso seria então provavelmente está indo. Sim, você pode fazer como 10. Isto vai ser. Chama-se “zero neutro”. Está indo para ser consistente. Você pode nomeá-lo. Você pode nomeá-los como você realmente eu quero isso pode ser, tipo, 20. Bem, eles estão meio fora. Aproximado assim por diante. Então ver você e eu quero dizer isso com todas essas cores do que Ok, Huh? Então nós temos quatro pronto todas as cores fora. O que eu costumo fazer aqui é como bota super macia. Talvez este grande na fronteira. Então podemos ver aqui que é este branco que poderíamos chamar de nós também, como neutro 100. Mas sim, isto é branco. Poderíamos nomear. Este tem preto, mas não é preto puro. Então temos nossa paleta de cores criada. Há Às vezes você gostaria de criar cores dependendo se você tem notificações. Então algo assim, como se algo fosse bem sucedido ou fosse um rugido. Se você estiver indo para aplicar este tipo fora de notificações, você tem que criar mais três cores, que são, tipo fora algo como estas para os erros. Algo verde para o poço, o que você pode fazer. É só que é algo que eu costumo fazer é CS ir com o vermelho e você apenas move estes para o lado verde. Então você está Você fica no mesmo tipo fora de alcance. Sim, isso é verde. É brilhante um pouco demais, mas está tudo bem. E então precisamos de um aluguel por dias. Sim, algo em torno disso. Então essa seria a nossa, hum crítica ou uma cor rugido. Eles conhecem o nosso núcleo de sucesso e, em seguida, a nossa cor de aviso. Algumas pessoas gostam de fazer outra cor chamada em folclore. Você viu esse tipo de algo assim? - Sim. Este tipo de azul como uma nova viagem. Você pode fazer isso se precisar, o que você costuma fazer? É a mesma coisa que fizemos por isto. Nós fazemos. Fazemo-lo para os nossos três para duplicar. Eu estou suculento. Sim, A chave no die Presse também enganou a chave para que eles não se movam. Se eu pressionar o álky, posso movê-lo livremente. o álky, Mas se eu quiser na mesma cega você sim. Pressione a segurança ao mesmo tempo. E vai só para o dedo do pé, uh, deixar você se mover verticalmente nas mesmas marcas ou não é como ou recentemente, mas eles ficam perfeitamente de linha. Então só para você saber, e nós estouramos de novo, como todos os turnos para duplicar esses elementos novamente. E nós vamos apenas mudá-los para 30 e 90. E estamos prontos para continuar. Este pode ser o 19. Sim, 90 e 40 dias. Oh, querido. Bem, é o contrário. Desculpe. Então, sim, podemos fazer com a mesma coisa com o núcleo, então vamos com 13 19 30 19. Ok, bem, nós vamos apenas deixar o erro crítico para trás isto é este tipo de importação em quatro azul? Porque nós não precisamos agora e e isso é praticamente fora da forma como criar uma paleta de cores e como escolhê-las. Se você está indo para se inspirar tão bem quanto nós conversamos, você pode vir aqui e elogiar a barra de espaço. Vamos receitas para que possamos ver é a página inicial bem para o gerador. E, sim, você pode pressionar aqui o Espace mais e você pode obter tanta inspiração também. Ele tem algumas características legais como você pode. Hum o quê, isto? - Sim. Imagem de Furman de Piccolo. Você pode carregar uma imagem e, em seguida, a paleta de cores será aplicada aqui. E como sempre temos esses recursos legais que você pode dizer tomar como suas cores estão indo para executar com pessoas que tem algum problema com a sua visão. E assim você pode relacionar como ele vai executar essas cores para pessoas que precisam de algum especial exceto civilidade. Hum, coisa certa. Então isso é muito legal. Passeie estes thes mais de um. Eu quero te mostrar, tipo, super rápido. Eles têm, tipo, algumas paletas de cores premium com. Eles são super legal para ele diz, este é pré bom polit. E sim, este é o Senador Que Prequel Um. Então, neste também. É muito agradável. E você já tem esses neutros aqui, então eu acho que você pode chegar aqui no espaço e você pode baixá-los. Você pode apenas salvá-los. E, claro, você pode simplesmente escolher uma cor. Temos que escolher uma rolha muito semelhante a estas. Você pode pagar. Eles dirigem código aqui. Vamos fazer isso. Só por causa do bem. Off. Vês? Outra ferramenta. O expresso. Aqui, copie. Nós viemos aqui de novo. Nós baseamos isso. E temos esta cor aqui. Então o que podemos fazer é pressionar este botão aqui e temos essa lógica Anna monocromática e criar e complementar e negociar aleatoriamente. Tudo o que podemos ir aleatoriamente, é praticamente o mesmo, como pessoa, a barra de espaço antes na outra ferramenta. A coisa boa sobre este site é que você vê como suas cores estão indo para executar, certo, Então com Whoa. Se nós dois somos Theis e pressionamos Khobar, vemos que isso é muito legal. E isso é muito legal também. Vamos imaginar que estamos indo com essas coisas analíticas. Podemos ver como ele é formas em telas diferentes. E a coisa boa é incrível. estamos pneus tantas cores azuladas onde podemos fazer isso mudou a cor. Então vamos escolher como uma cor secundária. Nós escolhemos para nós antes de algo assim, e podemos ver como é esse sentimento geral. Então estes são de graça. Legal, , ferramentas para dois estudiosos, ok, e apenas terminando nossas cores. E nós vamos falar sobre algo realmente importante aqui em Sigma, a fim de criar um sistema exclusivamente projetado, é, Ah, Ah, FEMA tem esses estilos mais frios. FEMA tem estilos de cores, tem estilos de tipografia e tem muitos tipos fora de um estilo, para que você possa reutilizá-los. Eles têm, tipo, mesmo que seja estilos para as sombras e tudo mais. Então, é muito importante. Do são organizados e inconsistentes. Então, para isso, o que você costuma fazer você vai ouvir esses quatro pontos e com um objeto pressionado, você vem aqui e o que você faz? É ah neste Plus é assinado seu para criar uma equipe A. Tudo bem, então esta cor nós vamos nomear isso para nomeá-lo. Primária pisca 50. Ok, podemos chamá-lo de 50 padrão. Estamos na mesma página, está bem? E sabemos o que significa 50. Então, colocamos esse nome e damos criar um estilo. E agora podemos ver quando vemos que este objeto que não mais nós não temos mais a capacidade de mudá-lo ou a habilidade dedo do pé. Sim, fique confuso sobre este cartão. Diz o nome da camada fora do estilo da ordem judicial. Acabamos de criar a mesma coisa. Nós vamos fazer isso aqui com o Com estes 30 primários vamos criar outro estilo de cor que estamos indo para em vez de 50. Nós vamos colocar aqui 30 e esta vai ser a versão escura, ok? E criamos outro estilo. Nós fazemos a mesma coisa, este bastante repetitivo, mas é meio que meditação quando você está fazendo isso. E você disse às suas cores a multa depois, faça o seu estresse da decisão e se elas são boas o suficiente ou não, e esta vai ser a versão leve, certo? E você vai perguntar, por que você está colocando isso em vez disso fora? Eu não sei, como apenas, hum estes. Ah, suas mentiras ou essas coisas fazem ou o que quer que seja ou outra ou morte em um espaço ou algo assim. Vamos ver agora. Então eu coloquei seu último lá. E nós vamos fazer isso com secundário também para que possamos ver por que estamos colocando aqui nossos óculos. Muito bem, então em vez de primário, isto vai ser este secundário. Lembra-se disso? Que você pode nomeá-los como quiser, mas lembre-se, este é o último aqui. Então este vai ser o secundário e vai copiar novamente. Você é para eu não ter que anotar. Sempre que eu vou aqui para criar outro estilo de cor. Vamos com isso vai ser o escuro, e então nós vamos criar essa luz. Tudo bem, então não para a vantagem. Ali. Sim, aqui nos quatro pontos. E isso vai ser do que 90 vai ser a explosão de luz. Certo, então por que colocamos isso por último lá? Então, quando temos o seletor refrigerador e nós viemos aqui, como você pode ver agora nós temos nossos refrigeradores ordem como separado dos primários dos secundários. Se não colocarmos os óculos. Nós estamos indo para o pé. Tenha-os completamente não organizados. Eles vão ser, sim, um após o outro. Então, este é o último. O que ele faz é como um recipiente. Então tudo o que você colocar em primeiro lugar antes do último ano vai criar o nome da pasta Mais tarde sobre isso, você verá o nome completo. Mas ouve este contentor. É baseado em como nomeamos nossa cor de nossos paladares. Tudo bem, então se pegarmos esses dois Sim, nós Sim, removemos estes últimos nesta cor particular vamos ver agora que é livre, não está contido em nada. Deve ser a audição secundária. Mas removemos e está lá. Então, para isso, vamos e colocamos aqui estes últimos novamente. Chegamos aqui de novo e podemos ver que já está no seu grupo. Certo, então vamos fazer o resto para isso e voltamos em um minuto. Ok? Então, eu vou nessa. Ei, se você às vezes cometeu um erro de nomeação ou algo assim, o que você pode fazer é ir aqui e selecionar estes pesados o estilo, este tipo off botão de configurações, e então você pode pensar o nome. Porque aqui não é culpa. Este é o escuro. Burton disse que você pode ver o nome aqui. Volte, e aqui verá que já está feito. Ok, então eu vou continuar, tipo, adicionando nomes aqui como loucos e vejo você em um minuto. - Então estamos acabados. Agora é o seu dedo do pé. Faça sua paleta de cores para sua aplicação ou site ou, principalmente, para seu sistema de design . E, como você pode ver quando você está, não estão selecionando qualquer objeto que você tem aqui seus estilos locais. Agora, em Lee, temos apenas nossas cores ou paleta de cores. Mais tarde, quando somos como estilos de tipografia e tudo em devedores tristes e fronteiras e tudo mais, eles aparecerão aqui. Ok, mas agora nós fizemos nossas cores é agora a sua vez. Então vá em frente e comece a criar sua paleta de cores. E por que você faria isso? Você ou quando você terminar, você pode servi-lo no nos comentários e assim podemos ver o nosso Sim, nossas paletas de cores que estamos criando. Ok, então vejo você na próxima lição sobre qual vai ser sobre tipografia 6. Layouts e grades: nova lição nesta lição. Vamos falar sobre layout e veremos a diferença. Ah, entre layouts e notas para que você possa chamá-los certo? Às vezes eu só penso nos nomes, um , mas , você sabe, vamos ver o que eles são neste grande artigo que Nick Babbitt ou escreveu nesta revista enorme. É muito bom que vai levar. Vou deixar o link também. Nós. Isso é algo. É interessante ler o dedo do pé. Faz como uma breve história sobre o que está acordado ou um layout. E como você pode ver, ah, cumprimentos e layouts. São essas divisões fora da página ou do campus ou o Nosso conselho que estamos trabalhando com isso tem sido assim por anos há muitos séculos não é apenas para design de produto ou design de site , é para o site. Na verdade, é meio estranho. Recente, antes de sites foram feitos sem qualquer tipo fora. Ah, layout. Eles estavam meio bagunçados. Na verdade, estou me referindo ao início do chicote. Mas como você pode ver neste artigo, uh, você sabe, como layouts que têm feijão aqui por muitos, muitos anos, certo? Há um pré. Este é um artigo muito interessante para ler, mas como você pode ver ao fazer livros e tudo menos claro, queremos falar sobre grandes nomes em Prodi. Entrar em detalhes, puxar a descida. Então isso pode ser, como uma boa referência, como o quê? Kindof layouts em todos os dispositivos que você pode usar direito, Por exemplo, como podemos ver aqui, hum, bem, basicamente layouts, eles são feitos de colunas. Estas listras verticais aqui, como você pode ver. Ah, há esses valores que você pode colocar aqui bem, este adulto X'd, mas não importa. Mais tarde, vamos replicá-lo em Sikma e basicamente o que fazemos, é Nós dividimos a tela em colunas para que saibamos onde colocar o elemento. OK, então não é a mesma quantidade de colunas que vamos fazer ou usar para arma para Web design quando vamos para iPhone ou para celular. O sinal. O mesmo se aplica ao iPod. Mas devo dizer que ninguém é. A maioria dos sinais são tipo fora do site e, em seguida, iPhone e fazer apenas pequenas alterações para limpar. Mas não para que você não crie mais para iPod ou tablets por muitas razões. Ah, mas voltaremos a isso mais tarde. O importante é saber o que queremos. É para fazer renda nas divisões verticais. Divida o mandril em colunas. Então vá em frente para figo MMA e fazer sobre a nossa fronteira aqui como fizemos antes. Sim, nós também. Smart book pro. Bem, este é o caminho que vamos para Sim. Apague isso. Não precisamos de mais. Então, em Fiqh Mile, o que podemos fazer aqui? Ah, se escolhermos o mandril, você temos essa coisa, essa coisa aqui que se chama ganância de layout. E se pressionarmos mais anos acordados, isso é acordado, concordamos com uma divisão vertical e horizontal. E é baseado no valor estimado nesses casos. 10 pixels. Pode ter 60 pixels. Onde quer que seja que você precisa eso cumprimentos são divisões verticais e horizontais. Certo, combinem. Mas isso está bem consertado. Não podemos, hum, não podemos fazer colunas a partir destes. Bem, nós poderíamos vir aqui e escolher talvez essas três colunas e essas embora três colunas , mas é meio difícil. Isso é bom para fazer ícones quando você está fazendo ícones. O que você faz é apenas você colocar um grande lado de um pixel e, em seguida, você e ir com super em breve e fazer assumir e começar a fazer os ícones ok. Mas, neste caso, não vamos usar saudações. Neste caso, onde vamos usar fazendo aqui, Comece aqui vai criar colunas. Ok, então, já que estamos projetando para um site neste caso mais tarde, vamos fazer um ótimo para telefones no in. Este caso vai ser para o site O que queremos fazer sua colocar como 12 colunas 12 colunas é principalmente o mais usado eu sou combinação layup. Sim, com colunas é a combinação de colunas mais comum. Você pode pensar que o cooler aqui se você preferir algo mais tarde alguém como eles azuis que você possa vir aqui enviá-los para o azul. O que? Você pode fazer o que quiser aqui as coisas opacidade aqui, caso queira algo mais difícil eu disse sim para deixá-lo como luz. Então você contra o elemento que você pode também é a cor que você quer. OK, está tudo bem. E então você tem algumas opções aqui. Isso vai determinar como as colunas estão situadas. Um alongamento significa que se eu aumentar esses braços ou as colunas estão indo para um estresse com ele, eu não costumo usar este roubo. Se eu for em tela cheia. Se você quiser projetar para toda a tela você pode usar este layout. Mas às vezes o que você quer é controlar o Eles apresentam um pouco. Então, o que você faz, é você apenas colocá-lo no centro para ganhar este caso. Como você pode ver, as colunas são super minúsculas porque a largura da coluna fácil como um pega. Mas vamos aumentar isso. E há algo interessante aqui com isto chamado de sarjeta e sarjeta. Existe espaço que está situado? Entre as colunas. Ok, compensar. Se ah, neste caso, não se aplica. Mas se você, por exemplo, posicionar o layout à esquerda, imagine nós metade. Ah, esse tipo de ciência onde você tem, tipo, uma barra lateral aqui, então você não quer contar esse espaço. E o que você faz é vir aqui, vir ao seu layout e começar a renunciar a isso, digamos, ali e depois? Você pode fazer é aumentar o com até que você está satisfeito com essas configurações, então você iria começar dedo do pé. Você tem que decidir onde se tornar uma barra lateral de muitos aplicativos para o dinheiro, e você tem um. Venho aqui e escrevo o que quer que seja e, em seguida, faço um começo para projetar o seu que é chato ou o que você está projetando aqui. Ok, então sim, é por isso que isso é. Isso é o importante sobre layout. Então você pode posicionar os elementos como este. Certo, mas nesses casos, não temos nenhum fio lateral ou somos. Não temos necessidade de começar pela esquerda ou pela direita. Sim, vou começar com o centro e e, neste caso, é a maneira de fazer uma pequena parada aqui alguns alguns off alguns designers o que eles costumam fazer. É ah, use uma grande venda. Grande maioria dos signatários. E o que um grande luto de vendedor significa. São os espaços que o deixaram aqui na sarjeta, nas colunas e tudo é um múltiplo de algum número alguns anos atrás. Mas de alguns anos atrás, a típica onda de pixels era o oito pixels com OK, então sim, era a coisa típica, então tudo era múltiplo fora oito. Então, neste caso, se você pode ouvir, você tem que verificar se há algum número que se multiplica por oito. Por exemplo, 72 eles têm o seu bom Be, por exemplo, 32. Andi, posso dar-te a configuração da tua sarjeta e colunas e tudo mais. Está bem, mas isto está a mudar. As pessoas perceberam que, às vezes, se você quiser dedo do pé, fazer algumas separações entre alemães convidando, temos como uma foto. E então nós temos, tipo, eu não sei, realmente, realmente um pouco fora de texto de cópia aqui como legenda O que vai ser bebida? Mas digamos que isso é como 14 pixels para texto. E se eles quisessem posicionar aqui, bem, isso é um pixel, e não é tão ruim, mas às vezes eles precisam dele como, oh, como quatro vendas de pico. E se você estivesse apegado a esses oito pixels, dor e tudo era como separados em múltiplos de fé. Como, por exemplo, aqui é uma grande fonte aqui. Você tinha o dedo do pé, tipo, 16 porque e então é separação. Bom. Seja como 24. Então foi como, você sabe, era bom, mas às vezes você precisava de menos espaço entre os elementos. Então é por isso que a maioria das pessoas está ficando fora de um oito grande auto ganância dedo quatro ou até mesmo para escolher tão doce. Ok, eu acho que com quatro picaretas concordam, nós estamos prontos para ir. É taxa pré ACA. Você não tem mais. Na maioria dos casos, digo 99% todas as vezes que você não precisa de outro tipo de grande, prateado fora do curso. Você pode usar a grande cirurgia que você quer. Alguém usa o pixel da luta. Ótima. Eu vejo esse trabalho. Então, no mesmo sistema que eu usei agora Ah, e eu ajudei a placa. Estamos super bem com cinco pixels com porque é muito perto de quatro e é este ano para multiplicar por assim usar onde quer que ele doce sue melhor. Quero dizer, você sabe, metade porque todo mundo está usando para isso não significa que você tem que usá-lo. Você pode usar qualquer pixel ganed ou ou sim, ou qualquer número que você gosta era alguém. Algumas pessoas ainda não se importam com isso eles apenas definiram lá o luto por eu ou sim, que o que eles sentem natural para eles e então o que eles fazem, é Ah, mega espaçamento. É como por mim também dizem. Ok, isso é algo que eu gosto destes entregar um e então algum espaço como este. Ok, você está pronto para ir. Quero dizer, grande venda três é ótimo para manter a consistência porque ele é mais fácil de lembrar o espaçamento diferente que você tem que usar. Mas cabe a você usá-la ou não. Se você está começando, eu disse sim, você vai começar a trabalhar. Nós concordamos auto para pixel grande ou pixel luta Grande. E aprenda o básico. E quando tiveres o teu ah, os teus olhos treinados e depois, sim, fá-lo de cor, se quiseres. Certo, mas como eu disse, é sempre um bom dedo do pé de treino. Ah, obter um pouco que isso é dedo dedo do pé para concordar porque ele é super fácil de re assinar com isso. Então, neste caso temos aqui são besouro são layout acordado Ah, para estes o que poderíamos fazer bem, é fazer como outro mal formal. Neste caso, vamos escolher para a forma como um andróide. Andróide básico. Não vamos brincar muito. Certo, então a mesma coisa se aplica aqui. Nós vendemos o ARB ou nesses caras quadro legal. E o que fazemos é voltar aqui para gostar de um grande vamos para o botão de explosão novamente vem acordado. Então vamos em frente e colocar colunas Neste caso, cinco colunas podem ser boas para colunas também. Quero dizer, três colunas, qualquer que seja o celular. É mais grátis se quiser. É Ah, já que eles estão com você aqui, não é tão preconceituoso em sua parada. Precisamos de menos ordem aqui. Podemos ser mais confusos, mas também alguém não gosta de renunciar com colunas aqui em pessoas móveis. Eu realmente quero. E eu vou te mostrar o porquê. Então aqui vamos fazer o mesmo em vez de esticar que não queremos fazer neste caso. Queremos algumas margens aqui porque vamos projetar algo mais rápido para que você possa ver neste caso foi para ir para o centro. Vamos aplicar de novo lá. Alguém está fora de oito. Então, neste caso, pode ser, um, um, 64 Papai Noel. Você sabe o que pode fazer também. Você pode se multiplicar aqui como algo assim. E ele vai ser Faça os valores do véu, OK. E lá dentro? Sim, e eles juntam que queremos também em múltiplo off oito. Então eles estavam indo para ir com 24 sim, esta cena disse muito boa configuração. Talvez haja muita sarjeta para o meu gosto. Então, neste caso, nós estamos indo para você pode adivinhar, fazer sobre as razões. Aqui, vamos colocar como mineiros oito. E é aqui que conseguimos. Talvez tenhamos muito espaço agora aqui. Então nós estamos indo para fora oito. Então, sim. Então isso está parecendo muito bom. Então, por exemplo, imagine que você está fazendo eu não sei, esse tipo de aplicativo fora que tem um avatar, e então você tem aqui, como um texto novamente. Isto é enorme. Deixe isso para 14 Então, sim, você pode ter aqui. Bem, eu estou indo para Yeste chamado de peruano dele. Eu não tenho mais, mas de qualquer maneira, você entendeu a idéia, certo? Então você está fazendo esse tipo de sinais onde você tem, tipo, alguns avatares aqui. E é por isso que você precisa dessas colunas aqui, se eu pudesse. Se estou projetando algo diferente, talvez seja bom ir com três colunas. O bonito a coisa legal sobre os olhos de fleuma que você apenas mudá-lo aqui e aumentar com, você sabe, você está pronto para ir. Você apenas se multiplica novamente por oito ou os pixels com você, você decidiu, e você está pronto para ir. Hum, então, sim, neste caso, nós vamos voltar para a nossa coluna quatro. Ótima. Tudo bem. E a mesma coisa que fizemos com a cor. Então você se lembra que havia esses estilos locais. Neste caso, estamos chamando de estilo. Podemos salvar a nossa camada de luto, os estilos, o que fazemos. É um presidente de jogo para Dot Hum Mas, hum, aqui e nós Sim, imprensa criado estilo neste caso, o que eu gosto de fazer. São 12 colunas, e eu realmente coloquei os valores, mas neste caso, nós não precisamos porque nós estamos indo Apenas um valor peregrino neste caso é que podemos nomear este site como e, em seguida, 12 colunas convidando. Fizemos diferentes razões confusas para não vir para um site como 12 colunas. Outro com 10 colunas. Eu não, eu acho que para fazer isso. Mas você poderia. Então, neste caso, estamos apenas nomeando assim, certo? E neste caso, vamos nomear esses, hum, novamente, nós personalizamos os quatro pontos, e então nós vamos aqui e vamos com mais por e isso vai ser para bem, e isso é vai ser quatro. Chamada para colunas. Certo. Imagine que fizemos outro aqui. Tipo, hum, sim, como nós duplicamos isso e nós queremos ter outra tela? Sim. Com, digamos, três colunas, por exemplo, O que podemos fazer, como você pode ver aqui, está anexado nossas configurações. Temos agora em nosso layout de estilos site com duas colunas e mármore com quatro colunas. Mas imagine que queremos mudar isso. Não eles não são todos fora do estilo, mas apenas isso. Então o que fazemos é sim. Vamos separá-lo. Então agora temos novamente, assim como nossas colunas regulares, propriedades e o que fazemos, é apenas mudar a contagem para três. E mais uma vez aumentamos o nosso com aqui. Está bem? É quase a mesma coisa. Então, agora o que fazemos, voltou às quatro colunas, é uma história para antes de pontos. E, novamente, pressione barra móvel e, em seguida, três gol. Este último é o mesmo para a chamada para que possamos fazer estas pequenas pastas aqui como esta pequena separação para que pudéssemos ter, tipo , configurações diferentes , configurações diferentespara nossas camadas. Como eu disse, eu não digo propriedade. Eu disse sim, que você mantém no velho seu celular os sinais o mesmo ah, layout. Isso é o que dá consistência e torna um design sólido entre Ammon. Outras coisas. Mas esses layouts são 11 das coisas mais importantes para fazer os sinais. Ah, sim, permaneça firme. Está bem? E para os usuários que usando o mesmo layout transmitir calma sobre o que tudo está no lugar, e assim manter o seu layout é muito importante. Ok, então usar aquela casa não tem que ser chato porque você tem várias violações. Você pode apenas usar duas colunas aqui, então ir para algum sexo jovem aqui com todas essas colunas, e então ir aqui com três colunas e, por exemplo, você pode fazer isso na parte superior na parte inferior, ir com algum design que é sim, algo assim. Então, ter layouts usando layout hoje. Não significa que ele tenha que ser chato. É sim, isso ajuda você a fazer. O sinal cria consistência. E é. É um dedo muito bom desenhado desta forma. Ok, eu quero vender ao seu filho alguns exemplos de grandes nomes aqui, por exemplo, eu Esta é a guardiã Paige. Assim, por exemplo, podemos ver que temos uma coluna, duas colunas, três colunas, quatro colunas e cinco colunas. Tenho a certeza que estes ao mesmo tempo que eu tinha encorpado por dois. Então, neste caso, eles podem estar usando, tipo, 10 picaretas. Um ótimo Ok. Então, como você pode ver que você está usando nessas duas colunas, eles aqui nesta seção, eles estão usando, como, uma foto com com duas colunas fora, fora dele o mesmo para dias tipo de livro aqui. Certo? Vamos ver outro exemplo. Por exemplo, armas de scanner do céu e podemos ver aqui que eles estão usando eles poderiam estar usando, como, um design de 12 colunas. Neste caso, eles estão usando, como, duas colunas aqui. Duas colunas aqui, provavelmente. Eles estão doseando, tipo, três aqui ou sim, Azaz. Podemos ver. Ah, poderia estar usando como? - Sim. Sim, como 44 colunas. Bem, você entendeu a idéia. Quero dizer, não é esse site e achá-lo chato. E então eles estão usando Great. Como você pode ver, eles estão fazendo, tipo, três colunas aqui. Lá em baixo eles estão fazendo quatro e outras quatro colunas. Você pode ver perfeitamente a dor aqui. Há três colunas, concorda aqui. E ainda fazendo um uso estranho aqui usando duas colunas quatro dias e depois usando 24 dias . OK, então como você pode ver, grandes nomes estão em todos os lugares em todos os projetos. Aqui eu tenho outro exemplo para é que este é orgulhoso ponto de caça com. É um site legal. Toe descobriu a si mesmo. - Onde? De startups em diante. Sim, que seja. E como você pode ver, esta é uma configuração típica cara quando temos uma barra lateral aqui que usa duas ou três colunas neste jogo, mas isso nos torna uma coluna. E se esta é uma coluna aqui, o quê? Gostaríamos de cafés, outra coluna e outra coluna só Eles são bons. Eles estão ocupando como esta base de duas colunas. Ok, então, sim, como você pode ver, retardado em todos os lugares que você pode ver mesmo aqui que tudo é grande venda. Perfeito. É por isso que o sinal com Grethe está no fundo deles? Ok, mesmo que seja invisível para nós agora, se você perceber quando você começa o jornal quando você realmente reservar quando você sabe quando você está fazendo qualquer coisa, você pode relatar que eles discordaram lá em baixo, até mesmo uma, você sabe , uma janela. O que quer que você esteja usando um você provavelmente usa concorda em um onde você é outro. Está bem. Assim como este. Ah, apenas nossa última coisa. É algo chamado Rose. Da mesma forma que estamos fazendo colunas aqui. Você pode ser super preciso com o seu acordo e o que você pode. O que podemos fazer aqui. É aqui. Vamos separar novilhos outra vez porque quero mostrar-te uma coisa. O que podemos fazer se quisermos ser o luto perfeito do pixel. Perfeito em tudo o que podemos fazer, Rose. E eu quero mostrar a vocês como pressionamos novamente o botão de mais. Luto de novo. Isto é muito cansativo. O que? Nós podemos fazer isso. Vende-o aqui, Rose e vê que estamos trabalhando dentro, neste caso dentro de uma grade de pixels onde vamos fazer. É Coloque isso para fora, ou então vá para cima. OK, top. Porque se formos com um alongamento, tudo vai ser assim porque a Condessa de carro, se colocarmos o S 3. O que ele faz é sim, estica como as colunas antes que ele se estica verticalmente. Mas queremos isto. Não, não vamos de carro. Na verdade, só queremos 12. Por enquanto, O que queremos é que a margem seja de oito pixels. A margem vai ser este espaço aqui. E eles chegaram lá vai ser oito pixels para Ok? Não, mas queremos mudar estes dois de cima. Então, a nossa dor começa aqui. Bem, podemos apenas obter o deslocamento para zero. A altura vai ser de oito grandes celas. Eles têm três estados grandes vendas. Então, isto é oito pixels. Inquietar o espaço com estes, a sarjeta vai ser de oito pixels. O que sabemos que fazemos agora é sim. Aumente a contagem. Negócio pneu mais fraco. E você saberá por que, se o descermos por um tempo. Pessoa ou algo assim. E não colocamos muitas fileiras aqui. Em algum momento você está descendo uma pessoa móvel super enorme, algo que talvez você consiga. Ah, há um tempo em que você não tem mais estradas. Então é por isso que eu digo Não seja um medo sim, coloque aqui, eu não conheço três 100 linhas e você está pronto para ir. Então você nunca acaba assim. Você sabe que pode tê-lo mais tarde, mas é de graça para que Rose? Então, o que você poderia fazer aqui. É como em outro estilo. E isso seria como, vamos chamá-lo como móvel. Oito semanas de acordo ou algo assim. Então agora temos, tipo, tipo, tudo é múltiplo fora oito e o que podemos fazer com isso é super legal para design. E você não precisa medir a distância entre os elementos. Se estamos fazendo este título aqui, bem, está fora. Eu disse, vá em frente, segunda linha. Isto é muito apertado. Mas vamos ver nesta lição que falamos sobre tipografia, mas o que você pode fazer ao projetar, eu acho que ele aqui é como sentar na linha de base, ele vai chamar de linha de base essas rosas, as separações que linhas de base do tribunal. Então você pode ver aqui que você tem. Ah, a separação. Você alguns designers, como o dedo do pé Adidas isso na linha de base, alguns outros, como apenas para começar. Aqui, use o que você se sentir confortável. Isto, como você pode ver, são 16 picaretas de separação. Então estamos nos oito pixels com Nós vamos colocar isso em auto emergente. Agora, podemos colocar algum texto aqui textos introdutórios ou qualquer outra coisa e sim, podemos deixar assim ou podemos apenas sentar assim e estamos prontos para ir. Desde que começa aqui, tudo vai ter este tipo de leitura. Então você não tem que se preocupar muito se você colocá-lo na linha de base ou puxá-lo para cima Stirs. Você está indo. Você é bom. Mas este não é um bom lugar para sentar elementos. Ah, esse tipo de elementos. Ok, eu prefiro que você coloque na linha de base, na verdade, mas é com você. Alguns designers não fazem tudo o que fazem. Eu venho de projetar revista como minha bunda em jornais de San e tudo assenta na linha de base. Então, para mim, é como uma coisa natural. OK, a única coisa que não vai para a linha de base geralmente são os títulos e tudo mais. Mas se colocarmos como um corpo de texto, que geralmente é bem, neste caso é 14 pixels. Sim, temos que ir para algo que assente aqui. Sabe, nós colocamos mais alguns depósitos fora, oito para a altura da linha, nós estaremos em seu pixel em grande comemoração. Seria um título, por exemplo. Digamos que 16 e depois vamos. E agora podemos ver isso em nossos grandes nomes. Ok, isso é demais. O que já estamos falando sobre tipografia, e agora e vamos falar sobre super profundamente sobre tipografia na próxima lição. Então, isso é tudo sobre grandes e vê-lo no ness menos em. E vamos falar sobre a topografia. Burgard, Liberdade. Como você financiou? Ok, então te vejo lá 7. tipografia: Bem-vindos de volta a esta nova lição neste caso, vamos falar sobre tipografia. Isso vai ser super interessante. Adoro tipografia. Eu acho que a tipografia é uma das coisas mais importantes quando você está projetando e porque é algo sub dedo do pé. Mas a tipografia dá-lhe um presente. Há tipografia. Essa arma faz você se sentir como se estivesse em um lugar engraçado em um site engraçado e uma aplicação engraçada . Outros podem inspirar confiança. Alguns destes podem ocorrer como luxo e algo caro e tudo mais e que principalmente armas de refrigeradores e tipografia, obviamente fotografias e gráficos também, mas principalmente vem de tipografia. Então é por isso que, se você perceber, hum, as marcas de luxo, uh, normalmente tem esses caras e fora de taxas especiais de Borah com Sarah Reeves, com contraste, algumas delas são super condensadas. Você sabe que eles são elegantes, você sabe, é algo que você não pode ver às vezes porque a maioria das vezes até são designers de set , nós não somos apenas às vezes nós apenas olhamos para letras. Não estamos percebendo o que está por trás da tipografia que está por trás. Mas quando você realmente se concentra nisso, você é a metade de um sentido fora de todas essas coisas que a tipografia pode tentar encontrar e comunicar. Ok, então eu estou apaixonado pela topografia, e eu vou te mostrar os lugares onde eu costumo ir para tipografia. Quero dizer, pela liberdade. Biografia. Algum deles é legal frente. Não é segredo, sabe, todo mundo. Ah, sabe sobre isso aqui. Você é câncer. 30 por muitos telefones grátis. Eles são bons telefones. E sim, eles têm, tipo, formas super agradáveis, como se tornassem fracos. Seja qual for. Quero dizer, todos os telefones que você pode imaginar de graça estão aqui para usar para você. Há outro que eu realmente gosto porque tem alguns telefones que formarão essa metade. Chama-se telefone para a escola. Sim, sua busca por ele. Então, a partir da praça é meio fora. Meio que a mesma coisa. Você pode aqui baixar como muitos, muitos telefones. Há alguns telefones que estão bem em, bem, telefones, mas outros não. E como você pode ver, eles têm uma enorme dispersão Olhe off reembolsos para o outro, os outros sites. Vou deixar os links na isca dos ativos e sim, vamos dar uma olhada nisso. Eu me apaixonei. Nós tipografia é ultimamente. Um deles é chamado de corda de homem, e eu vou usar esta tipografia porque tem alguma. Ah, é uma tipografia de parede de tijolos, mas tem algumas entre letras, problemas de espaçamento. Então eu mesmo que não seja o melhor formado para usar se você não sabe como usar formulários você. Mas é um bom fundo para ver o que acontece às vezes com telefones e como lidar comisso ,diz a isso , polícia de Monroe. Como você pode ver, é ah, sans serif. Sim, geométrico. Bastante direto. Meio fora entre uma aposta. Icka em circular e é um muito bom formado. Tem números muito legais. Como você pode ver, é ah, é realmente uma boa diversão. Ok, então eu vou. Bem, acho que já o roubei. Se não, você não pode vir aqui para carregar arquivos de qualquer maneira. Você não precisa descarregá-lo. Eu gostaria de re fontes eso Você pode baixá-lo a partir daí, mas qualquer maneira, você pode vir aqui e não carregá-lo. E sim, vá aqui. Temos em Monroe. Vá para os telefones. Nós desde que estamos indo para usá-lo para a parada nós apenas ir para o O t f Ah, sim, sim, você poderia ser estilo o TDF a verdade através apertado formado Mas nós estamos indo para o iPhone aberto porque ele tem muitas características e tem torres legais e corações. Mais coisas. Então vamos abri-lo com uma lista telefônica e nós sim, pressionar em estilo formado. Ok, então é realmente um começo. Então nós sim. Desistir do livro? Sim. Pare com essas coisas. Volte para Fichman. E agora estamos prontos para ir. Ok? Existem duas abordagens quando se usa formado. E porque você pode, você pode apenas escolher seus telefones e sempre que você estiver indo dedo do pé colocar Tex aqui algo, você pode fazê-lo. É por isso que eu ouço, Mahdi em Vamos começar a usar corda masculina. Sim, é um telefone super legal que você vai ver então você pode apenas ir e colocar aqui 36. Ou eu poderia colocar o que quer que sim, tipo de executá-los. Você sabe disso ou você pode usar a escala aqui, mas às vezes alguns designers fazem isso executá-los. Eles colocam 48, em seguida, colocar 50 para outro tipo para outro ah, título na outra tela ou qualquer coisa, mas eu gosto de manter minhas fontes consistentes em tamanho. Então nós estávamos indo para falar em um minuto sobre como criar, hum, uma escala de tipo em. Vamos ver como funciona. Ok. Hum bem, nós vamos vê-lo agora. caso de fraldas são basicamente uma maneira de lidar com o quanto contraste metade como ter os tipos de letra entre um título e um pequeno título no corpo no corpo. Copiar. Como você pode ver. , Desta vez, os programas costumam lançar esta escala de tese aqui, e é uma boa escala. Você pode usá-lo para não ter que quebrar sua mente. E, por exemplo, se você quiser um título grande, você poderia usar 48. Você pode ir com 64 se você estiver usando, como um título curto como nós somos os melhores. Algo como isto. Bem, para mim, mesmo que seja curto, isso é muito grande. Vamos ver a minha ideia. Vamos ele assinou algo com nosso luto e vamos usar esse blog chamado honesto mais sim para inserir uma foto aleatória fora da natureza Você gosta da natureza? Eu gosto, mas não gosto muito deste pé. Espero que isto seja melhor. Bem, não é assim, mas bem, mas bem, então como um vai ser o escolhido. Jesus Cristo, eu não sei. De qualquer forma, vamos usar isto. Eu vou criar outro ângulo escrito aqui, e eu vou colocar com preto em um pouco de azul. Então vamos chegar a esta parte e ao que vou fazer. É fazer alguma capacidade aqui para criar este efeito legal, como você pode ver. E agora nós estamos indo para selecionar estes e enviar para trás para que possamos selecionar o nosso texto aqui destinado a branco para que possamos ver o que estamos falando. Imaginem que temos este tipo de herói que poderíamos Este tipo de imagens de abertura são chamadas heróis. Hum, eles estão acontecendo. Eles são, como desaparecendo. Ah, em vez disso, fora de interfaces mais claras como sim, estavam com o rosto de morrer aqui com um núcleo. E, você sabe, algo assim e então Ah, boa ilustração como ilustração orgânica aqui e você sabe que sabe Sabe do que estou falando? Tudo mais. Ninguém é a maioria dos sites são muito semelhantes uns aos outros. Então estamos indo novamente dedo do pé, trazer nossos grandes aqui. Estes você pode fazê-lo com controle. Eu sei. Desculpe, Controle. G. Então é assim que você faz sua estréia de luto? Ok? Como ativar. Certo, então temos esse título e imaginamos que temos um texto aqui. Você sabe, nós somos os melhores e como, uh, com formas que são enigma. E eu acho que estamos fazendo, tipo, um site para em uma inicialização algo como isso. E nós queremos sim, estes ajustados para o nosso grande isso vai ser ajustado bem toe Neste caso, cinco colunas com bom ser gentil fora foram, Mas nós podemos fazê-lo. E neste caso, estamos indo para o pé. Poderíamos usar selecionar aqui algum número de aluguel, como 20 ou algo assim e podemos ver que é um bom contraste. Em vez disso, este sendo ambos vamos e verificar para regular. Talvez seja muito pouco até ser mais pequeno. Vamos, por que não tentamos com 24? O que, 24 na verdade não é tão ruim para nossos propósitos, mas em vez de ter que, você sabe, decidir sobre a mosca por que eu uso aqui, como 24 ou 20 ou algo assim. Há algo chamado ritmo vertical vertical. O que é isso? Estes e com o que queremos trabalhar. É, hum, o que nós trabalhamos com é em vez de selecionar todos os números aleatórios aqui, que sentem ir para o nosso I usar como é chamado, como um tipo de escala tipo de escala de escalas que podemos ver aqui. Ok, podemos ver aqui que o tipo de escala é algo que é calculado com base em um fator neste caso é 1.250 Esta é a escola Kelly. Maio seu terceiro, e o que ele faz é começar com um número base. Neste caso é 16 picaretas é eo que ele faz é multiplicado por 1,25 e, em seguida, como um é multiplicado por 1 25 eles novamente, assim e assim por diante. Então, uma vez que eu quero o que ele faz. Está fazendo um em uma escala que é proporcional. Mas se multiplicarmos, um, A. Então você pode ver isso. É muito maior do que multiplicar por. Você sabe, é como em uma escala que fica como Não, eu os li ou algo assim. Não é revelador neste caso parece-me bastante regular. Então vamos com algo mais fluxo. Como você pode ver aqui, os passos entre um empate fé 11 pixel, um Messer em outro, é muito superior. E sabes que mais? Gosto desta escala. Então é por isso que é isso que vamos usar. Como você pode ver, nós temos os valores de pixel aqui, e você tem valores em aqui, Ayman Rams que esses são os valores que os desenvolvedores vão usar em seu design. Mas vamos trabalhar com esta fuga. Ok, então eu peguei uma tela definir isso para eu não ter que anotar os valores ou o que quer que seja . Vamos trazer o sal de tela que acabamos de fazer. Então nós podemos... Bem, isso foi um erro. Se você ah, importar a foto e selecionar a forma vai importá-lo dentro dele em desgraça. Neste caso, o que precisamos são os valores fora destes a escala aqui. Então, vamos fazer alguma coisa. Vamos para religiosos. Isso foi muito legal, mas não precisamos mais dele. Então o que vamos fazer, é criar todos esses valores que temos aqui. Esta é a guerra estavam interessados e nós estamos indo. Eu vou fazer isso horrível enquanto eu vou escolher um núcleo mais agradável e eu vou sim, dedo do pé, multiplicar. Então é assim que são esses os valores que queremos dois anos? O que é realmente coral? Está queimando. Meus olhos diziam tanto cuspir. Então, o que fazemos aqui? Está acontecendo aqui e nós vamos apenas colocar isso em 16. Está indo nossos 16 pixels. Esse é um é 21.33. O que queremos, o que podemos fazer, vai para o 21º, basta colocar, como, você sabe, valores arredondados. Porque 0,33 é que não. Não há nenhum ponto. 33 picaretas não é um dia. Então agora vamos colocar aqui como 28 que é o próximo. Será que esta uma balança realmente farra pré pesada? Seus passos são enormes. De qualquer forma, vamos com ele já que não temos medo de falhar. Então vamos com ele. Nós estamos indo. Então este é 38 certo? E este vai ser de 50 maneiras Nós iríamos embora 51 Mas eu prefiro em torno dos números. Então vamos com 50. Ok, vamos fazer estes. Ok. Então está tudo bem. E então como um que é impossível de usar na parede do rial, assim é 68. É usos. É super fraco. Então esta é a nossa escala. Você pode dizer que você pode voltar aqui e dizer Ok, isso é demais para mim ou eu preciso de mais valores ou sim, você sabe, você sabe, às vezes você Mamie é algo por volta dos 14. 13 picaretas vendas. Então você pode dizer, OK, eu volto para o meu prefeito terceiro, Ele também não tem alguns passos aqui, então você pode voltar aqui e dizer, OK, este é 30 16 13 11. Este caso me deu um pouco mais. Sim, sabe, talvez às vezes você queira usar algo assim, que vai de 16 14 e 12 pixels. Isso é algo mais natural e também você pode usar o muito bom Ah, pessoal, pessoal, Rafic, uma escala que vem aqui, o que é muito legal. Quero dizer, há muito bom. Esta é a sua escala tipográfica regular. É ah super. O que acontece que ninguém está mais fora do site fazer 16 pixels aqui. 16 pixels são perdidos porque eles esta escala é baseada em ah, como dizer design gráfico e tirar todo o signo de livros e desenhos de jornais. Assim, em jornais e livros de forma útil, a escala tipográfica, começou em oito pixels. Bem, eles foram chamados de 80,8 pontos ou nove pontos. 10 pontos. Então é por isso que esta é uma escala tipográfica. Tem essas elaborações jantadas aqui de 9 10 11 12 13 14 E então sim, ele começa a subir e meio passos enormes. Então é por isso que a escala é meio estranha no início em apenas uma imagem e você diz, por que corrigi-lo para que essas fotos são alguns pequenos pixels porque ninguém correndo site ou aplicativos móveis sem usa uma escala mais. Talvez você comece uma guerra com 12 células de porco. Então 14 pixels super estranho para descer para 11 10 9 Estes nestes tempos. Ok, então bem, talvez isso seja muito grande, mas podemos ir com ele. Então, o que? Eu vou fazer o seu duplicado este s estes? Ah, sim. Estes todos estes elementos que temos aqui e nós vamos aplicar bem o parafuso, neste caso e vamos aplicar o problema da CE. Mas porque eu quero ter, tipo, quatro mensagens regulares. Eu gosto deste tipo de letra para texto regular. E eu gosto disso para títulos. Mas eu comecei a ver alguns problemas aqui com este tipo de áspero. E como você pode sentir, isso é meio que dois separados entre letras. Você pode ver que este é um espaçamento de letras. Alguns os chamam de rastreamento, sabe, mas eu sinto que isso poderia ser melhor, mais relacionável e mais atraente se aplicarmos algumas letras negativas. Espaçamento como 3% algo ao redor que talvez vamos para Sim, eu gosto disso. Você vê a diferença se colocarmos isso para os valores padrão da face, isso é meio fora para Sim, é perder. Quero dizer, para o título. Não tem dúvida. É metade da cola. Tem de ser um título, aquele título ponchy. Então, sim, eu gosto mais disso. E daí? Vamos fazer isso como mineiros. Três. Aqui sim, isso é muito melhor. Ah, isso acontece. Algo com tipografia lá, por exemplo, como você pode ver nesses tamanhos. Ah, está tudo bem. O espaçamento das letras. Mesmo que seja zero, tudo bem se formos como ameaça menos 3%. Talvez esteja muito apertado. Então você tem dedo do pé. Lembre-se disso quando você está indo com grandes, super grandes, hum, hum, tamanhos em rostos tailandeses, provavelmente você tem reboque apertado um pouco, o espaçamento entre letras. Você pode amarrar tudo o que quiser, mas você sabe, a algo ilegível. Isso seria aceitável. E até é legal para, você sabe, para um estúdio de designer, algo assim. Se é para o produto de algo, você pode apenas bombear isso um pouco para cima. Mas no valor padrão off zero, eu acho que isso é. Não sei se algo está quebrado com o tipo. Então, sim, derrube estes um pouco para que você possa torná-lo um pouco mais A 1.000.000.000. Vou aumentar isso para quatro de novo. Isto é fixe no três. Esta rodada três para não é muito. Isto é bom. Talvez um pouco separados demais. Então vamos ver quais maneiras um e isso em zero. É muito bom ir. Então temos artrite aqui no que eu costumo fazer. Hum, é Ah. Sabe, geralmente gosto de fazer isso. Eu pressiono Enter e você sabe por que isso acontece. Então eu gosto de fazer isso como, ah, dedo do pé esta pausa aqui para que possamos ver como funciona entre duas linhas. Porque temos esse ódio mentiroso aqui nesta separação. Você pode fazê-lo por grandes células como este aumentando articulações até que você esteja confortável com ele. Ou você pode ir com porcentagem valorizada, como 80 luz, 180%. E como você pode ver, isso é demais. Então podemos ir como eu não sei, 100. Sim. Por que é isso? Porque se formos com grandes células, digamos que colocamos aqui, como 72 grandes células ou 74. Quando fizermos o mesmo com este título aqui, temos de adivinhar o quanto queremos pôr aqui. Quando fizermos o mesmo com este título aqui, Ok. Como isso talvez seja demais e vá aqui, vá para 60. É mais ou menos, mas você pode fazer muito bem colocar aqui 100 por cento e você está pronto para ir e você tem um. Então eu quero 100 10% aqui. Então, em vez de aplicar diferentes alturas mentirosas , deite todos eles o que você pode fazer. É colocado o mesmo dedo do pé de nove altura, todos eles como 100% porque estes 100% é baseado no tamanho fora do seu tipo de letra. Então, neste caso, 38% O que 38 pixels é traduzido nestes como 100% de desconto 38. Pode ser 42 ou algo assim. Se você sentir que é algum tipo fora apertado neste tipo fora, você pode aumentá-lo. Está tudo bem. Você pode colocar como 120. É bom ir. E quando você está em valores menores em um texto menor, é bom dedo do pé arroz um pouco mais como 1 30 do mesmo lado, a mesma coisa que antes de precisarmos dedo mais baixo. Isso em tamanhos mais altos. tipografia a seguir. Aqui. Precisamos fazer isso, pois o oposto realmente deixa o espaçamento entre letras em um zero, ou às vezes até mesmo colocar alguns valores positivos aqui no espaçamento entre letras. Mas, por outro lado, o que precisamos é deixar mais altura para este texto, e aqui estão eles, embelezá-lo como se pudéssemos chegar a 100%. Ok, então isso é algo que funciona não só para esta tipografia. Ele funciona em toda a tipografia é que você tem que olhar para o SNC como ele se sente. A maior parte da tipografia não precisa de muita afinação. Ajude-nos este tipo de ref nele. Mas eu pensei que este seria um bom empate também. Então você porque ele precisa de um monte fora ajustes aqui quando ele fala e até mesmo em, uh, tamanhos normais ou regulares como 21. Precisa de algum tipo de ajuste aqui no espaçamento das letras. Certo, então vamos criar nossos azulejos do Texas. Algo que quero te mostrar aqui, falando sobre fingir minha pequena parte. É nesta configuração de teste A para que possamos ver se fizermos isso, o texto é tipo de fazer coisas que é porque as caixas estão se adaptando e o ano tipo de fixo. Há como eles têm, como uma caixa de fixação altura e com e o que queremos aqui é apenas obter essas linhas que aumentam com o texto então, neste caso, o que aconteceu é que sim, eu apenas faço, como uma pausa com Angel. Então, vamos apenas removê-lo. E se eu continuar escrevendo aqui, ele vai para casa para sempre. Certo, mas se eu fizer isso, então esse chefe está meio perto que é um tipo de conserto. Mas se eu escrever , aumenta em tamanho. Esta é a segunda parte aqui? Isto é, como se encaixa com sem a altura. Este site seria corrigido se eu continuasse escrevendo aqui. Como você pode ver, esses livros azuis, não é ah, subir mais que é Ah. Então isso não é um lugar próprio dentro da caixa. Mas para este caso, queremos que saiam com isso não mata. Poderíamos ficar sem ou com. som se encaixa aqui, mas para os nossos propósitos. Bom para ir. Certo, então vamos arrumar isso um pouco e diminuir o instalador prequel. Então, temos a mesma separação aqui. Estamos trabalhando nessas oito semanas de leitura, então é colocado 24. Estamos indo para o mesmo aqui. Só saímos daqui com, um interessante, não fizemos a altura deles aqui, mas vou colocar 100 10 por todos eles. Isso realmente não importa, porque isso é apenas para um teste. Mais tarde, se quisermos mudá-lo, podemos sugerir que faça um pelo motivo de eu ter acabado. Mas isso é só para ver se você alugar uma casa, como funciona. Mas eu não quero que o dedo do pé faça isso emprestado para você. Então eu estou indo para ir aqui com ele serve para arrumar. A ideia do que ele faz é que achar quedivide o espaço entre os elementos e então podemos vir aqui e cortar e fazer isso, tipo, manualmente. Ou podemos vir aqui e pressionar isso e ele vai sair do pé. Deixe o mesmo espaço entre os elementos. 24 em tudo isso. Todos os separados. Ok, este dedo do pé prequel, hum, coisas organizadas. Então vamos para a parte engraçada. Bem, na verdade, é a parte chata. Mas o que? O que? Nós vamos fazer isso nesses estilos de camada toe texas, dedos são estilos. Ok, então o que eu costumo fazer. Vamos criar em um estilo. Neste caso, vamos aplicar a mesma coisa com esta moça. Estamos enrolados este regular, e este vai ser o 16 pixels. Algumas pessoas, como Stevie gosta de colocar nomes como cópia corporal como cada um é para um três. Isso é muito legal para você conseguir. Se você está trabalhando em ah pequeno site ou algo assim, você pode fazê-lo ou bem em mim, mesmo se você está trabalhando para uma grande empresa. Mas você provavelmente está super contido e você sabe que tem muitas dívidas? Estilos Texas? Você pode fazer isso. Mas se eu descobrir que eu descobri que às vezes o que eu o quê? Funciona melhor para mim em vez de colocar nomes que podem ser confusos para alguns, Eu prefiro empurrar o como os valores que ah, que está usando este tipo de letra neste caso está usando 21. Então vamos chamar esses rebeldes de 21 anos. Eu não vou mais usar os grandes vendedores, então eu vou mais rápido este 28 e eu vou apenas copiar isso Então este é o seu mais tarde. Então este é o 28. Por quanto custou? O que? Desculpe. Então este é 38. Então isso vai ser 38 e isso é 50. A mesma coisa neste 68. Baseamos 68. Ok, nós temos. E para estes iam fazer o mesmo, mas com Bolt. Então nós vamos colocar aqui parafuso do que uma barra e lá vai ser 16. Vamos completar este texto, por isso é mais fácil para baseado neste é 21. Esqueci isso de novo. Usa até à data. Ok. E este é 38 estes anos 50. E estes são 68. Está bem, está bem. Então, agora, se clicarmos lá fora, não temos nada selecionado. Podemos ver aqui nossos estilos do Texas prontos para usar, realmente dedo do pé Ir para a produção. Você vê, eu tenho as grandes celas aqui e eu quero com isso. Então eu vou aqui, eu clico essas configurações fora. Eu não posso e então eu posso ir aqui e apenas remover as grandes celas. Aperte a introdução. Apenas volte. IHS Sim, nós temos tudo pronto. Então nós aprendemos nesta lição Como dedo onde mais como escolher a tipografia não é realmente mas como ir e não carregar alguma tipografia, como carregá-la no seu sistema e como usá-la Como dizer escala tipográfica eu vou enviar-lhe bem estes todos esses endereços ah e alguns sobre recurso é sobre tipografia também. Então você pode aprender um pouco mais se você estiver interessado. Mas com este básico, estamos bons para ir a um começo de projetar nossos produtos, porque temos já temos cores . Temos os nossos layouts, temos o nosso texto. Então vamos para a próxima estação, que é muito legal. Vejo-te na próxima lição. Acho que vai ser interessante. Vejo-te mais tarde. 8. Botões: Bem-vindo de volta S o nesta nova lição, vamos começar com nossos componentes. Eu acho que é, ah, a parte mais interessante fora para fazer a sua ciência eles em ou neste caso, este tipo fora Você, você eu enganado kit interface de usuário. Assim é o momento em que você começa a criar todas as batalhas que a importação sente que leva arias cair. Você tem que definir um monte de coisas o e é muito interessante dedo do pé para torná-los a partir do zero. Então você sabe como eles são feitos, o que eles têm em comum, o que eles não têm em comum e tudo mais. Então vamos começar. Porque isso eu acho que eu amo essa parte para fazer essa parte. Espero que Sarah também esteja se sentindo. Então o que vamos fazer é pressionar Ault e duplicar isso nosso quadro e nós vamos apenas drogar e deletar isso e este vai ser nosso componente san fora de nossos componentes patê caminho estão vivendo este tipo de bagunça e feio e tudo mais. Mas no Berrien, vamos colocar tudo super agradável e limpo para dar a um cliente ou usá-lo em seu negócio ou para usar um conhecido seu startup ou usá-lo para você áudio para que você possa colocá-lo em drible ou colocá-lo em traseiros ou Sim, então é para sua família ou o que você quiser fazer. Mas sim, agora nós estamos apenas colocando suas coisas ásperas, e então nós podemos apenas fazer tão bonito como este com esses aquecedores e com este tipo de sexo fora em breve é tudo isso. Então isso veio mais tarde, dedo do pé. Faça algo bonito com isso. Agora estamos fazendo apenas o núcleo fora do sistema de design. Ok, então eu geralmente gosto de fazer isso, hum, neste caso, eu esqueci de fazer algo que eu gosto de fazer, que é fazer como um sueco aqui para o telefone celular colocar algumas fileiras, então pode manter a nossa dor. Então o que eu vou fazer, É quebrar isso para que nós não metade deste site 12 estilo coluna anexado, e eu estou indo toe aqui cresce novamente com a grade. Este é o Namer. Então, a contagem é. Eu vou levantá-lo, Teoh, eu não sei, 500 e então o tipo vai estar no topo. Então nós temos nossos cumprimentos apertados lá, e o outro vai ser oito pixels. Então, a separação entre isso e aquilo vai ser oito grandes células na altura. Seu papel vai ser um pixels para. Então tudo o que temos no local no lado vertical das coisas vai ser oito pixels. Ok, então agora o que vamos fazer, é esta configuração. Isso nos criou outro estilo, e este vai ser o site. Vamos chamar de foto. Cumprimentem o mesmo nós aqui. Ok, então este vai ser um site um pixel. Ótima. Bem, pode escolher. Então, sim, ótimo. Tudo bem, então essa escola, porque se você precisar desse luto de oito pixels para o sinus bem legal. Mas se você está cansado de tantas coisas daqui, você pode simplesmente ir aqui e você tem as colunas. Você quer o diploma que você tem aqui. Ok, então para mim é como eu gosto de ser assinado e é bom para ir. Então nós vamos pressionar são chave para fazer um retângulo ou podemos apenas vir aqui e ir para o Rick Tango e nós vamos pintar o dedo do pé ou posição ou o que quer que seja. Se 40 grande tão retângulo altura, Eu gosto 40 porque você pode ir com 48. Se você está projetando coisas Super Beak on Lee para sites ou você não tem muitos conteúdos ou quero dizer que você está você quer algo super acessível para pessoas que têm algumas deficiências ou algo ou você ha, você quer um super usabilidade que é mais fácil clicar em um botão, Você acabou de fazê-lo? E, mas eu costumo ir aqui com 40. Para mim, está perfeitamente bem. 40 pixels por algo, e neste caso, vou começar a ser assinado. Como, hum, eu vou consertar, como o quente este macaco fora de nossas traseiras. Ok, isso é incrível. Queremos que se quiséssemos algo assim, poderíamos ir com isso. algo assim, Mas não tenho tanta certeza disso fora desta coisa. Então, para os fundos e vai começar sim, dentro de oito semanas de folga, vamos ver como vai. É meio brega. Vamos largar este 24 e eu vou fazer alguma coisa. É esporte. Eu sou. Vamos usar nossos lindos estilos de cores. Então não estamos supondo aqui. Que tipo fora? Louis escolheu a primeira vez. Seja qual for. Então nós viemos aqui, nós somos primários e temos o nosso botão moldado e com a cor primária, esta prequela. Então, sim. E agora vou aplicar um fora do nosso texto. Neste caso, não quero nos dois. Eu só quero um regular e talvez 16. Eu não sei se 16 de 21 vamos com 21 e apenas colocar isso no botão do tribunal. Só a sensação vai ser branca. Podemos ir com branco, ou podemos ir aqui e selecionar o nosso neutro 100 branco. Ok, você vê isso aqui? Então, sim, este pode ser o nosso primeiro botão, mas queremos reutilizar esses elementos mais tarde para que pudéssemos duplicá-los. E se eu pegar isso, não aumenta seu tamanho. E se mais tarde amanhã, toda essa cor e eu disser “ok “, eu quero meus botões fora dessa cor, eles permanecerão os mesmos aqui e ali. Então eles não são. Eles são cópias, mas eles são cópias independentes em. Nós não queremos isso porque queremos ser consistentes e queremos ser como, ah, ah, super rápidos enquanto projetamos e tomamos decisões. E se quisermos que se mudarmos estes fundos porque o seu botão principal, queremos que tudo o dedo do pé se espalhe Toby mudando de fuga para que não tenhamos que colocar tanto antes. E para aquele figo Maha dizer característica super legal chamado Ally fora Bem, não fora. Experimente por si só. Mas vamos fazer isso como um componente. O que podemos fazer Oh, é Ah, alinhe estes no centro horizontal. Alguém gosta disso tudo que eu preciso para o centro vertical é isso aqui e o que fazemos para selecionar ambos fora deste você não pode selecioná-lo com você. Selecione o texto que pressione shift e, em seguida, selecione isso. E como você pode ver aqui, ambas as camadas acelerador e, em seguida, vir aqui para estes ícone estranho em uma imprensa criar componente . Então você diz OK, nada mudou aqui, mas sim, mudou. Antes, quando tivemos esses elementos selecionados eram azuis e agora este é tipo fora cooler roxo e como você pode ver aqui, ele diz componente de um. Ok, então neste olhar, eu só vou chamá-lo de fundo porque nós vamos refazer e você vai ver o porquê. Mas esta é a maneira como você faz um componente. E por que os componentes são legais? Porque vamos pressionar antigo e duplicar isso ou fazer sim, pressione o comando D ou controle o Se você estiver em Passaic e você pode criar quantas cópias quiser. E sobre o que é essa escola? Isto é, se este é o nosso componente principal, como você pode ver, você pode ver, porque este é, tipo, quatro pontos aqui, enganar roxo. E estes são meio desligados. Sim, este tipo emaranhado diamantes como diamantes vazios. Isto significa que eles são instâncias fora desses componente mestre, então eles parecem o mesmo. Mas eles não são, porque se eu mudar o fundo nestes, todos permaneceram iguais. Mas se formos para o nosso componente mostarda para este botão e selecionamos o tango re e mudamos a cor, tudo muda. Então isso é muito legal. Esta é a magia sobre o uso de componentes ou direita, Então, se você tem um bom baseado em componente mais tarde, se você quiser fazer alterações em seu design vai ser mais rápido, mais fácil. Tudo vai ser sincronizado . E vai ser muito, muito melhor. Mas o que acontece com estes fundos? Você diz que este botão é perfeitamente legal? Sim, bem, não tão legal. Quero dizer, é legal porque parece legal. E eu posso fazer isso e de alguma forma está indo para o pé. Sim, fazer o que é suposto fazer o que aumenta o seu tamanho quando estou escrevendo, mas componentes por si só, eles não ficam mais largos ou aumentam. Ou, sim, e eles se levantam porque você colocou algum texto nele porque nós não dissemos para a ferramenta que isso tem que ser responsivo sobre o tástico que contém. Então o quê Vamos fazer isso? Selecione este componente de mostarda. Vamos apenas fazer uma cópia dele. Em seguida, exclua o componente mestre. Não precisamos mais dele. Você vai ver o porquê. Agora temos uma instância fora de um componente mestre. Isto é, que se foi porque temos desescalado. Poderíamos restaurar o componente mestre. Mas se fizermos isso, sim, como podem ver, um componente mestre é criado novamente. Mas não precisamos. Não precisamos fazer isso agora. O que queremos é apenas pressionar aqui. Como com o botão direito do mouse, e então vá e desconecte o Eastern. O que ele faz é fazer este componente. Isto não é um componente. Este símbolo estes Sim, grupo de auditorias independentes de lá, componente mestre que estava tudo bem, então como você pode ver, nós não temos, hum, este triângulo. Símbolo de triângulo vazio. Símbolo diamante. Agora temos um símbolo de quadro nos como MacBook Pro. Você sabe, como o símbolo. Isto agora é um quadro e quadros. De alguma forma, eles são tipo de grupos, para que possamos no grupo este quadro. Ok, então se formos aqui e dissermos no grupo, o quadro vai desaparecer, você viu? Então, o que queremos aqui, é que vamos colocar de novo botão. Então temos um texto normal sobre ele e o que queremos aqui é selecionar o texto e o sobre no fundo. E há uma característica aqui e coloca Michael para fora. Experimente. Isto é magia. E você vai ver como se eu pressionasse o fundo de vidro tudo parece o mesmo. Ok, algo aconteceu com o fundo. Nós realmente não sabemos o que, uh, bundas podemos ver que vamos desfazer. Agora nosso fundo tinha 40 pixels de altura e quando eu seleciono isso ou se eu agrupo ele diz que tem 40 pixels de altura. E agora se eu vir aqui e pressionar estes sem teste agora ele diz 39 está desativado na largura é desativado para Por que é por isso que eu não posso vir aqui e mudar isso? E como você pode ver se você vier aqui, o símbolo mudou. Nós já não HASA Bagram. E agora o fundo está contido pelo quadro. O fundo é o próprio quadro. Isto é, ah, comportamento. Fichman tem que quadros podem atuar como fundos para e como esporte os rádios e tudo mais. Certo, então você tem reboque. Mantenha isso em mente. Porque quando eu fizer o, hum a imigração deste fica Tofig mama, ou se você está fazendo a imigração de um duplo X T Tofik Matt, isso veio ser bastante confuso. Então você tem que se acostumar com isso. Esse tipo de comportamento de quadro. Mas o que? Isso é mágico. Hum, eu vou dizer que o componente que temos aqui é que se eu quiser que isso seja. Vou colocar este texto no centro. Se formos aqui e pressionamos primário isso Wow, é que ele se torna maior enquanto enquanto enquanto escreve isso é incrível, certo? Mas você diz que está bem, mas o que aconteceu? Como mudamos este espaço ou fazemos este espaço? Ou agora é 39 picaretas deste muito estranho. Eu quero algum tipo de ajuste aqui para alguma personalização de leite. Bem, você tem isso se você está brincando com suas oito semanas de grande Ok, você diz que eu quero 24 grandes células aqui à direita, e aqui à esquerda, e é isso que ele faz. Esta coisa aqui são as margens ou colocar a casa de garrafas aqui, então são 24 pixels. O mesmo se aplica à separação vertical. Podemos aumentar isso e ir para lá. Então isso pode ser complicado para realmente levá-lo para os 40 porque depende um pouco, e eu digitei esta noite no nosso tipo de letra. Mas há algo que podemos fazer aqui que é em vez de ser luz fora da altura, podemos apenas ir dedo do pé se encaixa altura. E agora sim, somos capazes de colocar 40. Quero dizer, isto é para sair do piloto ou ali mesmo fora da altura. Mas sem uma altura, você perde o dedo de controle, estar na grade porque eles escondem isso desativado. Então, para este caso, para este, hum, sim, para estes componentes o quê? Nós queremos isso. Todos eles para serem consistentes. No Hyatt, se você tiver o nosso texto no texto de entrada Oris suspenso ou algo que você queira. Se você possui qualquer butão próximo ao outro elemento, você quer que eles tenham a mesma altura. Então, para isso, temos dedo do pé, desativar a altura externa, ir para os pés, alto e, em seguida, ir e colocar isso em 40. Tudo bem, é assim que você vai ser consistente sobre isso. Ok, então fizemos o nosso primeiro fundo. Mas o que acontece se eu duplicar isso e mudar essa cor? O que aconteceria? Nada acontece, tudo bem, porque isso está fora. Mas ainda não é um componente. Ok, então o que temos que fazer sua imprensa criar componente. E como você pode ver, o quadro desaparece mais uma vez. Lembre-se que perdemos nosso fundo em vez de fora de uma coisa de layout externo, então nossa coisa de layout externo que era um quadro tornou-se um componente. Isso é muito legal, porque ainda temos os Contras fora de nós. Experimente aqui. Este é o mais importante na coisa mais confusa sobre Fatemeh como esses quadros estão desaparecendo em vez do novo pai, sabe? Então o fundo vai para o quadro exterior. Em seguida, o amigo desaparece e se converte no no componente pai. Ok, então esta vai ser a nossa primária de batalha um corte. Nós somos. Estamos colocando isso no ano passado porque aqui é super importante, essas perdas novamente. Isto vai criar este tipo de separações. Este vai ser o padrão. Alguém os chame de ativos. Só vou esperar o Default. Tchau por agora. E o que estamos indo para o que eu costumo fazer seu dedo do pé. Sim, o que eu costumo fazer é duplicar isso e você diz OK, mas se você duplicar, você vai criar um Eastern e alguma briga, chances? Sim, mudanças. Isso é lembrança, mas queremos algo. Precisamos de algo diferente agora. O que queremos aqui, é fazer um tipo diferente de fundo. Ok, então nós queremos outro componente, porque o que nós vamos criar o quê? Desculpe, O que vamos criar. É, hum nós queremos a pessoa mais escura fora disso. Como quando estamos abrigando este botão, queremos que o dedo do pé seja hey, toe se converta para isso. Então vamos criar nosso botão Khobar. Mas o que aconteceu com isso? Se eu criar uma instância e eu acho que a cor aqui, ela não vai mudar porque isso não é um componente. Este é um exemplo. Então o que vamos fazer, é sim, temos que mudar o fundo e o que fazemos agora. É certo. Clique, uh, o toque, a instância de seu pai. E agora temos novamente, como a configuração distante. E agora, uma vez que já mudamos a cor, criamos lá componente novamente. Então agora este vai ser o nosso traseiro. Certo, então só precisamos renomear isso para Khobar. Ok, então nós temos o nosso primário em nosso fundo. Vamos fazer a mesma coisa que acabamos de duplicar. Vamos criar agora o nosso botão desativado, nossa batalha principal, mas desativada E neste caso, eu vou pressionar o botão direito do mouse para desanexar a instância em ir pressionar sobre a arte da guerra com o seletor comum. Porque se eu fizer isso, eu seleciono o todo. Eles seguram todo o componente. Digamos que todo o objeto. Mas eu quero apenas o fundo. Digamos que esta parte fora desta parte superior Então eu apenas clique na chave comum. E como você pode ver agora, eu tenho essa cor aqui. Bem, e o que eu vou fazer, é e o que eu vou fazer, é grande lá,vida primária. grande lá, Então, este botão vai ser o nosso fundo desativado. Ok. E o que agora? Este não é e não é um Ibsen, e Oriental não é ah não é um componente. Então vamos criar um componente novamente, e vamos mudar o nome para estes capazes. Ok. Tudo bem. Podemos nomeá-los aqui. Não consigo ouvir o nome, se quisermos. Está perfeitamente bem. Certo, então temos nosso primeiro componente livre em um suspiro. Um suspiro que eu lhe disse antes, há Lasses aqui são importantes porque se formos aqui para nós, ele ativos são os componentes que você criou. Você pode ver que temos aqui componentes locais. Nós concertamos quando temos um monte de componentes criados. Mas agora temos aqui esses três componentes prontos para uso. Ok, então como você pode ver, isso é muito legal porque nós podemos jogá-lo na mineração. Estamos projetando um enorme site ah e temos como, estamos na tela em qualquer tela que estamos projetando nós A precisamos de uma garrafa. Botão primário. Faça-nos ir aqui. Venha aqui. Procure por ele e você está pronto para ir. Então você, hum vai aqui, aplica o layout. Leia Vamos com 12 colunas. Então você diz Ok, sim. Queremos nosso botão lá, você vê. Então é prequel, os componentes e a coisa boa é que estamos cansados deste ciclo. Nós podemos apenas tendem a ouvir sobre como você pode ver a chamada ou mudanças aqui também. Então estes são os componentes mágicos. Bem, poderíamos pensar que a cor que poderíamos dizer é que o texto é a mesma coisa. Se mudarmos o texto e vamos ouvir e, em seguida, mudar o dedo do pé branco como você pode ver o texto muda para Então, esta é a primeira parte fora da criação de componentes. Aprendemos muitas coisas, mesmo que você não pense assim. Mas temos, uh, uh, como criar o nosso componente ou os primeiros componentes. Como fazer essas garrafas engraçadas que aumentam seu tamanho com seu teste. Então nós aprendemos sobre layout externo para isso é muito legal. Como controlar. Experimente como corrigir a altura dos fundos para que eles permaneçam em nosso em nosso luto. Neste caso, não colocamos o grande, mas agora estamos fazendo isso. Então, como você pode ver, é tudo super arrumado. Eu também sou colunas e pé de nossas estradas. Então isso é magnífico. Então, para você. E depois é uma lição e vamos continuar a fazer as nossas garrafas. Tudo bem, eu vou colocar isso em grupo porque se não, vai ser Olha, vai olhar um pouco. Nós estamos bem. Então, vamos vê-lo sobre isso em sua próxima escuta 9. Botões de acabamento: Ei, bem-vindo de volta. Vamos continuar com nossos botões. Ah, eu tenho aqui alguns exemplos de como outros sistemas de design criam suas garrafas. Eles vão com o primário como fizemos com alguns Khobar e deficientes, então criam uma garrafa secundária, que é meio estranho porque o seu super minúsculo comparado com isso e eles não têm nada a ver. Quero dizer, os rádios fronteiriços são diferentes entre isto e aquilo. Este tipo dos tamanhos, este é super grande, e este é meio super pequeno, e tudo é meio estranho neste sistema de ciência da Índia, você sabe , algo interessante aqui. Eles incluíram, como eu diria, como eu gosto apenas de um link, o que é legal. Mas aqui é meio estranho. Talvez seja meio negro. Se removermos isso agora, é só o texto. Então é legal, mas bem, acho que funciona para uma partícula. Nosso site. Mas não seria tão ... recomendar diable para todos. Então, há um alerta aqui, os exploradores e eles têm a nossa batalha primária. Chamam-lhes “padrão”. Eles têm o fantasma. O que? Nós geralmente são chamados de secundário, mas você pode chamá-lo vai para e, em seguida, incluir alguns ícones à esquerda. Ou você pode incluir alguns Michaels à direita. Como você pode ver, eles têm o grande em uma pessoa pequena fora dele. Vamos ver o que brainstorming Assim, eles têm normal grande com pode ser apenas ah, ajustado no com eles chamá-lo novamente os fundos secundários como fantasma A isso verdade que eles são chamados vai fundo quando eles só têm como estes placa lá e nós vamos toe fazer um ponto aqui depende se eles são transparentes, eles são chamados. Se não tivermos isto, são garrafas frias. Mas para mim, se eles têm ah, fundo, se eles não são transparentes, eles têm ah, fundo branco. Então, para mim, é um botão secundário. Porque se eu colocar isso em ah, com um fundo, vamos dizer algo assim e então eu apresento isso. Isso está tudo bem. Se eu colocar isso não é realmente um botão fantasma, eu vou escolher seus núcleos. Isto não é realmente um botão fantasma. Este é um fundo secundário. Se removermos isso, sim, é um fantasma porque é meio estranho você sabe, perdeu quando o com, uh, com o fundo novamente. Eu não quero isso. Eu só quero mudar a sua. Essa é essa cor e muito difícil. Não tem mais um sentimento. Sim, isso é para mim. Vai botão. Isso é só para você saber. De qualquer forma, é legal que, você sabe que, hum, que esta hora Ah, nós temos todos esses tipos de botões e, bem, eles dizem, normal. Um pequeno, talvez porque eles estão ajustando o teste em vez disso, fora de ser como talvez três colunas ou quatro colunas de qualquer coisa, nós vamos fazê-lo também. Faremos isso também. Alguns ícones que estão aqui nestas garrafas. E eu vi que eu tenho aqui outro exemplo desses recursos livres sobre que Sergei, eu vou manter fora, companheiro. Mas para mim, é Brickell porque ele incluiu batalhas de texto com geralmente nós chamamos links. Mas quando estão, vão sozinhos. São como garrafas terciárias, como ligações. Você não pode ver o botão lá fora, mas ele está lá. Vamos ver como essas garrafas são feitas. Induzir. Na verdade, na maioria dos sistemas de design, há tamanhos diferentes para ele aqui. Como você pode ver, Ei, disse Destino para o ápice de Grande. Ele está fazendo o botão de 40 pixels como o botão normal, então pode ser seu pequeno 1 a 32 pixels no grande para 48 pixels. Então você pode fazer isso em seu sistema de design. Ah, agora nós. Nestes tutorial, nós estamos indo apenas para fazer um tamanho. Vamos fazer o rolo com isso vai ser 40. Ok, então vai ficar tudo bem de qualquer maneira, apenas percebendo que meu teste 21 é bem grande, na verdade. Mas como você pode ver cenas, colocamos isso em pés de reboque, modo de altura, e nossos fundos permanecem em suas 40 grandes células lado fora da vida. Então agora vamos fazer nossas batalhas secundárias por isso. Eu só vou duplicar esses botões para o bem de ser um pouco preguiçoso e, bem, bem, para ser mais rápido. Por que não dizer isso? Então, para fazer isso, o que eu vou fazer é ao invés disso eu vou pressionar o dedo do pé aqui em camadas novamente. Então sabemos o que temos aqui. Agora temos instâncias fora desses botões e o que queremos. É o que todos estes dizem orientais dos Mestres. Certo, então só nos separamos. E agora temos Flike de novo, nossa vida distante. Nós não temos mais o componente como este ou pássaros Iêmen ou instância. E agora vamos mudar isso. Ok, então o que nós queremos para nossos fundos secundários é em vez de ter essa cor no fundo, nós queremos que a borda seja assim. Então o que fazemos para isso é ir para o AVC. Pressionamos aqui e definimos a cor primária. Ok, é uma boa prática colocá-lo lá dentro porque isso vai ser melhor para o desenvolvimento mais tarde se eu colocá-lo do lado de fora. Como pode ver, temos altura de 40. Mas se nós realmente significamos para este dedo ou dedo nosso layout, ótimo, podemos ver que está saindo está saindo. Então, no final, estes, mesmo que esteja dizendo que 40 pixels é ter uma escolha aqui e não será tão lá. Então tem 42 de altura e não queremos isso. Tudo bem, então queremos sempre que haja traços por dentro. Fique para que você saiba. E nós vamos manchar esta cor do dedo azul para a nossa bela cor primária. E depois o nosso fundo vai ser branco. Neste caso, podemos fazer isto branco, está bem? E assim para o Helber que temos, vamos fazer o mesmo opera Young. Vamos colocar um derrame no Khobar. Nós vamos colocar esses carvão ou como branco, e então nós vamos colocar nossa cor neste Khobar, e então isso vai ser bem simples. Vamos ao Stoke de novo, vamos aqui. Vamos ao Stoke de novo, Bem, Bem, neste caso, podemos falar um pouco sobre usabilidade. Alguém mente para gostos, dedo do pé. Deixe assim. Neste caso, o que vamos fazer é colocá-lo em branco também. E isso nós vamos escolher nosso roxo semi azul sendo pensar cor e o que vamos fazer Um pé legal, er, er, FEMA tem é em vez de ir aqui impressionando criar componente do que ir aqui, você pode vendê-lo, três deles clicar aqui e criar vários componentes. Fez isso vai fazer componentes separados. Então agora temos aqui. E o que vamos fazer, é um por um. Renomeado eles para batalha primária em vez de primária vai ser secundário. Bem, desculpe. Vai ser um secundário e vai apenas um GOP secundário. Então, e então vamos selecionar este. E este é o todo onde aqueles que o mesmo. O nome e este é o desativado. É melhor sermos secundários. Então temos mais três botões aqui. Podemos fazer. Vamos fazer o botão de ligação. Certo, vamos fazer a mesma operação aqui. Apenas copie. Bem, duplicado detestam os Stans. E neste caso, o que vamos fazer, é, hum nós vamos remover tudo. Vamos remover o fundo. Bem, agora, eu não vou deixar o branco. Na verdade, você vai. Agora, você vê por que neste caso eu vou remover esse derrame de novo porque nós não precisamos mais dessa conversa. E neste caso, vamos remover isto também um derrame. Muito bem, temos as nossas batalhas primárias, mas neste caso, quero outra coisa. Quero que viva um pouco da coisa Ponti para estes fundos. Então, quando clicamos aqui, nós temos, tipo, esse tipo off, uh, uh, botões de coisas do Google Drive. Eles são. Eles não têm antecedentes. Mas quando você está se posicionando em toda a nossa propriedade, eles têm, como um fundo cinza , hum, , hum,em sua parte clicável. Certo, então temos nossos fundos de ligação. Eu poderia nomeá-los. Então o que vamos fazer é a mesma coisa. Pressione aqui e os componentes criam vários componentes. E então, em vez de secundário, vamos coletar link você. Esta é minha convenção. Você pode me dar um nome. Há muitas convenções lá fora. Há muitas maneiras fora, até mesmo criou componentes pessoas. Algumas pessoas tentam complicar as coisas em ordem para ah, eles criam como um fundo. E este fundo é inserido em todos os componentes. Ou se eu mudar o componente mestre desses, ele muda e expressa todos eles. Mas eu tenho trabalhado com muitos sistemas de design e tentando fazer eso coisas complicadas. Quero dizer, tentar salvar o trabalho mais tarde, torna as coisas tão complicadas de usar que no final, é um nome para trabalhar com ela ou fazer uma mudança ou seus componentes ficam super complicados. Há componentes aqui? Como você pode ver, eles são bem simples. Eles sim. Ter um fundo. Qual é esse? E depois temos uma mensagem. Nada mais. Hum eu tentei outros métodos mais complicados tentando fazer ah, como uma coisa super automática olhos e não funcionou para mim e havia para a equipe trabalhando com e qualquer coisa funcionou. Então eu recomendo que você siga estes métodos para seguir esses métodos. De qualquer forma, há muitos artigos lá, nenhum meio. Você pode ler sobre eles e ver tudo sobre diferentes ou seus métodos fora trabalhando com isso. De qualquer forma, mais tarde vamos fazer outro método quando estamos trabalhando com entrada para que possamos salvar alguma bomba-relógio . Mas para os botões, eu acho que é melhor torná-los independentes, um fora do outro. Ok, então, sim, nós temos nossos fundos aqui. E vamos fazer alguns fundos legais aqui. Isso tem um pouco que me concentre. OK, então para estes eu tenho sim, duplicado este, hum neste caso, o que eu quero fazer, é que eu tenho um plugging chamado ícones de penas. Você pode importante melhorar qualquer ícone que você quer como mantemos ícones ou muito semelhante legal. Pluie e eu usamos muito, que se chama Connie Fire. Ele dá acesso a centenas, centenas de ícones que você pode fazer uma busca aqui, eu não sei, até mesmo lixo, por exemplo. Ou você tem muitos ícones aqui ou seu Você tem um monte fora. , Veja, você tem todos esses ícones definidos. Então, por exemplo, você quer, eu não sei, ir com ícones materiais, nós pressionamos aqui e vamos sim, e isso pode ser os ícones materiais de vontade com estes impostos e tudo mais. Então você tem todos eles disponíveis aqui e bonito, Sim, Você apenas fazê-lo e importar ícone e está na página já. Então é bonito. É uma conversa muito legal, sabe, e, bem, bem, isso é bem básico. Eles serão materiais, mas nós também temos penas. Mas vocês, eu sou os oito ícones do Icahn para Windows 10 Foundation. Um monte fora de um monte de ícones supercool e ícones depo são muito legal, também. De qualquer forma, usei esta bandeira porque em Lee tem Fred Reichel, o que eu gosto muito. Então é isso que eu uso. E vamos inserir um estreito que seja convidativo. Nós queremos colocar um estreito aqui em uma garrafa, então, uh, você pode ver aqui que estamos tentando fazer é algo aqui. Não funciona tentando inseri-lo aqui. Hum então é por isso que é isso Porque ele tem thes como você pode ver quando você importar no ícone de ah, para pena ícone Desculpe, Quantificado. Eles vêm com um com este quadro. Então, o que eu geralmente gosto é de pé no grupo isso com um G de segurança comum e, em seguida, pressione o comando Z para fazer um grupo novamente. Você pode fazer isso aqui como seleção de grupo. Como você pode ver, é comum D ou para PC seria como Contrave. Então você só empresta o dedo do pé dos circuitos, te coloca em uma velocidade? E como podem ver, estou a tentar alimentá-los aqui e é meio impossível. Vou trazê-lo aqui para o MacBook Pro três e vou fazê-lo novamente tentando inseri-lo aqui. Mas não está funcionando. Eso Por que é isso? Sim, como pode ver, não me deixa colocar isso. Não consigo ouvir. Bem, na verdade, eu vou me trocar. Bem, não ainda não. Eu quero mudar a cor aqui, então é branco, mas por que não me deixa inserir dias aqui? hum porque deveria. Por que é isso? É porque é uma instância desses todos os botões. Então vamos comer. São eles de novo. E agora vamos trazer essa coisa do jeito que você está vendo. Agora temos aqui como uma coisa azul, como um golpe azul ali. E se Walla está dentro, então vamos aplicar para estes Um traço O branco e como você pode ver que temos agora são ícone e podemos controlá-lo novamente. Como Imagine. Queremos menos separação. Tudo isso está emergindo. Queremos mais separação em tudo. Acho que este ícone, é para os Reagans tem dois píxeis. Isso para mim, é demais. Mas como você pode ver, temos agora estes icônicos podemos controlá-lo com esta serra por uma questão de consistência, digamos 24 ou podemos ir com 16. Talvez o espírito tenha 16 anos. Nosso oito fala muito bem. Ok, mas eu acho que talvez algo sim, algo em torno de 24 de novo. Sim, acho que é melhor. Então, nós estamos indo para o pé. Copie essa coisa. Este ícone baseou-o novamente. Como você pode ver, isso aumenta muito, então nós vamos apenas colocá-lo aqui no estado de Khobar, como você pode ver, está fazendo uma coisa estranha. Como você pode ver. Posições lá em cima, ali, há pés frios. Er aqui. Vou colocá-lo lá de novo. Há algo interessante quando você está trabalhando sem layouts e alguns e você tem um item selecionado. Isso é aqui? A aliança? , Piloto, está funcionando. Como você pode ver, se eu selecionar no meio está indo dedo do pé alinhado ao meio. Se eu preciso para o fundo está alinhando seus se eu quiser alinhá-los. Este é um direto para um topo na parte inferior. Eu não recomendo fazer isso, mas você pode fazê-lo tese legal para fotos e tudo mais. Então eles você esticar, você sabe quando quando você tem eles são tipo de resposta que isso é ótimo para quando você tem fotos dentro e fora cedo, fora ou sobre o nosso algo assim. Mas para esses problemas ou botão em particular, estamos saindo assim. Neste caso, vamos sair daqui. Todos eles tentam isso também para 40 24 como o partido entre o texto no ícone e nós vamos fazer a mesma coisa aqui, e nós vamos colocar aqui como 24. Como você pode ver, aqui estão ícone. Está na linha de cima até o topo. Então nós vamos para em e alinhá-lo lá. Aqui você pode fazer algo ou imaginar que você quer o fundo antes do arrependimento, o ícone antes do texto, você tem duas opções. Aqui você pode fazer algo ou imaginar que você quer o fundo antes do arrependimento, o ícone antes do texto, O que eu normalmente gosto de fazer para este botão em particular é duplicar o símbolo e colocá-lo lá, duplicar este, colocá-lo lá e colocar este símbolo e colocar o seu E você diria, Por que é isso? Por que não criar outra garrafa com apenas o, um com o ícone à esquerda e outro botão para o ícone à direita. Não quero ter tantos componentes aqui. Mais tarde, os bens e pés, minha casa um prequel pés antes vamos vê-lo agora em ação. Então vamos selecionar novamente isso e vamos criar vários componentes, um componente fora dele, e vamos renomeá-lo para primário inferior. Jesus, cometi um erro, mas vamos fazer este ícone. Certo, ícone Primário. Cometi um erro renomeando, nomeando-os, mas não importa. É bom ir. Então estamos incluindo a vida aqui. O ícone. Então eu estava dizendo que isso é legal e eu vou mostrar a vocês como e por que nós tiramos Aniston deste componente. E digamos que só queremos lá. Digamos que esse ciclo. Então eu não quero mais este ícone. Podemos clicar duas vezes aqui. Vemos que se chama Grupo. Acho que vou fazer alguma coisa. E é renomear esse tipo fora do ícone do dedo do pé do grupo porque o grupo não significa, realmente. Eu venho à direita. Ok. E isso vai ser ícone deixado e, em seguida, vai fazer o mesmo que eu tenho para os ladrões antes, então eu não tenho que fazer isso agora em bom. Seja mais fácil. E isto está tudo bem. Vá para a esquerda. É por isso que você tem que pensar como fazer um. Sim, essa era a direita dela indo para a direita. É por isso que os mesmos sistemas quando você está fazendo eles. Ah, eles são. Você tem que pensar um pouco sobre o que você está fazendo nesses casos. Eu não estava pensando muito sobre o que eu estava fazendo. Então aquela escola, porque se você disser, é o nome aqui, seus, hum, instâncias herdarão a mudança de nomes, também. Então, neste caso, quando você está clicando duas vezes aqui, você pode ver que temos ícone deixado lá. E se você pressionar delete ou você pressionar estes botões I, como você pode ver, nosso fundo rece gelo e eu não posso desaparecer para que eu possa fazer a mesma coisa com isso e nós poderíamos ter o fundo. Mas isso vai ser usado. O uso primário será usado principalmente. Então eu tenho que estar me ligando. E desligar os ícones vai ser uma dor no S. Mas se quando quisermos um fundo com alguns ícones, simplesmente deixamos isso e removemos o que não queremos, disse Asai, você pode clicar. Você pode clicar no I, ou com isso eu posso esquerda selecionada, você pressiona excluir e em vez disso fora da liderança você tê-lo aqui, mas ou desculpe. Não, porque eu fiz isso em seus desculpe, eu fiz isso aqui, mas estes você aperta aqui em duplo clique e pressione delete. Como você pode ver, o que ele faz é Yeste. Dizia que está em baixo, mas não é a comida, os ícones. Ok, então é assim que eu gosto de fazer meu ícone sobre as coisas. Poderíamos fazer o mesmo para os secundários. Isto vai ser muito mais rápido porque já que nós já temos esses fundos aqui nomeados em tudo vai ser muito simples novamente. O toque estes e, em seguida, convidado trazer estes aqui e com a chave antiga para que ele fique duplicado e estes querem aqui e agora o que fazemos, é ah, nós selecionamos aqui a cor. Então ele vai mudar. E isso vai para ditados tão bem quanto podemos ver aqui. Estes fundos não têm as 24 grandes células aqui. Uh, vamos colocar aqui 24 quando pisarmos nossos ícones aqui eles são bons o suficiente. Então, como você pode ver, eles estão mentindo para o topo. Então nós estamos mentindo para o meio dizendo coisa aqui e agora nós vamos apenas com o botão al , selecionar a seta primeiro e então sim, drogá-lo aqui, então nós vamos selecionar isso também. Vamos para o meio de novo. Precisamos mudar a cor deles para muito. A propriedade de Khobar e a mesma coisa se aplica a esta batalha desabilitar. E então dissemos isso também. Pressionamos aqui e novamente, vamos para o estado deficiente. Ok, então nós vamos criar componentes novamente, criar mais componentes de depósito, e este vai ser o ícone secundário. Pode ser o texto. Então parece que você está aqui. Ok. E este, como você pode ver, eu vou experimentar. É muito legal. Podemos fazer o mesmo aqui. Farei isso sozinho. Não quero voltar a fazer a demonstração. Mas a maneira de ter aprendido nestes nestes super Floresta Ah, lição como dedo do pé primeiro, como toe criar ícones não vai criar, mas como importar ícones e e sim, e como dedo fazê-los vida com o teste al. Então eu vejo você. Termino isto e vejo-te na próxima lição. Tudo bem, 10. Inputs: Então vamos voltar e ouvir. Comece estes novos Ouça, isso vai ser interessante. O que vamos fazer agora é dar uma olhada no dedo do pé, outros sistemas de descida. A segunda coisa que fazem depois das batalhas são as formas que chamam. Eles chamam de formulários para mim no botão de entrada caixas de seleção, selecione andro downs, Chuva Select. Podemos ter aqui um monte de coisas, certo? E eu acho muito legal porque este tipo de componentes compartilham algumas coisas que são bastante iguais entre eles. Mesmo que sejam diferentes, por exemplo, podemos ver que estamos aqui. Dizem que esses antecedentes, é tudo igual para todos eles, até mesmo para o menu suspenso. Quero dizer, a diferença é sim, que eles têm como um ícone à direita ou um ícone à esquerda. Então eles são praticamente iguais. Certo? Então vamos fazer as caixas de seleção realmente botões, etc. Mas vamos começar com isso. Vê o que é brilhante trazer tempestade? Fazer aqui com as entradas é o mesmo que você pode ver. Então nós estamos indo toe bill são nossos componentes de texto nossos quatro componentes? Certo, então voltamos aqui, podemos criar outra bússola. Então, mais tarde, está aqui. Dedo. Sim, para fazer todas as nossas coisas. Isso é para uma velocidade Sekoff. Só vou duplicar este botão. Então já tem estes 40 e ódio fixo. E tem afastado neste caso, o que eu vou fazer. É desanexado isso para que não tire nada de seu pai. E eu vou apenas para remover, experimentar porque geralmente, um, um, importação vender seu e eles são corrigidos. Eles não fazem Se você estiver certo em uma senha sozinho O IRA este não se move ou não se redimensiona. Dependendo do conteúdo, eles são tipo off fixo. E se dermos uma olhada, então o básico Ah, uh, uh, destruidor básico fora da entrada do ventilador sentir ou selecionar ou direita batalha de rádio. Eles, senhor, algumas partes em comum. Nós não podemos ver aqui porque esses sistemas de design são tipo fora de sua Eu não estou dizendo que eles são muito legal fora, mas quando você está tentando aplicá-los, eles falham às vezes em algumas coisas. E eu quero que você faça um sistema de design muito bom que ele consistente em todos os elementos nele pode ser usado sem uma luta mais tarde. Ok, Restore Mean acontece um pouco o mesmo, mas sim, eles têm. É praticamente o melhor daqueles três que temos. Temos visto fora aqueles este projeto mais código e explorar Princeton Minutos pré Must o melhor deles? Por que é isso? Porque é o mais completo. Eles colocaram o rótulo aqui. Eles têm o estes dica perca, ou pode ser para métodos de sucesso, geralmente não quando é acessos sucesso. E está tudo bem. Eles geralmente comercializam com um cheque aqui ou quando eu liguei ou algo como não há com uma mensagem, mas ele tem a notificação sempre. Quando você está escrevendo algo, minha senha que não coincide com a entrada de senha superior, medo ou você tem que inserir um e-mail e você não colocou a porta. Então essa coisa, esse tipo de coisa que mantém o erro. Então, se você pode ver a estrutura, seu rótulo ah, uma entrada com essa borda do que um espaço reservado, que é muito importante às vezes, dependendo de como você decide fazer isso, esse tipo de ciência e e, em seguida, uma mensagem de dica ou uma mensagem crítica. Mensagem Aero aqui, então vamos nos concentrar em fazer estes primeiro. Ok? E é por isso que vamos fazer. Então, para estes, nós quase meia hora nossa entrada Tex aqui. O que eu vou fazer é duplicar isso porque é mais fácil do que criar outro texto. E vamos apenas duplicar este também e colocá-lo aqui. Ok, hum, o que nós vamos fazer, é Ah, eu vou apenas dizer lá layout para baixo porque é um pouco irritante. Ah, por exemplo, aqui podemos verificar e colocá-lo em nossas escolhas. Concorda vai estar no 16. E o que mais? O que mais? O que mais? Eu vou colocar isso no fosso exterior como, eu não quero que isso aumente como aqui. Eu quero ser assim. Sim, porque eu gostava dos meus textos conhecidos por serem corrigidos, mas nessas situações, realmente não importa. Mas levou um caso que no caso de ele ir para lá, eu vou ver o que eu faço. Mas isso não é uma luta. Ou se eu tiver um longo teste, ele não faz duas linhas. Você vê, eu não gosto disso. Então eu prefiro deixar o dedo do pé para o meu texto. Livre com isso. Fora com o Peter. Ok, então agora vamos criar a fronteira por dias. Normalmente é neutro. A cor que você usa para isso e também. É um caminhão novo ou o quê? Usamos o que usamos para espaços reservados, espaços reservados Armento fazer como um informante re. Reforço da mensagem que você deseja enviar, por exemplo, insira seu e-mail no caso de este ser um e-mail. O ah, nós vamos apenas fazer cócegas na etiqueta, e isso vai ser chamado de espaço reservado. Por que é por isso que eu poderia colocar aqui como um exemplo já, Mas eu gosto de colocar este texto porque aqui o texto que leva o texto que você Ah, você colocou aqui. Então, se eu tenso estes dois e-mails e mais tarde, eu estou fazendo estes reboques estes. Fiz o componente destes que decidiram a ideia. E então eu faço um exemplo disso. Vai aparecer um mero e-mail em vez de fora da etiqueta, então eu prefiro nomeá-los com suas quatro postagens. Então, neste caso, é um rótulo neste caso é mensagem dica e, neste caso, é geralmente menor . Mas não temos um menor. Então eu acho que nós vamos criá-lo. Sabe, algo que esqueci de fazer antes. Mas essa é a grandeza dos sistemas de design que, uh, você pode amplificá-los ou torná-los maiores e aumentá-los enquanto você tem tipo, ah, sistema para isso. Então eu vou tomar se eu metade eu só tinha, tipo, é por isso que eu gosto de fazer uma classificação de tela para as coisas porque eu venho aqui para captura de tela e eu tenho meu Buswell uma escala e nós vemos aqui que nós temos em nossa basal uma escala de 12 pontos para um é por isso que eu gosto de fazer uma classificação de tela para as coisas porque eu venho aqui para captura de tela e eu Fala total. Então, nós vamos colocar aqui dedo fora Se isso é pré pré, pré pequeno Então MM, 14 é para ser bem, neste caso, ter a minha escala visual. Vai ser fora do luto um pouco, então depende também da tipografia nesta tipografia talvez 12 pixels foram inchados, mas em nosso tipo de rugosidade não estava bem, então você apenas levanta o olho e diz OK, 13 é bom o suficiente. Então criamos como o nosso 13 regular um estilo. Ok, então estamos prontos para ir e o que fazemos aqui. É ir para a mensagem do rei Pressione o rebelde são 16 e vamos para o ar rebelde 15. Gosto das minhas coisas ou lá. E neste caso, como você pode ver aqui quando eu vou procurar por 13 não está no início. É no final porque eu criei o mais recente. Então o que fazemos é sim. Pressionamos, clicamos lá fora, não selecionamos nada. E o que podemos fazer é selecionar seus 13 regulares e trazê-lo para cima. Então é assim que você está lá essas coisas. Ok, então e eu vou fazer o mesmo com o rótulo está tudo bem em 16 células de porco. Podemos fazer um menor, se quiser. Em alguns casos, eles são menores. Hum, eu gosto assim. Então o que eu vou fazer é aplicar, tipo, um neutro, mais duro neutro neutro 30 para talvez para o rótulo. Ok. E há algo interessante que posso fazer aqui, já que não queremos que isso se redimensione. Quando estamos escrevendo aqui, isso vai ser corrigido e na verdade e vai trazer o meu layout para fora e eu vou colocar isso em quatro colunas porque geralmente quando nós projetamos com 12 colunas o que fazemos como nós usamos como esta parte, como este tipo de divisões. Então nós fazemos, tipo, três colunas riel no conteúdo. Ok, então isso pode levar, tipo, quatro colunas, mas no final é sim, como uma. E podemos fazer algo aqui que seria a parte mais fácil que está acontecendo aqui e criar um componente que seria um direito. Mas se mais tarde decidir apagar isto e apagar aquilo, como podem ver, meu componente é um roubo. Hum, eu não sei. É um tipo desligado. Sim. Quero dizer, o componente. É um menor e tudo mais. É como se tivesse uma caixa delimitadora enorme. Então, o que eu gosto de fazer em vez de fazer um componente aqui, Vamos apenas fazer isso e eliminar Excluir o componente. Eu tenho que me perguntar. Lote em andamento. Desculpe. Então vamos lá, componente um. Quebre você mesmo. Ancele. Tudo bem. Agora, hum, algo que eu gosto de fazer sua escolha isso e trazer o meu para fora Experimente as coisas. O que está acontecendo? Sim. Traga o meu para fora. Tory aqui fora e, como você pode ver de novo, lidar com isso. Então nós somos um pixel realmente é bom para ir. E agora nós selecionamos o rótulo e saímos cedo para e colocamos isso em, uh, oito semanas. Então luto de novo. Certo, Streaking. Certo, vamos com os números. Então agora o nosso eu vou dizer-lhe como ele está trabalhando um suspeito. Então é tudo em oito pixels. E como você pode ver, isso está funcionando muito bem. Não sei o que este branco, este lugar é tão estranho. Portanto, há algo interessante aqui em um intervalo. Quando você vê esse tipo fora de casas decimais aqui, nós queremos arredondar duas grandes células, e eu quero que elas sejam, mas 16 é o que eu disse antes. Não sei por que foi, mocinha. Então, sim neste caso, sim, vamos fazer isso neste caso. Isso significa levar alguma coisa. Está tudo bem. Ok. Eu sei o que está acontecendo aqui. Hum, está tudo bem. Sim, temos uma moldura. Vertical. Sim, não. Tudo bem. Então, vamos criar este componente, e este componente vai ser chamado de importação de entrada próximo no padrão. Ok, então o que aconteceu se eu quiser Yeste, um, o espaço reservado e o rótulo, mas não a mensagem de calor. Não se preocupe. Você tem Clique na mensagem oculta e você simplesmente excluí-la. E isso é automaticamente rece ice, como você pode ver. Ok. Ou se você não quiser o rótulo que você excluiu e tiver um espaço reservado de 50 em 40 pixels. Se você quer tudo de volta, você não tem que colocar tudo de novo no ah, você não tem que trazer outro elemento. Ah, você só pressiona os olhos e você Sim, ligue. Então temos uma oferta. Eu vou apenas apagar apagar apagar a barriga para fora neste momento. E houve algo que fiz e devo dizer que não foi muito bem feito . E eu vou te dizer o que é isso. É ah, imagine, imagine, hum, neste caso particular, eu porque eu estava tipo, lidando com a garrafa e tudo mais. Eu tenho essa parte em vez de um fundo para esta parte. Eu tenho, tipo, estas molduras, como você pode ver, certo? Por isso, vou acabar com isto. Eu não preciso mais dele, mas hum há algo que eu gostaria de fazer seu dedo do pé tem esses componentes, como separado e como um componente mestre, você vai ver o que eu quero dizer. Agora é o que eu realmente quero fazer com isso. É como um fundo com uma tábua lá. Então, mais tarde, nós o mantivemos. Quando? Quando o seu foco e tudo mais. Eu só tenho que criar, hum Eu não posso replicá-lo em muitos, muitos, muitos lugares. OK, então eu não sei se estou me explicando bem, mas o que vamos fazer, é ótimo isso e inseri-lo em cada elemento que nós e em cada componente que vamos criar. E isso vai tornar as coisas mais fáceis mais tarde, onde você vai ver o que eu quero dizer enquanto estamos fazendo isso. Ok, então deixe-me sim, criar estes e eu vou criar. Eu estou indo para um grupo isso porque ele disse quadro agora e eu quero que ele seja um retângulo . Ok. Whoa, isso não importa. Uh, o que eu posso fazer aqui é criar um componente e eu vou chamar isso de entrada mestre. Ah, Default. Ok, então este vai ser o nosso padrão de entrada de reunião. Hum, fundo aqui, e eu vou competir com o nome dele, e esta vai ser a nossa entrada principal. Ah, Holder. Bem, não Hubbard. Isso vai ser, tipo, tipo, por que estado focado? É por isso que quando estamos digitando ou temos a entrada selecionada esta boa, esta vai ser a nossa entrada em todos os lugares. Bem, e então é isso por enquanto. O que queremos fazer aqui, é em vez de ter este quadro, eu vou apenas agrupá-lo e umpara um que você possa ver que estamos perdendo nosso, uh, uh, nosso todo o Espace aqui. Vou tentar colocar isso aqui no espaço reservado, e vou tentar colocá-lo aqui. Tudo bem. Acho que é uma bagunça. É uma bagunça o que estou fazendo. Mas você vai entender o ponto e, na verdade, e vai fazer alguma coisa, eu vou apenas duplicar isso. Fez aquela nave, e eu vou fazer de um arranhão. Tudo bem. Ok. Então este é o nosso, hum estão perdendo coisas por aí. Só me deixe fazer tudo e volte para o pé. Sim, da parte dele. Ok. Desculpe o erro, mas para que você possa me emprestar onde eu estou fazendo errado. Você pode emprestar melhor e mais rápido. Desde o início. Ok, então temos aqui três coisas principais. Três componentes. Isso não significa nada. Eles são apenas quadrados com algumas cores aplicadas sobre ele. E o que eu vou fazer, é Ah, duplicar isso. Destacar este Leste deletar este dedo do pé em curso no grupo isso. Eu não quero nenhuma moldura. Eu não vou em nada. Quero apenas o rótulo no espaço reservado e a mensagem oculta. Ok, então nós vamos construir são não comprometidos no leste desliga esses componentes mestre, como você pode ver aqui, este? Sim, estes têm este diamante vazio. Então é um exemplo. E onde vamos fazer, é colocar isso em Ouça-nos. Campo de entrada. Ok, então nós estamos indo apenas para alinhar isso como nós temos antes de nós estamos indo para criar um grupo com isso vai ser a entrada e nós temos nosso nível e mensagem Arkin neste caso e indo apenas para colocá-los todos os raros ao redor e o que vamos fazer é selecionar o rótulo no espaço reservado e ir para fora. Ok. E agora temos oito aqui e então nosso ele perde e sai. E escolhemos este grupo isto, experimentamos o quadro com ele. Vamos chamá-lo de importação Loville mais entrada aqui. É importante nomear coisas que às vezes esqueço mais tarde. Eu tenho que fazer isso porque o sistema científico tem que ser pré claro e tudo tem que ser um nome. Ok, então e agora nós vendemos. Este grupo com isso já está e agora totalmente fora, como você pode ver. E então selecionamos a mensagem dele com a segurança, e depois aplicamos outra. Experimente. Ok, então nós temos um par de fábrica fora o que isso dá. Então nos dê o dedo do pé da liberdade. Realmente? Mova a dica. Se mais tarde decidimos que queremos esses pixels existentes. Mas o rótulo é que eles estão bem. É melhor fazer para fora Tory em vez de colocar tudo em um fora para colocar para fora. Porque talvez queiras separações diferentes entre eles. Ok, você pode fazer isso se você quiser parte. E agora vamos fazer o dedo do pé. Isto tem um componente. Isto é bom para ir. Então isso vai ser um padrão de texto de importação. Ok, então nós temos. E se nós criarmos de novo, um, como um leste fora disso e nós, hum, esconder o rótulo no ele perder, nós podemos trazê-los para cima e depois para baixo e mais e você sabe que você sabe o que quero dizer. Ok, então isso é sobre uma coisa importante, e há outra coisa importante. É que quando os elementos são chamados Ah, agora, se você pode ver aqui, nós temos um leste no leste fora deste componente. O que há de fixe sobre estes ihsaa? Imagine que você quer, um, como um foco ST destes. Você não precisa criar outra entrada para eles. O que você pode fazer é sim. Selecione estes agrupamento colocar padrão e ouvir à distância. Você pode substituí-los como coisas na frente para a partir do foco um e estes dizendo sentar-se para um erro um. Isto é muito fixe. E é super rápido de fazer. E você não precisa criar tantos componentes. Podemos criá-los agora. Quero dizer, podemos separar isso e criar novamente um componente para em vez das coisas do quarto fim de semana. E estou aqui para datilografar ou focado. Prefiro concentrado. Ok, e estes nós podemos separá-lo deste em nome. Coma e crie o componente novamente e mude para erro. Isso é legal. Porque aqui, como você pode ver, se eu criar um Aniston destes agora, eu posso ir aqui e mudá-lo no dedo do pé erro ou muito focado porque nós criamos, hum, componentes com o mesmo nome de instrutor e eles. Ah, Fichman. que você não substitua entre seu padrão em protesto, seus testes de entrada focados e seu erro de texto de entrada porque eles estão no mesmo tipo de pasta da mesma maneira. Se eu criar um componente nos stands fora deste, ele vai deixar, ele vai me deixar mudar entre estes três porque eles estão na mesma pasta que você pode ver, ele contém toe Onde ou eu contestar para focar. OK, então cabe a você neste caso em particular é com você. Se você quiser criar, sim um componente e mudar aqui, a propriedade tão focada ou bem, neste caso, eu vou deixá-lo assim. Mas Ou, se você preferir dedo do pé, criar três componentes como um para como o padrão, como foco ou erro geralmente o que? Geralmente está nos sistemas científicos o que você faz, é criar um componente para ele. Geralmente está nos sistemas científicos o que você faz, Então, mais tarde, o que devemos a nós e venha aqui e você vem aqui em textos de entrada. Se você quer em uma estrada, você vai para um erro. Ok, mas eu descobri que quando eu estou projetando muitas vezes, eu tenho alguns textos já aqui. Quero dizer, você pode pensar que eu estou fazendo uma interação e eu tenho que colocar um aqui. Meu e-mail e eu vou para cá. Meu e-mail, uh dot gmail dot com Algo está acontecendo de novo. O texto. Essa é a única dor que quando você faz uma mudança, você tem que fazer a mudança em todos os lugares. Então, neste caso, e eu mudei o que está acontecendo O que está acontecendo? É como procurar aqui. É meio estranho. Eu quero aqui para Sim, e eu quero mudar esses novos sorteios para a ISS. Bem, ele pode. Você já tem campo e imaginar na próxima tela ou interação a razão nunca , em vez de colocar isso novamente o que? Eu acho que é mais rápido ir aqui e colocar isso como um erro e a mensagem do rei veio para cá . Crítico. E você não tem que trazer outras coisas aqui, sabe? Então, para mim, é como se o dedo do pé fosse mais fácil, às vezes, mudá-lo no voo. Mas é um bom dedo do pé de prática. Tenha todos os elementos separados, mesmo que mais tarde no que você está trabalhando, você apenas faz as substituições sobre a peça principal. Ok, então cabe a você como você quer fazer isso. , Completamente, completamente até você. Então, neste caso, sim, pelo bem. Fora ter todos os elementos. Ah, como muito bem, uma estrutura. E tudo vai ser o nosso teste focado. Este é o lugar onde estava. No entanto, eu acho que eu apenas excluí-lo. Então, neste caso, eu vou fazer disso um componente. E isso vai ser erro de entrada de texto D. Este é o nosso foco. Este é o padrão de teste rígido. Este é o nosso campo. Quando quando eu quando uma entrada é campo, nós os chamamos de campo. Então vai ser assim. Então, sim, isso está indo muito bem. A coisa boa disso é que sim. Eu queria te mostrar isso. Você encontra fazer uma cópia disso e então eu crio como um componente. Se eu fizer isso mudar aqui, todos eles vão mudar. Ou se eu fizer como uma mudança da Índia, hum neste caso particular, eu tinha visto isso, então isso poderia ser como o componente mestre de todos eles. Então, neste caso, eu quero que isso seja primário porque ele está focado e nós estamos digitando. Certo, mas isso é meio que um componente mestre para quê? Com o que normalmente as pessoas fazem. É renomeado isso para Mestre porque ele é o nosso componente mestre, deve ser padrão de texto muito importante. E isso vai ser um apenas na entrada estão realmente em protesto. Padrão. E o que fazemos é sim, criar de novo, um componente o que estamos fazendo. Está fazendo um componente, muitas vezes oriental. Então o que estamos fazendo é fazer um componente com algumas mudanças. Como você pode ver aqui neste caso, você pode ver que há este símbolo que indica que este é um exemplo fora deste, como você pode ver o visto. Senhor, este é um mestre. Isto é, hum, aqui. Este é um componente mestre. E então agora este é um componente mestre para, mas inclui componente tese dentro dele. Tem entrada. texto padrão dentro do, neste caso, pode ser este. Está bem, mas não importa. Quero dizer, vamos ouvir. Podemos ver aqui a entrada mestre este padrão. Tem estes incluídos neste. E fizemos algumas substituições e mudanças. Isso é muito legal porque, como estávamos dizendo, se estamos fazendo mudanças aqui, tudo muda. Ou decidimos que a nossa gravadora tem que abrigar uma etiqueta maior e ousada e tudo mais. Tudo muda. Ok, então essa é a única coisa que eu acho que é ótimo fazer. Ah, como com algum tipo de complicação. Como símbolos de nidificação. Isto é ah, onde estão os símbolos de nidificação? Ou é chamado de componente de aninhamento. E esta é uma técnica crítica. E espero que ache interessante. Nós, na próxima lição, vamos continuar a fazer o nosso resto dos componentes com ícones. Nós caímos, etc. Então vejo você sobre isso de vez em quando é menos em 11. Erros e nova entrada: antes de continuarmos. - Onde? Vou fazer alguma coisa. Já vimos outros. As ciências que o têm. É a parte dos ícones. Está bem. Ah, cada um deles tê-los de alguma forma ou de outra. Eles têm uma iconografia aqui. Sim, todos estes. A ciência oriental. Tire-os A. Então você pode ver que eles têm como um componente e eles geralmente são do mesmo tamanho. Então, por exemplo, eles são 28 grandes vendas por 28. Todos eles são 28 por 28 como você pode ver. Por que é isso? Então você pode substituí-los. Por exemplo, é se fizemos um componente em instância fora deste componente aqui, podemos ver que temos esses ícones e temos essas categorias aqui. E, em seguida, estes Você pode apenas alterar os ícones no espaço. Digamos que permaneceu o mesmo. Ok, então é importante que todos os ícones tenham servido o mesmo. O mesmo espaço, se você fizer isso até 28 é bom. Se você fazê-lo por 24 é perfeitamente bom para isso depende de como você está fazendo seus ícones. Como eu disse antes, estávamos usando preto para seus ícones blacking aqui dedo do pé inserir os ícones e isso é muito legal. São 24 por 24. O que poderíamos fazer aqui é converter qualquer ícone em um componente para que nós teríamos, como, nossos ícones aqui. Poderíamos renomeá-los também. I consciente última airplay e convidado colocar Alli todos os nossos ícones aqui e seria bom e converter este novo Sim, para por que vem e você sabe Mas há muitos recursos está lá para ícones. Acabei de fazer uma busca rápida aqui no Google, como surtar mais ícones. E acontece que há, sim. Ah, arquivo. Com todos os ícones aqui em componentes, você pode ver então podemos apenas vir aqui como você pode ver os componentes Aral Então nós sim, podemos copiá-los. E baseado em Moammar em nosso arquivo, bem, isso não importa, é se é um pouco maior. Mais tarde, contivemos. Vamos basear um menor ou são ícones aqui. Há algo que não falei com você, e é o nome dos quadros. Você sabe, há uma coisa importante que se nós renomeamos essas chamadas como ícones mais tarde, se nós vamos dizer que nós fazemos uma instância aqui. Bem, vamos até aqui para ver isso em ação. Então vamos aqui para os ativos onde podemos encontrar todos os nossos componentes. Você vê aqui que nós temos, como, esses ícones, ícone de pena. E então temos todos os nossos ícones aqui. Isto é importante. O nome do fora do tabuleiro do pátio também. A nomeação como o próprio componente porque, por , exemplo, em vez de nomear estes MacBook Pro 5 com este tipo desligado, hum, estúpido. E chamamos essa entrada, voltamos aqui para os ativos, veremos que temos entrada, entrada, entrada, que é meio redundante e, em seguida, entrada, mestre. Ok, então isso pode fazer a diferença enquanto olha o dedo do pé ou 13 4 para os nossos, hum, componentes. O que significa é que quando um componente está dentro de outro, hum, frame que tem um nome, isso faz como o primeiro, como a primeira pasta. Vamos chamá-lo assim. Como a primeira pasta. Então, neste caso desde que eu Haas hot name estes, como entrada, entrada, texto padrão. Quando eu venho aqui para ativos, sua entrada, entrada, texto, e, em seguida, ele está aqui. É que se um velho. Mas eu posso apenas um encontro. Nome-me aqui no componente. Isto está reservado. Sim, eu posso simplesmente apagá-lo, ok, porque se ele está contendo isso, nosso conselho vai pegar esse primeiro nome, o nome de entrada. Então o que vamos fazer é sim. Vá em frente e remova essas coisas de entrada. Só quero mês aqui o mestre, porque eu quero diferenciar o que é realmente ah componente do que é. Um jeito mestre. Não queira incluir mestres em nossos designs. Queremos incluir componentes. Então, há algumas pessoas. O que costuma fazer isso? Sim. Nomeado isso como componente ou grupo ou o que for. Então eles sabem que diferença. Oito. Pré bom. O que é um mestre de seu componente? Certo, então é com você. O nome fora. Como você quer fazer isso? Mais tarde, você pode fazer como um livro renomeando. Estão aplaudindo para o Doc. Então agora que temos nossos ícones aqui, o que eu quero fazer, é quebrar tudo o que eu quero para quebrar este mestre que tínhamos antes. Então nós vamos fazer, tipo, outro componente completamente diferente tipo, outro componente completamente diferente. É por isso que estes instrutor que criamos para estes não Olá, foi para inicializar aqui quando eu ir em e, em seguida, um aqui. Então vamos quebrá-lo. E sim, então para isso nós temos que apenas remover, tentar aqui e então nós temos essas entradas, e nós estamos prontos para ir. Então agora temos justiça para ... camadas. Três textos e eles inserem instância. Vemos que é o pano de fundo com o conselho lá, estes que queríamos manter. Mas o que queremos fazer agora é inserir esses ícones que temos aqui. Então eu estou indo para Ah, fazer algo e está copiado. Traga-me um pouco se o encontrar aqui, a única coisa que posso fazer é ir até nós. Está em busca de mim e nós o temos. Lembre-se de que os ativos estão fora dos componentes. Então temos o nosso componente aqui. E como podem ver, , temos de mudar isto para outra cor. Eu vou apenas colocar que o é esperar apenas para vê-lo mais tarde, eu diria que é a cor aqui, então nós queremos que estes para ser em 16 nós. Fizemos antes no espaço reservado. Digamos que queremos oito pixels daqui, certo? E agora vamos colocar outro ícone. Ouço isso mais tarde. Nós contém 16 pixels para ele também. Sim, isso é bom. E agora que temos, tipo, leste e parte quando eu chegar aqui, podemos ir aqui para instância. E temos dois oceanos para os componentes principais. O que fazemos é levar-nos a esta isca aqui apontando para o ícone do olho. Mas agora, se o clube for olhado, podemos ver que temos aqui todos os ícones, como você pode ver, então você pode escolher o que acharmos que somos um homem aqui, então pegamos o correio selecionado e podemos mudar a Guerra Fria. Ok, então sim, então isso é um Isso é um pensaria então é bom colocar componentes aqui. Então, mais tarde, você pode substituí-los por outros ícones aqui, então essa é uma boa prática. Então nós queremos com este primeiro 2, duas camadas separadas, metade como um afastado. Por que é isso? Porque se mais tarde, não queremos isso e apagamos ou escondemos. Queremos que o espaço reservado se mova para a esquerda. Então, para isso, mas nós fazemos, é criar um afastado, que já está no lugar. Basta verificar se tudo está alinhado ao meio. Então, quando as coisas desaparecem, estas não começam a fazer coisas estranhas subir e descer. E assim e isso vai ser, como livre e o que podemos fazer. Está fazendo telhado onde grupo com todos esses itens. Então agora podemos fazer estes e estes juntos como um afastado. E então, quando pudermos fazer ele com o dedo do pé, vamos ver nossas camadas. Como você pode ver agora temos, sem dúvida, fora. Lembre-se dessas duas caixas aqui significa que está ligado. Eu vou tentar e o que podemos fazer Agora é colocar para fora mensagem escondida dentro da fora. Experimente como você pode ver, as cenas que colocamos. A mensagem escondida aqui vai estar lá, mas se a colocarmos lá em cima vai ser para baixo. Então lembre-se de que anos leigos neste tipo de programas, como patins ou figo MMA vai apenas do fundo para o topo. Então, e aqui é exatamente o oposto. Então é meio estranho, mas é assim. Então agora vamos criar nosso componente, e vamos nos comprometer a mudar esse coreano nosso componente porque isso me deixa um pouco louco. Então vamos este neutro 70 parece bom para mim. Eram 60 ou 70. Eu só esqueci. Este é o 17. - Sim. Talvez isto seja demasiado escuro. Então vamos com um 70 aqui. Está bem? Então agora temos quase todas as possibilidades incluídas aqui em nosso componente. Então, por que fazemos com esses componentes? Acho que nos adaptamos apenas removê-lo porque temos um componente melhor e mais completo aqui que vai fazer todas as possibilidades agora em si mesmo, enquanto isso é bem simples, então sim, aqui que vai fazer todas as possibilidades agora em si mesmo, enquanto isso é bem simples, então sim, podemos aprender com os meus erros. E agora nós temos, como, um componente sobre mestre que vai ser, como entrada de reunião Em andamento. Justo, chame de padrão de entrada principal porque isso vai servir para muitas coisas. Vamos ver. Então, agora só fazemos uma instância. Sim, eles tocam novamente e nós estamos indo para o pé. Começo a fazer essas mudanças. Podemos fazer isso ou não podemos. Então talvez não saibamos que precisa fazer isso. O que? Talvez precisemos fazer o seu em vez do Theis, o que pode ser um pouco estranho. Não é tão usado. Podemos colocar aqui como uma flecha. Então, como uma flecha para baixo de novo. Temos que mudar o curso aqui. Isso pode ser um pouco fora. Um pouco irritante, na verdade. - Sim. Então temos a nossa flecha aqui para o nosso menu suspenso e aqui para o nosso e-mail. Isso é bom, porque mais tarde, continuamos para onde quisermos em qualquer situação. Então, em vez de chamar a masterização de linda, nós vamos ligar para os últimos dias, uh, consertar a falha. Está bem. E agora vamos criar uma área de texto. Isto é muito parecido com isto. O que aconteceu? Ok, eu vou mudar por outro com a caixa. Seja qual for. Realmente não importa, mas algo mudou aqui. Está bem. De qualquer forma, nós destino que Michael aqui 12. Textarea: por isso, bem-vindos de volta a esta lição nesta lição. Vamos ver como criar estes textos. Ara, estes responsivos levam a área. Ok, então para isso o que você precisa fazer, nós vamos apenas viver isso assim. Então vamos começar com estes. Tivemos esses componentes que criamos primeiro, então vamos apenas criar uma instância. Desconecte-o e vamos para um grupo. Lembre-se, mentindo turno comum J ou apenas vá aqui no grupo e você continua agrupando. Ainda tudo precisa. Sim, tipo, quebrado. Então vamos remover. Isto são coisas que não precisamos para criar isto. Então, para estes, você vê isso peculiar? Consigo ouvir que podemos. Vamos criar com linhas. Mas, por enquanto, vamos voltar aqui e mover este suporte para 16 pixels aqui. Então nós estamos prontos para ir, e então nós vamos criar esses casais fora de leões aqui. Então eles muito este canto, que é o típico hum, eu vim para a frente arrastar e redimensionar Thes ária. Ok, então para isso, vamos aqui para este menu de opiáceos em formas e ir com linha ou você pode pressionar. Sim, l E então nós estamos indo para ir aqui e selecionar aqui com a tecla peneirar pressionada. Nós vamos fazer essa linha lá. Ok, agora nós estamos indo para o pé. Basta selecionar o nosso neutro 70 e podemos fazer duas coisas que é sim. Duplicando estes. E então, hum, torná-lo maior. Você ouve? Ou podemos desenhar, desenhar qualquer linha que depende de você. E como você pode ver com 100% de visão, isso é um pouco apertado demais. Então, precisamos apenas movê-lo um pouco aqui. Então vamos torná-lo maior. Não vamos pedir um pixel aqui em vez de dois. Vamos ver como se sente. Isso é muito melhor. Talvez seja um pouco para separá-lo, então eu vou apenas vestir a parte real. Ok, então eu só vou fazer isso sim. Uma grande venda. Sim, algo ao redor que talvez isso não esteja na posição correta. Acho que talvez seja por isso que não me sinto bem, pode ser bom. É bom. Então nós vamos aprender sobre restrições como sobre como ah toe para tornar essas coisas responsivas. E eles quando você redimensiona essa coisa? Eles não se quebram bem. Isso está quebrando um pouco aqui. Vamos ver como corrigir isso. Assim, para estes elementos em particular, há área. O que? Nós vamos fazer isso. Nós não vamos jogar com fora cedo aqui porque nós queremos algo responsivo que quando nós fazemos isso, é responsivo e você pode ver os comportamentos aqui. Isto é uma espécie de escala, mas não escalar um suspeito. Er o espaço reservado está se movendo também. Isso é um tipo de escala, sabe, nós estamos onde ele e mensagens dando muito fora de um espaço aqui. Então isso está meio desaparecido. Então, para que quando vendemos elementos em figo MMA, essas restrições painel aparecem. E como você pode ver, ele dizia “dedo do pé uma balança” e nós não queremos nosso rótulo uma escala. O que? Queremos que fique no mesmo lugar que está. Então, para isso, o que fazemos é colocado aqui. Sim, ou isso fica à esquerda e visita varas ao topo. Então, quando selecionarmos todas essas coisas e fizermos isso, ele vai ficar lá. A mensagem oculta. Queremos fazer exatamente o oposto. Quero dizer, estar no fundo, mas na esquerda e na parte inferior, fora da nossa seleção. Ok, então nós queremos na esquerda e na parte inferior são suporte lugar. O que queremos quando fizermos isso é ficar lá. Não queremos que seja aqui em cima ou algo assim. É só porque queremos começar a escrever aqui e os leões vão para lá. Ok, então o lugar chamado lá vai estar à esquerda no top dois. Não, esta coisa, uh, a entrada principal. Padrão. Instância. O que? Queremos fazer a escala daqui até onde quer que puxemos, puxando-a para baixo. Então o que precisamos fazer, é à esquerda, certo? Por isso, não faz estes. Acho que os dois paus à esquerda e não aumenta o seu tamanho. Então, o que? Nós queremos fazer isso. Ah, vamos selecionar isso. Ok, então é deixado ligado. Certo? Então, quando escalamos ou escala para a esquerda ou para a direita, desculpe. E para os dois de baixo. Então agora ele está fazendo isso corretamente, e nós queremos ser um furado no topo. Certo? E estes nós queríamos ser. Vamos formar um grupo com estas duas linhas, e vamos chamar-lhe droga e o que queremos. É estar no mesmo lugar como está agora baseado no fundo. Se fizermos isso, como você pode ver, ele permanece na mesma distância fora da mensagem familiar à mesma distância deste campo de entrada. Ok, então para isso, o que fazemos, é colocar à esquerda. Não, desculpe por colocar a direita, porque queremos que quando escalarmos para a direita, Peter fique aqui à direita, então, mas você quer estar, está lá. Certo? E, em seguida, o bora e o que queremos dedar. Vamos ver como isso está se saindo. Quando fazemos isso, estamos tendo alguns problemas aqui. Estudantes fazem isso, na verdade. Estudantes fazem isso, Vamos ver como está tudo bem. Vou fazer um componente destes para ver como o componente está funcionando. Como você pode ver, isso é uma bagunça porque sim, há algo. Estamos aqui, eu acho. Como ele vamos ver como é a correção no rótulo. Hum, o que está acontecendo aqui? Ok, como você pode ver, ele disse para escala, mas nós não queremos assustar. Queremos à direita na parte inferior. Agora estamos conversando. Isso deve estar à esquerda e no topo, isso seria à esquerda e no topo. Eu não sei por que quando você foi criado componente as restrições, como get gets override. Então, apenas um lembrete antes de fazer todas as restrições coisa, certifique-se de fazer o seu componente e, em seguida, você começa a fazer as restrições para ele. Ok? Então você pode fazer, tipo, substituições dentro. Porque se não, tudo vai tomar a mesma abordagem. Neste caso, é aplicado como uma escala. Portanto, não queremos que neste caso, queremos que isto seja para a esquerda e para a direita e para o topo no fundo. Então, se vemos agora, isso está funcionando muito bem. E isso está realizando são suspeitas. Qualquer coisa se move à esquerda. Qualquer um desses textos está se movendo, e nós queremos ser essa alma ele e ser 40 para o seu início. Então é o mesmo componente. Se o colocarmos, coloque-os lado a lado. O que está acontecendo? Há algum problema aqui. Ok? Isso não importa mais. Sim, Sim, esta é boa. Então isto é, tipo, 84. E isso deve ser 84 dedos perfeito. Agora temos o nosso Dix Aria, o forte. Criamos nossa área de texto em. O bom é que aprendemos sobre restrições sobre como controlá-los e como tornar nossa tese nossos componentes responsivos da maneira que queremos. Certo, então vamos para a próxima lição. 13. Caixas de controle e botões de rádio: Ei, bem-vindo de volta a isso. Mais um telefone desligado, criando um sistema decente. Desculpe se está ouvindo muito barulho na gravação, mas na verdade há um alerta de janela aqui na Espanha, na verdade em Madri, verdade em Madri, e minha casa está meio que desmoronando. Então, minhas desculpas pelos sons, rachaduras e ruídos em todas as gravações, mas é como é. Eu posso mudá-lo. Sinto muito por isso. De qualquer forma, vamos criar agora caixas de seleção, e como você pode ver, como caixas de seleção feitas caixas de seleção são eles têm, como 84 o estado. Eles têm, como um cheque do estado. E eles são todas suas propriedades, como no intermediário. Nós vamos criar em, então não se preocupe com isso. E nós vamos criar as propriedades com deficiência também. Alguns da substância do sinal lá fora Datum colocou. Mas é necessário. Sim, você pode ver que tudo está desmoronando, certo? Então, como você pode ver nesta ordem, o tempo das ciências, eles apenas fazem o seu antes do estado de detetive estadual e este tipo de estado deficiente, quase invisível. E se formos a brainstorming, vamos ver o que eles fazem. Onde estão os formers, certo? Onde estão os formers, Sim, vamos ver. Como você faz isso? Bem, você tem algo aqui, mas onde você está? Certo, então eles têm esse distrito padrão, outro detector pessoal, esse tipo de deficiência, mas desse tipo, não sei o que é. Meio que sim, é o estado deficiente, mas meio que foram. Então vamos criar nossas magníficas caixas de seleção. Então, para isso e indo para a beira novamente são layout magnífico. Eu vou criar estes um retângulo de 24 por 24 porque estamos neste grau de super pixel , e se eu não me lembro, mas foram quatro rádios fronteiriços, então vamos ser consistentes, e nós vamos para colocar novamente para importantes religiosos aqui. Nós poderíamos ir aqui para três ou dois, porque em um s'more, opiáceos furam, os rádios tendem a parecer maiores, mas para o bem, fora de consistência, ou para este vídeo em particular e o coisa de ciências, nós estamos realmente eu vou deixar isso assim. Então estamos indo para o neutro 70 porque, hum, eu acho que era o nosso neutro 70 certo? Então estamos indo para o neutro 70 porque, hum, hum, - Sim. Neutro 70. Podemos fazer alguma coisa aqui. Na verdade, vou deletar isso. E eu vou fazer um exemplo disso esta sensação que estes mestre sentem que temos aqui e eu vou fazer isso como 24 por 24. Então, a coisa legal, é se um dia estamos cansados dessa cor e mudamos para, digamos, uma leitura, tudo está indo para o pé. Esteja pronto, como pode ver. Então vamos manter isto para estas partículas o nosso Ah, acha que sim? Então já temos a tese dos nossos talões de cheques. Na verdade, o nosso padrão o estado, por isso bastante quantidade de que eu vou criar um componente em que eu vou chamá-lo caixa de seleção padrão. E então eu vou duplicar isso, e eu vou separar esses orientais e eu vou trazer nossa cor primária aqui, e eu vou apenas excluir essas bordas, ok? E agora precisamos de um pouco. Deixa-me só levar uma coisa. Não é assim tão mau. Então vamos para os nossos ícones. E eu estou vendo aqui que nós temos este cheque o que nós vamos precisar para criar nossos magníficos talões de cheques aqui. Bem, onde é isso? Por que está posicionando os homens deles? Tudo bem. Está fazendo coisas estranhas. Então eu tenho que trazer Montali para esta parte do fora da tela. Como você pode ver, nossos ícones, eles r 24 sobre 24 s. Então isso é muito legal. S Então nós vamos apenas deixar um situs. E por que isso é bom. Isto parece-me bom. Então nós estamos indo apenas para Sim, nós vamos criar. Isso é um componente aqui, e isso vai ser chamado. Ah, verificada. Está bem. Tudo bem. Este é o 30 Fault, e este é o carrapato, ok? E agora vamos criar como estes, como deficientes nossa propriedade para deficientes e para estes, o que vamos fazer sozinhos. Sinto que este pré parece muito perto do nosso neutro. Quem está se perguntando? Aqui, rapaz, isto. - Sim. Então, em vez disso, vamos ser algo como, não neutro. Vai ser algo assim. Sim, então você pode realmente sentir que é deficiente, não como em outros lugares. E diz que estamos nesta fronteira. Deu-nos a sensação de que é realmente incapacitado. Está bem? E o que vamos fazer, é uma pessoa deficiente fora disso, que vai ser como em vez deste azul Nós estamos indo muito grande este deficiente 12 era 60 e depois fora 18. Sim, e para ser o dedo do pé, torná-lo mais incapacitado. Nós estamos indo para o pé. Coloque isso em algo tipo fora. Sim, você tem a sensação certa. Você pode vê-lo, mas você pode realmente sentir que está desativado e eu vou criar um unece desliga estes? Uh, não, na verdade, a partir destes porque há momentos em que você tem, tipo, seletor selecionável imaginar que você tem um monte fora deles um monte fora de caixas de seleção, e então você de selecionar um deles. Estes se este é um ah selecionável, fundo ou caixa de seleção. Isso vai se transformar em algo que o que ele tem sua linha pressione l Vamos fazer uma linha aqui. E então aprendemos as ferramentas sobre a linha. Então podemos colocar este copo redondo aqui. Aumentamos isso para e levamos a corte branca. Então nós temos este tipo fora intermediário o estado que os cientistas para o meio, se pudermos. Como é que isto é feito. Esta é uma forma estranha. Eu não quero mais isso. O que está acontecendo? Bem, eu tenho que comer isso. Lembre-se de ir embora. Isso são coisas. Porque se não for isso em Naimur Um, sim. Então agora nós temos que ser tocado e indo para Sim, Remover esta forma este pensar Aqui o que é eu não quero este ícone de pena mais. Tudo bem, agora. Então agora temos aqui a nossa linha. Vou tentar me posicionar aqui no meio. Sim, mas se virmos é meio estranho, não no centro. Então temos um centro mentalmente dois. E sim, esta é a nossa propriedade intermediária deles. Para mim, é muito grande. Então eu vou quebrar isso como duas pílulas. Dois pixels? Sim, assim é melhor. Sim, isso é muito melhor. Então esta vai ser a nossa propriedade intermediária. Eu vou criar este tem componente, e este vai ser o nosso talão de cheques Inter, mediar ou indeterminado, na verdade. E vamos criar estes, mas incapacitados, acho que não dei o nome a isto. Eu estou indo para o toque e para criar um componente novamente. E isso vai ser padrão, hum, hum, desativado. E este vai ser o nosso “eu vou” Bem, na verdade não é assim. Comprá-lo Então eu vou criar um componente e chamá-lo verificado, Desativado alguns. Algumas pessoas, como dedo do pé colocar como definir livros ativados padrão em então ou tomar livros, desativou barra padrão. Mas o que aconteceu desde então é que se você fizer isso é quando você eu quero mudar esses quatro dias para isso e você vai aqui se você tem, tipo , cheio, então você não tem todos os elementos aqui. Mas agora nós o temos. Você sabe, nós temos Nós podemos ver a desativação padrão que podemos tomar, mas nós podemos mudá-lo por ah, verificado. Então eu prefiro manter todos os meus ícones no mesmo nível. Ok, então nestes indeterminados aqui, nós vamos fazer isso para sempre. E estes estavam indo para ir em vez de neutro largo. Nós vamos com isso. Então nós temos isso aqui, e nós vamos com escolheram livros, deficientes indeterminados, e esses livros diabos vai ser um chefe de tecnologia agora. Então agora temos todas as nossas batalhas. Vamos organizar. Emery será melhor, como na bolsa. E na verdade, eu vou fazer algo porque sim, eu acho que é melhor Sim, você vai ver como então, Sim, eu vou primeiro criar isso no indeterminado e vamos ver a escola novamente que eu realmente amo. Que está deixando tudo ir aqui, arrumando, alinhando isso à esquerda, e então você pode adivinhar. Mude estes. Vamos colocar no 16. Então, continuamos no grande e no que vamos fazer. É selecionar este lugar. Titular. Traga-o aqui e mude a cor também. Digamos que este desde a pré-escola. Neutro 10. Vamos ver Utah 20 menos um pouco mais suave, tênis neutro ir para ir e então nós vamos viver como, hey, grande tão CIA. Está muito apertado. Vamos com 16 Você quer dizer um pouco para que você não se machuque em seus olhos e o que podemos fazer aqui, é que já temos esses componentes. Então o que podemos fazer esta hora componentes mostarda. Podemos fazer uma cópia deles, como Eastern diz, e o que podemos fazer aqui, é Ah, ir 2 16 e depois duplicar 16. Podemos apenas alinhar isto ao meio aqui. Acho que está mentindo para eles, sabe, para que eu possa duplicar isso. E como você pode ver, qualquer coisa acontece. Vamos ver se isso mentir para o meio é bom para ir. Isto está a deslizar para o meio para os meus chefes. Aqui vamos nós. O que? E vamos ver, tudo está alinhado ao meio porque o que vamos fazer Oh, desculpe. O que vamos fazer aqui, é, ah, é ah, criar novos símbolos com o seu ah,texto de livros de carrapatos e, em seguida, padrão. E isso vai ser eu vou copiar as coisas de texto dos talões de cheques para que eu não tenha que repetir. Ok, então isso vai ser e você componente. E vai haver aqueles livros e isto está verificado. Eu vou competir. Isto assinalado porque este será o verificado e desactivado. Este é o Intermediate. Indeterminado. Desculpe, continuo a soletrar indeterminado. Então este vai ser o nosso talão de cheques. Check-in, indeterminado desativado. BC é o Ártico incapacitado perfeito. E este será o nosso padrão. É um texto padrão de livro. Bem, podemos chamá-lo de “Deficiente”. Nenhuma tese desativada padrão é indeterminada, e isso é e nós temos todos eles já. Então isso é ótimo porque mais tarde, quando você vem aqui para os ativos e nós vamos para nossas mesas mais teste, nós temos todos aqui perfeitamente ordem e nós podemos apenas arrastá-lo. E nós temos isso e nós não temos que estar pensando sobre como posicionar nossos são, você sabe, nossos técnicos e sagacidade. Estudioso fora cheques e tudo está em um lugar agradável. Ok, então vamos com o quadro lá agora. Então vamos sem fundos de rádio. Botões de rádio são praticamente iguais nisso. Só que com nós vamos fazer a mesma coisa agora eu não vou para a mesma coisa que fizemos antes. Nós poderíamos realmente fazer um truque aqui, que é derrubar no escritório de postura. Vamos voltar a colocar estes 24 por 24 como fizemos aqui. Então isso vai ser 24. Podemos fazer aqui é levantar isso. Eu costumo ir com 100, então é bom ir. É um círculo perfeito. Nós poderíamos fazer isso apenas com um doente normal ou círculo e poderia estar bem, mas sim, para o bem, fora de consistência e por isso é como dependente do mestre. Acho que é bom o suficiente. Então vamos ver como os outros fazem o seu equilíbrio de rádio. Eles têm esses padrões. E então este tipo de verificado dentro de outro círculo, vamos ver, explorar o mesmo tipo de coisa. Mas eles colocam assim o círculo, como com essa cor com seu tipo fora Ah, Cole primário. Ou vamos ver como brainstorming isso os botões da Arábia. Então, sim, eles fazem assim. Ok, hum, eu não tenho certeza sobre colocar Colores para a taxa de átomos. Eu acho que esta é a melhor escolha, na verdade, para colocar essas cores para ser consistente com o seu com todos os elementos. Então, para mim, este é o caminho a seguir. Este será o nosso padrão. Vamos voltar a um ano para vermos o que estamos fazendo. E este vai ser o nosso botão de rádio, e isso vai ser chamado de padrão. Tudo bem, agora vamos criar como este. Vamos mudá-lo assim, e esta é uma nova queda 80. Então vamos colocar aqui como neutro 80. Onde você está aqui? Então este vai ser o nosso Deixe-me sim cópias, e este vai ser o nosso padrão desativado. E agora vamos começar a criar o nosso cheque. Então vamos fazer uma instância disso, e isso vai ser como se estivéssemos indo ao toque. Então, não estamos criando muita coisa no meio. Eu estou indo para um grupo isso, e nós vamos apenas para colocar outro círculo dentro. Neste caso, nós peito todos ou ir aqui e enviar um lábios ou sobre ou círculo, estamos baseando tudo em um luto pixel para que nós seríamos como super turistas aqui. Pode ser algo em torno disso. Mas o que acontece com isso é que é muito pequeno para mim. Então eu estou indo para ir com as quatro escolhas, concordou, e isso vai ser como 12. OK, 12 é bom. Eu gosto de como ele parece, etc De que 100? Sim, é bom. Poderíamos responder isso mesmo a isso. Não é isso, mas vamos desfazer mantê-lo na frente, fora. Isso é bom. Então este pode ser o nosso componente, como o nosso botão de rádio marcado e vamos fazer uma cópia disto e como, vamos fazê-lo como, sim, assim. Então este é um exemplo em curso apenas para Oh, yeah. Eu vou apenas para separar o toque dele e ir com esta cor. Vamos fazer desta pequena trindade algo em torno de que isso não vai ser em trote. 60. Nós estávamos escolhendo aqui 18. Eu não me lembro. Vamos ver que cor natural 80. Algo como isto. - Sim. Talvez isso seja demais. Precisamos que isto esbarre. - Sim. Sim, acho que é bom. Não é tão comum ver isso, mas sim, você entendeu a idéia, certo? Então, sim, vamos criar isso. Nosso botão de rádio verificado, desativado, e sim, está tudo bem. Este é 34 desativado necessário para todos. Certo? Então, novamente, nós vamos arrumar isso, e nós vamos colocar aqui como existência. Então nós mantemos isso em linha fora do nosso grande e tudo está alinhando muito bem. Então vamos criar instâncias disso. E já que estamos sim, colocando tudo no layout na ganância, isso é muito melhor. Então, agora vamos apenas completar este texto aqui. Bom para ir. Bom, bom, bom. Podemos pressionar, Andy, Andy, para fazer duplicatas disso, e depois vemos se tudo está certo, só nos alinhamos. Parece muito bom para mim. Então, vamos criar um novo componente com isso neste caso vai ser botão de rádio inferior mais texto. Então este é o padrão. Sim, parece bom. Então eu vou copiar ontem, então eu tenho que estar, tipo, indo e voltando. Então vamos criar este estado desativado. Então nós estamos indo para isso, uh, verificado. E esta é a SEC. Desativar. Ok, então nós temos nossas caixas de seleção, e nós temos nossos botões de rádio em baixo de rádio. Não existe tal coisa, como no Exterminador ou o que quer que seja. Hum, então eu acho que é bom o suficiente por enquanto. Vejo-te na próxima lição. Continuando fazendo mais componentes. 14. Switchs e tags: Bem-vindos de volta a esta lição. A casa. Caso esteja se perguntando, ele está aguentando para que possamos continuar com a lição. Então agora vamos ... sacar nosso imposto na garrafa das suítes. Está bem. Como você pode ver, isso é meio fora da morfologia desses itens, como fora e depois o imposto. Nós os temos aqui e vamos ver como os outros fazem isso. É bom ver como as pessoas se comportam nessas coisas. Hum, eu não vejo nada aqui, na verdade, sobre que eles não têm, tipo, doces está aqui. Parecia um brainstorming. Sim, temos o mesmo que costumam usar. E então o fato é bem seguro. A esquadra é semelhante a esta de qualquer maneira, então temos a morfologia. O ataque foi ontem. Emaranhado com texto em oito e algo dedo do pé. Remova isso. Não vamos fazer o seletor. Nunca os usei para isso. Eu costumo fazer. Eu uso as armas de rádio deles. Neste caso, eu usei apenas eu concebo. Preciso de algo como algo bem sucedido. Então eu só puxei por uma Nikon para eu não fazer um componente dela. Então fora vamos criar o nosso componente de doces. Então, por isso. Vou apenas criar uma instância disso. E eu vou apenas para desconectar os sistemas em ir para o grupo. Veja, está dentro da moldura. Eu não preciso dele. E se fizermos isto é, lembras-te que isto vem da Importação Mestre, se tudo o que apanharmos a estes velhotes daqui. Então vamos colocá-lo lá. Mas como você pode ver, isso é um pouco pequeno, certo? Eu acho, sim, é como, este é 28. Este é o 24. Vamos ver como os outros fazem isso. Esta é a 28ª, esta é a 24. Isto parece-me uma coisa comum. Vejamos, eles têm, tipo, um interruptor aqui. Um, talvez total Não, sem alternância, sem interruptor. Então aqui eles não têm de qualquer maneira. Ah, podemos tentar fazer isso. Isso é thes. Talvez seja um pouco pequeno, mas vamos ver como vai ser tão doce. Na verdade, está indo para fora destes em um oval no Sobel. É como se houvesse esses que podemos fazer como, múltiplo fora oito. Então o com poderia ser, não sei, 30 a 40. Este é 44 não é assim, mas este pode ser 48 48 48. Vê como é? Não tão ruim. Podemos fazer algo que isso pode ser em vez de um pixel, dois pixels. Então não é mais o civil que é porque ele vai deixar apenas um pixel entre isso e aquilo, vai ser muito, muito pequeno. Então vamos ver como os outros posicionam o off é à esquerda, o escritório à esquerda, à direita, é azul. Então vamos voltar para o sistema de design e sim, fazer um componente fora disso e isso vai ser chamado Onde você está? Isso você vai ser, uh, não vá. Quero chamá-lo de Tokyo ou Sweet. Vamos atacar E isso vai ser, ah, padrão. E nós vamos fazer uma cópia dessa raiva e vamos tocá-la. Vamos trazer isso aqui, colocar no azul. Há muitas maneiras de fazer isso. Alguns outros o que costumam fazer, é sim, dor tipo fora isso no azul. Veja isso e isso é como branco. Por que é isso? Porque você realmente vê mais. Eles são o elemento, certo? Você vê mais a diferença entre os dois. Se eu só mudar a cor. Talvez pessoas com algumas deficiências e alguns problemas mais legais possam. Pode um estreito saber a diferença entre isso e aquilo? Quero dizer, baseado na chamada ou escrita. É por isso que algumas pessoas em sistemas de ciência arenosa você verá que em alguns deles eles puxaram algo assim. Eles só fazem esse tipo de cheque. Então você está vendo que a caixa de dicas é, bem que este total, mas sobre os doces é ativado. Mas isso depende. Isto é super acessível. Mas sim, por causa do nosso design, nosso sistema de design minimalista, vamos viver para deixá-lo assim. E vamos criar isso e isso vai ser total. Ah, ativo ou tudo bem, então isso vai ser assim e o que nós queremos fazer, é ah, exatamente a mesma coisa com ele antes que nós vamos criar Eastern detonar isso e nós vamos Coloque um texto. Sim, isso é complicado porque, às vezes, ah , você sabe, você coloca esse schwitz à direita e o texto aqui. Então não é isso. Você usa assim? Mas já que criamos todos esses elementos com isso, vamos fazer isso assim e está tudo bem por enquanto. Ok, então isso vai ser 16 grandes vendedores. Isto é bom para ir. Vamos verificar isso no meio. - É. Então, vamos criar um componente neste caso vai ser chamado total mais texto padrão. Está bem. E isso vai ser eu vou apenas dirigir este texto novamente e grande componente, e isso vai ser ativo. Tudo bem, então estamos bem e agora vamos criar o nosso imposto. Muito bem, então vamos criar o nosso imposto. Vemos como a morfologia ou Fotakis. Vamos ver se essas pessoas têm imposto, nenhum imposto, nem uso fez 1/2 qualquer coisa. Bem, nós vimos que os impostos basicamente, como dissemos antes, cada emaranhado, um texto sobre algo para removê-lo. Mas há algo interessante aqui. Como podem ver, eles não fazem pessoas atacarem este ataque, e é bom que Ray Storming faça a mesma coisa, então vamos fazer as coisas do dono. É útil. Então vamos pintar o retângulo Astor aqui. Nós trazemos Lay lay para fora novamente. Então nós apenas pressionamos o controle de controle G em Mark ou você apenas vai aqui para ver e você vai para Então layout cria para que você possa apenas assim. E nós vamos pintar. Hum, sim, algo assim. É importante saber que os impostos às vezes estão dentro dos insumos. Há imposto de importação tipo fora. Talvez façamos os componentes mais tarde. É uma espécie de componente complicado, mas talvez façamos mais tarde. E por isso tem que caber. impostos tinham que caber aqui. Tudo bem, então nós vamos fazer isso. Faça a partir de 24. Vamos colocar aqui para nós. Você pode ver quando você estava trabalhando com as formas menores. Como dissemos antes, você pode ver que isso parece ser mais arredondado do que estes. Você pode vê-lo? Então é por isso que às vezes precisamos sim para colocá-lo assim, e isso parece promover muito mais natural. Sabe, você pode sentir que é mais. É mais não rolar lá. Vamos nadar. Sim, vamos lá. Talvez três possam ser bons, mas se colocarmos quatro, se você ver é demais. Então vamos com três. Porque três é o número mágico neste caso . Bem, eu gosto dessa música, Mort. Sim, nós vamos. Então, William, fora disso e nós temos que remover o layout. É meio irritante. Então nós vamos colocar aqui como nossas cores neutras ou talvez nosso começo neutro para mútuo. Talvez precisemos de algo como esta bomba de dedo um pouco. Então eu vou copiar este espaço reservado vai ser enorme comparado ao nosso ataque, e é que precisamos de algo menor. 13. Está chegando para nos salvar e o que podemos fazer aqui. É derramado principal médico ou com legal díspares são cor super bonita. E quero vender algo que não fizemos antes. Hum, se nós criarmos aqui em um brinquedo fora, bem, ele fica bem. Imagine que temos, tipo, outro elemento. Eu vou fazer isso agora. Você pode pensar que nós podemos neste círculo aqui, vamos torná-lo um pouco menor e isso vai ser mais tarde em nosso símbolo para fechar. Removendo isso, Eu acho Imagine que queremos fazer isso como fizemos com nossas garrafas em fora e nós selecionamos seus todos os elementos e rapidamente aqui para fora, cedo para fora. Vamos ver o que aconteceu. Jesus Cristo está fazendo bem. Mas antes do que costumava massa. Estou espantado com este programa. Está melhorando muito antes. O que ele faz é que o fundo desta coisa estava à esquerda o texto do espaço reservado waas fora da caixa aqui e este thes bottom não era o direito ou o texto estava fazendo eram coisas Mas agora ele está melhorando muito. Estou espantado. Então vemos que ainda estamos do lado 14 do nosso elemento. E aqui o que nós vamos fazer, É vir aqui e procurar um corvo através da cruz Gross. Onde você está perto nojento ou algo assim? Não consigo vê-lo. Talvez o recente algo assim que existe essa coisa, mas eu quero, tipo, apenas nós temos que fazer isso. Bem, eu posso copiar estes. Sim, acho que posso. Então eu só vou pegar um pedis e trazê-lo aqui. - Jesus. Então eu vou trazer isso para baixo do pé 12. E estes EUA eu vou apenas quebrar isso ao toque essas coisas porque eu não estou interessado em sair deste círculo em tudo. Só quero que esta placa seja uma grande venda. E esta grande coisa aqui para ser não vai pensar assim, também. E eu quero selecionar o barco deles e torná-los maiores. Sim, algo assim. Isso é bom. Ok, então algo que isso é melhor para mim. Acho que nos vamos candidatar lá. Não conheço um pouco deste neutro. Isto é muito longe. Está muito ligado. Isto vai durar oito semanas. Olson parece uma baleia ou algo assim. É muito fraco para mim. Então eu vou apenas bombear isso para baixo. Projetado para o meio. É bom. Algo como isto. E eu vou ver como isso Sim, eles são 27 vai aumentar para oito. Então este imposto parece bom para mim em 100%. E se nós temos, como, mineração, nós temos isso e nós estamos colocando nossa entrada nosso imposto aqui desde que muito bom para mim. Estamos convidando. Temos alguns dos oito. Sim, é muito bom. Então temos um ataque distante e o que vamos fazer. É, um, grupo. O que? Eu só removi, removi. Então eu vou criar isso, e este vai ser o ataque. Ah, padrão. Eu não fiz nada, e é como este mais baixo para fazê-lo. Hum, sim. Mais tarde, se criarmos uma cópia disso, podemos apenas deliberar. Então, estamos prontas para ir. Hum, sim, isso é bom. Bem, não me sinto bem, porque isso vem meio ativo. E talvez eu só queira, como algo assim. Eu acho que isso é melhor. Então, vou deixar assim. E sobre algo mais escuro? - Sim. Esta escola. Eu gosto disso. Sim, acho que vamos deixar assim, então sim, então sim, temos nossa conversa padrão, e sim, eu não acho que podemos fazer três minutos sobre isso. Você se lembra? Se você não quer que isso simplesmente exclua e você tem, então nós não precisamos criar outro Ah, tack diferente para isso. Podemos ir com a morte. Então, vejo vocês Minutos. Lição 15. Dropdowns: Bem-vindos de volta a este novo episódio. Neste caso, vamos fazer a entrega para estes. Selecione. Lembre-se que fizemos isso. Deixa-me só remover isto. Lembre-se que é este componente completo . Então, no caso de não precisarmos de peças em algumas partes, podemos removê-las. Hum, então eu quero... Eu quero replicar esses descidas aqui. Bem, tipo fora, porque isso está meio ligado ao reboque neste campo, mas nós vamos fazer isso, tipo , separado que conheça C. , Ok, então nós estamos indo para replicar em algum fora de algum tipo off, pop over ou drop down down como este. Ok. Em vez disso, fora disso. Então vamos para o nosso tronco de decência novamente, e vamos copiar isso com, você sabe, lembre-se, lembre-se, com a chave toda, ou você pode adivinhar copiar e colar, e você está pronto para ir. E nós vamos apenas torná-lo maior. Sim, por enquanto. , Na verdade, não quero o padrão. Não vou gostar do foco agora. O padrão é bom. Então vamos imaginar que temos algumas opções aqui eu vou copiar este texto fora de sua cópia de espaço reservado e colá-lo. E, em seguida, apenas arrastá-lo para cá. Ok, imagine que queremos, tipo, um monte fora. Ah, fora dos elementos do menu. Nós vamos posicionar estes à esquerda no topo, e então nós vamos usar para fora. Experimente aqui e vamos nos separar por 16 ou 24. Talvez seja melhor. Eu vou apenas fazer isso com a minha mão para que procurem como vai ser. Isso seria como 16. Holder está meio para baixo. Então, para este caso em particular, podemos fazer algo que você fez efeito de sentar-se. Se é ah, há a parte onde você pode entrar eu tenho que comer. Isso é isto. Não, Se é a parte onde você pode inserir como Sadow interior, Então cair sombras ou inserir Sembler horrível e Borrão Bagram para o casamento. Estas cordas importam. O que você faz é clicar no sol. Eu não posso e então você aplica apenas o azul que você quer ou precisa, ou nesses casos, como 25 o que eu costumo fazer. É para ir com os meus Klores locais, o lado da cor. Escolha antes de falar. Sam Blue. Bem, isso é muito difícil, obviamente. Mas o que podemos fazer. Diminuir a opacidade às vezes é bom também escolher como, hum, como não tão duro preto aparecer preto. Sim, você pode apenas para colorir seus neutros. E você derruba esses 10 ou 20 algo assim neste caso e vai apenas remover esses neutros. Não quero mais bordo lá. O que? Eu quero isso, uh deixe-me agrupar isso. O que? Eu quero isso quando eu pressionar, eles deixaram cair o botão deste tipo fora? Hum, sim, eles estão lá em cima para baixo anos acima, certo? Mas eu não quero isso. Temos fronteira ou algo assim. Quero que nos destacemos. Então é assim que vamos conseguir? Eu sou. Há alguns truques para isso. Eu fiz isso para o teste, e isso é legal, mas, hum, porque você pode ter mais elementos. Mas como você pode ver, estes não são redimensionados. Ok, então para este trabalho, o que vamos fazer, um sim, e a coisa razoável. Às vezes, quando você é um indiano trabalhando com este elemento, o que acontece é imaginar que você está abrigando alguns dos elementos. Tem este tipo desligado. Digamos que algo assim, você está te abrigando. Digamos que algo assim, você está te abrigando. Digamos que algo assim, assim, Sabe o que quero dizer? Então, quando você Khobar fez esses antecedentes seria sobre o elemento que eu estou pairando. Então, em vez de fazer isso e nos trabalhar como esperamos e ser como, mais reutilizável ou responsivo sem ter que deixar isso o que eu disse, sim. Isso você cria um componente fora disso. Então nós vamos criar aqui, como, neste caso, eu vou nomeá-lo. Provavelmente mais tarde, vou renomeá-lo novamente. Mas agora eu vou apenas fazer, tipo, soltar texto e sim, soltar texto. Ah, e eu vou colocar como, uh, como está indo como eu vou chamar isso. Como Khobar? Sim. E eu vou duplicar isso e em vez disso, fora disso e vou colocar como branco. Sim. E o que é isso? Eu gosto de fazer isso porque assim eu posso trocá-los, então eu vou ah, dizeres fazer outro componente. Isso a partir disso, e eu vou chamá-lo como padrão. Talvez não faça nenhum sentido. Mas agora temos esses dois componentes e vamos para Sim, remover esses. Você vai ver por que estamos fazendo isso. Então vamos colocar isso aqui. Ok, então eles vão ser separados por esta parte. Então eles vão estar se tocando, e o que eu quero é que esse rapper seja, tipo, aumentando se eu duplicar esse elemento reservado provavelmente. Bem, este padrão se eu duplicar eu quero que isso faça com que ele seja o seu Ok, então? Então, por isso, eu vou fazer um afastamento disso. Ok? Eu sei o que está acontecendo. Estes são os meus mestres. E você não pode fazer isso com mostarda. Você tem que fazer isso com instâncias fora da lista. Então agora eu posso fazer isso. E assim eu disse. Aqui. Fora. Experimente. E isso vai ser, tipo, totalmente responsivo. Então nós estamos indo para o pé. Dê oito pixels aqui, para cima para baixo. Vou só tirar isto daqui. E o que acontece agora se eu duplicar este elemento como este e colocá-lo aqui como você pode vê-lo , isso é ah, responsivo. Veja, bem, bem, eu selecionei o que não era. Imagine que não quero esse “Has Khobar”. Eu só continuo. Ou se eu não gostar de acabar, eu faço. Então nós temos. Agora temos nossos grupos aqui componentes para o texto de espaço reservado. E agora temos isto. Às vezes são que talvez você tenha outro tipo de elementos aqui. Vamos imaginar que você tem estes, hum, você vai ter estes com ícones para Às vezes você precisa Tom Michaels para pesado ou porque você pode reutilizar este componente para uma lista suspensa. Neste caso, eu quero trazer o hum sim, isso para baixo que eu quero que nós façamos. Sim, então você entende o ponto, certo que você pode você pode trocar elementos. Então esta prequela imagine que não vamos gostar de colocar inserção como, hum, alguns elementos aqui, como alguns ícones. Então o que eu faço, é só trazer, tipo, um lixo ou algo assim. Aqui. Onde está um vestido? Aqui está um fresco. Então, eu vou dar o pé. Faça uma instância fora disso. Traga-o aqui. Eu vou mudar o carvão ou e eu vou dizer, sem vermelho sem riff primário. Bem, na verdade, indo apenas para sim, como uma seleção de sexo aqui e vamos ver onde estamos e como isso é. Eu vou ao toque nisso. Vou inserir o dedo do pé aqui, meu ícone. Vamos ver como ele é foi construído. Então eu estou indo apenas para a tese de grupo novamente, como um exemplo. Quero que me toquem na assistência. E então eu quero inserir estes aqui novamente. Poderíamos fazer o como um símbolo com um ícone e, em seguida, apagado aqui. No pote de instâncias vamos fazer, como, alguns elementos fora, então é mais fácil depois mudá-lo. Então, neste caso, e indo para mudar a cor é apenas como para uma opção de exclusão e o que eu vou fazer, é ah para esses dois elementos. Eu tenho um convidado no grupo estes novamente com estes e estes e vai criar um fora troy fora coisa e e com estes eu vou criar outro layout fora. Ok, então e agora estes. Nós vamos fazer isso como um componente, e isso vai ser chamado de testes suspensos. Hobart vai ser, mas não é crítico. Então agora, se você está aqui lembrando que você tem como um último. Você pode simplesmente se transformar em crítico. Ou podemos apenas duplicar isso e, tipo, separaras tipo, separar cisternas e depois tirar essas cores da minha equipe mais tarde. Você quer, eu não sei, como um cinza ou algo assim. E, em seguida, um texto como este para suas ações. Meu nome é Thesis. Não, isso não é um alívio que eu, tipo, tente em outra coisa. Digamos, não sei, como um ebit fervendo mais. Vamos para a rede. Sim, este aqui. E depois mudamos o minério de carvão. Nós cuidamos deste algo assim que você pode entrar. Você tem, tipo, uma cada garrafa aqui, certo? Então podemos criar outro, hum, em que podemos chamá-lo de ícone. Então agora o que podemos fazer é vir aqui e vir aqui. Bem, eu prefiro fazê-lo apenas lá parece que nossos itens. Então nós viemos aqui e temos aquele ícone e então chegamos aqui e temos uma e outra coisa legal . É se quisermos mudar como a cor de fundo. O que podemos fazer é vir aqui e fazer esses como Khobar para que você realmente não precisa criar outro às vezes é mais fácil, mas você pode simplesmente substituí-lo aqui no item. Ok, então isso nos faria como outro tipo de componente. Eso Temos a nossa entrega feita semana convidativa. Queremos voltar para o lugar que viemos com isso com os resultados padrão apenas. Temos aqui, então acho que é muito fácil de fazer em pré legal. Então é assim que caiu para baixo e vê-lo em que é menos sobre. 16. Renomeação e plugins: Bem-vindos de volta a esta nova sessão. E agora o quê? Eu queria te mostrar algumas coisas interessantes sobre Ah, fichas de marca falsa. Você sabe, você pode ampliar as possibilidades de Sigma com jeans pretos se você está aqui e você vai ligar. Então você vai a esses cardápios e então vai aqui para conectar e ir toe man, é plugins. Você pode ver alguns pés. Er, tagarelando um pouco aqui. Os plugins mais populares aqui. Os que eu tenho já foram contados. E eu queria falar sobre um plugging em particular, que é chamado Renomear It. Ah, olha, sim, estes, uh por quê? Queria mostrar-te estes. Porque se viermos aqui, se estivermos em camadas, não podemos ouvir os ativos e vemos nossos componentes locais. Você pode ver aqui que temos, como, botões, botões, botões, então ícones, ícone de pena, que isso não é ruim. Mas talvez não precisemos disso apenas botões e ícones. E então nós queremos, tipo, tipo, estes não têm, tipo, tipo, botões batalhando. Sabe, queremos nos livrar dessas primeiras partes aqui para não precisarmos mais disso. Então, o que? Nós vamos fazer isso. Selecione todos os nossos fundos. Vejamos, aqui em nossas camadas Você pode ver aqui que eles têm como essas coisas de fundo aqui Nome que nós colocamos antes. Mas desde ah, temos esses componentes dentro de um quadro que tem esse nome. O que importa falso Como falamos o nome do mandril como a pasta principal como o primeiro 1 E então se colocarmos o botão novamente no nome do nosso eu disse, vai ser, como um tipo de redundante. Então você poderia Montali estar se trocando aqui como o final desta garrafa? Ah, aqui. Mas não continuamos com isso porque é muito tedioso e consome tempo. Então, há plugins para isso, e este é chamado Renomeá-lo. Então nós vamos para aqui e vamos para Ah, tudo bem. Substituir os anos leigos selecionados, certo? E quando queremos encontrar é o botão de texto e substituí-lo por nada O que queremos que ele encontre a mudança fora do texto e substitua-o por apenas, ah, uma propriedade vazia. Então agora você vai ver todas essas batalhas e outras coisas. texto aqui vai desaparecer e agora nós o temos. Então, se voltarmos aqui para os ativos e vamos para os botões, você pode ver agora que só fica botões. Mas não diz que Buttons é o último. Bottoms novamente com este tipo fora rebote, e nós vamos fazer o mesmo com os ícones. Como você pode ver, eu consciente durar para seus ícones. Eu não quero isso. Eu só quero que meu olho venha a ser apenas ícones. Então voltamos aqui novamente ícones do dedo do pé. E como podem ver, temos que ler o dedo do pé. Queremos nos livrar desses mais, um, ícone. Então voltamos novamente para os plugins, renomeá-lo fundo, substituímos camadas selecionadas e então vamos colocar Feather Icahn. Eu acho que o recente no espaço e entre a barra Sim, e você pode visualizar aqui como esses ícones vão ser nomeados para que possamos renomeá-lo se algum se, ah, talvez imagine que você queira nomear esses ícones como ícones. Você pode, como você sabe, colocar algumas coisas aqui para substituir isso por isso e você está pronto para ir. Você pode ver uma prévia com como bom acabar, mas neste caso, Eu só quero se livrar deste ícone adicional, coisa esquerda espaçosa. Então apenas Nome perfeito leva um pouco, mas agora temos nossos ícones, como, na primeira parte. Então agora temos isso é melhor. Muito melhor, como pode ver. Ok. E os criamos a entrada. Tudo bem. Então não precisamos fazer isso, porque nos nomes que colocamos aqui, podemos ver aqui em camadas. Não há entrada antes, então são apenas talões de cheques. Ok, então isso é, uh, algo interessante. Vou mostrar-vos outras coisas pretas úteis aqui, por exemplo. Imagine que desenhamos umretângulo um e queremos inserir a foto. Você não precisa, não carregue. E, você sabe, é meio entediante. Então você pode procurar aqui por quatro horas, ele enlameando, nós queremos um cavalo, e então você Sim, pressione o cavalo que você quer, e ele está inserido aqui. Então este Blufgan honesto mais playinus muito bem é muito legal. E outro preto por dentro usa muito. Você quantifica? Ele quantifica o que faz. É que pode induzir às vezes precisa dedo do pé colocar o seu eu não sei, ícones de mídia social ou algo assim. Sim, vá aqui pelo Facebook. E então você tem o sangrento e este ícone na tomada. E então você apenas pessoa ícone porta ou sim, clique duas vezes nele. E bem, às vezes eu vou clicar. Não funciona para ele. Bem, eu acho que ele fez isso. O que deveria ter feito? Sim. E agora você tem aqui seu ícone e você pode convidá-lo, uh, fazendo maior ou o que você precisa. Então eu 25 me lembro desta escuridão muito legal. E custa. Deixa-me só remover isto. E ele tem um monte off off ícones off. Imagine que você quer ícones de design de material. Você pode pressionar aqui e você está indo para o pé. Não quero me livrar disso de novo. E você tem todos os ícones aqui. Então é muito legal quando você está descendo uma interface de algo. E você só precisa de um ícone em particular ou um estreito ou algo assim? Mas você não precisa de todos os ícones. Você pode ser importante aqui, como eu escrevi. E então você pode procurar o ícone exclusivo. É muito legal metade como Modi também, então se você não quiser Ah, coloque assim. Como em certo aqui. E você quer fazer como um vetor. Então depois você pode querer o dedo do pé Ah, exportado como spg Você pode adivinhar Goto ahmadi um aqui e vamos nos livrar da flecha. E então você tem o, uh E o quê? As armas aqui. Certo. Então achei este preto muito útil. Vamos ver o que mais temos aqui. Hum, se você está realmente no reboque no reboque, problemas de acessibilidade de acesso de contraste. E você quer saber se o texto é educado e, hum, pessoas com algumas deficiências de visão podem fazê-lo. Você pode adivinhar. Execute este plug in. Ok, então estes piores com isso, eu uso alguns deles para que você possa ver aqui alguma deficiência. A Páscoa está nas batalhas. Sim, é ah. Como você pode ver é principalmente no nos botões desativados. OK, mas botões desativados eles não precisam ser. Então você sabe ASUS mal por causa do muito qualquer um de vocês colocar muito contraste sobre eles. Não parece deficiente. Parece ativo ou algo assim. Certo, mas o resto das batalhas são. Ok, então eu só queria que então eu só queria quevocê soubesse que blacking é que você pode investigar. Há muitos deles para colocar conteúdo real em seus projetos. Um, muito fora. Um monte de coisas que você pode fazer com os plugins, até mesmo gráficos e colocar avatares fora das pessoas. Então, sim, dê uma olhada aqui e no reboque para gerenciar. Blogging é parte, e você pode ver que há muitos deles. E, sim, plugins super interessantes sobre a coisa boa fora. A maioria dos Blufgan diz que você pode tê-lo, ou você não pode tê-lo. Mas a ferramenta funciona é exatamente a mesma. Então, sim, dê uma olhada aqui. Olhe para este tipo off instala coisa, para que você possa ver Ah, eles os mais instalar plugins, que é útil eles os mais úteis. Então dê uma olhada neles. E eu tenho você. Você gosta de usá-los. Ok. Vemo-nos na sessão de ninho deles. 17. O final. Parabéns!: Heiko vacinas uma humanidade aqui. E eu espero que você debaixo do vidro e do curso e você tenha terra. Fronteiras, sente-se. E por que você disse o sistema científico. Encorajo-vos a pôr isso em prática e a fazerem o vosso próprio sistema decente. É este ano para fazê-lo do que explicá-lo às vezes porque eu acho que você pode fazer com que isso signifique pouco tempo. Então vamos tentar e fazê-lo. Vejo-te no próximo prato. Assim como a próxima sessão. Tudo bem, te vejo lá.