Do Figma ao Código: Passo a Passo!

[@samarapatricio9831]

Nossa, você conseguiu explicar tão bem! Merece mais reconhecimento, prof

[@jaimeneves]

Que bom que você gostou! 😉

[@jaimeneves]

Você é da área de Design ou programação?

[@jonasfrancomatador1277]

só 5 comentários, merece muito mais, parabéns fiquei até assustado porque sempre fiz na mão mesmo os estilos . Agora vai ficar muito mas fácil. Não pretendo copiar o código mais me orientar.

[@jaimeneves]

Opa!! Valeu pelo comentário ✌️

[@miguelsamzevedo]

Uauu. Comecei a ver o vídeo Professor. Atento ok😊

[@jaimeneves]

Opaa!! Top demais ✌️

[@deco7290]

Excelente Didática! Parabéns meu amigo

[@jaimeneves]

Muito obrigado

[@matheusmoxi7606]

excelente conteúdo mestre. muito obrigado!

[@jaimeneves]

Valeu ✌️

[@brunosantiago803]

Professor tu é bom dicas de ouro ...

[@jaimeneves]

Fico feliz que tenha gostado!

[@diegoalvessantana1219]

Top! Conteúdo de qualidade

[@jaimeneves]

Valeu 🤙

[@elvispereira070]

Oi amigo, eu estou iniciando no figma, sou front end iniciante, tenho como fcco tranformar o desing em código, mais pareçe que meu figma esta pedindo para pagar a opçao dev mode, ai não mostra o html e o css, queria saber como é feito, estou travado no desenvolvimento.

[@jaimeneves]

Olá Elvis. Então, quando fizemos o vídeo o Dev Mode do Figma era gratuito, mas recentemente eles passaram para versão paga :(

[@wrgamers7797]

Ótimo esse video parabens

[@jaimeneves]

Opa!! Valeu!

[@felipeassumpcao3039]

Seguindo você agora

[@jaimeneves]

Opa, valeu ✌️

[@wisleycosta4967]

Estou com dificuldades em ter um layout conforme o meu protótipo feito no figma, criei o meu html e associei as minhas classes do código html para o css do figma, mas não tenho os mesmos resultados visuais. Podes ajudar-me nesse sentido?

[@jaimeneves]

Opa. Claro posso ajudar. Qual sua dúvida?

[@jaimeneves]

Você tem esse seu código em algum repositório? Pois nesse caso teríamos que checar se suas classes em CSS estão com todas as propriedades corretas, de acordo com o design do Figma.

[@VitorFerreiraGuima]

Top demais mano! O meu dev mode esta cinza e não é possivel ativar, ele diz que precisa fazer parte do teams. Sabe como resolver?

[@jaimeneves]

Opa. tudo bem? quando fiz esse vídeo o dev mode era gratuito. Agora ele faz parte do plano pago :(

[@petronioklerson6077]

Showwwwwwwwwwwwwwww 👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼

[@jaimeneves]

👍👍

[@rianviana0805]

Ótimo 😍

[@jaimeneves]

Que bom que gostou

[@amaurymachado3711]

Bom dia to com um problema no figma quando eu importo pro great pages ele.fica ok no desktop.mais nao versao mobile ele fica pequeno mesmo fazendo as alterações alguem pode.me ajudar ?sabe como resolver.?

[@jaimeneves]

Bom dia. Então, vamos lá. Primeiro temos que saber como você está fazendo essa importação do Figma. Pois como você disse: No desktop está funcionando legal. Você precisar checar seu CSS, você escreveu os (media queries) para a versão Mobile?

[@garotube13]

nao consigo ativar o dev mode do figma. diz pra levar pra equipe paga

[@jaimeneves]

Opa. então quando o vídeo foi feito o dev mode do Figma fazia parte do pacote gratuito. Agora ele faz parte do pacote pago :(

[@jaimeneves]

Uma alternativa ao Dev Mode está aqui: kzbin.info/www/bejne/i2rEY6mFarSmaJosi=QJ_pZBrHkAW6aijt

[@eduardomello5078]

Excelente vídeo! Mas onde está o link do puglin que estaria na descrição?

[@jaimeneves]

Foi retirado, pois quando o vídeo foi feito o Dev Mode era gratuito, agora faz parte do plano pago :(

[@JoseGianFernandes]

Valeu aí cara

[@mimisocialmedia]

Ganhou um inscrito.

[@jaimeneves]

Agradeço muito

[@jaimeneves]

Uma alternativa ao Dev Mode do Figma está aqui: kzbin.info/www/bejne/i2rEY6mFarSmaJosi=QJ_pZBrHkAW6aijt

[@gustavowezt]

pra eu ter acesso ao devmode é apenas pagando a mensalidade?

[@jaimeneves]

Sim :( Quando fiz esse vídeo o dev mode era gratuito. Fui pego de surpresa também quando vir que agora tudo estava fazendo parte do plano pago.

[@willCarlosAbreu]

Problema que esse plugin expira o grátis rapidinho e você tem que assinar o plus pra continuar usando ( diga-se de passagem bem carinho)

[@jaimeneves]

Verdade, quando esse vídeo foi feito o plugin era gratuito pois fazia parte do Dev Mode. Uma alternativa é usar o Penpot: kzbin.info/www/bejne/i2rEY6mFarSmaJosi=TMaHaTVigI3vcqL7

[@JoseGianFernandes]

Mim ajudou a ter uma lógica de como o meu site de converte design figma para HTML e Java script vai funcionar

[@jaimeneves]

que bom que te ajudou

[@jpnones]

Estou iniciando e tenho duas dúvidas: 1. Consigo usar esse código CSS para Python dentro do VS Code? 2. Já vi em alguns vídeos que o pessoal monta a interface gráfica no figma e depois exporta tudo para o Python colando um link. Saberia explicar esse passa a passo? Parabéns pelo trabalho!

[@jaimeneves]

Olá! Respondendo sua primeira pergunta. Sim, você consegue usar o código CSS em qualquer linguagem que desenvolva para web. Vale ressaltar que, você deve checar como injetar o código CSS em cada linguagem. Sobre a segunda pergunta, ainda não vi essa maneira de exportar o código direto do Figma. Mas existem muitos plugins, acho que pode ser possível sim. Vou deixar alguns links de vídeos que a gente codifica layouts direto do Figma. 👉 LIVES ➤ Live 1: Figma ao Código FrontEnd - kzbin.info4Z3ZbZOW3sY ➤ Live 2: Figma ao Código FrontEnd - kzbin.infoo-sWM8e7ifE ➤ Live 3: Figma ao Código FrontEnd - kzbin.infoEU106vPszpA

[@rianviana0805]

👏👏👏👏👏👏👏👏👏

[@jaimeneves]

Obrigado!

[@Brendosl]

Muito bom , f0da que agora o devMode é pago 😢

[@jaimeneves]

É verdade, mas vale a pena!

[@matheusmoxi7606]

Geralmente eu peço para que o chatgpt separe o html dos estilos hahaha poupa um tempão.

[@jaimeneves]

Excelente Ideia, ainda não tinha pensado nisso kkk

[@garts6789]

Pera kk da pra copiar o código do html e jogar no chat que ele separa????

[@matheusmoxi7606]

Dá sim mano, depois que tu copiar todo o código pede pro chat gpt deixar o html semantico kkkkkk ele separa certinho. @@garts6789

[@garts6789]

@@matheusmoxi7606 vou testar kkkko miserável é um gênio

[@RafaelOliveira-on3mo]

E você consegue um resultado legal, dessa forma?

[@jimmyNeutro112]

tem q pagar para usar ?

[@jaimeneves]

Atualmente o dev mode foi para a versao paga :(

[@Rafael-Dev]

o figma apenas desenha a tela, ele não mostra o "button", inputs e outros elementos importantes, tudo é criado na mão, achava que fosse mais tranquilo sem a necessidade de escrever tanto código, mas tá valendo.

[@jaimeneves]

Então, o Figma atualmente já mostra o botão, inclusive da pra ver a tela em vários frameworks diferentes

[@Rafael-Dev]

@@jaimeneves o meu ainda parece o botão como "div"

[@jaimeneves]

@@Rafael-Dev então mano, agora que entendi sua pergunta. Achava que voce estava falando que o Figma não estava mostrando o HTML, voce disse: inputs, button..., eu entendi que ele nao estava mostrando nada. Quando voce desenha o dev mode mostra tudo como divs

[@brunosomos]

@@jaimeneves eu achei que você só desenhava e botava lá que uma ia, sei lá, ia deixar do mesmo jeito que eu deixei no figma

[@jaimeneves]

@@brunosomos a ídeia é quase essa mesma. Acho que por trás desses plugiins roda uma IA. Dá uma olhada nesse outro vídeo aqui do canal: kzbin.info/www/bejne/aaO6enyNrrCNq5Isi=Zs6BxcsNxC-q8tAO

[@luisvitormattos2269]

Dá para liberar o MODO DEV de graça como estudante!

[@jaimeneves]

Obrigado pela dica Luis!

[@devsdenegociosofc]

pra que reverb? vai cantar pai? kkkk

[@jaimeneves]

Canto também