Figma Design em HTML/CSS
HTML-код
- Опубликовано: 3 окт 2024
- 🎖️ Torne-se membro para obter consultorias técnicas exclusivas comigo:
/ @jaimeneves
Este tutorial é um recurso indispensável para qualquer desenvolvedor ou designer buscando converter designs do Figma em HTML e CSS. Aprenda a criar layouts web precisos e responsivos passo a passo, garantindo que sua visão de design se traduza perfeitamente para a web.
🎞️ Assista depois desse vídeo:
Figma + VSCode: Integração - Parte 1 🔗 • Figma + VSCode: Integr...
Figma + VSCode: Integração - Parte 2 🔗 ruclips.net/user/li...
Descubra o Novo Penpot 🔗 • PENPOT - Essa Ferramen...
HTMX e o Futuro da Web 🔗 • Como o HTMX Está Mudan...
Top 12 Sites para Devs 🔗 • Top 12 Sites para Devs...
----
🔶 PARCERIAS
🔶 DigitalOcean - digitalocean.p...
🔶 InVideo - invideo.sjv.io...
🔶 TikTok For Business - getstartedtikt...
🔶 Hospedagem de Site - partners.hostg...
🔶 Registre Seu Domínio - namecheap.pxf....
#programação #figma #figmatips #vscode #frontend #figmatutorial #figmatutorialforbeginners
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.
Opa!! Valeu pelo comentário ✌️
Mim ajudou a ter uma lógica de como o meu site de converte design figma para HTML e Java script vai funcionar
Valeu aí cara
excelente conteúdo mestre. muito obrigado!
Valeu ✌️
Uauu. Comecei a ver o vídeo Professor. Atento ok😊
Opaa!! Top demais ✌️
Excelente Didática! Parabéns meu amigo
Muito obrigado
Top! Conteúdo de qualidade
Valeu 🤙
Ótimo esse video parabens
Opa!! Valeu!
Excelente vídeo! Mas onde está o link do puglin que estaria na descrição?
Foi retirado, pois quando o vídeo foi feito o Dev Mode era gratuito, agora faz parte do plano pago :(
Ótimo 😍
Que bom que gostou
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!
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 - ruclips.net/user/live4Z3ZbZOW3sY
➤ Live 2: Figma ao Código FrontEnd - ruclips.net/user/liveo-sWM8e7ifE
➤ Live 3: Figma ao Código FrontEnd - ruclips.net/user/liveEU106vPszpA
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?
Opa. tudo bem? quando fiz esse vídeo o dev mode era gratuito. Agora ele faz parte do plano pago :(
Showwwwwwwwwwwwwwww 👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼
👍👍
Ganhou um inscrito.
Agradeço muito
Geralmente eu peço para que o chatgpt separe o html dos estilos hahaha poupa um tempão.
Excelente Ideia, ainda não tinha pensado nisso kkk
Pera kk da pra copiar o código do html e jogar no chat que ele separa????
Dá sim mano, depois que tu copiar todo o código pede pro chat gpt deixar o html semantico kkkkkk ele separa certinho. @@garts6789
@@matheusmoxi7606 vou testar kkkko miserável é um gênio
E você consegue um resultado legal, dessa forma?
👏👏👏👏👏👏👏👏👏
Obrigado!
Seguindo você agora
Opa, valeu ✌️
nao consigo ativar o dev mode do figma. diz pra levar pra equipe paga
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 :(
Uma alternativa ao Dev Mode está aqui: ruclips.net/video/U9a2vO5Os28/видео.htmlsi=QJ_pZBrHkAW6aijt
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?
Opa. Claro posso ajudar. Qual sua dúvida?
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.
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.
Olá Elvis. Então, quando fizemos o vídeo o Dev Mode do Figma era gratuito, mas recentemente eles passaram para versão paga :(
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)
Verdade, quando esse vídeo foi feito o plugin era gratuito pois fazia parte do Dev Mode. Uma alternativa é usar o Penpot: ruclips.net/video/U9a2vO5Os28/видео.htmlsi=TMaHaTVigI3vcqL7
Uma alternativa ao Dev Mode do Figma está aqui: ruclips.net/video/U9a2vO5Os28/видео.htmlsi=QJ_pZBrHkAW6aijt
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.?
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?
pra eu ter acesso ao devmode é apenas pagando a mensalidade?
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.
tem q pagar para usar ?
Atualmente o dev mode foi para a versao paga :(
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.
Então, o Figma atualmente já mostra o botão, inclusive da pra ver a tela em vários frameworks diferentes
@@jaimeneves o meu ainda parece o botão como "div"
@@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
Dá para liberar o MODO DEV de graça como estudante!
Obrigado pela dica Luis!