1

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.

SplashScreen

Loading

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 at 5:53
  • ok ill edit it in the post – Poison_Frog May 22 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 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. – Poison_Frog May 23 at 13:13
  • @zorazjavaid Could you maybe share an online prototype of your project so we can see exactly what's happening? – Jos van Weesel May 26 at 7:25
0

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

| improve this answer | |

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.