Skip to main content
P
Priscila5EA9
Participant
March 15, 2022
Question

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

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

    1 reply

    Spas K.
    Community Expert
    Spas K.Community Expert
    Community Expert
    March 15, 2022

    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
    March 16, 2022

    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
    Spas K.Community Expert
    Community Expert
    March 17, 2022

    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.


    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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices