Como criar um card dinamico no Framer em Minutos!

fala meus queridos como é que vocês estão eu espero que esteja tudo bem e no vídeo de hoje eu vou mostrar para vocês como criar um card dinâmico no framer e eu te garanto ele vai facilitar muito a sua vida então sem mais delongas Partiu pro vídeo bom então estamos aqui no nosso framer Já coloquei aqui a medida de 1440 vamos falar que a gente quer fazer um card que a gente vai usar ele aí em um site eu vou aproveitar a última aula que eu fiz do site de Mercedes e vou criar um card

aqui parecido com o que eu fiz lá mas aqui vai ser dinâmico e se você ficar até o final eu vou mostrar duas formas de fazer isso então bora lá primeira coisa que eu vou fazer vamos vir aqui ó vamos pegar aqui um um Grid e vamos jogar aqui ó beleza aqui vamos deixar como layout ó vamos deixar aqui Centralizado certo e aí vou pegar esses quatro frames que foi criado aqui ó vou vir aqui em fio e vou tirar esse mixed aqui ó então agora a gente tem aqui os quatro frames aqui certo vou

colocar todos em layout e vamos falar que eu quero pôr um card em cada um desses daqui então eu vou criar um card aqui do lado de fora ó vou apertar o f aqui e vou puxar aqui um um retângulo certo e aí dentro desse cara aqui vamos renomear ele primeiro aqui ó para Card E aí dentro desse cara aqui a gente vai colocar o nosso conteúdo tá vou transformar ele em layout aqui já vou deixar um GAP de 16 que provavelmente é o que eu vá usar Opa beleza e agora vamos apertar aqui o

contrl t que é um atalho muito bom que eu uso muito aqui e aí vamos colocar aqui image Então vamos pôr um upload image aqui eu vou pegar um carro aqui ó peguei um carro vamos usar ele aqui vamos falar que eu vou fazer um card aqui de alguns carros certo e agora eu vou colocar um texto aqui ó então ó Mercedes Benz aquecer Sei lá o nome desse carro aqui mas vamos pôr qualquer nome aqui e aí aqui ó no card Vamos colocar aqui a direção vertical beleza com a setinha do teclado vou pôr

para baixo para ele descer aqui já vou dar um Ctrl D aqui para criar mais um E aí nesse cara aqui vamos deixar um um semibold aqui acho que o 24 tá um tamanho bom já deixar um pouquinho maior vai colocar um 32 aqui beleza e aí aqui a gente coloca aqui ó valor a partir de 890.000 898 mil beleza aqui eu vou deixar um regular eu vou colocar um um 18 e agora vou duplicar esse cara de novo aqui pra gente criar um botão Então vou colocar um botão de saiba mais aqui por exemplo

tá agora eu vou colocar esse cara aqui dentro de um steack Então vou adicionar um steack aqui ó vamos adicionar um stack e agora vou selecionar o stack aqui ó vou renomear ele para botão certo e vamos colocar uma cor Nesse cara aí e também vou colocar aqui vou zerar o GAP vou colocar um pading aqui de oito e aí eu vou vir aqui e vou colocar nas laterais de 16 16 pra esquerda 16 pra direita um botãozinho bem suça certo então agora o que que eu vou fazer fazer agora que é o pulo do

gato a gente tem duas formas de fazer isso aqui tá Então a primeira delas eu vou mostrar para vocês de qualquer forma a gente vai transformar isso aqui num componente eu vou chamar isso aqui de card esse componente vai chamar Card eu vou criar a gente vai entrar dentro do card certo agora o que que eu posso fazer bom Primeira coisa eu vou ajustar isso aqui ó eu vou colocar aqui um pading de 32 certo e também vou colocar aqui como Fit content e aqui também como Fit content então ele tá respeitando aqui o meu

pading que eu coloquei Tá beleza estamos com o cardz inho criado agora o que que eu posso fazer vou dar a primeira opção e depois eu dou a segunda tá qual que é melhor Rodrigo não sei depende do projeto mas eu uso aqui mais a segunda opção que eu vou mostrar daqui a pouco tá mas a primeira foi o que eu fiz lá no site da Mercedes mesmo que a gente pegar esse cara aqui colocar um nome aqui ó sei lá ó vou colocar aqui aquecer o nome do carro e aí aqui a gente vai

criando algumas variantes de cada carro para cada carro eu crio uma variante Tá então vamos falar aqui ó vamos criar aqui quatro variantes E aí aqui a gente vem aqui troca a imagem do carro ó Então vou pegar um outro carro aqui ó e aí a gente vai trocando aqui ó EA E aí eu posso pôr aqui também ó e eqa beleza a gente troca mais uma eqb p esse nome aqui também aqui e agora o último aqui eq E aí aqui a gente consegue trocar o valor consegue trocar todas as informações né E aí

a gente para cada Card desse a gente coloca aqui um nome então esse aqui é o ekb e esse aqui é o eqe certo e aí a gente volta aqui na home e agora vamos colocar o Card dentro aqui do nosso dos nossos frames ó Então vou dar um contrl D agora e vou jogar um para cada um ó Então esse entra aqui esse entra aqui E esse entra aqui Certo Maravilha temos aqui nosso nosso Grid com nossos cards deixa eu aumentar aqui vamos colocar um fio aqui e aqui a gente coloca um fio também

beleza olha que maravilha estamos com uma paradinha aqui Teoricamente Funcionando aqui eu não vou eu vou colocar um Fit aqui ó ele vai dar uma zoada Isso aqui é bom para vocês já se ligarem porque sempre acontece isso e cara muita gente perguntando como que resolve isso é só vir aqui em Advanced ó dentro do nosso Grid aqui ó nas configurações do Grid a gente vem aqui coloca aqui tira esse fixo daqui coloca aqui Fit content tá tá E aí a gente precisa fazer isso também aqui nos nossos stacks aqui ó então aqui a gente

coloca um Fit content certo resolveu arrumou Beleza então o que que que que tem que fazer agora agora é só selecionar os carros aqui ó os cards vi aqui ó na variante aqui ó e trocar olha aqui ó que beleza ó akc ekb eqe pronto essa é a primeira forma Olha que fácil Olha que simples né É só a gente clicar aqui vir aqui e selecionar a variante do carro que a gente quer fácil muito fácil e agora agora eu vou mostrar para vocês a segunda opção que é a que eu mais uso mas como

eu falei vai variar de projeto para projeto Então vamos lá vou entrar dentro do card aqui ó e vou deletar todas essas variantes que eu criei aqui ó não quero mais tchau então Teoricamente a gente tem um card olha voltou né são todos iguais e aí aqui eu vou renomear para Card E aí o que que a gente vai fazer agora eu vou colocar todos os elementos dentro do card dinâmicos também então o carro ó em vez de deixar essa imagem aqui eu vou vir aqui em fio vou criar uma variable aqui ó e vou

colocar aqui image aqui a gente pode colocar aqui ó foto do carro vamos colocar aqui carro vai carro é uma imagem um carro aqui a gente vai fazer a mesma coisa content vamos criar uma variable e vamos colocar PL Text e aqui a gente coloca nome do carro e aqui a gente coloca mesma coisa ó valor e aqui a gente vai vir aqui em link ó eu vou colocar link To vou que é uma variable também pro link então aqui ó link se eu quero que ele abra numa nova Tab Não e aqui beleza certo

agora vamos voltar pra home ué mas tá tudo igual agora é o seguinte agora é só a gente entrar em cada um desses daqui ó quando você clicar no card ele já vai mostrar todas as configurações aqui olha que coisa mais linda de Deus então se você olhar aqui ó por aqui eu consigo já trocar a foto do carro tem o nome do carro tem o valor do carro e tem o link do carro então olha como é fácil olha que maravilha então vamos vir aqui ó vamos trocar essa imagem vamos pegar aqui um classe

G esse aí já é o que tá né o burro Então vamos pegar aqui ó um eqc então aqui beleza aqui a gente coloca aqui eqc aquecer E aí aqui eu consigo também trocar o valor ó Então sei lá esse aqui é 680 e pouco e aí aqui a gente tem o link também então se eu tiver uma página interna eu consigo colocar Se eu quiser mandar para outro lugar eu consigo mandar então cada Card já tem o seu link separado aqui tá a gente pode fazer um cms também mas não vou fazer isso agora

agora só tô mostrando como fazer um card de uma forma rápida e dinâmica então Ó olha que simples agora é só a gente vir aqui trocar essas imagens aqui beleza aqui eu coloco o nome Ó e c aqui eu já altero também o valor e aqui eu também altero o link se quiser tá então Aqui vamos trocar esse cara aqui também vamos pôr um eqb eqb e esse cara aqui custa 289.000 pronto simples fácil e aí obviamente agora você pode brincar né colocar mais coisas aqui colocar borda fazer o que você quiser eu tô mostrando

aqui como fazer um CAD a gente pode inclusive vir aqui ó vou entrar nesse Card aqui eu posso vir aqui e também fazer o seguinte eu quero que a cada Card temha uma uma cor Então vou vir aqui no fio e vou também fazer criar um variable aqui de cor ó background pode ser background o nome Beleza então agora eu posso vir aqui nos meus cards Ah esse aqui eu quero que ele seja cinza esse aqui eu quero um amarelinho esse aqui eu quero um verdinho Então olha como a gente tem várias opções pra gente

trabalhar isso é muito legal mano certo isso cara vai te ajudar muito no seu dia a dia você pode usar isso para várias situações inclusive para fazer cards é passando Vamos fazer um aqui vai rapidinho jogo rápido ó vou criar mais um frame aqui vamos fechar esse Grid aqui vamos jogar esse cara aqui vou pegar esse cara aqui ó vou dar um fio e um viewport deixa eu zerar aqui o o GAP aqui beleza agora então vamos falar que eu quero fazer esses caras aqui passando e aí vamos pegar esses cards aqui já que estão

prontinhos aqui ó com out eu tô arrastando aqui pro lado jogo rápido galera Ó joguei eles aqui e agora eu vou pegar esse ticker aqui ó e vamos ligar em todos tá agora vou vir aqui vou dar uma configurada rapidinho aqui vou zerar aqui vou zerar aqui vou vir aqui vou tirar isso aqui porque é o fezinho aqui do lado eu não quero e eu vou diminuir a velocidade vou colocar un 70 vamos publicar vamos ver como ficou Então olha aí fizemos aqui um uma parada passando os cards então dá para fazer muita coisa com

Card dá para fazer várias variações vários formatos usar com produto usar com uma série de coisas eu posso dar um um gzin então aqui está E aí a gente pode também brincar com esses cards aqui né então eu vou entrar aqui eu posso colocar aqui um mouseover também ó e aí a gente pode dar um zoom no carro a gente pode um vídeo vamos pôr um vídeo Então vou dar um cont controlc aqui vamos colocar um videozinho só para ver o que que vai acontecer então eu vou colocar ele como Absolute eu não vou nem

tirar o que tá ali só pra gente testar mesmo mas eu não quero que ele fique aqui eu quero que ele fica inteiro Absolute 00 Beleza então vamos ver o que aconteceu ó lá que legal ó tá vendo Então é isso eu fiz uma aula bem rápida para mostrar para você vocês como criar esses cards e de uma forma dinâmica pra gente conseguir trabalhar esses conteúdos que vai ajudar para aí no seu dia a dia certo então a aula de hoje é isso espero que vocês tenham gostado se você gostou ajuda o canal Deixa aquele

like comenta compartilha faz a toda aí para me ajudar a divulgar mais ainda esse conteúdo certo então é isso estamos junto até a próxima [Música] aula m