Skip to main content
I
interesting_Glimmer5CEE
Participating Frequently
June 10, 2019
Answered

How to add elements to an existing Component in XD?

  • June 10, 2019
  • 4 replies
  • 47551 views

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 has been closed for replies.
    Correct answer elainecc

    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

    4 replies

    A
    ahainen
    Known Participant
    June 7, 2021

    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.

    dianad54380818
    dianad54380818
    Known Participant
    February 17, 2020

    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
    Community Manager
    HARSHIKA_VERMACommunity Manager
    Community Manager
    February 17, 2020

    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
    dianad54380818
    Known Participant
    February 17, 2020

    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?

    J
    joanna_lau
    Participant
    January 3, 2020

    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>

      J
      joanna_lau
      Participant
      January 3, 2020

      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
        Vishu_Aggarwal
        Participating Frequently
        January 3, 2020

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

         

        Vishu AggarwalAdobe Certified Instructor, Professional and Expert
          HARSHIKA_VERMA
          Community Manager
          HARSHIKA_VERMACommunity Manager
          Community Manager
          June 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

            F
            Frida2017
            Inspiring
            April 5, 2020

            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

              F
              Frida2017
              Inspiring
              April 5, 2020

              never mind, figured it out.  Sorry 😬 Thanks!

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