{"id":17587,"date":"2019-04-24T10:15:39","date_gmt":"2019-04-24T09:15:39","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=17587"},"modified":"2020-08-27T15:51:54","modified_gmt":"2020-08-27T14:51:54","slug":"integrating-abstract-marvel-create-master-prototype","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/","title":{"rendered":"Integrating Abstract and Marvel to Create a Master Prototype"},"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 the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/developers\">Marvel API<\/a>, a new way to build customised workflows, integrations and apps that utilise the designs, users and data on 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\">It led to some brilliant integrations like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/features\/integrations\">SmartMockups, Maze and Microsoft Teams<\/a>. We also kicked off Marvel Labs, an internal skunkworks where we experiment with small apps and ideas like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/userflows.marvelapp.com\/\">Userflows<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dashboard.marvelapp.com\/\">Dashboard <\/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\">Being able to quickly spin up these integrations and custom workflows has been massively empowering for the team. In the era of DesignOps, we're constantly searching for ways to bring greater efficiency, productivity and customisation to the design 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\">We\u2019ve recently adopted the awesome <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.abstract.com\/\">Abstract<\/a> into our tools and started to think about ways to integrate it deeper into 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\">If you haven't heard of Abstract, it works as version control for Sketch, allowing designers to work in similar way to how developers work on Github (<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.abstract.com\/how-it-works\/\">Master files, branches, push, pull, merge etc<\/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\">Designers can upload their Sketch file (Master file) and allow other designers to create multiple versions from it (Branches). Once they are happy, the designer can request to 'merge' their iteration into the Master file.<\/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 process prevents any unwanted changes and corruption of design files. Whilst at the same time, giving designers the flexibility to experiment and dabble within their own branch, without messing with the Master file and overwriting it by mistake.<\/p>\n<div id='gallery-1' class='gallery galleryid-17587 gallery-columns-3 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"376\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/branch-from-master.png\" class=\"attachment-medium size-medium\" alt=\"Abstract Marvel link branch from master\" \/>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"351\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/darrens-branch.png\" class=\"attachment-medium size-medium\" alt=\"\" \/>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"372\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/master-final.png\" class=\"attachment-medium size-medium\" alt=\"\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since all our Sketch files live on Abstract, we wanted to find a way to keep the Master file in sync with the prototypes in our Marvel projects. Luckily, Abstract have just released their SDK, a perfect match for our API!<\/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;\">Introducing the \u2018Master Prototype\u2019 workflow<\/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\">Imagine this workflow: You have a process where multiple designers work within a single project in Abstract. Each designer creates a new branch when they work, then once they are finished, they make the request to the project owner to merge their design changes into the Master Sketch file.<\/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 that happens, your new and approved designs sync automatically to a Marvel prototype and continue to stay updated.<\/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 essence, you\u2019ve created a Master Prototype. One that is always ready to share with clients, developers, researchers and other stakeholders or embed in docs and websites etc, knowing with absolute certainty that it has been approved and is the final version.<\/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\">Now, imagine that flow hooked into our upcoming <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/user-testing\">User Testing API<\/a> and being able to automatically send to a list of internal stakeholders to test your prototype each time designs have been updated from Master.<\/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\">That\u2019s an incredibly powerful process.<\/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;\">Integrating with Abstract<\/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\">We set-up a small app where you connect your Marvel and Abstract accounts, then select the Master branch you would like to sync with a Marvel project.<\/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\u2019s pretty straight forward, once connected, it pulls the artboards from Abstract and updates the Marvel 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\"><\/p>\n<div style=\"max-width: 750px;\">\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/ptxy2m5dfb.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%;\"><span class=\"wistia_embed wistia_async_ptxy2m5dfb popover=true popoverAnimateThumbnail=true videoFoam=true\" style=\"display: inline-block; height: 100%; position: relative; width: 100%;\">\u00a0<\/span><\/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\"><\/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\">And voila! You have a Master Prototype, ready to share, whilst you bask in the knowledge that it's been approved and the latest version.<\/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\u2019s next?<\/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\">We want to hear from you! We\u2019re currently revamping our integration section and think that Abstract would make a fantastic addition.<\/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\">Would you like to see an Abstract and Marvel integration? <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.cnflx.io\/public\/ideas\/1219\">Upvote the feature here <\/a>and keep up to date with developments. Vote for it here or tell us on<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/marvelapp\"> Twitter<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last year we launched the Marvel API, a new way to build customised workflows, integrations and apps that utilise the designs, users and data on Marvel. It led to some brilliant integrations like SmartMockups, Maze and Microsoft Teams. We also kicked off Marvel Labs, an internal skunkworks where we experiment with small apps and ideas like Userflows and Dashboard &#8230;. <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":91,"featured_media":17592,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[453],"tags":[],"class_list":["post-17587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrations-api"],"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:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating Abstract and Marvel to Create a Master Prototype | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Last year we launched the Marvel API, a new way to build customised workflows, integrations and apps that utilise the designs, users and data on Marvel. It led to some brilliant integrations like SmartMockups, Maze and Microsoft Teams. We also kicked off Marvel Labs, an internal skunkworks where we experiment with small apps and ideas like Userflows and Dashboard .... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/\" \/>\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-04-24T09:15:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-27T14:51:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/abstract-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1621\" \/>\n\t<meta property=\"og:image:height\" content=\"912\" \/>\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:\/\/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\/integrating-abstract-marvel-create-master-prototype\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/abstract-1.png\",\"width\":\"1621\",\"height\":\"912\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/\",\"name\":\"Integrating Abstract and Marvel to Create a Master Prototype | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/#primaryimage\"},\"datePublished\":\"2019-04-24T09:15:39+00:00\",\"dateModified\":\"2020-08-27T14:51:54+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/c15a12cd56e8c344978415a704279e44\"},\"headline\":\"Integrating Abstract and Marvel to Create a Master Prototype\",\"datePublished\":\"2019-04-24T09:15:39+00:00\",\"dateModified\":\"2020-08-27T14:51:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/#primaryimage\"},\"articleSection\":\"Integrations &amp; API\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/integrating-abstract-marvel-create-master-prototype\/#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\/17587","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=17587"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/17587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/17592"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=17587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=17587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=17587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}