Framer vs Webflow: 2h Build Challenge

We’re giving our Webflow and Framer Masterclass instructors just two hours to take a design from Figma and turn it into a fully functional web page.
In the Webflow corner we have the Founder of Flux Academy, Ran Segall, and representing Framer, Canadian designer Matt Jumper.
Inspired to check out Webflow or Framer? Start with these free crash courses right here on our channel:
Webflow Crash Course 👉 • Learn Webflow in 2024 ...
Framer Crash Course 👉 • Learn Framer in 38 min...
Want to go deeper?
Webflow Masterclass Course 👉 bit.ly/3YetzCX
Framer Masterclass Course 👉 bit.ly/3xX4hOE
CHAPTERS:
0:00 Intro
0:27 Webflow overview
1:37 Framer overview
3:45 Horizontal scrolling
6:50 Inverted corners
8:00 Text animations
10:27 Final thoughts
📱 Find us on SOCIAL MEDIA
Ran's Instagram 👉 / ransegall
Ran's X (Twitter) 👉 / ransegall
Matt Jumper’s KZbin channel 👉 ‪@mattjumper‬
Matt Jumper’s X (Twitter) 👉 / mattjumper
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's TikTok 👉 / fluxacademy

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

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

[@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!!💜

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

[@zinzamailer1601]

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]

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

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

[@chaitanyabidkar3196]

Love the way no-code is advocated here

[@Boulepraline]

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

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

[@benkleman]

You should create a design tutorial!

[@johanvanwambeke723]

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

[@moitreegraph9]

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

[@josevillalobos8030]

guys, Flux Academy rules!

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

[@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 🥺

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

[@MovieFantasy_415]

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

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

[@isabellelee7750]

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

[@JesseHof]

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

[@Jaa_morant]

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.

[@nasimmahamud6304]

Who want remix link? we want remix link.

[@davidcapuzzo]

Webflow won

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

[@Grapfy]

😂 Wordpress ! 👎🏽

[@turaluix]

So Framer still sucks

[@CarlosGomesCabral]

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

[@FluxAcademy]

Not at all!