How to make Elements from a different Artboard always visible

Hi there,

I’ve exported multiple artboards from AdobeXD which are connected with each other. But when switching to a different artboard the design obviously changes. Is there a way to tell it that some elements from other artboards are always visible?

thanks already :slight_smile:

Hi Lea,

The way it is designed now each artboard exported to the same page are in an artboard HTML element. Each artboard is one big container containing all of the visual objects.

When you switch to view another artboard the current artboard is hidden and the new one is revealed. There’s not really a way to have one element contained IN an artboard visible all the time.

But there are some things you can do to get what you want.

You could create a separate artboard that is always visible if you know if some code. You would set it’s display to block or flex and then have to remove the artboard from the CSS artboards array (so it isn’t hidden when you change artboards) and probably set it’s z-index to 1 or more so it’s always visible above other elements.

Otherwise, I would suggest you create a component and have an instance of that on all artboards.

For example, if you have a navigation bar you want always visible create the layer group, convert it to a component and then create instances (duplicate it) and place it on each artboard.

If you need to change it, since it’s a component, the instances will be updated with any changes. Does that make sense? Let me know if this helps and maybe an example and I can help you with any code or setup.

hi velara,

Thank you already so much for your answer!

So to explain it a bit more, I am making a rather complex configurator. I’m designing it in adobe XD and export it with the web export plugin.
The configurator has about 50 Options on one Artboard and there are 5 more Artboards with about the same amount. The result should be that each option is clickable and visible too.
Since there are so many options i cannot simply copy paste them on the other artbaords because that would load too long.
Thus my question here if it’s possible to make elements constantly visible.

I haven’t tried your first solution yet so i’ll come back to that once i have.

I see. Thank you for the description.

This might be a case where you would want to reparent that form with all its options each time the art board is switched. But are all the options different?

If you think it will help send or post a design doc / image or prototype. It shouldn’t be too difficult but I’ll get back to you with an example. If it’s what I think then the simple example may work for you.

The forums have to be restored from backup so a few recent posts have been lost. But I looked into the option to reparent and it looks like it might take some changes in client javascript.

But basically, you can listen for the viewChanged event and then get your element and place it in the currently visible artboard.

Thank you a lot so far. I’ll come back in the future if i have any other questions :slight_smile:

1 Like