Figma: crie designs responsivos!

1. 1 - introdução: Ei, neste curso vai ser super rápido. Vamos ver como fazer designs responsivos dentro de sigma. Então, vamos usar restrições para fazer um par de designs responsivos. Então, ao mesmo tempo, você está aprendendo a ferramenta e aprendendo as habilidades necessárias para torná-lo projetos responsivos dentro do fema. E por isso é bom para o seu portfólio também. Então eu encorajo você a se juntar à aula que eu acho que vai ser super interessante e divertido. A propósito, sou Bruno UX, designer com 20 anos de experiência. Agora estou projetando uma abordagem de big data. Por isso, encorajo-vos a participar deste curso e ver-vos na primeira lição. 2. 2 - design responsivo em fma: Ei, então vamos começar e vamos começar a renunciar a esta página inicial responsiva que criei aqui, S3, AI, é um artifício vendendo bilhões de iscas web. Na verdade, eu não copiei todas as coisas, mas tentei replicar esses três itens aqui, tipo um blog, barra de notícias. E também, tentei replicá-lo. Muitos. Estes eu inventei só para o bem da página web. Em, como você pode ver aqui, temos essas três telas. Ele d Então, como vamos ver agora, não levou muito tempo para fazer esses projetos baseados em um deles, em seu desktop um. E que poderíamos torná-lo mais rápido porque tínhamos aplicado, como você pode ver, as restrições de areia para construir isso para construir essas interfaces. Então mais tarde foi super fácil, sim, fazer esses ajustes. E foi meio que super rápido. Então vamos começar com isso e vamos começar a projetar esta página da web neste curso apenas para nomeá-lo inclinado aqui. E eu vou apenas inserir o quadro. Lembre-se, faça sim, peito F ou a. E então você pode apenas digitar preset aqui. E eu, neste caso, eu vou usar o MacBook Pro é o que eu costumo usar para meus designs. Então é um bom ponto de partida. Aqui eu tenho algumas grades de layout pré-configuradas. Neste caso, eu vou usar bootstrap cinco x X L layout. Você pode ver como criar esses layouts no meu outro tutorial sobre grades de layout, onde você vai aprender a criar Bootstrap. Para Bootstrap, cinco layouts também. Você vai aprender a criar um pixels grades perfeitas, ok, então é apenas uma grade para, para começar o meu projeto aqui. Não é um, não é grande coisa. Então o que eu fiz isso para criá-lo, criar um retângulo, para criar um rectangle.js venha aqui e pressione retângulo ou dois. Sim, os seios são a chave. Atalho e você está pronto para ir. E o que eu fiz é o que fazemos aqui é usar o plugin menos mais. Então vamos encontrá-los. Um espaço e o espaço seguem-se. Então, amplamente aqui no espaço, sim, temos 40 aqui. Por isso, senta-se perfeitamente como queremos. O que eu costumo fazer também é fazer outro retângulo sobre DS1. O que eu costumo fazer suas botas, um campo em uma cor azulada e depois desenhado verbosidade para algum lugar que eu gosto. Então eu posso colocar texto sobre ele, ok, então você pode ver, você pode dizer a diferença aplicando este tipo de máscara. Eu gosto de fazer é por aqui. Talvez haja outra maneira ou em outro campo e depois se misturar e tudo mais. Mas eu gosto que seja assim. Está bem. E vamos inserir o nosso eu já fiz carregar o logotipo antes. Você não tem que fazer isso. Você pode colocar o nível que quiser. Então você realmente não precisa colocar estes como logotipo da seita nele. Vamos ter material auditivo. Sim, este eu acho. Vamos clicar lá fora. E uma vez que estes pretos escondidos, eu fiz isso ir aqui para configurações de imagem e, em seguida, aumentar esta postura. Bump de cima para baixo, colocar os destaques para cima, os silos para cima. E bem, eu meio que comi principalmente branco, que é o que queremos aqui para o nome. Então é phi S3 AI? Sim. Isto é um pouco de coisas chatas agora. Você vai, temos que arrumar um pouco as coisas agora. Então eu acho que está centrado lá. E eu só vou trazer meu cardápio aqui. Os itens. Eu não quero trazer tudo, todas as coisas porque eu quero mostrar a você como eu faço isso. Então você pode aplicá-lo em seus rostos. A arte, como você pode ver, camada de texto regular, então não há complicações aqui. Vou agrupar isto num grupo chamado logo. Então nós temos isso lá. E, e o que eu vou fazer é usar outro plugin que eu uso muito. É chamado de quantificador, como você pode ver aqui. E você se qualifica como ótimo para encontrar ícones. Lembre-se de usar normalmente o mesmo tipo de conjunto de ícones. Portanto, não altere entre diferentes conjuntos de ícones. Nós. Escolha um conjunto de ícones e, em seguida, aplique-o. Mas para este particular, eu só vou, nós precisamos como uma pesquisa, como um ícone de pesquisa. Então eu acho que esta é uma boa. Eu acho que sim. Sim. Chutando porta ou arrastá-lo e justin agrupá-lo para que nós só temos o ícone aqui. E vamos mudar a cor para branco. Então nós temos isso, e como vemos aqui em nosso, nós temos este botão com o nos começar. Vamos ver a altura 48. Então estamos em um, uma largura de oito pixels. Então vamos desenhar um retângulo com pixels de Fourier. Vou adicionar som e raio de fronteira aqui, como digamos dez. E vamos aplicar em um traçado, traçado de um pixel e remover o plano de fundo. E então eu vou apenas copiar. E este texto aqui, e ele vai dizer, o que foi, o excepcionalmente começar. Tudo bem, então isso é bem direto aqui. Vamos converter isso em um botão Auto Layout. Então é assim que ele vai ser uma espécie de resposta para a mesa que colocamos sobre ele. Então, para isso, você pode apenas clicar em, clique com o botão direito e AF auto-layout ou eu recomendo aprender o circuito é peneirar um e está fazendo coisas estranhas aqui. Então não queremos isso. Eu não sei o que está acontecendo. Então deixe-me colocar isso. Agora era a configuração da camada. Então lembre-se, é uma boa prática colocar o retângulo e, em cima, nas camadas, colocar o texto. E agora, como você pode ver, temos um botão de altura de 48 pixels e podemos ajustar aqui a bobbing. Então, já que estamos trabalhando com luto de oito pixels de alguma forma, então vamos votar como 32, ok? Então nós apenas colocamos aqui, e eu quero colocar esses elementos 232 pixels para, para trazer essas medidas. Aqui. Você só peito deve em, no Mac ou opção em, no Mac e todos para investir em BC. Tudo bem. E outra coisa que eu vou fazer isso suprimento aqui. E eu auto-layout para. Então clique com o botão direito do mouse e adicione outro layout automático. O que ele faz. Neste caso, é que eu posso controlar o espaçamento da margem e do preenchimento e o espaçamento entre os elementos, então nós os mantemos consistentes. Ok, para isso, eu vou deixar no 32 também. E, e agora temos que colocá-lo novamente aqui, 32. Ok. Não vamos fazer mais nada agora que diga que seria bom tê-lo no 32 e nestes 232. Lembre-se que você pode se mover, você pode se mover com tinta. Se você pressionar as teclas de seta, ele moverá um pixel para a esquerda, para a direita, para cima e para baixo. E enquanto você pressiona Shift, ele se moverá em incrementos de dez. Então, eu costumo fazer assim. Certo, então temos a configuração do menu. E agora nós vamos trazer nosso layout aqui novamente para que possamos fazer algum, eu não sei, tipo de projetar uma caneta. Então isso vai ter uns 16. Então, ainda estamos na grade de pixels. Vou criar aqui tirando seis colunas para o título. Na verdade, não me lembro do título. Então eu vou apenas copiá-lo. E este tipo de letra, hey tinha usos castelo livery em exposição é um livre é um tipo de letra livre. É uma fonte grátis. Você pode, você pode apenas usar a partir de, você pode apenas falar. Ouvir sigma porque ele é feito, é do Google. Tudo bem, então aqui o que queremos é dito estes não na largura externa, mas em altura automática, ok? Então, e a largura vai ficar aqui. Se continuarmos a escrevê-lo, vai para baixo. Mas, mas, então a largura é fixa, mas a altura é três. Está bem? E agora temos uma mensagem aqui. Vou copiar também. E por isso, vou deixá-la. Começa como cinco colunas. Podemos ir com seis colunas, se quisermos. Bem, isso vai passar das colunas de C, mas isso, eu vou deixar no cinco. Lembre-se, eles pensariam que é sobre trabalhar com Layout é que você pode posicionar elementos com toda a segurança. Você vai alinhar itens. Eu não estou alinhado no meu cardápio aqui. Eu estou apenas deixando esses 32 balançando ou espaçamento em torno desses elementos porque eu quero ir este completo, cheio, largura total, tela cheia. Quando você aumenta a largura da janela, eu quero ir até o fim. Mas esta parte eu quero ficar para manter a dor. Então, se isso aumentar, a foto aumentará, mas isso permanecerá no mesmo lugar. Certo, é isso que queremos fazer. E novamente, se olharmos para o erro em nosso design, temos aqui outro botão é chamado ou mais, que é o mesmo que começar. Então, para isso, eu vou apenas copiar este botão lá fora. Whoo. Eu vou apenas para duplicá-lo segurando a tecla alt ou a tecla Option e trazê-lo aqui. E a coisa boa sobre layout automático, e você pode ver aqui que esses dois tipos de torres ou ícone de pausa, o que significa é que ele tem o auto-layout são ativados. Então, qual era o texto? Saiba mais. Então, quando mudamos o, o texto vai ser responsivo aos nossos textos são sempre vai ser aumentado ou diminuído dependendo do texto. Então, como você pode ver, nós escrevemos um aqui. Estes Neymar, ele vai maior, ele cresce maior. Então, para isso, eu realmente gosto de aplicar auto-layout para, para aplicar como um espaçamento consistente para isso, eu vou usar 32 como temos usado em nosso menu. E você pode ver às vezes esses tipos de comportamento estranho aparece para que você apenas selecionar o elemento. E aqui você pode alinhar os itens dentro do layout automático. Layout automático, você pode alinhar as coisas. - Sim. Poderíamos alinhar aqui ou até mudar a ordem como você pode ver. Portanto, é uma boa prática alinhar todos os elementos à esquerda se você quiser assim. E o que eu costumo fazer também é colocar isso neste layout automático. Sim, arrastando aqui, você pode ver que se este azul é selecionado e na verdade não é tão ruim. Então eu vou deixá-lo dentro deste layout automático, ok, então eu vou apenas renomear isso como botão. E estes têm título. Então, mais tarde, saberemos o que temos aqui. E isto vai ser chamado de menu. E este vai ser o botão. Ok? Então podemos manter as coisas em ordem ou certo? Certo, então temos nossa primeira parte comparada a isso. E agora vamos criar esses elementos aqui. Então, para isso, eu não vou criá-lo tipo de, eu vou criar uma cópia de algumas partes. Então, agora, se nós vemos, se nós redimensionamos isso, nós podemos ver que qualquer coisa mais. Então é bom e podemos fazer nosso columbus maior. Só vou copiar esta mensagem. Este texto que eu estou usando aqui é chamado regula inter-granular para 16 pixels, e VCs inter parafuso para 52 pixels. E os itens do menu são intergranulares 14 pixels. Você pode brincar ou você pode escolher um tipo de letra, se sente bem para você. Isto é apenas um título, nada extravagante. E vamos ver como isso é feito. Quero dizer, vamos ver a estrutura disto. Ok, então nós temos uma foto, nós temos uma espécie de borda cinza aqui, que na verdade eu vou copiar apenas para bater esta cor, essas cores. E nós temos essa data, depois o título, depois um pouco de volta e uma flecha aqui. Certo, então vamos voltar. Só vou copiar aqui como referência. Eu não vou apenas colocá-lo aqui. Quero mostrar-te como faço. Então, para isso, uma vez que temos três elementos que queremos tomar para, para o nosso item. Então esta será a distribuição que é isso que eu gosto de trabalhar com nós com grades porque é super fácil posicionar elementos, manter consistência em diferentes páginas e tudo mais. Então, se você não está acostumado a trabalhar com o layout, eu realmente recomendo que você faça isso ok. Então o que eu vou fazer aqui é usar novamente o plugin, o plug-in. Neste caso, vou apenas arrancar. Militares. Será que Militar e sim, nós temos nossos quatro. Tudo bem. Mas vou trocá-lo por este helicóptero. E eu só vou copiar o texto porque pode ser um pouco de tarefa tediosa. Só vou colocá-los assim. Para o shake, você pode ver aqui a facilidade de configuração em negrito 16, intervalo 22 e intervalo. Então para isso, para a pilha, ok, então para este ícone, eu só voltei para o meu loft, plug-in economia phi e sets para seta. Certo? E acho que usei este, mas não importa. Sim. Em vez disso, aquele que se sente bem para você e será ótimo. Como você pode ver. Ele quantifica inserções como um quadro e, em seguida, insere um tipo de grupo. Então eu normalmente desagruparia estas molduras para que desaparecesse. E eu tenho a flecha. Então vamos colocar a seta e na área de trabalho, vamos fazer isso um pouco maior, algo em torno disso. E nós tínhamos antes deste tipo de retângulo para estes o que eu faço é apenas criar, Sim. E toda vez que eu enviá-lo para trás, remova a inserção e um golpe. Vou ficar com o seletor de cores. Vou copiar isso, exceto cinza, e que é um cinza sutil. E o que eu faço é costumo colocá-lo um pouco mais alto para que fique escondido antes da foto. Então você poderia colocar assim. Mas você vai ter como essas grandes celas aqui que é meio sujo. Então acho que deixei isso para trás. E nós quase temos o nosso desejado aqui, mas eu quero fazer algumas coisas antes. Estávamos deixando 32 pixels à esquerda. Então, nesses elementos aqui e entre esses elementos também. Então eu quero mantê-lo consistente e folha como 32 bits nós aqui para, aqui temos 32, como você pode ver agora, 32, aqui temos 32. E agora aqui eu quero ter mais 52. Então é bom para o. E aqui nós queremos como 32 pixels para. Então eu vou apenas alinhar estes, alinhar ao meio, o que é bom. E aqui nós queremos ter como 3032 vai ser tipo de duas dietas. Então, digamos 34. Bem, podemos, podemos lembrar que você pode colocar aqui como Samsung ou sim, oprimir menos n vai, agora devemos ter 32, então estamos prontos para ir. Então nós temos o nosso primeiro carro ou novo ou assim nós vamos criar um componente deste. E isto vai ser novidade, está bem? Então, vou chamar de notícia. E eu só vou trazer nosso layout de novo e duplicá-lo. Está bem? Por isso, já fizemos o nosso design. Oh, que há essa batalha que precisamos criar. Mas aqui neste design responsivo, você pode ver que os elementos estão se movendo para aqueles que estão em escala. O, o, esses elementos são realmente, eles são realmente responsivos ao mesmo que o menu. E, mas se fizermos isso aqui no nosso novo design, remova isso. E fazemos isso aqui. Podemos ver que algumas coisas estão acontecendo que não queremos que aconteça. Então essa foto não está escapando do menu. É, estamos a perdê-lo de alguma forma. Bem, o cardápio, está se comportando bem. O que os elementos aqui embaixo, podemos ver que eles não são a escala corretamente. Então vamos consertar isso. Ok, então eu não vou mudar esses quatro. Oh, bem, eu vou mudá-los ainda. Muito rápido. Abrimos novamente e um plug-in de splash, e vamos incentar algumas fotos aleatórias. Tudo bem. Então, temos aqui. Deixe-me só não queremos toda essa luz aqui. Então o que precisamos, é entender essas restrições, painel. Painel de restrições é o que vai fazer seu design responsivo ou se comportar da maneira que você quiser, ok? Então, para este fluxo em particular, o que queremos que seja para a esquerda. Então queremos manter esses brotamento, dissemos antes de 32 pixels e a mesma coisa. Nós queremos ficar no topo para isso, você só deixa assim. Nós giramos este painel. Podemos ver que você pode fixá-lo para a esquerda, para a direita, esquerda e direita, centro ou escala para este caso particular, queremos isso assim. Para o menu, o que queremos é em vez de esquerda, não queremos ocupar esta enorme quantidade de espaço aqui. O que queremos é trazê-lo para a direita. Então, queremos manter este espaço. Aqui. Queremos manter este espaço à direita e no topo. Então nós apenas colocá-lo à direita, no topo, o texto, este texto. Queremos a mesma coisa. Queremos estar à esquerda para manter este espaçamento aqui e para manter o topo. Está bem? E o mesmo se aplica a esses dados, e o mesmo se aplica a aqui. Por isto. Se eu levar para a esquerda e para o topo, isso não vai ser responsivo. Então, neste caso em particular, o que queremos fazer, é ser preciso SK. Está bem? Então vamos ver o que acontece agora. Como você pode ver, está se comportando bem. Estes não estão movendo esta escala de RNA corretamente. O primeiro é uma escala como esperávamos, mas os outros não. Então temos que consertar isso. Permitam-me que ponha isto de novo a cento e cem, dez, cento e quarenta. Então era o nosso oriental. Então vamos ver o menu e o resto dos elementos, como eles se comportam. O resto dos elementos estão se comportando. Tudo bem? Então, em vez de colocar aqui em escala, o que queremos fazer é esquerda e direita. Então ele vai levar o mesmo, ele vai levar o mesmo espaçamento aqui do que aqui. O que queremos aqui é colocar os nossos elementos de carro ligados à esquerda e à direita e ao topo. Está bem. Podíamos colocar aqui como uma balança. Mas a escala vai fazer esses elementos. Deixe-me ver se está tudo bem. Não é um, não é. Sim, mas algo aconteceu aqui. Então deixe-me duplicar isso de novo. E algo importante. É que nós não aplicamos nada aqui nas restrições. E os constrangimentos. Quando você, quando você muda o, a restrição superior, o pai, digamos que o pai, se você está em um grupo, imagine isso como um grupo. Se você mudar aqui, o centro ou escala ou esses elementos, eles vão escolher, o que você escolhe na primeira vez? Então é uma coisa complicada porque se você aplicar as restrições antes desses pequenos elementos, antes de fazer seu mestre, que restrições pai é mais tarde vai ser como uma cascata. Portanto, é melhor aplicar primeiro as restrições ao grupo ou ao componente e, em seguida, ir para os elementos internos e aplicar suas, suas restrições. Está bem? Então, para, para, para esta coisa, o que queremos é em vez de uma escala, não queremos escalá-la. Só queremos que respeite. É preciso este espaçamento aqui e este espaçamento aqui e respeitá-lo. Certo, então, a mesma coisa. O que podemos fazer aqui. Podemos ver é que estes brancos, tem sido consistente e o espaçamento entre colunas está sendo consistente. Então isso é, isso é o que queremos em nosso projeto. E para isso, em vez de escalar, o que vai fazer como se pensássemos assim ou algo assim. Queremos que esses espaços em branco entre os elementos sejam consistentes. Então, para isso, o que você fez? 2s é esquerda e direita. Para que o conteúdo não seja dimensionado, basta mover. E então agora vamos para elemento a elemento aplicando restrições. Tudo bem? Então não queremos esse elemento em escala. Nós não queremos fazer isso, ok, quando fizermos maior ou Spore. Menor. Então o que queremos isso, este, neste caso particular, queremos fixá-lo à direita porque queremos manter esses espaços em branco consistentes e o espaço inferior consistente também. Então, aplicamos para o fundo. Então é quando movemos estes R0 vai ser uma vara para a direita e para o fundo vai, o espaçamento vai ser consistente. Tudo bem? A mesma coisa se aplica aos anúncios. Queremos mantê-lo para a esquerda e eu sinto muito pelo boro. Então este espaço em branco vai ser consistente com a mesma coisa se aplica aqui ao título que queríamos bin à esquerda também, manter estes embarques para visitar aquele espaço e para o topo. E para este encontro, exatamente da mesma maneira. Queremos fixá-lo à esquerda e ao topo. Está bem. Estes queríamos presos ao topo. Mas queremos ir para a esquerda e para a direita. Queremos fazê-lo aumentar e diminuir como você, como podemos ver aqui. E o importante aqui, eu tenho este aldeído pronto, pronto. Então, quando nós, quando tentamos a coisa responsiva aqui, podemos ver que isso não está mudando. Está bem? Então precisamos fazer algo com isso. E isso é girar para o canhoto para adotar, eu cometi um erro aqui, mas o que queremos é manter esse ritmo, baseando-se na direita e na esquerda. Então, para este em particular, você tem que trazê-lo para a esquerda e para a direita. A mesma coisa que fizemos aqui. Ok, então agora se fizermos isso, como você pode ver, o texto é responsivo. Então é assim que se cria. E vamos criar um tablet projetado para isso. Eu só vou trazer este aqui à tona. Mata ela e apaga o conteúdo. Bem, então vamos ver como eu faço seus projetos responsivos aqui. O que eu faço, é só arrastar e soltar todo o conteúdo aqui. E sim, alguns. E o que eu faço é pegar esses três e trazê-los aqui. Ok. Então, basta aplicar isso e aplicar aquilo. E você só, e você vê que eles estão quase lá. Você obviamente tem que fazer algumas mudanças aqui para derrubar esses textos porque eles são muito grandes para este responsivo como você faria se você estivesse fazendo isso em HTML Assis, CSS, você colocaria como uma consulta maníaca ou algo assim. Então, o melhor seria um menor, certo? Então, essa é uma parte. E a mesma coisa se aplica aqui. Você quer fazer algumas mudanças. Se isso acontecer, Meredith é o jeito que funciona não é possível fazer tudo tipo de super responsivo. Quero dizer, sim, a imagem, a imagem, como você pode ver, tem sido responsiva. Agora você, o que você pode fazer aqui se você quiser que ele mude para cortar. E você pode se mover ao redor da imagem se quiser posicioná-la melhor. Mas como você pode ver, isso é tomado como, eu não sei, um minuto. Então minis para criar um design responsivo, o menu, o que acontece na versão tablet é que ele não se encaixa. Então, para estes, o que eu fiz é apenas vir para o meu amado plug-in E quantificar e inserir como um ícone de menu. Este parece bom porque custa um pouco de arredondamento. E sim, venha aqui. Como vimos, desagrupe novamente, mude a cor para branco. E queremos ser como 32 pixels, como fizemos antes. 32 pixels aqui e ali. E em vez de uma escala, queremos posicionar para a direita. E adotar. Porque lembre-se que queremos que o espaço seja consistente. E agora a última parte. E, bem, lembre-se que se você quiser fazer como um, outro tipo de design aqui, eu não sei o que aconteceu com isso. Isso deve ser fixado à esquerda e à direita e ao topo. Então, quando agora fazer isso, novamente, é totalmente responsivo. E o que podemos fazer, se quisermos, é trazer a versão tablet e, em seguida, torná-los versão móvel. Então, para isso, vamos ver o que selecionei para o telefone. Era o iPhone oito mais, então é essa largura 414. Então voltamos aqui. E o que queremos isso, basta colocar assim. 114. E tudo vai ser a parte que tem isso. Seja responsivo, eles são responsivos. Tudo bem. Mas lembre-se, agora temos esse tipo de layout estranho aqui. Então eu vou apenas ir com outro layout mínimo para sim, isso é muito melhor. De qualquer forma, já que esta não é uma página no Facebook, não quero que seja tão apertada. Então eu vou apenas mudar um pouco o layout para mim. Eu vou desanexar esta aba e eu vou deixar a margem para 32 pixels. Ok, então agora temos nossos elementos adaptados à grande coisa que vai bater isso um pouco mais alto para que você possa realmente ver o que está acontecendo nesta parte. Então, para este que eu vou fazer é apenas i e tudo para o 32 pixel concordo que temos para a margem, desculpe. E então comece a fazer esses elementos um pouco mais pequenos. Está bem? Então, e isso, eu vou apenas para torná-lo como super fraco, que todos os elementos se encaixem. Eu só vou remover esses elementos e copiar novamente este porque ele tem como um pequeno texto. E agora o que podemos fazer é sim, torná-lo maior. E duplicá-lo novamente. E aqui temos alguns problemas com a mesa está tipo de ir para lá. Basta colocar isso, trazer seu n no asteróide para sua grade de layout e você está pronto para ir ou talvez você queira mudar isso para um menor porque é muito grande. Então você pode colocá-lo em torno de você, algo assim. E estes, você pode deixá-lo no 16. Então agora temos nosso design responsivo bem moldado aqui. Outra coisa que eu realmente gosto de fazer, É aplicar auto-layout para tudo porque eu não tenho que estar pensando aqui, que é o espaçamento onde quer que seja. Então, se você aplicar um layout ao ar livre aqui, eu posso controlar que eu coloquei 32 e todos os elementos separação vai ser 32. Ok? Então é isso, é assim que você fez um design responsivo dentro da fema. E como usar em combinação auto-layout para separar elementos e manter distâncias consistentes e também. Como fazer esses elementos responsivos são. Outra coisa que eu quero mostrar a vocês é que agora desde que nós fomos esses elementos para o fundo, nós podemos, esses elementos é um tipo de resposta para porque nós podemos fazer os elementos classificar e tudo vai estar em, em seu lugar. Então deixe-me fazer isso um pouco mais curto. Então lembre-se que, que as restrições funcionam, funcionam dessa maneira. E a outra coisa que eu queria te mostrar, foi o que aconteceu. Se eu colocar algumas restrições com uma escala, que é a que não vimos. Está bem? Então lembre-se, digamos que aplicamos a esta seta em vez de direita e inferior. Nós nos aplicamos como fuga. Ok. Então você pode ver aqui que desde que fizemos estes, estes componentes são menores, as setas estão recebendo escape. Então, é por isso, isso é o que é para a restrição de escala. Mas eu não recomendo usá-lo neste tipo de elementos. Então este é o giro para a direita novamente. E você mantém a flecha sem distorção em todas as situações. Então é isso. Espero que você vai achar que o interessante, Eu recomendo que você replicar estes design ou qualquer outro que você tem em mente tentando, Vou colocar estes em prática com os cartões e com estes menu e um erro. Então você continua, continua tentando coisas. Ok, então eu espero que você tenha gostado da lição e vê-lo em seus parabéns, eu sou adeus. Vídeo. Vejo-te mais tarde. 3. Três Congratulations: Ei, parabéns, você chegou aqui. Espero que tenha sido divertido projetar esses design responsivo. Eu acho que você pode fazer seus próprios projetos aplicando o que você aprendeu. Então você pode colocá-lo em seu portfólio é um impulso. Então, espero que, ao mesmo tempo, você tenha aprendido as habilidades necessárias para fazer tudo, todos esses projetos e aprender sobre este treinamento de custo e tudo mais. E às vezes temos visto neste curso. Então espero que goste. E se você fez, por favor deixe um comentário para que mais pessoas possam encontrar o curso. E se você estiver interessado em mais conteúdo como este, então você pode apenas me seguir para que você será atualizado quando eu enviar um novo vídeo e e nós coisas, certo? Então, muito obrigado por se juntar a mim e vê-lo nos próximos cursos.