Master Responsive Layouts Using Figma and Webflow

Thank you, great tutorials, simple, direct and very good points and tips.

Figma to Webflow goes HARD 🔥🔥

Did you change the 5rem padding to 2.5rem in mobile?

Bro keep up the great content, the value you're providing aspiring web flow devs is unreal! I personally would really like to see you expand on this and get slightly more advanced! As someone who's competent in web flow but is trying to make the leap to rems and has dabbled in a bit of client first, I think it would be sick if you could use the client first px to rem tool and reverse engineer a px design to show the differences between the two! I feel like this would be more digestible for myself but even more so for new devs flirting with the idea of REMS. That's my 2 cents anyway lad, love from the UK keep it up 🔥

Great tutorial Arnau! Would be great to see more client-first website building like this

Looks clean as heck! Great tutorial Arnau 👏🏼

so for your spacing you don't use flexbox, you use div blocks set to rem? can all of this be done without grids? i ask bc i started using a figma plugin that lets you copy and paste from figma to webflow - it's actually amazing. you need to make some tweaks after you paste in webflow, but it does a lot of the heavy lifting. anyways, it doesn't use grids, it uses flexbox by default.

Great video, would be good to see a tutorial for scaling down text from desktop to 320px in mobile using client first fluid responsive

do you have content on how you design in figma with webflow development in mind? love the content!

New to Webflow here! I noticed that you use a div block solely for padding and margins. Is there a reason to do it like this rather than setting the padding on the parent div or using flex box?

Please go advance

is there a template for the figma file you used?

The video I was looking for! I didn't understand how to make sure that the content doesn't stretch beyond a certain screen width but does adjust when it gets narrower. All I see on YT is videos with auto layout and fill OR the constraints, but not the combination of it. So if Im correct you design a frame that is larger than the 1440 in Figma with the content still centered and control the behavior of the website in the websitetool like Webflow or Framer by installing a max width? I'm very new to this so not sure if Im describing it correctly. Thanks in advance.

Do you have to manually change the heading and text sizes for different breakpoints? And do you do that for "All H3 headings" or do you create a class for that heading? Thank you for the walkthrough

Website auto layout responsive?

Great video! Why you developed it manually when you can use the Figma to webflow plugin? Is there any downsides of using the plugin instead of manually developing ?

The only problem with this bro, is that in Webflow, 1440 is desktop large. On Webflow 1024 is considered desktop... then you have 1270 or something, 1440 and 1920 (1080P)... so if you design in Figma for 1440 seeing that as the base desktop it's going to be huge in Webflow's base desktop and not fit.

The best beginner WEBFLOW CMS tutorial I watched so far. Subscribed.

How did you make the image to be on top of the content? Webflow keeps putting the right side to be on the bottom

No more using Pixels! I recommend taking a look at my REMS video if you haven't already mastered responsive units. (Link under description)