WP Tutorials

Figma to Webflow – Complete Website Tutorial

Figma to Webflow – Complete Website Tutorial

πŸ“˜ Free e-book “The Blueprint For Insanely Successful Webflow Designers” πŸ‘‰ https://bit.ly/3wNZSN4

Learn Webflow the FAST way with our full Webflow Masterclass course πŸ‘‰ https://bit.ly/3VQJFys
Level up your web design skills in Figma with our course, Figma for Web Designers πŸ‘‰ https://bit.ly/46gcPvz

Build alongside Ran in Webflow by cloning the Figma project πŸ‘‰ https://bit.ly/3n7hcVs

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 ⬇

Don’t forget to subscribe to our channel for more Design Content. Click here πŸ‘‰ https://bit.ly/33byV7L

🎨 Learn the Art & Business of Web Design. Check out all our courses πŸ‘‰ https://bit.ly/3jMxocU

πŸ“± Find us on SOCIAL MEDIA
Flux Academy’s Instagram πŸ‘‰ https://www.instagram.com/flux.academy/
Ran’s Instagram πŸ‘‰ https://www.instagram.com/ransegall/

Thanks for watching our video!

#Figma #WebDesign #FluxAcademy


Comments (24)

  1. Fascinating

  2. You are Jesus cause you saved my life Thank you so much

  3. Thank you for the video, I'm inspired for this video so much❀

  4. So, there's no easy way to "export" what you did in Figma to web?

  5. i cant download the assets if i click on the link right above the chapters there stands page not found can anyone help me?

  6. Bonjour
    svp quelle version ce logiciel figma
    parce qu'il ya beaucoups d'options que je n'ai pas dans mon figma

  7. The build along link leadfs to Error 404, please can you look into this

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

  9. . When I clicked on the link to clone the Figma project, the pages opened and there was an instruction to input email, but nothing was displaying there, no box to input email. what could be the issue ? it's the same thing with part 1 of this video, I couldn't see a box to input my email. Please fix.

  10. when I clicked on the link to clone the Figma project, and the page opened, I couldn't see where to input my email to receive the file. yet the instructions are there. what could be the issue?

  11. Nice tutorial but would have been nice if you shared the figma file here

  12. hover

  13. I love your tutorials, if Only I can afford the masterclass <3

  14. Aaaaannd within a year they changed some UI already. That never makes tutorials easier…

  15. 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!! :))

  16. 37:30 I have a problem changing the order of the elements, it doesn't do anything when I click 'First'. Help please! Thanks

  17. which shortcut or key do u use to close the space between the grids on minute 36:17 ?

  18. where is the figma file

  19. Thanks so much for this,such a great and informative video!

  20. you don t wanna know how many times i wanted to smash my pc and set it on fire during this tutorial that i didin t even finish

  21. Center this element is not working

  22. Why do you design it in Figma first? Why not directly in Webflow?

  23. Why Cant I start right away in webflow?

Leave your thought here

Your email address will not be published. Required fields are marked *

Enable Notifications OK No thanks