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.