Is Framer the Ideal Prototyping Tool for Designers?

Framer is one of those prototyping tools that divides opinions. For those who take the time to learn it (or already have the necessary JavaScript skills) there’s nothing quite like it. However, the potential learning curve rules it out for many designers who want the fastest, easiest-to-use tool.

Despite all this, the learning curve comes with some serious rewards – and the fact we’re talking about JavaScript means that time is never wasted. So could Framer secretly be the ideal prototyping tool for designers?

What is Framer and how is it different from other prototyping tools?

If you’re new to the whole prototyping notion, there are two key things to know about Framer. First of all, Framer is a layer-based tool, rather than a page-based tool like InVision, Mockup, Flinto, etc.

This is important because Framer is designed for prototyping interactive applications, not static pages. You’ll soon find page-based protoypers are way too limited for anything with heavy animations, interactions and app-like functionality. Which leaves you trying to explain to developers what does this, what does that and you’ll be lucky if anything comes back the way you imagined it.

This is why layer-based tools are so important for mobile apps and other interactive applications. You can show developers what they need to build and everyone knows where they stand.

We’ve already touched on the other key thing that sets Framer apart. Aside from being a layer-based tool, it’s also a code-based tool – so you’ll be importing your designs into Framer and then coding the interactions yourself.

Yikes.

Framer.js is actually a JavaScript library and this is why designers with JS skills have a distinct advantage using the tool. It’s also why the learning curve for Framer is longer than most alternatives.

So I need coding skills to use Framer?

Yes. But, if you’re not savvy with JavaScript, don’t stop reading just yet. Because this is what makes Framer stand out as a prototyping tool for me. First of all, unlike many tools, Framer allows you to work with everything JavaScript is capable of doing. If it works in-browser, you can do it in Framer – and this is huge.

Secondly, Framer uses a simplified version of JavaScript, called CoffeeScript, and I think this makes Framer the ideal tool for product designers to start learning JavaScript. There’s nothing like working with the interactions you need to use most as the basis for learning a programming language – and Framer does just that.

 

 

It won’t teach you everything you need to know about JavaScript, but it makes the best kind of (advanced) introduction you could ask for. I know this learning curve will still rule out Framer for a lot of designers – and that’s fine – but if you’re new to JavaScript, or want to start learning, I would seriously consider this tool.

 

framerjs-prototyping-tool-homepage-screenshot

 

Coding skills aside, though, there’s far more to Framer than simplified JavaScript.

How does Framer compare to other tools?

Okay, so the fact Framer is a layer-based tool sets it apart from the page-based alternatives. We also know the fact it’s a code-based tool makes it pretty unique, even amongst layer-based tools.

That’s not all that sets Framer apart, though. There are some killer workflow features built into the platform that make it a dream to work with:

  • Integration with Sketch and Photoshop is spot on – far better than any other tool I’ve tried.
  • You can run your prototypes on any device via WiFi (tears of joy).
  • Your prototypes are built in a language developers can understand – literally.
  • You get a more accurate prototype because it’s modelled after AppKit and UIKit frameworks.
  • It’s free!

You have to see the integration with Sketch and Photoshop to believe how good it is. You can call layers and objects as you’ve named them in Sketch/PS and Framer is smart enough to grab them. It’s an absolute pleasure to use.

 

 

Then there’s the fact you can run your prototype on any device sharing the same WiFi connection as your host machine. Again, this is something most tools neglect and, for me, this defeats the whole point of using them. Why use a prototyping tool if it’s a chore to show your work to developers or clients?

Accuracy is also pretty important and this tends to vary across different tools. Sometimes your animations just don’t look or feel the way you imaged them during the design process. You don’t get this problem with Framer because it is based on AppKit and UIKit frameworks that are widely used for iOS applications.

Finally, it’s free. Absolutely free.

What are the problems with using Framer?

As you can tell, the biggest disadvantage to using Framer is the learning curve. This will be a deal-breaker to many, there’s no way around it. That said, I still think it’s worth the effort for any designer that’s new to coding or wants to learn.

The knock-on effect from this learning curve is Framer won’t be the quickest tool to get started with if you’re not comfortable with JavaScript.  Aside from that, if you simply prefer using drag-and-drop prototyping tools, then Framer might not be for you.

That’s pretty much all I can think of in terms of disadvantages. So I guess I’m sold.

Conclusion

If you’re comfortable enough with JavaScript to start using Framer right away, I can’t think of a reason not too. Not only is it free but the fact you can run your prototypes in-browser on any device makes this one of the few tools that are actually useful for collaborating with developers and showing to clients (pretty much the only two reasons you need a prototyping tool).

The big downside (and it is a pretty massive one) is the fact you need to code everything. But, if you’re willing to get your head around Framer’s CoffeeScript dialect, the benefits to this approach are more than worth the effort.