Dominando o Figma: a magia do layout automático

1. Introdução: Ok, então 20 e sábio, há três principais pontos de verificação que eu encontrei na minha carreira como um designer de interface de usuário até agora. O primeiro foi a introdução do esboço, um totalmente dedicado interfaces de usuário adequadas. Eu disse que o segundo estava chegando de Figma, outra ferramenta de design de interface de usuário. E há uma história completamente diferente sobre como eu mudei de Figma e y. mas número três, o terceiro ponto de controle foi a introdução do layout automático na Figma. Eu amo Auto Layout não só porque é conveniente, mas porque é recorta um monte de bagagem extra do núcleo ofício de projetar uma interface de usuário. E dá muito espaço para experimentação. Quando você usa o layout automático, não precisa se preocupar em alinhar e redimensionar. Você não tem que se preocupar em criar espaço. Quando você tem que colocar algo no meio do seu design, você não precisa se preocupar com alongamento e esmagamento de elementos cada vez que você tem que ajustar algo, você não precisa se preocupar com espaçamento consistente quando você está duplicando coisas como em uma lista ou algo assim, e muito mais que você vai descobrir como você adotar auto-layout em seu fluxo de trabalho ou um checkout meu fluxo de trabalho mais tarde no curso. Este curso é para qualquer pessoa que tenha apenas visitado falso my.com e criou uma nova conta gratuita ou não é experiente profissional e tem sido sobre a cerca sobre layout automático ou tentou uma vez e fundou um pouco confuso, Você sabe, só um pouco difícil de envolver sua cabeça em torno disso. Uma boa interface de usuário que, que abstrai complexidade por trás da simplicidade e do painel de layout automático em Figma é um ótimo exemplo disso. É uma faixa fina de cerca de 100 pixels de altura, e armazena magia absoluta. Na primeira metade do curso, você vai me ver explicar a necessidade auto-layout e mostrar-lhe que é um uso muito básico. Em seguida, vamos passar para criar layout incrementalmente, incrementalmente complexo. E no processo, você também aprenderá sobre componentes, instâncias e um pouco sobre variância. Depois, tendo dito tudo o que há sobre layout automático, vamos direto para os hábitos, projetos do mundo real, e então juntos vamos construir componentes de interface de usuário relativamente complexos usando terra automática, há uma chance de que você possa encontrar as duas primeiras lições do curso, que é sobre botões, um pouco básico demais. E essas lições que eu falo sobre os grupos e quadros e a diferença entre eles e como usar o layout automático é uma grande melhoria em relação a eles. Se grupos, quadros e um pouco sobre o básico do layout automático é algo com o qual você já está familiarizado. Você pode simplesmente passar sobre as duas primeiras lições com tudo isso fora do caminho, a única coisa que resta para discutir é o projeto e a configuração, que eu vou fazer rapidamente no próximo vídeo. Então, vejo você então. 2. Atualização automática do layout: Ok, então este é um componente de layout automático que você fará mais tarde na classe. E vou selecionar isso. E assim que eu selecionar isso, você pode ver à direita que não havia nada agora, porque assim que eu selecionar isso, você pode ver algumas opções de layout automático aparecerem. Agora eu tirei algumas capturas de tela da classe, os vídeos que assistiremos mais tarde na linha com a antiga interface do usuário Antoni. E vamos usar essa captura de tela, essa pequena interface de usuário de layout automático que aparece para comparar e contrastar entre a atualização e a interface do usuário que estava lá anteriormente. Tudo bem, então vamos começar. A coisa número um a notar aqui é que este pequeno alinhamento quadrado. Agora você estará aprendendo, como eu disse antes, mais tarde na aula, o que isso significa. Agora, o que acontece na nova interface do usuário é que assim que você clica em algo que tem em terra aplicado a ela, você vê diretamente esse alinhamento ao quadrado. Agora, mais cedo na interface do usuário que estava lá anteriormente, você tinha que clicar nisso e, em seguida, essas opções apareceriam. Então essa é a diferença, número um. A segunda coisa a notar é sobre o preenchimento. Agora, na interface do usuário anterior, costumava haver apenas uma pequena caixa de entrada para adicionar preenchimento e você saberá o que é preenchimento, como, eu disse mais tarde na classe e agora na nova versão, vez de apenas um pequeno tipo de caixa de entrada, o que você tem é um pouco simplificado. Você tem seu campo de entrada de preenchimento horizontal e seu campo de entrada de preenchimento vertical. E você também pode dividi-lo em acolchoamentos independentes. Preenchimento para a esquerda, preenchimento para a rebatida superior para a direita e o botão, o que realmente tornou as coisas um pouco mais limpas. A outra coisa importante a prestar atenção a isso se moveu. Agora, se eu selecionar isso, você pode ver que nesta área bem aqui você pode ver conteúdos fixos e abraçados. Todas essas opções que são chamadas de restrições de redimensionamento, que aprenderão novamente mais tarde na aula. Ele foi movido para aqui. Enquanto na interface de usuário anterior, todas essas opções realmente apareceram aqui sob um pequeno local de interface do usuário redimensionando e agora ele se mudou para aqui. Ok, então isso é tudo o que são como todas as atualizações da interface do usuário. E agora você pode seguir em frente com a classe. E enquanto estou falando isso, esqueci uma coisinha. Agora, mais cedo você usa para ter o espaço entre e embalar sob esta opção, como eu disse antes, no novo, você pode encontrá-lo ainda sob uma opção pop-up clicando aqui. E você pode mudar entre o espaço, entre um impacto. E agora eu sei que todas essas novas opções são, se você nunca lidou com o layout automático antes, todos esses soam estranhos para você, mas você mais tarde na classe entenderá isso. E acabei de fazer este pequeno vídeo apenas para mostrar as atualizações porque não houve nenhuma alteração central no layout automático, apenas alterações na interface do usuário. Então, espero que esteja pronto para a aula. E acho que te verei no próximo vídeo. 3. Projeto e configuração: Tudo bem. É hora de mostrar os arquivos que usaremos nesta aula e também mostrar o que você enviará ao Skillshare No final desta aula. Então vamos fazer isso. Dentro dos recursos que você baixar, você encontrará dois arquivos Figma, finalizados e iniciais. Quero que carregue os dois arquivos na sua Figma. Se você tem o aplicativo de desktop Figma instalado aqui como eu tenho, e você pode baixar o aplicativo de desktop Figma a partir daqui. Você pode pesquisar no aplicativo Google Figma Mac ou aplicativo Figma Windows. Você sabe, é tudo o mesmo que você pode baixar o app para macOS ou Windows a partir daqui. Se você estiver usando o aplicativo de desktop Figma, basta clicar diretamente, clicar duas vezes em qualquer um desses arquivos para abrir no aplicativo Figma, ou você pode clicar com o botão direito do mouse e ir para Abrir com entradas Figma e abrir ambos os arquivos. Mas se você estiver usando o Figma no navegador, você pode entrar em sua conta e criar uma conta Figma, se você não estiver ciente, é muito fácil. Tudo o que você precisa fazer é ir para figma.com e clicar em Cadastre-se. E a melhor maneira é se inscrever no Google. E depois de apenas dois ou três cliques, você vai acabar com algo assim e toda a interface do usuário Figma. Então, quando você está dentro da interface do navegador, se você está na interface do navegador, você pode simplesmente arrastar os dois arquivos para o navegador e ele vai importar ambos, você sabe, para o seu Figma. Então vamos esperar que eles terminem a importação, grau ambos os arquivos terminaram de importar e dentro do seu Figma, você verá o arquivo acabado e o arquivo inicial. Você estará trabalhando no arquivo inicial ao longo deste curso. E o arquivo acabado é apenas para sua referência ou, no caso, digamos que fazemos algo juntos em um vídeo e mais tarde em um vídeo diferente, mas precisaremos do que criamos anteriormente. Mas por qualquer razão, por qualquer razão, você não o criou junto comigo. Então você pode pegá-lo do arquivo acabado, colar no iniciador em um local apropriado e continuar com a classe. Ok, Agora vamos olhar dentro do arquivo inicial para abri-lo e basta clicar duas vezes sobre ele. A primeira coisa que eu quero falar neste arquivo é que esta página chama mosaicos e cores. E por qualquer motivo, se você não estiver vendo isso e certifique-se de expandir as páginas Ver clicando direito aqui para que você possa ver todas as páginas. Então a página sobre a qual eu quero falar, a primeira coisa que eu quero falar, falar sobre como telhas e cores. Agora, para que possamos nos concentrar exclusivamente no layout automático e os componentes de interface do usuário que fazemos com ele e não se preocupar com as cores e quais tamanhos de fonte usar. Eu já defini todos eles para você nesta página, a página de estilos e cores. E também você pode olhar no painel direito em Figma quando nada é selecionado, todos os estilos que eu defini para você. E se encontrar estilos globais e cores e Figma é bem simples, acredito que já sabem como fazer isso, mas para aqueles que não sabem, aqui está um minuto para baixo de como fazer isso. Agora vamos dizer que assim como essas cores, se eu clicar nele e tipo de ver um código hexadecimal, eu vejo um nome personalizado que eu dei a essa cor, digamos, como essas cores, eu quero criar um novo túnel de cores globais que pode ser usado em qualquer lugar neste arquivo. Para fazer isso, eu posso simplesmente pressionar R no meu teclado ou clicar na ferramenta de retângulo e desenhar um retângulo de qualquer tamanho. E então eu vou dar a este retângulo uma cor aleatória, certo? Então, vamos com esta cor, está bem? Agora, se eu selecionar este retângulo, você pode ver que ele mostra um código hexadecimal desta cor, que é 362, 565. Agora, se eu quiser converter esta cor para um estilo global, tudo que eu posso fazer é clicar neste ícone bem aqui que diz azulejo, e então clique neste ícone de adição que diz Criar estilo. E uma vez que eles clicarem nisso, ele vai me pedir para dar um nome e eu vou chamá-lo de cores temporárias já que eu estou usando isso para demonstrar a você, para demonstrar o processo para você. E então eu vou clicar em Criar estilo. E uma vez que eu fiz isso, você pode ver que a cor Tim se torna visível e o painel de estilos globais à direita quando nada é selecionado. E se eu quiser usar este estilo novamente, é esta cor novamente, tudo que eu posso fazer é clicar aqui e, em seguida, escolher a cor temporária classificada a partir daqui e pode ser usado e reutilizado. E se eu mais tarde este site para alterar o valor da cor temporária fazendo, fazendo isso, clicando nele, em seguida, clicando em Configurações e, em seguida, ajustando a cor novamente. Ele será afetado em todo o arquivo, onde quer que essa cor seja usada. Agora esse é o processo para criar um bloco de curso global. E já que isso foi temporário e não precisa mais, vou escolher entre os estilos, sabe, garantir que nada seja selecionado e seja visível. Você pode clicar nele, clicar com o botão direito do mouse sobre ele e, em seguida, clicar em Excluir estilo para se livrar dele. E da mesma forma, e da mesma forma, como criamos o estilo de cor. Se você quiser criar um têxtil como este que eu criei, tudo você precisa fazer é pressionar T no teclado, ou você pode selecionar a ferramenta Texto e digitar algo aleatório. Ou você sabe, você pode digitar algo não aleatório, eu não me importo. E então você pode ir em frente e dar-lhe estilo de fonte aleatório. E agora você pode ver como Tau é a linha, mas eu não quero isso. Vou em frente e dar-lhe um estilo de letra aleatório, o que eu quiser. E então para convertê-lo em um estilo em um têxtil, eu clico neste ícone novamente, clique em mais, e então eu vou dar-lhe qualquer nome que eu quiser. Eu vou dar-lhe textos temporários, É nome do bloco e então eu posso ir em frente e criar um têxtil e, em seguida, ele será visível e isso pode ser reutilizado novamente em qualquer lugar no arquivo inteiro. Tudo bem, então vamos nos livrar disso. E esse foi o seu resumo rápido de como criar uma cor, estilo e um têxtil. Agora, uma vez que você tenha seguido ao longo e terminar a aula, você terá agora no início do seu arquivo inicial estará vazio. Cada página você estará essencialmente vazia. Então, no final desta classe, dentro de seu arquivo inicial, você terá todos os componentes de interface de usuário que é prisão dentro do arquivo acabado. E como um projeto final, o que você pode fazer é isso. Você pode criar uma nova página clicando aqui e nomeando o projeto final da página, tudo bem, e então tudo o que você fez, você pode começar a coletá-los em sua página final do projeto. E você faz isso simplesmente copiando, pressionando Command ou Control C e colando no projeto final. Então este drop-down é algo que vai fazer no terceiro capítulo após botões, você sabe, você acabou de coletá-lo aqui pressionando Comando C e Comando V. Agora, da mesma forma, eu posso trazer as outras coisas que eu fiz. E então, uma vez que você tenha reunido tudo, sua página final do projeto será algo parecido com isso. Não exatamente assim, porque eu já usei isso ao meu gosto e você pode organizá-lo da maneira que você gosta, mas vai parecer algo parecido com isso. E o projeto final é apenas uma missão de uma captura de tela, esta página. Então você pode tirar uma captura de tela dele e enviá-lo como o projeto de classe para esta classe. E também nos comentários, certifique-se de copiar este link clicando em Compartilhar. E então você pode ir em frente e escolher qualquer pessoa com um link pode visualizar e, em seguida, copiar o link e enviá-lo como um comentário para o envio que você está fazendo para esta classe. E sim, é isso para este vídeo. Isso é tudo o que vamos fazer. E eu mostrei a configuração e também mostrei o projeto que você é obrigado a enviar para esta aula. E eu vou te ver na primeira lição real desta aula no próximo vídeo. Vejo você então. 4. Uma aula em botões - parte 1: Tenho uma queda por botões bem desenhados. Você não é muito fácil de entender, certo? Mas quando você os acertar ajustando as sombras, os contornos e outras coisas. É simplesmente lindo. Botões também são um pilar muito forte da identidade de uma marca. Veja os botões da Amazon ou Facebook ou twitter e como instantaneamente reconhecíveis eles são. Mesmo fora de contexto, ele pode olhar para um botão e ser como, Sim, isso é Amazon e Facebook. O botão mais simples que podemos fazer é apenas texto simples. Então, pressione T no teclado ou clique na ferramenta Texto para abrir a ferramenta de texto e clique em qualquer lugar na tela e você pode então começar a digitar. Então vamos para a direita, mas em um botão. Agora, lembre-se no vídeo anterior eu descrevi os diferentes têxteis que eu já defini. Então não vamos gastar tempo escolhendo fontes e cores, não neste curso. Eu já fiz todo o trabalho duro para você se você estiver interessado em aprender a escolher cores e fontes. Bem, para ser honesto, é apenas prática. Mas se você ainda quer que eu ensine porque você não tem a minha voz, bem, me avise. Tudo bem, então com isso no lugar, você pode ir em frente e clicar em um têxtil, que são os quatro pequenos quadrados que você vê bem aqui. Podemos clicar nele e escolher entre todos os estilos que já defini para você. Então vamos, por enquanto, com o meio rótulo. Certo, então esse é o estilo do botão. Vamos escolher uma cor para o botão. Novamente, você pode escolher algo daqui ou usar as cores que eu já defini. Para você. Eu meio que tive um pouco de tempo lá, mas você pode escolher os estilos de cores e vamos escolher azul aqui. Tudo bem, então aí está. É o botão mais simples que podemos ter. Vamos arrastar uma cópia deste texto. Você pode ou você pode pressionar Opção e arrastar, ver o que acontece quando eu pressionar opção que existem dois erros agora, que basicamente significa que se você arrastá-lo para fora, ele irá criar uma cópia, vai fazer uma cópia de cada passo do processo apenas para ver como estamos evoluindo ou botão. Agora, este texto aqui para parecer um botão, precisa de uma base. Então vamos desenhar uma base. Ou clique na ferramenta Retângulo a partir daqui, ou pressione R no teclado para obter a ferramenta de retângulo e deixe-me arrastar um retângulo exatamente como esse. Agora visualmente este retângulo está sobre os textos do botão. É por isso que sua cabeça e discernimento. Agora o que eu posso fazer é simplesmente arrastá-lo para baixo como este lado do bastão ou usar o comando de atalho de teclado e colchetes para alterar sua ordem. Então vamos colocá-lo no fundo. Lá vai você. E a próxima coisa que vamos fazer é redimensioná-lo um pouco para que pareça mais um botão. Então, sim, lá vamos nós. Isso parece um pouco como um botão, não é? Certo, estamos chegando a algum lugar. É um bom ponto de partida. Agora precisamos ajustar as cores pouco, o pão é um pouco feio. Se você concordar. Objetivamente, liguei um texto azul em um fundo cinza que é muito feio. Então vamos começar a tentar fazer com que pareça um pouco mais bonito. Então a primeira coisa que vou fazer é deixar o texto do botão branco. E a maneira que eu vou fazer isso é atualmente definido para azul 0 e eu posso pressionar na lista suspensa, escolher o estilo de vinho. Lá vai você. E para a base, vou em frente e fazer a base azul. Que tal isso? Parece um pouco melhor, não é? E a próxima coisa, uma coisa importante que vamos fazer é dar um canto arredondado de seis. Tudo bem? Ok. E como um respingo final de tinta, você pode ir em frente e fazer Obrigado. Clique nos quatro quadrados aqui para escolher um estilo e clique nas sombras dos botões. Esta é a, esta é a sombra que eu já defini para você para que você possa simplesmente clicar nele e é plana no botão assim. E então eu vou buscá-lo. Isso se parece mais com um botão, algo que você provavelmente pode usar na produção, mas não silencioso. Há aqui algumas preocupações que temos de abordar. Então vamos em frente e fazer isso. E antes de abordarmos as preocupações, vamos primeiro ter certeza de que os nomes da camada ou descritivo, tudo bem, nós geramos é honesto. Esqueça de fazer isso e não queremos ser designers assim para E caótico. Tudo bem, então eu vou selecionar este texto aqui e eu vou chamar este rótulo, então é mais fácil entender isso, ok, como um rótulo, e eu vou selecionar a base, a base retangular, e eu vou renomear se você adivinhar. Obrigado. Tudo bem, ótimo. Agora vamos voltar às preocupações que eu estava falando. Botão e uma interface de usuário. Em toda a interface do usuário, um botão é usado em vários lugares, formulários e cartões, e algum tipo de formulários de inscrição e etiquetas de preços, páginas de preços e outras coisas. Que o ponto é que ele não está usando um único lugar, é usado em vários lugares. E o mínimo que podemos esperar de um botão é ser uma única unidade, que é apenas uma coisa e não duas coisas diferentes, uma etiqueta e uma base. Nós não queremos isso. Queremos que seja uma única unidade. E como fazemos isso uma única unidade? E você adivinhou certo? Agrupá-los juntos e como agrupá-los juntos em Figma é muito simples. Nós arrastamos seleções como motored eles e pressione qualquer, ou eu estava prestes a diretamente sob o atalho de teclado. Você pode ir em frente e clicar com o botão direito do mouse em Seleção de Grupo ou simplesmente pressionar Comando G. E agora esta é uma única unidade. Quão legal é isso? Certo? Esta é uma única unidade. E quando você olha para o painel Camadas, há este grupo um e estes dois recitam sob este. Então o que podemos fazer agora é renomear esse grupo e odiar. Criamos nosso segundo botão. O primeiro foi este texto e este como um imposto e obedece à emigração. Legal é isso, mas ainda há uma maneira um pouco melhor de fazer este botão Figma, que não vai exigir um retângulo base separado, e que é usando quadros. Tudo bem, então vamos em frente e desenhar sua cópia do grupo de botões que recriá-lo. Então eu vou apenas ir em frente e pressionar Option. Eu posso segurar Shift para que ele não vá a lugar nenhum. Só fica na linha e eu arrasto uma cópia. Agora vou selecionar a nova cópia que acabamos arrastar e deixar ir até aqui onde diz Grupo. Agora o que eu posso fazer é clicar no menu suspenso e escolher o quadro, exatamente assim. Ok, o conteúdo está em uma moldura. Agora, olhe para a diferença. Veja a diferença nos ícones no painel de camadas. Veja como um grupo olha e perna como o botão, que está dentro de um quadro que blogs. E agora essa não é a única diferença. Eu vou te contar mais sobre isso, mas sim, o botão, o conteúdo está em um quadro agora. E apenas agrupar coisas e, em seguida, selecionar, selecionar quadro no menu suspenso não é a única maneira de seleção de quadros. O que você começa em vez de fazer é quando você tem duas coisas juntos, você pode pressionar o atalho de teclado, Comando, Opção G, reenquadrá-los juntos ou clicar com o botão direito do mouse e clicar na seleção de quadros. Agora eu sei que neste momento cair e enquadrar o som do dia e que se comportam muito semelhantes uns aos outros se você não está ciente das diferenças entre eles, mas apenas espere, siga junto e você vai saber a diferença. Agora, para começar, temos o conteúdo deste botão dentro de um quadro em vez de um grupo. Agora, para os benefícios de usar um quadro em vez de um grupo numero uno, não precisamos de um retângulo base. Ok, então vamos em frente e deletar isso. Conheci o quê, o que, o que aconteceu? Não precisamos disso porque podemos aplicar todo tipo de propriedades como cantos arredondados, cores e sombras para o próprio quadro. Então vamos em frente e fazer isso. Então lembre-se dos mesmos efeitos exatos nos mesmos estilos exatos que é aplicado a esta base de retângulo aqui, vamos em frente e fazer o mesmo com o quadro. Então, para fazer isso, primeiro de tudo, vamos em frente e dar-lhe um preenchimento de azul. Legal. Vamos em frente e novamente, dê os cantos arredondados de seis. Vamos para efeitos e adicionar sombras de botão. Quão legal é isso? Nós nem precisamos de uma base separada porque fomos capazes de adicionar cores e efeitos ao próprio quadro, o que você não pode fazer a um grupo. Ok, agora, apenas como uma última medida, eu vou ir em frente e certificar-me que este rótulo está centrado dentro do quadro. Então, se eu selecionar o rótulo e eu clicar sobre estes alinhados, você vê todos esses ícones de alinhamento que eu posso clicar em alinhar verticalmente, centro ou extensão horizontal ao redor, desculpe. E então eu estou clicando, então eu vou clicar em alinhar verticalmente centro, exatamente assim. E o rótulo se alinhará corretamente dentro do quadro. Agora estes dois botões têm a mesma aparência e o da direita, o que é criado usando quadro é ligeiramente melhor do que o que está à esquerda que é criado usando grupos. Você também sabe a razão pela qual este é um pouco melhor. Certo, agora vamos tentar redimensioná-los e ver o que acontece. Vamos começar redimensionando o botão de grupo. Você vê quando eu faço isso, ok? Ele meio que se demitiu corretamente, mas não tanto. E isso pode ser facilmente corrigido. Então eu vou em frente e selecionar o rótulo, tudo bem, e então eu vou ir em frente e esticá-lo para este canto e estressores para este canto. E eu vou mudar o alinhamento de texto para baixo, ok, e agora quando eu redimensioná-lo, olhe para ele, ele redimensiona corretamente, como um botão deve ser redimensionado. Ótimo, bom. Agora vamos ao botão do quadro e deixe-me tentar redimensioná-lo e você diz que nada acontece. Ok? Agora, quadros e Figma vêm com a opção de definir restrições de redimensionamento. Você pode selecionar qualquer coisa dentro de um quadro e escolher como eles se comportam quando o quadro é redimensionado. Se eu selecionar o rótulo como este, observe que o painel de restrições, esse painel de restrições em, desculpe, que aparece à direita. E isso não acontece, quando eu seleciono algo que está dentro do grupo, digo que não está lá. Mas quando eu seleciono algo dentro do quadro, há um painel de restrição que aparece. Agora este painel de restrições vai ser muito importante. Então vamos em frente e passar algum tempo com esta seção de segmentos UI. Agora, por padrão, ele diz que quando o quadro é redimensionado, mantenha o rótulo à esquerda e na parte superior. Estas duas linhas pontilhadas aqui da esquerda e do topo. Isso significa que quando o quadro é redimensionado figma, vamos manter essas distâncias da esquerda e do topo. Agora, o comportamento que queremos é que quando o quadro é redimensionado, que os rótulos devem permanecer no centro, ok, Agora há duas direções em que você pode redimensionar qualquer coisa horizontal e verticalmente. E agora isso é o que esses ícones aqui significam. Olhe para estes, olhe para estes aqui. Isto é o que significa que quando o quadro é redimensionado horizontalmente, muito deve o rótulo ficar? E quando o quadro é redimensionado verticalmente, muito mostrado os rótulos permanecem. Agora, no nosso caso, uma vez que este é um rótulo dentro do botão, ele deve permanecer no centro do botão. Então eu vou redimensionar este quadro novamente para esta largura normal do botão. E eu vou selecionar o rótulo do botão novamente. E para o alongamento horizontal, para o redimensionamento horizontal, direi à Figma para manter o rótulo do botão no centro. Agora veja como as linhas pontilhadas mudaram. Eles são pequenos, eles são muito, muito, muito fracos. Talvez você não seja capaz de ver isso, mas há essas duas linhas com uma pequena cruz que indica que o rótulo do botão sempre ficará no centro. Então vamos em frente e verificar se funcionou. Vou clicar no botão que é criado usando o quadro, redimensioná-lo. Qualquer sim, ele obedece às restrições de redimensionamento que definimos. Tudo bem, ótimo. Agora não há ninguém em seu perfeito juízo que iria redimensionar verticalmente um botão. Mas só por causa disso, vamos clicar no rótulo. E mesmo quando ele é redimensionado verticalmente agora é topo, olhe seu topo, o que significa que ele vai manter isso como um sentido, mas isso não é o que queremos. Queremos que ele seja centrado também. Então eu vou selecionar o centro para o redimensionamento horizontal e vertical e olhar para o que acontece é que ele permanece no centro. Não é lindo? Se você é totalmente novo em descobrir essas são as coisas que você provavelmente já sabia sobre. Mas de qualquer forma, nada de errado com uma breve atualização como lá. Vamos mudar o botão de texto e cientistas. Vamos mudar o rótulo. Claro, sem botão, a vida real só tem um botão escrito sobre ele. Pode ser algo como, digamos, clique para comprar ou baixar isso e jogá-lo. Eles verão que o quadro do botão não tem respeito pelo conteúdo que está dentro dele. Ok? E o que podemos fazer é, você sabe, sempre que mudamos o comprimento, nossa etiqueta de recuperação mudou e o comprimento muda. Podemos ir em frente e novamente você agora apenas para talvez puxar os botões esticados um pouco e então nós podemos fazer isso. Então novamente. Eu sinto muito. Oh, bem, sim. Faça esta linha do centro e, em seguida, renuncia novamente. E se formos e torná-lo muito pequeno, ele desaparece. Sabe, a coisa é que não podemos antecipar o texto que vai estar dentro do botão, o comprimento do rótulo que está. Então, cada vez que é atualizado e nós fizemos para puxar e apertar os botões para torná-los caber. Eles não fazem. E ouça-me com atenção. Os botões não são redimensionados automaticamente. Ênfase nas AVD. Aqui é exatamente onde o layout automático entra. Tudo bem, no próximo vídeo, vamos fazer o botão final. Agora que fizemos um botão de texto normal, fizemos um botão de grupo, fizemos um botão de quadro. E sabemos que cada um deles é melhor do que o outro. E agora nos deparamos com o problema em que não podemos, não podemos esperar o redimensionamento emoldurado com base no conteúdo. Não podemos esperar que ele redimensione automaticamente com base no conteúdo. E agora você já tem a idéia de onde eu estou indo com isso. Então, eu vou vê-lo no próximo vídeo onde vamos fazer um botão de redimensionamento automático usando sigmas auto-layout recurso. Está bem, vejo-te depois. 5. Uma aula em botões - parte 2: Bem-vindo de volta à segunda parte do design de botões. Tudo está como você deixou, temos a mesma quantidade de botões na tela e adicionar suas mesmas posses. É só que o líder anterior ficou um pouco longo e qualquer coisa mais do que dez minutos não é algo que eu realmente gosto muito. Então decidi dividir esta lição em duas partes. Na primeira parte, criamos um monte de botões. Vimos todas as maneiras diferentes que existem. Vimos os trade-offs e vimos as vantagens de usar um quadro sobre, sobre, sobre, sobre o grupo. Ok, agora, vamos em frente e começar com esta lição. Eu não posso esperar agora como temos feito até agora, vamos pegar uma cópia deste botão quadro agora eu vou ir em frente e renomear este rótulo de volta para botão apenas para, apenas para manter tudo nos leva. E porque nós temos botão, botão, botão membro escrito aqui, e mais tarde no curso teremos algo como onde você pode colocar qualquer texto, qualquer Texans, como o rótulo que você quiser. Mas, por enquanto, vamos deixar no botão. Tudo bem, então eu vou apenas cultivá-lo e arrastá-lo ao lado dele para que eles fiquem bonitos e arranjados. E a próxima coisa que eu vou fazer é ir em frente e pressionar Option e arrastar uma cópia para fora como nós fazemos. Agora. Quando eu clico neste botão aqui, aquele que eu acabei de arrastar, notem esta pequena seção aqui chamada para terra. Você vê isso? - Sim. - Sim. Certo. É isso. Oh, eu sinto muito. Eu recebo um pouco, fico um pouco tirado. Isto, esta coisinha com apenas alguns pixels de altura é pura magia. Ok, agora, você está pronto? Eu vou arrastar isso só isso assinou o autoplay eu sou seção. Você está pronto? Vou em frente e clicar no Plus e bum, é isso. É isso. Este quadro de botão está agora dentro do layout automático. Como é que eu sei disso? Isso é diferente? Vamos olhar, olhar para o ícone nas camadas. Tudo bem, isso é para grupo tipo de quadro, e isso é para auto-layout. E não só isso, não só aquele olhar para isto e quando aperto T e entro nele. E vamos mudar o conteúdo do rótulo. Vamos chamar isso de download agora. E uau, o que acabou de acontecer? Espere, espere, espere. Segure-se e clique, oh meu Deus. Você diz que o botão, o quadro do botão, o botão no geral, isso redimensiona automaticamente com base no conteúdo que está dentro do rótulo. E agora, isso não é legal? Agora com toda a emoção à parte, eu sei que se esta é a primeira vez que você vê isso acontecendo, você não quer me ouvir, só quer brincar com ele e ver como isso funciona. Mas espere, espere um segundo. O que eu queria dizer é que você não tem que passar por todos os passos que eu tive que passar. Você acaba criando um botão e faz um grupo, fazendo um emoldurado agora e então eu vou trazer um layout. Você não precisa passar por todas essas guias para criar um quadro de layout automático. Eu vou mostrar-lhe no próximo vídeo e vamos falar sobre drop-downs. Vou mostrar-lhe como ir diretamente para o layout automático e vou mostrar-lhe os atalhos que, quero dizer, não há muitos atalhos. É apenas uma tarefa para chegar ao nosso layout automático, e eu vou te mostrar isso no próximo vídeo. Mas antes disso, vamos entender todas as diferentes opções que são apresentadas aqui quando o layout automático é adicionado a um quadro. Agora essas duas flechas aqui representam direções. Não vamos precisar disso neste vídeo. Então, tudo bem, vamos passar para o próximo. Está bem. Agora estamos falando sobre coisas que não vamos falar ou precisamos neste vídeo. Mas o próximo é o espaçamento entre os itens. Agora, isso é preenchimento em torno de itens. Vamos falar sobre isso daqui a pouco. E este último é alinhamento e preenchimento. Vamos falar sobre algumas partes dele neste vídeo. Tudo bem, vamos começar com o preenchimento. Agora. O que exatamente é “panning “? Imagine enviar algo, um pacote ou quer saber? Mais relacionável, imagine receber um pacote da Amazon ou qualquer site de comércio eletrônico para usar. Este não é um vídeo patrocinado. Está bem. Então imagine receber um pacote, algo frágil, como um copo ou um vaso ou meu coração, se você não está gostando do curso, Não é apenas diretamente que a coisa que é que você recebe, não é simplesmente colocá-lo diretamente em Uma caixa de papelão, não é? Há algum estofamento adicionado em torno do item real, embrulhos de bolha ou aqueles travesseiros de ar ou jornal, você sabe o que eu quero dizer? Certo? Então, no preenchimento da interface do usuário é espaço em branco em torno de um elemento. Esse elemento pode ser texto ou qualquer elemento de interface de usuário em tudo, como veremos mais tarde no exemplo de botão. Tenho uma olhada nisso de perto. Agora este botão aqui é basicamente composto dos textos, que é o rótulo, o fundo azul e o espaço vazio que está presente em torno deste rótulo. E quanto espaço está em cada lado deste rótulo é decidido pelo preenchimento. Quando eu clico na opção de rótulo e segurar no meu teclado, eu posso ver a quantidade de espaço em cada uma das quatro ciências. Então superior, direita, inferior, esquerda e a ordem superior, depois direita e inferior esquerda não é importante para que você possa usá-los. Eu estou nele. Quarto problemático ou Lauder. Vou lhe dizer em um segundo por que essa ordem importa. Agora vamos brincar com os valores de preenchimento e ver como isso afeta o botão. Ok, então. Se você for aqui onde diz lâmpada automática, você pode entrar onde diz misto. E vamos apenas digitar 12 para apenas em torno de um número que está abaixo de 12. E isso, e agora o que acontece é quando eu definir 12, o preenchimento, o espaço em torno do rótulo, o espaço em que estamos, o rótulo em cada lado, superior direito, inferior esquerdo está definido como 12. Certo, agora vamos tentar algo diferente. Em vez de escrever 12, vou escrever valores separados por vírgula. Tudo bem, então deixe-me escrever 12, 13, 14, 15. E é aqui que a ordem, a ordem superior direita, inferior esquerda entra em jogo. Agora exagerado, 12, 13, 14, 15. Vou pressionar Enter e agora olhar para isto. O topo é 12, Ryan tem 30, tédio, este fundo é 14. Tudo bem, vamos ver. E à esquerda são 15. Então isso é tudo o que é superior direito, inferior esquerdo. E você pode escrever um valor separado por vírgula para ajustar o preenchimento ou o espaço que está em cada lado. Ok, agora, isso não é um preenchimento realista valores tem, vamos em frente e digite alguns bons, valores de botão realistas que você sabe, que equilibra a dívida, cria uma espécie de equilíbrio visual e o botão, então o que eu vou fazer é selecionar o botão no quadro novamente e entrar aqui onde ele fica e misturado e misturado basicamente significa que ele não tem o mesmo valor nos quatro lados. Então vamos em frente e colocar 15, quatro top 32 para classificação 15 para Boston vírgula 0. Não se esqueça de adicionar as vírgulas. E 32 para rir. Vou seguir em frente e pressionar Enter e olhar para isso agora. Tudo bem, eu também posso ir em frente e mudar o texto que está dentro deste botão para, digamos download. Download parece ser um rótulo de botão razoável. Então novamente, olhe para os valores, 1532, 1532, top rank, inferior esquerdo. Tudo bem, ótimo. E é isso. O que quer que você escreva é HIV está dentro do botão como rótulo, ele irá respeitar os valores de preenchimento e o botão, o quadro, o redimensionamento em conformidade. Isso não é ótimo? Agora eu sei que escrever uma lista separada por vírgulas de valores de preenchimento não é algo que todos gostariam de fazer. Quero dizer, eu gosto de ter minhas mãos no teclado e eu posso tocar no tipo. Mas se você é mais uma pessoa visual, você pode clicar aqui neste pequeno, aquele último quadrado. Você pode clicar aqui, entrar e atualizar os valores de preenchimento em cada lado manualmente. Como isso. É assim que parece. Aqui está, aqui está a coisa. É assim que você é Figma uma vez que você faz como as pessoas normais fazem. Mas a coisa que eu expliquei anteriormente, os valores separados por vírgula seria apenas uma coisa de superusuário. Então sim, sim, faça o que quiser. Você pode entrar e ajustar os valores de preenchimento a partir daqui. Está bem, está bem, fixe. Agora com isso, terminamos com a parte mais carnuda da lição aqui, eu vou fazer um pouco de limpeza agora e fazer botão de tamanho diferente se você quiser ficar por perto para isso. Ei, você é bem-vindo. Agora, este botão que temos é um botão de tamanho médio, ok? E lembre-se que selecionamos rótulos barra média, o que significa, que significava fonte de tamanho médio para o rótulo. Então, no geral, este botão é um botão de tamanho médio, mas em uma interface de usuário, você não tem botões de apenas um tamanho. modo geral, haverá um botão grande, um médio e um pequeno. Então vamos em frente e fazê-los. E também você verá como é fácil fazer isso com layout automático. Certo, agora vamos arrastar uma cópia disso mantendo a opção assim. A próxima coisa que vamos fazer é selecionar o rótulo, tudo bem, este texto aqui e mudar o estilo para lançamento do rótulo. Agora estamos fazendo um botão grande aqui. Certo, isso é meio para fazer um botão grande. Que tal escrevermos, escrevermos meio para este. Ok, e eu vou apenas ir em frente e arrastá-lo aqui, bem aqui. Então, novamente, voltando a este botão, eu vou selecionar aqui e alterar o tamanho da fonte, que basicamente significa que o tamanho da fonte para médio é 20, para o maior 24 que eu já defini para vocês. Então eu vou ir em frente e selecionar arco rótulo e você vê o botão apenas cresceu em tamanho. Vamos fazer isso mais uma vez, ok, sem ajustar nada, vou em frente e selecionar Li, construir, lançar e nomear. O botão cresceu um pouco de tamanho. Agora, basta alterar o tamanho da fonte ou a etiqueta, não faz um botão grande. Você também tem que ajustar o preenchimento um pouco para que ele pareça visualmente, parece maior do que o botão médio ou pequeno. Então vamos em frente e ajustar os valores de preenchimento. Agora, vou em frente e entrar aqui. Duas arestas, os valores de preenchimento e não tentar valores separados por vírgula porque eu já fiz isso. E você sabe, só para mostrar como funciona. Então eu vou ir em frente e dar-lhe um 20 em cima e em baixo assim e você pode vê-lo mudando. Ele muda. E então vamos em frente e dar um 48 à esquerda e à direita, assim. Tudo bem, então eu vou colocar aqui e chamar este botão grande. Como é que isso parece? Será um pouco maior? Claro que parece maior. Agora, o próximo, o próximo, precisamos fazer este pequeno botão. Tudo bem, então novamente, eu vou ir em frente e arrastar uma cópia para cima assim. Está bem, fixe. E eu vou em frente e selecionar o rótulo. Selecione um rótulo pequeno. Tudo bem, agora novamente, ver apenas fazer as etiquetas pequenas não faz o botão parecer visualmente pequeno. Você também tem que ajustar o preenchimento. Então eu vou ir em frente e selecionar este quadro novamente, indo para escrever aqui onde ele diz alinhamento e preenchimento, você sabe disso. E eu vou em frente e definir 10 para cima e para baixo. E eu vou em frente e definir 16 para esquerda e direita. E este botão agora é pequeno. Tudo bem, agora vamos mudá-los de volta para botões para que seja mais fácil de ver. E eu vou colocá-los lado a lado para que você venha contrastar a forma. Tudo bem, lá vamos nós. Temos três botões muito bonitos e todos em tamanhos diferentes. Que tal isso? Pode me dar um de cinco ou 80? Ok. Agora, agora, uma vez que tenhamos o objetivo final que estávamos atrás, podemos ir em frente e nos livrar dessas coisas porque é claro que não vamos usá-las. Eles não são importantes. Eles não são tão sofisticados quanto as montanhas de layout automático. Certo, agora o último passo, vamos em frente e transformar esses botões em componentes. Os componentes são uma parte muito útil do Figma. Os componentes são reutilizáveis. Você pode usá-los em vários lugares diferentes tem e você pode ler mais sobre eles e aprender mais sobre eles. E se você nunca ouviu falar de TI, componentes, o que eu vou fazer agora, vamos lhe dar uma idéia bem sólida. E também ao longo deste curso você terá uma idéia bastante sólida de quais componentes são. Então, ok, vamos em frente e transformá-los em componentes. Retorna um elemento em um componente ou algo camada em componente. O que você faz é selecioná-lo e você clica neste ícone direito na parte superior que diz Criar Componente. Vou clicar nisso e ver isto ficar azul. Haverá este ícone adicionado à esquerda e à direita aqui também. Então fique atento a isso. Eu estou indo para clicar Eu vou jogar. Você vê, você vê a diferença? Tudo bem, lá vai você. Basicamente, isso significa que essa coisa é agora um componente. Tudo bem? Então eu vou em frente e fazer isso. Faça o mesmo com o resto destes dois botões. Então eu vou entrar e clicar aqui. Como se estivessem aqui, cliquem ali. Estes são componentes, mas não é isso. O que eu vou fazer agora é selecionar e arrastar e clicar sobre isso, isso, isso, isso, essa coisinha que isso está dizendo é que isso também é uma tira mágica se você me perguntar, mas tudo bem, vamos em frente e clicar em combinado como variância e você verá uma borda azul realmente criada em torno dela. Então eu vou ir em frente e clicar em combinado como variância 1, 2, 3. Lá vai você. Tudo bem, ótimo, lindo. Isso significa que tudo isso. Você sabe o que? Deixa-me mostrar-te. Vamos, deixe-me apenas passar por mais alguns passos e então você vai entender a variância e os componentes melhor. Está bem? Agora, eu não vou pular à frente de mim mesmo e tentar explicar algo abstrato, que é abstrato até que você veja. Então eu vou em frente e você vê que há este menu suspenso para que eu possa selecionar cada um deles. Agora o, cada camada, diz padrão, ok? E, e você pode clicar duas vezes nessa camada e alterar o nome. Então o que vamos fazer é quando isso é selecionado, você vê o botão Iniciar e selecioná-lo para que possamos, podemos criar nossos próprios valores aqui são apenas o par de valor chave aqui. Então eu posso escrever este botão vezes x grande. Posso dar-lhe um tamanho de grande, e isso é completamente arbitrário. Isso é algo que eu estou escolhendo o nome da propriedade, que é tamanho e eu estou chamando de grande. E eu vou fazer o mesmo por este aqui, que são os botões médios. Então eu posso ir em frente e clicar duas vezes e lado direito. Média. Está bem, fixe. Agora eu posso ir em frente e para o pequeno, fazer o mesmo. Eu posso, certo? O tamanho é igual a pequeno. Tudo bem, agora se você está totalmente feito, a única coisa que resta para olhar é como, por que fizemos isso e como componentes e variância se comportam. Está bem? Agora, se você olhar para o topo, esta pequena faixa fina aqui, diz camadas atrás que há uma coisa chamada ativos. Então eu vou clicar nele e você verá componente local e este botão é adicionado. Agora, antes de eu criar o componente, você pode não tê-lo visto. Quero dizer, porque não há componentes, não vimos um componente local. Agora, isso significa que um componente pode ser retirado um ano e colocar qualquer vetor na interface do usuário quantas instâncias quisermos. Tudo bem, e estão todos ligados a isto. Está bem? Agora olha para isto. Agora olhe para, olhe para o que criar tamanho é igual a médio e armazenamento frio e tamanho é igual a pequeno, que é ritual basicamente chamado de recurso variante e Figma faz. Posso selecionar qualquer instância, está bem? Você vê aqui onde diz tamanho grande, eu posso ir em frente e escolher, digamos médio. Tudo bem, então o botão agora é médio, e eu posso ir em frente e selecionar pequeno, e o botão agora é pequeno. Agora isso significa que em qualquer lugar na minha interface de usuário, se eu estivesse criando um cartão e quisesse o botão, eu poderia simplesmente arrastá-lo para fora e vamos salvar o dia. Era um sinal de forma que eu estava criando. O cartão era sobre ciência, então eu posso escrever, me inscrever e então, você sabe, então eu decidi, ok, não, não, eu quero um botão de tamanho médio lá. Então tudo o que posso fazer é clicar nele e escolher o meio, e é isso e tudo funciona. Tão grande e harmonia não é tão bonita. E mais do que isso, já que todos esses botões, todos esses botões pull-down, nossas instâncias disso aqui, todo esse centro da verdade. Se eu fizer alguma alteração aqui, ela será refletida em todas as instâncias. Digamos que, por exemplo, eu não queria o botão apenas alguns dias abaixo da linha e decidir, ok, botões azuis. Eu quero que os botões para olhar cinza para que eu possa selecionar cinza 0 e bam, ele é refletido em todos os lugares. Quão legal é isso? Agora, só para o bem deste curso, é claro que eu gosto de azul, então eu vou em frente e voltar para azul. Então eu vou selecionar todos esses. Vá para esta grade. Diz cinza 0 e azul leve e assim e tudo mais. Então Beta e eu vamos nos livrar de tudo isso porque eu não gosto disso. Ok, então foi isso. Nesta lição, aprendemos tanto como parte dois, e já temos mais de 10 minutos, mas há muito, muito aprendido. Começamos criando botões de texto, e passamos para criar botões de layout automático. E então nós mudamos para criar diferentes tamanhos deles e, em seguida, recombiná-los na variância para que eles possam ser usados em diferentes lugares na interface do usuário. Fizemos tanto, você fez tanto, e também estamos orgulhosos e você pode fazer uma pausa agora. E eu vou vê-lo novamente no próximo vídeo onde nós estaremos intensificando nosso jogo de layout automático e criando um componente um pouco mais complexo. Está bem, vejo-te depois. 6. Criação de um drop: Certo, então os botões foram bem simples. Usamos apenas um ou dois recursos do layout automático, como como criar um quadro de layout automático ou como adicionar layout automático a um quadro. E como definir o preenchimento dentro do quadro irá desembrulhar mais alguns recursos de layout automático neste vídeo. E vamos rapidamente dar uma olhada no que vamos fazer juntos neste vídeo. Então, o que você precisa fazer é ir para dominar Figma-los magia de Ottaway em terminou e clique em suspensos, páginas suspensas logo abaixo botões. E muitas vezes, você sabe, se você não está familiarizado, muito familiar a interface do usuário Figma, às vezes as páginas, é recolhida, então você tem que clicar neste botão aqui, e então ele aparece. E então você pode clicar em dropdown e olhar para isso. Veja como o componente olhar para o elemento de interface de usuário que será projetar juntos neste vídeo é como este é um componente seletor que você sabe que este é o nome que eu dei a ele. Você pode chamá-lo de lista ou você pode chamá-lo de cartão ou o que você quiser. E funciona lindamente. Olha, eu posso adicionar mais disso e então eu posso redimensioná-lo corretamente. Veja como o botão fica sempre na parte inferior. E se eu renunciasse ao seu loci horizontalmente, tudo redimensiona lindamente. Então isso será um pouco de um passo acima de tudo o que projetamos no último vídeo, que eram apenas botões muito normais. Então, tudo bem, vamos voltar aqui e começar a trabalhar. Portanto, certifique-se de que você está dentro do arquivo inicial e, em seguida, certifique-se de que você está dentro da página suspensa. Então clique na página drop-down downs e ele vai ser totalmente vazio porque nós vamos preenchê-lo com um monte de coisas legal auto-layout UI. Ok, agora no último vídeo, você me viu fazer um monte de manobras para finalmente criar um elemento de layout automático. O botão que é, e como eu prometi, você não precisa fazer essas manobras, então há um atalho para isso. Está bem. E eu vou mostrar que vou mostrar para você agora mesmo. Ok, então a primeira coisa que vamos fazer é escrever alguns textos na tela. E como faço isso? Se eu clicar na ferramenta Texto ou simplesmente pressionar D e, em seguida, clicar em uma tela em qualquer lugar e começar a digitar. Agora eu vou digitar, digamos opção, ok, Agora, certifique-se que a opção tem um dos têxteis que eu defini aplicando a ela. Por enquanto, eu vou escolher rotulado grande para ele para que ele se pareça com isso. Isso parece ótimo. Ok, agora para aninhar este e aquele é este texto dentro e, finalmente, no quadro, tudo o que precisamos fazer é ter certeza de que o texto está selecionado e pressionar o atalho Shift mais um, OK, Shift mais a. É dentro e quadro de layout automático. Como é que eu sei disso? Olha, olha, olha para a escrita livre aqui. Olhe para o painel de camadas de ícone e olhe no lado direito, onde a faixa fina de layout automático, a partida vai fina tira agora está ativado. Quão legal é isso? Agora vamos dar o quadro que acabamos de criar, uma cor de fundo, ok, Vamos escolher uma cor dos estilos de cor. Que tal cinza 0, ok, ótimo, e vamos mudar a cor do texto para branco. E como fazemos isso? Basta clicar nos estilos de cores e escolhemos branco. Simplesmente assim. A próxima coisa que queremos fazer é que eles queriam e apenas o estofamento. Agora, se você estiver acompanhando, o que você precisa fazer é dar 16 pixels de preenchimento na parte superior e inferior e 32 na horizontal. Então vá em frente e veja se você pode fazer isso enquanto eu faço o mesmo. Certo, então vamos dar um estofamento de 16 em cima e em baixo, assim. E à esquerda e à direita, vamos dar-lhe um estofamento de 32. A seguir, o que vou fazer é dar a este quadro um raio de oito cantos. E vamos pressionar um oito e clicar em Enter e olhar para isso. E a melhor parte de tudo isso é fazer tanto. Estamos dando espaços estavam dando cores e cantos arredondados e tudo isso como apenas uma única unidade. Quão bonito é isso? Olhe para o painel de camadas. Nenhuma desordem em tudo. É apenas uma única unidade. E agora vamos em frente e verificar se ele está redimensionando corretamente. Ok, então eu vou ir em frente e esticá-lo horizontalmente. E sim é. E lembre-se, ao contrário do botão onde gostaríamos que o rótulo fosse alinhado no centro, queremos que este elemento de interface do usuário tenha texto sempre à esquerda. No entanto, o quadro é esticado em redimensionado agora para garantir que ele está acontecendo. E, a propósito, figma já definiu para a esquerda por padrão, tudo que você precisa fazer é clicar sobre isso, clicar no mesmo quadrado onde você está ajustando o preenchimento. E lembre-se que ele diz não apenas preenchimento, mas alinhamento, alinhamento e preenchimento, o que significa que você também pode ajustar o alinhamento. Então, por enquanto, o alinhamento é central e esquerda. Existem outras opções, três no topo, três no meio e três no fundo. Então, por exemplo, este é o topo e a esquerda e eu vou escolher a esquerda e o centro. Então é isso. E agora, se eu redimensioná-lo horizontalmente, você vê que ele fica à esquerda, como se tivesse sido escolhido na seção de alinhamento aqui. E se eu redimensioná-lo verticalmente, você vê que ele ainda permanece no centro como foi escolhido. E foi dito que foi direcionado para ficar no centro assim e ficar à vontade para brincar com o alinhamento um pouco e conseguir um jeito melhor. Por exemplo, se eu estiver selecionando esse quadro e eu mudar o alinhamento para centralizar, ele se comporta como o botão que ele permanece no centro. Minutos redimensionados. Então, novamente, eu vou ir em frente e selecionar aqui e colocá-lo à esquerda como nós queremos. Você pode, você sabe, como eu disse, brincar se eu mantê-lo no topo e na esquerda e eu redimensionar, ele fica no topo e no lado esquerdo. Sim, isso é muito fixe. Ok, então eu vou ir em frente e definir tudo como estava, onde o alinhamento estava no meio e na esquerda. E eu vou deixá-lo lá. E vamos continuar desenvolvendo nosso elemento de interface do usuário. Agora, até agora, nós só fizemos esta parte de todo o componente, esta parte opção. Nós também precisamos construir o wrapper e perceber que ele vai levar várias dessas opções, que significa reusabilidade, o que significa que vamos converter isso, isso aqui para um componente, esta leitura esta opção duas. E isso vai transformar a camada de texto e vamos mudar o nome da camada de texto, quero dizer, e chamar a e LA o rótulo l. E, novamente, vou selecionar o quadro e convertê-lo em um componente. Você sabe o que fazer. Clique neste ícone bem aqui e bam, é esse componente agora, que significa que eu posso entrar em ativos e puxar tantos de Ed como i1, 1, 2, 3. E se eu fizer a alteração, faça alguma alteração no meu componente principal, como mudar a cor de fundo. Será refletido em todas as cópias até agora, tão bom. Agora vou mostrar um fluxo de trabalho que você vai se encontrar usando uma e outra vez em sua rotina de design de interface do usuário. Eu já, como eu disse, você pode arrastar uma instância do painel de ativos deste componente como este. E há outra maneira de arrastar uma instância. Ele faz a minha opção segurando e arrastando uma cópia do componente principal. E antes, como eu mostrei, se era um retângulo normal ou algo que não é um componente, você pode Opção e arrastar para criar uma cópia dele. Mas se você fizer a mesma opção de ação, arraste em um componente, você arrastará e ocorrerá e observará o painel de camadas, que as ocorrências apareçam com um quadrado girado de 45 graus. Também é chamado de forma, acredito que também é chamado de losango. E veja como o componente principal aparece, mas quatro quadrados empilhados assim. Ok, ótimo. Então, com esses dois componentes, essas duas instâncias do MainComponent fora, eu posso colocá-los aqui. E a próxima coisa que eu quero fazer é colocá-los em uma reprodução automática no quadro. E esta é a rotina que eu estava falando muitas vezes o que acontece é que temos instâncias de um componente e queremos organizá-los juntos, como por exemplo, neste caso queríamos colocá-los em uma lista. Certo, então eu vou selecionar esses dois e pressionar Shift a e ver como é automaticamente colocado dentro de um layout automático de componentes. Então, selecione ambos, pressione Shift a e veja isso. É dentro de um quadro e olhar no painel de camadas está dentro de um quadro. Então eu vou em frente e primeiro de tudo, ler este quadro para algo como caiu para baixo. Está bem, muito fixe. E olha para isto. Como essas opções, essas instâncias desse componente de opção estão dentro de um quadro de layout automático. O que eu posso fazer é pressionar o Comando D e eles serão adicionados automaticamente e o espaçamento entre eles seria mantido muito bonito, bastante consistente porque eles estão dentro de um quadro de layout automático. Então outra coisa que eu posso fazer, que me leva ao o que me leva aoespaçamento entre parte da faixa de layout automático é que você está saindo. Você pode apenas você pode ajustá-lo arrastando e isso muda. Eu acho que o nome é muito tão X auto-explicativo. Seria apenas espaço entre itens, dados, e assinou o componente. E para este, queremos mantê-lo em 10. Então eu vou digitar 10 e pressionar Enter e olhar para isso, o espaçamento entre cada um deles, cada uma das opções é 10. Como, como, como isso vai, quão legal é isso? E a próxima coisa que eu vou fazer é selecionar o quadro e dar-lhe uma cor de fundo de cinza. Então, lá vai você. Agora tem uma cor de fundo. E a próxima coisa que queremos fazer é dar-lhe um preenchimento de 12 em todos os quatro lados. Então, em vez de entrar aqui e digitar 12 quatro vezes, o que eu posso fazer é apenas, eu sou muito velho aqui, pressione enter e o preenchimento de 12, haverá adição em todas as tags. Olhe para isso. Isso é ótimo, não é? Isso é muito legal. E enquanto estamos nisso, o que vou fazer a seguir é dar-lhe um canto arredondado de 12 pixels. Então, 12 Entrar. E agora olha para isto. Vamos para o quão legal parece ser um menu suspenso Listas apropriado. E a melhor parte sobre isso é que eu posso adicionar componentes, adicionar, desculpe, adicionar instâncias de opção dentro da lista. Posso removê-los e a altura e tudo é ajustado automaticamente. Tudo bem, muito bem. Agora, apenas para lembrar que este é um quadro de layout automático e as opções também são criadas usando o layout automático, que significa que você pode aninhar quadros de layout automático dentro de quadros de layout automático, e você não tem idéia do quão poderoso isso é. Vamos olhar para alguns exemplos realmente legais, mais tarde no curso. Mas por enquanto, observe que, se eu redimensionar esse quadro, esse quadro suspenso horizontalmente, as opções não serão redimensionadas. Por que é isso? Agora, se eu selecionar uma opção, se eu selecionar uma das opções dentro do quadro de layout automático, você notará que há esse estresse de redimensionamento que aparece logo abaixo dessa faixa de layout automático. Se eu olhar para as restrições de redimensionamento horizontal, que significa que se ele é redimensionado horizontalmente, ele diz largura fixa, o que nós não queremos. Queremos que ele preencha o recipiente que ele tem visão. Então eu vou clicar aqui e escolher Preencher recipiente assim. E agora você vê que o quadro se estende e preenche automaticamente o recipiente. Há outra opção chamada conteúdo de abraço aqui, o que significa que a opção só ocupará espaço suficiente para conter o conteúdo que está dentro dele, que não queremos neste cenário. Queremos que encha os contentores. Então, vamos em frente e selecione recipiente completo, e vamos fazer o mesmo para o resto dessas opções aqui. Então, selecione todos eles e vá em frente e altere sua restrição de redimensionamento ou as restrições de redimensionamento horizontal para preencher um contêiner. E olhe para isso e se eu redimensioná-lo agora, ok, agora lindamente redimensiona. Agora você pode dizer, por que eu não posso apenas dizer restrições de redimensionamento no componente principal aqui do qual estes são basicamente apenas instâncias de e ser feito. Bem, você vê algumas coisas em instâncias sobre rideable, como a cor de fundo ou, por exemplo, eu posso ir em frente e mudar a cor de fundo desta instância e isso afetará apenas esta instância em particular. Ou posso ir em frente e mudar os detectores que estão dentro, por exemplo, vamos chamá-lo de laptop ou qualquer coisa, você sabe, palavras aleatórias. Então essas coisas são escritas demais. E assim como estes a restrição de redimensionamento também é overwriteable porque não podemos antecipar o contexto em que uma determinada instância pode ser usada em Figma nos dá uma escolha para escolher redimensionamento, restringindo para cada instância individualmente. Agora, novamente, se eu for em frente e redimensionar o quadro, veja como ele renuncia lindamente como deveria. Mas e quanto ao redimensionamento vertical? Como você sabe que a altura deste quadro de layout automático como calculado pelos elementos que detém e o espaço entre cada um dos elementos, que temos definido bem aqui no espaçamento entre os itens. E ele obedece a isso porque olhe aqui, se você clicar no último quadrado e olhar para a parte inferior, a parte inferior, a maioria parte, ele diz pacto, que significa que ele vai calcular e embalar o conteúdo firmemente. E, portanto, se eu redimensionar este quadro verticalmente, você vê que os elementos ainda permanecem embalados, mas eu posso mudar a embalagem aqui de embalado para o espaço entre e olhar para o que acontece. O espaço entre os itens é definido como automático. E se eu redimensionar isso verticalmente para baixo, tudo se espalha à medida que o quadro é redimensionado, reolhar para o uso real do espaço entre a embalagem em um pouco. Mas, por enquanto, vamos reverter tudo à medida que trabalhamos. Certo, ótimo, estamos quase terminando aqui. A próxima coisa que queremos fazer é arrastar para fora e botão componente do painel de ativos. Lembre-se de que este é o componente de botão que são criados nas duas lições anteriores. Então eu vou apenas arrastá-lo para fora e colocá-lo bem ao lado dele. Agora, este é um botão de tamanho grande. Ficaríamos melhor ao lado dele, provavelmente de tamanho médio. Então, sim, eles ficam melhores juntos. E a próxima coisa que queremos fazer é colocar o botão dentro desta moldura. Então, para fazer isso, tudo que eu tenho que fazer é apenas arrastá-lo para dentro assim. E lá vai você. E eu posso dizer isso dentro do quadro porque quando eu arrasto este quadro, olhe para isso, ele também se arrasta ao redor. Agora, este é um cenário muito comum ao usar o layout automático. Muitas vezes o que acontece é quando você coloca algo dentro ou, você sabe, faz uma mudança e de repente percebe que o quadro não está sendo redimensionado. Isso ocorre porque muitas vezes fazemos algumas alterações que resultam nas restrições de redimensionamento para mudar para largura fixa e uma altura fixa. E sempre que encontramos um cenário como, por exemplo, agora a altura não está se ajustando corretamente. Tudo o que precisamos fazer é ir aqui, selecionar isso e clicar no conteúdo do HUD e olhar para isso. Ele só já está dentro dele e novamente o botão. A próxima coisa que quero fazer é que os botões esticem toda esta largura. E mais uma vez, como nos certificamos de que isso aconteça? Nós novamente entrar em restrições de redimensionamento. E agora diz conteúdo de abraço, o que significa que só será grande o suficiente para caber o conteúdo que está dentro dele e fazê-lo encher o recipiente que está dentro. O que temos que fazer é ir, ir aqui e as restrições de redimensionamento horizontais e clique em Preencher recipiente e olhar para isso. Enche a coisa toda. E temos um problema aqui que o botão que o texto dentro do botão não está no centro. E acho que perdi isso. Posso não ter escolhido o alinhamento corretamente. Então deixe-me ir em frente e ver que neste, nestes componentes que eu criei e, claro, Leia, o alinhamento não está no centro, então eu vou esperar, vou selecionar todos os três e garantir que eles são todos alinhados centralmente. E se eu voltar aos menus suspensos, você verá que o texto está agora no centro do botão. Você vê esses trapaceiros dele. O layout automático geralmente acontece. Às vezes você esquece que há restrições, às vezes você esquece o alinhamento, mas eles são muito fáceis de consertar. Como você me viu fazer agora. Está bem. Agora, a única coisa que resta fazer se você me seguir até o arquivo final, é organizar tudo de uma forma que eles se comportem assim. Você diz que mesmo um elemento inteiro redimensionar verticalmente. O botão permanece no botão enquanto a lista permanece em torno dele na parte superior. E mesmo quando eu redimensiono tudo horizontalmente, tudo simplesmente redimensiona como, como um chip. Então você pode ir em frente e tentar fazer isso, replicando esse comportamento se você está caindo ao longo ou você pode apenas fazer o que eu faço, ok, então a primeira coisa que precisamos fazer é separar as listas e os botões agora esses opções, quero dizer, as opções nesse botão, agora essas opções e o botão estão no mesmo quadro. Então a primeira coisa que vamos fazer é selecionar todas as opções e colocá-las dentro de um quadro. E como vamos fazer com isso? Acabamos de limpar tudo, certifique-se de que todas as opções estão selecionadas e o botão não está selecionado. Uma vez que tudo é selecionado, todas as opções são assim. Pressione Shift a. E o que isso vai fazer é colocá-lo dentro, colocar as opções dentro de seu próprio quadro. E eu vou selecionar este quadro, clique duas vezes sobre ele e chamá-lo OPT I ON opções. Ok, entra, ótimo. E agora a próxima coisa que eu quero fazer é selecionar as opções, este quadro aqui, dar-lhe um pouco de preenchimento. Ok, então vamos em frente aqui. Você sabe como dar preenchimento a um quadro de layout automático. Mais uma vez, vou em frente e dar-lhe um preenchimento de 12. Então clique lá para adicionar 12, e é isso. Você vê, agora parece um pouco confuso, mas nós vamos ajustar e ajustar isso um pouco. A próxima coisa que eu vou fazer é selecionar o quadro suspenso mais externo e mudar sua cor de fundo para, digamos cinza para, ok. E este quadro de opções aqui, eu vou ir em frente e definir sua cor de fundo para, digamos cinza. Ok, ótimo. E enquanto eu estou nisso, eu vou ir em frente e dar-lhe um canto arredondado de 12. Ok, ótimo. A única coisa a corrigir agora é o redimensionamento do quadro mais externo. E como acabamos de ver, muitas vezes acontece, pai, a restrição é dita ser corrigida. E tudo o que precisamos fazer para corrigir isso é clicar nele e clicar em HUD condensar. E agora diz claramente visível que temos um quadro mais externo. Temos um quadro incitado que contém opções, e temos um botão bem aqui. Agora, vamos em frente e toda vez que você faz isso, toda vez que você cria um quadro, seu quadro aninhado, É bom redimensionar e verificar se tudo está funcionando corretamente. Agora este botão para redimensionar corretamente, mas este quadro não é. Novamente, como eu conserto isso? Como este quadro ir para a direita aqui e então eu sinto recipiente, ok, ótimo, Agora este conjunto de preenchimento, mas as opções não são. Então eu vou ir em frente e selecionar todos eles novamente e ir em frente e mudar isso para preencher recipiente. E agora, se eu redimensionar isso, você vê tudo quão lindamente os cientistas de corrida não se lembram que é muito fácil ficar frustrado. Em seguida, os quadros de layout automático que os quadros aninhados não funcionam como você os previu também. Mas lembre-se que o que você precisa fazer é certificar-se de que as restrições de redimensionamento estão definidas corretamente. Muito bem, agora para o redimensionamento vertical, vou selecionar a lista suspensa. E se eu olhar aqui, diz “embalado”. E como eu disse, e como eu expliquei anteriormente, o que Pack significa que você deve ser capaz antecipar o que vai acontecer se eu redimensioná-lo verticalmente. Claro, tudo permanece embalado. Agora, se eu for em frente e mudar isso para o espaço entre, veja o que acontece agora. Ótimo, Isso fica bem aqui e um espaço entre garante que tudo se espalha, e então todo o elemento é redimensionado verticalmente. O espaço entre é ajustado automaticamente, como diz aqui. Automático. Certo, isso é ótimo. Isso é ótimo. Aprendemos muito neste vídeo, mesmo que para a pequena quantidade de opções que o layout automático tem, há muita complexidade nele, e há muitos componentes bonitos e poderosos que você pode criar a partir de isso, como vimos há pouco. E agora, se você estiver usando isso como um componente ou você sabe, você deseja reutilizá-lo em qualquer lugar do design da interface do usuário. O que eu sugiro que você faça é ir em frente e transformá-lo em um componente para que, para que você possa arrastar vários destes para fora, sobre, vários destes para fora e usar em qualquer lugar que você quiser. E com isso, com isso, acabamos com este vídeo. E no próximo, vamos fazer algo muito legal. Espero que fique por perto e que aprenda alguma coisa, e vejo-te em breve. 7. dois layouts no painel: No último vídeo, fizemos este pequeno seletor ou elemento de interface do usuário drop-down, todos usando o layout automático e redimensiona lindamente tanto horizontalmente quanto verticalmente. Vamos reutilizar isso no próximo exemplo, no exemplo em que vamos passar neste vídeo. E será simples porque já criamos um componente partir dele e foi presidente em nosso painel de ativos. Podemos retirá-lo do painel de ativos onde quisermos e onde queríamos retirá-lo é na página de dois painéis, certifique-se em primeiro lugar, se você está acompanhando, que eu realmente espero que você esteja, você estão na magia do arquivo inicial de layout automático e na página de dois painéis, entrar em ativos e puxou minha lista suspensa assim. Muito legal. A próxima coisa que queremos fazer é adicionar um monte de texto a esta tela. E para fazer isso, eu vou apenas clicar na ferramenta Texto, arrastar um retângulo como este, e agora podemos começar a digitar dentro desta caixa. Primeiro de tudo, vamos pegar algum texto de preenchimento que eu tenho figma tem página Wikipedia abre. Então eu vou ir em frente e pegar o primeiro parágrafo, comando C, entrar na minha caixa de texto, pressionar Comando V. Tudo bem, ótimo, vamos nos livrar deste pequeno colchete que não vamos precisar são apenas, não é importante se está lá ou não. Então, só para o meu prazer, eu o removi. Está bem. Assim que tivermos o texto, a próxima coisa que faremos é escolher um dos têxteis que defini. E para este, vamos escolher o corpo normal. Então, sim, ótimo. Parece muito bom, não é? E vamos mudar a cor para cinza 0. Ok, ótimo. E a última coisa que vamos fazer com um texto é clicar nesses três pontos aqui, redimensionar e garantir que a altura automática como selecionado. Quando a altura automática é selecionada, se eu editar o texto, você vê a altura desta caixa e apenas automaticamente, e se eu redimensionar isso ou esticar horizontalmente, mesmo então a altura da caixa é ajustá-lo automaticamente, que é muito bom, e também garante que o texto esteja alinhado à esquerda. Até agora, tudo bem. O que você quer fazer agora é colocar este texto que temos escrito aqui e estes componentes drop-down juntos em um grande componente como este, como eu tenho no final, terminou a magia do auto-layout arquivo acabado sob um dois painéis página, você sabe, alguém como este e tê-los juntos em tê-los redimensionar bem assim. E se você os redimensionar, verticalmente, ele redimensiona bem novamente. E se eu remover algo daqui, novo, tudo só, oops. Eu quis dizer através de uma opção, tudo se ajusta corretamente. Certo, agora voltando ao arquivo inicial, novamente, precisamos colocá-los juntos em um quadro. Como é que fazemos isso? Mais uma vez, selecionamos ambos e pressionamos o atalho Shift mais um. E ambos estão dentro de um único quadro agora e olhar para o ícone no painel de camadas. Olhe sobre os direitos desta faixa de layout automático. Está presente, o que significa que o layout automático foi aplicado em ambas as coisas estão aninhadas dentro de um quadro de layout automático. Agora, antes de irmos em frente e fazer mais coisas com ele e fazer algumas mudanças e fazer este esqueleto de uma coisa parecer a coisa acabada. Há uma coisa sobre a qual precisamos conversar. A única coisa que ainda não discutimos em profundidade, e que é a direção do layout automático. Agora vamos subir um pouco segurando o espaço e arrastando para cima na tela assim, venha para uma área clara e deixe-me desenhar dois quadrados em uma tela, 12, Tudo bem, ótimo. E certifique-se de que eles são das mesmas dimensões. Ok, ótimo. Agora, vamos colocá-los juntos em uma armação armada em andamento. Como você faz isso? Você seleciona ambos e pressiona Shift a, e agora eles estão dentro de um quadro terrivelmente no quadro. Um monte de opções aparecem aqui. E mesmo dentro do painel de camadas, você vê que o ícone muda em ambos os retângulos estão dentro desse quadro. Agora eu suponho que você já tenha brincado com isso, mas não é ciência de foguetes, é bem simples na verdade, olhando ícones no painel de camadas para este quadro de layout automático, veja como os retângulos no são empilhados verticalmente, certo? Isso mostra a direção na qual o layout automático está organizando os elementos no quadro. E o mesmo é iterado com esta flecha bem aqui. Olhe, vertical é selecionado se eu mudar a direção de empilhamento ou disposição deste dos dois retângulos dentro deste quadro para horizontalmente clicando na seta aqui, olhar para tudo o que acontece. Vou em frente e clicar na direção horizontal. Novamente. Eles estão dispostos horizontalmente agora, e mesmo no painel de camadas, o ícone mudou para dois retângulos empilhados horizontalmente. Agora, isso é tudo o que há para saber o básico de tudo o que há para saber sobre direções. E esta foi a última coisa que foi necessária para eu revisasse em termos de todos os aspectos do distante. Então, onde quer que você esteja, vamos voltar ao nosso componente agora. Já que fazer coisas que precisamos para fazer o componente estão dentro e quadro auto-layout. A partir de agora, é tudo sobre ajustar as configurações e brincar com os botões um pouco. Ok, vamos começar renomeando este quadro um para dois painéis. Então não para mover adultos com apenas dois painéis. E vamos dar algum preenchimento em todos os lados deste quadro e também dar-lhe uma cor de fundo para o preenchimento. Vamos com 24. Então, novamente, se eu quiser culpar o, todos os quatro lados ao mesmo tempo, eu vou clicar aqui e escrever 24. E um preenchimento de 24 unidades ou 24 pixels para aplicação em todos os lados deste pequeno componente. Até agora, tudo bem. Em seguida, vamos dar-lhe um preenchimento de três cinza como esse, e vamos dar-lhe um raio de canto arredondado de 12. Agora lembre-se que os dois elementos são empilhados horizontalmente lado a lado como ele é representado neste ícone aqui, e como ele é mostrado neste ícone de seta bem aqui, se eu torná-lo vertical, ele vai ser, ele vai olhar bem diferente assim. Está bem, mas vamos voltar a torná-lo horizontal. Agora vamos ajustar o espaçamento entre essas duas coisas que estão dentro agora o espaçamento entre elas é 103, o que é bastante grande. E, você sabe, eu posso acertar sobre eles e o espaçamento vai aumentar ou diminuir, mas vamos definir isso para um número, algo como 32. Ok? Tudo bem, ótimo. Agora parece bem colocado aqui até que, até que tentemos, deve redimensioná-lo. Vamos começar esticando horizontalmente primeiro, ok, e não, isso não é o que queremos. Há duas coisas que podemos fazer aqui. Número um, podemos decidir que a largura da lista suspensa ou este selecione seu componente ou qualquer nome que você deseja chamá-lo, permaneça o mesmo enquanto a largura dos textos se expande no redimensionamento. Para isso, vamos selecionar o texto, ok, você tem placa final. Preste muita atenção aqui. Vamos selecionar o texto e alterar seu redimensionamento de largura fixa para preencher o contêiner. Enquanto este componente, este, a seleção da lista suspensa permanece largura fixa. Ok? E agora vamos ver como ele se comporta quando você o redimensiona horizontalmente. Então, tudo bem, ótimo. Veja, veja como lindamente três cientistas. Então tudo o que dissemos para Figma foi para ter certeza de que qualquer tamanho que resta dentro deste quadro, fazer o texto preenchê-lo que é preenchido recipiente. E aconteça o que acontecer, seja qual for o tamanho disto como dissemos Figma para manter este componente de largura fixa. E isso é o que Figma ele. E agora que o redimensionamos, o texto flui enquanto este permanece fixo e suas dimensões. Agora, inversamente, poderíamos querer que este componente altere o tamanho e expanda enquanto o texto permanece largura fixa para isso, mas vamos alternar as restrições de redimensionamento, tornar o texto de largura fixa e fazer isso o componente suspenso para preencher o contêiner e ver o que acontece quando eu redimensiono agora. Muito bem, isso é fixe, certo? Além disso, podemos querer ambos para dimensionar com o recipiente ou o quadro externo, caso em que vamos selecionar ambos e alterar ambas as suas restrições de redimensionamento, as restrições de redimensionamento horizontal para preencher recipiente. E agora, se você redimensionar, ambos, ajuste a largura. Está bem. Tudo bem. Assento CSAC. Eu acho que vou ficar com este seletor, este componente, o menu suspenso, eu estou chamando de selecioná-la novamente e novamente porque eu costumava chamá-lo assim, mas você sabe, o nome não importa aqui. Só quero que saibas isso, está bem? Então eu me pergunto este componente para ser largura fixa e eu quero que este seja redimensionável, que é Phil recipiente. E estamos de volta à opção um. Perfeito. Agora, para o redimensionamento vertical, que atualmente não é nada para o redimensionamento vertical, queremos que este componente suspenso, este item aqui, estique e preencha o contêiner quando redimensionado verticalmente. Então vamos em frente e selecionar isso, ir para a restrição de redimensionamento vertical e alterá-lo de altura fixa para preencher um contêiner. Agora, quando ele redimensiona verticalmente assim, você diz que ele redimensiona corretamente. Muito grandioso mesmo. Temos tudo preparado. Praticamente só uma coisa. Ok? E se fôssemos aumentar o conteúdo no texto para que o estouro seja esse contêiner. Então, em vez de colocar um monte de textos, o que eu vou fazer é remover algumas opções daqui. Então eu posso fazer isso. Excluir, excluir, deixe-me remover algumas opções. Ou o que eu posso fazer é simplesmente entrar no painel Camadas e ocultar algumas opções e redimensioná-lo assim. Agora, se eu ir em frente e esticá-lo para baixo, e eu ir em frente e fazer isso verticalmente também. Ok, agora você vê que o texto está transbordando. Este é um cenário muito comum. Isso, isso acontece o tempo todo com auto-layout, com o que é, foi instruído. Então eu tenho notado isso todas as vezes. Vou selecionar o painel mais externo, o componente principal aqui, a única coisa que fizemos e redimensioná-lo. O que acontece é ao redimensionar quaisquer restrições que você aplicou a esse quadro externo específico muda para corrigir tanto para largura quanto para altura. E toda vez que isso acontece, você sabe, as coisas podem transbordar e sair. E para corrigir isso, a coisa mais simples a fazer é descobrir, ok, se isso está transbordando verticalmente, a única coisa que eu vou fazer é ir para a restrição de redimensionamento vertical e mudá-lo para abraçar conteúdo. E toda vez que você fizer isso, ele será redimensionado automaticamente. E B, apenas alto, alto ou largo o suficiente para caber o conteúdo que está nele. Agora, desde que o conteúdo do abraço seja selecionado. Agora, agora olhe para isto. Voltarei ao ponto anterior que fiz, que é sobre redimensionar o que Figma faz é mudar a restrição para corrigir. Então agora olhe para a vertical que diz como o conteúdo, mas assim que eu ir em frente e redimensioná-lo, ele volta para a altura fixa, que é muito compreensível. Ok, agora, contanto que isso diga que enquanto eu estiver redimensionando a restrição para todo o quadro é um conteúdo HUD. Mesmo que eu faça isso, você vê que o quadro redimensiona corretamente, ok? E se eu for em frente e remover um monte de textos daqui, assim, você diz que tudo redimensiona perfeitamente. Agora com isso, somos feitos com o elemento de interface do usuário que estamos fazendo. E veja como é limpo e como ele redimensiona e tudo mais. Agora, até agora, em todo este curso, nós cobrimos quase tudo em relação ao layout automático, mas usar o layout automático requer alguma prática. Então, no próximo conjunto de vídeos, vou apresentá-los aos componentes, novos componentes que estou usando em meus projetos reais do Senhor. E vou desafiar-te a fazê-las. Vou dar-te tudo o que precisares e depois podes filmar a tua oportunidade ou, por favor, vejo-me a fazê-lo. Está bem. Vejo-te no próximo. Tenho uma classificação de desafio incrível. 8. Desafio 1: painel de ancoragem:: Tudo bem, vamos fazer estilo livre de agora em diante. Você conhece toda a teoria e pequenos detalhes sobre tudo. E não há nada de novo para te dizer. Mas eu sei que uma coisa é saber algo e outra usá-lo em um caso prático. Daqui em diante no curso, vou mostrar a vocês, demonstrar a vocês alguns componentes que estou usando em projetos do mundo real. E eu vou desafiá-lo a reconstruí-los por conta própria usando o layout automático Figma em tudo. Eu também vou construí-los junto com você. Então você teria uma referência e assistiria, você pode fazer isso. E aqui está o que realmente estávamos neste vídeo. Neste vídeo estamos construindo o que eu acabei de dar o nome de painel de louvor. Ok, então no meu novo projeto, que era um site, eu tenho coisas boas que as pessoas têm dito sobre a minha palavra, cabeça de lista como esta. Há uma coisa que alguém disse. Tudo bem, há o elogio, então, quem disse isso e o nome do artigo ou o trabalho para o qual eles prepararam. Agora vamos fazer uma versão deste componente neste vídeo. Então, certifique-se de que você está dentro da magia do corpo outs totter arquivo e no desafio pintura painel louvor quando painel de louvor, agora dentro desta página você vai encontrar três seções. K, A primeira é a anatomia de todo o componente. A, parece tão bonita. Quero dizer, tem têxteis listados, os valores de preenchimento listados, e a cor está listada, etc. Assim, quando você estiver construindo este componente por conta própria, você só pode se concentrar na funcionalidade e não se preocupar com, ok, qual valor de preenchimento devo dar aqui, e qual cor devo escolher aqui, e qual tipo de letra Devo usar? Nada disso. Tudo está listado aqui, e no final há um triângulo que eu coloquei que é a única parte extra que você vai precisar. O resto vai ser apenas quadros e texto. Então, sim, aí está. Lá você tem tudo e no meio você tem o componente acabado que você pode brincar com. Por exemplo, posso aumentar o texto, escrever mais texto aqui e escrever mais texto aqui e ver como ele é redimensionado. E então eu posso esticá-lo e descobrir, oh yeah, ótimo. Então você pode fazer isso, brincar, pesquisar um pouco, ver como ele funciona, e então ir em frente e em algum lugar novamente nesta mesma página, algum lugar aqui, começar a trabalhar no componente. Então eu vou fazer uma pausa agora e você pode começar a trabalhar. E se você não estiver no clima, se você não estiver com disposição para fazer isso, você pode apenas sentar, relaxar e me ver fazer isso. Bem, vamos para a maneira que eu estou vendo este componente é que ele tem amplamente duas partes. A parte de cima é se eu apenas arrastá-lo e escondê-lo, a parte inferior como esta. Então esta é a parte superior e, em seguida, tem a parte inferior, o triângulo. E este pouco escrito para o nome da parte do artigo. Então, a parte inferior é um pouco mais complexa do que a parte superior. Então vamos começar com a parte superior, que é simples. Esse erro comum ou não realmente um erro, mas uma coisa comum a fazer antes de quadros e reframes era 0. Você vê um retângulo. Certo, vamos pressionar a tecla R e pegar a ferramenta de retângulo e começar a desenhar um contêiner conhecido. E não é isso que você vai fazer. Como um, Eu já expliquei anteriormente nos vídeos iniciais que só precisamos do conteúdo e, em seguida, podemos adicionar um quadro em torno dele. E um quadro pode ter propriedades como cor Bagram e sombras e cantos arredondados e outras coisas. Vamos começar com o conteúdo aqui. Então, digamos que este carbono aqui está certo, seu avaliador. Então, vamos pressionar T no teclado e obter o clique textual em uma tela e começar a escrever. Então escrevam suas notas aqui e vamos olhar, ter este azulejo para isso. Este é branco e cor neste bloco do texto é parafuso de corpo. Então vamos fazer isso. Então eu vou selecionar o texto, escolher o tecido para mim corpo negrito e mudar a cor para a direita. Ok, um feito. Número 2 é o autor, então eu vou apenas ir em frente e pressionar Opção. Arraste uma cópia deste texto aqui, clique duas vezes nele e digite AUT. Tenho uma infecção urinária é seu autor e tem um tecido de corpo normal. Então eu vou selecionar isso e mudar este bloco para o corpo normal. Ok, também tem um hífen na frente do autor, então vamos em frente e fazer isso. Opa, isso não, só isso. Ok, ótimo. Então, agora que temos isso, podemos colocá-los juntos em um quadro. Então, como você coloca algo em uma moldura? Novamente, você seleciona-os, pressione Shift a e D estão dentro de um quadro agora, que é o quadro cinco. Figma deu automaticamente esse principal. Vamos clicar duas vezes sobre ele e renomeá-lo para TOP, superior e pressione Enter. Certo, até agora, tudo bem. Agora vamos olhar para o preenchimento que é, que ele tem, ele tem um preenchimento de 32 unidades em todas essas alturas. Então eu vou selecionar o quadro, ir aqui em presentear com 32 e todos os lados. A próxima coisa que eu vou fazer é dar-lhe uma cor de fundo, que é azul 0 como mencionado aqui. Então vamos dar uma cor de fundo de azul, 0, ótimo. E o que mais resta? Ok, entretanto, o espaçamento entre seu texto de elogio aqui e todos os três textos é oito. Então, como nos certificamos de que é oito pequena selecionar este quadro, ir para o espaçamento entre os itens e alterá-lo para oito de quatro. Então, agora, se eu ir em frente e clique em qualquer um destes pressione Opção e passar o mouse do que outro. Você pode ver que o espaçamento entre eles é oito. Ok, ótimo, bom. E agora vamos olhar para os cantos arredondados. Então, todos os cantos arredondados são oito pixels ou oito unidades. Mas, mas observe que na parte superior, apenas os cantos superior esquerdo e superior direito têm raio arredondado, enquanto o inferior direito e o inferior esquerdo não tinham isso. Então vamos seguir em frente e certificar-nos de que esse também é o caso com o que estou criando ou quando estamos criando juntos, se você estiver acompanhando. Então, se você quiser dar diferente, se você apenas ir em frente e pressionar oito aqui e o raio do canto arredondado, ele vai aplicá-lo a todos os quatro cantos. Mas se você quisesse dividi-lo como se ele quisesse dar cantos diferentes, raio diferente, você pode ir em frente e clicar neste ícone aqui mesmo diz cantos independentes. E vamos mudar a parte inferior direita e inferior esquerda, tudo bem, para 0. Então, como é que eu sei que isto é inferior esquerdo e inferior direito? Estas duas caixas? Bem, se você passar o mouse sobre eles, você pode ver isso e mesmo neste ícone bem aqui, ele representa com que canto estamos lidando. Então, de novo, até agora, tudo bem. Temos o nosso top quente quase pronto. A única coisa que precisamos para garantir que ele redimensione corretamente. Então eu vou, eu vou ir em frente e esticá-lo e ver a largura ou a dimensão dos textos que dentro dele. Então, novamente, ainda há pequenos, eles não responderam ao redimensionamento. Então, vamos selecionar ambos e alterar suas restrições de redimensionamento de conteúdo HUD para preencher contêiner. E agora que vamos em frente e redimensioná-lo, você vê que a largura do texto também muda. Então, aqui mesmo, terminamos com essa parte de cima. Agora, vamos para a parte inferior. Então, de novo, temos este triângulo bem aqui, que acabei de guardar aqui para vocês. Então eu vou ir em frente, pressionar Option e arrastar uma cópia para fora. Vamos precisar dele na cama. Então, vou deixá-la aqui. É chamado de plano, a propósito, e o painel de camadas. Então, de novo, vou em frente e deixá-lo aqui. E se você vê no componente acabado, temos o triângulo, temos a aba. Mas há também, há também um pouco de espaçamento entre estes. Você vê este espaço em branco bem aqui. É chamado, ele não é chamado como tem altura de 16 aqui e ele se estende aqui e vai para um 16 anos. Então vamos em frente e fazer isso. Mas antes de tudo, vamos fazer esta pequena parte, esta parte real que contém trabalho para e o nome do artigo ou do curso. Então, novamente, eu vou ir em frente e pressionar T e escrever, ler 104, e vamos ver os têxteis para isso. Ok, este corpo é semi-negrito e tem uma cor de branco. Então eu vou em frente e fazer isso. Então eu vou selecionar este comprou um semi-negrito e uma cor de branco. Ok, então eu acho que eu esqueci um n aqui, então apenas ir em frente e escrever n. Tudo bem, então eu vou ir em frente e arrastar uma cópia dele para fora e digitar o nome do artigo é curso barra. Então vamos em frente e fazer isso. Nome do artigo. Corte cortes e o têxtil para ele é corpo normalmente. Selecione-o e dê-lhe o têxtil do normal. Tudo bem, bom. E o espaçamento entre eles é 0. Então, novamente, para ter certeza que esse é o caso, eu vou selecionar os dois. Novo turno A, colocando-os em um auto quadro I. Vá em frente e ler o quadro para, digamos detalhes inferiores sobre isso porque esta não é toda a parte inferior, que é apenas a parte de detalhes. Ok, então eu vou selecioná-lo novamente, o quadro de detalhes inferiores, vamos olhar para ele tem preenchimento de 24 na esquerda e direita e 16 na parte superior e inferior. Como é que fazemos isso? Vamos em frente e clique aqui. Selecionamos qualquer uma das quatro caixas aqui e começamos a escrever os valores de preenchimento. Então 16 em cima e em baixo em 2004 à direita, esquerda. Que tal isso? Ok, e tem uma cor de fundo de cinza 0. Então vamos dar-lhe uma cor de fundo de cinza 0. E agora precisamos ter certeza de que ele tem oito unidades, oito pontos, oito pixels, cantos arredondados para o canto inferior esquerdo e o inferior direito e 0 para o canto superior esquerdo e superior direito. Então eu vou selecionar isso, ir em frente e dividir. Quero dizer, não realmente dividido, mas glifo aqui, imagino que seja como raios girando de cantos diferentes. Então, sempre que você quiser chamá-lo, então superior direito é 0 bom, superior esquerdo é 0 bom. E inferior direito deve ser oito, e inferior esquerdo deve ser oito novamente. Então eu vou clicar nele. E isso parece muito bom do jeito que é suposto. E então, novamente, Vamos em frente e certifique-se de que é o texto que está dentro do quadro tem as restrições de redimensionamento, recipientes tão preenchidos para que ele preencha tudo como tudo é redimensionado. Então, sim, muito bom. Eles redimensionam corretamente. Agora terminamos com as partes que vamos precisar para a parte inferior, tudo bem, então a próxima coisa que queremos ter certeza é que há esse espaçamento em torno disso, torno dessas pequenas partes inferiores. Como é que fazemos isso? Fazemos isso pegando este quadro e colocando-o dentro de outro quadro. Agora, se você tem assistido todo o curso até agora, você sabe que sempre podemos aninhar quadros dentro de quadros. Então é isso que vamos fazer aqui. Vamos selecionar esse quadro e novamente pressione Shift a para aninhar isso dentro de outro quadro de layout automático. Então eu vou pressionar Shift a. E agora este é outro insight e outro quadro de íon automático, e eu vou chamar este frame grabber e w são um PPR. E novamente no painel de camadas para ter certeza de que há rapper e há detalhes inferiores. Agora, para ter certeza de que há apenas 16 pixels de preenchimento à esquerda e superior, onde você vai em frente e selecionar o quadro wrapper. Vamos em frente e clicar aqui. Topo de presente, um estofamento é 16, esquerda em dobrar um fundo 16 e direita para um movimento panorâmico 0. Agora, se você ir em frente e olhar de perto para isso, você vê que há um 16. Pixels são 16 pontos de preenchimento à esquerda. Topo. E a próxima coisa que vamos fazer é pegar este triângulo ou um apartamento. Vou colocá-lo ao lado da moldura do invólucro, selecionar os dois e colocá-los dentro de outro quadro de layout automático. Como é que fazemos isso? Selecione os dois novamente, pressione Shift a, meu agora, você acha que o atalho Shift Day é apenas perfurado profundamente em suas cabeças, que é bom, o que é bom. Então, novamente, nós temos eu acho que eles colocá-los corretamente. Eu acho que eu fiz um pouco de bagunça aqui, então eu vou pressionar o Comando Z algumas vezes e então novamente ir e vamos em frente e colocá-los em um quadro novamente. Então, selecione as abas como o dia do redshift do wrapper. E agora eles são percepções de diferentes molduras. E eu vou ir em frente e nomear este quadro B O T, T O M, fundo. Tudo bem. E o que este quadro precisa como preenchimento zero, grau e espaçamento 0 entre os itens, porque nós só queremos que este e o quadro rapper fiquem juntos. E por causa do quadro wrapper é apenas espaço vazio. Haverá 16 pixels de preenchimento ou 16 pixels de espaço entre eles. Então eu vou selecionar a parte inferior e mudar. Você vê o que acontece quando eu faço isso, quando eu arrasto por aí. Então eu vou mudá-lo para 0. Então aí está você. Esta é a parte de baixo. Agora, a última coisa a fazer é selecionar superior e inferior e colocá-los juntos em outro quadro de layout automático. Então, selecione ambos, pressione Shift a e agora eles estão dentro de um quadro. A única coisa que precisamos ter certeza é que o espaçamento entre eles é 0. Tudo bem, assim, vamos nos certificar de que a parte superior tem uma restrição de redimensionamento horizontal do recipiente Phil para que ele preencha tudo. E agora, se eu redimensioná-lo, você vê que a parte inferior não está redimensionando. Então, vamos novamente ir em frente e certifique-se de que ele tem restrições de redimensionamento horizontais do recipiente Phil. Então vamos fazer isso. Ok, é um recipiente cheio. E esta coisa bem aqui, deve ser uma largura e altura fixas, e este deve ser um recipiente de enchimento. E, novamente, vou clicar novamente algumas vezes o que acontece é que os quadros aninhados para os elementos aninhados têm uma largura fixa, restrições horizontais. Então, mesmo se você tiver definido como algo como recipiente popular no invólucro, ele não responde. Então você tem que clicar duas vezes, ir para dentro e certifique-se de que o que você está selecionado, o que você selecionou tem restrições de redimensionamento para preencher recipiente. E agora se eu for redimensionar e você ver tudo funciona bem. E se eu for em frente e colocar um monte de texto aqui assim, e tudo se move como deveria. Tudo bem, isso é ótimo, isso é ótimo. Acabamos de criar o componente juntos. E eu acho que tudo o que aprendemos até agora no curso, na verdade, apenas leva juntos para isso. Vimos como podemos criar qualquer número de quadros que queremos em qualquer lugar. E isso é ótimo no final, eu espero que você esteja, você tenha seguido isso ou você está apenas tentando criar isso sozinho sem me ver fazer isso de qualquer maneira. E no final deste vídeo, espero que você tenha um bom componente de layout automático funcional. No próximo, vamos praticar um pouco mais. Será um pouco, um pouco mais complexo do que o que fizemos aqui. Um pouco mais complexo e, você sabe, fazer uma pausa. Agora vamos passar para o desafio número 2, cartão de jogo. 9. Desafio 2: cartão de jogos: Sarah Jones 1, você se aplica a um monte de coisas que você aprendeu e acabou criando um componente de interface de usuário adequado. Fazemos algumas coisas muito tradicionais, mas é isso que o torna especial, não é? E agora é hora de um desafio também. E aqui está o que vamos construir e desafiar o número dois. Então vá em frente e certifique-se de que você está dentro de dominar Figma, a magia do arquivo iniciante garrafa ale e dentro do desafio de ganhar página de cartão. Agora nesta página você vai encontrar três quadros diferentes. que vamos nos concentrar? Primeiro é o do meio, que é o componente final. Agora este componente é arrancado de um projeto do mundo real. Então, tendo isso em mente que é, que é uma parte de um projeto diferente, totalmente diferente. Este componente não usará os estilos e cores que temos usado até agora no curso. Mas isso não seria um problema em construir e reconstruir este componente porque cada parte dele, todos os têxteis, botões, e todas as outras partes dele são menos mortos aqui. Então vamos rever rapidamente o componente acabado e ver como ele funciona, ok? E isso, nada fora do comum está acontecendo aqui. É só que ele está redimensionando a forma como é suposto redimensionar. E também, e também o quê? Observe este golpe bem aqui, direita, esta linha bem aqui. E observe como ele se estende e contrai com base no tamanho atual. Eu gosto muito disso. Agora há um monte de quadros de layout automático que está fazendo este cartão e fazendo com que ele se comporte como está. E, você sabe, antes de começar, eu quero que você veja este desafio como montar um carro junto com apenas peças. Tudo bem, então aqui estão as partes e estamos colocando tudo em um componente acabado. Então, antes de começarmos, a única coisa que eu queria chamar a sua atenção é esta opção Copiar Propriedades que está disponível dentro do Figma. Repare nesta moldura bem aqui. Tem cor, você sabe, algum tipo de traço de cor Bagram nas laterais e alguns, alguns também algumas sombras. Agora, replicar isso é uma espécie de trabalho de moagem agora porque estamos lidando com quadros de layout automático. Portanto, há uma opção, você sabe, há uma opção para copiar diretamente as propriedades e colá-las em um quadro. Então, por exemplo, este é um pequeno quadrado com todas as propriedades, cores de fundo, traçado, sombra e tudo deste grande quadro. Então, quando você tiver o quadro final pronto, tudo o que você pode fazer é, digamos, vamos criar um quadro temporário aqui. Então eu vou pressionar F e arrastá-lo para fora. E então eu vou em frente e clique sobre isso e vá em frente e clique com o botão direito do mouse, Copiar e colar e, em seguida, Copiar Propriedades. Então eu posso ir para este quadro e ir em frente e clicar em Colar Propriedades. E assim, você não precisa se preocupar com os cantos arredondados que devo receber ou qual desafio e eu recebo. Ele só pode ser copiado e colá-lo assim. Tudo bem, então com isso, tenho certeza que já cobri tudo o que é necessário. Agora, a partir daqui, você pode trabalhar nele sozinho se quiser, ou você pode apenas me observar e seguir enquanto eu reconstruo isso e para que eu não esqueça, no lado direito do componente final também está a anatomia do componente, o espaçamento entre eles, a cor então você deve usar em todos os valores que vão precisar. Então, adiciona-me os parques, o último no meio. Vamos recriar isso. E você começa com a primeira coisa que eu vou fazer é tornar a cor da tela um pouco mais clara. Então o que quero dizer com isso é que as cores que vão estar trabalhando, trabalhando com para este componente destes como tons de azul não têm um grande contraste com a cor da tela. Então, eis o que quero dizer. Então eu vou em frente e criar seu pequeno retângulo só para mostrar o que quero dizer. E a cor é D2, E, F, F. Então deixe-me ir em frente e dar-lhe a cor de D2, E, F, F. E você diz que não é muito visível nesta tela. Então o que eu vou fazer é com Figma, quando nada é selecionado no painel direito, você tem a opção de cor de fundo e ele vai ajustar toda a cor da tela, em seguida, erguido. Então, sim, eu vou ir em frente e ter certeza que você tem HSL está selecionado e o formato de cor, e eu vou aumentar o brilho. Então talvez alguns como este, não inteiramente branco, mas mais perto do branco. Ok, então a cor é F7, F7, F7. E você sempre pode redefini-lo para E5, E5.5, que é a cor padrão para Figma Canvas. Certo, então como eu comecei, a primeira coisa que faremos é fazer essa coisa em particular, essa linha aqui, porque é repetida duas vezes. E a única diferença é o texto e o ícone. Então, sim, vamos começar com isso e então vamos construir o resto dos elementos em torno dele. Então, para construir isso, a primeira coisa que precisamos fazer é arrastar essa firma de classificação de ícones aqui. Então eu vou ir em frente e arrastá-lo para fora da tela. Então também, já que você está, você sabe, você está trabalhando com isso e você pode pensar que, oh e se eu estragar as coisas e perder os elementos e seu estado padrão e as partes, bem, não há problema. Eu sugiro fazer isso, clique na opção de segurar partes e arraste uma cópia dele para que ele permanece lá como um backup. Ok, então agora novamente, de volta aos trilhos, a primeira coisa que precisamos fazer é arrastar este ícone para fora. O que mais precisamos? Precisamos de dois campos de texto, e eu não sou realmente campos de texto com dois tanques. Esta taxa de sucesso e tentativa de anunciar sua corretamente respondeu o subtexto em um aqui. Então, no total três coisas. Tudo bem, então aqui vamos nós. Aqui está o primeiro texto aqui, o texto que vai por baixo dele e o texto que vai sobre efeitos colaterais. Então eu só estou organizando isso no espaço assim, ok? Ok, ótimo. E para começar, vamos em frente e clicar no percentil e onde você está esses dois textos como eles juntos e pressione Shift a para colocá-los em um quadro de layout automático. E agora há dentro de um quadro. E o que vamos fazer é nomear este quadro, digamos conteúdo. Que tal isso? Vamos chamá-lo de conteúdo ou você sabe, era apenas chamado de informação. Ok. Lá vai você. Este é o quadro de informações e a próxima coisa que vamos fazer é selecionar todas essas três coisas juntos. Que top 20 por cento, quadro de percentil e este ícone e colocá-los juntos em um quadro de layout automático. Então vá em frente e selecione-os, Shift a e Figma inferir automaticamente que uma vez que eles são dispostos horizontalmente, ele aplica um layout de direção horizontal para eles, para o quadro que há dentro. Então eu vou ir em frente e nomear este quadro, digamos conteúdo. Ok, ótimo. Então o conteúdo tem o número, que é este texto bem aqui. Deixe-me mudar para Stat. Novamente. Vou chamá-lo de pilha. Este é o quadro de informações e este é o quadro de ícones. Está bem, fixe. E a próxima coisa que vamos fazer é dar a este quadro uma cor de fundo novamente, a mesma cor de fundo que está listada bem aqui, que é D2 E, F, F. E para dar a esta moldura de cor de fundo, todos você faz é selecioná-lo apenas assim. E olhe aqui onde diz Preencha, clique neste ícone de mais e dê um ícone e dê a ele a cor v2, e, 0, f, f. Tudo bem, lá vamos nós. Ele tem um, ele tem uma cor de fundo agora. E a próxima coisa que precisamos descobrir é, ok, qual é o estofamento de todos os lados? Assim, o preenchimento em todos os lados desta linha em particular é 24. Então vamos dar-lhe um preenchimento de 24 em todos os quatro lados. Para fazer isso de novo, como no quadro, vá até aqui e escreva 24, ok? E também que tem um raio de canto arredondado de oito. Então eu vou seguir em frente e escrever oito aqui e clicar em Enter. Eu não, eu não fiz referência ao nazista talvez porque eu o criei. Lembro-me de alguns dos valores. Tudo bem, então agora dentro disso, eu vou ir em frente e selecionar o quadro de informações novamente e ter certeza de que a diferença entre eles, o espaçamento entre esses dois itens é 0 então eles são embalados melhor juntos. Está bem, Legal. E também o top 20 por cento, este texto está flutuando no topo. Eles não estão alinhados centralmente. Então, para ter certeza de que eles estão centralmente alinhados, clique sobre isso e escolha isso e agora eles estão alinhados no meio. Ok? E agora sobre o redimensionamento, vamos verificar como eles funcionam quando esta linha é esticada horizontalmente. Realmente nada acontecendo porque nós temos esta configuração de embalagem como embalado. Vamos em frente e escolher o espaço entre. E agora, se eu redimensionar, você diz tudo, redimensiona e estica corretamente. Mas novamente, o problema é que queremos pessoa de mesa, lista tailandesa, informações, moldura e ícone para ficar juntos e apenas este texto para fluir partir quando esticado. Então, para fazer isso, para garantir que estes permaneçam fixos, eu vou em frente e selecionar os dois. E novamente, pressione Shift a para colocá-los dentro de um quadro de layout automático. E eu vou chamar esse quadro, digamos, ícone mais estatístico sobre isso. Vou chamar-lhe assim. E vamos em frente e garantir que a diferença entre eles, o espaçamento entre itens é algo menor, o que é mencionado bem aqui. Isso é 16, 16, 16, este espaçamento, então voltando aqui, então eu acho que este quadro, mudando o espaçamento entre os itens, fazer 16, está chovendo, então você pode ouvir alguns correndo para o banheiro. Sempre refrescante. Ótimo. Ok. Agora, sim, voltando a isso, voltando a isso e tentando ver como funciona, certo, estica corretamente. Você diz, isso permanece onde está e o ícone StatPlus fica à esquerda. E a estatística, que é este número, fica à direita e estica-se corretamente. Fizemos isso e íamos precisar de dois desses. Então, você sabe, eu vou apenas ir em frente e arrastá-lo aqui para que seja mais fácil de mover novamente e novamente. Então vamos precisar de dois desses. O primeiro é o comércio principal e o segundo é o percentil. Então eu vou seguir em frente e segurar a opção e arrastar uma cópia para fora dela. Se você estivesse trabalhando em um projeto do mundo real, o que você realmente faria seria criar um componente fora dele. Mas agora, estamos aprendendo sobre layout automático. Então vou deixar o passado. Então, novamente, o que queremos é que este texto aqui seja taxa de acertos, então pegue IT RAT. E os textos aqui são percentil, o que é ótimo, e o subtexto para taxa de acertos é tentado versus respondido corretamente. Então, novamente, pressione T, clique aqui e vá em frente e escreva. Tentativa. Verso diz corretamente. Respondeu: Ok, legal. Temos estas duas coisinhas bonitas aqui. E mais uma vez, quer saber? Uma vez que estes são, estes, estes são linhas horizontais e para representar algum tipo de estatística para o usuário que está jogando o jogo. Vou mudar o nome para a fila do selo, está bem? E eu vou seguir em frente e fazer o mesmo por este aqui, fileira de carimbo. Tudo bem, e agora precisamos substituir este ícone bem aqui. E para fazer isso, vou selecionar este ícone e pressionar o Comando C. Volte aqui. Selecione esta frase de quadro Comando V e você sabe, isso é apenas organiza bem aqui. Então eu vou arrastá-lo e colocá-lo lá, selecione este ícone, pressione, Excluir e bam, ele se foi. Então lá vai você. Já temos o ref. E agora o que podemos fazer é ir em frente e selecionar os dois e juntar os dois. E, em seguida, quadro de layout automático, pressione Shift a e chame este quadro de linhas carimbadas. Ok? E a próxima coisa que eu quero verificar é que ele se estende corretamente no redimensionamento horizontal. Então, para testar que eu vou esticar este quadro, mas nada está acontecendo. E novamente, para corrigir isso, selecione o conteúdo dentro e altere sua restrição de redimensionamento, restrições de redimensionamento horizontais para preencher um contêiner. E agora, se eu redimensionar todo esse quadro, tudo dentro dele será redimensionado corretamente. Ótimo, terminamos com uma parte disso. E a última coisa a fazer com isso é saber qual é a diferença entre os valores y ou era um espaçamento entre eles, que é H. Então eu vou ir em frente e selecionar o quadro de estátuas e mudar isso, o espaçamento entre os itens para oito . Tudo bem, legal. Em seguida, eu vou fazer algo muito simples é criar este botão, estes dois botões, mas eles juntos em um único quadro. Só vou em frente e ver a diferença entre eles. Continuo a dizer a diferença, mas significa a separação, a diferença entre eles, que é oito. Então o que eu vou fazer é pegar esses dois botões, Shift clique para selecionar ambos e ajuda. Ok, eu só vou arrastá-los aqui assim, certo? E nós vamos colocá-los juntos em um quadro. Então, selecione-os, pressione Shift a para que eles estejam em um quadro. Vá em frente e nomeie esse quadro CTA ou botões de chamada à ação. E então eu vou apenas posicioná-los aqui. A próxima coisa que vou fazer é esticar isto assim. Mas novamente, você vê que o conteúdo dentro deste quadro não está respondendo a esse trecho. Então, selecione ambos e vá em frente e altere sua restrição de redimensionamento. Eu fiz isso uma e outra vez para encher o recipiente. Agora eles mostraram redimensionados corretamente. Ok. Então, isso está feito. Então terminamos com isso e terminamos com isso. Agora, vamos em frente e fazer isso. Esta foi uma parte tranquila e interessante onde esta linha particular ou este curso se estende dinamicamente. Então, para esta parte, precisamos de 12344 coisas diferentes do quadro de peças. Então vamos em frente e pegá-los. Então eu vou em frente e preciso deste ícone de olho. E depois vou em frente e preciso desta mensagem. Então eu vou colocar isso lá. E então eu vou em frente e preciso dessa coisa, que eu chamei de contagem de mérito. Então, vamos pegar isso juntos e, você sabe, minha conta, essa pequena parte. E uma coisa que eu esqueci de puxar para fora dos quadros, puxar para fora do painel de peças se este pequeno golpe onde ele aqui. Então eu vou ir em frente e selecioná-lo e puxá-lo para fora e colocá-lo bem aqui. Ok, então lá vai você. E agora, uma vez que tenhamos as peças, o que agora, qual é o próximo passo novamente para juntá-las. Então eu vou em frente e deixar a contagem de casados bem aqui. Vou em frente e deixar esta linha bem aqui como está. Vou em frente e colocar esses dois juntos em um, em um quadro de layout automático. Então eu vou até eles e vou em frente e pressione Shift A, exatamente assim. E eu vou seguir em frente e novamente, chamá-lo vamos chamar de informações de mérito. Só estou nomeando as camadas. Isso realmente não importa porque nomear depende do contexto do projeto em que você está trabalhando. Portanto, não se concentre na nomeação, o que eles significam. É só para que as camadas não são nomeados quadro 93 ou forma 72 porque eu sou apenas moe minhas engrenagens. Então novamente, uma vez que eles estão em um quadro, vamos ver a separação entre eles, que é oito. Então é feito ir em frente e certificar-se que é esse o caso. Então, novamente, separação entre itens, vamos mudar de cinco para oito e sim, vamos em frente e mudar o alinhamento para centro ou metal porque é assim que deve ser. Todo o caminho não importa porque não vamos esticar isso verticalmente. Está bem, fixe. E agora, quando tivermos essas três partes, vamos arrastar e selecioná-las e pressionar Shift 8 para que elas estejam dentro de um quadro. E novamente, vou mudar o nome do quadro. Faça algo como casamento. Tudo bem, legal. E a próxima coisa que eu vou fazer é mudar seu alinhamento para centralizar em ambos os eixos, x e y são mesmo isso funciona realmente não importa porque nós estamos indo para ir em frente e mudar isso de embalado para espaço entre. Então vamos em frente e fazer isso. Mude isso para o espaço entre e agora quando eu arrasto e esticar isso, você pode ver que ele funciona como deveria, mas esta linha não está mudando, sua largura, está ficando como está e apenas flutuando no centro. E para alterar isso, para alterar isso, você selecionar a linha ou você selecionar qualquer elemento que você gostaria de se comportar como esta linha em qualquer projeto que você está trabalhando em e alterar sua restrição de redimensionamento horizontal para preencher recipiente. E uma vez que é preenchido recipiente, o resto destes para ter uma largura fixa e uma altura fixa ou conteúdo quente ou que os dados e esticar com o quadro, com o quadro recipiente. E se estiver esticado e novamente, agora se eu redimensioná-lo, você vê a linha se estende como deveria, mas há essa lacuna aqui e essa lacuna aqui que nós não queremos. E isso é devido ao espaçamento entre itens valor que está definido atualmente em 31. O que podemos fazer é ir em frente e escrever 0 e pressionar Enter. E agora olha para isto. Isso é muito legal, certo? Tudo bem, então, sim. E novamente, nós realmente não queríamos que fosse 0, se eu me lembro corretamente, nós queremos que ele seja 16. Então vamos em frente e fazer 69. Esqueci-me completamente disso. Então, e assim para 0 tipo e 16. E lá vamos nós. E vamos precisar de dois desses. Então eu vou segurar Option e arrastá-lo para fora. E eu vou, antes de colocá-los em um único quadro, eu vou em frente e fazer as mudanças necessárias que estão aqui e apostar aqui. Então, aposte. E a próxima coisa que vamos precisar é que precisamos disso ou ler, ler elemento e agora os elementos azuis. Então, selecione este quadro Comando V e coloque-o bem ali. E então eu vou em frente e deletar o azul. Então temos estes dois juntos. Novamente, indo para ir em frente e colocá-los em um único quadro selecionando ambos e pressionando Shift a, e eu vou renomear os méritos do quadro 2. Certo, e vamos ver qual é a diferença de novo? Qual é a separação entre eles? Isso é quatro. Então vamos em frente e certifique-se que o espaçamento entre os itens é quatro para este quadro. E sim, aí está. Temos uma outra parte do cartão inteiro pronto e vamos apenas certificar-nos de que ele responde aos alongamentos. Não vou ler os passos de novo. Você sabe, já sabe o que fazer para garantir que o conteúdo responda ao redimensionamento. Então lá vai você, nós fizemos isso. E a próxima coisa que resta aqui é colocar este ícone, esta altura no lado esquerdo dos méritos deste quadro. Então, novamente, eu vou ir em frente e arrastar este grande ícone a partir daqui, colocá-lo ao lado deste quadro, e então eu vou ir em frente e selecionar ambos e colocá-los em um único quadro de layout automático novamente pressionando Shift a. E eu vou seguir em frente e totalmente irrelevante o nome que eu chamei isso para agora, mas vamos apenas nomear para detalhes de nível. Ok, vamos em frente e ver como ele redimensiona. Eu vou em frente e movê-lo para cá. Mas novamente, você vê que isso se move para fora do quadro, enquanto isso permanece dentro. Mas isso não é algo que queremos. Queremos que esta coisa falhe no recipiente e não seja uma largura fixa. Então esta é uma largura fixa e este é um recipiente cheio. Então, quando o quadro do contêiner , toda essa coisa toda é redimensionada, você vê apenas essa parte redimensiona onde o ícone permanece como está, e é isso que queremos. Assim, acabamos com 123 partes diferentes do carro. A parte final está aqui, que é o iniciante, você sabe o título do cartão e esses pequenos pontos. Então eu vou ir em frente e selecionar ambos daqui a partir do quadro de peças e arrastá-lo para fora. E a próxima coisa que você quer fazer é novamente, colocá-los juntos em um quadro de layout automático. Como é que os juntamos? Selecione ambos e pressione Shift a. A primeira coisa que eu vou fazer é certificar-se de que ele está alinhado no meio e o espaçamento não está empacotado, mas o espaço entre NY é que novamente, eu vou iterar. Se eu, se estiver empacotado e eu insistir no quadro, ele fica embalado. Mas se é espaço entre um trechos e preenche o quadro quando criança, vou em frente e renomear este quadro de 81 para baixo nível. Frio. E assim, temos todas as partes do cartão prontas. E antes de irmos em frente e colocar tudo isso em uma única unidade, deixe-me ir em frente e voltar para o componente final e olhar para o comportamento da placa quando ela é esticada verticalmente. Certo, então te vejo de novo. Esta parte inteira, a parte superior permanece embalada como sempre, como o CDA é, esses dois botões realmente seguem a parte inferior do cartão e esticam e flutuam no final. Então isso deve dar uma idéia clara de que a embalagem que vamos usar neste cartão inteiro é um espaço entre, em vez de embalado. Mas antes de irmos em frente e consolidar todas essas partes juntas, as partes superiores juntas em um quadro, e não apenas um quadro porque há diferentes valores de espaçamento entre elas. Por exemplo, o espaçamento entre este nível superior e esta parte é 24, este indeces 40. Então, novamente, vamos colocar isso e isso em um quadro e colocar esse quadro e este quadro estas estátuas quadro em um único quadro. Certo, eis o que quero dizer. Então vamos em frente e começar com isso. Então eu vou deslizar o nível de quadro e o nível de detalhe para impressionar dia turno colocá-los em um único quadro e alterar o espaçamento entre os itens para 24. Isso é um quadro. Vamos em frente e chamá-lo, digamos, detalhes de nível para estes úteis. Que tal isso? Ok? E então eu vou selecionar este nível de detalhe completo e escritores de equipe e colocar estes dois juntos em um quadro. Novamente, selecione ambos, pressione Shift a e altere o espaçamento entre eles para 40, como é mencionado em e não na anatomia do componente. E esta parte, vou em frente e chamá-lo de “adicionar top”. Ok? E agora eu posso ir em frente e selecionar top e CTA e colocar esses dois juntos no quadro final. Então Shift a, e isso está no quadro, e eu vou renomear isso do quadro um T1, T2, novamente cartão, certo? Este é o último invólucro final. E o último invólucro tem um preenchimento de 32 em todos os lados. Então eu vou selecionar isso e ir para o preenchimento e ter certeza de que é 32. Ok, e vamos dar a ele uma cor de fundo, bordas e tudo isso. Então lembre-se desde o início do vídeo que falei sobre estilos de cópia ou propriedades de cópia. Esse é o presidente em fragmentos. Vou clicar com o botão direito, vá para Copiar Colar. Então eu copiaria propriedades. Vou seguir em frente e voltar para este quadro e ir frente e clicar com o botão direito do mouse novamente e selecionar Colar Propriedades. E assim, eu tenho todo o estilo aplicado. Ok, última coisa a ter certeza, como eu repetiu uma e outra vez no curso para ver como ele se comporta quando é redimensionado. Então, quando esticado horizontalmente, novamente, você pode ver que estes não respondem. Então eu vou ir em frente e certificar-se de que os quadros e todos os quadros aninhados têm restrições de redimensionamento horizontais ou recipiente de preenchimento. Vamos em frente e fazê-lo encher o recipiente. E então eu vou entrar e fazer este recipiente cheio. Então, assim, fazer este recipiente cheio assim. Ok, esse sou eu. Vá em frente. Você pode continuar clicando duas vezes até chegar a um quadro que foi fixado a ele e ir em frente e definir que para preencher recipiente, selecione isso e alterá-lo para preencher recipiente. E agora, se eu redimensioná-lo, você diz que ele redimensiona perfeitamente horizontalmente. Mas então e o redimensionamento vertical? Se eu redimensionar esta palavra realmente permanece embalado. Nós não queremos isso. Damos IV. Vamos em frente e mudar este espaçamento ou embalagem para o espaço entre. Lá vai você. E vamos em frente e tentar redimensionar e verticalmente. E se comporta como deveria. Ok, e eu sei que este vídeo estressou mais de 20 minutos, mas eu queria rever todas as etapas e explicar todas as etapas envolvidas na criação de um componente de interface do usuário a partir de quadros de layout automático. E o ponto que eu queria ilustrar é que não é que você tenha que se limitar a fazer tudo em um quadro. Você pode ver que o número de quadros usar aqui é, eu acho que é muito além de 10 e está tudo bem. Isso está tudo bem. Essa é a coisa toda funciona. Então, você sabe, tente usar todos os iframes o máximo que puder. Porque quando este cartão será colocado em um real, digamos uma página ea largura da página não é algo como 587, mas eu digo 340, então, você sabe, ele redimensiona e se é corretamente em vez de redimensionar cada única parte deste e para caber nesse espaço particular da página. Ou se a página é grande, então você pode esticá-lo e caber em grande parte final do gráfico anterior. Você pode ir em frente e encaixar algo assim. Então isso é ótimo. Use mais quadros e use quantos quadros quiser. E eu espero que você tenha aprendido muito até agora no curso. E neste ponto estamos feitos com quem a maioria dos exemplos e com a maioria dos desafios. O último, que é osso um controle deslizante, que será discutido no próximo vídeo, não é um requisito, mas é um uso louco de auto-layout. E é muito bacana se você está me perguntando alguma coisa, você sabe, eu vou te contar mais sobre no próximo vídeo. 10. Desafio : controle de layout automático: Tudo bem, você ainda está por perto, então eu vou fazer com que valha a pena. Você sabe o que é mágico sobre essas ferramentas como Fatma ou qualquer outra ferramenta, é que você não pode antecipar as maneiras em que as pessoas vão usar os recursos, em que permutações eles vão aplicar os recursos e quais coisas novas que eles vai vir acima com. Às vezes, essas coisas novas, essas permutações de formas de usar recursos são denominadas como hacks. E muitas vezes esses hacks se tornam parte do recurso principal, configurar uma ferramenta abaixo da linha, uma vez que a tarefa é o que Rajit, um designer defensor da Figma, fez com auto-layout e sliders, inspirou eu decidi dar-lhe uma chance e tornar este controle deslizante composto Feedback. Isso é parte de um projeto real em que estou trabalhando. E veja o que eu posso fazer é ajustar a quantidade que o controle deslizante é preenchido usando layout lógico e puxar o protótipo para ser mais do que apenas uma simples maquete de baixa fidelidade. Vamos usar exatamente as mesmas técnicas que eu uso aqui com tudo isso para criar esta pequena coisa, o controle deslizante em que a quantidade que o botão foi trenó pode ser ajustado usando a opção espaço entre itens na faixa de layout automático à direita, assim mesmo. Agora, eu fiz este controle deslizante em um componente. Você pode dizer que olhando para o painel de camadas e este ícone bem aqui foi denota que ele é um componente. E tudo isso à direita são instâncias desse componente e instâncias que você pode substituir algumas coisas como vimos, mas posse e dimensão não são uma delas. Então, se isso não fosse pelo hack, e eu estou usando aspas de hack in air. Se isso não estava usando o HAC para posicionar o botão, terá que desanexar a instância assim. Você pode ir em frente e desanexar instância, que significa que esta coisa em particular não será mais conectado ao componente principal, terá que desanexar a instância e, em seguida, mover as coisas ao redor, que é confuso e feio. Não faça isso. Em vez disso, use auto-layout e ver como, mesmo na instância, cada controle deslizante pode ter uma posição única do botão e, portanto, e Phil única, Eu posso ajustar este controle deslizante para cheio. Posso pegar esse controle deslizante e movê-lo para a esquerda assim. E também uma grande coisa sobre este componente em particular é que, à medida que você segue adiante, se você entender sua arquitetura sem se confundir em nenhum momento, ele será um indicador de que você entendeu o layout automático realmente, muito bem. Tudo bem, ok, vamos ao negócio e vamos começar a construir. Vamos para o arquivo inicial. Dominar Figma, a magia da gagueira de layout automático. E dentro do slide bônus ou página, você encontrará a versão final do controle deslizante aqui. Você pode espiar o painel Camadas, brincar com ele, fazer o que quiser. Mas quanto a mim, estou mais pronto para começar a construir uma cópia disso aqui. A primeira coisa que vamos precisar é de uma base que é simplesmente um retângulo fino. Isso você vê bem aqui o retângulo cinza, que é a base. Então vamos desenhar isso, pressione R para obter a ferramenta de retângulo arraste um retângulo, qualquer forma, qualquer tamanho, qualquer que seja o que for para ajustá-lo em algum tempo. A primeira coisa que vamos fazer é torná-lo fino. E quero dizer, três pixels de altura. Certo, três ao lado do esconderijo. E lá vai você. E a próxima coisa que quero fazer é dar-lhe tampas arredondadas, certo? Totalmente em torno dele. Então eu vou selecionar o retângulo, ouro ou passar o mouse sobre a parte do retângulo arredondado, desculpe, cantos arredondados parte e apenas arrastá-lo todo o caminho. E agora você pode ver que ele tem um tampas arredondadas em ambas as extremidades. É aí que isto faz. Essa é a base. Então eu vou selecioná-lo, ir para o painel Camadas e chamá-lo de base BAC. E também vou mudar a cor para cinza, T2 e NMOS. É sutil e dificilmente visível, mas espero que consigas ver que está bem ali. A próxima coisa que vamos precisar é o retângulo de enchimento. Esse é um bem aqui, o que falha. Tudo bem, então, para isso, eu só vou seguir em frente e segurar a opção e arrastar uma cópia da base para fora. E a coisa que eu vou fazer é mudar sua cor de fundo para azul 0. E também para o enchimento, não queremos nenhuma redondeza no lado direito. Então eu vou selecionar isso, ir para a parte dos cantos arredondados. É apenas individualmente e mudar superior direito. Em cima à direita. Sim. E inferior direito para 0, esta linha para baixo de modo que este n é como, Hey, eu tenho este n tem um corte preciso e a extremidade esquerda tem cantos arredondados. Ok, ótimo. Este é o enchimento. Então, vou entrar no painel Camadas e digitar II LLC para o enchimento. E é isso. Isso é tudo por isso. Então eu digo que vamos precisar é este botão bem aqui, que é apenas um círculo de 16 por 16 pixels. Então pressione O e obter a ferramenta oval ou a ferramenta círculo, mantenha a tecla Shift e arraste um círculo 16 por 16, e a cor de fundo de azul para ok, legal. Vá para o painel Camadas, nomeie o botão KNIME. E a próxima coisa que queremos fazer é colocar o enchimento e o botão em um quadro automático. E como você faz isso novamente, você seleciona os dois, pressione Shift a E agora isso não é realmente o que queremos. Queremos que seu alinhamento seja no centro assim. E agora, você pode sentir que estou indo em uma boa velocidade e não explicando tudo em detalhes. É porque temos discutido o layout automático há mais e eu sei disso, você sabe, e então deixe-me fazer um cruzeiro. Ok. Sim. Portanto, ambos estão em um quadro alcalino com 0 espaçamento entre os itens. E a próxima coisa que eu queria ter certeza é que um botão tem restrições de redimensionamento de largura fixa e uma altura fixa. E o retângulo de enchimento tem uma restrição de redimensionamento horizontal do recipiente Phil para que quando este quadro é ajustado, você vê isso? Sim, você diz que parece que o botão está deslizando e o retângulo está preenchendo o espaço. Então faz com que você vá ao painel Camadas? E eu sempre me certifico de apontar isso. Leitura do quadro um deve ser, vamos apenas chamá-lo de partes porque basta segurar o quadro detém e partes importantes do controle deslizante. Ok, agora para a traqueia, agora eu quero que você preste muita atenção de agora em diante. A próxima coisa que precisaremos é de uma moldura. Tudo bem, então eu vou em frente e selecionar a parte para que eu possa ver que é uma dimensão. Vou pressionar F no meu teclado para obter a ferramenta de moldura para que quando eu arrasto um quadro seja criado. Ok? E eu vou ir em frente e certificar-me de que o quadro é da mesma altura que o quadro de peças aqui. Este quadro que acabamos de criar, vamos apenas deixá-lo ter uma cor de fundo branco por enquanto. Faremos desaparecer mais tarde, mas por enquanto, bem aqui, vamos garantir que tenham a mesma altura. De novo lá ou não. Preciso aumentar um pouco. Então agora tem 16 pixels de altura, pixels de altura, e até mesmo o quadro de peças tem 16 pixels de altura. Vou selecionar o quadro que acabamos de criar, e vou chamá-lo, não apague, porque isso será uma parte importante de toda a engenhoca. Tudo bem. Eu só estou apagando dizer que temos esse ponto porque eu estou tão animado que isso tem algo para descobrir por conta própria. Bem, 60% sozinha, então estou animada com isso. Bem, vamos selecionar o quadro de peças e o quadro que acabamos de criar. E nós vamos em frente e colocá-los em um quadro de layout automático. Portanto, selecione ambos, pressione Shift a e certifique-se de que o espaçamento entre os itens é 0. Agora, para as restrições de redimensionamento, para as restrições de redimensionamento, eu quero que o quadro de partes, o quadro de layout automático de análise tenha preenchido a restrição de contêiner. E eu quero que este quadro bem aqui tenha largura fixa. Ok? Agora olhe para isso quando eu selecionar o quadro, o quadro que acabamos de criar e ajustar o espaçamento entre eles, você vê que o espaçamento é aumentado e diminuído. Mas uma vez que o quadro de partes tem, as restrições de redimensionamento são preenchidos recipiente, ele preenche o espaço que é deixado, modo que este é fixo, de modo que este ser afetado. Este espaço aqui é flexível, que está sendo ajustado e o que quer que seja. Ok. Este espaço aqui está a ser ajustado. Então eu selecionei o quadro errado e apenas para que haja espaço bem aqui entre essas duas coisas como sendo ajustado e qualquer espaço que seja deixado como sendo preenchido pelo quadro de partes porque ele tem as restrições de redimensionamento. Então encha um recipiente, ok, tudo deve ter começado a cair juntos agora e eu espero que você esteja chegando naquele momento aha. Agora, a próxima coisa que eu queria fazer é selecionar esta rota de quadro aqui. Nós realmente não precisamos dele. Vamos torná-lo o mais fino possível. Então vá para a largura, ajuste de largura bem aqui, e eu vou ir em frente e dar-lhe uma largura de 0,05. Perguntado, então, como pudermos. E a próxima coisa que faremos com isso para desapareça completamente é nos livrar de qualquer preenchimento que tenha. Então agora este quadro bem aqui tem apenas este, este quadro de peças em particular. E se eu ajustar o espaçamento entre os itens desta RAM, você vê que este controle deslizante se ajusta, o que é legal. E eu vou ir em frente e selecionar este quadro terminando este quadro em apenas este. Certo, então saberemos de uma forma selvagem por que chamo esse quadro ajustar isso. Bem aqui, bem aqui, só temos o controle deslizante, não temos a base. Ok? A próxima coisa que queremos fazer é ajustar isto, este quadro bem aqui e esta base e colocá-los juntos em um quadro, não um quadro otimamente próprio, apenas um quadro. Então o que eu vou fazer é primeiro de tudo, basta arrastar a base e ter certeza de que é quase a mesma largura que essa justiça. E então eu vou ir em frente e mover o controle deslizante um pequeno saco aumentando o espaço entre os itens. Lembre-se que há um emoldurado bem aqui e estamos ajustando este espaço bem aqui. Então eu vou ir em frente, ajustar isso e movê-lo um pouco para trás. E então eu vou ir em frente e selecionar isso e apenas este quadro e deslocamento e seta para cima para realmente ajustá-lo, apenas sua posição. Então eu vou e continuar pressionando até que eu quase alinhá-lo com o, com o retângulo base. A próxima coisa que vamos fazer é selecionar ambos e pressionar atalho Option Command G ou clicar com o botão direito do mouse e selecionar a seleção de quadro. E agora este é o quadro inteiro. Eu vou ir em frente e renomear isso de quadro um para controle deslizante. Então vou em frente e me certificar de que tudo está verticalmente centrado. Então, se o seu seleciona qualquer coisa dentro de um quadro, dentro de um quadro normal e clique neste ícone para centralizá-lo verticalmente. Ajustará em relação a esse quadro em particular. Então eu vou ir em frente e certificar-me de que tudo está devidamente centrado e vertical. Então acho que são. E agora que disse que temos o controle deslizante, temos o controle deslizante aqui, bem aqui, C. E dentro do controle deslizante, se você já jogou e olhou em volta no arquivo final, você sabe o que dentro do quadro deslizante nós tinha que apenas este que usamos para ajustar, que usamos para ajustar o quanto o controle deslizante tem fenda. E da mesma forma neste quadro bem aqui que acabaria de criar, temos um ajuste este quadro com o qual podemos ajustar a posição do botão. E isso é ótimo. Isso é ótimo. O controle deslizante é feito como uma verificação final. Queremos ter certeza de que ele redimensiona corretamente. Então, agora, se eu esticar o quadro, nada acontece. E por que isso? Bem, espero que você possa incluí-lo. Ele faz isso porque os filhos do quadro, as coisas dentro dele, não têm as restrições de redimensionamento adequadas. Por exemplo, a base acabou de sair. Queríamos escalar como ele é redimensionado horizontalmente. E da mesma forma para o ajuste deste quadro, queremos que ele escala em, todo o quadro é ajustado ou redimensionado horizontalmente. Então agora você vê como ele funciona bem, muito responsivo às mudanças de tamanho. E também posso ir em frente e brincar com ele. Só isso do jeito que você está dizendo. E eu sei como é. Eu sei que é para mim se eu estivesse assistindo do outro lado, você sabe, seria como saber o truque do mágico. E eu sei que não é tão emocionante, mas mais do que tudo, você aprenderá a explorar recursos de layout automático para criar algo totalmente louco e personalizado. E quão bom é isso? A próxima coisa que você pode fazer é provavelmente se transformar em um componente e usá-lo onde você quiser em seu projeto. Ótimo. 11. Conclusão: Bem, isso é tudo para esta aula. Passamos de saber nada sobre layout automático no primeiro vídeo para fazê-lo funcionar de acordo nossos próprios caprichos e reuniões e fazer coisas que realmente devem fazer no último vídeo. Então passamos por muita coisa e reaprendemos muitas coisas no meio. Espero que você veja o quão poderoso o recurso simples pode ser, e espero que se você ainda não estiver usando, você vai. Agora, se você gostou desta aula, você pode ir em frente e deixar um comentário aqui no Skillshare. Isso significaria muito disponível no Twitter em Nashville, você pode me encontrar, atirar em um DM ou um pedido de classe. Estou aberto a isso. E com isso, espero vê-lo em breve em outra aula. Tchau.