Skip to main content
E
efficient_guide16B8
Participant
June 4, 2019
Question

Adobe XD Prototype master components

  • June 4, 2019
  • 4 replies
  • 6356 views

I am wondering if you can you prototype master components so the same interactions are added to every instance of that element across all artboards. I am working on a website global nav and dont want to repeat the same actions for every single artboard that the nav appearas on.

    This topic has been closed for replies.

    4 replies

    I
    interesting_Glimmer5CEE
    Participating Frequently
    November 5, 2019

    Agreed! This is an absolute necessity for working with any type of app/site navigation. Copying and pasted (suggested) becomes miserable when you have 10+ artboards using this the same component.

      D
      defaultivzx422mmicr
      Participant
      July 18, 2021

      Has there been any update on this? I started using Adobe XD for my website prototype, but the absence of possibility to just have a master navigation bar, which can appear on every page just like an InDesign master page, is just a real massive issue! Making a real website may save me more time than prototyping it with XD at this point...

        gurs2die4
        gurs2die4
        Inspiring
        July 29, 2019

        I have also struggled with keeping the nagivation/links consistent when re-using master components.  As suggested above, I first created the master component on the canvas (not on any artboard) in Design mode and then assigned links in Prototype mode.  Then I added that master component to individual artboards by Alt-dragging the master to the desired artboard.  If you try to add the component to an artboard by dragging that component over from the Components pane, the navigation settings are lost.  But if you Alt-drag, navigation settings are maintained.  This does not solve XD's inability to link to the same artboard on which a component is located, so self-linked artboards are lost on that particular artboard, but are still present on other artboards.

          Sjaani
          Community Expert
          SjaaniCommunity Expert
          Community Expert
          June 17, 2019

          As mentioned above you can create a master links group and paste it with active links in the Prototype step rather than creating and putting in place in the design step.
          One of the current drawbacks in XD is that you can't link to the same page that you have the object on.
          So even though copying and pasting within the Prototype area does maintain links it doesn't keep them for the current page.

          In order to produce the result you're after with complete accuracy you would need two copies of each page so that you could always give the appearance that a menu button linked back to itself.

          I think the most practical is shown in both the above examples, create the master nav off the artboards, create the links then in Prototype mode alt drag into position.

            Highside1340
            Highside1340
            Participant
            September 22, 2020

            Hi - is there a  requirement to improve this in the public backlog (so I can go vote for it)? Really surprised and disappointed in the function and required work around. Thanks.

             

              Atul_Saini
              Community Manager
              Atul_SainiCommunity Manager
              Community Manager
              June 4, 2019

              Hi Johnw6761,

              Thanks for using Adobe XD, here is what you may try, create a navigation bar with all the links and navigation. Make it a master component. Then, go to prototype mode and copy it to all the artboards as shown in the screenshot below.

              I hope it works for you. Please update this discussion in case you need further assistance.

              Thanks,

              Atul_Saini

              Peter Villevoye
              Community Expert
              Peter VillevoyeCommunity Expert
              Community Expert
              June 5, 2019

              I also tried some test with the new Components, but I noticed that when I copied the component consisting of the linked menu buttons from one screen to another screen, the button with its link to its own screen would automatically lose its link within that instance of the component. Copying this altered instance again, would not restore the link, so you're copying a crippled component...

              You need to create the original for the component off any referred screen, and copy this original instance to the other screens !

              Peter Villevoye
              Community Expert
              Peter VillevoyeCommunity Expert
              Community Expert
              June 5, 2019

              And apart from my test above, creating and spreading the components before linking the buttons, and linking the component afterwards, doesn't work. The added links in the original instance are not trickling through in other instances of the components on their screens...

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