Domine layouts automáticos no Figma para design de web e interface do usuário | Muhammad Ahsan Pervaiz | Skillshare
Menu
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Domine layouts automáticos no Figma para design de web e interface do usuário

teacher avatar Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      01 AutoLayouts Figma Intro 19 8 24

      1:42

    • 2.

      02 Explicando todos os controles e alinhamentos

      9:29

    • 3.

      03 Layout de alinhamento de texto com autolayouts

      8:55

    • 4.

      04 design de cartões com botões e ícones no Autolayout

      7:37

    • 5.

      05 Autolayouts complexos responsivos com posição absoluta

      13:31

    • 6.

      06 entradas de forma responsiva perfeitas com autolayouts de Figma

      8:12

    • 7.

      07 Uso de autolayout para layout e espaçamento em web design

      7:13

    • 8.

      08 Design de barra de navegação responsivo com layouts Figma Auto

      12:52

    • 9.

      09 Crie passo a passo uma seção de web design com layouts automáticos

      10:01

    • 10.

      10 autolayouts e componentes no Figma

      5:47

    • 11.

      01 Assignment Crie um conjunto de botões de butões de Figma

      1:12

    • 12.

      02 Assignment Crie um cartão de interface de usuário de autolayout com capacidade de resposta

      1:23

    • 13.

      03 Assignment Crie uma interface do usuário com fundo posicionado absoluto

      1:10

    • 14.

      04 Assignment Crie um campo de entrada responsivo

      1:02

    • 15.

      05 Crie uma seção completa em destaque do site com Autolayout

      0:41

    • 16.

      06 Barra de navegação responsiva à Assignment no autolayout Figma

      1:14

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

26

Estudantes

--

Sobre este curso

Desbloqueie todo o potencial dos designs da sua web e da interface do usuário dominando os layouts automáticos no Figma. Este curso foi projetado para designers iniciantes e intermediários que muitas vezes se sentem sobrecarregados pelas complexidades dos layouts automáticos.

Dividimos isso em etapas fáceis de entender, mostrando como criar designs responsivos que se adaptam perfeitamente em diferentes tamanhos de tela. Quer você esteja construindo sites, aplicativos móveis ou quadros de fio, este curso vai ensinar você a usar layouts automáticos de forma eficiente para economizar tempo e aumentar sua produtividade.

Você vai mergulhar profundamente nas características principais e técnicas avançadas de layouts automáticos, permitindo que você crie componentes dinâmicos e responsivos. Com lições práticas, você vai aprender como construir sistemas de design escaláveis que sejam limpos, flexíveis e fáceis de manter. Da criação de botões e formas a layouts complexos, este curso equipa você com habilidades práticas que vão elevar seu fluxo de trabalho de design.

Além disso, incluímos arquivos Figma de exercícios para que você possa praticar junto com cada aula! Ao final deste curso, os layouts automáticos não vão mais parecer um desafio, mas sim uma ferramenta essencial em seu kit de ferramentas de design. Prepare-se para transformar a maneira como você aborda a interface do usuário e o web design na Figma!

Vamos desbloquear os segredos do uso de layouts automáticos no Figma!

Conheça seu professor

Teacher Profile Image

Muhammad Ahsan Pervaiz

UI UX Visual Designer 15+ Years

Professor

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... Visualizar o perfil completo

Level: Intermediate

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. 01 AutoLayouts Figma Intro 19 8 24: Olá, designers juniores ou designers de nível médio, designers interface do usuário, use designers de despesas. Tenho visto muitos problemas com layouts automáticos no Figma Portanto, se você estiver usando o Figma e tiver problemas para usar com eficiência o layout automático para espaçamento, layout, componentes, como criar seções inteiras, apenas o layout automático Então você pode usá-los em carros de interface de usuário, você pode usá-los em seções inteiras de web design, cabeçalhos , diferentes seções em destaque, para alinhamento, para espaçamento de muitas coisas, para botões, para barras de navegação superiores, muitas Mas onde você precisa usar layouts automáticos e onde não precisa usar layouts automáticos. Essa é a pergunta. Então, em todos esses episódios de vídeos, vou compartilhar com vocês todas as dicas como eu realmente o uso. passo, abordarei coisas diferentes, do BGner ao próximo nível, ao próximo nível, e como eu realmente uso layouts automáticos enquanto projetamos nosso design de interface de usuário ou um layout móvel Então, vamos começar e nos vemos em breve na próxima lição, onde criaremos primeiro um botão, um botão de layout e talvez algum parágrafo apenas para dar uma dica do layout au Então, vamos começar. 2. 02 Explicando todos os controles e alinhamentos: Agora, vamos começar e criar primeiro um botão de layout de pedido ou talvez alguns títulos, apenas um pouco de espaçamento Então, vou te dar um botão de layout de primeiro pedido. Então, vamos pressionar T para texto e vamos chamá-lo de botão. Então esse vai ser o nosso botão. Vou pressionar agora. Este está selecionado. Vou pressionar a tecla Shift A. Agora você pode ver que é uma moldura. Tem um layout de áudio, tudo habilitado à direita. Você pode ver aqui, aqui, que temos um layout de tudo, um layout de controles. E você pode ver que temos uma borda ao redor dela. Então, você pode ver se passarmos o mouse aqui, diz oito pixels de preenchimento na parte superior e, da mesma forma, oito pixels daqui, mesma forma oito pixels daqui Você pode aumentar o espaço se quiser. Mas o problema é que não há cor de fundo nela. Então, primeiro, vamos clicar aqui, preencher. E agora você pode ver que temos um botão preenchido. Vamos preencher uma cor como algo assim. OK. Então, vou mudar a cor do texto para branco. OK. Então, essa será minha moldura agora, e há algumas configurações aqui. Este é o eixo x, eixo y. Na verdade, é assim que o conteúdo desse padrão se expandirá, se contrairá ou se comportará. Está bem? Então, isso é basicamente dimensionamento horizontal e o dimensionamento vertical Não vamos tocar nisso agora. Estamos mais interessados nesses revestimentos no momento. Então, deixe-os no automático. E isso é, na verdade, preenchimento horizontal, e isso é preenchimento vertical Você pode ver se eu clico ou quem está nesta seção, e você pode ver aqui que os dois estão selecionados. Então, se eu clicar aqui, nas laterais, temos a direita e a esquerda. Então, se você quiser controlar todos os diferentes, você pode controlá-los assim. Então, isso é preenchimento esquerdo. Vamos aumentar o preenchimento esquerdo para 16. Vamos usar 24 aqui, e no preenchimento direito, eu vou usar 24 E na parte superior e inferior, eu vou usar 12 E opa, alguma coisa. Acho que cliquei em outra coisa. Moldura. Clique na moldura e 12. Então esse é o nosso botão. Vamos colocar cantos arredondados aqui, 16 pixels, e eu vou usar o IOS 60%. Isso é suavização de cantos, se você não sabe. Então, aqui está um botão básico. OK. Então, meu layout automático. Então você pode ver aqui que temos espaçamentos diferentes. Então, o motivo número um é o espaçamento. Você pode controlar facilmente o espaçamento ao redor dela. Você pode controlar facilmente acolchoamentos superior e inferior, direito e esquerdo Portanto, isso é muito útil quando você está projetando a interface do usuário A segunda é que, se eu tentar alterar o texto do botão, ele se expandirá. Então o motivo é esse abraço e abraço aqui. Então, isso é o básico. OK. Então, cobrimos esses revestimentos Agora vamos cobrir essa lacuna horizontal. Então, digamos que eu tenha essa moldura e depois outra. Vamos replicar esse comando D. Agora temos esse quadro, vamos chamá-lo de BTN um, e vamos chamá-lo de BTN. BTN dois OK. Então, agora temos dois botões , e agora, o que vamos fazer é selecionar os dois botões. Então, agora, os dois foram selecionados e, novamente, vamos colocá-los em outro layout automático principal. Então eu vou segurar e pressionar a tecla Shift A. Novamente, agora você pode ver que esta é a nossa moldura, e eu vou chamá-la de container. Agora você pode ver que esse contêiner contém esses dois botões que também eram layouts automáticos Então, neste recipiente e no interior, temos o botão um e o botão dois. Agora, se clicarmos no contêiner, você pode ver que temos esse recurso de layout automático de cima para baixo. Na verdade, isso é layout, como vamos mudar o layout. Então, isso é o que eu disse , esse será o layout. Então, vamos clicar aqui e em Hare, e é assim que isso vai mudar Agora, é assim que isso mudará o layout. Então, se tivermos dois ou três itens, vamos chamá-lo. Vamos replicar esse novamente. Então, vamos replicar isso, e eu vou pressionar o controle ou o comando D para duplicar Agora você pode ver facilmente que vou reduzi-lo um pouco, então vou pressionar K e vamos reduzi-lo para 300 Então, isso é um pouco de massa. Vou selecionar Shift e selecionar tudo isso e reduzir o tamanho do tipo de letra Então, aqui temos o contêiner, e isso é basicamente para controlar o layout. Então essa é a direção horizontal, essa é a direção vertical. Agora, o espaçamento entre eles, então esse é realmente o espaçamento entre esses elementos Isso é controlado por aqui. Portanto, se você tiver apenas um único item em um layout, isso não o ajudará em nada. Então é assim que eu vou controlar, digamos, eu vou ter um espaçamento de 16 pixels entre o conjunto de botões como este Talvez eu tenha que publicar agora ou, digamos assim. Salve no rascunho. Agora vou mudar a cor desse botão para ficar um pouco assim. Vou manter esse botão para publicar duas palavras. OK. Então, esses são três conjuntos de botões e, embora eu tenha dois botões ativos, ainda assim, isso é apenas para entender o conceito. OK. Portanto, mantenha o fundo branco. Assim, você pode ver facilmente o botão micro aqui. OK. Então, isso é sobre o layout. Não, essa terceira opção. Na verdade, isso é AP. Essa é uma opção muito nova no Figma. É chamado de AP e RAP significa que você pode configurar o contêiner e, quando você realmente tenta obter uma visão responsiva ou tenta comprimir o contêiner, ele se encerra Está bem? Então, deixe-me te mostrar. Então, se tivermos esse resumo aqui selecionado, você pode ver que é alinhar à esquerda onde você deseja alinhar Então, se eu tentar apertar, você pode ver agora, se eu tentar apertar a largura disso, na verdade , é uma embalagem automática neste na verdade , é uma embalagem automática Portanto, isso é útil quando você está tentando criar uma visualização responsiva ou conjunto de botões responsivos em que, quando temos telas menores, o botão realmente se enrola assim Em telas maiores, eles estarão nesta rua. Então é assim que você usa esse envoltório aqui. Agora, cobrimos tudo isso deste lado. Vamos tentar fazer esse alinhamento agora. Ok, então eu vou voltar a voltar para isso. Então, por exemplo, eu tenho um contêiner maior, digamos que este. Agora você pode ver, vamos usar algo assim. Então, agora eu realmente expandi meu contêiner. Às vezes, temos um contêiner maior do que o que temos dentro do conteúdo. Ok, então agora , na verdade, é aqui que estará seu conteúdo. Então, na verdade, esse é o alinhamento do conteúdo. Então, agora você pode ver que esses são três botões alinhados à esquerda à esquerda e no meio de todo esse contêiner Então, se eu tentar selecionar a parte superior, ela ficará na parte superior, inferior, média inferior, parte superior média, direita. Isso vai estar no meio de c, centro de tudo, uma horizontal e outros centros. Então, este é todo o cenário de layout automático. Então, vamos tentar complicar as coisas e passar para a próxima lição, onde adicionaremos mais coisas a esse contêiner Então, vamos para a próxima lição. 3. 03 Layout de alinhamento de texto com autolayouts: Agora, vamos voltar ao layout automático, adicionaremos e mostrarei mais viagens e truques, como eu realmente uso layouts automáticos para texto OK. Aqui está, na verdade, o layout automático do contêiner do botão. Então, vamos chamá-lo de contêiner BTN. Então, vamos mantê-lo na parte inferior e dar uma olhada aqui. Então, eu vou pressionar. Este será o título do meu blog, e vamos digitar um texto aqui. Tente usar algum plug-in Lum Ipsum, Laurum. Sim, sim Laurum Aqui temos algo assim. Eu tenho que selecionar algo. Vamos criar uma camada de texto aqui e depois gerar. Isso é ótimo. Agora temos alguns exemplos de texto. Vou usar normal aqui e 16 para o tipo de letra, e vou usar altura automática Por aqui, ok? Portanto, temos o título e o parágrafo. Na maioria das vezes, o que eu faço é às vezes também temos um título e algum subtítulo ou linha acima do título, seja , não tenho certeza de como você o chama, mas eu o chamo de subtítulo, na verdade E vamos tê-lo 20, e eu vou tê-lo em maiúsculas, algo assim, algo assim Às vezes, temos arranjos como esse. Então, como o layout automático vai ajudá-lo no espaçamento. Então, isso é tudo uma questão de espaçamento. Agora, eu quero ter um espaçamento separado entre esses dois e esses dois Todas essas coisas, eu vou ter um espaçamento separado. Vamos reduzir o tamanho para 14, aumentar um pouco o espaçamento entre eles Eu quero manter algo assim e aqui, vou usar 20. Vamos usar 18 aqui. Então, como vou conseguir isso. Primeiro, vou seguir a regra geral você definirá automaticamente as primeiro, você definirá automaticamente as coisas que estão mais próximas Então, por exemplo, esses dois, vou selecionar esses dois turnos oito. Agora você pode ver que esse é o espaçamento. Eles têm espaçamento de zero agora. Agora eu tenho essa moldura. Vou chamá-lo de título mais subtítulo, algo assim, e isso vai ser texto Agora vou selecionar esse subtítulo e título, e vou clicar com a tecla Shift aqui para selecionar os dois Então você pode ver aqui, eu tenho esse título de layout e a camada de texto, e vou pressionar e segurar novamente a tecla Shift A para criar outro layout. Então, vamos chamá-lo de contêiner de texto. Está bem? Agora, a vantagem desse contêiner de texto é que, se eu quiser controlar o espaço entre esses dois, terei algo aqui assim. E se eu quiser controlar o espaçamento entre este bloco e este, vou pressionar selecionar contêiner de texto E agora temos 28, posso usar 24 assim. Então, essa é uma maneira muito, muito comum que eu uso no meu processo de web design o tempo todo para o layout de camadas de texto. Você também pode ter algo assim no meio. Se você quiser mover algo no meio e se eu quiser mover o título no meio, posso usar algo assim. Não sei por que não está se movendo. Ah, esse é o problema. Essa largura automática não está ativada para esta. Aqui temos altura automática. Essa será a largura automática. Para linhas únicas de texto, eu sempre usaria largura automática. Certifique-se de que, se você tiver linhas únicas de texto, use inteligência automática. Caso contrário, você vai ter algo assim, problemas como esse. Isso vai ser um alinhamento central. Se você quiser algo assim, você pode ter um contêiner de texto com alinhamento central Agora, o próximo passo. Vamos criar esse contêiner de texto. Vamos mover esse título para outro lugar. Então, aqui temos um contêiner de texto. Vamos mover tudo à esquerda. Vamos mover este para a esquerda, e vamos mover tudo dentro dele para a esquerda também. Agora, vamos torná-lo responsivo. Agora, se eu tentar apertar o recipiente, ok? Então está funcionando. E o cabeçalho não está funcionando assim, mas este está funcionando. Ok, então o motivo pelo qual está funcionando é o Phil. Então, sempre que você estiver usando uma camada de texto, você deseja expandir e contrair com base no tamanho do contêiner. Então você tem que usar preenchimento para isso, ok? Portanto, o redimensionamento vertical é enorme e o redimensionamento horizontal Então, isso vai ser para a camada de texto aqui. Portanto, se eu selecionar esse título, você verá que ele não está configurado para ser preenchido. Seu tamanho é um abraço. Então, se eu clicar em O aqui desta forma, vamos tentar expandir isso para corrigir o recipiente de enchimento. Vamos tentar. Agora, agora você pode ver que é responsivo, agora o que eu sou são coisas um pouco complexas, mas deixe-me mostrar o que eu realmente fiz Então, primeiro de tudo, eu tenho outra que você pode ver aqui, esta, essa moldura dentro desta. E primeiro, se eu quiser que esse quadro seja responsivo e que o conteúdo dentro dele seja responsivo, porque o tamanho do quadro deve se contrair e Então, primeiro, foi configurado para ser corrigido assim. Então, se eu tentar, você sabe, contratar, vai ser consertado, permanecerá fixo. Então, primeiro, preciso configurá-lo para encher o contêiner, para que ele encha o contêiner, que é o contêiner de texto externo do contêiner. E a segunda configuração é que você também deve usar o recipiente de enchimento para o cabeçalho dentro dele. Então, agora temos tudo responsivo aqui. Então, se eu tentar apertar isso, vamos tentar apertar o máximo que eu puder Agora, se você quer que seja algo, você sabe, assim e não quer que vá além desse tamanho, tudo bem. Você quer isso sempre que alguém tentar apertar meu, você sabe, layout em destaque ou esta seção de cabeçalho ou este cartão ou o que você quiser Não quero que alguém o aperte além dessa largura, que é 220 Temos outro recurso selecionado aqui e essa será a largura mínima de 220 Vamos tentar fazer isso agora. Opa. Eu fui bloqueado. OK. Então, é assim que você bloqueará a largura mínima do seu contêiner ou cartão. Então, se você quiser agora, agora, o próximo passo é converter toda essa seção em um layout de cartão, ok no próximo vídeo. Então, vamos passar para o próximo vídeo e criar mais algumas coisas usando o layout automático. Espero que você esteja gostando desta lição. Se você está gostando disso, não deixe de me agradecer comentando ou recomendando este curso, revisando este curso, escrevendo algo Isso é tudo. Vamos passar para a próxima lição. E saiba mais sobre layouts de pedidos. 4. 04 design de cartões com botões e ícones no Autolayout: Vamos criar algo mais parecido um layout de carro para esse contêiner fiscal de layout automático que temos. Vamos replicar isso, e vamos mantê-lo assim, replicá-lo E o que primeiro precisamos é, na verdade, uma cor de preenchimento. Então, vamos preenchê-lo com algo azul elétrico. Para isso, vou mudar a cor do plano de fundo e agora meu contêiner ficará branco. Ok, assim que eu adicionar a cor de preenchimento aqui, tenho alguns problemas, que serão corrigidos com os preenchimentos Ok. Então, vou usar 24 na esquerda e na direita, 24 na parte superior e inferior assim. Então, aqui temos um layout muito bonito. E eu vou adicionar um ícone. Vamos adicionar um ícone aqui na parte superior. Vamos usar essa biblioteca de ícones do Panda. Então, vamos usar algo como, então eu vou usar algo assim ou layouts automáticos E então, o que você acha? Devemos adicionar algo aqui ou no contêiner. Ok. Então, vamos copiá-lo no contêiner. E agora você pode ver que está na parte inferior, então vou movê-lo para o topo assim. E, então eu quero que isso tenha, você sabe, para controlar o espaçamento entre esses dois Então, vou selecionar esses dois, manter pressionada a tecla shift e criar outro layout automático. Não se preocupe com esses muitos layouts automáticos. Eu vou ter algo parecido com isso. Opa. O que aconteceu acabou de acontecer? Vou clicar aqui e vou aumentar seu tamanho para 40. Vamos usar 32. 48 é um pouco, muito grande. E vamos selecionar uma cor como essa. Opa, Apple. Sim. De qualquer forma, essa será a biblioteca da Apple. E então esse é o nosso cartão simples. E você pode ver que temos layouts muito complexos aqui. Vou chamar um top frame. E esse é, na verdade, nosso texto final. Ok. Então você pode ver que este é um cartão muito bonito e vamos usar cerca de 66 para este. Se você quiser um traçado, você também pode adicionar um traçado, e vamos ter uma cor cinza bem clara. Vamos usar esse. Isso é um pouco pesado. Vamos usar uma cor muito, muito clara para isso. E para este contêiner, também vou adicionar alguma elevação, pois isso é, na verdade. Então, estou apenas adicionando algo como uma sombra ao redor dela. Essa sombra é um pouco dura. Vamos tentar ver o que eles adicionaram. Então, eles têm duas sombras, uma com 30%, umas. Então, vamos reduzir isso para 10%. Eu não quero uma sombra muito pesada. Aumente o desfoque para cerca de 20 ou 10%. Ok. Então, aqui está. Só uma sombra clara. De qualquer forma, eu ainda não gosto dessa sombra, mas eu não acho que devemos, você sabe, mexer com Ok. Então, temos um cartão USB ou contêiner de texto muito, muito bonito, e temos um quadro superior onde temos esse ícone, e então temos esse subtítulo de título, outro layout automático, e este é E se você quiser adicionar um botão aqui, vamos adicionar um botão. Vamos copiar isso. Esse é outro layout automático. Vamos colar isso, selecionar esse contêiner, colá-lo dentro dele. Vamos chamá-lo de adicionar ao carrinho. Algo parecido com isso. Isso é um tias muito, muito grande, então vou usar 16 pixels médios Ok. Agora adicionamos o botão aqui. O espaçamento entre este e este é, na verdade, controlado aqui Então, se eu tentar aumentar o 40, você pode ver, você pode ver agora, o espaçamento entre eles Se eu quiser controlar o espaçamento e realmente quiser controlar o espaçamento entre este e este , selecionarei os dois e criarei novamente outro layout automático Shift A. E agora eu quero que seja o quadro inferior. E eu vou usar 16 pixels entre esses dois. Este, este é na verdade um contêiner de texto. Vamos usar 20 aqui, e vamos reduzir a cor desta para ficar um pouco acinzentada como Ótimo. Então, vamos testar isso se for sim. Aqui está. Talvez queiramos que tenha uma largura fixa até a largura mínima de, vamos usar 260, algo assim. Vou reduzir o tamanho desse título para algo mais ousado, e vamos reduzi-lo para ficar assim , porque estou pensando em dispositivos móveis. Então, em um celular, vou usar 15 pixels, e esse será meu tamanho mínimo de 260 pixels. Além disso, acho que podemos reduzir o tamanho à esquerda e à direita e também na parte superior e inferior, vou usar 20. Portanto, não se preocupe, se você estiver usando superior e inferior e a esquerda e a direita de forma diferente, você pode usar todas da mesma forma Então, se eu posso usar, eu também posso usar algo assim. Acho que preciso de mais à esquerda do que à direita, então vou usar algo assim. Vamos usar o botão para ser seis. Ok, ótimo. Então é assim que vamos criar um cartão de contêiner de texto onde eu posso alterar todo o layout, o controle, o espaçamento entre todos esses elementos Isso é algo muito, muito incrível. É por isso que adoro o recurso de layout automático do Figma. No início, era muito difícil de usar. Até eu tenho dois designers juniores. Estou treinando no meu escritório em casa, e eles têm muita dificuldade, você sabe, em usar todo esse layout automático. Acho que esqueci uma característica do layout automático, que é, então, essa, a posição absoluta Agora, em STML, a posição absoluta é que, onde quer que você fixe esse elemento no layout ou na página STML, ele ficará nesse local, para que você possa movê-lo para qualquer lugar você possa movê-lo Vamos passar para a próxima lição e criar layouts mais complexos com o modo automático Cuide-se, pague. Nos vemos em breve na próxima aula. 5. 05 Autolayouts complexos responsivos com posição absoluta: Na última lição, acho que estávamos tentando adicionar um gráfico de fundo para esse contêiner de texto ou podemos chamá-lo de cartão agora. Esta é nossa placa de interface de usuário, e vamos replicá-la Vou adicionar algo aqui, talvez algum plano de fundo ou algum ícone em segundo plano ou algo que não seja consistente com isso no layout. Eu tenho essa imagem. Vamos copiar os dois daqui e passar para cá. Vou fazer experiências com eles. Vamos fazer isso. Eu tenho uma elipse com um gradiente e apliquei o desfoque de camada O desfoque da camada afeta. Se você não souber, pode adicionar desfoque de camada e controlá-lo para ficar como 2020. Vamos usar 100 aqui e vamos usar 30% aqui. Eu quero isso como pano de fundo disso. Se eu tentar movê-lo para dentro daqui, vamos pegar o cartão. Aqui temos uma carta com verso. Então, se eu tentar mover essa elipse dentro desta carta, vamos movê-la para Então você pode ver que isso está realmente bagunçando todo o meu layout Então, agora está no topo, mas eu não quero que esteja no topo. Eu quero isso como pano de fundo disso. Então, como eu posso conseguir isso, Ted. Ok. Então, vamos pressionar essa posição absoluta. Assim que pressionei a posição absoluta, você pode ver que ela realmente mudou todo o layout e agora posso usá-la em qualquer lugar em que ganhei Vamos movê-lo para a parte inferior. E, então eu acho que está no topo, então eu vou movê-lo para o topo, e ele vai ficar na parte inferior, eu acho. Vamos dar um pouco de sombra a esse botão só para verificar. Ok. Então, vou dar minha própria sombra porque não gosto dessa. Essa é uma boa sombra, e vamos ampliar e ver onde está realmente a cor. Agora eu acho que está em segundo plano. Agora você pode ver como eu realmente usei essa posição absoluta. Da mesma forma, às vezes eu realmente uso algo como aspas em um berço, vou mostrar em um design, algo assim, vou usar 96 ou talvez 300 para isso E então vou usar a cor roxa como essa, clicar com o botão direito do mouse e achatá-la para criar vetores a partir dela, e agora vou usá-la como plano de Ok. Então, eu vou movê-lo para cá. Vamos movê-lo para cá e torná-lo com 10% de opacidade, e pronto Ok, então o texto está acima, então você precisa manter essas posições absolutas na parte superior para tê-las na parte inferior. Ok. Vamos esconder isso e eu tenho esse histórico. Posso aumentar o tamanho pressionando K para aumentá-lo. Vamos bloquear isso primeiro e escalá-lo para 250. Algo parecido com isso. Isso é demais. Eu acho que 150 é bom. Isso é bom, isso é bom. O que está acontecendo aqui, eu vou te mostrar o que está acontecendo aqui. Ok, então você pode ver meu conteúdo está visível se eu movê-lo para fora. Então, uma configuração é o conteúdo desse clipe. Então, se eu clicar aqui, você pode ver que agora foi corrigido e recortado, o conteúdo está sendo recortado Ok, acho que isso é para o consultório. Se você pode criar algo incrível, você sempre pode me mostrar. E agora você pode ver qual é o benefício disso? Se eu mover esse tamanho, ele se expandirá automaticamente. Se eu adicionar, se eu tentar adicionar mais texto, aqui, o layout será o mesmo e eu posso gerenciar facilmente todo o espaçamento entre os elementos Essa é a vantagem de ter uma estrutura como essa ao usar layouts de pedidos no Figma Então, usamos essa posição absoluta, usamos muitas coisas. Agora, com a posição absoluta, você também pode usar essas restrições restrição é que, se tentarmos expandir esse contêiner, onde ele deveria, você sabe, residir Então, este onde deveria estar vai ficar à esquerda e em cima, ou se você quiser mantê-lo à direita e embaixo, algo assim, Uh , agora, acho que vamos mantê-lo à esquerda. Sem fundo, superior e esquerdo. Então, ele ocupará o espaço daqui e de baixo. Se eu tentar expandi-lo, você pode ver que ele ficou no topo. Então é assim que realmente funciona. Então, se eu tentar mover a parte inferior, agora ela se moverá com a parte inferior porque está tentando manter o espaçamento restrito da parte inferior e da esquerda Então, agora vou mantê-lo no topo e na esquerda. E também podemos adicionar outro botão aqui, Controle D. Agora você pode ver esse conjunto de botões. Acho que precisa de outro quadro com um quadro de layout, e vamos chamá-lo de conjunto BTN. E nós vamos ter um layout ou de algo assim. E vou chamá-lo de salvar para salvar na lista. Eu vou ter um espaçamento entre eles de oito pixels. Vamos mantê-lo 12 12. Vou dar um tratamento um pouco diferente não o conjunto de botões. Quero que esse botão tenha uma cor de preenchimento parecida com essa. É assim que você vai criar todo o layout e tudo mais. Agora. Se eu quiser alterar o layout disso, também posso alterar o layout assim. Agora, isso vai ser, você sabe, esse é o outro benefício. Se eu quiser mudar alguma coisa, se eu quiser mudar o layout, posso fazer isso facilmente. Agora você pode ver que o ícone está à esquerda e está tudo assim. Esse é outro layout. Então, se você quiser tentar outra coisa, você pode alterar o layout desta forma. Agora você pode ver o título, o espaço entre o título e este, posso mantê-lo em zero. E se eu quiser saber agora, você pode ver que o texto está um pouco no topo, então vou movê-lo para o meio assim apenas para manter tudo. E para a largura mínima, vou usar a largura mínima para 350. Acho que essa será a largura mínima. Eu não quero que cresça um pouco menos do que isso. Posso novamente aumentar um pouco o espaçamento entre eles Eu acho que dois é bom. E também se eu quiser me mudar, eu vou me mudar. Topo. Então é assim que você pode alterar o layout do seu cartão dessa forma. Você pode alterar o espaçamento entre os elementos. E essa parece ser 20, então vou usar 16 ops 16, não uma. Além disso, acho que preciso um pouco mais de espaço entre essas duas seções ao redor. Também vou mudar o espaçamento ao redor dela. Então, vamos usar 20 em todos os lugares. Assim, 20. Acho que na parte inferior, vou usar 24. No topo, vou usar 24 e, à esquerda e à direita, 20 é bom. Ok. Agora, vamos tentar mudar as sombras Vamos remover essa sombra. Ok. Ótimo. Então esse é outro. Ok. Então, cartão de cabeçalho com o fundo. Então você pode ver com que rapidez eu realmente ajustei meu layout. Eu queria o ícone na parte inferior ou superior. E se eu quiser mudar o layout novamente, posso ter algo assim. Então, é assim que você pode gerenciar seus layouts automáticos. Agora, outra coisa é que eu sei que você pode ver que este é um cartão um pouco largo, e eu quero que meus botões estejam igualmente, você sabe, tocando todo esse layout Está bem? Então, eu quero que ele seja automaticamente espaçado aqui sempre que eu mover o contêiner Eu quero que esse botão esteja sempre ligado aqui. Ok. Então, o que eu faço é, como você pode ver, agora, essa é na verdade uma lacuna horizontal entre esses dois botões. Vou configurá-lo para automático. Ok. E agora que configurei para automático, vou remover essa correção e vou chamá-la de recipiente de enchimento. Agora ele vai encher o recipiente externo. Sempre tenha os botões à esquerda e à direita. Ok. Então, esse é outro recurso de layout automático, que é o horizontal carp auto, que acabei de lembrar que deveria contar a vocês porque é um ingrediente secreto para criar interfaces Agora, se eu tentar fazer com que eu tenha um limite fixo de 350, vamos tentar usar 220 e ver como ele realmente reage Ok. Então você pode ver agora que os botões estão se aproximando. Então eu acho que essa será a largura mínima 291. Então, vou mantê-lo 290 e meu blog na verdade, não é. Não está tentando, você sabe, encher um recipiente Acho que deveria funcionar. Eu tento encher o recipiente, mas agora não tenho certeza do que está acontecendo. Opa Então, acho que essa é a altura. Esse é o problema da altura. Portanto, temos um recipiente de enchimento para a altura. Acho que deveria funcionar agora. Então, na verdade, isso está bagunçando todo o layout. Então eu acho que devemos manter o mínimo por aqui. Não sei por que isso não está funcionando. Então, isso está definido para preencher, e isso está definido como isso está definido como fixo. Esse é o problema aqui. Ok, ótimo. Então, encha o recipiente, preencha o recipiente. Se encher o recipiente, encha o recipiente. Ok, então temos um cartão de layout automático muito responsivo, algo muito complexo Nós temos que você pode ver aqui. Os botões estão dançando onde eu quiser. O texto se expande e se contrai onde eu quiser O espaçamento é consistente, como eu gostaria. Ok, então de qualquer maneira. Então, você pode ver que é assim que você criará layouts complexos de cartões de layout com layout automático Se você tiver alguma dúvida, pode sempre me perguntar, e eu adoraria respondê-la. Então, vamos passar para a próxima lição e ver se podemos fazer algo mais. Vou te dar mais exemplos de como eu realmente o uso em cenários reais de web design e coisas assim. Então, vamos para a próxima lição. 6. 06 entradas de forma responsiva perfeitas com autolayouts de Figma: Agora, pensei que havia uma coisa, o elemento de interface do usuário, que é usado muito tempo, que são elementos de entrada de formulários. Então, se você quiser inserir algum texto ou, você sabe, algo no formulário, como você vai criar uma entrada responsiva para o formulário Então, vamos criar algo aqui e colocar no seu e-mail, turno A, e isso vai para esse será o ponto de partida. OK. Além disso, também precisamos de algum ícone. Então, o que você acha que podemos ter um ícone? Vamos, vamos usar esse. Ok, ótimo. Então eu tenho uma moldura e um ícone dentro dessa moldura. Agora, posso simplesmente clicar aqui e colocar um preenchimento e, em seguida, posso ter algo como um arredondamento de quatro pixels E agora oito, vou aumentá-lo para 16. Não. Acho que oito é bom. Vou aumentar a parte superior e inferior. Você pode ver que a altura é 48. Então, eu geralmente mantenho no mínimo 48 pixels para a altura, e vou usar uma fonte regular simples aqui, Tyas 16, e vou usar algo assim E isso é chamado de ícone de final básico no final do quadro, e agora OK, então eu quero que isso tenha pelo menos a largura da largura fixa de, tipo, mínimo, digamos, eu quero que tenha 200 pixels Mínimo. Então, o truque é que eu vou ter uma largura fixa nessa camada. Então eu quero que seja como 200. Então, o que eu vou fazer é realmente aumentar o tamanho dessa camada de texto dentro dela, ok? E guardei o ícone aqui. Então, vou chamá-lo de ícone final. Isso é ótimo, e agora precisamos de um rótulo com ele. Vamos digitar um rótulo para seu e-mail e eu vou selecionar os dois Shift A para ter outro layout automático. Isso está muito longe, então vou usar dois ou talvez quatro aqui. Então, isso parece muito bom. Quatro, vamos usar cinco, seis. Seis é bom. Six está ótimo. Então, vamos chamá-lo de e-mail no domínio mais ou menos assim. OK. Isso é bom, e agora o que precisamos aqui é de mais espaço à direita. Então, vamos selecionar isso e precisamos de mais espaço à direita. Como temos um ícone à direita, isso vai acontecer. Vou aumentá-lo para 12, tipo quatro pixels aqui. Vamos usar quatro pixels aqui, e isso é bom. Isso é bom. Isso está ótimo. Agora precisamos de mais alguma coisa? Eu acho que isso está ótimo. Sim, 50 pixels. Tudo está ótimo. O texto e o ícone estão alinhados. Se você quiser, vamos chamá-lo de conteúdo e se você quiser mudar esse ritmo. São oito pixels, você pode alterá-lo para outra coisa. E também, você pode ter, então isso é bom. Se eu tentar expandi-lo, vamos tentar testá-lo e expandi-lo. Ok, isso é um problema. Então, agora eu quero que esteja à esquerda. Então, eu vou para Este conteúdo deve estar à esquerda, assim. Esse é o problema do alinhamento e queremos que seja resolvido. Assim. Agora eu testei e você pode ver que é assim que está funcionando. Portanto, você também pode definir um lance mínimo para este. Mas agora, eu queria que tivesse um ícone aqui. Qualquer ícone, você pode usar qualquer ícone, talvez algo assim, e substituí-lo por essa mudança de controle e nossa mudança de comando para substituir. Vamos substituir isso aqui também. Este está ótimo. Além disso, se você quiser ter algo como uma borda ao redor, você também pode ter um traçado, e eu vou ter um traçado cinza bem claro ao redor dele, algo assim, e agora vou copiar as propriedades e colar as operações de propriedades. Mais uma vez, aconteceu. Portanto, temos que alterar novamente o layout para ficar à esquerda e no meio. E também para este, acho que também deveríamos ter isso para a esquerda e para o meio, não assim. Isso é uma pequena mudança agora. Agora, o que temos que fazer é o que está acontecendo. Vamos ver que esse conteúdo é realmente tão grande e a distância é o problema. Aqui está. Talvez, se pudermos reduzi-lo, precisemos ter um layout automático aqui em. Ótimo. Agora isso está corrigido. Além disso, precisamos ter um automático para esse conteúdo, espaçamento automático, que vai ser assim Esse é o uso perfeito do seu campo de etiqueta e do que você quiser criar. E aqui, eu posso ter uma largura mínima para este conjunto de dois mais o mínimo w 200, vamos chamá-lo de 215 Aí está. Lá temos o campo de entrada, e se você quiser criar algo ou formulário ou, sempre tente criar algo assim. Para texto de linha única, sempre vou mostrar que é automático e também para este texto automático. E se você quiser outra linha como uma linha de explicação, e se quiser outra linha como uma linha de explicação, você pode comandar e mover o conteúdo acima. E vamos chamá-lo de aqui, explicamos como escrever seu endereço de e-mail. O texto de ajuda aqui. Vou ter uma cor diferente para este, e também o tamanho. Vou usar 14 regulares. É assim que você realmente cria o layout automático. Você pode ver que isso está acabando, então vou clicar aqui assim, e acho que esse é o elemento de interface de entrada perfeito. Demorou algum tempo, mas é assim que você realmente usa layouts automáticos para criar coisas tão gentis Vamos passar para a próxima lição e ver alguns exemplos. 7. 07 Uso de autolayout para layout e espaçamento em web design: Na lição de hoje, vamos explorar alguns dos exemplos práticos em que usei o layout de ar para espaçamento e gerenciamento de coisas, componentes e layouts no Deixa eu te mostrar essa. Aqui eu tenho o design de uma landing page. Você pode ver que essas são duas variações. Se eu for para esta seção, digamos que temos essa seção. Temos uma linha no topo, temos uma linha. Deixe-me mostrar que esta é a nossa primeira fila. Em seguida, esta é a nossa segunda linha. Temos duas, duas colunas nessa linha e, em seguida, temos a terceira linha. Essa é a terceira fila. Precisamos ter três linhas onde temos espaçamento, podemos gerenciar o espaçamento entre essas duas separadamente e essas duas separadamente Este e este, eles vão ser o mesmo grupo. Vamos colorí-los assim, e esse será um layout automático separado contendo quatro itens. Agora, deixe-me compartilhar com você como eu realmente fiz isso. Vamos ampliar, e isso é muito zoom Ahw Aqui está, e você pode ver que esta é a seção, está em um quadro e depois em um grupo, e acho que não está no layout externo, mas podemos gerenciar isso Esse é o conteúdo. Vídeo à esquerda e vídeo à direita. Você pode ver que você já tem esses. Depois de construí-las, você tem duas colunas, está tudo bem. Você pode criar shift e A. Esse é o quadro, vamos chamá-lo de quadro de vídeo. Vamos remover esse grupo de grupos. É assim que vou gerenciar tudo. Este é um grupo de mastros, então vamos entrar nele, e aqui eu tenho o layout automático interno Se você olhar aqui, verá que tem uma lacuna horizontal de 40 pixels e o layout horizontal está selecionado aqui. É assim que estou gerenciando o espaço entre esses três ou quatro aqui. Esse é o título. Este é o título na parte superior. Novamente, ele está dentro de um layout, e temos duas linhas dentro dele com separação de quatro pixels e está alinhado no meio. Centro superior. É assim que temos três seções e, uma vez que temos essas três seções, podemos selecionar, por exemplo, que temos cabeçalhos, temos um grupo mascarado Este é basicamente nosso grupo mascarado de depoimentos. Mais uma coisa. Nunca pense que você só pode definir automaticamente os layouts automáticos Você também pode usar alguns grupos. Você pode ver aqui. Aqui, eu tenho um grupo no meio, um layout automático na parte superior, e vamos movê-lo na parte superior e isso está no quadro inferior do vídeo. Vou selecionar todos esses três. Novamente, vou pressionar Acho que deveria ter o título e o quadro do vídeo na parte superior. Vou chamá-lo de top frame, e depois vou fazer outro turno A. Tenha todo esse layout d. Vamos chamá-lo de conteúdo para esta seção. Agora você pode ver que é assim que eu espaçaria tudo. Você pode ver agora que tem 24 pixels aqui, se eu entrar nisso, tem um layout automático no meio. Também posso ativar o shift G, minhas grades e notas de coluna Se você não conhece grades de colunas, pode assistir minhas outras aulas e outros vídeos Eu falei muito sobre isso. Esta é uma grade de 12 colunas, e você pode ver como eu separei essas duas. Temos quase uma coluna, uma sarjeta aqui no meio e um pouco mais de espaço Então, se eu quiser controlar o espaço entre esses dois, você pode ver que é 56. Eu posso fazer isso facilmente com layouts automáticos. Se eu quiser controlar o espaço entre este e este, posso ir para o conteúdo superior, e esse é o espaço entre eles. Se eu quiser mudar para 40, eu posso fazer isso. Vamos voltar para 24 porque desenvolvedor agora está desenvolvendo esse design. Algo mais? Às vezes, temos um layout esquerdo e um layout direito. Se tivermos uma, duas, três, novamente, teremos três colunas, três linhas aqui. Um é esse título, segundo é esse parágrafo e o terceiro é essa linha separada, essa linha em negrito aqui. Vamos um pouco. Vamos esconder isso. É assim que você criará um layout automático para esses três. Da mesma forma, temos aqui a seção esquerda, a seção direita e, em seguida, temos quatro espaçadas em um layout automático Novamente, temos um layout interessante por aqui. Todas são três linhas e três colunas. Você pode ver aqui o espaço entre a horizontal e a vertical, ambos espaços que eu posso controlar se eu entrar. Vamos ver. Aqui eu tenho a linha de cartas e as cartas dentro dela. Se eu selecionar uma linha, há uma distância de 30 agora, eu a aumento para 48, posso controlar isso. Também posso controlar o espaçamento entre esses três na parte superior e inferior Essa linha e essa fileira. Isso pode ser controlado a partir daqui 28. Se eu quiser algo como 48, posso mudar isso. É assim que você controla o espaçamento no web design usando Figma e não Vamos passar para a próxima lição. 8. 08 Design de barra de navegação responsivo com layouts Figma Auto: Há mais uma coisa, acho que pensei que deveria criar mais um exercício que é barra de navegação responsiva de um site Na barra na parte superior, temos logotipo, botões, links de texto. Vamos criar isso usando o layout automático no Figma e vamos definir uma largura máxima mínima para isso Então, vamos começar Vamos obter o logotipo de algum lugar. Vamos usar esse logotipo. Por aqui. Eu tenho esse logotipo. Apenas esse logotipo, e vamos fazer com que esse seja o nosso logotipo, e então teremos alguns elementos de texto como sobre nós. Primeiro, criaremos um layout de arte para isso. Essa será uma mudança de link A. Aqui temos. Vamos chamá-lo de link. E agora vamos ter algumas configurações antes de replicá-lo Vou usar 16 pixels nos dois lados. E também vou usar 12 aqui ou talvez 16 na parte superior e inferior, algo assim. Agora temos isso. Você pode mudar a cor para talvez branco. Vamos mantê-lo assim preto. Ok. Então, agora vamos replicar esse comando D, desculpe Eu apenas comando ou controle D para replicá-lo, um, dois, três, quatro Digamos que vamos supor que temos quatro links. Um preço de ônibus. Vamos chamar isso de recursos, depois temos preços e, em seguida, temos o que nos contatar. Ok. Agora vamos selecionar todos eles e pressionar Shift A para colocá-los em um layout automático. Agora, isso vai dobrar o contêiner. Temos um contêiner e, se você quiser, pode ter um link para terminar ou algo parecido. De qualquer forma. Aqui temos o contêiner Link, depois temos o logotipo e, em seguida, podemos ter um botão. Aqui vamos usar um botão. Vamos começar pressionando o botão A para que seja algo assim. Vou usar algo próximo a 16 e 16, e vou usar 16 aqui e 16, vamos usar 20 aqui assim. Vamos adicionar cor de preenchimento a isso e usaremos uma cor azul, azul e branco padrão para o texto. Vamos mudar o texto para talvez meio calvo. Ok. Então, aqui temos o PTN. E vamos usar um raio de canto como 16 ou aqui. Acho que 16 é quatro demais, e vou usar o IUS quatro configurando 60% É assim que toda a minha seção seria. Isso acontece quando estou gravando algo assim. Na verdade, um ladrão está roubando minhas coisas aqui, e ele está voltando ao que estava fazendo de qualquer e ele está voltando ao que estava fazendo de qualquer maneira. Aqui está o logotipo. Vamos chamá-lo de logotipo. Agora, o que eu quero é que esses dois tenham um contêiner porque eu quero manter o espaço entre este e este. Para este, podemos ver. Na verdade, não está funcionando assim. Tem solução. Vamos continuar assim, e esse é o nosso fardo. Vamos criar outro layout para este botão e este. Vamos chamá-lo de links mais botões. Temos um espaçamento de 84. Vamos chamá-lo de automático. Agora eu gostaria de ter uma largura mínima para este. Vamos tentar apertá-lo. Eu acho que não deveria ir além disso. 689. Vou adicionar uma largura mínima de 689690. Vamos continuar assim e eu vou te mostrar o que. Acho que não precisamos de um layout de pedidos aqui. Queremos pelo menos, digamos, 40 pixels em média aqui. Qual era a largura mínima, 690 agora estamos em 90 é um pouco menor. Vamos usar Quais são as larguras agora, 690 Largura mínima, acho que deveria adicionar 2.700, acho que seria 710. Algo parecido com isso. Aqui está. Vou clicar aqui para que ele contenha o tamanho Na verdade, esse botão é redimensionado para caber qualquer conteúdo , ele se encaixa Agora vamos tentar incluir esse logotipo nesta seção. Agora vou selecionar tudo isso, Shift A. Agora você pode ver que está alinhado na parte superior e inferior no meio. Você pode ver. Na verdade, isso é e aqui podemos configurar automaticamente como automático. Agora, se você tentar expandir, que possa ver, agora está se expandindo assim. Também podemos ter algo como uma largura mínima para este, 860 46 Adicione a largura mínima, 850, vamos chamá-la de 850. E, no máximo, não precisamos ter um máximo. Talvez o máximo deva ser algo como 1920. Não nos importamos porque, no momento toda a nossa navegação está funcionando. Então, vamos adicionar uma cor de preenchimento a essa moldura externa. Então essa será a barra de navegação, e vamos ampliá-la E você pode ver que temos um pequeno problema. É necessário adicionar um pouco de acolchoamento ao redor. À esquerda e à direita, precisamos um pouco de preenchimento e também na parte superior e inferior Você pode ver, vamos apertar isso um pouco. Vamos usar 70 64 pixels para o logotipo, e vou acrescentar que vamos ter algum espaço na parte superior e inferior e para a esquerda. Vou adicionar 12 na parte superior e inferior e à esquerda e à direita, vamos adicionar 16. 16 está ótimo. Agora você pode ver que temos uma barra responsiva. Você pode ver. Esse é o peso mínimo e máximo, você pode arrastá-lo o que quiser, mas esse é o peso mínimo para eles. Mais uma coisa é que, se você quiser controlar o espaçamento entre esses contêineres de links, você pode configurá-los como automáticos e podemos abraçar o conteúdo ou encher o Vamos ver como isso realmente age. Acho que não devemos nos preocupar em mudar o layout desta seção Acho que isso foi muito bem espaçado. Acho que o espaço é um pouco demais, então vou ver o doc 24 e aqui está o problema. Você pode ver aqui. Você pode simplesmente clicar aqui e eu acho que neste. Precisamos ter um recipiente para abraços. Não. Na verdade, precisamos ter algo como “Acho que tem uma largura mínima”. É 710. Vamos mover a largura mínima a partir daqui. Agora, o problema está resolvido. Esse é o problema, e acho que você não deve usar a largura mínima para isso. Você pode usar isso para esta, essa barra de navegação maior. Agora ele não está se movendo com o logotipo. Precisamos configurá-lo para automático. E nós vamos para Ok. Sim, precisamos de um peso fixo para este contêiner, o contêiner interno. E queremos que seja 641. Agora vai funcionar. Você pode ver que ainda tem muitos problemas. Não tente corrigir tudo ou você quer que tudo seja responsivo Algumas coisas você precisa ser como um item de largura fixa. Você pode ver aqui. Aqui, esse bloco terá uma largura fixa. Vamos usar uma largura fixa aqui e 641 será o tamanho, e é assim que teremos uma barra de navegação responsiva Então, talvez eu ache que podemos ir um pouco mais longe do que isso. A largura mínima deve ser de 820, eu acho. Pode descer ainda mais para 820, sim. Esta é sua barra de navegação responsiva e essa será sua tarefa. Então é assim que você cria uma barra de navegação. Você também pode ter cantos arredondados para este. Se você quiser. É assim que você cria uma barra de navegação responsiva usando os layouts de mensagens instantâneas Às vezes, os layouts automáticos são um pouco confusos porque você precisa ter elementos que precisam de uma largura fixa Por exemplo, como nesta seção, eu queria ter uma largura fixa porque agora eu sei que esses são quatro links que eu tenho. Vamos adicionar outro link aqui. Agora você pode ver que começou a bagunçar. É assim que você vai encher o recipiente, desculpe, abrace o conteúdo deste recipiente Você pode ver que este é um contêiner com vazamentos e eu quero que o contêiner abrace o conteúdo O conteúdo estava vazando para fora. Eu quero que eles se abraçam por dentro. É assim que fazemos. Agora você pode ver que deve ser um conteúdo enorme e que tudo está resolvido Portanto, o conteúdo do Hug funciona principalmente com os contêineres. Se algo estiver vazando do seu contêiner, qualquer recipiente, basta transformá-lo em conteúdo e ele consertará tudo Esta é sua barra de navegação responsiva no Figma. Agora acho que a largura mínima tem sido o problema. Vamos ver porque temos mais um elemento. Precisamos alterar a largura mínima 870. 870. Essa é uma barra de navegação responsiva É assim que você cria uma barra de navegação responsiva no Figma Espero que você tenha gostado desta lição. Te vejo em breve em outro vídeo, então se cuide, tchau. 9. 09 Crie passo a passo uma seção de web design com layouts automáticos: Agora, neste vídeo, vou levá-lo passo a passo para criar uma seção ou bloco inteiro ou um site ou página de empréstimo apenas para mostrar como eu realmente faço isso Primeiro, vamos selecionar esses dois componentes e copiá-los aqui. Vamos baseá-los aqui. Agora, você pode ver que eu tenho esse título e vamos desagrupar tudo Não precisamos de molduras nem nada. Talvez eu possa simplesmente remover isso. Temos apenas seis caixas aqui, grupo, e novamente, vamos usar grupo. Você pode ver aqui. Vamos desagrupar esse quadro dois. Temos algumas cartas aqui. Um é esse e, novamente, esse e esse. Temos uma linha para esses três. Então, novamente, temos outra linha, que são as próximas cartas aqui. OK. Vamos criar duas linhas apenas alinhando-as desta forma Aqui temos o título. Vamos usar outro texto para que seja um subtítulo. Vamos usar o quant normal e vou mudar a cor para algo um pouco mais claro Aqui temos o subtítulo. Agora, eu penso sobre este cartão, você pode facilmente criar ou produzir este cartão. Nós já fizemos isso. Aqui você pode ver novamente, eu tenho esse cartão e depois tenho esse conteúdo. Se você clicar no cartão, eu tenho 20 pixels ao redor dele, e acho que isso não funciona aqui. De qualquer forma. Para o conteúdo, você pode ver que eu tenho 32, se eu clicar aqui, é entre esses dois elementos. Então, se eu clicar aqui, novamente, temos esse ícone de texto separado e o texto é separado. Se eu quiser controlar o espaçamento entre as camadas de texto, posso fazer isso usando algo aqui Foi assim que eu construí esse cartão inteiro e todos esses cartões. Mais uma coisa é que, depois de criar tudo, todo o seu cartão, se quiser criar um componente a partir dele, você pode fazer isso. Mas antes disso, certifique-se de que seu layout automático seja a capacidade de resposta desse cartão Se você quiser extrandá-lo ou na direção vertical ou tração horizontal, deverá testá-lo Quando tivermos todas essas cartas, eu quero ter primeiro, vou selecionar essas duas. Talvez eu ache que deveria ter essa excitação e, por isso, tudo comi. Vou selecionar esses dois turnos A para ter isso no layout e vou chamá-los de cabeçalho e subtítulo Você pode chamá-lo de título dois, não importa. Agora, vamos selecionar essas três cartas pressionando Shift e clicando nessas cartas e Shift A. E você pode ver que temos 46. Vamos usar 30 porque o espaçamento entre as grades é quase Você pode ter mais espaço se quiser, não importa 36 se quiser. Vamos manter 36. Novamente, vamos criar outra linha selecionando essas três e deslocando A, e aqui temos 42, vamos usar 36. Então, agora temos uma linha. Essa vai ser a primeira fila. Esta será a segunda ou a segunda linha Agora você pode ver que essa nomenclatura também é muito importante, então certifique-se de nomeá-los corretamente Agora temos três linhas, uma, duas e três. espaçamento entre eles, podemos controlar clicando em cada linha , mas também queremos controlar o espaço entre esses elementos Primeiro, vamos combinar essas duas linhas separadamente, deslocar A, e queremos um espaçamento de 56 entre elas ou 48 Vamos usar 48 A. Isso parece muito melhor. Isso vai ser um conteúdo. Isso vai ser o rumo. Agora vamos combinar esses dois turnos A, e esses serão nossos problemas de texto de seção. Vamos chamá-lo de algo assim. Aqui temos uma seção inteira construída com layout automático. Agora, se você quiser dar alguns passos à frente, você pode ter uma cor de preenchimento de, acho que tivemos algo assim, ou isso. Sim, esse. Agora temos uma cor de preenchimento. Mas o que está acontecendo? Não temos nenhum preenchimento ou espaçamento ao redor dela O que eu vou fazer é ter um acolchoamento de cerca de 130 em ambos os lados E o que está acontecendo? Não. O que é isso? Pode conter conteúdo. Sim. Acho que isso estava acontecendo. Temos 120. Acho que você precisa selecioná-lo para incluir o conteúdo interno e acho que, por dentro, usaremos o conteúdo de preenchimento e preenchimento Ele vai encher o recipiente e o recipiente fora do conteúdo, ele abraça o conteúdo Na verdade, abraço significa que o usamos nos recipientes externos para abraçar o conteúdo dentro deles Porque acho que não toquei no conceito, então é assim que o abraço funciona OK. Então, se algo se apertar, o abraço será apertado, algo que você sabe que aumenta, vai OK. Então, temos um abraço por dentro e, novamente, por dentro, nos saciamos As fileiras internas estão cheias, o recipiente externo tem abraço e este também tem abraço Abraço para a seção. 120, eu me sentei aqui. E na parte superior e inferior, eu vou ter 60 pés na parte superior e inferior, vamos 60 pés Vamos usar o peso aqui. Às vezes eu uso 80 pixels para o. Esta é toda a nossa seção de web design ou desenvolvimento ou o que quer que você esteja fazendo. Você pode criar essa seção inteira apenas com o layout automático. Você pode ver aqui. Eu tenho controlado tudo. Você pode ver se aqui temos o espaçamento entre 80, acho que 80 é demais, então estou confundindo seis aqui assim OK. Então isso é perfeito. Agora, essa será sua tarefa no próximo vídeo. Então, espero que você tenha aprendido como eu realmente crio espaçamento em torno de uma seção ou bloco inteiro em um web design Assim, você pode usar a mesma técnica que usei para gerenciar o espaçamento para gerenciar o layout, para criar seções inteiras com base em layouts automáticos Nem tudo deve ser incluído em um layout automático , então deixe-me mostrar um exemplo. Aqui temos outra seção e você pode ver que não estou usando o layout automático ou esta seção. Eu tenho um grupo aqui. Você pode ver que isso é basicamente um grupo porque esses dois estavam um pouco na parte inferior. Se eu tentar usar o layout automático entre esses três, deixe-me mostrar. Eles se alinharão automaticamente na parte superior. Isso não é o que eu quero. Eu apenas os mantive em grupos. Isso é basicamente um layout automático porque eles estavam na mesma direção e esse é basicamente um papel perfeito. Foi assim que eu realmente usei o layout automático e tento usar grupos quando não quero que a posição das coisas se mova com os layouts automáticos Da mesma forma, você pode ver que eu tenho layouts automáticos dentro deles, mas não tudo Não funciona para tudo. Então é assim que os layouts automáticos devem ser usados. Espero que você tenha gostado desse vídeo. Vamos passar para a próxima lição e aprender mais sobre layouts automáticos Cuide-se. 10. 10 autolayouts e componentes no Figma: Quando você está tentando criar um componente a partir de um layout automático. Certifique-se de que as partes também sejam um componente. Por exemplo, como se tivéssemos um botão aqui. Primeiro, você precisa criar um componente que será esse botão. Vou arrastá-lo para fora. Vamos criar dois estados para este. Botão, e eu vou ter um botão cinza acinzentado aqui, e vamos chamá-lo de marrom secundário e BTN Selecione os dois e clicaremos aqui, criaremos o conjunto de componentes, e aqui temos o conjunto de componentes. Depois de clicarmos nele, vamos chamá-lo de BTN, e esse será o principal e esse será o secundário Você pode ver aqui que temos a propriedade da variante. Vou clicar aqui. Vamos chamar o estilo BTN. Temos o estilo BTN primário e vamos chamá-lo de primário, e vamos chamá-lo de secundário Agora temos esse componente e, em vez de usar um layout a, algo aqui, vou para ativos, e temos isso aqui. Vamos arrastar isso para o fim. Isso é o que está acontecendo aqui. Eu quero que esse padrão esteja fora disso. Este é o meu padrão e esse é o meu componente. Agora, por que eu uso o componente porque eu posso mudar qualquer coisa aqui para primário, secundário, o que eu quiser. Da mesma forma, você também pode ter algo assim. Você também pode criar componentes e diferentes variantes deste, como Howard e Link normal e algo parecido, e você pode substituí-lo Da mesma forma, você pode criar componentes para o logotipo, logotipo Na bar, logotipo maior, logotipo médio, logotipo pequeno, coisas assim. Você pode substituí-los ou alternar para aqueles aqui. Esta é apenas uma fita simples que, quando você confirma, sabe que o componente ou o layout do pedido estão perfeitos. Você não precisa mudar nada, então você pode passar para isso. Por exemplo, se eu quiser alterar esse botão, posso ir até aqui e fazer algo como eu quero alterar as configurações. Quatro, você pode ver que pode ser refletido facilmente aqui. Da mesma forma, eu posso ter 24 aqui. Então é assim que você realmente usa componentes em dois layouts automáticos Você também pode criar um componente inteiro para este. Se quiser criar um componente, você pode criar um componente da barra dois do NAB Mas componentes internos, elementos, eles também devem ser um componente, para que você possa substituir facilmente os componentes internos ou alterar seus estados. É assim que todos esses componentes e layouts automáticos realmente funcionam juntos Esta será minha última aula para esta sessão de vídeo e este curso. Espero que você tenha aprendido muito sobre layouts automáticos e variantes do Figma e como usar componentes e layouts automáticos, como usar layouts automáticos usando espaçamento e tudo Fico feliz por termos feito essa jornada juntos, aprendendo juntos e aprendendo muito sobre layouts automáticos e como criar coisas diferentes usando layouts automáticos no Eu acho que é isso. Isso vai até o fim da jornada ou, para alguns de vocês, seria o início da jornada no design. Portanto, se você tiver algum projeto ou design de site de design, design página de empréstimo, design de produto SAS, projetos de design de experiência do usuário, você pode colaborar comigo Alguns dos meus alunos estavam na verdade criando startups e, na verdade entraram em contato comigo e me contrataram para projetar sua estratégia de execução, design de UX e interfaces de usuário para seus aplicativos SAS e páginas de empréstimo Então você pode entrar em contato comigo. Você pode me seguir no Instagram. Você pode entrar em contato comigo. Você também pode escrever meu nome no Google, Muhammad SN Purves, meu nome, e você pode encontrar as informações de contato sobre Eu tenho uma agência de design de tecnologia chamada Pro design tech PRO Prosign tech Este é o meu site. Se você quiser visitar, você sempre pode visitar meu site de design de tecnologia e entrar em contato comigo de lá se tiver algum projeto em mente. Isso é tudo. Se você tiver alguma dúvida, coisa que queira me perguntar, você também pode ver meus outros cursos. Há muitos cursos sobre design de UI e UX. Você pode aprendê-los e espero te ver em breve, então cuide-se, Bey, e até breve com a criação de designs. 11. 01 Assignment Crie um conjunto de botões de butões de Figma: Agora, esta é a hora de sua primeira tarefa. Então, o que você vai me dar é que você quer me mostrar algo assim. Você pode criar um conjunto de botões e esses botões devem ter um layout automático, e você pode empilhá-los assim dentro de um contêiner de botões Você pode tê-los assim. O layout deve ser algo assim, ou você pode colocá-los automaticamente aqui e eles se espaçarão automaticamente, então você pode ter algo assim. Quero que sua primeira tarefa seja um contêiner de botões com três botões Mostre-me e compartilhe comigo a imagem de que foi assim que eu criei isso e eu comentarei e compartilharei meus comentários. Esta é sua primeira tarefa. Vamos aprender mais. 12. 02 Assignment Crie um cartão de interface de usuário de autolayout com capacidade de resposta: Agora, aqui está a hora de sua segunda tarefa, que é criar uma carta como essa e me mostrar como você construiu, o espaçamento entre elas, como você as administrou Este é o cartão que eu quero que você crie. Deve ser responsivo. compartilhe comigo a captura de tela ou o arquivo Figma Você pode compartilhar aqui, clicar aqui e definir a configuração para visualização. Acho melhor você também compartilhar a captura de tela, porque às vezes não tenho tempo de olhar o arquivo Figma e compartilhar sua captura esse é o cartão que criei usando layouts automáticos Assim, você também pode compartilhar a captura de tela desta forma. Clique no cartão e compartilhe a captura de tela inteira, como o painel de layout automático dois, para que eu possa ver o que você fez Esta é sua próxima tarefa de criar uma placa de interface usando layouts automáticos Vamos começar a criar e vemos em breve em outra aula. Vamos aprender algo mais. 13. 03 Assignment Crie uma interface do usuário com fundo posicionado absoluto: Agora, sua próxima tarefa é criar um cartão responsivo, que tenha algum elemento absolutamente posicionado, que tenha algum elemento absolutamente posicionado como eu vi neste Você pode criar algo assim para criar o que quiser. Cartão com posição absoluta. Essa é a sua tarefa. Mostre-me a foto disso e certifique-se de testar se é fácil, pode apertar ou não capacidade de resposta é essencial. Mostre-me a captura de tela Você também pode compartilhar comigo a captura de tela inteira ou também pode compartilhar comigo a captura de tela do arquivo de presente Acho que existem ferramentas que podem gravar capturas de tela animadas de presentes Você pode encontrar on-line e compartilhar o GIF ou o arquivo do presente. É isso mesmo. Compartilhe comigo sua tarefa, e eu adoraria revisá-la Nos vemos em breve na próxima aula e algo mais. 14. 04 Assignment Crie um campo de entrada responsivo: Agora, sua próxima tarefa é criar um elemento de entrada, elemento de entrada ou um campo com o ícone e o rótulo adequados e tudo mais, e ele deve ser responsivo Ele deve ser responsivo usando a largura mínima. Você também pode definir a largura máxima e vamos definir a largura máxima para, como se tivéssemos 321 Vou usar uma largura de 32320. Aqui eu tenho o elemento de entrada onde tenho peso Mx e Mw Você precisa usar a largura máxima, a largura mínima e a largura máxima para esse elemento Também deve ser responsivo. Você pode compartilhar a captura de tela. Você também pode compartilhar a captura de tela animada, a captura presente e a captura de tela do GIF 15. 05 Crie uma seção completa em destaque do site com Autolayout: Agora, chegou a hora de outra tarefa, e você precisa criar uma seção inteira usando layouts automáticos, usando layouts automáticos compartilhar sua captura de tela e compartilhar arquivo de presente passando o mouse assim para que eu possa ver o que você fez e como criou esse você fez e como Crie uma seção inteira com o espaçamento adequado na parte superior, inferior, esquerda e direita e, dentro das seções, layout automático Esta é sua próxima tarefa. Eu tenho algo parecido com isso. S. 16. 06 Barra de navegação responsiva à Assignment no autolayout Figma: I. Agora, sua tarefa é criar ou me mostrar algo assim, barra de navegação, uma barra de navegação responsiva com largura mínima usando Então isso é o que eu criei ou quem criou na última lição, e é isso que você vai me mostrar. E você também pode compartilhar uma captura de tela clicando aqui E você também pode compartilhar essa captura de tela inteira para que eu possa ver como seus layouts de arte foram dispostos aqui no painel da camada esquerda, e também quais são as configurações que você está usando aqui Assim, você pode me mostrar a captura de tela de toda a tela para que eu tenha uma ideia melhor do que você está fazendo Se você tiver algum problema, faça as perguntas, e estou ansioso para ver sua tarefa agora. Comece a projetar e comece a construir, e espero que você entenda esse conceito complexo de layouts automáticos Vamos seguir em frente e algo mais.