From Figma to Webflow (Full Beginner Course)

In this video, we’re going to take this very cool landing page from our Figma For Web Designers course and we’re going to fully develop it using Webflow.

Here's the Figma file to follow along:

CHAPTERS
00:00 Intro
01:20 Analyze the design and plan the structure
05:03 Export the styles and colors
09:30 Export the image assets
16:24 Build the page section-by-section
20:19 Hero section
52:58 Meet Forecaster section
57:35 Navigation section
01:05:00 Features section
01:19:54 Membership section
01:35:21 FAQ section
01:43:18 Footer section
01:48:43 Make it responsive

📱 Find us on SOCIAL MEDIA

[shishukumarguin]

25:06 This happened because in the Figma file the max width was 1312px and in Webflow you set it to 1300px. That 12px difference is what caused it to break the line into 4 lines.

[justnightfurry]

Time to learn Webflow, finally there's tutorial that fully practical!! Thanks, Ran

[NarayonBarmon]

This tutorial taught me many new tips and techniques for designing websites efficiently in Webflow. Thanks, Ran

[TomasCech-xr]

Love the way you keeping the sizing in pixels. Making it that vintage vibe.

[mariusrusulet]

Learned a lot tbh, loved the grid with 12 columns trick!

[nasirsiddique]

it's easy for coders to understand these stylings, columns, and also other no code builders....
but nice share i luv this ran....

[ATanyaS]

Thanks Ran❤
You Best*, as always, are on top and your work. Thank you and your team for your support❤

[sharpeykong]

Thank you Ran, I started as freelancer web designer last year, I learnt so much from you! Your explaination is very clear and profesional! That's why i decided to buy webflow 4.0 course.

[Srikaleeswarar]

Amazing. Very used Beginner Course.. ThANKS

[jakelikewise]

Thanks for sharing! Super helpful to see how you use Webflow, keeping classes organized, and streamlining decisions.

[ohiuii]

I’ve got just one week to learn Webflow and your content is seriously saving my life—thank you!! 🙌😭

[MrWonderstuff]

Great stuff. I am reconsidering changing my own workflow to the Rulume/Figma/Webflow and this and other Flux videos have really helped me get a sense of whats needed. I'm a designer with CSS/Html knowledge (have used Pinegrow+Bootstrap+custom code before) so it all made sense to me. Thanks for all the videos.

[culinaryinspire]

Okay 12 minutes after upload and I am here exited to watch this!
I am definitely going to become a successful web designer in the next 3 months. Like my comment so I can come back in 3 months with an update 🎉

[MaximilianoUlivieriYouTuber]

Hi! I really appreciate your content and the way you explain how Figma works — it’s super helpful.
I was wondering if you’re planning to add the new feature that many creators are using, where viewers can listen to the audio in Italian thanks to AI dubbing.
It would be amazing to follow your videos more easily in my native language. Thanks a lot!

[mirka]

Thank you Ran. I learned a lot about Webflow. 👍

[giberlav]

Regarding the Font import, you imported variable font in Webflow and styles imported from Figma are for non variable fonts ( Medium, Semi bold ), thats why Webflow didn't pick up the Semi bold styling for the H1. If you imported normal font family it would pull the correct style for H1.

[dipsikhadutta]

Such a helpful video❤
But what should I do if I want to change the background color or body color from section to section?

[shishukumarguin]

After using Framer, Webflow is just 🤯🤯🤯

[ivanarangoperez]

amazing videos tutorials, man you rock, thanks!

[valenpeco_]

1:22:19 why would u use block instead flex? Isn't flex better and more useful than a block? I would use flex every time I wanna wrap elements. I'll be waiting for an answer, cheers!