Highlighted

Adobe XD Prototype master components

New Here ,
Jun 04, 2019

Copy link to clipboard

Copied

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.

Views

3.3K

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

Adobe XD Prototype master components

New Here ,
Jun 04, 2019

Copy link to clipboard

Copied

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.

Views

3.3K

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 04, 2019 3
Adobe Employee ,
Jun 04, 2019

Copy link to clipboard

Copied

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

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 04, 2019 1
Adobe Community Professional ,
Jun 05, 2019

Copy link to clipboard

Copied

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 !

Schermafbeelding 2019-06-05 om 15.12.40.png

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 05, 2019 0
Adobe Community Professional ,
Jun 05, 2019

Copy link to clipboard

Copied

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

Schermafbeelding 2019-06-05 om 15.23.07.png

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 05, 2019 1
New Here ,
Jun 14, 2019

Copy link to clipboard

Copied

I've tried this as well. I really need to be able to add links to a master component and have them be retained with instances. Really have links behave similar to other component attributes where they persist unless overridden.

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 14, 2019 2
Adobe Community Professional ,
Jun 16, 2019

Copy link to clipboard

Copied

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.

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 16, 2019 2
New Here ,
Sep 22, 2020

Copy link to clipboard

Copied

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.

 

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...
Sep 22, 2020 0
Community Beginner ,
Jul 29, 2019

Copy link to clipboard

Copied

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.

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 29, 2019 1
Explorer ,
Nov 05, 2019

Copy link to clipboard

Copied

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.

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...
Nov 05, 2019 2