Layers

ProtoPie allows you to use layers for shapes like rectangles, ovals, stars, and polygons, as well as media like images, videos, and Lottie animations.

Layer Properties

Position

A layer’s x and y-coordinates.

Size

A layer's width and height.

Rotation

Angle of a layer's rotation.

Origin

Reference point acting as a basis for changes in a layer’s size, position, or rotation.

Count

Set the number of points of a star or polygon layer.

Ratio

Adjust the distance, shown as a percentage, between the inner points of a star layer and its center.

Radius

Curvature of the four corners of a rectangle layer or each individual corner. To set the radius for each, click on the corners icon and fill in the radius value for each one.

Opacity

Control the visibility of a layer. The layer becomes invisible when opacity is set to 0%, disabling any triggers assigned to it.

Fill — Solid Color

Use hex color codes to set a color fill. A trigger assigned to this layer would still work if the color's fill transparency is set to 0%.

Fill — Image

Choose an image to use as a fill. There are three fill types: fill, stretch, and fit.

Border

Visual outlines for a layer. There are three border types: inside, center, and outside.

Shadow

Drop shadow to add depth and dimension to a layer.

Touch Area

Touch area of a layer that can exceed the actual layer itself.

Make Lower Layers Touchable

Make other layers below a layer touchable.

Use as Mask

Shape layers only. Option to hide portions of a layer that's outside the shape layer.

Image Layer

The Image layer empowers you to integrate and refine images within your prototype seamlessly.

You can add images by dragging and dropping them onto the scene or by creating an image layer and selecting your preferred image via the fill property. Depending on your plan, you can import images from your local files or, for Enterprise users, from a self-hosted URL.

ProtoPie supports the following image formats: PNG, JPG, JPEG, BMP, GIF, SVG, and WebP.

Fill

Select an image for use as a background fill.

Choose between fill, stretch, and fit to control how the image is displayed.

Border

Apply a border to your image layer.

Choose between inside, center, and outside to determine the position of the border relative to the image.

Shadow

Add shadow to your image layer to add depth and dimension.

Fine-tune various aspects such as opacity, radius, fill, and more directly from the Properties panel to achieve the desired visual effects.

SVG Layer

Add SVG (Scalable Vector Graphics) layers and scale them without losing quality. To edit their properties in ProtoPie, convert them to shapes after importing.

• Color gradients and multi-color fills are not supported yet.
• ProtoPie currently supports the following shapes only: path, ellipse, polyline, polygon, rectangle, circle, and line.

Import vector layers as SVG with the ProtoPie plugin for Figma.

SVG code example

You can copy SVG code from Sketch, Figma, Adobe XD, or Zeplin and paste it directly into ProtoPie. Here’s an 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

You can add videos by dragging and dropping them onto the scene or by creating a video layer and selecting your preferred video. Depending on your plan, you can import videos from your local files or, for Enterprise users, from a self-hosted URL.

Source

Choose a video from your device or import one from a self-hosted URL

Touch Area

When enabled, the layer's touch area extends beyond its visible bounds

Volume

Adjust the video layer’s volume property

Play Automatically

Have a video play automatically when the prototype is run

Looping

Have a video play in a loop

ProtoPie supports MP4 (H.264), WebM, and MOV video files up to 100 MB. However, before importing your video into ProtoPie Studio, it is crucial to ensure that your video meets specific criteria for seamless testing with ProtoPie Player on mobile devices:

For iOS:

• Supported formats include MP4 (H.264) and MOV.
  • M4V, MP4, MOV file formats encoded with H.265/H.264 video, up to 4K/60 fps, High Profile level 4.2 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio.
  • M4V, MP4, MOV file formats encoded with MPEG-4 video up to 2.5 Mbps, 480p/30 fps, Simple Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio.
  • AVI file formats encoded with Motion JPEG (M-JPEG) up to 35 Mbps, 1280 by 720 pixels, 30 frames per second, audio in ulaw, PCM stereo audio.
• Reference:
  • Apple AVFoundation AVFileType Documentation
  • Apple AVFoundation AVVideoCodecType Documentation

For Android:

• Supported formats include MP4 (H.264) and WebM.
• Reference:
  • Android Supported Media Formats

Video with Transparent Background

By supporting videos with transparent backgrounds, ProtoPie takes a pioneering step towards 3D while enhancing the performance of your prototypes.

Before importing your video into the ProtoPie Studio scene, verify that the video codec and format meet the below criteria to ensure optimal performance within their designated platform, whether the Preview window, ProtoPie Player, or ProtoPie Cloud.

Transparent background videos perform at their best under the following conditions:

• For the Web: Chrome supports VP9 with alpha (.webm), and Safari supports HEVC with alpha (.mov, *.mp4).
• For iOS: It's recommended to use HEVC with alpha. Incorrect codec/format on iOS may lead to content not displaying correctly within the designated area.
• For Android: Android does not natively support video files with alpha channels.

Lottie Layer

A Lottie media layer loads a JSON file containing parsed Adobe After Effects animations exported with Bodymovin. Learn more about LottieFiles.

You can add Lottie files by dragging and dropping them onto the scene or by creating a Lottie layer and selecting your preferred Lottie file. Depending on your plan, you can import Lottie files from your local files or, for Enterprise users, from a self-hosted URL.

Source

Choose a Lottie file from your device or import one from a self-hosted URL

Touch Area

When enabled, the layer's touch area extends beyond its visible bounds

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.

Volume

Adjust the audio layer’s volume property

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 your smart device's native camera as a layer in your prototype and even scan QR and barcodes. This only works when you test the prototype using ProtoPie Player. A placeholder is shown instead when you run the prototype in the preview window or web 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.

QR & Barcode Scanner

Enable scanning QR and barcodes from within your prototype. The supported formats include QR, as well as barcode subtypes such as CODE39, CODE128, EAN13_UPCA, EAN8, and UPCE.

Open URL Immediately

Scan a QR code to open a link in a web browser. To scan barcodes, utilize the Keep Tracking option.

Keep Tracking

Monitor values stored in your QR and barcode.

Text Layer

A text layer is a layer that displays a text.

Font

You can pick any font that's installed on your computer. Selecting the system default font results in using the device's 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 is missing, a missing font warning will show. Select alternative fonts to replace the missing fonts.

Applying Custom Fonts to a Text Layer

Available in the Enterprise plan only.

Editors can easily apply custom fonts to text layers in ProtoPie Studio by following these simple steps:

1. Select an editable text layer.
2. Access the Font menu located in the text layer's property panel.
3. Browse through the fonts list and select one of the custom fonts available within the “Custom” category. The list exclusively displays the custom fonts accessible within your enterprise team and/or organization.
4. The selected text layer will now be displayed with the chosen custom font.

Note: Only the team owner, team admins, and service admins can upload custom fonts.

Applying Custom Fonts to All Text Layers with the Same Font

Available in the Enterprise plan only.

Editors can effortlessly apply custom fonts to all text layers that share the same font across all scenes in the prototype by following these steps:

1. Click on "Edit" in the top navigation menu.
2. Choose "Replace Fonts" from the options.
3. In the Replace Fonts modal, choose the font(s) you want to replace with a custom font.
4. Click on the “Replace” button.
5. The selected font(s) will be replaced with the chosen custom font(s) throughout the prototype.

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 placeholder 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
  

Background Blur Layer

The following blur effects are supported: three default effects (Dark, Light, and Extra Light) for Android and iOS and ten more blur effects for Web and iOS 13 and newer.

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 for layers. The size and position of child layers adjust automatically according to their constraints when the parent layer is resized manually or through a Response.

1: Position Constraints
You can set the spacing to be fixed on the following sides: top, bottom, left, and right. The layer would then maintain its position relative to the parent layer.

2: Size Constraints
You can set fixed widths and heights. The layer would then maintain its size, relative to the width and height of the parent layer.

Pin to Top Right Corner

By setting a fixed width, height, top spacing, and right spacing, the blue layer would maintain its position relative to its parent layer's right and top sides. Additionally, if the parent layer is resized, the blue layer will maintain its size.

Center Position

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

Fixed Spacing

When the left and right spacing of the blue layer are fixed, its size will adjust while maintaining the same spacing when the parent layer's width is modified.

FAQs

• Which self-hosted URL formats are supported?

  We don't impose any specific restrictions on URL formats. If the URL functions on your website and you host it as a self-server, it should work without any issues.

• Which media file formats are supported?

  Depending on your plan, you can import images from your local files or, for Enterprise users, from a self-hosted URL.

  ProtoPie supports the following media formats:

  • Image: PNG, JPG, JPEG, BMP, GIF, SVG, and WebP.
  • Video: MP4 (H.264), WebM, and MOV files up to 100 MB.
  • Lottie: ProtoPie does not support Lottie files that use expressions.

  An error message will be displayed if you attempt to use an unsupported media file format. Please consult the error code explanation below to understand the supported media file formats.

  • E001: Ensure the URL you entered for the media file has the correct content type.
  • E002: The media type you're trying to use is incompatible; please choose a supported one.
  • E100: Ensure the URL you entered for the media file is correct and accessible online.
  • E101: The file format '.lottie' (Dot Lottie) is unsupported. Choose a different Lottie file format.
  • E102: If you encounter a timeout error while loading a Lottie animation, try again later.
  • E103: Ensure your Lottie JSON file includes the required properties: layer, ip, op, fr, w, and h.
  • E104: If you face a Lottie load error, check if the Lottie file is valid and not corrupted.
  • E105: Lottie assets should use URLs or online resources, not local paths.
  • E106: Review your Lottie JSON file to ensure it's not empty and adheres to the proper JSON format for Lottie.
  • E200: Ensure the HLS URL you entered is accurate and accessible.
  • E201: Verify that your video source URL is accessible and correct.
  • E202: Use MP4 (H.264), WebM, and MOV files up to 100 MB.
  • E203: The video codec used is not supported.
  • E300: ProtoPie only supports audio file formats like WAV, MP3, and M4A.
  • E301: If you experience an audio loading error, ensure the audio file is not corrupted and in a supported format.
  • E400: The image has failed to load. Please check and try again.
  • E500: This file format is not supported; please choose a supported one.
  • E501: There may be an issue with the file. Please check and try again.
  • E600: Ensure that your audio source URL is valid and accessible.

• Does ProtoPie support alpha masks?

  Although the alpha mask feature is not fully supported in ProtoPie, applying it in your designs is possible. You can export the gradient layer as a PNG and import it into ProtoPie Studio. To get a better understanding, check out the following examples:

  • Gradient demo using alpha mask
  • Example of alpha mask