20 Prototypes Easy to Replicate in 5 Minutes
20 showcases made with ProtoPie.
![Leah Han](https://cdn.sanity.io/images/qyzm5ged/production/67cb2146165aff6e7f1552fc6bb891445f745d51-120x120.png/Leah-ProtoPie-Teacher.png)
![20 Prototypes easy to replicate in 5 minutes thumbnail](https://cdn.sanity.io/images/qyzm5ged/production/9138492991b371d00f5372d1f06468fbee443225-2138x1200.jpg/20-prototypes-easy-to-replicate-in-5-minutes-thumbnail.jpg)
Within the five months since ProtoPie’s official release, ProtoPie has become the prototyping tool of choice of designers in 37 nations. Many users have shared their prototypes on Dribbble and the ProtoPie Community, among other channels, and we at ProtoPie chose 20 prototypes that have great aesthetics and are easy to follow.
So, how can you use this post?
1. Look through prototypes that interest you.
2. Click on the links you’re interested in and run them yourself.
3. Download the source file and imitate it.
4. Show off your prototypes on Dribbble or the ProtoPie Community.
Diary
![diary app prototype](https://cdn.sanity.io/images/qyzm5ged/production/69187bca1fee68016c569089ac0f0195c0eb5fdd-800x600.gif/diary-app-prototype.gif)
The prototype’s concept is that of a diary app, so there are interactions for page flipping and choosing entries. There are many repeatable interactions in this demonstration, so using ProtoPie’s Scene Copy feature will make it easier to put this demo together.
Download
https://share.protopie.io/eLWb28tsH2c
Keywords
Page Transition, 3D Rotate, Card UI, Pull
Android Lockscreen
![android lockscreen prototype](https://cdn.sanity.io/images/qyzm5ged/production/7fbd9afc169559cfb17af66be7dd7e372b3f2c21-800x600.gif/andriod-lockscreen-prototype.gif)
You can pull down a banner hidden at the top of an Android phone by flinging, and hide it with a pull.
Download
https://share.protopie.io/HxL5WtXYbot
Keywords
Fling, Pull
Payment
![payment prototype](https://cdn.sanity.io/images/qyzm5ged/production/36c85adf680f7924a4984ef82b01a3396f81a378-800x600.gif/payment-prototype.gif)
This prototype shows a concept for transferring money. And you can drag the photo of a person into a designated area to wire money. This prototype shows how easy it is to use Conditions and Ranges.
Download
https://share.protopie.io/bwnShi3EPSv
Keywords
Condition, Range, 3D Rotate
Card Transition #1
![card transition prototype 1](https://cdn.sanity.io/images/qyzm5ged/production/3a7a7f441052bcd2d05fa4b90c2acb290dfce3de-800x600.gif/card-transition-prototype-1.gif)
Seongwon Yun submitted this prototype that incorporates the Reorder function to allow the resorting of cards by dragging the cards left and right.
Download
https://share.protopie.io/bAgkuvhtvpD
Keywords
Reorder, Drag, Card UI
Card Transition #2
![card transition prototype 2](https://cdn.sanity.io/images/qyzm5ged/production/15ba9a5c92c77d2ba80dbf4d20902cd26afc326d-800x600.gif/card-transition-prototype-2.gif)
Clicking on the card makes it possible to scroll through the contents. Once you reach the bottom of one card, you can go to the next card. The 3D Rotate function spices up the overall interaction.
Download
https://share.protopie.io/Ehmrm3M1S4E
Keywords
Card UI, 3D rotate, Scene, Pull, Scroll
Card Reorder #1
![card reorder prototype 1](https://cdn.sanity.io/images/qyzm5ged/production/6b6ff3c047f2a8472356e1a8cf16f06050491216-800x600.gif/card-reorder-prototype-1.gif)
This prototype features an interaction which puts the desired app in fullscreen mode.
Download
https://share.protopie.io/fcMTGqMGwwJ
Keywords
Card UI
Card Reorder #2
![card reorder prototype 2](https://cdn.sanity.io/images/qyzm5ged/production/78d665428867c0bbd10f85d5183904f5d45f941c-800x600.gif/card-reorder-prototype-2.gif)
This prototype has an interaction that allows you to select apps from a “carousel” of apps.
Download
https://share.protopie.io/VvT3vc6efMf
Keywords
Carousel, Paging, Card UI
Flickr Onboard
![flickr-onboard-prototype](https://cdn.sanity.io/images/qyzm5ged/production/3d93bb1788780a6ec8bcd4260250c12fd5564149-800x600.gif/flickr-onboard-prototype.gif)
This is an interaction featuring paging for an onboard experience. You can duplicate this in a matter of minutes in ProtoPie.
Download
https://share.protopie.io/EST6pUhGLGv
Keywords
Paging, Indicator, Chain
Number Input
![number-input-prototype](https://cdn.sanity.io/images/qyzm5ged/production/04e46c701ac8ca7f177ed3b12adc897b5dd97756-800x600.gif/number-input-prototype.gif)
This interaction features inserting numbers with a zoom effect, and can be easily made with conditions from ProtoPie.
Download
https://share.protopie.io/cy8QhmiRWuK
Keywords
Scale, Condition
Material Mail
![material mail prototype](https://cdn.sanity.io/images/qyzm5ged/production/f72583f7e00205f0c1b4a9c363f39a3e457559e6-800x600.gif/material-mail-prototype.gif)
Google’s Material Design calls for the usage of masks during screen transitions or when objects appear on the screen. ProtoPie’s masking feature can easily simulate this.
Download
https://share.protopie.io/EQmkKwHyLA9
Keywords
Material Design, Mask
Panda
![panda prototype](https://cdn.sanity.io/images/qyzm5ged/production/85057562b68bc4267b9eee31cd02d69b8fd3ea10-800x600.gif/panda-prototype.gif)
A cute panda will be on your hand if you drag the screen.
Download
https://share.protopie.io/eN4vfmJffBc
Keywords
Drag, Chain
Header Transition
![header transition interaction](https://cdn.sanity.io/images/qyzm5ged/production/8ca5f8d35664321ea21aa75e8c0c1b08532134db-800x600.gif/header-transition-interaction.gif)
This interaction features differences in the header color and the indicator location depending on the contents shown on the screen.
Download
https://share.protopie.io/3wcDRFmQf4Z
Keywords
Range, Indicator, Color
Pull to Refresh
![pull to refresh interaction](https://cdn.sanity.io/images/qyzm5ged/production/94d28a514aff36db073ef9eb39311257dda5105c-800x600.gif/pull-to-refresh-interaction.gif)
This is a simulation of Pull-to-refresh, an interaction in which the page gets dragged a certain amount and temporarily pauses before returning to its original position.
Download
https://share.protopie.io/gxZ5J7c75xR
Keywords
Condition, Scroll, Repeat
Sticky Label
![sticky label interaction](https://cdn.sanity.io/images/qyzm5ged/production/da63a00e3a2b8a6e926993231b3a0a7327560f67-800x600.gif/sticky-label-interaction.gif)
This interaction is commonly seen in contents in the form of long lists, like contacts. Depending on which contents are visible, the displayed category changes.
Download
https://share.protopie.io/fhhhwrKNc4W
Keywords
Range, Scroll, Chain, Indicator
Toggle Button
![toggle button interaction](https://cdn.sanity.io/images/qyzm5ged/production/e0f0bb447c7fa8b3829170b66257f6c1dfc764ac-800x600.gif/toggle-button-interaction.gif)
This Interaction switches between two different states with one tap. With ProtoPie, You can set up not just two, but three or more different states.
Download
https://share.protopie.io/ZrpYPgKbUjY
Keywords
Toggle Button, Condition
Uber
![uber prototype](https://cdn.sanity.io/images/qyzm5ged/production/70a00af56c91352c8971becd92e4d0183d2f22dd-800x600.gif/uber-prototype.gif)
This prototype features selecting a starting point and a destination just like how you would grab an Uber. The Interaction appears on one page, but the prototype features 3 scenes to reduce the complexity of the interaction.
Download
https://share.protopie.io/8eXJkrLwUuk
Keywords
Scene, Opacity
Download Process
![download process interaction](https://cdn.sanity.io/images/qyzm5ged/production/d05f41beac593ede393758e55f16484fa682c6a6-800x600.gif/download-process-interaction.gif)
This is a demonstration visualizing a download process with a circle. You can make this by using an Interaction that uses a rotating Container.
Download
https://share.protopie.io/7EujXR2MewY
Keywords
Container, Rotate
Login
![login prototype](https://cdn.sanity.io/images/qyzm5ged/production/e90e3946393706a23f1394d826b2cd131fcbbb6e-800x600.gif/login-prototype.gif)
This is the login prototype utilized by Material design. When going from the login page to the profile page, ProtoPie’s Mask feature makes this transition look more natural.
Download
https://share.protopie.io/c21DMDWkEiR
Keywords
Material Design, Mask, Login
Time-Deal
![time deal prototype](https://cdn.sanity.io/images/qyzm5ged/production/dea56ef25722bcab499490455e2d556f71aac954-800x600.gif/time-deal-prototype.gif)
The header bar moves depending on the scroll distance, and the countdown timer also starts working when entering the specified area
Keywords
Text, Start, Countdown
Start Page
![start page prototype](https://cdn.sanity.io/images/qyzm5ged/production/7a5f99969a1a1872a51399034b3b06bead600733-800x600.gif/start-page-prototype.gif)
Chain allows you to animate a layer depending on another layer’s change. This prototype shows moving images while you scroll through pages.
Download
https://share.protopie.io/gxNhFHreZQr
Keywords
Chain