Transcrições
1. Apresentação: Bem-vindo a este curso de design figma
UI UX. Meu nome é sim, em seguida,
cada linha três e instrutor
Albert
neste curso. No curso Figma,
você aprenderá a projetar um aplicativo web completo. Você é um design de interface do usuário de um aplicativo
web completo de perder isso claro neste curso, vamos dar uma olhada no projeto
que você vai
projetar neste curso. Portanto, esse é o design bancário do nosso aplicativo da web que você
decidirá neste curso. Você pode ver que
temos nossa boa barra lateral. Então você vai
aprender a
aguentar diferentes graffiti Kw. E então aqui temos
nossa bela seção, e depois disso
teremos nossa seção de itens mágicos. E agora, se eu
clicar neste ícone de mais e, em seguida, poderei
ver essa boa caixa de modelo. E se eu clicar do lado de fora, ele será removido. E se clicarmos
no ciclo fechado, ele será removido aqui. Embora você crie isso
um aplicativo da web, você ou UX, você também
aprenderá a trabalhar com a redigitação, como fazer protótipo. E isso pode adicionar um
tipo diferente de animação aqui. Eu tentei o meu melhor para
explicar
cada parte deste aplicativo que você vai, você aprenderá com essa prática,
esse componente
de técnica, diferentes tipos de ajudar você a organizar seu projeto
para fazer muitas outras coisas. Portanto, eu
recomendaria que você aproveite este curso.
2. Design de barra lateral: Bem-vindo a este vídeo. Nesta parte, vamos
começar a projetar nosso aplicativo player de
áudio. Portanto, esse é o aplicativo básico
que vamos projetar. Então, antes de tudo, vou abrir nosso novo arquivo de
design e Figma. Então clique neste
novo arquivo de design. E eu vou fazer
isso e disposto a encontrar com o leitor de áudio de
arquivos de áudio. Você pode dar qualquer nome. Tudo bem, então agora
, antes de tudo, precisamos adicionar um quadro aqui. Então, vou selecionar este
quadro e, em seguida, este deck parar 1440 e depois 24. Vou selecionar este. Se você quiser. Você também pode alterar o
nome, mas está tudo bem. Vamos ter apenas um. Deixe-me mudá-lo. Podemos dizer este. Tudo bem, então, no nosso design, temos a barra lateral, temos esta lista de álbuns
e, em seguida, temos essa
lista de tocadores de música. Tão rápido, deixe-me desenhar
este 1 primeiro e então eu posso fazê-lo,
ok, um momento. Então, vou ajudar
esse retângulo e
vou desenhar esse design. Deve ser exatamente assim. E aqui vamos nós. Então, temos esse design. E agora podemos adicionar uma
cor para esta. Então, temos esse
tipo de cor aqui. Então deixe-me mudar a cor. E, na verdade, posso copiar
a cor desse arquivo. Mais uma vez, copie essa cor que
eu já criei. Então, o que posso fazer? Posso abrir o
design anterior que já fiz. Qualquer coisa. Este aqui está. Ou se você quiser, você pode escolher qualquer cor, o que quiser. Mas eu gosto dessa cor. Há uma razão pela qual
eu vou copiar essa cor do meu design
anterior. E o código
de cores será. Portanto, esse é o
código de cores deste item. Vou copiar esse código de
cores e vou,
vou fazer com que seja design de placa
colorida. Então, o que posso fazer? Eu posso criar, posso criar
nossa cor é diz aqui. Então, vamos chamá-lo de Cor da Barra Lateral. E então crie um estilo. Mas precisamos alterar esse código de
cores para esse código de cores. Agora parece exatamente
o mesmo que temos aqui agora. E outro código de cores que
eu quero copiar daqui, que será
esse curso de cores. Vou copiar
esse código
de cores daqui e vou criar outra cor e
estilo para este item, e depois o usaremos mais tarde. Então eu vou
chamá-lo, vou dizer,
Oh, música, jogar cartas e
criar um estilo aqui. E então aqui, vou mudar
a cor
para essa cor. Mas não se preocupe, podemos, podemos selecionar essa cor aqui. Mas o que aconteceu aqui? Esta é a cor da nossa barra lateral. Ok, então cometemos
algum erro aqui, ou precisamos mudá-lo. Então este site por cor, e esta é a cor da música. Então, para a cor da música, vamos arriscar este, que vai ser assim. E para a cor da barra lateral, temos que
mudá-la para essa cor, que é essa cor. Vou copiá-lo.
E então a partir daqui, vou
mudá-lo para essa cor. Agora podemos usá-lo facilmente este
ou este. Se eu selecionar esse
item para essa cor, Ele selecionará este, mas ele
selecionará este, mas precisamos neste item aqui. Tudo bem, então agora podemos
adicionar este quadro aqui. Podemos adicionar esse design aqui. Temos isso, temos
esse EMS e, em seguida, lista
de itens para isso. Rápido, deixe-me desenhar nosso círculo. Então, vamos pegar metade dessa ferramenta
de elipse aqui. E então vou desenhar
essa ferramenta de elipse e
torná-la a mesma endurecida e branca
para que pareça circular. E antes disso, deixe-me
executá-lo para que possamos saber como ele se parece
em dispositivos reais. E parece assim. Vou remover
esse ícone aqui. Parece assim. E vou aumentar
o selvagem um pouco mais. E então aqui vou
adicioná-lo ao centro. E então o que posso fazer? Posso simplesmente adicionar
um derrame aqui e essa palestra será três. E então vou mudar a cor
do
traçado para a cor branca. E aqui vamos
colocar nossa imagem aqui. Então, vou
clicar neste local EMS. E depois vou selecionar e
selecionarei essa imagem. Aqui está você. Então, ele vai adicionar
o MS. E então, se eu, agora temos este aqui. Se eu clicar nele. Certo, então, por algum
motivo, não funcionou. Certo, tão furiosa nossa imagem. E agora eu deveria ser
capaz de ver essa imagem aqui. Agora temos nosso texto aqui para que
possamos dizer que o nome será Zhan do. E vamos
colocá-lo no centro. E o tamanho da fonte de estilo de duas chances, vou selecioná-lo para 20. E se você quiser, definitivamente você pode
adicionar estilo diferente. Não vai
ficar bem aqui. Ele pode escolher isso ou você pode escolher qualquer outro design,
o que quiser. Vou selecionar. Talvez possamos manter este. E depois disso, o que temos, depois disso, temos esses dois itens, música menos nossa favorita calorosa
e depois o bloqueio. Então, o que vou
fazer, vou adicionar um texto aqui e vou dizer lista de músicas. E para este primeiro primeiro preciso
mudar o estilo do texto. Vamos
mudá-lo para este. Você pode escolher qualquer lista e é qualquer estilo de texto
que você gosta. Isso não é um problema,
então podemos mantê-lo, você pode começar a partir daqui. E depois disso, vamos pegar
metade desse plugin. Então, filtro ícone e
eu já instalei esse plug-in
chamado ícones de alimentador. Se você não tiver este, basta instalá-lo na comunidade
de plugins. E então vou dizer, vou pegar este ícone aqui. Então este está agora fora
do quadro principal principal. Então essa é a razão pela qual
vou colocá-lo aqui. E agora está aqui. E vou
colocá-lo exatamente aqui. E agora eu posso mudar
a cor para branco. Então, o que posso fazer agora? E nós só
precisamos ter isso ou não,
fazer, não faça isso. Precisamos dessa
lista musical e
esta, não essa elipse, precisamos dessa lista de músicas
e desta aqui. E então, ok,
então já está lá. Então, agora o que podemos fazer? Basicamente, podemos fazer um
groove para esses dois itens. E outra coisa é tão rápido, deixe-me fazer isso em grupo. Vou chamá-lo de comando Z. E obviamente
crescimento, vou renomear o nome do grupo. Estou pressionando Command
Control R e o teclado. Mas você também pode clicar com o botão direito do mouse
e renomeá-lo. E vou
dizer item da barra lateral. E agora precisamos mudar o estilo, tamanho da
fonte deste. Não precisamos ter
esse tamanho maior de fonte. Então, o que posso fazer? Podemos fazer aqui. Por que não
está aparecendo? Então, precisamos escolher esses dois. E então, em vez de 16, em vez de 20, vou
selecioná-lo para 16. Agora, vamos ver como ele se parece. Parece bom, mas
o que podemos fazer agora? Podemos 60 está bem. Parece bom. Sem problema. Mas eu só queria saber
que se for do mesmo tamanho, ok, então está na mesma linha. Legal. Agora podemos duplicar
nosso grupo. Então, o que posso fazer? Vou pressionar Command
D para fazer uma duplicata. E vou
adicioná-lo aqui dessa maneira. Então eu vou pressionar Command D. Acho que temos três itens. Um deles é L1, depois favorito. Então vou adicionar o nome
será álbum aqui. Álbum. E então
o que mais temos? Temos o nosso favorito. E então o que posso fazer aqui? Vou escrever tecido. Portanto, é sempre uma
boa ideia fazer tudo grupos para que você
possa duplicar o mesmo design. Agora podemos ver que
temos algum tipo de design e exatamente da mesma
posição que ele está chegando. E sim, mas essa coisa
é agora que eu acho que
preciso ajustá-la porque não vai
começar do centro
porque esse campo, mas o texto é um pouco mais longo. Agora está na mesma posição. Tudo bem, então agora
na parte inferior
temos mais um campo chamado. Temos mais um campo chamado. Ok, então outra coisa é
que vou ajustar nosso quadro porque a altura
do quadro é muito grande. Então, vou adicionar um
pouco que tenhamos
esse mesmo design. Ok, então agora na parte inferior
temos uma opção chamada, também
podemos adicionar apenas esta. Com este. Agora temos
outra opção chamada lockout. Então vou desenhar
um retângulo aqui. Vou desenhar
um retângulo aqui. E então o que vou fazer, vou fazer um
derrame aqui e aqui. A partir daqui, você pode definir
de onde você quer um derrame. Você quer o traçado
de todos os lados, ou de cima, de
baixo ou da esquerda. Então, atualmente, nosso derrame
será de todos os lados, mas eu quero ter um
traço apenas do topo. E há uma razão para
eu selecionar este top. E também quero
esse estilo de traçado. Em vez de sólido,
vou adicioná-lo ao dash. E agora o que podemos fazer? Podemos mudar este. Então, como posso mudar essa cor? Então precisamos do mesmo
design, mas, felizmente, já
temos nossa cor que criamos.
Nossa cor ainda está. Portanto, esse é o benefício
de usar a cor que
diz que você não precisa copiar o código de cores repetidas vezes. Você cria sua cor é
dizer a eles que você acabou de reutilizá-la. Agora, temos essas coisas coloridas. Outra coisa que precisamos
para fazer mudanças aqui, precisamos mudar a cor do
traçado para branco. Agora parece bom. Agora aqui podemos colocar nosso
ícone e o botão de logout. Então, outra coisa que você se lembra aqui,
temos a barra lateral , temos esta, e nós
desencorajamos tão rápido, deixe-me mudar o
nome deste. Podemos dizer guarda de bloqueio. E aqui vamos
adicionar nosso ícone. Então, vou
selecionar o ícone, sair. Eles podem ter um ícone de logout, que será esse ícone. Vou primeiro
colocá-lo dentro de casa. E então eu vou
levá-lo para aqui. E podemos alterar a altura
e o peso para 35 por 35
e, em seguida, mudar a
cor para branco. Então já temos aqui. Deixe-me verificar, como
parece. Parece bom. Mas também podemos ter
começado a partir dessa posição porque nosso item é
dessa posição. Então agora ele tem a mesma posição. E aqui podemos adicionar um texto
e podemos dizer logout. Sair. Agora temos esse item
e deixe-me ajustar este. Ou podemos ajustá-lo. Podemos resolvê-lo dessa maneira. Então agora precisamos pressionar, precisamos torná-los um grupo. Então, nosso cartão retangular, nosso ícone de bloqueio
e texto de logout. E vou fazer isso em grupo. Posso dizer sair. Tudo bem, então temos esse design. Até agora, fizemos um
design muito bom para nossa barra lateral. E na próxima parte
começaremos a trabalhar para
o resto da peça. Vou parar este
vídeo aqui. Vejo você na próxima palestra. Adeus.
3. Design de lista de álbuns: Bem-vindo a esta palestra. Nesta parte, começaremos a
projetar nossa lista de álbuns. Então, para isso, em primeiro lugar, vou criar para que
tenhamos essa lista de itens aqui. Certo, tão rápido, deixe-me
adicionar este sistema de grade. Então, a grade de lay-out,
vou adicionar,
então, em vez dessa grade, vou alterá-la para seis e depois mudar nossa grade
para a coluna R nada para seis. Então, precisamos ter 1815. Tudo o que você precisa para ter três. Precisamos ter
1515 será bom. Então, esses são o nosso sistema de grade. E a partir daqui podemos
identificar facilmente a partir desta parte, começaremos a projetar
nosso cartão ou tudo mais. Então, vamos
começar a trabalhar a partir daqui ou daqui. Acho que ficará bem. E
seguiremos este. E vamos conseguir,
vamos ter esse espaço, ou podemos começar daqui, a partir desta linha e
vamos manter esse espaço. Certo, tão rápido
temos uma mensagem aqui. Então, vou adicionar um texto aqui. Vou dizer lista de
álbuns, lista de vm. Então a lista Adelman estará aqui. E vou mudar o estilo do
texto, não neste. Talvez possamos dar
este ou algo ousado. Tem quase o mesmo design. E não este. Eu nem
entendo esse texto. Tem esse termo matemático. Isso não é um ponto. Talvez possamos dar a
esta lista de álbuns. E esse ex-aluno para nós
vamos levar aqui. E depois disso temos
nosso cartão retangular. Então, vou desenhar o
cartão daqui para este cartão. E temos um pouco
de raio de fronteira aqui. Então, vou ficar com cinco. E então temos
esse descarte agora. Então agora acho que é
muito grande, tamanho maior. Vamos torná-lo
um pouquinho. E em cima deste, precisamos de outro cartão. Então eu vou, o que vou fazer, vou duplicar
este cartão aqui. E vou
torná-lo menor. Então eu posso adicioná-lo com este para que possamos
obter exatamente o mesmo. Ok, então agora descartamos. Deixe-me adicionar, deixe-me mudar a cor de fundo para que
possamos entender. Então agora temos outro cartão, mas deve estar
no mesmo liberal agora. Ok, então eu, o que quero dizer com isso, deveríamos ter
começado deste lado. Vai ficar assim. Agora temos este. Agora podemos aumentar o tamanho
deste e ele ficará
assim. Tudo bem, então agora
temos este cartão, temos este cartão. Tão rápido. Deixe-me mudar a
cor de fundo deste. Vou alterar a cor de
fundo deste item será branca. Então precisamos adicionar
um efeito aqui. Agora, vai ficar ótimo. Então, temos este cartão, temos este cartão retangular
e este cartão está aqui. Então, depois disso,
teremos que certo? Posso mudar a cor aqui, talvez essa cor e
vou adicionar um texto aqui.
Vai ser r, l. Não liste. E podemos dizer música pop. E vou manter o mesmo tamanho de
fonte que estou usando. Ambas as músicas. E aqui
vamos ter outro texto que
vou começar
daqui, a partir desta linha. E vou dizer 20 músicas. Que vou dizer 20 músicas. Então agora parece muito bom. Então, o que pode, o que
mais podemos fazer aqui? Podemos adicionar o ícone 01
mais aqui, que será ícone de música. Então, o que eu
posso, como posso adicionar este? Vou abrir o
plug-in deste alimentador ícones. E aqui estou indo
para música sars, então vou arrastar, vou levar esta aqui. E vou arrastá-lo aqui. Vou segurá-lo aqui. E agora parece muito
bom termos essa música. Então, o que vou
fazer agora vou
fazer agrupar todas as
coisas para este cartão. Então, faça-os em grupo
e renomeie o grupo é, e podemos dizer isso.
O que podemos dizer? Podemos dizer, podemos
dizer lista de álbuns, L bum, item bum
aqui. Então, eu um item. Então nós descartamos, então agora podemos fazer
vários cartões. Então, vou pressionar o Comando D e vamos
fazê-lo dessa maneira. E vou pressionar
Control D para controlar o. Portanto, não precisaremos
deste cartão aqui porque vamos adicionar
mais cartão aqui, então vou
remover este item. Então, outra coisa é isso, então vamos dizer que vou
adicioná-lo dessa maneira. Ok, então agora como você
vai organizar este. Para organizar este, você pode simplesmente o que quero dizer com organizado, quero dizer que vou
dizer que você tem como você pode ver que essa Honda
tem isso e isso tem a mesma
distância desses itens, mas este tem uma distância vigorosa
e maior. Nesse caso, podemos usar esse modelo mostrado aqui.
Você pode ver arrumado. Então, o que isso nos arrumou, vou fazer por nós
vai organizar nosso carrinho. E isso
nos dará o mesmo peso e altura e o mesmo espaço
de cada cartão. Você pode ver agora que temos esse 19 e temos
esse 19 daqui. E então eu vou,
para este cartão, vou ter que
fazer isso na horizontal, como torná-lo apenas uma toupeira. Agora, se
eu quiser, posso simplesmente
fazer alterações neste. Então, novamente, vou
selecionar este. E se eu pressionar este arrumado para que não tenhamos nenhum problema aqui. Se estiver visível, significa
que seus
dados já estão. Tem a mesma distância
que você pode ver em 1990. E agora, se eu quiser
mudar a distância, posso simplesmente fazê-lo
e ele vai se ajustar
automaticamente para mim. Agora, temos a mesma
distância, 111111111. Então, o que vou fazer,
vou mantê-lo assim. Vou dar 14. Agora, como parece.
Parece assim. Então, vou fazer uma
duplicata desse item. Temos esse álbum. Temos este item do álbum. Agora, vou chegar a mais
um item e duplicar. Então, porque precisamos
da mesma altura. E vou
mantê-lo 14 por 14. E agora não precisamos
ter esse texto aqui. Vou remover esse texto. Vou remover esse
texto e este item. Sinto muito, preciso remover
essa coisa toda daqui. E também isso, também
esta carta superior. Então, em vez disso, para este retângulo, eu vou remover
este também daqui. Então agora temos este
único cartão, e vou fazer
alterações nesse design. Então, precisamos ter um
derrame para esses itens. Então, vou
adicionar um derrame aqui. E preciso de traços,
desculpe, preciso de traços. Então, vou mudar o estilo de
traçado sólido para traço. Isso parece bom agora. E agora, se eu quiser, também
posso mudar o traço para
três para que eu obtenha mais espaço. E dentro deste, vou pressionar,
vou, vou projetar uma vantagem
ou posso simplesmente pressionar o ícone Plus também
vai funcionar. Mas nesse caso, terei que
dar muito estilo de fonte, talvez 96 para torná-lo maior. Também podemos fazer isso dessa maneira. Então, temos esse ícone de mais aqui. Isso significa que podemos, ok, então precisamos fazer
isso no centro. Quero dizer que não precisamos
ter esse raio. Podemos mantê-lo no centro
para que ele pareça um ícone de explosão. Então nossa lista de álbuns está pronta. Então, agora o que posso fazer? Posso mudar o olho que contém
a cor do item do álbum. Podemos selecionar nesta
cor, não nessa cor. Você pode apenas adicionar alguma cor
e, com base na sua escolha, estou apenas selecionando
alguma cor aleatória. E então, a partir daqui, posso selecionar este. Certo, tudo bem, então parece bom. Então, agora o que posso fazer? Posso simplesmente dizer música rock. Música rock. Você pode simplesmente adicionar
alguns tipos diferentes lista
de músicas ou nome de música. Isso não importa. Estamos
aprendendo como podemos projetá-lo, mas o texto pode ser qualquer coisa. Então agora outra coisa, posso mudá-la para 60. Para este, posso
alterá-lo para 50, então posso alterá-lo para
70607050 ou para a direita. Perfeito. Então, conseguimos esse design e podemos torná-lo
mais razoável. Acho que acabamos
para este álbum, nesta parte aqui precisamos
trabalhar mais uma coisa. Precisamos adicionar nosso modelo, amor
deles por esta lista de álbuns de
anúncios. Então vou parar este
vídeo aqui e continuaremos com
a próxima palestra. Vejo você na próxima
palestra. Adeus.
4. Design de diálogo modal e prototipagem de sobreposição: Bem-vindo de volta mais uma vez. Nesta parte,
vamos projetar nossa caixa modelo para esta. Então, vamos projetar esse
tipo de caixa de modelo para criar álbum quando o usuário
clicar neste botão. Para isso, em primeiro lugar, precisaremos criar um quadro. Então eu vou selecionar um quadro aqui e vou apenas
desenhá-lo aqui é em vez de
apenas selecionar, podemos selecionar neste formulário. Dessa forma, vou
chegar a dez para o raio. E vamos mudar o
nome dessa família pode dizer modelo de álbum. Então, vamos ter este. Agora. Podemos fazer isso dessa maneira. Então, podemos adicionar esse texto aqui. Vou adicionar criar álbum. Isto é, este é apenas um texto
normal que podemos adicionar. Mas se você quiser, você pode alterar a epigrafia, o estilo da fonte. Mas vou manter
seu senso de 16. Vou adicioná-lo. 14, eu acho. Ok, então vamos
colocá-lo no centro. E agora precisamos
projetar nosso filtro de entrada, preenchimento
de entrada de design. Vou pegar metade
desse retângulo e então podemos
projetá-lo dessa maneira. E vamos mudar isso para dez. Ou, se você quiser,
também podemos dar para 20. E agora vou
adicionar um derrame aqui, é que o traço vai ser um. E para essa cor de preenchimento, vou mudá-la para branco. Então, o que podemos fazer? Podemos adicionar um
texto de espaço reservado dentro deste. Podemos dizer o nome do álbum. É um tipo de
texto de espaço reservado que temos aqui. E a partir daí, o que posso fazer? Posso adicionar mais um botão aqui, e posso adicionar 20 aqui. E agora vamos fazer o mesmo tamanho. Se você vir esse tamanho
vindo desse tamanho, esse ícone, significa
que ele está no mesmo tamanho. Mas ainda assim, podemos adicionar
layout, grade de layout. Então, podemos adicionar coluna. A coluna será cinco. Agora podemos
entender facilmente se está
no mesmo tamanho do nó. Então, se for dessa maneira, se você ver que esse
sinal está aparecendo, significa que é, ele começou no mesmo tamanho. Também podemos alterar a altura
disso um pouco. Tudo bem, agora,
não precisamos mais ter esse show de grade. Então, vou fazer a bala. E agora vou adicionar
cor desse grupo. Então, vou nessa
cor ou talvez nessa cor. E então aqui podemos
adicionar um texto aqui. Então podemos dizer Salvar. E podemos colocar esse nome aqui. Ok, então agora não poderemos vê-lo porque não
conectamos este. E aqui eu quero ter um botão Fechar para que,
quando o usuário clicar nele, possamos desativar nossa caixa de diálogo modal. Para isso, novamente, podemos simplesmente
ajudar esse plug-in. Vou dizer ícone de
fechar aqui. Vou começar. E eles têm esse ícone próximo. Podemos selecionar este. E podemos colocá-lo aqui. Mas eu adoraria
aumentar o tamanho deste. Talvez esse tamanho. E então, tudo bem, tão rápido
precisamos colocá-lo
dentro deste modelo. E então podemos adicionar um
pouco aqui. Acho que vamos
ajustá-lo aqui. Legal, parece muito bom. Mas outra coisa é
que precisamos alterar o fonte
do dia dos
nossos espaços reservados porque na prisão, o tamanho da fonte
precisamos de um tamanho menor. Podemos selecionar. Nosso 2416 ainda é maior, então vou dizer 12. Acho que para esses
textos padrão podemos mantê-lo até 20. Ainda assim, parece muito bom. Então, agora é hora de adicionar essa
prototipagem para esse modelo. Então, como você pode fazer isso para fazer isso? Tão rápido, rápido no protótipo. E quando o usuário
clicar neste botão, mostraremos essa caixa de diálogo modal. Então,
agora temos essas interações, clique neste. Clique aqui. Agora, onclick, está
totalmente bem. Então, em vez de a marinha chegar, vamos mostrar meios abertos
ou abertos excessivamente. Vamos mostrar que a caixa de diálogo
modal é meio que ser modal pop-up
no mesmo ritmo. Então, se eu clicar nele, ele vai me perguntar
o destino onde,
qual modelo eu quero mostrar ao nosso nome moderno é
criar um modelo de álbum. Agora ele está conectado
com este. Agora aqui temos
algumas opções. O que é exatamente? Então. Faça isso antes disso, vamos tentar o que podemos ver aqui? Então agora temos este
e podemos ver esse modelo, mas não podemos ver
modelado corretamente. Mas normalmente, quando
abrimos um modelo, nosso plano de fundo é meio decibel. Certo? Outra coisa é que,
se eu clicar neste botão, ele não será desativado. Se eu clicar em, ele não
será visível. Mas devemos adicionar essa
funcionalidade é como podemos fazê-lo? Então, aqui temos uma opção que é chamada adicionar um
plano de fundo por trás das sobreposições. Então, é isso que precisamos. Agora, podemos mudar a sentença
dispersa. Agora, devemos ver pouca cor de fundo
que normalmente temos. Mas se você quiser, se
precisar de mais cores, você pode alterá-la para 50%. Agora, poderemos ver
mais fundo cinza aqui. É assim que isso vai
funcionar, mas ele tinha ido embora. Então isso é aqui que temos, tudo bem, então agora podemos fazê-lo. Mas agora, se eu clicar fora, ele não vai
decibel, mas normalmente ele deve desabilitar quando
eu clico fora. Para isso, há outra opção chamada
fechar ao limpar. Então, se eu selecionar este
e, em seguida, se eu clicar nele, você simplesmente vai
desabilitar vai fazer o dobro, vai fazer o dobro, mas
nosso ícone não está funcionando. Então, para isso, o que
teremos que fazer. Agora, clique neste ícone. Aqui. Precisamos clicar nas
interações onclick. E aqui temos
roupas desligadas e opção. Agora, não vamos a lugar nenhum. Há um motivo pelo qual não
precisamos selecionar navegar
ou abrir sobreposição. Em vez disso, teremos que
selecionar o brilho. Isso significa que queremos
fechar nosso diálogo modal. Então, agora podemos ver sobreposição próxima. Temos este aqui. Então, agora, se eu clicar
nele, ele vai fechar. Se eu clicar em, ele
vai fechar. Se eu clicar nele, ele
vai fechar. Ok, então agora outra coisa, temos alguma
opção de menção também aqui. Então aqui temos a opção de
animação, como você quer mostrá-la
instantaneamente, dissolver ou se mover. Então, se eu selecionar a morfina, e aqui
temos essas opções. São, podemos selecionar este de difícil se você quiser fazê-lo. E também podemos
alterar a altura para 600 MS. Agora vamos
ver como ela se parece. Eu posso ver que nossa caixa modal
está vindo do difícil. Está indo duro. Então, em vez de entrar e sair fáceis, podemos simplesmente fazer com que seja dentro. Agora. Acho que não
poderemos ver essa coisa. Ok, então vou me mover
com facilidade. E aqui temos
este está em 600 metros. Se você quiser fazê-lo
do lado esquerdo, você pode selecionar o lado esquerdo e,
em seguida, ele
virá do lado esquerdo. Você pode ver que uma
voz modal está vindo do lado
esquerdo e
vai para o lado esquerdo. Essas são as opções que
temos em nossa Figma. Se você os quiser de baixo
e então você pode fazê-lo. Ele virá de baixo e nosso plano de fundo está desativado. Essa é a beleza da prototipagem
figma, então eu realmente gostei. Então, vou selecionar
este top em vez de 34, e depois vou
selecioná-lo para 300. E vamos ver como ele se parece. Parece muito bom. E se eu clicar
nele, ele vai embora. Tudo bem, então implementamos nosso sistema de prototipagem
aberto excessivamente. E vou parar este
vídeo aqui. Continuaremos a partir
da próxima palestra.
5. Reprodutor de música e design de listas: Bem-vindo a esta palestra. Nesta parte, tentaremos
projetar nosso resto das peças. Agora precisamos projetar
nosso carrinho de música, tudo bem, então sabemos qual
parte anterior até agora
concluímos esta caixa de modelo
e parece muito legal. Fizemos um design muito bom. E agora vamos
tentar adicionar essa parte. Tudo bem, então, para isso,
o que podemos fazer? Basicamente, agora vamos passar
para a parte do design. Então, agora vamos
projetar nosso carrinho rapidamente. Então, teremos que projetar nosso
cartão a partir daqui, estudaremos. Então, vou ajudar
essa ferramenta retangular. E daqui, vou
levar esse design até este cartão. E deve ficar assim. E vou
adicionar isso a dez. Vamos ver como ele se
parece com este cartão. Então, ele tem esse design e
tem essa cor cinza. Isso não é um problema. Portanto, temos esse design de
cartão e
no mesmo tamanho e na mesma
distância, nós o temos. Então eu só queria saber
que se o adicionamos, ok, então temos este
na mesma altura e peso. Agora, precisamos projetar
nosso para que possamos fazer, podemos mudar o nome
desse retângulo. Podemos renomeá-lo e
podemos dizer esse cartão de música. Agora, temos que adicionar nosso ícone. Então, para isso, vou adicionar este plugin e, em seguida, esses
ícones de preenchimento. A partir daqui, posso dizer música. Então eu deveria ser
capaz de ver todo o ícone. Então, temos esse ícone de ferramenta e, em seguida, no meio,
temos este 1. Primeiro, vou
levar este aqui. E então vou
levá-lo para dentro de casa. E então precisamos mudar a altura
e o branco neste, talvez 35 por 35. Agora eu posso, posso arrastar este. Posso arrastar isso para aqui. E então vou
selecionar este ícone. E novamente, precisamos
colocá-lo dentro desta casa. E também podemos, então podemos colocá-lo
no centro deste. Depois disso, precisamos, podemos pegar este ou também
podemos girar este. Mas é melhor pegar este porque você já tem
esse ícone no plug-in. Então, se você estava projetando
qualquer tipo de web, tentou usar diferentes
tipos de plugging, isso torna seu trabalho raramente fácil. Você não precisa
criar esse tipo de ícone de novo e de novo. Então você só precisa
usar este para que possamos
projetar seu eu vou trabalhar muito rápido. Então, dessa forma, você também pode entender isso se você tiver
exatamente a mesma altura e largura. Legal, então parece assim. Então, primeiro, vou, então o que posso fazer agora? Podemos selecionar esses três ícones e, em seguida, podemos reproduzir este
arrumado para que possamos ter
certeza de que temos exatamente o mesmo fio entre
esses três ícones. Você pode ver que ele foi ajustado. Agora aqui também podemos ver que
ele tem a mesma altura e largura e exatamente o mesmo espaço entre ambos os
lados desses dois. Então, não vou fazer
nenhuma alteração aqui simplesmente vou
fazer deles um grupo. E então vou
dizer ícone de música aqui. Legal. Agora temos nossa duração, nome do
álbum e este ícone. Então, para isso,
vou ajudar essa ferramenta d. Então vou colocar o texto. Então, temos isso, temos isso. Temos esse tamanho de fonte maior. Agora. Então deixe-me primeiro gens. Primeiro. Eu preciso mudar o tamanho da
fonte deste para 20, eu acho. E então podemos ajustá-lo aqui. E posso simplesmente
dizer, Steve, 0,56. E ele deve começar a partir daqui. Parece bom, mas deixe-me tentar se pudermos
consertar algumas coisas aqui, ele deve começar
do tamanho para
que fique no centro. Não, não está
no centro porque temos esse ícone é
maior do que este, então devemos mantê-lo
do resultado final. Desta linha. Quero dizer, desta linha. Agora parece bom, mas ainda assim, não
vai ficar bem aqui. Agora está no centro. Então, temos essas
coações mostradas aqui e podemos fazer, podemos mudar a
cor da duração. Talvez possamos escolher essa
cor e a consertaremos mais tarde. Mas antes disso, deixe-me
tentar adicionar mais um texto aqui, então vou
duplicar esse texto. Sinto muito, não funcionou. Então eu vou pressionar Command D. Então eu só preciso selecionar este
T e depois duplicá-lo. E agora vou colocá-lo
exatamente na mesma distância. Talvez aqui, eu possa colocá-lo. E aqui vou dizer
o nome da música. Podemos dizer. Vamos dizer
música rock, como parece. Então, parece assim, mas teremos que
alterar o tamanho da fonte. Não precisamos ter US$0,21. Precisamos ter 15 tamanhos de fonte. Agora temos esse design. Certo, legal. Então, temos esse
flip no tamanho da fonte. Agora. Acho que podemos
mudá-lo para 14. E então podemos mantê-lo dessa maneira para
que fique no centro. Está no centro. E mais uma coisa
que podemos fazer aqui, podemos adicionar nosso ícone aqui, que
será esse ícone de música. Vou verificar este 1. Primeiro. Vamos colocá-lo em casa
e depois arrastá-lo para aqui. E nós podemos, temos esse 190 a 192 ou podemos simplesmente r, podemos fazer isso arrumado para
que tenhamos a mesma distância. E o que é esse? Este ícone de música, esta
bolota de música dentro do ícone da música. E então essa música rock
do que a duração. E agora podemos arrumar. Agora temos a mesma distância. Objetivo, temos a
mesma distância agora. E agora vou mudar
a cor desse item. Então, para mudar a
cor do texto. Podemos fazer isso dessa maneira. E para este,
podemos manter esse ícone. Mas outra coisa que
podemos fazer é aqui. Então agora temos essa opção. Então agora temos nossa música. Então, para mudar essa cor
deste cartão de música, ou podemos tentar adicionar um
pouco dessa cor. E vamos ver como ele se parece. Parece assim, mas ainda assim podemos aplicar nosso sistema de gradiente
linear. Então agora parece
isso, não parece bom. Podemos mantê-lo dessa maneira. Só estou tentando adicionar diferentes tipos de cor de
fundo. E como você pode
explorar este? Então, se você precisar, se você
quiser adicionar gradiente linear, então você pode fazê-lo dessa maneira. Certo? Então, podemos usar
este dessa maneira. Mas se adicionarmos esse
pouco de escuro, então ele
ficará assim. E isso também vai
ser isso. Certo? Então, temos
essa opção aqui. Parece muito bom. Podemos manter essa cor. Então, agora podemos fazer todo
esse item em um grupo. Então, tudo está em grupos. Vou fazer disso um grupo. Posso dizer item de música. Agora, posso simplesmente me deixar verificar se realmente
selecionamos essa cor. Então, o que tínhamos neste aqui, nós tínhamos essa cor. Mas agora eu adicionei essas cores. Acho que parece muito bom. Podemos manter essa cor, mas uma coisa que
posso mudar aqui, posso mudar a
cor desta. Em vez dessa cor. Talvez essa cor preta
ficasse muito bonita aqui. Ok, então agora temos
esse item de música. E agora vou
fazer uma duplicata. E então vou
colocá-lo aqui a esta distância. Vamos ver como ele se parece. Parece bom. Agora eu posso fazer
duplicar, duplicar e várias vezes posso
tentar adicionar este. Então, temos essa lista
de músicas agora e aqui, e o último ícone para este, como já selecionei desse estilo
de cor, vou mantê-la assim. E o que aconteceu aqui, por que perdemos todo esse item. E nós temos este aqui. Ok, então eu cometi um erro aqui porque só precisamos selecionar este
em vez dessa cor. Então, vou
pressionar Command J. Ok, então o que eu fiz
basicamente selecionei essa cor de fundo para
a parte integrante, eu só preciso selecionar este cartão. E então,
a partir daqui , dessa cor ainda é, vou selecionar esta. Agora ainda é, somos
capazes de ver nosso design. Então eu realmente gosto desse. Tudo bem, uma
coisa que eu posso fazer, posso mudar essa
cor preta aqui para a cor branca. E parece bom. Também posso alterar essa cor para a cor
branca para este
item, este. E também podemos
mudar essa música. Você pode selecionar esse
grupo e alterar essa cor para branco
para este, e também esse ícone
para a cor branca. E outra coisa
que agora precisamos
fazer é que precisamos
mudar este. Então, uma coisa que eu
preciso fazer isso aqui, deixe-me ficar petrificado por 35. Vou remover
este daqui, e vou para este aqui. Tudo bem? Então eu vou dizer, vou adicionar um
ícone diferente para este leitor de música. Vou dizer este item aqui. E vou dizer que
você contratou pela D5. E, em seguida, basta arrastá-lo aqui. Então agora temos esse design. Então, parece que
concluímos com sucesso nosso design. E se eu clicar nele, podemos ver nosso álbum de
criação aqui. Outra coisa é que,
a partir daqui, você pode compartilhar seu projeto para
usá-los com o desenvolvedor. E se você clicar na inspeção, os desenvolvedores
poderão ver esconder em uma ampla para o cartão e tudo
aqui vai mudar. Você pode ver o vento
e se esconder nesse cara. 1031031. Oi, D6 é cinco, altura é seis é cinco. E tudo o que você pode
compartilhar com a equipe. E agora vamos
exportar esse design. Para exportar esse design,
o que podemos fazer? Agora não precisamos mais ter
essa opção de grade. Vou remover este. Vamos exportar esse design. Então, o que posso fazer? Posso clicar em exportar e
, em seguida, selecionar PNG JPEG. E então posso dizer exportar para casa, ele vai exportar. E se eu clicar nele, poderemos ver nosso novo design agradável
que acabamos de fazer. Tudo bem, vou
fazer o upload desse design. Vou compartilhar esse design. Agora. Se eu quiser exportar este, basta selecionar este. E, em seguida, também clique no
JPEG e exporte criar álbum. E temos esse design. E para compartilhar o projeto. Você sempre tem esse
xerife mostrado com uma equipe. Você pode simplesmente puxar
o nome e simplesmente enviar ou
simplesmente copiar o link. Tudo bem, terminamos
este belo design. Vou parar este
vídeo aqui. Adeus.
Yazdani Chowdhury, UI/UX Expert, Mobile & Web App Developer
