📹 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 1 year 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

Prototyping is one of the earliest steps in the process of creating a product. With prototyping, a team can establish what a product should look like, how its end-users should interact with it and then validate these ideas before moving forward with development. Without needing to commit to development resources, you and your team can test out ideas for websites… Read More →

We’re big advocates of paper prototyping. Not just as part of how ideas are formed and tested, but also as a way to remove the barriers of entry into design and collaboration. The beauty of starting on paper are the limitations forced on you by the medium. This often helps focus on what matters, not just for you, but for… Read More →

Did you know that once you’ve created a prototype in Marvel, you can embed it on any HTML web page or blog including WordPress, Medium, Wix, Squarespace and even Behance? Since we launched prototype embeds, we’ve seen them pop up everywhere, in almost every use-case from product marketing and sales to education. From Papa Johns to Duo and PWC, thousands… Read More →

Categories