CREATING A DYNAMIC
TIMER IN FIGMA
The Layout
Taking on the challenge to create a timer prototype was a little more involved than I expected. Not a bad thing, Though, thankfully my layout was pretty simple, thanks to the inspiration of the apple timer.
THE BUILD
Building this simple animation for the timer allowed me to explore Figma's new feature in components. Its a huge advancement to be able to create individual animations that can happen simultaneously to each other.
For the timer, I created a separate animation with a duration of 10 seconds. An animation for the countdown from 10 - Time, countdown circle, and animation for the dark grey background fading in as time nears.
Moving parts
THE EFFECT
A dimming background as the timer counts down can be noticed when the phone is set down with the intent to give the user a sense of how much time is left without having to look directly at the timer.
It's always great to do small challenges as practice using new features that can take interactions to a new place. I hope you found this insightful. Thanks for reading!