Layers
You can use layers in ProtoPie just like you do in other design tools. Vector layers like rectangles or ovals can be added, moved, and resized freely.
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

SVG Layer
You can add SVG (Scalable Vector Graphics) layers and scale them without losing quality. To make their properties editable, just convert them to shapes after importing.
Color gradients and multi-color fills are not supported yet.
ProtoPie currently supports the only following shapes: path, ellipse, polyline, polygon, rectangle, circle, and line.
Import vector layers as SVG with the ProtoPie plugin for Figma.

Paste SVG codes
You can copy SVG code from Sketch, Figma, Adobe XD or Zeplin and paste it directly into ProtoPie. Here’s an example:
SVG code example
<svg width="175px" height="166px" viewBox="0 0 175 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<polygon id="Star" fill="#2212D4" points="87.5 137.25 33.7176494 165.525055 43.9891644 105.637527 0.478328759 63.224945 60.6088247 54.4874725 87.5 0 114.391175 54.4874725 174.521671 63.224945 131.010836 105.637527 141.282351 165.525055"></polygon>
</g>
</svg>


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

Lottie Layer
A Lottie layer renders a JSON file containing parsed Adobe After Effects animations that were exported with Bodymovin. Learn more about Lottie.
Play Automatically
Have a Lottie JSON file play automatically when the prototype is run
Looping
Have a Lottie JSON file 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 a Lottie JSON 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
A text layer is a layer that holds text.
Font
You can pick any font that's installed on your computer. Selecting the system default font results in using the device its default font in the prototype.
Weight
You can adjust the thickness of the font.
Size
You can adjust the font size.
Alignment
You can adjust both the horizontal and vertical alignment.
Text Resize
A text layer can resize automatically based on width or height, or be of a fixed size.
Letter Spacing
You can adjust the spacing between characters.
Line Height
You can adjust the spacing between lines.

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.

Input Layer
An input layer is used to enter single-line or multi-line text via a native keyboard on smart devices or a physical keyboard.
1. Text
You can add text that would appear as pre-typed in the input layer.
2. Placeholder
You can have a placeholder in your input layer. The place holder color can be different from the color of the text typed in the input layer.
3. Keypad Type
For single-line input layers, there are various keyboard types for smart devices you can choose from:
Text
URL
Email
Number
Text Password
Number Password
4. Return
You can modify the return key on the native keyboard for smart devices with one of the following:
Go
Next
Send
Search
Done
New Line (for multi-line input only)
5. Keyboard Theme
On iOS/iPadOS, the keyboard theme can be set to dark or light.
6. Focus Out Options
There are two options to focus out of the input layer:
Tap the return key
Tap outside of the input layer

iOS Background Blur Layer
You can use 13 types of iOS Background Blur effects that work for iOS 13 and greater and web. (You can use 3 default background blur effects on iOS 12 and below.)
Default Effects
Extra Light
Light
Dark
Material Effects (Light and Dark themes)
Ultra Thin Material
Thin Material
Material
Thick Material
Chrome Material

Constraints
You can set constraints to layers. A layer its size and position would be adjusted automatically according to its constraints when its parent layer is resized. The constraints also apply when the parent layer is resized by a response.
The left part determines the position constraints. You can use fixed spacing on four sides: top, bottom, left, and right. This means that a layer can maintain its position, relative to any of the four sides of the parent layer.
The right part determines the size constraints. You can use fixed widths and heights. This means that a layer can maintain its size, relative to the width and height of the parent layer.

Pin to top right corner
By using a fixed width, fixed height, fixed top spacing, and fixed right spacing, the blue layer would maintain its position relative to the right and top of the parent layer. Moreover, if the parent layer is resized, the blue layer would maintain its size.


Center position
By using a fixed width and fixed height only, the blue layer would maintain its center position relative to the four sides of the parent layer when the parent layer is resized.


Fixed spacing
By using fixed left spacing and fixed right spacing, the blue layer would be resized maintaining the same spacing left and right when the parent layer its width is resized.

