YT YouTube2Text

YouTube2Text → Transcripts → Curso Gratuito de Figma em 2 horas (com certificado)! 😍

Curso Gratuito de Figma em 2 horas (com certificado)! 😍 — Transcript

by She is a Creative | UI UX Design Freelancer · 35,054 words · 1,979 segments · language pt-BR · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Este é o Alfred e ele está urgentemente da sua ajuda, você quer aprender Figma. O Alfred quer
0:07ajudar todas as vacas deste mundo a construção de um novo restaurante vegetariano. E é por isso
0:13que nesse vídeo nós vamos aprender a fazer um site incrível como esse que está na sua tela,
0:18que é para ajudar o nosso amiguinho Alfred a salvar todas as vacas do mundo. Nós partiremos
0:24do simples que capiroto é o Figma, passaremos por ferramentas, navegação e chegaremos
0:29até assuntos avançados como auto layout, variantes, variáveis, componentes e muito,
0:34muito, muito mais. Você está preparado para ajudar o Alfred? Mas antes da gente começar,
0:40deixa eu te contar um segredinho. A melhor forma de aprender Figma é praticando, viu? Não adianta
0:46ver o vídeo e não fazer nada. Então aqui, se você quer acompanhar esse vídeo comigo, a melhor forma
0:51de fazer isso é fazendo o design lado a lado. Se estiver com dificuldade, calma, respira,
0:58pausa o vídeo, tenta de novo e se ainda assim ficar com dúvida, por favor, deixe seu comentário,
1:04mas não deixe de praticar. Não desista na primeira dificuldade, porque você só vai aprender a usar
1:09ferramenta se você realmente estiver praticando, beleza? E se você digitar figma.com, você vai
1:17cair nesse site aqui, esse é o site do Figma. E como você pode ver, o Figma é uma ferramenta para
1:23você criar protótipos. Está vendo aqui que tem uns exemplinhos até de nossos aplicativos e assim por
1:27diante. É uma coisa bem importante do Figma, por exemplo, eu quero criar um protótipo de um site,
1:31um protótipo de um aplicativo, de um software. Você consegue criar como se fosse o desenho
1:36desse software, simular como seria o funcionamento dele, mas é muito importante você saber que você
1:42não está criando o produto final. Vamos supor que você está criando uma vaca no Figma. Você não vai
1:46criar a vaca materializada como eu tenho o Alfred aqui. Por mais parecido que seja com o Alfred,
1:52o que você tem é um protótipo, é um desenho de como seria o Alfred depois de produzido,
1:57por exemplo. No caso do Figma, o que acontece é que normalmente você vai fazer o seu design,
2:01depois que você tiver com o seu design prontinho, vai mandar para um desenvolvedor ou para uma
2:05ferramenta no code, que é uma ferramenta sem código, e só então esse site, ou esse aplicativo,
2:10ou esse software vai estar pronto para produção, beleza? Pra gente começar bonitinho, eu sei
2:14que vocês são bonitinhos, você vai vir aqui, a primeira coisa que você vai fazer é você vai vir
2:17nesse Get Started for Free, chiqueiro irmão, né? Você vai lá e vai começar de graça, você vai criar
2:24a sua conta, assim que você criar a sua conta, em seguida você vai fazer o seu login. Quando
2:30você fizer o seu login, você vai cair em uma tela muito parecida com esta aqui. Muito provavelmente,
2:35na primeira vez que você fizer o login, você vai estar em um plano gratuito, ou seja, o Figma é uma
2:40ferramenta que se chama de freemium, ou seja, ele tem versões gratuitas e versões pagas. Na versão
2:46gratuita, ela é muito boa, dá pra você usar, dá pra você fazer muita coisa. Ela tem algumas
2:50limitações, por exemplo, não pode usar vídeo, tem algumas limitações ali, mas a maioria das coisas a
2:57gente vai conseguir fazer. Eu vou fazer todas as aulas desse curso seguindo pela versão gratuita
3:02pra vocês verem o tanto que é possível usar, mas saibam que tem as versões pagas, que dá pra fazer
3:06ainda mais coisas, e assim, minha sugestão é, se você começar a ganhar dinheiro com isso, se você
3:10realmente já está na área, vale a pena investir numa ferramenta, beleza? Você entra no Figma,
3:14você vai cair numa tela parecida com essa. Aqui tem o time que você está fazendo parte, você pode
3:18até ter mais de um, tá vendo que eu tenho aqui um que é pago, que é onde eu trabalho realmente,
3:22e eu criei esse time gratuito pra seguir o curso com vocês. Tem aqui, por exemplo, essa pasta aqui,
3:27que é um projeto. Se você olhar aqui em projeto, você vai ficar desesperado, você vai falar,
3:30meu Deus, eu só posso ter três arquivos de design, eu nem sei o que é Figjam, Figjam é tipo o Miro do
3:37Figma, nem vou entrar nesse curso sobre ele, mas saibam que ele existe. Só posso ter três arquivos
3:41de design? Não, gente. Se você quer trabalhar no gratuito, a minha sugestão é a seguinte,
3:45não trabalhe no projeto, trabalhe em rascunhos. Você pode abrir aqui, em create new, aperta nessa
3:50setinha, design file, e a hora que você clicar aqui em design file, você já tem um arquivo novo.
3:55Então essa é uma forma de você criar e começar um arquivo novo, beleza? Nesse curso a gente vai
4:00fazer seguindo o arquivo que vocês vão duplicar, mas saibam que se vocês precisarem criar do zero,
4:04é esse o caminho, beleza? Até tá me dando aqui algumas coisas, enfim, sim, eu quero mexer no
4:09rascunho mesmo, porque eu não quero pagar, beleza? Além disso, é importante você saber que se você
4:14quiser, é possível fazer o download do Figma. Por exemplo, aqui eu tô no navegador, se você quiser,
4:18você pode baixar aqui, tem o aplicativo do Figma instalado e ele é bonitinho, é a mesma coisa,
4:23só que ele é um aplicativo e daí ele não fica no navegador, não fica no teu Google Chrome e assim
4:27por diante. Vou deixar o link também pra vocês fazerem o download, se vocês preferirem baixar,
4:31se vocês preferirem usar no desktop, fica da preferência de cada um, beleza? A primeira
4:35coisa que eu vou fazer é sair desse arquivo, já falei que a gente não vai usar ele, vou clicar na
4:39marquinha do Figma aqui e vou apertar em Back to Files, ou seja, voltar para os arquivos.
4:43Nessa tela aqui, eu quero chegar na comunidade do Figma, no local em que você encontra templates,
4:49arquivos, plugins, várias coisas que a comunidade, outras pessoas deixam disponíveis e a gente pode
4:54utilizar. Vou fazer o seguinte, vou clicar no meu nome, vou vir aqui em Community Profile
4:58e vou clicar no meu nome novamente e ele vai cair aqui no meu perfil na comunidade do Figma.
5:03Vocês podem ver que o meu aqui já tem várias coisas, enfim, já vai falar sobre alguma delas,
5:07mas se você não quiser, poxa, não tenho nada, o que eu vou fazer aqui? Pode clicar na marquinha
5:11do Figma, por exemplo, de qualquer momento, não vamos usar muito nesse curso, mas assim,
5:14se você quiser, tem muita coisa pra você procurar, design systems, plugins, até templates de light,
5:20de quadros, de várias outras coisas. Na descrição desse vídeo, você vai encontrar o link para dois
5:24deles. O primeiro deles é esse daqui, o início, que é o arquivo em que a gente vai começar. Você
5:28vai apertar aqui em Abrir em Figma, Open em Figma, você vai escolher, no teu caso, provavelmente,
5:34talvez ele nem dê essa opção, porque vocês só vão ter um time, no meu caso, eu tô com dois, eu vou
5:38mandar abrir no meu time gratuito, que é onde a gente vai criar, e a hora que eu clicar aqui, ele
5:42já foi, já tá carregando, já foi lá pro meu Figma e já abriu o arquivo. Como eu tô no navegador, ele
5:49tá sugerindo que eu abra no aplicativo, eu prefiro mexer no aplicativo desktop e não no navegador,
5:54beleza? Preferência pessoal. E é isso que você precisa fazer, beleza? Aqui na descrição do vídeo,
5:58vai clicar no link, nesse daqui de início, vai apertar em Open em Figma e vai abrir esse
6:03arquivo pra você iniciar, beleza? Além disso, se você quiser, em qualquer momento, eu tô deixando
6:07disponível também uma versão final, que é a versão final do projeto, se você apertar Abrir no Figma,
6:12o que ele faz quando eu mando abrir no Figma, ele duplica o arquivo, então não precisa ter medo,
6:17porque você tá mexendo só no teu arquivo, ele duplicou pra tua conta, por exemplo, aqui tá vendo
6:21que já tá aqui aberto, esse é o resultado final, se vocês quiserem ver em qualquer momento, como
6:26que ela fez isso, como que ela fez aquela coisa, enfim, abre lá o final, ele vai tá bonitinho,
6:29sem querer eu abri o inglês, mas eu vou deixar o de português pra vocês, se eu voltar em Back to
6:33Files, o que vai acontecer? Nos meus rascunhos, agora, tem 3 coisas, aquele arquivo inicial
6:38que a gente criou, o arquivo de início, que é onde a gente vai trabalhar e o arquivo final,
6:42se você quiser usar como referência, beleza? E pra gente começar, abra esse arquivo aqui de início,
6:47que é onde a gente vai começar a trabalhar. Então a primeira coisa que a gente vai fazer é conhecer
6:50a interface do Figma, onde ela fica cada coisa, onde que você coloca os documentos e tudo mais,
6:55pode ser que a tua interface esteja um pouco diferente da minha, viu, se você estiver usando
6:58a versão antiga da interface, mas essa daqui já é a mais atual, tem a barra da esquerda,
7:02a barra da direita e esse menuzinho aqui flutuante aqui embaixo, beleza? Tem 3 coisas, essa barra da
7:07esquerda, ela tem aqui camadas, por exemplo, deixa eu só criar aqui alguns elementos aleatoriamente
7:12no meu layout, só pra eu poder mostrar pra vocês, e quando tem elementos, ele tem aqui,
7:16cada elemento é uma camada, e normalmente aqui eu consigo manipular eles, tanto clicando aqui,
7:21quanto clicando nele e assim por diante, além disso, aqui tem as páginas, por exemplo,
7:25essa é uma página, eu tenho outra página que eu já deixei configurada, a gente já vai chegando nessa
7:28página com esse arquivo, que é só uma organização de variáveis do nosso arquivo, se você quiser ver,
7:33cores e assim por diante, e a gente vai trabalhar nessa página 1, inclusive a gente pode já renomear
7:38essa página, eu dou dois cliques nela, tá vendo aqui, no nominho, ou senão clique direito,
7:43Rename Page, pra renomear a página, e você pode dar um nome pra ela, por exemplo, lá,
7:47o Protótipo. Se você quiser, também é possível criar mais páginas, por exemplo, maisinho, enfim,
7:51eu não tenho certeza se o Plano Gratuito tem limite de páginas, mas qualquer coisa,
7:54saiba que se você não puder, porque já tem três páginas aqui, aí qualquer coisa, vocês deletam
7:58algumas, se quiserem criar, beleza? Mas nós não vamos precisar, vamos aqui no Protótipo, além
8:03disso, então, na barra da esquerda, o que você encontra? As camadas do seu arquivo, que é cada
8:07elemento do seu arquivo, se tiver aqui um texto pra pular, ele já tá aqui, também como uma camada,
8:12e camadas podem viver dentro de camadas, se eu mover ela pra dentro, aqui nesse frame,
8:16nós já vamos explicar o que que é um frame, ele já tá aqui, dentro da camada, eu posso colapsar,
8:20abrir e assim por diante. Além disso, tem os Assets, por exemplo, lá, se você tiver, usar uma
8:24biblioteca, se o teu arquivo tiver componentes, enfim, várias outras coisas que a gente vai falar,
8:27eles vivem aqui também nos Assets, se você clicar aqui nesse botãozinho, ele fica comprimido,
8:32ou senão ela pode ficar expandindo, normalmente a gente trabalha com ela expandindo, porque a gente
8:35usa o tempo inteiro, esse painel aqui da esquerda, dá pra clicar e aumentar, diminuir e assim por
8:40diante, eu gosto, normalmente, do tamanho médio, no painel da direita, pro outro lado,
8:43ele tem aqui, configuração da página, se você quiser, se mudar a cor do background,
8:49eu acho que ninguém usa isso daqui vermelho, é aquela coisa, né, com grandes poderes,
8:52vem grandes responsabilidades, mas se você quiser, é possível, beleza, recomendo? Não,
8:58às vezes, assim, mudar pro Dark Mode, dependendo do projeto, até pode ser, eu normalmente não mudo,
9:02sendo muito honesta com vocês. Além disso, aqui tem as variáveis, nem vou entrar muito a fundo,
9:06porque depois a gente vai falar delas, tem os estilos aqui, até já tem alguns configurados,
9:10e aqui as opções de exportação, por exemplo, lá, se eu quiser que alguém exporte, se eu expor que
9:13isso aqui fosse uma imagem, enfim, posso apertar no maisinho e marcar aqui, pra exportar como PNG,
9:18enfim, eu consigo exportar qualquer imagem do meu arquivo, isso é importante, principalmente,
9:21pra fazer repasse pra desenvolvedor. Além disso, outra coisa interessante de notar,
9:25que esse painel da direita, ele é um painel de propriedades, aqui ele mostra as propriedades
9:29do arquivo, porque não tem nada selecionado, mas se eu selecionar, por exemplo, vou selecionar o
9:33texto, ele já me mostra aqui propriedades do próprio texto, eu posso mexer, mudar, aumentar,
9:38mudar pra Negrito, pra Light, pra Itálico, várias outras coisas do meu texto, ele já aparece,
9:43esse preenchimento é o preenchimento do texto, selecionei o frame, preenchimento do frame,
9:48eu posso mudar de cor também, então, ele é um menu contextual, dependendo do que tiver selecionado,
9:52ele te deixa selecionar outras coisas, beleza? E por fim, a barrinha flutuante aqui,
9:56ela tem algumas coisas, aqui tem as ferramentas de seleção e de mover, a gente já vai aprender a
10:00se locomover aqui no nosso arquivo, depois eu vou falar mais de ferramentas, ferramentas de frame,
10:04de seleção, tem várias ferramentas aqui que a gente vai utilizar durante o nosso projeto.
10:08Tem aqui esse iconezinho aqui, se você quiser deixar comentários. O atalho para
10:12deixar comentários, se você preferir, é a letra C. Você pode digitar um comentário aqui, tipo, olá, e
10:16ele já tem um comentário no arquivo. No meu caso, eu vou só clicar aqui e vou deletar essa thread,
10:20porque eu não quero comentários no meu arquivo. Essa parte é a AI do Figma. Na verdade, são duas
10:25coisas. Um é a AI do Figma. Se eu selecionar esse quadrinho aqui, clicar aqui, digitar Image, ele
10:31já me dá a opção de gerar uma imagem. Eu posso ir lá e digitar Dog, e ele já vai gerar um cachorro
10:36para mim. Importante ressaltar que essa AI está em beta. Então, por enquanto, ela não é um custo
10:40a mais no plano e coisas assim, mas provavelmente vai ser pago no futuro. Adiciona o meu dog, enfim,
10:45gerou até outros dogs para mim. Mas o que eu mais gosto, na verdade, aqui, não é essa parte
10:49da AI. O que eu gosto é isso daqui. Está vendo que tem esse menuzão aqui? No fundo aqui, o atalho
10:53para isso daqui, CTRL + K. Sempre que eu precisar de qualquer coisa que eu não lembro no Figma,
10:58eu vou apertar CTRL + K. Por exemplo, eu quero duplicar e eu não lembro como duplica. CTRL + K,
11:03dupli... Opa, ele já me mostrou a opção de duplicar e até o atalho. CTRL + D duplica,
11:08então. Cmd + D. Então, agora eu vou apertar CTRL + D. Claro que se eu não quisesse apertar,
11:12eu posso apertar CTRL + K. Duplicate, e se eu der Enter, ele também já vai duplicar certinho. E isso
11:17serve para qualquer coisa que você não lembra no Figma. Por exemplo, eu quero exportar esse
11:21frame. CTRL + K, export para PDF, ele já mostra várias opções. E tem, inclusive, aqui, plug-ins.
11:27Se você mudar para essa aba, você pode ver que tem muito, muito, muito plug-in no Figma. Vale a pena,
11:31a gente vai utilizar alguns aqui durante o curso. Mas é importante você saber que isso existe,
11:35beleza? A gente vai usar bastante esse painel. E, por fim, tem esse switch aqui
11:39que é só para o desenvolvedor mesmo, para ele inspecionar o arquivo. Provavelmente,
11:42o meu aqui não está habilitado porque eu estou numa conta gratuita. Mas na conta paga,
11:46o desenvolvedor consegue clicar, ver detalhes do arquivo e tudo mais, beleza? Mas no nosso caso,
11:51a gente nem vai se preocupar com isso. Por fim, eu vou só deletar isso aqui. Cliquei, arrastei
11:55e apertei Delete. E tem uma coisa que eu quero mostrar para vocês, que é a única configuração
11:59que eu normalmente mudo no meu Figma. Vou vir aqui em Figma, provavelmente no Windows, em
12:03File. Vou vir em Settings. E aqui, Nudge Amount, eu normalmente mudo esse Nudge Amount. O padrão é
12:0810. Eu gosto de usar 8. E, normalmente, eu gosto de aumentar as coisas de 8 em 8, mover de 8 em 8,
12:13desenhar um frame aqui. Até para ficar fácil de ver, eu vou colocar aqui o X como 0. Ele está na
12:18posição 0. Se eu mexer para o lado, o padrão vai andar de 1 em 1. Mas se eu segurar Shift,
12:22ele vai andar de 8, 16, 24, 32. Ele pode andar de 8 em 8. Se eu quiser aumentar, Cmd + Shift
12:29ou CTRL + SHIFT + setinha para baixo, ele vai aumentando sempre de 8 em 8. Aqui não dá para ver
12:34muito bem, porque eu não estava em múltiplo de 8. Mas aqui, vai para 248, 256, 264. E ele vai sempre
12:39de 8 em 8. Então, é uma opção que eu normalmente mudo. Pode ser que esteja diferente da de vocês,
12:43beleza? Antes da gente continuar, um recado importante. Cola aqui no nosso arquivo. Vem
12:48aqui na página de Assets. E, clicando nessa página, aqui tem todas as imagens e textos
12:53que a gente vai utilizar no nosso layout. O que você vai fazer é o seguinte. Você vai apertar
12:57dois atalhos. O primeiro é CTRL + A ou Cmd + A, para ele selecionar tudo na página. E o segundo é
13:03CTRL + SHIFT + E ou Cmd + SHIFT + E. Em seguida, você vai apertar em Exportar (Export). Você vai
13:09selecionar sua pasta. Cria ali uma nova pastinha, por exemplo. O meu projeto vai se chamar aqui,
13:13Vaca Alegre. E a hora que eu mandar salvar, se eu for na pasta que eu criei aqui, Vaca Alegre,
13:18ele já tem bem organizadinho todas as fotos, ilustração, marca tudo o que você baixou desse
13:24arquivo, beleza? Ele vem organizadinho assim, porque no meu arquivo ele está nomeado com
13:28essas barras. E cada uma dessas barras, ela cria uma pasta quando ela exporta, beleza? O texto,
13:33você tem duas opções. Aqui, eu vou fazer, a hora que eu for começar a fazer o meu layout,
13:37copiar esse texto aqui para a página de Protótipo. Eu vim aqui e apertei CTRL + C ou Cmd + C. Na
13:42parte de Protótipo, CTRL + V ou Cmd + V. E eu vou deixar ele coladinho ali. Se você preferir,
13:47você pode clicar no texto. Novamente, CTRL + A ou Cmd + A para selecionar tudo. CTRL + C para
13:52copiar. E se você quiser, você pode salvar em um bloco de notas, em algum local do texto,
13:55só para você ir copiando lado a lado, para não precisar digitar cada texto que eu vou falar
13:59no layout, beleza? A gente vai começar com um conceito que é um dos mais importantes do Figma,
14:03que é o conceito de frame. Para você criar um frame, você tem duas opções. Uma, você clica aqui
14:08embaixo, está vendo essa ferramentinha, esse quadradinho? Ele é um frame. Qualquer coisa,
14:11clica nessa setinha, seleciona aqui, frame. Ou o mais comum é aprender o atalho, que é a
14:16letra F. E a hora que você clicar e arrastar, você consegue desenhar um frame. Teoricamente,
14:21é só um retângulo. Porém, o Figma tem frame, ele tem o retângulo, que ele é uma forma, somente uma
14:26forma. E ele tem também a questão de grupo. Se eu juntar esses dois, eu posso apertar CTRL + G
14:31e agora ele é um grupo. E você vai dizer, por que eu vou usar frame e eu não vou usar retângulo,
14:35e eu não vou usar o grupo nesse caso? Retângulo é uma forma, apenas uma forma. Um formatinho ali,
14:39um quadradinho, um retângulo, nada mais que isso. Não serve para gerar grupo, não serve para nada
14:44além disso. O grupo, por sua vez, é uma forma de agrupar elementos e apenas isso. Ele é muito
14:49usado, por exemplo, quando faz ícones, quando mexe com arte, com vetores e assim por diante. O frame,
14:54por sua vez, é como se fosse um grupo com superpoderes, mas a melhor forma de pensar
14:58nele é com um container de outros elementos. Como assim? Precisa agrupar, CTRL + SHIFT + G. E aqui,
15:03se a gente seleciona o nosso frame, diferente, por exemplo, eu vou só selecionar dois retângulos
15:07aqui e apertar CTRL + G, só para mostrar a diferença entre um grupo e um frame. Primeiro
15:11que o frame aqui já tem o nominho que fica sempre visível no canvas, o que é muito útil. No grupo,
15:16eles não ficam visíveis. Se você aumentar um grupo, ele aumenta todos os elementos ali dentro,
15:21normalmente. O frame, por sua vez, no caso aqui, deixa eu colocar um elemento, apertei letra R,
15:25ferramenta de retângulo, coloquei um retângulo dentro do frame. Vou até colocar parecido
15:29com o que está ali em cima, dentro do nosso frame. Vou deixar igualzinho aquele grupo ali. O frame,
15:33por sua vez, se eu tiver dois elementos dentro dele, bem parecido com o grupo, a hora que eu
15:38aumento, ele não expande similar ao grupo. Até tem formas de fazer isso, mas eu tenho muito
15:42mais controle. Com o grupo, eu não tenho controle. No frame, por sua vez, deixa eu apertar CTRL + Z
15:46para desfazer aqui. Quando eu estou com o frame desse tamanho aqui, se eu quiser, por exemplo,
15:50eu quero aumentar, mas eu quero que esse retângulo fique sempre do lado direito. Então aqui,
15:53se eu apertar no retângulo, ele tem essas opções aqui que ele chama de Constraints, que é clicando
15:58nesse quadradinho aqui minúsculo, escondidíssimo. Por exemplo, se eu selecionar que eu quero que ele
16:03fique atrelado ao lado direito, clicar aqui ou mudar aqui, agora esse retângulo está sempre com
16:09a mesma distância em relação à direita do frame, como assim? Se eu aumentar agora o frame, ele vai
16:14ficar sempre do lado direito. Se, por exemplo, eu tivesse, deixa eu aumentar aqui um pouco e mover
16:18esse retângulo para cá, está vendo que tem uma distância aqui de 117 px. Segurei ALT aqui só para
16:25ver essa distância ou Option no Mac. Agora, sempre que eu aumentar, ele vai continuar com a distância
16:29de 117 px em relação à direita. E a mesma coisa vale, por exemplo, se eu aumentar essa carinha
16:35de cima e abaixo. O comportamento normal do frame é que se eu aumentar, ele não vai aumentar junto.
16:40Mas se eu quiser, eu posso selecionar o retângulo, apertando as Constraints, e eu posso dizer que eu
16:44quero que ele mantenha a mesma distância em cima e embaixo do elemento. Agora, se eu aumentar,
16:49ele vai esticar conforme o elemento. Então, essa é uma das diferenças do frame. Outra questão,
16:53por exemplo, eu posso ultrapassar o elemento dentro do frame, ele pode ultrapassar o tamanho
16:57do frame. O que aconteceu aqui? Ele sumiu? Sim, ele sumiu. Por quê? Porque essa opção Clip Content
17:02está ativada. Se eu desativar ela, eu posso conseguir ver o que está além do frame. Então,
17:05o frame é um container com superpoderes e ele é basicamente para envolver elementos. Eu acho
17:10ele muito equivalente à div do HTML. Se você está acostumado com o HTML, é praticamente a
17:15mesma coisa. Se você não tiver, fique tranquilo. Ele é diferente, por exemplo, de ser uma página.
17:19Porque eu posso ter, por exemplo, um frame, apertei a letra F, dentro de outro frame. Então,
17:23pode ter vários containers dentro de outros containers. Conforme você for usando o Figma,
17:26isso vai ficando mais fácil. E para a gente começar o nosso layout, eu selecionei tudo o que
17:30tinha aqui e apertei Delete. Vou apertar a letra F. E eu vou desenhar aqui um frame. E o que eu
17:34vou fazer? Eu vou colocar o tamanho dele. 1920 de largura por 1080 de altura. Até se você preferir.
17:42eu não quero desenhar, você pode apertar a letra E. E aqui, ele já tem vários presets. eu quero
17:46um MacBook Pro 16 polegadas. Ele já vai criar com o tamanho do MacBook Pro 16 polegadas. Uma
17:51coisa importantíssima que vocês vão aprender nesse curso é renomear as coisas. Sempre que a
17:54gente criar um elemento, a gente vai tentar já ir renomeando eles. Aqui está com o frame. Posso dar
17:59dois cliques no nominho dele ou apertar a letra CTRL + R para renomear. E eu posso dar um nome
18:05aqui, por exemplo, a nossa Home. A nossa primeira página do nosso site. E com isso, a gente já criou
18:10a primeira página do site do Alfredinho. Olha só que legal! Além disso, é extremamente importante
18:15que você saiba navegar no Figma para poder se localizar por aqui. O que é importante você saber?
18:19Se você estiver aqui no Canvas, se você apertar a barra de espaço, clicar e arrastar, ele faz esse
18:25movimento aqui que você pode ir andando por todo o seu Canvas. Além disso, tem dois atalhos que
18:30eu acho bem legais de você aprender. O primeiro deles, que é SHIFT + 1. Ele dá zoom para mostrar
18:35tudo o que tem no seu Canvas, tudo o que tem na sua tela. E o segundo, que é SHIFT + 2.
18:39Se eu selecionar um elemento, por exemplo, eu cliquei aqui no meu frame e apertei SHIFT + 2,
18:42ele dá zoom para o elemento que está selecionado. Por exemplo, se eu apertar a barra de espaço,
18:46cliquei e arrastei. eu estou com esse elemento selecionado agora e eu quero ver ele inteiro. Vou
18:50apertar SHIFT + 2 e ele deu zoom naquele elemento inteiro. Aquele momento, SHIFT + 2, SHIFT + 1 para
18:55ver tudo, beleza? E por fim, normalmente a gente vai trabalhar com o file aqui selecionado e não
18:59o assets. E com o design aqui selecionado e não o prototype. Então, vamos voltar aqui para Design,
19:04SHIFT + 2. Oi, Alfred aqui! A Maiane cabeça de vento esqueceu de ensinar dois conceitos muuuuito
19:15importantes para vocês. O primeiro deles é sobre o zoom. Olha minhas cabeçinhas lá perdidas,
19:25lá atrás no Canvas. Se você quiser me ver com mais detalhes é muito simples, basta pegar o seu
19:34mouse com rodinha e colocar o mouse perto da minha cabecinha de Alfred e você poderá rodar a rodinha
19:46para aproximar de mim. Olha essa roda, roda, roda e você chegará perto de mim. Além disso,
19:53se você não gostou da minha carinha, pode apertar menos no seu teclado, menos, menos,
19:59menos, eu vou ficar lá longe. Ou se você preferir, pode apertar mais, mais, mais, mais, mais e eu
20:06estou pertinho de novo. O segundo conceito que a Maiane "cabexa" de vento esqueceu de ensinar,
20:12é sobre como selecionar muitos elementos. No meu caso, como selecionar várias cabeças de Alfred.
20:20É muito simples, faz o seguinte, clica na cabeça, segura SHIFT, SHIFT e clica na outra cabeça, fica
20:29segurando, viu? E se você quiser, segura SHIFT de novo e clica em mais uma cabeça. A outra forma de
20:35fazer isso é simples também, mas ela é pelo painel de camadas. Nesse painel você pode selecionar a
20:43primeira cabeça, segura SHIFT de novo e seleciona a última. Agora ele vai selecionar todas as
20:52camadas no meio. Está vendo como é simples? Espero que eu tenha salvado esse vídeo. Beijo, tchau.
21:00Nesse curso, eu vou ensinar os conceitos pra vocês de uma forma um pouquinho diferente.
21:02Primeiramente, eu vou ensinar quase todos os conceitos básicos de Figma, como por exemplo,
21:06como criar e adicionar elementos, componentes e estados, básicos de prototipação, auto-layout,
21:12variáveis e estilos somente com um componente simples, que é o header, aquele topo do nosso
21:19site. E depois vocês vão ver que quase todos os outros elementos que a gente vai criar,
21:22eles são uma repetição desses conceitos, às vezes com uma forma um pouquinho mais complexa, um ou
21:27outro detalhe adicional, mas é muito de repetição e aprofundamento. Dá pra fazer coisas muito
21:32complexas, mas os conceitos, a base é normalmente a mesma, beleza? Estou aqui com aquele layout,
21:37com aquele frame que a gente já criou. Eu abri o arquivo final do Vaca Alegre, só pra pegar o
21:41header aqui, vou apertar SHIFT + 2 pra dar zoom no header, é esse elemento aqui que a gente vai
21:46criar, beleza? Vou apertar CTRL + C, CTRL + V, eu vou copiar aqui no meu layout, só pra eu ter ele
21:51aqui lado a lado, pra gente saber exatamente o que a gente vai criar. Tá vendo? Isso daqui é um frame
21:57também, é um container de elementos, tem vários elementos aqui dentro, é um container, maravilha!
22:01É um frame, como é que a gente cria um frame? A gente já sabe, né? Letra F, vou criar aqui,
22:06clicar e arrastar, eu posso até clicar e arrastar, ele até meio que gruda ali na bordinha, ele também
22:11gruda na bordinha, tá dentro do meu outro frame, posso clicar e arrastar aqui pra cima. No caso
22:16aqui, ele tá com 95 de altura, o meu original tá com 104, vou clicar aqui na altura, H: 104,
22:22um ponto que eu acabei esquecendo de falar antes pra vocês, quando eu apresentei a interface, se
22:26você clicar nessa setinha do lado da porcentagem, você pode ativar essa opção aqui, Property Labels,
22:32que são as etiquetas das propriedades, se você ativar ela, agora ele tem essas etiquetinhas,
22:36posição, alinhamento, transformação, dimensões, opacidade, normalmente eu deixo desativado só pra
22:41deixar o painel um pouquinho mais limpo, mas saibam que tem essa opção, aqui eu vou deixar
22:45só pra vocês se localizarem melhor também. Esse header, se eu seleciono ele, tem aqui uma borda,
22:50ele tá chamando do Base 10, por enquanto a gente só vai colocar algum cinzinha qualquer,
22:54e a gente já vai chegar nisso, vou apertar stroke, maisinho, por padrão, a borda é em todo o lado,
22:59no caso, eu vou clicar nesse quadradinho, e vou apertar aqui, bottom, parte de baixo,
23:03e agora a borda tá só embaixo, posso clicar aqui na cor, clicar e arrastar, pra deixar um cinzinha
23:08bem mais leve, bem sutil, enfim, e agora a gente já tem a base do nosso header, dois cliques,
23:13header, vou dar o nome do meu frame, pra já ficar organizado o meu arquivo. Outra questão, tá
23:17vendo que ele tem aqui essa marquinha, lembra das imagens que a gente baixou? Eu vou aqui no Finder,
23:21no seu caso do Windows, vai lá no Explorer, naquela pasta onde você baixou as imagens, procura
23:26marca, vaca alegre, marca SVG, clica e arrasta pro seu arquivo. E o que eu vou fazer pra mexer
23:31com essa marca? Eu posso redimensionar ela, se eu clicar e arrastar pela borda, eu consigo deixá-la
23:36de qualquer tamanho. Se eu segurar o SHIFT, ele já faz esse aumento ou diminuição proporcional.
23:41No caso de elementos de vetor, que é, por exemplo, quando ele tem esse clip path, ele tem elementos
23:47aqui, que são aqui, vector, normalmente o melhor pra aumentar e diminuir o vetor, é utilizar uma
23:52ferramenta que eles chamam de ferramenta de escala. Se eu apertar a letra K, ou se eu vir
23:56aqui embaixo nessa setinha e apertar Scale, ele já vai abrir essa ferramenta de escala. E aqui,
24:01no Scale, o que eu vou fazer? Eu vou colocar a altura, por exemplo, de 16. Então ele vai deixar a
24:05minha marca com 16 de altura. No caso, poxa, ficou muito pequenininho. Vou colocar aqui, por exemplo,
24:1020. Vamos deixar ela com 20 de altura, e agora ele já arrumou minha marca de forma proporcional.
24:14Em seguida, eu vou pegar essa marca e vou arrastar pra dentro do meu frame. Arrastei aqui dentro, ela
24:19já foi pra dentro do meu frame. Dá pra ver isso pelo painel de camadas. Agora a minha marca já
24:23está aqui dentro. Vou clicar e arrastar aqui, mais ou menos. Não precisa ser tão exato nesse momento,
24:27porque depois eu vou ensinar vocês uma forma melhor de fazer isso, beleza? Vou arrastar mais ou
24:30menos aqui, nessa mesma posição que está a minha outra marca. Em seguida, tá vendo que tem esse
24:35elemento aqui, que são três textinhos, e eles são, na verdade, elementos que se repetem, não é mesmo?
24:41Que é o mesmo estilo de texto, o mesmo estilo de texto. E esse elemento agora está naquele estado
24:45selecionado, como se eu estivesse na Home. Mas se eu estivesse na página de Cardápio,
24:48era o Cardápio que teria que estar selecionado. Esse é o clássico tipo de elemento que a gente
24:52pode transformar em um componente. Componente no Figma é um elemento que se repete. Vamos fazer o
24:57seguinte, eu vou pegar e selecionar esse textinho aqui. Eu vou apertar CTRL + C, CTRL + SHIFT + V,
25:02só pra colar ele aqui. Em seguida, eu vou fazer o seguinte, eu vou só tirar todos esses cadeadinhos,
25:06depois eu explico pra vocês o que são eles. Esse texto aqui, ele está com o formato Red Hat Text,
25:11Semi Bold. O 16 aqui, ele também está como variável. Depois a gente vai ensinar pra vocês,
25:15mas não precisa estar o de vocês, 16, enfim. É a mesma coisa que se eu viesse aqui e digitasse o
25:20texto, Cardápio, e colocasse Red Hat, posso trocar a tipografia, posso trocar o peso, enfim. No caso
25:27aqui do meu, já está selecionado. Vocês podem só selecionar essas mesmas configurações pra
25:31ficar igualzinho ao meu texto, beleza? Estou com o Cardápio selecionado, eu quero criar
25:35um componente. Como é que eu vou fazer isso? Eu posso vir aqui e clicar nesse quadradinho aqui,
25:40nesses quatro quadradinhos, CREATE COMPONENT, ou eu posso apertar o atalho CTRL + ALT + K ou
25:45Cmd + OPTION + K, que ele vai criar o componente pra mim. E esse é um atalho importantíssimo de
25:50aprender, beleza? Porque a gente cria componentes o tempo inteiro no Figma. E agora, isso daqui é
25:55um componente. Sabe qual que é o bacana disso? Pra CTRL + C, CTRL + V, copiei meu componente,
25:59cliquei e arrastei aqui do lado. Agora se eu mudar qualquer coisa, vamos ver. Vou trocar o texto,
26:03outro texto. Olha lá, ele está repetindo pra mim, ele está trocando outro texto. Mas o bacana é que
26:08esse daqui, quando ele tem esse losanguinho bem preenchido, vou apertar OPTION + L, ALT + L,
26:12só pra colapsar aqui todas as minhas camadas. Esse elemento aqui, está vendo que tem um que tem o
26:16losanguinho preenchido e outro que tem ele vazado? O preenchido é o componente pai, é o componente
26:21que manda no que vai acontecer com todos os filhinhos. E o filhinho é um componente que
26:25eu posso alterar. Por exemplo, se eu trocar aqui o texto pra Oi, ele não mudou o pai. Por outro lado,
26:29quando eu mudo o pai, ele muda o filho. Porém, agora, como eu já mudei o texto, se eu
26:33sobrescrever o texto aqui e virar somente texto, ele não vai mudar no filho, porque ele entende que
26:38o filho sobrescreveu aquela propriedade específica do meu elemento, que no caso era o texto. Cliquei
26:43no componente pai, Cmd ou CTRL pra clicar no texto dentro do componente, e eu mudar a cor dele,
26:47por exemplo, ao invés desse base 40 aqui, vou usar qualquer outra cor, qualquer outra cor
26:52que eu mudo aqui pra vermelho, enfim, ele já vai mudando e ele fica ali igualzinho o meu elemento.
26:58Vou voltar CTRL + Z, CTRL + Z, CTRL + Z, CTRL + Z, CTRL + Z, só pra ele ficar com aquele base 40 que
27:02ele já estava. E esse daqui é o meu componente, ele é a base do meu elemento. O que eu vou fazer?
27:06CTRL + C, deixa eu até deletar esse amiguinho daqui, vou colocar ao invés de texto, CTRL,
27:11cliquei no texto, ENTER, vou apertar aqui e vou digitar item, porque normalmente o componente,
27:16ele é um componente genérico, ele é um componente que pode se repetir em outros locais, e assim,
27:21quando eu uso o texto item, eu sei que ele não é só o home, o cardápio sobre nós, é um elemento
27:25que vai se repetir, que eu quero utilizar em outros locais, então eu prefiro não deixar com
27:28um nome fixo nesse momento, beleza? Porque ele é o pai dos outros amiguinhos. Então eu vou clicar,
27:32vou até arrastar ele pra fora do meu layout, ao invés desse componente chamar cardápio, eu
27:36posso chamar ele de, por exemplo, header / item, que quer dizer que é um item que mora no header,
27:41por exemplo. Vou apertar CTRL + C, vou clicar no meu header, vou apertar CTRL + V, CTRL + V,
27:46CTRL + V. Copiar esse elemento três vezes, ele tá aqui três vezes, vou apertar SHIFT,
27:50cliquei no primeiro, SHIFT, cliquei no segundo, e vou arrastar aqui pro lado, e eu posso arrastar
27:55mais ou menos onde eu quiser, enfim. Nem precisa se preocupar tanto com posição agora,
27:59porque daqui a pouco a gente vai ver uma forma de deixar isso mais fácil, beleza? Tô com os itens e
28:03a mesma coisa, se eu mudar agora a cor de um dos itens, ele vai mudar em todos os outros. Essa é
28:08a primeira coisa sobre componentes, ele serve pra elementos que se repetem. Além disso, tem
28:13uma outra coisa bacana de componente, isso daqui, apesar de serem diferentes, a Home e o Cardápio,
28:18por exemplo, os dois são o mesmo componente, tá vendo que é navigation / header / item. navigation
28:23/ header / item. Isso daqui é o mesmo componente, como que é o mesmo componente se você vai usar
28:27estilo diferente? Uma coisa que os componentes podem ter é estados, como assim? Uma coisa
28:31que eu vou fazer só pra facilitar agora, eu vou apertar CTRL + R e vou chamar item, por enquanto,
28:35só pra não ter aquelas barras aqui no nome. Tô com esse componente, eu vou vir aqui nesse mais,
28:39Edge Variant. Quando eu clicar aqui, ele criou um estado desse componente. Agora, se eu vier aqui,
28:45por exemplo, no item, ele tem um property e ele tem o Variant 2. Por exemplo, esse daqui,
28:49quando eu clico, tá vendo que ele é selecionado o Variant 2. Esse daqui é o default. Então, se eu
28:53mudar, por exemplo, só naquele que tá o Variant 2, ele vai mudar só naquele que tá selecionado como
28:58o Variant 2. No nosso caso, o que a gente pode criar, por exemplo? Eu vou chamar aqui, ao invés
29:02de property, vou dar dois cliques aqui no nome, state, vou chamar de state, estado. O default
29:07pode continuar como default. E no outro elemento, eu vou clicar nele, state, vou chamar de hover.
29:12Hover, normalmente, é aquele estado quando passa o mouse em cima. Esse é um dos estados. O segundo,
29:16o terceiro estado, aliás, é o estado selecionado, tipo, tá, vamos, selected. O nome, você pode
29:22chamar o nome que você quiser. Esses são os nomes que eu costumo utilizar, beleza? Quando ele
29:25estiver aqui no estado padrão, ele vai continuar cinzinha, exatamente como está. Quando ele estiver
29:29no estado hover, eu quero que, por exemplo, quando passar o mouse em cima desse elemento,
29:33eu quero que ele mude a cor. Por exemplo, ao invés desse base 40, eu quero que ele mude aqui
29:38pra esse base 60, só pra ele ficar um roxinho. E por fim, quando ele estiver selecionado,
29:42eu quero que ele tenha esse background aqui, que é esse primary 5, e até essas distâncias, enfim,
29:48a gente já vai ver certinho. Por enquanto, eu só vou colocar a cor de fundo, beleza? Sem muitos
29:52detalhes. Então aqui, quando ele estiver selecionado, o fill vai ser, na verdade,
29:55esse primary 5, a cor do texto, ao invés do item ser cinza, CTRL ou CMD pra clicar no texto.
30:01Ou qualquer coisa, você pode ir clicando até, dando dois cliques, dando dois cliques até chegar
30:04onde você quer, beleza? Cliquei aqui, cliquei no base e o que eu vou fazer aqui tá vendo que ele é
30:09um degradê, enfim... Eu já tenho aqui configurado no meu arquivo esse degradê, eu vou só clicar nele
30:14aqui e ele já tá lá o meu degradê bonitinho. E agora, como eu quero que o meu primeiro elemento
30:19esteja aqui, o hover, eu vou tirar, cliquei nesse elemento, vou mudar pra default. No primeiro
30:24elemento cliquei nele, vou apertar aqui Selected, que é o meu elemento selecionado, ele já tá quase
30:29certinho. Uma coisa que eu vou fazer, eu vou clicar aqui novamente nesse estado do selecionado.
30:33Corner Radius, eu vou colocar aqui 999, normalmente eu uso 999, quando ele é totalmente
30:38arredondado. E aqui ele só falta ficar arguidinho, maiorzinho e a gente já vai arrumar isso, beleza?
30:42Mas basicamente agora, o que eu posso fazer, eu posso mudar o texto aqui ao invés de item, vou
30:46dando dois cliques, dois cliques, dois cliques, novamente, chamar de Cardápio. Como ele já tá com
30:51o texto selecionado, quando eu já tô com o texto selecionado, se eu clicar em cima de outro texto,
30:54ele já vai também mudar pra outro texto. CTRL + A pra selecionar todos os textos. Sobre nós. E por
31:00fim, CTRL + A, Home. Pronto, eu já consegui mudar os textos e todos os meus elementos. Uma outra
31:04forma de fazer isso no componente, isso é bacana principalmente quando você trabalha com livrarias
31:09mais complexas, bibliotecas maiores, no Figma. Por exemplo, em um item, se eu quisesse editar
31:13todos os elementos que são parecidos, eu posso apertar a letra Q e ele automaticamente sempre
31:18que eu selecionar um elemento parecido dentro do meu componente, seleciona todos, esse modo aqui
31:23que é de edição múltipla. Você consegue editar todos ao mesmo tempo. Por que que eu quero isso?
31:27Eu selecionei todos os textos e eu vou vir aqui tá vendo que tá escrito Item? Eu vou clicar nessa
31:31setinha aqui e eu vou chamar aqui de Item Name. Nome do item. Eu vou criar a propriedade. Agora,
31:37quando eu seleciono o componente, além do estado que eu posso selecionar, se ele é default, se ele
31:42é hover, se ele é selecionado, eu posso mudar o nome por aqui também, se eu não quiser clicar aqui
31:46lá no texto, enfim. Eu posso clicar aqui no nome, sei lá, chamar de Oi. Pronto, ele já mudou pra Oi.
31:51No caso, eu vou manter aqui o Home, beleza? Por fim, lembra que a gente criou aquele estado hover?
31:55Mas por enquanto, se eu passar o mouse aqui, pô, não tá acontecendo nada. Tô passando o mouse em
31:59cima e não tá acontecendo nada, Maiane. Por quê? Primeira coisa, quando a gente trabalha no Figma,
32:03vou mudar aqui só pro File novamente, a gente normalmente trabalha no Canvas,
32:06não na visualização de uma interação. Então aqui realmente não se supõe que vai acontecer alguma
32:11coisa quando você passar o mouse em cima. Porém, deve acontecer se, por exemplo, você selecionar o
32:15teu frame, SHIFT + 2 aqui só pra ficar certinho e você apertar nesse playzinho, teoricamente,
32:20depois dele carregar, a tua interação tem que funcionar. Só que agora eu passo o mouse e nada
32:24acontece novamente. Uma outra forma de você visualizar essa interação, e essa é uma forma
32:29bem bacana, principalmente quando a gente tá criando elementos pra ver de forma rápida,
32:32pra não esperar aquela tela inteira carregar e vem outra tela, é apertar SHIFT + Barra de espaço
32:37e ele carrega essa tela aqui já em contexto, com aquele frame que você tem selecionado ali
32:41bonitinho. E também novamente não tá funcionando. Por quê? Porque eu não criei essa interação,
32:45eu criei o estado de um componente, mas eu não disse quando que esse componente deve mudar de
32:50estado. E é isso que a gente vai aprender agora, prototipação. Então já aprendemos componentes,
32:54já aprendemos a adicionar elementos, e agora a gente vai aprender um básico de prototipação.
32:58Prototipação, normalmente, é quando a gente criar uma interação. Por exemplo quando o usuário passar
33:01o mouse, quando o usuário clicar aqui, quando o usuário fizer não sei o quê, eu quero que aconteça
33:06tal coisa na minha tela, isso é prototipação. Então, por exemplo, eu vou aqui SHIFT + 2 pra
33:11dar zoom nesse elemento, cliquei aqui, o que que eu quero? Quando o usuário passar o mouse
33:15em cima desse item aqui, quando ele estiver nesse estado padrão, e o usuário passar o mouse em cima,
33:20eu quero que o item mude pra esse próximo estado aqui automaticamente. Como que eu faço isso? Vou
33:26selecionar o primeiro, cliquei aqui, e aqui vou mudar pra protótipo. Clicar aqui ou apertar o
33:31atalho SHIFT + E, SHIFT + E ele alterna entre design e protótipo. SHIFT + E já voltou pro
33:36protótipo, SHIFT + E mudou pra protótipo. Um outro atalho pra fazer isso é ALT ou option 9. E ele
33:41também vai pro protótipo e ALT ou option 8, ele volta pra design. Eu normalmente só uso SHIFT + E
33:47justamente porque também tá na mão esquerda, fica mais fácil de navegar. Então aqui SHIFT + E mudei
33:52pro protótipo. E aqui interações é onde a gente vai brincar. Pode tanto clicar aqui e apertar,
33:57mas a forma mais fácil, vou apertar CTRL + Z pra desfazer, Cmd + Z, é você clicar tá vendo quando
34:02você passa o mouse ele aparece essa bolinha azulzinha aqui? Se eu passar o mouse e clicar
34:06na bolinha azulzinha e arrastar até onde eu quero que ela vá, ou seja, eu quero que esse componente
34:10passe a ser esse. Cliquei e arrastei. Quando? Quando clicar? Não, não, não. Quando passar o
34:15mouse em cima, então while hovering. Esse feito de passar o mouse em cima é chamado de hovering.
34:19Então enquanto tiver com o mouse em cima, eu quero que você mude pra esse estado. Eu quero
34:24que ele ocorra instantaneamente, assim que o mouse chegar, ele já pisca ali e mudou? Não,
34:28eu vou colocar aqui um dissolve de forma bem sutil. Aqui 300 milissegundos, bem sutilzinho,
34:34quase nem dá pra ver essa transição, mas ele vai fazer uma transiçãozinha bem sutil entre um
34:38e outro. E agora esse estado tá criado. Ou seja, se eu vier aqui agora, lá, no meu protótipo que
34:42tá aberto, e passar o mouse em cima, ele já fez a transição pra mim. E cada um desses elementos,
34:47quando eu passo o mouse, ele muda de cor. Então esse é o terceiro conceito que eu quero ensinar
34:51pra vocês com esse componente de header. O próximo conceito que a gente vai aprender é o tal do auto
34:56layout. Vocês estão preparados? Estão preparados mesmo, porque esse é um dos temas mais polêmicos,
35:02cabeludos e que a galera mais sofre no Figma, então vem comigo. E pra gente entender esse
35:07conceito do auto layout, deixa eu explicar pra vocês e falar que tem uma forma bem
35:11melhor da gente ter criado esses elementos, esses componentes todos no nosso header. O que acontece,
35:16até o momento a gente tem um elemento aqui na esquerda, esses aqui na direita,
35:19e nós não chegamos a criar esses aqui da direita também, que também são outros dois componentes
35:23aqui, beleza? Na verdade, é um componente que se repete, tá vendo como ele é um elemento parecido?
35:27Ele só troca o ícone. Vamos fazer o seguinte, eu vou apertar CTRL + C, CTRL + SHIFT + V pra
35:31ele colar fora do meu componente, se eu apertar CTRL + C, CTRL + V, às vezes ele cola dentro do
35:36componente e não é o que eu quero. CTRL + SHIFT + V eu garanto que ele colou fora do meu componente.
35:40Então aqui com o meu item, eu vou mudar ele aqui pro estado de selecionado. Imagina que
35:44eu vou colocar um texto aqui, um texto gigante. Olha que maravilha que virou esse componente,
35:51tudo vazado, tudo zoado, tudo errado. O fundo que não acompanha, totalmente estranho, né?
35:56Tem uma forma muito, muito fácil de eu resolver isso. Vou clicar no meu elemento, vou apertar a
36:01letra Q pra selecionar todos os amiguinhos dele aqui. E com eles selecionados, eu vou apertar um
36:06atalho que se chama SHIFT + A, ou se não, você pode vir aqui e apertar nesses quadradinhos,
36:11Use Auto Layout. A hora que você fez isso mágica, resolveu. Ele já abraçou o meu texto aqui de
36:18forma perfeita. O que acontece? O Auto Layout é um layout que se adapta de acordo com o que você quer
36:23fazer. E o bacana disso é que agora que eu tenho o Auto Layout ativado, eu tenho essas opções aqui
36:28de Padding. Padding é o espaço no entorno do meu elemento, entre o elemento e o fundo. Por exemplo,
36:33aqui, no meu caso, tá 26. O meu original, tá vendo que ele é 16 e 4. Então, eu vou usar os
36:38mesmos valores. Apertei a letra Q novamente. Vou colocar aqui 16. E em cima e embaixo, 4. Pronto,
36:43agora ele já tá aqui com aquele tamanhinho que eu queria. Esse é só um exemplo do Auto Layout.
36:48Agora, qualquer texto que eu colocar aqui, Oi, ele vai abraçar o texto. E isso vale pra todos
36:52os outros elementos do meu componente. Além disso, tá vendo que aqui o espaço, tem um espacinho aqui.
36:57Aqui tem um espação gigante. Tem uma forma bem fácil de resolver isso. Novamente, Auto Layout.
37:02Vou clicar aqui. Um elemento, segurei, SHIFT. Outro elemento, segurei, SHIFT. Outro elemento,
37:07SHIFT. Tá, pra criar o Auto Layout. Tá, ele já organizou aqui. O espaçamento agora já tá 26
37:13entre cada um dos elementos. Posso até mudar aqui o espaçamento entre eles pra 24, por exemplo. E
37:18agora eles já tão alinhadinhos. Então, com o Auto Layout, eu consigo organizar as coisas de um modo
37:23muito mais fácil. Além disso tá vendo que tem aqui minha marquinha, esse elemento no meio.
37:27Teoricamente, tem esses componentes aqui. Vamos criar esses componentes antes, pra gente falar um
37:30pouquinho mais. Como que a gente vai criar esses componentes? Eu vou apertar aqui o CTRL + C,
37:34CTRL + SHIFT + V. As definições o estilo desse componente. Red Hat Text, Semibold, 20. Sempre
37:40que estiver com esse quadradinho, pode só digitar 20, normal, e tá funcionando. A gente já vai ver
37:43o que são esses quadradinhos. Deixa aqui com 0, bonitinho. Entra em contato, isso daqui é meu
37:48texto. Ele tem um ícone. Pra gente usar ícone, eu vou usar um plugin. Bora começar a usar o plugin
37:52Figma. Isso é um negócio super poderoso também do Figma, são os plugins. Como assim? Pra eu usar
37:57plugins no Figma existem várias formas, uma delas, lembra que eu falei para vocês lá da comunidade?
38:02Ir lá na comunidade do Figma, clicar na marquinho do Figma, pesquisar o teu Plugin, por exemplo,
38:08você vai achar o plugin que você quer, Tabler Icons, abrir em, daí seleciona o arquivo que
38:13você quer abrir, daí ele vai abrir o teu Plugin. E essa é a pior forma de você usar Plugin no Figma,
38:18mas dá. Mas a melhor forma de fazer isso é através da nossa barrinha mágica. Vou apresentar para
38:23vocês um negócio que é extremamente mágico no Figma, essa estrelinha aqui, olha que
38:27fofa. Se você apertar ela, ou a letra CTRL ou Cmd + K ele abre esse painel aqui. Esse painel,
38:33qualquer coisa que você não souber fazer no Figma. "Ah, Maiane eu não sei duplicar meu texto,
38:39eu queria duplicar". Nossa, que problema! Você vai apertar CTRl + K, qualquer coisa que você
38:44não sabe, CTRL + K. Duplicate, duplicar em inglês. Não sei se o Figma tem em português, mas se tiver
38:52duplicar e enfim... Olha aqui ele tem "Duplicate". E se eu clicar em "Duplicate", ou vir aqui,
38:57apertar Enter, ela já aqui "Duplicate" meu texto. Prontinho, gente. No caso aqui o que a gente quer
39:02fazer é CTRL + K e a gente vai mudar, ao invés de All, a gente vai vir em Plugins e aqui em Plugins
39:07eu vou digitar Tabler, que é aquele mesmo que eu estava abrindo lá na comunidade, Tabler Icons
39:11para mim ele já apareceu porque eu sempre utilizo ele, mas qualquer coisa procura esse daqui Tabler
39:16Icons. Clicou nele, ele vai abrir o Plugin. A hora que ele carregou o Plugin para mim, no caso aqui
39:21eu quero uma seta, por exemplo, Arrow. Clique aqui nessa setinha, a mesma igualzinho que eu quero,
39:25eu já vou até aproveitar, ele tem essa plantinha aqui. Vamos procurar Plant, vamos achar aqui,
39:30cadê a plantinha. Já tem uma plantinha igual. Tá aqui, clique na plantinha já adicionei, clica
39:35no nome dela, clicar e arrastar através do nome. Ele já adicionou no meu arquivo e agora já tenho
39:39aqui os ícones que eu quero simplesmente usando o Plugin de forma super fácil no Figma. Eles também
39:44eu vou transformar em componente. E como são elementos que às vezes se repetem também tem algo
39:48que nós vamos fazer nesse componente que vocês vão entender porque eu transformei eles em componente,
39:51beleza? Uma coisa bacana, que eu acho importante. Se vocês forem usar ícones, tentem sem padronizar
39:57algumas coisas. Primeiro, que eles estejam sempre com o mesmo nome dentro do ícone.
40:01E outro que eles estejam exatamente com a mesma cor, no caso aqui cliquei, arrastei e selecionei
40:06os dois, estou aqui com a cor de seleção, estão os dois com o preto, beleza, preto #000,
40:10tá igual. Porque quando você for trocar de ícones, por exemplo, dentro de componente, coisa assim se
40:15isso não tiver bem padronizado, às vezes a cor fica errada, dá uns probleminhas, enfim... Então
40:18tenta sempre padronizar. Vou clicar, arrastar, selecionei esses dois amiguinhos. Se eu clicar
40:23aqui, ele vai criar um componente com os dois, e não é o que eu quero. Então vou clicar aqui,
40:27cliquei nas três bolinhas, Create Multiple Components. Ou seja, ele cria vários componentes
40:33de uma vez só, e ele já tá aqui os meus dois componentes. Vou fazer também pra facilitar,
40:37eu vou colocar eles dentro de uma sessão. Sessão é só uma forma de organizar as coisas no Figma,
40:41você nem precisa usar se você não quiser. Eu gosto de utilizar pra organizar meu arquivo Como que eu
40:46crio uma sessão? Posso apertar o atalho SHIFT + S, ou vir aqui tá vendo? Clicar nesse setinha, Base
40:51Frame, seleciona a sessão, cliquei e arrastei ele já envolveu aqui. Eu posso renomear minha sessão
40:55pra Icons, ou seja, ícones. E aqui agora estão meus ícones bonitinhos. Agora, como que eu crio
41:01esse elemento do Entra em Contato? Primeiramente, isso daqui teoricamente é um botão, no meu caso
41:06eu só vou usar aqui. Mas pode ser que eu quisesse usar em outros locais, enfim. Eu vou chamar aqui
41:09de Button, um texto genérico Em seguida, eu vou pegar aqui a setinha, CTRL + C, CTRL + V,
41:14e vou clicar e arrastar e colocá-la aqui perto do meu Button. Vou selecionar o texto e a setinha,
41:19eu vou apertar SHIFT + A pra criar o Auto Layout. E agora eu posso controlar esse espaço entre a
41:24seta e o texto através desse componente aqui, 8. Outra coisa, vamos supor que eu queria que a seta
41:30estivesse embaixo. Posso mudar a direção, pra baixo, pra um lado. Essa setinha aqui,
41:33quando ela tá ativada, se eu diminuir o meu frame agora, ele vai pra baixo. Então isso bem bacana,
41:37principalmente duplicar aqui. Vamos supor que ela tá selecionada e vai, as setinhas vão descendo
41:41uma a uma. Também uma opção bacana, eu não vou utilizá-la agora, mas é bacana vocês saberem que
41:46ela existe. Outra questão tá vendo que aqui no meu caso os elementos, eles estão todos ajustados à
41:49esquerda? Dependendo do componente, pode fazer sentido você mudar o alinhamento eu quero que
41:53fique alinhado à esquerda, à direita, enfim, isso pode mudar SHIFT + A, criei meu botão,
41:58já vou criar um componente CTRL + ALT (Option) + K, criei meu componente CTRL + R button,
42:03meu botão. E com o meu botão selecionado, eu também quero mudar aqui isso daqui tá com a cor
42:07Primary 60. Vou clicar e vou colocar aqui também Primary 60, a gente já vai aprender a configurar
42:12essas cores aqui Igual tá no meu arquivo, beleza? Selecionei aqui novamente, agora o que eu quero,
42:16tá vendo que ele tem esse fundo? Esse fundo, é o fundo do próprio frame, tá vendo que aqui é
42:20um frame? Esse meu botão é um frame, ele também é um container de elementos. Cliquei aqui em Fill,
42:25no maiszinho, no princípio tá branco, eu não quero branco. Eu quero essa cor aqui
42:28que é o Primary 5. Cliquei no meu botão, cliquei aqui nesses quadradinhos. Se vocês preferirem,
42:33dá pra ver como lista, também pode ficar mais fácil vocês acharem. Outra opção é segurar o
42:36mouse um pouquinho em cima, que ele já mostra qual que é o número. Primary 5, Corner Radius: 999,
42:42porque ele vai ser totalmente arredondado. Aqui por exemplo, ele tá com 56 de altura, então eu vou
42:46padronizar pela altura e não pelo padding nesse momento, que é aquele espaço. Por exemplo,
42:49eu posso usar aqui e colocar 4. Mas se eu colocar a altura, ele aqui ele tá como o Hug. Significa,
42:54no Auto Layout, ele tem várias formas de cuidar com o seu elemento. Quando eu falo Hug, ele abraça
42:59o meu elemento. Ou seja, se eu aumentar aqui por exemplo, esse texto aqui. Eu aumentar ele pra 80,
43:05ele vai estar sempre abraçando. E aumentando de acordo com o meu elemento. Por outro lado,
43:10se eu vier aqui, selecionei o elemento, mudei, eu cliquei e coloquei pra 56 Agora ele tem uma altura
43:15fixa, significa que se eu aumentar esse texto pra 80. O fundo, ele tá com a altura fixa de 56. Então
43:22isso é importante você saber. Por outro lado, mas eu queria que abraçasse. Pode clicar aqui, clicar
43:26na setinha, Hug, agora ele abraça. Além disso, tem um outro estado, que é o estado de Fill, que ele
43:31chama. Eu já vou mostrar pra vocês como que ele funciona. Então tem o Hug, Fixed e Fill. Fixed é
43:36quando ele tem um tamanho fixo, no caso o nosso elemento tá com tamanho 56. Vou colocar aqui um
43:41padding na esquerda e na direita. E por exemplo, sei lá, 16. Aqui acho que até tá um pouquinho
43:46mais né, tá 24. Então vamos colocar aqui também 24. E agora a gente tem o nosso botão Inclusive,
43:51similar ao nosso outro elemento. Vamos fazer um estado de quando o mouse passar em cima? Cliquei
43:56aqui, lembra como faz? Clica no maisinho e agora aqui State, vamos dar um nome State, Default,
44:02esse daqui vai chamar Hover ou o nome que você quiser. Quando passar no Hover, eu quero que ele
44:07mude de cor sutilmente. Cliquei aqui, ao invés de Primary 5, Primary 10. E agora lembra como
44:12é que a gente faz pra fazer a prototipação? Cliquei no primeiro elemento, SHIFT + E pra
44:16mudar pro protótipo. Passei o mouse em cima, quando ficou com essa bolinha azul aqui. Eu
44:20vou clicar e arrastar até o amiguinho. On clique? No, While Hovering. Quando passar o mouse em cima,
44:26quero que mude pra Hover. Já tá aqui, dissolve 300. Isso aqui já vai estar funcionando. Agora o
44:31que acontece? CTRL + C, CTRL + V. E ele já colou aqui lá no final do meu negócio, eu não queria,
44:37eu queria que ele ficasse do lado certinho. Como que eu faço isso gente? Mais uma vez, Auto Layout.
44:41Vocês conseguem ver que nesse elemento aqui. A gente também consegue usar Auto Layout no header?
44:45Tá vendo? Por enquanto o meu header, ele não é um Auto Layout. Ele é só um frame qualquer. Se eu
44:50apertar aqui, ou apertar SHIFT + A. Ele muda o meu ícone pra um elemento com Auto Layout. Vai dizer,
44:55pô, ferrou tudo, eu tinha arrumado meu header. Tava bonitinho, agora ele está todo feio. Não,
45:01olha só. Agora o que acontece é o espaço da esquerda e da direita estão iguais. Ambos estão
45:05com 116 Inclusive, se você quiser, não precisa ser igual. Você pode clicar aqui nesse quadradinho. E
45:11ao invés de 116, pode dizer eu quero que tenha 24 na esquerda. Eu quero que tenha 300 na direita.
45:17Eu quero que tenha 24 em cima. E eu quero que tenha 80 embaixo. Pronto, são tamanhos totalmente
45:22diferentes. E aqui o bacana é que dá pra gente ver melhor o alinhamento. Você tá vendo que eles aqui,
45:26eles estão todos alinhados ao topo e em cima? Eu posso alinhar aqui no centro e eles ficam
45:30alinhadinhos. Eu posso alinhar embaixo. O que acontece, por padrão aqui, eu vou deixar 120. Vou
45:35até tirar, clicar aqui novamente. Eu quero igual, 120 na esquerda e na direita. E em cima e embaixo,
45:39ao invés de usar aqui, eu vou deixar zerado. Pra ele ficar automático. E eu vou usar a altura que
45:43eu já tinha utilizado aqui. Que é o 104, pra usar uma altura fixa. E agora, qual que é o bacana? Tá
45:48vendo que agora, se eu clicar e arrastar. Poxa, o meu elemento não tá lá onde eu queria. Mas, como
45:54eu tô com alto layout, é facílimo de resolver. Primeiro, eu quero que ele fique alinhado no
45:58centro desse elemento, concorda comigo? Porque eu não quero que eles fiquem todos aqui em cima.
46:02Como que eu faço isso? Tô com um elemento com auto layout. Quero que tudo fique no centro,
46:05alinhar ao centro. Pronto, tá tudo no centro. Só que agora tem um problema. Tá vendo que o espaço
46:10da esquerda é esse espacinho aqui de 120. E a marca não tá grudada nele. Porque tá todos os
46:15elementos estão alinhados ao centro. E esse espaço aqui entre eles tá 357, 24 tem 24 de
46:21espaço entre cada elemento. E aqui tem uma espação de sobra que não tá sendo preenchido por nada. Uma
46:27das formas de eu resolver isso seria dentro do auto layout, lembra que eu falei que tem o hug,
46:30tem o fixo e tem o preenchimento. Eu posso dizer pra algum desses elementos, por exemplo,
46:35quero que esse elemento aqui preencha todo o espaço que tiver disponível pra ele. Tá vendo que
46:39aqui tem uma espação antes da borda? Aqui tem uma espação antes da borda. Um espação antes da borda.
46:44Se eu clicar nesse elemento, eu posso clicar aqui nele e mandar fill, preencher. E ele preencheu
46:49todo aquele espaço. Como esse elemento também tá com auto layout. Eu posso clicar e mandar
46:53centralizar. E ele fica certinho. É uma das formas de resolver isso. Vamos dar um nome aqui pra ele
46:58Itens. Dei dois cliques, CTRL + R, itens, enfim. Cliquei nele, vou mandar abraçar novamente. Porque
47:04outra forma de resolver nesse caso específico. É que eu posso dizer que eu quero que os elementos
47:08tenham espaço igual entre eles. Como assim? Ao invés de eu deixar centralizado, eu posso dar
47:12dois cliques aqui. Dois cliques. E agora ele tá com um espaçamento automático entre os elementos
47:18Isso significa que se eu diminuir ele sempre vai continuar na direita esse elemento. Esse daqui
47:22sempre na esquerda. E eu consigo lidar com esse elemento de uma forma muito mais simples Agora
47:27o que eu posso fazer. Eu posso clicar aqui CTRL + C, CTRL + A, CTRL + SHIFT + V só pra ele colar sem
47:32formatação. E eu tô aqui com o meu botão do entrar em contato já bonitinho, funcionando bacaninha.
47:37Tem esse outro elemento aqui do lado, ele não é um botão, mas eu usei o mesmo estilo, enfim...
47:42Normalmente, elementos com funções diferentes. A gente não precisa usar o mesmo componente.
47:46Até recomendado que não se use. No meu caso, eu utilizei pra facilitar e pra mostrar pra
47:49vocês essa flexibilidade dos componentes. O que acontece? Se eu duplicar esse elemento,
47:53vou apertar CTRL + D pra duplicar o elemento, CTRL + D, dupliquei. Olha só o que aconteceu. Poxa,
47:59por que que esse botão foi pra lá? Lembra que os elementos estão com o espaçamento igual
48:03entre eles? Os elementos são todos os elementos diretamente filhos do auto layout. Tá vendo que
48:08aqui tem um, dois, três, quatro filhos. Cada um desses filhos tá com o espaçamento igual
48:12entre eles. No meu caso eu não quero que esses dois elementinhos aqui. Por exemplo,
48:16o espaçamento entre esses dois é muito menor do que o espaçamento entre eles e os outros
48:20amiguinhos. Como que eu resolvo isso? Vou selecionar um botão. Vou selecionar outro
48:23botão e eu posso colocar eles dentro de um grupo. Que tipo de grupo? Um outro
48:26auto layout. Porque eu já sei qual é o espaço que eu quero aqui, muito mais fácil SHIFT + A,
48:31vou apertar aqui selecionei os dois SHIFT + A. Criei um outro auto layout. Vou até aqui dar um
48:35nome de, sei lá, actions, ações, por exemplo. Sei lá, qualquer nome, tanto faz. E agora o que eu vou
48:39fazer é ajustar esse espaço entre eles. Posso tanto fazer isso clicando aqui e colocando 24,
48:44por exemplo, quanto eu posso... Se eu passar o mouse aqui, tá vendo que tem essa área rosa? Se
48:48eu clicar nela tá vendo que tá com o auto? Posso digitar aqui, por exemplo, 16 e agora já tá com
48:5216 entre um e outro. E aí você vai dizer "Poxa, Maiane, ele ficou com esse espaço aqui bizarro,
48:58por quê?", simples, porque tá vendo que aqui tem um tamanho 708 blá blá blá blá blá... A largura
49:03dele tá fixa. Nesse caso a gente não que, a gente não quer que esse grupo ele contenha exatamente
49:08esses dois elementos. A gente quer que esse grupo abrace esses elementos. Então a gente
49:11pode clicar aqui nas setinhas e apertar HUG. E agora ele vai abraçar os elementos. E no caso,
49:16se eu mudar, por exemplo, ao invés de se entre em contato eu vou colocar CTRL + A,
49:20vou digitar zero e ele já tá bem parecido com a nossa florzinha e agora, por fim, você vai dizer
49:24"Poxa, e o ícone? Como é que eu troco o ícone do meu componente?" Nesse caso o que eu vou
49:29fazer é o seguinte: vou lá no meu componente pai, mando em todos os filhos, vou selecionar o ícone,
49:33vou apertar a letra Q pra selecionar o outro ícone que é parecido com ele e agora que eu
49:38tenho os dois ícones selecionados eu vou ver aqui nessas três linhas e vou apertar em CREATE
49:43INSTANCE SWAP PROPERTY, ou seja, eu tô criando uma instância, é como se eu conseguisse trocar
49:49esse componente pra qualquer outro componente. Então eu vou criar aqui, vou chamar aqui de icon,
49:53ao invés de instance. Vou apertar no maisinho, tá vendo que aqui, olha, já tá selecionado o icons?
49:58Por quê? Porque esse icons, ele tava dentro dessa seção. Inclusive por isso que eu usei seções.
50:02E ele já entendeu que eu posso trocar por qualquer
50:05outro componente que esteja na mesma seção. No meu caso, eu vou clicar e vou
50:09desclicar. Eu prefiro deixar com nada selecionado, porque agora, vou apertar Criar Propriedade, se
50:15eu ver aqui, dois cliques, dois cliques novamente, Componente selecionado. Sempre vejam se o que está
50:18selecionado é o componente, se é o Auto Layout, enfim, porque pode ser que vocês não achem a opção
50:23que vocês querem e vocês estão com o elemento errado selecionado. Cliquei aqui no button e
50:26agora, Icon, posso clicar aqui, tá vendo que já aparece a minha folhinha? A hora que eu clicar
50:30na folhinha, ele já mudou e está igual. Agora, o que acontece? Eu vou lá visualizar o meu elemento,
50:35ele está aqui, bonitinho, bonitinho, ele faz efeito hover, mas eu não queria que aqui tivesse o
50:40efeito hover, porque ele não é um elemento que vai ser clicável, não vai para lugar nenhum. O que eu
50:44posso fazer? Vou voltar lá no meu componente, vou selecionar esse elemento, vou apertar SHIFT + E,
50:48tá vendo que ele tem uma interação? Os dois têm, né? Essa interação vem lá do componente pai. Se
50:52eu quiser, somente nesse filho, eu posso clicar aqui no componente, Interação e apertar nesse
50:57menos. Agora, ele já não tem interação, ele já não faz mais aquele efeito hover. Então, agora,
51:01se eu vier aqui e passar o mouse em cima, nada acontece. E com isso, a gente já aprendeu mais um
51:06super conceito, que é o conceito de Auto Layout no Figma. E para isso daqui ficar completo e a gente
51:11aprender os principais conceitos de Figma com um componente só, eu vou apresentar para vocês,
51:16em seguida, dois conceitos que são extremamente importantes, que são os de variáveis e os de
51:21estilos. Tão importante quanto você criar esses elementos é você ter essa organização deles. Tá
51:26vendo como o meu layout aqui é bem consistente, até se a gente olhar o layout final, sempre cores
51:31parecidas, mesmo tamanho de tipografia, mesma tipografia. E uma coisa muito legal é que com o
51:36Figma você pode ter muito controle sobre isso. Por exemplo, uma das formas de você controlar isso,
51:41primeiramente, a gente vai falar sobre as variáveis. Qualquer elemento do teu design,
51:46por exemplo, eu quero esse cinza aqui, cliquei aqui no cadeadinho só para quebrar, porque por
51:49padrão, se você criar um arquivo do zero, ele não vai ter esses base-40, todas essas coisas aqui que
51:54estão aqui, bonitinhas, fui eu que configurei. No de vocês não vai ter isso, se estiver criando no
51:59arquivo do zero, você vai ter que criar isso. Por exemplo, você começou a fazer um layout,
52:02você viu, poxa, essa cor, esse cinza aqui eu vou usar direto, esse roxinho aqui eu
52:07também vou usar direto, começa a identificar elementos que vão se repetir, pode ser cores,
52:11pode ser um texto, o nome da marca que eu vou usar em vários locais, você pode salvar esse
52:16valor em algum local e depois você pode reutilizar ele, como assim? Com as variáveis. Por exemplo,
52:21vamos supor que esse cinzinha aqui eu vou usar direto, clicar em nada no canvas. E aqui existe
52:26local variables, variáveis locais, aqui nesse vídeo a gente não vai falar sobre bibliotecas,
52:31enfim, até porque é uma feature paga do Figma, mas saibam que quando você trabalha com times, enfim,
52:36você pode publicar essas variáveis, publicar esses estilos do seu arquivo e outras pessoas
52:41podem reutilizar essas mesmas configurações que você criou, beleza? A gente não vai fazer isso
52:45aqui, mas saibam que é possível. Aqui em local variables, se eu clicar nessas engrenagenzinhas,
52:49sei lá o nome disso, aqui no de vocês já vai estar cores, tipografia, tudo organizadinho, bonitinho,
52:56mas fui eu que organizei. Por padrão, não tem nada disso no seu arquivo, inclusive por isso que
53:00eu pedi para vocês duplicarem o meu arquivo, para vocês não precisarem criar isso de zero. Mas vamos
53:04supor que a gente está criando um arquivo novo, vou criar aqui uma coleção nova, vai estar mais ou
53:08menos assim se você criar um arquivo novo, beleza? Vamos colocar aqui minhas variáveis, vou colocar
53:13aqui por enquanto, porque depois eu vou apagar isso e a gente só vai utilizar o que já está no
53:18arquivo configurado, beleza? Só para esse exemplo da aula. Vamos supor que está vendo aqui, agora
53:23vou fechar aqui, vou clicar CTRL, Cmd, ou Cmd + click aqui, só para selecionar o texto de dentro
53:29do componente e eu quero que esse preenchimento aqui, que é esse #938FA3, eu quero que ele seja
53:36uma variável, que é algo que eu vou reutilizar. Porque o que acontece, tá vendo que nenhum
53:40desses amiguinhos aqui agora é uma variável, são cores puras. Se eu mudar esse cinza aqui para,
53:45sei lá, qualquer outro tomzinho de cinza, o amiguinho dele não vai mudar, ele ficou perdido,
53:49coitadinho do amiguinho dele. Vamos supor que não, poxa, eu quero que esse amiguinho mude com
53:54o coleguinha ali. Vou aqui em fill, por exemplo, cliquei nessas bolinhas aqui, vou apertar aqui no
54:00mais e agora eu vou selecionar a coleção, aqui está em color, vou mudar para minhas variáveis
54:04e agora eu vou colocar cinza claro, por exemplo, e vou criar a variável, o valor, ele já puxou dali,
54:10criei. Agora o que acontece, se eu mudar aqui, ele está com o cinza claro, se eu quebrar, clicar
54:15nessa correntinha, ele quebrou o vínculo, voltou novamente a ser uma cor pura. Por outro lado,
54:19se eu vier aqui nas variáveis, cinza claro, clicar aqui na cor cinza e mudar, ele já mudou a cor lá.
54:25E o bacana é que se eu vier aqui no meu amiguinho, Cmd + cliquei, CTRL + cliquei, vou clicar nas
54:30bolinhas, vou vir aqui em libraries e vou digitar cinza claro, ele já achou o meu cinza claro,
54:36cliquei, apliquei aquela mesma variável. Agora se eu mudar em um, ele vai mudar em todos os
54:41amiguinhos. Com as variáveis, a gente consegue criar padrões para o nosso componente e eu uso
54:46isso não somente para cores, por exemplo, tá vendo que aqui no meu layout, layout final, aqui
54:51eu normalmente tenho um padrão de espaço que eu uso na margem, aqui é sempre o mesmo espaço, aqui
54:56é esse mesmo espaço entre a margem e o conteúdo, o mesmo espaço, mesmo espaço, aqui a mesma coisa,
55:02normalmente o que eu gosto de fazer é criar, por exemplo, um padrão de tamanho de margem externa,
55:07porque dessa forma, se eu quiser aumentar a margem em todo o meu documento, eu aumento em todo o meu
55:11documento. Então como que eu faço isso? Vou criar aqui, por exemplo, criar a variável, uma variável
55:16nesse caso vai ser uma variável de número, porque é um número, o tamanho da margem é um número em
55:20pixels, 120 pixels, 150 pixels, vou criar aqui como número, margem externa, vou colocar aqui 120,
55:28que é o número que eu quero utilizar, agora que eu sei que essa margem externa é 120,
55:32vou vir aqui no meu elemento, e aqui tá vendo que ele tá como 120, funciona, funciona super bem,
55:36cliquei nesse hexagonozinho aqui, vou digitar aqui margem externa, achei lá minha margem externa,
55:43e agora ele tá atrelado à minha variável, se eu mudar aqui pra 200, ele já mudou aqui tanto na
55:48esquerda, quanto na direita, minha margem externa, no caso, manter, por exemplo, 120. Outras coisas
55:53que você pode colocar aqui como variáveis, são os elementos que você vai animar, por exemplo,
55:58aqui, página atual, enfim, depois a gente vai ver isso com calma, eu gosto de colocar também,
56:01por exemplo, tipografia, qual tipografia que eu, tá vendo que aqui é Red Hat Text,
56:06todos esses meus elementos, tá quebrado, ele não é um estilo, enfim, mas esses carinhas são estilos,
56:11se você tiver uma tipografia, por exemplo, ao invés de Red Hat Text, vou clicar aqui na setinha,
56:15vou apertar aqui no hexagonozinho, tá vendo font-sans, tá configurado no meu arquivo, agora,
56:20isso daqui, ele não é uma tipografia solta, ele tá atrelado a esse valor aqui, isso significa que se
56:26eu trocar aqui, por exemplo, pra times, que é uma outra tipografia, ele já trocou em todos os outros
56:30locais que tem essa times, agora eu voltei pro Red Hat Text, ele já voltou pra mesma tipografia,
56:35aqui, no caso, ele voltou como regular, mas seria só questão de selecionar médio, então, dessa
56:38forma, você consegue criar valores que se repetem em todo o seu documento, isso são as variáveis,
56:44no meu caso, eu vou fazer o seguinte, né, se minhas variáveis, eu vou deletar daqui, delete
56:48collection, porque eu não vou utilizar, eu deixei configurado no arquivo de vocês, as variáveis que
56:53eu costumo utilizar, inclusive, saibam, se você apertar aqui, no de vocês não vai ser possível,
56:57porque tá no plano gratuito, dá pra criar outros modos, daí você troca a variável de acordo,
57:02por exemplo, pra desktop, pra mobile, pra light e dark mode, você consegue trocar as cores de uma
57:06forma super fácil, então, é muito bom começar a se acostumar a trabalhar com variáveis, e assim,
57:10variável é um valor só, beleza, somente um valor, um número, um nome de tipografia, uma cor,
57:17nunca mais que um, por exemplo, um degradê, eu quero criar um degradê, degradê não é uma cor,
57:22são, no mínimo, duas cores, eu quero que vá da cor X pra cor Y, nesse caso, você já não consegue
57:27criar uma variável, é aí que entra o nosso próximo conceito, que são os estilos, antes de ir pros
57:32estilos, deixa eu só mostrar rapidinho como que tá organizado o arquivo de vocês, tem as variáveis
57:36de cores, cores primárias, 5 até 100, enfim, cores secundárias, cores base, tipografia, eu
57:41normalmente utilizo, tanto pra colocar o nome da tipografia, qual tipografia que eu vou utilizar,
57:46eu coloco pra estabelecer os tamanhos padrão de tipografia que eu vou utilizar no arquivo, o peso,
57:51se é regular, semi bold, bold, quais que eu vou utilizar nesse arquivo, e também aqui, às vezes,
57:55eu crio alguns arquivos extras, só de definição, por exemplo, sempre que for um título, eu quero
57:59que use, por exemplo, a fonte display, sempre que for um título com letra caixa alta, eu também
58:04quero que use esse display, por outro lado, sempre que for body type, corpo de texto, eu quero que
58:08utilize a font sans, atrelado, ao invés de ser um valor fixo, ele é atrelado a uma outra variável, o
58:15meu próprio documento, então ele é atrelado a esse carinha aqui, se eu mudar aqui, ele muda aqui,
58:19e isso automaticamente muda em qualquer outro local que eu utilizar essa variável, tranquilo se
58:24vocês não entenderem tão a fundo como eu organizei esse arquivo nesse momento, mas é importante vocês
58:28começarem a olhar, começarem a entender como que eu utilizei, enfim, porque aos poucos vocês vão
58:32pegando melhor esses conceitos variáveis, beleza? Aqui a questão de medidas também, eu gosto sempre
58:37de padronizar, principalmente o tamanho da altura, às vezes, quando tem um botão do lado de um campo
58:40de texto, eu gosto de padronizar a altura, a questão de borda, tá vendo que eu falei que
58:45sempre que eu uso borda totalmente arredondada, eu uso 999, normalmente eu não digito 999,
58:50normalmente eu seleciono o full, eu tenho outros padrões, o 80, o 24, pra não acontecer de, por
58:54exemplo, em cada local do meu arquivo, eu usar um tamanho de arredondamento de borda diferente, tá
58:58vendo que aqui a margem, eu tenho dois padrões, um que é o 120 e o outro que é o 30, por quê? O 120 é
59:03o que eu uso aqui, o 300 é o que eu uso quando tem essa margem aqui maior, por exemplo, então
59:08dessa forma eu consigo padronizar melhor todo o meu arquivo, beleza? Aqui também a animação,
59:13a gente vai ver depois como que a gente cria essas variáveis e documentação, isso daqui eu uso
59:17somente pra documentar meu arquivo, pra organizar, enfim, eu nem passo pro desenvolvedor, enfim,
59:22tanto que normalmente eu até deixo escrito aqui esse D que tá cortado, é um Don't use, pra não
59:26usar, porque é somente pra organização, beleza? Os estilos, por suas vezes, eles são um conjunto
59:31de valores que podem ou não ser variáveis. Como assim, Maiane? Meu Deus do céu! Vamos supor que é
59:36no caso de uma tipografia, tá vendo esse textinho aqui sobre nós? Pra eu conseguir chegar nesse
59:40texto, com essa cor, com esse tamanho, com essa tipografia, exatamente do jeitinho que eu quero,
59:47são várias coisas, por exemplo, ele tem aqui a tipografia. Posso até clicar na setinha,
59:51clicar no hexágono e lá eu procurar, por exemplo, a font sans, que eu sei que é a que tá utilizada
59:56aqui, ou no caso, por exemplo, aquele body type, que é o estilo de corpo de texto.
1:00:00Nesse caso é uppercase, há o estilo de corpo uppercase, que é esse aqui que eu quero por
1:00:03sobre nós. Aqui também, um valor. Posso ou não atrelar esse valor a uma variável. No caso aqui,
1:00:09eu posso colocar semibold, que já vai funcionar bonitinho também. Por exemplo, eu vou colocar
1:00:13aqui o semibold, bonitinho. Tamanho, eu posso atrelar isso daqui a um tamanho de tipografia,
1:00:1716. Esse tamanho de altura de texto, esse line height, é a altura entre uma linha e outra do
1:00:23texto. Eu normalmente não atrelo a variáveis porque eu gosto de usar porcentagem. Infelizmente,
1:00:29nesse momento, o Figma não suporta porcentagem para variáveis. Então, aqui eu vou deixar sem ser
1:00:33variável. Aqui, esse espaçamento, eu vou deixar também sem ser variável, enfim. Basicamente,
1:00:37na hora que eu tiver esse conjunto de valores que eu quero, eu posso clicar aqui nessas bolinhas,
1:00:42vou vir aqui e posso clicar no mais. Eu posso criar, por exemplo, o meu estilo de texto
1:00:46uppercase. Eu vou deixar aqui grandão porque depois eu vou apagar. Já que no nosso arquivo
1:00:51isso já está tudo configurado, eu posso criar o estilo. E agora, em todos os locais que eu quiser,
1:00:55o cardápio, eu quero que seja o meu estilo. Vou clicar nas bolinhas, vou selecionar aqui
1:00:59o uppercase, que eu também quero que use o mesmo uppercase. Pronto, ele já está aqui,
1:01:04todos eles agora são uppercase. Qual que é a vantagem disso? Que eu cansei, não gostei mais,
1:01:10sei lá, não quero que seja esse tamanho, eu quero que seja maior. Pronto, eu consigo mudar em todos
1:01:14os locais que tem esse mesmo estilo de texto. A mesma coisa serve para, por exemplo, eu quero
1:01:18criar um degradê, esse degradê aqui. Primeiro, como que eu crio um degradê? Vamos começar do
1:01:22zero. Vou abrir em fill, vou apertar em mais, vou clicar aqui na corzinha. Ao invés de Libraries,
1:01:27eu vou vir aqui no segundo quadradinho, que é o de gradient. E aqui, eu consigo controlar, eu
1:01:31posso tanto virar a direção do meu degradê, posso colocar a cor de início, posso mexer onde começa,
1:01:37onde termina. Se eu quiser, eu posso clicar aqui em qualquer local e colocar mais cor. Por exemplo,
1:01:41eu quero que isso daqui seja um vermelho que vai para um amarelo bizarro e termina num azul.
1:01:48Pronto, isso daqui é o meu degradê. Criei ele lá, posso mexer aqui, posso diminuir a opacidade,
1:01:53quero que ele fique mais fraquinho, esse amarelo. Está mais fraquinho o amarelo. Não gostei dessa
1:01:57cor, posso apertar no menos e ela sumiu daqui. E outra opção é atrelar esse degradê às variáveis.
1:02:03Por exemplo, vou clicar aqui na corzinha, vou vir aqui em Libraries. E eu posso digitar,
1:02:06por exemplo, aqui, vou selecionar já a primária. E eu quero que vá da cor primária 100 para a
1:02:11cor primária 5. Pronto, ele já fez um degradê que vai de uma cor a outra. E o bacana é que,
1:02:15como isso está atrelado a variáveis, se eu mudar lá na variável cor primária, ele vai mudar no meu
1:02:19degradê também. E os estilos, eles ficam salvos, se eu clicar aqui, quando o arquivo não tem nada,
1:02:24os estilos ficam salvos aqui. Está vendo aquele uppercase que a gente criou? Os estilos de texto,
1:02:29os estilos de degradê. Se quiser, por exemplo, no nosso caso aqui não tem. Mas, por exemplo,
1:02:34eu quero adicionar um efeito a essa sombra bizarra, posso clicar nas bolinhas e também salvar
1:02:38ela como estilo, Drop Shadow. E agora, em qualquer lugar, eu quero usar essa mesma sombra bizarra
1:02:43aqui. Vou clicar aqui no efeito, vou selecionar aqui o Drop Shadow. Agora está tudo com a mesma
1:02:49sombra. Se eu vier agora nessa sombra, cliquei nessa ícone, cliquei aqui no quadradinho. Eu não
1:02:54quero que seja uma sombra preta, eu quero que seja uma sombra vermelha. Todos os locais que
1:02:57estão com aquele mesmo estilo, eles também mudam. Então, dessa forma, a gente consegue criar estilos
1:03:01que se repetem em todo o nosso layout. No nosso caso, nós já temos isso daqui configurado. Então,
1:03:06o que eu vou fazer só... Primeiro, eu vou clicar nesse uppercase, vou clicar com o botão direito
1:03:10e deletar, porque a gente não vai utilizar ele. Mesma coisa com o Drop Shadow, clicar
1:03:14com o botão direito e deletar. Aqui tem estilo de grid também. Se eu quiser selecionar o meu frame,
1:03:19posso vir aqui nele bonitinho, vir aqui em Layout Grid, posso apertar no mais. Eu consigo criar
1:03:24grid, por exemplo, de quadradinho. Eu posso criar grid de coluna, eu posso criar grid de
1:03:29linhas. Se eu clicar aqui nas bolinhas, eu posso aplicar o grid que já criei. Porque, no caso,
1:03:34é só um grid de uma só coluna, por exemplo. Dessa forma, você consegue se manter muito mais
1:03:38organizado. Primeiro, eu vou deletar esse elemento daqui. Vou vir aqui já deletei os elementos que eu
1:03:42não vou utilizar. Vou apertar SHIFT + G para não ficar mostrando esse grid aqui que está aparecendo
1:03:47no meu elemento. E, por fim, eu quero só mostrar uma coisa para vocês que eu esqueci de mostrar
1:03:51quando eu apresentei as variáveis. Vou clicar aqui. Uma coisa que você pode fazer, por exemplo,
1:03:55eu não quero que o nome da tipografia apareça toda vez que eu puder em qualquer local. Eu
1:04:00posso clicar aqui, por exemplo, lá no Font Sans, Font Display, clicar com o botão direito nele,
1:04:04Edit Variables, e escolher quando que ele vai aparecer. Por exemplo, no meu caso, é que ele
1:04:09só aparece quando for Font Family. Às vezes, por exemplo, com Altura, que vem na Measurements,
1:04:15eu configuro, às vezes, a altura do meu elemento. Se eu clicar com o botão direito, Edit Variables,
1:04:19eu só quero que ele apareça em largura ou altura, não em qualquer local que eu possa colocar um
1:04:23número. Aí, por exemplo, se eu tiver aqui o meu elemento na largura ou na altura, ele vai aparecer
1:04:28naquela variável. Mas se eu estiver aqui no Padding e tentar procurar, por exemplo, h-small,
1:04:32ele não vai aparecer, mesmo que seja minúsculo, enfim, ele não vai aparecer. E agora, bora colocar
1:04:37essas variáveis e estilos. Ao invés de eu colocar aqui, nesses carinhas, a primeira coisa que eu vou
1:04:41fazer, eu vou resetar esses elementos, porque eu fiquei brincando com eles enquanto eu apresentava
1:04:45para vocês. Selecionei os três, vou clicar nessas setinhas e vou apertar Reset All Changes. Ele
1:04:50vai voltar para o componente inicial, exatamente igual ao componente inicial. Esse primeiro aqui,
1:04:56CTRL + clique, Home, ou vamos até mudar pelo componente. Selecionei o próximo componente,
1:05:00Cardápio, e o próximo aqui, sobre nós. Vou ver aqui no meu item, vou clicar nele,
1:05:05ele não está atrelado a nenhuma tipografia. Vou clicar nas bolinhas, digitar Uppercase,
1:05:10esse daqui eu sei que é o Small, e vou aplicar o Uppercase / Small nele, que já está configurado no
1:05:15meu arquivo. Mesma coisa, vou apertar Q para selecionar todos os elementos. Mesma coisa,
1:05:18está vendo que aqui ele está reclamando que está diferente? Porque eu apliquei o estilo
1:05:22em um e nos outros não. Eu posso simplesmente clicar nas bolinhas, Uppercase / Small, e agora,
1:05:27como todos estão iguais, ele já me mostra a tipografia igualzinha ali. Mesma coisa nesse
1:05:31botão, ele não está atrelado a nenhum elemento. Cliquei no texto, letra Q para selecionar o outro
1:05:37texto também. Cliquei nas bolinhas, vou vir aqui e vou digitar Body, Body / Semibold /Small. Ele
1:05:42já aplicou e agora ele está atrelado a um estilo. E a vantagem é que se eu vier aqui e trocar esse
1:05:47estilo para qualquer outra coisa, ele vai mudar em qualquer outro local que tem esse mesmo estilo de
1:05:52texto, beleza? E por fim, o que eu vou fazer, eu vou pegar esse componente aqui do header
1:05:56que a gente criou, e eu vou transformar ele num componente também, CTRL + ALT + K. E agora esse
1:06:00elemento aqui, ele também é um componente que a gente pode replicar no nosso layout. E agora a
1:06:04gente vai continuar a montar todo o nosso site, e vocês vão ver que vários desses conceitos vão
1:06:09se repetir. E agora a gente vai criar um elemento que é um dos grandes elementos do nosso layout,
1:06:13que é o hero, que é essa imagem de zona, de capa aqui do nosso layout. Essa daqui já é finalizada,
1:06:18ele tem até essas animações aqui, tem animação nesse botãozinho, enfim,
1:06:22tenta dar uma olhada com calma nesse elemento. Tenta criar sozinho, tenta organizar os textos,
1:06:27criar componentes, enfim. Antes de eu fazer, dá uma olhada. Primeiro, cria os componentes aqui,
1:06:31cria esse elemento aqui, tudo com auto layout, organizadinho, bonitinho. Cria o texto, aplica o
1:06:36estilo no texto que já tá configurado no arquivo, mesma coisa aqui. Aqui, um botão com dois estados,
1:06:41consegue fazer esse efeitinho hover aqui, vai aprender comigo já já. Vou até copiar aqui do meu
1:06:45layout final, jogar lá pro meu design, pra gente conseguir ter isso daqui lado a lado. CTRL + C,
1:06:50CTRL + V, só pra colar bonitinho. Pega sempre pelo nominho aqui pra arrastar, pra ficar mais fácil,
1:06:55beleza? Então eu vou apertar aqui no maisinho do fill, só pra ficar com o preenchimento branco.
1:06:59Vocês conseguem identificar que eles são vários elementos, na verdade. Bora eu começar criando
1:07:03esse carinha aqui, vou apertar CTRL + C, e vou jogar ele aqui, CTRL + SHIFT + V, pra eu jogar ele
1:07:08aqui pra fora das coisas. Inclusive, isso daqui é um negócio muito, muito, muito importante. Quando
1:07:13você tá trabalhando com auto layout, pode ser que você fique muito irritado, principalmente se você
1:07:17veio de outros ferramentas de design. Porque se você apertar CTRL + C e você não tiver, às vezes,
1:07:21com nada selecionado, você aperta CTRL + V e ele cola de novo lá no auto layout. E isso é
1:07:26aterrorizante, porque, poxa, eu apertei CTRL + C, eu não tô com nada selecionado, eu quero que ele
1:07:30cole aqui, né, no canvas. Apertei CTRL + V, ele cola lá no auto layout. Se você quiser que cole
1:07:35fora, CTRL + SHIFT + V e pronto, ele cola lá fora do auto layout, beleza? Então esse é um atalho pra
1:07:40vocês saberem, pra vocês conseguirem fugir do auto layout, se vocês quiserem, porque quando a gente
1:07:44não sabe isso, pode ser que seja um desesperador. Então bora lá, vamos criar esse elementinho aqui.
1:07:48É o Nãoburguer, ele tem uns íconezinhos e ele é um componente. Tá vendo que são três
1:07:50componentezinhos aqui, letra T, ferramenta de texto. Vou digitar aqui, item, porque esse daqui
1:07:58vai ser um componente genérico. Agora eu vou abrir aqui, nas bolinhas, eu vou clicar aqui
1:08:02no Primary-80. Quero criar esse carinha aqui, que é esse elemento do ícone, o container de
1:08:08ícone com gradiente. Aqui, até um button, porque no meu layout final, eu utilizo ele também aqui,
1:08:14quando eu uso as redes sociais. Então a gente vai depois reutilizar esse elemento de botão. Primeira
1:08:19coisa, a gente precisa de um ícone, concordam comigo? Vamos pegar lá a plantinha, CTRL + C,
1:08:23CTRL + V. A planta é um componente e eu vou criar um outro componente. Pra eu colocar uma bordinha,
1:08:28criar esse círculo no entorno da planta, eu vou criar um auto layout. Vou apertar SHIFT + A e
1:08:34agora esse elemento vai ser um componente. Então é o componente com o componente de planta dentro,
1:08:39CTRL + ALT + K, beleza? Como ele vai ser um botão, eu vou chamar de button icon container,
1:08:42porque eu sei que depois ele vai ser utilizado como botão também. No meu original, ele tem 40
1:08:46x 40. Vamos colocar aqui as mesmas dimensões, 40 x 40. Eu preferi digitar de novo só pra garantir que
1:08:52ele não vai ficar com aquele efeito hug, porque nesse caso eu quero que ele sempre tenha 40 de
1:08:57largura e 40 de altura. Cliquei aqui no meu elemento, vou adicionar um preenchimento. Vou
1:09:01apertar nas bolinhas e vou procurar lá pra baixo, tem os gradientes, e eu quero esse gradiente aqui,
1:09:07linear 20%, primary to secondary 5%. Por enquanto ele está quadradinho. Lembra
1:09:13como é que eu faço pra deixar redondinho? Das duas, uma, ou eu jogo 999 aqui, ou como já está
1:09:18configurado nas minhas variáveis, eu vou clicar na variável, adicionar o br-full, que é o 999,
1:09:23criou lá bonitinho. Vou clicar aqui no elemento, vou apertar em stroke, ele já adicionou uma borda
1:09:28pra mim. Pra eu mudar a cor da borda, eu vou clicar nas bolinhas. Na hora que eu estou lá
1:09:32nas bolinhas, eu vou procurar alguma borda que seja divertida. Acho que essa daqui talvez dê boa,
1:09:36só que ela está muito forte. Nesse caso, a forma mais correta de fazer isso seria você duplicar o
1:09:41estilo, manter atrelada as variáveis e tudo mais. Porque assim, se eu clicar nesse grampinho aqui,
1:09:47agora ele já não tem mais nenhuma relação com o estilo. Se eu mudar, se eu quiser deixar dark
1:09:51mode, qualquer outra coisa depois, eu vou ter que aplicar novamente o estilo, senão vai ficar meio
1:09:55quebrado. Nesse caso, de propósito, como para o nosso arquivo está tudo bem, a gente não vai
1:09:59sofrer com isso, eu quebrei de propósito. Mas saibam que se vocês precisarem na vida real,
1:10:03evitem quebrar esses estilos, beleza? Mudei aqui a opacidade, por exemplo, pra 20.
1:10:07E agora, ele já tá bem parecido com o ícone que a gente tem lá. O que muda é que, por exemplo,
1:10:12esse ícone aqui, 24x24, o meu também tá 24x24. A cor dele, que aqui é o Primary-100, o meu tava
1:10:18como #000. Vou clicar aqui, Selection Colors, vou clicar as bolinhas do lado dele. Prontinho,
1:10:24já tá da cor que eu queria. Tá vendo que a bolinha é o componente, mas esse elemento todo,
1:10:28esse item aqui, também é um componente. Então eu posso apertar aqui, bolinha, SHIFT + A, chamar
1:10:33de item, tanto faz o nome que você vai chamar nesse momento. Vou mudar aqui o espaçamento,
1:10:36até eu posso aplicar variáveis aqui, 16, e ele já aplicou 16 aqui. Eu normalmente até uso variáveis
1:10:42pra não ficar usando cada hora um espaçamento totalmente aleatório, tá bom? Uma coisa aqui,
1:10:46esse elemento, tá vendo que ele tá, o meu texto acaba aqui, mas o meu bloco acaba lá. Por quê? Ele
1:10:51tá com uma largura fixa, apesar de ele ser Auto Layout. Posso clicar na setinha e apertar Hug
1:10:55Contents. Ou outra coisa que você pode fazer é vir aqui e apertar dois cliques e ele já muda pra Hug.
1:11:00É uma forma de facilitar um atalho pra mudar pro Hug. E agora, CTRL + ALT + K, isso daqui também
1:11:05é um componente. Mas é meu Deus, surgiu uma planta no meu Figma. Quando você tem um componente dentro
1:11:10de um componente, esse componente que tá aqui dentro, ele passa a ser uma instância, um filho
1:11:14do componente pai, e ele duplica o componente pai pra caso você queira alterar ele novamente,
1:11:19beleza? Outra coisa que eu quero fazer aqui, esse ícone, ele tá fixo. Tá vendo que no meu ele muda
1:11:23os ícones? Vou clicar na plantinha, lembra que a gente fez com aquele outro ícone? Clica nos três
1:11:28pontinhos, Create Instance Swap Properties Icon, vou apertar no maisinho. Vou deixar
1:11:32nada selecionado e criar a propriedade. Agora, o que eu vou fazer é eu vou pegar o Tabler e vou
1:11:37procurar esses outros dois ícones. Sanduíche e o do peixe. Vou apertar CTRL + K, Plugins > Tabler,
1:11:42até ele já tava ali, mas no caso eu vou digitar de novo. Tabler Icons, vou procurar aqui Fish,
1:11:47adicionei o meu Fish e Burger. E adicionei o meu Hambúrguer também. Agora já estão aqui os meus
1:11:53dois amiguinhos, vou apertar CTRL + K, Multiple Components. Pronto, Create Multiple Components,
1:11:58que é a mesma coisa que lá em cima, mas eu consigo fazer com o painel de comando sem
1:12:02sair do teclado. Agora eu vou clicar e arrastar esses dois amiguinhos pra minha seçãozinha aqui,
1:12:06bonitinho. E agora o que acontece é que se eu quiser vir aqui nesse componente,
1:12:10eu posso fazer o seguinte, CTRL + C, CTRL + V pra copiar ele. Se eu quiser trocar esse ícone,
1:12:15se eu tiver com esse componente e clicar no componente, dentro do componente, tá vendo?
1:12:19Aqui é o componente. Cliquei no botão dentro do componente item, eu posso trocar pra qualquer um
1:12:24daqueles outros componentes. Mas o que eu posso fazer também é vindo no componente, que como ele
1:12:28tem um filho, eu posso apertar aqui em Adicionar Propriedade, mais, Nested Instance. Ou seja,
1:12:33eu posso conseguir mostrar as propriedades de um filho. Quando eu apertei aqui no Button,
1:12:38agora se eu vier nesse componente, tá vendo que ele já aparece aqui as propriedades do filho
1:12:41sem eu precisar clicar lá dentro do filho? Então essa é uma forma também de facilitar. Além disso,
1:12:46vou clicar aqui no texto, CTRL + Click, na setinha ao lado, Item Name novamente. E agora eu tenho o
1:12:51nome do ícone. Agora eu já tenho aqui o ícone, aquele componente. Vou apertar SHIFT + A pra já
1:12:56criar um grupo, que vai ser esse box aqui, lista de comidas, pronto. Agora nessa lista de comidas,
1:13:02eu vou duplicar, CTRL + D, CTRL + D. Ele já tá pra baixo, se eu quisesse que ele ficasse lado a lado,
1:13:07posso apertar pro lado, no caso eu quero pra baixo mesmo. Vou adicionar aqui, o original tá
1:13:12com 40 e 40 de Padding. No meu caso aqui também, 40. E aqui também, 40. Cliquei nas bolinhas,
1:13:18Primary-5. Tá vendo? 118, a gente não quer assim, isso tá com largura fixa. Dois cliques, agora ele
1:13:24mudou pra abraçar o elemento. Ou eu posso virar click, clicar e apertar em Hug. E agora eu já
1:13:29tenho um elemento bem parecido com aquele lá. O que que falta? Falta o arredondamento de borda,
1:13:33que é 24. Cliquei aqui, arredondamento de borda 24. O espaçamento entre um elemento e outro,
1:13:39que é 24. Também vou adicionar, por exemplo, Apply Variable, 24. E faltam essas linhas aqui que eu
1:13:44não criei. Vou apertar L, cliquei, vou segurar SHIFT pra linha ficar reta. CTRL + X pra recortar,
1:13:50CTRL + V pra clicar aqui. Uma coisa importante é que eu não quero que essa linha tenha um tamanho
1:13:54fixo. Se eu aumentar esse elemento, a linha não aumenta. Eu quero que essa linha preencha todo
1:13:58o espaço disponível pra ela. Então o que eu vou fazer, eu vou clicar aqui e vou apertar em Fill.
1:14:02E agora ela preenche todo o espaço. Com a linha selecionada, se eu andar pelas setinhas do teclado
1:14:07mesmo, posso tanto mover pelas camadas, enfim, apertando as setinhas. Eu já consigo mudar ela,
1:14:12posso até apertar CTRL + D pra duplicar. Agora eu já tenho duas linhas. E o que eu vou fazer, eu vou
1:14:16clicar, selecionar as linhas. Vou clicar aqui nas bolinhas e vou apertar aqui no Primary-10. E agora
1:14:21ele já tem as linhas bem parecidas com aquele nosso outro componente. Clicar aqui, CTRL + Enter,
1:14:27CTRL + C, CTRL + A, CTRL + SHIFT + V. Mesma coisa, CTRL + A, CTRL + C, CTRL + A, CTRL + SHIFT + V,
1:14:33CTRL + A, CTRL + C, CTRL + A, CTRL + SHIFT + V. E ele já tem aqui os meus elementos. Vou só trocar
1:14:38os ícones. Esse aqui é o da plantinha mesmo. O hambúrguer eu vou trocar pro hamburguinho. E o
1:14:42fake fish eu vou trocar para o fake fish. Então agora eu já tenho um dos primeiros elementos
1:14:47daquele meu grande header que vai ser utilizado, beleza? Em seguida, vamos criar aqui esse vaca
1:14:52alegre. Isso aqui é só um texto, gente. Não tem nem muito segredo, T, ferramenta de texto. Vaca,
1:14:58SHIFT + Enter pra pular uma linha. Alegre. No caso aqui, eu vou clicar com as bolinhas. Eu vou
1:15:03selecionar esse Large aqui, que é o estilo largo. Vou abrir aqui em fill. Bolinhas, vou lá embaixo.
1:15:08Gradient, prontinho. Já apliquei o linear. Primary to Secondary, já tá criado esse elemento também.
1:15:14SHIFT + G pra eu ver meu grid. Começa a ficar mais fácil de eu alinhar um pouco as coisas. Mesmo que
1:15:18eu vá utilizar o Auto Layout depois. Vamos criar também agora esse restaurante vegetariano. O que
1:15:23que é isso? É um texto com uma borda em volta. Como que eu faço isso? Vou tirar o SHIFT + G pra
1:15:28não ficar vendo agora o grid. Letra T, Restaurante Vegetariano. Com esse texto aqui selecionado,
1:15:32vou clicar nas bolinhas. Vou digitar aqui Upper, porque é um estilo uppercase. Vou colocar aqui no
1:15:37Medium. Nesse Medium, a cor, ao invés de ser esse 100 aqui e #000, Base-0. Não dá pra ver porque
1:15:44tá branco. Vou apertar SHIFT + A pra criar esse container. CTRL + R pra renomear. Vou chamar de
1:15:49Restaurante Container, por exemplo. Vou apertar aqui no fill, nas bolinhas. Vou lá pra baixo,
1:15:54utilizar o gradiente invertido, que é o Secondary to Primary. E ele já criou lá o meu degradê
1:15:59bonitinho. Cliquei aqui, coloquei 24. Cliquei aqui do lado, coloquei 48 de um lado e outro. E o que
1:16:05falta é a borda. Tá vendo que nesse caso, a borda é somente em cima, embaixo não. Como que eu faço
1:16:10isso? Cliquei no elemento. E ao invés de eu clicar aqui e colocar... Porque se eu colocar aqui,
1:16:14ele vai aplicar a borda de todos os lados. Vou apertar CTRL + Z pra desfazer. Vou clicar nesse
1:16:19quadradinho aqui. E agora eu consigo definir cada uma das bordas. Nessa primeira aqui, vou colocar
1:16:2324. Nessa de cima e nessa aqui da direita, também vou colocar 24. E uma coisa que eu posso fazer...
1:16:28Cliquei, arrastei. Cliquei, arrastei também. Eu posso até agrupar esses elementos aqui,
1:16:33se eu quiser, enfim. Eu posso clicar e alinhar com o meu texto. Cliquei, arrastei. Tá vendo que chega
1:16:37uma hora que ele alinha com a linha do texto? Posso deixar ele bem alinhadinho. Posso deixar
1:16:41esse daqui, por exemplo. Vou apertar ALT e passar o mouse em cima do outro. Tá com 26. Vou deixar
1:16:45com 24 de distância entre um e outro. E agora, esses elementos já estão bem alinhadinhos. E a
1:16:50gente tá pronto pra criar o nosso outro pedaço do hero. E agora, nós vamos criar este elementinho
1:16:56aqui. Ele tem várias coisas bem interessantes. Tem esse background aqui, todo estilizado,
1:17:01enfim. Vou botar aqui a letra F. Vou digitar 1680 por 900. Vou colocar, por enquanto,
1:17:06aqui um preenchimento. Só pra gente conseguir visualizar alguma coisa. Primeira coisa, tá
1:17:11vendo que aqui... O meu elemento, ele tá cortado. Minha página, enfim. Vou clicar na página e vou
1:17:16aumentar bem a altura dela. Só cliquei, arrastei e aumentei bem a altura. Por enquanto, até não
1:17:21vou fazer esse elemento grudado. Depois eu grudo com os elementos anteriores. Primeira coisa que eu
1:17:25tenho que pensar é nesse fundo. Como é que eu vou fazer esse fundo? Como ele tem essas vaquinhas,
1:17:29essas vaquinhas, inclusive... No original, elas se mexem. Eu não consigo fazer isso usando somente o
1:17:35background. Até eu consigo colocar um fundo de vídeo nas contas páginas, enfim. Mas não
1:17:39quero fazer isso. Eu quero criar diretamente no Figma. E como que eu vou fazer? Primeira coisa,
1:17:43essas vaquinhas, pra elas se mexerem, elas são um componente. Faz assim, procura lá a pastinha
1:17:48onde você salvou as imagens do curso. Vai lá em Vaca Alegre, Ilustração, Alfred Rosto. Clica e
1:17:53arrasta ele pro seu Figma. Vamos apertar SHIFT + A, CTRL + R, Alfred linha. Então,
1:17:58uma linha de Alfreds. Ao invés de ser pra baixo, eu vou apertar pra direita. Porque eu quero que os
1:18:01Alfreds fiquem duplicados um ao ladinho do outro. Vou apertar... CTRL + D. Tá vendo que ele espremeu
1:18:06aqui? Por que que isso aconteceu? O meu Alfred linha, que se eu apertei CTRL + Z, ele tá aqui com
1:18:11uma largura fixa. Vou apertar e mudar pra Hug, pra abraçar. Então, agora que eu mudei pra abraçar,
1:18:16quando eu duplicar, ele vai duplicar certinho, beleza? Vou duplicar aqui, sei lá, 1, 2, 3, 4,
1:18:205. Pronto, 14 Alfreds. Totalmente aleatório. E eu vou colocar um espaço entre um Alfred e outro de,
1:18:26por exemplo, 24. Ali até tá mais, então eu vou colocar aqui uns 40, então. 40 de espaço entre
1:18:31um Alfred e outro. E eu vou transformar isso daqui em um componente, CTRL + ALT + K. Porque eu quero
1:18:36animar essas carinhas. Como que eu vou fazer isso? Primeira coisa, isso daqui é um componente. Se é
1:18:40um componente, eu posso ter mais de um estado. Lembra disso? Vou apertar aqui no maisinho,
1:18:43pra criar o próximo estado dos nossos Alfreds. Com o próximo estado dos Alfreds, eu vou fazer
1:18:48o seguinte. Tá vendo que aqui tem essa opção de Clip Content? Eu vou apertar o Clip Content. E
1:18:52eu vou clicar e arrastar até bater na cabecinha do Alfred anterior. Fazer a mesma coisa com o
1:18:58de baixo. Até eu poderia ter apertado Q e ter feito ao mesmo tempo. Mas aqui, nesse caso, eu
1:19:02não fiz. De besta mesmo. Tô aqui no primeiro, em cima. Alinhado à esquerda. Vou apertar o de baixo
1:19:07e vou alinhar ele à direita. Isso significa... Tá vendo que o meu Alfred que tá sobrando aqui. Se eu
1:19:12apertar o Clip Content, ele tá pro lado de cá. Por outro lado, se eu desabilitar o Clip Content aqui.
1:19:16O Alfred que tá sobrando, ele não tá aparecendo. Porque aqui também tá com Clip Content. Ele tá pro
1:19:21lado de lá. Isso significa que eles andaram todos eles pro lado de lá. Então, ele teve
1:19:24uma animação que os Alfreds que estavam de um lado. Eles foram andandinho para o outro lado.
1:19:28Vou deixar habilitado aqui também o Clip Content. E o que eu vou fazer? Eu vou selecionar os dois,
1:19:32letra Q. Vou tirar esse espaço zero de Padding. E vou colocar aqui também zero
1:19:36em cima e embaixo. Vou apertar Q novamente para sair desse modo de edição múltipla. Vou apertar
1:19:41SHIFT + E. Na hora que passa o mouse, quero que vá para esse estado. Cliquei, arrastei no azulzinho.
1:19:46Quero que ele vá para esse estado voando. Depois de um delay. Ou seja, após passar um milissegundo.
1:19:52Porque aqui, se eu zerar, ele vai mudar para um milissegundo. Então, um milissegundo é como
1:19:55se fosse zero. Após passar um milissegundo. Então, tipo, após passar tempo nenhum. Eu
1:20:00quero que você mude para esse estado. Mas eu não quero que você faça um Dissolve.
1:20:03Eu quero que você use esse carinha aqui, Smart Animate. O que acontece? Esse Smart Animate,
1:20:08o Figma reconhece as mudanças que tiveram de um estado para outro e ele tenta reproduzir isso
1:20:13de uma forma mais inteligente. Nesse caso, ele vai entender que mudou a posição dos Alfreds. Eu quero
1:20:17que ele mude os Alfreds de uma posição para outra e que ele dure, sei lá, 1.200 segundos. Essa curva
1:20:24aqui tem que ser linear para ela ficar sempre na mesma velocidade. 1.200 milissegundos. Vou
1:20:29apertar CTRL + C, CTRL + SHIFT + V. Apertar a letra F e desenhar um frame rapidinho. Porque
1:20:34eu quero apertar SHIFT + Barra de Espaço só para visualizar. Está vendo que eles estão andandinho,
1:20:38só que daí ele acaba. Quando eu estava aqui, nesse estado inicial e eu mandei para o próximo, ele não
1:20:42esperou tempo nenhum e depois de 0 segundos, 1 milissegundo, que é um tempo irrisório, ele
1:20:47nem pode considerar, ele levou 1.200 milissegundos para passar para o próximo estado. Na hora que ele
1:20:51chegou no próximo estado, ele ficou paradinho, porque eu não mandei acontecer nada. Quando eu
1:20:54chegar nesse próximo estado, eu vou mandar ele voltar para o estado anterior. Teoricamente,
1:20:58para esses dois estados, aparentemente eles são iguais. E com isso, eu vou clicar aqui
1:21:02até. Quando eu for para o próximo estado, eu não quero quando clicar, eu quero after delay, a hora
1:21:06que passa 1 milissegundo novamente. Eu quero que você vá instantaneamente para o próximo
1:21:10estado. A gente nem vai perceber que houve essa mudança. Então agora eu vou apertar R para resetar
1:21:14a visualização. Está vendo que ele já continua, só que ele está dando um pulinho aqui quando ele
1:21:17passa para o outro. Porque aqui no meu Figma, está vendo que aqui não tem espaço nenhum, mas aqui ele
1:21:22está com um espacinho. Vou só clicar e arrastar para tirar esse espacinho. E a mesma coisa aqui
1:21:25no início. Cliquei e arrastei para tirar esse espacinho. Vou clicar, SHIFT, selecionei os
1:21:29dois. Vou voltar para Design. Vou só clicar aqui em alinhar para eles ficarem alinhados bonitinhos.
1:21:34E agora, meus Alfreds já estão movendo de uma forma bem bacaninha, de um lado para o outro,
1:21:39beleza? E agora a gente vai usar esse carinha aqui para colocar no nosso background. Como assim?
1:21:43Fechei ali e agora vou apertar CTRL + C e eu vou colocar ele aqui, CTRL + V, naquele nosso frame.
1:21:49Eu vou chamar isso daqui, Alfred Box. Caixa do Alfred. Está aqui o nosso Alfred bonito. No nosso
1:21:55original, os Alfreds estão com uma opacidade. Aqui está em 100, eu vou mudar para 20. Vou clicar
1:22:00aqui, vou digitar 20. Vou apertar SHIFT + A, CTRL + R, Alfreds. Porque eu quero que todos os meus
1:22:05Alfreds sejam duplicados. Vou apertar Alfredinho, CTRL + D, CTRL + D, CTRL + D. Vou duplicar aqui
1:22:10várias vezes. Após isso, eu vou clicar aqui em Alfreds. Vou mudar aqui o espaçamento, 64,
1:22:14por exemplo. Agora aqui, eu vou clicar, SHIFT, SHIFT, SHIFT, até ele chegar aqui, 45. Cliquei,
1:22:21arrastei. E agora, está vendo que sobrou até um pouquinho de espaço, enfim? Para eu aumentar isso,
1:22:25eu posso usar aquela ferramenta de escala. Letra K, mudou para ferramenta de escala. A hora que
1:22:29eu aumento, ele aumenta proporcional aos meus Alfredinhos, enfim. Já estamos aqui com o nosso
1:22:34fundo de Alfreds que mexe. Posso clicar, como eu estou na ferramenta de escala, posso fechar aqui,
1:22:38apertar no X. Ao invés do Primary, eu vou mudar para o Degradê, Linear, Primary, blá, blá, blá. No
1:22:44original, os Alfreds, além deles estarem com 20% de opacidade, eles também estavam aqui com um modo
1:22:50de mesclagem. Vou clicar aqui em Apply Blend Mode, que é o modo de mesclagem. E eu vou mudar para o
1:22:55Soft Light. Porque agora, ele está bem parecido com o nosso layout original. Vou chamar isso aqui,
1:23:00na verdade, de Background. E além disso, agora eu vou apertar CTRL + ALT + G para criar um frame
1:23:05fora do próximo. Está vendo? Agora como que ficou dentro do outro frame. E esse daqui vai
1:23:08ser o Alfred Box. Aí agora, o que eu vou fazer? Eu tenho que pegar o Alfred. Vou abrir lá a pastinha
1:23:13onde eu salvei minhas imagens. Vou voltar aqui em fotos, Alfred. Clicar aqui nessa imagem do Alfred
1:23:18transparente. Cliquei e arrastei para cá. Fechei minha pastinha de imagem. Arrastei o Alfred.
1:23:22Está vendo se eu arrastar aqui? Ele vai arrastar dentro do outro layout. Vai ficar tudo zoado. Isso
1:23:26acontece muito, muito, muito no Figma. CTRL + Z. Na hora que eu comecei a arrastar o Alfred, eu vou
1:23:30apertar Barra de Espaço. E daí, ele não vai entrar dentro do outro layout, beleza? Nesse caso até,
1:23:35eu vou fazer o seguinte. Vou apertar CTRL + X. Vou clicar aqui. Diretamente no Alfred Box. E vou
1:23:40apertar CTRL + V. Por enquanto, o meu background, eu vou até clicar nesse cadeadinho para ele ficar
1:23:44bloqueado. Porque daí, nada vai ficar entrando ali. Enfim, ele fica bloqueado por enquanto. No
1:23:48meu caso. O Alfred está dentro do Box. Mas ele está aparecendo a perninha dele. Sendo que o Box
1:23:53está menor. Por quê? Porque tem que ativar aquela opção Clip Content. Para esconder o conteúdo que
1:23:57está além do Box. Cliquei. Clip Content. Posso só ajustar aqui. Jogar o Alfred um pouquinho para
1:24:02baixo, enfim. Deixar ele mais centralizadinho. Ele já está lá, bonitinho. Além disso,
1:24:07como eu ativei o Clip Content, eu consigo agora colocar esses arredondamentos de borda. Cliquei
1:24:11aqui no Box. Cliquei aqui nas margens. Aqui, 24. Aqui, zero mesmo. Aqui, 80. E aqui, 80. E agora,
1:24:19já está com o arredondamento da forma que eu queria. Vou apertar a letra T. E vamos digitar
1:24:22aqui esse texto. Eu vou apertar, na verdade, CTRL + A, CTRL + C. Vou apertar agora a letra T,
1:24:27CTRL + A, CTRL + V. E eu já colei aqui o meu texto. Vou apertar no mais. Ele está utilizando
1:24:30aqui o 40. Então, aqui vou com o meu Body / Large. Onde diz aqui, você não será o único
1:24:35a ser feliz. Vou selecionar só esse pedacinho de texto. Você não será o único feliz. E eu
1:24:40vou mudar ele para o Large Semi Bold. E aqui. Ele já está bonitinho. Ao final da refeição,
1:24:44você não será o único feliz. Por fim, falta apenas esse nosso super botão aqui, todo estiloso. Como
1:24:50que a gente cria ele? Vou apertar CTRL + C. E vou jogar aqui assim, só para a gente conseguir
1:24:54visualizar melhor. Eu quero criar um botão igual a esse. Letra T, entrar em contato. Nesse caso,
1:24:59até vou usar o mesmo texto, porque eu só vou usar esse botão aqui. Vou pegar a minha setinha,
1:25:03CTRL + C, CTRL + V. Colei minha setinha, cliquei e arrastei ela aqui próxima. Novamente, SHIFT + A,
1:25:08CTRL + R, Button Display, CTRL + ALT + K. Para transformar isso em um componente. Agora que isso
1:25:14daqui já é um componente. Vou aqui na setinha, SHIFT + A. Esse elemento aqui está com 56 de
1:25:19altura e 56 de largura. 56, 56. Minha seta está no canto, mas eu estou em um alto layout. Eu
1:25:25quero que ela fique centralizada. Cliquei para centralizar minha seta. Selecionei a seta K para
1:25:29aumentar a seta. Vou mudar para 32, por exemplo. A cor da seta não é preta, eu quero que ela seja
1:25:34branca. Cliquei nas bolinhas, ao lado do Selection Color. Mudei para o zero. Agora aqui, novamente,
1:25:39vou selecionar Icon, Container, CTRL + R para renomear. Vou mudar arredondamento para o Full,
1:25:45para ele ficar arredondinho. E agora vou adicionar um preenchimento. Vou apertar o mais,
1:25:49vou clicar aqui nas bolinhas. Vou lá para baixo, colocar o Linear Primary to Secondary. Estou com
1:25:55o meu botão. Quero diminuir esse espaço aqui, que está 37, enfim. Vou colocar aqui Apply Variable,
1:26:00vou colocar 16. E por fim, se vocês olharem o meu botão, ele tem 80 do lado. Então aqui ele tem 80 e
1:26:06ele tem 32 do outro. Por quê? Porque eu não posso deixar esses elementos aqui lado a lado. Porque no
1:26:12caso do meu layout final, quando eu visualizo, ele tem esse efeito que a seta passa por cima
1:26:16do texto. Para eu conseguir esse efeito, essa seta tem que estar de forma independente do Auto
1:26:22Layout. Como assim? Eu vou deixar o espaço para a seta, mas ela não vai participar do Auto Layout.
1:26:27Porque se eu usá-la no Auto Layout, a hora que eu inverto a seta com o texto, e ele inverte também
1:26:32aqui, se eu mudar a seta com esse texto, ela vai para baixo da camada. Aí o efeito fica meio
1:26:36quebrado, porque às vezes a hora o texto passa por cima da seta, a hora a seta passa por cima
1:26:39do texto. E a gente não tem um controle bom disso. Para resolver, seta para cima do texto. Novamente,
1:26:44eu vou clicar na seta e eu vou apertar nesse carinha aqui. Ignore Auto Layout. Isso significa
1:26:50que essa seta, apesar de ela estar dentro de um bloco de Auto Layout, ela vai ignorar o
1:26:54padrão de Auto Layout desse bloco. Cliquei nela e agora tudo se quebrou. Como que eu resolvo isso?
1:26:58Primeira coisa, a altura do meu elemento é 72. Cliquei aqui, vou até aplicar como variável 72,
1:27:04meu elemento está com 72. Ele tem, lembra, 80 na esquerda. Então ali onde tem a seta está com 80.
1:27:11E do outro lado, ele está com 32. Então aqui na direita, ele tem 32. O arredondamento, novamente,
1:27:17é aquele full, que ele é totalmente arredondado. Cor de fundo, base, posso até começar a digitar
1:27:2280. E o stroke, que é aquele linear ali, que eu acredito que seja esse daqui. Linear, secondary,
1:27:28blá, blá, blá. Clicar no texto, CTRL, + clique. Mudar o preenchimento dele para aquele base-0,
1:27:34beleza. E agora só falta arrumar minha seta. Como que eu arrumo essa seta? Primeira coisa,
1:27:38eu posso mexer ela onde eu quiser, porque tanto faz, ela não participa mais do auto layout.
1:27:42Ela é um elemento independente, beleza. Até que eu tinha até tirado, sem querer,
1:27:46do elemento. Mas em qualquer local aqui eu posso mexer ela. Vou fazer o seguinte, primeira coisa,
1:27:49eu vou centralizar ela. Cliquei aqui, centralizou. E agora, vou apertar SHIFT + setinha do lado. ALT
1:27:56(OPTION) + passar o mouse em cima, só para ver que a distância aqui agora é 8 em cima,
1:27:598 embaixo, 8 de lado, 8 do outro. E agora o meu elemento está preparado para eu fazer o efeito de
1:28:04hover. Quando eu passo o mouse em cima, a setinha que estava na esquerda vai para a direita e o
1:28:08texto que estava na direita vai para a esquerda. Como que eu atinjo isso? Cliquei no meu botão,
1:28:13vou criar um novo estado. Cliquei no mais aqui, opa, já tenho meu novo estado. Agora eu inverto
1:28:17o 80 com o 32, onde tinha 80 passa a ser 32, onde tinha 32 passa a ser 80. E agora a mesma coisa
1:28:24com a setinha, ela estava aqui desse lado? Eu posso clicar aqui, para a linha à direita,
1:28:28SHIFT + setinha para a esquerda. E agora, olha, ele já está com o 8 de um lado, 8 do outro. E como
1:28:33que a gente cria essa animação? Cliquei no botão, SHIFT + E, cliquei no azulzinho, cliquei, arrastei
1:28:38para o estado que eu quero atingir. On click, não, while hovering, quando passar o mouse em cima. Eu
1:28:43quero que você mude para a Variant 2, eu não mudei o nome por enquanto, depois a gente já muda. E a
1:28:47animação, ao invés de ser distante, vai ser Smart Animate, ou seja, o Figma vai meio que adivinhar
1:28:52como que a gente quer que faça essa mudança. E a curva, ao invés de linear, eu vou chamar
1:28:55de Gentle. Vou manter aqui 800 milissegundos, que ele faz uma curva um pouquinho mais sutil,
1:29:00beleza? Agora eu vou pegar esse elemento, SHIFT + E, vou só renomear aqui, olha, State, Default,
1:29:04beleza? E aqui eu vou chamar de Hover, só para ficar bonitinho. Copiei o elemento, CTRL + C,
1:29:09vou lá no meu box, cliquei no meu box, CTRL + V, e aqui, até para eu alinhar com esse texto, se eu
1:29:14quiser, SHIFT + A, para alinhar aqui, Contents, eu posso chamar, CTRL + R, Contents. Vou mudar aqui
1:29:19o espaçamento para 24, clicar aqui para garantir que está alinhado ao centro. E agora, esse Alfred
1:29:24Box já está criado, eu posso clicar e arrastar, e alinhar ele aqui com o meu elemento anterior.
1:29:29E a aqui agora, na vaca alegre, a única coisa que eu vou fazer, a camada que estava embaixo, eu vou
1:29:33clicar e arrastar ela até em cima. E ela vai ficar em cima do meu elemento. E com isso,
1:29:37a gente conseguiu criar todo aquele elemento que a gente já estava tentando. Eu posso clicar, clicar,
1:29:42clicar, CTRL + ALT + G, vou agrupar tudo isso e chamar de Hero, por exemplo. E agora que eu
1:29:47já tenho o meu Hero, eu posso até clicar e arrastar aqui um pouquinho mais para baixo,
1:29:51enfim. Cliquei no Home, CTRL + ALT + ENTER, e eu vou visualizar. Posso até clicar aqui, vou colocar
1:29:56Fit Width, ajustar a largura. E agora, está tudo funcionando bonitinho, muito parecido com aquele
1:30:02nosso layout original. A única diferença é que os Alfreds estão indo para a direção
1:30:05contrária e eles estão muito rápidos. Para resolver isso, é bem fácil. O que acontece?
1:30:09Aqui nos Alfreds, ao invés de alinhado à esquerda, eu vou começar alinhado à direita e ao invés de
1:30:13alinhado à direita, eu vou começar alinhado à esquerda e com relação à velocidade, SHIFT + E,
1:30:17ele está aqui levando 1.200 milissegundos para levar, por exemplo, 2.000 milissegundos. E agora,
1:30:22novamente, se eu clicar Home, CTRL + ALT + Enter, e for visualizar, vou novamente clicar aqui,
1:30:27Fit Width, e ele já está bonitinho, animando de forma mais lenta, enfim, se quiser a gente pode
1:30:33deixar até mais lenta, e aquela nossa transição do botão também já está funcionando, beleza?
1:30:37E antes da gente continuar, tem três coisinhas que eu quero fazer com vocês. A primeira delas,
1:30:42vamos dar uma limpada, uma organizadinha de leve, pelo menos, nesse nosso arquivo,
1:30:45porque eu estou começando a ficar muito triste com ele todo desorganizado. A segunda, eu quero fazer
1:30:49um comentariozinho sobre o uso de componentes e, por fim, eu quero deixar esse componente do hero
1:30:53que a gente acabou de criar um pouquinho mais flexível, beleza? Então, bora lá! Para limpar o
1:30:57nosso arquivo, a primeira coisa que eu vou fazer, eu tinha colado no início esses textos aqui,
1:31:01porque a minha ideia era ir copiando lado a lado, eu vou deixar eles aqui, mas eu vou deixar ele
1:31:05escondidinho, então eu vou pegar ele aqui e vou apertar ou nesse olhinho aqui, para ele sumir,
1:31:09ou CTRL + SHIFT + H, que é o atalho para esconder qualquer coisa, ele está ali escondidinho. Vou
1:31:14apertar Option + L ou ALT + L, só para colapsar aqui minhas camadas. Além disso, eu quero dar uma
1:31:18organizada primeiro aqui, SHIFT + 1, para a gente ver tudo o que tem na tela. Esse frame, eu posso
1:31:22deletar, porque a gente já visualizou, já está funcionando, não precisamos mais dele, cliquei,
1:31:26delete. Esse food list, mesma coisa, cliquei, delete. E aqui em cima, eu vou selecionar essas
1:31:31coisas, SHIFT + 2, para dar zoom nelas. Se tem um troço perdido do ícone, enfim, é só deletar,
1:31:35porque ficou perdido aqui. Esse botão aqui também já não estamos usando, vou deletar. Vamos ficar
1:31:40apenas com esses botões aqui, com os ícones, com as nossas plantinhas e aqui os nossos componentes,
1:31:45beleza? Para organizar os componentes aqui, até está com dois nomes, vou renomear, CTRL + R,
1:31:51menu item, só para diferenciar do item de uma lista. Aqui eu vou dar CTRL + R, list item,
1:31:55pronto. Esse aqui é um item de lista e esse dali é um item de menu. Para organizar, eu normalmente
1:31:59gosto de utilizar seções. Vou fazer aqui bem rapidinho, é só para dar uma organizada mesmo,
1:32:03nem é obrigatório vocês fazerem. Vou apertar SHIFT + S, vou colocar aqui uma em volta desse botão,
1:32:08vou dar dois cliques e vou dar dois cliques só para ela ficar bem ajustadinha. CTRL + R,
1:32:12button display. E agora eu vou fazer a mesma coisa com todos esses outros elementos. SHIFT + S, R,
1:32:17CTRL + R, button, dois cliques, dois cliques, bonitinho. Vou aqui até alinhar meio próximo,
1:32:22menu item, mesma coisa. SHIFT + S, selecionei, dois cliques, dois cliques, CTRL + R, menu
1:32:28item. Os ícones eu vou trazer aqui para cá. Esse elemento aqui, SHIFT + S, ele é o button icon,
1:32:34CTRL + R, dois cliques, dois cliques. E por fim aqui o nosso list item, CTRL + R, list item. Essa
1:32:40é uma organizada das mais toscas possíveis, mas é só para ele estar levemente arrumado. O que eu
1:32:45vou fazer aqui com os ícones também, só para ficar mais fácil, se a gente for adicionando mais ícones
1:32:49e tudo mais, vou aumentar aqui, vou aumentar aqui, vou apertar Enter para entrar dentro da camada.
1:32:54Está vendo que quando eu estou com o elemento selecionado, se eu apertar Enter, ele entra.
1:32:57SHIFT + Enter, ele sai, ele vai para a camada mais externa. São dois detalhes bem interessantes,
1:33:01eu uso bastante no dia a dia. Então, Enter, vou apertar SHIFT + A, para tudo isso virar um
1:33:06bloco de auto layout. E eu vou só aumentar aqui, porque depois se eu for adicionando mais ícones,
1:33:10eles já vão entrando ali embaixo. Então aqui já está levemente organizado. E o que eu vou
1:33:14fazer é SHIFT + S, vou colocar aqui uma seçãozona, Components. Pronto, e eu vou só mudar aqui a cor
1:33:20do fill, para por exemplo, esse base-10 aqui. Só para eles ficarem um pouquinho mais organizados,
1:33:24dois cliques aqui, dois cliques aqui, e eu vou só alinhar esses amiguinhos, só para não ficar tão
1:33:29torto. Agora, todos os nossos componentes já estão em uma mesma seçãozinha. Opa, esqueci da nossa
1:33:33vaca, vou só jogar a vaca dos Alfreds para cá também. SHIFT + S, CTRL + R, Alfreds. Mesma coisa,
1:33:39dois cliques, dois cliques. Agora aqui o nosso componente, eu vou aumentar um montão. Pronto,
1:33:43coloquei o nosso Alfred lá dentro. E novamente, dois cliques, dois cliques e pronto. Todos os
1:33:48nossos componentes estão levemente organizados. Nosso arquivo já está menos bagunçado e minha
1:33:53alminha está muito mais feliz. E para a gente fechar e terminar nossa organização, eu só vou
1:33:57clicar nesse hero aqui que eu tinha copiado do meu arquivo final. Vou apertar deletar, já que a gente
1:34:01já fez essa sessão. E agora a gente pode falar um pouquinho sobre componentes. Sobre componentes,
1:34:05tem um comentário aqui que é bem interessante, que é o seguinte. Eu havia falado que componentes
1:34:09normalmente são utilizados quando há repetição. Por exemplo, aqui no menu SHIFT + 2, são elementos
1:34:14aqui que se repetem. Aqui elementos que se repetem e a gente usa componentes. Tem um outro caso que
1:34:18eu acho bem útil utilizar componentes, que é no caso de animar elementos. A gente já fez isso, por
1:34:23exemplo. Aqui nós utilizamos um componente, não só porque as vacas repetiam linhas no nosso layout,
1:34:29mas também porque eu queria animar as vacas. O mesmo caso aconteceu com esse botão. Esse botão
1:34:34só vai ser utilizado em um local no meu layout. E nesse caso, eu usei como componente porque eu
1:34:38queria animar o botão. Essa é uma forma de você criar animações sem precisar criar várias páginas
1:34:43do teu arquivo. Então, componentes também podem ser utilizados para animação. Embora, normalmente,
1:34:49o principal uso deles seja justamente para elementos que se repetem, para padronizar
1:34:52arquivo e assim por diante, beleza? Por fim, bora deixar esse elemento todo aqui um pouquinho mais
1:34:58flexível. Eu quero poder, similar ao que eu tenho aqui em cima, lembra que eu tenho essa
1:35:02margem externa aqui, que ela está atrelada aos nossos variantes? Eu quero fazer algo similar
1:35:06a esse componente aqui. Porém, repara só, eu vou apertar Option ou ALT + L só para colapsar tudo.
1:35:11Tenho aqui o hero e eu vou criar um outro frame. Para criar um outro frame, tem duas opções. Uma,
1:35:16eu posso apertar a letra F, clicar, arrastar e envolver todo o meu componente. E ele já criou
1:35:21um frame em volta do meu componente. Vou apertar CTRL + Z para desfazer. Ou, a forma mais fácil,
1:35:26é com um atalho. CTRL + ALT + G. E ele já criou um frame no entorno daquele meu outro frame anterior,
1:35:32que era o hero. Eu vou dar dois cliques e vou chamar de hero container. Agora,
1:35:36com esse elemento selecionado, vou aplicar aqui um Auto Layout nele, SHIFT + A. E agora eu quero
1:35:40aplicar uma margem externa nesse meu elemento. A primeira coisa que eu vou fazer, até antes do
1:35:44elemento anterior no header, sabendo que ele está apagadinho aqui, é porque essa era aquela margem
1:35:48externa que a gente tinha criado e eu apaguei aquela coleção que a gente tinha criado, enfim,
1:35:52porque eu quero usar direto as do meu documento. Então, o que eu vou fazer aqui são duas coisas.
1:35:56Primeiro, eu vou selecionar aqui, vou clicar no 120 e eu vou digitar External Margin, porque eu
1:36:00quero a margem externa, que é a que já estava configurada anteriormente no documento. E agora
1:36:04que eu já fiz isso, eu quero fazer a mesma coisa nesse componente. Vou pegar aqui o hero container,
1:36:08vou colocar lá External Margin. A hora que eu adiciono a margem externa, está de boa,
1:36:11bonitinho. Para ajudar também, eu vou adicionar um espacinho em cima. Em cima, eu vou colocar aqui,
1:36:16por exemplo, 40. E embaixo, eu vou colocar aqui, bonitinho, uns 80. Esse elemento aqui,
1:36:20tem 1920 de largura, vou apertar até CTRL + C para copiar. E esse hero container, eu quero que
1:36:25tenha a mesma largura, vou apertar CTRL + V aqui para colar. Agora, eu posso clicar e arrastar até
1:36:29alinhar esses elementos. Se eu quiser, eu posso, inclusive, na minha Home, vou apertar SHIFT + A.
1:36:34E agora, isso daqui também já tem Auto Layout, já está bonitinho. Se eu adicionar outros elementos
1:36:39aqui embaixo, ele já vai aumentando o tamanho da minha página. Aqui tinha só duplicado o CTRL + D,
1:36:43só para vocês verem. Porém, agora, olha a treta. Se eu mudar a minha margem, a minha
1:36:48external margin, vou ver aqui, measurements, aqui é a coleção, measurements, definitions, external
1:36:53margin, eu vou mudar aqui para 160. Ele mudou, mas está vendo que aqui, ele está vazando da margem,
1:36:59já não está igual. Olha o tamanho da margem que está na esquerda, olha o tamanho da margem que
1:37:02está na direita. O que aconteceu? Esse elemento aqui, ele não está com auto layout, esse hero,
1:37:06e isso está causando toda essa bagunça. Então, o que a gente vai fazer? Primeira coisa, eu vou
1:37:10dividir esses dois elementos aqui, eu vou colocar em uma linha. E esses dois elementos de baixo,
1:37:15aqui, eu vou colocar como um elemento só, como um box só. Então, primeiramente, esses daqui,
1:37:19eu vou apertar SHIFT + A para juntar eles. Está vendo que ele está alinhado à esquerda? Esse
1:37:23elemento aqui está alinhado à esquerda, ele já criou certinho para mim. Vou chamar isso daqui de
1:37:28Alfred Box. E aqui, esse elemento e esse daqui, ao invés de eu usar o Auto Layout, eu vou colocar só
1:37:34um frame. Se eu usar o Auto Layout, se eu apertar SHIFT + A, ele vai ficar ou mais para baixo,
1:37:38ou muito para cima, ou se não, eu vou ter que selecionar esse elemento, clicar aqui para ignorar
1:37:43o auto layout, movimentar só ele, também é uma opção. Nesse caso, como vai ter que mexer tanto
1:37:47para ele ficar certinho, eu prefiro não utilizar o auto layout. Então, eu apertei CTRL + Z, CTRL + Z,
1:37:52CTRL + Z, até aqui, selecionei Vaca Alegre, selecionei a lista de comidas, e agora eu vou
1:37:56apertar CTRL + ALT + G para criar aquele nosso frame, beleza? CTRL + R, isso daqui eu vou chamar,
1:38:01sei lá, de Vaca Alegre Container. E agora que isso daqui está feito, esses dois elementos, eles têm
1:38:07que preencher esse espaço aqui inteiro, correto? Para eles ficarem certinhos, eles aumentarem e
1:38:11diminuírem conforme o elemento aumentar. Eu vou vir aqui no Vaca Alegre e no Alfred Box,
1:38:16selecionei os dois, e se eu for aqui, ele não vai ter o preencher, por quê? Porque o pai deles,
1:38:20que é o Hero, ele não está com o Auto Layout. Eu só posso preencher, eu só posso abraçar e
1:38:25essas coisas, se o elemento pai tiver Auto Layout. Então, aqui no Hero, SHIFT + A, agora ele tem auto
1:38:31layout e vai dizer, meu Deus, ele quebrou tudo. Calma, respira. Primeira coisa, vamos fazer esses
1:38:35elementos caberem na largura. Selecionei aqui o Alfred Box, com ele selecionado, vou clicar aqui e
1:38:41vou apertar fill. Outra forma de fazer isso é vir aqui na borda e quando ele está com essa setinha
1:38:45de um lado para o outro, você segura ALT ou Option e dá dois cliques e ele já muda para o preencher.
1:38:50Aqui nós podemos fazer a mesma coisa, ALT ou Option, dois cliques e ele mudou para o preencher.
1:38:55Só que agora, você vai olhar, poxa, mas esse elemento aqui, ele está totalmente fora, por que
1:39:00ele não está certo? Porque ele está, o Constraint dele, ele está preso à esquerda e a gente quer que
1:39:05ele fique preso à direita. A gente vai clicar aqui na direita e agora, a gente vai alinhar
1:39:09esse elemento à direita também. Agora, ele está alinhado, bonitinho. E a única coisa que a gente
1:39:14precisa fazer, está vendo que a distância agora entre o texto e a parte de baixo aumentou? A gente
1:39:18pode diminuir essa distância manualmente, aqui está com zero, estou aqui com o Hero selecionado
1:39:22e eu vou reduzindo, menos, menos, menos, menos, até ficar mais ou menos certinho ali, lá na
1:39:26bordinha do R. A hora que o R encostou ali no meu elemento, ele está certinho. Aí você vai dizer,
1:39:31poxa, mas o texto está para trás, como é que eu resolvo isso? Tem uma opção no Auto Layout,
1:39:36se você clicar aqui nessas opçõezinhas, por padrão, quando a gente cria um Auto Layout,
1:39:40a camada que está embaixo, nesse caso, essa é a camada de cima, a Vaca Alegre Container,
1:39:45essa é a camada de baixo. Por padrão, a camada de baixo, ela é visualizada em cima do elemento.
1:39:50Isso é bem importante falar, principalmente se você vem de outras ferramentas de design,
1:39:53porque o padrão mais comum é que o que está em cima, fique em cima das camadas. E nesse
1:39:58caso específico, quando se usa o Auto Layout, o padrão é invertido. Para resolver isso...
1:40:02Clica nessas configuraçõezinhas e aqui canvas stacking, ou seja, qual que é a posição da pilha
1:40:07no canvas, em vez de last on top, você coloca first on top. E agora o texto já está em cima
1:40:12do outro. E o mais bacana é que se agora eu vier aqui nas setinhas, measurements,
1:40:17definitions, external margin, e mudar, por exemplo, pra 120 novamente, ele já se ajusta,
1:40:22tudo de forma correta. E o meu elemento está muito mais flexível, beleza? E agora a gente pode
1:40:26partir pra criar aquele nosso super carrossel, bora? E antes da gente criar o nosso carrossel,
1:40:31bora dar uma analisada nele. Tô aqui com o arquivo final e não o início que a gente tá trabalhando.
1:40:35Vou apertar CTRL + ALT + Enter pra entrar no modo de apresentação, ou aperta na setinha
1:40:41aqui pra apresentar. E eu quero dar uma olhada em algumas coisas. Vou só apertar a letra F pra ficar
1:40:45em tela cheia. E pra esconder essas barrinhas, vou apertar CTRL + \ (barra invertida). E agora
1:40:51ele sumiu bonitinho só pra gente visualizar, beleza? Nesse elemento tem algumas coisas que me
1:40:55chamam a atenção. A primeira delas tem o título, que pode ser um componente, um elemento separado
1:40:59do meu carrossel. Esse título, normalmente, eu gosto de criar como componente. Porque muitas
1:41:04vezes, quando a gente trabalha com sites, com aplicativos e assim por diante, esse título,
1:41:08ele se repete, tem um padrão de título. No nosso layout, em específico, ele só é utilizado aqui.
1:41:13Mas a gente vai criar como componente só pra gente treinar, beleza? Além disso, no carrossel,
1:41:17vocês vão ver que tem várias coisas. Vocês conseguem identificar o que são componentes
1:41:21aqui? Primeira coisa, essas setinhas, elas são componentes tanto por terem interação, como por
1:41:26ser algo que se repete. Esse mais e menos, também são o mesmo componente, só que com um tamanho
1:41:31menor. Além disso, esse card inteiro aqui, também é um componente que se repete. Se repete aqui,
1:41:37se repete ali do lado e assim por diante. E por fim, o carrossel todo, essa interação de clica
1:41:42pra cá, vai pra cá, vai pra lá, enfim, também é um componente. Pra gente criar esse elemento todo,
1:41:46a gente vai começar com os componentes mais internos, com as setinhas. Os nossos títulos,
1:41:51eles já estão configurados, bonitinhos, só a gente utilizar, já tá como estilo salvo
1:41:54no nosso arquivo. E assim, a gente vai compondo tudo isso que a gente vai criar, beleza? Então,
1:41:58bora lá pro nosso arquivo. Eu vou apertar Esc pra sair daqui, CTRL + W pra fechar o protótipo.
1:42:04Vou selecionar o cardápio aqui, CTRL + C. Vou pro nosso arquivo, apertar a barra de espaço, clica e
1:42:09arrasta, clica e arrasta. CTRL + V, vou só colocar aqui um preenchimento, apertar o mais. Ele já
1:42:13colocou o preenchimento branco pra mim. Ao invés de eu criar diretamente embaixo da Home, eu vou,
1:42:17a princípio, criar esse elemento lado a lado aqui. Só pra gente ter mais espaço e uma maleabilidade
1:42:22maior no canvas. Depois, a gente adiciona ali, como já tá com Auto Layout, tá tranquilíssimo.
1:42:26É só a gente cuidar de fazer na largura certa, beleza? O que a gente vai fazer? Primeira coisa,
1:42:30esse elemento do título. Vou apertar a letra T e eu vou escrever aqui, cardápio. No meu caso aqui,
1:42:36vou abrir nas bolinhas. Vou apertar Heading / Medium. Ele já tá selecionado ali, bonitinho.
1:42:41Além disso, eu vou vir aqui em preenchimento. Vou clicar nas bolinhas e vou lá embaixo e selecionar
1:42:45esse primeiro, Linear. Primary to Secondary. Sempre que os elementos estiverem em colunas,
1:42:50sempre que estiver em linhas, sempre que estiver meio organizado, dá pra gente usar Auto Layout,
1:42:55beleza? Esse cardápio com essa linha embaixo é uma coluna. Esse carrossel com elementos que se
1:43:00repetem é uma linha. Todos esses elementos a gente pode utilizar Auto Layout. Aqui tem um
1:43:05texto embaixo do outro, embaixo do outro. É uma coluna, dá pra usar Auto Layout. Aqui tem um botão
1:43:09do lado do outro, é uma linha, Auto Layout. Então, todos esses locais que podem ficar organizadinhos,
1:43:14quer uma linha reta, uma coluna reta, pode usar e vamos usar Auto Layout, beleza? Então, aqui
1:43:18eu tenho o cardápio, vamos fazer a linha. Eu vou apertar a letra L, que é a ferramenta de linha,
1:43:23ou venho aqui embaixo, clico na setinha, seleciono a linha, cliquei, segurei SHIFT + arrastei. E aqui
1:43:28eu vou deixar com uma largura fixa de, por exemplo, 160 no W, beleza? E agora,
1:43:33se é uma coluna, alto layout, SHIFT + A. Criei o Auto Layout, vou aqui deixar com um espaçamento
1:43:39entre um e outro, uma variável aqui, vou colocar, sei lá, 32, por exemplo. E aqui, na minha linha,
1:43:44eu vou deixá-la com 4 de largura. O fechamento, tá vendo que aqui, se eu aproximar da minha linha,
1:43:49ela está com o fechamento totalmente reto. E no meu original, ele é arredondadinho. Então,
1:43:53esse endpoint e o final, eu vou deixar aqui round, pra ele não ficar retinho. E, por fim,
1:43:58o que eu vou fazer é o seguinte, eu vou pegar aqui esse mesmo degradê, vou apertar nas bolinhas, vou
1:44:03lá embaixo, apertar no primeiro, quebrar o link de propósito, nesse caso. O ideal é não quebrar
1:44:08esses links, é criar novamente um estilo com 20% de qualidade, enfim. Eu não vou fazer só pra não
1:44:12ficar muito cansativo o vídeo, vou clicar aqui e vou colocar aqui, 20%, e ele já ficou certinho,
1:44:18a minha linha é bem parecida com a anterior. Vamos só transformar isso daqui em um componente,
1:44:22CTRL + ALT + K, CTRL + R, title é o nome do nosso componente. E o que a gente vai fazer aqui,
1:44:27como agora esse elemento não é só o cardápio, ele é um título, que deveria ser mais genérico,
1:44:31vamos mudar aqui, ao invés de cardápio, vamos chamar aqui de title também. E aqui, só cuidar,
1:44:35porque ele está com um tamanho de fill, está com preenchimento. Nesse caso, eu prefiro que abrace
1:44:40o título, e aqui, a mesma coisa, esse elemento todo, o title, eu quero que ele não tenha uma
1:44:45largura fixa, ele está com 286, vou selecionar o hug, eu prefiro que ele abrace o título,
1:44:49e assim fica mais certinho. Agora eu vou apertar CTRL + C, CTRL + V, só pra copiar meu componente,
1:44:54e o filho dele, eu vou chamar de cardápio, beleza? Então já tenho aqui o meu componente de título,
1:44:59e eu tenho o título cardápio. Agora o que a gente precisa fazer, é criar esse carrossel. Como que a
1:45:04gente vai fazer isso? Por enquanto, eu vou deixar essas carinhas aqui em cima, só pra depois a gente
1:45:07junta eles com o nosso carrossel. Primeira coisa, vamos criar esses componentes aqui,
1:45:11que são as setinhas, que são esse mais e menos, como que a gente faz isso? Vamos começar com um
1:45:16ícone. Eu vou pegar lá o ícone, vou apertar SHIFT + 1 pra ver minha tela inteira, vou clicar aqui
1:45:21nos icons, vou apertar SHIFT + 2, vou apertar na setinha, CTRL + C, SHIFT + 1 novamente, vou
1:45:26selecionar tudo aqui, SHIFT + 2, só pra vir pra essa área, vou apertar CTRL + V pra colar a minha
1:45:32setinha. Nesse componente aqui, eu vou copiar só ele aqui, CTRL + C, vou apertar CTRL + SHIFT + V
1:45:36pra ele colar aqui fora bonitinho, pra gente analisar o que que ele é. Ele tem uma setinha
1:45:40com 32 de largura e altura, então eu vou pegar a minha seta, lembra, quando a gente aumenta vetor,
1:45:44o melhor é a ferramenta de escala, então letra K, ou venha aqui na setinha, aperta Scale, e ao invés
1:45:50de 24, eu vou colocar aqui 32, que é o tamanho padrão do meu ícone. Como isso daqui é um ícone,
1:45:54tá vendo? É um ícone com um elemento em volta, com um fundo, com um borda, enfim. Consigo fazer isso
1:45:59somente com Auto Layout. Vou selecionar o ícone e vou colocar um Auto Layout nele, SHIFT + A,
1:46:03e agora eu vou chamar de CTRL + R, Icon Container, então é o container do ícone. Esse container,
1:46:08ele tem 72 de largura com 72 de altura, o que que a gente faz? Oh! Clico no nosso container,
1:46:14né? 72 de largura, 72 de altura, e ele tá com o mesmo tamanho, por mais que não pareça,
1:46:20ele está com o mesmo tamanho anterior. Nossa setinha tá aqui perdida no canto, por quê? Porque
1:46:25ela não está alinhada ao centro, podemos clicar aqui pra alinhar ao centro. O nosso elemento,
1:46:29ele tá com um padding, eu vou tirar e colocar 0, eu vou colocar 0 aqui também. Vou colocar agora o
1:46:34background que ele tá utilizando, então eu venho aqui em Fill, selecionando as bolinhas, vamos lá
1:46:38embaixo e vou colocar o segundo, Linear, Secondary to Primary. Vamos colocar o nosso arredondamento,
1:46:43vou clicar no hexágono, vou buscar aqui o br-full, e ele já tá ali no entorno do nosso
1:46:48elemento. Nossa setinha, cliquei nela, ao invés de preto, eu vim aqui do lado do Selection Color,
1:46:53clicar nas bolinhas, e lá pra baixo até o base-0, agora ela já está com a cor zerada. E além disso,
1:46:58o nosso elemento, ele tem uma borda, um Primary e um Opacity 20, blá, blá, blá. Então aqui, primeira
1:47:04coisa, seleciono o container, vamos colocar aqui uma borda Stroke, aperto maisinho do lado dele,
1:47:09agora ele já tem uma borda, só que é uma borda preta, feia e triste. Então eu coloco aqui,
1:47:14largura da borda, 8. Posição da borda, tá vendo que ela tá dentro do meu elemento? Eu quero que
1:47:18ela fique pra fora, então ao invés de Inside, vou colocar Outside, pra ela ficar fora do
1:47:23meu elemento, não dentro do espaço dele. Tá vendo aqui a borda vaza do espaço do elemento. Vou mudar
1:47:28a cor da borda, ao invés de preto, vou clicar aqui nas bolinhas, vou aqui Primary, Opacity 20,
1:47:3220%, e agora ele já tá igualzinho ao meu outro elemento, a única coisa que ele não tá fazendo
1:47:37é o efeito roubo. Vamos primeiro transformar ele em um componente, CTRL + ALT + K, e agora
1:47:42ele é um componente, bonitinho. Vamos chamar esse componente Interactive Icon, que é um ícone que a
1:47:47gente pode interagir, é o pior nome de componente que você pode colocar, mas tá aí, estamos com o
1:47:51nosso componente com nome zoado, beleza. Agora com o meu componente, eu vou criar um outro estado pra
1:47:56ele. Como assim? Vem aqui no maisinho, cliquei, e agora o meu componente já tem um segundo estado. O
1:48:00primeiro estado se chama, novamente, Default, vou mudar, ao invés de Property, é o quê? É um estado,
1:48:05State. O segundo estado, quando o mouse passar em cima, eu quero que ele mude pro próximo estado,
1:48:10então é um estado de hover, H-O-V-E-R, hover. E agora a gente tem que criar também a interação,
1:48:16vamos até fazer isso antes de mudar o estado, SHIFT + E, cliquei, vou ver aqui passei o mouse
1:48:20na bolinha, clica, quero que ela vá pra esse próximo estado, on CLick, não, While Hovering,
1:48:25quando passar o mouse em cima, quero que vá pro próximo estado, e eu não quero Instant,
1:48:29quero Smart Animate, eu quero que o Figma tente identificar o que mudou de um elemento pro outro,
1:48:34e tem que fazer uma transição sutil entre isso. Então clico aqui no Smart Animate, eu vou fazer o
1:48:38seguinte, vou colocar pro Gentle, e deixar com 800 milissegundos, e o que eu vou fazer em seguida,
1:48:42eu vou clicar no nosso estado Hover, vou apertar SHIFT + E pra voltar pro modo Design,
1:48:47e no preenchimento, eu vou clicar aqui e eu vou mudar, ao invés de ser esse que vai do Secondary
1:48:51pro Primary, eu vou inverter do Primary pro Secondary. E agora vamos testar isso aqui,
1:48:56CTRL + C, vou apertar a barra de espaço, clico e arrasto, CTRL + SHIFT + V, colei ele aqui fora,
1:49:01vou desenhar um frame F, só cliquei e desenhei no entorno, e só pra gente visualizar rapidinho,
1:49:06já sabe, SHIFT + barra de espaço, e a gente consegue visualizar de forma rápida esse nosso
1:49:11elemento. Agora quando eu passo o mouse em cima, olha, já tá fazendo uma transição bem legal. Uma
1:49:15diferença é que no meu original, essa seta, ela aumenta, ao invés de ser 32, vou apertar cá,
1:49:19ele passa a ser, por exemplo, 48, vamos colocar muito no monte, e daí ela aumenta um montão. No
1:49:24meu caso, eu prefiro deixá-la, apertar aqui a letra K novamente, deixá-la com 40, porque daí
1:49:28ele aumenta só um pouquinho, é só uma transição um pouco mais sutil, beleza? Esse componente já
1:49:32está funcionando, posso deletar, posso deletar. E um ponto importante é que aqui no caso das setas,
1:49:37eu posso trocar, eu posso só inverter o componente, enfim, mas no caso do mais e
1:49:42do menos, com certeza vou ter que trocar o ícone também. E agora, lembra que a gente fazia quando
1:49:46a gente queria criar aquele componente que tinha um ícone que pode ser alterado dentro e assim por
1:49:50diante? Dois cliques aqui e selecionei o ícone letra Q pra entrar no modo de edição múltipla,
1:49:54clicar nas três pontinhas, create instance swap property, mudei pra icon, apertei no mais,
1:49:59e aqui ele apareceu um monte de coisa, não está mostrando só mais meus ícones, porque na verdade
1:50:03isso daqui é meio que um bug do Figma, sendo muito honesta com vocês, porque apesar disso daqui estar
1:50:07bonitinho em sessões, enfim, ele está tentando colocar tudo o que está em todas as sessões,
1:50:11e não somente os ícones, ele não reconheceu como uma pasta ali. Pra facilitar por enquanto,
1:50:15eu vou fazer o seguinte, eu vou clicar e arrastar os ícones pra fora dessa sessão.
1:50:19Então voltei lá no meu componente, SHIFT + 2, selecionei ícone, letra Q pra selecionar
1:50:23os dois, três pontinhos, Create Instance Swap Property, Icon, e agora se eu apertar no mais,
1:50:29deixar desselecionado isso daqui, eu consigo criar a propriedade e já tá tudo certinho,
1:50:33beleza? Então agora eu vou apertar a letra Q novamente só pra sair daquele modo de edição
1:50:36múltiplo, e agora nós já temos a nossa setinha. Pra finalizar, vamos fazer também esse do mais
1:50:41e do menos? A única diferença é o tamanho dele. Esse daqui é 72, aquele ali é 56. Vou
1:50:46até apertar CTRL + R, barra, isso daqui eu vou chamar de Medium, vou apertar ALT (Option) + K,
1:50:52e arrastar, se eu segurar o SHIFT, ele fica até na mesma linha, e agora eu vou renomear esse daqui,
1:50:57CTRL + R, mudei para Small. Selecionei o primeiro, letra Q, selecionei o segundo, ao invés de 72, 56,
1:51:04ao invés de 72, 56, e uma coisa que eu vou fazer é só deixar melhor padronizada as setinhas. Apertei
1:51:10a letra Q pra sair do modo de edição múltiplo, letra K, ao invés de 32, vou deixar aqui como 24,
1:51:15por exemplo, e a segunda setinha, ao invés de 40, vou deixar como 32, e agora a nossa interação
1:51:20também já funciona aqui no nosso elemento duplicado, a gente já tem os dois elementos
1:51:24pra gente utilizar. Vou deixar eles também aqui no cantinho, bonitinhos, porque daqui a pouco a gente
1:51:29vai usar eles tanto no card quanto no carrossel, beleza? Bora agora criar o nosso card? O nosso
1:51:34card é um elemento tipo esse daqui, vou copiar, CTRL + C, colocar aqui fora, CTRL + SHIFT + V,
1:51:39e aqui tem o card que a gente vai criar. Como que a gente cria um card desse? Primeira coisa,
1:51:43ele tem 880 de largura, então vamos criar um frame já com esse tamanho, vou apertar a letra F,
1:51:48cliquei e arrastei, e vou colocar aqui, 880 por 880 de largura e de altura. Além disso, ele tem um
1:51:55arredondamento de borda. No border radius, cliquei no hexágono, vou selecionar aqui esse br-100, que
1:52:00é o 80, agora ele já tá com o mesmo arredondamento de borda. Vamos começar criando esses textos,
1:52:04não burger, blá blá blá, enfim. Esses textos, eu já tenho eles todos escondidos, vou apertar
1:52:09ALT + L ou Option + L, vou clicar aqui, lembra dos meus textos que estão escondidos? Cliquei nele,
1:52:13vou apertar SHIFT + 2, eles estão ali, perdidos no meio do nada, vou clicar e arrastar eles lá
1:52:18para perto do meu card, vou até fazer o seguinte, toda essa parte aqui de capa, enfim, já foi feita,
1:52:23eu deletei ela, eu vou deixar por enquanto só a parte que a gente ainda não criou. Essa daqui é
1:52:27o título do nosso card componente, beleza? São os textos do nosso card componente. Vamos fazer
1:52:32o seguinte, vou copiar esses textos, CTRL + C, vou jogar aqui para baixo, letra T, CTRL + V,
1:52:36beleza? Vou até dar dois cliques, Alt + cliquei, arrastei e segurei SHIFT, vou deletar esse daqui,
1:52:42apaguei, apaguei, e eu não quero que isso daqui seja um bullet, beleza? Vou fazer a mesma coisa
1:52:47aqui, cliquei, apaguei o título, quero ficar só com a descrição, e agora duplico novamente, ALT
1:52:52ou Option, cliquei, arrastei SHIFT, aqui em cima eu já apago essa parte do acompanha, blá blá blá,
1:52:57e por fim, vou só deixar aqui o acompanha na parte de baixo, beleza? E apagar aqui essa última linha.
1:53:02Agora eu já tenho o título, já tenho o acompanha e já tenho os textos. Vou apertar todos os textos,
1:53:07se eles estão em uma coluna, o que a gente faz? Auto Layout, SHIFT + A, bonitinho, CTRL + R,
1:53:13Text, que é o nome dos meus textos, beleza? Se eu quiser, eu posso até já jogar ele aqui para dentro
1:53:17do meu frame, que é o meu card, CTRL + R, frame 1, não, Card, esse daqui é meu card. Vamos colocar
1:53:22aqui agora certinho os títulos. Cliquei no título do card, cliquei nas bolinhas e vou colocar aqui o
1:53:27Small. Cliquei no corpo de texto, na descrição do card, vou usar aqui também o Body / Small,
1:53:33vou usar até o Medium aqui, um pouquinho maior, mais bonitinho, e o acompanha fritas e tudo mais,
1:53:37cliquei nas bolinhas e vou deixar esse daqui com o Small. E uma coisa que eu vou fazer nesse texto do
1:53:42acompanha, como eu quero deixar o meu componente mais flexível e mostrar algumas coisas para vocês,
1:53:45eu vou separar, tá vendo que no meu original, o acompanha e o fritas são dois blocos de texto
1:53:49separados, porque esse daqui eu vou deixar como um texto editável do componente e o acompanha
1:53:54é um texto fixo. Então eu vou apertar CTRL + D para duplicar, vou selecionar o acompanha,
1:53:58apertei CTRL (Cmd) + selecionei o próximo acompanha, SHIFT + A para criar um Auto Layout,
1:54:04CTRL + R, vamos chamar isso daqui de acompanha mesmo. O texto eu não quero que ele esteja um
1:54:07embaixo do outro, eu quero que o acompanha, que esteja o título acompanha e em seguida os
1:54:11acompanhamentos, um ao lado do outro. Então ao invés de ser embaixo, eu mudo para horizontal,
1:54:15vou clicar e vou só deletar esse texto fritas, blá, blá, blá, blá, blá, blá, blá, blá,
1:54:19e aqui também eu vou deletar o acompanha, vou até deixar isso aqui, dá para ser como um hug,
1:54:23pode abraçar, e esse espaçamento ao invés de ser 24, vou deixar esse espaçamento pequeno de,
1:54:27por exemplo, 4, e ele já fica ali grudadinho. O acompanha, ao invés de ser o regular small,
1:54:32eu vou usar o semi-bold small, só para ele ficar com um negritinho, e além disso,
1:54:36no nosso original, ele tinha um iconezinho de um coração. Bora pegar esse coração lá na
1:54:44biblioteca, vou apertar SHIFT + 1, vou clicar no ícone, SHIFT + 2, CTRL + K para mostrar aquele
1:54:52nosso painel de comandos, começa a digitar tabler, como a gente já tinha usado o plugin,
1:54:52ele já aparece aqui bonitinho, maravilhoso, cliquei no tabler. Assim que ele carregou, vou
1:54:53pesquisar aqui, heart, coração, vou buscar aqui o preenchidinho, cliquei nele, ele já adicionou
1:54:58no meu layout, CTRL + ALT + K para transformar em componente, vou clicar e arrastar ele bonitinho lá
1:55:03com os outros amiguinhos deles, CTRL + X, cliquei CTRL + V só para ele estar dentro da mesma sessão,
1:55:08apertei CTRL + C, posso fechar o plugin, SHIFT + 1 para dar zoom na tela inteira, card, SHIFT + 2
1:55:13para dar zoom no card, e agora eu vou apertar CTRL + V para colar aqui o coração, o coração eu vou
1:55:18fazer o seguinte, primeiro que ele está com uma outra corzinha ali, não está preto, embora eu não
1:55:21mexa na coordenada ainda, mas eu vou deixar como Primary-10 por enquanto, vou apertar aqui SHIFT
1:55:26+ Enter para selecionar a camada mais de cima, que acompanha, agora eu vou deixar centralizados esses
1:55:31elementos, aqui é uma coisa que existe, está vendo que o espaço entre o coração e o título
1:55:36é um pouquinho maior que entre os dois textos, o acompanha, vou selecionar, selecionar SHIFT + A,
1:55:41CTRL + R, Text, e o acompanha ali separado eu vou aumentar um pouquinho, ao invés de 4 eu vou
1:55:45colocar aqui, por exemplo, 12, e agora eles já estão mais separadinhos, e no meu texto aqui,
1:55:49eu vou selecionar o Text, ao invés de 24, eu vou deixar aqui com 16 de espaço, agora ele já está
1:55:55bem parecido, o texto ali com o texto do meu card, por fim, tem a questão dos ícones, vamos pegar
1:56:01aqui o ícone pequeno, CTRL + C, vou apertar aqui, CTRL + V, são dois ícones, SHIFT + A,
1:56:06e aqui, CTRL + R, Icons, clicar na setinha para expandir, selecionei o ícone, CTRL + D,
1:56:11agora eles já estão lado a lado, selecionei o Icons novamente, vou aumentar aqui o espaço para,
1:56:16por exemplo, 16 também, vou tirar esse Padding, 0, também 0, e além disso, eu vou juntar agora todo
1:56:22esse componente aqui de texto, eu vou juntar com o componente de Icons, SHIFT + A, CTRL + R, Content,
1:56:27e eu vou chamar isso daqui de Conteúdo, presta atenção no que vai acontecer, primeira coisa,
1:56:30eu quero que esses ícones estejam alinhados na parte de baixo do meu elemento, então para alinhar
1:56:34embaixo, clico aqui para baixo, eu quero que isso daqui preencha, ao invés de ser uma largura fixa,
1:56:38eu vou clicar para preencher, e esses elementos eu quero que ele abrace como ele já está, e além
1:56:43disso, para não correr risco de quando colocar um texto grande, ele ficar grudado no meu ícone,
1:56:46eu vou adicionar um espaçamento aqui, ao invés de 0, posso colocar, por exemplo, 40,
1:56:50e agora isso daqui nunca vai ficar grudado um no outro, beleza? E para a gente visualizar melhor,
1:56:54bora colocar a imagem nos nossos cards, tô aqui com a pastinha do curso aberto, eu vou vir aqui
1:56:58em Fotos, Cardápio, e vou pegar aqui o Nãoburguer, que é exatamente o mesmo que está ali, beleza?
1:57:03Posso tanto clicar e arrastar ele aqui para dentro do Figma, ele colou meio que dentro do meu frame,
1:57:09enfim, mas nesse caso, a forma que eu vou fazer é o seguinte, eu quero usar essa imagem de fundo,
1:57:13no fundo do frame, eu vou deletá-la daqui, vou clicar no Card, vou clicar no Preenchimento,
1:57:18e eu quero que a imagem seja o preenchimento do meu frame, tem o primeiro, o segundo, o terceiro
1:57:22quadradinho é a imagem, vou clicar aqui nesse Swap Image, vou colocar Upload New, e vou lá
1:57:26achar novamente a minha imagem do Nãoburguer, vou mandar abrir, e assim que estiver aberto, ele já
1:57:31está com a minha imagem de fundo, e agora que eu coloquei a imagem, você vai dizer, meu Deus,
1:57:34está totalmente diferente do seu, por quê? Vamos ver o que está acontecendo, primeira coisa, esses
1:57:38ícones aqui, eles estão estranhos, o que será que está acontecendo? Selecionei eles, e eles estão,
1:57:41sem querer, no estado hover, vou deixá-los aqui no estado default, que é o estado padrão, beleza,
1:57:45isso daqui já está mais ou menos resolvido, daqui a pouco a gente vai trocar o ícone. Outra questão,
1:57:50o texto era branco, então vamos selecionar aqui o texto, todo o texto, em Selection Color, clicar
1:57:54nas bolinhas, e vou abrir lá embaixo, Base-0. Poxa, novamente está parecido, mas por quê? Porque
1:58:00o meu aqui, se você olhar, ele tem um degradê no fundo, que no de vocês ainda não tem, como
1:58:05que a gente resolve isso? Primeira coisa, como isso daqui já é um Auto Layout, eu vou fazer o
1:58:09seguinte, eu vou aumentar ele, para preencher toda a largura do meu Card, beleza? Agora que ele está
1:58:14na mesma largura, 880 do Card, eu vou adicionar aqui um Padding, que pode ser, por exemplo, de
1:58:1980 também, parecido com o arredondamento da borda. E eu vou fazer a mesma coisa embaixo, vou colocar
1:58:24aqui também 80 em cima e embaixo, beleza? E eu vou alinhar aqui com a parte de baixo, posso abrir
1:58:30aqui, clicar nesse ícone, e ele já alinha embaixo, está vendo, ficou muito alto, e eu vou diminuir só
1:58:34em cima e embaixo aqui, para, por exemplo, 56, e agora ele já está bem mais parecidinho. E eu
1:58:39vou adicionar um degradê no fundo desse Content aqui, vou vir aqui no fill, vou apertar no mais,
1:58:45ao invés de ser um preenchimento padrão, vou clicar aqui no preenchimento, segundo ícone,
1:58:50que é o de degradê, e esse degradê, ele vai começar aqui, cliquei nele, vou para o Libraries,
1:58:54vou digitar aqui, Base, e eu vou vir aqui no Base-80, começando no 70%, beleza? E eu vou
1:59:01novamente, cliquei aqui no branco, Libraries, eu vou lá embaixo, lá no Base, para esse Base-80,
1:59:060%. E agora, ele já está bem parecido com aquele meu anterior. Uma outra opção aqui, ao invés de
1:59:12deixar com 80, eu vou fazer o seguinte, vou deixar 64, e 64, porque daí ele fica melhor padronizado,
1:59:17o mesmo espaço aqui, e o mesmo espaço aqui, beleza? Agora ficou bem parecidinho. Por fim,
1:59:22bora trocar os ícones aqui, que são duas setinhas, SHIFT + 1, para ver a tela inteira, SHIFT + 2,
1:59:27para ir para os ícones. Como é que a gente acha a ícone? Ctrl + K, pesquisa Tabler, ele já está ali,
1:59:32meus ícones, vou digitar Plus, ele tem o meu ícone de mais, e Minus, tem o meu ícone de menos,
1:59:38já adicionei aqui os dois, os dois ícones selecionados, vou apertar novamente CTRL + K,
1:59:42vou começar a digitar Multi, comecei a digitar Multiple, ele já apareceu aqui,
1:59:46Create Multiple Components, cliquei nessa opção, ele já criou Multiple Components,
1:59:50é a mesma coisa que eu ir lá e clicar nas três bolinhas, e eu acho mais fácil usando o CTRL + K,
1:59:55porque fica mais rápido, e eu não preciso ficar indo até lá, indo até outro pedaço da tela.
2:00:00Indo clicar em todos os lados da minha tela, eu prefiro fazer as coisas pelo teclado,
2:00:03beleza? Então por isso que eu uso o CTRL + K, mas é como você preferir. Então já tô aqui com os dois
2:00:08bonitinhos, vou até alinhar eles bonitinho aqui. Vou alinhar aqui bonitinho com o outro
2:00:12amiguinho dele aqui. Vou cortar CTRL + X, vou clicar aqui nos ícones, vou apertar CTRL + V,
2:00:16só pra eles estarem na mesma seção. E agora SHIFT + 1 pra ver tudo. Cliquei no Card, SHIFT + 2. Aqui
2:00:22no primeiro componente é o menos, cliquei nele. Vou mudar aqui pro menos. No segundo é o mais,
2:00:27cliquei nele. E mudei aqui pro mais. E agora tá bem parecido, a única coisa é que essa borda tá
2:00:33muito grande pra esse componente que é menor. Vou clicar nos dois amiguinhos, cliquei no primeiro,
2:00:38letra Q, pra entrar no modo de edição múltipla. E ao invés de 8, eu vou deixar aqui como 4 a borda.
2:00:43E agora ele tá bem certinho. Por fim, só falta transformar isso num componente, CTRL + ALT + K.
2:00:48E agora isso daqui é um componente. Pra eu deixar ele um pouquinho mais flexível, eu posso deixar
2:00:53esses títulos aqui como editáveis no componente. Vou deletar esse amiguinho do lado, vou selecionar
2:00:57o título do Card. Cliquei nessa setinha do lado, eu vou chamar de Title, título. Vou selecionar a
2:01:01descrição, cliquei na setinha do lado, vou criar a propriedade Description, a descrição. Vou clicar
2:01:06aqui no Fritas, blá blá blá, setinha do lado, Acompanhamento, prontinho. E agora o nosso Card
2:01:12ele tem várias propriedades, título, descrição e acompanhamento. E com isso, a gente já consegue
2:01:17começar a criar realmente o nosso carrossel. Como é que é o carrossel? Eles são vários Cards,
2:01:22em tamanhos diferentes e opacidades diferentes. Olha só o que vai acontecer, vou apertar CTRL + C,
2:01:27CTRL + SHIFT + V pra colar o meu Card novamente. Vou apertar SHIFT + A, CTRL + R e vou chamar de
2:01:32carrousel, carrossel. Carrossel em inglês porque nós somos chiques, beleza? A largura desse
2:01:37carrossel é 1920, vamos colocar 1920, beleza? E a altura é exatamente a altura do maior Card que
2:01:43é esse daqui, do 880. Eu vou pegar esse Card e eu vou duplicar ele cinco vezes. Uma, duas,
2:01:48três, quatro, cinco. E vocês vão ver que ele até tá ultrapassando. O meu frame tem esse tamanho,
2:01:54porém os Cards estão ultrapassando a largura do frame. E isso é esperado, e é isso que vai
2:01:59conseguir fazer aquela animação de vai e volta. Enfim, a gente já vai ver como isso vai funcionar.
2:02:03A primeira coisa que eu vou fazer, eu vou tirar esse Padding do lateral. Vou deixar zero também.
2:02:07E eu vou deixar tudo centralizado, tá bom? Agora com tudo centralizado, antes da gente
2:02:12mexer mais nisso, vamos substituir os textos e as imagens de todos os Cards. Cliquei e arrastei
2:02:17aqui o texto. E eu vou colocar aqui pra cada um deles. O escondidinho veg, sushi, nãoburguer,
2:02:21fake fish. Só o escondidinho veg, CTRL + C, CTRL + A, CTRL + SHIFT + V. Textinho aqui dele, CTRL + C,
2:02:26CTRL + A, CTRL + SHIFT + V. Acompanhamento dele, que já tá aqui certinho, só mantive a imagem,
2:02:32cliquei no Card, cliquei no Image, Swap Image, Upload New. E vou procurar lá o escondidinho veg,
2:02:38Open e troquei. Agora eu vou acelerar um pouquinho o vídeo e vou fazer pra todos eles,
2:02:41beleza? Prontinho, já troquei aqui todos os textos, imagens, enfim. Uma coisa que tá me
2:02:51incomodando um pouquinho é que esse texto, ele tá ainda muito comprido e muito próximo dos ícones. A
2:02:56vantagem de eu estar trabalhando com um componente é a seguinte, cadê meu componente daqui? Tá aqui
2:03:00meu Card. Vou até trazer ele pra baixo pra ficar mais fácil de visualizar, mas agora,
2:03:04se eu aumentar o espaçamento, que tá aqui como 40, vou tentar até dobrar, vou colocar aqui por
2:03:08exemplo 80 pra ver como fica. Ele já ajustou em todos os meus Cards e ficou melhor em todos eles.
2:03:13E com isso ajustado, o que a gente vai fazer? A gente vai criar um componente com esse carrossel.
2:03:18CTRL + ALT + K, criei o componente e a gente vai ter que criar os vários estados do carrossel.
2:03:23Vamos começar criando uma imagem muito parecida com essa daqui. O que acontece? No original,
2:03:27esse Card aqui ele diminui a opacidade, ele cai pra 60%, pois tem um outro Cardzinho aqui,
2:03:33mais escondido, menor ainda, com opacidade zero. O que eu vou fazer é o seguinte, eu vou selecionar
2:03:37esse Card e esse Card eu vou apertar a letra K pra diminuir proporcional, bonitinho. Ao invés
2:03:42de 880 de altura, eu quero que eles tenham 880 menos 160. Isso é uma coisa bacana, dá pra fazer
2:03:49cálculo nos campos de números do Figma. Apertei Enter, ele caiu pra 720. E agora, esses últimos
2:03:54aqui, eu vou apertar a letra K e eu quero que eles tenham 720, que é o tamanho desse Card anterior,
2:03:59menos 160. Dessa forma eles vão todos diminuindo de forma proporcional pra fazer aquele efeito de
2:04:04aumenta e diminui, enfim, bonitinho, beleza? Essa é a primeira coisa. Além disso, esses
2:04:09Cards também diminuem a opacidade. Esse daqui tá com 100%, esse amiguinho dele aqui já tá com 60%.
2:04:14Aqui nos amiguinhos, selecionei os amiguinhos, 60%. E esses outros aqui que ficam bem no fundo,
2:04:19na verdade eles nem aparecem, a opacidade deles é zero. Selecionei aqui e coloquei 0%,
2:04:25beleza? Por fim, tem o espaçamento entre um card e outro, que é 32. Selecionei aqui meus Cards e vou
2:04:30colocar aqui o espaçamento de 32. Teoricamente já tá quase tudo certinho pra funcionar. O que
2:04:35falta? Essas setinhas. E se você perceber, ele tem um degradê branco aqui do lado do nosso Card pra
2:04:41fazer um efeito de quase como que some no canto da tela. Então primeiro vamos pegar uma das setinhas,
2:04:45CTRL + C, vou selecionar o nosso carrossel, CTRL + V. Na hora que eu colei a setinha, como isso
2:04:50daqui é um Auto Layout, eu apertei ALT + L aqui pra colapsar as minhas camadas, tô aqui com ele,
2:04:55só que ele ficou dentro do Auto Layout. Pra eu quebrar o Auto Layout, como é que eu faço?
2:04:59Só esse elemento eu não quero que ele esteja dentro. Vou clicar aqui pra Position, ignorar
2:05:02o Auto Layout. Na hora que eu cliquei, eu posso alinhar a esquerda, porque ele agora vai alinhar
2:05:07a esquerda do frame. A mesma coisa se eu alinhasse a direita. Aqui alinhei a esquerda. Vou clicar com
2:05:11o botão de direita e vou apertar Flip Horizontal pra ele fazer essa virada aí, a seta agora já
2:05:16tá do outro lado bonitinho. Vou apertar SHIFT + setinha da direita, SHIFT + setinha da direita,
2:05:21SHIFT + setinha da direita, três vezes. E agora antes de fazer a mesma coisa com a outra seta,
2:05:25vou apertar CTRL + ALT + G pra criar um frame no entorno e eu vou chamar CTRL + R, Arrow Container.
2:05:30Esse container aqui, a hora que eu aumentar ele, vai ser onde vai ter o meu degradê. Então cliquei
2:05:35aqui, cliquei aqui, coloquei aqui tudo bonitinho, vou aumentar aqui esse degradê, vou deixar ele
2:05:40com 320 de largura. Além disso, eu quero que essa setinha aqui, eu quero que ela fique alinhada ao
2:05:46centro. Então vou selecionar aqui pra alinhar ao centro e vou colocar aqui uma, duas, três,
2:05:50quatro vezes. Quatro vezes aqui pra ela tá com 32 de distância. Agora, só pra gente visualizar
2:05:56melhor, e é algo que a gente vai fazer depois também, Eu vou apertar aqui e vou selecionar Clip
2:05:59Content pra ele não mostrar o que tá além da área do meu frame. É o que acontece aqui já também,
2:06:04tá certo? E com isso, bora criar esse degradê. Esse degradê, eu vou colocar aqui preenchimento,
2:06:09segundo quadradinho, virar ele. Onde tá cinza, ele não é cinza, ele é na verdade um branco puro.
2:06:14Vou pro Libraries, vou procurar ali o Base-0. E onde ele tá branco do outro lado, ele é na
2:06:18verdade um branco só que indo pro transparente. É o que? O zero, 0%. E agora, ele já tem aqui
2:06:24aquele meu degradêzinho bonitinho. E agora o que eu vou fazer é o CTRL + D pra duplicar todo esse
2:06:29elemento. Vou clicar direita, Flip Horizontal pra flipar horizontalmente e vou mandar alinhar agora
2:06:36a direita. E agora eu já tenho as minhas setinhas bonitinhas ali, exatamente onde elas deveriam
2:06:41estar. Só falta fazer esse carrossel funcionar. Como que a gente faz isso? É o seguinte,
2:06:46nós já temos o nosso componente ALT (Option) + L, vou apertar no losanguinho com mais. Ao invés de
2:06:50chamar de estado, eu vou chamar de, por exemplo, Card, pra dizer qual card que tá mostrando. No
2:06:54primeiro, ele tá mostrando o Nãoburguer, então eu vou chamar aqui de Nãoburguer, pra eu saber qual
2:06:58card que tá em evidência. No segundo, quando eu apertar pra setinha pra esquerda, eu quero
2:07:03que ele venha todo pra lá, ou seja, o Fake Fish vai passar a aparecer, então no segundo eu vou
2:07:07chamar de Fake Fish. Então vamos tentar fazer essa interação antes de montar o resto? Vou tirar aqui
2:07:12temporariamente o Clip Content pra gente conseguir ver melhor. Vou também vir no componente,
2:07:16clicar no carrossel e também tirar o Clip Content dele pra gente conseguir ver bem. O que acontece?
2:07:20Quando o Fake Fish vier pro lado, esse primeiro card que tá aqui, vou até mostrar ele, vou tirar a
2:07:25opacidade e deixar em 100% por enquanto. Esse card que tá aqui do lado, é como se ele recomeçasse,
2:07:30ele fosse lá pro lugar, e que beleza. E todos os outros cards, eles andam um pro lado, ou seja,
2:07:35o Fake Fish agora, ele vai ficar no meio. Pra ele ficar no meio, ele tem que ter o mesmo estilo do
2:07:39Nãoburguer, que é o quê? Opacidade de 100% e o tamanho de 880. Então eu vou apertar a letra K, de
2:07:45Scale, e a gente já vai redimensionar todos esses números. O Fake Fish, 880, o Nãoburguer, letra K,
2:07:51720, o Quibeleza, também, K, 720, o Escondidinho continua com 560, e esse daqui de Rúcula, K, 560,
2:08:00beleza? E agora, esses dois últimos, a opacidade deles passa a ser zero. Esses dois segundos aqui,
2:08:06a opacidade deles passa a ser 60, e o Fake Fish, a opacidade dele passa a ser 100. E agora,
2:08:12o que que eu quero que aconteça? Eu quero que quando a pessoa clicar nessa setinha aqui,
2:08:15ele mude pra esse próximo estado do meu carrossel. Eu vou até selecionar o carrossel aqui,
2:08:19vou apertar SHIFT + A pra eu colocar um Auto Layout aqui, só pra deixar mais espaçado,
2:08:2380 de espaço entre um e outro, pra ficar mais clara essa diferença. Vou fazer o seguinte, vou lá
2:08:27no protótipo, SHIFT + E, quando o usuário clicar nessa setinha, então com a setinha selecionada,
2:08:31a hora que eu apertei nessa alçinha em azul, eu cliquei e arrastei. Eu quero que ele mude pra
2:08:35esse próximo estado do componente. Então quando eu clicar, on click, Change to Fake Fish, que é
2:08:40o próximo estado do meu componente. E aqui eu vou usar esse Smart Animate, eu vou deixar com 1200,
2:08:45beleza? Vamos ver se isso daqui tá funcionando. Vou apertar CTRL + C, SHIFT + E é só pra sair
2:08:49desse modo de protótipo, vou apertar SHIFT + 1, vou apertar novamente SHIFT + 2 aqui na minha
2:08:53Home, CTRL + V, vou colocar aqui embaixo, mesmo que sem o cardápio, enfim, por enquanto só pra
2:08:58gente visualizar. Vou apertar CTRL + ALT + Enter pra entrar no modo de visualização, vou clicar
2:09:02nessas setinhas, ajustar a largura, Fit Width, e agora, quando eu clico, olha o que acontece.
2:09:08Ele muda, mas ele muda meio estranho, né? Por que que isso tá acontecendo? Porque o Figma,
2:09:12esse Smart Animate dele, ele funciona com base no nome das camadas. Então o que acontece? Aqui
2:09:17tá tudo chamado Card, e com essa nomenclatura, o Figma não consegue saber o que é cada coisa. Pra
2:09:22ficar mais fácil do Figma entender, bora renomear bonitinho, esse daqui é o Escondidinho, CTRL + R,
2:09:27Escondidinho. Próximo é o Sushi, próximo é o Nãoburger, o próximo é o Fake Fish,
2:09:34e por fim, é o Quibeleza. No primeiro elemento, no primeiro componente, ele tá com os nomes certos,
2:09:38mas no segundo continua tudo chamado Card, o Figma tem que entender eu quero que o Nãoburger vá pra
2:09:44próxima posição, pra ele entender isso, tem que estar exatamente o mesmo nome. Então agora eu vou
2:09:47vir no segundo aqui, onde tá o Nãoburger, eu coloco o nome do Não Burger. Onde tá
2:09:51o Fake Fish eu coloco aqui o nome de Fake Fish. Eu vou fazer isso pra cada um dos elementos aqui,
2:09:57Quibeleza? O Escondidinho, que agora está lá no final, e por fim, o Sushi, foi o que faltou.
2:10:02E agora, se eu for visualizar, eu vou até carregar novamente pra garantir que não dá
2:10:06problema. Fechei, vou apertar SHIFT + 1, Cmd (CTRL) + ALT + Enter e deixar ele carregar.
2:10:10Vou mudar pro Fit Width e agora eu vou rolar lá embaixo, e a hora que eu aperto na setinha... Tá
2:10:16funcionando. Bonitinho, viu? Que bacana. Agora a gente vai fazer só mais um estado. Daria pra
2:10:20gente fazer todos os estados do carrossel, enfim. Mas a gente vai fazer só mais um estado, só pra
2:10:24reforçar o aprendizado, beleza? Como que a gente faz mais um estado? Vamos fazer aqui. A gente fez
2:10:27quando clica na setinha que vai pra um lado, que é o do Fake Fish. E agora a gente vai fazer CTRL + D
2:10:32aqui nesse primeiro, beleza? Apertei CTRL + D no primeiro. E agora que a gente duplicou,
2:10:36vamos fazer o seguinte. Primeira coisa, vou clicar aqui e vou tirar o Clip Content pra gente ver o
2:10:40que tem além da área do frame. O escondidinho, que antes estava aqui, ao invés de ele vir pro final,
2:10:45agora vai inverter. O Quibeleza vai lá pro início. Cliquei e arrastei ele até o início
2:10:50do meu elemento. Vou clicar aqui no Quibeleza, segurei SHIFT e cliquei lá no último. Vou deixar
2:10:54todos eles com a opacidade de 100, por enquanto, só pra gente ver eles bonitinhos. E agora a gente
2:10:58vai ter que redimensionar, galera. Lembra, quem tá no meio tem o tamanho de 880, então letra K,
2:11:03altura 880, pro nosso sushi, que é o astro dessa tela. Escondidinho veg e Nãoburguer, que são os
2:11:10que vão ficar do ladinho, K, 720. E por fim, Fake Fish e o Quibeleza, tô selecionando eles,
2:11:16apertando o CTRL, beleza? Clica em um, CTRL, clica no outro. K, agora 560. Opa,
2:11:22o escondidinho ficou errado. K aqui, isso daqui é 720, escondidinho. Você não irá me enrolar,
2:11:27beleza? Então esses dois aqui têm opacidade de 60%, eu posso só apertar o 6 no teclado numérico,
2:11:33que ele já muda a opacidade pra 60. E a mesma coisa se eu selecionar esses dois últimos e
2:11:37apertar 00, isso no teclado numérico, não no padrão, beleza? Aquele que contém o numerinho
2:11:41do lado do teclado, ele já muda também pra opacidade de 0. E agora selecionei aqui o sushi,
2:11:45posso só apertar o Clip Content e ele já tá aqui bonitinho o nosso sushi. Pra gente ir pra lá,
2:11:50como é que a gente faz? Eu quero que quando clicar nessa seta vá pra esse estado. SHIFT + E
2:11:54pra mudar protótipo. Quando eu clicar nessa setinha, eu quero que ele venha pra cá,
2:11:59pra esse próximo estado. On click, Change to Sushi, já tá aqui com o Smart Animate Gentle
2:12:041200. Normalmente o Figma, ele repete a última interação que você criou. Por isso que às vezes,
2:12:08o valor já tá certinho porque foi o último que você criou e ele já entendeu isso. Além disso,
2:12:12uma coisa pra cuidar é que como eu dupliquei um componente que já tinha interação, ele copiou a
2:12:17interação aqui também. E essa interação segunda aqui eu não quero, então eu vou clicar nela,
2:12:21vou apertar Delete. Além disso, se eu tiver aqui no Fake Fish e eu apertar, por exemplo,
2:12:25pra direita, eu quero voltar pro Nãoburguer, correto? Então eu vou clicar aqui na setinha
2:12:29da direita, clicar e arrastar até o Nãoburguer. A mesma coisa se eu tiver, no Sushi de Rúcula
2:12:34e eu apertar pra esquerda, eu quero voltar pro Nãoburguer também. Então eu cliquei e arrastei,
2:12:38ele já tá com o Smart Animate, tudo bonitinho. E agora a gente pode testar nosso protótipo. Cliquei
2:12:42na Home, CTRL + ALT + Enter. Cliquei nas bolinhas, fit width, vamos lá testar agora. Tô aqui no
2:12:48Nãoburguer, clico bonitinho, fui pro Fake Fish. Se eu clicar pra direita, ele voltou pro Nãoburguer,
2:12:52foi pro Sushi de Rúcula e eu consigo, novamente, voltar pro Nãoburguer. E agora tá funcionando
2:12:57belezinha. Pra gente finalizar, bora só juntar. Lembra que a gente tinha criado o nosso cardápio
2:13:01lá? SHIFT+ E pra voltar pro modo de Design. Cliquei aqui no meu cardápio, CTRL + X. Vou
2:13:05apertar aqui CTRL + V. Vou apertar a setinha pra cima já pra eu mover. Como ele tá com Auto Layout,
2:13:11eu consigo mover os elementos só apertando nas setinhas do teclado, beleza? Ok, eu vou juntar o
2:13:15meu cardápio. Com o meu carrossel, eu vou apertar SHIFT + A, CTRL + R e vou chamar de Cardápio. Essa
2:13:21seção. Centralizar. Vou aumentar o espaço entre elas pra, por exemplo, sei lá, 40. Pode ser 40
2:13:26aqui, bonitinho. Vou aumentar o espaço em cima e embaixo. Em cima eu vou colocar 40, beleza?
2:13:31E embaixo eu vou colocar 80. Vou até aumentar aqui o espaço pra 80 também, pra ele ficar um pouquinho
2:13:36mais espaçado. E a gente conseguiu finalizar o nosso carrosselzinho bonitinho. Já tá parte da
2:13:41nossa página. Pra gente fechar essa página agora, só falta o footer. Bora lá e depois é só fazer
2:13:46alguns protótipos pra deixar ela um pouquinho mais animadinha. E esse aqui é o footer que nós iremos
2:13:51fazer. Vou copiar ele aqui do arquivo final, CTRL + C, clicar no nosso arquivo que estamos
2:13:55trabalhando. CTRL + V, colei ele bonitinho. Vou só dar uma organizada nessas coisas. Vou
2:13:59ativar o Clip Content aqui. Aqui também o Clip Content pra tudo ficar bonitinho. Vou deletar
2:14:04esse carinha daqui que era só pra visualização. Tudo isso daqui é referente ao meu componente de
2:14:09carrossel. Eu vou já organizar SHIFT + S. Criei uma sessão, dois cliques, dois cliques, CTRL + R,
2:14:16carrossel, bonitinho. Vou jogar lá dentro dos meus componentes pra tudo ficar alinhadinho,
2:14:22em paz, beleza. Já alinhei esses dois amiguinhos. Título aqui também, SHIFT + S, dois cliques,
2:14:28dois cliques, CTRL + R, title. E eu também já vou mover ele aqui pra dentro dos meus componentes,
2:14:34enfim. Só pra ele ficar mais ou menos organizado. Dei dois cliques aqui, dois cliques aqui. E agora
2:14:38tem a minha sessão de componentes. Só os meus ícones que estão fora por enquanto. Por acaso
2:14:42a gente tem aquele problema de componentes que tem ícones. Pra ficar mais fácil de localizar,
2:14:46depois a gente move ele lá pra dentro. Vou só alinhar aqui bonitinho. Jogar essas coisas aqui
2:14:49um pouco mais pra cima pra gente trabalhar melhor. E bora! Esse é o footer que a gente vai criar. Tem
2:14:54algumas coisas bem interessantes. Primeiro a marquinha. A marquinha a gente já tinha aqui,
2:14:57né? Vamos pra CTRL + C. Opa, já vou jogar aqui CTRL + SHIFT + V. Eu prefiro normalmente usar
2:15:03o CTRL + SHIFT + V, porque eu garanto que ele vai colar onde eu quero, sem surpresas, beleza.
2:15:07Essa daqui tá até menor que a minha. Ele tá com 16, mais ou menos, de altura. Vou apertar K. Vou
2:15:12colocar aqui 16 de altura. Tem aqui o texto todos os direitos reservados. CTRL + C, T, CTRL + V. Vou
2:15:18mudar aqui o estilo pro Upper / Small, beleza. Dar dois cliques. Apagar a bolinha, porque eu
2:15:24não quero essa bolinha aqui. O preenchimento tá com Primary-80. Vou clicar aqui no meu. Clicar
2:15:29nas bolinhas. Primary -80. Já sabe, né? Quando a gente quer alinhar as coisas, o que a gente faz?
2:15:33Auto Layout, SHIFT + A. Pronto, já tá alinhado ao centro. O espaçamento entre um e o outro eu
2:15:39vou deixar 16. CTRL + R, vou chamar isso daqui de Direitos, por exemplo. Além disso, ele tem aqui um
2:15:45grupo com várias marquinhas. Lembra que a gente já tinha criado esse componente aqui? O nome dele até
2:15:50é o Button Icon Container, blá, blá, blá. Vamos usar ele? Ao invés de eu ter que ir lá, pesquisar,
2:15:56procurar, pegar o componente. Uma forma de você achar o componente. Pode vir pelos Assets. E você
2:16:00pode procurar aqui Local Assets. Achar lá no teu protótipo. E ir lá e procurar o componente, por
2:16:06exemplo, Button Icon Container. E você consegue arrastar aqui. Outra forma é apertar SHIFT + I e
2:16:11digitar Icon Container. E ele já apareceu aqui pra mim também. Então, existem três formas de
2:16:16você achar o teu componente. Um pelos Assets. Outra apertando SHIFT + I e digitando. E a outra
2:16:20apertando SHIFT + 1, navegando no teu documento, achando o componente principal e indo lá achar
2:16:24ele, beleza? Selecionei aqui Direitos. Enfim, SHIFT + 2, só pra dar zoom nessa parte. E agora,
2:16:29aqui vão ter três ícones juntinhos. O que é que a gente faz? Vou botar aqui pro File. SHIFT + A,
2:16:34CTRL + R, Social Icon. Porque são ícones de rede social. Vamos duplicar ele aqui. Uma, duas,
2:16:39três. Vou aumentar esse espaçamento de 18 pra, sei lá, 16. Vou tirar o Padding, zero e zero. Agora,
2:16:45isso daqui tudo todo o meu footer, ele também pode ser um componente com SHIFT + A. Então, SHIFT + A,
2:16:51CTRL + R, Footer. CTRL + ALT + K. Agora, isso daqui é um componente. A largura dele a gente já
2:16:56sabe que é 1920. A Margin, a gente já sabe, né, que o Padding é aquele External Margin. Pra ele
2:17:01ficar padronizado com o nosso arquivo. Quando eu quero uma coisa de um lado e outra coisa de outro,
2:17:06o que é que eu faço? Eu deixo o espaçamento automático. Eu posso tanto dar dois cliques
2:17:09aqui. Vou apertar CTRL + Z. Quando eu posso, por exemplo, digitar auto aqui. E ele vai fazer
2:17:13a mesma coisa. Exatamente o mesmo efeito. E por fim esse componente, ele tem um Padding
2:17:18aqui. De 40 pra cima, 40 pra baixo. Clico aqui no hexágono. Digito 40, seleciono. E ele já está
2:17:24com o Padding. E a única coisa que falta é a Margin em cima com Primary-10. Vem o Stroke.
2:17:29Aperto mais. Aperto Top. Aperto nas bolinhas. Primary-10. E agora já está bonitinho o nosso
2:17:35componente de footer. A única coisa que falta é o quê? Trocar as marquinhas e fazê-las funcionarem.
2:17:40A gente pode colocar links no Figma também. Eu já vou ensinar pra vocês como que faz. Antes, vamos
2:17:44pegar nossas marcas. SHIFT + 1. Ícones. SHIFT + 2. CTRL + K. São três ícones. Tabler já tá aqui,
2:17:50então já vou selecionar. Um deles é o Twitter, que é no caso o X. Outro deles é o LinkedIn. E
2:17:56o outro deles é o YouTube. Selecionei os três. CTRL + K. Multiple. Create multiple components.
2:18:03E agora, eu vou só selecionar os três. CTRL + X. Selecionar ícones. CTRL + V. Colei eles aqui
2:18:07bonitinho. Vou só deixá-los meio alinhados, só pra não ficar tão perdido. E por fim, SHIFT + 1. Vou
2:18:12voltar no meu footer. SHIFT + 2. E agora lá. Onde tinha o X, selecionei o X. Selecionei o
2:18:18YouTube. Selecionei o LinkedIn. Viu que fácil que ficou agora? Por fim, a gente vai criar um
2:18:23protótipo usando os links. Vou jogar o texto aqui pro lado, só pra ficar mais fácil da gente apegar
2:18:27esses links. CTRL + C. Vaca alegre. Selecionei o X aqui. Prototype. Mais, On Click. A ação. O que
2:18:34eu quero que ele faça quando clicar? Eu quero que ele abra um link. Então, a ação é Open Link. Abrir
2:18:39link. Daí, você cola o link. Você pode até deixar abrir em uma nova aba. E agora, eu vou fazer a
2:18:43mesma coisa pros outros dois. Copiei o YouTube. CTRL + C. Cliquei na marquinha do YouTube. Apertei
2:18:48no mais. Click. Open Link. YouTube. E por fim, a mesma coisa com o LinkedIn. CTRL + C. Apertei ali
2:18:54na marquinha do LinkedIn. Apertei mais. On Click. Open Link. CTRL + V. LinkedIn. Prontinho. Agora,
2:19:00o nosso footer também já está bonitinho. Posso até apagar o texto daqui porque eu não vou mais
2:19:04utilizar. Apagar o footer da outra página. Posso pegar o nosso footer aqui. CTRL + X. Colar na
2:19:10página Home. CTRL + V. Finalizado a nossa primeira página. CTRL + ALT + Enter. A gente já pode ver.
2:19:15Ela funciona bonitinho. Cliquei nas pagininhas. Fit Width. E aqui, bonitinho. Enfim. Se eu quiser,
2:19:20tem meu carrossel que funciona. Se eu clicar aqui no iconzinho vocês não viram, mas ele já está aqui
2:19:25abrindo o Twitter pra mim e tudo mais. E além disso, agora faltam algumas coisas. Tem alguns
2:19:30detalhes que nós precisamos animar ainda. Por exemplo, isso daqui que ainda não funciona. E
2:19:33nós vamos criar agora a página de Sobre Nós. E a página de Entre em Contato. Pra continuar o nosso
2:19:39projeto, vamos fazer agora a página Sobre Nós. Estou lá no projeto final. CTRL + C no projeto
2:19:44inicial. CTRL + V pra colar aqui. Bonitinho. E o que eu vou fazer é o seguinte. Normalmente, quando
2:19:49eu vou fazer uma nova página. Principalmente nesses casos. Vou apertar SHIFT + E pra voltar
2:19:53pro modo de design. Principalmente nesses casos em que o footer se repete. As coisas se repetem.
2:19:57Eu prefiro começar duplicando a página anterior. Então eu vou apertar CTRL + D. Ele já duplicou a
2:20:01minha página. E agora eu posso trabalhar, por exemplo. Toda essa seção de hero aqui. Eu vou
2:20:06apagar tudo de dentro. Vou ficar aqui só com o hero container. E eu vou chamar aqui de Sobre,
2:20:11por exemplo. Que é o texto. Sobre Text. É o texto Sobre. Vou mudar o número da página.
2:20:16CTRL + R, sobre nós, aqui no header, SHIFT + 2, ao invés de estar o home selecionado, dei dois
2:20:20cliques, dois cliques, cheguei aqui no sobre nós, ele está como selected, e o home passa a estar
2:20:25como default, beleza? E por fim, o que que eu vou colocar aqui dentro? Eu tenho esses textos todos
2:20:30aqui que eu vou colocar, eu posso simplesmente, eu vou apertar a letra T e começo aqui, tá vendo? Ele
2:20:34já colapsou porque ele tá como abraçar o sobre text, e daí ele já tá abraçando o meu texto.
2:20:39Fazer o seguinte, eu vou pegar esse texto aqui todo, CTRL + C, vou apertar T aqui, tanto faz,
2:20:43CTRL + V, vou até diminuir aqui, CTRL + X, vou selecionar aqui o sobre text, vou colar lá dentro,
2:20:49CTRL + V, beleza? Vou apertar CTRL + D porque eu tenho que digitar esse texto, o futuro é alegre.
2:20:53Cliquei aqui, Enter, o futuro é alegre, e por fim, depois, a gente vai ter aquela sessão toda
2:20:59do Alfred ali. O que acontece? Esse elemento todo aqui, diferente do anterior, primeiro que assim,
2:21:03ele tem margens padrão, 200, 160, 480, 480. Então vamos fazer o seguinte, eu nem vou separar,
2:21:09vou deixar as duas aqui, em cima e embaixo, 160, e embaixo, ao invés de ter na margem, tem o external
2:21:14margin big, que é esse daqui que a gente vai utilizar. Então ele já tá com a margem correta.
2:21:17O texto, o futuro é alegre, eu selecionei ele ali, bonitinho, vou clicar nas bolinhas, e ele aqui é
2:21:23um texto large? Não, ele é um texto médium, porque o large é gigante demais pra ele. Eu achei que era
2:21:28large, mas com muita certeza me perdi, bonito. O texto em si, cliquei nas bolinhas, vou lá,
2:21:32bora, esse daqui tem que ser o Body / Large, olha, esse daqui eu acertei, cliquei no texto, bolinhas,
2:21:37base-60, base-60. Futuro é alegre, o meu tá como medium, mas na verdade o tamanho aqui é 120. Então
2:21:43vou só aumentar aqui, tá quebrado o meu, meus estilos, ai que feio, vou digitar aqui na marra,
2:21:48120. Vamos fazer o seguinte, tá bonitinho agora com o tamanho 120, quebrei o estilo mesmo,
2:21:53agora só vai, só na paz de Deus. Vou rodar lá pra baixo, clicar esse gradient linear, selecionei
2:21:58aqui o sobre text, vamos aumentar esse espaço entre os elementos. Vamos colocar, por exemplo,
2:22:03aqui um 80, talvez? Aqui nesse texto tem também essa questão do provar que humanos, provar blá,
2:22:07blá blá, coexistir, ele tá negritado, então vou selecionar só esse pedaço aqui do meu texto,
2:22:11vou selecionar ele, o preenchimento eu vou mudar lá pro linear primary, e eu vou mudar o
2:22:16large aqui pro large semibold. E uma coisa que eu vou fazer é só toc, eu vou apertar SHIFT + Enter,
2:22:21só pra quebrar a linha e esse texto ficar na linha de baixo mais bonitinho, beleza? Por fim agora,
2:22:25falta só essa seçãozinha aqui do nosso Alfred Alfonso, bora fazer, pegar aqui os dois textinhos,
2:22:31CTRL + C, CTRL + V, vou até duplicar, alt, clica, arrasta SHIFT, vou apagar o texto de baixo aqui,
2:22:37vou apagar a bolinha, no próximo eu vou apagar em cima, eu vou deixar só o chef, dois cliques aqui,
2:22:41como esses textos estão alinhados, SHIFT + A, agora eu vou diminuir o espaço entre eles, pra,
2:22:47por exemplo, um 8, um espacinho bem curto, o texto ele não tá grudadinho, vou só dar
2:22:50dois cliques nessa caixa de texto pra ele abraçar o texto, vou selecionar esse título,
2:22:55vou mudar aqui pra um Heading / Small, e o chef em Vaca Alegre eu vou mudar, por exemplo, pra um
2:23:00Body / Medium e também com uma base-60, base-60, e o Alfred Alfonso eu vou deixar com um base-80,
2:23:07até um pouquinho mais escuro, beleza? Agora aqui essa parte do texto tá bonitinho, eu tenho que
2:23:11agora adicionar a minha imagem do Alfred, aqui 120 por 120, como que eu vou fazer isso? Vou criar um
2:23:16frame, F bonitinho aqui frame, 120 por 120, clicar no preenchimento, selecionar a imagem, swap image,
2:23:25load new, vou procurar lá na minha caixinha, onde que está o meu Alfredinho, vou vir em fotos,
2:23:31Alfred, Alfred perfil, abrir, o arredondamento da borda eu vou mudar aqui pra aquele full, pra
2:23:37ele ficar totalmente arredondado, e vou adicionar aqui uma borda stroke, vou deixar até dois pra dar
2:23:43pra ver um pouquinho melhor, vou nas bolinhas e eu vou lá pra baixo, nesse primeiro, linear,
2:23:47primary, blá blá blá, e ele já criou aqui a minha bolinha, eu vou chamar R profile pra renomear,
2:23:52R text, e agora eu vou apertar SHIFT + A, vou dar CTRL + X, e eu já vou colar aqui aqui embaixo,
2:23:58beleza? Nosso Alfred e Alfonso já tá alinhado, CTRL + R, isso daqui eu vou chamar de assinatura,
2:24:03porque é a assinatura do Alfred, o espaçamento entre um elemento e outro, vou até mudar por aqui,
2:24:07vou clicar aqui nessa área, mudar por exemplo pra 40, e agora uma coisa que falta, se você olhar
2:24:12aqui tem uma linha que vai de um lado a outro, e tá junto com esse elemento, como que eu fiz isso?
2:24:16Peguei esse elemento, vou aumentar o espaço em cima, o espaço em cima, vou colocar por exemplo
2:24:2040, e essa linha eu quero que ela vá de um lado a outro, então ao invés de abraçar o elemento,
2:24:24eu quero que ela preencha em um, quero que preencha todo o espaço disponível pra ela aqui,
2:24:29beleza? Eu coloquei aqui o fill, bonitinho, vou apertar o stroke, vou apertar aqui e mudar pro
2:24:34top, e eu vou colocar aqui por exemplo um 10, pra ele ficar só uma linha bem sutil,
2:24:38que quase nem dá pra ver, mas ela tá ali, e você vai me dizer, poxa, mas aqui agora esse texto tá
2:24:43errado, ele tá vazado, por quê? Tá vendo que o meu padding tá aqui, o meu texto tá aqui? Porque esse
2:24:47texto aqui ele está com um tamanho fixo, então seleciona esses dois textos, e muda eles pra fill,
2:24:53porque agora eles vão preencher o espaço, e já ficou certinho, o nosso futuro é alegre, e com
2:24:57isso nós já fizemos a página sobre nós, simples assim. Falta agora só a página de contato e
2:25:03depois os detalhezinhos pra finalizar. Para, para, para, para, não dizerem que eu não ensinei, hein?
2:25:07Em qualquer momento do teu projeto, você pode compartilhar o teu arquivo, pra pedir feedback,
2:25:11pra mostrar pra outras pessoas, pra mandar pro cliente, enfim. Mas assim, se tiver trabalhando
2:25:15com cliente, já considera pagar o Figma também, né gente? Vamos ser bacana. Como que você faz isso?
2:25:19Tem esse botão aqui, share, super azul na sua tela o tempo inteiro, aperta no share, compartilhar, e
2:25:24você pode vir aqui em copy link, no plano gratuito você não pode aqui mudar pra editar, enfim. Mesmo
2:25:30nos planos pagos é meio complicado esse negócio de edição, porque daí o Figma cobra mais, enfim,
2:25:34tem uns dark patterns meio bizarros ali, beleza? Mas aqui você pode escolher quem pode visualizar,
2:25:39se só pessoas convidadas, ou qualquer pessoa. No caso dos planos pagos, você pode também colocar
2:25:44senha, se você quiser. Por padrão, a galera deixa com o Anyone mesmo, e no view aqui, então deixa
2:25:48qualquer pessoa, pode ver, você aperta aqui copiar link, e você já tem um link pro seu projeto, você
2:25:53pode abrir e compartilhar com qualquer pessoa, que ela pode abrir no navegador, pode mandar
2:25:56pro computador, pro currículo, em qualquer outro canto, beleza? Fechou? E agora faremos a última
2:26:00página, que é a fale com o chefe, vou copiar, CTRL + C, vou abrir aqui no meu arquivo original, eu
2:26:05só antes deletar essa página sobre nós anterior, deletei ela daqui, vou jogar esse texto aqui pra
2:26:10cima, e vou apertar CTRL + V a nossa página de referência, como eu disse pra vocês, normalmente
2:26:14eu prefiro começar essas páginas se duplicando uma anterior, então vou duplicar sobre nós, CTRL + D,
2:26:18CTRL + R vou chamar de contato, e o que acontece, essa página aqui, no fundo ela repete um padrão,
2:26:23que a gente já tinha criado aqui, como que a gente vai fazer isso? Vou pegar esse padrão,
2:26:27selecionei, selecionei, até chegar aqui no Alfred Box, beleza? A verdade é que dá pra
2:26:31chegar até o background do Alfred Box, CTRL + C, peguei o background, vou pegar o futuro alegre,
2:26:36e eu vou substituir o elemento, se eu apertar CTRL + K, e digitar Replace content, aliás,
2:26:41paste to replace, tem esse detalhe, CTRL + SHIFT + R, que ele substitui um elemento pelo outro,
2:26:46é isso que eu vou fazer, CTRL + SHIFT + R, e ele substituiu o elemento, agora já tem aqui o fundo,
2:26:51eu vou pegar esse fundo, o meu tá com cadeadinho, eu vou clicar no cadeadinho pra desbloquear ele,
2:26:56vou mudar a largura pra 1920, pra ele ficar bonitinho, a altura ele já tá com 900, que é igual
2:27:02a que tava anteriormente, beleza? Agora o que eu tenho que fazer, eu tenho que jogar os textos em
2:27:06cima daqui, primeiro vamos pegar os textos lá do meu original, aqui tá o meu texto, beleza? Pegar
2:27:10o contato, os textos são fale com o chefe, CTRL + C, T, CTRL + V, fale com o chefe, ALT + Clique,
2:27:16arrastei, envia esse e-mail, CTRL + C, CTRL + A, CTRL + V, beleza? Agora eu posso até deletar
2:27:21esses textos daqui, porque nós já pegamos todos os textos do nosso layout, olha que maravilha!
2:27:26Vou pegar aqui o fale com o chefe, esse daqui é o meu título médium, beleza? Fale com o chefe,
2:27:30e esse outro aqui é o meu Body / Large, beleza? Vou só clicar aqui, vou deletar essas bolinhas,
2:27:35vou deletar essas bolinhas, esses elementos eles estão em linha, se eles estão em linha,
2:27:39Auto Layout, selecionei os dois, SHIFT + A, CTRL + R, text, então agora o nosso texto, ALT + L só
2:27:46para colapsar as minhas camadas, ele já tá aqui um embaixo do outro. Uma coisa que eu quero fazer,
2:27:50selecionei o texto, eu quero que o texto esteja centralizado dentro dessa caixa de texto,
2:27:55e a mesma coisa para o Vaca Alegre, centralizado, e aqui eu vou quebrar a linha, SHIFT + Enter, e
2:27:59vou só pegar esse espaço para ele ficar bonitinho. Uma outra coisa que acontece, esse texto é mais
2:28:04gordinho, então só no e-mail vou mudar para o large, semi-bold, beleza? E agora ele já
2:28:09tá bonitinho, falta só, aqui ele tem uma linha L, cliquei, arrastei e segurei SHIFT, já fiz a minha
2:28:14linha, vou deixá-la com 200 de largura para ficar mais bonitinho, vou colocar aqui um primary-40,
2:28:20vou deixar aqui um peso de, sei lá, uns 4, vou mudar o start e o fim para round, CTRL + X,
2:28:27colei dentro do Auto Layout, vou jogar ela para cima, com as setinhas do meu teclado, beleza?
2:28:32Para cima, para baixo, cliquei no teste, eu quero tudo isso alinhado, então tudo alinhado bonitinho,
2:28:37vou diminuir esse espaçamento aqui que tá 107, vou deixar com 64, beleza? Agora eu vou pegar
2:28:42esse texto, CTRL + X, vou pegar o background, só que se eu colar aqui agora CTRL + V,
2:28:46ele ficou bonitinho, já tá certinho, ALT + V, ALT + H, e ele já centraliza bonitinho para mim,
2:28:53beleza? ALT + V e ALT + H também é um atalho maravilhoso para a gente aprender, é a mesma
2:28:57coisa que clicar aqui e clicar aqui, tudo que tá texto em preto eu quero dar para branco,
2:29:02como tá tudo selecionado, eu venho no selection color, clico nas bolinhas, procuro aqui o base-0,
2:29:07e agora a nossa pagina já está feita, bonitinha, vou deletar o contato do lado, e se a gente
2:29:12apertar CTRL + ALT + Enter para visualizar, vocês vão ver que ela já tá até com aquelas animações
2:29:16do Alfred, exatamente como a gente tinha criado anteriormente, beleza? Agora bora fazer só uns
2:29:21ajustezinhos finais para a gente finalizar nosso projeto. Visualizando o nosso protótipo, tem
2:29:26algumas coisinhas que faltam, por exemplo, eu não consigo clicar em cardápio, em sobre nós, nesse
2:29:31entre em contato, nem nesse entrar em contato aqui também, esse número aqui que também não atualiza,
2:29:36agora a gente vai resolver esses probleminhas todos. Primeira coisa, eu vou voltar lá para o
2:29:40nosso Figma, eu quero criar uma interação do tipo, o usuário clica aqui e alguma coisa acontece,
2:29:45o que é isso? É um protótipo, como que eu faço isso? SHIFT + E, estou aqui no meu elemento
2:29:50principal, no meu header, no meu componente principal, eu dou dois cliques em cardápio,
2:29:54e agora eu vou clicar aqui, setinha, quando eu clicar em cardápio, o que eu quero que aconteça?
2:29:58Eu quero que ele role minha tela até essa parte de cardápio, então, on click, scroll to cardápio.
2:30:04É isso que eu quero que aconteça, beleza? Além disso, quando eu clicar no Sobre nós, o
2:30:08que eu quero que aconteça? SHIFT + E, vou clicar, passei o mouse, apareceu o azulzinho, ele vai vir
2:30:13para a página Sobre nós, um clique vem para Sobre nós, correto? Uma coisa que eu esqueci de fazer é
2:30:18que aqui no Entre contato, no contato não tem nada selecionado, vou para Design, vou dar aqui para
2:30:22Default. Quando estiver na página do contato, não está em nenhuma dessas outras páginas anteriores,
2:30:26beleza? Por fim, se clicar SHIFT + E, no Entrar em contato aqui, o que acontece? Cliquei,
2:30:32arrastei, ele vem até a página de contato, On Click, Navigate to contato. Eu, normalmente,
2:30:37prefiro, ao invés de deixar o Instant, deixar um Dissolve, assim, de, por exemplo, uns 300,
2:30:41uns 200, alguma coisa bem sutil, beleza? Isso vale tanto aqui, quanto vale também para o Sobre nós,
2:30:47que ele muda de página. Vou deixar aqui, um Dissolve, com 300, beleza? Além disso,
2:30:51aqui no Entre contato, eu vou selecionar essa interação, vou apertar CTRL + C, por quê? Quando
2:30:55eu clicar nesse Entre contato aqui de baixo, eu quero que ele vá para exatamente a mesma página,
2:30:59então eu vou apertar CTRL + V e agora eu colei a interação. Então, aquela interação também funciona
2:31:03aqui. Todas essas interações de clique, elas já devem estar funcionando. Além disso, uma coisa que
2:31:07eu vou fazer, eu quero que essa barra aqui, ela fique fixa. Vou selecioná-la aqui, até em todos
2:31:12os locais, selecionei ela nos três locais. Vou em Prototype e a posição, eu vou deixar em Sticky
2:31:17(Stop at top edge). Isso significa que agora, quando eu aperto CTRL + Enter, a minha barrinha,
2:31:22ela vai estar sempre lá em cima, porém, olha só o que vai acontecer. Ela está sempre em cima,
2:31:26só que os elementos estão todos em cima dela. Duas coisas que eu quero fazer. A primeira delas,
2:31:31SHIFT + E, eu quero colocar um preenchimento fill da cor Base-0 aqui, para ela ter um fundo branco
2:31:37e não transparente. E por fim, selecionei a Home, selecionei o Sobre Nós, selecionei
2:31:41o Contato, o que eu quero fazer é clicar nessa setinha e ao invés de ser Last on Top,
2:31:44First on Top. Agora, ele deve estar funcionando, bonitinho. Ela está em cima, não dá para ver por
2:31:49causa do Figma, mas aqui, agora ela está em cima, bonitinho. Se eu clico em Cardápio, vai
2:31:53para Cardápio. E com isso, nós terminamos o nosso protótipo, gente. Olha só que bacana, nós temos um
2:31:58protótipo super bacaninha, com várias interações, com animação, interação de hover, com o nosso
2:32:03super carrossel, que anda de um lado para o outro, tem botõezinhos animados e tudo mais, os links
2:32:08para redes sociais. Tem aqui o Sobre Nós também, muito bonitinho, o nosso contato, tudo animadinho,
2:32:15tudo bonitinho. E a gente conseguiu fazer isso do zero, sem conhecer nadinha de Figma. Eu vou
2:32:20dar uma canjinha extra para vocês, que é o seguinte, eu vou ensinar também como é que a
2:32:23gente anima esse numerozinho aqui, mas eu vou dar um alerta. Infelizmente, essa feature não funciona
2:32:29nos planos gratuitos, mas eu vou mostrar só como um bônus, porque é algo bacana da gente aprender
2:32:33também a fazer, beleza? Então bora lá, só para a gente finalizar e terminar esse vídeo com chave
2:32:37de ouro. E eu movi o arquivo agora, eu estou no meu plano pago do Figma, então qualquer coisa,
2:32:41se você não conseguir acompanhar, está tranquilo, infelizmente é esperado. Espero que um dia vocês
2:32:45tenham Figma paga com tudo que tem direito também. É o seguinte, esse número aqui, por enquanto,
2:32:48ele é um valor, um valor fixo, zero, eu posso mudar aqui, 15, eu posso mudar manualmente. Porém,
2:32:53eu quero que ele seja mudado de acordo com a ação do usuário. Quando o usuário clicar no mais ou no
2:32:58menos, eu quero que mude esse valor. Como que eu faço? Primeira coisa, esse valor, ele não pode ser
2:33:02um valor fixo, ele tem que estar relacionado a uma variável. Similar ao que acontece com componentes,
2:33:06que eles podem ser usados para animar também, variáveis também podem. Como que eu vou fazer?
2:33:10Eu vou clicar aqui nas variáveis, eu já estou aqui em animation e eu vou criar uma nova variável.
2:33:14Inclusive, uma coisa que eu esqueci de contar para vocês, eu vou digitar aqui, comida / quantidade,
2:33:19esse barra, quando a gente cria variáveis, ele funciona quase como se fosse uma pasta. Então, se
2:33:24eu apertar agora, o comida passa a ser uma seção. Então, essa é uma forma de você criar pastas,
2:33:28tipo, eu criei, por exemplo, um cor, enfim, que ela tem essas pastas, digitando primary, barra,
2:33:32opacity, barra, blá, blá, blá, e ele vai criando essas pastas. O valor inicial é zero mesmo,
2:33:37beleza? Como que eu vou atrelar agora? Estou aqui na minha barra, selecionei o zerinho,
2:33:41e onde tem esse hexágono perto de tipografia, eu vou clicar nele e vou apertar a quantidade. Agora,
2:33:46aqui não é mais o valor zero, agora é um valor atrelado a uma variável.
2:33:50E como é que eu mudo esse valor? Vamos pensar o seguinte, eu quero que quando a pessoa clicar
2:33:53no mais ou no menos em qualquer um desses cards, ele atualize aquele valor. Se eu quero que isso
2:33:58funcione em qualquer um desses cards, eu não vou mexer em um com um, eu vou mexer no pai deles,
2:34:02vou apertar SHIFT + 1, vou pegar o card, SHIFT + 2, e eu vou vir aqui, quando o usuário apertar
2:34:07no mais, o que eu quero que aconteça? Selecionei o mais, SHIFT + E, bonitinho, On Click, o que eu
2:34:12quero que aconteça? On Click, vou apertar aqui, até se tiver sem interação, aperto o maisinho,
2:34:17On Click, eu quero fazer isso aqui, set variable, eu quero atualizar uma variável. Qual variável?
2:34:22Essa aqui mesmo, quantidade. Qual o valor? Eu quero colocar quantidade mais 1, ou seja,
2:34:28quando o usuário clicar no mais, eu quero que mude a quantidade para a quantidade + 1. Se for zero,
2:34:32pode ser 1, 2, 3, e assim por diante. No menos, é bem parecido, vou apertar no mais, On Click,
2:34:38antes de eu atualizar a variável, eu quero fazer uma checagem. Se o valor estiver em zero,
2:34:42eu não quero que ele baixe para menos 1, menos 2, menos 3, eu quero que o mínimo seja zero. Então,
2:34:46eu vou checar aqui, qual que é a condição? Se a quantidade for maior que zero, o que eu vou fazer?
2:34:52Eu vou adicionar uma ação, aí sim eu vou setar a variável, quantidade, quantidade - 1. Eu posso até
2:34:58deixar aqui, else set variable, eu posso colocar aqui, qual que é a variable? Quantidade, do zero,
2:35:04eu vou deixar o valor zero, qualquer coisa deixa a quantidade como zero. Agora,
2:35:07se eu for no meu protótipo, SHIFT + 1, Home, CTRL + ALT + E, vou mudar aqui para Fit Width,
2:35:13apertar F, CTRL + \, para a gente visualizar bem bonitinho. E agora, quando eu aperto aqui no mais,
2:35:19ele já aumenta, 2, 5, 6, 7, 8, blá, blá, blá. Quando eu aperto no menos, se ele chegar no zero,
2:35:24ele fica zerado e ele não diminui mais. Viu que bacana? Essas são só algumas das coisas que a
2:35:28gente consegue fazer no Figma. Eu tenho certeza que vocês vão explorar muito mais, tem muita mais
2:35:32coisa que dá para fazer, espero que vocês tenham gostado esse vídeo. Por favor, se você gostou,
2:35:36se inscreve, comenta, apoia de qualquer forma, porque ele é uma trabalheira danada, beleza? E
2:35:41eu espero ver vocês nos meus próximos vídeos, não esquece de se inscrever no canal, hein? Obrigada,
2:35:45gente! E o Alfredinho aqui agradece, porque vocês salvaram esse cara. Valeu! 💛

About this transcript

This page contains the full transcript of Curso Gratuito de Figma em 2 horas (com certificado)! 😍 by She is a Creative | UI UX Design Freelancer, generated from the public captions YouTube serves with the video. The transcript has 35,054 words across 1,979 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.