This is my first webflow tutorial, and man webflow is so much easier when you have already mastered the autolayout in Figma. It all syncs now.❤️🔥 I'm all fired up to begin with webflow.
Great tutorial, but few questions remain, to publish this website how do you make those elements interactive? Like buttons and etc. do you just set the functions later on? And for other pages of the website the procedure will be the same? Also if I want to export something more advanced to webflow, like neomorphic design, or frosted glass elements would it work this way? Thanks
Great as always! I normally use website builders and try to start from templates and components, usually they have something inside the software that would look similar than the design. (In case the web design doesn't need to be fully customized)
Yup you can do, but it will be more hectic. As you can edit any thing of figma very very fast than webflow. You don't need to think much about deleting or adding new thing in figma but same alterations in webflow will ask you more time. Figma is like blueprint for webflow
I guess I don’t understand...why not just do this all in Webflow to begin with? All the layout and design tools are right there. You can use placeholder images and just design them outside of Webflow as you’d have to do anyways is Photoshop, Illustrator, Figma, XD or wherever. I guess what I’m saying is the purpose of Webflow is to design and build the actual site at the same time. Plus there are great UI kits for free and some paid that bring functional components already ready for designers not looking to worry about code.
Think of it how a tattoo artist traces the design before filling it in and fleshing things out (pun intended). I used to ok at design and then got amazing once I learned to put in the work OUTSIDE of webflow.. then port if over. It's counterintuitive but so much faster and INCREASES your creativity.
Perfect, but i have to ask, why i have to do the design in Figma then to Webflow? I will start directly with Webflow and i will skip ⏭ Figma and that will save my time.
You really can, but going through figma, (maybe even pencil& paper to figma to webflow) gives you control and creativity as a designer than just following 'templates on webflow. Although a good knowledge of webflow is required to know what's possible or not. You don't want to come up with an overkill on figma and find out you can't implement using webflow
Because you will save more time if you have a guide of your design that you will develop in Webflow. If you go directly on development, what will you follow?
@@kaskas55 No, I will not develop any thing in Webflow because the Webflow almost like Figma, no code and it’s easy to use, so what I will do in Figma I will do it directly in Webflow better, But I am with you I will use Figma/Xd if I will develop this in one of the codes editor
I'm still kind of confused smh lol I've watched tons of videos, still can't get passed the styles guide. I am not a designer or a developer so I'm basically lost at the moment
I know this is supposedly the simplest way to go from Figma to Webflow but this is stupid that there's still no better solution, plugin or intergration between the two. This could almost make Figma irrelevant if Webflow was so limited and unpractical for design
Hello Punit, Thank you for the video it was amazing to watch, I have one question, I'm planning to build a webapp in webflow is that a good idea? because the web-app backend will be in PHP, can. guide me? can we use It or no? Thanks.:)
This is nice...I remember purchasing a more detailed video tutorial on udemy titled "from figma to webflow by Valko. Very nice tutorial filled with lots of projects on figma and webflow.
I took that course too! It helped understand how Webflow works and now with the help of this tutorial we can speed up the process with our deep knowledge and short cuts.
hmm not that great. You basically rebuilt it in webflow. Using figma to get images set to the right size for webflow templates. Seems like you might as well skip figma?
Good web design has a visual beginning. I used to skip this process.. it's way more efficient to design it w/ no constraints then just tweak things when you upload it. I promise you.
This is dumb. I just watched you design a website twice, you never converted it... with Anima, you can ACTUALLY convert Figma to Code and upload to webflow.
Bro I feel that I was a noob in webflow . You made me pro in Just 15 minutes . I love the way you teach .
MY JAW IS ON THE FLOOR. THANK YOU FOR THIS VIDEO WOW
I've had this mental block to get started with webflow for months, this tutorial is a god-send, thanks for putting together this tutorial!
LOVE THIS MANS HELP AND CHANNELS!!!!!
in 11 seconds I realised I love this guy and the tutorial and I instantly subscribed
This is not conversion from Figma to webflow, don't misguide people.
Wow wow wow - third eye blown. This is an amazing tutorial!
AWESOME TUTORIAL!!!
This is my first webflow tutorial, and man webflow is so much easier when you have already mastered the autolayout in Figma. It all syncs now.❤️🔥 I'm all fired up to begin with webflow.
This was an amazing tutorial Punit! Lovely way of teaching in such a short space of time. Thank you for this 👊🏽
To be honest, my on To-do list for today was to learn webflow😂😂 but I stumbled on this video. Thank you very very much🙏
GREAT TUTORIAL! FANTASTIC♥
Really looking for this, great video. Internet could be more worse without you😅 . Thanks man🖖
This was needed rn! Thanks for the upload!
Thank you so much for your explanation 👍
You are awesome Punit thank you!
I can't believe I learnt webflow within mins
You are the best Punit, it's a life changing tutorial man, keep creating
Punit, Great video. Thanks for sharing this video
Great tutorial, but few questions remain, to publish this website how do you make those elements interactive? Like buttons and etc. do you just set the functions later on? And for other pages of the website the procedure will be the same? Also if I want to export something more advanced to webflow, like neomorphic design, or frosted glass elements would it work this way?
Thanks
Amazing vid! Very nice tips and tricks1 Thanks a lot Punit!
Very clear explanation and demonstration. thank you
thank you for this tutorial, it is very useful and practical, all we need to do is to get familiar with webflow now ...
You have made it so easily now I will definitely get the job I wanted thank you so so much lots of love❤
What about when i don't use any ui kit. I designed a website by myself, then how will i do on webflow
YESSSS FINALLY !!! THANK YOU 😄
This is so smart. 👌🏾
this is so helpful! i love your videos, thank you!
Great as always! I normally use website builders and try to start from templates and components, usually they have something inside the software that would look similar than the design. (In case the web design doesn't need to be fully customized)
dumb question but, how did the figma layout appeared in webflow?
I have a question. We can do the hole design in webflow instead of figma?
Yup you can do, but it will be more hectic.
As you can edit any thing of figma very very fast than webflow. You don't need to think much about deleting or adding new thing in figma but same alterations in webflow will ask you more time.
Figma is like blueprint for webflow
Let's see how well the webflow converts to a real, live working website. I'd love to see the code output.
With webflow you are already coding your "real, live working website"
bloated code, but with expertise you can work around all that. Drag and drop, that's it
Oh this is madness 😊😊😊😊😊😊😊
This was extremely helpful thanks a lot!
I'm facing a problem of exported graphics from figma are bluring out while building website , how can I solve this ?
Hi , can this be compiled on my iPad Pro?
I want to use the Figma design that the client already has, how to do that?
Hi sir you are best👍👍 i want to ask is there any course to learn figma and made logo like in adobe illustrator into figma???
You should stick with Adobe Illustrator for that kind of work
thank to punit -but are you saying this site hosting and click to button than prototype, than response also
Thank you
I guess I don’t understand...why not just do this all in Webflow to begin with? All the layout and design tools are right there. You can use placeholder images and just design them outside of Webflow as you’d have to do anyways is Photoshop, Illustrator, Figma, XD or wherever.
I guess what I’m saying is the purpose of Webflow is to design and build the actual site at the same time. Plus there are great UI kits for free and some paid that bring functional components already ready for designers not looking to worry about code.
Think of it how a tattoo artist traces the design before filling it in and fleshing things out (pun intended). I used to ok at design and then got amazing once I learned to put in the work OUTSIDE of webflow.. then port if over. It's counterintuitive but so much faster and INCREASES your creativity.
100% no need for Figma. The only true loss is the time I won’t get back from watching this video.
Impressive...................
Will it be responsive?
Great Teaching skill Brother, Thanks for this amazing content it helped me a lot❤️.
Glad to hear that!
Perfect, but i have to ask, why i have to do the design in Figma then to Webflow? I will start directly with Webflow and i will skip ⏭ Figma and that will save my time.
That’s what I’m thinking too but I think Figma is helpful for the conceptual phase of design and for team collaboration
You really can, but going through figma, (maybe even pencil& paper to figma to webflow) gives you control and creativity as a designer than just following 'templates on webflow.
Although a good knowledge of webflow is required to know what's possible or not.
You don't want to come up with an overkill on figma and find out you can't implement using webflow
Because you will save more time if you have a guide of your design that you will develop in Webflow. If you go directly on development, what will you follow?
@@kaskas55 No, I will not develop any thing in Webflow because the Webflow almost like Figma, no code and it’s easy to use, so what I will do in Figma I will do it directly in Webflow better, But I am with you I will use Figma/Xd if I will develop this in one of the codes editor
Thank you so much, that’s genius!
Excellent….
I'm still kind of confused smh lol I've watched tons of videos, still can't get passed the styles guide. I am not a designer or a developer so I'm basically lost at the moment
i need to watch this video. I was using instapage for my business until they increased the price like %1300. I wanna learn webflow so bad now.
I do not enjoy the video, I enjoy video and you, God bless !
you haven't talked about the responsive part
Adobe xd to weblow this will great help
thx!!!!
Why is the mask important at the first part?
I know this is supposedly the simplest way to go from Figma to Webflow but this is stupid that there's still no better solution, plugin or intergration between the two. This could almost make Figma irrelevant if Webflow was so limited and unpractical for design
Use relume library.
Hello Punit, Thank you for the video it was amazing to watch, I have one question, I'm planning to build a webapp in webflow
is that a good idea? because the web-app backend will be in PHP, can. guide me?
can we use It or no?
Thanks.:)
Yes, you can export your frontend code from webflow and attach to a headless cms or your own backend
This is nice...I remember purchasing a more detailed video tutorial on udemy titled "from figma to webflow by Valko. Very nice tutorial filled with lots of projects on figma and webflow.
I took that course too! It helped understand how Webflow works and now with the help of this tutorial we can speed up the process with our deep knowledge and short cuts.
From this video I got the impression that Landify was free (not the case), it is still helpful however.
Boss!
Why do this when you can convert from figma to html and css directly
i was search it today, i have to much luck hahah
Breakpoints on webflow
hmm not that great. You basically rebuilt it in webflow. Using figma to get images set to the right size for webflow templates. Seems like you might as well skip figma?
well-curated, punit.
👍👍
feeling less scared than I was 15 minutes ago..
First viewer
You just redesigned all the stuff, mate. There is no conversion.
Good web design has a visual beginning. I used to skip this process.. it's way more efficient to design it w/ no constraints then just tweak things when you upload it. I promise you.
This is not a conventional way of using Figma to webflow translation, I would not use this as a credible tutorial at all
This is dumb. I just watched you design a website twice, you never converted it... with Anima, you can ACTUALLY convert Figma to Code and upload to webflow.
Это не является конвертацией.
Next up XD to webfloe
publish this site in webflow our web design, first install free webflow and hosting $ .....
My ears started bleeding from her
You are the best Punit, it's a life changing tutorial man, keep creating