How to build a multi-screen prototype in Pixate

Luca Orio
Luca Orio
Jun 18, 2015 · 4 min read

A brief introduction:

Why Pixate

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:

An overpopulated editor

Image for post
Image for post

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.

Image for post
Image for post
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:

Place your screens wherever you want , and reposition them once the prototype has been loaded

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

About the technique:

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

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

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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