Figma to Webflow - Complete Website Tutorial

📘 Free e-book "The Blueprint For Insanely Successful Webflow Designers" 👉 bit.ly/3wNZSN4
Learn Webflow the FAST way with our full Webflow Masterclass course 👉 bit.ly/3VQJFys
Level up your web design skills in Figma with our course, Figma for Web Designers 👉 bit.ly/46gcPvz
Build alongside Ran in Webflow by cloning the Figma project 👉 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 👉 bit.ly/33byV7L
🎨 Learn the Art & Business of Web Design. Check out all our courses 👉 bit.ly/3jMxocU
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
Ran's Instagram 👉 / ransegall
Thanks for watching our video!
#Figma #WebDesign #FluxAcademy

[@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!

[@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!

[@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!!

[@heathernowak1791]

Thanks for pointing out the Relume library! I hadn't come across that and my mind is BLOWN at the number of components available for free in that Figma file!!! Major time-saving potential right there!

[@wfwfwfwfwfwf]

Cheers for talking about Relume. Looks good.

[@theblowupdollsmusic]

Thank you for sharing. I was not aware of the Relume or Flowbase libraries. Game changed.

[@blondelchedjou6202]

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

[@windmaomao]

Amazing job! To be honest, by watching it, i'm also learning quite a bit of CSS tricks. Never know a `blending` is supported, crazy. THANK YOU.

[@joshuajia722]

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

[@FluxAcademy]

Very happy to hear!

[@tommasomariotti3342]

Great video! So clear and useful, great job!🔥👌🏼

[@BrantK147]

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

[@lunai3225]

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

[@jj-jo6wr]

How many years of coding?Do you feel regret no coding is required now?

[@lunai3225]

@@jj-jo6wr not at all, it's an advantage, anything you learn in life is in your toolkit to use, I could combine my coding knowledge with no-code to do advanced stuff for my projects

[@rah2023]

@@jj-jo6wr haha no coding is a joke. Type of projects we're working on, no code people are not allowed to touch it.

[@hitbox7422]

@@rah2023 well, the difference is that i don't need to painstakingly re-assemble entire module libraries in React just do render simple websites. Im a senior developer with over 8 years of experience with high- to mid level front- and backend languages, and i got to say that no-code environments like webflow take away a huge amount of work for me when it comes to compatibility, css-to-html structuring and overall accessibility for my clients in terms of wordpress alternative CMS. Just because you assume that "no-coders" got no competence in what they do, doesn't mean that it is a reality.

[@DreckzTV]

@@hitbox7422 It's refreshing to hear this mindset re-iterated. Over my years of web development I've found that each new framework with support is its own tool and different jobs can use a variety of tools. Sure building out a webapp tool for the marketing department using a MEVN stack wouldn't be terrible, but I've seen incredibly in-depth and useful tools using Wordpress, originally a "blog" framework, on intranet/private ip for modularity and have way easier time to customize without worrying about security of multi-tenant public access & scaling. I think certain tools, with the right support, can age like wine and become tasteful to our budgets of time and money with the right outlook.

[@mrtbgz]

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

[@jahongirrislikboev88]

Just excellent walkthrough. Thank you very much for the content!

[@rakshithrao7217]

Please make more website tutorials like this.

[@FluxAcademy]

will do!

[@SLApple-hp9ed]

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.

[@kaskas55]

Love the series. thank you, Ran!

[@yavor7607]

this is #1 video for beginers on the whole KZbin right now. niiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiice!

[@techwithjordan]

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

[@Ben-iz3eh]

Great video! The z-index trick was just what I needed for a project, so that was very timely. Is there a way for us to view the completed project on Webflow? Thanks!

[@DanStPeter]

Great video Ran! Can you create a similar, comparison video using REM's to build in Webflow? It would be very interesting and valuable to compare the two approaches building the same design. Thank you!

[@FluxAcademy]

Kabarza created a video on our channel about REM typography, check it out

[@DanStPeter]

@@FluxAcademy Thanks. I have watched Kabarza's REM video. It was very good. I thought a comparison of Ran's pixel-based approach vs. a REM approach building the same website would be informative and helpful.

[@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.

[@EnglishRain]

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

[@andrewrivers731]

Wow, thanks, Ran!!

[@Ed-ri8of]

Hey Ran, thanks as always. Great job team! Do you plan to upload a video about how to publish this site?

[@lawrencelabra540]

This was so helpful!! Thank you

[@aliyahya9388]

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

[@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!! :))

[@frictiongraphics116]

Awesome and thnx for this ❤️🍻

[@JehadiHellTransportAgency]

loved this video thanks for the lesson .........

[@KlaasVictor]

Thank you very much for this great tutorial!!

[@Raccoonov]

Very useful, thanks!

[@Belliferous]

Noticed that this video has enough spare border so mobile users can zoom in. Thanks for that. Would increasing your browsers view zoom get similar results?

[@marialinova8940]

Thank you for this tutorial!

[@karas.6876]

Are you planning on showing us how to make the website responsive? That's the main thing I'm struggling with at the moment.

[@VoyagesJapan]

Hi Karas, not sure if you've figured this out, but I was reading through the comments today and saw this one. I watched this video after the Flux Academy video and he goes over Responsive design i Webflow really well. It's more beginner level, but the way he teaches it will give the fundamentals you need to make this website responsive. Figured I'd pass it on. kzbin.info/www/bejne/d3ycn3Rujah1l68

[@brahmiuniyal]

Very Helpful videos! 😄 Thank you so much!

[@warpixeldev]

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.

[@christianjoelcaracas4180]

so much. Can’t wait to start making soft.

[@xyler9284]

Just change the max-width of the native container to your required width, which makes it easier to use.

[@PubgLover-lc6zm]

Earliest viewer to almost watched your entire video. Great Video

[@FluxAcademy]

Legend!

[@vamosaprenderlol1163]

It's crazy how to create the same site on Wordpress you need 10 hours because of the limitation of the Site and all Plugins you need to instal. Webflow it's so easy that i feel using Figma for Web Design.

[@J0PHIEL]

So after creating the design in figma, there's no way to just copy over the groups or figma file? We are basically recreating the design in webflow now but with functionality?

[@markhamilton8765]

Yes, that is correct.

[@CortezRP]

Would it then make more sense to do it in webflow and skip figma?

[@tangysyrup8827]

@@CortezRP this would cause total chaos in terms of the design.

[@WeiFinder]

@@CortezRP Much easier to do the initial design in Figma imho

[@eleratalkstoo123]

@@CortezRP exactly what I thought of, we a are just creating 2 website with on one result

[@aleksandrakomarova7710]

you are the best! Thnak you!

[@keithlancaster5489]

Nicely done

[@raindrops6342]

Amazing course. The instructions were very clear.

[@FluxAcademy]

Great to hear! Thanks

[@MadaraUchiha-ic6so]

I can't clone the project file @Flux

[@everydaynuggets]

THANK YOU!! ✌

[@slayertx]

I am so confused by this... You just rebuilt the site in webflow and didn't need figma at all. You didn't import a single thing at all.

[@jamesroberts8937]

No seriously, I don’t get the point of this either just do everything in webflow to begin with

[@amnankhalid6915]

Perfect work to share (y)

[@marcosltd]

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

[@FluxAcademy]

Glad it was helpful!

[@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!!

[@Xhami888]

Basically thay invite you in there workspace as a gust so you don't need to buy a webflow plan here's the more detail in this video kzbin.info/www/bejne/kKrVqpacgbWrjposi=2OfFv0FMuQlKYP-1

[@EricksonGaloso]

Thank you so much!

[@chensam2894]

pretty good 👍

[@emilekoffi5257]

Thanks you !

[@workers_without_border]

Hello Sir, for the second green BG-grad, I had to put it relative because 'Absolute position' was not functioning to pull it down to the bottom as I wish. I made it work but curious why. Could you please explain for me? Thank you so much for the video.

[@wesleygibson815]

Thanks Sir ... u r great

[@segunsamuelbabalola3216]

Thank you so much for what you've done . I could not download the figma . Where can i download from .

[@miladshojaei3678]

Hi there, thanks for your great videos, but why did you remove the Figma website design with Webflow tutorial?

[@MrGnorts]

tysm man

[@balorochristian5320]

Very thanks 😅

[@paulifedolapo6692]

Hi Ran, please i can't seem to find the link to download the resources for this video (the images in the figma file). I will like to follow along. Thanks man.

[@JD-fx7hj]

Hi how do you pass your design after is finish to real code like html and css for your website

[@benjamintang3568]

Hello - may be a silly question here, but why do we design in Figma and then again in Webflow? Wouldn't it save time by designing in Webflow straight away?

[@MinhAnh-gi1em]

It such a fantastic video, can you show me where you get the source of images in the Figma section?

[@valentinneufeld6182]

Nice

[@michaelomodele1240]

Why can't this be done just once and for all in Webflow instead of designing it first in Figma? It looks to me like duplicating the same work. The same processes seem to be basically repeated.

[@JavisDj7]

I want to center the logo in the middle and links at the right, can you make a video on how to do it?

[@priscillatagoe525]

Great video. Please where is the link to designing this website in Figma?

[@NaukaPoProstu]

I don't get it. Surely Designing in Figma or Dx to then Re-Produce it from scratch again is a bit...? Redundant? Is this the current workflow to build a website?

[@epicsseven7686]

It's not redundant because Figma and XD aren't html based. It's a design platform for users. It's the equivalent of doing a rough draft or drawing on paper and showing the client what you have. It's simply a drag and drop design platform that only takes a few minutes to layout a design as well as addot delete. You do this before you design a website that's html. This prevents time consuming and headaches

[@outpost31737]

I don't like using pixel values for type. Is there an option to use REM units instead?

[@hitbox7422]

I would recommend using dynamic media query REM calculations for webflow, and yes, font-size propertys accept REM as factorization unit. If you don't know how to set up media querys yourself, i would suggest to add the finsweet google chrome extension to your browser, this way you get a new option to choose from in webflow which can be used to generate those media querys within the webflow user interface and just copy paste it into your custom code section. This way you can generate dynamic values for the REM factorization depending on your breakpoint.

[@angelvelazquez1792]

Just curious if it is important to develop everything pixel perfect from Figma to Webflow?

[@mr.tallguy]

Basically man - thanks a lot for this tutorial 🤑

[@razvanmuresan6683]

how can i make the website scale. For example if I have a 21:9 monitor I want the images and text to scale up in order to fill my screen.

[@WeiFinder]

You'd still want most of your content centered so users aren't breaking their neck on your site. Also most 21:9 users section their windows left/right or left/center/right, etc which basically gives you multiple smaller screens in one monitor

[@Abdullahalmamun-bf5tc]

what do you use for screen recording?

[@smgraphics3012]

nice tutorial i subscribe your channel

[@jo69123]

Do you think that connecting a webflow page to a SiteGround custom domain could cause performance issues when loading the site?

[@kositakis0617]

i cant find the grid in my layout elements panel,its a lot different,i only have sectiom,container,quick stack , v flex and h flex? please i need help how do i fix this

[@adebayoelijah1041]

Thanks for this amazing resource. Please, I need you to send me the stater file so I can tag along, I can't access it on the link you provided in the description.

[@stearless]

Can anyone explain to me how to make those blurred bubbles overflow between 2 sections (since that's how it's designed in figma) but not overflow the viewport (effectively showing horizontal scrollbar)?

[@sarfaraznawaz7874]

For fonts 500 is medium, 600 is semi bold, 700 is bold.

[@mahmoudoluwafemi3]

Fantastic 😍, could you help with a link to clone the webflow project please 🥺

[@vickylondon1543]

Bobby Z I use the signature version but I tNice tutorialnk most of the stuff was also available in the producer edition (I bought that first). I am using

[@mansweepquo]

I have a problem on the buy button with the small dot inside of it. my dot is place outside the button. What do you think is the problem?

[@KachZz]

So if you have to manually redesign everything, what is Figma for then?

[@dan_rad]

Can I ask... Why would you create it in Figma only to redo your work in Webflow?

[@leratokuzwayo5878]

I was wondering the very same thing. My thinking was that elements already designed in Figma would simply be imported in someway into WebFlow?!?🤔

[@user-zi4xo5rc2w]

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

[@FluxAcademy]

Awesome, thank you!

[@J0PHIEL]

Got another question too, whats the best platform to build a crypto currency website? Can I do it all in webflow?

[@dmk-ki4ny]

The problem with those background circles is that after publishing the site there is a horizontal scroll appears, which is not visible in the "eye" mode when previewing.

[@movewithvictoria]

same here. how did you fix that?

[@dmk-ki4ny]

@@movewithvictoria Hi Victoria. Sorry for the delayed answer. Looks like the thing is in positioning. I don't remember exactly, but I think I set a relative position for the top-level page-wrapper box (I added it myself, it's not shown on video) and an absolute position for the bg-grad box and every circle in it. To make it work, I changed Ran's structure a little bit. But it's easier to show than describe. If you need, I can show you the screenshots from my admin panel. Just let me know.

[@movewithvictoria]

@@dmk-ki4ny hey, thanks for your answer. I figured it out by placing the circles in a new relative div and have the overflow hidden and it worked

[@10013paul]

Sorry i am new on this and i wanna ask you how do we find this site / blog after the design? How do we find this on Google ?

[@samirakh2640]

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

[@profeRo.]

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

[@thaorlinh]

Does anyone have problems with background gradient? I followed every steps but the purple circle is still hidden underneath page content wrapper

[@riaamoorthy6743]

Hello, when I tried to copy the benefit section, to move the image to the left and the content to the right, webflow just doesn't allow me to make the switch even though mine is exactly the same -- a 2 col grid. Does anyone know why?

[@cubedesigne]

What do you camera using

[@abubakarqoreebullah895]

I'm unable to download the asset file for this tutorial, their nowhere for me to input my name and email on the website

[@doobiedouglas]

Same.......

[@shubh8537]

Hi I haven't watch the full video yet, I did watch the previous Figma one and have made the design there. I had a question which is what is the point of designing in Figma if we have to redo everything on Webflow? ( This might seem like a stupid question but I am just trying to understand things better)

[@laco3042]

Figma is to design a prototype of your website. A prototype lets you test your layout and design theory efficiently. Once it's perfected you use it as a guide for yourself to build the site in Webflow.

[@shubh8537]

@@laco3042 I see that makes a lot more sense thank you

[@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?

[@JaideepMultani]

I have an issue with the nav bar not being at the top of the screen and being on top of the text and image

[@astralisfan8725]

Can you explain why you need to re-design a Figma design to webflow?

[@nati3914]

that's what I was wondering... why dont use only Webflow 😵‍💫

[@monte1000]

Has anyone had any experience using the figma to web flow plugin? Does it take everything you’ve designed and output it in the same way?

[@michabednarski5555]

There's a problem with coping and pasting the content form Figma to Webflow. CTR+C does not seem to work ...

[@AshcanComicsPub]

It looks like everything designed in Figma is being redesigned with function within Webflow. Why was Figma used first? Couldn't this be built in Webflow alone? Also, I saw you used Relume in a different video. Does Relume now cut out a lot of these steps?

[@virav9498]

Why do I want to use Figma and Webflow together? Can I publish my site from just Figma?

[@fritzieflague9178]

I managed to make a simpel rythm in 3 hours… I tNice tutorialnk I will try more so I can get more EXP points ;D