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.
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.
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.
A Lottie layer loads a JSON file containing parsed Adobe After Effects animations that were exported with Bodymovin. Learn more about Lottie and LottieFiles.
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.
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.
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.
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.
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.
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.
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.