Taking a look at Framer’s as a design tool and comparing it to Sketch
Framer – Medium | Stefan Miodrag
Sketch vs Framer: Should you switch?
How the tools stack up against each other and which one is the best for your design toolbox | Framer.com
Preface: I’m comparing the tools in their current states. Keep in mind that Framer’s team has mentioned that vector and exporting, along with other handy features, are in the works.
Wouldn’t it be great if you could use a single design tool to go from sketching to wireframing to a finished prototype? Well…there is a tool for the entire design workflow and it’s called Framer. Framer makes it really easy to create designs from scratch, visualize interactions, and experiment with user flows.
The design tab in Framer is still quite new and has a long way to go before it can compete against well-established tools like Sketch. In this article I’ll compare the two and highlight where each tool shines.
Platform and Compatibility
Sketch is currently only available on systems that operate on macOs. That means that anyone who would like to work with or even view your design on any other operating system is out of luck.
Framer is in the same boat at the moment. But compared to Sketch, it seems like they’re at least planning on releasing a windows version in the future.
“We do not currently have a version for Windows, you can sign up to be notified once we launch it.”
Something worth noting is that Framer’s mobile preview is available on both iOS and Android. Sketch’s Mirror on the other hand is only accessible on iOS devices.
Exporting and Developer Handoff
Framer doesn’t support exporting yet, but it does have a collaboration feature that allows you to easily create a shareable link like Sketch’s Cloud. Spec’ing is unfortunately also unavailable. At the moment you’re only able to copy the native values of an interaction.
But don’t worry! The Framer Team has confirmed that they intend to release this feature in the upcoming weeks.
Sketch has both features. You can conveniently copy the CSS attributes or SVG code of any element. There’s also plenty of apps that integrate with Sketch, making developer handoff easy.
User interface and Usability
Framer looks and feels a lot like Sketch, which makes for an easier transition for anyone who has previously used Sketch.
The left panel in both tools is used for the same purpose, but the way they function is quite different. We all know how quickly your ‘contents’ panel in Sketch can get overwhelming and busy.
That’s why in Framer your left panel only shows you art boards that you have present on your canvas. Clicking on an art board in the left panel will not display its content. You instead have to click on the actual art board to focus on it. I could see this becoming an issue when working on larger projects where it might be difficult to find that one specific art board.
You’ll also notice that once you actually focus on an art board, the rest of the boards in the left panel disappear. I like this feature since it forces you to focus on what’s at hand, but I also have a couple of issues with this:
- It doesn’t give you a straightforward and immediate overview, which is what I use the panel for in Sketch.
- It doesn’t allow you to conveniently make changes straight from the left panel.
Framer makes up for this, however, with their automated layer nesting, which works very well. You’re able to focus on designing rather than managing and messing around with layers.
The automated layers do most of the dirty work, but if you want to group something together you’ll have to create a new ‘parent’. It works almost the same way, except you aren’t able to minimize or hide the contents of a parent. This could become an issue when dealing with a lot of elements.
Since Framer is more lightweight on features, everything you need is within reach. You don’t have to dig around in your menu bar and it’s actually quite a refreshing change from the busy interface you’ll find when you stare at Sketch.
Though Sketch doesn’t have any native prototyping capabilities, a lot of prototyping tools integrate well with it, including Framer. There’s also the Craft plugin, which brings some basic prototyping functionality to the tool.
This is one of the more unique qualities of Framer—the relationship between the static and the interactive. They use simple targeting and an easy-to-use menu to make adding animation and transitions effortless.
I’ve already covered some features, but here’s the rest that I haven’t mentioned yet. The most obvious difference, of course, is Sketch’s reusable components. It’s something I really wish Framer had because without a decent component feature, building design systems is next to impossible.
Other than that, I wouldn’t say that Sketch has any other notable features that are exclusive. Most of Sketch’s appeal comes from the amount of plugins that are available and supported.
Framer has a few interesting features:
- Built-in icon library: The built-in library is pretty neat. Unfortunately, it’s not possible to import your own icon library at the moment.
- Support of .gif files: This is a tiny but very cool feature. You’re able to import .gif files and they’ll behave like any other layer. It’s that simple!
- Responsive design: Set the layout on your elements and Framer will make it responsive for you automatically. It’s very handy when having to resize your design to adapt to a new device.
In a nutshell:
- Exporting and team collaboration
- Integrated applications and plugin support
- Symbols and reusable components
- Smart and improved workflow
- Advanced and well-built prototyping capabilities
- Design features unavailable in other tools
- Mobile preview available on iOS and Android
What’s next for Framer?
It’s safe to say that Framer is vying to become the main tool of choice for designers, and I think it might just work if they can attain basic feature parity with Sketch. Start your free trial of Framer and get ahead of the pack.
Taking a look at Framer’s as a design tool and comparing it to Sketch was originally published in Framer on Medium, where people are continuing the conversation by highlighting and responding to this story.