Agora a IA cria o layout EDITÁVEL e coloca no seu FIGMA

em 2023 eu gravei um vídeo sobre essa inteligência artificial que te ajuda a criar um site do zero e te dá um wireframe de média fidelidade completa uma coisa que demorava muito PR os designers fazerem agora é quase que instantâneo mas em 2023 essa ferramenta não permitia que você colocasse esse wireframe Export asse esse wireframe direto pro figma sendo assim um pouquinho difícil de trabalhar e você tinha que pagar para poder fazer isso em 2024 o L permite que você exporte seu a frame direto pro figma o que deixa as coisas muito mais fáceis de

fazer E é disso que eu vou falar com você nesse vídeo de hoje então se você tá pronto para deixar o seu trabalho 10 vezes mais rápido é melhor você pegar uma pipoquinha sentar na frente do seu computadorzinho e ouvir o que eu tenho para te falar que hoje o bagulho vai ficar louco Bora pro vídeo Sem enrolação nenhuma deixa um like se inscreve no canal eu não pedi isso no último vídeo e droga já sabe né se você não gostar no final das contas você tira o like mas se você é designer você vai

gostar dessa parada Então vamos L primeira coisa que vocêa saber tem que entrar em você vai entrar e você quando você fazer o caminho e da você lá tal tem toda historinha mas eu vou eu vou vir direto em launch daí ele vai me mostrar aqui tudo que eu tenho e tal não tenho nada na real eu vou aqui ó no meu meu site que eu só posso fazer um porque eu não pago Enfim então vamos lá que que eu tenho aqui um um Canvas em branco onde eu ven em primary S map então meu

site map primário se eu quiser pagar eu consigo fazer outro site Maps mas eu não vou pagar então aqui eu posso fazer um prompt para eu pedir como deve ser o meu site oh eu não sei fazer um Prom para isso não fique com medo não se desespere Olha só se você vier aqui em get start tem tutoriais e nesses tutoriais no três você vai vir aqui e ele te dar exemplos de promp que você pode utilizar esses exemplos estão em inglês você pode pegar esses exemplos aqui e colocar por exemplo no chat GPT e

fala Olha eu quero que você faça refaça esse use esse meu prompt como um template para fazer o meu site que é assim assim assado você descreve o seu site Ok então você pode fazer dessa maneira então tem vários exemplos aqui ó o exemplo dois vamos criar então aqui no meu caso eu vou pedir pro chat GPT eh eu vou fazer isso bom eu refiz no chat GPT então coloquei aqui ó use esse prompt abaixo como template refaça colocando as minhas informações abaixo aí eu coloquei aqui minhas informações meu site será chamado criando com evas

e é um curso de design enf página genérica template eu coloquei descrevi o template aqui que foi exatamente que a gente copiou do E aí ele colocou aqui está o Prom as informações vou colocar translate PED PR ele traduzir para inglês colocar L na ferramenta que lá tem que ser em inglês ah em outras línguas ainda é Beta Então vou usar inglês mesmo copiei na real vou pegar só as infos aqui porque ele fala alguma coisinha aqui depois beleza coloquei aqui ó PR se map colei e ele vai girar de uma a cinco páginas isso

em inglês ó linguage Beta ele pode mudar para português mas vou fazer em inglês mesmo e vou pedir para ele gerar o site map vai começar a Gerar o site map o ponto é se você tiver no plano gratuito como eu estou você vai conseguir gerar apenas o site map de uma página ó ele até criou uma arquitetura inteira aqui o que é bem legal porque se você tiver um plano pago você cria um site map em questão de de segundos né como você pode ver mas eu não quero nada disso aqui então eu vou

só excluir Pronto ele gerou um set map para mim como você já pode até ter visto no vídeo passado não é verdade mas aí vamos lá tem duas na barra aqui tirar uma ó Opa você pode excluir Elí vai perguntar se você quer mesmo deletar uma Global section eu deletei porque eu preciso de duas nave bar e aí ele vai colocar algumas coisas aqui ó então Hero é setion Ó tem outra Hero header section Por que ele criou duas cara não entendi porque ele criou duas vou tirar também Eh vamos deixar só né só o

básico né não precisa de tanta coisa assim não precisa de newsletter à Não precisa deixa eu ver ele viu algumas coisas a mais né deu algum probleminha aí no prompt não sei vieram dois footers tá vendo Então não precisa de dois né Beleza agora que eu fiz a limpa aqui então o que que é legal você prestar atenção cada section você pode criar um novo prompt para você mostrar para que que ela serve então aqui ó Isso aqui é um promp ó introduction tipo vai introduzir creating with Advance vai fazer uma introdução de do Create

EV com uma tagline e cativante e um cure Action featur Actions o que que vai fazer você pode reescrever isso aqui se você quiser tá não tem problema nenhum você pode reescrever você pode editar da forma que você quiser e você pode trocar os lugares também isso aqui é uma section do seu site então você pode de trocar os lugares e você pode uma coisa que eu não expliquei no vídeo passado é que você também pode criar aqui um prompt próprio para essa página então no caso de você ter várias páginas Como eu disse no

P pago você pode criar um prompt Centralizado nessa página aqui eu também posso fazer e o meu prompt se eu quiser mudar a página aqui eu posso criar uma uma descrição única para essa Landing page aqui tá eu posso gerar ela de novo se eu quiser e ele ele vai levar em consideração o PRT primário aqui ó então o site map prompt e ele vai também levar em consideração o prompt que eu fizer aqui na home na na Landing page no caso ó ele vai combinar com o prompt do site map primário então ele vai

combinar isso aqui tá então você pode utilizar não é o caso aqui agora já que eu já tenho o meu site map pronto então eu vou criar o wireframe aqui ele já tá criando pra gente todo o wireframe né da página Então olha só então aqui então ele já criou uma cop né tranquilo unlock your potential e assim uma copy que eu vou te falar que é boa tá Eu Fiz alguns experimentos comparando a copia do GPT do do chat GPT usando um Bot de de writing e essa cpia que ele faz aqui essa cpia

que ele faz aqui não perde muito tá alguns pontos eu quis trocar e tal mas se você tentar fazer outras combinações aqui você pode achar coisas muito boas então não é te jogar fora cop que ele traz aqui que é muito interessante até porque essa ia deles é própria para Website então é muito legal mesmo inclusive eles T aqui inclusive uma ia para copywriting tá então também é bem interessante Então tá aqui ó o nosso o nosso template né o nosso wireframe todo criado se a gente quiser a gente pode mudar alguma coisa né A

gente pode eu não quero três três cards Eu quero dois aí ele vai Ah ele vai deixar o número Deixa eu ver se eu consigo deletar ó eu não quero três Card Eu quero dois se eu quiser tirar isso daqui eu consigo Ah é alguns elementos não posso tirar S vou conseguir tirar no layout final mas no caso eu posso trocar Então posso deixar o com Card Centralizado ou não eu posso trocar o componente inteiro se eu quiser replace component eu posso mudar essa section se assim eu quiser né então como eu já tinha falado

até no vídeo passado posso vir corrigindo né a copy Então olha só isso aqui é muito legal porque você já consegue criar sem ter encostado nada do figma ainda um layout já bem fiel né que depois vai ser só preenchido tal com as suas informações com com em com imagens Mas você consegue já uma planta baixa do seu projeto só que antes você não conseguir exportar você só exportava pro figma wef se você pagasse agora você consegue exportar pro figma você basicamente só prisa do plugin para isso então nós vamos l no figma já no

meu figma aqui olha só então eu vou colocar agora O plugin do rel vamos lá eu venho aqui em plugins eu vou colocar pronto eu vou apertar Run e beleza vai pedir para eu logar como eu já estou logado ele já fez a conexão Se você não estivesse basicamente vai logar ele já fez a conexão e tá tudo aqui então Ó meu projeto já está aqui olha só e então ele tá falando assim ó que eu posso e adicionar o site map aqui no figma se eu quiser e eu posso adicionar o wireframe vamos fazer

os dois adicionando o site map primeiro então que é legal a gente ter isso aqui a gente pode editar se a gente quiser também e agora eu vou adicionar o wireframe aqui no Canvas do figma e olha só ele tá adicionando todos os estilos já no nosso Arquivo ele já tá montando já a Library no caso né a biblioteca com os estilos O que é muito interessante vocês vão ver por quê fica meio bagunçado aqui ó que legal ele começa a criar Fica tudo meio bagunçado no primeiro momento pronto como vocês podem ver vou fechar

o nosso [Música] plugin e agora nós já temos aqui olha só todo o projeto como estava um errinho aqui ó mas de boas veio o projeto todo aqui do aqui mas veio o projeto todo aqui então beleza então olha só agora você pode exportar tudo isso pro seu figma legal o que que eu faço com isso agora então primeira coisa que você vai fazer é tirar o grupo aqui do figma Ó que tá ligando o mobile com o desk Tá bom então agora eu nem gosto de usar o mobile deles mas beleza então tem aqui

né e e vamos supor que eu quero então fazer o meu no meu guia de estilos né O que você pode fazer aqui agora por exemplo né para começar a estilizar já a partir daqui você pode Claro carregar suas imagens aqui né Eh um ponto tem plugins que você consegue trocar o guia de estilo inteiro é mais rápido as cores mas eu não vou falar disso aqui não deixa nos comentários se você quer saber como que isso é feito porque já é uma dica mais avançada mas aqui aqui por exemplo eu já posso colocar imagens

se eu quiser então por exemplo vou colocar uma imagem de exemplo aqui vou dar uma Splash colocar uma imagenzinha pra gente já ilustrar como que isso fica né Colocar de um animalzinho colocar tartaruguinha Então vou colocar a tartaruguinha aqui [Música] então aqui no caso por exemplo vou rodar o feeder icons [Música] eu vou trocar os ícones por exemplo Então vou colocar isso aqui vei para cá ó coloquei aqui tá vendo É claro galera é claro Tô mostrando para vocês um exemplo é claro que é legal você ter uma biblioteca instalada aqui porque você consegue trocar

já direto pela Instância né que tá aqui se você não entendeu o que eu falei tudo bem também não tem problema mas você já consegue trocar diretamente por aqui Aqui eu só tô colocando só para brincar para você ver como ficou rápido criar com o figma juntamente com o warom você pode fazer tudo isso de graça você não precisa pagar nada ó colocando outros ícones aqui só para preencher rapidamente pra gente aqui essas duas sessões e tá tudo bem Ó pronto preencher essas duas sessões aqui beleza então tem a foto da tartaruguinha tem os ícones

ali que colque tamanho diferente mas tudo bem esse aqui tá com 37 deixar os dois aqui com 37 também os 2 com 37 aqui beleza então beleza e aí você seguiria preenchendo o resto né claro do seu design mas olha só tá muito mais fácil agora muito mais rápido e lembrando né esse plugin ele também serve para o webflow você pode já trazer o seu layout lá do rel direto pro webflow nem precisa passar pelo figma só que Claro para quem gosta mais do framer por exemplo você consegue criar ainda mais rápido seu layout no

figma e depois com poucos cliques passar tudo isso pro framer e já tá online entendeu o poder disso aqui isso aqui é muito louco e eu não sei nem por não tem ninguém falando dessa parada e bom se esse vídeo de hoje te ajudou em alguma coisa se você entendeu que para criar sites hoje você não precisa nem você não precisa fazer nada difícil tá fácil tem ia você não precisa de elementor você não precisa de código você pode fazer tudo pelo figma e depois passar com poucos clicks pro framer eu não falei do framer

nesse vídeo aqui falei do relum obviamente Mas você agora não precisa nem começar do zero mais você pode começar com um template já baseado na sua necessidade então o primeiro vídeo do relum que eu fiz no canal era para eu te mostrar a variedade de templates o segundo vídeo Já te mostrei a Ea como ela funcionava E como você poderia já fazer as suas ideias depois ir escolhendo na mão de forma manual os templates que você i usar no figma né combinando a biblioteca do figma com oom Veja esses dois vídeos para você entender o

que eu tô falando mas agora você pode você nem precisa mais olhar a biblioteca do relum você pode ir lá direto na i D do relum e já fazer da forma que você pretende Criar o seu site e já exportar tudo isso pro figma e finalizar no figma então isso aqui tá excelente tá muito bom eu espero que você tenha gostado desse vídeo se você gostou deixe seu like se inscreve no canal me segue no Instagram eu sou Evans meu @ Create Evans Me segue por lá também e como de como sempre né para você

ter uma continuidade no seu aprendizado no vídeo que eu vou deixar aqui para você agora você pode você tem a chance de ver como que é fácil criar um portfólio com o framer eu tô deixando esse vídeo para você ver agora porque eu acredito que é um bom complemento para esse vídeo que você acabou de ver aqui então te vejo nesse próximo vídeo tudo numa boa Tudo na tranquilidade eu sou o Evans vou ficando por aqui tchau