Transcrições
1. Apresentação: Olá e bem-vindo a
esta aula divertida sobre como aprender Figma
com novos objetivos e ganhos Olá, sou Shivangi,
seu artista criativo e designer, estou aqui
para ajudá-lo a aprender diferentes conceitos e
técnicas de design de uma forma divertida
e fácil Hoje, nesta aula, criaremos uma rolagem de loop
infinito, animação de
excitação,
e também
exploraremos formas e lugares de
usá-la em nossos projetos. Além disso, se você está me
seguindo aqui, talvez também tenha visto outros projetos divertidos
que criamos. Então, seja uma
criação verde, um elemento , um site
ou qualquer outra coisa
, se não, confira
no perfil e vamos começar esta aula divertida com um processo completo
passo a passo.
2. Como aproveitar ao máximo este curso: Ei, antes de começar
a sessão de criação de
nossa seção do site com a animação de
rolagem em loop infinito Figma, gostaria que você
parasse e
adicionasse uma ideia básica de como
tirar o melhor proveito dessa classe Eu gostaria de acrescentar que esta não
é uma aula como
simplesmente abrir seu Figma, começar a criar um tipo específico de efeito e exportar e compartilhar
links e boom Apenas saia e
esqueça isso. Não, um grande não. Por outro lado,
essa aula não
trata de um projeto
totalmente individual É a chave, a ideia, o ativo, a ideia de
geração de componentes, o conceito que você pode incorporar a qualquer momento
em seu projeto no futuro,
quantas vezes quiser Primeiro, a rolagem em loop
infinito, como esse nome sugere, é infinita, mas, como loop, significa que há um número
restrito de itens no loop. Pode ser qualquer um, quatro, cinco, seis, oito, dez, é subcorte A ideia básica por trás do loop
infinito é
criar uma sensação enriquecida com as cargas e
cargas para escolher Talvez, digamos, você possa
usar programas, filmes, seus produtos ou talvez seus projetos de trabalho para se mostrar nesse ciclo
infinito Então, prepare-se com isso. Enquanto
falo sobre o que é,
você também pode reservar um
tempo para se preparar com a equipe que deseja
inserir na seção de loop Portanto, há muitas instâncias para usar esse ativo como chave. Portanto, antes de começar, aqui estão alguns
exemplos em que você pode usar esse ativo como um
ponto-chave em qualquer um de seus projetos web em andamento
ou talvez em projetos futuros. A única maneira é usar o plano de fundo
visual ou uma série de
imagens com rolagem contínua para criar uma sensação cativante e imersiva de
alta qualidade para
seus sites de portfólio, sensação cativante e imersiva de
alta qualidade para digamos,
que são importantes Eles proporcionarão uma
experiência enriquecedora de,
por exemplo, terem feito muito
trabalho,
mostrando-o de uma forma tão suave e Uma lista com
rolagem horizontal ou vertical clientes, logotipos ou
marcas E isso não é apenas
criar um loop, mas criar
confiança em você,
ou você administra com uma presença
tão boa no portfólio
de clientes ou negócios de marcas, um tipo de plano de
fundo de rolagem
infinita sutil e lento tipo de plano de
fundo de rolagem
infinita que adiciona um elemento dinâmico sem
distrair próxima é uma experiência de
carrossel que a imagem aparece
automaticamente em um loop contínuo e uma abordagem mais artística
para apresentar seu portfólio Com todas essas etapas
e casos de uso dos ativos que
criaremos para uso em seus projetos
futuros, vamos começar o
processo para criar um.
3. Criando o componente: Em primeiro lugar, abra tela do Figma e
faça um novo projeto E aqui, o primeiro passo é criar uma
moldura com a qual trabalhar. Para adicionar isso, pressione o atalho F e arraste e crie uma
moldura de tamanho personalizado em qualquer lugar da tela Eu gostaria que fosse do tamanho retrato Isso seria bom
o suficiente para mim. Você pode usar essas
mesmas dimensões, como 35 por 293 pixels,
ou depende de você Quero usar essa moldura como suporte
de imagem para
as imagens causais O próximo passo é adicionar uma camada de
preenchimento de imagem a esse quadro. Então, na
seção de design abaixo do filme, clique na cor e
altere-a para preenchimento de imagem e escolha a imagem do dispositivo em que você a tem,
como aqui, esta. Então, basta clicar e arrastar, ajustá-lo conforme sua escolha. O que para mim no quadro
onde está esta. Então, uma vez feito isso, vamos duplicar esse quadro e mudar o filme da imagem para outra
imagem do dispositivo Portanto, continue adicionando mais e mais molduras e
personalizando o preenchimento da imagem Eu tenho essas imagens
geradas por IA. Você pode ter qualquer
coisa, como pôster de filme, fotografias
temáticas
ou
obras de seu portfólio , basta inserir
cada quadro Então, depende de você. E também, como dica, digamos que você tenha uma
proporção diferente de imagem. Uma estava na paisagem,
agora está no retrato. Então veja como
isso parece desproporcional. Como corrigi-lo. Simples. Basta deletar este filme por completo. Não substitua a coisa, a imagem
pela anterior, pois você a exclui
completamente e adiciona uma nova imagem ao
filme. Agora está bom. Agora, a próxima
etapa muito importante é duplicar todo
esse conjunto de quadros para
tornar cada um uma nova cópia Para isso, selecione todos
os quadros que
você criou aqui
juntos desta forma. Estou tendo seis quadros. Então, estou selecionando todos eles. Você pode fazer isso no painel de camadas ou
na área de trabalho arrastando
e selecionando a opção geral Agora segure o nome do quadro, segure a tecla Shift
no teclado, basta arrastá-los e posicioná-los do outro
lado, lado a lado de
todo aquele conjunto, agora um novo conjunto ao lado. OK. Claro. Está tudo em uma linha. Você pode segurar a tecla Shift e
arrastá-la para que fique alinhada corretamente Então, agora selecione todos
os quadros novamente, como se fossem seis, agora são
12. É o dobro disso. Cante se você tiver quatro,
serão oito, se você tiver dez, serão 20. E assim por diante. Então, basta selecionar
todos eles juntos. Clique com o botão direito do mouse e selecione a seleção de
quadros. Aqui você pode ver
no painel de camadas que todas as molduras agora estão
sob uma moldura grande. Então, selecione a moldura grande, arraste
e ajuste-a com a
metade do conjunto de molduras, como se fosse
antes de termos 12 quadros. Então, agora eu quero que essa moldura
grande seja limitada a seis, metade de 12, seis Então, agora, na seção de design, confira esse conteúdo do
clipe. Vejo que tudo
dentro da moldura agora
está preso sob
a grande borda da moldura Então, agora é hora de fazer mais
alguns ajustes. Além disso,
ajuste-os no layout automático. Para isso, selecione todas
as molduras internas, não a moldura maior,
apenas as molduras que estão dentro dessa moldura grande. OK. Basta selecioná-los e, no painel de design,
aqui está escrito Layout automático, clique nele e está
no formato de layout automático Então, basta ver a
partir do painel de camadas. É o que selecionamos. Agora é novamente um
grande grupo sob aquele grupo maior
que já tínhamos. Há outro grupo que
reúne todo esse conteúdo porque
fizemos o layout automático. Então, basta ajustar a lacuna para que cada elemento tenha a mesma
quantidade de espaço entre eles. Então, agora segure o treinamento de
conversação e selecione esse ícone de botão no painel de design para
torná-lo um componente. Agora estamos prontos para passar
para a próxima lição, onde projetaremos toda a
nossa página da web.
4. Projete sua página da web: Agora vamos começar a projetar
nossa maior tela. Para isso, escolha um tamanho de moldura de
mesa e ajuste o chão até a cor sólida de sua escolha. Arraste e posicione os ativos
do painel de ativos aqui na
tela e posicione-os com o dragão. E vamos adicionar rapidamente algum texto como título
para a página da web, talvez o
nome da sua marca ou qualquer coisa Você pode ajustar e reproduzir a
cor e o tamanho da fonte. Estou feliz com algo
assim, mantendo-o aqui. Agora é hora de criar
mais alguns botões como um estilo minu,
para a área superior Torná-la uma fonte
menor e renomear
o botão nans, talvez uma página inicial e assim por diante Depende de você o que
você deseja adicionar lá. Ajuste o centro do quadro
a partir do layout, defina-o como layout automático. No mínimo, eu simplesmente
cultivo todos juntos
e, a partir do layout automático, simplesmente
clico nele e ajusto a lacuna
que fizemos anteriormente A mesma coisa por aqui. Agora, basta arrastar a área de texto do título, ajustar o tamanho da fonte e
dar um bom slogan a ela Eu gostaria de mais
texto e um botão na parte inferior
do cabeçalho
completo do site. E para o plano de fundo do botão, vamos criar um
retângulo rápido e recolorí-lo Também chamando as bordas. Com razão, pode enviar para trás. Agora, você também pode agrupar
o botão, como texto e plano de fundo
, para que, quando pressionarmos, os
mantenhamos juntos como um só. Estou feliz com a aparência
da página inicial como um todo, então você está livre para
explorar e criar algo ou outro de acordo com sua escolha ou tema do projeto Além disso, gostaria de explorar no fundo coisas
como um preenchimento sólido ou um preenchimento de imagem ou o passar do mouse sobre a imagem
ou apenas um preenchimento radiante Então, para isso,
altere-o adequadamente. E uma vez feito isso, estamos prontos
para a próxima aula.
5. Composição e protótipos do seu web layout: Para a próxima etapa, vamos selecionar o componente no painel de design aqui
e adicionar
o ícone de diamante. Toque nele para criar uma variante
completa do design. Aqui, no painel de camadas, selecione toda a camada
interna abaixo dela. Então, a camada variante morre. Mantenha pressionada a tecla shift aqui, segure a
tecla shift e arraste-a para o lado. Certifique-se de que não
saia do quadro
e continue rolando até obter o mesmo conjunto de
imagens repetidas aqui
embaixo, como a que está abaixo de
um, dois, abaixo de dois, mas esse é o
segundo conjunto aqui Então, aqui está um passo muito
importante. É para garantir que o
alinhamento esteja claro. Para isso, use o
atalho de régua Shift e arraste e
posicione sua régua na tela
e use as setas de navegação,
aumente o zoom e use as setas de
navegação para arrastar e ponta a ponta, você deve combinar a de
cima com esta, como estou fazendo na tela agora. Então, espero que você esteja claro sobre isso. Agora use o
painel do protótipo e arraste e conecte o
componente padrão à variante dois E nas configurações, defina-a para após um
tempo de atraso de um milissegundo, animação para animação inteligente, e o caminho é corte linear
seco com a
duração de 10.000 Sim. E da mesma forma, arraste e conecte a variante
dois ao padrão, as seguintes configurações
, após atraso de um milissegundo
e uma animação instantânea Portanto, essa é a vantagem
do componente: se alterarmos alguma coisa no componente a
qualquer momento em nosso projeto, ela será aplicada rapidamente às
instâncias do nosso projeto Agora vamos revisar nossa página inicial. Sim, nós o temos aqui. Espero que você tenha obtido o mesmo resultado, e agora é
hora do nível dois, que é o pergaminho avançado. Então, vamos explorar isso
na próxima lição.
6. avançada: Uma
rolagem simultânea que rola na direção
oposta à que tínhamos anteriormente Vamos voltar
ao esquema Figma. Duplique todo o conjunto de
componentes e isso criará
um novo componente Você pode renomeá-los
aqui, se desejar. Estou rolando um pergaminho dois para
facilitar a escolha. Isso tornará o processo
de design mais fácil para você encontrá-lo a
qualquer momento Agora, o truque é
arrastar e ajustar o quadro inteiro no padrão da rolagem dois e, como
estou fazendo aqui, basta rolar e ajustar para o lado oposto desta forma E para a variante dois
do componente de rolagem, você a arrasta de volta
na direção oposta e
chega à outra extremidade. Claro, verifique se está bem alinhado usando a régua
que fizemos anteriormente Portanto, certifique-se de que tudo esteja alinhado dessa maneira
específica Espero que você tenha
entendido essa etapa. Se não, ou se houver alguma confusão, faça uma pausa e pratique
junto com seu projeto E se você ainda estiver
preso em algum lugar, avise-me na guia de
discussão ou faça
o upload da captura de tela
desse erro na guia do projeto
e me avise, ficarei feliz
em ajudá-lo Ou se tudo bem, vamos continuar com a próxima etapa, que é colocar esse novo
componente em nossa página da web, e por isso, como
não quero atrapalhar
o anterior, farei uma
cópia dessa página da web, ajustando e colocando
o novo Faça alguns ajustes
se
quiser e agora está pronto. Vamos analisá-lo.
Sim, nós fizemos isso. Fizemos tudo com bastante antecedência. Espero que você tenha acertado também. Espero que você tenha gostado da
aula e de
todo o processo comigo, caso tenha
achado esta aula útil, envolvente e tenha aprendido algo muito
bom com ela. Compartilhe suas
palavras nas resenhas porque isso não
torna meu dia mais feliz, mas também me motiva
a criar novos projetos e
habilidades para explorar Além disso, esperando ansiosamente por
seus projetos criativos. Então, basta fazer uma
captura de tela do seu trabalho, exportá-la para JPG ou simplesmente
gravá-la na tela e enviá-la para a seção
do projeto para compartilhar suas lindas criações com
a grande família criativa Além disso, se você achar essa aula envolvente e
quiser explorar mais, siga-me aqui para se manter atualizado.
Shivangi Dubey, Graphic Designer | Web Designer | Artist
