Figma: Autolayout v2 (a nova versão!!!)

1. Introdução: Ei, bem-vindo a um novo tutorial sobre o novo layout automático em fema. A Fema lançou recentemente em uma versão totalmente renovada de layout automático. Então vamos falar sobre isso. Porque se você já viu meus vídeos anteriores sobre layout automático, agora, ele não tem nada. É tudo comparado com a versão anterior. Então é bom que começamos quase do zero. Então, vamos ver algumas características interessantes com estes novos layout externo. Aprenderemos a fazer estas dicas de ferramenta. Por exemplo. Você vê que você pode torná-lo maior e você pode posicionar os elementos, você sabe, o fundo. Você pode posicioná-lo sempre que quiser. A mesma coisa que faremos neste botão, que é um botão responsivo. Aplica-se a mesma metodologia que, como esta. E vamos ver como um novo recurso que o layout automático abrigam esses tipos de projetos super responsivos. E, e como estes podem ser traduzidos mais tarde para uma espécie de cabra perfeita com flexbox. Usando flexbox. E também vamos ver como fazer este site responsivo, por exemplo, metade alta, tipo de copiar este site OPO para que você possa ver que ele é totalmente responsivo. Você pode ver os elementos no cabeçalho, eles estão se movendo. E quando chega um momento em que muda para o tipo de versão móvel. E você pode vê-lo aqui em baixo também com fotos e tudo mais. Tudo está se ajustando. Então vamos ver todas essas coisas durante o nosso tutorial. Então, se você está interessado em usar estes super fixe renovado ajustador sobre fema. Venha em uma viagem para estes tutorial rápido. 2. 2 autolayout: Obrigado por você em mim, nestes Fostoria. Então primeiro vamos ver qual é a diferença entre o layout automático. Penelope, Se você já trabalhou com ele, se não, você pode apenas avançar um pouco mais e pular esta parte se você é novo para auto-layout. Então, para todos os trabalhadores ou auto-layout, temos antes de um par de bananas aqui. Se você tem o fardo, você tem estes auto-layout com, onde você poderia escolher o, se você queria posição do elemento verticalmente ou horizontalmente. E se você queria como sem uma onda, ou se você quiser, se sou fixa largura e, em seguida, adicionar o preenchimento fora todos os elementos e o Pauling vertical e do layout externo e a separação entre elementos. E isto foi para a criança. Assim, você poderia posicionar o azulejo à esquerda, no centro, à direita, e outras peças posicionadas de forma diferente. Agora, isso mudou muito. Nós, em seguida, nova banana auto-layout. Agora, como você pode ver aqui, nós temos o, para a patente, nós temos quase os mesmos elementos que temos antes. Como se você quiser verticalmente ou horizontalmente. Isto é assim. E então temos diag, a separação entre elementos, que é semelhante a isso, como você pode ver, é o mesmo ícone, apenas dados brutos. E esta é a escuta, que é este tubo Justi vai ambos, estes dois aqui, depois e depois. Então agora só temos um, mas temos esses novos, que veremos que você pode escolher entre diferentes plug-ins para cada lado. Para isso, você pode colocar um brotamento diferente do, para o topo e compra diferente para o fundo. Então agora é mais flexível. E também, esses elementos, esses ícones nos trarão um pop-up que nos permitirá posicionar elementos à esquerda, à direita, e assim por diante. Temos um canivete novo aqui com, que é meio que trabalhar com restrições. Vamos vê-lo assim, mas causou novos elementos, este conteúdo quente, taxas com e tudo o que veremos sobre ele. Mas isso é meio novo para o pai e para o azulejo. Em vez de ter este tipo de alinhamento. Em ícones de posicionamento. Agora você tem as opções de redimensionamento também. Então vamos ver isso em detalhes. Então vamos para o para começar trabalhando com ele. Vamos começar com o fundo, o que é mais simples para baixo, fazer um adulto isso. Então vamos encadear mais tarde, vamos fazer a dica de ferramenta vermelha. Então vamos começar com o fundo. Então, para isso, o que eu vou fazer é sim, retângulo criador e traço Azzam para ele ao vivo, digamos que três pixels dar-lhe algum raio de borda vai ser bastante direto para a frente se você já trabalhou com ele. Então vamos colocar como um fundo branco aqui. Eu só vou copiar e colar isso, ok, então isso é apenas um texto aleatório. Isso realmente não importa. Eu só vou trazer esses elementos para fora. Como fazer uma cópia dele. Este é o, nossos ícones regulares. Se você espera, eu vou apenas usar este azul legal e eu uso em todos os meus tutoriais, é chamado de ícones de falha. Então você o lança e você pode inserir a seta. Então, para isso, eu vou apenas inserir este e criar um componente dele para que seja mais fácil trabalhar. Bem, crie um componente dele. E posicione-o por aqui. Está tudo bem. Vou trazer isto de novo. Mais ícones. Vou escolher este vários em baixo que temos aqui. Então isso é muito legal. E eu vou criar como componente vai fazer a mesma coisa novamente. Tudo bem? Ok, então eu vou copiar e colar para que fique na moldura. E bem, nós temos nossos três elementos e você pode ver se eu escrever aqui, nada acontece é sim, eles são elementos independentes agora. Mas se eu selecionar todos eles, de todos os elementos, ok? E você pode ver que eu não tenho nenhum menu Auto Layout aqui. Então o que eu faço é vir aqui, Clique com o botão direito e mama como auto-layout, Eu costumo usar sim, o atalho Shift um, que é para mim mais fácil. Então vamos pressionar aqui, bomba, e agora temos o nosso layout automático para baixo. Então isso vai ser responsivo. Começamos, mas podemos ver que nossos elementos não estão alinhados. E podemos ver agora o novo painel Propriedades aqui, layout automático. Você pode ver os elementos estão posicionados no elemento horizontal na matriz central Eu sou direção do eixo. E podemos mudar isso se quisermos esse tipo de botão estranho. É quase como um rosto. Assim, o layout automático detecta automaticamente quando você o cria. Quando é que o aplicas? Tentamos descobrir o que você quer fazer. Então, neste caso, é meio perfeito. Mas vemos que este texto não é propriedade só. Ok, então nós vamos tentar todas essas coisas aqui. Então o que isso faz ele aplicar a separação entre os elementos. Ok, então se você quiser assim ou se você está trabalhando com uma grade de oito pixels, você poderia apenas aplicar como um oitavo. Ou o, se isso é muito apertado, você pode apenas ir com 16, o que eu acho que é muito bom. E como você pode ver aqui, que o preenchimento em torno de itens é misturado. Ok, então quando nós criamos, quando nosso teste criou nosso botão, organizamos todo o nosso botão. Tivemos como acolchoamento diferente para o topo, para os quatro inferiores da esquerda ou da direita. Então ele disse como misturado. Se colocarmos como 0, vamos tentar igualar todos os corpos ao redor. Podemos ver que agora é o nosso botão. Obviamente tem 0 preenchimento cercar todo o, todo o recipiente. Mas isso é o que, isso não é o que queremos. Poderíamos aplicar como estofamento semelhante. Imagine que estamos trabalhando com a grade de 16 pixels, então queremos aplicar como 16. Ou, se você estiver trabalhando com uma grade de quatro pixels, você pode ir para 12. Isto está a parecer-me muito bem. Mas imagine que você quer colocar mais estofamento no topo. Como você faz isso? Bem, você pode fazer isso aqui, separados por vírgulas , mas isso é meio estranho. Faça isso outro painel, novo painel que temos aqui, seu alinhamento no preenchimento. Este é o que queremos usar. Imagine que queremos no topo 80 pixels, isso vai ser enorme, mas imagine que você audita ou imagine que você quer mais preenchimento para a esquerda. Então, para este caso em particular, vamos adicioná-lo à esquerda. Então isso é muito legal porque agora você pode controlar os estofos de forma independente. Coisa que antes você tinha que ser como fazer truques, adicionar transparentes os espaçamentos, fazer coisas estranhas, fazer coisas realmente sujas. Mas agora com este novo layout automático, é mais fácil de fazer do que nunca. Ok? Então queremos aplicar o mesmo corpo em o, nosso entorno dos elementos. E o que queremos aqui, esses textos, como você pode ver, não é alinhamento de propriedade. Então o que queremos é alinhar nossos elementos ao centro. E agora você pode ver que essa coisa azul nos permite alinhar os elementos internos ao centro, ao fundo. A coisa em comparação com o auto-layout anterior é anteriormente, Eu poderia posicionar este elemento para o topo, estes alinhados para o fundo e estes dois centro. Agora funciona como um buraco. Então, se você, você só pode posicionar os elementos para cima, no centro ou para baixo todos eles. Você não pode escolher qual você quer, cima ou para baixo, sabe? Então, há truques para fazê-lo funcionar. Mas eu sou as soluções alternativas. Mas agora funciona como um todo, OK. Outra coisa interessante aqui é se redimensionarmos este botão, você pode ver que todos os elementos estão se movendo ao mesmo tempo. Eles são como embalados na mesma maneira. Ok? Aqui é onde se chama embalado aqui. Se eu disser um espaço entre, você pode ver que os elementos que estão espaçamento uniformemente. Então isso é ótimo porque, é como sites funcionam quando você está codificando neles em HTML e CSS. Isto é o que HTML e CSS faz. Então, antes de seu comportamento era diferente em como um site funciona. Então, tudo bem, nós temos o nosso botão. Como podem ver agora, temos um botão fixo, mas não queremos isso. O que queremos é torná-lo responsivo novamente. Então, para isso, em vez de fixo, você pode ver aqui ele está dizendo esquerda. Mas, ao mesmo tempo, no mesmo fixo. Então, o que queremos que isso hackee contextos, hackeie conteúdos. O que ele faz é tornar o, este elemento responsivo ao conteúdo que ele tem, ok, então neste caso particular, eu acho que é muito bom. Ok? Então é assim que o nosso botão, e esta é a nossa primeira abordagem a ele. Ok, então agora o que vamos fazer a dica de ferramenta para isso, vamos fazer quase o mesmo tema que fizemos com o, com o fundo. Eu fiz, eu faço isso porque é meio complicado dar a gorjeta. Ok, então para isso eu vou aplicar novamente um pixels. Aqui. Só vou aplicar um preto. Vou desenhar um triângulo aqui. Eu poderia desenhá-lo, mas com isso, eu estou bem. Vamos girá-lo. Ponha isto em sorte. Aplique algum raio de fronteira para ser mais agradável. Digamos quatro. Whoa, isso é demais. Talvez 22 seja bom. E isso é muito grande para o meu gosto. Então vamos fazer um pouco mais brilhante, certo, a mesma coisa. Eu só vou copiar e colar este texto fora dele e posicioná-lo aqui. Certo, então agora a mesma coisa que o botão. Tudo é independente. Então, para este particular, para esta dica de ferramenta particular, queremos fazer como separar dois auto-layout aninhados. Ok, então o que queremos que isso crie para esses dois componentes, como layout automático e depois juntou-se à festa para esta dica aqui. Então, vou pressionar o botão direito do mouse e adicionar layout automático. Então agora é responsivo às coisas que estamos escrevendo, que é ótimo, o que queremos. Mas você vê que o mais profundo não se move ou se eu quiser posicionar este t, Se eu tiver que fazê-lo manualmente e isso é meio que, você sabe, não tão, não tão bom. Então o que vamos fazer, é para você entrar na festa tão fundo. Então, para isso, nós selecionamos o nosso moldado anteriormente é, eu vou nomear estes caixa Tooltip e estes polígonos e apenas indo para nomeá-lo como gorjeta. E o que queremos aqui é que a nossa caixa de ferramentas e a nossa equipa se unam. Então o que fazemos por isso é um álcali fora, ok? E você pode ver o nosso fundo é meio que fora de lugar nenhum. Sim. Podemos posicionar em um centro para a direita e para a esquerda, mas é meio ruim. Então, quatro dias, o que eu vou fazer é criar um quadro dentro disso. Ok? Eu vou criar um quadro, quadro inserido aqui, e eu vou colocar o TP dentro do quadro. Então. Agora eu tenho o super profundo para cima. Eu só vou colocá-lo para baixo. E vamos dizer que eu quero colocá-lo lá. Onde fazer o, este truque quadro, porque precisamos de algum espaçamento aqui à esquerda. Então o que podemos fazer sua posição, nosso elemento, nossa dica lá, e então colocá-la aqui. Então o quadro vai permitir, ganhar algum espaço aqui e remover esses TPP, isto é, é como se sobrepor aqui. Então isso é bom, vai ser nosso profundo, ok, porque estes são os dentes bons. Ok, então agora temos o nosso fundo com a nossa dica de ferramenta, desculpe. Está bem. E com esta dica agora, sim, podemos controlar nossa, você sabe, como as profundezas se movem. Ok, então isso é bonito, isso é muito legal. A mesma coisa de antes. Podemos controlar a separação da dica. Mas neste caso queríamos como 0, se fizermos esse tipo de coisa estranha no espaçamento horizontal, não queremos isso. Queremos ser vertical primeiro leste, este elemento, e depois a dica de ferramenta sob, sob a dica de ferramenta. Então temos nossos dois elementos. E a coisa boa sobre isso são as cabines de dicas de ferramentas, ok? Dentro desta largura é responsivo com um texto. Então vamos fazer isso. E então nós só queremos sempre posicionar a Tooltip no centro. Chegamos aqui e posicionamos aqui. Certo, então já temos duas coisas. Então vamos começar com um pouco de pessoal mais complexo. Aqui, metade de um conjunto de cartas, nada também. Estamos no. Mas você vê aqui que eles são completamente responsivos. As imagens são responsivas. Os textos são responsivos. Imaging. Temos uma caixa de texto mais alta aqui. Ele se comporta como o site quando você está usando flexbox em HTML e CSS. Este é o comportamento que eles têm, N também. Você pode mudar seu comportamento aqui nos elementos. Se em vez de colocar alguns recipiente, Eu só digo enorme conteúdo. Desculpe Huck, convença. Você vê que ele se comporta como, se comportar como com flexbox. Então isso é ótimo para quatro. Vá buscar seus projetos de fema para HTML e CSS. Agora é muito, muito, muito, muito melhor. Ok? É mais complexo usar o layout automático agora, mas o torna mais completo. Então nós vamos, para replicar isso para como fazer este design perfeitamente responsivo aqui. Ok. Então, para isso, eu vou apenas copiar todos os elementos que eu tenho aqui. Porque eu não quero que eles voltem a fazê-lo. Então deixe-me largar tudo e desagrupar tudo. Então, tudo é meio separado. Como você pode ver aqui, eu tenho tudo separado para que eu possa mover tudo ao redor. E, e se E1 vai acontecer porque tudo está separado. Está bem. Imagine que tenha o nome do sabotador, a localização, esta foto. Com fotografias neste caso, é importante definir para sentir ou dois pés dependendo do campo de alimentação funcionar bem neste caso. Outra coisa importante é, bem, eu vou desenhar o carro por trás disso. Então mande para trás. Digamos que isto é branco. Vou adicionar um pouco de fundo aqui para que possamos ver o que está acontecendo. Então, basta escolher este fundo, tudo bem, e então aplicar algum raio de fronteira, digamos oito, vamos salvá-los. Então, o que queremos alcançar aqui é que queremos controlar este espaçamento aqui pode gostar de trabalhar com uma dor de oitavo pixel. Então vamos dizer que eu tenho isso lá e assim lá e lá e tudo mais. Então o que eu costumo começar a fazê-lo agrupando as coisas em auto-layout. Então, para isso, eu só vou pressionar o layout automático e você diria, uau, mas isso talvez seja muito ridículo. Você pode apenas ajustar com esta ferramenta de medição aqui. A pessoa deveria. Eu gosto de fazer com layout automático porque é, é mais, é mais fácil para mim no final. Então eu posso ir aqui para oito pixels. E para este elemento em particular, vou adicionar outro layout automático entre esses dois elementos agora, os textos e, e, e a localização e os elementos. Então, sim, vamos com o layout automático. E por que eu faço isso, porque eu posso controlar melhor as distâncias e ser mais consistente entre um espaçamento com um espaçamento de coisas. Então, neste caso, oito é muito apertado, então eu vou deixar no 16. E eu digo, OK, agora eu quero essa coisa de layout automático, este nome e localização para estar no centro. Ok, então o que fazemos para isso é vir aqui e selecionar aqui o centro. Ok? Agora temos nossa foto aqui. Nós temos o nosso título, e nós somos tipo de bom para ir apenas nós, nós temos alto como nossos elementos m verticais aqui, certo? Então temos este componente, esta foto, este título. Então nós vamos apenas pressionar aqui fora auto-layout para ver o que acontece. Bond. É perfeito. Quero dizer, eles, ele detectou nosso espaçamento mais ou menos, então eu quero fazer como 24 de espaçamento. Podemos ir mais longe aqui, está bem? Mas para este caso em particular, já que estou trabalhando com AP, grade mental de oito pixels, vou colocar como 424 pixels aqui. Mas vejo algo que não gosto aqui. Quero isso, em vez de ter 24 anos, quero que seja mais apertado. Talvez oito pixels de 16 pixels. O que, o que você pode fazer aqui? Muito bem, basta selecionar estes dois, estes dois elementos, o título e o texto. E o que você faz é aplicar outro layout externo. Ok, então você adiciona outro layout externo para esses dois elementos. E agora você pode controlar o espaçamento entre esses dois, o que é ótimo para este caso particular. Vejamos, 16 é demais. Vamos com 88 talvez seja para datilografar, mas eu prefiro oito, Daniel. Então eu vejo agora que aqui mesmo, mesmo eu gosto dele, mas eu acho que nós temos mais espaçamento do lado do que na outra coisa. Então eu vou aplicar 32 para o nosso carro. E imagine que você quer mais estofamento no topo e no volume. Então aqui o que vamos fazer, é ambos 4848, por exemplo. Então temos nossos, nossos acolchoados, 32 à esquerda e 5248 para o topo e desenvolver. Isto é muito fixe. Certo, então temos nosso primeiro carro. Vou só dar o nome da carta 1. E eu vou apenas duplicar este cartão. Ok? Então eles são enormes, mas não importa. O importante é que você entendeu. Então temos nossas três cartas aqui. E como você pode ver, eles estão prontos. Bem, nós vimos o que isso pode fazer. Mas vamos ver são restrições e redimensionamento. Isto é uma coisa muito interessante. Então agora este elemento, este cartão, está configurado para hackear conteúdo. Poderíamos, por isso responde a dois. À medida que chegamos, você pode ver que aumenta. Está bem. Está definido para hackear conteúdos no eixo horizontal e também no eixo vertical. Se definirmos esses dois fixos, o que podemos fazer agora é alterar a largura do, do, do, do, este componente de layout externo. Mas não está funcionando como você pode ver, qualquer coisa está se movendo, qualquer coisa está se redimensionando. Então, por que isso? Porque os nossos elementos de estilo, eles são definidos para a largura do rosto. Ok? Há algo que não tocamos anteriormente, mas agora vamos tocá-lo. Então, se você quer que isso seja responsivo. Ok, então deixe-me fazer isso. O que queremos é definir os elementos filhos para duas configurações diferentes aqui no redimensionamento, ok, então em vez de quintos, o que queremos é ser como preencher o contêiner, ok? Temos um espaço imaginário aqui, que é um brotamento. E o que queremos isto, se o tornarmos maior, esse estofamento vai ser o mesmo. Mas os elementos vão redimensionar seus próprios até sentirem esse preenchimento. Então, para isso, o que vamos fazer, em vez de ser fixado para o nosso tamanho real, vamos definir isso como recipiente, ok? A altura que podemos, podemos configurá-lo fixo ou definido para sentir recipiente também. E este elemento, você vê que ele está definido como tinha conteúdo na largura e no lado vertical. No lado vertical é bom se colocarmos este conteúdo de corte vida. Ok, e este aqui. Mas isto, o que queremos aqui é sentir-nos contentores. Então, quando nós esticamos ele vai, para manter esse preenchimento e quando nós trazê-lo para cima e torná-lo maior, vai manter que compra em para então ele vai aumentar. Vamos ver se isso está se movendo ou o que está fazendo, certo? Nossa imagem está funcionando bem. É como aumentar e simplesmente apagar este, estes dois, ok. Então você pode ver que nossas imagens estão respondendo, mas o resto dos elementos não estão. Então, o que está acontecendo aqui? Porque temos este contentor de campo aqui, por isso isto é bom. Mas temos que ir para dentro de outro para fora. Então este é o título e o baralho. Então sabemos que estamos trabalhando. E agora se clicarmos novamente e selecionarmos o título, podemos ver isso. Agora vemos qual é o problema, é que o nosso título é definido para uma largura fixa. Então, para isso, o que queremos é sentir recipiente, para definir isso para preencher recipiente e isso em vez de largura fixa, este é o texto. Vá para preencher contêiner para. Vamos ver como está respondendo. Agora nosso carro e agora nosso cartão está respondendo brilhantemente é o que queremos. Bem, eu vou definir isso em vez de, desculpe, deixe-me apenas desfazer isso. O que queremos é em vez do recipiente de combustível, eu vou apenas consertar a altura para que não fique tão estressado. Então mantém a altura. E algo não está funcionando aqui. Então o que queremos está no sim, isso é bom. Então vimos o que estava acontecendo aqui. Meu contêiner, meu contêiner principal aqui à esquerda, no, no eixo horizontal, está configurado para corrigir porque queremos redimensioná-lo manualmente. Mas aqui foi configurado para estar no topo, não para escalar ou não conteúdo muito quente. Neste caso, queremos quente convencido de que eles têm misturado como as restrições de controle anteriores e preciso e eles estão fazendo aqui uma coisa meio estranha. Mas agora o que podemos ver é que o nosso elemento está trabalhando. Se eu tiver mais mensagens aqui, eu duplico, e eu aumento isso um pouco para que possamos ver nosso carro. Isto está a funcionar muito bem. Ok, então o que eu vou fazer é fazer como um cartão bastante decente. E o que vou fazer de novo é como descartes duplicados. Descarta. Todos eles estão funcionando muito bem. Ok, estão respondendo. Tudo bem, então o que eu quero agora é colocar essas três cartas entre um contêiner e AF, layout automático para eles. Então eles se comportam como um buraco. Ok, então para isso, eu só vou subir o layout automático. E agora vocês podem ver que, se fizermos isso, qualquer coisa acontece, mesmo que todos estejam dentro de um layout externo. Então nós temos o nosso layout automático e agora vemos que qualquer coisa está acontecendo não está funcionando. Não temos nada responsivo aqui. Bem, as cartas em si são responsivas, como você pode ver sobre eles não estão agindo como um buraco. Então, o que está acontecendo? Vamos ver. Vemos aqui que temos como mistura brotamento. Só vou ajustar isto para 40. Então tudo, é um pouco, é semelhante. Podemos ver que podemos ajustar isso, certo? Então este é o espaço entre os elementos. Então, a coisa que queremos é que esses elementos pés em todo o pico, todo o espaço. Então não somos mais um. Isto, você vê aqui, se nós aumentarmos estes brotos, os elementos estão saindo ao ar livre nossa forma principal. E então, para isso, o que queremos? Em vez de ser apoiado os elementos, o que queremos é o espaço entre eles. Então agora você pode ver que isso agora está definido como automático. Então agora os elementos vão tomar o, este espaço, este espaço que temos três. E isso não vai nos permitir, para mudá-lo. Podemos apenas definir isso novamente para um valor e , em seguida, vai ser como 20 pixels aqui e 20 pixels lá. Mas se quiséssemos sair, viemos aqui para fazer as malas em vez de, mas partimos para o espaço entre elas. E agora o que vai fazer? É efetivamente definir o espaço entre os elementos. Mas você vê que os próprios elementos, eles não são responsivos. Por que é isso? Vamos ver o que está acontecendo com os azulejos. Ok, nós vemos quando selecionamos o estilo que ele disse para se encaixar, ok, então nós vamos mudar isso em todos os elementos, um conjunto, este. Então vemos o que está acontecendo. E nós vamos mudar isso para hackear conteúdo, ok? E podemos ver que está fazendo coisas estranhas. Então vamos desfazer e, em seguida, vamos definir a mesma coisa que antes. O contentor de campo, está bem? Vimos que não alteramos o, isso é definido para uma largura fixa para que você possa ver que podemos redimensioná-lo. E os outros vão se adaptar em altura e largura para o, para, para, para, para escolher o espaço disponível. Está bem. Então esta, vou desfazer outra vez. E nós vamos colocar todos eles para se sentirem contentores. Certo, então agora temos vida. Eles estão enchendo o recipiente e o que está acontecendo aqui é que, sim, agora eles estão se comportando como eles deveriam se comportar. Imagine que você quer mais entre esses elementos. Então a única coisa que você tem que fazer é ir em frente e bombear, ok? Então, como você pode ver, é um pouco complicado estar brincando com um espaço entre eles. Então aqui nos elementos psi, coloque estes dois recipiente f_0 e você pode brincar com ele. Então, por exemplo, você poderia querer assim na largura do punho, como algo assim. E esses vão ser responsivos. Então este não vai mudar quando eu, quando eu movê-lo, mas o resto deles vai ser responsivo. Depende do, o efeito que você está procurando. Ok? Então, se você quer que essas três cartas sejam as mesmas, esta é a maneira correta de fazê-lo. Deixe-me apenas colocar isso em vez desta largura para sentir recipiente novamente. Ok? Então eles se comportam como responsável. Outra coisa importante aqui a ter em conta é, como você pode ver, se eu fizer este elemento super, super grande, esses elementos, ficar aqui. E se eu quisesse que eles aumentassem, aumentassem os suspiros automaticamente? Em vez de aqui conteúdo booleano hackear, fazer sim, colocar sentir, recipiente de taxa. E o que ele faz, é, isso vai tentar procurar todos esses n. Podemos colocar a mesma coisa aqui no contêiner Philly. E, e agora, se eu só fiz isso, você pode ver que isso é bastante responsivo. E você sabe, ele vai escolher a altura do elemento maior. Ok? Então, cabe a você. Como você quer trabalhar? Então temos visto de tudo, como, como fazer como a partir de um simples botão com apenas um simples auto-layout aqui com outros layouts aninhados para a nossa dica e nossa dica de ferramenta. E aqui temos uma versão mais complexa e temos trabalhado com a forma como essas palavras fluidas de contêiner, hackear conteúdo funciona. Como o conteúdo é que se todos um, que aumenta o seu tamanho em altura ou altura ou largura e largura, largura fixa e também, estes pacto e um espaço entre inversões. Ok, então vamos pular para a última vez e exercício final aqui. 3. 3 responsivo: K. Então nesta parte vamos ver estes, como fazer este design responsivo. Vimos no anterior, na introdução. Como você pode ver o menu quando se trata de ponto, ele se comporta como uma versão móvel. E você pode ver que o texto está adotando e as imagens são, são adotadas em e também. O, essas imagens lá em baixo são uma espécie de fazer um ponto de interrupção talvez seja para um saturado. Mas você entendeu o ponto certo. O que estamos a tentar alcançar estes objectivos. No mesmo ponto, eu gosto de ver você, eu gostaria, você ver isso aqui. Você vê que nós temos como um menu responsivo também. E então ele breakpoints vínculo. E depois temos o nosso menu de hambúrgueres. Ok, oh, nosso ícone de hambúrguer ali. Então, como fazer isso? Ok, então eu vou apenas duplicar isso. E, e isso vai destruir ou tudo o que eu fiz aqui mais ou menos. Ok. Então eu não tenho mais nenhum auto-layout. E aqui eu tenho um layout automático, o intervalo da mídia, tudo. Não vou fazer tudo do zero. Quero dizer, estes são textos normais. Estes são tudo é tipo de impulsos regulares, os quadrados, ícones textos. Então você já sabe como fazer isso. Então eu só vou escolher essa cor para quatro lá. E o que temos aqui é o plano de fundo para o menu e ícone e texto regular. Você pode vê-lo aqui. Ok, então para isso, o que eu vou fazer para fazer este menu selecionar todos os itens, não, não o fundo, apenas os itens. Lembre-se de que você pode simplesmente arrastar, selecionar tudo e, com a tecla Shift desmarque o elemento desejado. Então agora você vê que temos tudo selecionado. E novamente, o que queremos que este clique com o botão direito do mouse, Adicionar layout automático ou mudar a. E nós temos o nosso auto-layout lá. Ok? Então aqui temos visto que você pode controlar o espaçamento entre os elementos por padrão, eu vou definir esses dois. Eu não sei. 72, que é um múltiplo de oito e é bom para mim. Vou alinhar isto ao centro. E você pode ver que o texto está alinhado a, nestes layout automático, que o texto está alinhado a um dopante que eu queria alinhar ao centro. Certo, então vamos alinhar com o centro. E, ao mesmo tempo, eu quero que esses elementos se comportem que quando estamos esticando, esse elemento, todos os elementos um estiramento e ir para o centro. Não, não, não, não vá para a esquerda, apenas, apenas para o centro. Então é por isso que estou colocando isso também. Ok. Então eu vou ter este fundo e adicionar outra saída. Então este vai ser o azulejo. Ok, então nós temos. E agora temos uns oito pixels entre eles. Isto não é importante, na verdade. E temos acolchoados mistos aqui. Ok, é bom. 1919 a 211. Está, está tudo bem. E algo importante que eu quero fazer aqui é quando selecionamos isso, é, eu quero os elementos com. Bem, isso não é importante, mas algo importante aqui é em vez de parte, o que eu quero são os elementos com um espaço entre e você realmente não vê a diferença aqui. E se agora fizermos isso? Nós não podemos notar a diferença nem porque temos esta configuração para conteúdo quente. E se você não tem que hackear, o que significa é que se eu aumentar isso, isso vai aumentar. Mas para este caso em particular, o que queremos é definir todo este cabeçalho como fixo, ok? Para ser fixado e fixado à esquerda. Então, quando estamos redimensionando vai ser B à esquerda e os elementos I V vão ser um esticado para fora. Vejamos, algo que não está funcionando aqui. Ok? Então agora, em vez de quintos, temos que colocá-lo encher recipiente. Isso é algo com que você vai trabalhar quando você mudar algo na barra e então você tem que mudá-lo na criança para. Então temos agora, vamos verificar novamente. Temos como um fixo com quatro de cabeçalho, que é algo que queremos. E nossa telha tem um contêiner de campo. Então ele vai manter o espaço no, nos tamanhos nos diferentes lados. E vamos ver como isso funciona. Agora. Você vê que está fazendo isso. Está bem, mas está a manter esta margem aqui e esta, esta margem ali, o que é uma espécie de arrefecer o que queríamos. Mas o que queremos também é ir da esquerda para, e para a direita. Então vamos tentar com a esquerda e a direita. Está se movendo para a esquerda. Então, para este elemento em particular, o que queremos, eu poderia fazer um auto-layout com elemento diesel. Mas para este caso em particular, eu não quero porque eu quero que eles sejam responsivos assim. Deixe-me apenas, então se você ver os elementos estão tomando este espaço e mantendo este espaço. Mas isso é algo que então esses elementos são como, você sabe, como a estima entre eles. E para fazer isso, não podemos fazer isso se colocarmos esses dois elementos no mesmo layout automático. Porque conjuntos de layout automático não acolchoamentos automáticos de para os dois elementos. Ok? Então, neste caso, o que eu quero é fazer um grupo disso em vez de uma saída direta. Então isso vai ser chamado de cabeçalho. Ok? E vamos ver como isso se comporta. Bem, isso parece muito bom para mim, mas isso é algo aqui que falta falta. Aqui eu tenho correção se encaixa maior largura. E em vez de voltar, quero colocar um espaço entre elementos. E vamos ver o que está acontecendo agora. Agora os elementos, como você pode ver, eles são realmente, muito, muito responsivos. Ok? E algo que fiz significa fazer. Algo aconteceu aqui é alinhar esses elementos ao centro. Ok, então nós temos nosso cabeçalho e agora nós temos aqui como um texto. E você pode ver que eu coloquei esta mesa com uma largura fixa, mas com alturas diferentes. Então, se continuarmos a escrever aqui, vai dar-nos outra frase. Mas você vê que isso tinha que dizer que isso não está vindo abaixo desses antecedentes. Então o que precisamos fazer para isso é selecionar esses dois elementos. Novamente no auto-layout. Agora tudo está no lugar. Mas o que acontece se eu fizer isso? Outra vez? Nada é responsivo. Temo que seja responsivo se eu chegar. Agora não é. Por que é isso? Porque, como você pode ver, layout externo mudou o comportamento disso. Então eu quero ser, ter que ir ter como um punho com este elemento. Quero com uma largura fixa. Ok? Então, para este elemento, eu vou selecioná-lo e eu vou vendê-lo para vendê-lo para corrigir largura. Uma vez que o nosso auto-layout já tem aqui um preenchimento para o formulário à esquerda, nós estamos indo, temos que fazer alguns ajustes aqui. Então deixe-me colocar cento e cem. E então eu vou apenas adapta é ajustado manualmente. Ok. E isso, e isso, tudo mudou novamente aqui. Bem, OK. Então isso pode, então eu quero que essas margens estejam na saída. Então algo estava errado aqui que estava empurrando. O DevOps estava, estava empurrando. Ok. Então, se eu fizer este nada responsivo ainda, mas agora se este elemento em vez de largura punho precisa estar no recipiente de campo. Então agora podemos brincar com, com, com este N. Se fizermos isso, nada acontece de novo, porque temos que mudar isso para. Não está a funcionar neste contentor de largura, está bem? E agora está funcionando UC, então ambos os elementos precisam ser configurados para preencher o recipiente, ok? E este elemento para a largura do punho e, em seguida, tudo à esquerda. Às vezes vai levar um pouco de ida e volta e vir aqui para Fisk teve Cortes o que você quer alinhar as coisas para a esquerda, para a direita, esquerda e direita. Ok, então para este caso em particular, queremos estar alinhados à esquerda e à direita. Então, quando recitamos isso, é, como você pode ver, está funcionando, mas não fizemos isso com nosso cabeçalho, então precisamos colocar esquerda e direita. Então esses são os caixotes. E o que ele faz é que quando você redimensionar seu quadro vai fazer os elementos a serem redimensionados da esquerda e da direita. Então leva o buy-in que você tem e, em seguida, ajustado para isso, vemos que nosso cabeçalho está trabalhando em, nosso menu está funcionando. E e, e você observe que a notificação está funcionando. Ok. Então eu vou apenas adicionar o s, Esta foto, um par de pixels aqui. E estes são textos simples. O que eu costumo fazer é fazer tão bem como um layout automático deles. E eu vou falar sobre o padrão alinha tudo à esquerda. E o que vamos fazer é entrar aqui e alinhá-lo ao centro, ok? E o espaçamento, o espaçamento entre os elementos onde eu quero esses oito pixels. E eu só vou trazer isso um pouco acima, digamos 488, é 46. Ok. Então temos nossa imagem aqui. Eu só vou ajustá-lo para o tamanho e está definido para sentir. Então vamos ver como essa imagem se comporta. Quando nós, a IA se comporta bem, vemos que tudo está se movendo, mas nosso teste não está. Então, o que vamos fazer aqui? Vamos colocar isto em vez de alinhados à esquerda. Você vê que o texto está ficando à esquerda. E tornou-se estes, estes espaços entre aqui e não está se movendo. E queríamos nos mudar para o centro. Então, nós vamos apenas para entre estes dois, o remetente, ok? Então, agora, se o removermos, você vê que é soberbo. E fazer o quê, o que queremos? Ok. Bem, isso é só uma foto. Este Dido, nada chique aqui. Algo que eu quero fazer, é fazer um auto-layout com estas três imagens aqui. E bem alinhados no centro. Eu só vou me alinhar porque eu tenho movido meu filme IV Maya vale tanto isso. Ele não tem mais uma largura normal. De qualquer forma. Está, está tudo bem. E esses elementos, eu quero fazer um layout automático com eles também. Só porque sinto vontade de continuar praticando como posicionar elementos aqui. E você pode ver, e você pode, isso é ótimo para controlar seu espaçamento. Como eu disse. Sei que me repito muito, mas essas coisas são importantes e vejo muita separação aqui. Então eu seleciono esses dois elementos e eu vou fazer outro outlier fora. Por quê? Porque eu quero controlar esse Bayesiano em particular e eu quero menos espaço aqui. E digamos que eu só quero oito pixels, ok, então esse espaçamento é oito e daqui até lá é 24. Ok, porque nós temos, nós temos isso em outro auto-layout. Vou alinhar estes elementos ao centro também. Então, quando redimensionamos nosso mandril é permanece, fica no centro. Então eu vou fazer isso. E por isso vou fazer o mesmo. Vou levar para o centro. Então, quando os organizamos, quando redimensionamos nosso, nosso trabalho, vamos ver como isso se comporta. Tudo está ficando no centro e isso é, isso está aumentando. Sua, sua, sua altura, que é legal. Então nós, o que nós queremos aqui também é que este elemento é começar a ser redimensionado como, assim quando nós torná-los menores. Ok? Então, para isso o que queremos, é, nós entramos nos azulejos e você vê que ele tem se encaixa com. Então, queremos preencher para mudar isso para sentir recipiente. Ok. E o lado da alimentação, queremos que eles também não sejam uma altura de rosto, mas para encher o recipiente. Certo, então temos tudo em contêiner de campo e contêiner de preenchimento. O que acontece se redimensionarmos isto? Vamos ver o que está acontecendo e nada acontece. Por que é isso? Vamos ver o que está acontecendo lá. Certo, em vez de voltar, vou ficar grande como um espaço entre eles. Então, esses elementos levam todo o espaçamento. Inacreditável, está bem? Eu dentro deste elemento. E agora você vê novamente que nós temos o conjunto de abrangência para auto. E aqui temos o nosso feixe de elementos para o centro, o que é legal. E, e o que queremos aqui, é manter a esquerda e a direita até o final da página. Então, em vez do centro, vamos colocar estes dois à esquerda e à direita. Vamos ver como isso funciona. Vemos que os elementos estão se movendo, o que é bom, mas eles não estão escapando. Então, quando selecionamos novamente o elemento, você vê quando, quando você, quando você tributar algo, próxima vez é uma espécie de mudança. Então, para isso, vamos definir isso para sentir recipiente em vez de fixo. Sinta recipiente e Finkel Dana, tudo agora está configurado para sentir recipiente. Então, se mudarmos isso, agora você vê que é totalmente, totalmente, meio que totalmente responsável. Responsivo, desculpe. Ok. Tudo está super suave agora e tudo está indo super bem. Então o que eu vou fazer é sim, duplicar isso e fazer uma versão móvel dele. Então, para isso, o que eu faço é sim, dois lados todos os 380 ou o que seja, esse tamanho é perfeitamente bom. Ok. Muitas maneiras enamoradas. Como você pode ver, esses textos são muito grandes. Bem, não para ser comprado. Sim, bem, são duas semanas na verdade. Então eu só vou mudar um pouco rápido. Esses 424, isso vai pendurar a mesa indo para baixo para 18, e isso vai ser um passo para baixo para 14. Então temos mais. E vou alinhar isto a um centro. Estes, eu só vou ajustá-lo lá. E estes 40 vão estar aqui. Então nós temos isso. E para o menu, o que vamos fazer, ele apenas abrir um pouco nosso, nosso como dizer, nosso cabeçalho. E eu vou apagar todos esses elementos. Eles querem, e o que nós queremos? Mais fácil de inserir. E sim, um, estes dois para ser um pouco aqui, já que temos este espaço entre aqui é se, se eu adicionar elementos, eles vão ser, você sabe, como dizer barra oito uniformemente. Então, para este caso em particular, eu só quero entrar. Oh, não este. Quero ícones de penas. E vamos preparar um menu. Legal. Vou agrupar isto. E eu só vou trazer isso para cima, colocá-lo aqui, agrupá-lo, e apenas mudar isso para branco. Não há muita complicação aqui. E eu só vou deletar esse bac. Ok? Então, já temos o nosso cabeçalho. E agora vamos apenas fazer estes menores. Então tudo se encaixa no C 240. E essas imagens, em vez de, este é um recurso agradável. Em vez de alinhá-los na direção horizontal, vamos colocá-lo na direção vertical com layout automático. E podemos fazer isso maior e depois expandir essa seção. Podemos até torná-lo mais amplo dado o todo, dado algo assim. E vamos alinhar tudo ao centro para que os campos sejam melhores. Então temos a nossa versão móvel. Dan também. E deixe-me apenas renomear estes para celular, mas eu vou colocar móvel também. Então e desktop também, porque eu já tenho os mesmos nomes aqui em. Eu queria mostrar-lhe este plugin. Então vamos ver como isso funciona. Bem, isso não está funcionando. Então, o que queremos aqui, é em vez de metade do conteúdo. Sim, eu fiz isso aqui e layout automático. Na verdade, não precisamos dele. Oh, não. Sim. Nós não precisamos dele. Sim, nós fizemos isso. Isso é o suficiente. Então, o que queremos deste tamanho destes textos lá fora? Eu cometi este erro de fazer o assassino dizer auto-layout do fundo e a densidade é, isso não é necessário em tudo. Então o que queremos agora é nas restrições, colocar sua imagem de fundo para o feixe, para a esquerda, para a direita. Então, quando o tornamos maior, você pode ver as, você sabe, as imagens e ficar maior. Então é isso que queremos. Então agora se vamos ver se funciona. Sim, está funcionando. Mas essa equipe não está funcionando. Quero dizer, eu tenho que aumentar essa quantia para outro pai. E quando chegamos a mais fio, então veio um pouco aqui. Existem maneiras de tecer layout automático. Poderíamos fazer estes mais eficientes. Quero dizer, quando, quando estes quando estes componentes, não é tão alto, que leva elemento surge. E então o quando, quando, quando isso acontecer, isso vai para baixo. Mas para este elemento em particular, eu não, eu realmente não preciso que ele acabou. Eu quero mostrar a vocês como um blog funciona e como fazer uma espécie de designer responsivo aqui em Fiqh. Com raiva, isso funciona muito bem. Há este plug-in chamado responsivo. Seu uso é bastante simples. O que você faz? Você seleciona o, os projetos responsivos que você tem e selecioná-los como quadros de entrada. Esses vão ser seus, seus, seus projetos principais, digamos. E então precisamos de um quadro responsivo. Então eu só vou pintar aqui uma moldura. Eu só vou colocá-lo em 111000, cento e quarenta e novecentos ódio. Bem, o calor vai ser como a versão móvel para que possamos ver o que está acontecendo. E este vai ser o nosso design responsivo. E nós apenas adicionamos seu quadro que selecionamos o responsivo que adicionamos na bomba quadro responsivo. Então nós já temos aqui que eu projetei, mas isso vai funcionar. Vamos ver. Então eu vou fazer um pouco maior essa parte. Então agora o que fazemos isso, podemos ver que tudo está mudando. Está a ver, está a fazê-lo, está bem? E podemos ir até a versão móvel deles e tudo está se comportando como esperado. Então, esta é uma maneira muito legal de fazer designs responsivos lag. Claro, talvez outro ponto de interrupção entre esses dois seria desejável para que o menu de hambúrgueres não aparecesse tão cedo. Mas, e você sabe, talvez isso não precise fazer chiclete tão cedo. Nenhum dos dois. Mas você tem ADI, certo? Espero que tenha aprendido todas essas coisas sobre fezes. Nós dividimos o conteúdo, o espaço entre os elementos e tudo isso. Vemo-nos na fase final deles. 4. Saída quatro: Obrigado por chegar até o fim. Espero que tenham gostado destes tutorial rápido. Bem, no final, havia uma versão padrão pouco dele. Mas este novo auto-layout falso Mao tem um monte de opções e é um pouco complicado. Então você tem que trabalhar um pouco que fizemos para adduzir a dois realmente, para realmente superar isso. Por isso, encorajo-vos a fazer alguns dos exemplos que vimos aqui. Então eu realmente acho que é uma boa prática fazer essas dicas de ferramenta e um botão e, em seguida, ir para os carros e tentar torná-los um responsivo e fazer o comportamento que você quer ter. E se você tiver alguma dúvida ou seu, ou seus protótipos são RN funcionando ou seus layouts automáticos são e funcionando como esperado. Gás. Deixe-me saber nos comentários e eu vou tentar ajudar. Então, muito obrigado. E sim, se você estiver interessado em mais cursos como estes ou tutoriais como este, basta seguir-me e eu vou tentar obter você atualizá-lo, para dar-lhe atualizado com novos tutoriais. E também, se você estiver interessado em ver algo que eu não tenho nos tutoriais relacionados a 50K Mao ou ao design. Apenas deixe-me saber e eu vou tentar fazer um tutorial se, se é tratável. Então, muito obrigado por ver este tutorial. Tchau.