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.
So I need coding skills to use Framer?
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.
That’s pretty much all I can think of in terms of disadvantages. So I guess I’m sold.
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.