Figma to Webflow - Complete Website Tutorial

📽️ CHAPTERS
00:00 Introduction
01:05 - Exporting from Figma
01:50 - Project setup
04:00 -Section & Container setup
05:40 - Building the Hero
12:20 - Add Navigation
27:58 - Background Gradients
33:58 - Responsiveness
39:50 - Add animations
45:27 - Content sections
53:41 - Blend modes
01:05:41 - Newsletter form

⬇ If you would like to watch more Figma and Webflow Tutorials, please let us know in the comments ⬇

📱 Find us on SOCIAL MEDIA

Thanks for watching our video!

#Figma #WebDesign #FluxAcademy

[lunai]

Coming from a coding background & as a front-end dev, this is literally making everything I was doing into a piece of cake haha! Thanks for the tutorial

[Reapertips]

What a fantastic video, seriously! – especially cause you showed all the process of designing it all in figma first. With these two videos, anyone can start building their sites. Thank you!

[rakshithrao]

Please make more website tutorials like this.

[joshuajia]

Perfectly done, I have used Webflow for 2 years, I still learned something!

[MarcelousTV]

Thank you for providing such a thorough tutorial on Figma and Webflow. This provided much needed context of what all is involved in the process of moving websites from the prototyping to design phases. I watched another tutorial by the developer of Relume with this same process. I think it would help your viewers to see this process using the Relume library which exist as a kit in Figma and as a component library for Webflow. Seeing both of these really cemented my understanding and gave me great options for both building from scratch and using pre made components, ultimately mixing the two for the best of both worlds. Thank you!!

[techwithjordan]

Coming from back end CS, I gained so much knowledge from these two videos

[warpixelcreative]

Man Webflow is the shit. Webflow is literally what we've been needing since the beginning of web development. It is literally the GUI of web development. Like GVIM is for vi. Github GUI or Tower is for git. Without limits like all those other things like Wix and Squarespace.

[zupixd]

One of the most useful tutorials I watched. I am totally new to Webflow and thanks to you I got a grasp of the fundamentals. Thanks for the tutorial!

[blondelchedjou]

The best webflow teacher, I am learning a lot of things, thank you.

[SLApple-hped]

Webflow is something like Adobe Dreamweaver but more intuitive. It's helpful to reduce my coding time. I will consider the switch to Webflow. Thanks for sharing this video.

[EnglishRain]

Thank you for providing link to part 2 in description of part 1

[heycarrrl]

I want to buy the course - but you keep throwing up all this free GOLD - ive been able to learn Figma + (basic) Webflow and create a (pretty dope) site! Thanks for all you and your team are doing over there.

[BettyHunter-ue]

I appreciate how easy you make things to follow!

[stenliosko]

buddy...I just directly and almost instantly understand everything you are sharing with us...one amazing quality of such to transmit knowledge :))..pure pleasure to listen and learn with you!! THX!! :))

[BrantK]

Thanks for the tutorial. Having experience with HTML and CSS really helped me understand Webflow. Also you're an awesome teacher :)

[mrtbgz]

Blending modes for images are now working as its supposed to be.. Good job webflow!!

[Yogakrishanthi]

Great tutorial. I followed your figma tutorial as well. I learned lots of things. Make more videos like this.

[yavor]

this is #1 video for beginers on the whole YouTube right now.

[aliyahya]

you should write part 2 in the title, , amazing explain an easy to understand

[IAMCHIDERA]

Could you please do a video of the basics of starting web flow free lancing?
For example
What plan to buy
How would the client buy a plan if they need to
How to transfer the site to them
Do you still host the website on your account?
Do they pay once or twice

Thanks!!