Revisiting Framer: My thoughts on this latest iteration
In this article I share my thoughts on the latest version of the design, and code tool; Framer.
So. This Framer thing that’s exploded recently in the design community (especially on Twitter) it’s a new tool, right?
Well. No. Not exactly.
Framer has been walking amongst us since 2015.
When that darling of the UI Design tool world, Sketch, was sitting at the top of the mountain, Framer was setting off from base camp and trying to do something a little different than what the tool with the diamond offered.
Koen Bok and Jorn van Dijk were the smart minds that birthed Framer upon the world. I applaud them greatly for attempting something a little different then, enabling users to craft code and witness its graphical output instantaneously. The quality of the visuals was comparable to those created in Sketch, with the added benefit of functional interfaces instead of just plain, flat designs.
The power of Framer was undeniable, yet it presented a significant leap forward from earlier tools such as Sketch, which some found intimidating. This perception was not necessarily promoted by the Framer team but rather spread within the design community.
I’ve watched Framer’s progress from those early days, occasionally sampled its delights, and created articles about its undeniable benefits. Nevertheless, I always found myself falling back to my default tool of choice, which in those earlier days was Sketch, possibly because I’d always been much more of a designer than a coder.
So. As I mentioned, I fell back into my comfortable routine, put Framer back into the box labelled ‘Maybe next time’, and ventured on with Sketch and then, later, Figma like a good, little designer.
But recently, I started focusing on Framer again, and I’d say this all started with the Framer Sites iteration in May 2022 (I completely skipped all the iterations in between; Framer X, Framer Web etc...)
I saw that the team at Framer had combined their deep understanding over the years of building both a design tool and code editor in its many forms, but this time created something that felt much more user-friendly, polished (as all Framer products are), with a feature set that stood shoulder to shoulder with other professional products out there. Talking of which...
We don’t talk about WebFlow?
Ok. So let’s hold up for one moment and quickly talk about the tool that most of Design/Development Twitter is comparing with this current iteration of Framer...
...WebFlow.
I’ll admit it I’ve used WebFlow a lot less than I’ve used something like Figma. I’m far from being a Flow Master, but with my limited experience of the Web to the Flow, I’ve found it powerful and impressive in the results it can produce. I’ve seen (well, everybody has seen) some fantastic work created with it, like Awwwards ‘site of the day’ level stuff (which can be good or bad, depending on your thoughts on usability best practices).
As I mentioned earlier, I've become comfortable with tools like Sketch and Figma, which boast streamlined interfaces and rapid workflows; in comparison, WebFlow's interface feels somewhat dated, almost resembling the complexity of Adobe's user experience as it's amassed an exhaustive list of features over the years.
Of course, it’s important to recognize that Sketch, Figma, and WebFlow serve different purposes, and their interfaces/workflows should not be compared directly. Still, as a designer, I found transitioning to WebFlow to be more of a challenge than I expected.
WebFlow is a slightly different kind of beast compared to Framer. The interface, as I mentioned, always felt like it was built for Developers first, Designers second, with Framer (who of course we’ll get back to in a moment) being the complete opposite of that.
It seems a fickle view to take, but the interface and workflow, however impressive the results produced by WebFlow were, kept me from sticking around for very long.
Ok. Back to Framer...
We do talk about Framer!
I feel that Koen, Jorn, Benjamin (he’s got to get some credit here too) and the Framer team have refined and perfected their product over the years to create an innovative, streamlined, and effortless design, code, and publish process, making this iteration of Framer a much-welcomed breath of fresh air.
With Framer in its latest form, the process of designing, animating, adding interactions, and publishing is blazingly fast. It’s highly efficient, intuitive, user-friendly and faultlessly optimised, and I’m so glad after all this time that I stopped to give it another look.
As a Sketch and Figma user, I was already familiar with the interface and workflow of Framer from prior versions. As a designer, I found that switching to Framer was akin to slipping into a comfortable, well-worn hoodie (make of that analogy what you will) - an effortless transition that immediately made me feel at ease.
The intuitive user interface makes it easy to get started, while its advanced features and capabilities allow you to quickly create stunning animations and interactions with little effort required.
Can it compete, toe to toe with WebFlow in the animation department? Out of the box, no it doesn’t. WebFlow has a little more versatility, but what Framer does, and has always done, is make that out-of-the-box functionality it already has a lot more accessible for first-timers and designers with an affliction to code.
I’ve found Framer to be a more approachable route into the whole design, code, and publish tools than WebFlow is; that’s not even up for debate. As I mentioned, they are slightly different beasts with different user bases (currently, at least).
They’re both visual coding tools with different layers of paint. Neither are of the simplistic drag & drop nature of the Wixs and Squarespaces of this world and should never be categorised with those. Their capabilities are far superior to those tools mentioned above.
Back to the animation aspect of Framer quickly. Suppose you’re comfortable with popping some custom React code into Framer. In that case, there’s nothing it can’t do, and once they invite user Plugins to the party, an already fantastic tool will be an absolute must-have for creating anything your creative mind can dream up.
Before we move on, let's touch on the animation one more time. I firmly believe that animation should always be used in moderation. With its ease of use, there's a tendency with a tool like Framer for the fledgling user to throw every animation in there. Don't. If you can awe the end user, go for it, but if that awe develops into frustration, and usability issues, you've lost them.
Less is more couldn’t be more accurate than when working with a tool like Framer.
Now. Can Framer, in its current form (early 2023), offer the design tool capabilities that Sketch and Figma provide? Unfortunately, not at this time. The tool doesn’t yet have the features necessary for many designers to make the switch completely. However, it’s still easily possible to create aesthetically pleasing designs with Framer, albeit with some limitations.
My final thoughts on (the new) Framer
The future of Framer appears to be quite promising with this latest iteration. People are increasingly looking for more from their tools due to our collective desire for convenience, which has risen tremendously in the past few years
Framer is super-powerful, professional-grade, ridiculously accessible, and has just brought something so finely tuned to the party that this iteration deserves all the accolades it's currently receiving.
By the way, I've just created a new resource for all things Framer. It's called Hey Framer and I'd love you to check it out. It'll be updated with Free templates (from myself and guest contributors), tutorials and much more soon!
Thanks for reading the article,
Marc.