×
  1. InVision Support
  2. Community
  3. Get Help With Craft
Avatar

Paul Wilcox

Follow

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

Answered

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!

9

Comments

Sort by Date Votes

Please sign in to leave a comment.

  • Official comment
    Permalink
    Avatar
    Shaina Torgerson

    UPDATE

    Great news! You can now link to 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.

  • Permalink
    Avatar
    Nathaniel Daught

    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
  • Permalink
    Avatar
    Paul Wilcox

    Thanks Nate! I appreciate the feedback.

    0
  • Permalink
    Avatar
    Elizabeth Brookshire

    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
  • Permalink
    Avatar
    Michael Prewitt

    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
  • Permalink
    Avatar
    Shaina Torgerson
    • (Edited)

    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
  • Permalink
    Avatar
    Joshua Burcham

    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
  • Permalink
    Avatar
    Shaina Torgerson

    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
  • Permalink
    Avatar
    Jason Kirst

    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
  • Permalink
    Avatar
    Shaina Torgerson

    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
  • Permalink
    Avatar
    Chance Agrella

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

    1
  • Permalink
    Avatar
    Shaina Torgerson

    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
  • Permalink
    Avatar
    Thor

    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
  • Permalink
    Avatar
    Shaina Torgerson

    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
  • Permalink
    Avatar
    Chris Johnston

    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
  • Permalink
    Avatar
    Shaina Torgerson

    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
  • Permalink
    Avatar
    Steve Harman
    • (Edited)

    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
  • Permalink
    Avatar
    Shaina Torgerson

    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