Webflow Labs introduces the Figma to Webflow plugin
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 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
FINALLY.
The moment when using auto-layouts for everything and naming layers pays off!
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?
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.
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!
This is going to change everything
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.
Wow! Just wow! This is just wow!!! 😱 I love Webflow. ❤️ And the way Figma and Webflow works together makes sense.
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. 😄
This is AWESOME. Keep up the good work Webflow Labs Team, we appreciate it!
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 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
Probably dont need to learn Framer now. Thank you Webflow.
Exactly
This is a real game changer, thank you for the hard work
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!
Cant wait to put this into our workflow. Thanks Webflow team!
You guys always do it right. This is huge.
🤯 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?
Its amazing to see that you have built this. Such a great plugin.
Can't wait to try this new plugin out!
dang should waited another week before i started building my site lol, awesome job webflow team!! You will always be the best!
Teacher of the year award, great presentation / tutorial! 🙂
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! 🙌
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)
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 are AMAZING THANK YOU THANK YOU this made my year lol love you webflow
I love this guy's teaching style
Awesome this is HUGE! I am super excited about this! game changer forever, the missing part.
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!
really appreciate the subtle comedy in this tutorial
Framer: We are Better then Webflow
Webflow: Hold My Beer
This is better than I expected
huge addition. will be a game changer in the space
omg webflow just changed my life with this one
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!!
the knowledge was expected but the chuckles were not hahaha. excellent quick guide. thanks.
Had a quick look earlier. It could be a game changer regarding the time it takes to get your designs into a developed website. 👍
This is mindblowing 🔥🔥Thank you Webflow once again.😅
Holy cow this is incredible!
This is CRAAAZZZYYYYYY! The amount of time we’ll be saving is a huge money maker
No way! This is incredible
This is game-changing!
Wow. This is great. Something i have been thinking of!
This is amazing!!!! Thank you!
Aaaaamazing!!!...I cant wait to try this out.
Awesome vid, love the dry humour, blockbuster lol
How awesome! Thank you so much!!!
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! 🤯
2:39 I’m so excited/hopeful for when @Finsweet ‘s client first gets integrated!
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 :)
Next level 🔥
Excellent teaching
Top tier humor, video, and plugin 👌
freaking insane! Please don't get bought out by some huge corporation and keep on the good work! :)
So exciting! This is a game changer.
This is a game-changer, facts 🚀
Gotta read the docs 🧑🏻💻
Awesome, thank you!!!!
I'm going to be using this on my next project fo sho!
That’s incredible!
Man I'm glad to see this face back! Even more with such great news 🤯🤯🤯
Finally i can design my own new years eve ball!
Holy shit! this is great. Can't wait to try it out
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
Outstanding . Love it
This is amazing!
Finaly!! Awesome :D
YOU are epitome of AWESOMENESSS
Absolute legends! 🔥
this makes me want to revisit my website!! holy crap
Yehhaaa... he is back ! You are still the best.
This. is. AMAZING 🔥
Miss this Guy
this is amazing 🔥🔥💯
This is amazing
Now all we need is HTML to Webflow and all my dreams would have come true!
Awesome. I love the humour too.
Amazing update! Imagine the day when Siri can actually style the navbar 😂
this is astonishing
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?
Figma and Webflow the best duo.
Already tried it out with auto layout. It's mind-blowing!
Bro can I somehow make classic design into full auto layout?
Oh, man! I just remembered learning to design UI in photoshop back in the early 2010s. And PSD to HTML was a thing.
This is Amazing ❤🎉
You made my HomePod play "Style It" 😅
Let's goooo! ❤️😍
Gamechanger! 🔥
This is amazing💯💯
Amazing!
The best thing about these videos is that they don't use overly-used techbros language like "leverage" and "boost".. such a damn relief!
Ohhh my gooooooodnesss, that's a massive thing
Big, well done!!
Next level ⬆
Awesomeness!
This is amazing!!! What would be supercool if interactions on nested components in Figma (for example button hovers) could be copied over as well
And the new era officially begin
I just love and enjoy the dry jokes in the webflow videos.
just learned coding my own websites but you guys make me stick to webflow hahaha
Finally it's here