{"id":12389,"date":"2017-09-19T11:29:24","date_gmt":"2017-09-19T10:29:24","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=12389"},"modified":"2020-08-21T15:57:12","modified_gmt":"2020-08-21T14:57:12","slug":"introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/","title":{"rendered":"Introducing Handoff &#8211; grab code, specs and assets from your designs and prototypes"},"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\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" class=\"wistia_embed\" title=\"Wistia video player\" src=\"https:\/\/fast.wistia.net\/embed\/iframe\/cio5nqlfo5\" name=\"wistia_embed\" width=\"710\" height=\"399\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n<script src=\"https:\/\/fast.wistia.net\/assets\/external\/E-v1.js\" async><\/script><\/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\u2019ve seen our prototypes make a huge impact in communicating with development teams, but we wanted to find a way to save the time and effort that goes with the design-to-development process.<\/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\">Redlining, annotating PDFs and (urgh) cutting assets are tasks that we wanted to solve in just a few clicks. Our goal is to free up the time your team spends on these manual tasks so you can focus on the things that matter.<\/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\">*DRUMROLL* So we\u2019re excited to introduce <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/handoff?utm_source=introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes&amp;utm_medium=in-article-link&amp;utm_campaign=marvel-blog-advertising&amp;utm_content=handofflink\">Handoff<\/a> - automatically generate code, specs and assets for developers from your designs and prototypes in Marvel!<\/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 focused on 5 main areas:<\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Pixel-perfect design specs<\/strong><\/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\">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<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All of your design assets in one place <\/strong><\/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\">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<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design-to-code faster<\/strong><\/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 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<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">No additional software <\/strong><\/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 works in the browser and lives on the same public share URL as your prototype. That means that developers no longer need Sketch to access specs and assets.<\/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\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Friends with your existing workflow and process<\/strong><\/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\">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 - 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\">Oh and 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 <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/sketch\">compatible with Sketch<\/a> and our built-in wireframing tool. Once you've added your designs to Marvel, you'll 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\">This is just the start for the tech behind Handoff, we're looking forward to showing you what's next!<\/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 now available to design and development teams on all plans. For more information on what our plans offer, visit our <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/pricing\">pricing page<\/a> or if you're a team of 6+ <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/enterprise\">speak to our dedicated team<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve seen our prototypes make a huge impact in communicating with development teams, but we wanted to find a way to save the time and effort that goes with the design-to-development process. Redlining, annotating PDFs and (urgh) cutting assets are tasks that we wanted to solve in just a few clicks. Our goal is to free up the time your&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":1,"featured_media":12393,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[487],"tags":[],"class_list":["post-12389","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=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Handoff - grab code, specs and assets from your designs and prototypes | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"We\u2019ve seen our prototypes make a huge impact in communicating with development teams, but we wanted to find a way to save the time and effort that goes with the design-to-development process. Redlining, annotating PDFs and (urgh) cutting assets are tasks that we wanted to solve in just a few clicks. Our goal is to free up the time your... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/\" \/>\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=\"2017-09-19T10:29:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-21T14:57:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/09\/02_Banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3450\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\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:\/\/shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/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:\/\/shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2017\/09\/02_Banner.png\",\"width\":3450,\"height\":1440},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/#webpage\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/\",\"name\":\"Introducing Handoff - grab code, specs and assets from your designs and prototypes | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/#primaryimage\"},\"datePublished\":\"2017-09-19T10:29:24+00:00\",\"dateModified\":\"2020-08-21T14:57:12+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/#webpage\"},\"author\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/ecec7188bfa16fd52700fd6952ed9949\"},\"headline\":\"Introducing Handoff &#8211; grab code, specs and assets from your designs and prototypes\",\"datePublished\":\"2017-09-19T10:29:24+00:00\",\"dateModified\":\"2020-08-21T14:57:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/#primaryimage\"},\"articleSection\":\"Handoff\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/introducing-handoff-automatically-generate-code-specs-assets-designs-prototypes\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/ecec7188bfa16fd52700fd6952ed9949\",\"name\":\"Murat\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/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:\/\/shopjessicabuckley.com\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/12389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=12389"}],"version-history":[{"count":0,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/12389\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/12393"}],"wp:attachment":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=12389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=12389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=12389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}