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!
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 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 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.
@@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.
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.
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!!
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!
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.
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!! :))
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.
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!!
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 ruclips.net/video/ZyrycfLPxX8/видео.htmlsi=2OfFv0FMuQlKYP-1
@jamesroberts8937 the reason why you design in figma is because it's the quick and easy Imagine building a house without drawing the plans out first, and when you're almost done, you notice some things like the toilet can be better placed. You'll have to break down everything in the way. Same thing with websites.
@shan.69 ... just build it in webflow. If you can't import it, then it's just waisting time. This is only useful when you have designers who don't build the websites.. if your website builder is in on the design process... they can just build it as needed. Again if it was able to import then it would be cool...but the fact figma lets you do things webflow can't also opens you up to the possibilitie of a designer promising something that can't be done and that's way worse imo.
@@slayertx that is why you need a designer who understands the limits of webflow and works within those during the very design process within Figma. That's how I do it at my place with most tools. Design on Figma is great for quick iteration because you can just move shit around and do anything you want in minutes and get back to client/manager for feedback, and once frozen on those, implement that into your Webflow recreation whereas it can be much slower if started from Webflow directly. Ofc an experienced designer can just start within Webflow if they already know what the client wants and the client knows what they want as well lol. There is also a plugin now for Figma-Webflow which kinda hastens the process even more, albeit perhaps needing some cleanup after, but still a good backup to fall back on.
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?
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?
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.
Because creation process is much harder in Webflow than in a designtool like figma. I did as a beginner the same. Tried to “create” and design it directly in the backend. But that costs hours more
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?
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!
your tutorials are really great for someone that's a beginner like me in figma and webflow. I just have one question. :D Can we not upload what we have done from figma to Webflow? Just an honest question. Cause it feels like you have to create the whole thing you created in figma onto Webflow? sorry for the question but yea just a beginner learning and asking questions :D thanks for your reply in advance. thanks.
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 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.
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?
thank sir. Thank you for answering. So please I have another question. so building a website for a client on webflow or wordpress am I going to create a new email address and then open a new account on the CMS then after building the site and launching it I will now give it to the client the logins and everything So he can access the website or how do they do it. because I don't understand how it is done I've never worked for anybody but I want to start soon.
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.
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)
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.
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.
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.
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
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 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.
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.
Bro designing and developing are different things, designing is to present the idea and developing is to make that idea live. There are many reasons to design first like you have developed it in webflow and then the client rejects the idea and tells you to make new. So first design is given to client if that gets accepted then development begins
@@danishooo7_ Thanks for your explanation. I was a complete noob to web development. I used to think customizing a template or theme was all there is to it. Happily I've known much better a year later on.
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
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?
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
Can anyone answer me I have some confusion, if webflow has same tools or features like figma so can we create our website directly on it ? Why we need figma if we need to rebuild our website on webflow?
I still don’t understand why begin with Figma if you’re redoing everything again? (I'm a total newbie and I still don't know anything about these programs... I'm a bit hopeless but I do desire to live off of this.)
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!
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
How many years of coding?Do you feel regret no coding is required now?
@@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
@@jj-jo6wr haha no coding is a joke. Type of projects we're working on, no code people are not allowed to touch it.
@@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.
@@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.
Perfectly done, I have used Webflow for 2 years, I still learned something!
Very happy to hear!
Coming from back end CS, I gained so much knowledge from these two videos
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!
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.
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!!
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!
Cheers for talking about Relume. Looks good.
Thank you for sharing. I was not aware of the Relume or Flowbase libraries. Game changed.
The best webflow teacher, I am learning a lot of things, thank you.
Please make more website tutorials like this.
will do!
this is #1 video for beginers on the whole RUclips right now. niiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiice!
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.
Thank you for providing link to part 2 in description of part 1
I appreciate how easy you make things to follow!
Blending modes for images are now working as its supposed to be.. Good job webflow!!
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!! :))
Thanks for the tutorial. Having experience with HTML and CSS really helped me understand Webflow. Also you're an awesome teacher :)
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.
you should write part 2 in the title ,, amazing explain an easy to understand
Great tutorial. I followed your figma tutorial as well. I learned lots of things. Make more videos like this.
Awesome, thank you!
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!!
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 ruclips.net/video/ZyrycfLPxX8/видео.htmlsi=2OfFv0FMuQlKYP-1
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.
No seriously, I don’t get the point of this either just do everything in webflow to begin with
@jamesroberts8937 the reason why you design in figma is because it's the quick and easy
Imagine building a house without drawing the plans out first, and when you're almost done, you notice some things like the toilet can be better placed. You'll have to break down everything in the way. Same thing with websites.
@shan.69 ... just build it in webflow. If you can't import it, then it's just waisting time. This is only useful when you have designers who don't build the websites.. if your website builder is in on the design process... they can just build it as needed. Again if it was able to import then it would be cool...but the fact figma lets you do things webflow can't also opens you up to the possibilitie of a designer promising something that can't be done and that's way worse imo.
@@slayertx yeah i do have to agree w the last part
@@slayertx that is why you need a designer who understands the limits of webflow and works within those during the very design process within Figma. That's how I do it at my place with most tools. Design on Figma is great for quick iteration because you can just move shit around and do anything you want in minutes and get back to client/manager for feedback, and once frozen on those, implement that into your Webflow recreation whereas it can be much slower if started from Webflow directly. Ofc an experienced designer can just start within Webflow if they already know what the client wants and the client knows what they want as well lol. There is also a plugin now for Figma-Webflow which kinda hastens the process even more, albeit perhaps needing some cleanup after, but still a good backup to fall back on.
Hey Ran, thanks as always. Great job team!
Do you plan to upload a video about how to publish this site?
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?
Thank you very much for this great tutorial!!
Amazing course. The instructions were very clear.
Great to hear! Thanks
I can't clone the project file @Flux
Thank you for this tutorial!
Can you explain why you need to re-design a Figma design to webflow?
that's what I was wondering... why dont use only Webflow 😵💫
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.
what is the benefit from figma if you create evrything again in webflow ?
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?
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.
Wow, thanks, Ran!!
Thanks but I'm confused, why you didn't just create it in webflow itself?
Because creation process is much harder in Webflow than in a designtool like figma. I did as a beginner the same. Tried to “create” and design it directly in the backend. But that costs hours more
So if you have to manually redesign everything, what is Figma for then?
Why do I want to use Figma and Webflow together? Can I publish my site from just Figma?
Earliest viewer to almost watched your entire video. Great Video
Legend!
Very Helpful videos! 😄 Thank you so much!
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?
Yes, that is correct.
Would it then make more sense to do it in webflow and skip figma?
@@CortezRP this would cause total chaos in terms of the design.
@@CortezRP Much easier to do the initial design in Figma imho
@@CortezRP exactly what I thought of, we a are just creating 2 website with on one result
This was so helpful!! Thank you
So guys how does button works
It shoud have some link on it . Right ?
And how you complete the website and its actuly a website
so much. Can’t wait to start making soft.
Thanks so much for this,such a great and informative video!
Glad it was helpful!
Just excellent walkthrough. Thank you very much for the content!
Thank you so much for what you've done . I could not download the figma . Where can i download from .
Thank you for the video, I'm inspired for this video so much❤
Love the series. thank you, Ran!
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!
you are the best! Thnak you!
your tutorials are really great for someone that's a beginner like me in figma and webflow. I just have one question. :D Can we not upload what we have done from figma to Webflow? Just an honest question. Cause it feels like you have to create the whole thing you created in figma onto Webflow? sorry for the question but yea just a beginner learning and asking questions :D thanks for your reply in advance. thanks.
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!
Kabarza created a video on our channel about REM typography, check it out
@@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.
It such a fantastic video, can you show me where you get the source of images in the Figma section?
Fantastic 😍, could you help with a link to clone the webflow project please 🥺
Great video. Please where is the link to designing this website in
Figma?
Very useful, thanks!
What's the point of designing in Figma if you have to do it all again in Webflow? Genuinely curious.
I love your tutorials, if Only I can afford the masterclass
Our updated Webflow Masterclass is on sale this week for 30% off 🎉
loved this video thanks for the lesson .........
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?
Great video! So clear and useful, great job!🔥👌🏼
Hi there, thanks for your great videos, but why did you remove the Figma website design with Webflow tutorial?
Perfect work to share (y)
thank sir. Thank you for answering. So please I have another question. so building a website for a client on webflow or wordpress am I going to create a new email address and then open a new account on the CMS then after building the site and launching it I will now give it to the client the logins and everything So he can access the website or how do they do it. because I don't understand how it is done I've never worked for anybody but I want to start soon.
THANK YOU!! ✌
I want to center the logo in the middle and links at the right, can you make a video on how to do it?
Thank you so much!
Thanks Sir ... u r great
Can I ask... Why would you create it in Figma only to redo your work in Webflow?
I was wondering the very same thing. My thinking was that elements already designed in Figma would simply be imported in someway into WebFlow?!?🤔
Nicely done
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.
Just curious if it is important to develop everything pixel perfect from Figma to Webflow?
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)
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.
@@laco3042 I see that makes a lot more sense thank you
Thanks you !
Awesome and thnx for this ❤️🍻
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.
Basically man - thanks a lot for this tutorial 🤑
What about working from the Webflow Figma plugin?
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.
For fonts 500 is medium, 600 is semi bold, 700 is bold.
Hi how do you pass your design after is finish to real code like html and css for your website
Do you think that connecting a webflow page to a SiteGround custom domain could cause performance issues when loading the site?
Very thanks 😅
tysm man
why you redo the layouting? you already do that in part one?
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
Got another question too, whats the best platform to build a crypto currency website? Can I do it all in webflow?
pretty good 👍
Just change the max-width of the native container to your required width, which makes it easier to use.
I didn't show how to do it with whole responsive.And also plz make a video on how to use css units correctly while making a responsive website
Are you freelancer
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.
same here. how did you fix that?
@@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.
@@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
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.
Bro designing and developing are different things, designing is to present the idea and developing is to make that idea live. There are many reasons to design first like you have developed it in webflow and then the client rejects the idea and tells you to make new. So first design is given to client if that gets accepted then development begins
@@danishooo7_ Thanks for your explanation. I was a complete noob to web development. I used to think customizing a template or theme was all there is to it. Happily I've known much better a year later on.
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.
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
The "where did it go" part is so ryt now
You mentioned a kickstarter project. What is that?
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?
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
Can anyone answer me I have some confusion, if webflow has same tools or features like figma so can we create our website directly on it ? Why we need figma if we need to rebuild our website on webflow?
I'm unable to download the asset file for this tutorial, their nowhere for me to input my name and email on the website
Same.......
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 ?
Does anyone know where they get those icons from or if they are made with artificial intelligence?
Amazing. I can't follow Webflow University even if someone put a gun to my head. This was perfect
I still don’t understand why begin with Figma if you’re redoing everything again?
(I'm a total newbie and I still don't know anything about these programs... I'm a bit hopeless but I do desire to live off of this.)