{"id":17822,"date":"2019-06-04T16:06:32","date_gmt":"2019-06-04T15:06:32","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=17822"},"modified":"2020-11-12T11:28:58","modified_gmt":"2020-11-12T11:28:58","slug":"create-dynamic-hotspot-templates-using-marvel-sketch","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/","title":{"rendered":"How To Create Dynamic Hotspot Templates Using Marvel and Sketch"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here\u2019s a quick video to show you how:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center class=\"marginBottom-l pageWrap pageWrap\u2014m\"><\/p>\n<div style='max-width: 750px;'>\n<script src=\"https:\/\/fast.wistia.com\/embed\/medias\/raw5rniwpr.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\">\n<div class=\"wistia_embed wistia_async_raw5rniwpr videoFoam=true\" style=\"height:100%;position:relative;width:100%\">\n<div class=\"wistia_swatch\" style=\"height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;\"><img decoding=\"async\" src=\"https:\/\/fast.wistia.com\/embed\/medias\/raw5rniwpr\/swatch\" style=\"filter:blur(5px);height:100%;object-fit:contain;width:100%;\" alt=\"\" onload=\"this.parentNode.style.opacity=1;\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here's how:<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Download and install <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/https:\/\/storage.googleapis.com\/sketch-plugin\/Marvel.zip\">Marvel for Sketch<\/a><\/li>\n<li>Create a symbol in Sketch<\/li>\n<li>Attach prototype links to buttons in your symbol, selecting the target artboard<\/li>\n<li>You can now reuse your symbol throughout your artboard as a hotspot template<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This feature came from your suggestions on our feature request page - if you have ideas for improving Marvel, let us know <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.cnflx.io\/public\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s a typical use case &#8211; you are working on an iPhone prototype which has 3 buttons in the Tab Bar which appears in the footer on&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":91,"featured_media":17827,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[429],"tags":[],"class_list":["post-17822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-tips-and-tricks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Save minutes and hours of manual work by using Symbols in Sketch when syncing your prototypes, it&#039;s our support for hotspot templates\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create Dynamic Hotspot Templates Using Marvel and Sketch | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Save minutes and hours of manual work by using Symbols in Sketch when syncing your prototypes, it&#039;s our support for hotspot templates\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-04T15:06:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T11:28:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/06\/Blogpost_02@2x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3200\" \/>\n\t<meta property=\"og:image:height\" content=\"1400\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/06\/Blogpost_02@2x.png\",\"width\":3200,\"height\":1400},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/\",\"name\":\"How To Create Dynamic Hotspot Templates Using Marvel and Sketch | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/#primaryimage\"},\"datePublished\":\"2019-06-04T15:06:32+00:00\",\"dateModified\":\"2020-11-12T11:28:58+00:00\",\"description\":\"Save minutes and hours of manual work by using Symbols in Sketch when syncing your prototypes, it's our support for hotspot templates\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/c15a12cd56e8c344978415a704279e44\"},\"headline\":\"How To Create Dynamic Hotspot Templates Using Marvel and Sketch\",\"datePublished\":\"2019-06-04T15:06:32+00:00\",\"dateModified\":\"2020-11-12T11:28:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/#primaryimage\"},\"articleSection\":\"Product Tips &amp; Tricks\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/create-dynamic-hotspot-templates-using-marvel-sketch\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/c15a12cd56e8c344978415a704279e44\",\"name\":\"Maxime De Greve\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/840c3a50faa4cfc7c6138fbb03bdfb24e590e8949a055d27e411d6067f9cc9e4?s=96&d=mm&r=g\",\"caption\":\"Maxime De Greve\"},\"description\":\"Designer and Developer @marvelapp. Belgian.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/17822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/91"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=17822"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/17822\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/17827"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=17822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=17822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=17822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}