Efectos Para Protopie

Have you heard of ProtoPie? It’s the go-to prototyping tool for designers in 37 countries! Since its official release just five months ago, ProtoPie has gained popularity among designers who love its intuitive interface and powerful features. Many designers have already shared their amazing prototypes on platforms like Dribbble and the ProtoPie Community. We’ve handpicked 20 outstanding prototypes that not only look great but are also easy to follow.

Diary

Let’s start with a prototype for a diary app. This interactive prototype allows users to flip through pages and select entries. The best part is that you can easily recreate this prototype by using ProtoPie’s Scene Copy feature.

Download: Diary Prototype

Keywords: Page Transition, 3D Rotate, Card UI, Pull

Android Lockscreen

Ever wondered how to reveal a hidden banner on your Android phone? This prototype demonstrates how you can use a flinging gesture to pull down the hidden banner and hide it by pulling it up.

Download: Android Lockscreen Prototype

Keywords: Fling, Pull

Payment

If you’re looking for a prototype that showcases money transfer concepts, look no further. This prototype allows you to drag a person’s photo into a designated area to initiate a money transfer. The use of conditions and ranges makes it easy to create such interactions in ProtoPie.

Download: Payment Prototype

Keywords: Condition, Range, 3D Rotate

Card Transition #1

This prototype, created by Seongwon Yun, demonstrates a card reordering feature. You can drag the cards left or right to change their order.

Download: Card Transition #1 Prototype

Keywords: Reorder, Drag, Card UI

Card Transition #2

In this prototype, clicking on a card allows you to scroll through its contents. Once you reach the bottom of one card, you can seamlessly transition to the next card. The 3D Rotate effect adds a touch of elegance to the interaction.

Download: Card Transition #2 Prototype

Keywords: Card UI, 3D rotate, Scene, Pull, Scroll

Card Reorder #1

This prototype features an interaction that allows you to put your desired app in fullscreen mode.

Download: Card Reorder #1 Prototype

Keywords: Card UI

Card Reorder #2

If you’re looking for a prototype that allows you to select apps from a carousel, this one’s for you.

Download: Card Reorder #2 Prototype

Keywords: Carousel, Paging, Card UI

Flickr Onboard

This prototype demonstrates the use of paging for an onboard experience. With ProtoPie, you can recreate this prototype in just a few minutes.

Download: Flickr Onboard Prototype

Keywords: Paging, Indicator, Chain

Number Input

If you need to create a number input interaction with a zoom effect, ProtoPie has got you covered. You can easily achieve this by using conditions.

Download: Number Input Prototype

Keywords: Scale, Condition

Material Mail

This prototype demonstrates how ProtoPie’s masking feature can simulate Google’s Material Design. Masks are particularly useful for screen transitions or when objects appear on the screen.

Download: Material Mail Prototype

Keywords: Material Design, Mask

Panda

Who doesn’t love pandas? In this prototype, you can have a cute panda on your screen that follows your finger’s movement.

Download: Panda Prototype

Keywords: Drag, Chain

Header Transition

This prototype showcases differences in header color and indicator location depending on the content displayed on the screen.

Download: Header Transition Prototype

Keywords: Range, Indicator, Color

Pull to Refresh

Have you ever wondered how Pull-to-refresh works? This prototype simulates the interaction by dragging the page a certain amount and temporarily pausing before returning to its original position.

Download: Pull to Refresh Prototype

Keywords: Condition, Scroll, Repeat

Sticky Label

This interaction is commonly seen in long lists, like contacts. The displayed category changes based on which content is visible.

Download: Sticky Label Prototype

Keywords: Range, Scroll, Chain, Indicator

Toggle Button

With ProtoPie, you can create interactions that switch between different states with just one tap. You can set up not only two but three or more different states.

Download: Toggle Button Prototype

Keywords: Toggle Button, Condition

Uber

This prototype allows you to select a starting point and a destination, just like when you’re booking an Uber. The interaction appears on one page, but the prototype utilizes three scenes to simplify the complexity.

Download: Uber Prototype

Keywords: Scene, Opacity

Download Process

Visualizing a download process has never been easier. This prototype demonstrates a rotating circle that represents the progress of a download. By using a rotating container, you can recreate this interaction in no time.

Download: Download Process Prototype

Keywords: Container, Rotate

Login

Are you a fan of Material Design? This prototype showcases a login screen with a smooth transition to the profile page, thanks to ProtoPie’s masking feature.

Download: Login Prototype

Keywords: Material Design, Mask, Login

Time-Deal

In this prototype, the header bar moves based on the scroll distance, and a countdown timer starts when entering a specific area.

Keywords: Text, Start, Countdown

Start Page

This prototype demonstrates how you can animate a layer based on another layer’s change. It features moving images as you scroll through pages.

Download: Start Page Prototype

Keywords: Chain

More about ProtoPie

If you want to learn more about ProtoPie, here are some helpful links:

Now that you have access to these amazing prototypes, it’s your turn to explore, learn, and create your own masterpieces using ProtoPie. Share your creations with the world on Dribbble or the ProtoPie Community. Happy prototyping!