Performance issues with nested components

[Jess.Dillard]

Adobe XD version 34 was a huge release for me. I work as a product designer on a large, enterprise application, and the improved capabilties for nested components and component states has revolutionized my workflow.

However, I've noticed that XD's performance has absolutely tanked since then. Files take forever to open, it can take up to a minute to copy and paste a single component or artboard, and published prototypes load slowly, much to the frustration of myself and my stakeholders.

I do, admittedly, use a lot of nested components and components states in my work. I have to in order to truly optimize my designs. Adobe in theory made that possible. But I now have to constantly question whether or not to make something a component, or add another state I need, because I know it's going to affect the performance.

If you're going to release a feature, do it right. Optimize around the fact that, if you make it possible, people WILL scale a feature to meet their needs. I love XD otherwise, but am afraid my stakeholders are going to tell me to use something else because of the performance issues.

In the meantime, is there any sort of guidance or benchmarking available to tell when performance starts to drop off? I have seen the "For optimal performance, we recommend reducing the number of layers to less than 20,000 in these Components" message (A number I don't think I'm anywhere close to), but otherwise have no idea what best practices are for utilizing nested components and component states without sacrificing performance.

[Sherif Assaf · Accepted solution]

Hi Jess -

Thanks for your feedback and for using XD. I'm a Product Manager on the Adobe XD team. We're actively working on addressing the component performance issues that you're called out over here. However, for now, in terms of best practices, we recommend:

1. Nesting Components: start with your most atomic components and then nest them to create more complex components. We don’t recommend nesting more than 3 levels of components. Nesting more than 3 levels will result in performance degradation.
2. When to use component states: Use component states to define the given variations of a components especially the ones with interactive states. For example: If you have a primary button with 4 states (Default, Hover, Focus, Selected), leverage component states to define those various interactive states. Don’t use component states to create variances a component (i.e. secondary button, tertiary button). In this case, create separate secondary button with the different states. Don’t use component states to easily author and swap your iconography components. We recommend either keeping those icons as separate components, or breaking them down manageable groups with no more than 10 states per component.

Please DM if you have any questions.

Thanks,

Sherif

[Jess.Dillard]

Thanks Sherif, this helps a lot. Will stick to these guidelines for now and hope Adobe can work out performance issues quickly. 

[Brandon Sookdeo]

Hey Jess, 
I have to say I absolutley loved how you wrote your compliant. 
I am having similar issues and wish I could have Explained myself like that.

I have nested components too and its horrible when you have to wait for the prototype to load.

I'm also dealing with a product that requires fast activity. The preview link loads too slowly and a client has no patience.