Advanced Prototyping with ProtoPie
Learn the basics of ProtoPie all the way to advanced prototyping. After taking this course, you will be able to create realistic prototypes with advanced interactions using variables, conditions, sensors, and more.
Microinteractions for Beginners
Learn about microinteractions for beginners in ProtoPie with these bite-sized videos. After watching these videos, you will able to create your first detailed microinteractions yourself.
Practical Guide to Prototyping
Learn the fundamentals of ProtoPie as well as how to solve real-world problems through prototyping. After taking this course, you will be able to take your designs to the next level of interactivity.
Bring Your App Designs to Life
Learn how to bring your designs to life by turning them into advanced prototypes. After this course, you will master the basics of ProtoPie and be able to add motion and interactivity to your designs.
In this tutorial video, it is shown how to create a prototype involving a 'hamburger menu' using only two simple interactions.Tap
In this tutorial video, it is shown how to create a prototype involving 'scrolling and paging' using the Scroll Container and Paging Container.Scroll Container Paging Container
Toggle Button Component
You can create a reusable toggle button using components. The basics of components are explained in this tutorial video.Component
In this tutorial video, it is shown how to create a prototype involving a 'context menu pull' using only the Pull trigger.Pull
In this tutorial video, it is shown how to create a prototype involving a 'paging indicator' using Chain and a Paging Container.Chain Paging Container
Floating Action Button
In this tutorial video, it is shown how to create a prototype involving a 'floating action button' using Conditions.Condition
In this tutorial video, it is shown how to create a prototype involving a 'sticky header' using ChainScroll Container Chain Drag
The text property of the input layer refers to the text that was entered through the input layer. With functions, you are able to combine texts and manipulate texts to your liking.Input Layer Return Focus
Coordinates of a point where a touch is registered can be used through predefined variables. In order to create a ripple effect at the exact position where a touch is registered, “$touchX” and “$touchY” are used in the Move response of the ripple layer.Formula $touchX $touchY
You can use variables to create a simple spinner that increases by one or decreases by one.Formula Variable Detect
Besides fixed values, it is possible to use formulas for responses. Layer properties can be utilized when it comes to formulas. The x-coordinate of each “menu” layer is utilized in the formulas for the Move responses, in order to achieve an interaction where the blue layer moves left and right, as seen below.Formula
You can create a reusable checkbox using components. Overrides and interactions outside a component are explained in this tutorial video.Component