Check it out
With the election only a few days away, and having personally voted earlier this week, I’ve got check marks on the brain!
A few weeks back, I designed an app icon for a fictional voting app which included a check mark inside the American flag. I thought it might be fun to repurpose the check mark as a microinteraction to display success after a user has completed a task. So I took the check mark and gave it a little spin to indicate a confirmation or save state that would pop up as an overlay.
Here’s what I came up with:
I used green since it’s a pretty universal color to signal “go” or “good job!” and I decided to make the check mark increase in size to give it little dynamism. Also, it’s subtle, but the check mark’s transparency is initially dialed down to 50% and increased to 100% as the animation completes. I originally had the entire animation at full transparency, but it somehow felt a little off.
This was fun because I don’t have a ton of experience creating animations. I started by creating a few frames in Figma and prototyping it with the Smart Animate feature, which I haven’t made use of in a while. If you use Figma and haven’t tried Smart Animate yet, I highly recommend giving it a whirl because it works like magic. I also haven’t created that many prototypes for my weekly design challenges, so this was a nice little exercise in re-familiarizing myself with all of the different options Figma has to offer.
I’d like to learn how to create some more sophisticated animations in the future, but for now I’m happy with the way this one turned out. It feels like success to me!
