I began the first step by switching to prototype mode. Next, I had to set the Home artboard by clicking on the name “Browse 1” and I noticed the grey house appeared, when I clicked on it selects it and defines that artboard as the beginning of the flow. I have selected the top circle by holding CTRL button and then clicked on the circle which allowed me to tunnel through the hierarchal structure and just select the circle. What I did next is to click on that arrow and press and drag in to the second artboard. When the two artboards are linked together in the properties panel, I left all the settings by default.

Second step is to auto animate. First thing was to open the Layers panel, next was to duplicate a second version of the first artboard with some space between. Then I changed the second artboard name to Onboarding 02. With Onboarding 02 selected I opened the layers panel then I double clicked on the icon which gives me detailed view of the Onboarding 02 elements. I clicked on the group of images then I made the first product smaller and the second one larger. With all the images selected I dragged them to move the large new image into view. Then I created some differences with the description as well by pressing and drag until the second text block is centred underneath the first images. Next thing was to focus on the navigation on the bottom. I made the colour of the second dot to be the same as the first to indicate the navigation and change the opacity to the first dot to be lighter. I wired the two artboards together by clicking on the first artboard and then in the modes to prototype. When holding CTRL button, I right clicked on the second dot to select it and press and dragged a wire to the second artboard. I left the Trigger setting to Tap and for Action, I change it to Auto-animate, under Destination I selected Ease In and Out and changed the duration to 1s.

Step three is to add the second trigger to the transition I just defined and that is the drag gesture. In prototype mode selected again hold CTRL key I clicked on the image that’s towards the right-hand side with the object selected I pressed and dragged the arrow in to the second artboard. In the properties inspector instead if Tap I changed it to Drag trigger. To be able to drag back I came to the second artboard and while holding CTRL key I clicked on the first image on the left-hand side and dragged that second interaction back to that first artboard.

Step four is overlays which is different kind of interaction. What overlay allows you to do is design an artboard once, and then allow it to reoccur across many different artboards. I wired the MENU to the navigation that’s on the left corner of both artboards. I went to Prototype mode and then set the SPLASH to be the start of the flow. I wired Splash with Menu, then opened the properties inspector and changed the Action to Overlay and set the Animation to be Slide UP. When the same wire is selected, I’m going under Edit and select Copy. Then I’m going to the Calendar artboard and what I did was to go under Edit and “Paste Interaction”, that is going to paste all the attributes I defined for the first wire to the second. Next step was to navigate between the two different artboards.

The last step is to use voice commands to transition between artboards. Once I’m in the prototype mode the first thing I did was to implement a tap gesture that takes viewer into the second artboard and set the animation to Dissolve. Next was to introduce the voice feature simply by clicking on onboarding 03 and press and drag to the third artboard. In the properties inspector I set the Trigger to Voice and typed the command and hit return.