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

Stange increase in Adobe XD filesize when using multiple components & states

Community Beginner ,
Jun 16, 2021 Jun 16, 2021

Copy link to clipboard

Copied

Dear Team, 

 

I find a sudden surge of increased file size for my master components file which has only nested components, components & states. This is not even a visual design file and it is strange to see 130MB for a wireframe-component-kit file.

 

Regards,

Subramanian

Views

873

Likes

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

Adobe Employee , Jul 30, 2021 Jul 30, 2021

Hi Subramanian Kalyan,

 

Thank you for your patience. Here are few observations shared by team-

 

Few complex components in your file:
Input / Forms / Fields / Text-Area

77,370 objects total
5 states
54 nested components, 2 levels deep
Input / Forms / Fields / Text-Field

333,648 objects total
6 states
448 nested components, 2 levels deep
Input / Forms / Fields / input-field

35,321 objects total
10 states
55 nested components, 1 level deep


We recommend no more than 6 states in a component for best perf

...

Likes

Translate

Translate
Adobe Employee ,
Jun 21, 2021 Jun 21, 2021

Copy link to clipboard

Copied

Hi Subramanian,

 

Thank you for reaching out. We would like to know the OS and XD versions of your machine. When you said the sudden increase, does that mean it is automatically increased suddenly and it was not this much previously?

 

We'll try our best to help.

 

Thanks,

Harshika

Likes

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
Community Beginner ,
Jun 21, 2021 Jun 21, 2021

Copy link to clipboard

Copied

Dear Harshika,

 

Please find the below OS & XD Version Details:

  1. OS: macOS Big Sur
  2. Macbook Details: Macbook Air 13inch (1.6 GHz Dual-Core Intel Core i5)
  3. XD Version: 41.0.12.11 x64

 

This was supposed to be a simple XD Kit File for wireframes with components & states. Initially, the file size was in KB. As I was trying to create complex components like a master list of icons containing all icons (with multiple states) the file size increased to 130MB and then to 154MB which seems too much for a file containing hardly 4 artboards.

 

Also please find the related issue link here which has a screenshot of what I tried to achieve: https://community.adobe.com/t5/adobe-xd/creating-complex-components/m-p/12121824#M51639

 

Regards,

Subramanian Kalyan

Likes

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
Adobe Employee ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

Thanks for sharing the detailed information. Is it possible for you to share the XD file with me over a PM so that I can check at my end? If yes, please upload the file to a shared location such as CC or Dropbox and share the URL with me.

 

Note: Please add the URL of the post over a PM for reference.

 

I will try my best to help.

 

Thanks,

Harshika

Likes

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
Community Beginner ,
Jun 22, 2021 Jun 22, 2021

Copy link to clipboard

Copied

Dear Harshika,

 

Thank you. Sharing the URL via PM.

 

Regards,

Subramanian Kalyan

Likes

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
Adobe Employee ,
Jun 24, 2021 Jun 24, 2021

Copy link to clipboard

Copied

Thanks for sharing the file, Subramanian. I have logged a bug for your issue so that our team can investigate it. I will share the updates with you as soon as I hear back from the team.

 

Thanks,

Harshika

Likes

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
Adobe Employee ,
Jul 30, 2021 Jul 30, 2021

Copy link to clipboard

Copied

Hi Subramanian Kalyan,

 

Thank you for your patience. Here are few observations shared by team-

 

Few complex components in your file:
Input / Forms / Fields / Text-Area

77,370 objects total
5 states
54 nested components, 2 levels deep
Input / Forms / Fields / Text-Field

333,648 objects total
6 states
448 nested components, 2 levels deep
Input / Forms / Fields / input-field

35,321 objects total
10 states
55 nested components, 1 level deep


We recommend no more than 6 states in a component for best performance, but this gets expensive when there are lots of nested components.

It also looks like they are hiding nested components in different states. This practice should be avoided for best performance and file size. Instead, delete the hidden nested components in each state.

 

Hope it helps.

 

Thanks,

Harshika

 

<Marking as correct only to highlight>

Likes

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
Community Beginner ,
Aug 05, 2021 Aug 05, 2021

Copy link to clipboard

Copied

Dear Harshika, 

I am already aware of the complexity of the objects, states used across the components. 

Let me reiterate my use case :

1. Build a robust design system with set of components broken down into atoms which can be manipulated and used as part of larger components.

Example: An input field is made up of the following items : label, input field box (placeholder + icon) and error message. If you look at the input field there are various variants of the same : textfield, text-area, password field, email field, date field, dropdown etc. As a person working with a huge volume, I do not want to go specifically and type this or modify this in my screen. I would just need to create these variants as states and make it as an instance of the input field. Hence the complexity of nested components with multiple states.

2. Deleting hidden component states works well when you know there are not further changes to the component. However design system is an evolving mechanism. When I delete and try to change in the main there seem to be issues and I end up recreating the entire component again. So this solution is not working out for me.

 

Please let me know if the team has a better approach to this. My requirement is breaking down components to the lowest atomic level possible, creating variants of them (as states) and nest them in the complex components. And this is creating a performance issue. Please let me know if there is a better way of doing this. I haven't been able to find out any other way apart from this after going through various blogs and videos.

 

Regards,

Subramanian Kalyan

Likes

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
Adobe Employee ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

LATEST

Hi Subramanian,

 

We completely understand your concern here and I have checked with the team if there is a better way of doing this. They suggested, that for now their best recommendation to improve file size and performance is to reduce the complexity of their components. 

 

Though the team is working on this issue and you will definitely see the improvements in the future releases of XD

 

Hope it helps.

 

Thanks,

Harshika

Likes

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
Community Beginner ,
Jun 12, 2021 Jun 12, 2021

Copy link to clipboard

Copied

Hi team,

 

Is there a way to organize icons in such a way so that I don't get performance error like "The following components contain more than 20000 layers across from different states". 

I have tried to segregate different icon categories & created states for them. And tried to put all these icon categories in one single icon master component and I end up making XD slow.

How do I deal with this issue especially in a project where I would require keeping a master for icons which can be maintained and swap. 

 

Here is a screenshot of what I do.

 

Regards,

Subramanian

Likes

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
Community Beginner ,
Jun 17, 2021 Jun 17, 2021

Copy link to clipboard

Copied

Dear Team,

 

Here is a similar structure I have built. An input field can be of various types due to which I have made them as a component & multiple states. This component now becomes part of a bigger block component like the Input Text field.

 

Doing this has slowed down my file and it hangs and I get performance issues errors. I have also seen a tremendous jump in the file size (154MB) due to unknown reasons [see post: https://community.adobe.com/t5/adobe-xd/stange-increase-in-adobe-xd-filesize-when-using-multiple-com...].

 

Thanks,

Subramanian

Likes

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