Framer vs Webflow: 2h Build Challenge

[@thebelguinha]

I really see Framer growing next years and being a strong competitor to Webflow. It's so easier than Webflow to make animations and effects. You feel the website is more polished and well finished in less time spent. Webflow may still be better for more complex projects, but I really see Framer getting to that point at some time.

[@FluxAcademy]

Thanks for the comment. We're hearing a lot of similar reflections to this.

[@samcraig3700]

As much as I'm inquisitive and intrigued with Framer's interesting technique of developing websites, Webflow remains the preferable alternative.

[@FluxAcademy]

It's good to review what's out there, periodically

[@calbiecreative3555]

Webflow for me on this one! You can definitely see the maturity of the platform in how fewer "hacks" were needed to achieve a very high-quality result, even fairly far into the responsive process. That being said, Framer did exceptionally well and it's a much younger player in this part of the market so huge KUDOS to the folks behind that excellent platform. I personally find Webflow to still be a much better platform overall to manage large sites just because of classes alone, never mind the other stuff. Another thing to note is that both Ran and Matt are AWESOME at what they do... I would have probably gotten stuck on the inverted corners and made Webflow look like a complete failure! And Matt's handling of the horizontal scroll showed some seriously sharp thinking in my opinion. High fives all around guys!

[@mofunnel]

If you will specialize in designing landing pages and sales funnels, which one do you prefer with your experience? If you will provide it as a service to customers, which tool is better?

[@calbiecreative3555]

@@mofunnel Either platform could easily work for landing pages. I typically build informational business websites and not "sales funnels" exactly, but my biggest differentiator when it comes to Webflow is the sheer power under the hood (classes that makes it SUPER easy to make global changes, components, a hugely flexible CMS) and the ease of hooking in custom JS and CSS to overcome most native limitations. Landing pages being just one page, it's not going to be as important to use a tool like Webflow because some of its biggest strengths lie in when websites become much more complex - Framer will easily work just as well if not even better depending on what you need to build. It's not without its frustrations (there are couple major headaches with it, such as its hosting costs especially compared to Framer, and native limitations with CMS collection nesting (only one nested collection per page, with a total max of only 20 CMS collections per page). Overall, one of the common threads with either platform is who's using the tool. Designers that are used to using software like Figma will very quickly find their feet with Framer, while Webflow has a steeper learning curve (which I think is actually one of its benefits) which is a bit more developer-oriented.

[@FluxAcademy]

Thanks!

[@antonbeer3213]

Man, that Quarter Snacks cap is sick! I didn't even know they had merch!

[@crisdimarco]

Hi Ran, hi Matt; I've done two Webflow masterclass courses with Ran, and one Framer course with Matt, and it's a real challenge to decide between the two tools. I am more and more inclined to use Webflow because the approach with which it is used, and the way of creating that you have to use, remains fundamentally the one that respects the HTML and CSS criteria, and from a professional point of view I consider it better. At the same time Framer is fascinating because it allows you to create from scratch sometimes without even using Figma. Quite a dilemma. Congratulations to all of you at Flux Academy because you have been and still are a real resource for me. Greetings from Italy.

[@FluxAcademy]

Thanks Cris!!💜

[@saiful_islam_munna]

Framer is quickly becoming a strong competitor to Webflow. It's easier to create animations and polished websites with Framer, saving time. While Webflow handles complex projects better.

[@felcastt]

Exactly.

[@themodernseneca]

Damnnnn its an amazing video and i really loved that you actually got us a tutorial for both the apps!!!

[@chaitanyabidkar3196]

Love the way no-code is advocated here

[@johanvanwambeke723]

For Webflow : Going with a cliping mask would have been the way. They can be responsive depending on hwo you built them.

[@WhiskeyThieves]

All I have to say about this debate is that Matt has a fantastic mustache and hair

[@FluxAcademy]

Mustach > Webflow + Framer.

[@MattBruntonUK]

You're such a flirt.

[@Boulepraline]

Thanks for the video ! Is it possible to have a link to the Figma file to train and try to reproduce it ? Thanks !

[@benkleman]

You should create a design tutorial!

[@joeygarner1636]

I would have liked to see the full building process, not just the results. One thing about Webflow that frustrates me is how the UI doesn’t accurately show the design on larger screen sizes. I have a 14-inch screen, and when I want to see the 1920px design, Webflow just scales everything to fit the window, which doesn’t represent the proportions accurately. Then, when you go to preview mode, all the sizes change again. This really throws me off, and I feel like I’m designing blind. In contrast, Framer allows you to zoom out and see the 1920px frame. That feature alone has me considering switching to Framer.

[@josevillalobos8030]

guys, Flux Academy rules!

[@digitalsketchguy7844]

The biggest minus for me is Framer's enclosed ecosystem. At least with Webflow you can export all your code and host elsewhere or add your own CMS, add react or anything else. You can use Webflow to build web app fronts and use a backend like Ruby on Rails or Django.

[@moitreyig]

can ran teach how to build the inverted corner... how to bring an anchor point as svg

[@jippalippa]

is framer EASY ENOUGH for a person with no experience? I'd like to build a very simple portfolio website with a few json animations (I'm an animator myself). I tried opening webflow but I was totally overwhelmed. Thanks.

[@AmbroseAndreano]

As someone who has experience with both Webflow and Framer, and who is also part of the Flux community, I’ll answer your question by saying that it’s all a matter of preference in how you enjoy actually building a website. I did not have experience many years ago, and I wandered into Webflow before even using a design tool like Figma. Learning how to build in Webflow first made Framer seem alien because of how different it is. In Webflow you use the interactions panel for animations, and in Framer you use Figma style components which can be nested behind multiple pages. Framer has a canvas and Webflow doesn’t. Framer uses React and Framer Motion, Webflow is more traditional and is easily paired with GSAP. Both are advanced tools with steep learning curves for beginners, not just Webflow. You can learn any of this. Every tool has a learning curve and you of course need to learn the UI of whatever tool you use. If you like coding and have a more text input-based approach to building websites, Webflow will feel more comfortable. If you are more comfortable with design tools using a canvas, Framer is going to be more enjoyable. Most things you can do in both tools, so it all comes down to what you enjoy more.

[@FluxAcademy]

"Every tool has a learning curve..." Exactly. Thanks for the detailed comment Ambrose.

[@jippalippa]

@@AmbroseAndreanoYes, but I was wondering which one made the most sense to learn for an animator with 0 web design experience. Thanks

[@AmbroseAndreano]

@@jippalippa try Framer and see if you’re overwhelmed. If you are, then it’s just the learning curve you don’t like and not the tool.

[@wendysanchez13]

Yes, I finished my portfolio (from scratch) within 3 days and I have zero Framer knowledge I just watch a few tutorials here in youtube

[@Waqar_Naqshbandi]

Can someone tell me how the positioned those inverted corners?

[@FluxAcademy]

Absolute positioning

[@Waqar_Naqshbandi]

@@FluxAcademy Can we please get a tutorial for this 🥺

[@angelova.nikoleta.design]

Yes, Webflow for the win. Lovely breakdown! 🔥So easy to put things together. Framer is still bugging my brain with the dilemma: is it a design tool or a website builder.

[@ekejikingsley]

This is exactly what I want to understand! I'm about learning webflow, and now I'm confused about the one to learn.

[@angelova.nikoleta.design]

@@ekejikingsley I think Webflow is a good start since has a bigger community and Webflow University to speed up your learning process. If you are a designer who likes to separate design and development, try designing in Figma and developing with Webflow with their Figma plugin. 😌

[@MovieFantasy_415]

can i get the font name that used in hero section (that bold large font)

[@isabellelee7750]

이걸 보니 웹플로우로 배워야하나 싶다

[@JesseHof]

저도 웹플로우를 써요. 진짜 재밌어요. 아마 미래에 프레이머도 배우고 싶어요

[@madarauchiha5433]

For anyone saying Framer is a strong competitor to Webflow, I would say you should learn more about how web dev works before you say that

[@RedRumble14]

Do I need to study these programs? Can’t they offer something that Photoshop can’t?

[@michaelomodele1240]

If you want to go into web development, yes. They're different tools than Photoshop and used for different things.

[@FluxAcademy]

Photoshop is image editing software. Webflow and Framer are visual development tools for creating websites.

[@davidcapuzzo]

Webflow won

[@MarkusKriest]

➡Webflow needs to up its ante. 💯Framer got it all right by abstracting away all the CSS nitty-gritty settings and configurations and instead providing an Adobe InDesign-like layout process. CSS grids and Flexbox are for that, and IE is finally dead. ✅Essentially, the days of handwritten CSS are over. Sadly, it is a dying craft, but tools are better, easier, and faster to use. ✅💪🏻Webflow will return strongly. There will likely be a new Webflow version out sooner or later that will blend what we have now and make individualization still viable and a more drag-and-drop UX design process, allowing customers to switch between these modes. 🍿In any way, Framer is suitable as a product and a unique challenge for the competition (Wix, for example).

[@FluxAcademy]

Thanks for contributing to the discussion, Markus

[@MarkusKriest]

@@FluxAcademy Thx! I enjoyed your review, checking out Framer at the moment.

[@ytg2468]

The competior of framer is figma

[@filetmignon9978]

No. Figma isn't interested in becoming a dev tool. They're a design and prototyping tool, and the best at it

[@ekejikingsley]

​@filetmignon9978 Please, as an aspiring web dev who has zero knowledge of it. Which would you suggest? Just started learning figma for UI+UX. And I want to pick from webflow or framer. Lol! I'm confused. I will appreciate your input please.

[@filetmignon9978]

@@ekejikingsley why not learn both? It's what I'm doing. Webflow is pointed more at developers. You need to know HTML and CSS to be able to use it properly. When you know how to use it well and are able to add custom code to it, you can make almost anything with it. Framer is pointed more at designers. It lets you create publishable websites, but it's interface is more like Figma. It's not as capable as webflow yet, and misses a lot of features. It's growing fast though, which is why I'm getting into it more even though I use webflow most of the time.

[@ekejikingsley]

@filetmignon9978 Okay! I know a little bit of html and css. I know enough to create a website. So I will try webflow out and also try framer as you suggested. Do you have any course you can recommend on both? I would appreciate it. Thanks

[@filetmignon9978]

@@ekejikingsley There are lots of great free youtube videos on each. Look up Webflow university. You may find paid courses on places like Udemy too, but I don't know how up to date those are

[@nasimmahamud6304]

Who want remix link? we want remix link.

[@Kensingtonhawk]

These are all so easy with elementor lol

[@AmbroseAndreano]

*cracks fingers, opens up Wordpress* Watch me build this in under 2 hours *computer freezes and blows up*

[@creativegabe]

WP eats ass and is outdated bro.

[@jenniferl.9947]

​@AmbroseAndreano yeah, that checks out. 😂

[@FluxAcademy]

HAHAHAHA

[@Ringa_fr]

😂 Wordpress ! 👎🏽

[@turaluix]

So Framer still sucks

[@CarlosGomesCabral]

Not at all. Matt actually accomplished more in these two hours.

[@FluxAcademy]

Not at all!