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.

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
This option allows a user to control a layer's transparency. If the transparency is set to zero, the Trigger will not activate
Fill Color
This option allows a user to adjust a layer's color's transparency. A Trigger tied to the layer will still activate even if the color transparency is set to zero
Border
Add borders to a layer and adjust the border position as well as color
Shadow
Add shadows to a layer and adjust the color as well as other values
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
This option disables the layer's Trigger
Use as Mask
Unique to vector layers. Option to hide portions of layers that are outside the vector layer

Video Layer

ProtoPie supports mp4 (H.264) video files that are 20 MB or smaller.

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

Audio Layer

ProtoPie supports wav, mp3, and m4a audio files.

Play Automatically
Have an audio file play automatically when the prototype is run
Looping
Have an audio file play in a loop

Camera Layer

You can use the output from a camera in your smart device as a layer. This works when you run your prototype in ProtoPie Player. A placeholder is shown instead when you run the prototype in the preview window or browser.

Auto Start
Have the camera start automatically when the scene starts.
Camera [Front]
Use the front-facing camera.
Camera [Rear]
Use the rear-facing camera.

Text Layer

You can directly insert text in ProtoPie.

Font
You can select the font family used for the prototype here. Selecting System Default will result in the platform’s default font being used in a prototype when it is run.
Weight
The thickness of the font can be adjusted
Size
The text size can be adjusted
Alignment
The text’s horizontal and/or vertical alignment can be adjusted
Line Spacing
The text’s line spacing can be adjusted

Missing Font

If a font used in ProtoPie Studio is missing on the running device, a “missing font” alert will pop up. Alternative fonts can be selected to replace the missing font.

Missing font panel

Input Layer

An input layer is a layer that you can use for entering text using a native keyboard on smart devices or a physical keyboard.

Text Options: Text
If there should be some text pre-typed, you can enter the text here.
PlaceHolder
You can have a placeholder in your input layer. The color for the placeholder can be different from the color of the text typed in the input layer.
Keypad Options: Type
The type of keyboard for smart devices can be changed to “Text,” “URL,” “E-mail,” “Number,” “Text Password” or “Number Password” keyboards.
Keypad Options: Return
The Return key on the mobile keyboard can be modified to “Go,” “Next,” “Send,” “Search” or “Done.” Enabling “Auto Focus Out” will cause the prototype to focus out from the input layer when you tap the Return key.
Keypad Options: Look
On iOS, the keyboard theme can be set to dark or light.

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.

Clip Sublayers

Scroll / Paging

The user can adjust the scrolling or paging properties of a container in the Property panel. Scrolling or paging in a container is possible simply by placing a layer in a container from the Layer panel.

Scroll

This option enables horizontal or vertical scrolling.

scroll interaction

Properties

Direction
The region towards which the finger moves
Overscroll
You can enable or disable the bounce effect that appears when a user overscrolls

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
Overscroll
You can enable or disable the bounce effect that appears when a user overscrolls

Touch Trigger

A touch trigger is a trigger that is activated via a physical touch on the display of a smart device. The trigger can be activated through, for example, a Tap, Long Press or Drag. Other multi-touch gestures, such as Pinch and Rotate, are also supported.

Tap

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

tap trigger
Tap
Move

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

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

Trigger Property

Number of Fingers
Up to five fingers supported

Touch Up

A Response is activated the moment a user physically lets go of a layer. This differs from a tap in that if a layer is dragged and let go, a Response is activated.

touchup trigger
Touch Up
Move

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

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

Trigger Property

Direction
The region towards which the finger moves

Pull

The Pull Trigger is a Trigger with true/false properties. True properties are acknowledged when a layer is dragged to a certain point or at a certain speed. In that case, the layer moves the amount of distance set by the user from its origin. If false properties are acknowledged, the layer returns to its origin.

pull trigger
Pull
Scale

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

Drag

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

drag trigger
Drag
Move

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

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

The response properties linked to rotate triggers

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

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 property of another layer.

chain trigger
Drag
Move
Chain
Scale

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

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

Start

A type of trigger that is activated automatically when a prototype is run or when jumping to a scene.

onload trigger
Start
Move

Trigger Property

Start After Jump
After a Jump response has been completed, the Start trigger will be activated
Start With Jump
During the Jump response, the Start trigger will be activated
Restart Every Time
Each time when jumping to a scene, the Start trigger will be activated

Detect

A response is activated when a layer property or variable changes.

range trigger
Drag
Move
Detect
Scale

Mouse Trigger

A mouse trigger is a trigger that is activated via mouse movements on a computer. Mouse triggers can be used to create interactions where the cursor is brought into our out of an object.

Mouse Over

A type of mouse event. A response is triggered when the mouse cursor is brought over an object.

mouse over trigger
Mouse Over
Scale

Mouse Out

A type of mouse event. A response is triggered when the mouse cursor is brought outside of an object.

mouse out trigger
Mouse Out
Scale

Key Trigger

Press

A response is activated when a key on a physical keyboard or an Android device is pressed.

Trigger Property

Keyboard
All letter, number and arrow keys, the Esc and Tab key, and the space bar can be selected.
Android
The back button as well as the volume buttons can be selected.

Input Trigger

An input trigger is a type of trigger related to the input layer.

Focus

A response is activated when a focus in or out takes place at an input layer. A focus in entails that the blinking cursor appears and for smart devices the native keyboard becomes visible. A focus out would be the opposite of a focus in.

Trigger Property

Focus In
A response is activated in case of a focus in.
Focus Out
A response is activated in case of a focus out.

Return

A response is activated when a user presses the Return key on a native keyboard on smart devices or a physical keyboard.

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

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

Sound

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

sound trigger
Sound
Scale

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

Proximity

A device’s proximity sensor is used to make a Response run based on how close or far something is from a proximity sensor.

Proximity trigger
Proximity
Opacity

Trigger Property

Far to Near
A Response runs if the proximity sensor becomes close to a physical object
Near to Far
A Response runs if the proximity sensor becomes far from a physical object

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 message sent from a different device using a Send response. The message received on one device should match the one sent from another device.
Furthermore, Receive triggers in combination with Send responses can be used in one scene to modularize interactions or reuse a set of responses avoiding repetitive work.

Trigger Property

Channel [ProtoPie Studio]
Select ProtoPie Studio as a channel to allow interactions among devices.
Channel [Android Broadcast]
Android Broadcast allows prototypes on Android devices to communicate with other Android apps and external hardware. Refer to Interacting with other Android apps for more information.
Channel [Current Scene]
To modularize interactions or reuse a set of responses avoiding repetitive work, you can use Receive triggers and Send responses in one scene.
Message
A message is a string that is transmitted. When the message in the Receive trigger on one device matches the message in the Send response, interactions among devices can take place.
Assign to Variable
It is possible to send a value together with a message. This value would have to be assigned to a variable upon receiving.

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.

Fill
Changing the layer’s color
Border
Changing the layer’s border color
Shadow
Changing the layer’s shadow color
color response

Shadow

Add shadows to a layer and adjust the color as well as other values.

Shadow
Shadows can be customized based on the chosen coordinates and blur
shadow response

Border

Add borders to a layer and adjust the border position as well as color

Border Position
Borders can be placed on the inside, center or outside of a layer’s outline
border response

Radius

Changing the layer’s radius.

Change To
Changing the radius of a layer
radius response

Scroll

This option scrolls a layer to a specified location.

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

Go from one scene to another scene.

Scene
Jump to a certain scene
Transition
Transition effects when jumping to a scene
Reset the selected scene
The selected scene will be resetted when jumping to it. If this option is not enabled, the scene is left in its last state
jump response

Playback

Playback works with audio and video layers. Playback can be used to play, pause and seek.

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

Text

A text’s property and the contents can be changed. Text Responses have no duration.

Change To
The text content will be changed to that desired by the user
Size
The text is resized
Weight
The text can be made bolder or lighter
Alignment
The text’s horizontal or vertical alignment can be adjusted
Line Spacing
The text’s line spacing can be adjusted
text response

Stop

The Stop Response allows an animation like a progress bar or a loading animation to stop.

Send

Send responses make interactions among devices possible. These responses 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 message sent from a different device using a Send response. The message received on one device should match the one sent from another device.
Furthermore, Send responses in combination with Receive triggers can be used in one scene to modularize interactions or reuse a set of responses avoiding repetitive work.

Channel [ProtoPie Studio]
Select ProtoPie Studio as a channel to allow interactions among devices.
Channel [Android Broadcast]
Android Broadcast allows prototypes on Android devices to communicate with other Android apps and external hardware. Refer to Interacting with other Android apps for more information.
Channel [Current Scene]
To modularize interactions or reuse a set of responses avoiding repetitive work, you can use Receive triggers and Send responses in one scene.
Message
A message is a string that is transmitted. When the message in the Receive trigger on one device matches the message in the Send response, interactions among devices can take place.
Assign to Variable
It is possible to send a value together with a message. This value would have to be assigned to a variable upon receiving.

Vibrate

Vibration and haptic feedback can be used on smart devices. Refer to Google's Android Developer Documentation and Apple's Human Interface Guidelines for more information about haptic feedback.

iOS
  • Default: Basic vibration.
  • Notification - Success: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has completed.
  • Notification - Warning: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has produced a warning of some kind.
  • Notification - Failure: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has failed.
  • Impact - Light/Medium/Heavy: Provides a physical metaphor that complements the visual experience. For example, the user might feel a thud when a view slides into place or two objects collide.
  • Selection - Selection: Indicates that the selection is actively changing. For example, the user feels light taps while scrolling a picker wheel. This feedback is intended for communicating movement through a series of discrete values, not making or confirming a selection.
Android
  • Default: Basic vibration.
  • Keyboard Press: Haptic feedback when the user has pressed a virtual or software keyboard key.
  • Keyboard Tap: Haptic feedback when the user has pressed a soft keyboard key.
  • Long Press: Haptic feedback when the user has performed a long press on an object that is resulting in an action being performed.
  • Virtual Key: Haptic feedback when the user has pressed on a virtual on-screen key.
vibrate response

Focus

The cursor focuses in on or out of the selected Input Layer.

Focus In
The cursor focuses in on the selected Input Layer.
Focus Out
The cursor focuses out of the selected Input Layer.
focus response

Assign

The value of a variable can be overwritten with another one.

Link

Open websites or apps through URL schemes.

URL
You can enter website URLs and visit a website in the browser or the in-app browser on iOS.
  • e.g. https://protopie.io
  • e.g. https://www.google.com/search?q=protopie
URL schemes allow you to open system apps and third-party apps on iOS and Android devices. Third-party apps usually have their own defined URL schemes.
  • e.g. mailto:hello@protopie.io
  • e.g. tel:+1-212-555-1234
  • e.g. whatsapp://send?text=[[hello]]
  • e.g. fb://feed
  • e.g. slack://open?team={TEAM_ID}
Formula
You can enter formulas and use the Link response more dynamically.
  • e.g. "https://www.google.com/search?q=" + `Input 1`.text
  • e.g. “https://www.amazon.com/s/field-keywords=” + `keyword`.text

Camera

This works with the camera layer. It is used to start or stop the camera.

Action [Start]
Start the camera. You can choose between the front-facing camera and rear-facing camera.
Action [Stop]
Stop the camera.
Camera [Current Camera]
Use the current camera.
Camera [Front Camera]
Use the current camera.
Camera [Rear Camera]
Use the rear-facing camera.
Camera [Switch]
Use the camera facing the opposite side of the last used camera.

Reset

Reset the current scene, a layer or a variable. You can make a whole scene start over and make a layer or variable go back to its initial state.

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
condition 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 list

Manage Scene

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

manage 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.

Recording

It is possible to record a prototype in action while in preview mode. A prototype can be recorded for up to 5 minutes and video files are saved in MP4 (H.264).

scene list

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

Shortcuts

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
Toggle Layer Panel Command + Option + 1 Ctrl + Alt + 1
Toggle Interaction Panel Command + Option + 2 Ctrl + Alt + 2
Toggle Layer and Interaction Panels Command + Option + 3 Ctrl + Alt + 3
Toggle Formula Input Field Command + Return Ctrl + Enter

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
Upload to Cloud Command + U Ctrl + U
Rename Command + R Ctrl + R
Edit Text Layer Command + Return Ctrl + Enter

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
Paste with Interaction Pieces Command + Shift + V Ctrl + Shift + V
Duplicate Command + D Ctrl + D
Delete Delete Delete
Group Layers with Container Command + G Ctrl + G
Ungroup Layers from Container Command + Shift + G Ctrl + Shift + G
Collapse Command + [ Ctrl + [
Expand Command + ] Ctrl + ]
Unfold Sublayers Together Option + Click Alt + Click
Disable Smart Guide Cmmand + Drag Layer Ctrl + Drag Layer
Resize Layers with Center Pivot Option + Resize Layer Alt + Resize Layer
Drag Layers Perpendicularly Shift + Drag Layer Shift + Drag Layer
Increase Delay (+0.01s) Right Right
Decrease Delay (-0.01s) Left Left
Increase Delay (+0.1s) Shift + Right Shift + Right
Decrease Delay (-0.1s) Shift + Left Shift + Left
Increase Duration (+0.01s) Option + Right Alt + Right
Decrease Duration (-0.01s) Option + Left Alt + Left
Increase Duration (+0.1s) Shift + Option + Right Shift + Alt + Right
Decrease Duration (-0.1s) Shift + Option + Left Shift + Alt + Left

Run a prototype

Feature macOS Windows
Run Prototype Command + R Ctrl + R
Toggle Preview Command + P Ctrl + P
Bring Preview to the Front Control + 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