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

[Priscila5EA9]

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.

[Spas K.]

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.

[Priscila5EA9]

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.]

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.

[Priscila5EA9]

Thanks, this is the download for the file:
https://drive.google.com/file/d/1oKRpr2GS-WUX3hNI5hkDvAjt7CKGBuUU/view

The auto animate was used because there is a small animation on mouse over.
Above each one I put a transparent button to go in the page selected. I did this instead of component state because this way I can copy all the 19 transparent buttons to the other 18 pages keeping the action of each one (if you copy while in prototype mode). 
Question 1 was not a problem because was only 7 itens. But Question 2 with 19 was very lag. Maybe in your machine was smooth after the initial loading, but in my (and probably on the client) was lagging.

[Spas K.]

Yeah, so there's a lot that's happening. You have all icons in all instances of the component, for easier switching by hiding one icon and showing another for each instance, but that's probably what is making it pretty heavy.

Unfortunately, the solution would involve a lot of manual labor. You probably should have only one icon component (without all the hidden ones) for each instance. With the way it is now, that would be equivalent of making 20 separate components with 3 states each, since overrides don't propagate to other states. So if you swap the icon in an instance, you would have to do it for all 3 states and recolor it too.

If we had properly working components and we didn't have this issue, you would just swap the icon and text for each instance once, and it would change them for the hover and active states too, like it works in Figma, but for now we can just wait and deal with it as it is 🙂

For the copying of the links, instead of the transparent elements, you can put every component in a group, and add the trigger to the group. When you copy the groups to another screens, the links will remain. Not sure why they are removed when they're on the components... might be a bug.

[Priscila5EA9]

Thanks.

Yeah, for future projects like this one I will make the prototype more simple, with only two or three elements interactive as a example for the other itens.

Components states on XD need more work. The main issue is that hard to know when a change in the default state will propagate to the other states or not. Another annoying thing is that a component inside other component you can´t link to other instance of the parent component, only inside the component, unless I did not see the right way to do this.

I also wish a mode where you can see all the states at same time, like in Figma. Is easier to see the changes and to navigate between instances. 

[Spas K.]

For linking to a different state of a parent component from a nested component, you can put the nested component in a group and then add the interaction to that group instead. That is the "workaround" for this particular issue.