šŸ“¹ New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
Product Tips & Tricks

How To Create Dynamic Hotspot Templates Using Marvel and Sketch

Posted 4 years ago by Maxime De Greve
How To Create Dynamic Hotspot Templates Using Marvel and Sketch

One of the lesser known features of Marvel, but one that saves minutes and hours of manual work is our support for hotspot templates by using Symbols in Sketch when syncing your prototypes.

Here's a typical use case - you are working on an iPhone prototype which has 3 buttons in the Tab Bar which appears in the footer on most of designs in your prototype. You have everything linked up and working in Marvel, however it's decided that the tab bar needs one more button, plus it all needs to change order.

In the past, that would require you to change the link on every single hotpot and move it all around to make way for the changes. If you have more than a dozen screens that is a lot of manual work, but no more! We now have a great solution.

Hereā€™s a quick video to show you how:

It works by allowing you to add hotspots to symbols within your Sketch files, essentially creating a hotspot template that you can add to any artboard, only needing to update it once to replace across every screen in your prototype.

Here's how:

  1. Download and install Marvel for Sketch
  2. Create a symbol in Sketch
  3. Attach prototype links to buttons in your symbol, selecting the target artboard
  4. You can now reuse your symbol throughout your artboard as a hotspot template

This feature came from your suggestions on our feature request page - if you have ideas for improving Marvel, let us know here.

Prototype with Sketch!

Prototype with Sketch!

Send artboards straight from Sketch into your Marvel projects.

Download Plugin

Designer and Developer @marvelapp. Belgian.

Related Posts

You wouldnā€™t be alone if you thought prototypes were just for designers. We used to think this too! But since all a prototype is, is a mockup of a digital experience, it turns out there are some interesting use-cases by the non-designers in our Customer Support Team. The way we use prototypes in Customer Support at Marvel is very similar… Read More →

A great way to understand the value and different use cases for Marvel is for everyone at Marvel to use prototyping in their day-to-day work. Clearly thatā€™s a no-brainer for our designers, developers and product managers, but what about the other teams, how do they use Marvel? The Customer Experience (CX) teamā€™s main responsibility is to look after all of… Read More →

Collaboration involves teams working together to achieve a common goal. It relies on individual characteristics including motivation, organisation and focus but also a shared understanding of team and individual objectives, and how they ladder up to the overall goal. By understanding how work is shared across Product, Design and Engineering not only will work get done faster but also to… Read More →

Categories