The Plugin You’ve Been Dreaming About: Figma To Webflow

Рет қаралды 129,874

Күн бұрын

📘 Free e-book "The Blueprint For Insanely Successful Webflow Designers" 👉 bit.ly/4ccudVZ
Get the Figma Plugin here: www.figma.com/community/plugi...
Vote for the plugin as Product Of The Day on Product Hunt: www.producthunt.com/products/...
Master Figma for web design with our new, in-depth Figma course: t.ly/ITHEe
IT'S HERE!
Finally a plugin that allows you to successfully paste your Figma designs right into Webflow.
In this video, I'm going to give you the rundown on how it works, and how you can best use it to get the most accurate results.
The plugin is a very early beta release from the Webflow Labs team.
They’re interested in releasing it early to get feedback on what you would most like to see next.
📽️ CHAPTERS
00:00 - Diving into the plugin
01:00 - How it works
05:18 - The ideal workflow
07:48 - Help & Feedback
How do you plan on using this plugin?
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
Ran's Instagram 👉 / ransegall
Thanks for watching our video!
#webdesign #figma #webflow #freelancewebdesigner

Пікірлер: 235

@adaptivecodeio Жыл бұрын

Sweet bro! Took your webflow course last month and have been crushing projects, you da man Ran!

@FluxAcademy Жыл бұрын

Happy to hear!!

@lucutes2936 Жыл бұрын

show

@twistletowntreasures448 5 ай бұрын

Bro, happy about any advice, I have worked on Webflow now for quite a year more or less learning understanding every nook and cranny, but how to land clients and gigs is kind of the challenge for me now ^^ any advice or good idea?

@alejandraalmonacid6120 Жыл бұрын

I waited for 3 years to see this! I knew that someone was going to create this plugin eventually, such a game changer!

@benvsantos Жыл бұрын

Two of my favorite design platforms, and it's great to know that there's finally a plugin to bridge them

@nicolatoledo Жыл бұрын

Amazing! This can really speed up the process and let us concentrate more in the architecture, animation and functionality 🎉

@thekimgraph Жыл бұрын

This is amazing! Cutting the repetitive tasks to spend time where it matters to elevate our designs and speed up workflow.🔥☺

@FKFAIZAN47 Жыл бұрын

It's real guys. This is Epic!!🤯

@gxramirez Жыл бұрын

This is happening!! 😀

@suman121069 Жыл бұрын

That is awesome, and thank you so much, Flux Academy, for updating us with all these new features. Means a lot ❤️

@FluxAcademy Жыл бұрын

Our pleasure!

@staticmotion1628 Жыл бұрын

This is just AMAZING this will save sooo much time wow i cant believe this i've been waiting for this for years THANK YOU webflow and figma makes every dollar i spent worth it ten time fold

@chillingarenaa603 Жыл бұрын

This is amazing, won't have to search waste time redesigning on webflow anymore

@anfisign Жыл бұрын

This is a miracle! Literally will start using it now.

@Piermusic Жыл бұрын

What the hell!!! 🎉 Also, appreciate you jumping right in!

@mavidesign Жыл бұрын

This is honestly amazing & a total game changer. Can’t wait to try it out 😍

@mateusvidal3187 Жыл бұрын

Ran, it's amazing, a game changer! haha Thank you for share it with us.

@MaherSinjary Жыл бұрын

This is sooo good, thanks for sharing and thanks to Webflow for making this happen

@itsmusic2046 Жыл бұрын

man this is amazing i am new to webflow having dificulty in learning that but hopefully this will help me as well

@OneBrighDay Жыл бұрын

I’m new to Webflow so I love this. I am coming to this from the perspective as one who codes, I organize my Figma files like this including sections and containers. I think this organization makes everything easier especially if you work on a team.

@lucutes2936 Жыл бұрын

why are you using tools if you prefer coding lol

@OneBrighDay Жыл бұрын

@@lucutes2936 best of both worlds. I enjoy designing but when you know how to code you can get exactly what you want when it comes to interactions. Coding components at this moment is more efficient than any tool.

@lucutes2936 Жыл бұрын

@No Thanks ahh thanks, No Thanks. I thought "no-codes" can make customization with coding such as React and Angular difficult because of the way it generates the code.

@mikakhassenova8352 Жыл бұрын

Fantastic plugin!!! I've used it already, and it's really WOOOOOW!!!!!

@PaytonClarkSmith Жыл бұрын

This is next level 🔥 I feel like some people might be worried that tools like this are gonna take their job 😂 But I believe these tools are just gonna make our lives easier and make us more efficient! Thanks for the vid Ran 👊🏻

@supersuck7893 Жыл бұрын

the living legend himself...paytooooooon! fairly new to web design i learned and was inspired by you. Thanks

@onyedikachimereze Жыл бұрын

This is very necessary sorcery. So excited to explore this. Thank you Ran.

@ryanpaulfrancisco5125 Жыл бұрын

This is great for faster workflow and revisions with your client.

@knapkinn Жыл бұрын

This is huge! Now I have a strong reason to really buckle down and use auto layout… and organize my Figma naming 😅

@madhumia1196 Жыл бұрын

I waited for few years to get this! I knew it will come once, such a game changer!

@lucidvisions9965 Жыл бұрын

I’m new to all this, what was your design process like before?

@angelova.nikoleta.design Жыл бұрын

Very exciting!! I am going to try it out today! 😅

@amcds2867 Жыл бұрын

Very good news! Thanks!

@lombardi4 Жыл бұрын

i have always used auto layout for everything, you have no idea how much this is a gamechanger for me

@char.hendrix Жыл бұрын

NO WAY!! This is amazing. Thank you!!

@cgj5132 Жыл бұрын

Subscribed. Quality content!

@TheFeeklochett Жыл бұрын

Awesome! Now we need Figma-to-Brand Studio app 😁

@pixelida Жыл бұрын

💥 Boom! This changes EVERYTHING!🥳

@Rise_Hardstyle Жыл бұрын

Can someone with no coding experience upload a fully function website ?

@dimitrylanez Жыл бұрын

The best time and age to be a designer, thanks mate

@delioJorge7 Жыл бұрын

im new in the UI/UX field loving it btw but omg this is crazy

@contra_hq Жыл бұрын

Looks so fresh! 🤯🚀

@Senigrafik Жыл бұрын

Figma should’ve start adding vh,vw,rem,em into the editor. Framer has this unit. It should be easy for Figma.

@makeaniiimpactYT Жыл бұрын

Im sure they will and put webflow out of business and just increase their monthly cost if you want this feature. If Figma (Adobe) is smart, they will start clawing back marketshare from Canva

@cariocadobrasil7 Жыл бұрын

It actually already does have the ability to use rem instead of px. If you click the hamburger menu inside the plugin and then go to "plugin settings", you can change it to rem and then the default rem value. Hope that helps.

@poppingjaz Жыл бұрын

@@makeaniiimpactYT Canva and Figma are 2 entirely different platforms. Adobe Creative Express is the Canva alternative

@Ari-lp5bu Жыл бұрын

Can we upload framer file to hosting?

@seantubridy3242 Жыл бұрын

@@makeaniiimpactYT Just adding that will not put Webflow out of business. Figma doesn't have pages, CMS, hosting, and a million other things that make it a completely different system. And Canva is a whole different market.

@AnnieFangg Жыл бұрын

Mind blown! What a game changer

@itsgivingkyle Жыл бұрын

Can’t believe you beat them in posting about it 😂 thanks for the walkthrough

@zouhir.chbakou.america Жыл бұрын

i was waiting for this plugin 4 years ago

@ThePanchofrasse Жыл бұрын

Mind blowing 🤯🤯🤯

@inkmanworkshop Жыл бұрын

Just tried it out after watching your video! THIS IS CRAAAAAZZZZZY!!!!! SO EXCITED

@Rise_Hardstyle Жыл бұрын

Can someone with no coding experience upload a fully function website ?

@inkmanworkshop Жыл бұрын

@@Rise_Hardstyle yes I think so

@princemajere Жыл бұрын

I’m very excited for this addition to the Figma suite of plug-ins as we, as freelancers and small agencies, continue to look for ways to streamline our design/development process.

@Jojo-pf4gl Жыл бұрын

Huge thanks to the one who created the plugins

@dylandavino Жыл бұрын

Woah this tool is insane. This is gonna change my life haha

@AsimAntuleVlogs Жыл бұрын

Most Awaited

@tnc_designer Жыл бұрын

Lovely video. Please which software did you use to record this tutorial that enabled you show your figma workspace and your video at the bottom left corner?

@rickyanchores4464 Жыл бұрын

this is great!!

@benjbaird6851 7 ай бұрын

Just found this video and thought the plugin was going to come in clutch... Turns out, it's VERY difficult to jump into. Guess i'm doing this one the old fashioned way!

@patrickyeboah570 Жыл бұрын

This is unreallll😮😳 I still don’t believe this

@celestialraven182 Жыл бұрын

It's look pretty awesome for that type of designs I don't do.

@Guill07e Жыл бұрын

Finally!!

@user-cm6ro3qr4x Жыл бұрын

Awesoooomee!!!!!!!!! 😍😍😍😍😍😍

@bboytony209 Жыл бұрын

do you have a video that shows how you structured the current project to the new auto layout page? You just showed it finished but never saw how it was done. Thanks

@aleexious2466 Жыл бұрын

I tried it today. It's a basic edition with limited functionalities. I hope the upcoming versions would be more flexible.

@amrobbie 6 ай бұрын

I've been an Elemenotor girl for years. Ironically I started in Webflow, but as a beginner, I was encouraged to learn WordPress as best practice. Fast forward years later, having spent years troubleshooting every site I build at some stage (whether it be pluigin conflicts, code that doesn't work anymore, hackings, maintenance, plugin authentications and verifications, and more...) I am so tired. With the advancements in web design at full speed, I am looking to switch back to Webflow. Its been a huge deal to consider stepping away from WordPress. I think this video just made the decision for me. Need to now go on a walk to calm the excitement. The only query I have is, can I still make money from sites I build for people? It's a good part of my income now, doing hosting, maintenance and ongoing work. Can you make money from your clients subscribing to Webflow and hosting in some sort of affiliate partnership?

@epicsseven7686 4 ай бұрын

Amira. The simple answer to your questions. Yes. But. It's going to start with your marketing skills. The biggest benefit for both you and your clients, is the less headaches of dealing with WordPress plug-ins. When your clients sees that their websites are stable. It's a win win deal for both. Meaning. They have website that's not down due to outdated plug-ins. And that's less stress for you. That's a happy client who will spread word of mouth to new potential clients. And that frees you up to work on new websites vs fixing bugs. At the end of the day. You have to sell it to the customers the pros and cons. In my opinion. The pros in Webflow, outweigh the cons in Webflow. Right now, I have two potential clients whom have WordPress websites, that are not functioning properly. I'd them why and why i don't mess with WordPress. Plug-ins was a major part of my reason.

@amrobbie 4 ай бұрын

@@epicsseven7686that’s actually a really refreshing way of looking at it, thank you for the insight. Happier clients, easier process all round will pay off in the long run. I’m by far happier to move in that direction. I have enrolled in Flux Academy too, just started and it’s great so far. I’m now wondering why I had such a prejudice towards Wordpress as being so superior for so long, when it was clearly more trouble than it was worth and only getting worse. I think we are sold that it’s the pinnacle of web development, and whilst I can see open source being an advantage in some unique circumstances, for the majority it’s not the best option at all. Thank you for the chat, also loving the community around Webflow too. It’s been very refreshing and an all-round positive environment.

@Zeddings Жыл бұрын

Can you start adding in sliders and animations once you've copy and pasted the static design into webflow?

@gauravidesigns Жыл бұрын

dope 🔥🔥

@Kuungmiika Жыл бұрын

Never clicked so fast on a video in my life before!

@jasenjahn Жыл бұрын

Siiiiik!

@jelenajovanovic1472 Жыл бұрын

This is so cool if someone has a well organized Figma file! 😊

@OlaOlowo Жыл бұрын

Keyword - "well organized Figma file"

@jelenajovanovic1472 Жыл бұрын

@@OlaOlowo yes 😀

@dipdey4365 Жыл бұрын

This is epic

@juansandia5060 Жыл бұрын

Could you share the figma file with autolayout? Would be useful to see how to structure inside of figma 😎

@muratengiz148 Жыл бұрын

Is there any video on organizing and adding auto-layout to our project?

@RichQuigley-dz2vt Жыл бұрын

WOW. I can't believe it.

@chrisrowson9934 10 ай бұрын

Hi, do you have a tutorial on how to take a figma design and change all the rectangles and frames into auto layout so that the webflow plugin can work?

@marie-bo5il Жыл бұрын

Which is why I'm not sold on webflow that much anymore. The plug-in is real basic style designs and would like to do more out of the box ideas that would work with this plug-in.

@johncitizen8828 Жыл бұрын

Amazing.

@cariocadobrasil7 Жыл бұрын

I am super excited to see how plugin will increase or decrease productivity and creativeness.

@minesioantonio2066 Жыл бұрын

Amazing

@AJ8888able Жыл бұрын

Yes!!!!!! 🥳

@jasinAmsterdam1976 Жыл бұрын

This is really nice!! Not sure if it follows a certain class naming convention? And how much extra work would it take to make it "client-first"?

@njengathegeek Жыл бұрын

This is crazy

@Tokuyo84 Жыл бұрын

looks interesting. i never work with workflow. but its possible to transfer tokens and components with the plugin?

@dimitrylanez Жыл бұрын

I did everything as u said but I can't copy to webflow BCS it says image size is too large

@ShredzZ Жыл бұрын

Do you think it's good for using with every client project or it's better to build everything from scratch? Asking as a beginner designer :D

@eliasbang5490 7 ай бұрын

Does it work for navigate to buttons and several frames?

@nabilahsan Жыл бұрын

Oh shit I gotta name my layers now

@sabsturr Жыл бұрын

what if you have a custom mobile design for your desktop design, how will it copy over teh styles for mobile?

@johndamaia Жыл бұрын

This is currently desktop only. We are thinking of adding mobile support in the future. If you are interested, upvote this comment!

@habibuyasin9359 Жыл бұрын

I tried to put together all the thing for exporting for some reason i got a warning message that i have an image size exceeding 4.5 Mb how do you tackle this ? thanks in advance🙃

@Harishni-oe3vh Ай бұрын

Can u tell me what plugin you used in figma mostly any Suggestion give me sir

@rachadballout8087 Жыл бұрын

Will this work for a shopify store ?

@ShivaniSingh-ce6vb Жыл бұрын

Please someone tell me how to select frame bc its not working for single pages of a figma file

@user-ec1gw2th3f Жыл бұрын

how to make sign-up page..? it's quite different from your video, but thank you for your vivid work

@rafaelkoester Жыл бұрын

Do you directly start with designing in auto layout or after you finish your design? I find it a little bit time consuming in the design and creative phase

@FluxAcademy Жыл бұрын

No, I switch to auto-layout after I get my layout in place

@ismailbeygirci9394 Жыл бұрын

when i select my frame at figma copy button on plugin doesnt appear am i missing something?

@bergmann.studio Жыл бұрын

Nice🎉

@AVMmmm Жыл бұрын

What happens with css grid?

@Gamagraphic Жыл бұрын

it's simple to use 😎

@user-gn2le8xm8u 11 ай бұрын

This is insane!!!😂😂where can i learn this course? I like to make web pages by using this plugin😮😮😮

@makeit2586 Жыл бұрын

how do you download this once you finish the design

@KalebNaim000 Жыл бұрын

for some reason my auto layout won't copy the frame for any of my designs?

@dlongodesign7026 Жыл бұрын

Is it semantically created and accessible?

@MusicalyVidz Жыл бұрын

Help me: why my website isn’t looking responsive at all, when people move the page is appears a blank border when they move it

@banikesuma7564 Жыл бұрын

EPIC! would it also copied the animation?

@VincentSteinerOfficial Жыл бұрын

Need this for XD asap

@ondrej-dusek Жыл бұрын

Time to switch to Figma bro haha

@nader1487 Жыл бұрын

Hell yes =)))))

@LA_337 Жыл бұрын

Can Figma/Webflow be used to create a job board?

@ambershear 11 ай бұрын

How to do this if your site isn't entirely set up with auto layout? When I turn it on, the whole design is messed up. I made each individual section with auto layout, but I must convert the entire site, which incorrectly alters everything