A brief introduction:
Why Pixate
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:
An overpopulated editor
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.
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
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!
