Foreword
The experiences I had with Framer are from around August 2018, whilst Sketch came later (September 2018).
As is the case with a lot of good design and prototyping tools, they have added many updates and new features since then.
Therefore, some of the disadvantages that I talk about in this article have already been addressed by now.
This is just something
to note if you've stumbled across this article looking for a current comparison. I'd like to think a lot of what I talk about is
still useful though!
I've been actively designing as a part of my job for a couple months now, and as such I've come across a couple useful tools.
Before this I had only ever used simple applications to draw low-fidelity wireframes,
such as draw.io, and I will briefly reference them in my discussion. But as far as design tools for high-fidelity wireframes and prototypes,
I decided to try out the two most recommended: Sketch and
Framer.
Framer/ Framer X
Let's jump in with Framer. I was looking to introduce a completely new look and feel
to the web app that I was working on, as well as a load of UX improvements, but needed to be able to prove to other members of my team that
it would 'feel' right when interacting with it. It had to be done fast and it had to be high-fidelity.
So I downloaded the free trail of Framer and began. Overall I ended up with several sets of prototypes, each designed for a particular
set of user steps. Some extra screens were also produced to show how the look and feel could be applied to existing pages, done all in a couple days.
Areas Framer/ Framer X excelled in
Firstly, I would say the learning curve is not so steep for Framer's basic functionality. By this I mean:
- I found their UI extremely intuitive to interact with. After watching one or two of their introductory videos (each being maybe two minutes long) where it explains what a frame is and how it's used etc, I was able to get to know all the formatting and text options in the control sidebar. This lets you achieve high-fidelity wireframes as you can fiddle with anything from colour, to font-size, to rotation, to exact x/ y-axis positioning on your frame.
- It's ability to link between frames and showing scroll functionality is one of the neatest things about it. When also coupled with the ability to open your frames and navigate between each one with 'clicks' on the page already made the prototype feel extremely real. This lets you focus on one frame in a certain state at one time, and was much better than trying to flick between pages like I would of had to do with draw.io.
- Using stacks really saves time. With the release of Framer X, which came some months after I first started using Framer, you could form stacks of components, allowing you to easily rearrange them, as they would push up or down (or sideways, depending on the setting) whenever you dragged one of it's members to another position.
So did Framer help me achieve my goal? Yes, it really did. With the linkable frames and shape and text formatting I was able to not only create sets of
high-fidelity wireframes, but also show how a user can transition between them. I presented them not only to my team, but also to stakeholders in the company.
With the ability to add animations,
I could truly show them exactly what each step of a user journey looked like, as well as how they got from one step to another. This generated more discussion
among the team so we could decide behaviours in certain state or error conditions early-- something that would probably have fallen to the wayside if not for the
designs.
They even formed the basis of our tasks for implementation. With something concrete in front of us, we could more easily assign functionality criteria
as well as be more confident that the person carrying out the task more fully understood what was expected of them. As they say, a picture is worth a thousand
words, but I'd like to add that a video is worth a thousand more. Since Framer has the prototype mode that shows all the animations and links when
clicking around on the page, a developer can see exactly how to implement these transitions, and other things that static designs often miss out.
Areas where Framer left me in the dust
Framer was really useful in that situation, and it's still growing in terms of what it
can do, which of course is great.
In Framer X, you can create your components in React and have them actually in Framer, so that when you make
changes to the design, you can change the components themselves! You can even publish them and use other people's component packages.
It's really blurring the lines between design and development, which I think is exactly what we
need-- it means less confusion when translating design into component.
But do I know how to do any of that?... Unfortunately not.
All of that functionality is really useful, but it could be hard to add into an existing
project. It'd require everyone to commit to using this, or at least a small portion of the team investing some time to try it out
and for our small team we don't have the bandwidth for this.
Since I've last used Framer X, loads of useful tutorials have been put up
on how to use their new features. So while it's great to see them really encouraging and enabling designers and developers
to use the features they've built, but you will have to invest the time to get there.
You may come across these difficulties if you use Framer/ Framer X:
- You will need time if you are going beyond their most basic features. The learning curve will be steep and you will a bit more money for their license. I'd love to learn more about projects that fully utilise their react packaging feature and how well this speeds up their implementation of designs!
- It may slow down your computer. This was something that I only really noticed when trying out other design tools. It may have just been in the early versions, but Framer could sometimes be very intensive for my laptop. It was sometimes prone to freezing, but I'm sure most of these performance issues have been ironed out by now-- because boy do they release new versions often-- yay for us!
- How on earth am I supposed to share these designs? At the time that I was using Framer, I couldn't find an easy way to share my designs-- I ended up screen recording a load of walk throughs and taking a load of screenshots instead. I believe they launched a way to collaborate, but perhaps it was taken down or disabled while I was using it. They may have put something similar back in place, but be sure to look into this if that's something that would be important to you!
Sketch
Next up is Sketch. I started using this when I was looking for better ways to collaborate with my team mates and stakeholders on designs that I'd made.
Previously, with Framer it was a bit long winded to get feedback. I either had to send round videos of walkthroughs and wait for responses
to come through, or organise meetings to show the prototypes and collect opinions then.
Sketch came up because of it's recommended use with plugins like
Craft, letting you sync to collaboration tools like
Invision.
I will talk about this more in a post about implementing Design Processes into small
teams, so for now let's get back to Sketch.
Areas where Sketch excelled
Personally, I found Sketch harder to learn. I think this is because Framer seemed more made for developers,
letting you dictate a lot of
the prototype's behaviour though code. It's like a developer made a prototyping tool. To me, Sketch is on the other side of the spectrum; it
feels like a designer made a design tool.
The things I like about it include:
- Slightly more control over style and placement. There are more layout and styling abilities that I haven't yet made use of in Sketch, but from what I did use, I found that the quality of my wireframes were higher. This could be because I'm working more on improving my knowledge of 'making things look good', but I do feel like Sketch had a part to play. Although a little awkward to use sometimes, I found I had more control over component styling, plus it has a load of features to help you with layout, like using gridlines for even placement.
- Exporting made easy. Yes, yes, I know Framer can do this too, but I found there to be more options in Sketch, whether it was for pdf or svg layers. Plus the shape choice is more varied, and that goes a long way when you're making all your svgs (except basic icons) yourself.
- Creating symbols lets you group a load of shapes together and give it a name. You can then drag it or copy it as a whole. This is useful to conceptualise what a component is, as well as mapping out all it's possible states. You then end up with an artboard full of all the components you need for a page, in all their states. This ensures consistency as well as more effectively shows the developer how the component should look in each of those states.
- It's plugins lets you do lots of extra stuff, like share and collaborate. See this post for more on that.
After spending a bit of time looking at tutorials and playing with Sketch, I was off and away and now produce even better looking designs than before. Emphasis
on the better looking. What do I mean by that? I mean that Sketch, or at least the way that I'm currently using Sketch, feels way more focused on the
static look of a page than how it gets from one state to another. It links back to what I said before-- it feels like a designer made a design tool. Not like
Framer, which to me feels like a developer made a prototype (and implementation tool). I know that now Sketch also lets you also link between layers,
but it feels like an add on to me and may not be the key reason people use Sketch.
And really, that's to be expected, as I really see these two tools reflecting the times that they were created in. Sketch has been around for a lot longer than
Framer and used to be the go to design tool (and is still incredibly popular), but Framer has reflected the change in the market. Teams want a tool to let them
do it all: design, prototype and implement. So it's nice to see Sketch keeping up with this, as they've added more and more tools and plugins to let you prototype too.
Things to be aware of:
- A steeper learning curve for even doing what should be fairly simple. I think this is because it let's you do so much, it ends up with loads of menus and options that you just have to get used to using. I'm still not completely there yet.
- It made me foucs on static looks over UX. I can't speak for everyone, but Sketch is what I use when want to focus on putting a page together well, ie layout and content, as well as colouring and fonts. I've not prototyped with it as much as a result, so maybe this is just something I need to play around with next!
Conclusion
So, in summary I'd say: if you want a quick or exploratory prototype, where you focus
on the user's path and how they get through your app (ie UX), use Framer. But, if you are focusing on look
and feel (ie UI) and can take your time to prototype,
use Sketch. I'd also like to add that if you're open to testing new tools, and have the time to do
this with your team, you could potentially improve the
way you create and manage your components if you try Framer.
But let's not forget tools like draw.io for low-fidelity wireframes, best for when you want to map out user paths and states, but do not need to focus on
the UI of it all.
I do find that lately I've been working solely in Sketch for my design work, mostly because there's been a focus on UI and
it's share and collaboration plugins are just so darn useful when coming up with new components. This has meant that Sketch has
become my favourite in that regard, as with it's various plugins you can collaborate and publish components in a design system.
This counts for a lot, and if you're interested in that, I've covered that in another
post here.
