Prototype with multiple component states is very slow on browser share preview

Forum|Forum|3 years ago
March 15, 2022
1 reply
838 views

A prototype like this one (with multiple component states objects with mouse over effect and different page for each item selected) is frustratingly slow on browser. Adobe XD need to optimize component states to be viable besides simple cases.

This topic has been closed for replies.

Spas K.

Community Expert

Hey there, would it be possible for you to share the prototype link, and perhaps a screenshot from Xd while on the prototype tab, showing how the interactions for the hover states are set up?

There are some things that can be done to optimize your prototype and work around Xd's limitations, but it depends on the specific set up. You usually want to have instant hover states, instead of ones that have transitions / animations, unless it's crucial to have them.

P

Priscila5EA9Author

Participant

Hi. Bellow is the prototype link.

I used component states in the mouse over effect. But used a different page for the item selected (when is clicked), because with 19 itens is very difficult to link everyone inside a component state. Using pages I can copy and paste a group of hidden buttons already linked.

I believe the combination of a lot of itens with mouse over state and a lot of prototype link make everything lag. But I can´t see another way to make this type of prototype.

https://xd.adobe.com/view/07f07069-72a9-4124-9640-3c8475b3a65b-52a3/?hints=off

Spas K.

Community Expert

Initially it was pretty bad for about 10-20 seconds after it "loaded", but then it started working smoothly.

The other thing I already mentioned - Xd's limitation that you can't have multiple hover animations active at the same time, so it waits for one hover animation on the page to finish running before activating the other one. You can see if you move from one button to the next that the initial one goes slowly back to default state and only then the new one activates.

A bit smoother experience can be achieved if you remove the auto-animate and use instant transitions between hover and default states. I don't know how your components themselves are set up in terms of layers, if you show a screenshot with the expanded layer and states structure for one option component, I might have more suggestions.

If the choice matters for the prototype (each square triggers a different page after confirmation), then they will have to be separate pages. If the choice doesn't matter for the prototype, then you can have all the squares nested in one big component that will have a lot of states (one for each option), instead of separate pages.

If you can share the .xd file here or via PM (upload it somewhere and send the link), I can check it out and see if there's something that can be improved.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded