Como Criar uma Landing Page Profissional no Figma [Tutorial Completo]

fala meus queridos como é que vocês estão tudo bem com vocês e no vídeo de hoje eu vou mostrar PR vocês como fazer essa Landing page maravilhosa que está passando em sua [Música] tela e se você quer aprender a fazer um igual do absoluto zero fica até o final dessa aula que a aula tá Insana então sem mais delongas Partiu pro vídeo [Aplausos] bom então vamos começar aqui estamos com o nosso figma aberto sem nada ainda vamos começar do zero certo então primeira coisa vamos apertar o f vou vir aqui em presentation e vou colocar

aqui 1920 por 1080 certo vamos criar Essa paradinha aqui e agora já vou vir aqui e já vou puxar esse trem aqui lá para baixo ó vamos deixar isso aqui grande maravilha vamos colocar a cor de fundo aqui ó não vai ser um preto certo vou usar aqui quase um preto Maravilha vou aproveitar já vou salvar essa cor aqui certo em estilo Vamos colocar aqui ó Dark color criei o meu primeiro estilo de cor aqui bom maravilha o segundo passo Vamos criar aqui o nosso Grid então vou clicar aqui vou vir aqui em layout Grid

Vamos colocar aqui um Grid então de coluna vamos usar 12 colunas aqui certo e aqui em margem Vamos colocar aqui 240 e o gutter eu vou deixar 20 mesmo para quem não sabe o gutter é esse espaçamento aqui entre uma coluna e outra bom Beleza então já estamos com o nosso projeto aqui pronto para descer o pau bom então Ó vou colar o loguinho da parada aqui certo tem gente que usa o logo aqui ó e o menu aqui né dentro do Grid eu não uso por conta que o site é responsivo então eu posso

colocar ele aqui certo então eu vou deixar aqui ó com 32,40 de Margem tá vendo vendo ó então ó 40 de margem para cima 32 pra esquerda aproveitando já vou puxar uma parada aqui ó com 32 vamos deixar isso aqui certinho ó deixa eu só fazer isso aqui ó 32 vou jogar ele para cá beleza Tá certo vou jogar lá para outro lado agora vou puxar outra para cá isso aqui é só para garantir Beleza então Segue o baile Segue o baile bom vamos fazer aqui o seguinte eu tenho algumas imagens que eu já salvei

para acelerar um pouco o processo aqui então vou fazer isso aqui ó vou colocar aqui como o edesign e vou criar uma outra pasta aqui como assets assets e vou colar tudo aqui ó Pumba certo aconselho que vocês façam isso também se já tiverem as imagens pré-definidas porque vai agilizar aí o seu processo certo então vamos começar aqui criando o nosso menu certo nosso menu vai ter aqui produto já Vamos acertar a fonte eu vou usar a básica mas que funciona sem sempre a nossa queridíssima Inter certo vou colocar aqui um regular e vou colocar

aqui tamanho 16 ô Rodrigo 16 MT pequena Então usa quant você quiser mas eu sei que tem gente que usa isso aqui gigante e fica horroroso vamos ver aqui produto recursos preços contato agora que eu vou fazer vou selecionar todos segurando o shift e vou dar um shift a eu acabei de dar um auto layout certo e agora vou vir nesse espaçamento aqui ó e vou colocar aqui 72 vou centralizar aqui certo e agora já vou dar um clique aqui vou puxar mais um para cá porque eu já vou fazer nosso botão então o botão

vai ser aqui ó ver demonstração vou pegar aqui a nossa cor um vermelho aqui que vai ser o nosso estilo Brand color Pumba vou dar um outro shiar aqui para criar um outro layout pra gente transformar esse em botão maravilha agora vamos trabalhar aqui ó 24 16 E aí vamos dar um stroke aqui e eu também vou prr um vermelho e vou colocar uma bordinha arredondada aqui de oito certo mano estamos com o nosso botão pronto nosso menu pronto P bola daquele jeitão vou duplicar esse cara aqui e vou colocar aqui ó Iniciar iniciar teste

gratuito certo esse texto aqui ele vai ser branco então vou tirar aqui no cadeadinho ó e vou vir aqui vou colocar um branco e aí já vou adicionar aqui também né o nosso white white estilo então agora nossas cores já estão aqui né E aí vou fazer o seguinte vou colocar um fio aqui e vou colocar um vermelho pá agora ó shift seleciona os dois shift a transformar em Auto layout e agora vamos colocar aqui um espaçamento aqui de 20 vou puxar esse cara para cá esse aqui vai pro meio esse aqui vem para cá

né lembra aqui ó tei Pronto agora eu vou pegar esse esse esse e vou alinhar aqui ó e agora sim vamos colocar aqui 32 pronto pronto estamos com a nossa nave bar pronta eu só vou aumentar aqui não 72 tá bom a Nav bar tá OK Tá braba tá pronta certo vamos marcar aqui o nosso 1920 1080 só só pra gente fazer uma marcação aqui ó Opa fazer uma marcação aqui ó vou dar um shift r e vou puxar uma régua aqui ó Pumba só pra gente delimitar um pouco aqui o nosso Hero bom vamos

vir aqui em assets vamos pegar essa mão aqui porque ela que eu vou usar vou jogar ela aqui diminuir ela vai ficar aqui ó e aí já vamos criar aqui também eu vou fazer o seguinte ó eu não queria ter deletado aquele bagulho vou criar outro aqui rapidão Vou colocar aqui ó 920 dividido por 2 por 2 vou alinhar para cá Só para eu puxar uma linha aqui para deixar aqui ó Pumba Aqui é o centro só pra gente ter uma noção aqui tá ligado boa vamos pegar esse texto aqui ó com Alt vou puxar

para baixo só para eu aproveitar aqui mais rápido vamos pôr aqui 48 agora eu vou vir aqui ó vou escrever aqui ó a nova a nova era do atendimento ao cliente chegou certo bom vamos clicar aqui agora o seu deve est aqui ó Aí fica esse negócio chato tá vendo esse espaçamento aqui ó esse espacinho aqui ó chato clica aqui ó Pumba resolveu ah moleque beleza agora vamos colocar aqui maiúsculo caixa alta aqui quer dizer e aqui eu vou colocar aqui um semibold vamos puxar esse cara para cá vamos alinhar aqui pra esquerda e vamos

ajustar aqui o espaço entre linha vou pegar outro aqui aqui eu vou usar acho que 20 18 20 vou olar pra esquerda e aqui descubra uma maneira bom então copy subtítulo Naquele esquema shiar transformar em Auto layout vamos usar aqui ó 32 provavelmente ou 24 de espaçamento aqui certo e Mano aqui eu vou duplicar o botão velho vou copiar esses dois aqui ó vou clicar nesse Auto layout e Pumba toma tá pronto mano e aí esse bagulho vai ficar aqui PR baixo Ah vamos começar a brincar aqui agora então ó pô essa mão aqui ela

tá muito solta né a gente precisa colocar alguma coisa aqui então o que eu vou fazer shift G para mostrar o meu Grid certo vou dar um R um R aqui para pegar isso aqui e vou fazer segurando o Shift para fazer o quadradinho aqui ó em duas colunas ó Pumba Vamos colocar aqui 16 para arredondar e agora vou fazer o seguinte ó vem para cá a mão vem PR cá Alt puxa pro lado e agora vou dar Alt D aqui ó para ele duplicando pronto vamos tirar a linha ali e agora eu vou fazer

a mesma coisa aqui ó 20 20 e é isso e é isso Maurício agora cara vamos fazer o seguinte ó vamos esconder a bagaça ali vou tirar esse cara aqui esse cara aqui beleza e agora vamos jogar a mão aqui Deixa eu pôr aqui só para ver onde que pôr um pouco mais para baixo aqui acho que é mais ou menos aqui né pô aí é que tá tudo cagado né velho tem que pôr dentro da máscara e tal eu já vou fazer isso vamos com calma Vamos colocar dentro da máscara aqui para ficar bonitinho

Vamos fazer uma sombrinha aqui pá deixar no Grau né mano aquele padrão aqui a gente alinha para cá e alinha aqui ó tei pode puxar para cá Só para constar mesmo e agora vamos trocando as cores aqui ó Pumba um cinzinha mais escuro vou travar essa mão aqui por enquanto ó vamos renomear ela aqui ó mão do robô e vou travar ela aqui por enquanto aí vou pegar aqui e vou trocar essa cor aqui vou trocar essa cor aqui também ó vocês estão vendo como isso aqui no fundo já não deixa uma mão né moscando

aí sozinha voando né a gente já tá colocando uma paradinha que já muda o o esquema aqui e eu vou fazer o seguinte vou pegar todos esses retângulos aqui ó que eu acho que são todos esses e mais esse e vou criar uma pasta vou apertar aqui Alt G ó Pumba colocar aqui como cubus Hero certo e aí nesse da ponta aqui ó vou fazer diferente vou tirar o fio e vou colocar um stroke Pumba ó como tá ficando massa vou pegar esse logo aqui vou jogar ele aqui dentro esses cubos aqui cara a minha

ideia é que eles sejam animados então mostrar o logo Pode mostrar qualquer coisa certo um videozinho pá mano pode ficar massa também ó vou centralizar aqui firme e forte E aí vamos mudar esse aqui também e aqui um mais escurinho certo tá quase sumindo mas é isso ó isso aqui pode ficar aqui né mano bom tá começando a tomar uma forma a bagaça aqui né nosso Hero pronto em minutos Mano o bagulho é louco Ah agora vamos arrumar aqui essa mão aqui ó Cadê ela Ó aqui tá os cubos certo e aqui tá a mão

ela tá fora inclusive vou pôr ela aqui ó como que eu vou fazer aqui ó ah tem alguns jeitos de fazer eu vou fazer um jeito aqui então eu vou duplicar essa mão aqui ó mão de robô um mão de robô dois certo deixa eu travar essa aqui e esconder vou fazer o seguinte vou pegar essa mão aqui ó vou jogar ela aqui certo mano ó então tô com os dois selecionados aqui ó a mão do robô e o retângulo eu vou clicar com o botão direito aqui e vou colocar use as mask certo ó

vou jogar ela para cá e beleza mano agora eu habilito essa outra aqui Tchan ó já tá certo agora a única coisa que eu tenho que fazer pegar essa mão aqui ó e com o alt eu puxo para cá ó olha a mágica bom tá beleza Resolveu a parada certo mano agora vamos fazer a sombrinha aqui ó então o que que eu vou fazer ó vou apertar aqui ó pegar a nossa elipse e vou fazer uma parada mais ou menos assim ó certo vou fazer isso aqui ó e vou jogar ela por aqui assim ó

atrás da mão tá E aí aqui vamos colocar um preto vamos vir aqui em efeito vamos pôr um Blur no bagulho aqui ó fazer um uma sombrinha bem de leve Pô mais para cá um pouco e agora vou tirar um pouquinho da opacidade aqui ó olha aí que massa que ficou tá vendo já dá um efeito bem louco mano uma vamos anotar aqui ó sombra bom Agora vamos começar a colocar uns elementin aqui PR dar um Tchan vou usar uma parada dessa aqui vou alinhar ela aqui ó e aqui ó certo alinhei aqui e alinhei

aqui ah vou transformar isso aqui flaten vamos colocar outro aqui e mais um e mais um certo só que na moral P para baixo diminui um pouco você diminui bem você e diminuir bem você mano cara vou dar um outro layout aqui também ah sego aqui vou tirar o fio e vou colocar um stroke cara com a mesma cor e acho que eu vou fazer isso aqui também essa aqui não vai ser essa cor vou colocar um cinza pegar algum cinza daqui ó escuro é só para a esse aqui ficou God mano vamos colocar aqui

48 para ficar mais Espado eles bom o hero tá quase que a gente pode pôr agora vamos vir aqui ó botão direito plugin vou usar esse aqui ó porque vou jogar um elemento aleatório ali ó pegar um bagulho desse aqui ó sei lá qualquer um desses daqui ó esse aqui vai beleza vou esticar ele aqui vou mandar ele lá para baixo e agora vamos colocar um cinza aqui bem escuro e vamos dar um effect L Blur bem forte aqui também cara isso aqui é só para dar um tchanzinho de leve aqui ó deixa ele por

aqui acho que mais ou menos assim ó certo vamos deixar ele aqui daqui a pouco a gente mexe de novo nele aqui acho ficou bom para dar essa profundidade aqui né E aí agora vamos criar uns cards uns cards certo então ó R vamos pegar aqui ó um card com três colunas B vou pôr uma altura aqui ó 490 acho que é uma altura Ok e E aí que que a gente vai fazer cara vamos jogar uma imagem aqui então Ó olha o que eu vou fazer vou dar um Alt D aqui duplicar esse cara

E aí pintar de preto Por enquanto só pra gente marcar aqui e aqui ó diminuir aqui 320 vamos ele aqui aqui onde vai Nossa imag tá ligado E aí vamos fazer um barato agora vamos vir aqui tirar o fio não quero cor V um stroke umzinho aqui p Vamos colocar aqui [Música] 16 Ah já vou tirar aqui ó eu podia pôr para baixo mas eu vou deixar certinho aqui então vou vir aqui ó vem para cá e você vem para cá também boa ó já estamos com um quase um card aqui certo agora vamos colocar

o título aqui ó atendimento Vip atendimento motherfucker Vamos colocar aqui ó um Winter acho que 18 ou 20 também 18 semibold e vamos deixar esse esse cara aqui ó ah vamos cara agora pegar as imagens aqui ó e vamos começar a usarlas ó vamos centralizar aqui ó se liga isso aqui ó aqui eu quero deixar isso no meio aqui ó no meio entre aqui e aqui como é que eu alinho isso Sei lá se tem um jeito mais inteligente do que esse mas eu faço isso é rápido vai ó Puxa aqui Puxa aqui aí eu

seleciono aqui e alinho foi maravilha vamos pegar aqui umas bolinhas aqui ó fazer três pontinhos de sei lá quatro pixels aqui vamos colocar o nosso Brand color e vou duplicar esse cara aqui ó 1 2 3 e aí Auto layout shift a Vamos colocar aqui seis de espaçamento vamos centralizar ele com texto aqui ó e vamos ver uma parada ó vamos usar aqui ó é 32 e aqui também 32 Maravilha ó o czin rolando ó ó o czin rolando parceiro agora vamos duplicar esse cara para cá vamos colocar aqui 16 hierarquia tipográfica vamos aqui um

regular bom textinho aqui pá vamos por Ele para cá 32 aqui também certo fazer o mesmo esquema às vezes eu deixo esses cubin esses quadradinho aqui ó em vermelho já deixo um aqui perdido por aí que eu vou pegando e vou usando Tá ligado não vai ficar fazendo toda a hora porque eu tenho o costume cara de usar esse bagulho aqui mano ó Pumba linou vem para cá eu vou fazer isso ó vou deixar ele de canto aqui ó beleza e aí só para dar um tchanzinho aqui ó vamos pegar esse cinza aqui ó e

vamos transformar ele aqui num no Radial eu vou pôr uma cor no meio aqui que que eu vou fazer só para dar um tanzinho aqui ó não f C Chap vamos pôr a mesma cor aqui em todos e aí nesse do meio aqui eu vou deixar um pouquinho mais claro não não de cima Vou deixar um pouquinho mais escuro vai ó vamos ver vamos ver vamos ver aí ó dá um efeito Zinho pá legal E aí o que que deixa eu travar esse cara aqui vou colocar aqui com já tá blob deixa blob Vamos pegar

esse cara aqui ó e vamos duplicar ele para cá beleza e vou fazer de novo ó toma E aí para não ficar um negócio muito Quadradão né cara deixar assim vamos começar a fazer umas paradas diferente aqui vou pegar um desse aqui vou puxar lá pro canto só que eu vou subir ele ó e esse aqui cara vou puxar ele para cá e vou puxar ele para cá ó essa imagem aqui vou tirar ela deixar Preto aqui tá indo tá indo bom então Ó vocês viram que muita gente né quando faz Card costuma deixar eles

muito alinhadinhos eu gosto de ter uma quebra de padrão assim de vez em quando é legal não seguir tanto as paradas a risca às vezes dá até para quebrar um pouquinho para sair desse desse Grid que também não tem um problema isso aqui é só pra gente ter uma noção não precisa ser nossa perfeito aqui no Grid não precisa apesar de aqui eu tá seguindo ainda eu poderia muito bem tipo sei lá pegar esse cara aqui e fazer isso aqui não tá errado tá é só saber a hora de fazer E aí eu vou pegar

essa imagem aqui ó e vou colocar no lugar dessa aqui ó tá ligado vamosi aqui oo centro pá certo olha aí que da hora cara eu vou fazer um bagulho aqui só para dar uma integrada melhor com o BG aqui ó vamos ver se aquele bagulho que eu coloquei ficou bom Onde eu pus agora deix ele pode ser um pouquinho maior para cá e aqui assim ó saindo um pouco para baixo tá ligado Acho que aqui ficou bem massa vou travar esse cara aqui para não encher o saco e aí vou dar uma integrada aqui

melhor também ó eu vou fazer isso aqui ó jogar uma bola aqui por cima pá vamos colocar ela branca e aí eu vou vir aqui nessa gotinha aqui ó e vou colocar um luminosity certo I Rodrigo mas não aconteceu nada Calma campeão Vamos diminuir aqui sei lá quanto uns 15 20 e aí vamos pôr um efeitinho aqui de Blur ó só para dar esse Pan tá ligado ó por aqui mano e pode ser um pouquinho menos aqui acho que foi Acho que foi Acho que foi bom vamos vamos meter marcha aqui ó pegar essa bola

aqui já e vou fazer isso aqui ó venha vamos tirar aqui vamos colocar um stroke um cinzinha também isso aqui vai ser um vídeo tá ligado então ó tem um vídeo aí vamos pegar agora aqui um plugin iconify e vou pôr um play desse aqui ó vou jogar aqui para dentro e vamos um cinza aqui também mais escuro não mais claro que a linha em volta pouquinha coisa Beleza vou diminuir um pouco aqui e vou centralizar ó boa aí ó tá ficando massa hein tipo assim layout refinado com pouca pouca informação informações necessárias sem muita

firula sem muito neon é isso aqui que é o game tá parada fica bonita fica com uma disposição dos elementos do jeito que tem que ser obviamente que isso aqui é um fake que tô fazendo agora aqui não tô pensando muito Nossa o que que vai ter não precisa ter Não é esse o ponto o ponto aqui é mais a parte visual mesmo mais a pegada é essa bom dá pra gente começar a fazer Umas doideiras aqui ó sei lá mano vou pegar isso aqui ó vou pôr um F vamos tirar isso aqui ó e

vou colocar aqui um flaten vou aumentar bem esse F aqui eu não sei se eu vou usar isso não sei se vai ficar bom isso certo isso aqui é só testes mano mas a minha ideia é escrever alguma coisa futuro tá ligado Tipo assim ó umas paradas espalhada ah calma aí vamos testar de novo aqui uma outra parada futuro o futuro começa agora só para dar um pá Mas vamos fazer o seguinte ó deixa eu travar você vou puxar esses cards mais para baixo um pouquinho cara aqui também eu vou descer esse aqui ó para

não ficar igual ao da esquerda tá ligado a altura não quero nenhum igual ao outro pô mas vai ficar assim Rodrigo tá feio calma agora o tinha agora ó vamos fazer o seguinte mano vamos pegar aqui esse branco aqui e vamos transformar isso aqui também aqui num num Gradiente tá ligado vamos pôr aqui uma cor bem escura quase sumindo ali ó e aqui um um outro cinza ó olha tá ficando bonito hein pá fala a verdade ficou muito apagado ali né aumentar um pouquinho isso aqui ó não não é esse esse aqui pode até escurecer

ó assim ó e aí o que que eu faço aí eu venho aqui ó e tira opacidade de geral tá ligado para ficar bem de boinha mesmo ó senão fica muito tumultuado cara é um bagulho muito Sutil Pronto foi E aí ó ele tá passando para cá mas tipo não dá nem para ver tá ligado vou deixar assim que fica Bacana Então aí ó nosso Hero tá pronto já tipo assim eu não tô me apegando a fazer Nossa vou fazer aqui a o estilo de fonte tá ligado ó Ah esse aqui é a um eu

não vou fazer cara eu fazer isso nas outr outras aulas e tipo mano é muita coisa numa aula só e velho as aulas ficam gigantes e vou vou focar mais agora é layout e o resto Então beleza ó já tá rolando já tá rolando E aí vamos meter um outro testão aqui ó vou copiar esse cara aqui vem aqui ó bem-vindo bem-vindo a era daá em primeiro lugar sei lá que cop bosta é essa mas tá limpo mano não tô aqui para fazer cop também agora né ah vamos dar uma controlada agora nos espaços entre

os elementos ó vou usar um 124 aqui não mais vou usar aqui 220 cara E aí agora eu vou colar um texto aqui ó bom vou tirar Cara isso aqui né E aqui vai ser 16 texto corrido vem para cá vamos habilitar aqui beleza aqui cara eu vou colocar uns 120% ou mais é mais 140 mas eu vou fazer uma outra parada vou pôr mais texto aqui E esse daqui vai ser um pouquinho maior vai ser 20 Ah aqui eu usei 20 né 20 então 20 lá com alto 20 aqui a gente tira deixa alto

e aqui tira aqui bom beleza ó eu posso dar um ao layout ó tá vendo essa linha aqui embaixo isso aqui ó tira eh eu podia dar um alo layout aqui nos três só que eles vão ficar com o mesmo espaçamento né Eu não quero eu quero que esses dois fiquem mais próximos e esse mais longe então primeiro eu dou um auto layout aqui defino aqui o meu espaçamento de 24 e aqui eu vou dar outro e vou dar um espaçamento aqui de 48 Na verdade eu vou tirar ó para tirar pode vir aqui ó

UnG grope que ele já solta ó e vou dar um grope aqui também eu vou fazer uma brincadeirinha aqui vamos ver se vai dar bom quem sabe faz ao vivo não tem nada planejado aqui e vamos fazendo bagulho deixa eu ver aqui ó só para dar um tchã né mano primeiro aqui vamos fazer isso aqui e aqui o vou aumentar isso aqui para 96 vou tirar o fio e vou dar um Opa um stroke Zinho branco aqui bem-vindo a era da ia é não sei se vai ficar bom não mano mas vamos tentar vamos pôr

aqui ó lugar é acho que isso aqui tem que ser assim ó aqui com 16 e aqui a gente pode diminuir mano deixar aqui em cima 24 esse com esse 16 acho que ficou bom vamos testar Ah eu curti velho eu curti talvez dê pra gente colocar cor não sei ó pode ficar bom pode ficar bem bom aqui a gente deixa branco né Aí ó ficou legal né cara não fica um negócio tão blocados tão certinho eu gosto Ah vamos começar a pegar esses elementos aqui ó e espalhar eles pelo site pra gente fazer algumas

brincadeiras com ele então eu acho que não sei se eu vou usar aqui ó ó alinhei aqui e alinhei aqui ó beleza aqui a gente pode fazer algumas variações ó tir um aumentar outro colocar outro para não ficar tudo muito igual né mas eu vou deixar ele aqui eu não sei onde eu vou colocar ele ainda de fato mas por enquanto vamos deixar ele aí bom aqui já vai entrar um outro conteúdo daqui a pouco a gente completa o que falt ali pá vamos avançando tendimento ao cliente com foco em ia para clientes agentes e

líderes só que aqui eu acho que eu vou voltar pro branco e cara aumentar aqui e aqui vamos centralizar esse aqui ah ó se eu usei aqui 220 vou usar aqui também 220 boa boa meu garoto bom aqui semibold beleza aqui eu vou pôr mais 120 centralizar cara já vamos pegar esse cara aqui Vamos aumentar ele aqui ó ó se você aumentar puxar aqui dáuma cagada ó aqui não vai dar mas às vezes ele puxa algum elemento E aí é só você segurar o alt e puxar que aí não acontece tá tô mandando isso aqui

porque sempre que eu puxo aqui a galera faz e acontece depois a galera fica perguntando lá no no bagulho aqui aproveita aproveitando já comenta aí o que que você tá achando desse layout aqui certo dá aquele grau dá o dá o joinha aí compartilha faz a parada toda aí para me ajudar nesse canal aqui cara bora bora bora bom ó tá ficando massa isso aqui né Olha como essa luzinha aqui ó ela dá uma uma integrada ao ao background né eu coloquei um cinzinha mais claro aqui e aqui coloquei esse daqui meio que para fazer

uma transição do do bagulho pro outro então esses detalhezinhos aqui cara fazem uma diferença certo Bom vamos lá agora a gente vai fazer um super Card mano vou pegar o r aqui vou puxar um cara aqui ó Vamos definir aqui a altura 700 e aqui vamos colocar 24 existe uma parada da gente ter consistência até nesses arredondamentos Tá mas como aqui um elemento ele é menor eu coloquei 16 e aqui como o elemento é maior eu vou colocar 24 E aí todo elemento grande eu vou usar 24 todo elemento pequeno eu vou usar 16 Isso

se chama consistência para você aplicar aí na sua interface bom E aí vamos tirar esse fio aqui ó e vamos colocar um stroke esse cinza aqui ó pá Ah aqui C 56 de espaçamento Olha aí de novo a nossa parada rolando Ó tem 56 aqui tem 56 aqui prestem atenção nisso esses detalhes é o que faz um layout amador se transformar em um layout profissional certo bom então vamos lá copiar texto para cá copiar texto para cá vamos vamos acelerar o bagulho vamos vir aqui em assets vamos copiar essa imagem aqui vamos já jogar ela

em algum canto aqui que que eu vou usar essa parada aqui vamos habilitar esse trem aqui ó vou colar o texto aqui diminuir aqui ó 32 pá beleza linha pra esquerda esse cara vai vir aqui ó na primeira parada aqui e vai vi aqui eu vou desagrupar e vou tirar esse esse aqui vou tô copiando e colando aqui os textos tá para não perder tempo mano com essas coisas antes eu ficava moscando com isso aqui e agora não moscari mais ó aqui ó vamos ajustar aqui cadê cadê cadê aqui vem para cá vamos colocar aqui

24 vamos duplicar esse cara aqui vamos colocar aqui 48 copiar colar copiar colar boa atendimento instantâneo pá Agora sim a gente vem aqui copia aqui também e coloca aqui também 48 e agora vou vir aqui ó pegar um botão desse só o vermelhão e vou jogar ele aqui ó e aí aqui com o nosso agente não é agente penitenciário E aí vou fazer um rolê aqui ó vou pegar esse cara aqui vou jogar lá para cima ó aqui dentro com a setinha sobe é moleque e aí esse aqui vai ser assim ó para clientes certo

e aí aqui eu vou tirar esse cara aqui vou dar um shift a transformar em ao layout e vamos colocar um fio aqui pôr uma cor qualquer aqui daqui a pouco eu arrumo isso aí cara não tô fazendo outro le em tudo tudo do jeitinho certinho não tá tô indo meio na loucura aqui pá e vamos que vamos 122 você vai vir para cá fixar com 120 120 120 120 aqui até rola fazer um ao layout hein Bom ó como tá ficando massa Vamos pegar esse cara aqui ó vamos jogar ele para cá e vou

fazer aquele mesmo esquema que eu fiz na outra ali ó seleciono os dois Mete uma máscara no cara e agora eu arrasto aqui ó e arrumo onde eu quero aqui beleza aqui vamos colocar aqui 24 esse cara aqui ó vou pegar aqui uma cor daqui ó e vamos arrumar agora isso aqui né vamos pôr aqui ó 12 8 ru certo mano esse aqui eu vou redondar tudo então vou pegar aqui ao infinito e além aqui vai ser preto e cara nesse aqui eu vou pôr uma bolinha para dar uma elegância Vamos pegar uma bolinha aqui

ó Suzinha por aqui ó Pumba só para dar um tinha tá ligado aí sim cara de repentemente isso aqui também pode ser dessa cor aqui ó vamos ver se vai ficar bom É acho que fica né dá uma quebrada ali no branco uma separação melhor pá Inclusive eu podia até salvar isso aqui como uma cor aqui ó é que eu não tô me ligando muito nisso aqui não second second color Nossa meu inglês é second color bom agora eu seleciono tudo aí tudo que aparecer essa parada aqui a gente vem aqui e muda Beleza acho

que ficou massa velho acho que ficou massa um cdzinho bacana tá ligado ó e aí o lance lá aqui da do Grid de novo eu não vou respeitar o Grid aqui aqui não precisa Então vamos puxar isso aqui mais para cá ó vamos deixar aqui com sei lá 64 e aqui também só que aqui eu vou puxar a imagem para ela ficar mais larga tá ligado Pronto já falei né do Grid cara não precisa seguir muito a risca cara tem que ser um pouquinho usado tá ligado bom vou duplicar esse cara aqui agora 56 de

novo usei 56 aqui V usar 56 aqui acho eu distorcer a imagem né velho vamos pegar de novo aqui ó agora sim vamos pegar essa aqui agora e vamos jogar ela aqui já tá mascarada no esquema pá e aqui vai ser ó para agentes e suporte E aí vamos trocar essa cor aqui ó vamos pegar uma cor aqui da foto ó ó lá aí eu vou usar a mesma aqui tá ligado vou apertar o i ó para contar gotas e eu já venho aqui ó Pumba legal e aí como eu tô usando um tom para

baixo do botão eu vou fazer a mesma coisa aqui então aqui eu vou pegar esse cara aqui e vou subir um tom ali daquele azul que eu peguei daqui ó desse cara aqui vou subir um tom aqui ó fic mais vivo o botão né Vamos tirar o stroke boa boa tá ficando Belo isso aqui hein aqui depois cara na hora de desenvolver no framer Não sei ainda se eu vou fazer isso aqui no framer Não sei ainda se eu vou fazer isso no framer mas se eu fizer dá para fazer um Stick aqui tá ligado

aquele cara que vai passando aqui sobe um em cima do outro aqui pá fica um bagulho legal então uma dica que eu vou dar para vocês quando você tiver aqui no figma desenvolvendo já fica com a cabeça meio que viajando em animações interações para que quando você for lá pro framer ou pra sua ferramenta favorita que eu is Espero que não seja o WordPress você já tem as coisas mais definidas na sua cabeça Então vamos voltar aqui ó como tá vamos ver como tá ficando isso aqui cara tá ficando interessante vamos lá vamos lá vamos

lá vamos subir aqui ó Então vamos dar uma passada geral aqui ó vamos seguir tipo uma página uma Landing page sem muito blá blá blá mas cara bem refinada bem feitinha então ó como tá legal tá diferente do que você costuma ver por aí né mas um bagulho legal aqui também ó dava PR fazer umas animações nesse Card com aquele efeito de de movimento né com a velocidade diferente do nosso scroll dá um efeitinho suave bem bacana também aqui essa parada veio para cá não sei por ele criou vida própria Ó o tamanho da bitela

já vamos que não acabou Bom agora eu vou fazer um bagulho aqui embaixo ó 220 né lembra consistência boa vamos copiar aqui ó mesma coisa não dá para mudar não não ó como eu não tô criando estilos né que eu deveria é eu vou fazer isso aqui ó vou copiar a propriedade e vou colar a propriedade aqui bom aqui eu tô fazendo separado em L separado porque vou fazer semibold itlico vou fazer uma brincadeira aqui ó puxar um para cada lado aqui só para não ficar igual também é interessante a gente tipo Ó aqui tá

certinho aqui eu vou dar uma quebrada né para não ficar um negócio muito Quadradão muito chato tá ligado ó só para dar um tan de leve detalhezinhos que fazem diferença como eu já falei mano isso daqui ó vou vou vou até mudar a tela aqui cara na moral isso aqui que eu tô passando aqui é coisa de velho nem curso pago aí dos menininhos que tem por aí tem então ó se você não sentar o like aí velho Aí vai ficar estranho hein Tô brincando dá o like aí Ajuda nós aí certo conteúdo de Ouro

bom vamos vamos vamos marcha então ó vamos criar um buang aqui ó r uma parada de três colunas certo aqui vamos usar 16 eu não gosto de vir por aqui que não é tão Preciso ó agora acertei então ó três vamos dar um outro aqui outro aqui E esse aqui ó vem vem vem com o pai vamos adicionar mais uma cor aqui ao nosso projeto para dar aquele Tchan tá ligado Então agora apresento a vocês o nosso Verde velho ó vai ficar legal cara E aí deixa eu pegar essa cor aqui aqui ó e vou

pôr aqui ó vou tirar a cor do fio e vou pôr no stroke certo tem uns logins vou jogar aqui ó uns logins que eu copiei vou jogar aqui centralizar cara dá para centralizar assim ó na raça ó ó centralizou centralizou para quem quiser usar esses logins aqui normalmente a gente usa muito em projeto tem um plugin aqui também ó mais um ouro cara eu só entrego o ouro ó clicou com o botão direito plugins vem em Mena de plugins e adiciona esse plugin é esse Vector logo aqui olha que massa ó você digita aqui

o que que você quer Eu quero o logo da Nike ele já te traz aqui em vetorzinho bonitinho é só você pegar o bagulho aqui ó e ser feliz cara loginho da Nike pá muda a cor aqui bonitinho aí ó certo então vamos meter marcha um outro plugin vai hoje eu tô mano um outro plugin massa PR para não ficar buscando imagem P Eu uso esse aqui ó o Faces Faces ó free a Avatar clicou seleciona onde você você quer aplicar Olha que legal ali já traz uns umas imagens de faces aleatórias mas muito da

hora velho então vamos pôr essa fulana aqui ó Pumba Legal vamos deixar isso aqui que eu vou usar mais bom eu vou criar tipo um bentô agora e aí vamos fazer isso rapidinho ó vamos pegar esse cara para cá vamos pôr 20 aqui vamos dar um um para cá um para cá Puxa esse para cá Puxa você para cá pronto estamos com nosso bentô pronto vou trocar você vou trocar você ó aqui vocês vão ver nesse esse plugin tem umas parad muito já já mais pro desenho né Então aí tipo tem que tomar cuidado para

não misturar vamos pegar aqui um esse japinha aqui cara de simpático esse japinha brother aqui ó não vai ter imagem vai ter cor então eu vou pôr um Brand color aqui ó eu vou copiar esse cara aqui também ó propriedades e vou colar aqui ó olha como a gente montou isso aqui rápido brother eu falo para meus alunos a gente tem que criar um Flow cara um fluxo nosso de trabalho para que a gente consiga ter agilidade nas nossas entregas então ó vamos copiar e colar esse brother aqui centralizar aqui aqui também ó vou tirar

essa moça aqui vou jogar mais um loginho aqui ó vamos P aqui e agora que que eu vou fazer vou tirar a cor dessas imagens aqui ó deixa eu deixar certinho isso aqui porque ele colou por cima né ó vamos vir aqui ó clicar na imagem aqui vou vir aqui em saturação e vou zerar essa parada fazer isso em todos saturação tchau bom é isso aqui pode ser também pensando já na na navegação na usabilidade aqui pode ter alguns cards trocando algum desses poderia ser um videozinho Eu gosto muito de quando eu faço bentô jogar

um ou outro com um videozinho e nosso último loguinho vem para cá agora agora agora agora vamos pegar esse texto aqui de cima jogar um para cá pôr ele para cima pôr ele preto e um outro aqui vem para cá fazer um card bem diferentinho assim bem bem cenzão cara eu curto muito os bagulhos Clean quem me acompanha sabe vamos pegar uma linha aqui ó vamos jogar aqui pô Tô fazendo os bagulhos tudo sem auto layout né mano mas é isso velho vocês tem que entender uma parada deixa eu falar com vocês o povo aqui

no YouTube quer pagar muito de certinho né pá eu sou certinho sou o menininho do bem Vai tomar no cu é o papo é o seguinte velho a gente tem que criar o nosso Flow e se vou P outro layout aqui se eu não vou não interessa velho Vocês não precisam se prender a isso tá ligado é isso que eu queria falar não se prendam ao que todo mundo fala velho faz o que é melhor para você tem muita gente falando de muita coisa complexa aqui do figma que cara você nem vai usar no dia

a dia você vai usar se você tivesse trabalhando na Microsoft com time gigante tá ligado aqui não é o caso velho então é gaste o seu tempo com o que realmente você vai usar B vamos voltar vamos voltar vamos voltar certo temos uma linha aqui ó vamos pegar esse cara aqui vamos jogar para baixo Vamos colocar aqui o nome Ó Rodrigo motherfucker Rodrigo motherfucker é o nome e o Rodrigo motherfucker ele é Vamos diminuir aqui ó CEO latino americano da Tesla Nossa Que é esse ó aqui eu vou dar um um ao layout vamos deixar

aqui com 12 aqui vou dar um outro layout em tudo isso aqui ó aqui ó deixa eu explicar o que eu tô fazendo aqui vamos voltar vamos voltar que eu me empolguei Pô vou pegar esse cara aqui ó e vou vir aqui vou dar dois cliques aqui ó que ele vai fazer um Space bituin ó pum jogou um para cima um para baixo um no meio só que eu quero deixar esse e isso aqui junto então vou selecionar os dois vou dar um outro a layout aqui e vou tirar isso aqui ó deixar aqui com

16 é assim que eu quero meu Card é assim que eu quero o meu Card E aí S vou fazer mais uma aqui vou pegar isso aqui ó vamos pegar um ícone vai ó plugins ícone Ah mano eu vou manter o padrão vai vamos manter o padrão se eu USI esses paradinho aqui eu vou usar lá embaixo também vamos descer aqui ó pega esse cara aqui e joga ele aqui PR dento para dento mano vamos pôr Preto aqui eu vou tirar ele aqui agora do meu no position vou ignorar o outro layout isso aqui é

um uma manhazinha ó beleza tá pronto o Card velho aí o que que eu vou fazer em vez de fazer isso aqui tudo de novo né mano não sou trouxa vou pegar esse daqui ó e vou jogar para cá né maluco ó agora vou meter um verdão aqui ó esse Verde aqui cara eu preciso colocar ele aqui mano vamos adicionar aqui o Green pelo menos as cores né cara que eu tô muito vagabundo E aí ó se eu já usei Verde no meu layout era só eu clicar aqui em cima ó e ele vai mostrar

aqui aí eu trocava ó tá vendo ó mas não tem a isso aqui é fácil porque troca tudo de uma vez tá ligado pô às vezes fica um espação aqui a galera se incomoda com isso não pode se incomodar com espaço certo mano não pode se incomodar com espaço não é porque ficou um espaço que eu vou encher de merda aqui coisa que não faz sentido Pô então deixa assim aqui deixa assim tá boa a navegação ó o cara veio para cá oleu aqui desceu aqui veio leu aqui caiu aqui leu aqui pumba caiu aqui

certo vamos sempre imaginar não é imaginar aleatoriamente mas com sabendo o que a gente tá fazendo qual é o olhar do nosso usuário aqui certo é mano isso é importante bom então vamos lá para finalizar porque isso aqui já tá grande para um eu vou fazer só mais um bagulhinho aqui ó rapidinho vamos copiar você para cá vamos ser rápidos copiei Colei sair correndo Vamos dar um aqui PR ver isso aqui ó linhar pra esquerda certo você vem pra cá ó vamos colocar aqui 48 e aqui vamos colocar un seis mano bom beleza é isso

que eu quero aqui vou colocar um escurão E aí vou dar um Ctrl D para duplicar esse cara aqui ó certo e aqui vamos o nosso Verde vamos pegar esse texto aqui ó vem para cá vem para cá Sobe aqui vai ser aí não ajusta aqui beleza você vem para cá aqui eu vou dar um outro layout certo vamos alinhar isso aqui pra esquerda e aqui vamos colocar 12 com 20 aqui ó toma toma toma frash Desk ajustar aqui [Risadas] ó vamos zorro zorro Desk ZK aí paper Beleza então vamos lá você vem para cá

você vem para cá você vem para cá e você vem para cá você cinzinha Opa cinzinha cinzinha e aí aqui a gente tem que trocar a cor aqui óbvio né Vamos para um branco aqui e aí aqui vou pôr um verdinho 76% sei lá do que mano Ah vou duplicar para cá mudar para Branco 46 Ah tô pondo qualquer número aqui né mano aleatoriamente tá ligado só para garantir todos alinhados Vamos colocar aqui com 32 boa garotinho falta um texto aqui embaixo Ah vou colar aqui beleza vou pôr para cá beleza Você vai vir até

aqui também beleza pô Mano quanto que eu tô usando nesse espaçamento em específico entre textos aqui ó vamos arrumar vamos arrumar vamos arrumar fio fio pronto e aqui você vem para hug é maluco Agora sim ó vamos só para centralizar aqui tá ligado E aqui vamos ver se tá com espaço Vamos colocar aqui né 200 e 20 certo agora eu posso pegar de novo esse cara aqui ó colocar ele aqui só que eu vou tirar esse grandão aqui e vou diminuir eles tá vendo como é legal a gente usar elementos nessa pegada aqui que dá

pra gente fazer essas brincadeiras durante o nosso layout tá ligado eu gosto bastante de fazer isso no meio aqui tá bom bom beleza cara tá ficando massa isso aqui hein galera vamos ver vamos ver vamos ver ó ó ó que bagulho bonito que bagulho bonito pode P que o pai é brabo mano ó vamos pegar esse cara aqui vou fazer um bagulho ó vou tirar isso aqui e vou subir isso aqui só para ficar um diferentinho tá ligado detalhe do detalhe do cocô do cavalo do bandido bom vamos finalizar esse cara aqui vamos fazer só

o rodapé agora mano porque já já tá bom né cara que entrega maluco bom eu vou copiar aqui do meu uma sessão não vou fazer do zero só pra gente finalizar Ó você vem para cá agora assim é aula aulas dinâmicas mano aqui ó 220 também né pô mas aí aqui eu não gostei desse Verde mano vou pôr assim olha agora ficou bravo hein que pariu branco branco branco aí aqui o botão Branco Maravilha Pronto agora vamos fazer a finaleira aqui ó para acabar esse rolê vamos pegar essa foto aqui ó tá indo fora mano

tem que selecionar aqui ó e colar pronto de novo 220 consistência meu querido 220 Maravilha pô agora eu vou fazer o seguinte mano vamos eu posso fazer duas coisas ou eu posso escurecer aqui ou eu posso vir aqui na exposição e diminuir aqui ó bastante e tirar um pouquinho daqui ó por que eu tô fazendo isso porque eu vou colocar um texto por cima inclusive vou copiar e colar aqui ó para agilizar centralizar uou ou ou tá ficando monstro mano só que o botão eu tenho que copiar daqui ó certo e aí aqui a gente

seleciona aqui cola e deleta este boa ó como deu um destaque legal no meu texto aqui né mano e aí para não ficar esse cara bagulho feio aqui ó que que eu vou fazer vou dar um R aqui vou pegar esse cara aqui e vou pôr aqui ó ah e aí aqui a gente põe um degrade Zinho vira ele aqui ó é aqui ó vamos zerar ó lá tirei aquela marcação Zinha tá ligado ó ele vem mais suave E aí ó tá vendo a diferença disso aqui ó a gente pega isso aqui puxa para cá

ó e aí embaixo vou fazer a mesma coisa vou pegar esse cara aqui duplicar vou inverter ele só que esse aqui vou deixar mais fininho e agora para finalizar vamos copiar o logo aqui copiar o logo e o menu Já vou descer vou jogar aqui só que agora vamos arrumar aqui ó logo para cá copiar você jogar para cá jogar Um textinho para cá esse texto aqui sempre pequenininho galera tem maneira de parecer as coisas aqui grande velho não sei por cara e você vai ficar no meio aqui é o seguinte ó vou deletar dois

e aqui vai ser ó termos de uso política de privacidade Ó quem quiser que eu faça esse rolê aqui no framer mano pô eu preciso ter bastante curtida se eu tiver bastante curtida não vou falar números porque eu não sei mas um número considerável aí a próxima o próximo vídeo desse canal vai ser Essa paradinha aqui sendo desenvolvida no framer Bom vamos vir aqui ó finalizando finalizando Vamos jogar uma linha aqui vamos ver se tá aqui com 440 vamos centralizar vamos pegar aquele cinza lá daqui e vamos jogar aqui e agora finaleira pega você vou

jogar aqui LinkedIn YouTube na mídia blog contato aí eu puxo esse cara para cá ó e aí seleciono todos shift a shift a auto layout Pumba já arrumou certo aqui já tá em Auto layout aqui tá Centralizado eu vou fazer um auto layout desses caras aqui aqui e aí o que que eu vou fazer cara não vou deixar tudo branco porque lembra da hierarquia visual sempre falo disso Pô o que que eu quero que chama atenção que tá tudo chamando atenção ah eu quero esse menu Aqui de baixo então aqui ó Pô vou pô um

cinzinha ficar mais de boa isso aqui não é tão importante tá ligado beleza aí agora aqui sim a layout em tudo aqui ó e agora vamos definir aqui sei lá 56 matamos cara acabamos o bagulho certo vamos ver como que ficou Quem gostou dá o likezão vamos ver aqui de cima como ficou o bagulho nosso rzinho bem bem suave bem da hora mano bem objetivo né cara sem muito blá blá blá sombra zinha aqui pá legal Aqui tá de boa aqui então storicamente um vídeo eu faria isso aqui se eu for fazend no framer animadinho

pá passando bem suave também aqui deu uma quebra de padrão um espaço aqui cara de boa não tem problema e aqui a gente já vim pros super cards aqui pô aqui eu só acho que ficou muito longe deixa mais pertinho assim e aqui também tá longe daqui hein cara pô Rodrigo você tá vacilando hein rapaz ó 56 mano tá vendo ó isso aqui tem que ficar para cá mano 56 aí agora pega tudo e aqui 220 Rodrigo Tá moscando pai boa boa boa boa boa vamos lá vamos lá agora sim ó [Música] que ficou brab

hein mano ó Pumba acabamos o layout e é isso se você gostou eu sei que você gostou deixa o likezão se você ficou até o final é óbvio que você gostou então dá aquele likezão compartilha e é nós estamos junto se tiver bastante curtido isso aqui eu prometo que eu transforme isso aqui num layout foderoso com animações e interações certo então é isso a gente se vê por aí