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.
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!
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!
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.
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.
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.
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!! :))
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?
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
@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.
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.
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.
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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ZyrycfLPxX8.htmlsi=2OfFv0FMuQlKYP-1
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 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 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.
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.
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 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.
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!
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.)
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
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?
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.
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.
This isn't really a Figma part 2 so much as it's a "how to build the exact same thing in Webflow." It doesn't really build on Figma at all, which is what you implied in the part 1.
@13:31 im facing a problem. when i try to move the navmenu from preset navbar container to custom container it gives error: "navlink can only be placed in Navbar". Pls help a beginner out.
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.
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?
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
