Has anyone created a full app prototype with Framer yet? One with several screens. Does Framer make this easy?
I find it can get messy at some point, so I usually split my prototype up in multiple. But it’s totally possible, I like this example a lot still: http://framerjs.com/examples/preview/#potluck-onboarding.framer The idea of having scenes.
Framer seems better for micro-interactions. I tend to combine it with something like InVision for the overall flow.
You will have to add your own model and application state to do that. But if you're ok with that Framer is easy to work with.
I am finishing really big prototype with framer now. I had to split it to many many classes to have it tidy. Unfortunately you can't really use Framer Studio for that at the moment. I used my own setup.
Me done it :)
Yes. You just have to start managing a bit more and you'll want to use modules in Studio to help keep things organized.
For my bachelor thesis I had to create a huge prototype with six screens and a lot of functions and animations. But it got really confusing after finishing the first screen! So I used a main file and six modules (every screen with its variables, functions and events got one) and it worked :) I edited the modules in Sublime Text and refreshed the prototype every time in Framer Studio. But just do it when it's really necessary! In the end I had some performance issues cause I imported almost everything from Sketch and I had tons of events and animations. The image shows my main file.
I saw someone put up a 3rd party app that merged multiple framer projects into a walk through
It entirely depends on how you define a screen and how you've set up your project. A screen could be a layer, group or artboard or a combination of all. Just bare in mind that the max file size is 10MB and keep an eye on the execution time.
I broke down the project with individual screens as commonjs modules that could be imported with NPM like this (deleted the list of pages except one to just show the principle: https://gist.github.com/woeldiche/f2b30b42aecb7f014d0a
I don't use Framer studio to build an app using cordova. I used Sublime as the editor and browserify as the module loader.
so I guess this question boils down to what is the simpliest way to load individual screens on demand only once they are needed (e.g. bound to tabbar events, etc.)
This is a proof that we can do full app with framer: https://www.facebook.com/irwansyah.irwansyah/videos/o.385961098197634/10153312167198762/?type=2&theater
irwansyah thanks for the proof, could be more helpful if you posted the code or some snippets of how you did it?
imho the goal of prototyping tools is to validate ideas, if you're spending a ton of time making the perfect prototype, you might as well be working on the actual app.
what is the goal of this, putting it in front of people?
Testing / validating more robust user flows? Otherwise agree with Cemre
Yep. Exactly Cemre. I'll take it as far as implementing parts of the app and details that matter. No point in doing the obvious work.
Yeah- the discussion/questions I am often seeing posted here are "what's the silver bullet to bridge the gap between design work and development work". Just to expound on Cemre's point, although there is tremendous effort in writing production code, it's even more work figuring out a viable solution to the problem you are trying to solve. Doing that to varying degrees of fidelity as efficiently as possible and with more emphasis on communicating and understanding the UX as apposed to more time writing elegant code (that may or may not be viable) the better.
Cemre Güngör It's a great point. Our app is 3 years old and so we want to quickly be able to prototype new features in any part of the app.
And yes, this is put in front of our team and clients to validate ideas and generate new ones. One day we hope to include "general public" also for usability tests.
The reason we're considering framer is because animation isn't really part of our design language - we're still thinking in terms of static screens much of the time. My hope is that we can find tools allowing us to prototype in-screen animations as easily as screen transitions.