Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


How to add elements to an existing Component in XD?

Explorer ,
Jun 10, 2019 Jun 10, 2019

Copy link to clipboard

Copied

Hello,

 

According to the Adobe XD docs regarding Components, you should be able to add layers to existing components.

Not only can you override the size of a component or the layout of elements within, but you can also structurally override the components. This means you can add or subtract elements in the master component and its instances.

 

https://helpx.adobe.com/xd/help/components.html#add-remove-elements

 

However, anytime try to create then move a layer into an existing component, I receive a tooltip of a disabled icon. If I duplicate a layer that already exists inside the component I can effectively "add" layers but only if it is an existing layer. IE. If I do not have any text layers in the component, I could not add one.

 

This seems like a bug that needs resolved as component functionality is not as described in the docs.

 

Demo

2019-06-10 12.19.06.gif

 

Can we either get this bug resolved or if I am misunderstanding functionality, can someone please assist?

 

Thank you.

 

<The Title was renamed by moderator>

TOPICS
How to

Views

19.0K

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 , Jun 11, 2019 Jun 11, 2019
Hi there,Sorry to hear you're having trouble adding layers to the existing components. As of now, we cannot add layers to the existing component by drag and drop option as you can do with other groups. As a workaround, please try to add the layers by selecting the component and adding the layers manually as shown in the above gif file. Let us know if that works for you.Thanks,Harshika

Likes

Translate

Translate
Adobe Employee ,
Jun 11, 2019 Jun 11, 2019

Copy link to clipboard

Copied

Hi there,

Sorry to hear you're having trouble adding layers to the existing components.

Adding layers to components.gif

As of now, we cannot add layers to the existing component by drag and drop option as you can do with other groups. As a workaround, please try to add the layers by selecting the component and adding the layers manually as shown in the above gif file.

Let us know if that works for you.

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
Explorer ,
Jun 11, 2019 Jun 11, 2019

Copy link to clipboard

Copied

Thank you. That is a helpful workaround that I was unaware of.

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 12, 2019 Jun 12, 2019

Copy link to clipboard

Copied

Glad to hear that this workaround helps you. Give us a shout on the forum, if you need anything else in the future. We'd be happy 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 ,
Jul 12, 2019 Jul 12, 2019

Copy link to clipboard

Copied

I'm not following what's going on in this GIF. I have a component with preexisting parts, but there's no hierarchical structure to it and I see no way to manually add a layer. It seems the program has been updated since the GIF was made. What's the procedure now?

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 ,
Jul 12, 2019 Jul 12, 2019

Copy link to clipboard

Copied

OK. I figured out that you have to click the left icon to expand the structure (this is the first program I've seen that works like that.) But now, how do I move something that's already been created into the component? I can draw new shapes onto an existing component, but what if I want to add in something that's already been created?

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 12, 2019 Jul 12, 2019

Copy link to clipboard

Copied

You’re going to need to enter the edit context of the component in order to add an element to it. There are a couple of things you can do – you can either double click to enter the edit context, or you can select an existing layer in the component. Once you’ve done that, any new object you add to it (either by drawing or by paste) will be added to the component. Once you’re done, you can press Escape to exit. Example: https://twitter.com/elainecchao/status/898609188661743616

Here are a few resources I have to help: https://twitter.com/search?f=tweets&vertical=default&q=%40adobexd%20%23protip%20%23adobexd%20edit%20context&src=typd

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
Explorer ,
Apr 04, 2020 Apr 04, 2020

Copy link to clipboard

Copied

That does not work in my XD. I am running the latest version 2020. Any suggestions why it doesn´t work? I cannot add any layer to an existing component. Such a deal breaker for using XD 😞 

 

Thanks for any help! 

 

Frida

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
Explorer ,
Apr 04, 2020 Apr 04, 2020

Copy link to clipboard

Copied

never mind, figured it out.  Sorry 😬 Thanks!

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 ,
Apr 11, 2020 Apr 11, 2020

Copy link to clipboard

Copied

No problem. We are glad you're able to resolve the issue. Please feel free to reach out to us in the future for any query related to XD.

 

We'd be happy 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 ,
May 18, 2021 May 18, 2021

Copy link to clipboard

Copied

Could you describe how you did it? My component (a secondary component I want to add pre-made material to) is greyed out in the layers list and I can't add layers to it.

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
New Here ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

This is a hassle, why doesn't adobe solved this issue yet? I convinced my company to switch to Adobe and buy a license. only to find out about this. The workaround itself is a hassle too.  Meaning if I have a bunch of SVG icons that I'd like to add to an existing component, I can't do so. I'm starting to regret the switch already.

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 ,
May 15, 2021 May 15, 2021

Copy link to clipboard

Copied

I don't have layers in my components so there is nothing to drag the new layer into. None of my components have layers that I can expand.

Screen Shot 2021-05-16 at 12.12.39 AM.png

Why would that be?

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 ,
May 18, 2021 May 18, 2021

Copy link to clipboard

Copied

Ok never mind, I'm still learning XD and realized I was in the wrong place as far as expanding layers. But I still can't add an element to my components to save my life. I have read and re-read this thread and none of the solutions here work for me. I have the latest XD update and this does not work at all. I don't get at all what I am missing.

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
Explorer ,
Feb 16, 2020 Feb 16, 2020

Copy link to clipboard

Copied

I'm really loving the ability to add states to components - it's seriously streamlining my workflow! However, I still can't seem to figure out how to add something to an existing component.

 

For example, I'm working on a form which requires several different states. Only after creating the component did I realize that I forgot to add in an essential dropdown menu. The dropdown menu needs to be part of the component in order for the rest of the form to interact with it. Is there a way to add the dropdown menu to the component without having to create a whole new component?

 

I hope my explanation makes sense...

 

<The Title was renamed by moderator>

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 ,
Feb 17, 2020 Feb 17, 2020

Copy link to clipboard

Copied

Hi Dianand,

 

Thanks for your feedback and appreciation for the feature. If I heard you right, it looks like you are trying to add layers to the component. If so, please see this post: https://community.adobe.com/t5/adobe-xd/cannot-add-layers-to-existing-component/td-p/10522793?page=1 and try the solution mentioned and let us know if that 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
Explorer ,
Feb 17, 2020 Feb 17, 2020

Copy link to clipboard

Copied

Yes, it worked - thank you. It would be great to be able to drag-and-drop layers in order to nest them. Maybe this could be added to the next XD update?

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
New Here ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

Let's say you have an Edit button as a master component with multiple instances used in different pages. Suddenly you feel like adding an edit icon next to the "Edit" text. Is there any way you could add that new icon into the master component so that it propagates the change to its instances?

 

<The Title was renamed by moderator>

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
New Here ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

I figured the workaround for now, you can copy and paste the new element you want to put on edit mode on the master component. Would be nice to be able to simply add a new element using the tools though.

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 Community Professional ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

You can also add new elements using the tools in Adobe XD. Just double click the master component after selecting edit Master Object.

 

Vishu Aggarwal
Adobe Certified Instructor, Professional and Expert

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 ,
Feb 27, 2020 Feb 27, 2020

Copy link to clipboard

Copied

Can you please be more specific? I am trying to add elements to a master component and nothing is working. It seems like it should be a simple process, but I can't figure it out or find any answers online.

 

Thanks.

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
New Here ,
Mar 01, 2020 Mar 01, 2020

Copy link to clipboard

Copied

To go to edit mode, double click on the master component on the artboard. You should see a faint green border. You can then add any elements to this master component just like how you would add an element to the artboard

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
New Here ,
Apr 29, 2020 Apr 29, 2020

Copy link to clipboard

Copied

Thankyou!!!! #respect

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 ,
Apr 29, 2020 Apr 29, 2020

Copy link to clipboard

Copied

Hi there,

 

Thanks for reaching out. You can also refer to this help article for future reference while working with Components: https://helpx.adobe.com/xd/help/components.html

 

Regards

Rishabh

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 ,
May 18, 2021 May 18, 2021

Copy link to clipboard

Copied

Where do I select "Edit Master Object"? All I see is "Edit main component." If I select that, it highlights my component (in this case, my website header) in green with the green diamond. If I double click it, it unselects it. Pasting my new element just adds it to the artboard, not the component. What am I missing here? Why is such a necessary action like this so difficult to achieve??

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