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.

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

You can seamlessly integrate and refine images within your prototype with the Image layer. ProtoPie supports the following image formats: PNG, JPG, JPEG, BMP, GIF, SVG, and WebP.

How do you add image layers?

There are two ways to add image layers to your project. The first one is to drag and drop the image onto the scene. The second way is to create an image layer and select an image by setting the fill property. To maintain the image's original dimensions, click the 'Apply original ratio' option in the property panel.

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

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.

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

In ProtoPie, you can import Scalable Vector Graphics (SVG) and edit their properties by converting them to shapes using the 'Make Editable' option without losing quality.

• When working with SVG files that ProtoPie doesn't fully support, the 'Make Editable' button could change how the layers look.

• Color gradients and multi-color fills are currently not supported.

• You can copy SVG code from Sketch, Figma, Adobe XD, or Zeplin and paste it directly into ProtoPie.

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

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. If you want to maintain the original dimensions of the video, you can click on the 'Apply original ratio' option in the property panel.

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

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. If you want to maintain the original dimensions of your Lottie file, you can click on the 'Apply original ratio' option in the property panel.

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

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

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.

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.

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

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

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

Set fixed spacing on Left, Right, L+R (Left + Right), Top, Bottom, T+B (Top + Bottom), Center, or Scale to maintain the layer’s position relative to the parent layer.

2: Size Constraints

Only L+R, T+B, and Scale adjust the layer’s size in proportion to changes in the parent layer’s size, while other constraints maintain the position without affecting size.

1: Position Constraints

Set fixed spacing on Left, Right, L+R (Left + Right), Top, Bottom, T+B (Top + Bottom), Center, or Scale to maintain the layer’s position relative to the parent layer.

2: Size Constraints

Only L+R, T+B, and Scale adjust the layer’s size in proportion to changes in the parent layer’s size, while other constraints maintain the position without affecting size.

Pin to Top Right Corner

By setting a Right and Top constraint, the grey layer would maintain its position relative to the right and top sides of its parent layer. Additionally, if the parent layer is resized, the grey layer maintains its size.

Scale Spacing

By setting the Scale option for both width and height, the grey layer’s size and position adjust proportionally to changes in the parent layer’s size, maintaining the same scaling ratio as the parent.

Fixed Spacing

By setting L+R in the width and T+B in the height, the grey layer would be resized maintaining the same spacing left and right when the parent layer's width is modified.

FAQs