• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

How to set re-usable navigation links in prototype?

Participant ,
Oct 23, 2022 Oct 23, 2022

Copy link to clipboard

Copied

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.

 

Screenshot 2022-10-23 at 14.18.16.png

 

<Title renamed by moderator>

TOPICS
How to , Prototyping

Views

175

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
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 03, 2022 Nov 03, 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/

...

Likes

Translate

Translate
Community Expert ,
Nov 03, 2022 Nov 03, 2022

Copy link to clipboard

Copied

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!

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
community guidelines
Participant ,
Nov 07, 2022 Nov 07, 2022

Copy link to clipboard

Copied

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

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
community guidelines
Community Expert ,
Nov 07, 2022 Nov 07, 2022

Copy link to clipboard

Copied

LATEST

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/

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
community guidelines