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.
A layer’s coordinates on the screen area
Size of the layer
Angle of rotation for a layer
Location of the reference point which acts as a basis for changes in a layer’s size, location or rotation
Curvature of each corner of the rectangle layer
This option allows a user to control a layer's transparency. If the transparency is set to zero, the Trigger will not activate
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
Add borders to a layer and adjust the border position as well as color
Add shadows to a layer and adjust the color as well as other values
Hit areas indicate a touch layer for any given layer, and can be larger than the actual layer
This option disables the layer's Trigger
Unique to vector layers. Option to hide portions of layers that are outside the vector layer
You can import SVG (Scalable Vector Graphics) files and scale them without losing quality. A SVG file can be converted into a ‘shape layer’ if you need to edit some of its properties such as color, border and shadow.
Color gradients and multi-color fills are not supported yet.
‘Convert to shape’ might not work if some properties of the imported SVG file are not supported yet (ProtoPie currently supports path, ellipse, polyline, polygon, rect, circle and line)
Paste SVG codes
You can copy an 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>
ProtoPie supports mp4 (H.264) video files that are 20 MB or smaller.
Have a video play automatically when the prototype is run
Have a video play in a loop
A Lottie layer renders a JSON file containing parsed Adobe After Effects animations that were exported with Bodymovin. Refer to Lottie for more information.
Have a Lottie JSON file play automatically when the prototype is run
Have a Lottie JSON file play in a loop
ProtoPie supports wav, mp3, and m4a audio files.
Have an audio file play automatically when the prototype is run
Have a Lottie JSON file play in a loop
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.
Have the camera start automatically when the scene starts.
Use the front-facing camera.
Use the rear-facing camera.
You can directly insert text in ProtoPie.
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.
The thickness of the font can be adjusted
The text size can be adjusted
The text’s horizontal and/or vertical alignment can be adjustedLine SpacingThe text’s line spacing can be adjusted
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.
An input layer is a layer that you can use for entering text using a native keyboard on smart devices or a physical keyboard.
If there should be some text pre-typed, you can enter the text here.
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.
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.
On iOS, the keyboard theme can be set to dark or light.
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.)
Ultra Thin Material
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 pink layer would maintain its position relative to the right and top of the parent layer. Moreover, if the parent layer is resized, the pink layer would maintain its size.
By using a fixed width and fixed height only, the pink layer would maintain its center position relative to the four sides of the parent layer when the parent layer is resized.
By using fixed left spacing and fixed right spacing, the pink layer would be resized maintaining the same spacing left and right when the parent layer its width is resized.