3. Pixate Studio

Studio

As previously mentioned, Studio is used to create and edit prototypes. All prototypes are stored locally on your system and no internet connection is needed to preview your work.

Pixate files

Pixate Studio is like other desktop applications, in regards to how you create and open files. Creating a new file or opening a file can be found on the Welcome to Pixate screen or through the File menu.

Pixate Studio also comes with samples you can open and experiment with. To open a sample, either choose one from the welcome screen or go to the File menu and choose New from Sample


The welcome screen also has a list of recently opened Pixate files. Tutorial videos, our user guide, and demos can be found by clicking on the Learn more about Pixate link.

There's no need to save your progress with Pixate Studio, as any change to the prototype is automatically saved.

iOS simulator

While we're very proud of being able to offer up native previews of prototypes, we understand the need for a desktop solution for previewing may arise. Pixate Studio includes an iOS simulator, just for this purpose.

Please note, the iOS simulator is only available in the Mac version of Studio. In order to use the iOS simulator, you will need to have XCode installed on your system. If you don't have it installed, you will be prompted to when you visit the Simulator menu.

To access the simulator, click on Simulator and choose a device to simulate.

Studio's interface

Studio's interface is broken down into six sections, each with their own information and purpose.

A - The Toolbox

The Toolbox consists of the layer list, assets panel, and actions panel.

Layer list

The layer list is home to all of the layers in your prototype. This is where you'll create, delete, and reorganize the layers of your prototype.

More on Layers

Assets

The second tab is where you upload images to use in your Prototype. To upload an asset, you can either drag and drop a file from a location on your system, or click the "+" button.

More on Assets

Actions

Actions are scripts that can be run to complete common tasks, like setting up a scrollview or aligning a layer. Example and starter actions are included, and new actions can be created.

More on Actions

B - Interactions and Animations

This area is split into two sections. The first section houses the interactions and the second section holds the animations. To apply these to layers, drag and drop an icon onto the intended layer, in the layer list.

More on Animations and Interactions

C - The Canvas

This section consists of the canvas menu and the actual canvas workspace. The canvas menu has zoom controls, the name of your prototype, the device/dimensions you're prototyping for, undo and redo buttons, and the Merge button. The workspace is the visual representation of your prototype. What you see within the screen bounds, is what you'll see in the preview.

More on the Canvas Menu

D - Alignment tools

These buttons are standard alignment tools for moving layers around the canvas.

E - Layer properties

These settings pertain to the selected layer. This is where you can adjust the layer’s position, size or orientation with values and change the appearance of the layer.

More on Layer Properties

F - Interaction/Animation properties

These settings are specific to the animations and interactions applied to the layer. These are used to define the conditions, ranges of an animation and interaction/animation relationships. Double clicking on a tile will allow you to rename it, and clicking the arrow on the left collapses and expands the properties. You can also toggle the switch on the right to turn the animation on and off.

More on Interaction and Animation Properties

Feedback and Knowledge Base