NOVO Figma Auto Layout 3.0: Design Responsivo, Wrap & Breakpoints!

[@sigaocoelhobranco]

Disparado, auto layout é a parte que mais pega para os iniciantes em Figma (que não precisam de “prototipagem” e funções específicas), principalmente os que nunca mexeram com desenvolvimento ou até mesmo um “Elementorsinho” que já tinha wrapper desde sempre. Demorei horrores quando iniciei, como a maioria até negligenciei essa parte, mas o cara em 20 minutos deu a faca para cortar qualquer queijo. Só com isso ai, fuçando a ferramenta o cara descobre tudo sobre auto layout, porque o chato é pegar esses principiozinhos no início.

[@feuxdesign]

😊

[@LeoNonato-f7z]

Muito bom obrigado

[@denilsondiniz436]

Bom demais

[@fbvitorino]

Aprendi bastante, valeu pelo conteúdo!! 👍

[@CarolBrasileiro]

FEUX, vc é tudo pra mim. E além de tudo contribui para meus olhos com sua beleza!

[@feuxdesign]

😌 haha Obrigado

[@lizcorrea6810]

vc é mto bom! sério!

[@cassianoxaviersoares2816]

eitaa! fica lindoo

[@setentaxsete1407]

Muito bom! Obrigado!

[@wallacesilva6087]

Excelente video! Muito Bom, sou desenvolvedor Front End e percebo que o Figma está se tornando cada vez mais preciso ao refletir o comportamento que é aplicado no CSS.

[@marlonlamancio]

Show! Valeu pelo vídeo. Só uma sugestão, essa forma que você exibe sua tela nao favorece a visualização, no celular então nao da pra ver direito onde está clicando por exemplo na sidebar à direita. Valeu!

[@kassyanesilva2911]

Que didática maravilhosaaa. Realmente auto layout sempre foi um bicho de sete cabeças pra mim. Mas aprendi o conceito e a pratica muito bem nessa aula. Com certeza preciso fazer seu curso. Esta de parabéns.

[@btorresdacosta]

muito bom, obrigada!!

[@marquinhodesign]

Esse vídeo é fantástico. Me ajudou MUITO!

[@dulima20]

Conteúdo TOP!

[@matheuswebmkt1]

PERFEITO!

[@darlanvieira6814]

Excelente vídeo, eu posso dizer com muita propriedade que o curso do Felipe me ajudou muito em meus estudos como Desenvolvedor front-end e hoje posso criar meus próprios designers. Recomendo muito!!!

[@geysylira117]

Que aula, viu? Parabéns!!!

[@MarcioChang]

Vai ter vídeo sobre os tokens?

[@feuxdesign]

Essa semana ainda!

[@thaisanttune]

Que demais! Isso funciona para tabelas também?

[@feuxdesign]

Sim! Farei em breve uma aula sobre como montar tabelas no Figma!

[@alanaugusto5461]

Absolutamente didático 😮

[@mariaclaramachado7956]

Incrível!

[@andrerolla]

SHOW! 👌🏽

Seu curso conta com aulas sobre os updates mais recentes?

[@feuxdesign]

Tem sim! Lançamos 2 módulos novos! Um inteiro de Dashboards já usando as variáveis e o novo protótipo, e outro módulo mostrando as novidades do Figma 2023

[@ProfPauloMinali]

Parabéns!! Conteúdo top!

[@stsangelodesign]

Excelente!

[@luciianonunes]

Parabéns pelo excelente conteúdo e obrigado por compartilhar este valioso conhecimento. Muito boa sua didática, com certeza quando eu for me aprofundar mais em UI/UX com figma estarei procurando seu curso.

[@ddln_0779]

Fe, MEUS PARABÉNS pelo vídeo! Sério, que explicação foda! Super mastigadinho. Muito sucesso pra ti cara e obrigada por compartilhar seu conhecimento!

[@marcoapolinario2009]

Obrigado pelo vídeo. Eu queria muito fazer este curso. Iria muito me ajudar em minhas aulas de matemática. Mas esta alem que posso pagar. Eu queria muito fazer.

[@MarcioChang]

Como eu tava esperando esse vídeo HAHAHAH, Valeeeeu.

[@wallisonguedes2438]

O mestre!!!!

[@rafaelcardoso9829]

zika memo

[@Joaozzada]

Bom demais meu mano, obrigado pelo conhecimento

[@Coodyrs]

Muito bom! Estou louco pra aplicar nos meus projetos

[@iagovieiragama6732]

Finalmente!! Estava ansioso demais por essa aula

[@diegomoreira5557]

Conteúdo sempre excelente!

[@tulioferreiradesign]

O meu não tem a opção fill container, teve atualização e saiu?

[@NilweslleyAlves]

Que isso em? CONTEÚDO PE R F E I T O

[@feuxdesign]

Valeu mesmo!

[@helder-rangel]

Coloco fill-container para um campo de formulárrio para que ele se encaixe numa tela menor, média e maior?

[@leof1140]

Excelente conteúdo mestre! O curso é com aula ao vivo?

[@thiagodiniz8224]

O wrap no auto layout é igual usar display flex e flex wrap no CSS.

[@marceloviannadev]

Auto layout é Flexbox dentro do figma, simples assim. Shift + a e você cria uma div flex.

[@filipeamilton2879]

Show de bola 👍 ( essas risadas ai eu não aguentei 🤣)

[@feuxdesign]

Eu sou besta mesmo hahaha

[@filipeamilton2879]

@@feuxdesign 🤣🤣🤣🤣

[@ivanbaloi]

GRACIAS FEUX!

[@TheChibokajr]

tope

[@mavek12]

Oi Felipe, qual camera você usa para gravar seus videos? Valeu

[@feuxdesign]

Uso 2 cameras, uma Sony A74 e uma Sony FX30

[@felicianonunes5459]

Felix, Eu vivo em ANgola-África e infelizmente para me inscrever no seu curso preciso ter CPF. Como devo proceder diante dessa situação? Assisto suas aulas a já uns anos

[@paleguy9518]

Ótima questão, estou curioso com a possibilidade... voce tem a resposta ou não? @feuxdesign

[@Adson1981]

Oi, pessoal. Atualmente sou professor, mas já trabalhei com os tais "webdesigns" 😂. Na última década surgiram tantas ferramentas novas que não cosegui acompanhar. Minha dúvida é: COMO TRANSFORMAR TODA ESSA CRIAÇÃO EM UMA BOA E VELHA CSS/HTML bem limpa e organizada?

[@feuxdesign]

Do mesmo jeito que se faz há pelo menos uns 10 anos hehe! O Figma é semelhante a qualquer outra ferramenta de design, mas com mais detalhes e proximidade ao desenvolvimento, como o HEX das cores, o tamanho da tipografia. Além disso, o INSPECT do Figma é similar a qualquer browser, permitindo que você copie CSS diretamente dele, assim como diversas outras linguagens, como Swift, XML...

[@Adson1981]

@@feuxdesign Entendido.Obrigado por responder. O Figma, ou Adobe XD, faz então o que o velho Fireworks fazia, com a vantage que podemos copiar e colocar a CSS de cada elemento?

[@pissaia]

Como um dev monta isso sem quebrar tudo?

[@andersonnunes-tz9612]

Com a chegada da IA no Figma, já nos proximos meses, será possivel a qualquer leigo criar layouts matadores, porém, isso não substitui nem de longe o profissinal humano por tras da criatividade;

[@bmirandatrafego]

Gente, tô me sentindo muito excluída. Nem sei o que é Figma, é a primeira vez que escuto isso, e se alguém puder me explicar eu agradeço.😅

[@bmirandatrafego]

Eu trabalho com CorelDRAW e Photoshop somente. 😅😅😅

[@feuxdesign]

Oi Bruna! Figma é uma ferramenta de design assim como o Corel e o Photoshop, porem o foco do Figma é o design de produtos digitais, como sites e apps! Mas como é uma ferramenta que roda até no navegador, e extremamente versátil, as pessoas usam para diversas coisas como design de social mídia, ilustração e até apresentação de slides.

[@bmirandatrafego]

@@feuxdesign nossa, show! Obrigada pelo esclarecimento.

[@JamiltonMacedo]

Mano, essa janela distorcida ficou legal nao, e nada inclusivo. bota sua camera canto mesmo como antes.

[@marinaprivs266]

Por que não é inclusivo? :( eu tinha achado tão legal o layout do vídeo dele hahaha

[@JamiltonMacedo]

@@marinaprivs266 pq dificulta a leitura. Principalmente se a pessoa tá vendo num smartphone.

[@feuxdesign]

Obrigado pelo feedback!