Transcrições
1. Apresentação: Bem-vindo à minha aula sobre como aprender Figma
em etapas mais simples Nesta aula,
aprenderemos como fazer esses cartões de trabalho, também
conhecidos como tipos de acordeão Não apenas aprendendo sobre eles e a finalidade
de seu uso, mas também projetando, executando
e prototipando todo
o design
como um projeto de design que você pode
compartilhar imediatamente com qualquer pessoa em seu portfólio ou que possa interessar seus clientes com
suas necessidades comerciais Toda essa aula é para
iniciantes, o que significa que você pode
participar comigo, mesmo que não tenha nenhum conhecimento sobre Sigma e seus Esta aula é fácil de seguir juntamente com instruções
passo a passo. Além disso, você também pode
conferir minhas outras aulas sobre FIGMA para obter mais conhecimento sobre o básico e
outras ferramentas, se quiser Seja você um iniciante, um
andarilho, um estudante de design ou um designer gráfico habilidoso, procurando atualizar
seus conjuntos de habilidades e ferramentas ou apenas
aprimorar Participe e vamos começar.
2. Crie seus cartões: Agora estou na minha tela Figma, então vamos criar rapidamente nosso primeiro quadro para
começar a trabalhar Pode ser de qualquer
tamanho 200 por 300, 250 por 300 ou o
que achar melhor para você. Basta clicar
em qualquer lugar da tela, segurar e arrastar para criar
seu primeiro quadro. No painel de design, basta alterar o
raio do canto da moldura para 25
para dar à moldura uma aparência completa de
bordas arredondadas do cartão Você pode aumentar ou diminuir o raio como se fosse sua referência Agora, faça um retângulo, que você usará
como suporte de imagem Basta usar a ferramenta de forma aqui, a ferramenta de
retângulo ou o atalho R e, em seguida, criar um retângulo grande o suficiente para
cobrir toda a Painel de camada errado, certifique-se que está dentro da
nossa camada de quadro, está acima daqui, basta
arrastá-lo e colocá-lo sob o quadro em que
estamos entrando. Agora vamos mudar o recheio
das ovelhas a partir daqui. Basta tocar no
ícone de adição, selecionar o preenchimento da imagem e agora tocar em Carregar desta
tela do seu dispositivo. Depois, você pode simplesmente fazer
o upload de qualquer imagem de sua
preferência. Basta definir a opacidade para
100% e agora vamos adicionar algo mais para dar a essa imagem simples uma aparência
melhor e aprimorada Para isso, vamos adicionar mais
uma cor de preenchimento
acima dessa camada de imagem, preenchimento de
imagem para o
mesmo retângulo Agora, na seção de preenchimento, podemos simplesmente adicioná-lo clicando
no ícone de adição aqui. Mas desta vez,
será um preenchimento de gradiente. Agora, defina um gradiente simples de branco
para preto e veja se isso dá uma boa aparência de
gradação ao nosso cartão Então, basta um
pouco de habilidade para ajustar tudo e estamos prontos com o plano de fundo
básico do E agora vamos adicionar
algum texto a ele, talvez um nome ou tópico diferente do cartão Talvez seja um serviço de nomes de
filmes, qualquer coisa que você
queira adicionar como título para esse cartão específico e você
também pode adicionar um pequeno slogan
ou uma descrição sobre ele. Use a ferramenta de texto para isso. Podemos adicionar o texto aqui
e, a partir do painel de design, você pode escolher
qualquer fonte de sua escolha e apenas
redimensioná-la para que não
fique muito alta ou pequena para a folha Agora você pode escolher a
cor que preferir. De acordo com a imagem, de
acordo com
o que você quiser. Agora, a próxima etapa muito
importante ao criar o cartão é
que eu quero que minha
imagem de fundo aumente e
diminua à medida que
redimensionamos a caixa Se a expandirmos,
ela se expande; se apertarmos, eu não aperto
tanto que dê espaço em branco ou
saia da imagem, ela deve ser
preenchida automaticamente Mas como conseguir isso? Simples, selecione o
retângulo, a moldura da imagem, esse retângulo,
vá até a posição
no painel de design e toque
no pequeno ícone quadrado aqui Isso abre as restrições, define as duas
restrições na Agora, veja se redimensionamos
a moldura de alguma forma, esticando-a para cima,
apertando-a para baixo, a imagem Está tudo ocupado pela imagem. Ele está se redimensionando e se reajustando adequadamente. Então, estamos prontos para criar nosso estilo
básico de cartão. Na próxima lição,
aprenderemos projetar o cartão
como componente.
3. Cartões e componentes: Conduzindo nosso projeto
agora, vamos começar este cartão como o
componente da figura. Como é simples, selecione a deformação
e, a partir daqui,
no painel de design, selecione o ícone de diamante. Aqui. Isso transformará o
design em componente. Toque mais uma vez no ícone de diamante e isso criará uma
variante do design do nosso cartão. Agora temos duas variantes, redimensionando a
primeira como barra Basta uma punhalada e isso revelará
toda a imagem e o texto Primeiro, selecione o texto na
parte superior e, em seguida, mantenha pressionada tecla Shift e retire-a
da moldura desta forma. Em seguida, basta apertar a
moldura em forma de barra. Você pode definir a largura
da barra conforme sua
escolha, depende de você. Agora, daremos o
próximo passo antes de criar um layout rápido da web para nosso cartão para exibir
a próxima lição.
4. Projetando a página web a: Vamos começar com uma nova moldura, talvez de tamanho extra Se você estiver trabalhando no
Mac ou iPad ou então, você pode escolher esse dispositivo. Então, agora recolora o fundo da
moldura. Estou escolhendo algo escuro
e vamos adicionar o componente, a camada da imagem, os elementos que queremos
e como decorar, como projetar
todo o nosso esquema doméstico Você pode fazer isso da
mesma forma que fizemos o cartão, fazendo a coisa errada, revirando a imagem e adicionando algum texto como título
da página, redimensionando e formatando
tudo de acordo com as
fontes, o R Você é livre para criar sua página
à sua maneira. Como estou fazendo uma forma abstrata e criando
a imagem da princesa aqui. Isso apenas aprimorará
a aparência da página da web como um todo, em
vez de apenas ficar em branco e abrir esse componente
específico do cartão. Agora vamos adicionar o
componente do cartão na página da web. Para isso, acesse ativos aqui, neste painel de ativos
e à esquerda. Basta adicionar esse componente do cartão clicando e
arrastando até a tela Agora segure e arraste uma vez
para fazer uma duplicata. Agora, basta colocá-lo no
mesmo espaço repetidamente, para que não precisemos simplesmente
arrastá-lo e ajustá-lo a ele. Para isso, basta usar o Controle
ou o Comando D e ele
duplicará até mesmo cópias
de todas as cópias que fizermos Haverá até espaços. Vou fazer
sete cartas aqui. Você pode duplicá-lo quantas vezes
quiser usar E selecione todas as
cartas juntas, defina as restrições no centro dos dois lados
a partir daqui Agora, selecione o layout automático no layout e
configure-o para o alinhamento central e ajuste a lacuna para definir automaticamente
o
valor de Agora, realinhe o
conjunto de cartas daqui na posição para o
centro , tanto na horizontal
quanto na vertical Agora estamos prontos
com nossa posição de cartas definida em nossa página inicial Então, agora é hora de criar cada cartão para o índice de imagens
individual. Então, para isso, clique no
primeiro e, na propriedade do cartão, defina-o para abrir,
selecione o retângulo Altere a imagem
da configuração do filme e agora você pode editar o
conteúdo com muita facilidade, resto do texto e tudo mais. Uma vez feito isso, repita
o mesmo processo para o próximo, para que possamos configurá-lo para
a prioridade específica de
abrir e fechar e, uma vez feito isso, basta fechar o cartão específico. Agora, espero que você tenha
uma ideia clara de como
criar uma página da web inteira,
como criar seus
cartões individuais até agora. Agora, espero que você tenha
uma ideia clara de como
criar uma página da web inteira,
como criar seus
cartões individuais até agora. Agora, espero que você tenha uma ideia clara de como
criar uma página da web inteira, como criar seus
cartões individuais até Se tiver alguma dúvida, me
avise na guia de discussão. Depois de concluir as edições do cartão, agora é hora de adicionar variantes da página
a cada cartão
e seguir em frente O que faremos
na próxima lição. E
5. Deixe seus quadros e cartões prontos: Vamos renomear essa
moldura para qualquer coisa,
digamos , ou talvez para casa Agora segure o nome
da moldura e, com
a alternância,
selecione essa tecla
da tecla pressionada e arraste-a para fazer
outra cópia da Agora, esse ping de quadro
basta renomear dois como um e repetir e
duplicar mais Então, eu tenho sete cartões, então terei E
mais sete cópias, como o S, e haverá cópias
de S um a S sete, que significa que se você
tiver cinco cartões, o número total
de quadros de página da web que você vai
usar é seis. Claro. Vamos em frente. Agora, o quadro S está pronto para uso. Para o próximo S, defina a primeira
propriedade do cartão a ser aberta. No quadro S dois, defina a propriedade
do cartão do segundo para abrir e o primeiro para
fechar, e assim por diante. Faça isso para todos os
cartões individualmente para cada página da web, cada cópia. No S, um é o cartão um
será aberto no cartão S dois, I sete cartas,
sete serão abertas. Estamos prontos para dar
o próximo passo,
que consistirá em criar protótipos nossos cartões e torná-los interativos
na próxima lição
6. Noções básicas de prototipagem no Figma: Começando pelos primeiros quadros, selecione o primeiro cartão, mude para o painel do protótipo
e, em seguida, basta clicar
e segurar no ícone de adição e conectá-lo
ao quadro S one Além disso, mantenha as propriedades
mostradas aqui ao clicar em Navegar até e
alterar a animação de instantânea para alienado inteligente Ser gentil é bom o suficiente
com 800 milissegundos. Isso será bom o suficiente. Agora mude a primeira carta para a S a partir do quadro S dois, depois de S três, depois
de S quatro, e assim por diante. Até que a primeira carta de
cada quadro seja vinculada de volta ao
destino, ou seja, S one. Aqui. O que estamos
fazendo é escolher um cartão por vez e depois juntá-lo ao
seu destino cada página da web
que criamos Depois de concluir a
prototipagem da primeira carta
de todas as molduras, agora é hora da prototipagem da
segunda carta Da mesma forma que
fizemos com o primeiro, faremos isso a partir
de cada quadro e o vincularemos volta à página inicial S two. Em seguida, usaremos
a carta S três, a
terceira e a vincularemos novamente a. Então, espero que você tenha uma ideia disso. O
que você está fazendo Se você está apenas ouvindo minhas palavras e
não está praticando, isso pode ser confuso para Mas se você estiver praticando
em seu projeto, experimentando-o, você
entenderá e ficará melhor nele Então, não tenha pressa,
acompanhe-me
e, se não tiver certeza, pode simplesmente repetir essa parte e, novamente, tentar por conta própria. Mas se ainda houver alguma
confusão, é só me avisar. Eu vou te ajudar com isso
na fase de discussão. Então, serão necessários mais
alguns minutos para criar um protótipo de cada
cartão da mesma forma Uma vez feito isso, vamos visualizá-lo
no botão Play superior. Veja como você criou de forma incrível este cartão em estilo acordeão e página da web interativa
com imagem deslizante para Isso não é divertido? Criamos este cartão divertido como um bom
site, mas tem mais. Quer entrar no nível
avançado de TI? Se sim, vamos passar
para a próxima lição, que trata de explorar alguns estilos avançados
no FiGMA para esse conceito de design específico e usar o componente
no design
7. Protótipos avançados: Dois Agora, a primeira coisa
que eu quero que você entenda é o
uso do componente, pois isso economiza muito tempo. Se você quiser
adicionar algo igual para cada
componente, basta alterá-lo no componente
principal que
projetamos na
classe anteriormente Veja se eu adicionar um botão básico, ele será
automaticamente adicionado ao resto dos cartões
em todos os quadros. Não foi essa semana. Agora você pode simplesmente editar
as propriedades dela, como a cor, o texto de
cada uma delas individualmente. Então, a seguir, vamos alterar
a propriedade de interação. Digamos que eu queira que isso
aconteça não com um clique, mas quando passamos as cartas. Então, para isso, selecione a
carta como essa
do protótipo aqui e nas configurações
de interação do protótipo, toque e
altere-a para enquanto Mas trocando por sete cartas ou o que quer que você tenha para cada um dos
sete quadros específicos, você dirá: Ei, isso
vai levar muitos minutos a mais em horas
e eu não tenho esse tempo. Mas aqui está o truque
para economizar seu tempo. Selecione os cartões de cada quadro específico
no painel
de camadas e, em
seguida, altere a interação
para Enquanto espera. Não altere nada lado, neste painel, neste painel de protótipo, altere as configurações de interação
de clique para Wil pairando Faça isso para todos os quadros, como selecionar todo o conteúdo desse quadro, conteúdo
interativo
e, em seguida, apenas reajustar a ação interativa
quando interagir Basta mudar essa coisa
em particular e você estará pronto
em apenas alguns minutos. Agora, vamos pré-visualizar e ver como
isso está funcionando perfeitamente Assim que passamos o mouse
sobre cada moldura, ela se abre e, assim que
vamos embora, ela simplesmente se fecha Então, isso não é incrível? Você achou essa aula útil, envolvente e algo
ou outro com o qual aprender. Se sim,
compartilhe suas avaliações, comentários e belos projetos. Dessa forma, você me estimula a
apresentar projetos e aulas mais interativos Se você gosta dessas
aulas e projetos, me
avise e compartilhe com seus amigos, que podem
achar isso útil. Além disso, se você quiser
mais aulas, siga-me aqui para se manter atualizado.
Shivangi Dubey, Graphic Designer | Web Designer | Artist
