I'm trying to design an apps layout in Adobe Xd.

In the start I have a splash screen which transitions to a loading screen which finally transitions to the homepage. But when I press the back button on my device, it goes back to the loading screen showing every artboard that's passed before and then the splash screen. How can I prevent that?

I want the splash screen and loading artboards to load up only when the app starts and I don't want them to show if I press the back button.



Live Artboard

This is all i have as far as linking the artboards is concerned.

  • You must have linked it. Can you post the image of your prototype want to see the linking how have you done it?
    – Wahab Shah
    May 22 '20 at 5:53
  • ok ill edit it in the post May 22 '20 at 10:33
  • your transitions are all time based, right? From which screen you click on back button, reload or reload -1 ? I can not see your transitions if there are any on home screen.
    – Wahab Shah
    May 22 '20 at 15:23
  • i press the back button from the live screen, on pressing back(the physical back button on the device) it shows the reload artboard-1 the the other reload artboard and then finally the splashscreen. May 23 '20 at 13:13
  • @zorazjavaid Could you maybe share an online prototype of your project so we can see exactly what's happening? May 26 '20 at 7:25

When using Adobe XD the arrow keys on the keyboard can move between your artboards and the only way to prevent this from happening is by assigning transitions to those keys and defining what happens when they're clicked. I think this also applies when you're using displaying on a device, or you use the drag trigger instead. an example below:

right arrow key trigger

Another solution is to create a component and make the splash screen a state in it, by doing this the splash screen is no longer an artboard and can not be navigated to unless you add a transition for it: Here's an image of what the splash screen looks like, you can see it was added as a state in the component to the right:

splash screen

Here's an image of the default state (the phone), notice that everything was done in a single component:

default screen

For further information check out Adobe XD's documentation on components and states here's a handy tutorial you can follow for components and states

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.