Adobe XD CC Tutorial

Prototype

We are done with all of our screens. Now we need to create a Prototype. For prototype click on Prototype tab. Now we need to define the transition between each screen. First, we need to select our Home Screen. Home screen always visible first. For our this app our Splash Screen is our Home Screen. Select Splash Screen and use Home button to make it a Home Screen. Refer following image.

When a user clicks on Sign In button then the user will redirect on the Login Screen. For this select Sign In Button Group. When you select the Sign In button group it is active and you can check an arrow symbol.

Click on the arrow and drag and drop it on Login Screen. Now we have options for transition animations.

From the options, we can select the Target which Login. Transition dissolve is selected let's change it to Slide Left. Animation Easing and finally the animation Duration. Preserve Scroll Position is not required for this transition. If you are done click on anywhere to release the current selection. Now I have few doubts.
Where us anywhere? I know it is not a good Joke.
Where is my transition arrow? It is their select our button once again.

Let's test it. Click on Play icon at top right corner.

We now created our First transition. In case you need to delete any transition select the element and click on the tale for the arrow. It will delete the transition. Actually, it will start creating a new transition.

Similarly, we need to create the transition for all buttons. Following is the document with all the transitions.

FileTypeSizeDownload
Dealsatoxyz_Prototype.xdNA3086461Login to Download
...

About The Author

Hello, I am Mayank Sanghvi I am primarily a BI developer with experience in MSBI and Cognos BI Suit. Also having interest in various other technologies such as Android, Java, C#, ASP .NET and other. I enjoy learning new technologies and share my experience with others.

0 Comments
Leave A Comment

Please login to post your valuable comments.

add