How To Create Toggle In Protopie

This article provides a step-by-step guide on how to create a toggle switch using Protopie. Created by Graeme Fulton and Prilly, the tutorial showcases the basic features of Protopie through 12 short videos. By following along, beginners can learn how to create a dark mode toggle switch and implement various microinteractions.

To get started, download the Dark Mode Toggle prototype from the provided link and try it out for yourself.

#1: Sun Toggle

The first step is to move the sun from left to right. This initial interaction serves as the foundation for the rest of the events that will occur when the toggle is tapped.

#2: Rotating the Sun

In this section, you will learn how to rotate the sun. This microinteraction adds character to your interface and enhances the user experience.

#3: Scaling Shapes

To create the illusion of the sun spinning into the moon and vice versa, we will make use of the Scale and Opacity features in Protopie. By changing the scale of the sun, you can achieve this effect.

#4: Making the Sun Disappear & Reappear

Here, you will learn how to make the sun disappear and reappear. By utilizing the Opacity responses and the existing Conditions, you can create a seamless transition between the sun and the moon.

#5: Rotating the Moon

Similar to the sun, you need to create interactions for the moon. Swap the existing responses in the two Conditions to achieve the desired effect.

#6: Scaling the Moon

Now, it’s time to scale the moon, just like you did with the sun. This step allows you to see the moon at its full scale.

#7: Scaling with Opacity

Before moving on to the next parts, you will adjust the opacity of the moon and complete the morphing illusions.

Moving on to the next phase of the toggle, we will focus on creating color transitions that add uniqueness to our design.

#8: Color Transitions

By adding a color transition to the background, you provide users with more visual feedback when interacting with the toggle. As the sun turns into the moon, the background changes from light to dark and vice versa.

#9: More Color Transitions

Since you have added background color transitions, it’s only fitting to change the color of the stationary rectangle as well.

#10: Oval Color

To complete the color transitions, follow the same steps as before. This will give the toggle button its finishing touches.

Now, let’s make this toggle button truly unique by adding some final touches.

#11: Spring Animations

Implement the same interactions for each cloud, referring to them as cloud 1, cloud 2, and cloud 3. By creating spring animations, you can bring movement to the clouds.

#12: Combining Spring Animations

To add the finishing touch, make the stars move! This step is similar to moving the clouds in the previous video.

If you enjoyed these tutorial videos, be sure to check out ProtoPie School. ProtoPie School offers free learning content that covers everything from A to Z, providing a comprehensive guide on how to use ProtoPie effectively.

Now that you have the necessary knowledge, it’s time to get creative and start building your own toggle switches with Protopie! Don’t hesitate to experiment and create unique interactions that will enhance your user interfaces.