Intro

ProtoPie is a prototyping tool for smart devices. ProtoPie makes elaborate prototypes possible without any coding, and these prototypes can be tested on actual devices.

Explore design solutions

create a variety of interactions without the help of developers.

Communicate designs

easily explain elaborate interactions to development team members.

Research user feedback

quickly gain user feedback even before actual development

Concept Model

interaction concept model

ProtoPie’s concept model is based on how objects move in the world instead of programming. ProtoPie allows users to generate Interactions with Objects, Triggers and Responses. Objects are the assets that will be moved or otherwise affected, Triggers are those that will move or change the Objects, and Responses are the changes that the Triggers create.

Refer to the screenshot. The tapping action for the Objects is the Trigger, and the resulting movement of the Object is the Response.

interaction piece table

Just as atoms of different elements come together in nature to become a variety of substances, Interactions are made by putting together Interaction Pieces in the form of Triggers and Responses. As seen on the table above, the left symbol is the Trigger and the right is the Response. The Component rests between the Trigger and the Response.

Why ProtoPie?

There are many reasons to use ProtoPie. Here are four major advantages.

1. Low learning cost

ProtoPie has a concept model that can be intuitively understood. Moreover, ProtoPie features a user interface similar to that of other graphics tools, allowing users with designing experience to quickly become accustomed to ProtoPie.

2. Code Free

ProtoPie allows users to create sophisticated prototypes without any code. Interaction Pieces in the forms of Triggers and Responses take the place of complex code as part of creating fullly featured prototypes.

3. Multi-finger gestures & sensors

ProtoPie supports simultaneous multi-touch input, making possible prototypes featuring interactions with two- or three-finger inputs. Moreover, ProtoPie can use the sensors built in smartphones to create prototypes that are more complex than on-screen prototypes and allow for communication among different devices, as well as prototypes for service design.

4. Test on real phones

ProtoPie allows designers to test prototypes on actual devices, and that too on multiple devices simultaneously. ProtoPie can be used in a variety of scenarios, such as developer meetings or audience trials.

Genuine prototyping tool

ProtoPie is a tool that prototypes interaction design. Users of ProtoPie need graphic design software such as Sketch or Adobe Photoshop in order to prepare screens. ProtoPie can import graphic assets, which can be manipulated within ProtoPie to create interactions. Once interactions are created, an actual device running ProtoPie Player can test the interaction after establishing a connection with ProtoPie Studio.

Layer

Layers can be used in ProtoPie just like other design tools. Vector layers like rectangles or ovals can be added, moved and resized freely just like how designers can do so on currently existing design tools.

Layer Property

Position
A layer’s coordinates on the screen area
Size
Size of the layer
Rotation
Angle of rotation for a layer
Origin
Location of the reference point which acts as a basis for changes in a layer’s size, location or rotation
Radius
Curvature of each corner of the rectangle layer
Opacity
Layer opacity
Fill Color
Use hex color codes to select colors for filling layers
Hit area
Hit areas indicate a touch layer for any given layer, and can be larger than the actual layer
Allow Touch to Affect Lower layers
Option to disable reactions to Triggers that have been activated on the touchscreen
Use as Mask
Unique to vector layers. Option to hide portions of layers that are outside the vector layer

Video Layer

ProtoPie supports video layers.
Video files that are 20mb or smaller and in mp4(H264)format can be imported.

Play Automatically
Have the video play automatically when the prototype is run
Looping
Have the video play in a loop

Container

Containers can be used to group a number of layers and control them simultaneously. Furthermore, containers can be used for scrolling or paging interactions.

Relative Coordinates

The x and y coordinates for a layer are based on the assumption that the origin is at the top left corner. However, the coordinates for layers within a container are based on the assumption that the origin is at the top left corner of the container.

Relative Coordinates

Clip Sublayers

Enabling the clip sublayer in the property panel allows clipping within the boundaries of the parameter.

Relative Coordinates

Scroll / Paging

You can modify a container’s scroll or paging properties in the property panel. Once the properties are defined, place the layers that will be scrolled or paged within the container.

Scroll

Scrolling refers to a layer moving the same distance a finger has been dragged on the screen vertically or horizontally.

scroll interaction

Properties

Direction
The region towards which the finger moves

Paging

Paging refers to a container moving the equivalent of its height or width horizontally or vertically, respectively.

paging interaction

Properties

Direction
The region towards which the finger moves

One-Time Trigger

A One-Time Trigger is used to activate an interaction for a preset amount of time when a layer is touched. The properties of the interaction, such as the animation curve, time, delay or repeat option, can be granularly controlled.

Tap

An action where the tip of a finger touches the touchscreen and is raised immediately.

tap trigger
Tap
Move
Download

Trigger Property

Number of Fingers
Up to five fingers supported

Double Tap

An action where the tip of a finger touches the touchscreen twice rapidly.

doubletap trigger
Double Tap
Move
Download

Trigger Property

Number of Fingers
Up to five fingers supported

Touch Down

An action where the tip of a finger touches the touchscreen.

touchdown trigger
Touch Down
Move
Download

Trigger Property

Number of Fingers
Up to five fingers supported

Touch Up

An action where the tip of a finger is raised after touching the touchscreen.

touchup trigger
Touch Up
Move
Download

Trigger Property

Number of Fingers
Up to five fingers supported

Long Press

An action where the tip of a finger is raised after a certain amount of time touching the touchscreen.

longpress trigger
Long Press
Move
Download

Trigger Property

Number of Fingers
Up to five fingers supported
Pressing Time
The amount of time during which a finger touches a screen

Fling

A response is triggered when a layer is swiped across a direction set in the layer’s properties at a speed faster than a system-assigned default speed.

fling trigger
Fling
Scale
Download

Trigger Property

Direction
The region towards which the finger moves

Continuous Trigger

A Continuous Trigger’s Response does not have a duration. The Interaction is timed to the medium that activates the Trigger, like a finger.

Drag

An action where the tip of a finger moves across the screen while touching the touchscreen.

drag trigger
Drag
Move
Download

Trigger Property

Number of Fingers
Up to five fingers supported

The response properties linked to drag triggers

Direction
The area towards which a layer moves
Limit
The minimum and maximum values under which a layer can move
Ratio
The ratio between the distance a layer is dragged and the distance a finger moves on the screen. When the value is set to 100, the two distance values are equal in other words, a layer covers the same distance a finger moves. When the value is higher, the layer moves farther compared to the finger, and vice versa

Pinch

An action where two fingers pull away from or come toward each other while touching the touchscreen.

pinch trigger
Pinch
Scale
Download

The response properties linked to pinch triggers

Direction
The area towards which a layer moves
Pivot
The reference point from which a layer undergoes rotation or resizing
Limit
The minimum and maximum values under which a layer can move

Rotate

An action where two fingers turn in the same direction while touching the touchscreen.

rotate trigger
Rotate
Rotate
Download

The response properties linked to rotate triggers

Pivot
The reference point from which a layer undergoes rotation or resizing

Sensor Trigger

The values from sensors used in smart devices and the mapping of Responses from layers can be mapped to activate Interactions that react to sensors.

The response properties linked to sensor triggers

Smoothness
The layer movements that are mapped to sensor values can be smoothened. The Smoothness setting as indicated by 1 is set so that the sensor values are not smoothened. The values in 2 and 3 represent the smoothened movement. More smoothing is involved in 3 than 2
Mapping Range - Device's Sensor 4
The range for a sensor that activates Interactions
Mapping Range - Response's Layer 5
The range for a layer that will be moved in sync with a sensor

Tilt

A status where a Response runs based on the angle a device is set.

tilt trigger
tilt
Move
tilt image
Download

Trigger Property

Axis
The line around which a layer or asset moves

Compass

A status where a Response runs based on the direction a device is pointing towards.

compass trigger
Compass
Rotate
compass niddle
Download

Sound

A status where a Response runs based on the volume of sound registered.

sound trigger
Sound
Scale
Download

3D Touch

Layers are changed depending on the strength of the force applied on the touchscreen. The value for the force can be set from 0 to 6.7.

3dtouch trigger
3D Touch
Scale
Download

Conditional Trigger

As the name implies, conditional triggers activate Interactions based on specific conditions, such as when a prototype is run, a specific string of text is received or a layer is moved to a specific location.

Chain

An action where the changes of a property of one layer changes the propery of another layer.

chain trigger
Drag
move
Chain
Scale
Download

Trigger Property

Property
Layer attribute values as a reference for changing other layers

Response Properties after Chain

Trigger’s Layer Mapping Range 1
A movement range for a chain’s target layer
Response’s Layer Mapping Range 2
The range of values for a layer that will move within the movement range for a chain’s target layer

Range

Ranges are used to trigger an Interaction when the movements of a Layer meet specific conditions. This differs from Chains in that Chains are used for continuous interactions among two or more Layers, while Ranges are Interactions that are activated when the specific requirements of even one Layer are met.

range trigger
Drag
Move
Range
Scale
Download

Trigger Property

Greater than or equal to 1
When a target layer’s value reaches a certain value
Less than or equal to 2
When a target layer falls under a certain value
Between 3
When a target layer’s value lies between two certain values
Not between 4
When a target layer’s value is outside the range between two certain values

Pull

An action where a layer is pulled horizontally or vertically.

pull trigger
Pull
Scale
Download

Trigger Property

Direction
The region towards which the finger moves
Distance
The amount of space a layer moves
Follow Over Pulling
A reaction that takes place when a finger moves beyond a preset region
Easing
Change of acceleration of layer movement

Start

A type of Trigger that activates automatically when a prototype is run or there is a scene change.

onload trigger
Start
Move
Download

Receive

Receive Triggers make interactions among devices possible. These Triggers cannot be used by themselves, and must be used with Send Responses. A Response is activated when a device with the Receive Trigger accepts a string from a different device via the second device’s Send Response, and the received string corresponds to the string in the Receive Trigger.

Trigger Property

Channel
a channel for communication. Select “ProtoPie Studio” as a channel in order to allow interactions among devices. Android Broadcasting allows apps installed in one Android-powered device to communicate with one another
Message ID
a string that will be transmitted. When the string defined for “Send response” and the string defined for the Receive Trigger are the same, interactions among devices can be activated

Response

A Response is an Interaction Piece that follows the activation of a Trigger. A Response can have different properties based on how it is tied with a Trigger.

Move

Moving a layer to preset coordinates.

Move
Coordinates for a layer’s destination
move response

Scale

Enlarging or shrinking a layer to preset sizes.

Size
It is possible to modify the size of a layer with fixed values for the width and the height. (When containers are resized, the layers within the container remain unchanged.)
Factor
It is possible to modify the size of a layer proportionally by a certain %. (When containers are resized, the layers within the container are also resized.)
scale response

Rotate

Turning a layer to preset angles.

Rotate To
The angle a layer rotates to
Rotate By
The amount of rotation a layer rotates by
Direction
The area towards which a layer moves
rotate response

3D Rotate

Turning a layer to preset angles in a three-dimensional field.

Rotate To
The angle a layer rotates to
Rotate By
The amount of rotation a layer rotates by
Direction
The area towards which a layer moves
Pivot
The reference point from which a layer undergoes rotation or resizing
Perspective Depth
The distance between a layer and a point of focus for viewing
3d rotate response

Opacity

Changing the transparency of a layer.

Change To
Changing the layer’s opacity
opacity response

Color

Changing the layer’s color.

Change To
Changing the layer’s color
color response

Radius

Changing the layer’s radius.

Change To
Changing the layer’s radius
radius response

Scroll

Moving a layer that is bigger than a screen a certain amount towards a certain direction.

Scroll
The amount a layer scrolls
scroll response

Reorder

Changing the order of layers in a stack.

Reorder
The changes of a layer’s order
reorder response

Jump

Moving to scenes.

Jump To
Move to a certain scene
Transition
Effects shown while changing scenes
jump response

Playback

Playing back the video layer. Playback can be paused and users can move to a different part for playback.

Play
Play the video
Pause
Pause the video
Seek
Move to a specific point in the video. Input a desired point in M:SS format

Send

Send Triggers make interactions among devices possible. These Triggers cannot be used by themselves, and must be used with Receive Triggers. A Response is activated when a device with the Receive Trigger accepts a string from a different device via the second device’s Send Response, and the received string corresponds to the string in the Receive Trigger.

Condition

Conditions are essential for Responses as they set up the parameters that will trigger the Response. These parameters must be satisfied for the Response to be triggered.

Greater than
A Response is triggered when a property of the target layer exceeds that set for this property
Greater than or equal to
A Response is triggered when a property of the target layer reaches or exceeds that set for this property
Less than
A Response is triggered when a property of the target layer goes below that set for this property
Less than or equal to
A Response is triggered when a property of the target layer reaches or goes below that set for this property
Equal to
A Response is triggered when a property of the target layer is exactly the same as that set for this property.
Not equal to
A Response is triggered when a property of the target layer is not exactly the same as that set for this property
jump response

Timeline / Valueline

In ProtoPie, the parameters of Responses depending on the the type of Triggers are seen on the Timeline and the Valueline. A Response’s duration, start delay and mapping range can be visually checked on the Timeline or the Valueline, and these values can be modified by dragging in edit mode via the Range Bar that appears when the cursor is placed above the Response.

*There are no timelines or valuelines for responses connected to continuous Triggers because there is no value mapped to time for such responses.

Timeline

The Timeline visually indicates a Response’s time, delay or repeat settings. The Timeline boosts efficiency when numerous Responses are being set up to create microinteractions.

timeline image

Valueline

The Valueline indicates the range of movement for a layer linked to a Trigger and a layer linked to a Response.

valueline image

Scene

When a prototype has two or more pages, a Scene can be added to the prototype. In more complex prototypes, each function can be represented by different Scenes as part of easily maintaining a prototype.

Scene Select

The order of scenes can be modified, and scenes can be duplicated in the Scene panel.

select scene modal

Scene Transition

Movement between scenes is possible with the usage of Jump Responses. The transitions provided by iOS can be used, or optionally, scene changes are possible without any animation.

Animation Curve

When an object moves, it does not speed up or slow down instantaneously. Hence, users find it more natural when an object accelerates and decelerates while in movement. Making use of the Easing function, the Cubic-Bezier and Spring can help create such natural movement.

Easing Function

This is a preset for acceleration seen commonly in the prototype. The Easing function can be set up by selecting ease-in, ease-out or ease-in-out in the Property panel.

EaseIn

  • easeInSine

  • easeInCubic

  • easeInQuint

  • easeInCirc

  • easeInElastic

  • easeInQuad

  • easeInQuart

  • easeInExpo

  • easeInBack

  • easeInBounce

EaseOut

  • easeOutSine

  • easeOutCubic

  • easeOutQuint

  • easeOutCirc

  • easeOutElastic

  • easeOutQuad

  • easeOutQuart

  • easeOutExpo

  • easeOutBack

  • easeOutBounce

EaseInOut

  • easeInOutSine

  • easeInOutCubic

  • easeInOutQuint

  • easeInOutCirc

  • easeInOutElastic

  • easeInOutQuad

  • easeInOutQuart

  • easeInOutExpo

  • easeInOutBack

  • easeInOutBounce

Cubic-Bezier

A customized easing curve can be made with 4 custom numbers. Visit this website to easily create custom Cubic-Bezier values.

*ProtoPie Studio will feature generating Cubic-Bezier values within the app and corresponding visual previews in a future update.

Example

  • Cubic-bezier
    (0.39, 0, 0.23, 1)

  • Cubic-bezier
    (0.71, 0.41, 0.32, 0.76)

Spring

Spring curves make it possible to create dynamic animations where objects bounce.

*ProtoPie Studio will feature visual previews of spring curves and generation of spring curves within the app in a future update.

Example

  • Tension 600, Friction 16

  • Tension 250, Friction 19

Shortcut

Overall

Feature macOS Windows
Hide ProtoPie Command + H -
Hide Others Command + Option + H -
Toggle Full Screen Command + Control + F -
Minimize Window Command + M Ctrl + M

Manage a prototype

Feature macOS Windows
New Command + N Ctrl + N
Open Command + O Ctrl + O
Close Command + W Ctrl + W
Save Command + S Ctrl + S
Save as Command + Shift + S Ctrl + Shift + S

Insert interaction elements

Feature macOS Windows
Image Layer I I
Rectangle Layer R R
Oval Layer V V
Container Layer N N
Tap Trigger T T
Drag Trigger D D
Chain Trigger C C
Move Response M M
Scale Response S S
Opacity Response O O

Edit a prototype

Feature macOS Windows
Undo Command + Z Ctrl + Z
Redo Command + Shift + Z Ctrl + Shift + Z
Copy Command + C Ctrl + C
Paste Command + V Ctrl + V
Delete Delete Delete

Run a prototype

Feature macOS Windows
Run Prototype Command + R Ctrl + R
Toggle Preview Command + P Ctrl + P
Bring Preview to front Ctrl + Tab Ctrl + Tab

Control a view

Feature macOS Windows
Zoom In Command + =,
Z + click
Ctrl + =,
Z + click
Zoom Out Command + -,
Z + Option + click
Ctrl + -,
Z + Alt + click
Actual Size Command + 0 Ctrl + 0
Center Canvas Command + 1 Ctrl + 1
Panning Spacebar + click move Spacebar + click move
Language selector
TOP