Skip to main content
user82573258
user82573258
Inspiring
Oct 23, 2022 1:24 PM UTC
Answered

How to set re-usable navigation links in prototype?

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 is closed to new replies. Start a new post to keep the conversation going.
AkinGn
AkinGnCorrect answer
Community Expert
Nov 3, 2022 11:46 AM UTC

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!

View reply

3 replies

AkinGn
Community Expert
AkinGnCommunity ExpertCorrect answer
Community Expert
Nov 3, 2022 11:46 AM UTC

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!

Translate
    mttplbkp
    Inspiring
    Nov 7, 2022 10:59 AM UTC

    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

    Translate
    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    Nov 7, 2022 11:41 AM UTC

    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/

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