🌗 Day to Night time

I took a few creative liberties and built a “day-to-night” toggle inspired by the trend that popped up in apps a year or two ago. My goal was to push the idea further; keeping everything in vector while aiming for a more realistic look.

Most of the tutorials I found for rendering convincing clouds were Photoshop-based, so I adapted the techniques for Figma. After nailing down the sun and moon, I turned the key elements into components, added micro-animations, and the interaction came together from there.

Plugins that helped along the way

Specs (formerly EightShapes Specs)

For quick sticker-sheet generation, click here for plugin.

Propstar

For streamlined component props, click here for plugin.

Outline mode

If you've never used outline mode before to watch your project, I highly recommend it.

---

I’ve got another concept in the works that follows the broader design direction even more closely, but for now, this piece captures the essence of the idea.

---

P.S Big shout to Nick Qurle who created this Glassmorphism 2.0 effect that I used for the cover image. I really love the texture. I modified it a little bit to give it a 'milky' vs. clear glass feeling.