{"id":79,"date":"2019-07-03T14:46:10","date_gmt":"2019-07-03T12:46:10","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/07\/03\/how-to-use-sketch2react-together-with-invision-design-system-manager\/"},"modified":"2020-06-18T07:26:59","modified_gmt":"2020-06-18T07:26:59","slug":"how-to-use-sketch2react-together-with-invision-design-system-manager","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/","title":{"rendered":"How to use Sketch2React together with InVision Design System Manager"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg\"><br \/>\n<\/figure>\n<p>This is another shining example of how community driven we try to be with all things Sketch2React, and how that has been one of our top priorities from the very beginning.<\/p>\n<p>The question was asked by a very active member of our Slack community:<\/p>\n<p>\u201d<em>Does Sketch2React work with Craft Manager for Sketch?<\/em>\u201d.<\/p>\n<p>Since I personally hadn\u2019t been using Craft for years I didn\u2019t have a great answer for that more than the usual \u201dwe\u2019ll look into that, thanks\u201d ? ?<\/p>\n<p><em>Btw thanks Jason for inspiring me to create this very tutorial.<\/em><\/p>\n<h3>Where to\u00a0start?<\/h3>\n<p>You need to start somewhere. Of course, being the design nerd that I am I thought to myself \u201d<em>Hmm InVision DSM seems really really nice, I have been meaning to try it out, now is the perfect time, let\u2019s do this!<\/em>\u201d<\/p>\n<h4>Tutorial Requirements<\/h4>\n<ul>\n<li>Latest version of <a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch 55+<\/a>\n<\/li>\n<li>Latest version of <a href=\"https:\/\/www.invisionapp.com\/craft\" target=\"_blank\" rel=\"noopener noreferrer\">Craft Manager<\/a>\n<\/li>\n<li>Free <a href=\"https:\/\/www.invisionapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">InVision Account<\/a> (so you can use DSM)<\/li>\n<li>Latest version of <a href=\"https:\/\/sketch2react.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React 1.5<\/a>\n<\/li>\n<li>Basic understanding of Sketch2React and <a href=\"https:\/\/www.youtube.com\/playlist?list=PLlXDF4NEE6YkzKp-TMwg_OymK5o_-B9gE\" target=\"_blank\" rel=\"noopener noreferrer\">how to build components<\/a>\n<\/li>\n<\/ul>\n<h3>What is\u00a0DSM?<\/h3>\n<p>It stands for <strong>Design System Manager<\/strong> and it\u2019s InVision\u2019s answer to the ever growing question: <strong><em>\u201cHow the hell do we keep our component library in sync between designers?\u201d<\/em><\/strong><\/p>\n<blockquote><p>It\u2019s like a design CMS for Sketch <em>?<\/em>\n<\/p><\/blockquote>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1674\" data-height=\"938\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*irXhtbKWsXEyvnFa2KS1vg.gif\"><figcaption class=\"wp-caption-text\">Seeing your component library come to life bit by bit is a really nice\u00a0feeling<\/figcaption><\/figure>\n<h3>What I love about InVision\u00a0DSM<\/h3>\n<h4><strong>It works really well with Sketch2React!<\/strong><\/h4>\n<p>Not only that, it works really well with Sketch (<em>duh!<\/em>)\u200a\u2014\u200athe whole workflow feels natural. It\u2019s really easy to just jump in, start adding components, text styles, colours, update them, keep on building.<\/p>\n<h4>It\u2019s the fastest way to kickstart your S2R\u00a0projects<\/h4>\n<p>Once you have built up your S2R component library you really start to ripe the fruits of your hard labor. <strong><em>You are practically drag+dropping real code components onto Sketch, something you really need to experience.<\/em><\/strong><\/p>\n<p>It\u2019s surreal and even myself, deeply invested in Sketch2React, have a hard time getting used to it. It\u2019s amazeballs!<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1674\" data-height=\"938\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MPomglDa6LPTitd7nR4vSA.gif\"><figcaption class=\"wp-caption-text\">Write down some useful instructions for your other designers and baam they will get up to speed in no time\u00a0??<\/figcaption><\/figure>\n<h4>Building feels\u00a0natural<\/h4>\n<p>We are designers and we love building things. Using DSM really enhances that feeling. You can write down documentation, scribble down small tool tips, divide things into sections, the tool is a delight to use.<\/p>\n<hr>\n<h3>What I don\u2019t\u00a0love<\/h3>\n<h4>You always need to be\u00a0online<\/h4>\n<p>To access and update your design system library you always need to have an internet connection. Bummer if you\u2019re commuting and feel like updating your DSM on the go. Totally understandable of course, the very nature of DSM is to share everything with others. Would be great with some kind of offline magic though. One can wish ??\u200d\u2642\ufe0f<\/p>\n<p><strong>Work around<\/strong><\/p>\n<p>Make sure to download all your components to a Sketch doc <em>before<\/em> jumping on that commuter train. Or just use your companies shared internet connection thingie and you can do that jazz whenever wherever. ?<\/p>\n<h4>Pricing models<\/h4>\n<p>There is only one pricing model and it\u2019s hidden. Well technically <em>free <\/em>is also a plan, so two then. <strong>Free and Enterprise<\/strong>. For this tutorial I\u2019m just using Free.<\/p>\n<p>Enterprise comes with a mystical hidden price tag. Enterprise lets you share your DSM with other designers which is (of course) amazing. Also you get some kind of code inspect thingie but that is out of scope for this tutorial.<\/p>\n<p>I\u2019m fine with the free version for now since I\u2019m building myself a Sketch2React Component Library, that has exactly one user. Me ??\u200d\u2642\ufe0f\u2764\ufe0f?<\/p>\n<p>InVision if you\u2019re reading this, please add some fair plans to us designers that don\u2019t have the need to use DSM on enterprise level. You have a great product that many many designers are missing out on. ??\u200d\u2642\ufe0f And honestly, the whole \u201dcontact us for prices\u201d scares the hell out of me and I\u2019m not alone.<\/p>\n<hr>\n<h3>So let\u2019s begin testing\u00a0?<\/h3>\n<p>This is what you need to do before jumping into Sketch:<\/p>\n<ol>\n<li>Make sure you have the very latest version of <a href=\"https:\/\/www.invisionapp.com\/craft\" target=\"_blank\" rel=\"noopener noreferrer\">Craft Manager <\/a>installed on your computer machine thingie<\/li>\n<li>Make sure you have the very latest version of Sketch 55.2<\/li>\n<li>Make sure you have a basic understanding of how S2R works, this will be very confusing if not<\/li>\n<\/ol>\n<h3>Preparation is\u00a0key!<\/h3>\n<ol>\n<li>Look at the introductory video that appears first time you click on the DSM icon inside Craft, it\u2019s really great and totally worth 3\u20134 minutes of your lifetime<\/li>\n<li>Here\u2019s even more great <a href=\"https:\/\/www.invisionapp.com\/design-system-manager\/learn\" target=\"_blank\" rel=\"noopener noreferrer\">learning resources<\/a> for DSM<\/li>\n<li>Make sure you have a couple of <strong>real code Sketch2React components<\/strong> for this test, feel free to just copy\/paste from any of our <a href=\"https:\/\/sketch2react.io\/resources.php\" target=\"_blank\" rel=\"noopener noreferrer\">free demo documents<\/a> for this purpose<\/li>\n<li>Make sure you convert all of your code components to Sketch Symbols before adding them as <strong>Components<\/strong> inside DSM<\/li>\n<\/ol>\n<h3>Clarification<\/h3>\n<p><strong>That last part is crucial. <\/strong>You need to convert anything you want to reuse in other documents (as real S2R code components) into <strong>Sketch symbols.<\/strong><\/p>\n<blockquote><p>Basically everything that you want to appear in our code app and therefore code is considered a code component by our framework.<\/p><\/blockquote>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1674\" data-height=\"938\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*HutlBKHA5_g6_UdwCw8SBw.gif\"><figcaption class=\"wp-caption-text\">You need to convert EVERY code component into a Sketch symbol BEFORE uploading to DSM or it will not\u00a0work<\/figcaption><\/figure>\n<h4>Example<\/h4>\n<ol>\n<li>Style your <strong>{text}<\/strong> as funky and stylish as you need it to be<\/li>\n<li>Convert it to a Sketch symbol and call it <strong>H1<\/strong> or <strong>H2<\/strong> or <strong>Paragraph<\/strong> depending on what component you\u2019re making<\/li>\n<li>Use the shortcut <strong>\u2318L<\/strong> to fire up DSM<\/li>\n<li>Go to the folder that is called <strong>Components<\/strong>\n<\/li>\n<li>Select the freshly squeezed symbol you just created from the Layer List<\/li>\n<li>Create a subfolder inside Components and call it whatever you want, mine is called <strong><em>Text (Sketch2React)<\/em><\/strong>\n<\/li>\n<li>Click the big <strong>+ icon<\/strong> inside of the DSM interface<\/li>\n<li>Your Sketch2React Symbol will now be added into Components inside of DSM and available to be added to whatever new blank Sketch file you need it to be in\u200a\u2014\u200aamazeballs\u00a0!<\/li>\n<\/ol>\n<h3>Lets add a grid to DSM\u00a0?<\/h3>\n<p>Grids are great and they save you lots and lots of time. For speeding up this part make sure you first have downloaded our <a href=\"https:\/\/sketch2react.io\/resources\/GridsDemo.zip\" target=\"_blank\" rel=\"noopener noreferrer\">9 Free Grids<\/a> document.<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"1674\" data-height=\"938\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*kUtjwLM9nOmCQOPSJ5RA8A.gif\"><br \/>\n<\/figure>\n<h3>Converting the grid to a Sketch\u00a0symbol<\/h3>\n<ol>\n<li>Open up <em>9 Free Grids<\/em>\n<\/li>\n<li>Select any of the available grids, I\u2019ll choose the one that is called <strong><em>4 x 4 Grid<\/em><\/strong>\n<\/li>\n<li>Select <strong>{container} <\/strong><em>(see above GIF)<\/em>\n<\/li>\n<li>You could delete <strong>Title {row} [m4] <\/strong>if you want since that is only used to describe the grid name in our demo<\/li>\n<li>With<strong> {container} <\/strong>selected go to <strong>Create Symbol<\/strong> (you can right-click and choose it or just use the icon shortcut like I do) and call it <strong>4 x 4 Grid <\/strong><em>(or anything else)<\/em>\n<\/li>\n<\/ol>\n<figure>\n<p><img decoding=\"async\" data-width=\"1674\" data-height=\"938\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*c_xmA6q5uLNWi4IApZaNJA.gif\"><br \/>\n<\/figure>\n<h3>Uploading your Sketch2React Grid to\u00a0DSM<\/h3>\n<ol>\n<li>Fire up DSM with the neat shortcut <strong>\u2318L<\/strong>\n<\/li>\n<li>Select the freshly created symbol called <strong>4 x 4 Grid<\/strong>\n<\/li>\n<li>Go to Components and create a new subfolder, call it <strong>Grids (Sketch2React) <\/strong>so you can separate S2R code components from non-code components<\/li>\n<li>With the 4 x 4 Grid symbol selected press the <strong>+ button in DSM <\/strong>(like below) and the upload will begin ??<\/li>\n<\/ol>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1674\" data-height=\"938\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BrB3j9w-JS_QgUAq2XNkcQ.gif\"><figcaption class=\"wp-caption-text\">Neat and\u00a0?<\/figcaption><\/figure>\n<h3>Using your Sketch2React DSM Components in\u00a0Sketch<\/h3>\n<p>For most use cases it\u2019s really just drag and drop onto a new Sketch document and you\u2019re good to go.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1674\" data-height=\"938\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*KGfRKPF1w0kBTNxn0wpoXw.gif\"><figcaption class=\"wp-caption-text\">Most use cases is just drag and drop and you good to\u00a0go<\/figcaption><\/figure>\n<h3>Most use\u00a0cases<\/h3>\n<ol>\n<li>Create a new Sketch doc <strong>\u2318N<\/strong>\n<\/li>\n<li>Rename Page 1 and call it <strong>Start here<\/strong>\n<\/li>\n<li>Create a new artboard, just use one of the built-in Sketch web or mobile templates, the important thing is to call it <strong>Start<\/strong>\n<\/li>\n<li>Fire up InVision DSM <strong>\u2318L<\/strong>\n<\/li>\n<li>Drag and drop any of your S2R enhanced real code components from DSM onto your blank artboard<\/li>\n<li><strong>Save your document<\/strong><\/li>\n<li>Open up our code app and link to this very same Sketch doc<\/li>\n<li>You should see the S2R components that you just drag+dropped from DSM in our code app<\/li>\n<li>Do a happy dance!<\/li>\n<\/ol>\n<figure>\n<p><img decoding=\"async\" data-width=\"220\" data-height=\"123\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*alcxOFA8q7gtFR-G6LMTSA.png\"><br \/>\n<\/figure>\n<h3>Grids &amp; Complex Layouts Use\u00a0Cases<\/h3>\n<p>Say that you use one of our 9 Free Grids or you have designed your own <strong>template grids<\/strong> by just using our practical {rectangle} component, divided everything nicely into {rows} {cols}\u200a\u2014\u200aand then saved them as stated above as Sketch Symbols. When drag + dropping your Grid S2R DSM components onto new documents you will want to do this:<\/p>\n<ol>\n<li>Create a new Sketch doc <strong>\u2318N<\/strong>\n<\/li>\n<li>Rename Page 1 and call it <strong>Start here<\/strong>\n<\/li>\n<li>Create a new artboard, just use one of the built-in Sketch web or mobile templates, the important thing is to call it <strong>Start<\/strong>\n<\/li>\n<li>Fire up InVision DSM <strong>\u2318L<\/strong>\n<\/li>\n<li>Drag and drop any of your uploaded S2R Grids from DSM onto your blank artboard<\/li>\n<li><strong>Save your document<\/strong><\/li>\n<li>Open up our code app and link to this very same Sketch doc<\/li>\n<li>You should see the S2R Grid components that you just drag+dropped from DSM in our code app<\/li>\n<li>Now select the S2R Grid Component, right-click and select <strong>Detach from Symbol<\/strong>\n<\/li>\n<\/ol>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1674\" data-height=\"938\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*v1NyM3gjiG1gaDl-IUrHpg.gif\"><figcaption class=\"wp-caption-text\">Detach from symbol to populate the grids with real content and you\u2019re good to go\u00a0??<\/figcaption><\/figure>\n<h4>Why detach from\u00a0symbol?<\/h4>\n<p>Because, big chances are, you will want to populate each {col} with your real content instead of our colourful {rectangle} component ?\u2705<\/p>\n<p>Of course, say that you first start with a very simple grid, fill it with content and want to convert this into a complex code component that you can update using the overrides? Nemas problemas, just follow the exact same instructions that you now have learned. ?<\/p>\n<p>That was all folks, hope you\u2019ll enjoy InVision DSM together with Sketch2React as much as I do.<\/p>\n<hr>\n<p>As always, have a great one ?\u2764\ufe0f<\/p>\n<p><em>\/\/Juan Maguid, Team Sketch2React<\/em><\/p>\n<h3>Read this tutorial\u00a0offline?<\/h3>\n<p>We just updated our awesome free e-book Sketch2React Pocket Guide and included (amongst many new thingies) this lengthy tutorial. Download from below ??????<\/p>\n<p><a href=\"https:\/\/sketch2react.io\/resources.php\">https:\/\/sketch2react.io\/resources.php<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is another shining example of how community driven we try to be with all things Sketch2React, and how that has been one of our top priorities from the very beginning. The question was asked by a very active member of our Slack community: \u201dDoes Sketch2React work with Craft Manager for Sketch?\u201d. Since I personally&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to use Sketch2React together with InVision Design System Manager<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[132,131,10,55],"class_list":["post-79","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-design-system-manager","tag-invision","tag-sketch","tag-sketch2react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Sketch2React together with InVision Design System Manager | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Sketch2React together with InVision Design System Manager - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"This is another shining example of how community driven we try to be with all things Sketch2React, and how that has been one of our top priorities from the very beginning. The question was asked by a very active member of our Slack community: \u201dDoes Sketch2React work with Craft Manager for Sketch?\u201d. Since I personally&hellip;&nbsp;Read More &raquo;How to use Sketch2React together with InVision Design System Manager\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-03T12:46:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:26:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to use Sketch2React together with InVision Design System Manager\",\"datePublished\":\"2019-07-03T12:46:10+00:00\",\"dateModified\":\"2020-06-18T07:26:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/\"},\"wordCount\":1665,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg\",\"keywords\":[\"Design System Manager\",\"Invision\",\"Sketch\",\"Sketch2react\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/\",\"name\":\"How to use Sketch2React together with InVision Design System Manager - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg\",\"datePublished\":\"2019-07-03T12:46:10+00:00\",\"dateModified\":\"2020-06-18T07:26:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Sketch2React together with InVision Design System Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Sketch2React together with InVision Design System Manager | Sketch2React Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/","og_locale":"en_US","og_type":"article","og_title":"How to use Sketch2React together with InVision Design System Manager - Sketch2React Blog","og_description":"This is another shining example of how community driven we try to be with all things Sketch2React, and how that has been one of our top priorities from the very beginning. The question was asked by a very active member of our Slack community: \u201dDoes Sketch2React work with Craft Manager for Sketch?\u201d. Since I personally&hellip;&nbsp;Read More &raquo;How to use Sketch2React together with InVision Design System Manager","og_url":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-07-03T12:46:10+00:00","article_modified_time":"2020-06-18T07:26:59+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to use Sketch2React together with InVision Design System Manager","datePublished":"2019-07-03T12:46:10+00:00","dateModified":"2020-06-18T07:26:59+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/"},"wordCount":1665,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg","keywords":["Design System Manager","Invision","Sketch","Sketch2react"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/","url":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/","name":"How to use Sketch2React together with InVision Design System Manager - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg","datePublished":"2019-07-03T12:46:10+00:00","dateModified":"2020-06-18T07:26:59+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*1cYhlxcbuBShuXkAFQM22w.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-together-with-invision-design-system-manager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use Sketch2React together with InVision Design System Manager"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"predecessor-version":[{"id":322,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/79\/revisions\/322"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}