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

What is Framer? Join the Community
Return to index
Chad Lonberger
Posted Aug 01 - Read on Facebook

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.

23 Comments

Stephen Crowley

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.

Marcelo Eduardo Oliveira

I created a full blow prototype combining framer and plain javascript. It worked really well.

Marcelo Eduardo Oliveira

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

Jon Gold

I think so. Maybe combine it with a small routing library, and get handy with custom coffeescript classes to make reusable components.

Koen Bok

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.

Adam Laskowitz

I often wondered how far the capabilities of Framerjs are. Linking to databases, accessing system files, etc. It appears it's quite capable.

Jon Gold

sure, it's just javascript! - you could easily give it data whether that's an AJAX request or provided via a server. I'll see if I have time tomorrow to whip up an example with a Meteor backend.

Gavin McFarland

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.

Jon Gold

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 :)

Jon Gold

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.

Jon Gold

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.

Jon Gold

(probably easiest if you copy & paste it into Studio. lmk if there's anything massively confusing there)

Jens Nikolaus

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.

Ninh Bui

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 ;-)

Marcelo Eduardo Oliveira

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" :)

Jens Nikolaus

Yep, exactly. :)

Gavin McFarland

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.

Elliott Kember

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.

Gavin McFarland

Great example. Thanks Elliott.

Elliott Kember

A pleasure. Koen has apparently been working on something similar so I'm excited to see what that looks like.

Chad Lonberger

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.

Preston McCauley

I'm currently putting together a grunt node package just for this reason.

Read the entire post on Facebook