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

What is Framer? Join the Community
Return to index
Ashley Einspahr
Posted Feb 11 - Read on Facebook

Hi Framer community! Quick question.

Most Framer examples are a single feature with just a few key interactions. Has anybody tried using Framer to build out a more complex prototype with a few different pages that you can interact with? Or is that not optimal in Framer at this point?

I'm designing an app that I plan on user testing, and it'd be cool if they could interact with it all at once... rather than me opening up a new prototype for each page in the app.

I've played with this a little, but my code gets kind of gross. Not sure if there are some best practices.

20 Comments

Chris Cacioppe

Hey ash! I've made a couple of prototypes with somewhat complex flows.. Like an entire onboarding and setup flow.

My workflow is to spread the various key screens across artboards in sketch.. Import them into framer.. And build the interactions for each screen and link them together with transitions or whatever.

You do end up writing a tonne of code all on the one project but i use comments and lots of spacing between my code blocks to chunk it all out and make it easier to identify..

Im a total beginner on coffeescript so my code is way bloated but yeah it can still totally be done with even a basic understanding!

Artur Muller

Hey Ashley! I would say that for user testing, there are better options like InVision, Prototype on Paper, Flinto etc... I think Framer works best for these complex, one-off interactions where you want to show *exactly* how something would behave.

In my experience, user testing gets you similar result whether you are using *exact* interactions or just approximations (that you can achieve with the above apps), with the latter being significantly faster, allowing for much more rapid iterations.

Amy Casillas

I've used it to build some lengthier prototypes including a full onboarding workflow like Chris above. I break all the different views into separate Sketch files to keep that part better organized. The code is borderline-manageable -- it would be better if I could break it into multiple class files. I think Framer is definitely better for showing short interactions, but it can work for longer prototypes too.

Ashley Einspahr

Thanks guys! Glad to know it can be done, but Artur's right in that I could honestly probably get the same user feedback by building something in InVision without all the pretty transitions. Good call!

There is, however, a feature or two where I'm relying on the transition to make it click with the user. But I could build those as a one-off in Framer.

Thanks again--you guys rock!

Lora Suljic

nooo, I kinda hoped/expected that I could user Framer precisely for that - building prototype of the entire app, using only one super cool tool. I just recently bought Frames and still haven't gotten the time to play with it... maybe it will get simplified in the future with aim to use it for entire prototypes :) :fingerscrossed:

Moaaz Sidat

Hey Ashley, although I do think that there could be a better way that Framer could be used to build out full prototypes, something along the lines of Navigation Controller would be nice (Hmm, I guess I know what I'm exploring in Framer this weekend :D).

I have built out a prototype of an entire app using Framer once. It wasn't a mobile app though. The startup I work for, we make touch-interactive wayfinding kiosks, and I was able to prototype the main parts of the app in Framer, relying heavily on the Sketch file for the UI elements. Keeping in mind how Framer treat Sketch files will be really helpful. By grouping elements belonging to different 'screens' you would be able transition through the different parts of the app.

So yes, it could be done (and the results of prototyping that way for that project were truly significant). Then again, I would also keep in mind some of the faster ways (Invision, Marvel, Flinto, as some people already pointed out), those might be quicker to rapidly build out and do the user testing with.

All the best!

Matt Bogado

I got a bit frustrated with Framer today because I was building a full on prototype with transitions and screens. I opened the file today and it's throwing a bunch of js errors that I didn't have before... I'm starting to believe that Framer is for shorter interactions. But hopefully, future releases will make the code more manageable and salvable :)

Marcelo Eduardo Oliveira

Hi Ashley, I've built 3 out of 5 big features of a product ( smart TV app) including the video player all based on the user testing stories.

My take way for that was:

1. I really needed more organization than the studio could give me, so I used framer outside the studio (sublime + live reload solution )

2. States are fine for small interaction, but I ended up using a simple "state machine" taking care of what feature was on, and how to change between features.

3. Organized the whole code in diff files to avoid the massive size.

The final app you can see in the Xbox one (it's for the Showtime channel ) and I was glad to have such a complete prototype because it was used as documentation for the production team.

Chris Cacioppe

Marcelo Eduardo Oliveira bro that sounds epic! love to hear more about this "state machine" ... case study?! *nudge nudge*

Giovanni Caruso

I agree with Chris Cacioppe. Marcelo Eduardo Oliveira a case study would be a great gift :)

Marcelo Eduardo Oliveira

Chris Cacioppe I actually showed the whole thing at our meetup organized by Cemre Güngör . Because it was client work I never published, but I will try to strip things down and showcase how it was done. The fact that it would be useful for you is enough to fuel this task ;)

Matt Bogado

I'd love to learn your process to put together the entire proto with different framer files. Did you use framer.js or studio?

Juan Sanchez

I’ve been kicking around a workflow for making it easier to create prototypes that need multiple screens from Sketch and repeatable elements with the option to add more rich interactions and customizations. The workflow includes:

1. A naming convention for Sketch layers. Artboards are named based on what the screen represents and layers within are prefixed with that name. For example: Artboard named "login" would have layers named login_button, login_email_input, etc.

2. A series of snippets that makes it easy to get a prototype going.

3. Code that loops through all artboards and layers from an imported Sketch file to make them usable in Framer Studio with the names assigned in Sketch. Thanks Koen!

4. The ability to set the start screen of your prototype. This is also helpful for showing a screen that you want to have immediately visible to work with.

5. The ability to use and create custom transitions by specifying a from screen and a to screen.

6. We’ll also use hotspots, which are basically lime green, transparent Layers to attach events to.

7. Ability to specify an app icon and splash screen for prototypes that are bookmarked to the Home Screen.

8. The ability to swap out an imported Sketch artboard for a more advanced series of layers created with Framer.

9. Using variables for colors and other elements to ensure consistent styling across elements.

10. Pseudo-components for title bars, tab bars, switches, etc. that are repurposed as snippets.

I’ve attached some screenshots of what I’ve described above, but it could probably be greatly improved and optimized. My goal was to make it easier for designers on my team to jump in and use Framer with the hope they’ll want to dig in more :-)

https://dl.dropboxusercontent.com/u/51027/Screenshots/Screen%20Shot%202015-02-07%20at%2012.39.43%20PM.png

https://dl.dropboxusercontent.com/u/51027/Screenshots/Screen%20Shot%202015-02-07%20at%2012.38.26%20PM.png

https://dl.dropboxusercontent.com/u/51027/Screenshots/Screen%20Shot%202015-02-07%20at%2012.38.38%20PM.png

Fran Pérez

Juan, can you share that prototype so we can take a look to the entire code? thanks :)

Jordan Robert Dobson

Juan Sanchez - I have a fairly similar workflow. That's great the hear. Most the of the designers I work with use illustrator however.

Gabriel Jorby

Juan Sanchez looks fantastic idea. Would love to demo it!

Andy Jakubowski

Marcelo, Juan: That sounds impressive. Would love to see more details on your approaches!

Ashley, it is definitely possible to build entire prototypes with Framer. It takes some planning and hacking, but I’ve found it a great way to have an interface you can use and test without focusing too much on performance and code.

For more complex things I use multiple files and an app called ProtoKit to compile them. For transitions I use states and StateWillSwitch event listeners for additional setup. What’s great about Framer is being able to use APIs (or other data sources) to populate prototypes with real data. That really helps in making your designs more realistic and drive your decisions.

Hope that helps a bit!

Ashley Einspahr

Wow, I wasn't expecting so much great input here. Thanks for taking the time to explain, guys. Extreeeemely helpful! I'll try to remember to post which solution ends up working best for my project.

Kjelle Vergauwe

I think you won't see lot's of big examples anywhere, because most big prototypes are either under NDA or are in-house stuff. I bet there are some great and complex prototypes out there that will never see the light of day.

Peter Hilgersom

Matt Bogado try exiting sketch and framer. then start up sketch, start up framer. then reimport the sketch file. that works for me. I also get errors from time to time, not sure where that goes wrong.

Read the entire post on Facebook