MenuToggle Menu

Layers

Use layers in ProtoPie just like you would in other design tools. You can add, move, resize, and rotate shape layers like rectangles, ovals, stars, and polygons.

To create a shape layer, click anywhere on the canvas and drag with the layer handles. You can also touch anywhere within the shape's borders to freely enlarge or shrink shapes as needed.

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

If the opacity is set to 0%, a trigger assigned to this layer would not work anymore.

Fill — Solid Color

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

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

layer properties

SVG Layer

You can add SVG (Scalable Vector Graphics) layers and scale them without losing quality. To edit their properties in ProtoPie, just 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.

[object Object]

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>
[object Object]
[object Object]

Video Layer

ProtoPie supports mp4 (H.264) video files up to 100 MB.

Lottie Layer

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

Play Automatically

Have a Lottie JSON file play automatically when the prototype is run

Looping

Have a Lottie JSON file play in a loop

video lottie audio layer property

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 a Lottie JSON file play in a loop

video lottie audio layer property

Camera Layer

You can use the output from your smart device's native camera as a layer in your prototype, and even scan QR codes from within it (learn more). 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.

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.

Text Property

Missing Font

If a font is missing, a missing font warning will show. Select alternative fonts to replace the missing fonts.

[object Object]

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
Input Layer Property

Background Blur Layer

The following blur effects are supported: 3 default effects (Dark, Light, and Extra Light) for Android and iOS; and 10 more blur effects for web and iOS 13 and newer.

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

constraints

Pin to Top Right Corner

By setting 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 side of its parent layer. Additionally, if the parent layer is resized, the blue layer would maintain its size.

[object Object]
pin to top right corner property

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.

[object Object]
center position property

Fixed Spacing

By setting a fixed left spacing and fixed right spacing, the blue layer would be resized maintaining the same spacing left and right when the parent layer's width is modified.

[object Object]
fixed spacing property
Back To Top