How to add elements to an existing Component in XD?

[tylery28]

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

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>

[HARSHIKA_VERMA · Accepted solution]

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

[tylery28]

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

[HARSHIKA_VERMA]

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

[Samuel_Newhouse]

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?

[Samuel_Newhouse]

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?

[elainecc · Accepted solution]

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

[Frida2017]

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

[Frida2017]

never mind, figured it out.  Sorry 😬 Thanks!

[HARSHIKA_VERMA]

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

[kaidence9]

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.

[Project5CB6]

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.

[marianney55]

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.

 

Why would that be?

[marianney55]

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.

[dianad54380818]

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>

[HARSHIKA_VERMA]

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

[dianad54380818]

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?

[joanna_lau]

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>

[joanna_lau]

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.

[Vishu_Aggarwal]

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

[anna10014]

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.

[joaniechualau39]

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

[pablomad]

Thankyou!!!! #respect

[Rishabh_Tiwari]

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

[beckb41742662]

Going into edit mode isn't enough, you need go into edit mode and then select something in that "state" and then you can add new layers in the component.