For Day 15 of the Daily UI Challenge in Figma, I designed a clean and modern On/Off Switch. Toggles and switches are small but important UI elements that appear in almost every mobile app or website. They allow users to quickly change settings with just a tap, making them a perfect exercise for improving design skills.
On/Off Switch Design in Figma
In this challenge, I focused on creating a simple yet functional On/Off Switch UI using Figma Auto Layout, Components, and Variants. This makes it easy to reuse and customize the switch across different projects. I also designed both Light Mode and Dark Mode versions so you can see how the toggle adapts to different themes.
Beginner-Friendly Tutorial with Prototyping
If you’re a beginner in Figma, this tutorial is easy to follow and includes basic prototyping. You’ll learn how to set up components, create variants for the On and Off states, and add smooth transitions. Practicing with small UI elements like this helps build a solid foundation for larger projects such as mobile app design and web dashboards.
Download Free On/Off Switch Source File
The best part? I’m sharing the free source file so you can explore the design, study how the components work, and even use it in your own projects. Whether you’re following the Daily UI Challenge or just looking to improve your Figma skills, this On/Off Switch exercise is a great way to practice UI design.
👉 Download the free Figma source file below and start experimenting with your own On/Off Switch designs.
Explore more designs on our Daily UI Challenge page and keep learning step by step. Don’t forget to subscribe to our YouTube Channel for tutorials!
