This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Paul Van Slembrouck
Posted Oct 21 - Read on Facebook

I think the community could benefit from some clarification on what Framer is and what it should be used for. I have heard from many people that Framer can be used to build complete apps, but I know from experience that Framer was not made for this. For starters, you can't edit more than a single file, right?

The website says "Prototype anything you can imagine" and "Explore every idea with Framer".. I think this is misleading, in that when I browse dozens of examples, 90% of the examples can be described as "a mobile UI mockup with an animation applied to one or two visual elements"

In contrast, a prototype is a (nearly) fully functional version of a product intended to test ideas and hypotheses from the envisioning phase.
(https://en.wikipedia.org/wiki/Prototype) There are many, many ideas which I can't (and shouldn't) explore in Framer.

So in my view, Framer is not a "prototyping tool," rather it's a presentation and animation tool that is typically used to mock up mobile touch interactions.

The value that Framer provides is:
- parse Sketch / PSD file into addressable layers (so we don't have to slice them out manually)
- wrap the design in a device + hands
- expose some animation parameters and "tween" the layer states
- shareable and downloaded project link

21 Comments

Jordan Robert Dobson

My brother is working on a synthesizer in framer. I've done some audio recording with it. People have done simple and complex stuff.

Ed Lea

It is well suited to build single page interactive demos, true. However, it's totally possible to build multi page / full apps too. I've built some pretty complex prototypes running off live data. Once you start splitting functionality into modules it's pretty manageable. At the end of the day, it's html, CSS and JavaScript, so imagine all the things you can do with that.

Josh Peters

Oh semantics. Seems like we'd have something better to do. If you don't understand what Framer does, it's not up to Framer to educate you on it.

Andrew Nalband

I built a fully playable game in Framer. With levels. No offense, but your definition of prototype is wrong. A prototype is anything less than the full product that you can use to test or communicate some aspect of it. There are paper prototypes, visual prototypes, click through mockups and many more.

Ryo Lu

Framer is much more flexible than the other prototyping tools out there. It's code, you can do whatever you want without much constraints.

Josh Puckett

I'll throw my thoughts in: Framer is a webkit based javascript framework bundled with a fully featured IDE that makes rapid prototyping easy and fun. What's more, because it's a 'webkit based JS framework', the limit of your prototype is the limit of your coding ability. To be sure, it offers a lot of utility for simple state to state transitions, or 'simple things', but it can also go much deeper. A thing we definitely need to work on is to lower the learning curve so that anyone can make 'complicated' prototypes if they want.

When designing Carousel, a photo app that millions of people use to keep all of their photos safe and organized, we used Framer extensively, pushing lots of (more so webkit) limits. We essentially built the entire app (with paired down functionality and performance) as we prototyped in Framer to explore things like scrolling back through thousands of photos, and quickly curating sets of photos in a lightbox.

The reason 'anything you can imagine' is important here is because it's true. Code offers you infinite flexibility. You're not limited to "slide right, slide left" as in some tools, nor are you limited to the collection of patches someone else has made. If you can code it, you can do prototype it in Framer (often quicker and more easily than anywhere else).

Marcelo Eduardo Oliveira

Oh man, the tone of the post kills me. Really? If you don't know what you can do with programming then we're in trouble explaining.

I've done full product UI's, TV UIs using remote controls, joysticks, etc... all with framer. Honestly, the only limitation frame has is the webview it runs on.

Irwansyah

Hahahaha, I was trying to told people here that Framer can do more thing not only for prototyping, we can even build a full apps on it. But most people here insists that Framer is only for prototyping. Now you're saying that Framer is not even a prototyping tools. Well, I bet that's because you haven't give it a try so you don't know what you're talking about :)

Irwansyah

Re-read the post again, @
Paul Van Slembrouck is confusing Framer (the open source framework) with Framer Studio that can only edit a single file. So, I am not sure who's fault is that

German Bauer

The introduction course from the company words it pretty well:

"...What you shouldn’t use Framer for

We’d never want to limit you or your creative ideas. However, in interest of making your learning curve less steep, just realize that there are some situations where Framer isn’t the right tool.

We’re going to fess up and explain the problems we can’t help you solve. That way, you won’t waste time trying to use Framer for something it isn’t made to do. Don’t try to build a complete app or every function of a complex interface.

While Framer can certainly handle a lot of depth and many simultaneous actions, it’s just not the right choice for building a real app. There’s no way to export your Framer prototype to production-ready code, and we did it that way on purpose. Framer should free you from the constraints of production code. It’s a way to explore ideas and find new solutions.

Further, there is a point at which the line between prototype and real software gets blurry. We encourage you to stop well short of that line. Go create detailed prototypes! But don’t spend so much time on your prototypes that you end up building a complete interface you can’t really deploy.

For example, don’t prototype a form, its many validation states, a loading graphic, and a success message. You might as well build the real thing! However, if there are 1 or 2 details about that form you need to decide, create a quick experiment for each..."

Paul Van Slembrouck

To frame my post better, just imagine a designer or developer coming in to the sea of new prototyping apps (Origami, Pixate, Axure, Comet, UXPin, InVision, and so on). I'd love to know how these are categorized by use. i.e. X is good for desktop BI apps, Y is good for testing mobile interactions, Z is good for responsive websites, etc.

The word "prototype" may be getting too broad.

I'm not saying that you can't build full apps with Framer.. I just don't understand why you would. I can build a processor in Minecraft, and that sort of creative play is great, but it's not the best tool for building a processor.

Irwansyah

Paul Van Slembrouck it's better that you define what you mean by Framer first. Because Framer Studio is using Framer (https://github.com/koenbok/Framer) JavaScript framework. Framer Studio seems to be designed so that when someone open it, he can directly write code to implement his idea and sees what the code do directly on the output window on the right. But for a real programmer that one file editing is not a limitation to build a full blown apps using Framer Studio. While if you mean Framer as the Framer JavaScript framework than even though it was designed to support the Framer Studio we can do a lot of things on it, just like React js.

Kevin Cannon

Meow!

Michał Jarosz
Marcelo Eduardo Oliveira

Paul Van Slembrouck I see your point now.
I think your doubt is more common than we thought, but they way you framed, you are expecting each tool to position itself in a really narrow way. That, for tools like origami and Framer will be super hard given it's flexibility. And that's what we are pushing.

TL;DR :
The answer your looking for will still be confusing: Framer is a code based prototyping tool that can be used for simple flow (clickable prototypes like invion, marvel ) ( but I wouldn't recommend you to ) all the way to new, never done before small interactions or fully capable, state drive ( this is where framer shines for me ) apps.

So from the beginning : We're all designers ( almost ) and we work in a simple way: we have an idea ( hypothesis ) and we need to do one thing : validate it right? So we go there ( wireframe / design ) what we want and we need, quickly to put this in the user / stakeholder's hand. How do you do it?

The answer here comes from what your idea relies on. Sometimes you just want to :

1. validate the flow :
( Does the person understand the navigation structure? why it is organize it this way? Does he / she see the main call to action ? Did they know where to go? )

For those kind of questions, simple clickable flows are the way to go. you will get a simple (sometimes with nice transitions ) but thats it. You're not inventing anything new ( in the micro interaction levels )

2. you want to create a small interaction / feature that - maybe - will even define the app and depends Heavily on motion:

The answer here is subjective. You need both to validate if people get it, but also how delighted they could be. for those prototypes, you will need more powerful tools. Here, invison, marvel, axure and all others in that layer will not help. You will need something that gives you the freedom After Effects folks have: code (framer and others) or visual programming ( Quartz / origami ) or really powerful timeline system ( like principle ) or to a point ( pixate did with inspectors and so forth )

3. You want to validate a full concept. Ok, I am writing now concept to not be confused with App. Sometimes you design something that relies on motion, and actions to work. Like complex flows to activate something, or even, you're designing a designer tool! ( see a post by Josh Puckett on designing with data, where he is designing tools with a prototyping tool )

In order for this one to be validated in a meaningful way, YOU will need to make it feel pretty real. Of course, - and now finally answering your question - you do need sometimes to build almost a full app CONCEPT. I say almost, because we limit the scope to the flow we want to test. But the user must be able to browse, interact, see the responses, go back and forth, it should save states, and really feel like the real deal. This is the real usability test, the several of us here probably faced dozens of time, where the prototyping word has it's strongest meaning : it's a way to put your idea in front of people in the most realistic / or meaningful form, in the shortest time possible.

To give you an example: It took me ( a non developer ) 8 days to build a prototype for Streaming TV app, that was tested in lab, covering 5-6 areas all the way to the video player and the recommendation engine.

Could a developer have done it? Yes, and probably in 5 days or less ;) But the whole point now is that a lot of designers works in smaller teams where you don't have dedicated developers just for prototyping - for them tools don't matter that much - but when you have something like framer, you indeed can prototype anything you can imagine. As long it has a webview to run it, you're fine.

sorry for the book :)

Paul Van Slembrouck

Another tool! --> https://floid.io/

Paul Van Slembrouck

To those building full apps, I assume you are not shipping these apps to users in their Framer-based iterations, right? The Framer guys + gals say this :

"While Framer can certainly handle a lot of depth and many simultaneous actions, it’s just not the right choice for building a real app. There’s no way to export your Framer prototype to production-ready code, and we did it that way on purpose. Framer should free you from the constraints of production code. It’s a way to explore ideas and find new solutions.

Further, there is a point at which the line between prototype and real software gets blurry. We encourage you to stop well short of that line. Go create detailed prototypes!"
(Thank you German Bauer)

Paul Holliday

What we are looking for is something that is almost dead - Flash and Actionscript 3

I'm currently exploring many tools too. I'm currently interested in fusetools.com at the moment.

Else I have considered just learning swift as designcode suggests

Else I find framerjs too limiting for what I want to prototype (more than a simple animation) in any sense + coffeescript is based upon invisible spacing which makes it prone to bugs.

Hugo des Gayets

Haters gonna hate

Rafael T Balbi Jr.

There's varying degrees to prototyping...they're all used to explore ideas. paper prototypes, wireframes, framer, and production apps all play a part in this. Sounds like you may have a case where framer isn't the best fit. I've heard of designers/pm settings up a quick database with Firebase to use production data in their prototype. But again that requires HTML/CSS which is definitely a step above importing designs from sketch.

Read the entire post on Facebook