Highlighted

How to add elements to an existing Component in XD?

Explorer ,
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>

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

TOPICS
How to

Views

5.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

How to add elements to an existing Component in XD?

Explorer ,
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>

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

TOPICS
How to

Views

5.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
Jun 10, 2019 2
Adobe Employee ,
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
Reply
Loading...
Jun 11, 2019 1
Explorer ,
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
Reply
Loading...
Jun 11, 2019 0
Adobe Employee ,
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
Reply
Loading...
Jun 12, 2019 0
Community Beginner ,
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
Reply
Loading...
Jul 12, 2019 1
Community Beginner ,
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
Reply
Loading...
Jul 12, 2019 0
Adobe Employee ,
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
Reply
Loading...
Jul 12, 2019 1
Community Beginner ,
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
Reply
Loading...
Apr 04, 2020 1
Community Beginner ,
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
Reply
Loading...
Apr 04, 2020 1
Adobe Employee ,
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
Reply
Loading...
Apr 11, 2020 1
New Here ,
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
Reply
Loading...
Jan 02, 2020 2
New Here ,
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
Reply
Loading...
Jan 02, 2020 0
Adobe Community Professional ,
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

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
Reply
Loading...
Jan 02, 2020 2
Community Beginner ,
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
Reply
Loading...
Feb 27, 2020 0
New Here ,
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
Reply
Loading...
Mar 01, 2020 1
New Here ,
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
Reply
Loading...
Apr 29, 2020 0
Adobe Employee ,
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
Reply
Loading...
Apr 29, 2020 0
Explorer ,
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
Reply
Loading...
Feb 16, 2020 0
Adobe Employee ,
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
Reply
Loading...
Feb 17, 2020 0
Explorer ,
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
Reply
Loading...
Feb 17, 2020 0