Design responsivo no Figma Deep Dive: Layout automático, restrições, pontos de interrupção e modos do Figma (2024)

1. Intoduction: Layout automático, deixando você louco. Com medo do que acontecerá com o design no navegador. E então esta aula é perfeita para você. Aprenderemos tudo sobre como configurar designs responsivos e figma Este será um mergulho muito profundo nas restrições de layout automático e, o mais importante, mas realmente discutido, como lidar com pontos de interrupção, desde uma configuração tradicional até desde uma configuração tradicional aproveitamento T. Compreender e combinar essas ferramentas ajudará você a configurar componentes, padrões de design e páginas inteiras que se alinhem às configurações de código Começaremos com o poderoso layout automático e realmente focaremos na configuração de componentes verdadeiramente responsivos Começaremos do zero e trabalharemos até o redimensionamento e o poder do aninhamento infinito, criando elementos mais complexos e até páginas inteiras com layout automático Como sempre, mostrarei tesouros escondidos e algumas dicas e truques ao longo do caminho C. Em seguida, veremos as restrições e como elas salvam vidas quando se trata de combinar o layout automático Depois de nos certificarmos de que entendemos esses fundamentos do design responsivo no Figma, vamos aprender sobre os pontos de interrupção, como eles realmente funcionam nos bastidores do CSS e como podemos configurar nossos designs do Figma Isso variará de configurações mais tradicionais a recursos avançados, como usar modo para automatizar alterações de design e escalar a tipografia Com o arquivo do material do curso, você pode trabalhar comigo ou retornar aos exercícios com instruções detalhadas em seu próprio tempo. Esta aula é ideal para você, se você tem conhecimentos básicos do Figma ou se é um usuário avançado do Bigma e deseja aprimorar suas habilidades Este é um curso da Moon learning dot IO. 2. Versão de interface do usuário e material do curso: Atenção: Figma atualizou sua interface de usuário e você pode ver um novo design em vez do antigo As mudanças são principalmente visuais. Todos os recursos e ferramentas ainda estão lá, apenas em lugares ligeiramente diferentes ou com um novo visual. Em caso de emergência, você sempre pode voltar para a interface anterior, clicar em um pequeno ponto de interrogação no canto inferior direito e, aqui, voltar para a interface anterior. Atualmente, nem todo mundo está obtendo acesso automático à nova interface do usuário. Infelizmente, a Figma está lançando isso de forma bastante aleatória. Portanto, você encontrará duas versões desse curso. A versão antiga com a interface antiga no arquivo ou este curso aqui em que você está atualmente, que tem uma estrutura um pouco diferente, vídeos atualizados e está usando a interface mais recente. Portanto, assim que você tiver acesso à interface de usuário mais recente, certifique-se de usar a versão atualizada. Certifique-se de obter também os arquivos corretos do curso. Você pode vê-los claramente marcados, um para o curso antigo e outro para o novo curso. Eles têm uma estrutura diferente, por isso é muito importante que você obtenha o arquivo correto para poder acompanhar todos os vídeos. Você encontra todas as informações e links na descrição abaixo. Observe também que o FIPMA é muito dinâmico. Essa interface de usuário, como a vemos hoje, definitivamente mudará no próximo ano. Provavelmente serão pequenas mudanças como um menu suspenso, uma caixa de seleção As pequenas barras laterais flutuantes podem estar grudadas na lateral. A estrutura geral permanecerá a mesma, mas com certeza você terá uma pequena diferença ao assistir aos vídeos. Nada com que se preocupar, tudo ainda deve estar em seu lugar e estar claro para você acessar e ser usado. 3. LAYOUT AUTO: 01 O que é layout automático?: Vamos ter uma ideia, o que é layout automático e para que o usamos? Com o layout automático, podemos configurar nossos designs no Figma forma que eles correspondam às mudanças de tamanho Isso funcionará em coisas como componentes únicos, mas também em grupos desses componentes. Isso significa que podemos realmente usar o layout automático para configurar qualquer coisa, desde um botão até uma página inteira. Você notará que, às vezes, quando aplica o layout automático, isso funciona muito bem e é muito fácil. No entanto, em outras ocasiões, ele se comportará da maneira mais estranha e você precisará entender Isso ocorre porque o layout automático não é apenas um botão no qual você clica. É composto por três pilares e você precisa entender cada um deles em profundidade O primeiro é o layout e o posicionamento, o segundo, o comportamento de redimensionamento e o terceiro, o aninhamento Vamos entender cada um desses pilares mais detalhes e depois reuni-los como um todo, dando a você total confiança para configurar qualquer coisa com layout automático 4. LAYOUT AUTO: 02 Como configurar quadros de layout automático: Vamos aprender como configurar um quadro de layout automático. Com o layout automático, nossos elementos de design podem responder ao conteúdo. Aqui eu tenho um botão. Sem o layout automático, você pode ver que, se eu mudar o conteúdo , nada se adaptaria. Agora, se eu adicionar o layout automático, que posso fazer simplesmente selecionando esse botão e, no lado direito do painel de propriedades, no layout, clico no botão do layout automático. Se eu mudar o texto agora, você verá que ele se adapta automaticamente a qualquer conteúdo que recebo Vamos fazer o mesmo com o meu cartão. Eu selecionei. Eu adicionei o layout automático e agora converti em um quadro de layout automático. Agora você pode ver se eu mudar alguma coisa no conteúdo , tudo se adaptará, mas ainda manterá todo o seu preenchimento Agora, com esse preenchimento e espaçamento, se você selecionar o quadro de layout automático novamente, poderá ver isso no painel de propriedades do lado direito No menu aqui, você pode ver que primeiro obtém algo chamado de lacuna entre os itens. Então, esses são todos os itens infantis. Então, meus itens infantis aqui seriam minha imagem, meu título e meu texto Vamos fazer com que este volte ao seu estado original. Então, se eu mudasse isso, você pode ver que isso muda a lacuna entre esses elementos. Se você segurar a tecla Shift , ela aumentará e diminuirá sua quantidade n. Você também pode ajustar qualquer coisa diretamente nas cavas ou clicar duas vezes e digitar o valor desejado. Isso funciona da mesma forma para o seu preenchimento. Aqui você tem seu preenchimento horizontal e vertical. Você pode mudar isso aqui. No painel de propriedades, você também pode simplesmente digitar qualquer número que desejar e também pode ajustá-lo no Canvas usando as alças ou simplesmente clicando duas vezes e adicionando qualquer valor. Com o menu de alinhamento, agora você pode alinhar seus elementos dentro da moldura de layout automático Vamos diminuir essa imagem para que você possa vê-la melhor. Você pode alinhar tudo à direita, tudo ao centro ou tudo à esquerda Isso alinha a caixa de texto inteira, não o texto em si. Se você quiser alinhar o texto, ainda precisará usar as configurações da propriedade do texto O layout é muito bom para adivinhar a direção em que você está projetando Mas se você quiser alterá-lo, poderá usar esses erros aqui em cima, para poder mudar da vertical para a horizontal. RAP é algo que usaríamos se tivéssemos mais elementos de layout automático, portanto, elementos aninhados um ao lado do outro Não é nada que você precise agora, no começo. Você pode mover elementos para dentro ou para layout simplesmente arrastando-os ou pode usar as teclas de erro no teclado para subir e descer Você verá que, no painel de camadas, elas mudarão posição de acordo com o local em que você as coloca. Você também pode remover o recurso de layout automático a qualquer momento, basta selecionar o quadro e clicar novamente no botão de layout automático. Você ficará com apenas uma moldura simples. Além do painel de propriedades, você também pode usar os atalhos Shift e A para criar uma moldura de layout automático e todas as teclas Shift e A para removê-la, ou simplesmente clicar com o botão direito do mouse O atalho é muito útil. Se, por exemplo, você tiver apenas um texto , não verá a opção de layout automático no painel de propriedades, mas poderá pressionar Shift e A. Isso o transformará em um quadro de layout automático Então, se adicionarmos algum preenchimento, você pode ver que ele adicionou uma moldura ao redor do seu texto. Se você remover o layout automático, verá que saiu com uma moldura e o texto dentro. É também por isso que é chamado de quadros de layout automático , porque só funcionará com um quadro. Se você aplicá-lo como apenas um texto, um grupo, ele sempre o converterá em um quadro para você. 5. LAYOUT AUTO: 03 O menu de layout automático: Vamos dar uma olhada mais de perto no menu de layout automático para entendê-lo completamente. Isso é o que parece atualmente. É importante entender que o Figma é muito dinâmico e está constantemente iterando e melhorando Então, o que você vê na tela agora pode parecer um pouco diferente em alguns meses. recursos e os botões podem entrar e sair dos submenus e ao redor do painel de propriedades Então você precisa se acostumar com isso. É fundamental entender os recursos em si, pois isso ajudará você a saber o que procurar. Eu fornecerei todos vídeos atualizados para grandes mudanças. Portanto, cuidado com eles. O Figma também permite que você volte às interfaces anteriores às Clique no ponto de interrogação no canto inferior direito para alternar entre as versões da interface do usuário. Por padrão, você verá a versão simplificada do menu. Se você está apenas começando, talvez queira ver alguns rótulos. Você pode adicioná-los clicando no erro ao lado porcentagem de visualização na parte superior e selecionando rótulos de propriedades. Antes de examinarmos o menu, lembremos layout automático é composto por três pilares: layout e posicionamento gerais, layout e posicionamento gerais comportamento de redimensionamento e Ao longo do curso, aprenderemos detalhadamente sobre cada um desses pilares, oferecendo uma compreensão arredondada e estruturada desse recurso, que prometo que facilitará muito a vida útil do seu layout Para minha aversão pessoal, o menu começa com o redimensionamento, que é nosso segundo Veremos isso com mais detalhes posteriormente, pois é a parte mais complicada, então ignore essa por Basicamente, mostra o tamanho de um elemento, em pontos ou seu comportamento definido. A seção intermediária trata do layout e posicionamento geral do automático, que é o que geralmente chamamos de menu de layout automático. Vamos nos concentrar neste por enquanto. Para começar, temos as opções de direção, horizontal ou vertical, e uma terceira opção chamada encapsulamento, que nos permite agrupar elementos em uma nova linha de redimensionamento Esse também é um recurso mais avançado, e vamos explorá-lo com mais detalhes posteriormente. Com o alinhamento, podemos alinhar elementos dentro de uma moldura. Observe que isso se aplica a todas as crianças da mesma forma. Com Gap, podemos definir a lacuna entre os filhos diretos. Uma pequena dica em qualquer um desses campos se você selecionar os campos, manter pressionada a tecla Shift e usar as teclas para cima e para baixo , ela aumentará na quantidade de Ng definida. No meu caso, isso está definido como oito. Por padrão, geralmente é definido como dez. Você pode alterá-lo, basta clicar no menu Figma em ações e pesquisar por Ng E então você pode definir seu grande entalhe 28. Você também pode encontrar um menu de entalhe por meio da pesquisa de IA. Aqui embaixo, temos o estofamento. Podemos definir o preenchimento na parte superior e inferior ou abrir o menu estendido para configurações individuais Uma pequena dica: se você segurar comando e clicar em qualquer campo, poderá usar a notação CSS para cima, direita, inferior e esquerda Qualquer valor de espaçamento ou preenchimento que você possa definir no menu também pode ser definido diretamente na tela Você notará as pequenas alças. Você pode arrastá-los ou clicar duas vezes e digitar qualquer número. Uma pequena dica para o acolchoamento. Se você quiser selecionar os dois lados, mantenha pressionado o botão antigo. Se você quiser selecionar todos os quatro, mantenha pressionado e mude. O último item é a caixa de conteúdo do programa ou clipe. Essa é mais uma configuração geral do layout do que específica do layout automático. Ele determina se você deseja mostrar algum item que cresça além da moldura. Isso será bastante relevante para a prototipagem. 6. LAYOUT AUTO: 04 A configuração automática: Há um recurso que está um pouco oculto, mas eu o uso o tempo todo. Eu quero que você saiba disso, e é chamado de automático. Esse recurso era anteriormente chamado de espaço entre no Figma e ainda é chamado assim no Flexbox Você também pode ouvir esse nome sendo referido. Então, basicamente, aqui temos nosso quadro com três elementos secundários. E se eu redimensionar , você pode ver que posso alinhar isso agora que está no meio, posso alinhá-lo à esquerda, mas sempre manterá o mas sempre manterá Agora, no espaçamento com a lista suspensa, posso mudar isso Com o Auto, o espaço é distribuído igualmente entre as crianças. Além do menu suspenso, você também pode simplesmente clicar nas alças. Agora, se você digitar qualquer valor , ele voltará para a configuração original. Ou se você clicar duas vezes novamente e digitar auto , ele saltará para o espaço entre, ou como chamamos agora, automático. Meu atalho favorito, basta clicar no menu de alinhamento para alternar entre compactado e espaço entre eles, ou você também pode usar o atalho x enquanto estiver no O Auto é muito, muito útil quando queremos criar coisas como uma navegação, em que queremos colocar alguns elementos à esquerda e colocar outros à direita Agora, o melhor é que, se adicionarmos mais elementos, isso depende de onde os adicionamos. Então, agora isso seria um filho direto. Então, agora temos três elementos secundários. Portanto, se redimensionarmos, o espaço disponível será distribuído entre três Mas se eu colocar isso dentro da minha moldura aninhada aqui , volto à minha configuração original maioria das vezes, o Aalto será exatamente a solução que você estava procurando. Portanto, tenha isso em mente. 7. LAYOUT AUTO: 05 Menu avançado de layout automático: D menu de configurações avançadas. Há um pequeno ícone que ignoramos até agora, que são as configurações avançadas de D. Selecione qualquer quadro de layout automático. Então, se clicarmos aqui, você verá que atualmente temos configurações para traçados, decks de tela e uma linha de base de texto em linha Vamos verificar rapidamente a dose. Vou começar com o primeiro, que são os traços, e você pode ver, por padrão, que está excluído Se passarmos o mouse sobre nosso preenchimento aqui, você pode ver que atualmente tenho 32 preenchimentos, e você pode ver que meu traçado está definido como 16, então ele está ocupando metade do meu preenchimento Posso simplesmente mudar aqui, incluir no layout, e agora você pode ver que meu preenchimento está totalmente usado e meu traçado está fora dessa configuração de quadro de layout automático Nosso próximo passo é nosso empilhamento. Vamos dar uma olhada nesse. Se selecionarmos elementos , é importante entender que o espaçamento também pode ser negativo Com a configuração avançada, agora podemos alterar a ordem de empilhamento, para que possamos ter o último no topo ou o primeiro no topo E nossa última análise é nossa configuração básica. Então, aqui vou selecionar esse submenu. Então, meus itens, você pode ver como eles estão configurados, então eu tenho meus itens NAF e meu botão Você pode ver que, atualmente, eles estão alinhados. Também posso alinhá-los ao centro, mas às vezes pode não se alinhar à linha de base que você está procurando Então, o que você pode fazer é selecionar o alinhamento à linha de base e, em uma pequena janela de visualização, você já pode vê-lo e alinhará levemente à Isso também é algo que você pode querer usar se tiver um botão com um Con, por exemplo, e quiser alinhá-lo com o texto Então, essas são configurações que você não vai usar com muita frequência, é por isso que elas estão escondidas neste pequeno submenu 8. LAYOUT AUTO: 06 redimensionar configurações: Redimensionamento com layout automático. Então, aprendemos que podemos simplesmente transformar qualquer elemento em um quadro de layout automático. Podemos ajustar o espaçamento, o tamanho e o preenchimento e, à medida que alteramos o conteúdo , podemos ver que nosso Agora, funciona muito bem assim porque, se dermos uma olhada novamente, essa é uma moldura de layout automático vertical. Mas o que também queremos que esse quadro faça é que, se o redimensionarmos , queremos que nosso conteúdo também responda dessa forma Para que isso funcione, precisamos adicionar uma camada adicional de layout automático, chamada de configurações de redimensionamento Você pode encontrar a configuração de redimensionamento na parte superior da caixa de layout Se você tiver o layout automático aplicado, isso pode estar no quadro principal ou no quadro aninhado, então você pode encontrá-lo aqui Mas também qualquer elemento dentro de um quadro de layout automático. Se você clicar nele, obterá a caixa de layout com as configurações de redimensionamento desse elemento Essa é a parte em que estamos interessados. Portanto, é muito importante entender que enquanto aplicamos o layout automático ao quadro principal, o menu de layout automático determina o comportamento de todos os elementos secundários dentro desse quadro. Então, o alinhamento de todos esses elementos, o espaçamento de todos esses Agora, se quisermos configurar como esses elementos devem se comportar individualmente, precisamos selecioná-los e definir seu comportamento de redimensionamento, não o comportamento de redimensionamento do quadro geral As opções atuais que temos são um tamanho fixo, encher o recipiente ou abraçar o conteúdo Auto Layout se tornou muito bom em adivinhar qual comportamento você pode querer Então você pode realmente escapar impune. Por exemplo, essa imagem aqui já está configurada para preencher o contêiner. E isso ocorre porque o layout automático detectou uma margem semelhante à esquerda e à direita. Mas eu recomendo fortemente que você não confie nessas predefinições e realmente tente entender uma vez como configurar o redimensionamento adequado As configurações de redimensionamento geralmente são a parte em que as pessoas ficam mais confusas sobre o layout automático, mas não são tão difíceis Na verdade, é só entender uma vez e praticar um pouco A parte crucial é ir passo a passo. Você não pode apressar isso. Então vá pouco a pouco. A primeira coisa que vamos selecionar é nossa imagem. Agora vamos ao nosso menu suspenso e vamos configurá-lo para encher o recipiente. Isso significa que, se redimensionarmos o contêiner, ele vai, bem, o que diz, preenchê-lo, sempre respeitando o preenchimento que dissemos à esquerda Aqui estamos lidando com uma configuração horizontal, então não estou me preocupando muito com a configuração vertical Ainda assim, vou ter este aqui em uma altura fixa. Isso significa que minha imagem está sempre fixada nessa altura específica. Agora vou usar o próximo elemento, que é meu texto, e quero fazer o mesmo. Não quero que isso seja corrigido no tamanho. Eu quero que isso seja horizontal para encher o recipiente. E eu vou fazer o mesmo com o meu texto de cópia. Eu também quero que isso encha o recipiente. Agora, com o texto, não quero fixar a altura porque não sei quão alta será se eu adicionar mais texto ou redimensionar É por isso que eu quero esse abraço. O abraço é um pequeno recurso muito fofo. Basicamente, pense nisso como dar um abraço no conteúdo vertical Ao lidar com texto copiado em layout automático, quero dizer qualquer coisa que não seja um botão ou um link, certifique-se de que esteja sempre configurado com altura automática Normalmente, o layout automático faz isso sozinho. E isso já é mais ou menos isso. Vamos redimensionar nossa caixa agora e você verá que tudo segue bem Mesmo que eu mude meu texto. Vamos adicionar mais texto de cópia aqui. Você pode ver porque isso está definido como altura automática e Hug a caixa se expande automaticamente e o layout automático responde Ainda posso alterar coisas como meu espaçamento e meu tamanho com o menu de layout automático Mas se eu redimensionar , tudo se comportará da maneira pretendida O recurso de layout automático do Figma é muito inteligente. Então, se eu, por exemplo, tenho um botão aqui, quero adicionar e transformo isso em layout automático, você pode ver que ele não apenas pega automaticamente todo o espaçamento, mas também já me dá uma sugestão de configuração de redimensionamento Agora, em um botão, abraçar horizontalmente e abraçar verticalmente faz sentido, porque se eu mudar isso, digamos que mude para ler mais, então você pode ver que eu quero que isso seja E, a propósito, também posso arrastar um quadro de layout automático para dentro de outro. botão seria aninhado e manteria suas configurações de redimensionamento Se quiséssemos movê-lo , o que poderíamos fazer é usar o alinhamento. Também podemos alterar suas configurações de redimensionamento. Por exemplo, se quiséssemos um botão em tamanho real , poderíamos alterá-lo para encher o recipiente e ele ficaria no meio. Observe que se o texto estiver preso à esquerda, isso provavelmente ocorre porque o alinhamento do botão ainda está definido para a esquerda e você pode alterá-lo para o centro 9. LAYOUT AUTO: 07 dicas de redimensionamento vertical: Algumas dicas de redimensionamento vertical que você pode gostar. Em designs como esses, talvez você queira que todo o carro tenha a mesma altura. Você pode ficar tentado a resolver isso manualmente. No entanto, essa não será uma solução muito boa porque assim que você estiver redimensionando, isso não funcionará mais. Há uma maneira muito mais fácil de fazer isso. O que você precisa fazer é selecionar todos os elementos secundários e, a propósito, há um pequeno atalho, selecione o contêiner principal, pressione enter e, em seguida, você terá selecionado todos os filhos diretos de uma só vez E agora vamos para a redimensionamento vertical e configurá-la para encher o contêiner. E aqui vamos nós. Agora, isso sempre encherá o recipiente. Isso é muito bom porque sempre temos o cartão com mais conteúdo ditando a altura para isso Isso ocorre porque o contêiner principal está configurado para ser abraçado e todas as crianças estão prontas para encher Outra coisa que você pode querer fazer é, às vezes, ter algo como um botão ou uma barra específica na parte inferior do cartão, não importa o tamanho. Agora também podemos fazer isso com nossa configuração horizontal. Tudo o que precisamos fazer é mudar de um valor fixo para automático. Lembre-se de que temos nosso atalho no menu de alinhamento, basta clicar duas vezes Você sempre pode ajustar o preenchimento individual. Vamos ver aqui na parte inferior, você pode simplesmente subir um pouco ou, claro, também na parte superior. Depende realmente de você como você deseja configurar isso. Você verá agora que, à medida que estamos redimensionando, tudo permanece no lugar certo Muitas vezes usamos nosso redimensionamento horizontal, mas também nos esquecemos um pouco do poder do redimensionamento vertical Portanto, não deixe de considerar isso. 10. LAYOUT AUTO: 08 Ignore o layout automático: Ignorando o layout automático. O que isso significa? Então, aqui eu tenho um quadro de layout automático. Quero arrastar esse novo adesivo até aqui e quero que ele fique em cima da minha imagem Agora, se eu simplesmente arrastá-lo para dentro do quadro de layout automático, você notará que não consigo puxá-lo para cima da imagem , pois ele se torna parte do layout automático assim que entra no quadro. O que posso fazer agora é colocá-lo dentro do quadro, selecioná-lo e, no painel de propriedades, em posição, você encontra esse pequeno ícone chamado ignorar layout automático. Nas versões anteriores, isso era chamado de posição absoluta. Agora você pode arrastar livremente seu elemento pela moldura do layout automático. Pequena dica, há também um atalho, mantenha pressionado o controle e arraste-o para dentro de uma moldura de layout automático, e então você terá que ignorar o layout automático aplicado automaticamente Se você quiser tirá-lo, basta clicar no ícone novamente. No entanto, ao redimensionar o cartão, você notará que ele não responde mais à largura. Isso ocorre porque ele não faz mais parte do layout automático. Portanto, o redimensionamento não se aplica. O que posso fazer para resolver isso é selecionar o elemento em uma posição próxima ao encontrar o menu de restrições e colocá-lo à direita Isso só funciona para elementos que não são de layout automático. Isso também é ótimo para criar coisas como bolhas de alerta Basta arrastá-lo para o quadro de layout automático, ignorar o layout automático e posicioná-lo onde quiser. Agora, por padrão, provavelmente vai cortá-lo. Certifique-se de selecionar o quadro principal e, no menu de layout automático, alternar do conteúdo do clipe para mostrar o conteúdo. Isso significa que vai mostrar tudo o que está transbordando de sua moldura 11. LAYOUT AUTOMÁTICO: 09 Componentes e variáveis de layout automático: Se você estiver usando variáveis e configurar uma coleção com seus valores de espaçamento, poderá usá-las no layout automático Essa é uma ótima maneira de garantir a consistência em todos os diferentes elementos e componentes do seu design. Para aplicá-los a um quadro de layout automático, basta selecionar o quadro e, em seguida, no menu de layout automático, encontrar os valores de preenchimento e espaçamento Se você passar o mouse sobre eles, verá um pequeno sinal variável aparecer Clique nele e você verá uma lista suspensa com todos os valores. Agora você pode escolher o valor a seguir. Você também pode usá-lo para seu espaçamento. Você só precisa aplicar a variável no menu suspenso e agora pode escolher qualquer variável que gostaria de aplicar. E você pode, é claro, aplicar a mesma variável várias vezes em diferentes elementos. Você sempre pode alterar a variável simplesmente clicando nela e escolhendo outro valor da lista ou destacá-la clicando no pequeno clipe Se você não vê esse clipe em alguns campos, pressione a tecla Voltar duas vezes. E lembre-se de que, em resumo, estamos trabalhando com uma abordagem baseada em componentes, então seria uma boa prática transformar qualquer quadro de layout automático que esteja sendo usado várias vezes em um componente Se agora retirarmos uma instância, você verá que a instância herdará todos os valores de espaçamento aplicados com variáveis Como estou alterando o texto na instância, essas variáveis permanecerão no lugar Obviamente, como acontece com qualquer outro componente, isso também funcionaria com qualquer outra variável. Por exemplo, se você definir uma variável de cor para seu componente, todas as instâncias herdarão 12. LAYOUT AUTOMÁTICO: 10 Como definir valores mínimos e máximos: Definindo valores mínimos e máximos. Ao redimensionar nosso design, às vezes não queremos ir abaixo ou além de um certo ponto, como neste cartão Eu não quero que seja menor do que isso. O que podemos fazer e, para que isso funcione, você precisa ter seu elemento configurado como um quadro de layout automático é que , nas configurações de redimensionamento, agora encontremos essa pequena lista suspensa e aqui podemos adicionar uma largura mínima Agora posso defini-lo apenas digitando um número ou usar uma pequena lista suspensa aqui Eu poderia aplicar uma variável se tivesse configurado uma de antemão Ou vou apenas usar set para a largura atual. Agora também vou adicionar uma largura máxima, e você pode usar as duas ou apenas uma delas, da maneira que precisar. Novamente, vou clicar no pequeno menu suspenso aqui, adicionar uma largura máxima e, nesse caso, vou digitar o número 500. Agora você pode ver que, se eu estiver redimensionando , não vou permitir que eu redimensione abaixo ou além desse ponto Neste exemplo, não faria muito sentido, mas caso você precise de outro design, é claro que você também pode definir uma altura mínima e máxima. Você pode aplicá-las no máximo ao quadro principal, mas também pode aplicá-las a qualquer elemento dentro do quadro de layout automático. Por exemplo, eu não quero que esse texto cresça. Vou selecioná-lo e adicionar um valor máximo, configurá-lo para a largura atual e agora observar como esse texto ainda está configurado para preencher o contêiner. Conforme eu redimensiono, ele vai crescer bem. No entanto, ele atingirá um certo limite e deixará de crescer e permanecerá bonito e legível 13. LAYOUT AUTO: 11 wraps de layout automático: Envolvendo elementos entre linhas. Aqui eu tenho uma moldura de layout automático que contém instâncias do cartão e um elemento do boletim informativo. Atualmente, eles estão todos configurados para um tamanho fixo. Agora, aprendemos sobre posicionamento horizontal e vertical. Mas há um terceiro chamado Ap. Se eu selecionar Ap em um quadro de layout automático, agora posso redimensionar e os elementos fluirão para a próxima linha assim que não houver espaço disponível suficiente Com a ajuda do menu de alinhamento, podemos escolher como eles fazem isso Assim, podemos centralizá-los, configurá-los à esquerda ou à direita, ou um dos meus favoritos, clicar duas vezes e agora configurá-lo como Automático e, portanto, eles usarão todo o espaço disponível. Agora, isso funcionará com elementos fixos, e poderíamos, por exemplo, colocar esse cartão aqui para encher o contêiner. Vamos ver o que acontece agora se redimensionarmos. Vamos tirar o carro e agora podemos ver que, à medida que estamos redimensionando, ele salta para uma nova linha, que está ocupando toda a largura No entanto, o que podemos ver aqui é que isso não funciona corretamente porque vai acabar com isso demais. Portanto, podemos combinar isso muito bem com as configurações mínima e máxima. O que vamos fazer é definir isso no componente principal, para isso no componente principal, que todas as instâncias herdem Vou selecionar isso aqui e agora vou usar o menu suspenso e adicionar uma largura mínima e defini-la para a largura atual, mas não vou definir uma largura máxima por enquanto. Se eu estiver redimensionando agora, você pode ver que agora, ao pular para a linha superior, ele manterá um tamanho perfeito, mas à medida que for para a próxima linha, ele ocupará todo o espaço E podemos combinar isso exatamente como precisávamos. Poderíamos fazer o mesmo com esta carta aqui com um valor mínimo, vamos usar o tamanho atual e, em seguida, um valor máximo, digamos, em torno desse tamanho. Agora, o que precisamos fazer é que isso ainda esteja definido como um valor fixo. Vamos selecionar todos esses cartões e configurá-los para encher o recipiente. Agora, à medida que redimensionamos, você pode ver que eles estão bem redimensionados com suas próprias configurações mínimas e máximas 14. 12 Imagens com proporção fixa: Agora configure as imagens de proporção Aspec com o Figma. Aqui eu tenho um cartão de layout automático com uma imagem. Agora, basta selecionar o elemento ao qual você deseja aplicar a proporção. A propósito, isso também funciona para molduras. E então, ao lado do seu tamanho você vê essa pequena fechadura. Clique nele. E se você agora redimensionar, verá que a imagem mantém bem a proporção Um pouco deprimente, se você pular para o modo surdo neste momento, mas lembre-se de que acabamos de lançar, essa é a tradução que vemos Idealmente, gostaríamos de ter uma relação de aspecto, como a vemos no CSS, mas ainda é cedo 15. LAYOUT AUTO: 13 Aprenda sobre aninhamento e relação de pais filhos: Vamos entender o aninhamento e o relacionamento entre pais e filhos. para entender o aninhamento no layout automático, bem como no código, é importante entender a relação pai-filho Aqui você pode ver um design de cartão que eu configurei. Agora, não há nenhum layout automático aplicado até o momento. Você pode ver que esse cartão tem clusters. Essa parte intra aqui pertence uma à outra, e então temos um texto e um link que pertencem um Agora, se eu selecionasse esse cartão e simplesmente aplicasse o layout automático , isso aconteceria. O que aconteceu é que o layout automático adicionou a mesma quantidade de espaçamento entre todos os elementos A razão para isso é que layout automático é assim. Nosso quadro é o elemento pai e, em seguida, tudo o que ele encontra logo abaixo na primeira camada da hierarquia são os filhos Todas as regras de layout automático são aplicadas a todas essas crianças. Nesse caso, nosso espaçamento. Agora, se prosseguirmos e aninharmos isso, agora eu tenho uma moldura aninhada de layout automático aqui, e também aninhei essa parte Em seguida, o layout automático analisará o design desta forma. Temos o quadro de exemplo de aninhamento que ainda é o principal, mas agora temos apenas três elementos secundários Agora, se mudarmos nosso espaçamento, por exemplo, isso só afetará as crianças Ainda temos todas as nossas camadas, mas agora elas são netas Eles vão seguir as regras de seus próprios pais. Dependendo de como você deseja que seu design mude e se comporte, você precisa ajustar esse aninhamento Por exemplo, digamos que você queira uma imagem de largura total. O que precisamos fazer é nos livrar do nosso estofamento em ambos os lados No entanto, o que também queremos é que ainda queremos ter alguma margem aqui. O que podemos fazer agora é selecionar esses dois, criar outro layout automático aninhado e aplicar as margens à esquerda e à direita Se quisermos nos livrar da parte superior, também podemos fazer isso, defina isso como zero. Agora você pode ver que tem um layout completamente diferente, que também precisa de suas próprias funções de aninhamento É por isso que é tão importante se concentrar na nidificação e, na verdade, trata-se apenas de praticar Então, o layout automático realmente não se trata apenas de aplicar aquele pequeno botão aqui. Trata-se de pensar na estrutura geral do seu design e, em seguida, aplicar quadros de layout automático onde você precisar deles e, muito importante, todos esses quadros de layout automático que você aninhou, bem como todas as camadas dentro deles, você precisa pensar cuidadosamente sobre o comportamento de redimensionamento que você deseja que eles tenham Na verdade, trata-se de entender e combinar os três pilares do layout automático 16. LAYOUT AUTO: 14 Sugira layout automático: Vamos adicionar um pouco de mágica que sugere layout automático. Aqui eu tenho alguns designs que precisariam de algum aninhamento se eu quisesse transformá-los em layout automático A primeira é bem simples, essa parte seria um layout automático aninhado, depois essa parte e, em seguida, tudo isso é um layout automático vertical O segundo cartão é um pouco mais complexo. Essa parte direita precisaria ser um aninhamento de layout automático vertical e, em seguida, o próprio aninhamento de layout automático horizontal do cartão Então, temos uma navegação, então essa parte direita precisaria ser aninhada E eu, entre o logotipo e esta parte aninhada direita, precisaríamos configurar automaticamente e também conhecer o espaço de aninhamento entre eles Agora, podemos fazer tudo isso manualmente ou podemos usar um pequeno truque. Vamos começar com o primeiro. Se eu simplesmente selecionasse uma moldura, aplicasse o layout automático, isso aconteceria, o que não é bom. Além disso, se dermos uma olhada no segundo, definitivamente precisamos de alguns ninhos aqui Mas o que podemos fazer é clicar com o botão direito do mouse e, em seguida, você verá , no layout automático do anúncio, outra opção chamada Sugerir layout automático. Ou também podemos usar os atalhos Shift Control e A. No painel de camadas, você pode ver que o layout também sugere um aninhamento para Agora, acabei de chamar esse quadro para que possamos adicionar uma pequena dica adicional, que é clicar no menu AI e renomear suas camadas E então você também obterá alguns bons nomes de camadas para esses elementos aninhados Agora vamos dar uma olhada se isso funciona. Isso parece muito bom se eu estiver redimensionando aqui. Se clicarmos aqui, podemos ver que isso também adicionou nosso redimensionamento Isso está configurado para preencher, e também meu pai aqui está configurado para preencher. Se eu quiser mudar isso, posso simplesmente excluir ou arrastar esses elementos pelo meu painel de camadas e alterar meu aninhamento Então, vamos tentar a próxima, e vamos selecionar esta carta, Shift Control e A. Vou usar o atalho Além disso, vou renomear as camadas. Vamos dar uma olhada. Isso também parece muito bom. Eu ainda posso fazer ajustes. Digamos que eu queira que essa imagem ocupe metade do contêiner, então eu posso simplesmente selecioná-la e alterar meu redimensionamento para encher o contêiner Assim, eu o ajustei da maneira que eu quero que ele se comporte. Nosso último, vamos dar uma olhada na navegação. Shift control e A, nosso atalho, também vamos adquirir o hábito de renomear as camadas Isso vai renomear qualquer coisa que eu não tenha citado antes Esses que eu mencionei antes não vão sobrescrevê-los. Vamos dar uma olhada se isso se aplica automaticamente por si só. Sim Perfeitamente, podemos ver que no menu de alinhamento aqui, esse automático foi aplicado Isso realmente costumava ser algo muito difícil fazer antes de termos esse pequeno recurso. Faça uso disso. No entanto, eu ainda recomendo fortemente que você também adquira o hábito de entender o aninhamento manual Porque em algum momento você quer mudar as coisas e precisa entender por que as coisas estão configuradas de uma certa maneira. pequena observação: no momento da gravação desse recurso, é muito novo e ele é muito novo e, considerando o quão poderoso e importante é, eu esperaria que ele saísse desse pequeno submenu de clicar com o botão direito do mouse para o menu principal de layout automático em breve, então cuidado com isso 17. LAYOUT AUTO: 15 alguma magia com tabelas: Um pouco de mágica com mesas. layout automático também é muito útil quando você deseja criar coisas como uma tabela responsiva Então você pode ver aqui que eu configurei uma linha. Isso é simplesmente um quadro de layout automático, e atualmente está configurado para uma largura fixa e, em seguida, verticalmente para abraçar E aí dentro, eu tenho todas as minhas colunas diferentes, e elas são configuradas para encher o recipiente e abraçar, e apenas a primeira, que é um número, eu a defino para um tamanho fixo Porque eu configuraria isso para preencher, então ocuparia muito espaço. O que eu quero fazer agora é prolongar um segundo. Vou manter esse primeiro e, na verdade, vou selecionar o quadro principal em Enter. Lembre-se de que isso seleciona todos os elementos secundários, e vou deixá-los em negrito Então, aqui, eu quero preencher todo o conteúdo. Você pode preencher isso manualmente ou eu vou usar o Figma AI e, a propósito, estou gravando isso quando isso acabou de sair, então provavelmente vai parecer um pouco diferente quando você assistir isso e basta selecionar o quadro em que deseja que o conteúdo seja preenchido e eu vou contar, inventar algum conteúdo Agora vou apenas arrastar uma cópia. O que você também pode fazer é, depois ter uma cópia, pressionar o comando N D, e isso copiará mais na mesma distância. Agora estou selecionando todas as minhas linhas e pressiono Shift novamente para aninhá-las dentro de uma moldura de layout automático. Porque o que eu posso fazer agora é me dar essa pequena alça mágica. Eu posso selecionar o quadro e, em seguida, ir aqui e clicar em Substituir conteúdo para preenchê-lo. Ou eu posso simplesmente arrastar as alças para abrir, posso criar quantas linhas eu precisar, e isso vai preencher esse conteúdo para mim, o que é muito bom. Agora, vou apenas conectá-lo à minha nomenclatura aqui e vou selecionar os dois. É a mudança A novamente. Vamos dar uma olhada se meu layout automático funciona. Sim, isso funciona perfeitamente. Caso isso não funcione, certifique-se de selecionar o quadro principal, pressionar enter e verificar se tudo está pronto para ser preenchido. Isso deve ser configurado para preencher e também deve ser definido para preenchimento. É assim que você pode criar uma tabela rapidamente com o layout automático do Figma e um pouco de IA 18. LAYOUT AUTOMÁTICO: 16 exemplos de configuração mais avançados: Vamos praticar o aninhamento e o redimensionamento mais avançados. Aqui, tenho um conjunto de layouts mais avançados e realmente quero examiná-los com mais detalhes Quero mostrar, por um lado, como eu os aninharia manualmente, porque acho muito importante que você entenda o conceito geral de como pensar em layout automático e aninhamento E então também vamos executar a forma automática de aninhamento do Figma e também podemos comparar os resultados Vou passar por isso bem rápido. A ideia é que você dê uma olhada no que eu faço, faça pausa e depois vá para o seu arquivo de exercícios Na verdade, trata-se de fazer isso sozinho e pegar o jeito, porque o layout automático, especialmente quando se trata de comportamento de redimensionamento e aninhamento, tem tudo a Ok, então vamos começar com nosso primeiro cartão aqui. Então, eu vou pegar uma cópia. E antes de tudo, isso é bem simples Então isso aqui seria uma unidade, então eu seleciono isso e pressionei Shift A. E acho que é mais ou menos isso. E vou selecionar um quadro principal e posso pressionar Shift A ou usar o menu para aplicar o layout automático. Então, vamos dar uma olhada no comportamento. Isso já está parecendo muito bom. layout automático realmente se tornou fantástico em sugerir comportamento. Eu posso dar uma olhada. Isso aqui para mim é mais parecido com um botão, então provavelmente vou definir isso para Huck como conteúdo, mas caso contrário, tudo funciona bem Caso contrário, certifique-se de selecionar uma moldura aninhada, verifique se ela está definida como preenchida, use o atalho enter para obter todas as crianças e, em seguida, verifique se elas também estão configuradas para Agora, vamos experimentar o mesmo e usar o original. Eu rastreio outra cópia. O que vou fazer aqui é clicar com o botão direito do mouse e ver mais opções, sugerir ou criar um layout, ou simplesmente usar o atalho E vamos dar uma olhada, e isso realmente nos deu exatamente o mesmo resultado. Então, sim, poderíamos absolutamente usar um atalho aqui. Vamos para o nosso próximo cartão. Isso é um pouco mais complexo. Portanto, temos direções diferentes. Em primeiro lugar, temos esta seção aqui que é um layout automático vertical e, em seguida, o cartão em si é horizontal. Então, primeiro de tudo, vou selecionar esses títulos aqui novamente, Shift e A, e depois todo esse shift e A. Agora eu posso adicionar layout automático ao cartão inteiro Novamente, o atalho ou o menu. Vamos dar uma olhada em como esse comportamento. Está funcionando e isso realmente não está funcionando no momento. O que temos que fazer é mandar todo esse primeiro quadro encher o recipiente. A propósito, há um atalho para unhas. Se você apenas arrastá-lo até o final, poderá ver esses pequenos sinais aparecendo aqui e agora estão automaticamente configurados para serem preenchidos. Em seguida, também faremos isso com esses elementos do gráfico, que já estão configurados para serem preenchidos Pressione enter, verifique se tudo está configurado para ser preenchido. Isso está pronto para preencher, e aqui, eu prefiro ter esse conjunto para abraçar Isso não funcionou. Vou fazer isso de novo, e agora isso está funcionando. Agora, lembre-se, você pode reposicionar essa imagem aqui com o menu de alinhamento e definir esses dois preenchimentos também Então, obteremos algo assim. Isso não é realmente o que eu procuro. Então, o que eu quero é, na verdade , a posição original. Ok, isso parece ótimo. Agora vamos tentar novamente com nossa sugestão automática. Estou trazendo isso aqui, e vou usar um atalho desta vez, ou sugerir, e vamos dar uma olhada no que temos Na verdade, isso parece muito bom. Nesse caso, na verdade, a melhor solução já foi encontrada em todas as configurações. Novamente, estou apenas arrumando pequenas coisas, como se eu preferisse ter esse conjunto para abraçar Nada dramático, se você não quiser. O próximo. Este tem uma parte superior e depois uma parte inferior. Novamente, primeiro seleciono o turno A do título e depois o combino com o turno A. Agora posso aplicar o layout automático ao cartão inteiro Veja o que acontece com esse pequeno marcador aqui em cima. Então isso não está funcionando. Ele realmente não sabe o que fazer com isso. Vou apenas arrastá-lo para fora e, na verdade fixar o acolchoamento novamente. Por algum motivo, isso se configurou para ser encerrado. Não queremos isso, queremos que seja na verdade um layout horizontal também. Vou adicionar um pouco mais de margem aqui. Aperte bem esse também. Agora vamos dar uma olhada. Novamente, não está funcionando conforme o esperado, então vou analisar isso pouco a pouco. Eu quero este aqui para encher o recipiente, encher o recipiente, e esta parte aqui também. Na verdade, trata-se de selecionar tudo pouco a pouco. Podemos fixar o espaçamento aqui. Também podemos definir este. Sim, como eu disse, normalmente, se você puxá-lo até o final, ele deve pegar o contêiner de arquivo automaticamente. Às vezes não funciona, então você só precisa usar um menu suspenso. Essa, novamente, quero abraçar, então vamos dar uma olhada, então está funcionando Agora, o que queremos que aconteça é arrastar essa de volta para cá. Lembre-se de que podemos usar nosso pequeno layout automático mágico para ignorar, ou também podemos fazer isso automaticamente, manter pressionada a tecla de controle, e ela automaticamente terá essa configuração e agora podemos colocá-la aqui. Não esqueça suas restrições. E agora devemos ser capazes de redimensionar isso. Perfeito. Agora vamos experimentar nossas sugestões automáticas. Novamente, estou retirando o botão direito original para sugerir layout automático E isso está parecendo muito bom. Vamos ignorar nosso pequeno marcador por enquanto. Parece que está tudo bem. Não é perfeito, mas muito bom. Vamos retirar o marcador e, se o arrastarmos de volta para dentro, podemos usar nosso layout de ignorar ordem posicioná-lo da mesma forma que antes Não esqueça suas restrições. A propósito, se você quiser que este quadro passe por cima dele, verifique se você tem o conteúdo do clipe definido. Agora vamos dar uma olhada em como isso é configurado, encher recipiente, encher recipiente, criar um pequeno recipiente extra por aqui, como fizemos antes, e encher. Sim, isso está realmente nos dando uma solução muito boa. A única coisa que eu não gosto é não empurrar para baixo. Vamos dar uma olhada nisso aqui, temos a origem do erro. Isso precisa ser configurado para abranger o conteúdo. Ele vai responder o que quer que aconteça aqui. Ainda não está acontecendo. Vamos entrar aqui também. Abrace o conteúdo. E agora você pode ver que está funcionando. E é por isso que o Auto Sugest é fantástico, mas também tente praticar aninhamento e a configuração do comportamento de redimensionamento sozinho de redimensionamento sozinho porque esses pequenos erros vão acontecer e você precisa entender por que Você só entenderá isso se tiver aninhado e redimensionado manualmente Ok, vamos com o nosso último. Esse aqui. E vamos dar uma olhada. Este é um pouco mais difícil de aninhar. Em primeiro lugar, vamos aos poucos. Temos essa parte e a estamos juntando à imagem Sempre veja se a direção já está bem captada pelo layout da água Então vamos nos preocupar com essa parte aqui embaixo. Vou selecionar primeiro os pequenos ladrilhos. Vamos resolver isso em um minuto. E esses dois, eu também preciso resolver. Na verdade, vou deixar este porque parece que tem a mesma distância aqui e aqui, então pode ser um elemento filho próprio. Vamos resolvê-los e você verá que eles estão empilhados na ordem errada, então podemos ir para a configuração avançada e simplesmente alterar o empilhamento Agora vamos transformar esses dois em um quadro de layout automático também. Vamos entrar no meio e ver como o layout automático já percebi que temos uma grande distância aqui, e isso está realmente nos ajudando, embora estejamos aninhando manualmente para configurar o Então, vamos adicionar também o layout automático ao quadro principal. Agora vamos dar uma olhada em como nosso redimensionamento está funcionando. Parece muito bom, exceto aqui em cima, vamos dar uma olhada no que acontece aqui, pronto para encher o recipiente. Então esse aqui, é aqui que o erro aconteceu. Também queremos que isso encha o contêiner, e só precisamos pegar o pai novamente, e isso está atualmente definido como Automático, então temos que retirar isso e adicionar uma pequena lacuna aqui. Vamos dar uma olhada agora, e está ótimo. Vamos dar uma olhada no que a sugestão automática nos daria. Vamos pegar a mesma carta, shift, control e A. Você pode ver que ela está aninhada Vamos redimensionar e ver o que aconteceu. Na verdade, isso está me dando um resultado bastante decente. Aqui embaixo, você pode ver que isso não pegou. Vamos ver por dentro, precisamos centralizar isso para torná-lo mais bonito e depois configurá-lo para encher o recipiente Caso você tenha acabado de me ver fazer isso e esteja completamente sobrecarregado Isso é normal. O que você precisa fazer é começar esses exercícios e realmente brincar com eles e se concentrar em esses exercícios e realmente brincar com eles e estruturar, aninhar e redimensionar Vá em frente. 19. LAYOUT AUTO: 17 páginas de layout automático: Criação de páginas inteiras de layout automático. Devido ao poder do aninhamento e do relacionamento pai-filho, podemos usar o layout automático a partir do menor elemento, como um botão, até criar nossos componentes, organizando-os em grupos até páginas inteiras Agora, até agora, analisamos elementos menores, coisas como um cartão e uma navegação. Isso é por uma razão. Em geral, aconselho que, mesmo que você comece a projetar livremente, o que eu absolutamente encorajo, em algum momento, quando começar a seu arquivo, pense e organize tudo em componentes Em seguida, certifique-se de configurar primeiro o layout automático dentro desses componentes. Eu fiz isso aqui por você. Deixe-me mostrar que, se eu retirar uma instância, você verá que ela herda todas as configurações e poderá ver que isso já está funcionando muito bem com o layout automático, o mesmo aqui Você sempre pode acessar seu arquivo de exercícios para ter uma visão melhor da configuração. Agora vamos criar nossa moldura principal. Eu pressiono F e vou selecionar qualquer quadro predefinido. A propósito, você também pode desenhar isso. O tamanho realmente não importa porque vamos redimensionar de qualquer maneira Agora eu posso simplesmente arrastar as instâncias dos meus ativos. Em um projeto maior, você obviamente encontraria esses ativos em seu painel de ativos aqui. Agora, você já pode aplicar o layout automático ao quadro principal e depois organizar tudo à medida que avança. Pessoalmente, prefiro deixar assim porque me dá a liberdade de realmente mover minhas instâncias livremente por esse quadro, e sinto que tenho muito mais liberdade quando se trata de projetar assim. Mas depois de finalizar a página, agora podemos transformá-la em um quadro de layout automático ou, a propósito, você também pode simplesmente deixá-la como uma página estática, que também é bom na maioria dos casos, porque todo o seu comportamento responsivo já está incorporado em seus componentes Isso é algo que você deve discutir com sua equipe de desenvolvimento se realmente vale a pena configurar a página inteira novamente no layout automático. Mas só para a prática, vamos fazer isso. Agora, podemos clicar no layout automático aqui e depois classificá-lo manualmente, ou, o que vou fazer, vou clicar com o botão direito do mouse e usar meu layout automático sugerido. Novamente, lembre-se dos atalhos Control, Shift e A. Vamos dar uma olhada mais de perto. O que aconteceu. Bem, se redimensionarmos , podemos ver que alguns elementos estão funcionando perfeitamente bem Por exemplo, minha navegação e aqui meu interratexto e meu rodapé, porque são elementos bem simples Agora, se dermos uma olhada nas minhas cartas, tive sorte e elas foram realmente escolhidas muito bem. Percebi que provavelmente quero que isso termine. Quando eu o posiciono aqui no topo. E isso é realmente muito bom. Só preciso limpar um pouco. Nesse caso, o que eu preciso fazer é também dizer margem esquerda e direita, então vou configurar isso aqui e um pequeno truque, o que você pode fazer é usar essa é a minha lacuna. Aqui está meu estofamento. Você pode usar variáveis para fazer isso. Eu uso essas variáveis já em meus componentes. Você pode ver que meu preenchimento está configurado com variáveis. Então, minha navegação, tudo isso tem as mesmas variáveis usadas quando se trata de preenchimento Então, se eu quiser alterar o preenchimento, eu poderia simplesmente configurar também uma variável de preenchimento separada para isso, e então eu tenho que alterá-la uma vez, e não preciso me preocupar fazer tudo isso manualmente Não precisa, só uma pequena dica na lateral. Caso contrário, eu gosto bastante da aparência disso. Eu poderia brincar com essas cartas. Por exemplo, eu poderia colocá-los no centro ou clicar duas vezes e, em seguida, eles se distribuiriam uniformemente. Então, se redimensionarmos , ficaria assim Agora, com este exemplo, tivemos muita sorte nesse trabalho. Mas você notará que, com o layout automático sugerido, às vezes você não terá tanta sorte e terá um comportamento estranho assim que tiver elementos que não são tão simples quanto um layout automático simples que precisa ser terá um comportamento estranho assim que tiver elementos que não são tão simples quanto um layout automático simples que Então, se digamos que estamos passando por uma bagunça aqui e queremos fazer isso de novo, então o que você sempre pode fazer é arrastar essa parte do layout automático e depois separá-la fora da moldura do layout automático Então, o que eu poderia fazer era ter essas cartas e reconstruir tudo isso rapidamente Apenas se livre disso. Selecione-os. E agora eu poderia simplesmente arrastá-los de volta para o quadro de layout automático. Outra pequena dica: se você tiver algo maior do que a moldura do layout automático, não verá aquele pequeno posicionador mágico que acabamos de ter, pressione o comando e, em seguida forçará o posicionamento Ele vai configurá-lo para encher o recipiente. Novamente, você notará que provavelmente teremos que limpá-lo um pouco, colocá-lo de volta para encher o recipiente, mas nós o temos aqui. Então, novamente, vou adicionar minha variável para o preenchimento. Eu teria a mesma configuração, mas você tem mais controle sobre ela. É muito difícil organizar as coisas dentro de uma página com todas essas camadas aninhadas. Sempre sinta-se à vontade para arrastar um elemento, especialmente se você tiver uma composição, deixe isso de lado e arraste-o de volta para um melhor controle. Agora vou limpar isso um pouco. Vamos executar as camadas vermelhas. Poderíamos gerar imagens, mas na verdade tenho algumas de outro arquivo que quero usar. Vou usar um dos meus atalhos favoritos com o comando shift N C, que copia um PNG, e vou preenchê-los rapidamente aqui Agora vamos dar o último toque. Também quero alterar um pouco o conteúdo. Vou pedir a ela que invente alguns nomes de workshops e apenas um pequeno intratexto Esse é o tipo de comportamento que você teria, e isso é absolutamente normal. E agora temos nossos cartões em um tamanho fixo. Lembre-se de que você também pode sempre usar valores mínimos e máximos. Nós aplicaríamos isso ao componente principal. Todas as instâncias herdariam. Vou adicionar um minuto. Vou escolher alguns números aleatórios aqui. Sempre mude isso mais tarde. Vou usar 300 min e digamos 450 no máximo. Você pode ver que nada aconteceu aqui. Isso ocorre porque esses cartões ainda estão configurados com uma largura fixa. Selecione a moldura que contém todas as cartas, pressione enter, então você pega todas as cartas individuais e agora define todas essas cartas para encher o recipiente. Eles serão preenchidos, mas não além do valor máximo, e é por isso que o RAP, nesse caso, ainda estaria funcionando. Se você quiser se livrar disso novamente, selecione esse contêiner, pressione Enter novamente, volte para a largura fixa e, em seu componente, remova o mínimo e o máximo. Agora, o que você precisa fazer porque basicamente anulou a configuração de largura, selecione todas as cartas novamente pressionando Enter e, por meio do painel de propriedades, agora você pode, com três pequenos pontos, escolher redefinir e redefinir Agora você tem o tamanho original do componente novamente. 20. LAYOUT AUTO: 18 Layout automático e flexbox de CSS: Layout automático no CSS Flexbox. Agora, provavelmente há algumas coisas que você não gosta no comportamento ao configurar mais designs com layout automático. Uma das coisas pode ser que, se estivermos redimensionando, talvez você queira ter a mesma quantidade de cartões Podemos jogar com valores mínimos e máximos e configurá-los para encher o recipiente, mas você não vai ter essa sensação de grade. A razão para isso é que, se dermos uma olhada em nosso design e pularmos para o modo def , você verá que tudo isso está configurado com algo chamado flex Isso ocorre porque o layout automático representa basicamente uma caixa flexível Se você é um desenvolvedor, isso faz muito sentido. Se você é designer, talvez nunca tenha ouvido falar do Flexbox Você não precisa conhecer o Flexbox, mas é muito útil entendê-lo um pouco porque é por isso que o layout automático se comporta Em CSS, usamos o Flexbox para posicionar elementos. O Flexbox é a chamada abordagem de layout unidimensional. Isso significa que ele colocará seus elementos um após o outro. Pense nisso como batidas em uma corda. Se você alterar algum elemento, então se ele ficar menor ou maior, isso será ajustado adequadamente, o que é ótimo para muitas coisas. Mas o que o Flexbox não permite que você faça é colocar seus elementos em alguma grade Em CSS, usaríamos algo chamado grade CSS, que é uma abordagem de layout bidimensional. Nine Figma, atualmente não temos isso. Temos uma abordagem de grade mais rígida no FIMMA, e vou falar sobre isso em Mas na vida real ou no navegador real atualmente, provavelmente os desenvolvedores usarão CSS rid e eles têm muito mais possibilidades para a configuração geral da página do que você tem no Figma Então, isso é realmente apenas uma breve visão geral. Esses tópicos de layout CSS, caixa flexível e grade são obviamente muito mais complexos, e há muitas subferramentas e coisas para entender Agora, como designer, você não precisa configurar isso. Você não precisa ser um especialista nisso, mas eu recomendo fortemente que você dê uma olhada na compreensão geral do layout CSS moderno. Você não precisa, mas isso lhe dará uma grande vantagem. Portanto, continue trabalhando com o layout automático no Figma, mas também esteja sempre em contato próximo com seus desenvolvedores, informe-os sobre isso e, seguida, algumas coisas poderão ser testadas muito melhor no navegador no que diz respeito ao layout geral da sua página Durante este curso, voltaremos ao Figma. No entanto, em seu material de trabalho, adicionei alguns links se você quiser ler mais sobre esse assunto. Eu também tenho uma análise aprofundada separada do Mole Dot IO no layout CSS moderno Você encontra todos os links em seu arquivo de trabalho. 21. LAYOUT AUTO: 19 componentes de slot com layout automático: Criação de componentes de slot com layout automático. Basicamente, um componente de slot é um componente em que você tem algum espaço reservado e pode então inserir conteúdos diferentes Isso geralmente é usado em código. Não temos um recurso de slot como tal, mas podemos praticamente construí-lo com componentes e layout automático. Aqui eu tenho um cartão de layout automático e você pode ver que eu tenho um slot dentro daqui. Se eu simplesmente excluir isso , tudo o que faço é criar uma instância a partir desse componente de slot, arrastá-la para dentro daqui e garantir que ela esteja configurada para encher o contêiner e abraçar o conteúdo Por mais alto que seja esse conteúdo, ele será abraçado. Agora você pode ver, além do slot, que eu tenho o layout de outros componentes, um e o layout dois, que podem ser encaixados aqui Tudo o que preciso fazer agora é criar uma instância do componente de slot e agora posso clicar duas vezes, selecionar um slot e, por meio da troca instantânea, posso simplesmente inserir qualquer um dos meus outros designs Uma pequena dica, um pouco mais avançada, selecione um slot. Agora vamos definir uma propriedade. Clique nos três pontinhos. Vá para aplicar a propriedade de troca de instância. Crie uma propriedade, e agora você pode ver aqui este menu, então vou chamar esse slot. E aqui embaixo, agora você pode escolher os valores preferidos. No meu menu, você pode ver que eu tenho muitos componentes. Vou escolher as duas opções que configurei para esse cartão. Agora, se eu selecionar a instância, você verá que tenho uma pequena lista suspensa com o slot e só recebo as opções certas para serem trocadas Isso é muito útil que todo mundo usa para corrigir a configuração 22. RESTRIÇÕES: 01 Quais são as restrições no Figma?: Restrições no Figma. No Figma, temos outro recurso que nos permite controlar o comportamento ao redimensionar, chamado de restrições Selecione qualquer elemento dentro de um quadro, e isso deve ser apenas um quadro simples, não um quadro de layout automático. Agora você verá linhas pontilhadas azuis que apontam para o próximo quadro principal Essas são as restrições. Você também pode vê-los no menu do lado direito, sob restrições No entanto, somente em molduras padrão, elas não estão disponíveis em molduras de layout automático. Por padrão, essas restrições são definidas para cima e para a esquerda. E observe que, mesmo quando você tem molduras aninhadas, elas sempre vão até o pai mais próximo Então eu redimensiono, parece que nada acontece porque eles estão definidos para a esquerda e para cima No entanto, se alterarmos essas restrições, por exemplo, vamos defini-las para a esquerda, para a direita, para esta caixa e, em seguida, neste ponto vermelho aqui, vou defini-las para baixo e para a Observe como eles mudam e eles mostram que lado estão fixados Vamos colocar este aqui no centro. Você pode usar os menus suspensos ou simplesmente usar o ícone e clicar nas diferentes direções À medida que os fixamos em suas novas direções e agora os redimensionamos, você pode ver que isso muda seu comportamento, e podemos configurá-los horizontalmente ou também Fixá-los em um lado ou na parte inferior parece muito óbvio Mas às vezes ficamos um pouco confusos quando falamos sobre centro, a chamada esquerda direita e escala. A diferença entre eles é que fixo simplesmente tem uma margem fixa esquerda e direita. Onde quer que você a coloque , ela manterá essa distância, escala tem uma margem percentual para onde quer que você a coloque, e o centro permanece no centro relativo. E o mesmo, obviamente, funciona na horizontal e na vertical. Uma pequena dica: às vezes você só quer redimensionar o quadro principal e ignorar as restrições Nesse caso, mantenha pressionado o comando e ele simplesmente ignorará as restrições enquanto você o mantém pressionado 23. RESTRIÇÕES: 02 restrições e grades: Restrições e grades. Em vez de configurar tudo com layout automático, poderíamos simplesmente configurar nosso componente como componentes de layout automático. Então, o que poderíamos fazer é usar a esquerda e a direita para fixá-las nos lados esquerdo e direito, e fazemos o mesmo aqui. Podemos até adicionar elementos como essa pequena bolha aqui e configurá-la na parte inferior e direita Agora, se estivermos redimensionando , obteremos praticamente o mesmo resultado, mas é muito mais fácil do que configurar um quadro de layout automático No entanto, você notará que, embora isso funcione muito bem para configurações móveis simples com esse único elemento, assim que você adicionar mais elementos, simplesmente não funcionará Porque o problema aqui é que, se estivermos usando a esquerda para a direita , ela percorrerá toda a distância. Ele não conhece esses outros elementos ao redor. O que poderíamos fazer é selecionar todos eles e configurá-los em escala. Mas com isso, funcionaria, mas não manteríamos uma distância definida. Portanto, não conseguíamos realmente manter nosso preenchimento alinhado com, por exemplo, nossa navegação Uma ótima maneira de lidar com isso é adicionar uma grade. Porque dê uma olhada, se eu estiver adicionando minhas restrições à esquerda e à direita em uma grade , agora ele examinará a coluna mais próxima porque está considerando as colunas como pais Portanto, o que aconteceria agora, se selecionássemos todas essas cartas e as colocassemos à esquerda e à direita, é que elas permaneceriam nas colunas designadas durante o redimensionamento Agora, podemos fazer o mesmo com nossa navegação aqui. Vamos configurá-lo para a esquerda e para a direita. Você pode ver que, com apenas alguns cliques e poucas complicações, estamos obtendo uma configuração responsiva e podemos testar nosso design Agora, isso é muito útil apenas para um teste rápido e também funciona muito bem, se, por exemplo, você estiver trabalhando com números ímpares Digamos que você não queira distribuir tudo uniformemente. Isso não funcionaria com o layout, mas funciona muito bem com uma grade. No entanto, isso também tem desvantagens porque a grade não respeita nenhum preenchimento vertical e, portanto, não sabe a distância entre aqui e aqui Se você adicionar mais elementos, como texto, as coisas começarão a fluir umas para Mas isso é puramente um problema da Figma. Isso não será um problema no código posteriormente. Então, eu ainda gosto de usar grades para testes rápidos. No entanto, isso não substitui o layout automático. Seus componentes sempre devem ser configurados com layout automático, mas às vezes é muito mais rápido testá-los rapidamente com uma grade e restrições Uma pequena dica: você sempre pode ativar e desativar a grade, ou usar o painel de propriedades do lado direito e clicar no ícone, ou você também pode usar os atalhos Control e G. Se você tiver a grade desativada, todas as restrições ainda permanecerão no lugar 24. RESTRIÇÕES: 03 Introdução rápida às grades no Figma: Uma rápida introdução às grades Figma. Deixe-me mostrar como configurar grades no Figma, que você também pode reutilizar posteriormente Aqui está um quadro, basta clicar em qualquer quadro e, em seguida, você verá a configuração da grade de layout aqui no painel de propriedades do lado direito. Clique em mais para adicionar uma grade. A primeira coisa que você obterá é essa grade de oito pixels. Agora não queremos isso. O que queremos é clicar nesse pequeno líquen e mudar isso para uma grade de colunas Agora podemos ajustar nossas colunas aqui. O número de colunas que queremos, podemos definir uma margem em ambos os lados e também podemos ajustar a medianiz. A forma como essa grade se comporta é que, nesse caso, está configurada para se esticar, as colunas sempre se ajustarão, então elas constituirão o espaço disponível, a quantidade de colunas menos a margem e a medianiz Você também tem outras opções. Você pode definir a grade para a esquerda e para a direita, para ser honesto, algo que eu realmente nunca uso, ou você pode configurá-la para c. Se você defini-la no centro nesse caso, você precisaria definir a largura de suas colunas e, se você redimensionar , a margem é o que ocuparia o resto do espaço disponível. Agora, a maneira pela qual você precisa configurar sua nota depende do sistema que você está usando. Se você estiver usando algo como bootstrap , encontrará isso na documentação Você também pode ter uma grade personalizada, então aqui você pode ver que essa é uma grade personalizada de decadência, e você pode ver que eles fornecem a definição Se você tem um guia estelar e está usando uma determinada configuração tradicional de grade fixa, dê uma olhada no seu guia e poderá reproduzir a grade no Figma Agora, se estivermos satisfeitos com essa grade, talvez queiramos reutilizá-la em outros quadros O que podemos fazer é selecionar a moldura e, em seguida, na grade de layout, clicar no ícone Little Apply Styles, e então você pode clicar em Mais, e eu vou chamar isso de um teste por enquanto e agora podemos criar um estilo. Se agora eu tiver qualquer outra moldura, vou desenhar outra moldura aqui no meu Cvas Agora você pode ver que, se eu selecionar esse quadro e passar o mouse sobre a grade do layout, posso clicar nos estilos e agora posso reutilizar a grade que acabei de criar Se eu quiser mudar alguma coisa nessa grade, basta clicar na área cinza da tela. Tenho uma visão geral de todos os meus estilos de grade e agora posso editá-la aqui. Uma pequena dica para que todos na sua equipe saibam qual estilo de grade usar. Você pode ver aqui que você pode dar qualquer nome, então eu uso tamanhos de camisetas. Mas então eu adiciono colchetes atrás dele para o tamanho para o qual essa grade se aplica Então, digamos que eu tenha dois quadros aqui. Eu posso ver que essa moldura é 390, e agora posso simplesmente escolher meu estilo de grade, e eu sei que é menor do que esse tamanho aqui E, novamente, depende totalmente de como sua grade é definida, quaisquer que sejam os tamanhos pontos de interrupção que você configurou aqui. Se eu selecionar este maior aqui da mesma forma, posso simplesmente acessar meus estilos de grade, e sei que esse é maior. Veja aqui, é 1.500, é maior que 993, então essa seria a grade correta Agora, esse é o caso se você estiver usando uma grade geral para seus designs, que é a maneira mais comum de usá-los. Mas você também pode usar uma sub-grade para seções. Como você os aplica às molduras, isso é muito bom no Figma Você pode simplesmente configurar qualquer grade e, claro, salvá-la posteriormente como um estilo para uma moldura que você posiciona na moldura principal. Portanto, você pode simplesmente configurar a distribuição necessária para cada uma dessas pequenas subseções 25. BREAKPOINTS: 01 Como introduzir pontos de interrupção de CSS: Ao configurar seus designs com layout automático, você notará que isso funciona muito bem para um determinado intervalo, mas não funcionará para todos os tamanhos de tela, desde dispositivos móveis até desktops maiores. É aqui que entram os break points. São pontos específicos, ou melhor, limites ou mudanças ocorrem Dessa forma, os sites podem ajustar seu layout e estilos para caber em diferentes tamanhos de tela. Para criar pontos de interrupção em CSS, usamos algo chamado consulta de mídia. A regra de consulta de mídia at é uma forma de aplicar determinados estilos à página da web somente se condições específicas forem atendidas. Nesse caso, a condição é uma largura mínima de 768 pixels Portanto, qualquer coisa dentro dos colchetes só será aplicada quando a janela de visualização tiver um tamanho de 768 Vamos dar uma olhada nisso em CSS. Então você pode ver aqui que eu tenho um título e alguns textos copiados, bem como duas imagens Em nosso HTML, esse é um H, o título, o texto da cópia é P e, em seguida, aqui temos nossas imagens com a tag de imagem Agora, no CSS, você pode ver que eu defino o texto para ter o tamanho de um RM, depois um pouco maior para o título, e defino as imagens para ocupar todo o espaço disponível Esses são meus estilos básicos. Agora, ao rolar para baixo, você pode ver que eu adicionei uma consulta imediata. Quando eu chegar aos 400, vamos aumentar isso aqui embaixo. Você pode ver o tamanho, então você pode ver quando eu chego a 400, então isso muda no layout. O que acontece aqui é que tudo dentro dos colchetes fica ativo Eu tenho uma nova cor de fundo, a H é maior e as imagens alteram a ocupação do espaço. Eu vou ainda maior, você pode ver a segunda consulta de mídia chegando. Você pode ver aqui embaixo, novamente, que eu adicionei uma cor de fundo, para que ela fique visível, e eu também mudo a cor H para ficar ainda maior. 26. PONTOS DE INTERRUPÇÃO: RESTRIÇÕES:02 Pontos de interrupção no Figma: Como podemos lidar com pontos de interrupção e figma? Porque neste momento, não temos nenhum recurso para lidar com isso, temos que resolver isso manualmente. Ao lidar com um design responsivo clássico baseado em colunas , isso não é muito complicado de configurar Tudo o que fazemos é verificar nossa excelente documentação. Lembre-se de que isso pode estar documentado em seu sistema de design ou em uma estrutura. Com as informações fornecidas, podemos configurar a moldura com grades no Figma com bastante facilidade Então, se fosse um bootstrap, seria algo assim se construíssemos todos os nossos pontos de interrupção Podemos adicionar nossos componentes e, lembrar, eles precisam ser configurados com layout automático no Figma, e podemos então fazer com que se encaixem e se comportem com as colunas usando restrições Não podemos controlar o espaçamento vertical dessa forma, mas temos uma boa ideia do que acontece em geral Agora, projetar cada tela para todas essas versões será muito entediante Então, o que podemos fazer é escolher alguns tamanhos principais. Normalmente, escolho apenas um tamanho de celular e uma mesa W. Mas, dependendo do seu projeto, talvez você também precise de um no meio. Na maioria dos casos, será bastante lógico como os outros se adaptarão. Mas, como temos todo o quadro configurado de qualquer maneira, poderíamos pular rapidamente e testar cenários específicos Não precisamos reconstruir a página inteira. Podemos apenas testar as seções sobre as quais não temos certeza A, um pouco entediante, mas na verdade não é muito complicado quando se trata de configurar designs responsivos Portanto, isso pode parecer uma grande vantagem do ponto de vista do design você ter todo esse controle. Mas lembre-se de que, no final das contas, o produto não mora na Figma Não se trata de uma configuração fácil. É sobre o produto final no navegador e como ele se comporta e ganha vida lá. Então, hoje em dia, você não precisa mais estritamente dessa grade em segundo plano. Pelo menos não precisa ser um sistema tão rígido como o bootstrap ou similar Você também pode definir isso com mais liberdade. É muito importante que você discuta isso com sua equipe de desenvolvimento primeiro. Agora, lembre-se, quando configuramos nossos projetos com layout automático , aprendemos que isso reflete o Flexbox Na maioria das vezes, esses designs remodelam perfeitamente sozinhos, mas às vezes também podem precisar de pontos de interrupção Por exemplo. Talvez tenhamos uma mudança no layout. Então, por exemplo, o arranjo geral da grade pode estar mudando. Um único componente pode mudar. Então, isso é algo como uma navegação, menu de dois links do Burger, um rodapé que pode estar mudando ou também uma seção de heróis Provavelmente terá uma aparência bem diferente em tamanhos diferentes, e nossa hipografia precisa ser ajustada em diferentes painéis de visualização Então, como já discutimos, nosso layout automático, representando a caixa flexível, se reorganiza Caso desejemos alterar o layout geral, digamos que temos uma barra lateral que precisamos remover em um determinado limite Então, o que podemos fazer é configurar dois quadros diferentes para esses cenários. Gosto de adicionar algumas informações visuais que mostrem claramente de onde e onde usaríamos esse quadro, uma pequena dica para qualquer quadro de layout automático. Também podemos adicionar uma largura mínima ou máxima, para que possamos impedir que ela ultrapasse ou diminua um determinado limite Isso geralmente é usado em nossos componentes, mas também podemos usá-lo para o quadro principal que representa o painel de exibição Veja como esses cartões são reorganizados quando eu redimensiono. Agora, esse é o comportamento do ex box, pois esses cartões também têm um valor mínimo e um valor máximo. Se eu quisesse que eles estivessem bem alinhados , eu poderia configurar isso com a grade CSS Agora, se quisermos mostrar uma alteração no layout da grade CSS, atualmente não podemos testar isso no Figma Voltaríamos para um design estático de nossas páginas, mostrando as diferentes telas principais e descobrindo as transições entre elas junto com o desenvolvimento no navegador Sempre podemos adicionar mais estágios se necessário, para uma melhor comunicação. Além disso, lembre-se de que nem sempre precisamos lidar com a página inteira. Podemos dividir isso em partes de seções de layout e padrões estabelecidos Quando se trata de componentes únicos respondendo a pontos de interrupção individuais, o que eu gosto de fazer é criar um conjunto de componentes e, em seguida, ter as diferentes versões como Como nossos componentes Figma são configurados com layout automático, podemos testar isso muito bem e definir nosso ponto de interrupção Então, como nomear meu ponto de interrupção de propriedade e os valores, eu chamo menor que e maior que ou entre certos Dessa forma, qualquer pessoa que trabalhe com uma instância sempre sabe qual delas escolher. Existem técnicas mais avançadas usando variáveis e modos. Vou examiná-los pouco a pouco. Poderíamos usar variáveis booleanas para nossa navegação, mostrando e ocultando os elementos dependendo do quadro para o qual eu os arrasto, e podemos até mesmo trocar instâncias usando variáveis e modos No entanto, essa é uma configuração bastante avançada, então você e sua equipe precisam ser bastante sólidos ao trabalhar com variáveis no modo. 27. BREAKPOINTS: 03 modos e tamanhos de tela uma introdução rápida: Deixe-me dar uma visão geral de como os modos funcionam no Figma e como podemos aproveitá-los para criar diferentes tamanhos de tela Clique na área cinza do Canvas e você verá as variáveis locais no painel de propriedades do lado direito. Clique nas variáveis abertas e você verá suas coleções de configuração. Então, como exemplo, vou usar essa coleção de cores aqui, para que você possa ver que tenho uma configuração de cores diferente e, atualmente, elas são chamadas apenas de valores. Agora, ao lado disso, tenho um pequeno botão de adição e, se eu clicar aqui, posso adicionar um modo adicional. Você pode chamar esses modos de qualquer coisa. Vou chamá-lo de claro e escuro no meu caso. Para o meu modo escuro, vou deixar todas as cores da minha marca como estão e vou mudar as cores básicas. Este aqui é branco agora, e o que era branco vai ser preto. Depois de criarmos essas variáveis, é importante vinculá-las ao nosso design Poderíamos simplesmente selecionar qualquer cor e, em nosso menu de arquivos, ver o ícone de variáveis e estilos, e então ver todas as nossas variáveis que criamos e aplicá-las aqui. Uma pequena dica: o que você pode fazer em vez disso é selecionar a moldura inteira e, por meio da seleção de cores, você pode simplesmente selecionar todas elas em massa. Isso é muito útil porque também ajuda você a não perder nenhuma variável Muito importante, certifique-se também de que esse quadro com fundo branco também precise ser configurado com uma variável dessa coleção. Agora, se selecionarmos nosso item, você poderá ver, ao lado da aparência, um pequeno interruptor e agora podemos alternar entre claro e escuro Se eu mudar para o modo escuro , as cores do meu modo escuro serão aplicadas. Por padrão, é definido como automático. Podemos fazer o mesmo com nosso quadro e até mesmo alternar páginas inteiras No entanto, a parte em que estamos interessados é a herança. No momento, esse quadro está configurado para o modo escuro. Meu item, estou saindo no carro. Isso é muito importante. Não o configure para nenhum outro modo, deixe-o no modo automático. Agora, se eu arrastá-lo para qualquer quadro, ele herdará o modo definido para o quadro E assim como alteramos entre claro e escuro, também podemos usar modos para alterar os diferentes tamanhos que definimos Então aqui eu tenho outra coleção que eu fiz. Eu configurei uma variável de tamanho, que vou usar para esse botão de texto, cor. Também vou usar isso em modos diferentes para esse botão. E também tenho alguns textos, que vou usar no botão. E eu vou criar um adicional, que vai ser um número, e vou ligar para aquela caixa. E eu quero que a caixa seja 300 branca em uma tela pequena e 600 brancas em uma tela grande. E observe que tudo isso está configurado com o layout automático. E é claro que podemos transformá-los em componentes, pois eles sempre herdariam quaisquer variáveis que definíssemos Agora, precisamos vincular esses designs às variáveis que criamos Deixe-me começar com o tamanho do botão. Eu uso o menu suspenso de tamanhos. Aqui vejo a variável e agora posso usar a variável de tamanho que criei. Uma pequena dica: você também pode definir o escopo das variáveis. Então, por exemplo, aqui, eu posso configurar isso. Se eu clicar neste pequeno campo de edição aqui, obtenho o escopo e agora posso mostrá-lo para tudo ou, como neste caso, quero mostrar isso apenas para o tamanho da fonte Agora, o tamanho que tenho aqui será a largura da minha caixa. Então, aqui eu tenho o escopo, e eu só gostaria de mostrar isso para largura e altura E você pode ver que, dependendo da variável que eu uso, eu obtenho um campo de escopo diferente Vamos acabar com isso. Também queremos nosso texto. Para o texto em tipografia, você tem esse pequeno botão aqui e agora você vê o texto do botão Para a cor, preciso excluir a variável que usei antes e, por meio excluir a variável que usei antes e, do menu de variáveis, agora você pode ver nas bibliotecas se rolar para baixo a que criamos Mas poderíamos melhorar minha nomenclatura aqui. Para a largura da caixa, simplesmente selecionamos uma caixa e, por meio do menu suspenso de largura, você também vê as variáveis de aplicação e agora obtemos a largura da caixa. Observe como somente a caixa aparece porque definimos esse escopo. Agora tudo que eu preciso fazer é definir o modo para esses quadros. Vamos dar uma olhada em nossa coleção novamente, pequena e grande. Se eu selecionar esse quadro principal, você verá que não tenho como alternar. Isso ocorre porque atualmente não há nenhum elemento que contenha uma variável nesse quadro. Você verá que, assim que eu rastrear qualquer coisa aqui, eu pego o switch. Vou dizer que este é o modo pequeno e o meu maior aqui é o modo grande. Então, se eu arrastar este, quero uma instância, você pode ver que isso muda muito bem dependendo do modo definido, e eu tenho o mesmo aqui com minha caixa Então, aqui está uma largura de 300, e assim que eu pulo aqui, ela agora está mudando para a largura dada. Portanto, os Ms são uma ótima maneira de ajustar elementos e componentes de design a diferentes tamanhos de tela. No entanto, lembre-se que eles parecem muito mágicos, mas às vezes também são um pouco complicados, e é mais fácil fazer isso manualmente. Mas isso você precisa descobrir, dependendo do design e da configuração da equipe. 28. PONTOS DE INTERRUPÇÃO: 04 variantes de ligação aos modos: Vinculando a variação aos modos. O que também podemos fazer com os modos é escolher qual variante dentro de um conjunto de componentes queremos usar para um quadro específico. Aqui eu tenho uma navegação com duas versões. Quero que este seja usado no celular e este aqui para telas maiores e o mesmo com os cartões. O que precisamos fazer é vincular essas diferentes variantes a modos diferentes Precisamos começar criando uma coleção para isso. Estou configurando uma nova coleção com o exemplo responsivo do nome Nesta coleção, estou criando uma variável de string e vou chamá-la de NAF para começar com a navegação Agora, o nome da variável que você está criando não importa. O que é muito importante é o valor. Esse valor precisa ser o nome exato da variante que você deseja vincular a ele Então, se clicarmos aqui, você pode ver que isso se chama S, e o outro é chamado M, e eu uso a mesma convenção de nomenclatura no cartão, então isso é S, e o outro cartão é chamado M. Aqui eu vou dizer vincular a S, e eu vou criar outro modo onde eu vou vincular a M. Agora vamos também renomear Vou ligar para um celular e um desktop. Também vou adicionar o mesmo para o nosso cartão. Agora temos toda a lógica configurada em nossa coleção, mas também precisamos dizer a esses elementos que isso está acontecendo. Você provavelmente esperaria vincular sua variante a essa variável No entanto, isso é um pouco estranho. Na verdade, vinculamos a instância à variável. Selecione qualquer instância e , no painel de propriedades do lado direito, se você passar o mouse sobre o nome da instância, verá um pequeno sinal de variável Clique nela e agora você pode encontrar a variável que acabou de criar, e vamos vinculá-la à nossa navegação, e faremos o mesmo com nosso cartão Agora, se arrastarmos nossa instância até aqui , nada acontecerá. Isso ocorre porque o quadro principal também não conhece o modo. Agora observe que atualmente Figma está configurado de tal forma que se eu não tiver nenhuma variável definida nesses quadros Se eu não tiver nenhum elemento que contenha uma variável no quadro, haverá nenhuma opção sendo exibida. Agora, observe que, assim que eu adicionar isso, você verá que, ao selecionar o quadro principal, essa opção aparecerá aqui. Aqui temos nosso exemplo responsivo. Isso é móvel. E aqui ainda não vemos o interruptor. Então, vamos colocar uma instância aqui também. E agora você pode ver o interruptor porque achamos que esses dois são uma variável. E agora podemos mudar esses dois desktops. E você pode ver, assim, nossa nova versão está aparecendo automaticamente. Então, se eu arrastasse entre essas telas, você pode ver que ele sempre escolherá a versão certa para mim. E agora que temos o modo configurado, isso também deve funcionar automaticamente com nosso cartão. Então você pode ver aqui que temos nossa placa S, e se a colocarmos aqui, ela muda automaticamente para a outra versão. Isso leva um minuto para entender, mas você pode usá-lo em muitos lugares diferentes. Experimente fazer experiências com isso. Aqui está outro pequeno exemplo, para que você possa ver que ele não está vinculado apenas às diferentes variantes, mas também pode adicionar cores e tamanhos diferentes, e então você obterá algo parecido com isso 29. BREAKPOINTS: 05 Esconda e mostre com booleans: Escondendo e mostrando elementos com booleanos. As variáveis booleanas são um recurso bastante oculto, mas você pode configurar pequenos truques de mágica como esse Primeiro, montei uma coleção com dois modos. No meu exemplo, eu uso uma para telas menores e uma maior e, em seguida, variáveis booleanas Um para um menu de hambúrguer. Quero mostrar em uma tela menor e desligar para uma maior, e vice-versa para um menu Lnx Agora eu configuro meu componente e empacoto todos os elementos nele. Então, o menu Berger, bem como o menu Link. Agora vamos conectar tudo. Então, estou selecionando o Berger e aí vem a parte estranha. Se você quiser conectá-lo a um valor booleano. Na aparência, você precisa clicar com o botão direito do mouse em I can very it e I. Mas, infelizmente, é aqui que ele está localizado neste momento. Aqui você pode ver a variável que você criou para o Berger Boolean. Vamos clicar nisso. Nada vai acontecer. Isso é o que esperamos. Agora, se selecionarmos o menu e fizermos o mesmo , isso desaparecerá porque, por padrão, ele nos mostrará a configuração do primeiro modo. O que podemos fazer agora é retirar instâncias, então vamos colocar uma instância aqui e, em seguida, vamos colocar outra instância em nossa estrutura móvel. Pouco antes de fazer isso, deixe-me mostrar que, no momento, não tenho nenhum interruptor de modo. E assim que eu adiciono um instante vinculado a uma variável, você pode ver que agora, se eu selecionar um quadro principal, podemos ver nossa opção. Então, vamos mudar essa para nossa versão móvel e, em seguida, vamos mudar essa aqui para nossa versão maior. E você pode ver que automaticamente, ele ligará e desligará os lingotes , dependendo de onde eu os coloque É realmente impressionante usar essa forma de trabalhar. No entanto, vamos dar uma olhada em como isso é configurado. Esteja ciente de que tudo o que ele faz é mostrar e ocultar camadas. Existe o perigo de alguém simplesmente não entender essa forma de trabalhar e reativá-la. Além disso, certifique-se de verificar com o desenvolvimento se isso faz sentido para todos entendam esse componente. Às vezes, faz mais sentido ter duas variantes, uma com a berga e outra com os links, para que todos saibam quais variações estão atualmente no design. Uma pequena ponta na lateral. Você pode ver aqui que fornecemos tamanhos. Isso é menor que 500 e maior que 500 nesse caso. O que podemos fazer é usar o menu suspenso de largura. Posso adicionar uma largura máxima aqui à pequena de 500 e vou fazer o mesmo com a grande. Neste caso, vou chegar a uma largura mínima de 500. Agora eu posso testar isso. Aqui você pode ver que isso funciona muito bem, porque provavelmente vai cair para 320 ou algo que está tudo bem. E então o maior, no entanto, se eu redimensionar, você pode ver que isso não vai funcionar no design e, portanto, é muito bom experimentá-lo assim Sabemos que, neste caso, provavelmente precisaremos redefinir em que tamanho esse menu de Links será exibido 30. BREAKPOINTS: 06 tipografia responsiva com modos: Com a ajuda dos modos, também podemos automatizar tipografia responsiva em diferentes Para que essa abordagem funcione, precisamos combinar estilos de texto com variáveis e modos. Então, aqui está uma escala de tipos simplificada que eu gostaria de usar, e você pode ver que eu já criei alguns estilos, então todos esses aqui já foram criados, e eu vou criar uma exibição junto com você. Então selecione o texto e, em Tipografia, clique em Aplicar estilos, mais, e vamos chamá-lo de Exibir um Se clicarmos na excelente área de fundo, você poderá ver que o estilo foi criado e eu posso simplesmente arrastá-lo para minha pasta aqui. Eu criei o chamado exemplo de tipografia responsiva. Agora, no meu design, é muito importante que eu aplique esses estilos. Certifique-se de que cada elemento de texto usado esteja vinculado a um estilo. Se você estiver usando componentes, basta fazer isso uma vez em seus componentes e todas as instâncias herdarão Se quiséssemos que o tamanho do nosso texto se ajustasse do tamanho S para M e L, o que poderíamos fazer é simplesmente criar outra escala de tipo para M e L e salvá-la como estilos separados. E você ainda pode configurar seu design dessa forma. No entanto, com a ajuda de variáveis e modos, você pode automatizar essas alterações Em vez de criar estilos separados, o que vamos fazer é dentro do nosso tecido existente Vamos usar uma variável no tamanho e nos modos, podemos dizer a essa variável como mudar dependendo do modo definido no pai para o qual vamos arrastar o design. O que precisamos fazer é criar uma coleção de variáveis. Vamos clicar em Criar nova coleção, e vou chamar isso de tipografia Agora podemos criar tudo isso manualmente ou com uma pequena dica, podemos usar um plug-in. Selecione a moldura onde você tem todos os seus tecidos exibidos Em seguida, dê uma olhada nos plug-ins e pesquise os estilos de texto variáveis. Execute este plug-in. Agora você pode escolher as coleções. Vou escolher a tipografia, aquela que acabei de criar. Você também pode escolher quais partes você gostaria de configurar como variáveis. Clique em Criar. E é isso. Agora, se voltarmos para nossa coleção de variáveis, você pode ver que isso preencheu o tamanho da fonte, a espessura da fonte e a família da fonte para mim. Se dermos uma olhada em nossos estilos , veremos que, se usarmos esse plug-in, o melhor é que todas as variáveis já estão conectadas em nossos estilos, o que é muito útil. Se você configurar uma coleção manualmente, precisará acessar seus estilos e também conectar todas as variáveis manualmente por meio do menu suspenso Muito importante, caso contrário, isso não funcionará. Então, agora temos tudo isso configurado. No entanto, ainda não adicionamos nenhuma informação sobre como o tamanho deve mudar dependendo das telas. Então, o que precisamos fazer é voltar à nossa coleção e adicionar alguns modos. Agora, eu não gosto do nome disso. Vai ser muito confuso, então vou limpar isso um pouco Então, vou renomeá-los com tamanhos de camisetas. Agora vou adicionar meus modos e vou chamar S. Esses são meus M e L. Também vou reordená-los simplesmente arrastando-os Agora eu vou mudar os tamanhos em M. Vou apenas aumentar meu tamanho um pouco, o tamanho também. Estou fazendo isso aleatoriamente em um sistema de design, que obviamente pensaria muito em como esses tamanhos mudariam Agora só precisamos dizer que este é o mod M e este que é o modo L. Vamos arrastar nossos elementos aqui com nosso design. Vou configurar isso para S, e este aqui será e agora veja como os novos tamanhos entram em ação. Esse aqui vai ser L. Então, uma vez que eu tenha esse conjunto, vamos deletar isso. O modo vai ficar lá. Se eu arrastar alguma coisa aqui, a tipografia sempre estará correta Uma pequena dica. Obviamente, você também pode usar vários modos. Então, agora eu tenho o conjunto s, mas também tenho o modo claro e escuro, então eu também posso mudar isso para o modo escuro. Outra pequena dica: se você, por exemplo, trabalhando com um designer de IOS e Android, precisar alterar a família da fonte, também poderá usar os modos e simplesmente alterar a família da fonte dessa forma. 31. Algumas coisas gratuitas para dizer adeus: Parabéns por terminar este curso, sinta-se à vontade para entrar em contato comigo no Mo earning Do Tao Estou sempre interessado em ouvir seus comentários. Você também me faria um grande favor deixar um comentário aqui. Ah, você gostou deste curso e também não deixe de dar uma olhada no Moon learning DoTao Podemos encontrar muito material adicional , bem como cursos. Com a assinatura M, você pode acessar todos os meus vídeos, ou seja, tudo sobre o básico do U XUI, muito sobre FEMA, muitos mergulhos profundos e também uma seção sobre os fundamentos do CSS Então, vamos discutir o que acontece quando o design da interface do usuário encontra o código, relação ao layout, tipografia, cor e quaisquer outros assuntos relevantes No Mo learning, você também pode encontrar um link gratuito para todos os meus artigos recentes, bem como uma página de recursos na qual tento mantê-lo atualizado sobre as últimas novidades interessantes que acontecem no mundo do UX UI Design Se você preferir um evento da vida real, dê uma olhada no workshop e na seção de palestras. Eu falo frequentemente em conferências, além de ministrar workshops on-line sobre temas de UX UI Design e empreendedorismo individual Certifique-se de assinar meu boletim informativo para se manter atualizado. Então, até breve no Moearn dot IO.