Skip to main content
user82573258
user82573258
Inspiring
October 23, 2022
Answered

How to set re-usable navigation links in prototype?

  • October 23, 2022
  • 1 reply
  • 553 views

I'm going through the XD prototyping tutorials and am wondering if I can set the hotspots in this navigation without having to apply them to every artboard individually? As the latter could be very time consuming if I have a lot of different pages

 

E.g. could I make a component out of the nav and link each button to a certain artboard, and then place that component into my artboards?

 

It seems I can do something similar with overlays, except that involves having them animate in... whereas I'd just like it so that the nav was static.

 

 

<Title renamed by moderator>

This topic has been closed for replies.
Correct answer AkinGn

Hi, I tried and actually this is a recommended method while designing multiple pages, and of course for a consistent design/system. Steps should be: 1. Create the navigation component as you said, you can totally do that on a seperate artboard. 2. Go to prototype mode and create the connections to the relevant artboards/pages from your nav component. 3. Copy the nav component to the all artboards/pages. I created a simple example you can see the prototype here: https://xd.adobe.com/view/44080237-95c2-4b12-87ff-4a020f0262de-115b/
and the file here: https://www.dropbox.com/s/g0s2fk3e850j588/nav-component-for-multiple-artboards.xd?dl=0
Hope this helps!

1 reply

AkinGn
Community Expert
AkinGnCommunity ExpertCorrect answer
Community Expert
November 3, 2022

Hi, I tried and actually this is a recommended method while designing multiple pages, and of course for a consistent design/system. Steps should be: 1. Create the navigation component as you said, you can totally do that on a seperate artboard. 2. Go to prototype mode and create the connections to the relevant artboards/pages from your nav component. 3. Copy the nav component to the all artboards/pages. I created a simple example you can see the prototype here: https://xd.adobe.com/view/44080237-95c2-4b12-87ff-4a020f0262de-115b/
and the file here: https://www.dropbox.com/s/g0s2fk3e850j588/nav-component-for-multiple-artboards.xd?dl=0
Hope this helps!

    M
    mttplbkp
    Inspiring
    November 7, 2022

    Thanks! but if you re-wire some of the nav links, does that update on all instances of the component?

     

    I'm under the impression that components don't store the nav / wires themselves (not sure if Im using the right terms here) and that they need to be copied & pasted

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    November 7, 2022

    Actually it looks like it has been updated in the all instances of the nav component, as long as the wire change has been done in the main component, it acts like any other component parameter. In my example, I created a "B2" artboard by copying the B artboard and wired the B link to "B2", and did the wiring only in the main component, and now regardless of which artboard I'm in, whenever I click B, it directs me to B2 artboard: https://xd.adobe.com/view/44080237-95c2-4b12-87ff-4a020f0262de-115b/

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