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

Sdílet
Vložit
  • čas přidán 27. 08. 2024

Komentáře • 237

  • @adaptivecodeio
    @adaptivecodeio Před rokem +38

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

    • @FluxAcademy
      @FluxAcademy  Před rokem +2

      Happy to hear!!

    • @lucutes2936
      @lucutes2936 Před rokem

      show

    • @twistletowntreasures448
      @twistletowntreasures448 Před 7 měsíci

      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
    @alejandraalmonacid6120 Před rokem +59

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

  • @FKFAIZAN47
    @FKFAIZAN47 Před rokem +31

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

  • @Senigrafik
    @Senigrafik Před rokem +82

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

    • @makeaniiimpactYT
      @makeaniiimpactYT Před rokem +2

      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
      @cariocadobrasil7 Před rokem +7

      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
      @poppingjaz Před rokem

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

    • @Ari-lp5bu
      @Ari-lp5bu Před rokem

      Can we upload framer file to hosting?

    • @seantubridy3242
      @seantubridy3242 Před rokem +1

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

  • @lombardi4
    @lombardi4 Před rokem +23

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

  • @nicolatoledo
    @nicolatoledo Před rokem +18

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

  • @chillingarenaa603
    @chillingarenaa603 Před rokem +3

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

  • @OneBrighDay
    @OneBrighDay Před rokem +4

    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
      @lucutes2936 Před rokem

      why are you using tools if you prefer coding lol

    • @OneBrighDay
      @OneBrighDay Před rokem

      @@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
      @lucutes2936 Před rokem

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

  • @PaytonClarkSmith
    @PaytonClarkSmith Před rokem +7

    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
      @supersuck7893 Před rokem

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

  • @benvsantos
    @benvsantos Před rokem +2

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

  • @amrobbie
    @amrobbie Před 7 měsíci +4

    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
      @epicsseven7686 Před 5 měsíci +1

      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
      @amrobbie Před 5 měsíci

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

  • @thekimgraph
    @thekimgraph Před rokem +3

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

  • @Piermusic
    @Piermusic Před rokem

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

  • @ryanpaulfrancisco5125
    @ryanpaulfrancisco5125 Před rokem +2

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

  • @knapkinn
    @knapkinn Před rokem +2

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

  • @staticmotion1628
    @staticmotion1628 Před rokem +1

    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

  • @anfisign
    @anfisign Před rokem +2

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

  • @Mula952
    @Mula952 Před 12 dny

    I’m late to the game, but this plug in is sooo helpful! Thanks for walking us through it!

  • @suman121069
    @suman121069 Před rokem +3

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

  • @zouhir.chbakou.america
    @zouhir.chbakou.america Před rokem +1

    i was waiting for this plugin 4 years ago

  • @madhumia1196
    @madhumia1196 Před rokem +1

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

    • @lucidvisions9965
      @lucidvisions9965 Před rokem

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

  • @pixelida
    @pixelida Před rokem +2

    💥 Boom! This changes EVERYTHING!🥳

    • @Rise_Hardstyle
      @Rise_Hardstyle Před rokem

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

  • @inkmanworkshop
    @inkmanworkshop Před rokem +1

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

    • @Rise_Hardstyle
      @Rise_Hardstyle Před rokem +1

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

    • @inkmanworkshop
      @inkmanworkshop Před rokem

      @@Rise_Hardstyle yes I think so

  • @itsmusic2046
    @itsmusic2046 Před rokem +3

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

  • @itsgivingkyle
    @itsgivingkyle Před rokem +1

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

  • @patrickyeboah570
    @patrickyeboah570 Před rokem +5

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

  • @juansandia5060
    @juansandia5060 Před rokem +7

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

  • @marzoval9551
    @marzoval9551 Před rokem +51

    Side Note: I can't wait til the whole NFT mock design trend is over.

    • @lexib9516
      @lexib9516 Před rokem +2

      Me too 😂 thought I was the only one 😂

    • @user-u453
      @user-u453 Před rokem +1

      Same here

  • @mateusvidal3187
    @mateusvidal3187 Před rokem +2

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

  • @Jojo-pf4gl
    @Jojo-pf4gl Před rokem

    Huge thanks to the one who created the plugins

  • @onyedikachimereze
    @onyedikachimereze Před rokem

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

  • @aleexious2466
    @aleexious2466 Před rokem +2

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

  • @amcds2867
    @amcds2867 Před rokem +2

    Very good news! Thanks!

  • @mavidesign
    @mavidesign Před rokem

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

  • @dimitrylanez
    @dimitrylanez Před rokem

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

  • @benjbaird6851
    @benjbaird6851 Před 9 měsíci

    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!

  • @mikakhassenova8352
    @mikakhassenova8352 Před rokem

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

  • @princemajere
    @princemajere Před rokem +1

    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.

  • @marie-bo5il
    @marie-bo5il Před rokem

    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.

  • @TheFeeklochett
    @TheFeeklochett Před rokem

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

  • @char.hendrix
    @char.hendrix Před rokem

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

  • @angelova.nikoleta.design

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

  • @jasinAmsterdam1976
    @jasinAmsterdam1976 Před rokem +7

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

  • @celestialraven182
    @celestialraven182 Před rokem +1

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

  • @sabsturr
    @sabsturr Před rokem +3

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

    • @johndamaia
      @johndamaia Před rokem +9

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

  • @charlie-george
    @charlie-george Před 6 měsíci

    I'd like to see a 1-year review of this plugin and see how it functions in practice

  • @jelenajovanovic1472
    @jelenajovanovic1472 Před rokem +1

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

  • @MaherSinjary
    @MaherSinjary Před rokem

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

  • @Kuungmiika
    @Kuungmiika Před rokem

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

  • @bboytony209
    @bboytony209 Před rokem +1

    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

  • @delioJorge7
    @delioJorge7 Před rokem

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

  • @rafaelkoester
    @rafaelkoester Před rokem +3

    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
      @FluxAcademy  Před rokem +1

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

  • @contra_hq
    @contra_hq Před rokem

    Looks so fresh! 🤯🚀

  • @AnnieFangg
    @AnnieFangg Před rokem

    Mind blown! What a game changer

  • @dylandavino
    @dylandavino Před rokem

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

  • @edmirfazlovic
    @edmirfazlovic Před rokem +1

    It doesn't work for me. Should the Webflow site be live? Or?
    EDIT: I don't have that button, which says "Copy to Webflow".

    • @meaganmccomiskey5337
      @meaganmccomiskey5337 Před rokem +3

      You have to connect your webflow account, it prompts you when you open the plugin

  • @MusicalyVidz
    @MusicalyVidz Před rokem

    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

  • @Zeddings
    @Zeddings Před rokem +1

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

  • @dimitrylanez
    @dimitrylanez Před rokem +1

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

  • @pranavpatel1369
    @pranavpatel1369 Před 6 měsíci +1

    "select a frame to copy" doesn't work for me

  • @ismailbeygirci9394
    @ismailbeygirci9394 Před rokem

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

  • @ThePanchofrasse
    @ThePanchofrasse Před rokem +2

    Mind blowing 🤯🤯🤯

  • @muratengiz148
    @muratengiz148 Před rokem +1

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

  • @RichQuigley-dz2vt
    @RichQuigley-dz2vt Před rokem +1

    WOW. I can't believe it.

  • @cgj5132
    @cgj5132 Před rokem

    Subscribed. Quality content!

  • @cariocadobrasil7
    @cariocadobrasil7 Před rokem

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

  • @AsimAntuleVlogs
    @AsimAntuleVlogs Před rokem

    Most Awaited

  • @Guill07e
    @Guill07e Před rokem +1

    Finally!!

  • @lelexrp
    @lelexrp Před 6 dny

    where I can download this figma project?

  • @eliasbang5490
    @eliasbang5490 Před 8 měsíci

    Does it work for navigate to buttons and several frames?

  • @nabilahsan
    @nabilahsan Před rokem +1

    Oh shit I gotta name my layers now

  • @Harishni-oe3vh
    @Harishni-oe3vh Před 2 měsíci

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

  • @tnc_designer
    @tnc_designer Před rokem

    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?

  • @ShredzZ
    @ShredzZ Před rokem

    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

  • @vijaygajwani4702
    @vijaygajwani4702 Před 4 měsíci

    Why are we using figma? When we can create and publish on webflow directly also we can test on webflow
    can anyone explain what is the use of figmaa?

    • @phannhieng3649
      @phannhieng3649 Před 2 měsíci +1

      In Figma design, you can easily edit, compare many designs,... or change design as customers desire... In general, it saves your time. In Webflow, it's cost more time to change anything in design.

  • @ambershear
    @ambershear Před rokem

    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

  • @user-ec1gw2th3f
    @user-ec1gw2th3f Před rokem

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

  • @chrisrowson9934
    @chrisrowson9934 Před rokem

    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?

  • @user-om4vn7hb8g
    @user-om4vn7hb8g Před rokem

    Could you please make a video about AI Designer Pro plugin?

  • @borisperisset4986
    @borisperisset4986 Před rokem +4

    It looks like good starting point for the design transition into webflow. But since Figma still has so many old-fashioned design pattern built in, the design work needs to continue and evolve in webflow (and beyond). grid, cascading, em/rem, calc, clamp, the whole responsiveness...

  • @user-gn2le8xm8u
    @user-gn2le8xm8u Před rokem

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

  • @TheFlorian321
    @TheFlorian321 Před 4 měsíci

    Do you need a paid version of Figma for this to work?

  • @NicolaMihaita
    @NicolaMihaita Před rokem

    I tried this and when I paste into figma the text is not editable.. Am I missing something?

    • @NicolaMihaita
      @NicolaMihaita Před rokem

      Nevermind I've seen your explenation regarding this

  • @KalebNaim000
    @KalebNaim000 Před rokem

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

  • @nazavalerio9855
    @nazavalerio9855 Před 7 měsíci

    Does anyone know where they get those icons from or if they are made with artificial intelligence?

  • @orvan123
    @orvan123 Před rokem +2

    Just tested it, you need to detach all nested components and have every frame use auto layout, that means everything has to be designed and built like that, nothing you make in advance will work and everything requires are new way to build designs and files.
    You can say AutoLayout is a must and I agree but its not needed in every single element of a design.
    not that mind blowing.

    • @PepsiFuture
      @PepsiFuture Před rokem +2

      That's inconvenient for the moment, but no, it is still mind-blowing

  • @ondrejskorepa1747
    @ondrejskorepa1747 Před rokem

    Is this thing possible in free version of Webflow?

  • @habibuyasin9359
    @habibuyasin9359 Před rokem

    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🙃

  • @VincentSteinerOfficial
    @VincentSteinerOfficial Před rokem +1

    Need this for XD asap

  • @anastasiadamian2948
    @anastasiadamian2948 Před rokem +5

    This is awesome. I have a question. How does one use the plugin for website design with multiple pages. Do I copy all and webflow syncs them or is it just for one-page designs?

    • @johndamaia
      @johndamaia Před rokem +2

      Hey Anastasia! You should create the pages directly in Webflow. And then just copy and paste to the page you want. Makes sense?

    • @anastasiadamian2948
      @anastasiadamian2948 Před rokem

      @@johndamaia Confused a bit. If I have a website design in Figma with four pages, do I copy all at once and paste on Webflow? Will Webflow understand that the pages are individual. Do you get my question? Will the pages work when I click on the nav bar while in Webflow?

    • @tristenvukelich5280
      @tristenvukelich5280 Před rokem +3

      @@anastasiadamian2948 create the blank pages in Webflow, and then Copy and paste the correct Figma pages to the correct Webflow pages. Then direct the links to the correct pages. This is all a guess I haven’t tried yet

    • @anastasiadamian2948
      @anastasiadamian2948 Před rokem

      @@tristenvukelich5280 Thank you so much. I totally get it now. Time to get to work. I appreciate your time.

    • @johndamaia
      @johndamaia Před rokem +2

      @@anastasiadamian2948 Oh got it! To use this plugin you will need to have a Webflow account setup. While on Webflow Designer you should create 4 pages. Then, on Figma copy the pages to each corresponding page and in Webflow you set the navigation and linking of the site.

  • @ShivaniSingh-ce6vb
    @ShivaniSingh-ce6vb Před rokem

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

  • @dlongodesign7026
    @dlongodesign7026 Před rokem

    Is it semantically created and accessible?

  • @Tokuyo84
    @Tokuyo84 Před rokem

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

  • @epicsseven7686
    @epicsseven7686 Před rokem

    I hope that Webflow makes a plug-in for Adobe XD.

  • @scottschoen3362
    @scottschoen3362 Před rokem

    I'm a new-be so too much too fast. I'm confused. It communicates at a level higher than I can follow.

  • @Ari-lp5bu
    @Ari-lp5bu Před rokem +2

    Please make step by step tutorial about this plugin figma to webflow

  • @jasenjahn
    @jasenjahn Před rokem

    Siiiiik!

  • @LA_337
    @LA_337 Před rokem

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

  • @Kellas31
    @Kellas31 Před rokem +2

    Can you tell us why should we transfer from Figma to Webflow? What are the benefits? ty

    • @sagardattatrey3241
      @sagardattatrey3241 Před rokem +7

      Figma is just for designing and prototyping, webflow is for making working websites

    • @0nair426
      @0nair426 Před rokem

      @@sagardattatrey3241 so by transfering it into webflow i can use it for my shopify store?

    • @sagardattatrey3241
      @sagardattatrey3241 Před rokem

      @@0nair426 Yes, you can integrate your shopify into webflow.

  • @LikeAGoon
    @LikeAGoon Před rokem

    can you copy animations?