Member-only story
Hi, this is my first article and I’m super excited! It’s gonna be a long article but you will learn everything and after this article, you will be able to find your funny mistakes easily when you want to design an advanced prototype.
Today I’m going to learn you how you can design a progress bar in InVision. First of all, you should know that the prototyping tools features are currently limited (Oh my god! I forgot how difficult it was to make an interface for mobile phones a few years ago!).
Before starting the tutorial, I should say that this article is not just for specific software. If you use InVision Studio (God bless you!) or other tools this tutorial will help you to learn how to design a circular progress bar. I’m going to use my old laptop to show better all the details.
Let’s start:
1- Open your laptop and turn it on :)
2- (I know I’m very funny!) Sit on the chair you want.
3- Open your desired design tool (InVision, Adobe XD, Principle, Flinto, …).
4- Create a new artboard. You can use the default artboards (but sometimes I prefer to use the real ones), for example, I select the iPhone Xs artboard or select the “Blank Canvas” option and create an artboard with these numbers: W= 375 px /…
