Is Framerjs suitable for "larger" prototypes? Ideally I want to prototype entire products (or portions of products) to use during customer interviews/usability studies. Any thoughts on this? Thanks in advance.
With Framer Studio and Sketch and the current releases I am successfully prototyping a large portion of the product flow. Example: Search for Person, See Results, Select Person, Pull up Profile view, interact with elements of the profile etc.
Full featured with data sources and everything functional.... Even the video player. We used it in the usability test and it was also delivered as main documentation
I think so. Maybe combine it with a small routing library, and get handy with custom coffeescript classes to make reusable components.
The answer is yes. But the bigger your code gets the better you want to organize it. With code, you yourself are often your biggest constraint.
I often wondered how far the capabilities of Framerjs are. Linking to databases, accessing system files, etc. It appears it's quite capable.
It is possible but some things I've found with larger prototypes are, 1) it's quite difficult to organise your code as you can't indent to make things stand out and neither can you split your coffeescript up into smaller files 2) naming layers becomes really arduous and you end up nesting a lot of layers which is quite hard to manage 3) if your prototype uses a lot of images it can take a long time to load both on wi-fi when you are demoing your prototype and also while editing your code as the preview updates.
Gavin - you can arrange your code into separate files - either using Utils.domLoadScript, or using CommonJS/Browserify/RequireJS/ES6 modules/anything really. also, if you use coffeescript classes you can get them to build their child elements so everything is much neater and more maintainable. the project I've just worked on is NDA so I can't share any code; someone think of a concrete example and I'll code it today :)
also, on 3) - you could probably do something smart with caching if you're using the same images over and over. like, say, making a sprite, encoding it as base64 and storing it in localstorage.
https://gist.github.com/jongd/30fff006e1a2ae14f55f - this shows using subclasses of Layer to encapsulate parts of components. it's a little bit messy, but I have to get back to work xD. Main points of note: 1) I'm rarely doing messy thing = new Layer - most of it is locked up within classes. 2) I just called new Feed() once to kick off the whole app.
(probably easiest if you copy & paste it into Studio. lmk if there's anything massively confusing there)
In the real world I don’t have time to build prototypes that are almost apps in themselves, I want to define a goal, test it with multiple prototypes quickly and move on. I think this is what framer is perfect for.
Jon: be sure to check out phusionpassenger.com if you're planning on using meteor and need a good app server to go with it ;-)
Jens Nikolaus The simplicity ( layer based ) of framer give us both. Some people use it ( we've seen a lot ) to test animations, transitions and interaction models. I feel really comfortable using it to build my mobile and (specially) TV app's prototype that are used for usability testing, and I can tell you.. not dealing with css / html, and having the framer generator to speed up positioning / slicing makes Framer also perfect for that.
Another important point for me (us here in the company) is that the prototype after usability test, gets a final session of love and is delivered as the main developer "documentation" :)
Yep, exactly. :)
Thanks Jon, that's really useful. I've copied it into Framer Studio and already started playing around with it. Writing classes is new to me but on first glance it looks a lot neater and easier to manage.
It is possible. One thing you'll want to do is segment parts of your flow to work on them. I used this recently: https://gist.github.com/elliottkember/0105c2c2279b0d347707 - an application state machine for defining stages in the flow.
Great example. Thanks Elliott.
A pleasure. Koen has apparently been working on something similar so I'm excited to see what that looks like.
Thanks to everyone for the helpful replies so far. Instead of subclasses or requirejs type approach, has anyone tried an opinionated framework (AngularJS for example) with framer to help keep things organized for larger prototypes? Seems like it could help with other heavy lifting as well (routing, services, stubbing data models, binding, etc).
Jon Gold Like your idea on using components with own classes. Another approach is to use layer.copy() and layer.copySingle(). The former method is used for copying layer and its sublayers.
I'm currently putting together a grunt node package just for this reason.