• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Complex Component With 20,000 Layers

Community Beginner ,
Sep 03, 2020 Sep 03, 2020

Copy link to clipboard

Copied

My team and I have been getting a message when we first open our files that we have a component in our shared library with more than 20,000 layers. This component that's called out has nowhere near that amount of layers, however. It has a little over 100 layers including all of the vector icons and masks.

 

View of each component stateView of each component stateList of all layers pt.2List of all layers pt.2List of all layers pt.1List of all layers pt.1Alert on file loadAlert on file loadThese are the states of the componentThese are the states of the componentThis is the Bottom Nav Tray componentThis is the Bottom Nav Tray componentWhen clicking on View ComponentWhen clicking on View Component

TOPICS
Product performance

Views

4.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , May 11, 2022 May 11, 2022

No solution beside reducing nesting, limiting your number of states and optimizing your number of groups and layers in each component, as they seem to be duplicated for each state so the growth of nested components is exponential.

Whenever possible, for master components containing many nested components, it's better to duplicate artboards and animate between them than to create a new state (but it needlessly clutters the prototype I know...).

 

Good luck !

 
 

 

 

Votes

Translate

Translate
New Here ,
Jul 06, 2023 Jul 06, 2023

Copy link to clipboard

Copied

Hi!, someone else found a solution, I´m having the same problem

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 07, 2023 Jul 07, 2023

Copy link to clipboard

Copied

LATEST

No solution, and it's probably never gonna be patched since Adobe bought Figma. I'd advice to switch to Figma for all your new prototypes, avoid nested components. Basically, Adobe XD copies every layer for every state, so nesting is multiplying all your layers, like if you put a 50 layers components with 2 states, inside a 5 states component with 100 layers, I think you have ((50+100)*2)*5 = 1500 layers. I'm not sure of this, but I made a rough calculation for the prototype where it told me I had above 20 000 layers and it seemed to fit.

I checked Figma at the time but people were also complaining about performance issues with large components, but we'll have to switch anyway sooner or later

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 15, 2022 Sep 15, 2022

Copy link to clipboard

Copied

So far, the best strategy i have found, waiting for an improvement, is to avoid intermediate states done with nested component.

For exemple instead of using 3 levels of nested symbols: container / components / elements

do: container / elements

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines