O título do video não tem muita relação com o conteúdo, pois acabei pensando que vc iria mostrar código das exportações que vc fez, por exemplo no vscode.
Realmente o Figma ajuda muito quem trabalha com front. Além do que a Rafa falou, um ponto muito interessante do Figma é que ele deixa a fonte, espaçamentos, e cores a serem usadas. Isso ajuda muitooo. Ótimo vídeo, Rafa e pessoal da Alura!
Sou estudante e, estou com uma dúvida cruel! queria saber como faz para emendar a ponta de um traçado na outra? Igual está na casinha que você fez, se observar do lado esquerdo a linha do "telhado" não emendou com o da "parede" como faz para resolver isso?
Não sei se era diferente quando o vídeo foi publicado, mas hoje, em 2024, essa função de "inspecionar" e ver o CSS só funciona no modo "dev", que faz parte do plano pago. Poderiam atualizar o vídeo...
tenho um projeto aqui que inclui varios botoes, quando acionado vai para outra janela. queria saber como importar todas essas janelas, pq aparentimente no proxylight so tem como importar 1 tela que é o frame, mas as variantes (que é o que faz mudar de tela quando aciona o botao) não importa junto e nem os assets que coloca dentro do frame... me ajuda Alura
Olá!! 😉 Aqui um passo a passo que pode te ajudar neste caso: 1 - Deixar todas as variantes e assets que serão importadas dentro do projeto de origem. 2 - No projeto de destino, a dica seria criar um novo frame (quadro) ou selecionar um frame existente onde você deseja importar as variantes, para vir tudo junto. 3 - Aí depois no projeto de origem, o ideal seria selecionar todas as variantes que deseja importar. Fazendo isso uma por uma ou usando a tecla Shift para selecionar várias variantes de uma só vez. 4 - Já na reta final da importação, você pode copiar as variantes selecionadas pressionando Ctrl+C. 5 - E aí voltar para o projeto de destino e colar as variantes copiadas pressionando Ctrl+V Com isso, a expectativa é que nenhuma variante ficará pelo caminho na importação! Também recomendo para você a Formação de Figma aqui da Alura, onde esta questão e outras particularidades da ferramenta serão vistas com mais detalhes: cursos.alura.com.br/formacao-figma Espero ter ajudado! Abraço. ✨
meu problema é quando coloco ó codigo de css no code, mesmo com as mesmas dimensões, fica diferente, inclusive as cores... por mais que seja as mesmas do figma. sabe como resolver?
Em 2024, essa função de "inspecionar" e ver o CSS só funciona no modo "dev", que faz parte do plano pago, ou seja, o vídeo está mais do que desatualizado.
Oi Amarildo, tudo bem? 🙂 O Figma é uma ferramenta de design e prototipagem que permite criar interfaces de usuário interativas. É utilizado para criar layouts de sites e aplicativos, mas não gera automaticamente o código HTML e CSS necessário para desenvolver um site funcional. Possui alguns plugins para auxiliar nessa tarefa, mas não é o foco da ferramenta. Para desenvolver sites, é necessário ter conhecimento de HTML e CSS, pois essas são as linguagens usadas para estruturar e estilizar o conteúdo da web. Porém, existem plataformas de criação de sites que permitem criar sites sem a necessidade de conhecimento avançado em programação, o WordPress é um deles. 😉 Temos alguns cursos que podem te ajudar, veja os links que separei para você: 📌 Curso WordPress: criação de um tema personalizado - kli.cx/kdsa 📌Curso Plugin no Wordpress: widget, shortcode e configurações kli.cx/kdsb 📌 Curso Wordpress: sites com Elementor kli.cx/kdsc Qualquer dúvida, é só chamar a gente em uma de nossas redes sociais. 💙✨
Oi, Evandro! Tudo bem? Você pode entrar em contato conosco por mensagem direta nas redes sociais ou por meio dos canais de atendimento: 📌 Portal (você receberá a resposta via e-mail): kli.cx/ljmb 📌 WhatsApp: kli.cx/ljmc 📌 Central de ajuda: kli.cx/ljmd
Olá, Felipe! 😉💙 O objetivo principal do vídeo é reforçar e fornecer dicas sobre como os desenvolvedores podem utilizar o Figma para exportar imagens e inspecionar elementos, pra visualizar as configurações específicas de cada elemento para assim usar essas informações no código. Separamos mais alguns conteúdos sobre o assunto: - Figma do Design ao Código: www.alura.com.br/podcast/figma-do-design-ao-codigo-layers-ponto-tech-03-a726 - Figma: a ferramenta, Design e uso: www.alura.com.br/artigos/figma Porém, se busca um curso especifico em Html / CSS, você pode fazer os cursos: - A partir do zero: HTML e CSS para projetos web: cursos.alura.com.br/formacao-html-css - HTML e CSS: praticando HTML/CSS: cursos.alura.com.br/course/html-css-praticando-html-css Qualquer dúvida, chama! 💙
O título do video não tem muita relação com o conteúdo, pois acabei pensando que vc iria mostrar código das exportações que vc fez, por exemplo no vscode.
percebi a mesma coisa
Eu tbem entendi isso! 😅
era isso que eu tava esperando, fiquei meio decepcionado
Realmente o Figma ajuda muito quem trabalha com front. Além do que a Rafa falou, um ponto muito interessante do Figma é que ele deixa a fonte, espaçamentos, e cores a serem usadas. Isso ajuda muitooo. Ótimo vídeo, Rafa e pessoal da Alura!
Valeu pela contribuição! 💙💙
Uhuuul
Muito legal o conteúdo, acompanho o canal da Rafa também...😃
Excelente explicação!😍
Que bom que gostou, Thaissa! Esperamos que tenha te ajudado 💙
Sou estudante e, estou com uma dúvida cruel! queria saber como faz para emendar a ponta de um traçado na outra? Igual está na casinha que você fez, se observar do lado esquerdo a linha do "telhado" não emendou com o da "parede" como faz para resolver isso?
Muito legal, muito útil no início desse segundo challenge de FrontEnd, vamos em frente. #AluraChallenges #AluraChallenge
#AluraChallenge #T4 (2.2022)
Conteúdo sensacional! Parabéns!
Obrigado, Virgílio! Ficamos felizes por saber que aproveitou o conteúdo. Tamo junto! 😎
Não sei se era diferente quando o vídeo foi publicado, mas hoje, em 2024, essa função de "inspecionar" e ver o CSS só funciona no modo "dev", que faz parte do plano pago. Poderiam atualizar o vídeo...
Parabéns 🎉! Obrigada!
🥰💙
Vídeo incrível, obrigada.
Que bom que o nosso conteúdo te ajudou, Whsk7! 💙
Como podem descurtir um conteúdo deste? Top Rafa.
Muito bom adorei
uma duvida,tem como extrair os codigos das animaçoes tambem ?
Estou até agora nessa busca amigo, ta hard.
@@alexmota-dev se você chegar alguma conclusão em relação a isso, teria como me informar ?
Atualmente a parte de inspecionar os elementos para ver as estilizações CSS só no plano pago.
da pra vc usar o plano estudande pesquisa ai "Plano devmode figma grátis"
Exatamente. Fui tentar usar e somente habilitam o Dev Mode no plano pago.
tenho um projeto aqui que inclui varios botoes, quando acionado vai para outra janela. queria saber como importar todas essas janelas, pq aparentimente no proxylight so tem como importar 1 tela que é o frame, mas as variantes (que é o que faz mudar de tela quando aciona o botao) não importa junto e nem os assets que coloca dentro do frame... me ajuda Alura
Olá!! 😉
Aqui um passo a passo que pode te ajudar neste caso:
1 - Deixar todas as variantes e assets que serão importadas dentro do projeto de origem.
2 - No projeto de destino, a dica seria criar um novo frame (quadro) ou selecionar um frame existente onde você deseja importar as variantes, para vir tudo junto.
3 - Aí depois no projeto de origem, o ideal seria selecionar todas as variantes que deseja importar. Fazendo isso uma por uma ou usando a tecla Shift para selecionar várias variantes de uma só vez.
4 - Já na reta final da importação, você pode copiar as variantes selecionadas pressionando Ctrl+C.
5 - E aí voltar para o projeto de destino e colar as variantes copiadas pressionando Ctrl+V
Com isso, a expectativa é que nenhuma variante ficará pelo caminho na importação!
Também recomendo para você a Formação de Figma aqui da Alura, onde esta questão e outras particularidades da ferramenta serão vistas com mais detalhes: cursos.alura.com.br/formacao-figma
Espero ter ajudado! Abraço. ✨
meu problema é quando coloco ó codigo de css no code, mesmo com as mesmas dimensões, fica diferente, inclusive as cores... por mais que seja as mesmas do figma. sabe como resolver?
Obrigada, adorei a dica.
no meu figma não aparece a parte "css" com os códigos que vão ser colocados, tem alguma configuração para aparecer
Em 2024, essa função de "inspecionar" e ver o CSS só funciona no modo "dev", que faz parte do plano pago, ou seja, o vídeo está mais do que desatualizado.
Não consigo inspecionar os codigos, apenas pagando.
Eu preciso saber html e css, utilizando o figma, ou ele é apenas para designer e protótipo ?
Pois quero desenvolver sites, mas acho muito chato programação, codigos e etc
Oi Amarildo, tudo bem? 🙂
O Figma é uma ferramenta de design e prototipagem que permite criar interfaces de usuário interativas. É utilizado para criar layouts de sites e aplicativos, mas não gera automaticamente o código HTML e CSS necessário para desenvolver um site funcional. Possui alguns plugins para auxiliar nessa tarefa, mas não é o foco da ferramenta.
Para desenvolver sites, é necessário ter conhecimento de HTML e CSS, pois essas são as linguagens usadas para estruturar e estilizar o conteúdo da web. Porém, existem plataformas de criação de sites que permitem criar sites sem a necessidade de conhecimento avançado em programação, o WordPress é um deles. 😉
Temos alguns cursos que podem te ajudar, veja os links que separei para você:
📌 Curso WordPress: criação de um tema personalizado - kli.cx/kdsa
📌Curso Plugin no Wordpress: widget, shortcode e configurações kli.cx/kdsb
📌 Curso Wordpress: sites com Elementor kli.cx/kdsc
Qualquer dúvida, é só chamar a gente em uma de nossas redes sociais. 💙✨
Muito bom
Tem curso de flutter?
Temosss, olha lá: www.alura.com.br/formacao-flutter 😉
Bom dia. Tudo bem? Como entrar em contato direto com vocês?
Oi, Evandro! Tudo bem?
Você pode entrar em contato conosco por mensagem direta nas redes sociais ou por meio dos canais de atendimento:
📌 Portal (você receberá a resposta via e-mail): kli.cx/ljmb
📌 WhatsApp: kli.cx/ljmc
📌 Central de ajuda: kli.cx/ljmd
A musiquinha do Guanabara kk
Ubuntu lindo
Faltou mostrar de verdade no código
Olá, Felipe! 😉💙
O objetivo principal do vídeo é reforçar e fornecer dicas sobre como os desenvolvedores podem utilizar o Figma para exportar imagens e inspecionar elementos, pra visualizar as configurações específicas de cada elemento para assim usar essas informações no código.
Separamos mais alguns conteúdos sobre o assunto:
- Figma do Design ao Código: www.alura.com.br/podcast/figma-do-design-ao-codigo-layers-ponto-tech-03-a726
- Figma: a ferramenta, Design e uso: www.alura.com.br/artigos/figma
Porém, se busca um curso especifico em Html / CSS, você pode fazer os cursos:
- A partir do zero: HTML e CSS para projetos web: cursos.alura.com.br/formacao-html-css
- HTML e CSS: praticando HTML/CSS: cursos.alura.com.br/course/html-css-praticando-html-css
Qualquer dúvida, chama! 💙
Altera esse título não tem nada haver com oque ensina
Ensinou tudo, menos o tema do vídeo, parabéns
oxi, explicou quase nada
enrolou enrolou e não falou nada
A voz dessa mina tem que ser equalizada, está com muito médio alto, ta irritante. de 1klz até uns 4