Now Convert Figma Designs to Webflow - Easiest Tutorial | Design Weekly
Вставка
- Опубліковано 9 лип 2024
- Converting Figma to Webflow always seemed like a dream to me. Unless I explored and found the easiest workaround to convert your Figma designs to Webflow in about 10 minutes!
The best part is, you don't need any coding skills to launch your website on Webflow. So, anybody can follow along and create something cool.
Resources mentioned in the video:
1. Webflow UI kit - www.figma.com/community/file/...
2. Landify - www.figma.com/community/file/...
Video Chapters:
0:00 Introduction
0:38 Designing in Figma
07:16 Converting to webflow
Get the equipment I use:
1. Mic: amzn.to/3b2OQa5
2. Camera: amzn.to/3rJzPj6
3. Macbook Pro: amzn.to/3aYeD30
4. Asus Gaming Laptop: amzn.to/2Mj4cN7
5. Pop filter: amzn.to/3aYfReC
For Sponsorship: punitwebdeveloper@gmail.com
Channel Sponsors:
1. LS Graphics - www.ls.graphics/
2. Blush - blush.design/
3. Asus - www.asus.com/
Follow Me on Twitter:
/ punitweb
Follow me on Medium:
/ punitweb
My Behance Profile:
www.behance.net/punitweb
#figma #webflow #designtutorial - Навчання та стиль
Bro I feel that I was a noob in webflow . You made me pro in Just 15 minutes . I love the way you teach .
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!
You are the best Punit, it's a life changing tutorial man, keep creating
This was needed rn! Thanks for the upload!
MY JAW IS ON THE FLOOR. THANK YOU FOR THIS VIDEO WOW
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
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🙏
This was an amazing tutorial Punit! Lovely way of teaching in such a short space of time. Thank you for this 👊🏽
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 is so helpful! i love your videos, thank you!
YESSSS FINALLY !!! THANK YOU 😄
LOVE THIS MANS HELP AND CHANNELS!!!!!
This was extremely helpful thanks a lot!
Amazing vid! Very nice tips and tricks1 Thanks a lot Punit!
Very clear explanation and demonstration. 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)
Wow wow wow - third eye blown. This is an amazing tutorial!
You have made it so easily now I will definitely get the job I wanted thank you so so much lots of love❤
GREAT TUTORIAL! FANTASTIC♥
AWESOME TUTORIAL!!!
in 11 seconds I realised I love this guy and the tutorial and I instantly subscribed
Thank you so much for your explanation 👍
You are awesome Punit thank you!
Thank you so much, that’s genius!
thank you for this tutorial, it is very useful and practical, all we need to do is to get familiar with webflow now ...
This is so smart. 👌🏾
Really looking for this, great video. Internet could be more worse without you😅 . Thanks man🖖
Punit, Great video. Thanks for sharing this video
I'm facing a problem of exported graphics from figma are bluring out while building website , how can I solve this ?
dumb question but, how did the figma layout appeared in webflow?
thank to punit -but are you saying this site hosting and click to button than prototype, than response also
What about when i don't use any ui kit. I designed a website by myself, then how will i do on webflow
Hi , can this be compiled on my iPad Pro?
I can't believe I learnt webflow within mins
I want to use the Figma design that the client already has, how to do that?
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
Thank you
Great Teaching skill Brother, Thanks for this amazing content it helped me a lot❤️.
Glad to hear that!
Oh this is madness 😊😊😊😊😊😊😊
This is not conversion from Figma to webflow, don't misguide people.
thx!!!!
Will it be responsive?
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
Excellent….
well-curated, punit.
Impressive...................
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
i was search it today, i have to much luck hahah
Adobe xd to weblow this will great help
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.
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
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
Boss!
👍👍
Why is the mask important at the first part?
I do not enjoy the video, I enjoy video and you, God bless !
you haven't talked about the responsive part
From this video I got the impression that Landify was free (not the case), it is still helpful however.
Breakpoints on webflow
Why do this when you can convert from figma to html and css directly
Figma to webflow speedrun
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.
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.
First viewer
Next up XD to webfloe
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
feeling less scared than I was 15 minutes ago..
Это не является конвертацией.
publish this site in webflow our web design, first install free webflow and hosting $ .....
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?
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.
My ears started bleeding from her
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.
This is not a conventional way of using Figma to webflow translation, I would not use this as a credible tutorial at all
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.
You are the best Punit, it's a life changing tutorial man, keep creating