Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Paul Wilcox Paul Wilcox
Answered

Can I use symbols in Sketch for my header and footer (including navigation) and create a working prototype?

Hello,

One of my favorite things about Sketch is that I can create a symbol for my header and footer so if there is a change to either I only have to change it once in my symbol and all of my pages are updated. Unfortunately, when I tried to link nav items from a symbol using craft I could not. I tried to take a different approach by linking my nav items to various artboards outside of the symbol and then copy/pasting them into a symbol once the links were added. Again this did not work. Is there a way to create a dynamic header/footer and insert artboard links with craft?

Additionally, I like using pages in Sketch so I can easily toggle between pages. I couldn't figure out a way to link from an artboard on one page to an artboard on another, rather all of my artboards had to be on the same page in order to add craft links. Am I overlooking something? Thank You!

10

comments

sort by

official comment
Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador Edited
Comment actions Permalink

UPDATE

Great news! You can now link from layers in symbols. Symbols allow you to reuse elements across multiple artboards and pages in Sketch. Add prototype links to individual layers within a symbol so you can reuse the links anywhere that symbol gets used.

Learn more about this feature and others in the latest Craft release here.


Nathaniel Daught
InVision ambassador Nathaniel Daught , ambassador
Comment actions Permalink

Hello Paul,

I also use header & footer Sketch symbols all the time. You are correct, there is currently no way to use Craft Sync + Prototype to link hotspots from inside of symbols.

One workaround I sometimes use is rectangle shapes without a fill/outline on top of the symbol to create my hotspots manually. Obviously you also need to manually update and move these hotspots when you update your symbol layout, but it lets you continue to manage all your hotspots inside of Sketch. You can also copy/paste the hotspot shapes between artboards and the links you set should remain in place.

 

Correct again, there is currently no way link hotspots between different pages. I've just gotten better at logically arranging/grouping my artboards to make-up for this limitation, with the help of this plugin: https://github.com/bomberstudios/artboard-manager (note: you won't want to use the rename artboards feature with Craft sync)

Hope that helps.

-Nate

4

Paul Wilcox
InVision ambassador Paul Wilcox , ambassador
Comment actions Permalink

Thanks Nate! I appreciate the feedback.

0

Elizabeth Brookshire
InVision ambassador Elizabeth Brookshire , ambassador
Comment actions Permalink

Hi Paul! Nathaniel has a great suggestion, as we do not currently have a way to use symbols and Craft Sync with Prototype. However, I wanted to jump in and let you know that I'm opening a ticket on your behalf so we can inform our Product team that you'd like this to be added in the future.

We’re currently tracking interest for this. If you’d like to add your vote for this feature, please contact Support here and voice your opinion! Cheers!

0

Michael Prewitt
InVision ambassador Michael Prewitt , ambassador
Comment actions Permalink

Just a "me too!" on this post. The workaround that Nate suggests is almost as difficult as (or maybe worse than) not using symbols at all. I mean, it's OK as long as you only change the appearance of an element in a symbol slightly. But if you change its size or position, then you are off to copying and pasting to ALL the screens where that nav element occurs. I think I could do that maybe a couple times before I'd be thinking, "Time for a different prototyping tool."

In my opinion, a perfectly elegant solution for linking symbols would be to allow the user to select an artboard from a drop-down list, instead of the drag a line to an artboard approach. Easy as pie.

Given that symbols are such a core component of Sketch, and are widely used for common nav elements, I'm surprised there is not a better solution for this.

5

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador Edited
Comment actions Permalink

Hi Michael,

Thanks so much for the input! We appreciate hearing exactly how you would like our product to work so that we can relay that information to our Product team.

We’re currently tracking interest for this. If you’d like to add your vote for this feature, please contact Support here and voice your opinion!

Cheers,

Shaina

0

Joshua Burcham
InVision ambassador Joshua Burcham , ambassador
Comment actions Permalink

Me too! It makes so much sense to make symbols out of navigation elements... it only follows we should be able to add links.

If I could be very specific in how I'd love for it to work... Keep the drag method as an option, but like Michael Prewitt said, add a dropdown of art boards.

And bonus if the dropdown could be selected with a tab + typing ideally. A user could quickly click to select an element, hit "C" to bring pop-up immediately (and turn on the drag option), but instead of dragging the user can hit tab to focus on the drop down menu, the start typing the name of the artboard she is trying to link to, then hit enter to confirm the selection. You could quickly link elements with minimal pointing and clicking.

I've already contacted Support to voice my opinion.

Thanks!

 

1

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Joshua,

Thanks for adding a bit more detail around your feature request "vote". We appreciate you notifying our Support team directly. I will be sure that they are also aware of your involvement in this Community post!

Have a wonderful day,

Shaina

0

Jason Kirst
InVision ambassador Jason Kirst , ambassador
Comment actions Permalink

Me three. We use symbols extensively for our prototypes and need to be able to target elements within the symbol. In fact the prototype feature is almost useless for anything but the most basic prototypes for us without this functionality.

One note - sometimes I need the same element in a symbol to link to a different art board depending on the sequence of the prototype - so I'd need to be able to override the default symbol link.

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Jason,

Thanks for adding your vote to this feature request and reaching out to our Support team directly.

We will be sure to post in this Community thread once if and when this feature becomes available.

Have a great day,

Shaina

0

Chance Agrella
InVision ambassador Chance Agrella , ambassador
Comment actions Permalink

Found this thread while looking to do exactly this, so +1 vote.

1

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Chance,

Thanks for reaching out on this thread! To add your vote to this feature request, please contact Support here and voice your opinion!

Have a wonderful day,

Shaina

0

Thor
InVision ambassador Thor , ambassador
Comment actions Permalink

For a short time (spring 2018) you could actually add links to symbols as long as the symbol lived in the same page as your artboards (rather than on the symbols page). It greatly improved my workflow. Unfortunately, this feature no longer works. This thread hasn't been updated in 7 months, any news on this feature?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Thor,

It appears as if you have already opened a ticket with Support, and they have tracked your vote for this feature. They will be able to keep you in the loop about any updates regarding this feature request.

Thanks for your patience,

Shaina

0

Chris Johnston
InVision ambassador Chris Johnston , ambassador
Comment actions Permalink

I wanted this and still want it. I did find the next best thing. You can create hotspot templates right in InVision. Works perfect for headers and footers. 

Just go to build mode in your prototype, make a hotspot and tick "Include hotspot in template." You can make a template with multiple hotspots and apply it in bulk to your artboards easily. 

Problem solved!

 

Chris

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Chris,

Thank you very much for adding your feedback regarding this potential feature. I will be opening a ticket on your behalf to track you vote for this feature, and share your suggestions with our Support team. Please look for a message confirming your vote soon.

Thanks again for reaching out,

Shaina

0

Steve Harman
InVision ambassador Steve Harman , ambassador Edited
Comment actions Permalink

Still no links / hotspots on Symbols?   Even the built-in Sketch prototyping feature can do this.

Surely the simplest way to achieve this and the other point made by the OP is to abandon the "large blue arrow" to link hotspots to artboards and instead offer a dropdown list / artboard navigator which can easily access other artboards whether they're on the same page or not.

Again - precisely how Sketch does it with its own in-built prototyping. 

Case:  Create a hotspot / link > choose the target artboard from a dropdown navigator.  Which conveniently is categorised by Page so user can easily choose their target artboard no matter which page it's on

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Steve,

Thanks for reaching out on this thread. I understand how frustrating it is to wait for a feature to be release. I can assure you that the Support and Product teams are aware of the need for this feature, but we prioritize issues based on the scope and impact of the issue. For that reason, we don’t have an immediate fix available. However, this is an issue that I will be raising in the soonest Product meetings.

In the meantime, I will open a ticket on your behalf to track your vote for this feature so that you are notified as soon as we have any updates.

Thanks for bearing with us,

Shaina
0

join the conversation

to comment, sign up or sign in.