How to make your own animated Ring in Figma for watchOS applications — part 1/3
Hello! In this article I intend to show you the importance and how to make your Ring element with its own design!
I divided the article into three parts:
- Part 1: Why use animated Rings in my watchOS applications?
- Part 2: Creating your own Rings using Figma
- Part 3: Making an animation in a watchOS app
So let’s go to the first section! 😎
Part 1: Why use animated Rings in my watchOS applications?
After following the WWDC20 that took place this June 2020 and seeing the amazing new features of watchOS 7, I thought it would be interesting to share my experience in developing a watchOS app in times of pandemic.
Before we started to actually put our idea of solution into practice, we did a validation process. In a quarantine scenario, the first question that came to mind:
“Are Apple Watch users using the device at home?" 🤔
To answer that question, we went to some Apple Watch enthusiast communities, which were our target audience. We conducted a poll with a total of 362 people and segmented users into three categories: using all day, using occasionally and not using. In the end, this was the result:
To our happiness, the overwhelming majority used the Apple Watch all day or at any time of the day! After that answer, another question arose:
“What kept users from continuing to use Apple Watch at home?” 🤔
With that question in mind, we asked the people who answered our poll what apps they used most. We obtained responses from people who used apps to manage sleep and others, for the most part, continued to use the device to beat the goals of Move, Exercise, and Stand activity rings from Health app.
Other native Apple applications also use rings (such as Hailo and Rules!, for example). From there, we had the insight to use the ring element in our application! In this way, we can conclude that the rings have as main focus the engagement of their users to continue using their application and, for this reason, it is a powerful element.
After this brief explanation of why using Rings in your application, let’s go to work!
In the next section, we will build the images necessary for you to apply this element to your watchOS application. See you soon!
