{"id":15180,"date":"2018-06-05T10:03:37","date_gmt":"2018-06-05T09:03:37","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15180"},"modified":"2020-08-21T11:52:40","modified_gmt":"2020-08-21T10:52:40","slug":"handoff-for-everyone","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/","title":{"rendered":"Handoff, for everyone!"},"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\">Last year, we launched a feature which has quickly become a cornerstone of our platform and really helps product teams move between design and development smoother and faster. It's called Handoff and it allows teams to grab code, specs and assets from designs and prototypes to handover to development teams.<\/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\">We'd now like to announce that the feature is now available on all plans. We wanted all Marvel users to get a taste of how seamless the design to development process can be using our Handoff tool.<\/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><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/mt0xuyraou.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/center><\/p>\n<div class=\"wistia_embed wistia_async_mt0xuyraou\" style=\"height: 360px; position: relative; width: 640px;\">\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\" style=\"filter: blur(5px); height: 100%; object-fit: contain; width: 100%;\" src=\"https:\/\/fast.wistia.com\/embed\/medias\/mt0xuyraou\/swatch\" alt=\"\" \/><\/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\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Why we built it<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Most designers today remember a time when creating \u2018spec docs\u2019 meant building a huge PDF with annotated margins and redlines, itemising every single element in the design. From font sizes, colours, link destinations to distances between elements.<\/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\">Back in my agency days, I use to dread documentation tasks. We would add a chunk of time in our project plan called \u2018UX documentation\u2019 which lasted weeks, sometimes months.<\/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\">Once you finished the mammoth document, you just hoped that there wouldn\u2019t be any major changes to the flow, design or style guide, otherwise you could be back to square one.<\/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\">\u2018Spec fatigue\u2019 sets in, but not just for the poor soul creating the document, but anyone trying to make sense of a 100+ pages of annotations in 10pt font.<\/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\">Somewhere along the line, in a cruel plot twist, the responsibility of extracting specs from designs was also pushed onto developers - by buying them a copy of Sketch\/Photoshop and asking them to pick out the bits they need. Problem solved? Not quite.<\/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\">Marvel aims to solve the problem of translating interactive designs through static documentation and have seen our prototypes make a huge impact in communicating with development teams.<\/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\">Spec docs can now contain a single prototype URL that doesn't require paragraphs of text to explain dozens of static images.<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/20180530_HandOff_Email_9.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15184\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/20180530_HandOff_Email_9.gif\" alt=\"\" width=\"676\" height=\"676\" \/><\/a><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What to expect from a single URL spec<\/h2>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Pixel-perfect design specs<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">No eyeballing, no spec fatigue, no human error. We extract the exact values from the designs so developers can build faster and with more accuracy.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">All of your design assets in one place<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When your designs are added to your Marvel project, the assets do too, meaning your developers will always have everything they need in one place, at the right size.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Design-to-code faster<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Handoff automatically generates CSS, Swift and Android code for your design assets. Just copy and paste into your code editor and away you go!<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">No additional software<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Handoff works in the browser and lives on the same public share URL as your prototype. That means that developers no longer need Sketch or Photoshop to access specs and assets.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Friends with your existing workflow and process<\/h3>\n<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 great things you\u2019ll notice about using Handoff is that it doesn\u2019t require any changes to how you work. The way you add designs to your project stays the same \u2013 but now you get this additional layer of rich information right next to 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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/Image.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15190\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/06\/Image.png\" alt=\"\" width=\"1440\" height=\"900\" srcset=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Image.png 1440w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Image-600x375.png 600w, https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Image-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/a><\/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 seamlessly with existing Marvel integrations such as <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.slack.com\/apps\/A0GJE163D-marvel\">Slack<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marketplace.atlassian.com\/plugins\/com.marvelapp.jira.addon.marvelapp-for-jira\/cloud\/overview\">JIRA<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marketplace.atlassian.com\/plugins\/com.marvelapp.confluence.addon.marvelapp-for-confluence\/cloud\/overview\">Confluence<\/a>, adding more visibility across dev and product teams.<\/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\">Handoff is compatible with <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.shopjessicabuckley.com\/sketch\">Sketch<\/a> and our built-in wireframing tool. Once you\u2019ve added your designs to Marvel, you\u2019ll see the Handoff button available when you play 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\">So, go give it a spin.<\/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\">You need to set up Handoff before you get started. Check out the instructions in our <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/help.www.shopjessicabuckley.com\/hc\/en-us\/articles\/115004519369-Get-started-with-Handoff\">help center<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last year, we launched a feature which has quickly become a cornerstone of our platform and really helps product teams move between design and development smoother and faster. It&#8217;s called Handoff and it allows teams to grab code, specs and assets from designs and prototypes to handover to development teams. We&#8217;d now like to announce that the feature is now&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":1,"featured_media":15192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[487],"tags":[],"class_list":["post-15180","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handoff"],"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=\"Handoff allows teams to grab code, specs and assets from designs and prototypes to handover to development teams.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handoff, for everyone! | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Handoff allows teams to grab code, specs and assets from designs and prototypes to handover to development teams.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/\" \/>\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=\"2018-06-05T09:03:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-21T10:52:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/01_Thumbnail-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"898\" \/>\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=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.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:\/\/www.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/01_Thumbnail-1.png\",\"width\":1200,\"height\":898},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/\",\"name\":\"Handoff, for everyone! | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/#primaryimage\"},\"datePublished\":\"2018-06-05T09:03:37+00:00\",\"dateModified\":\"2020-08-21T10:52:40+00:00\",\"description\":\"Handoff allows teams to grab code, specs and assets from designs and prototypes to handover to development teams.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/ecec7188bfa16fd52700fd6952ed9949\"},\"headline\":\"Handoff, for everyone!\",\"datePublished\":\"2018-06-05T09:03:37+00:00\",\"dateModified\":\"2020-08-21T10:52:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/#primaryimage\"},\"articleSection\":\"Handoff\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/handoff-for-everyone\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/ecec7188bfa16fd52700fd6952ed9949\",\"name\":\"Murat\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60b7fb1722edde45406cb169ec3eb1e56dc54bf074f00186ba92dae286837d96?s=96&d=mm&r=g\",\"caption\":\"Murat\"},\"description\":\"Hi! I'm one of the co-founders at Marvel and a Product Designer by trade. You can often find me asking why Arsenal haven't signed anyone this season. Follow me on Twitter.\",\"sameAs\":[\"http:\/\/www.shopjessicabuckley.com\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=15180"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15180\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/15192"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=15180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=15180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=15180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}