Webflow Labs introduces the Figma to Webflow plugin

[@Devwithnathan]

information:10/10 Delivery:10/10 Entertainment:1000/10

[@chaosplan]

For Figma pros who do everything with auto layout this is a game changer.

[@aleksandarstamenkovic9641]

Bro can I somehow make classic design into full auto layout?

[@enrico7237]

@@aleksandarstamenkovic9641 yes man, you need to redo the layout with a logic with autolayout

[@vzx13]

@@aleksandarstamenkovic9641 select the components, shoot shift + A. done. Just make sure you implement the right structure for all the components on the page.

[@gxramirez]

Figma Auto Layout is the way 🧘🏽‍♀️

[@GotMyTowel42]

@@gxramirezwhy is it the way? what makes it so special?

[@anfisign]

FINALLY. The moment when using auto-layouts for everything and naming layers pays off!

[@user-or7om6je3k]

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.

[@da47934]

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.

[@brunoescoto9630]

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

[@StevenShoaf]

this is why competition is good! Framer put some pressure on webflow and they delivered. Amazing!

[@atb0007]

Probably dont need to learn Framer now. Thank you Webflow.

[@sharjeelarshad5899]

Exactly

[@richardbastow6295]

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.

[@mungos1234]

Can i start learning webflow immediately, or should i start with figma?

[@robertocoladomenico5426]

@@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?

[@kyonas6047]

Their Ux designers used their experinces well

[@LorettaBangBang]

@@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)

[@mt.bikeher270]

I want you, and your sense of humor, to teach me everything, every day.

[@Julie-mi1dz]

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

[@jeremydennis6908]

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!

[@taiworufuscovenant8009]

Wow! Just wow! This is just wow!!! 😱 I love Webflow. ❤️ And the way Figma and Webflow works together makes sense.

[@marc5540]

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!!!

[@WildWildFashion]

Absolutely hahah He makes it so fun to learn! He' got Ryan Reynolds energy with the jokes!

[@ozordiprince9405]

This is going to change everything

[@ShayneCuffy]

🤯 Wow! Can’t wait to give this a try. Auto layout has the same properties as flexbox, brilliant!

[@kuryo193]

Can you explain it like I’m 5?

[@zekevictor]

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?

[@KabbaModern03]

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! 🙌

[@LukasNiebel]

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. 😄

[@loudaprile471]

really appreciate the subtle comedy in this tutorial

[@eccentricity9697]

This is CRAAAZZZYYYYYY! The amount of time we’ll be saving is a huge money maker

[@inkmanworkshop]

Just tried it out. It's mind-blowing! GREAT WORK

[@grantbouff]

2:39 I’m so excited/hopeful for when @Finsweet ‘s client first gets integrated!

[@jkl.guitar]

dang should waited another week before i started building my site lol, awesome job webflow team!! You will always be the best!

[@keeganwarrington6655]

I love this guy's teaching style

[@TaskSwitcherify]

Teacher of the year award, great presentation / tutorial! 🙂

[@AidilGoh]

Cant wait to put this into our workflow. Thanks Webflow team!

[@nicolaspettini3143]

Can't wait to try this new plugin out!

[@someone5502]

This is a real game changer, thank you for the hard work

[@Thingwithlegs]

The best thing about these videos is that they don't use overly-used techbros language like "leverage" and "boost".. such a damn relief!

[@MrMusiciluv17]

the knowledge was expected but the chuckles were not hahaha. excellent quick guide. thanks.

[@staticmotion1628]

you guys are AMAZING THANK YOU THANK YOU this made my year lol love you webflow

[@aplacecalledspace2473]

This is AWESOME. Keep up the good work Webflow Labs Team, we appreciate it!

[@ryangreenhalgh2572]

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 :)

[@SayaruWatches]

omg webflow just changed my life with this one

[@jasonoliveira2149]

You guys always do it right. This is huge.

[@omeirooo5195]

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!

[@WildWildFashion]

Can I ask you why not for pages?

[@jadersoncavalcante9731]

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.

[@jaimelomelin2055]

Awesome this is HUGE! I am super excited about this! game changer forever, the missing part.

[@MubarakMarafa]

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! 🤯

[@marwinthedja5450]

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!

[@LaithWallace]

Its amazing to see that you have built this. Such a great plugin.

[@MoritzFischer]

This is so amazing!!! Seems so simple, but this a complete game changer. Thank you Webflow. You guys are amazing.

[@mohammadakram7067]

Framer: We are Better then Webflow Webflow: Hold My Beer

[@voyageurdesign]

huge addition. will be a game changer in the space

[@thechronicgrump3906]

This is better than I expected

[@lukebonnici5627]

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!!

[@belmont1884]

Had a quick look earlier. It could be a game changer regarding the time it takes to get your designs into a developed website. 👍

[@marlonstevenson2495]

How is no one commenting on how hilarious this tutorial is

[@shereedillon743]

I'm going to be using this on my next project fo sho!

[@fexgib2842]

Figma and Webflow the best duo.

[@the-secrettutorials]

Man I'm glad to see this face back! Even more with such great news 🤯🤯🤯

[@RoeyAlfa]

I just can't hold back my excitment! I feel like screeming from joy😍😍😍

[@RoeyAlfa]

Also I looked everywhere for grimur's template and couldnt find it

[@ridwanmaruf1374]

This is mindblowing 🔥🔥Thank you Webflow once again.😅

[@georgy.design]

This is a game-changer, facts 🚀 Gotta read the docs 🧑🏻‍💻

[@youcefwippert]

No way! This is incredible

[@ludakravica]

freaking insane! Please don't get bought out by some huge corporation and keep on the good work! :)

[@DanBorgia]

Now all we need is HTML to Webflow and all my dreams would have come true!

[@jawadahmed8956]

Will it effect manual development Don't you think it will replace webflow developer?

[@ghitaelmaimouni7198]

I'm wondering the same thing xd

[@christianachleitner9439]

I just love and enjoy the dry jokes in the webflow videos.

[@screengraphy]

Holy cow this is incredible!

[@altonpeques]

Amazing update! Imagine the day when Siri can actually style the navbar 😂

[@YuriShevchouk]

Awesome vid, love the dry humour, blockbuster lol

[@Waqas4hmed]

Amazing to see McGuire explaining magnificently.

[@MohamadSalmanAlfarisi]

Already tried it out with auto layout. It's mind-blowing!

[@aleksandarstamenkovic9641]

Bro can I somehow make classic design into full auto layout?

[@rockstarsunlimitedltd]

You made my HomePod play "Style It" 😅

[@Russakrime]

Holy shit! this is great. Can't wait to try it out

[@CasinoOne]

Finally i can design my own new years eve ball!

[@shreyasjwebflow1639]

This is game-changing!

[@tanmai6035]

it gives me chills, thank you

[@maxbrych7354]

just learned coding my own websites but you guys make me stick to webflow hahaha

[@polytor4]

Next level 🔥

[@TheWebMad]

Miss this Guy

[@marvinstracke]

How does the navbar know to use the hamburger icon? Can't spot the element in Figma, but it somehow works ...

[@Webflow]

The Webflow navbar component already has the necessary javascript and hamburger icon SVG in it. You can learn more about it here: university.webflow.com/lesson/navbar

[@revelationculture]

Excellent teaching

[@shahriartanvir977]

Oh, man! I just remembered learning to design UI in photoshop back in the early 2010s. And PSD to HTML was a thing.

[@ucoan2457]

And the new era officially begin

[@Nomeh_]

Aaaaamazing!!!...I cant wait to try this out.

[@MitchelJerome]

How did you get that layout at 5:32

[@megabiggs]

this makes me want to revisit my website!! holy crap

[@zairabbas]

Wow. This is great. Something i have been thinking of!

[@ChrisEj_The_Broly]

This school is the real gist come on😎. Going to Webflow University 👨‍🎓

[@otterguyty]

Top tier humor, video, and plugin 👌

[@vlastimilslechta8927]

All I need now is a Figma designer 😊

[@Exhodius]

It's nice but two things: - It doesn't work ! my first column is crushing the 2nd one (the picture) on the right. - A lot of people are explaining it's outdated to use columns, and much easier to do the same with div blocks. Now I'm super annoyed and frustrated by this crushed picture.

[@hooda.akshay]

YOU are epitome of AWESOMENESSS

[@chaosplan]

When he said Hey Siri she responded word for word with what she was saying in the video. It was .05 seconds delayed so had this Siri echo thing going on. Hysterical

[@nocodekevin]

I'm going to have to take a week off work to learn all this.

[@MohanaKumar-xy5xm]

We can also do the autolayout after the completion the design right? Or is it mandatory to do it first then to design!?

[@itshesh397]

very impressive tool. Some might say its a.....GAME CHANGER

[@RenatoEsquarcit]

Ohhh my gooooooodnesss, that's a massive thing

[@cybi2684]

Yehhaaa... he is back ! You are still the best.

[@johnsijayasingh5385]

This is amazing!!!! Thank you!

[@mungos1234]

I want to start learning web design, should i start with figma or go with webflow right away?

[@wfwfwfwfwfwf]

Not super on topic, but the only thing I don't understand about Webflow is why it makes every layer into a class. For each layer you're styling you have to make a combo class in order not to style the other layers with that class. An ID would ve been much easier. Don't know why I'm writing it here, the plugin looks awesome but guess I'm afraid that after transferring into Webflow the project becomes cluttered. Thoughts?

[@alexandrubulgaru5475]

What happens to the components with variants and transition animation? Anyway, very good stuff

[@FedericoLunaRGH97]

Trutfhully game changer. Imagine if you combine this with Studio tokens... BOOM

[@TheFinanceBite]

I DONT UNDERSTAND ive tried to run the webflow to figma plugin AND EVERY TIME IT ASKED ME TO AUTHORIZE

[@Webflow]

You'll need to connect and authorize the plugin with your Webflow account. Here is more information on how to do this: university.webflow.com/lesson/figma-to-webflow-plugin#how-to-install-and-authorize-the-figma-to-webflow-plugin Hope this helps :)

[@TheFinanceBite]

@@Webflowthank you I already found out. But I have a question. Does it for everybody when I transfer the webpage from figma to webflow it doesn't cover the full page?

[@Webflow]

@@TheFinanceBite Hi Finance Bite, that depends on how you've setup your Figma file. I'd recommend reaching out to support for help here!

[@Becausetheinternet2]

Can animations go over too?

[@theocaron8120]

Can we use a hover effect for a button directly in Figma and use it in Webflow ? Or i need to create him with Webflow ?

[@MorganCrockett]

So exciting! This is a game changer.