Design de UX/UI responsivo no Figma: layout automático, restrições e pontos de interrupção (versão mais recente de 2023)

1. VÍDEO PROMOCIONAL: layout automático está deixando você louco, medo do que acontecerá com medo do que acontecerá com seu design no navegador, então essa aula é perfeita para você. Aprenderemos tudo sobre como configurar designs responsivos e o Figma. Isso será um mergulho profundo nas restrições, no layout automático e, o mais importante, mas raramente discutido, nos pontos de interrupção seu design de interface de usuário. combinação dessas ferramentas permitirá que você teste novamente e documente designs e componentes de acordo com as configurações reais do código. Começaremos com o layout automático do Todo-Poderoso e realmente concluiremos a configuração de componentes verdadeiramente responsivos. Vamos começar do zero e trabalhar até o redimensionamento e o poder do agrupamento infinito para criar configurações mais complexas e até páginas inteiras com layout automático. Como sempre, mostrarei alguns tesouros escondidos e algumas dicas e truques ao longo do caminho. Em seguida, veremos as restrições e como elas vidas quando se trata de combinar o layout automático em grades. Depois de nos certificarmos de que entendemos totalmente nossas ferramentas responsivas e o Figma, aprenderemos sobre pontos de interrupção, como eles realmente funcionam nos bastidores em CSS e como podemos configurar nosso design no Figma. Consequentemente. Isso nos permitirá testar nossas páginas e componentes responsivos relação a condições reais e colocar nossa documentação em outro nível, o que seus desenvolvedores certamente apreciarão. Com o arquivo de material do curso, você pode trabalhar ao meu lado, anulando dois exercícios com instruções detalhadas em seu próprio tempo. Esta aula é ideal para você, se você tem conhecimentos básicos de Figma ou se você é um usuário iniciante avançado, realmente deseja aprimorar suas habilidades. Este é um curso da Moon learning dot IO. 2. 1 novo design da interface do usuário Figma LAYOUT AUTO NEW SKILLSHARE OLD: Observe que tenho uma versão atualizada deste curso disponível. Portanto, se você já está acessando a nova interface do Figma , certifique-se de passar para a nova versão Para encontrá-lo, basta acessar meu perfil, ou você também pode dar uma olhada na descrição abaixo. Então, só para ficar claro, essa é a interface anterior do Figma. A nova interface do Figma deve ser mais ou menos assim. A principal mudança que você notará é a barra de ferramentas agora está na parte inferior, em vez de na parte superior 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 você pode ver como 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 você também pode fazer o curso mais recente, que tem uma estrutura um pouco diferente, vídeos atualizados e está usando a interface mais recente. 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 FIMA é 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 sendo uma caixa As pequenas barras laterais flutuantes podem estar presas 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. Sobre este curso: Configurar seus designs com componentes e páginas responsivos em mente é essencial para qualquer designer de interface do usuário atualmente. Atualmente, testes responsivos e o Figma podem economizar tempo e nervosismo em ambos os lados e melhorar principalmente em colaboração com o desenvolvimento, Figma nos oferece ferramentas incríveis para configurar um design responsivo. Temos as poderosas restrições de layout automático, bem como grades. É muito importante que você entenda todos esses recursos em detalhes. Você pode acabar usando principalmente o layout automático, mas notará que, para um teste rápido, mantendo uma configuração de grade irregular, existem maneiras muito poderosas de combinar os três. Então, na primeira parte deste curso, eu realmente quero me aprofundar em cada uma dessas ferramentas, desde o início até técnicas mais avançadas. Portanto, as restrições podem parecer muito básicas para você, para começar. Mas o poder é realmente liberado quando continuamos com layout automático mais avançado e depois voltamos a combinar restrições neles. Portanto, este curso é realmente sobre mostrar o que é possível e qual pode ser a melhor solução para determinadas configurações. Não há maneira certa ou errada. É realmente sobre o que você está tentando construir. Então, depois de analisarmos nossas ferramentas na primeira parte do curso, podemos configurar páginas e componentes responsivos muito legais . No entanto, ainda estamos presos a um problema. O mesmo design não funcionará de dispositivos móveis a desktops maiores com uma configuração, ele só funcionará dentro de um intervalo específico. E esse é realmente um tópico frequentemente negligenciado quando se trata de aprender design responsivo, porque o que precisamos é definir um ponto de interrupção. Esse não é um recurso automático no Figma. Então, isso é realmente algo que nós, como designers de UI, precisamos entender e nos configurar de acordo com o código. Então, examinaremos isso em detalhes e realmente entenderemos quais são esses pontos de interrupção, como os encontramos e como podemos configurá-los e traduzi-los para o Figma. Isso nos permitirá testar e documentar nossos componentes e páginas com os números reais. Dessa forma, você terá uma boa ideia sobre a coisa real. E você pode realmente elevar a conversa entre design e desenvolvimento a outro nível e se concentrar nos detalhes. Então, em poucas palavras, vamos desvendar essa bagunça responsiva e deixar tudo limpo e claro. 4. Material do curso: Talvez você queira trabalhar ao meu lado, então preparei alguns arquivos para você baixar no curso que está fazendo, basta navegar até o projeto e os recursos. E lá você encontrará todas as informações e o link onde você pode baixar o material. Nesta página, você encontrará uma variedade de downloads. Você pode simplesmente escolher a causa que está tomando no momento e clicar em Baixar. E ele fará o download automático do arquivo para você. Para importar os arquivos, basta baixá-los. É importante que você tenha uma conta Figma. Na sua conta Figma, navegue até os rascunhos ou acesse um projeto dentro de uma equipe. Clique no botão Importar e você pode escolher qual arquivo deseja carregar. Pode levar alguns minutos, pois são muito grandes, mas depois de importá-los, eles estarão na sua conta e você não precisará repetir esse processo. Dentro do arquivo. Você encontra material para trabalhar ao meu lado nos vídeos, mas eu também adicionei algumas instruções para que você possa sempre voltar no seu próprio tempo, experimentar e praticar. Estou trabalhando com fontes do Google para a maioria dos meus designs. Portanto, se você estiver trabalhando com o aplicativo Figma, não precisará fazer nada ou fontes do Google serão pré-carregadas automaticamente. Se você quiser trabalhar com o Figma no navegador, basta pesquisar a fonte que está mostrando como ausente, por exemplo Poppins, eu uso muito. E então você pode baixar diretamente essa fonte, instalá-la no seu computador e pronto. 5. !!! POR FAVOR, ASSISTA !!! Nova interface do usuário Figma em beta: Heads Figma atualizou sua interface de usuário e você pode ver um novo design em vez do antigo Atualmente, esta atualização está em versão beta fechada, então nem todos têm acesso ainda. Vou atualizar as artes e refletir a nova interface assim que ela estiver disponível para todos. 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 L. Por exemplo, a barra de ferramentas superior foi movida para baixo. O painel lateral esquerdo, por outro lado, permaneceu praticamente inalterado Agora você pode alterar o nome do seu arquivo aqui. Você ainda pode ver todas as suas páginas, camadas e ativos. No lado direito, você notará algumas mudanças ao clicar em um design, mas todos os recursos ainda estão disponíveis. Se você é iniciante e acha a nova interface confusa, pode clicar no ponto de interrogação na parte inferior direita e voltar temporariamente para a interface antiga Isso não influencia seu design. Dessa forma, você pode acompanhar os vídeos do curso usando a interface antiga com muito mais facilidade até que esteja pronto para fazer a transição para a nova. A FIMA está lançando gradualmente essa atualização. Se você ainda não tem acesso, também pode solicitá-lo à FIMA, mas não há garantia, talvez alguns de vocês precisem ser um pouco pacientes Talvez o administrador da sua equipe também precise ativar a atualização para você, portanto, verifique isso também. A Figma atualiza o software com frequência, portanto, espere mudanças e esteja preparado para se adaptar Os recursos podem se mover como esse botão de biblioteca aqui esteve em todos os lugares possíveis nos últimos anos. Mas não se preocupe, nada nunca se perderá e você se acostumará a usar o FIMA de uma forma muito mais flexível Ele tem um foco muito bom na usabilidade. Portanto, não se trata de aprender algo de cor, mas de entender o software como um todo. 6. Atualizações de layout automático 23 de junho: Em junho de 2023, durante a conferência de conflito da Figma, algumas mudanças no layout automático foram lançadas. Certifique-se de baixar o arquivo de exercícios Figma atualizado. Essa é a melhor maneira de obter uma boa visão geral de quais peças são novas e onde as coisas foram simplesmente movidas um pouco. Não se preocupe, tudo realmente funciona como antes, algumas coisas ou foram ligeiramente transferidas para o menu e dois novos recursos foram lançados Então, deixe-me explicá-los. O espaço entre eles foi movido. Durante o curso, vou me referir a um recurso chamado espaço entre. O que isso faz é se tivermos algo assim e quisermos adaptar o espaço aqui não apenas por um valor, mas automaticamente empurrá-lo sempre para o outro lado. Então, isso costumava estar no menu avançado. Agora você encontrará espaço entre eles se acessar a barra de espaçamento simplesmente clicando em automático Então você pode ver que agora, se estamos redimensionando isso, é isso que estamos recebendo Se você está apenas começando com layout automático e tudo isso é um pouco confuso, não se preocupe, se você baixar o arquivo do exercício, assim que chegarmos a esta parte, terei a alteração na posição no menu claramente marcada para As alternativas para isso, que é simplesmente clicar na alça na tela e digitar auto ou qualquer valor fixo, ainda permanecem as mesmas O outro atalho, que é clicar no menu de alinhamento e alternar esse recurso com X também permanece como Largura mínima e máxima. Min and max é um recurso totalmente novo. Isso significa que, se estivermos redimensionando um cartão como esse, agora podemos, por meio de nossos campos de largura e altura, definir um valor mínimo e máximo simplesmente usando o menu suspenso, agora podemos definir um mínimo e um máximo E então isso seria refletido assim que redimensionássemos nosso cartão Não tenho um vídeo inteiro sobre isso em que analisemos isso pouco a pouco e também vejamos como podemos adicionar variáveis a esse recurso. O próximo é embrulhar. Isso significa que agora, com o layout automático, podemos agrupar elementos. Para a próxima linha. Vamos analisar esse exemplo pouco a pouco. Como configurar esses cartões. Primeiro foram os valores mínimo e máximo. E então adicionamos embrulho. O envoltório é adicionado ao menu de layout automático na direção. Então você o encontrará a seguir, vertical, horizontal. E agora, o novo recurso de embrulho. Além disso, o Figma libera variáveis que podemos usar para preencher o layout automático Agora podemos simplesmente selecionar nossos elementos de layout automático. E então, por meio do preenchimento, podemos usar os valores de espaçamento que configuramos e garantir que sempre tenhamos o mesmo valor definido em nosso design Também podemos usá-los como espaço entre simplesmente aplicar a variável e você também pode escolher seus valores definidos. Variáveis são um tópico muito amplo. Eles são muito poderosos e você pode fazer muito mais do que simplesmente adicioná-los, preenchê-los e espaçá-los se estiver interessado em variáveis Eu tenho um curso de mergulho profundo completo sobre esse assunto Você pode ver que o layout automático permaneceu praticamente como antes, mas se tornou um pouco mais poderoso 7. RESTRIÇÕES: 01 O que são restrições em Figma?: Quais são as restrições no Figma? As restrições definem como as camadas respondem quando o quadro principal é redimensionado. Isso nos permite controlar como criar looks em diferentes tamanhos de tela e dispositivos. Ao selecionar um objeto em um quadro, você pode ver as pequenas linhas azuis pontilhadas apontando para a borda de sua moldura principal. Essas são as restrições. Por padrão. Eles estão sempre posicionados no topo e na esquerda. Você também pode ver as configurações no painel Propriedades do lado direito, em restrições. Restringe um conjunto para posicionamento horizontal e vertical. Você pode definir as restrições por meio do menu suspenso ou simplesmente clicando no ícone. Uma pequena dica: segure Command para selecionar os dois lados. Você pode aplicar restrições a qualquer grupo de camadas ou quadro aninhado, desde que ele esteja dentro de um quadro. As restrições só funcionam dentro de quadros. Com exceção dos quadros de layout automático, você não pode adicionar restrições aos quadros de layout automático, exceto elemento de posições absolutas dentro deles. Observe também como as restrições sempre respondem ao quadro principal. Isso não deve necessariamente ser o quadro principal. Portanto, a moldura que você está usando para representar sua tela, pois você também pode aninhar quadros e Figma. A moldura principal é basicamente a próxima moldura até objetos dentro de um quarto de filhos. 8. CONSTRAINTS: 02 Trabalhar com restrições horizontais e verticais Visão geral: Vamos examinar mais de perto os diferentes tipos de restrições disponíveis. No menu suspenso, podemos ver as seguintes opções. Restrições horizontais, esquerda, direita, esquerda e direita, centro. E escala. Para vertical, superior, inferior, superior e inferior, centro e escala. Vamos examiná-los pouco a pouco. Aqui eu configurei um exemplo de tela de telefone. Você pode ver que quando eu redimensiono o quadro principal, tudo está definido por padrão para ser definido na parte superior e esquerda. Por isso, nada aconteceu. Agora, digamos que eu queira que esse menu aqui fique do lado direito. Vou simplesmente mudar a restrição horizontal, certo? E você pode ver como a pequena linha pontilhada azul agora se encaixa à direita. Vamos redimensionar e você verá que está funcionando muito bem. Agora, os designs não mudam apenas horizontalmente, mas também verticalmente. Como você pode ver, estou perdendo meu botão de adição aqui. Então, vou definir as restrições para baixo e para a direita para corrigir isso. Ok, então temos o armário esquerdo, direito , superior e inferior, coisas bem simples. Ele apenas o fixa nesse lado da estrutura principal. Agora, se quisermos posicionar elementos como nosso conteúdo no meio, podemos usar a esquerda e a direita, o centro ou a escala. esquerda e a direita determinam a distância do tamanho do objeto até a moldura principal e a mantêm exatamente no mesmo tamanho ao redimensioná-la . A escala, por outro lado, definirá o tamanho e a posição da camada como uma porcentagem das dimensões dos quadros. E ele manterá as proporções, mas não o número exato ao redimensionar o centro, você deve ter adivinhado que ele apenas mantém o objeto no centro relativo onde você o colocou na moldura em seu tamanho original. Isso funcionaria exatamente da mesma forma para alinhamento horizontal ou vertical. Vamos voltar ao nosso exercício. Então, vou adicionar restrições à esquerda e à direita às minhas imagens aqui. E eu vou enviar o erro na parte inferior. Vou adicionar um centro e um fundo porque você pode misturar restrições horizontais e verticais exatamente como você precisa delas. Meu texto aqui, vou deixar a configuração padrão de esquerda e superior. Mas também quero adicionar restrições à minha barra de status. Aqui. Vou adicionar à esquerda e à direita à moldura da barra de status. E então eu só preciso ter certeza de que, para as crianças, seja, o tempo e a bateria , os elementos internos, eu adicionarei restrições diferentes. Então, o status da minha bateria, eu quero estar no topo. Agora, se eu redimensionar, você pode ver que tudo funciona perfeitamente. Dica. Ao trabalhar com designs móveis, use o menu de moldura predefinida para pular entre tamanhos populares que o Figma é bastante seguro para você. Às vezes, você pode querer redimensionar um quadro e ignorar as restrições. Não tem problema. Basta pressionar o comando ou no Controle do Windows e redimensionar. 9. RESTRIÇÕES: 03 Restrições e grades: Há um pouco de mágica que você pode fazer com restrições e grades. restrições em si são bastante simples, especialmente quando você tem um elemento em seu design. Mas se adicionarmos mais de um elemento a uma linha, fica complicado. Meu único elemento aqui está definido para a esquerda, certo? Se eu fizer o mesmo com os outros, você pode ver pela linha pontilhada azul que ela leva em consideração a borda da moldura principal e não o outro elemento filho. Se redimensionarmos, isso aconteceria. Poderíamos criar uma solução complicada com molduras, mas isso não será muito confuso. Se eu configurá-lo em escala. Sim, isso manterá os elementos no lugar. Mas, como aprendemos, escala define o tamanho e a posição da camada como uma porcentagem da dimensão dos quadros. Para alguns designs, isso pode ser o que você procura. No entanto, se você quiser usar um tamanho específico para suas margens e distâncias entre os elementos, use um pequeno truque com grades. Vou adicionar uma grade à minha moldura. Está configurado para esticar e vou editar a margem 24 e também ter uma medianiz de 24. Você pode alterar esses números. Você precisa? Apenas certifique-se de que está configurado para esticar. Agora vou mudar minhas restrições de volta para a esquerda e para a direita para esses elementos, observe como a linha pontilhada do meu botão aqui embaixo, que está definida para a direita e inferior, não aponta para a borda do pai mais quadro, mas para a coluna da minha grade. Se eu alterar as restrições, você pode ver que agora ela usa a coluna mais próxima como seu contêiner pai. Isso é o mesmo para minhas imagens aqui. Eles estão usando essas colunas como contêiner principal. Eles estão sentados com a esquerda e a direita. Então, se eu redimensionar tudo, ele fica bem na grade. É claro que você pode ativar e desativar a grade. Você pode usar o menu do lado direito ou simplesmente usar o atalho Control e g. Neste exemplo, minha grade está configurada para esticar. Se eu mudar para o centro, ele se tornará uma grade fixa com um determinado tamanho de contêiner fixo no meio. As restrições esquerda e direita não estão mais respondendo a isso. Você precisaria alterar suas restrições para o centro se quiser usar essa grade. A propósito, essa técnica também funcionaria para linhas. E caso você não saiba, você pode aplicar várias Cruzadas em um quadro e Figma. Assim, você pode adicionar linhas, duas colunas e usá-las. No entanto, como tenho conteúdo dinâmico e geralmente não quero limitar a altura, eu realmente não uso muito o Rosetta e simplesmente fico com as grades sempre que preciso delas. 10. RESTRIÇÕES: 05 Posição de correção ao rolar: Você deve ter notado que dentro de nossa caixa de restrições, temos uma caixa adicional. Podemos ativar a posição fixa de um quarto ao rolar. Então, como o nome indica, isso manterá nossos elementos no lugar ao rolar. Ele também respeitará todas as restrições. No entanto, para que isso funcione, primeiro precisamos configurar algumas coisas. Em primeiro lugar, seu conteúdo deve se estender além do seu quadro. No menu do quadro, você encontrará o campo de conteúdo do clipe para mostrar e ocultar conteúdo fora do quadro. Em seguida, certifique-se de selecionar as estruturas ou componentes aninhados que você gostaria de fixar no lugar e ativar a posição fixa. Na verdade, esse é um recurso de prototipagem. Então, precisamos configurar algumas coisas em um menu de prototipagem. Selecione o mainframe, importante, o mainframe, não o elemento que você acabou de consertar. Em seguida, vá para o menu de prototipagem que você encontra no canto superior direito da tela. Ative a rolagem. No meu caso, eu ativo a rolagem vertical. A propósito, você também pode escolher um dispositivo aqui. Apenas certifique-se de que o tamanho da moldura e o tamanho e a correspondência do dispositivo para evitar escalonamentos indesejados. Agora, basta pressionar o botão play no canto superior direito da tela e você verá que tudo está bem rabiscado e seus elementos fixos permanecem no lugar. Isso é realmente ótimo para navegações superiores e inferiores ou botões flutuantes. Com a prototipagem, que é outro tópico, e o Figma, você também pode adicionar muito mais interações e comportamentos a isso. Por enquanto, essa é uma ótima maneira de simplesmente percorrer seus designs e também fazer alguns primeiros testes. A propósito, você também pode baixar o aplicativo Figma para seu telefone e visualizar ao vivo design no dispositivo real. Isso é super simples e simplesmente espelha sua tela diretamente no seu telefone. Certifique-se de que o dispositivo físico que você está usando para visualizar e o tamanho do quadro no Figma sejam os mesmos. 11. RESTRIÇÕES: 06 ilustrações divertidas com restrições: Só um pouco de diversão desse lado. Existem restrições para fazer com que um design responda a diferentes tamanhos de tela. E você também pode usar os tamanhos da tela para criar alguns efeitos. Aqui eu criei uma grade de fundo e depois edito a topografia, que está em cinco graus, como você pode ver aqui. E então eu criei uma pequena ilustração, no meu caso está um pequeno monstro aqui que está sentado em seis colunas. É simplesmente um quadrado com cantos arredondados. E então eu adicionei boca. E você pode ver que eu configurei isso em pedaços, pois alguns deles estão configurados para a esquerda. Este está configurado para a esquerda, para a direita. E também meus olhos aqui, por exemplo, estão no centro. Se eu redimensionar agora, você pode ver que isso muda. Veja com os diferentes tamanhos de tela. Então você pode realmente brincar com isso e experimentar algumas coisas divertidas. Você pode então testar o que aconteceria na tela do celular. Então, aqui eu usaria os mesmos elementos, mas os mudaria um pouco. Então fique à vontade para jogar com este exemplo. 12. RESTRIÇÕES: 07 limitações de restrições: Há algumas limitações quando se trata de trabalhar com restrições. As restrições funcionam muito bem, desde que estejamos lidando com uma configuração bastante simples. Depois de adicionar um pouco mais de complexidade aos elementos, como mais conteúdo, você notará que está enfrentando um problema. O conteúdo se sobreporá, pois o preenchimento e as margens não são mantidos. A propósito, esse é um problema do Figma no CSS Essas margens e preenchimento ainda seriam mantidos. No entanto, como podemos configurar um design mais realista no Figma? É aqui que entra o layout automático. layout automático permite criar designs que crescem e diminuem com a mudança de conteúdo. Então, durante a próxima parte deste curso, vamos analisar detalhadamente o layout automático. Vamos ver como configurar componentes de layout automático e até páginas inteiras. E também vamos dar uma olhada em onde faz sentido combinar layout automático, grades e restrições. Se, neste momento, você estiver um pouco confuso sobre quando usar restrições de layout automático e quando combiná-las, não se preocupe, examinaremos isso passo a passo. E também vou dar uma visão geral sobre quando uma ou outra faz sentido e onde está a força e a limitação de cada abordagem. Em geral, o layout automático é um pouco mais complicado de entender no começo, mas é incrivelmente poderoso e, definitivamente um recurso que você deve entender como designer de UI. 13. LAYOUT AUTO: 01 O que é layout automático?: O que realmente é Auto Layout. O layout automático permite criar quadros e componentes dinâmicos que respondem ao tamanho do conteúdo. Dessa forma, você pode trabalhar com a alteração do conteúdo, como diferentes tamanhos de texto, mas sempre manter o layout e o espaçamento intactos. Você pode usar o layout automático nos menores elementos de seus designs, como botões, até componentes aninhados maiores e complexos. E você pode até mesmo criar páginas inteiras com layout automático. Layout automático e que apenas ajusta o tamanho na horizontal ou na vertical, mas também permite que você adicione preenchimento definido bem como espaço entre os elementos que permanecerão no lugar mesmo durante alteração conteúdo ou adição de itens. Doce. Você pode alinhar e distribuir itens dentro do contêiner principal com layout automático e escolher de que forma deseja que eles sejam redimensionados. Com alguns cliques simples, você pode realmente criar mágica com o layout automático. Mas eu tenho que ser honesto com você no começo, é um pouco confuso e parece que você está criando um layout com chiclete que é muito normal e você vai se acostumar com isso. Então, realmente tenha paciência comigo, e vamos analisar isso passo a passo. 14. LAYOUT AUTO: 02 Configurar um quadro de layout automático: Vamos configurar nosso primeiro quadro de layout automático. Vamos começar com o exemplo mais simples, um botão. Isso é basicamente um quadro de layout automático com apenas uma camada. Mas vamos passo a passo. Desenhe uma moldura e adicione algum texto com a moldura selecionada. Agora, clique no sinal ao lado do layout automático no painel de propriedades. Observe como o quadro se transformou em um quadro de layout automático. Você pode ver um novo símbolo no painel de camadas. Vamos adicionar um pouco de estilo. Vou adicionar um preenchimento colorido para o fundo, alguns cantos arredondados. E vou ajustar um pouco o texto. Agora posso ajustar o conteúdo do botão e você pode ver que todas as minhas configurações foram mantidas. Existem basicamente três maneiras pelas quais você pode configurar um quadro de layout automático. Primeiro, como acabamos de fazer pressionando o botão de layout automático no painel de propriedades. Segundo, você pode escolher o atalho Shift e a, ou simplesmente clicar com o botão direito do mouse e selecionar Layout automático. Assim como você adiciona o layout automático a um quadro, também pode removê-lo. Você pode usar um painel de Propriedades e simplesmente clicar em Menos. Você pode usar o atalho segurar, shift e a, ou clicar com o botão direito do mouse e selecionar Remover layout automático. 15. LAYOUT AUTO: 03 Onde posso aplicar layout automático?: Então, onde posso aplicar o layout automático? Você pode aplicar o layout automático a um quadro ou a uma seleção de objetos. Isso inclui quadros com conteúdo existente, grupos ou outras seleções de camadas e todos os objetos, componentes e conjuntos de componentes, quadros novos ou vazios. Texto ou formas. Aqui estão duas camadas que criarão uma moldura em torno dela, mas vamos dar uma olhada nisso em um minuto. Vamos examiná-los com mais detalhes. Então, aqui eu tenho um quadro com conteúdo, e vou simplesmente selecioná-lo e depois adicionar o layout automático. Como você pode ver, isso pegará o acolchoamento e posicionamento e o arrumará um pouco, se necessário. Posteriormente, sempre poderemos ajustar essas configurações. Se eu aplicar o layout automático a um grupo como eu tenho aqui , o grupo será convertido em um quadro ou em um quadro de layout automático mais específico . Como você pode ver, se eu removeria o layout automático, agora ficamos com uma moldura. O grupo se foi, mas tudo bem , porque na Figma, estamos configurando nosso design geralmente com molduras aninhadas. De qualquer forma. Você também pode adicionar o layout automático de dois componentes, e isso é muito útil e você vai usá-lo muito. Se eu adicionar o layout automático ao meu componente que configurei aqui, parece que nada aconteceu, pois a cor e os símbolos permanecem iguais. No entanto, posso ver aqui no lado direito, no painel Propriedades, o layout automático era Editar. Além disso, assim que altero ou adiciono conteúdo, vejo que o layout automático foi aplicado. Você também pode aplicar o layout automático ou sua variação, pois eles são basicamente apenas componentes. Lembre-se de aplicar o layout automático diretamente à sua variação e não ao grupo ao redor dela, porque isso era simplesmente criar uma moldura de layout automático com todas as suas variações. Também posso aplicar o layout automático a quadros vazios. Se eu fizer isso, como você pode ver aqui, parece que nada aconteceu. Mas, assim que adiciono conteúdo, vejo que as regras de layout automático se aplicam. Você pode aplicar o layout automático em uma única camada, como textos. No entanto, você notará que, se selecionar uma tag, não haverá nenhuma opção no painel Propriedades do lado direito para configurar o layout automático. Isso ocorre porque o layout automático só funciona em quadros. No entanto, se você selecionar o texto e usar o atalho Shift a, ele criará uma moldura ao redor do texto. Você pode ver muito isso quando as pessoas criam um botão rápido, porque agora eu posso mudar a cor do fundo e adicionar um pouco de raio. 16. LAYOUT AUTO: 04 o menu de layout automático: Vamos dar uma olhada em tudo o que podemos lidar com o menu Auto Layout. Depois que um quadro for convertido em um quadro de layout automático, haverá um conjunto adicional de propriedades na seção de layout automático no painel de propriedades do lado direito. Vamos entender o que cada um deles faz. Direção. Os quadros de layout automático podem ter duas direções, horizontal ou vertical. Observe como o ícone no painel de camadas muda de acordo. Você não pode ter os dois, mas não pode aninhar diferentes direções de layout automático uma dentro da outra. Mais sobre isso mais tarde. Espaço entre. Isso cria, conforme o nome indica, o espaço entre os itens dentro do quadro de layout automático. Observe como o espaço é horizontal ou vertical, dependendo da direção escolhida. Você pode simplesmente digitar qualquer número aqui ou usar as teclas para cima e para baixo para ajustar a distância. Dica. Se você pressionar Shift enquanto usa as teclas para cima e para baixo para ajustar o espaçamento. Eles aumentarão o valor de redução definido. Então, no meu caso, isso é oito porque estou usando um sistema de espaçamento de oito pontos. Você pode alterar o valor do empurrão simplesmente abrindo o menu figma no lado esquerdo. Digite Nudge e, em seguida, defina o valor que você procura. Além do menu, você também pode usar as alças de controle no campus. Basta arrastá-los para ajustar o espaçamento. Se você clicar na alça, poderá definir um valor específico. Se você não quiser que os itens sejam espaçados, mas empilhados, basta usar um valor negativo. Estofamento. Além do espaço entre os itens, você também pode definir o espaçamento ao redor deles. mesmo aqui, você pode usar o menu em que você está dando uma caixa para preenchimento horizontal e outra para preenchimento vertical. Mas você também pode expandir o menu e definir valores individuais. Ou você pode adaptar o preenchimento diretamente na tela arrastando as próprias alças de controle do Canvas. Dica. Se você quiser mudar a horizontal ou vertical ao mesmo tempo, mantenha pressionada a tecla Alt e arraste. Se você quiser mudar todos os quatro lados igualmente, basta pressionar Shift Alt e arrastar mais pontas. Você também pode manter pressionada a tecla Command e clicar em inserir sua caixa de preenchimento no menu. Em seguida, você obterá a notação CSS, o alinhamento. Com o menu de alinhamento, você pode alterar o posicionamento das crianças dentro da moldura de layout automático. 17. LAYOUT AUTOMÁTICO: 05 configurações avançadas: Vamos dar uma olhada no menu Advanced Auto Layout. Então, isso é um pouco oculto, mas muito poderoso. Clique nos três pequenos pontos no menu Layout automático para revelar o menu avançado. Vamos examinar cada um deles com mais detalhes. Vamos começar com o modo de espaçamento. Você pode escolher entre espaço lotado e espaço entre os treinos para o ambiente. Se você redimensionar a moldura, poderá ver que o espaço definido entre os olhos de Tâmisa é mantido. O espaço entre, por outro lado, usará todo o espaço disponível e criará espaços iguais entre os elementos filhos diretos. E isso se adaptará automaticamente ao redimensionar a moldura. O melhor disso é que você pode agrupar elementos. Você pode usar um quadro aninhado em grupo ou preferência, outro quadro de layout automático aninhado, como fiz aqui, meu exemplo, porque o quadro de layout automático leva em consideração apenas os filhos mais próximos, considerará essas duas crianças. Agora, isso é muito útil para alinhar grupos de dois lados diferentes do quadro principal, como uma navegação. Sempre posso adicionar mais elementos posteriormente e eles estarão acordo com as regras de layout automático definidas. Dica. Você provavelmente vai usar muito esse recurso. Portanto, há dois ótimos atalhos que você deve conhecer. Você pode clicar na caixa de alinhamento e, em seguida, com x alternar entre o espaço entre o impacto. Você também pode clicar na alça de controle do Canvas e colocar um valor fixo para embalado e simplesmente digitar auto para espaço entre eles. Nosso próximo recurso é traçar, incluir e excluir. traços não são calculados para a distribuição do espaço, o que pode fazer com que eles se sobreponham e causem confusão quando se trata de desenvolvimento. Então, aqui você pode definir seu traço. Antes de analisarmos o empilhamento do Canvas, lembremos que tenho espaço no meu layout automático e, se eu definir isso com um valor negativo, os itens serão empilhados. Ao clicar no empilhamento do Canvas, posso simplesmente alterar a ordem. Observe que o Canvas Decking não altera a posição real no painel de camadas. Não haverá nenhuma mudança. Se você quiser alterar a posição real de um elemento, selecione o elemento e mova-o para layout automático com as teclas de cima para baixo, da esquerda para a direita. O último é um alinhamento da linha de base do texto. Então, aqui eu tenho meus itens, mas eles são todos de tamanhos diferentes e eu quero que eles sejam colocados em uma boa linha de base. Então, selecione o quadro de layout automático e, em seguida, você terá uma pequena visualização. Se você clicar, poderá ver isso bem alinhado. Depende um pouco do que você procura, se isso faz sentido em seu design ou não. 18. LAYOUT AUTO: 06 redimensionamento de layout automático: Vamos falar sobre redimensionamento e layout automático. Essa é a parte mais poderosa do layout automático, mas também aquela que você pode precisar de um momento para se familiarizar. Anteriormente, esse recurso tinha sua própria caixinha abaixo do menu Auto Layout. Agora você o encontra em uma seção de molduras. Então, abaixo da largura e da altura. O redimensionamento basicamente indica como o elemento se comportará horizontal e verticalmente quando houver uma alteração no conteúdo ou no tamanho. Temos três opções de redimensionamento: largura fixa, altura, conteúdo do abraço, muito fofo e recipiente cheio. E você pode misturá-los. Portanto, você pode ter um para altura e outro para largura. Primeiro, vamos entender nossas configurações um pouco mais de detalhes. Então, vamos primeiro dar uma olhada no fixo. Então, aqui eu vou ter que fazer o layout automático dos quadros, um com uma forma interna e outro com texto. Então, vamos definir a forma para altura e largura fixas. E também vou definir o texto para uma altura fixa. E como você pode ver, ele já me dá abraço por um motivo aqui na vertical, mas por enquanto estou configurando para uma altura fixa. Então, se eu redimensionar o contêiner principal agora, você pode ver que nada acontece porque, obviamente, o objeto está definido como fixo e o mesmo acontecerá com o texto. Assim, posso fixar o texto e a largura sem problemas. Mas, como você percebe, isso me deu um abraço por padrão quando se tratava de me esconder. O motivo é que, se eu copiar esse texto aqui e adicionar mais texto, você pode ver que ele o copia, mas não vai mais ficar em uma caixa de texto. Então, outros elementos não responderão a isso e nós não queremos isso. Vamos ver o que acontece se eu mudar isso para um abraço. Estou selecionando o mesmo texto e agora estou mudando a altura de volta para o conteúdo de abraços. E você verá que essa caixa agora se abraça no texto. Então, ele usa todos os textos existentes e, em seguida, adiciona o espaçamento e o espaçamento ao redor. Ao usar abraço com texto, é muito importante que você também verifique suas configurações de texto. Isso sempre deve ser definido na altura automática ou se você estiver trabalhando com um layout horizontal na largura automática. Agora, o que aconteceria se eu mudasse a largura para abraçar o conteúdo também? Vamos tentar isso. Bem, isso não vai fazer muito sentido nesse caso, porque ele simplesmente distribuirá tudo para a largura automática e, em seguida, a caixa será ajustada. Então, eu não quero isso neste caso. Mas, por exemplo, se eu estiver configurando um botão, esse é um ótimo exemplo em que eu usaria conteúdo do hub horizontal e verticalmente. Então, como você pode ver, não há uma solução única que realmente dependa do que você está construindo e, em seguida, de misturar corretamente as configurações de redimensionamento horizontal e vertical. Agora, se eu verifiquei minha moldura aqui, a forma no meio, eu nem tenho a opção de conteúdo Hug. A razão é que isso é simplesmente uma forma, então não pode segurar nada para ser abraçado. Agora, se eu selecionar a moldura, posso configurá-la para abraçar o conteúdo. Mas parece que muita coisa não aconteceu. Se eu, no entanto, mudar meu preenchimento aqui, você notará que ele se adaptará. Assim que eu redimensionasse manualmente. Dê uma olhada nas minhas configurações de redimensionamento. Isso voltará a ser corrigido. Então, se eu voltar a me abraçar, isso respeitará meu remo novamente. Vamos dar uma olhada no nosso último, um recipiente cheio. Agora, se eu selecionar esse quadro principal, não há opção de preenchimento do contêiner. Isso ocorre porque simplesmente não há contêiner a ser examinado. Então, vamos pegar o elemento filho aqui e configurá-lo para encher o recipiente e sentir o recipiente. Agora, se eu estiver redimensionando os pais, você pode ver que ele manterá o preenchimento e usará todo o espaço disponível do tamanho determinado. Vamos usar o mesmo em nosso exemplo de textos. Então, vou definir isso como phil container, e vou adicioná-lo como um contêiner cheio também, mesmo que, como você pode imaginar, não seja a melhor solução. Então, se eu redimensionar o contêiner, isso é muito bom e vai usar todo o espaço disponível e respeitar meu estofamento. No entanto, na altura, você notará que estou criando um espaço vazio com texto. Normalmente, você pode usar muito o recipiente de enchimento na horizontal, mas geralmente nos limitamos a abraçar conteúdo quando se trata de configurações verticais. É muito importante que você comece a jogar um pouco com essas configurações e entenda o que elas estão fazendo. Mas o melhor é jogar com eles em um exemplo real. Então, vamos construir um carro juntos. 19. LAYOUT AUTO: 07 Construir um cartão responsivo com redimensionamento de layout automático: Vamos aplicar nossas novas configurações de redimensionamento aprendidas para descartar. Em primeiro lugar, selecionarei a moldura principal do cartão e aplicarei o layout automático. Como você pode ver, o Figma já tenta adivinhar quais seriam as melhores configurações de redimensionamento. Então, neste caso, abraço, abraço. E isso é muito bom porque, por exemplo se eu duplicar esse conteúdo e adicionar mais, você pode ver que isso está realmente funcionando bem. No entanto, se eu estiver redimensionando, isso não é realmente o que eu procuro. Então, vamos examinar cada elemento passo a passo. Minha imagem, eu gostaria de redimensionar com a moldura principal. Então, vou configurar isso para encher o recipiente. Então, vamos ver o que aconteceria. Sim, está funcionando muito bem. Vou colocar meu título aqui para encher o recipiente também. E agora dê uma olhada no que acontece se eu mudar os textos de cópia para parecerem contêineres. E observe que, no momento, esse é o único tamanho fixo. Então isso claramente não é o que procuramos e isso está acontecendo porque esse não é um tamanho que define a largura do meu cartão, porque meu cartão, o contêiner principal, é enviado para abraçar, abraçar. Então, isso é simplesmente dito isso para largura fixa por enquanto. E agora também podemos ter um contêiner cheio aqui. E se redimensionarmos nosso cartão, isso funcionará da maneira que pretendíamos. Lembre-se de que, ao trabalhar com textos, precisamos garantir que nossas configurações de texto estejam sempre configuradas para ocultar automaticamente em um botão em que estamos abraços, abraços. Essa será a largura automática, mas todas as tags que possam ter mais uma linha sempre de uma linha sempre precisarão ser configuradas para ocultar automaticamente. Este precisa ser ocultado automaticamente. E isso aqui precisa ser ocultado automaticamente. E como eu disse, Figma se tornou muito boa em detectar isso e já configurá-lo para você. Mas se você tiver algum problema em que o texto não esteja realmente se comportando com o layout automático. Certifique-se de verificar essas configurações. E como temos a largura automática e a configuramos para abraçar verticalmente, podemos simplesmente adicionar mais conteúdo. Deixe-me copiar isso e adicionar mais conteúdo aqui. E você pode ver que isso funciona perfeitamente. E mesmo que eu agora redimensione, isso vai funcionar bem. Então, vamos dar uma olhada no nosso último elemento no botão Concluído do cartão e isso está configurado para abraçar, abraçar. E isso é simplesmente perfeito porque abraço, abraço significa que horizontalmente, ele sempre usará esse acolchoamento e verticalmente também respeitará esse preenchimento e nosso botão só funcionará para ser uma linha. Então, se eu adicionar mais conteúdo aqui, isso vai se adaptar muito bem. Se você quiser um botão de largura total, no entanto, você o configuraria para preencher o recipiente. E você pode então aqui com o centro de alinhamento, o conteúdo com a moldura principal. É claro que você ainda pode adaptar todo o espaçamento e o preenchimento. E você também pode colocar e retirar itens do layout automático. E assim, você tem um cartão responsivo que se adapta totalmente a qualquer conteúdo. 20. LAYOUT AUTO: 08 componentes e instâncias de layout automático: Como aprendemos, o layout automático também funciona com componentes e isso é muito útil. Então aqui eu tenho meu cartão responsivo. O que eu quero fazer agora é selecionar esse cartão e criar um componente. Também faz muito sentido que esse botão aqui seja um componente próprio, pois provavelmente usarei instâncias em lugares diferentes. Não consigo criar um componente dentro de um componente. Então, o que vou fazer é retirar esse botão, criar um componente, criar uma instância desse botão e colocá-lo de volta no meu componente principal. Agora, a melhor coisa sobre isso é que, se eu selecionar minha instância do botão aqui, você pode ver que ele herda todas as configurações de layout automático e as configurações de redimensionamento. Então, por exemplo, se no componente principal eu mudaria a largura para fixa. Você pode ver que a instância herda a configuração. Vamos voltar ao conteúdo de abraços. No Figma, você tem a opção de substituir as configurações de layout automático em suas instâncias. Então, por exemplo, eu poderia definir esse botão para encher o recipiente. No entanto, eu recomendo fortemente que você mantenha todas as configurações de layout automático intactas e realmente altere apenas, por exemplo o conteúdo do botão. Se você quiser ter uma variação, por exemplo, um botão de largura total ou algo com um comportamento diferente, recomendo que você configure outra variante. Ok, ótimo. Agora, vamos criar uma instância do cartão inteiro. Posso simplesmente fazer uma cópia do meu componente principal ou usar meu menu aqui, recursos, e então simplesmente digitar cartão e você encontrará o componente que procura. E eu terei uma cópia aqui. Você também pode usar o painel de ativos. Agora posso usar essas instâncias em todo meu design para poder adaptar o conteúdo. Vamos adicionar um pouco mais de texto aqui. Vamos apenas adicionar mais manchetes. Isso. Eu vou manter o mesmo. E então, para as imagens, vou usar um plugin. Então eu vou usar o plug-in e depois vou colocar o Splash, executá-lo. Então, com o Unsplash, você pode pesquisar uma imagem específica ou simplesmente usar qualquer uma das categorias predefinidas. Então, vou para o interior por enquanto, selecione a forma. E então você pode simplesmente selecionar qualquer uma das imagens e ela preencherá a forma. Obviamente, você também pode usar suas próprias imagens e importá-las para o Figma. Então, meu cartão em si está funcionando muito bem ao redimensionar. No entanto, o que eu quero é que, se eu tivesse essas cartas juntas, quero que elas também respeitem a distância. Então é quando o aninhamento entra, basta selecionar os dois carrinhos e clicar em Layout automático e criar outro quadro de layout automático em torno desses dois cartões. Vamos entender isso. Essa nova moldura que eu criei. Se dermos uma olhada no menu Camadas, você pode ver que agora esse é o quadro principal para essas duas instâncias de cartão de layout automático. E é aqui que acontece muita confusão. Portanto, esteja ciente de que esses cartões ainda herdam todas as configurações de layout automático do componente principal. Então, se eu pegar qualquer um desses cartões e redimensioná-lo manualmente, você pode ver que tudo isso ainda está no lugar. No entanto, se eu selecionar o quadro principal e redimensioná-lo , nada acontecerá. Por que isso? A razão para isso é que esse cartão simplesmente olha para dentro. Então, tudo o que eu disse neste cartão de layout automático funciona com esse único cartão. O cartão não sabe onde as instâncias serão usadas em grupos maiores. É por isso que preciso definir outra opção de redimensionamento para cada um desses cartões e dizer como quero que ele se comporte com uma nova moldura principal. Então, o que vou fazer é selecionar o quadro principal e pressionar Enter. Esse é um atalho para selecionar todos os elementos secundários de um quadro. E agora eu posso definir o redimensionamento para todos eles de uma vez. E eu vou pegar o contêiner Phil. Se eu agora redimensionar a moldura principal, você pode ver que eles estão respeitando a largura. Então, ao selecionar o quadro principal, agora posso alterar o espaço entre. E eu também poderia adicionar um pouco de preenchimento. E isso sempre corresponderá à estrutura principal, não aos elementos secundários internos. Se eu quiser fazer alterações aqui, eu usaria o componente de domínio. 21. LAYOUT AUTO: 09 quadros de layout automáticos: Vamos criar uma navegação responsiva com layout automático aninhado. Então, aqui eu tenho meus diferentes itens para colocar dentro da navegação. E aqui eu configurei um quadro que vai segurar minha navegação. Então, a primeira coisa que vou fazer é transformar meu item aqui em um quadro de layout automático. E eu também vou transformá-lo em um componente. E eu vou fazer o mesmo com o meu botão. E só para ter um design limpo, também vou transformar meu logotipo e meu avatar em componentes. Vou pegar esse item aqui. Vou criar três instâncias e chamá-las de blog sobre e contato. Agora vou adicionar uma instância dos meus botões, bem como uma instância do meu avatar. E estou renomeando o botão para assinar. Então, agora vou selecionar todos eles e transformar isso pressionando Shift a em um quadro de layout automático. E vou colocar o quadro dentro da minha navegação. Então, deixe-me arrumar isso um pouco. Vou mudar o espaçamento para múltiplo de oito. Então 16, talvez seja um pouco pequeno, 24. E eu vou dar uma olhada, o que vai ficar bonito. Eu poderia enviá-lo aqui ou também poderia usar o pescoço de alinhamento da linha de base do texto. Isso não vai funcionar com meu avatar. Vou deixá-lo e usar minha ferramenta de alinhamento aqui. Não vou apenas criar uma instância do meu logotipo mas também colocá-la dentro do meu quadro de navegação. Agora, a única coisa que falta é que eu selecione meu quadro de navegação, que agora é meu novo quadro principal. E vou transformar isso em um quadro de layout automático agora, para arrumar qualquer um dos meus espaçamentos e espaçamentos. Então, eu também quero que isso seja um múltiplo de oito para combinar com meu sistema de espaçamento de oito pontos. E essa posição está no centro? Vou apenas posicionar tudo isso no centro. Agora, se eu redimensionar, isso, no entanto, não vai funcionar. Agora, sua ideia inicial pode ser usar o menu de redimensionamento. No entanto, há uma maneira muito melhor. Lembre-se de que estamos lidando com distribuição. Então, vamos usar nosso menu avançado. Em seguida, mude de embalado para espaço entre eles. Agora ele está usando todo o espaço disponível quando eu redimensiono. O melhor disso também é que, se eu remover elementos ou adicionar elementos, isso ainda funcionará. Eu posso até aninhar isso ainda mais. Assim, eu poderia escolher todos os meus itens de link. E eu vou fazer isso aqui no painel de camadas porque ele mostra uma estrutura um pouco melhor. Agora eu poderia pressionar Shift a e criar outro quadro. Vou chamar isso de links. Então, agora eu poderia distribuí-lo a uma distância dentro deles. E eu também posso alterar a distância entre essa moldura aninhada. Eu também poderia retirar esse grupo aninhado e fazer com que ele editasse seus próprios itens. Então, dessa forma, teríamos três elementos filhos novamente. E agora meu espaço entre um ainda trabalhando, mas distribuindo entre três crianças. Observe que, com o layout automático, geralmente não há apenas uma maneira de criar isso. Existem várias maneiras alcançar esse resultado. Você pode, por exemplo, definir todo o seu espaçamento aqui em seus componentes principais. Então, em seus átomos, não há certo ou errado. No entanto, considere que um pouco de preenchimento aqui e um pouco de espaçamento aqui provavelmente serão bastante confusos. Por isso, recomendo que você use uma técnica e apenas discuta com sua equipe o que funciona melhor para você. 22. LAYOUT AUTO: 10 posicionamento absoluto: Podemos posicionar de forma absoluta outros elementos dentro de quadros de layout automático. O que isso significa? Então, aqui eu tenho um quadro de layout automático. Quero arrastar esse novo adesivo para cá e queria sentar 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. Então, o que posso fazer agora é colocá-lo dentro do quadro, selecioná-lo. E então, no menu de quadros do meu lado direito, na parte superior está o pequeno botão oculto chamado posição absoluta. Se eu clicar nisso, eu o retirarei do fluxo de layout automático. Agora eu posso posicioná-lo livremente dentro da minha moldura. 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, recites não se aplicam. No entanto, agora vou ver as restrições aparecendo novamente para elementos posicionados em posição absoluta. Então, vou corrigir isso no lado direito e no topo. Agora, à medida que eu redimensionei, ele vai ficar no lado direito da moldura exatamente como eu queria. A propósito, se você quiser adicionar algo como um balão de alerta que vá além do quadro, você também pode fazer isso. Adicione-o ao quadro, defina-o para o posicionamento absoluto. E então você pode ter que posicioná-lo um pouco com as teclas de seta para que não saia do quadro. Em seguida, o que você precisa fazer é selecionar um quadro principal e desmarcar o conteúdo do clipe. Agora você poderá ver isso. E sempre se moverá com sua moldura. 23. LAYOUT AUTO: 11 configurações de layout automático mais complexas: Vamos entender configurações de layout automático mais complexas. Aqui eu configurei diferentes opções de cartão. Vamos adicionar layout automático a todos eles para familiarizarmos um pouco mais com o processo. Como você notará, a chave é realmente começar no menor elemento e depois subir. Vamos começar com nosso primeiro layout. Se eu simplesmente aplicasse layout automático a todo o quadro principal , isso funcionaria. No entanto, eu teria a mesma distância entre todos os elementos secundários e não quero isso. Deixe-me abrir o menu Layers para que você possa ver isso um pouco melhor. Vou criar quadros de layout automático aninhados aqui para dar mais estrutura. Então, toda a minha seção de introdução, a sublinha do título e a data, vou selecionar isso, pressione Shift a. E vou criar um quadro de layout automático aninhado. Você pode ver que aqui o espaçamento está definido como zero. Então, se eu aumentasse isso, conseguiria mais distância. Agora já posso pegar o quadro principal, adicionar o layout automático e você verá que agora ele está funcionando. Esta é uma moldura aninhada. Agora você pode ver que o espaçamento só se aplica aos elementos filhos diretos. Agora está definido para 14 e eu poderia aumentá-lo ou diminuí-lo. Eu quero defini-lo como 16 para ter um múltiplo de oito. layout automático captou todo o meu preenchimento à esquerda, à direita, superior e inferior automaticamente. E também é definido com 14. Vou pressionar Command e clicar nas minhas opções de preenchimento. Lembre-se de que esse é o atalho para a notação CSS. Eu adiciono 16 e, dessa forma, posso alterar todo o preenchimento para 16 com um clique. Tudo o que preciso fazer agora é definir as opções de redimensionamento para o quadro S. Até agora, nada está acontecendo. Eu seleciono a imagem e a deixo como fixa, fixa. Em seguida, seleciono minha moldura aninhada. E agora é por isso que você precisa ter cuidado. Se eu enviar este para preencher o recipiente, seleciono o elemento filho. Você verá que isso ainda está definido como corrigido. Portanto, é importante selecionar o pai, pressionar Enter e, em seguida, obter o elemento filho antigo de uma só vez e configurá-lo para preencher o recipiente. Então, estou configurando os elementos secundários, bem como esse contêiner principal, agora que é seu próprio novo layout automático para preencher o conteúdo. Estou configurando meu texto de texto para que pareça conteúdo. E vou me certificar de que está configurado para máximos automáticos. Posso dizer meu link para abraçar, abraçar, pois estou tratando isso um pouco como um botão. E agora você verá que tudo está funcionando perfeitamente. Vamos abordar nosso segundo layout. Então, aqui precisamos combinar o layout automático horizontal com o vertical. Vamos pensar na estrutura antes de começarmos. Então, isso é basicamente o que configuramos antes. Teremos uma moldura aninhada aqui. Em seguida, criamos uma moldura ao redor da seção direita. E então temos esse quadro principal com um quadro de layout automático horizontal. Vamos fazer isso. Então, vou selecionar minhas manchetes aqui novamente, minha introdução e vou pressionar Shift a, e isso se torna um quadro de layout automático. claro que você deve sempre dar um nome a ele. Vamos chamar isso de manchete. Em seguida, estou selecionando meus textos de cópia e meu link e pressionando Shift a novamente. E também posso nomear esse lado direito ou direito. Agora estou selecionando a moldura dos meus pais. E como você pode ver agora, eu só tenho os dois elementos filhos aqui. Então, ele vai aplicar o layout horizontal. Vamos dar uma olhada nesse layout também. E você pode ver que isso é automaticamente definido como horizontal. Então, assim como Figma percebe o acolchoamento e espaçamento e também capta as direções. Então, vamos limpar isso e também adicionar nosso redimensionamento imediatamente. Então, estou configurando isso aqui para abraçar o conteúdo. Estou configurando meu texto para parecer recipiente e garantir que ele tenha altura automática. E agora estou com meu último elemento, que é um quadro de layout automático aninhado. Primeiro precisa entrar, selecionar todos os elementos filhos com N para configurá-los para encher o recipiente. E então eu estou selecionando o pai novamente e também defino isso como recipiente cheio. Agora, por que isso está acontecendo? Isso está acontecendo porque a moldura principal está pronta para abraçar. Eu posso simplesmente redimensionar isso. Defina isso para encher o recipiente. E agora vai ficar correto novamente. Eu tenho meu lado direito pronto. Minha imagem aqui. Eu queria sair em um local fixo novamente. O que eu poderia fazer é mudar a posição se quisesse no centro ou algo com alinhamento. E agora vamos ver o que acontece se eu redimensioná-lo e isso estiver funcionando. Simplesmente ótimo. Você pode se perguntar o que aconteceria se eu configurasse isso para encher o recipiente também , para que eles compartilhassem esse espaço. Então você também pode ter algo assim. Mas, no meu caso, quero mantê-la corrigida. Vamos configurar nosso design aqui novamente, eu tenho uma mistura de layout horizontal. Então, este será meu quadro aninhado horizontal e meu layout automático vertical. Bem como um pequeno elemento posicionado de forma absoluta no canto superior direito. Vamos primeiro selecionar nossos títulos como de costume, mudar a para criar um quadro de layout automático, aliás, sempre pode usar o menu. É exatamente o mesmo. Em seguida, seleciono a imagem e meu novo quadro aninhado e pressiono Shift a novamente. E agora eu tenho apenas elementos secundários verticais na minha moldura principal com a mesma distância. Então, eu seleciono meu quadro principal e transformo em um quadro de layout automático. Então, isso não parece o que eu procuro, porque esse elemento aqui agora é visto como um elemento filho. Vou tirar isso da moldura por enquanto e lidar com isso mais tarde. Ok, então vamos primeiro dar uma olhada no que aconteceu aqui. Ele tirou minhas almofadas. Vou apenas acrescentar isso. Vou pressionar Command e clicar nos meus campos de preenchimento e vou definir isso para 16 ao redor. Então, isso está de volta ao que eu quero. Agora vou fazer o meu habitual e selecionar aqui o elemento filho da minha moldura aninhada, recipiente cheio. Minha estrutura aninhada também queria encher o recipiente. Minha imagem, como de costume, estou deixando em um local fixo e estou configurando isso para preencher o recipiente. E agora vamos pegar esse aqui. Vamos ver o que acontece. Sim, fica com o recipiente porque o pai está pronto para abraçar, mas já tem conteúdo suficiente para abraçar. Então, vamos redimensionar agora, vamos ver se isso está funcionando. Isso está funcionando muito bem. A única coisa que eu não gosto é esse preenchimento aqui. Também está um pouco definido como, está definido como três. Isso é muito pequeno. Vamos configurá-lo para oito. Perfeito. E agora vou lidar com meu elemento posicionado absoluto. Então eu vou pegar isso e arrastá-lo para dentro. Ele será visto como um elemento filho novamente até que eu ative a posição absoluta. Agora, ele foi retirado do fluxo de layout automático. Agora eu posso posicioná-lo onde eu quiser no meu quadro. E lembre-se, eu posso adicionar restrições. Agora, se eu redimensionar, está funcionando, apenas um pequeno erro está acontecendo aqui. Vamos ver se essa moldura aninhada eu não disse que parece recipiente. Vamos mudar isso. Agora. Tudo está do jeito que eu quero que seja. Novamente, você pode ouvir se você selecionar esse quadro, posicionar a imagem para que você possa colocá-la na parte superior, ou eu gosto bastante dela aqui no centro. Isso depende de você. Aqui, sem dúvida, está meu layout mais complexo. Vamos dar uma olhada no que está acontecendo. Então, eu tenho duas seções principais. Há aqui a barra inferior e o conteúdo principal. O conteúdo principal é novamente dividido em layout horizontal. Então, eu estou tendo esse lado e minha imagem. Vamos começar com o conteúdo principal. Então, vamos selecionar todo o texto no lado direito shift e transformá-lo em um quadro de layout automático. Agora eu mantenho isso selecionado, seleciono minha imagem e pressiono Shift a novamente. E agora eu tenho minha parte superior. Eu vou dizer que isso não é o melhor significado. Então eu vou dar uma olhada no que está acontecendo aqui embaixo com minha barra inferior. Então, vamos dar uma olhada. Se transformarmos tudo isso em layout automático, pensaríamos que todos esses elementos que estou tentando não queremos isso, então precisamos fazer um pouco de aninhamento aqui. Então eu começo com meus avatares aqui, seleciono todos eles, pressiono Shift a, e você pode ver que o que acontece é que ele os posiciona bem um ao lado do outro. Não quero isso, mas posso empilhá-los simplesmente arrastando ou você também pode adicionar espaçamento negativo. Você pode fazer isso ao seu gosto. Acho que foi algo assim. Agora, você pode ver que esse não é o que costumava estar no topo. Então, o que eu posso fazer é pegar o menu avançado e ir para o empilhamento do Canvas. Primeiro no topo. Perfeito. OK, então esses dois parecem estar à esquerda com sua própria distância. Então, vamos selecionar esses dois. Pressione Shift a, transforme-os em um quadro de layout automático. E então aqui eu poderia até adaptar o espaço. Vou apenas definir isso para 24 e ter meus múltiplos de oito, bem e arrumados. Agora, posso selecionar os dois quadros aninhados que criei e criarei outro quadro de layout automático em torno deles. Agora eu posso posicioná-los de forma que fiquem bem, todos no meio, por exemplo, e vou ter que ver o que vou fazer com essa barra aqui. Então, eu diria que essa barra, eu poderia deixar em seu próprio elemento, seu próprio elemento filho. Mas deixe-me ver, talvez mais tarde eu tenha adicionado a uma das minhas molduras aninhadas. Ok, então agora eu tenho isso aqui em cima. Eu tenho, vou chamar isso de barra inferior. E eu vou ter a linha. Deixe-me colocar isso na posição que eu quero que eles estejam. Então, agora eu pego meu contêiner principal e o transformo em um quadro de layout automático. Isso parece bom. E agora vamos definir o comportamento de redimensionamento. Então, aqui eu seleciono esse quadro novamente, pressiono Enter Todos os elementos filhos para preencher o recipiente. E eu estou configurando isso aqui para preencher o recipiente novamente, minha imagem, deixo fixa, fixa. E esses recipientes para a parte superior, também estou configurando para encher um recipiente. Vamos ver o contêiner principal definido como hoc. Vou configurar isso como corrigido agora para que não seja redimensionado. Agora vou dar uma olhada na minha barra inferior. Essas imagens aqui. Eu os deixo em conteúdo fixo e fragmentado. Está tudo bem. Aqui. Que conteúdo que parece bom, o conteúdo dela, ótimo. O quadro principal também tem conteúdo. E agora o que eu faço aqui é colocar isso no espaço entre. E então eu só preciso lidar com minha linha aqui que vou configurar para encher o recipiente também. Ok, vamos dar uma olhada se isso funciona. Então, minha parte superior e minha linha estão funcionando, mas esqueci de colocar a barra inteira aqui para encher um recipiente. Vamos redimensionar novamente. Fantástico, está funcionando. Então, como você pode ver, desde que você tenha uma abordagem estratégica para o layout automático, na verdade não é tão difícil. Pense nisso em pequenas partes que você mantém juntas e não em um design grande e avassalador. Gosto de usar a abordagem de configurar pela primeira vez minha moldura aninhada. Então, primeiro eu penso na estrutura, depois eu disse o redimensionamento. E então, no final, o que eu ainda teria que fazer aqui é garantir que tudo seja múltiplo de oito e respeite meu sistema de espaçamento de pontos de auxílio. E, claro, ele também precisou dar uma olhada nos elementos monásticos infantis para ter certeza de que tudo estava de acordo com meu sistema de espaçamento. 24. NOVO! LAYOUT de AUTO variáveis para espaçamento e preenchimento: Usando variáveis para preenchimento e espaçamento e Figma. Vamos primeiro dar uma olhada na coleção que vamos usar para nosso espaçamento. Clique no fundo cinza do Canvas e, em seguida, você verá as variáveis locais. Clique no sinal da variável local e você verá suas coleções. Você pode mudar de qualquer coleção que já tenha criado e também pode criar novas coleções aqui. Eu já criei essas variáveis para você. Mas se você quiser criar mais, basta clicar em criar variáveis. Então, para espaçamento, você usaria várias variáveis e poderia criar qualquer outra variável que desejar Você também pode adicionar variáveis no meio, simplesmente arrastando as variáveis que você criou em torno de sua coleção Mas vamos deletar esse aqui. Você pode fazer isso clicando com o botão direito do mouse e, em seguida, simplesmente clicando em excluir variável. Como você pode ver, estou usando múltiplos de oito para meu sistema de espaçamento. Observe também que você pode clicar na variável de edição e, em seguida, definir onde deseja que essa variável de espaçamento seja usada Por enquanto, vamos fechar nossa coleção e aplicar esse espaçamento e preenchimento ao nosso cartão Isso só funcionará na configuração de elementos com layout automático. Vamos selecionar nosso cartão, você pode ver que atualmente no elemento pai aqui, nenhum espaçamento está definido Eu poderia escolher uma variável simplesmente clicando nesse campo no símbolo da variável e seguida, escolhendo uma variável no meu menu suspenso. No entanto, isso aumentaria o espaçamento ao redor do meu cartão. Agora, eu realmente não quero isso. Eu quero esse espaço aqui dentro do meu cartão. Esta parte está aqui para ter o preenchimento adicionado. Vou selecionar esse quadro de layout automático aninhado. Então você pode ver que isso já é um múltiplo de oito, mas eu quero usar minha variável, então eu me certifico de que tudo esteja alinhado em todo o meu design Novamente, eu seleciono o campo. Eu vejo a variável C aparecer. Clique nele. Agora posso escolher meu bloco de espaçamento M. Vou escolher isso aqui também, e também posso usá-lo para espaçamento Lembre-se, podemos usar, o que seria o espaço entre eles. Mas estou escolhendo uma variável e, novamente, opto pela oito, que eu já configurei manualmente antes. Se configurarmos isso como um componente e agora retirarmos uma instância, você verá que, se eu selecionar esse layout aninhado na minha instância, as variáveis serão herdadas do componente principal Se eu redimensionar, tudo permanecerá no lugar e minhas variáveis definirão o espaçamento e o preenchimento desse componente Se eu mudasse o valor de uma variável, então pegássemos meu bloco de espaçamento e aumentássemos o número, qualquer lugar em que eu usasse essa variável em meu design seguiria 25. VARIÁVEIS: Observe que as variáveis são um tópico muito, muito grande e poderoso. Eles foram introduzidos no final de junho de 2023. Se você não está familiarizado com variáveis, então eu tenho um mergulho profundo sobre esse tópico. 26. NOVO! LAYOUT de AUTO como definir uma largura mínima e máxima: Configurando uma largura mínima e máxima com o Figma. Aqui eu não tenho carros com layout automático. Agora, eu posso redimensionar esse cartão, mas em algum momento ele vai ficar muito estreito. Em algum momento será muito grande. Então, o que eu queria fazer é definir uma largura mínima, como por aqui. E uma largura máxima. Vamos começar com uma largura mínima. Vou redimensionar até o ponto que eu acho que é aqui que ainda parece bom Então, será em torno de algo como 240. Então eu posso ir até aqui e na largura vejo um pequeno erro. Agora recebo esse menu suspenso e posso escolher a largura mínima do anúncio E vou simplesmente digitar aqui meu número que eu quero e posso alterá-lo a qualquer momento Agora vamos ver o que acontece se eu redimensionar agora. Você pode ver que eu ainda posso ir tão grande. Mas se eu diminuir, você pode ver que, quando eu atingir esse limite, duas linhas vermelhas , uma PM, e eu estou sendo impedido de redimensionar ainda mais O mesmo para uma largura máxima. Acho que vou colocar isso aqui, talvez 450. Então, o mesmo procedimento com um menu suspenso, adicione uma largura máxima, vou usar 450 E, novamente, eu sempre posso mudar isso para qualquer outro valor. Agora, se eu redimensionar, você pode ver que posso continuar, mas posso alterar o tamanho entre esses dois conjuntos de Min e Max. E você pode usar os dois juntos. Ou você pode simplesmente usar Min ou max se quiser remover e simplesmente selecionar seu componente. E você verá que Min e max estão definidos aqui se você passar o mouse sobre isso também E você pode ver aqui, remova Min e max. Você também pode configurar variáveis e usá-las como seus valores mínimo e máximo. Então, vamos dar uma olhada. Se seguirmos nosso design, crio uma coleção com um mínimo e uma largura máxima de 250,450 No entanto, se eu simplesmente selecionar o cartão, vá para aplicar variável e, digamos, adicione a largura mínima Em seguida, isso seria adicionado como a largura mínima, como a largura principal de todo o cartão Portanto, isso não teria nada a ver com Min ou max. Simplesmente gostaria que, se eu a redimensionasse, como jogar fora a variável que defini aqui, o que eu precisaria fazer é primeiro adicionar a largura mínima depois obter um E a partir daqui, agora posso aplicar minha largura mínima. E então eu faço o mesmo com a largura máxima. Eu recebo um novo campo e agora aplico minha variável para a largura máxima em. Agora, se eu redimensionar , é isso que eu procuro Agora posso transformar isso em um componente, retirar uma instância e você verá que essa instância seguirá o conjunto mínimo e máximo do componente principal. A propósito, usamos muito menos, no entanto, esteja ciente de que você também pode definir Min e max para a altura 27. NOVO! LAYOUT de AUTO: envoltório de layout automático: Envolvimento automático do layout. À esquerda, aqui, tenho dois componentes, um cartão básico e um cartão de boletim informativo. E à direita, eu tenho uma moldura principal. E dentro da moldura dos pais, tenho exemplos desses cartões. Agora, esse quadro principal aqui você pode ver configurado como layout automático. E desde junho de 2023, não temos apenas layout automático horizontal e vertical configurado, mas também temos o embrulho Então, vamos ver o que acontece agora, pois eu tenho isso configurado para Horizontal. E você pode ver que ele é redimensionado. Mas em algum momento, isso precisaria pular para a nova linha. Aqui, eu posso usar o envoltório. Olá, forneça, basta adicionar esse envoltório, então nada vai acontecer porque meus componentes ainda estão configurados com layout automático e eles não sabem em que ponto eu quero que eles quebrem. Poderíamos alterá-los do contêiner Phil para uma largura fixa Então, agora eles têm uma largura fixa, se eu redimensionar, ainda passarão para a nova linha Mas talvez eu queira um pouco mais de fluido. Eu quero que isso seja fluido e, em um certo ponto, pule para a próxima linha Então, o que eu posso fazer é definir uma largura mínima e uma largura máxima. Então, vou adicionar isso ao meu componente principal. Vamos apenas adicionar uma largura mínima de 250 e também adicionar uma largura máxima de 450 Não é um boletim informativo. Eu só vou adicionar uma largura mínima por enquanto e ver como fica, porque eu gosto muito dela para esticar. O que eu preciso fazer é selecionar o pai. Se eu pressionar Enter, seleciono todas as instâncias de uma vez. E agora eu o coloco de volta para encher o recipiente. Atualmente, herdar minmax ainda está um pouco problemático. Então, o que vou fazer é selecionar todas as instâncias novamente e me certificar de redefinir os tamanhos. Na verdade, você só precisa redefinir os tamanhos se estiver enfrentando algum problema. Caso contrário, esse é o resultado que você deve obter. Agora, quando as instâncias atingirem seu tamanho mínimo, elas serão remodeladas para 28. NOVO! Configurando uma página de layout automático inteira: Vamos configurar uma página inteira com layout automático. Aqui eu configurei uma página básica. Ele contém uma navegação, bem como três instâncias de cartões de layout automático. Tudo já está configurado em um layout automático, então minha navegação já está configurada para ser responsiva e espaçada Meus cartões também são configurados com layout automático. No entanto, se eu redimensionar meu quadro principal, eles não reagirão Se eu simplesmente transformar o quadro principal em um quadro de layout automático, isso não vai funcionar porque então todos eles serão distribuídos verticalmente Preciso adicionar alguma estrutura por meio do layout automático Nesting. Primeiro. Vou selecionar todas as três cartas e vou criar uma moldura de layout automático em torno delas. espaço entre agora é basicamente minha calha que eu posso ajustar Agora posso usar a moldura dos meus pais e adicionar layout automático. Basicamente, pense em seu design como seções diferentes que você está unindo ao layout automático final em um quadro principal. Agora vou adicionar o redimensionamento. E o que eu gosto de fazer é ir dos elementos secundários mais baixos, do centro, basicamente até a moldura principal. Agora vou selecionar meu grupo de cartões e pressionar Enter. Ao pressionar Enter, estou selecionando todas as crianças dentro desse quadro de layout automático. E agora vou mudar o redimensionamento de todos esses elementos secundários para encher o recipiente horizontalmente Portanto, se eu selecionar o grupo de cartões novamente Definir quadro aparente, posso testar isso e ver se funciona bem Então, o conteúdo desse grupo de carros está respondendo. Mas se eu redimensionar o quadro principal do que o custo da própria Web, ainda não sei o que fazer Alguns também precisam configurar o grupo inteiro para encher o recipiente. Então, vamos entender isso de novo. Este grupo está configurado para encher o recipiente e as crianças mais velhas dentro desse grupo também estão configuradas para encher o recipiente. Essas são duas coisas diferentes. Também vou configurar a navegação para encher o contêiner. E agora estou redimensionando o pai. E você pode ver que isso está funcionando. Agora que pode ser que o quadro de layout automático esteja funcionando. Eu posso configurar e limpar um pouco o espaçamento. O espaçamento aqui seria a distância entre minhas diferentes seções e a margem que eu poderia definir com o preenchimento horizontal Acho que vou para o top zero. E eu só quero adicionar um pouco de espaço na parte inferior para que meu design respire. A atualização Figma introduziu variáveis. Então, eu também poderia usar essas variáveis para definir meus valores de espaçamento Agora, quero mencionar novamente que eu também poderia ter adicionado esse preenchimento ao meu grupo de cartas. Na verdade, você decide O importante é ser consistente. Também depende muito do que você está construindo. Por exemplo, isso está funcionando porque minha navegação não está percorrendo toda a largura. Digamos que essa navegação tivesse uma cor de fundo, então essa certamente não seria a solução ideal. Então, se eu quero que trabalhemos e ainda quero manter a margem de 48 que tenho aqui na moldura principal agora para a esquerda e para a direita, primeiro preciso tirar isso dos pais. Então, vou definir isso como zero. E vou definir isso como zero aqui. Então, agora tudo está em toda a largura. Agora vou adicionar o 48 novamente na navegação. Vou selecionar todo o grupo de cartas e também adicionar 48. Agora vamos redimensionar para ver se tudo está funcionando. E isso está funcionando muito bem e agora estou com uma navegação completa Assim que você tiver uma ideia clara de suas seções e de sua configuração de redimensionamento e do que deseja alcançar Literalmente, tudo se resume a brincar com seu layout. Experimente, duplique cartões e itens em uma fileira e também tire alguns. E você ainda pode alterar o redimensionamento e suas margens individualmente. Além disso, tentando adicionar algum texto, certifique-se de sempre aninhar ao adicionar novos grupos. E você pode até mesmo adicionar seções inteiras, como, por exemplo, uma seção de introdução Certifique-se de manter as margens consistentes. Então, aqui eu adicionaria 48 novamente. Em seguida, brinque com a configuração do plano de fundo , margens e espaçamento Portanto, não configure uma página inteira e tente adicionar layout automático em qualquer lugar Primeiro, comece com os menores componentes, suas navegações, seu cartão, todas as suas seções diferentes vão subindo até que, no final, você crie a moldura principal Isso o manterá fácil e escalável. Vamos levar isso um pouco mais longe e lembrar nossos ajudantes que já conhecemos Vamos começar com o texto aqui. Então, agora, temos a opção entre encher o recipiente e, em seguida, ele será redimensionado com os pais Mas então pode ficar muito grande em algum momento. Se mudarmos isso e redimensionarmos, teremos um tamanho fixo, mas nosso texto não responderá No entanto, eu poderia usar a largura máxima do Maya Então, vou usar a largura máxima e vou definir isso em torno de E então eu só preciso ter certeza de que configurei isso para encher o recipiente. Vamos verificar se a largura máxima ainda está em vigor. Sim. E agora podemos ver que tudo permanece bem no lugar e, se eu for menor , será tirado com o novo tamanho Agora vamos adicionar mais alguns cartões. Então, eu quero adicionar todas essas cartas aqui e ali , apenas uma única carta que é a mesma instância que as outras. Acabei de adicionar alguns conteúdos, então vamos colocá-los aqui e você pode ver que agora é isso que eles fazem. Eu quero que eles terminem na próxima linha. Portanto, sabemos que poderíamos usar nosso recurso de embrulho aqui e o layout automático. Então eu coloquei isso na moldura principal. Mas, no momento, nada está acontecendo porque esses cartões não têm uma largura fixa ou mínima. Então, o que vou fazer é selecionar um pai. Apertei Enter e agora selecionei todos os elementos secundários. Então, todas as cartas. E agora posso adicionar uma largura mínima, e vou digitá-la manualmente Eu também poderia usar variáveis para isso. Portanto, tenha uma largura mínima de 250, e eu também poderia definir uma largura máxima. Vamos fazer isso com, digamos, 450. Então, vamos aumentar um pouco isso e redimensionar. E então você pode ver isso como funcionando lá. Você vai obter aqui isso que nem sempre é distribuído igualmente. O que você poderia fazer é adicionar uma carta fantasma aqui se você quisesse que todas elas iguais e então você poderia definir isso como zero. Você também pode configurar um componente que você pode chamar de Ghost ou Space SAP. Mas, na verdade, vou deixar isso no estado natural desse jeito. Então, agora só queremos adicionar nossa guia de comida. E observe que quero que esse conjunto de alimentos seja redimensionado, mas quero que os termos e condições sejam mantidos à direita Vou selecionar esse quadro. E então lembre-se, podemos digitar ou escolher também aqui. Ou podemos clicar dentro do nosso alinhamento e simplesmente pressionar X para alternar entre automático e o espaço entre Então, agora eu vou simplesmente adicionar este aqui. Vamos limpar isso. Quero isso fora do meu grupo de cartas. Se você está fazendo uma bagunça, basta voltar. Agora vou arrastar isso de volta e é isso que eu procuro. Então, vamos dar uma boa olhada. Se isso estiver funcionando, vamos selecionar essa barra e verificar se ela está configurada para ser preenchida. Sim. E agora tudo deve estar funcionando para que você possa ver que meu texto está pronto. Meus cartões estão sendo redimensionados bem e meu rodapé também está respondendo a qualquer redimensionamento. Na verdade, usando todos os recursos de layout automático neste pequeno exemplo, isso pode ser Não se preocupe, basta pegar um elemento de cada vez, passo a passo 29. LAYOUT AUTO: 13 Mesma altura para todas as crianças: As configurações, a mesma altura para todos os elementos com layout automático, são realmente muito simples. Aqui eu tenho quatro cartões de layout automático diferentes e você pode ver que eles já estão todos configurados de forma responsiva. Devido ao tamanho diferente do conteúdo, eles têm alturas diferentes. Na maioria das vezes, tudo bem, mas pode haver casos em que você queira que todas essas cartas tenham a mesma altura. Se escolhermos Cannes para uma altura fixa, os carrinhos, no entanto, não reagirão mais à mudança de conteúdo e à mudança de tamanho. Então, nós realmente não queremos isso. O que realmente queremos é ditar o cartão com mais conteúdo, a altura de todos os outros. E há um pequeno truque que você pode usar para que isso funcione. Em primeiro lugar, precisamos criar uma moldura principal em torno disso. Então, selecionamos todos os nossos elementos secundários, pressionamos Shift a e criamos um quadro de layout automático ao redor deles. Vou ligar para esse pai. Vou dar a esses pais e a cor de fundo e vou adicionar um pouco de preenchimento. Agora, o que vou fazer é selecionar o pai, pressionar Enter para selecionar todos os elementos do meu filho. E agora vou colocá-los para sentir o recipiente vertical e encher o recipiente horizontalmente. Meu contêiner principal, agora eu preciso ter configurado para consertar e abraçar. E agora você pode ver que tudo se distribui bem, mesmo quando se muda o tamanho. Se mudássemos o conteúdo, isso também se adaptaria automaticamente. Por isso, ele sempre estará se adaptando ao cartão com mais conteúdo. chave é que os elementos estejam configurados para preencher a altura e o pai esteja configurado para abraçar. Se você quiser que alguns dos elementos fiquem na parte inferior, basta selecionar o cartão, acessar o menu Avançado e mudar para o espaço entre os funciona tanto na horizontal quanto na vertical. 30. LAYOUT AUTO: 14 técnicas de empilhamento: Dentro do seu design, você provavelmente terá seções nas quais você tem várias cartas ou elementos similares que deseja empilhar. Meu exemplo, meus cartões podem ser distribuídos em linhas ou colunas. Vamos começar com meu primeiro exemplo aqui. Todos os meus cartões já estão configurados como molduras responsivas de layout automático. Então, o que vou fazer é selecionar todas as cartas em uma linha. E isso pode ser o quanto você quiser. Em seguida, crie um quadro de layout automático aninhado. Então eu pressiono Shift. Eu farei isso em todas as minhas linhas. Agora, selecionarei o quadro principal e também aplicarei o layout automático aqui pressionando Shift a ou por meio do menu. Agora, tudo o que preciso fazer é definir meu redimensionamento. Eu seleciono meu quadro, pressiono enter. Agora eu pego as linhas. Eu já vou colocá-los para encher o recipiente. Eu pressiono Enter novamente e agora obtenho todos os elementos filhos que estão dentro do cartão e os configuro para encher o recipiente também. Agora, se eu redimensionar a moldura principal, todos os meus cartões estão sendo distribuídos bem. Além disso, se eu mudar o conteúdo, isso se adaptará automaticamente. E eu poderia, por exemplo, adicionar mais cartas a uma linha. Eles então se distribuiriam igualmente nessa linha. Portanto, não preciso ter quantidades iguais em todas as linhas. Se eu quisesse que minhas cartas tivessem a mesma altura, eu também poderia fazer isso. Pressione Enter, pressione Enter novamente para realmente acessar os elementos secundários e definir a altura para encher o recipiente. Meu segundo exemplo, em vez de criar linhas, quero criar colunas. Então eu seleciono todos os cartões em uma coluna. E eu pressiono shift a para criar um quadro de layout automático em torno dele. Eu farei exatamente o mesmo com minha segunda coluna. Não selecione a moldura dos meus pais. E eu também transformo isso em um quadro de layout automático. Só vou arrumar um pouco. Então aqui, vamos ter a distância de 40 para os dois. E eu também quero o espaço entre 40. Então, se eu agora eu só preciso definir meu redimensionamento agora, então eu pressiono enter, então eu pego minhas colunas e as digo para encher o recipiente. Pressione Enter novamente. Agora ele pega todos os elementos do meu filho, todos os meus cartões, e eu os coloco para encher o recipiente também. Se eu estiver redimensionando agora , meu design responderá às colunas. E é o mesmo aqui. Você pode simplesmente adicionar cartas individuais a todas as suas colunas. Você também pode adicionar colunas inteiras ao seu design. No meu exemplo, tenho tudo pronto para encher o recipiente. Mas o que eu também poderia fazer é selecionar uma coluna e configurá-la para largura fixa. Agora eu teria uma coluna fixa e todas as outras seriam responsivas. Então você pode realmente jogar com isso. 31. LAYOUT AUTO: 15 limitações de layout automático e sua solução: O layout automático é incrível, mas também vem com uma limitação. Vamos investigar e deixe-me também mostrar uma pequena solução alternativa. Então, aqui eu tenho um quadro de layout automático que contém cartões de layout automático. E esses cartões estão prontos para encher um recipiente. Se eu redimensionar, você verá que isso funciona perfeitamente. Então, nesses exemplos, sempre tivemos uma distribuição igual de todas as três cartas. Se eu não quiser isso, o que eu poderia fazer é selecionar um cartão e alterá-lo para largura fixa. Se eu fizer isso, esse cartão permanecerá na largura que eu dei e todos os outros permanecerão fluidos. E essas são praticamente duas opções que eu tenho com o layout automático. Então, o que não funcionará com o layout automático é que eu terei uma distribuição como essa, por exemplo, que estou usando até 40 por cento para um elemento e depois distribuo o resto em 20 por cento. Deixe-me mostrar o que é esse exemplo simplificado. Então, aqui eu tenho uma moldura de layout automático duas imagens de larguras diferentes. Atualmente, eles estão configurados para largura fixa. Se eu alterá-lo para preencher o recipiente, você pode ver que imediatamente as imagens saltarão para um novo tamanho igual. Não importa quantas imagens estejam em sua fileira. Eles sempre terão a mesma largura se configurados para encher o recipiente. Então, digamos que eu não queira isso, eu quero que este volte ao seu tamanho original. Então veja o que acontece quando eu o redimensiono. No meu menu Redimensionar. Agora foi alterado de Phil para corrigido automaticamente. Então, se eu redimensionar a moldura principal , ela usará toda a largura. No entanto, uma imagem permanecerá fixa e a outra usará o espaço restante. Portanto, não há como manter as proporções com o layout automático. O que eu poderia fazer se quisesse uma distribuição como essa é tirar o layout automático do meu quadro principal. E agora vou aplicar uma grade. Vou para as colunas e vou adicionar um pouco de margem. E agora eu posso configurá-los para caber nas colunas. E você pode ver que agora eu tenho uma distribuição desigual de 2,3. Se eu agora os definir para a esquerda e direita e redimensionar o quadro principal , eles manterão essas proporções. É claro que podemos sair da grade e obter esse efeito muito bom. Vamos voltar ao nosso exemplo original. Então, o que eu fiz aqui foi tirar layout automático do quadro principal e aplicar uma grade. Observe que todos os outros elementos como meu cartão e minha navegação, tudo isso ainda está configurado com layout automático, como antes. Portanto, o layout automático funciona dentro desses elementos, mas ao redor deles, agora apliquei minhas restrições e as coloquei todas para a esquerda, direita, para responder à grade. Então, se eu redimensionar a grade agora, então, dentro do cartão, layout automático, isso para funcionar. No entanto, os elementos se comportarão com a grade. Como estou usando a grade, agora posso alterar a quantidade de colunas que elas ocupam. Por isso, altere a distribuição do meu design ao meu gosto. E isso ainda estaria funcionando. Claro, desative a grade. E você obtém um layout como esse com distribuição desigual. Infelizmente, essa também pode não ser uma solução perfeita. Assim como acontece com o aumento do conteúdo, talvez você não consiga manter o espaçamento horizontal ao remover o layout automático. Este é, no entanto, um problema de Figma. Isso não será um problema com o CSS posteriormente. 32. LAYOUT AUTO: 16 restrições e comparação de layout automático: Vamos recapitular e comparar o layout automático e as restrições para entender quando usar o quê. layout automático, sem dúvida, é recurso mais poderoso e você provavelmente também o usará um pouco mais. Temos direções, espaçamento entre itens, preenchimento horizontal e vertical que podemos definir, podemos alinhar com o layout automático. E, claro, temos nosso menu Redimensionar, além do superpoder de agrupar diferentes layouts automáticos e, combinando todos esses recursos com restrições, podemos definir restrições horizontais e verticais. E também podemos definir elementos fixos. Observe que, se você quiser definir elementos fixos em um protótipo, precisará usar restrições. Você não terá essa opção com layout automático. Em projetos maiores, você provavelmente separará a prototipagem em um tamanho fixo do seu design responsivo em outro arquivo. De qualquer forma, isso não é realmente um problema. Vamos recapitular os benefícios e limitações de ambos quando se trata de configurar elementos como seções ou páginas inteiras. Portanto, o layout automático é perfeito. Se você tiver uma distribuição igual. Não vai funcionar bem com distribuições desiguais, porque se você disser que todos os elementos do seu filho devem preencher o recipiente, eles sempre terão automaticamente o mesmo tamanho. Então isso não vai funcionar. Se você quiser trabalhar com um ou mais elementos sendo corrigidos e o outro for fluido. Isso não é problema no layout automático e funcionará muito bem. Configurando seus componentes. No layout automático, geralmente é uma ideia muito boa e funcionará na maioria das vezes. Só dê uma nota. Aqui estamos realmente falando de qualquer coisa, desde um botão e até elementos complexos mais aninhados , como cartas e navegações suspensas. Tudo isso deve ser configurado no layout automático. Em seguida, você poderá usar esses componentes responsivos de layout automático, seja dentro de uma configuração completa de layout automático ou dentro de um layout com grades e restrições. Portanto, todos esses pequenos elementos aqui ainda seriam de layout automático, no entanto, ficariam dentro de uma grade e usariam restrições. Então, vamos dar uma olhada nisso. distribuição igualitária funcionará muito bem. Como você pode ver. Você pode usar qualquer abordagem. Nesse caso, você provavelmente desejará usar a abordagem de layout automático, se possível, porque a única desvantagem que você obtém com grades e restrições é que o espaçamento horizontal não será mantido. Isso é um problema de Figma e não de CSS. Se você quiser usar distribuição desigual e trabalhar com capacidade de resposta. E esse é realmente um motivo para usar restrições e grades. Lembre-se de que os componentes antigos que você colocará na grade ainda serão responsivos. A única limitação que você terá é o preenchimento horizontal com conteúdo crescente que não será mantido. Se você quiser combinar fixo e fluido, ainda poderá usar grades e restrições simplesmente aninhando uma moldura com uma grade. No entanto, pode ser uma solução um pouco complicada. Isso realmente depende do que você está construindo dentro de seus componentes, a menos que você tenha um motivo muito bom. Por que não usar restrições apenas porque, como você pode ver, a margem não será mantida. Assim, assim que você redimensionar, as coisas se esbarrarão umas nas outras. Novamente, isso é um problema de Figma e não de CSS. Então, como você pode ver, é realmente sobre o que você está tentando alcançar. Depende da sua equipe que, quando você tiver a configuração, você está decidindo se certificar de falar com sua equipe de desenvolvimento. E lembre-se de que o Figma é apenas uma ferramenta para demonstrar o que você está tentando construir. Você não está construindo o produto final e tudo bem se precisar documentar e conversar sobre alguns desses elementos. 33. LAYOUT AUTO: 17 imagens de proporção fixa: Você deve ter notado que atualmente não há como manter a proporção das imagens no Figma. O que isso significa? Isso significa que a altura e a largura dessa imagem, quando eu redimensiono, não serão dimensionadas proporcionalmente. Isso pode funcionar com algumas imagens, mas às vezes você pode querer manter esse tamanho. Há um pequeno truque que você pode usar. Vá para a seção da comunidade e digite a proporção. Você terá uma visão geral de vários arquivos. Pessoalmente, gosto de usar este, mas provavelmente a maioria deles funcionará bem. Clique duas vezes e, em seguida, clique em, obtenha uma cópia. O arquivo agora será duplicado em sua conta Figma. Dentro do arquivo, você encontra uma ótima explicação. Então, se você realmente quer entender como tudo isso está funcionando, tudo está explicado em detalhes aqui. Se você quiser ser preguiçoso, basta pegar a proporção que você procura. Então, no meu caso, isso é 16 por nove. E então eu copio volto para o meu arquivo. E eu vou colá-lo aqui por enquanto. Então, se eu trocasse a imagem e adicionasse esta, deixe-a um pouco menor para que caiba. Adicione isso aqui, vamos remover meu café ou, na verdade, vamos deixá-lo para que você possa ver a diferença. Em seguida, eu o configurei para encher o recipiente também. E agora, enquanto estou redimensionando, você pode ver que isso mantém a proporção e esta não. Então, o que eu quero fazer, eu simplesmente quero adicionar essa imagem dentro daqui. Vamos tirar isso. E agora vamos primeiro garantir que essa tenha a proporção correta que eu quero. Então, como estou trabalhando com 16 a nove, vamos recortá-lo aqui e depois colocar 160, e depois garantir que isso esteja definido como 90. Ótimo. Você também pode desenhar uma moldura definida como 16 por nove e depois adicionar a imagem na parte superior. Agora, o que preciso fazer, preciso exportar isso. Vou exportá-lo em três vezes seu tamanho, JPEG, e exportar isso. Ótimo. Então, agora vou selecionar a imagem aqui e, na verdade, vou excluir essa sobreposição. Então essa é a imagem real. E eu vou escolher a imagem. E vou selecionar a imagem que acabei de exportar. E agora isso está dentro dessa configuração e você pode ver é uma configuração bastante complexa. Se eu redimensionar agora, isso manterá a proporção. 34. PONTOS de PARTIDA: 01 Um design não vai funcionar para todos os tamanhos: Um design não funcionará para todos os tamanhos. O que eu quero dizer com isso? Ok, agora configuramos nossas páginas e componentes responsivos. No entanto, ainda estamos presos a um problema. O mesmo design não funcionará de dispositivos móveis para desktops maiores. Com um passo. Ele só funcionará dentro de um intervalo específico. Como podemos lidar com isso? O que precisamos fazer é configurar diferentes faixas para nosso design. É aqui que entram os pontos de interrupção. Um ponto de interrupção define um determinado ponto em que o design pode se adaptar. Portanto, embora ainda usemos comportamento responsivo entre esses pontos de interrupção, reconsideramos um layout geral ao entrar em um novo intervalo. Então, no meu exemplo aqui, você pode ver que até o ponto de interrupção a, eu tenho minha configuração móvel, então essa é minha configuração padrão. E então, a partir do ponto de interrupção a, estou mudando a navegação e alterando um pouco o layout geral. Isso funciona até o ponto de interrupção B. O que eu sou, então, novamente usando os mesmos elementos, adaptando o atraso para funcionar no novo tamanho da tela. Isso não significa que tudo tenha que se adaptar em um determinado ponto de interrupção. Como você pode ver, minha navegação aqui permanece a mesma. Enquanto a Figma oferece ótimos recursos para lidar com design responsivo, ou seja, restrições de layout automático e grades. Atualmente, ele não nos fornece nenhuma automação para configurar pontos de interrupção. Então, precisamos configurar isso sozinhos. 35. PONTOS de BREAKPOINTS: 02 Pense em componentes individuais que se adaptam, não páginas completas!: É importante pensar em componentes não se adaptam a páginas inteiras. Na verdade, não se trata de configurar uma página totalmente nova por ponto de interrupção. Lembre-se de que trabalhamos com uma abordagem de design baseada em componentes. Então, na verdade, trata-se de considerar em qual ponto de interrupção um componente se adapta. E existem diferentes maneiras pelas quais isso pode acontecer. Às vezes, você precisa alterar todo o componente, por exemplo, em uma tela menor, você pode ter uma navegação no menu de hambúrguer, que mudará para uma barra de navegação com links em telas maiores. Elementos como cartas ou seções de heróis podem precisar uma configuração completamente diferente para telas menores e maiores. Você pode até mesmo decidir adicionar ou remover completamente determinados elementos de telas menores ou maiores. No entanto, em muitos casos, é eficiente apenas adaptar o espaço e o elemento que ocupa. Essa pode ser a mesma placa usada em todas as telas. No entanto, distribuiríamos de forma diferente, então quantidades diferentes de cartas por linha. E também podemos especificar a largura. Isso pode ser feito em porcentagem ou em uma certa quantidade de colunas da grade. Isso realmente depende de como suas páginas são configuradas. E, é claro, elementos gerais, como margens e preenchimentos , podem ser adaptados, assim como o tamanho do texto. Então, você pode ver que realmente se trata de considerar cada elemento e cada ponto de interrupção individualmente. Em geral, queremos mudar o mínimo possível e o quanto for necessário. Mantenha as coisas simples. 36. PONTOS de BREAKPOINTS: 03 Pontos de BREAKPOINTS:: Antes de configurarmos nossos pontos de interrupção no Figma, vamos primeiro entender como eles funcionam em CSS. No CSS, os pontos de interrupção são implementados com as chamadas consultas de mídia. Uma consulta de mídia basicamente diz Pay browser, verifique a largura. E se for maior ou menor que x, exiba o design ou as mudanças que eu defini para você aqui. Você pode configurar quantas consultas de mídia quiser ou precisar. Mas você descobrirá que a maioria dos designs usa cerca de três a cinco. Você já deve ter ouvido falar primeiro do termo celular. Resumindo, o que isso significa é que você configura primeiro o menor design, pode pensar nisso como sua configuração básica para a página inteira. Então, somente se você quiser adaptar algo, por exemplo no meu caso, no meu título no celular, isso pode ser 32 ou até RAM. E eu quero que seja maior, então tem 64 ou quatro RAM em uma tela maior. Então, eu substituiria essa configuração. Todo o resto permanecerá no lugar. Portanto, ele usaria a mesma espessura da fonte, a mesma altura da linha e assim por diante. Somente se eu cancelá-la na próxima consulta de mídia, ela será substituída. Então, como você pode ver, esse é o motivo pelo qual não precisamos configurar um design completo e documentado a cada novo ponto de interrupção. Precisamos documentar a base que temos e, em seguida, quaisquer mudanças que aconteçam a partir daí. Isso também não significa necessariamente que todos os seus designs sejam configurados em dispositivos móveis. E depois você dá uma olhada no que vai acontecer. Porque se o seu grupo-alvo principal for um tamanho de tela maior, então, por todos os meios, projetado para esse primeiro e para o Figma. No entanto, quando se trata de documentar, talvez você queira discutir isso com sua equipe de desenvolvimento e, provavelmente primeiro documentar todas as suas configurações básicas e depois ver o que mudaria. 37. PONTOS de BREAKPOINTS: 04 Quais pontos de interrupção devo usar?: Quais pontos de interrupção você deve usar? Se você vai trabalhar com um projeto existente, tudo isso provavelmente está documentado no guia de estilo. Em empresas maiores, elas provavelmente terão sua própria página de guia de estilo. Então, aqui está um exemplo de décadas e isso é público. Eles podem visitar isso em uma década de design de pontos de gramado. E é absolutamente fantástico. Então você iria aqui para o digital. E então você pode ver mais abaixo, você escolheria as diretrizes e o layout. Você pode ver em qual produto está trabalhando. Então, no nosso caso, essas serão as diretrizes da web. E então você pode ver toda a documentação aqui. Você pode ver que, no caso deles, eles estão usando um sistema de grade e você está recebendo informações mais antigas. E mais abaixo, encontro informações sobre os pontos de interrupção que eles estão usando. Você também pode ser informado de que eles estão usando um sistema existente e usam apenas uma configuração padrão. Então, nesse caso, você provavelmente receberá um link para a documentação. E então, dentro dessa documentação, você geralmente encontra os pontos de interrupção. Então, aqui, por exemplo, este é o Bootstrap e você pode ver que esses são os diferentes pontos de interrupção e você pode usar esses valores. Aqui está outro exemplo para o Tailwind, e você pode ver que a documentação variará, mas sempre será semelhante. Assim, assim que você souber o que está procurando, você pode ver que esses são os diferentes pontos de interrupção usados. E você também pode ver que eles são todos muito parecidos. Se ainda não houver absolutamente nenhuma informação você pode escolher o que quiser. Então eu recomendo que você use sistemas populares como tailwind ou bootstrap e simplesmente escolha seus pontos de interrupção. Isso não significa que você precise usar o sistema posteriormente ou quaisquer outros componentes ou configurações. Absolutamente não basta simplesmente considerar os pontos de interrupção por enquanto ao configurar nosso design figma. Como já vimos, pontos de interrupção não são idênticos, mas muito semelhantes na maioria dos sistemas. Isso ocorre porque o grupo tem o maior número possível de telas por intervalo. Às vezes, você acha isso simplificado como celular, tablet, laptop e desktop. Não é realmente tão simples porque os tamanhos das telas são silenciosos e dinâmicos, então não confie nisso. Na verdade, trata-se de capturar a maioria dos tamanhos de tela nesses diferentes grupos. Então, alguém que já fez toda essa pesquisa para mim. É por isso que eu, pessoalmente, gosto usar os pontos de interrupção existentes. Mas se você está se perguntando se você pode simplesmente configurar seus próprios, sim, teoricamente, você também pode definir seus próprios pontos de interrupção. Qualquer valor funcionaria. Você também pode alterar os pontos de interrupção do sistema existente. Eu teria sido um pouco cuidadoso com isso. Prefiro ficar com o que recebi e me concentrar no meu design. 38. PONTOS de BREAKPOINTS: 05 Configurar pontos de interrupção em Figma: Então, estamos adorando que os pontos de interrupção estejam prontos, mas não temos pontos de interrupção no Figma. O que podemos fazer? Bem, podemos montar o nosso próprio. Então, aqui estão os pontos de interrupção que recebi da minha equipe. O que vou fazer agora é criar uma representação visual dos pontos de interrupção fornecidos no Figma. Dessa forma, posso ver os diferentes intervalos com os quais estou lidando. Então, basicamente, como eu faço isso, começo aqui, você pode ver meu tamanho base, que está aqui serão minhas configurações padrão. E como um ponto mais pequeno, estou usando 320, que é o velho iPhone como E. Então, esse é velho e bem pequeno, deve ser realmente um dos menores tamanhos disponíveis. E então tudo isso é meu padrão e isso sobe até eu clicar. Você pode ver aqui S, que é 506, 76. Então é isso que isso entra em ação, e agora é meu alcance S. E tudo isso funcionará até eu ter 768 e assim por diante. Então, o último aqui seria meu extragrande, que começa em 1200. Então essa é a largura mínima, 1.200. Então, aqui ele começa em 1.200 e, em seguida, qualquer coisa além disso estaria na faixa do Excel. Então, é só configurar isso uma vez para o meu projeto, e agora eu o transformo em um componente e agora posso usar instâncias para testes. Às vezes, gosto de adicionar alguns guias para facilitar a visão geral, mas isso realmente depende de você. E então o que eu faço é copiar os elementos que pretendo configurar como componentes e agora posso testá-los aqui. Então, geralmente eu já configuro tudo no layout automático. E agora eu posso ver até que tamanho as coisas estão funcionando. E quando eu preciso me adaptar. Nesse ambiente de teste, posso testar componentes individuais. Eu posso testar toda a seção. Então, como algo funciona em uma fileira. Ou também posso testar páginas inteiras. Normalmente tenho uma página própria configurada para tudo isso e chamo isso de teste responsivo. Isso é realmente um playground para mim. E quando eu tiver uma ideia clara sobre o que está funcionando e o que precisa se adaptar em qual ponto de interrupção, posso começar a documentar. 39. PONTOS de RUBRICA: 06 Testes de componentes responsivos: Deixe-me mostrar um exemplo de como eu testo um componente real. Vamos usar a navegação como exemplo. Então, agora eu estou na minha página de design, e é assim que eu gosto de configurar meus projetos. Isso pode ser completamente diferente para sua equipe. Gosto de ter uma seção chamada desenvolvimento. Então é aqui que todos os meus designs vivem. E então eu tenho uma página onde todos os meus estilos e componentes estão documentados. Então eu tenho outra seção, o teste responsivo. É aqui que vamos jogar com nosso componente. E eu tenho outro chamado playgrounds. Então é aqui que eu posso experimentar diferentes designs e testar coisas. E eu tenho um chamado gerenciamento de arquivos. Então, aqui eu adiciono coisas como você pode ver meus pontos de interrupção, manchetes e informações mais antigas. Isso realmente não faz parte do design. Portanto, pode criar uma página aqui. Normalmente tenho dois tamanhos de tela, então um para celular e outro para desktop. E eu gosto de usar os mesmos tamanhos. Então, eu vou ter este aqui, defina a borda 375, e meu desktop definido em 1.440. Você pode ter tamanhos diferentes. Isso é muito bom. No entanto, gosto de mantê-los do mesmo tamanho, pois essa é minha referência que eu desenhei posteriormente em meus protótipos. E então, em meus testes responsivos e em meus componentes, vou garantir que todos os outros tamanhos também funcionem. Como você pode ver, configurei uma navegação para meu celular com um menu de hambúrguer. E eu sei que em telas maiores eu quero ter algo com links ou navegação diferente. Então, o que eu preciso descobrir agora e documentar é o que vai acontecer entre esses tamanhos e até mesmo além do tamanho, provavelmente bom simplesmente copiá-los e colá-los em minha configuração de teste responsivo. E eu já configurei esses elementos com layout automático, você pode muito bem fazer isso aqui no teste, não importa. O importante é que você tenha um elemento responsivo ao testar. Agora você pode ver que agora eu posso começar a testar em que tamanho eles vão funcionar. Então você pode ver que o celular aqui não é um grande problema, porque isso praticamente funcionará em qualquer lugar. Mas esse aqui, em algum momento vai aparecer no logotipo. Além disso, quero manter um pouco de espaço porque posso adicionar mais links. Então eu poderia tirar o que S não vai funcionar. Em, eu poderia escapar comigo, mas não é o ideal. Mas a partir de L, parece uma aposta segura. Provavelmente vou testar isso com mais alguns pontos de menu em um anúncio da minha documentação, quantos links você pode ter aqui. Mas vou deixar isso por enquanto. O que eu gosto de fazer quando sei os tamanhos, eu desenho um pequeno retângulo. E é realmente só para mim, para minha própria orientação? E vou marcar isso com uma cor que chamei de ajudante. Agora eu sei que este aqui começa a funcionar em l. E até agora eu tenho meu menu, meu menu móvel saindo do excesso, na verdade começa aqui do excesso até n. Então está cobrindo esses três pontos de interrupção e só aqui alterar os hits e de L e M em diante, estou usando um design diferente. 40. PONTOS de RUBRICA: 07 Documentação de componentes responsivos: Então, depois de testar meus componentes, agora preciso documentá-los. Então, aqui tenho minhas descobertas e agora estou entrando em estilos e componentes. E você pode ver que eu já configurei a navegação para você. Então, vamos dar uma olhada nisso com mais detalhes. É aqui que eu guardo todos os componentes principais e estou começando com os menores até os átomos. Então você pode ver isso aqui está o logotipo de e eu tenho os diferentes ícones para abrir e fechar os links, tudo aqui. E então você pode ver que aqui eu tenho moléculas maias, então elas são combinadas. E esse é basicamente o componente mestre responsivo que usarei em todo o meu design. Então, esses são os dois que acabamos de testar e você pode se perguntar por que o terceiro, vou explicar isso em um segundo. Então, vamos rolar para baixo e então você pode ver que aqui é na verdade onde eu vou ter uma seção extra chamada comportamento responsivo. E é por isso que documento o que acabamos de testar. Então, aqui eu simplesmente adicionei uma instância do meu componente. E você também pode ver que eu adicionei uma migalha de pão e depois disse que isso vai funcionar em todo o excesso do ponto de interrupção. Você também pode movê-lo, você pode ver como ele se comporta. E então temos mais abaixo, temos nosso maior. E, como você pode ver, esse design funciona com uma grade. Então eu adicionei a grade para mostrar como ela fica na grade. Agora você deve estar se perguntando, por que temos outro para o S M. A razão disso é que deixe-me pular aqui e você pode ver que eu também tenho uma documentação de como minha grade funciona. E minha grade muda de margem em S M. Então a menor tem margem de 24. Então eu vou para 40 e depois eu vou para 80. Então, deixe-me voltar à minha documentação aqui. E agora você pode ver aqui com meus componentes principais, você pode ver que este aqui está configurado com 24. Em seguida, este é configurado com uma margem de 40. E este aqui está configurado com uma margem de ATP. Em CSS. Isso entrará em ação automaticamente, mas, assim, é mais fácil para mim reutilizá-los em todo o meu design Figma. Então, isso será o mesmo para a tipografia. Eu precisaria verificar minha folha de estilo de tipografia. E aqui você pode ver que eu tenho meu padrão, então minhas configurações móveis priorizam, e eu preciso verificar se alguma coisa se adapta. Então, por exemplo, meu H1, que se adaptaria no tamanho S. E, novamente, no tamanho L. Para minha navegação, não há mudança, então não preciso me preocupar com isso. Então, vou criar um componente separado, por exemplo, se eu estiver usando H1 em uma seção de heróis, eu crio um para celular primeiro do que um para tamanho e tamanho L. Isso não é nada que você precise no CSS mais tarde, pois ele entra em ação automaticamente se for apenas a mudança de tamanho. No entanto, eu gosto muito de fazer isso quando trabalho na Figma. Portanto, está muito claro e estou sempre projetando com a configuração real. Então, sim, é assim que eu gosto de testar e documentar todos os meus componentes. E isso não é uma regra definida, isso é apenas algo que eu gostei de fazer. Portanto, você também pode encontrar maneiras ligeiramente diferentes de documentar isso, dependendo do seu sistema. Então, vamos dar uma outra olhada. Obviamente, cada componente também é um pouco diferente. Então, aqui você pode ver que este é um componente que eu uso, mas estou documentando como ele se encaixa no design em diferentes pontos de interrupção. E também posso combinar pontos de interrupção, como você vê aqui. Então, eu realmente tentei simplificar isso o máximo possível. E aqui você pode ver que estou usando um componente para dispositivos móveis e depois tenho outro componente. E, novamente, isso pode ser muito diferente no meu design, mas eu sempre tenho o mesmo componente. Uma pequena dica. Se você está testando coisas em uma linha , como cartas, não quer configurar um componente inteiro para cada uma dessas linhas. Você só quer configurar este carrinho e os documentados. Mas você sabe que terá margens variáveis em seu design. Então, o que você pode fazer é simplesmente criar essa moldura em segundo plano. E então você pode usar restrições. Então, aqui eu configurei isso com margem de 40 para cada lado. Ou você também pode transformar isso em um layout automático e, em seguida, certifique-se de ter a margem de 40 definida aqui. Dessa forma, você pode testar um único cartão nos diferentes tamanhos de tela, mas só precisa documentar um cartão. E é o mesmo se você tiver algo com uma largura fixa que fica no meio. Então, neste cartão, isso é como uma espécie de janela modal. E o que estou fazendo é simplesmente colocar isso no centro com restrições. E então eu posso dizer, veja até qual tamanho de tela isso vai funcionar. 41. PONTOS de RUBRICA: 08 variantes responsivas: Quero mostrar um pequeno truque que estou usando para organizar meus componentes responsivos. Em primeiro lugar, eu me certifico de que tenho todos os átomos, então todos os elementos únicos que estou usando como seus próprios componentes, terei instâncias, por exemplo desse logotipo e do ícone dentro do meu navegações dentro dos meus componentes aqui. Você também pode ver que, na verdade, não são componentes únicos, mas eu criei um conjunto de componentes com variância para cada um dos tamanhos diferentes. Aqui dentro. Você pode ver que eu chamei esses raios de navegação e raios-x, aqui está meu sinal de que esse componente tem mais variação para diferentes pontos de interrupção. A variação é então nomeada de acordo com os pontos de interrupção que eles estão servindo. Então este é excesso, este é a navegação S e M, e este é a navegação l e x l. Estou mantendo assim porque talvez em algum momento mais tarde eu possa dividi-lo em dois. Então eu o renomearia na navegação L e apenas criaria outro para a navegação XL. Eu também poderia chamar isso de navegação padrão. Então, se eu tivesse essa navegação apenas para toda a minha página , chamaremos isso de navegação padrão. E somente se em um momento posterior eu a sobrescrevesse, eu a chamaria de navegação e depois S, M ou L em diante ou qualquer outra coisa. Não importa exatamente como você o nomeie, só precisa ficar bem claro para qualquer pessoa que esteja olhando para ele que você está se referindo aos seus pontos de interrupção. É por isso que é tão importante também adicionar essas informações sobre o sistema de grade, sobre os pontos de interrupção, sobre quaisquer margens e preenchimentos que você esteja usando à sua documentação. E isso também precisa ser a documentação visual, não apenas a documentação técnica. Então, eu poderia muito bem configurá-los como componentes únicos que também funcionariam. Mas por que eu gosto da variante é porque agora posso adicionar uma propriedade chamada Breakpoint. E vamos ver como isso fica no meu design. Então, no meu design, agora tenho minha navegação aqui. E você pode ver que esse é o sinal de que há mais pontos de interrupção disponíveis e isso é chamado de pontos de interrupção. E com um menu suspenso, eu poderia escolher qualquer outro ponto de interrupção. Digamos que eu configuraria design móvel ou um iPad, por exemplo, agora posso pesquisar a navegação por meio de meus recursos. Acabei de pegar minha navegação e agora você pode ver que isso está sempre me dando a menor. Então, está sempre me dando o padrão de como eu o configuro. E agora, no entanto, sou avisado de que tenho mais pontos de interrupção. E então eu vou escolher os pontos de interrupção que funcionam com essa largura. E eu posso configurá-lo, posso definir restrições para a esquerda e para a direita. Então, transforme isso em um quadro de layout automático. E então você pode ver que sempre temos o componente certo para o tamanho certo com todas as configurações certas. Então, eu acho essa uma abordagem muito legal, mas garante que, se você quiser usá-la, se quiser transformá-las em variantes, para discutir isso com sua equipe, se faz sentido no sistema que você estão usando. Por exemplo, se você tem uma equipe trabalhando apenas em dispositivos móveis e uma equipe trabalhando apenas em desktops maiores ou em tablets, será um pouco irritante para eles que sempre precisem trocar. Portanto, isso realmente depende da estrutura da sua equipe e também de como seu sistema de design está configurado. 42. NOVO! BREAKPOINTS: ponto de interrupção responsivo com variáveis: Vamos aprender como configurar páginas responsivas respeitando pontos de interrupção com variáveis Então é isso que buscamos. Temos telas diferentes representando os intervalos de nossos pontos de interrupção. E dentro desses diferentes intervalos, vamos inserir as variantes corretas, bem como remodelar dinamicamente Ao redimensionar. Observei um momento em que estou gravando isso, Variables acabou de sair em uma versão beta ainda aberta. Portanto, é muito provável que algumas delas mudem em um futuro próximo. Vamos fazer isso passo a passo. Então, vamos começar com isso. Temos apenas um conjunto de componentes com três variantes para um ponto de interrupção de navegação diferente, 12.3 E nós temos esse componente de cartão. Então, eu já montei uma coleção. Você mesmo pode fazer uma captura de tela e configurá-la passo a passo, se quiser Primeiro vou te mostrar uma maneira direta de fazer isso. E então, um pouco mais avançado, onde podemos realmente redimensionar nossos quadros Portanto, não vamos usar todos eles para ambos. Antes de tudo, vamos começar com a largura da tela. Então, o que eu quero fazer é amarrar essas molduras a uma certa largura de tela. E isso significa que, ao vinculá-los à largura da tela, posso vinculá-los aos diferentes modos em que qualquer coisa que eu coloque nesses quadros possa herdar Então, vamos selecionar nosso primeiro quadro. E então, na largura, vou clicar no sinal de variáveis. E vou dar uma olhada minha coleção e simplesmente escolher a largura da tela. Agora vou selecionar os outros dois e também vou vinculá-los à largura da tela. Mas isso só vai me dar essa pequena largura de tela por enquanto. Vamos apenas fazer isso. E então eu vou te mostrar como podemos pular para os diferentes modos. Então, agora nós os temos conectados à variável. Agora vamos selecionar o primeiro e ir para Layer. E então escolheremos a coleção e queremos uma pequena. Nada mudará porque esse é o tamanho padrão. Mas se fizermos o mesmo para médio e depois para grande, agora você pode ver que eles estão escolhendo os tamanhos do modo Vamos voltar para nossa coleção. Dê uma olhada Portanto, temos o pequeno 390, o médio, o 834 e ampliamos Se você está se perguntando sobre os tamanhos, tudo o que fiz foi pegar alguns tamanhos predefinidos do menu e adicioná-los lá. Então, o que eu fiz foi escolher o iPhone 14 e você pode ver aquele 390 E então eu escolhi um tablet e escolhi aleatoriamente um desktop Você pode escolher qualquer outro tamanho. Não é relevante quais estão usando. Em seguida, vou pegar uma instância da minha variável. E vamos voltar para nossa coleção e ver o que eu configurei aqui. Então você pode ver que eu configurei minha navegação e observei como o nome da variável não importa. Eu poderia chamar isso de qualquer coisa. Portanto, não estou chamando isso da mesma forma que disseram meus componentes. Mas o que importa são as variáveis que eu quero usar e aqui preciso ter o nome exato das minhas variáveis no conjunto de componentes. Então, se eu clicar nisso, você pode ver o excesso de navegação. Em seguida, o próximo é S e L, e assim por diante. E, novamente, você pode nomeá-los o sistema que você está usando em sua equipe. Apenas certifique-se de que, como quer que você os chame, sua referência seja quando você os aciona para os diferentes modos. Ok, então vamos selecionar essa instância. E então, através do menu da instância, você pode ver, ao passar o mouse sobre ela, eu recebo essa pequena variável Eu posso atribuir uma variável. E agora posso encontrar minha navegação variável. E vou colocar isso na instância. Você o define na instância que atualmente não está dentro do seu conjunto de componentes. Vamos adicionar isso aqui, e vou configurá-lo para encher o recipiente. Ah, sim, esquecemos de realmente configurar nossos quadros como layout automático Basta selecionar seus quadros e transformá-los em quadros de layout automático. Agora podemos selecionar nossa instância da navegação novamente e encher o contêiner. E agora vai ficar bem aqui. Também vou selecionar minhas molduras e vou dar a elas uma cor de fundo do slide para que você possa vê-las melhor. Agora vem a parte mais fácil. Se você mover sua instância entre os diferentes quadros, ela herdará o modo que você disse no quadro principal E, portanto, ele escolhe a variante correta que você configurou em sua coleção. Então, vamos colocar um em cada quadro. Vou simplesmente copiar isso, selecionar todas as molduras e colar Você pode ter algum preenchimento natural por aqui Você pode simplesmente selecionar seu quadro e definir tudo como zero. Vamos adicionar o cartão também. Então, eu estou fazendo o mesmo. Estou adicionando uma instância. Até agora, ainda não tenho nenhuma variante. Então, o que eu quero fazer é criar um grupo. Então, eu quero ter algumas instâncias em um grupo. Vamos selecionar isso, pressione Shift e estou criando um quadro de layout automático, que vou chamar de grupo de cartões. E eu posso ajustar o tamanho e aqui eu também posso usar minhas variáveis E agora vou adicionar isso aqui dentro. Agora, o que eu não gosto é que o preenchimento não esteja realmente funcionando Eu poderia centralizar isso com alinhamento, mas quero um preenchimento fixo Então, vou adicionar isso em torno desse grupo. Quero usar o mesmo preenchimento que uso aqui na minha navegação E, na verdade, isso é diferente para cada uma das minhas variações. Se entrarmos neles, você pode ver que estou usando variáveis para definir esse preenchimento E agora, o que eu fiz na minha coleção aqui, você pode ver que eu configurei uma variável chamada margem e estou criando um alias. Vamos excluir isso aqui e você pode ver que eu poderia definir isso manualmente como 24, mas se eu mudasse isso aqui , ele não seria selecionado. Então, o que posso fazer é criar um alias, clicar nesse pequeno ícone ou simplesmente clicar com o botão direito do mouse no alias E agora estou escolhendo o espaçamento que estou usando na minha navegação também E agora vou adicionar isso ao meu grupo de cartas. Vamos selecionar isso e, em seguida, clico no meu preenchimento esquerdo e direito E agora eu não escolho pelo meu espaçamento, estou escolhendo pela minha margem aqui, 24 Em seguida, para configurá-lo para encher o recipiente, pressione Enter para obter todos os elementos secundários e também defina-os para encher o recipiente. Ótimo, agora vamos movê-los para cá. Na verdade, eu quero adicionar alguma margem ao topo. Então, aqui eu também poderia usar meu espaçamento ou minhas margens. Acho que eu poderia realmente usar minha montanha a partir daqui. Vamos definir este como zero para manter tudo organizado. E agora o que vou fazer é simplesmente arrastar uma cópia desse grupo de cartões para o meu tamanho médio Agora, eu não quero que seja assim. Eu quero que eles estejam se embrulhando. Então, eu poderia usar o encapsulamento automático de layout. Eu já posso configurar isso aqui, então nada mudaria. E agora vamos configurá-lo aqui. E você pode ver que agora eles vão se posicionar. No entanto, isso só funcionará se, em seu componente principal ou em sua instância individualmente, você configurar uma largura mínima Então você pode ver que está definida uma largura mínima de 250, largura máxima de 450 E, portanto, eles estão se reorganizando. Então, vamos fazer isso em nossa última moldura e também arrumar o último preenchimento aqui E agora eu estou parando isso. Então, isso é muito bom para mostrar o design estático e dar uma olhada em diferentes pontos de interrupção, e você pode absolutamente usá-lo assim No entanto, há uma coisa que pode incomodá-lo um pouco. Se você estiver selecionando isso e redimensionando, dê uma olhada aqui na minha variável e, assim que eu redimensionar, ela jogará fora a variável e eu teria que configurá-la Também não me diz onde meus pontos de interrupção começam e terminam Mas se dermos uma olhada em nossa coleção, você pode ver que aqui embaixo, eu configurei mais duas variáveis. Um chamado ponto de interrupção máximo e uma caminhada chamada ponto de interrupção Min. E esses pontos de interrupção simplesmente representam meus pontos de interrupção que vou usar no CSS posteriormente Então, com o valor mínimo, estou basicamente dizendo que é aqui que meu tamanho médio começa e depois vai até aqui Então, vamos aplicar isso. Vamos primeiro pegar nossa tela pequena. E agora vou adicionar uma largura mínima. E então eu preciso pressionar essa era novamente, aplicar uma variável e, em seguida, encontrar seu ponto de interrupção Min. E então eu também vou adicionar uma largura máxima. O mesmo vale para a variável e encontre seu ponto de interrupção máximo. Eu vou fazer o mesmo com os outros quadros. Vou selecionar o quadro na minha variável mínima do ponto de interrupção, minha variável máxima do ponto de interrupção Eu só vou acelerar isso para você um pouco, e o mesmo para o nosso último quadro. E observe como eles já escolheram o modo correto. Isso ocorre porque eu já configurei o modo de antemão. Se você não tiver isso, certifique-se de selecionar o quadro e alterar o modo por meio das camadas. Na verdade, eu nem precisaria um tamanho máximo para minha tela maior, mas vou adicioná-lo para que tudo esteja completo. Ok, vamos dar uma olhada. Então, se eu selecionar isso e agora redimensionar, você pode ver que ele vai parar em um determinado ponto E também vai parar quando eu atingir a largura máxima. Agora, se eu for pequeno, você pode ver que isso não fica bem. Sempre certifique-se de organizar seu alinhamento. E agora podemos tentar o mesmo em nossa tela maior. Novamente, podemos resolver nosso alinhamento. Neste estará o nosso pequeno. Agora, se estamos trabalhando com essa configuração, na verdade não precisamos mais desse tamanho fixo aqui, então podemos excluí-lo. Agora, digamos que realmente queremos outro design para um dos pontos de interrupção Então, queremos que nosso carro mude de layout. Eu tenho meu cartão original aqui e tenho um novo chamado cartão Horizontal, e vou chamá-lo de cartão Vertical. Vamos selecionar os dois e podemos combiná-los como variantes. E agora eu vou chamar isso de um cartão. E você também pode nomear a propriedade ao seu gosto. Vamos dar uma olhada em nossa coleção. Então você pode ver que temos o cartão e o cartão vertical e o cartão vertical puxados para pequenos e médios. E então o cartão horizontal é a variante para grandes. Então, o importante novamente é que esse deve ser o nome exato. Então você também pode copiar isso e colar aqui. Às vezes, fica um pouco cheio de bugs. Vamos voltar aos nossos designs. Agora, o que você notará é que, se selecionar suas cartas, pressione Enter para obter as instâncias secundárias. E agora você pode ver que isso ainda não está conectado, então precisamos conectar todos eles ao nosso cartão. O mesmo que fazemos aqui. Selecione um grupo, pressione Enter e agora conecte todos eles ao nosso cartão. E vamos fazer o mesmo aqui. Pressione Enter e agora devemos ver uma mudança aqui. E vamos pegar o cartão, então ele muda para nosso design horizontal. Em seguida, podemos simplesmente sobrescrever suas imagens e textos. E assim, você tem um design totalmente responsivo, respeitando seus 43. PONTOS de BREAKPOINTS: 09 Pontos de BREAKPOINTS:: Se você estiver trabalhando com a grade responsiva e o Figma , isso também pode alterar os diferentes pontos de interrupção. Portanto, há duas coisas que você deve fazer. Faça uma representação visual e realmente documente uma grade que você pode usar. Então, aqui, por exemplo, você pode ver que esta é minha grade para excesso, depois para S M e, em seguida, para o ponto de interrupção L em diante, estou tendo outra alteração. Essa é simplesmente a margem que está mudando aqui. Então, estou documentando tudo isso e, então, essa é a segunda coisa que você deve fazer, salvando esses estilos de grades. Na minha visão geral de estilos, você pode ver que eu tenho acesso à grade móvel do que S e M e L no Excel. E dessa forma, sempre posso aplicar isso corretamente em um novo quadro. Isso soa como muitas idas e vindas quando se trabalha com tamanhos de tela diferentes. Mas lembre-se de que geralmente estamos projetando apenas para dispositivos móveis e depois para computadores. Então, estamos usando apenas essas duas grades por enquanto. E depois. Todos os testes? Sim, em todos esses testes aqui, se você estiver trabalhando com uma grade, você precisa se certificar de que , a partir dos diferentes pontos de interrupção, faça o teste com a grade correta. Outra forma de tornar isso ainda mais claro é nomear seus estilos com base nos pontos de quebra e também adicionar os números reais dos pontos de interrupção ou do intervalo. Este eu vi adicionar um decalque no sistema de design. Eles estão usando isso e acho que está muito, muito claro para todos, porque dessa forma, se eu tiver uma moldura, posso verificar o tamanho e a largura. E então, no menu suspenso de estilos das minhas grades, posso simplesmente escolher a dívida da grade que se aplica a esse tamanho de tela. Muito, muito bom e arrumado. 44. PONTOS de BREAKPOINTS: 10 Não se esqueça de sua tipografia: Não se esqueça da tipografia ao testar componentes responsivos. Isso é um pouco como uma situação de galinha e ovo. O que vem primeiro? Você começa configurando sua escala de texto e depois a aplica aos componentes responsivos, ou primeiro testa componentes responsivos e, em seguida, decide em qual ponto de interrupção seus componentes responsivos e, em seguida, decide em qual ponto de interrupção você deseja que a tipografia está mudando. Bem, isso realmente depende do seu projeto. Se você já está trabalhando com uma escala de texto existente , precisa respeitar isso. Mas se você está apenas configurando, então sim, por todos os meios, você pode brincar com seus componentes e com toda a configuração da página e, posteriormente, certifique-se de que você documentou e que estão tendo uma configuração arrumada. E sim, parece tão bonito e simples quando está terminado, é na verdade muita tentativa, teste e comprometimento. E isso não significa que eu não precise adicionar outro tamanho aqui ou ali em algum momento. Vamos analisar isso rapidamente, caso você não tenha visto isso antes. Então, aqui estão minhas configurações que priorizam o celular. Então, aqui você pode ver isso nas manchetes. Então eu tenho 123, depois minhas tags de corpo, botão Links. E você pode configurar isso para quantos ou tão pouco quanto precisar. Eu defini o peso para dimensionar a altura da linha e o espaçamento. E então eu vou ter um pequeno exemplo aqui. E isso é então salvo como um estilo. Se eu, de qualquer ponto de interrupção diante, quisesse alterar esse tamanho, por exemplo, no meu caso para H1, então eu documentaria isso aqui. Isso também pode ser apenas uma mudança na ocultação da linha ou qualquer outra coisa. Existem diferentes abordagens para escalas de tipos responsivas. Portanto, você pode usar a abordagem de proporção. Você pode até mesmo trabalhar com braçadeira ou com o Calc. Este é realmente apenas um exemplo muito simples que eu quero usar por enquanto. Você pode ver que todos eles são salvos como estilos. E então eu os nomeei forma que eu possa dentro do meu H1, por exemplo, eu posso ver que tenho um estilo básico, então eu tenho um para a tela m em diante e outro para tela L em diante. Se eu, por exemplo der uma olhada nos textos do corpo que você tem aqui, onde não temos nenhuma mudança nos estilos pontos de interrupção que sempre permanecem 16 e a mesma altura de linha. Então você pode ver que eu simplesmente dei uma base e ele, eu simplesmente posso escolher entre secundário e primário, que é a diferença entre regular e negrito. Então, o que isso significaria para meus testes? E vamos pular até aqui. E então você pode ver aqui que eu tenho cartas diferentes e, para a manchete, elas usam um H2. Então, eu tenho meu estilo aplicado aqui em H2 e posso ver que em L há uma mudança. Então, até aqui, tudo está funcionando bem. Então eu vou até aqui e estou descobrindo aqui que isso é o que acontece de L em diante. Então, aqui estou eu pegando a manchete e agora eu preciso mudar isso para algo um pouco errado com a altura da linha, talvez eu precise corrigir o que eu precisaria fazer. Agora, se eu estou pulando para a minha documentação é que eu preciso pegar este cartão. Eu também preciso pegar esse cartão. Então, agora preciso configurar duas cartas diferentes. Novamente, isso é realmente uma coisa da Figma. Eu ainda documentaria assim. Eu teria esse cartão. Eu teria esse cartão. E então também documentarei como eles se encaixam em diferentes pontos de ruptura como esse. Aqui estão três e aqui terei que me lembrar do pequeno truque que mostrei ao usar variantes. Então, eu poderia simplesmente nomear esse cartão como padrão. E esse cartão, chamarei de L. Então, seleciono os dois e crio um conjunto de componentes. E eu chamei esse componente de raios de cartão. Agora, se eu estiver trabalhando com instâncias, vamos retirar uma instância. Agora posso ver aqui a propriedade que lhe dei o nome. Então, vamos voltar aqui. Vamos nomear essa propriedade de breakpoints. E agora, se eu escolher essa instância, posso escolher entre o cartão padrão e o L Card, cuja única mudança aqui seria a diferença no estilo do meu título. 45. PONTOS de BREAKPOINTS: 11 Mais sobre tipografia e placas responsivas: Esta aula é realmente um mergulho profundo no design responsivo com o Figma. Então, é realmente sobre restrições de layout automático e o que toca nas grades. E estamos tocando na tipografia responsiva. Mas não vamos nos aprofundar tanto em geral e em nenhum assunto. Se você quiser saber um pouco mais sobre isso, recomendo que você dê uma olhada em outros dois dos meus cursos. Você encontrará todos eles aqui no Skillshare e simplesmente digitará o aprendizado da lua. E então você verá todos os meus cursos. E um deles que eu recomendo são grades e design responsivo. Então, aqui estamos realmente analisando diferentes configurações, diferentes tipos de grades. E também estamos analisando HTML e CSS reais. Assim, você pode brincar com uma coisa real e realmente entender como essas consultas de mídia funcionam e realmente brincar com a coisa real, o que é uma diferença total. O outro curso que eu recomendo é topografia em design de UX UI. E aqui estamos falando, por exemplo, sobre configuração de escalas de topografia responsivas. Quais são as diferentes técnicas e como podemos lidar com a capacidade de resposta em diferentes níveis? E como podemos comunicar isso com nossa equipe de desenvolvimento? Portanto, esses dois cursos são realmente recomendados para ampliar seu conhecimento, não apenas no Figma, mas apenas uma compreensão geral desses tópicos no design de UX UI. 46. PONTOS de BREAKPOINTS: 12 Plugin: Também há um ótimo plug-in que você pode usar, vá até Plugins e digite os pontos de interrupção. Agora, execute o plugin. Você verá essa pequena janela na qual poderá adicionar seus pontos de interrupção reais. Estou usando apenas alguns pontos de interrupção aleatórios por enquanto. O importante é que todos os seus quadros já estejam configurados de forma responsiva. Idealmente com layout automático. Agora, escolha os quadros, para vinculá-los basicamente a um intervalo correspondente aos pontos de interrupção. E se você agora redimensionar a janela que o plug-in criou para você, poderá ver uma boa representação responsiva do seu design. É muito, muito bom, mas lembre-se de é mais para mostrar como uma página inicial ou algo parecido ou um recurso especial. Porque ele transforma tudo em componentes e tem algumas partes complicadas, mas, no entanto, plug-in muito bom para jogar. 47. Adeus e algumas coisas gratuitas: 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.