Transcrições
1. Apresentação: Ei, e bem-vindo a
esta aula empolgante sobre como criar uma tela de
boas-vindas animada, toda Figma Esta é uma extensão
da série de ganhar Figma com os projetos criativos de
que tudo o que você precisa
é do seu dispositivo, conta
Figma e toda essa aula, e
você está pronto para começar Esta aula
será totalmente
intuitiva , com um guia passo a
passo durante todo
o processo Além disso, se você me
acompanhar aqui, talvez tenha visto
outras coisas divertidas que criamos
juntos em outras aulas. Se não,
confira porque ajudar
você a aprender e criar coisas criativas e
úteis Figma and design é minha missão Então, vamos começar com
esse projeto divertido.
2. Recursos: Antes de nos
aprofundarmos na figma, vamos dar um passo atrás e
preparar nossos recursos da maneira certa Para isso, esse tipo de animação e outras coisas que
vamos fazer, precisamos de uma ilustração
vetorial adequada
e, provavelmente, de uma ilustração em camadas Então, como fazer isso da maneira certa? Há duas
opções, opção 1 crie tudo
sozinho do zero, como uma ilustração completa
com uma boa ferramenta de ilustração ,
como talvez Procreate, Illustrator
ou Canva ou qualquer
outra coisa em que Ou com a segunda opção que temos é encontrar os recursos que outros designers já
enviaram ou criaram a partir dos sites de
estoque. Portanto, se você já é
designer ou tem sua própria ideia de
ilustração ou ilustração pronta para usar, escolha a opção um
ou
então você pode optar
pela opção dois. Para isso, eu gostaria
de acessar freepik.com, ou você também pode usar estoque
vetorial ou qualquer coisa
que Para este projeto, vou
ficar com o porco grátis. E aqui, rapidamente, você pode pesquisar o que
deseja animar,
qual cena, como
talvez uma cena de floresta ou um espaço urbano,
natureza ou pôr do sol, qualquer coisa que você tenha em mente Basta pesquisar e escrever o termo e
depois a ilustração. Por exemplo, aqui estou fazendo uma ilustração
da floresta. Então, você vê que existem
muitas opções
e, a partir dos filtros, você também pode
filtrar facilmente aqui até o recurso baseado em IA
ou não baseado em IA para ser gratuito ou premium,
o que você escolher. Mas o essencial aqui é selecionar o tipo de arquivo. Certifique-se de
selecioná-lo para SwiGi. Por quê? Porque o Figma é compatível com o formato SwigFle para manter toda a camada da
ilustração no Portanto, se você optar pela
Opção 1 que
discutimos anteriormente, renunciando a tudo
do zero, certifique-se salvar
sua criação
no formato SwiGi Para que o Figma possa ler facilmente. Você pode simplesmente baixar
o arquivo vetorial, compactado ou
apenas o Sug, arrastá-lo
e abri-lo na tela do Figma
e pronto Aqui você vê com que rapidez e facilidade nossa ilustração vetorial
está pronta para trabalhar. Além disso, você pode ainda mais
nas camadas que
deseja trabalhar em seu quadro ou
se deseja excluí-lo, ou até mesmo aumentar camadas
diferentes em uma para que seja melhor
navegável que seja melhor
navegável e fácil de entender. E estamos prontos para trabalhar no futuro. Além disso, se você tiver
um arquivo AI ou EPS e quiser usá-lo
em seu projeto, também tenho algumas
dicas para você.
3. Configure sua arte: Veja, esta é a obra de arte em
que você quer trabalhar. Em seguida, isso é aplicado
atualmente
e agrupado em um grande
grupo sob uma máscara Portanto, temos que reorganizá-la novamente para selecionar a obra de arte
e, nas propriedades, tocar nessa máscara de liberação Agora é hora de
reagrupá-los novamente para que sejam necessários no formato
de camada adequado Então, um pode ser o
primeiro plano, o outro será o plano de fundo, e também podemos usar elementos
diferentes, talvez um grupo de montanhas, um seja o sol e assim por diante Então, arraste e selecione o elemento necessário e
agrupe-os. Agora você pode ver alguns elementos fora do RPO,
como lidar com eles Crie um
atalho retangular N e
verifique se ele está dentro da prancheta pelas laterais
da prancheta pelas laterais
da Deve estar nele e apenas segurando a tecla Shift
no teclado Selecione o grupo de vetores. Quero recortar essa coisa de quatro bordas
primeiro, selecionando a
forma do retângulo e o grupo vetorial
e pressionando a sein de controle para
recortá-la Verifique se a
forma do retângulo está na parte superior. A forma na
qual queremos recortar, não a coisa vetorial, a forma, ela deve estar na parte superior, o
vetor deve estar abaixo dela. Claro. Então, agora, da mesma forma, recorte todos os outros elementos
que estão fora da tela. Eu gosto dessa montanha. Dessa forma,
limpamos nosso arquivo vetorial e eliminamos qualquer camada extra
que tínhamos com antecedência. Agora você tem duas opções para exportar essa
obra de arte para o Figma Opção 1, arraste e coloque
cada elemento individualmente ativos exportados aqui na tela e exporte-os como PNG
ou SVG. Depende de você. Opção dois, salve
todo o seu arquivo de design como SVG
por meio de turnos de cabeçalho, e estamos prontos para importar esse novo arquivo
SVG Além disso, tenho algumas
ideias de arte prontas para usar arquivos
SVG enviados como arquivo de recurso junto com essa classe na guia de recursos do Project
Friend Você pode baixar
esses dois e se preparar para
a próxima etapa.
4. Dicas para melhorar seu fluxo de trabalho: Pouco antes de terminarmos esta divertida sessão criativa de
design com você e
eu, gostaria de
adicionar algumas dicas e
uma rápida recapitulação do design
para que você mantenha algumas
coisas extremamente importantes em ordem, para que você as mantenha à mão e rapidamente para
aplicá-las a qualquer aplicá-las Sempre que você estiver trabalhando
na Aven nesses projetos, a primeira parte
que fizemos aqui agora é organizar
e depois
reorganizar e editar nosso vetor uma maneira específica para manter as coisas menos difíceis
e livres de problemas, enquanto Se você é designer
ou ilustrador, esta parte é especialmente para
você, pois essas são algumas
das edições básicas e forma
profissional de
mostrar Que você
forneça ou gerencie sua criação para outro colega designer ou desenvolvedor para o trabalho futuro. Como designer, já enfrentei esse segmento
específico da indústria muitas vezes, seja eu entregando meu trabalho
ilustrado para outras pessoas, ou talvez designer,
talvez animador, ou se forem outros designers
entregando seus trabalhos para Tenho algumas práticas recomendadas
para você seguir
ao criar ou
apenas dar um toque final ou dar o
toque final ao seu projeto. Vá lá, mantenha suas camadas agrupadas e limpas o
máximo possível Como limpar em termos
de elementos de design, rótulos de
design em uma tela, os vetores que você
está criando na tela Além disso, limpo significa que deve ser rotulado de
forma limpa,
particularmente Que tipo de trabalho existe? Uma camada tem montanha, ela deve ser rotulada como montanha Isso não só parece bom, mas também ajuda, compreensão
e navegação
rápidas. Então, a dica número dois é
agrupá-la com antecedência. Caso contrário, as camadas
abertas, uma por uma podem parecer muito fraudulentas
ou com spam e realmente dar uma má impressão
sobre você como designer ou ilustrador e resultar na
perda de clientes e projetos
no perda de clientes e projetos Então, uma grande economia disso. dica número três é garantir que seu design esteja bem orientado
em termos de ordem das camadas. Por exemplo, a melhor maneira, na
minha opinião, é manter as camadas na parte superior, da frente para
trás, em ordem. Você pode dizer: isso
não é lógico? Isso não é muito
óbvio? Sim, é. Mas às vezes, especialmente quando trata de uma ilustração em camadas, falando de alguns
elementos que não são muito grandes, para ter certeza se estão
na frente da bolsa e onde não haverá nenhum número, pode ser difícil
decidir a ordem
em camadas Assim que terminar, verifique novamente seu pedido
e, em seguida, você estará pronto para seguir
as próximas etapas
5. Como animar: nível básico: Vamos abrir nossa tela Figma
e adicionar um novo projeto. E a primeira coisa em primeiro
lugar, o DextraFrame. Então, basta adicionar um
atalho de quadro e selecionar, no design do conjunto
livre, o DextraFrame com
o qual trabalhar Ou você também pode usar um quadro de
vídeo, como a dimensão de 18 20
por 1920 por 1080 pixels Então, agora arraste e importe
seu arquivo SIG neste. Aqui está outra moldura. Ele é importado como
outro quadro completo. Arraste e coloque essa moldura, essa moldura SVG dentro da moldura de trabalho e segure e arraste
a partir dos cantos para ajustar a arte de forma que ela
cubra toda a moldura em troposão. A próxima etapa
é preparar exemplo, agora, se
você expandir sua camada, você enquadra, aquele quadro SVG Você verá algumas camadas
com nomes aleatórios, e é difícil
lembrar qual camada contém
qual tipo de vetor. Então, para
facilitar esse processo, para que possamos navegar mais a qualquer momento com facilidade, sem
adivinhar o Então, basta renomear cada uma das camadas corretamente: montanha
é a montanha, quatro rodadas são o
primeiro plano e Ou mesmo que você tenha algumas camadas que não deseja agora, você pode simplesmente excluí-las ou
agrupá-las em outra,
você pode fazer isso. Além disso, gostaria de desagrupar todo
esse grupo SVG e seguida, renomear rudemente Uma vez feito isso, você está pronto para avançar para a próxima lição e começar
nossa primeira animação. Para esse primeiro estilo, duplique
rapidamente
o quadro inteiro E no primeiro quadro, selecione todos os elementos internos mantenha pressionada a tecla Shift e
arraste para torná-la enorme como um
efeito de zoom e ajuste-a
na tela como Agora, no painel do protótipo, selecione o primeiro quadro e
conecte-o ao segundo quadro Defina a configuração do gatilho como
após o atraso com um tempo de atraso um milissegundo e o estilo de
animação como uma animação inteligente
com facilidade de entrada e saída Descanse, as coisas estão bem. Agora vamos
analisá-lo. Aqui estamos. Agora, vamos dar um passo à frente disso
na próxima lição.
6. Estilo avançado de animação e dicas finais: De volta à Figma. Para
essa coisa avançada, faça duas novas cópias
do segundo quadro. E neste, vamos tocar camadas, tocar e
ajustar cada elemento
individualmente no quadro Além disso, lembre-se, no painel
de camadas, de que cada elemento está
dentro da moldura correta. exemplo, quando arrastamos, ele não sai. Ele permanece dentro desse quadro
específico, ou você pode simplesmente fazer isso
no painel de camadas para garantir que
tudo esteja no lugar. E amplie o primeiro plano e as montanhas para obter um bom
efeito de zoom Agora que estamos prontos
com os dois quadros, é hora de
fazer o protótipo novamente. é hora de
fazer o protótipo novamente. Então, para isso, selecione este. A coisa que ajustamos. A moldura que
ajustamos para
isso é chamada de dex de quatro, e vamos conectar
à próxima, a próxima a ela aqui. Agora veja as
configurações de interação como após o atraso, com o tempo de atraso de
um milissegundo e tudo estará pronto Agora eu quero revelar o
texto também, mais um passo. Para isso, aqui
no segundo quadro, adicione uma área de texto
e adicione um pouco de texto. Digamos que, neste exemplo, eu queira dizer bom
dia, sol, desenhe-a com o
tipo de fonte e a cor de sua escolha e torne-a grande o suficiente para a moldura completa Agora, para esse quadro, não
quero ficar visível
atrás das montanhas,
colocando o reprodutor de texto atrás das montanhas
no painel de camadas
e diminuindo a opacidade para zero e apenas duplicando
esse quadro inteiro como um terceiro e ajustando o posicionamento do texto pressionando a
tecla shift
e
a barra de variação
e ajustando a Novamente, a partir do painel
do protótipo vinculado esse quadro ao novo que fizemos aqui, ele volta ao atraso posterior
de um milissegundo Agora vamos dar uma prévia e aqui estamos com toda a nossa tela
animada do Selcm, felizes e torcendo por você Espero que você tenha gostado desta lição e navegue comigo. Se você
achou essa aula útil, envolvente e teve algo a aprender com ela, compartilhe suas palavras
na seção de resenhas, pois
isso não apenas anima meu dia, mas também me
motiva a criar algo novo para você aprender e ampliar
seu conjunto de habilidades Também esperando ansiosamente por
seus projetos criativos, faça uma captura de tela do
seu trabalho na exportação do GPG ou apenas uma gravação de
tela e
faça
o upload na seção de projetos para compartilhar sua criação com
essa Além disso, se você achar essa aula envolvente e
quiser saber mais, siga-me aqui para se manter atualizado.
Shivangi Dubey, Graphic Designer | Web Designer | Artist
