How to build a multi-screen prototype in Pixate

A brief introduction:

When it comes to delivering a hi-fi prototype for mobile devices, I can only think of three names: Pixate, Framer, and Origami. After playing for awhile with all three tools, for now, I have decided to stick with Pixate: it allows you to develop your idea without working too much on the code or dealing with the Quartz Composer UI.

Other solutions, like Invision or Marvel, are faster and easier to use, but you can’t push the boundaries when you need to design complex interactions or transitions.

In short, I do not think there is currently a perfect tool on the market, but there are just right tools to accomplish specific tasks.

The problem:

You have probably noticed that after placing four or five screens in the editor the situation becomes chaotic. Almost everyone who’s using Pixate places the main screen on the viewport, and everything else on the right or the top of it, based on the required entry point.

By following this approach, the only way to edit your screens is to turn on/off the groups visibility or the layer clipping. It works flawlessly, until you need to deal with a prototype made-up of four, six, or ten views.

slow, slow, slow!

You don’t want to spend your day by moving your cursor between the layers panel and the views, right?

The solution:

The prototype editing becomes easy, if you place your views on a grid: it’s a familiar concept, if you’re already working with Sketch.

Drag a move animation onto every screen outside the viewport, rename it as init-position and customize its settings like in the example below:

If you need to fade in the view instead of sliding it, initialize the screen at top/left: 0pt and append another init-opacity animation, based on a fade.

Be careful about the layer ordering: the one you want to fade in needs to be on the top.

You’re basically telling to Pixate that when the screen loaded event is triggered, the init animations need to immediately place the view right where you need it, ready to be moved or faded in.

About the technique:

I used to initialize every element, when I was a Flash Designer. After the Flash-to-HTML transition, the technique became useful when you wanted to move certain elements on the DOM (i.e. parallax, scroll triggered animations etc.), and you also needed a fallback to show those elements in their real place when JS was disabled.

(Share with me one minute of silence to commemorate these old memories!)

At the moment, it seems that the Pixate Editor is big enough to handle 21 iPhone6's at once.

An initialized 8-screens grid action:

Below is a customizable JS script: it generates some views with an initialization state and puts them on a grid. Apologies, in advance, for any error; I don’t code anymore, and I haven’t written a single line for a couple years :)

Feel free to improve the script, or just copy/paste/edit it into the Editor!

Design Manager @Netflix. Italian designer who once sold his soul for rock ’n’ roll.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Luca Orio

Luca Orio

Design Manager @Netflix. Italian designer who once sold his soul for rock ’n’ roll.

More from Medium

Experience Mapping between the design tool and transformation driver.

Color alignment for multiple design systems

Building a Design System

The nature of using design systems (Design ops I)

design ops