Master Responsive Layouts Using Figma and Webflow

In this tutorial, we'll walk you through the process of turning your Figma designs into responsive Webflow layouts. Learn practical tips and techniques that will help you create adaptable websites with ease. If you're looking to improve your web design skills, this video is for you.

Take a look at REMS vs Pixels, vs VW

💻 Explore Figma Components 👇

🛠 Try Figma 👇

🛠 Figma For Pros 👇

0:00 Figma Designs
2:15 Layout Divs
4:30 Scaling To Mobile
6:20 Making It Responsive

🚀 Subscribe for more weekly design content

🎥 What I use in my videos!

📄 Bonsai Referral (try for free)

👨‍💻 Connect with me

🌎 Socials

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!

[ArnauRos]

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

[TheXocx]

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

[dunkley]

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

[TomeyTran]

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

[uiadrian]

Looks clean as heck! Great tutorial Arnau 👏🏼

[finncampbell]

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 🔥

[carlosmartin]

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

[rasula]

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 ?

[Michael.design]

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.

[User_hoalheia]

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

[Andrew-tjqh]

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

[Adam]

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

[Andrew-tjqh]

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?

[brandinglab]

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

[goldenant]

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.

[fiftyshadesofurban]

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.

[Glebbi]

is there a template for the figma file you used?