Figma to Webflow – Complete Website Tutorial
July 2, 2024 2024-07-02 9:56
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
π½οΈ 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 β¬
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
source
Comments (24)
@Ahlem_DMC
Fascinating
@user-mm3xo8sn6c
You are Jesus cause you saved my life Thank you so much
@charithjayanath1292
Thank you for the video, I'm inspired for this video so muchβ€
@xChikyx
So, there's no easy way to "export" what you did in Figma to web?
@jdfp605
i cant download the assets if i click on the link right above the chapters there stands page not found can anyone help me?
@samirakh2640
Bonjour
svp quelle version ce logiciel figma
parce qu'il ya beaucoups d'options que je n'ai pas dans mon figma
@user-gs1rc4ht1d
The build along link leadfs to Error 404, please can you look into this
@user-zi4xo5rc2w
Great tutorial. I followed your figma tutorial as well. I learned lots of things. Make more videos like this.
@homegardeninghealth
. 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.
@homegardeninghealth
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?
@tobibolumole5269
Nice tutorial but would have been nice if you shared the figma file here
@arisethee
hover
/ΛhΙvΙ/
@gcbpux
I love your tutorials, if Only I can afford the masterclass <3
@sircasino614
Aaaaannd within a year they changed some UI already. That never makes tutorials easier…
@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!! :))
@wanibng
37:30 I have a problem changing the order of the elements, it doesn't do anything when I click 'First'. Help please! Thanks
@Ro_violin
which shortcut or key do u use to close the space between the grids on minute 36:17 ?
@techtalk465
where is the figma file
@marcosltd
Thanks so much for this,such a great and informative video!
@HinesEddy
51:00
@user-ct1wt8eb3k
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
@sumansherpa3461
Center this element is not working
@martinmillinger8845
Why do you design it in Figma first? Why not directly in Webflow?
@cassieszenzone
Why Cant I start right away in webflow?