Webflow Labs introduces the Figma to Webflow plugin
HTML-код
- Опубликовано: 21 июл 2024
- The Figma to Webflow plugin lets you turn your static designs into clean, production-ready Webflow HTML and CSS. If you're used to creating your designs in Figma and then building them in Webflow, this new Figma plugin may help supercharge your workflow.
webflow.com/figma-to-webflow
Install the Figma to Webflow plugin → www.figma.com/community/plugi...)
Read more about the Figma to Webflow plugin → university.webflow.com/lesson...
Got feedback? Share it here! → webflow.circle.so/c/figma-plugin
00:00 - Introduction
00:54 - Install the Figma to Webflow plugin
01:45 - Build a side-by-side hero section in Figma
05:19 - Quickly make a responsive navbar in Figma
06:11 - Paste the design into Webflow
08:34 - Recap
View the Figma project used in this video → www.figma.com/file/jOgEmnsAjE...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow
![College Football 25 Road To Glory - Transfer Portal & First Team All-American [FRESHMAN YEAR]](http://i.ytimg.com/vi/U8UYgoKneCo/mqdefault.jpg)
For Figma pros who do everything with auto layout this is a game changer.
Bro can I somehow make classic design into full auto layout?
@@aleksandarstamenkovic9641 yes man, you need to redo the layout with a logic with autolayout
@@aleksandarstamenkovic9641 select the components, shoot shift + A. done. Just make sure you implement the right structure for all the components on the page.
Figma Auto Layout is the way 🧘🏽♀️
@@gxramirezwhy is it the way? what makes it so special?
FINALLY.
The moment when using auto-layouts for everything and naming layers pays off!
I love Webflow university. You explain sooo good and they are entretaining to watch. Imagine if all the companies put a bit of effort in explaining their products. we wouldn´t need those paid courses anymore. Thanks again
This is huge. I already designed and named all layers in Figma and have been redesigning it in Webflow. This is going to save me so much time!
this is why competition is good! Framer put some pressure on webflow and they delivered. Amazing!
Wow this is huge! Thanks Webflow team, this is such an amazing plug in.
Also did anyone else notice, how hard McGuire was trying not to laugh at 6:02? Kudos to you sir for staying in character, that was gold. 😄
I have never seen a company that is so authentic and gets what the user needs in terms of short introduction tutorials. You have the best video tutorials - short and simple and focused on the important bits. I also like the slapstick jokes.
I'm kind of not kidding when I say that the humor in this video is half the reason I'm going to give Webflow another shot.
Wow! Just wow! This is just wow!!! 😱 I love Webflow. ❤️ And the way Figma and Webflow works together makes sense.
Probably dont need to learn Framer now. Thank you Webflow.
Exactly
God I love it here. I always used to painstakingly pre-design everything in Figma before trying to replicate it in Webflow. This is going to save me so much time and effort. Thank you Webflow Team
This is going to change everything
I do a lot of bespoke web designs, but with this I can stay in Webflow without using other website builders for simple website designs! 🙌
This is AWESOME. Keep up the good work Webflow Labs Team, we appreciate it!
🤯 Wow! Can’t wait to give this a try. Auto layout has the same properties as flexbox, brilliant!
Can you explain it like I’m 5?
So flex box is like a special dinosaur that knows how to present toys (Internet content) to kids everywhere in a fun, easy to use way. Also he does so in a way that’s easier for kids to come in later and change certain parts of the presentation like if you have a different favorite color and want you toy to be that color instead!
So Boxasaurus Flex (B Flex) is a smart and useful dinosaur, but also he’s actually female-he just insists that everyone use traditionally masculine/neuter pronouns (those are other dinosaurs we’ll talk about some other time) because he’s a little rascal who likes to confuse youngsters like you; we’ll talk about Internet trolls another time, just don’t get caught up in the he/she stuff too much on the Internet, OK son? Moving on…
It just so happens that there’s another very smart and useful dinosaur called Figma Auto Layout (F.A.L.), also known as Fallosaur (pronounced like “Fallus Sore”). He’s extra smart with toy presentation because he is aware of B Flex and Flex’s popularity, so FAL makes it even easier for kids to adjust their toy presentations by imitating B Flex’s “interface” (how you talk to him) so that kids already familiar with B Flex will automatically be familiar with FAL.
Isn’t that neat?
This is so amazing!!! Seems so simple, but this a complete game changer. Thank you Webflow. You guys are amazing.
Just tried it out. It's mind-blowing! GREAT WORK
I very rarely comment on these videos, but Webflow is so far ahead of the curve in terms of innovation it’s crazy & these videos are absolutely top notch - the perfect blend of truly informative content & brilliant humour. Webflow you rock & my fellow Webflow-ers…you rock too.
Can i start learning webflow immediately, or should i start with figma?
@@mungos1234 In webflow you learn how to develop a design, in figma you learn how to do a design to develop. What do you want to be able of?
Their Ux designers used their experinces well
@@mungos1234 there is no right answer. depends on so many things. if you value design for example, starting off experimentation in a design tool instead of jumping right into the builder tool is crucial. then again I know people who make good money building straight from webflow (they dont value good design, just money and effiicency)
dang should waited another week before i started building my site lol, awesome job webflow team!! You will always be the best!
Can't wait to try this new plugin out!
Its amazing to see that you have built this. Such a great plugin.
This is a real game changer, thank you for the hard work
Cant wait to put this into our workflow. Thanks Webflow team!
You helped me a lot with this video, I'm migrating from an area and as much as I have achieved qualification in the area, there is always a lack of direction on what to do and how to do it, I hope you grow a lot as an ux so you can continue helping more people, gratitude by that light.
You guys always do it right. This is huge.
Teacher of the year award, great presentation / tutorial! 🙂
WOW! I always design in Figma first and then recreate my designs in Webflow. This has the potential to save me a ton of work!
you guys are AMAZING THANK YOU THANK YOU this made my year lol love you webflow
Awesome this is HUGE! I am super excited about this! game changer forever, the missing part.
I love this guy's teaching style
information:10/10
Delivery:10/10
Entertainment:1000/10
So happy to see McGuire again! It would be super handy if images could be automatically compressed upon upload too. Would save so much time!!
This is CRAAAZZZYYYYYY! The amount of time we’ll be saving is a huge money maker
Am I the only one who freaking loves this guy's explanations and how he teaches? he is so funny and at the same time clear!!!
Absolutely hahah He makes it so fun to learn! He' got Ryan Reynolds energy with the jokes!
Had a quick look earlier. It could be a game changer regarding the time it takes to get your designs into a developed website. 👍
really appreciate the subtle comedy in this tutorial
This has HUGE implementations... I imagine one day there will be webflow ready templated in Figma. You can just give it to your client and allow them to change and add and customise. You can then package it up, clean it and then copy paste the designs to webflow! 🤯
This is better than I expected
This is mindblowing 🔥🔥Thank you Webflow once again.😅
No way! This is incredible
Holy cow this is incredible!
huge addition. will be a game changer in the space
freaking insane! Please don't get bought out by some huge corporation and keep on the good work! :)
2:39 I’m so excited/hopeful for when @Finsweet ‘s client first gets integrated!
omg webflow just changed my life with this one
So excited to test out this plugin!! Also, I love how witty this narrator is. He feels like and looks like a tech tutorial version of Pete Holmes the comedian :)
Awesome vid, love the dry humour, blockbuster lol
the knowledge was expected but the chuckles were not hahaha. excellent quick guide. thanks.
This is game-changing!
Man I'm glad to see this face back! Even more with such great news 🤯🤯🤯
Aaaaamazing!!!...I cant wait to try this out.
I dont think im gonna use this for building pages for now, but this will be great to imports styled UI elements and components for sure!
Can I ask you why not for pages?
Wow. This is great. Something i have been thinking of!
This is amazing!!!! Thank you!
Next level 🔥
This is a game-changer, facts 🚀
Gotta read the docs 🧑🏻💻
Holy shit! this is great. Can't wait to try it out
So exciting! This is a game changer.
I just can't hold back my excitment! I feel like screeming from joy😍😍😍
Also I looked everywhere for grimur's template and couldnt find it
Top tier humor, video, and plugin 👌
I'm going to be using this on my next project fo sho!
This is amazing!!! What would be supercool if interactions on nested components in Figma (for example button hovers) could be copied over as well
How awesome! Thank you so much!!!
Excellent teaching
Already tried it out with auto layout. It's mind-blowing!
Bro can I somehow make classic design into full auto layout?
That’s incredible!
Awesome, thank you!!!!
Gamechanger! 🔥
Yehhaaa... he is back ! You are still the best.
Oh, man! I just remembered learning to design UI in photoshop back in the early 2010s. And PSD to HTML was a thing.
The best thing about these videos is that they don't use overly-used techbros language like "leverage" and "boost".. such a damn relief!
Framer: We are Better then Webflow
Webflow: Hold My Beer
YOU are epitome of AWESOMENESSS
Unbelievable amazing! Do you guys think a plugin like this will come for Sketch aswell?
Now all we need is HTML to Webflow and all my dreams would have come true!
Finally i can design my own new years eve ball!
Figma and Webflow the best duo.
just learned coding my own websites but you guys make me stick to webflow hahaha
Outstanding . Love it
Miss this Guy
Finaly!! Awesome :D
Amazing update! Imagine the day when Siri can actually style the navbar 😂
Ohhh my gooooooodnesss, that's a massive thing
this makes me want to revisit my website!! holy crap
This is amazing!
Absolute legends! 🔥
This is Amazing ❤🎉
This is amazing
Amazing to see McGuire explaining magnificently.
And the new era officially begin
This. is. AMAZING 🔥
I just love and enjoy the dry jokes in the webflow videos.
Awesome. I love the humour too.
You made my HomePod play "Style It" 😅
Let's goooo! ❤️😍
How is no one commenting on how hilarious this tutorial is
this is amazing 🔥🔥💯
Amazing work and amazing plugin! i as a beginner awaiting it seriously ..But sir i have a question can i use this plugin directly without leaning css and html because these languages are very basic that i don't know.. Is there any need to learn these languages now.
Finally it's here
this is astonishing