Skip to main content
interesting_Glimmer5CEE
Participating Frequently
Jun 10, 2019 4:27 PM UTC
Answered

How to add elements to an existing Component in XD?

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>

    This topic is closed to new replies. Start a new post to keep the conversation going.
    elainecc
    elaineccCorrect answer
    Participating Frequently
    Jul 12, 2019 6:35 PM UTC

    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?


    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

    View reply

    30 replies

    ahainen
    Known Participant
    Jun 7, 2021 5:36 PM UTC

    I really can't believe this isn't higher priority to update on Adobe's list. I'm surprised the component feature was shipped without something basic like this.

    Translate
    dianad54380818
    dianad54380818
    Known Participant
    Feb 17, 2020 4:19 AM UTC

    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>

    Translate
    Harshika Verma
    Community Manager
    Harshika VermaCommunity Manager
    Community Manager
    Feb 17, 2020 3:20 PM UTC

    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

    Translate
    dianad54380818
    dianad54380818
    Known Participant
    Feb 17, 2020 4:06 PM UTC

    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?

    Translate
    joanna_lau
    Participant
    Jan 3, 2020 2:56 AM UTC

    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>

    Translate
      joanna_lau
      Participant
      Jan 3, 2020 3:08 AM UTC

      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.

      Translate
        Vishu_Aggarwal
        Vishu_Aggarwal
        Participating Frequently
        Jan 3, 2020 4:26 AM UTC

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

         

        Translate
        Vishu AggarwalAdobe Certified Instructor, Professional and Expert
          Harshika Verma
          Community Manager
          Harshika VermaCommunity Manager
          Community Manager
          Jun 11, 2019 5:50 PM UTC

          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

          Translate
            interesting_Glimmer5CEEAuthor
            Participating Frequently
            Jun 11, 2019 6:59 PM UTC

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

            Translate
            Harshika Verma
            Community Manager
            Harshika VermaCommunity Manager
            Community Manager
            Jun 12, 2019 11:08 AM UTC

            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

            Translate
            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices