Transcrições
1. Apresentação: Ah, olá. Como você está Você gostou do jogo comigo? Quer criar um sozinho. E se eu disser, você
pode fazer tudo isso em sua única tela Figma.
Você acreditaria em mim? Sim, você me ouviu bem
e não precisa nenhum prazer especial ou experiência profissional para fazer
isso com apenas algumas tarefas, etapas e técnicas
básicas, e você está pronto para começar Ei, bem-vindo a esta aula
divertida e empolgante de nossos ganhos
da Figma com projetos simples Hoje, nesta aula, aprenderemos sobre
flip cards no Figma
e, juntos, criaremos um grande projeto divertido de atividades de flashcards
invertíveis Seja você um estudante de
design, explorador, artista ou designer
gráfico ou web designer de sondas Ajudar você e expandir sua visão como
designer é minha missão. Então, aqui estou eu com a aula divertida, que trata de explorar coisas novas
que você
pode criar usando princípios
básicos de design e interatividade com nosso
dispositivo e nossa mente criativa Tudo o que você precisa para esta
aula é seu dispositivo, uma boa conexão com a Internet, uma conta FIGMA e uma conta
gratuita está pronta para usar Você pode se exercitar e tomar uma
xícara do seu café
ou suco favorito para se refrescar
e acompanhar comigo nesta aula. Sem perder um segundo, deixe-me explicar sobre
todas as entradas de design e pontos-chave que você aprenderá comigo aqui
nos próximos minutos. Começaremos com o básico de selecionar uma moldura
para nosso projeto, depois projetaremos nosso cartão, tanto na frente quanto no verso, e depois os
juntaremos e
os tornaremos interativos Sim, a coisa invertível. Em seguida, criaremos um projeto de jogo
completo, nosso layout de página de bully Você é livre para explorar e sua própria criatividade
e design. E então,
juntos, personalizaremos cada uma
das cartas, tornando
nosso jogo
flashbad um grande projeto de classe
para essa classe Você está livre para explorar as entradas
e técnicas de design do
seu projeto e criar
algo ou outro por conta própria E, no final, não
esqueça suas palavras doces, também conhecidas como avaliações
ou seus fantásticos projetos de
aula e
ideias, e essas são a força
motriz não apenas desta aula, mas também para mim. Estou aqui
para ajudá-lo com qualquer orientação,
informação ou qualquer ajuda que você possa precisar
durante o processo. Então, sem mais delongas, vamos participar da próxima lição
e começar a diversão.
2. Como criar um cartão frontal: Aqui na minha tela Sigma, agora para começar nosso projeto,
precisamos de uma moldura Se você
me acompanhou em minhas aulas anteriores, conhece o atalho F ou
simplesmente o seleciona aqui, na barra de ferramentas, e agora
escolhe um tamanho predefinido na seção de design aqui e
depois
o redimensiona no painel de
design Mas vou usar
essa moldura como cartão. E eu quero ter um quadrado. Então, vamos arrastar e
criar um tamanho personalizado. Eu prefiro 300 por 300 pixels
ou 280 por 280 pixels. Isso seria bom o suficiente. Agora, você pode simplesmente inserir o número na seção
de design abaixo das dimensões aqui. Agora vamos adicionar o
traçado ao quadro. Para isso, selecione o ícone de adição, o ícone de adição na seção de
traçado aqui, selecione a
cor de sua escolha e ajuste uma boa largura do traçado. Além disso, um
canto arredondado pode ficar bem com, digamos, 25 a
40 pixels ao redor. um Agora adicione um retângulo ao seu cartão, aquela moldura e,
a partir do painel de arquivos, basta arrastá-lo e colocá-lo
sob a camada da moldura No preenchimento, selecione uma nova cor de preenchimento e
defina-a não para a cor, mas para a imagem. E agora escolha sua imagem onde quer que
você a
tenha em seu dispositivo. Defina a opacidade
do preenchimento da imagem para 100%. Você também pode ter
um preenchimento básico ou simplesmente removê-lo brincar para ver
o que você prefere Para mim, essa frente
parece boa o suficiente. Como dica, gostaria de
acrescentar que você
também pode adicionar mais elementos de
texto, título para o cartão ou até mesmo uma pergunta
que você pode usar como um botão aqui para que,
ao clicarmos,
ela revele a resposta ou
talvez uma combinação de imagem e texto como informação básica quando
Howard corre riscos.
3. Criando um verso: Depende de você como
deseja criar seu cartão. Uma vez feito isso, vamos passar
para a próxima lição, que trata
do design da parte traseira do cartão Espero que você tenha desenhado
a parte frontal
do cartão e agora esteja pronto
para fazer o verso Para isso, primeiro revire
o primeiro quadro e agora basta segurar todas as
teclas de opção
do teclado e arrastar para duplicar
todo o quadro do cartão Agora exclua todas as outras
coisas e, novamente, o primeiro retângulo, como fizemos
anteriormente, agora é só recolorir E você pode até usar o último retângulo
que Basta remover o
preenchimento da imagem e transformá-lo um preenchimento gradiente ou sólido
, o que você preferir Adicione apenas as cores de
acordo com sua escolha. Estou criando um
ângulo personalizado para o gradiente. Você está livre para explorar
suas opções de fundo e pode usar uma imagem de sobreposição, como
diminuir a opacidade,
escolher o que for A a Então vamos adicionar algum texto. Como aqui, eu
gostaria que o nome do personagem ou
do animal
na parte de trás fosse mostrado para
que, ao invertermos, o
nome fosse revelado Você pode fazer o mesmo ou talvez o nome da casa ou
o nome do bebê, depende de você. Você pode ajustar o tipo,
a cor e o tamanho da fonte . Y, espero que agora você tenha terminado com a
frente e a traseira.
4. Criando o componente: Agora, antes de começarmos a
tornar esse cartão interativo, nossa próxima etapa é sobrepor Sim, você me ouviu
bem. Selecionaremos a placa traseira da
moldura a partir da parte superior e colocaremos sobre a placa frontal de
forma que ela se sobreponha totalmente
à frontal E no painel de camadas, basta arrastá-lo e colocá-lo
atrás da camada frontal do cartão. Então, o que temos na
tela é a frente acima. Além disso, basta clicar com o botão direito do mouse
e virar a horizontal. Nas opções aqui, basta
selecionar virar horizontalmente no atalho Shift e Etch, segurar Shift junto com a tecla, e isso apenas inverterá seu design horizontalmente e colocará Na seção da camada novamente, selecione os dois
quadros na frente e apenas segure Control G
para agrupá-los. E agora você pode renomear
o grupo, agora selecione o nome do grupo na parte superior e
pressione Control ou
Command D. E isso apenas duplicará todo
o grupo de quadros como um todo e arrastará e
posicionará do outro lado, lado a lado nesta tela Este será o nosso lado invertido, que significa que vamos trazer a parte de trás da
carta para a frente e fazer a
carta frontal para trás seja, novamente,
virar na horizontal, como
fizemos com a primeira,
vamos virá-la horizontalmente, a frente e
movê-la para o lado inferior, a parte de trás ficará no topo aqui e, novamente, viraremos
a parte traseira preta novamente, o
que significa que vamos trazer
a parte de trás da
carta para a frente
e fazer a
carta frontal para trás
, ou seja, novamente,
virar na horizontal, como
fizemos com a primeira,
vamos virá-la horizontalmente, a frente e
movê-la para
o lado inferior, a parte de trás ficará no topo aqui e,
novamente, viraremos
a parte traseira preta novamente, então que está de volta ao romance. Então, espero que esteja claro como criar esses grupos de camadas
finais e agora renomear os dois grupos, um tem a carta frontal outro como a carta traseira, adequada para ambas as coisas Vá para o painel de design aqui, toque no ícone de diamante, selecione os dois grupos, vá para o painel de design aqui
com o ícone de diamante. No menu suspenso, pressione
a tecla de seta e selecione criar
um conjunto de componentes. Então, agora vamos prosseguir com
o projeto que está criando o layout do jogo
para a página da web em
5. Layout de jogos de design: Para nosso propósito de tela, eu gostaria de usar
o tamanho
da tela de vídeo de 1080 por 1920 pixels, ou você também pode
trabalhar com o desktop ou o tamanho máximo ou qualquer
quadro de tela que desejar Em primeiro lugar, arraste
o componente
do painel de ativos até o quadro em
que estamos trabalhando. Coloque-o em qualquer lugar,
você decide. Agora, basta segurar uma
tecla de opção e clicar e arrastar para duplicar quantas cópias do cartão desejar Estou fazendo um total
de oito cartas
na tela e
gostaria de colocá-las no
centro da tela. Você pode defini-lo como seu próprio
layout à sua maneira. Agora, desenhe parte
do plano de fundo, com uma cor retangular, preenchimento
total ou até mesmo uma imagem com opacidade de carga, Depois, você pode até mesmo usar
um fundo de cor clara. Agora você pode até mesmo destacar
a seção do cartão com outra cor e
outra para o plano de fundo, com
dois retângulos no jogo Agora, temos um fundo
pastel sólido. Para mim, é bom ir e
podemos seguir em frente. Ou você pode usar até mesmo
um preenchimento de gradiente, preenchimento imagem como plano de fundo
completo I Então, uma vez, vamos adicionar algum texto como
título para o nome. Agora, o próximo passo
é personalizar cada cartão. Como a primeira já está pronta,
vamos selecionar a próxima no painel de camadas,
expandir esse componente,
embaixo dele aqui na frente, expandi-lo e selecionar o retângulo na opção de preenchimento. No painel de design, painel de design, edite o preenchimento da imagem e selecione sua própria nova
imagem para esta Da mesma forma que no painel de
camadas, expanda a
seção traseira, o cartão traseiro, expanda a
seção traseira, o cartão traseiro,
oculte a parte frontal do cartão, desbloqueie o
componente da moldura e edite o texto. Bloqueie a
camada traseira do cartão e apareça novamente, tornando o cartão frontal
visível novamente. É feito para este cartão. Agora repita todo esse
processo para o próximo cartão. Pode parecer que algumas mulheres editem
rapidamente cada
cartão individualmente. Então, aqui terminamos com
cada cartão individualmente. Agora, no painel de design e
na guia de propriedades, você pode simplesmente alternar para frente
e para trás e ver como cada cartão é
criado individualmente e está pronto
para nossa parte interativa. Agora, vamos continuar tornando-os interativos
na próxima lição.
6. Vamos nessa, aula interativa 6 feita com Clipchamp: Agora é hora de
torná-los interativos. Mas como? Selecione o conjunto de componentes que já
criamos anteriormente. Aqui, selecione o conjunto de grupos de placas frontais e mude para o painel do
protótipo Descanse, as coisas estão bem. Aqui, a partir do
cartão frontal, este ícone de adição,
segure, arraste e
conecte-o ao cartão traseiro. Mude-o para o elemento do grupo
de cartas traseiro. Defina as configurações de interação como você pode ver na tela, como o gatilho para
dizer enquanto passa o mouse, e você também pode defini-las como quiser
, se quiser clicar E então gira se você quiser passar mouse e depois
gira, depende de você E a ação está boa por enquanto. Em seguida, a partir da animação, defina-a para a animação inteligente, diminua e o tempo pode ser de 300 milissegundos.
É bom o suficiente. Agora, chegando à
tela do jogo, basta analisá-la. Sim, você acabou de criar
esses flashcards saborosos interativos e de
trabalhar para as crianças brincarem e aprenderem
. Isso não é divertido? Espero que você tenha gostado desta aula comigo e a tenha achado interativa e útil, além de
aprender algumas coisas ou
outras com essa aula. Se sim, por favor, deixe-me saber
sobre suas avaliações
na seção de resenhas
e eu estou
esperando ansiosamente por seus incríveis e
adoráveis projetos de aula Dessa forma, você
me estimula a oferecer projetos e aulas mais interativos. Se você gosta dessas
aulas e projetos, me avise e
compartilhe com seus amigos
também, que podem
achar isso útil. Além disso, se você quiser mais aulas
desse tipo aqui, siga-me aqui e fique atualizado.
Shivangi Dubey, Graphic Designer | Web Designer | Artist
